*{box-sizing:border-box} html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;color:#172033}
body{display:grid;grid-template-rows:auto auto auto 1fr;background:#f3f6f9}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#fff;border-bottom:1px solid #dce3ea}
h1{font-size:19px;margin:0} header p{font-size:11px;color:#64748b;margin:2px 0 0}.status{text-align:right}.status strong{display:block}.status span{font-size:11px;color:#64748b}
.stop-search{background:#f8fafc;border-bottom:1px solid #dce3ea;padding:10px 16px}
.stop-search-inner{display:flex;gap:8px;align-items:center}.stop-search-inner label{font-weight:700;font-size:13px;white-space:nowrap}
.autocomplete-wrap{position:relative;flex:1;max-width:420px}.autocomplete-wrap input{width:100%;padding:9px 10px;border:1px solid #bfc9d5;border-radius:7px;background:#fff}
.stop-search button{padding:9px 14px;border:0;border-radius:7px;background:#172033;color:#fff;cursor:pointer}
.suggestions{display:none;position:absolute;z-index:2000;top:39px;left:0;right:0;background:#fff;border:1px solid #cbd5e1;border-radius:7px;max-height:260px;overflow:auto;box-shadow:0 5px 18px #0002}
.suggestions.show{display:block}.suggestion{padding:8px 10px;cursor:pointer;border-bottom:1px solid #eef2f6;font-size:13px}.suggestion:hover{background:#f1f5f9}.suggestion small{display:block;color:#64748b}
.selected-stop{font-size:12px;font-weight:700;margin-top:7px}
.arrivals{display:flex;gap:8px;overflow-x:auto;padding-top:8px}.arrival-card{min-width:220px;background:#fff;border:1px solid #dce3ea;border-radius:9px;padding:9px 11px}
.arrival-card .mins{font-size:22px;font-weight:800}.arrival-card .clock{font-size:11px;color:#64748b;margin-left:5px}.arrival-card .dest{font-weight:700;margin-top:3px}.arrival-card .route{font-size:12px}.arrival-card .agency{font-size:10px;color:#64748b;margin-top:4px}.arrival-card .delay{font-size:11px;margin-top:4px}.live{font-size:10px;background:#e8f5e9;border-radius:999px;padding:2px 6px;margin-left:5px}
.arrival-empty{font-size:12px;color:#64748b;padding:5px 0}
.toolbar{display:flex;flex-wrap:wrap;gap:8px 15px;align-items:center;padding:7px 14px;background:#fff;border-bottom:1px solid #dce3ea;font-size:12px}.mapsearch{margin-left:auto}.mapsearch input{padding:5px 7px;border:1px solid #cbd5e1;border-radius:6px}
#message{color:#b45309} main{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px}#map{min-height:0}#panel{overflow:auto;background:#fff;border-left:1px solid #dce3ea;padding:14px}
.empty{color:#64748b;font-size:12px;line-height:1.6}.detail h2{font-size:18px;margin:0}.headsign{font-weight:700;margin:5px 0}.via{font-size:12px;color:#64748b}.badge{display:inline-block;border:1px solid #d6dee8;border-radius:999px;padding:2px 7px;font-size:10px;margin:5px 4px 5px 0}
.info{width:100%;border-collapse:collapse;font-size:12px}.info th,.info td{padding:5px 2px;border-bottom:1px solid #eef2f6;text-align:left}.info th{width:75px;color:#64748b;font-weight:500}
.stops{list-style:none;padding:0;margin:8px 0 0 6px;border-left:2px solid #cbd5e1}.stops li{padding:0 0 8px 14px;font-size:11px}.time{color:#64748b;margin-left:4px}
.bus-marker{width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:#fff;box-shadow:0 2px 8px #0004;display:grid;place-items:center;font-size:18px}.bus-marker.dim{opacity:.25}
@media(max-width:800px){body{grid-template-rows:auto auto auto 1fr}.stop-search-inner{flex-wrap:wrap}.autocomplete-wrap{max-width:none;min-width:200px}.arrivals{padding-bottom:2px}main{grid-template-columns:1fr;grid-template-rows:minmax(320px,55vh) auto}#panel{border-left:0;border-top:1px solid #dce3ea;max-height:38vh}.mapsearch{width:100%;margin-left:0}}


.destination-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.destination-filter{
  border:1px solid #cbd5e1;
  background:#fff;
  color:#172033;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.destination-filter:hover{
  background:#f1f5f9;
}
.destination-filter.active{
  background:#172033;
  color:#fff;
  border-color:#172033;
}


/* v4.1: 行先候補が多い停留所向けの折り返し表示 */
.destination-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:7px;
  width:100%;
  margin-top:8px;
  max-height:220px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 4px 4px 0;
}

.destination-filter{
  width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.35;
  text-align:center;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#172033;
  border-radius:8px;
  padding:7px 8px;
  font-size:12px;
  cursor:pointer;
}

.destination-filter:hover{
  background:#f1f5f9;
}

.destination-filter.active{
  background:#172033;
  color:#fff;
  border-color:#172033;
}

@media(max-width:800px){
  .destination-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:190px;
  }
}

@media(max-width:460px){
  .destination-filters{
    grid-template-columns:1fr;
    max-height:180px;
  }
}


.destination-controls{margin-top:8px}
.destination-controls-row{display:flex;gap:8px;align-items:center}
.destination-controls-row input{flex:1;min-width:0;max-width:360px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:7px;background:#fff}
.secondary-button{border:1px solid #cbd5e1!important;background:#fff!important;color:#172033!important;padding:7px 10px!important;border-radius:7px!important}
.selected-destination-label{margin-top:6px;font-size:12px;font-weight:700}
.destination-filters.collapsed{display:none}
.destination-filter .count{display:inline-block;margin-left:4px;font-size:10px;opacity:.7}
.destination-filter .next{display:block;margin-top:2px;font-size:10px;opacity:.72}
@media(max-width:600px){.destination-controls-row{flex-wrap:wrap}.destination-controls-row input{max-width:none;width:100%}}


/* v4.4 arrival-card interaction */
.arrival-card-button{
  appearance:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  border:1px solid #dce3ea;
}
.arrival-card-button:hover{
  background:#f8fafc;
  border-color:#94a3b8;
}
.arrival-card-button:focus-visible{
  outline:3px solid rgba(23,32,51,.22);
  outline-offset:2px;
}


/* v4.6: 選択中バスの強調 */
.focused-marker .bus-marker{
  transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(23,32,51,.18),0 3px 12px rgba(0,0,0,.35);
  z-index:9999;
}


/* v4.7: 現在向かっている停留所と指定停留所への到着目安 */
.next-stop-status{
  margin-top:6px;
  padding:6px 7px;
  border-radius:6px;
  background:#f1f5f9;
  font-size:11px;
  font-weight:700;
}
.selected-stop-status{
  margin-top:4px;
  font-size:11px;
  color:#475569;
}


/* v4.9: 初期表示へ戻る */
.selected-stop-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.reset-view-button{
  border:1px solid #cbd5e1 !important;
  background:#fff !important;
  color:#172033 !important;
  padding:7px 11px !important;
  border-radius:7px !important;
  cursor:pointer;
  font-size:12px;
}
.reset-view-button:hover{
  background:#f1f5f9 !important;
}


/* v5.0: 多数事業者対応 */
.toolbar{
  align-items:flex-start;
}
.agency-filter-head{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.agency-filter-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  flex:1 1 100%;
}
.agency-filter-list label{
  white-space:nowrap;
}
.mini-filter-button{
  border:1px solid #cbd5e1;
  background:#fff;
  color:#172033;
  border-radius:6px;
  padding:4px 7px;
  cursor:pointer;
  font-size:11px;
}
@media(max-width:800px){
  .agency-filter-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:460px){
  .agency-filter-list{
    grid-template-columns:1fr;
  }
}


/* v5.1: VehiclePosition freshness */
.position-meta{
  margin-top:6px;
  padding-top:5px;
  border-top:1px solid #eef2f6;
  font-size:10px;
}
.position-fresh{
  color:#166534;
}
.position-warn{
  color:#b45309;
}
.position-stale{
  color:#b91c1c;
  font-weight:700;
}
.position-unknown{
  color:#64748b;
}


/* v5.3: 到着予定カードを一画面内に収める */
.arrivals{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px;
  overflow-x:hidden !important;
  overflow-y:visible !important;
  width:100%;
  padding-top:8px;
}

.arrival-card{
  min-width:0 !important;
  width:100%;
  max-width:none;
  padding:8px 9px;
}

.arrival-card .mins{
  font-size:20px;
}

.arrival-card .dest{
  font-size:13px;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.arrival-card .route,
.arrival-card .agency,
.arrival-card .delay,
.arrival-card .next-stop-status,
.arrival-card .selected-stop-status{
  overflow-wrap:anywhere;
}

@media (min-width:1400px){
  .arrivals{
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
}

@media (min-width:1100px) and (max-width:1399px){
  .arrivals{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}

@media (min-width:850px) and (max-width:1099px){
  .arrivals{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (min-width:600px) and (max-width:849px){
  .arrivals{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:380px) and (max-width:599px){
  .arrivals{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:379px){
  .arrivals{
    grid-template-columns:1fr;
  }
}


/* v5.4: 到着予定が多くても地図を画面内に残す */
.stop-search{
  min-height:0;
}

.arrivals{
  max-height:290px;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  align-content:start;
  padding-right:4px;
  scrollbar-gutter:stable;
}

/* 一覧が多い場合でもメイン地図領域を確保 */
main{
  min-height:360px;
}

/* スクロール時もカード幅を崩さない */
.arrivals > *{
  min-width:0;
}

/* 到着一覧のスクロールバーを見やすく */
.arrivals::-webkit-scrollbar{
  width:10px;
}
.arrivals::-webkit-scrollbar-track{
  background:#eef2f6;
  border-radius:8px;
}
.arrivals::-webkit-scrollbar-thumb{
  background:#94a3b8;
  border-radius:8px;
  border:2px solid #eef2f6;
}

@media (min-width:1400px){
  .arrivals{
    max-height:285px;
  }
}

@media (max-width:1099px){
  .arrivals{
    max-height:260px;
  }
}

@media (max-width:800px){
  .arrivals{
    max-height:235px;
  }

  main{
    min-height:330px;
  }
}

@media (max-width:460px){
  .arrivals{
    max-height:220px;
  }
}


.arrival-scroll-note{
  margin-top:5px;
  font-size:10px;
  color:#64748b;
}


/* v5.5: 到着一覧の最下段が切れないように修正 */
.arrivals{
  box-sizing:border-box;
  max-height:300px;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:8px 8px 18px 0 !important;
  scroll-padding-bottom:18px;
}

/* グリッド最終行の下側に必ず余白を確保 */
.arrivals::after{
  content:"";
  display:block;
  height:8px;
  grid-column:1 / -1;
}

.arrival-card{
  box-sizing:border-box;
  align-self:stretch;
}

/* 一覧と事業者フィルターの境界を明確化 */
.toolbar{
  position:relative;
  z-index:2;
  background:#fff;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid #e2e8f0;
}

@media (min-width:1400px){
  .arrivals{max-height:310px;}
}
@media (max-width:1099px){
  .arrivals{max-height:280px;}
}
@media (max-width:800px){
  .arrivals{max-height:255px;}
}
@media (max-width:460px){
  .arrivals{max-height:235px;}
}


/* v5.8: 選択車両マーカーを確実に可視化 */
.leaflet-marker-icon.focused-marker{
  z-index:10000 !important;
  opacity:1 !important;
}
.leaflet-marker-icon.focused-marker .bus-marker{
  transform:scale(1.45);
  opacity:1 !important;
  box-shadow:
    0 0 0 5px rgba(255,255,255,.92),
    0 0 0 8px rgba(23,32,51,.28),
    0 4px 14px rgba(0,0,0,.4);
}




/* v6.3 PC接近警告 */
.arrival-card-actions{margin-top:8px}
.approach-watch-button{
  width:100%;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#172033;
  border-radius:7px;
  padding:7px 8px;
  font-size:11px;
  cursor:pointer;
}
.approach-watch-button.active{
  background:#172033;
  color:#fff;
  border-color:#172033;
}
.bus-alert-overlay[hidden]{display:none!important}
.bus-alert-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(15,23,42,.60);
}
.bus-alert-dialog{
  width:min(520px,100%);
  background:#fff;
  border-radius:16px;
  padding:24px;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.bus-alert-icon{font-size:48px}
.bus-alert-dialog h2{margin:8px 0 12px;font-size:24px}
.bus-alert-body{line-height:1.7}
.bus-alert-destination{font-size:20px;font-weight:800}
.bus-alert-main{margin-top:12px;font-size:18px}
.bus-alert-route{margin-top:8px;color:#64748b;font-size:12px}
.bus-alert-actions{display:flex;gap:10px;justify-content:center;margin-top:18px}
.bus-alert-actions button{
  min-width:130px;
  padding:10px 14px;
  border:0;
  border-radius:8px;
  cursor:pointer;
}
#busAlertShowMap{background:#172033;color:#fff}

/* v6.4: 到着予定カードと接近通知ボタンの表示修正 */
.stop-search{overflow:visible}
.arrivals{min-height:150px;max-height:300px;grid-auto-rows:max-content;align-items:start;align-content:start;padding-bottom:14px!important}
.arrival-card{height:auto!important;min-height:138px;overflow:visible;display:block}
.stop-search .arrival-card .approach-watch-button{display:block;width:100%;height:auto;min-height:32px;margin-top:8px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:7px;background:#f8fafc;color:#172033;font-size:11px;font-weight:600;line-height:1.35;white-space:normal;cursor:pointer}
.stop-search .arrival-card .approach-watch-button:hover{background:#eef2f6}
.stop-search .arrival-card .approach-watch-button.active{background:#172033;color:#fff;border-color:#172033}
.arrivals:has(.arrival-card:nth-child(1):last-child),.arrivals:has(.arrival-card:nth-child(2):last-child),.arrivals:has(.arrival-card:nth-child(3):last-child){min-height:0}
@media(max-width:800px){.arrivals{min-height:0;max-height:255px}.arrival-card{min-height:132px}}


/* v6.5: 到着予定カード下部が切れる根本原因を修正 */

/*
  body の固定高グリッドで stop-search が縮められていたため、
  ページ全体は必要に応じて縦へ伸びるようにする。
*/
html{
  min-height:100%;
  height:auto;
}

body{
  height:auto !important;
  min-height:100%;
  grid-template-rows:auto auto auto minmax(360px,1fr) !important;
}

/* 到着予定領域は中身より小さく縮ませない */
.stop-search{
  min-height:auto !important;
  overflow:visible !important;
}

/*
  一覧はカード1段分を必ず完全表示。
  多数ある場合は最大約2段分で内部スクロール。
*/
.arrivals{
  min-height:0 !important;
  max-height:360px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  grid-auto-rows:max-content !important;
  align-content:start !important;
  padding:8px 8px 24px 0 !important;
}

/* カードの高さを固定・圧縮しない */
.arrival-card{
  height:max-content !important;
  min-height:0 !important;
  overflow:visible !important;
  align-self:start !important;
  padding-bottom:10px !important;
}

/* 通知ボタンまでカード寸法に含める */
.arrival-card-actions{
  display:block !important;
  position:static !important;
  margin-top:8px !important;
  padding:0 !important;
}

.stop-search .arrival-card .approach-watch-button{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-height:34px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* 一覧と事業者欄が重ならないよう完全に通常フローへ戻す */
.toolbar{
  position:relative !important;
  margin-top:0 !important;
  z-index:1 !important;
  flex-shrink:0;
}

/* 地図は十分な高さを確保 */
main{
  min-height:380px !important;
  height:520px;
}

@media(max-width:800px){
  .arrivals{
    max-height:320px !important;
  }

  main{
    height:auto;
    min-height:340px !important;
  }
}


/* v6.7: 選択中バスの一時的な位置情報欠落を保持 */
.position-hold{
  margin-top:6px;
  padding:5px 7px;
  border-radius:6px;
  background:#fff7ed;
  color:#9a3412;
  font-size:11px;
  font-weight:700;
}


/* v6.8: 地図上で選択したバスの追従 */
.popup-next-stop{
  margin-top:5px;
  font-weight:700;
  font-size:12px;
}

.reset-view-button{
  display:inline-block !important;
}


/* v6.9 停留所時刻一覧の中に現在のバス位置を表示 */
.stops .bus-between-stops{
  list-style:none;
  margin:3px 0 3px -18px;
  padding:4px 4px 4px 12px;
  border-left:2px solid #64748b;
}
.bus-position-badge{
  display:inline-block;
  padding:2px 7px;
  border-radius:999px;
  background:#172033;
  color:#fff;
  font-size:11px;
  font-weight:700;
}
.stops .bus-between-stops small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:10px;
}
.stops .current-stop{
  font-weight:700;
}


/* v6.11 次停留所GPS推定 */
.next-stop-source{
  margin-top:2px;
  font-size:10px;
  color:#64748b;
}


/* v6.12: GPS推定時も右側停留所一覧に現在位置を明確表示 */
.stops .bus-between-stops{
  margin-top:5px;
  margin-bottom:5px;
}
.bus-position-badge{
  font-size:12px;
  padding:4px 8px;
}


/* v6.14: 右側タイムテーブルを現在位置中心へ自動スクロール */
.stops .bus-between-stops,
.stops .current-stop{
  scroll-margin-block:45%;
}

.stops .bus-between-stops{
  position:relative;
}


/* v6.15: timetable centering target visibility */
#panel{scroll-behavior:auto}
#tripDetail .bus-between-stops{
  scroll-margin-top:0;
  scroll-margin-bottom:0;
}


/* v6.16: 到着予定カードの行き先後方に路線番号 */
.dest-route-no{
  display:inline-block;
  margin-left:5px;
  font-size:.86em;
  font-weight:700;
  white-space:nowrap;
}


/* v6.17: 路線番号を「走行中」のようなバッジ表示に */
.dest-route-no{
  display:inline-block;
  margin-left:6px;
  padding:2px 7px;
  border-radius:999px;
  background:#e8f5e9;
  color:#166534;
  border:1px solid #bbf7d0;
  font-size:.78em;
  font-weight:800;
  line-height:1.35;
  vertical-align:middle;
  white-space:nowrap;
}


/* =========================================================
   FINAL UI REVIEW — v7.0
   Existing functional rules are preserved; this block is the
   final visual/layout layer.
   ========================================================= */
:root{
  --ink:#172033; --muted:#64748b; --line:#dbe3ec; --soft:#f5f7fa;
  --panel:#fff; --accent:#176b50; --accent-soft:#e8f5ef;
  --warn:#b45309; --radius:12px; --shadow:0 5px 18px rgba(15,23,42,.08);
}
html,body{background:#eef2f6;color:var(--ink)}
body{grid-template-rows:auto auto auto minmax(430px,1fr)!important}
header{
  min-height:64px;padding:9px 18px;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(15,23,42,.02);z-index:20
}
.brand{display:flex;align-items:center;gap:10px}
.brand-icon{
  width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  background:var(--ink);font-size:22px
}
h1{font-size:18px;letter-spacing:.01em}
header p{font-size:11px;margin-top:3px}
.status strong{font-size:15px}.status span{display:block;margin-top:2px}

.stop-search{
  padding:10px 16px 11px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.04);
  border-bottom:1px solid var(--line)
}
.stop-search-inner{max-width:980px}
.stop-search-inner label,.section-caption{font-size:13px;font-weight:800}
.step-no{
  display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:11px;margin-right:4px
}
.autocomplete-wrap input,.destination-controls-row input,.mapsearch input{
  border:1px solid #cbd5e1;border-radius:9px;outline:none;
  transition:border-color .15s,box-shadow .15s
}
.autocomplete-wrap input{height:40px;padding:8px 12px}
.autocomplete-wrap input:focus,.destination-controls-row input:focus,.mapsearch input:focus{
  border-color:#64748b;box-shadow:0 0 0 3px rgba(100,116,139,.12)
}
.primary-button,#showArrivals{
  min-height:40px;padding:8px 16px!important;border-radius:9px!important;
  background:var(--ink)!important;font-weight:750
}
.selected-stop-row{margin-top:4px}
.selected-stop{margin-top:4px;color:var(--accent)}
.reset-view-button{font-weight:700}

.destination-controls{padding-top:7px;border-top:1px solid #eef2f6}
.section-caption{margin-bottom:7px}
.destination-filters{
  max-height:150px!important;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important;
  padding:3px 3px 5px!important
}
.destination-filter{min-height:38px;border-radius:9px!important}
.destination-filter.active{background:var(--ink)!important}
.selected-destination-label{color:var(--accent)}

.arrival-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding-top:8px;border-top:1px solid #eef2f6;font-size:13px
}
.arrival-scroll-note{margin:0!important;font-size:10px!important}
.arrivals{
  max-height:258px!important;min-height:0!important;padding:7px 6px 14px 0!important;
  gap:7px!important;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))!important
}
.arrival-card{
  position:relative;border:1px solid var(--line)!important;border-radius:11px!important;
  padding:10px 11px!important;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.04);
  transition:transform .12s,box-shadow .12s,border-color .12s
}
.arrival-card-button:hover{
  transform:translateY(-1px);box-shadow:var(--shadow);border-color:#94a3b8!important
}
.arrival-card .mins{font-size:23px!important;line-height:1;font-variant-numeric:tabular-nums}
.arrival-card .clock{font-variant-numeric:tabular-nums}
.live{
  display:inline-block;background:var(--accent-soft)!important;color:#166534;
  border:1px solid #bbf7d0;font-weight:800
}
.arrival-card .dest{font-size:14px!important;margin-top:7px!important}
.dest-route-no{
  background:var(--accent-soft)!important;color:#166534!important;border:1px solid #bbf7d0!important;
  padding:2px 7px!important
}
.next-stop-status{background:#f4f7fa!important;border-left:3px solid #94a3b8}
.selected-stop-status{font-weight:700;color:#334155!important}
.arrival-card .route{margin-top:6px;color:#334155}
.arrival-card .agency{font-size:10.5px!important}
.approach-watch-button{border-radius:8px!important}
.approach-watch-button.active{background:var(--ink)!important}

.toolbar{
  min-height:42px;padding:6px 14px!important;margin:0!important;align-items:center!important;
  border-top:0!important;box-shadow:none
}
.agency-settings{flex:1;min-width:220px}
.agency-settings summary{
  cursor:pointer;font-weight:750;font-size:12px;list-style:none;display:inline-flex;align-items:center;
  padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff
}
.agency-settings summary::-webkit-details-marker{display:none}
.agency-settings summary::after{content:"▾";margin-left:7px;color:var(--muted)}
.agency-settings[open] summary::after{content:"▴"}
.agency-settings .agency-filter-head{margin-top:7px}
.agency-settings .agency-filter-list{
  padding:8px;margin-top:5px;border:1px solid var(--line);border-radius:10px;background:#f8fafc
}
.mapsearch{margin-left:auto!important;color:var(--muted);font-size:11px}
.mapsearch input{height:31px;background:#fff}
#message{font-size:11px}

main{
  height:auto!important;min-height:430px!important;grid-template-columns:minmax(0,1fr) 330px!important;
  margin:0;background:#fff;border-top:1px solid var(--line)
}
#map{min-height:430px;background:#dce3e8}
#panel{
  padding:0!important;border-left:1px solid var(--line)!important;background:#fff;
  scrollbar-gutter:stable
}
#panel>.empty{padding:22px}
.detail{padding:16px 16px 26px}
.detail h2{font-size:17px}.headsign{font-size:14px}
.info th,.info td{padding:6px 3px}
#tripDetail>strong{
  display:block;position:sticky;top:-1px;z-index:5;background:#fff;
  padding:9px 0 7px;border-bottom:1px solid #eef2f6
}
.stops{margin-top:9px!important}
.stops li{font-size:11.5px!important;padding-bottom:9px!important}
.bus-position-badge{
  background:var(--ink)!important;box-shadow:0 2px 7px rgba(15,23,42,.14)
}
.bus-marker{
  width:34px;height:34px;font-size:19px;border:2px solid #fff;
  box-shadow:0 3px 9px rgba(15,23,42,.35)
}
.leaflet-control-zoom a{color:var(--ink)!important}

.bus-alert-dialog{border-radius:18px!important}
.bus-alert-dialog h2{color:var(--ink)}
#busAlertShowMap{background:var(--ink)!important}

@media(min-width:1500px){
  main{grid-template-columns:minmax(0,1fr) 360px!important}
  .arrivals{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}
@media(max-width:900px){
  header{padding:8px 11px}.brand-icon{width:36px;height:36px}
  .stop-search{padding:9px 10px}
  .stop-search-inner{display:grid;grid-template-columns:auto 1fr;gap:7px}
  .stop-search-inner label{grid-column:1/-1}
  #showArrivals{min-width:112px}
  .arrivals{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:245px!important}
  .toolbar{padding:6px 10px!important}
  main{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(360px,55vh) minmax(250px,40vh)!important;
    min-height:650px!important
  }
  #map{min-height:360px}
  #panel{max-height:none!important;border-left:0!important;border-top:1px solid var(--line)}
}
@media(max-width:520px){
  body{display:block!important}
  header{position:relative}
  h1{font-size:15px}.brand-icon{display:none}
  header p{font-size:10px}
  .status strong{font-size:13px}
  .stop-search-inner{grid-template-columns:1fr}
  .stop-search-inner label,#showArrivals,.autocomplete-wrap{grid-column:1}
  #showArrivals{width:100%}
  .selected-stop-row{align-items:flex-start}
  .destination-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:140px!important}
  .destination-controls-row{display:grid;grid-template-columns:1fr auto}
  .arrivals{grid-template-columns:1fr!important;max-height:265px!important}
  .arrival-card{padding:11px!important}
  .arrival-card .mins{font-size:25px!important}
  .toolbar{display:block!important}
  .mapsearch{display:flex!important;margin-top:7px!important;align-items:center;gap:6px}
  .mapsearch input{flex:1;min-width:0}
  main{display:grid!important;grid-template-rows:52vh 48vh!important;min-height:720px!important}
  #map{min-height:360px}
  #panel{min-height:320px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* v7.3: 右側タイムテーブルの現在位置表示の横ズレ修正 */
#tripDetail .stops{
  position:relative;
  padding-left:20px !important;
}

/* 通常停留所と同じ本文開始位置に揃える */
#tripDetail .stops .bus-between-stops{
  list-style:none !important;
  position:relative;
  margin:5px 0 7px 0 !important;
  padding:4px 0 4px 16px !important;
  border-left:0 !important;
  min-height:34px;
}

/* 停留所一覧の縦ライン */
#tripDetail .stops .bus-between-stops::before{
  content:"";
  position:absolute;
  left:1px;
  top:-7px;
  bottom:-7px;
  width:2px;
  background:#cbd5e1;
}

/* 現在位置を示す丸印を縦ライン上に配置 */
#tripDetail .stops .bus-between-stops::after{
  content:"";
  position:absolute;
  left:-3px;
  top:11px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#172033;
  box-shadow:0 0 0 3px #fff;
}

/* 「現在のバス位置」ラベルを停留所名と同じ左位置へ */
#tripDetail .bus-position-badge{
  display:inline-block;
  margin:0 !important;
  padding:3px 8px !important;
  border-radius:999px;
  vertical-align:middle;
  white-space:nowrap;
}

/* 「○○ → ○○」などの補足もバッジ下で揃える */
#tripDetail .stops .bus-between-stops small{
  display:block;
  margin:4px 0 0 1px !important;
  padding:0 !important;
  line-height:1.35;
}

/* 旧CSSの負のマージンが残っていても打ち消す */
#tripDetail .stops .bus-between-stops{
  margin-left:0 !important;
  transform:none !important;
}


/* v7.4: バス選択カードのhover/focus表示改善 */
.arrival-card-button{
  cursor:pointer;
  color:#172033 !important;
  background:#fff !important;
  border:1px solid #dbe3ec !important;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease !important;
}

/* hoverで内容が消えないよう、背景だけを明確に変える */
@media (hover:hover) and (pointer:fine){
  .arrival-card-button:hover{
    background:#eef6f3 !important;
    border-color:#5d9b86 !important;
    box-shadow:0 6px 18px rgba(15,23,42,.12) !important;
    transform:translateY(-1px);
    color:#172033 !important;
    opacity:1 !important;
  }

  .arrival-card-button:hover .mins,
  .arrival-card-button:hover .clock,
  .arrival-card-button:hover .dest,
  .arrival-card-button:hover .route,
  .arrival-card-button:hover .agency,
  .arrival-card-button:hover .next-stop-status,
  .arrival-card-button:hover .selected-stop-status,
  .arrival-card-button:hover .delay{
    color:inherit !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .arrival-card-button:hover .dest-route-no{
    background:#dff2e9 !important;
    color:#166534 !important;
    border-color:#86c7ad !important;
  }

  .arrival-card-button:hover .live{
    background:#dcfce7 !important;
    color:#166534 !important;
    border-color:#86efac !important;
  }

  .arrival-card-button:hover .approach-watch-button{
    background:#fff !important;
    color:#172033 !important;
    border-color:#94a3b8 !important;
  }

  .arrival-card-button:hover .approach-watch-button.active{
    background:#172033 !important;
    color:#fff !important;
    border-color:#172033 !important;
  }
}

/* キーボード操作でも同じように選択可能であることを示す */
.arrival-card-button:focus-visible{
  outline:none !important;
  background:#eef6f3 !important;
  border-color:#176b50 !important;
  box-shadow:0 0 0 3px rgba(23,107,80,.18),0 6px 18px rgba(15,23,42,.10) !important;
  color:#172033 !important;
}

/* タップ中も消えない */
.arrival-card-button:active{
  background:#e2efe9 !important;
  color:#172033 !important;
  opacity:1 !important;
  transform:translateY(0);
}


/* v7.5: スマホ用「上へ」フローティングボタン */
.mobile-back-to-top{
  display:none;
}

@media(max-width:520px){
  .mobile-back-to-top{
    position:fixed;
    right:14px;
    bottom:18px;
    z-index:99990;
    min-width:58px;
    min-height:48px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:999px;
    background:rgba(23,32,51,.94);
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:1.1;
    box-shadow:0 6px 18px rgba(15,23,42,.28);
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility .16s ease;
    align-items:center;
    justify-content:center;
    gap:3px;
  }

  .mobile-back-to-top span:first-child{
    font-size:18px;
    line-height:1;
  }

  .mobile-back-to-top.show{
    display:flex;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-back-to-top{
    transition:none !important;
  }
}


/* v7.8 広島交通・方向幕イメージ */
.leaflet-popup-content:has(.hk-sign){
  margin:0 !important;
  min-width:320px;
}

.leaflet-popup-content-wrapper:has(.hk-sign){
  padding:0;
  overflow:hidden;
  border-radius:12px;
  border:2px solid #0b6b35;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}

.hk-sign{
  background:#fff;
  color:#172033;
  min-width:320px;
}

.hk-sign-buscenter{
  border-color:#0b6b35;
}

.hk-sign-top,
.hk-detail-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.hk-sign-buscenter .hk-sign-top{
  background:#0b6b35;
  padding:12px 14px 7px;
}

.hk-route-no{
  display:inline-block;
  min-width:62px;
  padding:4px 10px;
  border-radius:5px;
  background:#fff;
  color:#0b6b35;
  font-size:26px;
  font-weight:900;
  line-height:1;
  text-align:center;
  border:1px solid rgba(255,255,255,.85);
}

.hk-via{
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
}

.hk-destination{
  padding:4px 14px 13px;
  background:#0b6b35;
  color:#fff;
  font-size:31px;
  font-weight:900;
  line-height:1.18;
  letter-spacing:.02em;
}

.hk-yuki{
  font-size:15px;
  margin-left:5px;
  white-space:nowrap;
}

.hk-info{
  padding:12px 14px 14px;
  background:#fff;
  color:#172033;
}

.hk-next-label{
  font-size:12px;
  font-weight:700;
  color:#475569;
}

.hk-next-stop{
  margin-top:2px;
  font-size:24px;
  font-weight:900;
}

.hk-source{
  display:inline-block;
  margin-top:5px;
  padding:3px 7px;
  border-radius:5px;
  border:1px solid #17823e;
  color:#0b6b35;
  background:#f5fff8;
  font-size:11px;
  font-weight:700;
}

.hk-last-position{
  margin-top:9px;
  padding-top:7px;
  border-top:1px solid #e5e7eb;
  font-size:11px;
  color:#475569;
}

/* 広島交通でも「バスセンター経由」でない場合は白ベース */
.hk-sign:not(.hk-sign-buscenter) .hk-sign-top{
  background:#fff;
  padding:11px 14px 5px;
}
.hk-sign:not(.hk-sign-buscenter) .hk-route-no{
  background:#0b6b35;
  color:#fff;
}
.hk-sign:not(.hk-sign-buscenter) .hk-destination{
  background:#fff;
  color:#172033;
  border-bottom:1px solid #e5e7eb;
}
.hk-sign:not(.hk-sign-buscenter) .hk-via{
  color:#0b6b35;
}

/* 右側詳細 */
.hk-detail{
  padding-top:0 !important;
}

.hk-detail-sign{
  margin:0 -16px 12px;
  padding:12px 16px 14px;
  background:#fff;
  border-bottom:1px solid #dbe3ec;
}

.hk-detail-buscenter .hk-detail-sign{
  background:#0b6b35;
  color:#fff;
}

.hk-detail .hk-route-no{
  min-width:52px;
  font-size:20px;
  padding:4px 8px;
}

.hk-detail:not(.hk-detail-buscenter) .hk-route-no{
  background:#0b6b35;
  color:#fff;
}

.hk-detail-destination{
  margin-top:8px;
  font-size:25px;
  font-weight:900;
  line-height:1.15;
}

.hk-detail-destination span{
  font-size:13px;
}

.hk-detail .badge{
  margin-bottom:8px;
}

.hk-detail-buscenter .badge{
  background:#eaf7ef;
  color:#0b6b35;
}

/* スマホ */
@media(max-width:520px){
  .leaflet-popup-content:has(.hk-sign){
    min-width:260px;
  }
  .hk-sign{
    min-width:260px;
  }
  .hk-route-no{
    min-width:50px;
    font-size:21px;
  }
  .hk-via{
    font-size:12px;
  }
  .hk-destination{
    font-size:25px;
  }
  .hk-next-stop{
    font-size:20px;
  }
}


/* v7.9 広島交通「基町経由」旧方向幕ブルーデザイン */
:root{
  --hk-motomachi-blue:#0638a8;
  --hk-motomachi-blue-dark:#052b83;
}

/* 地図吹き出し */
.leaflet-popup-content-wrapper:has(.hk-sign-motomachi){
  border-color:var(--hk-motomachi-blue) !important;
}

.hk-sign-motomachi .hk-sign-top{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
  padding:12px 14px 7px !important;
}

.hk-sign-motomachi .hk-route-no{
  background:#fff !important;
  color:var(--hk-motomachi-blue) !important;
  border:2px solid #fff !important;
  font-weight:900;
}

.hk-sign-motomachi .hk-via{
  display:inline-block;
  padding:4px 12px;
  border:2px solid #fff;
  border-radius:4px;
  color:#fff !important;
  font-size:16px;
  font-weight:900;
  line-height:1.1;
}

.hk-sign-motomachi .hk-destination{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
  color:#fff !important;
  padding-top:5px;
  font-size:32px;
  letter-spacing:.04em;
}

.hk-sign-motomachi .hk-info{
  border-top:2px solid var(--hk-motomachi-blue);
}

.hk-sign-motomachi .hk-source{
  color:var(--hk-motomachi-blue) !important;
  border-color:var(--hk-motomachi-blue) !important;
  background:#f7f9ff !important;
}

/* 右側車両詳細も基町経由は青い方向幕 */
.hk-detail-motomachi .hk-detail-sign{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
  color:#fff !important;
  border-bottom:0 !important;
}

.hk-detail-motomachi .hk-route-no{
  background:#fff !important;
  color:var(--hk-motomachi-blue) !important;
  border-color:#fff !important;
}

.hk-detail-motomachi .hk-via{
  display:inline-block;
  padding:4px 10px;
  border:2px solid #fff;
  border-radius:4px;
  color:#fff !important;
  font-weight:900;
}

.hk-detail-motomachi .badge{
  background:#e8efff !important;
  color:var(--hk-motomachi-blue) !important;
}

.hk-detail-motomachi .info tr:first-child th,
.hk-detail-motomachi .info tr:first-child td{
  border-top-color:#c9d7ff;
}

/* スマホでも方向幕の比率を保つ */
@media(max-width:520px){
  .hk-sign-motomachi .hk-via{
    font-size:12px;
    padding:3px 8px;
  }
  .hk-sign-motomachi .hk-destination{
    font-size:25px;
  }
}


/* =========================================================
   v7.10 広島交通「立町・本川町経由」旧方向幕デザイン
   白地＋黒文字、経由表示のみ青
   ========================================================= */
:root{
  --hk-tate-blue:#143da8;
  --hk-tate-blue-dark:#0c2f8e;
}

/* 地図吹き出し本体 */
.leaflet-popup-content-wrapper:has(.hk-sign-tate-honkawa){
  border-color:var(--hk-tate-blue) !important;
  background:#fff !important;
}

.hk-sign-tate-honkawa{
  background:#fff !important;
  color:#111827 !important;
}

/* 上段 */
.hk-sign-tate-honkawa .hk-sign-top{
  background:#fff !important;
  padding:12px 14px 8px !important;
  border-bottom:0 !important;
}

.hk-sign-tate-honkawa .hk-route-no{
  background:var(--hk-tate-blue) !important;
  color:#fff !important;
  border-color:var(--hk-tate-blue) !important;
  font-weight:900;
}

.hk-sign-tate-honkawa .hk-oldroad{
  display:inline-block;
  padding:4px 10px;
  border:2px solid #111827;
  border-radius:4px;
  background:#fff;
  color:#111827;
  font-size:17px;
  font-weight:900;
  line-height:1;
}

.hk-sign-tate-honkawa .hk-via{
  display:inline-block;
  padding:5px 10px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--hk-tate-blue),var(--hk-tate-blue-dark));
  color:#fff !important;
  border:1px solid var(--hk-tate-blue-dark);
  font-size:15px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.02em;
}

/* 行き先 */
.hk-sign-tate-honkawa .hk-destination{
  background:#fff !important;
  color:#111827 !important;
  padding:5px 14px 14px !important;
  font-size:32px;
  font-weight:900;
  border-bottom:2px solid var(--hk-tate-blue);
}

.hk-sign-tate-honkawa .hk-yuki{
  color:#111827 !important;
}

/* 下段情報 */
.hk-sign-tate-honkawa .hk-info{
  background:#fff !important;
  color:#111827 !important;
}

.hk-sign-tate-honkawa .hk-source{
  color:var(--hk-tate-blue) !important;
  border-color:var(--hk-tate-blue) !important;
  background:#f7f9ff !important;
}

/* 右側車両詳細 */
.hk-detail-tate-honkawa .hk-detail-sign{
  background:#fff !important;
  color:#111827 !important;
  border-bottom:2px solid var(--hk-tate-blue) !important;
}

.hk-detail-tate-honkawa .hk-route-no{
  background:var(--hk-tate-blue) !important;
  color:#fff !important;
  border-color:var(--hk-tate-blue) !important;
}

.hk-detail-tate-honkawa .hk-oldroad{
  display:inline-block;
  padding:4px 9px;
  border:2px solid #111827;
  border-radius:4px;
  color:#111827;
  background:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1;
}

.hk-detail-tate-honkawa .hk-via{
  display:inline-block;
  padding:4px 9px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--hk-tate-blue),var(--hk-tate-blue-dark));
  color:#fff !important;
  border:1px solid var(--hk-tate-blue-dark);
  font-weight:900;
}

.hk-detail-tate-honkawa .hk-detail-destination{
  color:#111827 !important;
}

.hk-detail-tate-honkawa .badge{
  background:#e9efff !important;
  color:var(--hk-tate-blue) !important;
}

/* スマホ */
@media(max-width:520px){
  .hk-sign-tate-honkawa .hk-oldroad{
    font-size:13px;
    padding:3px 7px;
  }

  .hk-sign-tate-honkawa .hk-via{
    font-size:11px;
    padding:4px 7px;
  }

  .hk-sign-tate-honkawa .hk-destination{
    font-size:25px;
  }
}


/* =========================================================
   v8.0 UI REFRESH
   Map-first desktop / compact mobile, based on approved mockup.
   Existing behavior and Hiroshima Kotsu curtain styles are retained.
   ========================================================= */
:root{
  --v8-navy:#071a3a;
  --v8-navy2:#0c234b;
  --v8-blue:#1647c8;
  --v8-line:#dce4ef;
  --v8-soft:#f6f8fb;
  --v8-text:#101828;
  --v8-muted:#667085;
  --v8-green:#16824b;
  --v8-shadow:0 8px 28px rgba(16,24,40,.12);
}

/* overall */
html,body{
  background:var(--v8-soft);
  color:var(--v8-text);
}
body{
  overflow-x:hidden;
}
header{
  min-height:62px;
  background:linear-gradient(100deg,var(--v8-navy),var(--v8-navy2)) !important;
  color:#fff !important;
  border-bottom:0 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
header h1, header h2, header strong, header small, header div{
  color:inherit;
}
button,input,select{
  border-radius:8px !important;
}
button{
  transition:background .15s ease,border-color .15s ease,transform .08s ease,box-shadow .15s ease;
}
button:hover{
  filter:none !important;
  box-shadow:0 2px 8px rgba(16,24,40,.12);
}
button:active{
  transform:translateY(1px);
}

/* search/control area: clean white card */
#controls,
.controls,
.search-area,
.top-controls{
  background:#fff !important;
  border-bottom:1px solid var(--v8-line) !important;
}

/* map + detail area */
#map{
  background:#e9eef4;
  border-radius:0;
}

/* Right panel becomes a proper vehicle-detail card on desktop */
#panel{
  background:#fff !important;
  border-left:1px solid var(--v8-line) !important;
  color:var(--v8-text);
}
#panel .detail{
  padding:18px !important;
}
#panel .detail h2{
  margin:0 0 6px;
  font-size:24px;
}
#panel .headsign{
  font-size:18px;
  font-weight:800;
}
#panel .badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:6px;
  font-weight:800;
}
#panel .info{
  width:100%;
  margin-top:12px;
  border-collapse:collapse;
}
#panel .info th,
#panel .info td{
  padding:8px 5px;
  border-bottom:1px solid #edf0f4;
}

/* Stop timetable: timeline visual */
#panel .stops,
#panel .stop-list,
#panel [class*="timetable"]{
  position:relative;
}
#panel .stop-row,
#panel [class*="stop-row"]{
  position:relative;
  border-bottom:1px solid #edf0f4;
}
.current-bus-position,
.current-position,
.bus-position-row{
  border-radius:7px !important;
}

/* Popup is intentionally compact: it must fit inside narrow maps */
.leaflet-popup{
  max-width:min(310px,calc(100vw - 34px)) !important;
}
.leaflet-popup-content-wrapper{
  border-radius:12px !important;
  box-shadow:var(--v8-shadow) !important;
  overflow:hidden;
}
.leaflet-popup-content{
  width:auto !important;
  max-width:290px !important;
  margin:12px 14px !important;
}
.leaflet-popup-content:has(.hk-sign){
  margin:0 !important;
  min-width:0 !important;
  width:min(290px,calc(100vw - 44px)) !important;
  max-width:290px !important;
}
.hk-sign{
  min-width:0 !important;
  width:100% !important;
  max-width:290px !important;
}
.hk-sign-top{
  gap:7px !important;
}
.hk-route-no{
  min-width:44px !important;
  font-size:18px !important;
  padding:4px 7px !important;
}
.hk-via{
  font-size:12px !important;
  padding:4px 7px !important;
}
.hk-oldroad{
  font-size:12px !important;
  padding:3px 6px !important;
}
.hk-destination{
  font-size:25px !important;
  padding:5px 12px 10px !important;
}
.hk-yuki{
  font-size:12px !important;
}
.hk-info{
  padding:10px 12px 11px !important;
}
.hk-next-label{
  font-size:11px !important;
}
.hk-next-stop{
  font-size:20px !important;
}
.hk-last-position{
  font-size:10px !important;
}

/* Selected bus marker gets stronger visual focus */
.leaflet-marker-icon.selected,
.selected-bus-marker{
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.28));
}

/* Desktop layout polish */
@media(min-width:901px){
  #panel{
    box-shadow:-5px 0 18px rgba(16,24,40,.06);
  }
  #map{
    min-height:520px;
  }
}

/* Mobile: map-first, compact controls, detail stays reachable */
@media(max-width:900px){
  header{
    min-height:52px;
  }

  .leaflet-popup{
    max-width:calc(100vw - 24px) !important;
  }
  .leaflet-popup-content:has(.hk-sign){
    width:min(270px,calc(100vw - 34px)) !important;
  }
  .hk-sign{
    max-width:270px !important;
  }
  .hk-destination{
    font-size:23px !important;
  }
  .hk-next-stop{
    font-size:18px !important;
  }

  #panel{
    border-left:0 !important;
    border-top:1px solid var(--v8-line) !important;
    box-shadow:0 -6px 20px rgba(16,24,40,.08);
  }
  #panel .detail{
    padding:14px !important;
  }
}

/* Very narrow phones */
@media(max-width:420px){
  .leaflet-popup-content:has(.hk-sign){
    width:min(248px,calc(100vw - 28px)) !important;
  }
  .hk-sign{
    max-width:248px !important;
  }
  .hk-sign-top{
    padding:8px 10px 5px !important;
  }
  .hk-destination{
    padding:4px 10px 9px !important;
    font-size:21px !important;
  }
  .hk-info{
    padding:8px 10px 9px !important;
  }
}


/* =========================================================
   v8.1 広島交通 深夜バスマーク
   実車方向幕を意識したオレンジ地＋黒文字。
   路線番号と行き先の間に独立して配置。
   ========================================================= */
.hk-nightbus-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:5px 12px 3px;
}

/* 緑・青方向幕上でもマーク自体の配色は統一 */
.hk-sign-buscenter .hk-nightbus-row,
.hk-sign-motomachi .hk-nightbus-row{
  background:inherit;
}

.hk-sign-tate-honkawa .hk-nightbus-row{
  background:#fff;
}

.hk-nightbus-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:25px;
  padding:3px 10px 4px;
  border:2px solid #111;
  border-radius:2px;
  background:#f39a19;
  color:#090909 !important;
  font-size:15px;
  font-weight:950;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

/* 右側詳細 */
.hk-detail-sign .hk-nightbus-row{
  padding:6px 0 3px;
}
.hk-detail-sign .hk-nightbus-mark{
  font-size:14px;
}

/* v8 compact popup */
@media(max-width:900px){
  .hk-nightbus-row{
    padding:4px 10px 2px;
  }
  .hk-nightbus-mark{
    min-height:22px;
    padding:3px 8px;
    font-size:12px;
    border-width:1.5px;
  }
}


/* =========================================================
   v8.2 スマホ用ポップアップ再調整
   深夜バスマーク追加後も地図内に収まるコンパクト方向幕
   ========================================================= */
@media(max-width:900px){
  .leaflet-popup{
    max-width:calc(100vw - 20px) !important;
  }

  .leaflet-popup-content-wrapper{
    max-height:min(330px,calc(100vh - 180px)) !important;
    overflow:hidden !important;
  }

  .leaflet-popup-content:has(.hk-sign){
    width:min(270px,calc(100vw - 34px)) !important;
    max-width:270px !important;
    margin:0 !important;
  }

  .hk-sign{
    width:100% !important;
    max-width:270px !important;
  }

  /* 路線番号・旧道・経由を1段にコンパクトに保持 */
  .hk-sign .hk-sign-top{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    padding:7px 9px 4px !important;
    overflow:hidden;
  }

  .hk-sign .hk-route-no{
    flex:0 0 auto;
    min-width:42px !important;
    padding:3px 6px !important;
    font-size:17px !important;
    line-height:1.05 !important;
  }

  .hk-sign .hk-oldroad{
    flex:0 0 auto;
    padding:3px 5px !important;
    font-size:11px !important;
    line-height:1 !important;
  }

  .hk-sign .hk-via{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:3px 6px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
  }

  /* 深夜マークは行き先直上だが、縦幅を最小限に */
  .hk-sign .hk-nightbus-row{
    padding:3px 9px 0 !important;
    min-height:0 !important;
  }

  .hk-sign .hk-nightbus-mark{
    min-height:19px !important;
    padding:2px 7px 3px !important;
    border-width:1px !important;
    font-size:11px !important;
    line-height:1 !important;
  }

  .hk-sign .hk-destination{
    padding:4px 9px 7px !important;
    font-size:22px !important;
    line-height:1.08 !important;
  }

  .hk-sign .hk-yuki{
    font-size:11px !important;
  }

  .hk-sign .hk-info{
    padding:7px 9px 8px !important;
  }

  .hk-sign .hk-next-label{
    margin-bottom:1px !important;
    font-size:10px !important;
    line-height:1.15 !important;
  }

  .hk-sign .hk-next-stop{
    margin-bottom:4px !important;
    font-size:18px !important;
    line-height:1.12 !important;
  }

  .hk-sign .hk-source{
    display:inline-block;
    padding:2px 5px !important;
    font-size:9.5px !important;
    line-height:1.1 !important;
  }

  .hk-sign .hk-last-position{
    margin-top:5px !important;
    padding-top:5px !important;
    font-size:9px !important;
    line-height:1.15 !important;
  }
}

/* さらに狭い端末 */
@media(max-width:420px){
  .leaflet-popup-content:has(.hk-sign){
    width:min(250px,calc(100vw - 30px)) !important;
    max-width:250px !important;
  }

  .hk-sign{
    max-width:250px !important;
  }

  .hk-sign .hk-sign-top{
    gap:4px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .hk-sign .hk-route-no{
    min-width:39px !important;
    font-size:16px !important;
  }

  .hk-sign .hk-via{
    font-size:9.5px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }

  .hk-sign .hk-destination{
    font-size:21px !important;
  }

  .hk-sign .hk-next-stop{
    font-size:17px !important;
  }
}


/* =========================================================
   v8.3 通常バス吹き出しの極端な縦長化を修正
   Leafletの自動幅計算で数文字幅まで縮むケースを防止する。
   ========================================================= */

/* 広島交通専用方向幕ではない、通常吹き出しに最低幅を保証 */
.leaflet-popup-content:not(:has(.hk-sign)){
  box-sizing:border-box;
  width:260px !important;
  min-width:230px !important;
  max-width:280px !important;
  margin:12px 14px !important;

  /* 日本語を1文字ずつ不自然に折り返さない */
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
}

/* 通常吹き出し内部の各行も、意味のある単位で折り返す */
.leaflet-popup-content:not(:has(.hk-sign)) strong,
.leaflet-popup-content:not(:has(.hk-sign)) div,
.leaflet-popup-content:not(:has(.hk-sign)) small{
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
}

/* 長い路線名・行先の行間を整える */
.leaflet-popup-content:not(:has(.hk-sign)) strong{
  display:block;
  margin-bottom:4px;
  line-height:1.3;
}

.leaflet-popup-content:not(:has(.hk-sign)) .popup-next-stop{
  margin-top:5px;
  line-height:1.35;
}

/* 位置情報や補足は少し小さくして高さを抑える */
.leaflet-popup-content:not(:has(.hk-sign)) .position-meta,
.leaflet-popup-content:not(:has(.hk-sign)) .next-stop-source,
.leaflet-popup-content:not(:has(.hk-sign)) .position-hold{
  line-height:1.3;
}

/* スマホでは地図枠からはみ出さない範囲で幅を確保 */
@media(max-width:900px){
  .leaflet-popup-content:not(:has(.hk-sign)){
    width:min(245px,calc(100vw - 42px)) !important;
    min-width:min(220px,calc(100vw - 42px)) !important;
    max-width:245px !important;
    margin:10px 12px !important;
  }
}

/* かなり狭い端末ではさらに縮小するが、細長くならない最低幅を維持 */
@media(max-width:380px){
  .leaflet-popup-content:not(:has(.hk-sign)){
    width:min(225px,calc(100vw - 30px)) !important;
    min-width:min(205px,calc(100vw - 30px)) !important;
    max-width:225px !important;
  }
}


/* =========================================================
   v8.4 停留所タイムライン
   縦ライン＋停留所ボタン＋現在位置を同一ライン上に統合
   ========================================================= */
#tripDetail .stops{
  --timeline-x:12px;
  position:relative;
  list-style:none !important;
  margin:10px 0 0 !important;
  padding:0 0 8px 0 !important;
}

/* 連続する縦ライン */
#tripDetail .stops::before{
  content:"";
  position:absolute;
  left:var(--timeline-x);
  top:13px;
  bottom:16px;
  width:2px;
  background:#9fbae8;
  border-radius:2px;
  z-index:0;
}

