/* =================================================================
   キオスクダッシュボード — style.css
   - 100dvh 固定の1画面設計（ページ全体はスクロールしない）
   - 縦比率: ヘッダー12% / メイン58% / タイムライン22% / PRフッター8%
   - インテリア調配色（ダーク: チャコール×真鍮 / ライト: リネン×ウォルナット）
   - 古いブラウザ向けに、新しい値の前へフォールバック値を記述
   ================================================================= */

/* ---------- テーマ変数 ----------
   light（既定。html の data-theme で指定）/ dark / auto（端末の外観設定に連動）
   :root の基本値はダーク。ライトは data-theme="light" で上書きする
   ライトの値を変える場合は light と auto の2か所を揃えること
   --bg を変えたら js/theme.js の BAR_COLORS も合わせること */
:root {
  --bg: #1a1714;
  --bg-grad: radial-gradient(120% 90% at 50% 0%, #24201b 0%, #1a1714 60%);
  --surface: #24201c;
  --surface-2: #2e2924;
  --surface-3: #39332c;
  --text: #ede6dc;
  --text-sub: #a39a8e;
  --text-faint: #786f64;
  --border: #3a342d;
  --accent: #c9a27a;          /* 真鍮 */
  --accent-strong: #dcb88f;
  --accent-ink: #1a1714;
  --aff-deep: #a77d55;
  --aff-glow: rgba(201, 162, 122, 0.28);
  --aff-chip: rgba(255, 255, 255, 0.32);
  --aff-tint: rgba(201, 162, 122, 0.12);
  --ok: #8fb59a;              /* セージ */
  --warn: #e0a95f;
  --danger: #e07a6a;
  --info: #8fa9c4;            /* くすみブルー */
  --ok-bg: rgba(143, 181, 154, 0.14);
  --warn-bg: rgba(224, 169, 95, 0.15);
  --danger-bg: rgba(224, 122, 106, 0.15);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px rgba(0, 0, 0, 0.25);
  --overlay: rgba(10, 8, 6, 0.6);
  --surface-a: rgba(36, 32, 28, 0.86);   /* 背景が少し透けるカード面 */
  --wx-opacity: 1;
  --wx-cloud: rgba(205, 210, 220, 0.07);
  --wx-rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M12 4l-2 16M48 28l-2 16M84 8l-2 16M108 52l-2 16M30 64l-2 16M66 86l-2 16M96 98l-2 16M6 96l-2 16M58 48l-2 14' stroke='rgba(190,210,240,0.55)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wx-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='rgba(255,255,255,0.85)'%3E%3Ccircle cx='20' cy='15' r='2'/%3E%3Ccircle cx='70' cy='40' r='1.5'/%3E%3Ccircle cx='120' cy='20' r='2.5'/%3E%3Ccircle cx='140' cy='90' r='1.6'/%3E%3Ccircle cx='40' cy='100' r='2.2'/%3E%3Ccircle cx='95' cy='130' r='1.4'/%3E%3Ccircle cx='10' cy='150' r='1.8'/%3E%3Ccircle cx='150' cy='150' r='2'/%3E%3C/svg%3E");
  --wx-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='rgba(255,250,235,0.8)'%3E%3Ccircle cx='15' cy='20' r='0.8'/%3E%3Ccircle cx='80' cy='60' r='1.1'/%3E%3Ccircle cx='150' cy='30' r='0.7'/%3E%3Ccircle cx='200' cy='110' r='1'/%3E%3Ccircle cx='40' cy='140' r='0.9'/%3E%3Ccircle cx='120' cy='170' r='1.2'/%3E%3Ccircle cx='180' cy='200' r='0.7'/%3E%3Ccircle cx='60' cy='210' r='0.8'/%3E%3C/svg%3E");

  --gap: 10px;
  --gap: clamp(6px, 1.1vmin, 14px);
  --radius: 16px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo", sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f3efe8;
  --bg-grad: radial-gradient(120% 90% at 50% 0%, #faf7f2 0%, #f3efe8 60%);
  --surface: #fbf9f5;
  --surface-2: #ece6dc;
  --surface-3: #e2dace;
  --text: #2f2a24;
  --text-sub: #7a7065;
  --text-faint: #a59b8e;
  --border: #e2dace;
  --accent: #9c6b3f;          /* ウォルナット */
  --accent-strong: #84572f;
  --accent-ink: #fbf9f5;
  --aff-deep: #6f4824;
  --aff-glow: rgba(156, 107, 63, 0.25);
  --aff-chip: rgba(255, 255, 255, 0.28);
  --aff-tint: rgba(156, 107, 63, 0.09);
  --ok: #5d8a68;
  --warn: #b5762a;
  --danger: #b5524a;
  --info: #5b7a99;
  --ok-bg: rgba(93, 138, 104, 0.12);
  --warn-bg: rgba(181, 118, 42, 0.12);
  --danger-bg: rgba(181, 82, 74, 0.12);
  --shadow: 0 1px 2px rgba(60, 45, 30, 0.06), 0 6px 16px rgba(60, 45, 30, 0.07);
  --overlay: rgba(47, 42, 36, 0.4);
  --surface-a: rgba(251, 249, 245, 0.84);
  --wx-opacity: 0.85;
  --wx-cloud: rgba(110, 115, 125, 0.08);
  --wx-rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M12 4l-2 16M48 28l-2 16M84 8l-2 16M108 52l-2 16M30 64l-2 16M66 86l-2 16M96 98l-2 16M6 96l-2 16M58 48l-2 14' stroke='rgba(70,95,130,0.45)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wx-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='rgba(130,150,185,0.7)'%3E%3Ccircle cx='20' cy='15' r='2'/%3E%3Ccircle cx='70' cy='40' r='1.5'/%3E%3Ccircle cx='120' cy='20' r='2.5'/%3E%3Ccircle cx='140' cy='90' r='1.6'/%3E%3Ccircle cx='40' cy='100' r='2.2'/%3E%3Ccircle cx='95' cy='130' r='1.4'/%3E%3Ccircle cx='10' cy='150' r='1.8'/%3E%3Ccircle cx='150' cy='150' r='2'/%3E%3C/svg%3E");
  --wx-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='rgba(110,100,150,0.55)'%3E%3Ccircle cx='15' cy='20' r='0.8'/%3E%3Ccircle cx='80' cy='60' r='1.1'/%3E%3Ccircle cx='150' cy='30' r='0.7'/%3E%3Ccircle cx='200' cy='110' r='1'/%3E%3Ccircle cx='40' cy='140' r='0.9'/%3E%3Ccircle cx='120' cy='170' r='1.2'/%3E%3Ccircle cx='180' cy='200' r='0.7'/%3E%3Ccircle cx='60' cy='210' r='0.8'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #f3efe8;
    --bg-grad: radial-gradient(120% 90% at 50% 0%, #faf7f2 0%, #f3efe8 60%);
    --surface: #fbf9f5;
    --surface-2: #ece6dc;
    --surface-3: #e2dace;
    --text: #2f2a24;
    --text-sub: #7a7065;
    --text-faint: #a59b8e;
    --border: #e2dace;
    --accent: #9c6b3f;
    --accent-strong: #84572f;
    --accent-ink: #fbf9f5;
    --aff-deep: #6f4824;
    --aff-glow: rgba(156, 107, 63, 0.25);
    --aff-chip: rgba(255, 255, 255, 0.28);
    --aff-tint: rgba(156, 107, 63, 0.09);
    --ok: #5d8a68;
    --warn: #b5762a;
    --danger: #b5524a;
    --info: #5b7a99;
    --ok-bg: rgba(93, 138, 104, 0.12);
    --warn-bg: rgba(181, 118, 42, 0.12);
    --danger-bg: rgba(181, 82, 74, 0.12);
    --shadow: 0 1px 2px rgba(60, 45, 30, 0.06), 0 6px 16px rgba(60, 45, 30, 0.07);
    --overlay: rgba(47, 42, 36, 0.4);
    --surface-a: rgba(251, 249, 245, 0.84);
    --wx-opacity: 0.85;
    --wx-cloud: rgba(110, 115, 125, 0.08);
    --wx-rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M12 4l-2 16M48 28l-2 16M84 8l-2 16M108 52l-2 16M30 64l-2 16M66 86l-2 16M96 98l-2 16M6 96l-2 16M58 48l-2 14' stroke='rgba(70,95,130,0.45)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --wx-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='rgba(130,150,185,0.7)'%3E%3Ccircle cx='20' cy='15' r='2'/%3E%3Ccircle cx='70' cy='40' r='1.5'/%3E%3Ccircle cx='120' cy='20' r='2.5'/%3E%3Ccircle cx='140' cy='90' r='1.6'/%3E%3Ccircle cx='40' cy='100' r='2.2'/%3E%3Ccircle cx='95' cy='130' r='1.4'/%3E%3Ccircle cx='10' cy='150' r='1.8'/%3E%3Ccircle cx='150' cy='150' r='2'/%3E%3C/svg%3E");
    --wx-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='rgba(110,100,150,0.55)'%3E%3Ccircle cx='15' cy='20' r='0.8'/%3E%3Ccircle cx='80' cy='60' r='1.1'/%3E%3Ccircle cx='150' cy='30' r='0.7'/%3E%3Ccircle cx='200' cy='110' r='1'/%3E%3Ccircle cx='40' cy='140' r='0.9'/%3E%3Ccircle cx='120' cy='170' r='1.2'/%3E%3Ccircle cx='180' cy='200' r='0.7'/%3E%3Ccircle cx='60' cy='210' r='0.8'/%3E%3C/svg%3E");
    color-scheme: light;
  }
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;               /* キオスク用途: ページ全体はスクロールさせない */
  overscroll-behavior: none;      /* Android のプルリフレッシュ・iOS のバウンス抑止 */
}

body {
  background: var(--bg);
  background: var(--bg-grad), var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* 画面サイズに比例（820px高の iPad で約16px） */
  font-size: 15px;
  font-size: clamp(12px, calc(1.15vmin + 0.55vmax), 24px);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;     /* ダブルタップズーム抑止 */
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- アプリ全体: 4分割グリッド ---------- */
.app {
  display: grid;
  grid-template-rows: 12fr 58fr 22fr 8fr;
  grid-template-columns: 100%;
  grid-gap: var(--gap);
  gap: var(--gap);
  height: 100vh;                       /* 最古のフォールバック */
  height: var(--app-height, 100vh);    /* JS 補正（dvh 非対応時） */
  height: 100dvh;                      /* 対応ブラウザ */
  padding: var(--gap);
  padding:
    max(var(--gap), env(safe-area-inset-top))
    max(var(--gap), env(safe-area-inset-right))
    max(var(--gap), env(safe-area-inset-bottom))
    max(var(--gap), env(safe-area-inset-left));
  overflow: hidden;
  position: relative;
  z-index: 1;                          /* 天気背景(.wx-bg)より手前 */
}
.app > * { min-height: 0; min-width: 0; }

/* ---------- 共通部品 ---------- */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0.7em 0.95em;
  background: var(--surface);
  background: var(--surface-a);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.35em;
}
.card-head .card-title { margin-bottom: 0; }
.card-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.35em;
  font-size: 0.78em;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.card-icon { font-size: 1.15em; letter-spacing: 0; }
.card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* 欄内スクロール（傘・ゴミ出し）: 収まらない時は欄の中だけスクロールし、先頭は必ず見える */
.card-body.card-body--scroll {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* 縦中央寄せは先頭・末尾の auto 余白で行う。justify-content: center だと
   はみ出た時に上下へ均等に切れ、先頭（「今日」など）の上側が見えなくなるため使わない */
.card-body--scroll > :first-child { margin-top: auto; }
.card-body--scroll > :last-child { margin-bottom: auto; }
.card-body--scroll.has-more {      /* 下に続きがある時だけ下端をぼかして示す（Util.markMore） */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.2em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.2em), transparent);
}
.placeholder { color: var(--text-faint); }

/* モジュールでエラー発生時（データは前回値/モックを表示し続ける） */
.has-error .card-title::after {
  content: "⚠";
  color: var(--warn);
}

.pr-badge {
  display: inline-block;
  padding: 0 0.45em;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--text-sub);
}
.pr-badge--sm { font-size: 0.65em; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  min-width: 34px;
  min-height: 34px;                /* タップしやすいサイズ */
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.9em;
  line-height: 1;
}
.icon-btn:active, .text-btn:active, .primary-btn:active, .nav-btn:active { opacity: 0.6; }
.btn-refresh { font-size: 1.15em; color: var(--accent); }
.is-refreshing .btn-refresh { opacity: 0.5; pointer-events: none; }
.is-refreshing .btn-refresh { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.text-btn {
  padding: 0.3em 0.75em;
  min-height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75em;
  color: var(--accent);
  white-space: nowrap;
}

.primary-btn {
  padding: 0.6em 1.2em;
  min-height: 44px;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--accent-ink);
  font-weight: 700;
}
.primary-btn:disabled { opacity: 0.5; cursor: default; }

