/* 아라봄 사이트 v3 · TCI 해석 가이드(체험형) — 원본 docs/design-qa-261001/guide/src · 빌더 build_guide.py · 손편집 금지
   홈·상세 시스템(site3.css + pdp3.css) 위에 얹는다. 새 색 0 · 강조는 노랑 하나(나·현재 값) · 장식 대신 실제 리포트와 계측 눈금
   글은 처음부터 보이고, 움직이는 것은 실제 리포트 화면·눈금·점처럼 독자가 만든 값뿐(감소 모션이면 정지) */

/* ---------- 공통 ---------- */
.nav a[aria-current=page]{color:#fff}
.hdr.light .nav a[aria-current=page]{color:var(--ink);font-weight:700}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:#fff;color:#111;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:700}
.skip:focus{left:12px}
#interpretation,#arabom,#voices,#dimensions,#what,#vs-mbti,#reliability,#howto,#faq,#reader{scroll-margin-top:84px}
.g-lede{margin-top:18px;font-size:18px;line-height:1.75;color:var(--ink-2);max-width:680px}
.g-lede b{color:var(--ink);font-weight:700}

/* ---------- 첫 화면 ---------- */
.g-hero h1{font-size:clamp(40px,4.6vw,64px);line-height:1.1;letter-spacing:-.05em;max-width:640px}
.g-hero h1 small{display:block;margin-top:18px;font-size:16.5px;line-height:1.6;font-weight:500;letter-spacing:-.012em;color:var(--on-night-3);max-width:520px}
.g-hero .lede{margin-top:22px;font-size:19px;color:#fff;font-weight:600;letter-spacing:-.02em;max-width:520px}
.g-hero .lede span{display:block;margin-top:6px;font-size:17px;font-weight:400;color:var(--on-night-2)}
.g-hero .p-cta{margin-top:30px}
.g-hero .stage .cap{max-width:var(--pw)}
@media(max-width:560px){.g-hero .lede{font-size:17.5px}.g-hero .lede span{font-size:16px}}

/* ---------- 체험: 내 숫자로 읽기 ---------- */
.g-lab{padding-bottom:120px}
.lab{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:72px;align-items:start;margin-top:var(--gap-head)}
.lab-in{position:sticky;top:92px}
.dev{background:#fff;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line),0 2px 3px rgba(0,0,0,.04),0 30px 60px -36px rgba(0,0,0,.28);padding:22px 22px 18px}
.dev-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dev-t{font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.35}
.dev-m{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:13px;font-weight:600;color:var(--ink-3)}
.dev-tools{display:flex;gap:4px;flex:none}
.dev-tools button{height:32px;padding:0 12px;border-radius:99px;font-size:13px;font-weight:700;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow var(--t-fast) var(--e-std),color var(--t-fast)}
.dev-tools button:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.dev-tools button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.mtr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 14px repeat(3,minmax(0,1fr));margin-top:16px}
.mtr-g{grid-row:1;font-size:12px;font-weight:700;color:var(--ink-3);padding:0 0 10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mtr-g.g1{grid-column:1 / span 4}
.mtr-g.g2{grid-column:6 / span 3}
.mtr-sep{grid-row:2;grid-column:5;justify-self:center;width:1px;background:var(--line)}
.mc{grid-row:2;display:flex;flex-direction:column;align-items:center;min-width:0;cursor:pointer;position:relative;padding:0 2px}
.mc input{width:100%;max-width:58px;height:40px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:24px;font-weight:800;letter-spacing:-.04em;text-align:center;color:var(--ink);transition:background var(--t-fast) var(--e-std),box-shadow var(--t-fast);-moz-appearance:textfield;appearance:textfield}
.mc input::placeholder{color:var(--ink-dim);font-weight:800}
.mc.smp input::placeholder{color:var(--ink-3)}
.mc input:hover{background:var(--bg-2)}
.mc input:focus{outline:none;background:var(--bg-2);box-shadow:inset 0 0 0 1.5px var(--ink)}
.mc .bd{height:16px;margin-top:2px;font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.tr{position:relative;width:100%;height:188px;margin-top:8px;touch-action:none;outline:none}
.tr::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line-2);border-radius:2px}
.tr s{position:absolute;left:50%;width:12px;height:2px;margin-left:-6px;background:var(--line-2)}
.tr s.t30{bottom:30%}
.tr s.t70{bottom:70%}
.tr .mf{position:absolute;left:50%;bottom:0;width:4px;margin-left:-2px;height:calc(var(--v,0) * 1%);background:var(--ink);border-radius:2px;transition:height var(--t-base) var(--e-out)}
.tr .kn{position:absolute;left:50%;bottom:calc(var(--v,0) * 1%);width:20px;height:20px;margin:0 0 -10px -10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ink),0 2px 6px rgba(0,0,0,.18);transition:bottom var(--t-base) var(--e-out),background var(--t-fast),transform var(--t-fast) var(--e-std)}
.mc.drag .tr .mf,.mc.drag .tr .kn{transition:none}
.mc:not(.has) .tr .mf,.mc:not(.has) .tr .kn{opacity:0}
.mc.smp .tr .mf{background:var(--ink-dim)}
.mc.smp .tr .kn{box-shadow:0 0 0 2px var(--ink-dim),0 2px 6px rgba(0,0,0,.12)}
.mc.sel .tr .kn{background:var(--yellow);transform:scale(1.12)}
.mc.sel.smp .tr .kn{box-shadow:0 0 0 2px var(--ink),0 2px 6px rgba(0,0,0,.18)}
.tr:focus-visible .kn{outline:2px solid var(--ink);outline-offset:3px}
.mc .cd{margin-top:14px;font-size:11.5px;font-weight:800;color:var(--ink-3);letter-spacing:.02em}
.mc .nm{margin-top:2px;font-size:13px;line-height:1.3;font-weight:700;letter-spacing:-.04em;text-align:center;color:var(--ink-2);min-height:34px}
.mc.sel .nm{color:var(--ink)}
.mc::after{content:"";position:absolute;left:8px;right:8px;bottom:-10px;height:2.5px;border-radius:2px;background:var(--ink);transform:scaleX(0);transition:transform var(--t-base) var(--e-out)}
.mc.sel::after{transform:scaleX(1)}
.dev-f{margin-top:22px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.dev-help{margin-top:16px}
.dev-help summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);padding:6px 0;border-bottom:1.5px solid var(--ink)}
.dev-help summary::-webkit-details-marker{display:none}
.dev-help[open] summary{border-bottom-color:transparent}
.dev-help .led{margin-top:10px}
@media(max-width:1099px){.lab{grid-template-columns:minmax(0,1fr);gap:72px}.lab-in{position:static;max-width:560px}}
@media(max-width:560px){
  .dev{padding:18px 12px 14px;border-radius:var(--r-md)}
  .dev-h{flex-direction:column}
  .mtr{grid-template-columns:repeat(4,minmax(0,1fr)) 8px repeat(3,minmax(0,1fr))}
  .mc{padding:0}
  .mc input{font-size:20px;height:36px;border-radius:8px}
  .tr{height:150px}
  .mc .nm{font-size:11.5px;letter-spacing:-.06em;min-height:30px}
  .mc .cd{font-size:10.5px;margin-top:12px}
  .mc .bd{font-size:10.5px}
}

