:root{
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --bg:#F7F8FA;--surface:#FFFFFF;--sidebar:#FBFBFC;
  --ink:#191F28;--ink2:#333D4B;--muted:#6B7684;--faint:#8B95A1;
  --line:#E5E8EB;--line2:#F2F4F6;
  --primary:#3182F6;--primary-strong:#1B64DA;--primary-wash:#E8F3FF;
  --danger:#F04452;--danger-wash:#FFEEEF;
  --success:#00A661;--success-wash:#E6F8EF;
  --warn:#E8850C;--warn-wash:#FFF4E0;
  --sb-w:248px;--sb-min:64px;--hd-h:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--font);letter-spacing:-.003em;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
a{color:var(--primary-strong);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.i{flex:none}
.muted{color:var(--muted)}.small{font-size:13px}.nowrap{white-space:nowrap}.r{text-align:right}.grow{flex:1}
.hint{color:var(--muted);font-size:13px;margin-top:6px}

/* ---------- app shell ---------- */
body.app{display:grid;grid-template-columns:var(--sb-w) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .18s ease}
body.app.collapsed{grid-template-columns:var(--sb-min) minmax(0,1fr)}
.sb{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:12px 10px;background:var(--sidebar);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;z-index:40}
.sb-head{display:flex;align-items:center;gap:4px;padding:4px 2px 10px 6px}
.sb-head .sb-brand{flex:1;min-width:0}
.sb-toggle{width:32px;height:32px}
.sb-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:15.5px;letter-spacing:-.02em}
.sb-brand:hover{text-decoration:none}
.logo{flex:none;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.logo.lg{width:44px;height:44px;border-radius:12px;font-size:21px}
.sb-cta{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;margin:2px 2px 10px;border-radius:10px;background:var(--primary);color:#fff;font-weight:600;font-size:14.5px}
.sb-cta:hover{background:var(--primary-strong);text-decoration:none}
.sb-nav{display:flex;flex-direction:column;gap:16px;flex:1 0 auto}
.sb-help{margin-top:auto}
.sb-head,.sb-cta,.sb-foot{flex:none}
.sb-group{display:flex;flex-direction:column;gap:1px}
.sb-title{font-size:12px;font-weight:600;color:var(--faint);padding:0 12px 4px}
.sb-link,.sb-recent{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 12px;border-radius:8px;color:var(--ink2);font-size:14.5px;font-weight:500}
.sb-link:hover,.sb-recent:hover{background:var(--line2);text-decoration:none}
.sb-link[aria-current]{background:var(--primary-wash);color:var(--primary-strong);font-weight:600}
.sb-link .i{color:var(--faint)}.sb-link[aria-current] .i{color:var(--primary)}
.sb-recent{font-size:13.5px;color:var(--muted);min-height:32px}
.sb-recent .sb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--faint);margin:0 4px 0 5px}
.dot.ok{background:var(--success)}.dot.run{background:var(--primary)}.dot.bad{background:var(--danger)}
.sb-foot{display:flex;align-items:center;gap:10px;padding:10px 6px 4px;border-top:1px solid var(--line)}
.sb-foot form{margin-left:auto}
.avatar{flex:none;width:30px;height:30px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink2)}
.sb-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sub{display:flex;flex-direction:column;gap:1px;margin:1px 0 4px 23px;padding-left:10px;border-left:1px solid var(--line)}
.sb-sublink{display:flex;align-items:center;min-height:32px;padding:4px 10px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:500}
.sb-sublink:hover{background:var(--line2);color:var(--ink);text-decoration:none}
.sb-sublink[aria-current]{background:var(--primary-wash);color:var(--primary-strong);font-weight:600}
.collapsed .sb-label,.collapsed .sb-title,.collapsed .sb-recents,.collapsed .sb-sub{display:none}
.collapsed .sb{padding:12px 8px;align-items:stretch}
.collapsed .sb-cta,.collapsed .sb-link{justify-content:center;padding:0}
.collapsed .sb-foot{flex-direction:column;gap:8px}.collapsed .sb-foot form{margin:0}
.collapsed .sb-head{flex-direction:column;gap:6px;padding:4px 0 8px}
.collapsed .sb-group+.sb-group{border-top:1px solid var(--line);padding-top:12px}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--line2);color:var(--ink)}
.sb-scrim{display:none}
.shell{min-width:0;display:flex;flex-direction:column}
.hd{position:sticky;top:0;z-index:30;height:var(--hd-h);display:flex;align-items:center;gap:10px;padding:0 20px;background:rgba(247,248,250,.88);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:var(--line)}
/* Pages lay out by the width they actually get beside the sidebar (container queries), not the window's. */
.content{width:100%;max-width:1120px;margin:0 auto;padding:28px 32px 64px;container-type:inline-size;container-name:content}
.content.wide{max-width:none;padding:24px 24px 64px}