/* 通常停留所 */
#tripDetail .stops .timeline-stop{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
  min-height:36px;
  margin:0 !important;
  padding:4px 0 !important;
  border:0 !important;
  list-style:none !important;
  background:transparent;
  z-index:1;
}

#tripDetail .timeline-stop-dot{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  justify-self:start;
  margin-left:6px;
  width:13px;
  height:13px;
  padding:0 !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  background:#2f67bb !important;
  box-shadow:0 0 0 1px #2f67bb;
  cursor:default;
  z-index:2;
}

#tripDetail .timeline-stop-name{
  min-width:0;
  font-size:12px;
  font-weight:650;
  line-height:1.35;
  color:#1d2939;
}

#tripDetail .timeline-stop .time{
  padding-right:2px;
  font-size:11px;
  color:#475467;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* 停車中の停留所 */
#tripDetail .timeline-stop.current-stop{
  background:#eef4ff;
  border-radius:7px !important;
}
#tripDetail .timeline-stop.current-stop .timeline-stop-dot{
  width:16px;
  height:16px;
  margin-left:4.5px;
  background:#0d3f9a !important;
  box-shadow:0 0 0 2px #dbe8ff;
}
#tripDetail .timeline-stop.current-stop .timeline-stop-name{
  color:#0b3e9b;
  font-weight:850;
}

