/* ============================================================================
   한울축산 공통 색 토큰
   ============================================================================

   지금까지 색은 화면 26개에 값 그대로 4,196번 적혀 있었다.
   같은 보라(#667eea)만 359번이다. 그래서 한 번에 바꿀 자리가 없었다.

   여기 한곳에 모은다. 화면은 값 대신 이름을 쓴다.

       background: #667eea;          →   background: var(--accent);

   ── 세 가지 상태 ────────────────────────────────────────────────────
   테마는 두 가지가 아니라 세 가지 상태로 온다.

     1. :root                        기본값. 아무 선택도 없을 때 (= 밤)
     2. :root[data-theme="light"]    사람이 낮을 고름
     3. :root[data-theme="dark"]     사람이 밤을 고름

   이 앱은 축사에서 쓰는 화면이라 **밤이 기본**이다. 그래서 :root 가 어두운 값을
   갖고, 낮은 고른 사람에게만 적용한다. 시스템 설정(prefers-color-scheme)은
   따르지 않는다 — 낮에도 어두운 화면을 쓰던 분들이 갑자기 바뀌면 안 되기 때문이다.

   ⚠️ 색은 반드시 :root 에서 한 번 정의한다. [data-theme] 안에서만 정의하면
      아무것도 안 고른 사람에게는 그 색이 없다.
   ============================================================================ */

