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

@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: #e2edea;
  --paper: #fbfdfc;
  --paper-lift: #eef5f2;
  --ink: #12332f;
  --muted: #6d857f;
  --rule: #dfeae5;
  --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,
.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 {
  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 { width: 15px; height: 15px; }
.remove-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;
}

.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);
}

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

.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-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); }

/* 16px 미만이면 iOS가 입력 시작할 때 화면을 확대해버린다 — 그래서 16px 고정. */
.add-item-form input[type="text"] {
  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);
}

.repeat-toggle {
  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);
}

.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;
}

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

/* 플래너 머리(날짜 + 요일 칸)도 히어로처럼 옅게 깔아서 한 덩어리로 읽히게 한다. */
.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); }

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

/* 바닥에 붙은 판이 아니라 내용 위에 떠 있는 캡슐. 뒤가 비쳐서 화면이
   좁아 보이지 않고, 홈 인디케이터 위로 띄워 엄지로 누르기 좋은 높이에 온다. */
.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);
}

input[type="time"],
input[type="datetime-local"] {
  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; }

.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); }

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