/* CSS Variables & Theme Setup */
:root {
    /* ライトテーマ (デフォルト) */
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.8);
    --border-color: rgba(0, 0, 0, 0.08);
    
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    
    --accent: #0ea5e9;
    --accent-hover: #0284c7;
    --accent-glow: rgba(14, 165, 233, 0.2);
    
    --hc-color: #ffb703;
    --hc-glow: rgba(255, 183, 3, 0.25);
    
    --docomo-color: #ef233c;
    --docomo-glow: rgba(239, 35, 60, 0.25);
    
    --font-main: 'Noto Sans JP', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    
    --sidebar-width: 380px;
    --header-height: 70px;

    --shadow-sidebar: 10px 0 30px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.theme-dark {
    /* ダークテーマ */
    --bg-primary: #0b0f19;
    --bg-secondary: #121826;
    --bg-card: rgba(22, 30, 49, 0.75);
    --border-color: rgba(255, 255, 255, 0.08);
    
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    
    --accent: #38bdf8;
    --accent-hover: #0ea5e9;
    --accent-glow: rgba(56, 189, 248, 0.2);

    --shadow-sidebar: 10px 0 30px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Global Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-main);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    /* iOS standalone PWA で safe-area の外側 (ノッチ・ホームインジケーター部分)
       が白くチラつかないよう、ライト/ダーク問わず必ず暗色で塗りつぶす */
    background-color: #0b0f19;
}

/* safe-area-inset 領域も同色で確実に埋める */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        background-color: #0b0f19;
    }
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover);
}

/* App Container Layout */
.app-container {
    display: flex;
    width: 100vw;
    /* dvh: iOS Safari の URL バー / standalone モードで動的な viewport 高さに追従 */
    height: 100vh;
    height: 100dvh;
    position: relative;
    background-color: var(--bg-primary);
}

/* Sidebar with Glassmorphism */
.sidebar {
    width: var(--sidebar-width);
    height: 100%;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 10;
    box-shadow: var(--shadow-sidebar);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    /* iOS Safari でサイドバー上のピンチがページ全体を拡大してしまう問題対策。
       縦スクロールだけ許可、ピンチ/ダブルタップズームを無効化する。 */
    touch-action: pan-y;
}

.sidebar-header {
    padding: 16px 24px 12px;
    background: linear-gradient(180deg, rgba(11, 15, 25, 0.5) 0%, rgba(18, 24, 38, 0) 100%);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* flex item の overflow を許可 → 子の h1 が ellipsis 化できる */
}

.logo-icon {
    /* buschara_512.png は 512×350 (1.46:1 横長) ぴったりキャラ。比率に合わせる */
    width: 56px;
    height: 38px;
    /* img なので font-size/color は効かないが Font Awesome に戻った時のための保険 */
    font-size: 22px;
    color: var(--accent);
    filter: drop-shadow(0 0 8px var(--accent-glow));
    flex-shrink: 0;
    object-fit: contain;
    /* タップするとバス全部がカニに変身する遊び。指で押せることをカーソルで示唆 */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}

.logo-icon:active {
    transform: scale(0.92);
}

.logo h1 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
    /* CJK が文字単位で折り返されて "東" "京" に分かれるのを防ぐ */
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.accent-text {
    color: var(--accent);
}

/* Pro バッジ: ロゴ右側に「PRO」を控えめに表示 (pro.js が hidden 属性で出し分け) */
.pro-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1300;
    margin-left: 4px;
    line-height: 1.1;
    flex-shrink: 0;
}

/* 広告スロット: AdSense 通過後に <ins> を流し込む空コンテナ。
   Pro 時は pro.js が display:none に切り替える */
.ad-slot {
    width: 100%;
    min-height: 0;
    margin: 8px 0;
}

.ad-slot:empty {
    /* AdSense タグが入る前は表示領域を取らない */
    display: none;
}

/* Search hint */
.search-hint {
    margin: 6px 24px 0 24px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-hint i {
    color: var(--accent);
}

#search-radius-val {
    color: var(--accent);
    font-weight: 700;
}

.bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 10px;
}

.bullet-pair {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
}

.provider-busstop {
    background-color: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

.provider-kokusai {
    background-color: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.provider-community {
    background-color: #f97316;
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
}

.provider-vehicle {
    background-color: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

/* 運行中バスアイコン: 絵文字 🚌 を白丸の上に乗せ、軽く脈動させる */
.vehicle-pin-container {
    background: transparent;
}

.vehicle-pin {
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border: 2px solid #f59e0b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.55), 0 1px 4px rgba(0, 0, 0, 0.3);
    /* バスが「走ってる感」を出すため、影の脈動 + 上下にガタガタ揺れる */
    animation:
        vehicle-pulse 2s ease-in-out infinite,
        vehicle-jitter 0.45s steps(4, end) infinite;
}

/* ?crab=1 のときは白丸の枠を取り払ってカニキャラ単体で表示する。
   vehicle-pulse の box-shadow アニメは四角い影として出てしまうので使わず、
   揺れだけ jitter で残し、影とグローは img 側に drop-shadow で形に沿って付ける */
.vehicle-pin.crab {
    /* PNG が 512×350 (≈1.46:1) なのでこの比率で */
    width: 36px;
    height: 25px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    animation: vehicle-jitter 0.45s steps(4, end) infinite;
}

.vehicle-pin-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    /* カニの輪郭に沿った影 + 脈動するアンバーグロー */
    animation: crab-glow 2s ease-in-out infinite;
}

@keyframes crab-glow {
    /* オレンジだと炎で燃えてるみたいに見えるので、白のソフトグローに変更 */
    0%, 100% {
        filter:
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
    }
    50% {
        filter:
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45))
            drop-shadow(0 0 11px rgba(255, 255, 255, 1));
    }
}

@keyframes vehicle-pulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(245, 158, 11, 0.55), 0 1px 4px rgba(0, 0, 0, 0.3); }
    50%      { box-shadow: 0 2px 16px rgba(245, 158, 11, 0.95), 0 1px 4px rgba(0, 0, 0, 0.3); }
}

@keyframes vehicle-jitter {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-2px); }
    50%  { transform: translateY(1px); }
    75%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

/* リアルタイム車両 popup の色 */
.popup-provider.bus.realtime {
    color: #f59e0b;
}

.name-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
}

.bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.provider-hc {
    background-color: var(--hc-color);
    box-shadow: 0 0 6px var(--hc-glow);
}

.provider-docomo {
    background-color: var(--docomo-color);
    box-shadow: 0 0 6px var(--docomo-glow);
}

/* Layer toggle rows (HELLO CYCLING / Docomo / Bus stops) */
.layer-toggle-list {
    margin: 12px 24px 0 24px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.layer-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

.layer-toggle-row + .layer-toggle-row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.layer-toggle-row .name {
    flex: 1;
    font-weight: 500;
}


.layer-toggle-row:has(input:not(:checked)) .name,
.layer-toggle-row:has(input:not(:checked)) .bullet {
    opacity: 0.4;
}

/* 通信中: 左のドットをバウンスさせて「読み込んでる感」を出す。
   文字バッジは出さず、動きだけで伝える。 */
.layer-toggle-row.loading .bullet {
    animation: layer-bullet-bounce 1.0s ease-in-out infinite;
    transform-origin: center;
}
/* 3 つドットがあるときは時間差で波を作る */
.layer-toggle-row.loading .bullet-pair .bullet:nth-child(1) {
    animation-delay: 0s;
}
.layer-toggle-row.loading .bullet-pair .bullet:nth-child(2) {
    animation-delay: 0.16s;
}
.layer-toggle-row.loading .bullet-pair .bullet:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes layer-bullet-bounce {
    0%, 60%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.55;
    }
    30% {
        transform: translateY(-7px) scale(1.3);
        opacity: 1;
    }
}

/* Favorites Section */
.favorites-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 24px 16px 24px;
    margin-top: 14px;
    /* 空のときでもプレースホルダーが窮屈に見えないよう最低限の縦サイズを確保 */
    min-height: 240px;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.section-title h3 {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 編集可能タイトル: 普段は普通のテキスト、hover でクリック可能と分かるよう
   破線の下線を出す。クリックすると input に化ける。 */
.editable-title {
    cursor: text;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    border-radius: 3px;
    padding: 0 2px;
    user-select: text;
    white-space: pre-wrap;
    word-break: break-word;
}
.editable-title:hover {
    border-bottom-color: rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.06);
}
.editable-title-input {
    display: inline-block;
    min-width: 180px;
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.06);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    /* font / color は inline で inherit させているので、ここでは省略 */
}

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    background: var(--accent);
    color: #0b0f19;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.favorites-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

/* Scrollbar Customization */
.favorites-list::-webkit-scrollbar {
    width: 6px;
}

.favorites-list::-webkit-scrollbar-track {
    background: transparent;
}

.favorites-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.favorites-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Compact 1-row card */
.favorite-item {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    min-height: 40px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.favorite-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.favorite-item-main {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.operator-badge {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.operator-badge.toei {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.operator-badge.kokusai {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.operator-badge.hc {
    background: rgba(250, 204, 21, 0.18);
    color: #ca8a04;
}

.operator-badge.docomo {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.operator-badge.community {
    background: rgba(249, 115, 22, 0.18);
    color: #ea580c;
}

.favorite-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    /* 長いバス停名は 2 行まで表示。3 行目以降は ... に。
       word-break: keep-all で「東口」「丁目」などの語中で切らない */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.favorite-pole-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 8px 3px 7px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.4);
    line-height: 1;
}

.favorite-pole-num-label {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    text-transform: none;
}

.favorite-pole-num-value {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.favorite-actions {
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--border-color);
}

.favorite-move-btn,
.favorite-remove-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s ease, color 0.15s ease;
}

.favorite-move-btn + .favorite-move-btn,
.favorite-move-btn + .favorite-remove-btn,
.favorite-remove-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.04);
}

.favorite-move-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.favorite-move-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.favorite-remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* 20/20 で強調 */
.count-badge.full {
    background: #ef4444;
    color: #ffffff;
}

/* バス停 popup 内の ☆お気に入りボタン */
.fav-toggle-btn {
    display: block;
    width: 100%;
    margin: 8px 0 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fav-toggle-btn:hover:not(:disabled) {
    background: rgba(250, 204, 21, 0.12);
    border-color: rgba(250, 204, 21, 0.4);
}

.fav-toggle-btn.is-fav {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
    color: #0b0f19;
    border-color: transparent;
}

.fav-toggle-btn.is-limited,
.fav-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 32px;
    color: var(--text-muted);
    text-align: center;
    gap: 10px;
}

.no-data .empty-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0;
}

.no-data .empty-hint {
    font-size: 13px;
    line-height: 1.7;
    max-width: 280px;
    margin: 0;
}

.no-data .empty-hint i {
    color: var(--accent);
    margin: 0 1px;
}

.no-data .empty-hint strong {
    color: var(--accent);
    font-weight: 700;
}

/* HTML の hidden 属性は display: none 相当だが、display:flex 指定があると効かないため明示 */
.no-data[hidden] {
    display: none;
}

.no-data i {
    font-size: 36px;
}