:root {
  /* ── 바탕 ── */
  --bg:            #0a0a0a;
  --bg-grad-1:     #1a1a2e;   /* 화면 배경 그라데이션 */
  --bg-grad-2:     #16213e;
  --bg-grad-3:     #0f3460;

  /* ── 면 (카드·칸) ── */
  --surface:       rgba(255, 255, 255, 0.05);
  --surface-2:     rgba(255, 255, 255, 0.08);
  --surface-3:     rgba(255, 255, 255, 0.10);
  --field:         rgba(0, 0, 0, 0.35);      /* 입력칸 안쪽 */

  /* ── 선 ── */
  --line:          rgba(255, 255, 255, 0.10);
  --line-2:        rgba(255, 255, 255, 0.18);

  /* ── 글자 ── */
  --ink:           #e8e8e8;
  --ink-strong:    #ffffff;
  --ink-soft:      #a0a0a0;
  --ink-dim:       #777777;

  /* ── 주 색 (보라) ── */
  --accent:        #667eea;
  --accent-2:      #764ba2;   /* 그라데이션 짝 */
  --accent-ink:    #ffffff;   /* 주 색 위에 얹는 글자 */
  --accent-05:     rgba(102, 126, 234, 0.05);
  --accent-10:     rgba(102, 126, 234, 0.10);
  --accent-20:     rgba(102, 126, 234, 0.20);
  --accent-30:     rgba(102, 126, 234, 0.30);
  --accent-40:     rgba(102, 126, 234, 0.40);
  --accent-60:     rgba(102, 126, 234, 0.60);

  /* ── 뜻이 있는 색 ── */
  --good:          #43e97b;   /* 정상·완료 */
  --good-soft:     rgba(67, 233, 123, 0.15);
  --warn:          #ffc107;   /* 주의·재고조정 */
  --warn-soft:     rgba(255, 193, 7, 0.12);
  --bad:           #ff6b6b;   /* 폐사·오류 */
  --bad-soft:      rgba(255, 107, 107, 0.12);
  --info:          #4facfe;   /* 안내 */

  /* ── 사이드바 ──
     화면마다 있는 큰 덩어리라 따로 이름을 둔다.
     낮에는 흰 바탕 + 회색 선으로 바뀐다. */
  --nav-bg-1:      #1a1a2e;
  --nav-bg-2:      #16213e;
  --nav-ink:       #ffffff;

  /* ── 반투명 흰 글자 (밤에만 뜻이 있다) ──
     rgba(255,255,255,0.7) 같은 값은 검은 바탕에서만 회색으로 보인다.
     흰 바탕에서는 거의 안 보이므로 낮에는 진한 회색으로 바꿔야 한다. */
  --ink-90:        rgba(255, 255, 255, 0.90);
  --ink-80:        rgba(255, 255, 255, 0.80);
  --ink-70:        rgba(255, 255, 255, 0.70);
  --ink-60:        rgba(255, 255, 255, 0.60);
  --ink-50:        rgba(255, 255, 255, 0.50);
  --ink-mid:       #c0c0c0;
  --ink-gray:      #9ca3af;

  --surface-02:    rgba(255, 255, 255, 0.02);
  --surface-04:    rgba(255, 255, 255, 0.04);
  --surface-solid: #1a1a1a;

  --surface-0:     rgba(255, 255, 255, 0.03);
  --line-3:        rgba(255, 255, 255, 0.15);
  --line-4:        rgba(255, 255, 255, 0.20);

  /* ── 글자에 쓰는 뜻 색 ──
     상태·수치를 글자색으로 구분하는 자리가 많다. 밤에는 밝아야 읽히고
     낮에는 어두워야 읽힌다. 값이 정반대라 반드시 토큰이어야 한다. */
  --t-green:       #4ade80;
  --t-amber:       #fbbf24;
  --t-orange:      #fb923c;
  --t-orange2:     #ffa502;
  --t-teal:        #4ecdc4;
  --t-blue:        #4facfe;
  --t-pink:        #ff6b81;
  --t-red:         #ff4757;

  /* ── 떠 있는 상자와 뒤를 가리는 막 ──
     모달·달력 같은 상자는 어두운 색이 값 그대로 박혀 있었다. 낮에도 검게 남아
     그 위 글자가 안 보였다. 막(scrim)은 낮에도 어두워야 한다 — 뒤를 가리는 게 일이다. */
  --panel:         rgba(30, 30, 50, 0.95);
  --panel-2:       rgba(20, 20, 35, 0.98);
  --scrim-80:      rgba(0, 0, 0, 0.80);
  --scrim-70:      rgba(0, 0, 0, 0.70);
  --scrim-40:      rgba(0, 0, 0, 0.40);
  --scrim-20:      rgba(0, 0, 0, 0.20);

  /* ── 배경 빛 (화면 뒤에 은은하게 깔리는 것) ── */
  --glow-1:        rgba(120, 119, 198, 0.30);
  --glow-2:        rgba(255, 119, 115, 0.30);
  --glow-3:        rgba(0, 212, 255, 0.20);

  /* ── 관리 화면이 쓰던 색 (값은 그대로, 이름만 붙였다) ── */
  --accent-3:      #f093fb;   /* 그라데이션 끝 분홍 */
  --accent-text:   #aab4f0;   /* 보라 바탕 위 옅은 글자 */
  --good-10:       rgba(67, 233, 123, 0.10);
  --good-30:       rgba(67, 233, 123, 0.30);
  --bad-10:        rgba(245, 87, 108, 0.10);
  --bad-30:        rgba(245, 87, 108, 0.30);
  --warn-10:       rgba(254, 225, 64, 0.08);
  --warn-30:       rgba(254, 225, 64, 0.30);

  /* ── 그림자 ── */
  --shadow:        0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-soft:   0 4px 16px rgba(0, 0, 0, 0.2);

  color-scheme: dark;
}

/* ── 낮 ────────────────────────────────────────────────────────────────
   그냥 밝게 뒤집으면 안 된다. 어두운 화면의 "반투명 흰 면"은 밝은 바탕에서
   그대로 두면 안 보인다. 낮에는 흰 카드 + 옅은 회색 선으로 바꾼다.
   보라도 밝은 바탕에서는 눈이 아파서 한 단계 진하게 내린다. */
