/* ============================================================
   WouldYouKorean 홈 v2 (2026-08-17)
   Maru 가 고른 레퍼런스 4컷(pentagram-0 / circle-0 / rosetta-0 / rosetta-1)의
   화면 문법을 복제한 것. 자가 발명 금지 = feedback_design_reference_copy_only.

   문법 (전 블록 공통)
     밝은 크림 지면 + 어두운 띠 교대 (pentagram-0)
     세리프 대형 제목 + 산세리프 본문 (rosetta)
     제목 안 한 단어만 버건디 마커, 블록당 정확히 하나 (rosetta)
     가운데 한 줄 구성: 배지 → 제목 → 한 줄 덱 → 본체 (circle-0 · rosetta-1)
     알약 CTA 섹션당 최대 1개
     칩 · 테두리 카드 · 강조 레일 = 0

   폰트: 승인받은 시안과 픽셀이 달라지지 않게 Georgia 스택을 그대로 쓴다.
         웹폰트 교체는 별건으로 다룬다.
   ============================================================ */

:root{
  /* 밝은 지면 (기본) */
  --cream:#FFFBF5;
  --cream-2:#F8F1EA;
  --ink:#241A1D;
  --ink-dim:#6E5E63;
  --hair:#EADFD6;
  --card:#FFFFFF;

  /* 어두운 띠 (강조 구간) */
  --band:#191114;
  --band-2:#221619;
  --band-panel:#2A1B20;
  --band-ink:#FAF4F1;
  --band-dim:#B3A1A6;
  --band-faint:#9C878D;
  --band-hair:rgba(250,244,241,.14);
  --band-line:rgba(250,244,241,.22);

  --burgundy:#8E2A4D;
  --burgundy-2:#B14A6E;

  --serif:Georgia,"Times New Roman","Noto Serif KR",serif;
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",Pretendard,system-ui,-apple-system,sans-serif;

  --gap:16px;
  --ph-w:188px;
  --media-col:220px;
}

*{box-sizing:border-box}
svg{max-width:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}

/* ══ 내비 ═══════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,251,245,0); border-bottom:1px solid transparent;
  transition:background .2s ease, border-color .2s ease;
}
.nav.is-solid{background:rgba(255,251,245,.94); backdrop-filter:blur(10px); border-bottom-color:var(--hair)}
.nav__inner{
  max-width:1060px; margin:0 auto; padding:15px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav__logo{
  font-family:var(--serif); font-size:19px; letter-spacing:-.01em;
  text-decoration:none; color:var(--band-ink);
}
.nav.is-solid .nav__logo{color:var(--ink)}
.nav__links{list-style:none; display:flex; align-items:center; gap:26px; margin:0; padding:0}
.nav__links a{
  font-size:14.5px; text-decoration:none; color:var(--band-dim);
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.nav.is-solid .nav__links a{color:var(--ink-dim)}
.nav__links a:hover{border-bottom-color:currentColor}
.nav__links .btn--nav{
  background:var(--burgundy); color:#FFF7F9; border:0; border-radius:999px;
  padding:9px 20px; font-weight:650;
}
.nav.is-solid .nav__links .btn--nav{color:#FFF7F9}
.nav__links .btn--nav:hover{background:var(--burgundy-2); border-bottom-color:transparent}
.nav__toggle{display:none}

/* ══ 섹션 공통 ═══════════════════════════════════ */
.sec{padding:96px 24px}
.sec-in{max-width:1060px; margin:0 auto}
.sec--dark{background:var(--band); color:var(--band-ink)}
.sec--dark + .sec--dark{border-top:1px solid var(--band-hair)}
.sec--cream2{background:var(--cream-2)}

.eyebrow{
  display:block; text-align:center;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:650;
  color:var(--ink-dim);
}
.sec--dark .eyebrow{color:var(--band-faint)}

.display{
  font-family:var(--serif); font-weight:400; text-align:center;
  font-size:clamp(29px,4.4vw,48px); line-height:1.16; letter-spacing:-.015em;
  margin:16px auto 0; max-width:20ch; text-wrap:balance;
}
.display--wide{max-width:26ch}
/* rosetta 는 노랑 글자. 새 색을 안 만들려고 글자색 대신 지면색으로 바꿨다.
   같은 장치가 밝은 지면과 어두운 지면 양쪽에서 그대로 작동한다. */
