:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1c2430;
  --muted: #5d6878;
  --line: #dde2e8;
  --accent: #1f5fbf;
  --accent-text: #ffffff;
  --accent-soft: #e8f0fc;
  --code: #eef1f5;
  --vmc: #1d7a46;
  --imc: #b3261e;
  --err-bg: #fdecea;
  --skeleton: #e6e9ee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c;
    --card: #1b2129;
    --text: #e6eaf0;
    --muted: #9aa5b4;
    --line: #2d3540;
    --accent: #5b9bff;
    --accent-text: #0b1220;
    --accent-soft: #1d2b42;
    --code: #232a34;
    --vmc: #5fd08e;
    --imc: #ff8a80;
    --err-bg: #3a1f1d;
    --skeleton: #2a313b;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.75 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 28px; }
h1 { font-size: 1.5rem; margin: 0 0 4px; }
.beta { font-size: .75rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
.lead { color: var(--muted); margin: 0 0 20px; }
.sub { color: var(--muted); font-size: .85rem; }

/* 入力欄と候補 */
form { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; max-width: 760px; }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.field { flex: 1 1 240px; min-width: 0; }
.combo { position: relative; }
input { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.suggest { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / .12); max-height: 320px; overflow-y: auto; }
.suggest li { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--accent-soft); }
.suggest .code { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; flex-shrink: 0; }
.suggest small { color: var(--muted, inherit); font-size: .85em; }
.suggest .iata { color: var(--muted); font-size: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-width: 2.5em; }
button[type=submit] { font: inherit; font-weight: 600; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-text); cursor: pointer; }
button[type=submit]:disabled { opacity: .5; cursor: default; }

/* 出発・経路（経由地）・到着を横に3つ、矢印でつなぐ。ダイバートは到着の真下。
   枠が狭いとき（スマホ・吹き出しの場所を空けた幅）は1列に縦に並べる */
