/* 배치와 구조. 색·글꼴·테두리 값은 직접 쓰지 않고 디자인 토큰(CSS 변수)만 쓴다.
   토큰 값은 css/themes/<테마>.css 에 있다. 규칙: docs/design/theme-rules.md */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

.calendar {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
}

.month-title {
  margin: 0 0 16px;
  font-family: var(--font-title);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  text-align: center;
}

.weekdays,
.days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.weekdays div {
  padding: 8px 0;
  text-align: center;
  font-size: var(--weekday-size);
  font-weight: var(--weekday-weight);
  border-bottom: var(--line-width) solid var(--line);
}

.day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  border-bottom: var(--line-width) solid var(--line);
  font-family: var(--font-num);
  font-size: var(--day-size);
}

.day.empty {
  border-bottom-color: transparent;
}

/* 하루 완성 표시 (F6). 개발자가 칸에 done 클래스를 붙이면 보인다 */
.day.done {
  box-shadow: inset 0 0 0 var(--done-width) var(--done);
}

.sun {
  color: var(--sun);
}

.sat {
  color: var(--sat);
}

.day .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: var(--today-radius);
}

.day.today .num {
  background: var(--today-bg);
  color: var(--today-text);
  font-weight: var(--today-weight);
}

@media (max-width: 420px) {
  .calendar {
    padding: 16px 8px;
  }

  .day {
    padding-top: 4px;
  }
}

/* ======================================================================
   개발자 M1 — 하루 시간표 (구조용). 이 구역만 개발자가 고친다.
   색·글꼴·테두리는 토큰만 쓴다. 테마별 꾸미기는 디자이너가 테마 파일에서.
   ====================================================================== */

[hidden] {
  display: none !important;
}

/* 화면 배치 (I2): 노트북 폭은 달력 + 시간표 나란히, 휴대폰 폭은 data-view 하나만 */
.app {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 899px) {
  .app[data-view="day"] .calendar,
  .app[data-view="month"] .day-panel {
    display: none;
  }
}

@media (min-width: 900px) {
  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 0 16px;
  }

  .to-month {
    display: none;
  }
}

/* 달력 날짜 칸: 누르면 그날 시간표 */
.day[data-date] {
  cursor: pointer;
}

/* 고른 날짜: 칸 바깥 테두리 (칸 안쪽의 하루 완성 네모와 겹치지 않게) */
.day.selected {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.day[data-date]:focus-visible {
  outline: 2px dashed var(--text);
  outline-offset: -2px;
}

/* 버튼 */
.btn {
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.btn:active {
  background: var(--btn-pressed-bg);
}

/* 시간표 판 */
.day-panel {
  min-width: 0;
  padding: 24px 16px;
}

.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.day-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  text-align: center;
}

.day-title-today {
  font-size: 0.6em;
  color: var(--muted);
  vertical-align: middle;
}

.tt-scroll {
  max-height: max(320px, calc(100vh - 140px));
  overflow-y: auto;
  border: var(--line-width) solid var(--line);
}

.timetable {
  --slot-h: 48px; /* 30분 칸 높이 */
  --label-w: 56px; /* 시각 글자 칸 너비 */
  position: relative;
}

.tt-row {
  display: flex;
  height: var(--slot-h);
  border-top: var(--line-width) solid var(--line);
}

.tt-row:not(.tt-hour) {
  border-top-style: dashed;
}

.tt-label {
  flex: none;
  width: var(--label-w);
  padding: 2px 4px;
  font-family: var(--font-num);
  font-size: 0.75rem;
  color: var(--muted);
}

.tt-slot {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.tt-slot:hover {
  background: var(--btn-bg);
}

.tt-slot:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

/* 계획 블록 층: --start·--len(분), --col·--cols(나란히 놓을 칸)는 script.js가 넣는다 */
.tt-plans {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--label-w);
  right: 4px;
  pointer-events: none;
}

.plan {
  position: absolute;
  top: calc(var(--start) * var(--slot-h) / 30);
  height: calc(var(--len) * var(--slot-h) / 30);
  left: calc(100% * var(--col) / var(--cols));
  width: calc(100% / var(--cols));
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 4px;
  overflow: hidden;
  pointer-events: auto;
  /* 계획 색 (M2): script.js가 --plan-color = var(--plan-N) 을 넣는다. 토큰이 없으면 버튼 색 */
  color: var(--plan-color-text, var(--btn-text));
  background: var(--plan-color, var(--btn-bg));
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.plan.done {
  opacity: 0.6;
}

.plan-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.plan-body {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  overflow: hidden;
}

.plan-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25;
}

.plan.done .plan-title {
  text-decoration: line-through;
}

.plan-time {
  font-family: var(--font-num);
  font-size: 0.75rem;
  line-height: 1.25;
}

/* 지금 시각 줄 (오늘만) */
.tt-now {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--start) * var(--slot-h) / 30);
  border-top: 2px solid var(--sun);
  pointer-events: none;
}

