/* ui-v2 — 「休める。帰れる。だから、一歩踏み出せる。」のためのデザイン層。
   style.css はそのまま(第一提出のブランチ用)に保ち、ここで :root のトークンを
   上書きしてページ全体の配色を変える（変数を読む既存のCSS/JSは触らずに済む）。
   このファイルは style.css の *あとに* 読み込むこと。
   詳細度: 既存クラスの上書きが必要な箇所は同じセレクタ強さで書き、
   !important は使わない。

   カラー根拠: haru-project inbox/2026-09-27/uiux-request-4.txt §カラー。
   コントラスト計算・検証: scripts/check_contrast.mjs（ui-v2 トークンを追加）。 */

:root {
  /* --- はる指定の5色 --------------------------------------------------- */
  --brand: #35844F;        /* ブランド・主要CTA（既存値のまま。白地 4.60:1） */
  --brand-dark: #2A6B40;   /* --page の上に緑文字を置く時だけこちら（5.64:1） */
  --page: #F5F0E6;         /* 生成り色。画面全体はこちら（緑一色にしない） */
  --bg: #FFFFFF;           /* カード・パネルの面 */
  --bg-soft: #F1ECE0;      /* --page に近い、わずかに白いカード面 */
  --text: #333630;         /* 本文 */

  --warmth: #C96F4A;        /* 休憩・温かさ（面・アイコン・大きな文字のみ） */
  --warmth-text: #A1593B;   /* 本文サイズの文字に使う濃い版（4.61:1 on page） */
  --warmth-tint: #FAF0EA;  /* --warmth-text の上で 4.5:1 を保つ濃さ（下限） */

  /* item37:「少し休みたい」CTAの濃い塗り。--warmth-text をそのまま塗りに
     再利用できる（白文字 5.24:1）。ダークモードは別トークン
     （--warmth-text のダーク値 #F0AC8C は明るいタンで白文字が読めない
     ため、専用の塗りを下の @media ブロックで用意する）。 */
  --rest-cta-bg: var(--warmth-text);
  --rest-cta-text: #FFFFFF;

  --signpost: #E2B84B;      /* 道標・小さな発見（面・アイコンのみ） */
  --signpost-text: #7C6529; /* 本文サイズの文字に使う濃い版（4.93:1 on page） */
  --signpost-tint: #FBF1D9;

  /* 補助文字。white/page どちらの上でも 4.5:1 以上（check_contrast.mjs 参照）*/
  --text-soft: #55584F;
  --text-faint: #63665C;
  --border: #E1D9C7;
  --border-strong: #C9BEA4;

  /* 地図の線: leafletmap.js / svgmap.js が読む変数名は変えない。
     とぎれ区間の線は「休める・帰れる」ではなく warmth 系（テラコッタ）に揃える。*/
  --route-line: #35844F;
  --gap-line: #C9603D;
  --quiet-line: #9CAC93;

  /* タップ領域・文字サイズの下限（ui-v2 依頼: 本文16px以上・重要情報18-24px+・
     タップ領域48px以上）。値そのものは下の各コンポーネントで使う。 */
  --tap-min: 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #1E1B14;
    --bg: #262219;
    --bg-soft: #2A251B;
    --border: #3D362A;
    --border-strong: #52493A;
    --text: #F1ECE2;
    --text-soft: #D3CBBB;
    --text-faint: #B3AA97;
    --brand: #6FBC9C;
    --brand-dark: #8ECDB2;
    --warmth: #E08E68;
    --warmth-text: #F0AC8C;
    --warmth-tint: #3B2A22;
    --rest-cta-bg: #7A3F28;  /* ダーク専用の濃い塗り。白文字 8.17:1 */
    --rest-cta-text: #FFFFFF;
    --signpost: #E8C875;
    --signpost-text: #EBCF8E;
    --signpost-tint: #3A3020;
    --route-line: #6FBC9C;
    --gap-line: #E08E68;
    --quiet-line: #6E7A66;
  }
}

body { background: var(--page); font-size: 16px; }
.app, .app.wide { background: transparent; }

/* --- 基本のタップ領域・文字サイズ ---------------------------------------- */
button, .btn, a.btn, input, select, textarea { font-size: 16px; }
.btn, button.speed-btn, .course-row, .supchip, .go-btn, .kaeru-fab, .walk-fab,
.uiv2-choice, .uiv2-bar-btn {
  min-height: var(--tap-min);
}

