/* ===== テーマ変数（インディゴ） ===== */
:root{
  --bg:#fafaf8;
  --surface:#ffffff;
  --primary:#3b4cc0;
  --primary-light:#ebeefb;
  --primary-mid:#6b7ad4;
  --primary-dark:#1e2a6e;
  --text-primary:#2C2C2A;
  --text-secondary:#5F5E5A;
  --text-muted:#757370;
  --border:#C5C3BB;
  --border-light:#e8e6e0;
  --mono:'DM Mono',monospace;
  --font:'Noto Sans JP',sans-serif;
  --r-sm:8px;--r-md:14px;--r-lg:18px;--r-xl:24px;
}
/* ===== プルトゥリフレッシュ ===== */
#ptr-indicator{position:relative;height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:height .2s ease;z-index:10}
#ptr-indicator svg{width:22px;height:22px;stroke:var(--text-muted);fill:none;stroke-width:1.6;stroke-linecap:round;transition:stroke .15s}
#ptr-indicator.pulling{height:48px}
#ptr-indicator.pulling.ready svg{stroke:var(--primary)}
#ptr-indicator.releasing{height:48px}
#ptr-indicator.releasing svg{stroke:var(--primary);animation:spin .55s ease-in-out infinite}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg);color:var(--text-primary);font-size:14px}
button{font-family:inherit;cursor:pointer;background:none;border:none}
input,select,textarea{font-family:inherit}

/* ===== アプリレイアウト ===== */
#app{display:flex;flex-direction:column;height:100%;max-width:430px;margin:0 auto;background:var(--bg);position:relative;overflow:hidden}
.screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:72px;position:absolute;inset:0 0 60px 0}
.screen.hidden{display:none!important}
.screen.slide-in-right{animation:slide-in-right .22s cubic-bezier(.25,.46,.45,.94) both}
.screen.slide-in-left {animation:slide-in-left  .22s cubic-bezier(.25,.46,.45,.94) both}
.screen.slide-out-left {animation:slide-out-left  .18s cubic-bezier(.55,0,1,.45) both}
.screen.slide-out-right{animation:slide-out-right .18s cubic-bezier(.55,0,1,.45) both}
@keyframes slide-in-right{from{transform:translateX(100%);opacity:.6}to{transform:none;opacity:1}}
@keyframes slide-in-left {from{transform:translateX(-100%);opacity:.6}to{transform:none;opacity:1}}
@keyframes slide-out-left {from{transform:none;opacity:1}to{transform:translateX(-30%);opacity:0}}
@keyframes slide-out-right{from{transform:none;opacity:1}to{transform:translateX(30%);opacity:0}}

