/* 기본 스타일 및 리셋 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 헤더 및 로고 */
header {
    border-bottom: 1px solid #eaeaea;
    padding: 20px 0;
    background-color: #ffffff;
}

.site-logo {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 24px;
    font-weight: 700;
    color: #1a73e8;
}

/* 메인 컨테이너 */
.container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* 히어로 & 검색 섹션 */
.search-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 40px;
}

.search-section h1 {
    font-size: 28px;
    margin-bottom: 12px;
    color: #111;
}

.search-section p {
    color: #666;
    margin-bottom: 24px;
}

.search-box {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.search-box input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

.search-box input:focus {
    border-color: #1a73e8;
}

.search-box button {
    padding: 12px 24px;
    background-color: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.search-box button:hover {
    background-color: #1557b0;
}

/* 지역 선택 뱃지/버튼 그룹 */
.region-nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.region-btn {
    padding: 8px 16px;
    background-color: #f1f3f4;
    border-radius: 20px;
    font-size: 14px;
    color: #444;
    font-weight: 500;
}

.region-btn.active, .region-btn:hover {
    background-color: #1a73e8;
    color: #fff;
}

/* 데이터 테이블 UI */
.data-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.data-card h2 {
    font-size: 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-express {
    background-color: #e6f4ea;
    color: #137333;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.timetable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.timetable th, .timetable td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.timetable th {
    background-color: #fafafa;
    color: #666;
    font-weight: 600;
}

.timetable tr:hover {
    background-color: #f8f9fa;
}

/* 푸터 */
footer {
    padding: 30px 20px;
    color: #777;
    font-size: 13px;
    line-height: 1.8;
}

/* 역 선택 섹션 */
.station-select-section {
    text-align: center;
    padding: 30px 20px;
    background-color: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 30px;
}

.station-select-section h1 {
    font-size: 24px;
    color: #111;
    margin-bottom: 8px;
}

.station-select-section p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

/* 드롭다운 셀렉트 박스 */
.select-box-wrapper {
    max-width: 320px;
    margin: 0 auto 20px auto;
}

.select-box-wrapper select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    outline: none;
    cursor: pointer;
}

.select-box-wrapper select:focus {
    border-color: #1a73e8;
}

/* 빠른 선택 칩 목록 */
.station-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    border-top: 1px solid #eaeaea;
}

.chip {
    display: inline-block;
    padding: 6px 14px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 13px;
    color: #555;
    transition: all 0.2s ease;
}

.chip:hover {
    border-color: #1a73e8;
    color: #1a73e8;
}

.chip.active {
    background-color: #1a73e8;
    border-color: #1a73e8;
    color: #ffffff;
    font-weight: 600;
}

/* 기타 안내 메시지 */
.no-data {
    text-align: center;
    color: #888;
    padding: 40px 0;
}

/* 역 선택 및 셀렉트 박스 */
.station-select-section {
    text-align: center;
    padding: 30px 20px 20px;
    background-color: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 20px;
}

.select-box-wrapper {
    max-width: 360px;
    margin: 15px auto 0 auto;
}

.select-box-wrapper select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #1a73e8;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    outline: none;
    cursor: pointer;
}

/* 필터 탭 UI */
.filter-tabs-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.tab-group {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.tab-btn {
    padding: 8px 18px;
    background-color: #f1f3f4;
    border-radius: 20px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
    text-decoration: none;
}

.tab-btn.active {
    background-color: #1a73e8;
    color: #fff;
    font-weight: 600;
}

.dir-btn.active {
    background-color: #34a853; /* 상/하행 구분용 칼라 */
    color: #fff;
}

/* 첫차/막차 요약 카드 */
.summary-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.summary-card .badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 12px;
    color: #fff;
    margin-bottom: 8px;
}

