/* A안 — 자료 화면 (화면 7 · 8 · 9 · 10 · 10-20 추가) · app-a.css 다음에 읽는다 */
.mat{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr);overflow:hidden}
.mat.has-panel{grid-template-columns:320px minmax(0,1fr) 420px}
.tree-pane{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tp-head{padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.tp-head .seg{display:grid;grid-template-columns:1fr 1fr}
.tp-head .seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tp-head .seg4{grid-template-columns:repeat(4,1fr)}
.srow{display:flex;gap:6px}
.srow .search{flex:1;width:auto;position:relative}
.srow .search .input{padding-right:12px}
.tree{flex:1;overflow:auto;padding-bottom:8px}
.tree .row{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;font-size:var(--fs-14);color:var(--ink);text-decoration:none;cursor:pointer;border-bottom:1px solid var(--line);
  transition:background-color var(--t-fast)}
.tree .row:hover{background:var(--navy-50)}
.tree .row .ic{color:var(--ink-3)}
.tree .row .n{margin-left:auto;font-size:var(--fs-12);font-weight:600;color:var(--ink-2);background:var(--canvas-2);border-radius:99px;padding:1px 8px;min-width:24px;text-align:center}
.tree .tl0{background:var(--canvas);font-weight:800;min-height:42px}
.tree .tl0 .n{background:transparent;padding:0}
.tree .tl1{font-weight:800;padding-left:22px}
.tree .tl2{padding-left:38px;font-weight:600}
.tree .tl3{padding-left:54px;color:var(--ink-2)}
.tree .tl4{padding-left:74px;color:var(--ink-2);min-height:34px;border-bottom:0}
.tree .row[aria-current="true"]{background:var(--mint-100);color:var(--navy-900)}
.tree .row[aria-current="true"] .ic{color:var(--navy-800)}
.tree .row .soon{margin-left:auto;font-size:var(--fs-12);color:var(--ink-3);font-weight:600}
.tree .item{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;min-height:54px;padding:6px 16px 6px 22px}
.tree .item b{font-weight:600}
.tree .item small{font-size:var(--fs-12);color:var(--ink-3)}
.tp-foot{padding:10px 16px;border-top:1px solid var(--line);font-size:var(--fs-12);font-weight:600;color:var(--ink-2);text-align:center}

/* ---------- 자료 홈 오른쪽 (화면 7) */
.home-main{overflow:auto;padding:24px 28px 40px;min-width:0}
.hm-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hm-head h2{font-size:var(--fs-24);font-weight:800;letter-spacing:-.015em}
.hm-head .facts{display:flex;gap:6px;flex-wrap:wrap}
.hm-head .right{margin-left:auto;display:flex;gap:8px}
.bundles{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.bundle+.bundle{border-top:1px solid var(--line-2)}
.bh{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--canvas);font-weight:800;font-size:var(--fs-15)}
.bh .ic{color:var(--navy-700)}
.bh .n{font-size:var(--fs-12);font-weight:600;color:var(--ink-2)}
.bh .btn{margin-left:auto;height:30px;font-size:var(--fs-12)}
.brow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);font-size:var(--fs-14);text-decoration:none;color:var(--ink)}
.brow:hover{background:var(--navy-50)}
.brow b{font-weight:800;font-size:var(--fs-15)}
.brow .rng{color:var(--ink-2)}
.brow .go{color:var(--navy-700);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.bempty{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line);font-size:var(--fs-14);color:var(--ink-2)}
.bempty .btn{margin-left:auto}

