/* 디자인 2번 — 우드. 규칙: docs/design/wood.md
   글꼴: Playfair Display(숫자·영문) + 나눔명조(한글), 모두 OFL-1.1 — index.html 에서 불러온다.
   나무색 테두리 안에 크림 종이. 요일 띠도 나무색. */

:root[data-theme="wood"] {
  /* 색 — 밝은 화면 (팔레트: wood.md 2번) */
  color-scheme: light;
  --page-bg: #6b4a2e;
  --grain: #634428;
  --bg: #f6f0e3;
  --panel-bg: #f6f0e3;
  --frame: #6b4a2e;
  --band-bg: #6b4a2e;
  --band-text: #f6f0e3;
  --band-sun: #ffc2b8;
  --band-sat: #c2ddf7;
  --cell-bg: #eee4d0;
  --weekend-bg: #e4d6bb;
  --empty-bg: #f2ebdc;
  --text: #3b2a1c;
  --muted: #6e5a45;
  --line: #d3c2a3;
  --sun: #9e3328;
  --sat: #2f5d8a;
  --today-bg: #6b4a2e;
  --today-text: #f6f0e3;
  --done: #4f7a3a;
  --btn-bg: #eee4d0;
  --btn-text: #3b2a1c;
  --btn-pressed-bg: #dccbaa;
  --shadow: rgba(30, 20, 12, 0.35);

  /* 글꼴 */
  --font-body: "Nanum Myeongjo", "Batang", "AppleMyungjo", serif;
  --font-title: "Playfair Display", var(--font-body);
  --font-num: "Playfair Display", var(--font-body);
  --title-size: 2rem;
  --title-weight: 700;
  --weekday-size: 0.95rem;
  --weekday-weight: 700;
  --day-size: 1.05rem;
  --today-weight: 700;

  /* 모양 */
  --unit: 4px;
  --line-width: 1px;
  --radius: 4px;
  --today-radius: 50%;
  --done-width: 3px;

  /* 계획 색 0~11 (뜻: 0 빨강 1 주황 2 노랑 3 연두 4 초록 5 청록 6 하늘 7 파랑 8 보라 9 자주 10 분홍 11 회색) */
  --plan-0: #efc7bd;
  --plan-0-text: #3b2a1c;
  --plan-1: #f2d3b0;
  --plan-1-text: #3b2a1c;
  --plan-2: #efe0b0;
  --plan-2-text: #3b2a1c;
  --plan-3: #dde3b8;
  --plan-3-text: #3b2a1c;
  --plan-4: #c8dcc0;
  --plan-4-text: #3b2a1c;
  --plan-5: #c3ddd8;
  --plan-5-text: #3b2a1c;
  --plan-6: #c8dbe6;
  --plan-6-text: #3b2a1c;
  --plan-7: #c9d0e8;
  --plan-7-text: #3b2a1c;
  --plan-8: #d6cce6;
  --plan-8-text: #3b2a1c;
  --plan-9: #e5c8da;
  --plan-9-text: #3b2a1c;
  --plan-10: #f1ccd1;
  --plan-10-text: #3b2a1c;
  --plan-11: #e0d8cb;
  --plan-11-text: #3b2a1c;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="wood"] {
    /* 어두운 화면 — 짙은 호두나무 테두리 안에 어두운 나무 판 */
    color-scheme: dark;
    --page-bg: #4a3424;
    --grain: #422e1f;
    --bg: #2a2018;
    --panel-bg: #2a2018;
    --frame: #c09466;
    --band-bg: #6b4a2e;
    --band-text: #f6f0e3;
    --band-sun: #ffc2b8;
    --band-sat: #c2ddf7;
    --cell-bg: #33281e;
    --weekend-bg: #3d3024;
    --empty-bg: #2e241b;
    --text: #f0e6d4;
    --muted: #bba98f;
    --line: #4d3d2c;
    --sun: #f08f80;
    --sat: #8fbbe8;
    --today-bg: #d9b77e;
    --today-text: #1e1610;
    --done: #8fc06f;
    --btn-bg: #3d3024;
    --btn-text: #f0e6d4;
    --btn-pressed-bg: #4d3d2c;
    --shadow: rgba(0, 0, 0, 0.6);

    /* 계획 색 0~11 (뜻: 0 빨강 1 주황 2 노랑 3 연두 4 초록 5 청록 6 하늘 7 파랑 8 보라 9 자주 10 분홍 11 회색) */
    --plan-0: #bf9f97;
    --plan-0-text: #1e1610;
    --plan-1: #c2a98d;
    --plan-1-text: #1e1610;
    --plan-2: #bfb38d;
    --plan-2-text: #1e1610;
    --plan-3: #b1b693;
    --plan-3-text: #1e1610;
    --plan-4: #a0b09a;
    --plan-4-text: #1e1610;
    --plan-5: #9cb1ad;
    --plan-5-text: #1e1610;
    --plan-6: #a0afb8;
    --plan-6-text: #1e1610;
    --plan-7: #a1a6ba;
    --plan-7-text: #1e1610;
    --plan-8: #aba3b8;
    --plan-8-text: #1e1610;
    --plan-9: #b7a0ae;
    --plan-9-text: #1e1610;
    --plan-10: #c1a3a7;
    --plan-10-text: #1e1610;
    --plan-11: #b3ada2;
    --plan-11-text: #1e1610;
  }
}

