/* ハレルカ — 晴れ空トーン（設計書 §0-16）
 *
 * 白 × スカイブルー #58B4E8系 × サンセットオレンジ #F2803B系（1画面1〜2箇所まで）。
 * 背景の空色は晴れ確率に連動して JS が --sky-top / --sky-bottom を書き換える。
 *
 * UIテク（reference_ui_microinteractions）：
 *   #1 text-wrap balance/pretty ／ #3 font-smoothing ／ #4 tabular-nums（数値すべて）
 *   #5 多層box-shadow ／ #9 中断可能なtransition ／ #10 stagger ／ #12 結果カード骨格の固定高
 */

/* 空色をアニメーションさせるには、色として型を登録しておく必要がある
   （未登録のカスタムプロパティは transition が効かず、色が瞬間で切り替わる）。
   @property 非対応ブラウザでは単に瞬時切り替えになるだけで、表示は壊れない。 */
@property --sky-top {
  syntax: "<color>";
  inherits: true;
  initial-value: #dcf0fb;
}
@property --sky-bottom {
  syntax: "<color>";
  inherits: true;
  initial-value: #a9dcf5;
}
@property --sky-base {
  syntax: "<color>";
  inherits: true;
  initial-value: #eef5f8;
}

:root {
  --sky-top: #dcf0fb;
  --sky-bottom: #a9dcf5;
  --sky-base: #eef5f8;

  /* 空の上に直接載る文字の色。夜（data-sky=night）だけ明色に反転する。
     白いカードの中の文字はこの変数を使わない（昼夜で変えない）。 */
  --on-sky-strong: #123a55;
  --on-sky-soft: #4a6274;
  --on-sky-faint: #7d92a1;
  --cloud: rgba(255, 255, 255, .75);

  --blue: #58b4e8;
  --blue-deep: #2176b8;
  --blue-ink: #123a55;
  --orange: #f2803b;

  --ink: #16303f;
  --ink-soft: #4a6274;
  --ink-faint: #7d92a1;
  --paper: #ffffff;
  --paper-sunken: #f2f7fa;
  --line: #d9e5ec;

  --radius: 16px;
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 62%, var(--sky-base) 100%);
  background-attachment: fixed;
  transition: --sky-top .6s ease, --sky-bottom .6s ease, --sky-base .6s ease;
}

body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1, h2, h3 { text-wrap: balance; line-height: 1.4; }

.num, .temps, .temp-range, .rank-val, .card-period, input[type="range"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── ヘッダー ─────────────────────────────── */

.site-header { padding: 26px 0 14px; }
.site-header .wrap { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-sky-strong); }
.brand-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #ffd88a 0%, #f8b34a 46%, var(--orange) 100%);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 2px 10px rgba(242, 128, 59, .35);
}
.brand-name { font-size: 27px; font-weight: 800; letter-spacing: .06em; }
/* h1（ページの主題）。見た目はブランド名の下に添えるタグラインのまま */
.tagline { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--on-sky-soft); }

/* ── タブ ─────────────────────────────────── */

.tabs { display: flex; gap: 8px; margin: 8px 0 18px; }
.tab {
  flex: 1 1 0; padding: 13px 10px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15.5px;
  color: var(--on-sky-soft);
  background: rgba(255, 255, 255, .58);
  border-radius: 12px 12px 0 0;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tab[aria-selected="true"] {
  color: var(--blue-ink);
  background: var(--paper);
  box-shadow: 0 -1px 0 rgba(18, 58, 85, .05), 0 -6px 18px rgba(18, 58, 85, .07);
}
.tab:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }

.panel { animation: fade .3s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.alert {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  background: #fdecea; color: #8a2b20; font-size: 14.5px;
}

/* ── 選択エリア ───────────────────────────── */

.picker {
  display: grid; grid-template-columns: 1.9fr 1fr; gap: 20px;
  padding: 18px; margin-bottom: 16px;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 4px 12px rgba(18, 58, 85, .06), 0 12px 32px rgba(18, 58, 85, .05);
}
.picker-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--blue-ink); }

.search {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper-sunken);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.search:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88, 180, 232, .25); }

.spot-list {
  list-style: none; margin: 10px 0 0; padding: 8px;
  /* スクロールバーを出さない：入れ子スクロールをやめて全チップを見せる
     （都道府県が上・県連動で観光地が絞れるため一覧は十分短い）。 */
  overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--paper-sunken); border-radius: 10px;
}
.spot-group {
  /* flex-basis 100% に左右marginを足すと親からはみ出て横スクロールバーが出る。
     余白は padding で内側に取る。 */
  flex: 1 0 100%; margin: 6px 0 2px; padding: 0 2px;
  font-size: 12px; font-weight: 700;
  color: var(--ink-faint); letter-spacing: .04em;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.spot-group-toggle {
  border: 0; padding: 2px 4px; background: none; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--blue-deep);
  text-decoration: underline; text-underline-offset: 2px; border-radius: 6px;
}
.spot-group-toggle:hover { color: var(--blue-ink); }
.spot-group-toggle:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.spot-btn {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 11px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.spot-btn:hover { border-color: var(--blue); background: #f0f9ff; }
.spot-btn.is-active { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.spot-btn.is-active .spot-sub { color: rgba(255, 255, 255, .8); }
.spot-btn:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.spot-sub { font-size: 11.5px; color: var(--ink-faint); }
.spot-empty { margin: 10px 2px 0; font-size: 14px; color: var(--ink-soft); }

.date-row { display: flex; gap: 8px; }
.date-sel {
  flex: 1 1 0; padding: 10px 12px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper-sunken);
}
.date-sel:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88, 180, 232, .25); }

