/* School Helper — "시간표 시트"
   인쇄된 학급 시간표의 문법을 앱 전체 골격으로 쓴다. 페이지를 세로로
   관통하는 여백선 하나가 있고, 그 왼쪽 칸에 교시 번호·체크 동그라미·
   카운트다운 라벨이 모두 정렬된다. 정보는 각지고 평평하게, 누를 수
   있는 것만 둥글게 — 모서리가 곧 "만질 수 있다"는 뜻이다. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  /* 오직 숫자와 그 부호만 담당한다. 한글은 물론 로마자("영어B"의 B)까지
     시스템 서체로 떨어져서, 과목 이름이 두 서체로 쪼개지지 않는다. */
  unicode-range: U+0030-0039, U+0025, U+002E, U+002F, U+003A, U+2212;
}

:root {
  /* 옅은 민트 바닥 위에 흰 종이 한 장이 놓인 구성 */
  --page-bg: #edf3ed;
  --paper: #fcfdf8;
  --paper-lift: #f0f4eb;
  --ink: #12332f;
  --muted: #5d7268;
  --rule: #e0e7db;
  --rule-strong: #a5bdb4;
  --faint: #a6bcb5; /* 자주 쓰지 않는 조작(삭제)은 뒤로 물러나 있어야 한다 */

  /* 상태를 알리는 색. 시간이 모자라질수록 진해진다. */
  --warn: #d8840b;
  --urgent: #e8492b;
  --done: #12a06b;
  --rain: #1c93c4;

  /* 히어로 바탕에 아주 옅게 까는 같은 색 계열 */
  --calm-wash: #eef6f3;
  --warn-wash: #fdf3e2;
  --urgent-wash: #fdece8;
  --done-wash: #e2f7ee;
  --rain-wash: #e0f2fa;

  --gutter: 66px;
  --gutter-gap: 14px;
  --edge: 18px;
  --sheet-radius: 22px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-num: "Archivo", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* 모바일 기본값은 종이색 그 자체다 — 아래 이유 참고.
     넓은 화면(컴퓨터)에서는 아래 미디어 쿼리가 민트색으로 바꿔서
     흰 시트가 그 위에 카드처럼 뜨게 만든다. */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  /* iOS가 가로 모드에서 글자를 멋대로 키우지 않게 */
  -webkit-text-size-adjust: 100%;
  /* 한국어는 단어 중간에서 줄이 꺾이면 읽기 나빠진다. */
  word-break: keep-all;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  /* 끝까지 당겼을 때 페이지 바깥이 같이 딸려오지 않게 */
  overscroll-behavior-y: none;
}

/* iOS 터치 다듬기: 누를 때 회색 사각형이 번쩍이지 않게, 두 번 탭 확대와
   0.3초 지연 없이, 길게 눌러도 글자가 선택되지 않게. */
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 떠 있는 탭 바(높이 약 46px + 아래 여백 14px)에 마지막 줄이 가리지 않을 만큼 */
  padding: max(14px, env(safe-area-inset-top)) 0 calc(84px + env(safe-area-inset-bottom));
}

/* 카드를 여러 장 띄우는 대신, 종이 한 장 안에 괘선으로 나눈다.
   폰이 주 사용처라 기본은 좌우를 꽉 채운다 — 좁은 화면에서 양옆을
   테두리로 버리지 않기 위해서다. 위쪽 모서리만 둥글려 둔다.
   flex:1로 항상 남는 공간까지 채우려고 하지만, 실기기 사파리는 URL
   바가 접히고 펴지면서 100dvh 계산이 매 순간 미묘하게 달라 flex만으로는
   정확히 안 맞을 때가 있다 — 그래서 body 배경 자체를 종이색으로 깔아둔다
   (바로 위 html,body 규칙). main이 살짝 못 채워도 그 밑에 보이는 게
   민트색이 아니라 같은 흰색이라, 어긋나도 눈에 띄지 않는다. */
main {
  flex: 1 0 auto;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

/* 화면이 넉넉할 때(컴퓨터·태블릿)만 민트 배경 위에 종이를 카드로 띄운다.
   좁은 화면에서는 종이가 곧 배경이라 이 대비가 필요 없다. */
@media (min-width: 520px) {
  html, body { background: var(--page-bg); }

  .page { padding-left: 12px; padding-right: 12px; }

  main {
    border-radius: var(--sheet-radius);
    box-shadow: 0 1px 3px rgba(18, 51, 47, 0.05);
  }
}

/* --- 상단 --- */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 12px;
}

.date {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.icon-btn {
  flex: none;
  border: none;
  background: none;
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 클래스의 display가 hidden 속성을 이겨버리므로 예외를 명시한다
   (이게 없으면 개발자 버튼이 아이폰에서도 보인다). */
.icon-btn[hidden] { display: none; }

.icon-btn:active { background: var(--paper-lift); }

/* --- 시트 골격 ---
   섹션 사이에 간격을 두지 않고 아래쪽 괘선으로만 나눈다. 그래야 각
   섹션이 그리는 세로 여백선 조각이 하나의 연속된 선으로 이어진다. */

.hero,
.timetable-card,
.checklist-card {
  position: relative;
  border-bottom: 1px solid var(--rule);
}

.hero::before,
.timetable-card::before,
.checklist-card::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-strong);
}

/* 오른쪽 칸(여백선 이후)에 놓이는 제목·안내문 */
.timetable-head h2,
.checklist-head,
.timetable-banner,
.timetable-status,
.off-card-sub,
.add-item-form {
  padding-left: calc(var(--gutter) + var(--gutter-gap));
  padding-right: var(--edge);
}

/* --- 히어로: 남은 시간 --- */

.hero {
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  grid-auto-rows: min-content;
  column-gap: var(--gutter-gap);
  padding: 24px var(--edge) 24px 0;
  background: var(--calm-wash);
  transition: background 0.5s ease;
  /* 등교하기 버튼이 나타날 자리를 미리 잡아둔다 — 버튼이 생겨도 아래
     내용이 밀려 내려가지 않게. */
  min-height: 216px;
  align-content: start;
}

.hero.state-warn { background: var(--warn-wash); }
.hero.state-urgent { background: var(--urgent-wash); }
.hero.state-done { background: var(--done-wash); }
.hero.state-passed { background: var(--paper-lift); }

.hero-eyebrow {
  grid-column: 1;
  align-self: start;
  justify-self: end;
  margin: 0;
  padding: 6px 12px 0 4px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  opacity: 0.7;
}

.hero-value {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-num);
  font-stretch: 112%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(62px, 21vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  transition: color 0.4s ease;
}

/* 숫자 옆 단위(분·시간)는 한글이라 시스템 서체로, 훨씬 작게 붙인다. */
.hero-value .unit {
  font-family: var(--font-ui);
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0.18em 0 0.06em;
}

.hero-value .unit:last-child { margin-right: 0; }

/* "완료!" "서둘러요"처럼 숫자가 아닌 상태 문구 */
.hero-value.is-word {
  font-family: var(--font-ui);
  font-size: clamp(38px, 12vw, 54px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* 목표 시각까지 마지막 한 시간이 줄어드는 걸 눈으로 보여준다.
   숫자 하나만 덩그러니 놓이지 않도록 하는 장치이자, 남은 양의 감각을 준다. */
.hero-track {
  grid-column: 2;
  height: 7px;
  margin-top: 16px;
  border-radius: 999px;
  background: rgba(18, 51, 47, 0.09);
  overflow: hidden;
}

.hero-track[hidden] { display: none; }

.hero-track-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
  transition: width 0.6s ease, background 0.4s ease;
}

.hero.state-warn .hero-track-fill { background: var(--warn); }
.hero.state-urgent .hero-track-fill { background: var(--urgent); }

.hero-sub {
  grid-column: 2;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.hero.state-warn .hero-value { color: var(--warn); }
.hero.state-urgent .hero-value { color: var(--urgent); }
.hero.state-passed .hero-value { color: var(--muted); }
.hero.state-done .hero-value { color: var(--done); }

.depart-btn {
  grid-column: 2;
  justify-self: start;
  margin-top: 18px;
  border: none;
  border-radius: 16px;
  background: var(--done);
  color: var(--paper-lift);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  cursor: pointer;
}

.depart-btn:active { transform: scale(0.98); }

/* --- 시간표 --- */

.timetable-card { padding: 18px 0 16px; }

.timetable-head h2,
.checklist-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.timetable-head h2 { margin-bottom: 10px; }

.timetable-banner {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--urgent);
}

.timetable-banner::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--urgent);
}

