/* ===== 天気予報サイト  スタイル（19nsj スカウトジャンボリー ルック） =====
 * ブランドトークン（19nsj.scout.or.jp 準拠）
 *   jam-red     #dd2726  … ヘッダーバー
 *   scout-green #115740  … 主色（見出し・ボタン・アクティブタブ・バッジ）
 *   jam-green   #89be44  … アクセント（hover等）
 *   base-text   #333333  … 本文
 * ※ 低通信量維持のため Web フォント(Noto Sans JP / Outfit)は読み込まず、
 *    同等のシステムフォントで再現。厳密一致が必要なら Google Fonts を追加可。
 */
:root{
  --scout-green:#115740; --scout-green-d:#0d4433;
  --jam-green:#89be44; --jam-red:#dd2726; --gold:#eab308;
  --bg:#f2f4ef; --card:#ffffff; --line:#e4e8e0;
  --ink:#333333; --sub:#6f776a;
  --blue:#1f6fd6; --red:#dd2726;
  --shadow:0 2px 6px rgb(17 87 64 / .10);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Noto Sans JP",ui-sans-serif,system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%;
}

/* ---- ヘッダー / タブ ---- */
header{position:sticky; top:0; z-index:10; background:var(--card); box-shadow:0 1px 4px rgb(0 0 0/.10)}
.loc{
  background:var(--jam-red); color:#fff; padding:11px 14px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.place{font-size:20px; font-weight:900; letter-spacing:.02em}
.issued{font-size:12px; opacity:.92}
.tabs{display:flex; gap:6px; padding:8px 12px; background:var(--card)}
.tab{
  flex:1; padding:9px 4px; border:0; border-radius:999px;
  background:#e9ede4; color:var(--scout-green); font-size:14px; font-weight:700;
  cursor:pointer; transition:background .15s,color .15s;
}
.tab:hover{background:#dde6d2}
.tab.active{background:var(--scout-green); color:#fff}

main{padding:12px; max-width:900px; margin:0 auto}
.view{display:none}
.view.active{display:block}
.loading{text-align:center; color:var(--sub); padding:40px}
.err{color:#b71c1c; background:var(--card); border-radius:12px; padding:16px; line-height:1.6; box-shadow:var(--shadow)}

/* 横スクロール（狭い画面で崩さない） */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---- 共通：セル/アイコン ---- */
/* 埋め込みモード：地点名の赤バーを隠す（外側の見出しがタイトル） */
html.embed .loc{display:none}
html.embed body{background:#ffffff}
html.embed .tabs{padding-top:12px}

.wpic{display:contents}
.wicon{width:52px; height:52px; object-fit:contain; display:block; margin:0 auto}
.imgerr{visibility:hidden}
.warrow{width:26px; height:26px; display:block; margin:0 auto}
.cell{display:flex; flex-direction:column; align-items:center; justify-content:flex-start}
.dash{color:var(--sub)}

/* =================== 時系列 =================== */
.hourly{background:var(--card); border-radius:12px; padding:10px 6px; display:block; width:max-content; margin:0 auto; box-shadow:var(--shadow)}
.row{display:grid; align-items:center}
.dayhead .dcell{position:relative; height:24px}
.dlabel{
  position:absolute; left:4px; white-space:nowrap; font-size:12px; font-weight:700;
  background:var(--scout-green); border-radius:999px; padding:2px 10px; color:#fff;
}
.icell{padding:2px 0}
.chart-wrap{overflow:visible; margin:2px 0}
.chart{height:200px; display:block}
.chart-wrap.week .chart{height:220px}
.pt-label{font-size:26px; font-weight:700}
.timerow .tcell{font-size:15px; font-weight:700; color:var(--ink); padding-top:4px}
.tcell.daysep{position:relative}
.tcell.daysep::before{
  content:""; position:absolute; left:-1px; top:22px; height:262px; width:2px;
  background:#dbe2d4;
}
.windrow{margin-top:6px}
.wcell{padding:4px 0}
.wspd{font-size:12px; color:var(--sub); margin-top:2px}
.axis{display:flex; justify-content:space-between; font-size:11px; color:var(--sub); padding:8px 6px 2px}

/* =================== 週間 =================== */
.legend{display:flex; gap:14px; margin-bottom:8px; font-size:12px; font-weight:700}
.lg::before{content:""; display:inline-block; width:14px; height:4px; border-radius:2px; margin-right:5px; vertical-align:middle}
.lg.hi{color:var(--red)} .lg.hi::before{background:var(--red)}
.lg.lo{color:var(--blue)} .lg.lo::before{background:var(--blue)}
.weekly{background:var(--card); border-radius:12px; padding:12px 8px; display:block; width:max-content; margin:0 auto; box-shadow:var(--shadow)}
.weekly .icell .wlabel{font-size:11px; color:var(--sub); margin-top:2px; text-align:center; line-height:1.2}
.daterow{margin-bottom:2px}
.daterow .dtcell{padding-bottom:6px}

/* 時系列（区間表示）：時刻は境界、天気/風はその「間」に配置。画面幅に合わせる */
.hourly2{background:var(--card); border-radius:12px; padding:10px 28px 14px; box-shadow:var(--shadow)}
.hbar{position:relative}
.hday-row{height:24px}
.htime-row{height:22px; margin-bottom:2px}
.hday{position:absolute; top:0; white-space:nowrap; font-size:12px; font-weight:700;
  background:var(--scout-green); border-radius:999px; padding:2px 10px; color:#fff}
.htime{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap;
  font-size:15px; font-weight:700; color:var(--ink)}
.hbody{position:relative}
.hgrid{display:grid; align-items:center}
.hgrid .icell{padding:2px 1px}
.hourly2 .wicon{width:100%; max-width:46px; height:auto}
.hsep{position:absolute; top:0; bottom:0; width:2px; background:#dbe2d4; transform:translateX(-1px); z-index:1}
.hourly2 .fchart-wrap{height:190px}
.hourly2 .wcell{padding:4px 0}

/* 16日間予報：画面幅に合わせて全16日を収める（横スクロールなし） */
.sixteen{background:var(--card); border-radius:12px; padding:12px 4px; box-shadow:var(--shadow)}
.sixteen .cell{min-width:0}
.sixteen .icell{padding:3px 1px}
.sixteen .wicon{width:100%; max-width:42px; height:auto}
.sixteen .dnum{font-size:12px}
.sixteen .ddow{font-size:9px}
.sixteen .fchart-wrap{height:220px}  /* 予想範囲の補助ラベル用に高さ確保 */
.fchart-wrap{position:relative; width:100%; height:200px; margin-top:2px}
.fchart{width:100%; height:100%; display:block; overflow:visible}
.fchart-ov{position:absolute; inset:0; pointer-events:none}
.fdot{position:absolute; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%)}
.flabel{position:absolute; transform:translate(-50%,-50%); font-size:14px; font-weight:700; white-space:nowrap}
.fsub{position:absolute; transform:translate(-50%,-50%); font-size:10px; font-weight:700; white-space:nowrap; opacity:.8}

/* 16日間予報：11日先以降の不確実性表示（信頼度・気温の予想範囲） */
.confrow{margin:2px 0 4px}
.ccell{min-height:18px}
.conf{display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:18px; padding:0 4px; border-radius:4px;
  font-size:11px; font-weight:700; line-height:1; color:#fff; background:#9aa6b3}
.conf-A{background:#2e9e5b} .conf-B{background:#6bb52f}
.conf-C{background:#e0a51b} .conf-D{background:#e2761b} .conf-E{background:#d64b3f}
.uncnote{max-width:900px; margin:10px auto 0; padding:0 4px;
  font-size:11px; line-height:1.7; color:var(--sub)}
/* 予想範囲の表記：広い画面は「下〜上」、狭い画面は「±幅」 */
.rng-pm{display:none}
@media (max-width:600px){
  .flabel{font-size:11px}
  .sixteen .dnum{font-size:11px}
  .sixteen .ddow{font-size:8px}
  .fsub{font-size:9px}
  .rng-full{display:none}
  .rng-pm{display:inline}
  .conf{min-width:17px; height:16px; padding:0 2px; font-size:10px}
}
.dnum{font-size:16px; font-weight:700}
.ddow{font-size:12px; color:var(--sub)}
.dtcell.blue .dnum,.dtcell.blue .ddow{color:var(--blue)}
.dtcell.red .dnum,.dtcell.red .ddow{color:var(--red)}

/* =================== 各地の表 =================== */
.citytable{border-collapse:collapse; width:100%; background:var(--card); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.citytable th,.citytable td{border:1px solid var(--line); text-align:center; padding:6px}
.citytable thead th{background:#eaf0e5; font-size:13px; position:sticky; top:0; color:var(--scout-green)}
.citytable thead .dnum{display:block; font-weight:700; font-size:14px}
.citytable thead .ddow{display:block; font-size:11px; color:var(--sub)}
.citytable th.corner{background:#eaf0e5}
.citytable th.cityname{background:#f3f6f0; text-align:left; font-weight:700; white-space:nowrap; padding:6px 10px; font-size:14px; color:var(--scout-green)}
.citytable td .wicon{width:46px; height:46px}
.citytable th.blue .dnum,.citytable th.blue .ddow{color:var(--blue)}
.citytable th.red .dnum,.citytable th.red .ddow{color:var(--red)}

/* =================== 天気図 =================== */
.mapwrap{background:var(--card); border-radius:12px; padding:8px; text-align:center; box-shadow:var(--shadow)}
.mapwrap img{max-width:100%; height:auto; border-radius:8px; display:block}
.mapcap{font-size:12px; color:var(--sub); margin:8px 0 4px}
.mapempty{background:var(--card); border-radius:12px; padding:24px; line-height:1.7; color:var(--ink); box-shadow:var(--shadow)}
.mapempty code{background:#eaf0e5; padding:2px 6px; border-radius:5px; font-size:13px; color:var(--scout-green-d)}

footer{max-width:900px; margin:0 auto; padding:14px; color:var(--sub); line-height:1.6}
footer strong{color:var(--scout-green)}

/* =================== 提供クレジット =================== */
.credit{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  max-width:900px; margin:0 auto; padding:18px 14px 28px;
  color:var(--sub); font-size:12px; text-align:center;
}
.credit-issued{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px}
.credit-logo{width:200px; max-width:70%; height:auto; display:block}

@media (max-width:480px){
  .place{font-size:18px}
  .pt-label{font-size:22px}
}