/* 레일인포 열차시간표 - 정보 중심 스타일시트
   페이지 종류:
     - 상세 페이지: body.page-detail .container (max-width 480px, 모바일 우선, 역 전광판 톤)
     - 허브 페이지: .hub-container             (max-width 720px)
     - 인덱스 페이지: .index-container          (max-width 720px)
   상세 페이지 디자인은 모두 .page-detail 하위로 격리되어 있어 허브/인덱스에 영향이 없다. */

:root {
    --primary: #0066cc;
    --primary-dark: #0056b3;
    --text: #333;
    --text-strong: #1f2937;
    --gray: #666;
    --gray-200: #e5e7eb;
    --gray-600: #4b5563;
    --light-gray: #f5f5f5;
    --bg: #f8f9fa;
    --border: #ddd;
    --white: #fff;

    /* 상세 페이지 전용 — 역 전광판 톤. 허브/인덱스는 사용하지 않는다. */
    --rail-bg: #eef1f5;
    --rail-board: #0e2a47;
    --rail-board-text: #f8fafc;
    --rail-board-mute: rgba(248, 250, 252, 0.65);
    --rail-accent: #38bdf8;
    --rail-text: #1f2937;
    --rail-text-muted: #6b7280;
    --rail-card-border: #e1e6eb;
    --rail-divider: #eef0f3;
    --rail-chip-bg: #f3f5f8;
    --rail-primary: #1d4ed8;
    --rail-primary-fg: #ffffff;
    --rail-ghost-fg: #334155;
    --rail-ghost-border: #cbd5e1;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 20px;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

body.page-detail {
    background: var(--rail-bg);
    color: var(--rail-text);
}

a {
    color: var(--primary);
}

/* ============================================================
   상세 페이지 (출발역→도착역) — '역 전광판' 톤
   모든 selector는 .page-detail 하위로 격리되어 허브/인덱스에 영향 없음.
   ============================================================ */

.page-detail .container {
    max-width: 480px;
    margin: 0 auto;
    background: var(--white);
    padding: 22px 20px;
    border-radius: 12px;
    border: 1px solid var(--rail-card-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* 헤더 — 딥 네이비 보드 느낌 */
.page-detail header {
    max-width: 480px;
    margin: 0 auto 16px auto;
    padding: 22px 20px 20px;
    background: var(--rail-board);
    color: var(--rail-board-text);
    border-radius: 12px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.page-detail header::before {
    /* 보드 상단의 얇은 액센트 라인 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rail-accent), transparent 60%);
}

.page-detail #main-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.35;
    color: var(--rail-board-text);
}

.page-detail .article-meta {
    font-size: 12.5px;
    color: var(--rail-board-mute);
    line-height: 1.6;
}

.page-detail .article-meta time {
    color: var(--rail-board-mute);
}

.page-detail .meta-separator {
    margin: 0 8px;
    opacity: 0.5;
}

.page-detail .update-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--rail-board);
    background: var(--rail-accent);
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.page-detail .date-info {
    display: none;
}

/* 상세 페이지 h2/h3 — 색상 톤 다운, 글자 우선 */
.page-detail .container h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--rail-text);
    margin: 28px 0 14px 0;
    padding: 0;
    border-bottom: none;
    letter-spacing: -0.01em;
}

.page-detail .container h2:first-child {
    margin-top: 0;
}

.page-detail .container h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--rail-text-muted);
    margin: 22px 0 12px 0;
    padding: 0;
    background: transparent;
    border: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* 운행 정보(intro) — 부드러운 안내 카드 */
.page-detail .intro {
    background: #f5f8fb;
    padding: 16px 18px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--rail-card-border);
    border-left: 3px solid var(--rail-accent);
}

.page-detail .intro h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--rail-text);
    margin: 0 0 8px 0;
    text-transform: none;
    letter-spacing: 0;
}

.page-detail .intro p {
    font-size: 15px;
    color: var(--rail-text);
    margin: 0;
    line-height: 1.7;
}

.page-detail .intro p:has(strong:first-child) {
    display: none;
}

/* 시간표 섹션 — 열차 종류별 카드 */
.page-detail .train-section {
    margin-bottom: 24px;
}

.page-detail .train-card {
    background: var(--white);
    border: 1px solid var(--rail-card-border);
    border-radius: 10px;
    padding: 16px 16px 14px;
    margin-bottom: 10px;
}

.page-detail .train-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.page-detail .train-type {
    font-size: 13px;
    font-weight: 700;
    color: var(--rail-board);
    letter-spacing: 0.02em;
}

.page-detail .train-number {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rail-text-muted);
    background: var(--rail-chip-bg);
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

/* 출발/도착 시각 — 보드 디지털 표시처럼 크고 정렬된 숫자 */
.page-detail .train-times {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px 8px;
    margin-bottom: 10px;
    background: var(--rail-board);
    color: var(--rail-board-text);
    border-radius: 8px;
}

.page-detail .train-times .time {
    text-align: center;
}

.page-detail .train-times .time-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--rail-board-mute);
    margin-bottom: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-detail .train-times .time-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--rail-board-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0.02em;
}

