/* Forecast 탭 */

.fc__chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 16px var(--pad-screen) 6px;
  align-items: center;
}
.fc__chip {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 20px;
  border: 1.5px solid var(--line-12); background: var(--surface-header);
  color: var(--text-quiet); font-size: 15.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; min-height: 40px;
}
.fc__chip.is-on {
  border-color: var(--accent-forecast); background: var(--selection-fill);
  color: var(--accent-forecast); font-weight: 700;
}
.fc__chips.is-editing .fc__chip[data-reorder-id] { position: relative; overflow: visible; }
.fc__chip .reorder-remove {
  position: absolute; top: -5px; right: -3px; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: none; border-radius: 50%;
  background: linear-gradient(var(--line-12), var(--line-12)), var(--chrome-bg);
  color: var(--surface-header); font: 500 16px/1 sans-serif; cursor: pointer; z-index: 2;
}
.fc__chip .reorder-remove::before { content: ''; position: absolute; inset: -7px; }
.fc__chip--all {
  border: 1px dashed var(--text-faint); background: var(--chrome-bg);
  font-size: 13.5px; font-weight: 600; padding: 7.5px 12.5px;
}
.fc__edit-hint { padding: 0 var(--pad-screen) 4px; color: var(--text-sub); font-size: 12px; line-height: 1.5; }

.fc__wrap { padding: 8px 16px 16px; }

/* 히어로 카드 */
.hero {
  background: var(--surface-header); border: 1px solid var(--line-10);
  border-radius: 18px; padding: 18px; margin-bottom: 12px; position: relative;
}
.hero__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hero__spot { font-size: 20px; font-weight: 800; color: var(--text-strong); }
/* 날짜 라벨 — 오늘 "Today", 내일 "Tomorrow", 그 뒤로는 날짜 숫자(8/19).
   날짜 전환이 가능해졌으므로 "이게 어느 날 기준인지"를 밝혀줍니다. */
