/*
 * QISO Overtime Management System — "Petrol Ledger" Stylesheet (v4.0)
 * 엔지니어링 대장(Ledger) 미학 · 라이트 1차 + 다크(prefers-color-scheme) · 데이터 가독성 우선
 *
 * [JS 계약 주의 — 어기면 앱이 깨짐]
 *  - @keyframes toastIn        : app.js / employee.js 가 이름으로 직접 참조 — 이름 변경 금지
 *  - --accent-primary          : JS 인라인이 hsl(var(--accent-primary)) 형태로 사용 — HSL 트리플렛 유지
 *  - --accent-warning          : JS 인라인이 hsl(var(--accent-warning)) 형태로 사용 — HSL 트리플렛 유지
 *  - --text-muted              : JS 인라인이 color: var(--text-muted) 로 사용 — 완성형 색상값 유지
 *  - JS가 부여하는 class 셀렉터 이름(badge-*, calendar-cell, cell-hours-badge, toast, rank-*,
 *    quick-*, tab-btn, modal-overlay, board-progress-fill.over 등) 전부 유지 — 스타일만 변경
 *  - JS가 테이블 셀에 color:#FFF 인라인 삽입 → 라이트 테마 가독성 위해 아래 §10에서
 *    id 기반 !important 오버라이드로 중화 (JS 수정 없이 CSS만으로 해결)
 *  - 차트 SVG는 fill/stroke를 presentation attribute로 하드코딩 → §18에서 CSS로 토큰 재매핑
 */

/* ══════════════════════════════════════════════════════════════════════
   1. Design Tokens — 라이트(기본) / 다크(prefers-color-scheme)
   ══════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Surfaces — 쿨 슬레이트 뉴트럴 (2026 리프레시) */
  --bg-body: #f5f7f9;
  --grid-line: rgba(20, 26, 31, 0.05);
  --surface-1: #ffffff;              /* 카드 기본 */
  --surface-2: #f2f5f7;              /* hover / 살짝 떠 있는 면 */
  --surface-3: #ffffff;              /* 모달, 팝오버 */
  --surface-inset: #eef1f4;          /* 인풋, 캘린더 셀 등 파인 면 */
  --table-head-bg: #f5f7f9;

  /* Borders — 헤어라인 */
  --border-1: #e2e7ec;
  --border-2: #cfd6dd;

  /* Text — 쿨 슬레이트 램프 */
  --text-strong: #141a1f;
  --text-primary: #212830;
  --text-secondary: #4c555f;
  --text-muted: #6b7580;             /* JS가 완성형 색상값으로 사용 — 형태 유지 */
  --text-faint: #97a1ac;

  /* Accent — Evolved Petrol(브랜드 연속·채도↑ 생기). HSL 트리플렛 계약 유지 */
  --accent-primary: 192, 84%, 30%;             /* hsl() 감싸 사용 — JS 계약 */
  --accent-primary-hover: 192, 80%, 36%;
  --accent-solid: hsl(var(--accent-primary));
  --accent-soft: #1a8fa0;
  --accent-tint: hsla(192, 84%, 30%, 0.08);
  --accent-tint-strong: hsla(192, 84%, 30%, 0.15);
  --border-focus: hsla(192, 84%, 34%, 0.55);

  /* Destructive / warning — JS 인라인 hsl(var(--accent-warning)), 트리플렛 유지 */
  --accent-warning: 5, 62%, 44%;

  /* Semantic 의미색 (규칙 유지: OT-1=앰버, OT-2=레드, 휴가=그린) */
  --ot1-text: #7f5800;
  --ot1-bg: rgba(176, 124, 10, 0.12);
  --ot1-border: rgba(176, 124, 10, 0.38);
  --ot1-solid: #b0810f;
  --ot2-text: #a52f26;
  --ot2-bg: rgba(191, 63, 52, 0.10);
  --ot2-border: rgba(191, 63, 52, 0.36);
  --ot2-solid: #c14b40;
  --vac-text: #1c6f4c;
  --vac-bg: rgba(35, 130, 90, 0.12);
  --vac-border: rgba(35, 130, 90, 0.36);
  --vac-solid: #2c8a63;

  /* Weekday tint */
  --sat-text: #d32020;
  --sun-text: #d32020;
  --holiday-pill-bg: rgba(211, 32, 32, 0.14);

  /* Chart */
  --chart-grid: rgba(23, 58, 53, 0.11);
  --chart-tick: #66766f;

  /* 사이드바 — 라이트/다크 공통 "잉크 레일" (페트롤 잉크) */
  --sidebar-bg: #12282c;
  --sidebar-border: rgba(255, 255, 255, 0.09);
  --sidebar-text: #93aeaa;
  --sidebar-text-strong: #eef5f3;
  --sidebar-muted: #5f7b77;
  --sidebar-active-bg: rgba(96, 190, 200, 0.13);
  --sidebar-accent: #5fbdc8;

  /* 사원증 태그 패널 — JS가 #FFF/#fbbf24 인라인 사용 → 양 테마 공통 다크 계기판 */
  --panel-bg: #101a1c;
  --panel-border: rgba(140, 200, 205, 0.20);

  /* Shape / elevation (낮고·여러겹·쿨톤) */
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow-ring: 0 0 0 1px var(--border-1);
  --shadow-1: 0 1px 2px rgba(16, 24, 32, 0.05), 0 1px 1px rgba(16, 24, 32, 0.04);
  --shadow-2: 0 2px 4px rgba(16, 24, 32, 0.05), 0 8px 24px rgba(16, 24, 32, 0.08);
  --shadow-3: 0 12px 32px rgba(16, 24, 32, 0.12);
  --shadow-focus: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--border-focus);

  /* Motion */
  --dur-1: 120ms; --dur-2: 160ms; --dur-3: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.14s cubic-bezier(0.2, 0, 0, 1);
  --transition-smooth: all 0.2s cubic-bezier(0.2, 0, 0, 1);

  /* Type — Pretendard 단일화(헤딩 Plex 혼용 제거) · 수치 IBM Plex Mono */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               system-ui, 'Malgun Gothic', sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'IBM Plex Mono', 'Consolas', 'SFMono-Regular', monospace;
}

