/* =========================================================
   Komichi — 歩くほど芽吹く、白い街
   デザイントークン（色・余白・型・形は全てここで一元管理）
   ========================================================= */
:root{
  /* --- ニュートラル：純白#fff／純黒#000を使わず、わずかに緑味 --- */
  --bg:        #FBFDF9;   /* 白い街のキャンバス（ほぼ白・ごくわずかに緑み） */
  --surface:   #FAFCF4;   /* 浮いた面・カード */
  --surface-2: #EAEFE0;   /* 沈んだ面・トラック */
  --line:      #DEE5D2;   /* 境界線 */
  --line-2:    #C8D2B9;   /* 強い境界線 */

  --text:      #1F261D;   /* 本文（緑みのダークグレー）AA以上 */
  --text-mut:  #566152;   /* 補助テキスト */
  --text-faint:#899480;   /* かすかなテキスト */

  /* --- アクセント：緑1色を濃淡で（彩度を落とした穏やかなセージ系） --- */
  --g-50:  #EDF2E5;
  --g-100: #DEE8CD;
  --g-200: #C2D2A8;
  --g-300: #9FBE7E;   /* 芽吹き */
  --g-400: #6E9E55;   /* 軌跡（彩度を抑えた落ち着いた緑） */
  --g-500: #4F8C3D;   /* 主要アクション */
  --g-600: #3B6E30;   /* 繁茂 */
  --g-700: #2A5023;

  --accent:    var(--g-500);
  --accent-ink:#1B4D12;
  --trail:     var(--g-400);

  /* --- モック準拠パレット（実地図レイヤー＆新ホーム用。MapLibreのpaintからも getC で参照） --- */
  --ink:     #1F261E;   /* 文字（純黒は使わない） */
  --mut:     #586355;   /* 補助文字 */
  --g:       #3F8E2A;   /* メイングリーン：踏破ライン・主要アクション */
  --g-deep:  #2E7D1E;   /* 強調・現在地 */
  --g-mid:   #7FBF55;   /* 連絡路・中間の道 */
  --g-leaf:  #6FB23E;   /* 芽・芽吹きドット */
  --g-tree:  #4E9E2C;   /* 繁茂（木の樹冠） */
  --unexp:   #CAD6BD;   /* 未踏の道（薄い灰緑・破線） */
  --park:    #E3EDD4;   /* 公園/区画の薄い面 */
  --track:   #E2EAD7;   /* 進捗バーのトラック */
  --pill-bg: #E8F0DD;   /* 「提案」ピル背景 */
  --pill-tx: #2C7320;   /* 「提案」ピル文字 */
  --petal:   #FCFEF8;   /* 花びら（旧・ほぼ白） */
  --flower:      #EAA0C0;  /* 花びら（ピンク） */
  --flower-core: #D45C86;  /* 花の中心（濃いピンク） */
  --gold:        #F4CE5E;  /* シークレット：金の花びら */
  --gold-core:   #E0892B;  /* シークレット：金の花の中心 */
  --trunk:   #6B5A3A;   /* 木の幹 */

  /* 意味の色（アクセントと衝突しない、控えめな素焼き色） */
  --danger:    #B0573C;
  --danger-bg: #F6E7DF;

  /* --- スペーシング（8pxベース） --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* --- 型（タイプスケール） --- */
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:20px; --t-xl:28px; --t-2xl:40px;
  --font-ui:'Zen Maru Gothic','Hiragino Maru Gothic ProN',system-ui,sans-serif;
  --font-disp:'Fraunces',Georgia,serif;

  /* --- 形・影・動き --- */
  --r-sm:10px; --r:14px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(31,38,30,.05), 0 2px 10px rgba(31,38,30,.05);
  --sh-2:0 10px 34px rgba(28,58,24,.14), 0 2px 8px rgba(31,38,30,.06);
  --ease:cubic-bezier(.2,.7,.25,1);
  --dur:200ms;

  /* セーフエリア：実機の env() があればそれを、無ければプレビュー枠用の既定 */
  --safe-top:    max(env(safe-area-inset-top), 14px);
  --safe-bottom: max(env(safe-area-inset-bottom), 12px);
}
/* iPhoneフレーム（preview.html）内ではステータスバー/ホームバー分を確保 */
:root.framed{ --safe-top:54px; --safe-bottom:26px; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-ui); color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit; color:inherit; cursor:pointer}
.hidden{display:none !important}

#app{position:fixed; inset:0; overflow:hidden}

/* ===== 地図 ===== */
#mapwrap{position:absolute; inset:0; background:var(--bg); touch-action:none}
#mapwrap canvas{display:block}
.maplibregl-ctrl-attrib,.mapboxgl-ctrl-attrib{opacity:.55; font-size:10px}
.maplibregl-ctrl-bottom-right{z-index:3}
/* ネイティブコントロール（ズーム・現在地）を世界観に合わせる */
.maplibregl-ctrl-top-right{top:calc(var(--safe-top) + 52px); right:var(--s-3); z-index:5}
.maplibregl-ctrl-group{
  border-radius:var(--r) !important; overflow:hidden; border:1px solid var(--line-2);
  background:rgba(250,252,244,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--sh-1);
}
.maplibregl-ctrl-group button{width:44px !important; height:44px !important; background:transparent}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)}
.maplibregl-ctrl-group button:hover{background:var(--g-50)}
.maplibregl-ctrl-group button:focus-visible{outline:none; box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--g-400)}
.maplibregl-user-location-dot,.maplibregl-user-location-dot::before{background-color:var(--g-500) !important}
.maplibregl-user-location-dot::before{box-shadow:none}