.jumps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  padding: 6px 12px; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--ink-soft); background: var(--paper-sunken);
  border: 1.5px solid var(--line); border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--blue); color: var(--blue-deep); }

.picker-note {
  margin-top: 14px; padding: 12px 14px;
  background: var(--paper-sunken); border-radius: 10px;
}
.picker-note p { margin: 0 0 6px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.picker-note p:last-child { margin-bottom: 0; }
.picker-note b { color: var(--ink); }

/* ── 結果カード ───────────────────────────── */

.card {
  background: var(--paper); border-radius: var(--radius); padding: 22px;
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 5px 14px rgba(18, 58, 85, .07), 0 18px 44px rgba(18, 58, 85, .07);
}
/* 骨格の高さを確保して、地点や日付を変えてもレイアウトが跳ねないようにする */
.card-body { min-height: 640px; }

.card-head { margin-bottom: 6px; }
.card-spot { margin: 0; font-size: 28px; font-weight: 800; color: var(--blue-ink); }
.card-station { margin: 2px 0 0; font-size: 13px; color: var(--ink-faint); }
.card-date { margin: 6px 0 0; font-size: 17px; font-weight: 700; color: var(--ink-soft); }

.ring-wrap { display: flex; justify-content: center; padding: 10px 0 6px; }
.ring {
  --pct: 0;
  position: relative; width: 190px; height: 190px; border-radius: 50%;
  background:
    conic-gradient(var(--blue-deep) calc(var(--pct) * 1%), rgba(88, 180, 232, .16) 0);
  display: grid; place-items: center;
  transition: background .12s linear;
}
.ring::after {
  content: ""; position: absolute; inset: 21px; border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 1px 3px rgba(18, 58, 85, .09);
}
.ring-inner { position: relative; z-index: 1; text-align: center; line-height: 1.15; }
.ring-inner b {
  font-size: 58px; font-weight: 800; color: var(--blue-ink);
  font-variant-numeric: tabular-nums;
}
.ring-unit { font-size: 22px; font-weight: 700; color: var(--blue-ink); margin-left: 2px; }
.ring-cap { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }

.card-detail > * { animation: rise .34s ease both; }
.card-detail > *:nth-child(2) { animation-delay: .04s; }
.card-detail > *:nth-child(3) { animation-delay: .08s; }
.card-detail > *:nth-child(4) { animation-delay: .12s; }
.card-detail > *:nth-child(5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sec-title {
  margin: 20px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-faint); border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.sec-title--lg { font-size: 15px; color: var(--blue-ink); }

.breakdown {
  display: flex; height: 26px; border-radius: 7px; overflow: hidden;
  background: var(--paper-sunken); min-height: 26px;
}
.bd-seg { display: block; transition: width .3s ease; }
.bd-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 9px 0 0; padding: 0; font-size: 13.5px; color: var(--ink-soft);
  min-height: 24px;
}
.bd-legend b { font-variant-numeric: tabular-nums; color: var(--ink); }
.bd-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; }
/* 高さを固定して、雪の有無でカードが伸び縮みしないようにする（CLS抑制） */
.snow-note { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); min-height: 24px; }

.temps { display: flex; gap: 20px; margin: 0; font-size: 17px; }
.temp b { font-size: 30px; font-weight: 800; }
.temp--hi b { color: var(--orange); }
.temp--lo b { color: var(--blue-deep); }
.temp-range { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-faint); min-height: 21px; }
.wear { display: flex; align-items: center; gap: 9px; margin: 10px 0 0; font-size: 15px; min-height: 30px; }
.wear-icon { font-size: 24px; line-height: 1; }

.best { min-height: 132px; }
.best-head { margin: 0 0 10px; font-size: 15px; }
.best-head b { color: var(--blue-ink); }
.best-bars {
  list-style: none; display: flex; align-items: flex-end; gap: 5px;
  margin: 0; padding: 0; height: 92px;
}
.best-bar {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; cursor: pointer; border-radius: 5px 5px 0 0;
  transition: background .15s ease;
}
.best-bar:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.best-bar:hover { background: rgba(88, 180, 232, .12); }
.best-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height .3s ease; }
.best-bar-label { font-size: 11px; color: var(--ink-faint); padding-top: 3px; font-variant-numeric: tabular-nums; }
.best-bar.is-current .best-bar-label { font-weight: 800; color: var(--ink); }
.best-bar.is-best .best-bar-fill { box-shadow: inset 0 0 0 2px var(--orange); }