/* 現在位置を縦ライン内へ統合 */
#tripDetail .stops .bus-between-stops.timeline-current-position{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:5px;
  min-height:54px;
  margin:2px 0 !important;
  padding:5px 0 6px !important;
  border:0 !important;
  list-style:none !important;
  background:transparent !important;
  z-index:3;
}

/* 旧v7.3の擬似線/丸を無効化 */
#tripDetail .stops .bus-between-stops.timeline-current-position::before,
#tripDetail .stops .bus-between-stops.timeline-current-position::after{
  content:none !important;
  display:none !important;
}

#tripDetail .timeline-current-dot{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  justify-self:start;
  margin-left:1px;
  width:25px;
  height:25px;
  padding:0 !important;
  display:grid;
  place-items:center;
  border:2px solid #fff !important;
  border-radius:50% !important;
  background:#073b91 !important;
  color:#fff !important;
  font-size:13px;
  line-height:1;
  box-shadow:0 0 0 2px #073b91,0 3px 8px rgba(7,59,145,.22);
  cursor:default;
  z-index:4;
}

#tripDetail .timeline-current-body{
  min-width:0;
  padding-top:0;
}

#tripDetail .timeline-current-body .bus-position-badge{
  display:inline-flex !important;
  align-items:center;
  min-height:25px;
  margin:0 !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  background:#073b91 !important;
  color:#fff !important;
  font-size:11.5px;
  font-weight:850;
  line-height:1.1;
  box-shadow:none !important;
}

