/* 1. 全体のリセットと基本設定 */
body {
    font-family: "Hiragino Sans", "Meiryo", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* 2. ヘッダーとフォーム */
header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    text-align: center;
}

main {
    padding: 0 10px;
}

@media (min-width: 768px) {
    main {
        max-width: 800px;
        margin: 20px auto;
    }
}

#search-form {
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

select, input[type="text"], input[type="date"], input[type="time"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
}

#search-button {
    width: 100%;
    padding: 15px;
    background-color: #28a745;
    color: white;
    border: none;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

#search-button:hover {
    background-color: #218838;
}

/* 3. ルート結果の表示エリア */
#route-results {
    padding: 20px 0;
}

.route-summary {
    background: white;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 5px;
}

/* 4. タイムライン（駅と線の表示） */
.route-timeline {
    margin-top: 20px;
}

/* --- A. 地点 (Point: 駅・バス停) --- */
.timeline-point {
    display: grid;
    /* [左:マーカー列 30px] [右:コンテンツ列 自動] */
    grid-template-columns: 30px 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "uline arr"  /* 上の線 | 着時刻 */
        "dot   name" /* 丸     | 駅名   */
        "lline dep"; /* 下の線 | 発時刻 */
    margin: 0;
}

/* エリア定義 */
.tp-uline { grid-area: uline; }
.tp-lline { grid-area: lline; }
.tp-dot   { grid-area: dot; }
.tp-arr   { grid-area: arr; align-self: end; }  /* 着時刻は下寄せ */
.tp-name  { grid-area: name; align-self: center; }
.tp-dep   { grid-area: dep; align-self: start; } /* 発時刻は上寄せ */

/* 1. マーカー（丸） */
.station-dot {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid #007bff;
    border-radius: 50%;
    justify-self: center;
    align-self: center;
    z-index: 2; /* 線の上に重ねる */
}

/* 始点・終点の色変更 */
.timeline-point.start .station-dot { border-color: #28a745; }
.timeline-point.goal .station-dot  { border-color: #dc3545; background: #dc3545; }

/* 2. 接続線（丸の上下） */
.line-connector {
    width: 4px;
    background: #007bff;
    justify-self: center;
    height: 100%;
    min-height: 10px; /* 最低限の高さを確保 */
}

/* 3. テキスト情報 */
.location-name {
    font-weight: bold;
    font-size: 1.1em;
    padding: 8px 0;
    padding-left: 10px;
}

.time-row {
    font-family: monospace;
    font-size: 0.95em;
    color: #333;
    padding-left: 10px;
    line-height: 1.5;
}

.time-lbl {
    font-size: 0.8em;
    color: #888;
    margin-left: 4px;
}

/* --- B. 移動パス (Path: 電車・バス・徒歩の区間) --- */
/* ★ここが線をつなぐために重要な追加部分です */
.timeline-path {
    display: flex;
    min-height: 40px; /* 駅間の最低距離 */
}

/* 左側：線を描画する列 */
.marker-col {
    width: 30px; /* Pointの左列と同じ幅 */
    flex-shrink: 0;
    display: flex;
    justify-content: center; /* 線を中央に */
}

/* 実際の線 */
.line-bar {
    width: 4px;
    background-color: #007bff;
    height: 100%; /* 親要素の高さいっぱいに伸ばす */
}

/* 右側：内容（乗り物情報） */
.content-col {
    flex-grow: 1;
    padding-left: 10px;
    padding-bottom: 15px; /* 次の駅との余白 */
    padding-top: 5px;
}

.transport-info {
    background-color: #f9f9f9;
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #ccc;
    display: flex;
    align-items: center;
}

.icon {
    font-size: 1.4em;
    margin-right: 10px;
}

.main-text {
    font-weight: bold;
    font-size: 0.95em;
}

.sub-text, .status-text {
    font-size: 0.85em;
    color: #666;
}

.delay-info {
    color: #d9534f;
    font-weight: bold;
    margin-left: 10px;
    font-size: 0.9em;
}

/* --- C. 徒歩の場合のスタイル上書き --- */
.line-connector.walk,
.line-bar.walk {
    background: repeating-linear-gradient(to bottom, #ccc, #ccc 6px, #fff 6px, #fff 12px);
    width: 4px;
}

/* エラー表示 */
.error-alert {
    background: #ffebee;
    color: #c62828;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ef9a9a;
}
.error-alert ul {
    margin: 0;
    padding-left: 20px;
}