/* PONGE landing renewal — adapted from the selected mockup. */
/* == generated by site/tools/fetch_fonts.rb — do not edit == */
@font-face{font-family:'Elice Digital Baeum';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/ko-EliceDigitalBaeum-400.0e930008.woff2') format('woff2')}
@font-face{font-family:'Elice Digital Baeum';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/landing/ko-EliceDigitalBaeum-700.57e8ae46.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/landing/ko-Pretendard-400-700.71269f9a.woff2') format('woff2')}
@font-face{font-family:'Appli Mincho';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/ja-AppliMincho-400.5157bcc3.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/landing/en-PlusJakartaSans-400-700.74b364cb.woff2') format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/landing/zh-CN-NotoSansSC-400-700.8561c9ef.woff2') format('woff2')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/landing/zh-TW-NotoSansTC-400-700.20fc5fb2.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai Looped';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/landing/th-IBMPlexSansThaiLooped-400.c1d97831.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai Looped';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/landing/th-IBMPlexSansThaiLooped-500.9610198f.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Thai Looped';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/landing/th-IBMPlexSansThaiLooped-700.7f05784f.woff2') format('woff2')}
/* == end generated == */

/* ============================================================
   PONGE landing — vanilla. 0 external requests.
   TOKENS: native app tokens ported to web. Do not add ad-hoc hex.
   ============================================================ */
:root{
  /* 앱과 같이 라이트 한 벌만 제공한다 — 선언이 없으면 브라우저 자동 다크가 색을 뒤집는다. */
  color-scheme:light;
  --brand:#FF4400;--on-brand:#FFFFFF;--brand-link:#BF3200;
  --scaffold:#FFFFFF;--surface:#F9F9F8;--elevated:#FFFFFF;--hairline:#E8E8E6;
  --text:#303030;--text-2:#72726E;--danger:#E03131;--online:#2FA86A;
  --xs:4px;--s:8px;--m:12px;--l:16px;--xl:20px;--xxl:24px;
  /* landing rhythm = 4px base extended (see rationale.md) */
  --sp5:32px;--sp6:48px;--sp7:64px;--sp8:96px;--sp9:128px;
  --r-card:20px;--r-input:16px;--r-bub:20px;--r-photo:18px;--r-sheet:16px;
  --gut:clamp(20px,5vw,72px);--maxw:1360px;
  --dev:.62;--hd:64px;--ft:56px;
  --fs-h2:clamp(28px,3.4vw,50px);
  --fs-h3:clamp(20px,1.7vw,26px);
  --fs-lede:clamp(16px,1.35vw,21px);
  --fs-body:clamp(15px,1.05vw,17px);
  /* 로케일별 패밀리 하나 + 시스템 폴백. 기본값은 en 스택이다. */
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  /* 랜딩 패널 카피만 다른 패밀리를 쓸 수 있는 자리. 기본은 페이지와 같은 서체다. */
  --font-panel:var(--font);
}
/* ko만 두 벌이다 — 패널 카피는 배움체, 헤더·푸터·문서 본문은 Pretendard.
   배움체는 웨이트가 400·700뿐이라 크롬의 500 단계를 못 살린다. */
html[lang="ko"]{--font:'Pretendard',-apple-system,system-ui,sans-serif;
  --font-panel:'Elice Digital Baeum','Pretendard',-apple-system,system-ui,sans-serif}
html[lang="ja"]{--font:'Appli Mincho',-apple-system,system-ui,serif}
html[lang="zh-CN"]{--font:'Noto Sans SC',-apple-system,system-ui,sans-serif}
html[lang="zh-TW"]{--font:'Noto Sans TC',-apple-system,system-ui,sans-serif}
html[lang="th"]{--font:'IBM Plex Sans Thai Looped',-apple-system,system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{scroll-padding-top:var(--hd)}
body{margin:0;font-family:var(--font);font-weight:400;color:var(--text);background:var(--scaffold);font-size:var(--fs-body);line-height:1.62;letter-spacing:-.01em;overflow-x:hidden;text-wrap:pretty}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block}
a{color:var(--brand-link);text-decoration:none}
a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;margin:0}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:var(--l);top:-100px;z-index:99;background:var(--text);color:var(--scaffold);padding:12px 18px;border-radius:100px;font-weight:700;transition:top .15s}
.skip:focus{top:var(--m);color:var(--scaffold);text-decoration:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:not(.js) .js-only{display:none}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;height:var(--hd);z-index:40;background:color-mix(in srgb,var(--scaffold) 88%,transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--hairline)}
.hd-in{display:flex;align-items:center;gap:var(--xxl);height:100%}
.mark{display:flex;align-items:center;flex-shrink:0;min-height:44px}
.mark:hover{text-decoration:none;opacity:.75}
.wordmark{width:auto;display:block}
.hd-right{display:flex;align-items:center;gap:var(--m);margin-left:auto;flex-shrink:0}
/* ---------- store badges ---------- */
/* Apple·Google 공식 배지는 재색·재조판이 금지라 높이만 맞추고 원본을 그대로 띄운다.
   두 배지의 가로 비율이 서로 달라 폭은 SVG 고유 비율에 맡긴다. */
.badges{display:flex;gap:var(--m);flex-wrap:wrap;align-items:center}
.storebadge{display:inline-flex;border-radius:9px}
.storebadge:hover{text-decoration:none;opacity:.8}
.storebadge img{height:var(--badge-h,40px);width:auto}

