/* ==========================================================================
   송출센터 4교대 스마트 근무표 스타일시트 (Clean White Theme / Mobile-First)
   ========================================================================== */

:root {
  --bg-main: #f8fafc;           /* 부드러운 화이트 톤 */
  --bg-card: #ffffff;           /* 캘린더 날짜 셀 및 카드: 순백색 */
  --bg-card-hover: #f1f5f9;
  --bg-elevated: #ffffff;       /* 모달 및 바텀시트: 순백색 */
  --text-primary: #1e293b;      /* 본문 텍스트: 진한 차콜 */
  --text-secondary: #64748b;    /* 보조 텍스트: 슬레이트 그레이 */
  --text-muted: #94a3b8;        /* 연한 텍스트 */
  --border-color: #e2e8f0;      /* 깔끔한 연회색 테두리 */
  --border-highlight: #cbd5e1;

  /* Shift Color Tokens (네모 박스 선색 & 텍스트 컬러) */
  /* 1) 일, 야, 조: 단정한 옅은 회색 계열로 통일하여 눈의 피로도 완화 */
  --shift-normal-color: #475569;  /* 가독성 높은 차분한 슬레이트 그레이 */
  --shift-normal-border: #cbd5e1; /* 옅은 회색 테두리 */
  --shift-normal-bg: #f1f5f9;     /* 옅은 회색 배경 */

  --shift-il-color: #475569;
  --shift-il-bg: #f1f5f9;
  --shift-ya-color: #475569;
  --shift-ya-bg: #f1f5f9;
  --shift-jo-color: #475569;
  --shift-jo-bg: #f1f5f9;

  /* 2) 비, 대, 휴: 눈에 띄면서도 서로 명확히 구분되는 3대 컬러 */
  --shift-bi-color: #34d399;     /* 비번: 한 톤 더 흐리고 은은한 소프트 민트 (요청 반영) */
  --shift-bi-bg: #f4fbf8;        /* 아주 옅은 파스텔 연초록 배경 */
  --shift-bi-border: #d1fae5;    /* 옅은 테두리 */

  --shift-sub-color: #ea580c;    /* 대근: 눈에 띄는 선명한 웜 오렌지 (대근) */
  --shift-sub-bg: #fff7ed;
  --shift-sub-border: #fed7aa;

  --shift-leave-color: #dc2626;  /* 휴가: 시선을 끄는 로즈 레드 (휴가) */
  --shift-leave-bg: #fef2f2;
  --shift-leave-border: #fecaca;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

body {
  font-family: var(--app-font, 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  background-color: #f1f5f9;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  overflow-x: hidden;
}

/* App Container (Mobile: 100%, PC/Desktop: 860px spacious centered layout) */
#app-container {
  width: 100%;
  max-width: 860px;
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
  position: relative;
  margin: 0 auto;
}

/* Header Section */
.app-header {
  padding: max(12px, calc(10px + env(safe-area-inset-top, 0px))) 16px 8px;
  background: #f1f5f9;
  border-bottom: 1.5px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 8px;
}

.header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-sync-onair-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: fit-content;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* 상단 타이틀 라운드 뱃지 스타일 */
.title-round-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
  border: 1.5px solid #bfdbfe;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  gap: 5px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.title-round-badge:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.16);
  transform: translateY(-1px);
}

.title-round-badge:active {
  transform: scale(0.97);
}

.title-round-badge .header-title {
  font-size: 15px;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin: 0;
}

.header-title-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  transition: transform 0.2s ease;
}

.title-round-badge:hover .header-title-arrow {
  transform: translateY(1.5px);
}

.live-pulse {
  width: 7px;
  height: 7px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: live-pulse-anim 2s infinite;
  flex-shrink: 0;
}

@keyframes live-pulse-anim {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* 실시간 클라우드 동기화 상태 뱃지 (수정 전 원래 모양/크기 100% 복원) */
.sync-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  transition: all 0.25s ease;
  cursor: default;
  white-space: nowrap;
}
.sync-status-badge.offline {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}
.sync-dot {
  width: 6px;
  height: 6px;
  background-color: #22c55e;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: live-pulse-anim 2.5s infinite;
}
.sync-status-badge.offline .sync-dot {
  background-color: #f59e0b;
  animation: none;
}

/* 실시간 아이콘 밑 '방송 중' 뱃지 버튼 (글자에 맞춘 컴팩트 트랙 길이, 실시간 뱃지와 중심축 완벽 일치) */
.onair-status-badge-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  box-sizing: border-box;
  padding: 1.2px;
  background: #fecaca; /* 기본 연한 붉은 트랙 선 */
  border: none;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  line-height: 1;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.onair-status-badge-btn:hover {
  transform: translateY(-0.5px);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18);
}

.onair-status-badge-btn:active {
  transform: scale(0.96);
}

/* 15초 주기 180도 완전 대칭 2점 유성 회전 트랙 (연한 붉은 트랙 위에서 밝은 유성이 돌며 티가 남) */
.onair-status-badge-btn .onair-meteor-track {
  position: absolute;
  inset: -140%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 140deg,
    rgba(239, 68, 68, 0.08) 148deg,
    rgba(239, 68, 68, 0.4) 168deg,
    rgba(239, 68, 68, 0.95) 176deg,
    #ef4444 180deg,
    transparent 180.5deg,
    transparent 320deg,
    rgba(239, 68, 68, 0.08) 328deg,
    rgba(239, 68, 68, 0.4) 348deg,
    rgba(239, 68, 68, 0.95) 356deg,
    #ef4444 360deg
  );
  animation: onair-meteor-orbit 15s linear infinite;
  pointer-events: none;
  border-radius: 50%;
}

@keyframes onair-meteor-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 내부 버튼 콘텐츠 (아주 연한 붉은색 배경, 옅고 차분한 글자색, '실시간' 뱃지와 크기/패딩 완벽 일치) */
.onair-status-badge-btn .onair-badge-text {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #fff5f5; /* 아주 연한 붉은색 배경 */
  border-radius: var(--radius-full, 9999px);
  padding: 2.5px 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #c53030; /* 진하지 않고 옅은 소프트 레드 글자색 */
  letter-spacing: -0.3px;
  transition: color 0.18s ease;
}

.onair-status-badge-btn:hover .onair-badge-text {
  color: #991b1b;
}


/* 실시간 HUD 토스트 알림 (스마트폰 및 PC 화면 정사각형 라운드 카드) */
.app-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.82);
  width: 125px;
  height: 125px;
  aspect-ratio: 1 / 1;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}

.app-toast.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.toast-hud-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 3px;
}

.toast-hud-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.toast-hud-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.toast-hud-desc {
  font-size: 10.5px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.25;
  letter-spacing: -0.2px;
  word-break: keep-all;
}

.icon-btn {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.icon-btn:hover {
  background: #f1f5f9;
  color: var(--text-primary);
  border-color: var(--border-highlight);
}

/* 알림 및 소리 수신 켜짐 (초록색 활성화) */
.icon-btn.sound-on {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
}
.icon-btn.sound-on:hover {
  background: #dcfce7 !important;
  border-color: #4ade80 !important;
  color: #15803d !important;
}

/* 알림 및 소리 수신 꺼짐 (단정한 회색 무음) */
.icon-btn.sound-off {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
  opacity: 0.8 !important;
}
.icon-btn.sound-off:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #64748b !important;
  opacity: 1 !important;
}

/* Month Navigation */
.month-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 8px;
}

.nav-arrow-btn {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.nav-arrow-btn:hover {
  background: #f8fafc;
  border-color: var(--border-highlight);
}

.current-month-display-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.current-month-display-btn:hover {
  background: #f1f5f9;
  border-color: var(--border-color);
}

.current-month-display-btn:active {
  background: #e2e8f0;
}

.month-picker-icon {
  color: #2563eb;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.current-month-display-btn:hover .month-picker-icon {
  transform: scale(1.15);
  color: #1d4ed8;
}

.current-month-display {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.today-chip {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s;
}

.today-chip:hover {
  background: #dbeafe;
}

/* Member Filter Chips Horizontal Scroll */
.member-filter-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0 8px;
  scrollbar-width: none;
}
.member-filter-scroll::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.filter-chip:hover {
  background: #f1f5f9;
  color: var(--text-primary);
}

.filter-chip.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* Filter Divider (안영주 옆에 위치하여 기존 송출 4인과 정비팀을 분리하는 이중 세로선 - 사용자 요구로 간격을 절반으로 축소) */
.filter-divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  height: 20px;
  margin: 0 1px;
  flex-shrink: 0;
  align-self: center;
  padding: 0;
}

.filter-divider::before,
.filter-divider::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 16px;
  background-color: #94a3b8;
  border-radius: 2px;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.08);
}

/* Maintenance Filter Chip */
.filter-chip.chip-maintenance {
  background: #f1f5f9;
  border: 1.5px solid #94a3b8;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.filter-chip.chip-maintenance:hover {
  background: #e2e8f0;
  border-color: #64748b;
  color: #0f172a;
}
.filter-chip.chip-maintenance.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border-color: #0284c7;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}
.chip-maint-icon {
  font-size: 11px;
  line-height: 1;
}

/* Maintenance Modal Styles */
.maintenance-modal-card {
  border-left: 3.5px solid #0284c7 !important;
}
.maint-shift-selector-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
.maint-selector-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
}
.maint-btn-group {
  display: flex;
  gap: 4px;
  width: 100%;
}
.btn-maint-shift {
  flex: 1;
  min-width: 0;
  height: 27px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn-maint-shift:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-maint-shift.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.25);
}
.btn-maint-shift.active[data-shift="일"] {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}
.btn-maint-shift.active[data-shift="휴"] {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.25);
}
.btn-maint-shift.active[data-shift="전반"] {
  background: #f97316;
  border-color: #ea580c;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.25);
}
.btn-maint-shift.active[data-shift="후반"] {
  background: #8b5cf6;
  border-color: #7c3aed;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(139, 92, 246, 0.25);
}
.btn-maint-shift.active[data-shift="비"] {
  background: #10b981;
  border-color: #059669;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.25);
}
.btn-maint-shift.active.is-leave {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.25);
}

/* Legend Bar */
.legend-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 6px;
  padding: 8px 4px 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  letter-spacing: -0.3px;
}

/* 네모 박스 스타일 (미니 뱃지) */
.legend-box {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  background-color: #ffffff;
}

.box-il, .box-ya, .box-jo {
  color: var(--shift-normal-color);
  background-color: var(--shift-normal-bg);
  border-color: var(--shift-normal-border);
}

.box-bi {
  color: var(--shift-bi-color);
  background-color: var(--shift-bi-bg);
  border-color: var(--shift-bi-border);
}

.box-sub {
  color: var(--shift-sub-color);
  background-color: var(--shift-sub-bg);
  border-color: var(--shift-sub-border);
}

.box-leave {
  color: var(--shift-leave-color);
  background-color: var(--shift-leave-bg);
  border-color: var(--shift-leave-border);
}

/* Calendar Wrapper */
.calendar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 10px 12px;
  background: #ffffff;
  position: relative;
  touch-action: pan-y manipulation;
}

/* Calendar Zoom Viewport & Layer (전체 근무 핀치 줌 및 드래그 팬) */
.calendar-zoom-viewport {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  touch-action: pan-y manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.calendar-zoom-viewport.is-zoomed {
  overflow: hidden !important;
  cursor: grab;
  touch-action: none !important;
}

.calendar-zoom-viewport.is-grabbing {
  cursor: grabbing !important;
}

.calendar-zoom-layer {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  will-change: transform;
}

.calendar-zoom-layer.is-animating {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Zoom Controls for '전체 근무' */
.calendar-zoom-controls {
  position: fixed;
  right: max(16px, calc((100vw - 860px) / 2 + 16px));
  bottom: 84px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  padding: 3px 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 90;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  user-select: none;
  -webkit-user-select: none;
}

.calendar-zoom-controls.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(10px);
}

.zoom-ctrl-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.zoom-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.08);
}

.zoom-ctrl-btn:active {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.92);
}

.zoom-level-btn {
  height: 28px;
  padding: 0 9px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  transition: all 0.15s ease;
  letter-spacing: -0.3px;
}

.zoom-level-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.calendar-zoom-controls.is-zoomed .zoom-level-btn {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}

/* Weekday Grid (8열: 1열 근무자 + 2~8열 일~토) */
.weekday-grid {
  display: grid;
  grid-template-columns: minmax(40px, 48px) repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 0 4px;
  margin: 0 0 4px 0;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  position: sticky;
  top: var(--header-height, 94px);
  z-index: 10;
}

.cell-names-header {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.3px;
}