/* ── 2026 리프레시: 전역 마이크로 디테일 ── */
h1, h2, h3, .card-title { letter-spacing: -0.015em; }
/* 수치·시간·금액은 tabular-nums (컬럼 정렬·자간 안정) */
.data-table td, .rd-lt td, .num, .lv-period, .an-remain,
input[type="number"], .stat-value, .kpi-value { font-variant-numeric: tabular-nums; }
/* 통일된 포커스 링(접근성) */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 다크 토큰 — 명시 선택([data-theme=dark]) + OS 다크 기본 모두 적용 */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-body: #0d1416;
    --grid-line: rgba(160, 220, 214, 0.030);
    --surface-1: #141d20;
    --surface-2: #192428;
    --surface-3: #1d292d;
    --surface-inset: #0b1113;
    --table-head-bg: rgba(255, 255, 255, 0.025);

    --border-1: rgba(170, 212, 206, 0.10);
    --border-2: rgba(170, 212, 206, 0.18);

    --text-strong: #f4faf8;
    --text-primary: #dde8e5;
    --text-secondary: #a2b4af;
    --text-muted: #74867f;           /* 완성형 색상값 계약 유지 */
    --text-faint: #4c5d58;

    --accent-primary: 185, 52%, 56%;
    --accent-primary-hover: 185, 60%, 64%;
    --accent-soft: #6fc7d1;
    --accent-tint: rgba(85, 194, 205, 0.09);
    --accent-tint-strong: rgba(85, 194, 205, 0.17);
    --border-focus: rgba(111, 199, 209, 0.55);

    --accent-warning: 4, 78%, 68%;

    --ot1-text: #e6b34c;
    --ot1-bg: rgba(230, 179, 76, 0.10);
    --ot1-border: rgba(230, 179, 76, 0.32);
    --ot1-solid: #d9a53c;
    --ot2-text: #ee8b80;
    --ot2-bg: rgba(238, 122, 111, 0.10);
    --ot2-border: rgba(238, 122, 111, 0.32);
    --ot2-solid: #d96a5e;
    --vac-text: #54c794;
    --vac-bg: rgba(84, 199, 148, 0.10);
    --vac-border: rgba(84, 199, 148, 0.32);
    --vac-solid: #3fae7e;

    --sat-text: #ff6f61;
    --sun-text: #ff6f61;
    --holiday-pill-bg: rgba(255, 111, 97, 0.18);

    --chart-grid: rgba(200, 232, 226, 0.08);
    --chart-tick: #74867f;

    --sidebar-bg: #101a1d;
    --sidebar-border: rgba(170, 212, 206, 0.09);
    --sidebar-text: #93aeaa;
    --sidebar-text-strong: #eef5f3;
    --sidebar-muted: #5f7b77;
    --sidebar-active-bg: rgba(96, 190, 200, 0.12);
    --sidebar-accent: #6fc7d1;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 12px 34px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-body: #0d1416;
    --grid-line: rgba(160, 220, 214, 0.030);
    --surface-1: #141d20;
    --surface-2: #192428;
    --surface-3: #1d292d;
    --surface-inset: #0b1113;
    --table-head-bg: rgba(255, 255, 255, 0.025);

    --border-1: rgba(170, 212, 206, 0.10);
    --border-2: rgba(170, 212, 206, 0.18);

    --text-strong: #f4faf8;
    --text-primary: #dde8e5;
    --text-secondary: #a2b4af;
    --text-muted: #74867f;           /* 완성형 색상값 계약 유지 */
    --text-faint: #4c5d58;

    --accent-primary: 185, 52%, 56%;
    --accent-primary-hover: 185, 60%, 64%;
    --accent-soft: #6fc7d1;
    --accent-tint: rgba(85, 194, 205, 0.09);
    --accent-tint-strong: rgba(85, 194, 205, 0.17);
    --border-focus: rgba(111, 199, 209, 0.55);

    --accent-warning: 4, 78%, 68%;

    --ot1-text: #e6b34c;
    --ot1-bg: rgba(230, 179, 76, 0.10);
    --ot1-border: rgba(230, 179, 76, 0.32);
    --ot1-solid: #d9a53c;
    --ot2-text: #ee8b80;
    --ot2-bg: rgba(238, 122, 111, 0.10);
    --ot2-border: rgba(238, 122, 111, 0.32);
    --ot2-solid: #d96a5e;
    --vac-text: #54c794;
    --vac-bg: rgba(84, 199, 148, 0.10);
    --vac-border: rgba(84, 199, 148, 0.32);
    --vac-solid: #3fae7e;

    --sat-text: #ff6f61;
    --sun-text: #ff6f61;
    --holiday-pill-bg: rgba(255, 111, 97, 0.18);

    --chart-grid: rgba(200, 232, 226, 0.08);
    --chart-tick: #74867f;

    --sidebar-bg: #101a1d;
    --sidebar-border: rgba(170, 212, 206, 0.09);
    --sidebar-text: #93aeaa;
    --sidebar-text-strong: #eef5f3;
    --sidebar-muted: #5f7b77;
    --sidebar-active-bg: rgba(96, 190, 200, 0.12);
    --sidebar-accent: #6fc7d1;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 12px 34px rgba(0, 0, 0, 0.5);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   2. Reset & Base
   ══════════════════════════════════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
  position: relative;
  font-size: 14px;
  line-height: 1.55;
}

/* 배경 — 단색(2026 리프레시: 격자 제거) */
.bg-gradient {
  position: fixed;
  inset: 0;
  background-color: var(--bg-body);
  z-index: -3;
  pointer-events: none;
}

/* 구버전 마크업 잔존 대비 — orb 무력화 */
.bg-orbs, .orb { display: none; }

:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--accent-tint-strong);
}

/* 접근성 — 모션 최소화 존중 (toastIn 키프레임 자체는 유지, 지속시간만 0으로) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   3. Sidebar (관리자) — 잉크 레일: 양 테마 공통 페트롤 잉크
   ══════════════════════════════════════════════════════════════════════ */
.sidebar {
  width: 240px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 24px 14px;
  z-index: 10;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 30px;
  padding: 0 10px;
}

.brand-icon {
  font-size: 19px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-active-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-md);
  color: var(--sidebar-accent);
  flex-shrink: 0;
  filter: grayscale(0.4);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--sidebar-text-strong);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--sidebar-muted);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  cursor: pointer;
  font-weight: 500;
  font-size: 13.5px;
  transition: var(--transition-fast);
  border: 1px solid transparent;
  position: relative;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--sidebar-text-strong);
}

.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-strong);
  border-color: rgba(96, 190, 200, 0.22);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 20%;
  height: 60%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-accent);
}

/* 이모지 아이콘 무채색화 — 계기판스러운 절제 */
.nav-icon {
  font-size: 15px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: grayscale(1);
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  opacity: 1;
}

/* 임직원 포털 링크 — 구분선 + 액센트 컬러 */
.nav-item.employee-portal-btn {
  border-top: 1px solid var(--sidebar-border);
  border-radius: 0;
  margin-top: 14px;
  padding-top: 16px;
}

.nav-item.employee-portal-btn .nav-label {
  color: var(--sidebar-accent);
  font-weight: 600;
}

.nav-item.employee-portal-btn:hover {
  background: transparent;
}

.nav-item.employee-portal-btn:hover .nav-label {
  color: var(--sidebar-text-strong);
}

.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  justify-content: center;
}

.time-display {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--sidebar-text);
  font-weight: 500;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════
   4. Main Content / Topbar (관리자)
   ══════════════════════════════════════════════════════════════════════ */
.main-content {
  margin-left: 240px;
  flex: 1;
  padding: 30px 36px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 1520px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-strong);
}

.date-badge {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════
   5. Pages
   ══════════════════════════════════════════════════════════════════════ */
.page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page {
  display: none;
  flex-direction: column;
  animation: pageIn 0.22s ease forwards;
}

.page.active {
  display: flex;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   6. Cards — 하단 굵은 대장(ledger) 밑줄 대신 헤어라인 + 은은한 그림자
   ══════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-1);
}

.card-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.2px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mt-card {
  margin-top: 4px;
}

/* 테이블을 직접 품는 카드 본문은 좁은 화면에서 가로 스크롤 허용 */
.card-body:has(> .data-table) {
  overflow-x: auto;
}

/* ── 대시보드 정보 위계: 요약(스탯) → 추이+랭킹 → 상세 테이블 ── */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}

.dashboard-grid > .card {
  margin-bottom: 0;
}

#card-trend {
  grid-column: 1;
}

#card-ranking {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.dashboard-grid > .card:not(#card-trend):not(#card-ranking) {
  grid-column: 1;
}

