:root{
  --ink:#12161c; --ink-2:#3d4753; --ink-3:#6b7787;
  --paper:#eef1f5; --surface:#fff; --line:#d8dee6; --line-2:#eaeef3;
  --accent:#2b5bd7; --accent-soft:#eaf0fe; --accent-ink:#1b3f9c;
  --warn:#a8590b; --warn-soft:#fdf3e6;
  --danger:#b3261e; --danger-soft:#fdecea;
  --ok:#166534; --ok-soft:#e8f5ec;
  --r:10px; --shadow:0 1px 2px rgba(18,22,28,.06), 0 8px 24px rgba(18,22,28,.06);
  --sans:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,"D2Coding",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; letter-spacing:-.02em; font-weight:700}
button,input,select{font:inherit; color:inherit}
a{color:var(--accent-ink)}

/* ---------- 공통 컨트롤 ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-3); letter-spacing:.02em}
input[type=text],input[type=password],input[type=date],input[type=file],select{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 18px; border:1px solid var(--accent); border-radius:8px;
  background:var(--accent); color:#fff; font-weight:600; cursor:pointer;
  transition:filter .15s, background .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.btn.ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line)}
.btn.ghost:hover{background:var(--line-2)}
.btn.sm{padding:6px 11px; font-size:13px; border-radius:7px}
.btn.danger{background:var(--danger); border-color:var(--danger)}
.btn:disabled{opacity:.5; cursor:not-allowed; filter:none}

.msg{padding:11px 13px; border-radius:8px; font-size:14px; margin:0}
.msg.err{background:var(--danger-soft); color:var(--danger)}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.msg.warn{background:var(--warn-soft); color:var(--warn)}
.hidden{display:none !important}

.chip{display:inline-block; padding:2px 8px; border-radius:99px; font-size:12px; font-weight:600}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.err{background:var(--danger-soft); color:var(--danger)}
.chip.mute{background:var(--line-2); color:var(--ink-3)}

/* ---------- 로그인 ---------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:32px 28px; box-shadow:var(--shadow);
}
.login-card .eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--accent);
  text-transform:uppercase; margin-bottom:8px}
.login-card h1{font-size:22px; margin-bottom:6px}
.login-card p.sub{margin:0 0 24px; color:var(--ink-3); font-size:13.5px}
.login-card form{display:flex; flex-direction:column; gap:14px}
.login-foot{margin-top:20px; font-size:12px; color:var(--ink-3); text-align:center; line-height:1.7}

/* ---------- 직원 화면 ---------- */
.topbar{
  background:var(--ink); color:#fff; padding:0 20px; height:56px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topbar .brand{font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.topbar .brand .dot{width:8px; height:8px; border-radius:2px; background:var(--accent)}
.topbar .who{font-size:13px; color:#aeb8c6; display:flex; align-items:center; gap:12px}
.topbar .who b{color:#fff; font-weight:600}
.topbar button{
  background:transparent; border:1px solid #3a444f; color:#e6eaf0; padding:6px 12px;
  border-radius:7px; cursor:pointer; font-size:13px;
}
.topbar button:hover{background:#222a33}

.staff-main{max-width:640px; margin:0 auto; padding:32px 20px 80px}
.search-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--shadow);
}
.search-panel h2{font-size:17px; margin-bottom:4px}
.search-panel .hint{color:var(--ink-3); font-size:13.5px; margin:0 0 18px}
.search-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.search-actions{display:flex; gap:10px; margin-top:16px}
.search-actions .btn{flex:1}

/* 안내(빈 상태) */
.empty{
  margin-top:22px; padding:38px 20px; text-align:center; color:var(--ink-3);
  border:1px dashed var(--line); border-radius:var(--r); background:rgba(255,255,255,.55);
  font-size:14px;
}

/* 동명이인 목록 */
.pick{margin-top:22px}
.pick h3{font-size:13px; color:var(--ink-3); font-weight:600; margin-bottom:8px}
.pick-item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:12px 14px; margin-bottom:8px; cursor:pointer;
}
.pick-item:hover{border-color:var(--accent); background:var(--accent-soft)}
.pick-item[aria-current=true]{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.pick-item .nm{font-weight:700; min-width:76px}
.pick-item .meta{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); display:flex; gap:14px; flex-wrap:wrap}

/* 회원 확인표 (signature) */
.slip{
  position:relative; margin-top:22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
  animation:slip-in .22s ease-out;
}
@keyframes slip-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.slip{animation:none}}
.slip .slip-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px dashed var(--line);
  background:linear-gradient(var(--surface),#f7f9fc);
}
.slip .slip-head .t{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--accent)}
.slip .slip-head .n{font-size:19px; font-weight:700}
.slip .rows{position:relative; z-index:1}
.slip .row{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:11px 18px; border-bottom:1px solid var(--line-2)}
.slip .row:last-child{border-bottom:0}
.slip .row dt{font-size:12.5px; color:var(--ink-3); font-weight:600; margin:0}
.slip .row dd{margin:0; font-family:var(--mono); font-size:14.5px; font-variant-numeric:tabular-nums; word-break:break-all}
.slip .row dd.text{font-family:var(--sans)}
.slip .wm{position:absolute; inset:0; pointer-events:none; z-index:0}
.slip .slip-foot{
  padding:10px 18px; border-top:1px solid var(--line); background:#f7f9fc;
  font-size:11.5px; color:var(--ink-3); font-family:var(--mono); display:flex;
  justify-content:space-between; gap:10px; flex-wrap:wrap;
}