/* 장부(머리카락 선 목록) */
.led{border-top:1.5px solid var(--ink)}
.led>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.led dt{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.6}
.led dd{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.led dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(17,17,17,.35)}

/* 장면 */
.lab-out{min-width:0}
.sc+.sc{margin-top:104px}
.sc-k{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-3)}
.sc-t{margin-top:10px;font-size:clamp(26px,2.6vw,34px);line-height:1.28;letter-spacing:-.04em;font-weight:800}
.sc-p{margin-top:14px;font-size:16.5px;line-height:1.78;color:var(--ink-2);max-width:620px}
.sc-now{display:flex;align-items:flex-end;gap:16px;margin-top:30px}
.sc-now b{font-size:clamp(64px,7vw,92px);line-height:.84;font-weight:800;letter-spacing:-.06em}
.sc-now span{padding-bottom:6px;font-size:15px;line-height:1.45;font-weight:700;color:var(--ink-3)}
.sc-now span em{display:block;font-style:normal;font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.025em}
.sc-big{margin-top:18px;font-size:20px;line-height:1.6;font-weight:700;letter-spacing:-.025em;color:var(--ink);max-width:600px}
.ppl{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:7px 5px;margin-top:28px;max-width:560px}
.ppl i{position:relative;display:block;aspect-ratio:1/2;transition:opacity var(--t-base)}
.ppl i::before{content:"";position:absolute;left:22%;right:22%;top:0;aspect-ratio:1;border-radius:50%;background:var(--line-2);transition:background var(--t-base)}
.ppl i::after{content:"";position:absolute;left:4%;right:4%;top:44%;bottom:0;border-radius:40% 40% 18% 18%;background:var(--line-2);transition:background var(--t-base)}
.ppl i.b::before,.ppl i.b::after{background:var(--ink)}
.ppl i.me::before,.ppl i.me::after{background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink)}
.ppl-k{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:13px;font-weight:600;color:var(--ink-3)}
.ppl-k span{display:inline-flex;align-items:center;gap:7px}
.ppl-k i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.ppl-k i.o{background:var(--line-2)}
.ppl-k i.y{background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink)}
.sc-exl{margin-top:44px;font-size:14px;font-weight:700;color:var(--ink-3)}
.sc-exl:empty{display:none}

