/* 라이트 팔레트를 기본으로 정의하고, 다크는 토큰만 덮어쓴다. */
:root {
  --bg: #eef3fa;
  --card: rgba(255, 255, 255, 0.72);
  --card-line: rgba(15, 30, 60, 0.08);
  --fg: #16223a;
  --fg-dim: #5b6a86;
  --fg-faint: #8b98ae;
  --accent: #2f6fd0;
  --rain: #3b82c4;
  --sheet: #ffffff;
  --sheet-line: rgba(15, 30, 60, 0.1);
  --sky-1: #a8cdf0;
  --sky-2: #d7e7f6;
  --radius: 18px;
  --pad: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d131f;
    --card: rgba(28, 38, 56, 0.66);
    --card-line: rgba(255, 255, 255, 0.08);
    --fg: #eaf0fa;
    --fg-dim: #9dabc4;
    --fg-faint: #6b7994;
    --accent: #74a9ef;
    --rain: #7db4e0;
    --sheet: #18202f;
    --sheet-line: rgba(255, 255, 255, 0.1);
    --sky-1: #14314f;
    --sky-2: #0d131f;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
}

/* 시각·하늘상태에 따라 색이 바뀌는 배경. 사진 대신 CSS 그라데이션. */
#sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--bg) 100%);
  transition: background 600ms ease;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) var(--pad)
           calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- 헤더 ---------- */

.head-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: rgba(20, 45, 85, 0.7);
  cursor: pointer;
  max-width: 60vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.head-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.icon-btn {
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--fg);
}
.icon-btn:hover { background: var(--card-line); }
.icon-btn[aria-pressed="true"] { color: #f0b429; }

.now { padding: 4px 4px 10px; }

.now-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.now-temp {
  font-size: 68px;
  font-weight: 250;
  letter-spacing: -3px;
  line-height: 1;
}

.now-icon { font-size: 34px; }

.now-sub {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--fg-dim);
  font-size: 14px;
  margin-top: 4px;
}

.now-air {
  margin-top: 6px;
  font-size: 13px;
  color: var(--fg-dim);
}

/* ---------- 카드 ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

/* ---------- 보조 지표 전환 ---------- */

.slot-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px 2px;
  justify-content: flex-end;
}

.slot-tabs button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--fg-faint);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.slot-tabs button[aria-selected="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ---------- 오늘: 가로 스크롤 스트립 ---------- */

.strip {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 6px 10px 14px;
  -webkit-overflow-scrolling: touch;
}

.hour {
  flex: 0 0 auto;
  width: 58px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 7px;
  justify-items: center;
  padding: 8px 2px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  border-radius: 12px;
  cursor: pointer;
  scroll-snap-align: center;
}
.hour:hover { background: var(--card-line); }

.hour.is-now { background: var(--card-line); }
.hour.is-now .h-time { color: var(--accent); font-weight: 700; }

.h-time { font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
.h-icon { font-size: 20px; line-height: 1; }
.h-temp { font-size: 16px; font-weight: 600; white-space: nowrap; }
.h-slot { font-size: 12px; color: var(--rain); white-space: nowrap; }
.h-slot.is-dim { color: var(--fg-faint); }

.h-wind {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.h-wind .arrow { display: inline-block; font-size: 11px; }

/* 날짜 구분선 */
.daysep {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 10px 6px;
  background: var(--card-line);
  position: relative;
}
.daysep span {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--fg-faint);
  white-space: nowrap;
  background: var(--card);
  padding: 0 4px;
}

/* ---------- 주간 목록 ---------- */

.daily {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.daily li { border-top: 1px solid var(--card-line); }
.daily li:first-child { border-top: 0; }

.day {
  width: 100%;
  display: grid;
  grid-template-columns: 52px 66px 58px 1fr;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.day:hover { background: var(--card-line); }

.d-day { font-size: 14px; font-weight: 600; }
.d-day.is-today { color: var(--accent); }
.d-rain { font-size: 12px; color: var(--rain); }
.d-icons { font-size: 15px; white-space: nowrap; letter-spacing: 1px; }

.d-temp {
  font-size: 15px;
  text-align: right;
  white-space: nowrap;
}
.d-temp .lo { color: var(--fg-faint); margin-left: 10px; }

/* ---------- 상태 문구 ---------- */

.status {
  margin: 4px 2px;
  font-size: 13px;
  color: var(--fg-dim);
  text-align: center;
}
.status.is-error { color: #d1495b; }
.status button {
  margin-left: 8px;
  font: inherit;
  border: 1px solid var(--card-line);
  background: var(--card);
  color: inherit;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}

/* ---------- 시트 ---------- */

.sheet-wrap { position: fixed; inset: 0; z-index: 50; }

.sheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 24, 0.45);
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: rise 220ms ease;
}

@keyframes rise { from { transform: translateY(14px); opacity: 0.6; } }

@media (min-width: 620px) {
  .sheet {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%);
    width: 560px;
    border-radius: 20px;
    max-height: 78vh;
  }
  @keyframes rise { from { opacity: 0.4; } }
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 10px 18px;
  border-bottom: 1px solid var(--sheet-line);
}
.sheet-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.sheet-head .icon-btn { margin-left: auto; }

.sheet-body {
  padding: 14px 18px 22px;
  overflow-y: auto;
}

/* 상세 표 */

.detail { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail th, .detail td { padding: 7px 4px; text-align: right; white-space: nowrap; }
.detail th:first-child, .detail td:first-child { text-align: left; }
.detail thead th { color: var(--fg-faint); font-weight: 500; font-size: 11px; }
.detail tbody tr { border-top: 1px solid var(--sheet-line); }
.detail tfoot tr { border-top: 2px solid var(--sheet-line); }
.detail tfoot td { color: var(--fg-dim); }
.detail tfoot .k { text-align: left; color: var(--fg-faint); }
.detail .miss { color: var(--fg-faint); }
.detail-wrap { overflow-x: auto; }

/* 지역 검색 */

.search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.search-row input {
  flex: 1;
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--sheet-line);
  background: var(--bg);
  color: var(--fg);
  min-width: 0;
}
.search-row button {
  font: inherit;
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.rgroup { margin-bottom: 16px; }
.rgroup h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-faint);
}

.rlist { list-style: none; margin: 0; padding: 0; }
.rlist li { display: flex; align-items: center; gap: 4px; }
.rlist button.pick {
  flex: 1;
  text-align: left;
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  padding: 10px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.rlist button.pick:hover { background: var(--card-line); }
.rlist .sub { color: var(--fg-faint); font-size: 12px; margin-left: 6px; }
.rlist button.del {
  border: 0;
  background: none;
  color: var(--fg-faint);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
}

.empty { color: var(--fg-faint); font-size: 13px; padding: 6px; }

/* 기준 안내 */

.notes dl { margin: 0; }
.notes dt {
  font-weight: 600;
  font-size: 13px;
  margin-top: 12px;
}
.notes dt:first-child { margin-top: 0; }
.notes dd {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.55;
}

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