/* ── 레이아웃 ── */
.md-list { max-width: 1200px; margin: 0 auto; padding: 35px 0; }
.md-list-header { padding: 24px 0 8px; }
.md-list-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color: #111; }
.md-list-count { font-size: 0.875rem; color: #888; margin: 0; }

/* ── 필터 ── */
.md-filter-group { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.md-filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.md-filter-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border: 1px solid #ddd; border-radius: 20px; min-width: 78px;
    background: #fff; color: #555; font-size: 0.8125rem; cursor: pointer; justify-content: center;
    transition: all 0.15s;
}
.md-filter-btn:hover { border-color: #999; color: #333; }

/* 통신사 활성 */
#telecomFilter .md-filter-btn.active { color: #222; border-color: #222; }
/* 가입유형 활성 */
#orderTypeFilter .md-filter-btn.active { color: #222; border-color: #222; }
/* 유형 활성 */
#itemTypeFilter .md-filter-btn.active { color: #222; border-color: #222; }
/* 제조사 활성 */
#manufacturerFilter .md-filter-btn.active { color: #222; border-color: #222; }

.md-filter-count {
    display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
    text-align: center; font-size: 0.6875rem; border-radius: 9px;
    background: rgba(0,0,0,0.08); color: inherit;
}
#telecomFilter .md-filter-btn.active .md-filter-count { background: rgba(255,255,255,0.25); }

.md-sort-select {
    padding: 6px 28px 6px 10px; border: 1px solid #ddd; border-radius: 6px;
    font-size: 0.8125rem; color: #333; background: #fff;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    cursor: pointer;
}

/* ── 검색 ── */
.md-search-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.md-search-input {
    flex: 1; max-width: 300px; padding: 6px 12px;
    border: 1px solid #ddd; border-radius: 6px;
    font-size: 0.8125rem; color: #333; background: #fff;
}
.md-search-input:focus { outline: none; border-color: #999; }
.md-search-btn {
    padding: 6px 16px; border: 1px solid #ddd; border-radius: 6px;
    background: #fff; color: #555; font-size: 0.8125rem; cursor: pointer;
    transition: all 0.15s;
}
.md-search-btn:hover { border-color: #999; color: #333; }

/* ── 그리드 ── */
.md-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px) { .md-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .md-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .md-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ── 카드 ── */
.md-card-wrap { }
.md-card {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid #eee; border-radius: 10px; overflow: hidden;
    background: #fff; transition: transform 0.15s, box-shadow 0.15s;
}
.md-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* 카드 이미지 */
.md-card-image {
    position: relative; padding-top: 100%; background: #f8f9fa; overflow: hidden;
}
.md-card-image img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 12px;
}
.md-card-noimg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #ccc; font-size: 0.875rem;
}
/* 아이콘 + 태그 뱃지 */
.md-card-badges {
    position: absolute; top: 8px; left: 8px; right: 8px; z-index: 1;
    display: flex; gap: 4px; flex-wrap: wrap;
}
.md-badge-icon {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
    white-space: nowrap; color: #fff;
}
.md-badge-icon-img {
    display: block; height: auto; border-radius: 4px;
}
.md-tag {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: #333; color: #fff; font-size: 0.6875rem; line-height: 1.4;
}

/* 카드 본문 */
.md-card-body { padding: 12px; }

/* 메타: ID, 통신사, 코드, 유형 */
.md-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.md-device-id { font-size: 0.625rem; color: #bbb; font-family: monospace; }
.md-telecom { font-size: 0.75rem; font-weight: 600; color: #2563eb; padding: 1px 6px; border-radius: 3px; }
.md-telecom-code { font-size: 0.6875rem; color: #999; }
.md-item-type {
    font-size: 0.6875rem; color: #7c3aed; background: #f3f0ff;
    padding: 1px 6px; border-radius: 3px;
}
.md-item-type-code { font-size: 0.625rem; color: #bbb; }
.md-telecom-best { color: #2e7d32; font-weight: 600; background: #e8f5e9; padding: 1px 6px; border-radius: 3px; }
.md-telecom-siblings { font-size: 0.6875rem; color: #888; }
.md-order-type {
    font-size: 0.6875rem; color: #16a34a; background: #ecfdf5;
    padding: 1px 6px; border-radius: 3px; font-weight: 500;
}

/* 기기명 */
.md-card-name {
    font-size: 0.9375rem; font-weight: 600; color: #111;
    margin-bottom: 2px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.md-card-name-en { font-size: 0.6875rem; color: #aaa; margin-bottom: 2px; }

/* 모델코드 + 제조사 */
.md-card-sub { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.md-model-code { font-size: 0.6875rem; color: #888; font-family: monospace; }
.md-manufacturer { font-size: 0.6875rem; color: #aaa; }
.md-manufacturer::before { content: '·'; margin-right: 6px; }

/* 상태 + 정렬 */
.md-card-status { display: flex; gap: 8px; margin-bottom: 6px; }
.md-status { font-size: 0.625rem; color: #16a34a; background: #f0fdf4; padding: 1px 6px; border-radius: 3px; }
.md-sort-order { font-size: 0.625rem; color: #999; }

/* 용량 옵션 */
.md-storage-list { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.md-storage-item {
    font-size: 0.6875rem; padding: 1px 6px; border: 1px solid #e5e5e5;
    border-radius: 3px; color: #666; background: #fafafa; cursor: pointer;
    transition: all 0.15s;
}
.md-storage-item:hover { border-color: #999; color: #333; }
.md-storage-item.active { color: #2563eb; border-color: #2563eb; }

/* 색상 */
.md-color-list { display: flex; gap: 3px; align-items: center; margin-bottom: 8px; }
.md-color-dot {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12); flex-shrink: 0;
}
.md-color-more { font-size: 0.6875rem; color: #999; margin-left: 2px; }

/* ── 가격 영역 ── */
.md-price-area { padding-top: 8px; border-top: 1px solid #f0f0f0; }
.md-price-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.md-price-label { font-size: 0.6875rem; color: #999; min-width: 48px; }
.md-price-original { font-size: 0.7rem; color: #999; }
.md-price-original s { text-decoration: line-through; }
.md-rate-label {
    font-size: 0.75rem; font-weight: 700; color: #ef4444;
}
.md-price-low { font-size: 1.125rem; font-weight: 700; color: #ef4444; }
.md-price-monthly { font-size: 0.75rem; color: #666; }
.md-price-only { font-size: 1.0625rem; font-weight: 700; color: #2563eb; }
.md-no-subsidy { font-size: 0.6875rem; color: #ccc; margin-top: 4px; }

/* 할인 상세 */
.md-discount-detail { margin: 6px 0; padding: 6px 8px; background: #f8f9fa; border-radius: 6px; }
.md-discount-detail dl {
    display: flex; justify-content: space-between; margin: 0;
    font-size: 0.6875rem; color: #666; line-height: 1.8;
}
.md-discount-detail dt { font-weight: 400; }
.md-discount-detail dd { margin: 0; font-weight: 500; }
.md-discount-point dt, .md-discount-point dd { font-weight: 600; color: #2563eb; }
.md-discount-total dt, .md-discount-total dd { font-weight: 700; color: #ef4444; }

/* 대표 조합 */
.md-best-combo { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.md-combo-label { font-size: 0.625rem; color: #999; }
.md-combo-tag {
    font-size: 0.6875rem; padding: 2px 6px; border-radius: 3px;
}
.md-combo-order { background: #ecfdf5; color: #16a34a; }
.md-combo-bill { background: #eff6ff; color: #2563eb; }
.md-combo-bill-price { font-size: 0.6875rem; color: #888; }

/* 카드 하단 정보 */
.md-card-footer { display: flex; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid #f5f5f5; }
.md-info-item { font-size: 0.625rem; color: #bbb; }

/* ── 빈 상태 ── */
.md-empty { text-align: center; padding: 60px 0; color: #999; }
.md-empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.md-empty p { margin: 0; font-size: 0.875rem; }

/* ── 페이지네이션 ── */
.md-pagination { margin-top: 24px; text-align: center; }
.md-pagination ul { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 4px; }
.md-pagination li { }
.md-pagination .page-btn {
    display: inline-block; min-width: 32px; height: 32px; line-height: 32px;
    text-align: center; border: 1px solid #ddd; border-radius: 6px;
    background: #fff; color: #333; font-size: 0.8125rem; cursor: pointer;
    transition: all 0.15s;
}
.md-pagination .page-btn:hover { background: #f5f5f5; border-color: #bbb; }
.md-pagination li.active .page-btn { background: #222; color: #fff; border-color: #222; }

/* ── 스켈레톤 ── */
.md-skeleton { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px) { .md-skeleton { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .md-skeleton { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .md-skeleton { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.md-skeleton-item { border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid #eee; }
.md-skeleton-img {
    padding-top: 100%;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200% 100%; animation: md-shimmer 1.5s infinite;
}
.md-skeleton-body { padding: 12px; }
.md-skeleton-line {
    height: 12px; background: #eee; border-radius: 4px; margin-bottom: 8px;
    animation: md-shimmer 1.5s infinite;
}
.md-skeleton-line:nth-child(1) { width: 40%; }
.md-skeleton-line:nth-child(2) { width: 80%; height: 14px; }
.md-skeleton-line:nth-child(3) { width: 60%; }
.md-skeleton-line:nth-child(4) { width: 50%; }
@keyframes md-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 모바일 2열 최적화 (480px 이하) ── */
@media (max-width: 480px) {
    .md-list { padding: 20px 0; }
    .md-list-header { padding: 16px 0 6px; }
    .md-list-title { font-size: 1.25rem; }
    .md-filter-group { gap: 4px; margin-bottom: 6px; }
    .md-filter-btn { padding: 4px 10px; font-size: 0.75rem; min-width: auto; gap: 2px; }
    .md-filter-count { min-width: 16px; height: 16px; line-height: 16px; font-size: 0.625rem; }
    .md-filter-bar { margin-bottom: 10px; }
    .md-sort-select { padding: 4px 24px 4px 8px; font-size: 0.75rem; }
    .md-search-input { padding: 4px 10px; font-size: 0.75rem; }
    .md-search-btn { padding: 4px 12px; font-size: 0.75rem; }
    .md-card-body { padding: 8px; }
    .md-card-name { font-size: 0.8125rem; }
    .md-card-image img { padding: 8px; }
    .md-price-low { font-size: 0.9375rem; }
    .md-price-only { font-size: 0.9375rem; }
}