.mark{
  background:var(--burgundy); color:#FFF7F9;
  padding:.04em .28em .12em; border-radius:12px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.deck{
  margin:18px auto 0; max-width:58ch; text-align:center;
  color:var(--ink-dim); font-size:16.5px; line-height:1.65;
}
.sec--dark .deck{color:var(--band-dim)}

.cta-wrap{margin-top:44px; text-align:center}
.pill{
  display:inline-block; background:var(--burgundy); color:#FFF7F9;
  font-size:15px; font-weight:650; padding:16px 40px; border-radius:999px;
  text-decoration:none;
}
.pill:hover{background:var(--burgundy-2)}
.ghost-link{
  display:inline-block; margin-left:18px; font-size:15px; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
}
.cta-sub{margin-top:13px; font-size:13px; color:var(--ink-dim)}
.sec--dark .cta-sub{color:var(--band-faint)}

/* ══ 1 · 히어로 ══════════════════════════════════ */
.hero{
  position:relative; overflow:hidden;
  background:var(--band); color:var(--band-ink);
  padding:150px 24px 128px; text-align:center;
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{position:absolute; object-fit:cover; opacity:.5}
.hero-bg .palace{
  left:0; top:0; width:64%; height:100%; object-position:60% 40%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 100%);
}
.hero-bg .sejong{
  right:0; top:0; width:48%; height:100%; object-position:50% 30%;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 46%,transparent 100%);
          mask-image:linear-gradient(270deg,#000 0%,#000 46%,transparent 100%);
}
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(78% 68% at 50% 46%, rgba(25,17,20,.90) 0%, rgba(25,17,20,.58) 58%, rgba(25,17,20,.30) 100%),
    linear-gradient(180deg, rgba(25,17,20,.62) 0%, rgba(25,17,20,.22) 34%, rgba(25,17,20,.86) 100%);
}
.hero .sec-in{position:relative; z-index:2}
.hero .display{font-size:clamp(38px,6.2vw,74px); max-width:15ch; line-height:1.06}
/* 제목이 커질수록 마커 블록의 면적은 제곱으로 커져 배너가 된다. 히어로는 밑줄로 바꾼다. */
.hero .mark{
  background:none; color:var(--band-ink); padding:0; border-radius:0;
  box-shadow:inset 0 -.14em 0 var(--burgundy);
}
.hero .deck{font-size:18px; color:var(--band-dim); max-width:46ch}
.hero-note{
  margin-top:52px; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--band-faint);
}

/* ══ 2 · 통증 ════════════════════════════════════ */
.pain-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 60px;
  max-width:820px; margin:48px auto 0; text-align:left;
}
/* 이 페이지 문법은 테두리 카드 0 이다. 헤어라인으로 나눈다. */
.pain-card{
  padding:22px 0; display:flex; gap:15px; align-items:flex-start;
  border-top:1px solid var(--hair);
}
.pain-card .x{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:rgba(142,42,77,.10); color:var(--burgundy);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700;
  margin-top:1px;
}
.pain-card p{margin:0; font-size:16px; line-height:1.5}
.pain-bottom{
  margin:44px auto 0; max-width:32ch; text-align:center; text-wrap:balance;
  font-family:var(--serif); font-size:25px; line-height:1.5;
}

/* ══ 3 · 발화량 ══════════════════════════════════ */
.speak{display:flex; align-items:center; justify-content:center; gap:64px; margin-top:56px; flex-wrap:wrap}
.ring{position:relative; width:236px; height:236px; flex:none}
.ring svg{width:100%; height:100%; display:block; transform:rotate(-90deg)}
.ring-txt{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px}
.ring-num{
  font-family:var(--serif); font-size:52px; line-height:1; color:var(--band-ink);
  font-variant-numeric:tabular-nums;   /* 숫자가 오를 때 폭이 흔들리지 않게 */
}
.ring-lab{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--band-faint)}
.lines{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; max-width:34ch}
.lines li{font-size:17px; color:var(--band-ink); padding-left:22px; position:relative; line-height:1.5}
.lines li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--burgundy-2);
}

/* ══ 4 · 학생 증거 ═══════════════════════════════ */
/* 세로 영상(720x1280 = 9:16)을 원래대로 두면 행 높이가 938px 까지 간다.
   그렇다고 잘라서 맞추면 학생 얼굴이 잘린다. 자르지 않고 **폭**으로 줄인다.
   280px 폭이면 높이 498px. 오른쪽 후기 카드는 그 높이에 맞춰 벌어진다. */
.proof{
  display:grid; grid-template-columns:280px minmax(0,1fr);
  gap:34px; margin-top:52px; align-items:stretch;
}
.proof-video{
  position:relative; border-radius:16px; overflow:hidden; background:var(--band);
  aspect-ratio:9/16;
}
.proof-video video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;   /* 자르지 않는다 */
}
.quotes{display:flex; flex-direction:column; gap:var(--gap); justify-content:space-between}
.quote{background:var(--card); border:1px solid var(--hair); border-radius:16px; padding:28px 26px}
.quote p{margin:0; font-family:var(--serif); font-size:20px; line-height:1.5}
.quote .who{margin-top:16px; display:flex; align-items:center; gap:12px}
.quote .av{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--burgundy); color:#FFF7F9;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.quote .who b{display:block; font-size:14.5px}
.quote .who span{display:block; font-size:12.5px; color:var(--ink-dim); line-height:1.4}
.unmute{
  position:absolute; right:12px; bottom:12px; z-index:2; cursor:pointer;
  background:rgba(36,26,29,.72); color:#fff; border:0; border-radius:999px;
  padding:8px 14px; font:inherit; font-size:12.5px;
}