/* 계획 입력창 */
.plan-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 16px;
  color: var(--text);
  background: var(--bg);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.plan-dialog::backdrop {
  background: var(--shadow);
  opacity: 0.5;
}

.plan-dialog-title {
  margin: 0 0 12px;
  font-family: var(--font-title);
  font-size: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.field-row {
  display: flex;
  gap: 12px;
}

.field-row .field {
  flex: 1;
  min-width: 0;
}

.field-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.field-check input {
  width: 20px;
  height: 20px;
  margin: 0;
}

.field-input {
  width: 100%;
  min-height: 44px;
  padding: 8px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

textarea.field-input {
  resize: vertical;
}

.plan-error {
  min-height: 1.25em;
  margin: 0 0 8px;
  color: var(--sun);
}

.dialog-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-delete {
  margin-right: auto;
  color: var(--sun);
}

.btn-primary {
  color: var(--today-text);
  background: var(--today-bg);
}

@media (max-width: 420px) {
  .day-panel {
    padding: 16px 8px;
  }

  .timetable {
    --label-w: 48px;
  }
}

/* ======================================================================
   개발자 M2 — 계획 색·달 이동·디자인 바꾸기 (구조용). 이 구역만 개발자가 고친다.
   ====================================================================== */

/* 오른쪽 위 ⚙️ (F9) */
.app-bar {
  display: flex;
  justify-content: flex-end;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px 0;
}

.settings-open {
  min-width: 44px;
  padding: 0 8px;
}

/* 달 제목 + 이전·다음 달 버튼 */
.month-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.month-head .month-title {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.month-nav {
  flex: none;
  min-width: 44px;
  padding: 0;
}

/* 입력창의 색 칩 12개 (I6) */
.color-field {
  min-width: 0;
  padding: 0;
  border: 0;
}

.color-chips {
  display: grid;
  grid-template-columns: repeat(6, 44px);
  gap: 4px;
}

.color-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.color-chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.color-swatch {
  width: 28px;
  height: 28px;
  background: var(--plan-color, var(--btn-bg));
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.color-chip input:checked + .color-swatch {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

.color-chip input:focus-visible + .color-swatch {
  outline: 2px dashed var(--text);
  outline-offset: 4px;
}

/* 디자인 바꾸기 창 (F9) */
.settings-dialog {
  width: min(360px, calc(100% - 32px));
  padding: 16px;
  color: var(--text);
  background: var(--bg);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.settings-dialog::backdrop {
  background: var(--shadow);
  opacity: 0.5;
}

.settings-title {
  margin: 0 0 12px;
  font-family: var(--font-title);
  font-size: 1.25rem;
}

.theme-field {
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.theme-field .field-label {
  margin-bottom: 8px;
}

.theme-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  cursor: pointer;
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.theme-option input {
  width: 20px;
  height: 20px;
  margin: 0;
}

.theme-option:has(input:checked) {
  border-color: var(--text);
}

@media (max-width: 420px) {
  .app-bar {
    padding: 4px 8px 0;
  }
}

/* ======================================================================
   개발자 M3 — 루틴 (구조용). 이 구역만 개발자가 고친다.
   ====================================================================== */

/* 루틴에서 온 계획: 제목 앞 ↻ 표시 */
.plan-body {
  position: relative;
}

.plan.from-routine .plan-title {
  padding-left: 1.1em;
}

.plan-routine-mark {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.875rem;
  line-height: 1.25;
}

.plan-routine-note {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* 루틴 관리 창 */
.routine-dialog {
  width: min(440px, calc(100% - 32px));
  padding: 16px;
  color: var(--text);
  background: var(--bg);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.routine-dialog::backdrop {
  background: var(--shadow);
  opacity: 0.5;
}

.routine-dialog-title {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-size: 1.25rem;
}

.routine-help,
.routine-empty {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: var(--muted);
}

.routine-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.routine-item-open {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.routine-color {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  background: var(--plan-color, var(--btn-bg));
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.routine-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-item-meta {
  font-family: var(--font-num);
  font-size: 0.75rem;
  color: var(--muted);
}

.routine-add {
  margin-right: auto;
}

/* 요일 체크 (월~일) */
.weekday-field {
  min-width: 0;
  padding: 0;
  border: 0;
}

.weekday-checks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.weekday-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.weekday-check input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.weekday-check:has(input:checked) {
  border-color: var(--text);
}

/* ======================================================================
   개발자 M4 — 미완료 넘기기 (구조용). 이 구역만 개발자가 고친다.
   ====================================================================== */

/* 시간 미정 목록 */
.unscheduled {
  margin-bottom: 12px;
}

.unscheduled-title {
  margin: 0 0 6px;
  font-family: var(--font-title);
  font-size: 1rem;
}

.unscheduled-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.unscheduled-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px;
  color: var(--plan-color-text, var(--btn-text));
  background: var(--plan-color, var(--btn-bg));
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius);
}

.unscheduled-item .plan-body {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: auto;
  min-height: 36px;
}

.unscheduled-item.done .plan-title {
  text-decoration: line-through;
}

.unscheduled-item.done {
  opacity: 0.6;
}

/* N일째 · 넘김 표시 */
.plan-carry-days,
.plan-carried-label {
  margin-left: 4px;
  font-family: var(--font-num);
  font-size: 0.75rem;
  white-space: nowrap;
}

.plan-carry-days::before {
  content: "↪ ";
}

.plan-carried-label::before {
  content: "→ ";
}

/* 넘김 기록 (원래 날짜): 흐리게, 누를 수 없음 */
.plan.carried,
.unscheduled-item.carried {
  opacity: 0.45;
}

.plan.carried .plan-body,
.unscheduled-item.carried .plan-body {
  cursor: default;
}

/* ======================================================================
   개발자 M6 — 구글 로그인·동기화 (구조용). 이 구역만 개발자가 고친다.
   ====================================================================== */

.app-bar {
  align-items: center;
  gap: 8px;
}

.account-btn {
  white-space: nowrap;
}

.sync-status {
  min-width: 0;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-status[data-state="error"] {
  color: var(--sun);
}

/* ======================================================================
   개발자 — 입력창 버튼을 맨 위에 (휴대폰에서 삭제·취소·저장이 늘 보이게, 261005)
   모든 입력창: 제목 → 버튼 줄 → 오류 문구는 위에 고정, 내용(.dialog-body)만 스크롤.
   ====================================================================== */

.plan-dialog[open],
.routine-dialog[open],
.settings-dialog[open] {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.dialog-frame {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.dialog-frame > .dialog-buttons {
  flex: none;
  margin-bottom: 12px;
}

.dialog-frame > .plan-error {
  flex: none;
}

.plan-error:empty {
  display: none;
}

.dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ======================================================================
   개발자 F12 — 한국 공휴일 (구조용). 이 구역만 개발자가 고친다.
   ====================================================================== */

/* 공휴일 날짜: 일요일과 같은 빨간 글자 */
.day.holiday {
  color: var(--sun);
}

/* 날짜 칸 아래쪽에 공휴일 이름 (작게, 넘치면 …) */
.day[data-date] {
  position: relative;
}

.holiday-name {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.625rem;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sun);
}

/* 시간표 머리 날짜 옆 공휴일 이름 */
.day-title-holiday {
  font-size: 0.6em;
  color: var(--sun);
  white-space: nowrap; /* 좁은 화면에서 이름 가운데가 꺾이지 않게 */
  vertical-align: middle;
}

/* ======================================================================
   개발자 F13 — 오늘 시간 원판 (구조용). 이 구역만 개발자가 고친다.
   인포그래픽 시계: 두꺼운 테두리 고리 + 안쪽 눈금 + 조각 + 굵은 시곗바늘, 넓으면 바깥 안내선.
   색·굵기는 새 토큰(--clock-*)을 먼저 보고, 없으면 기존 토큰으로 보인다 → 디자이너가 테마별로 채운다.
   제안 토큰: --clock-bg(시계판) --clock-ring(테두리 고리, 차콜) --clock-ring-width(고리 굵기)
              --clock-tick(눈금) --clock-past(지난 시간 덮개) --clock-past-opacity
              --clock-hand(시곗바늘, 흰색) --clock-hand-width --clock-hand-edge(바늘 테두리)
              --clock-text(시각 숫자) --clock-callout-text(안내선 글자)
   ====================================================================== */

.dayclock {
  margin-top: 16px;
}

.dayclock-title {
  margin: 0 0 4px;
  font-family: var(--font-title);
  font-size: 1rem;
  text-align: center;
}

.dayclock-svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.dayclock-svg.wide {
  max-width: 560px;
}

.dayclock-face {
  fill: var(--clock-bg, var(--bg));
}

.dayclock-ring {
  fill: none;
  stroke: var(--clock-ring, var(--text));
  stroke-width: var(--clock-ring-width, 10);
  pointer-events: none;
}

.dayclock-slice {
  cursor: pointer;
}

.dayclock-slice-shape {
  fill: var(--plan-color, var(--btn-pressed-bg));
  stroke: var(--clock-bg, var(--bg));
  stroke-width: 1.5;
}

.dayclock-slice:focus-visible {
  outline: none;
}

.dayclock-slice:focus-visible .dayclock-slice-shape {
  stroke: var(--text);
  stroke-width: 2.5;
}

.dayclock-slice-label {
  fill: var(--plan-color-text, var(--text));
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.dayclock-past {
  fill: var(--clock-past, var(--muted));
  opacity: var(--clock-past-opacity, 0.4);
  pointer-events: none;
}

.dayclock-tick {
  stroke: var(--clock-tick, var(--clock-ring, var(--text)));
  stroke-width: 1;
}

.dayclock-tick.major {
  stroke-width: 2;
}

.dayclock-hour {
  fill: var(--clock-text, var(--muted));
  font-family: var(--font-num);
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.dayclock-hour.major {
  fill: var(--clock-text, var(--text));
  font-weight: 700;
}

.dayclock-hand {
  stroke: var(--clock-hand, var(--text));
  stroke-width: var(--clock-hand-width, 4);
  stroke-linecap: round;
  pointer-events: none;
}

.dayclock-center {
  fill: var(--clock-hand, var(--text));
  stroke: var(--clock-hand-edge, var(--clock-ring, var(--text)));
  stroke-width: 2;
  pointer-events: none;
}

/* 넓은 판: 조각마다 바깥 안내선 + 시간 범위·아이콘·이름 (안내선 색 = 조각 색) */
.dayclock-callout {
  cursor: pointer;
}

.dayclock-leader {
  fill: none;
  stroke: var(--plan-color, var(--line));
  stroke-width: 1.5;
}

.dayclock-leader-dot {
  fill: var(--plan-color, var(--line));
}

.dayclock-callout-time {
  fill: var(--clock-callout-text, var(--text));
  font-family: var(--font-num);
  font-size: 9px;
  font-weight: 700;
  dominant-baseline: middle;
}

.dayclock-callout-name {
  fill: var(--clock-callout-text, var(--muted));
  font-family: var(--font-body);
  font-size: 9px;
  dominant-baseline: middle;
}

/* 좁은 판(휴대폰): 원판 아래 목록 */
.dayclock-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.dayclock-item-open {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 4px 8px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: var(--line-width) solid var(--line);
  cursor: pointer;
}

.dayclock-item-color {
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--plan-color, var(--btn-bg));
  border-radius: var(--radius);
}

.dayclock-item-time {
  flex: none;
  font-family: var(--font-num);
  font-size: 0.8125rem;
  font-weight: 700;
}

.dayclock-item-icon {
  flex: none;
  min-width: 1em;
  font-size: 0.8125rem;
}

.dayclock-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dayclock-item.done .dayclock-item-name {
  text-decoration: line-through;
}

/* 노트북 폭: 달력 판이 칸 너비를 다 쓰게 (margin:auto 때문에 내용 크기로 줄어들던 것 바로잡음 — 원판 안내선 자리) */
@media (min-width: 900px) {
  .app > .calendar {
    width: 100%;
  }
}