/* ─────────────────────────────────────────────────────────────────────
   v7 design layer — 2026-09-03.
   Loaded AFTER the inline stylesheet in index.html and overrides only.
   Same brand tokens (carbon / gold / cyan), new language: dark stage,
   glass panels with edge light, tighter display type, left-aligned hero
   with the spectrum sculpture (v7.js), calmer motion.
   Nothing here touches copy, i18n keys, ids or the KO/EN toggle.
   ───────────────────────────────────────────────────────────────────── */
:root {
  --v7-bg: #06070a;
  --v7-line: rgba(255,255,255,.08);
  --v7-line-2: rgba(255,255,255,.14);
  --v7-glass: linear-gradient(180deg, rgba(18,19,26,.82), rgba(10,11,16,.74));
  --v7-glass-hi: inset 0 1px 0 rgba(255,255,255,.07);
  --v7-shadow: 0 30px 60px -40px rgba(0,0,0,.85);
  --v7-ease: cubic-bezier(.2,.7,.2,1);
}
html, body { background: var(--v7-bg); }
body { font-weight: 400; }

/* film grain — the one texture the whole page shares */
body::after {
  content: ""; position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 60; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: v7grain 1.2s steps(6) infinite;
}
@keyframes v7grain { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)} 100%{transform:translate(2%,2%)} }

/* ── type ─────────────────────────────────────────────────────────── */
.display, h1, h2, h3 {
  font-family: 'Outfit', 'Pretendard', 'Inter', sans-serif;
  font-weight: 600; letter-spacing: -.035em; line-height: 1.02;
}
h1 { font-size: clamp(36px, 4.1vw, 60px); max-width: none; letter-spacing: -.04em; }   /* EN: three phrases, ~4 lines in the left column */
html[lang="ko"] .hero h1 { font-size: clamp(44px, 5.6vw, 84px); }
.hero h1 .accent { font-weight: 700; }
html[lang="ko"] h1 { font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(34px, 4.6vw, 64px); }
h3 { font-weight: 600; }
.lede { font-size: clamp(16px, 1.2vw, 18px); color: rgba(255,255,255,.72); font-weight: 400; line-height: 1.65; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 4px; height: 14px; background: var(--gold-400); box-shadow: 7px 0 0 var(--cyan-400); margin-right: 7px; }

/* ── nav ──────────────────────────────────────────────────────────── */
nav.top { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(6,7,10,.62); border-bottom: 1px solid var(--v7-line); }

/* ── hero: the sound is the stage — full-bleed spectral arena, copy floats on the left ── */
.hero { padding: calc(72px + 4vh) 0 clamp(56px, 7vh, 96px); position: relative; overflow: hidden; }
.hero .inner { display: block; text-align: left; position: relative; }
.hero-grid { display: block; min-height: min(78vh, 760px); position: relative; }
.hero-copy {
  position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  max-width: 660px; padding-top: 1vh;
}
.hero-copy .pill { margin: 0; }
.hero-sub { max-width: 660px; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-sub .lede { margin: 0; font-size: clamp(16px, 1.15vw, 18px); grid-column: 1 / -1; }
.hero-sub .lede + .lede { grid-column: auto; }
/* the two secondary paragraphs become compact glass notes */
.hero-sub .lede + .lede {
  margin-top: 0 !important; font-size: 13px !important; opacity: .82 !important; line-height: 1.5 !important;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--v7-line);
  background: rgba(255,255,255,.03); backdrop-filter: blur(6px);
}
.hero-cta-row { justify-content: flex-start; margin: 0; }
.hero-trust { justify-content: flex-start !important; margin-top: 2px !important; }

/* full-bleed stage: sits behind the copy, bleeds past the container on the right */
.hero-visual {
  position: absolute; z-index: 1; top: -6vh; bottom: -4vh; left: 28%; right: calc(-1 * var(--gutter-x) - 6vw);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}