/* ══ 5 · Sentence Set ════════════════════════════ */
/* 네 개가 떠다니는 상자는 표처럼 읽혀 "하나가 넷이 된다"가 안 보인다.
   rosetta-0 의 카드처럼 패널 하나 안에 네 줄로 쌓는다. */
.set{margin:52px auto 0; max-width:660px}
.seed{
  background:var(--band-panel); border:1px solid var(--band-hair); border-radius:20px;
  padding:24px 28px; text-align:center;
}
.seed .lab{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--band-faint); font-weight:650}
.seed .kr{margin-top:11px; font-size:30px; color:var(--band-ink); font-weight:600; letter-spacing:-.01em}
.seed .en{margin-top:6px; font-size:14.5px; color:var(--band-faint)}
.split{display:flex; flex-direction:column; align-items:center; padding:14px 0}
.split i{display:block; width:1.5px; height:20px; background:var(--band-line)}
.split .arrow-d{color:var(--band-faint); font-size:15px; line-height:1; margin-top:-2px}
.ss-panel{background:var(--band-panel); border:1px solid var(--band-hair); border-radius:20px; overflow:hidden}
.ss-row{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto;
  align-items:baseline; gap:18px; padding:19px 26px;
}
.ss-row + .ss-row{border-top:1px solid var(--band-hair)}
.ss-lab{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--band-faint); font-weight:650}
.ss-kr{font-size:21px; color:var(--band-ink); font-weight:600; line-height:1.4; word-break:keep-all}
.ss-en{font-size:13.5px; color:var(--band-faint); text-align:right; white-space:nowrap}
.payoff{margin:26px auto 0; text-align:center; font-family:var(--serif); font-size:22px; color:var(--band-ink)}
.payoff .n{color:var(--burgundy-2)}
.flip{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:38px; flex-wrap:wrap}
.flip .box{background:var(--band-panel); border:1px solid var(--band-hair); border-radius:14px; padding:14px 22px; text-align:center; min-width:180px}
.flip .box span{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--band-faint)}
.flip .box code{display:block; margin-top:7px; font-family:var(--sans); font-size:19px; color:var(--band-ink); font-weight:600}
.flip .arrow{color:var(--burgundy-2); font-size:22px}

/* ══ 6 · 로드맵 ══════════════════════════════════ */
.road{margin-top:52px}
/* SVG 를 라벨 그리드의 첫 열 중심에서 끝 열 중심까지로 좁혀 넣고, 노드를 0 / 1/3 / 2/3 / 1 에 둔다.
   그러면 폭이 어떻게 바뀌어도 노드와 라벨 중심이 물린다. */
.road{--half-col:calc((100% - 3 * var(--gap)) / 8)}
.road-curve{margin-inline:var(--half-col)}
.road svg{display:block; width:100%; height:auto; overflow:visible}
/* 빛이 지나가며 노드가 하나씩 켜진다. 켜지기 전에는 꺼진 점이다. */
.road-nodes circle{stroke:rgba(250,244,241,.28); transition:stroke .35s ease, fill .35s ease}
.road-nodes circle.lit{stroke:#B14A6E; fill:#B14A6E}
.stop{transition:opacity .4s ease}
.stop:not(.lit){opacity:.45}
.stop .nm{transition:color .4s ease}
.road-labels{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:6px}
.stop{text-align:center; padding:0 6px}
.stop .num{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--band-faint); font-weight:650}
.stop .nm{font-family:var(--serif); font-size:25px; color:var(--band-ink); margin-top:5px}
.stop .ds{font-size:13.5px; color:var(--band-dim); margin-top:5px; line-height:1.45}
.road-note{margin:40px auto 0; font-size:14.5px; color:var(--band-dim); max-width:62ch; text-align:center; line-height:1.6}

/* ══ 7 · 딸려오는 것 (시간 축 4행) ═══════════════
   2×2 로 두면 큰 둘·작은 둘로 읽혀 아래 둘이 부속품처럼 보인다.
   크기를 맞추는 것만으론 부족하다. 축을 시간으로 잡고 한 줄에 하나씩 쌓는다. */
