/* Apple Design의 위계·즉각 반응·절제를 쪼개보카 공개 소개에만 적용한다. */
.launch-page { --radius-btn:999px;
  /* 공개 화면 토큰(D-226): 폰 그림 하드웨어색·구역 바탕은 이 화면 전용, 나머지는 app.css 공통 토큰. 한국어 굵기는 500 이상 */
  --launch-device:#0B0D14; --launch-device-rim:#3A3F4E; --launch-device-shadow:#12141C; --launch-device-edge:#2A2E3A; --launch-device-notch:#000;
  /* 구역 바탕(D-228): 흰 바탕 위에서 구역이 보이게 의미 토큰을 쓴다 */
  --launch-tint:var(--surface-brand-subtle); --launch-tint-memory:var(--surface-brand-subtle); --launch-tint-review:var(--surface-secondary);
  --w-label:550; --w-strong:650; --w-display:750;
  background:var(--bg); color:var(--ink); font-weight:var(--w-ui); }
.launch-page .public-main { max-width:1200px; padding-block:0; gap:0; }
/* 유리 캡슐 헤더: 가운데 떠 있는 반투명 막대 (D-132) */
.launch-page .public-nav { position:sticky; top:12px; z-index:20; width:calc(100% - 32px); max-width:760px; min-height:0; margin:12px auto 0; padding:6px 6px 6px 16px; flex-wrap:nowrap; gap:8px; border-radius:999px; background:color-mix(in srgb, var(--card) 62%, transparent); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:0 6px 24px color-mix(in srgb, var(--accent) 12%, transparent),inset 0 0 0 1px color-mix(in srgb, var(--card) 70%, transparent); }
.launch-page .public-nav .brand-link { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; font-size:17px; font-weight:var(--w-display); letter-spacing:-.6px; color:var(--ink); text-decoration:none; }
.launch-page .public-nav .brand-link img { width:30px; height:30px; object-fit:contain; }
.launch-page .public-nav nav { flex-wrap:nowrap; align-items:center; gap:2px; margin-left:auto; }
.launch-page .public-nav nav .btn-small { min-height:var(--control-compact); padding:8px 12px; border-color:transparent; background:transparent; font-size:14px; font-weight:500; white-space:nowrap; }
.launch-page .public-nav nav .btn-small:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.launch-page .public-nav nav .launch-nav-start { margin-left:6px; padding:8px 16px; background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; }
.launch-page .public-nav nav .launch-nav-start:hover { background:var(--accent-hover); }
.launch-nav-short { display:none; }
@media(max-width:799px) {
 .launch-page .public-nav .launch-nav-method { display:none; }
 .launch-nav-long { display:none; }
 .launch-nav-short { display:inline; }
}
.launch-page .btn { transition:transform 120ms ease-out,background-color 180ms ease,border-color 180ms ease; }
.launch-page .btn:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.98); }
.launch-page .launch-cta { min-height:54px; gap:12px; padding:14px 26px; }
.launch-page .eyebrow { color:var(--accent-ink); font-size:14px; font-weight:var(--w-strong); letter-spacing:0; margin:0 0 20px; }
.launch-hero { padding:72px 0 56px; }
.launch-intro { text-align:center; max-width:860px; margin-inline:auto; display:flex; align-items:center; flex-direction:column; }
.launch-kicker { color:var(--ink-2); font-size:14px; margin:0 0 24px; font-weight:var(--w-label); }
.launch-intro h1 { font-size:clamp(44px,6.7vw,88px); font-weight:var(--w-display); line-height:1.12; letter-spacing:-.055em; text-wrap:balance; margin:0; }
.launch-intro h1 span { display:block; }
.launch-intro h1 span:last-child { color:var(--accent-ink); }
.launch-intro .public-lead { max-width:510px; color:var(--ink-2); font-size:19px; line-height:1.75; font-weight:var(--w-ui); letter-spacing:-.35px; margin:26px 0 28px; text-wrap:pretty; }
.launch-product { position:relative; max-width:900px; min-height:660px; margin:64px auto 0; isolation:isolate; }
.launch-product-ground { position:absolute; inset:64px 0 28px; background:var(--launch-tint); border-radius:48px; z-index:-1; }
.launch-phone { margin:0; text-align:center; }
.launch-hero-phone { position:relative; width:268px; margin-inline:auto; transform:rotate(-3deg); }
/* 아이폰형 틀(D-152): 얇은 검은 베젤·둥근 모서리·다이내믹 아일랜드·측면 버튼을 CSS로만 그린다. 상표·로고 이미지는 쓰지 않는다.
   크기는 틀을 감싼 figure 폭(cqw, 컨테이너는 figure)에 비례해 어떤 폭에서도 같은 비율이다. 상태 표시줄·홈 표시줄은 캡처 이미지 안에 있다. */
