@charset "utf-8";

/* 1. 변수 및 초기화 */
:root {
    --primary-color: #0052A4; /* 코레일 블루 */
    --accent-color: #E21836;
    --text-dark: #1a1a1a;
    --text-gray: #666;
    --bg-light: #f8f9fa;
    --max-width: 1300px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; color: var(--text-dark); line-height: 1.6; word-break: keep-all; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* 2. 상단 공지바 (Top Notification) */
#top_notification { 
    background: var(--primary-color); 
    color: #fff; 
    font-size: 14px; 
    position: relative; 
    z-index: 1100; 
}
#top_notification .container {
    height: 40px;
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center;
    gap: 15px;
}
#top_notification a { 
    background: rgba(0,0,0,0.2); 
    padding: 2px 10px; 
    border-radius: 20px; 
    font-size: 12px;
    color: #fff;
}

/* 3. 헤더 & 로고 */
#header { width: 100%; background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 1000; }
.header_inner { max-width: var(--max-width); margin: 0 auto; height: 80px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }

/* 로고 사이즈 고정 */
#logo a img { height: 35px; width: auto; display: block; }

/* --- GNB 메뉴 (DB 연동 및 2단 드롭다운) --- */
#gnb { height: 100%; }
#gnb .gnb_1d { display: flex; gap: 45px; height: 100%; align-items: center;}
#gnb .gnb_1dli { position: relative; height: 30px; display: flex; align-items: flex-start; }
#gnb .gnb_1dli > a { font-size: 18px; font-weight: 700; color: #333; display: block; }
#gnb .gnb_1dli:hover > a { color: var(--primary-color); }

/* 2단계 서브메뉴 스타일 */
#gnb .gnb_2d { 
    position: absolute; 
    top: 54px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 180px; 
    background: #fff; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    padding: 15px 0; 
    border-radius: 0 0 10px 10px;
    border: 1px solid #eee;
    border-top: 2px solid var(--primary-color);
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease;
    z-index: 999;
}
#gnb .gnb_1dli:hover .gnb_2d { opacity: 1; visibility: visible; }
#gnb .gnb_2d li a { 
    display: block; 
    padding: 10px 20px; 
    font-size: 15px; 
    color: #666; 
    text-align: center;
    transition: 0.2s; 
}
#gnb .gnb_2d li a:hover { color: var(--primary-color); background: #f8f9fa; font-weight: 600; }

#gnb .gnb_1dli.active > a {
    color: var(--primary-color); /* 강조색 */
    border-bottom: 3px solid var(--primary-color); /* 예: 하단 바 */
}

.hd_right { display: flex; align-items: center; gap: 20px; }
.lang_select a { font-size: 13px; font-weight: 600; color: #999; }
.lang_select a:hover { color: var(--primary-color); }
.btn_menu_open { display: none; background: none; border: none; font-size: 24px; cursor: pointer; }

/* 4. 메인 비주얼 (Hero Section) */
#main_visual { width: 100%; height: 600px; position: relative; overflow: hidden; background: #000; }
#main_visual .visual_text { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); color: #fff; z-index: 5; }
#main_visual h2 { font-size: 56px; font-weight: 800; margin-bottom: 20px; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
#main_visual p { font-size: 22px; opacity: 0.9; }
#main_visual::after { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.2); }

/* 5. 메인 그리드 레이아웃 (국중박 스타일) */
.main-grid-container { padding-bottom: 80px; }
.main-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
    margin: -60px auto 0; 
    max-width: var(--max-width);
    padding: 0 20px;
    position: relative; 
    z-index: 10; 
}