#tripDetail .timeline-current-body small{
  display:block !important;
  margin:5px 0 0 2px !important;
  padding:0 !important;
  color:#475467;
  font-size:10.5px;
  line-height:1.4;
}

/* 既存の左余白指定をタイムラインに合わせて解除 */
#tripDetail .stops .timeline-stop,
#tripDetail .stops .timeline-current-position{
  margin-left:0 !important;
  transform:none !important;
}

/* スマホでは少し大きめのタップ/視認サイズ */
@media(max-width:900px){
  #tripDetail .stops{
    --timeline-x:13px;
  }
  #tripDetail .stops .timeline-stop{
    grid-template-columns:36px minmax(0,1fr) auto;
    min-height:39px;
  }
  #tripDetail .timeline-stop-dot{
    width:14px;
    height:14px;
    margin-left:6px;
  }
  #tripDetail .timeline-stop-name{
    font-size:12.5px;
  }
  #tripDetail .timeline-current-dot{
    width:27px;
    height:27px;
    margin-left:0;
  }
  #tripDetail .stops .bus-between-stops.timeline-current-position{
    grid-template-columns:36px minmax(0,1fr);
  }
}


/* =========================================================
   v8.7 PC / スマホ動作分離
   PCではバス選択時にページをスクロールせず、
   地図＋右詳細の2カラム表示を維持する。
   ========================================================= */