.card-note { margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); min-height: 20px; }
.card-disclaimer {
  margin: 8px 0 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.6;
  color: var(--ink-soft); background: var(--paper-sunken);
  border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0;
}
.card-period { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn {
  padding: 10px 18px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  color: var(--blue-ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 10px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { border-color: var(--blue); background: #f0f9ff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.btn--primary { color: #fff; background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--primary:hover { background: #1a63a0; border-color: #1a63a0; }
.btn--ghost { background: transparent; }
.share-msg { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); min-height: 20px; }

/* ── 地図（モードB） ─────────────────────────── */

.map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.map-date-line { margin: 0; font-size: 16px; color: var(--on-sky-soft); }
.map-date-line b { font-size: 22px; color: var(--on-sky-strong); }

/* 地図と、凡例・ランキングの2カラム（地図の右に余白を残さない） */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.map-main { min-width: 0; }
/* 凡例・ランキングは白いカードに載せる（夜の空でも読めるように、文字を直接空に置かない） */
.map-side {
  min-width: 0; margin-top: 10px; padding: 12px 16px 16px;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 5px 14px rgba(18, 58, 85, .07);
}
.map-side .sec-title:first-child { margin-top: 4px; }

.map-box {
  position: relative; margin: 10px auto 6px; padding: 10px;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 5px 14px rgba(18, 58, 85, .07);
  /* 比率を先に確保して読み込み中のガタつきを消す */
  aspect-ratio: 1000 / 1130.5;
  max-height: 72vh;
}
.map { width: 100%; height: 100%; display: block; }
.map .pref {
  stroke: #ffffff; stroke-width: 1.1; stroke-linejoin: round;
  transition: opacity .12s ease;
}
.map .pref:hover { opacity: .75; cursor: pointer; }
.map .inset-frame { fill: none; stroke: var(--line); stroke-width: 1.4; }
.map .inset-label { font-size: 17px; fill: var(--ink-faint); font-family: inherit; }

.map-tip {
  position: absolute; z-index: 3; pointer-events: none;
  padding: 5px 10px; font-size: 13px; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(18, 58, 85, .92); border-radius: 7px; white-space: nowrap;
}

.scrubber { margin: 12px 0 4px; }
.slider { width: 100%; accent-color: var(--blue-deep); height: 26px; }
.scrub-ticks {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--on-sky-faint); margin-top: -4px;
}
.scrub-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.scrub-hint { margin: 0; font-size: 12.5px; color: var(--on-sky-faint); }

.legend { margin: 4px 0 12px; }
.legend-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); }
.legend-swatch { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .06); }
.legend-range { font-variant-numeric: tabular-nums; }

.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.rank-item.is-clickable { cursor: pointer; border-radius: 8px; transition: background .15s ease; }
.rank-item.is-clickable:hover { background: rgba(88, 180, 232, .12); }
.rank-item.is-clickable:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: -2px; }
.rank-no {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--blue); border-radius: 50%;
}
.rank-name { flex: 1 1 auto; }
.rank-val { font-weight: 800; color: var(--blue-ink); }
.rank-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.rank-note b { color: var(--ink); }
.map-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-faint); }

/* ── FAQ ───────────────────────────────────── */

.faq {
  margin: 26px 0 0; padding: 20px 22px;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 4px 12px rgba(18, 58, 85, .06);
}
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 0; }
.faq summary {
  cursor: pointer; padding: 10px 2px; font-size: 15px; font-weight: 700; color: var(--blue-ink);
  list-style-position: outside;
}
.faq summary:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; border-radius: 6px; }
.faq p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-soft); }
.faq .url { word-break: break-all; }

/* ── 持ちもののリンク（Amazon検索・気温帯連動） ─────── */