.stack{margin-top:56px}
.srow{
  /* 3열이다: 폰자리 | 글 | 폰자리. 글은 네 행 모두 **가운데 열**에 고정하고
     폰만 좌우로 바뀐다. 그러면 글의 좌우 위치가 행마다 같고, 폰까지의 간격도
     어느 쪽이든 gap 하나로 똑같아진다.
     세로는 중앙정렬하지 않는다. 중심을 맞추면 첫 줄이 행마다 다른 높이에서 시작해
     행끼리 공유하는 수평선이 사라진다. 눈은 중심이 아니라 첫 줄을 앵커로 잡는다. */
  display:grid;
  grid-template-columns:var(--media-col) minmax(0,1fr) var(--media-col);
  gap:72px; align-items:start; padding:34px 0;
}
.srow + .srow{border-top:1px solid var(--hair)}
/* ★지그재그 + 정렬을 같이 뒤집는다.
   1·3행 = 폰 왼쪽 · 글 좌정렬 / 2·4행 = 폰 오른쪽 · 글 우정렬.
   좌정렬 글은 오른쪽 끝이 들쭉날쭉해서, 뒤집힌 행에서 그 면이 폰을 마주보면
   눈에 보이는 거리가 확 벌어진다(실측 72/200/72/271px). 정렬까지 뒤집으면
   폰을 마주보는 쪽이 항상 '글이 붙는 면'이 되어 네 행이 같아진다.
   ★행도 못박는다. 열만 지정하면 폰이 DOM 상 먼저라 글이 다음 행으로 밀린다. */
.srow-media{grid-column:1; grid-row:1}
.srow-text{grid-column:2; grid-row:1}
.srow--flip .srow-media{grid-column:3}
.srow--flip .srow-text{text-align:right}
.srow--flip .srow-when{justify-content:flex-end}
.srow--flip .feat li{align-items:flex-end}
.srow-media{display:flex; justify-content:center; align-items:flex-start}
.srow-text{padding-top:3px}
/* 킥커가 시간 축을 진다. 아래 라벨과 같은 스타일이면 4행이 순서가 아니라 라벨 무더기로 읽힌다. */
.srow-when{
  display:flex; align-items:baseline; gap:11px;
  font-size:13px; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  color:var(--burgundy);
}
.srow-when .n{
  font-family:var(--serif); font-size:19px; font-weight:400; letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.srow-when .n::after{
  content:""; display:inline-block; width:22px; height:1px; background:currentColor;
  vertical-align:.34em; margin-left:11px; opacity:.5;
}
.srow h3{
  margin:10px 0 0; font-family:var(--serif); font-size:29px; font-weight:400;
  letter-spacing:-.015em; line-height:1.22; text-wrap:balance;
}
.srow-link{
  display:inline-block; margin-top:22px; font-size:14.5px; font-weight:650;
  color:var(--burgundy); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
}
.feat{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:20px}
.feat li{display:flex; flex-direction:column; gap:2px}
.feat .k{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--ink-dim);   /* 버건디는 킥커 한 자리에만. 두 층이 같은 색이면 위계가 죽는다 */
}
.feat .v{font-size:16px; line-height:1.45; color:var(--ink)}
.feat .v b{font-weight:600}