:root[data-theme="light"] {
  /* 밝은 화면은 납작한 게 맞다.
     어두운 화면의 네온 빛·보라 그라데이션을 그대로 밝게만 바꾸면 촌스럽고
     글자도 안 읽힌다. 흰 카드 + 얇은 회색 선 + 단색 파랑으로 간다. */

  --bg:            #F7F8FA;
  --bg-grad-1:     #F7F8FA;
  --bg-grad-2:     #F7F8FA;
  --bg-grad-3:     #F7F8FA;

  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-3:     #F2F4F8;
  --field:         #FFFFFF;

  --line:          #E2E5EA;
  --line-2:        #D5DAE3;

  --ink:           #0F172A;
  --ink-strong:    #0B1220;
  --ink-soft:      #64748B;
  --ink-dim:       #94A3B8;

  /* 세 값을 같은 파랑으로 둔다.
     화면들이 linear-gradient(var(--accent), var(--accent-2)) 로 그리고 있어서
     같은 값을 주면 그라데이션이 저절로 단색이 된다. 화면을 안 고쳐도 납작해진다. */
  --accent:        #33459B;
  --accent-2:      #33459B;
  --accent-3:      #33459B;
  --accent-ink:    #FFFFFF;
  --accent-text:   #33459B;
  --accent-05:     #F6F7FB;
  --accent-10:     #EDEFF7;
  --accent-20:     #DFE3F1;
  --accent-30:     #C9D0E6;
  --accent-40:     #AEB8D8;
  --accent-60:     #7C89BC;

  --good:          #16A34A;
  --good-soft:     #EAF7EE;
  --good-10:       #EAF7EE;
  --good-30:       #C7E9D3;
  --warn:          #D97706;
  --warn-soft:     #FEF3E2;
  --warn-10:       #FEF3E2;
  --warn-30:       #FADDB4;
  --bad:           #DC2626;
  --bad-soft:      #FDECEC;
  --bad-10:        #FDECEC;
  --bad-30:        #F7C7C7;
  --info:          #2A5CA8;

  --nav-bg-1:      #FFFFFF;
  --nav-bg-2:      #FFFFFF;
  --nav-ink:       #0F172A;

  --ink-90:        #0F172A;
  --ink-80:        #1E293B;
  --ink-70:        #334155;
  --ink-60:        #475569;
  --ink-50:        #64748B;
  --ink-mid:       #475569;
  --ink-gray:      #64748B;

  --surface-02:    #FBFCFE;
  --surface-04:    #F7F9FC;
  --surface-solid: #FFFFFF;

  --surface-0:     #FBFCFE;
  --line-3:        #E2E5EA;
  --line-4:        #D5DAE3;

  /* 글자에 쓰는 뜻 색 — 밤에는 밝아야 읽히고 낮에는 어두워야 읽힌다 */
  --t-green:       #15803D;
  --t-amber:       #B45309;
  --t-orange:      #C2410C;
  --t-orange2:     #B45309;
  --t-teal:        #0F766E;
  --t-blue:        #1D4ED8;
  --t-pink:        #BE185D;
  --t-red:         #B91C1C;

  --panel:         #FFFFFF;
  --panel-2:       #FFFFFF;
  --scrim-80:      rgba(15, 23, 42, 0.38);
  --scrim-70:      rgba(15, 23, 42, 0.32);
  --scrim-40:      rgba(15, 23, 42, 0.20);
  --scrim-20:      rgba(15, 23, 42, 0.10);

  /* 배경 빛은 낮에 안 쓴다. 납작한 회색 바탕이 원칙이다. */
  --glow-1:        transparent;
  --glow-2:        transparent;
  --glow-3:        transparent;

  --shadow:        none;
  --shadow-soft:   none;

  color-scheme: light;
}


/* 사람이 밤을 직접 고른 경우 — 값은 :root 와 같다.
   나중에 시스템 설정을 따르게 바꾸더라도 이 선택이 이기게 하려고 남겨 둔다. */