@media(min-width:901px){
  main{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 330px !important;
    grid-template-rows:minmax(520px,1fr) !important;
    min-height:520px !important;
    height:auto !important;
  }

  #map{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    min-height:520px !important;
    height:100% !important;
  }

  #panel{
    grid-column:2 !important;
    grid-row:1 !important;
    display:block !important;
    min-width:0 !important;
    max-height:none !important;
    overflow:auto !important;
    border-top:0 !important;
    border-left:1px solid var(--v8-line) !important;
  }
}

/* 900px以下のみ、従来のスマホ縦積み表示 */
@media(max-width:900px){
  main{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(360px,55vh) minmax(250px,40vh) !important;
  }
}


/* =========================================================
   v8.8 停留所タイムライン修正
   旧デザイン由来の左側の余分な縦棒を削除。
   v8.4のノード付きタイムライン1本だけを表示する。
   ========================================================= */
#tripDetail .stops{
  border-left:0 !important;
  border-right:0 !important;
  padding-left:0 !important;
  margin-left:0 !important;
}

/* 旧CSS由来の個別の縦線を完全に無効化 */
#tripDetail .stops .bus-between-stops{
  border-left:0 !important;
}
#tripDetail .stops .bus-between-stops::before,
#tripDetail .stops .bus-between-stops::after{
  content:none !important;
  display:none !important;
}

/* 現行タイムラインの1本だけを残す */
#tripDetail .stops::before{
  display:block !important;
  content:"" !important;
}

/* 現在位置ノードを確実に前面表示 */
#tripDetail .timeline-current-position{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
}
#tripDetail .timeline-current-dot,
#tripDetail .timeline-current-body,
#tripDetail .bus-position-badge{
  visibility:visible !important;
  opacity:1 !important;
}


/* =========================================================
   v8.9 停留所一覧の現在位置復元 + PCスクロール分離
   ========================================================= */

/* 現在位置表示を一覧内で確実に見える状態にする */
#tripDetail .timeline-current-position{
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) !important;
  align-items:start !important;
  min-height:58px !important;
  margin:3px 0 !important;
  padding:6px 0 !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:4 !important;
}

#tripDetail .timeline-current-dot{
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  height:28px !important;
  margin-left:0 !important;
  border-radius:50% !important;
  background:#073b91 !important;
  color:#fff !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 2px #073b91 !important;
  font-size:13px !important;
  z-index:5 !important;
}

#tripDetail .timeline-current-body{
  display:block !important;
  min-width:0 !important;
}

#tripDetail .timeline-current-body .bus-position-badge{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:#073b91 !important;
  color:#fff !important;
  font-size:11.5px !important;
  font-weight:850 !important;
  line-height:1.1 !important;
}

#tripDetail .timeline-current-body small{
  display:block !important;
  margin:5px 0 0 2px !important;
  color:#475467 !important;
  font-size:10.5px !important;
  line-height:1.4 !important;
}

/* PC: ページ全体ではなく地図と停留所一覧を独立スクロール領域にする */
@media(min-width:901px){
  html,body{
    height:100%;
  }

  body{
    min-height:100vh !important;
    height:100vh !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-rows:auto auto auto minmax(0,1fr) !important;
  }

  main{
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
    grid-template-columns:minmax(0,1fr) 330px !important;
    grid-template-rows:minmax(0,1fr) !important;
  }

  #map{
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  #panel{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  /* 右側の停留所見出しはスクロール中も残す */
  #tripDetail>strong{
    position:sticky !important;
    top:0 !important;
    z-index:10 !important;
    background:#fff !important;
  }
}


/* =========================================================
   v8.11 広島交通「紙屋町経由」
   バスセンター経由との誤認を避けるため白ベースで表示。
   ========================================================= */
.hk-sign-kamiyacho .hk-sign-top{
  background:#fff !important;
  color:#111827 !important;
  padding:10px 12px 5px !important;
}

.hk-sign-kamiyacho .hk-route-no{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#1650b8 !important;
}

.hk-sign-kamiyacho .hk-via{
  background:#1650b8 !important;
  color:#fff !important;
  border:1px solid #0d3d91 !important;
  padding:4px 8px !important;
  border-radius:4px;
  font-weight:900;
}

.hk-sign-kamiyacho .hk-destination{
  background:#fff !important;
  color:#111827 !important;
  border-bottom:1px solid #dbe3ec !important;
}

.hk-sign-kamiyacho .hk-info{
  background:#fff !important;
  color:#111827 !important;
}

.hk-detail-kamiyacho .hk-detail-sign{
  background:#fff !important;
  color:#111827 !important;
  border-bottom:1px solid #dbe3ec !important;
}

.hk-detail-kamiyacho .hk-route-no,
.hk-detail-kamiyacho .hk-via{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#1650b8 !important;
}

.hk-detail-kamiyacho .badge{
  background:#edf3ff !important;
  color:#1650b8 !important;
}


/* =========================================================
   v8.12 深夜バスマークを経由テーマ色へ統合
   オレンジ固定をやめ、方向幕のテーマ色に合わせる。
   ========================================================= */

/* 共通: 深夜バスマーク */
.hk-sign .hk-nightbus-mark{
  font-weight:900 !important;
}

/* バスセンター経由 = 緑 */
.hk-sign-buscenter .hk-nightbus-mark{
  background:#08783f !important;
  color:#fff !important;
  border-color:#065f33 !important;
}

/* 基町経由 = 青 */
.hk-sign-motomachi .hk-nightbus-mark{
  background:#123fa4 !important;
  color:#fff !important;
  border-color:#0b2f7d !important;
}

/* 立町・本川町経由 = 白地テーマ。青をアクセントとして使用 */
.hk-sign-tate-honkawa .hk-nightbus-mark{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#0d3d91 !important;
}

/* 紙屋町経由 = 白地＋青テーマ */
.hk-sign-kamiyacho .hk-nightbus-mark{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#0d3d91 !important;
}

/* 右側詳細表示にも同じテーマ色を適用 */
.hk-detail-buscenter .hk-nightbus-mark{
  background:#08783f !important;
  color:#fff !important;
  border-color:#065f33 !important;
}

.hk-detail-motomachi .hk-nightbus-mark{
  background:#123fa4 !important;
  color:#fff !important;
  border-color:#0b2f7d !important;
}

.hk-detail-tate-honkawa .hk-nightbus-mark,
.hk-detail-kamiyacho .hk-nightbus-mark{
  background:#1650b8 !important;
  color:#fff !important;
  border-color:#0d3d91 !important;
}


/* =========================================================
   v8.13 深夜バスマーク修正
   「深夜バス」マーク自体はオレンジ＋黒文字のまま維持。
   マークの周囲（hk-nightbus-row）の背景だけ経由テーマ色に合わせる。
   ========================================================= */

/* マーク本体は全テーマ共通で元のオレンジへ戻す */
.hk-sign .hk-nightbus-mark,
.hk-detail-sign .hk-nightbus-mark,
.hk-detail-buscenter .hk-nightbus-mark,
.hk-detail-motomachi .hk-nightbus-mark,
.hk-detail-tate-honkawa .hk-nightbus-mark,
.hk-detail-kamiyacho .hk-nightbus-mark{
  background:#f39a19 !important;
  color:#090909 !important;
  border-color:#111 !important;
}

/* 地図吹き出し：マークの背景帯を経由テーマへ */
.hk-sign-buscenter .hk-nightbus-row{
  background:#08783f !important;
}

.hk-sign-motomachi .hk-nightbus-row{
  background:#123fa4 !important;
}

.hk-sign-tate-honkawa .hk-nightbus-row,
.hk-sign-kamiyacho .hk-nightbus-row{
  background:#fff !important;
}

/* 通常テーマは白 */
.hk-sign:not(.hk-sign-buscenter):not(.hk-sign-motomachi):not(.hk-sign-tate-honkawa):not(.hk-sign-kamiyacho) .hk-nightbus-row{
  background:#fff !important;
}

/* 右側詳細も同じ考え方 */
.hk-detail-buscenter .hk-nightbus-row{
  background:#08783f !important;
}

.hk-detail-motomachi .hk-nightbus-row{
  background:#123fa4 !important;
}

.hk-detail-tate-honkawa .hk-nightbus-row,
.hk-detail-kamiyacho .hk-nightbus-row{
  background:#fff !important;
}


/* =========================================================
   v8.14 深夜バス行の背景色を行き先背景と完全一致
   「深夜バス」マーク自体はオレンジのまま。
   マークを置く行の背景だけ、行き先背景と同じ色にする。
   ========================================================= */

/* バスセンター経由：行き先背景と同じ緑 */
.hk-sign-buscenter .hk-nightbus-row{
  background:#0b6b35 !important;
}

/* 基町経由：行き先背景と同じ青 */
.hk-sign-motomachi .hk-nightbus-row{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
}

/* 立町・本川町経由：行き先背景は白 */
.hk-sign-tate-honkawa .hk-nightbus-row{
  background:#fff !important;
}

/* 紙屋町経由：行き先背景は白 */
.hk-sign-kamiyacho .hk-nightbus-row{
  background:#fff !important;
}

/* その他の広島交通：行き先背景と同じ白 */
.hk-sign:not(.hk-sign-buscenter):not(.hk-sign-motomachi):not(.hk-sign-tate-honkawa):not(.hk-sign-kamiyacho) .hk-nightbus-row{
  background:#fff !important;
}

/* 右側詳細も同じルール */
.hk-detail-buscenter .hk-nightbus-row{
  background:#0b6b35 !important;
}

.hk-detail-motomachi .hk-nightbus-row{
  background:linear-gradient(180deg,var(--hk-motomachi-blue),var(--hk-motomachi-blue-dark)) !important;
}

.hk-detail-tate-honkawa .hk-nightbus-row,
.hk-detail-kamiyacho .hk-nightbus-row{
  background:#fff !important;
}

/* マーク本体は必ずオレンジ固定 */
.hk-nightbus-mark{
  background:#f39a19 !important;
  color:#090909 !important;
  border-color:#111 !important;
}


/* =========================================================
   v8.15 停留所一覧内の自車位置を常時表示
   ========================================================= */
#tripDetail .timeline-current-position{
  background:#f5f8ff !important;
  border-radius:9px !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
}

#tripDetail .timeline-current-body .bus-position-badge{
  background:#073b91 !important;
  color:#fff !important;
  border:0 !important;
}

#tripDetail .timeline-current-body small{
  color:#344054 !important;
}


/* =========================================================
   v8.16 現在位置行を停留所タイムラインに確実に固定
   ========================================================= */
#tripDetail .stops > li[data-current-bus-position="1"]{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  min-height:60px !important;
  overflow:visible !important;
  position:relative !important;
  z-index:8 !important;
  background:#f2f6ff !important;
  border-radius:9px !important;
  margin:4px 0 !important;
  padding:7px 0 !important;
}

#tripDetail .stops > li[data-current-bus-position="1"] .timeline-current-dot{
  display:grid !important;
}

#tripDetail .stops > li[data-current-bus-position="1"] .timeline-current-body{
  display:block !important;
}

#tripDetail .stops > li[data-current-bus-position="1"] .bus-position-badge{
  display:inline-flex !important;
  background:#073b91 !important;
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}