/* 실제 리포트 발췌 */
.g-ex{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 30px;margin-top:14px;padding:28px 0 24px;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.g-ex[hidden]{display:none}
.g-ex .rd b{display:block;font-size:80px;line-height:.86;font-weight:800;letter-spacing:-.06em;color:var(--ink)}
.g-ex .rd span{display:block;margin-top:14px;font-size:12.5px;line-height:1.45;font-weight:700;color:var(--ink-3)}
.g-ex blockquote{font-size:19px;line-height:1.78;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
.g-ex figcaption{grid-column:2;margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:13px;font-weight:500;color:var(--ink-3)}
.g-ex figcaption span{display:inline-flex;align-items:center;gap:6px}
.g-ex figcaption a{color:var(--ink);font-weight:700}
@media(max-width:560px){
  .g-ex{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 0 20px}
  .g-ex .rd{display:flex;align-items:flex-end;gap:14px}
  .g-ex .rd b{font-size:60px}
  .g-ex .rd span{margin:0 0 4px}
  .g-ex blockquote{font-size:17.5px}
  .g-ex figcaption{grid-column:1;margin-top:0}
}

/* 방향 */
.bd-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:28px}
.bd-h b{font-size:24px;font-weight:800;letter-spacing:-.035em}
.bd-h span{font-size:15px;font-weight:700;color:var(--ink-3)}
.bd-df{margin-top:8px;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.bd-l{margin-top:20px;border-top:1.5px solid var(--ink)}
.bd-l>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);position:relative}
.bd-l dt{font-size:14.5px;font-weight:800;color:var(--ink-3);line-height:1.45;transition:color var(--t-base)}
.bd-l dt small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--ink-3)}
.bd-l dd{font-size:15.5px;line-height:1.72;color:var(--ink-3);transition:color var(--t-base)}
.bd-l>div.on dt,.bd-l>div.on dd{color:var(--ink)}
.bd-l>div.on dt::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--yellow);border-radius:0 100% 0 100%;transform:rotate(45deg) translateY(-2px);box-shadow:0 0 0 1px rgba(17,17,17,.25)}
.dx-l>div dt,.dx-l>div dd{color:var(--ink)}
.dx-l>div dd{color:var(--ink-2)}
.dx-l>div dt::before{display:none!important}