:root[data-theme="dark"] {
  --bg:            #0a0a0a;
  --bg-grad-1:     #1a1a2e;
  --bg-grad-2:     #16213e;
  --bg-grad-3:     #0f3460;
  --surface:       rgba(255, 255, 255, 0.05);
  --surface-2:     rgba(255, 255, 255, 0.08);
  --surface-3:     rgba(255, 255, 255, 0.10);
  --field:         rgba(0, 0, 0, 0.35);
  --line:          rgba(255, 255, 255, 0.10);
  --line-2:        rgba(255, 255, 255, 0.18);
  --ink:           #e8e8e8;
  --ink-strong:    #ffffff;
  --ink-soft:      #a0a0a0;
  --ink-dim:       #777777;
  --accent:        #667eea;
  --accent-2:      #764ba2;
  --accent-ink:    #ffffff;
  --accent-05:     rgba(102, 126, 234, 0.05);
  --accent-10:     rgba(102, 126, 234, 0.10);
  --accent-20:     rgba(102, 126, 234, 0.20);
  --accent-30:     rgba(102, 126, 234, 0.30);
  --accent-40:     rgba(102, 126, 234, 0.40);
  --accent-60:     rgba(102, 126, 234, 0.60);
  --good:          #43e97b;
  --good-soft:     rgba(67, 233, 123, 0.15);
  --warn:          #ffc107;
  --warn-soft:     rgba(255, 193, 7, 0.12);
  --bad:           #ff6b6b;
  --bad-soft:      rgba(255, 107, 107, 0.12);
  --info:          #4facfe;
  /* ── 반투명 흰 글자 (밤에만 뜻이 있다) ──
     rgba(255,255,255,0.7) 같은 값은 검은 바탕에서만 회색으로 보인다.
     흰 바탕에서는 거의 안 보이므로 낮에는 진한 회색으로 바꿔야 한다. */
  --nav-bg-1:      #1a1a2e;
  --nav-bg-2:      #16213e;
  --nav-ink:       #ffffff;
  --ink-90:        rgba(255, 255, 255, 0.90);
  --ink-80:        rgba(255, 255, 255, 0.80);
  --ink-70:        rgba(255, 255, 255, 0.70);
  --ink-60:        rgba(255, 255, 255, 0.60);
  --ink-50:        rgba(255, 255, 255, 0.50);
  --ink-mid:       #c0c0c0;
  --ink-gray:      #9ca3af;

  --surface-02:    rgba(255, 255, 255, 0.02);
  --surface-04:    rgba(255, 255, 255, 0.04);
  --surface-solid: #1a1a1a;

  --surface-0:     rgba(255, 255, 255, 0.03);
  --line-3:        rgba(255, 255, 255, 0.15);
  --line-4:        rgba(255, 255, 255, 0.20);

  /* ── 글자에 쓰는 뜻 색 ──
     상태·수치를 글자색으로 구분하는 자리가 많다. 밤에는 밝아야 읽히고
     낮에는 어두워야 읽힌다. 값이 정반대라 반드시 토큰이어야 한다. */
  --t-green:       #4ade80;
  --t-amber:       #fbbf24;
  --t-orange:      #fb923c;
  --t-orange2:     #ffa502;
  --t-teal:        #4ecdc4;
  --t-blue:        #4facfe;
  --t-pink:        #ff6b81;
  --t-red:         #ff4757;
  /* ── 떠 있는 상자와 뒤를 가리는 막 ──
     모달·달력 같은 상자는 어두운 색이 값 그대로 박혀 있었다. 낮에도 검게 남아
     그 위 글자가 안 보였다. 막(scrim)은 낮에도 어두워야 한다 — 뒤를 가리는 게 일이다. */
  --panel:         rgba(30, 30, 50, 0.95);
  --panel-2:       rgba(20, 20, 35, 0.98);
  --scrim-80:      rgba(0, 0, 0, 0.80);
  --scrim-70:      rgba(0, 0, 0, 0.70);
  --scrim-40:      rgba(0, 0, 0, 0.40);
  --scrim-20:      rgba(0, 0, 0, 0.20);

  --glow-1:        rgba(120, 119, 198, 0.30);
  --glow-2:        rgba(255, 119, 115, 0.30);
  --glow-3:        rgba(0, 212, 255, 0.20);
  --accent-3:      #f093fb;
  --accent-text:   #aab4f0;
  --good-10:       rgba(67, 233, 123, 0.10);
  --good-30:       rgba(67, 233, 123, 0.30);
  --bad-10:        rgba(245, 87, 108, 0.10);
  --bad-30:        rgba(245, 87, 108, 0.30);
  --warn-10:       rgba(254, 225, 64, 0.08);
  --warn-30:       rgba(254, 225, 64, 0.30);
  --shadow:        0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-soft:   0 4px 16px rgba(0, 0, 0, 0.2);

  color-scheme: dark;
}

