/* 내부 페이지(대시보드/캘린더/관리자/환경설정/e밀카드) 디자인 테마.
   3가지 선택형 테마를 [data-ui-theme] 값(계정별 저장, 환경설정에서 선택)으로 스위칭한다.
   style.css는 거의 모든 요소를 CSS 변수로 그리므로, 여기서 그 변수만 테마별로 덮어써서
   카드/버튼/표/캘린더 등 전체에 일관되게 적용한다(선택자 하나하나 새로 안 만들어도 됨).
   - green(기본): 밥장부모바일 실브랜드(H:\밥장부_인사이트_모바일_2단계_고도화_프로젝트) 이식
   - blue: 풀무원 디자인밀 레퍼런스의 비비드 블루
   - gmnavy: 이전 GM_NextGen_Dining_Design_Concept.pptx 기반 다크네이비 시안(무드보드 D안) 복원
   2026-09-06. 이 파일은 dashboard.ejs/calendar.ejs/admin.ejs/settings.ejs/qr.ejs 에서만 불러오므로,
   로그인 화면(별도 gm-login-theme.css)에는 영향 없음. */

/* 2026-10-23 총무부 요청으로 기본 테마를 GM 블루(gmblue)로 변경. 기존 그린은 [data-ui-theme="green"]로
   그대로 남겨둠(환경설정에서 선택 가능). 변경 전 전체 디자인은 backup_design_20261023/ 에 보관. */
:root {
  --bg: #F3F8FF;
  --card-bg: #FFFFFF;
  --text: #0B1F44;
  --muted: #5A6B85;
  --border: rgba(11, 60, 140, 0.12);
  --primary: #0B5BD3;
  --primary-rgb: 11, 91, 211;
  --primary-hover: #0847A8;
  --danger: #C6412A;
  --radius: 18px;
  --card-blur: 0px;
  --card-shadow: 0 1px 2px rgba(11, 40, 100, 0.06), 0 8px 24px rgba(11, 40, 100, 0.08);
  --bg-a: radial-gradient(700px 400px at 88% -5%, rgba(11, 91, 211, 0.10), transparent 60%);
  --bg-b: radial-gradient(600px 400px at -5% 100%, rgba(11, 91, 211, 0.06), transparent 60%);
  --bg-c: linear-gradient(165deg, #F5F9FF 0%, #EAF2FD 60%, #DFEAFA 100%);
  --grain-opacity: 0.02;
  --grain-blend: multiply;
}

:root[data-ui-theme="green"] {
  --bg: #F7FBF8;
  --card-bg: #FFFFFF;
  --text: #17211C;
  --muted: #5B6B63;
  --border: rgba(23, 33, 28, 0.1);
  --primary: #1BAA5C;
  --primary-rgb: 27, 170, 92;
  --primary-hover: #14903F;
  --danger: #C6412A;
  --card-shadow: 0 1px 2px rgba(23, 33, 28, 0.05), 0 8px 24px rgba(23, 33, 28, 0.06);
  --bg-a: radial-gradient(700px 400px at 88% -5%, rgba(27, 170, 92, 0.08), transparent 60%);
  --bg-b: radial-gradient(600px 400px at -5% 100%, rgba(27, 170, 92, 0.06), transparent 60%);
  --bg-c: linear-gradient(165deg, #F7FBF8 0%, #EEF5F0 60%, #E6F1EA 100%);
}

:root[data-ui-theme="blue"] {
  --bg: #F5F8FE;
  --card-bg: #FFFFFF;
  --text: #16212B;
  --muted: #56707F;
  --border: rgba(22, 46, 61, 0.1);
  --primary: #2F6FED;
  --primary-rgb: 47, 111, 237;
  --primary-hover: #1D4ED8;
  --danger: #C6412A;
  --card-shadow: 0 1px 2px rgba(22, 46, 61, 0.05), 0 8px 24px rgba(22, 46, 61, 0.06);
  --bg-a: radial-gradient(700px 400px at 88% -5%, rgba(47, 111, 237, 0.08), transparent 60%);
  --bg-b: radial-gradient(600px 400px at -5% 100%, rgba(47, 111, 237, 0.06), transparent 60%);
  --bg-c: linear-gradient(165deg, #F5F8FE 0%, #EBF1FC 60%, #E2ECFA 100%);
}

:root[data-ui-theme="gmnavy"] {
  --bg: #0F1D3A;
  --card-bg: rgba(30, 41, 59, 0.55);
  --text: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.14);
  --primary: #00B4E5;
  --primary-rgb: 0, 180, 229;
  --primary-hover: #1ec2f0;
  --danger: #ff8a8a;
  --radius: 20px;
  --card-blur: 16px;
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 16px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --bg-a: radial-gradient(900px 500px at 85% -5%, rgba(0, 180, 229, 0.16), transparent 60%);
  --bg-b: radial-gradient(700px 500px at -5% 100%, rgba(0, 180, 229, 0.08), transparent 60%);
  --bg-c: linear-gradient(160deg, #0F1D3A 0%, #16244a 55%, #1E293B 100%);
  --grain-opacity: 0.04;
  --grain-blend: overlay;
}

body {
  position: relative;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  background: var(--bg-a), var(--bg-b), var(--bg-c);
  background-attachment: fixed;
  min-height: 100vh;
}

/* 미세 그레인 텍스처 - 로그인 화면과 동일한 방식(인라인 SVG, 네트워크 요청 0회, 약 0.2KB) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
  z-index: 0;
}

.app-wrap { position: relative; z-index: 1; }

/* 카드류 5종 - 그린/블루는 흰 카드+은은한 그림자(가독성 우선), GM다크네이비는 글래스모피즘 */
.card,
.stat-card,
.calendar-day,
.meal-summary .summary-item,
.notice-modal {
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
  box-shadow: var(--card-shadow);
}

.card { padding: 26px 28px; }
.stat-card { padding: 12px 14px; }
.stat-card.total .value { color: var(--primary); }

/* 섹션 제목 - 영문(포인트 컬러, 작게) + 한글(굵게) 조합으로 고급스러운 느낌 */
.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.section-heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  flex-shrink: 0;
}

.section-heading-icon svg { width: 20px; height: 20px; }

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

.section-heading-en {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--primary);
  text-transform: uppercase;
}

.section-heading-text h2 { margin: 0 !important; }

/* 엑셀 저장 버튼 - 테마 색과 무관하게 항상 엑셀임을 알아볼 수 있도록 고정 그린 톤 */
.excel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  border: 1px solid #CDE7D8;
  background: #F1FAF5;
  color: #1D6F42;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.excel-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.excel-btn:hover {
  background: #E3F4EA;
  border-color: #1D6F42;
}