/* ---------- 교재 · 단원 가운데 (화면 8 · 9 · 10) */
.center{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
.ctabs{display:flex;align-items:center;gap:4px;height:52px;padding:0 16px 0 20px;border-bottom:1px solid var(--line);flex:none}
.ctabs .tabs{display:flex;gap:2px;height:100%;overflow-x:auto;scrollbar-width:none}
.ctabs .tabs a{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:var(--fs-15);font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.ctabs .tabs a:hover{color:var(--ink)}
.ctabs .tabs a[aria-current="page"]{color:var(--navy-800);border-bottom-color:var(--navy-800);font-weight:800}
.ctabs .tabs a .n{font-size:var(--fs-12);color:var(--ink-3);font-weight:600}
.ctabs .acts{margin-left:auto;display:flex;gap:6px;flex:none}
.ctabs .acts .btn{height:32px;padding:0 10px;font-size:var(--fs-14)}
.ctool{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.ctool h2{font-size:var(--fs-17);font-weight:800}
.ctool .meta{font-size:var(--fs-14);color:var(--ink-3)}
.ctool .right{margin-left:auto;display:flex;gap:6px}
.ctool .right .btn{height:32px;font-size:var(--fs-14)}
.back{display:none}
.ex-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;border:1px dashed var(--line-strong);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.units{flex:1;overflow:auto;padding:4px 20px 24px}
.unit{border-bottom:1px solid var(--line)}
.uh{display:flex;align-items:center;gap:8px;min-height:50px;flex-wrap:wrap;padding:6px 0;cursor:pointer}
.uh .chev{color:var(--ink-3);transition:transform var(--t-fast)}
.unit.open .uh .chev{transform:rotate(90deg)}
.uh .un{font-size:var(--fs-15);font-weight:800;color:var(--ink);margin-right:4px}
.uh .un i{font-style:normal;color:var(--ink-3);font-weight:600;margin-right:6px}
.cb{width:16px;height:16px;accent-color:var(--navy-800);flex:none}
.pc{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:99px;font-size:var(--fs-12);font-weight:600;white-space:nowrap;border:1px solid transparent}
.pc-n{background:var(--surface);border-color:var(--line-2);color:var(--ink-2)}
.pc-full{background:var(--navy-800);color:#fff}
.pc-part{background:var(--mint-200);color:var(--mint-ink)}
.pc-zero{background:var(--canvas-2);color:var(--ink-3)}
.pc-q{background:var(--info-bg);color:var(--info)}
.plist{padding:0 0 10px 26px;display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;min-height:44px;padding:4px 10px;border-radius:var(--r-ctl);font-size:var(--fs-14);color:var(--ink);text-decoration:none}
.prow:hover{background:var(--navy-50)}
.prow[aria-current="true"]{background:var(--mint-100)}
.prow .t{display:flex;gap:8px;align-items:baseline;min-width:0}
.prow .t b{font-weight:800;color:var(--ink-2);flex:none}
.prow .t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prow .src{font-size:var(--fs-12);color:var(--ink-3);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.prow .old{visibility:hidden}
.prow .old.on{visibility:visible}
.prow .rv{font-size:var(--fs-12);font-weight:800;white-space:nowrap}
.prow .rv.part{color:var(--warn)}
.prow .rv.done{color:var(--ok)}
.prow.ai{grid-template-columns:auto minmax(0,1fr) auto}

/* ---------- 오른쪽 지문 칸 (화면 9 · 10) */
.side-r{background:var(--canvas);border-left:1px solid var(--line);overflow:auto;padding:14px 16px 28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.sr-h{display:flex;align-items:flex-start;gap:8px}
.sr-h h2{font-size:var(--fs-16);font-weight:800;line-height:1.35}
.sr-h small{display:block;font-size:var(--fs-12);color:var(--ink-3);font-weight:600;margin-top:2px}
.sr-h .acts{margin-left:auto;display:flex;gap:2px;flex:none}
.ibtn{width:34px;height:34px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink-2);display:inline-grid;place-items:center;cursor:pointer;text-decoration:none;flex:none}
.ibtn:hover{background:var(--canvas-2);color:var(--ink)}
.ibtn.bad{color:var(--bad)}
.ibtn.bad:hover{background:var(--bad-bg)}
.acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel)}
.acc-h{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:0 6px 0 12px}
.acc-h button.tg{display:flex;align-items:center;gap:6px;border:0;background:none;font-size:var(--fs-14);font-weight:800;color:var(--ink);cursor:pointer;height:44px;padding:0}
.acc-h .chev{color:var(--ink-3);transition:transform var(--t-fast)}
.acc-h button[aria-expanded="true"] .chev{transform:rotate(90deg)}
.acc-h .r{margin-left:auto;display:flex;gap:2px}
.acc-b{padding:0 14px 14px}
.acc-b .passage{font-size:var(--fs-15);line-height:1.75}
.art{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:14px}
.art-h{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.art-h h3{font-size:var(--fs-15);font-weight:800}
.art-h .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.art-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px 0;border-top:1px solid var(--line);align-items:center}
.art-row:first-of-type{border-top:0}
.art-row b{font-size:var(--fs-14);font-weight:800}
.art-row small{grid-column:1 / -1;font-size:var(--fs-12);color:var(--ink-2)}
.art-row .bt{grid-column:1 / -1;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.art-row .bt .btn{height:32px;padding:0 10px;font-size:var(--fs-14)}
.art-row .bt .ibtn{margin-left:auto}
.steps4{grid-column:1 / -1;display:flex;gap:10px;align-items:center;font-size:var(--fs-12);font-weight:600;color:var(--ink-3);flex-wrap:wrap}
.steps4 span{display:inline-flex;align-items:center;gap:4px}
.steps4 .done{color:var(--ok)}
.steps4 .on{color:var(--navy-800);font-weight:800}
.steps4 .ic{width:14px;height:14px}
.fl{display:flex;flex-direction:column;gap:8px}
.frow2{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.frow2 .lab{font-size:var(--fs-12);font-weight:600;color:var(--ink-3);width:30px}
.fl .chip{height:28px}
.qc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.qc .qh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.qc .qh .no{font-weight:800;font-size:var(--fs-15);margin-right:2px}
.qc .qh .r{margin-left:auto;display:flex;gap:4px}
.qc .qh .r .btn{height:30px;padding:0 10px;font-size:var(--fs-12)}
.qc dl{display:flex;flex-direction:column;gap:8px}
.qc dt{font-size:var(--fs-12);font-weight:600;color:var(--ink-3);margin-bottom:2px}
.qc dd{font-size:var(--fs-15);font-weight:600;line-height:1.5}
.qc dd.en{font-weight:400;font-size:var(--fs-14);line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 태블릿 1280: 옆 막대를 아이콘 줄로 */
@media (min-width:768px) and (max-width:1365px){
  .shell.rail{grid-template-columns:68px 1fr}
  .shell.rail .side{padding:14px 10px;align-items:center}
  .shell.rail .side .brand{padding:4px 0 16px}
  .shell.rail .side .brand>span:last-child,.shell.rail .side .grp,.shell.rail .side .me>span:last-child{display:none}
  .shell.rail .side nav a{width:46px;justify-content:center;padding:0;font-size:0;gap:0;position:relative}
  .shell.rail .side nav a .ic{width:20px;height:20px}
  .shell.rail .side nav a .cnt{position:absolute;top:1px;right:-2px;font-size:12px;padding:0 5px;line-height:16px}
  .shell.rail .side .me{padding:10px 0;justify-content:center}
  .mat{grid-template-columns:280px minmax(0,1fr)}
  .mat.has-panel{grid-template-columns:270px minmax(0,1fr) 370px}
  .ctabs .acts .btn .lbl{display:none}
  .ctabs .acts .btn{width:34px;padding:0}
  .prow{grid-template-columns:minmax(0,1fr) auto auto}
  .prow .src{display:none}
  .prow.ai{grid-template-columns:auto minmax(0,1fr) auto}
  .top .search{width:200px}
  .home-main{padding:20px}
  .brow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .brow .go{display:none}
}
/* ---------- 휴대폰: 한 번에 한 층 (나무 → 단원 → 지문 칸) */
@media (max-width:767px){
  .mat,.mat.has-panel{display:block;overflow:visible}
  .mat[data-m="tree"] .center,.mat[data-m="tree"] .home-main,.mat[data-m="tree"] .side-r{display:none}
  .mat[data-m="center"] .tree-pane,.mat[data-m="center"] .side-r,.mat[data-m="center"] .home-main{display:none}
  .mat[data-m="panel"] .tree-pane,.mat[data-m="panel"] .center{display:none}
  .tree-pane{border-right:0}
  .side-r{border-left:0;padding:12px 16px 24px}
  .back{display:flex;align-items:center;gap:6px;height:44px;padding:0 16px;font-size:var(--fs-14);font-weight:600;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);background:var(--surface)}
  .ctabs{height:auto;flex-wrap:wrap;padding:0 12px;gap:0}
  .ctabs .tabs{height:48px;width:100%}
  .ctabs .acts{width:100%;padding:8px 0 10px;margin:0;justify-content:flex-start;flex-wrap:wrap}
  .ctool{padding:10px 12px}
  .ctool .right{margin-left:0;width:100%}
  .units{padding:0 12px 24px}
  .plist{padding-left:6px}
  .prow{grid-template-columns:minmax(0,1fr) auto;padding:8px 6px}
  .prow .src{grid-column:1;grid-row:2}
  .prow .old{grid-column:2;grid-row:2;justify-self:end}
  .prow .old:not(.on){display:none}
  .prow .t span{white-space:normal}
  .prow.ai{grid-template-columns:auto minmax(0,1fr) auto}
  .home-main{padding:16px}
  .brow{grid-template-columns:1fr auto}
  .brow .rng{grid-column:1}
}
.prow a.t{color:inherit;text-decoration:none}
.prow a.t:hover span{text-decoration:underline}
.srcimg{display:inline-grid;place-items:center;color:var(--ink-3)}
/* 지문 칸이 열린 화면(9 · 10)은 데스크톱에서도 옆 막대를 아이콘 줄로 — 가운데 폭 확보 */
@media (min-width:1366px){
  .shell.always{grid-template-columns:68px 1fr}
  .shell.always .side{padding:14px 10px;align-items:center}
  .shell.always .side .brand{padding:4px 0 16px}
  .shell.always .side .brand>span:last-child,.shell.always .side .grp,.shell.always .side .me>span:last-child{display:none}
  .shell.always .side nav a{width:46px;justify-content:center;padding:0;font-size:0;gap:0;position:relative}
  .shell.always .side nav a .ic{width:20px;height:20px}
  .shell.always .side nav a .cnt{position:absolute;top:1px;right:-2px;font-size:12px;padding:0 5px;line-height:16px}
  .shell.always .side .me{padding:10px 0;justify-content:center}
}
.mat.has-panel .ctabs .acts .btn .lbl{display:none}
.mat.has-panel .ctabs .acts .btn{width:34px;padding:0}
.acc-b.scroll{max-height:300px;overflow:auto;margin-right:4px}
@media (max-width:767px){.acc-b.scroll{max-height:none}}

.brow{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) auto auto}
.prow{grid-template-columns:minmax(0,1fr) auto auto auto auto}
.scan .seg{display:grid;grid-template-columns:1fr 1fr;margin:8px 0 10px}
.scan .seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.scanframe{height:120px;padding:12px;border:1.5px dashed var(--line-2);border-radius:var(--r-ctl);background:var(--canvas);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-2);font-size:var(--fs-12);font-weight:600}
.scanframe .ic{width:24px;height:24px;color:var(--ink-3)}
.scanst{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.scanst small{font-size:var(--fs-12);color:var(--ink-2);display:inline-flex;gap:6px;align-items:center}
@media (min-width:768px) and (max-width:1365px){
  .prow{grid-template-columns:minmax(0,1fr) auto auto auto}
  .brow{grid-template-columns:minmax(0,1fr) auto}
  .brow .rng{grid-column:1}
  .brow .marks{grid-column:2;grid-row:1 / span 2}
}
.mat.has-panel .prow{grid-template-columns:minmax(0,1fr) auto auto}
.mat.has-panel .prow .src,.mat.has-panel .prow .old:not(.on){display:none}
@media (max-width:767px){
  .prow,.mat.has-panel .prow{grid-template-columns:minmax(0,1fr) auto}
  .prow .ocr{grid-column:1;grid-row:3;justify-self:start}
  .brow .marks{grid-column:1 / -1}
  .legend .ex-tag{margin-left:0}
}