/* style.css -- michikusa Web UI
   色・太さ等の値は config.js から CSS変数として注入する(app.js の applyConfigToCSS)。
   ここでは構造とレイアウトだけを持つ。 */

:root{
  --bg:#0d0f12;
  --surface:#16191f;
  --surface2:#1c2028;
  --border:rgba(255,255,255,0.08);
  --text:#e8eaed;
  --text-sub:#9aa0a6;
  --text-weak:#5f6368;
  --danger:#ff5470;
  --road-base:#2a2f3a;

  --axis-walk-color:#ff8a3d;
  --axis-walk-strong:#ffab6b;
  --axis-walk-bg:rgba(255,138,61,0.14);
  --axis-scenery-color:#3ddc97;
  --axis-scenery-strong:#3ddc97;
  --axis-scenery-bg:rgba(61,220,151,0.14);

  --radius-card:16px;
  --radius-btn:10px;
  font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{ height:100%; }
body{ background:#000; color:var(--text); overflow:hidden; }
#app{
  position:relative; width:100%; height:100vh; height:100dvh;
  background:var(--bg); overflow:hidden;
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

#map{ position:absolute; inset:0; background:#10131a; }
.maplibregl-ctrl-attrib{ font-size:10px !important; }

.top-bar{
  position:absolute; top:0; left:0; right:0;
  padding:14px 16px 0;
  display:flex; justify-content:space-between; align-items:flex-start;
  z-index:20; pointer-events:none;
}
.top-bar > *{ pointer-events:auto; }
.status-chip{
  display:flex; align-items:center; gap:7px;
  background:rgba(22,25,31,0.88);
  backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:999px;
  padding:9px 14px;
  font-size:13px; font-weight:600; color:var(--text-sub);
}
.status-chip .emoji{ font-size:15px; }
.status-chip b{ color:var(--text); font-weight:700; }

.icon-btn{
  width:44px; height:44px; border-radius:50%;
  background:rgba(22,25,31,0.9); backdrop-filter:blur(14px);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--text);
  cursor:pointer;
}
.right-stack{
  position:absolute; right:16px; top:14px; z-index:20;
  display:flex; flex-direction:column; gap:10px;
}
.locate-btn{ position:absolute; right:16px; z-index:15; }

.topbar-controls{
  position:absolute; left:16px; z-index:20;
  top:14px;            /* 状態チップを出さないので画面上端から(app.jsのapplyLayoutと対) */
  /* 🚨 右上の歯車(44px)と重ならないよう場所を空ける。
     重なると歯車が押しにくくなる(実測でタブが歯車の下に潜り込んでいた)。 */
  right:70px;
  display:none; flex-direction:column; gap:8px;
}
.topbar-controls.show{ display:flex; }
.topbar-group{
  display:flex; gap:6px;
  background:rgba(22,25,31,0.9); backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:14px; padding:5px;
}
.topbar-group button{
  flex:1; border:none; background:transparent; color:var(--text-sub);
  font-family:inherit; font-size:12.5px; font-weight:600;
  padding:8px 4px; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px;
  white-space:nowrap;
}
.topbar-group button.active{ background:var(--axis-walk-bg); color:var(--axis-walk-strong); }
.topbar-group button.active.axis-scenery{ background:var(--axis-scenery-bg); color:var(--axis-scenery-strong); }

.sheet{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--surface);
  border-radius:20px 20px 0 0;
  border-top:1px solid var(--border);
  box-shadow:0 -8px 30px rgba(0,0,0,0.5);
  z-index:30;
  transition:height 280ms cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
  overflow:hidden;
  height:132px;
}
.sheet.expanded{ height:640px; }
.sheet-handle{ display:flex; justify-content:center; padding:10px 0 6px; cursor:pointer; flex-shrink:0; }
.sheet-handle .bar{ width:36px; height:4px; border-radius:2px; background:var(--text-weak); }
.sheet-summary{
  padding:0 18px 14px; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  flex-shrink:0;
}
.sheet-summary .label{ font-size:14px; color:var(--text-sub); font-weight:600; }
.sheet-summary .count{ font-size:13px; color:var(--text-weak); margin-top:2px; }
.sheet-summary .chev{ font-size:20px; color:var(--text-weak); transition:transform 200ms; }
.sheet.expanded .sheet-summary .chev{ transform:rotate(180deg); }

