/* ============================================================
   DREAMGREEN — design.css
   의료 블루 디자인 시스템 (구 glass.css 리뉴얼, 2026-06)
   홈 대시보드(index.html) 핸드오프 토큰과 통일:
     primary #1E6FB2 · app bg #EFF3F4 · 흰 카드 · Pretendard
   구 glass.css 와 동일한 셀렉터 커버리지(공통 컴포넌트 클래스)를
   !important 오버라이드로 유지하되, 파스텔/보라/글래스 톤을
   의료 블루 / 흰 카드 / 플랫 그림자로 교체.
   ※ index.html 은 이 파일을 쓰지 않음 (자체 인라인, 동일 토큰).
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ── 전역 토큰 ── */
:root {
  --dg-primary:        #1E6FB2;
  --dg-primary-dark:   #185C95;
  --dg-primary-darker: #134E80;
  --dg-tint:           #E7F0F8;
  --dg-app-bg:         #EFF3F4;
  --dg-card:           #FFFFFF;
  --dg-ink:            #16282E;
  --dg-strong:         #1B2D33;
  --dg-body:           #33454B;
  --dg-muted:          #5E6E74;
  --dg-faint:          #8A989D;
  --dg-border:         #E7EDEE;
  --dg-border-side:    #E5ECED;
  --dg-divider:        #EEF2F3;
  --dg-card-shadow:    0 1px 2px rgba(16, 40, 46, 0.04);
  --dg-hero-grad:      linear-gradient(122deg, #2A7EC2 0%, #185C95 55%, #134E80 100%);
}

/* ── 폰트 + 배경 ── */
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: var(--dg-app-bg) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* 로그인 페이지만 브랜드 블루 배경 (login.html body.login-page) */
body.login-page {
  background: var(--dg-hero-grad) !important;
}

/* ──────────────────────────────────────────
   헤더 — 의료 블루 그라데이션
   ────────────────────────────────────────── */
.header,
header:not(.skip-design) {
  background: var(--dg-hero-grad) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 2px 14px rgba(24, 92, 149, 0.20) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────
   사이드바 — 흰
   ────────────────────────────────────────── */
.sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--dg-border-side) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.menu-title { color: #A2AFB3 !important; }
.menu-item  { color: #48585E !important; }
.menu-text  { color: inherit !important; }

.menu-item:hover {
  background: #F1F5F6 !important;
  border-left-color: var(--dg-primary) !important;
  color: var(--dg-primary) !important;
}

.menu-section,
.sidebar-collapsible { border-bottom-color: var(--dg-divider) !important; }

.sidebar-collapsible > summary { color: #A2AFB3 !important; }

/* ──────────────────────────────────────────
   메인 콘텐츠
   ────────────────────────────────────────── */
.main-content,
.content-area,
.page-content { background: transparent !important; }

/* ──────────────────────────────────────────
   카드 / 섹션 — 흰
   ────────────────────────────────────────── */
.dashboard-card, .staff-section, .notice-card, .section, .inventory-section,
.form-card, .content-card, .schedule-section, .counsel-section, .archive-section,
.blog-section, .legend, .card {
  background: #FFFFFF !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: var(--dg-card-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────
   인사말 배너 — 블루 그라데이션
   ────────────────────────────────────────── */
.greeting-banner {
  background: var(--dg-hero-grad) !important;
  border: none !important;
  box-shadow: 0 12px 30px -16px rgba(24, 92, 149, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────
   직원 카드 — 흰 (좌측 컬러 액센트바는 페이지 인라인 보존)
   ────────────────────────────────────────── */
.staff-card {
  background: #FFFFFF !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: var(--dg-card-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────
   리스트 아이템 (어르신 목록 사이드바 등)
   ────────────────────────────────────────── */
.list-item {
  background: #FFFFFF !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: var(--dg-card-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.list-item:hover { background: #F4F8F8 !important; border-color: #BCD6EF !important; }
.list-item.active { background: var(--dg-tint) !important; border-color: var(--dg-primary) !important; }
.list-name { color: var(--dg-strong) !important; }
.list-sub  { color: #6B7A7F !important; }

.sidebar-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--dg-border-side) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sidebar-title { color: var(--dg-strong) !important; }

/* ──────────────────────────────────────────
   테이블 — 투명 배경, 다크 텍스트 유지
   ────────────────────────────────────────── */
table { background: transparent !important; }
thead th { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
tbody tr:hover { background: #F4F8F8 !important; filter: none !important; }

/* ──────────────────────────────────────────
   헤더(블루) 위 로그아웃 버튼
   ────────────────────────────────────────── */
.logout-btn {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #fff !important;
}
.logout-btn:hover { background: rgba(255, 255, 255, 0.30) !important; }

/* ──────────────────────────────────────────
   인풋 / 폼
   ────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  background: #F6F9F9 !important;
  border: 1px solid #E2E9EA !important;
  color: var(--dg-ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
  background: #FFFFFF !important;
  border-color: var(--dg-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 111, 178, 0.12) !important;
  outline: none !important;
}

/* 헤더(블루) 위 검색창 — 흰 입력 */
.header input, .search-input, .search-box input {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: var(--dg-ink) !important;
}
.header input::placeholder, .search-input::placeholder {
  color: rgba(22, 40, 46, 0.45) !important; opacity: 1 !important;
}
.header input:focus, .search-input:focus {
  background: #fff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28) !important;
}

/* ──────────────────────────────────────────
   모달
   ────────────────────────────────────────── */
.modal, .modal-overlay {
  background: rgba(16, 40, 46, 0.50) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
.modal-content, .modal-box, .modal-container, .popup, .cycle-modal-content {
  background: #FFFFFF !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: 0 24px 60px rgba(16, 40, 46, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────
   로그인 페이지
   ────────────────────────────────────────── */
.login-container {
  background: #FFFFFF !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: 0 24px 60px rgba(16, 40, 46, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.login-container h1 { color: var(--dg-ink) !important; text-shadow: none !important; }
.login-container .subtitle { color: var(--dg-muted) !important; }
.version-info-login { background: #F1F5F6 !important; color: var(--dg-muted) !important; }
.login-container label { color: var(--dg-strong) !important; text-shadow: none !important; }
.login-container input {
  background: #F6F9F9 !important;
  border: 1px solid #E2E9EA !important;
  color: var(--dg-ink) !important;
}
.login-container input::placeholder { color: rgba(22, 40, 46, 0.4) !important; }
.login-container input:focus {
  background: #fff !important;
  border-color: var(--dg-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 111, 178, 0.12) !important;
}
.login-container .logo {
  background: #FFFFFF !important;
  border: 1px solid var(--dg-border) !important;
  backdrop-filter: none !important;
}

.login-btn {
  background: var(--dg-hero-grad) !important;
  border: none !important;
  color: #fff !important;
  backdrop-filter: none !important;
}
.login-btn:hover {
  background: linear-gradient(122deg, #2A7EC2 0%, #134E80 100%) !important;
  box-shadow: 0 10px 26px -10px rgba(24, 92, 149, 0.55) !important;
}

/* ──────────────────────────────────────────
   재고 뱃지 (흰 카드 위)
   ────────────────────────────────────────── */
.inv-badge.ok    { background: #E7F4ED !important; color: #1F7A52 !important; }
.inv-badge.warn  { background: #FBF0DC !important; color: #9A6312 !important; }
.inv-badge.low   { background: #FBE9E6 !important; color: #B23A28 !important; }
.inv-badge.nomin { background: #F1F5F6 !important; color: #7A888D !important; }

/* ──────────────────────────────────────────
   알림 / 토스트
   ────────────────────────────────────────── */
.notification, .toast {
  background: #FFFFFF !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: var(--dg-card-shadow) !important;
  color: var(--dg-body) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.notification.error, .toast.error {
  background: linear-gradient(135deg, #E0533B, #C2402B) !important;
  border-color: rgba(224, 83, 59, 0.35) !important; color: #fff !important;
}
.notification.success, .toast.success {
  background: linear-gradient(135deg, #1F9D63, #15784B) !important;
  border-color: rgba(31, 157, 99, 0.35) !important; color: #fff !important;
}
.notification.warning, .toast.warning {
  background: linear-gradient(135deg, #D9930F, #B5780B) !important;
  border-color: rgba(217, 147, 15, 0.35) !important; color: #fff !important;
}

/* ──────────────────────────────────────────
   드롭다운
   ────────────────────────────────────────── */
.dropdown-menu, .user-dropdown, [class*="dropdown-content"] {
  background: #FFFFFF !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: 0 12px 36px rgba(16, 40, 46, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────
   스크롤바
   ────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #CDD8DA; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #B4C2C5; background-clip: content-box; }

/* ──────────────────────────────────────────
   섹션 타이틀 — 좌측 블루 액센트
   ────────────────────────────────────────── */
.section-title {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-left: 3px solid var(--dg-primary) !important;
  color: var(--dg-strong) !important;
  padding: 14px 20px 14px 14px !important;
}
.section-title::before {
  background: linear-gradient(135deg, #2A7EC2, #185C95) !important;
}

/* ──────────────────────────────────────────
   기타
   ────────────────────────────────────────── */
hr { border-color: var(--dg-divider) !important; }
.draggable-section.drag-over { outline-color: var(--dg-primary) !important; }