@media (max-width: 420px) {
  :root[data-theme="wood"] {
    --title-size: 1.5rem;
    --weekday-size: 0.85rem;
    --day-size: 0.95rem;
  }
}

/* ---- 우드 장식 (이 테마에서만) ---- */

/* 바깥 = 나뭇결 테두리 (그림 파일 없이 CSS 줄무늬) */
:root[data-theme="wood"] body {
  min-height: 100vh;
  padding: 16px 0;
  background-color: var(--page-bg);
  background-image: repeating-linear-gradient(
    100deg,
    transparent 0 14px,
    var(--grain) 14px 17px,
    transparent 17px 31px,
    var(--grain) 31px 32px
  );
  font-variant-numeric: lining-nums;
}

/* 크림 종이 판: 달력과 시간표 */
:root[data-theme="wood"] .calendar,
:root[data-theme="wood"] .day-panel {
  width: calc(100% - 32px);
  margin: 0 auto 16px;
  background: var(--panel-bg);
  box-shadow: 0 2px 8px var(--shadow);
}

/* 달 제목: 가운데 한 줄, 굵게, 아래 가는 선 */
:root[data-theme="wood"] .month-title,
:root[data-theme="wood"] .day-title {
  color: var(--frame);
  letter-spacing: 0.02em;
}

:root[data-theme="wood"] .month-title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* 요일 띠: 나무색 */
:root[data-theme="wood"] .weekdays {
  gap: 3px;
  margin-bottom: 3px;
}

:root[data-theme="wood"] .weekdays div {
  background: var(--band-bg);
  color: var(--band-text);
  border-bottom: 0;
}

/* 날짜 칸: 연한 나무색 칸, 주말 열은 한 단계 진하게, 숫자는 오른쪽 위 */
:root[data-theme="wood"] .days {
  gap: 3px;
}

:root[data-theme="wood"] .day {
  justify-content: flex-end;
  padding: 4px 4px 0 0;
  background: var(--cell-bg);
  border-bottom: 0;
}

:root[data-theme="wood"] .day.sun,
:root[data-theme="wood"] .day.sat {
  background: var(--weekend-bg);
}

:root[data-theme="wood"] .day.empty {
  background: var(--empty-bg);
}

/* 요일 띠 위 토·일: 띠 위에서 읽히는 밝은 빨강·파랑 */
:root[data-theme="wood"] .weekdays .sun {
  color: var(--band-sun);
}

:root[data-theme="wood"] .weekdays .sat {
  color: var(--band-sat);
}

/* 버튼·시간표·입력창: 종이 위 나무 손잡이 느낌 */
:root[data-theme="wood"] .btn-primary {
  border-color: var(--today-bg);
}

:root[data-theme="wood"] .plan {
  border-left: 4px solid var(--frame);
}

:root[data-theme="wood"] .plan-dialog {
  border: 4px solid var(--frame);
  box-shadow: 0 4px 16px var(--shadow);
}

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

@media (max-width: 420px) {
  :root[data-theme="wood"] body {
    padding: 8px 0;
  }

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

  :root[data-theme="wood"] .day {
    padding: 2px 2px 0 0;
  }
}

/* ======================================================================
   M1 하루 시간표 부품 — 우드 꾸미기 (구조는 base.css 개발자 구역)
   ====================================================================== */

:root[data-theme="wood"] .day-title-today {
  font-family: var(--font-body);
  font-weight: 400;
}

/* 버튼 = 종이 위 나무 손잡이 */
:root[data-theme="wood"] .btn {
  font-family: var(--font-body);
  font-weight: 700;
  border-color: var(--line);
  box-shadow: 0 1px 2px var(--shadow);
}

:root[data-theme="wood"] .btn:active {
  box-shadow: none;
}

/* 시간표: 시각 글자는 세리프 숫자 */
:root[data-theme="wood"] .tt-scroll {
  background: var(--panel-bg);
  /* 바깥 나무 테두리만큼 줄여 노트북 화면 안에 들어오게 */
  max-height: max(320px, calc(100vh - 192px));
}

:root[data-theme="wood"] .tt-label {
  font-size: 0.8rem;
}

/* 체크 상자 색 */
:root[data-theme="wood"] .plan-check,
:root[data-theme="wood"] .field-check input {
  accent-color: var(--frame);
}

/* 입력창 글자칸 */
:root[data-theme="wood"] .plan-dialog-title {
  color: var(--frame);
}

:root[data-theme="wood"] .field-label {
  font-weight: 700;
}

:root[data-theme="wood"] .field-input {
  background: var(--cell-bg);
}

:root[data-theme="wood"] .field-input:focus {
  outline: 2px solid var(--frame);
  outline-offset: 0;
}

