/* 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: rgba(94, 198, 240, .14);
  color: var(--accent-forecast); font-weight: 700;
}
.fc__chip--all {
  border-style: dashed; border-color: var(--text-sub);
  font-size: 13.5px; font-weight: 600; padding: 7px 12px;
}

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

.hero__guides { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
/* dl 은 브라우저 기본 마진(1em)이 붙습니다 — 그대로 두면 Insights 아래가
   16px + 16px 로 벌어져 카드 안에 빈 띠가 생깁니다(2026-08-30). */
.hero__guide {
  margin: 0;
  background: rgba(255, 255, 255, .07); border-radius: 10px;
  padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 6px;
  min-height: 42px;
}
.hero__guide dt { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin: 0; }
.hero__guide dd { font-size: 14.5px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; }
.hero__waxdot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* 추천 수트 ⓘ — 설명이 필요한 구간에서만 붙습니다(흐림·강풍 보정이 걸렸거나
   구간 자체가 기본 노출로 설정된 경우). 스타일이 없으면 브라우저 기본 버튼이
   그려져서 흰 사각형이 뜹니다 — 실제로 그렇게 나갔습니다(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__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: rgba(94, 198, 240, .10); }
/* D+8부터 — 예보가 멀수록 못 믿는다는 걸 농도로 보여줍니다(2026-09-05).
   숫자를 지우거나 회색으로 바꾸지 않고 전체를 옅게만 합니다 — 값은 그대로 읽히되
   "앞쪽 날짜와 같은 무게로 보지 말라"는 신호만 주려는 것입니다.
   선택된 칩(.is-on)에는 붙지 않습니다(§ dayStrip의 faded 조건). */
.daystrip__btn.is-faded { opacity: .45; }
.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__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; }

.chart__row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, .95fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, .8fr);
  gap: 8px; 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__body .chart__row { border-bottom: 1px solid rgba(255, 255, 255, .06); min-height: 44px; }

.chart__hour    { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chart__ampm    { color: var(--text-muted); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.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; }
.chart__windcell { transform: translateX(-4px); }
/* 수온 칸만 한 단계 작게 — 2026-09-08(§8-2). 정수(24°)에서 소수 한 자리(24.5°)로 바뀌면서
   글자 수가 늘어, 같은 13.5px로 두면 좁은 화면에서 옆 칸을 밀어냅니다. */
.chart__sstcell { font-size: 12px; }
.chart__weathercell { transform: translateX(2px); }
.chart__arrow   { display: inline-block; font-size: 12px; flex-shrink: 0; }
.chart__windstack { display: flex; flex-direction: column; align-items: center; line-height: 1.15; font-size: 14.5px; }
.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; }
.chart__wcell   { display: flex; align-items: center; justify-content: flex-start; gap: 5px; color: var(--text-quiet); font-size: 14px; }
.chart__tidecell { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; padding-right: 8px; }

/* 예보 차트 하단 — 칸마다 실제 데이터 출처(개발자 확인용). 히어로 카드의 소스 배지와 같은 톤. */
.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__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;
  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: rgba(94, 198, 240, .12); }
.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; }