.no-data p {
    font-size: 13px;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-credit {
    text-align: center;
    margin: 0;
}

/* PP / 規約 / 外部送信公表 ページへのリンク */
.footer-legal {
    text-align: center;
    margin: 4px 0 0;
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

.footer-legal a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-legal a:hover {
    color: var(--text-secondary);
}

.footer-legal span {
    margin: 0 4px;
    opacity: 0.6;
}

/* Map Container */
.map-container {
    flex: 1;
    height: 100%;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #1a1e2a; /* Fallback */
}

/* Hallmark · component: loader · genre: playful · theme: existing app tokens
 * states: default · delayed · reduced-motion
 * contrast: pass
 */
.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 183, 3, 0.18), transparent 28%),
        radial-gradient(circle at 82% 26%, rgba(14, 165, 233, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(232, 244, 255, 0.94));
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Leaflet の popupPane (z-index 700) より下、markerPane (600) と同等以上 */
    z-index: 690;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.loader-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ローダー表示中はマップ上のフローティング操作系を全て隠す */
body:has(#loader.loader-overlay.active) .leaflet-control-zoom,
body:has(#loader.loader-overlay.active) #compass,
body:has(#loader.loader-overlay.active) #gps-btn,
body:has(#loader.loader-overlay.active) #share-btn,
body:has(#loader.loader-overlay.active) #sidebar-toggle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.loader-content {
    width: min(360px, calc(100vw - 48px));
    text-align: center;
}

.loader-scene {
    position: relative;
    height: 112px;
    margin: 0 auto 18px;
    overflow: hidden;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.1)),
        linear-gradient(180deg, #dff4ff 0%, #f8fbff 58%, #d7f1e4 58%, #c7ead7 100%);
    border: 1px solid rgba(14, 165, 233, 0.18);
    box-shadow: 0 18px 40px rgba(14, 74, 120, 0.12);
}

.loader-skyline {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 38px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    opacity: 0.42;
}

.loader-skyline span {
    display: block;
    width: 34px;
    border-radius: 8px 8px 0 0;
    background: rgba(14, 165, 233, 0.2);
}

.loader-skyline span:nth-child(1) { height: 34px; }
.loader-skyline span:nth-child(2) { height: 50px; }
.loader-skyline span:nth-child(3) { height: 26px; }

.loader-road {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 26px;
    background: linear-gradient(180deg, #8aa3b4, #6f8797);
}

.loader-road::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #ffffff 0 22px, transparent 22px 38px);
    animation: road-dashes 0.8s linear infinite;
}

.loader-bus {
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 86px;
    height: 42px;
    border-radius: 18px 18px 10px 10px;
    background: linear-gradient(180deg, #ffd76a 0%, #ffb703 66%, #f59e0b 100%);
    border: 2px solid rgba(120, 73, 0, 0.18);
    box-shadow: 0 10px 18px rgba(77, 66, 18, 0.2);
    transform: translateX(-150px);
    /* keyframes 間で ease を掛けると 1 サイクル内で何度も加減速が起きて
       ガクつくため、間は linear で繋ぐ。形は keyframes 側で作る。 */
    animation: bus-ride 2.4s linear infinite;
    /* バスがバス停を通り過ぎるとき、ポールが車体の裏に隠れるよう前面に */
    z-index: 2;
}

/* バスのカラーバリエーション (setLoader で data-variant をランダム指定) */
.loader-bus[data-variant="red"] {
    background: linear-gradient(180deg, #fca5a5 0%, #f87171 66%, #dc2626 100%);
    border-color: rgba(120, 20, 20, 0.18);
}
.loader-bus[data-variant="blue"] {
    background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 66%, #2563eb 100%);
    border-color: rgba(20, 50, 120, 0.18);
}
.loader-bus[data-variant="green"] {
    background: linear-gradient(180deg, #86efac 0%, #34d399 66%, #16a34a 100%);
    border-color: rgba(20, 80, 40, 0.18);
}
.loader-bus[data-variant="purple"] {
    background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 66%, #7c3aed 100%);
    border-color: rgba(80, 40, 120, 0.18);
}
.loader-bus[data-variant="orange"] {
    background: linear-gradient(180deg, #fdba74 0%, #fb923c 66%, #ea580c 100%);
    border-color: rgba(120, 60, 0, 0.18);
}
.loader-bus[data-variant="pink"] {
    background: linear-gradient(180deg, #fbcfe8 0%, #f472b6 66%, #db2777 100%);
    border-color: rgba(120, 30, 80, 0.18);
}
.loader-bus[data-variant="teal"] {
    background: linear-gradient(180deg, #99f6e4 0%, #2dd4bf 66%, #0d9488 100%);
    border-color: rgba(15, 80, 80, 0.18);
}

/* バスのどこかに咲く花。JS で個数 (1/10 確率で 1–4 本) と位置をランダム生成 */
.bus-flower {
    position: absolute;
    pointer-events: none;
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
    animation: bus-flower-bob 2.4s ease-in-out infinite;
    z-index: 1;
}

@keyframes bus-flower-bob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-3px) rotate(6deg); }
}

.loader-bus::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 9px;
    width: 12px;
    height: 10px;
    border-radius: 4px;
    background: #f8fbff;
    box-shadow: 16px 0 0 #f8fbff, 50px 0 0 #f8fbff;
}

.loader-bus::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 22px;
    width: 6px;
    height: 5px;
    border-radius: 999px;
    background: #fef3c7;
    box-shadow: 0 0 10px rgba(254, 243, 199, 0.8);
}

.bus-door {
    position: absolute;
    right: 30px;
    top: 9px;
    width: 12px;
    height: 24px;
    border-radius: 5px 5px 3px 3px;
    background: rgba(248, 251, 255, 0.86);
}

.bus-window {
    display: none;
}

.bus-wheel {
    position: absolute;
    bottom: -8px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #334155;
    border: 4px solid #f8fbff;
}

.bus-wheel-front {
    right: 8px;
}

.bus-wheel-back {
    left: 8px;
}

.loader-stop {
    position: absolute;
    right: 42px;
    bottom: 24px;
    width: 4px;
    height: 34px;
    border-radius: 999px;
    background: #475569;
}

.loader-stop::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -15px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #38bdf8;
    border: 3px solid #f8fbff;
    transform: translateX(-50%);
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.28);
}

.loader-stop::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 10px;
    height: 8px;
    border-radius: 3px;
    background: #f8fbff;
    transform: translateX(-50%);
}

.loader-text {
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

@keyframes bus-ride {
    /* Y は常に 0 〜 -2px の範囲で滑らかに往復させる (正の値で跳ね上がらせるとガクつく) */
    0%   { transform: translateX(-165px) translateY(0); }
    12%  { transform: translateX(-128px) translateY(-2px); }
    24%  { transform: translateX(-90px) translateY(0); }
    36%  { transform: translateX(-50px) translateY(-2px); }
    46%  { transform: translateX(-6px) translateY(0); }
    58%  { transform: translateX(-6px) translateY(-1px); }
    68%  { transform: translateX(30px) translateY(-2px); }
    79%  { transform: translateX(75px) translateY(0); }
    90%  { transform: translateX(125px) translateY(-2px); }
    100% { transform: translateX(170px) translateY(0); }
}

/* ロード画面のカニバス君: バスの手前をカニ歩きで横断する */
.loader-crab {
    position: absolute;
    left: 50%;
    bottom: 6px;
    /* PNG は 512×350 横長。横歩きで道路をすべるように */
    width: 42px;
    height: 29px;
    object-fit: contain;
    /* バスの z-index: 2 より上に出してカニが前面で歩くようにする */
    z-index: 3;
    pointer-events: none;
    transform: translateX(-230px) translateY(0);
    animation: crab-walk 5.4s linear infinite;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
    will-change: transform;
}

@keyframes crab-walk {
    /* バスより遅いペースで左端から右端へカニ歩き。Y を 0 と -2px で細かく往復させて
       ぴょこぴょこと脚を運ぶ動きを表現 */
    0%   { transform: translateX(-230px) translateY(0); }
    8%   { transform: translateX(-200px) translateY(-2px); }
    16%  { transform: translateX(-170px) translateY(0); }
    24%  { transform: translateX(-140px) translateY(-2px); }
    32%  { transform: translateX(-110px) translateY(0); }
    40%  { transform: translateX(-80px) translateY(-2px); }
    48%  { transform: translateX(-50px) translateY(0); }
    56%  { transform: translateX(-20px) translateY(-2px); }
    64%  { transform: translateX(10px) translateY(0); }
    72%  { transform: translateX(40px) translateY(-2px); }
    80%  { transform: translateX(80px) translateY(0); }
    88%  { transform: translateX(140px) translateY(-2px); }
    100% { transform: translateX(230px) translateY(0); }
}

@keyframes road-dashes {
    from { background-position-x: 0; }
    to { background-position-x: -38px; }
}

/* Leaflet Custom Styles (Dark Theme Integration) */
.leaflet-container {
    background: #0f172a !important;
}

/* Zoom Control styling */
.leaflet-bar {
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-bar a {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: all 0.2s ease;
}

.leaflet-bar a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent) !important;
}

/* Custom Marker Styling */

/* GPS現在地マーカー */
.user-marker-icon {
    position: relative;
    width: 20px;
    height: 20px;
}

/* 向きを示す三角形の矢印（コンパスと連動） */
.user-marker-arrow {
    display: none; /* デバイスの方向検知が成功するまでは非表示 */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /* 中心から上向きの青い三角形を作成 */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid var(--accent);
    margin-left: -8px;
    margin-top: -24px; /* マーカーの中心から少し上に突き出るように配置 */
    transform-origin: 8px 24px; /* 回転の中心をパルスマーカーの中心（底辺中央から24px下）に設定 */
    filter: drop-shadow(0 0 4px var(--accent-glow));
    z-index: 9;
    transition: transform 0.1s ease-out; /* カクカクしないように滑らかに回転 */
}

/* 向き検知有効時にクラスを追加して表示 */
.user-marker-icon.has-direction .user-marker-arrow {
    display: block;
}

.user-marker-pulse {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border: 2.5px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.user-marker-pulse::after {
    content: '';
    width: 32px;
    height: 32px;
    background: var(--accent-glow);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-ring 1.8s infinite ease-out;
    pointer-events: none;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Custom Station Pins */
.custom-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: -2px 2px 4px rgba(0,0,0,0.4);
    transition: transform 0.2s ease;
}

.custom-pin:hover {
    transform: rotate(-45deg) scale(1.1);
}

.custom-pin i {
    transform: rotate(45deg);
    font-size: 11px;
    color: #0b0f19;
    font-weight: 700;
}

.pin-hc {
    background-color: var(--hc-color);
}

.pin-docomo {
    background-color: var(--docomo-color);
}

/* Leaflet Popup customization */
.leaflet-popup-content-wrapper {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    padding: 4px;
}

.leaflet-popup-tip {
    background: var(--bg-secondary) !important;
    border-left: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.popup-container {
    padding: 6px;
    min-width: 200px;
}

.popup-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.popup-provider {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.popup-provider.hc {
    color: var(--hc-color);
}

.popup-provider.docomo {
    color: var(--docomo-color);
}

.popup-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.popup-address {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.popup-stats {
    display: flex;
    gap: 12px;
}

.popup-stat {
    display: flex;
    flex-direction: column;
}

.popup-stat .label {
    font-size: 9px;
    color: var(--text-muted);
}

.popup-stat .val {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
}

.popup-stat.bikes .val.hc-color {
    color: var(--hc-color);
}

.popup-stat.bikes .val.docomo-color {
    color: var(--docomo-color);
}

.popup-stat.docks .val {
    color: var(--text-secondary);
}

/* Floating Controls Default (PC) */
.sidebar-toggle-btn {
    display: none;
}

/* PC のみ: collapsed のときサイドバーを画面外に退避 + 再表示ボタン */
@media (min-width: 769px) {
    .sidebar.collapsed {
        transform: translateX(-100%);
        margin-right: calc(-1 * var(--sidebar-width));
    }

    body:has(.sidebar.collapsed) .sidebar-toggle-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        bottom: 24px;
        left: 24px;
        z-index: 2000;
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        border-radius: 30px;
        padding: 10px 18px;
        font-family: var(--font-main);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
    }

    body:has(.sidebar.collapsed) .sidebar-toggle-btn:hover {
        background-color: var(--accent);
        color: #0b0f19;
        border-color: var(--accent);
    }
}

/* デフォルトでは PC でも × ボタン (sidebar-close-btn) を表示 */
.sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 110;
}

.sidebar-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.sidebar-close-btn:active {
    transform: scale(0.9);
}

.sidebar-header {
    position: relative;
}

.sidebar-overlay {
    display: none;
}

.gps-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 40px; /* PC版では右下コピーライトと重ならないように調整 */
    right: 24px;
    z-index: 2000; /* Leafletマップより前面に表示 */
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.gps-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 20px var(--accent-glow);
}

/* バス停 popup の「拡大表示」アイコンボタン */
.popup-expand-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.popup-expand-btn:hover {
    background: var(--accent);
    color: #0b0f19;
    border-color: var(--accent);
}

.popup-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.popup-title-row .popup-title {
    flex: 1;
    min-width: 0;
}

/* お気に入りダッシュボード (全件カウントダウン一覧) */
.fav-dash-modal {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 8800;
    display: none;
    flex-direction: column;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
}

.fav-dash-modal.active {
    display: flex;
}

.fav-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.fav-dash-header h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fav-dash-header h2 i {
    color: var(--accent);
    font-size: 16px;
}

.fav-dash-shared-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.05em;
}
.fav-dash-shared-badge[hidden] { display: none; }

/* ダッシュボードのカードグリッド末尾に並べる「持ち帰り用 QR カード」 */
.fav-dash-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    min-height: 220px;
}
.fav-dash-qr-card-svg {
    width: 180px;
    height: 180px;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fav-dash-qr-card-svg svg {
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
}
.fav-dash-qr-card-svg:empty {
    display: none;
}
.fav-dash-qr-card-caption {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}
.fav-dash-qr-card-caption .fav-dash-qr-card-headline {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.fav-dash-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.fav-dash-action-btn,
.fav-dash-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.fav-dash-action-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent);
}

/* 自動スクロール ON 表示 (押し続けてる感を出すため穏やかに脈打つ) */
.fav-dash-action-btn[aria-pressed="true"] {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
    animation: fav-dash-autoscroll-pulse 1.6s ease-in-out infinite;
}
@keyframes fav-dash-autoscroll-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(59, 130, 246, 0.10); }
}

