/* aigrade 자동채점 시스템 — 화면 스타일
app.html 에서 분리(2026-08-21). 편집 후 ops/check.py 를 반드시 돌릴 것.
주의: 새 클래스는 접두어 필수 — .lb 충돌로 라벨이 조용히 사라진 적이 있다(SKILL §38). */
:root{
--night:#0B1220; --ink:#0F172A; --mut:#556070; --line:#E1E6EF;
--blue:#2F6BFF; --run:#12B76A; --warn:#F59E0B; --red:#DC2626;
--bg:#F6F7FB; --card:#fff; --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
font-family:'NanumSquareNeo',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
font-size:14.5px;line-height:1.62;-webkit-text-size-adjust:100%;letter-spacing:-.2px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1460px;margin:0 auto;padding:0 22px}
/* header */
.brand{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 12px 14px;
margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.09)}
.sfoot{margin-top:auto;padding:14px 6px 6px;font-size:12px;color:#B4C4E0;line-height:1.75;
border-top:1px solid rgba(255,255,255,.14)}
.uinfo{margin:0 2px 12px;padding:11px 12px;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);border-radius:10px;font-size:12.5px}
.tab.sup{color:#E8B44A}
.tab.sup i{filter:none}
.tab.sup::after{content:'운영';margin-left:auto;font-size:10.5px;font-weight:800;
color:#7A5A12;background:#E8B44A;border-radius:5px;padding:1px 5px;letter-spacing:-.3px}
.tab.sup:hover{background:rgba(232,180,74,.12);color:#F3C86A}
.tab.sup.on{background:rgba(232,180,74,.18);color:#F5D083;box-shadow:inset 2px 0 0 #E8B44A}
.fq2{height:8px;border-radius:5px;background:#E8EDF6;overflow:hidden;margin:6px 0 3px}
.fq2 i{display:block;height:100%;background:var(--blue);transition:width .3s}
.fq2 i.hi{background:var(--warn)}
/* ── 탐색기 레이아웃 ── */
.fwrap{display:grid;grid-template-columns:290px 1fr;gap:14px;align-items:start}
@media(max-width:1180px){.fwrap{grid-template-columns:250px 1fr}}
@media(max-width:900px){.fwrap{grid-template-columns:1fr}}
.fside{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;
position:sticky;top:12px;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain}
.fside::-webkit-scrollbar{width:8px}
.fside::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
.fside::-webkit-scrollbar-track{background:transparent}
@media(max-width:900px){.fside{position:static;max-height:340px}}
.fside-h{font-size:12px;font-weight:800;color:var(--mut);margin:2px 0 8px;letter-spacing:-.3px}
.fnode{display:flex;align-items:center;gap:5px;padding:6px 8px 6px 4px;border-radius:8px;font-size:13px;
font-weight:700;color:var(--ink);text-decoration:none;cursor:pointer;margin-bottom:2px}
.fnode span.t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fcar{flex:none;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
border:0;background:none;color:var(--mut);font-size:10px;cursor:pointer;border-radius:5px;padding:0}
.fcar:hover{background:#DCE7FF;color:var(--blue)}
.fcar.no{visibility:hidden;cursor:default}
.fnode.on .fcar{color:#D8E5FF}
.fnode.on .fcar:hover{background:rgba(255,255,255,.22);color:#fff}
.fnode i{font-style:normal;font-size:11px;color:var(--mut);font-weight:700}
.fnode:hover{background:#EDF3FF}
.fnode.on{background:var(--blue);color:#fff}
.fnode.on i{color:#D8E5FF}
.fnode.over{background:#DCEBFF;box-shadow:inset 0 0 0 2px var(--blue)}
.fnew{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.fhint{margin-top:6px;font-size:11px;color:var(--mut);line-height:1.5}
.fbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.fcrumb{font-size:13px;font-weight:800;color:var(--mut)}
.fcrumb a{color:var(--blue);text-decoration:none}
.fcrumb b{color:var(--ink)}
.fsearch{height:34px;border:1px solid var(--line);border-radius:9px;padding:0 11px;font:inherit;
font-size:13px;width:200px;background:#fff;color:var(--ink)}
.fview{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.fview a{padding:6px 11px;font-size:14px;color:var(--mut);text-decoration:none;background:#fff}
.fview a.on{background:var(--blue);color:#fff}
.fsel{display:flex;align-items:center;gap:8px;background:#EDF3FF;border:1px solid #C7D9FF;
border-radius:10px;padding:8px 11px;margin-bottom:10px;flex-wrap:wrap;font-size:13px}
.fsel select{height:30px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:12.5px;
background:#fff;color:var(--ink);padding:0 8px}
.ftiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;align-items:start}
.ftile{background:transparent;border:1px solid transparent;border-radius:8px;padding:10px 8px;cursor:pointer;
position:relative;transition:.1s}
.ftile:hover{background:#EAF3FF;border-color:#CBDFFF}
.ftile.sel{border-color:#9CC2FF;background:#DCEBFF}
/* 폴더 타일은 카드처럼 */
.ftile.fold{background:#fff;border-color:var(--line);border-radius:12px;padding:13px}
.ftile.fold:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(47,107,255,.1)}
.ftile.over{border-color:var(--blue);background:#DCEBFF}
.ftile .ico{font-size:26px;line-height:1;margin-bottom:7px}
/* 이미지 미리보기 — 윈도우 탐색기처럼 «잘리지 않게 전체»를 보여 준다 (원장 08-21).
서버가 320px JPEG 로 만들어 준다(`?thumb=1`). */
.ftile .thumb{height:150px;margin:0 0 8px;overflow:hidden;background:transparent;
display:flex;align-items:center;justify-content:center}
.ftile .thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
box-shadow:0 1px 4px rgba(15,23,42,.16)}
.ftile .thumb .ico{font-size:26px;margin:0}
.ftile .nm{font-size:12.5px;font-weight:700;word-break:break-all;line-height:1.4;text-align:center;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ftile .mt{font-size:11px;color:var(--mut);margin-top:4px;line-height:1.55;text-align:center}
.ftile .cb{position:absolute;top:8px;right:8px;width:16px;height:16px;accent-color:var(--blue)}
.ftile .fx{position:absolute;top:6px;right:6px;border:0;background:none;color:var(--mut);
font-size:15px;cursor:pointer;padding:2px 4px;border-radius:6px;line-height:1}
.ftile .fx:hover{background:#fff;color:var(--blue)}
.fmenu{position:fixed;z-index:300;background:#fff;border:1px solid var(--line);border-radius:10px;
box-shadow:0 8px 26px rgba(15,23,42,.16);padding:5px;min-width:150px;display:none}
.fmenu button{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;
font-size:13px;padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--ink)}
.fmenu button:hover{background:#EDF3FF}
.fmenu button.del{color:var(--red)}
/* 파일 미리보기 모달 */
.pv{position:fixed;inset:0;background:rgba(8,12,22,.88);z-index:400;display:none;
align-items:center;justify-content:center;padding:24px}
.pv.open{display:flex}
.pv-box{background:#fff;border-radius:16px;max-width:1100px;width:100%;max-height:92vh;
display:flex;flex-direction:column;overflow:hidden}
.pv-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.pv-h b{font-size:15px;word-break:break-all;line-height:1.4}
.pv-h .sp{flex:1}
.pv-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--mut);
padding:2px 8px;border-radius:8px}
.pv-x:hover{background:#EDF3FF;color:var(--ink)}
.pv-b{flex:1;overflow:auto;background:#F3F5F9;display:flex;align-items:center;
justify-content:center;position:relative;min-height:220px}
.pv-b img{max-width:100%;max-height:74vh;display:block;background:#fff}
.pv-b.zoom{align-items:flex-start;justify-content:flex-start;cursor:zoom-out}
.pv-b.zoom img{max-width:none;max-height:none;cursor:zoom-out}
.pv-b img.can{cursor:zoom-in}
.pv-none{text-align:center;color:var(--mut);padding:52px 20px;font-size:14px;line-height:1.9}
.pv-none .big{font-size:52px;margin-bottom:12px}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;cursor:pointer;
background:rgba(15,23,42,.55);color:#fff;font-size:22px;width:42px;height:60px;line-height:1;
border-radius:9px}
.pv-nav:hover{background:rgba(15,23,42,.78)}
.pv-nav.l{left:12px}.pv-nav.r{right:12px}
.pv-f{padding:11px 16px;border-top:1px solid var(--line);display:flex;align-items:center;
gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.pv-f .sp{flex:1}
.pv-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;
text-align:left;margin:14px auto 0;max-width:420px}
.pv-meta dt{color:var(--mut);font-weight:700;white-space:nowrap}
@media(max-width:620px){.pv{padding:0}.pv-box{border-radius:0;max-height:100vh;height:100vh}}
tr.frow.sel td{background:#F5F9FF}
.fq{height:8px;border-radius:5px;background:#E8EDF6;overflow:hidden;margin:6px 0 3px}
.fq i{display:block;height:100%;background:var(--blue);transition:width .3s}
.fq i.hi{background:var(--warn)}
.fchip{display:inline-block;font-size:11px;font-weight:800;border-radius:5px;padding:1px 6px;
background:#EDF3FF;color:#2F5FBF;margin-right:4px}
.fchip.arc{background:#FFF4DE;color:#8A6410}
.farc{margin-top:7px;border-top:1px dashed var(--line);padding-top:7px}
.farc table{font-size:12px}
.farc th{color:var(--mut);font-weight:700}
.ftog{font-size:12px;font-weight:800;color:var(--blue);cursor:pointer;background:none;border:0;padding:0}
.secttl{font-size:12px;font-weight:800;color:var(--mut);margin:0 0 7px;letter-spacing:-.3px}
table.ilist{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.ilist th{background:#F3F6FC;font-weight:800;color:var(--mut);white-space:nowrap}
table.ilist th,table.ilist td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
table.ilist tr:last-child td{border-bottom:0}
table.ilist td.c,table.ilist th.c{text-align:center}
.orgsw{margin:auto 2px 10px;padding:10px 12px;background:rgba(255,196,80,.12);
border:1px solid rgba(255,196,80,.35);border-radius:10px}
.orgsw label{display:block;font-size:11px;color:#FFD68A;font-weight:700;margin-bottom:5px}
.orgsw select{width:100%;height:32px;background:#0F1A30;color:#fff;border:1px solid rgba(255,255,255,.2);
border-radius:7px;padding:0 8px;font:inherit;font-size:12.5px}
.uinfo .line{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.uinfo .nm{font-weight:800;color:#fff;font-size:14px;letter-spacing:-.3px}
.uinfo .rl{flex:0 0 auto;font-size:10.5px;font-weight:800;border-radius:20px;
padding:3px 8px;background:rgba(47,107,255,.35);color:#DCE7FF;line-height:1.2}
.uinfo .og2{background:rgba(255,255,255,.14);color:#C3D2EA}
.uinfo .og2.vw{background:rgba(255,196,80,.3);color:#FFD68A}
.uinfo .ogn{font-size:12.5px;color:#DCE7FF;font-weight:700}
.uinfo .out{margin-top:10px;width:100%;height:32px;border:1px solid rgba(255,255,255,.22);
border-radius:8px;background:transparent;color:#DCE7FF;font:inherit;font-size:12.5px;
font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.uinfo .out:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.sfoot b{color:#fff;font-weight:800}
.logo{font-weight:900;font-size:17px;letter-spacing:-.5px;color:#fff;cursor:pointer}
.logo:hover span{color:#A8C2FF}
.logo span{color:#7BA4FF}
.badge{font-size:11px;background:rgba(255,255,255,.12);padding:3px 8px;border-radius:99px;color:#cfd9ef}
.shell{display:flex;align-items:flex-start;min-height:100vh}
.side{flex:0 0 212px;background:#141E33;position:sticky;top:0;height:100vh;
padding:16px 10px 12px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.07);
display:flex;flex-direction:column}
.side .sh{font-size:11px;color:#8EA3C6;letter-spacing:.5px;padding:4px 12px 8px;font-weight:700}
.tabs{display:block}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:7px;padding:11px 13px;margin-bottom:3px;border-radius:9px;
font-size:13.5px;font-weight:700;color:#C3D2EA;cursor:pointer;transition:.15s;line-height:1.35}
.tab:hover{color:#fff;background:rgba(255,255,255,.07)}
.tab.on{color:#fff;background:rgba(47,107,255,.22);box-shadow:inset 2px 0 0 var(--blue)}
.tab i{font-style:normal;opacity:.8;flex:0 0 auto}
/* 푸터를 «화면 아래»에 붙인다 — 내용이 짧아도 중간에 떠 있지 않게(스티키 푸터).
[교정] 진백 2026-09-11 "페이지 하단에 고정되어야 하지 않나?" */
main{flex:1;min-width:0;padding:30px 26px 60px;display:flex;flex-direction:column;
min-height:100vh}
.pane{display:none}
.pane.on{display:block}
h2{font-size:22px;font-weight:900;letter-spacing:-.7px;margin-bottom:6px}
.sub{color:#4B5563;font-size:13.5px;margin-bottom:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card+.card{margin-top:14px}
.ct{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ct .n{background:var(--blue);color:#fff;width:20px;height:20px;border-radius:6px;
display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 18px;
border-radius:9px;border:0;background:var(--blue);color:#fff;font-weight:700;font-size:13.5px;
cursor:pointer;font-family:inherit;transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:default}
.btn.g{background:var(--run)}
.btn.o{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px}
.muted{color:#4B5563;font-size:12.5px}
/* upload */
.drop{border:2px dashed #C7D2E4;border-radius:var(--radius);background:#FAFBFF;
padding:32px 20px;text-align:center;cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--blue);background:#EDF3FF}
.drop.over{border-style:solid}
/* 학교급·학년·실시일을 안 고르면 PDF 드롭존을 잠근다 (원장 08-21) */
.drop.lock{opacity:.45;cursor:not-allowed;border-color:#D8DEE9;background:#F6F7FA}
.drop.lock:hover{border-color:#D8DEE9;background:#F6F7FA}
.pdfopt select.need,.pdfopt input.need{border-color:#F0A202;background:#FFFBF0;
box-shadow:0 0 0 3px rgba(240,162,2,.16)}
.pdfth{height:150px;display:flex;align-items:center;justify-content:center;
background:#F1F5FB;color:#64748B;font-weight:800;font-size:15px}
.pdfbig{display:none;flex-direction:column;align-items:center;justify-content:center;
width:100%;height:100%;color:var(--mut);font-weight:700;text-align:center;gap:6px}
.pdfbig span{font-weight:400;font-size:12px}
.strip .stpdf{width:46px;height:62px;border-radius:6px;border:2px solid transparent;
background:#F1F5FB;color:#64748B;display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:800;cursor:pointer;opacity:.6;flex:0 0 auto}
.strip .stpdf.on{border-color:var(--blue);opacity:1}
.drop .ic{font-size:30px;line-height:1}
.drop b{display:block;margin:8px 0 3px;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-top:14px}
.th{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;position:relative}
.th img{width:100%;height:150px;object-fit:cover;object-position:top;display:block}
.th .cap{font-size:11px;padding:5px 7px;color:var(--mut);display:flex;justify-content:space-between;align-items:center}
.th .dot{width:7px;height:7px;border-radius:99px;background:#D1D5DB}
.th.done .dot{background:var(--run)}
.bar{height:8px;background:#E9EDF5;border-radius:99px;overflow:hidden;margin:14px 0 8px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#5B8CFF);transition:width .35s}
.log{font-size:13px;color:#374151;min-height:22px;font-variant-numeric:tabular-nums}
.log b{color:var(--ink)}
/* review */
.h2c{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.h2c .sub2{font-size:12.5px;font-weight:600;color:var(--mut)}
.rv{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:18px;align-items:start}
.rvL{position:sticky;top:10px;height:calc(100vh - 96px);display:flex;flex-direction:column;gap:6px}
.rvR{height:calc(100vh - 96px);overflow-y:auto;padding-right:5px;scrollbar-width:thin}
@media(max-height:820px){.rvL,.rvR{height:calc(100vh - 74px)}}
.rvR::-webkit-scrollbar{width:7px}
.rvR::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
.scan{flex:1;min-height:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.scan{overflow:auto}
.scan img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;cursor:zoom-in;
transition:none}
.scan.zi{align-items:flex-start;justify-content:flex-start}
.scan.zi img{max-width:none;max-height:none}
.zbar{position:absolute;right:12px;bottom:12px;display:flex;gap:4px;z-index:4;
background:rgba(11,18,32,.62);border-radius:9px;padding:3px;backdrop-filter:blur(4px)}
.zbar button{border:0;background:none;color:#fff;font:inherit;font-size:12.5px;font-weight:800;
padding:5px 9px;border-radius:6px;cursor:pointer;line-height:1}
.zbar button:hover{background:rgba(255,255,255,.18)}
.zbar .zv{color:#C9D6EE;font-size:11.5px;padding:5px 4px;min-width:40px;text-align:center}
.arw{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:99px;
border:0;background:rgba(11,18,32,.5);color:#fff;font-size:22px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:.15s;z-index:3}
.arw:hover{background:rgba(11,18,32,.82)}
.arw:disabled{opacity:.2;cursor:default}
.arw.l{left:12px} .arw.r{right:12px}
.stripw{--lead:74px;flex:0 0 auto;display:flex;align-items:center;gap:6px;margin-bottom:7px}
.strip{flex:1;display:flex;gap:8px;overflow-x:auto;padding:8px 2px 8px;min-width:0;scrollbar-width:thin}
.strip::-webkit-scrollbar{height:7px}
.strip::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
.strip .stw{position:relative;flex:0 0 auto;cursor:pointer;border-radius:8px;
border:2px solid var(--line);background:#fff;overflow:hidden;transition:.15s;line-height:0}
.strip .stw img{width:60px;height:80px;object-fit:cover;object-position:top;display:block;
background:#fff;filter:contrast(1.12) brightness(1.02)}
.strip .stw{border-width:2.5px}
.strip .stw .n{position:absolute;left:0;top:0;color:#fff;
font-size:10.5px;font-weight:800;padding:1px 5px;border-radius:0 0 6px 0;line-height:1.5}
.strip .stw .nm{position:absolute;left:0;right:0;bottom:0;color:#fff;font-size:9.5px;
font-weight:800;text-align:center;padding:1px 2px;line-height:1.5;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.92}
/* ★ 지금 보고 있는 장이 한눈에 보여야 한다.
테두리 색만으로는 학생 색과 섞여 구분이 안 된다 → 나머지를 흐리게 죽인다. */
.strip .stw{opacity:.42;filter:grayscale(.45)}
.strip .stw:hover{opacity:.8;filter:none}
.strip .stw.on{opacity:1;filter:none;transform:translateY(-3px) scale(1.08);
box-shadow:0 0 0 3px #0F172A, 0 6px 16px rgba(15,23,42,.3)}
.strip .stw.on::after{content:'';position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
width:22px;height:3px;border-radius:2px;background:#0F172A;pointer-events:none}
.strip .stw.bad{border-style:dashed}
.stripw .cur{flex:none;font-size:11.5px;font-weight:800;color:#0F172A;background:#F1F5F9;
border-radius:99px;padding:2px 9px;white-space:nowrap}
.sbarw{flex:0 0 auto;display:flex;align-items:center;gap:6px;margin-bottom:7px}
.sbarw:has(.sbar:empty){display:none}
.sbl{flex:none;width:var(--lead);text-align:center;font-size:11.5px;font-weight:800;color:var(--mut)}
.sbar{flex:1;display:flex;gap:6px;overflow-x:auto;padding-bottom:5px;min-width:0;
scrollbar-width:thin}
.sbar::-webkit-scrollbar{height:6px}
.sbar::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
.schip{flex:none;display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;
border:1.5px solid var(--line);background:#fff;cursor:pointer;font:inherit;white-space:nowrap}
.schip b{font-size:13px;font-weight:800;color:var(--ink)}
.schip .dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.schip.on .dot{background:#fff!important}
.schip .sc{font-size:13px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums}
.schip .sc .sl{font-size:11px;font-weight:700;opacity:.75}
.schip.on .sc .sl{opacity:.85}
.schip .pn{font-size:11px;color:var(--mut)}
.schip:hover{border-color:var(--blue)}
.schip.on{background:var(--blue);border-color:var(--blue)}
.schip.on b,.schip.on .sc,.schip.on .pn{color:#fff}
.schip.warn{border-color:#FCD34D;background:#FFFBEB}
.schip.warn b{color:#8A6410}
.schip.on.warn{background:#D97706;border-color:#D97706}
.schip.on.warn b{color:#fff}
.ktab{--lead:74px;flex:0 0 auto;display:flex;gap:6px;margin-bottom:7px}
.sbarw{--lead:74px}
.ktot{flex:none;width:var(--lead);display:flex;align-items:center;justify-content:center;
padding:7px 0;border-radius:9px;background:#EEF2F8;color:var(--mut);
font-size:12px;font-weight:800;white-space:nowrap}
.ktab a{flex:1;text-align:center;padding:7px 4px;border:1px solid var(--line);border-radius:9px;
background:#fff;color:var(--mut);font-size:12.5px;font-weight:800;text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ktab a i{font-style:normal;font-size:11px;opacity:.75}
.ktab a:hover{border-color:var(--blue);color:var(--ink)}
.ktab a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ktab a.zero{opacity:.45}
.ktab a.zero i{color:var(--red);opacity:1}
.pgbar{flex:0 0 auto;height:38px;display:flex;align-items:center;gap:8px;margin-bottom:7px;
background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 11px;overflow:hidden}
.pgbar .rd{font-size:12.5px;font-weight:800;color:var(--blue);white-space:nowrap;flex:none;
font-variant-numeric:tabular-nums}
.pgbar .mt{font-size:12.5px;font-weight:700;color:var(--mut);white-space:nowrap;flex:none}
.pgbar .who{font-size:13.5px;font-weight:800;color:var(--ink);white-space:nowrap;flex:none}
.pgbar .sep{color:#C7CFDC;flex:none}
.warnrn{flex:none;font-size:11px;font-weight:800;background:#FEF3C7;color:#92400E;
border-radius:5px;padding:1px 6px}
.pgbar .fn{font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;min-width:0;flex:1}
.pgbar .kd{display:inline-flex;align-items:center;align-self:center;height:19px;
font-size:11px;font-weight:800;border-radius:5px;padding:0 7px;flex:none;
background:#EDF3FF;color:#2F5FBF}
.pgbar .kd.paper{background:#FFF4DE;color:#8A6410}
.pgbar .kd.key{background:#DCFCE7;color:#15803D}
.meta{display:grid;grid-template-columns:auto 1fr;gap:0}
.meta dt{font-size:12.5px;color:var(--mut);font-weight:700;padding:7px 14px 7px 0;
border-bottom:1px solid var(--line);white-space:nowrap}
.meta dd{font-size:13.5px;font-weight:800;color:var(--ink);padding:7px 0;
border-bottom:1px solid var(--line);word-break:break-all}
.meta dd.na{color:#9AA5B5;font-weight:600}
.meta dt:last-of-type,.meta dd:last-of-type{border-bottom:0}
.meta dd .rn{font-variant-numeric:tabular-nums;letter-spacing:.3px;color:var(--blue)}
.ktbl{width:100%;border-collapse:collapse;font-size:13px}
.ktbl th{background:#F3F6FC;color:var(--mut);font-weight:800;font-size:12px;
padding:6px 9px;border-bottom:1px solid var(--line);text-align:left}
.ktbl td{padding:6px 9px;border-bottom:1px solid var(--line)}
.ktbl tr:last-child td{border-bottom:0}
.ktbl tr:hover td{background:#F7FAFF}
.ktbl .no{width:56px;text-align:center;color:var(--mut);font-weight:800;
font-variant-numeric:tabular-nums}
.ktbl .an{font-weight:800}
.ktbl .pt{width:62px;text-align:center;color:var(--mut)}
.qrow{border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px;background:#fff}
.qrow.hitq{box-shadow:0 0 0 3px rgba(47,107,255,.35);border-color:var(--blue)}
.qrow.low{border-color:#FCD34D;background:#FFFBEB}
.qb.qo{display:flex;align-items:center;gap:8px}
.qb.qo .half{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.qb.qo .qlb{flex:none;font-size:12px;color:#374151;min-width:52px}
.qb.qo .vsep{flex:none;width:1px;height:22px;background:var(--line)}
.qb input.ro{flex:1;min-width:0;height:34px;border:1px solid #F0DFB4;border-radius:8px;
padding:0 10px;font-family:inherit;font-size:13px;font-weight:800;
background:#FFFBEB;color:#7A5A12;cursor:default}
.qb input.ro.ok{background:#F0FDF4;border-color:#BBF7D0;color:#15803D}
.qb input.ro.na{background:#F8FAFC;border-color:var(--line);color:#94A3B8;font-weight:600}
.qb input.ro.key{background:#F4F7FC;border-color:var(--line);color:var(--ink)}
.qb input.ro::placeholder{color:#A8B0BD;font-weight:600}
.qb .btn.pl{flex:none;height:30px;padding:0 10px}
/* 코멘트가 길면 한 줄 입력칸에서 잘린다 → 눌러서 펼쳐 본다 */
.cmex{flex:none;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:8px;
background:#fff;color:#475569;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
white-space:nowrap}
.cmex:hover{background:#EEF3FF;border-color:#BFD3FF;color:var(--blue)}
.cmex.on{background:var(--blue);border-color:var(--blue);color:#fff}
.qb.qc.open{align-items:flex-start}
.qb.qc.open label{margin-top:8px}
.qb.qc textarea{flex:1;min-width:0;min-height:96px;border:1px solid var(--line);border-radius:8px;
padding:8px 11px;font-family:inherit;font-size:13px;line-height:1.75;color:var(--ink);
background:#fff;resize:vertical}
.qb.qc textarea:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
/* ② 시험지 올리기 — 종류 고르기 */
.upkind{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.upkind a{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:11px;
border:1px solid var(--line);background:var(--card);text-decoration:none;color:#475569}
.upkind a:hover{background:#F1F5FB}
.upkind a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.upkind a i{font-style:normal;font-size:19px;flex:none}
.upkind a em{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:#E2E8F0;color:#475569;font-size:12.5px;font-weight:800}
.upkind a.on em{background:rgba(255,255,255,.92);color:var(--blue)}
.upkind{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.upkind{grid-template-columns:1fr 1fr}}
.upkind a b{font-size:13.5px;letter-spacing:-.3px}
.upkind a span{margin-left:auto;font-size:11.5px;font-weight:800;color:#64748B;
background:#EEF2F7;border-radius:99px;padding:1px 8px}
.upkind a span:empty{display:none}
.upkind a.on span{background:rgba(255,255,255,.9);color:var(--blue)}
@media(max-width:760px){.upkind{grid-template-columns:1fr}}
.cmall{flex:none;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:8px;
background:#fff;color:#475569;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.cmall:hover{background:#EEF3FF;border-color:#BFD3FF;color:var(--blue)}
.qb.qo .samec{flex:none;width:52px;text-align:center;font-size:11px;font-weight:800;
color:var(--mut);background:#F1F5F9;border-radius:5px;padding:3px 0;white-space:nowrap}
.qb.qo .samec.sp{background:none}
.svst{flex:none;min-width:52px;font-size:11px;font-weight:800;color:var(--mut);text-align:right}
.svst.on{color:var(--blue)}
.svst.ok{color:#15803D}
.svst.err{color:var(--red)}
.qb.qc{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.qb.qc input{color:#6B4E16}
.qb.qc input::placeholder{color:#B9AE8F}
.qh{display:flex;align-items:center;gap:8px;font-size:13px}
.qh .no{font-weight:800;min-width:34px}
.chip{font-size:11px;padding:2px 8px;border-radius:99px;font-weight:700}
.chip.gr-lz{background:#E0F2FE;color:#0369A1}
.chip.gr-nd{background:#FEF3C7;color:#92400E}
.chip.gr-cf{background:#FEF3C7;color:#92400E;cursor:help}
/* 「꼭 지켜주실 것」 — 관리자·선생님 전달사항 */
.card.must{border-color:#F0C86A;background:#FFFCF4}
.card.must .ct .n{background:#D97706}
.must3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.must3>div{background:#fff;border:1px solid #F0DCA8;border-radius:11px;padding:13px 14px}
.must3 .mn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
border-radius:7px;background:#D97706;color:#fff;font-size:12px;font-weight:800;margin-right:7px}
.must3 b{font-size:14px;letter-spacing:-.3px}
.must3 p{margin-top:8px;font-size:12.5px;line-height:1.8;color:#44403C}
@media(max-width:900px){ .must3{grid-template-columns:1fr} }
/* 선생님 한마디 — 리포트·알림톡에 함께 나간다 */
.tcm{border:1px solid #D7E2F5;background:#F7FAFF;border-radius:11px;padding:13px 14px;margin-top:16px}
.tcm .th{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tcm .th b{font-size:13.5px;letter-spacing:-.3px}
.tcm .th .src{font-style:normal;font-size:10.5px;font-weight:800;border-radius:99px;padding:1px 7px;
background:#E0F2FE;color:#0369A1}
.tcm .th .src.hand{background:#DCFCE7;color:#15803D}
.tcm textarea{width:100%;min-height:96px;border:1px solid var(--line);border-radius:9px;
padding:10px 12px;font-family:inherit;font-size:13.5px;line-height:1.75;color:var(--ink);
background:#fff;resize:vertical}
.tcm textarea:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
.tcm .tb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px}
.tcm .cnt{font-size:11.5px;color:#64748B;font-weight:700;margin-left:auto}
.tcm .cnt.over{color:#B91C1C}
.schead{flex-wrap:wrap;gap:8px 10px}
.schead .who{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:99px;
border:1.5px solid #CBD5E1;background:#fff;font-size:13px;font-weight:700;color:#334155}
.schead .who i{font-style:normal;color:#94A3B8;font-weight:400}
.schead .who .whx{color:#475569}
.schead .who .whx.dim{color:#94A3B8;font-weight:600}
.schead .who .src{font-style:normal;font-size:10.5px;font-weight:800;color:#64748B;
background:#EEF2F7;border-radius:99px;padding:1px 7px;margin-left:2px}
.schead .who .src.ok{background:#DCFCE7;color:#15803D}
.schead .who .whx.nm{font-size:15px;font-weight:900;color:var(--ink);letter-spacing:-.3px}
.schead .tot{font-size:14.5px;font-weight:800;color:#334155}
.schead .tot b{font-size:19px;color:var(--blue);letter-spacing:-.5px}
.schip .miss{font-size:10.5px;font-weight:800;color:#B45309;background:#FEF3C7;
border-radius:99px;padding:1px 6px;margin-left:4px}
.schip.on .miss{background:rgba(255,255,255,.85);color:#92400E}
/* 검색 중에는 학교급 탭이 안 걸린다는 표시 (원장 08-21) */
.ktab.dim,#r_lvtab.dim{opacity:.4}
#r_lvtab.dim a{pointer-events:auto}
.gr-ovr{display:inline-flex;gap:4px;margin-left:6px}
/* 문항 옆 «문제 확인» — 문제지와 학생 답안지를 나란히 띄운다 (원장 08-21) */
.gr-see{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;
border:1px solid #C7D2E4;background:#fff;color:#2F5FD0;cursor:pointer;
line-height:1.5;margin-left:6px;white-space:nowrap}
.gr-see:hover{background:#2F5FD0;border-color:#2F5FD0;color:#fff}
.see2{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
min-height:0;overflow:hidden}
.see-p{background:#F1F5FB;display:flex;flex-direction:column;min-width:0;min-height:0}
.see-lb{font-size:11.5px;font-weight:800;color:#475569;padding:6px 10px;
background:#F8FAFF;border-bottom:1px solid var(--line);flex:none}
.see-p iframe{flex:1;width:100%;border:0;background:#fff;min-height:0}
.see-na{display:none;flex:1;align-items:center;justify-content:center;
color:var(--mut);font-size:12.5px;padding:20px;text-align:center}
.see-p.nopdf iframe,.see-p.nopdf .see-img{display:none}
.see-lb{display:flex;align-items:center;gap:6px}
.see-nav{width:22px;height:20px;border:1px solid #C7D2E4;background:#fff;border-radius:5px;
color:#475569;font-size:13px;line-height:1;cursor:pointer;padding:0}
.see-nav:hover{background:#2F5FD0;border-color:#2F5FD0;color:#fff}
.see-nav[disabled]{opacity:.3;cursor:default}
.see-p.nopdf .see-na{display:flex}
.see-img{flex:1;overflow:auto;padding:10px;display:flex;justify-content:center;align-items:flex-start}
.see-img img{max-width:100%;height:auto;display:block;background:#fff;
box-shadow:0 2px 14px rgba(15,23,42,.18)}
@media(max-width:900px){.see2{grid-template-columns:1fr}}
/* ★ 문제 확인 — 확대/축소·끌어보기 (원장 요청 2026-09-02) */
.see-zt{display:inline-flex;align-items:center;gap:3px;margin-left:2px;flex:none}
.see-zb{min-width:24px;height:20px;padding:0 6px;border:1px solid #C7D2E4;background:#fff;
color:#334155;font-size:12px;font-weight:800;line-height:1;border-radius:5px;cursor:pointer}
.see-zb:hover{background:#2F5FD0;border-color:#2F5FD0;color:#fff}
.see-zl{font-size:11px;font-weight:800;color:#64748B;min-width:40px;text-align:right}
.see-img.z{cursor:grab;justify-content:flex-start;align-items:flex-start}
.see-img.z.grab{cursor:grabbing}
.see-img img.z{max-width:none;box-shadow:none}
.gr-ovr button{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid #D1D5DB;
background:#fff;color:#6B7280;cursor:pointer;line-height:1.5}
.gr-ovr button.on{border-color:transparent}
.gr-ovr button.on[data-o="1"]{background:#15803D;color:#fff}
.gr-ovr button.on[data-o="0"]{background:#B91C1C;color:#fff}
.gr-ovr button.on[data-o=""]{background:#374151;color:#fff}
.chip.ok{background:#DCFCE7;color:#15803D}
.chip.lo{background:#FEF3C7;color:#B45309}
.chip.x{background:#FEE2E2;color:#B91C1C}
.qh .sc{margin-left:auto;font-weight:700;font-size:12.5px}
.qb{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qb label{font-size:12px;color:#374151;min-width:52px}
.pick4{display:grid;grid-template-columns:96px 92px 140px minmax(0,1fr) 58px;gap:5px;margin-top:9px}
.pick4 select{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 7px;
background:#fff;font:inherit;font-size:12.5px;color:var(--ink);min-width:0}
@media(max-width:1180px){.pick4{grid-template-columns:1fr 1fr;}
.pick4 select:nth-child(4){grid-column:1/3}.pick4 .btn{grid-column:1/3}}
.pick2{display:grid;grid-template-columns:auto minmax(0,1fr) 92px;gap:6px;align-items:center;margin-top:6px}
.pick2 label{font-size:12px;color:var(--mut);font-weight:700;white-space:nowrap}
.pick2 input{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;
font:inherit;font-size:12.5px;background:#fff;min-width:0}
.mgl{max-height:280px;overflow:auto;margin-top:4px}
.mgrow{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid var(--line)}
.mgrow:last-child{border-bottom:0}
.mgrow input{width:16px;height:16px;accent-color:var(--blue);flex:none}
.mgrow img{width:38px;height:50px;object-fit:cover;object-position:top;border:1px solid var(--line);
border-radius:5px;flex:none;background:#fff}
.mgrow .t{flex:1;min-width:0;font-size:12.5px;line-height:1.5}
.mgrow .t b{font-size:13px}
.mgrow .t span{color:var(--mut)}
.pick3 select{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 8px;
background:#fff;font:inherit;font-size:12.5px;color:var(--ink)}
.pick3 select:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
@media(max-width:1400px){.pick3{grid-template-columns:1fr 1fr;grid-auto-rows:36px}}
.qb input{flex:1;min-width:120px;height:34px;border:1px solid var(--line);border-radius:8px;
padding:0 10px;font-family:inherit;font-size:13px;background:#fff}
.qb input:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
.ans{font-size:12.5px;color:var(--mut)}
.ans b{color:var(--ink)}
.rvbar{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.rvbar.eq .btn{height:38px;width:118px;min-width:118px;padding:0;font-size:13px;flex:0 0 118px}
/* report */
.rp{display:grid;grid-template-columns:222px minmax(0,1fr);gap:14px;align-items:start}
.slist{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
height:calc(100vh - 148px);overflow-y:auto;position:sticky;top:20px}
.si{padding:11px 13px;border-bottom:1px solid #F1F3F7;cursor:pointer;display:flex;align-items:center;gap:8px}
.si:hover{background:#F8FAFF}
.si.on{background:#EEF3FF;box-shadow:inset 3px 0 0 var(--blue)}
.si .nm{font-weight:700;font-size:13px}
.si .sc2{margin-left:auto;font-size:12px;color:var(--mut);font-weight:700}
.paper{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
height:auto;overflow:visible;scrollbar-width:thin}
/* 시험별 정답률 막대 (묶음 리포트) */
.br{margin-bottom:12px}
.bt{display:flex;gap:8px;align-items:baseline;font-size:13.5px}
.bt b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt span{font-size:11.5px;color:var(--mut);flex:none}
.bg{height:9px;background:#EEF1F6;border-radius:99px;overflow:hidden;margin:5px 0 3px}
.bg i{display:block;height:100%}
.bv{font-size:11.5px;color:#4B5563}
.paper .o{color:#12B76A;font-weight:800}
.paper .x{color:#DC2626;font-weight:800}
.paper .ndm{font-size:10px;font-weight:800;color:#92400E;background:#FEF3C7;
border-radius:5px;padding:1px 5px;white-space:nowrap}
.paper::-webkit-scrollbar{width:7px}
.paper::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
.chartbox{max-width:600px}
.php{display:flex;align-items:flex-start;gap:12px;border-bottom:2px solid var(--night);padding-bottom:10px;margin-bottom:14px}
.php h3{font-size:18px;font-weight:900;letter-spacing:-.5px}
.php .meta{margin-left:auto;text-align:right;font-size:11.5px;color:var(--mut);line-height:1.7}
.stat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;max-width:720px}
.st{background:#F8FAFF;border:1px solid #E6ECFA;border-radius:10px;padding:11px 12px;text-align:center}
.st .lbl{font-size:11.5px;color:#4B5563}
.st .v{font-size:21px;font-weight:900;letter-spacing:-.7px;margin-top:2px}
.st .v small{font-size:12px;font-weight:600;color:var(--mut)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:6px 9px;border-bottom:1px solid var(--line);text-align:left}
th{background:#F1F5FB;font-size:12px;color:#374151;font-weight:700}
td.c,th.c{text-align:center}
.o{color:var(--run);font-weight:800}
.x{color:var(--red);font-weight:800}
.cmt{background:#F8FAFF;border-left:3px solid var(--blue);border-radius:0 8px 8px 0;
padding:12px 14px;font-size:13px;margin-top:14px;line-height:1.8}
.cmt b{display:block;margin-bottom:4px;font-size:12px;color:var(--blue)}
.sec{font-size:13px;font-weight:700;margin:14px 0 7px}
/* dashboard */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.k{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.k .t{font-size:12px;color:#4B5563}
.k .v{font-size:25px;font-weight:900;letter-spacing:-1px;margin-top:3px}
.k .d{font-size:11.5px;margin-top:2px}
.k .d.up{color:var(--run)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.two>.card{height:100%;margin-top:0;display:flex;flex-direction:column}
.two>.card+.card{margin-top:0}
.two>*{min-width:0}
.two>.card>.note:last-child{margin-top:auto}
/* modal */
.mask{position:fixed;inset:0;background:rgba(11,18,32,.55);display:none;align-items:center;
justify-content:center;padding:20px;z-index:100}
/* ★ 확인 창은 어떤 모달(#svw 250 · 뷰어 300) 위에도 떠야 한다 (원장 08-21 «팝업이 뒤로 갔다») */
#cmask{z-index:600}
.mask.on{display:flex}
.modal{background:#fff;border-radius:16px;max-width:380px;width:100%;overflow:hidden}
.cko{background:#0F1A30;color:#fff;padding:12px 16px;font-weight:800;font-size:13.5px}
.kko{background:#FEE500;padding:11px 15px;font-weight:800;font-size:13px;color:#3C1E1E}
.kbody{padding:16px;font-size:13px;line-height:1.75;white-space:pre-line}
.kfoot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.lb{position:fixed;inset:0;background:rgba(11,18,32,.92);display:none;z-index:200;overflow:auto;padding:26px}
.lb.on{display:block}
.lb img{display:block;margin:0 auto;max-width:1100px;width:100%;border-radius:8px;background:#fff;cursor:zoom-out}
.lbx{position:fixed;top:16px;right:20px;background:rgba(255,255,255,.14);color:#fff;border:0;
width:38px;height:38px;border-radius:99px;font-size:20px;cursor:pointer;z-index:201}
.lbn{position:fixed;top:16px;left:20px;color:#fff;font-size:13px;background:rgba(255,255,255,.14);
padding:8px 14px;border-radius:99px;z-index:201}
.sheetwrap{border:1px solid var(--line);border-radius:9px;overflow:auto;max-height:52vh}
/* 명부 도구막대 — 정렬 · 검색 · 학교급 탭 */
.rtool{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rtab{display:flex;gap:4px;flex-wrap:wrap}
.rtab button{height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line);
background:#fff;color:#475569;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.rtab button:hover{background:#F1F5FB}
.rtab button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.rtab button i{font-style:normal;opacity:.7;margin-left:5px;font-weight:800}
.rsrch{position:relative;flex:0 0 auto}
.rsrch input{height:32px;width:210px;border:1px solid var(--line);border-radius:99px;
padding:0 30px 0 13px;font-size:12.5px;font-family:inherit}
.rsrch input:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
.rsrch .clr{position:absolute;right:6px;top:5px;width:22px;height:22px;border:0;background:transparent;
color:#94A3B8;cursor:pointer;font-size:15px;line-height:1;display:none}
.rsrch.has .clr{display:block}
.rcnt{font-size:12px;color:#64748B;font-weight:700}
.sheet th.srt{cursor:pointer;user-select:none;white-space:nowrap}
.sheet th.srt:hover{background:#E6EDF8}
.sheet th.srt::after{content:'⇅';margin-left:4px;font-size:10px;color:#B0BCCE}
.sheet th.srt.up::after{content:'▲';color:var(--blue)}
.sheet th.srt.dn::after{content:'▼';color:var(--blue)}
.sheet tr.hid{display:none}
.sheet{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.sheet th{position:sticky;top:0;z-index:2;background:#F1F5FB;border-bottom:1px solid var(--line);
border-right:1px solid var(--line);padding:8px 10px;font-size:12px;color:#334155;text-align:left}
.sheet th.rn{width:44px;text-align:center}
.sheet th.del{width:40px}
.sheet .req{color:var(--red)}
.sheet td{border-bottom:1px solid #EEF1F6;border-right:1px solid #EEF1F6;padding:0}
.sheet td.rn{text-align:center;color:var(--mut);font-size:11.5px;background:#FAFBFD}
.sheet input,.sheet select{width:100%;height:34px;border:0;padding:0 10px;font:inherit;font-size:13px;
background:transparent;outline:none}
.sheet select{padding:0 6px;cursor:pointer;text-align:center}
.sheet input:focus,.sheet select:focus{background:#EEF3FF;box-shadow:inset 0 0 0 2px var(--blue)}
.sheet tr:hover td{background:#FAFBFF}
.sheet .xbtn{width:100%;height:34px;border:0;background:transparent;color:#CBD5E1;
cursor:pointer;font-size:15px;font-family:inherit}
.sheet .xbtn:hover{color:var(--red)}
.dgrp{display:flex;align-items:center;gap:8px;background:#EEF2F9;border-radius:8px;
padding:7px 12px;margin:12px 0 8px}
.dgrp .dd{font-weight:800;font-size:13px;color:#334155}
.dgrp .dc{font-size:11.5px;color:#64748B}
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.stbl{width:100%;min-width:1480px;table-layout:fixed;border-collapse:collapse;font-size:13px}
.ell{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stbl th{background:#F1F5FB;font-size:11.5px;color:#334155;font-weight:700;
text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.stbl td{padding:9px 10px;border-bottom:1px solid #EEF1F6;vertical-align:middle}
.stbl tr:last-child td{border-bottom:0}
.stbl td.c{text-align:center}
.stbl td.nowrap{white-space:nowrap}
.stbl td.rng{font-size:12px;color:#4B5563}
.stbl .chip{font-size:12px;font-weight:800;padding:4px 10px;border:1px solid transparent}
.stbl .chip.ok{background:#DCFCE7;color:#166534;border-color:#A7F3C4}
.stbl .chip.lo{background:#FEF0C7;color:#92400E;border-color:#FCD34D}
.stbl .chip.x{background:#FEE2E2;color:#991B1B;border-color:#FCA5A5}
.stbl tbody tr:hover td{background:#F3F7FF}
.stbl tbody tr.grp:hover td{background:#F1F5F9}
.stbl tbody tr.selrow:hover td{background:#D2E2FF}
.stbl tbody tr[data-row]{cursor:pointer}
.okmark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
font-size:13px;font-weight:900;color:#166534;background:#DCFCE7;border:1px solid #6EE7A8;
border-radius:50%}
.pickdot{display:inline-block;width:15px;height:15px;border:2px solid #CBD5E1;border-radius:50%}
.stbl tbody tr:hover .pickdot{border-color:var(--blue)}
.stbl th.c{text-align:center}
/* 회차 표의 칸 안 버튼·표시는 전부 같은 높이(30px)로 — 줄마다 들쭉날쭉하지 않게 */
.stp2{display:inline-flex;align-items:center;justify-content:center;height:30px;box-sizing:border-box;
font-size:11.5px;font-weight:800;border-radius:7px;line-height:1;
padding:0 9px;border:1px solid var(--line);background:#fff;color:#374151;
cursor:pointer;font-family:inherit;white-space:nowrap;vertical-align:middle}
.stbl td .btn.sm{height:30px;padding:0 11px;font-size:12px}
.stbl td .okmark{width:26px;height:26px;vertical-align:middle}
.stbl td .upsum{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:30px;min-width:54px;box-sizing:border-box;vertical-align:middle;font-variant-numeric:tabular-nums}
/* 칸 안 여백을 같게 — 셀 패딩 고정 · 칩은 열마다 최소 폭 · 숫자는 고정폭 */
.stbl td.c{padding:8px 8px}
.stbl td .stp2,.stbl td .btn.sm{min-width:54px;font-variant-numeric:tabular-nums}
.stbl td .stp2.off{min-width:0}
.stp2:hover{border-color:var(--blue);color:var(--blue);background:#F5F9FF}
.stp2.todo{background:#FEF0C7;border-color:#FCD34D;color:#92400E}
.stp2.todo:hover{background:#FDE68A;color:#78350F;border-color:#F59E0B}
.stp2.done{background:#DCFCE7;border-color:#A7F3C4;color:#166534}
.stp2.done:hover{background:#BBF7D0;color:#14532D;border-color:#6EE7A8}
.stp2.off{background:transparent;border-color:transparent;color:#CBD5E1;cursor:default}
.stp2 .pg2{font-style:normal;font-weight:700;opacity:.75;font-size:10.5px;margin-left:3px}
.upsum{display:inline-block;font-size:12px;font-weight:700;color:#374151;
background:#F1F5F9;border:1px solid #E2E8F0;border-radius:7px;padding:5px 9px}
.upsum .bad{display:block;font-style:normal;font-size:10.5px;font-weight:800;color:#B91C1C;margin-top:1px}
.upsum .emp{display:block;font-style:normal;font-size:10.5px;font-weight:800;color:#92400E;margin-top:1px}
.stbl tr.dsep td{border-top:2px solid #CBD5E1}
.stbl td.date .dim{color:#94A3B8}
.stbl tr.selrow td{background:#DCE9FF}
.stbl tr.selrow td:first-child{box-shadow:inset 5px 0 0 #1D4ED8}
.stbl tr.selrow b{color:#1D4ED8}
.stbl td.date{white-space:nowrap;font-variant-numeric:tabular-nums}
.btn.picked{background:#12B76A}
.btn.picked:hover{filter:brightness(1.05)}
.seqb.g{background:#F1F5F9;color:#94A3B8}
.dnb{display:inline-block;font-size:11px;font-weight:800;background:#EAF5EC;color:#15803D;
border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.dnb.g{background:#F1F5F9;color:#94A3B8;font-weight:700}
.isbadge{margin-left:auto;min-width:18px;height:18px;border-radius:9px;background:var(--red);
color:#fff;font-size:10.5px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px}
.isbadge.on{display:inline-flex}
.ikinds,.ifilter{display:flex;gap:5px;flex-wrap:wrap}
.ikinds a,.ifilter a{padding:6px 11px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;
font-weight:800;color:var(--mut);text-decoration:none;background:#fff}
.ikinds a.on,.ifilter a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ifilter{margin-bottom:10px}
/* ── PDF 내려받기 = 브라우저 인쇄 → PDF 저장.
리포트(#paper)만 남기고 나머지는 전부 감춘다. */
@media print{
@page{size:A4 portrait;margin:12mm}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{background:#fff}
.topbar,.smask,.side,footer,.pgbar,.stripw,.sbarw,.ktab,.rvbar,
.slist,.tabs,.idirs,#curbar,.mask,.lb,.fmenu,.pv,.toast,h2,.sub,#p5empty,
.rside,.exlist,#r_exwrap,#r_hint,.svw,[data-scan],#rback,.gorv,
.paper th:last-child,.paper td:last-child{display:none!important}
.shell{display:block}
main{padding:0!important}
.pane{display:none!important}
.pane#p5{display:block!important}
.rp,.rp2,.rmain{display:block!important}
.paper{display:block!important;height:auto!important;overflow:visible!important;border:0!important;
border-radius:0!important;padding:0!important;box-shadow:none!important}
.note{border-color:#D6DEEA!important}
table{font-size:10pt}
th,td{padding:4px 6px}
tr,.tcm,.st{break-inside:avoid;page-break-inside:avoid}
.tcm{background:#fff!important}
.tcm .tb,.tcm textarea,.shbox{display:none!important}
.tcm .prt{display:block!important}
}
.tcm .prt{display:none;white-space:pre-wrap;font-size:13.5px;line-height:1.85;color:#3F3F46}
/* ★ toast() 는 30곳 넘게 쓰이는데 app.html 에는 정의도 요소도 없었다.
대부분 .then/.catch 안이라 조용히 죽고, 클릭 핸들러에서만 ReferenceError 로 드러났다. */
/* 이모지를 넣으면 대체 글꼴이 줄 높이를 밀어 버튼 하나만 아래로 내려앉는다.
라벨에서 이모지를 빼고, 버튼은 flex 안에서 세로 가운데로 못박는다. */
.rvbar .btn{align-self:center;vertical-align:middle}
/* ④ 리포트 — 왼쪽에 학생 전체가 보이는 목록 */
.rp2{display:grid;grid-template-columns:288px minmax(0,1fr);gap:14px;align-items:start}
.rside{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:12px;position:sticky;top:14px;display:flex;flex-direction:column;
max-height:calc(100vh - 40px)}
.rsh{font-size:14px;font-weight:700;margin-bottom:9px;display:flex;gap:7px;align-items:baseline}
.rside #r_q{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 11px;
font-family:inherit;font-size:13px;margin-bottom:8px;background:#fff;color:var(--ink)}
.rside #r_q:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
.rlv{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:9px}
.rlv a{font-size:11.5px;font-weight:800;color:#475569;background:#fff;border:1px solid var(--line);
border-radius:99px;padding:3px 10px;text-decoration:none;cursor:pointer}
.rlv a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.rlv a i{font-style:normal;opacity:.65;margin-left:4px}
/* 시험지 원본 보기 모달 */
.svw{position:fixed;inset:0;z-index:250;background:rgba(11,18,32,.9);display:none;
align-items:center;justify-content:center;padding:20px}
.svw.on{display:flex}
/* ★ 대조용 «자유 이동» 모드 (원장 08-21) — 어둡게 덮지 않고, 창을 끌어 옮겨
아래 문항 카드를 나란히 볼 수 있게 한다. 머리말을 잡고 끈다. */
.svw.free{background:transparent;pointer-events:none;
align-items:flex-start;justify-content:flex-end;padding:14px}
.svw.free .svw-b{pointer-events:auto;max-height:82vh;
box-shadow:0 18px 60px rgba(15,23,42,.34);border:1px solid #CBD5E1}
.svw.free .svw-h{cursor:move;user-select:none;background:#F8FAFF}
.svw.free .svw-h b::before{content:'⠿ ';color:#94A3B8;font-size:13px}
.svw.free .svw-c{max-height:64vh}
.svw.free iframe{height:64vh!important}
.svw-b{background:#fff;border-radius:14px;width:min(1000px,96vw);max-height:94vh;
display:flex;flex-direction:column;overflow:hidden;position:relative}
/* 화면 가운데 좌우 화살표 — 아래 버튼까지 마우스를 내리지 않고 넘긴다 */
.svw-a{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:46px;height:70px;border:0;border-radius:12px;cursor:pointer;
background:rgba(15,23,42,.42);color:#fff;font-size:30px;line-height:1;
display:flex;align-items:center;justify-content:center;transition:.15s;opacity:.35}
.svw-b:hover .svw-a{opacity:.9}
.svw-a:hover{background:rgba(15,23,42,.72);opacity:1}
.svw-a.l{left:10px}
.svw-a.r{right:10px}
.svw-a[disabled]{display:none}
@media(max-width:640px){.svw-a{width:38px;height:58px;font-size:24px;opacity:.8}}
.svw-h{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);
flex-wrap:wrap}
.svw-h b{font-size:14.5px;letter-spacing:-.3px}
/* ★ 머리말이 접혀 «×» 가 아랫줄로 내려가는 것을 막는다 (원장 08-21).
제목이 길면 제목 쪽을 줄이고, 버튼은 늘 오른쪽 한 줄에 둔다. */
.svw-h{flex-wrap:nowrap;min-width:0}
.svw-h b{flex:none;white-space:nowrap}
.svw-h>.muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
.svw-h .btn,.svw-h .svw-x,.svw-h a.btn{flex:none;white-space:nowrap}
.svw-x{width:32px;height:32px;border:0;background:#F1F5F9;border-radius:9px;font-size:19px;
line-height:1;cursor:pointer;color:#475569;flex:none}
.svw-c{flex:1;overflow:auto;background:#F1F5FB;display:flex;justify-content:center;
align-items:flex-start;padding:12px}
.svw-c img{max-width:100%;height:auto;display:block;background:#fff;
box-shadow:0 2px 14px rgba(15,23,42,.18)}
.svw-c.zoom img{max-width:none;width:auto}
.svw-f{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);
flex-wrap:wrap}
.gorv{border:1px solid var(--line);background:#fff;color:#475569;border-radius:7px;
font-family:inherit;font-size:11.5px;font-weight:700;padding:3px 9px;cursor:pointer;white-space:nowrap}
.gorv:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.paper table tbody tr{cursor:pointer}
.paper table tbody tr:hover{background:#F5F9FF}
.paper table tbody tr td:first-child{color:var(--blue);font-weight:800}
.rhead{display:flex;align-items:center;gap:8px;padding:0 10px 6px;border-bottom:1px solid var(--line);
margin-bottom:4px;font-size:10.5px;font-weight:800;color:#94A3B8;letter-spacing:.2px}
.rhead span{flex:1}
.rhead i{font-style:normal;flex:none;width:22px;text-align:center}
.rhead em{font-style:normal;flex:none;min-width:64px;text-align:right;white-space:nowrap}
.rlist{flex:1;overflow-y:auto;min-height:120px;scrollbar-width:thin;margin:-2px -4px 0;padding:2px 4px}
.rlist::-webkit-scrollbar{width:7px}
.rlist::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
.rgh{position:sticky;top:0;z-index:2;background:#F1F5F9;color:#334155;font-size:11px;font-weight:800;
padding:4px 9px;border-radius:6px;margin:9px 0 5px;letter-spacing:.2px}
.rgh:first-child{margin-top:0}
.rrow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;cursor:pointer}
.rrow:hover{background:#F1F5FB}
.rrow.on{background:rgba(47,107,255,.12);box-shadow:inset 0 0 0 1px #BFD3FF}
.rrow .nm2{flex:1 1 auto;min-width:48px;font-size:13.5px;font-weight:700;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.rrow.on .nm2{color:var(--blue)}
.rrow .ex2{flex:none;font-size:11px;font-weight:800;color:#64748B;background:#EEF2F7;
border-radius:99px;padding:1px 7px}
/* 점수칸을 고정 폭으로 두면 «10/20 50%» 처럼 한 글자만 길어져도 두 줄로 밀린다 */
.rrow .pc2{flex:none;font-size:12px;font-weight:800;min-width:64px;text-align:right;
white-space:nowrap}
.rrow .ex2{cursor:help}
.rrow .pc2{color:#94A3B8;font-weight:600;font-size:10.5px}
.rrow .pc2 b{font-size:12px;font-weight:800;margin-left:3px}
.pc2.hi b{color:#15803D}.pc2.md b{color:#B45309}.pc2.lo b{color:#B91C1C}
@media(max-width:900px){
.rp2{grid-template-columns:1fr}
.rside{position:static;max-height:none}
.rlist{max-height:300px}
}
.exlist{display:flex;flex-direction:column;gap:7px;max-height:320px;overflow-y:auto}
.exrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
padding:10px 12px;cursor:pointer;background:#fff}
.exrow:hover{background:#F8FAFF}
.exrow input{width:17px;height:17px;accent-color:var(--blue);flex:none}
.exrow .t{flex:1;min-width:0}
.exrow .t b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exrow .t span{font-size:11.5px;color:var(--mut)}
.exrow .sc3{flex:none;font-size:13px;font-weight:800;color:var(--ink)}
.exrow .sc3 i{font-style:normal;font-size:11.5px;font-weight:700;margin-left:6px}
.exrow .sc3 i.hi{color:#15803D}.exrow .sc3 i.md{color:#B45309}.exrow .sc3 i.lo{color:#B91C1C}
.btn.k{background:#FEE500;color:#191600;font-weight:800}
.btn.k:hover{filter:brightness(1.04)}
.shbox{display:none;margin-top:12px;background:#FFFCF0;border:1px solid #F0DCA8;border-radius:11px;
padding:13px 14px}
.shbox.on{display:block}
.shbox .lb2{font-size:11.5px;font-weight:800;color:#92400E;margin-bottom:6px}
.shbox .row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.shbox input{flex:1;min-width:220px;height:36px;border:1px solid var(--line);border-radius:8px;
padding:0 11px;font-family:inherit;font-size:13px;background:#fff;color:var(--ink)}
.shbox .hint{font-size:11.5px;color:#78716C;margin-top:8px;line-height:1.7}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:500;
background:#0F172A;color:#fff;padding:11px 18px;border-radius:99px;
font-size:13.5px;font-weight:700;line-height:1.5;max-width:min(560px,92vw);text-align:center;
box-shadow:0 8px 24px rgba(15,23,42,.35);opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1}
.kdsel{height:28px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#475569;
font-family:inherit;font-size:12px;font-weight:700;padding:0 6px;flex:none}
.ncwrap{max-width:900px}
.icard{border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:9px;background:#fff}
/* 공지 형태 — 목록이 주인공이다. 제목을 키우고 상태는 왼쪽 띠로 */
.icard.nc{padding:15px 16px 13px;border-radius:12px;position:relative;overflow:hidden}
.icard.nc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#CBD5E1}
.icard.nc.open::before{background:#DC2626}
.icard.nc.doing::before{background:#F59E0B}
.icard.nc.done::before{background:#12B76A}
.icard.nc .ihd b{font-size:16px;font-weight:800;letter-spacing:-.4px;display:block;width:100%;
margin-top:3px;color:var(--ink)}
.icard.nc .ibody{font-size:13.5px;color:#3F3F46;margin-top:9px;line-height:1.85}
.icard.nc .imeta{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.icard.nc.done{opacity:1;background:#FAFAF9}
.icard.nc.done .ihd b{color:#71717A}
.icard.nc .iact{margin-top:10px}
.icard.done{opacity:.65}
.icard.hit{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.18)}
.drop.sm{padding:16px 12px;min-height:0}
.drop.sm b{font-size:13px}
.ilinkrow{display:flex;gap:6px}
.ilinkrow input{flex:1;min-width:0;height:38px;border:1px solid var(--line);border-radius:8px;
padding:0 11px;font:inherit;font-size:13px;background:#fff}
.ilinkrow .btn{flex:none}
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.fchip2{display:inline-flex;align-items:center;gap:6px;background:#EEF2F8;border-radius:8px;
padding:4px 9px;font-size:12px;font-weight:700;color:var(--ink);max-width:100%}
.fchip2 a{color:var(--blue);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip2 span.sz{color:var(--mut);font-weight:600;font-size:11px;flex:none}
.fchip2 button{border:0;background:none;color:var(--mut);cursor:pointer;font-size:14px;
line-height:1;padding:0 2px}
.fchip2 button:hover{color:var(--red)}
.ishots{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ishots a{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;line-height:0}
.ishots img{width:96px;height:72px;object-fit:cover;display:block;background:#fff}
.ishots a:hover{border-color:var(--blue)}
.ihd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ihd b{font-size:14px}
.ist{font-size:11px;font-weight:800;border-radius:5px;padding:2px 7px;white-space:nowrap}
.ist.open{background:#FEE2E2;color:#B91C1C}
.ist.doing{background:#FEF3C7;color:#92400E}
.ist.done{background:#DCFCE7;color:#15803D}
.ikd{font-size:11px;font-weight:800;border-radius:5px;padding:2px 7px;background:#EDF3FF;color:#2F5FBF}
.ibody{font-size:13px;color:var(--mut);margin-top:7px;white-space:pre-wrap;line-height:1.7}
.imeta{font-size:11.5px;color:#9AA5B5;margin-top:7px}
.ireply{margin-top:9px;border-left:3px solid var(--blue);background:#F5F9FF;border-radius:0 8px 8px 0;
padding:9px 11px;font-size:13px;line-height:1.7;white-space:pre-wrap}
.ireply b{color:var(--blue);display:block;font-size:11.5px;margin-bottom:3px}
.iact{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.chks{display:inline-flex;flex-wrap:wrap;gap:3px;justify-content:center;cursor:help}
.chks .ck{font-style:normal;font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 5px;
background:#FEF3C7;color:#92400E;white-space:nowrap}
.chks .ck.nokey,.chks .ck.keymix,.chks .ck.bad{background:#FEE2E2;color:#B91C1C}
.chks .ck.empty{background:#F1F5F9;color:#475569}
tr.grp td{background:#F1F5F9;font-weight:800;font-size:12.5px;color:#0F172A;padding:8px 12px;
border-bottom:1px solid #E2E8F0;letter-spacing:-.2px;box-shadow:inset 4px 0 0 #94A3B8}
tr.grp .gc{font-weight:600;font-size:11.5px;color:#64748B;margin-left:8px}
tr.selrow td{background:#EEF3FF}
.seqb{display:inline-block;font-size:10.5px;font-weight:800;background:#EEF3FF;color:var(--blue);
border-radius:20px;padding:2px 8px;margin-left:6px;vertical-align:1px}
.curbar .seqb{background:rgba(255,255,255,.2);color:#DCE7FF}
.dnb2{display:inline-block;background:#1E7F4B;color:#EAFBF1;border-radius:6px;padding:2px 8px;
font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.3px;
margin-right:7px;vertical-align:1px}
.curbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#0F1A30;color:#fff;
border-radius:11px;padding:11px 15px;margin-bottom:14px;font-size:13px}
.curbar .lbl{font-size:11.5px;color:#9FB4D8;margin-right:4px}
.curbar b{font-size:14px}
.curbar .muted{color:#C3D2EA}
.curbar .right{margin-left:auto;display:flex;gap:6px}
.frm label{display:block;font-size:12px;color:#374151;margin:9px 0 4px;font-weight:700}
.frm input{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 11px;
font:inherit;font-size:13px;background:#fff}
.frm input:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
.frm textarea{width:100%;min-height:118px;border:1px solid var(--line);border-radius:8px;
padding:9px 11px;font:inherit;font-size:13px;line-height:1.75;background:#fff;
color:var(--ink);resize:vertical;display:block}
.frm textarea:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
.frm textarea::placeholder{color:#9AA5B5}
.frm .req{color:var(--red)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f3{display:grid;grid-template-columns:76px 1fr 1fr;gap:6px}
.frm select{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 8px;
font:inherit;font-size:13px;background:#fff;color:var(--ink)}
.f3 input{text-align:center}
.steps{display:flex;flex-direction:column;gap:9px}
.stp{display:flex;gap:10px;align-items:flex-start;font-size:12.5px}
.stp>b{flex:0 0 22px;height:22px;border-radius:7px;background:#EEF3FF;color:var(--blue);
display:flex;align-items:center;justify-content:center;font-size:11.5px}
.stp span{color:#4B5563;font-size:12px}
.chip.x{background:#FEE2E2;color:#B91C1C}
.gtext{font-size:13.5px;line-height:1.9;color:#374151}
.glist{margin:2px 0 0;padding-left:18px;font-size:13.5px;line-height:1.95;color:#374151}
.glist li{margin-bottom:5px}
.glist b{color:var(--ink)}
.gflow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.gflow>div{flex:1;min-width:132px;background:#F6F8FC;border:1px solid #E4EAF3;border-radius:9px;
padding:10px 12px;font-size:13px;font-weight:700;color:var(--ink)}
.gflow>div b{display:inline-block;color:var(--blue);margin-right:4px}
.gflow>div span{display:block;font-weight:400;font-size:11.5px;color:#6B7280;margin-top:3px}
.gchips{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
#p10 table{table-layout:fixed;width:100%}
#p10 th{white-space:normal;word-break:keep-all;line-height:1.6;vertical-align:top;
background:#F8FAFC;font-weight:800;color:var(--ink);border-right:1px solid #EEF1F6}
#p10 td{white-space:normal;word-break:keep-all;line-height:1.75;vertical-align:top}
#p10 .muted{display:block;margin-top:4px}
@media(max-width:900px){
#p10 table,#p10 tbody,#p10 tr,#p10 th,#p10 td{display:block;width:auto!important}
#p10 tr{border:1px solid var(--line);border-radius:9px;margin-bottom:8px;overflow:hidden}
#p10 th{border-right:0;border-bottom:1px solid #EEF1F6}
}
.stampgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.stampgrid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;
padding:16px;text-align:center}
.stampgrid img{width:100%;max-width:none;height:auto;display:block;margin:0 auto 11px;
border:1px solid #EEF1F6;border-radius:8px;background:#fff;cursor:zoom-in}
@media(max-width:1280px){.stampgrid{grid-template-columns:1fr 1fr}}
@media(max-width:980px){.stampgrid{grid-template-columns:1fr}}
.stampgrid figure.key img{width:78.4%}
.stampgrid figcaption{font-size:13px;line-height:1.7;color:#374151}
.stampgrid figcaption b{font-size:14.5px;color:var(--ink)}
.stampgrid figcaption span{color:#6B7280;font-size:12.5px;display:block}
.stampgrid a{display:inline-block;margin-top:7px;font-size:12.5px;font-weight:800;
color:var(--blue);text-decoration:none;border:1px solid #C7D8FF;background:#EEF3FF;
border-radius:7px;padding:5px 11px}
@media(max-width:760px){.stampgrid{grid-template-columns:1fr}}
.glist.bad li{color:#B91C1C}
.glist.bad li::marker{color:#DC2626}
.gck{display:inline-flex;align-items:center;gap:5px;margin-left:8px;font-size:11.5px;
font-weight:800;border-radius:20px;padding:3px 10px;border:1px solid #E2E8F0;
background:#F8FAFC;color:#94A3B8;white-space:nowrap}
.gck.on{background:#DCFCE7;border-color:#6EE7A8;color:#166534}
.gck.man{cursor:pointer}
.gck.man:hover{border-color:var(--blue);color:var(--blue)}
.gbar{height:10px;background:#EEF1F7;border-radius:99px;overflow:hidden;margin:4px 0 10px}
.gbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#12B76A,#5BE0A0);transition:width .4s}
.idirs{display:flex;gap:6px;margin:-4px 0 12px}
.idirs a{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:99px;
border:1px solid var(--line);background:#fff;color:#475569;font-size:13px;font-weight:800;
text-decoration:none}
.idirs a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.idirs a .b{display:none;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;
font-size:11px;font-weight:800;align-items:center;justify-content:center;padding:0 5px}
.idirs a .b.on{display:inline-flex}
.idirs a.on .b{background:rgba(255,255,255,.9);color:var(--blue)}
.inoti{display:flex;gap:8px;align-items:flex-start;margin-top:11px;padding:9px 11px;
background:#FFFBF0;border:1px solid #F0DCA8;border-radius:9px;font-size:12.5px;cursor:pointer}
.inoti input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:#D97706}
.inoti em{display:block;font-style:normal;color:#92400E;font-size:11.5px;margin-top:2px}
.idate{margin:14px 0 7px;font-size:11.5px;font-weight:800;color:#64748B;letter-spacing:.2px;
display:flex;align-items:center;gap:8px}
.idate::after{content:'';flex:1;height:1px;background:var(--line)}
.idate:first-child{margin-top:0}
.ihm{font-size:11px;font-weight:800;color:#64748B;background:#F1F5F9;border-radius:6px;padding:1px 7px}
.prlist{display:flex;flex-direction:column;gap:8px}
.pritem{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:#fff}
.pritem.ok{border-color:#BBF7D0;background:#F7FEF9}
.pritem.no{border-color:#F0DCA8;background:#FFFCF4}
.pritem .ph{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pritem .mk{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
justify-content:center;font-size:12px;font-weight:900;flex:none;background:#E2E8F0;color:#64748B}
.pritem.ok .mk{background:#15803D;color:#fff}
.pritem.no .mk{background:#D97706;color:#fff}
.pritem .tt{font-size:13.5px;font-weight:800;letter-spacing:-.3px}
.pritem .cnt{font-size:11.5px;font-weight:800;color:#64748B;background:#F1F5F9;
border-radius:99px;padding:1px 8px}
.pritem .ds{margin-top:6px;font-size:12.5px;line-height:1.7;color:#475569}
.pritem .bad{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.pritem .bad a{font-size:11.5px;font-weight:700;color:#92400E;background:#FEF3C7;
border:1px solid #F0DCA8;border-radius:7px;padding:2px 8px;text-decoration:none;cursor:pointer}
.pritem .bad a:hover{background:#FDE68A}
.gsum{display:flex;flex-wrap:wrap;gap:7px}
.gsum .it{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
background:#F6F8FC;border:1px solid #E4EAF3;border-radius:8px;padding:6px 11px;color:#475569}
.gsum .it.on{background:#F0FDF4;border-color:#BBF7D0;color:#166534}
.gsum .it em{font-style:normal;font-weight:400;font-size:11.5px;color:#6B7280}
.gsum .it.on em{color:#15803D}
.note{background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:11px 13px;
font-size:12.5px;color:#92400E;margin-top:14px}
.note b{color:#78350F}
footer{border-top:1px solid var(--line);padding:22px 26px 30px;color:#4B5563;
font-size:12.5px;text-align:center;line-height:1.85;background:#fff}
footer .fmain{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
footer .fver{font-size:11px;font-weight:700;color:var(--blue);background:#EEF3FF;
padding:2px 7px;border-radius:99px;margin-left:5px;vertical-align:2px}
footer .fsub{margin-top:3px;font-size:12px;color:#4B5563}
footer .fcopy{margin-top:11px;padding-top:11px;border-top:1px solid #EEF1F6;
font-size:11.5px;color:#6B7280;line-height:1.8}
footer .fcopy b{color:var(--ink);font-weight:800}
footer .fcopy a{color:var(--blue);text-decoration:none}
footer .fwarn{margin:11px auto 0;max-width:820px;border:1px solid #F0C9C9;background:#FEF6F6;
border-radius:11px;padding:12px 15px;font-size:12px;line-height:1.75;color:#7A2E2E;text-align:left}
footer .fwarn b{color:#B91C1C;font-weight:800}
footer b{color:var(--ink)}
@media(max-width:1100px){
.rvL{position:static;height:auto}
.rvR{height:auto;overflow:visible}
.scan{min-height:520px}
.slist,.paper{height:auto;position:static;overflow:visible}
}
/* 모바일 — 메뉴 13개를 가로 스크롤 4줄로 늘어놓으니 본문 전에 화면 하나를 다 먹었다.
햄버거 서랍으로 접고, 상단에는 현재 화면 이름만 남긴다. */
.topbar{display:none}
.smask{display:none}
@media(max-width:860px){
.topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:60;
height:54px;padding:0 12px;background:#141E33;color:#fff;
border-bottom:1px solid rgba(255,255,255,.08)}
.hbg{flex:0 0 auto;width:40px;height:40px;border-radius:10px;cursor:pointer;
border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.hbg span{display:block;width:17px;height:2px;background:#fff;border-radius:2px}
.tbt{flex:1;min-width:0;font-size:15.5px;font-weight:800;letter-spacing:-.3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbg{flex:0 0 auto;font-size:12px;font-weight:800;color:#8EA3C6}
.tbg b{color:#5B8CFF}
.hbg{position:relative}
.hbg.alert::after{content:'';position:absolute;top:5px;right:5px;width:8px;height:8px;
border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #141E33}
.smask{display:block;position:fixed;inset:0;z-index:70;background:rgba(6,12,24,.55);
opacity:0;pointer-events:none;transition:opacity .2s}
.smask.on{opacity:1;pointer-events:auto}
.shell{display:block}
.side{position:fixed;top:0;left:0;z-index:80;flex:none;
width:min(292px,84vw);height:100vh;max-height:100vh;
transform:translateX(-102%);transition:transform .22s ease;
padding:14px 10px 20px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.08);
display:flex;flex-direction:column}
.side.on{transform:none;box-shadow:0 0 44px rgba(0,0,0,.55)}
.side .sh{display:block}
.sfoot{display:block}
.brand{padding:2px 6px 12px}
.tabs{display:block;overflow:visible}
.tab{white-space:normal;margin-bottom:3px}
main{padding:22px 16px 48px}
footer{padding:22px 16px 30px}
}
@media(max-width:860px){
main.wrap{padding-top:24px;padding-bottom:48px}
h2{font-size:19px}
.rv,.rp,.two{grid-template-columns:1fr}
.stat{grid-template-columns:repeat(2,1fr)}
.slist{max-height:200px}
}
/* 정답 보기 모달 — 회차 목록에서 정답지를 누르면 뜬다 */
.kvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.kvgrid .kv{display:flex;align-items:center;gap:7px;border:1px solid var(--line);
border-radius:8px;padding:6px 9px;background:#fff}
.kvgrid .kv b{flex:none;font-size:11.5px;font-weight:800;color:#64748B;min-width:20px}
.kvgrid .kv span{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kvgrid .kv.sub span{font-size:12px;font-weight:600}
.kvhd{font-size:12px;font-weight:800;color:#64748B;margin:14px 0 7px}
.kvhd small{font-weight:500;color:var(--mut)}
/* §76 정답 보기 = 답안지(sheetgen)와 같은 얼개 */
.kvtools{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F8FAFC;border-bottom:1px solid var(--line)}
.kvsh{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.kvsh-l{display:flex;border:1.5px solid #1e3a8a;border-radius:4px;overflow:hidden}
.kvsh-l>b{display:flex;align-items:center;justify-content:center;padding:0 14px;font-size:14px;line-height:1.5;color:#1e3a8a;border-right:1.5px solid #1e3a8a;text-align:center}
.kvsh-l table{border-collapse:collapse}
.kvsh-l td{border:1px solid #1e3a8a;padding:3px 14px 4px 8px;min-width:110px;vertical-align:top}
.kvsh-l td small{display:block;font-size:10px;color:#475569;font-weight:700}
.kvsh-l td span{display:block;font-size:17px;font-weight:800;color:#1e3a8a;text-align:center;letter-spacing:.02em}
.kvsh-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--mut);padding-top:4px}
.kvbody{display:flex;gap:16px;align-items:flex-start}
.kvcol{flex:none}.kvcol.grow{flex:1;min-width:0}
.kvobj{display:flex;gap:10px;align-items:flex-start}
.kvobj table,.kvsub{border-collapse:collapse;background:#fff}
.kvobj th,.kvobj td,.kvsub th,.kvsub td{border:1px solid #334155;font-size:13px}
.kvobj th,.kvsub th{background:#F1F5F9;font-weight:800;padding:5px 10px;text-align:center}
.kvobj td{padding:3px 10px;text-align:center}
.kvobj td:first-child{width:34px;color:#475569}
.kvobj td:last-child{min-width:64px;font-weight:800;font-size:15px;color:var(--ink)}
.kvobj td em,.kvsub td em{font-style:normal;font-size:10px;color:#94A3B8;font-weight:600;margin-left:5px}
.kvsub{width:100%}
.kvsub td:first-child{width:44px;text-align:center;color:#475569;vertical-align:top;padding-top:8px}
.kvsub td:last-child{padding:6px 10px;min-height:44px}
.kvsubc{display:flex;align-items:center;gap:8px;min-height:32px}
.kvone{font-weight:700;font-size:14px;color:var(--ink);white-space:pre-wrap}
.kvcells{flex:1;display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.kvcells i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink);border:1px solid #CBD5E1;border-radius:5px;padding:3px 8px;background:#F8FAFC;display:inline-flex;align-items:center;gap:4px}
.kvcells i u{text-decoration:none;font-size:10px;color:#fff;background:#64748B;border-radius:4px;padding:0 4px}
.kvcells i em{font-style:normal;font-size:10.5px;color:#94A3B8;font-weight:600;margin:0}
.kvod{flex:none;font-size:11px;font-weight:700;border:1px solid #CBD5E1;background:#fff;color:#64748B;border-radius:999px;padding:3px 9px;cursor:pointer}
.kvod.on{background:#1D4ED8;border-color:#1D4ED8;color:#fff}
.kvod:disabled{opacity:.6;cursor:default}
.kvnote{margin-top:12px;font-size:12px;color:var(--mut)}
/* PDF 구간 고르기 */
.pdfres.pick .pklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px;margin:10px 0}
.pkrow{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff;cursor:pointer;font-size:12.5px}
.pkrow input{margin:0}
.pkrow b{font-weight:800}
.pkrow .muted{margin-left:auto;font-size:11.5px;white-space:nowrap}
@media(max-width:760px){.kvbody{flex-direction:column}.kvsh{flex-direction:column}}
/* 검수 — 부분 정답 칩 · 칸별 결과 */
.chip.pp{background:#FEF3C7;color:#B54708}
.qpd{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 2px 2px}
.qpd i{font-style:normal;font-size:12px;font-weight:700;border-radius:5px;padding:2px 7px;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent}
.qpd i.ok{background:#ECFDF3;color:#027A48;border-color:#ABEFC6}
.qpd i.x{background:#FEF3F2;color:#B42318;border-color:#FECDCA}
.qpd i em{font-style:normal;font-size:10.5px;opacity:.7;font-weight:600}
.qpd i small{font-size:10.5px;font-weight:600;opacity:.75}
.kvhd:first-child{margin-top:0}
.kvsrc{margin-top:14px;font-size:12px;color:var(--mut);border-top:1px dashed var(--line);padding-top:10px}
/* ── ② PDF 자동 등록 (2026-08-21) ── */
.pdfin{margin-bottom:14px;border-color:#99E6DD;background:linear-gradient(180deg,#F4FDFB,#fff 60%)}
.pdfopt{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-bottom:10px;font-size:13.5px}
.pdfopt label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.pdfopt input[type=radio]{accent-color:#0F766E}
.pdfnew{display:inline-flex;gap:6px;align-items:center}
.pdfnew select,.pdfnew input{height:32px;font-size:13px;padding:0 8px}
.pdfnew input#pdf_grade{width:58px}
.pdfnew input#pdf_date{width:142px}
.pdfres{margin-top:10px;border:1px solid #BBF7D0;background:#F7FEF9;border-radius:var(--radius);padding:11px 13px;font-size:13.5px}
.pdfres.bad{border-color:#FECACA;background:#FFF7F7}
.pdfres .acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.pdfin{margin-bottom:0}
.pdfin .drop.sm{padding:12px}
.pdfin .ct{font-size:14px}
a.stp2{text-decoration:none}
.stbl td .btn.sm{white-space:nowrap}
.stbl td .dnb{white-space:nowrap}
/* ══════════════════════════════════════════════════════════════
survey.webrun.kr 전용 — AI 설문 생성 플랫폼 (2026-09-11)
위쪽은 aigrade 에서 그대로 가져온 공통 셸이다. 여기부터가 이 사이트 전용.
★ 새 클래스는 반드시 sv 접두어 — .lb 충돌로 라벨이 조용히 사라진 적이 있다(aigrade SKILL §38)
══════════════════════════════════════════════════════════════ */
.svgrid{display:grid;grid-template-columns:1fr 372px;gap:16px;align-items:start}
@media(max-width:1180px){.svgrid{grid-template-columns:1fr}}
.svside{position:sticky;top:14px;display:flex;flex-direction:column;gap:13px}
@media(max-width:1180px){.svside{position:static}}
.frm label .sp{flex:1}
.frm label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.svai{height:25px;padding:0 9px;border:1px solid #C7D9FF;border-radius:7px;background:#EDF3FF;color:#2F6BFF;
font:inherit;font-size:11.5px;font-weight:800;letter-spacing:-.2px;cursor:pointer;
display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.svai:hover{background:#DCE9FF;border-color:#A8C6FF}
.svai:disabled{opacity:.55;cursor:progress}
.svfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-top:22px;padding-top:16px;border-top:1px solid #E1E6EF}
.svfoot .sp{flex:1}
.svb{height:38px;padding:0 15px;border:1px solid #E1E6EF;border-radius:9px;background:#fff;color:#0F172A;
font:inherit;font-size:13.5px;font-weight:800;letter-spacing:-.2px;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;transition:.12s}
.svb:hover{border-color:#C3D3F0;background:#F7FAFF}
.svb.pri{background:#2F6BFF;border-color:#2F6BFF;color:#fff}
.svb.pri:hover{background:#1F58EA;border-color:#1F58EA}
.svb:disabled{opacity:.5;cursor:not-allowed}
.svsaved{font-size:12px;color:#12B76A;font-weight:800;opacity:0;transition:opacity .3s}
.svsaved.on{opacity:1}
/* 필수 미입력 표시 */
.frm input.svbad,.frm textarea.svbad{border-color:#DC2626 !important;
box-shadow:0 0 0 3px rgba(220,38,38,.1)}
/* 우측 안내 */
.svnote{background:#0B1220;color:#D8E3F5;border-radius:12px;padding:17px 19px}
.svnote h4{font-size:13px;font-weight:900;color:#fff;margin-bottom:9px;letter-spacing:-.3px}
.svnote ol{list-style:none;counter-reset:svn;margin:0;padding:0}
.svnote li{counter-increment:svn;font-size:12.5px;line-height:1.7;padding:9px 0 9px 27px;position:relative;
border-top:1px solid rgba(255,255,255,.09)}
.svnote li:first-child{border-top:0}
.svnote li::before{content:'0' counter(svn);position:absolute;left:0;top:9px;font-weight:900;
font-size:11.5px;color:#6E8FD6}
.svnote li b{color:#fff;display:block;font-size:12.5px;margin-bottom:1px;font-weight:800}
.svinfo{background:#fff;border:1px solid #E1E6EF;border-radius:12px;padding:15px 17px;
font-size:12.5px;color:#556070;line-height:1.75}
.svinfo b{color:#0F172A;display:block;margin-bottom:5px;font-size:13px;font-weight:900}
/* 아직 안 만든 화면 */
.svsoon{text-align:center;color:#8794AA;padding:56px 20px;font-size:14.5px;font-weight:800;line-height:2}
.svsoon span{font-size:12.5px;font-weight:700;color:#A6B2C4}
/* ══════════ ② 생성 · 공용 문항 카드 ══════════ */
.svchip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;
background:#EDF3FF;border:1px solid #D7E4FF;color:#2F6BFF;font-size:11.5px;font-weight:800;white-space:nowrap}
.svchip.warn{background:#FFF6E6;border-color:#FFE0A8;color:#B4740A}
.svbrief{padding:16px 18px}
.svbh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.svbh>b{font-size:16px;font-weight:900;letter-spacing:-.4px;margin-right:2px}
.svbh .sp{flex:1;min-width:8px}
.svbp{margin-top:9px;padding-top:9px;border-top:1px solid #EEF1F6;font-size:13px;color:#556070;line-height:1.7}
.svrun{margin-top:13px;padding:18px 20px}
.svrunh{font-size:13.5px;font-weight:900;margin-bottom:12px}
.svsteps{list-style:none;margin:0;padding:0}
.svstep{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:12.5px;line-height:1.6}
.svstep::before{content:'';flex:none;width:16px;height:16px;border-radius:50%;margin-top:2px;
border:2px solid #D3DCEA;background:#fff}
.svstep.run::before{border-color:#2F6BFF;border-top-color:transparent;animation:svspin .7s linear infinite}
.svstep.done::before{border-color:#12B76A;background:#12B76A;
box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #12B76A}
@keyframes svspin{to{transform:rotate(360deg)}}
.svstep b{font-weight:800;color:#0F172A;flex:none;min-width:150px}
.svstep span{color:#556070}
@media(max-width:700px){.svstep{flex-wrap:wrap}.svstep b{min-width:0;width:100%}}
.svstat{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:13px 0}
@media(max-width:760px){.svstat{grid-template-columns:repeat(2,1fr)}}
.svst{background:#fff;border:1px solid #E1E6EF;border-radius:12px;padding:14px 12px;text-align:center}
.svst b{display:block;font-size:22px;font-weight:900;letter-spacing:-1px;color:#0F172A}
.svst span{font-size:11.5px;font-weight:800;color:#8794AA}
.svst.ok b{color:#12B76A}
.svwarn{background:#FFF8EC;border:1px solid #FFE2AE;border-radius:12px;padding:13px 16px;
font-size:12.5px;color:#8A5A05;line-height:1.7;margin-bottom:13px}
.svwarn b{font-weight:900}
.svsec{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:900;
letter-spacing:-.3px;margin-bottom:12px}
.svsec .sp{flex:1;min-width:6px}
.svsec .cnt{font-style:normal;font-size:12px;font-weight:800;color:#8794AA}
.svdocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:9px}
.svdoc{border:1px solid #E1E6EF;border-radius:10px;padding:11px 13px;background:#FBFCFE}
.svdoc b{display:block;font-size:12.5px;font-weight:800;margin-bottom:2px}
.svdoc span{display:block;font-size:11px;color:#8794AA}
.svdoc i{display:inline-block;margin-top:6px;font-style:normal;font-size:11px;font-weight:800;
color:#2F6BFF;background:#EDF3FF;border-radius:5px;padding:1px 6px}
.svsecbar{margin:16px 0 9px;padding:6px 11px;background:#0B1220;color:#fff;border-radius:8px;
font-size:12.5px;font-weight:900;letter-spacing:-.2px}
.svsecbar i{font-style:normal;font-weight:700;color:#8FA6C8;margin-left:6px}
.svq{border:1px solid #E1E6EF;border-radius:11px;padding:12px 14px;margin-bottom:8px;background:#fff}
.svqh{display:flex;align-items:flex-start;gap:8px;margin-bottom:7px}
.svqno{flex:none;background:#0F172A;color:#fff;border-radius:6px;padding:2px 7px;
font-size:11.5px;font-weight:900}
.svqt{flex:1;font-size:13.5px;font-weight:800;line-height:1.6;white-space:pre-line}
.svqty{flex:none;font-size:10.5px;font-weight:900;color:#2F6BFF;background:#EDF3FF;
border-radius:5px;padding:2px 6px;white-space:nowrap}
.svqo{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.svo{font-size:12px;color:#556070;background:#F4F6FA;border:1px solid #E7EBF2;
border-radius:6px;padding:3px 8px}
.svqo.grid{display:block;overflow-x:auto}
.svqo.grid table{border-collapse:collapse;font-size:11.5px;width:100%}
.svqo.grid th,.svqo.grid td{border:1px solid #E7EBF2;padding:4px 7px;text-align:center;color:#556070}
.svqo.grid td:first-child,.svqo.grid th:first-child{text-align:left;min-width:150px}
.svqo.grid thead th{background:#F4F6FA;font-weight:800}
.svqf{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed #EAEEF5}
.svsrc{font-size:11px;color:#8794AA;font-weight:700}
.svkey{font-size:10.5px;color:#94A3B8;font-family:ui-monospace,Menlo,Consolas,monospace;
background:#F4F6FA;border-radius:4px;padding:1px 5px}
.svlgs{display:flex;flex-wrap:wrap;gap:4px}
.svlg{font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 6px;white-space:nowrap}
.svlg.ask{background:#FFF1F1;color:#C0392B}
.svlg.skip{background:#FFF6E6;color:#B4740A}
.svlg.rand{background:#F0F4FF;color:#4361C7}
.svlg.pipe{background:#F0FBF4;color:#0F8A4F}
.svdrop{margin-top:12px;padding:11px 14px;background:#F7F9FC;border:1px dashed #D6DEEA;
border-radius:10px;font-size:12px;color:#556070;line-height:1.7}
.svdrop b{color:#0F172A}
/* ══════════ ③ Workspace ══════════ */
.wsbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #E1E6EF;
border-radius:12px;padding:11px 14px;margin-bottom:13px}
.wsbar>b{font-size:14.5px;font-weight:900;letter-spacing:-.3px}
.wsbar .sp{flex:1;min-width:6px}
.wsgrid{display:grid;grid-template-columns:250px minmax(0,1fr) 330px;gap:13px;align-items:start}
@media(max-width:1400px){.wsgrid{grid-template-columns:230px minmax(0,1fr)}
.wsright{grid-column:1/-1}}
@media(max-width:900px){.wsgrid{grid-template-columns:1fr}}
.wsleft{background:#fff;border:1px solid #E1E6EF;border-radius:12px;padding:9px;
position:sticky;top:12px;max-height:calc(100vh - 90px);overflow-y:auto}
@media(max-width:900px){.wsleft{position:static;max-height:300px}}
.wsleft::-webkit-scrollbar{width:7px}
.wsleft::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
.wslh{font-size:11.5px;font-weight:900;color:#8794AA;padding:3px 6px 8px}
.wslh i{font-style:normal;color:#2F6BFF}
.wssec{margin:9px 0 4px;padding:4px 7px;background:#F1F4F9;border-radius:6px;
font-size:11px;font-weight:900;color:#556070;display:flex;justify-content:space-between}
.wssec i{font-style:normal;color:#94A3B8}
.wsq{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;cursor:pointer;
font-size:12.5px;margin-bottom:1px}
.wsq:hover{background:#EDF3FF}
.wsq.on{background:#2F6BFF;color:#fff}
.wsq .n{flex:none;font-weight:900;font-size:11px;color:#94A3B8;min-width:26px}
.wsq.on .n{color:#C7DBFF}
.wsq .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.wsq .lg{flex:none;font-size:10px;color:#F59E0B}
.wsq.on .lg{color:#FFE0A8}
.wsmid{padding:16px 18px}
.wseh{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:14px;
border-bottom:1px solid #EEF1F6}
.wseh .sp{flex:1;min-width:4px}
.wseh select{height:30px;border:1px solid #E1E6EF;border-radius:7px;font:inherit;font-size:12px;
font-weight:700;background:#fff;color:#0F172A;padding:0 6px}
.wskey{font-size:10.5px;font-weight:900;color:#94A3B8}
.wseh input{height:30px;width:120px;border:1px solid #E1E6EF;border-radius:7px;font-size:12px;
font-family:ui-monospace,Menlo,Consolas,monospace;padding:0 8px;color:#0F172A}
.wsic{width:30px;height:30px;border:1px solid #E1E6EF;border-radius:7px;background:#fff;cursor:pointer;
font-size:13px;color:#556070;display:inline-flex;align-items:center;justify-content:center;padding:0}
.wsic:hover{border-color:#2F6BFF;color:#2F6BFF;background:#F7FAFF}
.wsic.del:hover{border-color:#DC2626;color:#DC2626;background:#FFF5F5}
.wsl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;margin:14px 0 6px}
.wsl:first-of-type{margin-top:0}
.wsl .sp{flex:1}
.wsl.sub{font-size:11.5px;font-weight:700;color:#8794AA;margin-top:8px}
.wsmid select,.wsmid textarea,.wsfold input{width:100%;border:1px solid #E1E6EF;border-radius:9px;
background:#fff;color:#0F172A;font:inherit;font-size:13px;padding:9px 11px;line-height:1.65}
.wsmid select{height:38px;padding:0 10px;font-weight:700}
.wsmid textarea{resize:vertical}
.wsmid select:focus,.wsmid textarea:focus,.wsfold input:focus{outline:0;border-color:#2F6BFF;
box-shadow:0 0 0 3px rgba(47,107,255,.13)}
.wshint{font-size:11.5px;color:#8794AA;margin-top:5px;line-height:1.6}
.wshint code{background:#F1F4F9;border-radius:4px;padding:1px 4px;
font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px}
.wsfold{margin-top:14px;padding:12px 13px;background:#FAFBFD;border:1px solid #EAEEF5;border-radius:10px}
.wsfold>b{display:block;font-size:12px;font-weight:900;color:#556070;margin-bottom:8px}
.wsfold input{height:36px;padding:0 11px}
.wsskips{margin-bottom:8px}
.wsskip{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.wsskip span{font-size:11px;font-weight:800;color:#8794AA;flex:none}
.wsskip input{flex:1;min-width:0;height:34px}
.wsreq{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px;padding-top:13px;
border-top:1px solid #EEF1F6;font-size:12.5px;font-weight:800}
.wsreq .sp{flex:1}
.wsreq input{width:15px;height:15px;accent-color:#2F6BFF;vertical-align:-2px;margin-right:5px}
.wssrc{font-size:11px;font-weight:700;color:#8794AA}
.wssave{display:flex;align-items:center;gap:9px;margin-top:14px}
/* 미리보기 */
.wsright{background:#fff;border:1px solid #E1E6EF;border-radius:12px;padding:12px;
position:sticky;top:12px}
@media(max-width:1400px){.wsright{position:static}}
.wsph{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;color:#556070;
margin-bottom:10px;flex-wrap:wrap}
.wsph .sp{flex:1;min-width:4px}
.wsph .live{font-size:10px;font-weight:900;color:#12B76A;background:#E9FBF1;border-radius:5px;padding:1px 6px}
.wsdv{width:28px;height:26px;border:1px solid #E1E6EF;border-radius:6px;background:#fff;cursor:pointer;
font-size:12px;color:#8794AA;padding:0}
.wsdv.on{background:#0B1220;border-color:#0B1220;color:#fff}
.wsdev{margin:0 auto;background:#0B1220;border-radius:18px;padding:10px;transition:max-width .18s}
.wsdev.mobile{max-width:300px}
.wsdev.tablet{max-width:100%}
.wsdev.pc{max-width:100%;border-radius:10px;padding:8px}
.wsscr{background:#fff;border-radius:11px;padding:16px 15px;min-height:270px}
.pvbar{height:4px;background:#EEF1F6;border-radius:99px;margin:-4px 0 12px;overflow:hidden}
.pvbar i{display:block;height:100%;background:#2F6BFF}
.pvtag{font-size:10px;font-weight:900;color:#2F6BFF;letter-spacing:.3px;margin-bottom:7px}
.pvq{font-size:14px;font-weight:800;line-height:1.55;margin-bottom:13px;letter-spacing:-.3px}
.pvq .pip{background:#E9FBF1;color:#0F8A4F;border-radius:4px;padding:0 4px;font-weight:900}
.pvo{display:flex;align-items:center;gap:9px;border:1px solid #E1E6EF;border-radius:9px;
padding:10px 12px;margin-bottom:6px;font-size:12.5px;font-weight:700;line-height:1.4}
.pvo.sel{border-color:#2F6BFF;background:#F5F9FF}
.pvo .rd,.pvo .ck{flex:none;width:15px;height:15px;border:2px solid #C7D0DE;background:#fff}
.pvo .rd{border-radius:50%}
.pvo .ck{border-radius:4px}
.pvo .rd.on{border-color:#2F6BFF;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 8px #2F6BFF}
.pvo.rank .rk{flex:none;width:20px;height:20px;border-radius:50%;background:#EDF3FF;color:#2F6BFF;
font-size:11px;font-weight:900;display:grid;place-items:center}
.pvta{width:100%;min-height:76px;border:1px solid #E1E6EF;border-radius:9px;padding:9px 11px;
font:inherit;font-size:12.5px;resize:none;background:#FBFCFE}
.pvin{width:100%;height:38px;border:1px solid #E1E6EF;border-radius:9px;padding:0 11px;
font:inherit;font-size:12.5px;background:#FBFCFE}
.pvgrid{overflow-x:auto;margin-bottom:8px}
.pvgrid table{border-collapse:collapse;width:100%;font-size:11px}
.pvgrid th,.pvgrid td{border:1px solid #EAEEF5;padding:5px 4px;text-align:center;color:#556070}
.pvgrid td:first-child,.pvgrid th:first-child{text-align:left;font-weight:700;min-width:110px}
.pvgrid .rd{display:inline-block;width:13px;height:13px;border:2px solid #C7D0DE;border-radius:50%}
.pvbtn{width:100%;height:40px;border:0;border-radius:9px;background:#2F6BFF;color:#fff;
font:inherit;font-size:13px;font-weight:800;margin-top:12px;cursor:default}
.pvmust{font-size:10.5px;color:#8794AA;text-align:center;margin-top:8px}
.wspf{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;justify-content:center}
/* ══════════ ④ Export ══════════ */
.xgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:13px;align-items:start}
@media(max-width:1180px){.xgrid{grid-template-columns:1fr}}
.xside{background:#fff;border:1px solid #E1E6EF;border-radius:12px;padding:12px;position:sticky;top:12px}
@media(max-width:1180px){.xside{position:static}}
.xlang{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#8794AA}
.xl{height:28px;padding:0 10px;border:1px solid #E1E6EF;border-radius:7px;background:#fff;
font:inherit;font-size:12px;font-weight:800;color:#556070;cursor:pointer}
.xl.on{background:#0B1220;border-color:#0B1220;color:#fff}
.xck{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:#556070}
.xck input{width:15px;height:15px;accent-color:#2F6BFF}
.xhint{font-size:11.5px;font-weight:700;color:#8794AA}
.xpaper{background:#fff;border:1px solid #E1E6EF;border-radius:10px;padding:34px 38px;
max-height:74vh;overflow-y:auto;font-size:13px;line-height:1.65;color:#111}
@media(max-width:640px){.xpaper{padding:20px 18px}}
.xpaper .xtitle{font-size:19px;font-weight:900;text-align:center;margin:0 0 16px;
padding-bottom:10px;border-bottom:2px solid #111;letter-spacing:-.5px}
.xpaper .xmeta{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:11.5px}
.xpaper .xmeta td{border:1px solid #CFD6E2;padding:5px 9px}
.xpaper .xmeta td:nth-child(odd){background:#F1F4F9;font-weight:800;width:16%;white-space:nowrap}
.xpaper .xobj{border:1px solid #CFD6E2;background:#FAFBFD;padding:9px 11px;margin-bottom:10px;font-size:12px}
.xpaper .xsec{font-size:13px;font-weight:900;margin:20px 0 10px;padding:6px 10px;
background:#222;color:#fff;border-radius:4px}
.xpaper .xq{margin:0 0 15px;padding-bottom:11px;border-bottom:1px dotted #CFD6E2}
.xpaper .xqh{font-size:12px;margin-bottom:4px}
.xpaper .xty{font-weight:900;color:#0033AA;font-size:10.5px}
.xpaper .xkey{color:#94A3B8;font-size:10.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
.xpaper .xqt{font-weight:800;margin:4px 0 6px;line-height:1.6}
.xpaper .xopts div{margin:3px 0 3px 16px;font-size:12.5px}
.xpaper .xopen{margin:5px 0 5px 16px;color:#8794AA;border-bottom:1px solid #CFD6E2;padding-bottom:16px}
.xpaper .xlg{font-size:11px;color:#C0392B;font-weight:800;margin:3px 0}
.xpaper .xlg.skip{margin-left:16px}
.xpaper .xgridt{border-collapse:collapse;margin:5px 0 5px 16px;font-size:11px}
.xpaper .xgridt th,.xpaper .xgridt td{border:1px solid #CFD6E2;padding:4px 7px;text-align:center}
.xpaper .xgridt td:first-child{text-align:left;min-width:160px}
.xpaper .xsrc{font-size:10.5px;color:#94A3B8;margin-top:6px}
.xpg{font-size:11.5px;font-weight:800;color:#556070;min-width:48px;text-align:center}
.xinfo{font-size:11.5px;color:#8794AA;line-height:1.7;margin-top:10px;text-align:center}
/* ══════════ 📚 라이브러리 · 📤 업로드 ══════════ */
.lay3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:13px}
@media(max-width:900px){.lay3{grid-template-columns:1fr}}
.lcard{background:#0B1220;color:#D8E3F5;border-radius:12px;padding:15px 17px}
.lcard b{display:block;font-size:11px;font-weight:900;color:#6E8FD6;letter-spacing:.4px}
.lcard i{display:block;font-style:normal;font-size:13.5px;font-weight:900;color:#fff;margin:2px 0 7px;
letter-spacing:-.3px}
.lcard span{display:block;font-size:12px;line-height:1.65}
.lcard u{display:block;text-decoration:none;margin-top:9px;padding-top:8px;
border-top:1px solid rgba(255,255,255,.13);font-size:10.5px;font-weight:800;color:#8FA6C8;
font-family:ui-monospace,Menlo,Consolas,monospace}
.ldocs{display:flex;flex-direction:column;gap:7px}
.ldoc{display:flex;align-items:center;gap:12px;border:1px solid #E1E6EF;border-radius:10px;
padding:11px 13px;background:#fff;cursor:pointer;transition:.12s}
.ldoc:hover{border-color:#C3D3F0;background:#FAFCFF}
.ldoc.on{border-color:#2F6BFF;background:#F5F9FF;box-shadow:0 0 0 2px rgba(47,107,255,.1)}
.ldoc .ic{flex:none;font-size:22px}
.ldoc .tx{flex:1;min-width:0}
.ldoc .tx b{display:block;font-size:13px;font-weight:800;margin-bottom:1px}
.ldoc .tx span{display:block;font-size:11px;color:#94A3B8;
font-family:ui-monospace,Menlo,Consolas,monospace}
.ldoc .tx i{display:block;font-style:normal;font-size:11.5px;color:#8794AA;margin-top:3px}
.ldoc .n{flex:none;text-align:center;font-size:18px;font-weight:900;color:#2F6BFF;line-height:1.1}
.ldoc .n small{display:block;font-size:10px;font-weight:800;color:#94A3B8}
.lsearch{height:32px;border:1px solid #E1E6EF;border-radius:8px;padding:0 11px;font:inherit;
font-size:12.5px;width:190px;background:#fff}
.lsearch:focus{outline:0;border-color:#2F6BFF;box-shadow:0 0 0 3px rgba(47,107,255,.13)}
.svsec select{height:32px;border:1px solid #E1E6EF;border-radius:8px;font:inherit;font-size:12.5px;
font-weight:700;background:#fff;padding:0 8px;color:#0F172A}
.lq{border:1px solid #EAEEF5;border-radius:10px;padding:11px 13px;margin-bottom:6px;background:#FCFDFE}
.lqh{display:flex;align-items:flex-start;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.lqid{flex:none;font-size:10.5px;font-weight:900;color:#94A3B8;
font-family:ui-monospace,Menlo,Consolas,monospace;background:#F1F4F9;border-radius:4px;padding:2px 5px}
.lqt{flex:1;min-width:180px;font-size:13px;font-weight:800;line-height:1.55}
.lqo{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.lqo span{font-size:11.5px;color:#556070;background:#fff;border:1px solid #E7EBF2;
border-radius:5px;padding:2px 7px}
.lqo .mo{color:#94A3B8;background:#F4F6FA;border-style:dashed}
.lqf{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ltags{display:flex;flex-wrap:wrap;gap:3px}
.ltags i{font-style:normal;font-size:10.5px;color:#8794AA}
.updrop{border:2px dashed #C7D3E6;border-radius:14px;padding:38px 20px;text-align:center;
cursor:pointer;transition:.15s;background:#FBFCFE}
.updrop:hover,.updrop.over{border-color:#2F6BFF;background:#F5F9FF}
.updrop .ic{font-size:36px;margin-bottom:9px}
.updrop b{display:block;font-size:14.5px;font-weight:900;margin-bottom:5px;letter-spacing:-.3px}
.updrop span{display:block;font-size:12px;color:#8794AA}
.upsteps{margin-top:13px}
.upstep{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #E1E6EF;
border-radius:9px;margin-bottom:6px;font-size:12.5px;background:#fff}
.upstep b{flex:none;min-width:70px;font-size:11px;font-weight:900;color:#2F6BFF;letter-spacing:.4px}
.upstep span{flex:1;color:#556070}
.upstep::after{content:'';flex:none;width:15px;height:15px;border-radius:50%;
border:2px solid #D3DCEA;border-top-color:transparent;animation:svspin .7s linear infinite}
.upstep.done::after{border-color:#12B76A;background:#12B76A;animation:none;
box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #12B76A}
/* ══════════ 📖 이용 안내 ══════════ */
.mvp{display:flex;flex-direction:column;gap:7px}
.mvpr{display:flex;align-items:flex-start;gap:13px;border:1px solid #E1E6EF;border-radius:11px;
padding:13px 15px;background:#fff}
.mvpr.ok{border-left:4px solid #12B76A}
.mvpr.todo{border-left:4px solid #F59E0B;background:#FFFCF5}
.mvpr .no{flex:none;width:26px;height:26px;border-radius:7px;background:#0B1220;color:#fff;
font-size:12.5px;font-weight:900;display:grid;place-items:center}
.mvpr .tx{flex:1;min-width:0}
.mvpr .tx b{display:block;font-size:13.5px;font-weight:900;letter-spacing:-.3px}
.mvpr .tx .wh{display:block;font-size:11.5px;font-weight:800;color:#2F6BFF;margin:2px 0 5px}
.mvpr .tx .ds{display:block;font-size:12.5px;color:#556070;line-height:1.7}
.mvpr .st{flex:none;font-size:11px;font-weight:900;border-radius:6px;padding:3px 8px;
background:#E9FBF1;color:#0F8A4F;white-space:nowrap}
.mvpr.todo .st{background:#FFF6E6;color:#B4740A}
@media(max-width:640px){.mvpr{flex-wrap:wrap}.mvpr .st{order:3}}
.difft{width:100%;border-collapse:collapse;font-size:12.5px}
.difft th,.difft td{border:1px solid #EAEEF5;padding:9px 11px;text-align:left;line-height:1.6;
vertical-align:top}
.difft th{background:#F1F4F9;font-weight:900;font-size:12px}
.difft td:first-child{font-weight:800;color:#556070;white-space:nowrap;background:#FBFCFE}
/* Brief 03 줄 — 제품군 · 국가 · 조사유형 · LOI 를 한 줄로 (진백 2026-09-11) */
.svf4{display:grid;grid-template-columns:1.5fr 1.1fr 1.4fr .95fr;gap:12px;align-items:start}
@media(max-width:1500px){.svf4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svf4{grid-template-columns:1fr}}
.svf4>div{min-width:0}
.svf4 label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 「예시 채우기」 — 시연용 버튼이라 눈에 띄게 (진백 2026-09-11).
색은 aigrade 가 「운영」 배지에 쓰는 골드(#E8B44A)와 같은 계열로 맞췄다. */
.svb.gold{background:#E8B44A;border-color:#DBA52F;color:#3D2B05}
.svb.gold:hover{background:#F0C264;border-color:#C9942A}
.svb.gold::before{content:'✦';font-size:12px;margin-right:-1px}
/* 업로드 화면 — 예제 설문지 내려받기 (진백 2026-09-11) */
.upsample{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:13px;
padding:14px 16px;background:#FFFBF2;border:1px solid #F2DFB4;border-radius:11px}
.upsample .tx{flex:1;min-width:200px}
.upsample .tx b{display:block;font-size:13px;font-weight:900;color:#5A4210;margin-bottom:3px}
.upsample .tx span{display:block;font-size:12px;color:#8A6A22;line-height:1.6}
/* AI 생성 결과 표시 (2026-09-11) */
.svst.ai b{color:#7C3AED}
.svnote2{background:#F5F3FF;border:1px solid #DDD6FE;border-radius:12px;padding:13px 16px;
margin-bottom:13px;font-size:12.5px;color:#4C1D95;line-height:1.75}
.svnote2 b{display:block;font-weight:900;margin-bottom:4px;font-size:12px;color:#6D28D9}
.svstep.wait span{color:#7C3AED;font-weight:700}
/* 📁 프로젝트 목록 (2026-09-11) */
.pjs{display:flex;flex-direction:column;gap:8px}
.pj{display:flex;align-items:center;gap:14px;border:1px solid #E1E6EF;border-radius:11px;
padding:13px 15px;background:#fff;flex-wrap:wrap}
.pj:hover{border-color:#C3D3F0;background:#FAFCFF}
.pj.v{background:#FBFCFE}
.pj .tx{flex:1;min-width:200px}
.pj .tx b{display:block;font-size:14px;font-weight:900;letter-spacing:-.3px}
.pj .tx .mt{display:block;font-size:11.5px;color:#8794AA;margin:2px 0 4px}
.pj .tx .ds{display:block;font-size:12.5px;color:#556070;line-height:1.6}
.pj .nums{flex:none;display:flex;gap:14px}
.pj .nums i{font-style:normal;text-align:center;font-size:17px;font-weight:900;color:#2F6BFF;line-height:1.1}
.pj .nums i small{display:block;font-size:10px;font-weight:800;color:#94A3B8}
.pj .act{flex:none;display:flex;align-items:center;gap:6px}
.pj .act .at{font-size:11px;color:#94A3B8;margin-right:4px}
@media(max-width:760px){.pj .act{width:100%;justify-content:flex-end}}
/* ── 🗂 설문 자산 대장 (p7) — 앱 라이트 톤에 맞춘다 ─────────────── */
.bkkpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.bkkpi div{background:#fff;border:1px solid #e3e8f0;border-radius:12px;padding:14px 16px}
.bkkpi b{display:block;font-size:22px;font-weight:900;color:#1b2a4a;letter-spacing:-.5px}
.bkkpi span{font-size:11.5px;color:#7a89a6}
.bktiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bkt{background:#fff;border:1px solid #e3e8f0;border-radius:14px;padding:18px 18px 16px;cursor:pointer;transition:.12s}
.bkt:hover{border-color:#2f6bff;box-shadow:0 6px 18px rgba(31,44,76,.08);transform:translateY(-2px)}
.bkt .tn{font-size:30px;font-weight:900;color:#2f6bff;letter-spacing:-1.2px;line-height:1.1}
.bkt .tn em{font-size:13px;font-style:normal;color:#8394b2;font-weight:800;margin-left:4px}
.bkt .tk{font-size:15.5px;font-weight:900;color:#1b2a4a;margin-top:7px}
.bkt .te{font-size:11.5px;color:#93a1bb;font-weight:700;margin-top:1px}
.bkt .td{font-size:12.5px;color:#66748f;margin-top:7px;line-height:1.6}
.bkt .tbar{height:4px;background:#edf1f7;border-radius:3px;margin-top:11px;overflow:hidden}
.bkt .tbar i{display:block;height:100%;background:linear-gradient(90deg,#2f6bff,#8bb0ff)}
.bkrow{display:grid;grid-template-columns:92px 1fr 120px;gap:12px;padding:12px 6px;
border-bottom:1px solid #eef1f6;cursor:pointer;align-items:start}
.bkrow:last-child{border-bottom:0}
.bkrow:hover{background:#f6f9ff}
.bkrow .no{font-size:12px;font-weight:900;color:#2f6bff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkrow .q{font-size:13.5px;color:#26324c;line-height:1.55}
.bkrow .q small{display:block;font-size:11px;color:#93a1bb;margin-top:2px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.bkrow .m{text-align:right;font-size:11px;color:#7a89a6;white-space:nowrap}
.bkg{display:inline-block;font-style:normal;padding:2px 7px;border-radius:6px;font-size:10.5px;
font-weight:800;background:#eef3ff;color:#2f6bff;margin-left:4px}
.bkpg{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.bkpg button{height:33px;min-width:33px;padding:0 10px;border:1px solid #e3e8f0;border-radius:8px;
background:#fff;color:#26324c;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.bkpg button.on{background:#2f6bff;color:#fff;border-color:#2f6bff}
.bkdw{position:fixed;inset:0;background:rgba(18,26,44,.45);z-index:90;display:none}
.bkdw.on{display:block}
.bkdw .pane_{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:#fff;
overflow-y:auto;padding:24px 26px 60px;box-shadow:-8px 0 30px rgba(18,26,44,.16)}
.bkdw .x{position:absolute;top:14px;right:18px;font-size:24px;color:#93a1bb;cursor:pointer;line-height:1}
.bkh{font-size:12px;font-weight:900;color:#2f6bff;letter-spacing:.3px}
.bkq{font-size:17px;font-weight:800;color:#1b2a4a;line-height:1.6;margin:8px 0 14px;white-space:pre-wrap}
.bkb{border:1px solid #e9edf4;border-radius:12px;background:#fafbfe;padding:13px 15px;margin-top:11px}
.bkb .bklb{font-size:11px;font-weight:900;color:#8394b2;letter-spacing:.3px;margin-bottom:7px}
.bkb ol{margin:0 0 0 18px}
.bkb li{font-size:13px;color:#39455f;margin:3px 0;line-height:1.6}
.bkb p{font-size:13px;color:#39455f;line-height:1.7;white-space:pre-wrap}
.bkm{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12.5px}
.bkm dt{color:#8394b2;font-weight:800}
.bkm dd{color:#39455f;word-break:break-all}
@media(max-width:900px){.bktiles{grid-template-columns:1fr 1fr}.bkkpi{grid-template-columns:1fr 1fr}
.bkrow{grid-template-columns:76px 1fr}.bkrow .m{display:none}}
@media(max-width:560px){.bktiles{grid-template-columns:1fr}}
/* ── 📖 운영자 매뉴얼 (p9) ───────────────────────────── */
.man{counter-reset:mh}
.man h3{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:900;color:#1b2a4a;
margin:26px 0 10px;padding-top:20px;border-top:1px solid #eef1f6}
.man h3:first-child{margin-top:0;padding-top:0;border-top:0}
.man h3:before{counter-increment:mh;content:counter(mh);flex:none;width:24px;height:24px;border-radius:7px;
background:#2f6bff;color:#fff;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.man p{font-size:13.5px;color:#46536e;line-height:1.8;margin:6px 0}
.man ul,.man ol{margin:8px 0 8px 20px}
.man li{font-size:13.5px;color:#46536e;line-height:1.8;margin:3px 0}
.man li b{color:#1b2a4a}
.man table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
.man th,.man td{border:1px solid #e6eaf2;padding:9px 11px;text-align:left;vertical-align:top;color:#46536e}
.man th{background:#f5f7fc;color:#1b2a4a;font-weight:800;white-space:nowrap}
.man td b{color:#1b2a4a}
.man .tip{border:1px solid #d8e4ff;background:#f3f7ff;border-radius:11px;padding:13px 15px;margin:12px 0}
.man .tip b{display:block;color:#1b48b0;font-size:12.5px;font-weight:900;margin-bottom:5px}
.man .tip p{margin:0;color:#33456e}
.man .warn{border:1px solid #f6ddb0;background:#fffaf0;border-radius:11px;padding:13px 15px;margin:12px 0}
.man .warn b{display:block;color:#9a6a08;font-size:12.5px;font-weight:900;margin-bottom:5px}
.man .warn p{margin:0;color:#6b5320}
.man code{background:#eef1f7;border-radius:5px;padding:1px 6px;font-size:12.5px;color:#1b2a4a}
.man .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.man .steps div{background:#f7f9fd;border:1px solid #e6eaf2;border-radius:10px;padding:11px 12px}
.man .steps b{display:block;font-size:11px;color:#2f6bff;font-weight:900;margin-bottom:3px}
.man .steps span{font-size:12.5px;color:#46536e;font-weight:700;line-height:1.5}
@media(max-width:900px){.man .steps{grid-template-columns:1fr 1fr}}
/* ── 사이드바 하단 로그인 정보 ───────────────────────── */
.mebox{padding:2px 0}
.mehd{display:flex;align-items:center;gap:8px}
.meav{flex:none;width:30px;height:30px;border-radius:50%;background:#F1A93B;color:#fff;
font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center}
.meav.out{background:rgba(255,255,255,.16)}
.metx{flex:1;min-width:0;line-height:1.3}
.metx b{display:block;font-size:13px;font-weight:800;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.metx b em{font-style:normal;font-weight:600;font-size:11px;color:#8EA3C6;margin-left:5px}
.metx i{display:block;font-style:normal;font-size:11px;color:#8EA3C6;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mebtn{flex:none;display:flex;align-items:center;color:#8EA3C6;text-decoration:none;padding:6px;border-radius:8px;font-size:11px;font-weight:700}
.mebtn:hover{background:rgba(255,255,255,.1)}
.mebtn:hover{color:#fff}
/* ── 본문 하단 정식 푸터 ─────────────────────────────
표기는 칸타 메일 서명(Kantar Korea · Insights Division, SIMPAC Bldg.)을 그대로 따른다 */
.pgfoot{margin:auto 0 0;padding:22px 4px 8px;border-top:1px solid #e6eaf2;text-align:center;
line-height:1.85}
.pgfoot .pf1{font-size:13px;color:#1b2a4a}
.pgfoot .pf1 b{font-weight:900}
.pgfoot .pf2{font-size:12px;color:#7a89a6;margin-top:7px}
.pgfoot .pf2 b{color:#46536e;font-weight:800}
.pgfoot .pf3{font-size:11.5px;color:#93a1bb;margin-top:5px}
.pgfoot .pf4{font-size:11.5px;color:#7a89a6;margin-top:9px}
.pgfoot .pf4 b{color:#46536e;font-weight:800}
.pgfoot .pf5{font-size:11px;color:#a8b3c9;margin-top:9px}
.pgfoot .pfsep{color:#c7cfdd;margin:0 6px}
@media(max-width:700px){.pgfoot .pf3{display:block;font-size:11.5px}}
/* ══════════════════════════════════════════════════════════════
helper.webrun.kr 전용 — AI 심부름 매칭 (2026-09-12)
위쪽은 survey(=aigrade) 공통 셸 + sv 블록을 그대로 가져온 것. 여기부터 이 사이트 전용.
★ 새 클래스는 hp 접두어 (aigrade SKILL §38)
══════════════════════════════════════════════════════════════ */
.hph3{font-size:14px;font-weight:900;letter-spacing:-.3px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.hpsec{margin-top:18px}
.hpsec>h3{font-size:15px;font-weight:900;letter-spacing:-.3px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.hpsec>h3 .sp{flex:1}
.hpsec .isbadge{background:#EDF3FF;color:#2F6BFF;border-radius:99px;padding:1px 8px;font-size:11.5px;font-weight:800}
.hpol{padding-left:18px;font-size:13px;line-height:1.7;color:#374151}
.hpol li{margin:6px 0}
.hpul{padding-left:16px;font-size:12.8px;line-height:1.7;color:#374151}
.hpul li{margin:5px 0}
code{background:#F1F5F9;border-radius:5px;padding:1px 6px;font-size:12px}
/* 카테고리 칩 · 세그먼트 */
.hpcats{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hpcat{height:34px;padding:0 12px;border:1px solid #E1E6EF;border-radius:9px;background:#fff;color:#374151;
font:inherit;font-size:12.8px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.12s}
.hpcat i{font-style:normal;font-size:14px}
.hpcat:hover{border-color:#C3D3F0;background:#F7FAFF}
.hpcat.on{background:#0B1220;border-color:#0B1220;color:#fff}
.hpcat.sm{height:29px;padding:0 10px;font-size:12px}
.hpseg2{display:inline-flex;border:1px solid #E1E6EF;border-radius:9px;overflow:hidden;background:#fff}
.hpseg{height:36px;padding:0 13px;border:0;border-left:1px solid #E1E6EF;background:#fff;color:#374151;font:inherit;font-size:12.8px;font-weight:800;cursor:pointer}
.hpseg:first-child{border-left:0}
.hpseg.on{background:#2F6BFF;color:#fff}
.frm select{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 9px;font:inherit;font-size:13px;background:#fff}
/* 수수료 미리보기 */
.hpfee{margin-top:8px}
.hpfeerow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;padding:6px 0;border-top:1px solid #EEF1F6}
.hpfeerow:first-child{border-top:0}
.hpfeerow b{font-size:15px;font-weight:900;letter-spacing:-.4px}
.hpfeerow.sub{padding:0 0 6px;border-top:0;font-size:11.5px;color:#6B7280}
/* AI 시세 */
.hpaibox{margin-top:8px}
.hpaiwait{background:#EDF3FF;border:1px dashed #A8C6FF;border-radius:10px;padding:14px;font-size:12.5px;color:#2F6BFF;font-weight:700}
.hpai3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:640px){.hpai3{grid-template-columns:1fr}}
.hpaip{border:1px solid #E1E6EF;border-radius:11px;background:#fff;padding:11px 10px;text-align:left;font:inherit;cursor:pointer;transition:.12s}
.hpaip span{display:block;font-size:11.5px;font-weight:800;color:#6B7280}
.hpaip b{display:block;font-size:19px;font-weight:900;letter-spacing:-.6px;margin:2px 0}
.hpaip i{display:block;font-style:normal;font-size:11px;color:#8794AA;line-height:1.4}
.hpaip.mid{border-color:#2F6BFF;background:#F4F8FF}
.hpaip:hover{border-color:#2F6BFF}
.hpaip.sel{background:#0B1220;border-color:#0B1220;color:#fff}
.hpaip.sel span,.hpaip.sel i{color:#B4C4E0}
.hpaireason{margin-top:8px;font-size:12.5px;color:#374151;line-height:1.65}
.hpaitips{margin:6px 0 0;padding-left:16px;font-size:12px;color:#556070;line-height:1.6}
/* 보드 필터 */
.hpfrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.hpfrow select{height:36px;border:1px solid #E1E6EF;border-radius:9px;padding:0 9px;font:inherit;font-size:12.8px;background:#fff}
.hploc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #E1E6EF;border-radius:9px;padding:0 8px 0 12px;height:36px}
.hploc>b{font-size:12.8px;white-space:nowrap}
.hploc select{border:0;height:32px;padding:0 4px;font:inherit;font-size:12.5px;color:#2F6BFF;font-weight:800;background:transparent;max-width:150px}
.hploc .svb{height:28px;padding:0 9px;font-size:11.5px}
.hpcats{margin-bottom:12px}
/* 의뢰 카드 */
.hplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.hpjob{background:#fff;border:1px solid #E1E6EF;border-radius:12px;padding:14px 15px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;gap:6px}
.hpjob:hover{border-color:#2F6BFF;box-shadow:0 4px 18px rgba(47,107,255,.09);transform:translateY(-1px)}
.hpjob.off{opacity:.62}
.hpjhd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hpjhd .sp{flex:1}
.hpjcat{font-size:12px;font-weight:900;color:#0B1220}
.hpjdist{font-size:12px;font-weight:800;color:#2F6BFF;white-space:nowrap}
.hpjttl{font-size:15px;font-weight:900;letter-spacing:-.4px;line-height:1.4}
.hpjdet{font-size:12.5px;color:#556070;line-height:1.55}
.hpjft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:12px}
.hpjft .sp{flex:1}
.hpjamt{font-size:17px;font-weight:900;letter-spacing:-.5px;color:#0B1220}
.hpjbids{font-size:12px;font-weight:800;color:#B45309}
.chip{white-space:nowrap}
/* 모달 */
.hpmask{position:fixed;inset:0;z-index:260;background:rgba(11,18,32,.55);display:none;align-items:center;justify-content:center;padding:14px}
.hpmask.on{display:flex}
.hpmodal{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:14px}
.hpm{padding:0}
.hpmh{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid #E1E6EF;position:sticky;top:0;background:#fff;z-index:2}
.hpmh b{font-size:14.5px}
.hpmh .sp{flex:1}
.hpmx{width:32px;height:32px;border:0;background:#F1F5F9;border-radius:9px;font-size:20px;cursor:pointer}
.hpmc{padding:16px 18px 18px}
.hpmttl{font-size:18px;font-weight:900;letter-spacing:-.5px;margin:8px 0 6px;line-height:1.4}
.hpmdet{font-size:13.5px;color:#374151;line-height:1.7;background:#F8FAFC;border-radius:10px;padding:11px 13px}
.hpmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:#556070;margin:10px 0}
.hpamtbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 14px}
.hpamtbox>div{background:#fff;border:1px solid #E1E6EF;border-radius:10px;padding:10px 12px}
.hpamtbox span{display:block;font-size:11.5px;color:#6B7280;font-weight:700}
.hpamtbox b{display:block;font-size:18px;font-weight:900;letter-spacing:-.5px}
.hpamtbox i{display:block;font-style:normal;font-size:11px;color:#8794AA}
.hpbids>b{font-size:13px;display:block}
.hpbid{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #EEF1F6}
.hpbid.acc{background:#F0FDF4;margin:0 -8px;padding:9px 8px;border-radius:8px;border-top:0}
.hpbid.mine .hpbn b{color:#2F6BFF}
.meav.sm{width:28px;height:28px;font-size:12px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#0B1220;color:#fff;font-weight:900}
.hpbn{flex:1;min-width:0}
.hpbn b{display:block;font-size:13px}
.hpbn i{display:block;font-style:normal;font-size:11.5px;color:#6B7280}
.hpbn em{display:block;font-style:normal;font-size:12px;color:#374151;margin-top:2px}
.hpba{text-align:right;white-space:nowrap}
.hpba b{display:block;font-size:15px;font-weight:900;letter-spacing:-.4px}
.hpba i{display:block;font-style:normal;font-size:11px;color:#8794AA}
.hpbidbox{margin-top:14px;border:1px solid #D7E4FF;background:#F4F8FF;border-radius:12px;padding:14px 15px}
.hpbidbox>b{font-size:13.5px;display:block;margin-bottom:8px}
.hpbidbtns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.hpbidbtns .svb{height:42px;font-size:14px}
.hpbidbox .svfoot{margin-top:12px;padding-top:10px;border-top-color:#D7E4FF}
/* 내 의뢰 */
.hpmine{padding:14px 16px}
.hpmine+.hpmine{margin-top:10px}
.svb.sm{height:30px;padding:0 11px;font-size:12px}
.kpi .k .v small{font-size:12px;font-weight:800;color:#6B7280;margin-left:2px}
/* 표 */
.hptbl{width:100%;border-collapse:collapse;font-size:12.5px}
.hptbl th{background:#F8FAFC;text-align:left;font-weight:800;color:#556070;padding:9px 11px;border-bottom:1px solid #E1E6EF;white-space:nowrap}
.hptbl td{padding:9px 11px;border-bottom:1px solid #EEF1F6;vertical-align:top}
.hptbl.hpsum td{font-size:12px;line-height:1.5}
.hptbl tr:last-child td{border-bottom:0}
/* 수수료 정책 · 시뮬 */
.hppol{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.hppol>div{border:1px solid #E1E6EF;border-radius:11px;padding:12px 13px;background:#fff}
.hppol span{display:block;font-size:11.5px;color:#6B7280;font-weight:700}
.hppol b{display:block;font-size:20px;font-weight:900;letter-spacing:-.6px;margin:2px 0}
.hppol i{display:block;font-style:normal;font-size:11px;color:#8794AA;line-height:1.4}
.hpsimrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.hpsimrow label{font-size:12.5px;font-weight:800;color:#374151}
.hpsimrow input{width:130px;height:36px;border:1px solid #E1E6EF;border-radius:9px;padding:0 10px;font:inherit;font-size:13.5px;font-weight:800}
.hpcmp{margin-top:8px}
.hpcmpr,.hpbarrow{display:grid;grid-template-columns:230px 1fr 90px 110px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #EEF1F6;font-size:12.5px}
.hpbarrow{grid-template-columns:130px 1fr 60px 110px}
.hpcmpr:first-child,.hpbarrow:first-child{border-top:0}
.hpcmpr.ours{background:#F4F8FF;margin:0 -8px;padding:7px 8px;border-radius:8px;border-top:0}
.hpcmpr.ours .hpcmpn{color:#2F6BFF;font-weight:900}
.hpcmpb{height:10px;background:#E9EDF5;border-radius:99px;overflow:hidden}
.hpcmpb i{display:block;height:100%;background:linear-gradient(90deg,#2F6BFF,#5B8CFF);border-radius:99px}
.hpcmpr.ours .hpcmpb i{background:linear-gradient(90deg,#12B76A,#3DDC97)}
.hpcmpr b,.hpbarrow b{text-align:right;font-weight:900}
.hpcmpr em,.hpbarrow em{font-style:normal;font-size:11.5px;color:#6B7280;text-align:right}
@media(max-width:700px){.hpcmpr,.hpbarrow{grid-template-columns:1fr 70px;}.hpcmpb{grid-column:1/-1}.hpcmpr em,.hpbarrow em{grid-column:1/-1;text-align:left}}
/* 리포트 */
.hprpt{padding:0;margin-top:10px}
.hprpt summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;cursor:pointer;list-style:none;font-size:13.5px}
.hprpt summary::-webkit-details-marker{display:none}
.hprpt summary::before{content:'▸';color:#8794AA;font-size:12px}
.hprpt[open] summary::before{content:'▾'}
.hprpt summary .muted{font-size:12px}
.hpdl{display:grid;grid-template-columns:90px 1fr;gap:6px 12px;padding:4px 16px 16px;font-size:12.8px;line-height:1.65}
.hpdl dt{font-weight:800;color:#556070}
.hpdl dd{margin:0;color:#374151}
.hpdl a{color:#2F6BFF;text-decoration:underline}
@media(max-width:600px){.hpdl{grid-template-columns:1fr}.hpdl dt{margin-top:4px}}
/* 포지셔닝 */
.hppos{background:#F8FAFC;border-radius:11px;padding:12px;margin-bottom:10px}
.hpposax{font-size:11px;color:#6B7280;text-align:center;font-weight:700;margin-bottom:8px}
.hpposrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.hpposi{background:#fff;border:1px solid #E1E6EF;border-radius:10px;padding:10px 8px;text-align:center;font-size:13px;font-weight:900}
.hpposi i{display:block;font-style:normal;font-size:11px;font-weight:700;color:#6B7280;margin-top:3px}
.hpposi.us{background:#0B1220;color:#fff;border-color:#0B1220}
.hpposi.us i{color:#B4C4E0}
@media(max-width:560px){.hpposrow{grid-template-columns:1fr}}
.svb.gold{background:#FFF6E0;border-color:#F1C84E}
/* [교정] 2026-09-12 보드 헤더 단순화 — 한 줄 필터 + 가로 스크롤 카테고리 */
.hploc{padding:0 6px 0 10px;gap:4px}
.hploc>span{font-size:13px}
.hploc select{max-width:190px}
.hpsel{height:36px;border:1px solid #E1E6EF;border-radius:9px;padding:0 8px;font:inherit;font-size:12.8px;font-weight:800;background:#fff;color:#374151}
.hpico{width:36px;height:36px;border:1px solid #E1E6EF;border-radius:9px;background:#fff;font-size:15px;cursor:pointer;padding:0}
.hpico.on{background:#0B1220;border-color:#0B1220;color:#fff}
.hpmore{display:none;gap:8px}
.hpmore.on{display:inline-flex}
@media(min-width:900px){.hpmore{display:inline-flex}#b_more{display:none}}
.hpcats.hpscroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none;margin:0 -2px 12px}
.hpcats.hpscroll::-webkit-scrollbar{display:none}
.hpcats.hpscroll .hpcat{flex:none}
@media(max-width:600px){
#p2>.sub{display:none}
#p2>h2{margin-bottom:10px!important}
.hploc select{max-width:150px}
}
/* 모바일에서 ⚙ 가 줄바꿈되던 것 — 위치 셀렉트가 줄어들게 */
.hpfrow{flex-wrap:nowrap}
.hploc{flex:1 1 auto;min-width:0}
.hploc select{width:100%;max-width:none;min-width:0;text-overflow:ellipsis}
@media(min-width:900px){.hploc{flex:0 0 auto}.hploc select{width:auto;max-width:190px}}
.hploc{flex-wrap:nowrap}.hploc select{flex:1 1 auto}
/* [교정] 진백 2026-09-12 "모바일에서 심플하게" — 의뢰 등록(p1) 모바일 압축 */
@media(max-width:600px){
#p1>.sub,#p3>.sub,#p0>.sub,#p4>.sub,#p5>.sub,#p6>.sub,#p9>.sub{display:none}
.pane>h2{margin-bottom:10px!important}
#p1 .card{padding:14px 13px}
#p1 .frm label{margin:12px 0 5px;font-size:12.5px}
#p1 .frm label>span[style]{display:none} /* 라벨 옆 회색 설명 */
#p_cathint{display:none}
#p_cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none;margin:0 -13px;padding-left:13px;padding-right:13px}
#p_cats::-webkit-scrollbar{display:none}
#p_cats .hpcat{flex:none;height:32px;padding:0 11px;font-size:12.5px}
#p_detail{min-height:96px}
.svf4{grid-template-columns:1fr 1fr;gap:8px}
#p_gps{height:28px!important;font-size:11.5px!important}
#p_gpsname{display:none}
.svside .svnote,.svside .svinfo{display:none} /* 우측 안내 박스 */
.svside .card{padding:12px 13px}
.svfoot{margin-top:14px;padding-top:12px;gap:6px}
#p_reset,#p_save,#p_saved{display:none}
#p_sample{height:36px;padding:0 11px;font-size:12.5px}
#p_go{flex:1;height:44px;font-size:14.5px;justify-content:center}
.hpai3{gap:6px}
.hpaip{padding:9px 10px;display:flex;align-items:center;gap:8px}
.hpaip span{min-width:52px}.hpaip b{font-size:16px;margin:0}.hpaip i{flex:1;text-align:right}
}
@media(max-width:1180px){.svgrid{grid-template-columns:minmax(0,1fr)}.svgrid>*{min-width:0}}#p_cats{min-width:0}
/* 손님 안내 카드 (p3) — 빈 화면 대신 버튼이 있는 카드 */
.hpguest{max-width:460px;padding:22px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.hpguest>b{font-size:16px;letter-spacing:-.4px}
.hpguest p{font-size:13px;color:#556070;line-height:1.7;margin:0}
.hpguest .svb{width:100%;justify-content:center;height:44px;font-size:14px}
.hpguest .muted{font-size:12px}
@media(max-width:600px){.svsoon{padding:28px 14px;font-size:13.5px}}
/* ── 데모 계정 목록 (p9) ── */
.hpacct{margin-top:8px;border:1px solid #E1E6EF;border-radius:10px;overflow:hidden}
.hpacctr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border-top:1px solid #EEF1F6;font-size:12.5px}
.hpacctr:first-child{border-top:0}
.hpacctr code{font-size:12.5px}
.hpacctr span{color:#556070}
/* ══ 모바일 전체 정리 (2026-09-12 진백 "전체 모양을 깔끔하게") ══ */
.hptbl td,.hptbl th{white-space:nowrap}
.hptbl td.wrap{white-space:normal}
.card:has(> .hptbl){overflow-x:auto}
@media(max-width:600px){
main{padding:12px 12px 20px}
.card{padding:14px 13px;border-radius:11px}
.kpi{grid-template-columns:1fr 1fr;gap:8px}
.k{padding:11px 12px}.k .v{font-size:20px}.k .t{font-size:11.5px}.k .d{font-size:11px}
.two{grid-template-columns:1fr;gap:10px}
.hph3{font-size:13.5px}
.hpsec{margin-top:14px}.hpsec>h3{font-size:14px}
.hpsimrow{gap:6px}.hpsimrow label{width:100%;margin-top:4px}.hpsimrow input{width:100%}
.hpsimrow .hpseg2{width:100%;overflow-x:auto}
.hppol{grid-template-columns:1fr 1fr;gap:8px}.hppol>div{padding:10px 11px}.hppol b{font-size:17px}
.hpjttl{font-size:14.5px}.hpjamt{font-size:16px}
.hpmine .hpbid{flex-wrap:wrap}.hpmine .hpbid .hpba{margin-left:auto}.hpmine .hpbid .svb{width:100%;justify-content:center}
.svfoot .svb{height:40px}
/* 모달 → 바텀시트 */
.hpmask{padding:0;align-items:flex-end}
.hpmodal{width:100%;max-height:94vh;border-radius:16px 16px 0 0}
.hpmc{padding:14px 14px 22px}.hpmttl{font-size:16.5px}
.hpamtbox{grid-template-columns:1fr 1fr}
.hpbidbtns .svb{flex:1;font-size:13px;padding:0 8px}
/* 리포트 */
.hprpt summary{padding:11px 12px;font-size:13px}.hprpt summary .muted{width:100%}
.hpdl{padding:2px 12px 12px;font-size:12.3px}
.hpul{padding-left:14px;font-size:12.3px}.hpol{font-size:12.5px}
.svwarn{padding:11px 12px;font-size:12.5px}
/* 푸터 */
.pgfoot{padding:14px 12px;font-size:11px}.pgfoot .pf1{flex-direction:column;gap:2px}.pgfoot .pf2{display:none}
}
/* 모바일 비교 막대 행: 1줄 이름·금액·실수령, 2줄 막대 */
@media(max-width:700px){
.hpcmpr,.hpbarrow{grid-template-columns:1fr auto auto;row-gap:5px;column-gap:8px;padding:8px 0}
.hpcmpr .hpcmpb,.hpbarrow .hpcmpb{grid-column:1/-1;order:9;height:7px}
.hpcmpr em,.hpbarrow em{grid-column:auto;text-align:right;white-space:nowrap}
.hpcmpr b,.hpbarrow b{white-space:nowrap}
.hpcmpn,.hpbarrow>span:first-child{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpcmpr.ours{margin:0;padding:8px 8px}
}
/* 사업자 표기는 모바일에서도 보인다 (2026-09-13) */
@media(max-width:600px){.pgfoot .pf2{display:block;font-size:10.5px;line-height:1.6}}
/* ── 첫 화면 카테고리 이미지 타일 (2026-09-13 진백 "첫 화면에서 이미지로 접근") ── */
.hptiles{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:2px 0 14px}
.hptile{border:1px solid #E1E6EF;border-radius:14px;background:#fff;padding:8px 4px 7px;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:.12s;min-width:0}
.hptile:hover{border-color:#C3D3F0;background:#F7FAFF;transform:translateY(-1px)}
.hptile.on{border-color:#2F6BFF;background:#F4F8FF;box-shadow:0 0 0 2px rgba(47,107,255,.15)}
.hptimg{width:52px;height:52px;border-radius:12px;overflow:hidden;background:#FFFDF7;display:flex;align-items:center;justify-content:center;font-size:26px}
.hptimg img{width:100%;height:100%;object-fit:cover;display:block}
.hptimg.all{background:#0B1220;font-size:24px}
.hptile b{font-size:11.5px;font-weight:800;color:#0F172A;letter-spacing:-.3px;line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hptile.on b{color:#2F6BFF}
@media(max-width:1180px){.hptiles{grid-template-columns:repeat(5,1fr)}}
@media(max-width:600px){
.hptiles{grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
.hptile{padding:7px 2px 6px;border-radius:12px;gap:4px}
.hptimg{width:46px;height:46px;border-radius:11px}
.hptile b{font-size:10.5px}
}
.hptile b.sm{display:none}
@media(max-width:600px){.hptile b.lg{display:none}.hptile b.sm{display:block}}
/* ── 첫 화면 두 모드: 해주세요(의뢰인 홈) / 해줄게요(헬퍼 홈) — 2026-09-13 ── */
.hpmode{display:flex;border-bottom:2px solid #E1E6EF;margin:0 0 14px}
.hpmode button{flex:1;height:44px;border:0;background:transparent;font:inherit;font-size:16px;font-weight:900;color:#8794AA;cursor:pointer;position:relative;letter-spacing:-.4px}
.hpmode button.on{color:#0B1220}
.hpmode button.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;background:#0B1220;border-radius:2px}
@media(min-width:900px){.hpmode{max-width:420px}}
.hpsearch{display:flex;align-items:center;gap:8px;background:#F1F4F9;border-radius:99px;padding:0 16px;height:46px;margin-bottom:14px}
.hpsearch input{flex:1;border:0;background:transparent;font:inherit;font-size:14px;min-width:0;outline:0}
.hptiles.ask{grid-template-columns:repeat(9,1fr);gap:10px}
.hptiles.ask .hptile{border:0;background:transparent;padding:4px 2px}
.hptiles.ask .hptile:hover{transform:translateY(-2px);background:transparent}
.hptiles.ask .hptimg{width:88px;height:88px;border-radius:22px;box-shadow:0 4px 14px rgba(15,23,42,.08)}
.hptiles.ask .hptile b{font-size:13px;white-space:normal}
.hpbanner{display:flex;align-items:center;gap:12px;background:#EAFBE7;border-radius:16px;padding:14px 16px;margin:16px 0 12px}
.hpbtx{flex:1;min-width:0}.hpbtx i{display:block;font-style:normal;font-size:12.5px;color:#4B6B3E;font-weight:700}.hpbtx b{display:block;font-size:19px;font-weight:900;color:#1F7A3E;letter-spacing:-.5px}
.hpsw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:800;color:#374151;white-space:nowrap}
.hpsw input{display:none}
.hpsw i{width:44px;height:26px;border-radius:99px;background:#CBD5E1;position:relative;transition:.15s;flex:none}
.hpsw i::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.hpsw input:checked+i{background:#12B76A}.hpsw input:checked+i::after{left:21px}
.hpsw.big{font-size:14px}.hpsw.big i{width:52px;height:30px}.hpsw.big i::after{width:24px;height:24px}.hpsw.big input:checked+i::after{left:25px}
.hpsw em{font-style:normal;font-size:12px;color:#6B7280;font-weight:700}
.hpcta{width:100%;height:54px;border:0;border-radius:14px;background:#0B1220;color:#fff;font:inherit;font-size:16.5px;font-weight:900;cursor:pointer;letter-spacing:-.4px;margin-bottom:18px}
.hpcta:hover{background:#1a2540}
.hprecent>b{display:block;font-size:14px;font-weight:900;margin-bottom:8px}
.hphb{background:#fff;border:1px solid #E1E6EF;border-radius:14px;padding:12px 14px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.hphb.off{background:#F8FAFC}
.hphbr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hphbc{display:inline-flex;flex-wrap:wrap;gap:5px}
.hptiles.compact{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none;padding-bottom:4px}
.hptiles.compact::-webkit-scrollbar{display:none}
.hptiles.compact .hptile{flex:none;flex-direction:row;padding:5px 10px 5px 6px;border-radius:99px;gap:6px}
.hptiles.compact .hptimg{width:26px;height:26px;border-radius:50%;font-size:14px}
.hptiles.compact .hptile b{font-size:12px}
@media(max-width:1180px){.hptiles.ask{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){
.hptiles.ask{grid-template-columns:repeat(3,1fr);gap:6px 4px}
.hptiles.ask .hptimg{width:78px;height:78px;border-radius:20px}
.hptiles.ask .hptile b{font-size:12.5px}
.hpbanner{padding:12px 13px}.hpbtx b{font-size:16.5px}
.hpmode button{height:42px;font-size:15px}
#p2>.sub{display:none}
}
/* ── 헬퍼 항목별 단가 등록 · 근처 헬퍼 (2026-09-13) ── */
.hphbh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hphbh .sp{flex:1}
.hpofh{margin-top:6px}.hpofh b{display:block;font-size:13.5px}.hpofh .muted{font-size:11.5px}
.hpoffers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.hpof{border:1px solid #E1E6EF;border-radius:12px;padding:8px 10px;background:#F8FAFC}
.hpof.on{background:#fff;border-color:#2F6BFF}
.hpofl{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:800}
.hpofl input{width:16px;height:16px;accent-color:#2F6BFF}
.hpofimg{width:28px;height:28px;border-radius:8px;overflow:hidden;flex:none}.hpofimg img{width:100%;height:100%;object-fit:cover;display:block}
.hpofin{display:none;margin-top:7px;gap:6px}
.hpof.on .hpofin{display:flex;flex-direction:column}
.hpofp{display:flex;align-items:center;gap:6px}.hpofp input{flex:1;height:34px;border:1px solid #E1E6EF;border-radius:8px;padding:0 9px;font:inherit;font-size:13.5px;font-weight:800;min-width:0}
.hpofp span{font-size:12.5px;font-weight:800;color:#374151}
.hpofnote{height:30px;border:1px solid #E1E6EF;border-radius:8px;padding:0 9px;font:inherit;font-size:12px}
.hphelpers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:18px}
.hphc{background:#fff;border:1px solid #E1E6EF;border-radius:12px;padding:11px 12px}
.hphch{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.hphco{display:flex;flex-wrap:wrap;gap:6px}
.hphof{border:1px solid #D7E4FF;background:#F4F8FF;border-radius:99px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:800;color:#0F172A;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.hphof:hover{background:#E6EFFF}.hphof b{color:#2F6BFF}.hphof i{font-style:normal;font-weight:600;color:#6B7280;font-size:11px}
.hptarget{margin:8px 0 2px;background:#FFF8EC;border:1px solid #FFE2AE;border-radius:10px;padding:9px 12px;font-size:12.8px}
.hptarget a{color:#B45309;text-decoration:underline;margin-left:6px}
@media(max-width:600px){.hpoffers{grid-template-columns:1fr 1fr;gap:6px}.hpof{padding:7px 8px}.hpofl{font-size:12px}.hphelpers{grid-template-columns:1fr}}
/* [교정] 진백 "9개 버튼 크기가 같으면" — 카드 높이 통일: 금액칸 항상 표시, OFF 는 흐리게 */
.hpofin{display:flex!important;flex-direction:column;margin-top:7px;gap:6px}
.hpof:not(.on) .hpofin{opacity:.38;pointer-events:none}
.hpof{display:flex;flex-direction:column;min-height:126px}
.hpofl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.hpoffers{grid-template-columns:repeat(3,1fr);gap:5px}.hpof{padding:6px 6px;min-height:118px}.hpofl{gap:5px;font-size:11.5px}.hpofimg{width:24px;height:24px}.hpofp input{height:30px;font-size:12.5px;padding:0 6px}.hpofp span{font-size:11px}.hpofnote{height:26px;font-size:11px;padding:0 6px}}
.hpofnote2{font-size:12.3px;color:#374151;background:#fff;border:1px dashed #C7D9FF;border-radius:9px;padding:8px 10px;margin-bottom:8px;line-height:1.55}
/* 기준가 카드 가로 넘침 수정 — grid 칸 min-width:0, 입력 100% */
.hpoffers>*{min-width:0}
.hpofin,.hpofp,.hpofnote,.hpofp input{min-width:0;width:100%;box-sizing:border-box}
.hpofp{width:100%}.hpofp input{width:auto;flex:1}
.hpofl{min-width:0}.hpofl b{min-width:0}
@media(max-width:600px){.hpoffers{grid-template-columns:1fr 1fr;gap:6px}.hpof{min-height:0}}
/* 반경 피커 */
.hppb{cursor:pointer;white-space:nowrap}
.hppick{padding-bottom:6px}
.hppickl{padding:6px 8px 10px}
.hppicki{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;font:inherit;font-size:15px;font-weight:800;color:#0F172A;padding:13px 12px;border-radius:12px;cursor:pointer;text-align:left}
.hppicki:hover{background:#F4F8FF}
.hppicki.on{background:#F4F8FF;color:#2F6BFF}
.hppicki i{font-style:normal;font-size:12px;color:#8794AA;font-weight:600}
.hppicki em{margin-left:auto;font-style:normal;color:#2F6BFF;font-weight:900}
@media(min-width:601px){.hppick .hppickl{display:grid;grid-template-columns:1fr 1fr}.hpmodal:has(.hppick){width:min(420px,100%)}}
.hpoftitle{height:32px;border:1px solid #F1C84E;border-radius:8px;padding:0 9px;font:inherit;font-size:12.5px;font-weight:800;background:#FFFCF0}
/* 카카오 스타일 버튼 (앱 내 로그인 유도) */
.hpkakao{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:0!important;border-radius:12px;background:#FEE500!important;color:#191919!important;font-weight:900;font-size:14px;text-decoration:none;letter-spacing:-.3px;box-shadow:none}
.hpkakao:hover{background:#F7DC00!important;color:#191919!important}
.hpkakao svg{width:20px;height:20px;flex:none}.hpkakao svg path{fill:#191919}
.hpkakao.sm{height:38px;font-size:13px;padding:0 14px}.hpkakao.sm svg{width:18px;height:18px}
.hpkakao.full{display:flex;width:100%;height:50px;font-size:15px}
.hpkakao.tx{width:100%;height:42px;margin-top:6px}
.hpguest .hpkakao,.hpbidbox .hpkakao{display:flex;width:100%;height:48px;font-size:15px}
.hpguest .hpkakao{align-self:stretch}
/* PC: 홈 화면 폭 제한 — 풀와이드로 늘어지는 버튼·타일 정리 */
@media(min-width:900px){
#p2 .hpmode,#p2 .sub,#b_ask,#b_helpbar,#b_filters,#b_list{max-width:1280px}
.hptiles.ask{grid-template-columns:repeat(10,1fr);gap:10px 6px;max-width:1280px}
.hptiles.ask .hptimg{width:100%;max-width:112px;height:auto;aspect-ratio:1;border-radius:24px}
.hptiles.ask .hptile b{font-size:14px;margin-top:2px}
.hpcta{max-width:1280px;display:block;height:50px;font-size:15.5px}
.hphelpers{grid-template-columns:repeat(3,1fr);max-width:1280px}
#b_ask .hplist{max-width:1280px}
}
.hpkakao.tx{height:40px;font-size:13px;padding:0 10px;gap:6px;white-space:nowrap;margin-top:0}
.hpkakao.tx svg{width:18px;height:18px}
@media(min-width:900px){
.hpbrow{display:flex;align-items:stretch;gap:12px;max-width:1280px;margin:16px 0 18px}
.hpbrow .hpbanner{flex:1;margin:0}
.hpbrow .hpcta{flex:1;max-width:none;height:auto;margin:0}
.hphb.guest{flex-direction:row;align-items:center;gap:6px 16px;flex-wrap:wrap;padding:14px 16px}
.hphb.guest>b{flex:none}
.hphb.guest>.muted{flex:1;min-width:240px}
.hphb.guest>.hpkakao{display:inline-flex;width:auto;flex:none;height:44px;padding:0 22px}
}
/* PC: 푸터를 화면 하단에 고정 */
@media(min-width:900px){
.pgfoot{position:fixed;left:212px;right:0;bottom:0;z-index:5;background:#fff;border-top:1px solid #e6eaf2;padding:10px 16px 10px;margin:0;box-shadow:0 -4px 14px rgba(15,23,42,.04)}
.pgfoot .pf1,.pgfoot .pf2,.pgfoot .pf5{display:inline;margin:0}
.pgfoot .pf1::after,.pgfoot .pf2::after{content:' · ';color:#c7cfdd}
.pgfoot br{display:none}
main{padding-bottom:96px}
}
.hpguide p{margin:0 0 8px;font-size:14px;line-height:1.75;color:#334155}.hpguide p:last-child{margin:0}
ul.hpol{list-style:disc}
.pgfoot .pf3 a{color:#46536e;text-decoration:none}.pgfoot .pf3 a:hover{text-decoration:underline}.pgfoot .pf3 a b{color:#1b2a4a;font-weight:800}
.pgfoot .pf3 a{white-space:nowrap}
/* 홈 3카드: 심부름 요청하기 · 헬퍼로 수익 만들기 · 헬퍼 모드 */
.hpbrow.hp3{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 18px}
.hpbrow.hp3 .hpcta,.hpbrow.hp3 .hpbanner,.hpmodecard{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;min-height:72px;padding:14px 18px;border-radius:16px;border:0;font:inherit;text-align:left;cursor:pointer;margin:0;width:100%;height:auto}
.hpbrow.hp3 .hpcta i,.hpbrow.hp3 .hpbanner i,.hpmct i{display:block;font-style:normal;font-size:12.5px;font-weight:700;opacity:.8}
.hpbrow.hp3 .hpcta b,.hpbrow.hp3 .hpbanner b,.hpmct b{display:block;font-size:18px;font-weight:900;letter-spacing:-.4px}
.hpbrow.hp3 .hpcta{background:#0B1220;color:#fff}.hpbrow.hp3 .hpcta i{color:#B4C4E0}
.hpbrow.hp3 .hpbanner{background:#EAFBE7;color:#1F7A3E}.hpbrow.hp3 .hpbanner i{color:#4B6B3E}.hpbrow.hp3 .hpbanner:hover{background:#DDF6D8}
.hpmodecard{flex-direction:row;align-items:center;justify-content:space-between;background:#fff;border:2px solid #E1E6EF;color:#374151}
.hpmodecard .hpmct b{font-size:14px;color:#6B7280}
.hpmodecard.on{border-color:#12B76A;background:#F0FDF4}.hpmodecard.on .hpmct b{color:#15803D}
.hpmodecard .hpsw input{display:none}
@media(min-width:900px){.hpbrow.hp3{grid-template-columns:1fr 1fr 1fr;max-width:1280px}}
#u_list .u_st{white-space:nowrap}#u_list td{white-space:nowrap}#u_list td:nth-child(4){white-space:normal}
/* p7 사용자 관리 */
#p7box .card{max-width:1280px}
#u_q{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 11px;font:inherit;font-size:13.5px;background:#fff;max-width:420px}
#u_q:focus{outline:2px solid #BFD3FF;border-color:var(--blue)}
#u_list table.ilist{width:auto;min-width:100%}
#u_list th,#u_list td{padding:8px 10px}
#u_list td:nth-child(4){white-space:normal;min-width:120px}
#u_list td:nth-child(2){white-space:normal;min-width:110px}
#u_list select{height:28px;font-size:12px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 4px}
@media(min-width:1100px){.hpoffers{grid-template-columns:repeat(5,1fr)}}
/* p10 자료실 */
#p10box .card{max-width:1280px}
.hpdchk{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin-top:6px}
.hpdci{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.hpdci>i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #CBD5E1;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:13px;color:#fff}
.hpdci.ok{background:#F0FDF4;border-color:#BBF7D0}.hpdci.ok>i{background:#12B76A;border-color:#12B76A}
.hpdci>span{flex:1;min-width:0}.hpdci b{display:block;font-size:13.5px}.hpdci em{display:block;font-style:normal;font-size:11.5px;color:#6B7280}
.hpdform{display:grid;grid-template-columns:140px 1fr 150px 1fr;gap:8px;align-items:center}
.hpdform input,.hpdform select{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit;font-size:13px;background:#fff;min-width:0}
.hpdform input[type=file]{grid-column:1/4;padding:7px 10px}.hpdform .svb{height:38px}
.hpdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:6px}
.hpdoc{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.hpdth{display:flex;align-items:center;justify-content:center;height:150px;background:#F1F4F9;overflow:hidden;text-decoration:none}
.hpdth img{width:100%;height:100%;object-fit:cover;object-position:top}.hpdth span{font-weight:900;font-size:20px;color:#94A3B8}
.hpdmeta{padding:9px 11px;display:flex;flex-direction:column;gap:2px}.hpdmeta b{font-size:13.5px}.hpdmeta em,.hpdmeta i{font-style:normal;font-size:11.5px;color:#6B7280}
.hpdact{display:flex;gap:12px;margin-top:5px;font-size:12px}.hpdact a{color:#2563EB;text-decoration:none;font-weight:700}.hpdact .hpddel{color:#DC2626;margin-left:auto}
@media(max-width:700px){.hpdform{grid-template-columns:1fr 1fr}.hpdform input[type=file]{grid-column:1/3}.hpdgrid{grid-template-columns:1fr 1fr}.hpdth{height:120px}}