#form { container-type: inline-size; }
.route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px 8px; align-items: end; }
.route .field { min-width: 0; }
.route label { color: var(--text); font-size: .92rem; font-weight: 700; }
.route label .opt { color: var(--muted); font-size: .8rem; font-weight: 400; }
.route-arrow { grid-row: 1; height: 46px; line-height: 46px; color: var(--muted); font-size: 1.15rem; }
/* 案A（2026-10-28 クロノコ採用）：1段目に 出発 → 到着、2段目に経由地の札の欄を横いっぱい、3段目に飛行の日時とダイバート */
.f-dep { grid-column: 1; grid-row: 1; }
.a1 { grid-column: 2; }
.a2 { display: none; }
.f-arr { grid-column: 3; grid-row: 1; }
.f-via { grid-column: 1 / -1; grid-row: 2; }
.f-alt { grid-column: 3; grid-row: 3; }
.f-at { grid-column: 1; grid-row: 3; max-width: 360px; }
/* 経由地の札の欄（app.js の viaField。航空情報の欄も同じ） */
.via-field { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 46px; padding: 5px 8px; border: 1px solid var(--field-line, var(--line)); border-radius: 8px; background: var(--field, var(--card)); cursor: text; }
.via-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.via-field .via-input { flex: 1 1 120px; min-width: 120px; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent; padding: 6px 4px; }
.via-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-weight: 600; font-size: .9rem; line-height: 1.5; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.via-chip small { color: var(--muted); font-weight: 400; font-size: .8em; }
.via-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.via-x { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--muted); font: inherit; font-size: .8rem; line-height: 1; cursor: pointer; }
/* 長押しで持ち上げた札（指に付いて動く）と、離すと入る位置の印（札の左か右に縦の線） */
.via-chip.lifted { z-index: 50; cursor: grabbing; box-shadow: 0 8px 20px rgb(24 70 120 / .35); outline: 2px solid var(--accent); pointer-events: none; }
.via-chip.lifted.settling { box-shadow: 0 1px 2px rgb(24 70 120 / .2); }
/* 持ち上げた札の行き先（点線の空き枠）。動かすとここへほかの札が滑って場所を空ける */
.via-slot { flex: none; display: inline-block; border: 2px dashed var(--accent); border-radius: 999px; background: var(--accent-soft); opacity: .7; box-sizing: border-box; }
/* 並べ替えで入った札を少しの間光らせる */
.via-chip.landed { animation: via-landed 1.1s ease-out; }
@keyframes via-landed { 0%, 30% { background: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .via-chip.landed { animation: none; outline: 2px solid var(--accent); } }
.via-arrow { flex: none; min-width: 26px; height: 28px; margin: 0 -3px; padding: 0 4px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: .85rem; line-height: 1; cursor: pointer; }
/* 矢印を押すとそこへ欄が動く（あとから経由地を差し込む）。触れられると分かるよう、上に来たら「＋」を出す */
.via-arrow:hover, .via-arrow:focus-visible { background: var(--accent-soft); color: var(--accent); }
.via-arrow:hover::after, .via-arrow:focus-visible::after { content: "＋"; margin-left: 1px; font-size: .75rem; }
/* 欄が札の間にあるときは、欄を短くして点線で囲む */
.via-field.mid .via-input { flex: 0 1 9em; min-width: 7em; outline: 1.5px dashed var(--accent) !important; border-radius: 6px; }
.via-help { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
/* 見つからない経由地：赤い点線の札と、欄の下の知らせ（外して作成する） */
.via-chip.missing { background: transparent; outline: 1.5px dashed var(--imc, #c62828); color: var(--imc, #c62828); }
.via-chip.missing .via-name { text-decoration: line-through; }
.via-chip.ask { background: #fff4d6; outline: 1.5px solid #e0a100; color: #7a5200; cursor: pointer; }
.via-chip.ask.open { outline-width: 2.5px; }
.via-q { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e0a100; color: #fff; font-size: .75rem; }
/* 選んでもらう吹き出し（案1）。--tip は札の位置に合わせた三角の位置 */
.via-pop { position: relative; margin-top: 10px; padding: 10px 12px; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--card); box-shadow: 0 6px 18px rgb(24 70 120 / .18); }
.via-pop::before { content: ""; position: absolute; top: -8px; left: var(--tip, 24px); width: 14px; height: 14px; background: var(--card); border-left: 1.5px solid var(--accent); border-top: 1.5px solid var(--accent); transform: rotate(45deg); }
.via-pop p { margin: 0 0 8px; font-weight: 700; font-size: .9rem; }
.via-pop p small { color: var(--muted); font-weight: 400; }
.via-pop .via-wait { margin: 8px 0 0; color: var(--accent); font-size: .82rem; }
.via-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.via-opt { padding: 6px 12px; border: 1px solid var(--field-line, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.via-opt small { color: var(--muted); font-weight: 400; }
.via-opt.best { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.via-opt.best small { color: inherit; opacity: .85; }
.via-opt.drop { background: var(--card); color: var(--muted); }
.via-note { margin: 6px 0 0; color: var(--imc, #c62828); font-size: .85rem; font-weight: 600; }
.at-dt { align-items: center; }
.at-clear { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.form-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 18px; }
.hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .95rem; line-height: 1.4; }
.hint-mark { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--accent); color: var(--accent-text); font: italic 700 .85rem/1 Georgia, "Times New Roman", serif; }
@container (max-width: 560px) {
  .route { grid-template-columns: 1fr; gap: 12px; }
  .route-arrow { display: none; }
  .f-dep, .f-via, .f-arr, .f-alt, .f-at { grid-column: 1; grid-row: auto; }
  .f-at { max-width: none; }
}

/* マスコット「出確くん」：パソコンでは入力の枠の右に立ち、頭は枠より上（雲のあたり）にはみ出す（枠の高さは変えない）。
   作成中は頭の右に考えごとの吹き出し（#progress）。画面が狭いときは枠を縮めて吹き出しの場所を空け、さらに狭いと吹き出しは枠の下。
   スマホでは枠の中、ボタンの右に小さく */
.form-line { --mascot-w: 130px; --form-w: min(760px, 100% - var(--mascot-w) - 18px); position: relative; }
.form-line form { position: relative; max-width: var(--form-w); }
/* 図は入力の枠（form）の中に置き、枠の右の外に出す（吹き出しが枠の下に入っても動かないように） */
.mascot { position: absolute; bottom: -2px; left: calc(100% + 20px); width: var(--mascot-w); margin: 0; text-align: center; }
.mascot-pic { position: relative; width: 100%; aspect-ratio: 241 / 380; filter: drop-shadow(0 6px 6px rgb(24 70 120 / .18)); }
.mascot-pic img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
.mascot-pic img.on { opacity: 1; }
.mascot-name { display: inline-block; position: relative; margin-top: -6px; padding: 1px 12px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--card); color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 2px 6px rgb(24 70 120 / .15); }
/* 考え中：体をゆっくり揺らす（ポーズは app.js が替える） */
.mascot.thinking .mascot-pic { transform-origin: 50% 100%; animation: mascot-ponder 2.6s ease-in-out infinite; }
@keyframes mascot-ponder { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg) translateY(-2px); } }
/* できたとき：ひとはねして吹き出し */
.mascot.done .mascot-pic { animation: mascot-hop .5s ease-out; }
@keyframes mascot-hop { 40% { transform: translateY(-8px); } }
.mascot-say { position: absolute; z-index: 2; right: 80%; top: 14%; margin: 0; padding: 4px 12px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--accent); color: var(--accent); font-size: .85rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgb(24 70 120 / .18); animation: mascot-say .3s ease-out; }
.mascot-say::after { content: ""; position: absolute; right: -7px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: inherit; border: inherit; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
@keyframes mascot-say { from { opacity: 0; transform: scale(.8); } }
/* 考えごとの吹き出し：頭の右。小さな丸2つで頭とつなぐ */
.think-bubble { position: absolute; z-index: 2; left: calc(var(--form-w) + 18px + var(--mascot-w) * .8 + 26px); bottom: 166px; width: 240px; margin: 0; padding: 10px 16px 11px; border: 1.5px solid var(--accent); border-radius: 22px; background: var(--card); box-shadow: 0 4px 14px rgb(24 70 120 / .18); line-height: 1.5; animation: mascot-say .3s ease-out; }
.think-bubble::before, .think-bubble::after { content: ""; position: absolute; border: inherit; border-radius: 50%; background: var(--card); }
.think-bubble::before { width: 13px; height: 13px; left: -10px; bottom: -4px; }
.think-bubble::after { width: 7px; height: 7px; left: -21px; bottom: -14px; }
.think-bubble p { margin: 0; }
.think-head { display: flex; gap: 8px; align-items: center; color: var(--accent); font-weight: 700; }
.think-head .spinner { width: 20px; height: 20px; border-width: 3px; }
#phase { font-size: .92rem; }
@media (max-width: 1269px) { .form-line { --form-w: min(760px, 100% - var(--mascot-w) - 18px - 262px); } }
@media (max-width: 899px) {
  .form-line { --mascot-w: 104px; --form-w: min(760px, 100% - var(--mascot-w) - 18px); }
  /* 吹き出しは枠の下、出確くんの足もとの右寄せ。丸は上（出確くんの方）へ */
  .think-bubble { position: relative; left: auto; bottom: auto; width: fit-content; max-width: min(320px, 100%); margin: 14px 0 0 auto; }
  .think-bubble::before { left: auto; bottom: auto; right: 34px; top: -11px; }
  .think-bubble::after { left: auto; bottom: auto; right: 44px; top: -22px; }
}
@media (prefers-color-scheme: dark) {
  /* 夜空の上でも紺の制服の輪郭が見えるように、ふちを少し明るく */
  .mascot-pic { filter: drop-shadow(0 0 1.5px rgb(214 228 247 / .55)) drop-shadow(0 6px 8px rgb(0 0 0 / .35)); }
}
@media (max-width: 640px) {
  .form-line { --form-w: 100%; }
  .form-line form { max-width: none; }
  .mascot { left: auto; right: 12px; bottom: 8px; width: 60px; }
  /* 出確くんは枠の右下、「どれか1つだけでもOK」とボタンの右 */
  .form-line .form-foot { flex-direction: column; align-items: stretch; padding-right: 70px; min-height: 104px; justify-content: flex-end; }
  .form-line .hint { align-self: flex-start; }
  .mascot-name { margin-top: -4px; padding: 0 6px; font-size: .66rem; letter-spacing: 0; border-width: 1px; }
  .mascot-say { right: auto; left: 50%; top: auto; bottom: 100%; transform: translateX(-50%); margin-bottom: 4px; font-size: .78rem; animation: none; }
  .mascot-say::after { right: auto; left: 50%; top: 100%; margin: -5px 0 0 -5px; border-width: 0 1.5px 1.5px 0; }
  .think-bubble::before { right: 26px; }
  .think-bubble::after { right: 36px; }
}

.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.error { background: var(--err-bg); border-radius: 8px; padding: 10px 14px; margin: 20px 0; max-width: 760px; }

/* 結果 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
#result { margin-top: 20px; overflow-wrap: anywhere; }
.head { padding: 12px 20px; margin-bottom: 12px; }
.head h2 { font-size: 1.25rem; margin: 0; }
.head p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }

.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.toc a { font-size: .85rem; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; }
.toc a .n { color: var(--muted); margin-left: 4px; }

/* ナビゲーション：出発・到着の見出し */
.group { font-size: 1.1rem; margin: 20px 4px 8px; padding-bottom: 4px; border-bottom: 2px solid var(--accent); }
.toc a .ap { color: var(--accent); font-weight: 600; margin-right: 4px; }

.sec { padding: 14px 20px 16px; margin-bottom: 12px; scroll-margin-top: 12px; }
.sec h3 { font-size: 1.05rem; margin: 0 0 8px; }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.text p { margin: 6px 0; }
.text ul { padding-left: 1.3em; margin: 6px 0; }
.text pre { background: var(--code); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font: .85rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin: 8px 0; }
.text .omitted, .note { color: var(--muted); font-size: .9rem; }
/* 資料を取得できなかった・作れなかった項目（「特に何もない」と読まれないよう、薄い灰色にしない） */
.text .alert { background: var(--err-bg); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.text .alert p { margin: 4px 0; }
.head .warn { color: var(--imc); font-weight: 600; }
/* 天気概況（気象庁の原文）。「ブリーフィングを作成」を押した瞬間に、フォームの下へ出す */
.overview { margin-top: 20px; padding: 12px 20px 16px; overflow-wrap: anywhere; }
.overview h2 { font-size: 1.25rem; margin: 0; }
.overview p { margin: 8px 0 0; }
.overview p.sub { margin-top: 2px; color: var(--muted); font-size: .9rem; }
.ov-talk { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 8px; }
/* 左の列：出確くんと、その真下に進み具合の吹き出し（考え中…）・「できたよ！」 */
.ov-side { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ov-mascot { position: relative; width: 92px; margin: 0; }
.ov-mascot.arriving { visibility: hidden; }
.ov-mascot.speaking .mascot-pic { animation: ov-bob .5s ease-in-out infinite alternate; }
.ov-mascot.thinking .mascot-pic { transform-origin: 50% 100%; animation: mascot-ponder 2.6s ease-in-out infinite; }
.ov-mascot.done .mascot-pic { animation: mascot-hop .45s ease-out; }
/* 着地：一度つぶれて、少し伸びてから元に戻る */
.ov-mascot.landing .mascot-pic { transform-origin: 50% 100%; animation: ov-land .36s ease-out; }
@keyframes ov-land { 0% { transform: scale(1.1, .86); } 55% { transform: scale(.97, 1.04); } 100% { transform: none; } }
@keyframes ov-bob { to { transform: translateY(-3px); } }
.ov-col { min-width: 0; }
/* 進み具合の吹き出し（考え中…）は、出確くんの真下。丸は上（出確くんの方）へ */
.ov-think { width: 100%; }
.ov-think .think-bubble { position: relative; left: auto; bottom: auto; width: auto; max-width: none; margin: 20px 0 0; padding: 8px 10px 9px; border-radius: 16px; font-size: .85rem; text-align: center; }
.ov-think .think-bubble p { margin: 0; }
.ov-think .think-bubble p + p { margin-top: 2px; }
.ov-think .think-head { justify-content: center; gap: 6px; }
.ov-think .think-head .spinner { width: 16px; height: 16px; }
.ov-think #phase { font-size: .85rem; }
.ov-think .think-bubble::before { left: calc(50% - 6px); right: auto; top: -11px; bottom: auto; }
.ov-think .think-bubble::after { left: calc(50% - 2px); right: auto; top: -21px; bottom: auto; }
.ov-say { width: fit-content; margin: 10px auto 0; padding: 4px 12px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--accent); color: var(--accent); font-size: .85rem; font-weight: 700; box-shadow: 0 2px 8px rgb(24 70 120 / .18); animation: mascot-say .3s ease-out; }
.overview p.ov-say { margin: 10px auto 0; }
/* フォームの横から天気概況の欄へ飛ぶあいだの絵 */
.mascot-ghost { position: absolute; z-index: 50; transform-origin: 50% 100%; pointer-events: none; filter: drop-shadow(0 6px 6px rgb(24 70 120 / .18)); }
.mascot.away { visibility: hidden; }
.ov-bubble { position: relative; background: var(--accent-soft); border-radius: 14px; padding: 2px 14px 10px; min-width: 0; }
.ov-bubble::before { content: ""; position: absolute; left: -9px; top: 28px; border: 9px solid transparent; border-left: 0; border-right-color: var(--accent-soft); }
.overview:not(.typed) { cursor: pointer; }
.ov-type .ch:not(.on) { display: none; }
/* 書き始める前（出確くんの着地待ち）は、空の吹き出しを見せない */
.ov-bubble:has(.ov-type .ch):not(:has(.ch.on)) { visibility: hidden; }
.ov-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); vertical-align: -.15em; margin-left: 1px; animation: ov-blink 1s steps(1) infinite; }
@keyframes ov-blink { 50% { opacity: 0; } }
/* 飛行の日時を入れたとき：頭の「入力した時刻：…」と、天気概況のあとの空港ごとの予報（2026-10-27 クロノコ指示） */
.ov-type p:not(:has(.ch.on)) { display: none; }
.ov-type p.ov-at, .ov-type p.ov-ap { font-weight: 700; }
.ov-fc .ov-type p:first-child, p.ov-fc { margin-top: 14px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.overview:not(.typed) .alert.ov-fc { display: none; }
.ov-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 520px) {
  .ov-talk { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .ov-mascot { width: 64px; }
  .ov-think .think-bubble { padding: 6px 6px 7px; font-size: .74rem; }
  .ov-think #phase { font-size: .74rem; }
  .ov-say, .overview p.ov-say { padding: 3px 8px; font-size: .78rem; }
}
.toc a .x { color: var(--imc); margin-left: 4px; }
.vmc { color: var(--vmc); }
.imc { color: var(--imc); }
.links { margin: 8px 0 0; font-size: .85rem; }
.links a { color: var(--accent); }
/* 図の見方（高層天気図の欄の、渦度・上昇流を重ねた図）。印の色は図と同じ（src/derive/vortcircle.mjs の SHADE_POSITIVE・COLOR） */
/* 図の見方（ふだんは畳んである。押すと開く） */
.legends { margin: 12px 0 0; }
/* ボタンは押しやすい大きさに（2026-10-24 クロノコ指示） */
.legends > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; box-sizing: border-box; padding: 10px 24px 10px 20px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--card); color: var(--accent); font-size: 1.05rem; font-weight: 700; cursor: pointer; list-style: none; user-select: none; box-shadow: 0 2px 6px rgb(24 70 120 / .12); }
.legends > summary::-webkit-details-marker { display: none; }
.legends > summary::before { content: "▸"; font-size: 1.1em; transition: transform .15s; }
.legends[open] > summary::before { transform: rotate(90deg); }
.legends > summary:hover { background: var(--accent-soft); }
.legend { margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: .88rem; }
.legend .legend-h { font-weight: 600; margin: 2px 0 6px; }
.legend ul { list-style: none; padding: 0; margin: 0; }
.legend li { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.legend p { margin: 6px 0 2px; }
.legend .mk { flex: none; width: 20px; height: 20px; margin-top: 1px; box-sizing: border-box; }
.legend .mk-pink { background: #FFD3E6; border-radius: 3px; }
.legend .mk-ring { border: 2px solid #C2187A; border-radius: 50%; background: #fff; color: #C2187A; font: 700 14px/16px system-ui, sans-serif; text-align: center; }
/* 700hPaの上昇流の図（src/derive/upward.mjs の UPWARD_COLORS・OVERLAP_STYLES と破線の色） */
.legend .mk-up { background: #FFB0B0; border-radius: 3px; }
.legend .mk-moist { background: #C8EBC0; border-radius: 3px; }
.legend .mk-both { background: repeating-linear-gradient(-45deg, #FFB0B0 0 3.5px, #C8EBC0 3.5px 7px); border-radius: 3px; }
.legend .mk-edge { height: 0; margin-top: 10px; border-top: 2px dashed #888; }
/* 850hPaの相当温位の図（src/derive/ept850.mjs の EPT_LINE・COAST） */
.legend .mk-eptline { height: 0; margin-top: 10px; border-top: 2px solid #8A2E0E; }
.legend .mk-coast { height: 0; margin-top: 9px; border-top: 4px solid #4A2408; }
.legend .scale { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0; margin-top: 6px; }
.legend .sw { display: inline-flex; flex-direction: column; align-items: flex-start; }
.legend .sw-c { width: 30px; height: 14px; border: 1px solid rgba(0,0,0,.12); }
.legend .sw-v { font-size: .72rem; line-height: 1.2; margin-left: -6px; }
.legend .sw-u { font-size: .72rem; line-height: 1.2; margin-left: 2px; }

/* 文章を作成中の仮表示 */
.skeleton { display: grid; gap: 8px; padding: 6px 0; }
.skeleton span { height: 12px; border-radius: 6px; background: var(--skeleton); animation: pulse 1.4s ease-in-out infinite; }
.skeleton span:nth-child(2) { width: 92%; }
.skeleton span:nth-child(3) { width: 64%; }
@keyframes pulse { 50% { opacity: .45; } }
.skeleton-label { color: var(--muted); font-size: .85rem; margin: 0; }

/* 経路の METAR／TAF：空港ごとに枠で囲み、上に空港名の帯を付ける（どこまでがどの空港か分かるように。2026-10-26 クロノコ指示） */
.ap-box { margin: 14px 0 0; border: 1.5px solid var(--accent); border-radius: 10px; overflow: hidden; }
.ap-box:first-child { margin-top: 4px; }
.ap-box > .ap-head { margin: 0; padding: 8px 12px; background: var(--accent-soft); border-bottom: 1.5px solid var(--accent); font-weight: 700; font-size: 1.02rem; }
.ap-box > :not(.ap-head) { margin-left: 12px; margin-right: 12px; }
.ap-box > :last-child { margin-bottom: 12px; }
/* 追加の資料：ふだんは畳んでおき、押すと開く（「図の見方」と同じボタン。2026-10-26 クロノコ指示） */
.extra-fold { margin: 4px 0 0; }
.extra-fold > .figs { margin-top: 14px; }
.extra-fold > summary { gap: 0; }
.extra-fold > summary::before { margin-right: 10px; }
/* 追加の資料（案E）：左に区分の目次、右にその区分の資料。スマホ幅では目次が上の横並び（横にはみ出す分はバーを出す。hscroll.js） */
.xa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.xa-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.xa-cat { flex: none; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer; }
.xa-cat:hover { border-color: var(--accent); }
.xa-cat.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.xa-body { min-width: 0; }
.xa-h { font-size: 1.05rem; margin: 0 0 10px; padding-left: 8px; border-left: 4px solid var(--accent); }
.xa-aps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.xa-ap { padding: 5px 14px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--card); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.xa-ap.on { background: var(--accent); color: var(--accent-text); }
.xa-item { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.xa-item:first-of-type { border-top: 0; padding-top: 2px; }
.xa-ih { margin: 0 0 8px; font-weight: 700; }
.xa-ih small { margin-left: 4px; color: var(--muted); font-weight: 600; }
.xa-item .note { margin: 6px 0 0; }
.xa-src { margin: 8px 0 0; font-size: .85rem; }
.xa-retry { margin-left: 8px; font: inherit; }
@media (min-width: 760px) {
  .xa { grid-template-columns: 190px minmax(0, 1fr); gap: 18px; }
  .xa-nav { flex-direction: column; overflow: visible; align-self: start; position: sticky; top: 10px; }
  .xa-cat { white-space: normal; }
}
.mt-fold { margin: 10px 0 4px; }
.mt-fold > summary { gap: 0; }
.mt-fold > summary::before { margin-right: 10px; }
.mt-fold > :not(summary):first-of-type { margin-top: 12px; }
.extra-fold:not([open]) .fold-o, .extra-fold[open] .fold-c, .mt-fold:not([open]) .fold-o, .mt-fold[open] .fold-c { display: none; }

/* 図：スマホでは本文の下に横に並べる。広い画面では本文の右に置き、読みながら見られるようにする */
.figs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
/* 横に動かせる部分の下のバー（hscroll.js）。スマホのスクロールバーは触っている間しか出ないので、自前のバーを常に出す。
   サイト内の横スクロールする部分すべての既定（2026-10-26 クロノコ指示）。ふつうのスクロールバーは隠す */
.has-hbar { scrollbar-width: none; }
.has-hbar::-webkit-scrollbar { display: none; }
.has-hbar + .hbar { margin-top: -2px; }
.hbar { position: relative; height: 6px; margin: 4px 2px 8px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, transparent); cursor: pointer; touch-action: none; }
.hbar::before { content: ""; position: absolute; inset: -8px 0; }
.hbar > span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--text) 70%, transparent); }
/* 図は上端をそろえる（ボタンは中身を縦の真ん中に置くので、日時の長さが違う図が並ぶと下にずれて見える。クロノコ指示 2026-10-19） */
.fig { flex: 0 0 150px; align-self: flex-start; scroll-snap-align: start; margin: 0; cursor: zoom-in; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; }
.fig .ph { display: block; height: 112px; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fig .cap { display: block; margin-top: 5px; line-height: 1.4; }
.fig .cap-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; color: var(--muted); }
/* 図の日時（何日何時の解析・予想か）。いちばん大事なので、大きく太く、色を付けて目立たせる */
.cap-when { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.fig .cap-when { font-size: .98rem; }
.cap-when .nw { white-space: nowrap; }
.fig:focus-visible .ph, .fig:hover .ph { border-color: var(--accent); }
.figs-pending { color: var(--muted); font-size: .8rem; align-self: center; display: inline-flex; align-items: center; gap: 7px; }
/* 作成中の図：くるくる回る丸（2026-10-27 クロノコ指示）。作成が止まったとき（stopped）は丸を消す */
.figs-pending::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 1s linear infinite; flex: none; }
.figs-pending.stopped::before { content: none; }
/* 追加の資料：文章がないので、図を幅いっぱいに並べる */
.figs.figs-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; overflow: visible; }
.figs-wide .fig { flex: none; }
/* 追加の資料は文章がないので、図の名前を大きく濃く（クロノコ指示 2026-10-19） */
.figs-wide .fig .cap-name { font-size: .98rem; font-weight: 600; color: var(--text); -webkit-line-clamp: 3; }
.figs-wide + .note { margin: 10px 0 0; }
/* 左右の矢印で切り替える図（高層天気図の欄の500・700・850hPa）。矢印と点は図の上に重ねる */
.fig-slides { position: relative; flex: 0 0 150px; align-self: flex-start; scroll-snap-align: start; }
.fig-slides .fig { display: block; width: 100%; }
.sl-arrow { position: absolute; top: 40px; width: 30px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--accent); font: 700 1.4rem/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.sl-prev { left: 3px; }
.sl-next { right: 3px; }
.sl-arrow:hover, .sl-arrow:focus-visible { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.sl-dots { position: absolute; top: 98px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.sl-dots span { width: 7px; height: 7px; border-radius: 50%; background: #9aa6b8; box-shadow: 0 0 0 1.5px #fff; }
.sl-dots span.on { background: var(--accent); }
/* 図が読み込めなかったとき */
.fig.broken .ph { background: var(--card); }
.fig-error { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px; text-align: center; font-size: .8rem; color: var(--imc); }
.viewer-img .fig-error { height: auto; min-height: 120px; margin: 0; background: var(--card); font-size: .95rem; }
@media (min-width: 900px) {
  .sec-grid.has-figs { grid-template-columns: minmax(0, 1fr) 316px; gap: 24px; }
  .figs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; align-content: start; }
  /* 長い日時（下層悪天予想図の「…基準 …の予想」など）で列が広がって枠からはみ出さないように */
  .fig, .fig-slides { flex: none; min-width: 0; }
  /* 経路の下層悪天予想図で地域が3つ以上：図を本文の下に、地域ごとの列で並べる */
  .sec-grid.has-figs.figs-below { grid-template-columns: minmax(0, 1fr); }
  .figs-below .figs { grid-template-columns: repeat(var(--fig-cols), minmax(0, 1fr)); gap: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .spinner, .figs-pending::before, .skeleton span, .mascot-pic, .mascot-say, .think-bubble, .ov-mascot .mascot-pic, .ov-say, .ov-caret { animation: none !important; } .mascot-pic img { transition: none; } }

/* 動かせるレーダー（雨雲の動き、radar.js）。
   地図の地は灰色にする（白だと、気象庁の一番弱いエコーの色 #F2F2FF が見えず「雨がない」と見えてしまう）。
   斜線（灰）は観測範囲の外、斜線（赤）は取得できなかったところ、点の模様は読み込み中のところ */
:root {
  --rv-map: #c3cbd4;
  --rv-nd: rgb(36 46 60 / .55);
  --rv-nd-fill: rgb(36 46 60 / .12);
  --rv-bad: #d32f2f;
  --rv-ring: #d32f2f;
  --rv-wait: rgb(255 255 255 / .7);
  --rv-wait-fill: rgb(255 255 255 / .22);
  --rv-veil: rgb(246 248 251 / .78);
  --rv-foot: linear-gradient(#fdfdfe, #e3e6ea);
  --rv-foot-line: #cfd5dc;
  --rv-rail: #dde1e6;
  --rv-rail-line: #c3c9d1;
  --rv-fill: #2f7de1;
  --rv-thumb: linear-gradient(#ffffff, #e6e9ed);
  --rv-thumb-line: #aab2bc;
  --rv-tick: #8d96a1;
  --rv-mark: #2b3440;
  --rv-btn: linear-gradient(#ffffff, #e9ecf0);
}
@media (prefers-color-scheme: dark) {
  :root {
    --rv-map: #2b3440;
    --rv-nd: rgb(225 232 242 / .5);
    --rv-nd-fill: rgb(225 232 242 / .08);
    --rv-bad: #ff6b6b;
    --rv-ring: #ff5a5a;
    --rv-wait: rgb(255 255 255 / .28);
    --rv-wait-fill: rgb(255 255 255 / .06);
    --rv-veil: rgb(14 23 38 / .78);
    --rv-foot: linear-gradient(#27303b, #1b2129);
    --rv-foot-line: #333d49;
    --rv-rail: #3b4552;
    --rv-rail-line: #4a5562;
    --rv-fill: #4f95ff;
    --rv-thumb: linear-gradient(#eef1f5, #c7ced7);
    --rv-thumb-line: #8792a0;
    --rv-tick: #7f8a97;
    --rv-mark: #dfe5ee;
    --rv-btn: linear-gradient(#323c48, #252d37);
  }
  /* 海岸線のタイルは黒い線なので、暗い画面では白い線にする */
  .rv-coast { filter: invert(1); }
}
.rv-in { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv { max-width: 600px; }
.rv h3 { font-size: 1.05rem; margin: 0 0 10px; }
.rv-sub { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); line-height: 1.6; }
/* 地図と時間軸は1つの枠にまとめる */
.rv-view { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
/* 地図：指で動かすので、地図の上ではページをスクロール・拡大させない（touch-action）。縦長の画面でも画面の7割まで。
   overflow: clip：中のタイルの層は地図の外まで広がるので、ボタンに焦点が移ったときなどに地図の中身がずれないよう、スクロールできない箱にする */
.rv-map { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 72vh; overflow: hidden; overflow: clip; background: var(--rv-map); user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; }
.rv-map:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rv-map.rv-grabbing { cursor: grabbing; }
.rv-echo, .rv-nd, .rv-coast, .rv-top, .rv-veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-echo, .rv-nd, .rv-coast, .rv-top, .rv-attr, .rv-loading, .rv-stamp { pointer-events: none; }
.rv-z, .rv-frame { position: absolute; left: 0; top: 0; }
.rv-z { transform-origin: 0 0; }
.rv-tile, .rv-cell { position: absolute; display: block; width: 256px; height: 256px; max-width: none; }
/* 気象庁の画面と同じく、拡大・縮小しても画素をぼかさない（色の境目が凡例にない色にならないように）。
   拡大率が半端なとき、タイルの境目の画素が半分ずつしか塗られず地の色の筋が出るので、1つの時刻の中では足し合わせる（plus-lighter） */
.rv-echo .rv-tile { image-rendering: pixelated; mix-blend-mode: plus-lighter; }
.rv-frame { isolation: isolate; }
.rv-wait { background: radial-gradient(circle, var(--rv-wait) 1.6px, transparent 2.2px) 0 0 / 12px 12px, var(--rv-wait-fill); }
.rv-bad { background: repeating-linear-gradient(-45deg, var(--rv-bad) 0 3px, transparent 3px 12px); }
/* 左上：拡大・縮小（＋−をつなげた箱）、その右に時刻、下に「空港」 */
.rv-zoom { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; border: 1px solid var(--rv-thumb-line); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgb(0 0 0 / .25); }
.rv-zoom button, .rv-home { width: 36px; height: 34px; padding: 0; border: 0; background: var(--card); color: var(--text); font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; }
.rv-zoom button + button { border-top: 1px solid var(--line); }
.rv-home { position: absolute; top: 88px; left: 10px; width: 38px; border: 1px solid var(--rv-thumb-line); border-radius: 6px; font-size: .7rem; box-shadow: 0 1px 4px rgb(0 0 0 / .25); }
.rv-zoom button:disabled, .rv-home:disabled { opacity: .5; cursor: default; }
.rv-stamp { position: absolute; z-index: 1; top: 10px; left: 56px; margin: 0; padding: 4px 10px; border-radius: 4px; background: rgb(28 33 40 / .88); color: #fff; font-size: .95rem; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 時刻は幕（読み込み中・取得できなかった）より上に出す。予想は文字の色も変えて、実況とひと目で分かるように */
.rv-stamp.fc .rv-stamp-k { color: #ffc95c; }
.rv-attr { position: absolute; right: 6px; bottom: 4px; padding: 0 5px; border-radius: 3px; font-size: .7rem; line-height: 1.6; background: var(--rv-veil); }
.rv-loading { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; padding: 1px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--rv-veil); }
.rv-veil { display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; background: var(--rv-veil); }
.rv-msg { margin: 0; font-weight: 600; }
.rv-banner { position: absolute; top: 52px; left: 56px; right: 8px; padding: 4px 10px; border-radius: 6px; background: var(--err-bg); color: var(--text); font-size: .85rem; font-weight: 600; box-shadow: 0 1px 4px rgb(0 0 0 / .2); }
.rv button { font-family: inherit; color: var(--text); }
.rv-retry, .rv-reload { margin: 6px 0 0 4px; font-size: .85rem; padding: 3px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
/* 時間軸（地図の下の1行）：丸い再生ボタンと、1本のつまみの道。道は始まりからつまみまで青。
   目盛りは1時間前〜1時間後が5分ごと、その先が1時間ごと（radar.js の unit） */
.rv-foot { display: flex; align-items: flex-start; gap: 14px; padding: 9px 14px 6px 10px; background: var(--rv-foot); border-top: 1px solid var(--rv-foot-line); }
.rv-play { flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--rv-thumb-line); border-radius: 50%; background: var(--rv-btn); box-shadow: 0 1px 3px rgb(0 0 0 / .25); cursor: pointer; display: grid; place-items: center; }
.rv-play svg { width: 20px; height: 20px; fill: var(--rv-fill); }
.rv-play .rv-i-pause, .rv-play.rv-playing .rv-i-play { display: none; }
.rv-play.rv-playing .rv-i-pause { display: inline; }
.rv-play:disabled { opacity: .5; cursor: default; }
.rv-play:focus-visible, .rv-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-bar { flex: 1; min-width: 0; position: relative; height: 52px; padding: 0 12px; touch-action: pan-y; cursor: pointer; border-radius: 4px; }
.rv-bar[aria-disabled="true"] { opacity: .5; cursor: default; }
.rv-rail { position: relative; height: 100%; }
.rv-track { position: absolute; left: 0; right: 0; top: 9px; height: 7px; border: 1px solid var(--rv-rail-line); border-radius: 4px; background: var(--rv-rail); overflow: hidden; }
.rv-fill { width: 0; height: 100%; background: var(--rv-fill); }
.rv-thumb { position: absolute; top: 1px; width: 22px; height: 22px; margin-left: -11px; border: 1px solid var(--rv-thumb-line); border-radius: 5px; background: var(--rv-thumb); box-shadow: 0 1px 3px rgb(0 0 0 / .3); left: 0; }
.rv-tick { position: absolute; top: 22px; width: 1px; height: 5px; margin-left: -.5px; background: var(--rv-tick); }
.rv-mark { position: absolute; top: 28px; transform: translateX(-50%); font-size: .72rem; line-height: 1.15; color: var(--rv-mark); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-mark small { display: block; font-size: .56rem; color: var(--muted); }
.rv-mark-now { font-weight: 700; }
.rv-what { margin: 6px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.rv-legend { margin-top: 12px; }
.rv-scale { display: flex; gap: 8px; align-items: flex-start; }
.rv-unit { font-size: .75rem; color: var(--muted); line-height: 16px; }
.rv-barbox { position: relative; flex: 1; max-width: 420px; padding-bottom: 18px; }
.rv-cbar { display: flex; height: 16px; border: 1px solid var(--muted); }
.rv-cbar span { flex: 1; }
.rv-cticks span { position: absolute; top: 18px; transform: translateX(-50%); font-size: .75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rv-keys { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 4px 0 0; font-size: .8rem; }
.rv-key { display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; border: 1px solid var(--line); background-color: var(--rv-map); }
.rv-key-nd { background-image: repeating-linear-gradient(45deg, var(--rv-nd) 0 1.5px, transparent 1.5px 5px); }
.rv-key-bad { background-image: repeating-linear-gradient(-45deg, var(--rv-bad) 0 2px, transparent 2px 6px); }
.rv-key-wait { background-image: radial-gradient(circle, var(--rv-wait) 1.3px, transparent 1.8px), linear-gradient(var(--rv-wait-fill), var(--rv-wait-fill)); background-size: 6px 6px, auto; }
.rv-keys-note { margin: 4px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.6; }
.rv-notes p { margin: 6px 0 0; font-size: .85rem; line-height: 1.6; }
.rv-warn { color: var(--imc); font-weight: 600; }
.rv-source { margin: 8px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.6; }
.rv-source a { color: var(--accent); }
@media (max-width: 640px) {
  .rv-in { margin-inline: -8px; }
  .rv-foot { gap: 10px; padding: 9px 8px 6px 8px; }
  .rv-bar { padding: 0 10px; }
}
/* 広い画面では、凡例・注記・出典を地図の右に置く */
@media (min-width: 900px) {
  .rv { max-width: none; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .rv > * { grid-column: 1; }
  .rv > .rv-head { grid-column: 1 / -1; }
  .rv > .rv-side { grid-column: 2; grid-row: 2 / span 2; }
  .rv-side .rv-legend { margin-top: 0; }
}

.foot { color: var(--muted); font-size: .8rem; padding: 4px 4px 0; }
.meta { color: var(--muted); font-size: .85rem; padding: 0 4px; }

/* ページ下の METAR/TAF・公式の航空気象情報 */
.extra { margin-top: 36px; }
.extra h2 { font-size: 1.1rem; margin: 0 0 4px; }
.extra > p { margin: 0 0 12px; max-width: 760px; }
.extra a { color: var(--accent); }
#mt-result { margin-top: 12px; max-width: 760px; }

footer { color: var(--muted); font-size: .8rem; padding-top: 24px; padding-bottom: 32px; }
footer p { margin: 4px 0; max-width: 760px; }
footer a, .lead a { color: var(--accent); }

/* 利用上の注意・プライバシーポリシー（policy.html） */
h1 a.home { color: inherit; text-decoration: none; }
.doc { padding: 8px 24px 16px; margin-bottom: 16px; max-width: 760px; scroll-margin-top: 12px; }
.doc h2 { font-size: 1.2rem; margin: 12px 0 4px; }
.doc h3 { font-size: 1rem; margin: 18px 0 4px; }
.doc p, .doc li { line-height: 1.75; }
.doc p { margin: 4px 0; }
.doc ul { padding-left: 1.3em; margin: 4px 0; }
.doc a { color: var(--accent); }

/* 図の拡大 */
dialog { width: min(1100px, 100vw - 16px); max-height: calc(100vh - 16px); padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); }
dialog::backdrop { background: rgb(0 0 0 / .6); }
.viewer-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; }
.viewer-bar p { margin: 0; flex: 1; font-size: .9rem; }
.viewer-bar #v-caption { font-size: 1.05rem; line-height: 1.5; }
#v-caption .cap-when { margin: 0 0 0 4px; font-size: 1.12rem; }
.viewer-bar button { font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.viewer-bar button:disabled { opacity: .4; cursor: default; }
.viewer-img { background: #fff; overflow: auto; max-height: calc(100vh - 140px); text-align: center; }
.viewer-img img { max-width: 100%; max-height: calc(100vh - 140px); cursor: zoom-in; display: inline-block; }
.viewer-img.zoom img { max-width: none; max-height: none; cursor: zoom-out; }
#v-source a { color: var(--accent); }
/* 拡大でも、同じ枠の図を左右の矢印で切り替える（図の縦の真ん中に重ねる。拡大して動かしても矢印は動かない） */
.viewer-stage { position: relative; }
.sl-arrow.v-sl { top: 50%; width: 48px; height: 48px; margin-top: -24px; font-size: 2rem; }
#v-sl-prev { left: 10px; }
#v-sl-next { right: 10px; }
#v-sl-dots { top: auto; bottom: 10px; gap: 8px; }
#v-sl-dots span { width: 10px; height: 10px; }
.sl-arrow[hidden], .sl-dots[hidden] { display: none; }

/* 機能の切り替え（ヘッダーのタブ、tabs.js） */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.tabs a { padding: 6px 16px; border-radius: 999px; font-size: .9rem; font-weight: 700; text-decoration: none; color: var(--hero-muted, var(--muted)); background: rgb(255 255 255 / .55); border: 1px solid transparent; }
.tabs a:hover { background: rgb(255 255 255 / .8); }
.tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-text); box-shadow: 0 2px 6px rgb(22 89 180 / .3); }
@media (prefers-color-scheme: dark) {
  .tabs a { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); }
  .tabs a:hover { background: rgb(255 255 255 / .16); }
}
/* 拡大の下の「前・次」（枠ごとに送る。行き先の高さ 500hPa などを書く） */
#v-prev, #v-next { font-weight: 700; min-width: 5.5em; padding: 6px 12px; }
/* スマホでは出典を下の行に回し、前・次のボタンを左右に並べる */
@media (max-width: 600px) {
  .viewer-bar:has(#v-source) { flex-wrap: wrap; }
  #v-source { order: 3; flex-basis: 100%; }
}

/* 選択した時刻の予報資料（app.js）：入力した時刻の前後の予想図を、時刻ごとのタブで切り替える */
.at-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.at-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 14px; border: 1.5px solid var(--accent); border-radius: 10px; background: var(--card); color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }
.at-tab small { font-weight: 600; font-size: .78rem; color: var(--muted); }
.at-tab.on { background: var(--accent); color: var(--accent-text); }
.at-tab.on small { color: var(--accent-text); opacity: .9; }
.at-figs { margin-top: 4px; }
.figs.figs-wide.at-figs { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.at-figs .fig .ph { height: auto; aspect-ratio: 918 / 736; }

/* 高層天気図の移り変わり（畳んだ欄の中に、矢印で送る予想図を3枚） */
.trend-text { margin-top: 12px; }
.trend-text p.trend-note { margin: 0 0 4px; }
.late-t { margin-left: 8px; }
.trend-text .note { margin: 4px 0 0; }
.figs.figs-wide.trend-figs { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 12px; }
.trend-figs .fig .ph { height: auto; aspect-ratio: 918 / 736; }
.trend-figs .sl-arrow { top: calc(50% - 60px); }
.trend-figs .sl-dots { position: static; margin-top: 8px; }