.timetable-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timetable-item {
  display: grid;
  grid-template-columns: var(--gutter) 52px 1fr;
  column-gap: var(--gutter-gap);
  align-items: baseline;
  padding: 9px var(--edge) 9px 0;
}

.tt-period {
  grid-column: 1;
  justify-self: end;
  padding-right: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tt-time {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.tt-subject {
  font-size: 15px;
  font-weight: 600;
}

/* 평소와 달라진 교시는 띠로 표시한다 — 줄 자체는 격자에 맞춰 각지게 둔다. */
.timetable-item.changed { background: var(--urgent-wash); }
.timetable-item.changed .tt-period { color: var(--urgent); }
.timetable-item.changed .tt-subject { color: var(--urgent); }

.tt-was {
  grid-column: 3;
  font-size: 11px;
  color: var(--muted);
}

.timetable-status {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* --- 체크리스트 --- */

.checklist-card { padding: 18px 0 16px; }

.checklist-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.checklist-head h2 { flex: 1; }

.checklist-count {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.add-item-btn {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 10px;
  background: var(--paper-lift);
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.add-item-btn:active { transform: scale(0.94); }

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 한 줄의 뼈대: [여백칸] [이름] [따라붙는 배지들]
   여백칸에 무엇이 오는지는 줄의 종류가 정한다 — 체크 동그라미(오늘),
   삭제 버튼(플래너), 자동 추가 표시(시간표·날씨). */
.checklist-item {
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  /* 배지·삭제 버튼처럼 뒤에 붙는 것들은 새 줄이 아니라 오른쪽 칸으로 흘러야 한다. */
  grid-auto-flow: column;
  grid-auto-columns: auto;
  column-gap: var(--gutter-gap);
  align-items: center;
  padding: 10px var(--edge) 10px 0;
  border-top: 1px solid var(--rule);
}

.checklist-item:first-child { border-top: none; }

.check-circle,
.remove-circle,
.edit-circle,
.auto-badge {
  justify-self: center;
}

.check-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.check-circle svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.checklist-item.checked .check-circle {
  background: var(--done);
  border-color: var(--done);
}

.checklist-item.checked .check-circle svg { opacity: 1; }

.checklist-item.checked .item-label {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--rule-strong);
}

/* 선택 항목: 점선 동그라미 + 흐린 글씨로 "안 챙겨도 된다"를 말한다. */
.checklist-item.optional .check-circle {
  border-style: dashed;
  background: transparent;
}

.checklist-item.optional .item-label { color: var(--muted); }
.checklist-item.optional.checked .check-circle { border-style: solid; }
.checklist-item.optional.checked .item-label { color: var(--muted); }

.remove-circle,
.edit-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.remove-circle svg,
.edit-circle svg { width: 15px; height: 15px; }
.remove-circle:active,
.edit-circle:active { background: var(--paper-lift); }

.auto-badge {
  width: 26px;
  height: 26px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auto-badge svg { width: 15px; height: 15px; }

.item-label {
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* 할 일에 목표일을 정했는데 못 지킨 경우 — 글자와 기한 배지를 경고색으로. */
.checklist-item.overdue .item-label { color: var(--urgent); font-weight: 700; }
.checklist-item.overdue .badge-tomorrow { color: var(--urgent); background: var(--urgent-wash); }

.badge-tomorrow,
.badge-rain {
  justify-self: end;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 999px;
}

.badge-tomorrow {
  color: var(--muted);
  background: var(--paper-lift);
}

.badge-rain {
  font-family: var(--font-num);
  color: var(--rain);
  background: var(--rain-wash);
  font-variant-numeric: tabular-nums;
}

.off-card-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* --- 집 주소 / 파생 등교시각 --- */

.wizard-choice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.wizard-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  background: var(--paper);
  padding: 13px 14px;
  cursor: pointer;
}

.wizard-choice.active {
  border-color: var(--ink);
  background: var(--paper-lift);
}

.wizard-choice-icon {
  flex: none;
  font-size: 20px;
  line-height: 1;
  margin-top: 1px;
}

.wizard-choice-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wizard-choice-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.wizard-choice-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

#wizardHomeAddressSection {
  margin-top: 10px;
}

#wizardHomeAddressSection[hidden] { display: none; }

.address-search-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.address-search-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-lift);
  color: var(--ink);
}

.address-search-btn {
  flex: none;
  border: none;
  border-radius: 12px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--paper-lift);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.address-search-btn:active { transform: scale(0.97); }

#homeAddressResults {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.address-result {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  padding: 11px 13px;
  cursor: pointer;
}

.address-result:active { background: var(--paper-lift); }

.address-result-pin {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--faint);
}

.address-result-pin svg { width: 100%; height: 100%; }

/* 확정된 집 주소 — 체크리스트의 "완료" 색(--done)을 그대로 빌려와,
   이 순간부터 아래 시각 계산이 자동으로 굴러간다는 걸 색으로 알려준다. */
.home-address-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--done-wash);
}

.home-address-card[hidden] { display: none; }

.home-address-pin {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--done);
}

.home-address-pin svg { width: 100%; height: 100%; }

.home-address-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.home-address-change {
  flex: none;
  border: none;
  background: none;
  color: var(--done);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}

.home-address-clear {
  display: block;
  text-align: left;
  margin-top: 6px;
}

.home-address-clear[hidden] { display: none; }

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

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

.derived-inputs-row input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-lift);
  color: var(--ink);
}

/* 준비 시작 → 출발 → 등교를 세로선 하나로 잇는다 — 이 앱 전체를 관통하는
   여백선(--gutter)과 같은 발상을, 체크리스트 항목이 아니라 시각 세
   지점을 잇는 타임라인으로 그대로 재사용한다. */
.commute-timeline {
  position: relative;
  margin: 14px 0 4px;
  padding-left: 22px;
}

.commute-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--rule-strong);
}

.commute-row-stop {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
}

.commute-dot {
  position: absolute;
  left: -22px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--done);
  box-shadow: 0 0 0 3px var(--paper);
}

.commute-dot-end { background: var(--ink); }

.commute-time {
  font-family: var(--font-num);
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.commute-stop-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.commute-row-gap {
  padding: 6px 0 6px 2px;
}

.commute-gap-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.commute-gap-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  padding: 2px 0;
  cursor: pointer;
}

.commute-gap-edit svg { flex: none; color: var(--faint); }
.commute-gap-edit.active { color: var(--ink); }
.commute-gap-edit.active svg { color: var(--ink); }

.commute-edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.commute-edit-row[hidden] { display: none; }

.commute-edit-row input[type="number"] {
  width: 72px;
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-lift);
  color: var(--ink);
}

.commute-edit-row .add-item-submit {
  padding: 8px 16px;
  font-size: 13px;
}

.commute-edit-row .link-btn[hidden] { display: none; }

/* --- 준비물 추가 폼 --- */

.add-item-form {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  padding-bottom: 12px;
}

.add-item-form[hidden] { display: none; }
.add-item-form:not([hidden]) { display: flex; }