.text-sun { color: #ef4444 !important; }
.text-sat { color: #2563eb !important; }

/* Calendar Days Grid (8열: 1열 주별 4인 이름 + 2~8열 일~토 날짜 셀) */
.calendar-days-grid {
  display: grid;
  grid-template-columns: minmax(40px, 48px) repeat(7, 1fr);
  gap: 4px;
  flex: 1;
}

/* Calendar Month Slide Transitions (사용자 요구: 슬라이드 체감 시간 0.7초로 부드럽게 '샥~' 전환) */
@keyframes calendarSlideFromRight {
  0% {
    opacity: 0.15;
    transform: translate3d(85px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes calendarSlideFromLeft {
  0% {
    opacity: 0.15;
    transform: translate3d(-85px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.calendar-days-grid.slide-from-right {
  animation: calendarSlideFromRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

.calendar-days-grid.slide-from-left {
  animation: calendarSlideFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

@keyframes monthTitleFade {
  0% {
    opacity: 0.2;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.current-month-display.month-change-pulse {
  animation: monthTitleFade 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 1인 개인 근무 보기 모드일 때 7열로 전환 및 세로 화면 가득 채움 (상단 목요일/요일 간격과 대칭되는 쾌적한 하단 공간) */
.calendar-wrapper.single-member-mode {
  padding-bottom: 8px;
}

.calendar-wrapper.single-member-mode .weekday-grid,
.weekday-grid.single-member-mode {
  grid-template-columns: repeat(7, 1fr) !important;
}

.calendar-wrapper.single-member-mode .calendar-days-grid {
  grid-template-columns: repeat(7, 1fr) !important;
  grid-template-rows: repeat(var(--week-count, 5), minmax(0, 1fr)) !important;
  flex: 1;
  height: 100%;
}

/* 🎯 [사용자 요청] 정비 5인(송출부장, 조성기, 전현식, 김천일, 이명주) 달력:
   교대근무자(안영주) 달력처럼 내용(점검계획 최대 3줄, 업무일정, 개인일정)에 따라 셀 크기가 시원하게 늘어나 겹치지 않도록 자동 확장 그리드 적용 */
.calendar-wrapper.maint-member-mode .calendar-days-grid {
  grid-template-columns: repeat(7, 1fr) !important;
  grid-template-rows: repeat(var(--week-count, 5), minmax(min-content, 1fr)) !important;
  flex: 1;
  min-height: 100%;
  height: auto !important;
}

.calendar-wrapper.single-member-mode .day-cell {
  height: 100%;
  min-height: 52px;
}

.calendar-wrapper.maint-member-mode .day-cell {
  height: auto !important;
  min-height: 108px !important;
}

.calendar-wrapper.single-member-mode .cell-names-header,
.weekday-grid.single-member-mode .cell-names-header {
  display: none !important;
}

/* Week Member Header Cell (주별 일요일 앞 좌측 4인 이름 열) */
.week-member-header-cell {
  background: #f8fafc;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  min-height: auto;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  user-select: none;
  opacity: 0.35; /* 비활성 주: 은은하고 흐릿함 */
  filter: grayscale(0.85);
  transition: opacity 0.25s ease, filter 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
  cursor: pointer;
}

.week-member-header-cell:hover {
  opacity: 0.75;
  background: #f1f5f9;
}

/* 활성 주 (Active Week): 또렷하고 선명함 */
.week-member-header-cell.is-active-week {
  opacity: 1 !important;
  filter: none !important;
  background: #ffffff !important;
  border: 1.5px solid #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
}

.member-header-top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  min-height: 24px;
  margin-bottom: 3px;
  border-radius: 4px;
  background-color: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: -0.3px;
}

.week-member-header-cell.is-active-week .member-header-top {
  background-color: #eff6ff !important;
  border-bottom-color: #bfdbfe !important;
  color: #2563eb !important;
  font-weight: 800 !important;
}

.member-header-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  justify-content: flex-start;
}

.member-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 1px 2px;
  border-radius: 3px;
  font-size: 9.5px;
  line-height: 1.25;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.5px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}

.week-member-header-cell.is-active-week .member-name-row {
  color: #0f172a !important; /* 선명하고 또렷함 */
  font-weight: 800 !important;
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* 외부 수동 대근자 행 (5번째 줄) */
.member-name-row.is-custom-sub-row {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
  font-weight: 800 !important;
}

.week-member-header-cell.is-active-week .member-name-row.is-custom-sub-row {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
}

/* Day Cell */
.day-cell {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  min-height: auto;
  padding: 3px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.day-cell:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.day-cell.other-month {
  background: #f1f5f9;
  opacity: 0.45;
}

/* 🌟 오늘(Today) 날짜 셀: 다른 날짜를 클릭해도 파란색 테두리가 항상 고정 유지 */
.day-cell.today {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 1.5px #2563eb, 0 2px 8px rgba(37, 99, 235, 0.15) !important;
  background-color: #f8faff !important;
  z-index: 4;
}

/* 상단 날짜 영역 (주간 52시간 근무현황 보기 전용 터치 영역) */
.day-cell-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  min-height: 24px;
  padding: 1px 4px;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease, color 0.15s ease;
  margin-bottom: 3px; /* 전체 근무: 업무 공지 공간 공백 삭제 */
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.day-cell-top:hover {
  background-color: #f1f5f9;
}

.day-cell-top:active {
  background-color: #dbeafe !important;
}

.day-cell.today .day-cell-top {
  background-color: #eff6ff !important;
  border-bottom-color: #bfdbfe !important;
}

.day-cell.today .day-num {
  color: #1d4ed8 !important;
  font-weight: 800;
}

.day-num-wrap {
  display: flex;
  align-items: center;
  gap: 3.5px;
  min-width: 0;
}

.day-num {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.day-cell.is-sun .day-num { color: #ef4444; }
.day-cell.is-sat .day-num { color: #2563eb; }

/* 공휴일 / 대체공휴일 / 방송국 특별 휴일: 날짜 숫자 빨간색 (토요일이라도 빨간색 적용) */
.day-cell.is-holiday .day-num {
  color: #ef4444 !important;
}

/* 숫자 옆 공휴일 명칭 뱃지 (대한민국 달력 표기) */
.badge-holiday-name {
  font-size: 9.5px;
  font-weight: 800;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 0 3px;
  border-radius: 3px;
  line-height: 14px;
  letter-spacing: -0.3px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

/* 4글자 (예: 방송의 날, 추석연휴) - 3글자 공간 폭으로 축소 */
.badge-holiday-name.len-4 {
  font-size: 8px;
  letter-spacing: -0.6px;
  padding: 0 2px;
}

/* 5글자 이상 (예: 창사기념일, 노조창립일, 석가탄신일) - 3글자 공간 폭으로 대폭 축소 */
.badge-holiday-name.len-5 {
  font-size: 7px;
  letter-spacing: -0.7px;
  padding: 0 1.5px;
}

.badge-today-mark {
  background: #2563eb;
  color: #ffffff;
  font-size: 7.5px;
  font-weight: 800;
  padding: 0.5px 2.5px;
  border-radius: 2.5px;
  line-height: 1;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 날짜 숫자와 근무 아이콘 사이의 업무 공지 바 */
.cell-work-notice-bar {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 6px);
  padding: 0 7px;
  height: 12.5px;
  line-height: 12.5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  box-sizing: border-box;
  transform-origin: center center;
  will-change: transform, box-shadow;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 3;
}

/* 1) 미확인(새 공지) 상태: 하늘색 + 살아서 조금씩 커졌다 작아졌다 하는 유기적 호흡 애니메이션 */
.cell-work-notice-bar.unread {
  background-color: #e0f2fe;
  color: #0284c7;
  border: 1px solid #7dd3fc;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.2);
  animation: workNoticePulse 1.8s ease-in-out infinite;
}

.cell-work-notice-bar.unread:hover {
  background-color: #bae6fd;
  color: #0369a1;
  border-color: #38bdf8;
}

/* 2) 확인(읽음) 완료 상태: 차분한 회색 + 움직임 완전 정지 */
.cell-work-notice-bar.read {
  background-color: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  box-shadow: none;
  animation: none !important;
  transform: scale(1) !important;
}

.cell-work-notice-bar.read:hover {
  background-color: #e2e8f0;
  color: #475569;
  border-color: #94a3b8;
}

/* 미확인 시 살아 움직이듯 부드럽게 커졌다 작아졌다 하는 펄스 애니메이션 */
@keyframes workNoticePulse {
  0%, 100% {
    transform: scale(0.95);
    background-color: #e0f2fe;
    border-color: #7dd3fc;
    color: #0284c7;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.2);
  }
  50% {
    transform: scale(1.05);
    background-color: #bae6fd;
    border-color: #38bdf8;
    color: #0369a1;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.45), 0 2px 5px rgba(2, 132, 199, 0.25);
  }
}

/* 긴급 공지 미확인 상태: 연붉은색 + 호흡 펄스 */
.cell-work-notice-bar.unread.urgent {
  background-color: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2);
  animation: urgentNoticePulse 1.6s ease-in-out infinite;
}

@keyframes urgentNoticePulse {
  0%, 100% {
    transform: scale(0.95);
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2);
  }
  50% {
    transform: scale(1.05);
    background-color: #fecaca;
    border-color: #f87171;
    color: #b91c1c;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 2px 5px rgba(220, 38, 38, 0.3);
  }
}

/* 모달 내 긴급 체크박스 라벨 */
.memo-urgent-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 3px 6px;
  border-radius: 6px;
  user-select: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.memo-urgent-checkbox-label:hover {
  background: #fee2e2;
  border-color: #f87171;
}

.memo-urgent-checkbox {
  cursor: pointer;
  accent-color: #dc2626;
  width: 13px;
  height: 13px;
  margin: 0;
}

@media (max-width: 480px) {
  .cell-work-notice-bar {
    font-size: 8px;
    padding: 0.5px 5.5px;
    margin: 2.5px auto 3.5px auto;
    letter-spacing: -0.5px;
    width: fit-content;
    max-width: calc(100% - 4px);
  }
  @keyframes workNoticePulse {
    0%, 100% {
      transform: scale(0.95);
      background-color: #e0f2fe;
      border-color: #7dd3fc;
      color: #0284c7;
      box-shadow: 0 1px 2px rgba(2, 132, 199, 0.18);
    }
    50% {
      transform: scale(1.04);
      background-color: #bae6fd;
      border-color: #38bdf8;
      color: #0369a1;
      box-shadow: 0 0 6px rgba(14, 165, 233, 0.4);
    }
  }
  @keyframes urgentNoticePulse {
    0%, 100% {
      transform: scale(0.95);
      background-color: #fee2e2;
      border-color: #fca5a5;
      color: #dc2626;
      box-shadow: 0 1px 2px rgba(220, 38, 38, 0.18);
    }
    50% {
      transform: scale(1.04);
      background-color: #fecaca;
      border-color: #f87171;
      color: #b91c1c;
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
    }
  }
}

/* 🔮 [사용자 요청] 클릭하여 선택한 날짜: 가느다란 옅은 보라색 1px 단일 테두리 (기존 두께의 1/3, 1분 후 자동 소멸) */
.day-cell.is-selected-day:not(.today) {
  border-color: #c084fc !important; /* 옅고 부드러운 연보라색 단일 테두리 (기존 1.5px spread 링 제거로 1/3 두께) */
  box-shadow: 0 1px 3px rgba(192, 132, 252, 0.15) !important;
  background-color: #faf5ff !important;
  z-index: 5;
}

.day-cell.is-selected-day:not(.today) .day-cell-top {
  background-color: #f5f3ff !important;
  border-bottom-color: #ede9fe !important;
}

.day-cell.is-selected-day:not(.today) .day-num {
  color: #9333ea !important;
}

/* 오늘 날짜를 클릭한 경우: 오늘 파란색 고정 테두리 유지 + 연보라빛 은은한 배경 공존 */
.day-cell.today.is-selected-day {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 1.5px #2563eb, 0 2px 8px rgba(37, 99, 235, 0.15) !important;
  background-color: #f5f3ff !important;
  z-index: 6;
}

.day-cell.today.is-selected-day .day-cell-top {
  background-color: #eff6ff !important;
  border-bottom-color: #bfdbfe !important;
}

/* 활성 주간(in-active-week) 주변 날짜 다중 선택 착시 방지: 날짜 셀 배경색 일괄 변경 비활성화 (선택한 날짜만 단일 하이라이트) */
.day-cell.in-active-week {
  /* 주변 날짜 다중 선택 착시 방지를 위해 기본 배경색 유지 */
}

/* Compact Shift Badges inside day cell */
.day-shift-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

.day-shift-list:active {
  opacity: 0.8;
}

.shift-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 2px;
  border-radius: 3px;
  font-size: 9.5px;
  line-height: 1.25;
  font-weight: 700;
  background-color: #ffffff;
  border: 1px solid currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.shift-pill:hover {
  transform: scale(1.02);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.shift-pill:active {
  transform: scale(0.97);
}

.shift-pill.pill-il,
.shift-pill.pill-ya,
.shift-pill.pill-jo {
  color: var(--shift-normal-color);
  background-color: var(--shift-normal-bg);
  border: 1px solid var(--shift-normal-border);
}
.shift-pill.pill-bi {
  color: var(--shift-bi-color);
  background-color: var(--shift-bi-bg);
  border: 1px solid var(--shift-bi-border);
  opacity: 0.72;
}

.shift-pill.is-leave {
  color: var(--shift-leave-color) !important;
  background-color: var(--shift-leave-bg) !important;
  border: 1px solid var(--shift-leave-border) !important;
  font-weight: 800 !important;
  opacity: 0.95;
}

.shift-pill .pill-half-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.92;
  font-size: 7.2px;
  font-weight: 800;
  letter-spacing: -0.6px;
  padding: 0;
  margin: 0;
}

.shift-pill .pill-half-wrap span {
  display: block;
  line-height: 0.92;
}

.shift-pill.is-substitute {
  color: var(--shift-sub-color) !important;
  background-color: var(--shift-sub-bg) !important;
  border: 1px solid var(--shift-sub-border) !important;
  font-weight: 800 !important;
}

.shift-pill.has-member {
  justify-content: center;
  gap: 2.5px;
  padding: 1px 3px;
}

.shift-pill-member {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.3px;
  flex: 0 1 auto;
  max-width: calc(100% - 17px);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a !important; /* 왼쪽에 조원 이름들 나와 있는 것과 동일한 선명한 까만색 */
}

.shift-pill.is-substitute .shift-pill-member {
  color: #0f172a !important; /* 대근자라도 이름은 좌측 조원명과 같은 깔끔한 검정색 */
}


.shift-pill-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 1.5px;
  border-radius: 2.5px;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  border: 1px solid currentColor;
  background-color: #ffffff;
  box-sizing: border-box;
}

.shift-pill.pill-il .shift-pill-type,
.shift-pill.pill-ya .shift-pill-type,
.shift-pill.pill-jo .shift-pill-type {
  color: var(--shift-normal-color);
  border-color: var(--shift-normal-border);
  background-color: #ffffff;
}

.shift-pill.pill-bi .shift-pill-type {
  color: #10b981;
  border-color: #a7f3d0;
  background-color: #ffffff;
}

.shift-pill.is-leave .shift-pill-type {
  color: var(--shift-leave-color) !important;
  border-color: var(--shift-leave-border) !important;
  background-color: #ffffff !important;
}

.shift-pill.is-substitute .shift-pill-type {
  color: var(--shift-sub-color) !important;
  border-color: var(--shift-sub-border) !important;
  background-color: #ffffff !important;
}

/* Dual Mini Tags inside Shift Pill (복합 대근: [이  일 + 야]) */
.dual-tags-wrap {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  flex-shrink: 0;
}

.mini-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13px;
  height: 13px;
  padding: 0 1.5px;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid currentColor;
  background-color: #ffffff;
  letter-spacing: -0.2px;
}

.mini-tag.tag-il,
.mini-tag.tag-jo,
.mini-tag.tag-ya {
  color: var(--shift-normal-color);
  border-color: var(--shift-normal-border);
  background-color: #ffffff;
}

.mini-tag.tag-sub {
  color: var(--shift-sub-color);
  border-color: var(--shift-sub-border);
  background-color: #ffffff;
}

.mini-half-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.9;
  font-size: 5.5px;
  font-weight: 800;
  letter-spacing: -0.5px;
  padding: 0;
  margin: 0;
}

.mini-half-wrap span {
  display: block;
  line-height: 0.9;
}

.mini-tag-plus {
  font-size: 8px;
  font-weight: 900;
  color: #ea580c;
  line-height: 1;
  margin: 0 0.5px;
}

/* Single Member Focus View inside Day Cell (Outline Box Style) */
.day-cell.single-view {
  display: flex;
  flex-direction: column;
  padding: 4px;
  padding-bottom: 18px; /* 개인 일정이 있든 없든 하단 1줄 일정 공간 항시 확보 */
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.day-cell.single-view .day-cell-top {
  margin-bottom: 21px; /* 1인 개인 캘린더: 상단 공지 공간 유지 */
}

/* 🎯 [사용자 요구] 정비일정 탭 달력만 위쪽 업무 공지 공간 및 아래쪽 개인 일정 공간 완전 해제 */
.calendar-wrapper.maint-tab-mode .day-cell.single-view,
.day-cell.single-view.maint-facility-cell {
  padding-bottom: 4px !important; /* 하단 개인일정 공간 해제 */
}

.calendar-wrapper.maint-tab-mode .day-cell.single-view .day-cell-top,
.day-cell.single-view.maint-facility-cell .day-cell-top {
  margin-bottom: 2px !important; /* 상단 업무공지 공간 해제 */
}

.calendar-wrapper.maint-tab-mode .day-cell.single-view .single-shift-wrap,
.day-cell.single-view.maint-facility-cell .single-shift-wrap {
  justify-content: flex-start !important;
  padding: 0 !important;
}

.calendar-wrapper.maint-tab-mode .day-cell.single-view .cell-facility-plan-list,
.day-cell.single-view.maint-facility-cell .cell-facility-plan-list {
  margin-top: 4px !important; /* 2px 밑으로 이동 */
  gap: 1.5px !important;
}

/* 🎯 [사용자 요구] 정비팀 5인(송출부장, 조성기, 정현식, 김천일, 이명주) 개인 달력:
   일근/비번(B) 등의 배지를 약 1/4 크기로 줄여 날짜 밑 좌측 상단에 약간의 여백(약 4~5px)을 두고 배치,
   하단에는 업무일정 2줄 + 개인일정 2줄 (총 4줄) 공간 항시 확보 */
.calendar-wrapper.maint-member-mode .day-cell.single-view,
.day-cell.single-view.maint-member-cell {
  padding: 3px !important;
  padding-bottom: 52px !important; /* 하단 업무일정 2줄(위) + 개인일정 2줄(아래) 총 4줄 공간 항시 확보 */
}

.calendar-wrapper.maint-member-mode .day-cell.single-view .day-cell-top,
.day-cell.single-view.maint-member-cell .day-cell-top {
  margin-bottom: 2px !important; /* 상단 날짜 바로 아래에 위치 */
}

.calendar-wrapper.maint-member-mode .day-cell.single-view.has-work-notice .day-cell-top,
.day-cell.single-view.maint-member-cell.has-work-notice .day-cell-top {
  margin-bottom: 2px !important; /* 공지가 있어도 배지가 아래로 밀려나지 않고 원래 위치 유지 */
}

/* 정비 5인 달력: 업무 공지 바는 근무 박스 높이 기준선과 수평 중심을 완벽히 맞추고(top: 28px, height: 16px),
   확대/축소(커졌다 작아졌다) 애니메이션 시에도 좌측 근무 박스를 절대 침범하지 않도록 안전 간격(left: 24px)을 확보 */
.calendar-wrapper.maint-member-mode .day-cell.single-view .cell-work-notice-bar,
.day-cell.single-view.maint-member-cell .cell-work-notice-bar {
  position: absolute !important;
  top: 33px !important; /* 2px 추가 하향 조정 (top: 33px) */
  left: 24px !important; /* 좌측 근무 박스와 안전 거리 확보하여 확대 시에도 침범 차단 */
  right: 2px !important;   /* 셀 우측 끝까지의 영역 지정 */
  margin: 0 auto !important; /* 좌우 여분 공간의 정중앙에 자동 위치 */
  width: fit-content !important;
  max-width: calc(100% - 28px) !important;
  height: 16px !important;
  line-height: 16px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  padding: 0 4px !important; /* 글자와 박스 간격을 콤팩트하게 유지 */
  border-radius: 3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  transform-origin: center center !important;
}

.calendar-wrapper.maint-member-mode .day-cell.single-view .single-shift-wrap,
.day-cell.single-view.maint-member-cell .single-shift-wrap {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  min-height: 19px !important;
  margin-bottom: 7px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.calendar-wrapper.maint-member-mode .day-cell.single-view .single-shift-badge,
.day-cell.single-view.maint-member-cell .single-shift-badge {
  width: auto !important;
  min-width: 16px !important; /* 90% 크기 (10% 축소) */
  height: 16px !important; /* 90% 크기 (10% 축소) */
  padding: 0 3px !important;
  margin: 0 !important;
  margin-left: -2px !important; /* 왼쪽으로 2px 추가 이동 */
  font-size: 8.5px !important;
  font-weight: 800 !important;
  border-radius: 3px !important;
  border-width: 1.2px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.calendar-wrapper.maint-member-mode .day-cell.single-view .single-shift-badge:hover,
.day-cell.single-view.maint-member-cell .single-shift-badge:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.calendar-wrapper.maint-member-mode .day-cell.single-view .single-shift-badge:active,
.day-cell.single-view.maint-member-cell .single-shift-badge:active {
  transform: scale(0.92) !important;
}

.single-shift-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

/* 1인 보기 모드: 업무 공지 바는 날짜 및 근무 박스와 최소 5px 공백을 유지하며 중앙 배치 */
.day-cell.single-view .cell-work-notice-bar {
  position: absolute;
  top: 29px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 6px);
  height: 12.5px;
  line-height: 12.5px;
  padding: 0 6px;
  z-index: 3;
}

/* 1인 보기 모드: 개인 일정 2줄 표기 (맨 밑 2줄 고정: line-1 윗줄 14px, line-2 아랫줄 2px) */
/* 🎯 사용자 규칙: 개인일정이 1건뿐이어도 윗줄(14px)에 고정되며 업무일정이 없어도 위로 이동하지 않음 */
.day-cell.single-view .cell-personal-schedule-line {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 6px);
  height: 11px;
  line-height: 11px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
  z-index: 4;
}
.day-cell.single-view .cell-personal-schedule-line.line-1 {
  bottom: 14px !important;
}
.day-cell.single-view .cell-personal-schedule-line.line-2 {
  bottom: 2px !important;
}

/* 🎯 [사용자 절대 규칙] 송출 교대근무자 4인 (이준희, 최혜진, 오승연, 안영주) 개인 달력 셀:
   - 개인 일정은 맨 마지막 줄(bottom: 2px)에 딱 1줄만 표기
   - 정렬은 가운데 정렬이 아니라 앞쪽(좌측)에 맞춰서 정렬 (text-align: left) */
.calendar-wrapper.shift-worker-mode .day-cell.single-view .cell-personal-schedule-line,
.day-cell.single-view.shift-worker-cell .cell-personal-schedule-line,
.day-cell.single-view.shift-worker-cell .cell-personal-schedule-line.line-1 {
  bottom: 2px !important;
  left: 4px !important;
  right: 4px !important;
  margin: 0 !important;
  width: calc(100% - 8px) !important;
  max-width: calc(100% - 8px) !important;
  text-align: left !important;
  padding-left: 1px !important;
}

/* 1인 보기 모드: 업무 일정 2줄 표기 (개인 일정 위 2줄: line-1 윗줄 39px, line-2 아랫줄 27px) */
/* 🎯 사용자 규칙: 첫 번째 입력(국부장회의 등)이 윗줄(39px), 두 번째 입력(팀장회의 등)이 아랫줄(27px) 고정 */
.day-cell.single-view .cell-duty-schedule-line {
  position: absolute;
  bottom: 39px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 6px);
  height: 11px;
  line-height: 11px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #0284c7;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
  z-index: 4;
}
.day-cell.single-view .cell-duty-schedule-line.line-1 {
  bottom: 39px !important;
}
.day-cell.single-view .cell-duty-schedule-line.line-2 {
  bottom: 27px !important;
}

/* 🛠️ [사용자 절대 규칙] 정비 4인 (조성기, 전현식, 김천일, 이명준) 달력 셀:
   - 개인 일정과 업무 일정이 더 밑으로 내려옴
   - 맨 밑 자리: 개인 일정(개인 메모) 1줄 고정 (bottom: 2px)
   - 그 윗자리: 업무 일정 1줄 고정 (bottom: 15px)
   - 일정이 있건 없건 자리는 항상 픽스 (위아래 이동 없음)
   - 글자 크기/굵기/스타일은 송출부장과 100% 동일하게 일치 */
.day-cell.single-view.maint-worker-cell .cell-duty-schedule-line,
.day-cell.single-view.maint-worker-cell .cell-duty-schedule-line.line-1 {
  bottom: 15px !important;
}

.day-cell.single-view.maint-worker-cell .cell-personal-schedule-line,
.day-cell.single-view.maint-worker-cell .cell-personal-schedule-line.line-1 {
  bottom: 2px !important;
}

/* 🎯 [사용자 절대 규칙] 정비 근무자 5인 (우건제, 조성기, 전현식, 김천일, 이명주) 달력 셀:
   - 개인일정과 업무일정 모두 맨 앞쪽(좌측)에서부터 정렬 (text-align: left) */
.calendar-wrapper.maint-member-mode .day-cell.single-view .cell-duty-schedule-line,
.calendar-wrapper.maint-member-mode .day-cell.single-view .cell-personal-schedule-line,
.day-cell.single-view.maint-member-cell .cell-duty-schedule-line,
.day-cell.single-view.maint-member-cell .cell-personal-schedule-line {
  left: 4px !important;
  right: 4px !important;
  margin: 0 !important;
  width: calc(100% - 8px) !important;
  max-width: calc(100% - 8px) !important;
  text-align: left !important;
  padding-left: 1px !important;
}

/* 📺 정비 인력(조성기, 정현식, 김천일, 이명준) 개인 달력 셀: 해당일 시설/TVR 점검 표시 라인
   🎯 [사용자 절대 규칙] 상단 근무 박스 및 업무 공지 박스 영역을 어떤 경우에도 침범하지 않으면서,
   일정이 많아지면 셀 높이가 유연하게 늘어나도록 relative 레이아웃 적용 */
.cell-tvr-plan-wrap {
  position: relative !important;
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important; /* 위에서 아래로 차례대로 배치 */
  gap: 2px !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 4;
  pointer-events: auto;
  box-sizing: border-box;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.cell-tvr-plan-line {
  display: block;
  width: 100%;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  padding: 0 1px;
  box-sizing: border-box;
  text-align: center;
  transition: opacity 0.15s ease;
}

/* 🎯 [사용자 절대 규칙] 송신소 정비1(조성기, 슬롯 1), 정비2(정현식, 슬롯 2) 달력 셀:
   - 시설 점검 계획(우암, 청원, 청원전기대행 등) 텍스트를 글자 수 무관하게 모두 맨 앞쪽(좌측) 정렬 */
.calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line,
.calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line.is-medium-text,
.calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line.is-long-text,
.day-cell.single-view.maint-station-cell .cell-tvr-plan-line,
.day-cell.single-view.maint-station-cell .cell-tvr-plan-line.is-medium-text,
.day-cell.single-view.maint-station-cell .cell-tvr-plan-line.is-long-text,
.calendar-wrapper.maint-station-mode .cell-tvr-plan-line,
.day-cell.maint-station-cell .cell-tvr-plan-line,
.cell-tvr-plan-line.station-plan-left,
.cell-tvr-plan-line.station-plan-left.is-medium-text,
.cell-tvr-plan-line.station-plan-left.is-long-text {
  text-align: left !important;
  padding-left: 2px !important;
}

.calendar-wrapper.maint-station-mode .cell-tvr-plan-wrap,
.day-cell.maint-station-cell .cell-tvr-plan-wrap {
  align-items: stretch !important;
}

/* 🎯 [사용자 요구] 정비 일정 탭(maint-tab-mode): 글자 수 무관하게 모두 앞쪽(좌측) 정렬 */
.calendar-wrapper.maint-tab-mode .cell-facility-plan-text,
.calendar-wrapper.maint-tab-mode .cell-facility-plan-text.is-medium-text,
.calendar-wrapper.maint-tab-mode .cell-facility-plan-text.is-long-text {
  text-align: left !important;
}

/* PC: 8글자까지는 가운데 정렬, 8글자 초과(is-long-text)는 앞쪽(좌측) 정렬 (정비 일정 탭 제외) */
.cell-tvr-plan-line.is-long-text,
.cell-facility-plan-text.is-long-text {
  text-align: left !important;
}

.cell-tvr-plan-line.is-medium-text,
.cell-facility-plan-text.is-medium-text {
  text-align: center !important; /* PC에서는 6~8글자도 가운데 정렬 */
}

.cell-tvr-plan-line:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* 정비 1인 모달 팝업 내 인라인 근무 선택 셀렉트 (이름 옆 1줄 배치) */
.maint-shift-inline-select {
  height: 25px;
  line-height: 23px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 0 6px;
  border: 1.5px solid #cbd5e1;
  background-color: #ffffff;
  color: #334155;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
}
.maint-shift-inline-select:hover {
  border-color: #0284c7;
}
.maint-shift-inline-select:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}
.maint-shift-inline-select.shift-sub {
  border-color: #ea580c;
  color: #ea580c;
  background-color: #fff7ed;
}
.maint-shift-inline-select.shift-il {
  border-color: #cbd5e1;
  color: #475569;
  background-color: #f8fafc;
}
.maint-shift-inline-select.shift-hu {
  border-color: #dc2626;
  color: #dc2626;
  background-color: #fef2f2;
}
.maint-shift-inline-select.shift-jeon {
  border-color: #f97316;
  color: #ea580c;
  background-color: #fff7ed;
}
.maint-shift-inline-select.shift-hu2 {
  border-color: #8b5cf6;
  color: #7c3aed;
  background-color: #f5f3ff;
}
.maint-shift-inline-select.shift-bi {
  border-color: #10b981;
  color: #059669;
  background-color: #f4fbf8;
}

/* 송출부장(슬롯 0) 모달 상단 1줄 초슬림 본인 카드 */
.chief-single-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid #0284c7;
  border-radius: 10px;
  padding: 7px 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08);
  box-sizing: border-box;
}
.chief-single-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 📺 김천일, 이명준 모달 팝업 전용 TVR 점검 계획 섹션 (본인 카드와 하단 그리드 사이) */
.member-modal-tvr-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  padding: 8px 10px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.member-modal-tvr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px dashed #cbd5e1;
}

.member-modal-tvr-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #0369a1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.member-modal-tvr-badge {
  font-size: 10px;
  font-weight: 800;
  color: #0284c7;
  background: #e0f2fe;
  padding: 1px 6px;
  border-radius: 10px;
}

.member-modal-tvr-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.btn-tvr-add-toggle {
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
}
.btn-tvr-add-toggle:hover {
  background: #0369a1;
}

.tvr-plan-add-form {
  background: #ffffff;
  border: 1.5px solid #0284c7;
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.08);
}

.member-modal-tvr-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

.maint-plan-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.maint-plan-card-memo-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
  box-sizing: border-box;
}

.maint-plan-memo-tag {
  font-size: 11px;
  font-weight: 800;
  color: #0284c7;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-top: 5px;
}

.input-tvr-plan-memo {
  flex: 1;
  min-height: 28px;
  height: 28px;
  line-height: 1.45;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11.5px;
  outline: none;
  background: #f8fafc;
  color: #1e293b;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
}

.input-tvr-plan-memo:focus {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

/* 📡 김천일, 이명준 모달: 송출센터 실시간 근무자 (현재 시간) 단일 섹션 */
.member-modal-onair-worker-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  padding: 8px 10px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.onair-worker-header {
  font-size: 11.5px;
  font-weight: 800;
  color: #0284c7;
  padding-bottom: 4px;
  border-bottom: 1px dashed #cbd5e1;
}

.onair-worker-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 7px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.onair-worker-card.onair-center-card {
  background: #f0fdf4;
  border-color: #86efac;
}

.btn-onair-center-call {
  background: #16a34a !important;
}

.btn-onair-center-call:hover {
  background: #15803d !important;
}

.btn-onair-worker-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-onair-worker-call:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

/* 📞 정비팀 / 송출부장 / 동료 카드 소형 통화 버튼 */
.btn-mini-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.btn-mini-call:hover {
  background: linear-gradient(135deg, #0369a1, #0284c7);
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.45);
}
.btn-mini-call:active {
  transform: scale(0.95);
}

.btn-onair-worker-call:active {
  transform: scale(0.96);
}

/* 송출부장 및 정비팀 모달 하단 2열 대칭 그리드 */
.maint-chief-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
@media (max-width: 480px) {
  .maint-chief-dual-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}
.maint-chief-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.maint-chief-col-header {
  padding: 4px 6px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.3px;
}
.maint-chief-col-header.songchul-header {
  color: #0369a1;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
}
.maint-chief-col-header.maint-header {
  color: #0f766e;
  background-color: #f0fdfa;
  border: 1px solid #99f6e4;
}

/* 초슬림 1줄 카드 (좌우 4개씩 완벽한 대칭 및 동일 높이) */
.maint-chief-slim-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 7px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.maint-chief-slim-card:hover {
  border-color: #cbd5e1;
  background-color: #f8fafc;
}
.maint-chief-slim-card .member-name-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.maint-chief-slim-card .member-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
.maint-chief-slim-card .member-shift-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1.5px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.maint-chief-slim-card .member-modal-stat-pill {
  padding: 1.5px 5px;
  font-size: 10.5px;
  height: 20px;
  line-height: 20px;
}

.day-cell.single-view .single-shift-badge {
  width: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  margin: auto auto;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  background-color: #ffffff;
  border: 1.5px solid currentColor;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.day-cell.single-view .single-shift-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.day-cell.single-view .single-shift-badge:active {
  transform: scale(0.95);
}

.day-cell.single-view .single-shift-badge .single-half-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.95;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: -0.7px;
  padding: 0;
  margin: 0;
}

.day-cell.single-view .single-shift-badge .single-half-wrap span {
  display: block;
  line-height: 0.95;
}

/* Dual Shift Badge Container for Single View (e.g. [조] + [야대]) */
.single-double-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: auto auto;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease;
}

.single-double-badge-wrap:hover .single-shift-badge {
  transform: scale(1.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.single-double-badge-wrap:active {
  transform: scale(0.96);
}

.single-double-badge-wrap .single-shift-badge {
  margin: 0;
  height: 17px;
  min-width: 21px;
  font-size: 9px;
  padding: 0 4px;
  border-width: 1.2px;
  border-radius: 4px;
}

.single-badge-plus {
  font-size: 8px;
  font-weight: 900;
  color: #94a3b8;
  line-height: 1;
}

/* Siren alert badge next to day number */
.day-num-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* 달력 날짜 셀 상단 경광등 (하단 근무 박스와 일치하도록 중앙 배치, 글자/숫자 위치 유지) */
.badge-siren {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0 !important;
  animation: siren-pulse 0.85s infinite alternate;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
}

@keyframes siren-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.92);
    filter: drop-shadow(0 0 1px rgba(239, 68, 68, 0.4));
  }
  100% {
    transform: translate(-50%, -50%) scale(1.22);
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.95));
  }
}

.day-cell.has-unassigned {
  border-color: #fca5a5 !important;
  background-color: #fffbfa;
}

/* Alert Unassigned row inside modal */
.alert-unassigned-row {
  background: #fef2f2 !important;
  border: 1px dashed #ef4444 !important;
  border-radius: var(--radius-sm);
  padding: 8px 10px !important;
}

.alert-siren-icon {
  margin-right: 4px;
}

.unassigned-hint-text {
  font-size: 11px;
  color: #dc2626;
  display: block;
  margin-top: 3px;
  font-weight: 600;
  line-height: 1.35;
}

/* Modal 24-Hour Coverage Alert Card (상단 전용 경광등 & 대근 수동 지정 통합 카드) */
.modal-coverage-alert-card {
  background: #fef2f2;
  border: 1.5px solid #f87171;
  border-radius: var(--radius-md);
  padding: 8px 11px;
  margin-bottom: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.08);
  word-break: keep-all;
}

.coverage-card-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.coverage-title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.coverage-siren-icon {
  font-size: 15px;
  animation: siren-pulse-modal 0.85s infinite alternate;
  display: inline-block;
  line-height: 1;
}

@keyframes siren-pulse-modal {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.25);
  }
}