/* --- 出発前（画面1）: 大きな3択ボタン ------------------------------------
   スライダーではなく縦に並んだ大きなボタン。既存の duration_options
   （15/30/45分・決めない）をそのまま使う。selectors: #dist-row の子を
   .speed-btn から見た目だけ差し替える。ロジック・データは index.html 側で
   変更していない。 */
.uiv2-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.uiv2-bird-perch { flex: none; color: var(--brand-dark); opacity: .8; margin-bottom: 4px; }
.uiv2-entry .entry-title { font-size: 24px; line-height: 1.4; margin: 4px 0 6px; }
.uiv2-entry .entry-lede { font-size: 16px; }
.uiv2-area-sec { margin-bottom: 18px; }
.uiv2-area-sec .entry-h-small {
  font-size: 14px; font-weight: 600; color: var(--text-soft); margin: 0 0 6px;
}
#dist-row.uiv2-choices {
  display: flex; flex-direction: column; gap: 10px;
}
#dist-row.uiv2-choices .speed-btn {
  flex-direction: row; justify-content: flex-start; gap: 14px;
  padding: 16px 18px; min-height: 64px; border-radius: var(--radius);
  text-align: left;
}
#dist-row.uiv2-choices .speed-btn .sp-ic { flex: none; color: var(--brand-dark); }
#dist-row.uiv2-choices .speed-btn .sp-name { font-size: 18px; font-weight: 650; }
#dist-row.uiv2-choices .speed-btn .sp-rate { font-size: 14px; margin-left: auto; text-align: right; }
/* 「決めない」は既存機能として残すが、3つの主判断より控えめに。
   既定の選択（meta.duration_options の default）でもあるため、
   .speed-btn[aria-checked="true"] の濃い緑塗りはここでは使わない —
   3つの主判断より目立ってしまうと「1画面1判断」に反する。 */
#dist-row.uiv2-choices .speed-btn.uiv2-choice-minor {
  min-height: 44px; padding: 10px 18px; border-style: dashed;
}
#dist-row.uiv2-choices .speed-btn.uiv2-choice-minor .sp-name { font-size: 15px; font-weight: 500; }
#dist-row.uiv2-choices .speed-btn.uiv2-choice-minor[aria-checked="true"] {
  background: var(--bg-soft); border-color: var(--border-strong); color: var(--text);
}
#dist-row.uiv2-choices .speed-btn.uiv2-choice-minor[aria-checked="true"] .sp-rate { color: var(--text-faint); }

/* 「詳しくきめる」— 区・休憩の許容・速さは隠さないが、主役の3択より後ろに
   折りたたむ（1画面1判断。既存の項目は削除していない）。 */
details.uiv2-advanced { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; }
details.uiv2-advanced > summary {
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--brand-dark);
  min-height: var(--tap-min); display: flex; align-items: center; gap: 6px;
  list-style: none;
}
details.uiv2-advanced > summary::-webkit-details-marker { display: none; }
details.uiv2-advanced[open] > summary .chev { transform: rotate(90deg); }
details.uiv2-advanced .chev { display: inline-flex; transition: transform .15s; }

/* ユーザーテスト依頼(2026-09-27): コースカードの「安心して歩ける理由」。
   distance/time の下、道標の上に置く — スキャンして選べることを最優先。 */
