/* ============================================
   약국 근무표 - 메인 스타일
   반응형: PC / 태블릿 / 모바일
   ============================================ */

/* CSS 변수 */
:root {
  --color-primary: #5b8def;
  --color-primary-dark: #4072d9;
  --color-success: #4caf82;
  --color-warning: #f0a050;
  --color-danger: #e25c5c;

  --color-bg: #f7f8fa;
  --color-card: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-text-light: #9ca3af;

  /* 팀 색상 */
  --color-team-pharmacist: #F0EAD9;
  --color-team-reception:  #F4DCD2;
  --color-team-dispensing: #E1F5EE;
  --color-team-etc:        #F1EFE8;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard',
               'Noto Sans KR', 'Apple SD Gothic Neo', Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: 'SF Mono', Consolas, monospace;
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* ============================================
   상단 네비게이션
   ============================================ */
.top-nav {
  /* 2026-06-28 (2-B Fix7): 배경 불투명 명시 (스크롤 시 본문 비침 방지) */
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 56px;
  gap: 24px;
}

.brand {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}
.brand:hover { text-decoration: none; }

.nav-menu {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav-menu a {
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s;
}
.nav-menu a:hover {
  background: var(--color-bg);
  text-decoration: none;
}
.nav-menu a.active {
  background: var(--color-primary);
  color: white;
}

.nav-auth {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-badge {
  background: #dcfce7;
  color: #166534;
  padding: 4px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
}

/* v6.1: 조회 모드 뱃지 */
.viewer-badge {
  background: #E6F1FB;
  color: #0C447C;
  padding: 4px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
}

/* ============================================
   메인 콘텐츠
   ============================================ */
.content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px;
}

.content-page {
  background: white;
  padding: 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   설정 레이아웃 (사이드바 + 컨텐츠)
   ============================================ */
.settings-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.settings-sidebar {
  background: white;
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 80px;
}
.settings-sidebar h3 {
  margin: 4px 0 12px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}
.settings-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.settings-menu li { margin-bottom: 2px; }
.settings-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 13.5px;
  transition: background 0.15s;
}
.settings-menu a:hover {
  background: var(--color-bg);
  text-decoration: none;
}
.settings-menu a.active {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

.settings-content {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  min-height: 500px;
}

.settings-content h1 {
  margin: 0 0 24px;
  font-size: 22px;
}
.settings-content h2 {
  margin: 32px 0 16px;
  font-size: 18px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.page-header h1 { margin: 0; }

.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 32px 0;
}

/* ============================================
   폼
   ============================================ */
.settings-form fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.settings-form legend {
  padding: 0 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted);
}

.form-row {
  margin-bottom: 16px;
}
.form-row:last-child { margin-bottom: 0; }

.form-row label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 13px;
}

.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=tel],
.form-row input[type=number],
.form-row input[type=time],
.form-row input[type=date],
.form-row input[type=password],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15);
}

.form-row input[type=checkbox] {
  margin-right: 6px;
  vertical-align: middle;
}
.form-row label:has(input[type=checkbox]) {
  cursor: pointer;
  font-weight: 400;
}

.form-hint {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

/* ============================================
   버튼
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: white;
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.btn:hover {
  background: var(--color-bg);
  text-decoration: none;
}
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  font-weight: 500;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.btn-block { width: 100%; }

.btn-mini {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--color-text);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-mini:hover {
  background: var(--color-bg);
  text-decoration: none;
}

/* 주별→월별 점프 버튼 (fix-HO 응급-4) */
.btn-mini.btn-jump-month {
  background: #EEF4FC;
  border-color: #B7CCEA;
  color: #2A5A9E;
  font-weight: 600;
}
.btn-mini.btn-jump-month:hover {
  background: #DCE8F8;
}
.btn-danger {
  color: var(--color-danger);
  border-color: #fcc;
}
.btn-danger:hover { background: #ffe5e5; }

/* ============================================
   알림 박스
   ============================================ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 13.5px;
}
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info    { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ============================================
   테이블
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: 13.5px;
}
.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.data-table thead th {
  background: var(--color-bg);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.data-table tbody tr:hover { background: #fafbfc; }

.row-inactive { opacity: 0.5; }

.team-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #ddd;
  vertical-align: middle;
  margin-right: 6px;
}

/* ============================================
   PIN 인증 페이지
   ============================================ */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 20px;
}
.auth-card {
  background: white;
  padding: 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.auth-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
}
.auth-desc {
  color: var(--color-text-muted);
  margin: 0 0 24px;
  font-size: 13.5px;
}
.pin-form { margin-bottom: 16px; }
.pin-input {
  width: 100%;
  padding: 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 28px;
  text-align: center;
  letter-spacing: 16px;
  margin-bottom: 12px;
  font-family: monospace;
}
.pin-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.auth-footer {
  margin-top: 20px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.auth-footer .separator {
  margin: 0 8px;
  color: var(--color-text-light);
}
.auth-hint {
  margin-top: 20px;
  font-size: 12px;
  color: var(--color-text-light);
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--color-text-muted);
}
.empty-state-large {
  padding: 60px 40px;
  text-align: center;
}
.phase-badge {
  display: inline-block;
  background: #fff7ed;
  color: #c2410c;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  margin: 12px 0 32px;
}
.phase-info {
  background: var(--color-bg);
  padding: 24px;
  border-radius: var(--radius-lg);
  margin-top: 20px;
}
.phase-info h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-muted);
}
.phase-info ul, .phase-info ol {
  margin: 0;
  padding-left: 20px;
  line-height: 2;
}

.text-muted { color: var(--color-text-muted); }

/* ============================================
   반응형: 태블릿 (768px ~ 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .settings-layout {
    grid-template-columns: 200px 1fr;
    gap: 16px;
  }
  .settings-sidebar {
    padding: 12px;
  }
  .settings-menu a {
    padding: 8px 10px;
    font-size: 13px;
  }
  .content { padding: 16px; }
  .settings-content { padding: 24px; }
}

/* ============================================
   반응형: 모바일 (~ 767px)
   ============================================ */
@media (max-width: 767px) {
  body { font-size: 13.5px; }

  .nav-inner {
    padding: 0 12px;
    gap: 8px;
    height: 52px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .brand { font-size: 14px; }
  .nav-menu {
    gap: 2px;
    overflow-x: auto;
  }
  .nav-menu a {
    padding: 6px 10px;
    font-size: 13px;
  }
  .admin-badge { font-size: 11px; padding: 3px 8px; }

  .content { padding: 12px; }

  /* 사이드바를 상단 탭으로 */
  .settings-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .settings-sidebar {
    position: static;
    padding: 8px;
  }
  .settings-sidebar h3 { display: none; }
  .settings-menu {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .settings-menu li {
    margin: 0;
    flex-shrink: 0;
  }
  .settings-menu a {
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 13px;
  }

  .settings-content {
    padding: 20px 16px;
    border-radius: var(--radius);
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 테이블 가로 스크롤 */
  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .auth-card {
    padding: 28px 20px;
  }
}

/* ============================================
   요일별 영업시간 테이블
   ============================================ */
.weekday-quick-tools {
  background: var(--color-bg);
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.weekday-quick-tools .form-hint {
  margin: 0 0 8px;
  color: var(--color-text);
}
.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.weekday-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  font-size: 14px;
}
.weekday-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.weekday-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.weekday-table tbody tr:last-child td {
  border-bottom: none;
}

.weekday-row.is-closed {
  background: #fafafa;
  opacity: 0.6;
}
.weekday-row.is-closed .day-badge {
  opacity: 0.5;
}

.weekday-row.is-weekend:not(.is-closed) {
  background: #fffaf2;
}

.col-day { width: 70px; }
.col-closed { width: 90px; }
.col-time { width: 140px; }
.col-sep {
  width: 24px;
  text-align: center;
  color: var(--color-text-muted);
}
.col-break { width: 100px; }
.col-calc {
  width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.break-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: white;
  text-align: center;
}
.break-input:disabled {
  background: #f3f4f6;
  color: var(--color-text-light);
  cursor: not-allowed;
}

.day-work-label {
  font-weight: 600;
  color: var(--color-text);
}

.emp-total-row {
  background: var(--color-bg);
  font-size: 14px;
}
.emp-total-row td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  border-top: 2px solid var(--color-border) !important;
}
.total-contract {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-primary);
}

/* ============================================
   필터 탭 (재직자만/전체/퇴사자)
   ============================================ */
.filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--color-bg);
  border-radius: var(--radius);
  width: fit-content;
}
.filter-tab {
  padding: 7px 16px;
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.filter-tab:hover {
  background: rgba(255,255,255,0.6);
  text-decoration: none;
  color: var(--color-text);
}
.filter-tab.active {
  background: white;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.filter-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background: rgba(0,0,0,0.08);
  font-size: 11px;
  font-weight: 600;
}
.filter-tab.active .filter-count {
  background: var(--color-primary);
  color: white;
}

/* ============================================
   상태 뱃지 (재직/퇴사)
   ============================================ */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.status-active {
  background: #dcfce7;
  color: #166534;
}
.status-resigned {
  background: #f3f4f6;
  color: #6b7280;
}

.day-badge {
  display: inline-block;
  width: 36px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  background: var(--color-bg);
  color: var(--color-text);
}
.day-badge.day-sun { background: #fee2e2; color: #b91c1c; }
.day-badge.day-sat { background: #dbeafe; color: #1e40af; }

.checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
}
.checkbox-wrap input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.time-input {
  padding: 7px 10px !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  background: white;
}
.time-input:disabled {
  background: #f3f4f6;
  color: var(--color-text-light);
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .weekday-table { font-size: 13px; }
  .weekday-table thead th { padding: 6px 4px; font-size: 10.5px; }
  .weekday-table tbody td { padding: 6px 4px; }
  .col-day { width: 44px; }
  .col-closed { width: 60px; }
  .col-time { width: auto; }
  .col-sep { width: 12px; }
  .col-break { width: 64px; }
  .col-calc { width: 70px; font-size: 12px; }
  .day-badge {
    width: 30px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
  }
  .time-input,
  .break-input { padding: 6px 6px !important; font-size: 12.5px; }
  .quick-buttons { gap: 4px; }
  .quick-buttons .btn-mini { font-size: 11px; padding: 4px 8px; }

  /* 직원 폼: 가로 스크롤 허용 (요일별 컬럼 7개는 모바일에서 좁음) */
  .emp-schedule-table { min-width: 540px; }
  fieldset:has(.emp-schedule-table) {
    overflow-x: auto;
  }
}

/* ============================================
   Phase 2: 팀 관리
   ============================================ */
.team-edit-table .color-input {
  width: 48px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  vertical-align: middle;
}
.team-color-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.team-color-code {
  font-size: 11px;
  font-family: 'SF Mono', Consolas, monospace;
}
.team-name-input,
.team-sort-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
}
.team-sort-input { max-width: 80px; }
.col-team-color { width: 140px; }
.col-team-sort { width: 90px; }

/* ============================================
   Phase 2: 포지션 칩
   ============================================ */
.pos-group-title {
  margin: 28px 0 12px;
  font-size: 15px;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pos-group-title small {
  font-weight: normal;
  font-size: 12px;
}

.position-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.pos-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2a2a2a;
  text-decoration: none;
  background: #eee;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.1s, box-shadow 0.15s;
  cursor: pointer;
}
.pos-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  text-decoration: none;
}
.pos-chip-inactive {
  opacity: 0.5;
  filter: grayscale(0.4);
}
.pos-chip-star {
  font-size: 11px;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
}
.pos-chip-tag {
  font-size: 10px;
  background: rgba(0,0,0,0.18);
  color: white;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
}

.advanced-table summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 600;
  color: var(--color-text-muted);
}
.advanced-table summary:hover { color: var(--color-text); }

.color-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.color-input-row input[type=color] {
  width: 60px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.color-input-row code {
  font-size: 12px;
}

/* ============================================
   Phase 2: 병원 관리
   ============================================ */
.phone-code {
  font-size: 12px;
  background: transparent;
  padding: 0;
  color: var(--color-text-muted);
}

/* ============================================
   Phase 2: 루틴표
   ============================================ */
.routine-page {
  background: white;
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.routine-header {
  margin-bottom: 16px;
}
.routine-header h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

/* 요일 탭 */
.routine-day-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 6px;
  background: var(--color-bg);
  border-radius: var(--radius);
  width: fit-content;
}
.day-tab {
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  transition: all 0.15s;
  min-width: 52px;
}
.day-tab:hover {
  background: rgba(255,255,255,0.7);
  text-decoration: none;
}
.day-tab.active {
  background: white;
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
}
.day-tab-name {
  font-size: 15px;
  font-weight: 700;
}
.day-tab-en {
  font-size: 9.5px;
  color: var(--color-text-light);
  letter-spacing: 0.5px;
}
.day-tab-sun.active .day-tab-name { color: #b91c1c; }
.day-tab-sat.active .day-tab-name { color: #1e40af; }

/* 그리드 */
.routine-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: white;
}
.routine-grid {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  table-layout: fixed;
}

.routine-grid .col-name     { width: 130px; }
.routine-grid .col-shift    { width: 90px; }
.routine-grid .col-timeline { width: auto; }
.routine-grid .col-closing  { width: 140px; }

.routine-grid th,
.routine-grid td {
  padding: 8px;
  border: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: 13px;
  background: white;
}
.routine-header-row th {
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* 시간축 헤더 */
.timeline-axis {
  position: relative;
  height: 24px;
  width: 100%;
}
.hour-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid var(--color-border);
}
.hour-label {
  position: absolute;
  top: 2px;
  left: -10px;
  width: 20px;
  text-align: center;
  font-size: 10.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 팀 헤더 */
.routine-team-header td {
  font-size: 13px;
  padding: 6px 10px !important;
  border-top: 2px solid rgba(0,0,0,0.08);
}
.team-count {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: 6px;
}

/* 직원 행 */
.routine-row.is-off td {
  background: #fafafa;
  color: var(--color-text-light);
}
.routine-row .col-name {
  font-weight: 600;
}
.routine-row.is-off .col-name .emp-name {
  color: var(--color-text-light);
}
/* 휴무 행 - 시간축+마감 셀 합쳐서 한 줄 압축 (Phase 4) */
.routine-row.is-off td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* 2026-05-20 hotfix: 미지정 당직 슬롯 placeholder 행 (주별 — 회의 토론용) */
.routine-row.is-placeholder td {
  background: #FFF6E5 !important;
  border-top: 1px dashed #D89B5B !important;
  border-bottom: 1px dashed #D89B5B !important;
}
.routine-row.is-placeholder .emp-name {
  color: #8A4A12;
  font-style: italic;
  font-weight: 600;
}
.routine-row.is-placeholder .emp-duty {
  color: #B07835;
  font-style: italic;
}
.routine-row.is-placeholder .shift-time-compact {
  color: #6D5028;
  font-weight: 600;
}
.routine-row.is-placeholder .pos-bar-placeholder {
  opacity: 0.78;
  border-style: dashed !important;
  border-width: 1.5px !important;
  cursor: default;
}
.routine-row.is-placeholder .pos-bar-placeholder:hover {
  opacity: 0.78;        /* 호버 효과 없음 — 클릭 불가 강조 */
}
.routine-row.is-placeholder .closing-chip-placeholder {
  opacity: 0.78;
  border: 1px dashed #888;
  cursor: default;
}
.routine-row.is-placeholder .placeholder-assign-link {
  font-size: 11px;
  color: #8A4A12;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.routine-row.is-placeholder .placeholder-assign-link:hover {
  text-decoration: underline;
}
/* 주별 헤더 — 미지정 슬롯 배지 */
.day-block-unassigned-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  background: #FFF6E5;
  border: 1px dashed #D89B5B;
  color: #8A4A12;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 11px;
  letter-spacing: 0.2px;
}
.col-off-merged {
  text-align: center;
  background: #fafafa;
  color: var(--color-text-light);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 4px !important;
  height: auto;
  vertical-align: middle;
}
.off-merged-label {
  opacity: 0.55;
}
.emp-name { font-size: 13.5px; }
.emp-duty {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-top: 2px;
}

.col-shift {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.shift-time {
  font-size: 12px;
  line-height: 1.4;
}
.shift-sep {
  color: var(--color-text-light);
  font-size: 10px;
}
.shift-off {
  color: var(--color-text-light);
  font-size: 12px;
}
.shift-source-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 9.5px;
  background: #fff7ed;
  color: #c2410c;
  padding: 1px 5px;
  border-radius: 4px;
}

/* 편집 가능 셀 */
.editable-shift {
  cursor: pointer;
  transition: background 0.15s;
}
.editable-shift:hover {
  background: #f0f4ff !important;
}

/* 시간축 셀 */
.col-timeline {
  position: relative;
  height: 56px;
  padding: 0 !important;
  background: white;
}
.hour-gridline {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 1px dashed rgba(0,0,0,0.08);
  pointer-events: none;
}
.shift-band {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: rgba(91, 141, 239, 0.06);
  border: 1px dashed rgba(91, 141, 239, 0.3);
  border-radius: 4px;
  pointer-events: none;
}
.timeline-click-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: crosshair;
  z-index: 1;
}
.timeline-click-area:hover {
  background: rgba(91, 141, 239, 0.04);
}
.timeline-off {
  text-align: center;
  color: var(--color-text-light);
  line-height: 56px;
  font-size: 18px;
}

/* 포지션 막대 */
.pos-bar {
  position: absolute;
  top: 8px;
  bottom: 8px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #1f2937;
  cursor: default;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: transform 0.1s, box-shadow 0.15s;
}
.pos-bar-star {
  border-width: 2px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.pos-bar-editable {
  cursor: pointer;
  z-index: 3;
}
.pos-bar-editable:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.pos-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
  pointer-events: none;
}

/* 마감 칩 */
.col-closing {
  font-size: 11px;
  line-height: 1.6;
}
.closing-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 1px 2px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #1f2937;
}
.closing-chip-editable {
  cursor: pointer;
}
.closing-chip-editable:hover {
  filter: brightness(0.95);
}
.btn-mini-add-closing {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0;
  border: 1px dashed var(--color-text-muted);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  vertical-align: middle;
}
.btn-mini-add-closing:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.text-light { color: var(--color-text-light); }

