/* KANU PLAYLISTA — 버건디 지면 + 핑크 타이포 · LP (모바일 기본, PC는 폰 프레임) */
:root {
  --paper: #69131A;
  --accent: #EFB6B9;
  --ink: #FFF5F5;
  --muted: #F0C4C7;
  --font-ko: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-ko); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tb { text-box: trim-both cap alphabetic; }

/* ── 폰 ─────────────────────────────────
   세로 리듬 하나(--g): 위 여백 · 타이틀 · g · 문구 · g · LP · g · 로딩바 · g · KANU · 아래 여백.
   남는 높이를 이 간격들에 고르게 나누고, 짧은 화면에선 간격을 지키고 LP·타이틀을 줄인다. */
.stage { min-height: 100dvh; display: grid; place-items: center; }
.phone {
  --h: 100dvh;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--h);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--paper);
}
.upper, .deck, .lower {
  --s: min(calc(100cqw / 390), 1.1px);          /* 폭 390 = 1px. 가로 화면·태블릿에서 커지지 않게 1.1 상한 */
  --T0: calc(min(calc(var(--s) * 298), 328px) * .4497);  /* 타이틀 높이 (298×134) */
  --lp0: calc(var(--s) * 280);
  --txt: 52px;                                 /* 문구 2줄 자리 */
  --logo: calc(min(calc(var(--s) * 102), 112px) * .25);  /* KANU 로고 높이 (104×26) */
  --fixed: calc(var(--T0) + var(--txt) + var(--lp0) + 3px + var(--logo) + var(--safe-t) + var(--safe-b));
  --free: calc(var(--h) - var(--fixed));
  /* 간격 5.8칸 = 위 여백 .9 + 사이 간격 4 + 아래 여백 .9
     최소 간격은 화면 높이의 5.4%(26~36px), 최대는 폭 비례 64 */
  --gmin: clamp(26px, calc(var(--h) * .054), 36px);
  --g: clamp(var(--gmin), calc(var(--free) / 5.8), max(var(--gmin), calc(var(--s) * 64)));
  --short: max(0px, calc(var(--g) * 5.8 - var(--free)));   /* 모자라면 LP 7 : 타이틀 3 으로 줄임 */
  --extra: max(0px, calc(var(--free) - var(--g) * 5.8));   /* 남으면 위아래 여백에 반씩 */
  --T: calc(var(--T0) - var(--short) * .3);
  --lp: calc(var(--lp0) - var(--short) * .7);
  --edge: calc(var(--g) * .9 + var(--extra) / 2);
  --above: calc(var(--safe-t) + var(--edge) + var(--T) + 2 * var(--g) + var(--txt));
  --below: calc(var(--g) * 2 + 3px + var(--logo) + var(--edge) + var(--safe-b));
}
.notch { display: none; }

/* ── 위: 타이틀 + 로딩 문구 ──────────────── */
.upper {
  flex: none; width: 100%; height: var(--above);
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--safe-t) + var(--edge));
}
.title { flex: none; line-height: 0; }
.title img { width: calc(var(--T) / .4497); height: var(--T); display: block; }

/* ── 문구 ───────────────────────────── */
.copy { position: relative; flex: 1; width: 100%; max-width: 340px; padding: 0 20px; text-align: center; }
.copy p { position: absolute; inset: 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: opacity .35s ease, transform .4s ease; }
.c-search { font-size: clamp(16px, calc(var(--s) * 18), 19px); font-weight: 700; line-height: 1.42; letter-spacing: -.01em; color: var(--muted); word-break: keep-all; }
.c-search.is-swap { opacity: 0; transform: translateY(4px); }
.c-found { opacity: 0; transform: translateY(8px); pointer-events: none; }
.f-kicker { font-size: clamp(14px, calc(var(--s) * 15), 16px); font-weight: 600; color: var(--accent); letter-spacing: -.005em; }
.f-title { font-size: clamp(19px, calc(var(--s) * 21), 22px); font-weight: 800; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); word-break: keep-all; }
.phone.is-found .c-search { opacity: 0; transform: translateY(-6px); }
.phone.is-found .c-found { opacity: 1; transform: none; transition-delay: .12s; }

/* ── LP ─────────────────────────────── */
.deck { position: relative; width: var(--lp); height: var(--lp); flex: none; }
/* 배경 장식(assets/bg-decor.svg, design/make_decor.py 로 생성): 원점이 LP 중심. viewBox 476×640, LP 중심은 (240, 200) */
.bgart {
  position: absolute; z-index: -1; pointer-events: none; max-width: none;
  width: calc(var(--s) * 476); height: calc(var(--s) * 640); overflow: visible;
  left: calc(50% - var(--s) * 240); top: calc(50% - var(--s) * 200);
}