.coverage-main-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #b91c1c;
  white-space: nowrap;
}

.coverage-time-tag {
  font-size: 11px;
  font-weight: 700;
  color: #991b1b;
  white-space: nowrap;
}

.coverage-reason-badge {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  font-size: 10px;
  font-weight: 700;
  padding: 1.5px 5.5px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.coverage-card-action {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

.coverage-action-label {
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  white-space: nowrap;
}

.coverage-sub-select {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  font-size: 11.5px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  padding: 2px 0;
  cursor: pointer;
}

/* Custom Substitute Dropdown for Coverage Card */
.custom-sub-dropdown {
  position: relative;
  flex: 1;
  min-width: 0;
}

.custom-sub-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 3px 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  outline: none;
  font-family: inherit;
}

.custom-sub-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-sub-chevron {
  font-size: 8.5px;
  color: #94a3b8;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 2px;
}

.custom-sub-dropdown.is-open .custom-sub-chevron {
  transform: rotate(180deg);
}

.custom-sub-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - 60px);
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18), 0 8px 10px -6px rgba(15, 23, 42, 0.12);
  z-index: 1100;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
  display: none;
  animation: dropdown-pop 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdown-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-sub-item {
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.12s;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.custom-sub-item:not(.is-disabled):hover {
  background-color: #f1f5f9;
}

.custom-sub-item.is-disabled {
  color: #475569 !important;
  font-style: italic !important;
  cursor: not-allowed !important;
}

.custom-sub-item.is-sub {
  color: #ea580c !important;
  font-weight: 700 !important;
}

.custom-sub-item.is-custom {
  color: #2563eb !important;
  font-weight: 700 !important;
  border-top: 1px solid #f1f5f9;
  margin-top: 2px;
  padding-top: 8px;
}

/* Native select fallback */
.coverage-sub-select option:disabled,
.coverage-sub-select option[disabled],
.select-sub-manual option:disabled,
.select-sub-manual option[disabled] {
  color: #475569 !important;
  font-style: italic !important;
}

.coverage-custom-row {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.badge-off-tag {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
  padding: 5px 10px;
  background: #f1f5f9;
  border-radius: var(--radius-sm);
  border: 1px solid #cbd5e1;
  display: inline-block;
}

/* Bottom Weekly 52-Hour Work Dashboard */
.bottom-stats-bar {
  background: #f1f5f9;
  border-top: 1.5px solid #e2e8f0;
  padding: 10px 16px max(12px, calc(10px + env(safe-area-inset-bottom, 0px)));
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.04);
  position: sticky;
  bottom: 0;
  z-index: 25;
  transition: all 0.25s ease;
}

/* 🛠️ 정비팀 5인 근무자 달력 바 전용 스타일 (상단 필터 바와 1:1 완벽 대칭 및 쾌적한 여백) */
.bottom-stats-bar.maint-bottom-stats-bar {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 12px;
  padding-bottom: max(14px, calc(12px + env(safe-area-inset-bottom, 0px)));
  min-height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.maint-bottom-members-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
}
.maint-bottom-members-wrap::-webkit-scrollbar {
  display: none;
}

/* 정비팀 근무자 칩 스타일 (상단 필터 칩과 크기, 폰트, 라운드 완벽 일치) */
.filter-chip.maint-member-chip,
.maint-member-chip {
  flex-shrink: 0;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* 사용자 요구: 선택되지 않았을 때는 배경이 없는 상태(투명) */
  background: transparent !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: none !important;
  transition: all 0.18s ease;
}

/* 사용자 요구: 선택되지 않은 칩에 마우스가 갔을 때(hover)만 하얀색으로 반전 */
.filter-chip.maint-member-chip:not(.active):hover,
.maint-member-chip:not(.active):hover {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 사용자 요구: 클릭(선택) 시 상단 정비팀 칩과 동일한 배경 색상(오션 블루 그라디언트) 적용 */
.filter-chip.maint-member-chip.active,
.maint-member-chip.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

.filter-chip.maint-member-chip.active:hover,
.maint-member-chip.active:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* 우건제: 상단 송출센터(4글자)와 1:1 대칭 크기 보장 (기본 최소너비 74px) */
.filter-chip.maint-member-chip.chip-match-all,
.maint-member-chip.chip-match-all {
  min-width: 74px;
}

/* 🎯 [사용자 요청] 이명주 탭 옆 '정비메모' 탭 (글자 제외, 아담한 네모 메모장 앱 아이콘 형태) */
.filter-chip.maint-doc-chip,
.maint-doc-chip {
  flex-shrink: 0;
  text-align: center;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  background-color: #e0f2fe !important; /* 옅은 하늘색 (Light Sky Blue) */
  border: 1px solid #7dd3fc !important; /* 화사하고 깔끔한 하늘색 테두리 */
  color: #0284c7 !important; /* 또렷하고 세련된 딥 스카이블루 */
  border-radius: 7px !important; /* 🎯 [사용자 요청] 아담한 정사각형 네모 앱 아이콘 */
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.15) !important;
}

.maint-doc-notepad-icon {
  width: 17px;
  height: 17px;
  display: block;
  stroke: currentColor;
  stroke-width: 2.1;
  transition: transform 0.15s ease;
}

.filter-chip.maint-doc-chip:hover .maint-doc-notepad-icon,
.maint-doc-chip:hover .maint-doc-notepad-icon {
  transform: scale(1.08);
}

.filter-chip.maint-doc-chip:hover,
.maint-doc-chip:hover {
  background-color: #bae6fd !important; /* 호버 시 약간 더 짙은 하늘색 */
  border-color: #38bdf8 !important;
  color: #0369a1 !important;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.25) !important;
  transform: translateY(-1px);
}

.filter-chip.maint-doc-chip:active,
.maint-doc-chip:active,
.filter-chip.maint-doc-chip.active,
.maint-doc-chip.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
  transform: translateY(0);
}

/* 하단 주간 통계 갱신 시 펄스 효과 */
@keyframes stats-pulse-anim {
  0% { transform: scale(1); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04); }
  40% { transform: scale(1.008); box-shadow: 0 -4px 16px rgba(37, 99, 235, 0.22); border-top-color: #3b82f6; }
  100% { transform: scale(1); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04); }
}

.bottom-stats-bar.stats-pulse {
  animation: stats-pulse-anim 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.weekly-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.weekly-range-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.weekly-stat-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.stat-hour-box {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.hour-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.hour-value {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.hour-value small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.stat-remain-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.stat-remain-badge.safe {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.stat-remain-badge.warn {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.stat-remain-badge.danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Progress bar */
.weekly-progress-wrap {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.weekly-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.weekly-progress-fill.fill-safe { background: #22c55e; }
.weekly-progress-fill.fill-warn { background: #f59e0b; }
.weekly-progress-fill.fill-danger { background: #ef4444; }

/* ALL Members Grid in Bottom Bar */
.weekly-all-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0 1px;
}

.weekly-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}

.weekly-main-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.weekly-sub-title {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.weekly-range-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 2px 7.5px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: -0.2px;
  flex-shrink: 0;
}

.weekly-members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.weekly-member-stat-chip {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.weekly-member-stat-chip:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.weekly-member-stat-chip.is-max {
  background: #fef2f2;
  border-color: #fca5a5;
}

.stat-chip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  white-space: nowrap;
  gap: 2px;
  overflow: hidden;
}

.stat-chip-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.stat-chip-hours-wrap {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  flex-shrink: 0;
}

.stat-chip-hours {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.stat-chip-limit {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 1.5px;
  line-height: 1;
}

.stat-chip-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: -0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.stat-chip-sub-status {
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

/* Modal Overlay & Bottom Sheet */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

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

.modal-card {
  width: 100%;
  max-width: 500px;
  background: #ffffff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

/* Standard Modal Center (for settings and month picker) */
#settings-modal-overlay,
#month-picker-modal-overlay {
  align-items: center;
  padding: 10px;
}
#settings-modal-overlay .modal-card,
#month-picker-modal-overlay .modal-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: scale(0.95);
  transition: transform 0.25s ease;
  max-width: 420px;
  width: 100%;
}
#settings-modal-overlay.active .modal-card,
#month-picker-modal-overlay.active .modal-card {
  transform: scale(1);
}

#month-picker-modal-overlay .modal-card {
  max-width: 380px;
}

.month-picker-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.picker-year-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.picker-arrow-btn {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
}

.picker-arrow-btn:hover {
  background: #f1f5f9;
  border-color: var(--border-highlight);
}

.picker-year-select-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}

.picker-year-select {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  background: #ffffff;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-family: inherit;
}

.picker-year-select:focus {
  border-color: #2563eb;
}

.picker-months-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.picker-month-chip {
  padding: 12px 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  touch-action: manipulation;
  font-family: inherit;
}

.picker-month-chip:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  transform: translateY(-1px);
}

.picker-month-chip.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

.picker-footer-actions {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.sheet-handle {
  width: 44px;
  height: 5px;
  background: #cbd5e1;
  border-radius: var(--radius-full);
  margin: 10px auto 4px;
  position: relative;
  cursor: grab;
  touch-action: none;
  transition: background-color 0.2s, transform 0.15s ease;
}

/* 스마트폰 터치 시 잡기 편하도록 보이지 않는 히트 에어리어(터치 영역) 넉넉히 확장 */
.sheet-handle::before {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -24px;
  right: -24px;
}

.sheet-handle:active {
  cursor: grabbing;
  background: #94a3b8;
  transform: scale(1.06);
}

.bottom-sheet.is-dragging {
  transition: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.modal-header {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  background: #ffffff;
}

.modal-header.modal-header-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 18px 14px;
}

.modal-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Modal Memo Container for Individual Calendar */
.modal-memo-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

/* Memo Bar Card (한 줄 형태의 바) */
.memo-bar-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  box-sizing: border-box;
}

.memo-bar-card:focus-within {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 2.5px rgba(59, 130, 246, 0.12);
}

.memo-bar-card.memo-work-card {
  border-left: 3.5px solid #0284c7; /* Sky/Ocean for work sharing */
}

.memo-bar-card.memo-personal-card {
  border-left: 3.5px solid #8b5cf6; /* Violet/Purple for personal schedule */
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 5px 8px;
}

.personal-top-actions {
  display: inline-flex;
  width: 76px;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
  margin-left: auto;
}

.personal-add-row-btn {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
}

.personal-add-row-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
  border-color: #94a3b8;
}

.personal-alert-toggle-btn {
  background: #f8fafc;
  color: #94a3b8;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 11px;
  padding: 0 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  height: 24px;
  line-height: 1;
  box-sizing: border-box;
}

.personal-alert-toggle-btn:hover {
  background: #ede9fe;
  color: #7c3aed;
  border-color: #c4b5fd;
}

.personal-alert-toggle-btn.active {
  background: #7c3aed;
  border-color: #6d28d9;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.25);
}

/* 알림 버튼 래퍼 및 팝오버 스타일 */
.personal-alert-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.personal-alert-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
  padding: 8px 10px;
  width: 275px;
  box-sizing: border-box;
  animation: alertPopoverFadeIn 0.18s ease-out;
}

@keyframes alertPopoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.alert-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f5f9;
}

.alert-popover-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.alert-popover-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 4px;
  transition: color 0.15s;
}

.alert-popover-close-btn:hover {
  color: #1e293b;
}

.alert-popover-body {
  margin: 0;
  width: 100%;
}

.alert-popover-body .memo-alert-picks {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  width: 100% !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.alert-popover-body .memo-picker-select {
  padding: 0 2px;
  height: 24px;
  font-size: 11px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  outline: none;
  background: #ffffff;
  color: #334155;
  box-sizing: border-box;
}

#memo-alert-day {
  width: 66px;
  flex-shrink: 0;
}

#memo-alert-hour {
  width: 48px;
  flex-shrink: 0;
}

#memo-alert-min {
  width: 48px;
  flex-shrink: 0;
}

.memo-alert-suffix-text {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: -0.3px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 2px;
}

.alert-popover-btn-save {
  background: #2563eb; /* 보라색 대신 시인성 높은 선명한 로열 블루 */
  border: none;
  border-radius: 5px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 9px;
  height: 24px;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  box-sizing: border-box;
}

.alert-popover-btn-save:hover {
  background: #1d4ed8;
}

.alert-popover-btn-save:active {
  transform: scale(0.96);
}

.personal-schedule-rows-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.personal-schedule-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.personal-badge-spacer {
  width: 54px;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.personal-actions-spacer {
  width: 76px;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
  margin-left: auto;
}

.personal-time-select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  padding: 0 1px;
  outline: none;
  cursor: pointer;
  height: 24px;
  flex-shrink: 0;
  width: 50px;
  text-align: center;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.personal-time-select.is-empty {
  color: #94a3b8;
  border-color: #e2e8f0;
  background: #f8fafc;
  font-weight: 500;
}

.personal-time-select:focus {
  border-color: #8b5cf6;
  background: #ffffff;
}

.personal-text-input {
  width: 200px;
  max-width: 200px;
  flex: 1;
  min-width: 0;
  height: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 0 7px;
  font-size: 11.5px;
  font-family: inherit;
  color: #1e293b;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.personal-text-input::placeholder {
  color: #94a3b8;
  font-size: 10.5px;
  letter-spacing: -0.3px;
}

.personal-text-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.personal-row-del-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  padding: 0;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.personal-row-del-btn:hover {
  color: #ef4444;
  background: #fee2e2;
}

.memo-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: -0.3px;
  flex-shrink: 0;
  user-select: none;
}

.memo-badge.work-badge {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.memo-badge.personal-badge {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
  width: 54px;
  text-align: center;
  padding: 3px 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  border-radius: 5px;
  cursor: default;
  user-select: none;
}

/* 2. 업무 일정 카드 (모달 내 업무공지와 개인일정 중간) */
.memo-bar-card.memo-duty-card {
  border-left: 3.5px solid #0284c7;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 5px 8px;
}

.memo-badge.duty-badge {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  width: 54px;
  text-align: center;
  padding: 3px 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  border-radius: 5px;
  cursor: default;
  user-select: none;
}

.duty-schedule-rows-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.duty-schedule-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.duty-badge-spacer {
  width: 54px;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.duty-top-actions {
  display: inline-flex;
  width: 50px;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
  margin-left: auto;
}

.duty-actions-spacer {
  width: 50px;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
  margin-left: auto;
}

.duty-add-row-btn {
  background: #f1f5f9;
  color: #0369a1;
  border: 1px solid #bae6fd;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
}

.duty-add-row-btn:hover {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #7dd3fc;
}

.duty-time-select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  padding: 0 1px;
  outline: none;
  cursor: pointer;
  height: 24px;
  flex-shrink: 0;
  width: 50px;
  text-align: center;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.duty-time-select.is-empty {
  color: #94a3b8;
  border-color: #e2e8f0;
  background: #f8fafc;
  font-weight: 500;
}

.duty-time-select:focus {
  border-color: #0284c7;
  background: #ffffff;
}

.duty-text-input {
  width: 200px;
  max-width: 200px;
  flex: 1;
  min-width: 0;
  height: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 0 7px;
  font-size: 11.5px;
  font-family: inherit;
  color: #1e293b;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.duty-text-input::placeholder {
  color: #94a3b8;
  font-size: 10.5px;
  letter-spacing: -0.3px;
}

.duty-text-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.duty-row-del-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  padding: 0;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.duty-row-del-btn:hover {
  color: #ef4444;
  background: #fee2e2;
}

.memo-textarea-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Auto-expanding Textarea */
.memo-textarea {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  font-family: inherit;
  color: #1e293b;
  line-height: 1.4;
  resize: none;
  overflow-y: hidden;
  padding: 2px 0;
  box-sizing: border-box;
  min-height: 20px;
  max-height: 100px;
}

.memo-textarea::placeholder {
  color: #94a3b8;
  font-size: 11.5px;
}

/* Action buttons */
.memo-action-btn {
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.memo-action-btn.btn-save-work {
  background: #0284c7;
  color: #ffffff;
}

.memo-action-btn.btn-save-work:hover {
  background: #0369a1;
}

.memo-action-btn.btn-save-work:active {
  transform: scale(0.96);
}

.memo-action-btn.btn-delete-work {
  background: #ef4444;
  color: #ffffff;
}

.memo-action-btn.btn-delete-work:hover {
  background: #dc2626;
}

.memo-action-btn.btn-delete-work:active {
  transform: scale(0.96);
}

.memo-action-btn.btn-save-personal {
  background: #7c3aed;
  color: #ffffff;
  padding: 4px 9px;
  font-size: 11px;
  height: 24px;
  line-height: 1;
}

.memo-action-btn.btn-save-personal:hover {
  background: #6d28d9;
}

.memo-action-btn.btn-save-personal:active {
  transform: scale(0.96);
}

/* 개인 일정 기기 간 동기화 모달 스타일 */
#personal-sync-modal-overlay {
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#personal-sync-modal-overlay .modal-card {
  max-width: 440px;
  width: 92%;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#personal-sync-modal-overlay.active .modal-card {
  transform: scale(1);
}

.sync-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sync-modal-icon {
  font-size: 22px;
}

.sync-modal-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sync-info-box {
  background: #f8fafc;
  border-left: 3.5px solid #8b5cf6;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}

.sync-status-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.sync-status-label {
  color: #475569;
}

.sync-status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.sync-status-badge.online {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.sync-status-badge.offline {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.sync-input-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sync-input-label {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.sync-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-pin-input {
  flex: 1;
  height: 38px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #1e293b;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sync-pin-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.sync-btn-gen {
  height: 38px;
  padding: 0 12px;
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #d8b4fe;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.sync-btn-gen:hover {
  background: #e9d5ff;
}

.sync-actions-row {
  display: flex;
  gap: 8px;
}

.sync-btn-connect {
  flex: 1;
  height: 40px;
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.sync-btn-connect:hover {
  background: #6d28d9;
}

.sync-btn-disconnect {
  height: 40px;
  padding: 0 14px;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.sync-btn-disconnect:hover {
  background: #fecaca;
}

.sync-guide-card {
  background: #faf5ff;
  border: 1px solid #f3e8ff;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  color: #6b21a8;
}

.sync-guide-title {
  font-weight: 800;
  margin-bottom: 5px;
}

.sync-guide-steps {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}

.memo-picker-select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  padding: 2px 4px;
  outline: none;
  cursor: pointer;
  height: 24px;
  transition: border-color 0.15s;
}

.memo-picker-select:focus {
  border-color: #8b5cf6;
}

.bell-icon {
  font-size: 11px;
  line-height: 1;
}

/* Calendar Cell Personal Schedule Line (개인 캘린더 전용 1줄 까만 글자 일정 표시) */
.cell-personal-schedule-line {
  font-size: 8px;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
}

.cell-personal-schedule-line:hover {
  color: #0f172a;
  text-decoration: underline;
}

.modal-date-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
}

.modal-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 26px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.modal-close-btn:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 16px 18px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
}

/* Member Shift Detail Cards inside Modal */
.shift-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-card {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color 0.2s, background-color 0.2s;
}

/* 사용자 요청: 휴가·대근 큰 카드 박스도 조근·야근 등 일반 근무 카드와 동일한 회색 배경(#f8fafc) 및 기본 라인으로 통일 (뱃지 네모 박스로만 구분) */
.member-card.has-leave,
.member-card.has-substitute {
  border-color: var(--border-color);
  background: #f8fafc;
}

.member-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.member-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}

.member-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.member-shift-badge {
  padding: 2.5px 7px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.member-time-hint {
  font-size: clamp(10px, 2.7vw, 11px);
  color: var(--text-secondary);
  white-space: nowrap;
  word-break: keep-all;
}

.leave-toggle-btn {
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  min-height: 34px;
  min-width: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: #ffffff;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.leave-toggle-btn:hover {
  background: #f1f5f9;
}

.leave-toggle-btn.active {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.leave-toggle-btn.active:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: var(--text-primary);
}

/* 개인 달력 팝업 내 타 멤버 주간 누적 근무시간(35/52h) 뱃지 */
.member-modal-stat-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  border-radius: var(--radius-full);
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  letter-spacing: -0.2px;
  user-select: none;
}

.member-modal-stat-pill.is-over {
  background: #fef2f2;
  border-color: #fca5a5;
}

.modal-stat-hours {
  font-weight: 800;
}

.modal-stat-divider,
.modal-stat-limit {
  color: #64748b;
  font-size: 11px;
}

/* 전체 근무 팝업 내 4인 멤버 주간 및 월간 누계 근무시간 2단 정밀 스탯 박스 (2안) */
.member-dual-stat-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding: 4px 9px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 86px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  user-select: none;
}

.dual-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
  line-height: 1.25;
}

.dual-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

.dual-stat-val-group {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dual-stat-hours {
  font-size: 11px;
  font-weight: 800;
}

.dual-stat-limit {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
}

.dual-stat-month-hours {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
}

/* Substitute Control Section inside Member Card */
.substitute-control-box {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  border-left: 3px solid var(--sub-bg);
  border: 1px solid #fef3c7;
}

/* 대근자 본인 카드에 표시되는 대근 담당 및 해제 박스 */
.substitute-control-box.sub-assignee-box {
  background: #fffaf5;
  border: 1px solid #fed7aa;
  border-left: 3.5px solid #f97316;
}

/* 개인 모드 휴가자 카드에 표시되는 읽기 전용 대근 배정자 안내 박스 */
.substitute-control-box.is-readonly {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
}

.sub-custom-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
}

.input-sub-custom {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 11.5px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
  background: #ffffff;
  color: var(--text-primary);
}

.input-sub-custom:focus {
  border-color: #2563eb;
}

.btn-sub-custom-save {
  padding: 5px 11px;
  min-height: 30px;
  font-size: 11px;
  font-weight: 700;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

.btn-sub-custom-save:hover {
  background: #1d4ed8;
}

.sub-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  word-break: keep-all;
}

.sub-tag {
  color: #b45309;
  font-weight: 700;
  white-space: nowrap;
}

.sub-name-highlight {
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}

.sub-type-badge {
  background: #fef3c7;
  color: #b45309;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sub-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  width: 100%;
}

.btn-mini-cancel {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  padding: 4px 8px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-mini-cancel:hover {
  background: #fecaca;
}

.select-sub-manual {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  flex: 1;
  min-width: 0;
}

/* Rule Hint Box (대근 자동 배정 규칙 2x2 그리드 & 가이드 풋터) */
.rule-hint-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  word-break: keep-all;
}

.rule-hint-header {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rule-match-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

@media (max-width: 520px) {
  .rule-match-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
}

@media (max-width: 350px) {
  .rule-match-grid {
    grid-template-columns: 1fr;
  }
}

.rule-match-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3.5px 5px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  min-width: 0;
  gap: 4px;
  white-space: nowrap;
}

.rule-leave-name {
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
  font-size: 9.5px;
  letter-spacing: -0.4px;
  flex-shrink: 0;
}

.rule-sub-select {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 10px 0 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: -0.4px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  color: #0f172a;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%2364748b' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 6px 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rule-sub-select option {
  text-align: center;
}

.rule-sub-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1.5px rgba(37, 99, 235, 0.2);
}

.rule-sub-select:disabled {
  background-color: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: #334155;
}

.rule-guide-footer {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 10px;
  line-height: 1.6;
  color: #64748b;
  display: flex;
  flex-direction: column;
  gap: 2px;
  word-break: keep-all;
}

.rule-guide-footer strong {
  color: #334155;
}

.rule-alert-line {
  color: #dc2626 !important;
  font-weight: 700;
}

/* Settings Modal */
#settings-modal-overlay .modal-card {
  max-width: min(860px, calc(100vw - 16px));
  width: 100%;
  max-height: min(88vh, 88dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#settings-modal .modal-header {
  padding: 12px 16px 10px;
  flex-shrink: 0;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}

#settings-modal .modal-body {
  padding: 12px 14px 16px;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#settings-modal .modal-body > * {
  flex-shrink: 0;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setting-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.setting-input {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
}

/* 기준일자 & 근무 순번 통합 카드 */
.setting-card-unified {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffffff;
}

.unified-ref-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
  flex-wrap: wrap;
}

