/* B안 「밑줄 한 줄」(v4/design/B/b.css 사본, 2026-10-24 X-EB5: 첫 화면 .ans·.who → .s-ans·.s-who 로 이름만 바꿈 — 답 카드 .ans 와 겹침) — 토큰은 CONCEPT.md. 종이 흰색 + 먹 + 형광 노랑 하나, 모서리 0. 글꼴 Wanted Sans(제목·UI) · 나눔명조(답 인용) · DM Mono(라벨·숫자) */
:root{--sheet:#FBFBF9;--grey:#EDEDEA;--ink:#121212;--ink2:#5A5A57;--marker:#F2E31B;--marker-d:#D9C800;--rule:rgba(18,18,18,.14);
  --hd:"Wanted Sans Variable","Wanted Sans",sans-serif;--qt:"Nanum Myeongjo",serif;--mono:"DM Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--gut:clamp(20px,4vw,56px);--max:1360px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--hd);background:var(--sheet);color:var(--ink);font-size:16px;line-height:1.65;word-break:keep-all;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
.sr{position:absolute;left:-9999px}.sr:focus{left:12px;top:12px;z-index:200;background:#fff;padding:8px 12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--marker)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.smp{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid currentColor;font:500 11px/17px var(--mono);opacity:.6;vertical-align:2px}

/* ---------- 브랜드 장치: 형광 막대 ---------- */
.hl{background-image:linear-gradient(100deg,transparent .4em,var(--marker) .4em,var(--marker) calc(100% - .3em),transparent calc(100% - .3em));background-repeat:no-repeat;background-size:0% 62%;background-position:0 78%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;transition:background-size 1s var(--ease)}
.in .hl,.hl.in,.on .hl{background-size:100% 62%}
.hl.big{background-size:0% 46%;background-position:0 86%}.in .hl.big,.hl.big.in{background-size:100% 46%}
.mk{display:block;width:100%;height:12px;margin-top:4px;background:var(--marker);clip-path:polygon(1% 18%,99% 0,100% 82%,0 100%);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.in .mk,.mk.in{transform:scaleX(1)}

/* ---------- 버튼 (NV-15 채움 → 기운 형광 막대가 쓸고 지나감) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 22px;font:700 16px/1 var(--hd);overflow:hidden;isolation:isolate;transition:color .3s}
.btn .sw{position:absolute;inset:-2px -20px;z-index:-1;background:var(--marker);transform:translateX(-105%) skewX(-14deg);transition:transform .5s var(--ease)}
.btn:hover .sw,.btn:focus-visible .sw{transform:translateX(0) skewX(-14deg)}
.btn.main{background:var(--ink);color:#fff}.btn.main:hover{color:var(--ink)}
.btn.line{border:1.5px solid var(--ink)}
.btn.mark{background:var(--marker);color:var(--ink)}.btn.mark .sw{background:#fff}
.btn.sm{min-height:44px;padding:0 16px;font-size:15px}
.ar{font-family:var(--mono);transition:transform .3s}.btn:hover .ar{transform:translateX(4px)}

/* ---------- 로딩 (IM-12 → 형광펜이 회색 줄을 긋고 지나감) ---------- */
.ld{position:fixed;inset:0;z-index:300;background:var(--sheet);display:grid;place-items:center;transition:transform .7s var(--ease) .15s}
.ld-in{width:min(420px,76vw)}
.ld i{position:relative;display:block;height:14px;margin:14px 0;background:var(--grey);overflow:hidden}
.ld i:nth-child(2){width:84%}.ld i:nth-child(3){width:62%}
.ld i::after{content:"";position:absolute;inset:0;background:var(--marker);transform:translateX(-101%);animation:ldswipe .32s var(--ease) forwards}
.ld i:nth-child(1)::after{animation-delay:.1s}.ld i:nth-child(2)::after{animation-delay:.38s}.ld i:nth-child(3)::after{animation-delay:.66s}
@keyframes ldswipe{to{transform:none}}
.ld p{margin-top:20px;font:500 13px var(--mono);color:var(--ink2)}
.ld.out{transform:translateY(-101%)}.ld.gone,.no-ld .ld{display:none}

/* ---------- 머리글 (NV-22 진행 막대) ---------- */
.hd{position:fixed;z-index:100;inset:0 0 auto 0;height:66px;display:flex;align-items:center;gap:20px;padding:0 var(--gut);background:rgba(251,251,249,.94);border-bottom:1px solid var(--rule);transition:transform .45s var(--ease)}
.hd[data-shown="false"]{transform:translateY(-100%)}
.hd-bar{position:absolute;left:0;bottom:-6px;height:6px;width:100%;background:var(--marker);transform-origin:left;transform:scaleX(var(--sp,0));clip-path:polygon(0 0,100% 30%,100% 100%,0 100%)}
@supports (animation-timeline: scroll()){.hd-bar{animation:hdfill linear both;animation-timeline:scroll(root)}@keyframes hdfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
.logo{font:850 22px/1 var(--hd);letter-spacing:-.03em;white-space:nowrap}
.lg-m{position:relative;z-index:0}.lg-m::before{content:"";position:absolute;z-index:-1;left:-3px;right:-4px;bottom:1px;height:55%;background:var(--marker);clip-path:polygon(1% 18%,99% 0,100% 82%,0 100%)}
.nav{display:flex;gap:4px}
.nav a{position:relative;display:block;padding:8px 10px;font-size:15px;font-weight:600;color:var(--ink2)}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:6px;background:var(--marker);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);z-index:-1}
.nav a:hover,.nav a.cur{color:var(--ink)}.nav a:hover::after,.nav a.cur::after{transform:scaleX(1)}
.srch{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;height:44px;padding:0 14px;border:1.5px solid var(--ink);font-size:14px;color:var(--ink2)}
.srch span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.srch svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink);stroke-width:2}
.login{font-size:15px;font-weight:600}
.burger{display:none;width:44px;height:44px;background:var(--ink);place-content:center;gap:6px}
.burger span{display:block;width:18px;height:2px;background:#fff}

/* ---------- 공통 ---------- */
section{position:relative}
.eye{font:500 13px var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--ink2);margin-bottom:14px}
.eye::before{content:"";display:inline-block;width:22px;height:8px;margin-right:8px;background:var(--marker);clip-path:polygon(1% 18%,99% 0,100% 82%,0 100%)}
h2{font:800 clamp(30px,3.8vw,58px)/1.12 var(--hd);letter-spacing:-.035em}
.sec-h{margin-bottom:48px;display:grid;grid-template-columns:1fr minmax(0,440px);column-gap:60px;align-items:end}
.sec-h .eye{grid-column:1/3}
.sec-h>p{color:var(--ink2);font-size:17px}
.more{margin-top:40px}
[data-d]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-d].in{opacity:1;transform:none}
.tx{display:inline-block;opacity:0;filter:blur(12px);transition:opacity .7s var(--ease),filter .7s var(--ease);transition-delay:calc(var(--i)*.05s)}
.in>.tx,[data-tx].in .tx,.in .tx{opacity:1;filter:blur(0)}

