/* ============================================================
   DREAMGREEN — 글래스모피즘 테마  (glass.css)
   봄 느낌: 밝고 화사한 파스텔 배경 + 반투명 흰색 유리 카드
   기존 다크 텍스트 & 파스텔 주기색상 모두 가시성 유지
   ============================================================ */

/* ── 전역 변수 ── */
:root {
  --glass-card:      rgba(255, 255, 255, 0.68);
  --glass-card-md:   rgba(255, 255, 255, 0.55);
  --glass-card-sm:   rgba(255, 255, 255, 0.42);
  --glass-border:    rgba(255, 255, 255, 0.70);
  --glass-shadow:    0 8px 32px rgba(120, 80, 100, 0.12);
  --glass-blur:      blur(20px);
  --glass-blur-sm:   blur(12px);
}

/* ──────────────────────────────────────────
   바디 배경 — 봄 파스텔 그라데이션
   벚꽃 핑크 · 민트 그린 · 하늘색 · 복숭아
   ────────────────────────────────────────── */
body {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(255, 182, 193, 0.28) 0%, transparent 48%),
    radial-gradient(ellipse at 85% 15%, rgba(144, 238, 144, 0.20) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 75%, rgba(173, 216, 230, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 80%, rgba(255, 218, 185, 0.22) 0%, transparent 48%),
    radial-gradient(ellipse at 55% 45%, rgba(221, 160, 221, 0.15) 0%, transparent 40%),
    linear-gradient(150deg, #fdf6f9 0%, #f6fdf8 40%, #f2f6ff 75%, #fefdf6 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* ──────────────────────────────────────────
   헤더 — 차분한 봄 (뮤트 로즈 → 소프트 라벤더)
   ────────────────────────────────────────── */
.header,
header:not(.skip-glass) {
  background: linear-gradient(135deg, #c47a95 0%, #9c6bb5 55%, #7a68b8 100%) !important;
  backdrop-filter: var(--glass-blur) saturate(140%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(140%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 20px rgba(160, 100, 140, 0.18) !important;
}

/* ──────────────────────────────────────────
   내비게이션 사이드바 — 밝은 유리
   ────────────────────────────────────────── */
.sidebar {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: var(--glass-blur) saturate(140%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(140%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 2px 0 16px rgba(150, 100, 160, 0.08) !important;
}

.menu-title   { color: #9c8fb0 !important; }
.menu-item    { color: #4b4260 !important; }
.menu-text    { color: inherit !important; }

.menu-item:hover {
  background: rgba(167, 139, 250, 0.14) !important;
  border-left-color: #a78bfa !important;
  color: #5b21b6 !important;
}

.menu-section,
.sidebar-collapsible {
  border-bottom-color: rgba(150, 120, 180, 0.15) !important;
}

.sidebar-collapsible > summary { color: #9c8fb0 !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: var(--glass-card) !important;
  backdrop-filter: var(--glass-blur) saturate(130%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(130%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ──────────────────────────────────────────
   인사말 배너 — 헤더와 톤 통일, 살짝 밝게
   ────────────────────────────────────────── */
.greeting-banner {
  background: linear-gradient(135deg, #cf8fa8 0%, #a87cc5 55%, #8272c0 100%) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow: 0 8px 28px rgba(160, 100, 140, 0.15) !important;
}

/* ──────────────────────────────────────────
   직원 카드
   ────────────────────────────────────────── */
.staff-card {
  backdrop-filter: var(--glass-blur-sm) saturate(130%) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) saturate(130%) !important;
  border: 1px solid rgba(255, 255, 255, 0.60) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.staff-card.card-minhee { background: rgba(224, 231, 255, 0.75) !important; }
.staff-card.card-choi   { background: rgba(204, 251, 241, 0.75) !important; }
.staff-card.card-pt     { background: rgba(220, 252, 231, 0.75) !important; }
.staff-card.card-nurse  { background: rgba(255, 228, 230, 0.75) !important; }
.staff-card.card-admin  { background: rgba(237, 233, 254, 0.75) !important; }

/* ──────────────────────────────────────────
   어르신 목록 (residents.html)
   .list-item 은 별도 사이드바 내부에 있음
   ────────────────────────────────────────── */
.list-item {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.60) !important;
  box-shadow: 0 1px 6px rgba(120, 80, 120, 0.08) !important;
}

.list-item:hover {
  background: rgba(255, 255, 255, 0.80) !important;
  border-color: rgba(167, 139, 250, 0.40) !important;
}

.list-item.active {
  background: rgba(220, 252, 231, 0.85) !important;
  border-color: rgba(74, 222, 128, 0.50) !important;
}

/* 어르신 이름 & 부가정보 텍스트 — 다크 색상 명시 */
.list-name { color: #1f2937 !important; }
.list-sub  { color: #6b7280 !important; }

/* 어르신 사이드바 헤더 */
.sidebar-header {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65) !important;
}

.sidebar-title { color: #374151 !important; }

/* ──────────────────────────────────────────
   테이블 — 배경 투명, 텍스트 기존 다크 유지
   ────────────────────────────────────────── */
table { background: transparent !important; }

thead th {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

tbody tr:hover {
  filter: brightness(0.96) !important;
}

/* ──────────────────────────────────────────
   버튼 — 밝은 배경이므로 기존 스타일 최대한 유지
   일부 독립 버튼만 유리 처리
   ────────────────────────────────────────── */
.logout-btn {
  background: rgba(255, 255, 255, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  color: #fff !important;
}
.logout-btn:hover {
  background: rgba(255, 255, 255, 0.32) !important;
}

/* ──────────────────────────────────────────
   인풋 / 폼
   ────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(180, 150, 200, 0.30) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(102, 126, 234, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 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: #3d2f4f !important;
}
.header input::placeholder,
.search-input::placeholder {
  color: rgba(90, 75, 110, 0.70) !important;
  opacity: 1 !important;
}
.header input:focus,
.search-input:focus {
  background: #ffffff !important;
  border-color: rgba(156, 107, 181, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(156, 107, 181, 0.18) !important;
}

/* ──────────────────────────────────────────
   모달
   ────────────────────────────────────────── */
.modal,
.modal-overlay {
  background: rgba(100, 60, 120, 0.40) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.modal-content,
.modal-box,
.modal-container,
.popup,
.cycle-modal-content {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: var(--glass-blur) saturate(150%) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(150%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 24px 60px rgba(100, 60, 120, 0.25) !important;
}

/* ──────────────────────────────────────────
   로그인 페이지
   ────────────────────────────────────────── */
.login-container {
  background: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.50) !important;
  box-shadow: 0 24px 60px rgba(150, 80, 130, 0.20),
              inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}

.login-container h1     { color: #fff !important; text-shadow: 0 1px 8px rgba(100,60,120,0.4); }
.login-container .subtitle { color: rgba(255, 255, 255, 0.85) !important; }

.version-info-login {
  background: rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

.login-container label {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.login-container input {
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
}
.login-container input::placeholder { color: rgba(255, 255, 255, 0.55) !important; }
.login-container input:focus {
  background: rgba(255, 255, 255, 0.40) !important;
  border-color: rgba(255, 255, 255, 0.70) !important;
}

.login-container .logo {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  backdrop-filter: blur(8px) !important;
}

.login-btn {
  background: linear-gradient(135deg,
    rgba(102, 126, 234, 0.85) 0%,
    rgba(118, 75, 162, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(4px) !important;
  color: #fff !important;
}
.login-btn:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.40) !important;
}

/* ──────────────────────────────────────────
   재고 뱃지 (밝은 카드 위)
   ────────────────────────────────────────── */
.inv-badge.ok    { background: rgba(34, 197, 94, 0.16) !important;  color: #14532d !important; }
.inv-badge.warn  { background: rgba(234, 179, 8, 0.18) !important;  color: #713f12 !important; }
.inv-badge.low   { background: rgba(239, 68, 68, 0.16) !important;  color: #7f1d1d !important; }
.inv-badge.nomin { background: rgba(156, 163, 175, 0.18) !important; color: #374151 !important; }

/* ──────────────────────────────────────────
   알림 / 드롭다운
   ────────────────────────────────────────── */
.notification,
.toast {
  background: var(--glass-card) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color: #374151 !important; /* 기본 알림: 다크 텍스트 (유리 배경용) */
}

/* 타입별 알림 — 색상 배경 + 흰 텍스트 복원 */
.notification.error,
.toast.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.92), rgba(220, 38, 38, 0.92)) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fff !important;
}

.notification.success,
.toast.success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.92), rgba(5, 150, 105, 0.92)) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #fff !important;
}

.notification.warning,
.toast.warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.92), rgba(217, 119, 6, 0.92)) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fff !important;
}

.dropdown-menu,
.user-dropdown,
[class*="dropdown-content"] {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid rgba(255, 255, 255, 0.70) !important;
  box-shadow: 0 12px 36px rgba(120, 80, 140, 0.18) !important;
}

/* ──────────────────────────────────────────
   스크롤바
   ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(200, 180, 220, 0.12); }
::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.40);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(167, 139, 250, 0.65);
}

/* ──────────────────────────────────────────
   섹션 타이틀 — Left-Anchored Gradient Fade
   (Gestalt Prägnanz: 딱딱한 직사각형 블록 제거)
   왼쪽 액센트 → 오른쪽으로 자연스럽게 소멸
   ────────────────────────────────────────── */
.section-title {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-left: 3px solid rgba(196, 122, 149, 0.70) !important;
  color: #3d2a52 !important;
  padding: 14px 20px 14px 14px !important;
}

/* index.html ::before 장식바도 같은 톤으로 */
.section-title::before {
  background: linear-gradient(135deg, #c47a95, #9c6bb5) !important;
}

/* 로그인 버튼 */
.login-btn {
  background: linear-gradient(135deg, #c47a95 0%, #9c6bb5 100%) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
}
.login-btn:hover {
  background: linear-gradient(135deg, #b56687 0%, #8a59a8 100%) !important;
  box-shadow: 0 8px 24px rgba(160, 100, 140, 0.35) !important;
}

/* ──────────────────────────────────────────
   기타
   ────────────────────────────────────────── */
hr { border-color: rgba(180, 140, 200, 0.18) !important; }

.draggable-section.drag-over {
  outline-color: #c084fc !important;
}

/* ──────────────────────────────────────────
   반응형 — 모바일 blur 경량화
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --glass-blur:    blur(14px);
    --glass-blur-sm: blur(8px);
  }
}