/* =================================================================
   1. ヘッダー
   ================================================================= */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1em;
  padding: 0 0.4em;
}

.header-left { min-width: 0; line-height: 1.3; }
.greeting {
  font-size: 1.25em;
  font-size: clamp(14px, 2.4vh, 34px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.greeting-sub {
  font-size: 0.85em;
  font-size: clamp(11px, 1.7vh, 24px);
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  max-width: 100%;
  margin-top: 0.1em;
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.75em;
  font-size: clamp(10px, 1.45vh, 20px);
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-link #location-name { border-bottom: 1px dashed var(--text-faint); }

.header-meta {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-width: 0;
  margin-top: 0.1em;
  white-space: nowrap;
}
.header-meta .location-link { margin-top: 0; flex: 0 1 auto; }
.wx-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-width: 0;
  font-size: 0.75em;
  font-size: clamp(10px, 1.45vh, 20px);
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-status strong { color: var(--text); font-variant-numeric: tabular-nums; }
.wx-badge {
  padding: 0 0.45em;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 700;
}
.wx-badge.is-mock { background: var(--warn-bg); color: var(--warn); }
.wx-badge.is-stale { background: var(--surface-2); color: var(--text-sub); }

.header-center { text-align: center; line-height: 1; }
.clock {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clock-time {
  font-size: 3rem;
  font-size: clamp(28px, 6.6vh, 120px);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.clock-sec {
  margin-left: 0.2em;
  font-size: 1rem;
  font-size: clamp(12px, 2.3vh, 40px);
  color: var(--accent);
}
.clock-date {
  margin-top: 0.3em;
  font-size: 0.95em;
  font-size: clamp(11px, 1.9vh, 30px);
  color: var(--text-sub);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.35em;
  min-width: 0;
  height: 100%;
  padding: 0.1em 0;
}
.pr-notice {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.62em;
  color: var(--text-faint);
  white-space: nowrap;
}
.pr-notice .pr-badge { font-size: 0.9em; color: var(--text-faint); }

.status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45em;
  min-width: 0;
  font-size: 0.78em;
  color: var(--text-sub);
  white-space: nowrap;
}
.status-updated { font-size: 0.85em; color: var(--text-faint); }
.status-chip { font-size: 0.9em; }
.status-storage { color: var(--warn); }

/* オンライン時は小さな点のみ、オフライン時は文字で強調 */
.status-net { display: inline-flex; align-items: center; gap: 0.3em; }
.status-net::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
}
.status-net.is-online { font-size: 0; }
.status-net.is-online::before { background: var(--ok); }
.status-net.is-offline { color: var(--danger); font-weight: 700; }
.status-net.is-offline::before { background: var(--danger); }

/* バッテリー（Battery API 対応環境のみ表示） */
.battery { display: inline-flex; align-items: center; gap: 0.35em; font-variant-numeric: tabular-nums; }
.battery-icon {
  position: relative;
  width: 1.9em;
  height: 0.95em;
  padding: 1.5px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.battery-icon::after {               /* 端子 */
  content: "";
  position: absolute;
  top: 25%;
  right: -4px;
  width: 2.5px;
  height: 50%;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}
.battery-level {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 1px;
  background: var(--ok);
  transition: width 0.4s;
}
.battery.is-low { color: var(--danger); font-weight: 700; }
.battery.is-low .battery-level { background: var(--danger); }
/* 充電中: 本体に稲妻を重ねる */
.battery.is-charging .battery-icon::before {
  content: "⚡";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-size: 0.7em;
  line-height: 1;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
.battery.is-charging .battery-text { color: var(--ok); }
/* フォールバック（iOS 等）: 電源プラグのアイコン */
.battery-plug { display: none; font-size: 0.95em; }
.battery.is-fallback .battery-icon { display: none; }
.battery.is-fallback .battery-plug { display: inline; }
.battery.is-fallback .battery-text { font-size: 0.9em; color: var(--text-faint); }

/* =================================================================
   2. メインコンテンツ（2カラム 55:45）
   ================================================================= */
.main {
  display: grid;
  grid-template-columns: 55fr 45fr;
  grid-gap: var(--gap);
  gap: var(--gap);
}
.col {
  display: grid;
  grid-gap: var(--gap);
  gap: var(--gap);
  min-height: 0;
  min-width: 0;
}
.col-left  { grid-template-rows: 2fr 3fr; }
.col-right { grid-template-rows: 30fr 31fr 39fr; }
@media (max-height: 640px) {
  .col-right { grid-template-rows: 34fr 27fr 39fr; }  /* 低い画面はゴミ出しを優先（アラートは収まる件数に自動調整） */
}   /* ゴミ出し / 季節アラート（3件）/ ニュース */

/* --- 傘（data-level: none / maybe / must / unknown） --- */
.card--umbrella {
  --u-color: var(--ok);
  --u-bg: var(--ok-bg);
  position: relative;
}
.card--umbrella[data-level="maybe"] { --u-color: var(--warn); --u-bg: var(--warn-bg); }
.card--umbrella[data-level="must"] { --u-color: var(--info); --u-bg: rgba(110, 145, 185, 0.18); }
.card--umbrella[data-level="unknown"] { --u-color: var(--text-sub); --u-bg: var(--surface-2); }
/* 左端のアクセント線 */
.card--umbrella::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--u-color);
  opacity: 0.85;
}
.card--umbrella[data-level="must"] {
  background: linear-gradient(135deg, rgba(110, 145, 185, 0.14), transparent 60%), var(--surface-a);
}
.umbrella {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}
.umbrella-main {
  display: flex;
  align-items: center;
  gap: 0.8em;
  min-width: 0;
}
.umbrella-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2em;
  font-size: clamp(24px, 5vh, 76px);
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--u-bg);
  transition: background-color 0.3s;
}
.umbrella-text { min-width: 0; }
.umbrella-verdict {
  font-size: 1.45em;
  font-size: clamp(17px, 3.2vh, 50px);
  font-weight: 700;
  line-height: 1.4;                /* 1.2 では大きな和文の上下が欠ける */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umbrella-verdict strong { color: var(--u-color); }
.umbrella-sub {                  /* 狭い画面では … で切らずに折り返す */
  margin-top: 0.15em;
  font-size: 0.85em;
  color: var(--text-sub);
}

/* 時間帯ごとの降水確率バー */
.pop-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.5em;
  min-width: 0;
}
.pop-blocks.is-2col .pop-block { flex-basis: calc(50% - 0.5em); }  /* 1列に入らない時は 2列×2段（Umbrella.fit） */
.pop-block {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
  padding: 0.15em 0.5em;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.68em;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pop-bar {
  height: 4px;
  min-width: 12px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
.pop-fill { display: block; height: 100%; background: var(--ok); }
.pop-block.lv-maybe .pop-fill { background: var(--warn); }
.pop-block.lv-must .pop-fill { background: var(--info); }
.pop-block.is-peak { box-shadow: inset 0 0 0 1px var(--u-color); color: var(--text); font-weight: 700; }
.pop-val { text-align: right; }

.umbrella-detail {               /* 項目ごとの札。幅が足りない時は札単位で折り返す（… で切らない） */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 0.4em;
  min-width: 0;
  font-size: 0.8em;
  color: var(--text-sub);
}
.ud-item {
  max-width: 100%;
  padding: 0.05em 0.55em;
  border-radius: 999px;
  background: var(--surface-2);   /* 1行に入る札はそのまま、行幅より長い札だけ札の中で折り返す */
}
.umbrella-detail .sep { display: none; }   /* 画面では札の間隔で区切る（文字列としての ｜ は残す） */
.umbrella-basis {
  min-width: 0;
  font-size: 0.64em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umbrella-basis:empty, .umbrella-detail:empty { display: none; }
.t-high { color: var(--danger); font-weight: 700; }
.t-low { color: var(--info); font-weight: 700; }

@media (max-height: 640px) {
  .umbrella { gap: 0.3em; }
}
/* 詰め表示（Umbrella.fit が収まらない時だけ付ける） */
.umbrella.is-compact { gap: 0.25em; }
.umbrella.is-compact .umbrella-main { gap: 0.6em; }
.umbrella.is-compact .umbrella-icon { font-size: clamp(20px, 3.4vh, 52px); }
.umbrella.is-compact .umbrella-verdict { font-size: clamp(15px, 2.6vh, 40px); line-height: 1.3; }
.umbrella.is-compact .umbrella-sub { margin-top: 0; }
.umbrella.is-compact .pop-block { padding-top: 0.05em; padding-bottom: 0.05em; }

/* --- 服装 + アフィリエイト --- */
.clothing {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6em;
}
.clothing-main {
  display: flex;
  align-items: flex-start;
  gap: 0.9em;
  min-height: 0;
  overflow: hidden;
}
.clothing-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  font-size: 2.4em;
  font-size: clamp(26px, 5.6vh, 84px);
  line-height: 1;
  border-radius: 50%;
  background: var(--surface-2);
}
.clothing-text { min-width: 0; }
.clothing-headline {
  font-size: 1.2em;
  font-size: clamp(15px, 2.6vh, 40px);
  font-size: clamp(15px, min(2.6vh, 3.4vw), 40px);   /* 狭い縦長画面では幅に合わせる */
  font-weight: 700;
  line-height: 1.35;
}
.clothing-detail {
  margin-top: 0.35em;
  font-size: 0.86em;
  color: var(--text-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clothing-basis {
  margin-top: 0.3em;
  font-size: 0.68em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clothing-basis:empty, .clothing-detail:empty { display: none; }

/* 楽天アフィリエイト誘導枠 */
.affiliate {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  padding-top: 0.55em;
  border-top: 1px dashed var(--border);
}
.aff-links {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
  overflow: hidden;
}
.aff-btn {
  position: relative;              /* コード内のリンクをボタン全体に広げる基準 */
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;                /* タップしやすいサイズ */
  padding: 0.25em 0.4em 0.25em 0.3em;
  border-radius: 999px;
  font-size: 0.86em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;                /* 光の演出をボタン内に収める */
  transition: transform 0.15s, box-shadow 0.15s;
}
.aff-btn--primary {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 55%, var(--aff-deep) 100%);
  color: var(--accent-ink);
  box-shadow: 0 4px 14px var(--aff-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* ときどき光が流れる（目を引くが控えめに。動きを減らす設定では停止） */
.aff-btn--primary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  animation: aff-shine 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aff-shine {
  0%, 70% { left: -60%; }
  100% { left: 130%; }
}
.aff-btn--sub {
  flex: 0 1 auto;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  color: var(--text);
}
.aff-btn--sub .aff-code { overflow: hidden; text-overflow: ellipsis; }
/* アイコンの丸いバッジ */
.aff-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--aff-chip);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  font-size: 1.05em;
  line-height: 1;
}
.aff-btn--sub .aff-icon { background: var(--surface-3); box-shadow: none; }
/* 商品名の上に添える一言 */
.aff-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.2; }
.aff-tag {
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aff-btn--sub .aff-tag { color: var(--accent); opacity: 1; }
.aff-body .aff-code { line-height: 1.4; }   /* 文字の上下が欠けないように */
/* 貼り付けたコード内のリンク（CSS で見た目だけ合わせる。コード自体は変更しない） */
.aff-code { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aff-code a { color: inherit; text-decoration: none; }
.aff-code a::after {               /* ボタン全体をタップ領域に */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
}
.aff-code img[width="1"] { position: absolute; width: 1px; height: 1px; }  /* 計測用の1px画像でレイアウトを崩さない */
.aff-btn:active { transform: scale(0.97); opacity: 0.85; }
/* 丸い矢印 */
.aff-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-left: 0.15em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1.05em;
  line-height: 1;
}
.aff-btn--sub .aff-arrow { background: var(--surface-3); color: var(--accent); }
@media (min-height: 760px) and (min-width: 900px) {
  .aff-btn--primary { min-height: 52px; font-size: 0.95em; padding-right: 0.5em; }   /* 余裕のある画面では大きめに */
}
@media (max-height: 640px) {
  .aff-tag { display: none; }     /* 低い画面では一言を省いて商品名を優先 */
}
.aff-note { flex: 0 0 auto; margin-left: auto; font-size: 0.68em; color: var(--text-faint); }

/* 低い画面では補足を1行に */
@media (max-height: 640px) {
  .clothing-detail { -webkit-line-clamp: 1; }
  .aff-btn { min-height: 38px; }
}

/* --- ゴミ出し --- */
.card-body.garbage {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 3px;                    /* 「今日」の外枠の光（box-shadow 3px）が切れないように */
}
.garbage-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
}
.garbage-when {
  flex: 0 0 auto;
  min-width: 2.8em;
  padding: 0.1em 0.5em;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.75em;
  font-weight: 700;
  text-align: center;
  color: var(--text-sub);
}
.garbage-row.is-today .garbage-when { background: var(--accent); color: var(--accent-ink); }
.garbage-items { display: flex; flex-wrap: wrap; gap: 0.35em; min-width: 0; }  /* 収まらない時は隠さず折り返す */
.garbage-none { font-size: 0.85em; color: var(--text-faint); }
.garbage-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  border: 1px solid var(--chip, var(--border));
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
}
.garbage-row.is-today .garbage-chip { font-size: 1em; }
.garbage-chip.is-compact,
.garbage-row.is-today .garbage-chip.is-compact { font-size: 0.8em; padding: 0.1em 0.45em; gap: 0.15em; }
.garbage-empty { font-size: 0.85em; color: var(--text-sub); }
.garbage-empty strong { color: var(--accent); }
.garbage-row.is-today.has-items .garbage-when { box-shadow: 0 0 0 3px rgba(201, 162, 122, 0.25); }
.garbage-row.is-next .garbage-when { background: transparent; border: 1px dashed var(--border); }
.garbage-row.is-next .garbage-chip { font-size: 0.78em; opacity: 0.85; }
.garbage-note { font-size: 0.66em; color: var(--warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.garbage > * { flex-shrink: 0; }   /* 行を押し縮めて文字が欠けるのを防ぐ */
@media (max-height: 640px) {
  .garbage-note { display: none; } /* 低い画面では見出しの「例」バッジで示す */
}
.card--garbage.is-example .garbage-chip { border-style: dashed; }
.example-badge {
  margin-left: 0.4em;
  padding: 0 0.45em;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.85em;
  letter-spacing: 0;
}

/* 分類ごとの色（インテリア調の落ち着いたトーン） */
.g-burnable    { --chip: #d98b6c; }
.g-nonburnable { --chip: #8fa9c4; }
.g-plastic     { --chip: #d6b35c; }
.g-recyclable  { --chip: #8fb59a; }
.g-bottles     { --chip: #6fb3b0; }
.g-paper       { --chip: #b59575; }

/* --- 季節の警戒アラート（lv-low / lv-mid / lv-high） --- */
.card--alert .card-head { margin-bottom: 0.25em; }
.alert-basis {
  min-width: 0;
  font-size: 0.62em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}
.alert-basis::after { content: "（公式発表ではありません）"; }
.alert-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3em;
}
.alert-row {
  --lv: var(--ok);
  --lv-bg: var(--ok-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  padding: 0.2em 0.6em 0.2em 0.5em;
  border-radius: 8px;
  background: var(--lv-bg);
  font-size: 0.82em;
  line-height: 1.45;
  white-space: nowrap;
}
.alert-row.lv-mid { --lv: var(--warn); --lv-bg: var(--warn-bg); }
.alert-row.lv-high { --lv: var(--danger); --lv-bg: var(--danger-bg); }
.alert-row::before {                 /* 注意度の点 */
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lv);
}
.alert-row.lv-high::before { box-shadow: 0 0 0 3px var(--danger-bg); }
.alert-icon { flex: 0 0 auto; }
.alert-name { flex: 0 0 auto; font-weight: 700; }
.alert-state { flex: 0 0 auto; font-weight: 700; color: var(--lv); }
.alert-text {
  min-width: 0;
  color: var(--text-sub);
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-text::before { content: "— "; color: var(--text-faint); }


/* --- 主要ニュース（ダイレクトリンク） ---
   リンク集: 横に3枚並べるタイル（どの画面でも3件見える）
   見出し表示（.is-headlines）・縦向き画面: 縦のリスト（収まらない分は末尾から隠す） */
.card--news .card-head { margin-bottom: 0.3em; }
.news-note { font-size: 0.62em; color: var(--text-faint); white-space: nowrap; }
.news-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 0.45em;
}
.news-list > li { min-width: 0; }
.news-link {
  position: relative;
  display: flex;
  flex-direction: column;          /* タイル: アイコン → サイト名 → 説明（名前にタイル幅を全部使う） */
  justify-content: center;
  gap: 0.25em;
  min-height: 44px;                /* 指で押しやすいタップ領域 */
  height: 100%;
  padding: 0.45em 0.6em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: background-color 0.15s, transform 0.1s;
}
.news-link:active { transform: scale(0.97); background: var(--surface-3); }
.news-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 8px;
  background: var(--surface-a);
}
.news-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.news-name {
  font-size: 0.84em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-desc {
  font-size: 0.68em;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-ext { position: absolute; top: 0.35em; right: 0.5em; color: var(--accent); font-size: 0.8em; line-height: 1; }

/* 見出し表示・縦向き: 縦のリスト */
.news-list.is-headlines { display: flex; flex-direction: column; justify-content: center; }
.news-list.is-headlines > li, .news-list.is-headlines .news-link { flex-shrink: 0; height: auto; }
.news-link.is-headline .news-name { font-weight: 600; }
/* 縦のリスト（見出し表示・縦向き）ではアイコンを左に置く */
.news-list.is-headlines .news-link { flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.6em; padding-right: 1.6em; }
@media (orientation: portrait) {
  .news-list { display: flex; flex-direction: column; justify-content: center; }
  .news-list > li { flex-shrink: 0; }
  .news-link { flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.6em; height: auto; padding-right: 1.6em; }
  /* 「公式発表ではありません」を切らずに表示する */
  .card--alert .card-head { flex-wrap: wrap; row-gap: 0.1em; }
  .alert-basis { white-space: normal; overflow: visible; }
}

/* =================================================================
   3. タイムライン（4.5枚が見える横スライド）
   ================================================================= */
.timeline {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.5em 0 0.5em 0.8em;
  background: var(--surface);
  background: var(--surface-a);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.6em;
}
.timeline-head .card-title { margin-bottom: 0.3em; }
.timeline-nav { display: flex; gap: 0.4em; }
.nav-btn {
  width: 30px;
  height: 26px;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.1em;
  line-height: 1;
  color: var(--text-sub);
}
.nav-btn:disabled { opacity: 0.3; cursor: default; }

.timeline-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
/* 右端をフェードさせ「続きがある」ことを示す */
.timeline-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6%;
  background: linear-gradient(to right, transparent, var(--surface-a));
  pointer-events: none;
  transition: opacity 0.2s;
}
.timeline-viewport.at-end::after { opacity: 0; }

.timeline-track {
  --tl-gap: 8px;
  display: grid;
  grid-auto-flow: column;
  /* 4.5 枚分: (幅 - 見える隙間4つ分) / 4.5 */
  grid-auto-columns: calc((100% - 4 * var(--tl-gap)) / 4.5);
  grid-gap: var(--tl-gap);
  gap: var(--tl-gap);
  height: 100%;
  padding-right: 0.8em;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  cursor: grab;
}
.timeline-track::-webkit-scrollbar { display: none; }
.timeline-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.tl-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  justify-items: center;
  gap: 0.15em;
  min-height: 0;
  padding: 0.35em 0.4em 0.4em;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  scroll-snap-align: start;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
}
.tl-card.is-now { border-color: var(--accent); }
.tl-time {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}
.tl-card.is-now .tl-time { color: var(--accent); }
.tl-day {
  margin-left: 0.3em;
  padding: 0 0.35em;
  border-radius: 4px;
  background: var(--surface-3);
  font-size: 0.85em;
  font-weight: 400;
}
.tl-weather {
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
}
.tl-icon { font-size: 1.5em; font-size: clamp(17px, 3.3vh, 50px); line-height: 1; }
.tl-temp {
  font-size: 1.15em;
  font-size: clamp(14px, 2.5vh, 38px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tl-meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.72em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tl-pop { color: var(--info); }
.tl-pop.is-high { color: var(--warn); font-weight: 700; }
.tl-idx {
  padding: 0 0.4em;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-sub);
}

/* 服装おすすめ = 楽天アフィリエイトリンク（指数の色を小さな点で示す: 暖色→寒色） */
.tl-aff {
  --idx: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 0.15em 0.45em;
  background: var(--surface-a);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.tl-aff::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--idx);
}
.tl-aff { border-color: var(--idx); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 6px rgba(0, 0, 0, 0.12); }
.tl-aff .aff-code { min-width: 0; }
.tl-aff-arrow { flex: 0 0 auto; margin-left: 0.1em; color: var(--idx); font-size: 1.15em; line-height: 1; }
.tl-aff:active { transform: scale(0.97); opacity: 0.8; }
.tl-aff-icon { flex: 0 0 auto; }
.lv-1 { --idx: #d98b6c; }
.lv-2 { --idx: #d6b35c; }
.lv-3 { --idx: #b5a27a; }
.lv-4 { --idx: #8fb59a; }
.lv-5 { --idx: #8fa9c4; }
.lv-6 { --idx: #9a95c9; }
.timeline-track.is-dragging .tl-aff, .timeline-track.is-dragging .tl-aff a { pointer-events: none; }

.timeline-pr {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0 0.6em 0.3em auto;
  font-size: 0.62em;
  color: var(--text-faint);
  white-space: nowrap;
}
.timeline-head .card-title .wx-badge { margin-left: 0.4em; font-size: 0.85em; letter-spacing: 0; }

/* 低い画面: 指数ラベルを省き、ボタンを優先 */
@media (max-height: 640px) {
  .tl-idx { display: none; }
  .tl-card { gap: 0.05em; padding: 0.25em 0.35em 0.3em; }
  .tl-aff { min-height: 24px; }
  .timeline-pr-text { display: none; }
}

/* =================================================================
   4. PRフッター（スリム広告枠）
   ================================================================= */
.ad-footer {
  display: flex;
  align-items: center;
  gap: 0.8em;
  min-height: 0;
  padding: 0.25em 0.6em 0.25em 0.8em;
  background: var(--surface);
  background: var(--surface-a);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* 控えめな「PR」ラベル（ステマ規制対応） */
.ad-label {
  flex: 0 0 auto;
  padding: 0.05em 0.45em;
  border: 1px solid var(--text-faint);
  border-radius: 4px;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.ad-slot {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

/* 季節のおすすめカード: アイコン・見出し・額縁風の枠（装飾は外側のみ。カード全体がバナーのリンク） */
.ad-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.2em 0.5em 0.2em 0.25em;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--aff-tint), transparent 70%);
}
.ad-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 2px 8px var(--aff-glow);
  font-size: 1.05em;
  line-height: 1;
}
.ad-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ad-title { font-size: 0.8em; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-sub { font-size: 0.64em; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 額縁: 真鍮色のグラデーション枠。光が枠をゆっくり流れる（位置指定をしないのでタップ領域の基準は .ad-tile） */
.ad-frame {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding: 2px;
  border-radius: 8px;
  background:
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) 0 0 / 300% 100% no-repeat,
    linear-gradient(135deg, var(--accent-strong), var(--aff-deep));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  animation: ad-frame-shine 9s ease-in-out infinite;
}
@keyframes ad-frame-shine {
  0%, 70% { background-position: 100% 0, 0 0; }
  100% { background-position: 0% 0, 0 0; }
}
.ad-frame .ad-banner { border-radius: 6px; overflow: hidden; }
.ad-banner a::after {              /* カード全体をタップ領域に */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: var(--radius-sm);
}
.ad-go {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  font-size: 1em;
  line-height: 1;
}
@media (max-width: 760px) {
  .ad-sub { display: none; }
}
@media (max-width: 620px) {
  .ad-text, .ad-go { display: none; }
}

/* 楽天市場「季節のおすすめ」バナー（コードはそのまま。枠の高さに収まるよう画像を等倍率で縮小表示） */
.ad-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 100%;
  line-height: 0;
}
.ad-banner a { display: inline-flex; height: 100%; align-items: center; }
.ad-banner img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.ad-banner img[width="1"] { position: absolute; width: 1px; height: 1px; }
.ad-empty { font-size: 0.72em; color: var(--text-faint); letter-spacing: 0.05em; }

.ad-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1em;
  line-height: 1.3;
}
.ad-credit { font-size: 0.58em; color: var(--text-faint); white-space: nowrap; }


/* =================================================================
   5. モーダル
   ================================================================= */
.modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
}
.modal-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in 0.2s ease-out;
}
.modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: pop-in 0.2s ease-out;
  -webkit-user-select: text;
  user-select: text;
}
.modal-head, .modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.8em 1.1em;
}
.modal-head { border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 1.1em; }
.modal-foot { justify-content: flex-end; border-top: 1px solid var(--border); }
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1em 1.1em;
  overflow-y: auto;                /* モーダル内のみスクロール可 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-hint { margin-bottom: 0.8em; font-size: 0.85em; color: var(--text-sub); }
.modal-subtitle { margin: 1.1em 0 0.5em; font-size: 0.85em; color: var(--text-sub); }
.modal-msg { min-height: 1.4em; margin-top: 0.5em; font-size: 0.85em; white-space: pre-line; }
.modal-msg.is-error { color: var(--danger); }
.modal-msg.is-ok { color: var(--ok); }

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* --- 現在地モーダル --- */
.loc-current {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: 0.9em;
  padding: 0.7em 0.9em;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.loc-label { font-size: 0.75em; color: var(--text-sub); }
.loc-meta { font-size: 0.75em; color: var(--text-faint); }
#loc-gps { width: 100%; }
.city-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
  margin-bottom: 0.9em;
}
.city-btn {
  min-height: 42px;
  padding: 0.4em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.city-btn.is-selected { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* スイッチ（現在地の自動取得） */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.8em;
  padding: 0.7em 0.9em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.switch-text { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.switch-text small { font-size: 0.75em; color: var(--text-sub); }
.switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  margin: 0;
  border-radius: 999px;
  background: var(--surface-3);
  cursor: pointer;
  transition: background-color 0.2s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(22px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.select-row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.9em;
  font-size: 0.85em;
  color: var(--text-sub);
}
.select {
  flex: 1 1 auto;
  min-height: 42px;
  padding: 0 0.8em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 16px;                 /* iOS の入力時自動ズーム防止（16px 以上） */
}
.loc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.credit { font-size: 0.7em; color: var(--text-faint); }
.credit a { text-decoration: underline; }

/* --- 設定モーダル --- */
.modal-panel--wide { max-width: 760px; }
/* 文書の表示（プライバシーポリシー）: 画面の高さいっぱいに使い、本文は枠の中でスクロール */
.modal-panel--doc { height: 100%; }
.modal-doc {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  background: var(--surface);
}
.modal-panel--doc .modal-foot .primary-btn { width: auto; }

/* 初回のお知らせ */
.modal-panel--welcome { max-width: 560px; }
.welcome-lead { margin-bottom: 0.8em; }
.welcome-list { display: flex; flex-direction: column; gap: 0.7em; }
.welcome-list li { display: flex; align-items: flex-start; gap: 0.7em; padding: 0.7em 0.8em; border-radius: var(--radius-sm); background: var(--surface-2); }
.welcome-icon { flex: 0 0 auto; font-size: 1.5em; line-height: 1.2; }
.welcome-list strong { display: block; }
.welcome-list small { display: block; margin-top: 0.15em; font-size: 0.82em; color: var(--text-sub); }
.welcome-note { margin-top: 0.9em; font-size: 0.8em; color: var(--text-sub); }
.welcome-actions { flex-wrap: wrap; }
.welcome-actions .primary-btn { flex: 1 1 auto; white-space: nowrap; }
.settings-section + .settings-section {
  margin-top: 1.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--border);
}
.settings-title { margin-bottom: 0.4em; font-size: 0.95em; }
.settings-notice {
  margin: -0.3em 0 0.8em;
  padding: 0.45em 0.7em;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.8em;
}

/* ゴミ出し: 曜日ごとの行 × 種類のトグル */
.garbage-form { display: flex; flex-direction: column; gap: 0.45em; }
.gf-row {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  align-items: center;
  gap: 0.6em;
}
.gf-day {
  font-weight: 700;
  text-align: center;
}
.gf-row.is-sun .gf-day { color: var(--danger); }
.gf-row.is-sat .gf-day { color: var(--info); }
.gf-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35em; }
.gf-type { position: relative; min-width: 0; }
.gf-type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gf-type span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  height: 44px;                    /* タップしやすい推奨サイズ */
  padding: 0 0.3em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.82em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.gf-type span i { font-style: normal; }
.gf-type input:checked + span {
  border-color: var(--chip, var(--accent));
  background: var(--chip, var(--accent));
  color: #1a1714;
  font-weight: 700;
}
.gf-type input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.modal-foot .modal-msg { flex: 1 1 auto; margin: 0; min-height: 0; text-align: left; }

/* 通知（保存しました 等） */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(10% + env(safe-area-inset-bottom));
  z-index: 300;
  transform: translateX(-50%);
  padding: 0.6em 1.2em;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.9em;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  animation: pop-in 0.2s ease-out;
  transition: opacity 0.3s;
}
.toast.is-out { opacity: 0; }

/* =================================================================
   6. 天気連動の背景（body.weather-<type> / body.is-night）
   - 色は半透明の重ね塗りなので、ダーク/ライト両方に馴染む
   - 粒子はタイル画像を transform で動かすだけ（古い端末でも軽い）
   ================================================================= */
.wx-bg {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--wx-opacity);
  transition: opacity 0.6s ease;
}
.wx-bg.is-switching { opacity: 0; }
.wx-glow, .wx-fx {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.wx-fx { display: none; will-change: transform; }

/* --- 晴れ: 真鍮色の陽だまりがゆっくり呼吸する --- */
.weather-sunny .wx-glow {
  background:
    radial-gradient(55% 50% at 88% -5%, rgba(240, 180, 90, 0.34), transparent 70%),
    radial-gradient(45% 40% at 5% 105%, rgba(240, 180, 90, 0.10), transparent 70%);
  animation: wx-breathe 14s ease-in-out infinite alternate;
}
/* --- 晴れ時々くもり --- */
.weather-partly .wx-glow {
  background:
    radial-gradient(50% 45% at 88% -5%, rgba(240, 180, 90, 0.24), transparent 70%),
    radial-gradient(60% 40% at 20% 0%, rgba(160, 165, 175, 0.16), transparent 70%);
}
/* --- くもり --- */
.weather-cloudy .wx-glow {
  background:
    linear-gradient(180deg, rgba(130, 135, 145, 0.22), transparent 70%),
    radial-gradient(60% 40% at 70% 0%, rgba(160, 165, 175, 0.14), transparent 70%);
}
/* --- 霧 --- */
.weather-foggy .wx-glow {
  background: linear-gradient(180deg, rgba(190, 190, 185, 0.20), rgba(190, 190, 185, 0.08) 60%, transparent);
}
/* --- 雨: しっとりした青灰 --- */
.weather-rainy .wx-glow {
  background:
    linear-gradient(180deg, rgba(70, 105, 140, 0.30), rgba(50, 75, 100, 0.12) 65%, transparent),
    radial-gradient(60% 40% at 50% 0%, rgba(110, 140, 170, 0.14), transparent 70%);
}
/* --- 雪: 澄んだ銀青 --- */
.weather-snowy .wx-glow {
  background:
    linear-gradient(180deg, rgba(190, 210, 235, 0.24), rgba(190, 210, 235, 0.06) 70%, transparent),
    radial-gradient(60% 40% at 30% 0%, rgba(230, 240, 255, 0.12), transparent 70%);
}
/* --- 雷雨: 深い藍 + ときどき稲光 --- */
.weather-stormy .wx-glow {
  background: linear-gradient(180deg, rgba(70, 60, 115, 0.36), rgba(45, 40, 80, 0.14) 65%, transparent);
}
.weather-stormy .wx-glow::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(225, 225, 255, 0.5);
  opacity: 0;
  animation: wx-flash 11s linear infinite;
}

/* --- 夜: 晴れ系は星空、それ以外は全体を少し沈める --- */
.is-night.weather-sunny .wx-glow,
.is-night.weather-partly .wx-glow {
  background:
    radial-gradient(45% 40% at 85% -5%, rgba(150, 170, 230, 0.20), transparent 70%),
    linear-gradient(180deg, rgba(30, 40, 85, 0.34), transparent 65%);
  animation: none;
}
.is-night .wx-bg::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(10, 15, 35, 0.18), transparent 70%);
}
.is-night.weather-sunny .wx-fx--far,
.is-night.weather-partly .wx-fx--far {
  display: block;
  background-image: var(--wx-stars);
  background-size: 220px 220px;
  animation: wx-twinkle 5s ease-in-out infinite alternate;
}

/* --- 雲（くもり・晴れ時々くもり・霧）: 横にゆっくり流れる --- */
.weather-cloudy .wx-fx--near,
.weather-partly .wx-fx--near,
.weather-foggy .wx-fx--near {
  display: block;
  right: auto;
  width: 200%;
  background-image:
    radial-gradient(18% 22% at 15% 18%, var(--wx-cloud), transparent 70%),
    radial-gradient(22% 18% at 55% 10%, var(--wx-cloud), transparent 70%),
    radial-gradient(16% 20% at 85% 26%, var(--wx-cloud), transparent 70%);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  animation: wx-drift 150s linear infinite;
}
.weather-foggy .wx-fx--near {
  background-image:
    radial-gradient(60% 9% at 30% 40%, var(--wx-cloud), transparent 70%),
    radial-gradient(70% 8% at 70% 62%, var(--wx-cloud), transparent 70%),
    radial-gradient(50% 7% at 40% 82%, var(--wx-cloud), transparent 70%);
  animation-duration: 90s;
}

/* --- 雨（雨・雷雨）: 2層で奥行き --- */
.weather-rainy .wx-fx--near,
.weather-stormy .wx-fx--near {
  display: block;
  top: -120px;
  background-image: var(--wx-rain);
  background-size: 120px 120px;
  animation: wx-fall-120 0.7s linear infinite;
}
.weather-rainy .wx-fx--far,
.weather-stormy .wx-fx--far {
  display: block;
  top: -80px;
  opacity: 0.5;
  background-image: var(--wx-rain);
  background-size: 80px 80px;
  animation: wx-fall-80 1.1s linear infinite;
}

/* --- 雪: 揺れながら降る --- */
.weather-snowy .wx-fx--near {
  display: block;
  top: -160px;
  background-image: var(--wx-snow);
  background-size: 160px 160px;
  animation: wx-snow-160 11s linear infinite;
}
.weather-snowy .wx-fx--far {
  display: block;
  top: -110px;
  opacity: 0.55;
  background-image: var(--wx-snow);
  background-size: 110px 110px;
  animation: wx-snow-110 17s linear infinite;
}

@keyframes wx-breathe { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes wx-twinkle { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes wx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes wx-fall-120 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 120px, 0); } }
@keyframes wx-fall-80 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 80px, 0); } }
@keyframes wx-snow-160 {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(10px, 80px, 0); }
  100% { transform: translate3d(0, 160px, 0); }
}
@keyframes wx-snow-110 {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, 55px, 0); }
  100% { transform: translate3d(0, 110px, 0); }
}
@keyframes wx-flash {
  0%, 90% { opacity: 0; }
  91% { opacity: 0.45; }
  92% { opacity: 0; }
  94% { opacity: 0.3; }
  95%, 100% { opacity: 0; }
}