.routine-legend {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

/* ============================================
   모달
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-content {
  background: white;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.modal-header h2 {
  margin: 0;
  font-size: 16px;
}
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  padding: 0 4px;
}
.modal-close:hover { color: var(--color-text); }

.modal-body {
  padding: 20px;
  flex: 1;
}
.modal-body .full-width {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: white;
}
.modal-body input[type=time] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
}

.modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================
   반응형: 루틴표 모바일
   ============================================ */
@media (max-width: 767px) {
  .routine-page { padding: 12px; }
  .routine-grid {
    min-width: 700px;
    font-size: 11.5px;
  }
  .routine-grid th,
  .routine-grid td { padding: 5px; font-size: 11.5px; }
  .routine-grid .col-name { width: 90px; }
  .routine-grid .col-shift { width: 70px; }
  .routine-grid .col-closing { width: 100px; }
  .col-timeline { height: 48px; }
  .pos-bar-label { font-size: 10px; padding: 0 4px; }
  .hour-label { font-size: 9px; }
  .modal-content { max-height: 95vh; }
  .modal-body { padding: 14px; }
  .modal-footer { padding: 10px 14px; flex-wrap: wrap; }
  .day-tab { min-width: 44px; padding: 6px 10px; }
}

/* ============================================
   Phase 3: 주별/일별 대시보드
   ============================================ */

.weekly-page {
  padding: 16px 20px 60px;
  max-width: 1600px;
  margin: 0 auto;
}

.weekly-header h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.weekly-header .text-muted {
  margin: 0 0 16px;
}

/* 툴바 (모드 토글 + 날짜 네비) */
.weekly-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: #F4F4F6;
  border: 2px solid #0F2F5C;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  /* v5 hotfix5+6+7: sticky 툴바 — 연회색 배경 + 남색 테두리로 본문과 또렷이 구분 */
  position: sticky;
  top: 56px;
  z-index: 99;
  isolation: isolate;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* 2026-06-25 (Phase A-1): 시뮬 모드에서는 배너(56px)가 한 층 더 있으므로
   툴바를 배너 아래(top:96px)로 내리고 z-index 한 단계 낮춤(98). 실제 모드는 위 기본값(top:56) 유지. */
.weekly-page.is-scenario .weekly-toolbar {
  top: 96px;
  z-index: 98;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.view-toggle-btn {
  padding: 6px 14px;
  font-size: 13px;
  background: var(--color-card);
  color: var(--color-text);
  text-decoration: none;
  border-right: 1px solid var(--color-border);
  transition: background 0.12s;
}
.view-toggle-btn:last-child { border-right: none; }
.view-toggle-btn:hover { background: var(--color-bg); }
.view-toggle-btn.active {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

.date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.date-nav-sep {
  color: var(--color-text-light);
  margin: 0 4px;
}
.date-nav-label {
  font-weight: 600;
  margin-left: 8px;
  color: var(--color-text);
}
.date-picker-form { display: inline-block; }
.date-picker {
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* 검증 placeholder */
.validation-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fafbfc;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.validation-placeholder-icon { font-size: 14px; }

/* 날짜 블록 */
.day-block {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.day-block-today {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.15);
}

.day-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
/* 요일별 헤더 색 (살짝만) */
.day-block-header-wd0 { background: #fdf0f0; } /* 일 */
.day-block-header-wd6 { background: #eef4fc; } /* 토 */

.day-block-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
.day-block-today-tag {
  background: var(--color-primary);
  color: white;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.day-block-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}
.day-block-count {
  /* 2026-05-24 hotfix 이후 day-block-meta 안에서는 사용 안 됨.
     좌측 day-block-count-inline 이 대체. 호환 위해 클래스 정의는 유지. */
  background: white;
  border: 1px solid var(--color-border);
  padding: 2px 8px;
  border-radius: 10px;
}
/* 2026-05-24 hotfix: "N명 근무" 좌측 그룹화 (팀카운트 옆 괄호) */
.day-block-count-inline {
  margin-left: 8px;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 13px;
}

/* 주별 그리드 (routine-grid 재사용 + 컬럼 추가) */
.weekly-grid-wrap {
  padding: 0;
}
.weekly-grid {
  margin: 0;
  border-radius: 0;
}
.weekly-grid .col-team     { width: 56px; text-align: center; }
.weekly-grid .col-name     { width: 100px; }
.weekly-grid .col-shift    { width: 78px; }
.weekly-grid .col-oc       { width: 50px; text-align: center; }
.weekly-grid .col-notes    { width: 130px; }
.weekly-grid .col-timeline { width: auto; }
.weekly-grid .col-closing  { width: 124px; }

/* O/C 뱃지 */
.oc-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  margin: 1px;
}
.oc-open  { background: #4caf82; }
.oc-close { background: #e89b0f; }

/* 특이사항 */
.col-notes .notes-text {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 수동 수정된 행 표시 */
.routine-row.is-modified .emp-name {
  position: relative;
}
.modified-dot {
  color: var(--color-warning);
  font-size: 10px;
  margin-left: 3px;
  vertical-align: middle;
}

/* 포지션 막대 — 출처별 시각화 (살짝만) */
.pos-bar-from-routine {
  /* 루틴 자동 적용: 기본 형태 */
}
.pos-bar-from-daily {
  /* 수동 수정: 점선 테두리 살짝 (이미 border가 있는 식사/당직은 그대로) */
  box-shadow: 0 0 0 1px rgba(91, 141, 239, 0.35) inset;
}

/* 빈 날 안내 */
.empty-day {
  text-align: center;
  color: var(--color-text-muted);
  padding: 16px !important;
  font-style: italic;
}

/* 범례 */
.routine-legend .legend-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  margin: 0 2px;
}
.routine-legend .legend-routine {
  background: #f1f1f1;
  color: #6b7280;
}
.routine-legend .legend-daily {
  background: rgba(91, 141, 239, 0.18);
  color: #4072d9;
}

/* 체크박스 행 */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* 반응형 */
@media (max-width: 1100px) {
  .weekly-grid {
    min-width: 900px;
    font-size: 12px;
  }
  .weekly-grid .col-notes { width: 110px; }
}

@media (max-width: 767px) {
  .weekly-page { padding: 12px; }
  .weekly-toolbar { padding: 8px 10px; gap: 10px; }
  .view-toggle-btn { padding: 5px 10px; font-size: 12px; }
  .weekly-grid {
    min-width: 820px;
    font-size: 11.5px;
  }
  .weekly-grid th,
  .weekly-grid td { padding: 4px; font-size: 11.5px; }
  .weekly-grid .col-team { width: 44px; }
  .weekly-grid .col-name { width: 76px; }
  .weekly-grid .col-shift { width: 66px; }
  .weekly-grid .col-oc { width: 40px; }
  .weekly-grid .col-notes { width: 90px; }
  .weekly-grid .col-closing { width: 88px; }
  .day-block-date { font-size: 13px; }
}

/* Phase 3: 복사 버튼 & 모달 */
.day-block-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-copy-day {
  padding: 3px 10px;
  font-size: 11.5px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.12s;
}
.btn-copy-day:hover {
  background: #f0f4ff;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.modal-content-narrow {
  max-width: 480px;
}

.copy-target-display {
  background: var(--color-bg);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text);
}

.copy-quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.btn-mini-pick {
  padding: 5px 10px;
  font-size: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-mini-pick:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* v5 hotfix10: 복사 범위 (scope) UI — 라디오 + 팀/직원 체크 */
.copy-scope-row { }
.copy-scope-radios {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.copy-scope-radio {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; cursor: pointer;
}
.copy-scope-panel {
  background: #F8F6EE;
  border: 1px solid #E8E0C8;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
}
.copy-scope-panel-team {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.copy-scope-panel-emp {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 240px; overflow-y: auto;
}
.copy-scope-emp-group { }
.copy-scope-emp-group-label {
  font-size: 10px; font-weight: 700; color: #888070;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.copy-scope-emp-group .copy-scope-check {
  margin-left: 8px;
}
.copy-scope-check {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; cursor: pointer;
  padding: 2px 4px;
}
.copy-scope-check:hover { background: rgba(0,0,0,0.03); border-radius: 3px; }

.alert-warning {
  background: #fff7e6;
  border: 1px solid #f0b95b;
  color: #874b00;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ==========================
   Phase 3.5: 시간 1줄 + 인쇄 + 추가 버튼
   ========================== */

/* 출퇴근 1줄 표시 */
.shift-time-compact {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: -0.3px;
}
.shift-time-compact .shift-sep {
  color: #888;
  margin: 0 2px;
}

/* 툴바 오른쪽 액션 버튼 영역 */
.toolbar-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
  align-items: center;
}
.btn-print {
  background: #e8f4f8;
  border-color: #b8dce8;
}
.btn-print:hover { background: #d4ecf2; }

/* ==========================
   인쇄용 CSS (A4 가로 한 장)
   ========================== */
@media print {
  /* 화면 그대로 인쇄 정책 (Phase 4 v4.2 수정):
     CSS는 최소한만. 폰트/컬럼/폭 등은 화면 그대로 두고
     사용자가 인쇄 미리보기에서 용지 / 방향 / 배율을 자유롭게 조절.
     ※ @page size 강제 제거 — 브라우저 기본값 (사용자가 미리보기에서 선택) */

  /* 2026-05-24 hotfix-1 옵션 A 후속:
     머리말(body::before, 약 8mm 높이)이 페이지 상단에 fixed 로 그려지므로
     top margin 을 충분히 (16mm) 줘서 콘텐츠가 머리말 영역과 겹치지 않게 함.
     이전엔 8mm 였고 line 4386 에서 14mm 로 덮어썼는데, @page 룰 두 번 선언 시
     크롬에서 cascade 가 보장되지 않아 첫 페이지 헤더가 잘렸음.
     한 줄로 통합해서 충돌 제거. */
  @page {
    margin: 16mm 8mm 8mm 8mm;
  }

  /* 인쇄 시 숨길 요소들 - 화면에서만 의미 있는 것들 */
  .top-nav,                  /* v6.2: 상단 고정 네비 (실제 클래스명) */
  .site-header,              /* (legacy) */
  .site-footer,
  .weekly-header,            /* v6.2: "주별 대시보드" 페이지 헤더 */
  .alert,
  .alert-info,
  .alert-success,
  .alert-warning,
  .alert-error,
  .weekly-unconfigured-warn, /* v6.2: 운영 미설정 공휴일 배지 */
  .toolbar-actions,
  .date-nav,
  .view-toggle,
  .weekly-toolbar,
  .validation-placeholder,
  .validation-sidebar,       /* v6.2: 검증 사이드바 */
  .modal-overlay,
  .day-copy-btn,
  .btn-mini,
  .btn-copy-day,
  .btn-day-print,
  .btn-print,
  .editable-shift::after,
  .shift-source-tag,
  .timeline-click-area,
  .btn-mini-add-closing,
  .modified-dot,
  .pin-button,
  .auth-status-bar,
  .dev-tooltip-icon,         /* v6.2: ⓘ deviation 아이콘 */
  .dev-tooltip-box,
  #position-modal,
  #shift-modal,
  #copy-day-modal,
  #copy-week-modal,
  #day-note-modal,
  #pos-info-modal {
    display: none !important;
  }

  /* v6.2: weekly-page 의 사이드바 padding 제거 (사이드바 숨겨도 padding 만 남으면 우측 빈 공간) */
  .weekly-page,
  .weekly-page.vs-active-expanded,
  .weekly-page.vs-active-collapsed {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* v6.2: main.content 의 padding 도 제거 (인쇄 시 빈 여백 줄이기) */
  main.content,
  .content {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* v6.2: body / html 첫 페이지 위 여백 제거 */
  body, html {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 페이지 여백/배경 정리 */
  body {
    background: #fff !important;
  }

  /* 색상이 인쇄에 나오도록 (시간축 막대, 팀 셀, 날짜 헤더 등) */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 페이지 분할 정책 (2026-05-24 hotfix-1 옵션 A 재정의):
     - day-block 마다 새 페이지 시작 (page-break-before: always)
       → 일자 헤더와 본문이 절대 분리될 수 없음 (원인 자체를 제거)
     - 첫 day-block 은 페이지 분할 안 함 (page-break-before: avoid)
       → 첫 페이지 위쪽 빈 페이지 방지
     - day-block 내부는 자연스럽게 분리 (큰 일자도 2페이지 걸쳐도 OK)
     - thead 자동반복으로 매 페이지 상단에 일자 헤더 + 컬럼 헤더 따라옴
     - 직원 행 단위로는 깨지지 않게 (tr 단위 avoid)
     2026-05-24 hotfix-1 v5 변경: table/tbody 단위 avoid 제거 (11명 큰 표 분리 가능)
     트레이드오프: 페이지 수 늘어남 (1명만 근무하는 휴일도 한 페이지 차지) */
  .day-block {
    overflow: visible !important;       /* hidden 해제로 break-inside 활성화 */
    page-break-before: always;          /* 핵심: 일자마다 새 페이지 시작 */
    break-before: page;                 /* 모던 문법 */
    /* page-break-inside / break-inside 는 명시 안 함 (auto = 자연스럽게 분리) */
  }
  /* 첫 day-block 은 페이지 분할 안 함 (첫 페이지 빈 페이지 방지) */
  .day-block:first-child {
    page-break-before: avoid;
    break-before: avoid;
  }
  /* 2026-05-24 hotfix-1 v5: 직원 한 명 행은 절대 잘리면 안 됨 */
  .day-block tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .routine-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* 빈 메모 안내문(📌 메모 추가하기)은 인쇄에 안 나오게 */
  .day-block-note .day-note-empty { display: none !important; }
  .day-block-note:has(.day-note-empty):not(:has(.day-note-text)) {
    display: none !important;
  }
}

/* 좁은 모달 (한 주 복사) - 기존 copy-modal과 동일 스타일 재사용 */

/* ==================================================
 * Phase 4 v2 - 주별/일별 화면 개선
 * ================================================== */

/* 팀 컬럼 (rowspan으로 같은 팀 첫 행에만 표시) */
.weekly-grid .col-team {
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 12px;
}
.weekly-grid .team-cell {
  /* 인라인 style로 팀 색이 들어옴 */
  border-right: 0.5px solid rgba(0,0,0,0.08);
}
.weekly-grid .team-cell-name {
  display: inline-block;
  padding: 2px 4px;
  letter-spacing: 0.5px;
  /* 팀명이 길 때 줄바꿈 */
  word-break: keep-all;
  line-height: 1.3;
}

/* 날짜 헤더의 팀별 인원 표시 */
.day-block-team-counts {
  margin-left: 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-secondary, #444);
  white-space: nowrap;
}
.day-block-team-counts .tc-team {
  color: var(--color-text-secondary, #555);
  font-weight: 500;
  margin-right: 3px;
}
.day-block-team-counts .tc-count {
  font-weight: 700;
  color: #26215C;
  font-variant-numeric: tabular-nums;
}

/* 일별 메모 (날짜 헤더 아래 1줄) */
.day-block-note {
  padding: 4px 16px;
  font-size: 12.5px;
  background: #FFFCF2;
  border-bottom: 1px solid #F4D58E;
  color: #4A3500;
  line-height: 1.4;
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.day-block-note .day-note-icon {
  flex-shrink: 0;
}
.day-block-note .day-note-text {
  word-break: break-word;
}
.day-block-note-editable {
  cursor: pointer;
}
.day-block-note-editable:hover {
  background: #FFF8DC;
}
.day-block-note .day-note-empty {
  color: #888;
  font-size: 11.5px;
  font-style: italic;
}
.day-block-note:empty {
  display: none;
}

/* 일별 인쇄 새 탭 버튼 */
.btn-day-print {
  background: transparent;
  border: 0.5px solid #ccc;
  text-decoration: none;
  color: inherit;
}
.btn-day-print:hover {
  background: #f4f4f4;
}

/* 포지션 정보 모달 (조회 모드용) */
.modal-content-narrow {
  max-width: 420px;
  width: 90%;
}
.pos-info-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 0.5px solid #eee;
  font-size: 13px;
}
.pos-info-row:last-child {
  border-bottom: none;
}
.pos-info-label {
  flex: 0 0 130px;
  color: #888;
  font-weight: 500;
}
.pos-info-value {
  flex: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 막대에 hover 시 cursor: pointer (조회 모드에서도 클릭 가능 표시) */
.pos-bar { cursor: pointer; }
.closing-chip { cursor: pointer; }

/* ==================================================
 * Phase 4 v3 - 월별 대시보드 (/monthly)
 * ================================================== */
.monthly-page {
  padding: 16px 20px 28px;
  background: #FAFAF7;
  min-height: calc(100vh - 56px);
}

/* 상단 툴바: 타이틀 / 네비 / 액션 */
/* 2026-05-24 hotfix: 월별 toolbar 통일 (주별 .weekly-toolbar 패턴 복제)
   ─ .monthly-header-row : 머리말 줄 (박스 없음, 그냥 h1 + 배지)
   ─ .monthly-toolbar    : 네비/필터/액션 박스 (sticky, 회색 배경 + 남색 테두리)
   ─ .monthly-filters    : 필터 토글 줄 (월별 고유)
*/
.monthly-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 10px;
  flex-wrap: wrap;
}
.monthly-header-row h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #26215C;
  letter-spacing: -0.3px;
}

.monthly-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: #F4F4F6;
  border: 2px solid #0F2F5C;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  /* sticky: weekly-toolbar 와 동일 좌표 */
  position: sticky;
  top: 56px;
  z-index: 99;
  isolation: isolate;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* 2026-06-25 (Phase A-1): 시뮬 모드에서는 배너(56px)가 한 층 더 있으므로
   툴바를 배너 아래(top:96px)로 내리고 z-index 한 단계 낮춤(98). 실제 모드는 위 기본값(top:56) 유지. */
.monthly-page.is-scenario .monthly-toolbar {
  top: 96px;
  z-index: 98;
}
.monthly-toolbar .date-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.monthly-toolbar .toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.monthly-toolbar .monthly-scenario-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* 필터 토글 줄 */
.monthly-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #fff;
  border: 0.5px solid #E4DFCF;
  border-radius: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}
.monthly-filters .filter-label {
  color: #555;
  font-weight: 600;
  margin-right: 4px;
}
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.filter-toggle:hover {
  background: #F4F2EB;
}
.filter-toggle input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}

/* 캘린더 그리드 */
.monthly-grid {
  background: #fff;
  border: 0.5px solid #D9D3BD;
  border-radius: 6px;
  overflow: hidden;
}

/* 요일 헤더 (월~일) */
.month-wd-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #F4F0E2;
  border-bottom: 0.5px solid #D9D3BD;
}
.month-wd-cell {
  text-align: center;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #4A4636;
  border-right: 0.5px solid #E4DFCF;
}
.month-wd-cell:last-child {
  border-right: none;
}
.month-wd-cell.wd-sat { color: #2469B8; }
.month-wd-cell.wd-sun { color: #C5413E; }

/* 셀 컨테이너 (6주 × 7일) */
.month-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Phase 4 v4.1: 토글 펼침 시 셀이 늘어나야 하므로 auto */
  /* 4단계: minmax(120px) → auto. 셀 최소높이는 .month-cell min-height 가 보장하고,
     주간공지 줄(grid-column 1/-1)은 내용만큼만 차지하도록 행 최소값 제거 */
  grid-auto-rows: auto;
}

/* 개별 셀 */
.month-cell {
  position: relative;
  display: block;
  padding: 6px 7px 8px;
  border-right: 0.5px solid #ECE7D2;
  border-bottom: 0.5px solid #ECE7D2;
  background: #fff;
  color: #2A2620;
  text-decoration: none;
  min-height: 120px;
  font-size: 11.5px;
  line-height: 1.35;
  transition: background 0.12s;
  /* overflow: hidden 제거 — 토글 펼침 시 내용 다 보이게 */
}
.month-cell:hover {
  background: #FBF8EA;
}
.month-cell:nth-child(7n) { border-right: none; }
.month-cells .month-cell:nth-last-child(-n+7) { border-bottom: none; }

/* 셀 헤더 (일자 + 오늘 태그) */
.month-cell-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.month-cell-day {
  font-weight: 600;
  font-size: 13.5px;
  color: #2A2620;
}
.month-cell-today-tag {
  font-size: 10.5px;
  color: #2469B8;
  font-weight: 600;
}
.month-cell-warn {
  margin-left: auto;
  font-size: 11px;
}

/* 토/일 글자 색 */
.month-cell.is-saturday .month-cell-day { color: #2469B8; }
.month-cell.is-sunday   .month-cell-day { color: #C5413E; }

/* 다른 달 셀: 흐림 (음영 + 텍스트 옅게, 데이터는 동일 표시 — fix-HO 응급-5) */
.month-cell.is-other {
  background: #F8F6EF;
  color: #B9B3A0;
}
.month-cell.is-other .month-cell-day { color: #B9B3A0; }
.month-cell.is-other.is-saturday .month-cell-day { color: #8FA8C5; }
.month-cell.is-other.is-sunday   .month-cell-day { color: #C9A8A7; }

/* 내부 모든 텍스트도 옅게 (셀 단위 시각 구분) */
.month-cell.is-other .month-cell-staff-count,
.month-cell.is-other .month-cell-staff-count .mc-tc,
.month-cell.is-other .month-cell-staff-detail,
.month-cell.is-other .month-cell-hospitals,
.month-cell.is-other .mc-hosp,
.month-cell.is-other .mc-worker-name,
.month-cell.is-other .mc-worker-time,
.month-cell.is-other .mc-off-name,
.month-cell.is-other .mc-offs-label,
.month-cell.is-other .month-cell-note,
.month-cell.is-other .month-cell-holiday-name,
.month-cell.is-other .month-cell-holiday-info,
.month-cell.is-other .month-cell-holiday-detail {
  color: #B9B3A0 !important;
  font-weight: 400 !important;
}

/* 오늘 셀: 노랑 배경 + 파란 테두리 */
.month-cell.is-today {
  background: #FFF9D5;
  box-shadow: inset 0 0 0 2px #3B7DD8;
  z-index: 1;
}
.month-cell.is-today:hover { background: #FFF6BD; }

/* 공휴일 셀: 빨강 배경 */
.month-cell.is-holiday {
  background: #FCEEEC;
}
.month-cell.is-holiday:hover {
  background: #FAE0DC;
}
.month-cell.is-holiday.is-today {
  background: #FFEFC1;
  box-shadow: inset 0 0 0 2px #3B7DD8;
}
.month-cell-holiday-name {
  font-size: 12px;
  color: #C5413E;
  font-weight: 600;
  margin-top: 2px;
  margin-bottom: 4px;
  line-height: 1.25;
}
.month-cell-holiday-info {
  margin-top: 4px;
  font-size: 11px;
  color: #7A2825;
}
.month-cell-holiday-info .mc-mode {
  font-weight: 500;
}
.month-cell-holiday-info .mc-warn-text {
  margin-top: 2px;
  color: #9A6B00;
  font-size: 10.5px;
}

/* 병원 영업시간 (한 줄에 1개 병원) */
.month-cell-hospitals {
  margin-top: 2px;
  margin-bottom: 4px;
}
.month-cell-hospitals .mc-hosp {
  font-size: 10.5px;
  color: #5A4F38;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 약국 근무자 (팀별 인원 한 줄) */
.month-cell-staff {
  margin-top: 4px;
  font-size: 11px;
  color: #3A3528;
  font-weight: 500;
}
.month-cell-staff .mc-tc {
  white-space: nowrap;
}

/* 메모·특이사항 */
.month-cell-note {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 0.5px dashed #D9D3BD;
  font-size: 10.5px;
  color: #8A6300;
  display: flex;
  gap: 3px;
  align-items: flex-start;
  line-height: 1.3;
}
.month-cell-note .mc-note-icon { flex-shrink: 0; }
.month-cell-note .mc-note-text {
  word-break: break-word;
}

/* 하단 범례 */
.monthly-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 12px;
  color: #555;
  background: #fff;
  border: 0.5px solid #E4DFCF;
  border-radius: 6px;
  flex-wrap: wrap;
}
.leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.leg-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 0.5px solid rgba(0,0,0,0.1);
}
.leg-dot.leg-holiday { background: #FCEEEC; border-color: #E5C2BE; }
.leg-dot.leg-today   { background: #FFF9D5; border-color: #3B7DD8; }
.leg-icon { font-size: 12px; }
.leg-spacer { flex: 1; }
.leg-help { color: #888; font-size: 11.5px; }

/* ==================================================
 * Phase 4 v3 - 주별 화면 공휴일 셀 잠금 + 선택 강조
 * ================================================== */

/* 월별에서 점프 시 그 날짜 강조 (오늘 아닌 경우만) */
.day-block.day-block-highlighted {
  box-shadow: 0 0 0 2px #3B7DD8;
  border-radius: 4px;
}

/* 공휴일 잠금 셀 */
.day-block.day-block-holiday {
  background: #FCEEEC;
  position: relative;
}
.day-block.day-block-holiday .day-block-header {
  background: #FBDDD8 !important;
}
.day-block-holiday-banner {
  padding: 8px 16px;
  background: #FBDDD8;
  border-bottom: 1px solid #E5C2BE;
  font-size: 13px;
  color: #7A2825;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.day-block-holiday-banner .hb-name {
  font-weight: 700;
}
.day-block-holiday-banner .hb-note {
  color: #5A4F38;
  font-size: 12px;
}
.day-block-holiday-banner .hb-link {
  margin-left: auto;
  color: #26215C;
  font-size: 12px;
  text-decoration: none;
  padding: 3px 8px;
  background: #fff;
  border: 0.5px solid #C5413E;
  border-radius: 4px;
  white-space: nowrap;
}
.day-block-holiday-banner .hb-link:hover {
  background: #FFE9E5;
}

/* 공휴일 셀에서는 편집 인터랙션만 비활성화 (시각적으로는 평일과 동일하게 그리드 표시)
 * pointer-events 로 클릭 차단 + cursor 기본
 * A-3 인라인: 직원 출근/포지션은 그대로 표시 */
.day-block.day-block-holiday .editable-shift,
.day-block.day-block-holiday .timeline-click-area,
.day-block.day-block-holiday .btn-mini-add-closing,
.day-block.day-block-holiday [data-action="open-shift-modal"],
.day-block.day-block-holiday [data-action="add-position"],
.day-block.day-block-holiday [data-action="add-closing"],
.day-block.day-block-holiday [data-action="edit-day-note"] {
  pointer-events: none;
  cursor: default !important;
}
.day-block.day-block-holiday .editable-shift::after {
  display: none !important;
}
/* fix-HO 응급-7 정통 (2026-05-24):
   공휴일 메모 정책 — 입력은 운영상세 페이지에서만, 월별/주별/일별에는 표시만.
   - 메모 텍스트(.day-note-text) 는 그대로 보임 (표시 OK)
   - "📌 메모 추가하기" 안내(.day-note-empty) 는 숨김 (편집 불가니까)
   - 편집 가능 호버 효과(.day-block-note-editable) 제거 (cursor pointer 안 됨) */
.day-block.day-block-holiday .day-block-note-editable {
  cursor: default !important;
  background: transparent !important;
}
.day-block.day-block-holiday .day-block-note-editable:hover {
  background: transparent !important;
}
.day-block.day-block-holiday .day-block-note-editable .day-note-empty {
  display: none;
}
/* 포지션 막대/마감 chip 클릭 → 정보 팝업은 가능 (관리자 모드에서도 조회 모드처럼 동작) */
.day-block.day-block-holiday .pos-bar,
.day-block.day-block-holiday .closing-chip {
  cursor: pointer;
}

/* ==================================================
 * Phase 4 v3 - 월별 인쇄 (용지/방향은 브라우저 미리보기에서 선택)
 * 2026-05-24: monthly-toolbar 는 인쇄 머리말 통일 룰(맨 아래)에서 전체 숨김.
 *   여기서는 monthly-filters / monthly-grid 만 관여.
 * ================================================== */
@media print {
  .monthly-filters,
  .monthly-legend {
    display: none !important;
  }
  .monthly-page {
    background: #fff;
    padding: 0 4mm;
  }
  /* 셀 크기 강제 안 함 — 브라우저 배율로 사용자가 조절 */
  .monthly-grid { page-break-inside: avoid; }
}

/* ============================================================
   Phase 4 v4: 월별/주별 화면 — 공휴일 강화 + 경고 배지
   ============================================================ */

/* 공휴일 셀의 영업 모드 컬러 강조 */
.month-cell-holiday-info .mc-mode-open    { color: #2A6A28; }
.month-cell-holiday-info .mc-mode-short   { color: #8A6300; }
.month-cell-holiday-info .mc-mode-closed  { color: #C5413E; }

/* 2026-06-28 (2-B Fix5): 주별 공휴일 배너 약국 운영시간 (월별 mc-mode 와 동일 팔레트) */
.day-block-holiday-banner .hb-mode        { font-weight: 600; margin-left: 4px; }
.day-block-holiday-banner .hb-mode-open   { color: #2A6A28; }
.day-block-holiday-banner .hb-mode-short  { color: #8A6300; }
.day-block-holiday-banner .hb-mode-closed { color: #C5413E; }

/* 공휴일 셀의 영업 병원에 "단축" 태그 */
.mc-hosp .mc-hosp-tag-short {
  display: inline-block; background: #FFE9B8; color: #8A6300;
  font-size: 9.5px; padding: 0 4px; border-radius: 2px;
  vertical-align: 1px;
}

/* 공휴일 셀의 당직 라벨 ("당직 약사1·접수1") */
.month-cell-staff .mc-staff-label {
  display: inline-block; background: #EAE3CB; color: #5A4F38;
  font-size: 10px; padding: 0 4px; border-radius: 2px;
  margin-right: 2px; vertical-align: 1px;
}

/* 미설정 공휴일 경고 배지 (월별/주별 상단) */
.monthly-unconfigured-warn,
.weekly-unconfigured-warn {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #FFF1D6;
  border: 1px solid #E8C766;
  border-radius: 6px;
  font-size: 13px;
  color: #5A4F38;
  line-height: 1.5;
}
.monthly-unconfigured-warn .unconfig-link,
.weekly-unconfigured-warn .unconfig-link {
  color: #8A6300; text-decoration: underline; font-weight: 600;
}
.monthly-unconfigured-warn .unconfig-link:hover,
.weekly-unconfigured-warn .unconfig-link:hover {
  color: #5A4400;
}
.monthly-unconfigured-warn .unconfig-help,
.weekly-unconfigured-warn .unconfig-help {
  margin-left: 8px; color: #8A7E52; font-size: 12px;
}

/* ============================================================
   Phase 4 v4.1: 월별 셀 — 토글 펼침 상세 스타일
   ============================================================ */

/* (2-a) 카운트 줄 — 항상 표시. 굵게, 약간 강조 */
.month-cell-staff-count {
  margin-top: 4px;
  font-size: 11px;
  color: #3A3528;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.month-cell-staff-count .mc-tc { white-space: nowrap; }

/* (2-b) 근무자 상세 — 토글 ON 시만 (data-filter="staff") */
.month-cell-staff-detail {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 0.5px dashed #D9D3BD;
  font-size: 10.5px;
  color: #3A3528;
  line-height: 1.4;
}
.mc-team-block { margin-bottom: 4px; }
.mc-team-block:last-child { margin-bottom: 0; }
.mc-team-name {
  font-weight: 700; color: #5A4F38;
  font-size: 10px;
  background: #EAE3CB; padding: 1px 5px; border-radius: 3px;
  display: inline-block; margin-bottom: 2px;
}
.mc-worker {
  padding-left: 4px; display: flex; gap: 4px; justify-content: space-between;
}
.mc-worker-name { color: #1A1810; font-weight: 500; }
.mc-worker-time { color: #6D6450; font-variant-numeric: tabular-nums; }
.mc-offs {
  padding-left: 4px; color: #999; font-size: 10px;
  margin-top: 1px;
}
.mc-offs-label { color: #B8AE85; }
/* v5 hotfix2: 본인이 휴무 라인에 있으면 "휴무:" 라벨도 빨강 톤으로 (한눈에 휴무 인지) */
.mc-offs:has(.mc-off-name[data-emp-id-match]) .mc-offs-label {
  color: #B02020; font-weight: 700;
}

/* (3) 공휴일 상세 — 토글 ON 시 (data-filter="holiday") */
.month-cell-holiday-detail {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 0.5px dashed #E8C5B5;
  font-size: 10.5px;
  line-height: 1.4;
}
.mc-holiday-pharm { margin-bottom: 5px; }
.mc-holiday-pharm .mc-mode { font-size: 11px; font-weight: 600; }

/* 공휴일 — 모든 병원 (영업=파랑/단축=노랑/휴진=회색) */
.mc-holiday-hosps { margin: 4px 0; }
.mc-hh-row {
  display: flex; justify-content: space-between; gap: 4px;
  font-size: 10.5px; padding: 1px 0;
}
.mc-hh-name { font-weight: 500; }
.mc-hh-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-hh-tag {
  display: inline-block; background: #FFE9B8; color: #8A6300;
  font-size: 9.5px; padding: 0 4px; border-radius: 2px;
  vertical-align: 1px; margin-left: 2px;
}
.mc-hh-open .mc-hh-name,
.mc-hh-open .mc-hh-time      { color: #1A5BA8; }
.mc-hh-shortened .mc-hh-name,
.mc-hh-shortened .mc-hh-time { color: #1A5BA8; }
.mc-hh-closed .mc-hh-name,
.mc-hh-closed .mc-hh-time    { color: #AAA; }
.mc-hh-undecided .mc-hh-name,
.mc-hh-undecided .mc-hh-time { color: #999; font-style: italic; }

/* 공휴일 — 당직자 목록 */
.mc-holiday-duties {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 0.5px dashed #E8C5B5;
}
.mc-duties-label {
  font-size: 10px; font-weight: 700; color: #7A2825;
  margin-bottom: 2px;
}
.mc-duty-team { margin-bottom: 3px; }
.mc-duty-teamname {
  font-weight: 700; color: #5A4F38;
  font-size: 10px;
  background: #EAE3CB; padding: 1px 5px; border-radius: 3px;
  display: inline-block; margin-bottom: 2px;
}
.mc-duty-member {
  padding-left: 4px; display: flex; gap: 4px; justify-content: space-between;
  font-size: 10.5px;
}
.mc-duty-name { color: #1A1810; font-weight: 500; }
.mc-duty-time { color: #6D6450; font-variant-numeric: tabular-nums; }

/* 2026-05-20 hotfix: 미지정 당직 슬롯 (회의 토론용) ----------------- */
.mc-holiday-unassigned {
  margin-top: 6px;
  padding: 4px 6px;
  border: 1px dashed #D89B5B;
  background: #FFF6E5;
  border-radius: 4px;
}
.mc-unassigned-label {
  font-size: 10px; font-weight: 700; color: #8A4A12;
  margin-bottom: 3px;
}
.mc-unassigned-slot {
  display: flex; gap: 4px; align-items: baseline;
  font-size: 10.5px;
  padding-left: 2px;
  line-height: 1.45;
}
.mc-unassigned-team {
  font-weight: 700; color: #5A4F38;
  font-size: 9.5px;
  background: #F0DEB5; padding: 0 4px; border-radius: 3px;
  flex-shrink: 0;
}
.mc-unassigned-pos {
  color: #4A3818; font-weight: 500;
  flex-shrink: 0;
}
.mc-unassigned-time {
  color: #6D5028; font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ============================================================
   Phase 4 v4.2: 직원 필터 (월별/주별)
   ============================================================ */

/* 필터 폼 UI */
.emp-filter-form {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 12px;
  position: relative;  /* 드롭다운의 절대 위치 기준 */
  flex-wrap: wrap;
}
.emp-filter-label {
  font-size: 12px; color: #5A4F38; font-weight: 500;
  margin-right: 2px;
}
.emp-filter-select {
  padding: 4px 8px; border: 1px solid #D1CCB5; border-radius: 4px;
  font-size: 12px; background: #fff; cursor: pointer;
}
.emp-filter-select:disabled { background: #F4F0E2; color: #999; cursor: not-allowed; }
.emp-mode-select { min-width: 90px; }
.emp-filter-clear {
  background: #fff; border: 1px solid #D9C2C2; color: #B84444;
  text-decoration: none; padding: 3px 8px; border-radius: 4px;
  font-size: 11px; line-height: 1;
}
.emp-filter-clear:hover { background: #F8E8E8; }

/* Phase 5: chip UI */
.emp-chip-box {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 3px 6px; min-height: 26px;
  border: 1px solid #D1CCB5; border-radius: 4px;
  background: #fff;
  min-width: 160px; max-width: 460px;
  box-sizing: border-box;
}
.emp-chip-placeholder {
  font-size: 12px; color: #999; padding: 0 4px;
}
.emp-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: #E8F0E0; color: #2C4A12;
  border-radius: 11px;
  font-size: 11px; line-height: 1;
  padding: 3px 3px 3px 8px;
  white-space: nowrap;
}
.emp-chip-name { font-weight: 500; }
.emp-chip-x {
  background: transparent; border: 0; cursor: pointer;
  color: #5A6D44;
  font-size: 11px; line-height: 1;
  padding: 2px 5px; border-radius: 50%;
}
.emp-chip-x:hover { background: rgba(0,0,0,0.08); color: #2C4A12; }
.emp-chip-add {
  background: transparent; border: 1px dashed #C5BFA5;
  color: #5A4F38; cursor: pointer;
  font-size: 11px; line-height: 1;
  padding: 4px 8px; border-radius: 11px;
  white-space: nowrap;
}
.emp-chip-add:hover { background: #FFF9D5; border-color: #B8A85F; }

/* 직원 선택 드롭다운 */
.emp-picker-dropdown {
  position: absolute; top: 100%; left: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #C5BFA5; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  padding: 8px;
  min-width: 280px; max-width: 360px;
  max-height: 380px; overflow-y: auto;
  z-index: 50;
}
.emp-picker-shortcuts {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid #E8E4D2;
}
.emp-picker-shortcut {
  background: #F4F0E2; border: 1px solid #D1CCB5;
  color: #5A4F38;
  font-size: 11px; padding: 3px 8px; border-radius: 10px;
  cursor: pointer; white-space: nowrap;
}
.emp-picker-shortcut:hover { background: #FFF9D5; border-color: #B8A85F; }
.emp-picker-shortcut-clear {
  background: #fff; border-color: #D9C2C2; color: #B84444;
}
.emp-picker-shortcut-clear:hover { background: #F8E8E8; border-color: #B84444; }

.emp-picker-list {
  display: flex; flex-direction: column; gap: 6px;
}
.emp-picker-group { }
.emp-picker-group-label {
  font-size: 10px; font-weight: 700; color: #888070;
  letter-spacing: 0.5px;
  padding: 4px 4px 2px;
  text-transform: uppercase;
}
.emp-picker-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 4px;
  cursor: pointer;
  font-size: 12px; color: #2C2C2A;
}
.emp-picker-item:hover { background: #F4F0E2; }
.emp-picker-item input[type="checkbox"] {
  margin: 0; cursor: pointer;
}
.emp-picker-item-name { user-select: none; }

/* 모바일 (≤ 640px) — 폼이 세로로 쌓이고 칩 박스가 폭 100% */
@media (max-width: 640px) {
  .emp-filter-form {
    display: flex; flex-direction: column; align-items: stretch;
    margin-left: 0; width: 100%;
    gap: 6px;
  }
  .emp-filter-label { margin-bottom: -2px; }
  .emp-chip-box {
    width: 100%; max-width: none; min-width: 0;
  }
  .emp-picker-dropdown {
    left: 0; right: 0; max-width: none;
    /* 드롭다운이 form 의 절대 위치 자식인데, form 이 column 이라 top:100% 가 맨 마지막 select 아래로 가버림.
       그래서 chip-box 바로 아래 뜨도록 명시적으로 위치 보정. JS 없이 그냥 form 안에서 자연 위치 (display:block) 사용. */
    position: static; margin-top: 4px;
    box-shadow: none; border-color: #B8A85F;
  }
  .emp-mode-select { width: 100%; }
  .emp-filter-clear {
    align-self: flex-start;
  }
}

.filter-sep {
  color: #999; padding: 0 4px;
}

/* ===== 월별 — 필터 동작 ===== */

/* 'only' 모드: 본인 외 행 모두 숨김 */
.monthly-page[data-emp-filter-mode="only"] .mc-worker:not([data-emp-id-match]) { display: none; }
.monthly-page[data-emp-filter-mode="only"] .mc-off-name:not([data-emp-id-match]) { display: none; }
.monthly-page[data-emp-filter-mode="only"] .mc-duty-member:not([data-emp-id-match]) { display: none; }
/* 휴무자 라인 (mc-offs) — only 모드에서 본인이 휴무자가 아니면 라벨까지 숨겨야 깔끔 */
.monthly-page[data-emp-filter-mode="only"] .mc-offs:not(:has(.mc-off-name[data-emp-id-match])) { display: none; }
/* 팀 블록 자체도 본인이 없는 팀은 숨김 (only 모드) */
.monthly-page[data-emp-filter-mode="only"] .mc-team-block:not(:has([data-emp-id-match])) { display: none; }
/* 공휴일 당직팀 블록도 동일 */
.monthly-page[data-emp-filter-mode="only"] .mc-duty-team:not(:has([data-emp-id-match])) { display: none; }

/* 'highlight' 모드: 본인 외 흐리게 */
.monthly-page[data-emp-filter-mode="highlight"] .mc-worker:not([data-emp-id-match]) { opacity: 0.32; }
.monthly-page[data-emp-filter-mode="highlight"] .mc-off-name:not([data-emp-id-match]) { opacity: 0.32; }
.monthly-page[data-emp-filter-mode="highlight"] .mc-duty-member:not([data-emp-id-match]) { opacity: 0.32; }

/* 본인 행 강조 (only + highlight 둘 다) — v5 hotfix: 연파랑 + 강한 테두리로 더 또렷하게 */
.mc-worker[data-emp-id-match],
.mc-duty-member[data-emp-id-match] {
  background: #D9E8FB;
  padding: 1px 4px; border-radius: 3px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #3B7DD8;
  color: #0F2F5C;
}
.mc-worker[data-emp-id-match] .mc-worker-name,
.mc-worker[data-emp-id-match] .mc-worker-time {
  color: #0F2F5C;
}
/* 휴무자 본인 — v5 hotfix3: 빨강 배경/테두리 + 검정 글자 */
.mc-off-name[data-emp-id-match] {
  background: #FCE5E5;
  padding: 0 4px; border-radius: 3px;
  font-weight: 700;
  color: #000;
  box-shadow: inset 0 0 0 1px #D94545;
}

/* ===== 주별 — 필터 동작 ===== */
/* tr.routine-row 는 이미 data-emp-id 갖고 있음 */

/* 'only' 모드: 본인 외 행 숨김 */
.weekly-page[data-emp-filter-mode="only"] .routine-row:not([data-emp-id-match]) {
  display: none;
}

/* 'highlight' 모드: 본인 외 흐리게 */
.weekly-page[data-emp-filter-mode="highlight"] .routine-row:not([data-emp-id-match]) {
  opacity: 0.32;
}

/* 본인 행 강조 (only + highlight 둘 다) — v5 hotfix: 연파랑으로 통일 */
.weekly-page .routine-row[data-emp-id-match] {
  background: #D9E8FB !important;
  box-shadow: inset 0 0 0 1px #3B7DD8;
}
.weekly-page .routine-row[data-emp-id-match] .col-name,
.weekly-page .routine-row[data-emp-id-match] .col-shift {
  font-weight: 700;
  color: #0F2F5C;
}

/* 필터 활성 표시 (페이지 배경에 살짝 파란 줄) — v5 hotfix: 연파랑 톤 통일
   2026-05-24 hotfix: 직원 필터가 monthly-toolbar 로 이동했으므로 강조 대상도 변경 */
.monthly-page[data-emp-filter-ids]:not([data-emp-filter-ids=""]) .monthly-toolbar,
.weekly-page[data-emp-filter-ids]:not([data-emp-filter-ids=""]) .weekly-toolbar {
  /* 2026-06-28: 끝을 transparent → 불투명 #F4F4F6 로 (투명이라 본문이 비쳐 보이던 문제 해결) */
  background: linear-gradient(to right, #E8F1FC, #F4F4F6 60%);
  border-radius: 6px;
}

/* ============================================================
   Phase 4 v4.3: 계약과 다른 출퇴근 표시 (ⓘ)
   ============================================================ */

/* 셀 헤더에 ❗ (그 날 한 명이라도 계약 다름) — fix-HO 응급-3 */
.month-cell-deviation {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: #FCEEEC; color: #C73E2C;
  border: 1px solid #E5A8A0; border-radius: 50%;
  font-size: 12px; font-weight: 900;
  margin-left: 4px;
  cursor: help;
  font-style: normal;
  line-height: 1;
}

/* 직원별 ❗ (근무자 상세 토글 ON 시) — fix-HO 응급-3 */
.mc-dev-icon {
  display: inline-block;
  color: #C73E2C;
  font-size: 12px; font-weight: 900;
  margin-right: 2px;
  cursor: help;
  font-style: normal;
  line-height: 1;
}

/* 계약 다른 직원 행 — 살짝 강조 */
.mc-worker.is-deviated .mc-worker-name {
  color: #5A4400;
}
.mc-off-name.is-deviated {
  color: #8A6300;
}

/* ============================================================
   Phase 4 v4.4: 직원 필터 'only' 모드 — 컬럼 시프트 방지
   ============================================================ */

/* 실제 처리는 emp-filter.js 에서 동적으로 rowspan/virtual cell 조정 */

/* ============================================================
   v6 Step 1: 계약 deviation ⓘ 툴팁
   - 월별 / 주별 공용
   - hover 자동 표시 + 클릭 고정
   - 모바일은 탭으로 토글
   ============================================================ */

.dev-tooltip-icon {
  display: inline-block;
  color: #791F1F;
  font-size: 11px;
  font-weight: 700;
  margin-right: 3px;
  cursor: pointer;
  font-style: normal;
  user-select: none;
  vertical-align: baseline;
  transition: color 0.12s ease;
}
.dev-tooltip-icon:hover {
  color: #A32D2D;
}
.dev-tooltip-icon.is-active {
  color: #A32D2D;
}

/* 툴팁 박스 — body 에 동적으로 붙음 (position: absolute, JS 가 좌표 계산) */
.dev-tooltip-box {
  position: absolute;
  z-index: 9999;
  background: #FFFFFF;
  border: 0.5px solid #F09595;
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 200px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  pointer-events: none;        /* 기본은 hover 모드 — 마우스 통과 */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.dev-tooltip-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.dev-tooltip-box.is-pinned {
  pointer-events: auto;        /* 클릭 고정 시에만 상호작용 */
}

.dev-tooltip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #791F1F;
  font-weight: 500;
  margin-bottom: 8px;
}
.dev-tooltip-title::before {
  content: "ⓘ";
  font-size: 13px;
}

.dev-tooltip-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}
.dev-tooltip-grid .dev-label {
  color: #5F5E5A;
}
.dev-tooltip-grid .dev-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.dev-tooltip-grid .dev-value.is-actual {
  color: #791F1F;
  font-weight: 500;
}

/* 핀 닫기 버튼 (클릭 고정 모드에서만) */
.dev-tooltip-close {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 14px;
  line-height: 1;
  color: #888780;
  cursor: pointer;
  user-select: none;
  display: none;
  background: none;
  border: none;
  padding: 2px 4px;
}
.dev-tooltip-box.is-pinned .dev-tooltip-close {
  display: block;
}

/* 인쇄 시 ⓘ 와 툴팁 박스 모두 숨김 (인쇄물에는 의미 없는 시각화) */
@media print {
  .dev-tooltip-icon,
  .dev-tooltip-box {
    display: none !important;
  }
}

/* ============================================================
   v6.2: 검증 결과 사이드바 (flex 레이아웃)
   - 본체와 사이드바를 .weekly-body 안에 나란히 배치 (붙어있게)
   - 접힘/펼침 (claude 좌측 사이드바와 동일 패턴, 우측 버전)
   - 인쇄/일별 보기 시 사이드바 자동 숨김
   ============================================================ */

.weekly-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.weekly-body.has-validation-sidebar {
  flex-direction: row;
  align-items: flex-start;
}

.weekly-day-list {
  flex: 1;
  min-width: 0;  /* flex item 의 min-width 기본값(auto) 이 자식 컨텐츠 크기로 늘어나는 것 방지 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.validation-sidebar {
  flex-shrink: 0;
  width: 260px;
  background: #FFFFFF;
  border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,0.15));
  border-radius: 8px;
  position: sticky;
  top: 96px;             /* top-nav 56px + 약간의 gap (40px) */
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.18s ease, background 0.18s ease;
}
.validation-sidebar[data-collapsed="1"] {
  width: 40px;
  background: #FCEBEB;
  border-color: #F09595;
  cursor: pointer;
}

/* 펼침 모드 영역 */
.vs-expanded {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.validation-sidebar[data-collapsed="1"] .vs-expanded { display: none; }

.vs-header {
  padding: 10px 12px;
  border-bottom: 0.5px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  flex-shrink: 0;
}
.vs-title { font-size: 13px; font-weight: 500; color: #2C2C2A; }
.vs-title-ok { color: #1D9E75; }
.vs-count { color: #791F1F; font-weight: 700; }
.vs-collapse-btn {
  background: transparent;
  border: 0.5px solid #D3D1C7;
  border-radius: 6px;
  width: 26px; height: 26px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #5F5E5A;
  padding: 0;
  font-weight: 700;
}
.vs-collapse-btn:hover { background: #F1EFE8; }

.vs-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
}

.vs-empty {
  font-size: 12px;
  color: #888780;
  text-align: center;
  margin: 16px 0;
}

.vs-day-group { margin-bottom: 12px; }
.vs-day-header {
  font-size: 11px;
  color: #5F5E5A;
  font-weight: 500;
  padding: 4px 6px;
  margin-bottom: 4px;
  border-bottom: 0.5px dashed #D3D1C7;
}

.vs-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  line-height: 1.4;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
  outline: none;
}
.vs-item:hover, .vs-item:focus { background: rgba(0, 0, 0, 0.04); }
.vs-item.vs-sev-critical { background: #FCEBEB; border-left-color: #E24B4A; color: #501313; }
.vs-item.vs-sev-system   { background: #FAEEDA; border-left-color: #EF9F27; color: #412402; }
.vs-item.vs-sev-custom   { background: #FAEDCD; border-left-color: #FAC775; color: #633806; }

.vs-sev-dot { display: none; }
.vs-msg { flex: 1; }

/* 셀 하이라이트 (클릭 시 점프된 영역 잠깐 강조) */
.day-block.vs-flash {
  animation: vsFlash 1.4s ease;
}
@keyframes vsFlash {
  0%   { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0.4); }
  30%  { box-shadow: 0 0 0 6px rgba(226, 75, 74, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0); }
}

/* 접힘 모드 바 (좁은 띠) */
.vs-collapsed-bar {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 4px;
  gap: 8px;
}
.validation-sidebar[data-collapsed="1"] .vs-collapsed-bar { display: flex; }
.vs-collapsed-arrow {
  font-size: 16px;
  color: #791F1F;
  font-weight: 700;
}
.vs-collapsed-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 500;
  color: #791F1F;
  white-space: nowrap;
}

/* 모바일 — 사이드바를 본체 아래로 (세로 쌓기) */
@media (max-width: 900px) {
  .weekly-body.has-validation-sidebar {
    flex-direction: column;
  }
  .validation-sidebar {
    width: 100%;
    position: static;
    max-height: 320px;
  }
  .validation-sidebar[data-collapsed="1"] {
    width: 100%;
    max-height: 44px;
  }
  .vs-collapsed-bar {
    flex-direction: row;
    padding: 8px 12px;
  }
  .vs-collapsed-label {
    writing-mode: initial;
  }
  .vs-collapsed-arrow {
    transform: rotate(-90deg);
  }
}

/* ============================================================
   v6 Step 5: /validation 페이지 (읽기 전용 룰 목록)
   ============================================================ */
.validation-page { max-width: 920px; margin: 0 auto; padding: 0 16px 40px; }
.validation-header { margin: 16px 0 24px; }
.validation-header h1 { margin: 0 0 6px; font-size: 22px; font-weight: 500; }
.validation-info { margin-bottom: 20px; }
.validation-section { margin-bottom: 32px; }
.validation-section h2 {
  font-size: 16px; font-weight: 500; margin: 0 0 12px;
  padding-bottom: 6px; border-bottom: 0.5px solid #D3D1C7;
}
.rule-list { display: flex; flex-direction: column; gap: 8px; }
.rule-card {
  border: 0.5px solid #D3D1C7;
  border-radius: 8px;
  padding: 12px 16px;
  background: #FFFFFF;
  position: relative;
  border-left-width: 3px;
}
.rule-card.is-inactive { opacity: 0.55; }
.rule-card.rule-sev-critical { border-left-color: #E24B4A; background: #FFFAFA; }
.rule-card.rule-sev-system   { border-left-color: #EF9F27; background: #FFFCF6; }
.rule-card.rule-sev-custom   { border-left-color: #FAC775; background: #FFFCF6; }
.rule-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.rule-card-head h3 {
  margin: 0; font-size: 14px; font-weight: 500;
  flex: 1;
}
.rule-sev-dot { display: none; }
.rule-tag {
  font-size: 10px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: #F1EFE8; color: #5F5E5A;
}
.rule-tag-active { background: #EAF3DE; color: #27500A; }
.rule-tag-inactive { background: #FCEBEB; color: #791F1F; }
.rule-tag-system { background: #E6F1FB; color: #0C447C; }
.rule-desc {
  margin: 4px 0 8px;
  font-size: 13px; color: #2C2C2A; line-height: 1.5;
}
.rule-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: #5F5E5A;
  padding-top: 6px; border-top: 0.5px dashed #D3D1C7;
}
.rule-meta-msg { font-style: italic; }

/* v6.1: PIN 현재 정보 박스 */
.pin-current-info {
  background: #F1EFE8;
  border: 0.5px solid #D3D1C7;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pin-current-info code {
  background: #FFFFFF;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ============================================================
   v6.3: DB 백업 페이지
   ============================================================ */
.backup-section {
  margin: 24px 0;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 0.5px solid #D3D1C7;
  border-radius: 8px;
}
.backup-section h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 6px;
  border-bottom: 0.5px solid #E5E5E5;
}
.backup-info {
  background: #F1EFE8;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.backup-info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}
.backup-label { color: #5F5E5A; }
.backup-value { font-weight: 500; font-family: ui-monospace, SFMono-Regular, monospace; }
.backup-actions { margin: 16px 0; }
.backup-download-btn {
  font-size: 14px;
  padding: 10px 20px;
  display: inline-block;
}
.backup-hint {
  background: #E6F1FB;
  border-left: 3px solid #378ADD;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #0C447C;
  margin-top: 12px;
}
.backup-list { width: 100%; font-size: 12.5px; margin-top: 10px; }
.backup-list code { font-size: 11.5px; }
.backup-restore-steps {
  font-size: 13px;
  line-height: 1.8;
  color: #2C2C2A;
  padding-left: 20px;
}
.backup-restore-steps code {
  background: #F1EFE8;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* ============================================
   v7 플랜 (시뮬레이션) 시스템
   ============================================ */

.plan-hub {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.plan-header {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: center;
}

.plan-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.plan-title {
  margin: 0;
  font-size: 22px;
}
.plan-subtitle {
  color: var(--color-text-muted);
  font-size: 13px;
}

.plan-month-bar {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}
.plan-month-select {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-month-select label {
  font-size: 13px;
  color: var(--color-text-muted);
}
.plan-month-select select {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: white;
  cursor: pointer;
}

.plan-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.plan-count {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 4px 10px;
  background: #f0f3f7;
  border-radius: 12px;
}
.plan-count-full {
  color: var(--color-warning);
  background: #fff4e6;
  font-weight: 600;
}
.plan-limit-hint {
  font-size: 12.5px;
  color: var(--color-warning);
  font-style: italic;
}
.plan-readonly-badge {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ----- 섹션 ----- */
.plan-section {
  margin-bottom: 28px;
}
.plan-section-title {
  font-size: 16px;
  margin: 0 0 14px;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.plan-section-empty-hint {
  font-size: 13px;
  color: var(--color-text-light);
  font-weight: normal;
}

/* ----- 빈 상태 ----- */
.plan-empty-state {
  background: white;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 48px 20px;
  text-align: center;
}
.plan-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.plan-empty-text {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* ----- 카드 그리드 ----- */
.plan-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.plan-card-grid-archive {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 12px;
}

/* ----- 카드 (공통) ----- */
.plan-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
}

.plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.plan-card-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  word-break: break-all;
}
.plan-card-status {
  font-size: 11.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 2px 8px;
  background: #f0f3f7;
  border-radius: 10px;
}

.plan-card-meta {
  font-size: 12.5px;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-card-source {
  color: var(--color-primary);
  font-size: 11.5px;
}
.plan-card-stats {
  display: flex;
  gap: 16px;
  padding: 6px 0;
}
.plan-card-stats .muted { color: var(--color-text-light); }
.plan-card-updated {
  font-size: 11px;
  color: var(--color-text-light);
}

.plan-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f5f5f5;
}
.plan-card-actions .btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 12.5px;
}

/* ----- draft 카드 ----- */
.plan-card-draft {
  border-color: #e0e0e0;
}

/* ----- in-use 카드 (강조) ----- */
.plan-card-in-use {
  border: 2px solid var(--color-success);
  background: linear-gradient(180deg, #f4fcf8 0%, white 30%);
  box-shadow: 0 2px 12px rgba(76, 175, 130, 0.15);
}
.plan-card-in-use .plan-card-name {
  font-size: 16.5px;
}
.plan-card-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--color-success);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(76, 175, 130, 0.4);
}

/* ----- archived 카드 (회색) ----- */
.plan-card-archived {
  background: #fafafa;
  border-color: #d8d8d8;
  opacity: 0.85;
}
.plan-card-archived .plan-card-name {
  font-size: 14px;
  color: #666;
}
.plan-card-delete-warning {
  color: var(--color-warning);
  font-weight: 500;
  font-size: 11.5px;
}
.plan-card-preserved {
  color: var(--color-text-muted);
  font-size: 11.5px;
}

/* ----- archive 펼침 ----- */
.plan-archive {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.plan-archive-toggle {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.plan-archive-toggle::-webkit-details-marker { display: none; }
.plan-archive-toggle::before {
  content: '▶';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s;
  font-size: 10px;
  color: var(--color-text-muted);
}
.plan-archive[open] .plan-archive-toggle::before {
  transform: rotate(90deg);
}

/* ============================================
   생성 모달 (v7 플랜 전용 — v6 .modal-* 와 충돌 방지)
   ============================================ */
.plan-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.plan-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.plan-modal-box {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.plan-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.plan-modal-header h2 {
  margin: 0;
  font-size: 17px;
}
.plan-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
.plan-modal-close:hover {
  background: #f0f0f0;
  color: var(--color-text);
}
.plan-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.plan-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ----- 폼 ----- */
.form-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.form-row-block {
  grid-template-columns: 1fr;
  gap: 8px;
}
.form-row label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.form-row input[type="text"] {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  width: 100%;
}
.form-row input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-value {
  font-size: 14px;
}
.form-hint {
  font-size: 11.5px;
  color: var(--color-text-light);
  font-weight: normal;
}
.form-warning {
  background: #fff7e6;
  border-left: 4px solid var(--color-warning);
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
  color: #6b4d00;
  margin-top: 10px;
  white-space: pre-line;
}

/* ----- 시작점 라디오 옵션 ----- */
.start-point-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.start-point-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.start-point-option:hover:not(.disabled) {
  border-color: var(--color-primary);
  background: #f5f9ff;
}
.start-point-option input[type="radio"] {
  margin-top: 3px;
}
.start-point-option:has(input:checked) {
  border-color: var(--color-primary);
  background: #f0f6ff;
}
.start-point-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #fafafa;
}
.start-point-label {
  flex: 1;
}
.start-point-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.start-point-desc {
  font-size: 12px;
  color: var(--color-text-muted);
}
.start-point-desc select {
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

/* ============================================
   모바일
   ============================================ */
@media (max-width: 768px) {
  .plan-header {
    grid-template-columns: 1fr;
  }
  .plan-month-bar {
    grid-column: 1;
    flex-wrap: wrap;
  }
  .plan-actions {
    justify-content: flex-start;
  }
  .plan-card-grid {
    grid-template-columns: 1fr;
  }
  .plan-modal-box {
    max-height: 95vh;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   v7 Phase 3: 시뮬레이션 배너 + 모드 표시
   ============================================ */
.scenario-banner {
  position: sticky;
  /* 2026-06-25 (Phase A-1): 메뉴바(top-nav 56px) 바로 아래로 내림.
     기존 top:0 / z-index:100 은 메뉴바와 같은 좌표·같은 층이라 충돌 → 메뉴바 가림.
     이제 메뉴바(top:0,z100) > 배너(top:56,z99) > 툴바(top:96,z98) 로 층층이 쌓임. */
  top: 56px;
  z-index: 99;
  background: #fff7d6;
  border-bottom: 2px solid #f0c419;
  padding: 10px 16px;
  font-size: 14px;
}
.scenario-banner.is-readonly {
  background: #ececec;
  border-bottom-color: #999;
}
.scenario-banner-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.scenario-banner-icon { font-size: 18px; }
.scenario-banner-title { font-weight: 500; }
.scenario-banner-title strong { font-weight: 700; }
.scenario-banner-desc { color: #666; font-weight: normal; }
.scenario-banner-month {
  background: #fff;
  border: 1px solid #d4a017;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  color: #8a6d0a;
  font-weight: 500;
}
.scenario-banner-tag {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.scenario-banner-tag.active {
  background: #f0c419;
  color: #4a3800;
}
.scenario-banner-tag.readonly {
  background: #666;
  color: #fff;
}
.scenario-banner-back {
  margin-left: 10px;
  color: #555;
  text-decoration: none;
  font-size: 13px;
}
.scenario-banner-back:hover { color: #000; text-decoration: underline; }

/* 시뮬 모드일 때 페이지에 살짝 노란 톤 (선택) */
.weekly-page.is-scenario,
.monthly-page.is-scenario {
  /* 본문은 그대로 두되, 페이지 최상단 영역만 배너로 구분되도록 함 */
}

/* readonly (archived) 시 클릭 자체는 막지 않음 — 백엔드가 423으로 차단함.
   다만 시각적으로 살짝 흐릿하게: */
.weekly-page.is-readonly,
.monthly-page.is-readonly {
  /* 입력 필드 / 버튼 비활성화는 JS에서 처리 */
}

@media print {
  .scenario-banner { display: none; }
}

/* v7 Phase 3 hotfix: 시뮬 대상월 밖 셀 */
.day-block.day-block-out-of-scope {
  background: #f0f0f0;
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.day-block.day-block-out-of-scope::after {
  content: '🔒 시뮬 범위 밖';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(80, 80, 80, 0.85);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}
.day-block.day-block-out-of-scope * {
  pointer-events: none !important;
}

.month-cell.is-out-of-scope {
  cursor: not-allowed;
  opacity: 0.5;
}

/* v7 Phase 3 Step 3: 카드 통계 표시 색상 */
.plan-card-stats .stat-ok { color: #28a745; }
.plan-card-stats .stat-warn { color: #d9534f; }

/* ============================================
   v7 Phase 3 Step 3: 시뮬 사이드바
   ============================================ */
.scenario-sidebar {
  position: fixed;
  top: 100px;  /* 헤더 + 배너 아래 */
  right: 20px;
  width: 290px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 14px;
  z-index: 50;
  font-size: 13px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.scenario-sidebar-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.scenario-sidebar-title {
  font-weight: 700;
  font-size: 15px;
  color: #333;
}
.scenario-sidebar-desc {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}
.scenario-sidebar-section {
  margin-bottom: 14px;
}
.scenario-sidebar-section:last-child {
  margin-bottom: 0;
}
.scenario-sidebar-subtitle {
  font-weight: 600;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.scenario-stat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}
.scenario-stat-label {
  color: #666;
  font-weight: 500;
}
.scenario-stat-value {
  font-weight: 700;
  font-size: 15px;
}
.scenario-stat-value .stat-ok { color: #28a745; }
.scenario-stat-value .stat-warn { color: #d9534f; }

.scenario-emp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scenario-emp-loading,
.scenario-emp-empty {
  color: #aaa;
  font-size: 12px;
  padding: 6px 0;
}
.scenario-emp-row {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  background: #fafafa;
  border-radius: 4px;
  gap: 2px;
}
.scenario-emp-row .emp-name {
  font-weight: 600;
  color: #333;
  font-size: 12.5px;
}
.scenario-emp-row .emp-times {
  font-size: 11.5px;
  color: #666;
}
.scenario-emp-row .emp-actual { color: #333; font-weight: 600; }
.scenario-emp-row .emp-contract { color: #999; }
.scenario-emp-row .emp-diff { font-weight: 600; margin-left: 4px; }
.scenario-emp-row .emp-diff-pos { color: #d9534f; }
.scenario-emp-row .emp-diff-neg { color: #f0ad4e; }
.scenario-emp-row .emp-diff-zero { color: #28a745; }

.scenario-sidebar-actions {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.scenario-sidebar-actions .btn {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
}
.scenario-sidebar-note {
  background: #f0f0f0;
  border-radius: 4px;
  padding: 8px;
  font-size: 12px;
  text-align: center;
  color: #555;
  margin-top: 8px;
}
.scenario-sidebar-note.readonly-note { background: #ececec; }

/* 시뮬 모드일 때 본문 영역 오른쪽 패딩 추가 (사이드바와 안 겹치게) */
.weekly-page.is-scenario,
.monthly-page.is-scenario {
  padding-right: 320px;
}

/* 좁은 화면에선 사이드바를 하단으로 (1200px 미만) */
@media (max-width: 1200px) {
  .scenario-sidebar {
    position: static;
    width: auto;
    margin: 16px;
    max-height: none;
  }
  .weekly-page.is-scenario,
  .monthly-page.is-scenario {
    padding-right: 0;
  }
}

@media print {
  .scenario-sidebar { display: none; }
  .weekly-page.is-scenario,
  .monthly-page.is-scenario {
    padding-right: 0;
  }
}

/* ============================================
   v7 Phase 3 Step 4: deviation 강조 강화
   - 주별: col-name 셀 노란 배경
   - 월별: mc-worker 행 노란 배경 + 빨간 ❗
   ============================================ */

/* 빨간 ❗ 아이콘 강조 (기존 dev-tooltip-icon 위에 덮어쓰기) */
.dev-tooltip-icon {
  color: #d9534f;
  font-size: 12px;
  font-weight: 700;
}
.dev-tooltip-icon:hover,
.dev-tooltip-icon.is-active {
  color: #c9302c;
}

/* 주별: 이름 셀에 노란 배경 */
.weekly-table td.col-name.is-deviated {
  background: #fff7d6;
}
/* 주별: 그 행의 다른 셀들과의 경계가 도드라지게 */
.weekly-table tr:hover td.col-name.is-deviated {
  background: #fff0b5;
}

/* 월별: 출근자 행 노란 배경 + 글씨 색 강조 */
.mc-worker.is-deviated {
  background: #fff7d6;
  border-radius: 3px;
  padding: 1px 3px;
  margin: 0 -3px;
}
.mc-worker.is-deviated .mc-worker-name {
  color: #5A4400;
  font-weight: 600;
}
.mc-off-name.is-deviated {
  background: #fff7d6;
  color: #5A4400;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 600;
}

/* v7 Phase 3 Step 4 (버그 4): 공휴일 미지정 슬롯 ⚠️ 강조 */
.mc-tc.has-unassigned {
  color: #b8860b;
  font-weight: 600;
}
.mc-tc-warn {
  font-size: 9px;
  margin-left: 1px;
}

/* v7 Phase 3 Step 5: Publish 관련 */
.btn.btn-success {
  background: #28a745;
  color: #fff;
  border: 1px solid #28a745;
}
.btn.btn-success:hover {
  background: #218838;
  border-color: #1e7e34;
}
.btn.btn-success:disabled {
  background: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

.plan-card-applied-tag {
  display: inline-block;
  background: #d4edda;
  color: #155724;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.scenario-sidebar-applied {
  flex: 1;
  background: #d4edda;
  color: #155724;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* v7 Phase 3 Step 5 보강: 변경 이력 배지 + 페이지 */
.last-published-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #555;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 3px 10px;
  margin-left: 10px;
  text-decoration: none;
  vertical-align: middle;
}
.last-published-badge:hover {
  background: #e8e8e8;
  color: #000;
  border-color: #aaa;
}

/* fix-HO 응급-1: 최종 수정 시간 배지 (last-published 와 동일 스타일, 색만 다름) */
.last-updated-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #2a5f8f;
  background: #eaf4fb;
  border: 1px solid #bcd9ed;
  border-radius: 12px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ============================================
   2026-05-24 (인쇄 머리말 통일):
   화면/인쇄 모두 동일한 한 줄 헤더 — "5월 월별대시표 (최종수정 26/05/25 15:00)"
   - 화면: 기존 H1 자리에 통합 텍스트
   - 인쇄: 매 페이지 상단에 머리말 반복 (position: fixed)
   ============================================ */
.page-title-unified {
  /* 화면용 — H1 기본 스타일을 그대로 따르되 줄바꿈 없이 한 줄 */
  margin: 0;
}

@media print {
  /* 인쇄 시 매 페이지 상단 머리말
     - body 의 ::before 가 첫 페이지에 한 번 그려지지만
       position:fixed 로 두면 크롬에서 매 페이지에 반복 그려짐
     - 데이터는 .page-title-unified 의 data-print-header 에서 가져옴
     - JS 로 head 의 변수에 박는 대신, body 에 직접 박는 식으로 단순화
     2026-05-24 hotfix-1 옵션 A 후속:
       - padding 2mm → 1.5mm 로 축소 (머리말 박스 총 높이 ~6mm 로 컴팩트)
       - height 명시 (6mm) — 브라우저가 일관되게 그릴 수 있게
       - 페이지 top margin 은 line 1932 에서 16mm 로 통합 잡혀 있음 */
  body::before {
    content: attr(data-print-header);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 5mm;
    line-height: 5mm;
    text-align: center;
    font-size: 10pt;
    font-weight: 600;
    padding: 0;
    border-bottom: 1px solid #999;
    background: #fff;
    z-index: 9999;
  }
  /* @page margin-top 은 line 1932 의 통합 @page 에서 16mm 로 설정됨.
     여기서 다시 선언하면 cascade 충돌 → 제거. */

  /* 화면에서만 보이는 H1 자체는 인쇄 시 숨김
     (매 페이지 fixed 머리말이 대신 표시) */
  .page-title-unified {
    display: none !important;
  }
}

/* fix-HO 응급-1: 인쇄 시에도 최종 수정 시간 배지가 헤더에 보이도록
   - 월별: monthly-title 은 인쇄에서 보임 (기존 동작 그대로). 배지도 자동으로 보임.
   - 주별: weekly-header 전체가 숨겨지는 게 기본. 인쇄 시 h1 과 배지만 보이게 노출. */
@media print {
  /* 2026-05-24 (인쇄 머리말 통일):
     기존 weekly-header 의 H1 노출 룰은 더 이상 필요 없음
     (page-title-unified 가 인쇄에서 숨겨지고, body::before 머리말이 대신 표시되므로)
     → weekly-header 전체 숨김 (기존 정책 복원)
     2026-05-24 hotfix: monthly-header-row 신설됨 → 인쇄에서 동일하게 숨김 */
  .weekly-page .weekly-header { display: none !important; }
  .monthly-page .monthly-toolbar { display: none !important; }
  .monthly-page .monthly-header-row { display: none !important; }
  .last-updated-badge,
  .last-published-badge {
    /* 화면용 배지는 인쇄에서 안 보임 (머리말이 동일 정보 가짐) */
    display: none !important;
  }
}

/* fix-HO 응급-7: 공휴일 메모 (상단 배치) — 평일과 차별화된 옅은 강조 */
.day-block-note-holiday {
  background: #fff8e1;
  border-left: 3px solid #f0b840;
}

/* fix-HO 응급-7: 월별 공휴일 셀의 상단 메모 (cell 상단) */
.month-cell-note-top {
  margin-bottom: 4px;
}

/* 변경 이력 페이지 */
.publish-history-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}
.ph-header h1 { margin: 0 0 6px; }
.ph-filter { margin: 16px 0; }
.ph-filter select { padding: 5px 10px; font-size: 14px; }
.ph-empty {
  text-align: center;
  color: #999;
  padding: 60px 0;
  font-size: 14px;
}
.ph-list { display: flex; flex-direction: column; gap: 14px; }
.ph-entry {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px 16px;
}
.ph-entry-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 13px;
}
.ph-entry-time {
  font-weight: 600;
  color: #333;
}
.ph-entry-month {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}
.ph-entry-summary {
  color: #666;
  font-size: 12px;
}
.ph-entry-reverted {
  background: #ffe0e0;
  color: #c00;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}
.ph-changes-empty {
  color: #aaa;
  font-size: 12px;
  font-style: italic;
}
.ph-changes-details summary {
  cursor: pointer;
  font-size: 13px;
  color: #1976d2;
  padding: 4px 0;
  user-select: none;
}
.ph-changes-details summary:hover { color: #0d47a1; }
.ph-changes-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 12.5px;
}
.ph-changes-table th,
.ph-changes-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}
.ph-changes-table thead th {
  background: #fafafa;
  font-weight: 600;
  color: #555;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ph-change-row.ph-change-add td.ph-change-before { color: #999; }
.ph-change-row.ph-change-add td.ph-change-after { color: #2e7d32; font-weight: 500; }
.ph-change-row.ph-change-remove td.ph-change-before { color: #c00; text-decoration: line-through; }
.ph-change-row.ph-change-remove td.ph-change-after { color: #999; }
.ph-change-row.ph-change-change td.ph-change-before { color: #666; }
.ph-change-row.ph-change-change td.ph-change-after { color: #333; font-weight: 500; }
.ph-change-date { font-weight: 600; color: #555; white-space: nowrap; }
.ph-change-emp { font-weight: 500; color: #333; }
.ph-change-kind {
  font-size: 11px;
  background: #eee;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  text-align: center;
}

/* ============================================
   Step 4-1: 시점별 계약 — 시점 표 + 알림
   ============================================ */
.contract-points-fieldset {
  background: #fbfbfd;
}
.contract-points-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
}
.contract-points-table thead th {
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
}
.contract-points-table tbody td {
  padding: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.contract-points-table tbody tr:last-child td {
  border-bottom: 0;
}
.contract-points-table tr.is-current {
  background: #eef4ff;
}
.contract-points-table .col-eff   { width: 38%; }
.contract-points-table .col-memo  { width: 32%; color: #555; }
.contract-points-table .col-hours { width: 14%; font-weight: 500; }
.contract-points-table .col-actions {
  width: 16%;
  text-align: right;
  white-space: nowrap;
}
.cp-dot {
  color: #5b8def;
  font-size: 14px;
  margin-right: 2px;
}
.cp-current-label {
  font-size: 11px;
  color: #5b8def;
  margin-left: 4px;
}
.cp-base-label {
  font-size: 11px;
  color: #888;
  background: #eee;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.cp-locked-hint {
  font-size: 11px;
  color: #aaa;
  font-style: italic;
}
.contract-points-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.contract-points-toolbar .form-hint {
  color: #aaa;
}
.current-point-notice {
  background: #eef4ff;
  border-left: 3px solid #5b8def;
  padding: 8px 14px;
  font-size: 13px;
  color: #2756b8;
  margin: 0 0 10px 0;
  border-radius: 4px;
}

/* Step 4-2: 시점 [보기] 버튼 (a 태그 → btn-mini 모양) + 오늘 적용 라벨 */
a.cp-view-btn {
  display: inline-block;
  text-decoration: none;
}
a.cp-view-btn:hover {
  text-decoration: none;
}
.cp-today-label {
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  font-weight: 500;
}

/* ============================================
   Step 4-3: 시점 추가 모달 + 알림 토스트
   ============================================ */
.cp-toast {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.cp-toast-success {
  background: #ecfdf5;
  border-left: 3px solid #10b981;
  color: #065f46;
}
.cp-toast small {
  display: inline-block;
  margin-top: 4px;
  color: #047857;
  font-size: 12px;
}

/* 모달 */
.cp-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.cp-modal-inner {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.cp-modal-inner h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
}
.cp-modal-inner .form-row {
  margin-bottom: 12px;
}
.cp-modal-inner .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #555;
}
.cp-modal-inner .form-row input[type=date],
.cp-modal-inner .form-row input[type=text] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.cp-modal-info {
  background: #f0f7ff;
  border-left: 3px solid #5b8def;
  padding: 8px 12px;
  font-size: 12px;
  color: #2756b8;
  margin: 12px 0;
  border-radius: 4px;
}
.cp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* 추가 버튼 강조 */
.cp-add-btn {
  background: #5b8def !important;
  color: white !important;
  border-color: #5b8def !important;
}
.cp-add-btn:hover {
  background: #4a7ce0 !important;
}

/* ============================================
   루틴표: 기준일 선택 바 (시점별 계약 시스템)
   ============================================ */
.routine-refdate-bar {
  background: #f0f7ff;
  border: 1px solid #d0e4fa;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.routine-refdate-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.routine-refdate-form label {
  font-size: 13px;
  font-weight: 500;
  color: #2756b8;
}
.routine-refdate-form input[type=date] {
  padding: 5px 8px;
  border: 1px solid #b4d2f0;
  border-radius: 4px;
  font-size: 13px;
}
.routine-today-btn {
  font-size: 12px;
  padding: 3px 10px;
  text-decoration: none;
  background: #fff;
  border: 1px solid #b4d2f0;
  border-radius: 4px;
  color: #2756b8;
}
.routine-today-btn:hover {
  background: #e6f1fb;
  text-decoration: none;
}
.routine-refdate-hint {
  font-size: 12px;
  margin-left: auto;
}
.routine-refdate-hint.today {
  color: #888;
}
.routine-refdate-hint.future {
  color: #b45309;
  background: #fef3c7;
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 500;
}

/* ============================================
   R-1: 루틴표 시점 드롭다운 (refdate bar 확장)
   ============================================ */
.routine-refdate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.routine-refdate-form-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.routine-divider {
  color: #c5d4e8;
  margin: 0 2px;
}
.routine-tp-label {
  font-size: 13px;
  font-weight: 500;
  color: #2756b8;
}
.routine-tp-select {
  padding: 5px 8px;
  border: 1px solid #b4d2f0;
  border-radius: 4px;
  font-size: 13px;
  min-width: 280px;
  background: #fff;
  cursor: pointer;
}
.routine-tp-select option.tp-active,
.routine-tp-select option[selected] {
  background: #fef3c7;
  color: #633806;
  font-weight: 500;
}
.routine-tp-count {
  font-size: 11px;
  color: #888;
  margin-left: auto;
}

/* 반응형 - 좁은 화면에서는 줄바꿈 자연스럽게 */
@media (max-width: 900px) {
  .routine-tp-select { min-width: 200px; flex: 1; }
  .routine-tp-count { margin-left: 0; }
}

/* ==========================================================================
 * 2026-05-24 hotfix-1 v5: 인쇄 전용 일자 헤더 (thead 자동반복)
 * ==========================================================================
 *
 * 배경:
 *   - 11명짜리 큰 day-block 이 한 페이지에 안 들어가서 table 통째로 다음 페이지로
 *     밀리는 "헤더-본문 분리" 버그 (옵션 A 적용 후에도 발생)
 *
 * 전략:
 *   - 화면용: 기존 .day-block-header / .day-block-note / .day-block-holiday-banner div
 *     그대로 유지 (편집 인터랙션, 호버, 토글 등 모두 보존)
 *   - 인쇄용: thead 안의 .routine-print-header-row 가 일자 헤더 역할
 *     thead 는 표준상 매 페이지 자동 반복 표시 → 표가 페이지 걸쳐도 헤더 따라옴
 *
 * 화면/인쇄 분기:
 *   - 화면: .print-only-row 숨김 (display: none)
 *   - 인쇄: .day-block-header / -note / -holiday-banner 숨김, .print-only-row 표시
 * ========================================================================== */

/* 화면에서는 인쇄 전용 행 숨김 */
.routine-print-header-row.print-only-row {
  display: none;
}

@media print {
  /* 인쇄에서는 인쇄 전용 행 표시 (table-row 로) */
  .routine-print-header-row.print-only-row {
    display: table-row;
  }
  /* 인쇄에서는 기존 화면용 헤더 div 들 숨김
     (인쇄 전용 행이 같은 정보를 담음) */
  .day-block-header,
  .day-block-note,
  .day-block-holiday-banner {
    display: none !important;
  }

  /* 인쇄 전용 헤더 셀 스타일 */
  .print-header-cell {
    padding: 6mm 3mm 2mm 3mm !important;
    background: #f7f7f7 !important;
    border: 1px solid #999 !important;
    border-bottom: 2px solid #555 !important;
    text-align: left !important;
    font-weight: 600 !important;
    vertical-align: top !important;
  }
  .print-header-line {
    line-height: 1.4;
    font-size: 11.5pt;
  }
  .print-header-line-main {
    font-weight: 700;
  }
  .print-header-label {
    font-size: 13pt;
    margin-right: 8px;
  }
  .print-header-counts {
    font-size: 11pt;
    font-weight: 500;
    color: #333;
  }
  .print-header-holiday {
    margin-left: 10px;
    font-size: 11pt;
    font-weight: 700;
    color: #b8002e;
  }
  .print-header-line-note {
    margin-top: 1mm;
    font-size: 10.5pt;
    font-weight: 500;
    color: #555;
  }
}

/* ===== 3단계: 복사 모달 — 사람 매핑표 / 복사 내용 ===== */
.copy-map-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.copy-map-item { display: flex; align-items: center; gap: 8px; }
.copy-map-from { min-width: 72px; font-weight: 500; }
.copy-map-arrow { color: #888; }
.copy-map-item select { flex: 1; min-width: 0; }
.copy-map-off-tag { color: #c0392b; font-size: 12px; white-space: nowrap; }
.copy-content-row .copy-content-check { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; cursor: pointer; }

/* ===== 4단계: 메모칸 (주간 공지 / 월차메모) ===== */
.weekly-notice-bar { display: flex; align-items: center; gap: 8px; background: #FAEEDA; border: 0.5px solid #BA7517; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.weekly-notice-label { font-size: 12px; color: #854F0B; font-weight: 500; white-space: nowrap; }
.weekly-notice-text { font-size: 14px; color: #412402; }
.weekly-notice-empty { font-size: 13px; color: #998; }
.weekly-notice-editable { cursor: pointer; }
.weekly-notice-editable:hover { background: #F6E2C0; }
.day-block-leave { display: flex; align-items: center; gap: 6px; background: #FAEEDA; border-top: 0.5px solid #EF9F27; padding: 5px 10px; font-size: 13px; color: #854F0B; }
.day-block-leave-editable { cursor: pointer; }
.day-block-leave-editable:hover { background: #F6E2C0; }
.leave-note-empty { color: #998; font-size: 12px; }

/* ===== 4단계: 월별 화면 메모 (월간 공지 / 주간 공지 줄 / 셀 월차메모) ===== */
.monthly-notice-bar { display: flex; align-items: center; gap: 8px; background: #EEEDFE; border: 0.5px solid #534AB7; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.monthly-notice-label { font-size: 12px; color: #3C3489; font-weight: 500; white-space: nowrap; }
.monthly-notice-text { font-size: 14px; color: #26215C; }
.monthly-notice-empty { font-size: 13px; color: #998; }
.monthly-notice-editable { cursor: pointer; }
.monthly-notice-editable:hover { background: #E3E1F8; }
.month-week-notice { grid-column: 1 / -1; background: #FAEEDA; border: 0.5px solid #EF9F27; border-radius: 5px; padding: 3px 8px; font-size: 12px; color: #854F0B; display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.mwn-icon { font-size: 12px; flex-shrink: 0; }
.month-cell-leave { font-size: 11px; color: #854F0B; display: flex; align-items: flex-start; gap: 3px; margin-top: 2px; }
.mc-leave-icon { flex-shrink: 0; }

/* ===== 4단계: 메모 인쇄 (빈 안내문 제외 + 배경 옅게, 레이아웃은 그대로) ===== */
@media print {
  .weekly-notice-empty, .monthly-notice-empty, .leave-note-empty, .day-note-empty { display: none !important; }
  .weekly-notice-bar, .monthly-notice-bar, .month-week-notice,
  .day-block-leave, .month-cell-leave { background: transparent !important; }
}

/* 4단계: 복사 모달 넓게 + 직원 이름 줄바꿈 방지 */
.modal-content-copy { max-width: 640px; }
.copy-scope-check span { white-space: nowrap !important; }
/* 개별 선택: 박스를 모달 폭 가득 채우고, 직원 이름은 가로로 (창 넓으니 옆으로) */
.copy-scope-row { display: block !important; }
.copy-scope-panel,
.copy-scope-panel-emp { width: 100% !important; box-sizing: border-box !important; }
.copy-scope-panel-emp { max-height: 280px; flex-direction: column !important; overflow-x: hidden !important; }
.copy-scope-emp-group { display: flex !important; flex-wrap: wrap !important; gap: 4px 16px !important; align-items: center !important; }
.copy-scope-emp-group-label { flex-basis: 100% !important; margin-bottom: 2px; }
.copy-scope-emp-group .copy-scope-check { margin-left: 0 !important; white-space: nowrap !important; }
/* 복사할 내용: 하는 일 + 출퇴근 한 줄에 (줄바꿈 X), 경고만 다음 줄 */
.copy-content-row { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 18px; }
.copy-content-row .copy-content-check { display: inline-flex !important; align-items: center; gap: 6px; margin-right: 0 !important; white-space: nowrap; }
.copy-content-row .copy-shift-warning { flex-basis: 100%; margin-top: 4px; }

/* ============================================================
   2026-06-29 (5단계 주별 UI Step1): 보기 버전 탭 (①일별 ②팀별 ③전체)
   - public/js/weekly-views.js 가 동작. 기존 DOM/편집은 표시 토글만 → 영향 없음.
   - 되돌리기: weekly.ejs 의 weekly-views.js include 한 줄 + 이 블록 삭제.
   ============================================================ */
.wv-tabbar { position: sticky; top: 56px; z-index: 20; background: var(--color-bg); padding: 8px 0 10px; margin-bottom: 4px; }
.wv-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.wv-sub { border: 1px solid var(--color-border); background: #fff; border-radius: 10px; padding: 8px 16px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--color-text-muted); }
.wv-sub small { font-weight: 600; font-size: 11px; color: var(--color-text-light); margin-left: 4px; }
.wv-sub:hover { background: #eef2f8; }
.wv-sub.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wv-sub.on small { color: #e7eefc; }
.wv-daytabs, .wv-teamtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.wv-day, .wv-team { border: 1px solid var(--color-border); background: #fff; border-radius: 9px; padding: 6px 13px; cursor: pointer; font-weight: 700; font-size: 12.5px; color: var(--color-text-muted); }
.wv-day:hover, .wv-team:hover { background: #eef2f8; }
.wv-day.on, .wv-team.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 버전② 팀별: 월화 / 수목 / 금토 / 일 (2일씩 2열) */
.weekly-day-list.wv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.weekly-day-list.wv-grid .day-block { margin-bottom: 0; min-width: 0; }
.weekly-day-list.wv-grid .weekly-grid-wrap { overflow: hidden; }
/* 표가 카드 폭을 꽉 채우게 (오른쪽 여백 방지) — table-layout:fixed 안 씀(한글 세로쌓임 방지) */
.weekly-day-list.wv-grid .weekly-grid { width: 100% !important; min-width: 0; }
/* 칸 폭 재배분 — 근무자~특이사항은 적당히, 타임라인(cg-timeline 무 width)이 남는 폭 차지 */
.weekly-day-list.wv-grid .weekly-grid col.cg-name    { width: 86px !important; }
.weekly-day-list.wv-grid .weekly-grid col.cg-shift   { width: 76px !important; }
.weekly-day-list.wv-grid .weekly-grid col.cg-oc      { width: 36px !important; }
.weekly-day-list.wv-grid .weekly-grid col.cg-notes   { width: 108px !important; }
.weekly-day-list.wv-grid .weekly-grid col.cg-closing { width: 96px !important; }
/* 이름은 한 줄 유지(세로 쌓임 방지), 직책만 줄바꿈 허용 */
.weekly-day-list.wv-grid .weekly-grid .emp-name { white-space: nowrap; }
.weekly-day-list.wv-grid .weekly-grid .emp-duty { display: block; white-space: normal; word-break: keep-all; }
/* 단일 팀 선택 시 팀 칼럼 접기.
   ⚠️ team-cell 은 rowspan 이라 display:none 하면 표 정렬이 깨짐(근무자 칸까지 사라짐)
   → 셀은 그대로 두고 0폭 + 내용만 숨김 → 표 구조 유지, 근무자 칸 정상. */
.weekly-day-list.wv-grid.wv-oneteam .weekly-grid col.cg-team { width: 0 !important; }
.weekly-day-list.wv-grid.wv-oneteam .weekly-grid th.col-team,
.weekly-day-list.wv-grid.wv-oneteam .weekly-grid td.team-cell {
  width: 0 !important; max-width: 0 !important; padding: 0 !important;
  border-left: 0 !important; border-right: 0 !important; overflow: hidden !important; white-space: nowrap !important;
}
.weekly-day-list.wv-grid.wv-oneteam .weekly-grid th.col-team > *,
.weekly-day-list.wv-grid.wv-oneteam .weekly-grid td.team-cell > * { display: none !important; }

/* 2026-06-29 (5단계 주별 UI Step2): 평소와 다른 근무 ❗ → "변동" 핑크 알약 (월별 v4와 통일) */
.weekly-grid .dev-tooltip-icon.dev-pill {
  display: inline-block; background: #FDE9EF; color: #D23B63; border: 1px solid #E98FAB;
  border-radius: 999px; padding: 0 5px; font-size: 9px; font-weight: 800; line-height: 1.5;
  margin-right: 3px; vertical-align: middle; cursor: help; letter-spacing: 0;
}
/* 이름 + 수동수정 점(●) + 변동 알약을 한 줄로 (버전①·③ 두 줄 방지) — 우선순위 높여 확실히 */
.weekly-grid .col-name .emp-name { white-space: nowrap !important; }
.weekly-grid .col-name .emp-name .modified-dot { display: inline; white-space: nowrap; }

/* ============================================================
   2026-06-29 (5단계 주별 UI Step2): 메모 강조 · 툴바 고정 · 팀 색 v4 통일
   - 전부 CSS만. DOM/편집 훅 무수정. 되돌리기: 이 블록 삭제.
   ============================================================ */
/* (a) 오늘의공지 📌 · 월차메모 🌙 · 주간공지 폰트/여백 키우기 */
.day-block-note, .day-block-leave { font-size: 13px; padding: 8px 14px; line-height: 1.5; }
.day-block-note .day-note-text, .day-block-leave .leave-note-text { font-size: 13px; }
.day-block-note .day-note-icon, .day-block-leave .leave-note-icon { font-size: 14px; }
.weekly-notice-bar { padding: 11px 15px; }
.weekly-notice-bar .weekly-notice-text { font-size: 13.5px; line-height: 1.5; }
.weekly-notice-bar .weekly-notice-label { font-size: 13px; }

/* (b) 상단 툴바 고정 (전역 top-nav 56px 아래) — 버전탭은 그 아래로 */
.weekly-toolbar { position: sticky; top: 56px; z-index: 32; background: var(--color-bg); }
.wv-tabbar { top: 112px; z-index: 20; }

/* (c) 팀 색을 월별 v4 톤으로 통일 (약사 틸 / 접수 테라코타 / 조제 인디고 / 기타 토프) */
.weekly-grid .team-cell[data-team-name*="약사"] { background: #E3EFED !important; color: #2F6F6A !important; }
.weekly-grid .team-cell[data-team-name*="접수"] { background: #F6ECE2 !important; color: #B56A3C !important; }
.weekly-grid .team-cell[data-team-name*="조제"] { background: #ECECF7 !important; color: #5D5FA2 !important; }
.weekly-grid .team-cell[data-team-name*="기타"] { background: #EFEBE1 !important; color: #847B65 !important; }
@media (max-width: 1100px) { .weekly-day-list.wv-grid { grid-template-columns: 1fr; } }

/* 인쇄: 어느 버전이든 전체 주 한 번에 출력 (블록·행 모두 표시) */
@media print {
  .wv-tabbar { display: none !important; }
  .weekly-day-list.wv-grid { display: block !important; }
  .weekly-day-list .day-block { display: block !important; }
  .weekly-day-list .routine-row { display: table-row !important; }
}

/* ════════════════════════════════════════════════════════════
   월별 UI 개선 v4 이식 — 그룹 A (순수 CSS 재스타일)
   2026-06-29 · 시각 기준: 월별목업_v4.html
   범위: 월별(.month-cell 스코프)만. 주별/검증/설정 등 다른 화면 영향 없음.
   되돌리기: 이 블록(아래 "그룹 A 끝" 마커까지) 전체 삭제
            또는 main.css.bak-월별UI-* 복원.
   ════════════════════════════════════════════════════════════ */

/* 메모/핑크 색 토큰 (목업 v4 기준) */
:root{
  --muiv4-note-bg:#FFF7E3;  --muiv4-note-line:#F1DA9F;  --muiv4-note-ink:#8A6312;   /* 📌 오늘의 공지 */
  --muiv4-leave-bg:#EEF1F7; --muiv4-leave-line:#D2DBEA; --muiv4-leave-ink:#4D586F;  /* 🌙 월차메모(슬레이트) */
  --muiv4-chg:#D23B63;      --muiv4-chg-bg:#FDE9EF;     --muiv4-chg-bar:#E98FAB;     /* ❗ 평소와 다른 출퇴근 = 유일한 핑크 */
}

/* (A-1) 오늘의 공지 📌 — 점선 윗줄 → 앰버 박스 */
.month-cell .month-cell-note{
  margin-top:4px;
  padding:3px 7px;
  border:0.5px solid var(--muiv4-note-line);
  border-radius:6px;
  background:var(--muiv4-note-bg);
  color:var(--muiv4-note-ink);
  font-size:10.5px;
  line-height:1.34;
  gap:5px;
}

/* (A-2) 월차메모 🌙 — 앰버 텍스트 → 슬레이트 박스 */
.month-cell .month-cell-leave{
  padding:3px 7px;
  border:0.5px solid var(--muiv4-leave-line);
  border-radius:6px;
  background:var(--muiv4-leave-bg);
  color:var(--muiv4-leave-ink);
  font-size:10.5px;
  line-height:1.34;
  gap:5px;
}

/* (A-3) 평소와 다른 출퇴근 = 핑크 (월별 스코프 한정 → 주별 .is-deviated 무영향) */
.month-cell .month-cell-deviation{            /* 셀 헤더 ❗ 동그라미 */
  background:var(--muiv4-chg-bg);
  color:var(--muiv4-chg);
  border-color:var(--muiv4-chg-bar);
}
.month-cell .dev-tooltip-icon,                 /* 근무자 상세 행 ❗ */
.month-cell .mc-dev-icon{
  color:var(--muiv4-chg);
}
.month-cell .mc-worker.is-deviated{            /* 출근자 행: 노랑 → 핑크 박스 + 좌측바 */
  background:var(--muiv4-chg-bg);
  box-shadow:inset 2px 0 0 var(--muiv4-chg-bar);
  border-radius:5px;
}
.month-cell .mc-worker.is-deviated .mc-worker-name{ color:#B32753; font-weight:700; }
.month-cell .mc-worker.is-deviated .mc-worker-time{ color:var(--muiv4-chg); font-weight:700; }
.month-cell .mc-off-name.is-deviated{          /* 휴무 명단 중 평소와 다른 사람 */
  background:transparent;
  color:var(--muiv4-chg);
  font-weight:700;
}

/* (A-4) 팀 이름칩 — 자간만 살짝 다듬기 (팀별 색칩은 그룹 C에서 템플릿과 함께) */
.month-cell .mc-team-name{ letter-spacing:.2px; }

/* (A-인쇄) 메모 박스 배경/테두리는 인쇄 시 제거(잉크 절약 · 기존 인쇄정책과 동일 결) */
@media print{
  .month-cell .month-cell-note,
  .month-cell .month-cell-leave{
    background:transparent !important;
    border-color:transparent !important;
    padding-left:0; padding-right:0;
  }
}
/* ═══ 월별 UI 개선 v4 — 그룹 A 끝 ═══ */

/* ════════════════════════════════════════════════════════════
   월별 UI 개선 v4 이식 — 그룹 C · 2026-06-29
   🟡 단축 배지 (공휴일만). 템플릿: monthly.ejs 헤더 .month-cell-short-tag
   되돌리기: 이 블록 삭제 + monthly.ejs 의 short-tag 줄 삭제(또는 .bak 복원).
   ════════════════════════════════════════════════════════════ */
.month-cell .month-cell-short-tag{
  margin-left:auto;            /* 날짜 줄 오른쪽으로 */
  font-size:9px; font-weight:800;
  color:#9A7016; background:#F7EAD0; border:0.5px solid #E9D199;
  border-radius:5px; padding:1px 5px;
  white-space:nowrap; line-height:1.3;
  align-self:center;
}
/* ═══ 월별 UI 개선 v4 — 그룹 C 끝 ═══ */

/* ════════════════════════════════════════════════════════════
   월별 UI 개선 v4 — 밴드그리드 달력 · 2026-06-29
   시각 기준: 월별목업_v4.html. 전부 .monthly-cal-v4 스코프 → 다른 화면 무영향.
   (위 그룹 A·C 의 .month-cell 규칙은 이제 미사용이지만 무해해서 보존)
   되돌리기: 이 블록 삭제 + monthly.ejs / monthly.js 를 .bak-밴드-* 로 복원.
   ════════════════════════════════════════════════════════════ */
.monthly-cal-v4{
  --v4-line:#E6E1D4; --v4-line-soft:#EFECE2; --v4-card:#fff;
  --v4-wd-bg:#3D6FB3;
  --v4-note-bg:#FFF7E3; --v4-note-line:#F1DA9F; --v4-note-ink:#8A6312;
  --v4-leave-bg:#EEF1F7; --v4-leave-line:#D2DBEA; --v4-leave-ink:#4D586F;
  --v4-chg:#D23B63; --v4-chg-bg:#FDE9EF; --v4-chg-bar:#E98FAB;
  --v4-today:#FFF7CF; --v4-holiday:#FBECEB;
  --v4-sun:#C5413E; --v4-sat:#2469B8;
  --v4-ph:#2F6F6A; --v4-ph-bg:#E3EFED;
  --v4-rc:#B56A3C; --v4-rc-bg:#F6ECE2;
  --v4-pr:#5D5FA2; --v4-pr-bg:#ECECF7;
  --v4-etc:#847B65; --v4-etc-bg:#EFEBE1;
  font-size:11px; color:#262321; font-feature-settings:"tnum" 1;
}

/* 요일 헤더 (블루 바) */
.monthly-cal-v4 .mcv4-wd-row{ display:grid; grid-template-columns:repeat(7,1fr);
  background:var(--v4-wd-bg); border-radius:8px 8px 0 0; overflow:hidden; margin-top:8px; }
.monthly-cal-v4 .mcv4-wd{ padding:6px 0; text-align:center; font-size:11.5px; font-weight:700; color:#EAF2FB; }
.monthly-cal-v4 .mcv4-wd.sat{ color:#C4DCF5; }
.monthly-cal-v4 .mcv4-wd.sun{ color:#F6C9C7; }

/* 달력 외곽 + 주 행 (밴드 컨테이너) */
.monthly-cal-v4 .mcv4-cal{ border:1px solid var(--v4-line); border-top:none;
  border-radius:0 0 8px 8px; overflow:hidden; background:var(--v4-line); }
.monthly-cal-v4 .mcv4-week{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:min-content; border-bottom:1px solid var(--v4-line); }
.monthly-cal-v4 .mcv4-week:last-child{ border-bottom:none; }

/* 주간 공지 (가로 줄 7칸 전체) */
.monthly-cal-v4 .mcv4-wnotice{ grid-column:1 / -1; display:flex; align-items:center; gap:6px;
  background:#FAEEDA; border-bottom:1px solid #EF9F27; padding:4px 11px; font-size:10.5px; color:#854F0B; font-weight:600; }
.monthly-cal-v4 .mcv4-wnotice .lab{ font-weight:800; white-space:nowrap; background:#F2DCB0; border-radius:5px; padding:1px 6px; }

/* 셀 공통 */
.monthly-cal-v4 .mcv4-cell{ display:block; background:var(--v4-card);
  border-left:1px solid var(--v4-line-soft); text-decoration:none; color:inherit; }
.monthly-cal-v4 .mcv4-cell.mcv4-c0{ border-left:none; }
.monthly-cal-v4 .mcv4-cell.is-other{ background:#F7F6F1; color:#B4AD9C; }
/* 오늘 칸: 배경 음영 없음(흰 칸 유지) + 파란 테두리만(셀이 5밴드라 양옆 세로 레일 + 머리 위/로스터 아래로 컬럼을 감쌈) */
.monthly-cal-v4 .mcv4-cell.is-today{ box-shadow:inset 3px 0 0 #2E6BB0, inset -3px 0 0 #2E6BB0; }
.monthly-cal-v4 .mcv4-c-head.is-today{ box-shadow:inset 3px 0 0 #2E6BB0, inset -3px 0 0 #2E6BB0, inset 0 3px 0 #2E6BB0; }
.monthly-cal-v4 .mcv4-c-roster.is-today{ box-shadow:inset 3px 0 0 #2E6BB0, inset -3px 0 0 #2E6BB0, inset 0 -3px 0 #2E6BB0; }
.monthly-cal-v4 .mcv4-cell.is-holiday{ background:var(--v4-holiday); }
.monthly-cal-v4 .mcv4-cell.is-today.is-holiday{ background:var(--v4-holiday); }

/* 밴드1: 날짜 헤더 */
.monthly-cal-v4 .mcv4-c-head{ display:flex; align-items:center; gap:5px; padding:5px 8px 4px; }
.monthly-cal-v4 .mcv4-c-head .dnum{ font-size:13px; font-weight:800; line-height:1; }
.monthly-cal-v4 .mcv4-c-head .dow{ font-size:10px; font-weight:700; color:#8C8678; }
.monthly-cal-v4 .mcv4-c-head.is-sun .dnum, .monthly-cal-v4 .mcv4-c-head.is-sun .dow{ color:var(--v4-sun); }
.monthly-cal-v4 .mcv4-c-head.is-sat .dnum, .monthly-cal-v4 .mcv4-c-head.is-sat .dow{ color:var(--v4-sat); }
.monthly-cal-v4 .mcv4-cell.is-other .dnum, .monthly-cal-v4 .mcv4-cell.is-other .dow{ color:#B4AD9C; }
.monthly-cal-v4 .mcv4-c-head .hname{ font-size:9.5px; font-weight:800; color:var(--v4-sun); }
.monthly-cal-v4 .mcv4-head-r{ margin-left:auto; display:flex; gap:4px; align-items:center; }
.monthly-cal-v4 .tag-today{ font-size:9px; font-weight:800; color:#fff; background:#2E6BB0; border-radius:5px; padding:1px 5px; }

/* 밴드2/3: 메모 박스 */
.monthly-cal-v4 .mcv4-c-memo{ padding:0 8px 3px; }
.monthly-cal-v4 .mcv4-mbox{ display:flex; gap:5px; width:100%; border-radius:6px;
  padding:3px 7px; font-size:10px; line-height:1.36; font-weight:500; }
.monthly-cal-v4 .mcv4-mbox.note{ background:var(--v4-note-bg); border:0.5px solid var(--v4-note-line); color:var(--v4-note-ink); }
.monthly-cal-v4 .mcv4-mbox.leave{ background:var(--v4-leave-bg); border:0.5px solid var(--v4-leave-line); color:var(--v4-leave-ink); }
.monthly-cal-v4 .mcv4-mbox .ic{ flex:none; }

/* 밴드4: 인원 알약 */
.monthly-cal-v4 .mcv4-c-count{ padding:1px 8px 5px; }
.monthly-cal-v4 .mcv4-pill{ display:inline-block; font-size:9.5px; font-weight:700; color:#7A7464;
  background:#F4F2EA; border:0.5px solid var(--v4-line); border-radius:999px; padding:2px 8px; }
.monthly-cal-v4 .mcv4-pill .mc-tc{ white-space:nowrap; }
.monthly-cal-v4 .mcv4-pill.short{ color:#9A7016; background:#F7EAD0; border-color:#E9D199; }
.monthly-cal-v4 .mcv4-pill .mc-tc.has-unassigned{ color:#B8860B; }
.monthly-cal-v4 .mcv4-pill .mc-tc-warn{ font-size:9px; margin-left:1px; }

/* 밴드5: 로스터 — 내용(토글 div)에만 구분선/패딩 → 토글 OFF 면 칸이 collapse */
.monthly-cal-v4 .mcv4-c-roster{ padding:0 7px; }
.monthly-cal-v4 .month-cell-hospitals{ padding:3px 0 0; }
.monthly-cal-v4 .mc-hosp{ font-size:10px; color:#5A4F38; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.monthly-cal-v4 .month-cell-staff-detail,
.monthly-cal-v4 .month-cell-holiday-detail{ padding:4px 0 7px; border-top:1px dashed var(--v4-line); font-size:10.5px; line-height:1.4; color:#3A3528; }
.monthly-cal-v4 .mc-team-block{ margin-bottom:3px; }
.monthly-cal-v4 .mc-team-block:last-child{ margin-bottom:0; }
.monthly-cal-v4 .mc-team-name{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.2px;
  border-radius:5px; padding:1px 7px; margin-bottom:2px; }
.monthly-cal-v4 .mc-team-name.mcv4-team-ph{ color:var(--v4-ph); background:var(--v4-ph-bg); }
.monthly-cal-v4 .mc-team-name.mcv4-team-rc{ color:var(--v4-rc); background:var(--v4-rc-bg); }
.monthly-cal-v4 .mc-team-name.mcv4-team-pr{ color:var(--v4-pr); background:var(--v4-pr-bg); }
.monthly-cal-v4 .mc-team-name.mcv4-team-etc{ color:var(--v4-etc); background:var(--v4-etc-bg); }
.monthly-cal-v4 .mc-worker{ display:flex; align-items:center; gap:4px; padding:1px 4px; border-radius:5px; margin:1px 0; }
.monthly-cal-v4 .mc-worker-name{ font-size:10.5px; font-weight:600; color:#332F29; white-space:nowrap; }
.monthly-cal-v4 .mc-worker-time{ margin-left:auto; font-size:10px; font-weight:600; color:#37414F; white-space:nowrap; font-variant-numeric:tabular-nums; }
.monthly-cal-v4 .mc-offs{ font-size:9.5px; color:#B4AD9C; line-height:1.5; padding:1px 4px 0; }
.monthly-cal-v4 .mc-offs-label{ font-weight:700; color:#8C8678; margin-right:2px; }

/* 핑크: 평소와 다른 출퇴근 */
/* 변동 배지 (❗ 대신 "변동" 핑크 알약) — 셀 헤더용 */
.monthly-cal-v4 .month-cell-deviation{ display:inline-flex; align-items:center; background:var(--v4-chg-bg); color:var(--v4-chg);
  border:0.5px solid var(--v4-chg-bar); border-radius:6px; padding:1px 6px; font-size:9px; font-weight:800; line-height:1.3; font-style:normal; white-space:nowrap; }
/* 변동 미니 알약 — 근무자/휴무 이름 앞 */
.monthly-cal-v4 .dev-tooltip-icon{ display:inline-block; background:var(--v4-chg-bg); color:var(--v4-chg);
  border:0.5px solid var(--v4-chg-bar); border-radius:5px; padding:0 4px; font-size:8.5px; font-weight:800; line-height:1.5; font-style:normal; margin-right:3px; vertical-align:middle; }
.monthly-cal-v4 .mc-worker.is-deviated{ background:var(--v4-chg-bg); box-shadow:inset 2px 0 0 var(--v4-chg-bar); }
.monthly-cal-v4 .mc-worker.is-deviated .mc-worker-name{ color:#B32753; font-weight:700; }
.monthly-cal-v4 .mc-worker.is-deviated .mc-worker-time{ color:var(--v4-chg); font-weight:800; }
.monthly-cal-v4 .mc-off-name.is-deviated{ color:var(--v4-chg); font-weight:700; }

/* 🟡 단축 배지 + ⚠️ */
.monthly-cal-v4 .month-cell-short-tag{ font-size:9px; font-weight:800; color:#9A7016; background:#F7EAD0;
  border:0.5px solid #E9D199; border-radius:5px; padding:1px 5px; white-space:nowrap; line-height:1.3; }
.monthly-cal-v4 .month-cell-warn{ font-size:10px; }

/* 공휴일 상세 (토글) */
.monthly-cal-v4 .mc-holiday-pharm{ margin-bottom:3px; }
.monthly-cal-v4 .mc-mode-open{ color:#2A6A28; } .monthly-cal-v4 .mc-mode-short{ color:#8A6300; } .monthly-cal-v4 .mc-mode-closed{ color:#C5413E; }
.monthly-cal-v4 .mc-warn-text{ color:#9A6B00; font-size:9.5px; }
.monthly-cal-v4 .mc-hh-row{ display:flex; gap:4px; justify-content:space-between; }
.monthly-cal-v4 .mc-hh-tag{ font-weight:700; color:#8A6300; }
.monthly-cal-v4 .mc-duties-label,.monthly-cal-v4 .mc-unassigned-label{ font-weight:700; margin-top:2px; }
.monthly-cal-v4 .mc-duty-team{ margin-top:1px; }
.monthly-cal-v4 .mc-duty-teamname{ font-weight:700; color:#5A4F38; }
.monthly-cal-v4 .mc-duty-member,.monthly-cal-v4 .mc-unassigned-slot{ display:flex; gap:4px; justify-content:space-between; }

/* 범례 (목업 v4) */
.monthly-cal-v4 .mcv4-legend{ font-size:11px; margin-top:10px; }
.monthly-cal-v4 .mcv4-lg-ph{ width:10px; height:10px; border-radius:3px; display:inline-block; background:var(--v4-ph); }
.monthly-cal-v4 .mcv4-lg-rc{ width:10px; height:10px; border-radius:3px; display:inline-block; background:var(--v4-rc); }
.monthly-cal-v4 .mcv4-lg-sw{ font-size:10px; }
.monthly-cal-v4 .leg-pink{ color:var(--v4-chg); font-weight:900; }

/* 인쇄: 박스 배경 옅게 (기존 인쇄정책과 동일 결) */
@media print{
  .monthly-cal-v4 .mcv4-mbox.note, .monthly-cal-v4 .mcv4-mbox.leave{ background:transparent; border-color:transparent; padding-left:0; }
  .monthly-cal-v4 .mcv4-wnotice{ background:transparent; }
}
/* 메모 4종 클릭 편집 (관리자 전용 마크업) */
.monthly-cal-v4 .mcv4-editable{ cursor:pointer; }
.monthly-cal-v4 .mcv4-mbox.mcv4-editable:hover{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.monthly-cal-v4 .mcv4-wnotice.mcv4-editable:hover{ filter:brightness(0.98); }
/* 빈칸 "추가" 자리표시 — 평소 흐릿, 그 칸에 마우스 올리면 또렷 */
.monthly-cal-v4 .mcv4-mbox.mcv4-add{ background:transparent; border:1px dashed #CDC8B8; color:#B4AD9C; opacity:.4; font-weight:600; }
.monthly-cal-v4 .mcv4-c-memo:hover .mcv4-mbox.mcv4-add{ opacity:1; }
.monthly-cal-v4 .mcv4-wnotice.mcv4-wn-empty{ background:#FBF6EC; color:#B59A6A; opacity:.7; }
.monthly-cal-v4 .mcv4-wnotice.mcv4-wn-empty .lab{ background:#EFE2C8; }
.monthly-cal-v4 .mcv4-wnotice.mcv4-wn-empty:hover{ opacity:1; }
/* 인쇄 시 "추가" 자리표시·빈 주간공지 줄은 숨김 */
@media print{
  .monthly-cal-v4 .mcv4-mbox.mcv4-add, .monthly-cal-v4 .mcv4-wnotice.mcv4-wn-empty{ display:none !important; }
}
/* ═══ 월별 UI 개선 v4 — 밴드그리드 끝 ═══ */