/* =========================================================
   v8.17 広島バス ブランド表示
   ========================================================= */
.leaflet-popup-content:has(.hb-popup){
  margin:0 !important;
  width:min(300px,calc(100vw - 36px)) !important;
  max-width:300px !important;
}

.leaflet-popup-content-wrapper:has(.hb-popup){
  padding:0 !important;
  overflow:hidden !important;
  border:2px solid #0b7a45 !important;
  border-radius:12px !important;
}

.hb-popup{
  background:#fff;
  color:#101828;
}

.hb-brand{
  background:#fff;
  padding:10px 12px 7px;
}

.hb-brand-row{
  display:flex;
  align-items:center;
  gap:9px;
}

.hb-logo{
  width:56px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto;
}

.hb-company-name{
  font-size:18px;
  font-weight:900;
  color:#111;
  white-space:nowrap;
}

.hb-route-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
}

.hb-route-no{
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  background:#0b7a45;
  color:#fff;
  font-size:21px;
  font-weight:900;
  line-height:1;
}

.hb-nightbus{
  display:inline-block;
  padding:4px 9px;
  border:2px solid #111;
  border-radius:3px;
  background:#f39a19;
  color:#090909;
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.hb-destination{
  padding:9px 12px 11px;
  background:#0b7a45;
  color:#fff;
  font-size:25px;
  font-weight:900;
  line-height:1.1;
}

.hb-destination span{
  margin-left:5px;
  font-size:12px;
}

.hb-popup-info{
  padding:10px 12px 11px;
}

.hb-next-label{
  font-size:11px;
  font-weight:700;
  color:#475467;
}

.hb-next-stop{
  margin-top:2px;
  font-size:20px;
  font-weight:900;
}

.hb-source{
  display:inline-block;
  margin-top:5px;
  padding:3px 7px;
  border:1px solid #0b7a45;
  border-radius:5px;
  color:#0b7a45;
  background:#f5fff8;
  font-size:10px;
  font-weight:700;
}

.hb-last-position{
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid #e5e7eb;
  color:#667085;
  font-size:10px;
}

/* Right-side detail */
.hb-detail-brand{
  margin:-18px -18px 12px;
  overflow:hidden;
  border-bottom:1px solid #dfe5ec;
}

.hb-detail-brand .hb-brand{
  padding:14px 16px 9px;
}

.hb-detail-brand .hb-logo{
  width:68px;
  height:40px;
}

.hb-detail-brand .hb-company-name{
  font-size:22px;
}

.hb-detail-brand .hb-route-no{
  font-size:22px;
}

.hb-detail-destination{
  padding:13px 16px 15px;
  background:#0b7a45;
  color:#fff;
  font-size:27px;
  font-weight:900;
}

.hb-detail-destination span{
  font-size:13px;
  margin-left:5px;
}

.hb-agency-badge{
  background:#eef8f2 !important;
  color:#0b7a45 !important;
}

/* compact popup header */
.hb-brand-compact .hb-logo{
  width:48px;
  height:29px;
}
.hb-brand-compact .hb-company-name{
  font-size:15px;
}
.hb-brand-compact .hb-route-no{
  font-size:18px;
}

/* mobile */
@media(max-width:520px){
  .leaflet-popup-content:has(.hb-popup){
    width:min(260px,calc(100vw - 30px)) !important;
    max-width:260px !important;
  }
  .hb-brand{
    padding:8px 9px 6px;
  }
  .hb-logo{
    width:42px;
    height:26px;
  }
  .hb-company-name{
    font-size:13px;
  }
  .hb-route-no{
    font-size:17px;
    padding:3px 7px;
  }
  .hb-nightbus{
    font-size:10px;
    padding:3px 6px;
  }
  .hb-destination{
    padding:7px 9px 9px;
    font-size:21px;
  }
  .hb-popup-info{
    padding:8px 9px 9px;
  }
  .hb-next-stop{
    font-size:18px;
  }
}


/* =========================================================
   v8.18 各バス会社ロゴ表示
   広島電鉄 / 芸陽バス / 備北交通 / 広島交通 / JRバス中国
   ========================================================= */
.op-brand{
  display:flex;
  align-items:center;
  gap:8px;
  box-sizing:border-box;
  width:100%;
  padding:8px 10px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  color:#111827;
}

.op-brand-logo{
  display:block;
  width:56px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto;
}

.op-brand-name{
  min-width:0;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
  color:#111827;
}

.op-brand-compact{
  padding:6px 8px;
}
.op-brand-compact .op-brand-logo{
  width:46px;
  height:28px;
}
.op-brand-compact .op-brand-name{
  font-size:12px;
}

/* Horizontal/wider artwork variants */
.op-brand-hiroko .op-brand-logo,
.op-brand-bihoku .op-brand-logo{
  width:82px;
}
.op-brand-compact.op-brand-hiroko .op-brand-logo,
.op-brand-compact.op-brand-bihoku .op-brand-logo{
  width:66px;
}

.op-brand-jrbus .op-brand-logo{
  width:64px;
}
.op-brand-compact.op-brand-jrbus .op-brand-logo{
  width:52px;
}

/* Detail panel */
.op-detail-brand{
  margin:-18px -18px 10px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}
.op-detail-brand .op-brand{
  padding:12px 15px;
}
.op-detail-brand .op-brand-logo{
  width:72px;
  height:42px;
}
.op-detail-brand .op-brand-name{
  font-size:19px;
}

/* Hiroshima Kotsu popup shell */
.hk-popup-shell{
  width:100%;
  background:#fff;
}
.leaflet-popup-content:has(.hk-popup-shell){
  margin:0 !important;
  min-width:0 !important;
}
.hk-popup-shell .hk-sign{
  width:100% !important;
}

/* Generic popup with brand header */
.leaflet-popup-content > .op-brand:first-child{
  margin:-12px -14px 8px;
  width:calc(100% + 28px);
}

/* operator accent line */
.op-brand::before{
  content:"";
  display:block;
  width:4px;
  align-self:stretch;
  border-radius:3px;
  background:var(--op-theme,#64748b);
}

/* Mobile */
@media(max-width:520px){
  .op-brand{
    gap:6px;
    padding:6px 7px;
  }
  .op-brand-logo{
    width:42px;
    height:25px;
  }
  .op-brand-name{
    font-size:11px;
  }
  .op-brand-hiroko .op-brand-logo,
  .op-brand-bihoku .op-brand-logo{
    width:58px;
  }
  .op-detail-brand{
    margin:-14px -14px 9px;
  }
}


/* =========================================================
   v8.19 フォーブル / 朝日交通 / おのみちバス
   ========================================================= */
.op-brand-forble .op-brand-logo{
  width:70px;
  height:40px;
}
.op-brand-asahi .op-brand-logo{
  width:70px;
  height:36px;
}
.op-brand-onomichi .op-brand-logo{
  width:74px;
  height:38px;
}
.op-brand-compact.op-brand-forble .op-brand-logo{
  width:55px;
  height:31px;
}
.op-brand-compact.op-brand-asahi .op-brand-logo{
  width:55px;
  height:29px;
}
.op-brand-compact.op-brand-onomichi .op-brand-logo{
  width:58px;
  height:30px;
}

@media(max-width:520px){
  .op-brand-forble .op-brand-logo,
  .op-brand-asahi .op-brand-logo,
  .op-brand-onomichi .op-brand-logo{
    width:52px;
    height:29px;
  }
}


/* =========================================================
   v8.20 現在地から100m以内のバス停検索
   ========================================================= */
.nearby-stops-button{
  min-height:38px;
  padding:7px 12px;
  border:1px solid #0b7a45 !important;
  border-radius:8px !important;
  background:#fff;
  color:#0b6b3d;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.nearby-stops-button:hover{
  background:#f0faf4;
}
.nearby-stops-button:disabled{
  opacity:.65;
  cursor:wait;
}

.nearby-stops-panel{
  margin:8px 0 0;
  padding:8px;
  border:1px solid #d9e2ec;
  border-radius:10px;
  background:#fff;
  box-shadow:0 5px 18px rgba(16,24,40,.08);
}
.nearby-stops-panel[hidden]{
  display:none !important;
}

.nearby-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 3px 7px;
  border-bottom:1px solid #edf1f5;
  font-size:12px;
}
.nearby-close{
  width:27px;
  height:27px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#667085;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.nearby-stop-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:6px;
  margin-top:7px;
}
.nearby-stop-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:9px 10px !important;
  border:1px solid #dce4ec !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#172033 !important;
  text-align:left;
  cursor:pointer;
}
.nearby-stop-item:hover{
  border-color:#0b7a45 !important;
  background:#f4fbf7 !important;
}
.nearby-stop-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nearby-stop-main strong{
  font-size:13px;
}
.nearby-stop-main small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#667085;
  font-size:10px;
}
.nearby-distance{
  flex:0 0 auto;
  min-width:42px;
  padding:3px 6px;
  border-radius:999px;
  background:#eaf7ef;
  color:#08733f;
  font-size:11px;
  font-weight:900;
  text-align:center;
}
.nearby-loading,
.nearby-error,
.nearby-empty{
  padding:10px 8px;
  color:#475467;
  font-size:12px;
}
.nearby-error{
  color:#b42318;
}
.nearby-error small,
.nearby-empty span{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:#667085;
}

@media(max-width:900px){
  .stop-search-inner{
    align-items:end;
  }
  .nearby-stops-button{
    min-height:40px;
  }
  .nearby-stop-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .nearby-stops-button{
    grid-column:1 / -1;
    width:100%;
  }
  .nearby-stops-panel{
    margin:7px 0 0;
  }
}


/* =========================================================
   v8.21 広島バス：旧方向幕の文字色を反映
   参考画像から、濃い青紫系（約 #19267c）を採用。
   深夜バスマークは従来どおりオレンジのまま。
   ========================================================= */
:root{
  --hiroshima-bus-curtain-blue:#19267c;
  --hiroshima-bus-curtain-bg:#f7f4ea;
}