.gear-box {
  margin: 16px 0 0; padding: 16px 18px 14px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(18, 58, 85, .04), 0 6px 18px rgba(18, 58, 85, .05);
}
.gear-box[hidden] { display: none; }
.gear-title {
  margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
/* 広告であることをひと目で（景表法・ステマ規制の明示）。オレンジは1画面1〜2箇所の
   枠内なので、ここで使うのは結果カードの外に1つだけ。 */
.pr-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--orange);
  padding: 2px 7px; border-radius: 999px;
}
.gear-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gear-list a {
  display: inline-block; padding: 7px 13px;
  font-size: 13.5px; text-decoration: none;
  color: var(--blue-ink); background: var(--paper-sunken);
  border: 1px solid var(--line); border-radius: 999px;
  transition: background .16s ease, border-color .16s ease;
}
.gear-list a:hover { background: #e6f2f9; border-color: var(--blue); }
.gear-list a:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.gear-sub { margin: 11px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.gear-note { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; }

/* 記事ページ（spot / guide / about）の中に置く同じ枠 */
.article .gear-box { margin: 22px 0; }
.article .gear-list a { text-decoration: none; }

/* Amazonのサービス紹介（縦並び・説明つき） */
.bounty-box {
  margin: 22px 0; padding: 16px 18px 14px;
  background: var(--paper-sunken); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bounty-title {
  margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.bounty-list { margin: 0; padding-left: 1.2em; }
.bounty-list li { margin: 0 0 7px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.bounty-list li:last-child { margin-bottom: 0; }
.bounty-list a { font-weight: 600; }

/* ── 広告枠（空なら余白ゼロ） ─────────────────── */

.ad-slot { display: none; }
.ad-slot:not(:empty) {
  display: block; margin: 18px 0 0; min-height: 280px; text-align: center; overflow: hidden;
}
.ad-slot--footer:not(:empty) { margin: 24px 0 0; }
.ad-slot--spot:not(:empty) { margin: 26px 0; }

/* ── フッター ─────────────────────────────── */

.site-footer { margin-top: 32px; padding: 22px 0 34px; background: rgba(255, 255, 255, .72); }
.disclaimer {
  margin: 0 0 10px; padding: 11px 14px; font-size: 13px; line-height: 1.7;
  color: var(--ink); background: #fff8ef;
  border-left: 4px solid var(--orange); border-radius: 0 8px 8px 0;
}
.credit { margin: 3px 0; font-size: 11.5px; color: var(--ink-faint); word-break: break-all; }
.copyright { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-faint); }

/* ── 読みもののページ（guide / how-to / about / privacy / terms / contact / spot） ── */

.article {
  background: var(--paper); border-radius: var(--radius);
  padding: 26px 32px 32px;
  box-shadow: 0 1px 2px rgba(18, 58, 85, .06), 0 8px 24px rgba(18, 58, 85, .07);
}
.article h1 { margin: 0 0 6px; font-size: 27px; font-weight: 800; color: var(--blue-ink); }
.article h2 {
  margin: 38px 0 12px; padding-bottom: 7px; font-size: 19px; font-weight: 800;
  color: var(--blue-ink); border-bottom: 2px solid var(--line);
}
.article h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 800; color: var(--ink); }
.article p { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); }
.article ul, .article ol { margin: 0 0 16px; padding-left: 1.4em; font-size: 15px; color: var(--ink-soft); }
.article li { margin: 0 0 6px; }
.article a { color: var(--blue-deep); }
.article strong, .article b { color: var(--ink); }
.article code {
  padding: 1px 5px; font-size: .92em; background: var(--paper-sunken);
  border-radius: 4px; word-break: break-all;
}
.lead { font-size: 16px !important; color: var(--ink) !important; }

/* パンくず（spotページ・guide等） */
.breadcrumb { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-faint); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb span { margin: 0 6px; }

/* 目次 */
.toc { margin: 18px 0 26px; padding: 14px 18px; background: var(--paper-sunken); border-radius: 10px; }
.toc h2 { margin: 0 0 8px; padding: 0; font-size: 14px; border: 0; }
.toc ul { margin: 0; padding-left: 1.2em; font-size: 14px; }
.toc li { margin: 0 0 4px; }

/* 出典ブロック（spot・guide の末尾に常設） */
.src-block {
  margin: 30px 0 0; padding: 14px 16px; font-size: 12.5px; line-height: 1.8;
  color: var(--ink-faint); background: var(--paper-sunken); border-radius: 10px;
}
.src-block p { margin: 0 0 4px; font-size: 12.5px; color: inherit; }
.src-block p:last-child { margin: 0; }
.src-block .url { word-break: break-all; }

/* ツールへ戻す導線 */
.cta-box {
  margin: 30px 0 0; padding: 20px 22px; text-align: center;
  background: linear-gradient(160deg, #eaf6fd, #d9eefb); border-radius: 12px;
}
.cta-box p { margin: 0 0 12px; font-size: 15px; color: var(--ink); }
/* 記事本文の中でボタンとして使う a。`.article a`（詳細度 0,1,1）が `.btn--primary`
   （0,1,0）に勝ってしまい、青背景に青文字＝読めないボタンになる。ここで打ち消す。 */
.article a.btn { text-decoration: none; color: var(--blue-ink); }
.article a.btn--primary { color: #fff; }

/* 表 */
.article table {
  width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 14px;
}
.article th, .article td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.article th { color: var(--blue-ink); background: var(--paper-sunken); font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* ── spotページの図（build_pages.py が生成） ───────── */

/* 年間カレンダー：12行（月）×31列（日） */
.cal { margin: 0 0 8px; overflow-x: auto; }
.cal-grid { display: grid; grid-template-columns: 2.4em repeat(31, minmax(13px, 1fr)); gap: 2px; min-width: 560px; }
.cal-head { font-size: 10px; color: var(--ink-faint); text-align: center; line-height: 1.2; }
.cal-mon { font-size: 11px; color: var(--ink-soft); align-self: center; }
.cal-cell { aspect-ratio: 1 / 1; border-radius: 2px; }
.cal-cell--none { background: transparent; }
.cal-legend { display: flex; align-items: center; gap: 6px; margin: 0 0 20px; font-size: 11.5px; color: var(--ink-faint); }
.cal-legend i { display: inline-block; width: 16px; height: 12px; border-radius: 2px; }

/* 月別バー（晴れ確率）＋気温 */
.month-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.month-table th, .month-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.month-table td.mt-bar { width: 45%; }
.mt-track { height: 12px; background: var(--paper-sunken); border-radius: 6px; overflow: hidden; }
.mt-fill { height: 100%; border-radius: 6px; }
.mt-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ベスト旅行週 */
.weeks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; }
.week-card {
  padding: 14px 16px; background: var(--paper-sunken); border-radius: 10px;
  border-top: 3px solid var(--blue);
}
.week-rank { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; color: var(--orange); letter-spacing: .08em; }
.week-range { margin: 0 0 2px !important; font-size: 15px !important; font-weight: 800; color: var(--blue-ink) !important; }
.week-val { margin: 0 !important; font-size: 13px !important; font-variant-numeric: tabular-nums; }

/* ── フォーム（contact） ─────────────────────── */

.form-field { margin: 0 0 16px; }
.field-label { display: block; margin: 0 0 5px; font-size: 13.5px; font-weight: 700; color: var(--blue-ink); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px;
}
.form-field textarea { resize: vertical; line-height: 1.7; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: 3px solid var(--blue-deep); outline-offset: 1px;
}
.hint-sm { margin: 4px 0 0; font-size: 12px; color: var(--ink-faint); text-align: right; }
.turnstile-slot { margin: 0 0 16px; min-height: 66px; }
.status { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); min-height: 22px; }
.status.is-error { color: #b4462a; }
.form-note { font-size: 13px !important; color: var(--ink-faint) !important; }

/* ── トップの回遊リンク ─────────────────────── */

.faq-more { margin: 16px 2px 0; font-size: 14px; }
.faq-more a { color: var(--blue-deep); }
.spot-links { margin: 30px 0 0; }
.link-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 0; padding: 0;
}
.link-list a {
  display: inline-block; padding: 6px 13px; font-size: 14px; text-decoration: none;
  color: var(--blue-deep); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
}
.link-list a:hover { border-color: var(--blue); }

/* ── フッター（全ページ共通の追加分） ──────────── */

.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 12.5px; }
.footer-nav a { color: var(--ink-soft); }
/* お問い合わせは最下部の小さいリンク1本だけ（独立管理ポリシー §3） */
.footer-contact { margin: 10px 0 0; font-size: 11.5px; }
.footer-contact a { color: var(--ink-faint); }

/* ── モードC：旅程 ───────────────────────────
   表は日数ぶん縦に伸びる。行の高さは中身が入っても変わらないように固定してあり、
   行き先を選んだ瞬間に下の内容がずれない（CLS対策・UIテク#12）。 */

.trip-setup {
  padding: 18px 20px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(18, 58, 85, .04), 0 6px 18px rgba(18, 58, 85, .05);
}
.trip-setup-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.trip-field { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; }
.trip-label { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }

/* 旅程の表も白いカードに載せる（夜の空の上に素の文字を置かない） */
#panelC .table-scroll {
  margin-top: 8px; padding: 4px 16px 12px;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(18, 58, 85, .05), 0 5px 14px rgba(18, 58, 85, .07);
}
.trip-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.trip-table thead th {
  padding: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-faint);
  text-align: left; border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
.trip-table tbody th, .trip-table tbody td {
  padding: 10px 8px; border-bottom: 1px solid var(--line);
  height: 56px; vertical-align: middle;
}
.trip-date { text-align: left; white-space: nowrap; }
.trip-date b { font-size: 15px; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.trip-nth { display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint); }

.trip-sel {
  width: 100%; min-width: 150px; padding: 8px 10px; font: inherit; font-size: 14.5px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper-sunken);
}
.trip-sel:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88, 180, 232, .25); }