/* ---------- panels ---------- */
.track{display:block;padding-top:var(--hd);padding-bottom:var(--ft-h,var(--ft))}
.track>section{width:100%;max-width:none;min-height:calc(100svh - var(--hd) - var(--ft-h,var(--ft)));display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding-inline:0;border-top:1px solid var(--hairline);border-left:0}
.track>section>*{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.track>section:first-child{border-top:0}
/* ---------- generic section ---------- */
.sec{padding-block:clamp(24px,3vw,44px);width:100%}
.sec-head{display:grid;gap:var(--l);max-width:60ch;font-family:var(--font-panel)}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.12;letter-spacing:-.032em}
/* 카피 안에서 강조하는 낱말. 브랜드 패널 위에서는 같은 색이라 안 보이므로 흰 패널에서만 쓴다. */
h2 .em{color:var(--brand);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25;letter-spacing:-.02em}
.sec-lede{font-size:var(--fs-lede);color:var(--text-2)}

/* ---------- act (simulator) ---------- */
.act{padding-block:clamp(16px,2vw,32px);width:100%}
.act-grid{display:grid;gap:var(--sp5);align-items:center;width:100%}
.stage{display:grid;justify-items:center;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.copy-col{display:grid;gap:var(--l)}
.act-head{display:grid;gap:var(--l);max-width:46ch}
.steps{display:grid;gap:var(--s)}
.stepcopy{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:var(--m);row-gap:2px;align-items:start;padding:var(--s) 0;max-width:46ch;cursor:pointer;opacity:.45;transition:opacity .3s}
.stepcopy h3{font-size:17px;grid-column:2}
.stepcopy p{grid-column:2;font-size:14.5px;line-height:1.5}
.stepcopy .n{grid-row:span 2;width:30px;height:30px}
.stepcopy .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:100px;border:1px solid var(--hairline);font-size:13px;font-weight:700;color:var(--text-2)}
.stepcopy p{color:var(--text-2)}
.act[data-step="1"] .stepcopy[data-step="1"],.act[data-step="2"] .stepcopy[data-step="2"],.act[data-step="3"] .stepcopy[data-step="3"],.act[data-step="4"] .stepcopy[data-step="4"],.act[data-step="5"] .stepcopy[data-step="5"]{opacity:1}
.act[data-step="1"] .stepcopy[data-step="1"] .n,.act[data-step="2"] .stepcopy[data-step="2"] .n,.act[data-step="3"] .stepcopy[data-step="3"] .n,.act[data-step="4"] .stepcopy[data-step="4"] .n,.act[data-step="5"] .stepcopy[data-step="5"] .n{border-color:var(--brand);color:var(--brand)}

/* controls (real, outside the mock) */
.ctl button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:0 var(--l);border-radius:100px;border:1px solid var(--hairline);background:var(--elevated);font-size:14px;font-weight:700;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.ctl button:hover:not(:disabled){background:var(--surface)}
.ctl button:disabled{opacity:.4;cursor:default}
.ctl button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dots{display:flex;gap:var(--xs);align-items:center}
.dots button{min-width:44px;min-height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;border-radius:100px}
.dots button i{display:block;width:26px;height:4px;border-radius:100px;background:var(--hairline);transition:background .25s}
.dots button[aria-current="true"] i{background:var(--brand)}
.dots button:hover i{background:var(--text-2)}

/* ---------- device frame (web chrome, grade A) ---------- */
.device{width:calc(393px * var(--dev));flex-shrink:0}
.bezel{width:calc(393px * var(--dev));height:calc(852px * var(--dev));border-radius:calc(54px * var(--dev));background:var(--text);padding:calc(6px * var(--dev));position:relative}
.bezel::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 30px 70px -40px rgba(48,48,48,.55);pointer-events:none}
.viewport{width:calc(381px * var(--dev));height:calc(840px * var(--dev));border-radius:calc(48px * var(--dev));overflow:hidden;position:relative;background:var(--scaffold)}
.ph{position:absolute;top:0;left:0;width:381px;height:840px;transform:scale(var(--dev));transform-origin:0 0;background:var(--scaffold);color:var(--text);font-size:15px;line-height:1.5;letter-spacing:-.02em;overflow:hidden}
.stage-cap{font-size:12px;color:var(--text-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* screen layers + step gating (CSS-only state machine) */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--scaffold);opacity:0;visibility:hidden;transition:opacity .28s ease}
.act[data-step="1"] .scr[data-on~="1"],.act[data-step="2"] .scr[data-on~="2"],.act[data-step="3"] .scr[data-on~="3"],.act[data-step="4"] .scr[data-on~="4"],.act[data-step="5"] .scr[data-on~="5"]{opacity:1;visibility:visible}
.act[data-step="1"] [data-show]:not([data-show~="1"]),.act[data-step="2"] [data-show]:not([data-show~="2"]),.act[data-step="3"] [data-show]:not([data-show~="3"]),.act[data-step="4"] [data-show]:not([data-show~="4"]),.act[data-step="5"] [data-show]:not([data-show~="5"]){display:none!important}
.act[data-step="1"] [data-hide~="1"],.act[data-step="2"] [data-hide~="2"],.act[data-step="3"] [data-hide~="3"],.act[data-step="4"] [data-hide~="4"],.act[data-step="5"] [data-hide~="5"]{display:none!important}
[data-cue]{position:relative}
.act[data-step="2"] [data-cue~="2"],.act[data-step="3"] [data-cue~="3"],.act[data-step="4"] [data-cue~="4"],.act[data-step="5"] [data-cue~="5"]{z-index:7}
.act[data-step="2"] [data-cue~="2"]::before,.act[data-step="3"] [data-cue~="3"]::before,.act[data-step="4"] [data-cue~="4"]::before{content:"";position:absolute;inset:-8px;border-radius:inherit;border:2.5px solid var(--brand);animation:cue 1.6s ease-out infinite}
@keyframes cue{0%{transform:scale(.94);opacity:.9}70%{transform:scale(1.14);opacity:0}100%{opacity:0}}