/* 조합 평면 */
.pl-w{position:relative;margin-top:34px;max-width:440px;padding:0 0 30px 0}
.pl{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1/1;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.pl-q{display:flex;padding:14px;border-right:1px solid var(--line);border-top:1px solid var(--line);transition:background var(--t-base) var(--e-std)}
.pl-q.q-tl,.pl-q.q-tr{align-items:flex-start}
.pl-q.q-bl,.pl-q.q-br{align-items:flex-end}
.pl-q.q-tr,.pl-q.q-br{justify-content:flex-end;text-align:right}
.pl-q[data-v=top]{align-items:flex-start}.pl-q[data-v=bottom]{align-items:flex-end}.pl-q[data-h=left]{justify-content:flex-start;text-align:left}.pl-q[data-h=right]{justify-content:flex-end;text-align:right}
.pl-q b{max-width:8.5em;font-size:14.5px;line-height:1.35;font-weight:800;letter-spacing:-.03em;color:var(--ink-3);transition:color var(--t-base)}
.pl-q.on{background:var(--bg-2)}
.pl-q.on b{color:var(--ink)}
.pl-dot{position:absolute;left:calc(var(--x,50) * 1%);top:calc(100% - var(--y,50) * 1%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 2px var(--ink),0 3px 8px rgba(0,0,0,.2);transition:left var(--t-slow) var(--e-out),top var(--t-slow) var(--e-out),opacity var(--t-fast)}
.pl.smp .pl-dot{background:#fff}
.pl.none .pl-dot{opacity:0}
.pl-x,.pl-y{position:absolute;font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.pl-x{right:0;bottom:0}
.pl-y{left:0;top:-26px}
.pl-txt{margin-top:28px;max-width:600px}
.pl-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.pl-h b{font-size:24px;font-weight:800;letter-spacing:-.035em}
.pl-h span{font-size:14.5px;font-weight:700;color:var(--ink-3)}
.pl-d{margin-top:8px;font-size:16.5px;line-height:1.75;color:var(--ink-2)}
.pl-n{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--ink-3)}
.pl-n:empty{display:none}
.ext{margin-top:28px;max-width:600px}
.ext>div{grid-template-columns:128px minmax(0,1fr)}
.ext dd b{color:var(--ink);font-weight:800}
.qlist{list-style:none;margin-top:28px;max-width:640px;border-top:1px solid var(--line)}
.qlist li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.qlist li b{grid-row:1 / span 2;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.qlist li span{font-size:12.5px;font-weight:700;color:var(--ink-3)}
html.js .qlist{display:none}
@media(max-width:560px){.qlist li{grid-template-columns:minmax(0,1fr)}.qlist li b{grid-row:auto}.pl-q b{font-size:13px}.pl-q{padding:10px}}

/* 체험 끝 → 리포트 */
.lab-end{margin-top:104px;padding-top:28px;border-top:1.5px solid var(--ink)}
.lab-end p.q{font-size:clamp(22px,2.2vw,28px);line-height:1.45;font-weight:800;letter-spacing:-.035em;color:var(--ink);max-width:640px}
.lab-end p.q em{font-style:normal;box-shadow:inset 0 -.38em 0 var(--yellow)}
.lab-end .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.g-src{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--ink-3);font-weight:500}

/* ---------- 리포트와의 차이 ---------- */
.g-gap .lede{max-width:660px}
.gap-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;margin-top:88px;align-items:start}
.gq{margin:0;padding-top:24px;border-top:1.5px solid var(--ink)}
.gq blockquote{font-size:clamp(20px,2vw,24px);line-height:1.6;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.gq figcaption{margin-top:14px;font-size:13.5px;font-weight:500;color:var(--ink-3)}
.gq .st{font-size:12px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:12px}
.g-gap .pbox .more{margin-top:16px;font-size:14px;line-height:1.8;color:var(--ink-3)}
.g-gap .pbox .more a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(17,17,17,.35)}
@media(max-width:900px){.gap-grid{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:64px}}

/* ---------- 문장이 되는 숫자 + 후기 ---------- */
.vo-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:72px;align-items:center;margin-top:var(--gap-head)}
.vo-phone{justify-self:center;--pw:272px}
.g-voice .rv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:112px}
.g-voice .rv-top .sum{margin-top:12px;font-size:15px;color:var(--ink-2)}
.g-voice .rv-top .sum b{color:var(--ink);font-size:17px}
.g-who{display:flex;gap:10px;align-items:baseline;margin-top:44px;font-size:16px;line-height:1.7;font-weight:600;color:var(--ink)}
.g-who .lens{transform:rotate(45deg) translateY(-2px)}
@media(max-width:900px){.vo-grid{grid-template-columns:minmax(0,1fr);gap:40px}.vo-phone{display:none}.g-voice .rv-top{margin-top:84px}}

