/* ══════════════════════════════════════════════════════════════════════
   XXII player — 랜딩 페이지. nocturne.css 위에 얹습니다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 상단 바 ──────────────────────────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:color-mix(in srgb,var(--color-bg) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(to right,transparent,var(--color-divider) 40px,var(--color-divider) calc(100% - 40px),transparent);
}
.topbar-inner{
  max-width:var(--page);margin:0 auto;
  padding:var(--space-4) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  min-height:60px;
}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text)}
.brand-mark{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1px solid var(--color-accent);border-radius:var(--radius-md);
  color:var(--color-accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--color-accent) 40%,transparent);
}
.brand-mark svg{width:16px;height:16px;fill:currentColor}
.brand-name{font-family:var(--font-heading);font-weight:500;font-size:16px;letter-spacing:-.012em}

.topbar-nav{display:flex;align-items:center;gap:var(--space-8);list-style:none;margin:0;padding:0}
.topbar-nav a{
  font-family:var(--font-heading);font-weight:500;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--neutral-500);
  padding:var(--space-2) 0;border-top:2px solid transparent;
}
.topbar-nav a:hover{color:var(--color-accent);border-top-color:var(--color-accent)}
.topbar .btn{min-height:36px;padding:var(--space-2) var(--space-4);font-size:13px}

/* ── 히어로 ───────────────────────────────────────────────────────── */
.hero{
  max-width:var(--page);margin:0 auto;
  padding:calc(60px + 72px) var(--gutter) 72px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:56px;align-items:center;
}
.hero-copy{max-width:560px}
.hero h1{
  font-size:clamp(34px,5.4vw,58px);line-height:1.08;
  margin:var(--space-3) 0 0;
}
.hero .mark{margin-top:var(--space-6)}
.hero-lead{
  margin:var(--space-8) 0 0;font-size:16px;
  color:color-mix(in srgb,var(--color-text) 70%,transparent);
  max-width:50ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  margin-top:var(--space-8);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--font-heading);font-weight:500;color:var(--neutral-500);
  font-variant-numeric:tabular-nums;
}
.hero-meta .dot{width:2px;height:2px;background:var(--neutral-700);border-radius:1px}

/* ── 폰 목업 — 실제 Now playing 화면 ──────────────────────────────── */
.phone{
  width:340px;flex:none;justify-self:end;
  border:1px solid var(--neutral-800);border-radius:26px;
  background:var(--color-bg);padding:9px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.screen{
  border-radius:18px;background:var(--color-bg);overflow:hidden;
  padding:13px 17px 22px;display:flex;flex-direction:column;
  min-height:692px;                 /* 390×844 목업의 비율 */
  box-shadow:inset 0 0 0 1px var(--neutral-900);
}
.screen > *{flex:none}              /* 2px 선이 flex 수축으로 사라지지 않게 */
.status-row{
  display:flex;justify-content:space-between;font-size:10px;
  color:color-mix(in srgb,var(--color-text) 55%,transparent);
  font-variant-numeric:tabular-nums;
}
.status-row .sig{letter-spacing:3px}
.screen-head{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.screen-head svg{width:17px;height:17px;fill:var(--color-text);flex:none}
.screen-head .kicker{flex:1}
.screen-head .folder{font-size:11px;color:var(--neutral-500)}

.cover{
  margin-top:var(--space-8);aspect-ratio:1;
  background:var(--color-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);display:grid;place-items:center;
}
.cover svg{width:77px;height:77px;fill:var(--neutral-700)}

.np-title{font-size:23px;font-weight:500;letter-spacing:-.015em;margin:var(--space-8) 0 0}
.np-artist{font-size:12.5px;color:color-mix(in srgb,var(--color-text) 55%,transparent);margin:5px 0 0}

.seek{position:relative;height:2px;background:var(--neutral-800);border-radius:1px;margin-top:var(--space-8)}
.seek-fill{
  position:absolute;inset:0 auto 0 0;width:82%;background:var(--color-accent);border-radius:1px;
  box-shadow:0 0 8px color-mix(in srgb,var(--color-accent) 75%,transparent);
}
.seek-knob{
  position:absolute;top:50%;left:82%;width:8px;height:8px;margin:-4px 0 0 -4px;
  background:var(--color-accent);border-radius:50%;
  box-shadow:0 0 10px color-mix(in srgb,var(--color-accent) 80%,transparent);
}
.seek-times{
  display:flex;justify-content:space-between;margin-top:var(--space-3);
  font-size:11px;color:var(--neutral-500);font-variant-numeric:tabular-nums;
}

.transport{display:flex;align-items:center;justify-content:space-between;margin-top:28px}
.transport svg{fill:var(--neutral-300)}
.tp-skip svg{width:18px;height:18px}
.tp-ten{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--neutral-300)}
.tp-ten svg{width:17px;height:17px}
.tp-ten span{font-size:8px;font-variant-numeric:tabular-nums}
.tp-play{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--color-accent);display:grid;place-items:center;
  box-shadow:0 0 16px color-mix(in srgb,var(--color-accent) 55%,transparent);
}
.tp-play svg{width:17px;height:17px;fill:var(--color-accent)}