#card-ranking .card-body {
  max-height: 620px;
  overflow-y: auto;
  padding-right: 2px;
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  #card-trend,
  #card-ranking,
  .dashboard-grid > .card:not(#card-trend):not(#card-ranking) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   7. Stats Grid — 숫자가 주인공 (모노 숫자 = 계기판)
   ══════════════════════════════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 17px 19px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: var(--shadow-1);
  transition: var(--transition-fast);
}

.stat-card:hover {
  border-color: var(--border-2);
}

.stat-card.accent {
  border-color: var(--border-focus);
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--surface-1) 90%);
}

.stat-icon {
  font-size: 18px;
  background: var(--surface-inset);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-1);
  flex-shrink: 0;
  filter: grayscale(1);
  opacity: 0.8;
}

.stat-card.accent .stat-icon {
  background: var(--accent-tint-strong);
  border-color: var(--border-focus);
  filter: grayscale(0.5);
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.15;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ══════════════════════════════════════════════════════════════════════
   8. Forms
   ══════════════════════════════════════════════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
}

.form-label small {
  font-weight: 400;
  color: var(--text-muted);
}

.required {
  color: hsl(var(--accent-warning));
}

.form-input, .form-select {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  color: var(--text-primary);
  padding: 10px 13px;
  border-radius: var(--radius-md);
  font-size: 14px;
  outline: none;
  transition: var(--transition-fast);
  width: 100%;
}

.form-input::placeholder {
  color: var(--text-faint);
}

.form-input:hover, .form-select:hover {
  border-color: var(--text-faint);
}

.form-input:focus, .form-select:focus {
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

.form-select option {
  background-color: var(--surface-3);
  color: var(--text-primary);
}

/* 체크박스 그룹 (주말 제외 등) */
.form-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  align-self: end;
  padding-bottom: 10px;
}

.form-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent-solid);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check .form-label {
  margin: 0;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-unit .form-input {
  width: 100%;
  padding-right: 38px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.input-unit {
  position: absolute;
  right: 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.help-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   9. Buttons — 인터랙티브한 것은 인터랙티브해 보이게
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  outline: none;
  border: 1px solid transparent;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-solid);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(18, 45, 40, 0.2);
}

.btn-primary:hover {
  background: hsl(var(--accent-primary-hover));
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* 엑셀 관련 액션 — 스프레드시트 연상 그린 틴트 */
.btn-accent {
  background: var(--vac-bg);
  color: var(--vac-text);
  border-color: var(--vac-border);
}

.btn-accent:hover {
  background: var(--vac-solid);
  border-color: transparent;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--surface-inset);
  color: var(--text-strong);
  border-color: var(--text-faint);
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  line-height: 1;
}

.btn-icon:hover {
  color: var(--text-strong);
  background: var(--surface-inset);
}

.btn.sm {
  padding: 7px 13px;
  font-size: 12.5px;
}

.btn-lg {
  padding: 0 28px;
  height: 46px;
  font-size: 14.5px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   10. Tables — 스캔 가능한 원장(ledger) 데이터
   ══════════════════════════════════════════════════════════════════════ */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-1);
  margin-top: 6px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.data-table th, .data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}

.data-table th {
  background: var(--table-head-bg);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.7px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table td {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.data-table td:first-child {
  color: var(--text-primary);
}

.data-table tbody tr {
  transition: background 0.12s ease;
}

.data-table tbody tr:hover {
  background: var(--accent-tint);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* 코드류(사번·Activity Code·생년월일) — 모노 칩 */
.data-table code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--surface-inset);
  border: 1px solid var(--border-1);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 4px;
}

/* [JS 계약 대응] JS가 이름/날짜 셀에 color:#FFF 를 인라인 삽입 →
   라이트 테마에서 사라지므로 토큰으로 강제 재지정 (양 테마 공통 안전) */
#monthly-tbody td:first-child,
#records-tbody td:first-child,
#emp-tbody td:nth-child(2) {
  color: var(--text-strong) !important;
}

/* 대시보드 월간 테이블 — 숫자 컬럼(OT-1/OT-2/합계/일수) 우측 정렬, 합계 강조 */
#monthly-table th:nth-child(n+3),
#monthly-table td:nth-child(n+3) {
  text-align: right;
}

#monthly-table td:nth-child(5) {
  font-weight: 700;
}

/* 기록 조회 테이블 — 배지(4,5)·작업(7) 컬럼 중앙 정렬 */
#records-table th:nth-child(4), #records-table td:nth-child(4),
#records-table th:nth-child(5), #records-table td:nth-child(5),
#records-table th:nth-child(7), #records-table td:nth-child(7) {
  text-align: center;
}

#records-table td:first-child {
  white-space: nowrap;
}

/* 직원 테이블 — 상태·작업 컬럼 폭 안정화 */
#emp-table td {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   11. Badges — 의미색: OT-1 앰버 / OT-2 레드 / 재직·휴가 그린
   ══════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.badge-ot1 {
  background: var(--ot1-bg);
  color: var(--ot1-text);
  border: 1px solid var(--ot1-border);
}

.badge-ot2 {
  background: var(--ot2-bg);
  color: var(--ot2-text);
  border: 1px solid var(--ot2-border);
}

.badge-active {
  background: var(--vac-bg);
  color: var(--vac-text);
  border: 1px solid var(--vac-border);
}

.badge-inactive {
  background: var(--surface-inset);
  color: var(--text-muted);
  border: 1px solid var(--border-1);
}

/* ══════════════════════════════════════════════════════════════════════
   12. Filter Bar
   ══════════════════════════════════════════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-inset);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}

.filter-bar .form-select.sm {
  width: auto;
  min-width: 130px;
  padding: 7px 11px;
  font-size: 13px;
  background: var(--surface-1);
}

/* ══════════════════════════════════════════════════════════════════════
   13. Quick Add Grid (오늘 빠른 입력)
   ══════════════════════════════════════════════════════════════════════ */
.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.quick-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: var(--transition-fast);
}

.quick-card:hover {
  border-color: var(--border-focus);
  background: var(--surface-2);
}

.quick-emp-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.quick-emp-name {
  font-weight: 700;
  color: var(--text-strong);
  font-size: 13.5px;
}

.quick-emp-pos {
  font-size: 11.5px;
  color: var(--text-muted);
}

.quick-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.quick-actions .btn.sm {
  padding: 6px 10px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════
   14. Export Layout
   ══════════════════════════════════════════════════════════════════════ */
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}

.export-grid .form-group {
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   15. Modals
   ══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 20, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  padding: 22px 24px;
  box-shadow: var(--shadow-2);
  transform: translateY(14px);
  transition: transform 0.18s ease;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-1);
}

.modal-header h3 {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-strong);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 22px;
}

.modal-body .form-input, .modal-body .form-select {
  background: var(--surface-1);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ══════════════════════════════════════════════════════════════════════
   16. Toasts — @keyframes toastIn 이름은 JS가 참조하므로 변경 금지
   ══════════════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  padding: 13px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 380px;
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 상태를 형태로: 좌측 세버리티 스트라이프 */
.toast.success {
  border-left: 3px solid var(--vac-solid);
}

.toast.error {
  border-left: 3px solid hsl(var(--accent-warning));
}

/* JS가 type "warning"도 사용 (일괄 저장 부분 실패 등) */
.toast.warning {
  border-left: 3px solid var(--ot1-solid);
}

.toast-icon {
  flex-shrink: 0;
  filter: grayscale(0.35);
}

/* ══════════════════════════════════════════════════════════════════════
   17. Scrollbars
   ══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 5px;
  border: 2px solid var(--bg-body);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

/* ══════════════════════════════════════════════════════════════════════
   18. 대시보드 — 월 네비 · 추이 차트 · 랭킹
   ══════════════════════════════════════════════════════════════════════ */
.month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--surface-inset);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 3px 4px;
}