/* ===== ボトムナビ ===== */
#bottom-nav{position:absolute;bottom:0;left:0;right:0;height:60px;background:var(--surface);border-top:1px solid var(--border-light);display:flex;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom,0)}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;min-height:44px;border:none;background:none}
.nav-btn svg{width:22px;height:22px;stroke:var(--border);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.nav-btn span{font-size:11px;font-weight:500;color:var(--border);letter-spacing:.04em;transition:color .15s}
.nav-btn.active svg{stroke:var(--primary)}
.nav-btn.active span{color:var(--primary);font-weight:700}

/* ===== トースト ===== */
#toast{position:absolute;bottom:70px;left:50%;transform:translateX(-50%) translateY(6px);background:rgba(26,16,48,.9);color:#fff;font-size:12px;font-weight:500;padding:8px 16px;border-radius:20px;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:200}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== オフライン／ODPTフォールバックバナー ===== */
.info-banner{display:none;align-items:center;gap:8px;padding:8px 16px;background:rgba(59,76,192,.08);border-bottom:1px solid var(--border)}
.info-banner.show{display:flex}
.info-banner svg{width:14px;height:14px;stroke:var(--primary-mid);fill:none;stroke-width:1.5;flex-shrink:0}
.info-banner span{font-size:11px;color:var(--text-secondary)}
#offline-banner{background:rgba(200,50,50,.08);border-color:#e8c0c0}
#offline-banner svg{stroke:#c83232}
#offline-banner span{color:#8b2222}

/* ===== ミニヘッダー ===== */
.mini-header{padding:calc(18px + env(safe-area-inset-top, 0px)) 20px 12px;background:var(--bg)}
.mini-header-row{display:flex;align-items:center;justify-content:space-between}
.mini-header-sub{font-size:11px;color:var(--text-muted);font-weight:500;letter-spacing:.03em}
.mini-header-title{font-size:22px;font-weight:500;color:var(--text-primary);letter-spacing:-.5px;margin-top:2px}
.mini-header-actions{display:flex;gap:8px}
.mini-header-btn{width:36px;height:36px;border-radius:10px;border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;background:none;cursor:pointer;transition:background .12s}
.mini-header-btn:active{background:var(--primary-light)}
.mini-header-btn svg{width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:1.4;stroke-linecap:round}
.mini-header-btn.spinning svg{animation:spin .55s ease-in-out}
@keyframes spin{to{transform:rotate(360deg)}}

/* 位置ステータス（ヘッダー下） */
.loc-bar{display:flex;align-items:center;gap:6px;padding:0 20px 4px}
.loc-bar-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex-shrink:0}
.loc-bar-dot.loading{background:#f0a500;animation:blink .9s ease-in-out infinite}
.loc-bar-dot.error{background:#e74c3c}
.loc-bar-text{font-size:11px;color:var(--text-muted)}


/* ===== セクションラベル ===== */
.sec-label{display:flex;align-items:center;gap:6px;padding:12px 20px 6px}
.sec-label svg{flex-shrink:0}
.sec-label span{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:.05em}

/* ===== バス停カード（ホーム） ===== */
.stop-card-home{margin:0 16px 8px;background:transparent;border-radius:var(--r-lg);overflow:hidden;animation:card-fadein .2s ease both}
.stop-card-home.bookmarked{background:transparent}
@keyframes card-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sc-head{display:flex;align-items:center;padding:8px 4px 6px;gap:8px}
.sc-num{width:24px;height:24px;border-radius:7px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:var(--primary);flex-shrink:0}
.sc-num.is-bm{background:var(--primary)}
.sc-num.is-bm svg{stroke:none;fill:#fff}
.sc-name{font-size:15px;font-weight:500;color:var(--text-primary);flex:1}
.sc-dist{font-family:var(--mono);font-size:11px;color:var(--text-muted)}

/* ★ブックマークボタン */
.bm-btn{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;transition:background .12s}
.bm-btn:active{background:var(--primary-light)}
.bm-btn svg{width:16px;height:16px;transition:transform .15s}
.share-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:none;background:none;cursor:pointer;color:var(--text-muted);transition:background .12s,color .12s;flex-shrink:0}
.share-btn:active{background:var(--primary-light);color:var(--primary)}
/* ===== コーチマーク ===== */
.coach-bubble{background:var(--primary);color:#fff;font-size:13px;font-weight:500;padding:10px 16px;border-radius:10px;margin:0 16px 8px;animation:coach-in .4s cubic-bezier(.34,1.56,.64,1) both;position:relative;line-height:1.5}
.coach-bubble::after{content:'';position:absolute;bottom:-6px;left:24px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--primary)}
@keyframes coach-in{from{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:none}}
.coach-bubble.coach-out{animation:coach-out .2s ease forwards}
@keyframes coach-out{to{opacity:0;transform:translateY(-4px)}}
.bm-btn.active{}
.bm-btn.burst svg{animation:star-burst .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes star-burst{0%{transform:scale(1)}20%{transform:scale(1.5) rotate(-10deg)}40%{transform:scale(.85) rotate(5deg)}65%{transform:scale(1.2) rotate(-3deg)}85%{transform:scale(.95)}100%{transform:scale(1)}}

/* 乗り場グリッド */
.plat-grid{display:flex;flex-direction:column;gap:8px;padding:0 0 8px}

/* ===== 案A: バッジ統合型カード ===== */
.plat-card{background:var(--surface);border-radius:14px;border:0.5px solid var(--border-light);overflow:hidden;cursor:pointer;transition:background .12s,all .2s ease}
.plat-card:active{filter:brightness(.96)}
.plat-card.saved{border-color:var(--primary)}
/* ヘッダー行: 乗り場+路線+保存 */
.plat-head{display:flex;align-items:center;gap:8px;padding:9px 12px 0}
.plat-pole{font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-light);padding:2px 9px;border-radius:5px;flex-shrink:0}
.plat-route{font-family:var(--mono);font-size:11px;color:var(--text-muted);font-weight:500}
.plat-save{margin-left:auto;font-size:10px;color:var(--border);font-weight:600;display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;flex-shrink:0;cursor:pointer}
.plat-save:active{background:var(--primary-light)}
.plat-save.on{color:var(--primary)}
.plat-save svg{width:13px;height:13px}
/* メイン行: 行先 + 接近バッジ */
.plat-main{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 10px}
.plat-dest{font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
/* 接近バッジ */
.plat-badge{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding:5px 10px;border-radius:8px;flex-shrink:0;white-space:nowrap}
.plat-badge-near{background:#e1f5ee;color:#085041}
.plat-badge-near .plat-badge-sub{color:#0F6E56}
.plat-badge-mid{background:#faeeda;color:#412402}
.plat-badge-mid .plat-badge-sub{color:#854F0B}
.plat-badge-far{background:#f1efe8;color:#444441}
.plat-badge-far .plat-badge-sub{color:#5F5E5A}
.plat-badge-stops{font-size:13px;font-weight:500}
.plat-badge-sub{font-size:10px}
@keyframes rt-pulse-near{0%{box-shadow:0 0 0 0 rgba(26,122,74,.3)}70%{box-shadow:0 0 0 8px rgba(26,122,74,0)}100%{box-shadow:0 0 0 0 rgba(26,122,74,0)}}
@keyframes rt-pulse-mid{0%{box-shadow:0 0 0 0 rgba(186,117,23,.3)}70%{box-shadow:0 0 0 8px rgba(186,117,23,0)}100%{box-shadow:0 0 0 0 rgba(186,117,23,0)}}
@keyframes rt-pulse-far{0%{box-shadow:0 0 0 0 rgba(68,68,65,.2)}70%{box-shadow:0 0 0 8px rgba(68,68,65,0)}100%{box-shadow:0 0 0 0 rgba(68,68,65,0)}}
.plat-badge-near.rt-pulse{animation:rt-pulse-near .7s ease-out}
.plat-badge-mid.rt-pulse{animation:rt-pulse-mid .7s ease-out}
.plat-badge-far.rt-pulse{animation:rt-pulse-far .7s ease-out}
/* 回転ボーダー（接近バス badge） */
@keyframes rt-spin{to{transform:rotate(360deg)}}
.badge-wrap{position:relative;flex-shrink:0}
.badge-ring{position:absolute;inset:-2px;border-radius:10px;overflow:hidden;pointer-events:none}
.badge-ring::before{content:'';position:absolute;inset:-50%;animation:rt-spin 8s linear infinite;animation-delay:var(--rt-delay,0s)}
.badge-ring::after{content:'';position:absolute;inset:1.5px;border-radius:9px;background:inherit}
.badge-ring.rt-ring-near::before{background:conic-gradient(from 0deg,transparent 0deg,transparent 270deg,rgba(26,122,74,.35) 300deg,rgba(26,122,74,.5) 330deg,rgba(26,122,74,.35) 350deg,transparent 360deg)}
.badge-ring.rt-ring-near::after{background:#e1f5ee}
.badge-ring.rt-ring-mid::before{background:conic-gradient(from 0deg,transparent 0deg,transparent 270deg,rgba(186,117,23,.35) 300deg,rgba(186,117,23,.5) 330deg,rgba(186,117,23,.35) 350deg,transparent 360deg)}
.badge-ring.rt-ring-mid::after{background:#faeeda}
.badge-ring.rt-ring-far::before{background:conic-gradient(from 0deg,transparent 0deg,transparent 270deg,rgba(68,68,65,.2) 300deg,rgba(68,68,65,.35) 330deg,rgba(68,68,65,.2) 350deg,transparent 360deg)}
.badge-ring.rt-ring-far::after{background:#f1efe8}
.badge-wrap .plat-badge{position:relative;z-index:1}
/* フッター行: 次発予定 */
.plat-footer{font-size:11px;color:var(--text-muted);padding:8px 12px 10px;border-top:0.5px solid var(--border-light)}
.plat-source{font-size:10px;color:var(--text-muted);padding:2px 0 4px;display:flex;align-items:center;gap:4px}
.plat-source svg{width:10px;height:10px;flex-shrink:0}
.plat-source.realtime{color:#1a7a4a}
.plat-footer-dest{color:var(--primary-mid);font-weight:600}
/* 次発予定のみ（バス未検出時の右側表示） */
.plat-sched{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:1px}
.plat-sched-time{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--text-primary);line-height:1}
.plat-sched-label{font-size:10px;color:var(--text-muted);font-weight:600}
.plat-sched-remaining{font-size:10px;color:var(--text-muted);font-weight:400}
/* 遅延予測表示（GTFS-RT delay付き） */
.plat-pred{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:2px}
.plat-pred-sched{font-size:10px;color:var(--text-muted)}
.plat-pred-sched-time{text-decoration:line-through}
.plat-pred-time{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--text-primary);line-height:1}
.plat-pred-suffix{font-size:12px;font-weight:400}
.plat-pred-meta{font-size:11px;font-weight:500}
.plat-pred-meta.late{color:#dc2626}
.plat-pred-meta.ontime{color:#16a34a}
.plat-pred-meta.early{color:#2563eb}
/* 終バス */
.no-timetable{padding:12px 16px;font-size:12px;color:var(--text-muted)}

/* スケルトンローディング */
.skel-card{display:flex;flex-direction:column;gap:8px;padding:0 0 8px}
.skel-plat{background:var(--surface);border-radius:14px;border:0.5px solid var(--border-light);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.skel-row{display:flex;align-items:center;gap:8px}
.skel-block{background:linear-gradient(90deg,var(--border-light) 25%,var(--bg) 50%,var(--border-light) 75%);background-size:200% 100%;border-radius:6px;animation:shimmer 1.5s ease-in-out infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 乗り場展開ボタン */
.plat-expand-btn{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:0 0 4px;padding:6px 12px;background:transparent;border:none;color:var(--text-muted);font-size:11px;font-weight:400;cursor:pointer;width:100%;transition:color .12s}
.plat-expand-btn:active{color:var(--primary)}
.plat-expand-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;transition:transform .2s}
.plat-expand-btn.open svg{transform:rotate(180deg)}



/* お気に入り登録促進 */
.bm-prompt{margin:4px 16px 8px;background:var(--surface);border-radius:14px;border:0.5px dashed var(--border-light);padding:13px 16px;display:flex;align-items:center;gap:12px}

/* コンパクトカード（近くのバス停2位以下） */
.stop-card-compact{margin:0 16px 6px;background:var(--surface);border-radius:14px;border:0.5px solid var(--border-light);overflow:hidden;animation:card-fadein .2s ease both}
.stop-card-compact .sc-head{cursor:pointer;transition:background .12s}
.stop-card-compact .sc-head:active{background:var(--primary-light)}
.sc-chevron{width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;transition:transform .3s cubic-bezier(.34,1.56,.64,1);flex-shrink:0}
.stop-card-compact.open .sc-chevron{transform:rotate(180deg)}
.stop-card-compact.open{border-color:var(--primary)}
.sc-compact-detail{display:none;border-top:0.5px solid var(--border-light);opacity:0}
.stop-card-compact.open .sc-compact-detail{display:block;animation:spring-open .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes spring-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.bm-prompt-ico{width:36px;height:36px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bm-prompt-ico svg{width:18px;height:18px;stroke:var(--primary);fill:none;stroke-width:1.8}
.bm-prompt-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.bm-prompt-sub{font-size:11px;color:var(--text-muted);line-height:1.5}

/* メモエリア */
.bm-memo-wrap{padding:0 14px 8px}
.bm-memo-display{display:flex;align-items:center;gap:7px;cursor:pointer;padding:6px 8px;border-radius:8px;transition:background .12s}
.bm-memo-display:active{background:var(--primary-light)}
.bm-memo-text{font-size:12px;color:var(--text-secondary);flex:1;line-height:1.5}
.bm-memo-placeholder{font-size:12px;color:var(--text-muted);flex:1;font-style:italic}
.bm-memo-icon{flex-shrink:0;opacity:.5}
.bm-memo-icon svg{width:13px;height:13px;stroke:var(--text-muted);fill:none;stroke-width:1.6;stroke-linecap:round}
.bm-memo-edit{display:none;padding:2px 0 8px}
.bm-memo-edit.open{display:block}
.bm-memo-input{width:100%;padding:9px 12px;font-size:13px;border:0.5px solid var(--primary);border-radius:8px;background:var(--surface);color:var(--text-primary);outline:none;resize:none;line-height:1.5}
.bm-memo-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:7px}
.bm-memo-save{padding:7px 16px;border-radius:7px;background:var(--primary);color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.bm-memo-cancel{padding:7px 14px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:12px;cursor:pointer}
.card-divider{height:1px;background:var(--border-light);margin:0}

/* エラー・空状態 */
.error-state{text-align:center;padding:2.5rem 16px}
.error-icon{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--primary-light)}
.error-icon svg{width:28px;height:28px}
.error-title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.error-desc{font-size:13px;color:var(--text-muted);line-height:1.7;margin-bottom:16px}
.error-btn{padding:10px 24px;border-radius:20px;background:var(--primary);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.error-btn-sub{padding:9px 20px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;margin-top:8px;display:inline-block}
.bm-empty{text-align:center;padding:2rem 16px}
.bm-empty-icon{font-size:28px;margin-bottom:8px;opacity:.3}
.bm-empty-text{font-size:13px;color:var(--text-muted);line-height:1.7}

/* ===== 検索画面 ===== */
.search-top{padding:calc(12px + env(safe-area-inset-top, 0px)) 14px 0;background:var(--surface);border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:10}
.search-bar{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--r-xl);display:flex;align-items:center;gap:8px;padding:11px 16px;transition:border-color .15s}
.search-bar:focus-within{border-color:var(--primary)}
.search-bar svg{width:15px;height:15px;stroke:var(--text-muted);fill:none;stroke-width:1.8;flex-shrink:0}
.search-bar input{border:none;outline:none;font-size:15px;color:var(--text-primary);background:transparent;flex:1}
.search-bar input::placeholder{color:var(--text-muted)}
.search-clear{display:none;width:22px;height:22px;border-radius:50%;background:var(--text-muted);color:#fff;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.filter-scroll{display:flex;gap:6px;padding:10px 0 12px;overflow-x:auto;scrollbar-width:none}
.filter-scroll::-webkit-scrollbar{display:none}
.filter-chip{padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:12px;font-weight:500;white-space:nowrap;transition:all .12s}
.filter-chip.on{background:var(--primary-light);border-color:var(--primary);color:var(--primary);font-weight:700}
.result-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}
.result-count{font-size:12px;color:var(--text-muted)}
.sort-sel{font-size:12px;color:var(--text-secondary);border:1px solid var(--border);border-radius:6px;padding:4px 8px;background:var(--surface);outline:none}

/* サジェスト行 */
.suggest-head{padding:8px 16px 2px}
.suggest-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--border-light);cursor:pointer;transition:background .12s}
.suggest-row:active{background:var(--primary-light)}
.suggest-icon{width:28px;height:28px;border-radius:8px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--primary);flex-shrink:0}
.suggest-icon.recent{background:#f0f0f0;color:var(--text-muted)}
.suggest-info{flex:1;min-width:0}
.suggest-name{font-size:14px;font-weight:600;color:var(--text-primary)}
.suggest-sub{font-size:11px;color:var(--text-muted);margin-top:1px}
.suggest-dist{font-family:var(--mono);font-size:11px;color:var(--border);flex-shrink:0}

/* 検索結果カード */
.stop-card{margin:0 14px 8px;background:var(--surface);border:0.5px solid var(--border-light);border-radius:var(--r-lg);overflow:hidden;animation:card-fadein .2s ease both}
.stop-card.stagger{animation:card-fadein .2s ease both}
.stop-card.open{border-color:var(--primary)}
.stop-head{display:flex;align-items:center;padding:13px 14px;gap:10px;cursor:pointer}
.s-idx{width:28px;height:28px;border-radius:8px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--primary);flex-shrink:0}
.s-info{flex:1;min-width:0}
.s-name{font-size:15px;font-weight:700;color:var(--text-primary)}
.s-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;background:var(--bg);color:var(--text-secondary);border:1px solid var(--border)}
.s-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.star-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;transition:background .12s}
.star-btn:active{background:var(--primary-light)}
.star-btn svg{width:18px;height:18px;display:block;transition:transform .12s}
.star-btn.burst svg{animation:star-burst .4s cubic-bezier(.36,.07,.19,.97)}
.s-dist{font-family:var(--mono);font-size:11px;color:var(--border)}
.stop-detail{display:none;border-top:1px solid var(--border-light)}
.stop-card.open .stop-detail{display:block}
.stop-card.open .s-tags{display:none}
.empty-state{text-align:center;padding:3rem 16px;font-size:13px;color:var(--text-muted)}
mark{background:rgba(59,76,192,.12);color:var(--primary);border-radius:2px;padding:0 1px}

/* ===== 地図画面 ===== */
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}

/* ===== オンボーディング ===== */
#screen-onboarding{position:fixed;inset:0;z-index:400;background:var(--bg);display:flex;flex-direction:column;animation:card-fadein .3s ease}
#screen-onboarding.hidden{display:none}
.ob-carousel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 28px;position:relative;min-height:0}
.ob-slide{display:flex;flex-direction:column;align-items:center;text-align:center;animation:ob-fadein .3s ease}
.ob-slide[style*="display:none"]{display:none!important}
@keyframes ob-fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ob-slide-visual{margin-bottom:20px;border-radius:16px;overflow:visible;position:relative;background:var(--primary-light);padding:20px 14px;max-width:260px;width:100%}
.ob-icon{width:72px;height:72px;background:var(--primary);border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.ob-icon svg{width:36px;height:36px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ob-slide-title{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--text-primary);line-height:1.5;margin-bottom:6px}
.ob-slide-title em{font-style:normal;color:var(--primary)}
.ob-slide-desc{font-size:14px;color:var(--text-secondary);line-height:1.6;max-width:280px}
.ob-dots{display:flex;gap:8px;justify-content:center;padding:16px 0}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s,transform .2s}
.ob-dot.active{background:var(--primary);transform:scale(1.2)}
.ob-bottom{padding:16px 28px calc(16px + env(safe-area-inset-bottom, 0px));width:100%}
.ob-bottom-btn{width:100%;padding:16px;border-radius:var(--r-md);border:none;background:var(--primary);color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.ob-bottom-btn:active{opacity:.85}
.ob-bottom-sub{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-size:12px}
.ob-bottom-sub a{color:var(--text-muted);text-decoration:none}
.ob-bottom-sep{color:var(--border);font-size:10px}
.ob-bubble{position:absolute;top:-8px;right:10px;background:var(--primary);color:#fff;font-size:13px;font-weight:700;padding:7px 16px;border-radius:20px;white-space:nowrap;box-shadow:0 2px 12px rgba(59,76,192,.3);opacity:0;transform:translateY(8px);pointer-events:none;z-index:1}
.ob-bubble::after{content:'';position:absolute;bottom:-6px;right:24px;width:12px;height:12px;background:var(--primary);transform:rotate(45deg);border-radius:2px}
.ob-bubble.show{animation:ob-bubble-in .5s .4s ease both}
@keyframes ob-bubble-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ob-card{background:#fff;border-radius:12px;padding:12px;border:0.5px solid var(--border-light)}
.ob-card-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.ob-card-icon{width:18px;height:18px;border-radius:5px;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ob-card-name{font-size:13px;font-weight:500;color:var(--text-primary)}
.ob-card-row{display:flex;align-items:center;justify-content:space-between}
.ob-card-dest{font-size:13px;font-weight:500;color:var(--text-secondary)}
.ob-rt-badge{padding:6px 10px;border-radius:8px;text-align:center}
.ob-rt-badge-near{background:#dcf5e8}
.ob-rt-badge-mid{background:#fef6dc}
.ob-rt-stops{font-size:14px;font-weight:700}
.ob-rt-stops-near{color:#0f6e56}
.ob-rt-stops-mid{color:#85540b}
.ob-rt-est{font-size:11px}
.ob-rt-est-near{color:#1a7a4a}
.ob-rt-est-mid{color:#a67c1a}
.ob-card-ghost{background:#fff;border-radius:12px;padding:10px 12px;border:0.5px solid var(--border-light);margin-top:6px;opacity:.4;display:flex;align-items:center;justify-content:space-between}
.ob-card-ghost-name{font-size:12px;color:var(--text-muted)}
.ob-card-featured{border:2px solid var(--primary)}
.ob-fav-label{font-size:11px;color:var(--text-secondary);display:flex;align-items:center;gap:4px;margin-bottom:6px}

/* ===== ボトムシート（路線詳細） ===== */
#sheet-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);pointer-events:none;z-index:200;transition:background .25s}
#sheet-overlay.open{background:rgba(0,0,0,.35);pointer-events:all}
#route-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--surface);border-radius:18px 18px 0 0;max-height:80%;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);z-index:201}
#route-sheet.open{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:10px auto 0;flex-shrink:0}
.sheet-header{padding:12px 16px 10px;border-bottom:1px solid var(--border-light);flex-shrink:0;position:relative}
.sheet-badge{font-family:var(--mono);padding:3px 10px;border-radius:5px;font-size:13px;font-weight:500;background:var(--bg);border:1px solid var(--border);color:var(--text-secondary);display:inline-block;margin-bottom:6px}
.sheet-dest{font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--text-primary)}
.sheet-sub{font-size:11px;color:var(--text-muted);margin-top:3px}
.sheet-close{position:absolute;top:8px;right:10px;width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sheet-close svg{width:13px;height:13px;stroke:var(--text-secondary);fill:none;stroke-width:1.8;stroke-linecap:round}
.sheet-body{overflow-y:auto;flex:1;padding:8px 0 24px}
.stop-timeline{padding:0 20px}
.tl-item{display:flex;align-items:flex-start;gap:14px;min-height:44px}
.tl-line-wrap{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:20px}
.tl-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--border);background:var(--surface);flex-shrink:0;margin-top:10px}
.tl-dot.passed{background:var(--border);border-color:var(--border)}
.tl-dot.bus{width:14px;height:14px;background:#e8593c;border-color:#e8593c;margin-top:8px}
.tl-dot.selected{width:14px;height:14px;background:var(--primary);border-color:var(--primary);margin-top:8px}
.tl-seg{flex:1;width:2px;background:var(--border-light);min-height:8px;margin-top:2px}
.tl-seg.passed{background:var(--border)}
.tl-seg.before-selected{background:var(--border-light)}
.tl-seg.between{background:repeating-linear-gradient(to bottom,#e8593c 0,#e8593c 4px,var(--border-light) 4px,var(--border-light) 8px)}
.tl-info{flex:1;padding:6px 0}
.tl-name{font-size:13px;font-weight:500;color:var(--text-primary)}
.tl-name.passed{color:var(--text-muted)}
.tl-name.bus{color:#e8593c;font-weight:700}
.tl-name.selected{color:var(--primary);font-weight:700}
.tl-badge{display:inline-flex;font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle}
.tl-badge-bus{background:rgba(232,89,60,.12);color:#e8593c}
.tl-badge-you{background:var(--primary-light);color:var(--primary)}
.tl-arrival{font-family:var(--mono);font-size:12px;color:var(--text-muted);margin-top:2px}
.tl-arrival.bus{color:#e8593c;font-weight:500}
.tl-arrival.selected{color:var(--primary);font-weight:500}
/* GTFS-RT 遅延バッジ */
.rt-delay{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;margin-left:6px}
.rt-delay.late{background:#fef2f2;color:#dc2626}
.rt-delay.ontime{background:#f0fdf4;color:#16a34a}
.rt-delay.early{background:#eff6ff;color:#2563eb}
.rt-predicted{font-size:11px;color:var(--text-muted);margin-top:2px}

/* ===== マップタブ ===== */
#map-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}
#screen-map {
  padding-bottom: 0 !important;
}
#map-zoom-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26,16,48,.85);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 16px;
  z-index: 500;
  pointer-events: none;
  white-space: nowrap;
}

/* Leaflet ポップアップのカスタマイズ */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
}
.leaflet-popup-content {
  margin: 12px 14px !important;
  line-height: 1.5 !important;
}

/* ===== マップ路線ライン ===== */
#map-route-label {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  background: var(--surface, #fff);
  color: var(--text-primary, #2C2C2A);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  z-index: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.route-stop-tooltip {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* マップ路線ボトムシート */
.map-route-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg, #fff);
  border-top: 1px solid var(--border, #e0ddd8);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.1);
  z-index: 1000;
  animation: mapSheetUp .25s ease-out;
}
.map-route-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px 8px;
}
@keyframes mapSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* マップローディングオーバーレイ */
#map-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.map-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mapSpin .7s linear infinite;
}
@keyframes mapSpin {
  to { transform: rotate(360deg); }
}