.unified-ref-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.unified-ref-icon {
  font-size: 13px;
}

.unified-ref-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  word-break: keep-all;
}

.unified-ref-date-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ref-date-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.setting-input-date-compact {
  background: #ffffff;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  max-width: 125px;
  white-space: nowrap;
}

/* 👑 관리자 (송출부장) 카드 (회색 배경 + 까만 글씨로 통일) */
.chief-manager-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
  padding: 8px 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.chief-card-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.chief-badge-icon {
  font-size: 14px;
}

.chief-badge-title {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.chief-card-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

.chief-field-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  white-space: nowrap;
}

.chief-field-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.chief-field-value.role-badge {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 11.5px;
}

.chief-name-item {
  min-width: 80px;
  max-width: 110px;
}

.chief-shift-badge {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
}

/* 듀얼 패널: 송출센터(좌) & 정비팀(우) - 모바일/PC 항상 좌우 나란히 배치 */
.members-dual-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: #f1f5f9;
  min-width: 0;
}

.dept-panel {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dept-panel-header {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-color);
  background: #f8fafc;
  display: flex;
  align-items: center;
}

.dept-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dept-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.dept-sub-desc {
  font-size: 11px;
  font-weight: 600;
  color: #8c9bb0; /* 흐린 회색 */
  margin-left: 2px;
  letter-spacing: -0.2px;
}

.members-setup-table {
  background: #ffffff;
  flex: 1;
}

.setup-table-header {
  display: grid;
  align-items: center;
  background: #f8fafc;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  word-break: keep-all;
}

/* 📡 송출센터: 기본 3열 (No / 이름 / 기준일 근무), 변경 모드에서 4열 (No / 이름 / 기준일 근무 / 연락처) */
.songchul-table-header,
.setup-row:not(.maint-row) {
  display: grid;
  grid-template-columns: 24px 1.2fr 1fr;
  gap: 6px;
  padding: 4px 6px;
  justify-items: center;
  align-items: center;
  text-align: center;
}

.is-edit-mode .songchul-table-header,
.is-edit-mode .setup-row:not(.maint-row) {
  grid-template-columns: 22px 1.1fr 1fr 40px;
  gap: 4px;
}

/* 🛠️ 정비팀: 기본 3열 (No / 담당 / 이름), 변경 모드에서 4열 (No / 담당 / 이름 / 연락처) */
.maint-table-header,
.maint-row {
  display: grid;
  grid-template-columns: 24px 62px 1fr;
  gap: 5px;
  padding: 4px 4px;
  justify-items: center;
  align-items: center;
  text-align: center;
}

.is-edit-mode .maint-table-header,
.is-edit-mode .maint-row {
  grid-template-columns: 22px 58px 1fr 40px;
  gap: 4px;
}

.setup-table-header .col-num {
  text-align: center;
  width: 100%;
}

.setup-table-header .col-name {
  text-align: center;
  width: 100%;
}

.setup-table-header .col-role {
  text-align: center;
  width: 100%;
}

.setup-table-header .col-shift {
  text-align: center;
  width: 100%;
}

/* 연락처 헤더 구분: 기본 상태는 숨김, 변경 모드에서만 표시 */
.setup-table-header .col-contact {
  display: none !important;
  text-align: center;
  width: 100%;
}

.is-edit-mode .setup-table-header .col-contact {
  display: block !important;
}

.setup-row {
  display: grid;
  align-items: center;
  border-top: 1px solid var(--border-color);
  background: #ffffff;
  white-space: nowrap;
}

.setup-row:first-child {
  border-top: none;
}

.setup-row .col-num-text {
  font-weight: 700;
  color: #64748b;
  font-size: 10.5px;
  text-align: center;
  width: 100%;
}

.maint-role-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 1px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.4px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maint-shift-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 1px;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* [사용자 요구] 모든 인풋(이름, 사번, 이메일, 송출부장 인풋) 글씨체, 글자색, 배경색 100% 동일 통일 */
.setup-input-name,
.setup-input-empno,
.setup-input-email,
.chief-input-name,
.chief-input-empno,
.chief-input-email {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 5px !important;
  border-radius: var(--radius-sm) !important;
  text-align: center !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

.setup-input-email,
.chief-input-email {
  text-align: left !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 11px !important;
}

.setup-input-name:focus,
.setup-input-empno:focus,
.setup-input-email:focus,
.chief-input-name:focus,
.chief-input-empno:focus,
.chief-input-email:focus {
  border-color: var(--primary-color, #2563eb) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

.setup-select-shift {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-family: inherit !important;
  padding: 3px 3px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer;
  white-space: nowrap;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.settings-actions button {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* 비밀번호 인증 박스 (송출부장님 권한임) */
.setting-auth-box {
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
  animation: fadeIn 0.2s ease-out;
}

.auth-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.auth-role-badge {
  font-size: 12px;
  font-weight: 800;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #fde68a;
}

.auth-box-hint {
  font-size: 11px;
  color: #92400e;
  font-weight: 500;
}

.auth-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.setting-auth-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius-sm);
  outline: none;
  background: #ffffff;
  color: #1e293b;
  min-height: 34px;
}

.setting-auth-input:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}

.btn-auth-confirm {
  background: #d97706;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-auth-confirm:hover {
  background: #b45309;
}

.btn-auth-cancel {
  background: #ffffff;
  color: #78350f;
  border: 1px solid #d97706;
  padding: 6px 10px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.btn-auth-cancel:hover {
  background: #fef3c7;
}

.auth-error-msg {
  font-size: 11.5px;
  color: #dc2626;
  font-weight: 700;
  padding-left: 2px;
}

/* 비활성화 인풋/셀렉트 전용 읽기 모드 스타일 (사용자 요구: 회색 배경에 까만 글씨) */
.setup-input-name:disabled,
.setup-maint-name:disabled,
.setup-select-shift:disabled,
.setting-input-date-compact:disabled,
.legend-time-input:disabled {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  cursor: default !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* 편집 모드 활성화 시 부드러운 하이라이트 */
.setup-input-name:not(:disabled),
.setup-maint-name:not(:disabled),
.setup-select-shift:not(:disabled),
.setting-input-date-compact:not(:disabled),
.legend-time-input:not(:disabled),
.is-edit-mode .setup-input-name,
.is-edit-mode .setup-maint-name,
.is-edit-mode .setup-select-shift,
.is-edit-mode .rule-sub-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #3b82f6 !important;
  opacity: 1 !important;
}

.setup-select-shift:not(:disabled),
.rule-sub-select:not(:disabled) {
  cursor: pointer !important;
}

/* [사용자 요구] 연락처 버튼 및 송출부장 연락처: 초기에는 아예 없는 것처럼 완전 숨김, 변경 인증 후에만 나타남 */
.chief-contact-item,
.btn-contact-info {
  display: none !important;
}

.btn-contact-info {
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

/* 변경 모드([변경] 버튼 클릭 및 인증 후) 시 연락처 버튼 노출 및 활성화 */
.is-edit-mode .chief-contact-item {
  display: flex !important;
}

.is-edit-mode .btn-contact-info {
  display: inline-flex !important;
  background: #ffffff !important;
  color: #1d4ed8 !important;
  border: 1.5px solid #3b82f6 !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

.is-edit-mode .btn-contact-info:hover {
  background: #eff6ff !important;
  border-color: #1d4ed8 !important;
  color: #1e40af !important;
}

/* 연락처 정보 모달 (사번, 전화번호, 이메일 주소 관리 팝업 - 최상위 레이어) */
#contact-modal-overlay,
.contact-popover-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#contact-modal-overlay.active,
.contact-popover-overlay.active {
  display: flex !important;
}

#contact-modal-overlay .contact-modal-card {
  width: 100% !important;
  max-width: 320px !important;
  background: #ffffff !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #cbd5e1 !important;
  overflow: hidden !important;
  transform: none !important;
  animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: auto !important;
}

.contact-modal-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-target-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.contact-role-badge {
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 2px 7px;
  border-radius: 4px;
}

.contact-name-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  flex: 1;
}

.contact-mode-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.contact-mode-badge.edit-mode {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

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

.contact-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}

.contact-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-sm);
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.contact-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.contact-input:disabled {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  cursor: default !important;
}

.contact-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-settings-main.is-saving-mode {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35) !important;
}

/* 설정창 개별 박스 (근무 형태/시간 안내 박스 & 대근 자동 배정 규칙 박스) */
.settings-card-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  word-break: keep-all;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.settings-box-header {
  font-size: 11.5px;
  font-weight: 800;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f5f9;
}

.shift-times-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.shift-times-table th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 700;
  padding: 4px 6px;
  font-size: 10px;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
  white-space: nowrap;
}

.shift-times-table td {
  padding: 3.5px 5px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: var(--text-primary);
  white-space: nowrap;
}

.shift-times-table tr:last-child td {
  border-bottom: none;
}

.shift-times-table .col-center {
  text-align: center;
  font-weight: 700;
  color: #334155;
  font-size: 10.5px;
}

.shift-times-table .col-note {
  text-align: center;
  font-size: 9.5px;
  color: #64748b;
}

.shift-times-table .col-off {
  font-size: 10.5px;
  color: #059669;
  font-weight: 700;
  text-align: center;
}

.shift-times-table .legend-time-input {
  width: 100%;
  max-width: 96px;
  height: 22px;
  padding: 0 4px;
  font-size: 10px;
  font-family: inherit;
  text-align: center;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #334155;
  background-color: #f8fafc;
  outline: none;
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.shift-times-table .legend-time-input:focus {
  border-color: #2563eb;
  background-color: #ffffff;
  box-shadow: 0 0 0 1.5px rgba(37, 99, 235, 0.2);
}

.btn-primary {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover {
  background: #1d4ed8;
}

.btn-secondary {
  background: #f8fafc;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover {
  color: var(--text-primary);
  background: #f1f5f9;
  border-color: var(--border-highlight);
}

/* 1인 보기 모드 내 근무 뱃지 래퍼 */
.single-shift-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  padding: 4px 0;
}

/* Mobile Screen Adjustment (< 640px) */
@media (max-width: 640px) {
  body {
    background-color: #ffffff;
    padding: 0;
  }
  #app-container {
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }
}

/* ==========================================================================
   Media Queries for Mobile Smartphones (아이폰 14 및 스마트폰 390px 최적화)
   ========================================================================== */