/* ===== app screen internals — GRADE B: reproduce, do not reinterpret ===== */
.sb{height:50px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 4px;font-size:15px;font-weight:700}
.sb .r{display:flex;align-items:center;gap:6px}
.sb .bat{width:23px;height:12px;border:1.4px solid currentColor;border-radius:3px;position:relative}
.sb .bat::after{content:"";position:absolute;right:-3px;top:3.4px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.sb .bat i{position:absolute;inset:1.6px;width:70%;background:currentColor;border-radius:1px}
.ico{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.LargeTitleHeader{flex-shrink:0;padding:2px 0 0}
.LargeTitleHeader .top{display:flex;align-items:center;gap:var(--xs);padding:0 var(--xl);min-height:44px}
.LargeTitleHeader .top .sp{flex:1}
.iconbtn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);position:relative;flex-shrink:0}
.iconbtn.brand{color:var(--brand)}
.LargeTitleHeader .big{padding:2px var(--xl) 0;font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1.06}
.navbar{flex-shrink:0;display:flex;align-items:center;gap:var(--xs);padding:0 var(--s);min-height:44px}
.navbar .ct{flex:1;text-align:center;font-size:17px;font-weight:700;letter-spacing:-.025em}
.navbar .txt{color:var(--brand);font-size:15.5px;font-weight:700;padding:0 var(--m);min-height:44px;display:flex;align-items:center;white-space:nowrap}
.navbar .txt.dim{color:var(--text-2)}
.AvatarView{display:block;width:42px;height:42px;border-radius:50%;flex-shrink:0;position:relative}
.AvatarView .ph-c{width:100%;height:100%;border-radius:50%;border:1px solid var(--hairline);background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--text-2)}
.AvatarView.sm{width:34px;height:34px}
.AvatarView.sm .ph-c{font-size:13px}
.AvatarView.lg{width:96px;height:96px}
.AvatarView.lg .ph-c{font-size:34px}
.AvatarView.on::after{content:"";position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;background:var(--online);border:2.4px solid var(--scaffold)}
.filters{display:flex;gap:var(--s);padding:14px var(--xl) var(--m);flex-shrink:0}
.FilterPill{display:flex;align-items:center;gap:5px;min-height:44px;padding:0 14px;border-radius:100px;border:1px solid var(--hairline);background:var(--elevated);font-size:13px;font-weight:500;color:var(--text)}
.FilterPill svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--text-2)}
.FilterPill.active{background:color-mix(in srgb,var(--brand) 12%,transparent);border-color:color-mix(in srgb,var(--brand) 40%,transparent);color:var(--brand)}
.FilterPill.active svg{color:var(--brand)}
.stream{flex:1;overflow:hidden;padding:0 var(--l) 0;display:flex;flex-direction:column;gap:16px}
.shout{display:grid;grid-template-columns:42px 1fr;gap:var(--m);align-items:start}
.shout .who{grid-column:2;display:flex;align-items:center;gap:var(--s);line-height:1.2}
.shout .nick{font-size:14.5px;font-weight:700}
.badge-new{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--on-brand);background:var(--danger);padding:2px 6px;border-radius:5px}
.shout .meta{grid-column:2;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);margin-top:3px;line-height:1.2}
.shout .meta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linejoin:round}
.shout .meta b{font-weight:400;color:var(--text-2)}
.bub{grid-column:2;margin-top:7px;background:var(--surface);border-radius:var(--r-bub);padding:13px var(--l);font-size:15px;line-height:1.5}
.bub .tr{display:block;margin-top:var(--m);padding-top:var(--m);border-top:1px solid var(--hairline);color:var(--text-2);font-size:15px}
.photo{grid-column:2;margin-top:var(--s);border-radius:var(--r-photo);height:190px}
.acts{grid-column:2;display:flex;align-items:center;gap:var(--xl);margin-top:2px;min-height:40px}
.acts .a{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--text-2);font-weight:400}
.acts .a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.acts .a.liked{color:var(--brand);font-weight:700}
.acts .a.liked svg{fill:currentColor;stroke:none}
.acts .a.on{color:var(--brand);font-weight:700}
.acts .a.mine{color:var(--text)}
.acts .a.mine svg{fill:currentColor;stroke:none}
.shout.me{grid-template-columns:1fr}
.shout.me .bub{grid-column:1;background:var(--brand);color:var(--on-brand);justify-self:end;max-width:82%;border-bottom-right-radius:7px;margin-top:0}
.shout.me .meta{grid-column:1;justify-content:flex-end;margin-top:5px}
.shout.me .acts{grid-column:1;justify-content:flex-end;gap:var(--l)}
.imgph{position:relative;overflow:hidden;border:1px solid var(--hairline);background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 9px,#EFEFEC 9px,#EFEFEC 18px)}
.imgph .cap{position:absolute;left:10px;bottom:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--text-2);background:var(--elevated);border:1px solid var(--hairline);padding:3px 7px;border-radius:6px}
.ComposeFAB{position:absolute;right:18px;bottom:108px;width:58px;height:58px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;z-index:6}
.ComposeFAB svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.tabbar{position:absolute;left:18px;right:18px;bottom:24px;height:62px;border-radius:30px;background:color-mix(in srgb,var(--elevated) 72%,transparent);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--hairline);display:flex;align-items:center;padding:0 10px;gap:var(--xs);z-index:5}
.tabbar .t{flex:1;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-2);font-size:10px;font-weight:500;border-radius:18px}
.tabbar .t svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar .t.on{color:var(--brand);background:color-mix(in srgb,var(--brand) 11%,transparent)}
.home-ind{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--text);opacity:.3;z-index:7}
.scrim{position:absolute;inset:0;background:rgba(48,48,48,.34);z-index:9}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--elevated);border-radius:var(--r-sheet) var(--r-sheet) 0 0;border-top:1px solid var(--hairline);padding:var(--s) 18px 26px;z-index:10;display:flex;flex-direction:column;gap:var(--l)}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--hairline);margin:6px auto 4px}
.sheet .sh-t{font-size:17px;font-weight:700;letter-spacing:-.03em}
.field{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-input);padding:14px 15px;font-size:15px;line-height:1.5;min-height:104px}
.field .pl{color:var(--text-2)}
.field .cur{display:inline-block;width:2px;height:17px;background:var(--brand);vertical-align:-3px;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.frow{display:flex;align-items:center;justify-content:space-between;gap:var(--m)}
.counter{font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap}
.frow>span:first-child{flex:1;min-width:0}
.PillButton{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:100px;font-size:14px;font-weight:700;border:1px solid var(--hairline);background:var(--surface);color:var(--text)}
.PillButton.brand{background:var(--brand);color:var(--on-brand);border-color:transparent}
.PillButton.block{width:100%;min-height:52px;font-size:15px}
.PillButton .spin{width:17px;height:17px;border:2px solid color-mix(in srgb,var(--on-brand) 45%,transparent);border-top-color:var(--on-brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{100%{transform:rotate(360deg)}}
.ToastView{position:absolute;left:50%;bottom:130px;transform:translateX(-50%);background:var(--text);color:var(--scaffold);padding:13px 18px;border-radius:100px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:9px;white-space:nowrap;z-index:8}
.ToastView svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* conversation list */
.list{display:flex;flex-direction:column;overflow:hidden;flex:1}
.lrow{display:flex;align-items:center;gap:13px;padding:13px var(--xl);position:relative;min-height:44px}
.lrow+.lrow::before{content:"";position:absolute;left:75px;right:0;top:0;height:1px;background:var(--hairline)}
.lrow.full+.lrow.full::before{left:var(--xl)}
.lrow .lico{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--text)}
.lrow .lico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lrow .lico.danger{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.lrow .lt{flex:1;min-width:0}
.lrow .n1{display:flex;align-items:baseline;gap:var(--s)}
.lrow .n1 .nm{font-size:14.5px;font-weight:700}
.lrow .n1 .tm{margin-left:auto;font-size:12px;color:var(--text-2);flex-shrink:0}
.lrow .prev{font-size:13.5px;color:var(--text-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .prev.unread{color:var(--text);font-weight:500}
.lrow .lr{flex-shrink:0;display:flex;align-items:center;gap:7px;color:var(--text-2);font-size:14px}
.lrow .lr svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.lrow .st{font-size:15.5px;font-weight:500;flex:1}
.lrow .st.danger{color:var(--danger)}
.count{min-width:20px;height:20px;padding:0 6px;border-radius:100px;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.group-h{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--text-2);text-transform:uppercase;padding:22px var(--xl) var(--s)}
.switch{width:50px;height:30px;border-radius:100px;background:var(--online);position:relative;flex-shrink:0}
.switch i{position:absolute;top:2px;left:22px;width:26px;height:26px;border-radius:50%;background:#fff}
/* thread */
.thread{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:14px var(--l) var(--m)}
.daydiv{align-self:center;font-size:11.5px;font-weight:500;color:var(--text-2);background:var(--surface);border:1px solid var(--hairline);padding:4px var(--m);border-radius:100px;margin:var(--xs) 0}
.tbub{max-width:76%;padding:11px 14px;font-size:15px;line-height:1.5;border-radius:var(--r-bub);word-break:keep-all}
.tbub.recv{align-self:flex-start;background:var(--surface);color:var(--text);border-bottom-left-radius:7px}
.tbub.sent{align-self:flex-end;background:var(--brand);color:var(--on-brand);border-bottom-right-radius:7px}
.tbub .tr{display:block;margin-top:var(--s);padding-top:var(--s);border-top:1px solid var(--hairline);font-size:13.5px;color:var(--text-2)}
.tmeta{align-self:flex-end;font-size:11px;color:var(--text-2);display:flex;align-items:center;gap:var(--xs);padding:0 var(--xs)}
.tmeta.l{align-self:flex-start}
.tmeta .read{color:var(--brand);font-weight:700}
.trbtn{width:max-content;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 11px;border-radius:100px;border:1px solid var(--hairline);background:var(--elevated);font-size:12px;font-weight:500;color:var(--text-2)}
.trbtn.on{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 34%,transparent);background:color-mix(in srgb,var(--brand) 9%,transparent)}
.trbtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9}
.composer{flex-shrink:0;border-top:1px solid var(--hairline);background:var(--elevated);padding:10px 14px 22px;display:flex;align-items:center;gap:9px}
.composer .cin{flex:1;background:var(--surface);border:1px solid var(--hairline);border-radius:100px;padding:10px var(--l);font-size:15px;min-height:44px;display:flex;align-items:center}
.composer .cin .pl{color:var(--text-2)}
.composer .snd{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center}
.composer .snd.off{background:var(--surface);color:var(--text-2);border:1px solid var(--hairline)}
.composer .snd svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.composer .att{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-2)}
.composer .att svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* mypage */
.NoticeCard{border:1px solid var(--hairline);background:var(--elevated);border-radius:var(--r-card);padding:var(--l);display:flex;align-items:center;gap:14px}
.NoticeCard .tt{flex:1;min-width:0}
.NoticeCard .h{font-size:15.5px;font-weight:700}
.NoticeCard .p{font-size:13px;color:var(--text-2);margin-top:2px}
.scrollarea{flex:1;overflow:hidden;padding-bottom:110px}
.pad{padding:0 var(--xl)}
.edit-av{display:flex;flex-direction:column;align-items:center;gap:var(--m);padding:var(--xl) 0 var(--xxl)}
.edit-av .rel{position:relative;display:inline-block}
.edit-av .cam{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;border:2.5px solid var(--scaffold)}
.edit-av .cam svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.lbl{font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:var(--s);display:block}
.field.one{min-height:auto}

/* --- dm list --- */
.search{flex-shrink:0;margin:6px var(--xl) var(--s);background:var(--surface);border-radius:100px;min-height:48px;display:flex;align-items:center;gap:10px;padding:0 var(--l);color:var(--text-2);font-size:15px}
.search svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;flex-shrink:0}
.lrow.conv{padding:14px var(--xl);gap:var(--m);align-items:center}
.list.conv .lrow+.lrow::before{left:var(--xl)}
.lrow.conv .nm{font-size:15.5px;font-weight:700}
.lrow.conv .prev{font-size:13.5px;color:var(--text-2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow.conv .prev.unread{color:var(--text)}
.rcol{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.rcol .tm{font-size:12px;color:var(--text-2)}
.rcol .count{min-width:22px;height:22px;font-size:12px}
.tbadge{position:absolute;top:2px;right:50%;margin-right:-19px;min-width:18px;height:18px;padding:0 5px;border-radius:100px;background:var(--danger);color:var(--on-brand);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* --- thread header + rows --- */
.cbtn{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--text)}
.cbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cbtn.on{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.cbtn.ghost{background:none}
.peer{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s);min-width:0}
.peer .pn{font-size:15.5px;font-weight:700;line-height:1.2}
.peer .po{font-size:12px;font-weight:500;color:var(--online);line-height:1.3}
.mrow{display:flex;align-items:flex-end;gap:var(--s)}
.mrow.s{justify-content:flex-end}
.mstat{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:11.5px;color:var(--text-2);flex-shrink:0;padding-bottom:2px}
.mstat .read{color:var(--brand);font-weight:700;font-size:12px}
.tbub{max-width:62%}
/* --- mypage --- */
.profile-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--xxl) var(--xl) 0;gap:var(--m)}
.pname{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-top:var(--xs)}
.pmeta{font-size:14px;color:var(--text-2);margin-top:-6px}
.pbio{font-size:15px;line-height:1.55}
.ptags{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s) var(--m);font-size:13.5px;font-weight:500;color:var(--text-2)}
.PillButton.outline{background:var(--elevated);border-color:var(--hairline)}
.PillButton svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--brand);font-size:14.5px;font-weight:700;flex-shrink:0}
.linkbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.NoticeCard .p{font-size:12.5px}
.NoticeCard .h{font-size:17px;font-weight:700}
.lbl b{color:var(--brand);font-weight:700}
.edit-av{gap:var(--l)}
.card-list{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;background:var(--elevated)}
.crow{display:flex;align-items:center;gap:var(--m);padding:0 var(--l);min-height:56px;position:relative}
.crow+.crow::before{content:"";position:absolute;left:var(--l);right:var(--l);top:0;height:1px;background:var(--hairline)}
.crow .ck{font-size:15px;font-weight:500}
.crow .cv{margin-left:auto;font-size:15px;color:var(--text-2)}
.crow .cv.num{color:var(--text);font-weight:700}
.crow .cv.num em{font-style:normal;font-size:12.5px;font-weight:400;color:var(--text-2);margin-left:3px}
.crow .vdiv{width:1px;height:24px;background:var(--hairline)}
.crow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--text-2);flex-shrink:0}
.datechip{margin-left:auto;background:var(--surface);border-radius:10px;padding:7px var(--m);font-size:15px;font-weight:700}
.bottombar{position:absolute;left:0;right:0;bottom:0;padding:var(--m) var(--xl) 28px;background:var(--scaffold);z-index:6}
.PillButton.block{min-height:52px}
.tabbar .t.on{color:var(--brand);background:var(--surface)}
.tabbar .t svg{width:26px;height:26px}
.tabbar .t{position:relative}
/* ---------- safety / download / footer ---------- */
.cards{display:grid;gap:var(--xxl);margin-top:var(--sp5)}
.card{border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--sp5);display:grid;gap:var(--m);align-content:start;background:var(--elevated)}
.card .ci{width:48px;height:48px;border-radius:var(--r-input);display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand);margin-bottom:var(--xs)}
.card .ci svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--text-2);font-size:15px}
.ft-wrap{position:fixed;left:0;right:0;bottom:0;min-height:var(--ft);z-index:40;background:var(--surface);border-top:1px solid var(--hairline)}
.linkcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--xxl) var(--sp5)}
.linkcols h4{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-bottom:var(--m)}
.linkcols li+li{margin-top:var(--s)}
.linkcols a{color:var(--text);font-size:15px}
.ft{min-height:var(--ft);display:flex;align-items:center;justify-content:center;text-align:center;padding-block:var(--m);font-size:12.5px;color:var(--text-2)}
.ft .sp{flex:1}