.fav-dash-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.fav-dash-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
}

.fav-dash-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.fav-dash-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.15);
}

.fav-dash-card-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fav-dash-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.fav-dash-card-dest {
    font-size: 12px;
    color: var(--text-secondary);
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.fav-dash-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    min-width: 80px;
}

.fav-dash-card-min {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.fav-dash-card-time {
    font-size: 10.5px;
    color: var(--text-muted);
}

.fav-dash-card.is-empty .fav-dash-card-min,
.fav-dash-card.is-empty .fav-dash-card-time {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.fav-dash-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.fav-dash-empty i {
    font-size: 32px;
    margin-bottom: 12px;
}

/* バス停カウントダウン全画面モーダル */
.bs-fullscreen-modal {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 9000;
    display: none;
    flex-direction: column;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
}

.bs-fullscreen-modal.active {
    display: flex;
}

/* 拡大画面はどこをタップしても地図のそのバス停に飛べるので cursor: pointer */
.bs-fullscreen-modal { cursor: pointer; }
/* ただしボタン類は普通のクリックに戻す */
.bs-fullscreen-modal .bs-fs-close,
.bs-fullscreen-modal .bs-fs-share { cursor: pointer; }

/* 「タップで地図」のヒント。中央下部に薄く出す */
.bs-fullscreen-modal::after {
    content: "📍 タップで地図のこのバス停を開く";
    position: absolute;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.06);
    padding: 6px 14px;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
}

.bs-fs-close,
.bs-fs-share {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.bs-fs-close { right: 14px; }
.bs-fs-share { right: 68px; }

.bs-fs-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.bs-fs-share:hover {
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent);
}

.bs-fs-header {
    margin-top: 16px;
    margin-bottom: 12px;
}

.bs-fs-provider {
    font-size: 12px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.bs-fs-stop-name {
    font-size: 24px;
    font-weight: 800;
    margin: 4px 0 0;
    color: var(--text-primary);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.bs-fs-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px 0;
    min-height: 240px;
}

.bs-fs-countdown {
    font-family: var(--font-heading);
    font-size: clamp(48px, 14vw, 88px);
    font-weight: 800;
    color: var(--accent);
    line-height: 1.05;
    letter-spacing: -2px;
    text-shadow: 0 0 30px rgba(56, 189, 248, 0.25);
}

/* 「取得中...」「取得失敗」「本日この後の発車予定はありません」など
   数字ではない長文を流し込む時は、ヒーロー用の超デカフォントだと
   1 文字ずつ縦並びになり読めなくなるので、控えめな見出しサイズに落とす */
.bs-fs-countdown.is-message {
    font-size: clamp(18px, 3.2vw, 28px);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: normal;
    text-shadow: none;
    line-height: 1.5;
}

/* 数字に対して単位 (分/秒/時間/分後/秒後/時間後) を一回り小さく見せる */
.bs-fs-countdown .unit,
.bs-fs-upcoming .unit,
.fav-dash-card-min .unit,
.fav-dash-card-upcoming-list .unit,
.tt-min .unit {
    font-size: 0.58em;
    font-weight: 700;
    margin: 0 0.04em 0 0.08em;
    opacity: 0.88;
    letter-spacing: 0;
}

.bs-fs-dest {
    font-size: clamp(26px, 7vw, 38px);
    font-weight: 800;
    margin-top: 20px;
    color: var(--text-primary);
    word-break: keep-all;
    overflow-wrap: break-word;
    padding: 0 8px;
}

.bs-fs-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 10px;
}

.bs-fs-upcoming {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    margin-top: 16px;
}

.bs-fs-upcoming h3 {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.bs-fs-upcoming ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bs-fs-upcoming li {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.bs-fs-upcoming li:last-child {
    border-bottom: none;
}

.bs-fs-upcoming .bs-fs-up-min {
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-align: right;
}

.bs-fs-upcoming .bs-fs-up-info {
    color: var(--text-primary);
    font-size: 13px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.bs-fs-upcoming .bs-fs-up-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

/* お気に入りダッシュボード: カード内の「このあとの便」(モバイル / PC 共通の基本) */
.fav-dash-card-upcoming-list {
    display: grid;
    list-style: none;
    padding: 10px 0 0;
    margin: 0;
    border-top: 1px solid var(--border-color);
    gap: 6px;
}

.fav-dash-card-upcoming-list li {
    display: grid;
    grid-template-columns: minmax(64px, auto) 1fr auto;
    gap: 8px;
    align-items: baseline;
}

.fav-dash-card-upcoming-list .up-min {
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.fav-dash-card-upcoming-list .up-info {
    color: var(--text-primary);
    font-size: 12.5px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.fav-dash-card-upcoming-list .up-route {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 1px;
}

.fav-dash-card-upcoming-list .up-time {
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fav-dash-card-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
}

/* PC: バス停フルスクリーン & お気に入りダッシュボードのレイアウト改善 */
@media (min-width: 769px) {
    /* ----- バス停フルスクリーン: 2 カラムレイアウト ----- */
    .bs-fullscreen-modal.active {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "header header"
            "main upcoming";
        column-gap: 56px;
        row-gap: 24px;
        padding: 40px 64px;
    }

    .bs-fs-close {
        top: 24px;
        right: 24px;
    }
    .bs-fs-share {
        top: 24px;
        right: 78px;
    }

    .bs-fs-header {
        grid-area: header;
        margin: 0;
    }

    .bs-fs-stop-name {
        font-size: clamp(28px, 3.4vw, 44px);
        margin-top: 6px;
    }

    .bs-fs-provider {
        font-size: 14px;
    }

    .bs-fs-main {
        grid-area: main;
        align-items: flex-start;
        text-align: left;
        padding: 0;
        min-height: auto;
        justify-content: center;
    }

    .bs-fs-countdown {
        font-size: clamp(96px, 13vw, 200px);
        letter-spacing: -4px;
    }

    .bs-fs-dest {
        font-size: clamp(34px, 3.6vw, 56px);
        margin-top: 24px;
    }

    .bs-fs-sub {
        font-size: 15px;
        margin-top: 12px;
    }

    .bs-fs-upcoming {
        grid-area: upcoming;
        border-top: none;
        border-left: 1px solid var(--border-color);
        padding: 0 0 0 32px;
        margin: 0;
        overflow-y: auto;
    }

    .bs-fs-upcoming h3 {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .bs-fs-upcoming ul {
        gap: 10px;
    }

    .bs-fs-upcoming li {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 14px 18px;
        grid-template-columns: 130px 1fr;
        gap: 14px;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
    }

    .bs-fs-upcoming .bs-fs-up-min {
        white-space: nowrap;
    }

    .bs-fs-upcoming .bs-fs-up-min {
        font-size: 22px;
        text-align: left;
    }

    .bs-fs-upcoming .bs-fs-up-info {
        font-size: 15px;
        line-height: 1.5;
    }

    .bs-fs-upcoming .bs-fs-up-sub {
        font-size: 12px;
        margin-top: 4px;
    }

    /* ----- お気に入りダッシュボード: カード型グリッド ----- */
    .fav-dash-modal {
        padding: 32px 48px;
    }

    .fav-dash-header {
        margin-bottom: 24px;
    }

    .fav-dash-header h2 {
        font-size: 22px;
    }

    .fav-dash-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
        gap: 20px;
    }

    .fav-dash-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        grid-template-columns: none;
        padding: 22px 26px;
    }

    .fav-dash-card-name {
        font-size: 20px;
    }

    .fav-dash-card-dest {
        font-size: 14px;
    }

    .fav-dash-card-min {
        font-size: 44px;
    }

    .fav-dash-card-time {
        font-size: 13px;
    }

    /* 店舗 iPad で 3〜4m 離れたお客が読む想定。
       2 件目以降の便も離れた席から見えるよう本文サイズを引き上げる。 */
    .fav-dash-card-upcoming-list {
        padding-top: 18px;
        gap: 14px;
    }

    .fav-dash-card-upcoming-list li {
        grid-template-columns: 140px 1fr 120px;
        gap: 14px;
        padding: 6px 0;
        align-items: center;
    }

    .fav-dash-card-upcoming-list .up-min {
        font-size: 30px;
        line-height: 1.05;
    }

    .fav-dash-card-upcoming-list .up-min .unit {
        font-size: 0.55em;
    }

    .fav-dash-card-upcoming-list .up-info {
        font-size: 22px;
        line-height: 1.25;
        font-weight: 600;
    }

    .fav-dash-card-upcoming-list .up-route {
        font-size: 15px;
        margin-top: 3px;
        font-weight: 400;
    }

    .fav-dash-card-upcoming-list .up-time {
        font-size: 20px;
    }
}

/* iPad Pro 縦画面など、タブレット縦表示専用の大きく太いフォント。
   店舗のレジ脇に立てかけた iPad を、お客が 3〜4m 先からも読めるサイズ。
   横画面 (PC / iPad 横) と分けて、縦の 1 カラムレイアウト時だけ強化する。 */
@media (min-width: 769px) and (orientation: portrait) {
    .fav-dash-card {
        padding: 26px 30px;
        gap: 18px;
    }
    .fav-dash-card-name {
        font-size: 30px;
        font-weight: 800;
    }
    .fav-dash-card-dest {
        font-size: 20px;
        font-weight: 600;
    }
    .fav-dash-card-min {
        font-size: 70px;
        font-weight: 800;
    }
    .fav-dash-card-time {
        font-size: 18px;
    }
    .fav-dash-card-upcoming-list {
        padding-top: 22px;
        gap: 18px;
    }
    .fav-dash-card-upcoming-list li {
        grid-template-columns: 180px 1fr 140px;
        gap: 18px;
        padding: 8px 0;
    }
    .fav-dash-card-upcoming-list .up-min {
        font-size: 40px;
        font-weight: 800;
    }
    .fav-dash-card-upcoming-list .up-info {
        font-size: 30px;
        font-weight: 700;
    }
    .fav-dash-card-upcoming-list .up-route {
        font-size: 18px;
        font-weight: 500;
        margin-top: 4px;
    }
    .fav-dash-card-upcoming-list .up-time {
        font-size: 24px;
        font-weight: 600;
    }
    /* 縦画面ではタイトルも一回り大きく */
    .fav-dash-header h2 {
        font-size: 28px;
    }
    .fav-dash-qr-card {
        min-height: 280px;
        padding: 28px;
    }
    .fav-dash-qr-card-svg {
        width: 220px;
        height: 220px;
    }
    .fav-dash-qr-card-caption {
        font-size: 16px;
    }
    .fav-dash-qr-card-caption .fav-dash-qr-card-headline {
        font-size: 19px;
    }
}

/* ============================================================
   Amazon アソシエイト枠 (サイドバー下 / ロード画面 / ポップアップ末尾)
   AMAZON_PRODUCTS が空なら DOM 上に何も追加されないので、ここの CSS は
   未使用になる。中身は地味めにして体験を壊さない方針。
   ============================================================ */

.affiliate-card {
    display: flex;
    text-decoration: none;
    color: inherit;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}
.affiliate-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-color: rgba(59, 130, 246, 0.4);
}

.affiliate-card-disclosure {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.affiliate-card-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.affiliate-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.affiliate-card-caption {
    font-size: 10.5px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.affiliate-card-cta {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    margin-top: 6px;
}

/* ---- サイドバー下: 縦長カード ---- */
.affiliate-card--sidebar {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin: 8px 0;
}
.affiliate-card-image {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.affiliate-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.affiliate-card-body {
    flex: 1;
    min-width: 0;
}

/* ---- ロード画面: 横長 compact ---- */
.affiliate-card--loader {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    /* loader-content は text-align: center だが、card 自体は display: flex なので
       水平センタリングには margin: auto が必要 */
    margin: 18px auto 0;
    background: rgba(255, 255, 255, 0.95);
    max-width: 320px;
}
.affiliate-card-loader-image {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
    flex-shrink: 0;
}
.affiliate-card-loader-body {
    flex: 1;
    min-width: 0;
    text-align: left;
}

/* ---- バス停ポップアップ末尾: 1 行リンク ---- */
.affiliate-card--popup {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 28px 6px 6px;
    margin-top: 8px;
}
.affiliate-card-popup-image {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: contain;
    background: #fff;
    flex-shrink: 0;
}
.affiliate-card-popup-title {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Compass — 北の向き表示 + クリックで北リセット */
.compass-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    z-index: 2000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
}

.compass-btn:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.compass-needle {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #ef4444; /* 北は赤 */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.compass-label {
    position: absolute;
    bottom: 5px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

/* Share button — GPS ボタンの真上に積む */
/* GPS は bottom:40 で高さ48 → 上端は 88. share の下端は 108 で 20px ギャップ確保 */
.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 108px;
    right: 24px;
    z-index: 2000;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.share-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 20px var(--accent-glow);
}

/* Share Modal */
.share-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
    padding: 20px;
}

.share-modal.active {
    opacity: 1;
    visibility: visible;
}

.share-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    transform: translateY(10px);
    transition: transform 0.2s ease;
}

.share-modal.active .share-modal-content {
    transform: translateY(0);
}

.share-modal-content h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.share-modal-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}

.share-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.share-modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

/* SVG QR: 任意サイズで描画してもくっきり残るよう、SVG を直接埋め込む */
.share-qr {
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
}
.share-qr svg {
    width: 220px;
    height: 220px;
    background: #ffffff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    /* QR は黒/白の塊なので、サイズ変更時もエッジを保つ */
    shape-rendering: crispEdges;
}
.share-qr:empty {
    display: none;
}

.share-url-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

#share-url-input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    font-family: var(--font-heading), monospace;
    color: var(--text-primary);
    outline: none;
}

#share-url-input:focus {
    border-color: var(--accent);
}

.share-copy-btn {
    background: var(--accent);
    color: #0b0f19;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.share-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
}

.share-copy-btn.copied {
    background: #10b981;
    color: #ffffff;
}

.share-sns-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.share-sns-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    border-radius: 10px;
    text-decoration: none;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.share-sns-btn i {
    font-size: 20px;
}

.share-sns-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.share-sns-x {
    background: #000000;
    border: 1px solid #2a2a2a;
}

.share-sns-line {
    background: #06c755;
}

.share-sns-facebook {
    background: #1877f2;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .app-container {
        flex-direction: row;
        overflow: hidden;
    }
    
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
        border-right: 1px solid var(--border-color);
        border-top: none;
        box-shadow: var(--shadow-sidebar);
        z-index: 1600;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .sidebar-header {
        /* iOS standalone PWA: ノッチ/Dynamic Island に被らないよう上部セーフエリア確保 */
        padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 10px;
    }

    .sidebar-close-btn {
        /* セーフエリア分下げないと × ボタンがノッチに重なる */
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    }

    /* モバイル: タイトル + PRO バッジが2行に折り返さないように縮める */
    .logo {
        gap: 8px;
        /* × ボタン分の右側余白 (40px) を確保 → タイトルが × に被らない */
        padding-right: 36px;
    }
    .logo-icon { width: 46px; height: 32px; font-size: 18px; }
    .logo h1 { font-size: 15px; letter-spacing: -0.3px; }
    .pro-badge { font-size: 9px; padding: 1px 5px; }

    .search-box {
        margin: 0 16px;
    }

    .search-hint {
        margin: 6px 16px 0 16px;
    }

    .layer-toggle-list {
        margin: 10px 16px 0 16px;
    }

    .favorites-section {
        padding: 0 16px 8px 16px;
        margin-top: 12px;
    }

    /* モバイル: バス停名のために文字領域を最大化する */
    .favorite-item-main {
        padding: 8px 8px 8px 10px;
        gap: 6px;
    }
    .favorite-name {
        font-size: 13.5px;
    }
    /* 上下ボタンと削除ボタンを少し細く。タップ高さは min-height で確保 */
    .favorite-move-btn,
    .favorite-remove-btn {
        width: 28px;
    }
    /* のりば番号タグはモバイルでは行の下、名前と同列に */
    .favorite-pole-num {
        padding: 2px 6px 2px 5px;
    }
    .favorite-pole-num-value {
        font-size: 13px;
    }

    .sidebar-footer {
        padding: 10px 12px 14px;
    }
    
    .map-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    /* Floating Mobile Controls */
    /* iOS Chrome は URL バーが画面下にあり、スクロールで表示/非表示するため
       position: absolute だとボタンが viewport の外へ押し出される。
       fixed + safe-area-inset-bottom で常に画面内に固定する。 */
    .sidebar-toggle-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        left: 24px;
        z-index: 2000; /* Leafletマップより前面に表示 */
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        border-radius: 30px;
        padding: 12px 20px;
        font-family: var(--font-main);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
    }

    .sidebar-toggle-btn:hover {
        background-color: var(--accent);
        color: #0b0f19;
        border-color: var(--accent);
    }

    .sidebar-toggle-btn.active {
        background-color: var(--accent);
        color: #0b0f19;
        border-color: var(--accent);
    }

    .gps-btn {
        position: fixed;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        z-index: 2000;
    }

    .share-btn {
        position: fixed;
        /* mobile GPS は bottom:24 で高さ48 → 上端は 72. share の下端は 92 で 20px ギャップ */
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        right: 24px;
        z-index: 2000;
    }

    /* サイドバーの閉じるボタン（スマホのみ） */
    .sidebar-header {
        position: relative;
    }

    .sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 18px;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        transition: all 0.2s ease;
        z-index: 110;
    }

    .sidebar-close-btn:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: var(--text-primary);
    }

    .sidebar-close-btn:active {
        transform: scale(0.9);
    }

    /* バックドロップオーバーレイ（スマホのみ） */
    .sidebar-overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        z-index: 1500; /* sidebar(1600)の直下、map(1)の上 */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* --- Address Search Styles --- */
