/* 글꼴: Pretendard(SIL OFL 1.1, 사이트 안에 포함 — assets/fonts/OFL.txt). 한글 서브셋 4굵기 */
@font-face { font-family:'Pretendard'; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/Pretendard-Regular.subset.woff2) format('woff2'); }
@font-face { font-family:'Pretendard'; font-weight:500; font-style:normal; font-display:swap; src:url(/assets/fonts/Pretendard-Medium.subset.woff2) format('woff2'); }
@font-face { font-family:'Pretendard'; font-weight:600; font-style:normal; font-display:swap; src:url(/assets/fonts/Pretendard-SemiBold.subset.woff2) format('woff2'); }
@font-face { font-family:'Pretendard'; font-weight:700; font-style:normal; font-display:swap; src:url(/assets/fonts/Pretendard-Bold.subset.woff2) format('woff2'); }
/* 토큰 — 옛 화면(02-style.part)과 같은 값. 이름은 새 코드가 쓰는 것(--card·--sub·--hover)을 유지하고 옛 이름(--surface·--sunk·--brand…)도 둔다 */
:root {
  --bg:#f4f6fa; --card:#fff; --surface:#fff; --sunk:#ecf0f6; --line:#dce2ec; --fg:#1a1f2b; --sub:#47515f; --hover:#f0f3f9; --wait:#ecf0f6;
  --brand:#1F6BFF; --accent:#0B57E3; --accent-fg:#fff; --accent-soft:#e7efff;
  --ok:#2e7d4f; --ok-soft:#e2f2e7; --warn:#93650f; --warn-soft:#f6ecd4; --bad:#b0412e; --bad-soft:#f7e2dc; --info:#3a5a8c; --info-soft:#e2e9f4;
  --lime:#8cc152; --lime-soft:#f1f8e6; --lime-fg:#4d7f1c;
  --font:'Pretendard Variable','Pretendard',-apple-system,'Segoe UI','Malgun Gothic',sans-serif; --mono:ui-monospace,Menlo,Consolas,monospace; --row-h:36px;
  --c0:#2f5bea; --c1:#0f9d8a; --c2:#c2410c; --c3:#7c3aed; --c4:#b45309; --c5:#be185d; --c6:#4d7c0f; --c7:#0369a1;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#131816; --card:#1b2220; --surface:#1b2220; --sunk:#161c1a; --line:#2e3834; --fg:#e5eae7; --sub:#9ba7a2; --hover:#222b28; --wait:#232c29;
    --brand:#4f8dff; --accent:#7aa9ff; --accent-fg:#081633; --accent-soft:#18284a; --ok:#73c995; --ok-soft:#1c3226; --warn:#e2b559; --warn-soft:#352b16; --bad:#ec8a75; --bad-soft:#3a231e; --info:#93b2e6; --info-soft:#1f2a3b; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.55 var(--font); }
h1 { margin:0; font-size:22px; } h2 { margin:0; font-size:20px; } h3 { margin:20px 0 8px; font-size:16px; } h4 { margin:0 0 8px; font-size:14px; } h5 { margin:10px 0 2px; font-size:13px; color:var(--sub); }
.sub { color:var(--sub); margin:2px 0 0; } .muted { color:var(--sub); } .bad { color:var(--bad); } .acct { color:var(--sub); }
.warn { color:var(--bad); margin:0; min-height:1.5em; }
.spacer { flex:1; }
.center { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; }
button { font:inherit; min-height:32px; padding:5px 12px; border-radius:6px; border:1px solid var(--line); background:var(--sunk); color:var(--fg); font-weight:600; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.04); }
button:hover { border-color:var(--accent); background:var(--card); } button:disabled { opacity:.55; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); } button.primary:hover { filter:brightness(1.08); }
button.big { padding:12px 22px; font-size:16px; }
button.ghost { border-color:transparent; background:transparent; padding:4px 8px; min-height:28px; } button.ghost:hover { background:var(--hover); }
button.link { border:0; background:none; padding:0; min-height:0; color:var(--accent); text-align:left; text-decoration:underline; text-underline-offset:2px; }
input[type=text], input[type=search] { font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); min-height:34px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } h2:focus, #main:focus { outline:none; }
.skip { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:8px 12px; z-index:100; } .skip:focus { left:8px; top:8px; }
.banner { position:sticky; top:0; z-index:50; padding:8px 16px; background:#b42318; color:#fff; text-align:center; }
.busy { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:60; padding:8px 16px; border-radius:20px; background:var(--fg); color:var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.25); }