/* 개별 카드 스타일 */
.grid-card { 
    background: #fff; border-radius: 20px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    overflow: hidden; height: 100%; display: flex; flex-direction: column; 
    transition: 0.4s;
}
.grid-card:hover { transform: translateY(-10px); }
.card-inner { padding: 30px; height: 100%; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.card-head h3 { font-size: 20px; font-weight: 800; color: var(--primary-color); }
.more-plus { color: #999; font-size: 20px; }

/* 공지사항 리스트 스타일 */
.main-notice-list { display: flex; flex-direction: column; gap: 15px; }
.main-notice-list li { border-bottom: 1px solid #f2f2f2; padding-bottom: 12px; }
.main-notice-list li:last-child { border: none; }
.main-notice-list li a { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.main-notice-list li .subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #444; flex: 1; padding-right: 15px; }
.main-notice-list li .date { font-size: 13px; color: #aaa; white-space: nowrap; }

/* 이미지 카드 스타일 (교육, 온라인전시 등) */
.image-card .img-box { 
    height: 180px; 
    background-size: cover; 
    background-position: center; 
    transition: 0.5s; 
}
.image-card:hover .img-box { transform: scale(1.05); }
.image-card .txt-box { padding: 25px; }
.image-card h4 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.image-card p { font-size: 15px; color: var(--text-gray); }

/* 6. 푸터 */
#footer { background: #1a1a1a; color: #999; padding: 0; }
.footer_top { border-bottom: 1px solid #2a2a2a; padding: 15px 0; }
.footer_top .container { display: flex; justify-content: space-between; align-items: center; }
.f_link { display: flex; gap: 20px; font-size: 14px; }
.f_link b { color: #fff; }
.f_site select { background: #333; color: #ccc; border: 1px solid #444; padding: 5px 10px; border-radius: 4px; font-size: 13px; outline: none; }
.footer_main { padding: 60px 20px; display: flex; gap: 50px; align-items: flex-start; max-width: var(--max-width); margin: 0 auto; }
.f_logo { filter: brightness(0) invert(1); opacity: 0.6; width: 140px; }
address { font-style: normal; font-size: 14px; line-height: 2; }

/* 7. 반응형 디자인 */
@media (max-width: 1200px) {
    .main-grid { grid-template-columns: repeat(2, 1fr); margin-top: 30px; }
    #gnb .gnb_1d { gap: 20px; }
}

@media (max-width: 768px) {
    .header_inner { height: 70px; }
    #gnb { display: none; }
    .btn_menu_open { display: block; }
    #main_visual { height: 450px; }
    #main_visual h2 { font-size: 30px; }
    .main-grid { grid-template-columns: 1fr; }
    .footer_main { flex-direction: column; gap: 30px; }
}

/* 서브페이지 공통 스타일 */
.sub_content { padding: 60px 0 100px; max-width: 1200px; margin: 0 auto; }
.sub_title { font-size: 32px; font-weight: 800; margin-bottom: 40px; color: #111; border-bottom: 2px solid #333; padding-bottom: 15px; }

/* 섹션 타이틀 */
.section_h3 { font-size: 22px; font-weight: 700; margin: 50px 0 20px; color: var(--primary-color); display: flex; align-items: center; gap: 10px; }
.section_h3::before { content: ''; display: inline-block; width: 4px; height: 18px; background: var(--primary-color); border-radius: 2px; }

/* 상단 핵심정보 카드 (시간 안내 등) */
.info_card_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; }
.info_card { background: #f8f9fa; padding: 30px; border-radius: 15px; border: 1px solid #eee; }
.info_card dt { font-weight: 800; font-size: 18px; margin-bottom: 10px; color: #333; }
.info_card dd { color: #666; font-size: 16px; margin: 0; line-height: 1.6; }

/* 현대적인 테이블 스타일 */
.modern_table { width: 100%; border-top: 2px solid #333; border-collapse: collapse; margin-bottom: 20px; }
.modern_table th { background: #fdfdfd; padding: 15px; border-bottom: 1px solid #eee; font-weight: 700; color: #333; text-align: center; font-size: 15px; }
.modern_table td { padding: 15px; border-bottom: 1px solid #eee; text-align: center; color: #555; font-size: 15px; }
.td_left { text-align: left !important; }

plain_notice_list.plain_notice_list { 
    margin: 20px 0; 
    padding: 0; 
    list-style: none; 
}
.plain_notice_list li { 
    font-size: 17px; /* 글씨 크기 확대 */
    color: #444; 
    line-height: 1.8; 
    padding-left: 20px; 
    position: relative; 
    margin-bottom: 10px;
}
.plain_notice_list li::before { 
    content: '•'; 
    position: absolute; 
    left: 0; 
    color: var(--primary-color); 
    font-weight: bold; 
}

/* 유의사항 리스트 */
.modern_notice { background: #fdf2f4; padding: 25px; border-radius: 12px; margin-top: 15px; }
.modern_notice li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 14px; color: #666; list-style: none; }
.modern_notice li::before { content: '•'; position: absolute; left: 0; color: var(--accent-color); font-weight: bold; }

@media (max-width: 768px) {
    .info_card_grid { grid-template-columns: 1fr; }
}

/* --- 서브 네비게이터 바 --- */
#sub_nav_bar { border-bottom: 1px solid #eee; padding: 12px 0; background: #fff; }
#sub_nav_bar .container { display: flex; justify-content: space-between; align-items: center; }
.breadcrumb { font-size: 14px; color: #888; display: flex; align-items: center; gap: 10px; }
.breadcrumb i { font-size: 12px; color: #ccc; }
.breadcrumb a { color: #888; }
.breadcrumb .curr { color: #333; font-weight: 600; }

.sub_tools { display: flex; gap: 15px; }
.sub_tools button { background: none; border: 1px solid #ddd; width: 32px; height: 32px; border-radius: 50%; color: #666; cursor: pointer; transition: 0.2s; }
.sub_tools button:hover { background: #f5f5f5; color: var(--primary-color); border-color: var(--primary-color); }

/* --- 서브 타이틀 및 탭 메뉴 --- */
#sub_title_area { padding-top: 60px; background: #fff; text-align: center; border-bottom: 1px solid #eee; }
.page_title { font-size: 42px; font-weight: 800; color: #111; margin-bottom: 50px; letter-spacing: -1px; }

.sub_tab_nav { display: inline-block; width: 100%; }
.sub_tab_nav ul { display: flex; justify-content: center; border-bottom: 1px solid #eee; margin-bottom: -1px; }
.sub_tab_nav li { position: relative; }
.sub_tab_nav li a { 
    display: block; 
    padding: 15px 40px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #777; 
    transition: 0.3s; 
}
.sub_tab_nav li:hover a { color: var(--primary-color); }

/* 활성화 상태 (레드/블루 언더라인 포인트) */
.sub_tab_nav li.active a { color: var(--primary-color); }
.sub_tab_nav li.active::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 3px; 
    background: var(--primary-color); /* 코레일 블루 혹은 강조색 */
}

@media (max-width: 768px) {
    .page_title { font-size: 30px; margin-bottom: 30px; }
    .sub_tab_nav li a { padding: 12px 20px; font-size: 14px; }
}