.sheet-body{ flex:1; overflow-y:auto; padding:0 16px 16px; }
.sheet-empty{ text-align:center; color:var(--text-weak); font-size:13px; padding:24px 12px; }

/* お気に入り */
.fav-mark{ color:#ffc44d; margin-right:5px; font-size:12px; vertical-align:1px; }
#saveBtn.is-fav{ color:#ffc44d; border-color:rgba(255,196,77,0.45); }

/* 一覧の状態表示(読み込み中 / エラー / 0件)。3つとも同じ枠に収める */
.sheet-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:32px 16px;
}
.sheet-state-icon{ font-size:28px; line-height:1; }
.sheet-state-text{ color:var(--text-sub); font-size:13px; line-height:1.6; max-width:280px; }
.sheet-state--error .sheet-state-text{ color:var(--text); }

/* 読み込み中のスピナー(画像を使わずCSSだけで回す) */
.sheet-spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--axis-walk-color);
  animation:michikusa-spin 900ms linear infinite;
}
@keyframes michikusa-spin{ to{ transform:rotate(360deg); } }

/* 動きを減らす設定の端末では回さない(アクセシビリティ) */
@media (prefers-reduced-motion: reduce){
  .sheet-spinner{ animation:none; border-top-color:var(--text-sub); }
}

.sheet-retry{
  margin-top:2px;
  padding:9px 20px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
  font-size:13px; font-weight:600;
  cursor:pointer;
}
.sheet-retry:hover{ background:var(--surface); }
.sheet-retry:active{ transform:translateY(1px); }