.month-nav span {
  min-width: 88px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* 카드 헤더 보조 라벨 */
.rank-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* 월별 야근 추이 차트 (인라인 SVG)
   [JS 계약 대응] JS가 SVG에 fill/stroke 를 presentation attribute 로 하드코딩
   (rgba(255,255,255,0.07) 그리드 / #6b7690 눈금 / #e9edf5 · #a6b0c3 라벨 /
    #fbbf24 · #f87171 막대) — CSS 가 attribute 를 이기므로 여기서 토큰 재매핑 */
.trend-chart-host {
  width: 100%;
  overflow-x: auto;
}
.trend-chart-host svg {
  display: block;
  width: 100%;
  height: auto;
}
.trend-chart-host svg line {
  stroke: var(--chart-grid);
}
.trend-chart-host svg text {
  fill: var(--chart-tick);
  font-family: var(--font-mono);
}
.trend-chart-host svg text[font-weight="700"] {
  fill: var(--text-strong);
}
.trend-chart-host svg rect[fill="#fbbf24"] {
  fill: var(--ot1-solid);
}
.trend-chart-host svg rect[fill="#f87171"] {
  fill: var(--ot2-solid);
}

.chart-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 34px 0;
  font-size: 13px;
}
.trend-legend {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.legend-ot1 { background: var(--ot1-solid); }
.legend-ot2 { background: var(--ot2-solid); }

/* 직원별 야근 랭킹 */
.rank-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rank-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.rank-top {
  border-color: var(--border-2);
}
.rank-1 { background: linear-gradient(90deg, var(--ot1-bg), var(--surface-2) 62%); }
.rank-2 { background: linear-gradient(90deg, rgba(148, 163, 170, 0.12), var(--surface-2) 62%); }
.rank-3 { background: linear-gradient(90deg, rgba(200, 120, 70, 0.10), var(--surface-2) 62%); }
.rank-pos {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.rank-top .rank-pos {
  font-size: 17px;
}
.rank-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rank-name {
  font-weight: 700;
  color: var(--text-strong);
}
.rank-dept {
  font-size: 11.5px;
  color: var(--text-muted);
}
.rank-metrics {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rank-total {
  font-weight: 700;
  color: hsl(var(--accent-primary));
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: right;
  font-family: var(--font-mono);
}
.rank-days {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.rank-warn {
  background: var(--ot2-bg);
  color: var(--ot2-text);
  border: 1px solid var(--ot2-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   19. 임직원 페이지 — 레이아웃 · 요약 보드
   ══════════════════════════════════════════════════════════════════════ */
.employee-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

.employee-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-1);
}

.employee-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
}

.employee-title .title-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted);
}

.header-user-area {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.header-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#user-welcome {
  font-size: 13px;
  color: var(--accent-solid);
  font-weight: 600;
}

/* 월 누계 캡슐 보드 — 요약이 디테일보다 먼저 */
.total-badge-board {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  flex-wrap: wrap;
}

.total-capsule {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  padding: 6px 13px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.total-capsule .dot {
  font-size: 9px;
  line-height: 1;
}

.total-capsule strong {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}

.total-capsule .unit {
  font-size: 11px;
  color: var(--text-muted);
}

.total-capsule.capsule-ot1 { border-color: var(--ot1-border); }
.total-capsule.capsule-ot1 .dot { color: var(--ot1-solid); }
.total-capsule.capsule-ot2 { border-color: var(--ot2-border); }
.total-capsule.capsule-ot2 .dot { color: var(--ot2-solid); }
.total-capsule.capsule-total { border-color: var(--border-focus); }
.total-capsule.capsule-total .dot { color: var(--accent-solid); }
.total-capsule.capsule-days { border-color: var(--border-2); }
.total-capsule.capsule-days .dot { color: var(--text-faint); }

/* 월 경고 기준 진행바 */
.board-progress-wrap {
  width: 100%;
  height: 4px;
  margin-top: 8px;
  background: var(--surface-inset);
  border: 1px solid var(--border-1);
  border-radius: 50px;
  overflow: hidden;
}
.board-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-solid);
  border-radius: 50px;
  transition: width 0.3s ease;
}
.board-progress-fill.over {
  background: var(--ot2-solid);
}

/* ── 로그인 화면 ── */
.login-container {
  max-width: 420px;
  width: 100%;
  margin: 13vh auto;
  padding: 20px;
}

.login-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-2);
  padding: 30px 28px;
}

.login-head {
  text-align: center;
  border: none;
  display: block;
  margin-bottom: 24px;
  padding-bottom: 0;
}

.login-head .card-title {
  font-size: 19px;
  font-weight: 700;
}

.login-head .login-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 7px;
}

.login-card .form-group {
  margin-bottom: 17px;
}

.login-card .btn-primary {
  width: 100%;
  padding: 12px;
  font-size: 14.5px;
  margin-top: 6px;
}

#login-birthdate {
  font-family: var(--font-mono);
  letter-spacing: 0.3em;
}

/* ── 선택 바 (본인 선택 · Activity Code) ── */
.selection-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.selection-bar .form-group {
  margin-bottom: 0;
}

.selection-bar .form-label {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}

/* ══════════════════════════════════════════════════════════════════════
   20. 임직원 페이지 — 캘린더 (핵심 작업면)
   ══════════════════════════════════════════════════════════════════════ */
.calendar-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr);
  gap: 22px;
  align-items: start;
}

.calendar-container {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  min-width: 0;
}

.calendar-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.month-indicator {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.month-nav-btn {
  background: var(--surface-inset);
  border: 1px solid var(--border-1);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: var(--transition-fast);
}

.month-nav-btn:hover {
  background: var(--accent-solid);
  border-color: transparent;
  color: #fff;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-day-header {
  text-align: center;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 7px 0 9px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 4px;
}

.calendar-day-header.sat { color: var(--sat-text); }
.calendar-day-header.sun { color: var(--sun-text); }

.calendar-cell {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  min-height: 92px;
  padding: 8px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.13s ease, background 0.13s ease, box-shadow 0.13s ease;
  position: relative;
}

.calendar-cell:hover {
  background: var(--surface-2);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-1);
}

.calendar-cell.other-month {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
}

/* 오늘 — 앰버 원형 배지 (페트롤 accent·연차 초록과 확실히 구분) */
.calendar-cell.today {
  border-color: #e6941c;
  box-shadow: 0 0 0 1px rgba(230, 148, 28, 0.35) inset;
}

.calendar-cell.today .day-number {
  background: #e6941c;
  color: #1a1205;
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(230, 148, 28, 0.28);
}

/* 주말·공휴일 틴트 */
.calendar-cell.sat .day-number { color: var(--sat-text); }
.calendar-cell.sun .day-number { color: var(--sun-text); }
.calendar-cell.holiday .day-number { color: var(--sun-text) !important; }
.calendar-cell.sat, .calendar-cell.sun, .calendar-cell.holiday {
  background: var(--holiday-pill-bg);
  background: color-mix(in srgb, var(--sun-text) 9%, var(--surface-1));
}