.uiv2-checklist {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.uiv2-checklist li {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 650; color: var(--brand-dark); line-height: 1.4;
}
.uiv2-checklist li .ic-svg { color: var(--brand); flex: none; }

/* --- 「安心の道標」--------------------------------------------------------
   ● いま ─ アイコン 分 ─ アイコン 分。色だけでなくアイコン形状で区別する
   （既存 icons.js の各カテゴリアイコンをそのまま使う）。 */
.signpost { margin: 10px 0; }
.signpost .sp-line {
  display: flex; align-items: center; height: 34px;
}
.signpost .sp-now {
  color: var(--brand); flex: none; display: inline-flex;
}
.signpost .sp-seg {
  flex: 1 1 auto; height: 3px; background: var(--warmth); min-width: 18px;
  border-radius: 2px;
}
.signpost .sp-stop {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--signpost);
  color: var(--signpost-text); display: inline-flex; align-items: center;
  justify-content: center;
}
.signpost .sp-labels {
  display: flex; align-items: flex-start; margin-top: 4px;
}
.signpost .sp-lb {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-soft);
  text-align: center; font-weight: 600;
  /* CJKは語の途中でも折り返すのが既定なので、幅が足りないと「い/ま」の
     ように文字の途中で割れる。折り返さず、入りきらない分は省略記号で
     切る（数字だけの短いラベルは通常そのまま全部入る）。 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.signpost .sp-lb-now {
  flex: none; width: auto; white-space: nowrap; text-align: left;
  color: var(--brand-dark); margin-right: 2px;
}
.signpost.is-compact .sp-line { height: 26px; }
.signpost.is-compact .sp-stop { width: 20px; height: 20px; }
.signpost.is-compact .sp-lb { font-size: 12px; }

/* --- 歩行中（あんない / MAP）------------------------------------------
   v4.0 WP-B（docs/v4-plan.md §6.2）で、見出し（.uiv2-headline）は「地図に
   重ねた帯」から「あんない画面そのもの」に変わった。畳み／展開も無くなった
   （道標は畳まずいつも出す）。その見た目・MAPとの切り替えは
   public/assets/v4-walk.css に一本化してある — ここには残さない。 */

/* 上のバー（戻る／コース名／デモ／凡例）: レビュー指摘（2.0倍で「凡例」が
   右にはみ出す）——地名（wt-name）は最初に諦め、残った戻る・デモ・凡例の
   3チップはアイコンだけに縮める（タップ領域とaria-labelは残す。
   walk.html 側で .wt-label に包み、legend/demo チップには aria-label を
   足してある）。 */
html.uiv2-text-lg .walk-top .wt-name { display: none; }
html.uiv2-text-lg .walk-top .wt-label { display: none; }
html.uiv2-text-lg .walk-top .wt-back,
html.uiv2-text-lg .walk-top .wt-btn { padding: 9px; gap: 0; }

/* 常時表示「少し休みたい」「今日は帰りたい」: レビュー指摘（2.0倍で
   「今日は帰りたい」が右にはみ出す）。文字は縮めない方針なので、横に
   並べたまま押し込めるのではなく縦に積む——1画面1判断の帯が少し高くなる
   だけで、内容は変わらない。--walk-actionbar-h は実測値なので、シートの
   余白（padding-bottom）は自動でついてくる。 */
html.uiv2-text-lg .uiv2-actionbar { flex-direction: column; align-items: stretch; }
html.uiv2-text-lg .uiv2-actionbar .uiv2-bar-btn { flex: none; width: 100%; white-space: normal; }

/* 常時表示「少し休みたい」「今日は帰りたい」。依頼書4「画面下部には常時」
   のとおり、地図の途中に浮かせず viewport の実際の下端に固定する
   （はるの指摘 2026-09-27: ルートの上に浮いて見えていた）。下のシート
   （.walk-sheet, position:absolute; bottom:0）の上に重なる形になるので、
   シート側に実測ぶんの padding-bottom を足して中身が隠れないようにする
   （syncActionbarHeight が --walk-actionbar-h に流す）。現在地FAB・
   帰るFABは元々シートの高さぶん上に離してあるので、この帯とは重ならない。 */
.uiv2-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
  display: flex; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  /* 下は白いシートに重なるので、シートと同じ --bg でぼかす（地の色 --page
     だと継ぎ目が段になって見える）。 */
  background: linear-gradient(to top, var(--bg) 55%, rgba(255, 255, 255, 0));
}
.uiv2-actionbar .uiv2-bar-btn {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 16px; font-weight: 650; border-radius: 999px;
  border: none; padding: 0 14px; box-shadow: var(--shadow-lg); cursor: pointer;
}
/* 360px幅でも「今日は帰りたい」を途中で折り返さない。文字は16pxのまま、余白を詰める。 */
.uiv2-actionbar .uiv2-bar-btn { white-space: nowrap; }
@media (max-width: 380px) {
  .uiv2-actionbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .uiv2-actionbar .uiv2-bar-btn { gap: 6px; padding: 0 8px; }
}
/* item37: 薄いピル（--warmth-tint地+--warmth-text文字）だと、隣の濃い塗りの
   .uiv2-bar-home（緑+白文字）に比べてCTAとして弱く見える——コントラスト比
   自体は足りていた(4.67:1)が、彩度/塗りの軽さが問題だった。.uiv2-bar-home
   と同じ「濃い塗り+白文字」に揃える。過度に強い警告色（赤系）にはせず、
   テラコッタの濃色止まり（--rest-cta-bg、docs/v421-plan.md §3）。 */
