:root{
  --ink:#101823; --dim:#5a6678; --faint:#8b97a8;
  --navy:#123a60; --navy-line:#1d4d78;
  --ground:#eceff4; --card:#fff; --panel:#f6f8fa; --rule:#dbe1e9; --rule-soft:#e8edf3;
  --bio:#22664a; --bio-soft:#e2efe9;
  --chem:#87511f; --chem-soft:#f4eae0;
  --phy:#2c5290; --phy-soft:#e3eaf6;
  --warn:#99422a; --warn-soft:#f6e8e3;
  --lift:0 1px 2px rgba(14,26,44,.05), 0 6px 18px rgba(14,26,44,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8edf4; --dim:#9caabc; --faint:#6d798b;
    --navy:#8fb8e6; --navy-line:#7aa8dc;
    --ground:#080d13; --card:#121a24; --panel:#0e151e; --rule:#222d3b; --rule-soft:#1a2430;
    --bio:#6cc297; --bio-soft:#13251d;
    --chem:#d3975a; --chem-soft:#281e16;
    --phy:#86ace5; --phy-soft:#152134;
    --warn:#dd9270; --warn-soft:#291b14;
    --lift:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ink:#e8edf4; --dim:#9caabc; --faint:#6d798b;
  --navy:#8fb8e6; --navy-line:#7aa8dc;
  --ground:#080d13; --card:#121a24; --panel:#0e151e; --rule:#222d3b; --rule-soft:#1a2430;
  --bio:#6cc297; --bio-soft:#13251d;
  --chem:#d3975a; --chem-soft:#281e16;
  --phy:#86ace5; --phy-soft:#152134;
  --warn:#dd9270; --warn-soft:#291b14;
  --lift:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:'IBM Plex Sans KR','Malgun Gothic',sans-serif; font-size:14px; line-height:1.6;
  -webkit-text-size-adjust:100%}
button,input{font:inherit; color:inherit}
kbd{font-family:'IBM Plex Mono',monospace; font-size:10.5px; border:1px solid var(--rule);
  border-bottom-width:2px; border-radius:3px; padding:0 4px; color:var(--dim)}

/* ── 로그인 ── */
.signin{min-height:100%; display:grid; place-items:center; padding:24px}
.signin-card{background:var(--card); border:1px solid var(--rule); border-radius:8px;
  box-shadow:var(--lift); padding:38px 36px; max-width:420px; text-align:center;
  display:flex; flex-direction:column; gap:12px}
.signin-card h1{margin:0; font-family:'Gothic A1',sans-serif; font-weight:800;
  font-size:31px; color:var(--navy); letter-spacing:-.025em}
.signin-card p{margin:0; color:var(--dim); font-size:13.5px; line-height:1.75}
.signin-card .fine{font-size:12px; color:var(--faint)}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em;
  color:var(--faint)}
.btn.big{padding:11px 18px; font-size:14px; margin-top:6px}

/* ── 상단 ── */
.top{position:sticky; top:0; z-index:12; background:var(--card);
  border-bottom:1px solid var(--rule); padding:0 16px;
  display:flex; align-items:center; gap:18px; height:52px; flex-wrap:nowrap}
.brand{font-family:'Gothic A1',sans-serif; font-weight:800; font-size:16px;
  letter-spacing:-.02em; color:var(--navy); white-space:nowrap}
.brand em{font-style:normal; color:var(--ink)}
.subjects{display:flex; gap:0; background:var(--panel); border:1px solid var(--rule);
  border-radius:5px; padding:2px}
.subjects button{border:none; background:none; padding:5px 14px; cursor:pointer;
  border-radius:3px; font-size:13px; color:var(--dim); white-space:nowrap;
  font-weight:500; display:flex; align-items:baseline; gap:6px}
.subjects button span{font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  color:var(--faint)}
.subjects button[aria-pressed="true"]{background:var(--card); color:var(--tone);
  box-shadow:0 1px 2px rgba(14,26,44,.1); font-weight:700}