@media (max-width: 480px) {
  /* Safe-Area & Notch / Dynamic Island Insets */
  .app-header {
    padding: max(10px, calc(8px + env(safe-area-inset-top, 0px))) 12px 6px;
  }
  .header-top {
    margin-bottom: 6px;
  }
  .header-title-wrap {
    gap: 5px;
  }
  .badge-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
  }
  .header-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.4px;
  }
  .header-actions {
    gap: 6px;
  }
  .live-clock-badge {
    font-size: 10.5px;
    padding: 3px 8px;
    gap: 4px;
    font-weight: 700;
  }
  .icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  /* Month Navigation Bar */
  .month-nav-bar {
    padding: 4px 0 6px;
  }
  .nav-arrow-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }
  .current-month-display-btn {
    padding: 3.5px 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    gap: 5px;
  }
  .current-month-display {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.3px;
  }
  .month-picker-icon {
    width: 16px;
    height: 16px;
  }
  .today-chip {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3.5px 9px;
    border-radius: 12px;
  }

  /* Member Filter Chips */
  .member-filter-scroll {
    gap: 5px;
    padding: 4px 0 6px;
    -webkit-overflow-scrolling: touch;
  }
  .filter-chip {
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 14px;
  }
  .filter-chip.active {
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.26);
  }
  .filter-divider {
    gap: 2px;
    height: 16px;
    margin: 0 0px;
    padding: 0;
  }
  .filter-divider::before,
  .filter-divider::after {
    width: 1.5px;
    height: 14px;
  }

  /* Shift Legend Bar: Clean card appearance */
  .legend-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 5px 8px;
    margin-top: 2px;
    gap: 3px;
  }
  .legend-item {
    font-size: 10px;
    font-weight: 600;
    gap: 2.5px;
    letter-spacing: -0.3px;
  }
  .legend-box {
    width: 15px;
    height: 15px;
    font-size: 9px;
    border-radius: 3px;
  }

  /* Calendar Days Grid */
  .calendar-wrapper {
    padding: 4px 8px 10px;
  }
  .weekday-grid {
    grid-template-columns: minmax(36px, 44px) repeat(7, 1fr);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 0 3px;
    margin: 0 0 3px 0;
    border-bottom: 1px solid #e2e8f0;
    border-top: none;
  }
  .cell-names-header {
    font-size: 10px;
  }
  .calendar-days-grid {
    grid-template-columns: minmax(36px, 44px) repeat(7, 1fr);
    gap: 3.5px;
  }
  .week-member-header-cell {
    min-height: auto;
    padding: 2.5px 2px;
    border-radius: 6px;
  }
  .member-header-top {
    height: 22px;
    min-height: 22px;
    margin-bottom: 2px;
    font-size: 9px;
  }
  .member-header-names {
    gap: 1.5px;
  }
  .member-name-row {
    height: 16px;
    font-size: 8.5px;
    letter-spacing: -0.6px;
    padding: 0 1px;
  }
  .day-cell {
    min-height: auto;
    padding: 2.5px 3px;
    border-radius: 6px;
  }
  .day-cell-top {
    height: 20px;
    min-height: 20px;
    padding: 1px 3px;
    margin-bottom: 2px; /* 전체 근무: 업무 공지 공간 공백 삭제 */
  }
  .day-num {
    font-size: 12px;
    font-weight: 800;
  }
  .badge-holiday-name {
    font-size: 8.5px;
    padding: 0.5px 2.5px;
    line-height: 12px;
    max-width: none;
    letter-spacing: -0.4px;
    border-radius: 2.5px;
    white-space: nowrap;
  }
  .badge-holiday-name.len-4 {
    font-size: 7px;
    letter-spacing: -0.6px;
    padding: 0 1.5px;
  }
  .badge-holiday-name.len-5 {
    font-size: 6px;
    letter-spacing: -0.7px;
    padding: 0 1px;
  }
  .badge-today-mark {
    font-size: 7px;
    padding: 0.5px 2px;
    border-radius: 2px;
    letter-spacing: -0.6px;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .badge-siren {
    font-size: 11px;
    left: calc(50% + 8px);
  }

  /* Shift Pills in ALL View Mode */
  .day-shift-list {
    gap: 1.5px;
  }
  .shift-pill {
    height: 16px;
    font-size: 9px;
    padding: 0 2.5px;
    border-radius: 3px;
  }
  .shift-pill.has-member {
    gap: 1px !important;
    padding: 0 1px !important;
  }
  .shift-pill-member {
    max-width: calc(100% - 13px) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
    color: #0f172a !important;
    flex-shrink: 1;
  }
  .shift-pill-member.len-3 {
    font-size: 7.5px !important;
    letter-spacing: -0.7px !important;
  }
  .shift-pill-member.len-4 {
    font-size: 6.5px !important;
    letter-spacing: -0.8px !important;
  }
  .shift-pill.has-member .shift-pill-type {
    min-width: 11.5px !important;
    height: 12px !important;
    font-size: 7.5px !important;
    padding: 0 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
  }
  .shift-pill-type {
    min-width: 13px;
    height: 13px;
    font-size: 8px;
    padding: 0 1px;
    border-radius: 2px;
  }
  .mini-tag {
    min-width: 12px;
    height: 12.5px;
    font-size: 7.5px;
    padding: 0 1px;
    border-radius: 2px;
  }

  /* Single Member View on Mobile (개인 달력: 세로 높이 꽉 참) */
  .day-cell.single-view {
    min-height: 0;
    height: 100%;
    padding: 2px 2px 16px 2px; /* 하단 16px: 개인 일정이 있든 없든 공간 항시 확보 */
  }
  .day-cell.single-view .day-cell-top {
    margin-bottom: 18px; /* 1인 개인 캘린더 모바일: 상단 공지 공간 유지 */
  }

  /* 🎯 정비일정 탭 달력 모바일: 상단 업무공지 및 하단 개인일정 공간 완전 해제 */
  .calendar-wrapper.maint-tab-mode .day-cell.single-view,
  .day-cell.single-view.maint-facility-cell {
    padding: 2px 2px 2px 2px !important;
  }
  .calendar-wrapper.maint-tab-mode .day-cell.single-view .day-cell-top,
  .day-cell.single-view.maint-facility-cell .day-cell-top {
    margin-bottom: 2px !important;
  }
  .day-cell.single-view .cell-work-notice-bar {
    top: 24.5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    max-width: calc(100% - 4px);
    font-size: 7.5px;
    padding: 0 5px;
    height: 11px;
    line-height: 11px;
  }
  .day-cell.single-view .single-shift-wrap {
    padding-top: 0;
    box-sizing: border-box;
  }
  .day-cell.single-view .cell-personal-schedule-line {
    bottom: 2.5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    max-width: calc(100% - 4px);
    font-size: 7.5px;
    letter-spacing: -0.4px;
    height: 10px;
    line-height: 10px;
    color: #1e293b;
    font-weight: 700;
    z-index: 4;
  }
  .day-cell.single-view .cell-duty-schedule-line {
    font-size: 7.5px;
    letter-spacing: -0.4px;
    height: 10px;
    line-height: 10px;
  }
  .day-cell.single-view.maint-worker-cell .cell-duty-schedule-line,
  .day-cell.single-view.maint-worker-cell .cell-duty-schedule-line.line-1 {
    bottom: 13px !important;
  }
  .day-cell.single-view.maint-worker-cell .cell-personal-schedule-line,
  .day-cell.single-view.maint-worker-cell .cell-personal-schedule-line.line-1 {
    bottom: 2px !important;
  }
  .calendar-wrapper.shift-worker-mode .day-cell.single-view .cell-personal-schedule-line,
  .day-cell.single-view.shift-worker-cell .cell-personal-schedule-line,
  .day-cell.single-view.shift-worker-cell .cell-personal-schedule-line.line-1 {
    bottom: 2px !important;
    left: 2px !important;
    right: 2px !important;
    margin: 0 !important;
    width: calc(100% - 4px) !important;
    max-width: calc(100% - 4px) !important;
    text-align: left !important;
    padding-left: 1px !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .cell-duty-schedule-line,
  .calendar-wrapper.maint-member-mode .day-cell.single-view .cell-personal-schedule-line,
  .day-cell.single-view.maint-member-cell .cell-duty-schedule-line,
  .day-cell.single-view.maint-member-cell .cell-personal-schedule-line {
    left: 2px !important;
    right: 2px !important;
    margin: 0 !important;
    width: calc(100% - 4px) !important;
    max-width: calc(100% - 4px) !important;
    text-align: left !important;
    padding-left: 1px !important;
  }
  .day-cell.single-view .cell-tvr-plan-wrap {
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .day-cell.single-view .cell-tvr-plan-line,
  .cell-tvr-plan-line,
  .cell-facility-plan-text {
    font-size: 11px !important;
    height: auto !important;
    line-height: 1.25 !important;
    text-align: center !important; /* 모바일: 5글자까지 가운데 정렬 */
    width: 100% !important;
  }
  /* 🎯 [사용자 요구] 모바일: 6글자 이상(is-medium-text, is-long-text)은 앞쪽(좌측) 정렬 */
  .day-cell.single-view .cell-tvr-plan-line.is-medium-text,
  .day-cell.single-view .cell-tvr-plan-line.is-long-text,
  .cell-tvr-plan-line.is-medium-text,
  .cell-tvr-plan-line.is-long-text,
  .cell-facility-plan-text.is-medium-text,
  .cell-facility-plan-text.is-long-text {
    text-align: left !important;
  }
  /* 🎯 [사용자 요구] 정비 일정 탭(maint-tab-mode): 모바일에서도 글자 수 무관 모두 좌측 정렬 */
  .calendar-wrapper.maint-tab-mode .cell-facility-plan-text {
    text-align: left !important;
  }
  /* 🎯 [사용자 절대 규칙] 송신소 정비1(조성기), 정비2(정현식): 모바일에서도 글자 수 무관 모두 좌측 정렬 */
  .calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line,
  .calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line.is-medium-text,
  .calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line.is-long-text,
  .day-cell.single-view.maint-station-cell .cell-tvr-plan-line,
  .day-cell.single-view.maint-station-cell .cell-tvr-plan-line.is-medium-text,
  .day-cell.single-view.maint-station-cell .cell-tvr-plan-line.is-long-text,
  .calendar-wrapper.maint-station-mode .cell-tvr-plan-line,
  .day-cell.maint-station-cell .cell-tvr-plan-line,
  .cell-tvr-plan-line.station-plan-left,
  .cell-tvr-plan-line.station-plan-left.is-medium-text,
  .cell-tvr-plan-line.station-plan-left.is-long-text {
    text-align: left !important;
    padding-left: 2px !important;
  }
  .day-cell.single-view .single-shift-badge {
    min-width: 26px;
    height: 25px;
    padding: 0 5px;
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 5.5px;
    border-width: 1.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .single-shift-badge,
  .day-cell.single-view.maint-member-cell .single-shift-badge {
    min-width: 16px !important;
    height: 15px !important;
    padding: 0 3px !important;
    font-size: 8px !important;
    border-radius: 3px !important;
    border-width: 1px !important;
    margin: 0 !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view,
  .day-cell.single-view.maint-member-cell {
    padding: 2.5px 2px 28px 2px !important;
    min-height: 98px !important;
    height: auto !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .day-cell-top,
  .day-cell.single-view.maint-member-cell .day-cell-top {
    margin-bottom: 1.5px !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .single-shift-wrap,
  .day-cell.single-view.maint-member-cell .single-shift-wrap {
    min-height: 15px !important;
    margin-bottom: 5px !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .cell-work-notice-bar,
  .day-cell.single-view.maint-member-cell .cell-work-notice-bar {
    top: 26px !important; /* 모바일: 2px 추가 하향 조정 (top: 26px) */
    left: 20px !important; /* 좌측 근무 박스와 안전 여백 확보하여 확대 시에도 침범 방지 */
    right: 2px !important;
    max-width: calc(100% - 22px) !important;
    height: 14px !important;
    line-height: 14px !important;
    font-size: 7px !important;
    padding: 0 3px !important;
    transform-origin: center center !important;
  }
  .single-double-badge-wrap .single-shift-badge {
    min-width: 22px;
    height: 17.5px;
    padding: 0 3px;
    font-size: 9px;
    border-radius: 4px;
    border-width: 1.2px;
  }
  .single-badge-plus {
    font-size: 7px;
    font-weight: 900;
    margin: -1px 0;
  }

  /* Bottom Stats Dashboard */
  .bottom-stats-bar {
    padding: 10px 12px max(14px, calc(10px + env(safe-area-inset-bottom, 0px)));
    gap: 6px;
  }
  .weekly-stat-header,
  .weekly-all-header {
    font-size: 11.5px;
    font-weight: 700;
    gap: 4px;
    margin-bottom: 3px;
  }
  .weekly-main-title {
    font-size: 11.5px;
  }
  .weekly-sub-title {
    font-size: 10px;
  }
  .weekly-range-tag {
    font-size: 9.5px;
    padding: 1.5px 6px;
  }
  .stat-hour-box {
    gap: 4px;
  }
  .hour-label {
    font-size: 11px;
  }
  .hour-value {
    font-size: 15.5px;
  }
  .stat-remain-badge {
    font-size: 10.5px;
    padding: 2.5px 7px;
  }
  .weekly-progress-wrap {
    height: 5px;
  }
  .weekly-members-grid {
    gap: 4px;
  }
  .weekly-member-stat-chip {
    padding: 4px 4px;
    border-radius: 6px;
  }
  .stat-chip-name {
    font-size: 10px;
    letter-spacing: -0.5px;
  }
  .stat-chip-hours {
    font-size: 11px;
  }
  .stat-chip-limit {
    font-size: 8.5px;
  }
  .stat-chip-label {
    font-size: 9px;
  }
  .stat-chip-sub-status {
    font-size: 9px;
    letter-spacing: -0.4px;
  }

  /* Modal Bottom Sheet */
  .modal-card {
    border-radius: 20px 20px 0 0;
    padding-bottom: max(20px, calc(16px + env(safe-area-inset-bottom, 0px)));
  }

  .modal-body {
    padding: 10px 12px 14px;
    gap: 8px;
  }

  .rule-hint-box {
    padding: 8px 10px;
    gap: 6px;
  }
  .rule-match-grid {
    gap: 5px;
  }
  .rule-match-item {
    padding: 3px 5px;
    font-size: 10px;
    gap: 4px;
  }
  .rule-leave-name {
    font-size: 10px;
    letter-spacing: -0.3px;
  }
  .rule-sub-select {
    padding: 0 10px;
    font-size: 9.5px;
    letter-spacing: -0.4px;
    text-align: center;
    text-align-last: center;
  }
  .rule-guide-footer {
    padding: 5px 7px;
    font-size: 9.5px;
  }
}

/* ==========================================================================
   Desktop PC / Laptop Optimization (컴퓨터 환경 1040px 와이드 최적화)
   ========================================================================== */
@media (min-width: 641px) {
  body {
    padding: 24px 16px;
    background-color: #f1f5f9;
  }
  #app-container {
    max-width: 1040px;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    min-height: calc(100vh - 48px);
    overflow: hidden;
  }
  .app-header {
    padding: 18px 28px 12px;
    border-bottom: 1px solid #e2e8f0;
  }
  .header-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.4px;
  }
  .badge-tag {
    font-size: 11.5px;
    padding: 2.5px 9px;
    font-weight: 700;
  }
  .live-clock-badge {
    font-size: 12px;
    padding: 5px 12px;
    gap: 6px;
    font-weight: 700;
  }
  .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .month-nav-bar {
    padding: 8px 0 12px;
  }
  .nav-arrow-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .current-month-display-btn {
    padding: 5px 12px;
    border-radius: 10px;
    gap: 7px;
  }
  .current-month-display {
    font-size: 20px;
    font-weight: 800;
  }
  .month-picker-icon {
    width: 20px;
    height: 20px;
  }
  .today-chip {
    font-size: 13px;
    padding: 5px 14px;
    font-weight: 700;
  }
  .member-filter-scroll {
    gap: 8px;
    padding: 8px 0 10px;
  }
  .filter-chip {
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 600;
  }
  .legend-bar {
    font-size: 12px;
    gap: 16px;
    padding: 10px 8px 6px;
    background: transparent;
    border: none;
    justify-content: flex-start;
  }
  .legend-item {
    font-size: 12px;
    gap: 4px;
  }
  .legend-box {
    width: 18px;
    height: 18px;
    font-size: 11px;
    border-radius: 4px;
  }
  .calendar-wrapper {
    padding: 10px 28px 20px;
  }
  .calendar-wrapper.single-member-mode .day-cell {
    min-height: 118px; /* 최혜진 등 송출 4인 및 내용물이 비어있는 정비팀 대표 달력 모두 1:1 완벽 동일한 셀 높이(118px) 유지 */
  }
  .weekday-grid {
    grid-template-columns: minmax(54px, 64px) repeat(7, 1fr);
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 0 6px;
    margin: 0 0 6px 0;
    border-bottom: 1px solid #e2e8f0;
    border-top: none;
  }
  .cell-names-header {
    font-size: 12px;
  }
  .calendar-days-grid {
    grid-template-columns: minmax(54px, 64px) repeat(7, 1fr);
    gap: 6px;
  }
  .week-member-header-cell {
    min-height: auto;
    padding: 6px 4px;
    border-radius: 8px;
  }
  .member-header-top {
    height: 28px;
    min-height: 28px;
    margin-bottom: 5px;
    font-size: 11.5px;
  }
  .member-header-names {
    gap: 3px;
  }
  .member-name-row {
    height: 20px;
    font-size: 11px;
    letter-spacing: -0.2px;
  }
  .day-cell {
    min-height: auto;
    padding: 6px 7px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  }
  .day-cell:hover {
    border-color: #cbd5e1; /* 🎯 [사용자 요청] 파란색 테두리 제거 ➔ 은은한 옅은 회색 테두리 */
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.10); /* 파란 음영 제거 ➔ 깔끔한 중립 음영 */
    transform: translateY(-1px);
  }
  .day-cell-top {
    height: 26px;
    min-height: 26px;
    padding: 2px 6px;
    margin-bottom: 5px; /* 전체 근무: 업무 공지 공간 공백 삭제 */
    border-radius: 5px;
  }
  .day-cell-top:hover {
    background-color: #f1f5f9; /* 🎯 파란 계열(#e0e7ff) 제거 ➔ 옅은 회색 배경 */
  }
  .day-num {
    font-size: 13.5px;
    font-weight: 800;
  }
  .badge-holiday-name {
    font-size: 11px;
    padding: 1.5px 5px;
    line-height: 16px;
    border-radius: 4px;
    max-width: none;
  }
  .badge-holiday-name.len-4 {
    font-size: 9.5px;
    letter-spacing: -0.4px;
    padding: 1px 3.5px;
  }
  .badge-holiday-name.len-5 {
    font-size: 8.5px;
    letter-spacing: -0.5px;
    padding: 1px 2.5px;
  }
  .badge-today-mark {
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .badge-siren {
    font-size: 14px;
  }
  .day-shift-list {
    gap: 3px;
  }
  .shift-pill {
    height: 20px;
    padding: 1px 5px;
    font-size: 11px;
    border-radius: 4px;
  }
  .shift-pill.has-member {
    gap: 4px;
    padding: 1px 5px;
  }
  .shift-pill-member {
    max-width: calc(100% - 22px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #0f172a !important;
  }
  .shift-pill-type {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    padding: 0 2px;
    border-radius: 3px;
  }
  .mini-tag {
    min-width: 15px;
    height: 15px;
    font-size: 9px;
    padding: 0 2px;
    border-radius: 3px;
  }
  .day-cell.single-view {
    min-height: 118px; /* 최혜진 등 송출 4인 및 내용물이 비어있는 정비팀 대표 달력 모두 1:1 완벽 동일한 셀 높이(118px) 유지 */
    height: 100%;
    padding: 6px 8px 22px 8px; /* 하단 22px: 개인 일정 공간 항시 확보 */
  }
  .day-cell.single-view .day-cell-top {
    margin-bottom: 24px; /* 1인 개인 캘린더 데스크톱: 상단 공지 공간 유지 */
  }

  /* 🎯 [사용자 절대 규칙] 정비일정 탭 달력: 상단 업무공지 및 하단 개인일정/업무일정 공간 완전 해제 및 요소 숨김 */
  .calendar-wrapper.maint-tab-mode .day-cell.single-view,
  .day-cell.single-view.maint-facility-cell {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .calendar-wrapper.maint-tab-mode .day-cell.single-view .day-cell-top,
  .day-cell.single-view.maint-facility-cell .day-cell-top {
    margin-bottom: 2px !important;
  }
  .calendar-wrapper.maint-tab-mode .cell-work-notice-bar,
  .day-cell.maint-facility-cell .cell-work-notice-bar,
  .calendar-wrapper.maint-tab-mode .cell-duty-schedule-line,
  .day-cell.maint-facility-cell .cell-duty-schedule-line,
  .calendar-wrapper.maint-tab-mode .cell-personal-schedule-line,
  .day-cell.maint-facility-cell .cell-personal-schedule-line {
    display: none !important;
  }
  .day-cell.single-view .cell-work-notice-bar {
    top: 35px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    max-width: calc(100% - 8px);
    font-size: 9.5px;
    height: 14px;
    line-height: 14px;
    padding: 0 8px;
  }
  .day-cell.single-view .single-shift-wrap {
    padding-top: 0;
    box-sizing: border-box;
  }
  .day-cell.single-view .cell-personal-schedule-line {
    bottom: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    max-width: calc(100% - 8px);
    font-size: 9.5px;
    letter-spacing: -0.2px;
    height: 13px;
    line-height: 13px;
    color: #1e293b;
    font-weight: 700;
    z-index: 4;
  }
  .day-cell.single-view .cell-duty-schedule-line {
    font-size: 9.5px;
    letter-spacing: -0.2px;
    height: 13px;
    line-height: 13px;
  }
  .day-cell.single-view.maint-worker-cell .cell-duty-schedule-line,
  .day-cell.single-view.maint-worker-cell .cell-duty-schedule-line.line-1 {
    bottom: 18px !important;
  }
  .day-cell.single-view.maint-worker-cell .cell-personal-schedule-line,
  .day-cell.single-view.maint-worker-cell .cell-personal-schedule-line.line-1 {
    bottom: 3px !important;
  }
  .calendar-wrapper.shift-worker-mode .day-cell.single-view .cell-personal-schedule-line,
  .day-cell.single-view.shift-worker-cell .cell-personal-schedule-line,
  .day-cell.single-view.shift-worker-cell .cell-personal-schedule-line.line-1 {
    bottom: 3px !important;
    left: 4px !important;
    right: 4px !important;
    margin: 0 !important;
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    text-align: left !important;
    padding-left: 2px !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .cell-duty-schedule-line,
  .calendar-wrapper.maint-member-mode .day-cell.single-view .cell-personal-schedule-line,
  .day-cell.single-view.maint-member-cell .cell-duty-schedule-line,
  .day-cell.single-view.maint-member-cell .cell-personal-schedule-line {
    left: 4px !important;
    right: 4px !important;
    margin: 0 !important;
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    text-align: left !important;
    padding-left: 2px !important;
  }
  .day-cell.single-view .cell-tvr-plan-wrap {
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .day-cell.single-view .cell-tvr-plan-line,
  .cell-tvr-plan-line,
  .cell-facility-plan-text {
    font-size: 11px !important;
    height: auto !important;
    line-height: 1.25 !important;
    text-align: center !important; /* PC: 8글자까지 가운데 정렬 */
    width: 100% !important;
  }
  /* 🎯 [사용자 요구] PC: 8글자까지는 무조건 가운데 정렬 (is-medium-text 포함) */
  .day-cell.single-view .cell-tvr-plan-line.is-medium-text,
  .cell-tvr-plan-line.is-medium-text,
  .cell-facility-plan-text.is-medium-text {
    text-align: center !important;
  }
  /* 🎯 [사용자 요구] PC: 8글자 초과(9글자 이상: is-long-text)만 앞쪽(좌측) 정렬 */
  .day-cell.single-view .cell-tvr-plan-line.is-long-text,
  .cell-tvr-plan-line.is-long-text,
  .cell-facility-plan-text.is-long-text {
    text-align: left !important;
  }
  /* 🎯 [사용자 절대 규칙] 송신소 정비1(조성기), 정비2(정현식): PC에서도 글자 수 무관 모두 좌측 정렬 */
  .calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line,
  .calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line.is-medium-text,
  .calendar-wrapper.maint-station-mode .day-cell.single-view .cell-tvr-plan-line.is-long-text,
  .day-cell.single-view.maint-station-cell .cell-tvr-plan-line,
  .day-cell.single-view.maint-station-cell .cell-tvr-plan-line.is-medium-text,
  .day-cell.single-view.maint-station-cell .cell-tvr-plan-line.is-long-text,
  .calendar-wrapper.maint-station-mode .cell-tvr-plan-line,
  .day-cell.maint-station-cell .cell-tvr-plan-line,
  .cell-tvr-plan-line.station-plan-left,
  .cell-tvr-plan-line.station-plan-left.is-medium-text,
  .cell-tvr-plan-line.station-plan-left.is-long-text {
    text-align: left !important;
    padding-left: 2px !important;
  }
  .day-cell.single-view .single-shift-badge {
    min-width: 46px;
    height: 34px;
    font-size: 13.5px;
    font-weight: 800;
    border-radius: 7px;
    border-width: 1.5px;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .single-shift-badge,
  .day-cell.single-view.maint-member-cell .single-shift-badge {
    min-width: 20px !important;
    height: 19px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    border-width: 1.2px !important;
    padding: 0 4.5px !important;
    margin: 0 !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .cell-work-notice-bar,
  .day-cell.single-view.maint-member-cell .cell-work-notice-bar {
    top: 33px !important; /* 데스크탑: 2px 추가 하향 조정 (top: 33px) */
    left: 24px !important; /* 좌측 근무 박스와 안전 여백 확보 */
    right: 2px !important;
    max-width: calc(100% - 28px) !important;
    height: 16px !important;
    line-height: 16px !important;
    font-size: 8px !important;
    padding: 0 4px !important;
    transform-origin: center center !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view,
  .day-cell.single-view.maint-member-cell {
    padding: 3px 4px 34px 4px !important;
    min-height: 122px !important;
    height: auto !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .day-cell-top,
  .day-cell.single-view.maint-member-cell .day-cell-top {
    margin-bottom: 2px !important;
  }
  .calendar-wrapper.maint-member-mode .day-cell.single-view .single-shift-wrap,
  .day-cell.single-view.maint-member-cell .single-shift-wrap {
    min-height: 19px !important;
    margin-bottom: 7px !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }
  .single-double-badge-wrap .single-shift-badge {
    min-width: 38px;
    height: 22px;
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 5px;
    border-width: 1.5px;
  }
  .single-badge-plus {
    font-size: 9px;
    font-weight: 900;
  }
  .bottom-stats-bar {
    padding: 16px 28px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .weekly-stat-header {
    font-size: 13.5px;
  }
  .weekly-range-tag {
    font-size: 11.5px;
    padding: 3px 9px;
  }
  .hour-label {
    font-size: 12.5px;
  }
  .hour-value {
    font-size: 18px;
    font-weight: 800;
  }
  .stat-remain-badge {
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
  }
  .weekly-progress-wrap {
    height: 6px;
  }
  .weekly-members-grid {
    gap: 12px;
  }
  .weekly-member-stat-chip {
    padding: 8px 14px;
    border-radius: 8px;
  }
  .stat-chip-name {
    font-size: 12px;
  }
  .stat-chip-hours {
    font-size: 13.5px;
  }
  .stat-chip-limit {
    font-size: 11px;
  }
  .stat-chip-label {
    font-size: 11px;
  }
  .stat-chip-sub-status {
    font-size: 11px;
  }

  /* Desktop Modal: Clean centered dialog */
  .modal-overlay {
    align-items: center;
    padding: 24px;
  }
  .modal-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    max-width: 580px;
    transform: scale(0.95);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }
  .modal-overlay.active .modal-card {
    transform: scale(1);
  }
  .sheet-handle {
    display: none;
  }

  /* 데스크톱 모달 대근 자동 배정 규칙 여유 있는 스타일 (3열 2행) */
  .rule-match-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .rule-match-item {
    padding: 4px 6px;
    gap: 6px;
    font-size: 11px;
  }
  .rule-leave-name {
    font-size: 10.5px;
    letter-spacing: -0.2px;
  }
  .rule-sub-select {
    font-size: 10.5px;
    letter-spacing: normal;
    padding: 0 14px 0 2px;
    height: 25px;
    background-position: right 4px center;
    text-align: center;
    text-align-last: center;
  }

  /* PC 화면 알람창: 기존 길이의 반으로 줄인 깔끔한 라운드 정사각형 카드 */
  .app-toast {
    width: 130px !important;
    height: 130px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 24px !important;
    padding: 12px !important;
  }
}

/* =======================================================
   일근 휴가 유형 선택 팝업 (전일 / 오전 반차 / 오후 반차 1줄 팝업)
   - '+ 휴가 신청' 버튼과 완벽히 일치하는 프리미엄 캡슐 바 디자인
   ======================================================= */
.leave-type-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

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

/* 프리미엄 플로팅 캡슐 알약 카드 (곡면 9999px + 은은한 글래스모피즘) */
.leave-type-popup-card {
  width: auto;
  max-width: 95vw;
  background: rgba(255, 255, 255, 0.98);
  border-radius: var(--radius-full, 9999px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.18), 
              0 4px 12px rgba(0, 0, 0, 0.04),
              0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  padding: 6px 8px;
  transform: scale(0.92) translateY(6px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}

.leave-type-modal-overlay.active .leave-type-popup-card {
  transform: scale(1) translateY(0);
}

.leave-type-popup-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* '+ 휴가 신청' 버튼과 100% 동일한 고급 알약 캡슐형 버튼 */
.btn-leave-type-opt {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  height: 35px;
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid var(--border-color, #cbd5e1);
  background: #ffffff;
  color: var(--text-primary, #334155);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.btn-leave-type-opt .btn-opt-plus {
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
  line-height: 1;
  transition: color 0.18s ease;
}

.btn-leave-type-opt:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.btn-leave-type-opt:hover .btn-opt-plus {
  color: #0f172a;
}

.btn-leave-type-opt:active {
  transform: scale(0.96) translateY(0);
  background: #f1f5f9;
}

/* 세련된 원형 닫기 버튼 */
.btn-leave-type-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 2px;
  background: #f1f5f9;
  border: 1px solid transparent;
  font-size: 18px;
  line-height: 1;
  color: #64748b;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

.btn-leave-type-close:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: rotate(90deg);
}

.btn-leave-type-close:active {
  transform: rotate(90deg) scale(0.92);
}

/* 정비팀 전체/대표 모드 캘린더 날짜 셀 내 5인 미니 근무 리스트 */
.maint-overview-shift-list {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  width: 100%;
  padding: 1px 0;
  box-sizing: border-box;
}

.maint-overview-shift-list .shift-pill.maint-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14px;
  padding: 0 3px;
  border-radius: 2.5px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.maint-overview-shift-list .shift-pill.maint-pill:hover {
  transform: scale(1.02);
  filter: brightness(0.95);
}

.maint-overview-shift-list .shift-pill.maint-pill:active {
  transform: scale(0.97);
}

.maint-overview-shift-list .shift-pill.maint-pill .shift-pill-member {
  font-size: 8px;
  font-weight: 700;
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maint-overview-shift-list .shift-pill.maint-pill .shift-pill-type {
  min-width: 12px;
  height: 12px;
  font-size: 7.5px;
  padding: 0 1px;
}

/* ==========================================================================
   실시간 방송 모니터링 (KBS 청주 On-Air 4개 채널) 클린 화이트 테마 모달
   ========================================================================== */
.onair-modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px;
  background: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.onair-modal-wrapper {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: onair-card-enter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 책 색인 / 북마크 탭 (위로 볼록 삐죽하게 솟아오른 탭) */
.onair-bookmark-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-left: 10px;
  margin-bottom: -1px;
  position: relative;
  z-index: 10;
}

.onair-bookmark-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 6px;
  background: #cbd5e1;
  border: 1.5px solid #94a3b8;
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 2번, 3번 탭: 휴대폰에서도 1번 탭의 긴 제목이 절대 잘리지 않도록 아담하게 축소된 콤팩트 박스 */
.onair-bookmark-tab.tab-compact {
  padding: 7px 11px 6px;
  min-width: 32px;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
}

.onair-bookmark-tab:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-2px);
}

/* 활성 북마크 탭 - 모달 카드와 일체화되는 책 색인 효과 */
.onair-bookmark-tab.active {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
  border-bottom: 2px solid #ffffff;
  padding-top: 9px;
  padding-bottom: 7px;
  font-weight: 800;
  transform: translateY(0);
  box-shadow: 0 -4px 10px rgba(15, 23, 42, 0.08);
  z-index: 12;
}

/* 북마크 인덱스 컬러 태그 도트 */
.tab-bookmark-tag {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #ef4444;
  flex-shrink: 0;
}

.tab-bookmark-tag.tag-onair {
  background-color: #0284c7;
}

.tab-bookmark-tag.tag-blank {
  background-color: #94a3b8;
}

.onair-bookmark-tab.active .tab-bookmark-tag {
  box-shadow: 0 0 6px currentColor;
}

/* 모바일 전용: 1번 탭 제목 온전히 보장 */
@media (max-width: 480px) {
  .onair-bookmark-tabs {
    padding-left: 6px;
    gap: 3px;
  }
  .onair-bookmark-tab {
    padding: 6.5px 10px 5.5px;
    font-size: 11px;
    gap: 5px;
  }
  .onair-bookmark-tab.tab-compact {
    padding: 6.5px 8px 5.5px;
    min-width: 28px;
    font-size: 11.5px;
    gap: 3.5px;
  }
}

.onair-modal-card {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 0 16px 16px 16px !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  color: var(--text-primary, #1e293b) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 5;
}

@keyframes onair-card-enter {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.onair-glow-bar {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0055b8 0%, #00878a 35%, #f15a24 70%, #733f98 100%);
  flex-shrink: 0;
}

.onair-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  gap: 8px;
}

.onair-header-single-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.onair-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 2px 7px;
  border-radius: var(--radius-full, 9999px);
  flex-shrink: 0;
}

.onair-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ef4444;
  animation: onair-pulse-anim 1.8s infinite;
  flex-shrink: 0;
}

.onair-live-ko,
.onair-pill-text {
  font-size: 10.5px;
  font-weight: 800;
  color: #dc2626;
  letter-spacing: -0.2px;
  line-height: 1;
  font-family: inherit;
}

.onair-modal-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
  margin: 0 0 0 4px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.onair-time-pill {
  display: none;
}

/* 실시간 뱃지 옆 '시청취 예약 ▶' 버튼 (두 세칸 띄움) */
.onair-reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  user-select: none;
  flex-shrink: 0;
  margin-left: 10px; /* 두 세칸 여백 */
}

.onair-reserve-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-0.5px);
}

.onair-reserve-btn:active {
  transform: scale(0.96);
}

.onair-reserve-btn .reserve-play-icon {
  color: #2563eb;
}

.onair-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.onair-icon-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.onair-icon-action-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #94a3b8;
  transform: rotate(45deg);
}

.onair-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.onair-close-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Modal Body */
.onair-modal-body {
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 78vh;
  overflow-y: auto;
  background: #ffffff;
}

/* 4 Channels Grid (Clean KBS On-Air Style) */
.onair-channels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 520px) {
  .onair-channels-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Custom Stream Top Config Bar (제목 + 주소 가로 배치) */
.custom-stream-config-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* 🎯 [사용자 요청] 헤더 라인(새로고침/닫기 버튼 라인) 제목 입력 바 */
.onair-header-custom-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 8px;
  height: 32px;
  max-width: 220px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}

.onair-header-custom-title-wrap:focus-within {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.custom-header-title-input {
  width: 150px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  padding: 0;
}

.custom-header-title-input::placeholder {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

/* 🎯 [사용자 요청] 상단 제목 단독 배치 바 (LIVE 위치/화면 바로 위) */
.custom-stream-top-bar {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.custom-stream-top-bar .custom-config-field {
  flex: 1;
  width: 100%;
}

/* 🎯 [사용자 요청] 하단 소스영상 주조 배치 바 (라벨 + 주조 프리셋 칩 + 주소창) - 기본은 보안상 절대 숨김 */
.custom-stream-bottom-bar,
#custom-stream-url-wrap-2,
#custom-stream-url-wrap-3 {
  display: none !important;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  margin-top: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

/* 🎯 [사용자 요청] 오직 앱 관리자(ADMIN)로 로그인했을 때만 스트림 주소 바 표시 */
body.kbs-role-admin .custom-stream-bottom-bar,
body.kbs-role-admin #custom-stream-url-wrap-2,
body.kbs-role-admin #custom-stream-url-wrap-3 {
  display: flex !important;
}

.custom-stream-bottom-bar:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.custom-stream-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.custom-stream-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  padding: 3px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
}

.custom-stream-label-badge.badge-ch3 {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 2px 4px rgba(5, 150, 105, 0.25);
}

.custom-stream-label-badge .pulse-dot-sm {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
  animation: onair-pulse 1.8s infinite;
}

.custom-stream-presets {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-stream-preset {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.3;
}

.btn-stream-preset:hover {
  background: #f1f5f9;
  border-color: #0284c7;
  color: #0284c7;
  transform: translateY(-1px);
}

.btn-stream-preset:active {
  transform: translateY(0);
}

.custom-stream-bottom-bar .custom-config-field {
  flex: 1;
  width: 100%;
}

.custom-config-field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 8px;
  height: 36px;
  transition: all 0.18s ease;
}

.custom-config-field:focus-within {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.custom-config-title {
  flex: 0 0 34%;
  min-width: 120px;
}

.custom-config-url {
  flex: 1;
}

.custom-config-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #0284c7;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.custom-config-badge.badge-ch3 {
  background: #8b5cf6;
}

.custom-config-icon {
  font-size: 13px;
  line-height: 1;
  opacity: 0.7;
}

.custom-config-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  padding: 0;
}

.custom-config-input::placeholder {
  color: #94a3b8;
  font-size: 11.5px;
}

@media (max-width: 520px) {
  .custom-stream-config-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }
  .custom-config-title {
    flex: none;
    width: 100%;
  }
  .custom-config-url {
    width: 100%;
  }
}

/* Custom Channel Grid (1TV와 동일한 규격 채널 카드) */
.custom-channel-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 520px;
  margin: 0 auto 12px;
}

.channel-custom-2:hover {
  border-color: #0284c7;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.14);
}

.channel-custom-3:hover {
  border-color: #8b5cf6;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.14);
}

.channel-custom-2 .onair-play-circle {
  color: #0284c7;
}

.channel-custom-3 .onair-play-circle {
  color: #8b5cf6;
}

/* Channel Card */
.onair-channel-card {
  text-decoration: none;
  color: inherit;
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 8px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.onair-channel-card:hover {
  transform: translateY(-2px);
  border-color: #94a3b8;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

.onair-channel-card:active {
  transform: scale(0.99);
}

/* Specific Channel Accents on Hover */
.onair-channel-card.channel-1tv:hover {
  border-color: #0055b8;
  box-shadow: 0 8px 20px rgba(0, 85, 184, 0.14);
}

.onair-channel-card.channel-1radio:hover {
  border-color: #00878a;
  box-shadow: 0 8px 20px rgba(0, 135, 138, 0.14);
}

.onair-channel-card.channel-2radio:hover {
  border-color: #ea580c;
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.14);
}

.onair-channel-card.channel-1fm:hover {
  border-color: #733f98;
  box-shadow: 0 8px 20px rgba(115, 63, 152, 0.14);
}

/* Screen Box (16:9 Thumbnail + Hover Play Button Overlay) */
.onair-screen-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #0f172a;
}

.onair-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.28s ease;
}

.onair-channel-card:hover .onair-screen-img {
  transform: scale(1.05);
}

/* Play Button Overlay (KBS On-Air exact hover interaction) */
.onair-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.onair-channel-card:hover .onair-play-overlay {
  opacity: 1;
}

.onair-play-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #0055b8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  padding-left: 3px;
  transform: scale(0.86);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s;
}

.onair-channel-card:hover .onair-play-circle {
  transform: scale(1.06);
}

.channel-1tv .onair-play-circle { color: #0055b8; }
.channel-1radio .onair-play-circle { color: #00878a; }
.channel-2radio .onair-play-circle { color: #ea580c; }
.channel-1fm .onair-play-circle { color: #733f98; }

/* 현재 재생 중인 채널 카드 강조 및 정지(스톱) 피드백 */
.onair-channel-card.is-playing {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2.5px rgba(2, 132, 199, 0.45), 0 8px 24px rgba(2, 132, 199, 0.22) !important;
  background: #f0f9ff !important;
}

.onair-channel-card.is-playing .onair-play-overlay {
  opacity: 1 !important;
  background: rgba(15, 23, 42, 0.45) !important;
}

.onair-channel-card.is-playing .onair-play-circle {
  background: #ef4444 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.7) !important;
  padding-left: 0 !important;
}

.onair-channel-card.is-playing .onair-meta-ch-name {
  color: #0284c7 !important;
}

.onair-channel-card.is-playing .onair-meta-prog-title {
  color: #0369a1 !important;
}

/* Top Badges on Screen (오른쪽 상단 주파수 태그) */
.onair-screen-badge-row {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 2;
}

.onair-screen-ch-pill {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Card Bottom Meta Area: Channel Name, Time, Program Title */
.onair-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 2px 2px;
}

.onair-meta-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.onair-meta-ch-name {
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  letter-spacing: -0.2px;
}

.onair-meta-time {
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
}

.onair-meta-prog-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.3px;
  transition: color 0.18s ease;
}

.channel-1tv:hover .onair-meta-prog-title { color: #0055b8; }
.channel-1radio:hover .onair-meta-prog-title { color: #00878a; }
.channel-2radio:hover .onair-meta-prog-title { color: #ea580c; }
.channel-1fm:hover .onair-meta-prog-title { color: #733f98; }

/* Notice Bar (안내 박스 - 채널 카드와 여유 있게 분리) */
.onair-notice-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 16px;
}

.onair-notice-bar svg {
  flex-shrink: 0;
  color: #0055b8;
}

/* Tab Panels & Custom Tab Views */
.onair-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onair-custom-tab-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  gap: 8px;
}

.onair-custom-tab-icon {
  font-size: 32px;
  line-height: 1;
}

.onair-custom-tab-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.onair-custom-tab-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  max-width: 380px;
  line-height: 1.5;
}

.onair-direct-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.onair-direct-link-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.18s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.onair-direct-link-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.onair-direct-link-btn.btn-1tv { background: #0055b8; }
.onair-direct-link-btn.btn-1radio { background: #00878a; }
.onair-direct-link-btn.btn-2radio { background: #ea580c; }
.onair-direct-link-btn.btn-1fm { background: #733f98; }

.onair-custom-tab-box.blank-state {
  border-style: dotted;
  background: #f1f5f9;
  padding: 40px 20px;
}

/* Bottom Drag Handle Bar (터치/마우스 스와이프 닫기 - 안내 박스와 모달 하단 사이의 정중앙 배치) */
.onair-drag-handle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0 15px;
  background: transparent;
  border: none;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.onair-drag-handle-wrap:active,
.onair-drag-handle-wrap.is-dragging {
  cursor: grabbing;
  background: transparent;
}

.onair-drag-bar {
  width: 44px;
  height: 4.5px;
  background: #cbd5e1;
  border-radius: 9999px;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.onair-drag-handle-wrap:hover .onair-drag-bar,
.onair-drag-handle-wrap.is-dragging .onair-drag-bar {
  background: #94a3b8;
  width: 52px;
}

@keyframes onair-pulse-anim {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.85);
  }
}

/* ==========================================================================
   In-App Floating Video/Audio Player (중간 크기 ➔ 16:9 전체화면 ➔ 화면 구석 미니창)
   ========================================================================== */
.onair-floating-player {
  position: fixed;
  z-index: 100010;
  display: flex;
  flex-direction: column;
  background: #090d16;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3);
  overflow: hidden !important;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transition: width 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.26s ease,
              bottom 0.26s ease,
              right 0.26s ease;
  user-select: none;
  touch-action: none;
}

/* 3번 탭(준비 중) 선택 시에만 여백 정리 */
.onair-modal-card.tab-blank .onair-modal-body {
  padding-top: 20px !important;
}

/* 1. 중간 크기 모드 (기본: 1TV/라디오 스마트폰 화면 안쪽으로 100% 들어오는 80% 크기 16:10 팝업) */
.onair-floating-player.mode-medium {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(84vw, 420px);
  height: min(calc(84vw * 10 / 16), 265px);
  aspect-ratio: 16 / 10;
  max-width: calc(100vw - 24px) !important;
  max-height: 75vh !important;
  border-radius: 12px;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .onair-floating-player.mode-medium {
    width: min(88vw, 340px) !important;
    height: min(calc(88vw * 10 / 16), 215px) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 10px;
  }
}

/* 2. 화면 구석 미니창 모드 (80% 축소: 근무표 작업을 방해하지 않는 아담한 크기) */
.onair-floating-player.mode-mini {
  top: auto !important;
  left: auto !important;
  bottom: 14px;
  right: 12px;
  transform: none !important;
  width: 148px;
  height: 92px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  cursor: grab;
}

@media (min-width: 768px) {
  .onair-floating-player.mode-mini:not(.has-moved) {
    bottom: 20px;
    right: 20px;
    width: 200px;
    height: 122px;
    border-radius: 10px;
  }
}

/* 드래그 상태 제어 */
.onair-floating-player.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
  user-select: none !important;
}

/* 사용자가 드래그하여 위치를 옮긴 경우 기본 CSS center/bottom 고정 무효화 */
.onair-floating-player.has-moved,
.onair-floating-player.is-dragging {
  transform: none !important;
  right: auto !important;
  bottom: auto !important;
}

/* 3. 전체화면 모드 (16:9 전체) */
.onair-floating-player.mode-fullscreen {
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  transform: none !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 100030 !important;
}



/* 4. 라디오 전용 비주얼 뷰 (창 크기는 TV와 동일하게 유지되며, 아트워크와 하단 볼륨바가 예쁘게 배치됨) */
.onair-floating-player.is-radio .fp-screen-body {
  position: relative;
  width: 100%;
  flex: 1 1 0px !important;
  min-height: 0 !important;
}

.onair-floating-player.is-radio .fp-radio-view {
  cursor: grab;
  touch-action: none;
}

/* Player Header Bar */
.fp-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 30px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  cursor: grab;
  overflow: hidden !important;
}

.onair-floating-player.mode-mini .fp-header-bar {
  padding: 3px 6px;
  min-height: 24px;
}

.fp-header-info {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.fp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: onair-pulse-anim 1.5s infinite;
  flex-shrink: 0;
}

.fp-channel-title {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

.fp-prog-title {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: 110px;
}

@media (max-width: 480px) {
  .fp-prog-title {
    max-width: 60px !important;
  }
}

.onair-floating-player.mode-mini .fp-prog-title {
  display: none;
}

.fp-header-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0 !important;
  margin-left: auto;
}

.fp-ctrl-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0 !important;
}

.onair-floating-player.mode-mini .fp-ctrl-btn {
  width: 18px;
  height: 18px;
}

.fp-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* X 종료 버튼은 항상 눈에 띄고 안전하게 클릭/터치 가능하도록 빨간 테두리 강조 */
.fp-close-btn {
  background: rgba(220, 38, 38, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.7) !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.fp-close-btn:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* 재생 / 스톱(멈춤) 상태 반응형 토글 버튼 스타일 */
.fp-play-pause-btn {
  width: auto !important;
  padding: 0 7px !important;
  gap: 4px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

/* 재생 중일 때 (누르면 스톱됨) -> 레드 톤 */
.fp-play-pause-btn.is-playing {
  background: rgba(220, 38, 38, 0.28) !important;
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  color: #fecaca !important;
}

.fp-play-pause-btn.is-playing:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* 멈춰 있을 때 (누르면 재생됨) -> 에메랄드 그린 톤 */
.fp-play-pause-btn.is-paused {
  background: rgba(16, 185, 129, 0.28) !important;
  border: 1px solid rgba(16, 185, 129, 0.6) !important;
  color: #a7f3d0 !important;
  animation: onair-pulse-anim 2s infinite;
}

.fp-play-pause-btn.is-paused:hover {
  background: #059669 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

.onair-floating-player.mode-mini .fp-btn-toggle-text {
  display: none;
}

@media (max-width: 480px) {
  .fp-play-pause-btn .fp-btn-toggle-text {
    display: none !important;
  }
  .fp-play-pause-btn {
    padding: 0 5px !important;
  }
  .fp-ctrl-btn {
    width: 21px !important;
    height: 21px !important;
  }
}

/* Player Screen Body (모바일에서도 화면이 인앱 밖으로 1픽셀도 튀어나가지 않도록 철저히 격리) */
.fp-screen-body {
  position: relative;
  width: 100%;
  height: calc(100% - 34px) !important;
  flex: 1 1 0px !important;
  min-height: 0 !important;
  background: #000000;
  overflow: hidden !important;
  contain: strict !important;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.fp-live-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border: none !important;
  display: block;
  background: #000000 !important;
  object-fit: contain !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  pointer-events: none; /* 브라우저 자체의 전체화면 제스처 탈출 원천 차단 */
}

/* 터치 제어 쉴드: 비디오 바로 앞단에서 터치 이벤트를 전담하여 브라우저 확대 줌 탈출 방지 및 탭 시 재생/일시정지 토글 */
.fp-video-shield {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 5;
  background: transparent;
  cursor: pointer;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  display: block;
}

.onair-floating-player.is-radio .fp-video-shield {
  display: none !important;
}

/* 탭 시 화면 중앙에 나타나는 재생/일시정지 피드백 인디케이터 */
.fp-tap-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-tap-indicator.animate-pop {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
}

.fp-live-iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
  background: #000000;
}

/* Autoplay Unmute Helper */
.fp-unmute-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(37, 99, 235, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  animation: onair-pulse-anim 1.8s infinite;
  white-space: nowrap;
  user-select: none;
}

.onair-floating-player.mode-mini .fp-unmute-overlay {
  padding: 3px 8px;
  font-size: 9.5px;
  bottom: 6px;
}

/* Radio Visual View (라디오 선택 시 화면에 뜨는 앨범아트 & 이퀄라이저) */
.fp-radio-view {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #090d16 0%, #1e1b4b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px;
  z-index: 2;
}

.fp-radio-thumb {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.onair-floating-player.mode-mini .fp-radio-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}

.fp-radio-info-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fp-radio-badge {
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: -0.2px;
}

.fp-radio-ch-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.fp-radio-prog-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.onair-floating-player.mode-mini .fp-radio-prog-title {
  display: none;
}

/* Equalizer Bars Animation */
.fp-equalizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin-top: 4px;
}

.eq-bar {
  width: 3px;
  background: #38bdf8;
  border-radius: 2px;
  animation: eqBounce 1.2s ease-in-out infinite alternate;
}

.eq-1 { height: 60%; animation-delay: 0.1s; }
.eq-2 { height: 95%; animation-delay: 0.35s; background: #60a5fa; }
.eq-3 { height: 40%; animation-delay: 0.2s; }
.eq-4 { height: 80%; animation-delay: 0.45s; background: #818cf8; }
.eq-5 { height: 50%; animation-delay: 0.25s; }

@keyframes eqBounce {
  0% { height: 20%; }
  50% { height: 95%; }
  100% { height: 40%; }
}

/* ==========================================================================
   Local Program Auto-Monitoring Reservation Styles (로컬 방송 자동 예약 모니터링)
   ========================================================================== */

/* 예약 버튼 및 뱃지 */
.onair-reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25) 0%, rgba(59, 130, 246, 0.15) 100%);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  padding: 2.5px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.onair-reserve-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.6);
  transform: translateY(-1px);
}

.onair-reserve-btn.has-active {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  border-color: #93c5fd;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.reserve-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 10px;
  margin-left: 2px;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
  animation: onair-pulse-anim 2s infinite;
}

/* 예약 모달 오버레이 */
.onair-reserve-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.onair-reserve-modal-overlay.active {
  opacity: 1;
}

/* 예약 모달 카드: 근무표 팝업 및 온에어 모달과 일치하는 클린 화이트/라이트 테마 */
.onair-reserve-modal-card {
  width: 100%;
  max-width: 530px;
  max-height: 90vh;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #1e293b !important;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onair-reserve-modal-overlay.active .onair-reserve-modal-card {
  transform: scale(1) translateY(0);
}

/* 예약 모달 헤더 */
.onair-reserve-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.reserve-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reserve-icon {
  font-size: 20px;
  background: #e0f2fe;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid #bae6fd;
}

.reserve-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.reserve-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.reserve-header-clock-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.reserve-header-clock-wrap.prominent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  margin-left: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.reserve-header-clock-wrap.prominent .reserve-clock-day {
  font-size: 13.5px;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: -0.2px;
}

.reserve-header-clock-wrap.prominent .reserve-clock-time {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.3px;
}

.reserve-clock-day {
  font-weight: 800;
  color: #0284c7;
  letter-spacing: -0.2px;
}

.reserve-clock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0284c7;
  animation: clockPulse 2s infinite ease-in-out;
}

@keyframes clockPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.reserve-subtitle {
  margin: 2px 0 0 0;
  font-size: 11.5px;
  color: #64748b;
}

/* 상단 컨트롤 영역 */
.reserve-top-controls {
  padding: 14px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reserve-master-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.master-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.master-toggle-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.master-toggle-desc {
  font-size: 11px;
  color: #64748b;
}

/* 스위치 토글 */
.reserve-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.reserve-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.reserve-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  transition: .3s;
  border-radius: 24px;
}

.reserve-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.reserve-switch input:checked + .reserve-slider {
  background-color: #0284c7;
}

.reserve-switch input:checked + .reserve-slider:before {
  transform: translateX(20px);
}

/* 프리셋 버튼 바 */
.reserve-presets-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.preset-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  margin-right: 2px;
}

.reserve-preset-btn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reserve-preset-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

/* '내 근무시간 연동' 기본 상태는 다른 버튼과 동일 */
.reserve-preset-btn.highlight-work {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

/* '내 근무시간 연동' 클릭 활성화 시에만 선명한 블루/시안 적용 */
#btn-preset-my-work.active,
.reserve-preset-btn.highlight-work.active {
  background: #0284c7 !important; background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important;
  font-weight: 700;
}
.reserve-preset-btn.highlight-work.active::after {
  content: ' ✓';
  font-weight: 800;
  color: #e0f2fe;
}

.reserve-preset-btn.btn-clear {
  color: #e11d48;
  border-color: #fecdd3;
  background: #fff1f2;
  margin-left: auto;
}

.reserve-preset-btn.btn-clear:hover {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #be123c;
}

/* 채널 선택 드롭다운 래퍼 & 팝오버 */
.reserve-channel-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.btn-channel-dropdown {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
  font-weight: 700 !important;
}

.btn-channel-dropdown:hover {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0284c7 !important;
}

.btn-channel-dropdown .dropdown-arrow {
  transition: transform 0.2s ease;
  color: #0284c7;
}

.reserve-channel-dropdown-wrap.is-open .btn-channel-dropdown .dropdown-arrow {
  transform: rotate(180deg);
}

.reserve-channel-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 220px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 8px;
  animation: onair-popover-enter 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onair-popover-enter {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.channel-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
}

.popover-title {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
}

.popover-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.popover-close-btn:hover {
  color: #0f172a;
}

.channel-popover-options {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.channel-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.channel-popover-item:hover {
  background: #f1f5f9;
}

.channel-popover-chk {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #0284c7;
}

.popover-item-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}

.badge-all { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.badge-1tv { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.badge-1radio { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.badge-1fm { background: #faf5ff; color: #9333ea; border: 1px solid #e9d5ff; }

.popover-item-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
}

.popover-item-count {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
}

.popover-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 3px 0;
}

/* 예약 주기 선택 바 & 선택 개수 현황 (프로그램 목록 바로 위 위치) */
.reserve-cycle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px dashed #e2e8f0;
}

.reserve-cycle-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reserve-cycle-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reserve-select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  outline: none;
  cursor: pointer;
}

.reserve-select:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

/* 프로그램 직접 추가 / 관리 토글 바 (프로그램 목록 아래 배치) */
.reserve-custom-mgmt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  padding: 8px 18px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}
.btn-toggle-custom-form,
.btn-reset-default-prog {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.btn-toggle-custom-form:hover {
  background: #f0f9ff;
  border-color: #0284c7;
  color: #0284c7;
}
.btn-reset-default-prog:hover {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #d97706;
}

/* 프로그램 직접 추가 접이식 폼 */
.reserve-custom-form {
  margin: 0 0 8px 0;
  padding: 12px;
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  border-radius: 8px;
  animation: fadeInDown 0.2s ease;
}
.custom-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.custom-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.custom-field label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}
.custom-field.field-grow {
  flex: 1;
  min-width: 140px;
}
.custom-field.field-time {
  width: 95px;
}
.custom-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #1e293b;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.custom-input:focus {
  border-color: #0284c7;
}
.custom-form-days-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.days-label {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}
.day-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: #334155;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  user-select: none;
}
.day-chip input {
  margin: 0;
  accent-color: #0284c7;
  cursor: pointer;
}
.custom-form-btns {
  margin-left: auto;
}
.btn-add-prog-submit {
  background: #0284c7;
  border: 1px solid #0284c7;
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-add-prog-submit:hover {
  background: #0369a1;
}

/* 로컬 프로그램 리스트 컨테이너 (하단 푸터 제거로 넉넉한 세로 공간 확보) */
.reserve-programs-container {
  flex: 1;
  min-height: 200px;
  max-height: 380px;
  overflow-y: auto;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #f8fafc;
}

.reserve-programs-container::-webkit-scrollbar {
  width: 6px;
}
.reserve-programs-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* 개별 프로그램 카드 (1행: 체크+채널+제목+방송중, 2행: 시간+요일 수직정렬) */
.reserve-prog-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 7px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.15s ease;
  cursor: pointer;
  gap: 4px;
}

.reserve-prog-item:hover {
  background: #fbfcfe;
  border-color: #cbd5e1;
  transform: translateX(2px);
}

.reserve-prog-item.selected {
  background: #f0f9ff;
  border-color: #7dd3fc;
}

/* 1행: [체크박스] [채널배지] [프로그램명] [🔴 방송 중] [✕ 삭제] */
.reserve-prog-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.reserve-prog-row1 .reserve-check-input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #0284c7;
  flex-shrink: 0;
  margin: 0;
}

/* 채널 뱃지 (고정 너비 44px) */
.ch-badge-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  text-align: center;
  width: 44px;
  min-width: 44px;
  box-sizing: border-box;
}

.ch-badge-tag.tag-1tv {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.ch-badge-tag.tag-1radio {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.ch-badge-tag.tag-1fm {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

/* 1행 프로그램 제목 */
.reserve-prog-row1 .reserve-prog-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

/* 1행 방송 중 뱃지 (제목 바로 옆에 표시) */
.reserve-prog-row1 .reserve-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 2px 6px;
  border-radius: 4px;
  animation: onairPulseBadge 1.5s infinite;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

/* 1행 삭제 버튼 (사용자 추가 프로그램) */
.reserve-prog-row1 .btn-delete-prog {
  background: transparent;
  border: none;
  color: #94a3b8;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.reserve-prog-row1 .btn-delete-prog:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* 2행: [시간] [요일] */
/* 시간 시작 위치('07')가 1행 제목 시작 위치('K')와 정확히 수직 라인을 맞춤 */
/* 18px(체크박스) + 8px(간격) + 44px(배지) + 8px(간격) = 정확히 78px 들여쓰기 */
.reserve-prog-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-left: 78px;
  box-sizing: border-box;
}

.reserve-prog-row2 .reserve-prog-time {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  min-width: auto;
}

.reserve-prog-row2 .reserve-days-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 1.5px 6px;
  border-radius: 4px;
  width: auto;
  min-width: auto;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@keyframes onairPulseBadge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.96); }
}

/* 예약 선택 현황 (예약 주기 바 우측 끝 배치) */
.reserve-status-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
  flex-shrink: 0;
}