/* 地図コントロール */
.mapctl{
  position:absolute; right:var(--s-3); z-index:5;
  top:calc(var(--safe-top) + 56px);
  display:flex; flex-direction:column; gap:var(--s-2);
}
.iconbtn{
  width:44px; height:44px; min-width:44px; border-radius:var(--r);
  border:1px solid var(--line-2); background:rgba(250,252,244,.82); color:var(--text);
  font-size:var(--t-lg); line-height:1; display:grid; place-items:center;
  box-shadow:var(--sh-1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.iconbtn:hover{background:var(--g-50); border-color:var(--line-2)}
.iconbtn:active{transform:scale(.94)}
.iconbtn.ghost{box-shadow:none; border-color:transparent; background:transparent; width:40px; height:40px}

/* ===== トップバー ===== */
.topbar{
  position:absolute; left:0; right:0; top:0; z-index:6;
  padding:calc(var(--safe-top) + 6px) var(--s-4) var(--s-3);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(var(--bg), rgba(243,246,238,0));
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
.brand{display:flex; align-items:center; gap:var(--s-2)}
.brand-mark{color:var(--g-500); display:grid; place-items:center}
.brand-name{font-family:var(--font-disp); font-weight:600; font-size:var(--t-lg); letter-spacing:-.01em}
.chip{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:rgba(250,252,244,.82);
  font-size:var(--t-sm); font-weight:500; box-shadow:var(--sh-1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--g-400)}
.chip[aria-pressed="true"]{background:var(--g-50); border-color:var(--g-200)}
.chip[aria-pressed="true"] .dot{background:var(--g-600)}
.chip:hover{border-color:var(--line-2)}

/* ===== ボタン ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 20px; border-radius:var(--r);
  border:1px solid transparent; font-size:var(--t-md); font-weight:700;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:var(--accent); color:var(--g-50); box-shadow:0 6px 18px rgba(44,115,32,.28)}
.btn.primary:hover{background:var(--g-600)}
.btn.ghost{background:var(--surface); color:var(--accent-ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--g-50); border-color:var(--g-200)}
.btn.tiny{min-height:40px; padding:0 14px; font-size:var(--t-sm)}
.btn.stop{background:var(--surface); color:var(--text); border-color:var(--line-2); flex:1}
.btn.stop:hover{background:var(--surface-2)}
.btn.stop .stop-sq{width:12px; height:12px; border-radius:3px; background:var(--danger)}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
.btn:focus-visible,.iconbtn:focus-visible,.chip:focus-visible,.tab:focus-visible,.link:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--g-400);
}

.link{background:none; border:none; color:var(--accent-ink); font-size:var(--t-sm); font-weight:500; padding:6px; border-radius:8px; text-underline-offset:3px; text-decoration:underline; text-decoration-color:var(--g-200)}
.link:hover{text-decoration-color:var(--g-400)}

/* ===== 下部パネル（ホーム／探索）の共通 ===== */
.panel{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:var(--s-3) var(--s-4) calc(84px + var(--safe-bottom)); /* タブバー(約69px)に隠れない下余白 */
  background:linear-gradient(rgba(243,246,238,0), var(--bg) 22%);
  display:flex; flex-direction:column; gap:var(--s-3);
}
.panel::before{ /* 面の手触り：上に薄いカード地 */
  content:""; position:absolute; inset:36px 0 0; background:var(--bg);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:0 -1px 0 var(--line);
  z-index:-1;
}
.grip{width:38px; height:5px; border-radius:var(--r-pill); background:var(--line-2); margin:0 auto var(--s-1); opacity:.8}

/* 探索率カード */
.explore-card{display:flex; align-items:center; gap:var(--s-4)}
.ring{position:relative; width:80px; height:80px; flex:none}
.ring svg{transform:rotate(-90deg)}
.ring-track{fill:none; stroke:var(--surface-2); stroke-width:7}
.ring-bar{fill:none; stroke:var(--g-500); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:207.3; stroke-dashoffset:207.3; transition:stroke-dashoffset 600ms var(--ease), stroke 400ms var(--ease)}
.ring-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.ring-pct{font-family:var(--font-disp); font-weight:600; font-size:var(--t-xl); line-height:1; font-variant-numeric:tabular-nums}
.ring-unit{font-size:var(--t-sm); color:var(--text-mut); align-self:center; transform:translateY(6px); margin-left:1px}
.eyebrow{margin:0; font-size:var(--t-xs); letter-spacing:.04em; color:var(--text-faint); font-weight:500}
.stage{margin:2px 0 0; font-size:var(--t-lg); font-weight:700}
.stage-sub{margin:2px 0 0; font-size:var(--t-sm); color:var(--text-mut); line-height:1.4}

/* 提案カード */
.suggest{
  display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3);
  background:var(--g-50); border:1px solid var(--g-200); border-radius:var(--r);
  animation:rise var(--dur) var(--ease);
}
.suggest-icon{width:40px; height:40px; border-radius:12px; background:var(--surface); color:var(--g-600); display:grid; place-items:center; flex:none}
.suggest-body{flex:1; min-width:0}
.suggest-title{margin:0; font-weight:700; font-size:var(--t-md)}
.suggest-sub{margin:2px 0 0; font-size:var(--t-sm); color:var(--text-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.actions{display:flex; gap:var(--s-3)}
.actions .ghost{flex:1}
.actions .primary{flex:1.2}

/* サンプル再生（デモ提示用） */
.play-sample{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:44px; border-radius:var(--r); border:1px dashed var(--g-300);
  background:var(--g-50); color:var(--g-700); font-size:var(--t-sm); font-weight:700;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.play-sample:hover{background:var(--g-100); border-color:var(--g-400)}
.play-sample .tri{width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--g-600)}

/* 最近の散歩 */
.recent{display:flex; flex-direction:column; gap:var(--s-2)}
.recent-head{display:flex; align-items:center; justify-content:space-between; font-size:var(--t-sm); font-weight:700; color:var(--text-mut)}
.recent-list{display:flex; gap:var(--s-3); overflow-x:auto; padding:2px 2px 4px; scrollbar-width:none}
.recent-list::-webkit-scrollbar{display:none}
.rcard{
  flex:none; width:128px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rcard:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.rcard img,.rcard canvas{display:block; width:100%; height:78px; object-fit:cover; background:var(--g-50)}
.rcard .rc-meta{padding:8px 10px}
.rc-date{font-size:var(--t-xs); color:var(--text-faint)}
.rc-dist{font-size:var(--t-sm); font-weight:700; margin-top:2px}
.rc-dist i{font-style:normal; font-weight:500; font-size:var(--t-xs); color:var(--text-mut); margin-left:1px}
.recent-empty{
  font-size:var(--t-sm); color:var(--text-mut); line-height:1.6; background:var(--surface);
  border:1px dashed var(--line-2); border-radius:var(--r); padding:var(--s-4); text-align:center;
}
.recent-empty b{display:block; color:var(--text); font-size:var(--t-md); margin-bottom:4px}

/* ===== 探索パネル ===== */
/* 育つ街は内容が短く、半透明グラデの「立ち上がり」だと先端(上端)が透けて、
   グリップだけが細いバーとして地図上に浮いて見える。あしあとシートと同じ
   不透明な一枚カードにして、先端の透け・浮いたバーを解消する。 */
#explorePanel{
  gap:var(--s-2);
  padding:var(--s-4) var(--s-4) calc(80px + var(--safe-bottom));
  background:var(--bg);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border-top:1px solid var(--line);
  box-shadow:var(--sh-2);
}
#explorePanel::before{display:none}
.explore-head{display:flex; align-items:flex-end; justify-content:space-between}
.big-pct{margin:2px 0 0; font-family:var(--font-disp); font-weight:600; font-size:var(--t-2xl); line-height:.9}
.big-pct i{font-style:normal; font-size:var(--t-lg); color:var(--text-mut); margin-left:2px}
.stage-pill{margin:0; padding:6px 14px; border-radius:var(--r-pill); background:var(--g-100); color:var(--g-700); font-weight:700; font-size:var(--t-sm)}
.explore-note{margin:0; font-size:var(--t-sm); color:var(--text-mut); line-height:1.6}
.en-val{ font-size:var(--t-lg); font-weight:700; color:var(--g-600); vertical-align:baseline; }
.en-val i{ font-style:normal; font-size:var(--t-xs); font-weight:500; color:var(--text-mut); margin-left:1px; }
.grow-explain{margin:var(--s-2) 0 0; padding:8px 12px; background:var(--g-50); border:1px solid var(--g-100); border-radius:var(--r);
  font-size:var(--t-xs); color:var(--g-700); line-height:1.6}
.lg-head{ margin:var(--s-2) 0 2px; font-size:var(--t-xs); font-weight:700; color:var(--mut) }
.lg-head:first-child{ margin-top:0; }
.legend{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px var(--s-2); font-size:var(--t-sm); color:var(--text-mut)}
.legend li{display:flex; align-items:center; gap:6px}
.sw{width:16px; height:16px; border-radius:6px; flex:none; border:1px solid rgba(31,38,30,.06)}
.sw0{background:var(--surface); border-color:var(--line-2)}
.sw1{background:var(--g-300)}
.sw2{background:var(--g-400)}
.sw3{background:var(--g-600)}
.sw4{background:radial-gradient(circle, var(--flower-core) 0 26%, var(--flower) 28%); border-color:#E7C0D2}
/* 凡例：色の四角ではなく実際のマーク（アイコン）で表す。花は大きめ */
.lg-mark{ width:22px; height:22px; flex:none; display:block; }
.lg-mark.lg-flower{ width:27px; height:27px; }
/* 段階名にそろえた凡例スウォッチ */
.sw-walk{ width:16px; height:4px; border-radius:2px; background:var(--g); border:none }
.sw-sprout{ background:#B8E06A }
.sw-leaf{ background:#9DC850 }
.sw-tree{ background:var(--g-tree) }
.sw-flower{ background:radial-gradient(circle, var(--flower-core) 0 26%, var(--petal) 28%); border-color:#DFE6D6 }
.sw-secret{ display:grid; place-items:center; background:var(--surface-2); border-color:var(--line-2); color:var(--mut); font-size:11px; font-weight:700; line-height:1 }

/* ===== アクティブ（記録中） ===== */
.active{
  position:absolute; left:0; right:0; bottom:0; z-index:7;
  padding:var(--s-5) var(--s-4) calc(var(--s-5) + var(--safe-bottom));
  display:flex; flex-direction:column; gap:var(--s-4);
  background:linear-gradient(rgba(243,246,238,0), var(--bg) 30%);
}
.active-stats{
  display:flex; align-items:center; justify-content:center; gap:var(--s-5);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-5); box-shadow:var(--sh-1);
}
.astat{display:flex; flex-direction:column; align-items:center; gap:2px; flex:1}
.astat-num{font-family:var(--font-disp); font-weight:600; font-size:var(--t-xl); line-height:1; font-variant-numeric:tabular-nums}
.astat-num i{font-style:normal; font-family:var(--font-ui); font-size:var(--t-md); font-weight:500; color:var(--text-mut); margin-left:2px}
.astat-lbl{font-size:var(--t-xs); color:var(--text-faint)}
.astat-div{width:1px; height:38px; background:var(--line)}
.active-hint{margin:0; text-align:center; font-size:var(--t-sm); color:var(--text-mut)}
.active-actions{display:flex; gap:var(--s-3)}
.active-actions .ghost{flex:1}

/* 記録中インジケータ（録画ドット） */
body[data-view="active"] .active-stats{position:relative}
.active-stats::before{
  content:""; position:absolute; top:12px; right:14px; width:8px; height:8px; border-radius:50%;
  background:var(--g-500); box-shadow:0 0 0 0 rgba(63,142,42,.5); animation:pulse 1.8s infinite;
}

/* ===== デモ再生（演出のみ。記録・データには無関係） ===== */
.demo-badge{
  position:absolute; top:calc(var(--safe-top) + 6px); left:50%; transform:translateX(-50%); z-index:10;
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px;
  border-radius:var(--r-pill); background:var(--text); color:var(--g-50);
  font-size:var(--t-xs); font-weight:700; box-shadow:var(--sh-1); pointer-events:none;
}
.demo-badge .db-dot{width:8px; height:8px; border-radius:50%; background:var(--g-300); animation:pulse 1.8s infinite}
.demo-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:9;
  padding:var(--s-4) var(--s-4) calc(var(--s-4) + var(--safe-bottom));
  display:flex; flex-direction:column; gap:var(--s-3);
  background:linear-gradient(rgba(242,245,235,0), var(--bg) 34%);
}
.demo-note{margin:0; text-align:center; font-size:var(--t-sm); color:var(--text-mut); line-height:1.6}
.demo-actions{display:flex; gap:var(--s-3)}
.demo-actions .ghost{flex:1}
.demo-actions .primary{flex:1}
body[data-view="demo"] .tabbar{display:none}

/* ===== シート（ログ／サマリー） ===== */
.sheet{
  position:absolute; left:0; right:0; bottom:0; top:auto; z-index:8;
  max-height:86%; display:flex; flex-direction:column;
  background:var(--bg); border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--sh-2); border-top:1px solid var(--line);
  padding:var(--s-4) var(--s-4) calc(var(--s-4) + var(--safe-bottom));
  animation:sheetUp 260ms var(--ease);
}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-3)}
.sheet-head h2{margin:0; font-family:var(--font-disp); font-weight:600; font-size:var(--t-lg)}
/* あしあとシートはタブバー(高さ約68px)に重なるため、下余白を足して隠れないようにする */
#logsPanel{padding-bottom:calc(76px + var(--safe-bottom))}
.logs-list{overflow-y:auto; display:flex; flex-direction:column; gap:var(--s-3); padding-bottom:var(--s-2)}
.logrow{
  display:flex; gap:var(--s-3); align-items:center; padding:var(--s-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1);
  cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.logrow:hover{background:var(--g-50); border-color:var(--g-200)}
.logrow:active{transform:translateY(1px)}
.logrow canvas{width:92px; height:64px; border-radius:10px; flex:none; background:var(--g-50); pointer-events:none}
.logrow .lr-body{flex:1; min-width:0}
.lr-date{font-size:var(--t-xs); color:var(--text-faint)}
.lr-stats{font-size:var(--t-md); font-weight:700; margin-top:2px}
.lr-stats i{font-style:normal; font-weight:500; font-size:var(--t-xs); color:var(--text-mut)}
.lr-new{font-size:var(--t-xs); color:var(--g-600); margin-top:3px; font-weight:500}
.lr-del{width:40px; height:40px; flex:none; border:none; background:transparent; color:var(--danger); border-radius:10px; transition:background var(--dur) var(--ease), opacity var(--dur) var(--ease)}
.lr-del:hover{background:var(--danger-bg)}

/* 削除した散歩の復元セクション */
.del-toggle-btn{
  display:flex; align-items:center; gap:6px;
  margin-top:var(--s-4); padding:var(--s-2) var(--s-3);
  width:100%; border:1px dashed var(--line-2); border-radius:var(--r-sm);
  background:transparent; color:var(--text-faint); font-family:var(--font-ui); font-size:var(--t-xs); font-weight:500;
  cursor:pointer; text-align:left;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.del-toggle-btn:hover{ background:var(--g-50); border-color:var(--g-300); color:var(--text-mut); }
.del-toggle-icon{ transition:transform var(--dur) var(--ease); flex:none; }
.del-toggle-icon.open{ transform:rotate(180deg); }
.del-logs-panel{ overflow:hidden; max-height:0; transition:max-height 260ms var(--ease); }
.del-logs-panel.open{ max-height:600px; }
.del-logrow{
  display:flex; align-items:center; gap:var(--s-3); padding:var(--s-2);
  border-radius:var(--r-sm); opacity:.65;
  transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.del-logrow:first-child{ margin-top:var(--s-2); }
.del-logrow:hover{ opacity:1; background:var(--g-50); }
.del-lr-body{ flex:1; min-width:0; }
.del-restore-btn{
  flex:none; padding:0 var(--s-3); height:32px;
  border:1.5px solid var(--g-300); border-radius:var(--r-pill);
  background:transparent; color:var(--g-500); font-family:var(--font-ui); font-weight:600; font-size:var(--t-xs);
  cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.del-restore-btn:hover{ background:var(--g-50); border-color:var(--g-500); color:var(--g-600); }
.del-restore-btn:active{ transform:translateY(1px); }

.empty{
  text-align:center; padding:var(--s-7) var(--s-5); color:var(--text-mut);
}
.empty .em-art{width:88px; height:88px; margin:0 auto var(--s-4); border-radius:50%; background:var(--surface); border:1px dashed var(--line-2); display:grid; place-items:center; color:var(--g-300)}
.empty h3{margin:0 0 6px; color:var(--text); font-size:var(--t-md)}
.empty p{margin:0 0 var(--s-4); font-size:var(--t-sm); line-height:1.6}

/* サマリー */
.sum-thumb{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-1)}
.sum-thumb canvas{display:block; width:100%; height:180px; background:var(--bg)}
.sum-stats{display:flex; gap:var(--s-2); margin-top:var(--s-4)}
.sum-stat{flex:1; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s-3); text-align:center}
.sum-num{display:block; font-family:var(--font-disp); font-weight:600; font-size:var(--t-lg); font-variant-numeric:tabular-nums}
.sum-num.accent{color:var(--g-600)}
.sum-num i{font-style:normal; font-family:var(--font-ui); font-size:var(--t-xs); font-weight:500; color:var(--text-mut); margin-left:1px}
.sum-lbl{display:block; font-size:var(--t-xs); color:var(--text-faint); margin-top:3px}
.sum-msg{margin:var(--s-4) 0 0; text-align:center; font-size:var(--t-sm); color:var(--g-700)}
.sum-actions{display:flex; flex-direction:column; align-items:stretch; gap:var(--s-2); margin-top:var(--s-4)}
.sum-discard{
  background:none; border:1px solid var(--line); border-radius:var(--r);
  padding:5px 16px; font-family:var(--font-ui); font-size:var(--t-xs);
  font-weight:500; color:var(--text-mut); cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sum-discard:hover{ border-color:var(--danger); color:var(--danger); }

/* ===== タブバー ===== */
.tabbar{
  position:absolute; left:0; right:0; bottom:0; z-index:9;
  display:flex; padding:8px var(--s-4) calc(8px + var(--safe-bottom));
  background:linear-gradient(rgba(250,252,246,0), var(--surface) 55%);
  border-top:1px solid var(--line); backdrop-filter:blur(8px);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; padding:8px 0; min-height:52px; border-radius:12px;
  color:var(--text-faint); font-size:var(--t-xs); font-weight:500;
  transition:color var(--dur) var(--ease);
}
.tab:hover{color:var(--text-mut)}
.tab.is-active{color:var(--accent-ink)}
.tab.is-active svg{filter:drop-shadow(0 2px 4px rgba(63,142,42,.25))}
body[data-view="active"] .tabbar{display:none}

/* ===== トースト ===== */
.toast{
  position:absolute; left:50%; transform:translate(-50%,16px); z-index:20;
  bottom:calc(84px + var(--safe-bottom)); max-width:88%;
  background:var(--text); color:var(--g-50); padding:12px 18px; border-radius:var(--r-pill);
  font-size:var(--t-sm); font-weight:500; box-shadow:var(--sh-2);
  display:flex; align-items:center; gap:12px; opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.show{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.toast .undo{background:none; border:none; color:var(--g-300); font-weight:700; padding:4px 6px; text-decoration:underline}

/* ===== アニメーション ===== */
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes sheetUp{from{transform:translateY(18px); opacity:.6}to{transform:none; opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,142,42,.45)}70%{box-shadow:0 0 0 10px rgba(63,142,42,0)}100%{box-shadow:0 0 0 0 rgba(63,142,42,0)}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* やや広い画面（PCプレビュー枠の外でも崩れない） */
@media (min-width:520px){
  #app{max-width:440px; margin:0 auto; box-shadow:var(--sh-2)}
}

/* =========================================================
   フェーズ2：モック準拠ホーム（縦積み・地図カード・ボトムナビ）
   ========================================================= */
:root{ --nav-h:calc(60px + var(--safe-bottom)); }
#app{background:var(--bg)}

/* ビュー切替（ホーム/ログ/そだち）。ナビの上を占有 */
.view{
  position:absolute; left:0; right:0; top:0; bottom:var(--nav-h);
  display:flex; flex-direction:column;
}
.view.hidden{display:none !important}

/* --- ホーム --- */
#homePanel{ padding:calc(var(--safe-top) + 4px) var(--s-4) var(--s-3); gap:0; }
.hhead{ display:flex; align-items:center; justify-content:space-between; padding:4px 2px 2px; }
.hhead .brand{ display:flex; align-items:center; gap:6px; }
.hhead .brand-mark{ color:var(--g); display:flex; align-items:center; flex:none; }
.hhead .brand-name{ font-family:var(--font-disp); font-weight:600; font-size:var(--t-lg); color:var(--ink); letter-spacing:-.01em; }
.place{ display:inline-flex; align-items:center; gap:5px; font-size:var(--t-xs); color:var(--mut); max-width:55%; }
.place .ic{ color:var(--g); flex:none; }
.place #mapPlace{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.home-sub{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:6px 2px 8px; }
.home-concept{ margin:0; font-size:13px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-badges{ display:flex; align-items:center; gap:var(--s-2); flex-shrink:0; }
.home-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:var(--r-pill);
  background:#EAF2E0; border:none;
  font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--g-600);
  cursor:pointer; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.home-badge:hover{ background:var(--g-100); }
.home-badge:active{ transform:translateY(1px); }
.badge-ico{ display:flex; align-items:center; flex-shrink:0; }
.badge-ico svg{ display:block; }
.badge-label{ font-size:12px; color:var(--mut); white-space:nowrap; flex-shrink:0; }

.explore-block{ padding:8px 2px 10px; }
/* 育ち：草・花の2ゲージ */
.dual-gauges{ display:flex; flex-direction:column; gap:var(--s-3); padding:2px 0 4px; }
.gauge{ display:flex; align-items:center; gap:9px; }
.g-ico{ flex:none; display:flex; }
.g-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.g-top{ display:flex; align-items:baseline; gap:8px; }
.g-cap{ font-size:var(--t-xs); color:var(--mut); flex:none; }
.g-stage{ font-family:var(--font-disp); font-weight:600; font-size:var(--t-lg); color:var(--g-deep); line-height:1; flex:none; }
.g-next{ flex:1; min-width:0; text-align:right; font-size:var(--t-xs); color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gauge .hbar{ margin:0; }
.g-top .full-badge{ margin:0; align-self:center; }
.explore-top{ display:flex; align-items:baseline; gap:8px; }
.explore-top .explore-cap{ flex:none; }
.explore-top .cap-help{ flex:1; min-width:0; margin:0; align-self:flex-end; padding-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* 1行に収め、はみ出す時は…で省略 */
/* 100%「満開」バッジ */
.full-badge{ align-self:flex-end; flex:none; margin-bottom:2px; padding:3px 10px; border-radius:var(--r-pill);
  font-size:var(--t-xs); font-weight:700; color:var(--gold-core); background:#FCF3D6; border:1px solid #F0D98A;
  white-space:nowrap; animation:rise var(--dur) var(--ease); }
.explore-cap{ font-size:var(--t-sm); color:var(--mut); }
.explore-pct{ font-family:var(--font-disp); font-weight:600; font-size:26px; line-height:1; color:var(--g-deep); font-variant-numeric:tabular-nums; }
.explore-pct i{ font-style:normal; font-size:15px; margin-left:1px; }
.hbar{ height:8px; background:var(--track); border-radius:6px; margin:10px 0 9px; overflow:hidden; }
.hbar-fill{ height:100%; width:0%; background:var(--g); border-radius:6px; transition:width 600ms var(--ease); }
.cap-help{ margin:1px 0 8px; font-size:var(--t-xs); color:var(--text-faint); line-height:1.4; }
.bloom-line{ display:flex; align-items:center; gap:6px; margin:0; font-size:var(--t-xs); color:var(--mut); }
.bloom-line .ic{ color:var(--g); flex:none; }

/* 地図スロット（各ビューに1つ。#mapwrap をここへ移動して全タブで表示） */
.mapholder{ position:relative; flex:1 1 auto; min-height:140px; }
.mapholder.mh-sm{ flex:none; height:190px; }   /* あしあと：上部に小さめの地図 */
/* 地図そのものをカード化（スロットいっぱいに収まる） */
#mapwrap{ position:absolute; inset:0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid #DBE4CE; box-shadow:var(--sh-1); background:var(--bg); touch-action:none; }
#mapwrap canvas{ display:block; }
/* デモ/キャンバス時の自作ズームはカード右上に */
#mapwrap .mapctl{ position:absolute; top:10px; right:10px; left:auto; }
/* MapLibreネイティブコントロールもカード内の角に寄せる */
#mapwrap .maplibregl-ctrl-top-right{ top:10px; right:10px; }
/* 地図内の検索バー（全タブの地図に表示） */
.map-search{ position:absolute; top:10px; left:10px; right:10px; z-index:7; display:flex; align-items:center; gap:8px;
  height:40px; padding:0 6px 0 12px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:rgba(250,252,244,.94); box-shadow:var(--sh-1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.map-search .ms-ic{ color:var(--mut); flex:none; }
.map-search input{ flex:1; min-width:0; border:none; background:none; font-family:inherit; font-size:var(--t-sm); color:var(--ink); outline:none; }
.map-search input::placeholder{ color:var(--text-faint); }
.map-search input::-webkit-search-cancel-button{ display:none; }
.ms-clear{ border:none; background:none; color:var(--text-faint); font-size:13px; width:28px; height:28px; border-radius:50%; flex:none; }
.ms-clear:hover{ background:var(--g-50); color:var(--ink); }
/* 経路バー（検索ヒット時に下部へ） */
.route-bar{ position:absolute; left:10px; right:10px; bottom:10px; z-index:7; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 8px 8px 12px; border-radius:var(--r); border:1px solid var(--g-200);
  background:rgba(250,252,244,.96); box-shadow:var(--sh-2); animation:rise var(--dur) var(--ease); }
.rb-info{ flex:1 1 100%; min-width:0; display:flex; flex-direction:column; gap:1px; }
.rb-info b{ font-size:var(--t-sm); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-info span{ font-size:var(--t-xs); color:var(--g-700); font-variant-numeric:tabular-nums; }
.rb-x{ border:none; background:none; color:var(--text-faint); width:32px; height:32px; border-radius:8px; flex:none; }
.rb-x:hover{ background:var(--g-50); color:var(--ink); }
/* 検索バーを置くので、モードチップ・ネイティブコントロールは1段下へ */
#mapwrap .mode-chip{ top:58px; }
#mapwrap .maplibregl-ctrl-top-right{ top:58px; }
/* あしあとは地図が画面最上部から全面表示なので、ステータスバー(セーフエリア)分だけ下げる */
#logsMap .mode-chip{ top:calc(var(--safe-top) + 8px); }
#logsMap .maplibregl-ctrl-top-right{ top:calc(var(--safe-top) + 8px); }
/* そだちは検索バーなしなのでコントロールを上へ戻す */
body[data-view="explore"] #mapwrap .mode-chip,
body[data-view="explore"] #mapwrap .maplibregl-ctrl-top-right{ top:10px; }

/* モード切替チップ（カード左上・控えめ） */
.mode-chip{ position:absolute; top:10px; left:10px; z-index:5; display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:rgba(250,252,244,.9); color:var(--ink); font-size:var(--t-xs); font-weight:500; box-shadow:var(--sh-1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mode-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--g-mid); }
.mode-chip[aria-pressed="true"]{ background:var(--pill-bg); border-color:var(--g-200); }
.mode-chip[aria-pressed="true"] .dot{ background:var(--g-deep); }
/* 提案カード・デモバッジを地図カード内に収める */
#mapwrap .suggest{ position:absolute; left:10px; right:10px; bottom:10px; z-index:6; margin:0; box-shadow:var(--sh-2); }
#mapwrap .demo-badge{ top:10px; }

/* そだちヘッダー（2ゲージ＋歯車） */
.grow-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-2); }
.grow-head .dual-gauges{ flex:1; min-width:0; padding:0; }
.grow-head .gear-btn{ margin-top:2px; }
.grow-meta{ display:inline-flex; align-items:center; gap:var(--s-2); }
.grow-pct{ font-family:var(--font-disp); font-weight:600; font-size:var(--t-xl); color:var(--g-deep); line-height:1; font-variant-numeric:tabular-nums; }
.grow-pct i{ font-style:normal; font-family:var(--font-ui); font-size:var(--t-sm); font-weight:500; color:var(--mut); margin-left:1px; }
#explorePanel .legend{ margin-top:var(--s-2); }
/* 提案行 */
.suggest-row{ display:flex; align-items:center; gap:8px; padding:10px 2px 4px; }
.suggest-row .ic{ color:var(--g); flex:none; }
.suggest-row-txt{ font-size:var(--t-sm); color:var(--ink); }   /* 伸ばさず、提案ボタンを隣に */
.suggest-row-txt b{ font-weight:600; color:var(--g-deep); font-variant-numeric:tabular-nums; }
.pill{ font-size:var(--t-xs); color:var(--pill-tx); background:var(--pill-bg); border:none;
  padding:0 13px; min-height:32px; border-radius:14px; font-weight:500;
  transition:background var(--dur) var(--ease); }
.pill:hover{ background:#DCE8CC; }

/* 主ボタン */
.home-cta{ padding:6px 0 2px; display:flex; flex-direction:column; gap:8px; }
.btn.block{ width:100%; min-height:50px; border-radius:16px; font-size:15px; }

/* ホーム：記録中は提案行/主ボタンを隠す（地図カードが伸びる） */
body[data-view="active"] .suggest-row,
body[data-view="active"] .home-cta{ display:none; }
/* 記録中は地図の検索・経路UIを隠してすっきり（経路線・目的地ピンは残す） */
body[data-view="active"] .map-search,
body[data-view="active"] .route-bar{ display:none; }
body[data-view="explore"] .map-search,
body[data-view="explore"] .route-bar{ display:none; }
body[data-view="logs"] .map-search,
body[data-view="logs"] .route-bar{ display:none; }

/* きょうの歩数（緑×白に馴染む、はっきり読めるカード。過剰な演出はしない） */
.today-steps{ display:flex; align-items:center; gap:8px; margin:10px 0 2px; padding:9px 12px;
  background:var(--g-50); border:1px solid var(--g-100); border-radius:var(--r); }
.today-steps .ts-ico{ color:var(--g); display:grid; place-items:center; flex:none; }
.ts-label{ font-size:var(--t-sm); color:var(--mut); flex:1; }
.ts-num{ font-family:var(--font-disp); font-weight:600; font-size:var(--t-xl); line-height:1; color:var(--g-deep); font-variant-numeric:tabular-nums; }
.ts-num i{ font-style:normal; font-family:var(--font-ui); font-size:var(--t-sm); font-weight:500; color:var(--mut); margin-left:3px; }
/* アクティブ画面：歩数を緑で少し強調（他の数値と同じ大きさのまま） */
.astat-num.accent{ color:var(--g-deep); }
/* サマリーは4項目（距離・時間・歩数・新規踏破）を2×2で窮屈にならないように */
.sum-stats.four{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }

/* --- あしあと / 育つ街 ビュー --- */
#explorePanel{ padding:0; overflow:hidden; gap:0; display:flex; flex-direction:column;
  background:var(--bg); border:none; border-radius:0; box-shadow:none; }
/* 上部（2ゲージ＋設定）は固定。mapと凡例を縦に収める */
#explorePanel > .grow-head{ flex:none; padding:calc(var(--safe-top) + 6px) var(--s-4) var(--s-2);
  border-bottom:1px solid var(--line); background:var(--bg); }
.explore-body{ flex:1; min-height:0; padding:var(--s-3) var(--s-4) var(--s-3);
  display:flex; flex-direction:column; gap:var(--s-2); overflow:hidden; }
.explore-body .mapholder{ flex:1; min-height:120px; }
/* 歩いた距離・道 */
.explore-note{ flex:none; font-size:var(--t-xs); color:var(--text-mut); }
/* 凡例エリア（常時表示） */
.explore-legend{ flex:none; border-top:1px solid var(--line-2); padding-top:var(--s-2); }
#explorePanel::before{ display:none; }
/* あしあと：地図を全面に大きく表示し、一覧は下から出るシート */
#logsPanel{ padding:0; overflow:hidden; background:var(--bg); }
.mapholder.mh-fill{ position:absolute; inset:0; flex:none; min-height:0; }
.logs-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:6; max-height:70%;
  display:flex; flex-direction:column; background:var(--bg);
  border-radius:var(--r-lg) var(--r-lg) 0 0; border-top:1px solid var(--line); box-shadow:var(--sh-2);
  padding:4px var(--s-4) calc(var(--s-3) + var(--safe-bottom));
  transition:transform 260ms var(--ease); }
.logs-sheet.collapsed{ transform:translateY(calc(100% - 52px)); }   /* グリップ＋見出しだけ覗く */
.logs-sheet .grip{ width:56px; height:24px; border:none; background:none; margin:0 auto; display:block; cursor:grab; touch-action:none; position:relative; }
.logs-sheet .grip::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:42px; height:5px; border-radius:var(--r-pill); background:var(--line-2); }
.logs-sheet-header{ display:flex; align-items:center; justify-content:center; gap:var(--s-2); margin-bottom:var(--s-2); cursor:pointer; user-select:none; }
.logs-sheet-header:hover .logs-sheet-title{ color:var(--g-500); }
.logs-sheet-title{ margin:0; text-align:center; font-family:var(--font-disp); font-weight:600; font-size:var(--t-md); color:var(--ink); transition:color var(--dur) var(--ease); }
.logs-sheet-hint{ font-size:var(--t-xs); color:var(--text-faint); display:none; }
.logs-sheet.collapsed .logs-sheet-hint{ display:block; }
.logs-sheet .logs-list{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.vhead{ margin-bottom:var(--s-2); }
.vhead h2{ margin:0; font-family:var(--font-disp); font-weight:600; font-size:var(--t-lg); color:var(--ink); }
.grow-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-5); box-shadow:var(--sh-1); }
.grow-card .big-pct{ margin:2px 0 6px; }
.grow-card .stage-pill{ display:inline-block; }
.grow-card .explore-note{ margin:var(--s-3) 0 0; }
/* そだち：自宅設定（住所入力 ＋ 現在地ボタン） */
.btn.tiny{ white-space:nowrap; }
/* そだちヘッダーの右側（%＋設定アイコン） */
.grow-right{ display:flex; align-items:center; gap:var(--s-3); }
.gear-btn{ width:40px; height:40px; flex:none; display:grid; place-items:center; border:none; background:none;
  color:var(--mut); border-radius:50%; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.gear-btn:hover{ background:var(--g-50); color:var(--g-deep); }
.gear-btn:active{ transform:scale(.94); }

/* 設定は全画面ページ（.sheet を上書き） */
#settingsPanel{ position:absolute; inset:0; top:0; max-height:none; z-index:15;
  border:none; border-radius:0; box-shadow:none; background:var(--bg);
  padding:calc(var(--safe-top) + 8px) var(--s-4) calc(var(--s-4) + var(--safe-bottom));
  overflow-y:auto; animation:fade var(--dur) var(--ease);
  scrollbar-width:none; }
#settingsPanel::-webkit-scrollbar{ display:none; }
#settingsPanel .sheet-head{ margin-bottom:var(--s-5); }
#settingsPanel .sum-actions{ margin-top:var(--s-2); flex-direction:row; align-items:stretch; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* 設定ページのグループ */
.set-group{ margin-bottom:var(--s-5); }
/* トグルスイッチ */
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); font-size:var(--t-sm); color:var(--ink); cursor:pointer; }
.toggle{ appearance:none; -webkit-appearance:none; width:46px; height:28px; flex:none; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line-2); position:relative; cursor:pointer;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1); transition:transform var(--dur) var(--ease); }
.toggle:checked{ background:var(--g); border-color:var(--g); }
.toggle:checked::after{ transform:translateX(18px); }
.toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--g-400); }
/* 危険ボタン（初期化）。1回目で確認状態に */
.btn.danger-btn{ color:var(--danger); border-color:var(--danger-bg); }
.btn.danger-btn:hover{ background:var(--danger-bg); }
.btn.danger-btn.confirm{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); font-weight:700; }
/* 歩数オフ時は歩数表示を隠す */
body.steps-off .today-steps,
body.steps-off .astat-steps,
body.steps-off .div-steps,
body.steps-off .sum-steps{ display:none; }
.set-label{ margin:0 0 2px; font-size:var(--t-sm); font-weight:700; color:var(--ink); }
.set-sub{ margin:0 0 var(--s-3); font-size:var(--t-xs); color:var(--mut); line-height:1.5; }