/* 診断パネル（?debug=1） */
.debug-panel {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 200;
  max-width: 46vw;
  margin: 0;
  padding: 0.6em 0.8em;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  color: #e8f0e0;
  font: 12px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  pointer-events: none;
}

/* =================================================================
   レスポンシブ調整
   ================================================================= */
/* 縦向き: ヘッダーを「挨拶｜時計」＋「状態・操作ボタン」の2段にする */
@media (orientation: portrait) {
  .header {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    row-gap: 0.2em;
  }
  .header-center { text-align: right; }
  .header-right {
    grid-column: 1 / 3;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 0;
  }
  .clock-time { font-size: clamp(28px, 5vh, 100px); }
  .gf-types { grid-template-columns: repeat(3, 1fr); }
}

/* 低い画面（スマホ横・小型タブレット） */
@media (max-height: 500px) {
  .icon-btn { min-width: 28px; min-height: 28px; }
  .pr-notice { font-size: 0.55em; }
}

/* =================================================================
   スマートフォン（縦: 幅 599px 以下 / 横: 高さ 500px 以下）
   玄関モニター用の「1画面に収める」配置をやめ、カードを上から順に並べて縦スクロールにする。
   タブレット・PC（iPad mini 以上は縦横とも 744px 以上）は上の配置のまま変えない。
   ================================================================= */