.app-header h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.app-header .employee-id { color: var(--muted); font-weight: 700; }
.card.section h2 { font-size: 16px; font-weight: 800; }
label { font-weight: 700; }
th { font-weight: 800 !important; }

/* 촘촘한 기능 요소 라운드(8~10px), CTA는 알약형 - 3테마 공통 모양, 색만 교체 */
input, textarea, .calendar-day {
  border-radius: 10px;
}

input, textarea {
  background: var(--card-bg);
}

input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}

button, .logout-btn {
  border-radius: 999px;
  font-weight: 800;
}

button:not(.logout-btn):not(.category-chip):not(.icon-btn):not(.excel-btn) {
  background: var(--primary);
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.26);
  transition: box-shadow 0.2s ease, transform 0.05s ease, background 0.15s ease;
}

button:not(.logout-btn):not(.category-chip):not(.icon-btn):not(.excel-btn):hover {
  background: var(--primary-hover);
  box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.34);
}

button:not(.logout-btn):not(.category-chip):not(.icon-btn):not(.excel-btn):active {
  transform: translateY(1px);
}

/* 상단 툴바 버튼(e밀카드/캘린더/관리자 화면/로그인 이력/환경설정/PDF 저장/로그아웃) */
.logout-btn {
  color: var(--text);
}

.logout-btn:hover {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
}

.category-chip.active {
  background: var(--primary);
  border-color: var(--primary);
}

/* 대시보드 상단 - 로고 좌측, 타이틀 로고 우측, 사번 그 아래 좌측. 툴바는 아이콘 버튼으로 */
.dash-header-premium {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}

.dash-header-title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.dash-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}

.dash-header-brand:hover {
  opacity: 0.85;
}

/* 2026-10-23: 포크/스푼 아이콘 배지 -> GM 로고(블루 외곽선)로 교체. 배경 박스 없이 로고만 표시 */
.dash-header-title .gm-badge-sm {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-header-title .gm-badge-sm .gm-logo-sm {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 다크 네이비 테마에서는 블루 로고가 묻히므로 흰색으로 */
:root[data-ui-theme="gmnavy"] .gm-logo-sm { filter: brightness(0) invert(1); }

.dash-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dash-header-sub {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.dash-header-title h1 {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  margin: 0;
}

.dash-header-title .employee-id {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  padding: 6px 14px;
  border-radius: 999px;
}

.app-header-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin: 0 !important;
  padding: 10px 4px 8px;
  border-radius: 14px !important;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.icon-btn-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.icon-btn-glyph svg { width: 23px; height: 23px; }

.icon-btn-glyph-excel {
  background: rgba(29, 111, 66, 0.12);
  color: #1D6F42;
}

.icon-btn-label {
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
}

.icon-btn:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  transform: translateY(-2px);
}