/* ---------- 첫 화면 「와」 검색 장면 ---------- */
.hero{padding-top:66px}
.h-top{max-width:var(--max);margin:0 auto;padding:clamp(28px,4.5vh,56px) var(--gut) clamp(24px,3.4vh,40px)}
.hero h1{font:900 clamp(40px,6.4vw,104px)/1.04 var(--hd);letter-spacing:-.045em}
.h-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:clamp(18px,2.6vh,30px)}
.h-row .sub{max-width:560px;font-size:18px;color:var(--ink2)}
.h-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;max-width:560px}
.h-cta .under{width:100%;text-align:right;font-size:13px;color:var(--ink2)}
.scene{position:relative;height:clamp(330px,44vh,470px);margin:0;background:#111;color:var(--ink);display:grid;grid-template-columns:1fr 1.35fr 1.2fr .95fr;gap:14px;padding:46px var(--gut) 30px;overflow:hidden}
.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.scene-blur{position:absolute;left:0;right:0;bottom:0;height:60%;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);pointer-events:none}
.tag{position:absolute;z-index:3;left:var(--gut);top:14px;font:500 12px var(--mono);background:var(--marker);color:var(--ink);padding:2px 8px}
.replay{position:absolute;z-index:3;right:var(--gut);top:10px;font:500 13px var(--mono);color:#fff;border-bottom:1px solid #fff;padding:2px 0;min-height:28px}
.sc{position:relative;z-index:2;align-self:end;background:var(--sheet);padding:18px 18px 20px;min-height:58%;display:flex;flex-direction:column;gap:10px;opacity:.35;transition:opacity .5s}
.sc.on{opacity:1}
.cap{font:500 12px var(--mono);color:var(--ink2);text-transform:uppercase}
.qbox{display:flex;align-items:center;border:2px solid var(--ink);padding:12px;font-size:17px;font-weight:700;min-height:56px}
.typed{white-space:nowrap;overflow:hidden;clip-path:inset(0 calc(100% - var(--tw,0%)) 0 0)}
.caret{width:2px;height:22px;background:var(--ink);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.s-ans{font:800 17px/1.75 var(--qt);color:var(--ink)}
.s-who{margin-top:auto;font-size:14px;font-weight:700}
.res{border-top:2px solid var(--ink);padding-top:10px}
.url{font:500 12px var(--mono);color:#2a6a3a}
.res b{display:block;font-size:17px;margin:4px 0 8px;color:#1a3fbf}
.land{font:800 16px/1.7 var(--qt);min-height:3.4em}
.land .hl{background-size:100% 62%}
.alert{border:2px solid var(--ink);padding:14px;transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.alert.on{transform:none;opacity:1}
.alert b{display:block;font-size:13px;font-family:var(--mono);background:var(--marker);width:max-content;padding:0 6px;margin-bottom:6px}
.alert span{font-size:16px;font-weight:700;line-height:1.5}
.fly{position:absolute;z-index:6;left:0;top:0;max-width:320px;font:800 16px/1.6 var(--qt);background:var(--marker);padding:4px 8px;opacity:0;pointer-events:none;transform:translate(var(--fx,0),var(--fy,0)) scale(var(--fs,1));transform-origin:left top}

/* ---------- 증거 숫자 (House 숫자 배치 → 흰 바탕 4칸) ---------- */
.proof{padding:70px 0 80px;border-bottom:1px solid var(--rule)}
.ph-h{display:flex;justify-content:space-between;gap:20px;margin-bottom:26px;font-size:15px}.ph-h span{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.pf{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink)}
.pf li{padding:22px 22px 0 0;border-right:1px solid var(--rule);margin-right:22px}
.pf li:last-child{border-right:0}
.pf b{display:block;font:800 clamp(40px,4.6vw,72px)/1 var(--hd);letter-spacing:-.04em}
.pf .mk{width:70%;margin:6px 0 14px}
.pf span{display:block;font-size:17px;font-weight:700}
.pf em{font:500 13px var(--mono);font-style:normal;color:var(--ink2)}

/* ---------- 주제 색인 (SC-04 고정 가로) ---------- */
.topics{background:var(--grey)}
.hwrap{position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.track{display:flex;flex:1;align-items:stretch;gap:0;padding:92px 0 50px var(--gut);will-change:transform}
.pn{position:relative;flex:0 0 clamp(300px,26vw,400px);display:flex;flex-direction:column;border-left:1px solid var(--rule);padding:0 22px;background:var(--grey)}
.pn.first{flex-basis:clamp(320px,34vw,520px);border-left:0;padding:0 50px 0 0;justify-content:flex-end}
.pn.first h2{font-size:clamp(40px,4.6vw,72px)}
.pn.first>p{margin-top:16px;font-size:17px;color:var(--ink2)}
.pn.first .guide{font:500 14px var(--mono);color:var(--ink);margin-top:24px}
.pph{flex:1;min-height:0;overflow:hidden;background:#222}
.pph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pn:hover .pph img{transform:scale(1.04)}
.pt{padding-top:16px}
.pno{display:inline-block;font:500 15px var(--mono)}.pno b{font-weight:500}.pno .mk{height:9px;margin-top:2px}
.pn.cur .pno .mk{transform:scaleX(1)}
.pt h3{font:800 28px/1.2 var(--hd);letter-spacing:-.03em;margin:6px 0 6px}
.pt .tg{font-size:16px}
.pt .pr{font-size:15px;color:var(--ink2)}
.lk{display:inline-block;margin-top:8px;font-size:15px;font-weight:700;border-bottom:1.5px solid var(--ink)}
.hbar{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;height:3px;background:var(--rule)}
.hbar i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--hp,0))}
.flat .pin{position:static;height:auto}.flat .track{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding:80px var(--gut) 40px}
.flat .pn{scroll-snap-align:start;height:min(78vh,640px)}.flat .hbar{display:none}
.flat .pin>.pn.first{flex:none;height:auto;padding:72px var(--gut) 0;background:none}.flat .pin>.pn.first+.track{padding-top:28px}

/* ---------- 고민톡 (신문 두 단) ---------- */
.talk{padding:120px 0 110px}
.tks{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:2px solid var(--ink)}
.tk{display:block;padding:28px 0 30px;border-bottom:1px solid var(--rule)}
.tl{font:500 13px var(--mono);color:var(--ink2)}
.tk h3,.tks.list h3{font:800 23px/1.4 var(--hd);letter-spacing:-.025em;margin:8px 0 10px}
.ql{font:800 18px/1.75 var(--qt)}
.by{display:block;margin-top:12px;font-size:15px;font-weight:700}
.tk:hover h3{text-decoration:underline;text-underline-offset:4px}

/* ---------- 네 가지 방법 (Are.na 목록) ---------- */
.ways{padding:110px 0;background:var(--ink);color:#fff}
.ways .eye{color:#bdbdb8}
.wl{border-top:1px solid rgba(255,255,255,.25)}
.wl a{position:relative;display:grid;grid-template-columns:56px 240px 1fr auto;align-items:baseline;gap:20px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.25);isolation:isolate}
.wl a::before{content:"";position:absolute;inset:0 -12px;z-index:-1;background:var(--marker);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);clip-path:polygon(0 8%,100% 0,100% 92%,0 100%)}
.wl a:hover{color:var(--ink)}.wl a:hover::before{transform:scaleX(1)}
.wl em{font:500 20px var(--mono);font-style:normal}
.wl b{font:800 clamp(24px,2.6vw,36px)/1.2 var(--hd);letter-spacing:-.03em}
.wl span{font-size:18px;opacity:.85}
.wl .go{font:500 14px var(--mono);font-style:normal;white-space:nowrap}

/* ---------- 4단계 (TX-13 스크램블 번호) ---------- */
.steps{padding:0 0 110px}
.st-ph{height:clamp(220px,34vh,380px);overflow:hidden;margin-bottom:70px}
.st-ph img{width:100%;height:100%;object-fit:cover}
.sts{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.sts li{padding:22px 22px 0 0;border-right:1px solid var(--rule);margin-right:22px}
.sts li:last-child{border-right:0}
.sn{font:500 14px var(--mono);background:var(--marker);padding:1px 6px}
.sts b{display:block;font:800 25px/1.3 var(--hd);margin:14px 0 8px}
.sts p{font-size:16px;color:var(--ink2)}

/* ---------- 전문가 (Substack 한 단어 행동) ---------- */
.experts{padding:110px 0;background:var(--grey)}
.exl{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:2px solid var(--ink)}
.exl a{display:grid;grid-template-columns:64px 1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.exl img{grid-row:1/3;width:64px;height:64px;object-fit:cover}
.ep b{font:800 19px var(--hd);margin-right:6px}.ep span{font-size:15px;color:var(--ink2)}
.et{grid-column:2;font-size:14px;color:var(--ink2)}
.ea{grid-row:1/3;grid-column:3;font-weight:800;font-size:15px}.ea .mk{height:8px;margin-top:0}
.exl a:hover .ea .mk{transform:scaleX(1)}

/* ---------- 랭킹 (FX-12) ---------- */
.rank{padding:110px 0}
.rkl{border-top:2px solid var(--ink)}
.rkl a{display:grid;grid-template-columns:60px minmax(0,1fr) 220px 110px;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--rule)}
.rn{font:500 22px var(--mono)}
.rt b{display:block;font-size:19px;font-weight:800;line-height:1.4}.rt span{font-size:14px;color:var(--ink2)}
.rb{height:14px;background:var(--grey)}
.rb i{display:block;height:100%;width:calc(var(--w)*100%);background:var(--marker);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease);clip-path:polygon(0 18%,100% 0,100% 82%,0 100%)}
.in .rb i{transform:scaleX(1)}
.ru{text-align:right;font-size:14px;color:var(--ink2)}.ru b{font:800 22px var(--hd);color:var(--ink);margin-left:4px}

/* ---------- 칼럼 (같은 틀, 다른 사진) ---------- */
.cols{padding:110px 0;background:var(--grey)}
.ccs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cc{display:flex;flex-direction:column;gap:10px;background:var(--sheet);padding:14px 14px 22px}
.cph{display:block;aspect-ratio:4/3;overflow:hidden;background:#222}
.cph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.ct{font:500 12px var(--mono);color:var(--ink2)}
.cc h3{font:800 20px/1.45 var(--hd);letter-spacing:-.02em}
.cc.wide{flex-direction:row;gap:20px;align-items:center}.cc.wide .cph{width:220px;flex:none}

/* ---------- 중간 「와」 입점 고정 장면 (HE-15 + SC-06) ---------- */
.join{background:var(--ink);color:#fff}
.jwrap{position:relative;height:320vh}
.jpin{position:sticky;top:0;height:100svh;overflow:hidden;padding:96px var(--gut) 36px;display:grid;grid-template-rows:auto 1fr;gap:26px;max-width:1500px;margin:0 auto}
.join .eye{color:#cfcfca}
.jh{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.jh .eye{grid-column:1/3}
.jh h2{font-size:clamp(28px,3.2vw,50px);max-width:900px;word-break:keep-all;text-wrap:balance}
.jst{display:flex;flex-direction:column;gap:4px;font-size:15px}
.jst li{opacity:.4;transition:opacity .3s}.jst li.on{opacity:1}
.jst em{font:500 12px var(--mono);font-style:normal;margin-right:8px}
.jst li.on em{background:var(--marker);color:var(--ink);padding:0 4px}
.jstage{display:grid;grid-template-columns:1fr 1fr;gap:26px;min-height:0}
.jl2{display:flex;flex-direction:column;gap:14px;min-height:0}
.paper{background:var(--sheet);color:var(--ink);padding:26px 30px;overflow:hidden}
.jph{flex:1;min-height:90px;overflow:hidden;position:relative}.jph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk{display:block;font:500 12px var(--mono);color:var(--ink2);margin-bottom:12px}
.ms{font:800 clamp(16px,1.35vw,20px)/1.85 var(--qt);margin-bottom:12px;opacity:.55;transition:opacity .4s}
.ms.on{opacity:1}
.ms .hl{background-size:calc(var(--hp,0)*100%) 62%;transition:none}
.results{position:relative;display:flex;flex-direction:column;gap:12px;min-height:0}
.tag.dark{position:static;align-self:flex-start}
.rs{background:#1d1d1d;border:1px solid rgba(255,255,255,.14);padding:14px 16px}
.rk2{display:block;font:500 12px var(--mono);color:#a9a9a4;margin-bottom:6px}
.rs b{display:block;font-size:16px;margin-bottom:6px}
.slot{font:800 14px/1.7 var(--qt);min-height:1.65em;color:#fff}
.slot .hl{background:var(--marker);color:var(--ink);padding:1px 4px}
.src2{display:block;margin-top:6px;font:500 12px var(--mono);color:#a9a9a4}
.alerts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.alerts li{background:var(--sheet);color:var(--ink);padding:10px 12px;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s var(--ease)}
.alerts li.on{opacity:1;transform:none}
.alerts b{display:inline-block;font:500 11px var(--mono);background:var(--marker);padding:0 5px;margin-bottom:2px}
.alerts span{display:block;font-size:14px;font-weight:700}
.jfly{position:absolute;z-index:9;left:0;top:0;max-width:440px;font:800 15px/1.6 var(--qt);background:var(--marker);color:var(--ink);padding:3px 8px;opacity:0;pointer-events:none;transform:translate(var(--fx,0),var(--fy,0)) scale(var(--fs,1));transform-origin:left top}
.jrest{padding:60px 0 120px}
.jp{font-size:19px;max-width:760px;opacity:.85}
.jnum{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:30px;margin:40px 0 12px;border-top:1px solid rgba(255,255,255,.25);padding-top:28px}
.jnum b{font:800 76px/1 var(--hd);letter-spacing:-.04em;color:var(--marker)}
.jnum em{font:500 16px var(--mono);font-style:normal;margin-left:6px;opacity:.7}
.jnum p{font-size:16px;opacity:.8;margin-top:10px}
.dsh{background:var(--sheet);color:var(--ink);padding:18px 20px}
.dk{font:500 12px var(--mono);color:var(--ink2)}
.dsh li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px}
.dsh li b{font:800 18px var(--hd)}
.dsh p{font-size:13px;color:var(--ink2);margin-top:8px}
.basis{font:500 13px var(--mono);opacity:.55}
.jord{display:grid;grid-template-columns:repeat(4,1fr);margin:40px 0;border-top:1px solid rgba(255,255,255,.25)}
.jord li{padding:18px 18px 0 0}
.jord em{font:500 13px var(--mono);font-style:normal;opacity:.6}
.jord b{display:block;font-size:20px;margin-top:4px}
.join .under{margin-top:14px;font-size:14px;opacity:.6}

/* ---------- FAQ (SL-10) ---------- */
.faq{padding:120px 0 90px}
.fqs{border-top:2px solid var(--ink)}
.fq{border-bottom:1px solid var(--rule)}
.fq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;cursor:pointer;list-style:none;font:800 21px/1.45 var(--hd)}
.fq summary::-webkit-details-marker{display:none}
.fq i{font:500 26px var(--mono);font-style:normal;transition:transform .4s var(--ease)}
.fq[open] i{transform:rotate(45deg)}
.fq[open] .hl{background-size:100% 62%}
.fq p{padding:0 0 26px;font:700 18px/1.8 var(--qt);max-width:820px}

/* ---------- 푸터 ---------- */
.ft{padding:90px 0 40px;border-top:2px solid var(--ink)}
.ft-mark{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.ft-mark b{position:relative;z-index:1;display:block;font:900 clamp(56px,13vw,210px)/.95 var(--hd);letter-spacing:-.06em}
.ft-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:6%;height:42%;background:var(--marker);clip-path:polygon(0 22%,100% 0,100% 78%,0 100%);transform-origin:left;transform:scaleX(var(--fb,0))}
.ft-in{max-width:var(--max);margin:30px auto 0;padding:0 var(--gut)}
.ft-in>p{color:var(--ink2);margin-bottom:22px}
.ft-in ul{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;font-weight:600}
.ft-bot{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);font:500 13px var(--mono);color:var(--ink2)}

/* ---------- 고민 상세·프로필 ---------- */
.sub main{padding-top:66px}
.crumb{font:500 13px var(--mono);color:var(--ink2);margin-bottom:24px}.crumb b{color:var(--ink)}
.q-top{padding-top:44px;padding-bottom:36px}
.q-top h1{font:900 clamp(30px,4.4vw,64px)/1.14 var(--hd);letter-spacing:-.04em;max-width:1100px}
.asker{margin-top:16px;font:500 14px var(--mono);color:var(--ink2)}
.q-band{height:clamp(160px,24vh,260px);overflow:hidden;margin-bottom:56px}
.q-band img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.q-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;padding-bottom:40px}
.q-main section{margin-bottom:60px}
.q-main h2{font-size:clamp(24px,2.2vw,32px);margin-bottom:20px}
.sit table{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);margin-bottom:20px;font-size:15px}
.sit th{width:130px;text-align:left;font:500 14px var(--mono);color:var(--ink2);padding:12px 0;border-bottom:1px solid var(--rule)}
.sit td{padding:12px 0;border-bottom:1px solid var(--rule);font-weight:600}
.sit p{font-size:17px;margin-top:8px}
.an{border-top:2px solid var(--ink);padding:24px 0 36px}
.acc{font-weight:800;font-size:15px;margin-bottom:14px}
.an header{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.an header img{width:60px;height:60px;object-fit:cover}
.an header b{font:800 19px var(--hd)}
.an header span{display:block;font-size:14px;color:var(--ink2)}
.vf{font:500 12px var(--mono)!important;color:var(--ink)!important}
.lead{font:800 19px/1.85 var(--qt)}
.body{font-size:16px;line-height:1.85;margin-top:18px}
.body h3{font:800 18px/1.4 var(--hd);margin:24px 0 8px}
.body h3::before{content:"— ";font-family:var(--mono)}
.body ul,.body ol{padding-left:20px;margin:8px 0}.body ul{list-style:square}.body ol{list-style:decimal}
.body li{margin:4px 0}
.body table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
.body th,.body td{border-bottom:1px solid var(--rule);padding:9px 8px;text-align:left;vertical-align:top}
.body th{font-family:var(--mono);font-weight:500;border-bottom:2px solid var(--ink)}
.src{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);font-size:15px}
.src ul{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.src a{font-weight:700;text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:4px;text-underline-offset:2px}
.src span{font:500 12px var(--mono);color:var(--ink2);margin-left:4px}
.same{font-size:14px;color:var(--ink2);margin-top:12px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.help{min-height:44px;padding:0 14px;border:1.5px solid var(--rule);font-size:15px;font-weight:700}.help b{font-family:var(--mono)}
.rel ul{border-top:2px solid var(--ink)}
.rel li a{display:block;padding:18px 0;border-bottom:1px solid var(--rule)}
.rel em{font:500 12px var(--mono);font-style:normal;color:var(--ink2)}
.rel b{display:block;font-size:18px;margin:4px 0}
.rel .ql{font-size:16px;color:var(--ink2)}
.q-side{position:sticky;top:96px}
.side-in{border:2px solid var(--ink);padding:24px;background:#fff}
.side-in h2{font-size:21px;margin-bottom:12px}
.sex li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.sex img{width:48px;height:48px;object-fit:cover}
.sex b{display:block;font-size:16px}.sex em{font-style:normal;font-size:14px;color:var(--ink2)}
.ask{margin-top:22px;display:grid;gap:12px}
.ask h3{font:800 20px/1.35 var(--hd)}
.ask>p{font-size:15px;color:var(--ink2)}
.ask label{display:grid;gap:6px;font-size:15px;font-weight:700}
.ask input{font:inherit;font-size:16px;font-weight:500;height:48px;padding:0 4px;border:0;border-bottom:2px solid var(--ink);background:linear-gradient(var(--marker),var(--marker)) left bottom/0% 40% no-repeat;transition:background-size .4s var(--ease)}
.ask input:focus{outline:0;background-size:100% 40%}
.ask .ck{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px}.ask .ck input{width:18px;height:18px;border:0;background:none}
.ask .ck a{text-decoration:underline}
.ask .btn{justify-content:center;min-height:54px;background:var(--ink);color:#fff;font-size:16px;font-weight:700}
.ask .btn:hover{background:var(--marker);color:var(--ink)}
.form-msg{font-size:14px;min-height:1em}.form-msg[data-state="off"]{background:var(--marker);padding:4px 8px;font-weight:700}
.p-band{height:clamp(180px,28vh,320px);overflow:hidden}
.p-band img{width:100%;height:100%;object-fit:cover}
.p-top{padding-top:26px;padding-bottom:30px}
.p-head{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start;margin-top:-110px}
.p-badge{width:200px;height:200px;object-fit:cover;border:8px solid var(--sheet);background:var(--sheet)}
.p-id{padding-top:120px}
.p-id h1{font:900 clamp(32px,4vw,58px)/1.15 var(--hd);letter-spacing:-.04em}
.off{font:500 14px var(--mono);color:var(--ink2);margin:8px 0 12px}
.bio{font-size:18px;max-width:680px;margin-bottom:16px}
.p-stats{display:grid;grid-template-columns:auto repeat(3,minmax(0,200px));gap:30px;align-items:end;margin-top:40px;padding-top:22px;border-top:2px solid var(--ink)}
.psh{font:500 13px var(--mono);color:var(--ink2);align-self:start}
.p-stats b{display:block;font:800 56px/1 var(--hd);letter-spacing:-.04em}
.p-stats .mk{height:9px;width:80%}
.p-stats span{font-size:15px;color:var(--ink2)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills li{padding:7px 12px;border:1.5px solid var(--ink);font-size:16px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips button{min-height:40px;padding:0 12px;border:1.5px solid var(--rule);font-size:15px;font-weight:700}
.chips button[aria-pressed="true"]{background:var(--marker);border-color:var(--ink)}
.tks.list{display:block}
.tks.list li a{display:block;padding:22px 0;border-bottom:1px solid var(--rule)}
.empty{padding:40px 0;text-align:center;border-bottom:1px solid var(--rule)}
.eline{display:block;width:160px;height:14px;margin:0 auto 18px;background:linear-gradient(100deg,var(--marker) 30%,var(--grey) 30%);clip-path:polygon(1% 18%,99% 0,100% 82%,0 100%)}
.empty p{font-size:17px;font-weight:700;margin-bottom:16px}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){.nav{display:none}.burger{display:grid}.ccs{grid-template-columns:1fr 1fr}}
@media (max-width:1024px){
  .srch span{display:none}.srch{flex:0 0 44px;padding:0;justify-content:center}.login{margin-left:auto}
  .scene{grid-template-columns:1fr 1fr;height:auto;padding-top:46px}.sc{min-height:150px}
  .h-row{flex-direction:column;align-items:flex-start}.h-cta{justify-content:flex-start}.h-cta .under{text-align:left}
  .sec-h{grid-template-columns:1fr}.sec-h>p{margin-top:12px}.sec-h .eye,.jh .eye{grid-column:auto}
  .tks,.exl{grid-template-columns:1fr}
  .jstage{grid-template-columns:1fr}.jh{grid-template-columns:1fr}.jst{flex-direction:row;flex-wrap:wrap;gap:4px 14px}
  .jnum{grid-template-columns:1fr 1fr}.dsh{grid-column:1/3}
  .q-grid{grid-template-columns:1fr}.q-side{position:static}
  .wl a{grid-template-columns:40px 1fr;row-gap:4px}.wl span,.wl .go{grid-column:2}
}
@media (max-width:760px){
  .hd{height:58px;gap:10px}.logo{font-size:19px}.login{display:none}.hd .btn.sm{min-height:40px;padding:0 12px;font-size:14px}.hd .btn .ar{display:none}.srch{margin-left:auto}
  .hero,.sub main{padding-top:58px}
  .hero h1{font-size:40px}.h-row .sub{font-size:16px}
  .h-cta .btn{flex:1 1 100%;justify-content:center}
  .scene{grid-template-columns:1fr;gap:10px;padding:44px 20px 20px}.sc{min-height:0;padding:14px}
  .sc.s3,.sc.s4{display:none}
  .pf{grid-template-columns:1fr 1fr}.pf li{border-right:0;margin-right:0;padding-right:12px;padding-bottom:16px}
  .pn{flex-basis:78vw}.pn.first{flex-basis:84vw;padding-right:24px}
  .tk h3{font-size:20px}.ql{font-size:17px}
  .sts{grid-template-columns:1fr 1fr;row-gap:24px}.sts li:nth-child(2){border-right:0}
  .rkl a{grid-template-columns:36px 1fr auto;gap:12px}.rb{grid-column:2/4;grid-row:2}.rt b{font-size:17px}
  .ccs{grid-template-columns:1fr}
  .jwrap{height:300vh}.jpin{padding:76px 20px 20px;gap:14px}.jh h2{font-size:24px}.jst{font-size:13px}
  .paper{padding:16px}.ms{font-size:15px;margin-bottom:6px}
  .results{gap:8px}.rs{padding:10px 12px}.slot{font-size:14px}.alerts span{font-size:13px}
  .jnum{grid-template-columns:1fr}.dsh{grid-column:auto}.jnum b{font-size:56px}
  .jord{grid-template-columns:1fr 1fr;row-gap:12px}
  .fq summary{font-size:18px}.fq p{font-size:16px}
  .ft-bot{flex-direction:column}
  .q-band{margin-bottom:36px}.lead{font-size:17px}
  .cc.wide{flex-direction:column;align-items:stretch}.cc.wide .cph{width:100%}
  .p-head{grid-template-columns:1fr;margin-top:-80px;gap:16px}.p-badge{width:140px;height:140px}.p-id{padding-top:0}
  .p-stats{grid-template-columns:repeat(3,1fr);gap:14px}.psh{grid-column:1/4}.p-stats b{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-d],.tx{opacity:1!important;transform:none!important;filter:none!important}
  .hl{background-size:100% 62%!important}.mk{transform:none!important}
}
/* 모바일 버튼 글자 16px(v3 지적 반영, 2026-10-22 검수) */
@media (max-width:760px){.btn,.btn.sm,.hd .btn.sm,.help,.chips button,.replay{font-size:16px}.chips button{min-height:44px}.replay{min-height:36px}}
/* 정책 화면(시안용 샘플 초안) */
.polp .q-top{padding-top:130px;padding-bottom:20px}.polp h1{font:800 clamp(30px,4vw,52px)/1.2 var(--hd);letter-spacing:-.03em;margin-top:14px}
.pol-in{padding-bottom:120px;max-width:980px}.pol-note{font-size:16px;color:var(--ink);background:var(--grey);padding:12px 16px;margin:10px 0 40px;border-left:6px solid var(--marker)}
.pol{margin-bottom:56px}.pol h2{font-size:28px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--ink)}.pol ol{list-style:none;padding:0}.pol li{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}.pol h3{font-size:17px}.pol p{font-size:16px;line-height:1.75}
@media (max-width:760px){.polp .q-top{padding-top:96px}.pol li{grid-template-columns:1fr;gap:6px}}