@media (max-width: 599px), (max-height: 500px) {
  html, body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;               /* ページ全体を縦スクロール */
    overscroll-behavior-y: auto;
  }
  body { font-size: 15px; }
  .app {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .app > * { flex: none; }
  /* 2カラムの入れ物を外し、カードを .app 直下の並びとして順番を指定する */
  .main, .col { display: contents; }
  .header        { order: 1; }
  .card--umbrella { order: 2; }
  .card--clothing { order: 3; }
  .timeline      { order: 4; }
  .card--garbage { order: 5; }
  .card--alert   { order: 6; }
  .card--news    { order: 7; }
  .ad-footer     { order: 8; }
  .card, .timeline { flex: none; }

  /* カードは中身の高さに合わせて伸ばす（欄内スクロール・下端ぼかしは不要） */
  .card-body, .card-body.card-body--scroll { flex: none; overflow: visible; }
  .card-body--scroll.has-more { -webkit-mask-image: none; mask-image: none; }

  /* 文字の大きさを画面の高さ基準から固定値へ（横画面で極端に小さくならないように） */
  .greeting { font-size: 1.2em; }
  .greeting-sub { font-size: 0.85em; }
  .location-link, .wx-status { font-size: 0.8em; }
  .clock-time { font-size: 2.6em; }
  .clock-sec { font-size: 0.9em; }
  .clock-date { font-size: 0.85em; }
  .umbrella-icon { font-size: 2.2em; }
  .umbrella-verdict { font-size: 1.45em; white-space: normal; }
  .umbrella.is-compact .umbrella-icon { font-size: 2.2em; }
  .umbrella.is-compact .umbrella-verdict { font-size: 1.45em; }
  .clothing-icon { font-size: 2.2em; }
  .clothing-headline { font-size: 1.1em; }
  /* 「…」で切らずに全文を表示（スクロールできるので高さは気にしない） */
  .clothing-detail { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .clothing-basis, .alert-text { white-space: normal; overflow: visible; }
  .alert-row { align-items: flex-start; }
  /* ヘッダー2段目（電池・最終更新・ボタン）は折り返して左端が切れないように */
  .header-right { flex-direction: column; align-items: stretch; gap: 0.25em; }
  .pr-notice { align-self: flex-end; }
  .status-row { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.2em; }
  .tl-icon { font-size: 1.5em; }
  .tl-temp { font-size: 1.15em; }

  /* 3時間ごとの予報: 縦は 2.2 枚、横は 3.5 枚が見える横スライド（服装ボタンの文字が切れない幅） */
  .timeline { padding-bottom: 0.6em; }
  .timeline-head { flex-wrap: wrap; row-gap: 0.2em; }
  .timeline-pr { white-space: normal; margin-left: 0; }
  .timeline-nav { margin-left: auto; }
  .timeline-viewport { flex: none; }
  .timeline-track { height: auto; grid-auto-columns: calc((100% - 2 * var(--tl-gap)) / 2.2); }
  .tl-card { gap: 0.25em; padding: 0.45em 0.4em 0.5em; }
  .tl-idx { display: inline; }
  /* 服装ボタン: 長い文言は「…」で切らずにボタン内で折り返す */
  .tl-aff { white-space: normal; border-radius: 14px; line-height: 1.25; }
  .tl-aff .aff-code { white-space: normal; overflow: visible; text-overflow: clip; }
  .ad-title, .ad-sub { white-space: normal; overflow: visible; }

  /* 季節アラート・ニュースは全件を表示（行を隠さない） */
  .alert-basis { white-space: normal; overflow: visible; }
  .card--alert .card-head { flex-wrap: wrap; row-gap: 0.1em; }

  /* PR フッター: 高さを固定（バナーは枠に合わせて縮小表示） */
  .ad-footer { min-height: 64px; }
  .ad-slot { height: 56px; }
}
/* スマホ横画面: 幅を活かして「傘｜服装」「ゴミ出し｜アラート」を2列に */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 600px) {
  .app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .header, .timeline, .card--news, .ad-footer { grid-column: 1 / -1; }
  .timeline-track { grid-auto-columns: calc((100% - 3 * var(--tl-gap)) / 3.5); }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.noscript {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
}