/* retrokidworks.com
   색은 브랜드 이미지에서 직접 샘플링했다 (assets/brand/).
   앰버 #EB8A1B(바이저) · 크림 #E9CB9C(수트) · 차콜 #222828(외곽선) ·
   올리브 #8F8035(새싹) · 모래 #A57A45 · 먼 언덕 #724E2C.

   라이트 단일 테마로 확정한다. 브랜드가 명백히 따뜻한 종이·크림 톤이라
   다크로 두면 정면으로 싸운다.

   앰버는 채움·강조에만 쓴다. 크림 위 본문 텍스트로 쓰면 대비가 부족하다. */

@font-face {
  font-family: "Fraunces";
  src: url("/font/fraunces-latin.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
}

:root {
  color-scheme: light;

  --paper: #f3e9d6;      /* 페이지 바탕. 수트 크림보다 한 단계 밝게 — 안 그러면 카드·커버가 묻힌다 */
  --surface: #faf3e4;
  --surface-sunk: #ece0c8;
  --line: #ded0b2;
  --line-soft: #e8dcc3;

  /* 3단 램프. 전부 크림 바탕에서 WCAG AA(4.5:1)를 넘도록 실측해 골랐다 —
     따뜻한 저채도 색은 눈대중으로 고르면 대비가 쉽게 모자란다. */
  --ink: #222828;        /* 캐릭터 외곽선 색. 12.4:1 */
  --ink-soft: #554c3f;   /* 6.7:1 */
  --muted: #6f6353;      /* 4.9:1 */

  --amber: #eb8a1b;      /* 바이저 */
  --amber-deep: #9a570a; /* 링크·텍스트용 4.7:1. 앰버 원색은 크림 위에서 3.4:1 밖에 안 나온다 */
  --amber-soft: #f1bb6b;
  --olive: #8f8035;      /* 새싹 */

  --radius: 12px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* 두 폭을 나눈다. 산문(히어로·라이선스·푸터)은 읽기 좋은 폭으로 좁게,
     트랙 목록은 여섯 덩어리(표지·제목/무드·아이콘·길이·칩·액션)를 한 줄에
     담아야 해서 넓게. 하나로 통일하면 둘 중 하나가 반드시 나빠진다. */
  --read: 860px;
  --wrap: 1060px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;

  /* 종이 그레인 — 브랜드의 매트한 질감을 잇는다. 파일 추가 없이 SVG 노이즈로 깐다. */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

a { color: var(--amber-deep); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 10;
  background: var(--amber); color: var(--ink);
  padding: 8px 12px; border-radius: 6px;
}

/* ── 히어로 띠 ────────────────────────────────────── */

.band { position: relative; line-height: 0; }

.band img {
  display: block;
  width: 100%;
  height: clamp(170px, 24vw, 300px);
  object-fit: cover;
  object-position: center 55%;
}

/* 아래 가장자리를 종이 바탕으로 녹여 이미지와 페이지를 잇는다. */
.band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(243, 233, 214, 0), var(--paper));
  pointer-events: none;
}

/* ── 히어로 ───────────────────────────────────────── */

.hero {
  max-width: var(--read);
  margin: 0 auto;
  padding: 8px 20px 8px;
}

.wordmark {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--amber-deep);
  margin: 0 0 22px;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(30px, 6.6vw, 52px);
  line-height: 1.14;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tagline {
  font-family: var(--display);
  font-size: clamp(18px, 3.4vw, 24px);
  color: var(--amber-deep);
  margin: 12px 0 0;
  font-weight: 600;
}

.rules {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.rules li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-soft);
  font-size: 15px;
}

.rules li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
}

/* ── 상황 카드 — 지평선 스와치 ────────────────────── */

.scenes-block { margin-top: 38px; }

.scenes-ask {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 14px;
}

.scenes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.scene {
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 0 14px;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 3px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.scene:hover { border-color: var(--ground); }

.scene[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

/* 하늘 위 땅. 그 사이 가는 지평선. 브랜드 구도를 카드 크기로 축약한 것이다. */
.horizon {
  display: block;
  height: 54px;
  margin-bottom: 10px;
  background:
    linear-gradient(to bottom, var(--sky) 0 62%, var(--ground) 62% 100%);
  position: relative;
}

.horizon::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 62%;
  height: 1.5px;
  background: rgba(34, 40, 40, 0.28);
}

.scene-name,
.scene-count,
.scene-blurb { padding: 0 13px; }

.scene-name {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
  /* 「Warm & everyday」만 두 줄이라 그대로 두면 카드마다 아래 줄이 어긋난다. */
  min-height: 2.5em;
}

.scene-count {
  font-size: 12.5px;
  color: var(--amber-deep);
  font-variant-numeric: tabular-nums;
}

.scene-blurb {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* ── 카탈로그 ─────────────────────────────────────── */

main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px 64px;
}

.catalog-head {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 26px;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

h2 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
}

/* gap 을 쓰면 「10 tracks」 사이가 벌어진다. 점은 margin 으로, 낱말 사이는 em 으로 띄운다. */
#tracks-heading { display: flex; align-items: baseline; }
#tracks-heading .scene-label { margin-left: 0.3em; }

#tracks-heading .dot {
  width: 10px; height: 10px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--scene-hue, var(--amber));
  border: 1px solid rgba(34, 40, 40, 0.3);
  align-self: center;
}