.launch-phone,.launch-feature-figure { container-type:inline-size; }
.launch-device { position:relative; background:var(--launch-device); padding:3.2cqw; border-radius:17cqw; box-shadow:0 0 0 1.5px var(--launch-device-rim),0 0 0 2.5px var(--launch-device-shadow),0 24px 56px color-mix(in srgb, var(--accent) 15%, transparent),0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent); }
.launch-device::before { content:""; position:absolute; z-index:1; top:6.4cqw; left:50%; width:31cqw; height:9.2cqw; transform:translateX(-50%); background:var(--launch-device-notch); border-radius:999px; }
.launch-device::after { content:""; position:absolute; left:-2.6px; top:21%; width:2.2px; height:6.5%; background:var(--launch-device-edge); border-radius:2px 0 0 2px; box-shadow:0 calc(6.5% + 15cqw) 0 var(--launch-device-edge), 0 calc(13% + 28cqw) 0 var(--launch-device-edge), calc(100cqw + 4.6px) 9cqw 0 var(--launch-device-edge); }
.launch-device img { display:block; width:100%; height:auto; border-radius:13.8cqw; background:var(--bg); }
.launch-phone figcaption { font-size:12px; line-height:1.6; color:var(--ink-2); margin-top:18px; transform:rotate(3deg); }
.launch-product-word { position:absolute; left:48px; top:170px; display:grid; gap:12px; max-width:240px; }
.launch-product-word .term-font { font-size:38px; color:var(--accent); line-height:1.1; letter-spacing:-1px; }
.launch-product-word>span:last-child { font-size:15px; color:var(--ink-2); max-width:180px; line-height:1.8; font-weight:var(--w-ui); }
.launch-mopi { position:absolute; width:205px; height:205px; object-fit:contain; right:40px; top:150px; filter:drop-shadow(0 12px 14px color-mix(in srgb, var(--accent) 9%, transparent)); }
.launch-product-note { position:absolute; display:flex; align-items:center; gap:8px; left:48px; bottom:74px; font-size:13px; color:var(--accent-ink); }
.launch-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.launch-section { padding-block:64px; scroll-margin-top:100px; }
.launch-section-copy h2,.launch-bottom h2 { font-size:clamp(32px,4.5vw,54px); line-height:1.2; font-weight:700; letter-spacing:-.045em; text-wrap:balance; }
.launch-section-copy>p:not(.eyebrow) { color:var(--ink-2); font-size:17px; line-height:1.85; font-weight:var(--w-ui); max-width:440px; margin:24px 0 0; }
.launch-understand { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; padding:96px 32px 112px; }
.launch-word-example { padding:36px; border-radius:28px; background:var(--card); text-align:center; }
.launch-part-root { --piece-bg:var(--root-bg); --piece-line:var(--root-line); --piece-ink:var(--root-ink); }
.launch-part-suffix { --piece-bg:var(--suffix-bg); --piece-line:var(--suffix-line); --piece-ink:var(--suffix-ink); }
.launch-word-example .note { font-size:12px; line-height:1.7; font-weight:var(--w-ui); }
.launch-part-prefix { --piece-bg:var(--prefix-bg); --piece-line:var(--prefix-line); --piece-ink:var(--prefix-ink); }
/* D-174 설명 영상: 카드 대신 영상 면 자체가 예시. 뜻 자막은 단어 아래 빈 자리에 글자로 겹친다(D-133 형광 밑줄·더하기 식) */
.launch-word-example.launch-video-example { padding:0; border-radius:0; background:transparent; container-type:inline-size; }
.launch-video { position:relative; margin:0; aspect-ratio:16/9; border-radius:24px; overflow:hidden; background:var(--bg); box-shadow:0 20px 50px color-mix(in srgb, var(--accent) 10%, transparent); }
.launch-video-media { display:block; width:100%; height:100%; object-fit:cover; }
/* 영상 속 모피·조각은 화면 가운데~75% 높이에서 움직여서, 자막은 맨 아래 띠에 옅은 바탕을 깔고 둔다 */
.launch-video-sub { position:absolute; left:0; right:0; bottom:0; padding:1.4em 4% .7em; background:linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent),color-mix(in srgb, var(--bg) 90%, transparent) 45%); display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:2px 1.6cqi; margin:0; font-size:clamp(11px,3.2cqi,18px); color:var(--ink); }
.launch-video-piece { display:inline-flex; flex-direction:column; align-items:center; line-height:1.25; }
.launch-video-piece strong { font-weight:600; font-size:1.15em; padding:0 3px; background:linear-gradient(transparent 58%,var(--piece-bg) 58%); box-shadow:inset 0 -3px 0 var(--piece-line); }
.launch-video-mean { margin-top:2px; font-size:.78em; font-weight:500; color:var(--ink-2); }
.launch-video-op { color:var(--ink-2); font-weight:500; }
.launch-video-result { font-weight:800; }
.launch-video-toggle { position:absolute; top:8px; right:8px; z-index:1; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:color-mix(in srgb, var(--card) 70%, transparent); color:var(--ink); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 12%, transparent); transition:background-color 120ms ease; }
.launch-video-toggle[hidden] { display:none; }
.launch-video-toggle svg { fill:currentColor; }
.launch-video-toggle:hover { background:color-mix(in srgb, var(--card) 95%, transparent); }
.launch-video-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.launch-video-toggle[data-state="playing"] .launch-video-icon-play, .launch-video-toggle[data-state="paused"] .launch-video-icon-pause { display:none; }
@media(prefers-reduced-motion:reduce) { .launch-video-toggle { transition:none; } }
.launch-video-means { display:none; }
.launch-video-example .note { margin-top:14px; text-align:center; }
/* 좁은 영상(420px 이하): 자막은 조각 이름만 보이고(뜻은 화면 낭독용으로 남김), 뜻은 영상 아래 세 칸 */
@container (max-width:420px) {
 .launch-video { border-radius:18px; }
 .launch-video-mean { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 .launch-video-means { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:10px 0 0; text-align:center; }
 .launch-video-means>div { display:grid; gap:2px; padding:8px 4px; border-radius:12px; background:var(--card); box-shadow:inset 0 -3px 0 var(--piece-line); min-width:0; }
 .launch-video-means dt { font-size:15px; font-weight:600; }
 .launch-video-means dd { margin:0; font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere; }
}
.launch-section-heading { margin:0 32px 40px; max-width:720px; }
.launch-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.launch-feature { border-radius:32px; background:var(--card); overflow:hidden; min-width:0; position:relative; }
.launch-feature-copy { padding:40px 40px 0; }
.launch-feature h3 { font-size:28px; font-weight:var(--w-strong); letter-spacing:-.8px; line-height:1.3; margin:0; text-wrap:balance; }
.launch-feature-copy>p:last-child { font-size:16px; font-weight:var(--w-ui); line-height:1.8; color:var(--ink-2); margin:18px 0 0; max-width:400px; }
.launch-step { color:var(--ink-2); font-size:13px; letter-spacing:.08em; font-weight:600; margin:0 0 16px; }
.launch-feature-figure { margin:36px auto -56px; width:250px; }
.launch-feature-pieces { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; background:var(--launch-tint); min-height:470px; }
.launch-feature-pieces .launch-feature-copy { padding:48px; }
.launch-feature-pieces h3 { font-size:38px; max-width:340px; }
.launch-feature-pieces .launch-feature-figure { margin:48px auto -90px; transform:rotate(5deg); }
.launch-feature-memory { background:var(--launch-tint-memory); }
.launch-feature-review { background:var(--launch-tint-review); }
.launch-bottom { text-align:center; display:flex; flex-direction:column; align-items:center; padding:112px 24px 80px; }
.launch-bottom>img { object-fit:contain; margin-bottom:16px; }
.launch-bottom .eyebrow { margin-bottom:16px; }
.launch-bottom h2 { max-width:680px; }
.launch-bottom-body { max-width:550px; font-size:18px; line-height:1.8; color:var(--ink-2); font-weight:var(--w-ui); margin:24px 0 28px; }
.launch-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.launch-free-note { max-width:620px; font-size:13px; font-weight:var(--w-ui); line-height:1.8; color:var(--ink-2); margin:24px 0 0; }
.launch-faq { max-width:780px; width:100%; margin-inline:auto; padding-bottom:96px; }
.launch-faq h2 { font-size:26px; font-weight:var(--w-strong); letter-spacing:-.7px; margin:0 0 24px; }
.launch-faq details { border-bottom:1px solid var(--line); }
.launch-faq summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; padding:18px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:var(--w-label); }
.launch-faq summary::-webkit-details-marker { display:none; }
.launch-faq summary svg { flex-shrink:0; transition:transform 180ms ease; }
.launch-faq details[open] summary svg { transform:rotate(90deg); }
.launch-faq details p { font-size:15px; line-height:1.85; color:var(--ink-2); font-weight:var(--w-ui); padding-bottom:24px; max-width:680px; }
.launch-page .public-footer { max-width:1200px; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .launch-hero-phone { transition:transform 350ms ease-out; } .launch-product:hover .launch-hero-phone { transform:rotate(0); } }
@media(max-width:899px) { .launch-product-word { left:28px; max-width:180px; } .launch-product-word .term-font { font-size:28px; } .launch-product-word>span:last-child { max-width:130px; } .launch-mopi { right:16px; width:170px; height:170px; } .launch-understand { gap:32px; padding-inline:0; } .launch-word-example { padding:28px; } .launch-feature-copy { padding:32px 28px 0; } .launch-feature-pieces .launch-feature-copy { padding:32px; } }
@media(max-width:759px) { .launch-product-word { display:none; } }
@media(max-width:599px) {
 .launch-page .public-nav { width:calc(100% - 24px); padding:5px 5px 5px 12px; }
 .launch-page .public-nav nav .btn-small { padding:8px 10px; font-size:13px; }
 .launch-nav-long { display:none; } .launch-nav-short { display:inline; }
 .launch-page .public-nav .brand-link { font-size:16px; } .launch-page .public-nav .brand-link img { width:28px; height:28px; }
 .launch-page .public-nav .launch-nav-method { display:none; }
 .launch-hero { padding:40px 0 32px; }
 .launch-kicker { font-size:12px; margin-bottom:20px; }
 .launch-intro h1 { font-size:clamp(37px,10.5vw,56px); letter-spacing:-.05em; }
 .launch-intro .public-lead { font-size:16px; max-width:320px; margin:22px 0 24px; }

 .launch-product { min-height:590px; margin-top:44px; }
 .launch-product-ground { inset:44px -4px 26px; border-radius:28px; }
 .launch-hero-phone { width:232px; transform:rotate(-2deg); }
 .launch-phone figcaption { transform:rotate(2deg); }
 .launch-product-word { display:none; }
 .launch-mopi { right:-6px; top:auto; bottom:70px; width:118px; height:118px; }
 .launch-product-note { left:16px; bottom:38px; font-size:11px; }
 .launch-section { padding-block:48px; }
 .launch-understand { grid-template-columns:minmax(0,1fr); gap:28px; }
 .launch-section-copy h2,.launch-bottom h2 { font-size:34px; }
 .launch-section-copy>p:not(.eyebrow) { font-size:16px; margin-top:18px; }
 .launch-word-example { padding:28px 20px; border-radius:24px; }
 .launch-section-heading { margin:0 0 28px; }
 .launch-features { grid-template-columns:minmax(0,1fr); gap:20px; }
 .launch-feature { border-radius:24px; }
 .launch-feature-pieces { grid-template-columns:minmax(0,1fr); min-height:0; }
 .launch-feature-copy,.launch-feature-pieces .launch-feature-copy { padding:32px 28px 0; }
 .launch-feature h3,.launch-feature-pieces h3 { font-size:27px; max-width:none; }
 .launch-feature-pieces .launch-feature-figure { margin:32px auto -60px; transform:none; }
 .launch-feature-figure { width:235px; margin-top:28px; }
 .launch-bottom { padding:72px 0 48px; }
 .launch-bottom-body { font-size:16px; }
 .launch-faq { padding-bottom:64px; }
 .launch-faq h2 { font-size:24px; }
 .launch-faq summary { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) { .launch-page .btn,.launch-faq summary svg,.launch-hero-phone { transition:none; } .launch-page .btn:active:not(:disabled):not([aria-disabled="true"]) { transform:none; } .launch-hero-phone { transform:none; } .launch-phone figcaption { transform:none; } .launch-feature-pieces .launch-feature-figure { transform:none; } }
@media(prefers-reduced-transparency:reduce) { .launch-page .public-nav { background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--card); } }
@media(prefers-contrast:more) { .launch-page .public-nav { background:var(--bg); backdrop-filter:none; box-shadow:none; border:1px solid var(--ink); } }

