/* 41-onboarding.css — 처음 설정(#/welcome) 화면. 프로토타입 public/onboarding-proto/v2.html 을 v2 셸 안으로 옮긴 것(#1813).
   토큰은 01-base 것만 쓴다. 클래스는 전부 ob- 접두 — 전역 .chip/.btn/.card 와 겹치지 않게. 사이드바는 실제 것(40-v2.css). */
.ob-root{ --ghost:#D5DCE8; --blue-soft:#EEF5FF; --hover:#F6FAFF; --card:#FFFFFF; --shadow:0 1px 2px rgba(21,35,59,.05), 0 4px 14px rgba(21,35,59,.07);
  display:flex; flex-direction:column; flex:1; min-height:0; height:100%; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; position:relative }
.ob-root *{box-sizing:border-box}
.ob-root button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.ob-root input{font:inherit; color:inherit}
.ob-root b{font-weight:600}
/* ═══ 노션을 참조한 온보딩 v2 — 3막 구조 (#1813, 2026-08-24)
   막1 이름만(민낯) · 막2 왼쪽 사이드바가 유령으로 서 있고 답할수록 실체가 됨 · 막3 컨설팅이 곧 채팅.
   문구는 기존 프로토(교정 31건 반영본)에서 그대로 가져왔다 — 여기서 새로 쓴 문구는 주석에 [새문구] 표시. */


/* ── 오른쪽 본문 ─────────────────────────────────────────────── */
.ob-main{flex:1; display:flex; flex-direction:column; min-width:0; position:relative}
.ob-crumb{display:flex; align-items:center; gap:6px; padding:10px 16px; font-size:13px; color:var(--ink-sub); border-bottom:1px solid transparent; min-height:41px}
.ob-root.ob-stage-name .ob-crumb{visibility:hidden}
.ob-crumb .ob-lm{width:18px;height:18px;font-size:9px}
.ob-crumb .ob-sep{color:var(--ghost)}