#tracks-heading .dot[hidden] { display: none; }

.clear {
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 1px;
  cursor: pointer;
  margin-left: auto;
}

.clear:hover { color: var(--amber-deep); border-color: var(--amber); }
.clear[hidden] { display: none; }

.tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* 다섯 칸 전부 고정 폭이거나 1fr 이다. 칩 개수가 2~4개로 달라도
   길이·칩·버튼이 모든 행에서 같은 x 에 온다 — 예전엔 전부 auto 한 칸에 몰려
   칩 수에 따라 80~129px 씩 흔들렸다. */
.track {
  display: grid;
  grid-template-columns: 64px 1fr 80px 193px auto;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
}

.track[hidden] { display: none; }
.track:target { border-color: var(--amber); }

.play {
  position: relative;
  width: 64px; height: 64px;
  padding: 0;
  border: 1px solid rgba(34, 40, 40, 0.15);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-sunk);
  cursor: pointer;
  display: block;
  /* 종이에 붙인 사진처럼 읽히게 */
  box-shadow: 0 1px 3px rgba(34, 40, 40, 0.12);
}

.cover { display: block; width: 64px; height: 64px; object-fit: cover; }

.play-icon {
  position: absolute;
  inset: 0;
  background: rgba(34, 40, 40, 0.45);
  opacity: 0;
  transition: opacity 0.12s;
}

.play-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

.play:hover .play-icon,
.play:focus-visible .play-icon,
.track.is-playing .play-icon { opacity: 1; }

.track.is-playing .play-icon::after {
  transform: translate(-50%, -50%);
  border: 0;
  width: 15px; height: 17px;
  background: linear-gradient(to right, var(--amber-soft) 0 6px, transparent 6px 9px, var(--amber-soft) 9px 15px);
}

.meta { min-width: 0; }

.song {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.song .ko {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}

/* 둘째 줄. 무드와 진행바가 같은 자리를 번갈아 쓴다 —
   같은 줄·같은 높이라 재생을 시작해도 레이아웃이 안 움직인다. */
.line2 {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 고정 높이. min-height 로 두면 range 입력의 기본 높이가 줄을 밀어 올려
     재생 시작 순간 행이 커지고 아래 목록이 통째로 밀린다. */
  height: 20px;
}

/* 줄바꿈하지 않는다. 20px 고정 줄을 넘치면 행이 무너진다.
   자리가 모자라면 뒤쪽 무드를 잘라낸다 — 보조 정보라 잘려도 된다. */
.moods {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.mood { white-space: nowrap; }

.moods[hidden] { display: none; }

/* 인라인 진행바. 하단 고정 바를 없애고 카드 안으로 들여왔다. */
.seek {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  margin: 0;      /* 기본 여백이 줄 높이를 밀어낸다 */
  padding: 0;
  border-radius: 3px;
  background: linear-gradient(to right, var(--amber) var(--pct, 0%), var(--surface-sunk) var(--pct, 0%));
  cursor: pointer;
}

.seek[hidden] { display: none; }

.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--amber);
  border: 1px solid rgba(34, 40, 40, 0.3);
}

.seek::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--amber);
  border: 1px solid rgba(34, 40, 40, 0.3);
}

/* 곡별 플랫폼 링크. 평소엔 조용히, 보고 있는 행에서만 또렷하게 — 칩과 같은 규칙. */
.links { display: flex; gap: 8px; flex: none; align-items: center; }

.links a {
  color: var(--muted);
  display: inline-flex;
  transition: color 0.12s;
}

.track:hover .links a, .track.is-playing .links a { color: var(--ink-soft); }
.links a:hover { color: var(--amber-deep); }

/* 자기 칸에서 우측 정렬. 예전엔 .moods 안에 얹혀 있어 열이 안 맞았다.
   평소엔 총 길이, 재생 중이면 「경과 / 총길이」를 보여준다 — 그래서 80px 가 필요하다. */