/* ── 낮에 손봐야 하는 것들 ────────────────────────────────────────────
   어두운 화면 전제로 만든 규칙이 화면마다 박혀 있다. 토큰으로 다 못 바꾼
   자리는 여기서 낮일 때만 덮는다. 하나씩 토큰으로 옮기면 이 칸은 줄어든다. */
:root[data-theme="light"] body {
  background: var(--bg);
}

/* 어두운 화면용 반투명 흰 면 — 낮에는 흰 카드로 */
:root[data-theme="light"] .card,
:root[data-theme="light"] .room-card,
:root[data-theme="light"] .accordion-section,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .summary-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-soft);
}

/* 낮에는 흰 글자가 안 보인다 */
:root[data-theme="light"] body,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] label,
:root[data-theme="light"] td,
:root[data-theme="light"] th {
  color: var(--ink);
}

/* 본문에 style="color:#fff" 로 박아 둔 입력칸이 남아 있다.
   인라인 style 은 보통 규칙으로는 못 이기므로 여기만 !important 를 쓴다.
   안 그러면 낮에 흰 글자 + 흰 바탕이 되어 글자가 안 보인다. */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: var(--field) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}
:root[data-theme="light"] ::placeholder { color: var(--ink-dim) !important; }
:root[data-theme="light"] input[readonly],
:root[data-theme="light"] input[disabled] {
  background: var(--surface-3);
  color: var(--ink-soft);
}

/* 색이 있는 머리·단추는 낮에도 보라를 쓰되 한 단계 진한 값으로 */
:root[data-theme="light"] .accordion-header {
  background: var(--surface-2) !important;
  border-bottom-color: var(--line);
}

/* ── 낮은 납작하게 ────────────────────────────────────────────────────
   어두운 화면은 빛과 그림자로 층을 나눈다. 밝은 화면은 선으로 나눈다.
   그림자·번짐·큰 둥근모서리를 걷어내고 1px 선으로 바꾼다. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .room-card,
:root[data-theme="light"] .accordion-section,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .menu-card,
:root[data-theme="light"] .group-total {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* 카드 위에 얹힌 반투명 면도 흰색으로 (밝은 바탕에서는 안 보인다) */
:root[data-theme="light"] .total-item,
:root[data-theme="light"] .room-summary .rs-pill {
  background: transparent !important;
}

/* 머리줄은 색을 칠하지 않고 선으로만 나눈다 */
:root[data-theme="light"] .accordion-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* 단추는 단색. 그라데이션은 토큰이 같은 값이라 이미 납작하지만,
   빛 번짐(box-shadow)이 남아 있는 곳이 있어 함께 지운다. */