/* ---------- 관리자 화면 ---------- */
.admin{display:flex; min-height:100vh}
.side{
  width:216px; flex:0 0 216px; background:var(--ink); color:#c8d0da;
  display:flex; flex-direction:column; padding:18px 0;
}
.side .logo{padding:0 20px 18px; color:#fff; font-weight:700; display:flex; align-items:center; gap:9px}
.side .logo .dot{width:8px; height:8px; border-radius:2px; background:var(--accent)}
.side nav{display:flex; flex-direction:column; gap:2px; padding:0 10px}
.side nav button{
  text-align:left; background:transparent; border:0; color:#c8d0da; padding:10px 12px;
  border-radius:8px; cursor:pointer; font-size:14px;
}
.side nav button:hover{background:#1c2129; color:#fff}
.side nav button[aria-current=page]{background:var(--accent); color:#fff; font-weight:600}
.side .side-foot{margin-top:auto; padding:14px 20px 0; font-size:12px; color:#7d8896; border-top:1px solid #232a33}
.side .side-foot button{margin-top:8px; background:transparent; border:1px solid #3a444f; color:#e6eaf0;
  padding:6px 10px; border-radius:7px; cursor:pointer; font-size:12.5px}

.content{flex:1; padding:26px 30px 60px; min-width:0}
.content > header{margin-bottom:20px}
.content > header h1{font-size:20px}
.content > header p{margin:4px 0 0; color:var(--ink-3); font-size:13.5px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:22px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.stat .k{font-size:12px; color:var(--ink-3); font-weight:600}
.stat .v{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; letter-spacing:-.02em}
.stat .v small{font-size:13px; font-weight:600; color:var(--ink-3)}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-bottom:18px}
.panel h2{font-size:15px; margin-bottom:14px}
.panel .row-flex{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}

table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-2); vertical-align:middle}
th{font-size:12px; color:var(--ink-3); font-weight:600; background:#f7f9fc; position:sticky; top:0}
td.mono,th.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.table-wrap{overflow:auto; max-height:62vh; border:1px solid var(--line); border-radius:8px}

.progress{height:8px; background:var(--line-2); border-radius:99px; overflow:hidden; margin:10px 0 6px}
.progress > i{display:block; height:100%; background:var(--accent); width:0; transition:width .25s}

.radio-row{display:flex; gap:10px; flex-wrap:wrap}
.radio-card{
  flex:1; min-width:220px; border:1px solid var(--line); border-radius:9px; padding:12px 14px;
  cursor:pointer; background:var(--surface);
}
.radio-card:hover{border-color:var(--accent)}
.radio-card input{margin-right:8px}
.radio-card b{font-size:14px}
.radio-card span{display:block; color:var(--ink-3); font-size:12.5px; margin-top:3px; padding-left:22px}
.radio-card:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}

/* 모바일 */
@media (max-width:820px){
  .admin{flex-direction:column}
  .side{width:100%; flex:none; flex-direction:row; align-items:center; padding:10px 12px; gap:10px; overflow-x:auto}
  .side .logo{padding:0 8px 0 4px; white-space:nowrap}
  .side nav{flex-direction:row; padding:0; gap:4px}
  .side nav button{white-space:nowrap; padding:8px 10px; font-size:13px}
  .side .side-foot{margin:0 0 0 auto; padding:0 4px; border:0; white-space:nowrap}
  .side .side-foot span{display:none}
  .content{padding:18px 14px 50px}
  .search-grid{grid-template-columns:1fr}
}

/* 로그인 화면 전환 링크 */
.login-alt{margin:14px 0 0; text-align:center}
.login-alt a{font-size:12.5px; color:var(--ink-3); text-decoration:none}
.login-alt a:hover{color:var(--accent); text-decoration:underline}

/* 관리자 로그인 화면은 색을 달리해 직원 화면과 구분 */
body.admin-login{background:#161c24}
body.admin-login .login-card{border-color:#2b3541; box-shadow:0 12px 40px rgba(0,0,0,.35)}
body.admin-login .login-card .eyebrow{color:var(--ink-3)}
body.admin-login .btn{background:var(--ink); border-color:var(--ink)}

.stamp{margin:-12px 0 16px; font-size:12px; color:var(--ink-3); font-family:var(--mono)}

.stat .v{font-size:26px}
.cards .stat:last-child .v{font-size:15px; font-family:var(--mono)}

/* 위험 구역 */
.danger-zone{border-color:#f3c9c9; background:#fff8f8}
.danger-zone h2{color:#b42318}
.danger-zone p{margin:4px 0 0; font-size:13px; color:#7a5c5c}
.dz-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.btn.danger{background:#d92d20; border-color:#d92d20; color:#fff}
.btn.danger:hover{background:#b42318}

.head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ── 직원 검색 결과 표 ── */
.result-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff}
.result-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px}
.result-table th{position:sticky; top:0; background:#f4f6f9; color:var(--ink-3); font-weight:600;
  font-size:12px; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.result-table td{padding:11px 12px; border-bottom:1px solid #eef1f5; white-space:nowrap; vertical-align:middle}
.result-table tbody tr:last-child td{border-bottom:none}
.result-table tbody tr:hover td{background:#fafbfd}
.result-table td.mono{font-family:var(--mono); font-size:13px}
.result-table td.strong{font-weight:600; color:var(--ink)}
.aff-chip{display:inline-block; padding:3px 10px; border-radius:6px; font-weight:700; font-size:12.5px;
  color:#1f2937; letter-spacing:.2px; min-width:44px; text-align:center}
.result-foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:8px 12px; font-size:11.5px; color:var(--ink-3); font-family:var(--mono); border-top:1px solid #eef1f5; background:#fafbfd}
@media (max-width:640px){ .result-table{font-size:12.5px} .result-table th,.result-table td{padding:8px 9px} }

/* 결과 표는 검색창보다 넓게 */
.pick{width:min(1100px, calc(100vw - 40px)); margin-left:calc(50% - min(550px, calc(50vw - 20px)))}
.result-table{min-width:820px}
.result-table th.sortable{cursor:pointer; user-select:none}
.result-table th.sortable:hover{background:#e9edf3; color:var(--ink)}
.result-table th.sortable .arrow{margin-left:6px; font-size:10px; opacity:.45}
.result-table th.sortable.active{color:var(--accent)}
.result-table th.sortable.active .arrow{opacity:1}
/* 행 배경은 흰색으로 통일 — 색은 계열사 칩에만 */
.result-table tbody tr{background:#fff}
.result-table tbody tr:hover td{background:#f7f9fc}

/* 페이지 번호 */
.pager{display:flex; gap:6px; justify-content:center; align-items:center; padding:12px; border-top:1px solid #eef1f5; background:#fff; flex-wrap:wrap}
.pager button{min-width:34px; height:34px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:13.5px; cursor:pointer; color:var(--ink)}
.pager button:hover:not(:disabled){background:#f0f4fa; border-color:#c9d3e0}
.pager button.current{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; cursor:default}
.pager button:disabled:not(.current){opacity:.35; cursor:default}
.pager span{padding:0 4px; color:var(--ink-3)}

.search-grid .field-wide{grid-column:1 / -1}
.field label .opt{font-weight:400; color:var(--ink-3); font-size:12px}

/* 계열사 선택 메뉴 (표 머리글 안) */
.aff-select{margin-left:8px; padding:3px 6px; border:1px solid var(--line); border-radius:6px; background:#fff;
  font-size:12px; color:var(--ink); cursor:pointer; max-width:150px}
.aff-select:hover{border-color:var(--accent)}

.pick-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.pick-head h3{margin:0}