.search-container {
    margin: 0 0 8px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.search-box {
    margin: 0 24px;
}

.search-box {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px 2px 2px 12px;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
}

.search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.search-icon {
    color: var(--text-muted);
    font-size: 14px;
    margin-right: 8px;
}

#search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    padding: 8px 0;
    width: 100%;
}

#search-input::placeholder {
    color: var(--text-muted);
}

#search-btn {
    background-color: var(--accent);
    color: #0b0f19;
    border: none;
    outline: none;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#search-btn:hover {
    background-color: var(--accent-hover);
}

.search-error-msg {
    display: none;
    position: absolute;
    left: 34px;
    right: 76px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--docomo-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 2;
}

/* --- Search Shake Animation --- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-6px); }
    30%, 60%, 90% { transform: translateX(6px); }
}

.search-box.has-error {
    border-color: var(--docomo-color);
    box-shadow: 0 0 10px rgba(239, 35, 60, 0.2);
    animation: shake 0.4s ease;
}

.search-box.has-error #search-input {
    color: transparent;
    caret-color: var(--text-primary);
}

.search-box.has-error .search-error-msg:not(:empty) {
    display: block;
}

/* --- Loader Upgrades --- */
.loader-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
    line-height: 1.5;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    /* ヒントが 5秒ごとに切り替わるとき、textContent 差し替えだけだと
       一瞬で入れ替わってしまうので、軽い fade transition で柔らかく */
    transition: opacity 0.25s ease;
}