.first-train .badge { background-color: #0b8043; }
.last-train .badge { background-color: #d93025; }

.summary-card .time {
    font-size: 28px;
    font-weight: 800;
    color: #202124;
    line-height: 1.2;
}

.summary-card .destination {
    margin-top: 6px;
    font-size: 13px;
    color: #666;
}

/* 데이터 테이블 */
.timetable td strong {
    color: #1a73e8;
    font-size: 15px;
}

@media (max-width: 600px) {
    .summary-cards {
        grid-template-columns: 1fr;
    }
}

/* 첫 화면 안내 섹션 */
.welcome-guide {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.guide-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.guide-card h2 {
    font-size: 18px;
    color: #202124;
    margin-bottom: 16px;
    border-bottom: 2px solid #f1f3f4;
    padding-bottom: 10px;
}

.guide-list {
    list-style: none;
    padding-left: 0;
}

.guide-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

.guide-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #1a73e8;
    font-weight: bold;
    font-size: 18px;
    top: -2px;
}

.guide-list code {
    background-color: #f1f3f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #1a73e8;
}

/* 공공데이터 안내 카드 */
.notice-card {
    background-color: #f8f9fa;
    border-color: #e8eaed;
}

.notice-content p {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}

.notice-content ul {
    padding-left: 20px;
    font-size: 13px;
    color: #666;
    line-height: 1.7;
}

.notice-content li {
    margin-bottom: 6px;
}

/* 비활성화된 요일 탭 버튼 */
.tab-btn.disabled {
    background-color: #f5f5f5;
    color: #bbb;
    border: 1px solid #eee;
    cursor: not-allowed;
    text-decoration: none;
}

/* 데이터 없음 전용 안내 카드 (HTML 테이블 대체) */
.empty-notice-card {
    background: #ffffff;
    border: 1px dashed #d0d7de;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    margin-top: 10px;
}

.empty-notice-card .notice-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.empty-notice-card h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
}

.empty-notice-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.empty-notice-card code {
    background-color: #f1f3f4;
    padding: 2px 6px;
    border-radius: 4px;
    color: #d93025;
}

/* 다단계 선택 폼 레이아웃 */
.cascade-select-form .select-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 600px;
    margin: 15px auto 0 auto;
}

.cascade-select-form select {
    flex: 1;
    min-width: 140px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid #1a73e8;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    outline: none;
    cursor: pointer;
}

.cascade-select-form select:disabled {
    background-color: #f1f3f4;
    border-color: #dadce0;
    color: #9aa0a6;
    cursor: not-allowed;
}

/* 일반 / 급행 구분 탭 스타일 */
.exp-btn.active {
    background-color: #e37400; /* 급행 구분을 위한 주황색 강조 */
    color: #ffffff;
}

/* ==================================================
   모바일 UI 최적화 스타일 (Mobile Responsive CSS)
   ================================================== */

/* 1. 셀렉트 박스 영역 (지역 / 호선 / 역 선택) */
.cascade-select-form .select-group {
    display: flex;
    flex-direction: column; /* 모바일에서는 세로 1줄 배치 */
    gap: 10px;
    width: 100%;
}

.cascade-select-form select {
    width: 100%;
    height: 48px; /* 터치하기 적합한 높이 */
    font-size: 15px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
    /* 긴 텍스트 자름 처리 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 2. 필터 탭 영역 (요일 / 방향 / 급행 탭) */
.filter-tabs-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-group {
    display: flex;
    width: 100%;
    gap: 6px;
}

/* 탭 버튼이 모바일 너비에 맞춰 균등 배분 */
.tab-btn {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    font-size: 13px;
    white-space: nowrap; /* 줄바꿈 방지 */
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 6px;
    box-sizing: border-box;
}

/* 비활성화된 회색 탭 스타일 */
.tab-btn.disabled {
    background-color: #f1f3f5;
    color: #adb5bd;
    border: 1px solid #dee2e6;
    cursor: not-allowed;
}

/* 3. 첫차 / 막차 요약 카드 */
.summary-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.summary-card {
    flex: 1;
    padding: 12px;
    text-align: center;
    box-sizing: border-box;
}

/* 4. 시간표 테이블 (가로 스크롤 및 모바일 정렬) */
.data-card {
    width: 100%;
    overflow-x: auto; /* 화면을 넘어갈 경우 깔끔한 가로 스크롤 생성 */
    -webkit-overflow-scrolling: touch;
}

.timetable {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap; /* 모바일에서 표 내용이 억지로 찌그러지지 않게 방지 */
    font-size: 14px;
}

.timetable th, 
.timetable td {
    padding: 10px 8px;
    text-align: center;
}

/* PC/태블릿 세로 화면 이상 반응형 (768px 이상) */
@media (min-width: 768px) {
    .cascade-select-form .select-group {
        flex-direction: row; /* PC에서는 가로 1줄 배치 */
    }
}

/* 비활성화(회색) 탭 버튼 스타일 */
.tab-btn.disabled {
    background-color: #e9ecef !important;
    color: #adb5bd !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.7;
}