#reserve-selected-count-text {
  font-size: 12px;
  font-weight: 800;
  color: #0284c7;
  white-space: nowrap;
}

.reserve-today-hint {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

/* 모달 하단 슬라이드/드래그 핸들 바 (핸드폰에서 위/아래 밀어서 닫기) */
.reserve-drag-handle-wrap {
  padding: 8px 0 12px 0;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.reserve-drag-handle-wrap:active,
.reserve-drag-handle-wrap.is-dragging {
  cursor: grabbing;
}

.reserve-drag-handle-wrap .onair-drag-bar {
  width: 48px;
  height: 4.5px;
  background: #cbd5e1;
  border-radius: var(--radius-full, 9999px);
  transition: all 0.2s ease;
}

.reserve-drag-handle-wrap:hover .onair-drag-bar,
.reserve-drag-handle-wrap.is-dragging .onair-drag-bar {
  background: #94a3b8;
  transform: scaleX(1.15);
}

.reserve-action-btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reserve-action-btn.btn-cancel {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.reserve-action-btn.btn-cancel:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.reserve-action-btn.btn-save {
  background: #0284c7;
  border: 1px solid #0284c7;
  color: #ffffff;
}

.reserve-action-btn.btn-save:hover {
  background: #0369a1;
}

/* 실시간 뱃지 옆 '예약 ▶' 버튼 */
.onair-reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  user-select: none;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.onair-reserve-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
  transform: translateY(-0.5px);
}

.onair-reserve-btn .reserve-play-icon {
  color: #64748b;
  transition: transform 0.15s ease;
}

.onair-reserve-btn:hover .reserve-play-icon {
  color: #0284c7;
  transform: scale(1.1);
}

/* 활성 예약이 있을 때 */
.onair-reserve-btn.has-active {
  background: #f0f9ff;
  border-color: #7dd3fc;
  color: #0369a1;
}

.onair-reserve-btn.has-active .reserve-play-icon {
  color: #0284c7;
}

.onair-reserve-btn.has-active .reserve-count-badge {
  background: #0284c7;
  color: #ffffff;
}

/* 마스터 스위치 OFF 시 회색 비활성 모드 */
.onair-reserve-btn.is-disabled {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}
.onair-reserve-btn.is-disabled .reserve-play-icon {
  color: #cbd5e1 !important;
}

/* TV / 라디오 공통 화면 하단 중간(bottom center) 볼륨 컨트롤러 */
.fp-player-volume-panel {
  display: none !important;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.2s ease;
  z-index: 50;
  user-select: none;
  touch-action: none;
}

/* 마우스 호버 또는 터치 시 5초 동안 활성화 */
.fp-player-volume-panel:hover,
.fp-player-volume-panel.show-volume {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 라디오 모드에서는 하단 센터 빈 공간에 항상 디스플레이 (Always Visible) */
.onair-floating-player.is-radio .fp-player-volume-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  bottom: 8px !important;
  background: rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 14px rgba(56, 189, 248, 0.25) !important;
}

.fp-vol-slider-wrap {
  width: 130px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  padding: 0 4px;
  position: relative;
}

.fp-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  touch-action: none;
  padding: 0;
  margin: 0;
}

.fp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #38bdf8;
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 1), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
}