.uiv2-actionbar .uiv2-bar-rest { background: var(--rest-cta-bg); color: var(--rest-cta-text); }
.uiv2-actionbar .uiv2-bar-home { background: var(--brand); color: #fff; }
.uiv2-actionbar .uiv2-bar-btn:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 2px; }
/* シートの中身（いまの状態・近くの一覧）が、上に重なる固定の
   uiv2-actionbar の裏に隠れないよう、実測ぶんの余白を足す。 */
/* --walk-actionbar-h は「帯が地図の領域に食い込んでいる高さ」の実測値（walk.html の
   syncActionbarHeight）。safe-area はその中に含まれるので、ここでは足さない。 */
.walk-sheet { padding-bottom: calc(2px + var(--walk-actionbar-h, 76px)); }

/* 丸い「帰る」FABは全幅バーの「今日は帰りたい」に一本化する（機能
   toggleKaeru() 自体は削除しない。二重のCTAで画面が散らかるのを防ぐ）。 */
.kaeru-fab { display: none; }

/* --- 休憩シート（画面4）--------------------------------------------------- */
.uiv2-rest-sheet .wp-head { justify-content: flex-start; gap: 8px; }
.uiv2-rest-sheet .wp-head .wp-close { margin-left: auto; }
.uiv2-rest-sheet .wp-head span:first-child { font-size: 18px; font-weight: 700; }
.uiv2-rest-title { font-size: 18px; font-weight: 700; margin: 2px 0 10px; }
/* 「○○まで あと N分」。急かさないが、数字は見出しに次いで大きく（依頼）。 */
.uiv2-rest-eta { font-size: 20px; font-weight: 700; color: var(--brand-dark); margin: 0 0 8px; }
.uiv2-rest-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.uiv2-rest-choices .btn { min-height: var(--tap-min); font-size: 16px; }
/* 「周辺」: 実在するカテゴリだけをアイコン＋文字で並べる。色だけに頼らない。 */
.uiv2-nearby { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.uiv2-nearby-lb { font-size: 13px; font-weight: 600; color: var(--text-faint); }
.uiv2-nearby-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
  font-weight: 600; color: var(--text-soft); background: var(--bg-soft);
  border-radius: 999px; padding: 5px 10px 5px 8px;
}
.uiv2-nearby-chip .ic-svg { color: var(--brand-dark); }

/* --- 帰る（画面5）---------------------------------------------------------
   既存 .kaeru-primary 等の見た目を、大きな文字・十分な行間に寄せる。 */
.kaeru-pop .wp-head { justify-content: flex-start; gap: 8px; }
.kaeru-pop .wp-head .wp-close { margin-left: auto; }
/* v4.0 WP-B（docs/v4-plan.md §6.4）: 「今日はここまでにしましょう。」
   続けることをすすめる言葉は使わない。rest-title と同じ強さ。 */