:root[data-theme="light"] button,
:root[data-theme="light"] .btn,
:root[data-theme="light"] .transfer-btn,
:root[data-theme="light"] .adjust-btn {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 표는 선으로만 */
:root[data-theme="light"] table th,
:root[data-theme="light"] table td {
  border-color: var(--line) !important;
}

/* 밝은 바탕에서 흰 글자가 남는 자리 (색칠한 단추 위는 제외) */
:root[data-theme="light"] .sub,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .header-desc {
  color: var(--ink-soft) !important;
}

/* ── 낮에는 파란 면적을 줄인다 ──────────────────────────────────────
   어두운 화면은 색으로 층을 나눴다. 제목 글자, 표 머리, 머리줄까지 전부
   보라 그라데이션이었다. 그걸 그대로 파랑으로 바꾸니 화면이 파래졌다.

   밝은 화면에서 색은 **누를 수 있는 것**에만 쓴다.
   제목과 표 머리는 검은 글자 + 회색 선으로 충분하다. */

/* 그라데이션 글자 제목 → 그냥 검은 글자
   (background-clip:text 로 만든 것이라 채우기 색까지 되돌려야 한다) */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] .header-title,
:root[data-theme="light"] .page-title,
:root[data-theme="light"] .card-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink-strong) !important;
}

/* 표 머리 → 옅은 회색 바탕 + 검은 글자 */
:root[data-theme="light"] th {
  background: var(--surface-3) !important;
  color: var(--ink-soft) !important;
  font-weight: 600;
}

/* 화면 머리줄 → 흰 바탕 + 아래 선 */
:root[data-theme="light"] .header,
:root[data-theme="light"] .page-header,
:root[data-theme="light"] .header::before {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}

/* 색은 누를 수 있는 것에만 남긴다 */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .submit-btn,
:root[data-theme="light"] .search-btn,
:root[data-theme="light"] .modal-btn-confirm,
:root[data-theme="light"] .tab.active,
:root[data-theme="light"] .tab-btn.active,
:root[data-theme="light"] .view-switch button.on,
:root[data-theme="light"] .hanul-theme-btn.active,
:root[data-theme="light"] .hanul-lang-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

/* 낮에는 사이드바가 흰 바탕이라 본문과 경계가 안 보인다. 선과 그림자를 정리한다. */
:root[data-theme="light"] .hanul-sidebar {
  border-right: 1px solid var(--line) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .hanul-sidebar-header,
:root[data-theme="light"] .hanul-lang-section,
:root[data-theme="light"] .hanul-theme-section {
  border-color: var(--line) !important;
}

/* 화면 전환이 눈에 덜 튀게. 움직임을 줄이는 설정이면 끈다. */
@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color .2s ease, color .2s ease; }
}


/* ── 화면 배경 ─────────────────────────────────────────────────────────
   배경이 화면마다 달랐다.

     일보·일지     보라-빨강-하늘 빛 (body::before)
     모돈 전입     초록 빛          (.bg-gradient)
     모돈 전출     빨강 빛
     일괄등록      주황 빛
     관리          아무것도 없음 (그냥 검정)

   같은 앱인데 페이지를 옮길 때마다 다른 곳에 온 것처럼 보였다.
   이제 여기 한 곳에서만 그린다. 화면이 자기 배경을 그리면 이 규칙이 덮는다
   (같은 선택자라 나중에 오는 이 파일이 이긴다). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 50%, var(--glow-1), transparent 50%),
    radial-gradient(circle at 80% 80%, var(--glow-2), transparent 50%),
    radial-gradient(circle at 40% 90%, var(--glow-3), transparent 50%);
  animation: none;
}

/* 화면마다 따로 두던 배경 요소는 더 이상 쓰지 않는다 */
.bg-gradient { display: none !important; }

/* ── 낮: 누르는 것들 ──────────────────────────────────────────────────
   어두운 화면에서는 단추가 반투명 면이나 연한 파스텔로도 보였다.
   흰 바탕에서는 그게 다 사라진다. 그리고 색이 칠해진 단추에 글자색만
   어둡게 덮으면 파란 바탕에 검은 글씨가 된다.

   그래서 두 갈래로 정한다.
     보통 단추   흰 바탕 + 1px 선 + 검은 글자
     주 단추     색 바탕 + 흰 글자           (누르면 실제로 일이 일어나는 것)
   이 규칙은 앞의 글자색 규칙보다 뒤에 와야 이긴다. */