.hero__today {
  font-family: var(--font-num);
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .07);
  border-radius: 999px; padding: 3px 9px;
  white-space: nowrap;   /* "Tomorrow"가 좁은 화면에서 두 줄로 접히지 않도록 */
}
/* 컨디션 뒤에 오므로 앞쪽에 약간의 여백을 둡니다(head gap 10px + 6px). */
.hero__today { margin-left: 6px; }
.hero__today.is-today { color: var(--accent-forecast); background: rgba(94, 198, 240, .14); }
.hero__today.is-tomorrow { color: var(--accent-tomorrow); background: rgba(240, 145, 58, .14); }
.hero__tier { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.hero__fallback { font-size: 15px; font-weight: 600; color: var(--text-quiet); }
.hero__star { background: none; border: none; padding: 0 0 0 4px; cursor: pointer; font-size: 20px; line-height: 1; margin-left: auto; }

/* ── 해상특보 경고 아이콘 (2026-09-09 §A-1, 2차 개정) ────────────────────────
   경보·주의보가 **같은 삼각형**이고, 색과 깜빡임 속도로만 갈립니다.
   경보는 빠르게(0.7초), 주의보는 느리게(1.4초) — 속도가 급함의 정도를 그대로 나타냅니다.
   margin-left:auto가 여기 붙어 별표를 오른쪽 끝으로 밀어냅니다(아이콘이 없을 때는
   별표 자신의 margin-left:auto가 같은 일을 해서, 두 경우의 레이아웃이 같습니다). */
.hero__alert {
  margin-left: auto; background: none; border: none; cursor: pointer; padding: 0;
  line-height: 0; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
}
/* 강도 라벨 — 평소엔 감춥니다. 깜빡임 속도가 이미 강도를 말하고 있어서,
   글자까지 있으면 헤더가 불필요하게 길어집니다. */
.hero__alertlabel { display: none; font-size: 10.5px; font-weight: 800; line-height: 1; }
.hero__alert + .hero__star { margin-left: 6px; }
/* 삼각형 채움색은 svg의 fill="currentColor"가 받아갑니다.
   ⚠ 2026-09-09 3차 개정 — 색을 **통일**했습니다. 경보든 주의보든 같은 빨강이고,
     심각도는 깜빡임 속도로만 갈립니다(경보 0.7초 / 주의보 1.4초).
     주황 버전은 없앴습니다. */
/* 색·깜빡임 속도가 둘 다 같습니다(2026-09-09 최종) — 강도는 **모양**이 가릅니다.
   경보 ▲ 삼각형 / 주의보 ● 원형. 속도로도 나누던 때가 있었는데, 모양이 이미
   구분을 하고 있어서 속도까지 다르면 "느린 쪽은 덜 급하다"는 인상만 남고
   정작 어느 쪽이 경보인지는 여전히 모양을 봐야 알 수 있었습니다. */
.hero__alert.is-warning,
.hero__alert.is-advisory { color: #e2685a; animation: alertBlink 0.7s ease-in-out infinite; }

@keyframes alertBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 움직임을 줄이도록 설정한 사용자에게는 둘 다 고정 표시로 바꿉니다(§A-1).
   그런데 색·모양까지 통일한 뒤라 깜빡임이 꺼지면 **두 상태가 완전히 같아집니다.**
   그래서 이 환경에서만 강도 글자를 꺼냅니다(2026-09-09 A안 확정) —
   경고를 없애는 게 아니라, 움직임이 하던 일을 글자가 대신 하는 것입니다. */
@media (prefers-reduced-motion: reduce) {
  .hero__alert.is-warning,
  .hero__alert.is-advisory { animation: none; opacity: 1; }
  .hero__alertlabel { display: inline; }
}

.hero__chart { position: relative; height: 85px; margin-bottom: 12px; }
.hero__band  { position: absolute; left: 0; right: 0; border-radius: 4px; }
.hero__grid  { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 255, 255, .14); }
.hero__night { position: absolute; top: 0; bottom: 0; width: 10.5%; background: rgba(255, 255, 255, .05); border-radius: 8px; }
/* 막대는 .hero__chart(85px)와 정확히 같은 박스를 기준으로 %를 계산해야 배경 밴드·점선과
   맞습니다. 예전엔 top:14px로 안쪽에 들어가 있어(자기 박스 71px) .hero__slot의 고정 height:78px와도
   서로 어긋났고, 결과적으로 막대의 "60%"가 밴드의 "60%" 선보다 낮은 자리에 그려졌습니다
   (2026-09-03 발견 — 등급 색은 정확한 점수 경계에서 바뀌는데 막대 높이만 축소돼 있었습니다). */
.hero__bars  { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; gap: 3px; }
.hero__slot  { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hero__bar   { width: 100%; border-radius: 3px 3px 0 0; }
.hero__now   { position: absolute; bottom: 0; top: -6px; left: 50%; width: 1.5px; background: rgba(255, 255, 255, .55); opacity: .6; }
.hero__nowlabel { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; opacity: .6; }

.hero__hours { display: flex; gap: 3px; margin-top: -6px; }
.hero__hours span { flex: 1; text-align: center; font-family: var(--font-num); font-size: 11.5px; color: rgba(255, 255, 255, .45); line-height: 1.2; }

.hero__insight {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 12px; padding-top: 13px;
  border-top: 1px solid var(--line-12);
  font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .75);
}
.hero__insight b { color: #60B1E5; }
/* 짧은 문구 — 남는 폭을 쓰고 단어 단위로만 줄바꿈(말줄임 없음). 상세가 있으면 줄 전체가 버튼(아래 button.hero__insight). */
.hero__insighttext { flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
/* 줄 전체가 버튼일 때(상세 설명이 있는 문장, 2026-10-01) — 모양은 그대로, 누르는 영역은 줄 전체(최소 44px) */
button.hero__insight {
  width: 100%; min-height: 44px; text-align: left; font: inherit; color: rgba(255, 255, 255, .75);
  background: none; border: 0; border-top: 1px solid var(--line-12); border-radius: 0; cursor: pointer;
  padding-left: 0; padding-right: 0;
}

/* Insights 상세 시트 — 틀·제목·닫기는 공용 sheet(), 시각 줄·본문은 추천 수트 시트와 같은 모양 */
.insight-sheet__body { white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.insight-sheet__facts {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06);
  display: grid; gap: 6px; font-size: 13.5px;
}
.insight-sheet__facts > div { display: flex; justify-content: space-between; gap: 12px; }
.insight-sheet__facts dt { color: var(--text-dim); margin: 0; }
.insight-sheet__facts dd { margin: 0; font-weight: 600; text-align: right; }

.hero__guides { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
/* dl 은 브라우저 기본 마진(1em)이 붙습니다 — 그대로 두면 Insights 아래가
   16px + 16px 로 벌어져 카드 안에 빈 띠가 생깁니다(2026-08-30). */
/* 추천 수트·왁스 — 두 박스는 가로로 나란히, 박스 안은 위(제목) 아래(값)로 쌓습니다(2026-09-28).
   제목은 글자 단위로 끊기지 않게 한 줄로, 값은 의미 단위(단어)로만 줄바꿈합니다. */
.hero__guide {
  margin: 0;
  background: rgba(255, 255, 255, .07); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px;
  min-height: 42px; min-width: 0; text-align: center;   /* 제목·추천값 가운데(2026-10-01) */
}
.hero__guide .hero__guidek { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin: 0; white-space: nowrap; display: flex; align-items: baseline; justify-content: center; gap: 5px; }
/* 왁스 온도 범위 — 제목 오른쪽의 작고 조금 어두운 보조 글자 */
.hero__waxrange { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .45); }
.hero__guide .hero__guidev { font-size: 14.5px; font-weight: 600; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; word-break: keep-all; overflow-wrap: anywhere; max-width: 100%; }
/* 박스 전체가 버튼일 때(상세가 있는 구간, 2026-10-01) — 같은 모양, 최소 44px */
button.hero__guide { width: 100%; min-height: 44px; border: 0; font: inherit; color: inherit; text-align: center; cursor: pointer; }
/* 누르는 동안만 은은하게 · 키보드로 옮겨 오면 테두리 */
.hero__press { -webkit-tap-highlight-color: transparent; transition: background-color .12s ease; }
.hero__press:active { background-color: rgba(255, 255, 255, .06); }
.hero__guide.hero__press:active { background-color: rgba(255, 255, 255, .12); }
.hero__press:focus-visible { outline: 2px solid var(--accent-forecast); outline-offset: 2px; }
/* 왁스 값은 색 표시와 문구를 한 줄로(줄바꿈 없음). 가장 긴 「트로피컬 (25°C+)」도 360px 화면에서 박스 안 여백 안에 들어갑니다 */
.hero__guide .hero__waxval { flex-wrap: nowrap; }
/* 왁스 이름 — 색 아이콘과 한 묶음으로 가운데. 좁은 화면에서 긴 혼합 이름(예: Tropical + Warm)은 단어 단위로만 두 줄(아이콘은 왼쪽에 그대로) */
.hero__guide .hero__waxval > span:last-child { min-width: 0; white-space: normal; word-break: keep-all; text-align: center; }
/* 왁스 색 표시 — 원형(2026-10-01). 단일은 한 색, 혼합은 왼쪽·오른쪽 정확히 반반(배경은 JS가 딱 끊는 두 색으로).
   반반이 보이도록 14px, 어두운 카드에서 테두리가 묻히지 않게 얇은 밝은 테. */
.hero__waxdot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: 0 0 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); vertical-align: -2px; }
.wax-sheet__facts dd { display: inline-flex; align-items: center; gap: 4px; }
.wax-sheet__desc { margin-top: 12px; }

/* 추천 수트 ⓘ — 설명이 필요한 구간에서만 붙습니다(흐림·강풍 보정이 걸렸거나
   구간 자체가 기본 노출로 설정된 경우). 스타일이 없으면 브라우저 기본 버튼이
   그려져서 흰 사각형이 뜹니다 — 실제로 그렇게 나갔습니다(2026-09-10 수정). */
.hero__info {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  /* 글자 옆 작은 글리프라 터치 영역이 모자랍니다 — 보이는 크기는 그대로 두고
     투명 여백으로만 28px 를 확보합니다(카드 높이는 그대로). */
  width: 28px; height: 28px; margin: -7px -8px -7px -2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  color: rgba(255, 255, 255, .45);
  cursor: pointer; flex: 0 0 auto;
  transition: color .15s ease;
}
.hero__info:hover, .hero__info:focus-visible { color: var(--accent-forecast); }

/* 추천 수트 상세 시트 — 틀·제목·닫기는 공용 sheet() 가 그립니다. 여기는 본문만. */
.suit-sheet__at {
  font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px;
}
.suit-sheet__body { margin: 0; font-size: 14px; line-height: 1.6; }
.suit-sheet__notes {
  margin: 12px 0 0; padding: 10px 12px 10px 28px;
  background: rgba(255, 255, 255, .06); border-radius: 10px;
  font-size: 13.5px; line-height: 1.55;
}
.suit-sheet__notes li + li { margin-top: 5px; }
/* 공통 안내 — 추천을 뒤집는 말이 아니라 여지를 남기는 말이라 톤을 낮춥니다. */
.suit-sheet__foot {
  margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-dim);
  padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08);
}