.subjects button[aria-pressed="true"] span{color:var(--tone)}
.subjects button:focus-visible{outline:2px solid var(--navy); outline-offset:1px}
.subjects button[data-s="생명"]{--tone:var(--bio)}
.subjects button[data-s="화학"]{--tone:var(--chem)}
.subjects button[data-s="물리"]{--tone:var(--phy)}
.topright{margin-left:auto; display:flex; align-items:baseline; gap:12px;
  font-size:12px; color:var(--faint); white-space:nowrap}
.corpus{font-family:'IBM Plex Mono',monospace; font-size:11px}
.who{color:var(--dim)}
.linkish{border:none; background:none; color:var(--navy); cursor:pointer; padding:0;
  text-decoration:underline; font-size:12px}

/* ── 필터 ── */
.filters{background:var(--card); border-bottom:1px solid var(--rule); padding:9px 16px;
  display:flex; flex-direction:column; gap:7px}
.frow{display:flex; align-items:flex-start; gap:9px}
.frow > h3{margin:0; flex:0 0 38px; font-size:10.5px; letter-spacing:.1em; padding-top:4px;
  color:var(--faint); font-weight:600; font-family:'IBM Plex Mono',monospace}
.opts{display:flex; flex-wrap:wrap; gap:4px; flex:1; min-width:0}
.opt{border:1px solid var(--rule); background:var(--card); border-radius:11px;
  padding:2px 10px; font-size:12px; cursor:pointer; color:var(--dim); line-height:1.7}
.opt:hover{border-color:var(--navy-line); color:var(--navy)}
.opt[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--card);
  font-weight:500}
.opt:focus-visible{outline:2px solid var(--navy); outline-offset:1px}
.fnote{display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--faint)}
.fnote .clear{border:none; background:none; color:var(--navy); cursor:pointer; padding:0;
  text-decoration:underline; font-size:11.5px}
.fnote .tally{margin-left:auto; font-family:'IBM Plex Mono',monospace}

/* ── 작업 영역 ── */
.work{display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr);
  gap:12px; padding:12px 16px 0; align-items:start}
.pane{background:var(--card); border:1px solid var(--rule); border-radius:6px;
  box-shadow:var(--lift); overflow:hidden}
.pane-hd{display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--rule); background:var(--panel)}
.search{flex:1; min-width:0; border:1px solid var(--rule); border-radius:4px;
  padding:5px 9px; font-size:12.5px; background:var(--card)}
.search:focus-visible{outline:2px solid var(--navy); outline-offset:1px}
.pane-hd .count{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--faint)}

.rows{max-height:calc(100vh - 210px); overflow-y:auto}
.row{display:grid; grid-template-columns:52px 1fr auto; gap:8px; align-items:center;
  width:100%; text-align:left; padding:8px 10px; border:none;
  border-bottom:1px solid var(--rule-soft); background:none; cursor:pointer}
.row:hover{background:var(--panel)}
.row[aria-current="true"]{background:var(--tone-soft);
  box-shadow:inset 3px 0 0 var(--tone)}
.row:focus-visible{outline:2px solid var(--navy); outline-offset:-2px}
.row .code{font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:500;
  color:var(--tone); text-align:right}
