/*
* SGBusNavi — デザイントークン
*
* 姉妹プロジェクト SG在住Navi (sg-weekend-app) の
* public/app.css / public/css/about-shared.css の変数体系（柳グリーン配色）を
* ベースとしてそのまま踏襲する（CLAUDE.md / plan.md 9.5節 ユーザー決定事項）。
*
* 構成:
* 1. ベース変数（sg-weekend-app実ファイルの値をそのまま移植）
* 2. 意味的エイリアス（モックアップ由来の --surface-1 等の変数名をベース変数に紐付け）
* → 今後モックアップのCSSをほぼそのままコピーしても意味的な変数名で解決される
* 3. ダークモードオーバーライド（sg-weekend-appと同一方式: html[data-theme="dark"]）
*
* Tabler Icons（ti ti-*）について:
* 今回はCSSトークンのみの作業のため未読み込み。次ステップ（ホーム画面HTML実装）で
* index.html の に以下のCDN を追加すること:
*
*/
:root {
/* ── 1. ベース変数（sg-weekend-app: public/app.css 1〜35行目を移植、値を揃える） ── */
--cream: #FAFAF8;
--warm-white: #FFFFFF;
--sand: #EAEAE6;
--sand-dark: #DCDCD6;
--caramel: #6F8F63;
--caramel-light: #9BB58F;
--caramel-pale: #EEF3EA;
--sage: #6F8F63;
--sage-light: #9BB58F;
--sage-pale: #EEF3EA;
--terracotta: #52704A;
--terracotta-light: #9BB58F;
--terracotta-pale: #EEF3EA;
--terracotta-light-pale: #EEF3EA;
--midnight: #2B2B27;
--warm-gray: #767268;
--light-gray: #A8A49A;
--gold: #6F8F63;
--gold-light: #9BB58F;
--gold-pale: #EEF3EA;
--sky: #6F8F63;
--sky-pale: #EEF3EA;
--plum: #52704A;
--plum-pale: #EEF3EA;
--holiday-red: #C0392B;
--holiday-red-pale: rgba(192, 57, 43, 0.14);
--festival-gold: #B8860B;
--festival-gold-pale: rgba(184, 134, 11, 0.14);
--radius-card: 24px;
--radius-btn: 14px;
--shadow-soft: 0 2px 12px rgba(43, 43, 39, 0.06);
--shadow-card: 0 4px 18px rgba(43, 43, 39, 0.08);
/*
* フォント: sg-weekend-appと同一の 'Noto Sans JP', sans-serif を採用する。
* SG Bus Naviは「英語メイン・日本語切替可能」の方針だが、姉妹アプリとの
* デザイン統一を優先する方針にユーザー承認済み（design-checker差分是正）。
*/
--font-heading: 'Noto Sans JP', sans-serif;
/* ── 2. 意味的エイリアス（モックアップ変数名 → sg-weekend-appベース変数） ──
* plan.md 9.5節「ユーザー決定事項」の対応表に準拠。
*/
--surface-2: var(--cream); /* 画面背景 */
--surface-1: var(--warm-white); /* カード背景・浮いた面 */
--text-primary: var(--midnight); /* 主要テキスト */
--text-secondary: var(--warm-gray); /* 副次テキスト */
--text-muted: var(--light-gray); /* 控えめテキスト */
--text-accent: var(--caramel); /* アクセントテキスト（系統番号ハイライト等） */
--bg-accent-muted: var(--caramel-pale); /* アクセントの薄い背景（フィルターピル等） */
--fill-accent: var(--caramel); /* アクセントの塗りつぶし（系統番号バッジ背景等） */
--border: var(--sand); /* 枠線 */
--border-strong: var(--sand-dark); /* 強めの枠線 */
--border-accent: var(--caramel); /* 強調カードの枠線 */
--on-accent: var(--warm-white); /* アクセント背景の上に乗る文字色 */
}
/* ── 3. ダークモード（sg-weekend-app: public/app.css 1543行目以降のオーバーライドを踏襲） ──
* 切り替えトリガーはCSSの対象外（次ステップのJS実装で document.documentElement に
* data-theme="dark" 属性を付け外しする想定。sg-weekend-appのapp.js applyTheme()と同一方式）。
*/
html[data-theme="dark"] {
--cream: #1B1E19;
--warm-white: #14160F;
--sand: #262B22;
--sand-dark: #32382C;
--caramel-pale: #1E241A;
--sage-pale: #1E241A;
--terracotta-pale: #1E241A;
--terracotta-light-pale: #1E241A;
--gold-pale: #1E241A;
--sky-pale: #1E241A;
--plum-pale: #1E241A;
--midnight: #EDEAE3;
--warm-gray: #9C9A8E;
--light-gray: #4A4E42;
--caramel-light: #7FA075;
--sage-light: #7FA075;
--terracotta-light: #7FA075;
--gold-light: #7FA075;
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.4);
--shadow-card: 0 6px 28px rgba(0, 0, 0, 0.5);
color-scheme: dark;
/* --on-accent はダーク時もアクセント背景（--caramel系）に対して読みやすい配色を維持する */
--on-accent: var(--warm-white);
}
/* ── ベースリセット・基本スタイル（sg-weekend-appと同一方針） ── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
html,
body {
overscroll-behavior-x: none;
background-color: var(--surface-2);
}
body {
overscroll-behavior-y: none;
font-family: var(--font-heading);
background: var(--surface-2);
color: var(--text-primary);
min-height: 100dvh;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
/* ══════════════════════════════════════════════
* アプリシェル（画面全体のレイアウト）
* モックアップは320px幅のプレビューカードとして提示されていたが、
* 実アプリでは画面幅いっぱい〜モバイル幅中央寄せのシェルとして扱う。
* ══════════════════════════════════════════════ */
.app-shell {
display: flex;
flex-direction: column;
max-width: 480px;
margin: 0 auto;
min-height: 100dvh;
background: var(--surface-2);
position: relative;
}
/* ── 画面切替（.screen / .visible） ── */
.screen {
display: none;
flex: 1;
flex-direction: column;
padding-bottom: 84px; /* ボトムナビ分の余白 */
}
.screen.visible {
display: flex;
}
/* ══════════════════════════════════════════════
* ヘッダー（Home画面）
* ══════════════════════════════════════════════ */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 14px 4px;
}
.app-header-stop {
display: flex;
align-items: center;
gap: 6px;
}
.app-header-stop i {
font-size: 16px;
color: var(--text-accent);
}
.app-header-stop-name {
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
}
.filter-toggle {
display: flex;
align-items: center;
gap: 5px;
background: var(--bg-accent-muted);
border-radius: 999px;
padding: 6px 10px;
transition: background-color 0.15s ease, opacity 0.15s ease;
}
.filter-toggle i {
font-size: 13px;
color: var(--text-accent);
}
.filter-toggle span {
font-size: 10px;
font-weight: 500;
color: var(--text-accent);
}
.filter-toggle[aria-pressed="true"] {
background: var(--fill-accent);
}
.filter-toggle[aria-pressed="true"] i,
.filter-toggle[aria-pressed="true"] span {
color: var(--on-accent);
}
/* ── スワイプドット ──
* 将来: 横スワイプで最寄りバス停2番目・3番目に切替予定。今回は静的表示のみ。
*/
.swipe-dots {
display: flex;
justify-content: center;
gap: 5px;
padding: 10px 0;
}
.swipe-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--border-strong);
cursor: pointer;
transition: width 0.15s ease, border-radius 0.15s ease, background-color 0.15s ease;
}
.swipe-dot.active {
width: 16px;
height: 5px;
border-radius: 3px;
background: var(--text-accent);
}
/* ══════════════════════════════════════════════
* GPS取得失敗時のフォールバックUI
* 表示中はバスカードリスト・スワイプドットを非表示にする
* （app.js側でスワイプドットにもhidden属性を付与する）。
* ══════════════════════════════════════════════ */
.gps-fallback {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 32px 24px;
text-align: center;
}
.gps-fallback[hidden] {
display: none;
}
.gps-fallback i {
font-size: 34px;
color: var(--text-muted);
}
.gps-fallback-title {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.gps-fallback-message {
font-size: 12px;
color: var(--text-secondary);
max-width: 280px;
line-height: 1.5;
}
.gps-fallback-btn {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
background: var(--fill-accent);
color: var(--on-accent);
border-radius: var(--radius-btn);
padding: 10px 18px;
font-size: 13px;
font-weight: 500;
transition: opacity 0.15s ease, transform 0.1s ease;
}
.gps-fallback-btn:active {
transform: scale(0.97);
}
.gps-fallback-btn i {
font-size: 15px;
color: var(--on-accent);
}
/* ══════════════════════════════════════════════
* バスカードフィード（Home画面）
* ══════════════════════════════════════════════ */
.bus-card-list {
display: flex;
flex-direction: column;
gap: 22px;
padding: 0 14px 14px;
}
.bus-card {
display: block;
width: 100%;
text-align: left;
background: var(--surface-1);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 14px;
transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.bus-card:active {
transform: scale(0.98);
}
.bus-card--highlight {
background: var(--bg-accent-muted);
border: 2px solid var(--border-accent);
}
.bus-card-row {
display: flex;
align-items: center;
gap: 10px;
}
.bus-badge {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--surface-2);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
}
.bus-badge--accent {
background: var(--fill-accent);
color: var(--on-accent);
}
.bus-card-info {
flex: 1;
min-width: 0;
}
.bus-card-dest {
display: flex;
align-items: center;
gap: 5px;
}
.bus-card-dest-name {
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bus-card-star {
font-size: 13px;
color: var(--text-accent);
flex-shrink: 0;
}
.bus-card-via {
font-size: 15px;
color: var(--text-secondary);
}
.bus-type-icon {
flex-shrink: 0;
}
.bus-card-times {
display: flex;
gap: 14px;
padding: 8px 0 2px 44px;
}
.bus-time {
display: flex;
align-items: baseline;
gap: 2px;
}
.bus-time-value {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
}
.bus-time-unit {
font-size: 11px;
color: var(--text-muted);
}
.bus-time--primary .bus-time-value {
font-size: 20px;
font-weight: 500;
color: var(--text-primary);
}
.bus-time--primary .bus-time-unit {
color: var(--text-secondary);
}
.bus-time--accent .bus-time-value,
.bus-time--accent.bus-time--primary .bus-time-value {
color: var(--text-accent);
}
/* ══════════════════════════════════════════════
* Search画面
* ══════════════════════════════════════════════ */
.search-header {
padding: 14px 14px 4px;
}
.search-header-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
padding-bottom: 10px;
}
.search-input {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: 10px;
padding: 9px 12px;
}
.search-input i {
font-size: 16px;
color: var(--text-muted);
}
.search-input-placeholder {
font-size: 13px;
color: var(--text-muted);
}
.search-input-field {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 13px;
font-family: inherit;
color: var(--text-primary);
padding: 0;
}
.search-input-field::placeholder {
color: var(--text-muted);
}
/* ネイティブの検索クリア(x)アイコンは各ブラウザの既定見た目のままでよいため
特別な装飾はしない。WebKit系のデフォルト装飾のみ軽くリセットする。 */
.search-input-field::-webkit-search-decoration,
.search-input-field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.search-history-item {
cursor: pointer;
}
.search-history-empty,
.search-history-message {
padding: 16px 4px;
font-size: 12px;
color: var(--text-muted);
text-align: center;
}
.search-section-label {
padding: 10px 14px 4px;
font-size: 11px;
color: var(--text-muted);
}
.search-history-list {
display: flex;
flex-direction: column;
padding: 0 14px 8px;
}
.search-history-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 4px;
border-bottom: 0.5px solid var(--border);
}
.search-history-item:last-child {
border-bottom: none;
}
.search-history-badge {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--surface-1);
border: 0.5px solid var(--border);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 500;
}
.search-history-info {
flex: 1;
min-width: 0;
}
.search-history-name {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.search-history-meta {
font-size: 11px;
color: var(--text-muted);
}
.search-history-item i {
font-size: 16px;
color: var(--text-muted);
}
/* ══════════════════════════════════════════════
* Saved画面（目的地登録）
* ══════════════════════════════════════════════ */
.saved-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 14px 10px;
}
.saved-header-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
}
.saved-add-btn {
display: flex;
align-items: center;
gap: 6px;
background: var(--fill-accent);
color: var(--on-accent);
border-radius: var(--radius-btn);
padding: 9px 14px;
font-size: 12px;
font-weight: 500;
transition: opacity 0.15s ease, transform 0.1s ease;
}
.saved-add-btn:active {
transform: scale(0.97);
}
.saved-add-btn i {
font-size: 15px;
color: var(--on-accent);
}
.destination-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 14px 14px;
}
.destination-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 48px 24px;
color: var(--text-muted);
text-align: center;
}
.destination-empty i {
font-size: 32px;
}
.destination-empty p {
font-size: 13px;
}
.destination-item {
display: flex;
align-items: center;
gap: 10px;
background: var(--surface-1);
border: 0.5px solid var(--border);
border-radius: 14px;
padding: 12px 14px;
}
.destination-item-info {
flex: 1;
min-width: 0;
}
.destination-item-name {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.destination-item-meta {
font-size: 11px;
color: var(--text-muted);
}
.destination-item-delete {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
}
.destination-item-delete i {
font-size: 17px;
color: var(--text-muted);
}
/* ══════════════════════════════════════════════
* 目的地登録: 地図モーダル
* ══════════════════════════════════════════════ */
.destination-map-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
align-items: center;
justify-content: center;
padding: 20px;
z-index: 100;
}
.destination-map-modal-overlay.visible {
display: flex;
}
.destination-map-modal {
position: relative;
background: var(--surface-2);
border-radius: 20px;
width: 100%;
max-width: 400px;
overflow: hidden;
border: 0.5px solid var(--border-strong);
box-shadow: var(--shadow-card);
}
.destination-map-modal-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 14px 10px;
}
.destination-map-modal-title {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.destination-map-modal-close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.destination-map-modal-close i {
font-size: 18px;
color: var(--text-muted);
}
.destination-map {
width: 100%;
height: 360px;
background: var(--surface-1);
}
/* タップ地点の確認ダイアログ。地図の下部に重ねて表示する。 */
.destination-confirm {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
background: var(--surface-1);
border: 0.5px solid var(--border-strong);
border-radius: 14px;
padding: 14px;
box-shadow: var(--shadow-card);
z-index: 10;
}
.destination-confirm[hidden] {
display: none;
}
.destination-confirm-text {
font-size: 13px;
color: var(--text-primary);
margin-bottom: 10px;
line-height: 1.5;
}
.destination-confirm-actions {
display: flex;
gap: 8px;
}
.destination-confirm-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-btn);
padding: 9px 10px;
font-size: 12px;
font-weight: 500;
transition: opacity 0.15s ease, transform 0.1s ease;
}
.destination-confirm-btn:active {
transform: scale(0.97);
}
.destination-confirm-btn--cancel {
background: var(--surface-2);
color: var(--text-secondary);
border: 0.5px solid var(--border);
}
.destination-confirm-btn--ok {
background: var(--fill-accent);
color: var(--on-accent);
}
/* ══════════════════════════════════════════════
* Saved / Settings プレースホルダー
* ══════════════════════════════════════════════ */
.placeholder-screen {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-muted);
}
.placeholder-screen i {
font-size: 32px;
}
.placeholder-screen p {
font-size: 13px;
}
/* ══════════════════════════════════════════════
* ボトムナビ
* ══════════════════════════════════════════════ */
.bottom-nav {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 0;
padding-bottom: max(10px, env(safe-area-inset-bottom));
background: var(--surface-2);
border-top: 1px solid var(--border);
box-shadow: 0 -2px 16px rgba(42, 37, 32, 0.06);
}
.bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.bottom-nav-item i {
font-size: 26px;
color: var(--text-muted);
display: inline-flex;
border-radius: 50px;
padding: 2px 14px;
}
.bottom-nav-item span {
font-size: 13px;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.bottom-nav-item.active i,
.bottom-nav-item.active span {
color: var(--text-accent);
}
.bottom-nav-item.active i {
background: var(--bg-accent-muted);
}
.bottom-nav-item.active span {
font-weight: 700;
}
/* ══════════════════════════════════════════════
* 経路モーダル
* ══════════════════════════════════════════════ */
.route-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
align-items: center;
justify-content: center;
padding: 20px;
z-index: 100;
}
.route-modal-overlay.visible {
display: flex;
}
.route-modal {
background: var(--surface-2);
border-radius: 20px;
width: 100%;
max-width: 320px;
overflow: hidden;
border: 0.5px solid var(--border-strong);
box-shadow: var(--shadow-card);
}
.route-modal-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 14px 10px;
}
.route-modal-title {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.route-modal-close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.route-modal-close i {
font-size: 18px;
color: var(--text-muted);
}
.route-modal-map {
margin: 0 14px 14px;
border-radius: 14px;
background: var(--surface-1);
overflow: hidden;
padding-bottom: 4px;
}
.route-modal-svg-container {
display: block;
width: 100%;
}
.route-modal-svg {
display: block;
width: 100%;
height: auto;
}
/* 経路モーダル内のローディング・エラーフォールバック表示
* （/api/bus-routes/summary 取得中・取得失敗時） */
.route-modal-status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 40px 16px;
color: var(--text-muted);
}
.route-modal-status i {
font-size: 26px;
}
.route-modal-status i.ti-loader-2 {
animation: route-modal-spin 1s linear infinite;
}
.route-modal-status p {
font-size: 12px;
text-align: center;
}
@keyframes route-modal-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}