.hero__src {
  font-size: 11.5px; color: var(--text-dim); margin-top: 10px;
  display: flex; align-items: center; gap: 6px;
}
.hero__delay { flex-wrap: wrap; color: var(--text-muted); }
.hero__delay b { color: var(--text-quiet); font-weight: 700; }
.hero__srcbadge {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: rgba(94, 198, 240, .14); color: var(--accent-forecast);
}
/* '관측 반영' — 공식 기관이 낸 값이 아니라 우리가 섞은 값이라 색을 달리합니다.
   공식 배지와 같은 파랑을 쓰면 배지를 나눈 의미가 없어집니다. */
.hero__srcbadge.is-blend {
  background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .72);
}

/* 14일 스트립 */
.daystrip { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; }
.daystrip__btn {
  flex: 0 0 auto; min-width: 56px; padding: 9px 8px 11px;
  border-radius: 14px; border: 1.5px solid var(--line-10);
  background: var(--surface-header); cursor: pointer; text-align: center;
}
.daystrip__btn.is-on { border-color: var(--accent-forecast); background: var(--selection-fill); }
/* 먼 날짜일수록 내용만 조금씩 옅게(--fade: 1~3일차 1 → 14번째 날 0.25, JS가 순서로 넣음).
   숫자를 지우거나 회색으로 바꾸지 않습니다. 테두리·배경은 흐리지 않아 선택 칩(.is-on)은 늘 또렷이 구분됩니다. */