.page-detail .train-times .arrow {
    font-size: 18px;
    color: var(--rail-accent);
}

.page-detail .train-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 12px;
}

.page-detail .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--rail-chip-bg);
    border-radius: 6px;
}

.page-detail .detail-label {
    color: var(--rail-text-muted);
    font-size: 12px;
}

.page-detail .detail-value {
    font-weight: 700;
    color: var(--rail-text);
    font-variant-numeric: tabular-nums;
}

/* 버튼 — 1 primary + 3 ghost 톤 정리 */
.page-detail .button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--rail-divider);
}

.page-detail .btn {
    display: block;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 7px;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.page-detail .btn-primary {
    background: var(--rail-primary);
    color: var(--rail-primary-fg);
    border: 1px solid var(--rail-primary);
}

.page-detail .btn-primary:hover {
    background: var(--primary-dark);
}

.page-detail .btn-ghost {
    background: var(--white);
    color: var(--rail-ghost-fg);
    border: 1px solid var(--rail-ghost-border);
}

.page-detail .btn-ghost:hover {
    background: var(--rail-chip-bg);
    border-color: var(--rail-text-muted);
}

/* 관련 링크 */
.page-detail .related-links {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--rail-divider);
}

.page-detail .related-links h2 {
    font-size: 15px;
    margin: 0 0 12px 0;
}

/* 풋터 */
.page-detail footer {
    max-width: 480px;
    margin: 16px auto 0 auto;
    padding: 14px 4px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--rail-text-muted);
}

.page-detail footer p {
    margin: 0;
    line-height: 1.6;
}

.page-detail .no-trains {
    text-align: center;
    padding: 40px 20px;
    color: var(--rail-text-muted);
}

/* 접근성: 시각적으로 숨기되 스크린리더는 읽도록 */
.page-detail .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* FAQ — 새 디자인과 어울리는 조용한 카드 */
.page-detail .faq-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.page-detail .faq-item {
    background: var(--white);
    border: 1px solid var(--rail-card-border);
    border-radius: 10px;
    padding: 14px 16px;
}

.page-detail .faq-item h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--rail-text);
    margin: 0 0 6px 0;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
    border: none;
    padding: 0;
}

.page-detail .faq-item p {
    font-size: 14px;
    color: var(--rail-text);
    margin: 0;
    line-height: 1.7;
}

/* ============================================================
   허브 페이지 (출발역 → 도착역 목록)
   ============================================================ */

.hub-container {
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.hub-header {
    background: var(--primary);
    color: var(--white);
    padding: 28px 20px;
    text-align: center;
}

.hub-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.hub-subtitle {
    font-size: 14px;
    opacity: 0.92;
    font-weight: 400;
}

.hub-body {
    padding: 24px 20px;
}

.breadcrumb {
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--gray);
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.summary-box {
    background: #eef5fc;
    padding: 16px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    border-left: 4px solid var(--primary);
    font-size: 15px;
    line-height: 1.7;
}

.summary-box strong {
    color: var(--text-strong);
}

.route-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.route-item {
    margin: 0;
}

.route-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: var(--white);
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-weight: 500;
    font-size: 15px;
}

.route-link:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}

.route-icon {
    margin-right: 10px;
    color: var(--primary);
}

.route-arrow {
    color: var(--gray);
    font-size: 16px;
}

.no-routes {
    text-align: center;
    padding: 32px 16px;
    color: var(--gray);
    font-size: 14px;
}

.hub-footer {
    background: var(--bg);
    padding: 16px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-200);
}

.hub-footer p {
    margin: 4px 0;
}

/* ============================================================
   인덱스 페이지 (전국 역 리스트)
   ============================================================ */

.index-container {
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 28px 20px;
}

.index-container h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 16px 0;
    text-align: center;
}

.index-intro {
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0 0 24px 0;
}

.station-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.station-list li {
    margin: 0;
}

.station-list a {
    display: block;
    text-decoration: none;
    background: var(--white);
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-weight: 500;
    font-size: 15px;
}

.station-list a:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}

/* ============================================================
   모바일 반응형
   ============================================================ */

@media (max-width: 768px) {
    body {
        padding: 12px;
    }

    .hub-container,
    .index-container {
        border-radius: 6px;
    }

    .hub-header {
        padding: 22px 16px;
    }

    .hub-header h1 {
        font-size: 20px;
    }

    .hub-body,
    .index-container {
        padding: 20px 16px;
    }

    .index-container h1 {
        font-size: 20px;
    }

    .route-link,
    .station-list a {
        font-size: 14px;
        padding: 12px 14px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    .page-detail .container {
        padding: 18px 16px;
        border-radius: 10px;
    }

    .page-detail header {
        padding: 18px 16px 16px;
        border-radius: 10px;
    }

    .page-detail #main-title {
        font-size: 20px;
    }

    .page-detail .train-times .time-value {
        font-size: 22px;
    }

    .page-detail .button-group {
        grid-template-columns: 1fr;
    }

    .page-detail .container h2 {
        font-size: 16px;
    }
}