/* Shion 출근부 — 공통 스타일. 색·간격 토큰은 :root에서만 바꿉니다. */
:root{
  --ground:#F3F5F9; --surface:#FFFFFF; --white:#FFFFFF; --ink:#18212F; --ink2:#3B4656; --muted:#5B6676;
  --line:#DFE3EA; --line2:#ECEFF4; --field:#838D9C;
  --accent:#2563EB; --accent-ink:#1D4ED8; --accent-soft:#E6EEFF;
  --warn:#C2410C; --warn-ink:#9A3412; --warn-soft:#FDEBE1;
  --side:#FFFFFF; --side-ink:#2A3443; --side-muted:#5B6676; --side-border:#DFE3EA; --side-hover:#F0F3F8;
  --side-on-bg:#E6EEFF; --side-on-ink:#1D4ED8; --side-btn-border:#CBD2DC;
  --past:#6A7484; --past-off:#D5DAE2; --line-strong:#B4BDCA;
  /* 휴무 = 빨강, 휴가 = 초록 (모든 화면 공통) */
  --off-bg:#FDE4E4; --off-ink:#B42318; --vac-bg:#DCF3E4; --vac-ink:#15703A;
  /* 글자 굵기: 기본을 약간 굵게(600) 두고, 강조는 800. 전부 같은 굵기면 위계가 사라지므로 두 단계를 둡니다. */
  --w-body:600; --w-strong:800;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* 숫자·시각도 같은 글꼴을 쓰고, 자릿수가 맞도록 숫자 폭만 고정합니다(아래 body의 tabular-nums). */
  --mono:var(--sans);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:var(--w-body);line-height:1.5;font-variant-numeric:tabular-nums;font-feature-settings:'tnum';-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-ink)}
button,input,select,textarea{font-family:inherit;font-size:14px;font-weight:inherit;color:inherit}
b,strong{font-weight:var(--w-strong)}
button{cursor:pointer}button:disabled{opacity:.55;cursor:default}
h1{margin:0;font-size:24px;font-weight:var(--w-strong)}h2{margin:0;font-size:16px;font-weight:var(--w-strong)}
.mono{font-family:var(--mono)} .muted{color:var(--muted)} .small{font-size:12px} .right{text-align:right}
.plus{color:var(--accent-ink)} .minus{color:var(--warn-ink)}
.loading{padding:48px;text-align:center;color:var(--muted)}

/* 버튼·입력 */
.btn{height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--ink);color:#fff;font-weight:700}
.btn.accent{background:var(--accent)} .btn.warn{background:var(--warn)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--ink)}
.btn.sm{height:36px;padding:0 12px;font-size:13px} .btn.big{height:64px;font-size:20px;border-radius:14px;width:100%}
.field{display:flex;flex-direction:column;gap:4px}.field label{font-size:12px;color:var(--ink2)}
.input{height:44px;width:100%;border:1px solid var(--field);border-radius:10px;background:var(--white);padding:0 10px}
textarea.input{height:auto;padding:10px;min-height:72px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.row{display:flex;align-items:center;gap:10px}.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}.stack.lg{gap:20px}.stack.sm{gap:6px}

/* 카드·표시 */
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:18px}
.card.flat{background:var(--line2);border-color:transparent}.card.alert{border-color:var(--warn)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.tile .v{font-family:var(--mono);font-size:19px;font-weight:700}.tile .k{font-size:12px;color:var(--muted)}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--line2);color:var(--ink2);white-space:nowrap}
.chip.ok{background:var(--accent-soft);color:var(--accent-ink)}.chip.bad{background:var(--warn-soft);color:var(--warn-ink)}
.notice{border-radius:12px;padding:12px 14px;font-size:13px}
.notice.bad{background:var(--warn-soft);color:var(--warn-ink)}.notice.ok{background:var(--accent-soft);color:var(--accent-ink)}.notice.info{background:var(--line2);color:var(--ink2)}
.calc{background:var(--accent-soft);color:var(--accent-ink);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:baseline}
.calc.bad{background:var(--warn-soft);color:var(--warn-ink)}

/* 표 */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:middle}
thead th{font-size:12px;font-weight:700;color:var(--muted);border-bottom-color:var(--line);white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--mono)}
tr.sel{background:var(--accent-soft)} tr.click{cursor:pointer}