.hero-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v7-chip {
  position: absolute; right: calc(var(--gutter-x) + 6vw + 8px); bottom: 12vh; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--v7-line-2); background: rgba(6,7,10,.55); backdrop-filter: blur(8px);
  font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; color: var(--cyan-300); transition: color .4s;
}
.v7-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.v7-chip.is-raw { color: var(--hot-400); }
html[lang="ko"] .v7-chip { font-family: 'Pretendard', sans-serif; letter-spacing: .02em; font-weight: 600; }
.v7-cap {
  position: absolute; right: calc(var(--gutter-x) + 6vw + 8px); bottom: calc(12vh - 22px); z-index: 2;
  font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .16em; color: rgba(255,255,255,.38);
}
/* keep the copy readable where the arena passes behind it */
.hero-grid::before {
  content: ""; position: absolute; z-index: 2; top: -8vh; bottom: -6vh; left: -20vw; width: 72%;
  background: linear-gradient(90deg, rgba(6,7,10,.92) 30%, rgba(6,7,10,.55) 70%, rgba(6,7,10,0) 100%);
  pointer-events: none;
}

/* gauge & stats → one glass panel */
.gauge-wrap {
  margin-top: clamp(40px, 6vh, 72px); border-radius: 24px; border: 1px solid var(--v7-line);
  background: var(--v7-glass); box-shadow: var(--v7-glass-hi), var(--v7-shadow);
  backdrop-filter: blur(10px);
}
.stats { margin-top: 24px; }

/* ── sections ─────────────────────────────────────────────────────── */
.section-head { text-align: left; margin-bottom: clamp(40px, 6vh, 64px); }
.section-head .lede { max-width: 58ch; margin-left: 0; }
.section-head .eyebrow { margin-bottom: 22px; }

/* proof bar → quiet spec strip */
.proof-bar { border-top: 1px solid var(--v7-line); border-bottom: 1px solid var(--v7-line); background: rgba(255,255,255,.02); }

/* ── glass cards ──────────────────────────────────────────────────── */
.feat, .demo-card, .price-card, .faq-item, .chain-node, .step, .guide-card {
  border-radius: 20px; border: 1px solid var(--v7-line);
  background: var(--v7-glass); box-shadow: var(--v7-glass-hi), var(--v7-shadow);
  transition: transform .5s var(--v7-ease), border-color .3s, box-shadow .3s;
}
.feat:hover, .demo-card:hover, .price-card:hover, .guide-card:hover {
  transform: translateY(-4px); border-color: rgba(233,191,106,.35);
  box-shadow: var(--v7-glass-hi), 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(233,191,106,.12);
}
.price-card.featured {
  border-color: rgba(212,166,74,.55);
  background: linear-gradient(180deg, rgba(212,166,74,.12), rgba(255,255,255,.02));
}
.feat .ico { border-radius: 12px; }
.feat p, .step p { font-weight: 400; }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn-gold, .btn-ghost, .nav-studio { transition: transform .25s var(--v7-ease), box-shadow .25s, background .25s, border-color .25s; will-change: transform; }
.btn-gold:hover { box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 14px 34px -10px rgba(212,166,74,.6); }

/* ── bottom CTA ───────────────────────────────────────────────────── */
.cta-bottom { position: relative; }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-grid { min-height: 0; }
  .hero-copy { max-width: none; padding-top: 44vw; }
  .hero-visual { top: -2vh; bottom: auto; height: 62vw; left: -10vw; right: -10vw; mask-image: linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .hero-grid::before { display: none; }
  .hero-sub { grid-template-columns: 1fr; }
  .v7-chip { right: auto; left: 0; bottom: auto; top: 2vh; }
  .v7-cap { display: none; }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(64px + 2vh); }
  .hero-copy { padding-top: 58vw; }
  .hero-visual { height: 80vw; }
  h1 { font-size: clamp(38px, 11vw, 54px); }
  .hero-sub .lede + .lede { display: none; }   /* phone: one paragraph is enough above the fold */
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .feat, .demo-card, .price-card, .btn-gold, .btn-ghost { transition: none; }
}