.lp {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #0A0605 0%, #140D0A 55%, #0B0706 100%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1.5px rgba(255, 210, 215, .14), 0 18px 28px -12px rgba(0, 0, 0, .5);
  will-change: transform;
}
.grooves {
  position: absolute; inset: 2.4%; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 210, 215, .05) 0 .55px, transparent .55px 1.9px),
    radial-gradient(circle, transparent 0 62%, rgba(255, 210, 215, .07) 62.4% 63%, transparent 63.4%),
    radial-gradient(circle, transparent 0 78%, rgba(255, 210, 215, .07) 78.4% 79%, transparent 79.4%);
  -webkit-mask: radial-gradient(circle, transparent 0 33%, #000 33.6% 99%, transparent 99.6%);
  mask: radial-gradient(circle, transparent 0 33%, #000 33.6% 99%, transparent 99.6%);
}
/* 피그마 LP 실측(lp-disc.webp): 라벨 = LP의 33.4% · 검정 테두리 = 라벨의 85%
   타이틀 폭 51%·세로 19~38% · KANU 로고 폭 27%·세로 중심 77% · 더미 곡명은 넣지 않음 */
.label {
  position: absolute; inset: 33.3%; border-radius: 50%; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .9 0 0 0 .32 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") center / 60px 60px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .9 0 0 0 .55 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") center / 100% 100%,
    linear-gradient(180deg, #F2C0BD 0%, #EEAAAA 24%, #EB9198 48%, #EB8189 66%, #EC6C7B 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
}
.lbl-ring {
  position: absolute; inset: 4.2%; border-radius: 50%;
  border: 1px solid rgba(20, 8, 10, .85); pointer-events: none;
}
.lbl-title {
  position: absolute; z-index: 1; left: 50%; top: 16.5%; width: 51%; height: auto;
  transform: translateX(-50%);
  filter: brightness(0); opacity: .9; pointer-events: none;
}
.hole {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 6.4%; height: 6.4%;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(255, 245, 245, .55);
}
.lbl-kanu {
  position: absolute; z-index: 1; left: 50%; top: 77%; width: 27%; height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0); opacity: .86; pointer-events: none;
}
.sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: conic-gradient(from 205deg,
    transparent 0deg, rgba(255, 220, 220, .45) 22deg, rgba(255, 220, 220, .1) 44deg, transparent 66deg,
    transparent 180deg, rgba(255, 220, 220, .32) 204deg, rgba(255, 220, 220, .08) 228deg, transparent 250deg);
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35% 98.4%, transparent 99%);
  mask: radial-gradient(circle, transparent 0 34%, #000 35% 98.4%, transparent 99%);
}

/* ── 아래: 로딩바 + KANU (피그마 스피너 자리) ─────────── */
.lower { position: relative; flex: none; width: 100%; height: var(--below); }
.bar {
  position: absolute; left: 50%; top: var(--g); transform: translateX(-50%);
  width: 128px; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(239, 182, 185, .22);
}
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.kanu {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--edge) + var(--safe-b));
  width: min(calc(var(--s) * 102), 112px); height: auto;
}

/* ── 배경 눈 내림 (LP 뒤로 지나감) ─────────── */
.snow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.snow i {
  position: absolute; top: 0; left: var(--x); width: var(--z); height: var(--z); border-radius: 50%;
  background: #FBE3E4; opacity: var(--o);
  animation: kn-fall var(--t) linear infinite; animation-delay: var(--d);
}
@keyframes kn-fall {
  from { transform: translate3d(0, -12px, 0); }
  50% { transform: translate3d(calc(var(--w) * -.5), calc(var(--h) * .5), 0); }
  to { transform: translate3d(var(--w), calc(var(--h) + 12px), 0); }
}

/* ── PC(마우스): 폰 프레임만. 휴대폰 가로·태블릿은 전체 화면 ─── */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  body { background: #3A0A0E; }
  .stage { padding: 24px; }
  .phone {
    --h: min(844px, calc(100dvh - 48px));
    width: min(390px, calc((100dvh - 48px) * 390 / 844));
    height: var(--h);
    border-radius: 46px; isolation: isolate;
    box-shadow: 0 0 0 10px #1A080A, 0 0 0 11.5px #5A3034, 0 36px 70px -18px rgba(0, 0, 0, .55);
  }
  .notch { display: block; position: absolute; z-index: 5; top: 10px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: #1A080A; }
  .phone { --safe-t: 30px; --safe-b: 0px; } /* 노치 아래 */
}

/* ── 바늘 올리기 (진행률은 app.js arm()) ──────────
   톤암이 내려앉고 바늘이 바깥 홈 → LP 홈 가운데로. 찾는 순간 라벨이 빛남. 로딩바는 화면에서 숨기고 읽기 프로그램용으로만 둔다 */
.bar { opacity: 0; }
.ld-arm { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(20, 4, 6, .45)); }
.ld-arm .arm-p, .ld-arm .arm-d { transform-box: view-box; transform-origin: 95px 10px; }
.ld-arm .arm-p { transform: rotate(91.3deg); }
.ld-arm .arm-d { animation: kn-drop 1s cubic-bezier(.3, .7, .3, 1) .2s both; }
@keyframes kn-drop { from { transform: rotate(-16deg); } to { transform: rotate(0deg); } }
.ld-arm .arm-tube { stroke: #F3D9DA; stroke-width: 1.2; stroke-linecap: round; }
.ld-arm .arm-cw { fill: #E2AEB1; }
.ld-arm .arm-head { fill: #EFB6B9; }
.ld-arm .arm-tip { fill: #FFF5F5; }
.ld-arm .arm-base { fill: #4A0D13; stroke: #EFB6B9; stroke-width: .7; }
.ld-arm .arm-pin { fill: #EFB6B9; }


.label { transition: box-shadow .7s ease; }
.phone.is-found .label { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 20px 6px rgba(239, 182, 185, .55); }


@media (prefers-reduced-motion: reduce) {
  .copy p { transition: none; }
  .ld-arm .arm-d { animation: none; }
  .snow { display: none; }
}