/* 데스크톱 레이아웃 */
.shell{display:flex;min-height:100vh}
.main{flex-grow:1;min-width:0;padding:32px 36px;display:flex;flex-direction:column;gap:20px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){
  .main{padding:20px 16px}.cols{grid-template-columns:minmax(0,1fr)}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 직원(모바일) 레이아웃 */
.mshell{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.mmain{flex-grow:1;padding:24px 20px 96px;display:flex;flex-direction:column;gap:14px}
.mnav{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line)}
.mnav div{max-width:480px;margin:0 auto;display:flex}
.mnav a{flex:1;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;color:var(--ink2)}
.mnav a.on{color:var(--accent);font-weight:700}
.mnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.state{font-size:30px;font-weight:var(--w-strong)}.bigtime{font-family:var(--mono);font-size:22px;font-weight:700}
.dayrow{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.dayrow.alert{border-color:var(--warn)}.dayrow.off{background:var(--line2);border-color:transparent}
.dayrow .top{display:flex;align-items:center;gap:12px}.dayrow .d{width:48px}.dayrow .mid{flex-grow:1;min-width:0}
.dayrow .delta{font-family:var(--mono);font-size:18px;font-weight:700;text-align:right}

/* 캘린더 */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .wd{font-size:12px;color:var(--muted);text-align:center}
.cell{position:relative;min-height:48px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;border:1px solid transparent;background:none;padding:0;width:100%}
.cell small{font-family:var(--sans);font-size:11px;font-weight:700}
button.cell{background:var(--surface);border-color:var(--line)}
.cell.past{color:var(--past)}.cell.today{border:2px solid var(--ink)}
.cell.off{background:var(--off-bg);color:var(--off-ink);border-color:var(--off-ink)}.cell.off.past{background:var(--past-off);color:var(--ink2);border-color:transparent}
.cell.vac{background:var(--vac-bg);color:var(--vac-ink);border-color:var(--vac-ink)}
.cell .dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:999px;background:var(--warn);border:1px solid var(--surface)}
.cal.wide .cell{min-height:132px;align-items:stretch;justify-content:flex-start;padding:6px;background:var(--surface);border-color:var(--line);font-size:12px}
.cal.wide .cell .names{display:flex;flex-direction:column;gap:2px;margin-top:4px;font-family:var(--sans);font-size:11px;min-width:0;width:100%}
.cal.wide button.cell{text-align:left;cursor:pointer;color:var(--ink)}
.cal.wide .cell.sel{border:2px solid var(--accent)}
.cal.wide .ln{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal.wide .sum{display:none;color:var(--muted)}
@media (max-width:900px){.cal.wide .cell{min-height:56px;padding:4px}.cal.wide .ln{display:none}.cal.wide .sum{display:block;font-size:10px}}
.seg{display:inline-flex;border:1px solid var(--field);border-radius:10px;overflow:hidden}
.seg button{height:40px;padding:0 16px;border:0;background:var(--white)}.seg button.on{background:var(--ink);color:#fff;font-weight:var(--w-strong)}

/* 로그인 */
/* 로그인 화면의 모양은 css/login.css(공용)가 정합니다. 여기서는 출근부의 강조색(파비콘 색)만 지정합니다. .login 은 자바스크립트가 꺼진 경우의 안내에만 씁니다. */
.lg-wrap{--lg-accent:#2563EB}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;max-width:90vw;z-index:50}
.toast.bad{background:var(--warn)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}

/* 휴무·휴가 등록 내역: 직원별로 휴무 한 줄, 휴가 한 줄 */
.offrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line2);align-items:start}
.offline{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;align-items:center}
.offline .lbl{font-size:12px;font-family:var(--mono)}
.offline .dates{gap:4px}
button.datechip{border:0;cursor:pointer;font-family:var(--mono);font-size:12px;padding:3px 9px}
button.datechip:hover{background:var(--warn-soft);color:var(--warn-ink)}

/* 직원 이름 색(키는 DB의 users.color). 연한 바탕 + 같은 계열의 진한 글자. 글자 대비 4.5:1 이상.
   상태 칩(.chip)은 완전히 둥근 알약 모양, 이름은 모서리 6px 사각형이라 색이 비슷해도 모양으로 구분됩니다. */
.nm[class*=" c"]{display:inline-block;padding:0 6px;border-radius:6px;font-weight:700;line-height:1.5}
.nm.c1{color:#475569;background:#f1f5f9}.nm.c2{color:#b91c1c;background:#fee2e2}.nm.c3{color:#c2410c;background:#ffedd5}.nm.c4{color:#b45309;background:#fef3c7}.nm.c5{color:#a16207;background:#fef9c3}.nm.c6{color:#4d7c0f;background:#ecfccb}.nm.c7{color:#15803d;background:#dcfce7}.nm.c8{color:#047857;background:#d1fae5}.nm.c9{color:#0f766e;background:#ccfbf1}.nm.c10{color:#0e7490;background:#cffafe}.nm.c11{color:#0369a1;background:#e0f2fe}.nm.c12{color:#1d4ed8;background:#dbeafe}.nm.c13{color:#4338ca;background:#e0e7ff}.nm.c14{color:#6d28d9;background:#ede9fe}.nm.c15{color:#7e22ce;background:#f3e8ff}.nm.c16{color:#a21caf;background:#fae8ff}.nm.c17{color:#be185d;background:#fce7f3}.nm.c18{color:#be123c;background:#ffe4e6}.nm.c19{color:#57534e;background:#f5f5f4}.nm.c20{color:#4b5563;background:#f3f4f6}
.cal.wide .ln .nm[class*=" c"]{padding:0 4px;border-radius:5px}
.swatches{gap:6px}
.swatch{width:32px;height:32px;border-radius:8px;border:2px solid transparent;padding:0;font-size:11px;color:var(--ink2)}
.swatch.none{width:auto;padding:0 10px;background:var(--white);border-color:var(--field)}
.swatch.c1{background:#f1f5f9;border-color:#475569}.swatch.c2{background:#fee2e2;border-color:#b91c1c}.swatch.c3{background:#ffedd5;border-color:#c2410c}.swatch.c4{background:#fef3c7;border-color:#b45309}.swatch.c5{background:#fef9c3;border-color:#a16207}.swatch.c6{background:#ecfccb;border-color:#4d7c0f}.swatch.c7{background:#dcfce7;border-color:#15803d}.swatch.c8{background:#d1fae5;border-color:#047857}.swatch.c9{background:#ccfbf1;border-color:#0f766e}.swatch.c10{background:#cffafe;border-color:#0e7490}.swatch.c11{background:#e0f2fe;border-color:#0369a1}.swatch.c12{background:#dbeafe;border-color:#1d4ed8}.swatch.c13{background:#e0e7ff;border-color:#4338ca}.swatch.c14{background:#ede9fe;border-color:#6d28d9}.swatch.c15{background:#f3e8ff;border-color:#7e22ce}.swatch.c16{background:#fae8ff;border-color:#a21caf}.swatch.c17{background:#fce7f3;border-color:#be185d}.swatch.c18{background:#ffe4e6;border-color:#be123c}.swatch.c19{background:#f5f5f4;border-color:#57534e}.swatch.c20{background:#f3f4f6;border-color:#4b5563}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.cal.wide .ln .tag{margin-left:4px;font-size:10px;padding:0 5px;border-radius:999px;background:var(--line2);color:var(--ink2)}


/* ── 0.6.1 UI 조정 ── */
/* 팀 캘린더: 굵은 테두리, 큰 글씨, 오늘 강조, 휴무(빨강)·휴가(파랑) 배지 */
.cal .wd{font-size:13px;font-weight:700;color:var(--ink2)}
.cal.wide .cell{border:2px solid var(--line-strong);font-size:14px;font-weight:700}
.cal.wide .cell .names{font-size:13px;gap:3px;margin-top:5px}
.cal.wide .cell.today{border-color:var(--accent);background:var(--accent-soft)}
.cal.wide .cell.sel{border-color:var(--ink)}
.cal.wide .cell.today.sel{border-color:var(--accent-ink);box-shadow:0 0 0 2px var(--accent-ink) inset}
.cal.wide .ln .tag{margin-left:4px;font-size:12px;font-weight:700;padding:0 7px;border-radius:999px}
.cal.wide .ln .tag.off{background:var(--off-bg);color:var(--off-ink)}
.cal.wide .ln .tag.vac{background:var(--vac-bg);color:var(--vac-ink)}
@media (max-width:900px){.cal.wide .cell{border-width:1px;font-size:12px}}
/* 격자 표: 세로 기준선, 가운데 정렬, 열 폭 균일, 머리글과 본문 같은 글꼴 */
table.gridtable{table-layout:fixed}
table.gridtable th,table.gridtable td,table.gridtable td.num,table.gridtable th.num{text-align:center;border-left:1px solid var(--line);font-family:var(--sans)}
table.gridtable tr>*:first-child{border-left:0}
table.gridtable thead th{font-size:14px;color:var(--ink);font-weight:var(--w-strong);background:var(--line2);border-bottom:1px solid var(--line-strong)}
table.gridtable .row{justify-content:center}
table.gridtable.dense th,table.gridtable.dense td{padding:5px 8px}
table.gridtable.dense .input{height:34px;text-align:center}
/* 좌우 배치 */
.cols.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.cols.rev>:first-child{order:2}
.cols46{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:16px;align-items:start}
@media (max-width:900px){.cols.rev,.cols46{grid-template-columns:minmax(0,1fr)}.cols.rev>:first-child{order:0}}
/* 별도 창(모달) */
.modal-back{position:fixed;inset:0;background:rgba(24,33,47,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:40}
.modal{width:min(560px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 20px 50px rgba(24,33,47,.25)}
.modal>.card{border:0;border-radius:16px}
.modal-head{display:flex;justify-content:flex-end;padding:10px 12px 0}

/* ── 0.6.2 ── */
/* 휴무·휴가 표시 칩 */
.chip.off{background:var(--off-bg);color:var(--off-ink)}.chip.vac{background:var(--vac-bg);color:var(--vac-ink)}
button.datechip.off{background:var(--off-bg);color:var(--off-ink)}button.datechip.vac{background:var(--vac-bg);color:var(--vac-ink)}
button.datechip.off:hover,button.datechip.vac:hover{box-shadow:0 0 0 2px currentColor inset;background:var(--white)}
/* 모든 표를 같은 격자 모양으로: 세로 기준선, 가운데 정렬, 열 폭 균일, 머리글 바탕 */
table{table-layout:fixed}
th,td,td.num,th.num,td.right{text-align:center;border-left:1px solid var(--line);font-family:var(--sans);overflow-wrap:anywhere}
tr>*:first-child{border-left:0}
thead th{font-size:14px;color:var(--ink);font-weight:var(--w-strong);background:var(--line2);border-bottom:1px solid var(--line-strong);white-space:normal}
td .row,th .row{justify-content:center}
td .btn.sm{height:32px}
/* 지난 기록 입력: 한 카드 안의 단계 구성 */
.step{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--line2)}
.step:first-of-type{border-top:0;padding-top:0}
.stephead{display:flex;align-items:center;gap:8px}
.stepno{width:24px;height:24px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:var(--w-strong);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.stepbody{display:flex;flex-direction:column;gap:10px;min-width:0}
.savebar{display:flex;justify-content:space-between;align-items:center;gap:12px}
@media (max-width:900px){.step{grid-template-columns:minmax(0,1fr)}}

/* ── 0.6.3 ── */
/* 지난 기록 입력 ③: 시각 입력과 버튼을 한 줄로(좁으면 자동 줄바꿈). 시각 입력란은 내용만큼만 */
.bulkrow{gap:8px}
.bulkrow .field{width:132px;flex-shrink:0}
.bulkrow .btn{white-space:nowrap;padding:0 14px}
/* 표 안의 상태 칩은 본문 크기에 맞춰 키움 */
td .chip{font-size:13px;padding:3px 10px}

/* ── 0.6.4 ── 지난 기록 입력: 단계 머리글을 가로 한 줄로, 입력란은 아래. 저장은 오른쪽 버튼 하나 */
.step{display:flex;flex-direction:column;gap:10px;padding:14px 0}
.stephead{flex-wrap:wrap;gap:8px 10px}
.stephead .small{font-weight:var(--w-body)}
.stepbody{padding-left:34px}
.saverow{display:flex;justify-content:flex-end}
.step.saverow{flex-direction:row}
@media (max-width:900px){.stepbody{padding-left:0}}

/* ── 0.6.5 ── 지난 기록 입력: 단계마다 한 줄(왼쪽 머리글, 오른쪽 입력란·버튼)로 세로 높이를 줄임 */
.step{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:9px 0}
.step:first-of-type{padding-top:0}
.stephead{flex-wrap:nowrap;white-space:nowrap}
.stepbody{padding-left:0;margin-left:auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}
.step .row{justify-content:flex-end}
.targetrow select.input{width:180px}.targetrow input.input{width:380px;max-width:100%}
.inlinefield{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.bulkrow .inlinefield .input{width:128px}
.step.saverow{padding-bottom:0;justify-content:flex-end}
.card[data-section=manual-form]{padding-top:14px;padding-bottom:14px}
@media (max-width:900px){.stephead{white-space:normal;flex-wrap:wrap}.stepbody{margin-left:0;justify-content:flex-start}.step .row{justify-content:flex-start}.targetrow input.input{width:100%}}


/* ── 0.7.0 ── 직원 화면: 한 페이지(왼쪽 오늘, 오른쪽 캘린더) */
.sshell{min-height:100vh;display:flex;flex-direction:column}
.sbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;background:var(--side);border-bottom:1px solid var(--side-border)}
.sbar b{font-size:16px;white-space:nowrap}
.sbar nav{gap:6px;justify-content:flex-end}
.sbar nav a,.sbar nav button{height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--side-btn-border);background:none;color:var(--side-ink);font-size:13px;display:inline-flex;align-items:center;white-space:nowrap}
.sbar nav a:hover,.sbar nav button:hover,.sbar nav a.on{background:var(--side-on-bg);color:var(--side-on-ink)}
.smain{flex-grow:1;width:100%;max-width:1500px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.scols{display:grid;grid-template-columns:380px minmax(0,1fr);gap:20px;align-items:start}
.cal.wide.mine .cell{min-height:104px}
.cal.wide.mine .cell.past{color:var(--past)}
.corrrow select.input{width:130px}.corrrow input[type=time]{width:140px}.corrrow input[type=text]{flex:1 1 240px;width:auto}
@media (max-width:900px){.scols{grid-template-columns:minmax(0,1fr)}.smain{padding:16px}.sbar{padding:10px 16px}.cal.wide.mine .cell{min-height:56px}.corrrow select.input,.corrrow input[type=time]{width:100%}}

/* ── 0.7.1 ── 직원 화면: 상세 패널을 캘린더 오른쪽에(타일 2칸, 정정 요청은 세로) */
.scols{grid-template-columns:340px minmax(0,1fr)}
.calwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.daypanel .corrrow{flex-direction:column;align-items:stretch}
.daypanel .corrrow select.input,.daypanel .corrrow input[type=time],.daypanel .corrrow input[type=text]{width:100%;flex:none}
.daypanel .corrrow .btn{width:100%}
.daypanel [data-actions=dayoff] .btn{flex:1 1 0}
.daypanel .tile .v{font-size:17px}
.cal.wide.mine .cell .names{font-size:12px}
@media (max-width:1280px){.calwrap{grid-template-columns:minmax(0,1fr)}}

/* ── 0.7.2 ── 직원 화면: 전체 폭을 넓히고 세 칸 비율을 1 : 1.5 : 1 로 */
.smain{max-width:1840px}
.scols{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);gap:20px}
.calwrap{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px}
@media (max-width:1280px){.scols{grid-template-columns:320px minmax(0,1fr)}.calwrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.scols{grid-template-columns:minmax(0,1fr)}}

/* ── 0.8.0 ── 팀 삭제 버튼, 나타나는 효과 */
.chip.teamchip{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:3px 4px 3px 10px}
.chip.teamchip button{width:20px;height:20px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.chip.teamchip button:hover{background:var(--warn-soft);color:var(--warn-ink)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* 페이지를 열 때, 월 이동·탭 전환 때: 카드들이 위에서부터 차례로 올라옵니다 */
#app.entering .main>.stack>*:not(.cols):not(.modal-back),#app.entering .smain>.stack>*:not(.scols),
#app.entering .cols>*,#app.entering .scols>*>*:not(.calwrap),#app.entering .calwrap>*,#app.entering [data-section]>*:not(.cols):not(.calwrap){animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
#app.entering .main>.stack>*:nth-child(2),#app.entering .smain>.stack>*:nth-child(2),#app.entering .cols>*:nth-child(2),#app.entering [data-section]>*:nth-child(2){animation-delay:.06s}
#app.entering .main>.stack>*:nth-child(3),#app.entering [data-section]>*:nth-child(3){animation-delay:.12s}
#app.entering .main>.stack>*:nth-child(4),#app.entering [data-section]>*:nth-child(4){animation-delay:.18s}
#app.entering .main>.stack>*:nth-child(n+5),#app.entering [data-section]>*:nth-child(n+5){animation-delay:.24s}
#app.entering .grid3>.card:nth-child(2){animation-delay:.07s}#app.entering .grid3>.card:nth-child(3){animation-delay:.14s}
#app.entering .grid3>.card{animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
#app.entering .calwrap>*:nth-child(2){animation-delay:.1s}
/* 무언가를 눌러 새로 나오는 카드·창·알림 */
.appear{animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
.modal-back.appear{animation:fadein .2s ease both}.modal-back.appear .modal{animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
.toast.appear{animation:fadein .2s ease both}
/* 움직임 줄이기를 켠 기기에서는 효과를 끕니다 */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── 0.8.1 ── 시각 입력: 시·분 선택란 */
.timepick{display:inline-flex;align-items:center;gap:4px;width:100%}
.timepick select.input{flex:1 1 0;min-width:0;padding:0 6px;text-align:center;text-align-last:center}
.bulkrow .inlinefield .timepick{width:150px}
.corrrow .timepick{width:150px}.daypanel .corrrow .timepick{width:100%}
table.gridtable.dense .timepick select.input{height:34px}

/* ── 0.8.2 ── 시각 선택란이 다른 규칙(입력란 폭 100%·고정 폭)에 걸려 칸 밖으로 넘치던 문제.
   시·분 선택란은 항상 자기 묶음(.timepick) 안에서 반반씩 나눠 갖습니다. */
.timepick select.input,.corrrow .timepick select.input,.daypanel .corrrow .timepick select.input,.bulkrow .inlinefield .timepick select.input,.targetrow .timepick select.input{width:auto;flex:1 1 0;min-width:0}
.timepick{min-width:0;max-width:100%}

/* ── 0.8.3 ── 권한 설정: 메뉴별 묶음 표 */
table.permtable td.permlabel{text-align:left;padding-left:22px}
table.permtable tr.grouprow th{text-align:left;background:var(--accent-soft);color:var(--accent-ink);font-size:14px;font-weight:var(--w-strong);padding:9px 12px;border-left:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
table.permtable td.permlabel .chip{font-size:11px;padding:1px 8px;margin-right:4px}

/* ── 0.9.3 ── 휴대폰 직원 화면: 칸 안의 짧은 표시에도 휴무(빨강)·휴가(초록)·누락 색, 팀원 휴무 점은 정보용 회색 */
.cal.wide .sum .off{color:var(--off-ink);font-weight:var(--w-strong)}.cal.wide .sum .vac{color:var(--vac-ink);font-weight:var(--w-strong)}.cal.wide .sum .minus{color:var(--warn-ink)}
.cal.wide.mine .dot{background:var(--muted)}
.dotkey{display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--muted);vertical-align:middle}
@media (max-width:900px){.cal.wide .sum{font-size:11px}.daypanel{scroll-margin-top:12px}}

.main h1{line-height:32px}
.pagehead{align-items:center}
/* 현황 카드: 한 줄에 4개, 글자 축소 */
.grid3.status{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid3.status .card{padding:12px 14px;gap:6px}
.grid3.status .card b{font-size:15px!important}
.grid3.status .bigtime{font-size:18px}
.grid3.status .small{font-size:11.5px;line-height:1.4}
.grid3.status .chip{font-size:10.5px;padding:2px 8px}
@media (max-width:1400px){.grid3.status{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.grid3.status{grid-template-columns:minmax(0,1fr)}}
/* 팀 캘린더: 제목 아래 가운데에 월 이동, 그 아래 달력 6 : 상세 4 */
.tcnav{display:flex;justify-content:center}
.tcwrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:16px;align-items:start}
/* 팀 캘린더: 왼쪽 달력(휴무만) + 오른쪽 선택한 날의 팀원별 상세 */
.cal.wide.offs .cell{min-height:84px;font-size:13px}
.cal.wide.offs .cell .names{font-size:12px;gap:2px;margin-top:4px}
.cal.wide.offs .ln .nm[class*=" c"]{padding:0 4px}
.cal.wide.offs .cell .warnsum{margin-top:auto;font-size:11px;color:var(--warn-ink);font-weight:var(--w-strong)}
.tcday{display:flex;flex-direction:column;gap:8px}
.tcrow{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.tcrow.alert{border-color:var(--warn)}.tcrow.rest{background:var(--line2)}
.tcrow .top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tcrow .times{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--sans)}
.tcrow .times span{white-space:nowrap}.tcrow .times .k{color:var(--muted);font-size:12px;margin-right:4px}
@media (max-width:1280px){.tcwrap{grid-template-columns:minmax(0,1fr)}}

/* ── 0.9.8 ── 직원 관리 표 행 높이 축소 */
table.dense th,table.dense td{padding:6px 8px}
table.dense td .small{line-height:1.3}

/* ── 0.9.9 ── 직원 관리 표시 순서 */
th.ordercell,td.ordercell{width:58px;padding-left:4px;padding-right:4px}
.orderbtn{width:22px;height:22px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:10px;color:var(--ink2);cursor:pointer;padding:0;margin:0 1px}
.orderbtn:hover{background:var(--side-hover)}
tr[draggable=true]{cursor:grab}

/* ── 0.9.10 ── 팀 캘린더 칸 세로 확대 */
.cal.wide.offs .cell{min-height:124px}
.cal.wide.offs .cell .names{gap:3px}
@media (max-width:900px){.cal.wide.offs .cell{min-height:64px}}

/* ── 0.10.1 ── 20색 선택기: 10개씩 두 줄 */
.swatches{max-width:400px}

/* ── 0.10.2 ── 이름 색 선택기를 Shion Ticket과 같은 배열로: 원형, 한 줄에 10개, 두 줄 */
.swatchbox{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.swatches{display:grid;grid-template-columns:repeat(10,28px);gap:10px;max-width:none}
.swatch{width:28px;height:28px;border-radius:999px;border:2px solid transparent;padding:0}
.swatch.none{width:auto;height:28px;border-radius:8px;padding:0 10px;background:var(--white);border-color:var(--field);font-size:12px}
.swatch[class*=" c"]{border-color:transparent}
.swatch[aria-pressed=true]{border-color:var(--ink);box-shadow:none}
.swatch.none[aria-pressed=true]{border-color:var(--ink)}


/* ── 0.11.1 ── 직원 홈: 팀원 기준 근무 카드(2열) */
.teamsched{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.teamsched .ts{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid var(--line2);font-size:12px;white-space:nowrap;min-width:0}
.teamsched .ts:nth-last-child(-n+2){border-bottom:0}
.teamsched .ts .nm{font-size:12px;padding:0 5px}
.teamsched .ts.me .mono{font-weight:var(--w-strong)}

/* ── 0.12.0 ── 퇴사자 행 */
tr.left td{color:var(--muted);background:var(--line2)}

/* ── 0.13.0 ── 팀 캘린더: 커버리지 카드 + 직원 카드 2열, 비율 5.5:4.5 */
.tcwrap{grid-template-columns:minmax(0,5.5fr) minmax(0,4.5fr)}
.tcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tccard{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px}
.tccard.alert{border-color:var(--warn)}.tccard.rest{background:var(--line2)}
.tccard .top{display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}
.tccard .who{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.tccard .who .nm{font-size:12px;padding:0 5px}.tccard .sched{font-size:11px;color:var(--muted);white-space:nowrap}
.tccard .chip{font-size:10px;padding:1px 7px}
.tccard .times{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;white-space:nowrap}.tccard .times .k{color:var(--muted);font-size:11px;margin-right:3px}
.btn.xs{height:24px;padding:0 8px;font-size:11px;border-radius:6px}
.tccard .row{gap:4px;flex-shrink:0}
/* 커버리지 */
.covcard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.covgrid{display:grid;grid-template-columns:72px minmax(0,1fr);gap:5px 8px;align-items:center}
.covaxis{position:relative;height:12px;font-size:10px;color:var(--muted)}.covaxis span{position:absolute;transform:translateX(-50%)}.covaxis span:first-child{transform:none}.covaxis span:last-child{transform:translateX(-100%)}
.covcount{display:flex;gap:1px;height:16px;border-radius:4px;overflow:hidden}
.covcount .cc{flex:1}.cc.n0,.lg.n0{background:#dc2626}.cc.n1,.lg.n1{background:#f59e0b}.cc.n2,.lg.n2{background:var(--accent)}
.covrow{display:contents}
.covrow .nm{font-size:11px;padding:0 5px;justify-self:start}
.covtrack{position:relative;height:12px;background:repeating-linear-gradient(90deg,transparent 0 calc(8.333% - 1px),var(--line) calc(8.333% - 1px) 8.333%);border-radius:3px}
.covtrack .seg{position:absolute;top:0;height:100%;background:var(--accent);border-radius:3px}
.covtrack .seg.cont{border-radius:3px 0 0 3px}.covtrack .seg.prev{opacity:.5;border-radius:0 3px 3px 0}
.covtrack .seg.off{background:transparent;border:1px dashed var(--field);box-sizing:border-box}
.covrow>.mono,.covrow>.chip{display:none}
.covlegend .lg{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:middle}
.warnink{color:var(--warn-ink);font-weight:var(--w-strong)}
.cal.wide .cell .gapdot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:999px;background:#dc2626}
@media (max-width:1280px){.tcwrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.tcgrid{grid-template-columns:minmax(0,1fr)}}

/* ── 0.13.1 ── 커버리지 격자 보정: 이름 열 72px 고정, 막대 열 가변 */
.covgrid{grid-template-columns:72px minmax(0,1fr)}
.covrow .nm{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}

/* ── 0.13.2 ── 공통 커버리지 카드 + 직원 홈 재배치 */
.covgrid{display:grid;grid-template-columns:72px minmax(0,1fr);gap:5px 8px;align-items:center}
.covgrid.three{grid-template-columns:64px minmax(0,1fr) 84px}
.covname .nm{font-size:11px;padding:0 5px;display:inline-block;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.covtime{font-size:10.5px;color:var(--muted);white-space:nowrap}.covtime.me{color:var(--ink);font-weight:var(--w-strong)}
.covtime .chip{font-size:10px;padding:0 6px}
.covcard.compact{padding:8px 10px;gap:6px}.covcard.compact .covcount{height:14px}.covcard.compact .covgrid{grid-template-columns:36px minmax(0,1fr)}
.toprow{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;align-items:stretch}
.toprow>.card{display:flex;flex-direction:column;justify-content:space-between}
.tiles3{display:flex;flex-direction:column;gap:6px}
.tiles3>.small{margin:0}
.tiles3 .tile{flex:1;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px}
.tiles3 .tile .k{font-size:12px;color:var(--muted)}.tiles3 .tile .v{font-size:16px}.tiles3 .tile .small{text-align:right}
.scols{grid-template-columns:minmax(0,1.15fr) minmax(0,1.5fr) minmax(0,1fr)}
.calwrap{display:contents}
.dotkey.gap{background:#dc2626}
.cal.wide.mine .cell .gapdot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:999px;background:#dc2626}
.cal.wide.mine .cell .dot{right:16px}
@media (max-width:1280px){.scols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.calwrap{display:grid;grid-template-columns:minmax(0,1fr);grid-column:1 / -1}}
@media (max-width:900px){.scols{grid-template-columns:minmax(0,1fr)}.toprow{grid-template-columns:minmax(0,1fr)}.calwrap{grid-column:auto}}

/* ── 0.13.3 ── 직원 홈: 상세 패널이 캘린더 아래로 떨어지던 문제(calwrap을 다시 격자로), 커버리지 카드 흰 배경 */
.scols{grid-template-columns:minmax(0,1.15fr) minmax(0,2.5fr)}
.calwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.covcard{background:var(--surface)}
@media (max-width:1280px){.scols{grid-template-columns:320px minmax(0,1fr)}.calwrap{display:grid;grid-template-columns:minmax(0,1fr);grid-column:auto}}
@media (max-width:900px){.scols{grid-template-columns:minmax(0,1fr)}}

/* ── 0.13.4 ── 오늘 현황 카드 2줄 압축, 집계 표 열 너비·행 높이 */
.grid3.status .card.scard{padding:9px 12px;gap:3px;display:flex;flex-direction:column}
.scard b .nm{font-size:13.5px;padding:0 6px}
.scard .t{font-size:15px;white-space:nowrap}
.scard .sub{font-size:11.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .chip{font-size:10.5px;padding:1px 8px;flex-shrink:0}
table.gridtable.report th,table.gridtable.report td{padding:6px 6px;font-size:13px;line-height:1.3}
table.gridtable.report thead th{font-size:12.5px;padding:7px 4px}
table.gridtable.report tbody th{text-align:center}
table.gridtable.report tbody th .nm{font-size:13px;padding:0 5px}
table.gridtable.report .small{font-size:11px;line-height:1.3}
table.gridtable.report td.num .small{white-space:nowrap}
table.gridtable.report td.num div:first-child{font-size:13px}

/* ── 0.13.5 ── 집계: 직원 칸 가운데 정렬, 마감 안내를 제목 옆 한 줄로 */
table.gridtable.report tbody th{text-align:center}
.notice.inline{display:inline-block;padding:6px 12px;font-size:12.5px;border-radius:8px;max-width:620px}
@media (max-width:1280px){.notice.inline{max-width:100%}}

/* ── 0.13.6 ── 지난 기록 입력: 글자·세로 폭 축소, 선택 열 최소·나머지 균등 */
.manualpage [data-section=manual-form]{padding:10px 16px}
.manualpage .step{padding:6px 0;gap:6px 12px}
.manualpage .stepno{width:20px;height:20px;font-size:11px}
.manualpage .stephead{gap:8px}.manualpage .stepbody .notice{padding:6px 10px;font-size:12px}
.manualpage .step b{font-size:13px}.manualpage .step .small{font-size:11.5px}
.manualpage .step .input,.manualpage .step select.input{height:32px;font-size:12.5px}
.manualpage .step .btn{height:32px;padding:0 12px;font-size:12.5px}
.manualpage .step .btn.accent.big,.manualpage .saverow .btn{height:34px}
.manualpage .step .timepick select.input{height:32px}
table.gridtable.manual{table-layout:fixed}
table.gridtable.manual th,table.gridtable.manual td{padding:4px 6px;font-size:12.5px}
table.gridtable.manual thead th{font-size:12.5px;padding:6px 4px}
table.gridtable.manual td:first-child,table.gridtable.manual th:first-child{padding-left:4px;padding-right:4px}
table.gridtable.manual .timepick select.input,table.gridtable.manual .input{height:30px;font-size:12.5px}
table.gridtable.manual .timepick{gap:3px;justify-content:center}
table.gridtable.manual .small{font-size:10.5px;line-height:1.2}
table.gridtable.manual .chip{font-size:10.5px;padding:1px 7px}
table.gridtable.manual input[type=checkbox]{width:15px;height:15px}

/* ── 0.13.9 ── 스케줄 수정: 휴무·휴가 등록 내역 2열, 예외 목록 표 압축 */
.offgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.offgrid .offrow{grid-template-columns:68px minmax(0,1fr);gap:8px;padding:7px 0}
.offgrid .offrow:nth-child(-n+2){border-top:0}
.offgrid .offrow>b .nm{font-size:12px;padding:0 5px}
.offgrid .offline{grid-template-columns:92px minmax(0,1fr);gap:6px}
.offgrid .offline .lbl{font-size:11px;white-space:nowrap}
.offgrid .offline .dates{gap:3px}
.offgrid button.datechip{font-size:11px;padding:2px 7px}
.offgrid .stack.sm{gap:4px}
@media (max-width:1100px){.offgrid{grid-template-columns:minmax(0,1fr)}}
[data-section=overrides-list] table th,[data-section=overrides-list] table td{padding:5px 8px;font-size:12.5px}
[data-section=overrides-list] table thead th{font-size:12.5px}
[data-section=overrides-list] .btn.sm{height:26px;padding:0 9px;font-size:11.5px}
[data-section=overrides-list] .small{font-size:11.5px}

/* ── 0.13.10 ── 스케줄 수정: 좌우 1:1, 각 열은 등록 → 목록 순서 */
.cols.half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.colstack>:first-child{order:2}
.colstack>:nth-child(2){order:1}
@media (max-width:1100px){.cols.half{grid-template-columns:minmax(0,1fr)}}

/* ── 0.13.11 ── 승인함: 초과근무·처리 내역 표 압축 */
.approvalspage .card.stack{gap:8px;padding:12px 16px}
.approvalspage .card h2{font-size:15px}
.approvalspage .card>.small{font-size:11.5px}
.approvalspage table th,.approvalspage table td{padding:5px 8px;font-size:12.5px;line-height:1.35}
.approvalspage table thead th{font-size:12.5px}
.approvalspage table td.small,.approvalspage table .small{font-size:11.5px}
.approvalspage table .chip{font-size:10.5px;padding:1px 7px}
.approvalspage table .btn.sm,.approvalspage table .btn{height:26px;padding:0 9px;font-size:11.5px}
.approvalspage table .nm{font-size:12px;padding:0 5px}
.approvalspage table .mono{font-size:12.5px}

/* ── 0.13.12 ── 제목·여백 축소(Shion Ticket과 같은 밀도) */
.main h1{font-size:19px;line-height:28px}
.pagehead>div>.small,.pagehead .small.muted{font-size:12px}

/* ── 0.14.0 ── 집계 직원 창(넓은 모달) + 1년 근태 잔디 */
.modal.wide{width:min(1140px,100%)}
.heatmap{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.hmsum{gap:12px}.hmsum b{font-weight:var(--w-strong)}
.hmwrap{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 6px;align-items:start}
.hmwd{display:grid;grid-template-rows:14px repeat(7,12px);gap:3px;font-size:9.5px;color:var(--muted);text-align:right}.hmwd span{line-height:12px}
.hmbody{display:flex;flex-direction:column;gap:3px;min-width:0}
.hmmon{display:grid;gap:3px;height:14px;font-size:10px;color:var(--muted)}.hmmon span{white-space:nowrap;overflow:visible}
.hmgrid{display:grid;gap:3px}
.hmcol{display:grid;grid-template-rows:repeat(7,12px);gap:3px}
.hmc{display:block;width:100%;height:12px;border-radius:3px;border:0;padding:0;background:var(--line2);cursor:default}
button.hmc{cursor:pointer}button.hmc:hover{outline:2px solid var(--ink);outline-offset:1px}
.hmc.empty{background:transparent}
.hmc.s-ok{background:var(--accent)}.hmc.s-late{background:#f59e0b}.hmc.s-early{background:#ec4899}.hmc.s-overtime{background:#7c3aed}.hmc.s-off{background:#d1d5db}.hmc.s-vacation{background:#86efac}.hmc.s-absent{background:#dc2626}.hmc.s-none{background:var(--line2)}
.hmlegend{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.hmlegend i.hmc{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:middle}
.hmbars{display:flex;align-items:flex-end;gap:8px}.hmbars>.small{align-self:center;margin-right:4px}
.hmbars .b{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px}
.hmbars .bb{height:36px;display:flex;align-items:flex-end;gap:2px}.hmbars .bb div{width:9px;border-radius:2px 2px 0 0}.hmbars .bb .late{background:#f59e0b}.hmbars .bb .early{background:#ec4899}
.modal.wide table.gridtable.report th,.modal.wide table.gridtable.report td{font-size:12.5px}
.modal.wide h2{font-size:15px}
@media (max-width:900px){.hmbars{display:none}}

/* ── 0.14.1 ── 직원 창: 더 넓게, 머리글·잔디 고정 + 일별 기록만 내부 스크롤, 월 라벨 전부 */
.modal.wide{width:min(1480px,calc(100vw - 48px));display:flex;flex-direction:column;max-height:calc(100vh - 48px);overflow:hidden}
.modal-back:has(.modal.wide){align-items:center;padding:24px;overflow:hidden}
.modal.wide .modal-head{flex-shrink:0}
.modal-fixed{flex-shrink:0;padding:0 20px 12px;gap:10px;border-bottom:1px solid var(--line)}
.modal-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 20px 20px}
.modal-scroll>.tablewrap thead th{position:sticky;top:0;z-index:1}
.hmmon span{font-size:10px}

/* ── 0.14.3 ── 직원 창: 머리글의 직원 선택란 */
.whosel{height:30px;font-size:13px;padding:0 28px 0 10px;width:auto;min-width:160px}

/* ── 0.16.0 ── 관리 화면의 틀을 공통 뼈대(css/shell.css)로 교체.
   shell.css는 VINUS Workspace 기준으로 ACC Admin·Wallet Admin과 내용이 같은 파일이므로 직접 고치지 않습니다.
   출근부에만 필요한 보정(메뉴 옆 건수, 외부 링크 표시, 이 파일의 링크 색·기본 굵기와의 충돌)만 여기에 둡니다.
   예전의 .side / .sidetoggle / .shell.collapsed 규칙은 위에서 삭제했습니다. 직원 화면(.sshell)은 그대로입니다. */
a.sh-item:hover,a.sh-logo:hover{color:#475569}
a.sh-menu-item,a.sh-menu-item:hover{color:#1e293b}
.sh-menu-item,.sh-logout{font-weight:400}
.sh-menu-item.on{background:#f1f5f9}
/* 메뉴 옆 처리 대기 건수 */
.sh-item .badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--warn-soft);color:var(--warn-ink);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.sh-sidebar.collapsed .sh-item{position:relative}
.sh-sidebar.collapsed .sh-item .badge{position:absolute;top:1px;right:6px;min-width:16px;height:16px;padding:0 4px;font-size:10px}
/* 외부 링크 메뉴(급여 기준) */
.sh-item .extmark{margin-left:auto;color:#94a3b8;font-size:12px}
.sh-item .badge+.extmark,.sh-item .extmark+.badge{margin-left:6px}
.sh-sidebar.collapsed .sh-item .extmark{display:none}
@media (max-width:768px){.sh-sidebar.collapsed .sh-item .badge{position:static;min-width:20px;height:20px;padding:0 6px;font-size:11px}.sh-sidebar.collapsed .sh-item .extmark{display:inline}}
@media (prefers-reduced-motion:reduce){.sh-sidebar,.sh-item{transition:none}}