:root {
  --bg: #fff;
  --fg: #111;
  --muted: #666;
  --border: #eaeaea;
  --max-w: 1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
}
.site-header .brand-logo {
  /* 손 대표 요청(mail 1781): 현재의 65% 로 축소 (30px → 19.5px). 비율 유지. */
  height: 19.5px;
  width: auto;
  display: block;
}
.site-nav a { margin-left: 16px; color: var(--muted); }

.site-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px;
}

.site-footer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.page-title { font-size: 24px; margin: 0 0 8px; font-weight: 700; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 16px 0 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.filter-bar select,
.filter-bar input[type="search"] {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}
.filter-bar input[type="search"] { min-width: 240px; flex: 1; }
.filter-bar button {
  padding: 8px 16px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.filter-bar button:hover { opacity: 0.85; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 32px;
}
.card { display: block; }
.card:hover { text-decoration: none; }
.card:hover .name { text-decoration: underline; }
.card .cover {
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 자켓 이미지 부재 시 앨범명을 새긴 타이포 커버 (card + detail 공유).
   사진이 아니라 코드로 그리는 텍스트 커버 — 생성비 0, 실제 자켓 들어오면 자동 대체. */
.cover-typo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16% 14%;
  color: #fff;
  text-align: center;
  user-select: none;
}
.cover-typo-artist {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.72;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cover-typo-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.32;
  word-break: keep-all;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail .cover-typo { padding: 14% 12%; gap: 14px; }
.detail .cover-typo-artist { font-size: 14px; }
.detail .cover-typo-title { font-size: 30px; -webkit-line-clamp: 6; }
.card .artist { color: var(--muted); font-size: 12px; margin-bottom: 2px; letter-spacing: 0.02em; text-transform: uppercase; }
.card .name {
  color: var(--fg);
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  font-weight: 500;
}
.card .meta { color: var(--muted); font-size: 13px; }
.card .meta.deadline { font-size: 12px; margin-top: 2px; }

.pagination { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 64px 0 0; }
.pagination a, .pagination span {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
}
.pagination a:hover { color: var(--fg); border-color: var(--fg); text-decoration: none; }
.pagination .current { color: var(--fg); border-color: var(--fg); }

.empty {
  text-align: center;
  padding: 96px 16px;
  color: var(--muted);
}

.detail {
  display: grid;
  grid-template-columns: minmax(280px, 480px) 1fr;
  gap: 48px;
  margin-top: 16px;
}
.detail .cover { aspect-ratio: 1 / 1; background: #f4f4f4; border-radius: 8px; overflow: hidden; }
.detail .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail .info .artist { color: var(--muted); font-size: 14px; margin-bottom: 8px; letter-spacing: 0.02em; text-transform: uppercase; }
.detail .info h1 { font-size: 28px; margin: 0 0 16px; line-height: 1.25; font-weight: 700; }
.detail .info .price { font-size: 20px; font-weight: 600; margin-bottom: 24px; }
.detail .info dl { display: grid; grid-template-columns: 100px 1fr; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--border); margin: 0; }
.detail .info dt { color: var(--muted); font-size: 14px; }
.detail .info dd { margin: 0; font-size: 14px; }

.detail-section { margin-top: 64px; }
.detail-section h2 { font-size: 13px; margin: 0 0 16px; color: var(--muted); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.detail-section .description { white-space: pre-wrap; font-size: 15px; line-height: 1.7; }
.detail-section .variants { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-section .variants .chip { border: 1px solid var(--border); padding: 6px 14px; border-radius: 999px; font-size: 13px; }
.detail-section .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.detail-section .gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; display: block; background: #f4f4f4; }
.detail-section .pack-shot {
  /* 손 대표 요청(mail 3027): 상세 이미지가 너무 작아 안의 정보(가격·사양)를 못 읽음
     → 컨테이너 풀폭(≈1136px, 최소 900px 이상)으로 확대. 기존 max-height:80vh 가
     세로로 긴 상세 시트를 높이 기준으로 축소해(가로 ~345px) 판독 불가였던 게 원인.
     height 제약 제거하고 width:100% 로 채워 소매점 배포 폭 수준으로 크게 노출.
     max-width:100% 유지로 모바일 무회귀. */
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background: #f4f4f4;
}

.detail-section .tracklist { padding-left: 24px; font-size: 15px; line-height: 1.9; }
.detail-section .tracklist li { padding: 2px 0; }
.detail-section .tracklist-tba { color: var(--muted); font-style: italic; }
/* VINYL A/B SIDE 면 라벨 (tracklist_sides 렌더) */
.detail-section .side-label { margin: 12px 0 4px; font-weight: 700; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.detail-section .side-label:first-of-type { margin-top: 0; }
.detail-section .request-notes { padding-left: 22px; font-size: 14px; line-height: 1.7; color: var(--fg); }
.detail-section .request-notes li { padding: 2px 0; }
/* 앨범 소개: linebreaks 가 문단을 <p> 로 감싸므로 white-space:pre-wrap(.description 상속)을
   normal 로 되돌려 <p> 사이 literal 개행이 빈 줄로 이중 렌더되는 것을 방지 + 문단 마진 정규화.
   (손정욱 대표 피드백 2026-06-16: 앨범소개 줄간격 과대) */
.detail-section .album-description { font-size: 15px; line-height: 1.7; white-space: normal; }
.detail-section .album-description p { margin: 0 0 0.85em; }
.detail-section .album-description p:last-child { margin-bottom: 0; }
/* 화장품 고지사항: album-description 과 동일 — linebreaks 가 <p> 로 감싸므로
   pre-wrap(.description 상속)을 normal 로 되돌려 <p> 사이 이중 개행 방지 (Cycle IV-b). */
.detail-section .statutory-notice { font-size: 15px; line-height: 1.7; white-space: normal; }
.detail-section .statutory-notice p { margin: 0 0 0.85em; }
.detail-section .statutory-notice p:last-child { margin-bottom: 0; }
.detail .info .price .price-note { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 8px; }

.back-link { display: inline-block; margin-bottom: 16px; color: var(--muted); font-size: 14px; }
.back-link:hover { color: var(--fg); }

@media (max-width: 720px) {
  .site-header, .site-main, .site-footer { padding-left: 16px; padding-right: 16px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .detail { grid-template-columns: 1fr; gap: 24px; }
  .filter-bar { gap: 8px; }
  .filter-bar input[type="search"] { min-width: 100%; flex-basis: 100%; }
  .detail .info h1 { font-size: 22px; }
}