.row .meta{min-width:0}
.row .meta b{display:block; font-weight:500; font-size:12.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.row .meta i{font-style:normal; font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums}
.row .more{font-size:10px; color:var(--faint); margin-left:4px}
.row .flags{display:flex; gap:3px; align-items:center}
.dotmark{width:6px; height:6px; border-radius:50%; background:var(--navy)}
.nosolmark{font-size:9.5px; color:var(--warn); background:var(--warn-soft);
  border-radius:2px; padding:0 4px}
.row[data-s="생명"]{--tone:var(--bio); --tone-soft:var(--bio-soft)}
.row[data-s="화학"]{--tone:var(--chem); --tone-soft:var(--chem-soft)}
.row[data-s="물리"]{--tone:var(--phy); --tone-soft:var(--phy-soft)}
.empty{padding:30px 16px; color:var(--faint); font-size:13px; text-align:center}

/* ── 뷰어 ── */
.viewer{display:flex; flex-direction:column}
.vhead{display:flex; align-items:center; gap:12px; padding:9px 12px;
  border-bottom:1px solid var(--rule-soft)}
.vtitle{display:flex; align-items:baseline; gap:10px; min-width:0}
.vcode{font-family:'Gothic A1',sans-serif; font-weight:800; font-size:17px;
  color:var(--navy); letter-spacing:-.01em}
.vmeta{font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vnav{margin-left:auto; display:flex; gap:4px}
.icon{width:28px; height:28px; border:1px solid var(--rule); background:var(--card);
  border-radius:4px; cursor:pointer; font-size:16px; line-height:1; color:var(--dim)}
.icon:hover:not([disabled]){border-color:var(--navy-line); color:var(--navy)}
.icon[disabled]{opacity:.35; cursor:default}
.icon:focus-visible{outline:2px solid var(--navy); outline-offset:1px}

.vtabs{display:flex; align-items:center; gap:2px; padding:0 12px; background:var(--panel);
  border-bottom:1px solid var(--rule); overflow-x:auto}
.vtab{border:none; background:none; padding:9px 12px; cursor:pointer; font-size:12.5px;
  color:var(--dim); border-bottom:2px solid transparent; white-space:nowrap}
.vtab[aria-selected="true"]{color:var(--navy); border-bottom-color:var(--navy);
  font-weight:600}
.vtab:focus-visible{outline:2px solid var(--navy); outline-offset:-2px}
.vtabs-gap{flex:1}
.vtab.link{text-decoration:none; color:var(--faint); font-size:11.5px}
.vtab.link:hover{color:var(--navy)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px;
  background:var(--panel); align-items:start; min-height:340px}
.split.solo{grid-template-columns:minmax(0,1fr)}
.sheetcol{display:flex; flex-direction:column; gap:5px; min-width:0}
.sheetcol > h4{margin:0; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.12em; color:var(--faint); font-weight:500; display:flex;
  align-items:center; gap:8px}
.sheetcol > h4 button{margin-left:auto; border:none; background:none; cursor:pointer;
  color:var(--navy); font-size:10.5px; text-decoration:underline; padding:0}
.frame{position:relative; width:100%; aspect-ratio:210/297; background:#fff;
  border:1px solid var(--rule); border-radius:3px;
  box-shadow:0 2px 12px rgba(14,26,44,.14); overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; scrollbar-width:thin}
.sizer{position:relative; width:100%}
.frame iframe{position:absolute; top:0; left:0; width:794px; border:0;
  transform-origin:0 0; background:#fff}
.frame .loading{position:absolute; inset:0; display:grid; place-items:center;
  color:#98a3b2; font-size:12px; background:#fff}

.vfoot{display:flex; gap:8px; padding:9px 12px; border-top:1px solid var(--rule);
  background:var(--panel); flex-wrap:wrap; align-items:center}
.btn{border:1px solid var(--rule); background:var(--card); border-radius:4px;
  padding:6px 12px; font-size:12.5px; cursor:pointer}
.btn:hover:not([disabled]){border-color:var(--navy-line); color:var(--navy)}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:1px}
.btn.primary{background:var(--navy); border-color:var(--navy); color:#fff}
:root[data-theme="dark"] .btn.primary{color:#080d13}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn.primary{color:#080d13}
}
.btn[disabled]{opacity:.45; cursor:default}
.keys{margin-left:auto; font-size:11px; color:var(--faint)}

/* ── 문제함 ── */
.tray{position:sticky; bottom:0; z-index:11; padding:12px 16px 14px;
  background:linear-gradient(to top, var(--ground) 62%, transparent)}
.tray-in{background:var(--card); border:1px solid var(--rule); border-radius:6px;
  box-shadow:var(--lift); padding:8px 12px; display:flex; align-items:center; gap:10px;
  flex-wrap:wrap}
.tray-toggle{border:none; background:none; cursor:pointer; font-family:'Gothic A1',sans-serif;
  font-weight:700; font-size:12.5px; color:var(--ink); display:flex; align-items:baseline;
  gap:6px; padding:0}
.tray-toggle b{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--card);
  background:var(--navy); border-radius:9px; padding:1px 8px; font-weight:500}
.tray[data-open="0"] .picked, .tray[data-open="0"] .acts .pick{display:none}
.picked{display:flex; gap:4px; flex-wrap:wrap; max-height:56px; overflow-y:auto;
  flex:1; min-width:0}
.pill{font-family:'IBM Plex Mono',monospace; font-size:11px; background:var(--panel);
  border:1px solid var(--rule); border-radius:10px; padding:1px 8px; cursor:pointer;
  color:var(--dim)}
.pill:hover{border-color:var(--warn); color:var(--warn)}
.acts{margin-left:auto; display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.pick{display:inline-flex; align-items:center; gap:4px; font-size:12px;
  color:var(--dim); cursor:pointer; white-space:nowrap}
.pick input{accent-color:var(--navy); margin:0}

/* ── 세트 ── */
.setwrap{position:fixed; inset:0; background:var(--ground); z-index:30; overflow-y:auto;
  padding:18px}
.setbar{max-width:900px; margin:0 auto 12px; display:flex; gap:8px; align-items:center;
  flex-wrap:wrap; position:sticky; top:0; background:var(--ground); padding:6px 0}
.setbar h2{margin:0; font-family:'Gothic A1',sans-serif; font-size:15px}
.setbar .n{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--faint)}
.setbar .right{margin-left:auto; display:flex; gap:7px}
.setsheets{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.setsheets iframe{width:100%; border:1px solid var(--rule); background:#fff; border-radius:3px}

.toast{position:fixed; left:50%; bottom:76px; transform:translateX(-50%) translateY(8px);
  background:#0c2137; color:#f1f5fa; padding:8px 15px; border-radius:4px; font-size:12.5px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  box-shadow:0 6px 20px rgba(0,0,0,.3); z-index:40}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

@media (max-width:1080px){
  .top{height:auto; padding:8px 12px; flex-wrap:wrap}
  .topright{width:100%; margin-left:0}
  .work{grid-template-columns:1fr; padding:10px 12px 0}
  .rows{max-height:340px}
  .split{grid-template-columns:1fr}
  .keys{display:none}
}
@media print{
  body > *:not(.setwrap){display:none!important}
  .setwrap{position:static; padding:0; background:#fff}
  .setbar{display:none!important}
  .setsheets{max-width:none; gap:0}
  .setsheets iframe{border:none; break-after:page; page-break-after:always}
}


/* ── 받을 모양 미리보기 ── */
.modal{position:fixed; inset:0; background:rgba(9,16,26,.55); z-index:35;
  display:grid; place-items:center; padding:22px}
.modal-card{background:var(--card); border:1px solid var(--rule); border-radius:8px;
  box-shadow:var(--lift); width:min(560px,100%); max-height:82vh; display:flex;
  flex-direction:column; overflow:hidden}
.modal-hd{display:flex; align-items:baseline; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--rule)}
.modal-hd h3{margin:0; font-family:'Gothic A1',sans-serif; font-size:15px}
.modal-hd .n{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--faint)}
.modal-hd .x{margin-left:auto; border:none; background:none; cursor:pointer;
  font-size:18px; color:var(--faint); line-height:1}
.tree{overflow-y:auto; padding:12px 16px; font-size:12.5px; flex:1}
.tree .dir{font-weight:600; color:var(--navy); margin:9px 0 3px;
  font-family:'IBM Plex Mono',monospace; font-size:12px}
.tree .dir:first-child{margin-top:0}
.tree .file{color:var(--dim); padding-left:16px; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; line-height:1.85}
.tree .xls{color:var(--bio)}
.modal-ft{padding:11px 16px; border-top:1px solid var(--rule); background:var(--panel);
  display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.modal-ft .note{font-size:11.5px; color:var(--faint)}
.modal-ft .btn{margin-left:auto}

/* ── 진행률 ── */
.progline{width:100%; display:flex; align-items:center; gap:10px; padding-top:2px}
.pnote{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--faint);
  white-space:nowrap}
.prog{flex:1; min-width:120px; height:5px; background:var(--rule); border-radius:3px;
  overflow:hidden}
.prog i{display:block; height:100%; background:var(--navy); width:0; transition:width .15s}
@media (prefers-reduced-motion:reduce){.prog i{transition:none}}
/* ── 성취기준 검토 ── */
.stds{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 12px; background:var(--card); border-bottom:1px solid var(--rule-soft)}
.stds > h4{margin:0; flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.12em; color:var(--faint); font-weight:500}
.stdlist{display:flex; flex-wrap:wrap; gap:4px; flex:1; min-width:0}
.std{display:inline-flex; align-items:baseline; gap:5px; max-width:100%;
  border:1px solid var(--rule); border-radius:11px; padding:2px 9px; background:var(--panel)}
.std b{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:var(--navy)}
.std i{font-style:normal; font-size:11px; color:var(--faint); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.std.none{color:var(--faint); font-size:11.5px; border-style:dashed}
.stdmark{font-size:11px; color:var(--faint); white-space:nowrap}
.stdmark.auto{color:var(--faint); opacity:.75}
.linkish{border:none; background:none; padding:0; cursor:pointer; font-size:11.5px;
  color:var(--navy); text-decoration:underline}
.linkish:focus-visible{outline:2px solid var(--navy); outline-offset:2px}

.modal-card.wide{width:min(860px, 94vw); max-height:88vh; display:flex; flex-direction:column}
.stdbar{display:flex; gap:10px; align-items:center; padding:9px 16px;
  border-bottom:1px solid var(--rule-soft); background:var(--panel)}
.stdbar .search{flex:1}
.stdpick{overflow:auto; padding:6px 16px 12px; flex:1; min-height:200px}
.stdgrp{margin-top:12px}
.stdgrp h5{margin:0 0 5px; font-family:'Gothic A1',sans-serif; font-size:12px;
  color:var(--navy); border-bottom:1px solid var(--rule-soft); padding-bottom:4px}
.stdgrp h5 span{color:var(--faint); font-weight:400; font-size:11.5px; margin-left:6px}
.stdrow{display:grid; grid-template-columns:18px 108px 1fr; gap:8px; align-items:start;
  padding:5px 6px; border-radius:4px; cursor:pointer; font-size:12px; line-height:1.45}
.stdrow:hover{background:var(--panel)}
.stdrow.on{background:var(--panel); box-shadow:inset 2px 0 0 var(--navy)}
.stdrow b{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  color:var(--navy)}
.stdrow span{color:var(--dim)}
.modal-ft .why{flex:1; margin-right:8px}
.modal-card.wide .modal-ft{display:flex; gap:8px; align-items:center}
.modal-card.wide .modal-ft .btn{margin-left:0}

/* ── 해설 판본 토글 ── */
.pairpick{display:inline-flex; align-items:center; gap:3px; margin-left:8px;
  padding-left:10px; border-left:1px solid var(--rule)}
.pairpick em{font-style:normal; font-size:10.5px; color:var(--faint); margin-right:2px;
  font-family:'IBM Plex Mono',monospace; letter-spacing:.08em}
.pairpick button{border:1px solid var(--rule); background:var(--card); border-radius:10px;
  padding:2px 9px; font-size:11.5px; color:var(--dim); cursor:pointer; white-space:nowrap}
.pairpick button:hover{border-color:var(--navy-line); color:var(--navy)}
.pairpick button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy);
  color:var(--card); font-weight:600}
:root[data-theme="dark"] .pairpick button[aria-pressed="true"]{color:#080d13}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pairpick button[aria-pressed="true"]{color:#080d13}
}
.pairpick button:focus-visible{outline:2px solid var(--navy); outline-offset:1px}