/* OFFICIO common v0.4 — 피라미드 v1.1 기준 · 2026-07-09 야간 시공 */
:root{--paper:#dde8ee;--sheet:#fbfcfd;--seat:#eef3f6;--ink:#1d1b17;--ink-soft:#5a6870;
--line:#8fa2ad;--line-faint:#c2ced6;--sans:'Noto Sans KR',sans-serif;
--serif:'Noto Serif KR',serif;--latin:'Cormorant Garamond',serif;--seal:#c73e2b}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
body{padding-bottom:110px}
.shell{max-width:560px;margin:0 auto;padding:0 24px}
header{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0 0}
.wordmark{font-family:var(--latin);font-weight:600;font-size:20px;letter-spacing:4px;color:var(--ink);text-decoration:none}
.langs{font-size:11.5px;color:var(--ink-soft);letter-spacing:1.5px}
.langs b{font-weight:700;color:var(--ink)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:4px;color:var(--ink-soft)}
.hero{padding:52px 0 44px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.38;letter-spacing:-.5px}
.hero .sub{font-size:14px;color:var(--ink-soft);margin-top:14px;line-height:1.7}
.three{margin-top:20px;padding-left:18px;border-left:2.5px solid var(--ink)}
.three p{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.75}
.three p+p{margin-top:10px}
.three p:last-child{font-size:15.5px;color:var(--ink-soft);margin-top:14px}
.cap{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:10px}
.cap h2{font-family:var(--serif);font-weight:600;font-size:19px}
.cap span{font-size:11px;letter-spacing:2px;color:var(--ink-soft)}
.item{display:flex;align-items:center;gap:16px;padding:20px 2px;border-bottom:.5px solid var(--line);text-decoration:none;color:var(--ink)}
.item .no{font-family:var(--latin);font-size:15px;color:var(--ink-soft);width:22px;flex-shrink:0}
.item .body{flex:1;min-width:0}
.item h3{font-family:var(--serif);font-weight:500;font-size:18.5px;line-height:1.4}
.item .official{font-size:12px;color:var(--ink-soft);margin-top:3px}
.item .arrow{font-family:var(--latin);font-size:22px;flex-shrink:0}
.item:active{background:rgba(255,255,255,.45)}
.item.first h3{font-weight:600;font-size:21px}
.badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--sheet);background:var(--ink);padding:4px 9px 3px;margin-bottom:8px}
.bigdoor{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:20px 16px;border:.5px solid var(--line);background:var(--sheet);margin-top:10px;cursor:pointer;text-decoration:none;color:var(--ink)}
.bigdoor h3{font-family:var(--serif);font-weight:600;font-size:19px;width:100%}
.bigdoor p{font-size:12.5px;color:var(--ink-soft)}
.bigdoor .arrow{margin-left:auto;font-family:var(--latin);font-size:20px}
.bigdoor:active{background:var(--paper)}
.step{padding:24px 0 6px}
.hidden{display:none}
.choice{display:flex;align-items:center;gap:12px;padding:15px 2px;border-bottom:.5px solid var(--line);cursor:pointer}
.choice .box{width:16px;height:16px;border:1.2px solid var(--ink-soft);flex-shrink:0;position:relative}
.choice.on .box{border-color:var(--ink)}
.choice.on .box::after{content:"";position:absolute;inset:3px;background:var(--ink)}
.choice .t{font-size:15px}
.choice .s{font-size:11.5px;color:var(--ink-soft);margin-left:auto}
.verdict{margin-top:20px;border:1.5px solid var(--ink);padding:18px 18px 20px}
.verdict .vcap{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--ink-soft);margin-bottom:10px}
.verdict p{font-family:var(--serif);font-size:16px;line-height:1.8}
.verdict em{font-style:normal;border-bottom:1px solid var(--ink)}
.vsrc{font-family:var(--sans)!important;font-size:11px!important;color:var(--ink-soft);margin-top:10px;line-height:1.6!important}
.bundle{margin-top:22px}
.bgroup{padding:14px 2px;border-bottom:.5px solid var(--line)}
.bgroup .where{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink-soft)}
.bgroup ul{list-style:none;margin-top:6px}
.bgroup li{font-family:var(--serif);font-size:15.5px;line-height:1.75;padding-left:14px;position:relative}
.bgroup li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1.5px;background:var(--ink)}
.bgroup .tip{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.7}
.bgroup .tip b{color:var(--ink);font-weight:500}
.btn{font-family:var(--sans);font-size:14.5px;cursor:pointer;padding:13px 0;text-align:center;border:none}
.btn-ink{background:var(--ink);border:1px solid var(--ink);color:var(--sheet);font-weight:500}
.btn-line{background:none;border:.5px solid var(--line);color:var(--ink-soft)}
.btn:active{opacity:.85}
.waitline{margin-top:16px}
.waitline label{display:block;font-size:13px;font-weight:500;margin-bottom:7px}
.wrow{display:flex;gap:9px}
.wrow input{flex:1;font-family:var(--sans);font-size:15px;background:var(--sheet);border:.5px solid var(--line);padding:11px 13px;color:var(--ink);outline:none;min-width:0}
.wrow input:focus{border-color:var(--ink)}
.wnote{font-size:12px;color:var(--ink-soft);margin-top:8px;min-height:18px}
.trust{border-top:2px solid var(--ink);margin-top:6px;padding:20px 0 30px}
.tcap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tcap h2{font-family:var(--serif);font-weight:600;font-size:18px}
.tcap span{font-size:11.5px;letter-spacing:1px;color:var(--ink-soft)}
.qa{display:block;text-decoration:none;color:var(--ink);padding:14px 2px;border-bottom:.5px solid var(--line)}
.qa .q{font-family:var(--serif);font-weight:500;font-size:15px;line-height:1.5}
.qa .a{font-size:13px;color:var(--ink-soft);line-height:1.7;margin-top:5px}
.qa .src{font-size:10.5px;color:var(--line);margin-left:6px}
.ask{font-size:12.5px;color:var(--ink-soft);margin-top:12px}
.review{padding:16px 2px;border-bottom:.5px solid var(--line)}
.review .rq{font-family:var(--serif);font-size:14.5px;line-height:1.8}
.review .rm{font-size:12px;color:var(--ink-soft);margin-top:8px}
.review-empty{font-family:var(--serif);font-size:14px;line-height:1.8;color:var(--ink-soft);border:.5px dashed var(--line);padding:18px;text-align:center}
.rnote{font-size:11.5px;color:var(--ink-soft);margin-top:12px}
footer.notice{border-top:.5px solid var(--line);margin-top:8px;padding:22px 0 44px;font-size:11px;line-height:1.75;color:var(--ink-soft)}
footer.notice .brand{font-family:var(--latin);font-weight:600;font-size:13px;letter-spacing:3px;color:var(--ink);margin-bottom:8px}
footer.notice .links{margin-top:8px}
footer.notice a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
footer.notice .fine{margin-top:8px;color:var(--line)}
/* ── DONE 밴드: 한 몸, 세 자세 ── */
#done{position:fixed;left:0;right:0;bottom:0;background:var(--seat);border-top:2px solid var(--ink);transition:height .28s ease;z-index:50}
#done .inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;height:100%}
#done .grip{text-align:center;padding:6px 0 0}
#done .grip span{display:inline-block;width:34px;height:3px;background:var(--line)}
#done .plate{display:flex;align-items:center;gap:10px;padding:6px 24px 9px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ink);flex-shrink:0;animation:heartbeat 1.8s ease-in-out infinite}
@keyframes heartbeat{0%{opacity:.35;transform:scale(1);background:var(--ink)}8%{opacity:1;transform:scale(1.28);background:var(--ink)}16%{opacity:.5;transform:scale(1);background:var(--ink)}24%{opacity:1;transform:scale(1.22);background:var(--seal)}36%{opacity:.4;transform:scale(1);background:var(--ink)}100%{opacity:.35;transform:scale(1);background:var(--ink)}}
.name{font-size:13px;font-weight:700;letter-spacing:4.5px}
.anchor{font-size:11.5px;color:var(--ink-soft);letter-spacing:.5px}
.uecho{margin-left:auto;max-width:42%;font-size:12px;color:var(--ink);background:var(--sheet);border:.5px solid var(--line);padding:3px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uecho:empty{display:none}
.toggle{margin-left:auto;font-size:15px;color:var(--ink-soft);line-height:1}
.uecho:not(:empty)+.toggle{margin-left:8px}
#done .speech{font-family:var(--serif);font-size:15px;line-height:1.7;padding:0 24px 14px;min-height:26px}
.caret{display:inline-block;width:2px;height:16px;background:var(--ink);vertical-align:-2px;margin-left:1px}
#done.risen{height:72vh}
#done.risen .speech{display:none}
#done .room{display:none;flex:1;flex-direction:column;overflow:hidden;border-top:.5px solid var(--line-faint)}
#done.risen .room{display:flex}
.msgs{flex:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.msg-d{font-family:var(--serif);font-size:15px;line-height:1.7;border-left:2.5px solid var(--ink);padding-left:13px;max-width:90%}
.msg-u{align-self:flex-end;background:var(--sheet);border:.5px solid var(--line);padding:10px 14px;font-size:14px;max-width:80%}
.composer{display:flex;gap:9px;padding:13px 24px 18px;border-top:.5px solid var(--line-faint)}
.composer input{flex:1;font-family:var(--sans);font-size:14.5px;background:var(--sheet);border:.5px solid var(--line);padding:11px 13px;color:var(--ink);outline:none;min-width:0}
.composer input:focus{border-color:var(--ink)}
.composer button{font-family:var(--sans);font-weight:500;font-size:14px;background:var(--ink);border:1px solid var(--ink);color:var(--sheet);padding:11px 17px;cursor:pointer}
/* ── 여정 모드 40/20/40 ── */
#jmode{position:fixed;inset:0;background:var(--paper);z-index:100;display:none;flex-direction:column}
#jmode.on{display:flex}
.jz-doc{height:40dvh;overflow:hidden;border-bottom:.5px solid var(--line);position:relative}
.jz-close{position:absolute;top:10px;right:12px;z-index:5;font-size:12px;background:var(--paper);border:.5px solid var(--ink);color:var(--ink);padding:5px 10px;cursor:pointer}
.docviewer{height:100%;overflow:auto;background:#f2f4f5;position:relative;scroll-behavior:smooth}
.zoominner{position:relative;width:100%}
.docviewer img{display:block;width:100%;filter:grayscale(1)}
.hl{position:absolute;border:2px solid var(--ink);pointer-events:none;transition:top .3s,height .3s;left:2%;width:96%;opacity:0}
.jz-done{height:20dvh;border-top:2px solid var(--ink);background:var(--seat);padding:10px 20px;overflow:hidden}
.jz-done .plate2{display:flex;align-items:center;gap:9px}
.jz-done .speech2{font-family:var(--serif);font-size:15px;line-height:1.65;margin-top:7px}
.jz-input{height:40dvh;background:var(--paper);border-top:.5px solid var(--line);padding:14px 20px;display:flex;flex-direction:column}
.jz-input .qline{font-size:12.5px;font-weight:500;color:var(--ink-soft);margin-bottom:8px}
.jz-input .irow{display:flex;gap:9px}
.jz-input input{flex:1;font-family:var(--sans);font-size:16px;background:var(--sheet);border:.5px solid var(--line);padding:12px 13px;color:var(--ink);outline:none;min-width:0}
.jz-input input:focus{border-color:var(--ink)}
.jz-input button{font-family:var(--sans);font-weight:500;font-size:14px;background:var(--ink);border:1px solid var(--ink);color:var(--sheet);padding:12px 18px;cursor:pointer}
/* 서식 무대 */
.stage-form{margin-top:22px;border-top:2px solid var(--ink);padding-bottom:36px}
.stage-form fieldset{border:none;padding:20px 0 4px}
.stage-form fieldset+fieldset{border-top:.5px solid var(--line)}
.stage-form legend{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--ink-soft);width:100%;margin-bottom:14px}  /* 2026-07-15 세로낙하 수정: float:left 제거(후속 .f 0폭 붕괴 원인) */
.f{margin-bottom:18px}
.f label{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:500;margin-bottom:3px}
.opt{font-size:10.5px;font-weight:400;color:var(--ink-soft);border:.5px solid var(--line-faint);padding:1px 6px}
.f input{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:none;border:none;border-bottom:.5px solid var(--line);padding:7px 1px;outline:none}
.f input:focus{border-bottom:1.5px solid var(--ink)}
.f input.filled{border-bottom:1.5px solid var(--ink)}
.f .ok{font-size:12px;color:var(--ink);margin-left:6px;opacity:0;transition:opacity .3s}
.f .ok.on{opacity:1}
.row2{display:flex;gap:18px}
.row2 .f{flex:1;min-width:0}
@media (prefers-reduced-motion: reduce){.dot{animation:none;opacity:1}#done,#jmode{transition:none}}
@media (max-width:400px){.hero h1{font-size:29px}.three p{font-size:17.5px}}

/* 본글씨 개점 원칙 (2026-07-15) — 오픈 전 갈래/카드 흐림+비활성. opacity 토큰만, 구조 불변 */
.soon{opacity:.42;pointer-events:none}

/* Stage Standard v1 · S5 (2026-07-15) — 라이브 경로색 토큰 신설(하드코딩 #0f766e 매핑) */
:root{--go:#0f766e}
/* Stage Standard v1 · S3/S4 (2026-07-15) — 타자 폐지 페이드 + 여정 히스토리 G배지 */
@keyframes doneFadeIn{from{opacity:.35}to{opacity:1}}
.done-fade{animation:doneFadeIn .3s ease}
.msgs .g-mark{position:relative;padding-left:15px}
.msgs .g-mark::before{content:"●";position:absolute;left:2px;top:.45em;font-size:8px;color:var(--seal)}

/* S4b 지난 대화 버튼 (2026-07-15) — 토큰만, 핸들줄 텍스트 버튼 */
.histbtn{font-family:var(--sans);font-size:11px;color:var(--ink-soft);background:transparent;border:.5px solid var(--line);border-radius:3px;padding:2px 8px;margin-left:8px;cursor:pointer;white-space:nowrap}
.histbtn:hover{color:var(--ink);border-color:var(--ink)}

/* 엣지9 게이트 렌더 (2026-07-15) — 약관 요지+숫자 챌린지. 토큰만 */
.jw-gate{padding:2px 24px 14px;display:flex;flex-direction:column;gap:8px}
.jw-terms{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.jw-terms-link{font-size:12px;color:var(--ink);text-decoration:underline}
.jw-challenge{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:2px;margin:4px 0}

/* TX-008 리드 버튼 (2026-07-15) — 죽은 끝 해소, 자유입력과 병행 */
.jw-lead{display:flex;flex-direction:column;gap:6px;padding:2px 24px 14px}

/* A-3 S4b 히스토리 헤더 (2026-07-15) — 과거를 봐도 현재 좌표가 남는다 */
.room-head{font-size:12px;font-weight:700;color:var(--seal);padding:8px 24px 4px;letter-spacing:.02em}