.quick-add-chips {
  flex: 1 1 100%;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.quick-add-chips[hidden] { display: none; }

.quick-add-chip {
  flex: none;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}

.quick-add-chip:active { background: var(--paper-lift); }

/* 준비물 설정에서 쓰는, 직접 추가하고 지우는 목록용 칩 — 한 번 누르면
   바로 추가되는 위 프리셋 칩과 달리 텍스트 옆에 삭제 버튼이 딸려 있다. */
.prep-chip {
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.prep-chip button {
  border: none;
  background: none;
  color: var(--faint);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

/* 반복 주기/요일처럼 한 번 고른 채로 유지되는 칩 (한 번 누르면 바로
   추가되는 위 기본 칩과 달리, 선택 상태를 계속 보여줘야 한다). */
.quick-add-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* 시작일·목표일을 한 줄에 나란히 두면 좁은 화면에서 날짜 입력칸이
   잘려서, 각자 한 줄씩 차지하게 세로로 쌓는다. */
.todo-date-row {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.todo-date-row[hidden] { display: none; }

.todo-date-row .todo-date-field { justify-content: space-between; }

/* 16px 미만이면 iOS가 입력 시작할 때 화면을 확대해버린다 — 그래서 16px 고정. */
.add-item-form input[type="text"],
.add-item-form input[type="number"],
.add-item-form select {
  flex: 1 1 100%;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-lift);
  color: var(--ink);
}

.add-item-form select { flex: none; }
.add-item-form input[type="number"] { flex: none; }

.repeat-toggle,
.todo-date-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.repeat-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ink);
}

.perf-eval-confirm-btn { white-space: nowrap; }

.add-item-form input[type="date"] {
  flex: none;
  width: 148px;
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-lift);
  color: var(--ink);
}

.add-item-submit {
  flex: none;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper-lift);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  cursor: pointer;
}

.todo-form-title {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.todo-form-title[hidden] { display: none; }

.todo-form-actions {
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
}

.todo-form-actions .add-item-submit { flex: 1; }

.todo-delete-btn {
  flex: none;
  border: none;
  border-radius: 10px;
  background: var(--urgent-wash);
  color: var(--urgent);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  cursor: pointer;
}

.todo-delete-btn[hidden] { display: none; }

/* 수정 모드일 때 폼을 감싸서 "새로 추가"가 아니라 이 항목을 고치는
   중이라는 걸 배경으로도 드러낸다. */
/* padding을 통으로 지정하면 .add-item-form이 이미 갖고 있던
   padding-left(노트 여백선을 피하는 값)를 덮어써서 줄이 입력칸을
   가로지르게 된다 — 위아래만 더해준다. */
#todoAddForm.editing {
  background: var(--paper-lift);
  border-radius: 12px;
  padding-top: 10px;
  padding-bottom: 12px;
}

/* --- 플래너 --- */

/* 플래너 머리(날짜 + 요일 칸)도 히어로처럼 옅게 깔아서 한 덩어리로 읽히게 한다. */
.tomorrow-head,
.planner-pills {
  background: var(--calm-wash);
}

.tomorrow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 18px var(--edge) 14px;
}

.tomorrow-eyebrow {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--done);
}

.tomorrow-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.link-btn {
  flex: none;
  border: none;
  background: none;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}

.planner-pills {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 var(--edge) 14px;
  border-bottom: 1px solid var(--rule);
}