.trip-sun { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.trip-sun.is-empty { color: var(--ink-faint); font-size: 13px; }
.trip-sun b { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.trip-bar {
  flex: 1 1 auto; height: 12px; min-width: 64px;
  background: var(--paper-sunken); border-radius: 6px; overflow: hidden;
}
.trip-bar-fill { display: block; height: 100%; border-radius: 6px; transition: width .3s ease; }
.trip-temp { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); font-size: 13px; }

.trip-summary { margin-top: 18px; }
.trip-empty {
  margin: 0; padding: 16px 18px; font-size: 13.5px; color: var(--ink-soft);
  background: var(--paper-sunken); border-radius: var(--radius); text-wrap: pretty;
}
.trip-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.trip-stat {
  padding: 14px 16px; background: var(--paper-sunken); border-radius: 10px;
  border-top: 3px solid var(--blue);
}
.trip-stat-label { display: block; font-size: 11.5px; color: var(--ink-faint); }
.trip-stat-value {
  display: block; margin-top: 2px; font-size: 26px; font-weight: 800;
  color: var(--blue-ink); font-variant-numeric: tabular-nums;
}
.trip-stat-unit { margin-left: 2px; font-size: 15px; font-weight: 700; }
.trip-best { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); text-wrap: pretty; }
.trip-best b { color: var(--blue-ink); }

.trip-links { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 16px; font-size: 13px; }
.trip-links[hidden] { display: none; }
.trip-links-head { color: var(--ink-faint); }
.trip-link {
  padding: 5px 12px; color: var(--blue-deep); background: var(--paper-sunken);
  border: 1.5px solid var(--line); border-radius: 999px; text-decoration: none;
  transition: border-color .15s ease;
}
.trip-link:hover { border-color: var(--blue); }

/* 共有は全日ぶん埋まってから（歯抜けの旅程URLを配らせない） */
.actions .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── モバイル ─────────────────────────────── */