.daystrip__btn > * { opacity: var(--fade, 1); }
.daystrip__wd   { font-family: var(--font-num); font-size: 10px; font-weight: 300; letter-spacing: .3px; opacity: .8; margin-bottom: 3px; line-height: 1.25; }
.daystrip__btn > .daystrip__wd { opacity: calc(.8 * var(--fade, 1)); }   /* 요일은 원래 .8 — 같은 비율로 */
.daystrip__d    { font-size: 16.5px; font-weight: 700; color: var(--text-strong); margin: 0 -4px 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .18); line-height: 1.05; }
.daystrip__wave { font-size: 16.5px; font-weight: 800; color: var(--tier-best); line-height: 1.35; }
.daystrip__per  { font-size: 12px; color: var(--text-muted); margin-top: 5px; line-height: .85; }
.daystrip__none { font-size: 12.5px; color: var(--text-faint); }

/* 시간대별 표 */
.chart {
  background: var(--surface-header); border: 1px solid var(--line-12);
  border-radius: var(--r-mid); padding: 16px; margin-bottom: 14px; overflow: hidden;
}
.chart__title { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 0 0 6px; }
.chart__tide  { font-size: 15px; font-weight: 500; color: var(--text-quiet); margin: 0 0 14px; }

/* 6열 — 시간 / 바람 / 파고(m) / 주기 / 날씨·수온 / TIDE (2026-09-28). 제목 줄과 본문 줄이 같은 열 너비를 씁니다. */
.chart__row {
  display: grid;
  /* 비율은 각 열에 필요한 너비(제목·가장 긴 값, 360px 화면 실측)에 맞춤(2026-09-28 제목 단위 추가 후):
     시간 24 · 바람(m/s) 59 · 파고(m) 46 · 주기(s) 42 · 날씨/수온 52(값 ≈58) · TIDE 34px */
  grid-template-columns: minmax(0, 28fr) minmax(0, 60fr) minmax(0, 48fr) minmax(0, 44fr) minmax(0, 59fr) minmax(0, 36fr);
  gap: 4px; align-items: stretch; font-size: 13.5px;
}
.chart__head {
  font-weight: 700; color: var(--text-sub); padding-bottom: 8px;
  border-bottom: 1px solid var(--line-08);
}
.chart__head > span { text-align: center; white-space: nowrap; }
.chart__hunit { font-weight: 400; font-size: 11px; }   /* 제목의 단위 — 볼드 없이 조금 작게 */
.chart__body .chart__row { border-bottom: 1px solid rgba(255, 255, 255, .06); min-height: 44px; }

