/* components.css — 디자인 목업(v14)에서 그대로 옮긴 컴포넌트 스타일.
   목업 문서용 클래스(.doc .memo .screen .shot .cap 등)도 섞여 있지만 화면에는 영향 없음. */
*{box-sizing:border-box}
html{scroll-snap-type:y proximity}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
p{margin:0}
/* ── 문서 부분 ── */
.doc{max-width:1280px;margin:0 auto;padding:48px 16px 24px}
.eyebrow{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1.title{font-size:var(--fs-display);font-weight:900;letter-spacing:-.02em;margin:6px 0 8px;line-height:1.25}
.sub{color:var(--muted);font-size:var(--fs-sm);max-width:72ch}
.memo{margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:24px}
.memo h3{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;color:var(--key);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.memo h3:not(:first-child){margin-top:28px}
.memo ul{margin:0;padding-left:18px;font-size:var(--fs-sm);line-height:1.75}
.keyhero{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:stretch}
.keychip{border-radius:14px;background:var(--key);color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px}
.keychip b{font-size:var(--fs-h1);font-weight:900;line-height:1.2}
.keychip span{font-family:var(--mono);font-size:var(--fs-cap);opacity:.85}
.keyinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;align-content:center}
.kv{border-bottom:1px solid var(--line2);padding:6px 0}
.kv .k{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.kv .v{font-family:var(--mono);font-size:var(--fs-body);font-weight:700}
.scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;margin-top:16px}
.scale div{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.scale i{display:block;height:48px}
.scale .t{padding:6px 7px;background:var(--panel)}
.scale .t b{display:block;font-family:var(--mono);font-size:var(--fs-label)}
.scale .t span{display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.scale .t em{display:block;font-style:normal;font-size:var(--fs-label);color:var(--key);margin-top:2px;line-height:1.35}
.scale div.is-key{border:2px solid var(--key)}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.sw{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-cap);border:1px solid var(--line);border-radius:8px;padding:5px 9px;background:var(--soft)}
.sw i{width:14px;height:14px;border-radius:4px;display:block;border:1px solid rgba(0,0,0,.08)}
.tscale{width:100%;border-collapse:collapse}
.tscale td{padding:9px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tscale td.tk{font-family:var(--mono);font-size:var(--fs-label);color:var(--key);white-space:nowrap;width:1%}
.tscale td.px{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);white-space:nowrap;width:1%}
.tscale td.use{font-size:var(--fs-cap);color:var(--muted)}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px}
.flow a{font-size:var(--fs-cap);padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;white-space:nowrap}
.flow a.sess{background:var(--key-50);border-color:var(--key-200);color:var(--key-700)}
/* ── 화면 1장 = 1280×800 고정 보드, 창 크기에 맞춰 통째로 축소 ── */
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;scroll-snap-align:center}
.shot{width:1280px;flex:none}
.cap{display:flex;gap:10px;align-items:center;height:40px;margin-bottom:10px;overflow:hidden}
.cap .num{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:#fff;background:var(--key);border-radius:7px;padding:2px 9px;flex:none}
.cap h2{font-size:var(--fs-h2);font-weight:700;margin:0;white-space:nowrap}
.cap .d{font-size:var(--fs-cap);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;padding:2px 8px;border-radius:999px;white-space:nowrap;flex:none}
.tag.new{color:var(--key-700);border:1px solid var(--key-200);background:var(--key-50)}
.tag.ref{color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-soft)}
.board{width:1280px;height:800px;background:var(--app-bg);border-radius:18px;box-shadow:var(--board-shadow);overflow:hidden;display:flex;flex-direction:column;position:relative;border:1px solid var(--line)}
.shot{zoom:1}
@media (max-width:1311px),(max-height:897px){.shot{zoom:.9}}
@media (max-width:1183px),(max-height:812px){.shot{zoom:.8}}
@media (max-width:1055px),(max-height:727px){.shot{zoom:.7}}
@media (max-width:927px),(max-height:642px){.shot{zoom:.6}}
@media (max-width:799px){.shot{zoom:.5}}
@media (max-width:671px){.shot{zoom:.4}}
@media (max-width:543px){.shot{zoom:.3}}
@media (max-width:415px){.shot{zoom:.25}}
/* ── 앱 상단바 (세션 전) ── */
.appbar{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--line2);background:var(--panel)}
.appbar.clear{background:transparent;border-bottom-color:transparent}
.applogo{font-weight:900;letter-spacing:-.02em;font-size:var(--fs-h2);color:var(--key)}
.pbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 12px 4px 4px;color:var(--muted);font-size:var(--fs-sm)}
.pbtn .nm{color:var(--ink);font-weight:500}
.pbtn.open{border-color:var(--key);box-shadow:0 0 0 3px var(--key-100)}
.pbtn .avatar{width:32px;height:32px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--key-100);color:var(--key-700);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);flex:none}
.avatar.guest{background:var(--soft);color:var(--faint);border:1px dashed var(--line)}
.abody{flex:1;min-height:0;position:relative}
/* ── 공통 컴포넌트 ── */
.lead{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.01em;line-height:1.35}
.hint{color:var(--muted);font-size:var(--fs-sm);margin-top:4px}
.muted{color:var(--muted)}.t-sm{font-size:var(--fs-sm)}.t-cap{font-size:var(--fs-cap)}
.btn{background:var(--key);color:#fff;border:1px solid var(--key);border-radius:10px;padding:11px 18px;font-size:var(--fs-body);font-weight:500;font-family:inherit;display:inline-flex;gap:8px;align-items:center;justify-content:center;white-space:nowrap}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn.soft{background:var(--key-50);color:var(--key-700);border-color:var(--key-200)}
.btn.text{background:transparent;color:var(--key);border-color:transparent}
.btn.sm{padding:7px 12px;font-size:var(--fs-sm);border-radius:8px}
.btn.lg{padding:14px 24px;font-size:var(--fs-h3)}
.btn.block{width:100%;padding:14px}
.btn .r{font-size:var(--fs-cap);opacity:.7}
.inp{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:var(--fs-body);background:var(--panel);color:var(--ink)}
.inp.ph{color:var(--faint)}
.card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 18px}
.badge{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--soft);color:var(--muted);white-space:nowrap}
.badge.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.badge.key{color:var(--key-700);border-color:var(--key-200);background:var(--key-50)}
.note-box{font-size:var(--fs-cap);color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:10px;padding:9px 12px;margin-top:16px;display:flex;gap:7px}
.chip{font-size:var(--fs-sm);padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);white-space:nowrap}
.chip.on{background:var(--key);color:#fff;border-color:var(--key);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.sk{font-size:var(--fs-sm);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.sk.on{background:var(--key-50);border-color:var(--key-400);color:var(--key-700);font-weight:500}
.lbl{font-size:var(--fs-sm);font-weight:700;margin-bottom:8px;display:flex;gap:8px;align-items:baseline}
.lbl .q{font-family:var(--mono);color:var(--key);font-size:var(--fs-label)}
.lbl .opt{color:var(--faint);font-weight:400;font-size:var(--fs-cap)}
.whybox{font-size:var(--fs-cap);color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.note{font-size:var(--fs-cap);color:var(--muted)}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:var(--fs-cap)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* 1 랜딩 */
.landing{background:radial-gradient(900px 520px at 50% 38%,var(--key-100),transparent 70%),var(--app-bg)}
.center{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:64px}
.hero-logo{font-size:64px;font-weight:900;letter-spacing:-.03em;color:var(--key);line-height:1.1}
.slogan{font-size:var(--fs-h2);margin-top:16px}
.cta{display:flex;gap:12px;justify-content:center;margin-top:36px}
.acct{margin-top:28px;padding-top:22px;border-top:1px solid var(--key-200);width:400px;display:flex;flex-direction:column;align-items:center;gap:10px}
.pop{position:absolute;top:8px;right:32px;width:320px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--pop-shadow);overflow:hidden;text-align:left;z-index:2}
.pop .ph{display:flex;gap:12px;align-items:center;padding:18px}
.pop .ph .avatar{width:48px;height:48px;font-size:var(--fs-h3)}
.pop .nm{font-size:var(--fs-h3);font-weight:700;line-height:1.3}
.pop .em{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.pop .pb{padding:14px 18px;border-top:1px solid var(--line2);background:var(--key-50)}
.pop .pk{font-family:var(--mono);font-size:var(--fs-label);color:var(--key-700);margin-bottom:8px}
.pop .menu{padding:6px}
.pop .mi{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;font-size:var(--fs-sm)}
.pop .mi.hover{background:var(--soft)}
.pop .mi.out{color:var(--bad);border-top:1px solid var(--line2);border-radius:0;margin-top:4px}
.dim{opacity:.35}
/* 2 코드 입장 */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:40px 48px;width:520px;text-align:center}
.codebox{display:flex;gap:8px;justify-content:center}
.codebox b{font-family:var(--mono);font-size:var(--fs-h1);font-weight:700;width:52px;height:64px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--soft)}
.codebox b.f{border-color:var(--key-400);color:var(--key-700);background:var(--key-50)}
.codebox b.c{border:2px solid var(--key);background:var(--panel);color:var(--faint)}
/* 3 프로필 · 4 세션 만들기 */
.page{height:100%;padding:36px 64px 0;display:flex;flex-direction:column}
.page .cols{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;margin-top:24px}
.stack{display:flex;flex-direction:column;gap:20px}
.pagefoot{margin-top:auto;height:80px;flex:none;border-top:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between}
.grp+.grp{margin-top:14px}
.grp .gl{font-size:var(--fs-label);font-weight:700;color:var(--muted);font-family:var(--mono);margin-bottom:8px}
.preview{border:1px solid var(--key-200);background:linear-gradient(135deg,var(--key-50),var(--panel));border-radius:14px;padding:16px 18px}
.preview .pk{font-family:var(--mono);font-size:var(--fs-label);color:var(--key-700)}
.preview .pv{font-size:var(--fs-h2);font-weight:700;margin:4px 0 2px}
.cardt{font-size:var(--fs-sm);font-weight:700;margin-bottom:12px;display:flex;gap:6px;align-items:center}
.custom{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.custom .mini{width:88px;border:2px solid var(--key);box-shadow:0 0 0 3px var(--key-100);border-radius:8px;padding:6px 10px;font-family:var(--mono);font-size:var(--fs-body);font-weight:700;text-align:right;background:var(--panel)}
/* 5·6 대기실 */
.qr{width:120px;height:120px;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:10px}
.qr i{background:var(--key-950);border-radius:1px}
.roomcode{font-family:var(--mono);font-size:56px;font-weight:700;letter-spacing:.08em;line-height:1.15;color:var(--key)}
.prow{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:var(--fs-sm)}
.prow.empty{border-style:dashed;color:var(--faint);background:transparent}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
/* ── 세션 셸 ── */
.sbar{height:88px;flex:none;display:grid;grid-template-columns:1fr 500px 1fr;align-items:center;gap:20px;padding:0 28px;background:var(--panel);border-bottom:1px solid var(--line)}
.sb-left,.sb-right{display:flex;align-items:center;gap:10px}
.sb-right{justify-content:flex-end}
.codetag{font-family:var(--mono);font-size:var(--fs-label);color:var(--key-700);background:var(--key-50);border:1px solid var(--key-200);border-radius:6px;padding:1px 7px}
.timer{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;border:1px solid var(--line);border-radius:8px;padding:4px 9px}
.timer b{color:var(--ink);font-weight:700}
.prog{display:flex;flex-direction:column;gap:7px;background:var(--key-50);border:1px solid var(--key-100);border-radius:14px;padding:9px 16px 8px}
.prog-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prog-top .l{display:flex;align-items:center;gap:8px}
.prog-step{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;color:#fff;background:var(--key);border-radius:6px;padding:1px 7px}
.prog-name{font-size:var(--fs-h3);font-weight:700;color:var(--key-950)}
.prog-pct{font-family:var(--mono);font-size:var(--fs-h3);font-weight:700;color:var(--key)}
.prog-pct small{font-size:var(--fs-label);color:var(--muted);font-weight:500;margin-right:6px}
.seg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.seg i{height:6px;border-radius:99px;background:var(--key-200);display:block;position:relative;overflow:hidden}
.seg i.done{background:var(--key)}
.seg i.cur{background:var(--key-200)}
.seg i.cur b{position:absolute;left:0;top:0;bottom:0;background:var(--key-500);border-radius:99px}
.seg-l{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.seg-l span{font-size:var(--fs-label);color:var(--faint);text-align:center;white-space:nowrap;line-height:1.2}
.seg-l span.done{color:var(--key-400)}
.seg-l span.cur{color:var(--key-700);font-weight:700}
.sbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px}
.smain{padding:28px 32px;min-width:0;overflow:hidden}
.shead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.summary{border-left:1px solid var(--line);background:var(--panel);padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-height:0}
.sum-h{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line2)}
.sum-h b{font-size:var(--fs-h3);font-weight:700;display:flex;align-items:center;gap:8px}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.sum-meta{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint)}
.sum-list{border-left:2px solid var(--key-100);margin-left:5px}
.si{position:relative;padding:0 0 11px 16px}
.si:last-child{padding-bottom:0}
.si::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--key-300)}
.si.fresh::before{border-color:var(--key);background:var(--key);box-shadow:0 0 0 3px var(--key-100)}
.si .k{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);display:flex;gap:6px;align-items:center;line-height:1.4}
.si .k em{font-style:normal;color:#fff;background:var(--key);border-radius:4px;padding:0 5px;font-weight:700}
.si .v{font-size:var(--fs-sm);margin-top:1px;line-height:1.45}
.si .v b{color:var(--key-700)}
.si.fresh .v{background:var(--key-50);border:1px solid var(--key-200);border-radius:8px;padding:6px 9px;margin-top:4px}
.sum-next{font-size:var(--fs-cap);color:var(--muted);border:1px dashed var(--key-200);border-radius:10px;padding:8px 11px;margin-top:auto}
.sum-next b{color:var(--key-700)}
.sum-foot{display:flex;gap:8px}
.sum-foot .btn{flex:1}
/* 세션 화면 내용 */
.map{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.map th,.map td{padding:9px 10px;border-bottom:1px solid var(--line2);text-align:center}
.map tr:last-child td{border-bottom:none}
.map th{font-size:var(--fs-sm);color:var(--ink);font-weight:700;background:var(--soft)}
.map td.skill{text-align:left;font-weight:500;padding-left:18px}
.map td.cnt{font-family:var(--mono);font-size:var(--fs-cap);color:var(--muted)}
.map tr.gap td{background:var(--warn-soft)}
.map tr.gap td.cnt{color:var(--warn);font-weight:700}
.cell{display:inline-flex;width:26px;height:26px;border-radius:8px;align-items:center;justify-content:center;font-size:var(--fs-cap);font-weight:700}
.cell.g{background:var(--key);color:#fff}
.cell.n{color:var(--line)}
.boxrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.strbox,.gapbox{border-radius:12px;padding:12px 14px;font-size:var(--fs-sm)}
.strbox{background:var(--key-50);border:1px solid var(--key-200);color:var(--key-800)}
.gapbox{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn)}
.qcard{border-radius:16px;padding:24px 26px;color:#fff;background:linear-gradient(135deg,var(--key-600),var(--key-800))}
.qcard .s{font-size:var(--fs-cap);opacity:.75}
.qcard .q{font-size:var(--fs-h1);font-weight:700;margin-top:6px}
.idea{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px;font-size:var(--fs-sm);display:flex;flex-direction:column;gap:10px;min-height:96px}
.idea .m{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:var(--fs-cap);margin-top:auto}
.idea .h{color:var(--key);font-weight:700}
.idea.new{border-color:var(--key-300);background:linear-gradient(180deg,var(--key-50),var(--panel))}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.tool{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel)}
.tool.on{border:2px solid var(--key);background:var(--key-50)}
.tool .ti{font-size:var(--fs-h2);line-height:1.2}
.tool .tt{font-size:var(--fs-sm);font-weight:700}
.tool .td{font-size:var(--fs-cap);color:var(--muted)}
.propose{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.propose .head{background:linear-gradient(135deg,var(--key-900),var(--key-950));color:#fff;padding:18px 22px}
.propose .head .ai{font-family:var(--mono);font-size:var(--fs-label);color:var(--key-300)}
.propose .head .big{font-size:var(--fs-h2);font-weight:700;margin-top:4px}
.propose .body{padding:18px 22px}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--soft)}
.rc.hl{border-color:var(--key-300);background:var(--key-50)}
.rc .rk{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.rc .rv{font-size:var(--fs-h1);font-weight:700;line-height:1.3}
.rc.hl .rv{color:var(--key)}
.rc .rd{font-size:var(--fs-cap);color:var(--muted)}
.why{font-size:var(--fs-sm);margin:14px 0 16px;background:var(--key-50);border:1px solid var(--key-200);border-radius:10px;padding:11px 14px}
.toolp{border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:var(--panel)}
.toolp.on{border:2px solid var(--key)}
.toolh{padding:12px 14px;font-weight:700;font-size:var(--fs-sm);border-bottom:1px solid var(--line2);background:var(--soft);display:flex;justify-content:space-between;align-items:center}
.toolp.on .toolh{background:var(--key-50)}
.toolb{padding:12px 14px;font-size:var(--fs-sm);display:flex;flex-direction:column;gap:8px}
.qline{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:var(--fs-cap)}
.gategrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gcard{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.gcard.hold{border-color:var(--warn-line)}
.gtop{display:flex;justify-content:space-between;align-items:center}
.gidx{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.verd{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;padding:2px 9px;border-radius:999px}
.verd.pass{background:var(--ok-soft);color:var(--ok)}
.verd.hold{background:var(--warn-soft);color:var(--warn)}
.gttl{font-size:var(--fs-h3);font-weight:700}
.mkt{border-radius:10px;padding:8px 10px;display:flex;gap:9px;align-items:center;font-size:var(--fs-cap)}
.mkt.exist{background:var(--bad-soft)}.mkt.sim{background:var(--warn-soft)}.mkt.gap{background:var(--ok-soft)}
.mklbl{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;color:#fff;padding:2px 7px;border-radius:6px}
.mklbl.exist{background:var(--bad)}.mklbl.sim{background:var(--warn)}.mklbl.gap{background:var(--ok)}
.gstat{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-cap);color:var(--muted)}
.gstat b{font-size:var(--fs-sm)}
.vote{display:flex;gap:6px}
.vote i{width:18px;height:18px;border-radius:50%;background:var(--key)}
.vote i.e{background:transparent;border:2px solid var(--key-200)}
.theme{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px}
.theme.on{border:2px solid var(--key);background:linear-gradient(180deg,var(--key-50),var(--panel))}
.theme .tt{font-size:var(--fs-h2);font-weight:700;margin:8px 0 4px}
.bar2{height:8px;border-radius:99px;background:var(--key-100);margin:14px 0 6px;overflow:hidden}
.bar2 i{display:block;height:100%;background:var(--key);border-radius:99px}
.opts{display:flex;gap:10px;align-items:center;margin-bottom:18px}
.cost{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.costmain{background:linear-gradient(135deg,var(--key-700),var(--key-950));color:#fff;border-radius:16px;padding:24px}
.costmain .ck{font-family:var(--mono);font-size:var(--fs-label);color:var(--key-200)}
.costmain .cbig{font-size:48px;font-weight:900;margin:6px 0 2px;line-height:1.15}
.costmain .cbig em{font-style:normal;font-size:var(--fs-h3);opacity:.8}
.costmain .csub{font-size:var(--fs-cap);opacity:.8;margin-top:6px}
.b2{font-family:var(--mono);font-size:var(--fs-label);padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24)}
.costside{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--panel)}
.role{display:flex;justify-content:space-between;font-size:var(--fs-sm);padding:9px 0;border-bottom:1px solid var(--line2)}
.role:last-child{border-bottom:none}
.role .rm{font-family:var(--mono);font-size:var(--fs-cap);color:var(--key-700)}
.demoflag{font-family:var(--mono);font-size:var(--fs-label);color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-soft);padding:2px 8px;border-radius:999px}
.rep{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:18px 20px;margin-top:14px}
.rep h4{margin:0 0 8px;font-size:var(--fs-h3)}
.rep ol{margin:0;padding-left:18px;font-size:var(--fs-sm);line-height:1.8}
.done-hero{text-align:center;padding-top:40px}
.done-hero .em{font-size:56px;line-height:1.2}
.foot2{max-width:1280px;margin:0 auto;padding:24px 16px 64px;font-size:var(--fs-cap);color:var(--muted)}
/* ───── v4 추가 ───── */
.lk{display:inline-block;vertical-align:-1px}
.chip.lock{display:inline-flex;align-items:center;gap:7px;color:var(--faint);background:var(--soft);padding-right:6px}
.pro{display:inline-flex;align-items:center;gap:3px;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--key-700);background:var(--panel);border:1px solid var(--key-200);padding:2px 7px 2px 6px;border-radius:999px;line-height:1.3}
.pro .lk{width:10px;height:10px;vertical-align:0}
.plan-free{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line);padding:1px 7px;border-radius:5px}
.upsell{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--key-50);border:1px solid var(--key-200);font-size:var(--fs-cap);color:var(--key-800)}
.upsell a{margin-left:auto;color:var(--key);font-weight:700;text-decoration:none;white-space:nowrap}
.limit{font-size:var(--fs-cap);color:var(--muted);margin-left:auto}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.stepper span{width:34px;height:36px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-h3);color:var(--key);background:var(--soft)}
.stepper span.off{color:var(--line)}
.stepper b{min-width:44px;text-align:center;font-family:var(--mono);font-size:var(--fs-h3);font-weight:700;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:36px}
.btn.disabled{background:var(--soft);color:var(--faint);border-color:var(--line);cursor:not-allowed}
.applogo{display:inline-flex;align-items:center;gap:8px}
.hero-logo{display:inline-flex;align-items:center;gap:18px}
.appicon{flex:none;display:block}
.brandside .bl{display:flex;align-items:center;gap:10px}
.iconrow{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.iconrow figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.iconrow .dark{background:var(--key-900);border-radius:14px;padding:14px}
/* 약관 팝업 — key color 없이 검정/회색만 */
.overlay{position:absolute;inset:0;background:rgba(12,12,16,.5);display:flex;align-items:center;justify-content:center;z-index:5}
.modal{width:580px;height:660px;background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden;color:#111}
.mh{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #ececec}
.mh b{font-size:var(--fs-h2);font-weight:700}
.mh small{display:block;font-size:var(--fs-cap);color:#777;font-weight:400;margin-top:2px}
.mx{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#444;font-size:22px;line-height:1}
.mb{flex:1;min-height:0;position:relative;padding:18px 32px 0 24px;overflow:hidden;font-size:var(--fs-sm);line-height:1.75;color:#222}
.mb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.mb h5{font-size:var(--fs-body);font-weight:700;margin:16px 0 2px;color:#111}
.mb h5:first-child{margin-top:0}
.mb p{margin:0}
.mb ol{margin:0;padding-left:18px}
.sbtrack{position:absolute;right:8px;top:14px;bottom:14px;width:4px;border-radius:4px;background:#f1f1f1;z-index:1}
.sbtrack i{display:block;height:28%;background:#bdbdbd;border-radius:4px}
.ptable{width:100%;border-collapse:collapse;font-size:var(--fs-cap);line-height:1.5;margin-top:10px}
.ptable th,.ptable td{border:1px solid #e3e3e3;padding:8px 10px;text-align:left;vertical-align:top}
.ptable th{background:#f7f7f7;font-weight:700;color:#111}
.mnote{font-size:var(--fs-cap);color:#666;background:#f6f6f6;border-radius:8px;padding:8px 10px;margin-top:12px}
.mf{padding:14px 24px;border-top:1px solid #ececec;display:flex;gap:8px;justify-content:flex-end}
.btn.black{background:#111;color:#fff;border-color:#111}
.btn.gray{background:#fff;color:#333;border-color:#d9d9d9}
.fl{font-size:var(--fs-sm);font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline}
.fl a{font-weight:500;font-size:var(--fs-cap);color:var(--key);text-decoration:none}
.fgroup+.fgroup{margin-top:14px}
.inp.focus{border:2px solid var(--key);box-shadow:0 0 0 3px var(--key-100);padding:10px 13px}
.inp.pw{display:flex;justify-content:space-between;letter-spacing:.15em}
.inp.pw span{letter-spacing:0;color:var(--faint)}
.okt{font-size:var(--fs-cap);color:var(--ok);margin-top:4px}
.check{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm)}
.box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;background:var(--panel);flex:none}
.box.on{background:var(--key);border-color:var(--key)}
.req{font-family:var(--mono);font-size:var(--fs-label);color:var(--key)}
.opt2{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint)}
.social{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn.google{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn.kakao{background:#FEE500;color:#191600;border-color:#FEE500}
.gmark{width:18px;height:18px;border-radius:50%;background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0);display:inline-block}
.split{display:grid;grid-template-columns:460px 1fr;height:100%}
.brandside{background:radial-gradient(500px 400px at 20% 110%,var(--key-500),transparent 70%),linear-gradient(160deg,var(--key-700),var(--key-950));color:#fff;padding:44px 48px;display:flex;flex-direction:column}
.brandside .bl{font-size:var(--fs-h1);font-weight:900;letter-spacing:-.02em}
.brandside .bh{font-size:30px;font-weight:700;line-height:1.35;margin-top:auto}
.brandside ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px}
.brandside li{display:flex;gap:10px;align-items:center;font-size:var(--fs-body);color:var(--key-100)}
.brandside li i{font-style:normal;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none}
.brandside .bf{margin-top:40px;font-size:var(--fs-cap);color:var(--key-300)}
.formside{display:flex;align-items:center;justify-content:center;background:var(--app-bg);position:relative}
.formside .back{position:absolute;top:24px;left:32px;font-size:var(--fs-sm);color:var(--muted)}
.form{width:420px}
.form .alt{margin-top:18px;text-align:center;font-size:var(--fs-sm);color:var(--muted)}
.form .alt a{color:var(--key);font-weight:700;text-decoration:none}
.terms{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:9px;margin-top:16px}
.terms .all{padding-bottom:9px;border-bottom:1px solid var(--line2);font-weight:700}
.terms .check a{margin-left:auto;font-size:var(--fs-cap);color:var(--faint)}
.mypage{display:grid;grid-template-columns:260px 1fr;height:100%}
.side{border-right:1px solid var(--line);background:var(--panel);padding:24px 16px;display:flex;flex-direction:column}
.side .me{display:flex;gap:12px;align-items:center;padding:4px 8px 20px;border-bottom:1px solid var(--line2);margin-bottom:12px}
.side .me .avatar{width:48px;height:48px;font-size:var(--fs-h3)}
.side .me b{display:block;font-size:var(--fs-h3)}
.side .me span{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:10px;font-size:var(--fs-body);color:var(--muted);text-decoration:none}
.nav a.on{background:var(--key-50);color:var(--key-700);font-weight:700}
.nav a .badge{margin-left:auto}
.side .planmini{margin-top:auto;border:1px solid var(--key-200);background:var(--key-50);border-radius:12px;padding:12px 14px;font-size:var(--fs-cap);color:var(--key-800)}
.side .planmini b{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);margin-bottom:4px;color:var(--ink)}
.mpmain{padding:32px 40px 0;display:flex;flex-direction:column;min-width:0;min-height:0}
.mphead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.avrow{display:flex;gap:16px;align-items:center}
.avrow .avatar{width:72px;height:72px;font-size:var(--fs-h1)}
.srch{width:260px;display:flex;gap:8px;align-items:center}
.srow{display:grid;grid-template-columns:110px minmax(0,1fr) 190px 150px 110px;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line2);font-size:var(--fs-sm)}
.srow:last-child{border-bottom:none}
.srow.h{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);background:var(--soft);padding-top:10px;padding-bottom:10px}
.srow .dt{font-family:var(--mono);font-size:var(--fs-cap);color:var(--muted)}
.srow .tp{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .tp small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-cap)}
.srow .rs{color:var(--key-700);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .mt{font-size:var(--fs-cap);color:var(--muted)}
.slist{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.badge.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sc{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:6px 18px}
.sc h4{margin:0;padding:12px 0 8px;font-size:var(--fs-h3)}
.sr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm)}
.sr .sk2{color:var(--muted);font-size:var(--fs-cap)}
.sr .sv{font-weight:500}
.toggle{width:40px;height:22px;border-radius:99px;background:var(--line);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle.on{background:var(--key)}
.toggle.on::after{left:21px}
.plancard{border-radius:14px;padding:20px;background:linear-gradient(135deg,var(--key-700),var(--key-950));color:#fff}
.plancard .pk{font-family:var(--mono);font-size:var(--fs-label);color:var(--key-200)}
.plancard .pn{font-size:var(--fs-h1);font-weight:900;display:flex;align-items:center;gap:8px}
.plancard ul{list-style:none;padding:0;margin:12px 0 16px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--key-100)}
.plancard .btn{background:#fff;color:var(--key-800);border-color:#fff}
.feat{list-style:none;padding:0;margin:4px 0 12px;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.feat li{display:flex;gap:8px;align-items:center}
.feat li.no{color:var(--faint)}
.btn.danger{background:var(--panel);color:var(--bad);border-color:var(--bad-line)}
:root{--news:#0284C7;--news-soft:#E8F4FB;--news-line:#B5DCF1;--news-ink:#075985}
.ibar{height:64px;flex:none;display:grid;grid-template-columns:1fr 400px 1fr;align-items:center;gap:20px;padding:0 28px;background:var(--panel);border-bottom:1px solid var(--line)}
.ib-l,.ib-r{display:flex;align-items:center;gap:10px;min-width:0}
.ib-r{justify-content:flex-end}
.ib-topic{font-size:var(--fs-cap);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--line);padding-left:10px}
.ib-c{display:flex;flex-direction:column;gap:6px}
.ib-stage{font-size:var(--fs-sm);font-weight:500;text-align:center;color:var(--ink);line-height:1.2}
.ib-row{display:flex;align-items:center;gap:8px}
.ib-lbl{width:30px;flex:none;font-size:var(--fs-label);color:var(--faint)}
.ib-track{flex:1;height:4px;border-radius:99px;background:var(--key-100);overflow:hidden}
.ib-track i{display:block;height:100%;background:var(--key);border-radius:99px}
.ib-pct{width:30px;flex:none;font-family:var(--mono);font-size:var(--fs-label);color:var(--key);text-align:right}
.rolebadge{font-size:var(--fs-cap);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.ico{display:inline-block;vertical-align:-2px;color:var(--faint);flex:none}
.ibody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;padding:18px 24px}
.chat{background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ch-h{height:52px;flex:none;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line2)}
.ch-h b{font-size:var(--fs-body);font-weight:700;white-space:nowrap}
.ch-prog{flex:1;height:4px;border-radius:99px;background:var(--line2);overflow:hidden}
.ch-prog i{display:block;height:100%;background:var(--key);border-radius:99px}
.ch-n{font-family:var(--mono);font-size:var(--fs-cap);color:var(--muted)}
.lockchip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-cap);color:var(--muted);white-space:nowrap}
.msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:0 20px 16px;background:var(--app-bg);overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0,#000 48px);mask-image:linear-gradient(transparent 0,#000 48px)}
.b{max-width:78%;border-radius:16px;padding:10px 14px;font-size:var(--fs-body);line-height:1.55;flex:none}
.b.ai{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-top-left-radius:4px}
.b.me{align-self:flex-end;background:var(--key);color:#fff;border-top-right-radius:4px}
.b.fq{background:var(--key-50);border-color:var(--key-200)}
.b.explain{background:var(--news-soft);border-color:var(--news-line)}
.b.good{background:var(--ok-soft);border-color:var(--ok-line)}
.b.wide{max-width:100%;align-self:stretch}
.b.wait{color:var(--muted);display:flex;align-items:center;gap:8px}
.blab{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);flex:none;margin-top:4px}
.comp{flex:none;border-top:1px solid var(--line2);padding:12px 20px 16px;background:var(--panel)}
.comp-row{display:flex;gap:8px;align-items:center}
.skip{font-size:var(--fs-cap);color:var(--muted);white-space:nowrap;padding:0 6px}
.btn.off{background:var(--line);border-color:var(--line);color:#fff}
.side2{display:flex;flex-direction:column;gap:12px;min-height:0}
.sc2{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 18px}
.sc2 h4{margin:0 0 8px;font-size:var(--fs-sm);font-weight:700;display:flex;align-items:baseline;gap:6px}
.sc2 h4 small{font-size:var(--fs-cap);color:var(--faint);font-weight:400}
.sc2 p{font-size:var(--fs-cap);color:var(--muted);line-height:1.6}
.sc2 hr{border:none;border-top:1px solid var(--line2);margin:12px 0}
.tp{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;font-size:var(--fs-sm)}
.tp i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--mono);font-size:var(--fs-label);background:var(--soft);color:var(--muted);flex:none;border:1px solid var(--line)}
.tp.done{color:var(--faint)}
.tp.done i{color:var(--faint);background:var(--soft);border-color:var(--line2)}
.tp.cur{background:var(--key-50);font-weight:700}
.tp.cur i{background:var(--key);border-color:var(--key);color:#fff}
.tr{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);padding:4px 0}
.tr span:last-child{font-family:var(--mono);font-size:var(--fs-cap);color:var(--muted)}
.asked{display:inline-block;font-size:var(--fs-cap);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px;margin-top:6px}
/* 최근 소식 카드 */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:none}
.nc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;min-height:330px}
.nc.on{border-color:var(--news-line);box-shadow:0 0 0 3px var(--news-soft)}
.nc-top{display:flex;justify-content:space-between;align-items:center}
.ncat{font-size:var(--fs-label);font-weight:700;color:var(--news-ink);background:var(--news-soft);border-radius:5px;padding:1px 7px;white-space:nowrap}
.ndate{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint)}
.nt{font-size:var(--fs-body);font-weight:700;line-height:1.5}
.ne{font-size:var(--fs-cap);color:var(--muted);line-height:1.65}
.ne b,.nteam b{display:block;font-size:var(--fs-label);color:var(--faint);font-weight:500;margin-bottom:2px}
.nteam{font-size:var(--fs-cap);background:var(--soft);border-radius:10px;padding:9px 11px;line-height:1.65}
.nsrc{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);display:flex;justify-content:space-between;margin-top:auto}
.nsrc a{font-family:var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.rbs{display:flex;gap:4px}
.rb{flex:1;text-align:center;font-size:var(--fs-cap);border:1px solid var(--line);border-radius:999px;padding:6px 0;color:var(--muted);white-space:nowrap}
.rb.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.qlist{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.qrow{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:var(--fs-sm)}
.qrow span:last-child{margin-left:auto;font-size:var(--fs-cap);color:var(--muted)}
.hints{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.hint2{font-size:var(--fs-cap);border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted);background:var(--soft)}
/* 재료 — 종류 라벨 없음, "피할 것"만 따로 */
.avoid{font-size:var(--fs-label);color:var(--muted);border:1px solid var(--line);background:var(--soft);border-radius:5px;padding:1px 7px;white-space:nowrap;flex:none}
.mats{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;flex:none}
.mats h5{margin:0;font-size:var(--fs-body);display:flex;justify-content:space-between;align-items:center}
.mats .sub2{font-size:var(--fs-cap);color:var(--muted);margin:2px 0 6px}
.mrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm)}
.mrow::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--faint);flex:none}
.mrow.av::before{display:none}
.mrow .cnt{margin-left:auto;font-family:var(--mono);font-size:var(--fs-cap);color:var(--faint)}
/* 진행자 */
.hbody{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;padding:18px 24px}
.pr{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm);padding:6px 0;min-height:32px}
.pr .nm2{width:88px;flex:none}
.pr .bar{flex:1;height:4px;border-radius:99px;background:var(--line2);overflow:hidden}
.pr .bar i{display:block;height:100%;background:var(--key);border-radius:99px}
.pr .st{margin-left:auto;font-family:var(--mono);font-size:var(--fs-cap);color:var(--muted)}
.pr .st.done{font-family:var(--sans);color:var(--faint)}
.rx{padding:6px 0}
.rx-t{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.rx-t .c{font-size:var(--fs-cap);color:var(--faint);width:28px;flex:none}
.stack3{display:flex;height:6px;border-radius:99px;overflow:hidden;margin-top:6px;background:var(--line2)}
.stack3 i{display:block;height:100%}
.s-new{background:var(--line)}.s-heard{background:var(--key-300)}.s-know{background:var(--key)}
.lg3{display:flex;gap:12px;font-size:var(--fs-label);color:var(--muted);margin-top:8px}
.lg3 span{display:inline-flex;align-items:center;gap:4px}.lg3 i{width:8px;height:8px;border-radius:2px;display:inline-block}
.hmain{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px 0;display:flex;flex-direction:column;min-height:0}
.grps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.gp{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel)}
.gp.on{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}
.gp-h{display:flex;align-items:center;gap:8px}
.gp-h b{font-size:var(--fs-body)}
.gp-h .ai2{font-size:var(--fs-label);color:var(--faint)}
.gp-h .tg{margin-left:auto;font-size:var(--fs-cap);border-radius:999px;padding:3px 10px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.gp-h .tg.on{background:var(--key);border-color:var(--key);color:#fff}
.gp-d{font-size:var(--fs-cap);color:var(--muted);margin:3px 0 4px}
.hfoot{margin-top:auto;height:72px;flex:none;border-top:1px solid var(--line2);display:flex;align-items:center;gap:14px}
/* 발산 시작 */
.dbody{flex:1;min-height:0;padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.matpanel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.fgc{border:1px solid var(--key);box-shadow:inset 0 0 0 1px var(--key);border-radius:14px;padding:10px 14px}
.fgc .h{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:700;margin-bottom:2px}
.fgc .h em{font-style:normal;font-size:var(--fs-label);color:var(--key-700);background:var(--key-50);border-radius:999px;padding:1px 8px;font-weight:500}
.rest{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2);font-size:var(--fs-sm)}
.rest b{font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.pill2{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-cap);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-right:6px}
.empty{flex:1;border:1px dashed var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:var(--fs-sm)}
.dvp{flex:1;min-height:0;padding:18px 32px 24px;display:flex;flex-direction:column}
.dsteps{display:flex;align-items:center;gap:10px;font-size:var(--fs-cap);color:var(--faint);flex:none}
.ds{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ds i{font-style:normal;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;background:var(--panel)}
.ds.done{color:var(--muted)}
.ds.cur{color:var(--ink);font-weight:500}
.ds.cur i{background:var(--key);border-color:var(--key);color:#fff}
.dl{width:24px;height:1px;background:var(--line);display:block}
.dvh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:14px 0 16px;flex:none}
.dvh h3{margin:0;font-size:var(--fs-h1);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.dvh p{font-size:var(--fs-sm);color:var(--muted);margin-top:4px}
.dvh .aside{font-size:var(--fs-cap);color:var(--muted);text-align:right;white-space:nowrap}
.panel2{background:var(--panel);border:1px solid var(--line);border-radius:16px}
.quiet{display:flex;align-items:center;gap:6px;font-size:var(--fs-cap);color:var(--muted)}
.linkish{font-size:var(--fs-cap);color:var(--muted);text-decoration:underline;text-underline-offset:2px}
/* 8-1 */
.rrow{display:grid;grid-template-columns:56px minmax(0,1fr) 32px;gap:16px;align-items:center}
.rrow+.rrow{margin-top:14px}
.rk{width:56px;height:64px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-h2);font-weight:700;line-height:1.1}
.rk small{font-family:var(--sans);font-size:var(--fs-label);font-weight:400;margin-top:2px}
.rk.r1{background:var(--key);color:#fff}
.rk.r2{background:var(--key-100);color:var(--key-700)}
.rk.r3{background:var(--soft);color:var(--faint);border:1px dashed var(--line)}
.rlab{font-size:var(--fs-cap);color:var(--muted);margin-bottom:6px}
.rin{border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:var(--fs-body);background:var(--panel)}
.rin.ph{color:var(--faint);border-style:dashed}
.arw{display:flex;flex-direction:column;gap:6px;padding-top:20px}
.arw span{width:32px;height:26px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-cap)}
.arw span.off{color:var(--line)}
.dfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding-top:16px}
/* 8-2 */
.recs{display:flex;flex-direction:column;gap:10px}
.rec{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.rec.on{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}
.rec b{font-size:var(--fs-body);font-weight:700}
.rec p{font-size:var(--fs-cap);color:var(--muted);margin-top:3px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg span{min-width:36px;padding:6px 10px;text-align:center;font-size:var(--fs-cap);color:var(--muted);border-left:1px solid var(--line)}
.seg span:first-child{border-left:none}
.seg span.on{background:var(--key);color:#fff;font-weight:500}
.mine li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm)}
.mine li:first-child{border-top:none}
.mine{list-style:none;margin:0;padding:0}
.num{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-cap);font-weight:700;flex:none;background:var(--soft);color:var(--muted)}
.num.n1{background:var(--key);color:#fff}
.num.n2{background:var(--key-100);color:var(--key-700)}
/* 8-3 */
.rtab{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.rtab th{text-align:left;font-size:var(--fs-cap);color:var(--muted);font-weight:500;padding:16px 24px;border-bottom:1px solid var(--line)}
.rtab td{padding:0 24px;height:118px;border-bottom:1px solid var(--line2);vertical-align:middle;line-height:1.6;font-size:var(--fs-body)}
.rtab tr:last-child td{border-bottom:none}
.rtab td.who{white-space:nowrap;color:var(--muted);width:130px}
.rtab td.r1{font-weight:500}
.rtab tr.me td{background:var(--key-50)}
.metag{font-size:var(--fs-label);color:var(--key-700);border:1px solid var(--key-200);border-radius:999px;padding:0 6px;margin-left:6px;background:var(--panel)}
/* 8-4 */
.two{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px}
.ilist{display:flex;flex-direction:column;gap:6px;min-height:0}
.igl{font-size:var(--fs-cap);color:var(--faint);margin:8px 0 2px}
.igl:first-child{margin-top:0}
.it{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:var(--fs-sm)}
.it .n{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);width:12px;flex:none}
.it .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .s{font-size:var(--fs-cap);color:var(--faint);white-space:nowrap}
.it .s.k{color:var(--key)}
.it.on{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}
.it.off{color:var(--faint)}
.detail{padding:20px 22px;display:flex;flex-direction:column;min-height:0}
.dk{font-size:var(--fs-cap);color:var(--muted)}
.dt{font-size:var(--fs-h2);font-weight:700;margin-top:2px;line-height:1.4}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.cf .cl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-sm);font-weight:700;margin-bottom:6px}
.cf .cl small{font-size:var(--fs-cap);color:var(--muted);font-weight:400}
.cf .ta{border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:100px;font-size:var(--fs-sm);line-height:1.6}
.cf .ta.focus{border:2px solid var(--key);padding:11px 13px}
.cf .ta.ph{color:var(--faint)}
.cf .hint3{font-size:var(--fs-cap);color:var(--faint);margin-top:6px}
.csave{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:12px}
.clist{margin-top:18px;border-top:1px solid var(--line2);padding-top:12px}
.clist h6{margin:0 0 4px;font-size:var(--fs-sm);font-weight:700}
.clist h6 small{font-weight:400;color:var(--faint);font-size:var(--fs-cap);margin-left:6px}
.cm{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm)}
.cm:first-of-type{border-top:none}
.cm span{font-size:var(--fs-cap);color:var(--muted)}
.cm.plus span{color:var(--key)}
.counts{display:flex;gap:20px;font-size:var(--fs-cap);color:var(--muted)}
.counts b{font-family:var(--mono);font-size:var(--fs-body);color:var(--ink);font-weight:700;margin-left:4px}
/* 등급 */
.grade{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-cap);color:var(--ink);white-space:nowrap}
.grade i{width:7px;height:7px;border-radius:50%;display:block;flex:none}
.grade.go i{background:var(--ok)}.grade.fix i{background:var(--warn)}.grade.re i{background:var(--bad)}
.grade.gbox{border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--panel)}
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dhead>div{flex:1;min-width:0}
.dhead>.grade{flex:none;margin-top:2px}
.ans{display:inline-block;font-size:var(--fs-label);border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--ink);white-space:nowrap;margin-right:8px;vertical-align:1px}
.qa{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm);line-height:1.6}
.qa>b{font-weight:500;color:var(--muted)}
.qa.tight{grid-template-columns:110px 1fr;padding:7px 0}
.more{font-size:var(--fs-cap);color:var(--faint);padding:2px 4px}
.refnote{margin-top:auto;font-size:var(--fs-cap);color:var(--faint);display:flex;gap:6px;align-items:flex-start;padding-top:12px}
/* 8-6 */
.vitem{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.vitem .vt{font-size:var(--fs-sm);line-height:1.45}
.vitem .vm{display:flex;align-items:center;gap:8px;margin-top:3px}
.vitem .vm small{font-size:var(--fs-label);color:var(--faint)}
.vitem.on{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}
.cb{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px}
.cb.on{background:var(--key);border-color:var(--key)}
.dots3{display:inline-flex;gap:4px;margin-left:8px;vertical-align:-1px}
.dots3 i{width:10px;height:10px;border-radius:50%;background:var(--key);display:block}
.dots3 i.e{background:transparent;border:1.5px solid var(--key-300)}
.orig{background:var(--soft);border-radius:10px;padding:10px 14px;font-size:var(--fs-sm);margin-top:6px}
.sech{font-size:var(--fs-cap);color:var(--muted);margin:14px 0 2px;display:flex;gap:6px}
.sech b{color:var(--ink);font-weight:700}
/* 8-7 */
.res{display:grid;grid-template-columns:32px minmax(0,1fr) 150px 160px 40px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm)}
.res:first-child{border-top:none}
.res .rt{line-height:1.45}
.res.top .rt{font-weight:700}
.vbar{height:6px;border-radius:99px;background:var(--line2);overflow:hidden}
.vbar i{display:block;height:100%;background:var(--key-300);border-radius:99px}
.res.top .vbar i{background:var(--key)}
.res .vc{font-family:var(--mono);font-size:var(--fs-cap);color:var(--muted);text-align:right}
.res.top .vc{color:var(--ink);font-weight:700}
.focusgrid{flex:1;min-height:0;display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;position:relative}
.rail{background:#EDEEF5;border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:1px;min-height:0;overflow:hidden}
.rgl{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--fs-label);color:var(--muted);padding:10px 30px 4px 10px;font-weight:500}
.rgl:first-child{padding-top:6px}
.rgl small{font-size:var(--fs-label);color:var(--faint);font-weight:400}
.ri{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:var(--fs-sm);color:var(--ink);min-width:0}
.ri .n{font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);width:10px;flex:none}
.ri .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri .s,.ri small{font-size:var(--fs-label);color:var(--faint);white-space:nowrap;flex:none}
.ri .gd{width:7px;height:7px;border-radius:50%;flex:none}
.gd.go{background:var(--ok)}.gd.fix{background:var(--warn)}.gd.re{background:var(--bad)}
.ri.on{background:var(--panel);box-shadow:inset 3px 0 0 var(--key),0 1px 2px rgba(30,27,75,.06),0 6px 16px rgba(30,27,75,.08)}
.ri.on .s.k{color:var(--key)}
.rmore{font-size:var(--fs-label);color:var(--faint);padding:2px 10px 4px}
.rlegend{margin-top:auto;display:flex;gap:12px;font-size:var(--fs-label);color:var(--faint);padding:8px 10px 4px;border-top:1px solid #DFE0EA}
.rlegend span{display:inline-flex;align-items:center;gap:5px}
.rlegend .gd{width:7px;height:7px;border-radius:50%;display:inline-block}
.rail .cb{flex:none;background:var(--panel);border-color:#C9CADB}
.rail .cb.on{background:var(--key);border-color:var(--key)}
.railbtn{position:absolute;top:8px;left:276px;z-index:3;width:28px;height:28px;border-radius:50%;background:var(--panel);border:1px solid var(--line);box-shadow:0 1px 3px rgba(30,27,75,.14);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:var(--fs-sm);line-height:1}
.focusgrid.closed{display:flex;justify-content:center}
.focusgrid.closed .detail{width:100%;max-width:960px}
.focusgrid.closed .railbtn{left:0;width:auto;height:30px;padding:0 12px 0 10px;border-radius:999px;font-size:var(--fs-cap)}
.detail.lift{border:none;box-shadow:0 1px 2px rgba(30,27,75,.05),0 14px 36px rgba(30,27,75,.10)}
.aitag{font-size:var(--fs-label);color:var(--key-700);border:1px solid var(--key-200);background:var(--key-50);border-radius:999px;padding:0 7px;white-space:nowrap;font-weight:500;flex:none}
.dk.key{color:var(--key-700)}
.sec{margin-top:14px}
.sec h6{margin:0 0 6px;font-size:var(--fs-sm);font-weight:700}
.sec h6 small{font-weight:400;color:var(--faint);font-size:var(--fs-cap);margin-left:6px}
.srcs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.src{background:var(--soft);border-radius:10px;padding:10px 12px}
.src .m{display:flex;gap:8px;align-items:center;font-size:var(--fs-label);color:var(--muted)}
.src .m .grade{font-size:var(--fs-label)}
.src .tt{font-size:var(--fs-sm);font-weight:700;margin:3px 0}
.src .g{font-size:var(--fs-cap);line-height:1.5}
.src .g span{color:var(--muted);margin-right:6px}
.fixrow{display:grid;grid-template-columns:260px 18px 1fr;gap:8px;font-size:var(--fs-sm);padding:5px 0;align-items:baseline;border-top:1px solid var(--line2)}
.fixrow:first-of-type{border-top:none}
.fixrow .p{color:var(--muted)}
.fixrow .p small{color:var(--faint);font-size:var(--fs-label);margin-left:4px}
.fixrow .a{color:var(--faint)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.vgrid div{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:var(--fs-sm);border-top:1px solid var(--line2)}
.vgrid b{font-weight:500;color:var(--muted);width:90px;flex:none;font-size:var(--fs-cap)}
.from{display:grid;grid-template-columns:118px 1fr;gap:10px;font-size:var(--fs-sm);padding:4px 0;align-items:center}
.from span{font-size:var(--fs-label);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 7px;justify-self:start}
.crows{display:flex;flex-direction:column;gap:6px}
.crow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:var(--fs-sm)}
.crow .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow small{font-size:var(--fs-label);color:var(--faint)}
.rbtn{font-size:var(--fs-cap);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--muted);white-space:nowrap}
.rbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dfoot2{margin-top:auto;padding-top:12px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;align-items:center;gap:16px}
.lockline{display:flex;align-items:center;gap:6px;font-size:var(--fs-cap);color:var(--muted);margin-top:6px}
/* 8-7 */
.res7{display:grid;grid-template-columns:18px 28px minmax(0,1fr) 130px 120px 36px;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm)}
.res7:first-of-type{border-top:none}
.res7 .rt{font-weight:500;line-height:1.4}
.res7.top .rt{font-weight:700}
.radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #C9CADB;background:var(--panel)}
.radio.on{border:5px solid var(--key)}
.own{display:flex;align-items:center;gap:6px;font-size:var(--fs-cap);color:var(--muted);margin-top:3px;font-weight:400}
.own i{width:18px;height:18px;border-radius:50%;background:var(--key-100);color:var(--key-700);font-style:normal;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.res7 .vc{font-family:var(--mono);font-size:var(--fs-cap);color:var(--muted);text-align:right}
.res7.top .vc{color:var(--ink);font-weight:700}
.listh{display:flex;justify-content:space-between;font-size:var(--fs-cap);color:var(--faint);padding:14px 0 6px}
/* 9-1 역할 */
.topicbar{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 18px;flex:none}
.topicbar .l{font-size:var(--fs-cap);color:var(--faint);flex:none}
.topicbar b{font-size:var(--fs-h3);flex:1;min-width:0}
.topicbar .r{display:flex;align-items:center;gap:10px;font-size:var(--fs-cap);color:var(--muted);flex:none}
.roles{display:flex;flex-direction:column;gap:6px}
.rolesh{display:grid;grid-template-columns:200px 130px minmax(0,1fr) 160px;gap:14px;font-size:var(--fs-label);color:var(--faint);padding:0 16px 2px}
.rrow2{display:grid;grid-template-columns:200px 130px minmax(0,1fr) 160px;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-size:var(--fs-sm)}
.rrow2.mine{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}
.rrow2.empty{background:transparent;border-style:dashed;border-color:#C9CADB}
.rrow2 .rn{font-weight:700;font-size:var(--fs-body)}
.rrow2 .rd{font-size:var(--fs-cap);color:var(--muted);margin-top:1px}
.who2{display:flex;align-items:center;gap:8px}
.who2 small{font-size:var(--fs-label);color:var(--faint)}
.tags2{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tags2 .ans{margin:0}
.tags2 .mnote{font-size:var(--fs-label);color:var(--key-700)}
.reqbox{font-size:var(--fs-cap);color:var(--ink);background:var(--soft);border-radius:8px;padding:5px 9px;margin-top:4px;width:100%}
.reqbox span{color:var(--muted);margin-right:4px}
.st2{display:flex;justify-content:flex-end;gap:6px;align-items:center}
.st2 .q{font-size:var(--fs-cap);color:var(--muted)}
.st2 .q2{font-size:var(--fs-cap);color:var(--faint)}
.emptytag{font-size:var(--fs-label);color:var(--bad);border:1px solid var(--bad-line);border-radius:5px;padding:1px 6px;background:var(--panel)}
.oll{margin:0;padding-left:18px;font-size:var(--fs-cap);color:var(--muted);line-height:1.75}
.oll b{color:var(--ink);font-weight:500}
/* 9-2 보고서 */
.rmeta{display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--faint);font-weight:400;letter-spacing:.02em;margin-bottom:4px}
.rep2{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.rep2 .sec:first-child{margin-top:0}
.kv2{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm);line-height:1.55}
.kv2>span{color:var(--muted);font-size:var(--fs-cap);padding-top:1px}
.kv2 .ans{margin-right:6px}
.rolet{display:grid;grid-template-columns:104px 76px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm);align-items:center;line-height:1.45}
.rolet.h{font-size:var(--fs-label);color:var(--faint);padding-top:0}
.rolet .own{margin:0;color:var(--ink);font-size:var(--fs-sm)}
.qq{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:7px 0;border-top:1px solid var(--line2);font-size:var(--fs-sm);line-height:1.5}
.qq i{font-style:normal;width:20px;height:20px;border-radius:6px;background:var(--key);color:#fff;font-family:var(--mono);font-size:var(--fs-label);display:flex;align-items:center;justify-content:center;margin-top:1px}
.qq small{display:block;font-size:var(--fs-label);color:var(--faint);margin-top:1px}
.vt3{display:grid;grid-template-columns:16px 1fr auto;gap:8px;font-size:var(--fs-sm);padding:4px 0}
.vt3 small{font-size:var(--fs-label);color:var(--faint)}
.vt3 b{font-family:var(--mono);font-size:var(--fs-cap)}
.p9grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
.p9main{display:flex;flex-direction:column;gap:12px;min-height:0}
.p9side{display:flex;flex-direction:column;gap:12px;min-height:0}
.p9side .sc2 p b{color:var(--ink);font-weight:500}
.sc2.me9{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}
.sc2.warn9{border-color:var(--key-300);box-shadow:inset 0 0 0 1px var(--key-300);background:var(--key-50)}
.p9top{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 18px;flex:none}
.p9top .l{font-size:var(--fs-cap);color:var(--faint);flex:none}
.p9top b{font-size:var(--fs-h3);flex:1;min-width:0}
.p9top .r{font-size:var(--fs-cap);color:var(--muted);display:flex;gap:10px;align-items:center;flex:none}
.ptab{overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}
.ph9,.pr9{display:grid;grid-template-columns:var(--cols);gap:16px;align-items:center;padding:0 20px}
.ph9{font-size:var(--fs-label);color:var(--faint);background:var(--soft);border-bottom:1px solid var(--line2);height:32px;flex:none}
.pg9{font-size:var(--fs-label);color:var(--muted);font-weight:700;padding:8px 20px 2px;flex:none}
.ptab.roomy .pr9{min-height:48px}
.ptab.roomy .pg9{padding:12px 20px 4px}
.pr9{min-height:36px;border-top:1px solid var(--line2);font-size:var(--fs-sm);flex:none}
.pg9+.pr9,.pg9+.sm9{border-top:none}
.pr9 .pn{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr9 .pn small{font-weight:400;color:var(--faint);font-size:var(--fs-cap);margin-left:8px}
.pr9 .pn .mk{margin-left:8px}
.pr9.out{background:var(--soft)}
.pr9.out .pn{color:var(--muted)}
.pr9.chg{background:var(--key-50);box-shadow:inset 3px 0 0 var(--key)}
.sm9{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2);flex:none}
.sm9>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:36px;padding:0 20px;font-size:var(--fs-sm)}
.sm9>div:nth-child(2n){border-left:1px solid var(--line2)}
.sm9>div:nth-child(n+3){border-top:1px solid var(--line2)}
.skl{font-size:var(--fs-cap);color:var(--muted)}
.av9{width:22px;height:22px;border-radius:50%;background:var(--key-100);color:var(--key-700);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;font-style:normal}
.who9{display:flex;align-items:center;gap:7px;white-space:nowrap}
.cand{display:flex;align-items:center;gap:6px;white-space:nowrap}
.pill9{font-size:var(--fs-label);border-radius:999px;padding:1px 8px;white-space:nowrap;border:1px solid var(--line);color:var(--muted);background:var(--panel);font-weight:500}
.pill9.k{color:var(--key-700);border-color:var(--key-200);background:var(--key-50)}
.pill9.w{color:var(--key-800);border-color:var(--key-300);background:var(--key-100)}
.pill9.solid{color:#fff;border-color:var(--key-700);background:var(--key-700)}
.q9{font-size:var(--fs-cap);color:var(--faint);white-space:nowrap}
.bad9{font-size:var(--fs-cap);color:var(--bad);white-space:nowrap}
.mine9{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);padding:3px 0}
.mine9 .pill9{min-width:58px;text-align:center}
.load9{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:none}
.lc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.lc.me{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}
.lc .n{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:700}
.lc .n small{font-weight:400;color:var(--faint);font-size:var(--fs-cap)}
.lc .n .pill9{margin-left:auto}
.lc .bar{height:6px;border-radius:99px;background:var(--line2);margin:8px 0 5px;overflow:hidden}
.lc .bar i{display:block;height:100%;border-radius:99px;background:var(--key-300)}
.lc.over{border-color:var(--key-300)}
.lc.over .bar i{background:var(--key-700)}
.lc .c{font-size:var(--fs-label);color:var(--muted)}
.sel9{display:flex;align-items:center;gap:7px;height:28px;border:1px solid var(--line);border-radius:8px;padding:0 9px 0 4px;background:var(--panel);font-size:var(--fs-sm);white-space:nowrap}
.sel9::after{content:'▾';margin-left:auto;color:var(--faint);font-size:10px;padding-left:6px}
.sel9.chg{border-color:var(--key);box-shadow:0 0 0 2px var(--key-100)}
.sug9{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-cap);color:var(--ink);background:var(--panel);border-radius:8px;padding:7px 10px;margin-top:8px;line-height:1.5}
.btn2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.chgl{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-cap);color:var(--ink);padding:3px 0;line-height:1.5}
.chgl .pill9{flex:none}
/* 9-2 질문 */
.qpanel{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 24px 16px}
.qtabs{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line2);flex:none}
.qtab{font-size:var(--fs-sm);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--muted);white-space:nowrap}
.qtab.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.qtabs .q9{margin-left:auto}
.qh{display:flex;gap:10px;align-items:baseline;font-size:var(--fs-body);font-weight:700;margin:14px 0 10px}
.qh i{font-style:normal;font-family:var(--mono);font-size:var(--fs-label);color:var(--key);font-weight:700}
.opts9{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt9{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:var(--fs-sm);background:var(--panel)}
.opt9.on{border-color:var(--key);box-shadow:inset 0 0 0 1px var(--key);font-weight:500}
.sub9{font-size:var(--fs-cap);color:var(--muted);margin:12px 0 6px}
.ctx9{font-size:var(--fs-cap);color:var(--muted);background:var(--soft);border-radius:8px;padding:8px 12px;margin-bottom:8px}
.ctx9 b{color:var(--ink);font-weight:500}
.ta9{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:var(--fs-sm);line-height:1.7;background:var(--panel)}
.ta9.focus{border:2px solid var(--key);box-shadow:0 0 0 3px var(--key-100);padding:9px 13px}
.qfoot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;align-items:center;gap:16px;flex:none}
/* 9-5 보고서 */
.rep5{display:grid;grid-template-columns:1.15fr 1fr .9fr;flex:none}
.rep5>div{padding:14px 20px}
.rep5>div+div{border-left:1px solid var(--line2)}
.rep5 h6,.wf h6{margin:0 0 6px;font-size:var(--fs-sm);font-weight:700}
.kv5{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:5px 0;font-size:var(--fs-cap);line-height:1.5;border-top:1px solid var(--line2)}
.kv5:first-of-type{border-top:none}
.kv5>span{color:var(--muted)}
.kv5 b{font-weight:500}
.vt5{display:grid;grid-template-columns:14px 1fr auto;gap:8px;font-size:var(--fs-cap);padding:4px 0;align-items:baseline}
.vt5 i{font-style:normal;font-family:var(--mono);color:var(--faint);font-size:var(--fs-label)}
.vt5 small{color:var(--faint);font-size:var(--fs-label);margin-left:4px}
.vt5 b{font-family:var(--mono);font-size:var(--fs-label)}
.wf{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 20px 12px}
.wf .wh{display:flex;align-items:baseline;gap:10px;flex:none}
.wf .wh small{font-size:var(--fs-cap);color:var(--faint)}
.wcols{display:grid;grid-template-columns:repeat(4,1fr);margin-top:10px;flex:1;min-height:0}
.ws{padding:0 14px;display:flex;flex-direction:column}
.ws:first-child{padding-left:0}
.ws:last-child{padding-right:0}
.ws+.ws{border-left:1px solid var(--line2)}
.wsh{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;height:24px}
.wsh .num{width:20px;height:20px;font-size:var(--fs-label)}
.wsh .pill9{margin-left:auto}
.wmk{font-size:var(--fs-cap);color:var(--muted);margin:4px 0 6px;line-height:1.45;min-height:34px}
.wmk span{color:var(--faint);margin-right:4px}
.wp{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--line2)}
.wp b{font-size:var(--fs-cap);font-weight:700;display:flex;align-items:center;gap:6px}
.wp p{font-size:var(--fs-cap);color:var(--muted);line-height:1.4;margin:1px 0 0}
.lead9{font-size:var(--fs-label);color:var(--key-700);font-weight:500}
.wpass{margin-top:auto;min-height:40px;font-size:var(--fs-label);color:var(--muted);padding-top:6px;border-top:1px dashed var(--line);line-height:1.45}
.wpass span{color:var(--faint);margin-right:4px}
.wfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line2);font-size:var(--fs-cap);color:var(--muted);flex:none}
.wfoot b{color:var(--ink);font-weight:500}
.desk{flex:1;min-height:0;background:#EDEEF5;border-radius:16px;display:flex;justify-content:center;align-items:center;gap:32px}
.a4col{display:flex;flex-direction:column;align-items:center;gap:8px}
.a4wrap{width:381px;height:539px;overflow:hidden;position:relative;background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(30,27,75,.06),0 10px 28px rgba(30,27,75,.14);cursor:zoom-in;flex:none}
.a4wrap .a4{transform:scale(.48);transform-origin:0 0}
.a4wrap .zhint{position:absolute;right:10px;bottom:10px;font-size:var(--fs-label);color:var(--muted);background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:999px;padding:3px 10px;display:flex;gap:5px;align-items:center}
.a4lab{font-size:var(--fs-cap);color:var(--muted)}
.a4{width:794px;height:1123px;background:#fff;padding:56px 64px 40px;display:flex;flex-direction:column;color:var(--ink);font-size:12.5px;line-height:1.6;text-align:left}
.a4 .pp-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.04em}
.a4 .pp-logo{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:900;color:var(--key);font-size:12px;letter-spacing:-.01em}
.a4 .pp-t{font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.3;margin:16px 0 4px}
.a4 .pp-sub{font-size:13.5px;color:var(--muted)}
.a4 .pp-meta{display:flex;gap:20px;font-size:11px;color:var(--muted);margin-top:12px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.a4 .pp-meta b{color:var(--ink);font-weight:500;margin-left:5px}
.a4 .pp-sec{margin-top:20px}
.a4 .pp-h{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:700;margin-bottom:6px}
.a4 .pp-h i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--key)}
.a4 .pp-h small{font-size:11px;color:var(--faint);font-weight:400}
.a4 .pp-kv{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:6px 0;border-top:1px solid var(--line2)}
.a4 .pp-kv>span{color:var(--muted)}
.a4 .pp-kv b{font-weight:700}
.a4 .pp-tag{display:inline-block;font-size:10.5px;border:1px solid var(--line);border-radius:999px;padding:0 7px;margin-right:6px;color:var(--ink)}
.a4 .pp-vote{display:grid;grid-template-columns:18px minmax(0,1fr) 140px 32px;gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line2)}
.a4 .pp-vote i{font-style:normal;font-family:var(--mono);color:var(--muted);font-size:11px}
.a4 .pp-vote small{color:var(--faint);font-size:11px;margin-left:6px}
.a4 .pp-vote b{font-family:var(--mono);font-size:11px;text-align:right}
.a4 .pp-bar{height:5px;background:var(--line2);border-radius:9px;overflow:hidden}
.a4 .pp-bar s{display:block;height:100%;background:var(--key-300);border-radius:9px}
.a4 .pp-vote.top .pp-bar s{background:var(--key)}
.a4 .pp-parts{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.a4 .pp-grp{font-size:11px;color:var(--muted);font-weight:700;margin:6px 0 2px}
.a4 .pp-part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 0;border-top:1px solid var(--line2)}
.a4 .pp-part.out{color:var(--muted)}
.a4 .pp-who{display:flex;align-items:center;gap:6px;white-space:nowrap}
.a4 .pp-note{font-size:11px;color:var(--muted);margin-top:14px;line-height:1.6}
.a4 .pp-foot{margin-top:auto;display:flex;justify-content:space-between;font-size:10px;color:var(--faint);padding-top:10px;border-top:1px solid var(--line2);font-family:var(--mono)}
.a4 .pp-stage{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line2)}
.a4 .pp-sn{width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--muted);font-family:var(--mono);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center}
.a4 .pp-sn.now{background:var(--key);color:#fff}
.a4 .pp-st{font-size:14px;font-weight:700;display:flex;gap:8px;align-items:center;line-height:24px}
.a4 .pp-st .pill9{font-size:10px}
.a4 .pp-mk{font-size:12px;color:var(--ink);margin:0 0 7px}
.a4 .pp-mk span,.a4 .pp-pass span{color:var(--faint);margin-right:6px}
.a4 .pp-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.a4 .pp-card{display:grid;grid-template-columns:22px 1fr;gap:8px;background:var(--soft);border-radius:8px;padding:7px 10px}
.a4 .pp-card b{font-size:12px;display:flex;gap:6px;align-items:center;line-height:1.4}
.a4 .pp-card b small{font-size:10.5px;color:var(--key-700);font-weight:500}
.a4 .pp-card p{margin:1px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}
.a4 .pp-pass{font-size:11px;color:var(--muted);margin-top:6px}
.a4 .pp-always{display:flex;gap:16px;font-size:12px;border:1px dashed var(--line);border-radius:8px;padding:8px 12px;margin-top:4px}
.a4 .pp-always span{color:var(--faint)}
/* 크게 보기 팝업 */
.zoomov{position:absolute;inset:0;z-index:50;background:rgba(27,27,47,.86);display:flex;flex-direction:column}
.zoomov.fixed{position:fixed}
.zbar{flex:none;height:60px;background:#1B1B2F;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:#fff;font-size:var(--fs-sm)}
.zbar .zl{display:flex;align-items:center;gap:12px}
.zbar .zl small{font-family:var(--mono);font-size:var(--fs-label);color:rgba(255,255,255,.7)}
.zbar .zr{display:flex;gap:8px}
.zscroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:24px;padding:0 0 40px}
.zoomov:not(.fixed) .zscroll{overflow:hidden}
.zpage{flex:none;width:794px;height:1123px;box-shadow:0 20px 60px rgba(0,0,0,.35);border-radius:3px;overflow:hidden}
.zpage .a4{transform:none}
.zsb{position:absolute;right:10px;top:72px;width:6px;height:260px;border-radius:9px;background:rgba(255,255,255,.45)}
.tdim{position:absolute;inset:0;background:rgba(12,12,16,.42);display:flex;align-items:center;justify-content:center;z-index:5}
.tdlg{width:560px;background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28);padding:28px 30px 24px;color:#111}
.tdlg h3{font-size:var(--fs-h2);font-weight:700;margin:0 0 6px}
.tdlg p{font-size:var(--fs-sm);color:var(--muted);margin:0 0 6px}
.tdlg .tdf{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.tdlg .tdk{display:flex;gap:10px;align-items:center;background:var(--soft);border-radius:12px;padding:10px 14px;margin:14px 0 4px;font-size:var(--fs-sm)}
.hostbar{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:999px;padding:8px 10px 8px 20px;box-shadow:0 12px 32px rgba(0,0,0,.28);z-index:4;font-size:var(--fs-sm);white-space:nowrap}
.hostbar b{font-weight:700}
.hostbar .hb-q{color:rgba(255,255,255,.7)}
.tpend{flex:1;display:flex;align-items:center;justify-content:center}
.tpend .panel{max-width:560px;text-align:center}
.tpend .bar{height:8px;border-radius:99px;background:var(--line2);overflow:hidden;margin:14px auto 8px;max-width:360px}
.tpend .bar i{display:block;height:100%;background:var(--key);border-radius:99px}