.fp-vol-slider:active::-webkit-slider-thumb,
.fp-vol-slider::-webkit-slider-thumb:hover {
  transform: scale(1.22);
  background: #7dd3fc;
  box-shadow: 0 0 18px rgba(56, 189, 248, 1), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.fp-vol-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #38bdf8;
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 1), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
}

.fp-vol-slider:active::-moz-range-thumb,
.fp-vol-slider::-moz-range-thumb:hover {
  transform: scale(1.22);
  background: #7dd3fc;
  box-shadow: 0 0 18px rgba(56, 189, 248, 1);
}

.fp-vol-label {
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fp-vol-mute-btn {
  background: transparent;
  border: none;
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.fp-vol-mute-btn:hover {
  transform: scale(1.15);
  color: #7dd3fc;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   로컬 방송 자동 예약 모니터링 - 모바일 반응형
   통일된 2줄 레이아웃 (1행: 체크+채널+제목+방송중 / 2행: 시간+요일)
   ========================================================================== */
@media (max-width: 768px) {
  .reserve-prog-item {
    padding: 7px 10px;
    gap: 3px;
  }

  .reserve-prog-row1 {
    gap: 8px;
  }

  .reserve-prog-row1 .reserve-prog-title {
    font-size: 12.5px;
  }

  .reserve-prog-row1 .reserve-live-badge {
    font-size: 9.5px;
    padding: 1.5px 5px;
  }

  .reserve-prog-row2 {
    padding-left: 78px; /* 18px 체크박스 + 8px gap + 44px 배지 + 8px gap = 78px */
    gap: 6px;
  }

  .reserve-prog-row2 .reserve-prog-time {
    font-size: 11px;
  }

  .reserve-prog-row2 .reserve-days-tag {
    font-size: 10px;
    padding: 1px 5px;
  }

  /* 모바일 모달 패딩 최적화 */
  .reserve-programs-container {
    padding: 8px 12px !important;
  }
  .reserve-custom-mgmt-bar {
    padding: 8px 12px !important;
  }

  /* 모바일 예약 주기 및 선택 개수 바 */
  .reserve-cycle-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding-top: 6px !important;
  }
  .reserve-cycle-left {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .reserve-status-summary {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  #reserve-selected-count-text {
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  .reserve-today-hint {
    font-size: 10px !important;
  }
}

/* ================================================================
   🛠️ 정비일정 탭 전용: 송신 시설 점검 계획 툴바 및 달력 셀 스타일
   ================================================================ */

.maint-plan-toolbar {
  margin: 6px 12px 2px 12px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.95) 0%, rgba(224, 242, 254, 0.95) 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08);
  animation: maint-toolbar-fade 0.2s ease-out;
}

@keyframes maint-toolbar-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.maint-plan-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.maint-plan-icon {
  font-size: 14px;
  line-height: 1;
}

.maint-plan-title {
  font-size: 13px;
  font-weight: 800;
  color: #0369a1;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.maint-plan-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: #0284c7;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0;
}

.maint-plan-sub-text {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maint-plan-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-maint-sync,
.btn-maint-upload {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-maint-sync {
  background: #ffffff;
  color: #0369a1;
  border-color: #bae6fd;
}

.btn-maint-sync:hover {
  background: #f0f9ff;
  border-color: #38bdf8;
  color: #0284c7;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.15);
}

.btn-maint-upload {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
}

.btn-maint-upload:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  box-shadow: 0 3px 6px rgba(2, 132, 199, 0.35);
  transform: translateY(-0.5px);
}

.btn-maint-sync:active,
.btn-maint-upload:active,
.btn-maint-reset:active {
  transform: scale(0.97);
}

.btn-maint-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-maint-reset:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.12);
}

/* 팝업 카드 내 실시간 원클릭 색상 선택기 */
.plan-color-quick-picker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-right: 4px;
}

.btn-color-dot {
  background: none;
  border: 1px solid transparent;
  padding: 1px 3px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-color-dot:hover {
  background: #e2e8f0;
  transform: scale(1.18);
}

.btn-color-dot.active {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
  transform: scale(1.1);
}

/* 🎯 달력 셀 내 송신 시설 점검 일정 스타일 (박스/도구아이콘 없이 순수 텍스트 줄바꿈 나열) */
.cell-facility-plan-list {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  margin-top: 3px;
  width: 100%;
}

.cell-facility-plan-text {
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 0 1px;
  letter-spacing: -0.3px;
  transition: opacity 0.15s ease;
  background: transparent;
  border: none;
  text-align: center; /* 기본: 가운데 정렬 (정비 일정 탭에서는 아래 규칙으로 덮어씀) */
}

.cell-facility-plan-text:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.cell-facility-plan-text.plan-color-red {
  color: #dc2626 !important;
}
.cell-facility-plan-text.plan-color-blue {
  color: #2563eb !important;
}
.cell-facility-plan-text.plan-color-black {
  color: #1e293b !important;
}

@media (max-width: 600px) {
  .maint-plan-toolbar {
    margin: 4px 8px 2px 8px;
    padding: 6px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .maint-plan-actions {
    justify-content: flex-end;
  }
  .btn-maint-sync, .btn-maint-upload {
    flex: 1;
    justify-content: center;
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* ================================================================
   🛠️ 모달 팝업 내부: 송신 시설 점검 계획 동기화 툴바 및 편집 스타일
   ================================================================ */

.maint-modal-plan-container {
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.maint-modal-toolbar {
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.98) 0%, rgba(224, 242, 254, 0.98) 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08);
}

.maint-modal-plan-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.maint-modal-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #f1f5f9;
}

.maint-plan-section-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0369a1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-add-plan-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f0f9ff;
  border: 1px solid #7dd3fc;
  color: #0284c7;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-add-plan-item:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* 신규 계획 추가 폼 */
.maint-plan-add-form {
  background: #f8fafc;
  border: 1px dashed #38bdf8;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: maint-toolbar-fade 0.2s ease-out;
}

.input-plan-task {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.input-plan-task:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.plan-form-btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.btn-plan-save,
.btn-plan-cancel {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-plan-save {
  background: #0284c7;
  color: #ffffff;
}

.btn-plan-save:hover {
  background: #0369a1;
}

.btn-plan-cancel {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

.btn-plan-cancel:hover {
  background: #e2e8f0;
  color: #334155;
}

/* 점검 계획 리스트 */
.maint-plan-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maint-plan-item-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.maint-plan-item-card:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.maint-plan-item-card.card-color-red {
  border-left-color: #dc2626;
  background: #fffafa;
}
.maint-plan-item-card.card-color-blue {
  border-left-color: #2563eb;
  background: #f8faff;
}
.maint-plan-item-card.card-color-black {
  border-left-color: #334155;
  background: #ffffff;
}

.maint-plan-item-content {
  flex: 1;
  min-width: 0;
}

.maint-plan-item-text {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.5;
  word-break: keep-all;
}

.maint-plan-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  font-weight: 500;
}

.plan-color-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
}
.plan-color-tag.tag-red {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.plan-color-tag.tag-blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.plan-color-tag.tag-black {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.plan-color-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px;
}
.plan-color-picker-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}
.plan-color-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.plan-color-option input[type="radio"] {
  display: none;
}
.plan-color-option.active.opt-black {
  background: #334155;
  color: #ffffff;
  border-color: #334155;
}
.plan-color-option.active.opt-blue {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.plan-color-option.active.opt-red {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

/* 🎯 [사용자 요구] 앞쪽 현재 글자색 점 1개 및 클릭 시 나머지 2개 색상 선택 미니 팝오버 */
.plan-color-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 10;
  pointer-events: auto;
}

.btn-current-color-dot {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-current-color-dot:hover {
  transform: scale(1.15);
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2);
}

.plan-color-dropdown-menu {
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
  background: #ffffff;
  border: 1.5px solid #38bdf8;
  border-radius: 20px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.22);
  z-index: 50;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-50%) scale(0.9); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.btn-color-pick-item {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.btn-color-pick-item:hover {
  transform: scale(1.3);
}

.maint-plan-item-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.btn-plan-action {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  transition: all 0.15s ease;
  line-height: 1.2;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-plan-edit {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

.btn-plan-edit:hover,
.btn-plan-edit:active {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #7dd3fc !important;
  transform: scale(0.96);
}

.btn-plan-delete {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fca5a5 !important;
}

.btn-plan-delete:hover,
.btn-plan-delete:active {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #f87171 !important;
  transform: scale(0.96);
}

.maint-plan-item-card {
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  position: relative;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.maint-plan-item-card:active {
  cursor: grabbing;
}

.maint-plan-item-card .maint-plan-item-content {
  pointer-events: none;
  user-select: none;
}

.maint-plan-item-card .maint-plan-item-actions {
  pointer-events: auto;
}

.maint-plan-item-card.is-selected {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.28), 0 2px 6px rgba(2, 132, 199, 0.12) !important;
  background: #f0f9ff !important;
}

.maint-plan-item-card.dragging {
  opacity: 0.35;
  border: 2px dashed #0284c7 !important;
  background: #e0f2fe !important;
  box-shadow: 0 8px 18px rgba(2, 132, 199, 0.2) !important;
}

.maint-plan-item-card.drag-over-top {
  border-top: 3px solid #0284c7 !important;
  background: #f0fdf4 !important;
}

.maint-plan-item-card.drag-over-bottom {
  border-bottom: 3px solid #0284c7 !important;
  background: #f0fdf4 !important;
}

.maint-plan-item-card.drag-over {
  outline: 2px dashed #0284c7 !important;
  background: #f0f9ff !important;
}

.maint-plan-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px 4px 0;
  cursor: grab;
  color: #94a3b8;
  touch-action: none;
  flex-shrink: 0;
  transition: color 0.15s ease;
  pointer-events: none; /* 부모 카드로 드래그 이벤트 통합 */
}

.maint-plan-item-card:hover .maint-plan-drag-handle {
  color: #0284c7;
}

.maint-plan-drag-handle svg {
  display: block;
}

.maint-plan-empty-notice {
  text-align: center;
  padding: 24px 12px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #e2e8f0;
}

@media (max-width: 600px) {
  .maint-modal-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .maint-modal-toolbar .maint-plan-actions {
    justify-content: flex-end;
  }
}

/* 🎯 [사용자 요청] 정비일정 탭 달력 날짜 클릭 시 나오는 팝업에서는 송신 시설 점검 계획(동기화/파일첨부) 툴바 제거 */
#day-modal .maint-modal-toolbar {
  display: none !important;
}

/* 🎯 [사용자 요청] 정비일정 탭 더블 클릭/더블 탭 전용: 화면 정중앙(가운데)에 뜨는 송신 시설 점검 계획 동기화 팝업 */
#maint-fast-sync-modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px;
  z-index: 105;
}

#maint-fast-sync-modal-overlay .sheet-handle {
  display: none !important;
}

#maint-fast-sync-modal-overlay .modal-card,
.maint-fast-sync-sheet {
  max-width: 440px;
  width: 92%;
  margin: auto !important;
  border-radius: 20px !important;
  background: #ffffff;
  border: 1.5px solid #bae6fd;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  padding: 16px 20px 22px;
  box-sizing: border-box;
  transform: scale(0.92) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

#maint-fast-sync-modal-overlay.active .modal-card,
#maint-fast-sync-modal-overlay.active .maint-fast-sync-sheet {
  transform: scale(1) !important;
}

.maint-fast-sync-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 10px;
  border-bottom: 1.5px solid #e0f2fe;
}

.maint-fast-sync-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maint-fast-sync-title {
  font-size: 16px;
  font-weight: 800;
  color: #0369a1;
  letter-spacing: -0.3px;
}

.maint-fast-sync-body {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.maint-fast-sync-folder-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.maint-folder-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.maint-folder-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}

.btn-maint-set-folder {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #7dd3fc;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-maint-set-folder:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.maint-folder-path-text {
  font-size: 11.5px;
  font-family: monospace, sans-serif;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  word-break: break-all;
  user-select: all;
}

.maint-fast-sync-info-row {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 11px 14px;
}

.maint-fast-sync-info-row .maint-plan-sub-text {
  font-size: 12px;
  font-weight: 600;
  color: #0284c7;
  word-break: break-all;
}

.maint-fast-sync-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.maint-fast-sync-actions .btn-maint-sync {
  width: 100%;
  justify-content: center;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #0284c7;
  color: #ffffff;
  border: 1px solid #0284c7;
}

.maint-fast-sync-actions .btn-maint-sync:hover {
  background: #0369a1;
  border-color: #0369a1;
}

/* 🎯 [사용자 요청] 스마트폰/모바일에서는 점검계획 폴더 경로 설정 영역을 화면에서 숨기고 안내 문구 표시 */
/* ⚠️ max-width 기준 대신 터치/포인터 기준 사용: PC에서 창을 좁혀도 버튼이 사라지지 않도록 */
@media (hover: none) and (pointer: coarse) {
  .maint-fast-sync-folder-box,
  #btn-fast-maint-set-folder,
  #btn-fast-maint-prompt-path,
  .maint-folder-path-text {
    display: none !important;
  }
  .maint-fast-sync-mobile-notice {
    display: block !important;
  }
}

/* ========================================================
   🎯 정비메모 (송신소 & TVR) 전용 전체 화면 디자인 시스템
   ======================================================== */
.maint-memo-view-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 20px 80px 20px;
  box-sizing: border-box;
  animation: memoFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* 1. 상단 헤더 & 날짜 네비게이터 */
.memo-view-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.memo-view-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.memo-view-title-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.memo-title-icon {
  font-size: 20px;
}

.memo-view-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.memo-view-badge {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 9999px;
  padding: 2px 8px;
}

.memo-view-subtitle {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

/* 날짜 이동 네비게이터 */
.memo-date-navigator {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 4px;
}

.btn-memo-nav-arrow {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  height: 32px;
  width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-memo-nav-arrow:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.memo-date-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.memo-date-display-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 32px;
  background: #ffffff;
  border: 1.5px solid #0284c7;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.12);
  transition: all 0.15s ease;
  position: relative;
  z-index: 1;
}

.memo-date-display-btn:hover {
  background: #f0f9ff;
  border-color: #0369a1;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2);
}

.memo-cal-icon {
  font-size: 14px;
  line-height: 1;
}

.memo-date-display-label {
  font-size: 13px;
  font-weight: 800;
  color: #0369a1;
  white-space: nowrap;
}

.memo-date-picker-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  box-sizing: border-box;
}

.memo-date-picker-input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.btn-memo-today {
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #1d4ed8;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-memo-today:hover {
  background: #1d4ed8;
}

/* 2. 3대 개소 입력 카드 그리드 */
.memo-three-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.memo-facility-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.memo-facility-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* 🎯 [사용자 핵심 요구] 오늘 점검 대상 개소 선명한 파란 테두리 하이라이트 */
.memo-facility-card.is-today-active {
  border: 2px solid #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 8px 24px rgba(37, 99, 235, 0.12) !important;
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 70px) !important;
}