/* ---------- breakpoints ---------- */
@media (max-width:1023px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-height:760px){:root{--dev:.5;--sp6:32px;--sp7:44px;--sp8:56px}
  .card{padding:var(--xxl)}
  .cards{gap:var(--l);margin-top:var(--sp5)}}
@media (min-height:920px){:root{--dev:.72}}
@media (max-width:1023px){
  :root{--ft:52px}
  .act-grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--l)}
  .stage{align-self:center}
  .copy-col{display:contents}
  .act-head{order:1}
  .steps{order:2}
  .stage{order:3;margin-bottom:0;align-self:center}
  .stepcopy p{font-size:13.5px}
  .stepcopy h3{font-size:16px}
  :root{--dev:.44}
  .cards{grid-template-columns:1fr}
  .linkcols{grid-template-columns:1fr}
}
@media (max-width:767px){
  :root{--dev:.68}
  .track{padding-bottom:0}
  .track>section{min-height:auto;justify-content:flex-start}
  .act,.sec{padding-block:40px 48px}
  .stage{margin-top:var(--s)}
}
@media (min-width:768px) and (max-width:1023px){:root{--dev:.6}}
@media (min-width:1024px){
  .act-grid{grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,110px)}
  .act-grid.flip{grid-template-columns:minmax(0,1fr) auto}
  .act-grid.flip .stage{order:2}
}
@media (min-width:1024px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .linkcols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .stage{position:static}
  .stepcopy{min-height:0}
}