/* ---------- 7차원 탐색 ---------- */
.dx{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;margin-top:var(--gap-head);align-items:start}
html:not(.js) .dx{display:block}
html:not(.js) .dx-nav{display:none}
html.js .dx-p:not(.on){display:none}
html:not(.js) .dx-p+.dx-p{margin-top:56px}
.dx-nav{position:sticky;top:92px;border-top:1.5px solid var(--ink)}
.dx-g{padding:18px 0 6px;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.dx-nav button{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;padding:12px 4px 12px 14px;text-align:left;border-bottom:1px solid var(--line-2);transition:background var(--t-fast)}
.dx-nav button::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--ink);transform:scaleY(0);transition:transform var(--t-base) var(--e-out)}
.dx-nav button[aria-selected=true]::before{transform:scaleY(1)}
.dx-nav button:hover{background:rgba(17,17,17,.03)}
.dx-nav button b{font-size:16.5px;font-weight:800;letter-spacing:-.025em;color:var(--ink-3);transition:color var(--t-fast)}
.dx-nav button[aria-selected=true] b{color:var(--ink)}
.dx-nav button span{grid-column:1;font-size:12px;font-weight:700;color:var(--ink-3)}
.dx-nav .dx-v{grid-column:2;grid-row:1 / span 2;font-style:normal;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.dx-p{border-top:1.5px solid var(--ink);padding-top:26px}
.dx-p h3{font-size:clamp(30px,3.2vw,42px);line-height:1.2;font-weight:800;letter-spacing:-.045em}
.dx-p h3 span{display:block;margin-top:8px;font-size:14px;font-weight:700;letter-spacing:-.005em;color:var(--ink-3)}
.dx-mine{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink)}
.dx-mine:empty{display:none}
.dx-df{margin-top:16px;font-size:19px;line-height:1.7;font-weight:600;letter-spacing:-.02em;color:var(--ink);max-width:640px}
.dx-sh{margin-top:30px;font-size:13px;font-weight:700;color:var(--ink-3)}
.dx-subs{list-style:none;margin-top:10px;border-top:1px solid var(--line-2);max-width:640px}
.dx-subs li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:15px;line-height:1.6;color:var(--ink-2)}
.dx-subs code{font-family:inherit;font-size:12.5px;font-weight:800;color:var(--ink-3);padding-top:2px}
.dx-subs i{font-style:normal;color:var(--ink-dim);margin:0 6px}
.dx-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 56px;margin-top:72px}
.dx-notes p{padding-top:16px;border-top:1px solid var(--line-2);font-size:15px;line-height:1.78;color:var(--ink-2)}
.dx-notes b{color:var(--ink)}
@media(max-width:900px){
  .dx{grid-template-columns:minmax(0,1fr);gap:28px}
  .dx-nav{position:static;display:flex;overflow-x:auto;scrollbar-width:none;border-top:0;border-bottom:1px solid var(--line-2);margin:0 -20px;padding:0 20px;scroll-padding-inline:20px}
  .dx-nav::-webkit-scrollbar{display:none}
  .dx-g{display:none}
  .dx-nav button{flex:none;width:auto;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:12px 14px 14px;border-bottom:0}
  .dx-nav button::before{left:14px;right:14px;top:auto;bottom:0;width:auto;height:2.5px;transform:scaleX(0)}
  .dx-nav button[aria-selected=true]::before{transform:scaleX(1)}
  .dx-nav .dx-v{font-size:14px;margin-top:2px}
  .dx-nav .dx-v:empty{display:none}
  .dx-notes{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:56px}
}