/* 芽吹き度の範囲（半径）を選ぶ */
.range-setup{ display:flex; align-items:center; gap:var(--s-3); margin-top:0; }
.rs-label{ font-size:var(--t-sm); color:var(--mut); flex:none; }
.rs-select{ flex:1; min-width:0; height:42px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:var(--t-sm); appearance:auto; }
/* メートル直接指定 */
.range-m{ display:flex; align-items:center; gap:8px; margin-top:var(--s-2); }
.range-m input{ flex:1; min-width:0; height:42px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:var(--t-sm); outline:none; }
.range-m .rm-unit{ font-size:var(--t-sm); color:var(--mut); flex:none; }
.range-m .btn.tiny{ flex:none; }
.home-setup{ display:flex; align-items:center; gap:var(--s-2); margin-top:var(--s-2); }
.hs-form{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; height:42px; padding:0 6px 0 12px;
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--surface); }
.hs-form .ic{ color:var(--mut); flex:none; }
.hs-form input{ flex:1; min-width:0; border:none; background:none; font-family:inherit; font-size:var(--t-sm); color:var(--ink); outline:none; }
.hs-form input::placeholder{ color:var(--text-faint); }
.hs-form input::-webkit-search-cancel-button{ display:none; }
.home-setup .btn.tiny{ flex:none; }

