:root{--b:#1a4f8b;--b2:#2b6cb0;--g:#7cb342;--bg:#fafbfd}
*{box-sizing:border-box}
body{margin:0;font-family:"Pretendard","Noto Sans KR","Noto Sans CJK KR","Apple SD Gothic Neo",system-ui,sans-serif;font-size:17px;line-height:1.9;color:#222;background:var(--bg);word-break:keep-all;overflow-wrap:anywhere}
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e3e8ef;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;gap:10px;flex-wrap:wrap}
.logo{font-weight:800;color:var(--b);text-decoration:none;font-size:18px}
nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}nav a{color:#334;text-decoration:none;font-size:15px}nav a:hover{color:var(--b)}
#langBtn{border:2px solid var(--b);background:var(--b);color:#fff;border-radius:20px;padding:3px 14px;font-weight:700;cursor:pointer}
main{max-width:920px;margin:0 auto;padding:28px 22px 120px}
h1{color:var(--b);font-size:30px;line-height:1.4;margin:10px 0 6px}
h2{color:#fff;background:var(--b);padding:8px 14px;border-radius:8px;font-size:21px;margin-top:44px}
h3{color:var(--b);border-bottom:2px solid var(--b);padding-bottom:4px;margin-top:40px;font-size:21px;line-height:1.5}
h4{color:var(--b2);margin:30px 0 8px;font-size:18px}
p,li{margin:12px 0}
.en{font-weight:700;color:var(--b)}
.box{background:#eef4fb;border-left:5px solid var(--b);padding:12px 16px;margin:18px 0;border-radius:6px}
.ex{background:#f7f7f7;border:1px solid #ddd;padding:10px 14px;margin:14px 0;border-radius:6px}
.eq{font-size:20px;text-align:center;font-weight:800;color:var(--b);padding:14px;border:2px dashed var(--b);margin:18px 0;border-radius:8px}
.tw{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.6;background:#fff}
th,td{border:1px solid #c8d3e0;padding:7px 9px;text-align:left;vertical-align:top}th{background:var(--b);color:#fff}
tr:nth-child(even) td{background:#f5f8fc}
table.tx{font-size:13px;min-width:640px}table.tx td,table.tx th{text-align:right;padding:4px 5px}table.tx td:nth-child(2),table.tx th:nth-child(2){text-align:left}table.tx tr.bal td{font-weight:700;background:#e2ecf7}
.stmt{width:48%;display:inline-table;margin-right:2%}.stmt td:last-child{text-align:right}
.diag{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}.diag div{flex:1;min-width:120px;text-align:center;padding:10px;border-radius:8px;color:#fff;font-weight:700}
svg{max-width:100%;height:auto}
.vis{margin:26px 0;text-align:center}.visn{margin:0}
.here{margin:8px 0 18px;background:#fff;border:1px solid #e3e8ef;border-radius:10px;padding:6px}
.say{display:flex;align-items:flex-start;gap:12px;margin:24px 0}
.bub{position:relative;background:#f0fff4;border:2px solid var(--g);border-radius:16px;padding:12px 18px;flex:1}
.say.t .bub{background:#fffbea;border-color:#d69e2e}.say.w .bub{background:#fff5f5;border-color:#e53e3e}
.card{background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:18px 22px;margin:18px 0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ctx{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.ctx div{background:#fff;border:1px solid #dfe6ee;border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.7}
.ctx b{display:block;color:var(--b);margin-bottom:4px}
.ana{background:#fffaf0;border-left:5px solid #ed8936;padding:12px 16px;border-radius:6px;margin:18px 0}
.smp{background:#f0fff4;border-left:5px solid #38a169;padding:12px 16px;border-radius:6px;margin:18px 0}
.lbl{font-weight:800;font-size:14px;letter-spacing:.02em;display:block;margin-bottom:4px}
.aibox{background:#f5f0ff;border:2px dashed #805ad5;border-radius:12px;padding:12px 16px;margin:22px 0}
.aibox .topic{display:none}
.aibox .ah{font-weight:800;color:#553c9a}
.aibox pre,.prompt pre{white-space:pre-wrap;font-family:inherit;font-size:15px;line-height:1.7;background:#fff;border-radius:8px;padding:10px 12px;margin:8px 0;border:1px solid #e2d9f3}
.btn{display:inline-block;border:none;background:var(--b);color:#fff;border-radius:8px;padding:8px 16px;font-size:15px;cursor:pointer;text-decoration:none;font-family:inherit;margin:4px 6px 4px 0}
.btn.s{background:#fff;color:var(--b);border:2px solid var(--b)}.btn.g{background:#38a169}.btn.r{background:#e53e3e}.btn.p{background:#805ad5}
.btn:disabled{opacity:.5;cursor:default}
.toc{list-style:none;padding:0}.toc li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e3e8ef;border-radius:12px;padding:10px 16px;margin:10px 0}
.toc li.off{opacity:.55}.toc .num{font-weight:800;color:var(--b);min-width:48px}.toc .tag{margin-left:auto;font-size:13px;background:#edf2f7;border-radius:10px;padding:2px 10px;white-space:nowrap}
.toc li.on .tag{background:#c6f6d5}
.bar{height:10px;background:#e2e8f0;border-radius:6px;overflow:hidden;margin:4px 0}.bar i{display:block;height:100%;background:#38a169}
.bar.b i{background:var(--b2)}
.secrow{display:grid;grid-template-columns:1fr 160px 160px;gap:12px;align-items:center;font-size:15px}
.clist{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}.clist a{font-size:14px;background:#edf2f7;border-radius:16px;padding:3px 12px;text-decoration:none;color:#234}
.clist a.done{background:#c6f6d5}
.term{border-bottom:2px dotted #805ad5;cursor:help}
#tip{position:absolute;z-index:50;display:none;max-width:340px;background:#2d3748;color:#fff;border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.7;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#tip b{color:#fbd38d}
.tbox{background:#faf5ff;border:1px solid #d6bcfa;border-radius:10px;padding:10px 14px;margin:12px 0;font-size:15px;line-height:1.75}
.tbox .tt{font-weight:800;color:#553c9a}
.prob{background:#fff;border:1px solid #e3e8ef;border-radius:12px;padding:14px 18px;margin:16px 0}
.prob.ok{border-color:#38a169;box-shadow:inset 4px 0 0 #38a169}.prob.no{border-color:#e53e3e;box-shadow:inset 4px 0 0 #e53e3e}
.pid{font-size:13px;color:#718096;font-weight:700}.rv{background:#feebc8;color:#7b341e;border-radius:10px;padding:1px 9px;font-size:12px;margin-left:6px}
.opts button{margin:4px 6px 4px 0}
.opts button.sel{outline:3px solid #f6ad55}
textarea,input[type=text],input[type=number],select{font-family:inherit;font-size:16px;padding:7px 10px;border:1px solid #cbd5e0;border-radius:8px;max-width:100%}
textarea{width:100%;min-height:70px}
.res{margin-top:10px;padding:10px 14px;border-radius:8px;background:#f7fafc}
.res.ok{background:#f0fff4}.res.no{background:#fff5f5}
.ale{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:8px 0}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#2d3748;color:#fff;padding:8px 18px;border-radius:20px;display:none;z-index:60}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:40px;flex-wrap:wrap}
.adm label{display:block;font-weight:700;margin-top:12px;font-size:15px}.adm textarea{min-height:56px}
.adm .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alist{font-size:14px;line-height:1.6;max-height:420px;overflow:auto;border:1px solid #e3e8ef;border-radius:10px;background:#fff}
.alist div{padding:6px 10px;border-bottom:1px solid #edf2f7;display:flex;gap:8px;align-items:center}.alist div span{flex:1}
.loc{color:#805ad5;font-weight:700}
.hero{background:linear-gradient(135deg,#ebf4ff,#f0fff4);border-radius:18px;padding:22px 26px;margin-bottom:10px}
@media (max-width:640px){body{font-size:16px}main{padding:18px 14px 100px}h1{font-size:24px}h3{font-size:19px}
.ctx{grid-template-columns:1fr}.secrow{grid-template-columns:1fr}.adm .row{grid-template-columns:1fr}.stmt{width:100%;display:table}
.say svg{width:38px;height:38px}header{padding:6px 12px}nav{gap:10px}nav a{font-size:14px}}
.brandlink{color:var(--b);text-decoration:none;font-weight:700}
.here .visn{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){.here .visn svg{min-width:700px;width:700px}.here{padding:4px 0}}
.alist s{color:#999}
/* ===== dark mode ===== */
#themeBtn{border:2px solid var(--b);background:transparent;color:var(--b);border-radius:20px;padding:3px 12px;font-weight:700;cursor:pointer;font-size:15px}
html[data-theme=dark]{color-scheme:dark;--b:#7fb3f0;--b2:#90cdf4;--bg:#12161d}
[data-theme=dark] body{color:#e2e8f0;background:var(--bg)}
[data-theme=dark] header{background:#1a202c;border-color:#2d3748}
[data-theme=dark] nav a{color:#cbd5e0}
[data-theme=dark] #langBtn{background:#2b6cb0;border-color:#2b6cb0}
[data-theme=dark] h2,[data-theme=dark] th{background:#2c5282;color:#fff}
[data-theme=dark] .box{background:#1c2b3f}
[data-theme=dark] .ex,[data-theme=dark] .res{background:#1f2630;border-color:#3a4554}
[data-theme=dark] table{background:#1a202c}
[data-theme=dark] td{border-color:#3a4554}
[data-theme=dark] tr:nth-child(even) td{background:#202733}
[data-theme=dark] table.tx tr.bal td{background:#243650}
[data-theme=dark] .card,[data-theme=dark] .prob,[data-theme=dark] .toc li,[data-theme=dark] .ctx div,[data-theme=dark] .alist{background:#1a202c;border-color:#2d3748}
[data-theme=dark] .alist div{border-color:#2d3748}
/* SVG visuals & mind maps: keep on light cards so their colors stay readable */
[data-theme=dark] .vis svg,[data-theme=dark] .here{background:#f7f9fc;border-radius:10px}
[data-theme=dark] .here{border-color:#4a5568}
[data-theme=dark] .bub{background:#1c3324;color:#e2e8f0}
[data-theme=dark] .say.t .bub{background:#3a3115}[data-theme=dark] .say.w .bub{background:#3d1f22}
[data-theme=dark] .ana{background:#33281a}[data-theme=dark] .smp{background:#1c3324}
[data-theme=dark] .aibox,[data-theme=dark] .tbox{background:#251f38;border-color:#9f7aea}
[data-theme=dark] .aibox .ah,[data-theme=dark] .tbox .tt{color:#d6bcfa}
[data-theme=dark] .aibox pre,[data-theme=dark] .prompt pre{background:#12161d;color:#e2e8f0;border-color:#44337a}
[data-theme=dark] .btn{background:#2b6cb0}
[data-theme=dark] .btn.s{background:transparent;color:var(--b);border-color:var(--b)}
[data-theme=dark] .btn.g{background:#2f855a}[data-theme=dark] .btn.r{background:#c53030}[data-theme=dark] .btn.p{background:#6b46c1}
[data-theme=dark] .toc .tag,[data-theme=dark] .clist a{background:#2d3748;color:#e2e8f0}
[data-theme=dark] .toc li.on .tag,[data-theme=dark] .clist a.done{background:#276749;color:#fff}
[data-theme=dark] .bar{background:#2d3748}
[data-theme=dark] .term{border-color:#b794f4}
[data-theme=dark] #tip,[data-theme=dark] #toast{background:#f7fafc;color:#1a202c;box-shadow:0 6px 20px rgba(0,0,0,.6)}
[data-theme=dark] #tip b{color:#6b46c1}
[data-theme=dark] .pid{color:#a0aec0}[data-theme=dark] .rv{background:#7b341e;color:#feebc8}
[data-theme=dark] textarea,[data-theme=dark] input[type=text],[data-theme=dark] input[type=number],[data-theme=dark] select{background:#1f2630;color:#e2e8f0;border-color:#4a5568}
[data-theme=dark] .res.ok{background:#1c3324}[data-theme=dark] .res.no{background:#3d1f22}
[data-theme=dark] .loc{color:#b794f4}[data-theme=dark] .alist s{color:#718096}
[data-theme=dark] .hero{background:linear-gradient(135deg,#1c2b3f,#1c3324)}
[data-theme=dark] .diag div{filter:brightness(.85)}
[data-theme=dark] [style*="background:#f"],[data-theme=dark] [style*="background: #f"]{color:#1a202c}
#who a{margin-left:6px}
input[type=password]{font-family:inherit;font-size:16px;padding:7px 10px;border:1px solid #cbd5e0;border-radius:8px;max-width:100%;width:100%}
.login input[type=text]{width:100%}
[data-theme=dark] input[type=password]{background:#1f2630;color:#e2e8f0;border-color:#4a5568}
.err{color:#c53030;font-weight:700}[data-theme=dark] .err{color:#feb2b2}
.login a{color:var(--b)}

.toc li.on{cursor:pointer;transition:background .15s}.toc li.on:hover{background:#f0f7ff}
.toc .tag,.toc li.on .tag{background:none!important;padding:0;font-size:12.5px;color:#718096;font-weight:400}
.toc li.on .tag{color:#2f855a}.toc .tbody{flex:1;min-width:0}.tmeta{font-size:13px;color:#4a5568;margin-top:2px}.tsec{font-size:12px;color:#718096;margin-top:2px}
.toc .tag{margin-left:0}
#chSel{font-size:14px;padding:4px 6px;border-radius:8px;border:1px solid #cbd5e0;background:#fff;max-width:200px}
.cmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.cph{border:2px solid;border-radius:12px;overflow:hidden}.cpht{color:#fff;font-weight:700;padding:6px 10px;font-size:14px}
.cch{display:block;margin:8px;padding:8px;border-radius:8px;border:1px solid #e2e8f0;font-size:13.5px;text-decoration:none;color:inherit}.cch small{display:block;color:#718096;font-size:12px}.cch.on:hover{background:#f0f7ff}.cch.off{opacity:.5}
[data-theme=dark] .toc li.on:hover,[data-theme=dark] .cch.on:hover{background:#2a4365}[data-theme=dark] .toc .tag{color:#a0aec0}[data-theme=dark] .toc li.on .tag{color:#68d391}
[data-theme=dark] .tmeta{color:#cbd5e0}[data-theme=dark] .cch{border-color:#4a5568}[data-theme=dark] #chSel{background:#2d3748;color:#e2e8f0;border-color:#4a5568}
@media(max-width:600px){.toc li{flex-wrap:wrap}.toc .tbody{flex-basis:calc(100% - 60px)}}
/* source document cards */
.doc{border:1px solid #c9ced6;border-radius:8px;background:#fffef8;margin:10px 0;max-width:520px;font-size:.93em;box-shadow:0 1px 3px #0001;overflow:hidden}
.doc .dk{background:#334155;color:#fff;padding:5px 10px;font-weight:700;letter-spacing:.02em}
.doc .dh{padding:4px 10px;color:#555;border-bottom:1px dashed #ccc}
.doc table{width:100%;border-collapse:collapse}.doc td{padding:4px 10px;border-bottom:1px solid #eee}.doc td:last-child{text-align:right;font-family:ui-monospace,monospace;white-space:nowrap}
.doc .dfoot{padding:4px 10px;color:#666;font-size:.9em}
[data-theme=dark] .doc{background:#1f2430;border-color:#3a4252}[data-theme=dark] .doc .dh,[data-theme=dark] .doc .dfoot{color:#aab}[data-theme=dark] .doc td{border-color:#2c3340}
/* JE builder */
.je{margin:8px 0}.jeh,.jer{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr) 22px;gap:6px;align-items:center}
.jeh{font-size:.8em;color:#777;margin-bottom:2px}.jer{margin:4px 0}.jer select,.jer input{width:100%;min-width:0;box-sizing:border-box;padding:6px;font-size:.95em}
.jer input{font-family:ui-monospace,monospace;text-align:right}.jm.ok{color:#2f855a;font-weight:700}.jm.no{color:#c53030;font-weight:700}
.jet{font-size:.85em;color:#666;margin:4px 0;font-family:ui-monospace,monospace}
[data-theme=dark] .jet,[data-theme=dark] .jeh{color:#99a}
/* ladder */
.lvrow{display:grid;grid-template-columns:1fr 70px 30%;gap:10px;align-items:center;padding:8px;border-radius:6px;text-decoration:none;color:inherit;border:1px solid transparent}
.lvrow:hover{background:#8881}.lvrow.rec{border-color:#2b6cb0}.lvrow.done b{color:#2f855a}
.lvtabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.lvtabs a{padding:4px 10px;border:1px solid #8886;border-radius:14px;text-decoration:none;color:inherit;font-size:.9em}
.lvtabs a.cur{background:#2b6cb0;color:#fff;border-color:#2b6cb0}.lvtabs a.done:not(.cur){border-color:#2f855a;color:#2f855a}
table.dash td{vertical-align:top;font-size:.9em}
@media(max-width:600px){.lvrow{grid-template-columns:1fr 60px;}.lvrow .bar{grid-column:1/-1}.jeh,.jer{grid-template-columns:1fr 1fr 22px}.jeh span:first-child,.jer select{grid-column:1/-1}}