/* ── 아이폰 프레임 (iPhone 15 Pro 비율을 폭으로 정규화) ── */
.phone{
  width:var(--ph-w); position:relative;
  padding:calc(var(--ph-w) * .019);
  border-radius:calc(var(--ph-w) * .152);
  background:linear-gradient(148deg,#585052 0%,#2A2427 26%,#231D1F 62%,#4A4245 100%);
  box-shadow:0 14px 34px rgba(36,26,29,.28), 0 0 0 1px rgba(0,0,0,.22);
}
.phone-screen{
  aspect-ratio:393/852; border-radius:calc(var(--ph-w) * .132);
  overflow:hidden; background:#FFFFFF; position:relative; display:flex; flex-direction:column;
}
.phone .side{position:absolute; width:calc(var(--ph-w) * .014); background:#3B3336; border-radius:2px}
.side--action{left:calc(var(--ph-w) * -.006); top:15.5%; height:4.6%}
.side--volup{left:calc(var(--ph-w) * -.006); top:23.5%; height:7.4%}
.side--voldn{left:calc(var(--ph-w) * -.006); top:32.4%; height:7.4%}
.side--power{right:calc(var(--ph-w) * -.006); top:26%; height:10.6%}
.island{
  position:absolute; z-index:4; left:50%; transform:translateX(-50%);
  top:calc(var(--ph-w) * .028); width:31.8%; height:calc(var(--ph-w) * .0916);
  background:#000; border-radius:999px;
}
.ios-status{
  position:absolute; z-index:5; top:0; left:0; right:0;
  height:calc(var(--ph-w) * .137);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:calc(var(--ph-w) * .085); padding-right:calc(var(--ph-w) * .07);
  color:#fff; font-size:calc(var(--ph-w) * .045); font-weight:650;
  font-variant-numeric:tabular-nums;
}
.ios-status .ico{display:flex; align-items:center; gap:calc(var(--ph-w) * .022)}
.ios-status svg{display:block; height:calc(var(--ph-w) * .043); width:auto; fill:#fff}
.phone-screen--light{background:var(--cream)}
.phone-screen--light .ios-status{color:#1A1A1A}
.phone-screen--light .ios-status svg{fill:#1A1A1A}
.phone-screen--light .ios-status svg rect[stroke]{stroke:#1A1A1A}
.phone-screen--light .home-bar{background:#1A1A1A; opacity:.35}
.home-bar{
  position:absolute; z-index:5; left:50%; transform:translateX(-50%);
  bottom:calc(var(--ph-w) * .019); width:35.6%; height:calc(var(--ph-w) * .0127);
  border-radius:999px; background:#fff; opacity:.92;
}
/* 앱 화면은 상태바 아래에서 시작한다(세이프 에어리어) */
.shot-safe{position:absolute; left:0; right:0; bottom:0; top:calc(var(--ph-w) * .137); overflow:hidden}
.shot-safe img{width:100%; height:100%; object-fit:cover; object-position:top}
/* 폰 안 화면 슬라이더 (레벨테스트 3장 · 앱 4장 공용).
   data-ms 로 간격, data-hover 가 있으면 마우스를 올렸을 때만 돈다.
   폭은 스크립트가 장수에 맞춰 잡는다(3장·4장이 같은 CSS 를 쓴다). */
.screens{display:flex; height:100%; transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.screens img{height:100%; flex:none; object-fit:cover; object-position:top}
.screens-dots{
  position:absolute; z-index:6; left:0; right:0; bottom:calc(var(--ph-w) * .062);
  display:flex; justify-content:center; gap:5px;
}
.screens-dots i{width:5px; height:5px; border-radius:50%; background:rgba(36,26,29,.22); display:block}
.screens-dots i.on{background:var(--burgundy)}
/* 폰 화면을 채우는 실제 녹화 영상.
   앱 = 라이브 PWA 를 그대로 조작한 화면 녹화.
   왓츠앱 = 질문 하나와 음성 답장이라는 서비스 구조를 보여주는 모션.
   특정 대화를 재현하지 않는다(확정본: 실제 대화로 위장하지 않는다). */
.appvid{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.wavid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
/* 15분 체크는 화면이 없다. 통짜 검은 판을 세우면 잉크량이 폰의 몇 배라 그 행만 튀어나온다.
   같은 폰 베젤 안에 넣는다. 통화는 실제로 기기에서 일어나므로 지어낸 UI 가 아니다. */
.mins{
  position:absolute; inset:0; background:var(--band); color:var(--band-ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.mins .n{font-family:var(--serif); font-size:78px; line-height:1; font-variant-numeric:tabular-nums}
.mins .u{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--band-faint)}
.mins .w{margin-top:22px; font-size:13.5px; color:var(--band-dim); text-align:center; max-width:20ch; line-height:1.5}

/* ══ 8 · Maru ════════════════════════════════════ */
.maru{display:grid; grid-template-columns:minmax(0,288px) minmax(0,1fr); gap:48px; margin-top:52px; align-items:center}
.maru-photo{aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--band-panel)}
.maru-photo img{width:100%; height:100%; object-fit:cover; display:block}
.maru-story{max-width:62ch}
/* 문단 4개를 통으로 쌓으면 영어 덩어리가 된다. 여는 한 문장만 크게 두고
   나머지는 이 페이지가 이미 쓰는 문법(라벨 + 한 줄)으로 쪼갠다. */
.maru-story .lead{
  margin:0; font-family:var(--serif); font-size:25px; line-height:1.45; color:var(--band-ink);
}
.maru-story .lead strong{font-weight:400; box-shadow:inset 0 -.1em 0 var(--burgundy)}
.beats{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:22px}
.beats li{display:flex; flex-direction:column; gap:5px}
.beats .k{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:var(--burgundy-2);
}
.beats .v{font-size:16px; line-height:1.62; color:var(--band-dim)}
.beats .v strong{color:var(--band-ink); font-weight:600}
.maru-meta{margin-top:18px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--band-faint)}

/* ══ 9 · 주 5일 레슨 · 가로 룰렛 ═════════════════
   실제 편성은 월·수·목·금·토 5편. 화면에는 3편만 보이고 양옆 화살표로 돈다.
   무한 순환은 목록을 3벌 복제해 가운데 벌에서 시작하고 끝에 닿으면 조용히 되돌린다. */
.roulette{
  margin:44px auto 0; position:relative;
  max-width:calc(3 * var(--rl-w, 228px) + 2 * var(--rl-gap, 26px));
}
.rl-view{overflow:hidden; padding:8px 0 4px}
.rl-track{display:flex; gap:var(--rl-gap, 26px); will-change:transform; transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.rl-track.is-jump{transition:none}
.rl-item{flex:none; width:var(--rl-w, 228px); transition:opacity .42s ease, transform .42s ease; opacity:.42; transform:scale(.87)}
.rl-item.is-center{opacity:1; transform:scale(1)}
.rl-cover{aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:var(--band); box-shadow:0 8px 24px rgba(36,26,29,.16)}
.rl-cover{position:relative; cursor:pointer}
.rl-cover img{width:100%; height:100%; object-fit:cover; display:block}
/* 영상은 커버 위에 겹쳐 깐다. 흐름에 그냥 넣으면 img 아래로 밀려 잘리고
   소리만 들린다(2026-08-17 실사고). */
.rl-cover video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block; background:#000;
}
/* 클릭하면 그 자리에서 재생된다. 커버만 먼저 받고 mp4 는 누를 때 받는다. */
.rl-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; background:rgba(255,251,245,.92); color:var(--burgundy);
  display:flex; align-items:center; justify-content:center; font-size:19px; padding-left:4px;
  box-shadow:0 4px 18px rgba(0,0,0,.28); transition:transform .16s ease;
}
.rl-item:not(.is-center) .rl-play{display:none}
.rl-cover:hover .rl-play{transform:translate(-50%,-50%) scale(1.08)}
.rl-cover.is-playing .rl-play{display:none}
.rl-hint{margin:14px 0 0; text-align:center; font-size:12.5px; color:var(--ink-dim)}
.rl-meta{margin-top:14px; text-align:center}
.rl-badge{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--burgundy);
  border:1px solid rgba(142,42,77,.28); border-radius:999px; padding:4px 13px;
}
.rl-day{margin-top:9px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim)}
.rl-what{margin:7px auto 0; font-size:14px; color:var(--ink); line-height:1.5; max-width:26ch}
.rl-arrow{
  position:absolute; top:calc(8px + var(--rl-w, 228px) * 16 / 9 / 2); transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; cursor:pointer; z-index:2;
  background:var(--card); border:1px solid var(--hair); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:17px;
  box-shadow:0 2px 14px rgba(36,26,29,.10);
}
.rl-arrow:hover{border-color:var(--burgundy); color:var(--burgundy)}
.rl-arrow:focus-visible{outline:2px solid var(--burgundy); outline-offset:3px}
.rl-arrow--prev{left:-22px}
.rl-arrow--next{right:-22px}
.rl-dots{display:flex; justify-content:center; gap:8px; margin-top:22px}
.rl-dots button{width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer; border:0; background:var(--hair)}
.rl-dots button.is-on{background:var(--burgundy); transform:scale(1.25)}
.reels-link{margin-top:24px; text-align:center; font-size:13.5px; color:var(--ink-dim)}
.reels-link a{color:var(--burgundy); text-decoration:underline; text-underline-offset:3px}

/* ══ 10 · 가격 ═══════════════════════════════════ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin:44px auto 0; max-width:840px}
.step{text-align:center; padding:22px 14px 0; border-top:2px solid var(--burgundy)}
.step .k{font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--burgundy)}
.step p{margin:8px 0 0; font-size:14px; color:var(--ink-dim); line-height:1.5}
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:var(--gap)}
.plan{
  background:var(--card); border:1px solid var(--hair); border-radius:18px;
  padding:26px 22px 28px; display:flex; flex-direction:column; min-width:0;
}
.plan--pop{border-color:var(--burgundy); border-width:1.5px}
.plan .tagline{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:var(--burgundy); min-height:14px}
.plan .nm{font-family:var(--serif); font-size:21px; margin-top:9px; line-height:1.25}
.plan .amt{margin-top:14px; display:block}
.plan .amt b{font-family:var(--serif); font-size:34px; font-weight:400; font-variant-numeric:tabular-nums}
.plan .amt span{display:block; margin-top:3px; font-size:12.5px; color:var(--ink-dim)}
.plan .per{margin-top:5px; font-size:13px; color:var(--ink-dim)}
.plan .per em{font-style:normal; color:var(--burgundy); font-weight:650}
.plan ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1}
.plan li{font-size:13.5px; color:var(--ink-dim); line-height:1.5; padding-left:16px; position:relative}
.plan li::before{content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--burgundy-2)}
.plan .buy{
  margin-top:20px; display:block; text-align:center; text-decoration:none;
  border-radius:999px; padding:12px 16px; font-size:13.5px; font-weight:650;
  border:1px solid var(--burgundy); color:var(--burgundy);
}
.plan--pop .buy{background:var(--burgundy); color:#FFF7F9}
.plan .buy--alt{margin-top:8px; border-color:var(--hair); color:var(--ink-dim); background:none}
.plan .alt{margin-top:9px; text-align:center; font-size:12px}
.plan .alt a{color:var(--ink-dim)}
.plan .risk{margin:12px 0 0; font-size:11.5px; color:var(--ink-dim); line-height:1.45; text-align:center}
.plan .risk a{color:var(--burgundy)}
.pricing-note{margin:34px auto 0; max-width:70ch; text-align:center; font-size:14px; color:var(--ink-dim); line-height:1.65}
.pricing-note b{color:var(--ink)}

/* ══ 11 · 직접 연락 ══════════════════════════════ */
.direct{background:var(--burgundy); color:#FFF7F9; padding:26px 24px; text-align:center}
.direct p{margin:0 auto; max-width:70ch; font-size:16px; line-height:1.55}
.direct a{color:#FFF7F9; text-decoration:underline; text-underline-offset:3px; font-weight:650}

/* ══ 12 · FAQ ════════════════════════════════════ */
.faq{margin:46px auto 0; max-width:800px}
details{border-bottom:1px solid var(--hair)}
summary{cursor:pointer; list-style:none; padding:19px 34px 19px 0; position:relative; font-size:16.5px; font-weight:600}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); color:var(--burgundy); font-size:20px; font-weight:400}
details[open] summary::after{content:"\2013"}
details p{margin:0 0 20px; color:var(--ink-dim); font-size:15px; line-height:1.7; max-width:66ch}
details a{color:var(--burgundy)}

/* ══ 최종 CTA · 푸터 ═════════════════════════════ */
.final{background:var(--band); color:var(--band-ink); padding:128px 24px; text-align:center}
.final .display{max-width:17ch}
.footer{background:var(--band-2); color:var(--band-faint); padding:44px 24px 92px; font-size:12.5px}
.footer-in{max-width:1060px; margin:0 auto}
.footer-top{display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; align-items:baseline}
.footer-logo{font-family:var(--serif); font-size:19px; color:var(--band-ink)}
.footer-links{display:flex; gap:18px; flex-wrap:wrap}
.footer-links a{text-decoration:none; border-bottom:1px solid transparent}
.footer-links a:hover{border-bottom-color:currentColor}
.footer-legal{margin-top:24px; line-height:1.7; opacity:.8}

/* ══ 하단 고정 바 ═══════════════════════════════
   가격이 페이지 하단에 있다. 블록을 빼는 대신 언제든 갈 수 있는 길을 둔다. */
.paybar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:rgba(255,251,245,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--hair); box-shadow:0 -4px 20px rgba(36,26,29,.07);
  transform:translateY(101%); transition:transform .22s ease;
}
.paybar.is-up{transform:none}
.paybar-in{
  max-width:1060px; margin:0 auto; min-height:60px; padding:11px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.paybar .txt{margin:0; font-size:15px; line-height:1.4}
.paybar .txt b{font-weight:650}
.paybar .txt span{color:var(--ink-dim)}
.paybar .go{
  flex:none; background:var(--burgundy); color:#FFF7F9; text-decoration:none;
  font-size:14.5px; font-weight:650; padding:12px 26px; border-radius:999px;
}
.paybar .go:hover{background:var(--burgundy-2)}

/* ══ 반응형 ══════════════════════════════════════ */
@media (max-width:900px){
  .proof{grid-template-columns:1fr}
  .maru{grid-template-columns:1fr; gap:26px}
  .maru-photo{max-width:230px; margin:0 auto}
  .plans{grid-template-columns:repeat(2,1fr)}
  .srow{grid-template-columns:1fr; gap:30px; padding:42px 0}
  .srow .srow-media{grid-column:1; grid-row:auto}
  .srow .srow-text{grid-column:1; grid-row:auto}
  .roulette{--rl-w:210px; --rl-gap:18px}
  .sec{padding:74px 20px}
  .hero{padding:120px 20px 92px}
}
@media (max-width:560px){
  .pain-grid, .plans, .steps{grid-template-columns:1fr}
  .roulette{--rl-w:196px; --rl-gap:14px}
  .rl-arrow{width:38px; height:38px; font-size:14px}
  .rl-arrow--prev{left:-6px} .rl-arrow--next{right:-6px}
  .ss-row{grid-template-columns:1fr; gap:5px; padding:16px 20px}
  .ss-en{text-align:left; white-space:normal}
  .flip{flex-direction:column; gap:10px}
  .flip .box{width:100%; max-width:280px}
  .flip .arrow{transform:rotate(90deg); line-height:1}
  .road-curve{display:none}
  .road-labels{grid-template-columns:1fr; gap:0; margin-top:0}
  .stop{
    text-align:left; padding:16px 0 16px 26px; position:relative;
    border-left:2px solid var(--band-line); margin-left:8px;
  }
  .stop::before{
    content:""; position:absolute; left:-8px; top:22px; width:14px; height:14px;
    border-radius:50%; background:var(--band); border:3px solid var(--burgundy-2);
  }
  /* 밑줄이 화면 폭 전체로 늘어나지 않게 글자 폭에 맞춘다 */
  .ghost-link{display:block; width:fit-content; margin:18px auto 0}
  /* 390px 에서 로고 + 링크 2개 + 버튼이 안 들어가 버튼이 두 줄로 깨진다.
     모바일은 로고와 버튼만 남긴다. Pricing 은 하단 고정 바가 대신한다. */
  .nav__inner{padding:12px 16px}
  .nav__logo{font-size:17px}
  .nav__links{gap:0}
  .nav__links li:first-child, .nav__links li:nth-child(2){display:none}
  .nav__links .btn--nav{padding:9px 16px; font-size:13.5px; white-space:nowrap}
  /* 마커가 두 줄에 걸치면 블록이 두 조각으로 쪼개져 보인다. 한 줄에 들어가게 줄인다. */
  .pain-bottom{font-size:21px; max-width:24ch}
  .paybar-in{padding:10px 16px; gap:12px}
  .paybar .txt{font-size:13.5px}
  .paybar .go{padding:11px 18px; font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ── 결제 직전 확인 모달 (checkout.js) ────────────────────────────
   별도 페이지가 아니라 모달인 이유 = 결제 경로에 새 로드와 뒤로가기 이탈
   지점을 만들지 않기 위해서다. 전진 버튼은 하나뿐이고 탈출구를 두지 않는다. */
/* ★z-index 10000 = 쿠키 배너(9999) 위. 배너가 모달을 덮어 결제 버튼을
   가리는 것을 실측으로 잡았다(2026-08-17). 배너가 뜨는 건 첫 방문자인데
   그게 정확히 결제할 사람이다. */
.co-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(24, 12, 16, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; overflow-y: auto;
  animation: coIn .18s ease-out;
}
@keyframes coIn { from { opacity: 0 } to { opacity: 1 } }
.co-box {
  position: relative; width: 100%; max-width: 420px;
  background: #FFFDFB; border-radius: 18px;
  padding: 1.7rem 1.4rem 1.5rem; text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  font-family: Inter, sans-serif;
}
.co-x {
  position: absolute; top: .5rem; right: .7rem;
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: #b9a8ae; cursor: pointer; padding: .2rem .4rem;
}
.co-x:hover { color: #8E2A4D; }
.co-face {
  width: 74px; height: 74px; border-radius: 50%;
  object-fit: cover; margin-bottom: .7rem;
}
.co-title {
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em;
  color: #1a1a1a; margin: 0 0 .5rem;
}
.co-freeze { font-size: .93rem; color: #8E2A4D; margin: 0 0 1rem; line-height: 1.5; }
.co-steps {
  text-align: left; margin: 0 0 1rem; padding-left: 1.15rem;
  font-size: .9rem; line-height: 1.55; color: #444;
}
.co-steps li { margin-bottom: .45rem; }
.co-after {
  text-align: left; font-size: .87rem; line-height: 1.5;
  color: #444; background: #FAF3F6; border-radius: 10px;
  padding: .65rem .8rem; margin: 0 0 .7rem;
}
.co-risk { font-size: .8rem; color: #888; margin: 0 0 1.1rem; }
.co-go {
  display: block; width: 100%; box-sizing: border-box;
  padding: .95rem 1rem; border-radius: 999px;
  background: #8E2A4D; color: #fff; font-weight: 800; font-size: 1rem;
  text-decoration: none; transition: background .15s;
}
.co-go:hover { background: #6E1F3B; }

/* ── 로고 심볼 (2026-08-18) ────────────────────────────────────────
   그동안 네비·푸터가 텍스트 워드마크뿐이었고 logo.png 는 JSON-LD 에서만
   참조돼 사람 눈에는 어디에도 안 보였다(Maru 가 잡음).
   심볼 색은 브랜드 규격 §3.1 = 태극기 레드→블루. UI 크롬의 버건디와 별개다
   (버건디 전환은 버튼·링크 한정이고 로고 아트는 원래 색 유지).
   ⚠️logo.png 를 쓰지 않는다 — **배경이 흰색이라 어두운 히어로 위에 흰 네모로 뜬다.**
   파비콘에 있던 같은 S커브를 인라인 SVG 로 넣는다(투명·무한 확대·요청 0).
   logo.png 는 JSON-LD(검색엔진)용으로 계속 둔다. */
.nav__logo{display:inline-flex; align-items:center; gap:9px}
.nav__logo .logo-mark{width:30px; height:30px; display:block; flex:0 0 auto}
.footer-logo{display:inline-flex; align-items:center; gap:8px}
.footer-logo .logo-mark{width:26px; height:26px; display:block; flex:0 0 auto}
@media (max-width:640px){
  .nav__logo .logo-mark{width:26px; height:26px}
  .nav__logo{gap:7px}
}