.planner-pill {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 46px;
  padding: 7px 0 9px;
  border: none;
  border-radius: 15px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.planner-pill.weekend { color: var(--muted); }

.planner-pill.active {
  background: var(--ink);
  color: var(--paper-lift);
}

.pill-day {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
}

.pill-date {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pill-dot {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--done);
}

.planner-pill.active .pill-dot { background: var(--paper-lift); }

/* --- 오늘 화면의 비 알림 줄 --- */

.rain-notice {
  display: grid;
  grid-template-columns: var(--gutter) 1fr auto;
  column-gap: var(--gutter-gap);
  align-items: center;
  width: 100%;
  padding: 13px var(--edge) 13px 0;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: var(--rain-wash);
  color: var(--rain);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.rain-notice[hidden] { display: none; }
.rain-notice:active { filter: brightness(0.97); }

.rain-notice-icon,
.rain-notice-go {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rain-notice-icon svg { width: 17px; height: 17px; }
.rain-notice-go svg { width: 16px; height: 16px; opacity: 0.7; }

/* --- 날씨 화면 --- */

.weather-body { padding: 18px var(--edge) 22px; }

.weather-summary {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
}

.rain-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.rain-chart .bar { fill: var(--rain); }

.rain-chart .axis {
  stroke: var(--rule-strong);
  stroke-width: 1;
}

/* 막대 위에 겹치므로 파란 막대와 흰 배경 양쪽에서 보여야 한다. */
.rain-chart .threshold {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.4;
}

/* 축 글자는 계열 색이 아니라 글자 색을 쓴다. */
.rain-chart .tick {
  fill: var(--muted);
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 600;
}

.chart-caption {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.rain-chart .peak {
  fill: var(--ink);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
}

.pill-dot.rain { background: var(--rain); }
.planner-pill.active .pill-dot.rain { background: var(--paper-lift); }

/* --- 급식 화면 --- */

.meal-dish-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.meal-dish-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}

.meal-dish-list li:last-child { border-bottom: none; }

/* --- 하단 탭 --- */

/* 바닥에 붙은 판이 아니라 내용 위에 떠 있는 캡슐. 뒤가 비쳐서 화면이
   좁아 보이지 않고, 홈 인디케이터 위로 띄워 엄지로 누르기 좋은 높이에 온다. */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  z-index: 5;
  display: flex;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 5px;
  border-radius: 999px;
  background: rgba(251, 253, 252, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(18, 51, 47, 0.07);
  box-shadow: 0 8px 24px rgba(18, 51, 47, 0.14), 0 1px 3px rgba(18, 51, 47, 0.06);
}

.tab {
  flex: none;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 26px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.tab.active {
  background: var(--ink);
  color: var(--paper);
}

/* 반투명이 지원되지 않으면 불투명 배경으로 떨어뜨린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar { background: var(--paper); }
}

/* --- 연속 기록 --- */

.streak {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px var(--edge) 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.streak-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.streak.active { color: var(--done); }
.streak.active .streak-dot { background: var(--done); }

/* --- 설정 / 개발자 시트 --- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 48, 43, 0.34);
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
}

.overlay[hidden] { display: none; }
.overlay:not([hidden]) { display: flex; }

.sheet {
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  padding: 18px var(--edge) max(18px, env(safe-area-inset-bottom));
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.sheet-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.sheet-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.field-hint {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}

.field-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.field-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--ink);
}

input[type="time"],
input[type="datetime-local"],
input[type="date"] {
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-lift);
  color: var(--ink);
}

.dev-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-item-submit#devSetTimeBtn { align-self: flex-start; }

.sheet-foot { padding-top: 16px; }

.prep-step-count {
  margin-left: auto;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.prep-step[hidden] { display: none; }

.prep-step-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prep-step-nav .btn-primary { flex: 1; }

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  width: 100%;
  border: none;
  background: var(--ink);
  color: var(--paper-lift);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
}

.btn-primary:active { transform: scale(0.98); }

/* 첫 실행 온보딩 — 설정 화면과 헷갈리지 않게 축하하는 느낌을 준다. */
.sheet-onboarding {
  overflow: hidden;
}

.sheet-onboarding .sheet-head {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  border-bottom: none;
  background: var(--done-wash);
  margin: -18px calc(-1 * var(--edge)) 16px;
  padding: 28px var(--edge) 18px;
  border-radius: 24px 24px 0 0;
}

.sheet-onboarding .sheet-head h2 {
  font-size: 26px;
  color: var(--done);
}

.sheet-onboarding #prepSetupIntro {
  text-align: center;
  font-size: 14px;
}

.sheet-onboarding .btn-primary {
  background: var(--done);
  font-size: 18px;
  padding: 17px;
  border-radius: 14px;
}

.sheet-onboarding .btn-primary:active { transform: scale(0.96); }

@media (prefers-reduced-motion: no-preference) {
  .sheet-onboarding .sheet-head { animation: onboarding-pop 0.35s ease-out; }
}

@keyframes onboarding-pop {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* Morning Club — forest / mint / acid lime. 기존 시간표의 정렬 체계는 유지한다. */
:root { --brand-forest: #102f29; --brand-mint: #b8f0cf; --brand-lime: #d6ef83; }
html, body { background: var(--page-bg); }
.page { padding-top: max(20px, env(safe-area-inset-top)); }
.topbar { padding: 0 18px 20px; gap: 11px; }
.brand-icon { border-radius: 14px; flex: none; box-shadow: 0 3px 8px #102f2912; }
.brand-heading { flex: 1; min-width: 0; }
.brand-name { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 5px; }
.brand-dot { width: 5px; height: 5px; border-radius: 50%; background: #33956b; }
.date { font-size: 15px; letter-spacing: -.4px; }
.topbar .icon-btn { background: #ffffffaa; border: 1px solid #dbe4d6; width: 38px; height: 38px; border-radius: 50%; }
main { border-radius: 28px 28px 0 0; }
.hero { background: var(--brand-forest); min-height: 230px; padding-top: 30px; padding-bottom: 28px; overflow: hidden; }
.hero::before { background: #b8f0cf20; }
.hero:not(.state-warn):not(.state-urgent):not(.state-done):not(.state-passed) .hero-value { color: var(--brand-mint); }
.hero:not(.state-warn):not(.state-urgent):not(.state-done):not(.state-passed) .hero-eyebrow { color: #e3f5df; opacity: 1; }
.hero:not(.state-warn):not(.state-urgent):not(.state-done):not(.state-passed) .hero-sub { color: #b6c9bc; }
.hero:not(.state-warn):not(.state-urgent):not(.state-done):not(.state-passed) .hero-track { background: #b8f0cf26; }
.hero:not(.state-warn):not(.state-urgent):not(.state-done):not(.state-passed) .hero-track-fill { background: var(--brand-lime); }
.hero.state-passed { background: #e8eedf; }
.hero.state-done { background: #def1d1; }
.hero-value { letter-spacing: -.055em; }
.depart-btn { background: var(--brand-lime); color: var(--brand-forest); box-shadow: 0 4px 14px #102f2912; }
.timetable-head h2, .checklist-head h2 { font-size: 15px; letter-spacing: -.3px; }
.timetable-item { padding-top: 10px; padding-bottom: 10px; }
.tabbar { background: var(--brand-forest); border-color: #25483c; box-shadow: 0 10px 28px #102f2933; padding: 6px; }
.tab { color: #c1d0c5; padding: 12px 25px; }
.tab.active { background: var(--brand-lime); color: var(--brand-forest); box-shadow: 0 2px 8px #00000015; }
.sheet { border-radius: 28px 28px 0 0; }
button { transition: background .18s ease, color .18s ease, transform .18s ease; }
button:active { transform: scale(.97); }
@media (min-width: 520px) {
  .page { padding-top: 32px; }
  main { border-radius: 28px; box-shadow: 0 12px 42px #193b2310; }
}
@media (max-width: 359px) {
  .topbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .brand-name { font-size: 8px; letter-spacing: 1px; }
  .tab { padding-left: 21px; padding-right: 21px; }
}

/* 문서가 열릴 때 한 번. 별도 로딩 타이머·네트워크 대기 없이 CSS만으로 종료. */
.launch-screen { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .launch-screen {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    background: var(--brand-forest); color: #f2f7e8; overflow: hidden;
    pointer-events: none; animation: launch-away 1.15s cubic-bezier(.22,1,.36,1) both;
  }
  .launch-content { position: relative; text-align: center; padding: 24px; }
  .launch-icon { width: 128px; height: 128px; margin: 0 auto 28px; border-radius: 34px; overflow: hidden; box-shadow: 0 16px 48px #00000025; animation: backpack-arrive .75s cubic-bezier(.18,.9,.3,1.2) both; }
  .launch-icon img { display: block; width: 100%; height: 100%; }
  .launch-kicker { margin: 0 0 10px; color: var(--brand-lime); font-size: 10px; font-weight: 800; letter-spacing: 3px; animation: launch-copy .5s .16s both; }
  .launch-title { margin: 0; font-size: 30px; letter-spacing: -1px; font-weight: 750; animation: launch-copy .5s .22s both; }
  .launch-line { display: block; width: 32px; height: 3px; margin: 26px auto 0; border-radius: 2px; background: var(--brand-lime); animation: launch-line .75s ease both; }
  .launch-orbit { position: absolute; width: min(80vw,400px); aspect-ratio: 1; border: 1px solid #b8f0cf16; border-radius: 50%; animation: orbit-arrive 1.1s ease-out both; }
  .launch-orbit::after { content: ""; position: absolute; inset: -35px; border: 1px solid #b8f0cf0b; border-radius: 50%; }
  .launch-footer { position: absolute; bottom: max(44px,env(safe-area-inset-bottom)); font-size: 9px; letter-spacing: 3px; color: #b8cfbe; }
  .page > main { animation: surface-arrive .6s .75s backwards; }
  .topbar { animation: launch-copy .5s .8s backwards; }
  .tabbar { animation: launch-copy .5s .9s backwards; }
}
@keyframes launch-away { 0%,65% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes backpack-arrive { from { opacity: 0; transform: translateY(24px) scale(.8) rotate(-8deg); } 65% { opacity: 1; transform: translateY(-5px) scale(1.03) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes launch-copy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes surface-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes orbit-arrive { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1.15); } }
@keyframes launch-line { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .launch-screen { display: none !important; }
}

/* 첫 설정은 별도의 전체 화면. 설정에서 여는 편집 시트에는 적용하지 않는다. */
.setup-aside, .setup-progress { display: none; }
.setup-welcome[hidden] { display: none; }
body.setup-page { overflow: hidden; }
body.setup-page > .page { display: none; }
body.setup-page #prepSetupOverlay {
  position: fixed; inset: 0; background: #f7f8f2; align-items: stretch;
  justify-content: center; overflow: hidden; z-index: 20;
}
body.setup-page .sheet-onboarding {
  width: 100%; max-width: 620px; height: 100dvh; max-height: none;
  border-radius: 0; background: #f7f8f2; padding: max(26px,env(safe-area-inset-top)) 28px max(22px,env(safe-area-inset-bottom));
}
body.setup-page .sheet-onboarding .sheet-head {
  flex-direction: row; text-align: left; background: none; margin: 0 0 26px;
  padding: 0; border-radius: 0; gap: 12px; animation: none;
}
body.setup-page .sheet-head h2 { color: var(--ink); font-size: 14px; font-weight: 650; }
body.setup-page .prep-step-count { font-size: 11px; color: var(--muted); margin: 0 0 0 auto; white-space: nowrap; }
body.setup-page .setup-progress:not([hidden]) { display: flex; gap: 7px; margin: 0 0 30px; }
.setup-progress span { height: 3px; flex: 1; border-radius: 8px; background: #dce4d6; }
.setup-progress span.complete { background: #377b59; }
body.setup-page .sheet-body { flex: 1; min-height: 0; padding: 4px 0 20px; gap: 14px; }
body.setup-page #prepSetupIntro { text-align: left; font-size: 12px; margin: 0 0 10px; color: var(--muted); }
.setup-welcome > img { border-radius: 26px; margin: 12px 0 30px; box-shadow: 0 12px 25px #102f2910; }
.setup-eyebrow { font-size: 9px; font-weight: 750; letter-spacing: 2px; color: #568066; margin: 0 0 14px; }
.setup-welcome h3 { margin: 0 0 20px; font-size: clamp(34px,9vw,46px); line-height: 1.22; letter-spacing: -1.8px; font-weight: 750; }
.setup-description { color: #617161; font-size: 14px; line-height: 1.85; margin: 0; }
.setup-roadmap { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; padding: 22px 0; border-top: 1px solid #dfe5d8; border-bottom: 1px solid #dfe5d8; font-size: 13px; color: #45604d; }
.setup-private { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #617161; line-height: 1.7; }
body.setup-page .prep-step { gap: 18px; }
body.setup-page .prep-step > .field-label { font-size: 29px; line-height: 1.3; letter-spacing: -1px; color: var(--ink); }
body.setup-page .prep-step > .off-card-sub { padding: 0; line-height: 1.85; font-size: 14px; margin: 0 0 10px; }
body.setup-page .prep-step .add-item-form { padding: 0; margin: 0; border: 0; background: none; }
body.setup-page .prep-step input { background: #fff; border-color: #ccd8c7; border-radius: 14px; padding: 16px; }
body.setup-page .prep-step .quick-add-chip { padding: 11px 14px; }
body.setup-page .sheet-foot { background: #f7f8f2; border-top: 1px solid #e3e8db; padding-top: 18px; }
body.setup-page .sheet-onboarding .btn-primary { background: var(--brand-forest); color: #eaf6dc; font-size: 15px; border-radius: 16px; padding: 18px; }
body.setup-page #prepSetupSkipBtn { display: block; margin: 14px auto 0; font-size: 12px; color: #66755f; }
body.setup-page #prepSetupSkipBtn[hidden] { display: none; }
body.setup-page .wizard-choice-group { gap: 14px; }
body.setup-page .wizard-choice { background: #fff; padding: 20px 16px; border-radius: 18px; }
body.setup-page .wizard-choice-desc { line-height: 1.8; }
@media (min-width: 900px) {
  body.setup-page #prepSetupOverlay { justify-content: stretch; }
  body.setup-page .setup-aside { display: flex; flex: 1; flex-direction: column; justify-content: space-between; background: #102f29; color: #d9edcf; padding: 45px 5vw; }
  .setup-wordmark, .setup-aside-foot { font-size: 10px; letter-spacing: 2px; color: #abc5ac; }
  .setup-aside > div { margin: auto 0; }
  .setup-aside img { border-radius: 48px; }
  .setup-aside p { font-size: 38px; letter-spacing: -1px; line-height: 1.4; }
  .setup-aside > div > span { color: #adc5b4; font-size: 14px; }
  body.setup-page .sheet-onboarding { flex: 1; padding: 45px 56px 32px; }
}
@media (max-width: 359px) {
  body.setup-page .sheet-onboarding { padding-left: 22px; padding-right: 22px; }
  .setup-welcome > img { width: 64px; height: 64px; margin-bottom: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  body.setup-page .prep-step:not([hidden]), body.setup-page .setup-welcome:not([hidden]) { animation: launch-copy .3s ease-out both; }
}
/* 단계 제목은 스크린리더의 이동 지점이며 조작 버튼은 아니다. */
#prepSetupTitle:focus { outline: none; }

.browse-banner { margin: 0 16px 16px; padding: 16px; border: 1px solid #cedec3; border-radius: 18px; background: #e5efd9; }
.browse-banner[hidden] { display: none; }
.browse-banner strong { display: block; font-size: 13px; color: var(--ink); }
.browse-banner span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: #5d725c; }
.browse-banner button { border: 0; background: var(--brand-forest); color: #eaf6dc; padding: 12px 16px; margin-top: 12px; border-radius: 12px; font: 600 13px var(--font-ui); width: 100%; cursor: pointer; }

/* 둘러보기의 목록 제목은 수정 가능한 항목처럼 보이지 않게 한다. */
.browsing-app #todoScreen .item-label { cursor: default; }

/* 일반 설정: 여유 있는 전용 화면과 항상 닿을 수 있는 저장 버튼. */
body.settings-open { overflow: hidden; }
#overlay { background: #f3f5ee; align-items: stretch; padding: 0; }
#overlay .settings-sheet { max-width: 820px; height: 100dvh; max-height: 100dvh; border-radius: 0; background: #f3f5ee; padding: max(22px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom)); }
#overlay .sheet-head { border: 0; margin: 0; padding-bottom: 20px; align-items: flex-start; }
.settings-kicker { display: block; font-size: 10px; letter-spacing: .16em; color: #527261; margin-bottom: 12px; }
#overlay .sheet-head h2 { font-size: clamp(25px, 4vw, 34px); font-weight: 700; letter-spacing: -.05em; color: var(--brand-forest); }
#overlay .icon-btn { background: #e3e9dc; width: 44px; height: 44px; flex-shrink: 0; }
.settings-shortcuts { display: flex; gap: 8px; padding: 0 0 18px; }
.settings-shortcuts button { flex: 1; border: 1px solid #dce4d4; border-radius: 14px; background: #fffef8; padding: 13px 8px; color: var(--brand-forest); font: 600 13px var(--font-ui); cursor: pointer; }
.settings-shortcuts button:hover { background: #e5efd9; }
#overlay .sheet-body { flex: 1; min-height: 0; gap: 18px; overscroll-behavior: contain; padding: 0 2px 12px; }
.settings-intro { margin: 0 0 3px; color: #647466; font-size: 13px; line-height: 1.7; }
.settings-section { padding: 24px; border-radius: 24px; background: #fffefb; border: 1px solid #e0e6d9; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 8px; }
.settings-section-heading { display: flex; gap: 14px; align-items: flex-start; }
.settings-section-heading > span { border-radius: 12px; background: #e4efd9; color: #36523c; padding: 12px 10px; font-size: 12px; }
.settings-section-heading h3 { margin: 0 0 7px; font-size: 18px; color: var(--brand-forest); letter-spacing: -.04em; }
.settings-section-heading p { margin: 0; font-size: 12px; color: #6c7a6a; line-height: 1.6; }
#overlay .field { gap: 10px; }
#overlay .field-hint { line-height: 1.7; }
#overlay input:not([type="checkbox"]) { min-height: 48px; min-width: 0; font-size: 16px; border-radius: 12px; }
#overlay #rawTimeFields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#overlay #rawTimeFields[hidden] { display: none; }
#overlay .field-toggle { align-items: center; line-height: 1.7; gap: 14px; }
#overlay #notifyToggle { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--brand-forest); }
#overlay #openPrepSetupBtn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px; background: #eaf0df; border-radius: 14px; color: var(--brand-forest); text-decoration: none; font-size: 14px; }
#overlay .sheet-foot { padding-top: 12px; background: #f3f5ee; border-top: 1px solid #dfe6d6; }
#overlay .btn-primary { padding: 17px; border-radius: 16px; background: var(--brand-forest); color: #edfadf; }
#overlay button { transition: background .18s ease, transform .18s ease; }
#overlay button:active { transform: scale(.98); }
#overlay :focus-visible { outline: 3px solid #618960; outline-offset: 3px; }
#settingsTitle:focus, .settings-section:focus { outline: none; }
@keyframes settings-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) { #overlay:not([hidden]) .settings-sheet { animation: settings-arrive .28s ease-out; } }
@media (min-width: 800px) { #overlay .settings-sheet { padding: 36px 40px 24px; } }
@media (max-width: 380px) { #overlay .settings-sheet { padding-left: 16px; padding-right: 16px; } .settings-section { padding: 18px; } #overlay #rawTimeFields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { #overlay button { transition: none; } }

body.install-guide-open { overflow: hidden; }
.install-guide { width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #dce5d4; border-radius: 28px; padding: 24px; background: #f8faf3; color: var(--ink); box-shadow: 0 24px 100px #102f2933; }
.install-guide::backdrop { background: #102f2980; backdrop-filter: blur(5px); }
.install-guide-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.install-guide-head .settings-kicker { margin: 0; line-height: 1.8; }
.install-guide .icon-btn { width: 44px; height: 44px; flex-shrink: 0; background: #e6eddc; font-size: 26px; }
.install-guide-icon { border-radius: 20px; margin: 12px 0 18px; }
.install-guide h2 { margin: 0; font-size: 25px; letter-spacing: -.05em; }
.install-guide-intro { font-size: 13px; line-height: 1.7; color: #63715e; }
.install-platforms { display: flex; gap: 8px; margin-top: 20px; }
.install-platforms button { flex: 1; border: 1px solid #d7e1d0; border-radius: 13px; background: #fff; color: #3c563e; padding: 13px 4px; font: 600 13px var(--font-ui); cursor: pointer; }
.install-platforms button[aria-pressed="true"] { background: var(--brand-forest); color: #f0f7e5; border-color: var(--brand-forest); }
.install-browser-note { background: #e8efd9; padding: 14px; border-radius: 13px; font-size: 13px; line-height: 1.7; }
.install-guide .btn-primary { display: block; text-align: center; text-decoration: none; margin: 12px 0; padding: 16px; border-radius: 14px; }
.install-guide [hidden] { display: none !important; }
.install-steps { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 22px; }
.install-steps li { display: flex; gap: 13px; align-items: flex-start; }
.install-step-number { width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: #dcebcf; color: #34523b; font-size: 13px; font-weight: 700; }
.install-steps strong { font-size: 14px; line-height: 1.7; }
.install-steps p { margin: 5px 0 0; color: #60705c; font-size: 13px; line-height: 1.8; }
.install-existing { padding-top: 16px; border-top: 1px solid #dfe6d7; font-size: 12px; line-height: 1.8; color: #60705c; }
.install-guide-actions { display: flex; justify-content: space-between; gap: 10px; }
.install-guide-actions button { min-height: 44px; font-size: 13px; }
.install-status { color: #395d40; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; margin: 8px 0 0; }
.install-guide :focus-visible { outline: 3px solid #618960; outline-offset: 3px; }
#installGuideTitle:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { .install-guide[open] { animation: settings-arrive .25s ease-out; } }
@media (max-width: 360px) { .install-guide { padding: 18px; } }


.install-guide #copyInstallUrlBtn { width: 100%; min-height: 58px; padding: 18px; margin: 16px 0; background: var(--brand-forest); color: #f0f7e5; font-size: 17px; font-weight: 700; border-radius: 16px; }
.install-guide-actions { justify-content: center; }

.install-choice-label { margin: 20px 0 8px; font-size: 13px; font-weight: 650; color: #3c563e; }
.install-browser-options { margin-top: 0; }
.install-browser-options button { min-height: 52px; line-height: 1.5; }

/* Personal device connection */
#settingsSync[hidden], [data-settings-section="settingsSync"][hidden], .sync-section [hidden] { display: none !important; }
.sync-stack, .sync-code-box { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sync-section { gap: 20px; }
.sync-status { padding: 14px 16px; border-radius: 14px; background: #e4eedb; font-size: 13px; line-height: 1.65; }
.sync-status.sync-error { background: #fff0d6; color: #79562a; }
.sync-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sync-actions > button { flex: 1 1 125px; }
.sync-section .btn-secondary { border: 1px solid #cbd8c9; border-radius: 14px; background: #fffef8; padding: 14px; color: var(--brand-forest); font: 600 13px var(--font-ui); cursor: pointer; }
.sync-section button:disabled { opacity: .55; cursor: wait; }
.sync-section input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid #cbd8c9; border-radius: 12px; background: #fffef8; padding: 14px; font: inherit; color: inherit; }
.sync-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.7; }
.sync-consent input { margin-top: 5px; flex: 0 0 auto; accent-color: #153c32; }
.sync-divider { border-top: 1px solid #dce4d4; padding-top: 22px; margin-top: 10px; font-size: 13px; color: #607369; }
.sync-code-box { padding: 20px; background: #eff3e6; border: 1px solid #d4dec8; border-radius: 18px; }
.sync-code-box output { font: 600 17px/1.8 monospace; overflow-wrap: anywhere; user-select: all; }
.sync-devices { list-style: none; padding: 0; margin: 0; }
.sync-devices li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #dce4d4; }
.sync-devices span { overflow-wrap: anywhere; min-width: 0; }
.sync-devices button { flex-shrink: 0; }

.sync-choice { display:flex; flex-direction:column; gap:10px; text-align:left; padding:22px; border:1px solid #cbd8c9; border-radius:18px; color:var(--brand-forest); background:#f5f8ee; cursor:pointer; font:inherit; }
.sync-choice strong { display:flex; justify-content:space-between; gap:12px; font-size:17px; }
.sync-choice > span { font-size:13px; line-height:1.6; color:#607369; }
.sync-choice:hover { background:#e4eedb; }
.sync-section h4 { font-size:20px; line-height:1.45; margin:0; }
.sync-section details { border-top:1px solid #dce4d4; padding-top:16px; }
.sync-section summary { cursor:pointer; font-size:14px; padding:8px 0; line-height:1.6; }
.sync-section details[open] > .sync-stack, .sync-section details[open] > .field { margin-top:16px; }
.sync-step-label { color:#607369; font-size:12px; margin:0; }
.sync-success { display:flex; align-items:center; gap:16px; padding:12px 0; }
.sync-success > span { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:50%; background:#dff0ba; font-size:24px; }
.sync-success p { font-size:13px; line-height:1.6; margin:8px 0 0; }
.sync-instructions { padding-left:22px; margin:0; font-size:14px; line-height:1.8; }
.sync-instructions li + li { margin-top:10px; }
.sync-inline-error { color:#925025; font-size:13px; line-height:1.6; margin:0; }
.sync-section :focus-visible { outline:2px solid #42745a; outline-offset:4px; }

.personal-timetable { padding:22px 18px; border-top:1px solid #dce4d4; background:#f4f7ee; }
.schedule-add { border:0; background:#e0edc5; color:#183e32; border-radius:12px; padding:11px 14px; font:600 13px var(--font-ui); cursor:pointer; }
.schedule-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:18px 0; border-bottom:1px solid #dce4d4; }
.schedule-row > strong { font-size:13px; min-width:90px; }
.schedule-row > div:not(.schedule-row-actions) { flex:1; min-width:120px; overflow-wrap:anywhere; }
.schedule-row p { font-size:12px; line-height:1.6; color:#62776c; margin:5px 0 0; }
.schedule-row.is-cancelled > strong { text-decoration:line-through; opacity:.6; }
.schedule-row-actions { display:flex; gap:10px; }
.schedule-row-actions button { -webkit-appearance:none; appearance:none; color:#183e32; font:inherit; font-size:12px; padding:8px; background:#fff; border:1px solid #cfdbcc; border-radius:10px; cursor:pointer; }
.schedule-dialog { width:min(480px,calc(100vw - 32px)); max-height:90dvh; box-sizing:border-box; border:0; padding:24px; border-radius:24px; background:#fffef8; color:#183e32; overflow-y:auto; }
.schedule-dialog::backdrop { background:#112e2566; backdrop-filter:blur(4px); }
.schedule-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.schedule-dialog h2 { font-size:22px; margin:0; }
.schedule-dialog header button { -webkit-appearance:none; appearance:none; color:#183e32; background:#edf2e5; border:0; border-radius:50%; width:36px; height:36px; cursor:pointer; }
.schedule-dialog form { display:flex; flex-direction:column; gap:18px; }
.schedule-dialog .field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.schedule-dialog input:not([type=checkbox]), .schedule-dialog select { width:100%; min-width:0; box-sizing:border-box; font:inherit; font-size:16px; padding:12px; border:1px solid #cbd8c9; border-radius:12px; background:#fff; color:inherit; }
.schedule-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.schedule-dialog fieldset { border:0; padding:0; margin:0; }
.schedule-days { display:flex; gap:6px; margin-top:10px; }
.schedule-days label { flex:1; text-align:center; position:relative; }
.schedule-days input { position:absolute; opacity:0; width:100%; height:100%; inset:0; cursor:pointer; }
.schedule-days span { display:block; border:1px solid #cbd8c9; border-radius:10px; padding:12px 0; }
.schedule-days input:checked + span { background:#173d31; color:#fff; }
.schedule-days input:focus-visible + span { outline:2px solid #739343; outline-offset:2px; }
.schedule-dialog [hidden] { display:none !important; }
.personal-timetable .timetable-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.personal-timetable .timetable-head h2 { padding:0; margin:0; }

/* Native iOS date/time controls need a full row on narrow screens. */
.schedule-dialog input[type="date"], .schedule-dialog input[type="time"] { -webkit-appearance:none; appearance:none; display:block; max-width:100%; min-height:48px; }
.schedule-dialog input::-webkit-date-and-time-value { text-align:left; min-width:0; }
@media (max-width: 520px) {
  .schedule-grid { grid-template-columns:minmax(0,1fr); }
  .schedule-dialog { padding:20px; }
}

/* 수업에서 바로 찾는 준비물, 등교와 분리된 개인 일정 준비 */
.tt-materials { appearance:none; border:0; border-radius:8px; background:#edf4ec; color:#285c49; padding:5px 8px; margin-top:5px; font:inherit; font-size:11px; cursor:pointer; }
.material-subjects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.material-subject { display:flex; flex-direction:column; gap:7px; text-align:left; padding:16px; border:1px solid #d7e4d9; border-radius:16px; background:#f6f9f2; color:#183e32; font:inherit; cursor:pointer; min-width:0; }
.material-subject span { color:#647c70; font-size:12px; overflow-wrap:anywhere; }
.material-entry { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #e0e8df; }
.material-entry span { flex:1; min-width:0; overflow-wrap:anywhere; font-size:14px; }
.material-entry button { appearance:none; background:#eef3e9; color:#345646; border:0; border-radius:9px; padding:9px 12px; font:inherit; font-size:12px; }
.schedule-material-editor { border:1px solid #dce7d9; border-radius:16px; padding:16px; margin:20px 0; }
.schedule-material-editor h3 { font-size:16px; margin:0 0 8px; }
.material-add-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.material-add-actions .btn-secondary { width:auto; padding:10px 14px; }
.today-personal-overview { margin-bottom:20px; background:#f1f6ed; border:1px solid #d8e5d7; border-radius:24px; padding:20px; }
.schedule-preparation { grid-column:1/-1; background:#f0f5ed; border-radius:14px; padding:14px; }
.schedule-prep-status { color:#27674c; font-size:13px; font-weight:650; margin:0 0 8px; line-height:1.5; }
.personal-material-checks label { display:flex; align-items:center; gap:10px; padding:10px 0; font-size:14px; cursor:pointer; overflow-wrap:anywhere; }
.personal-material-checks input { width:20px; height:20px; flex-shrink:0; accent-color:#29684c; }
.schedule-preparation .btn-primary { margin-top:10px; min-height:44px; }
@media(max-width:520px) { .material-subjects { grid-template-columns:minmax(0,1fr); } .today-personal-overview { padding:16px; } }

.dev-floating {position:fixed;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:210;appearance:none;border:1px solid #b9cdac;border-radius:14px;background:#183e32;color:#e5f3c9;padding:12px 15px;font:inherit;font-size:12px;box-shadow:0 4px 15px #102f2926;}
.developer-build #devOverlay {z-index:220;}
.developer-build #devOverlay input {min-width:0;max-width:100%;box-sizing:border-box;}

.personal-materials-section { padding:20px var(--edge); border-top:1px solid #dce7dc; }
.personal-materials-section h3 { font-size:15px; margin:0 0 8px; color:#183e32; }
.personal-material-group { margin-top:16px; padding:14px; border-radius:14px; background:#f0f5ed; overflow-wrap:anywhere; }
.personal-material-group > strong { font-size:14px; }
.personal-material-group .link-btn { color:#285c49; margin-top:8px; }

/* Personal groups have their own inset; the school checklist margin line stops above them. */
.personal-materials-section::before { content:none; }

/* The same paper, forest and lime language as the main morning screen. */
.schedule-dialog { --editor-paper:#fbfcf6; background:var(--editor-paper); width:min(500px,calc(100vw - 32px)); border:1px solid #e1e9dc; border-radius:30px; padding:28px; box-shadow:0 24px 90px #12332f26; scrollbar-width:thin; }
.schedule-dialog::backdrop { background:#102f296b; backdrop-filter:blur(8px); }
.schedule-dialog header { align-items:flex-start; margin:0 0 8px; }
.schedule-dialog h2 { font-size:27px; line-height:1.25; letter-spacing:-1.2px; font-weight:750; }
.schedule-dialog header button { flex:none; background:#edf2e8; color:#47685b; font-size:16px; }
.schedule-dialog > .field-hint, #scheduleForm > .field-hint { margin:0 0 18px; color:#738779; font-size:13px; line-height:1.65; }
.schedule-dialog form { gap:20px; }
.schedule-dialog .field > span, .schedule-dialog legend { font-size:12px; font-weight:650; color:#607a6c; letter-spacing:-.2px; }
.schedule-dialog .field { gap:9px; }
.schedule-dialog input:not([type=checkbox]), .schedule-dialog select { background:#fff; border:1px solid #dde6d9; border-radius:14px; padding:14px; min-height:50px; transition:border-color .15s,box-shadow .15s; }
.schedule-dialog input:focus, .schedule-dialog select:focus { outline:none; border-color:#6c9479; box-shadow:0 0 0 3px #b9d5b32e; }
#scheduleTitle { font-size:20px; font-weight:650; letter-spacing:-.5px; padding:17px 15px; }
.schedule-dialog .btn-primary { border:0; border-radius:17px; background:#d9ef8b; color:#143b30; padding:16px; font:700 14px var(--font-ui); min-height:50px; width:100%; cursor:pointer; box-shadow:none; }
.schedule-dialog .btn-primary:hover { background:#cce77c; }
.schedule-dialog .btn-secondary { appearance:none; background:#173d32; border:0; border-radius:12px; color:#f3f7e8; padding:11px 15px; font:600 12px var(--font-ui); cursor:pointer; }
.schedule-dialog .link-btn { text-decoration:none; color:#647c6d; font-size:12px; }
.choice-segment { display:flex; gap:4px; padding:5px; border-radius:16px; background:#eaf0e5; margin-top:-12px; }
.choice-segment button { flex:1; appearance:none; padding:13px 8px; border:0; border-radius:12px; color:#6b8173; font:650 13px var(--font-ui); background:transparent; cursor:pointer; }
.choice-segment button[aria-pressed=true] { color:#f0f7e7; background:#173d32; box-shadow:0 3px 7px #173d321c; }
.schedule-dialog :focus-visible, .personal-timetable button:focus-visible, .personal-materials-section button:focus-visible { outline:2px solid #668960; outline-offset:3px; }
.schedule-days { gap:5px; }
.schedule-days span { border:0; background:#eef3e9; border-radius:14px; padding:13px 0; font-size:13px; color:#677f70; }
.schedule-days input:checked + span { background:#ddecbd; color:#163d31; box-shadow:inset 0 0 0 1px #b9cf99; font-weight:750; }
.schedule-grid { padding:18px; border-radius:20px; background:#eef4ec; gap:16px 12px; }
.schedule-grid input { background:#fcfdf8!important; }
.schedule-material-editor { margin:0; padding:20px; background:#f0f5e8; border:0; border-radius:22px; }
.schedule-material-editor h3 { font-size:17px; letter-spacing:-.5px; }
.schedule-material-editor .field-hint { margin:6px 0 14px; font-size:12px; }
.material-entry { border-bottom:1px solid #dfe8d9; padding:12px 0; gap:10px; }
.material-entry button { background:transparent; font-size:11px; color:#7c8d7e; flex:none; }
#scheduleMaterialList:has(.material-entry) { margin-bottom:14px; }
.material-add-actions { margin-top:12px; }
.material-add-actions label { display:flex; align-items:center; gap:5px; color:#71816f; font-size:12px; }
.editor-details { border-top:1px solid #e0e8da; padding-top:18px; }
.editor-details summary { display:flex; justify-content:space-between; cursor:pointer; font-size:14px; font-weight:650; list-style:none; }
.editor-details summary::-webkit-details-marker { display:none; }
.editor-details summary span { font-size:12px; font-weight:400; color:#81917e; }
.editor-details summary span::after { content:' ＋'; }
.editor-details[open] summary span::after { content:' −'; }
.editor-details-body { display:grid; gap:16px; padding-top:20px; }
.editor-details-body .field-hint { margin:0; font-size:12px; }
.editor-footer { position:sticky; bottom:-28px; display:grid; gap:10px; padding:16px 0 20px; margin:0 0 -16px; background:var(--editor-paper); border-top:1px solid #e0e8da; z-index:2; }
.editor-footer .link-btn { padding:8px; }
.school-time-card { position:relative; display:flex; align-items:center; border-radius:20px; background:#eff4e9; margin:12px 0; overflow:hidden; border:1px solid #e0e8d7; }
.school-time-edit { display:grid; gap:6px; flex:1; min-width:0; border:0; background:transparent; padding:19px; text-align:left; color:#183e32; cursor:pointer; font:inherit; }
.school-time-edit > span { font-size:12px; color:#6a806d; }
.school-time-edit > strong { font:600 30px/1.1 var(--font-num); letter-spacing:-1px; }
.school-time-edit > small { font-size:11px; color:#698171; }
.school-time-remove { border:0; background:transparent; color:#7b8c7b; font:inherit; font-size:12px; padding:18px; cursor:pointer; }
#schoolTimeAdd { margin-top:14px; }
#schoolTimeBack { display:block; padding:12px 0; margin-bottom:12px; }
.editor-empty { padding:24px 18px; background:#f0f4e9; border-radius:18px; color:#7b8d77; font-size:13px; line-height:1.7; text-align:center; }
#schoolTimesOpen { padding:17px 18px; border:0; border-radius:16px; background:#eaf2dd; font-size:13px; font-weight:650; }

.personal-timetable { padding:24px 20px; background:#f3f7ee; border-color:#e1e8dc; }
.personal-timetable .timetable-head h2 { font-size:15px; letter-spacing:-.4px; }
.schedule-add { border-radius:12px; background:#deedbb; padding:10px 13px; font-size:12px; }
.schedule-row { display:grid; grid-template-columns:74px minmax(0,1fr); gap:9px 14px; align-items:start; padding:20px 0; border-color:#e0e8d9; }
.schedule-row > strong { min-width:0; white-space:normal; overflow-wrap:anywhere; font:650 16px/1.45 var(--font-num); color:#244f3d; padding:10px 6px; background:#e7efdf; border-radius:13px; text-align:center; }
.schedule-row > div:not(.schedule-row-actions) { min-width:0; }
.schedule-row > div > strong { display:block; padding-top:7px; font-size:16px; letter-spacing:-.5px; }
.schedule-row p { color:#7b8c7c; font-size:11px; line-height:1.7; }
.schedule-row-actions { grid-column:2; gap:12px; }
.schedule-row-actions button { border:0; background:none; padding:5px 0; font-size:11px; color:#6b8472; }
.schedule-preparation { grid-column:1/-1; width:100%; box-sizing:border-box; background:#eaf2e2; border-radius:16px; padding:14px 16px; margin-top:4px; }
.schedule-preparation .schedule-prep-status { margin:0; color:#456e53; font-weight:600; font-size:12px; }
.personal-timetable > .link-btn { display:block; padding:14px 0 0; text-decoration:none; font-size:12px; color:#627c66; }
.personal-materials-section { padding:23px 20px; background:var(--paper); }
.personal-materials-section h3 { font-size:16px; letter-spacing:-.5px; }
.personal-materials-section > .field-hint { margin:5px 0 18px; font-size:12px; color:#899583; }
.personal-material-group { padding:18px; margin-top:12px; background:#f0f5e8; border:1px solid #e1e9d8; border-radius:20px; }
.personal-material-group > strong { font-size:14px; letter-spacing:-.3px; }
.personal-material-group > .field-hint { font-size:11px; margin:5px 0 12px; color:#85917e; }
.personal-material-checks label { gap:12px; padding:12px 0; color:#315a43; font-size:14px; }
.personal-material-checks input { appearance:none; border:1.5px solid #b7ccae; border-radius:50%; background:#fcfef8; width:23px; height:23px; margin:0; display:grid; place-items:center; }
.personal-material-checks input:checked { border-color:#234c39; background:#234c39; }
.personal-material-checks input:checked::after { content:'✓'; color:#edf6dc; font-size:14px; }
.personal-material-checks input:disabled { opacity:.5; cursor:default; }
.personal-material-checks input:focus-visible { outline:2px solid #668960; outline-offset:3px; }
.personal-material-group .link-btn { font-size:11px; color:#79916f; text-decoration:none; padding:9px 0 0; margin:4px 0 0; }
.today-personal-overview { border-radius:0; border-left:0; border-right:0; margin-bottom:0; }
.material-subject { background:#eff5e7; border:1px solid #e0e9d6; border-radius:18px; padding:18px; }
@media(max-width:520px) {
  .schedule-dialog { width:calc(100vw - 20px); max-height:94dvh; border-radius:25px; padding:22px; }
  .schedule-dialog h2 { font-size:25px; }
  .editor-footer { bottom:-22px; }
  .schedule-grid { padding:15px; }
  .schedule-material-editor { padding:16px; }
  .personal-timetable, .personal-materials-section { padding-left:18px; padding-right:18px; }
}
@media(prefers-reduced-motion:no-preference) { .schedule-dialog[open] { animation:editor-arrive .2s ease-out; } @keyframes editor-arrive { from {opacity:0;transform:translateY(12px);} to {opacity:1;transform:translateY(0);} } }

#scheduleForm > .field-hint { margin:0; }
#scheduleForm > header { margin-bottom:-10px; }
#scheduleScope { padding:10px 12px; background:#edf3e8; border-radius:10px; font-size:11px; }

/* Personal supplies use the same ruled checklist layout as school supplies. */
.personal-materials-section { padding:20px 0 16px; }
.personal-materials-section > h3, .personal-materials-section > .field-hint { padding-left:calc(var(--gutter) + var(--gutter-gap)); padding-right:var(--edge); }
.personal-material-group { padding:0; margin:16px 0 0; background:transparent; border:0; border-radius:0; }
.personal-material-group > strong, .personal-material-group > .field-hint, .personal-material-group > .link-btn { margin-left:calc(var(--gutter) + var(--gutter-gap)); margin-right:var(--edge); }
.personal-material-group > strong { display:block; font-size:12px; color:var(--muted); }
.personal-material-group > .field-hint { margin-top:5px; margin-bottom:8px; }
.personal-material-group .personal-material-checks label { display:grid; grid-template-columns:var(--gutter) minmax(0,1fr); gap:0 var(--gutter-gap); padding:10px var(--edge) 10px 0; font-size:14px; }
.personal-material-group .personal-material-checks input { width:26px; height:26px; justify-self:center; border:2px solid var(--rule-strong); background:transparent; }
.personal-material-group .personal-material-checks input:checked { background:var(--done); border-color:var(--done); }
.personal-material-group .personal-material-checks .optional input { border-style:dashed; }
.personal-material-group .personal-material-checks .optional.checked input { border-style:solid; }
.personal-material-group > .link-btn { margin-top:10px; }