/* ============================================================
   v3 — 한 화면에 한 섹션. 세로 스크롤 스냅 패널 · 섹션별 배경 ·
   중앙 정렬 타이포 스택 · 스크롤 반응 헤더 · 대형 다크 푸터.
   여기부터는 위 계층을 의도적으로 덮어쓴다.
   ============================================================ */
/* 스냅은 랜딩(`html.landing`)에만 건다. 문서 페이지는 본문이 길어 스냅이 방해가 된다. */
/* 스냅 정렬도 `scroll-padding-top`을 따른다. 헤더 높이(64px)를 잡아 두면 다른 패널은 그만큼
   내려 앉지만 `panel-1`은 스크롤이 0보다 위로 못 가 그 자리에 걸린다 — 첫 패널만 64px 위로
   보이는 원인이다. 헤더는 카피 위를 덮지 않으므로 랜딩에서는 0으로 둔다. */
html.landing{scroll-snap-type:y mandatory;scroll-behavior:smooth;scroll-padding-top:0}
/* 좁거나 낮은 화면은 강제 스냅이 답답해 근접 스냅으로 낮춘다. */
@media (max-width:767px),(max-height:620px){html.landing{scroll-snap-type:y proximity}}
@media (prefers-reduced-motion:reduce){html.landing{scroll-snap-type:none;scroll-behavior:auto}}
/* 패널 기본값은 흰 패널. 여기 두면 `.ft-wrap`이 자기 요소에서 덮어쓴다.
   섹션 규칙에 직접 쓰면 선택자 우선순위가 높아 덮어쓰기가 막힌다. */