/* 선택 상태 — 명확한 이중 링 */
.calendar-cell.selected {
  border-color: var(--accent-solid) !important;
  background: var(--accent-tint) !important;
  box-shadow: 0 0 0 1px var(--accent-solid) inset;
}

.cell-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
}

.day-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 셀 우상단 미니 태그 — 평일 출퇴근 시각(모노, 극절제) */
.card-tag-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: var(--surface-inset);
  color: var(--text-faint);
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* [JS 계약 대응] 공휴일명 pill 은 JS가 rgba 레드를 인라인 삽입 →
   테마 토큰으로 강제 재지정 (라이트에서 대비 확보) */
.calendar-cell.holiday .card-tag-pill {
  background: var(--holiday-pill-bg) !important;
  color: var(--sun-text) !important;
  border: 1px solid var(--ot2-border) !important;
  font-family: var(--font-sans);
}

/* 야근/휴가 시간 배지 — 의미색 3종 */
.cell-hours-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  margin-top: 7px;
  text-align: center;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-hours-badge.ot1 {
  background: var(--ot1-bg);
  color: var(--ot1-text);
  border-color: var(--ot1-border);
}

.cell-hours-badge.ot2 {
  background: var(--ot2-bg);
  color: var(--ot2-text);
  border-color: var(--ot2-border);
}

.cell-hours-badge.vacation {
  background: var(--vac-bg);
  color: var(--vac-text);
  border-color: var(--vac-border);
}

/* ══════════════════════════════════════════════════════════════════════
   21. 임직원 페이지 — 우측 에디터 패널
   ══════════════════════════════════════════════════════════════════════ */
.editor-container {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  align-self: start;
  position: sticky;
  top: 24px;
}

.editor-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 17px;
}

.editor-head .card-title {
  font-size: 15px;
  font-weight: 700;
}

.editor-head .card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* 탭 (야근/휴가 세그먼트) */
.tabs-container {
  display: flex;
  background: var(--surface-inset);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--border-1);
  gap: 4px;
}

.tab-btn {
  flex: 1;
  padding: 9px 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tab-btn:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}

.tab-btn.active {
  background: var(--accent-solid);
  color: #fff;
}

/* 숏컷 버튼 열 */
.quick-shortcut-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 17px;
}

.shortcut-btn {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-secondary);
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  font-variant-numeric: tabular-nums;
}

.shortcut-btn:hover {
  background: var(--accent-solid);
  color: #fff;
  border-color: transparent;
}

/* 스테퍼 */
.stepper-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stepper-row .input-with-unit {
  flex: 1;
}

.stepper-row .form-input {
  text-align: center;
}

.stepper-btn {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-primary);
  width: 34px;
  height: 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.stepper-btn:hover {
  background: var(--accent-tint-strong);
  border-color: var(--border-focus);
}

.editor-container .form-group {
  margin-bottom: 15px;
}

/* 사원증 태그 연동 프리뷰 — 양 테마 공통 다크 "계기판" 패널
   (JS가 #FFF/#fbbf24/var(--text-muted) 인라인 색을 쓰므로 다크 지반 고정) */
.tag-preview-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 14px 0;
}

.tag-title {
  font-size: 12px;
  font-weight: 700;
  color: #6fc7d1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tag-title .tag-chip {
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: rgba(255, 255, 255, 0.08);
  color: #93aeaa;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
}

.tag-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #93aeaa;
  margin-bottom: 5px;
}

.tag-row .tag-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tag-notice {
  font-size: 11px;
  color: #ee8b80;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 7px;
  margin-top: 7px;
  line-height: 1.45;
}

/* 휴가 안내 */
.vacation-hint {
  font-size: 11.5px;
  color: var(--vac-text);
  margin-top: 8px;
  font-weight: 500;
  line-height: 1.45;
}

/* 에디터 저장/삭제 액션 */
.editor-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 9px;
}

.editor-actions .btn {
  width: 100%;
}

.btn-danger-ghost {
  background: transparent;
  border-color: var(--ot2-border);
  color: var(--ot2-text);
}

.btn-danger-ghost:hover {
  background: var(--ot2-bg);
  color: var(--ot2-text);
  border-color: var(--ot2-solid);
}

/* 날짜 미선택 플레이스홀더 */
#editor-placeholder {
  text-align: center;
  padding: 38px 10px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.7;
}

#editor-placeholder .placeholder-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.3;
  filter: grayscale(1);
}

/* ══════════════════════════════════════════════════════════════════════
   22. Responsive
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  /* 관리자 — 사이드바 아이콘 모드 */
  .sidebar {
    width: 72px;
    padding: 20px 10px;
  }
  .sidebar-brand .brand-text, .sidebar .nav-label, .sidebar-footer {
    display: none;
  }
  .sidebar-brand {
    justify-content: center;
    padding: 0;
    margin-bottom: 24px;
  }
  .nav-item {
    justify-content: center;
    padding: 11px;
  }
  .nav-item.active::before {
    left: -10px;
  }
  .nav-item.employee-portal-btn {
    padding-top: 15px;
  }
  .main-content {
    margin-left: 72px;
    padding: 22px 18px;
  }
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* 임직원 — 캘린더/에디터 세로 스택 */
  .calendar-wrapper {
    grid-template-columns: 1fr;
  }
  .editor-container {
    position: static;
  }
  .selection-bar {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .employee-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .total-badge-board {
    justify-content: flex-start;
  }
  .calendar-grid {
    gap: 5px;
  }
  .calendar-cell {
    min-height: 74px;
    padding: 6px;
  }
  .cell-hours-badge {
    font-size: 10px;
    padding: 3px 4px;
  }
  .card-tag-pill {
    display: none;
  }
  /* 공휴일명은 모바일에서도 유지 (시각 태그만 숨김) */
  .calendar-cell.holiday .card-tag-pill {
    display: inline-block;
  }
}