/* ===== v7.2 — rhythm below the fold: denser glass, calmer background, bookend arena ===== */
section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { margin-bottom: clamp(30px, 5vh, 52px); }
.section-head h2 .accent, .cta-bottom h2 .accent { background: linear-gradient(90deg, var(--gold-200), var(--cyan-300)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-stage canvas { opacity: .16; }
.bg-stage::before { opacity: .6; }
.proof-bar { padding: 14px 0; }
.proof-stats.v7-marquee { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.v7-ticker { display: flex; align-items: center; gap: 40px; width: max-content; animation: v7tick 44s linear infinite; }
.v7-ticker .proof-stat { flex: none; white-space: nowrap; }
.v7-ticker .proof-divider { flex: none; }
.proof-stats.v7-marquee:hover .v7-ticker { animation-play-state: paused; }
@keyframes v7tick { to { transform: translateX(-33.333%); } }
.chain-node { padding: 26px 18px 24px; }
.chain-glyph { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 18px; background: rgba(212,166,74,.08); border: 1px solid var(--v7-line-2); color: var(--gold-200); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.stage-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: rgba(255,255,255,.42); }
.chain-node h3 { font-size: 17px; margin: 10px 0 8px; }
.chain-node p { font-size: 13px; color: rgba(255,255,255,.62); }
.step { padding: 28px 22px 26px; }
.step .num-circle { width: 54px; height: 54px; border: 0; background: linear-gradient(180deg, #f5d488, #d4a64a); color: #1a1208; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 20px; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 28px -12px rgba(212,166,74,.6); }
.step h3 { font-size: 19px; margin: 18px 0 8px; }
.demo-card { border-radius: 22px; }
.demo-card video { border-radius: 22px 22px 0 0; }
.price-card { padding-top: 34px; }
.price-card .price { font-weight: 500; letter-spacing: -.04em; }
.price-card.featured { box-shadow: var(--v7-glass-hi), 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(212,166,74,.35), 0 0 60px -20px rgba(212,166,74,.35); }
.price-card .btn-card { border-radius: 999px; }
.price-card .tier { font-family: 'JetBrains Mono', monospace; letter-spacing: .16em; }
.faq-item { border-radius: 16px; margin-bottom: 10px; }
.faq-q { font-size: 16px; font-weight: 600; padding: 18px 20px; }
.faq-q .mark { width: 28px; height: 28px; border-radius: 50%; background: rgba(212,166,74,.12); color: var(--gold-200); display: grid; place-items: center; }
.faq-a-inner { padding: 0 20px 20px; color: rgba(255,255,255,.66); }
.guide-card { padding: 24px; }
.cta-bottom { position: relative; overflow: hidden; padding: clamp(110px, 16vh, 190px) 0; }
.cta-bottom .container { position: relative; z-index: 1; }
.v7-arena2 { position: absolute; left: 0; right: 0; top: -8%; height: 118%; width: 100%; z-index: 0; pointer-events: none; display: block; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.cta-bottom h2 { font-size: clamp(40px, 5.6vw, 76px); margin-bottom: 30px; }
.cta-bottom .btn-gold { font-size: 16px; padding: 16px 26px; }
.site-foot { border-top: 1px solid var(--v7-line); background: rgba(255,255,255,.015); }
@media (max-width: 640px) { section { padding: 56px 0; } .cta-bottom { padding: 90px 0; } .v7-ticker { animation-duration: 30s; } }

/* ── Mastered Charts (v7 미리보기 · 샘플, 2026-09-04) — prefix ch- (inline .row/.hero 와 충돌 방지) ── */
.ch-section { position: relative; }
.ch-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: end; }
.ch-hero h2 { margin: 14px 0 14px; }
.ch-hero .lede { max-width: 46ch; }
.ch-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ch-stat { padding: 16px 16px 14px; border-radius: 16px; border: 1px solid var(--v7-line); background: rgba(255,255,255,.025); }
.ch-stat i { display: block; font: 500 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .16em; color: var(--text-tertiary); margin-bottom: 8px; font-style: normal; }
.ch-stat b { font: 500 26px/1 'Outfit', sans-serif; letter-spacing: -.03em; }
.ch-stat b small { font: 500 11px/1 'JetBrains Mono', monospace; color: var(--text-tertiary); margin-left: 4px; }
.ch-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 30px 0 12px; }
.ch-filters .ch-sp { flex: 1; }
.ch-wk { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--text-tertiary); }
.ch-chip, .ch-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--v7-line); background: transparent; font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.ch-chip:hover { border-color: var(--v7-line-2); color: var(--text-secondary); }
.ch-chip.on, .ch-tag.on { color: var(--gold-100, #fbe9b0); border-color: rgba(212,166,74,.5); background: rgba(212,166,74,.1); }
.ch-tag { padding: 3px 8px; font-size: 9px; cursor: default; }
.ch-tag.cy { color: var(--cyan-300); border-color: rgba(77,208,214,.35); }
.ch-tag.ai { color: var(--text-secondary); border-style: dashed; }
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ch-row { display: grid; grid-template-columns: 44px 56px 1fr auto auto auto; gap: 16px; align-items: center; padding: 12px 16px; border-radius: 16px; border: 1px solid transparent; transition: background .2s, border-color .2s, transform .3s var(--v7-ease); position: relative; }
.ch-row:hover { background: rgba(255,255,255,.035); border-color: var(--v7-line); transform: translateX(2px); }
.ch-row.top { background: linear-gradient(90deg, rgba(212,166,74,.14), rgba(212,166,74,.02)); border-color: rgba(212,166,74,.35); }
.ch-row.playing { border-color: rgba(77,208,214,.45); background: linear-gradient(90deg, rgba(77,208,214,.10), transparent); }
.ch-rank { font: 300 26px/1 'Outfit', sans-serif; letter-spacing: -.04em; color: var(--text-secondary); display: flex; flex-direction: column; }
.ch-rank small { font: 500 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .08em; margin-top: 4px; }
.ch-rank small.up { color: #34d399; } .ch-rank small.dn { color: var(--hot-400, #ff7a5c); } .ch-rank small.new { color: var(--cyan-300); }
.ch-row.top .ch-rank { color: var(--gold-200); font-weight: 500; }
.ch-cover { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font: 700 16px/1 'Outfit', sans-serif; color: #0b0c10; box-shadow: var(--v7-glass-hi), 0 10px 24px -12px rgba(0,0,0,.8); position: relative; overflow: hidden; flex: none; }
.ch-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 55%); }
.ch-cover.c1 { background: linear-gradient(135deg,#f5d488,#8d6620); } .ch-cover.c2 { background: linear-gradient(135deg,#7be0e5,#1d6f73); } .ch-cover.c3 { background: linear-gradient(135deg,#ff9f86,#8a2d1c); } .ch-cover.c4 { background: linear-gradient(135deg,#c9b6ff,#4a3a99); }
.ch-cover.c5 { background: linear-gradient(135deg,#9ff0c9,#1e6b4a); } .ch-cover.c6 { background: linear-gradient(135deg,#ffd6a5,#9c5a2a); } .ch-cover.c7 { background: linear-gradient(135deg,#a5c8ff,#2b4c8a); } .ch-cover.c8 { background: linear-gradient(135deg,#f3a5ff,#6a2a7a); }
.ch-meta { min-width: 0; }
.ch-meta b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-meta > span { color: var(--text-tertiary); font-size: 12.5px; }
.ch-tags { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.ch-plays { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--text-tertiary); white-space: nowrap; }
.ch-like { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--v7-line-2); background: rgba(255,255,255,.03); font: 500 11.5px/1 'JetBrains Mono', monospace; color: var(--text-secondary); cursor: pointer; transition: all .2s; }
.ch-like svg { width: 13px; height: 13px; }
.ch-like:hover, .ch-like.on { border-color: rgba(255,122,92,.5); color: #ffb3a3; background: rgba(255,122,92,.1); }
.ch-playbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--v7-line-2); background: rgba(255,255,255,.04); display: grid; place-items: center; color: var(--text-primary); cursor: pointer; transition: all .2s; flex: none; }
.ch-playbtn svg { width: 14px; height: 14px; }
.ch-playbtn:hover, .ch-row.playing .ch-playbtn { background: linear-gradient(180deg,#f5d488,#d4a64a); border-color: transparent; color: #1a1208; }
.ch-wave { display: none; position: absolute; right: 112px; top: 50%; transform: translateY(-50%); height: 22px; align-items: center; gap: 2px; pointer-events: none; }
.ch-row.playing .ch-wave { display: flex; }
.ch-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--gold-200); opacity: .9; animation: chwv 1.1s ease-in-out infinite; transform-origin: center; }
.ch-wave i:nth-child(odd) { background: var(--cyan-300); }
@keyframes chwv { 0%, 100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }
.ch-more { display: flex; justify-content: center; margin: 18px 0 0; }
.ch-more[hidden] { display: none; }
/* 처음엔 TOP 10(폰 TOP 5)만 — 「더 보기」가 .expanded 로 나머지를 펼친다 */
.ch-row.extra { display: none; }
.ch-list.expanded .ch-row.extra { display: grid; }
.ch-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 48px; }
.ch-how-item { padding: 18px; border-radius: 16px; border: 1px solid var(--v7-line); background: rgba(255,255,255,.025); display: flex; gap: 14px; align-items: center; }
.ch-how-item .n { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg,#f5d488,#d4a64a); color: #1a1208; font: 600 14px/1 'Outfit', sans-serif; display: grid; place-items: center; flex: none; }
.ch-how-item b { display: block; font-weight: 600; margin-bottom: 2px; }
.ch-how-item span { color: var(--text-tertiary); font-size: 12.5px; line-height: 1.45; }
.ch-foot { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--v7-line); color: var(--text-tertiary); font-size: 12.5px; }
.ch-foot a { color: var(--text-secondary); }
/* 집계 방식 한 줄 — 오빠 지시(2026-09-11) "아주 작게 명시". 각주보다 한 단계 더 작고 흐리게. */
.ch-count-note { display: block; margin-top: 5px; font-size: .9em; opacity: .6; }
@media (max-width: 820px) {
  .ch-hero { grid-template-columns: 1fr; }
  .ch-row { grid-template-columns: 34px 48px 1fr auto; gap: 10px; }
  .ch-plays, .ch-row .ch-playbtn, .ch-wave { display: none; }
  .ch-how { grid-template-columns: 1fr; }
}

/* ── TOP 3 미니 카드 (히어로 우하단, 2026-09-04 오빠 "2번") ── */
.ch-mini {
  position: absolute; z-index: 3; right: 0; bottom: 2vh; width: min(360px, 36%);
  padding: 14px 14px 12px; border-radius: 18px; border: 1px solid var(--v7-line-2);
  background: var(--v7-glass); box-shadow: var(--v7-glass-hi), var(--v7-shadow); backdrop-filter: blur(10px);
  animation: chmini .8s var(--v7-ease) .2s both;
}
@keyframes chmini { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.ch-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ch-mini-kicker { font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-200); }
.ch-mini-more { font: 600 11.5px/1 'Inter', sans-serif; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.ch-mini-more:hover { color: var(--text-primary); }
.ch-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ch-mini-row { display: grid; grid-template-columns: 18px 36px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 6px; border-radius: 12px; transition: background .2s; }
.ch-mini-row:hover { background: rgba(255,255,255,.04); }
.ch-mini-row.playing { background: rgba(77,208,214,.10); }
/* 빈 상태 — 행 그리드(18px 첫 칸)를 상속하면 문구가 한 글자씩 세로로 쪼개진다(2026-09-05 폰 검수 실측). 블록으로 푼다. */
.ch-mini-row.empty { display: block; padding: 14px 8px; text-align: center; font: 500 12.5px/1.5 'Inter', sans-serif; color: var(--text-tertiary); word-break: keep-all; }
.ch-mini-row .r { font: 500 15px/1 'Outfit', sans-serif; letter-spacing: -.03em; color: var(--text-tertiary); text-align: center; }
.ch-mini-row:first-child .r { color: var(--gold-200); }
.ch-mini-row .ch-cover { width: 36px; height: 36px; border-radius: 9px; font-size: 11px; box-shadow: none; }
.ch-mini-row .ch-meta b { font-size: 13px; }
.ch-mini-row .ch-meta > span { font-size: 11px; }
.ch-mini-row .ch-like { padding: 5px 8px; font-size: 10.5px; gap: 5px; }
.ch-mini-row .ch-like svg { width: 11px; height: 11px; }
.ch-mini-row .ch-playbtn { width: 30px; height: 30px; }
.ch-mini-row .ch-playbtn svg { width: 11px; height: 11px; }
.ch-mini-foot { margin-top: 8px; font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: .04em; color: var(--text-tertiary); }
html[lang="ko"] .ch-mini-foot { font-family: 'Pretendard', sans-serif; letter-spacing: 0; font-size: 11px; }
/* the state chip + caption move to the top-right so the card owns the bottom-right corner */
.hero-grid:has(.ch-mini) .v7-chip { bottom: auto; top: 1vh; }
.hero-grid:has(.ch-mini) .v7-cap { bottom: auto; top: calc(1vh + 38px); }
@media (max-width: 1000px) {
  .ch-mini { position: static; width: auto; margin: 22px 0 0; animation: none; }
  .hero-grid:has(.ch-mini) .v7-chip { top: 2vh; }
}

/* ── 폰(≤640px) 다듬기 (2026-09-04 오빠 "모바일 최적화가 안 되어 있는 듯") ── */
@media (max-width: 640px) {
  /* 상태 칩이 .hero-visual(left:-10vw) 기준이라 왼쪽 23px 이 잘려 나갔다 → 컨테이너 안쪽으로 */
  .v7-chip, .hero-grid:has(.ch-mini) .v7-chip { left: calc(10vw + var(--gutter-x, 16px)); right: auto; top: 2vh; bottom: auto; padding: 7px 10px; font-size: 10px; }
  /* 미리보기 pill(오빠 전용)이 CTA·가격 버튼을 가렸다 → 우상단(네비 아래)으로 */
  #design-v7-pill { left: auto !important; right: 10px !important; bottom: auto !important; top: 64px !important; padding: 6px 10px !important; font-size: 11px !important; }
  /* 차트: 행 압축(121px → ~66px) · 태그 숨김 · 폰은 TOP 5 만 펼치고 나머지는 "더 보기" */
  .ch-hero h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .ch-stats { gap: 8px; }
  .ch-stat { padding: 12px 10px 10px; }
  .ch-stat b { font-size: 22px; }
  .ch-stat i { font-size: 8.5px; letter-spacing: .12em; }
  .ch-filters { margin: 22px 0 10px; }
  .ch-filters .ch-wk { display: none; }
  .ch-row { grid-template-columns: 26px 44px 1fr auto; gap: 10px; padding: 9px 10px; border-radius: 14px; }
  .ch-row:hover { transform: none; }
  .ch-rank { font-size: 20px; }
  .ch-cover { width: 44px; height: 44px; border-radius: 10px; font-size: 13px; }
  .ch-meta b { font-size: 14px; }
  .ch-tags { display: none; }
  .ch-like { padding: 7px 10px; font-size: 11px; min-height: 36px; }   /* 탭 타깃 ≥36px */
  .ch-chip { min-height: 32px; }
  .ch-mini-row .ch-like { min-height: 32px; }
  /* 폰 — 본 차트(.ch-row)와 같게 ▶ 를 숨기고 커버 탭으로 재생한다(확정 🎨 11 ⓕ). */
  .ch-mini-row .ch-playbtn { display: none; }
  .ch-mini-row { grid-template-columns: 18px 36px 1fr auto auto; }
  .ch-how { margin-top: 32px; }
  .ch-how-item { padding: 14px; }
  /* 미니 카드(정적 흐름)는 CTA 와 간격만 */
  .ch-mini { margin-top: 18px; padding: 12px 12px 10px; }
  /* 네비: "Open Studio" 가 오른쪽 가장자리에서 1px 잘렸다 → 버튼 여백 축소 */
  .nav-studio { padding: 8px 12px !important; font-size: 12px !important; }
  .nav-signin { padding: 7px 12px !important; font-size: 12.5px !important; }
  .nav-actions { gap: 8px !important; }
  /* 히어로: 네비와 아레나 사이 빈 띠(~130px)를 줄인다 — 아레나를 위로 당기고 카피 여백을 그만큼 뺀다 */
  .hero { padding-top: calc(56px + 1vh); }
  .hero-visual { top: -10vw; height: 76vw; }
  .hero-copy { padding-top: 50vw; }
}

/* ── 폰: 요금 카드 = 가로 스냅 캐러셀 (세로 4,300px → 한 화면), 푸터 탭 타깃 ── */
.pricing-swipe-hint { display: none; }
@media (max-width: 640px) {
  #pricing .pricing-grid {
    display: flex !important; grid-template-columns: none !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; gap: 12px; padding: 6px var(--gutter-x, 16px) 14px; margin: 0 calc(-1 * var(--gutter-x, 16px));
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #pricing .pricing-grid::-webkit-scrollbar { display: none; }
  /* 카드 = 세로 flex, 높이는 줄에서 제일 긴 카드에 맞추고(stretch) CTA 는 바닥에 붙인다 — 짧은 카드 아래 빈 공간이 카드 안으로 들어가 버튼 위 여백이 된다 */
  #pricing .pricing-grid > .price-card { flex: 0 0 84%; align-self: stretch; max-width: 84%; scroll-snap-align: center; scroll-snap-stop: always; margin: 0 !important; display: flex !important; flex-direction: column !important; }
  #pricing .pricing-grid > .price-card ul { margin-bottom: auto !important; padding-bottom: 20px !important; }
  #pricing .pricing-grid > .price-card .btn-card { margin-top: 8px; }
  /* 결제 안내 두 줄이 폰에서는 대문자 모노 12줄로 퍼졌다 → 보통 본문체 */
  #pricing .pricing-foot { font-family: 'Inter', 'Pretendard', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; line-height: 1.55 !important; text-align: left !important; }
  #pricing .pricing-grid > .price-card[hidden] { display: none !important; }
  /* 2026-09-05 전수 검사: KO 모드에서 EN 전용 카드(data-kr-hide)가 폰 캐러셀에 그대로 보였다 — 숨김이 inline display:none 이라
     위의 display:flex !important 에 졌다. 어떤 방식으로 숨기든 캐러셀에서 빠지게 한다. */
  #pricing .pricing-grid > .price-card[style*="display: none"], #pricing .pricing-grid > .price-card[style*="display:none"] { display: none !important; }
  #pricing .pricing-grid { flex-wrap: nowrap !important; }
  .pricing-swipe-hint { display: block; margin: 2px 0 14px; text-align: center; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--text-tertiary); }
  html[lang="ko"] .pricing-swipe-hint { font-family: 'Pretendard', sans-serif; letter-spacing: 0; font-size: 12px; }
  /* 신뢰 고지 블록 여백 축소 */
  #pricing .trust-honesty { padding: 24px 18px !important; }
  #pricing .container[style*="margin-top: 80px"] { margin-top: 44px !important; }
  /* 푸터: 링크 탭 타깃 ≥36px (20개가 ~18px 였다) */
  .foot-col ul { gap: 4px !important; }
  .foot-col a { display: inline-block; padding: 8px 0; min-height: 36px; }
}


/* ── Mastered Charts 실데이터 (2026-09-05) ── */
.ch-cover.img { background: #14151c; overflow: hidden; }
.ch-cover.img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ch-cover.img::after { display: none; }
.ch-empty { list-style: none; padding: 28px 22px; text-align: center; color: var(--text-sec, rgba(255,255,255,.64)); font: 500 14px/1.6 'Inter', sans-serif; border: 1px dashed rgba(255,255,255,.14); border-radius: 16px; }
.ch-empty b { color: var(--gold-200, #f5d488); }
.ch-mini-row.empty { justify-content: center; color: rgba(255,255,255,.5); font-size: 12px; padding: 18px 8px; }
.ch-like[data-mine="1"] { opacity: .45; cursor: default; }
/* 내 곡 내리기 — 소유자 행에만. 고스트 알약, 호버에서 경고색 */
.ch-remove { display: inline-flex; align-items: center; padding: 8px 11px; border-radius: 999px; border: 1px solid var(--v7-line-2); background: transparent; font: 600 11px/1 'Inter', sans-serif; color: var(--text-tertiary); cursor: pointer; transition: all .2s; white-space: nowrap; }
.ch-remove:hover { border-color: rgba(255,122,92,.55); color: #ffb3a3; background: rgba(255,122,92,.08); }
@media (max-width: 640px) {
  /* 폰은 제목 칸이 좁아 글자 대신 ✕ 아이콘(접근성 라벨은 aria-label 에 있다) */
  .ch-remove { min-height: 36px; min-width: 36px; padding: 0; justify-content: center; font-size: 0; }
  .ch-remove::before { content: "✕"; font: 600 13px/1 'Inter', sans-serif; }
}
.ch-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); background: rgba(12,13,18,.94); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 10px 16px; font: 500 13px/1.3 'Inter', sans-serif; opacity: 0; pointer-events: none; transition: .18s ease; z-index: 9999; }
.ch-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ch-share { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: rgba(255,255,255,.7); font: 600 12px/1 'Inter', sans-serif; cursor: pointer; transition: .15s ease; }
.ch-share svg { width: 15px; height: 15px; }
.ch-share:hover { border-color: rgba(245,212,136,.55); color: #f5d488; background: rgba(245,212,136,.08); }
.ch-mini-row .ch-share { height: 30px; padding: 0 8px; }
.ch-row.hl { border-color: rgba(245,212,136,.7); box-shadow: 0 0 0 3px rgba(245,212,136,.18), 0 12px 40px rgba(0,0,0,.4); }
@media (max-width: 640px) { .ch-share span { display: none; } }

/* 내 곡 행 — 「내리기」 버튼이 8번째 아이템으로 들어오므로 열이 하나 더 필요하다. 브레이크포인트마다 열 수가 달라
   숫자를 복제하지 않고, 남는 아이템이 **암시적 열**로 이어지게 한다(wave 는 absolute 라 그리드 아이템이 아니다). */
.ch-row.mine { grid-auto-flow: column; grid-auto-columns: max-content; }

/* ── 전/후 A/B 토글 (2026-09-06 오빠 "차트=광고 — 곡마다 마스터링 전/후 비교") ──
   원본 클립이 있는 곡에만 렌더되고, 재생 중인 행(.playing.ab)에서만 보인다. RAW 는 회색, MASTER 는 금색. */
.ch-ab { display: none; align-items: center; margin-top: 7px; padding: 2px; border-radius: 999px; border: 1px solid var(--v7-line-2); background: rgba(0,0,0,.28); width: max-content; max-width: 100%; }
.ch-row.playing.ab .ch-ab, .ch-mini-row.playing.ab .ch-ab { display: inline-flex; }
/* 공유 링크(/t/<곡>)로 들어온 행은 재생 전에도 전/후 토글을 펼친다 — 공유 카드가 약속한 비교를
   착지 즉시 할 수 있어야 한다(2026-09-11). 누르면 그 모드로 재생이 시작된다. */
.ch-row.deep .ch-ab { display: inline-flex; }
.ch-deep-hint { display: block; margin-top: 6px; font: 500 11px/1.4 'JetBrains Mono', monospace; color: var(--gold-200, #f5d488); opacity: .9; }

/* ── 공유받은 곡 카드 — 차트 맨 위 (2026-09-11 오빠 "그냥 차트로만 오는듯") ────────────
   공유 링크로 들어온 사람이 맨 처음 보는 것. 목록의 한 줄이 아니라 "이 곡" 한 장이어야 한다. */
.ch-shared { position: relative; margin: 0 0 22px; padding: 20px 22px 18px; border-radius: 18px;
  border: 1px solid rgba(245,212,136,.42); background: linear-gradient(180deg, rgba(245,212,136,.07), rgba(0,0,0,.22));
  box-shadow: 0 0 0 3px rgba(245,212,136,.10), 0 18px 50px rgba(0,0,0,.45); }
.ch-shared-kick { display: inline-block; margin-bottom: 12px; font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-200, #f5d488); }
.ch-shared-main { display: flex; align-items: center; gap: 18px; }
.ch-shared .ch-cover { width: 96px; height: 96px; border-radius: 14px; font-size: 26px; flex: 0 0 auto; }
.ch-shared-meta { flex: 1 1 auto; min-width: 0; }
.ch-shared-meta b { display: block; font: 600 22px/1.25 'Outfit','Inter',sans-serif; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ch-shared-meta > span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-tertiary); }
.ch-shared-meta .ch-tags { margin-top: 9px; }
.ch-shared .ch-playbtn { flex: 0 0 auto; width: 54px; height: 54px; }
/* 전/후 토글은 이 카드에서 **항상** 보인다(평소엔 재생 중에만 보인다) — 착지 즉시 비교하라는 뜻. */
.ch-shared .ch-ab { display: inline-flex; margin-top: 0; }
.ch-shared-act { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--v7-line-2); }
.ch-shared-ab { min-width: 0; }
.ch-shared-social { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .ch-shared { padding: 16px; }
  .ch-shared-main { gap: 13px; }
  .ch-shared .ch-cover { width: 72px; height: 72px; }
  .ch-shared-meta b { font-size: 18px; }
  .ch-shared .ch-playbtn { width: 46px; height: 46px; }
  .ch-shared-act { flex-direction: column; align-items: stretch; gap: 12px; }
  .ch-shared-social { justify-content: flex-end; }
}
.ch-ab button { border: 0; background: transparent; color: var(--text-tertiary); font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; min-height: 26px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .18s, color .18s; white-space: nowrap; }
.ch-ab button:hover { color: var(--text-primary); }
.ch-ab button.on { color: #1a1208; background: linear-gradient(180deg,#f5d488,#d4a64a); }
.ch-ab button[data-ab="orig"].on { color: var(--text-primary); background: rgba(255,255,255,.16); }
.ch-ab button small { font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .02em; opacity: .8; text-transform: none; }
.ch-row .ch-cover { cursor: pointer; }
.ch-mini-row .ch-ab { margin-top: 4px; }
.ch-mini-row .ch-ab button { padding: 4px 8px; min-height: 22px; font-size: 9.5px; gap: 4px; }
.ch-mini-row .ch-ab button small { display: none; }
@media (max-width: 640px) {
  .ch-ab button { min-height: 32px; padding: 6px 12px; font-size: 11px; }
  .ch-mini-row .ch-ab button { min-height: 28px; }
}