/* 첫 화면 증거(2026-11-11 시안 v2 ④⑤⑥ 운영 반영): 폰 목업 겹침 배치 대신 분해 영상을 히어로로, 둘째 섹션에는 실제 학습 화면 폰 */
.launch-course { display:block; margin-top:8px; font-size:14px; color:var(--ink-3); }
.launch-hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.launch-page .launch-split-link { min-height:54px; padding:14px 22px; }
.launch-hero-proof { max-width:760px; margin:40px auto 0; }
.launch-hero-proof .launch-video-example { padding:0; }
.launch-understand-phone { width:250px; margin-inline:auto; }
.launch-understand-phone figcaption { transform:none; }
@media(min-width:600px) { .launch-hero-split { padding-top:48px; } }
@media(max-width:599px) {
  .launch-hero-proof { margin-top:32px; }
  .launch-course { font-size:13px; }
  .launch-hero-actions { flex-direction:column; align-items:stretch; width:100%; max-width:320px; }
  .launch-understand-phone { width:220px; }
}
/* 넓은 화면(1000px~): 글 왼쪽 · 분해 영상 오른쪽, 첫 화면 안에 증거 전체 */
@media(min-width:1000px) {
  .launch-hero-split { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center; gap:48px; padding:56px 0 64px; }
  .launch-hero-split .launch-intro { text-align:left; align-items:flex-start; margin:0; }
  .launch-hero-split .launch-intro h1 { font-size:clamp(44px,4.3vw,64px); }
  .launch-hero-split .launch-intro .public-lead { margin:22px 0 26px; }
  .launch-hero-split .launch-hero-actions { justify-content:flex-start; }
  .launch-hero-proof { margin:0; max-width:none; }
}