/* 공통 틀 (옛 화면과 같은 모양: 상단 바 54px, 메뉴 216px) */
.top { position:sticky; top:0; z-index:30; height:54px; display:flex; align-items:center; gap:10px 14px; padding:0 16px; background:var(--card); border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:10px; border:0; background:none; min-height:0; padding:2px 8px 2px 2px; border-radius:10px; color:inherit; font-weight:700; font-size:15px; }
.logo:hover { background:var(--sunk); }
.logo .lg { width:30px; height:30px; border-radius:10px; background:var(--brand); display:grid; place-items:center; flex:none; }
.histnav { display:flex; align-items:center; gap:4px; flex:none; }
.hbtn { width:34px; height:34px; min-height:0; display:grid; place-items:center; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:10px; padding:0; cursor:pointer; }
.hbtn:hover:not(:disabled) { background:var(--sunk); color:var(--accent); } .hbtn:disabled { opacity:.35; }
.helpbtn { font-weight:700; font-size:15px; }
.menu-btn { display:none; font-size:20px; }
.mktlink { display:inline-flex; align-items:center; padding:3px 10px; border-radius:6px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.acct-wrap { position:relative; }
.acct { display:inline-flex; align-items:center; gap:7px; min-height:0; border:1px solid var(--line); border-radius:999px; padding:3px 4px 3px 10px; background:var(--card); font-size:13px; white-space:nowrap; color:var(--fg); }
.acct:hover { background:var(--card); border-color:var(--accent); }
.acct .ai { display:inline-flex; color:var(--sub); } .acct .al { color:var(--sub); font-size:11px; } .acct .ae { font-weight:500; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.acct .ar { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:2px 10px 2px 8px; font-size:11px; font-weight:700; background:var(--accent-soft); color:var(--accent); }
.ic { flex:none; vertical-align:middle; }
.acct-menu { position:absolute; right:0; top:42px; min-width:190px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.18); padding:6px; display:flex; flex-direction:column; z-index:40; }
.acct-menu button { border:0; text-align:left; background:none; }
.layout { display:flex; align-items:flex-start; }
nav { position:sticky; top:54px; width:216px; flex:none; height:calc(100vh - 54px); overflow:auto; padding:12px 8px; background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.navlist { display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; }
.navtools { display:flex; gap:4px; padding:0 2px 10px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.ntool { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:transparent; border-radius:6px; padding:7px 4px; cursor:pointer; color:var(--sub); font-size:11px; font-weight:600; line-height:1.2; }
.ntool:hover:not(:disabled) { background:var(--sunk); color:var(--accent); } .ntool:disabled { opacity:.35; cursor:not-allowed; }
nav a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:0; padding:7px 10px; border-radius:6px; color:var(--sub); font-weight:500; text-decoration:none; }
nav a:hover { background:var(--sunk); color:var(--fg); }
nav a.on { background:var(--accent-soft); color:var(--accent); font-weight:600; box-shadow:inset 3px 0 0 var(--brand); }
nav .nt { display:inline-flex; align-items:center; gap:9px; min-width:0; white-space:nowrap; }
nav .nt .ic { color:var(--sub); } nav a:hover .nt .ic { color:var(--fg); } nav a.on .nt .ic { color:var(--accent); }
nav a.child { position:relative; margin-left:14px; padding-left:12px; font-size:13px; }
nav a.child::before { content:""; position:absolute; left:-4px; top:50%; width:8px; height:1px; background:var(--line); }
nav .sep { height:1px; background:var(--line); margin:8px 6px; }
nav .navfoot { margin-top:auto; padding:12px 6px 4px; border-top:1px solid var(--line); font-size:12px; line-height:1.55; color:var(--sub); display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
nav .navfoot b { font-weight:600; color:var(--fg); }
.badge { min-width:22px; padding:0 7px; border-radius:999px; background:var(--sunk); color:var(--sub); font-family:var(--mono); font-size:11px; text-align:center; } nav a.on .badge { background:var(--card); color:var(--accent); }
.content { flex:1; min-width:0; padding:0 0 40px; }
.content main { padding:14px 20px 0; }
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:9px 20px; margin:0; background:var(--card); border-bottom:1px solid var(--line); }
.chips .lbl { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--sub); white-space:nowrap; margin-right:4px; }
.cgrp { display:inline-flex; align-items:center; gap:6px; padding-left:10px; margin-left:4px; border-left:1px solid var(--line); }
.cgrp .gl { font-size:11px; font-weight:700; color:var(--sub); }
.cbtn { min-height:0; border:1.5px solid var(--accent); background:transparent; color:var(--accent); border-radius:999px; padding:3px 12px; cursor:pointer; white-space:nowrap; font-size:13px; font-weight:500; }
.cbtn:hover { background:var(--accent-soft); }
.cbtn[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); font-weight:700; }
.cbtn[aria-pressed="true"]::before { content:"\2713"; font-size:11px; font-weight:700; margin-right:5px; }
.cbtn.cc { background:transparent; color:var(--cfg); border-color:var(--cfg); } .cbtn.cc:hover { background:var(--cbg); }
.cbtn.cc[aria-pressed="true"] { background:var(--cfg); color:var(--card); border-color:var(--cfg); }
.cbtn.endt { border-style:dashed; border-color:var(--sub); color:var(--sub); font-size:11px; } .cbtn.endt:hover { background:var(--sunk); }
.cbtn.endt[aria-pressed="true"] { background:var(--sub); color:var(--card); border-style:solid; }
.cc-b0{--cbg:#dbe8fb;--cfg:#1d4f91}.cc-b1{--cbg:#e4e1fb;--cfg:#433d99}.cc-b2{--cbg:#d4eef7;--cfg:#135a70}
.cc-g0{--cbg:#dcf1df;--cfg:#1e6a34}.cc-g1{--cbg:#d3eee7;--cfg:#125a4a}.cc-g2{--cbg:#e7f1d2;--cfg:#4b6114}
.cc-n{--cbg:var(--sunk);--cfg:var(--sub)}
@media (prefers-color-scheme: dark) { .cc-b0{--cbg:#1c2f4b;--cfg:#a3c6f7}.cc-b1{--cbg:#29274d;--cfg:#bbb6f4}.cc-b2{--cbg:#163b45;--cfg:#93d5e8}.cc-g0{--cbg:#1b3a24;--cfg:#93d8a5}.cc-g1{--cbg:#163a33;--cfg:#89d4c1}.cc-g2{--cbg:#2d371a;--cfg:#c3dc8a} }
.chip { display:inline-block; background:var(--cbg,var(--sunk)); color:var(--cfg,var(--sub)); border-radius:6px; padding:1px 7px; font-size:13px; font-weight:600; white-space:nowrap; line-height:1.6; }
@media (max-width: 999px) {
  .menu-btn { display:inline-block; }
  nav { position:fixed; left:0; top:54px; z-index:35; transform:translateX(-102%); visibility:hidden; box-shadow:4px 0 16px rgba(0,0,0,.2); } nav.open { transform:none; visibility:visible; }
}
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* 제목·목록 (옛 화면: 제목 18px + 「N명」 알약, 둥근 카드 표 + 합계 바, 11px 회색 머리글, 그룹 머리글) */
.phead { margin-bottom:10px; } .lhead { display:flex; align-items:center; gap:8px; }
.ltitle { font-size:18px; line-height:1.3; margin:0; }
.lcount { margin-left:2px; padding:1px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.sub { font-size:13.5px; margin:2px 0 10px; }
.lbanner { margin:0 0 10px; padding:8px 12px; border-radius:10px; background:var(--bad-soft); color:var(--bad); font-size:13px; font-weight:500; }
.lbanner button.link { color:inherit; font-weight:700; }
.ltools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; } .ltools .search { width:240px; }
.search, input[type=search] { border:1px solid var(--line); background:var(--sunk); border-radius:6px; padding:5px 10px; min-height:34px; }
.sw { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; cursor:pointer; }
.sw input[type=checkbox] { appearance:none; -webkit-appearance:none; width:34px; height:20px; margin:0; border-radius:999px; background:var(--line); position:relative; cursor:pointer; transition:background .15s; flex:none; }
.sw input[type=checkbox]::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.sw input[type=checkbox]:checked { background:var(--accent); } .sw input[type=checkbox]:checked::after { left:16px; }
.linkbtn { border:0; background:none; min-height:0; padding:2px; color:var(--sub); font-size:12px; text-decoration:underline; cursor:pointer; } .linkbtn:hover { background:none; color:var(--fg); }
.btn { display:inline-flex; align-items:center; gap:6px; }
.tbl-wrap { position:relative; max-height:calc(100vh - 330px); min-height:160px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:10px 10px 0 0; }
.tbl-wrap.flat { max-height:none; border-radius:10px; }
.tblfoot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--sunk); border:1px solid var(--line); border-top:0; border-radius:0 0 10px 10px; padding:7px 12px; font-size:13px; margin-bottom:12px; }
.tblfoot .tfl { font-weight:700; } .tblfoot .tfr { margin-left:auto; display:flex; gap:14px; flex-wrap:wrap; color:var(--sub); } .tblfoot .tfr b { color:var(--fg); font-weight:700; margin-left:4px; font-variant-numeric:tabular-nums; }
table { border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
.ltable { table-layout:fixed; }
.ltable th, .ltable td { height:var(--row-h); padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid var(--line); text-align:left; background:var(--card); }
.ltable thead th { position:sticky; top:0; z-index:3; font-weight:600; font-size:11px; color:var(--sub); background:var(--sunk); }
.ltable thead tr.tgh th { top:0; z-index:4; height:25px; padding:2px 10px; letter-spacing:.02em; font-weight:700; border-bottom:1px solid var(--line); }
.ltable thead tr.tgh th.tw { color:var(--accent); box-shadow:inset 0 2px 0 var(--brand); }
.ltable thead tr.tgh + tr th { top:25px; z-index:3; } .ltable thead tr.tgh + tr th.fx { z-index:5; }
.ltable thead tr.tgh th.g0 { position:sticky; left:0; z-index:6; }
.ltable .num, .ctbl .num { text-align:right; }
.ltable td.num { font-family:var(--mono); font-size:13px; } .ltable th.num { text-align:right; }
.ltable .fx { position:sticky; z-index:2; } .ltable thead .fx { z-index:4; }
.ltable th.fzend, .ltable td.fzend { box-shadow:1px 0 0 color-mix(in srgb,var(--fg) 26%,var(--line)), 6px 0 8px -5px rgba(20,30,50,.20); }
.ltable th.sel, .ltable td.sel { width:36px; min-width:36px; padding:0 0 0 10px; }
.ltable tbody tr:hover td { background:var(--sunk); } .ltable tr.sel td { background:var(--accent-soft); } .ltable tr.ex td { color:var(--sub); }
.ltable tbody tr:last-child td { border-bottom:0; }
.hsort { border:0; background:none; padding:0; min-height:0; font-weight:600; font-size:11px; color:inherit; } .hsort:hover { background:none; color:var(--fg); }
.hsort .ar { font-size:11px; margin-left:4px; font-style:normal; font-weight:700; color:var(--accent); } .hsort .ar.off { color:var(--sub); opacity:.4; font-weight:600; } .hsort:hover .ar.off { opacity:.9; }
.hfil { border:1px solid var(--line); background:var(--card); padding:1px 5px; min-height:0; margin-left:4px; line-height:1.6; border-radius:6px; color:var(--sub); opacity:.85; font-size:11px; vertical-align:middle; }
.hfil:hover { background:var(--card); opacity:1; } .hfil.on { color:var(--card); background:var(--info); border-color:var(--info); opacity:1; }
.namecell { display:inline-flex; align-items:center; gap:4px; max-width:100%; }
.namecell .link { color:var(--fg); font-weight:700; text-decoration:none; } .namecell .link:hover { color:var(--accent); text-decoration:underline; }
.btag { font-size:11px; font-weight:700; padding:0 5px; border-radius:6px; background:var(--sunk); color:var(--sub); } .btag.bad { background:var(--bad-soft); color:var(--bad); } .btag.warn { background:var(--warn-soft); color:var(--warn); } .btag.qa { background:var(--accent-soft); color:var(--accent); }
.pill { display:inline-block; font-size:12px; font-weight:600; border-radius:999px; padding:1px 9px; white-space:nowrap; background:var(--sunk); color:var(--sub); }
.p-prog { background:var(--accent-soft); color:var(--accent); } .p-ok { background:var(--ok-soft); color:var(--ok); } .p-out { background:var(--sunk); color:var(--sub); } .p-bad { background:var(--bad-soft); color:var(--bad); } .p-wait { background:var(--warn-soft); color:var(--warn); }
.selbar { position:sticky; top:0; z-index:6; margin:0 0 8px; padding:8px 12px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px; font-size:13px; }
.selbar b { color:var(--accent); }
.dempty { padding:36px 12px; text-align:center; color:var(--sub); }
.popup { position:absolute; z-index:20; width:250px; max-height:360px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.2); padding:8px; }
.pop-h { display:flex; justify-content:space-between; align-items:center; font-weight:600; margin-bottom:6px; }
.pop-list label, .collist label { display:flex; align-items:center; gap:4px; padding:3px 2px; } .collist { list-style:none; margin:0 0 8px; padding:0; } .collist li { display:flex; justify-content:space-between; align-items:center; }
.skel-row { height:34px; margin:8px 0; border-radius:8px; background:linear-gradient(90deg,var(--wait),var(--hover),var(--wait)); background-size:200% 100%; animation:sh 1.2s linear infinite; } @keyframes sh { to { background-position:-200% 0; } }

/* 선발 현황·오늘 할 일 */
.flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; margin:12px 0 4px; }
.fstep { flex:1 1 150px; min-width:150px; display:flex; flex-direction:column; gap:3px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.fstep.main { border-color:var(--accent); } .fstep.bad { border-color:var(--bad); max-width:190px; }
.kl { font-size:13px; color:var(--sub); } .kn { font-size:28px; font-weight:700; line-height:1.1; } .kn small { font-size:13px; font-weight:400; margin-left:2px; }
.kpct { font-size:12.5px; } .ks { font-size:12px; color:var(--sub); } .kdone { font-size:12px; color:var(--ok); }
.kwait { margin-top:4px; padding:3px 8px; min-height:28px; font-size:12px; text-align:left; border-color:var(--warn); color:var(--warn); } .kwait.zero { border-color:var(--line); color:var(--sub); }
.farrow { align-self:center; font-size:22px; color:var(--sub); } .fsep { width:1px; background:var(--line); margin:0 6px; }
.dsec { margin-top:22px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; } .dsec h3 { margin:0 0 4px; } .ddesc { margin:0 0 10px; color:var(--sub); font-size:13px; }
.fbars { display:flex; flex-direction:column; gap:8px; }
.fr { display:grid; grid-template-columns:90px 1fr 280px; gap:10px; align-items:center; } .fl { font-size:13px; }
.ft { display:flex; height:18px; background:var(--hover); border-radius:9px; overflow:hidden; } .ft i { display:block; height:100%; }
.ft .n,.legend .n::before { background:var(--accent); } .ft .w,.legend .w::before { background:repeating-linear-gradient(135deg,#9aa5b8,#9aa5b8 3px,var(--card) 3px,var(--card) 6px); } .ft .r,.legend .r::before { background:#9aa5b8; } .ft .x,.legend .x::before { background:var(--bad-soft); outline:1px solid var(--bad); outline-offset:-1px; }
.fv { font-size:13px; } .fd { color:var(--sub); }
.legend { display:flex; gap:14px; margin-top:8px; font-size:12px; color:var(--sub); } .legend span::before { content:""; display:inline-block; width:12px; height:12px; margin-right:5px; border-radius:3px; vertical-align:-2px; }
.ctbl th, .ctbl td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; } .ctbl th { font-weight:600; font-size:13px; color:var(--sub); }
.ctbl .num { text-align:right; } .ctbl tr.clk { cursor:pointer; } .ctbl tr.clk:hover td { background:var(--hover); }
.cap { display:inline-flex; align-items:center; gap:6px; } .bar { display:inline-block; width:90px; height:8px; border-radius:4px; background:var(--hover); overflow:hidden; } .bar i { display:block; height:100%; background:var(--accent); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width: 899px) { .two, .fr { grid-template-columns:1fr; } }
.hb { display:flex; flex-direction:column; gap:6px; } .hr { display:grid; grid-template-columns:minmax(80px,150px) 1fr 60px; gap:10px; align-items:center; } .hr.wide { grid-template-columns:minmax(90px,150px) 1fr 160px; }
.hl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; } .ht { position:relative; height:14px; background:var(--hover); border-radius:7px; overflow:hidden; } .ht i { position:absolute; left:0; top:0; height:100%; background:var(--accent); opacity:.9; border-radius:7px; } .ht i.bad { background:var(--bad); } .ht i.a { opacity:.3; } .ht i.b { background:var(--ok); opacity:1; }
.hn { font-size:13px; } .dnote { color:var(--sub); font-size:12.5px; margin:8px 0 0; }
.kpis { display:flex; gap:12px; flex-wrap:wrap; } .kpi { padding:10px 16px; background:var(--hover); border-radius:10px; display:flex; flex-direction:column; min-width:170px; }
.queues { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin:12px 0; }
.q { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px; min-height:112px; border-radius:12px; text-align:left; } .q .n { font-size:30px; font-weight:700; line-height:1.1; } .q .l { font-weight:600; } .q .d { font-size:12.5px; color:var(--sub); }
.q.hot { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, var(--card)); } .q.zero { opacity:.6; }
.tag { padding:0 6px; border-radius:8px; background:var(--wait); font-size:12px; } .tag.warn { background:color-mix(in srgb, var(--warn) 18%, var(--card)); color:var(--warn); }

/* 상세 패널 */
.panel-backdrop { position:fixed; inset:0; z-index:44; background:rgba(0,0,0,.15); }
.panel { position:fixed; right:0; top:0; bottom:0; z-index:45; width:min(460px,100vw); overflow:auto; background:var(--card); border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(0,0,0,.2); }
.ph { position:sticky; top:0; z-index:2; padding:12px 14px 8px; background:var(--card); border-bottom:1px solid var(--line); }
.ph-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ph-name { font-size:18px; } .ph-sub { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; font-size:13px; } .ph-act { margin-top:4px; }
.pbody { padding:6px 14px 30px; } .sec { border-bottom:1px solid var(--line); } .sec summary { cursor:pointer; padding:10px 0; font-weight:600; } .sbody { padding:0 0 12px; }
.sbadge { margin-left:8px; padding:0 8px; border-radius:10px; background:var(--accent-soft); color:var(--accent); font-size:12px; }
.kv { display:flex; gap:10px; padding:2px 0; } .kv .k { flex:none; width:96px; color:var(--sub); } .kv .v { min-width:0; overflow-wrap:anywhere; }
.ptext { margin:2px 0 6px; white-space:pre-wrap; overflow-wrap:anywhere; } .rec { padding:6px 0; border-top:1px dashed var(--line); } .rec-h { font-size:12.5px; color:var(--sub); } .logrow { padding:2px 0; font-size:13px; overflow-wrap:anywhere; }
.issues { margin:0; padding-left:18px; color:var(--bad); } .perr { margin:10px 14px; padding:10px; border-radius:8px; background:var(--bad-soft); }

/* 알림·창 */
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; } .toast { display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:12px; background:#e7f6ec; color:#14633a; border:1px solid #9bd7b2; box-shadow:0 4px 14px rgba(0,0,0,.2); font-weight:600; } .toast.err { background:var(--bad-soft); color:var(--bad); border-color:var(--bad); }
.dlg { border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--card); color:var(--fg); max-width:420px; } .dlg::backdrop { background:rgba(0,0,0,.35); } .dlg-msg { margin:0 0 14px; white-space:pre-line; } .dlg-act { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; } .dlg input { width:100%; }

