/* --- 기본 변수 (라이트 모드) --- */
:root {
    --bg-color: #ffffff;
    --text-main: #111111;
    --text-time: #999999; /* 원본의 연한 회색 */
    --text-duration: #888888;
    
    --bg-ktx: linear-gradient(135deg, #F2F4F6 0%, #E6EEF9 100%); /* 그라데이션 미세 조정 */
    --bg-flight: linear-gradient(135deg, #FDFBFB 0%, #FAEEEE 100%);
    
    --title-gradient: linear-gradient(to right, #1A1A1A 0%, #2b6a9e 80%);
    
    /* [새 기능] 모달 백드롭 농도 (연하게) 및 그림자 */
    --backdrop-color: rgba(0, 0, 0, 0.25); /* 0.4 -> 0.25 (덜 어둡게) */
    --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* 흐린 그림자 */
    
    /* 타임라인 그래픽 색상 */
    --tl-gray-track: #EEEEEE;
    --tl-gray-dot: #CCCCCC;
    --tl-ktx-main: #2F64ED; /* KTX 파랑 */
    --tl-flight-main: #E83F28; /* 항공 빨강 */
}

/* --- 다크 모드 (시스템 설정 연동) --- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-main: #EEEEEE;
        --text-time: #AAAAAA;
        --text-duration: #999999;
        
        --bg-ktx: linear-gradient(135deg, #1C2024 0%, #222D42 100%);
        --bg-flight: linear-gradient(135deg, #1C2024 0%, #332323 100%);
        --title-gradient: linear-gradient(to right, #FFFFFF 0%, #7bb1e4 80%);
        
        --backdrop-color: rgba(0, 0, 0, 0.5); /* 다크모드는 조금 더 어둡게 */
        --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
        
        --tl-gray-track: #333333;
        --tl-gray-dot: #555555;
    }
}

/* --- 전역 스타일 --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-color); font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Pretendard, sans-serif; line-height: 1.5; color: var(--text-main); }
.app-container { max-width: 480px; margin: 0 auto; padding: 40px 24px; overflow-x: hidden; }

/* --- 상단 타이틀 --- */
.main-header { margin-bottom: 40px; }
.gradient-title { font-size: 28px; font-weight: 800; line-height: 1.35; background: var(--title-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }

/* --- 날짜 및 날씨 --- */
.day-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; margin-top: 32px; }
.day-header h2 { font-size: 18px; font-weight: 700; color: var(--text-main); }
.weather { display: flex; align-items: center; font-size: 16px; font-weight: 500; }
.weather .temp { margin-left: 10px; }

/* --- 메인 일정 리스트 (문제 해결 핵심) --- */
.schedule-list { display: flex; flex-direction: column; }
.schedule-row { display: flex; align-items: center; margin-bottom: 18px; }

/* 시간 컬럼 */
.time-col { width: 82px; flex-shrink: 0; font-size: 16px; font-weight: 500; color: var(--text-time); }
/* 오전/오후 텍스트 (위치 원래대로 - 중앙 쪽) */
.ampm { font-size: 11px; font-weight: 600; margin-right: 1px; display: inline-block; }

/* 내용 컬럼 */
.content-col { flex-grow: 1; font-size: 16px; font-weight: 600; color: var(--text-main); }

/* --- 교통수단 알약 카드 --- */
.transport-card { cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin: 0 -12px 22px -12px; padding: 14px 18px; border-radius: 50px; }
.transport-card.ktx { background: var(--bg-ktx); }
.transport-card.flight { background: var(--bg-flight); }
.t-left { display: flex; align-items: center; gap: 12px; }
.t-name { font-size: 16px; font-weight: 600; }
.t-duration { font-size: 14px; color: var(--text-duration); }

/* --- 이미지 일정 카드 --- */
.image-card { cursor: pointer; position: relative; border-radius: 20px; overflow: hidden; margin: 0 -12px 22px -12px; height: 180px; }
.image-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 12px 16px 12px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); }

/* [오류 해결] 이미지 오버레이 내부 텍스트 색상 강력 적용 */
.image-overlay .schedule-row { margin-bottom: 0; }
.image-overlay .time-col, 
.image-overlay .ampm, 
.image-overlay .content-col { color: #ffffff; } /* 모두 흰색 */
.image-overlay .time-col { color: rgba(255, 255, 255, 0.8); } /* 시간만 살짝 투명 */


/* =========================================
   [전면 재설계] 상세 모달창 (Floating Bottom Sheet) 
========================================= */

/* 1. 모달 백드롭 (농도 연하게, 하단 정렬 유지) */
.modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--backdrop-color); backdrop-filter: blur(4px);
    z-index: 1000; display: flex; justify-content: flex-end; align-items: flex-end; /* 하단 고정 구조 */
    opacity: 1; transition: opacity 0.3s ease;
}
.modal-backdrop.hidden { opacity: 0; pointer-events: none; }

/* 2. 플로팅 모달 컨텐츠 (하단에 붙어있지만 여백 확보) */
.modal-content {
    background-color: var(--bg-color); 
    width: calc(100% - 40px); /* 좌우 여백 확보 */
    max-width: 420px; /* PC용 최대 폭 */
    margin: 0 auto 20px auto; /* [새 기능] 하단에 여백을 두고 붙어있는 구조 */
    border-radius: 24px; /* 사면 모두 둥글게 */
    box-shadow: var(--modal-shadow); /* 흐린 그림자 */
    
    /* [구조 변경] 컨텐츠 자체가 스크롤 가능하도록 설정, 이미지 포함 */
    overflow-y: auto; 
    transform: translateY(0); transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.2, 1);
    max-height: 85vh; display: flex; flex-direction: column;
}
.modal-backdrop.hidden .modal-content { transform: translateY(100px); } /* 등장 애니메이션 */