.loader-subtext {
    font-size: 12px;
    color: #475569;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.5s ease;
}

.loader-subtext.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .loader-bus,
    .loader-road::before,
    .loader-crab {
        animation: none;
    }

    .loader-bus {
        transform: translateX(-6px);
    }

    .loader-crab {
        transform: translateX(-70px);
    }
}

/* Theme selector — compact segmented control */
.theme-selector {
    display: flex;
    gap: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    padding: 3px;
    width: 100%;
}

.theme-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    height: 30px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.theme-btn i {
    font-size: 12px;
}

.theme-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.theme-btn.active {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 2px 6px rgba(56, 189, 248, 0.22);
}


.provider-busstop {
    background-color: #3b82f6; /* 青 */
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

/* Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(120, 120, 120, 0.2);
  transition: .3s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
}

input:checked + .slider:before {
  transform: translateX(16px);
}

/* ココキタ Landmark */
.kokokita-label {
    background: transparent !important;
    border: none !important;
    pointer-events: none;
}

.kokokita-pin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 12px;
    background: linear-gradient(135deg, #ff5e3a 0%, #ff9a3c 100%);
    color: #ffffff;
    font-family: var(--font-heading), 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow:
        0 6px 18px rgba(255, 94, 58, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    position: relative;
    animation: kokokita-bob 2.4s ease-in-out infinite;
}

.kokokita-pin i {
    color: #fff7c2;
    font-size: 13px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.kokokita-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #ff7038;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

@keyframes kokokita-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* Bus Stop Pin Custom Styling */
.busstop-pin-container {
    background: transparent;
}

.busstop-pin {
    width: 24px;
    height: 24px;
    background-color: #3b82f6; /* 都営 = 青 */
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}

.busstop-pin.kokusai {
    background-color: #10b981; /* 国際興業 = 緑 (時刻表非対応の意味でも色分け) */
}

.busstop-pin.community {
    background-color: #f97316; /* コミュニティバス = 橙 */
}

.busstop-pin:hover {
    transform: scale(1.15);
}

.busstop-pin i {
    color: #ffffff;
    font-size: 11px;
}

/* Bus Stop Popup Custom Styles */
.popup-provider.bus {
    color: #3b82f6;
}

.popup-provider.bus.kokusai {
    color: #10b981;
}

.popup-provider.bus.community {
    color: #f97316;
}

.popup-note {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.popup-note i {
    color: #10b981;
    margin-right: 6px;
}

.popup-note strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* a 要素なので :link / :visited などブラウザ既定の青が割り込まないよう、
   pseudo-class 全部に対して明示的に白文字を指定する */
a.popup-external-btn,
a.popup-external-btn:link,
a.popup-external-btn:visited,
a.popup-external-btn:hover,
a.popup-external-btn:active,
a.popup-external-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.popup-external-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
}

a.popup-external-btn.community,
a.popup-external-btn.community:link,
a.popup-external-btn.community:visited {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

a.popup-external-btn.community:hover {
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.55);
}

.popup-external-btn i {
    font-size: 11px;
}

.popup-routes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.route-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
}

/* Bus Stop Popup Timetable */
.timetable-area {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.tt-placeholder,
.tt-empty,
.tt-error {
    font-size: 11px;
    color: var(--text-muted);
    padding: 6px 4px;
    text-align: center;
}

.tt-error {
    color: #f87171;
}

.timetable-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.timetable-subheader {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 6px 0 4px;
}

.timetable-area {
    position: relative;
}

/* スクロール可能領域: 下端にフェード + 常時スクロールバー表示で「続きあり」を示す */
.timetable-scroll {
    max-height: 220px;
    overflow-y: auto;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(59, 130, 246, 0.5) rgba(255, 255, 255, 0.05);
}

/* WebKit (iOS Safari, iOS Chrome, Chrome, Safari) のスクロールバー常時表示 */
.timetable-scroll::-webkit-scrollbar {
    width: 6px;
    -webkit-appearance: none;
}

.timetable-scroll::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.timetable-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(59, 130, 246, 0.55);
    border-radius: 3px;
}

/* 下端に「もっと見る ▾」サインを表示
   ※ スクロール領域の外側に置くことでスクロールバーは隠さない */
.timetable-area.tt-has-overflow::after {
    content: '↓ スクロール';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: linear-gradient(180deg,
        rgba(59, 130, 246, 0) 0%,
        rgba(59, 130, 246, 0.85) 60%,
        rgba(59, 130, 246, 0.95) 100%);
    pointer-events: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 -1px 6px rgba(59, 130, 246, 0.35);
    animation: tt-bob 1.4s ease-in-out infinite;
}

@keyframes tt-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* 1便1カード。一番大事な「あと何分」と「行先」を大きく、
   時刻と系統は補助情報として下に小さく */
.timetable {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timetable-item {
    padding: 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.timetable-item:last-child {
    border-bottom: none;
}

.timetable-item .tt-headline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 3px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.timetable-item .tt-min {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #3b82f6;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}

.timetable-item .tt-dest {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.timetable-item .tt-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.timetable-item .tt-sub .tt-time {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.timetable-item .tt-sub .tt-route {
    color: var(--text-secondary);
}

.timetable-item .tt-sub-sep {
    opacity: 0.5;
}