/* 환경 표시(시험용일 때만 보임) */
.envbanner { padding:6px 12px; background:#d97706; color:#fff; text-align:center; font-weight:700; letter-spacing:.2px; }
.envpill { padding:2px 10px; border-radius:12px; background:#d97706; color:#fff; font-weight:700; font-size:12px; }
body.env-staging .top { border-bottom:3px solid #d97706; }

/* 입력 칸·저장 (S2) */
.ed { font:inherit; max-width:100%; min-height:28px; padding:2px 6px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
select.ed { width:100%; } input.ed { width:100%; } input.ed.num { width:68px; text-align:right; } input.ed.memo { margin-top:2px; }
.ed.dirty { background:#fff6bf; border-color:#e0b400; } @media (prefers-color-scheme: dark) { .ed.dirty { background:#4a4210; } }
.ltable td { vertical-align:middle; } .ltable td:has(.ed) { padding:0 4px; }
.ltable tr.dirty td { background:color-mix(in srgb, #ffd54a 14%, var(--card)); } .ltable tr.conf td { background:color-mix(in srgb, #ff8a3d 18%, var(--card)); } .ltable tr.dn td { color:var(--sub); }
.reasoncell { display:flex; flex-direction:column; gap:2px; width:100%; }
.dirtybar { margin:8px 0; padding:8px 12px; border-radius:10px; background:#fff3c4; border:1px solid #e0b400; color:#4a3c00; } @media (prefers-color-scheme: dark) { .dirtybar { background:#4a4210; color:#ffe9a0; } }
.savewrap { display:inline-flex; align-items:center; gap:4px; } .rowerr { color:var(--bad); cursor:help; }
button.sm { min-height:26px; padding:2px 10px; font-size:13px; } button.sm.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.warnbtn { min-height:26px; padding:2px 8px; font-size:13px; border-color:#ff8a3d; color:#c2410c; font-weight:700; }
button.danger { background:var(--sunk); border-color:var(--bad); color:var(--bad); }
.precheck.done { border-color:var(--ok); color:var(--ok); } .dot { display:inline-block; width:7px; height:7px; margin-left:4px; border-radius:50%; background:var(--warn); }
.late { color:var(--bad); font-weight:600; } .okt { color:var(--ok); font-weight:600; } .linked { color:var(--ok); }
.popup.fixed { position:fixed; z-index:70; width:320px; } .prerow { padding:6px 0; border-top:1px dashed var(--line); } .prelbl { font-weight:600; font-size:13px; } .preact { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:3px; } .hint { font-size:12px; color:var(--sub); }
.frow { display:flex; flex-direction:column; gap:3px; margin:8px 0; } .frow input, .frow select { width:100%; } .formbody { min-width:280px; }
.inrow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:100%; } .inrow input { flex:1; min-width:140px; }
.addform { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; } .addform input { flex:1; min-width:140px; }
.pfoot { padding:14px 0 6px; } .regtrack { margin-bottom:28px; }
.ltable input[type=checkbox] { width:18px; height:18px; }

/* S3: 면접 일정·달력·합격발표·문구 패널 */
.ivbtn.unset { border-style:dashed; color:var(--sub); } .ivbtn.late { color:var(--bad); border-color:var(--bad); } .tag.bad { background:var(--bad-soft); color:var(--bad); }
.calwrap { margin-top:28px; } .calhead { display:flex; align-items:center; gap:8px; margin:8px 0; } .calbody { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.calgrid { display:grid; grid-template-columns:repeat(7, minmax(84px, 1fr)); gap:4px; flex:2 1 560px; } .caldow { text-align:center; color:var(--sub); font-size:13px; padding:4px 0; }
.calcell { min-height:64px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:6px 8px; text-align:left; border-radius:8px; } .calcell.off { visibility:hidden; } .calcell small { color:var(--sub); font-size:12px; }
.calcell.has { background:var(--accent-soft); } .calcell.sel { outline:3px solid var(--accent); } .calcell.today b { color:var(--accent); text-decoration:underline; }
.calpanel { flex:1 1 300px; min-width:280px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; } .calpanel h3 { margin:0 0 4px; }
.slotlist { list-style:none; margin:8px 0; padding:0; } .slot { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px dashed var(--line); } .slot .stime { width:48px; font-weight:600; } .slot .sbody { flex:1; min-width:0; } .slot.closed { opacity:.55; } .slot select { max-width:100%; }
.slotact { display:flex; gap:8px; flex-wrap:wrap; } .twocol { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .chkrow { display:flex; flex-wrap:wrap; gap:10px; } .dlg.wide { max-width:560px; width:92vw; }
.ivpop { width:320px; } .annhead { display:flex; align-items:center; gap:8px; } .annbar { margin-bottom:12px; }
.msgpanel .preview { white-space:pre-wrap; overflow-wrap:anywhere; padding:10px; background:var(--hover); border-radius:8px; font:inherit; margin:4px 0; } .missing { color:var(--bad); font-weight:700; }
.dlg-act.left { justify-content:flex-start; flex-wrap:wrap; } .pager { display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0; }

/* S4: 안내문구·설정·파기 승인 */
.tpl-wrap { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; } .tpl-list { flex:1 1 240px; max-width:300px; } .tpl-edit { flex:3 1 420px; min-width:300px; }
.tpl-group h5 { margin:12px 0 4px; } .tpl-item { display:block; width:100%; text-align:left; margin:2px 0; } .tpl-item.on { background:var(--accent); border-color:var(--accent); color:#fff; } .tpl-item.on small { color:#dfe6ff; }
.tpl-edit textarea { width:100%; font:inherit; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); } .tpl-edit select, .tpl-edit input[type=text] { width:100%; }
.varchips { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; align-items:center; } .chipbtn { font-size:12px; padding:1px 8px; min-height:24px; }
.purgecard { padding:12px; margin:8px 0; background:var(--card); border:1px solid var(--bad); border-radius:10px; } .plain { list-style:none; padding-left:0; } code { background:var(--hover); padding:2px 6px; border-radius:6px; overflow-wrap:anywhere; }

/* 정원 대비 진행률(선발 현황 단계 카드) */
.kcap { display:flex; flex-direction:column; gap:3px; font-size:12px; margin-top:4px; } .kcap .bar { display:block; width:100%; height:6px; border-radius:3px; background:var(--hover); overflow:hidden; } .kcap .bar i { display:block; height:100%; background:var(--accent); }
.cdots { display:flex; gap:3px; margin-top:2px; } .cdots i { width:8px; height:8px; border-radius:50%; background:var(--c0); } .cdots i.c1{background:var(--c1)}.cdots i.c2{background:var(--c2)}.cdots i.c3{background:var(--c3)}.cdots i.c4{background:var(--c4)}.cdots i.c5{background:var(--c5)}.cdots i.c6{background:var(--c6)}.cdots i.c7{background:var(--c7)}
.slot.booked { border-left:4px solid var(--c0); padding-left:6px; } .slot.booked.c1{border-left-color:var(--c1)}.slot.booked.c2{border-left-color:var(--c2)}.slot.booked.c3{border-left-color:var(--c3)}.slot.booked.c4{border-left-color:var(--c4)}.slot.booked.c5{border-left-color:var(--c5)}.slot.booked.c6{border-left-color:var(--c6)}.slot.booked.c7{border-left-color:var(--c7)}
/* 도움말·첫 안내 */
.dlg.help { max-width:560px; max-height:86vh; overflow:auto; } .help h3 { margin:14px 0 6px; font-size:15px; } .help h4 { margin:8px 0 2px; font-size:14px; } .help ul { margin:4px 0 8px; padding-left:20px; } .help-keys th { text-align:left; white-space:nowrap; } kbd { font:inherit; font-size:12px; padding:1px 6px; border:1px solid var(--line); border-radius:5px; background:var(--hover); }
.welcome { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 14px; margin:0 0 12px; border:1px solid var(--accent); border-radius:10px; background:var(--accent-soft); }
.lnk { color:var(--accent); font-size:13px; margin-right:8px; text-decoration:none; } .lnk:hover, .lnk:focus-visible { text-decoration:underline; }

/* 로그인 화면 하단 링크(공개 페이지) */
.legal a { color:var(--accent); }

/* 오늘 할 일 카드에서 넘어온 필터 칩 */
.quickbar { display:flex; align-items:center; gap:8px; margin:8px 0; padding:6px 12px; border-radius:10px; background:var(--accent-soft); color:var(--fg); }

.purgecount { margin:4px 0; }

/* 열 폭 조절 손잡이 */
.ltable th { position:relative; }
.hgrip { position:absolute; top:0; right:-3px; width:8px; height:100%; cursor:col-resize; z-index:3; touch-action:none; }
.hgrip:hover, .hgrip:focus-visible { background:var(--accent-soft); outline:2px solid var(--accent); }

/* 개발 PC 에서 운영에 연결됐을 때(D-24) 빨간 경고 띠 */
.envbanner.prodwarn { background:#b42318; color:#fff; }

/* 표: 화면이 넓으면 남는 폭을 열이 나눠 갖는다(옛 화면처럼 오른쪽이 비지 않게). 표 안 회차 칩은 작게 */
.ltable { min-width:100%; }
.ltable td .chip { font-size:11px; letter-spacing:-.05em; padding:1px 5px; }

/* 합격자 등록 확인: 요건 칸(옛 화면) */
.reqcell { display:inline-flex; align-items:center; gap:6px; padding:1px 4px; border-radius:999px; }
.reqcell.on { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); padding:1px 8px 1px 4px; }
.reqcell .reqdone { font-size:12px; font-weight:700; color:var(--accent); } .reqcell .who { font-size:11px; margin-left:2px; }
.reqpill { display:inline-flex; align-items:center; gap:4px; padding:1px 10px 1px 8px; border-radius:999px; background:var(--ok-soft); color:var(--ok); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 40%,transparent); font-size:12px; font-weight:600; }
.hlabel { font-weight:600; font-size:11px; }

/* 메뉴 묶음 제목은 진하게, 하위는 옅게(옛 화면) */
nav a.grp { color:var(--fg); font-weight:600; } nav a.grp.on { color:var(--accent); }
h3 { font-size:15px; }

/* 오늘 할 일: 흰 카드, 숫자는 고정폭 24px, 「강조」는 숫자만 붉게(옛 화면) */
.queues { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin:0 0 22px; }
.q { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:0; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); text-align:left; font-weight:500; box-shadow:none; }
.q:hover { border-color:var(--accent); background:var(--card); }
.q .n { font-family:var(--mono); font-size:24px; font-weight:500; line-height:1.2; } .q .l { font-weight:600; } .q .d { font-size:12.5px; color:var(--sub); font-weight:400; }
.q.hot { background:var(--card); border-color:var(--line); } .q.hot .n { color:var(--bad); } .q.zero { opacity:.6; }

/* 선발 현황: 단계 카드(옛 화면) */
.flow { display:flex; flex-wrap:nowrap; align-items:stretch; gap:0; margin:0; }
.fstep { flex:1 1 0; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:5px; }
.fstep .kl { font-size:13px; font-weight:600; color:var(--sub); }
.fstep .kn { font-size:32px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; } .fstep .kn small { font-size:15px; font-weight:600; color:var(--sub); margin-left:2px; }
.fstep .ks { font-size:12px; color:var(--sub); }
.fstep .kpct { align-self:flex-start; display:inline-flex; align-items:baseline; gap:5px; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:2px 11px; font-size:13px; font-weight:600; }
.fstep .kpct b { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.fstep .kwait { margin-top:auto; display:flex; align-items:center; gap:6px; border:1px dashed var(--line); background:var(--sunk); border-radius:10px; padding:6px 8px; font-size:13px; line-height:1.35; color:var(--fg); font-weight:500; min-height:0; }
.fstep .kwait b { font-size:15px; font-variant-numeric:tabular-nums; } .fstep .kwait.zero { opacity:.55; } .fstep .kwait:hover { border-color:var(--accent); }
.fstep .kdone { margin-top:auto; font-size:13px; color:var(--sub); }
.fstep.main { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); max-width:none; }
.fstep.main .kl, .fstep.main .ks, .fstep.main .kn small { color:var(--accent-fg); opacity:.88; }
.fstep.main .kwait { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); color:var(--accent-fg); }
.fstep.main .kpct { background:rgba(255,255,255,.2); color:var(--accent-fg); }
.fstep.bad { background:var(--bad-soft); border-color:transparent; max-width:none; } .fstep.bad .kn, .fstep.bad .kl { color:var(--bad); }
.farrow { flex:none; width:24px; display:flex; align-items:center; justify-content:center; color:var(--sub); font-size:16px; } .fsep { flex:none; width:1px; background:var(--line); margin:4px 12px; align-self:stretch; }
@media (max-width:1100px) { .flow { flex-wrap:wrap; gap:10px; } .farrow, .fsep { display:none; } .fstep { flex:1 1 150px; } }
.fr { display:grid; grid-template-columns:96px minmax(0,1fr) 250px; gap:14px; align-items:center; } .fr .fl { font-weight:600; font-size:13px; }
.fr .ft { height:26px; background:var(--sunk); border-radius:6px; overflow:hidden; display:flex; } .fr .ft i { display:block; height:100%; }
.fr .ft i.n { background:var(--brand); } .fr .ft i.w { background:repeating-linear-gradient(135deg,var(--brand) 0 3px,var(--accent-soft) 3px 7px); } .fr .ft i.r { background:var(--sub); opacity:.35; } .fr .ft i.x { background:var(--bad); opacity:.35; }
.fr .fv { font-size:13px; color:var(--sub); } .fr .fd { display:block; font-size:12px; } .fr .fv b { font-size:18px; color:var(--fg); margin-right:4px; font-variant-numeric:tabular-nums; }
.legend { display:flex; gap:16px; font-size:12px; color:var(--sub); margin:12px 0 0 110px; }
.legend span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:6px; margin-right:5px; vertical-align:-1px; background:var(--brand); }
.legend span.x::before { background:var(--bad); opacity:.35; } .legend span.w::before { background:repeating-linear-gradient(135deg,var(--brand) 0 3px,var(--accent-soft) 3px 7px); } .legend span.r::before { background:var(--sub); opacity:.35; }
.dsec { margin-top:22px; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.dsec h3 { margin:0; font-size:18px; display:flex; align-items:center; gap:8px; } .dsec h3::before { content:""; width:4px; height:17px; border-radius:6px; background:var(--brand); }
.dsec .ddesc { color:var(--sub); font-size:13px; margin:4px 0 16px 12px; }
.dnote { font-size:13px; color:var(--sub); margin:12px 0 0; }
.hr { display:grid; grid-template-columns:minmax(90px,150px) minmax(0,1fr) 44px; gap:10px; align-items:center; font-size:13px; } .hr.wide { grid-template-columns:minmax(90px,150px) minmax(0,1fr) 160px; }
.hr .ht { height:14px; background:var(--sunk); border-radius:6px; overflow:hidden; position:relative; } .hr .ht i { position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--brand); }
.hr .hn { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.ctbl { width:100%; border-collapse:collapse; }
.ctbl th { font-size:11px; font-weight:600; color:var(--sub); background:var(--sunk); padding:9px 12px; border-bottom:1px solid var(--line); } .ctbl td { padding:9px 12px; border-bottom:1px solid var(--line); } .ctbl td .num, .ctbl td.num { font-family:var(--mono); font-size:13px; }
.ctbl tr:last-child td { border-bottom:0; }
.tag { font-size:12px; font-weight:600; color:var(--sub); border:1px solid var(--line); border-radius:6px; padding:0 5px; margin-left:4px; background:transparent; } .tag.warn { color:var(--warn); border-color:var(--warn); background:transparent; } .tag.bad { color:var(--bad); border-color:var(--bad); }

/* 상세 창(옛 화면): 가운데 큰 창 · 위에 이름·회차·접수일·상태, 5단계 스테퍼, 왼쪽 단계 카드 / 오른쪽 메모·연락 기록·같은 사람·변경 이력 */
.panel-backdrop { background:rgba(15,20,18,.35); }
.panel:not(.msgpanel) { left:50%; right:auto; top:4vh; bottom:auto; transform:translateX(-50%); width:min(1120px,95vw); height:92vh; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; background:var(--card); }
.panel:not(.msgpanel) .ph { position:static; flex:none; padding:18px 22px 0; border-bottom:1px solid var(--line); }
.ph-top { align-items:flex-start; } .ph-title { min-width:0; } .ph-name { font-size:24px; line-height:1.25; display:block; }
.ph-meta { display:flex; flex-wrap:wrap; align-items:center; gap:2px 0; margin-top:4px; font-size:13px; color:var(--sub); }
.ph-sub { margin-top:6px; font-size:13px; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; }
.ph-steps { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 0; padding:0 0 12px; flex-wrap:wrap; }
.ph-act { display:inline-flex; gap:14px; } .ph-dirty { padding:0 0 10px; }
.stepper { display:flex; flex-wrap:wrap; gap:6px; }
.stp { display:inline-flex; align-items:center; gap:6px; min-height:0; padding:3px 12px 3px 4px; border-radius:999px; border:1px solid var(--line); background:var(--sunk); color:var(--sub); font-size:13px; font-weight:500; box-shadow:none; }
.stp .sn { width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; background:var(--card); color:var(--sub); font-size:12px; font-weight:700; }
.stp.s-done { background:var(--lime-soft); border-color:transparent; color:var(--lime-fg); } .stp.s-done .sn { background:var(--lime); color:#fff; }
.stp.s-now { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700; } .stp.s-now .sn { background:var(--accent); color:var(--accent-fg); }
.pbody.pcols { flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:14px; align-items:start; padding:16px 22px 22px; background:var(--bg); }
@media (max-width:900px) { .pbody.pcols { grid-template-columns:1fr; } }
.pcol { display:flex; flex-direction:column; gap:12px; min-width:0; }
.panel:not(.msgpanel) .sec { border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
.panel:not(.msgpanel) .sec > summary { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; list-style:none; font-weight:700; font-size:15px; }
.panel:not(.msgpanel) .sec > summary::-webkit-details-marker { display:none; }
.panel:not(.msgpanel) .sec > summary::after { content:""; width:8px; height:8px; border-right:2px solid var(--sub); border-bottom:2px solid var(--sub); transform:rotate(45deg); margin:0 4px 3px 6px; flex:none; }
.panel:not(.msgpanel) .sec[open] > summary::after { transform:rotate(-135deg); margin-bottom:-3px; }
.panel:not(.msgpanel) .sec .sbody { padding:4px 16px 14px; }
.sec .stag { font-size:12px; font-weight:600; padding:1px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--sub); }
.sec .ssum { font-size:13px; font-weight:500; color:var(--sub); }
.sec .sico { width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; flex:none; background:var(--sunk); color:#fff; box-shadow:inset 0 0 0 2px var(--line); }
.sec.stage.s-done { background:var(--lime-soft); border-color:color-mix(in srgb,var(--lime) 55%,var(--line)); box-shadow:inset 4px 0 0 var(--lime); }
.sec.stage.s-done .sico { background:var(--lime); box-shadow:none; } .sec.stage.s-done .stag { color:var(--lime-fg); border-color:var(--lime); }
.sec.stage.s-done > .sbody { background:var(--card); }
.sec .stitle { font-weight:700; }
.panel:not(.msgpanel) .pfoot { flex:none; padding:10px 22px; border-top:1px solid var(--line); background:var(--card); }
.panel:not(.msgpanel) .kv .k { width:112px; }
@media (prefers-color-scheme: dark) { .stp.s-done .sn, .sec.stage.s-done .sico { color:#10240a; } }

/* 합격발표: 노란 안내 띠 · 예비 합격자/탈락 안내 대상도 같은 표 틀(옛 화면) */
.lbanner.warnb { background:var(--warn-soft); color:var(--warn); }
.annhead { display:flex; align-items:center; gap:10px; } .annhead strong { font-size:18px; }
.annsec { margin-top:22px; } .annsec h3 { margin:0 0 8px; font-size:15px; }
.annsec .ctbl { border:1px solid var(--line); border-radius:10px; border-collapse:separate; border-spacing:0; overflow:hidden; background:var(--card); }
.annsec .ctbl tbody tr:last-child td { border-bottom:0; } .annsec .ctbl td .link { color:var(--fg); font-weight:700; text-decoration:none; } .annsec .ctbl td .link:hover { color:var(--accent); text-decoration:underline; }

/* 설정: 접이식 카드(옛 화면) · 표 안 작은 단추 · 연결 상태 */
.dsec.fold { padding:0; } .dsec.fold > summary { list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dsec.fold > summary::-webkit-details-marker { display:none; } .dsec.fold > summary h3 { margin:0; }
.dsec.fold > summary::after { content:"열기 ▾"; font-size:12px; color:var(--sub); font-weight:600; white-space:nowrap; flex:none; } .dsec.fold[open] > summary::after { content:"접기 ▴"; }
.dsec.fold > .fbody { padding:0 20px 18px; }
.ctbl .btn, .ctbl button.sm { min-height:0; padding:2px 8px; font-size:12px; }
.okt { color:var(--ok); font-weight:700; } .late { color:var(--bad); font-weight:700; }

/* 입력 칸·창·알림(옛 화면): 모서리 6px, 알림은 위쪽 가운데, 확인 창 10px */
select, textarea, input[type=text], input[type=search], input[type=number], input[type=date], input[type=email] { font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:5px 8px; }
textarea { min-height:60px; }
.search, input[type=search] { background:var(--sunk); }
#toast { top:62px; bottom:auto; }
.toast { border-radius:10px; font-size:14.5px; font-weight:600; background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 38%,transparent); box-shadow:0 6px 18px rgba(20,40,30,.14); }
.dlg { border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.3); } .dlg::backdrop { background:rgba(15,20,18,.4); }
.toast.err { background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 38%,transparent); }