:root{--ft:0px;--panel-t:.45s;--panel:var(--scaffold);--panel-fg:var(--text);--panel-mark:brand}
/* 카피 첫 줄이 앉는 높이. 패널마다 줄 수가 달라 세로 중앙 정렬로는 시작 위치가 제각각이 된다.
   값은 ko `panel-1`(두 줄)이 중앙 정렬로 놓이던 자리다 — 모바일 42.8svh · 데스크탑 40.4svh. */
:root{--copy-top:41svh}

/* ---------- 패널 ---------- */
.track{padding-top:0;padding-bottom:0}
/* 카피는 중앙이 아니라 모든 패널이 공유하는 `--copy-top` 높이에서 시작한다.
   중앙 정렬은 블록 높이의 절반만큼 밀리므로 줄 수가 다른 패널끼리 첫 줄이 어긋난다. */
.track>section{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;scroll-snap-align:start;scroll-snap-stop:always;border-top:0;padding-block:var(--copy-top) clamp(24px,5vh,64px);background:var(--panel);color:var(--panel-fg);transition:background var(--panel-t) ease}
/* 배경이 있는 패널 위에서는 카드가 흰 면을 유지해야 읽힌다. */
.track>section .card{background:var(--elevated)}

/* 기본 링크색(brand-link)은 브랜드색 위에서 읽히지 않는다. */