/* ======================================================================
   M2 부품 — 달 이동·색 칩·디자인 바꾸기 창 (구조는 base.css 개발자 M2 구역)
   ====================================================================== */

/* 달 제목 줄: 가는 밑줄을 ◀ 제목 ▶ 줄 전체에 */
:root[data-theme="wood"] .month-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

:root[data-theme="wood"] .month-head .month-title {
  padding-bottom: 0;
  border-bottom: 0;
}

:root[data-theme="wood"] .month-nav {
  color: var(--frame);
}

/* 색 칩: 둥근 단추, 고른 칩은 나무색 테두리 */
:root[data-theme="wood"] .color-swatch {
  border-radius: 50%;
  border-color: var(--line);
}

:root[data-theme="wood"] .color-chip input:checked + .color-swatch {
  outline: 3px solid var(--frame);
  outline-offset: 2px;
}

/* 디자인 바꾸기 창: 계획 입력창과 같은 나무 테두리 */
:root[data-theme="wood"] .settings-dialog {
  background: var(--panel-bg);
  border: 4px solid var(--frame);
  box-shadow: 0 4px 16px var(--shadow);
}

:root[data-theme="wood"] .settings-title {
  color: var(--frame);
}

:root[data-theme="wood"] .theme-option {
  background: var(--cell-bg);
  border-color: var(--line);
  font-family: var(--font-body);
}

:root[data-theme="wood"] .theme-option input {
  accent-color: var(--frame);
}

:root[data-theme="wood"] .theme-option:has(input:checked) {
  background: var(--weekend-bg);
  border-color: var(--frame);
  font-weight: 700;
}

/* ======================================================================
   M3 루틴 부품 — 우드 꾸미기 (구조는 base.css 개발자 M3 구역)
   ====================================================================== */

/* 루틴 관리 창: 입력창과 같은 나무 테두리 */
:root[data-theme="wood"] .routine-dialog {
  background: var(--panel-bg);
  border: 4px solid var(--frame);
  box-shadow: 0 4px 16px var(--shadow);
}

:root[data-theme="wood"] .routine-dialog-title {
  color: var(--frame);
}

/* 루틴 목록 한 줄: 날짜 칸 색 카드 */
:root[data-theme="wood"] .routine-item-open {
  background: var(--cell-bg);
}

:root[data-theme="wood"] .routine-item-open:hover {
  background: var(--weekend-bg);
  border-color: var(--frame);
}

:root[data-theme="wood"] .routine-color {
  border-radius: 50%;
}

/* 요일 체크: 날짜 칸 색, 고르면 주말 칸 색 + 나무 테두리 */
:root[data-theme="wood"] .weekday-check {
  background: var(--cell-bg);
  font-weight: 700;
}

:root[data-theme="wood"] .weekday-check input {
  accent-color: var(--frame);
}

:root[data-theme="wood"] .weekday-check:has(input:checked) {
  background: var(--weekend-bg);
  border-color: var(--frame);
}

/* 휴대폰: 시간표 날짜 제목을 버튼 위 한 줄로 (버튼 3개와 나란히 두면 두 줄로 꺾임) */
@media (max-width: 420px) {
  :root[data-theme="wood"] .day-title {
    order: -1;
    flex: 1 0 100%;
  }

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

/* ======================================================================
   M4 미완료 넘기기 부품 — 우드 꾸미기 (구조는 base.css 개발자 M4 구역)
   ====================================================================== */

/* 시간 미정 = 나무 선반 위 카드 */
:root[data-theme="wood"] .unscheduled {
  padding: 8px 8px 10px;
  background: var(--cell-bg);
  border-bottom: 4px solid var(--frame);
}

:root[data-theme="wood"] .unscheduled-title {
  color: var(--frame);
}

:root[data-theme="wood"] .unscheduled-item {
  border-color: var(--line);
  border-left: 4px solid var(--frame);
  box-shadow: 0 1px 2px var(--shadow);
}

:root[data-theme="wood"] .plan-carry-days {
  font-style: italic;
}

/* 넘김 기록: 흐림 + 점선 책갈피 */
:root[data-theme="wood"] .plan.carried,
:root[data-theme="wood"] .unscheduled-item.carried {
  border-left-style: dashed;
  box-shadow: none;
}

/* ======================================================================
   F12 공휴일 — 우드 꾸미기 (구조는 base.css 개발자 F12 구역)
   ====================================================================== */

/* 공휴일 칸: 쉬는 날이라 주말 칸과 같은 진한 나무색 */
:root[data-theme="wood"] .day.holiday {
  background: var(--weekend-bg);
}

:root[data-theme="wood"] .holiday-name {
  font-weight: 700;
}

:root[data-theme="wood"] .day-title-holiday {
  font-family: var(--font-body);
  font-weight: 700;
}

@media (max-width: 420px) {
  /* 휴대폰: "대체공휴일"(5글자)도 좁은 칸에 다 들어가게 */
  :root[data-theme="wood"] .holiday-name {
    left: 1px;
    right: 1px;
    font-size: 9px;
    letter-spacing: -0.06em;
  }
}