/* 모달 헤더 이미지 (onerror 처리 SVG 보장, 스크롤 지원) */
.modal-header { position: relative; height: 200px; flex-shrink: 0; /* 스크롤 컨테이너 안에서 크기 고정 */ }
.modal-header img { width: 100%; height: 100%; object-fit: cover; }
.modal-gradient-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to top, var(--bg-color) 10%, transparent); }

/* 모달 내부 내용 영역 */
.modal-info { padding: 0 24px 30px 24px; position: relative; z-index: 2; margin-top: -30px; }
.modal-title { font-size: 26px; font-weight: 800; margin-bottom: 20px; }
.modal-desc { font-size: 15px; line-height: 1.6; color: var(--text-main); margin-bottom: 20px; }

/* AI 푸터 */
.ai-footer { display: flex; align-items: center; gap: 6px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #E0E0E0; font-size: 13px; color: #999; }
@media (prefers-color-scheme: dark) { .ai-footer { border-top: 1px solid #333; } }

/* 교통수단 상세 상단 */
.transport-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 25px; border-bottom: 1px solid #EEEEEE; padding-bottom: 15px; }
@media (prefers-color-scheme: dark) { .transport-header { border-bottom-color: #333; } }
.t-dir { font-size: 14px; color: var(--text-time); }
.t-remain { font-size: 14px; font-weight: 700; }
.theme-ktx .t-remain { color: var(--tl-ktx-main); }
.theme-flight .t-remain { color: var(--tl-flight-main); }


/* =========================================
   [전면 재설계 - 핵심] 수평 타임라인 그래픽 (v2) 
========================================= */

.timeline-v2 { position: relative; display: flex; gap: 0; margin-top: 10px; }

/* 1. 타임라인 그래픽 영역 (중앙 수직선) */
.tl-graphics-v2 { position: relative; width: 20px; flex-shrink: 0; display: flex; justify-content: center; }

/* 수직 배경 선 (연한 회색) */
.tl-track-v2 { position: absolute; top: 8px; bottom: 8px; left: calc(50% - 1.5px); width: 3px; background-color: var(--tl-gray-track); border-radius: 2px; z-index: 1; }

/* 실시간 진행 선 (위에서부터 자람, 그라데이션) */
.tl-progress-v2 { position: absolute; top: 8px; left: calc(50% - 1.5px); width: 3px; border-radius: 2px; z-index: 2; transition: height 0.5s ease; }
.theme-ktx .tl-progress-v2 { background: linear-gradient(to bottom, #99BBFF 0%, var(--tl-ktx-main) 100%); }
.theme-flight .tl-progress-v2 { background: linear-gradient(to bottom, #FFABAB 0%, var(--tl-flight-main) 100%); }


/* 2. 타임라인 콘텐츠 영역 */
.tl-content-v2 { flex-grow: 1; }

/* 각 정차역 아이템 (JS에서 height 동적 부여) */
.tl-stop-v2 { position: relative; display: grid; grid-template-columns: 75px 1fr; /* 시간 | 역명 */ gap: 20px; align-items: start; }

/* 수평 점 (Graphics 영역 위에 띄움) */
.tl-point-v2 { 
    position: absolute; left: -14px; top: 8px; /* Graphics 선 중앙에 위치 */
    width: 8px; height: 8px; border-radius: 50%;
    background-color: var(--tl-gray-dot); border: none;
    z-index: 3; transition: all 0.3s;
}

/* 타임라인 텍스트 스타일 */
.tl-time-v2 { grid-column: 1; font-size: 14px; color: var(--text-time); text-align: right; margin-top: 1px; }
.tl-station-v2 { grid-column: 2; font-size: 16px; font-weight: 500; color: var(--text-main); }


/* --- 상태별 스타일 (JS 연동) --- */

/* 1. 지나온 역 (과거) */
.tl-stop-v2.past .tl-point-v2 { background-color: var(--text-main); }
@media (prefers-color-scheme: dark) { .tl-stop-v2.past .tl-point-v2 { background-color: #AAAAAA; } }
.tl-stop-v2.past .tl-station-v2 { color: var(--text-time); font-weight: 400; }

/* 2. 현재 역 (진행 중, 맥박 그림자 효과) */
.tl-stop-v2.current .tl-point-v2 {
    width: 14px; height: 14px; left: -17px; top: 5px; /* 크기 키우고 위치 조정 */
    border: none;
}
.theme-ktx .tl-stop-v2.current .tl-point-v2 { background-color: var(--tl-ktx-main); box-shadow: 0 0 0 6px rgba(47, 100, 237, 0.2); }
.theme-flight .tl-stop-v2.current .tl-point-v2 { background-color: var(--tl-flight-main); box-shadow: 0 0 0 6px rgba(232, 63, 40, 0.2); }


/* --- 임시 플레이스홀더 --- */
.icon-placeholder { background-color: #E0E0E0; border-radius: 50%; }
@media (prefers-color-scheme: dark) { .icon-placeholder { background-color: #333; } }
.weather-icon { width: 22px; height: 22px; }
.transport-icon { width: 20px; height: 20px; }
.img-placeholder { width: 100%; height: 100%; background-color: #4aa8d8; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; }