/* 다음 패널로 가는 안내. 화면 아무 데나 탭하면 넘어가므로 눌러야 할 표적처럼 보이는
   외곽선 pill을 걷고 문구만 남긴다. 요소는 그대로 `button`이다 — 패널 전체 탭은 키보드로
   쓸 수 없어서 이것이 같은 동작의 키보드·보조기술 경로다.
   마지막 패널에는 두지 않는다 — 그 아래는 푸터다.
   카피 흐름 안에 두고 텍스트 끝에서 일정 간격만큼 띄운다. 뷰포트 좌표에 고정하면 카피가
   세 줄로 접히는 로케일에서 문장과 안내가 붙거나 겹친다. */
.tap-cue{justify-self:center;margin-top:6svh;padding:8px 12px;min-height:44px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;font-size:var(--fs-body);letter-spacing:.01em;opacity:.62;cursor:pointer;animation:cue-tap 2.4s ease-in-out infinite}
.tap-cue:hover,.tap-cue:focus-visible{opacity:1;animation:none}
/* 제목이 다 적힌 뒤에 나온다. opacity는 펄스 애니메이션이 쥐고 있어 visibility로 연다. */
html.typing .tap-cue{visibility:hidden}
html.typing .tap-cue.in{visibility:visible}
@keyframes cue-tap{0%,100%{opacity:.62}50%{opacity:1}}

/* ---------- 패널색을 따라가는 헤더 ----------
   헤더 아래에 깔린 패널의 `--panel`·`--panel-fg`를 JS가 여기에 실어 주고,
   `--panel-mark`가 `light`인 패널에서는 흰 워드마크로 바꿔 단다.
   JS가 없으면 흰 패널 기준값(흰 바탕·브랜드색 워드마크)으로 남는다. */
.hd{background:var(--hd-bg,var(--scaffold));color:var(--hd-fg,var(--text));backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;transition:background var(--panel-t) ease,color var(--panel-t) ease}
.hd .wordmark-inv{display:none;width:auto;height:26px}
.hd.on-inverse .wordmark{display:none}
.hd.on-inverse .wordmark-inv{display:block}

/* ---------- 언어 선택 (<details>) ---------- */
.langsel{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:100px;border:1px solid var(--hairline);background:color-mix(in srgb,var(--elevated) 82%,transparent);font-size:14px;font-weight:500;color:var(--text);cursor:pointer;list-style:none;transition:background .15s,border-color .15s}
.lang-btn::-webkit-details-marker{display:none}
.lang-btn:hover{background:var(--surface)}
.lang-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--text-2)}
.langsel[open] .lang-btn{background:var(--surface);border-color:color-mix(in srgb,var(--brand) 38%,transparent)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;padding:var(--s);display:grid;gap:2px;background:var(--elevated);border:1px solid var(--hairline);border-radius:var(--r-input);box-shadow:0 22px 44px -26px rgba(48,48,48,.55);z-index:41}
.lang-menu a{display:flex;align-items:center;min-height:44px;padding:0 var(--m);border-radius:10px;font-size:15px;font-weight:500;color:var(--text)}
.lang-menu a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.lang-menu a[aria-current="true"]{color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent)}
@media (max-width:520px){.lang-btn{width:40px;padding:0;justify-content:center}.lang-btn .lang-cur{display:none}}
/* 헤더 바탕이 패널마다 바뀌므로 언어 버튼도 고정색 대신 헤더의 글자색을 따른다. */
.hd .lang-btn,.hd .lang-btn svg{color:inherit}
.hd .lang-btn{background:color-mix(in srgb,currentColor 8%,transparent);border-color:color-mix(in srgb,currentColor 26%,transparent)}
.hd .lang-btn:hover,.hd .langsel[open] .lang-btn{background:color-mix(in srgb,currentColor 16%,transparent);border-color:color-mix(in srgb,currentColor 42%,transparent)}

/* ---------- 중앙 정렬 타이포 스택 ---------- */
.sec-head,.act-head{text-align:center;justify-items:center;margin-inline:auto;max-width:56ch}
.sec-lede{margin-inline:auto;max-width:52ch}
/* 카피의 개행은 로케일 파일이 정한다. `pre-line`이라 줄바꿈만 살고 자동 줄바꿈은 그대로 돈다.
   패널 카피 전용이라 `.track` 안으로 묶는다 — 맨 요소 선택자로 두면 약관·개인정보 본문의
   h2까지 24ch에서 접히고 밑줄이 중간에 끊긴다. */
.track h2{max-width:24ch;margin-inline:auto;white-space:pre-line}
/* 문장 안에 들어가는 워드마크. 글자 크기를 따라가도록 em으로 잰다. */
.h2-mark{display:inline-block;width:auto;height:.72em;vertical-align:-.06em}
/* 타이핑 노출. 글자는 처음부터 제자리에 있고 visibility만 순서대로 열려 줄바꿈이 흔들리지 않는다. */
.tw{visibility:hidden;transition:visibility 0s}
h2.typed .tw{visibility:visible;transition-delay:calc(var(--i) * 70ms)}
@media (prefers-reduced-motion:reduce){.tw{visibility:visible}}
/* 카피가 디바이스 위로 올라와 세로를 나눠 쓰므로, 한 패널에 함께 들어가도록
   기기 배율을 화면 높이에 맞춘다. */