.chart__hour    { flex-direction: column; gap: 0; line-height: 1.15; }
.chart__ampm    { color: var(--text-muted); font-size: 10px; white-space: nowrap; }   /* 11→10px(2026-09-28) */
.chart__hournum { font-weight: 700; color: var(--text-strong); font-size: 15.5px; }
.chart__cell    { display: flex; align-items: center; justify-content: center; color: var(--text-quiet); gap: 3px; min-width: 0; white-space: nowrap; }
.chart__none    { color: #5a5a5e; }
/* 칸 안에서 위아래 두 줄 */
.chart__stack   { flex-direction: column; gap: 1px; line-height: 1.2; }
/* 바람·주기 숫자 — 같은 크기(주기 14.5→13.5px로 1px만 줄이고 바람을 여기에 맞춤). 단위는 열 제목에 */
.chart__period  { font-size: 13.5px; line-height: 18px; }
.chart__wind    { font-size: 13.5px; line-height: 18px; white-space: nowrap; }
.chart__wicon   { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* 날씨·수온 — 아이콘 왼쪽, 오른쪽에 기온(위)·수온(아래) 두 줄. 아이콘은 두 줄 전체의 가운데 */
.chart__weathercell { gap: 4px; }
/* 기온은 아래 수온의 가로 가운데에 맞춤(왼쪽 끝 맞춤이 아님) */
.chart__wtemps  { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.chart__air     { font-size: 14px; }
/* 수온 — 기온보다 한 단계 작은 보조 글씨(예전 수온 칸과 같은 12px) */
.chart__sst     { font-size: 13px; color: var(--text-muted); }   /* 12→13px(2026-09-28) */
/* 방향 화살표 줄 — 바람·주기 칸 모두 같은 높이(방향이 없으면 빈 줄)라 화살표·값이 같은 높이에 놓입니다 */
.chart__arrow   { display: flex; align-items: center; justify-content: center; height: 14px; font-size: 12px; flex-shrink: 0; }
.chart__unit    { font-size: 10px; color: var(--text-sub); font-weight: 400; }
.chart__wavenum { font-weight: 800; font-size: 18px; color: var(--tier-best); letter-spacing: .5px; }
/* TIDE — 위 만조/간조, 아래 시각. 예전(14px/13px)보다 조금 작게, 가운데 정렬 */
.chart__tidecell { flex-direction: column; gap: 2px; }
.chart__tide1   { display: flex; flex-direction: column; align-items: center; line-height: 1.2; color: #5ec6f0; }
.chart__tide1.is-low { opacity: .55; }
.chart__tidekind { font-size: 12.5px; font-weight: 800; }
.chart__tidetime { font-size: 11.5px; font-weight: 400; color: var(--text-quiet); }   /* 시각만 회색·보통 굵기(만조·간조 글자색·굵기는 그대로) */

/* 예보 차트 하단 — 칸마다 실제 데이터 출처(개발자 확인용). 히어로 카드의 소스 배지와 같은 톤. */
.chart__devsrc { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 10px; font-size: 10.5px; color: var(--text-sub); opacity: .6; }

/* 예보 리포트 */
.report {
  border: 1px solid var(--line-10); border-radius: var(--r-mid);
  padding: 14px 16px; margin-bottom: 12px; background: var(--surface-header);
}
.report__title { font-size: 16.5px; font-weight: 700; color: var(--accent-forecast); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.report__sample { font-size: 12px; font-weight: 400; color: var(--log-move); margin-bottom: 10px; }
.report__lede  { font-size: 16px; color: var(--text-strong); line-height: 1.7; }
.report__basis { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; }
.report__toggle {
  width: 100%; padding: 10px; margin-top: 12px;
  border: 1.5px solid var(--line-10); border-radius: 10px;
  background: rgba(122, 201, 255, .14); color: var(--accent-forecast);
  font-size: 15.5px; font-weight: 700; cursor: pointer; min-height: 44px;
}
.report__sec { border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 16px; margin-top: 16px; }
.report__sech { font-size: 16px; font-weight: 700; color: var(--accent-forecast); letter-spacing: .2px; margin-bottom: 8px; }
.report__body { font-size: 15.5px; color: var(--text-strong); line-height: 1.7; }
.report__quote { font-size: 14.5px; color: #AAAAAA; line-height: 1.6; }
.report__loading { display: flex; align-items: center; gap: 10px; padding: 18px 2px; }
.report__spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(94, 198, 240, .25); border-top-color: var(--accent-forecast); animation: spin .8s linear infinite; flex-shrink: 0; }
.report__safety { margin-top: 10px; border-left: 3px solid #e2a33a; background: rgba(255, 255, 255, .045); border-radius: 0 8px 8px 0; padding: 10px 12px; }
.report__lock { text-align: center; padding: 14px 4px 6px; }

/* 스팟 선택 시트 */
/* 지역 칩은 개수가 고정(9개)이라 높이를 제한할 이유가 없습니다.
   max-height + overflow 를 두면 영역이 넓어지지 않고 칩이 안에서 스크롤돼 버립니다. */
.spotsheet__regions {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px;
  border-bottom: 1px solid var(--line-10); flex-shrink: 0;
}
.spotsheet__region {
  flex: 0 0 auto; padding: 8px 13px; border-radius: 16px;
  border: 1.5px solid var(--line-12); background: var(--surface-header);
  color: var(--text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  min-height: 40px;
}
/* 지역 탭 활성색 → 초록("사용중" 표시), docs/01-hero-badge.md */
.spotsheet__region.is-on { border-color: #3fce7f; background: rgba(63, 206, 127, .14); color: #3fce7f; }
.spotsheet__spots { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 215px; }
.spotsheet__spot {
  display: flex; align-items: center; gap: 1px; cursor: pointer;
  padding: 9px 8px 9px 15px; border-radius: 20px;
  border: 1.5px solid var(--line-12); background: var(--surface-header);
}
.spotsheet__spot.is-on { border-color: var(--accent-forecast); background: var(--selection-fill); }
.spotsheet__name { font-size: 14.5px; font-weight: 600; color: var(--text-quiet); cursor: pointer; }
.spotsheet__spot.is-on .spotsheet__name { color: var(--accent-forecast); }
.spotsheet__fav { background: none; border: none; padding: 4px 8px; cursor: pointer; font-size: 14px; line-height: 1; min-height: 34px; }
.spotsheet__nodata { font-size: 12px; color: var(--text-faint); padding-left: 4px; }
/* 스팟 목록을 아직 못 받았을 때 — 불러오는 중 / 다시 시도 */
.spotsheet__state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0; font-size: 14px; color: var(--text-muted); }
.spotsheet__retry { padding: 10px 18px; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line-12); background: var(--surface-header); color: var(--text-strong); font-size: 14px; font-weight: 600; cursor: pointer; }
.insight-sheet__cap { margin: 14px 0 0; font-size: 12px; color: var(--text-dim); }
.insight-sheet__cap + .insight-sheet__facts { margin-top: 6px; }