@media (max-width: 760px) {
  .article { padding: 20px 18px 26px; }
  .article h1 { font-size: 23px; }
  .weeks { grid-template-columns: 1fr; gap: 8px; }
  /* 年間カレンダーは1画面に31日ぶん収める。横スクロールにすると、スクロールできること
     自体に気づかれず「17日以降がない図」に見えてしまう（実機で確認）。 */
  .cal-grid { min-width: 0; grid-template-columns: 1.9em repeat(31, minmax(0, 1fr)); gap: 1px; }
  .cal-mon { font-size: 9.5px; }
  .cal-head { font-size: 8.5px; }
  .month-table th, .month-table td { padding: 5px 4px; }
  .picker { grid-template-columns: 1fr; padding: 14px; }
  /* 全チップ表示にしたぶん、スマホではチップを1段詰めてリストを低くする */
  .spot-btn { padding: 5px 9px; font-size: 13px; }
  .spot-list { gap: 5px; }
  .card { padding: 16px; }
  .card-body { min-height: 660px; }
  .card-spot { font-size: 24px; }
  .ring { width: 168px; height: 168px; }
  .ring-inner b { font-size: 52px; }
  .map-layout { grid-template-columns: 1fr; gap: 6px; }
  .map-box { max-height: none; }
  .legend-list { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .actions .btn { flex: 1 1 auto; }

  .trip-setup { padding: 14px; }
  .trip-field { flex: 1 1 100%; }
  .trip-table { font-size: 13px; }
  .trip-table tbody th, .trip-table tbody td { padding: 8px 6px; }
  .trip-sel { min-width: 128px; font-size: 14px; }
  .trip-temp { font-size: 12px; }
  .trip-stat-value { font-size: 22px; }
}

/* ── アンビエント演出（js/ambient.js が組み立てる） ─────────
   空の上に直接載る残りの文字を on-sky 変数にそろえる。 */

#panelB .map-head .picker-title,
#panelC > .picker-title,
.spot-links .sec-title--lg { color: var(--on-sky-strong); }
/* 空の上に直接載る見出しは、上のカードとの間隔を一定のリズムにそろえる */
#panelC > .picker-title { margin: 26px 0 12px 4px; }
#panelC > .card-note, #panelC > .card-period, #panelC > .share-msg { color: var(--on-sky-soft); }
#panelC .trip-best { color: var(--on-sky-soft); }
#panelC .trip-best b { color: var(--on-sky-strong); }
.trip-links-head { color: var(--on-sky-faint); }

/* 背景シーン。html の空グラデーションの上・本文の下に固定で敷く。 */
.sky-scene {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.sky-layer { position: absolute; inset: -12% 0 0; }

/* 太陽：時刻ぶんだけ弧を描いて動く（位置はJSが vw/vh で入れる） */
.sky-sun {
  display: none; position: absolute; width: 220px; height: 220px;
  margin: -110px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 238, 176, .95) 0%, rgba(255, 216, 128, .38) 40%, rgba(255, 216, 128, 0) 70%);
  transition: left 1.6s ease, top 1.6s ease;
  animation: sun-breathe 9s ease-in-out infinite alternate;
}
html[data-sky="day"] .sky-sun { display: block; }
html[data-sky="dawn"] .sky-sun, html[data-sky="dusk"] .sky-sun {
  display: block;
  background: radial-gradient(circle,
    rgba(255, 196, 120, .95) 0%, rgba(250, 158, 96, .4) 42%, rgba(250, 158, 96, 0) 70%);
}
@keyframes sun-breathe { from { transform: scale(1); } to { transform: scale(1.07); } }

/* 月と星：夜だけ */
.sky-moon {
  display: none; position: absolute; right: 7%; top: 5%;
  width: 58px; height: 58px; border-radius: 50%;
  background: #f2edda;
  box-shadow: 0 0 36px 8px rgba(240, 234, 205, .28);
}
.sky-moon i {
  position: absolute; left: -14%; top: -8%; width: 86%; height: 86%;
  border-radius: 50%; background: var(--sky-top);
}
.sky-stars { display: none; position: absolute; inset: 0; }
html[data-sky="night"] .sky-moon, html[data-sky="night"] .sky-stars { display: block; }
.sky-star {
  position: absolute; border-radius: 50%; background: #eef4ff;
  animation: star-twinkle 3.4s ease-in-out infinite alternate;
}
@keyframes star-twinkle { from { opacity: .12; } to { opacity: .9; } }

/* 雲：3層×2個が右へゆっくり流れる。層はスクロールで視差移動（JS）。 */
.sky-cloud {
  position: absolute; opacity: .8;
  background:
    radial-gradient(closest-side at 28% 68%, var(--cloud) 0%, var(--cloud) 46%, transparent 92%),
    radial-gradient(closest-side at 52% 40%, var(--cloud) 0%, var(--cloud) 42%, transparent 90%),
    radial-gradient(closest-side at 74% 66%, var(--cloud) 0%, var(--cloud) 44%, transparent 92%);
  animation: cloud-drift linear infinite;
}
@keyframes cloud-drift {
  from { transform: translateX(-460px); }
  to { transform: translateX(108vw); }
}
.cloud--1 { top: 5%;  width: 380px; height: 120px; animation-duration: 170s; animation-delay: -30s; }
.cloud--2 { top: 14%; width: 300px; height: 96px;  animation-duration: 140s; animation-delay: -95s; }
.cloud--3 { top: 24%; width: 240px; height: 78px;  animation-duration: 120s; animation-delay: -55s; }
.cloud--4 { top: 9%;  width: 320px; height: 100px; animation-duration: 155s; animation-delay: -130s; }
.cloud--5 { top: 32%; width: 210px; height: 66px;  animation-duration: 115s; animation-delay: -20s; }
.cloud--6 { top: 40%; width: 260px; height: 84px;  animation-duration: 135s; animation-delay: -80s; }
.cloud--7 { top: 18%; width: 340px; height: 108px; animation-duration: 185s; animation-delay: -150s; }
.cloud--8 { top: 28%; width: 200px; height: 64px;  animation-duration: 105s; animation-delay: -40s; }
.cloud--9 { top: 47%; width: 290px; height: 92px;  animation-duration: 150s; animation-delay: -110s; }