/* 地図吹き出し */
.hb-popup{
  background:var(--hiroshima-bus-curtain-bg) !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-brand{
  background:var(--hiroshima-bus-curtain-bg) !important;
}

.hb-popup .hb-company-name{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-route-no{
  background:#fff !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border:2px solid var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-destination{
  background:var(--hiroshima-bus-curtain-bg) !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border-top:1px solid #ded9c9 !important;
  border-bottom:1px solid #ded9c9 !important;
}

.hb-popup .hb-destination span{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-popup-info{
  background:#fff !important;
}

.hb-popup .hb-next-label,
.hb-popup .hb-next-stop{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-popup .hb-source{
  border-color:var(--hiroshima-bus-curtain-blue) !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  background:#f7f8ff !important;
}

/* 吹き出し外枠も方向幕色に合わせる */
.leaflet-popup-content-wrapper:has(.hb-popup){
  border-color:var(--hiroshima-bus-curtain-blue) !important;
}

/* 右側詳細 */
.hb-detail .hb-detail-brand{
  background:var(--hiroshima-bus-curtain-bg) !important;
}

.hb-detail .hb-brand{
  background:var(--hiroshima-bus-curtain-bg) !important;
}

.hb-detail .hb-company-name{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-detail .hb-route-no{
  background:#fff !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border:2px solid var(--hiroshima-bus-curtain-blue) !important;
}

.hb-detail-destination{
  background:var(--hiroshima-bus-curtain-bg) !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border-top:1px solid #ded9c9 !important;
  border-bottom:1px solid #ded9c9 !important;
}

.hb-detail-destination span{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-agency-badge{
  background:#f1f2ff !important;
  color:var(--hiroshima-bus-curtain-blue) !important;
  border:1px solid #c9ccec !important;
}

/* タイムラインの現在位置・停留所強調も広島バス選択時は青系 */
.hb-detail #tripDetail .timeline-stop.current-stop{
  background:#f1f2ff !important;
}

.hb-detail #tripDetail .timeline-stop.current-stop .timeline-stop-name{
  color:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-detail #tripDetail .timeline-stop.current-stop .timeline-stop-dot{
  background:var(--hiroshima-bus-curtain-blue) !important;
  box-shadow:0 0 0 2px #e3e5ff !important;
}

.hb-detail #tripDetail .timeline-current-dot,
.hb-detail #tripDetail .timeline-current-body .bus-position-badge{
  background:var(--hiroshima-bus-curtain-blue) !important;
}

.hb-detail #tripDetail .stops::before{
  background:#b8bde6 !important;
}

/* 深夜バスマークはオレンジを維持 */
.hb-nightbus{
  background:#f39a19 !important;
  color:#090909 !important;
  border-color:#111 !important;
}


/* =========================================================
   v8.26 バス会社別・吹き出し外枠カラー
   内部の方向幕／行先表示デザインは変更しない。
   ========================================================= */

/* 共通外枠 */
.leaflet-popup.bus-company-popup .leaflet-popup-content-wrapper{
  border-width:2px !important;
  border-style:solid !important;
}

/* Leaflet の吹き出し三角も外枠色に近づける */
.leaflet-popup.bus-company-popup .leaflet-popup-tip{
  border:1px solid currentColor;
}

/* 広島電鉄：緑 */
.leaflet-popup.bus-company-hiroden{
  color:#079c2f;
}
.leaflet-popup.bus-company-hiroden .leaflet-popup-content-wrapper{
  border-color:#079c2f !important;
}

/* 広島バス：赤 */
.leaflet-popup.bus-company-hiroshima-bus{
  color:#e60012;
}
.leaflet-popup.bus-company-hiroshima-bus .leaflet-popup-content-wrapper{
  border-color:#e60012 !important;
}

/* 広島交通：車体イメージのオレンジ */
.leaflet-popup.bus-company-hiroko{
  color:#e65300;
}
.leaflet-popup.bus-company-hiroko .leaflet-popup-content-wrapper{
  border-color:#e65300 !important;
}

/* 芸陽バス：オレンジ */
.leaflet-popup.bus-company-geiyo{
  color:#f28c00;
}
.leaflet-popup.bus-company-geiyo .leaflet-popup-content-wrapper{
  border-color:#f28c00 !important;
}

/* 備北交通：濃紺 */
.leaflet-popup.bus-company-bihoku{
  color:#243f9b;
}
.leaflet-popup.bus-company-bihoku .leaflet-popup-content-wrapper{
  border-color:#243f9b !important;
}

/* エイチ・ディー西広島：ブルー */
.leaflet-popup.bus-company-hd-nishihiroshima{
  color:#1769aa;
}
.leaflet-popup.bus-company-hd-nishihiroshima .leaflet-popup-content-wrapper{
  border-color:#1769aa !important;
}

/* フォーブル：赤 */
.leaflet-popup.bus-company-fourble{
  color:#bd1822;
}
.leaflet-popup.bus-company-fourble .leaflet-popup-content-wrapper{
  border-color:#bd1822 !important;
}

/* JRバス中国：JR系ブルー */
.leaflet-popup.bus-company-jr-chugoku{
  color:#1680be;
}
.leaflet-popup.bus-company-jr-chugoku .leaflet-popup-content-wrapper{
  border-color:#1680be !important;
}

/* おおのハートバス：ピンク系 */
.leaflet-popup.bus-company-heart-bus{
  color:#d94f87;
}
.leaflet-popup.bus-company-heart-bus .leaflet-popup-content-wrapper{
  border-color:#d94f87 !important;
}

/* 呉市生活バス：青緑 */
.leaflet-popup.bus-company-kure-life{
  color:#168b8b;
}
.leaflet-popup.bus-company-kure-life .leaflet-popup-content-wrapper{
  border-color:#168b8b !important;
}

/* 廿日市市自主運行バス：緑 */
.leaflet-popup.bus-company-hatsukaichi{
  color:#2e8b57;
}
.leaflet-popup.bus-company-hatsukaichi .leaflet-popup-content-wrapper{
  border-color:#2e8b57 !important;
}

/* おのみちバス：黒 */
.leaflet-popup.bus-company-onomichi{
  color:#111111;
}
.leaflet-popup.bus-company-onomichi .leaflet-popup-content-wrapper{
  border-color:#111111 !important;
}

/* 朝日交通：緑 */
.leaflet-popup.bus-company-asahi-ato{
  color:#15944b;
}
.leaflet-popup.bus-company-asahi-ato .leaflet-popup-content-wrapper{
  border-color:#15944b !important;
}

/* 未登録事業者 */
.leaflet-popup.bus-company-default{
  color:#64748b;
}
.leaflet-popup.bus-company-default .leaflet-popup-content-wrapper{
  border-color:#64748b !important;
}

/*
  重要:
  広島交通の以下の既存専用デザインは一切変更しない。
  - 広島バスセンター経由
  - 基町経由
  - 立町・本川町経由
  - 紙屋町経由
  - 旧道表示
  ここでは Leaflet の最外周 border-color だけを上書きする。
*/

/* =========================================================
   v8.27 上部タイトル固定表示
   タイトルヘッダーのみ画面上端に固定し、検索部以降は通常スクロール。
   ========================================================= */
header{
  position:sticky !important;
  top:0 !important;
  z-index:2000 !important;
  width:100%;
  box-sizing:border-box;
}

/* Leaflet等より確実に前面へ */
header .brand,
header .status{
  position:relative;
  z-index:1;
}


/* v8.28 静的GTFS基準の到着一覧 */
.schedule-fallback{
  background:#f8fafc !important;
  color:#475569 !important;
  border:1px solid #cbd5e1 !important;
}


/* =========================================================
   v8.30 その他事業者の標準表示
   広島バスと同じ情報配置をベースにし、事業者色だけ差し替える。
   広島交通・広島バスの専用デザインには影響させない。
   ========================================================= */

.leaflet-popup-content:has(.std-popup){
  margin:0 !important;
  min-width:265px;
}
.leaflet-popup-content-wrapper:has(.std-popup){
  padding:0;
  overflow:hidden;
}

.std-popup{
  --std-theme:#64748b;
  width:100%;
  background:#fff;
  color:#172033;
}

.std-brand{
  --std-theme:#64748b;
  padding:11px 12px 8px;
  background:#fff;
  box-sizing:border-box;
}

.std-brand-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.std-logo{
  display:block;
  width:58px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto;
}

.std-logo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:28px;
  border:2px solid var(--std-theme);
  border-radius:4px;
  color:var(--std-theme);
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  flex:0 0 auto;
}

.std-company-name{
  min-width:0;
  color:#172033;
  font-size:17px;
  font-weight:900;
  line-height:1.2;
}

.std-route-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
}

.std-route-no{
  display:inline-block;
  min-width:42px;
  padding:4px 9px;
  border-radius:4px;
  background:var(--std-theme);
  color:#fff;
  font-size:21px;
  font-weight:900;
  line-height:1;
  text-align:center;
}

.std-destination{
  padding:9px 12px 11px;
  background:var(--std-theme);
  color:#fff;
  font-size:25px;
  font-weight:900;
  line-height:1.1;
}

.std-destination span{
  margin-left:5px;
  font-size:12px;
}

.std-popup-info{
  padding:10px 12px 11px;
  background:#fff;
}

.std-next-label{
  font-size:11px;
  font-weight:700;
  color:#475467;
}

.std-next-stop{
  margin-top:2px;
  color:#172033;
  font-size:20px;
  font-weight:900;
}

.std-source{
  display:inline-block;
  margin-top:5px;
  padding:3px 7px;
  border:1px solid var(--std-theme);
  border-radius:5px;
  color:var(--std-theme);
  background:#fff;
  font-size:10px;
  font-weight:700;
}

.std-via{
  margin-top:7px;
  color:#667085;
  font-size:11px;
}

.std-last-position{
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid #e5e7eb;
  color:#667085;
  font-size:10px;
}

/* compact popup header */
.std-brand-compact{
  padding:8px 9px 6px;
}
.std-brand-compact .std-logo{
  width:48px;
  height:29px;
}
.std-brand-compact .std-logo-placeholder{
  width:42px;
  height:25px;
  font-size:9px;
}
.std-brand-compact .std-company-name{
  font-size:15px;
}
.std-brand-compact .std-route-no{
  font-size:18px;
}

/* Right-side detail — Hiroshima Bus と同じ縦配置 */
.std-detail-brand{
  --std-theme:#64748b;
  margin:-18px -18px 12px;
  overflow:hidden;
  border-bottom:1px solid #dfe5ec;
}

.std-detail-brand .std-brand{
  padding:14px 16px 9px;
}

.std-detail-brand .std-logo{
  width:68px;
  height:40px;
}

.std-detail-brand .std-logo-placeholder{
  width:58px;
  height:34px;
  font-size:11px;
}

.std-detail-brand .std-company-name{
  font-size:22px;
}

.std-detail-brand .std-route-no{
  font-size:22px;
}

.std-detail-destination{
  padding:13px 16px 15px;
  background:var(--std-theme);
  color:#fff;
  font-size:27px;
  font-weight:900;
}

.std-detail-destination span{
  margin-left:5px;
  font-size:13px;
}

.std-agency-badge{
  background:#f8fafc !important;
  color:var(--std-theme) !important;
  border:1px solid color-mix(in srgb,var(--std-theme) 35%,#fff) !important;
}

@media(max-width:520px){
  .leaflet-popup-content:has(.std-popup){
    width:min(260px,calc(100vw - 30px)) !important;
    max-width:260px !important;
    min-width:0 !important;
  }
  .std-brand{
    padding:8px 9px 6px;
  }
  .std-logo{
    width:42px;
    height:26px;
  }
  .std-logo-placeholder{
    width:38px;
    height:23px;
  }
  .std-company-name{
    font-size:13px;
  }
  .std-route-no{
    font-size:17px;
    padding:3px 7px;
  }
  .std-destination{
    padding:7px 9px 9px;
    font-size:21px;
  }
  .std-popup-info{
    padding:8px 9px 9px;
  }
  .std-next-stop{
    font-size:18px;
  }
}

/* color-mix 非対応ブラウザ向け */
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  .std-agency-badge{
    border-color:#d1d5db !important;
  }
}


/* =========================================================
   v8.31 吹き出しの地図内表示を安定化
   ========================================================= */
.leaflet-popup.bus-company-popup .leaflet-popup-content-wrapper{
  max-width:calc(100vw - 32px);
}
.leaflet-popup.bus-company-popup .leaflet-popup-content{
  max-width:calc(100vw - 48px);
}
@media(max-width:520px){
  .leaflet-popup.bus-company-popup .leaflet-popup-content-wrapper{
    max-width:calc(100vw - 24px);
  }
  .leaflet-popup.bus-company-popup .leaflet-popup-content{
    max-width:calc(100vw - 40px);
  }
}


/* =========================================================
   v8.33 スマホのバス選択後表示
   固定ヘッダー直下に表示設定を置き、地図と停留所一覧を優先表示。
   ========================================================= */
@media(max-width:520px){
  .toolbar{
    scroll-margin-top:58px;
  }

  /* 地図より停留所一覧を少し広く取り、選択後に両方を確認しやすくする */
  main{
    grid-template-rows:52vh 48vh !important;
  }

  #panel{
    min-height:320px !important;
  }
}


/* =========================================================
   v8.35 急行種別バッジ
   深夜バス表示と同じ位置に、黄色地＋黒文字で表示する。
   ========================================================= */