/* --- ボトムナビ（モック：ホーム/ログ/そだち） --- */
.tabbar{
  position:absolute; left:0; right:0; bottom:0; z-index:9; height:var(--nav-h);
  display:flex; align-items:stretch;
  padding:6px var(--s-3) calc(8px + var(--safe-bottom));
  background:#F6FAF0; border-top:1px solid #DBE4CE; backdrop-filter:none;
}
.tab{ color:#8A9480; }
.tab.is-active{ color:var(--g); }
.tab.is-active svg{ filter:none; }

/* 記録中バー：全ビューの上に、最下部へオーバーレイ */
.active{ z-index:12; }

/* 初回オンボーディング */
.onboard{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  padding:var(--s-5); background:rgba(31,38,30,.45); animation:fade var(--dur) var(--ease); }
.onboard.hidden{ display:none !important; }
.ob-card{ width:100%; max-width:360px; background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:var(--s-5); animation:rise var(--dur) var(--ease); }
.ob-art{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); margin-bottom:var(--s-4); background:#EDF3E2; }
.ob-art svg{ display:block; width:100%; height:auto; }
.ob-tag{ display:inline-block; font-size:var(--t-xs); font-weight:700; color:var(--pill-tx); background:var(--pill-bg); padding:3px 10px; border-radius:var(--r-pill); }
.ob-title{ margin:8px 0 var(--s-2); font-family:var(--font-disp); font-weight:600; font-size:var(--t-xl); color:var(--ink); }
.ob-text{ margin:0 0 var(--s-4); font-size:var(--t-sm); color:var(--mut); line-height:1.75; }

/* トーストはナビの上に */
.toast{ bottom:calc(var(--nav-h) + 14px); }