/* ---------- 기본 정보 (질문 왼쪽 · 답 오른쪽) ---------- */
.ib{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;padding:80px 0;border-bottom:1px solid var(--line)}
.ib:first-child{padding-top:0}
.ib:last-child{padding-bottom:0;border-bottom:0}
.ib-q h2{position:sticky;top:96px;font-size:clamp(26px,2.8vw,36px);line-height:1.3;letter-spacing:-.04em;font-weight:800}
.ib-a .ans{font-size:18.5px;line-height:1.78;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.ib-a p.gp{margin-top:16px;font-size:16.5px;line-height:1.8;color:var(--ink-2)}
.ib-a .led{margin-top:26px}
.ib-a .led>div{grid-template-columns:132px minmax(0,1fr)}
.ib-a .flow>div{grid-template-columns:116px minmax(0,1fr) 150px}
.flow dd.w{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-align:right}
.flow dd.w small{display:block;font-size:12px;font-weight:600;color:var(--ink-3)}
.g-aside{margin-top:28px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.g-aside a,.ib-a a.u{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(17,17,17,.35)}
.mq{margin:28px 0 0;padding:22px 0 20px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.mq blockquote{font-size:17px;line-height:1.7;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.mq figcaption{margin-top:10px;font-size:13px;font-weight:500;color:var(--ink-3)}
.tb{width:100%;margin-top:26px;border-collapse:collapse;border-top:1.5px solid var(--ink);table-layout:fixed}
.tb th,.tb td{padding:14px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6}
.tb thead th{font-size:14.5px;font-weight:800;color:var(--ink)}
.tb thead th:first-child{width:26%}
.tb tbody th{font-size:13.5px;font-weight:700;color:var(--ink-3)}
.tb td{color:var(--ink-2)}
.tb tr>:first-child{padding-left:0}
@media(max-width:900px){.ib{grid-template-columns:minmax(0,1fr);gap:22px;padding:64px 0}.ib-q h2{position:static}}
@media(max-width:560px){
  .ib-a .led>div{grid-template-columns:minmax(0,1fr)}
  .ib-a .flow>div{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
  .flow dd.d{grid-column:1 / -1;grid-row:2}
  .flow dt{grid-column:1;grid-row:1}
  .flow dd.w{grid-column:2;grid-row:1}
  .tb th,.tb td{padding:12px 8px;font-size:14px}
  .tb tbody th{font-size:12.5px}
}

/* ---------- 마무리 구역 ---------- */
.faqs .h2{margin-bottom:0}
.g-rel .xc em{white-space:nowrap}
.fin .p-fin-price{margin-top:16px}
@media(prefers-reduced-motion:reduce){.tr .mf,.tr .kn,.pl-dot,.ppl i::before,.ppl i::after{transition:none}}
/* 배경 리듬·보정 */
.g-dimsec{background:var(--bg-2)}
.g-hero .btn .arr.dn{transition:transform var(--t-base) var(--e-out)}
.g-hero .btn:hover .arr.dn{transform:translateY(3px)}
.dev-go{display:none;margin-top:14px;font-size:14px;font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:2px}
@media(max-width:1099px){.dev-go{display:inline-block}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* 첫 화면 3D 렌더(블렌더) */
.g-stage{display:flex;flex-direction:column;align-items:center;justify-self:center;width:100%}
.g-stage img{width:100%;max-width:560px;height:auto}
.g-stage .cap{margin-top:4px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--on-night-3);text-align:center}
@media(max-width:900px){.g-stage img{max-width:520px}}
.dev-help .dev-hp{margin-top:12px;font-size:14px;line-height:1.7;color:var(--ink-2)}
/* 글꼴이 바뀌어도 줄바꿈이 같도록(누적 레이아웃 이동 방지): 좁은 화면에선 평점 줄과 '후기 읽기'를 늘 두 줄로 */
@media(max-width:560px){.g-hero .p-proof span{flex-basis:100%}}