/* 디자인 4번 — 그리너리. 규칙: docs/design/greenery.md
   0번 기본(basic)을 그대로 쓰고 색만 바꾼다: basic.css 의 :root 값이 바탕이 되고, 여기서는 다른 것만 덮어쓴다.
   눈이 편한 부드러운 연두 바탕 + 아주 연한 연두 판(달력·시간표) + 짙은 연두 띠 위 흰 굵은 연·월 제목. */

:root[data-theme="greenery"] {
  color-scheme: light;
  /* 색 — 밝은 화면 (팔레트: greenery.md 2번) */
  --page-bg: #c3d69c;
  --panel-bg: #eef4e0;
  --bg: #f5f9ec;
  --muted: #5e666b;
  --line: #cfdcb4;
  --sun: #c5221f;
  --sat: #1765cc;
  --today-bg: #1765cc;
  --btn-bg: #dde9c5;
  --btn-pressed-bg: #cbdcab;
  --plan-border: #6b8748;
  --done-width: 3px;
  --band-bg: #4e7d27;
  --band-text: #ffffff;
  --title-color: #3f6820;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="greenery"] {
    color-scheme: dark;
    --page-bg: #121a0c;
    --panel-bg: #1f2819;
    --bg: #1f2819;
    --muted: #9ba596;
    --line: #34432a;
    --btn-bg: #2c3a22;
    --btn-pressed-bg: #3a4a2e;
    --plan-border: #5f7a45;
    --sun: #f28b82;
    --sat: #8ab4f8;
    --today-bg: #8ab4f8;
    --band-bg: #3d6420;
    --band-text: #ffffff;
    --title-color: #a8cf7a;
  }
}

/* ---- 그리너리 꾸미기 (배치·글꼴은 basic 그대로) ---- */

:root[data-theme="greenery"] body {
  min-height: 100vh;
  background: var(--page-bg);
}

/* 달력·시간표 = 연두 바탕 위 밝은 판 */
:root[data-theme="greenery"] .calendar,
:root[data-theme="greenery"] .day-panel {
  width: calc(100% - 32px);
  margin: 0 auto 16px;
  background: var(--panel-bg);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(40, 60, 20, 0.18);
}

@media (min-width: 900px) {
  :root[data-theme="greenery"] .calendar,
  :root[data-theme="greenery"] .day-panel {
    width: auto;
    margin: 0;
  }
}

/* 연·월 제목 줄 = 짙은 연두 띠 위 흰 굵은 글씨 */
:root[data-theme="greenery"] .month-head {
  padding: 8px;
  background: var(--band-bg);
  border-radius: var(--radius);
}

:root[data-theme="greenery"] .month-title {
  color: var(--band-text);
  font-weight: 800;
}

/* 시간표 날짜 제목은 판 위 짙은 연두 글씨 */
:root[data-theme="greenery"] .day-title {
  color: var(--title-color);
}

/* 계획 블록·시간 미정 칸: 옅은 계획 색이 연두 판에 묻히지 않게 짙은 연두 테두리 */
:root[data-theme="greenery"] .plan,
:root[data-theme="greenery"] .unscheduled-item,
:root[data-theme="greenery"] .color-swatch,
:root[data-theme="greenery"] .routine-color {
  border-color: var(--plan-border);
}

/* 디자인 바꾸기 등 창 바탕도 판 색 (어두운 화면) */
:root[data-theme="greenery"] .plan-dialog,
:root[data-theme="greenery"] .settings-dialog,
:root[data-theme="greenery"] .routine-dialog {
  background: var(--panel-bg);
}

@media (max-width: 420px) {
  :root[data-theme="greenery"] .calendar,
  :root[data-theme="greenery"] .day-panel {
    width: calc(100% - 16px);
    margin-bottom: 8px;
  }

  /* 시간표 날짜 제목은 버튼 위 한 줄로 (판 여백 때문에 두 줄로 꺾이지 않게) */
  :root[data-theme="greenery"] .day-title {
    order: -1;
    flex: 1 0 100%;
  }

  :root[data-theme="greenery"] .day-head .to-today {
    margin-left: auto;
  }
}