.express-badge{
  display:inline-block;
  box-sizing:border-box;
  padding:4px 9px;
  border:2px solid #111;
  border-radius:3px;
  background:#ffd400 !important;
  color:#111 !important;
  font-size:13px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

/* 広島交通の深夜バス用行を種別バッジ共通行として利用 */
.hk-nightbus-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* 広島バス・標準表示でも路線番号の隣に同じ位置関係で表示 */
.hb-route-row,
.std-route-row{
  flex-wrap:wrap;
}

.std-service-badge{
  display:inline-block;
  padding:4px 9px;
  border:2px solid #111;
  border-radius:3px;
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.std-nightbus{
  background:#f39a19;
  color:#090909;
}

@media(max-width:520px){
  .express-badge,
  .std-service-badge{
    padding:3px 6px;
    font-size:10px;
  }
}


/* v8.37: Android Chromeで:activeが残って見えるケースを避ける */
@media(max-width:520px) and (pointer:coarse){
  .mobile-back-to-top{
    user-select:none;
    -webkit-user-select:none;
  }
  .mobile-back-to-top:active{
    transform:translateY(0) !important;
  }
}


/* v8.38: 「上へ」は押下状態を保持せず、1タップ操作を優先 */
@media(max-width:520px){
  .mobile-back-to-top,
  .mobile-back-to-top:active,
  .mobile-back-to-top:focus{
    transform:translateY(0) !important;
  }
  .mobile-back-to-top:focus{
    outline:none;
  }
}


/* v8.39 GTFS-RT bearing / occupancy */
.bus-marker-wrap{
  position:relative;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bus-marker-wrap.dim{opacity:.25}
.bus-marker-wrap .bus-marker{
  position:relative;
  z-index:2;
  flex:0 0 auto;
}
.bus-direction{
  position:absolute;
  z-index:1;
  left:50%;
  top:-7px;
  width:16px;
  height:56px;
  color:#172033;
  font-size:15px;
  font-weight:900;
  line-height:15px;
  text-align:center;
  transform-origin:50% 28px;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.95));
  pointer-events:none;
}
.focused-marker .bus-marker-wrap{
  transform:scale(1.18);
}
.focused-marker .bus-marker-wrap .bus-marker{
  transform:none !important;
}
.occupancy-badge{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  margin:4px 0;
  padding:4px 8px;
  border:1px solid #94a3b8;
  border-radius:999px;
  background:#f8fafc;
  color:#172033;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
}
.occupancy-badge.compact{font-size:10px;padding:3px 7px}
.occupancy-empty,.occupancy-many_seats_available{background:#ecfdf5;border-color:#86efac}
.occupancy-few_seats_available{background:#fefce8;border-color:#fde047}
.occupancy-standing_room_only{background:#fff7ed;border-color:#fdba74}
.occupancy-crushed_standing_room_only,.occupancy-full{background:#fef2f2;border-color:#fca5a5}
.occupancy-not_accepting_passengers,.occupancy-not_boardable{background:#f1f5f9;border-color:#64748b}

@media(max-width:520px){
  .bus-direction{
    top:-6px;
  }
}


/* v8.40: 車内混雑情報は取得・実装を維持したままUIのみ非表示 */
.occupancy-ui-hidden{
  display:none !important;
}


/* v8.41 広島駅・広島バスセンターを中心拠点とした方向色分け */
.bus-marker-wrap .bus-marker{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:3px solid rgba(255,255,255,.96);
  box-shadow:0 1px 5px rgba(15,23,42,.35);
  background:#64748b;
}
.bus-marker-wrap.hub-inbound .bus-marker{
  background:#2563eb;
}
.bus-marker-wrap.hub-outbound .bus-marker{
  background:#f59e0b;
}
.bus-marker-wrap.hub-at .bus-marker,
.bus-marker-wrap.hub-neutral .bus-marker{
  background:#64748b;
}
.bus-marker-wrap.hub-inbound .bus-direction{
  color:#1d4ed8;
}
.bus-marker-wrap.hub-outbound .bus-direction{
  color:#d97706;
}
.bus-marker-wrap.hub-at .bus-direction,
.bus-marker-wrap.hub-neutral .bus-direction{
  color:#475569;
}
.hub-direction-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  width:100%;
  margin-top:6px;
  color:#475569;
  font-size:11px;
  line-height:1.3;
}
.hub-direction-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.hub-legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  border:1px solid rgba(15,23,42,.15);
}
.hub-legend-inbound{background:#2563eb}
.hub-legend-outbound{background:#f59e0b}
.hub-legend-neutral{background:#64748b}

@media(max-width:520px){
  .hub-direction-legend{
    font-size:10px;
    gap:5px 10px;
  }
}


/* v8.42 判定対象外/拠点停車中は白。通過済み経路はJS側で灰色表示 */
.bus-marker-wrap.hub-at .bus-marker,
.bus-marker-wrap.hub-neutral .bus-marker{
  background:#ffffff !important;
  border-color:#64748b !important;
}
.bus-marker-wrap.hub-at .bus-direction,
.bus-marker-wrap.hub-neutral .bus-direction{
  color:#64748b;
}
.hub-legend-neutral{
  background:#ffffff !important;
  border-color:#64748b !important;
}


/* v8.43: バスアイコンの進行方向矢印を廃止 */
.bus-direction{
  display:none !important;
}


/* v8.48 popupの裏に隠れる「これからの経路」を見失わないための補助pane */
.leaflet-routeVisibilityPane-pane,
.leaflet-pane.leaflet-routeVisibilityPane-pane{
  pointer-events:none !important;
}


/* v8.50 到着一覧: 地図上に現在位置がある便 / ない便を明確化 */
.arrival-card.arrival-no-map{
  opacity:.72;
  border-style:dashed;
  background:#f8fafc;
}
.arrival-card.arrival-no-map:hover{
  opacity:.9;
}
.arrival-card-topline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.live-map-badge,
.no-map-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:2px 7px;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  white-space:nowrap;
}
.live-map-badge{
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac;
}
.no-map-badge{
  background:#e2e8f0;
  color:#475569;
  border:1px solid #cbd5e1;
}
.arrival-location-note{
  margin-top:5px;
  padding:5px 7px;
  border-radius:6px;
  background:#f1f5f9;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}
@media(max-width:520px){
  .live-map-badge,
  .no-map-badge{
    font-size:10px;
    padding:2px 6px;
  }
  .arrival-location-note{
    font-size:10px;
  }
}


/* v8.54 地図上のバス停マーカー */
.map-stop-marker-shell{
  background:transparent !important;
  border:0 !important;
}
.map-stop-marker{
  display:block;
  width:12px;
  height:12px;
  margin:6px;
  box-sizing:border-box;
  border-radius:50%;
  background:#fff;
  border:3px solid #2563eb;
  box-shadow:0 1px 4px rgba(15,23,42,.38);
  cursor:pointer;
}
.map-stop-marker.selected{
  width:16px;
  height:16px;
  margin:4px;
  background:#2563eb;
  border:3px solid #fff;
  box-shadow:0 0 0 3px #2563eb,0 2px 6px rgba(15,23,42,.45);
}
.map-stop-marker-shell:hover .map-stop-marker{
  transform:scale(1.18);
}
@media(max-width:520px){
  .map-stop-marker{
    width:14px;
    height:14px;
    margin:5px;
  }
  .map-stop-marker.selected{
    width:18px;
    height:18px;
    margin:3px;
  }
}


/* =========================================================
   v8.55 iPhone / smartphone vertical UI
   PC版は維持し、520px以下のみ「停留所→行先→次のバス→地図」の
   一方向フローに再構成する。横スクロールは使用しない。
   ========================================================= */
.mobile-destination-select-wrap{
  display:none;
}

.mobile-map-cta{
  display:none;
}

@media(max-width:520px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }
  body{
    background:#f6f8fb;
  }
  *,*::before,*::after{
    max-width:100%;
    box-sizing:border-box;
  }

  /* ヘッダー：端末幅を超える台数表示を隠し、タイトルだけを簡潔に固定 */
  header{
    min-width:0 !important;
    padding:12px 16px !important;
    min-height:68px;
  }
  header .brand{
    min-width:0;
    width:100%;
  }
  header .brand-icon{
    display:none !important;
  }
  header .brand h1{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.25 !important;
    white-space:normal !important;
    letter-spacing:0 !important;
  }
  header .brand p{
    margin-top:4px !important;
    font-size:11px !important;
    line-height:1.4 !important;
    white-space:normal !important;
  }
  header .status{
    display:none !important;
  }

  /* STEP 1〜3 は完全な縦一列 */
  .stop-search{
    width:100% !important;
    padding:14px 14px 18px !important;
    overflow:visible !important;
  }
  .stop-search-inner{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100%;
  }
  .stop-search-inner > label{
    width:100%;
    margin:0 !important;
    font-size:20px !important;
    line-height:1.25;
  }
  .step-no{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    font-size:18px !important;
    margin-right:8px !important;
  }
  .autocomplete-wrap,
  #stopInput,
  #showArrivals,
  #nearbyStopsButton{
    width:100% !important;
    min-width:0 !important;
  }
  #stopInput{
    height:52px !important;
    padding:0 14px !important;
    font-size:17px !important;
    border-radius:12px !important;
  }
  #showArrivals,
  #nearbyStopsButton{
    min-height:48px !important;
    padding:11px 14px !important;
    font-size:15px !important;
    border-radius:12px !important;
  }

  .nearby-stops-panel{
    width:100% !important;
    margin:10px 0 0 !important;
  }
  .nearby-stop-list{
    width:100%;
  }
  .nearby-stop-item{
    width:100% !important;
    min-width:0 !important;
  }

  .selected-stop-row{
    display:block !important;
    width:100%;
    margin-top:12px !important;
  }
  #selectedStop.selected-stop{
    width:100%;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:10px;
    background:#ecfdf5;
    color:#12664b;
    font-size:17px !important;
    font-weight:900;
  }
  #selectedStop:empty{
    display:none;
  }
  .reset-view-button{
    display:none !important;
  }

  /* STEP 2: 横ボタンを廃止。行先は<select>一つだけ */
  .destination-controls{
    width:100% !important;
    margin-top:14px !important;
    padding-top:14px !important;
    border-top:1px solid #e2e8f0;
  }
  .destination-controls .section-caption{
    font-size:20px !important;
    line-height:1.25;
  }
  .destination-controls-row,
  #destinationFilters,
  #selectedDestinationLabel{
    display:none !important;
  }
  .mobile-destination-select-wrap{
    display:block !important;
    width:100%;
    margin-top:12px;
  }
  .mobile-destination-select-wrap label{
    display:block;
    margin-bottom:6px;
    color:#475569;
    font-size:12px;
    font-weight:800;
  }
  #mobileDestinationSelect{
    display:block;
    width:100%;
    height:52px;
    min-width:0;
    padding:0 42px 0 13px;
    border:2px solid #cbd5e1;
    border-radius:12px;
    background:#fff;
    color:#172033;
    font:inherit;
    font-size:16px;
    font-weight:800;
    text-overflow:ellipsis;
  }
  .mobile-destination-select-wrap small{
    display:block;
    margin-top:6px;
    color:#64748b;
    font-size:11px;
  }

  /* STEP 3: 到着予定は画面内スクロールをやめ、ページを縦に読む */
  .arrival-head{
    width:100%;
    margin-top:18px !important;
    padding-top:14px !important;
    border-top:1px solid #e2e8f0;
  }
  .arrival-head strong{
    font-size:20px !important;
  }
  #arrivalScrollNote{
    display:none !important;
  }
  .arrivals{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    gap:10px !important;
    padding:10px 0 0 !important;
    scrollbar-gutter:auto !important;
  }
  .arrivals::after{
    display:none !important;
  }
  .arrival-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:13px 14px !important;
    border-radius:14px !important;
    background:#fff;
  }
  .arrival-card .mins{
    font-size:24px !important;
  }
  .arrival-card .clock{
    font-size:14px !important;
  }
  .arrival-card .dest{
    margin-top:7px;
    font-size:17px !important;
    line-height:1.35 !important;
  }
  .arrival-card .route,
  .arrival-card .agency{
    font-size:12px !important;
  }
  .next-stop-status,
  .selected-stop-status{
    font-size:12px !important;
    line-height:1.45;
  }
  .arrival-location-note{
    font-size:11px !important;
  }
  .mobile-map-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:9px;
    padding:9px 10px;
    border-radius:9px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:13px;
    font-weight:900;
  }
  .mobile-map-cta span{
    font-size:22px;
    line-height:1;
  }
  .arrival-card-actions{
    margin-top:8px !important;
  }
  .approach-watch-button{
    min-height:42px;
    font-size:12px !important;
  }

  /* 表示設定は補助機能として簡潔にし、その後に地図→停留所一覧 */
  .toolbar{
    width:100% !important;
    margin:0 !important;
    padding:12px 14px !important;
    overflow:hidden !important;
    scroll-margin-top:74px !important;
  }
  .agency-settings,
  .mapsearch,
  .hub-direction-legend,
  #message{
    width:100% !important;
    min-width:0 !important;
  }
  .mapsearch{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px;
  }
  .mapsearch input{
    width:100% !important;
    min-width:0 !important;
  }
  .agency-filter-list{
    grid-template-columns:1fr !important;
  }
  .hub-direction-legend{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  main{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(390px,55vh) auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  #map{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:390px !important;
  }
  #panel{
    width:100% !important;
    min-width:0 !important;
    min-height:320px !important;
    max-height:none !important;
    overflow:visible !important;
    border-left:0 !important;
    border-top:1px solid #dbe2ea;
  }

  /* Leaflet自身の要素もviewport幅から飛び出させない */
  .leaflet-container,
  .leaflet-control-container,
  .leaflet-popup-pane{
    max-width:none;
  }
  .leaflet-popup-content-wrapper{
    max-width:calc(100vw - 24px) !important;
  }

  .mobile-back-to-top{
    right:12px !important;
    bottom:16px !important;
  }
}


/* v8.56 到着時刻に遅延内訳を併記 */
.clock-delay{
  display:inline-block;
  color:#b45309;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
@media(max-width:520px){
  .clock-delay{
    font-size:11px;
  }
}


/* =========================================================
   v8.57 スマホ地図：バス方向色を明確化
   iOSでは絵文字自体が大きく、30px円の背景色が隠れて見えにくかった。
   方向矢印は復活させず、色付き外周リング＋下部カラーチップで判別する。
   ========================================================= */
@media(max-width:520px){
  .bus-marker-wrap{
    width:46px !important;
    height:46px !important;
    overflow:visible !important;
  }

  .bus-marker-wrap .bus-marker{
    position:relative !important;
    width:34px !important;
    height:34px !important;
    font-size:19px !important;
    border-width:3px !important;
    border-style:solid !important;
    background:#fff !important;
    box-shadow:
      0 2px 6px rgba(15,23,42,.28),
      0 0 0 3px #64748b !important;
  }

  /* 広島駅・広島バスセンター方面：青 */
  .bus-marker-wrap.hub-inbound .bus-marker{
    background:#2563eb !important;
    border-color:#fff !important;
    box-shadow:
      0 2px 6px rgba(15,23,42,.28),
      0 0 0 4px #2563eb !important;
  }

  /* 中心部から外向き：オレンジ */
  .bus-marker-wrap.hub-outbound .bus-marker{
    background:#f59e0b !important;
    border-color:#fff !important;
    box-shadow:
      0 2px 6px rgba(15,23,42,.28),
      0 0 0 4px #f59e0b !important;
  }

  /* 判定対象外・拠点停車中：白＋灰色 */
  .bus-marker-wrap.hub-at .bus-marker,
  .bus-marker-wrap.hub-neutral .bus-marker{
    background:#fff !important;
    border-color:#fff !important;
    box-shadow:
      0 2px 6px rgba(15,23,42,.28),
      0 0 0 4px #64748b !important;
  }

  /* 絵文字に隠れても方向色が必ず見える下部チップ */
  .bus-marker-wrap::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:1px;
    width:16px;
    height:5px;
    transform:translateX(-50%);
    border-radius:999px;
    background:#64748b;
    border:1px solid rgba(255,255,255,.95);
    box-shadow:0 1px 2px rgba(15,23,42,.25);
    pointer-events:none;
    z-index:4;
  }
  .bus-marker-wrap.hub-inbound::after{background:#2563eb}
  .bus-marker-wrap.hub-outbound::after{background:#f59e0b}
  .bus-marker-wrap.hub-at::after,
  .bus-marker-wrap.hub-neutral::after{background:#64748b}

  .focused-marker .bus-marker-wrap .bus-marker{
    box-shadow:
      0 2px 8px rgba(15,23,42,.35),
      0 0 0 4px currentColor,
      0 0 0 8px rgba(255,255,255,.9) !important;
  }
  .focused-marker .bus-marker-wrap.hub-inbound{color:#2563eb}
  .focused-marker .bus-marker-wrap.hub-outbound{color:#f59e0b}
  .focused-marker .bus-marker-wrap.hub-at,
  .focused-marker .bus-marker-wrap.hub-neutral{color:#64748b}
}


/* =========================================================
   v8.59 選択バス → 指定バス停までの赤経路
   ========================================================= */
.selected-stop-route-summary{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:150px;
  max-width:240px;
  padding:8px 10px;
  border:2px solid #dc2626;
  border-radius:10px;
  background:rgba(255,255,255,.95);
  color:#172033;
  box-shadow:0 2px 8px rgba(15,23,42,.18);
  font-size:12px;
  line-height:1.35;
}
.selected-stop-route-summary strong{
  color:#b91c1c;
  font-size:13px;
}
.selected-stop-route-summary span{
  font-weight:800;
}
@media(max-width:520px){
  .selected-stop-route-summary{
    min-width:0;
    max-width:58vw;
    padding:7px 9px;
    font-size:11px;
  }
  .selected-stop-route-summary strong{
    font-size:12px;
  }
}