.facility-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.facility-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.facility-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.badge-uam {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.badge-cheongwon {
  background: #fdf4ff;
  color: #a21caf;
  border: 1px solid #f5d0fe;
}

.badge-tvr {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.facility-card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.facility-today-indicator {
  font-size: 11px;
  font-weight: 800;
  background: #2563eb;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: -0.2px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  animation: pulseIndicator 2s infinite ease-in-out;
}

@keyframes pulseIndicator {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.facility-plan-info {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.memo-facility-card.is-today-active .facility-plan-info {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}

/* TVR 개소 선택기 */
.tvr-selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
}

.tvr-select-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.tvr-station-select {
  flex: 1;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  padding: 0 6px;
  cursor: pointer;
}

.facility-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memo-input-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.memo-input-row.author-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.memo-input-row.author-row label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.memo-author-input {
  flex: 1;
  height: 30px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.memo-author-input:focus {
  border-color: #2563eb;
}

.memo-content-textarea {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  min-height: 76px;
  transition: border-color 0.15s ease;
}

.memo-content-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.facility-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.btn-save-memo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  background: #0284c7;
  color: #ffffff;
  border: 1px solid #0284c7;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-save-memo:hover {
  background: #0369a1;
  border-color: #0369a1;
  transform: translateY(-1px);
}

.facility-recent-memo-preview {
  margin-top: 12px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 8px;
  font-size: 11.5px;
  color: #64748b;
}

.recent-memo-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.recent-memo-item:hover {
  background: #f1f5f9;
}

/* 3. 검색 및 타임라인 히스토리 섹션 */
.memo-timeline-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* 🔍 [사용자 요청] 정비메모 검색 섹션 헤더 (제목, 아이콘, 건수 뱃지, 설명) */
.memo-search-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1.5px solid #f1f5f9;
  padding-bottom: 10px;
}

.memo-search-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.memo-search-icon-badge {
  font-size: 16px;
  line-height: 1;
}

.memo-search-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.memo-search-result-badge {
  font-size: 11px;
  font-weight: 800;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 2px 8px;
  border-radius: 9999px;
}

.memo-search-subtitle {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.memo-search-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}

.search-input-group {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 480px;
  display: flex;
  align-items: center;
}

.search-input-group .search-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
}

.memo-search-input {
  width: 100%;
  height: 36px;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  padding: 0 32px 0 36px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.memo-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-clear-search {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 6px;
}

.memo-filter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.memo-filter-chips {
  display: inline-flex;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
}

.memo-filter-chip {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.memo-filter-chip.active {
  background: #ffffff;
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.memo-month-select {
  height: 32px;
  border: 1.5px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  padding: 0 4px;
  max-width: 90px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}

.memo-month-select optgroup {
  font-weight: 800;
  color: #0284c7;
  font-size: 11.5px;
  background: #f8fafc;
}

.memo-month-select option {
  font-weight: 600;
  color: #1e293b;
  font-size: 12px;
  background: #ffffff;
}

.btn-memo-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  padding: 0;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-memo-sort:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

/* 🎯 [사용자 요청] 타임라인 피드 리스트 컨테이너 (최대 3개 높이 제한, 4개 이상 시 PC 스크롤바 & 모바일 터치 드래그 스크롤) */
.memo-timeline-container {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 4px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.memo-timeline-container::-webkit-scrollbar {
  width: 6px;
}

.memo-timeline-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.memo-timeline-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.memo-timeline-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 타임라인 피드 리스트 */
.memo-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}

.memo-timeline-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.15s ease;
}

.memo-timeline-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.memo-timeline-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.memo-card-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.memo-card-date-badge {
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
  background: #e2e8f0;
  padding: 2px 7px;
  border-radius: 5px;
}

.memo-card-facility-tag {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
}

.tag-uam { background: #dbeafe; color: #1e40af; }
.tag-cheongwon { background: #fce7f3; color: #9d174d; }
.tag-tvr { background: #d1fae5; color: #065f46; }

.memo-card-author-info {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}

.memo-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-memo-action {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-memo-edit { color: #2563eb; }
.btn-memo-edit:hover { background: #eff6ff; border-color: #93c5fd; }
.btn-memo-delete { color: #dc2626; }
.btn-memo-delete:hover { background: #fef2f2; border-color: #fca5a5; }

.memo-card-content {
  font-size: 13px;
  line-height: 1.55;
  color: #1e293b;
  white-space: pre-wrap;
  word-break: break-word;
}

.memo-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px dashed #e2e8f0;
  padding-top: 6px;
  margin-top: 4px;
}

.memo-timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 16px;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
}

/* 모바일 반응형 (스마트폰 & 태블릿) */
@media (max-width: 960px) {
  .memo-three-cards-grid {
    grid-template-columns: 1fr;
  }
  .memo-search-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .search-input-group {
    max-width: 100%;
  }
  .memo-view-header-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .memo-date-navigator {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 3px 4px;
    gap: 4px;
  }
  .memo-date-display-btn {
    padding: 0 8px;
    gap: 4px;
  }
  .memo-date-display-label {
    font-size: 12.5px;
  }
  .btn-memo-nav-arrow {
    width: 30px;
    height: 30px;
  }
  .btn-memo-today {
    padding: 0 8px;
    font-size: 11.5px;
    height: 30px;
  }
  .memo-search-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .memo-search-title {
    font-size: 14.5px;
  }
  .memo-search-subtitle {
    font-size: 11px;
  }
  .memo-filter-controls {
    width: 100%;
    justify-content: flex-start;
    gap: 5px;
  }
  .memo-filter-chips {
    gap: 2px;
    padding: 2px;
  }
  .memo-filter-chip {
    padding: 4px 6px;
    font-size: 11px;
  }
  .memo-month-select {
    height: 30px;
    font-size: 11px;
    padding: 0 4px;
    max-width: 82px;
  }
  .btn-memo-sort {
    width: 30px;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    font-size: 12px;
  }
}

/* ==========================================================================
   송출 근무표 상단 메뉴 팝업 모달 & 공유/내보내기 & 로그인 관리 스타일
   ========================================================================== */

.header-menu-modal-overlay {
  z-index: 10005;
}

.header-menu-modal-card {
  max-width: 520px;
  border-radius: 20px 20px 0 0;
  max-height: 90vh;
}

@media (min-width: 640px) {
  .header-menu-modal-overlay {
    align-items: center;
  }
  .header-menu-modal-card {
    border-radius: 20px;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }
  .header-menu-modal-overlay.active .header-menu-modal-card {
    transform: scale(1);
    opacity: 1;
  }
}

.header-menu-body {
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 메뉴 카드 공통 */
.menu-section-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.menu-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.menu-section-icon {
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.menu-section-titles {
  flex: 1;
  min-width: 0;
}

.menu-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
  letter-spacing: -0.2px;
}

.menu-section-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.35;
}

/* 폼 행 & 라벨 */
.menu-form-row {
  margin-bottom: 12px;
}

.menu-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}

.menu-select-wrap {
  position: relative;
}

.menu-select-input {
  width: 100%;
  height: 40px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.menu-select-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* 출력 대상 & 로그인 계정 표시 뱃지 박스 */
.export-target-badge-box,
.logged-in-user-badge-box {
  width: 100%;
  min-height: 40px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.export-target-badge-box {
  background: #f0f7ff;
  border-color: #bfdbfe;
}

.export-target-icon,
.logged-in-user-icon {
  font-size: 15px;
  line-height: 1;
}

.export-target-text {
  font-size: 13.5px;
  font-weight: 700;
  color: #1d4ed8;
  letter-spacing: -0.2px;
}

.logged-in-user-badge-box {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.logged-in-user-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.2px;
}

/* 포맷 선택 칩 그룹 */
.export-format-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.export-format-chip {
  flex: 1 1 calc(25% - 6px);
  min-width: 72px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.18s ease;
}

.export-format-chip:hover {
  border-color: #93c5fd;
  color: #1d4ed8;
}

.export-format-chip.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
}

/* 실행 액션 버튼들 */
.export-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.btn-menu-action {
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  border: none;
}

.btn-menu-action:active {
  transform: scale(0.97);
}

.btn-share-action {
  flex: 1.5;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-share-action:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.btn-download-action {
  flex: 1.2;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
}

.btn-download-action:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-print-action {
  flex: 0 0 68px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #475569;
}

.btn-print-action:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 로그인 관리 카드 */
.auth-buttons-row {
  display: flex;
  gap: 8px;
}

.btn-auth-menu {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.btn-auth-menu:active {
  transform: scale(0.97);
}

.btn-change-pw-trigger {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  color: #1d4ed8;
}

.btn-change-pw-trigger:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.btn-logout-action {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #dc2626;
  max-width: 110px;
}

.btn-logout-action:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* 비밀번호 변경 폼 */
.change-pw-collapse-box {
  margin-top: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.change-pw-guide {
  font-size: 11.5px;
  color: #2563eb;
  font-weight: 600;
  margin-bottom: 10px;
}

.pw-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-text-input {
  width: 100%;
  height: 38px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 38px 0 10px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.menu-text-input:focus {
  border-color: #2563eb;
  background: #ffffff;
}

.btn-pw-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.btn-pw-eye:hover {
  opacity: 1;
}

.change-pw-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-pw-submit {
  flex: 1;
  height: 36px;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-pw-submit:hover {
  background: #1d4ed8;
}

.btn-pw-cancel {
  height: 36px;
  padding: 0 14px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.btn-pw-cancel:hover {
  background: #e2e8f0;
}

/* ==========================================================================
   PWA 스마트폰 홈 화면 앱 설치 카드 스타일
   ========================================================================== */
.pwa-section-card {
  margin-top: 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
  border: 1px solid #bbf7d0;
}

.pwa-install-desc {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 12px;
  word-break: keep-all;
}

.btn-pwa-install {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-pwa-install:hover {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}

.btn-pwa-install:active {
  transform: scale(0.98);
}

.btn-pwa-install.installed {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  box-shadow: none;
  cursor: default;
}

/* ==========================================================================
   전체 화면 로그인 잠금 오버레이 스타일
   ========================================================================== */

.app-login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.app-login-card {
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 24px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  text-align: center;
  box-sizing: border-box;
  animation: loginCardPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginCardPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.login-brand-icon {
  width: 62px;
  height: 62px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.login-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.4px;
}

.login-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 22px 0;
  font-weight: 500;
}

.login-select-row, .login-input-row {
  margin-bottom: 14px;
  text-align: left;
}

.login-select-label, .login-input-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 5px;
}

.login-select-wrap {
  position: relative;
  width: 100%;
}

.login-account-select {
  width: 100%;
  height: 44px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.login-account-select:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.login-pw-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.login-pw-input {
  width: 100%;
  height: 48px;
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  font-size: 16px;
  text-align: center;
  letter-spacing: 2px;
  color: #0f172a;
  font-weight: 700;
  outline: none;
  transition: all 0.2s ease;
  padding: 0 40px;
  box-sizing: border-box;
}

.login-pw-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.btn-login-submit {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 14px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
}

.btn-login-submit:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

.btn-login-submit:active {
  transform: scale(0.98);
}

.login-error-msg {
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 10px;
  animation: loginShake 0.3s ease;
}

@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.login-hint-text {
  font-size: 12px;
  color: #64748b;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
  line-height: 1.4;
}

/* --- Firebase Auth 로그인 화면 추가 요소 (auth.js) --- */
.auth-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 0 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.auth-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: authSpin 0.8s linear infinite;
}

@keyframes authSpin {
  to { transform: rotate(360deg); }
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}

.auth-tab {
  flex: 1;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab.active {
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.auth-forgot-btn {
  display: block;
  margin: 8px 0 0 auto;
  padding: 2px 0;
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-forgot-btn:hover {
  color: #1e40af;
}

.auth-guest-form {
  padding: 6px 0 4px;
}

.auth-guest-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  margin: 8px 0 6px;
}

.btn-login-submit:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.btn-auth-menu.auth-disabled,
.btn-auth-menu:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}


/* ==========================================================================
   고화질 캡처 및 출력 전용 달력 테이블 스타일 (Export Table Styles)
   A4 가로 1장 완벽 맞춤 및 메인 달력과 100% 동일한 컴팩트 크기
   ========================================================================== */

.exp-wrapper {
  background: #ffffff;
  padding: 20px 24px 14px 24px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  color: #0f172a;
  box-sizing: border-box;
  width: 1080px;
  margin: 0 auto;
}

.exp-header-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 2px solid #1e293b;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.exp-title-block h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 3px 0;
  letter-spacing: -0.4px;
}

.exp-title-block p {
  font-size: 12.5px;
  font-weight: 600;
  color: #2563eb;
  margin: 0;
}

.exp-meta-block {
  text-align: right;
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}

.exp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1.5px solid #cbd5e1;
}

.exp-th {
  height: 32px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  text-align: center;
  vertical-align: middle;
}

.exp-th-sun {
  background: #fee2e2;
  color: #dc2626;
}

.exp-th-sat {
  background: #e0e7ff;
  color: #2563eb;
}

.exp-th-day {
  background: #f1f5f9;
  color: #334155;
}

/* 셀 높이 (5주는 80px, 6주는 67px로 1장에 쏙 들어가도록 최적화) */
.exp-td {
  width: 14.285%;
  height: 80px;
  border: 1px solid #e2e8f0;
  vertical-align: top;
  padding: 5px 6px;
  box-sizing: border-box;
  background: #ffffff;
  overflow: hidden;
}

.exp-wrapper.weeks-6 .exp-td {
  height: 67px;
  padding: 4px 5px;
}

.exp-wrapper.weeks-5 .exp-td {
  height: 80px;
  padding: 5px 6px;
}

.exp-td-other {
  background: #f8fafc;
  opacity: 0.45;
}

.exp-td-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.exp-day-num {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.exp-day-sun {
  color: #dc2626;
}

.exp-day-sat {
  color: #2563eb;
}

.exp-day-weekday {
  color: #1e293b;
}

.exp-holiday-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: #dc2626;
  background: #fee2e2;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid #fca5a5;
  white-space: nowrap;
}

/* 🎯 [정비 근무자 & 송출부장 전용 미니 근무 뱃지] - 메인 달력과 100% 동일한 컴팩트 크기 */
.exp-maint-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2px;
  min-height: 18px;
}

.exp-maint-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 17px;
  padding: 0 4px;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 3px;
  border-width: 1.2px;
  border-style: solid;
  line-height: 1;
  box-sizing: border-box;
  letter-spacing: -0.2px;
}

/* 뱃지 스타일 (단일 근무 박스: 셀 너비의 절반 크기로 컴팩트하게 축소 및 중앙 정렬) */
.exp-badge {
  display: block;
  width: 50%;
  min-width: 54px;
  max-width: 72px;
  margin: 3px auto 0 auto;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  padding: 3px 4px;
  box-sizing: border-box;
  letter-spacing: -0.2px;
}

.exp-badge-shift {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #334155;
}

.exp-badge-bi {
  background: #f4fbf8;
  border: 1.5px solid #a7f3d0;
  color: #059669;
}

.exp-badge-leave {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #dc2626;
}

.exp-badge-sub {
  background: #fff7ed;
  border: 1.5px solid #fdba74;
  color: #ea580c;
}

.exp-badge-orange {
  background: #fff7ed;
  border: 1.5px solid #fed7aa;
  color: #ea580c;
}

.exp-badge-purple {
  background: #f5f3ff;
  border: 1.5px solid #ddd6fe;
  color: #7c3aed;
}

.exp-badge-dual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 4px;
}

.exp-mini-tag {
  display: inline-block;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.exp-tag-shift {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.exp-tag-sub {
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #ea580c;
}

.exp-plus {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

/* 정비 점검 계획 */
.exp-plans-wrap {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1.5px;
}

.exp-plan-line {
  font-size: 9.5px;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.3px;
}

/* 🎯 [사용자 요청] 정비일정 전체 내보내기 전용: TVR, 계획정파, 정기점검 등 모든 일정이 잘림 없이 100% 온전히 출력 */
.exp-wrapper.target-maint-facility .exp-td {
  height: auto !important;
  min-height: 84px !important;
  overflow: visible !important;
  padding: 4px 5px !important;
}

.exp-wrapper.target-maint-facility .exp-plans-wrap {
  margin-top: 1px;
  gap: 1.5px;
}

.exp-wrapper.target-maint-facility .exp-plan-line {
  font-size: 9px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.35px;
}

/* 4교대 종합 리스트 */
.exp-all-shift-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.exp-all-shift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  padding: 0 1px;
}

.exp-all-name {
  color: #475569;
  font-weight: 600;
}

.exp-all-pill {
  display: inline-block;
  min-width: 19px;
  padding: 0 3px;
  border-radius: 3px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
}

.exp-all-pill.pill-il, .exp-all-pill.pill-ya, .exp-all-pill.pill-jo {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.exp-all-pill.pill-bi {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.exp-all-pill.pill-leave {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.exp-all-pill.pill-sub {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #fdba74;
}

.exp-footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 10.5px;
  color: #64748b;
  padding-top: 4px;
}

/* ==========================================================================
   송출센터 근무지정표 (공유/내보내기 전용 HWP 완벽 재현 양식)
   송출제어 4인 + 송신정비 4인 월간 그리드 뷰
   ========================================================================== */
.roster-export-wrapper {
  background: #ffffff;
  padding: 24px 28px 20px 28px;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', Dotum, sans-serif;
  color: #111111;
  box-sizing: border-box;
  width: 1080px;
  margin: 0 auto;
}

.roster-header-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 4px;
}

.roster-title-area {
  flex: 1;
  text-align: center;
  padding-left: 140px;
}

.roster-main-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  margin: 0;
  color: #0f172a;
}

.roster-approval-area {
  width: 140px;
}

.roster-approval-tbl {
  border-collapse: collapse;
  margin-left: auto;
  border: 1.5px solid #334155;
}

.roster-appr-stamp-title {
  border: 1px solid #64748b;
  width: 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  background: #f8fafc;
  padding: 3px 1px;
  color: #1e293b;
}

.roster-appr-role-cell {
  border: 1px solid #64748b;
  width: 58px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 0;
  background: #f8fafc;
  color: #1e293b;
}

.roster-appr-blank-cell {
  border: 1px solid #64748b;
  height: 44px;
  background: #ffffff;
}

.roster-grid-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1.5px solid #334155;
  text-align: center;
}

.roster-grid-tbl th,
.roster-grid-tbl td {
  border: 1px solid #64748b;
  box-sizing: border-box;
}

.roster-col-cat {
  width: 46px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.3px;
  vertical-align: middle;
  text-align: center;
  line-height: 1.25;
}

.roster-col-name {
  width: 50px;
  background: #f8fafc;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
  vertical-align: middle;
  text-align: center;
}

.roster-th-header-cell {
  background: #f1f5f9;
  font-size: 11.5px;
  font-weight: 800;
  color: #1e293b;
  padding: 5px 0;
  vertical-align: middle;
}

.roster-cell-num {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 0;
  color: #334155;
  vertical-align: middle;
}

.roster-cell-num.sun,
.roster-cell-num.orange {
  color: #c2410c;
  background: #fed7aa;
}

.roster-cell-num.sat {
  color: #1d4ed8;
  background: #fed7aa;
}

.roster-cell-day {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 0;
  color: #334155;
  vertical-align: middle;
}

.roster-cell-day.sun,
.roster-cell-day.orange {
  color: #c2410c;
  background: #fed7aa;
}

.roster-cell-day.sat {
  color: #1d4ed8;
  background: #fed7aa;
}

.roster-shift-row {
  height: 29px;
}

.roster-shift-cell {
  font-size: 13.5px;
  font-weight: 800;
  padding: 0;
  vertical-align: middle;
  line-height: 1;
  text-align: center;
}

.roster-shift-cell.is-orange,
.roster-shift-cell.is-sun,
.roster-shift-cell.is-sat {
  background: #ffedd5;
}

.roster-sym-circle {
  font-size: 14px;
  color: #0f172a;
}

.roster-sym-black {
  font-size: 13px;
  color: #0f172a;
}

.roster-sym-bullseye {
  font-size: 14px;
  color: #0f172a;
}

.roster-sym-cross {
  font-size: 13px;
  color: #64748b;
}

.roster-sym-leave {
  font-size: 11.5px;
  color: #dc2626;
  font-weight: 800;
}

.roster-sym-dual {
  font-size: 10px;
  letter-spacing: -0.5px;
  color: #0f172a;
}

/* 🎯 [사용자 요청] 대근(복합근무) 시 두 기호 시간순 위/아래 2열 수직 배치 - 칸 크기(높이) 불변 보장 */
.roster-cell-dual {
  padding: 0 !important;
  vertical-align: middle !important;
}

.roster-dual-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  gap: 0px !important;
  line-height: 1 !important;
}

.roster-dual-sym {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  height: 11px !important;
  width: 100% !important;
  color: #0f172a !important;
}

.roster-dual-sym.roster-sym-leave {
  color: #dc2626 !important;
}

.roster-legend-container {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.6;
  color: #1e293b;
}

.roster-legend-title {
  font-weight: 800;
  font-size: 11.5px;
  margin-bottom: 2px;
}

.roster-legend-line {
  font-weight: 500;
}

.roster-disaster-title {
  margin-top: 5px;
  font-weight: 800;
  font-size: 11.5px;
}

.roster-disaster-desc {
  font-weight: 500;
}

/* ==========================================================================
   🎯 [사용자 요청] 정비메모 검색 결과 전용 고화질 캡처 및 출력/인쇄 스타일
   ========================================================================== */
.memo-export-wrapper {
  background: #ffffff;
  padding: 24px 28px 20px 28px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  color: #0f172a;
  box-sizing: border-box;
  width: 1080px;
  margin: 0 auto;
}

.memo-export-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 2.5px solid #0f172a;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.memo-export-title-block h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.4px;
}

.memo-export-title-block p {
  font-size: 12.5px;
  font-weight: 600;
  color: #0284c7;
  margin: 0;
}

.memo-export-meta-block {
  text-align: right;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}

.memo-export-filter-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: 12px;
}

.memo-filter-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.memo-filter-badge-item .lbl {
  color: #64748b;
  font-weight: 600;
}

.memo-filter-badge-item .val {
  color: #0f172a;
  font-weight: 700;
}

.memo-filter-badge-item.count-badge {
  margin-left: auto;
}

.memo-filter-badge-item .val.highlight {
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}

.memo-export-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 2px solid #334155;
  border-bottom: 1.5px solid #cbd5e1;
}

.memo-export-table th {
  background: #f1f5f9;
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 6px;
  border: 1px solid #cbd5e1;
  text-align: center;
  vertical-align: middle;
}

.memo-exp-cell {
  padding: 10px 8px;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  color: #1e293b;
  vertical-align: top;
  line-height: 1.55;
  word-break: break-word;
}

.memo-exp-no {
  text-align: center;
  color: #64748b;
  font-weight: 600;
}

.memo-exp-date {
  text-align: center;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.memo-exp-target {
  text-align: center;
}

.memo-exp-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.memo-exp-badge.tag-uam {
  background: rgba(3, 105, 161, 0.12);
  color: #0369a1;
  border: 1px solid rgba(3, 105, 161, 0.3);
}

.memo-exp-badge.tag-cheongwon {
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.3);
}

.memo-exp-badge.tag-tvr {
  background: rgba(109, 40, 217, 0.12);
  color: #6d28d9;
  border: 1px solid rgba(109, 40, 217, 0.3);
}

.memo-exp-author {
  text-align: center;
  font-weight: 600;
  color: #475569;
}

.memo-exp-content-inner {
  font-size: 12.5px;
  color: #0f172a;
}

.memo-export-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 10.5px;
  color: #94a3b8;
}