/* 막1·막2 — 가운데 질문 기둥 (노션 p1~p4 참조) */
.ob-qwrap{flex:1; overflow-y:auto; display:flex; justify-content:center}
.ob-qcol{width:min(560px, 92%); padding:8vh 0 60px; animation:rise .45s ease-out}
.ob-qcol.ob-wide{width:min(820px, 94%)}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.ob-q-ic{width:40px; height:40px; border-radius:50%; background:var(--bg-success); border:1px solid #CDEFE3; display:grid; place-items:center; color:var(--mint-deep); font-size:15px; font-weight:800; margin-bottom:14px}
.ob-q-prog{display:flex; gap:4px; margin:0 0 22px; width:96px}
.ob-q-prog i{flex:1; height:3px; border-radius:2px; background:var(--ghost)}
.ob-q-prog i.ob-on{background:var(--ink)}
.ob-q-lead{font-size:14px; color:var(--ink-sub); margin-bottom:8px}
.ob-q-title{font-size:26px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px}
.ob-q-help{font-size:14px; color:var(--ink-sub); margin-bottom:26px}
/* 노션식 선택 카드 */
.ob-opt-cards{display:flex; flex-direction:column; gap:10px}
.ob-opt-card{display:flex; align-items:center; gap:12px; text-align:left; border:1px solid var(--line); border-radius:10px; padding:13px 15px; background:var(--card); transition:border-color .12s, box-shadow .12s}
.ob-opt-card:hover{border-color:#cfcecb; box-shadow:var(--shadow)}
.ob-opt-card.ob-on{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
.ob-opt-card .ob-oc-ic{width:22px; display:grid; place-items:center; flex:0 0 22px}
.ob-blogo{width:17px; height:17px; flex:none; display:block}
.ob-opt-cards .ob-oc-ic .ob-blogo{width:20px; height:20px}
.ob-oc-st{margin-left:auto; display:grid; place-items:center; width:16px; flex:0 0 16px}
.ob-opt-card .ob-oc-t{font-weight:600; font-size:14.5px}
.ob-opt-card .ob-oc-d{display:block; font-size:12.5px; color:var(--muted); margin-top:1px}
.ob-opt-card .ob-oc-chk{margin-left:auto; width:16px; height:16px; border-radius:4px; border:1.5px solid var(--ghost); flex:0 0 16px; display:grid; place-items:center; color:#fff; font-size:10px}
.ob-opt-card.ob-on .ob-oc-chk{background:var(--blue); border-color:var(--blue)}
.ob-opt-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; margin-bottom:10px}
.ob-opt-grid .ob-opt-card{padding:9px 11px; gap:9px}
.ob-opt-grid .ob-opt-card .ob-oc-t{font-size:13.5px}
.ob-opt-group{margin:2px 0 4px; font-size:11.5px; font-weight:600; color:var(--muted)}
.ob-q-write{display:flex; gap:8px; margin-top:12px}
.ob-q-write input{flex:1; border:1px solid var(--line); border-radius:8px; padding:9px 12px; outline:none}
.ob-q-write input:focus{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
.ob-btn{display:block; width:100%; text-align:center; border-radius:8px; padding:10px 14px; font-weight:600; font-size:14px; margin-top:18px}
.ob-btn-pri{background:var(--blue); color:#fff}
.ob-btn-pri:hover{background:#1b74cc}
.ob-btn-pri:disabled{background:var(--blue-soft); color:#9cc7ec; cursor:default}
.ob-btn-sub{background:#f1f1ef; color:var(--ink-sub); margin-top:8px}
.ob-btn-sub:hover{background:#e9e9e6}
.ob-btn-inline{width:auto; display:inline-block; padding:8px 14px}
.ob-q-skip{display:block; margin:16px auto 0; font-size:13px; color:var(--muted)}
.ob-q-skip:hover{color:var(--ink-sub); text-decoration:underline}
.ob-q-fine{margin-top:18px; font-size:12px; color:var(--muted); text-align:center}
.ob-benefit{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-sub); padding:3px 0}
.ob-benefit::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--muted-2); flex:none}
.ob-benefits{margin:0 0 18px}

/* 막3 — 채팅 (노션 p5·p6 참조) */
.ob-chat{flex:1; overflow-y:auto; display:flex; justify-content:center}
.ob-thread{width:min(680px,94%); padding:26px 0 20px; display:flex; flex-direction:column; gap:14px}
.ob-msg{display:flex; gap:10px; animation:rise .35s ease-out}
.ob-msg .ob-ava{width:26px; height:26px; border-radius:50%; background:var(--bg-success); border:1px solid #CDEFE3; flex:0 0 26px; display:grid; place-items:center; color:var(--mint-deep); font-size:11px; font-weight:800; margin-top:2px}
.ob-msg .ob-body{max-width:86%; font-size:14.5px; line-height:1.65}
.ob-msg .ob-body p{margin-bottom:6px}
.ob-msg .ob-body p:last-child{margin-bottom:0}
.ob-msg.ob-user{justify-content:flex-end}
.ob-msg.ob-user .ob-body{background:#f1f1ef; border-radius:14px; padding:8px 14px; font-size:14px}
.ob-chips{display:flex; flex-wrap:wrap; gap:8px; padding-left:36px; animation:rise .35s ease-out}
.ob-chip{border:1px solid var(--line); border-radius:100px; padding:7px 14px; font-size:13.5px; font-weight:500; background:var(--card)}
.ob-chip:hover{background:var(--hover); border-color:#cfcecb}
.ob-chip.ob-cta{background:var(--blue-soft); color:var(--blue); border-color:transparent; font-weight:600}
.ob-chip.ob-cta:hover{background:#d8ebfb}
.ob-chip.ob-ghost{color:var(--ink-sub)}
.ob-tags{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px}
.ob-tag{border:1px solid var(--line); border-radius:6px; padding:3px 9px; font-size:12.5px; color:var(--ink-sub); background:var(--canvas)}
.ob-tag b{color:var(--ink); font-variant-numeric:tabular-nums}
.ob-excard{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:8px 0 0; cursor:pointer; transition:border-color .12s, box-shadow .12s; background:var(--card)}
.ob-excard:hover{border-color:#cfcecb; box-shadow:var(--shadow)}
.ob-excard .ob-xt{font-size:14px; font-weight:600; margin-bottom:5px}
.ob-excard .ob-xd{font-size:12.5px; color:var(--muted)}
.ob-excard .ob-xd b{color:var(--amber); font-weight:600}
.ob-fine{font-size:12.5px; color:var(--muted); padding-left:36px}
.ob-readline{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-sub)}
.ob-readbar{flex:0 0 120px; height:4px; border-radius:2px; background:var(--line-net); overflow:hidden}
.ob-readbar i{display:block; height:100%; background:var(--blue); width:0; transition:width .25s linear}

/* 채팅 입력 (노션 'Describe your own' 참조) */
.ob-composer{padding:12px 0 18px; display:flex; justify-content:center; border-top:1px solid transparent}
.ob-composer-in{width:min(680px,94%); border:1.5px solid var(--blue); border-radius:14px; padding:10px 14px 8px; box-shadow:0 4px 18px rgba(35,131,226,.08)}
.ob-composer-in input{width:100%; border:0; outline:none; font-size:14.5px; padding:2px 0 8px; background:none}
.ob-composer-row{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px}
.ob-composer-row .ob-send{margin-left:auto; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:12px}
.ob-composer-row .ob-send:disabled{background:var(--ghost); cursor:default}
.ob-root:not(.ob-stage-chat) .ob-composer{display:none}
.ob-chat, .ob-composer{background:var(--bg)}
.ob-root:not(.ob-stage-chat) .ob-chat{display:none}
.ob-root.ob-stage-chat .ob-qwrap{display:none}

.ob-toast{position:fixed; left:50%; bottom:70px; transform:translateX(-50%); background:var(--ink); color:#fff; border-radius:100px; padding:8px 18px; font-size:13px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:60}
.ob-toast.ob-on{opacity:1}

/* 막1(이름) — 노션 p1 처럼 아무것도 없는 가운데 카드. 셸(사이드바·손잡이·탭 줄)을 잠깐 숨긴다. */
#v2-root.ob-bare { grid-template-columns: 0 0 minmax(0, 1fr) 0 0; }
#v2-root.ob-bare .v2-side, #v2-root.ob-bare > .v2-split-x, #v2-root.ob-bare .v2-tabs, #v2-root.ob-bare .v2-tl-btn { display: none; }