.screen-tabs{
  display:flex;gap:var(--space-2);margin-top:auto;padding-top:var(--space-6);
}
.screen-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding-top:var(--space-3);border-top:2px solid transparent;color:var(--neutral-500);
}
.screen-tab svg{width:18px;height:18px;fill:currentColor}
.screen-tab span{font-size:10px}
.screen-tab.is-active{
  border-top-color:var(--color-accent);color:var(--color-accent);
}
.screen-tab.is-active span{
  font-family:var(--font-heading);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:9.5px;
}

/* ── 섹션 공통 ────────────────────────────────────────────────────── */
.section{max-width:var(--page);margin:0 auto;padding:72px var(--gutter)}
.section-head{max-width:640px}
.section-head h2{font-size:clamp(26px,4vw,38px);margin:var(--space-3) 0 0}
.section-head p{
  margin:var(--space-6) 0 0;
  color:color-mix(in srgb,var(--color-text) 65%,transparent);
}

/* ── 기능 — 행마다 페이드 규칙선, 카드 채움 없음 ──────────────────── */
.features{
  margin-top:44px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  column-gap:var(--space-8);
}
.feature{position:relative;padding:var(--space-8) 0 var(--space-8)}
.feature::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--color-divider) 40px,var(--color-divider) calc(100% - 40px),transparent);
}
.feature-top{display:flex;align-items:center;gap:var(--space-3)}
.feature-num{
  font-size:11px;color:var(--neutral-600);font-variant-numeric:tabular-nums;
  font-family:var(--font-heading);font-weight:500;letter-spacing:.09em;
}
.feature-icon{color:var(--color-accent)}
.feature-icon svg{width:19px;height:19px;fill:currentColor}
.feature h3{font-size:17px;letter-spacing:-.012em;margin:var(--space-4) 0 0}
.feature p{
  margin:var(--space-3) 0 0;font-size:14px;
  color:color-mix(in srgb,var(--color-text) 62%,transparent);
}

/* ── 수치 밴드 — 시스템이 허용한 유일한 채움 ──────────────────────── */
.stats{
  background:
    radial-gradient(120% 140% at 15% 0%,var(--color-section-glow),transparent 58%),
    var(--color-section);
  padding:56px 0;
}
.stats-inner{
  max-width:var(--page);margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-8);
}
.stat{
  padding-left:var(--space-6);
  border-left:1px solid color-mix(in srgb,var(--color-section-ghost) 70%,transparent);
}
.stat:first-child{border-left:0;padding-left:0}
.stat-num{
  font-family:var(--font-heading);font-weight:500;
  font-size:clamp(32px,4.4vw,44px);line-height:1.05;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;color:var(--color-text);
}
.stat-label{
  margin-top:var(--space-3);font-family:var(--font-heading);font-weight:500;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 68%,transparent);
}

/* ── 마무리 CTA ───────────────────────────────────────────────────── */
.cta-section{max-width:var(--page);margin:0 auto;padding:88px var(--gutter)}
.cta-section h2{font-size:clamp(26px,4vw,38px);margin:var(--space-3) 0 0}
.cta-section p{
  margin:var(--space-6) 0 0;max-width:52ch;
  color:color-mix(in srgb,var(--color-text) 65%,transparent);
}
.cta-section .hero-actions{margin-top:var(--space-8)}

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:48px;padding-top:calc(60px + 48px)}
  .phone{justify-self:center}
  .topbar-nav{display:none}
}
@media (max-width:640px){
  .section,.cta-section{padding-block:56px}
  .phone{width:min(340px,100%)}
  .screen{height:auto}
  .stat{border-left:0;padding-left:0}
}