.act .device,.act .bezel,.act .viewport,.act .ph{--dev:var(--dev-act,.38)}
@media (min-height:820px){:root{--dev-act:.46}}
@media (min-height:1000px){:root{--dev-act:.54}}

/* ---------- 기능 섹션: 카피 위, 디바이스 아래 ---------- */
.act-grid,.act-grid.flip{display:flex;flex-direction:column;align-items:center;gap:var(--xxl)}
.copy-col{display:grid;order:-1;justify-items:center;text-align:center;gap:var(--xxl)}
.act-head{gap:var(--l)}
.stage{width:100%}
.steps{display:grid;gap:var(--m);max-width:44ch;margin-inline:auto;justify-items:stretch;text-align:left}
.stepcopy{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:var(--m);max-width:none;padding:var(--s) 0;text-align:left;opacity:1;cursor:default}
.stepcopy .n{display:inline-flex}
.stepcopy h3{grid-column:2;font-size:16.5px}
.stepcopy p{grid-column:2;font-size:14.5px;margin-top:2px}

/* ---------- 다운로드 (마지막 패널) ---------- */
/* 패널 id가 아니라 자리로 고른다. 패널을 늘리거나
   줄여도 마지막 패널이 배지를 갖는다. 푸터 배지는 `.track` 밖이라 걸리지 않는다. */
.track > section:last-child .badges{justify-content:center;margin-top:var(--sp5)}

/* ---------- 대형 다크 푸터 (고정 해제, 마지막 슬라이드) ---------- */
.ft-wrap{position:static;z-index:1;--panel:#262624;--panel-fg:#D8D8D4;--panel-mark:light;background:var(--panel);border-top:0;color:var(--panel-fg);scroll-snap-align:start;padding-block:var(--sp6) var(--xxl)}
.ft-grid{display:grid;gap:var(--sp5);grid-template-columns:minmax(0,1fr)}
.ft-brand{display:grid;gap:var(--l);align-content:start}
.ft-brand .wordmark{height:24px}
.ft-badges{gap:var(--s)}
.ft-wrap .linkcols h4{color:#84847E}
.ft-wrap .linkcols a{color:#E8E8E4}
.ft-wrap .linkcols a:hover{color:#fff}
.ft-wrap .ft{border-top:1px solid #3A3A36;margin-top:var(--sp5);justify-content:space-between;text-align:left;gap:var(--l);flex-wrap:wrap;color:#84847E;min-height:0;padding-block:var(--xl) 0}
@media (min-width:768px){.ft-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,2fr)}}

/* ---------- 맨 위로 ---------- */

/* ---------- 스크롤 리빌 ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ============================================================
   문서 페이지 (약관 · 개인정보처리방침 · FAQ)
   랜딩과 같은 헤더·푸터를 쓰고 본문만 카드로 얹는다.
   ============================================================ */
/* 본문이 짧아도 푸터가 화면 중간에 뜨지 않게 바닥으로 민다. */
.page-document{display:flex;flex-direction:column;min-height:100svh}
.page-document main{flex:1}
/* 헤더가 fixed라 그 높이만큼 본문을 내린다. */
.doc-sec{padding-block:calc(var(--hd) + var(--sp6)) var(--sp6);padding-inline:var(--gut)}

.doc-page{max-width:820px;margin-inline:auto}
.doc-page__title{font-size:var(--fs-h2);font-weight:700;line-height:1.15;letter-spacing:-.032em;margin-bottom:var(--xxl)}
.doc-page__card{background:var(--elevated);border:1px solid var(--hairline);border-radius:var(--r-card);padding:clamp(20px,4vw,48px)}
.doc-page__card>*:first-child{margin-top:0}
.doc-status{color:var(--text-2);text-align:center;padding-block:var(--sp5)}
.doc-page__fallback{margin:0;white-space:pre-wrap;font-family:inherit;font-size:inherit;line-height:1.75}

/* 약관 본문은 API에서 런타임 fetch라 폰트 서브셋 밖이다 — 서체 혼용을 피해 시스템 폰트로 그린다. */
.markdown-content{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;line-height:1.75;letter-spacing:normal;overflow-wrap:break-word}
.markdown-content h1,.markdown-content h2,.markdown-content h3{margin:2rem 0 1rem;line-height:1.3}
.markdown-content h1{font-size:28px;font-weight:700}
.markdown-content h2{font-size:22px;font-weight:700;border-bottom:1px solid var(--hairline);padding-bottom:10px}
.markdown-content h3{font-size:18px;font-weight:600}
.markdown-content p,.markdown-content ul,.markdown-content ol{margin-bottom:1rem}
/* 전역 리셋이 목록 표식을 지웠으므로 본문에서는 되살린다. */
.markdown-content ul{list-style:disc}
.markdown-content ol{list-style:decimal}
.markdown-content ul,.markdown-content ol{padding-left:20px}
.markdown-content li{margin-bottom:.5rem}
.markdown-content strong{font-weight:600}
.markdown-content a{text-decoration:underline}
.markdown-content img{max-width:100%;height:auto}
.markdown-content pre{overflow-x:auto;max-width:100%}