.road-card{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:14px;
  margin-bottom:10px;
  display:flex; align-items:center; gap:14px;
  cursor:pointer;
}
.road-card .badge{
  font-size:11px; font-weight:600; letter-spacing:.03em;
  color:#1a0e00; background:var(--axis-walk-color);
  padding:3px 8px; border-radius:6px; flex-shrink:0;
}
.road-card .badge.axis-scenery{ background:var(--axis-scenery-color); color:#04241a; }
.road-card .info{ flex:1; min-width:0; }
.road-card .route-name{ font-size:15px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.road-card .segment{ font-size:12.5px; color:var(--text-sub); margin-top:2px; }
.road-card .meta{ display:flex; gap:10px; margin-top:6px; font-size:11.5px; color:var(--text-weak); flex-wrap:wrap; }
.road-card .meta span.hot{ color:var(--axis-walk-strong); font-weight:600; }
.road-card .gauge{ width:52px; height:52px; flex-shrink:0; position:relative; }
.road-card .gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.road-card .gauge .track{ fill:none; stroke:#2a2f3a; stroke-width:6; }
.road-card .gauge .val{ fill:none; stroke-width:6; stroke-linecap:round; }
.road-card .gauge .num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:var(--text); }

.ad-slot{
  border:1px dashed var(--text-weak);
  border-radius:var(--radius-card);
  padding:14px;
  margin-bottom:10px;
  text-align:center;
  color:var(--text-weak);
  font-size:12px;
}

.detail{
  position:absolute; inset:0;
  background:var(--bg);
  z-index:50;
  display:none;
  flex-direction:column;
}
.detail.show{ display:flex; }
.detail-hero{ height:170px; position:relative; flex-shrink:0; background:#10131a; overflow:hidden; }
.detail-hero svg{ width:100%; height:100%; }
.detail-back{
  position:absolute; top:14px; left:14px; width:38px; height:38px; border-radius:50%;
  background:rgba(13,15,18,0.75); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text);
  z-index:5; cursor:pointer;
}
.detail-body{ flex:1; overflow-y:auto; padding:22px 18px 110px; }
.detail-title-block{ padding-top:2px; }
.detail-title-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.route-num{ font-size:23px; font-weight:600; color:var(--text); }
.route-alias{ font-size:13px; color:var(--text-weak); }
.detail-segment{ font-size:19px; font-weight:700; margin-top:6px; line-height:1.4; }
.detail-length{ font-size:13px; color:var(--text-sub); margin-top:4px; }

.gauge-row{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.gauge-card{
  flex:1; min-width:120px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:16px; text-align:center;
}
.gauge-card .arc{ width:88px; height:88px; margin:0 auto; position:relative; }
.gauge-card .arc svg{ width:100%; height:100%; transform:rotate(-90deg); }
.gauge-card .arc .track{ fill:none; stroke:#2a2f3a; stroke-width:7; }
.gauge-card .arc .val{ fill:none; stroke-linecap:round; stroke-width:7; }
.gauge-card .arc .center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-card .arc .center .n{ font-size:22px; font-weight:600; color:var(--text); line-height:1.1; }
/* スコアの分母(基準点)。2026-08-24 本人指示 */
.gauge-card .arc .center .scale{ font-size:10px; color:var(--text-weak); margin-top:1px; }
.gauge-card .label{ font-size:12px; color:var(--text-sub); margin-top:8px; font-weight:600; }
.gauge-card .sub{ font-size:11px; color:var(--text-weak); margin-top:2px; }

.stat-list{ margin-top:20px; }
.stat-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.stat-row:last-child{ border-bottom:none; }
.stat-row .k{ font-size:13.5px; color:var(--text-sub); }
.stat-row .v{ font-size:15px; font-weight:600; color:var(--text); }
.warn-row{
  margin-top:14px; padding:12px 14px; border-radius:12px;
  background:rgba(255,84,112,0.1); border:1px solid rgba(255,84,112,0.3);
  font-size:12.5px; color:#ff9baa; line-height:1.6;
}

.action-bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 65%, transparent);
  display:flex; gap:10px;
  z-index:10;
}
.action-bar button{
  height:52px; border-radius:var(--radius-btn); border:none;
  font-family:inherit; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  color:var(--text);
  background:var(--surface2); border:1px solid var(--border);
  white-space:nowrap;
}
.action-bar button.primary{
  flex:2.2; background:var(--axis-walk-color); color:#1a0e00; border:none;
  font-size:14px;
}
.action-bar button.secondary{
  flex:1; flex-direction:column; gap:2px; font-size:11px;
}
.action-bar button .ic{ font-size:17px; }
.detail-ad{ margin-top:20px; }

.settings{
  position:absolute; inset:0;
  background:var(--bg);
  z-index:70;
  display:none;
  flex-direction:column;
}
.settings.show{ display:flex; }
.settings-header{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.settings-header .icon-btn{ width:36px; height:36px; font-size:15px; }
.settings-header h1{ font-size:17px; font-weight:700; }
.settings-body{ flex:1; overflow-y:auto; padding:20px 18px; }
.settings-group{ margin-bottom:28px; }
.settings-group .group-title{ font-size:12.5px; color:var(--text-sub); font-weight:700; margin-bottom:10px; letter-spacing:.02em; }
.settings-options{
  display:flex; gap:8px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px;
}
.settings-options button{
  flex:1; min-width:80px; border:none; background:transparent; color:var(--text-sub);
  font-family:inherit; font-size:14px; font-weight:600;
  padding:14px 8px; border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.settings-options button .emoji{ font-size:24px; }
.settings-options button.active{ background:var(--axis-walk-bg); color:var(--axis-walk-strong); }
.settings-options button.active.axis-scenery{ background:var(--axis-scenery-bg); color:var(--axis-scenery-strong); }
.settings-note{ font-size:11.5px; color:var(--text-weak); margin-top:10px; line-height:1.6; }

@media (max-width: 360px){
  .action-bar button.secondary{ font-size:10px; }
}