:root[data-theme="light"] button,
:root[data-theme="light"] .btn,
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .tab,
:root[data-theme="light"] .tab-btn,
:root[data-theme="light"] .week-nav-btn,
:root[data-theme="light"] .refresh-btn,
:root[data-theme="light"] .table-btn,
:root[data-theme="light"] .filter-btn,
:root[data-theme="light"] .modal-btn-cancel,
:root[data-theme="light"] .view-switch button {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 색이 칠해지는 것 = 흰 글자. 안쪽 글자(span·b)까지 함께 */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .submit-btn,
:root[data-theme="light"] .search-btn,
:root[data-theme="light"] .modal-btn-confirm,
:root[data-theme="light"] .btn-this-week,
:root[data-theme="light"] .transfer-btn,
:root[data-theme="light"] .tab.active,
:root[data-theme="light"] .tab-btn.active,
:root[data-theme="light"] .filter-btn.active,
:root[data-theme="light"] .week-nav-btn.active,
:root[data-theme="light"] .view-switch button.on,
:root[data-theme="light"] .hanul-theme-btn.active,
:root[data-theme="light"] .hanul-lang-btn.active,
:root[data-theme="light"] .week-display,
:root[data-theme="light"] .period-display,
:root[data-theme="light"] .hanul-menu-item.active,
:root[data-theme="light"] .btn-primary *,
:root[data-theme="light"] .submit-btn *,
:root[data-theme="light"] .tab.active *,
:root[data-theme="light"] .tab-btn.active *,
:root[data-theme="light"] .week-display *,
:root[data-theme="light"] .period-display * {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}
/* 안쪽 글자에는 배경을 다시 없앤다 (위에서 한꺼번에 칠했으므로) */
:root[data-theme="light"] .btn-primary *,
:root[data-theme="light"] .submit-btn *,
:root[data-theme="light"] .tab.active *,
:root[data-theme="light"] .tab-btn.active *,
:root[data-theme="light"] .week-display *,
:root[data-theme="light"] .period-display * {
  background: transparent !important;
  border: 0 !important;
}

/* 뜻이 있는 단추는 그 색을 지킨다 */
:root[data-theme="light"] .adjust-btn {
  background: var(--warn) !important; color: #ffffff !important; border-color: var(--warn) !important;
}
:root[data-theme="light"] .btn-danger,
:root[data-theme="light"] .delete-btn,
:root[data-theme="light"] .btn-delete,
:root[data-theme="light"] .hanul-logout-btn {
  background: var(--bad) !important; color: #ffffff !important; border-color: var(--bad) !important;
}

/* 사이드바의 동그란 단추들은 흰 사이드바에서 안 보이면 안 된다 */
:root[data-theme="light"] .hanul-sidebar-toggle,
:root[data-theme="light"] .hanul-mobile-toggle {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

/* ── 낮: 마우스를 올려도 카드가 변하지 않게 ───────────────────────────
   어두운 화면에서는 hover 로 면이 밝아지는 게 자연스러웠다.
   흰 카드에서는 그게 얼룩처럼 보인다. 보고서 센터처럼 가만히 둔다. */
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .room-card:hover,
:root[data-theme="light"] .menu-card:hover,
:root[data-theme="light"] .stat-card:hover,
:root[data-theme="light"] .summary-card:hover,
:root[data-theme="light"] .report-card:hover,
:root[data-theme="light"] .accordion-section:hover,
:root[data-theme="light"] .card-glow:hover,
:root[data-theme="light"] .accordion-header:hover {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 홈 카드는 그림자·들림까지 되돌린다 */
:root[data-theme="light"] .card-glow:hover,
:root[data-theme="light"] .card-glow.active {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--line) !important;
}
:root[data-theme="light"] .card-glow:hover .card-type,
:root[data-theme="light"] .card-glow.active .card-type {
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
}

/* 표 줄은 아주 옅게만 (어디를 보고 있는지는 알아야 한다) */
:root[data-theme="light"] tbody tr:hover {
  background: var(--surface-3) !important;
}

/* 단추는 눌리는 느낌만 남긴다 */
:root[data-theme="light"] button:hover,
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .tab:hover,
:root[data-theme="light"] .tab-btn:hover {
  border-color: var(--accent-40) !important;
  transform: none !important;
}

/* ── 낮: 사이드바 ─────────────────────────────────────────────────────
   흰 사이드바에서는 "지금 보고 있는 메뉴"가 잘 안 보인다.
   옅게 칠하고 왼쪽에 막대를 세운다. */
:root[data-theme="light"] .hanul-menu-item {
  color: var(--ink-60) !important;
}
:root[data-theme="light"] .hanul-menu-item:hover {
  background: var(--surface-3) !important;
  color: var(--ink) !important;
}
:root[data-theme="light"] .hanul-menu-item.active {
  background: var(--accent-10) !important;
  color: var(--accent) !important;
  border-color: var(--accent-20) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
  font-weight: 600;
}
:root[data-theme="light"] .hanul-sidebar.collapsed:hover {
  box-shadow: 6px 0 24px rgba(15, 23, 42, .10) !important;
}
:root[data-theme="light"] .hanul-sidebar-logo,
:root[data-theme="light"] .hanul-user-name {
  color: var(--ink-strong) !important;
}
:root[data-theme="light"] .hanul-sidebar-date,
:root[data-theme="light"] .hanul-user-dept {
  color: var(--ink-soft) !important;
}
:root[data-theme="light"] .hanul-theme-fab {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}

/* ── 낮: 모달 ─────────────────────────────────────────────────────────
   모달 상자는 값 그대로 어두운 색(rgba(30,30,30,.95))이 박혀 있다.
   토큰이 아니라 낮에도 검은 상자로 남고, 그 위에 어두워진 글자가 얹혀
   **아무것도 안 보였다.** 낮에는 흰 상자로 바꾼다. */
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .modal-box,
:root[data-theme="light"] .confirm-modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .14) !important;
}
:root[data-theme="light"] .modal-content h2,
:root[data-theme="light"] .modal-content h3,
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-body,
:root[data-theme="light"] .modal-title {
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-field label {
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}
:root[data-theme="light"] .modal-field input,
:root[data-theme="light"] .modal-field select,
:root[data-theme="light"] .modal-field textarea {
  background: var(--field) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}
:root[data-theme="light"] .modal-close {
  background: var(--surface-3) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
}
/* 뒤 화면을 가리는 막은 낮에도 어둡게 둔다 (모달이 떠 보여야 한다) */
:root[data-theme="light"] .modal {
  background: rgba(15, 23, 42, .38) !important;
}

/* ── 낮: 홈 카드의 색 테두리 ──────────────────────────────────────────
   카드 뒤에 무지개 그라데이션(::before)이 깔려 있고 마우스를 올리면
   드러난다. 낮에는 아예 쓰지 않는다. */
:root[data-theme="light"] .card-glow::before {
  content: none !important;
  opacity: 0 !important;
  background: none !important;
}
:root[data-theme="light"] .card-glow {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}

/* ── 낮: 방 칸은 테두리 없이 ──────────────────────────────────────────
   방은 동 카드 **안에** 들어 있다. 카드 안에 또 카드를 그리면
   네모가 두 겹으로 보인다. 방은 선 없이 여백으로만 나눈다. */
:root[data-theme="light"] .room-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .room-card + .room-card {
  border-top: 1px solid var(--line) !important;
}