@media (max-width: 560px) {
  .main-content {
    padding: 16px 12px;
  }
  .card {
    padding: 16px 14px;
  }
  .employee-container {
    padding: 18px 12px 40px;
  }
  .calendar-container {
    padding: 13px 12px;
  }
  .day-number {
    width: 19px;
    height: 19px;
    font-size: 11px;
  }
  .calendar-cell {
    min-height: 62px;
    border-radius: var(--radius-sm);
  }
  .quick-shortcut-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .toast-container {
    left: 12px;
    right: 12px;
    bottom: 14px;
  }
  .toast {
    max-width: none;
  }
  .rank-row {
    grid-template-columns: 28px 1fr;
  }
  .rank-metrics {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   직원 관리 — 재직/삭제 탭 · 정렬 헤더 (추가)
   ══════════════════════════════════════════════════════════════════════ */
.emp-tabs { margin-bottom: 14px; }
.tab-count {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 5px;
  border-radius: 999px; background: var(--surface-2); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 18px;
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
.tab-btn.active .tab-count { background: hsl(var(--accent-primary)); color: #fff; }
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s ease; }
th.th-sort:hover { color: hsl(var(--accent-primary)); }
.sort-ind { font-size: 10px; color: hsl(var(--accent-primary)); margin-left: 2px; }
.emp-name-cell { font-weight: 700; color: var(--text-strong); }

/* ══════════════════════════════════════════════════════════════════════
   라이트/다크 슬라이드 스위치 (해 ↔ 달)
   ══════════════════════════════════════════════════════════════════════ */
.theme-switch { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
.ts-track {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 54px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--surface-inset); border: 1px solid var(--border-2);
  transition: border-color .2s ease, background .2s ease;
}
.theme-switch:hover .ts-track { border-color: var(--border-focus); }
.ts-ico { position: relative; z-index: 2; font-size: 12px; line-height: 1; opacity: .38; transition: opacity .22s ease; }
.ts-sun { color: #e0a53a; opacity: 1; }        /* 라이트 기본: 해 활성 */
.ts-moon { color: #93a7c8; }
.ts-thumb {
  position: absolute; top: 2px; left: 2px; z-index: 1;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-1); border: 1px solid var(--border-2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
/* 다크(명시) — 달 활성 + 썸 우측 */
:root[data-theme="dark"] .ts-sun { opacity: .38; }
:root[data-theme="dark"] .ts-moon { opacity: 1; }
:root[data-theme="dark"] .ts-thumb { transform: translateX(28px); }
/* 다크(OS 기본, 명시 라이트 아닌 경우) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ts-sun { opacity: .38; }
  :root:not([data-theme="light"]) .ts-moon { opacity: 1; }
  :root:not([data-theme="light"]) .ts-thumb { transform: translateX(28px); }
}

/* 캘린더 셀 — 기본 근무시간 배지 (은은하게) */
.cell-work-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #2f6f64;
  background: rgba(21, 101, 111, 0.10);
  border: 1px solid rgba(21, 101, 111, 0.24);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
/* 다크모드: 어두운 배경에 밝은 민트로 또렷하게 */
:root:not([data-theme="light"]) .cell-work-badge {
  color: #7fe0d0;
  background: rgba(127, 224, 208, 0.14);
  border-color: rgba(127, 224, 208, 0.30);
}
:root[data-theme="dark"] .cell-work-badge {
  color: #7fe0d0;
  background: rgba(127, 224, 208, 0.14);
  border-color: rgba(127, 224, 208, 0.30);
}

/* ── 모드 탭 (야근 캘린더 / 휴가원 결재) ── */
.mode-tabs { display:flex; gap:8px; margin:18px 0 12px; }
.mode-tab { padding:10px 20px; border:1px solid var(--border-1); background:var(--surface-1);
  color:var(--text-secondary); border-radius:10px; font-family:inherit; font-weight:700;
  font-size:14px; cursor:pointer; transition:all .15s; }
.mode-tab:hover { color:var(--text-primary); }
.mode-tab.active { background:var(--accent-solid); color:#fff; border-color:var(--accent-solid); }

/* ── 휴가원 결재 섹션 ── */
.leave-section { margin-top:4px; }
.leave-summary { margin-bottom:14px; }
.lv-annual { background:var(--surface-1); border:1px solid var(--border-1); border-radius:12px;
  padding:14px 18px; font-size:15px; box-shadow:var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06)); }
.lv-annual-label { font-weight:800; color:var(--accent-solid); }
.lv-remain { font-weight:800; color:var(--accent-solid); }
.leave-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.leave-list { display:flex; flex-direction:column; gap:10px; }
.lv-item { border:1px solid var(--border-1); border-radius:10px; padding:12px 14px; background:var(--surface-inset); }
.lv-item .lv-main { font-size:14px; }
.lv-type { font-weight:700; color:var(--accent-solid); }
.lv-period { color:var(--text-secondary); font-size:13px; }
.lv-meta { display:flex; align-items:center; gap:8px; margin-top:6px; }
.lv-status { font-size:12px; font-weight:700; padding:1px 8px; border-radius:5px; }
.st-wait { background:rgba(230,148,28,.18); color:#e6941c; }
.st-ok { background:rgba(46,168,184,.18); color:var(--accent-solid); }
.st-no { background:rgba(211,32,32,.15); color:#d32020; }
.lv-approver { font-size:12px; color:var(--text-muted); }
.lv-reason-txt { margin-top:6px; font-size:12.5px; color:var(--text-muted); }
.lv-cancel { margin-left:auto; color:#d32020; }
.lv-pending { border-color:rgba(230,148,28,.45); }
.lv-actions { display:flex; gap:8px; margin-top:10px; }
.lv-dept { color:var(--text-muted); font-size:12px; }
.empty-hint { color:var(--text-muted); font-size:13px; text-align:center; padding:16px; }

/* 연차 잔여 캡슐(헤더) */
.capsule-leave .dot { color:#7fe0d0; }
.leave-sub { font-size:11px; color:var(--text-muted); margin-left:3px; }

@media (max-width:720px){ .leave-grid{grid-template-columns:1fr} .form-row2{grid-template-columns:1fr} }

/* 마이페이지 */
.mp-annual-box { background:var(--surface-1); border:1px solid var(--border-1); border-radius:12px; padding:8px 18px; margin-bottom:16px; }
.mp-annual-row { display:flex; justify-content:space-between; padding:8px 0; font-size:15px; border-bottom:1px dashed var(--border-1); }
.mp-annual-row:last-child { border-bottom:none; }
.mp-remain-row strong { color:var(--accent-solid); font-size:19px; }
.mp-sub { margin:6px 0 10px; font-size:14px; color:var(--text-secondary); }
.mp-monthly { display:flex; flex-wrap:wrap; gap:8px; }
.mp-mo { background:var(--surface-inset); border:1px solid var(--border-1); border-radius:8px; padding:5px 11px; font-size:13px; }
.mp-mo strong { color:var(--accent-solid); }
.mp-static { padding:8px 0; font-size:15px; font-weight:600; color:var(--text-primary); }
.feedback-card { max-width:640px; }
.feedback-card textarea.form-input { resize:vertical; min-height:110px; font-family:inherit; line-height:1.5; }

/* 관리실 다운로드 */
.roster-dl { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.roster-ot { border-top:1px solid var(--border-1); padding-top:16px; }
.roster-section .btn-primary { margin-top:4px; }

/* 주소 확인 */
.addr-status { margin-bottom:14px; }
.addr-ok { background:rgba(46,168,184,.12); border:1px solid rgba(46,168,184,.3); color:var(--accent-solid); padding:10px 14px; border-radius:9px; font-size:14px; }
.addr-no { background:rgba(230,148,28,.12); border:1px solid rgba(230,148,28,.32); color:#e6941c; padding:10px 14px; border-radius:9px; font-size:14px; }

/* 관리실 대시보드 */
.rd-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px; }
.rd-card { background:var(--surface-inset); border:1px solid var(--border-1); border-radius:10px; padding:12px 14px; text-align:center; }
.rd-card.rd-accent { border-color:var(--accent-solid); }
.rd-card .rd-lbl { display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.rd-card strong { font-size:22px; color:var(--accent-solid); font-family:var(--font-mono); }
.rd-card .rd-u { font-size:12px; color:var(--text-secondary); margin-left:2px; }
.rd-lists { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rd-list h4 { margin:0 0 8px; font-size:14px; }
.rd-row { display:flex; justify-content:space-between; padding:7px 10px; border:1px solid var(--border-1); border-radius:8px; margin-bottom:6px; font-size:13.5px; background:var(--surface-1); }
.rd-row em { color:var(--text-muted); font-style:normal; font-size:12px; }
.rd-row b { color:var(--accent-solid); }
@media (max-width:640px){ .rd-lists{grid-template-columns:1fr} }

/* 기록조회 — 표 + 미니 캘린더 */
.records-split { display:grid; grid-template-columns:minmax(280px, 360px) 1fr; gap:18px; align-items:start; }
.records-tablewrap { margin:0; }
.rec-name-link { font-weight:700; color:var(--accent-solid); cursor:pointer; }
.rec-name-link:hover { text-decoration:underline; }
#records-tbody tr.rec-sel { background:var(--accent-tint); }
.records-cal { border:1px solid var(--border-1); border-radius:12px; padding:14px; background:var(--surface-1); min-height:200px; }
.cal-hint { color:var(--text-muted); font-size:13.5px; text-align:center; padding:40px 16px; }
.cal-head { font-size:15px; margin-bottom:12px; }
.cal-sum { float:right; font-size:13px; color:var(--accent-solid); font-weight:700; }
.mini-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.mc-wd { text-align:center; font-size:12px; font-weight:700; color:var(--text-secondary); padding:4px 0; }
.mc-wd.sun, .mc-cell.sun .mc-d { color:#d32020; }
.mc-wd.sat, .mc-cell.sat .mc-d { color:#2a7fd0; }
.mc-cell { min-height:46px; border:1px solid var(--border-1); border-radius:7px; padding:3px 4px; position:relative; }
.mc-cell.mc-empty { border:none; }
.mc-cell.mc-has { background:color-mix(in srgb, var(--accent-solid) 12%, var(--surface-1)); border-color:var(--accent-solid); }
.mc-d { font-size:11.5px; color:var(--text-secondary); font-family:var(--font-mono); }
.mc-h { display:block; text-align:center; font-size:12.5px; font-weight:800; color:var(--accent-solid); margin-top:4px; }
@media (max-width:820px){ .records-split{grid-template-columns:1fr} }

/* 관리실 대시보드 — 월 네비·연차표 */
.rd-nav { border:1px solid var(--border-1); background:var(--surface-1); color:var(--accent-solid);
  border-radius:5px; cursor:pointer; font-size:11px; padding:1px 6px; font-family:inherit; }
.rd-nav:hover { background:var(--accent-solid); color:#fff; }
.rd-leavetable { margin-top:18px; }
.rd-leavetable h4 { margin:0 0 8px; font-size:14px; }
.rd-lt-wrap { max-height:340px; overflow:auto; border:1px solid var(--border-1); border-radius:10px; }
.rd-lt { width:100%; border-collapse:collapse; font-size:13px; }
.rd-lt th { position:sticky; top:0; background:var(--surface-inset); padding:8px 10px; text-align:center;
  border-bottom:1px solid var(--border-1); font-weight:700; }
.rd-lt td { padding:7px 10px; text-align:center; border-bottom:1px solid var(--border-1); }
.rd-lt td:first-child { font-weight:700; }
.rd-lt .lv-rem { color:var(--accent-solid); font-weight:800; }

/* 관리실 다운로드 바 (간략·상단) */
.roster-dlbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  background:var(--surface-1); border:1px solid var(--border-1); border-radius:12px;
  padding:12px 16px; margin-bottom:16px; }
.roster-dlbar .rdb-title { font-weight:700; font-size:14px; margin-right:4px; }
.roster-dlbar .rdb-sep { width:1px; height:24px; background:var(--border-1); margin:0 4px; }
.roster-dlbar .btn.sm { padding:7px 12px; font-size:13px; }
.roster-dlbar .rdb-year { width:78px; }
.roster-dlbar .rdb-month { width:92px; }
.roster-dlbar .form-input.sm, .roster-dlbar .form-select.sm { padding:6px 8px; font-size:13px; }
/* 연차표 검색창 */
.rd-lt-search { margin-bottom:10px; max-width:320px; }
.rd-lt th { cursor:pointer; user-select:none; }
.rd-lt th:hover { color:var(--accent-solid); }

/* 주소 확인 — 2단(본인 + 관리실 현황) */
.addr-grid { display:grid; grid-template-columns:minmax(300px,400px) 1fr; gap:18px; align-items:start; }
.addr-roster-list { max-height:420px; overflow:auto; }
.ar-row { display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--border-1); border-radius:8px; margin-bottom:6px; font-size:13.5px; }
.ar-row.ar-no { border-color:rgba(230,148,28,.4); background:rgba(230,148,28,.06); }
.ar-row.ar-ok { background:var(--surface-1); }
.ar-name em { color:var(--text-muted); font-style:normal; font-size:12px; }
.ar-badge { font-size:12px; color:var(--accent-solid); font-weight:700; white-space:nowrap; }
.ar-btn { color:#e6941c; border-color:rgba(230,148,28,.5); white-space:nowrap; }
@media (max-width:860px){ .addr-grid{grid-template-columns:1fr} }

/* 회람 확인 현황 — 확인/미확인 탭 */
.addr-filter { display:flex; gap:6px; margin:10px 0 12px; border-bottom:1px solid var(--border-1); padding-bottom:2px; }
.af-btn { border:none; background:none; color:var(--text-secondary); font-family:inherit; font-weight:700;
  font-size:13.5px; padding:8px 14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-3px; }
.af-btn:hover { color:var(--text-primary); }
.af-btn.active { color:var(--accent-solid); border-bottom-color:var(--accent-solid); }

/* 회람 확인 현황 — 다운로드 버튼 */
.addr-dl { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

/* ═══ 관리실 공휴일 달력 뷰 ═══ */
.rhc-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:10px; }
.rhc-title { font-weight:700; font-size:15px; min-width:120px; text-align:center; }
.rhc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.rhc-head { margin-bottom:4px; }
.rhc-wd { text-align:center; font-size:12px; font-weight:600; color:var(--text-muted,#8a8f98); padding:4px 0; }
.rhc-cell { position:relative; min-height:52px; border:1px solid var(--border-soft,#2a2d34); border-radius:8px;
  padding:4px 5px; display:flex; flex-direction:column; gap:2px; background:var(--surface-2,#1b1e24); }
.rhc-empty { border:none; background:transparent; }
.rhc-d { font-size:12px; font-weight:600; color:var(--text,#e6e6e6); }
.rhc-sun .rhc-d, .rhc-wd.rhc-sun { color:#ff6b6b; }
.rhc-sat .rhc-d, .rhc-wd.rhc-sat { color:#6ba8ff; }
.rhc-hol { background:rgba(255,107,107,0.12); border-color:rgba(255,107,107,0.45); }
.rhc-hol .rhc-d { color:#ff6b6b; }
.rhc-hol:hover { background:rgba(255,107,107,0.22); }
.rhc-name { font-size:10px; line-height:1.2; color:#ff8f8f; word-break:keep-all; }
.rhc-today { outline:2px solid var(--accent,#FF6B6B); outline-offset:-2px; }
.rhc-hint { font-size:11px; color:var(--text-muted,#8a8f98); margin-top:8px; text-align:center; }
@media (max-width:560px){ .rhc-cell{ min-height:44px; } .rhc-name{ font-size:9px; } }

/* ═══ 연차·서명 현황 표 서명 컬럼 ═══ */
.sig-cell { white-space:nowrap; }
.sig-thumb { height:34px; max-width:120px; vertical-align:middle;
  background:#fff; border:1px solid var(--border-soft,#333); border-radius:4px; padding:1px 3px; }
.sig-none { color:var(--text-muted,#8a8f98); font-size:12px; }
.sig-acts { margin-left:6px; display:inline-flex; gap:2px; vertical-align:middle; }
.sig-acts .btn-icon { font-size:14px; padding:2px 4px; }

/* ═══ 어드민 직원모달 서명 관리 ═══ */
.emp-sig-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.emp-sig-preview { min-width:130px; min-height:42px; display:flex; align-items:center;
  padding:4px 8px; background:#fff; border:1px solid var(--border-soft,#333); border-radius:6px; }
.emp-sig-preview .sig-thumb { height:34px; max-width:150px; border:none; padding:0; }

/* ═══ 야근 일괄입력 (여러 날짜 선택) ═══ */
.bulk-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 14px; border-radius:10px;
  background:rgba(255,107,107,0.10); border:1px solid rgba(255,107,107,0.35);
  font-size:14px; color:var(--text,#e6e6e6); }
.bulk-bar #bulk-count { font-weight:700; color:var(--accent,#FF6B6B); }
.bulk-bar .bulk-sep { color:var(--text-muted,#8a8f98); }
#bulk-toggle.active { background:var(--accent,#FF6B6B); color:#fff; border-color:var(--accent,#FF6B6B); }
.calendar-cell.bulk-picked { outline:2px solid var(--accent,#FF6B6B); outline-offset:-2px;
  background:rgba(255,107,107,0.18); cursor:pointer; }

/* ═══ 야근 캘린더 이번달 종합 란 ═══ */
.ot-summary{display:flex;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.ots-item{flex:1;min-width:110px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:6px 13px;border-radius:9px;
  background:var(--surface-2,#1b1e24);border:1px solid var(--border-soft,#2a2d34)}
.ots-item.ots-avg{background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.32)}
.ots-label{font-size:12px;color:var(--text-muted,#8a8f98)}
.ots-val{font-size:13px;color:var(--text,#e6e6e6);font-variant-numeric:tabular-nums;white-space:nowrap}
.ots-val strong{font-size:17px;font-weight:800;color:var(--accent,#FF6B6B);margin-right:2px}
@media (max-width:520px){.ots-item{min-width:0;padding:6px 10px}.ots-val strong{font-size:15px}}

/* 연차·서명 표 필터 바 */
.rd-lt-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rd-lt-filters .rd-lt-search{margin:0;max-width:320px;flex:1 1 220px}

/* ═══ 모바일 폭 맞춤 보정 ═══ */
html, body { max-width: 100%; overflow-x: hidden; }
.calendar-grid { min-width: 0; }
.calendar-cell { min-width: 0; }                 /* 그리드 셀이 폭에 맞춰 축소되도록 */
.cell-work-badge, .cell-hours-badge {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mode-tabs { flex-wrap: wrap; }                  /* 상단 탭 줄바꿈 */

@media (max-width: 560px) {
  .mode-tabs { gap: 6px; }
  .mode-tabs .mode-tab { flex: 1 1 auto; font-size: 13px; padding: 8px 6px; }
  .calendar-grid { gap: 3px; }
  .calendar-cell { min-height: 52px; padding: 4px 3px; border-radius: 6px; }
  .cell-work-badge, .cell-hours-badge { font-size: 8.5px; padding: 2px 3px; }
  .day-number { width: 17px; height: 17px; font-size: 10px; }
  .calendar-day-header { font-size: 10px; padding: 4px 0 5px; }
  .ot-summary { gap: 5px; }
  .ots-item { min-width: 0; padding: 5px 8px; flex: 1 1 30%; }
  .ots-label { font-size: 11px; }
  .rd-lt-filters { gap: 6px; }
  .af-tabs { flex-wrap: wrap; }
}


/* ── 연차 관리 탭 (신규) ───────────────────────────────────── */
#annual-table .num, #annual-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.annual-in {
  width: 78px; text-align: right; font-variant-numeric: tabular-nums;
  padding: 4px 8px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-inset); color: var(--text-primary); font: inherit; font-size: 13px;
}
.annual-in:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-tint); }
#annual-table tr.row-dirty td { background: var(--accent-tint); }
#annual-table tr.row-dirty td:first-child { box-shadow: inset 3px 0 0 var(--accent-soft); }


/* ── 관리실 연차: 월별 편집 그리드 ───────────────────────── */
.rannual-detail > td { background: var(--surface-inset); padding: 10px 14px !important; }
.rmon-grid { display: grid; grid-template-columns: repeat(6, minmax(72px, 1fr)); gap: 8px 10px; }
@media (max-width: 720px) { .rmon-grid { grid-template-columns: repeat(4, minmax(64px, 1fr)); } }
.rmon-cell { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-secondary); }
.rmon-in { width: 100%; text-align: right; }
.rmon-sum { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.rmon-sum b { color: var(--accent-soft); font-variant-numeric: tabular-nums; }


/* ══════════════════════════════════════════════════════════════════════
   2026 리프레시 2단계 — 컴포넌트 정제 (테이블·pill·인풋·버튼·카드)
   ══════════════════════════════════════════════════════════════════════ */

/* 관리실 데이터 테이블(.rd-lt) — 행 높이·정렬·옅은 hover */
.rd-lt th { padding: 9px 12px; text-transform: none; font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--text-muted); font-weight: 600; background: var(--table-head-bg); }
.rd-lt td { padding: 10px 12px; color: var(--text-secondary); }
.rd-lt td:first-child { color: var(--text-primary); font-weight: 500; }
.rd-lt tbody tr { transition: background-color var(--dur-1) var(--ease-standard); }
.rd-lt tbody tr:hover td { background: var(--surface-2); }
.rd-lt td.num, .rd-lt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rd-lt-wrap { border-color: var(--border-1); border-radius: var(--radius-md); }

/* 상태 pill — 채운 색 남발 대신 tint + 라운드풀 */
.lv-status { font-weight: 500; padding: 2px 9px; border-radius: var(--radius-full);
  font-size: 11.5px; letter-spacing: 0; }

/* 버튼 — all 트랜지션 회피(속성 명시) */
.btn { transition: background-color var(--dur-1) var(--ease-standard),
  box-shadow var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard),
  transform var(--dur-1) var(--ease-standard); }
.btn-ghost { border-color: var(--border-1); }
.btn-primary { box-shadow: var(--shadow-1); }

/* 인풋/셀렉트 — 포커스 링 통일 */
.form-input:focus, .form-select:focus {
  border-color: var(--accent-solid); box-shadow: var(--shadow-focus); outline: none; }

/* 카드 — 보더는 이미 있음, 그림자는 아주 옅은 1단(들썩임 없음) */
.card { box-shadow: var(--shadow-1); }


/* ══ 2026 리프레시 4단계 — 모션·마이크로 인터랙션 ══ */
.nav-item, .tab-btn, .af-btn, .mode-tab {
  transition: color var(--dur-2) var(--ease-standard),
    background-color var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard); }
.lv-item { transition: background-color var(--dur-1) var(--ease-standard),
  border-color var(--dur-1) var(--ease-standard); }
.lv-item:hover { background: var(--surface-2); }
.rank-1, .rank-2, .rank-3 { transition: transform var(--dur-2) var(--ease-standard); }

/* 스켈레톤 로더(스피너 대체) */
.skeleton { background: linear-gradient(90deg,
  var(--surface-inset) 25%, var(--surface-2) 37%, var(--surface-inset) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm); color: transparent !important; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Lucide 아이콘 정렬(라인 아이콘) */
[data-lucide], .lucide { width: 1em; height: 1em; stroke-width: 1.75;
  vertical-align: -0.14em; display: inline-block; }
.nav-icon [data-lucide], .nav-icon.lucide { width: 18px; height: 18px; }