.dur {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* 버전 칩 — 「무엇을 재생할지」와 「무엇을 받을지」를 동시에 정한다.
   고정 폭 칸 안에서 좌측 정렬한다. 2칩 곡은 오른쪽이 비지만
   그 덕에 뒤따르는 액션 칸이 모든 행에서 같은 자리에 온다. */
.versions { display: flex; gap: 4px; flex-wrap: nowrap; }

.ver {
  font: inherit;
  font-size: 11.5px;
  line-height: 1;
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}

/* 평소엔 조용하게, 보고 있는 행에서만 또렷하게. 크기는 안 변한다. */
.track:hover .ver, .track.is-playing .ver { border-color: var(--line); color: var(--ink-soft); }
.ver:hover { color: var(--ink); border-color: var(--ink-soft); }

/* 선택 상태는 언제나 채워둔다 — 훑기만 해도 어느 버전인지 보인다. */
.ver.is-on,
.track:hover .ver.is-on,
.track.is-playing .ver.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.actions { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }

.btn {
  font: inherit;
  font-size: 12.5px;
  border-radius: 7px;
  padding: 7px 11px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* 크레딧 복사는 노출을 스트리밍으로 되돌리는 유일한 전환 지점이다.
   다만 열 곡 모두에 앰버를 칠하면 주황 벽이 되어 오히려 배경처럼 읽힌다.
   평소엔 조용히 두고, 지금 보고 있는 행에서만 불이 들어오게 한다.
   색만 바뀌므로 레이아웃은 어떤 상태에서도 안 움직인다. */
.btn.primary {
  color: var(--amber-deep);
  background: transparent;
  border-color: var(--line);
  font-weight: 500;
}

.track:hover .btn.primary,
.track.is-playing .btn.primary {
  background: var(--amber);
  border-color: rgba(34, 40, 40, 0.22);
  color: var(--ink);
}

.btn.primary:hover { background: var(--amber-soft); border-color: rgba(34, 40, 40, 0.22); }

.btn.quiet {
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--line);
}
.btn.quiet:hover { color: var(--ink); border-color: var(--ink-soft); }

.btn.is-copied {
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
}

/* ── 라이선스 ─────────────────────────────────────── */

.license {
  max-width: var(--read);
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 32px;
}

.lede { margin: 16px 0 24px; font-size: 17px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.cols h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
}

.cols h3.yes { color: var(--olive); }
.cols h3.no { color: var(--muted); }

.cols ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.cols li { font-size: 14.5px; color: var(--muted); }
.cols .yes + ul li { color: var(--ink); }

.commercial-note {
  margin: 26px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--ink-soft);
  background: var(--surface);
}

.credit-rule {
  margin: 14px 0 0;
  padding: 16px 18px;
  background: var(--surface);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
}

.no-claim { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ── 푸터 ─────────────────────────────────────────── */

footer {
  max-width: var(--read);
  margin: 0 auto;
  padding: 32px 20px 90px;
  border-top: 1px solid var(--line);
}

footer h2 { margin-bottom: 16px; }
.links { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.contact { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.fine { font-size: 13px; color: var(--muted); margin: 0; }

/* ── 모바일 (유입 대부분이 틱톡 인앱 브라우저) ─────── */

@media (max-width: 720px) {
  .scenes {
    /* 5개를 세로로 쌓으면 첫 화면을 다 먹는다. 가로 스트립으로 둔다. */
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 20px 4px;
    margin: 0 -20px;
    scrollbar-width: none;
  }
  .scenes::-webkit-scrollbar { display: none; }
  .scene { flex: 0 0 152px; scroll-snap-align: start; }
}

@media (max-width: 620px) {
  .band img { height: clamp(150px, 38vw, 220px); }
  .band::after { height: 60px; }
  /* 호버가 없으니 다르게 간다. 표지+제목 / 칩 / 액션 세 줄로 쌓되
     칩 개수와 무관하게 줄 높이가 같아 행 높이는 전부 균일하다. */
  .track {
    grid-template-columns: 56px 1fr auto;
    row-gap: 9px;
  }
  .play, .cover { width: 56px; height: 56px; }
  .play-icon::after { border-width: 8px 0 8px 13px; }
  .dur { grid-column: 3; }
  .versions { grid-column: 1 / -1; flex-wrap: wrap; }
  .actions { grid-column: 1 / -1; justify-content: flex-start; }
  /* 호버가 없어 조용한 상태로 두면 영영 안 띈다. 모바일은 항상 앰버. */
  .btn.primary {
    background: var(--amber);
    border-color: rgba(34, 40, 40, 0.22);
    color: var(--ink);
  }
  .cols { grid-template-columns: 1fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}