@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(../fonts/P-Regular.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:500 600;font-display:swap;src:url(../fonts/P-SemiBold.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:700 800;font-display:swap;src:url(../fonts/P-ExtraBold.woff2) format('woff2')}
@font-face{font-family:Stunning;font-weight:700;font-display:swap;src:url(../fonts/Stunning-Bold.woff2) format('woff2')}
/* 4판: 수학비서 녹화 영상(10/19)과 같은 자리·크기·색으로 만들고, 로고와 파랑(→ 학원 남색 #0A174E)만 바꿈.
   잰 값(2550px 화면): 맨 왼쪽 메뉴 173 | 두 번째 판 290(내 문제지)·340(문제 찾기) | 위 띠 100 | 본문 여백 40 */
:root{
  --navy:#0A174E; --navy2:#1C2B6B; --tint:#F3F4F9; --tint2:#E6E9F3; --fold:#B4BEDD;
  --ink:#323038; --head:#5F5F6B; --side:#F5F4F7; --card:#F5F4F7; --line:#E6E5EA; --line2:#D6D5DB;
  --text:#1E1D24; --text2:#4B4A55; --hint:#5E5D68; --gbtn:#E9E8EC; --slider:#F05730;
  --chip-a:#DCEAF6; --chip-a-t:#1F5A8C; --chip-s:#E2F0D6; --chip-s-t:#3F6B1E; --chip-n:#ECEBEF;
  --easy:#F09A1A; --mid:#21A04A; --hard:#ED3B4E; --vhard:#26252C; --red:#ED3B4E;
  --green:#009A2E; --lgreen:#A5CE3A; --yellow:#F5D042;
  --ui:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; --logo:"Stunning","Pretendard",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#fff;color:var(--text);font:14px/1.5 var(--ui);letter-spacing:-.01em}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app{display:flex;min-height:100%}
/* ── 맨 왼쪽 메뉴 ── */
.gnav{width:173px;flex:none;background:var(--side);border-right:1px solid var(--line);padding:22px 8px 20px;padding-left:max(8px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:5}
.logo{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 0 0 2px;margin-bottom:30px;height:26px}
.logo img{height:22px;width:auto;display:block}
.logo .cl{border:0;background:none;padding:0;width:14px;height:20px;display:grid;place-items:center;color:var(--text2)}
.avatar{width:40px;height:40px;border-radius:10px;background:#E4E3E8;margin:0 auto 40px;display:grid;place-items:center}
.avatar svg{width:20px;height:20px;fill:#fff}
.gnav a{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px;margin:1px 0;border-radius:8px;color:var(--text2);text-decoration:none;font-size:13.5px;font-weight:500;white-space:nowrap}
.gnav a.on{background:var(--ink);color:#fff;font-weight:700}
.gnav a:hover:not(.on){background:#EBEAEF}
/* ── 두 번째 판 ── */
.panel{width:290px;flex:none;background:var(--side);border-right:1px solid var(--line);padding:22px 12px 20px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.panel.w{width:340px;padding:22px 14px 20px 16px}
.ph{display:flex;align-items:center;justify-content:space-between;height:44px;margin-bottom:8px}
.ph h2{margin:0;font-size:18px;font-weight:700}
.ph .fold{border:0;background:none;color:var(--text2);padding:4px;display:grid;place-items:center}
.psub{font-size:12.5px;color:var(--hint);margin:0 0 14px;line-height:1.6}
.sbox{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;height:40px;padding:0 10px;margin-bottom:12px}
.sbox input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13px}
.sbox svg{color:var(--text2);width:15px;height:15px}
.btn-p{background:var(--navy);color:#fff;border:0;border-radius:8px;height:40px;font-weight:600;font-size:14px;width:100%}
.btn-p:hover{background:var(--navy2)}
.btn-p:disabled{opacity:.35}
.slist{margin:16px 0 4px;display:flex;flex-direction:column}
.slist a{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:8px;color:var(--text);text-decoration:none;font-size:13.5px}
.slist a svg{color:var(--text2);width:16px;height:16px}
.slist a.on{background:#E6E5EA;font-weight:700}
.slist a .c{margin-left:auto;font-size:11.5px;color:var(--hint)}
.slist a .c.r{color:var(--red);font-weight:700}
.tree{display:flex;flex-direction:column}
.node{display:flex;align-items:center;gap:7px;height:42px;padding:0 10px;border-radius:8px;font-size:13.5px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden}
.node.on{background:#E6E5EA;font-weight:700}
.node .ar{width:12px;flex:none;display:grid;place-items:center;color:var(--text2)}
.node .ar svg{width:12px;height:12px}
.node.d1{padding-left:24px}.node.d2{padding-left:38px}
.node .pen{color:var(--text2);margin-left:2px}
.fic{width:17px;height:13px;border-radius:2px;background:var(--fold);position:relative;flex:none;margin-top:2px}
.fic::before{content:"";position:absolute;left:0;top:-3px;width:7px;height:4px;border-radius:2px 2px 0 0;background:var(--fold)}
.free{font-size:8.5px;font-weight:800;background:var(--navy);color:#fff;border-radius:3px;padding:0 3px;line-height:13px;flex:none}
/* 거르기 판 */
.tabs2{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs2 button{flex:1;border:0;background:none;height:42px;font-size:13.5px;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs2 button.on{color:var(--text);border-color:var(--ink);font-weight:700}
.fl{font-size:13.5px;font-weight:700;margin:18px 0 9px;display:flex;align-items:center;justify-content:space-between}
.fl:first-of-type{margin-top:0}
.fl em{color:var(--red);font-style:normal;margin-right:2px}
.dd{position:relative;margin-bottom:8px}
.ddb{width:100%;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 34px 0 10px;font-size:13px;text-align:left;color:var(--hint);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddb.set{color:var(--text)}
.ddb::after,.sel::after{content:"";position:absolute;right:14px;top:15px;width:6px;height:6px;border-right:1.5px solid var(--text2);border-bottom:1.5px solid var(--text2);transform:rotate(45deg);pointer-events:none}
.ddb.open::after{transform:rotate(225deg);top:18px}
.ddp{position:absolute;left:0;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(20,20,40,.14);z-index:40;padding:8px;max-height:420px;overflow:auto}
.ddp .sbox{height:36px;margin-bottom:8px}
.ddp .row{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:2px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ddp .row label{display:flex;gap:6px;align-items:center}
.tn{display:flex;align-items:center;gap:6px;min-height:30px;padding:3px 4px;font-size:12.5px;border-radius:6px;cursor:pointer}
.tn:hover{background:var(--side)}
.tn .ar{width:12px;display:grid;place-items:center;color:var(--text2);flex:none}.tn .ar svg{width:11px;height:11px}
.tn.l1{padding-left:18px}.tn.l2{padding-left:32px}.tn.l3{padding-left:46px}
.sel{position:relative}
.sel select{appearance:none;width:100%;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 32px 0 10px;font-size:13px;color:var(--text)}
.pills{display:flex;flex-wrap:wrap;gap:4px;margin:-2px 0 8px}
.pills span{font-size:10.5px;background:#E9E8EC;border-radius:3px;padding:1px 6px;display:inline-flex;gap:6px;align-items:center;color:var(--text2)}
.pills b{font-weight:700;cursor:pointer;color:var(--text)}
.gbtn{width:100%;height:40px;border:0;border-radius:8px;background:#E7E6EA;font-size:13px;font-weight:500}
.range{display:flex;align-items:center;gap:8px;color:var(--hint)}
.range input{flex:1;min-width:0;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 10px;font-size:13px}
.cks{display:grid;grid-template-columns:repeat(4,auto);gap:8px 14px;justify-content:start}
.cks.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.cks.three{grid-template-columns:repeat(3,auto);gap:8px 22px}
.ck{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;user-select:none;white-space:nowrap}
.ck input{appearance:none;width:17px;height:17px;border-radius:50%;border:1.3px solid #C9C8CF;background:#fff;display:grid;place-items:center;margin:0;cursor:pointer;flex:none}
.ck input::before{content:"";width:7px;height:3.5px;border-left:1.6px solid #9C9BA5;border-bottom:1.6px solid #9C9BA5;transform:rotate(-45deg) translate(1px,-1px)}
.ck input:checked{background:var(--navy);border-color:var(--navy)}
.ck input:checked::before{border-color:#fff}
.ck input:disabled{opacity:.45}
.ck .q{width:13px;height:13px;border-radius:50%;background:#CFCED5;color:#fff;font-size:9px;display:inline-grid;place-items:center;font-weight:700}
.rd{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.rd input{appearance:none;width:17px;height:17px;border-radius:50%;border:1.3px solid #C9C8CF;margin:0;background:#fff;display:grid;place-items:center}
.rd input:checked{border:5px solid var(--navy)}
.tg{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:700;margin-top:18px}
.tg label{display:flex;align-items:center;gap:8px;font-weight:500;font-size:12.5px}
.sw{appearance:none;width:38px;height:22px;border-radius:11px;background:#8F8E98;position:relative;margin:0;cursor:pointer;flex:none}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sw:checked{background:var(--ink)}
.sw:checked::after{left:19px}
.sw.sm{width:34px;height:20px}.sw.sm::after{width:14px;height:14px}.sw.sm:checked::after{left:17px}
.sw:disabled{opacity:.4;cursor:default}
.tsearch{display:flex;gap:6px;align-items:center}
.tsearch .box{flex:1;display:flex;align-items:center;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 4px 0 10px;min-width:0}
.tsearch .box input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13px}
.inc{display:flex;background:#ECEBEF;border-radius:5px;padding:2px}
.inc button{border:0;background:none;font-size:10.5px;font-weight:600;padding:3px 6px;border-radius:4px;color:var(--text2)}
.inc button.on{background:var(--ink);color:#fff}
.fx{width:40px;height:40px;border-radius:8px;border:0;background:#E7E6EA;font:italic 700 13px "Times New Roman",serif}
.panel .spacer{flex:1;min-height:24px}
/* ── 본문 ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.dhead{background:var(--head);color:#fff;height:100px;padding:0 40px 0 46px;display:flex;align-items:center;gap:14px;flex:none}
.dhead .back{border:0;background:none;color:#fff;padding:4px;display:grid;place-items:center}
.dhead .bc{font-size:11.5px;display:flex;gap:6px;align-items:center;color:#E3E2E8}
.dhead .bc b{color:#fff;font-weight:600}
.dhead .tl{display:flex;align-items:center;gap:7px;margin-top:3px}
.dhead .tl b{font-size:17px;font-weight:700;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dhead .pen{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;border:0;color:#fff;padding:0}
.dhead .pen svg{width:11px;height:11px}
.dhead .chip{background:rgba(0,0,0,.28);border:0;color:#fff;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600}
.sumpill{margin-left:auto;background:#fff;color:var(--text);border-radius:4px;padding:2px 8px;font-size:11px;display:flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.sumpill i{width:1px;height:10px;background:var(--line2)}
.wrap{padding:0 40px 60px;padding-right:max(40px,env(safe-area-inset-right,0px))}
.stepper{display:flex;justify-content:center;align-items:center;gap:6px;height:44px;margin-top:12px;font-size:13px;color:var(--text2)}
.stepper .s{display:flex;align-items:center;gap:6px}
.stepper .s i{width:14px;height:14px;border-radius:50%;background:#CFCED5}
.stepper .s.on{color:var(--navy);font-weight:600}.stepper .s.on i{background:var(--navy)}
.stepper .ln{width:120px;height:1.5px;background:#D9D8DE}
.stepper .ln.on{background:var(--navy)}
.info{background:var(--tint);color:var(--navy);text-align:center;border-radius:8px;height:38px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13.5px;font-weight:500;margin:0 0 30px}
.info.g{background:var(--side);color:var(--text);margin-top:12px}
.info .x{border:0;background:none;padding:2px;display:grid;place-items:center;color:var(--text2)}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rhead h3{margin:0;font-size:15px;font-weight:700}
.rtools{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sizer{display:flex;align-items:center;gap:8px}
.sizer input{width:96px;accent-color:var(--slider)}
.sizer .ic{width:12px;height:15px;border-radius:2px;border:1.3px solid #B9B8C0;background:#fff}
.sizer .ic.s{height:11px;width:10px}
.viewsel{display:flex;align-items:center;gap:10px;font-size:13px}
.viewsel .sel{width:140px}
.hr{height:1px;background:var(--line);margin:14px 0 12px}
.selrow{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;min-height:40px}
.selall{display:flex;align-items:center;gap:9px;color:var(--navy);font-weight:700;font-size:15px;cursor:pointer;user-select:none}
.circk{appearance:none;width:19px;height:19px;border-radius:50%;border:1.3px solid #C9C8CF;background:#fff;display:grid;place-items:center;margin:0;cursor:pointer;flex:none}
.circk::before{content:"";width:7px;height:3.5px;border-left:1.6px solid #9C9BA5;border-bottom:1.6px solid #9C9BA5;transform:rotate(-45deg) translate(1px,-1px)}
.circk:checked,.circk.on{background:var(--navy);border-color:var(--navy)}.circk:checked::before,.circk.on::before{border-color:#fff}
span.circk{display:grid}
.etog{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;justify-content:flex-end;font-size:11px;color:var(--text2)}
.etog label{display:flex;align-items:center;gap:7px;white-space:nowrap}
.grp{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;margin:24px 0 16px;cursor:pointer;user-select:none}
.grp .n{color:var(--navy);display:flex;align-items:center;gap:6px}
.grp .n svg{width:12px;height:12px}
.grp.off .n svg{transform:rotate(-90deg)}
.grp .bar{width:1px;height:13px;background:var(--line2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--cw,370px),100%),1fr));gap:16px}
/* 문제 카드 */
.qc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px 16px;display:flex;flex-direction:column;min-width:0;position:relative}
.qc.on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.qc.rep{background:#EDF5E1;border:1.5px dashed #6FA63A}
.qc.add{background:var(--card);border:1.5px dashed #7C6FD6}
.qc.rep.on,.qc.add.on{border-style:solid;border-color:var(--navy)}
.qh{display:flex;align-items:center;gap:5px;height:30px;font-weight:700;font-size:13.5px}
.qh .tb{background:var(--navy);color:#fff;font-size:9.5px;font-weight:700;border-radius:4px;padding:1px 4px;line-height:14px}
.qh .chev{color:var(--text2);display:grid;place-items:center}.qh .chev svg{width:11px;height:11px}
.qh .mk{margin-left:auto;font-size:10.5px;font-weight:600;border-radius:4px;padding:2px 7px;display:inline-flex;gap:3px;align-items:center}
.qh .mk.rep{background:#DCE6F8;color:#22408A}.qh .mk.add{background:#FAD776;color:#5B4300}
.qh .more{margin-left:auto;border:0;background:none;padding:2px 4px;border-radius:6px;color:var(--text2);display:grid;place-items:center}
.qh .mk+.more{margin-left:4px}
.qh .more:hover{background:#fff}
.qh .more svg{width:16px;height:16px;fill:currentColor;stroke:none}
.qp{display:flex;flex-direction:column;flex:1;min-width:0}
.pw{container-type:inline-size;margin:6px 0 8px;flex:1;display:flex}
.pw>.paper{flex:1;min-height:var(--ph,240px);width:100%}
.paper{background:#fff;border-radius:8px;margin:0;padding:1.1em 1.15em;height:auto;overflow:hidden;position:relative;font-family:"Nanum Myeongjo","Batang",serif;font-size:clamp(10.5px,3.7cqi,23px);line-height:1.68;color:#111}
.paper .katex{font-size:1.06em}
.paper.sol .gap{height:.8em}
.paper p{margin:0}.paper .d{text-align:center}
.paper .box,.paper .bogi{border:1px solid #333;padding:4px 8px;margin:4px 0}
.paper .fig{text-align:center;margin:4px 0}.paper .fig img{max-width:62%}
.paper .chs{display:grid;gap:.15em .5em;margin-top:.3em}
.paper .chs b{font-weight:400}
.paper .chs.c3{grid-template-columns:repeat(3,minmax(0,6.8em))}.paper .chs.c3 span,.paper .chs.c2 span{white-space:nowrap}
.paper .chs.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.paper .chs.c1{grid-template-columns:1fr}
.qt{display:flex;align-items:center;gap:4px}
.qt .ib{width:42px;height:28px;border-radius:6px;border:0;background:#E7E6EA;display:grid;place-items:center;color:#8E8D97}
.qt .ib svg{width:13px;height:13px;fill:currentColor;stroke:none}
.qt .ib.on{background:var(--ink);color:#fff}
.qt .ib:disabled{opacity:.5}
.qt .chips{margin-left:auto;display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;white-space:nowrap}
.chp{border-radius:3px;padding:1px 5px}
.chp.a{background:var(--chip-a);color:var(--chip-a-t)}
.chp.a.on{background:var(--green);color:#fff}
.chp.s{background:var(--chip-s);color:var(--chip-s-t)}
.chp.s.no{background:var(--chip-n);color:var(--hint)}
.chp.tm{background:#fff;color:var(--text2);display:inline-flex;align-items:center;gap:2px}.chp.tm svg{width:10px;height:10px}
.lvd{background:#fff;border-radius:3px;padding:1px 5px;display:inline-flex;align-items:center;gap:3px}
.lvd::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lvd.bare{background:none;padding:0 2px;color:var(--text)}.lvd.bare::before{background:var(--c)}
.l-쉬움{color:var(--easy);--c:var(--easy)}.l-보통{color:var(--mid);--c:var(--mid)}.l-어려움{color:var(--hard);--c:var(--hard)}.l-최상{color:var(--vhard);--c:var(--vhard)}
.qm{padding:14px 8px 0;font-size:11.5px;display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:start;line-height:1.55}
.qm dt{font-weight:700}
.qm dd{margin:0;color:var(--text);min-width:0}
.qm .tags{display:flex;flex-wrap:wrap;gap:3px}
.qm .tags span{background:#E7E6EA;border-radius:3px;padding:0 5px;font-size:10.5px;color:var(--text2)}
.qm .tags span.w{background:#FFF1C2;color:#5A4500}
.menu{position:absolute;z-index:45;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(20,20,40,.16);padding:6px;min-width:190px}
.menu button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:0;background:none;height:34px;padding:0 10px;border-radius:6px;font-size:13px;gap:16px}
.menu button:hover{background:var(--side)}
.menu button kbd{font:11px var(--ui);color:var(--hint)}
.menu button.r{color:var(--red)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
/* 여러 칸 카드(문제+해설+정보) */
.qc.multi{display:grid;grid-template-columns:repeat(var(--np),minmax(0,1fr));padding:0}
.qc.multi>div{padding:10px 14px 16px;min-width:0;display:flex;flex-direction:column}
.qx{border-left:1px solid var(--line)}
.xl{height:30px;display:flex;align-items:center;font-size:12px;font-weight:600}
.qinfo{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px 10px;font-size:11.5px;margin:12px 0 0;align-items:center}
.qinfo dt{font-weight:500}.qinfo dd{margin:0}
.ansbox{background:#fff;border-radius:6px;padding:4px 10px;min-height:30px;display:flex;align-items:center;font:15px "Nanum Myeongjo",serif}
.qsec{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;font-size:11.5px;display:flex;flex-direction:column;gap:4px}
.qsec b{font-size:12px;font-weight:500}
/* 고르기·끌기 */
.grid.pick .qc,.grid.ed .qc{cursor:pointer;user-select:none;-webkit-user-select:none}
.grid.pick .qc:hover:not(.on),.grid.ed .qc:hover:not(.on):not(.rep):not(.add){border-color:#BDBCC5}
body.painting,body.painting *{user-select:none!important;cursor:copy!important}
.qc.dragging{opacity:.35}
.qc.drop-l{box-shadow:-4px 0 0 var(--navy)}.qc.drop-r{box-shadow:4px 0 0 var(--navy)}
.qc.drop-t{box-shadow:0 -4px 0 var(--navy)}.qc.drop-b{box-shadow:0 4px 0 var(--navy)}
.noimg .paper .fig{display:none}
/* 정렬 기준 */
.crit{position:relative}
.critb{height:40px;width:188px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 30px 0 12px;text-align:left;font-size:12px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hint)}
.critb.set{color:var(--text)}
.critb::after{content:"";position:absolute;right:13px;top:15px;width:6px;height:6px;border-right:1.5px solid var(--text2);border-bottom:1.5px solid var(--text2);transform:rotate(45deg)}
.critp{position:absolute;right:0;top:44px;width:230px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(20,20,40,.14);z-index:20;overflow:hidden}
.cgh{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:none;height:40px;padding:0 12px;font-weight:700;font-size:12.5px}
.cg+.cg{border-top:1px solid var(--line)}
.cg.open .cgh{background:var(--side)}
.cgh i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.cg.open .cgh i{transform:rotate(225deg) translate(-2px,-2px)}
.co{display:flex;justify-content:space-between;width:100%;text-align:left;border:0;background:none;height:34px;padding:0 12px;font-size:12px}
.co:hover{background:var(--side)}.co.on{font-weight:700;color:var(--navy)}
.crst{border:0;background:none;width:100%;height:36px;border-top:1px solid var(--line);font-size:12px}
/* 편집 줄 */
.tabs3{display:flex;border-bottom:1px solid var(--line);position:relative}
.tabs3 button{border:0;background:none;height:44px;padding:0 12px;font-size:13px;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs3 button.on{color:var(--text);border-color:var(--ink);font-weight:700}
.tip{position:absolute;left:calc(100% + 12px);top:2px;background:var(--ink);color:#fff;font-size:11px;line-height:1.5;border-radius:6px;padding:7px 28px 7px 12px;white-space:nowrap;z-index:3}
.tip::before{content:"";position:absolute;left:-5px;top:16px;border:5px solid transparent;border-left:0;border-right-color:var(--ink)}
.tip button{position:absolute;right:6px;top:5px;border:0;background:none;color:#fff;font-size:13px;padding:0 3px;line-height:1}
.etools{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.btn-g{border:0;background:var(--gbtn);border-radius:8px;height:40px;padding:0 16px;font-size:13px;font-weight:500;white-space:nowrap}
.btn-g:hover:not(:disabled){background:#DFDEE3}
.btn-g:disabled{opacity:.45}
.btn-g.load{opacity:.6;display:inline-flex;align-items:center;gap:8px}
.btn-g.load i{width:13px;height:13px;border-radius:50%;border:2px solid #9C9BA5;border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-d{border:0;background:var(--ink);color:#fff;border-radius:8px;height:40px;padding:0 16px;font-size:13px;font-weight:600;white-space:nowrap}
.btn-n{border:0;background:var(--navy);color:#fff;border-radius:8px;height:40px;padding:0 22px;font-size:13px;font-weight:600;white-space:nowrap}
.btn-n:disabled{opacity:.35}
.btn-n.big{min-width:110px}
.btn-r{border:0;background:var(--red);color:#fff;border-radius:8px;height:40px;padding:0 16px;font-size:13px;font-weight:600;white-space:nowrap}
.btn-c{border:0;background:#F0EFF3;border-radius:8px;height:40px;padding:0 18px;font-size:13px}
.btn-dots{width:40px;padding:0;display:inline-grid;place-items:center}.btn-dots svg{width:16px;height:16px;fill:currentColor;stroke:none}
.cur{height:40px;width:188px}
/* 홈 */
.hband{background:var(--navy);color:#fff;height:244px;flex:none}
.hin{max-width:1200px;margin:0 auto;height:100%;display:flex;align-items:center;gap:24px;padding:0 0 10px}
.hav{width:120px;height:120px;position:relative;flex:none}
.hav i{position:absolute;inset:0 22px 0 0;border-radius:50%;background:#2A3876}
.hav i+i{inset:12px 0 -12px 22px;background:#3A4885;opacity:.8}
.hav svg{position:absolute;left:30px;top:32px;width:40px;height:40px;fill:#fff;z-index:1}
.hname{font:700 28px var(--ui);display:flex;align-items:center;gap:8px}.hname svg{width:16px;height:16px}
.hsub{font-size:21px;font-weight:500;color:#C9CFE6;margin-top:2px}
.hstat{display:flex;align-items:center;gap:16px;margin-top:20px;font-size:15px}
.hstat b{font-size:18px}.hstat small{font-size:12px;color:#C9CFE6;margin-left:3px}
.hstat .cbtn{border:0;background:#26346E;color:#fff;border-radius:6px;height:28px;padding:0 10px;font-size:11.5px;font-weight:600}
.hstat .vl{width:1px;height:28px;background:rgba(255,255,255,.25)}
.hstat .lvl{display:flex;align-items:center;gap:8px;font-weight:700}
.hstat .lvl .em{width:24px;height:24px;border-radius:50%;background:var(--lgreen);display:grid;place-items:center;color:var(--navy);font:800 10px var(--logo)}
.hstat .bar{width:200px;height:12px;border-radius:6px;background:#3A4885;position:relative;overflow:hidden;font-size:9px;line-height:12px;color:#fff}
.hstat .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--lgreen)}
.hstat .bar span{position:absolute;left:8px;color:var(--navy);font-weight:700}
.hchat{margin-left:auto;background:#fff;color:var(--text);border-radius:10px;width:200px;height:62px;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:13px;font-weight:700;border:0;text-align:left}
.hchat small{display:block;font-size:10.5px;font-weight:400;color:var(--hint)}
.hchat .ic{width:22px;height:22px;border-radius:6px;background:var(--yellow);display:grid;place-items:center;flex:none}.hchat .ic svg{width:13px;height:13px}
.hbody{max-width:1200px;margin:0 auto;padding:40px 0 60px;display:grid;grid-template-columns:773px 387px;gap:40px;width:100%}
.hsec{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.hsec h3{margin:0;font-size:17px;font-weight:700;display:flex;align-items:center;gap:6px}.hsec h3 svg{width:14px;height:14px}
.hsec .btn-d{height:30px;font-size:11.5px;padding:0 10px}
.hbox{border:1px solid var(--line);border-radius:14px;padding:4px 20px 22px}
.htabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:20px}
.htabs button{border:0;background:none;height:46px;padding:0 14px;font-size:13px;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1px}
.htabs button.on{color:var(--text);border-color:var(--ink);font-weight:700}
.hpapers{display:grid;grid-template-columns:repeat(5,1fr) 20px;gap:16px;align-items:start}
.hp{cursor:pointer;min-width:0}
.hp .th{width:82px;height:116px;margin:0 auto 14px;border-radius:8px;background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.hp .th .paper{height:auto;font-size:4.2px;padding:5px;border-radius:0}
.hp .th .bar{height:6px;background:var(--navy)}
.hp b{display:block;font-size:12px;margin-bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp .n{font-size:11px;color:var(--text2)}
.dots{display:inline-flex;gap:5px;border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:10px;margin:3px 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dots span::before{content:"●";font-size:8px;margin-right:1px;color:var(--c)}
.hp .dt{font-size:10.5px;color:var(--hint)}
.hnext{align-self:center;border:0;background:none;color:var(--text2);padding:0}
.h2c{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.tiles{display:grid;grid-template-columns:1fr 1fr;background:var(--side);border-radius:14px;overflow:hidden}
.tile{display:flex;align-items:center;gap:14px;padding:18px 22px;height:86px;font-size:12.5px;cursor:pointer}
.tile+.tile{border-left:1px solid #fff}
.tile svg{width:22px;height:22px;color:var(--text2)}
.tile b{display:block;font-size:13px;font-weight:400;color:var(--text2)}
.tile em{font-style:normal;font-size:15px;font-weight:700;color:var(--navy)}
.dbstat{display:grid;grid-template-columns:repeat(4,1fr);background:var(--side);border-radius:14px;margin-top:0}
.dbstat div{padding:18px 24px;height:104px;font-size:12.5px;color:var(--text2)}
.dbstat div+div{border-left:1px solid #fff}
.dbstat b{display:block;font-size:20px;color:var(--text);margin-top:12px}
.qi{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;background:#CFCED5;color:#fff;font-size:9px;font-weight:700;margin-left:4px;vertical-align:-1px}
.notice-l{list-style:none;margin:0;padding:0}
.notice-l li{display:flex;justify-content:space-between;gap:16px;height:36px;align-items:center;font-size:13px}
.notice-l li span:last-child{font-size:12px;color:var(--text2);flex:none}
.hban{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.hban .im{height:100px;background:var(--navy);color:#fff;padding:20px 22px;position:relative;overflow:hidden}
.hban .im small{display:block;font-size:11px;color:#C9CFE6}
.hban .im b{font:700 17px/1.3 var(--logo);display:block;margin-top:4px}
.hban .im .bk{position:absolute;right:22px;top:14px;width:70px;height:96px;background:#fff;border-radius:3px;transform:rotate(-3deg);overflow:hidden}
.hban .im .bk .paper{height:auto;font-size:3.2px;padding:4px;border-radius:0}
.hban .ct{display:flex;align-items:center;gap:8px;height:30px;padding:0 18px;font-size:11px;color:var(--text2)}
.hban .ct .pg{margin-left:auto;display:flex;gap:3px}.hban .ct .pg i{width:4px;height:4px;border-radius:50%;background:#D6D5DB}.hban .ct .pg i.on{background:var(--ink)}
.pop{list-style:none;margin:0;padding:0}
.pop li{display:flex;gap:14px;align-items:center;padding:7px 0;cursor:pointer}
.pop .th{width:46px;height:64px;border-radius:5px;overflow:hidden;background:#fff;border:1px solid var(--line);flex:none}
.pop .th .paper{height:auto;font-size:2.7px;padding:3px;border-radius:0}
.pop b{display:block;font-size:12.5px;line-height:1.4}
.pop span{font-size:11.5px;color:var(--text2)}
.quick{display:flex;gap:12px;align-items:center;padding:20px 0 12px;border-top:1px solid var(--line);margin-top:16px}
.quick .ic{width:34px;height:34px;border-radius:8px;background:var(--navy);display:grid;place-items:center;color:#fff}.quick .ic svg{width:18px;height:18px}
.quick b{display:block;font-size:13px}.quick span{font-size:11px;color:var(--text2)}
.links{list-style:none;margin:0;padding:0}
.links li{display:flex;align-items:center;gap:10px;height:32px;font-size:12.5px;color:var(--text2);cursor:pointer;padding-left:6px}
.links svg{width:15px;height:15px}
/* 내 문제지 */
.bans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:30px 0 0}
.bdots{display:flex;justify-content:center;gap:5px;margin:14px 0 36px}.bdots i{width:4px;height:4px;border-radius:50%;background:#D6D5DB}.bdots i.on{background:var(--navy)}
.banner{height:220px;border-radius:14px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 46px;overflow:hidden;position:relative;min-width:0;container-type:inline-size}
.bthumb{position:absolute;right:30px;top:36px;display:flex;gap:10px}
.mini{width:120px;height:170px;background:#fff;border-radius:3px;box-shadow:0 8px 20px rgba(0,0,0,.28);overflow:hidden;transform:rotate(-4deg)}
.mini+.mini{transform:rotate(3deg) translateY(14px)}
.mini .paper{height:auto;font-size:5.8px;padding:8px;border-radius:0}
.mini .mh2{background:var(--navy);color:#fff;font:700 7px var(--ui);padding:4px 8px}
.mini .play{position:absolute;inset:0;display:grid;place-items:center}.mini .play i{width:32px;height:32px;border-radius:50%;background:rgba(10,23,78,.85);display:grid;place-items:center}.mini .play i::before{content:"";border-left:10px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
@container (max-width:560px){.bthumb{display:none}}
.banner.b2{background:var(--green);}
.banner.b3{background:#F5D042;color:var(--navy)}.banner.b3 .bt small{color:var(--navy)}
.banner .bt small{display:block;color:#D9E0F5;font-size:15px;margin-bottom:8px}
.banner.b2 .bt small{color:#E3F5D2}
.banner .bt b{font:700 25px/1.38 var(--logo);letter-spacing:.01em}
.banner .bt{position:relative;z-index:1}
.lhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;min-height:40px}
.lhead h3{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.lhead h3 span{font-size:13px;font-weight:400;color:var(--text2)}
.lhead h3 svg{width:12px;height:12px;color:var(--text2)}
.lhead .r{display:flex;gap:6px;align-items:center}.lhead .sel{width:140px}
.folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:44px}
.fc{border:1px solid var(--line);border-radius:10px;padding:12px 14px;height:78px;display:flex;align-items:center;gap:14px;background:#fff;cursor:pointer;position:relative}
.fc.on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.fc .rc{margin-left:auto;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;flex:none}
.fc .rc svg{width:15px;height:15px;fill:var(--text2)}
.fc .fic{width:32px;height:24px;border-radius:4px}
.fc .fic::before{width:12px;height:6px;top:-4px}
.fc b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc>div:nth-child(2){min-width:0}
.fc span,.fc .dt{font-size:11px;color:var(--hint)}
.tabrow{display:flex;align-items:center;gap:16px;margin:0 0 16px}.tabrow .tabs4{flex:1;margin:0}
.vt{display:flex;gap:2px}.vt button{width:30px;height:30px;border:0;border-radius:6px;background:none;display:grid;place-items:center}.vt button.on{background:#E7E6EA}.vt svg{width:15px;height:15px;fill:var(--text2)}.vt button.on svg{fill:var(--ink)}
.tabs4{display:flex;border-bottom:1px solid var(--line)}
.tabs4 button{border:0;background:none;height:44px;width:78px;font-size:13px;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs4 button.on{color:var(--text);border-color:var(--ink);font-weight:700}
.seltools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.seltools .btn-g,.seltools .btn-d,.seltools .btn-r{height:36px;font-size:12.5px}.seltools .sel{width:140px}.seltools .sel select{height:36px}
.segs{display:inline-flex;background:#F0EFF3;border-radius:8px;padding:3px}
.segs button{border:0;background:none;height:32px;padding:0 18px;border-radius:6px;font-size:12.5px;color:var(--text2)}
.segs button.on{background:#fff;color:var(--text);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:14px}
.sc{background:#F8F8FA;border:1px solid transparent;border-radius:10px;padding:10px 12px 10px 10px;display:grid;grid-template-columns:46px 1fr;gap:4px 12px;min-height:178px;position:relative;cursor:pointer}
.sc:hover{border-color:var(--line2)}
.sc.ed{background:#EFF0F7;border:1px dashed #9AA3C7}
.sc.on{border:1px solid var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.sc .ckm{position:absolute;left:8px;top:8px;width:18px;height:18px;border-radius:50%;background:var(--navy);display:none;place-items:center;z-index:1}.sc.on .ckm{display:grid}.sc .ckm::before{content:"";width:7px;height:3.5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.sc .tm{grid-column:2;font-size:11px;color:var(--text);margin-top:14px}
.sc .th{width:46px;height:66px;border-radius:6px;overflow:hidden;position:relative;background:#fff;border:1px solid var(--line)}
.sc .th .paper{height:auto;font-size:2.9px;padding:3px;border-radius:0}
.sc .th .bar{height:5px;background:var(--navy)}
.sc .k{font-size:11.5px;color:var(--hint);display:flex;justify-content:space-between;align-items:center;height:22px}
.sc .k .r{display:flex;gap:4px;align-items:center}
.sc .k .more{border:0;background:none;padding:2px 3px;border-radius:5px;color:var(--text2);display:grid;place-items:center}.sc .k .more svg{width:15px;height:15px;fill:currentColor}
.sc .k .more.on{background:var(--navy);color:#fff}
.sc .nm{font-size:13px;font-weight:700;margin:6px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:3px}
.sc .nm svg{width:10px;height:10px;color:var(--text2);flex:none}
.sc>div:nth-child(3){min-width:0}
.sc .ft{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;font-size:10.5px;color:var(--hint);margin-top:auto;padding:10px 0 0 58px}
.sc .ft .e{color:var(--navy);font-weight:700}
.sc .ft .dl{display:inline-flex;gap:6px;align-items:center}.sc .ft svg{width:13px;height:13px;color:var(--text2)}
.sc .badge{font-size:9.5px;border-radius:3px;padding:0 5px;background:#E7E6EA;color:var(--text2)}
.sc .badge.g{background:var(--green);color:#fff;font-weight:700}
.empty{text-align:center;color:var(--text2);padding:110px 0;font-size:13px;line-height:1.7}
.empty .mg{display:block;margin:0 auto 12px;width:26px;height:26px}
.skel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.skel div{height:140px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(#F2F1F4,#F2F1F4) 12px 12px/34px 50px no-repeat,linear-gradient(#F2F1F4,#F2F1F4) 66px 46px/60% 10px no-repeat,linear-gradient(#F2F1F4,#F2F1F4) 66px 66px/40% 10px no-repeat}
/* 나만의 DB 표 */
.dbtools{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--text2);flex-wrap:wrap}
.dbtools label{display:flex;gap:6px;align-items:center}
.dbtools .vl{width:1px;height:14px;background:var(--line2)}
.dbtools .sel{width:120px}.dbtools .sel select{height:36px;font-size:12px}
.dbtools .sbox{height:36px;width:180px;margin:0}
.dbt{border:1px solid var(--line);border-radius:10px;margin-top:12px;overflow:hidden}
.dbt .hd,.dbt .rw{display:grid;grid-template-columns:44px 52px minmax(0,1fr) 200px 200px 90px 120px 40px;align-items:center;gap:0 8px;padding:0 10px}
.dbt .hd{height:30px;font-size:10.5px;color:var(--text2);border-bottom:1px solid var(--line)}
.dbt .hd span{text-align:center}.dbt .hd span:nth-child(3){text-align:left}
.dbt .rw{min-height:74px;border-bottom:1px solid var(--line);cursor:pointer}
.dbt .rw:last-child{border-bottom:0}
.dbt .rw:hover{background:#F7F7FB}
.dbt .rw.on{background:var(--tint)}
.dbt .rth{width:32px;height:44px;border-radius:3px;background:var(--navy);position:relative;overflow:hidden}
.dbt .rth::after{content:"";position:absolute;left:6px;right:6px;bottom:7px;height:14px;border-radius:7px 7px 0 0;background:var(--lgreen)}
.dbt .ch{display:flex;gap:3px;align-items:center;font-size:10px;margin-bottom:3px}
.dbt .ch span{border-radius:3px;padding:0 4px;line-height:15px}
.dbt .ch .pro{background:var(--navy);color:#fff;font-weight:700}
.dbt .ch .ok{background:var(--green);color:#fff;font-weight:700}
.dbt .ch .im{background:#E7E6EA;color:var(--text2)}
.dbt .ch .st{color:var(--text2)}
.dbt .tt{font-size:13px;font-weight:700;display:flex;gap:3px;align-items:center}
.dbt .tt svg{width:10px;height:10px;color:var(--text2)}
.dbt .sub{font-size:10.5px;color:var(--hint)}
.dbt .c{text-align:center;font-size:10.5px}
.dbt .c svg{width:16px;height:16px;color:var(--text2)}
.dbt .dots{margin:0}
/* 창 */
.dim{position:fixed;inset:0;background:rgba(20,20,30,.5);display:grid;place-items:center;z-index:50;padding:20px}
.dim.top{z-index:55;background:rgba(20,20,30,.35)}
.modal{background:#fff;border-radius:18px;width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow:auto;padding:24px 20px 20px;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative}
.modal.wide{max-width:690px;padding:26px 24px 20px}
.modal.xl,.modal.full{align-items:stretch}
.modal.xl{max-width:1420px;height:calc(100vh - 100px);display:flex;flex-direction:column;overflow:hidden;padding:24px 24px 20px}
.modal.full{max-width:none;width:calc(100vw - 56px);height:calc(100vh - 56px);display:flex;flex-direction:column;overflow:hidden;padding:22px 24px 20px}
.modal.cf{max-width:350px;padding:28px 22px 20px}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.mh h4{margin:0;font-size:17px;font-weight:700}
.mh .r{display:flex;gap:6px;align-items:center}
.btn-t{border:0;background:var(--tint2);color:var(--navy);border-radius:6px;height:28px;padding:0 10px;font-size:11.5px;font-weight:500}
.mtabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:20px}
.mtabs button{flex:1;border:0;background:none;height:42px;font-size:13px;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1px}
.mtabs button.on{color:var(--text);border-color:var(--ink);font-weight:700}
.mtabs.l button{flex:none;width:196px}
.lab{font-size:13px;font-weight:700;margin:18px 0 9px;display:flex;align-items:center;gap:4px}
.lab em{color:var(--red);font-style:normal}
.lab.row{justify-content:space-between}
.lsub{font-size:11px;color:var(--hint);margin:-6px 0 8px}
.kind{display:flex;background:#F0EFF3;border-radius:8px;padding:3px}
.kind button{flex:1;border:0;background:none;height:32px;border-radius:6px;font-size:13px;color:var(--text2)}
.kind button.on{background:#fff;color:var(--text);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.kdesc{display:flex;gap:12px;align-items:center;background:var(--side);border-radius:8px;padding:12px;margin-top:10px;font-size:12.5px;line-height:1.55}
.kdesc .th{width:32px;height:46px;border-radius:5px;background:#fff;border:1px solid var(--line);flex:none;position:relative;overflow:hidden}
.kdesc .th::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--navy)}
.tin{width:100%;height:40px;border:1px solid var(--line);border-radius:8px;padding:0 34px 0 10px;font-size:13px}
.tin:focus{outline:0;border:1.5px solid var(--navy)}
.tinw{position:relative}.tinw .clr[hidden]{display:none}.tinw .clr{position:absolute;right:8px;top:10px;border:0;background:none;color:var(--text2);padding:0;width:20px;height:20px;display:grid;place-items:center}
.orow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.orow .l b{display:flex;align-items:center;gap:4px;font-size:13px}
.orow .l small{display:block;font-size:11px;color:var(--hint);margin-top:2px}
.orow .numin{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;height:36px;padding:0 10px;width:70px;font-size:13px}
.orow .numin input{width:100%;border:0;outline:0;text-align:right}
.orow .sel{width:150px}.orow .sel select{height:36px;font-size:12px}
.rds{display:flex;gap:40px;margin-top:8px}
.dates{display:flex;align-items:center;gap:8px;margin-top:10px}.dates .sel{flex:1}
.mf{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
.modal.wide .mf{position:sticky;bottom:-20px;background:#fff;margin:24px -24px -20px;padding:14px 24px 20px}
.modal.xl .mf,.modal.full .mf{margin-top:14px;flex:none}
.pdfsw{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text2)}
.notice{background:var(--tint);border-radius:10px;padding:13px 16px;font-size:11.5px;line-height:1.6;color:var(--text)}
.notice .ni{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--navy);color:#fff;font:700 10px var(--ui);margin-right:6px;vertical-align:-3px}
.notice ul{margin:3px 0 0;padding-left:16px}
.notice b{display:block;font-size:13px;margin-bottom:1px;color:var(--navy);font-weight:600}
.sepl{height:1px;background:var(--line);margin:20px 0 0}
.otiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.otiles.two{grid-template-columns:repeat(3,minmax(0,1fr))}
.ot{border:2px solid transparent;background:var(--side);border-radius:10px;padding:14px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12.5px;color:var(--text2)}
.ot[aria-pressed="true"]{border-color:var(--navy);background:var(--tint);color:var(--navy);font-weight:700}
.ot:disabled{opacity:.55}
.ot .pv{width:100%;height:110px;display:flex;justify-content:center;align-items:center;gap:6px;position:relative}
.pv .pg{width:52px;height:72px;background:#fff;border:1px solid var(--line2);border-radius:2px;position:relative;box-shadow:2px 2px 0 #E7E6EA}
.pv .pg::before{content:"";position:absolute;left:5px;right:5px;top:5px;height:6px;background:var(--hb,var(--navy))}
.pv .pg::after{content:"";position:absolute;left:50%;top:15px;bottom:5px;width:1px;background:var(--line2)}
.pv .pg.one::after{display:none}
.pv .pg.cv{background:var(--navy)}.pv .pg.cv::before{background:var(--lgreen)}.pv .pg.cv::after{display:none}
.pv .pg+.pg{margin-left:-24px;margin-top:14px}
.pv .num{font:700 var(--ns,18px) var(--ui);color:var(--navy)}
.pv .bars{display:flex;flex-direction:column;gap:var(--gp,4px);width:70%}
.pv .bars i{height:8px;border-radius:2px;background:#DCE0F0}
.incs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px}
.incs .mini2{border:0;background:#F0EFF3;border-radius:6px;height:28px;padding:0 10px;font-size:11.5px;margin-left:8px}
.incs .mini2:disabled{opacity:.5}
.toast{position:fixed;left:50%;top:52%;transform:translate(-50%,-50%);background:rgba(90,90,96,.94);color:#fff;border-radius:30px;padding:14px 34px;font-weight:600;z-index:70;text-align:center;font-size:14px;max-width:min(380px,90vw);line-height:1.45}
.toast small{display:block;font-weight:400;font-size:12px;opacity:.9;margin-top:3px}
.gen{position:fixed;right:22px;bottom:70px;background:var(--ink);color:#fff;border-radius:14px;padding:5px 12px;font-size:11px;font-weight:600;z-index:40}
.fab{position:fixed;right:22px;bottom:18px;width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center;z-index:40;border:0}
.fab svg{width:18px;height:18px;fill:#fff}
.big .paper{height:auto;max-height:none;font-size:15.5px}
/* 큰 창 안 */
.xlb{display:flex;gap:20px;flex:1;min-height:0}
.src{width:270px;flex:none;background:var(--side);border-radius:10px;padding:14px;overflow:auto;font-size:11.5px}
.src>b{display:block;font-size:12px;margin:12px 0 4px}.src>b:first-child{margin-top:0}
.src .paper{height:auto;font-size:10px;padding:10px}
.rs{flex:1;min-width:0;display:flex;flex-direction:column}
.segs.wide{display:flex;width:100%}.segs.wide button{flex:1;padding:0 6px}
.rsl{flex:1;overflow:auto;padding-right:4px;margin-top:10px}
.rsec{margin:16px 0 8px;font-size:13px;font-weight:700}.rsec span{font-weight:400;color:var(--text2);margin-left:6px}
.rbox{border:1px solid var(--line);border-radius:10px;min-height:120px;display:grid;place-items:center;font-size:12px;color:var(--text2);padding:12px}
.rbox .grid{width:100%}
.addl{display:flex;gap:20px;flex:1;min-height:0}
.addl .fp{width:330px;flex:none;background:var(--side);border-radius:12px;padding:6px 12px 14px;overflow:auto;display:flex;flex-direction:column}
.addl .rr{flex:1;min-width:0;overflow:auto;padding-right:6px}
/* 수식 입력 */
.pal{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:12px}
.pal button{height:30px;border:0;border-radius:6px;background:#F0EFF3;font:14px "Times New Roman",serif}
.prev{height:46px;border-radius:8px;background:var(--tint);display:flex;align-items:center;padding:0 14px;font:16px "Times New Roman",serif;color:var(--navy)}
/* 배점 */
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin-top:10px}
.sgrid .r{display:flex;align-items:center;gap:8px;font-size:12px}
.sgrid .r .no{width:22px;font-weight:700}
.sgrid .r .ty{width:44px;color:var(--text2)}
.sgrid .r input{width:62px;height:30px;border:1px solid var(--line);border-radius:6px;text-align:right;padding:0 8px;font-size:12px;margin-left:auto}
.ap{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:10px}
.ap .numin{width:56px;height:32px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;padding:0 8px}.ap .numin input{width:100%;border:0;outline:0;text-align:right}
/* 서식(프레젠테이션) */
.fmt{display:grid;grid-template-columns:1fr;gap:6px;margin-top:6px}
.fmt .h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;margin-top:12px}
.fmt .h span{display:flex;gap:12px;align-items:center;font-size:11px;font-weight:400;color:var(--text2)}
.fmt .h label{display:flex;gap:6px;align-items:center}
.fmt .r{display:grid;grid-template-columns:72px 1fr 100px;gap:6px}
.fmt .clr{height:36px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:12px}.fmt .clr i{width:12px;height:12px;border-radius:50%;background:#111}
.fmt .stp{height:36px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:12.5px}
.fmt .stp button{border:0;background:none;width:20px;font-size:15px;padding:0}
.fmt .sel select{height:36px;font-size:12px}
.bgs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.bgs button{height:100px;border:2px solid var(--line);border-radius:8px;background:#fff;padding:6px;font:9px "Nanum Myeongjo",serif;text-align:left;color:#111;overflow:hidden}
.bgs button.k{background:#111;color:#fff}
.bgs button[aria-pressed="true"]{border-color:var(--navy)}
.mock{display:inline-block;background:var(--yellow);color:var(--navy);font-size:11px;font-weight:800;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.mtip{position:absolute;inset:0;background:rgba(255,255,255,.6);display:grid;place-items:center;z-index:3;border-radius:18px}
.mtip .bx{width:312px;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.2);padding:18px 18px 16px;font-size:11.5px;line-height:1.6}
.mtip .gc{background:var(--green);color:#fff;border-radius:10px;padding:16px 16px 40px;margin-bottom:14px}
.mtip .gc b{display:flex;justify-content:space-between;align-items:center;font-size:16px}
.mtip .gc b span{background:#fff;color:var(--green);font-size:10px;border-radius:10px;padding:2px 8px}
.mtip .gc p{margin:10px 0 0;color:#F5F9C8;font-weight:700;font-size:12.5px;line-height:1.5}
@media (max-width:1700px){.hbody{grid-template-columns:minmax(0,1fr) 340px;padding-inline:40px}.hin{padding-inline:40px}}
@media (max-width:1280px){.bans{grid-template-columns:1fr}.bans .banner:not(:first-child){display:none}.hbody{grid-template-columns:1fr}.dbt .hd,.dbt .rw{grid-template-columns:36px 44px minmax(0,1fr) 170px 40px}.dbt .hd span:nth-child(5),.dbt .rw>:nth-child(5),.dbt .hd span:nth-child(6),.dbt .rw>:nth-child(6),.dbt .hd span:nth-child(7),.dbt .rw>:nth-child(7){display:none}}
@media (max-width:980px){.panel{width:270px}.panel.w{width:290px}.hpapers{grid-template-columns:repeat(3,1fr)}.hpapers .hp:nth-child(n+4),.hnext{display:none}}
@media (max-width:760px){
  .app{flex-direction:column}
  .gnav{width:auto;height:auto;position:static;flex-direction:row;align-items:center;gap:4px;padding:10px 16px;overflow-x:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .gnav .logo{margin:0 8px 0 0}.gnav .logo .cl{display:none}.gnav .avatar{display:none}.gnav a{margin:0}.gnav a svg{display:none}
  .panel,.panel.w{width:auto;height:auto;position:static;border-right:0;border-bottom:1px solid var(--line);padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .panel .spacer{display:none}
  .dhead{height:auto;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));flex-wrap:wrap}
  .sumpill{margin-left:0}
  .wrap{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .stepper .ln{width:40px}.qc.multi{grid-template-columns:1fr}.qx{border-left:0;border-top:1px solid var(--line)}.critb{width:100%}.crit{flex:1}
  .otiles,.otiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}.ot{min-width:0;font-size:12px}.ot .pv{overflow:hidden}.modal.wide .mf{margin-inline:-24px}.incs{grid-template-columns:1fr 1fr}
  .banner{padding:0 20px;height:150px}.banner .bt b{font-size:20px}.tabrow{flex-wrap:wrap}.tabs4 button{width:auto;padding:0 12px}
  .hband{height:auto}.hin{flex-wrap:wrap;padding:24px 16px}.hav{width:72px;height:72px}.hav svg{left:16px;top:18px;width:28px;height:28px}.hname{font-size:20px}.hsub{font-size:15px}.hstat{flex-wrap:wrap;gap:10px}.hstat .bar{width:140px}.hchat{margin-left:0}
  .hbody{padding:24px 16px 40px}.h2c{grid-template-columns:1fr}.dbstat{grid-template-columns:1fr 1fr}.dbstat div:nth-child(3){border-left:0}
  .modal.full,.modal.xl{width:100%;height:calc(100vh - 40px)}.xlb,.addl{flex-direction:column;overflow:auto}.src,.addl .fp{width:auto}
  .dbt .hd,.dbt .rw{grid-template-columns:30px minmax(0,1fr) 34px}.dbt .hd span:nth-child(2),.dbt .rw>:nth-child(2),.dbt .hd span:nth-child(4),.dbt .rw>:nth-child(4){display:none}
  .etools{justify-content:flex-start}.etog{justify-content:flex-start}
  .mh{flex-wrap:wrap}.mh h4{white-space:nowrap}.mh .r{flex-wrap:wrap;gap:10px!important}.segs.wide{overflow-x:auto}.segs.wide button{flex:none;white-space:nowrap;padding:0 10px}.pdfsw{white-space:nowrap}.mtabs.l button{width:auto;flex:1}
}
/* 여는 동안 덮개(자료실에서 더함) */
.boot{position:fixed;inset:0;z-index:50;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font:600 14px/1.5 var(--ui);color:var(--text)}
.boot img{height:28px}
.boot p{margin:0;padding:0 16px;text-align:center}
.boot a{color:var(--navy);font-weight:700}

/* ── 7판 2단계: 학원 DB 시험지 카드 · 넘겨 보기 · 바로 인쇄 ── */
.pi8{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;vertical-align:-3px;margin-right:5px}
.pgw8{width:calc(794px * var(--z));height:calc(1123px * var(--z));position:relative;overflow:hidden;flex:none;max-width:none}
.pg8{position:absolute;left:0;top:0;width:794px;height:1123px;background:#fff;transform:scale(var(--z));transform-origin:0 0;overflow:hidden}
.ex8{position:absolute;inset:0;padding:54px 50px 60px;display:flex;flex-direction:column;font-family:var(--ui);color:#111}
.eh8{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2.5px solid #0A174E;padding-bottom:12px;margin-bottom:18px}
.ehl8{display:flex;flex-direction:column;gap:2px}
.lg8{font:700 13px var(--logo);color:#0A174E;letter-spacing:.06em}
.ehl8 b{font:700 24px/1.3 var(--logo);color:#0A174E}.ehl8 small{font-size:12px;color:#2E3A66}
.ehr8{display:flex;gap:6px}.ehr8 span{width:74px;height:34px;border:1px solid #9AA0BC;border-radius:4px;font-size:10.5px;color:#2E3A66;padding:3px 6px}
.eh8s{display:flex;justify-content:space-between;font-size:11px;color:#2E3A66;border-bottom:1px solid #C9CDDB;padding-bottom:6px;margin-bottom:18px}
.ec8{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.ec8>div{display:flex;flex-direction:column;padding:0 18px;min-height:0;overflow:hidden}
.ec8>div:first-child{border-right:1px solid #C9CDDB;padding-left:0}.ec8>div:last-child{padding-right:0}
.ec8 .eq8{flex:1 1 0;min-height:0;overflow:hidden}
.eq8{display:flex;gap:8px;padding-bottom:14px}
.en8{font:700 17px var(--logo);color:#0A174E;flex:none;min-width:22px}
.eq8 .paper{font-size:12.5px;line-height:1.75;min-width:0;padding:0;border-radius:0;flex:1}
.eq8 .paper .fig img{max-width:100%;max-height:220px}
.ef8{text-align:center;font-size:11px;color:#2E3A66;padding-top:8px}
.qa8h{font:700 20px var(--logo);color:#0A174E;margin:6px 0 16px}
.qa8{display:grid;grid-template-columns:repeat(5,1fr);border-top:1.5px solid #0A174E;border-left:1px solid #C9CDDB;align-content:start}
.qa8 div{display:flex;gap:10px;align-items:center;padding:9px 12px;border-right:1px solid #C9CDDB;border-bottom:1px solid #C9CDDB;font-size:13px;min-height:40px}
.qa8 b{color:#0A174E;min-width:18px}.qa8 span{overflow:hidden}
.wm8{position:absolute;inset:-20% -20%;display:flex;flex-wrap:wrap;gap:120px 90px;align-content:space-around;justify-content:space-around;transform:rotate(-20deg);pointer-events:none}
.wm8 span{font:700 15px var(--ui);color:rgba(10,23,78,.10);white-space:nowrap}
/* 카드 */
.db8n{font-size:13px;color:var(--text2);margin:0 0 18px}
.dg8{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px}
.dc8{display:flex;gap:20px;border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;min-width:0;transition:border-color .15s,box-shadow .2s}
.dc8:hover{border-color:var(--line2);box-shadow:0 12px 28px -18px rgba(10,23,78,.35)}
.dc8p{position:relative;flex:none;border:1px solid var(--line);border-radius:6px;padding:0;background:#fff;overflow:hidden;cursor:zoom-in;box-shadow:0 10px 24px -16px rgba(10,23,78,.45);transition:transform .2s,box-shadow .2s;align-self:flex-start}
.dc8p:hover{transform:translateY(-3px)}
.dc8o{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(10,23,78,.85));color:#fff;font-size:11.5px;font-weight:600;padding:22px 10px 8px;opacity:0;transition:opacity .15s;text-align:left}
.dc8p:hover .dc8o,.dc8p:focus-visible .dc8o{opacity:1}
.dc8i{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.dc8i>b{font-size:17px;color:var(--text)}.dc8i>small{font-size:12px;color:var(--text2);line-height:1.5}
.dc8n{display:flex;gap:22px;margin:4px 0 0}.dc8n div{display:flex;flex-direction:column}.dc8n dt{font-size:11.5px;color:var(--text2)}.dc8n dd{margin:0;font-size:20px;font-weight:700;color:var(--navy)}
.dc8u{font-size:12.5px;color:var(--text);line-height:1.5}
.dc8l .sumpill{flex-wrap:wrap}
.dc8a{display:flex;gap:6px;align-items:center;margin-top:auto;flex-wrap:wrap}.dc8a .btn-n{display:inline-flex;align-items:center}
@media (max-width:900px){.dg8{grid-template-columns:1fr}}
@media (max-width:640px){.dc8{flex-direction:column}}
/* 넘겨 보기(어두운 바탕 한 가지) */
.vw8{position:fixed;inset:0;z-index:60;background:#141A35;color:#fff;display:flex;flex-direction:column;animation:fIn8 .2s ease both}
.vw8.out{animation:fOut8 .18s ease both}
@keyframes fIn8{from{opacity:0}to{opacity:1}}@keyframes fOut8{from{opacity:1}to{opacity:0}}
.vh8{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 12px;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.vx8{width:38px;height:38px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer}
.vx8:hover{background:rgba(255,255,255,.16)}
.vx8.lt{background:var(--tint);color:var(--navy)}
.vt8{display:flex;flex-direction:column;min-width:0;flex:1}
.vt8 span{font-size:11px;font-weight:700;color:#A5CE3A;letter-spacing:.04em}
.vt8 b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vt8 small{font-size:12px;color:#C9CFE6}
.vz8{display:flex;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.vz8 button{border:0;background:none;color:#fff;height:32px;min-width:34px;padding:0 10px;border-radius:7px;font:600 13px var(--ui);cursor:pointer}
.vz8 button:hover{background:rgba(255,255,255,.12)}
.va8{display:flex;gap:6px}
.va8 button{height:38px;border-radius:10px;font:600 13px var(--ui);padding:0 14px;cursor:pointer;display:inline-flex;align-items:center}
.va8 .vg{border:1px solid rgba(255,255,255,.22);background:none;color:#fff}.va8 .vg:hover{background:rgba(255,255,255,.1)}
.va8 .vp{border:0;background:#A5CE3A;color:#0A174E;padding:0 18px}
.vb8{flex:1;display:flex;min-height:0}
.vr8{width:150px;flex:none;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px;border-right:1px solid rgba(255,255,255,.08)}
.vr8 button{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:#C9CFE6;font:600 11.5px var(--ui)}
.vr8 .pgw8{border-radius:3px;outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s}
.vr8 button.on{color:#fff}.vr8 button.on .pgw8{outline-color:#A5CE3A}
.vs8{position:relative;flex:1;overflow:auto;padding:24px 32px 40px;display:flex;flex-direction:column;align-items:center;gap:24px}
.vpg8{position:relative;box-shadow:0 18px 50px -10px rgba(0,0,0,.55);flex:none}
.vf8{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);font:600 13px var(--ui)}
.vf8 button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.vf8 small{font-size:11.5px;font-weight:500;color:#C9CFE6;margin-left:12px}
@media (max-width:760px){.vr8{display:none}.vs8{padding:16px}.vf8 small,.vz8 .zw{display:none}.vt8{flex-basis:calc(100% - 60px)}}
/* 바로 인쇄 창(넘겨 보기 위에) */
.dim.pr8w{z-index:70}
.pr8{background:#fff;border-radius:16px;width:min(460px,100%);padding:20px 22px;display:flex;flex-direction:column;gap:12px;color:var(--text)}
.pr8h{display:flex;justify-content:space-between;align-items:center}.pr8h h4{margin:0;font-size:17px}
.pr8d{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px}
.pr8t{flex:none;border:1px solid var(--line)}
.pr8d span{font-size:11px;font-weight:700;color:var(--navy2)}.pr8d b{display:block;font-size:15px}.pr8d small{font-size:12px;color:var(--text2)}
.pr8l{font-size:12.5px;font-weight:700}
.pr8s{display:grid;grid-template-columns:repeat(3,1fr);background:var(--tint);border-radius:999px;padding:3px}
.pr8s button{border:0;background:none;border-radius:999px;padding:8px 4px;font:600 12.5px var(--ui);color:var(--text2);cursor:pointer}
.pr8s button[aria-pressed="true"]{background:var(--navy);color:#fff}
.pr8n{font-size:12.5px;color:var(--text2);margin:0;line-height:1.6}
.pr8b{display:flex;justify-content:flex-end;gap:8px}.pr8b .btn-n{display:inline-flex;align-items:center}
#prt8{display:none}
/* ── 7판 3단계: 찾기 문제 상세보기(오른쪽 서랍) · 문항 신청 · 아래 막대 ── */
.dim.dt8w{display:flex;justify-content:flex-end;align-items:stretch;padding:0;background:rgba(10,23,78,.22);animation:fIn8 .18s ease both}
.dim.dt8w.still{animation:none}.dim.dt8w.out{animation:fOut8 .18s ease both}
.dt8{width:min(560px,100%);height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:-18px 0 50px -24px rgba(10,23,78,.45);animation:sIn8 .22s cubic-bezier(.2,.7,.2,1) both}
.dt8w.still .dt8{animation:none}.dt8w.out .dt8{animation:sOut8 .18s ease both}
@keyframes sIn8{from{transform:translateX(36px);opacity:.4}to{transform:none;opacity:1}}@keyframes sOut8{to{transform:translateX(36px);opacity:0}}
.dt8h{display:flex;align-items:center;gap:6px;padding:14px 16px 12px 22px;border-bottom:1px solid var(--line)}
.dt8h h4{margin:0 auto 0 0;font-size:17px;color:var(--navy)}
.dt8n{font-size:12.5px;color:var(--text2);margin-right:4px}
.dt8x{width:34px;height:34px;border:0;border-radius:9px;background:var(--tint);color:var(--navy);font-size:18px;display:grid;place-items:center;cursor:pointer}
.dt8x:hover:not(:disabled){background:var(--tint2)}.dt8x:disabled{opacity:.35;cursor:default}
.dt8b{flex:1;overflow-y:auto;padding:18px 22px 24px;display:flex;flex-direction:column;gap:16px}
.dt8m{display:grid;grid-template-columns:44px 1fr;gap:6px 10px;margin:0;font-size:12.5px}.dt8m dt{color:var(--text2);font-weight:600}.dt8m dd{margin:0;color:var(--text)}
.dt8s{display:flex;flex-direction:column;gap:8px;min-width:0}
.dt8t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--navy)}
.dt8p{border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:15px;container-type:normal}
.dt8p .fig img{max-width:70%}
.dt8g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dt8a{font-size:15px;font-weight:700;color:var(--navy)}
.dt8w2{font-size:11px;font-weight:700;color:var(--red);margin-left:6px}
.dt8no{font-size:13px;color:var(--text);line-height:1.7}
.dt8l{border:0;background:none;padding:0;font:700 13px var(--ui);color:var(--navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:4px}
.dt8ok{display:inline-block;font-size:12px;font-weight:700;color:var(--green);background:#E9F5EC;border-radius:999px;padding:2px 9px;margin-left:4px}
.dt8r{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dt8r li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}.dt8r small{flex-basis:100%;color:var(--text2)}
.st8{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--tint);color:var(--navy)}
.st8.s-sent{background:#FFF4D6;color:#7A5A00}.st8.s-done{background:#E9F5EC;color:var(--green)}.st8.s-fail{background:#FDE8EA;color:var(--red)}
.dt8f{display:flex;justify-content:flex-end;gap:8px;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.dt8f .btn-n,.dt8f .btn-c{height:40px;padding:0 18px}
.dim.rq8w{z-index:70}
.dt8sol{font-size:14px}
.dt8v{display:flex;flex-wrap:wrap;gap:8px}
.dt8v button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--line2);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font:12.5px var(--ui);color:var(--text)}
.dt8v button:hover{border-color:var(--navy)}.dt8v b{color:var(--navy)}.dt8v span{font-size:11px;color:var(--text2)}
.qh .tb.vr{background:#E9F5EC;color:var(--green)}
.rq8 textarea{width:100%;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font:14px/1.5 var(--ui);color:var(--text);resize:vertical}
.rq8 textarea:focus{outline:2px solid var(--navy);outline-offset:-1px}
.rq8i{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;background:var(--tint)}.rq8i b{font-size:14px}.rq8i small{font-size:12px;color:var(--text2)}
.rq8k{display:flex;flex-wrap:wrap;gap:6px}
.rq8k label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer}
.rq8k input{accent-color:var(--navy);margin:0}
.rq8k label:has(input:checked){border-color:var(--navy);background:var(--tint);color:var(--navy);font-weight:700}
.menu button:disabled{opacity:.45;cursor:default}
.sb8{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;border-radius:16px;padding:10px 12px 10px 20px;box-shadow:0 18px 40px -16px rgba(10,23,78,.6);max-width:calc(100vw - 32px);animation:bIn8 .22s ease both}
@keyframes bIn8{from{transform:translate(-50%,12px);opacity:0}to{transform:translateX(-50%);opacity:1}}
.sb8 b{font-size:14px;white-space:nowrap}.sb8 span{font-size:12.5px;color:#C9CFE6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.sb8 .btn-n{background:#A5CE3A;color:#0A174E;height:38px;padding:0 16px;white-space:nowrap}
.sb8 .btn-g{background:rgba(255,255,255,.12);color:#fff;height:38px;padding:0 14px;white-space:nowrap}
@media (max-width:640px){.dt8g{grid-template-columns:1fr}.sb8{left:16px;right:16px;transform:none;flex-wrap:wrap;animation:none}.sb8 span{display:none}}
@media print{
  @page{size:A4;margin:14mm 13mm}
  body>*:not(#prt8){display:none!important}
  #prt8{display:block;font-family:var(--ui);color:#111}
  #prt8 .pq8{column-count:2;column-gap:28px;column-rule:1px solid #C9CDDB}
  #prt8 .eq8{break-inside:avoid;padding-bottom:22px}
  #prt8 .pwm8{position:fixed;bottom:0;left:0;right:0;text-align:center;font:600 8.5pt var(--ui);color:#666}
}