/* ---------- page head, buttons ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:26px;line-height:1.3;font-weight:700;letter-spacing:-.025em}
.page-head p{color:var(--muted);margin-top:4px}
.info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:13.5px}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink2);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;list-style:none}
.btn:hover{background:var(--line2);text-decoration:none}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-strong);border-color:var(--primary-strong)}
.btn.lg{height:46px;padding:0 22px;font-size:15.5px;border-radius:12px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn::-webkit-details-marker{display:none}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;background:var(--line2);color:var(--ink2);font-size:12.5px;font-weight:600;cursor:default;list-style:none}
summary.chip{cursor:pointer}
.menu{position:relative}
.menu summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:180px;display:flex;flex-direction:column;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(25,31,40,.12)}
.menu-list.right{left:auto;right:0}
.menu-list a{padding:8px 10px;border-radius:8px;color:var(--ink2);font-size:14px}
.menu-list a:hover{background:var(--line2);text-decoration:none}

/* ---------- cards, tabs, tables ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:16px}
.card.flush{padding:0;overflow:hidden}
.card h2{font-size:16px;font-weight:700;margin-bottom:12px;letter-spacing:-.015em}
.tabs{display:inline-flex;gap:2px;padding:4px;margin-bottom:14px;background:#EEF0F3;border-radius:11px}
.tabs a{padding:6px 14px;border-radius:8px;color:var(--muted);font-weight:600;font-size:14px}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a[aria-current]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(25,31,40,.08)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;padding:11px 16px;background:#FAFBFC;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl th.r,.tbl td.r{text-align:right}
.records tbody tr,.fx-table tbody tr{position:relative}
.fx-table tbody tr:hover{background:#FAFBFC}
.fx-table .fx-check{position:relative;z-index:1}
.records tbody tr:hover{background:#FAFBFC}
.row-link{color:var(--ink);font-weight:600;font-size:15px}
.row-link::after{content:"";position:absolute;inset:0}
.row-link:hover{text-decoration:none;color:var(--primary-strong)}
.sub{display:block;color:var(--faint);font-size:12.5px;margin-top:1px}
.subject{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font-size:12.5px;font-weight:700;background:var(--line2);color:var(--ink2)}
.s-실무{background:#E8F3FF;color:#1B64DA}.s-이론{background:#F0EBFF;color:#6741D9}.s-법규{background:#FFF0E6;color:#C2410C}
.score{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.score b{font-size:16px;color:var(--ink);font-weight:700}
.meter{display:block;width:96px;height:5px;margin:6px 0 0 auto;background:var(--line2);border-radius:3px;overflow:hidden}
.meter-fill{display:block;height:100%;width:0;background:var(--primary);border-radius:3px}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--line2);color:var(--muted);white-space:nowrap}
.badge.ok{background:var(--success-wash);color:#00804A}
.badge.run{background:var(--primary-wash);color:var(--primary-strong)}
.badge.run::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);animation:pulse 1.4s ease-in-out infinite}
.badge.bad{background:var(--danger-wash);color:#D22030}
@keyframes pulse{50%{opacity:.25}}
.empty{text-align:center;padding:56px 24px;background:#fff;border:1px dashed #D1D6DB;border-radius:14px}
.empty h2{font-size:18px;margin-bottom:6px}
.empty p{color:var(--muted);margin-bottom:18px}
.callout{padding:12px 14px;border-radius:10px;background:var(--warn-wash);color:#8A4B00;font-size:14px;margin:0 0 16px}
.callout.bad{background:var(--danger-wash);color:#B4232F}

/* ---------- status ---------- */
.status-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.steps{list-style:none;margin:6px 0 18px;padding:0;display:flex;flex-direction:column}
.steps li{position:relative;display:flex;align-items:center;gap:12px;padding:9px 0;color:var(--faint);font-weight:500}
.steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:36px;bottom:-8px;width:2px;background:var(--line)}
.step-dot{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--line2);color:var(--faint);font-size:13px;font-weight:700;z-index:1}
.steps li.done{color:var(--ink2)}.steps li.done .step-dot{background:var(--success);color:#fff}
.steps li.done:not(:last-child)::after{background:var(--success)}
.steps li.now{color:var(--ink);font-weight:700}.steps li.now .step-dot{background:var(--primary);color:#fff;box-shadow:0 0 0 5px var(--primary-wash)}
.steps.stopped li.now .step-dot{background:var(--faint);box-shadow:none}
.phase{font-size:14px;margin-bottom:14px}
.file-list{list-style:none;margin:0;padding:0}
.file-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:14px;color:var(--faint)}
.file-list li:last-child{border-bottom:0}
.file-role{width:64px;flex:none;color:var(--muted);font-weight:600}
.file-name{color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- submit ---------- */
.submit-form{max-width:880px}
.field-row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:8px}
.field-label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink2)}
input[type=text],select,textarea{width:100%;height:44px;padding:0 13px;border:1px solid #D1D6DB;border-radius:10px;background:#fff;font-size:15px;font-weight:400}
textarea{height:auto;padding:10px 13px;resize:vertical}
input[type=text]:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}
input[readonly]{background:var(--line2);color:var(--muted)}
.seg{display:inline-flex;align-self:flex-start;gap:2px;padding:4px;background:#EEF0F3;border-radius:11px}
.seg-item{position:relative}
.seg-item input{position:absolute;opacity:0;width:1px;height:1px}
.seg-item span{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:8px;color:var(--muted);font-weight:600;font-size:14.5px;cursor:pointer}
.seg-item input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(25,31,40,.1)}
.seg-item input:focus-visible+span{outline:2px solid var(--primary)}
.seg-item input:disabled+span{opacity:.35;cursor:not-allowed}
.picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.files-head{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-bottom:14px}
.files-head h2{margin:0}.files-head .hint{margin:0}.files-head .btn{margin-left:auto;height:34px;font-size:13.5px}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.slot{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;border:1.5px dashed #C5CDD6;border-radius:14px;background:#FCFDFE;cursor:pointer;transition:background .12s,border-color .12s}
.slot-main{grid-column:1/-1}
.slot:hover{border-color:#8FA5BC}
.slot.over{border-color:var(--primary);border-style:solid;background:var(--primary-wash)}
.slot.filled{border-style:solid;border-color:var(--line);background:#fff;cursor:default}
.slot-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.slot-head b{font-size:15px}
.slot-head .req{font-size:11.5px;font-weight:700;color:var(--primary-strong)}
.slot-head .opt{font-size:11.5px;font-weight:600;color:var(--faint)}
.slot.filled .slot-head .req{color:var(--success)}
.slot-hint{margin-left:auto;color:var(--faint);font-size:12.5px}
.slot-body{display:flex;align-items:center;justify-content:center;min-height:62px;min-width:0}
.slot-main .slot-body{min-height:104px}
.slot.filled .slot-body{min-height:0;justify-content:flex-start}
.slot-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:14px;font-weight:500;text-align:center}
.slot-empty .i{color:var(--primary)}
.slot-empty .pick{color:var(--primary-strong);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.slot.over .slot-empty{color:var(--primary-strong)}
.slot-input{margin-top:4px}
html.js .slot-input{display:none}
.file-chip{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.file-chip .i{color:var(--danger)}
.file-chip .name{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip .size{color:var(--faint);font-size:13px;white-space:nowrap}
.file-chip .icon-btn{margin-left:auto}
.unassigned{margin-top:16px}
.unassigned ul,.rejected{list-style:none;margin:8px 0 0;padding:0}
.unassigned li{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--warn-wash);background:#FFFBF2;border-radius:10px;margin-bottom:6px;font-size:14px}
.unassigned li .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.unassigned select{width:auto;height:34px;font-size:14px}
.rejected{margin-top:12px}
.rejected li{padding:8px 12px;border-radius:10px;background:var(--danger-wash);color:#B4232F;font-size:13.5px;margin-bottom:6px}
.submit-bar{position:sticky;bottom:0;z-index:10;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;margin-top:8px;padding:14px 0;background:linear-gradient(to top,var(--bg) 70%,rgba(247,248,250,0))}
.submit-status{margin-right:auto;color:var(--muted);font-size:14px}
.submit-status b{color:var(--ink)}
.progress{width:200px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.progress-fill{display:block;height:100%;width:0;background:var(--primary);transition:width .2s}

/* ---------- other pages ---------- */
.study-card h2{font-size:17px;margin:2px 0 8px}
.study-card form{display:grid;gap:10px;margin-top:12px;max-width:640px}
.reading{background:var(--line2);border-radius:10px;padding:10px 13px;margin:10px 0;font-size:14px}
.inline-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.chat-turn{margin-bottom:14px}
.chat-question,.chat-answer{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 17px;margin-bottom:6px}
.chat-question{background:var(--primary-wash);border-color:transparent;margin-left:15%}
.chat-question small,.chat-answer small{color:var(--muted);font-size:12px;font-weight:600}
.chat-answer p,.chat-question p{white-space:pre-wrap}
.prose h2{margin-top:6px}.prose p{margin:6px 0 12px;color:var(--ink2)}
.file-examples{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.prose+.prose{margin-top:14px}
.steps-list{margin:8px 0 18px;padding-left:22px;color:var(--ink2)}
.steps-list li{padding-left:4px;margin-bottom:10px}
.steps-list li::marker{color:var(--primary);font-weight:700}
.steps-list b{color:var(--ink)}
.steps-list .file-examples{margin:8px 0 2px}
.file-examples code{font-family:var(--font);font-weight:500;color:var(--ink2)}
/* Drawn Slack message for the guide: where the mention, files and the memo reaction go. */
.slack-demo{margin:4px 0 18px}
.sd-window{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(25,31,40,.06);padding:4px 0 6px;font-size:14px;line-height:1.5}
.sd-msg{display:flex;gap:10px;padding:12px 250px 12px 16px}
.sd-avatar{flex:none;width:36px;height:36px;border-radius:8px;background:#E8EEF7;color:var(--ink2);display:grid;place-items:center;font-weight:700;font-size:13px}
.sd-body{min-width:0;flex:1}
.sd-body p{margin:0;color:var(--ink)}
.sd-name{font-weight:700}.sd-name span{font-weight:400;font-size:12px;color:var(--faint);margin-left:6px}
.sd-mention{background:#E8F5FA;color:#1264A3;border-radius:3px;padding:0 2px;font-weight:500}
.sd-files{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.sd-file{display:inline-flex;align-items:center;gap:8px;max-width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 10px 6px 6px;font-size:13px;font-weight:500;color:var(--ink2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sd-pdf{flex:none;background:#E5484D;color:#fff;border-radius:5px;padding:2px 5px;font-size:10.5px;font-weight:800}
.sd-reacts{display:flex;align-items:center;gap:6px}
.sd-react{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border:1px solid #1D9BD1;background:#E8F5FA;border-radius:12px;font-size:13px}
.sd-react b{color:#1264A3;font-size:12px}
.sd-add{position:relative;display:inline-grid;place-items:center;height:24px;padding:0 8px;border:1px dashed var(--faint);border-radius:12px;color:var(--muted);font-size:12px}
.sd-callout{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;font-style:normal;font-size:12px;font-weight:600;color:var(--primary-strong);background:var(--primary-wash);border-radius:6px;padding:1px 7px}
.sd-picker{position:absolute;right:16px;bottom:14px;width:210px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(25,31,40,.12);padding:8px}
.sd-search{border:1px solid var(--primary);border-radius:6px;padding:3px 9px;font-size:13px;color:var(--ink)}
.sd-hit{display:flex;align-items:center;gap:8px;margin-top:6px;padding:5px 8px;border-radius:6px;background:var(--line2)}
.sd-hit span{font-size:18px;line-height:1}.sd-hit code{background:none;padding:0}
.slack-demo figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
code{background:var(--line2);border-radius:6px;padding:3px 8px;font-size:13px;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
.admin-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.admin-status span{display:block;font-size:12.5px;color:var(--muted)}
.admin-action{border-top:1px solid var(--line2);padding:14px 0}
.admin-action h3{font-size:15px}
.card form{display:grid;gap:10px}
hr{border:0;border-top:1px solid var(--line2);margin:18px 0}
pre{white-space:pre-wrap}
.image-viewer{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}
.page-zoom{border:0;background:none;padding:0;cursor:zoom-in;width:100%}
.page-zoom img{width:100%;display:block}
.page-zoom.zoomed{cursor:zoom-out;overflow:auto}.page-zoom.zoomed img{width:180%}
.viewer-pages{margin-top:12px}

/* ---------- weakness analysis ---------- */
/* One hue for lost points: dark = questions left unwritten, light = written but lost. */
.wk-headline{border-left:4px solid var(--primary)}
.wk-kicker{font-size:13px;font-weight:700;color:var(--primary-strong);margin-bottom:4px}
.wk-lead{font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-.015em;margin-bottom:8px;max-width:46em}
.wk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.wk-grid>.card{margin-bottom:0}
.wk-legend{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin:-4px 0 10px}
.wk-swatch{display:inline-block;width:10px;height:10px;border-radius:3px;background:#90C2FF;margin-left:8px}
.wk-swatch:first-child{margin-left:0}.wk-swatch.dark{background:#1B64DA}
.wk-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.wk-row:first-of-type{border-top:0}
.wk-label{display:flex;flex-direction:column;gap:3px;font-size:14px}
.wk-label .subject{align-self:flex-start}
.wk-bar{display:flex;gap:2px;height:10px;background:var(--line2);border-radius:5px;overflow:hidden}
.wk-seg{display:block;height:100%;width:0;background:#90C2FF}
.wk-seg.dark{background:#1B64DA}
.wk-num{font-size:13px;color:var(--ink2);white-space:nowrap;text-align:right}
.wk-section{font-size:18px;margin:28px 0 12px;letter-spacing:-.02em}
.wk-topic h2{font-size:17px;margin:10px 0 6px}
.wk-topic>p{color:var(--ink2);max-width:52em}
.wk-topic-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wk-pri{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font-size:12.5px;font-weight:700;background:var(--line2);color:var(--ink2)}
.wk-pri.p1{background:var(--primary);color:#fff}.wk-pri.p2{background:var(--primary-wash);color:var(--primary-strong)}
.wk-type{font-size:12.5px;font-weight:600;color:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.wk-state{margin-left:auto;font-size:12.5px;color:var(--muted)}
.wk-evidence{color:var(--muted);margin:4px 0 10px}
.wk-note summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--primary-strong)}
.wk-note form{margin-top:10px;max-width:640px}
.wk-done{opacity:.62}
.wk-subject-note{margin:6px 0;color:var(--ink2)}
@container content (max-width:820px){.wk-grid{grid-template-columns:1fr}}
@media (max-width:640px){.wk-row{grid-template-columns:1fr;gap:6px}.wk-num{text-align:left}.wk-state{margin-left:0;width:100%}}

/* ---------- weekly news ---------- */
.nw-same-type{margin-top:12px;font-size:14px}
.nw-same-type b{margin-right:10px;color:var(--muted);font-size:13px}
.nw-same-type a{margin-right:12px}
.nw-digest{color:var(--ink);line-height:1.75;min-width:0}
.nw-digest button{font:inherit;cursor:pointer}.nw-digest [hidden]{display:none!important}
.nw-hero{background:linear-gradient(120deg,#fff 48%,#F0F6FF);border:1px solid var(--line);border-radius:18px;padding:26px 28px;margin-bottom:20px}
.nw-hero-top,.nw-hero-bottom,.nw-card-top,.nw-actions,.nw-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nw-date{font-size:13px;color:var(--primary-strong);font-weight:600}.nw-reading-badge{font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 10px}
.nw-hero h2{font-size:25px;line-height:1.4;letter-spacing:-.035em;margin:16px 0 10px}.nw-headline{font-size:15.5px;color:var(--ink2);max-width:64em;line-height:1.85}
.nw-hero-bottom{border-top:1px solid #E8EDF4;margin-top:22px;padding-top:15px;font-size:12.5px;color:var(--muted)}.nw-actions{gap:14px;justify-content:flex-end}.nw-action{font-size:12.5px;font-weight:600}
.nw-tabs{position:sticky;top:var(--hd-h,0px);z-index:12;display:flex;gap:4px;overflow:auto;white-space:nowrap;border-bottom:1px solid var(--line);background:var(--bg);margin:0 0 25px;padding-top:3px;scrollbar-width:thin}
.nw-tabs a{display:flex;align-items:center;gap:7px;flex-shrink:0;padding:13px 14px;border-bottom:3px solid transparent;font-size:14px;color:var(--muted);font-weight:600;text-decoration:none;min-height:49px}
.nw-tabs a[aria-selected=true]{color:var(--primary-strong);border-bottom-color:var(--primary)}.nw-tabs a>span{font-size:11px;line-height:18px;background:#E9EDF2;color:#697585;min-width:18px;text-align:center;border-radius:5px}.nw-tabs a[aria-selected=true]>span{background:var(--primary-wash);color:var(--primary-strong)}
.nw-panel{scroll-margin-top:125px}.nw-section-head{margin-bottom:14px;align-items:flex-start}.nw-section-head h3{font-size:18px;font-weight:700;letter-spacing:-.025em}.nw-section-head p{color:var(--muted);font-size:13px;margin-top:4px}
.nw-digest .card{margin:0;border-radius:14px;padding:22px 24px;min-width:0}.nw-overview-card{color:var(--ink2);font-size:14px;line-height:1.95}.nw-overview-card p+p{margin-top:12px}
.nw-learning-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.nw-card-top{justify-content:flex-start;color:var(--muted);font-size:12px;gap:9px}.nw-learning-card .nw-card-top{justify-content:space-between}.nw-learning-card h3{font-size:17px;margin:15px 0 12px;letter-spacing:-.025em}.nw-map-list{list-style:none;margin:0 0 16px;padding:0}.nw-map-list li{border-bottom:1px solid var(--line2)}
.nw-text-button{display:inline-flex;align-items:baseline;justify-content:space-between;gap:8px;border:0;padding:3px 0;background:transparent;color:var(--primary-strong);text-align:left;font-size:12.5px;line-height:1.7}
.nw-text-button:hover{text-decoration:underline;text-underline-offset:3px}.nw-text-button span{flex-shrink:0}.nw-map-list .nw-text-button{width:100%;padding:11px 0;color:var(--ink2);font-size:13.5px}.nw-map-list .nw-text-button span{color:var(--faint)}
.nw-reading-flow{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap;padding:20px 2px 0;font-size:12px;color:var(--muted)}.nw-reading-flow>span{font-weight:600}
.nw-digest .subject{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:650;background:var(--line2);color:var(--ink2)}.nw-digest .s-이론{background:#E8F3FF;color:#1B64DA}.nw-digest .s-법규{background:#F1ECFF;color:#7152B4}.nw-digest .s-both{background:#E9F5F1;color:#26816C}
.nw-filters{display:flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:3px;flex-shrink:0}
.nw-filters button{display:flex;align-items:center;gap:6px;background:transparent;border:0;border-radius:6px;padding:6px 10px;font-size:12.5px;color:var(--muted);min-height:32px}.nw-filters button[aria-pressed=true]{background:var(--primary-wash);color:var(--primary-strong);font-weight:700}.nw-filters button>span{font-size:10.5px;opacity:.8}.nw-result-count{font-size:12px;color:var(--muted);margin-bottom:11px}
.nw-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.nw-news-card h4{font-size:16px;line-height:1.65;letter-spacing:-.02em;margin:13px 0 10px}.nw-news-card h4 a{color:var(--ink)}.nw-news-card h4 span{color:var(--faint);font-size:13px}.nw-news-summary{font-size:13.5px;line-height:1.95;color:var(--ink2);overflow-wrap:anywhere}
.nw-facts{border-top:1px solid var(--line2);padding-top:12px;margin-top:15px;font-size:12.5px;color:var(--muted)}.nw-facts summary{cursor:pointer;font-weight:600}.nw-facts ul{margin:12px 0 0;padding-left:18px;color:var(--ink2)}.nw-facts li+li{margin-top:7px}
.nw-link-note{font-size:12px;color:#986C2D;background:#FFF8EB;padding:10px 12px;border-radius:8px;margin-top:12px}
.nw-related{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line2);padding-top:13px;margin-top:17px}.nw-related>span{font-size:11px;color:var(--faint);font-weight:600}.nw-related .nw-text-button{font-size:12px;justify-content:flex-start}
.nw-points-list{display:grid;gap:18px}.nw-point-card{scroll-margin-top:125px}.nw-point-card h4{font-size:19px;line-height:1.6;letter-spacing:-.025em;margin:12px 0 16px}.nw-point-card h5,.nw-question-reader h5{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 8px;font-weight:700}.nw-why{background:#F5F8FC;border-radius:10px;padding:15px 18px;margin-bottom:19px}.nw-why p{font-size:13.5px;line-height:1.85;color:var(--ink2)}
.nw-notes{padding:0;list-style:none;counter-reset:news-note;margin:0}.nw-notes li{counter-increment:news-note;position:relative;padding:12px 0 12px 34px;border-top:1px solid var(--line2);font-size:14px;line-height:1.9;overflow-wrap:anywhere}.nw-notes li::before{content:counter(news-note,decimal-leading-zero);position:absolute;left:0;top:14px;color:var(--primary);font-size:11px;font-weight:700}.nw-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}.nw-term{border:1px solid var(--line);border-radius:6px;padding:3px 7px;color:var(--muted);font-size:11px;background:#FAFBFC}
.nw-question-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}.nw-question-choice{border:1px solid var(--line);border-radius:12px;background:#fff;padding:15px 17px;text-align:left;display:flex;flex-direction:column;gap:8px;color:var(--ink);min-width:0}.nw-question-choice:hover{border-color:#A8C8F5}.nw-question-choice[aria-pressed=true]{border-color:var(--primary);background:#F8FBFF;box-shadow:0 0 0 1px var(--primary)}.nw-question-choice strong{font-size:13.5px;font-weight:600;line-height:1.7}.nw-choice-meta{font-size:11px;color:var(--faint)}
.nw-question-reader{scroll-margin-top:125px}.nw-question-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.nw-question-title h4{font-size:20px;letter-spacing:-.025em;line-height:1.6;margin-top:10px}.nw-practice{display:inline-flex;align-items:center;gap:14px;flex-shrink:0;color:#fff;background:var(--primary);padding:9px 13px;border-radius:8px;font-size:12px;font-weight:600}.nw-practice:hover{background:var(--primary-strong);text-decoration:none}
.nw-question-stem{background:#F5F7FA;border:1px solid #EBEFF4;border-radius:12px;padding:20px 23px;color:var(--ink2);font-size:14px;line-height:1.95;margin-bottom:28px;white-space:pre-wrap}.nw-question-stem p+p{margin-top:12px}.nw-question-stem h5{color:var(--primary-strong)}
.nw-answer-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:start}.nw-outline{position:sticky;top:140px;border-left:2px solid var(--line);padding-left:16px}.nw-outline ol{list-style:none;padding:0;margin:0}.nw-outline li{font-size:12px;line-height:1.8;margin:12px 0}.nw-outline a{color:var(--muted)}.nw-outline a:hover{color:var(--primary-strong)}.nw-answer{min-width:0}.nw-answer-label{color:var(--primary-strong)!important;font-size:13px!important;margin-bottom:16px!important}.nw-answer h4{font-size:16px;line-height:1.8;margin:25px 0 12px;letter-spacing:-.02em;scroll-margin-top:130px}.nw-answer h4:first-of-type{margin-top:0}.nw-answer p{font-size:15px;line-height:2.05;margin:0 0 15px;max-width:56em;overflow-wrap:anywhere}
.nw-references{border-top:1px solid var(--line2);padding-top:18px;margin-top:26px;font-size:12px;color:var(--muted)}.nw-references summary{cursor:pointer}.nw-references ul{padding-left:18px;line-height:1.9;overflow-wrap:anywhere}
.nw-disclaimer{border-top:1px solid var(--line);margin-top:28px;padding-top:16px;font-size:12px;color:var(--faint);line-height:1.8}
.nw-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px;color:var(--muted);font-size:13px}.nw-toolbar a{font-weight:600}.nw-archive-search{display:flex;gap:8px;max-width:560px;margin:18px 0 23px}.nw-archive-search input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:#fff;font:inherit;font-size:14px}.nw-archive-list{display:grid;gap:12px}.nw-archive-card{display:block;background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px 24px;color:var(--ink)}.nw-archive-card:hover{border-color:#A8C8F5;text-decoration:none}.nw-archive-card h3{font-size:16px;line-height:1.8;margin:10px 0;color:var(--ink)}.nw-archive-card p{font-size:12px;color:var(--muted)}.nw-archive-period{font-size:12px;color:var(--primary-strong);font-weight:600}.nw-archive-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px;font-size:13px}
.nw-practice-screen>h2{font-size:21px;line-height:1.6;margin:12px 0 18px;letter-spacing:-.025em}.nw-practice-screen .nw-question-stem{margin:18px 0}.nw-practice-upload{display:grid;gap:15px;max-width:760px}.nw-practice-upload input[type=file]{padding:17px;border:1px dashed #A8C8F5;border-radius:10px;background:#F7FBFF;width:100%}.nw-practice-upload .btn{justify-self:start}.nw-practice-hint{color:var(--muted);font-size:13px;line-height:1.9}.nw-practice-screen .notice{margin:16px 0}
@media(max-width:1050px){.nw-answer-layout{grid-template-columns:1fr;gap:18px}.nw-outline{position:static;border-left:0;border-bottom:1px solid var(--line);padding:0 0 12px}.nw-outline ol{display:flex;gap:8px 18px;flex-wrap:wrap}.nw-outline li{margin:0}.nw-outline h5{margin-bottom:6px}}
@media(max-width:760px){.nw-hero{padding:20px}.nw-hero h2{font-size:22px}.nw-headline{font-size:14px}.nw-learning-grid,.nw-news-grid{grid-template-columns:1fr}.nw-tabs{gap:0;margin-bottom:19px}.nw-tabs a{padding:12px 11px;font-size:12.5px}.nw-digest .card{padding:20px}.nw-question-title{flex-direction:column}.nw-question-title h4{font-size:18px}.nw-question-stem{padding:16px;font-size:13px}.nw-answer p{font-size:14.5px}.nw-point-card h4{font-size:17px}.nw-reading-badge{display:none}.nw-hero-bottom{gap:12px}.nw-archive-card{padding:18px}.nw-question-picker{gap:9px}.nw-question-choice{padding:13px}.nw-choice-meta{font-size:10px}.nw-section-head{gap:12px}.nw-section-head h3{font-size:17px}}
@media(max-width:480px){.nw-question-picker{grid-template-columns:1fr}.nw-hero{border-radius:13px}.nw-hero h2{font-size:20px}.nw-tabs a{padding:12px 9px;font-size:12px}.nw-tabs a>span{display:none}.nw-learning-card .nw-card-top{justify-content:flex-start}.nw-answer h4{font-size:15px}.nw-hero-bottom>span{font-size:11px}.nw-digest .nw-filters{width:100%;justify-content:flex-start}.nw-question-choice .nw-card-top{justify-content:space-between}.nw-text-button{min-height:30px}}
@media(prefers-reduced-motion:reduce){.nw-digest *{scroll-behavior:auto}}

/* ---------- login ---------- */
body.bare{background:#fff}
.bare-main{min-height:100vh;display:grid;place-items:center;padding:40px 24px}
.login{width:100%;max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.login-copy h1{font-size:36px;line-height:1.32;font-weight:800;letter-spacing:-.035em;margin:22px 0 14px}
.login-copy p{color:var(--muted);font-size:16.5px;max-width:30em}
.login-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.login-preview{position:relative;padding:28px 0 40px}
.sheet{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px rgba(25,31,40,.08);padding:18px 0;overflow:hidden}
.sheet-row{position:relative;display:grid;grid-template-columns:52px 1fr;align-items:center;height:44px;border-bottom:1px solid var(--line2)}
.sheet-row span{height:100%;display:grid;place-items:center;border-right:1px solid #F6D3D6;color:var(--faint);font-size:13px}
.sheet-row i{display:block;height:9px;margin-left:16px;border-radius:5px;background:#E1E6EC}
.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w85{width:85%}.w90{width:90%}
.sheet-row.mark::after{content:"";position:absolute;left:60px;right:14px;top:4px;bottom:4px;border:2px solid var(--danger);border-radius:8px;background:rgba(240,68,82,.06)}
.sheet-row.mark+.sheet-row.mark::after{top:-6px}
.sheet-row.ok::before{content:"";position:absolute;left:20px;width:12px;height:12px;border-radius:50%;background:var(--success)}
.note{position:absolute;right:-18px;width:250px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--danger);border-radius:12px;padding:12px 14px;box-shadow:0 12px 28px rgba(25,31,40,.10);font-size:13.5px}
.note b{display:block;font-size:12.5px;color:#D22030;margin-bottom:2px}
.note.ok{border-left-color:var(--success)}.note.ok b{color:#00804A}
.note{top:96px}.note.ok{top:236px}
@media (prefers-reduced-motion:no-preference){
  .note{animation:note-in .5s cubic-bezier(.2,.7,.2,1) .35s both}
  .note.ok{animation-delay:.6s}
}
@keyframes note-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- responsive ---------- */
@media (max-width:960px){
  body.app,body.app.collapsed{grid-template-columns:minmax(0,1fr)}
  .sb-toggle{display:none}
  .sb{position:fixed;left:0;top:0;width:min(84vw,var(--sb-w));transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
  body.sb-open .sb{transform:none;visibility:visible;transition:transform .2s ease;box-shadow:0 0 40px rgba(25,31,40,.18)}
  body.sb-open .sb-scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(25,31,40,.35)}
  .collapsed .sb-label,.collapsed .sb-title,.collapsed .sb-recents{display:revert}
  .collapsed .sb-sub{display:flex}
  .sd-msg{padding-right:16px}
  .sd-picker{position:static;width:auto;margin:0 16px 14px 62px}
  .sd-callout{display:none}
  .content,.content.wide{padding:20px 16px 56px}
  .status-grid,.login{grid-template-columns:1fr}
  .login-preview{display:none}
  .admin-status{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .records th:nth-child(3),.records td:nth-child(3){display:none}
  .slots{grid-template-columns:1fr}.slot-hint{margin-left:0;width:100%}
  .page-head h1{font-size:22px}
  .login-copy h1{font-size:28px}
}

/* ---------- delete ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.delete-form{margin:0}
.card .delete-form{display:inline}
.records td.row-actions{width:52px;padding:0 10px 0 0;text-align:right}
.records .row-actions .delete-form{position:relative;z-index:2}
.records tbody tr .row-actions .icon-btn{opacity:.55}
.records tbody tr:hover .row-actions .icon-btn,.records .row-actions .icon-btn:focus-visible{opacity:1}
.icon-btn.danger:hover{background:var(--danger-wash);color:#D22030}
.btn.icon-only{width:38px;padding:0}
.menu-danger{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#D22030;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.menu-danger:hover{background:var(--danger-wash)}
.callout.ok{background:var(--success-wash);color:#00663A}
.actions .delete-form .menu-danger{width:auto;height:38px;padding:0 14px;border:1px solid #F7C5CA;border-radius:10px;background:#fff}

/* ---------- live progress ---------- */
.live{margin:2px 0 14px;padding:12px 14px 10px;border:1px solid #D6E6FD;border-radius:12px;background:#F7FAFF;overflow:hidden;position:relative}
.live-bar{position:absolute;left:0;right:0;top:0;height:3px;background:#E3EEFD;overflow:hidden}
.live-bar span{position:absolute;top:0;bottom:0;width:35%;background:var(--primary);border-radius:3px}
.live-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px;margin-top:4px}
.live-head .muted{margin-left:auto;font-variant-numeric:tabular-nums}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid #BFD8FB;border-top-color:var(--primary);flex:none}
.live-list{list-style:none;margin:8px 0 0;padding:0}
.live-list li{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;border-top:1px dashed #DCE8FA;font-size:13.5px}
.live-list li b{font-weight:600;color:var(--ink2)}
.live-list li .muted{font-size:12.5px;font-variant-numeric:tabular-nums}
.steps li.now .step-dot{position:relative}
.steps li.now .step-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--primary)}
@media (prefers-reduced-motion:no-preference){
  .live-bar span{animation:live-slide 1.6s ease-in-out infinite}
  .spinner,.steps li.now .step-dot::after{animation:spin .9s linear infinite}
}
@keyframes live-slide{from{left:-35%}to{left:100%}}
@keyframes spin{to{transform:rotate(360deg)}}
.steps.stopped li.now .step-dot::after{display:none}
@media (max-width:640px){.live-list li{grid-template-columns:1fr auto}.live-list li span:not(.muted){grid-column:1/-1;order:3}}

/* ---------- warnings in the submit form ---------- */
.mismatch{list-style:none;margin:12px 0 0;padding:0}
.mismatch li{padding:9px 12px;border-radius:10px;background:var(--warn-wash);color:#8A4B00;font-size:13.5px;margin-bottom:6px}
.howto{margin:4px 0 8px;padding-left:20px;color:var(--ink2)}
.howto li{margin:4px 0}
.operation-link{margin:0 0 10px}
.operation pre{background:var(--line2);border-radius:10px;padding:12px;font-size:13px;max-height:320px;overflow:auto}

/* Book practice (이론 연습문제): chapter tiles, problem rows, one problem with its upload. */
.pb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0 0 28px}
.pb-tile{display:flex;flex-direction:column;gap:6px;padding:13px 15px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.pb-tile:hover{border-color:#A8C8F5;text-decoration:none}
.pb-tile[aria-current]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.pb-tile-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.pb-tile b{font-size:14.5px;line-height:1.45;letter-spacing:-.015em}
.pb-progress{display:block;height:4px;margin-top:auto;background:var(--line2);border-radius:2px;overflow:hidden}
.pb-chapter{margin-bottom:30px}
.pb-chapter h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.pb-chapter h2 span{font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.pb-chapter h3{font-size:14px;color:var(--muted);font-weight:600;margin:16px 0 8px}
.pb-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pb-list li+li{border-top:1px solid var(--line2)}
.pb-row{display:grid;grid-template-columns:64px minmax(0,1fr) 40px 120px;align-items:center;gap:12px;padding:12px 16px;color:var(--ink)}
.pb-row:hover{background:#FAFBFC;text-decoration:none}
.pb-id{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.pb-q{font-size:14.5px;line-height:1.55}
.pb-pts{font-size:13px;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.pb-state{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.pb-none{font-size:12.5px;color:var(--faint)}
.pb-count{font-size:12px;color:var(--muted)}
.pb-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:13.5px;font-weight:600}
.pb-steps{display:flex;gap:16px}
.pb-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:10px}
.pb-title{font-size:21px;line-height:1.6;letter-spacing:-.025em;font-weight:700;margin-bottom:8px}
.pb-title p+p{font-size:17px;font-weight:600;margin-top:4px}
.pb-submit form{max-width:980px;gap:12px}
.pb-submit input[type=file]{padding:16px;border:1px dashed #A8C8F5;border-radius:10px;background:#F7FBFF;width:100%}
.pb-submit .btn{justify-self:start}
.pb-hint{color:var(--muted);font-size:13.5px;line-height:1.8}
.pb-attempts{list-style:none;margin:0;padding:0}
.pb-attempts li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.pb-attempts li:first-child{border-top:0}
.pb-book details{border-top:1px solid var(--line2);padding:12px 0 4px}
.pb-book summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--primary-strong)}
.pb-book .callout{margin:12px 0 4px}
.pb-outline{list-style:none;margin:10px 0 4px;padding:0}
.pb-outline>li{margin:6px 0}
.pb-outline b{margin-left:8px;color:var(--primary-strong);font-size:13.5px}
.pb-outline ul{list-style:none;margin:3px 0 0;padding-left:14px;color:var(--ink2);font-size:14px}
.pb-answer{margin-top:10px;font-size:15px;line-height:1.85;max-width:46em}
.pb-answer p{margin:0 0 8px}
.pb-answer p.h{font-weight:700;margin-top:14px}
@media (max-width:640px){.pb-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px}.pb-id{grid-column:1/-1}.pb-pts{display:none}
 .pb-title{font-size:18px}.pb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pb-chapter h2{flex-direction:column;gap:2px}}

/* 1차 home and setup */
.fx-subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.fx-subject{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:border-color .15s,box-shadow .15s}
.fx-subject:not(.off):hover{border-color:#A8C8F5;box-shadow:0 4px 14px rgba(49,130,246,.08)}
.fx-subject-link{color:inherit}.fx-subject-link:hover{text-decoration:none}
.fx-subject-link::after{content:"";position:absolute;inset:0;border-radius:14px}
.fx-subject-link:focus-visible{outline:none}.fx-subject:has(.fx-subject-link:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.fx-subject-more{position:relative;z-index:1;align-self:flex-start;font-size:13.5px;font-weight:600}
.fx-big.none{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:-.01em;padding:7px 0 4px}
.fx-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:stretch;margin-bottom:8px}
.fx-panels>.card{margin:0}
.fx-subject.off{background:#FAFBFC;border-style:dashed}
.fx-subject h2{font-size:16px;letter-spacing:-.015em}
.fx-big{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fx-big span{font-size:12.5px;font-weight:500;color:var(--muted);margin-left:6px}
.fx-meta{font-size:13px;color:var(--muted)}
.fx-links{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;font-weight:600;margin-top:2px}
.fx-weak{list-style:none;margin:0;padding:0}
.fx-weak li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.fx-weak li:first-child{border-top:0}
.fx-weak a{display:flex;align-items:center;gap:8px;color:var(--ink);min-width:0}
.fx-weak b{font-size:14px;font-weight:600}
.fx-acc{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-acc small{font-weight:500;color:var(--muted);margin-left:6px}
.fx-sessions{display:grid;gap:8px}
.fx-session{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.fx-session:hover{border-color:#A8C8F5;text-decoration:none}
.fx-session span{font-size:13.5px;color:var(--ink2)}
.fx-session small{font-size:12.5px;color:var(--muted)}
.fx-kind{display:flex;align-items:baseline;gap:10px;padding:6px 0}
.fx-kind span{font-weight:700;font-variant-numeric:tabular-nums}
.fx-kind small{color:var(--muted)}
.fx-more{margin-top:8px;font-size:14px}
/* 1차 setup: resume cards, mode cards, settings rows (label | control), chips, switches */
.fx-resume{display:grid;gap:8px;margin-bottom:18px}
.fx-resume-item{display:flex;align-items:center;gap:14px;padding:13px 14px 13px 16px;background:#fff;border:1px solid #CFE2FD;border-radius:14px;color:var(--ink)}
.fx-resume-item:hover{text-decoration:none;border-color:var(--primary)}
.fx-resume-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--primary-wash);color:var(--primary-strong);flex-shrink:0}
.fx-resume-text{display:flex;flex-direction:column;min-width:0;flex:1}
.fx-resume-text b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-resume-text small{font-size:13px;color:var(--muted)}
.fx-resume-item .btn{height:34px;font-size:13.5px;flex-shrink:0}
.fx-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.fx-mode{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
.fx-mode:hover{text-decoration:none;border-color:#A8C8F5}
.fx-mode[aria-current]{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}
.fx-mode-icon{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--line2);color:var(--ink2)}
.fx-mode[aria-current] .fx-mode-icon{background:var(--primary);color:#fff}
.fx-mode b{font-size:16px;letter-spacing:-.015em}
.fx-mode small{font-size:13px;color:var(--muted)}
.fx-form{padding:4px 24px 0}
.fx-form [hidden]{display:none!important}
.fx-row{display:grid;grid-template-columns:136px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line2)}
.fx-form>.fx-row:first-of-type{border-top:0}
.fx-row-label{display:flex;flex-direction:column;gap:3px;padding-top:8px;font-size:14px;font-weight:700;color:var(--ink2)}
.fx-row-label small{font-size:12px;font-weight:500;color:var(--faint);line-height:1.45}
.fx-row-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.fx-row .seg{flex-wrap:wrap;max-width:100%}
.fx-exam-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.fx-exam-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;color:var(--ink)}
.fx-exam-card:hover{text-decoration:none;border-color:#A8C8F5}
.fx-exam-card[aria-current]{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}
.fx-exam-card b{font-size:15px}
.fx-exam-card span{font-size:13px;color:var(--ink2)}
.fx-exam-card small{font-size:12px;color:var(--muted)}
.fx-chips{display:flex;flex-wrap:wrap;gap:8px}
.fx-chip,.fx-switch{position:relative}
.fx-chip input,.fx-switch input{position:absolute;opacity:0;width:1px;height:1px}
.fx-chip span{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:14.5px;font-weight:600;color:var(--ink2);cursor:pointer}
.fx-chip span small{font-size:12px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.fx-chip input:checked+span{border-color:var(--primary);background:var(--primary-wash);color:var(--primary-strong)}
.fx-chip input:checked+span small{color:var(--primary)}
.fx-chip input:focus-visible+span,.fx-switch input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.fx-units-box{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff}
.fx-units-box summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;font-size:14.5px}
.fx-units-box summary::-webkit-details-marker{display:none}
.fx-units-box summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.fx-units-box[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.fx-units-box summary .muted{font-size:13px}
.fx-units-tools{padding:0 14px 8px;font-size:13.5px;font-weight:600}
.fx-units-tools label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.fx-part{padding:10px 14px 12px;border-top:1px solid var(--line2)}
.fx-part-head{display:inline-flex;align-items:center;gap:8px;margin-bottom:4px;font-size:14px;cursor:pointer}
.fx-part-head small{font-size:12.5px;font-weight:500;color:var(--faint)}
.fx-part-units{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:0 10px;padding-left:22px}
.fx-unit{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 6px;border-radius:7px;font-size:13.5px;color:var(--ink2);cursor:pointer}
.fx-unit:hover{background:var(--line2)}
.fx-unit span{flex:1;min-width:0;overflow:hidden;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fx-unit small{flex:none;white-space:nowrap}
.fx-unit small{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.fx-units-box input[type=checkbox]{width:16px;height:16px;flex-shrink:0;accent-color:var(--primary)}
.fx-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fx-number{width:96px;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:15px;font-variant-numeric:tabular-nums}
.fx-quick{height:32px;min-width:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer}
.fx-quick:hover{background:var(--line2)}
.fx-switches{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:6px}
.fx-switch{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink2);cursor:pointer}
.fx-switch span{position:relative;width:40px;height:24px;border-radius:999px;background:#D1D6DB;transition:background .15s}
.fx-switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.fx-switch input:checked+span{background:var(--primary)}
.fx-switch input:checked+span::after{transform:translateX(16px)}
.fx-start{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:14px 0 18px;border-top:1px solid var(--line2);background:#fff;border-radius:0 0 14px 14px}
.fx-summary{margin-right:auto;align-self:center;font-size:14px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.fx-start{gap:14px}
.fx-rate{margin-left:8px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fx-table-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.fx-table .fx-check{width:44px;padding-right:0}
.fx-check input{width:17px;height:17px;vertical-align:middle;cursor:pointer}
.btn.danger-outline{color:#D22030;border-color:#F8C6CB}
.btn.danger-outline:hover:not(:disabled){background:var(--danger-wash)}
@container content (max-width:640px){
  .fx-form{padding:0 16px}
  .fx-row{grid-template-columns:1fr;gap:8px}
  .fx-row-label{padding-top:0}
  .fx-modes,.fx-exam-cards{grid-template-columns:1fr}
}
@media (pointer:coarse){.fx-quick,.fx-number{height:44px}.fx-unit{min-height:44px}.fx-chip span{height:44px}}
@media (prefers-reduced-motion:reduce){.fx-switch span,.fx-switch span::after,.fx-units-box summary::after{transition:none}}
.fx-note{font-size:14px;line-height:1.7;background:var(--primary-wash);color:var(--ink2);border-radius:10px;padding:12px 14px}
.fx-setup .btn{justify-self:start}

/* ---------- 1차 단원별 풀이 (subject page) ---------- */
.fx-tabs{display:flex;width:max-content;max-width:100%;overflow-x:auto;margin:-4px 0 18px}
.fx-tabs a{white-space:nowrap}
.fx-next{margin:0 0 12px}
.fx-next button{display:flex;align-items:center;gap:16px;width:100%;padding:18px 20px 18px 22px;border:1px solid #CFE2FD;border-radius:16px;
  background:linear-gradient(110deg,#fff 55%,#F0F6FF);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.fx-next button:hover{border-color:var(--primary)}
.fx-next button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.fx-next-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fx-next-text small{font-size:13px;font-weight:600;color:var(--primary-strong)}
.fx-next-text b{font-size:20px;letter-spacing:-.02em;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-next-text>span{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fx-next .btn{flex-shrink:0;pointer-events:none}
.fx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:20px}
.fx-stats>div{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:14px 18px;border-left:1px solid var(--line2);min-width:0}
.fx-stats>div:first-child{border-left:0}
.fx-stats span{font-size:12.5px;font-weight:600;color:var(--muted)}
.fx-stats b{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fx-stats b small{font-size:13px;font-weight:500;color:var(--muted)}
.fx-stats a{font-size:13px;font-weight:600}
.fx-ublock>header{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:14px 20px;border-bottom:1px solid var(--line2)}
.fx-ublock>header h2{margin:0;font-size:16px}
.fx-ublock>header .muted{font-size:13px}
.fx-ublock-done{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.fx-ulist{list-style:none;margin:0;padding:0}
.fx-urow{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) minmax(120px,190px) 84px;align-items:center;gap:14px;
  min-height:60px;padding:10px 20px;border-top:1px solid var(--line2)}
.fx-urow:first-child{border-top:0}
.fx-urow:hover{background:#FAFBFC}
/* The whole row starts or resumes the unit; only the 틀린 문제 link sits above that layer. */
.fx-urow-go{position:absolute;inset:0;margin:0}
.fx-urow-go button{display:block;width:100%;height:100%;border:0;background:transparent;cursor:pointer}
.fx-urow-go button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.fx-ustate{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid #D1D6DB;color:#fff}
.fx-urow.is-open .fx-ustate{border-color:var(--primary);background:radial-gradient(circle,var(--primary) 0 3.5px,transparent 4px)}
.fx-urow.is-done .fx-ustate{border-color:var(--success);background:var(--success)}
.fx-uname{display:flex;flex-direction:column;min-width:0}
.fx-uname b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-uname small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fx-urow-wrong{position:relative;z-index:1;font-weight:600}
.fx-uprog{display:flex;flex-direction:column;gap:5px;min-width:0}
.fx-uprog .pb-progress{margin:0}
.fx-uprog small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-urow.is-done .meter-fill{background:var(--success)}
.fx-uact{justify-self:end;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:9px;background:var(--line2);
  color:var(--ink2);font-size:13.5px;font-weight:600;white-space:nowrap}
.fx-urow:hover .fx-uact{background:var(--primary-wash);color:var(--primary-strong)}
.fx-urow.is-next .fx-uact{background:var(--primary);color:#fff}
.fx-urow.is-next::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
@container content (max-width:720px){
  .fx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-stats>div:nth-child(3){border-left:0}
  .fx-stats>div:nth-child(n+3){border-top:1px solid var(--line2)}
  .fx-urow{grid-template-columns:20px minmax(0,1fr) auto;row-gap:6px;padding:12px 16px}
  .fx-uprog{grid-column:2;grid-row:2}
  .fx-uact{grid-column:3;grid-row:1/span 2}
  .fx-ublock>header{padding:12px 16px}
}
@container content (max-width:520px){
  .fx-next button{flex-direction:column;align-items:stretch}
  .fx-next-text b{white-space:normal}
}

/* ---------- 2026-11 구조 개편: subject marks, friends, home dashboard, book TOC, wizard, 2차 subject ---------- */
.sb-items{display:flex;flex-direction:column;gap:1px}
.sb-fold-toggle{display:flex;align-items:center;gap:6px;width:100%;min-height:30px;margin:0;border:0;border-radius:8px;background:transparent;
  font:inherit;font-size:12px;font-weight:700;color:var(--faint);text-align:left;cursor:pointer}
.sb-fold-toggle:hover{background:var(--line2);color:var(--ink2)}
.sb-chev{width:7px;height:7px;margin-left:auto;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.sb-fold.is-folded .sb-chev{transform:rotate(-45deg)}
.sb-fold.is-folded .sb-items{display:none}
.collapsed .sb-fold .sb-items{display:flex}
@media (any-pointer:coarse),(max-width:1280px){.sb-fold-toggle{min-height:40px}}
@media (prefers-reduced-motion:reduce){.sb-chev{transition:none}}
.sb-mark{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:12px;font-weight:800;letter-spacing:0;
  background:var(--line2);color:var(--ink2)}
.sm-민법{background:#E8F3FF;color:#1B64DA}.sm-경제학원론{background:#E6F8EF;color:#00804A}.sm-부동산학원론{background:#FFF4E0;color:#B45F06}
.sm-감정평가관계법규{background:#F0EBFF;color:#6741D9}.sm-회계학{background:#FFEEF3;color:#C2255C}
.sm-실무{background:#E8F3FF;color:#1B64DA}.sm-이론{background:#F0EBFF;color:#6741D9}.sm-법규{background:#FFF0E6;color:#C2410C}
.sb-link[aria-current] .sb-mark{box-shadow:0 0 0 1.5px currentColor inset}
.logo:has(.mascot){background:#FFF6F8;border:1px solid #F6D9E1;overflow:hidden}
.logo .mascot{width:28px;height:28px;margin-top:3px}
.mascot{display:inline-block;flex:none;overflow:visible}
.friends{display:inline-flex;align-items:flex-end;gap:0}
.friends .mascot{margin-right:-8px}
.friends .mascot:nth-child(2){transform:translateY(4px)}
@media (prefers-reduced-motion:no-preference){
  .friends .mascot{animation:hop 2.8s ease-in-out infinite}
  .friends .mascot:nth-child(2){animation-delay:.35s}.friends .mascot:nth-child(3){animation-delay:.7s}
  @keyframes hop{0%,70%,100%{translate:0 0}80%{translate:0 -5px}}
}
.empty>.mascot{display:block;margin:0 auto 10px}

/* 홈 */
.hello{display:flex;align-items:center;gap:18px;padding:18px 22px;margin-bottom:16px;border-radius:18px;
  background:linear-gradient(120deg,#FFF7F9 0%,#F4F8FF 60%,#FFFBEA 100%);border:1px solid #F1E4EA}
.hello-text{flex:1;min-width:0}
.hello-text h1{font-size:23px;line-height:1.35;letter-spacing:-.025em}
.hello-text p{color:var(--ink2);margin-top:2px}
.hello-cta .btn{max-width:360px;overflow:hidden;text-overflow:ellipsis}
.sec-title{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px}
.sec-title h2{font-size:19px;letter-spacing:-.02em}
.sec-title a{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:14px;font-weight:600}
.sec-title .muted{font-size:13.5px}
.ds-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ds-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ds-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:8px;padding:14px 14px 12px;background:#fff;
  border:1px solid var(--line);border-radius:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
a.ds-card:hover{text-decoration:none;border-color:#A8C8F5;box-shadow:0 6px 18px rgba(49,130,246,.10);transform:translateY(-1px)}
.ds-top{display:flex;align-items:flex-start;gap:7px;min-width:0}
.ds-top b{font-size:15px;line-height:1.4;letter-spacing:-.02em;overflow-wrap:anywhere}
.ds-card .ring{grid-row:1;grid-column:2;width:50px;height:50px}
.ds-facts{grid-column:1/-1;margin:0;display:flex;flex-direction:column;gap:2px}
.ds-facts div{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.ds-facts dt{color:var(--muted)}.ds-facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.ds-card.off{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:#FAFBFC;border-style:dashed}
.ds-card.off b{font-size:15.5px}
.ds-wait{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.ring-track{fill:none;stroke:var(--line2);stroke-width:7}
.ring-fill{fill:none;stroke:var(--primary);stroke-width:7;stroke-linecap:round}
.ring.violet .ring-fill{stroke:#7C5CF0}
.ring.none .ring-fill{stroke:none}
.ring text{font:700 12.5px var(--font);fill:var(--ink);font-variant-numeric:tabular-nums}
.ds-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.ds-panels>.card{margin:0}
.ds-panels h2{display:flex;align-items:center;gap:6px}
.du-list{list-style:none;margin:0;padding:0}
.du-list a{display:grid;grid-template-columns:auto minmax(0,1fr) 54px auto;align-items:center;gap:8px;min-height:44px;padding:4px 0;
  border-top:1px solid var(--line2);color:var(--ink)}
.du-list li:first-child a{border-top:0}
.du-list a:hover{text-decoration:none;color:var(--primary-strong)}
.du-name{display:flex;flex-direction:column;min-width:0;font-size:14px;font-weight:600;line-height:1.35}
.du-name,.du-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-name small{font-size:11.5px;font-weight:500;color:var(--faint)}
.du-bar{height:6px;border-radius:3px;background:var(--line2);overflow:hidden}
.du-bar.ok .meter-fill{background:var(--success)}.du-bar.bad .meter-fill{background:var(--danger)}
.du-acc{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.du-acc small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.days{display:flex;align-items:flex-end;gap:5px;height:118px;margin:4px 0 10px}
.day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.day i{display:block;width:100%;max-width:18px;min-height:3px;border-radius:5px 5px 2px 2px;background:#C9DDFB}
.day.now i{background:var(--primary)}
.day small{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.day.now small{color:var(--primary-strong);font-weight:700}

/* 1차 과목: 연습문제 (book TOC) · 문제풀이 (wizard) */
.sec-nav{display:inline-flex;gap:4px;padding:4px;margin:4px 0 0;background:#EEF0F3;border-radius:12px}
.sec-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:9px;color:var(--ink2);font-weight:700;font-size:14.5px}
.sec-nav a:hover{background:#fff;text-decoration:none}
.sec{scroll-margin-top:calc(var(--hd-h) + 64px)}
.pr-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.pr-top .fx-next{margin:0}
.pr-top .fx-next button{height:100%}
.ck-card{margin:0}
.ck-card button,.ck-card.off{display:flex;align-items:center;gap:14px;width:100%;height:100%;padding:16px 18px;border:1px solid #E7DDFB;border-radius:16px;
  background:linear-gradient(110deg,#fff 50%,#F6F2FF);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.ck-card button:hover{border-color:#9D85F2}
.ck-card.off{cursor:default;background:#FAFBFC;border-style:dashed;border-color:var(--line)}
.ck-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ck-text small{font-size:13px;font-weight:700;color:#6741D9}
.ck-card.off .ck-text small{color:var(--muted)}
.ck-text b{font-size:16.5px;letter-spacing:-.02em;line-height:1.4}
.ck-text>span{font-size:13px;color:var(--muted)}
.ck-card .btn{flex-shrink:0;pointer-events:none;border-color:#CDBFF7;color:#5B3CC4}
.toc-card{padding:16px 22px 18px}
.toc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12.5px;color:var(--ink2);margin-bottom:10px}
.toc-legend span[class^=lg-]{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.toc-legend span[class^=lg-]::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid #C5CCD3}
.toc-legend .lg-open::before{border-color:var(--primary);background:radial-gradient(circle,var(--primary) 0 2px,transparent 2.5px)}
.toc-legend .lg-done::before{border-color:var(--success);background:var(--success)}
.toc{list-style:none;margin:0;padding:0;columns:2 340px;column-gap:36px;column-rule:1px solid var(--line2)}
.toc-part{break-inside:auto;margin-bottom:12px}
.toc-head{display:flex;align-items:baseline;gap:8px;padding:10px 4px 6px;border-bottom:2px solid var(--ink);break-after:avoid}
.toc-head b{font-size:15.5px;letter-spacing:-.02em}
.toc-head small{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.toc-part ol{list-style:none;margin:0;padding:0}
.toc-item{break-inside:avoid}
.toc-go{margin:0}
.toc-go button{display:flex;align-items:center;gap:10px;width:100%;max-width:100%;overflow:hidden;min-height:46px;padding:6px 6px;border:0;border-bottom:1px solid var(--line2);
  background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer;border-radius:0}
.toc-go button:hover{background:#F5F8FF}
.toc-go button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:6px}
.toc-no{flex:none;width:26px;font-size:12.5px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.toc-main{display:flex;flex-direction:column;flex:0 1 auto;min-width:0;overflow:hidden}
.toc-name{min-width:0;font-size:15px;font-weight:600;line-height:1.4}
.toc-sub{font-size:12px;font-weight:500;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-page{flex:none;min-width:30px;text-align:right;font-size:14px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.fx-unit-no{flex:none;min-width:20px;font-size:12px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.toc-lead{flex:1 1 12px;min-width:12px;align-self:center;border-bottom:2px dotted #D5DAE0;transform:translateY(4px)}
.toc-item .toc-state{margin-left:2px}
.toc-state{flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:999px;background:var(--line2);
  color:var(--muted);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.toc-item.is-open .toc-state{background:var(--primary-wash);color:var(--primary-strong)}
.toc-item.is-done .toc-state{background:var(--success-wash);color:#00804A}
.toc-item.is-next .toc-go button{background:linear-gradient(90deg,#EEF5FF,transparent);box-shadow:inset 3px 0 0 var(--primary)}
.toc-item.is-next .toc-no{color:var(--primary)}
.wz{padding:0;overflow:hidden}
.wz [hidden]{display:none!important}
.wz-progress{display:flex;gap:0;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line2);counter-reset:wz}
.wz-progress li{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-size:14px;font-weight:700;color:var(--faint);
  counter-increment:wz;border-bottom:3px solid transparent;cursor:pointer}
.wz-progress li::before{content:counter(wz);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line2);font-size:12px}
.wz-progress li.now{color:var(--primary-strong);border-bottom-color:var(--primary)}
.wz-progress li.now::before{background:var(--primary);color:#fff}
.wz-progress li.done{color:var(--ink2)}
.wz-progress li.done::before{background:var(--success);color:#fff}
.wz:not(.js) .wz-progress{display:none}
.wz-step{border:0;margin:0;padding:18px 22px 6px;min-width:0}
.wz:not(.js) .wz-step+.wz-step{border-top:1px solid var(--line2)}
.wz-step legend{display:flex;align-items:center;gap:8px;float:left;width:100%;margin-bottom:12px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.wz-step legend+*{clear:both}
.wz-no{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--primary-wash);color:var(--primary-strong);font-size:13px}
.wz-help{font-size:13.5px;color:var(--muted);margin-bottom:10px}
.wz-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.wz-pick{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;min-height:72px;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}
.wz-pick input{position:absolute;opacity:0;width:1px;height:1px}
.wz-pick-icon{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--line2);color:var(--ink2)}
.wz-pick b{font-size:15.5px;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.wz-pick small{font-size:13px;color:var(--muted);line-height:1.45}
.wz-pick:hover{border-color:#A8C8F5}
.wz-pick:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}
.wz-pick:has(input:checked) .wz-pick-icon{background:var(--primary);color:#fff}
.wz-pick:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.wz-pick.off{opacity:.5;cursor:not-allowed}
.wz-row{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line2)}
.wz-row:first-of-type{border-top:0}
.wz-row>.fx-note{grid-column:1/-1}
.wz-label{font-size:14px;font-weight:700;color:var(--ink2)}
.wz-row .seg{justify-self:start}
.ms-path:has(.is-next){padding-top:30px}
.wz input[type=number]:disabled{opacity:.4}
.wz-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--line2);background:#fff}
.wz-foot .fx-summary{flex:1;text-align:right}
.wz:not(.js) [data-wz-prev],.wz:not(.js) [data-wz-next]{display:none}
.wz .fx-units-box{margin-bottom:12px}

/* 2차 과목 */
.today{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px 20px;margin:0 0 8px;border-radius:18px;
  background:linear-gradient(120deg,#FFFBEA,#F7F3FF);border:1px solid #EFE6D0}
.today-who{display:flex;align-items:center;gap:10px}
.today-who p{display:flex;flex-direction:column}
.today-who b{font-size:17px;letter-spacing:-.02em}
.today-who span{font-size:13px;color:var(--muted)}
.habits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.habit{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.habit:hover{text-decoration:none;border-color:var(--primary)}
.type-card{display:flex;align-items:center;gap:16px;color:var(--ink)}
.type-card:hover{text-decoration:none;border-color:var(--primary)}
.type-card>span:not(.btn){flex:1;display:flex;flex-direction:column;gap:2px}
.type-card b{font-size:16px}.type-card small{color:var(--muted);font-size:13.5px}
.todo-list{list-style:none;margin:0;padding:0}
.todo-list a{display:flex;flex-direction:column;gap:2px;min-height:56px;padding:11px 18px;border-top:1px solid var(--line2);color:var(--ink)}
.todo-list li:first-child a{border-top:0}
.todo-list a:hover{background:#FAFBFC;text-decoration:none}
.todo-list b{font-size:14.5px}
.todo-list small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.quiet{display:flex;align-items:center;gap:14px;background:#FCFCFD}
@container content (max-width:860px){
  .ds-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ds-panels{grid-template-columns:1fr 1fr}
  .ds-panels>.card:last-child{grid-column:1/-1}
  .habits{grid-template-columns:1fr}
  .today{grid-template-columns:1fr}
}
@container content (max-width:720px){
  .pr-top,.wz-picks{grid-template-columns:1fr}
  .ds-grid.three{grid-template-columns:1fr}
  .ds-panels{grid-template-columns:1fr}
  .hello{flex-wrap:wrap}
  .hello-cta{width:100%}.hello-cta .btn{width:100%;max-width:none}
  .wz-row{grid-template-columns:1fr;gap:6px}
}

/* 친구들: pictures, speech bubbles in each friend's colour */
.logo-pic{flex:none;width:32px;height:32px;border-radius:50%}
img.mascot{object-fit:contain;user-select:none;-webkit-user-drag:none}
img.friends{flex:none;object-fit:contain}
img.scene{flex:none;display:block;object-fit:cover;border-radius:18px;user-select:none;-webkit-user-drag:none;box-shadow:0 2px 0 rgba(25,31,40,.06)}
.empty>img.scene{margin:0 auto 12px}
.hello-pic{border-radius:22px}
.say img.scene{border-radius:16px}
@media (prefers-reduced-motion:no-preference){
  img.friends,.m-cheer{animation:hop 2.6s ease-in-out infinite}
  @keyframes hop{0%,70%,100%{translate:0 0}80%{translate:0 -6px}}
}
.say{display:flex;align-items:flex-end;gap:10px;margin:12px 0}
.say .mascot{flex:none}
.bubble{position:relative;flex:1;min-width:0;max-width:560px;padding:10px 14px 11px;border-radius:16px 16px 16px 6px;
  background:#FFF0F4;border:1.5px solid #F6C9D6;color:var(--ink)}
.bubble::before{content:"";position:absolute;left:-8px;bottom:8px;width:12px;height:12px;background:inherit;border-left:inherit;border-bottom:inherit;
  transform:rotate(45deg);border-radius:0 0 0 3px}
.bubble b{display:block;font-size:12px;font-weight:800;opacity:.75;margin-bottom:1px}
.bubble p{font-size:15px;font-weight:600;line-height:1.5;letter-spacing:-.01em}
.bubble .btn{margin-top:8px}
.say-hachiware .bubble{background:#EAF4FF;border-color:#B9D8F7}
.say-usagi .bubble{background:#FFF8D6;border-color:#F0D77E}
.say-momonga .bubble{background:#F6EEF9;border-color:#DCC4E3}
.say-rakko .bubble{background:#F1F3F5;border-color:#C9D0D6}
.say-kurimanju .bubble{background:#F1F8E6;border-color:#CFE3AE}
.say-shisa .bubble{background:#FFF3E8;border-color:#F7C9A0}
.hello .say{margin:8px 0 0}
.hello .bubble{max-width:520px}
.today .say{grid-column:1/-1;margin:2px 0 0}

/* 꽝: rubber stamps (picture) and the slam */
.stamp-img{display:inline-block;flex:none;object-fit:contain;transform:rotate(-12deg);mix-blend-mode:multiply;user-select:none}
.stamp-img.pre{opacity:0}
.stamp-img.slam,.stamp.slam{animation:slam .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes slam{0%{opacity:0;transform:scale(3.2) rotate(-28deg)}55%{opacity:1;transform:scale(.86) rotate(-10deg)}
  75%{transform:scale(1.07) rotate(-13deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
.shake{animation:shake .32s ease-out}
@keyframes shake{0%,100%{translate:0 0}25%{translate:-3px 2px}50%{translate:3px -2px}75%{translate:-2px 1px}}
/* first.mjs result stamp: <span class="stamp big [finish|pass] slam"><b>완료</b><small>unit</small></span> */
.stamp{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;width:96px;height:96px;
  background:url(/assets/chars/stamp-done.webp) center/contain no-repeat;transform:rotate(-12deg);mix-blend-mode:multiply}
.stamp.big{width:132px;height:132px}
.stamp.finish{background-image:url(/assets/chars/stamp-finish.webp)}
.stamp.pass{background-image:url(/assets/chars/stamp-pass.webp)}
.stamp b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stamp small{position:absolute;top:100%;margin-top:4px;max-width:150px;font-size:11.5px;font-weight:700;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(12deg)}
.stamp-burst{position:relative;display:inline-block}
.stamp-pow{position:absolute;left:50%;top:44%;font:900 30px/1 var(--font);color:#E5394A;letter-spacing:-.04em;pointer-events:none;
  text-shadow:2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff;animation:pow .9s .28s ease-out both}
@keyframes pow{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}35%{opacity:1;transform:translate(-50%,-120%) scale(1.25)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.slam-toast{position:fixed;right:20px;bottom:20px;z-index:90;max-width:min(420px,calc(100vw - 40px));animation:toast-in .35s ease-out both}
.slam-toast .say{margin:0;filter:drop-shadow(0 10px 24px rgba(25,31,40,.16))}
@keyframes toast-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stamp-img.slam,.stamp.slam,.stamp-pow,.slam-toast,.shake{animation:none}.stamp-pow{display:none}}
.toc-go button{position:relative}
.toc-stamp{margin:-8px -4px -8px -2px}
.toc-head{position:relative}
.toc-part-stamp{margin:-14px 0 -12px}

/* 마일스톤 */
.ms-strip{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;margin:0 0 16px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.ms-strip:hover{text-decoration:none;border-color:var(--primary)}
.ms-strip>.i{color:#E5394A}
.ms-strip-text{display:flex;flex-direction:column;min-width:0}
.ms-strip-text b{font-size:14.5px}.ms-strip-text small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-strip-bar{flex:1;max-width:220px;margin:0}
.ms-strip-stamps{display:flex;gap:2px;margin-left:auto}
.ms-strip-count{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink2)}
.ms-map{padding:18px 22px 20px}
.ms-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:12px}
.ms-head h2{margin:0;font-size:17px}
.ms-head .btn{margin-left:auto}
.ms-track{position:relative;height:10px;margin:22px 4px 18px;background:var(--line2);border-radius:5px}
.ms-track>.meter-fill{background:linear-gradient(90deg,#F6A5B8,#E5394A)}
.ms-walker{position:absolute;bottom:2px;transform:translateX(-50%);line-height:0}
.ms-part{margin-top:14px}
.ms-part-name{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.ms-part-name b{font-size:14.5px}.ms-part-name small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ms-path{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-wrap:wrap;gap:16px 6px}
.ms-node{position:relative;display:flex;flex-direction:column;align-items:center;width:64px;text-align:center}
.ms-node::after{content:"";position:absolute;top:21px;left:calc(50% + 22px);width:calc(100% - 38px);border-top:3px dotted #D5DAE0}
.ms-node:last-child::after{display:none}
.ms-node.is-done::after{border-top-style:solid;border-color:#F6A5B8}
.ms-dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2.5px solid #D5DAE0;font-size:13px;font-weight:800;
  color:var(--faint);font-variant-numeric:tabular-nums}
.ms-node.is-open .ms-dot{border-color:var(--primary);color:var(--primary-strong);box-shadow:0 0 0 4px var(--primary-wash)}
.ms-node.is-done .ms-dot{border-color:#F6A5B8;color:#E5394A;background:#FFF5F7}
.ms-node .ms-stamp{position:absolute;top:-4px;left:50%;margin-left:-23px}
.ms-node small{margin-top:4px;font-size:11px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-node.is-next>.mascot{position:absolute;top:-30px;z-index:1}
.ms-node.is-next .ms-dot{border-color:var(--primary)}
.ms-goal{width:76px}
.ms-goal .ms-flag{display:grid;place-items:center;width:44px;height:44px;font-size:24px;border-radius:50%;background:#FFFBEA;border:2.5px dashed #F0D77E}
.ms-goal .ms-stamp.big{position:static;margin:-7px 0}
.ms-group+.ms-group{margin-top:18px;padding-top:16px;border-top:1px solid var(--line2)}
.ms-group h3{font-size:14px;color:var(--ink2);margin-bottom:10px}
.ms-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ms-badge{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 10px;border-radius:14px;background:#FAFBFC;text-align:center}
.ms-badge.is-earned{background:#FFFDF6}
.ms-badge b{font-size:14px;margin-top:4px}
.ms-badge small{font-size:11.5px;color:var(--muted);line-height:1.4}
.ms-badge>span{font-size:12px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.ring.empty-badge .ring-fill{stroke:#C5CCD3}
.ring.empty-badge text{fill:var(--muted)}
@container content (max-width:720px){.ms-strip-stamps,.ms-strip-bar{display:none}}

/* 2차 단답형 */
.habits{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sa{margin-top:8px}
.sa-card{padding:20px 22px}
.sa-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px;font-size:12.5px}
.sa-count{font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums}
.sa-source{color:var(--muted)}
.sa-weak{padding:2px 8px;border-radius:999px;background:#F6EEF9;color:#7B3FA0;font-weight:700}
.sa-last{padding:2px 8px;border-radius:999px;font-weight:700;background:var(--line2);color:var(--muted)}
.sa-last.s2{background:var(--success-wash);color:#00804A}.sa-last.s0{background:var(--danger-wash);color:#D22030}
.sa-prompt{font-size:19px;line-height:1.5;letter-spacing:-.02em;margin-bottom:6px}
.sa-context{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.sa-answer{width:100%;min-height:132px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:16.5px;line-height:1.7;resize:vertical}
.sa-answer:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}
.sa-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.sa-wait{margin-top:12px;color:var(--muted);font-weight:600}
.sa-result{margin-top:16px;padding-top:16px;border-top:1px solid var(--line2)}
.sa-verdict{display:flex;align-items:center;gap:10px}
.sa-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:22px;font-weight:900;color:#fff;background:var(--faint)}
.sa-result.s2 .sa-mark{background:var(--success)}.sa-result.s1 .sa-mark{background:#E8A400}.sa-result.s0 .sa-mark{background:var(--danger)}
.sa-verdict span{font-size:16px;font-weight:700}
.sa-meta{margin-left:auto;color:var(--faint);font-size:12px}
.sa-friend{margin:10px 0}
.sa-feedback{font-size:15px;line-height:1.7}
.sa-lists{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin-top:10px;font-size:14px}
.sa-lists b{color:var(--muted);font-size:13px}
.sa-lists ul{margin:0;padding-left:18px}
.sa-miss li{color:#B4232F}
.sa-ref{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:#FAFBFC}
.sa-ref summary{min-height:44px;display:flex;align-items:center;padding:0 14px;font-weight:600;cursor:pointer}
.sa-ref-text{padding:0 14px 14px;white-space:pre-wrap;font-size:14.5px;line-height:1.75}
.sa-tally{display:flex;gap:14px;font-size:18px;margin:6px 0 12px}
.sa-tally .s2{color:#00804A}.sa-tally .s1{color:#B37A00}.sa-tally .s0{color:#D22030}
.sa-review{margin:0;padding-left:0;list-style:none}
.sa-review li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line2);font-size:14px}
.sa-review li b{flex:none;width:22px;text-align:center}
.sa-review li.s2 b{color:#00804A}.sa-review li.s1 b{color:#B37A00}.sa-review li.s0 b{color:#D22030}
/* 문제 고르기: count, order and 범위 (several mixed) */
.sa-setup{margin:14px 0 4px;padding:0}
.sa-setup>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:52px;padding:10px 18px;cursor:pointer;list-style:none}
.sa-setup>summary::-webkit-details-marker{display:none}
.sa-setup>summary::after{content:'바꾸기';margin-left:auto;color:var(--primary);font-size:13.5px;font-weight:700}
.sa-setup[open]>summary::after{content:'접기'}
.sa-setup-title{font-weight:800}
.sa-setup-now{color:var(--muted);font-size:14px}
.sa-form{padding:0 18px 16px;border-top:1px solid var(--line2)}
.sa-groups{margin:12px 0 0;padding:0;border:0;min-width:0}
.sa-groups legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:0;margin-bottom:8px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.sa-groups legend .muted{font-weight:500}
.btn.sm{height:30px;padding:0 10px;font-size:13px;border-radius:8px}
.sa-shelf{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 10px;align-items:start;padding:8px 0;border-top:1px solid var(--line2)}
.sa-shelf>b{font-size:13px;color:var(--muted);padding-top:7px}
.sa-chips{display:flex;flex-wrap:wrap;gap:6px}
.sa-chip{position:relative;display:inline-flex}
.sa-chip input{position:absolute;opacity:0;width:1px;height:1px}
.sa-chip span{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;color:var(--muted);cursor:pointer}
.sa-chip span small{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.sa-chip input:checked+span{border-color:var(--primary);background:var(--primary-wash);color:var(--primary);font-weight:700}
.sa-chip input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:640px){.sa-shelf{grid-template-columns:1fr}.sa-shelf>b{padding-top:0}}
/* 계속 풀기: the next card at once, earlier answers graded (streamed) underneath */
.sa-hint{margin-top:8px;font-size:12.5px;color:var(--faint)}
.sa-hint kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:#fff;font:inherit;font-size:11.5px;color:var(--ink2)}
.sa-question{margin:0 0 12px;border:1px solid var(--line2);border-radius:10px;background:#FAFBFC}
.sa-question summary{min-height:38px;display:flex;align-items:center;padding:0 12px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.sa-question-text{padding:0 12px 12px;white-space:pre-wrap;font-size:14px;line-height:1.75}
.sa-feed{display:grid;gap:10px;margin-top:14px}
.sa-feed:empty{display:none}
.sa-item{padding:14px 18px}
.sa-item-head{display:flex;align-items:center;gap:12px}
.sa-item .sa-mark{width:36px;height:36px;font-size:18px;flex:none}
.sa-item.s2 .sa-mark{background:var(--success)}.sa-item.s1 .sa-mark{background:#E8A400}.sa-item.s0 .sa-mark{background:var(--danger)}
.sa-item.pending .sa-mark{background:var(--line);color:var(--muted)}
.sa-item-title{display:flex;gap:8px;min-width:0;font-size:14.5px;font-weight:700;line-height:1.5}
.sa-item-title .sa-count{flex:none}
.sa-mine{margin:8px 0 0;font-size:13.5px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.sa-item .sa-lists{margin-top:8px}
.sa-item .sa-feedback{margin:8px 0 0}
.sa-feedback.typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--primary);animation:sa-caret 1s steps(1) infinite}
@keyframes sa-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sa-feedback.typing::after{animation:none}}
.sa-item .sa-ref{margin-top:10px}
.sa-item-actions{display:flex;justify-content:flex-end;margin-top:8px}

/* 1차 계산 단답형: the question as the book sets it (data tables, ㄱ·ㄴ box), then one amount field */
.fs-link{display:flex;align-items:center;gap:16px;padding:16px 18px;color:inherit;text-decoration:none}
.fs-link:hover{border-color:var(--primary)}
.fs-link-text{display:grid;gap:3px;flex:1;min-width:0}
.fs-link-text span{color:var(--muted);font-size:13.5px}
.fs-controls{display:flex;flex-wrap:wrap;gap:10px 16px;margin:14px 0 4px}
.fs-pick{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.fs-pick span{white-space:nowrap}
.fs-pick select{width:auto;max-width:min(420px,62vw)}
.fs-stem{font-size:17.5px;font-weight:700}
.fs-line{margin:5px 0;font-size:15px;line-height:1.7;white-space:pre-wrap}
.fs-ask{margin-top:9px;font-weight:700}
.fs-box{margin:10px 0 12px;padding:9px 14px;border:1px solid #333;font-size:14.5px;line-height:1.7}
.fs-box p+p{margin-top:4px}
.fs-table-wrap{margin:10px 0 12px;overflow-x:auto}
.fs-table{width:100%;border-collapse:collapse;border-top:1.5px solid #222;border-bottom:1.5px solid #222;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
.fs-table caption{padding-bottom:3px;font-weight:700;text-align:center}
.fs-table th,.fs-table td{padding:4px 9px;border:1px solid #b4b9c1;border-top:0;text-align:center;vertical-align:middle}
.fs-table tr>*:first-child{border-left:0}.fs-table tr>*:last-child{border-right:0}
.fs-table th{background:#eef1f5;font-weight:700}
.fs-table td.num{text-align:right}
.fs-field{display:flex;align-items:center;gap:8px;margin-top:16px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;max-width:420px}
.fs-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}
.fs-unit{color:var(--muted);font-size:18px;font-weight:700}
.fs-field input.fs-amount{flex:1;width:auto;min-width:0;height:52px;padding:0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;
  font:inherit;font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.fs-hint{margin-top:6px;color:var(--faint);font-size:12.5px}
.fs-choices{display:grid;gap:4px;margin:4px 14px 10px;padding:0;list-style:none;font-variant-numeric:tabular-nums}
.fs-choices li{display:flex;gap:10px;padding:6px 10px;border-radius:10px;font-size:15px}
.fs-choices li.is-answer{background:var(--success-wash);color:#00804A;font-weight:700}
.fs-no{width:20px;text-align:center}
.fs-meta{margin:0 14px 6px;color:var(--faint);font-size:12.5px}
.fs-explain{padding:0 14px 14px;font-size:14.5px;line-height:1.75}
.fs-explain p{margin:2px 0;white-space:pre-wrap}
.fs-scan-img{display:block;width:100%;max-width:820px;height:auto;margin:0 auto 10px;padding:0 14px}
.fs-topic{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:4px}
.fs-statement{margin:12px 0 4px;padding:14px 16px;border-left:4px solid var(--primary);border-radius:0 12px 12px 0;background:var(--primary-wash);font-size:18px;font-weight:700}
.fs-ox{display:flex;gap:10px;margin:14px 0 10px}
.fs-ox.is-missing .fs-ox-btn{border-color:var(--danger)}
.fs-ox-btn{width:72px;height:56px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font:inherit;font-size:24px;font-weight:900;color:var(--ink2);cursor:pointer}
.fs-ox-btn:hover{border-color:var(--primary)}
.fs-ox-btn[aria-pressed=true]{border-color:var(--primary);background:var(--primary);color:#fff}
.sa-answer.fs-reason{min-height:88px}

/* Touch: Android tablets (S Pen or finger) are 800–1280 CSS px wide; every control gets a 44px target. */
@media (any-pointer:coarse),(max-width:1280px){
  .btn{height:auto;min-height:44px}
  .btn.lg{min-height:48px}
  .icon-btn{width:44px;height:44px}
  .sb-link,.sb-recent{min-height:44px}
  .sb-toggle{width:44px;height:44px}
  .tabs a{display:inline-flex;align-items:center;min-height:44px}
  .seg-item span{height:44px}
  .fx-quick,.fx-number{height:44px}
  .fx-unit{min-height:44px}
  .fx-chip span{height:44px}
  .fx-units-box summary{min-height:48px}
  .fx-part-head{min-height:44px}
  .fx-units-box input[type=checkbox]{width:20px;height:20px}
  .fx-check input{width:22px;height:22px}
  .fx-switch{min-height:44px}
  .fx-resume-item .btn{min-height:40px}
  .menu-list a{min-height:44px;display:flex;align-items:center}
  .row-actions .icon-btn{width:44px;height:44px}
}

/* ---------- page change in progress ---------- */
html.navigating::before{content:"";position:fixed;left:0;top:0;z-index:100;height:3px;width:100%;background:var(--primary);
  transform-origin:left;animation:nav-progress 1.4s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes nav-progress{from{transform:scaleX(.05)}to{transform:scaleX(.85)}}
@media (prefers-reduced-motion:reduce){html.navigating::before{animation:none;transform:scaleX(.6)}}

/* ---------- 2차 typing practice (fork B) ---------- */
.study-placed{margin:0 0 10px;padding:8px 11px;border-radius:9px;background:#FFF6E5;color:#8A5300;font-size:13.5px;line-height:1.55}
/* Shared upload drop zone (portal_ui.upload_zone + upload.js): one look for every file input. */
html.js .up-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.up{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.up-zone{display:flex;align-items:center;gap:14px;min-height:96px;padding:16px 18px;border:2px dashed #C5CDD6;border-radius:14px;
  background:#FCFDFE;cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s;margin:0;font-weight:400}
.up-zone:hover{border-color:var(--primary);background:#F5F9FF}
.up-input:focus-visible+.up-zone{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}
body.up-dragging .up:not(.has-files) .up-zone{border-color:#8DB6F2;background:#F5F9FF}
.up.over .up-zone{border-style:solid;border-color:var(--primary);background:var(--primary-wash);box-shadow:0 0 0 3px rgba(49,130,246,.15)}
.up-input:disabled+.up-zone{opacity:.5;cursor:not-allowed}
.up-art{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--primary-wash);color:var(--primary)}
.up.over .up-art{background:#fff}
.up-text{min-width:0}
.up-text b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.up-text small{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.45}
.up.has-files .up-zone{min-height:56px;padding:8px 14px}
.up.has-files .up-art{width:40px;height:40px;border-radius:11px}
.up.has-files .up-text b{font-size:14px;font-weight:600;color:var(--ink2)}
.up-files{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.up-files:empty{display:none}
.up-chip{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.up-type{flex:none;font-size:11px;font-weight:800;letter-spacing:.02em;padding:4px 7px;border-radius:7px;background:#FFE9EA;color:#C4262E}
.up-type.md{background:#EEF0F3;color:var(--ink2)}
.up-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14.5px}
.up-size{flex:none;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.up-remove{flex:none;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:20px}
.up-remove:hover{background:var(--danger-wash);color:#B4232F}
.up-msg{margin:0;font-size:13px;color:var(--muted)}
.up-msg:empty{display:none}
.up-msg.bad{color:#B4232F}
/* 답안 등록 slots: the zone with its label, required mark and hint on top */
.slots>.slot-up{padding:0}
.slot-up.main{grid-column:1/-1}
.slot-up.main .up-zone{min-height:118px}
.slot-up .slot-head{margin:0 2px}
.slot-up.has-files .slot-head .req{color:var(--success)}
.unassigned li .up-remove{width:44px;height:44px}
@media (max-width:640px){.up-zone{gap:10px;padding:14px}.up-art{width:44px;height:44px}}
.up-text b,.up-text small{word-break:keep-all}

/* ---------- 2차 손글씨 답안 entry on a book problem (fork H; the pad itself is answer-pad.css) ---------- */
.pb-pad-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 16px;padding:12px 14px;border:1px solid #CFE2FD;border-radius:14px;background:var(--primary-wash)}
.fs sub,.fs sup{font-size:.72em;line-height:0;position:relative;vertical-align:baseline}
.fs sub{top:.32em}.fs sup{top:-.42em}
.fs-figure{margin:10px 0 12px;text-align:center}
.fs-figure-img{display:inline-block;max-width:100%;height:auto;mix-blend-mode:multiply}

/* 법규 이론집 */
.lt-search{display:flex;gap:8px;margin:6px 0 18px;max-width:640px}
.lt-search input{flex:1}
.lt-part{padding:6px 18px 14px}
.lt-section{margin:14px 0 4px;font-size:14px;color:var(--muted);font-weight:700}
.lt-list{margin:0;padding:0;list-style:none}
.lt-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 4px;border-bottom:1px solid var(--line2);color:inherit;text-decoration:none}
.lt-row:hover{background:var(--line2);text-decoration:none}
.lt-row b{flex:1;font-weight:600;font-size:15px}
.lt-meta{color:var(--faint);font-size:12.5px;white-space:nowrap}
.lt-item{padding:18px 20px;margin-bottom:12px}
.lt-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:8px}
.lt-item-head b{flex:1;min-width:200px;font-size:15px}
.lt-case{padding:2px 8px;border-radius:999px;background:var(--primary-wash);color:var(--primary-strong);font-weight:700;font-size:12.5px}
.lt-source{color:var(--muted);font-size:12.5px}
.lt-path{color:var(--faint);font-size:12.5px;margin-bottom:6px}
.lt-text{font-size:15px;line-height:1.8}
.lt-related{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#FAFBFC}
.lt-related b{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.lt-related a{display:inline-block;margin:2px 10px 2px 0}

/* 1차 학습 계획 (/first/plan) */
.pl-form{display:grid;gap:12px}
.pl-card{padding:18px 20px}
.pl-card h2{font-size:16px;margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.pl-card h2 .muted{font-size:13px;font-weight:500}
.pl-card .fs-controls{margin:0 0 8px}
.pl-card input[type=date]{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;font:inherit}
.pl-goals{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.pl-goal{display:grid;gap:4px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.pl-goal input{width:100%;height:44px;border:1.5px solid var(--line);border-radius:10px;text-align:center;font:inherit;font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pl-goal input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash)}
.pl-verdict{margin:0 0 4px;padding:10px 14px;border-radius:10px;font-weight:700;font-size:15px}
.pl-verdict.ok{background:var(--success-wash);color:#00804A}
.pl-verdict.late{background:var(--danger-wash);color:#B4232F}
.pl-days{list-style:none;margin:12px 0 0;padding:0}
.pl-days>li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 14px;padding:9px 0;border-top:1px solid var(--line2)}
.pl-day{display:grid;gap:2px}.pl-day small{color:var(--faint);font-size:12px}
.pl-items{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.pl-items li{display:flex;align-items:center;gap:8px}
.pl-actions{display:flex;justify-content:flex-end}
@media (max-width:640px){.pl-goals{grid-template-columns:repeat(4,minmax(0,1fr))}.pl-days>li{grid-template-columns:1fr}}
/* 홈: 오늘 할 일 and 지난주 점검 */
.td{padding:18px 20px;margin:14px 0}
.td-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px}
.td-head h2{font-size:18px}
.td-meta{color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.td-list{list-style:none;margin:0;padding:0}
.td-list li{display:grid;grid-template-columns:18px minmax(0,1fr) 120px 56px;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line2)}
.td-list li.rest{grid-template-columns:1fr}
.td-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line)}
.td-list li.now .td-dot{border-color:var(--primary);background:var(--primary-wash)}
.td-list li.done .td-dot{border-color:var(--success);background:var(--success)}
.td-what{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px}
.td-what b{font-weight:700;overflow-wrap:anywhere}
.td-what small{color:var(--faint);font-size:12.5px}
.td-list li.done .td-what b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.td-bar{height:6px;border-radius:3px;background:var(--line2);overflow:hidden}
.td-list li.done .td-bar .meter-fill{background:var(--success)}
.td-count{text-align:right;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.td-actions{display:flex;justify-content:flex-end;margin-top:12px}
.td-go{max-width:100%;white-space:normal;text-align:left;height:auto;min-height:48px;padding:10px 20px}
.td-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.td-week{display:flex;gap:6px}
.td-wd{display:grid;place-items:center;min-width:48px;padding:4px 6px;border-radius:8px;background:var(--line2);font-size:12px;color:var(--muted)}
.td-wd b{font-size:12.5px;color:var(--ink2)}
.td-wd small{font-size:11px;font-variant-numeric:tabular-nums}
.td-wd.met{background:var(--success-wash);color:#00804A}
.td-wd.today{outline:2px solid var(--primary);outline-offset:-2px}
.td-wd.off{opacity:.55}
.td-invite p{color:var(--muted);font-size:14.5px;line-height:1.7}
.wk{padding:16px 20px;margin:0 0 14px}
.wk-comment{font-size:15px;line-height:1.75;margin:4px 0 8px;white-space:pre-wrap}
@media (max-width:640px){.td-list li{grid-template-columns:18px minmax(0,1fr) 56px}.td-bar{display:none}.td-week{flex-wrap:wrap}.td-wd{width:40px}}
/* 홈 (요약): one card per exam, D-day, the pass, today's next thing and its button */
.hm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.hm{display:flex;flex-direction:column;padding:18px 20px;margin:0}
.hm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.hm-head h2{font-size:19px;letter-spacing:-.02em}
.hm-dday{font-size:19px;font-weight:800;color:var(--primary-strong);font-variant-numeric:tabular-nums}
.hm-head small{color:var(--muted);font-size:13px}
.hm-more{margin-left:auto;font-size:14px;font-weight:600}
.hm-stat{margin:10px 0 6px;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.hm-bar{display:block;height:6px;border-radius:3px;background:var(--line2);overflow:hidden}
.hm-pace{margin:8px 0 0}
.hm-today{display:grid;gap:2px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line2)}
.hm-today small{color:var(--muted);font-size:12.5px;font-weight:600}
.hm-today b{font-size:15px;overflow-wrap:anywhere}
.hm-actions{display:flex;justify-content:flex-end;margin-top:auto;padding-top:12px}
.hm-actions form{max-width:100%}
@media (max-width:760px){.hm-grid{grid-template-columns:1fr}}
/* 2차 홈: the pass line on each subject, each book's chapters */
.td-what a{color:inherit;min-width:0}
.td-what a:hover b{color:var(--primary-strong)}
.pl-sub{margin-top:16px}
.sh-card{grid-template-rows:auto auto 1fr}
.sh-card .ds-facts{align-self:start}
.sh-pass{grid-column:1/-1;display:grid;gap:4px;padding-top:14px}
.sh-mark b{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:var(--faint)}
.sh-pass-bar{position:relative;display:block;height:8px;border-radius:4px;background:var(--line2)}
.sh-pass-bar .meter-fill{border-radius:4px;background:#7C5CF0}
.sh-pass.ok .meter-fill{background:var(--success)}
.sh-pass.warn .meter-fill{background:var(--warn)}
.sh-pass.bad .meter-fill{background:var(--danger)}
.sh-mark{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--ink2);opacity:.45}
.sh-mark.m40{left:40%}.sh-mark.m60{left:60%;opacity:.8}
.sh-pass small{font-size:12.5px;color:var(--muted)}
.sh-books{list-style:none;margin:0;padding:4px 18px}
.sh-books>li{padding:12px 0;border-top:1px solid var(--line2)}
.sh-books>li:first-child{border-top:0}
.sh-book{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sh-book a{color:var(--ink)}
.sh-count{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sh-chs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px 10px;margin-top:8px}
.sh-ch{display:grid;gap:3px;color:var(--muted);font-size:12px;min-width:0}
.sh-ch small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-ch:hover{text-decoration:none;color:var(--primary-strong)}
.sh-ch-bar{display:block;height:5px;border-radius:3px;background:var(--line2);overflow:hidden}
.sh-todo .subject{align-self:flex-start}
/* Phones: the big scene gives its width to the greeting and the friend's line; section titles wrap under. */
@container content (max-width:520px){
  .hello img.hello-pic{display:none}
  .hello{padding:16px 18px}
  .sec-title{flex-wrap:wrap}
  .sec-title h2{white-space:nowrap}
  .sec-title>.muted{order:3;flex-basis:100%}
}
.td-what small{white-space:nowrap}
/* 1차 계획: 요일 × 과목 grid. A cell is a toggle; a ticked one shows the number a day that meets the end date
   (from the preview), and each row ends with that weekday's total. */
.pw-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.pw{border-collapse:separate;border-spacing:6px;margin:0 -6px;min-width:100%}
.pw th{font-size:13px;font-weight:700;color:var(--muted);text-align:center;white-space:nowrap}
.pw thead th{padding-bottom:2px}
.pw thead th span:not(.sb-mark){display:block;font-size:12px;margin-top:4px;color:var(--ink2)}
.pw thead .sb-mark{margin:0 auto}
.pw tbody th{width:28px;font-size:14px;color:var(--ink2)}
.pw tbody tr:nth-child(6) th{color:#1B64DA}.pw tbody tr:nth-child(7) th{color:#D6336C}
.pw td{padding:0}
.pw-cell{position:relative;display:grid;place-items:center;height:48px;min-width:56px;border-radius:12px;cursor:pointer;
  transition:background-color .12s,box-shadow .12s}
.pw-cell input[type=checkbox]{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;border-radius:12px}
.pw-n{display:none;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;pointer-events:none}
.pw-cell:has(input:checked) .pw-n{display:block}
.pw-off{font-size:18px;font-weight:600;pointer-events:none}
.pw-cell:has(input:checked) .pw-off{display:none}
.pw-cell:not(:has(input:checked)){background:var(--line2);color:var(--faint)}
.pw-cell:not(:has(input:checked)):hover{background:#E9ECEF}
.pw-cell:has(input:checked){box-shadow:inset 0 0 0 1.5px currentColor}
.pw-cell:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.pw-sum,.pw-sum-h{min-width:44px;text-align:center}
.pw-sum{font-size:14px;font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums}
.pw-sum-h{font-size:12px!important}
.pl-subjects{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pl-subjects li{display:flex;align-items:center;gap:7px;padding:7px 12px 7px 8px;border:1px solid var(--line);border-radius:12px;font-size:13.5px;background:#fff}
.pl-subjects li span{font-weight:700;font-variant-numeric:tabular-nums}
.pl-subjects li small{color:var(--faint)}
@media (max-width:640px){.pw-cell{min-width:44px;height:44px}.pw thead th span:not(.sb-mark){display:none}}

/* 1차 학습 달력: FullCalendar 7 (breezy theme) in the portal's colors */
.cal{padding:14px 16px 16px;margin:0}
.cal-box{--fc-breezy-primary:var(--primary);--fc-breezy-primary-over:var(--primary-strong);--fc-breezy-primary-foreground:#fff;
  --fc-breezy-event:var(--primary);--fc-breezy-event-contrast:#fff;--fc-breezy-highlight:rgba(49,130,246,.08);--fc-breezy-now:var(--danger);
  --fc-breezy-background:#fff;--fc-breezy-foreground:var(--ink2);--fc-breezy-strong-foreground:var(--ink);
  --fc-breezy-muted-foreground:var(--muted);--fc-breezy-faint-foreground:var(--faint);
  --fc-breezy-border:var(--line);--fc-breezy-muted-border:var(--line2);--fc-breezy-strong-border:#D1D6DB;
  --fc-breezy-selected:var(--primary-wash);font-family:var(--font)}
.cal-n{font-variant-numeric:tabular-nums}
.is-sun .cal-n,.is-holiday .cal-n{color:#E5383B}
.is-sat .cal-n{color:#1B64DA}
.cal-hname{margin-left:4px;font-size:11px;font-weight:700;color:#E5383B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-flag{display:inline-block;margin-left:4px;padding:0 5px;border-radius:5px;font-size:10.5px;line-height:16px;font-weight:800;
  background:var(--ink2);color:#fff;vertical-align:1px}
.cal-flag.exam{background:var(--danger)}
.is-sel{background:var(--primary-wash)!important;box-shadow:inset 0 0 0 2px var(--primary)}
.is-today .cal-n{color:#fff!important;font-weight:800}
.cal-title{font-size:20px!important;font-weight:800!important;letter-spacing:-.02em;color:var(--ink)}
.hd-sun,.hd-sun *{color:#E5383B!important}.hd-sat,.hd-sat *{color:#1B64DA!important}
.is-holiday:not(.is-sel){background:#FFF8F8}
.ev-chip{display:flex;align-items:center;gap:4px;width:100%;min-width:0;font-size:12px;font-weight:700;line-height:18px}
.ev-mark{display:none}
.ev-long{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-n{font-variant-numeric:tabular-nums;font-weight:800}
.ev-rest{font-size:12px;font-weight:700;color:var(--faint)}
.ev-off{background:repeating-linear-gradient(135deg,#F7F8FA 0 5px,#EEF0F3 5px 10px)!important;border:0!important}
.ev-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px}
.ev-line .ev-subject{font-weight:800}
.ev-line .ev-detail{color:var(--muted);font-size:13.5px}
.cal-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.cal-key{display:inline-flex;align-items:center;gap:6px}
.cal-dot{width:10px;height:10px;border-radius:3px;background:currentColor}
.cal-dot[class*="sm-"]{background:currentColor}
.cal-dot.is-holiday{background:#E5383B}
.cal-key .cal-flag{margin:0}
a.td-wd{color:var(--muted)}
a.td-wd:hover{text-decoration:none;filter:brightness(.97)}
/* editing on the calendar: the 완료 체크 circle and × on a chip, the small card (cal-pop), the message (cal-toast) */
.cal-root{position:relative}
.ev-check{flex:none;display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px currentColor;cursor:pointer;opacity:.75}
.ev-check:hover{opacity:1}
.ev-check.on{background:currentColor;opacity:1}
.ev-check.on::after{content:"";width:6px;height:3px;margin-top:-2px;border:solid #fff;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)}
.ev-met{opacity:.6}
.ev-x{display:none;flex:none;margin-left:auto;width:16px;height:16px;border-radius:5px;text-align:center;line-height:15px;font-size:14px;
  font-weight:600;cursor:pointer;opacity:.7}
.ev-x:hover{opacity:1;background:rgba(0,0,0,.08)}
@media (hover:hover){#cal-box [role=button]:hover .ev-x{display:block}}
.ev-n+.ev-x{margin-left:auto}
.ev-tag{font-size:12px;font-weight:700;color:#00804A}
.cal-pop{position:absolute;z-index:30;width:300px;max-width:calc(100% - 16px);padding:12px 14px 14px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 14px 36px rgba(25,31,40,.16);font-size:14px}
.cal-pop.sheet{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-width:none;max-height:70vh;overflow:auto;
  box-shadow:0 -6px 30px rgba(25,31,40,.2)}
.cp-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cp-title{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.cp-close{margin-left:auto;width:28px;height:28px;border:0;border-radius:8px;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.cp-close:hover{background:var(--line2)}
.cp-units{list-style:none;margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--bg);display:grid;gap:3px;font-size:13.5px;color:var(--ink2)}
.cp-note{margin:0 0 10px;color:var(--ink2);font-size:13.5px}
.cp-label{font-size:12.5px;font-weight:700;color:var(--muted);margin:0 0 6px}
.cp-count{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.cp-count .cp-label{margin:0 auto 0 0}
.cp-count input{width:62px;height:34px;border:1px solid var(--line);border-radius:9px;text-align:center;font:inherit;font-weight:800;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cp-count input::-webkit-inner-spin-button,.cp-count input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cp-count .icon-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:17px;cursor:pointer}
.cp-count .icon-btn:hover{background:var(--line2)}
.cp-actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cp-actions .btn{height:34px}
.cp-subjects{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cp-subject{height:32px;padding:0 11px;border:1px solid color-mix(in srgb,var(--c) 35%,#fff);border-radius:9px;font:inherit;font-size:13px;
  font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 9%,#fff);cursor:pointer}
.cp-subject:hover{background:color-mix(in srgb,var(--c) 16%,#fff)}
.cp-hint{margin:2px 0 0;font-size:12px;color:var(--faint)}
.cal-toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:min(440px,calc(100vw - 32px));padding:11px 16px;border-radius:12px;
  background:#202938;color:#fff;font-size:14px;transform:translateX(-50%);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.cal-toast.bad{background:var(--danger)}
@container content (max-width:560px){
  .cal{padding:10px 6px 12px}
  .ev-long{display:none}
  .ev-mark{display:inline}
  .ev-chip{gap:2px;font-size:11px}
  .ev-check{width:12px;height:12px}
  .cal-hname{display:none}
  .cal-flag{font-size:9.5px;padding:0 3px;margin-left:2px}
}
.cal-holiday{font-size:13px;font-weight:700;color:#E5383B;margin-left:2px}
.cal-panel form{display:block}
.cal-panel .cal-count,.cal-panel .cal-move,.cal-panel .cal-add{display:flex}
.cal-panel .cal-row-head form,.cal-panel .cal-tools form{display:inline-flex}
.cal-panel .btn.sm,.cal-panel .cal-count input,.cal-panel .cal-count .icon-btn{height:34px}

/* 날짜 고르기 (datepick.js on Air Datepicker): the field, and the picker in the portal's colors with 공휴일 */
.fs-pick input.dp-field,input.dp-field{height:40px;min-width:190px;padding:0 38px 0 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14.5px;
  font-weight:600;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238B95A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 11px center;
  cursor:pointer;caret-color:transparent}
.fs-pick input.dp-field:hover,input.dp-field:hover{border-color:#C9CDD2}
.fs-pick input.dp-field:focus,input.dp-field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(49,130,246,.18)}
.air-datepicker.air-datepicker{--adp-font-family:var(--font);--adp-font-size:14px;--adp-width:320px;--adp-padding:8px;--adp-border-radius:16px;
  --adp-border-color:var(--line);--adp-border-color-inner:var(--line2);--adp-color:var(--ink);--adp-color-secondary:var(--muted);
  --adp-accent-color:var(--primary);--adp-color-current-date:var(--primary);--adp-day-name-color:var(--faint);
  --adp-background-color-hover:var(--line2);--adp-background-color-active:#E5E8EB;--adp-cell-border-radius:10px;
  --adp-cell-background-color-selected:var(--primary);--adp-cell-background-color-selected-hover:var(--primary-strong);
  --adp-day-cell-height:40px;--adp-nav-height:40px;--adp-nav-arrow-color:var(--muted);--adp-color-other-month:#C9CDD2;
  --adp-color-disabled:#C9CDD2;box-shadow:0 12px 32px rgba(25,31,40,.14)}
.air-datepicker.air-datepicker.-is-mobile-{--adp-width:min(340px,calc(100vw - 32px));--adp-day-cell-height:44px}
.air-datepicker-nav--title{font-weight:800;font-size:15.5px;color:var(--ink)}
.air-datepicker-nav--title i{color:var(--ink);font-style:normal;margin-left:4px}
.air-datepicker-body--day-name{font-weight:700;font-size:12px}
.air-datepicker-body--day-name:first-child{color:#E5383B}.air-datepicker-body--day-name:last-child{color:#1B64DA}
.air-datepicker-cell.-day-{flex-direction:column;gap:0;line-height:1.1}
.dp-n{font-variant-numeric:tabular-nums;font-weight:600}
.dp-note{max-width:100%;overflow:hidden;font-size:9.5px;font-weight:700;letter-spacing:-.04em;white-space:nowrap;margin-top:1px}
.air-datepicker-cell.dp-sat{color:#1B64DA}
.air-datepicker-cell.dp-sun,.air-datepicker-cell.dp-holiday{color:#E5383B}
.air-datepicker-cell.dp-exam .dp-note{color:var(--danger)}
.air-datepicker-cell.-other-month-.dp-sun,.air-datepicker-cell.-other-month-.dp-sat,.air-datepicker-cell.-other-month-.dp-holiday,
.air-datepicker-cell.-disabled-.dp-sun,.air-datepicker-cell.-disabled-.dp-sat,.air-datepicker-cell.-disabled-.dp-holiday{opacity:.45}
.air-datepicker-cell.-current-{font-weight:800}
.air-datepicker-cell.-selected-,.air-datepicker-cell.-selected-.dp-sun,.air-datepicker-cell.-selected-.dp-sat,
.air-datepicker-cell.-selected-.dp-holiday,.air-datepicker-cell.-selected-.dp-exam .dp-note{color:#fff}

/* GS 스터디 week page: the 문제지 as printed, the week's files */
.gs-summary{margin:8px 0 0;font-size:14px;color:var(--ink2);line-height:1.6}
.gs-sheet{margin-top:12px}
.gs-sheet summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--primary-strong)}
.gs-pages{display:grid;gap:10px;margin-top:10px}
.gs-page{width:100%;max-width:820px;border:1px solid var(--line);border-radius:10px;background:#fff}
.gs-files{display:flex;flex-wrap:wrap;gap:8px}

/* 채점 진행: 예상 시간 and the 빠른 확인 */
.eta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 0 0;font-size:14px}
.eta b{font-variant-numeric:tabular-nums}
.eta .btn{margin-left:auto}
.qc{margin-top:16px}
.qc h2 .muted{font-weight:500;margin-left:6px}
.qc-score{margin:0 0 10px;font-size:14.5px}
.qc h3{font-size:14px;margin:14px 0 6px;color:var(--ink2)}
.qc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.qc-list li{display:grid;grid-template-columns:22px 1fr;gap:2px 8px;font-size:13.5px;line-height:1.5}
.qc-mark{font-weight:900;text-align:center}
.qc-mark.ok{color:var(--success)}.qc-mark.warn{color:var(--warn)}.qc-mark.bad{color:var(--danger)}
.qc-req small{color:var(--faint)}
.qc-note{grid-column:2;color:var(--muted);font-size:13px}
.qc>.muted.small{margin:14px 0 0}