/* =====旧「バスナビ_css.html」をそのまま移植 ===== */
      :root {
          --yat-deep-emerald: #045688;
          --yat-radiant-gold: #076be8;
          --yat-north-navy: #1A365D;
          --text-dark: #2C3E50;
          --yat-blue: #1769aa;
          --yat-blue-dark: #123b68;
          --yat-blue-soft: #eef6ff;
          --yat-mock-navy: #082b50;
          --yat-mock-header: #045688;
          --yat-mock-blue: #076be8;
          --yat-mock-blue-soft: #edf5ff;
          --yat-surface: #f6f9fc;
          --yat-border: #dbe6ef;
          --yat-shadow: 0 10px 30px rgba(18, 59, 104, .09);
          --yat-radius: 20px;
      }
      *, *::before, *::after { box-sizing: border-box; }
      body, html {
          margin: 0; padding: 0;
          font-family: "Helvetica Neue", Arial, 'Noto Sans JP', sans-serif;
          background-color: #fff;
      }
      .nearest-box {
          background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
          padding: 20px; margin-top: 15px; margin-bottom: 30px;
          position: relative; z-index: 10; border-top: 5px solid var(--yat-radiant-gold);
      }
      .bus-number {
          display: inline-block; background-color: var(--text-dark); color: white;
          font-weight: bold; padding: 2px 10px; border-radius: 12px; font-size: 0.85rem;
          margin-right: 8px; vertical-align: middle;
      }
      .loader-spinner {
          border: 4px solid #f3f3f3; border-top: 4px solid var(--yat-deep-emerald); border-radius: 50%;
          width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 15px;
      }
      @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

      /* 全画面ローディング用 */
      #full-screen-loading { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(circle at 20% 16%,rgba(57,154,214,.3),transparent 34%),linear-gradient(155deg,#061f3a 0%,#064f7d 62%,#0875a4 100%); color:#fff; }
      #full-screen-loading::before { content:""; position:absolute; inset:-25%; background:repeating-radial-gradient(ellipse at 76% 42%,transparent 0 34px,rgba(255,255,255,.035) 35px 36px); transform:rotate(-9deg); pointer-events:none; }
      .boot-content { position:relative; width:min(280px,82vw); text-align:center; }
      .boot-brand { margin:0; color:#fff; font-family:'Shippori Mincho',serif; font-size:1.45rem; font-weight:700; letter-spacing:.18em; line-height:1.2; }
      .boot-brand span { color:#8fd8ff; }
      .boot-kicker { margin:7px 0 28px; color:rgba(255,255,255,.68); font-size:.62rem; font-weight:700; letter-spacing:.24em; }
      .boot-route { position:relative; width:220px; height:58px; margin:0 auto 20px; }
      .boot-track { position:absolute; left:7px; right:7px; top:31px; height:2px; border-radius:999px; background:linear-gradient(90deg,rgba(255,255,255,.36),#8fd8ff 48%,rgba(255,255,255,.36)); }
      .boot-stop { position:absolute; top:26px; width:12px; height:12px; border:3px solid #fff; border-radius:50%; background:#0875a4; box-shadow:0 0 0 4px rgba(255,255,255,.1); }
      .boot-stop.is-first { left:2px; }
      .boot-stop.is-middle { left:104px; }
      .boot-stop.is-last { right:2px; }
      .boot-bus { position:absolute; left:2px; top:2px; width:32px; height:23px; border-radius:6px 6px 4px 4px; background:#fff; box-shadow:0 5px 13px rgba(0,0,0,.24); animation:bootTravel 2.5s cubic-bezier(.45,.05,.55,.95) infinite; }
      .boot-bus::before { content:""; position:absolute; left:5px; right:5px; top:5px; height:7px; border-radius:2px; background:linear-gradient(90deg,#76c8ee 0 46%,#fff 46% 54%,#76c8ee 54%); }
      .boot-bus::after { content:""; position:absolute; left:5px; bottom:-3px; width:6px; height:6px; border-radius:50%; background:#061f3a; box-shadow:16px 0 #061f3a; }
      #loading-text { margin:0; color:rgba(255,255,255,.94); font-size:.82rem; font-weight:600; letter-spacing:.04em; }
      .boot-meter { width:96px; height:2px; margin:14px auto 0; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.16); }
      .boot-meter span { display:block; width:42%; height:100%; border-radius:inherit; background:#fff; animation:bootMeter 1.35s ease-in-out infinite; }
      @keyframes bootTravel { 0% { transform:translateX(0); opacity:0; } 9% { opacity:1; } 88% { opacity:1; } 100% { transform:translateX(184px); opacity:0; } }
      @keyframes bootMeter { 0% { transform:translateX(-110%); } 100% { transform:translateX(350%); } }
      @media (prefers-reduced-motion:reduce) { .boot-bus,.boot-meter span { animation:none; } .boot-bus { left:94px; opacity:1; } .boot-meter span { width:100%; opacity:.7; } }

      /* Leaflet 実地図 */
      #map-container { height: 320px; border-radius: 8px; overflow: hidden; }
      .leaflet-container { font: inherit; }
      /* 区間検索の結果（1 Journey = 1比較カード。詳細は専用画面） */
      body.journey-results #legacy-workspace, body.journey-detail-open #legacy-workspace { display:none !important; }
      body.journey-results #result-container { margin-top:0 !important; }
      .od-results { margin-top:0; border-radius:16px; border-top:5px solid var(--yat-mock-header); padding:22px 18px; box-shadow:0 8px 26px rgba(8,43,80,.09); }
      .od-result-title { display:flex; align-items:center; gap:2px; color:var(--yat-mock-navy); font-size:1.25rem; line-height:1.45; overflow-wrap:anywhere; }
      .od-result-title i { color:var(--yat-mock-header); }
      .od-result-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:10px 0; }
      .od-result-toolbar .button { min-height:40px; border-radius:8px; font-weight:700; background:var(--yat-mock-blue); border-color:var(--yat-mock-blue); }
      .od-mode-toggle { margin:8px 0 20px !important; }
      .od-mode-toggle .button { min-height:40px; padding-left:14px; padding-right:14px; }
      .od-mode-toggle .button.is-info { background:var(--yat-mock-blue); border-color:var(--yat-mock-blue); }
      .od-section { border-top:1px solid #e6ece9; padding-top:2px; }
      .od-section-title { font-weight:bold; font-size:1.12rem; color:var(--yat-mock-navy); margin:15px 0 11px; }
      .od-section-title i { color:var(--yat-mock-header); }
      .od-section:first-of-type .od-section-title { margin-top:12px; }
      .journey-card { border:1px solid #d8e3ee; border-radius:18px; background:#fff; margin-bottom:14px; overflow:hidden; box-shadow:0 2px 8px rgba(8,43,80,.04); }
      .journey-card.is-official { background:#fbf9ff; }
      .journey-card.is-arrival-unknown { background:#fff8ee; }
      .jc-summary { display:block; padding:18px; cursor:pointer; list-style:none; min-height:44px; }
      .jc-summary::-webkit-details-marker { display:none; }
      .jc-times { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
      .jc-time { font-family:monospace; font-weight:bold; font-size:1.78rem; color:var(--yat-mock-navy); letter-spacing:-.04em; }
      .jc-arrow { color:#999; }
      .jc-meta { font-size:.84rem; color:#65747b; margin-top:4px; }
      .jc-company { font-size:.84rem; color:#485960; margin-top:6px; }
      .jc-au-dest { font-weight:700; color:#5a4630; margin-top:2px; }
      .jc-au-notice { font-size:.85rem; color:#9a5a12; font-weight:700; margin-top:4px; }
      .jc-au-restriction { margin-top:8px; padding:8px 10px; border-radius:8px; background:#fff0d8; color:#7c4a12; font-size:.78rem; }
      .jc-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
      .jc-badges:empty { display:none; }
      .jc-b { display:inline-flex; align-items:center; border-radius:4px; font-size:.75rem; line-height:1.2; padding:3px 8px; }
      .jc-b-direct { background:var(--yat-mock-header); color:#fff; font-weight:bold; font-size:.85rem; padding:4px 10px; }
      .jc-b-transfer { background:var(--yat-mock-blue); color:#fff; font-weight:bold; font-size:.85rem; padding:4px 10px; }
      .jc-b-official { background:#7654b4; color:#fff; font-weight:bold; font-size:.8rem; padding:4px 9px; }
      .jc-b-longwait { background:#fff0d8; color:#874e0c; border:1px solid #efbd78; }
      .jc-b-cond { background:#fff8e9; color:#76531b; border:1px solid #ead4a6; }
      .jc-b-saved { background:#e8f5ee; color:#1c6b43; border:1px solid #b5dcc5; font-weight:bold; }
      .jc-b-approx { background:#eef3f6; color:#4e5e64; border:1px solid #d3dde3; }
      /* 停・路線の一覧のカード: 「◯◯ 行き」行と運賃バッジ */
      .jc-dest { font-size:.92rem; font-weight:700; color:var(--yat-mock-navy); margin-top:6px; overflow-wrap:anywhere; }
      .jc-fare { display:inline-flex; align-items:center; margin-left:8px; padding:1px 8px; border-radius:10px; background:#e5f4eb; border:1px solid #a9d3b9; color:#216843; font-size:.75rem; font-weight:700; white-space:nowrap; vertical-align:1px; }
      .jc-stop-row.has-fare, .jd-timeline-row.has-fare { grid-template-columns:4.7em minmax(0,1fr) auto; }
      .jc-stop-fare { align-self:center; }
      .jc-stop-fare .jc-fare { margin-left:0; }
      .jc-cd-row { margin-top:10px; }
      .jc-cd { background:var(--yat-mock-blue-soft); color:#185d9a; font-size:.72rem; border-radius:10px; padding:0 7px; }
      .jc-cd.soon { background:#e8952f; color:#fff; font-weight:bold; }
      .jc-xfer-wait { font-weight:normal; color:#7a7a7a; font-size:.8rem; margin-left:4px; }
      .jc-xfer { font-size:.85rem; font-weight:bold; margin-top:6px; overflow-wrap:anywhere; }
      .jc-toggle { font-size:.84rem; color:var(--yat-mock-blue); margin-top:12px; }
      .jc-t-close { display:none; }
      .journey-card[open] .jc-t-open { display:none; }
      .journey-card[open] .jc-t-close { display:inline; }
      .jc-detail { padding:10px 18px 18px; border-top:1px dashed #dbe4e0; font-size:.85rem; }
      .jc-main-stops { display:grid; gap:0; }
      .jc-stop-row, .jd-timeline-row { display:grid; grid-template-columns:4.7em minmax(0,1fr); gap:2px 10px; padding:8px 0; border-top:1px solid #edf1ef; }
      .jc-stop-row.is-first, .jd-timeline-row.is-first { border-top:0; }
      .jc-stop-time { font-family:monospace; font-weight:700; color:var(--yat-mock-navy); }
      .jc-stop-name { overflow-wrap:anywhere; }
      .jc-stop-note { grid-column:2; color:#9a5a12; font-size:.72rem; }
      .jc-detail-btn { width:100%; min-height:44px; margin-top:8px; border:1px solid var(--yat-mock-blue); border-radius:22px; background:#fff; color:var(--yat-mock-blue); font:inherit; font-weight:700; cursor:pointer; }
      /* 便カードの操作列（保存 / 地図 / 周辺）。開いたカードの中だけに見える */
      .jc-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
      .jc-act { flex:1 1 92px; min-width:0; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 10px; border:1px solid var(--yat-mock-blue); border-radius:22px; background:#fff; color:var(--yat-mock-blue); font:inherit; font-size:.85rem; font-weight:700; line-height:1.2; cursor:pointer; text-align:center; }
      .jc-act i { flex:none; }
      /* 文字が途中で折れない（「準備中」が「準／備中」にならない）。入りきらなければボタンごと次の行へ回る */
      .jc-act, .jc-act .np-soon { white-space:nowrap; }
      .jc-act .np-soon { font-size:.72em; margin-left:0; }
      .jc-act-save { background:var(--yat-mock-blue); color:#fff; }
      .jc-act-save:disabled { opacity:.72; cursor:default; }
      .jc-act-save.is-saved { background:#e5f4eb; color:#216843; border-color:#a9d3b9; opacity:1; }
      .jc-act.is-soon, .jc-act.is-soon:disabled { background:#eef1f3; border-color:#c9d2d8; color:#7d8a92; cursor:not-allowed; }
      .jc-act-msg { margin:7px 2px 0; font-size:.75rem; line-height:1.45; color:#52645a; }
      .jc-act-msg.is-error { color:#a13b32; }
      .jc-act-msg.is-warning { color:#8a5700; }
      .jc-act-msg.is-success { color:#216843; font-weight:700; }
      /* 詳細ページを開いている間だけ、画面右上に固定の「閉じる」 */
      .jd-float-close { display:none; }
      body.journey-detail-open .jd-float-close { display:inline-flex; align-items:center; justify-content:center; gap:6px; position:fixed; z-index:900; top:calc(env(safe-area-inset-top, 0px) + 8px); right:max(8px, env(safe-area-inset-right)); min-width:44px; min-height:44px; padding:8px 16px; border:1px solid #b9c7d3; border-radius:22px; background:#fff; color:#315066; font:inherit; font-weight:800; font-size:.9rem; box-shadow:0 3px 12px rgba(8,43,80,.25); cursor:pointer; }
      .journey-results #map-panel { display:none !important; }
      .journey-detail-open #legacy-workspace #map-panel { display:none !important; }
      .journey-detail { background:#fff; border:1px solid #d8e3ee; border-top:4px solid var(--yat-mock-header); border-radius:16px; padding:16px; box-shadow:0 5px 18px rgba(8,43,80,.08); }
      .journey-detail.is-arrival-unknown { background:#fffaf3; border-top:4px solid #e8952f; }
      .jd-back, .jd-map-toggle, .jd-nearby { min-height:44px; border-radius:22px; padding:8px 16px; font:inherit; cursor:pointer; }
      .jd-back { border:0; background:#eef3f6; color:#315066; margin-bottom:14px; }
      .jd-date { color:#65747b; font-size:.78rem; }
      .jd-route { font-size:1rem; font-weight:700; color:var(--yat-mock-navy); margin:4px 0 12px; overflow-wrap:anywhere; }
      .jd-time { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
      .jd-time strong { font:700 1.9rem/1.2 monospace; color:var(--yat-mock-navy); }
      .journey-detail.is-arrival-unknown .jd-time strong { color:#8a5010; }
      .jd-duration, .jd-company, .jd-destination { margin-top:5px; color:#4e5e64; }
      .jd-au-notice { color:#9a5a12; font-weight:700; margin-top:6px; }
      .jd-transfer, .jd-caution { margin-top:12px; padding:10px 12px; border-radius:10px; background:#f3effb; color:#553a88; }
      .jd-transfer.is-long, .jd-caution { background:#fff0d8; color:#7c4a12; }
      .jd-section { margin-top:20px; }
      .jd-section h3 { font-size:.9rem; font-weight:700; color:var(--yat-mock-navy); margin-bottom:7px; }
      .jd-timeline { border-left:3px solid var(--yat-mock-blue); padding-left:12px; }
      .jd-map-section { margin-top:20px; }
      .jd-map-toggle { border:1px solid var(--yat-mock-blue); background:#fff; color:var(--yat-mock-blue); }
      #journey-detail-map-slot { margin-top:10px; }
      #journey-detail-map-slot[hidden] { display:none; }
      #journey-detail-map-slot #map-panel { display:block !important; margin:0 !important; }
      .jd-save-wrap { margin:16px 0 12px; padding:14px; border-radius:14px; background:var(--yat-mock-blue-soft); border:1px solid #cfe1f5; }
      .jd-save { width:100%; min-height:48px; border:0; border-radius:12px; background:var(--yat-mock-blue); color:#fff; font-weight:800; font-size:.95rem; padding:11px 14px; }
      .jd-save:disabled { opacity:.72; cursor:default; }
      .jd-save.is-saved { background:#e5f4eb; color:#216843; border:1px solid #a9d3b9; }
      .jd-save-help, .jd-save-message { margin:7px 2px 0; font-size:.75rem; line-height:1.45; color:#52645a; }
      .jd-save-message.is-error { color:#a13b32; }
      .jd-save-message.is-warning { color:#8a5700; }
      .jd-save-message.is-success { color:#216843; font-weight:700; }
      .jd-nearby { width:100%; margin-top:18px; border:0; background:var(--yat-mock-blue); color:#fff; font-weight:700; }
      /* データ鮮度表示 */
      .data-freshness { font-size:.7rem; color:#e0f2f1; }
      /* ポータルから来たときだけ出す「YATポータルに戻る」（?from=portal。ポータル内の枠で開くのはやめ、同じタブで移る） */
      .portal-back { flex:1 0 100%; display:inline-flex; align-items:center; gap:6px; min-height:36px; margin-top:4px; color:#fff; font-size:.78rem; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
      .portal-back[hidden] { display:none; }
      /* 「YATにログイン」/「ログイン中」（ヘッダー）。ログイン中を押すと小さなメニュー */
      .yat-login-wrap { position:relative; flex:1 0 100%; margin-top:6px; }
      .app-header .yat-login { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:2px 12px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:transparent; color:#fff; font-size:.78rem; font-weight:600; }
      .app-header .yat-login.is-on { background:#fff; color:var(--yat-deep-emerald); border-color:#fff; }
      .yat-login-menu { position:absolute; z-index:10002; top:100%; left:0; margin-top:4px; min-width:200px; background:#fff; color:var(--text-dark); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:6px; }
      .yat-login-menu[hidden] { display:none; }
      .app-header .yat-login-menu button, .yat-login-menu a { display:block; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:var(--text-dark); font-size:.9rem; text-align:left; text-decoration:none; cursor:pointer; }
      .app-header .yat-login-menu button:hover, .yat-login-menu a:hover { background:#eef6f2; }
      .yat-notice { position:fixed; left:12px; right:12px; bottom:16px; z-index:10003; margin:0 auto; max-width:420px; padding:10px 14px; border-radius:12px; background:#7a1f1f; color:#fff; font-size:.85rem; line-height:1.5; box-shadow:0 8px 24px rgba(0,0,0,.3); }
      /* 長い結果の折りたたみ */
      .result-list.collapsed { max-height: 700px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
      /* バス停名のローマ字（二段表示） */
      .romaji { display:block; font-size:.7em; color:#888; font-weight:normal; line-height:1.1; letter-spacing:.02em; }
      /* 主要バス停の控えめな★（行先とタイムラインのみ） */
      .major-star { color:#7a8793; font-size:.8em; opacity:.9; }
      /* 言語切替 */
      /* ヘッダ左下「使い方」 */
      .help-btn { position:absolute; bottom:8px; left:10px; z-index:101; font-size:.72rem; border:1px solid rgba(255,255,255,.6); background:transparent; color:#fff; border-radius:12px; padding:2px 10px; cursor:pointer; }
      .help-btn:hover { background:rgba(255,255,255,.15); }
      .reload-btn { position:absolute; bottom:8px; right:10px; z-index:101; font-size:.72rem; border:1px solid rgba(255,255,255,.6); background:transparent; color:#fff; border-radius:12px; padding:2px 10px; cursor:pointer; }
      .reload-btn:hover { background:rgba(255,255,255,.15); }
      /* 狭い画面: タイトルと上下コントロールの被りを防ぐ（文字とボタンを少し縮小） */
      @media (max-width: 420px) {
        .help-btn, .reload-btn { font-size:.64rem; padding:1px 7px; }
      }

      /* チュートリアル（オンボーディング・スライダー） */
      .tut-overlay { position:fixed; inset:0; z-index:10000; background:rgba(20,30,25,.62); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:18px; opacity:0; transition:opacity .25s ease; }
      .tut-overlay.show { opacity:1; }
      .tut-card { background:#fff; border-radius:18px; width:100%; max-width:420px; box-shadow:0 18px 50px rgba(0,0,0,.3); padding:18px 18px 16px; position:relative; border-top:6px solid var(--yat-radiant-gold); }
      .tut-skip { position:absolute; top:10px; right:12px; background:transparent; border:none; color:#9aa0a6; font-size:.8rem; cursor:pointer; padding:4px 6px; }
      .tut-viewport { overflow:hidden; width:100%; margin-top:14px; }
      .tut-track { display:flex; transition:transform .3s ease; }
      .tut-slide { min-width:100%; box-sizing:border-box; padding:6px 4px 4px; text-align:center; }
      .tut-icon { font-size:3rem; margin-bottom:10px; }
      .tut-title { font-size:1.25rem; font-weight:700; color:var(--text-dark); margin-bottom:10px; }
      .tut-body { text-align:left; }
      .tut-text { font-size:.92rem; color:#444; line-height:1.6; }
      .tut-features { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
      .tut-features span { background:#f0f4f2; color:var(--yat-deep-emerald); border-radius:14px; padding:6px 12px; font-size:.82rem; font-weight:700; }
      .tut-features i { margin-right:5px; }
      .tut-steps { margin-top:12px; background:#f7f9f8; border-radius:10px; padding:10px 12px; }
      .tut-steps p { font-size:.85rem; color:#333; margin:4px 0; }
      .tut-steps i { width:18px; color:var(--yat-deep-emerald); margin-right:4px; }
      .tut-warn { margin-top:6px; }
      .tut-warn-item { display:flex; align-items:center; gap:10px; background:#fff6f6; border:1px solid #f5c2c2; border-radius:10px; padding:10px 12px; margin-bottom:8px; }
      .tut-warn-ic { font-size:1.3rem; color:#b06a00; width:26px; text-align:center; }
      .tut-warn-label { flex:1; font-size:.9rem; font-weight:700; color:#333; }
      .tut-warn-x { color:#e02f2f; font-size:1.2rem; }
      .tut-note { margin-top:6px; font-size:.82rem; color:#666; background:#f7f9f8; border-radius:8px; padding:8px 10px; }
      .tut-dots { display:flex; gap:7px; justify-content:center; margin:16px 0 12px; }
      .tut-dot { width:9px; height:9px; border-radius:50%; background:#d7dcd9; cursor:pointer; transition:all .2s; }
      .tut-dot.active { background:var(--yat-deep-emerald); transform:scale(1.25); }
      .tut-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; }
      .tut-nav .button { min-width:96px; }

      /* ===== 行きたい場所から探す（ps-）・周辺の場所（np-） ===== */
      /* 場所検索・周辺画面を開いている間は、タブ・地図・既存の結果を隠す（DOM・状態には触らない。閉じれば元の結果がそのまま見える） */
      body.ps-open #search-btn-container, body.ps-open #result-container, body.ps-open #loading,
      body.np-open #search-btn-container, body.np-open #result-container, body.np-open #loading { display: none !important; }
      body.np-open #place-search-root { display: none !important; }
      body.ps-open .app-main > footer { display:none !important; }
      .ps-root, .np-root { margin-top: 15px; margin-bottom: 30px; }
      .ps-page-title { margin:0 0 18px; color:var(--yat-blue-dark); font-size:1.25rem; font-weight:700; line-height:1.4; }
      .ps-box, .np-box { background:#fff; border:1px solid var(--yat-border); border-radius:var(--yat-radius); box-shadow:var(--yat-shadow); padding:20px 16px; }
      .np-box.is-preview { box-shadow: none; border: 1px solid #e6e6e6; padding: 10px; background: #fafafa; }
      .np-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
      .ps-title, .np-title { font-size: 1.15rem; font-weight: 700; color: var(--text-dark); overflow-wrap: anywhere; }
      .np-close, .ps-back, .np-back { min-height: 44px; padding: 0 12px; border: 1px solid #ddd; border-radius: 22px; background: #fff; color: #555; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
      .ps-back, .np-back { border: none; background: transparent; color: #3273dc; padding-left: 0; }
      .ps-desc { font-size: .85rem; color: #666; margin-bottom: 10px; }
      .ps-label { display: block; font-size: .85rem; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
      .ps-input { font-size: 16px; min-height: 44px; } /* 16px 未満だと iOS が入力時にズームする */
      .ps-results { margin-top: 10px; }
      .ps-sec { margin-top: 14px; }
      .ps-sec-title { font-size: .8rem; font-weight: 700; color: #6b6b6b; margin-bottom: 6px; letter-spacing: .02em; }
      .ps-cand, .ps-stop, .np-card { display: flex; width: 100%; min-height: 44px; text-align: left; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; font: inherit; color: var(--text-dark); gap: 10px; align-items: center; }
      .ps-cand:disabled { opacity: .55; cursor: default; }
      .ps-cand:active:not(:disabled), .ps-stop:active, .np-card:active { background:var(--yat-mock-blue-soft); }
      .ps-cand-icon { flex: 0 0 24px; text-align: center; color: var(--yat-deep-emerald); }
      .ps-cand.is-google .ps-cand-icon { color: #3273dc; }
      .ps-cand-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
      .ps-cand-label { font-weight: 700; overflow-wrap: anywhere; }
      .ps-cand-sub, .ps-cand-meta, .ps-stop-note { font-size: .78rem; color: #6b6b6b; overflow-wrap: anywhere; }
      .ps-cand-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
      .ps-cand-prov { font-size: .7rem; color: #555; border: 1px solid #d0d0d0; border-radius: 4px; padding: 0 5px; } /* Google 由来の補助表示（ブランド名のまま） */
      .ps-cand-kind { font-size: .72rem; color: #6b6b6b; }
      .ps-note { font-size: .8rem; color: #6b6b6b; padding: 4px 2px; }
      .ps-error { font-size: .85rem; color: #8a1c1c; background: #fff5f5; border: 1px solid #f0c9c9; border-radius: 8px; padding: 8px 10px; margin-top: 8px; overflow-wrap: anywhere; }
      .ps-empty { text-align: center; padding: 18px 8px; }
      .ps-empty-title { font-weight: 700; color: var(--text-dark); }
      .ps-empty-sub { font-size: .85rem; color: #6b6b6b; margin-top: 2px; }
      /* Google Maps 帰属表示: Google 区分の下部・同じ視覚コンテナ内。常時表示（隠さない・改変しない）。公式ロゴは高さ 18px（最小 16px）・縦横比維持 */
      .ps-attr { display: flex; justify-content: flex-start; align-items: center; margin-top: 6px; padding: 4px 2px; background: #fff; }
      .ps-attr-logo { height: 18px; width: auto; display: block; }
      .ps-place-card { background:#f6f9fd; border:1px solid #d8e3ee; border-radius:12px; padding:14px; margin:6px 0 12px; }
      .ps-place-name { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); overflow-wrap: anywhere; }
      .ps-place-kind { font-size: .8rem; color: var(--yat-deep-emerald); font-weight: 700; margin-top: 2px; }
      .ps-place-addr { font-size: .8rem; color: #6b6b6b; margin-top: 4px; overflow-wrap: anywhere; }
      .ps-cta, .np-cta { width: 100%; min-height: 48px; border: none; border-radius: 24px; background: var(--yat-deep-emerald); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; }
      .ps-stops-slot { margin-top: 12px; }
      .ps-stops-title, .ps-explore-title { font-size: .95rem; font-weight: 700; color: var(--text-dark); margin: 0 0 8px; overflow-wrap: anywhere; }
      .ps-stop { flex-direction: column; align-items: flex-start; gap: 2px; }
      .ps-stop-name { font-weight: 700; overflow-wrap: anywhere; }
      .ps-stop-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; color: #444; }
      .ps-stop-action { align-self: stretch; display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:7px; padding-top:8px; border-top:1px solid #e7edf3; color:var(--yat-mock-blue); font-size:.8rem; font-weight:700; }
      .ps-badge, .np-badge { display:inline-block; border-radius:10px; padding:0 8px; font-size:.7rem; line-height:1.6; background:var(--yat-mock-blue-soft); color:#185d9a; }
      .ps-badge.is-soft, .np-badge { background: #eef0f2; color: #555; }
      .ps-explore { margin-top: 18px; padding-top: 12px; border-top: 1px dashed #d8d8d8; }
      .ps-explore-title { font-size: .85rem; color: #555; }
      .np-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
      .np-chip { padding: 0 12px; border: 1px solid #d5d5d5; border-radius: 18px; background: #fff; color: #444; font-size: .8rem; cursor: pointer; }
      .np-card { flex-direction: column; align-items: flex-start; gap: 2px; }
      .np-card-name, .np-detail-name { font-weight: 700; overflow-wrap: anywhere; }
      .np-card-line, .np-detail-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; color: #555; }
      .np-note, .np-empty { font-size: .85rem; color: #6b6b6b; padding: 6px 2px; }
      .np-error { font-size: .85rem; color: #8a1c1c; padding: 6px 2px; }
      .np-expand, .np-more, .np-retry { min-height: 44px; padding: 0 16px; border: 1px solid #3273dc; border-radius: 22px; background: #fff; color: #3273dc; font-size: .85rem; cursor: pointer; margin-top: 4px; }
      .np-detail { padding-top: 4px; }
      .np-detail-line { margin: 4px 0 12px; }
      /* 行き先欄の補足行 */
      .ps-dest-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
      .ps-dest-note-text { font-size: .85rem; color: var(--text-dark); font-weight: 700; overflow-wrap: anywhere; }
      .od-place-transition { margin:0 0 16px; padding:14px; border:1px solid #b8d6f3; border-left:5px solid var(--yat-mock-blue); border-radius:14px; background:var(--yat-mock-blue-soft); color:var(--yat-mock-navy); animation:od-place-enter .22s ease-out both; }
      .od-place-transition-title { display:flex; align-items:center; gap:7px; margin:0 0 8px; color:#17649d; }
      .od-place-transition-place { margin:0; font-size:1rem; font-weight:800; overflow-wrap:anywhere; }
      .od-place-transition-stop { margin:2px 0 0; font-size:.82rem; color:#40566c; overflow-wrap:anywhere; }
      .od-place-transition-next { margin:10px 0 0; padding-top:9px; border-top:1px solid #c9dff3; font-size:.88rem; font-weight:800; }
      #origin-od-field.is-next-step { margin:-5px -7px 12px; padding:7px; border-radius:12px; background:#f2f8ff; }
      #origin-od-field.is-next-step .label { color:#145f9a; }
      #origin-od-field.is-next-step .input { border-color:var(--yat-mock-blue); box-shadow:0 0 0 3px rgba(7,107,232,.14); }
      @keyframes od-place-enter { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:translateY(0); } }
      @media (prefers-reduced-motion: reduce) { .od-place-transition { animation:none; } }
      /* Stage 1 visual system: the public UI is card-first and the map is a secondary view. */
      body { color:var(--text-dark); background:#fff; }
      /* タイトルは残り幅を使い、言語・使い方・再読込は常に同じ行の右端に置く（basis を 0 にして折り返しで左下へ落ちないようにする）。 */
      .app-brand { line-height:1.1; }
      .app-brand-name { font-family:'Shippori Mincho',serif; font-size:1.18rem; font-weight:700; letter-spacing:.1em; }
      .app-brand-subtitle { font-size:.62rem; font-weight:500; letter-spacing:.04em; opacity:.82; }
      .app-tools { display: flex; align-items: center; gap: 2px; }
      /* 狭い画面では「使い方」「再読込」をアイコンだけにする（文言は読み上げ用に残す）。 */
      @media (max-width:430px) {
        #help-btn-text, #reload-btn-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
        .app-tools .help-btn i, .app-tools .reload-btn i { margin-right:0 !important; font-size:1rem; }
        .app-brand-name { font-size:1.02rem; letter-spacing:.06em; white-space:nowrap; }
        .app-header .app-tools button { min-width:38px; padding:4px; }
        .app-header .app-tools #lang-ja { padding:4px 8px; }
      }
      @media (max-width:380px) { .app-brand-name { font-size:.9rem; letter-spacing:.04em; } }
      .app-header button { position: static; min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; padding: 6px; background: transparent; color: #fff; font: inherit; font-size: .75rem; cursor: pointer; }
      .app-header button.active { background: #fff; color: var(--yat-deep-emerald); }
      /* ヘッダーの並び（HTML は変えず grid で置き直す）: 1段目 タイトル｜YATにログイン、2段目 サブタイトル（全文）、
         3段目 ダイヤの期間｜言語・使い方・再読込、4段目 YATポータルに戻る。狭い画面でもサブタイトルを切らない */
      .app-header { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name login" "sub sub" "fresh tools" "back back"; align-items:center; column-gap:10px; row-gap:0; min-height:76px; padding:12px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); background:linear-gradient(135deg,var(--yat-mock-navy) 0%,var(--yat-mock-header) 100%); color:#fff; box-shadow:0 8px 22px rgba(8,43,80,.22); }
      .app-header .app-brand { display:contents; }
      .app-header .app-brand-name { grid-area:name; min-width:0; line-height:1.2; white-space:nowrap; }
      .app-header .app-brand-subtitle { grid-area:sub; margin-top:4px; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.4; }
      .app-header .yat-login-wrap { grid-area:login; margin-top:0; justify-self:end; }
      .app-header .yat-login-menu { left:auto; right:0; }
      .app-header .data-freshness { grid-area:fresh; min-width:0; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere; margin: 0; font-size: .65rem; } /* 「最終更｜新」のような語の途中では折らない */
      .app-header .app-tools { grid-area:tools; margin-left:0; justify-self:end; }
      .app-header .app-tools button { min-height:40px; }
      .app-header .portal-back { grid-area:back; }
      .app-main { max-width:760px; margin-top:0 !important; padding-top:18px; }
      body.home-open:not(.ps-open):not(.np-open):not(.picker-open):not(.service-status-open):not(.saved-list-open) .app-main { padding:0 0 18px !important; background-image:linear-gradient(180deg,rgba(4,27,52,.18) 0%,rgba(4,31,57,.28) 35%,rgba(4,28,51,.58) 100%),url("https://storage.googleapis.com/yat-portal.firebasestorage.app/media/202609/30wvQhPZqlg01W1Erg43_thumb.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat; }
      #home-screen { position:relative; overflow:hidden; margin:0; padding:28px 16px 18px; background:transparent; }
      .home-intro { position:relative; margin:0 4px 26px; padding:0; color:#fff; text-shadow:0 2px 9px rgba(2,20,38,.56); }
      .home-intro h1 { font-size:1.55rem; line-height:1.5; font-weight:700; max-width:25ch; margin-bottom:9px; white-space:pre-line; }
      .home-intro > p:last-child { max-width:40ch; font-size:.84rem; color:rgba(255,255,255,.94); line-height:1.8; white-space:pre-line; }
      .home-shuttle-headline { position:relative; display:grid; grid-template-columns:minmax(0,max-content) auto; justify-content:start; align-items:center; column-gap:6px; row-gap:2px; margin:0 0 12px; padding:7px 10px; border:1px solid rgba(255,255,255,.32); border-radius:9px; background:rgba(4,43,77,.66); color:#fff; box-shadow:0 3px 10px rgba(3,24,45,.16); backdrop-filter:blur(4px); }
      .home-shuttle-headline h2 { grid-column:1; grid-row:1; margin:0; min-width:0; color:#fff; font-size:.76rem; font-weight:750; line-height:1.35; overflow-wrap:anywhere; }
      .home-shuttle-status { display:contents; }
      .home-shuttle-badge { display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; border-radius:999px; background:#e9eef2; color:#455867; font-size:.7rem; font-weight:800; white-space:nowrap; }
      .home-shuttle-badge,.home-shuttle-loading,.home-shuttle-unavailable { grid-column:2; grid-row:1; }
      .home-shuttle-badge.is-normal { background:#e4f5ed; color:#08643e; }
      .home-shuttle-badge.is-caution { background:#fff0dc; color:#85500f; }
      .home-shuttle-badge.is-suspended { background:#ffe5e8; color:#a31328; }
      .home-shuttle-loading,.home-shuttle-unavailable { color:rgba(255,255,255,.9); font-size:.7rem; text-align:right; }
      .home-shuttle-updated { grid-column:1 / -1; grid-row:2; margin:0; color:rgba(255,255,255,.72); font-size:.64rem; line-height:1.3; }
      .home-cards { display:grid; gap:10px; }
      .home-card { display:flex; align-items:center; gap:14px; padding:15px 14px; min-height:82px; width:100%; border:1px solid rgba(255,255,255,.72); border-radius:15px; background:rgba(255,255,255,.82); color:var(--text-dark); font:inherit; text-align:left; cursor:pointer; box-shadow:0 5px 16px rgba(4,31,57,.17); transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; backdrop-filter:blur(5px); }
      .home-card:hover:not(:disabled) { transform:translateY(-1px); border-color:#7cadce; box-shadow:0 8px 22px rgba(18,59,104,.12); }
      .home-card:disabled { background: #f5f6f7; border-color: #e2e5e7; color: #626c72; cursor: default; box-shadow: none; }
      .home-icon { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--yat-blue-soft); color:var(--yat-blue); font-size:1.28rem; }
      .home-card:disabled .home-icon { background: #e9edef; color: #626c72; }
      /* 準備中（場所データ未投入）の入口: グレーアウトして押せない */
      .home-card.is-soon { background:#f1f3f4; border-color:#dfe3e5; color:#78848a; box-shadow:none; backdrop-filter:none; cursor:not-allowed; }
      .home-card.is-soon .home-card-copy small { color:#78848a; }
      .home-soon-badge { flex:none; align-self:center; padding:3px 10px; border-radius:999px; background:#e2e6e8; color:#5f6b72; font-size:.72rem; font-weight:700; }
      .np-soon { font-size:.8em; font-weight:700; margin-left:2px; }
      .np-link.is-soon, .np-link.is-soon:disabled { opacity:1; background:#eceff1; color:#78848a; border-color:#dfe3e5; cursor:not-allowed; }
      .jd-nearby.is-soon, .jd-nearby.is-soon:disabled { background:#c9d2d8; color:#fff; cursor:not-allowed; }
      .home-card-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
      .home-card-copy strong { font-size:1.02rem; line-height:1.4; }
      .home-card-copy small { font-size: .75rem; line-height: 1.6; color: #58656d; }
      .home-arrow { color: #536b78; font-size: 1.6rem; }
      .home-secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0 20px; }
      .home-secondary button, #return-home-btn, #journey-results-back { min-height:46px; border:1px solid var(--yat-border); border-radius:13px; padding:11px 12px; background:#fff; color:var(--yat-blue-dark); font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; }
      .home-secondary button { background:rgba(255,255,255,.78); border-color:rgba(255,255,255,.68); backdrop-filter:blur(5px); display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; }
      .home-route-status-note { display:flex; align-items:flex-start; gap:7px; margin:-8px 3px 0; padding:9px 10px; border-radius:10px; background:rgba(4,28,51,.62); color:rgba(255,255,255,.96); font-size:.7rem; line-height:1.55; }
      .home-route-status-note i { flex:none; margin-top:3px; }
      /* 「HOMEへ戻る」: 下へスクロールしても左上に追従する小さなボタン。最初はヘッダーの下の定位置にあり、
         スクロールするとその位置から動き出して左上に留まる（ヘッダーには被らない）。次の行（.screen-nav）と同じ高さに重ねて置く。 */
      .home-follow { position:sticky; top:calc(env(safe-area-inset-top, 0px) + 8px); z-index:1100; height:44px; margin:0 0 -44px; pointer-events:none; }
      .home-follow #return-home-btn { pointer-events:auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 14px 6px 12px; border-radius:22px; box-shadow:0 2px 10px rgba(8,43,80,.2); }
      .screen-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; min-height:44px; padding-left:104px; }
      #return-home-btn, #journey-results-back { margin:0; align-items:center; gap:6px; }
      #journey-results-back { display:none; }
      body.journey-results #journey-results-back { display:inline-flex; }
      body.journey-detail-open #journey-results-back, body.ps-open #journey-results-back, body.np-open #journey-results-back, body.map-view-open #journey-results-back { display:none !important; }
      .screen-title, #nearby-stop-heading { font-size:1.45rem; font-weight:700; color:var(--yat-blue-dark); margin:0 0 18px; }
      #nearby-stop-picker { padding:6px 0 20px; }
      #nearby-stop-picker label { display: block; font-size: .85rem; margin-bottom: 8px; }
      .picker-shell { padding:20px 16px; border:1px solid var(--yat-border); border-radius:var(--yat-radius); background:#fff; box-shadow:var(--yat-shadow); }
      .picker-help { color:#647785; font-size:.8rem; line-height:1.65; margin:-8px 0 18px; }
      #nearby-stop-input { min-height:50px; font-size:16px; margin-bottom:12px; border-color:#cbdbe7; border-radius:12px; box-shadow:none; }
      #nearby-stop-results { display: grid; gap: 6px; }
      #nearby-stop-results .ps-cand.is-selected { border-color:var(--yat-blue); background:var(--yat-blue-soft); color:var(--yat-blue-dark); font-weight:700; }
      .picker-submit { width:100%; min-height:52px; margin-top:16px; border:0; border-radius:14px; background:linear-gradient(135deg,#1769aa,#0c5a9b); color:#fff; font:inherit; font-weight:700; cursor:pointer; box-shadow:0 7px 18px rgba(23,105,170,.2); }
      .picker-submit:disabled { background:#c7d1da; box-shadow:none; cursor:default; }
      .legacy-form-card { border:1px solid var(--yat-border) !important; border-radius:var(--yat-radius) !important; overflow:visible !important; box-shadow:var(--yat-shadow); }
      .legacy-form-card > .p-4 { padding:20px 16px !important; }
      #mtab-content-find .field { margin-bottom:18px; }
      #mtab-content-find .input,#mtab-content-find .select select { min-height:50px; border-radius:12px; border-color:#cbdbe7; box-shadow:none; }
      .od-date-time { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:8px 0 18px; }
      .od-date-time .field { margin:0 !important; }
      .od-date-time input[type="date"],.od-date-time input[type="time"] { min-width:0; width:100%; max-width:100%; font-size:16px; }
      .od-time-hint { margin:-8px 0 14px; font-size:.78rem; line-height:1.5; color:#42586a; }
      .od-time-clear { margin-left:6px; padding:2px 8px; border:1px solid #cbdbe7; border-radius:999px; background:#fff; color:var(--yat-blue-dark); font:inherit; font-size:.72rem; cursor:pointer; }
      #btn-exec-od { min-height:52px !important; border:0; border-radius:14px; background:linear-gradient(135deg,#1769aa,#0c5a9b); box-shadow:0 7px 18px rgba(23,105,170,.2); }
      .nearest-start { padding:4px 0; }
      .nearest-start p { color:#637482; line-height:1.7; margin-bottom:18px; }
      #btn-exec-nearest { min-height:54px !important; border:0; border-radius:14px; background:linear-gradient(135deg,#1769aa,#0c5a9b); color:#fff; font-weight:700; box-shadow:0 7px 18px rgba(23,105,170,.2); }
      .nearest-results { background:#fff; border:1px solid var(--yat-border); border-radius:var(--yat-radius); box-shadow:var(--yat-shadow); padding:18px 14px; }
      .nearest-results h2 { color:var(--yat-blue-dark); font-size:1.25rem; font-weight:700; margin-bottom:5px; }
      .nearest-results-help { color:#647785; font-size:.75rem; line-height:1.6; margin-bottom:12px; }
      .nearest-stop-list { display:grid; gap:8px; }
      .nearest-stop-card { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; width:100%; padding:11px 12px; border:1px solid var(--yat-border); border-radius:14px; background:#fff; color:var(--text-dark); font:inherit; text-align:left; cursor:pointer; }
      .nearest-stop-card strong { min-width:0; overflow-wrap:anywhere; }
      .nearest-stop-card span { flex:none; color:var(--yat-blue); font-size:.8rem; font-weight:700; }
      .secondary-map-button { width:100%; min-height:48px; margin-top:14px; border:1px solid var(--yat-blue); border-radius:14px; background:#fff; color:var(--yat-blue); font:inherit; font-weight:700; cursor:pointer; }
      .legacy-tabs, #home-screen, #nearby-stop-picker { display: none !important; }
      body.home-open #home-screen { display: block !important; }
      body.home-open #legacy-workspace, body.home-open #result-container, body.home-open #loading, body.home-open .screen-nav, body.home-open .home-follow { display: none !important; }
      body.picker-open #legacy-workspace { display: none !important; }
      body.picker-open #nearby-stop-picker { display: block !important; }
      body.service-status-open #legacy-workspace { display: none !important; }
      body.service-status-open #service-status-screen { display: block !important; }
      #service-status-screen { display:none; }
      body.saved-list-open #legacy-workspace { display: none !important; }
      body.saved-list-open #saved-list-screen { display: block !important; }
      #saved-list-screen { display:none; }
      /* 保存したバス一覧 */
      .sl-item { background:#fff; border:1px solid #dce7e2; border-radius:14px; padding:14px; margin-bottom:12px; overflow-wrap:anywhere; scroll-margin-top:64px; }
      .sl-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
      .sl-no-upcoming { margin:0 0 12px; padding:10px 12px; background:#fff; border:1px solid #dce7e2; border-radius:12px; font-weight:700; color:#58656d; }
      .sl-past { margin-top:8px; }
      .sl-past-summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; color:var(--yat-blue-dark); }
      .sl-item.is-past { background:#f3f5f6; border-color:#e1e6e8; }
      .sl-item.is-past .sl-date, .sl-item.is-past .sl-time, .sl-item.is-past .sl-route, .sl-item.is-past .sl-operators, .sl-item.is-past .sl-detail-body { color:#7c878d; opacity:.85; }
      .sl-date { font-weight:700; color:var(--yat-deep-emerald); }
      .sl-time { margin-top:6px; font-size:1.15rem; }
      .sl-unknown { font-size:.85rem; color:#68747a; }
      .sl-route { margin-top:4px; font-weight:600; }
      .sl-operators { margin-top:2px; font-size:.78rem; color:#58656d; }
      .sl-actions { margin-top:10px; }
      .sl-delete { min-height:44px; padding:6px 16px; border:1px solid #c9d3d8; border-radius:10px; background:#fff; color:#a12a2a; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
      .sl-details { margin-top:8px; }
      .sl-details summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--yat-blue-dark); font-weight:700; font-size:.85rem; }
      .sl-leg { margin-top:8px; }
      .sl-leg-title { font-size:.85rem; font-weight:700; }
      .sl-leg-meta, .sl-note { font-size:.78rem; color:#58656d; margin-top:2px; }
      .sl-transfer-line { margin:10px 0 0; padding:6px 10px; background:#fff7e6; border-radius:8px; font-size:.78rem; font-weight:700; }
      .sl-stops { list-style:none; margin:6px 0 0; padding:0 0 0 10px; border-left:3px solid #cfe1da; }
      .sl-stop { display:flex; gap:8px; align-items:baseline; padding:3px 0; font-size:.85rem; }
      .sl-stop.is-via { color:#58656d; font-size:.8rem; }
      .sl-stop-label { flex:none; font-size:.7rem; color:#fff; background:#3f7f6a; border-radius:999px; padding:0 7px; }
      .sl-stop-name { flex:1; min-width:0; }
      .sl-stop-time { flex:none; font-weight:700; }
      .sl-via summary { min-height:36px; display:flex; align-items:center; cursor:pointer; color:var(--yat-blue-dark); font-size:.8rem; font-weight:600; }
      .sl-via-list { list-style:none; margin:0; padding:0; }
      .sl-close { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; margin-top:12px; border:1px solid #c9d3d8; border-radius:10px; background:#f5f8f7; color:var(--yat-blue-dark); font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
      .ss-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:14px; }
      .ss-head h2 { color:var(--yat-deep-emerald); font-size:1.25rem; font-weight:700; margin:0; }
      .ss-head p { color:#58656d; font-size:.8rem; margin-top:4px; }
      .ss-reload { min-height:44px; flex:none; }
      .ss-state { background:#fff; border-radius:14px; padding:18px 14px; border:1px solid #dce7e2; text-align:center; }
      .ss-disclaimer { color:#68747a; font-size:.72rem; line-height:1.6; margin-top:8px; }
      .ss-notice { background:#fff; border:1px solid #dce7e2; border-left:5px solid #3273dc; border-radius:14px; padding:14px; margin-bottom:12px; overflow-wrap:anywhere; }
      .ss-notice.is-warning { border-left-color:#e8952f; background:#fffaf3; }
      .ss-notice.is-critical { border-left-color:#d7263d; background:#fff7f7; }
      .ss-status { display:inline-block; border-radius:999px; padding:3px 9px; background:#eaf3ff; color:#165a9c; font-size:.72rem; font-weight:700; }
      .ss-notice.is-warning .ss-status { background:#fff0dc; color:#8a5010; }
      .ss-notice.is-critical .ss-status { background:#ffe5e8; color:#a31328; }
      .ss-message { font-weight:700; line-height:1.65; margin:10px 0; white-space:pre-wrap; }
      .ss-meta { display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 9px; font-size:.72rem; line-height:1.5; color:#536168; }
      .ss-meta dt { font-weight:700; }
      .ss-source-link { color:#1769aa; text-decoration:underline; overflow-wrap:anywhere; }
      .journey-notice-slot:empty { display:none; }
      .jc-service-notice { margin:9px 0 2px; border-radius:10px; padding:8px 10px; background:#eaf3ff; color:#174f81; font-size:.72rem; line-height:1.45; }
      .jc-service-notice.is-warning { background:#fff0dc; color:#7a450b; }
      .jc-service-notice.is-critical { background:#ffe5e8; color:#991128; }
      .jc-service-label { display:block; font-weight:700; margin-bottom:2px; }
      .jc-service-more { display:block; margin-top:2px; }
      .jd-service-status { margin-top:18px; }
      .jd-service-status h3 { color:var(--yat-mock-navy); font-size:.95rem; font-weight:700; margin-bottom:9px; }
      .jd-service-item { text-align:left; }
      .jd-service-legs { font-weight:700; margin-top:5px; }
      body.ps-open .screen-nav { display:flex !important; }
      body.ps-open .home-follow { display:block !important; }
      body.ps-open #return-home-btn, body.np-open #return-home-btn { display: inline-flex !important; }
      #legacy-workspace .button, #legacy-workspace .panel-block, .np-chip, .np-link { min-height: 44px; }
      #legacy-workspace .button { height: auto; white-space: normal; }
      #legacy-workspace input, #legacy-workspace select { min-height: 44px; font-size: 16px; }
      #map-panel { display:none !important; border:1px solid var(--yat-border) !important; border-radius:var(--yat-radius); box-shadow:var(--yat-shadow); }
      #map-secondary-screen { display:none; }
      body.map-view-open #map-secondary-screen { display:block; }
      body.map-view-open #map-secondary-screen #map-panel,
      #journey-detail-map-slot:not([hidden]) #map-panel { display:block !important; }
      body.map-view-open #legacy-workspace,body.map-view-open #nearby-stop-picker,body.map-view-open #service-status-screen,body.map-view-open #saved-list-screen,body.map-view-open #result-container,body.map-view-open #nearby-root { display:none !important; }
      body.np-open.map-view-open #search-btn-container { display:block !important; }
      .map-secondary-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
      .map-secondary-head h2 { color:var(--yat-blue-dark); font-size:1.3rem; font-weight:700; }
      .map-back { min-height:44px; border:1px solid var(--yat-border); border-radius:22px; background:#fff; color:var(--yat-blue-dark); padding:8px 14px; font:inherit; font-weight:700; cursor:pointer; }
      .np-map-button { min-height:44px; padding:8px 14px; margin:0 0 12px; border:1px solid var(--yat-blue); border-radius:22px; background:#fff; color:var(--yat-blue); font:inherit; font-weight:700; cursor:pointer; }
      .np-chip.is-active { background:var(--yat-blue); border-color:var(--yat-blue); color: #fff; }
      button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #3273dc; outline-offset: 3px; }
      @media (min-width:700px) { .home-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-card { min-height:94px; } .home-card:last-child { grid-column:1 / -1; } }
      @media (max-width:359px) { #home-screen { padding:22px 12px 14px; } .home-card { padding:13px 10px; gap:8px; min-height:76px; } .home-intro { margin:0 4px 22px; } .home-intro h1 { font-size:1.3rem; } .app-brand-name { font-size:.9rem; letter-spacing:.03em; white-space:normal; } .app-brand-subtitle { font-size:.56rem; } .app-header button { min-width:40px; padding:5px 3px; } .od-date-time { grid-template-columns:1fr; } }
      /* Portal からの保存復帰中だけ出す全画面スプラッシュ（Portal 側と同じ紺のグラデーション）。通常は非表示。 */
      #yat-return-splash { display:none; }
      html.yat-returning #yat-return-splash { position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; color:#fff; background:linear-gradient(135deg,var(--yat-mock-navy,#082b50),#0c4a7a); }
      html.yat-returning body > :not(#yat-return-splash):not(script) { visibility:hidden !important; }
      html.yat-returning #full-screen-loading { display:none !important; }
      .yat-return-spinner { width:44px; height:44px; border-radius:50%; border:4px solid rgba(255,255,255,.28); border-top-color:#fff; animation:spin .9s linear infinite; }
      .yat-return-text { margin:0; font-size:1.15rem; font-weight:700; letter-spacing:.04em; }
      .yat-return-sub { margin:0; font-size:.85rem; color:rgba(255,255,255,.75); }
      @media (prefers-reduced-motion:reduce) { .yat-return-spinner { animation:none; border-top-color:rgba(255,255,255,.28); border-style:dotted; } }
      /* 保存ボタンの案内（会員登録またはログインが必要・YAT の説明・進む） */
      .js-gate-overlay { position:fixed; inset:0; z-index:10001; background:rgba(20,30,25,.6); display:flex; align-items:center; justify-content:center; padding:18px; }
      .js-gate-card { background:#fff; border-radius:16px; width:100%; max-width:400px; padding:22px 20px 14px; box-shadow:0 18px 50px rgba(0,0,0,.3); border-top:6px solid var(--yat-radiant-gold); text-align:center; }
      .js-gate-title { font-size:1.05rem; font-weight:700; color:var(--text-dark); line-height:1.6; overflow-wrap:anywhere; }
      .js-gate-about { font-size:.9rem; color:#555; line-height:1.7; margin-top:10px; overflow-wrap:anywhere; }
      .js-gate-go.button { display:block; width:100%; min-height:48px; margin-top:18px; border:none; border-radius:999px; background:var(--yat-deep-emerald); color:#fff; font-weight:700; font-size:1rem; }
      .js-gate-cancel { display:block; width:100%; min-height:44px; margin-top:4px; background:transparent; border:none; color:#7a7a7a; font-size:.9rem; cursor:pointer; }