:root { --bg:#e8f2fe; --card:#fff; --line:#e1e8f2; --ink:#16213e; --ink2:#6b7590; --navy:#103873; --navy2:#0a3064; --th:#f2f8fe;
  --c-신청:#1065f8; --c-응시:#fc8d27; --c-등록:#04a23d; --c-전환:#7c4ddb; --up:#1065f8; --dn:#e5304f; --y25:#b8c4d6; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:13px/1.45 'Pretendard','Malgun Gothic',system-ui,sans-serif; }
header { background:linear-gradient(90deg,var(--navy),var(--navy2)); color:#fff; padding:12px 22px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
header h1 { font-size:20px; margin:0; font-weight:800; letter-spacing:-.3px; }
header .sub { color:#dbe6fb; font-size:13px; padding-left:14px; border-left:1px solid rgba(255,255,255,.35); }
.chip { background:#fde68a; color:#78350f; border-radius:20px; padding:2px 10px; font-size:11.5px; font-weight:700; }
.filters { margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.filters label { display:flex; flex-direction:column; font-size:11px; color:#dbe6fb; gap:3px; }
.filters select { font:inherit; font-size:12px; padding:5px 8px; border-radius:6px; border:0; min-width:100px; color:var(--ink); }
.filters label.tog { flex-direction:row; color:var(--ink); }
.tog { display:flex; align-items:center; gap:6px; background:#fff; color:var(--ink); padding:6px 12px; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; }
main { padding:16px 22px 30px; display:flex; flex-direction:column; gap:14px; max-width:1600px; margin:0 auto; }
.row { display:grid; gap:14px; }
.r5 { grid-template-columns:repeat(5,1fr); } .r4 { grid-template-columns:repeat(4,1fr); } .r3 { grid-template-columns:1fr 1.4fr 1.2fr; } .r2 { grid-template-columns:1fr 1fr; }
.rC { grid-template-columns:1.25fr .95fr 1.35fr; } .rD { grid-template-columns:1fr 1fr 1fr 1.1fr; }
@media (max-width:1100px) { .r5,.r4,.r3,.r2,.rC,.rD { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .r5,.r4,.r3,.r2,.rC,.rD { grid-template-columns:1fr; } main { padding:12px 16px; } }
.card { background:var(--card); border-radius:12px; border:1px solid #dde8f7; box-shadow:0 2px 6px rgba(16,56,115,.06); padding:14px 16px; min-width:0; }
.card h2 { font-size:15.5px; margin:0 0 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:800; color:var(--ink); }
.card h2 .note { font-size:11px; color:var(--ink2); font-weight:400; }
.sec { font-size:13.5px; font-weight:800; color:var(--navy); margin:4px 0 -4px; }
.kpi { display:flex; gap:12px; align-items:flex-start; position:relative; }
.ico { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:none; }
.kpi .lb { font-weight:800; font-size:14px; }
.kpi > div:nth-child(2) { flex:1; min-width:0; }
.kpi .v { white-space:nowrap; font-size:30px; font-weight:800; line-height:1.15; letter-spacing:-.5px; }
.kpi .v small { font-size:15px; margin-left:2px; }
.kpi .cmp { font-size:11.5px; color:var(--ink2); margin-top:4px; }
.kpi .pr { margin-top:8px; }
.kpi .pi { display:grid; grid-template-columns:76px 1fr; align-items:center; gap:6px; font-size:12px; white-space:nowrap; } .kpi .pi .bar { margin:3px 0; }   /* 전년·올해 = 글자+막대 한 줄 */
.kpi .vr { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }   /* 전년 대비를 숫자 오른쪽으로 → 카드 한 줄 줄임 */
.kpi .vr .cmp { margin-top:0; }
.goal .ico { width:28px; height:28px; } .goal.hq h2 { font-size:18px; } .goal.hq .ico { width:40px; height:40px; }   /* 본사 = 옆 카드 아이콘·제목 크기에 맞춤 */
.up { color:var(--up); font-weight:700; white-space:nowrap; } .dn { color:var(--dn); font-weight:700; white-space:nowrap; } .zero { color:#c0c6d0; }
.goal { display:flex; flex-direction:column; }
.goal .gb { margin-top:auto; }   /* 막대를 아래로 = 옆 카드 전년·올해 막대와 높이 맞춤 */
.goal .bar, .kpi .bar { height:9px; background:#edf1f7; border-radius:5px; overflow:hidden; margin:4px 0 8px; }
.goal .bar i, .kpi .bar i { display:block; height:100%; border-radius:5px; }
.goal .gl, .kpi .gl { display:flex; justify-content:space-between; font-size:12px; }
.goal .tag { font-size:10.5px; padding:1px 7px; border-radius:8px; background:#fef3c7; color:#92400e; font-weight:700; }
table.dt { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.dt th { background:var(--th); color:#334155; font-weight:700; padding:7px 6px; border-bottom:1px solid var(--line); white-space:nowrap; text-align:center; }
.dt th small { font-weight:500; color:var(--ink2); }
.dt td { padding:6px 7px; border-bottom:1px solid #eef2f7; text-align:center; white-space:nowrap; }
.dt tr:last-child td { border-bottom:0; }
.dt td:first-child { font-weight:800; background:#f8fbff; }
.dt tr.tot td { background:#f2f7fd; font-weight:800; }
.dt td.al { text-align:left; }
.dt .s { display:block; font-size:10.5px; font-weight:600; }
.scroll { overflow:auto; }
.hm { border:0 !important; }
.hm td { font-weight:700; border:2px solid #fff !important; padding:8px 4px; }
.hm td:first-child { background:var(--th) !important; }
.fun { display:flex; flex-direction:column; }
.fun .st { display:grid; grid-template-columns:42px 1fr 104px; gap:10px; align-items:center; }
.fun .lane { display:flex; justify-content:center; }
.fun .bx { color:#fff; font-weight:800; font-size:14px; padding:10px 8px; border-radius:6px; white-space:nowrap; overflow:hidden; text-align:center; }
.fun .bx small { font-size:11px; font-weight:600; opacity:.9; }
.fun .pv { font-size:11.5px; color:var(--ink2); background:#eff3f9; border-radius:6px; padding:6px 8px; line-height:1.35; }
.fun .pv b { font-size:12.5px; display:block; }
.fun .cn { display:grid; grid-template-columns:42px 1fr 104px; gap:10px; height:30px; }
.fun .cn > div { position:relative; }
.fun .cn .tz { position:absolute; inset:0; background:#dbe8ff; }
.fun .cn .ar { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#1722a6; font-weight:800; font-size:15px; }
.rk td:nth-child(3) { width:45%; }
.ad .b { height:11px; border-radius:2px; background:linear-gradient(90deg,#4280fc,#90c4fd); }
.rk .b { height:13px; border-radius:2px; background:linear-gradient(90deg,#4280fc,#90c4fd); }
.lg { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--ink2); margin-bottom:4px; }
.lg i { display:inline-block; width:14px; height:3px; vertical-align:middle; margin-right:4px; }
.lg i.dot { width:7px; height:7px; border-radius:50%; }
.tabs { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; margin-left:auto; }
.tabs button { font:inherit; font-size:12px; font-weight:700; border:0; background:#fff; color:var(--ink2); padding:4px 12px; cursor:pointer; }
.tabs button.on { background:var(--navy); color:#fff; }
.mb { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.mb > div { border:1px solid #fbd0d7; background:#fff6f7; border-radius:10px; padding:10px 12px; display:grid; grid-template-columns:40px 1fr; gap:3px 10px; align-content:start; }
.mb > div.r { border-color:#fddcbf; background:#fff8f1; }
.mb .mi { grid-row:span 3; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:#f03655; align-self:start; }
.mb .r .mi { background:#ff8a3d; }
.mb .t { font-size:13px; font-weight:800; } .mb .t b { font-size:24px; margin-left:6px; } .mb .x { font-size:11px; color:var(--ink2); font-weight:500; }
.mb .ch { display:flex; flex-wrap:wrap; gap:4px; } .mb .cc { font-size:11px; background:#fdeced; border-radius:10px; padding:2px 8px; color:#9f1239; } .mb .r .cc { background:#ffeedd; color:#9a3412; } .mb .cc b { margin-left:2px; }
.badge { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:5px; color:#fff; }
.old { color:var(--dn); font-weight:700; }
.cpc h2 .bell { width:26px; height:26px; border-radius:7px; background:#ed5472; display:grid; place-items:center; }
.cp { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cp li { display:grid; grid-template-columns:24px 1fr; gap:9px; }
.cp .n { width:24px; height:24px; border-radius:50%; background:#ed5472; color:#fff; font-weight:800; display:grid; place-items:center; font-size:12px; }
.cp .h { font-weight:800; color:#be123c; } .cp .d { font-size:11.5px; color:var(--ink2); }
.foot { font-size:11px; color:var(--ink2); }
.pgt { display:flex; gap:6px; margin-right:10px; }   /* 본사 페이지 탭 = 필터 줄 맨 앞 */ .pgt button { font:inherit; font-size:12.5px; font-weight:700; border:1px solid rgba(255,255,255,.35); background:transparent; color:#dbe6fb; padding:5px 16px; border-radius:7px; cursor:pointer; }
.pgt button.on { background:#fff; color:var(--navy); border-color:#fff; }
.fl .cp { flex:1; justify-content:space-around; }
circle.hit { fill-opacity:0; cursor:pointer; } circle.hit:hover { fill-opacity:.25; }
.hm [data-tip] { cursor:default; } .barHit { fill:#103873; fill-opacity:0; } .barHit:hover { fill-opacity:.04; }
#tt { position:fixed; z-index:20; pointer-events:none; display:none; background:#0f172a; color:#fff; border-radius:8px; padding:8px 11px; font-size:12px; line-height:1.55; box-shadow:0 4px 14px rgba(0,0,0,.2); }
#tt b { display:block; font-size:12.5px; } #tt i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; }
#tt { max-width:calc(100vw - 16px); } #tt small { display:block; margin-top:4px; color:#cbd5e1; }
.fl { display:flex; flex-direction:column; }   /* 같은 행 카드 높이에 맞춰 그래프·표를 늘림 */
.fit { flex:1; position:relative; min-height:200px; } .fit > svg { position:absolute; inset:0; }
.gradeChart { flex:1; display:flex; min-width:0; width:100%; }
.gradeChart .fit { min-width:0; width:100%; }
.gradeHeat { min-width:0; width:100%; }
.gradeHeat table { width:100%; min-width:0; table-layout:fixed; }
.gradeHeat .hm th, .gradeHeat .hm td { padding:6px 1px; font-size:clamp(7px,.6vw,10px); }
.gradeHeat .hm th:first-child, .gradeHeat .hm td:first-child { width:30px; }
.gradeHeat .hm td { border-width:1px !important; }
.fitT { flex:1; display:flex; flex-direction:column; } .fitT > table { flex:1; }
.fl .fun { flex:1; } .fl .fun .cn { flex:1; min-height:30px; height:auto; }
.sub3 { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; }
.sub3 > * { min-width:0; }
@media (max-width:1100px) { .sub3 { grid-template-columns:1fr; } }
.c2 td.y { color:var(--ink2); } .c2 td:first-child { text-align:left; }
.program .gb { border-left:1px solid #b8c9e0; }

.fitT{min-width:0;overflow-x:auto}.account-actions{display:flex;gap:6px;margin-left:auto}.account-actions a.admin-link{color:#103873;background:#fde68a;border-radius:7px;padding:6px 12px;text-decoration:none;font-weight:700}.account-actions button,.access button{font:inherit;cursor:pointer;border:1px solid #b8c9e0;border-radius:7px;padding:6px 12px;background:#fff;color:#103873}
.access{max-width:420px;margin:12vh auto 0;padding:28px;background:#fff;border-radius:14px;border:1px solid #dde8f7}.access h1{font-size:22px;color:#103873}.access form{display:grid;gap:10px}.access input{font:inherit;padding:10px;border:1px solid #b8c9e0;border-radius:7px}.access button{background:#103873;color:#fff;padding:10px}.access .error{color:#b42338;min-height:20px}.access p{color:#6b7590}.status{max-width:1556px;margin:12px auto;padding:10px 16px;border-radius:8px;background:#fff4d5;color:#6d4a10}.status.error{background:#ffebee;color:#a01932}[hidden]{display:none!important}.account-actions button:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid #fc8d27;outline-offset:2px}