/* 晴れ確率に応じた雲の量（few=よく晴れる／many=曇りがち） */
.sky-scene[data-clouds="few"] .cloud--3,
.sky-scene[data-clouds="few"] .cloud--4,
.sky-scene[data-clouds="few"] .cloud--5,
.sky-scene[data-clouds="few"] .cloud--6,
.sky-scene[data-clouds="few"] .cloud--8,
.sky-scene[data-clouds="few"] .cloud--9 { display: none; }
.sky-scene[data-clouds="few"] .sky-cloud { opacity: .55; }
.sky-scene[data-clouds="some"] .cloud--5,
.sky-scene[data-clouds="some"] .cloud--6,
.sky-scene[data-clouds="some"] .cloud--8,
.sky-scene[data-clouds="some"] .cloud--9 { display: none; }
.sky-scene[data-clouds="many"] .sky-cloud { opacity: .95; }
/* 曇りがちの日は太陽を雲ごしの淡い光に */
.sky-scene[data-clouds="many"] .sky-sun { opacity: .3; }

/* 雨・雪（統計値が高い日だけ・ごく控えめに） */
.sky-rain, .sky-snow { position: absolute; inset: 0; }
.sky-rain[hidden], .sky-snow[hidden] { display: none; }
.sky-rain i {
  position: absolute; top: -120px; width: 1.5px; height: 88px;
  background: linear-gradient(to bottom, rgba(90, 130, 170, 0), rgba(90, 130, 170, .34));
  transform: rotate(0.001deg);
  animation: rain-fall linear infinite;
}
@keyframes rain-fall { to { transform: translateY(118vh); } }
.sky-snow i {
  position: absolute; top: -20px; border-radius: 50%; background: rgba(255, 255, 255, .85);
  animation: snow-fall linear infinite;
}
@keyframes snow-fall {
  0%   { transform: translate(0, -20px); }
  25%  { transform: translate(14px, 28vh); }
  50%  { transform: translate(-8px, 56vh); }
  75%  { transform: translate(12px, 84vh); }
  100% { transform: translate(0, 112vh); }
}

/* ── 時間帯ごとの調整 ─────────────────────────── */

html[data-sky="dawn"] { --cloud: rgba(255, 233, 216, .7); }
html[data-sky="dusk"] { --cloud: rgba(255, 224, 196, .62); }
html[data-sky="night"] {
  --cloud: rgba(190, 205, 228, .1);
  --sky-base: #38455a;
  --on-sky-strong: #ecf4fb;
  --on-sky-soft: #c0d2e2;
  --on-sky-faint: #92a8bd;
}
html[data-sky="night"] .sky-rain i {
  background: linear-gradient(to bottom, rgba(175, 200, 230, 0), rgba(175, 200, 230, .28));
}
html[data-sky="night"] .tab:not([aria-selected="true"]) { background: rgba(255, 255, 255, .14); }
html[data-sky="night"] .site-footer { background: rgba(255, 255, 255, .85); }
html[data-sky="night"] .actions .btn--ghost {
  color: var(--on-sky-soft); border-color: rgba(255, 255, 255, .35);
}
html[data-sky="night"] .brand-mark {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), 0 2px 12px rgba(242, 168, 90, .45);
}

/* ── スクロールで現れるセクション ─────────────────
   html.has-reveal はJSが立てる（JSが落ちたら普通に表示されたまま）。 */