.kaeru-pop .uiv2-kaeru-lede { font-size: 18px; font-weight: 700; color: var(--text); margin: 2px 0 10px; }
.uiv2-rest-choices2 { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.uiv2-rest-choices2 .btn { min-height: var(--tap-min); font-size: 16px; }
.uiv2-more-link {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; font-size: 15px; font-weight: 650; color: var(--brand-dark);
  padding: 10px 2px; cursor: pointer; min-height: var(--tap-min);
}
.uiv2-more-link:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 2px; }
.uiv2-switch-link {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-soft);
  padding: 4px 2px 0; cursor: pointer; min-height: 36px;
}
.uiv2-switch-link:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 2px; }
.uiv2-rest-done { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.uiv2-rest-done .uiv2-rest-title { margin-bottom: 2px; }
.kaeru-pop .uiv2-end-link {
  display: block; text-align: center; margin-top: 14px; padding: 12px 14px;
  min-height: var(--tap-min); line-height: calc(var(--tap-min) - 24px);
  border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
  color: var(--text-soft); font-size: 14px; font-weight: 600; text-decoration: none;
}
.kp-nm { font-size: 18px !important; }
.kp-meta { font-size: 15px !important; }

/* --- 終了（画面6）---------------------------------------------------------- */
.uiv2-end { max-width: 480px; margin: 0 auto; padding: 24px 18px 40px; }
.uiv2-end .end-title { font-size: 24px; font-weight: 700; margin: 8px 0 4px; }
.uiv2-end .end-time { font-size: 20px; font-weight: 700; color: var(--brand-dark); margin: 10px 0 18px; }
.uiv2-end .end-found { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uiv2-end .end-found li { display: flex; align-items: center; gap: 10px; font-size: 16px; background: var(--bg); border-radius: var(--radius-sm); padding: 12px 14px; }
.uiv2-end .end-found .ic-wrap { color: var(--signpost-text); flex: none; }
.uiv2-end .end-closing { font-size: 17px; line-height: 1.7; margin: 20px 0; }
.uiv2-end .btn { width: 100%; min-height: var(--tap-min); font-size: 16px; }
/* v4.0 WP-B（docs/v4-plan.md §6.5）: ［ホームへ］の下に小さく「これまでの
   記録」。主ボタンより目立たせない。 */
.uiv2-end .end-history-link {
  display: block; text-align: center; margin: 14px 0 0; min-height: var(--tap-min);
  line-height: var(--tap-min); font-size: 14px; font-weight: 600; color: var(--text-soft);
}
.uiv2-end .end-history-link:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 2px; }

/* --- 散歩のおとも（鳥）----------------------------------------------------
   主役にしない: 固定サイズの小さな置物として、見出しの隅などに添える。 */
.bird-wrap { display: inline-flex; color: var(--brand-dark); opacity: .9; }

/* --- 下のシート: 既定はグリップの peek 行だけに畳む ------------------------
   依頼 2026-09-27（はる「地図が小さい」）。グリップをボタンにして、
   タップ領域は48px確保しつつ、見た目の棒自体は元のまま細く残す。 */
.walk-sheet .wsheet-grip {
  display: block; width: 100%; min-height: 44px; padding: 8px 0;
  background: none; border: none; cursor: pointer;
}
.walk-sheet .wsheet-grip .grip-bar {
  display: block; width: 38px; height: 4px; border-radius: 2px;
  background: var(--border-strong); margin: 0 auto;
}
.walk-sheet .wsheet-grip:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: -2px; }
/* 畳んだ状態をさらに薄く（はる 2026-09-27 17:38「下の箱をもっと畳めるように」）。
   白い箱をやめて透明にし、地図の上に小さなつまみ（タブ）だけを浮かせる。
   箱の高さ＝つまみ＋休む/帰るの帯だけになり、そのぶん地図が下まで見える。 */
.walk-sheet:not(.is-open) {
  background: transparent; box-shadow: none; overflow: visible; padding-top: 0;
}
.walk-sheet:not(.is-open) .wsheet-grip {
  min-height: 36px; padding: 0; display: flex; align-items: flex-end; justify-content: center;
}
.walk-sheet:not(.is-open) .wsheet-grip .grip-bar {
  width: 64px; height: 22px; border-radius: 11px 11px 0 0; margin: 0;
  background: var(--bg); box-shadow: 0 -2px 8px rgba(34, 43, 38, .18);
  position: relative;
}
.walk-sheet:not(.is-open) .wsheet-grip .grip-bar::after {
  content: ""; position: absolute; left: 50%; top: 9px; width: 34px; height: 4px;
  margin-left: -17px; border-radius: 2px; background: var(--border-strong);
}
/* 畳んだらグリップだけ（はる 2026-09-27 15:30:「立ち寄れる区間です」も邪魔）。
   いまの状態は上の見出し（とぎれ中は色が変わる）で分かる。 */
.walk-sheet:not(.is-open) .stepnav,
.walk-sheet:not(.is-open) .wstate,
.walk-sheet:not(.is-open) #nearlist,
.walk-sheet:not(.is-open) .wsheet-settings,
.walk-sheet:not(.is-open) .wsheet-reports {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  details.uiv2-advanced .chev { transition: none; }
}