/* 노랑비서 공통 디자인 (11/12) — 모든 페이지가 이 한 장을 씀. 토큰(색·모서리·글씨)은 홈페이지와 같게.
   원칙: 흰 바탕 + 파랑 하나 · 모서리 20/14 · 글씨 본문 17↑·작은 글 14↑ · 버튼 44↑ · 설명은 짧게 */
:root{--bg:#fff;--soft:#f4f6f8;--card:#fff;--text:#191f28;--sub:#4e5968;--mute:#6b7684;--line:#e5e8eb;--brand:#1f5eff;--brand-d:#1748cc;--brand2:#e8efff;--on:#fff;--ok:#0e8f63;--warn:#d93a3a;--kakao:#ffc93c;--chat:#b2c7d9;--r:20px;--ease:cubic-bezier(.22,1,.36,1)}
@media(prefers-color-scheme:dark){:root{--bg:#0f1218;--soft:#171b23;--card:#1b2029;--text:#f2f4f6;--sub:#b0b8c1;--mute:#8b95a1;--line:#2b313b;--brand:#6b9bff;--brand-d:#8db0ff;--brand2:#1c2a4a;--on:#0f1218;--ok:#3fd69a;--warn:#ff7b7b;--chat:#2a3443}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.7 Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;-webkit-text-size-adjust:100%;word-break:keep-all}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}.narrow{max-width:640px}
main.kb{max-width:640px;margin:0 auto;padding:28px 20px 80px}
h1{font-size:clamp(26px,5vw,34px);line-height:1.3;letter-spacing:-.03em;margin:6px 0 10px;font-weight:800}
h2{font-size:20px;margin:0 0 10px;font-weight:800;letter-spacing:-.02em}
h3{font-size:18px;margin:0 0 6px;font-weight:700}
p{margin:0 0 12px}.sub{color:var(--sub)}.note{font-size:15px;color:var(--mute);line-height:1.6}
.eyebrow{display:block;font-weight:700;font-size:15px;color:var(--brand);margin-bottom:8px}
em{font-style:normal;color:var(--brand)}
/* 버튼·입력 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:14px;border:0;background:var(--brand);color:var(--on);font-family:inherit;font-weight:700;font-size:18px;line-height:1.2;cursor:pointer;text-decoration:none;gap:8px;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--brand-d)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:var(--soft);color:var(--text)}.btn.ghost:hover{background:var(--line)}.btn.sm{min-height:44px;font-size:16px;padding:0 16px;border-radius:12px}.btn.block{display:flex;width:100%}
.btn+.btn{margin-top:10px}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
label.fl,.fl{display:block;font-weight:700;font-size:16px;margin:14px 0 6px}
input[type=text],input[type=tel],input[type=time],select,textarea{width:100%;min-height:52px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:inherit;font-size:17px;padding:0 14px}
textarea{padding:12px 14px;min-height:140px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.ag{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--sub);padding:8px 0}.ag input{width:24px;height:24px;margin-top:2px;flex:none;accent-color:var(--brand)}
/* 카드·칩·목록 */
.card{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:16px 0}
.card.plain{background:var(--card)}
.box{background:var(--soft);border-radius:16px;padding:16px 18px;margin:14px 0}.box b{font-size:28px;letter-spacing:-.02em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.chip{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:inherit;font-weight:600;font-size:16px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--bg)}
.list .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}.list .row:last-child{border:0}.list .row b{display:block}.list .row small{color:var(--sub);font-size:15px}
.row button{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:inherit;font-size:16px;cursor:pointer}
ul.ck{list-style:none;padding:0;margin:14px 0}ul.ck li{padding:6px 0 6px 30px;position:relative}ul.ck li:before{content:"";position:absolute;left:2px;top:14px;width:14px;height:8px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.msg{font-weight:700;min-height:1.4em;margin:10px 0 0}.msg.ok,.ok{color:var(--ok)}.msg.no,.no{color:var(--warn)}
.mono{font:700 24px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.06em;background:var(--soft);padding:16px;border-radius:14px;text-align:center;word-break:break-all}
.tbd{color:#b45309;font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#191f28;color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:40;max-width:calc(100% - 32px)}.toast.on{opacity:1;transform:translateX(-50%)}