html.has-reveal .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
html.has-reveal .reveal.is-inview { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .sky-sun { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .cloud--1, .cloud--4 { width: 260px; height: 84px; }
  .sky-moon { right: 8%; top: 10%; }
}

/* 鳥：昼にときどき群れで横切る（ambient.js が生成・装飾専用） */
.sky-flock { position: absolute; left: 0; width: 130px; height: 60px; }
.sky-flock.fly-right { animation: flock-right linear both; }
.sky-flock.fly-left { animation: flock-left linear both; }
@keyframes flock-right { from { transform: translateX(-16vw); } to { transform: translateX(114vw); } }
@keyframes flock-left { from { transform: translateX(114vw) scaleX(-1); } to { transform: translateX(-16vw) scaleX(-1); } }
.sky-bird { position: absolute; width: 16px; height: 8px; animation: bird-bob 2.6s ease-in-out infinite alternate; }
.sky-bird::before, .sky-bird::after {
  content: ""; position: absolute; top: 3px; width: 9px; height: 2px;
  border-radius: 2px 2px 0 0; background: rgba(70, 90, 110, .5);
}
.sky-bird::before { left: 0; transform-origin: right center; animation: wing-l .5s ease-in-out infinite alternate; }
.sky-bird::after { right: 0; transform-origin: left center; animation: wing-r .5s ease-in-out infinite alternate; }
@keyframes wing-l { from { transform: rotate(18deg); } to { transform: rotate(-14deg); } }
@keyframes wing-r { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
@keyframes bird-bob { from { transform: translateY(0); } to { transform: translateY(8px); } }
html[data-sky="dusk"] .sky-bird::before, html[data-sky="dusk"] .sky-bird::after,
html[data-sky="dawn"] .sky-bird::before, html[data-sky="dawn"] .sky-bird::after {
  background: rgba(96, 74, 84, .55);
}

/* 流れ星：夜にときどき（ambient.js が生成・1回流れて消える） */
.sky-shooting {
  position: absolute; width: 90px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(238, 244, 255, 0), rgba(238, 244, 255, .9));
  opacity: 0;
  animation: shoot 1.1s ease-out forwards;
}
@keyframes shoot {
  0% { opacity: 0; transform: rotate(24deg) translateX(0); }
  12% { opacity: .95; }
  100% { opacity: 0; transform: rotate(24deg) translateX(46vw); }
}

/* 月：ゆっくり明滅（既定の box-shadow を animation で上書き） */
html[data-sky="night"] .sky-moon { animation: moon-glow 7s ease-in-out infinite alternate; }
@keyframes moon-glow {
  from { box-shadow: 0 0 36px 8px rgba(240, 234, 205, .22); }
  to { box-shadow: 0 0 54px 16px rgba(240, 234, 205, .42); }
}

/* 操作系のマイクロインタラクション（transformのみ＝レイアウト不変・CLSゼロ） */
.chip {
  transition: background .15s ease, border-color .15s ease, color .15s ease,
    transform .15s ease, box-shadow .15s ease;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(43, 74, 102, .14); }
.chip:active { transform: translateY(0) scale(.97); }
.tab {
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.tab:hover:not([aria-selected="true"]) { transform: translateY(-1px); }
.tab:active { transform: scale(.985); }

/* 季節パーティクル：桜（3〜4月）・紅葉（10〜11月）。ambient.js が月で自動生成 */
.sky-seasonal { position: absolute; inset: 0; }
.sky-seasonal i {
  position: absolute; top: -6vh; border-radius: 60% 40% 55% 45%;
  animation-name: petal-fall, petal-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
.sky-seasonal--sakura i { background: rgba(248, 187, 208, .85); }
.sky-seasonal--sakura i:nth-child(3n) { background: rgba(244, 166, 195, .8); }
.sky-seasonal--momiji i { background: rgba(224, 122, 63, .8); border-radius: 45% 55% 40% 60%; }
.sky-seasonal--momiji i:nth-child(3n) { background: rgba(198, 88, 62, .78); }
.sky-seasonal--momiji i:nth-child(4n) { background: rgba(233, 165, 62, .78); }
@keyframes petal-fall { to { transform: translateY(116vh); } }
@keyframes petal-sway { from { margin-left: -14px; rotate: -30deg; } to { margin-left: 14px; rotate: 200deg; } }
html[data-sky="night"] .sky-seasonal { opacity: .35; }

/* 虹：雨がそこそこある晴れ寄りの統計のとき、昼だけうっすら（data-rainbow="1"） */
.sky-rainbow {
  position: absolute; right: -12vw; top: 30vh; width: 60vw; height: 60vw;
  border-radius: 50%; opacity: 0; transition: opacity 1.8s ease;
  background: radial-gradient(circle,
    transparent 58.5%,
    rgba(120, 180, 235, .5) 60%, rgba(150, 205, 160, .5) 62%,
    rgba(245, 225, 130, .55) 64%, rgba(240, 170, 110, .5) 66%,
    rgba(230, 120, 120, .5) 68%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 55%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 55%);
}
.sky-scene[data-rainbow="1"] .sky-rainbow { opacity: .32; }

/* 稲光：夕方〜夜の雨のとき、ごく稀に空が一瞬明るくなる（JSが生成・1回で消える） */
.sky-bolt {
  position: absolute; inset: 0; background: #eef4ff; opacity: 0;
  animation: bolt-flash .7s ease-out forwards;
}
@keyframes bolt-flash {
  0% { opacity: 0; }
  8% { opacity: .22; }
  16% { opacity: .03; }
  26% { opacity: .14; }
  100% { opacity: 0; }
}

/* 飛行機雲：昼の快晴時、斜めにゆっくり1本伸びて薄れる（JSが生成・1回で消える） */
.sky-contrail {
  position: absolute; height: 3px; width: 34vw; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 20%, rgba(255, 255, 255, .75));
  transform: rotate(-14deg); transform-origin: left center;
  clip-path: inset(0 100% 0 0);
  animation: contrail-draw 14s linear forwards;
}
@keyframes contrail-draw {
  0% { clip-path: inset(0 100% 0 0); opacity: .9; }
  55% { clip-path: inset(0 0 0 0); opacity: .75; }
  100% { clip-path: inset(0 0 0 -20%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  /* 動きを止めても、降りかけの雨・雪が空中に固まって見えないように消す */
  .sky-rain, .sky-snow { display: none !important; }
  /* 鳥・流れ星は JS 側で生成自体を止めるが、CSSでも二重に消しておく */
  .sky-flock, .sky-shooting { display: none !important; }
  .sky-seasonal, .sky-bolt, .sky-contrail { display: none !important; }
}