/* common */
.alertMessage { color: #999; font-size: 1.8rem; font-weight: 300; margin-top: 8rem; text-align: center;}
.btn-p1 { background-color: var(--brand-color); color: #fff; text-align: center; border-radius: 0.5rem; display: block; padding: 1.2rem 0; width: 100%; font-size: 1.6rem; flex: 1; min-width: 0;} 


/* home.php */
section + section { margin-top: 4rem;}
section .sc-title { margin-bottom:  1rem; display: flex; align-items: center; justify-content: space-between;}
section .sc-title .mainTitle { font-size: 2.2rem; font-weight: 700; line-height: 1.4; }
section .sc-title .titleBtn { background-color: var(--brand-color); color: #fff; font-size: 1.5rem; border-radius: 100px; padding: 0.4rem 1rem; font-weight: 200;}

.sc-busfetch{ border-radius: 0.8rem;}
.sc-busfetch .busflow_wrap { display: flex; align-items: center; margin-bottom: 1.6rem; gap: 0.8rem;}
.sc-busfetch .busflow_wrap .busflow_btn { position: relative; font-size: 1.6rem; color: #999; background-color: #efefef; border-radius: 100px; padding: 0.8rem 1.5rem;}
.sc-busfetch .busflow_wrap .busflow_btn.active { background-color: var(--brand-color); color: #fff;}
.sc-busfetch .station { display: flex; align-items: center; gap: 1rem;}
.sc-busfetch .station input { color: #444;font-weight: 500; padding: 1.6rem 3.6rem 1.6rem 1.6rem; border: 0; background: #efefef url(../img/arrow-1.png) no-repeat center right 1.6rem / 1.5rem; border-radius: 0.5rem; font-size: 1.6rem; flex: 1; min-width: 0;}
.sc-busfetch .station input::placeholder { color: #999;}
.sc-busfetch .station #switchBtn img { width: 2rem; }
.sc-busfetch .tripdate { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem;}
.sc-busfetch .tripdate .input-btn { display: flex; align-items: center; border-radius: 0.5rem; padding: 1.6rem 2rem; font-size: 1.6rem; background-color: #efefef; position: relative; overflow: hidden; cursor: pointer;}
.sc-busfetch .tripdate .input-btn input[type="date"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 10; left: 0; top: 0; margin: 0; padding: 0; border: none; background: transparent; pointer-events: auto; -webkit-appearance: none; appearance: none;}
.sc-busfetch .tripdate .input-btn p { font-size: inherit; flex-shrink: 0; color: #999; position: relative; z-index: 1; pointer-events: none;}
.sc-busfetch .tripdate .input_box { display: flex; align-items: center; font-size: inherit; flex: 1; min-width: 0; padding-left: 1.6rem; margin-left: 1.6rem; position: relative; z-index: 1; pointer-events: none;}
.sc-busfetch .tripdate .input_box input { flex: 1; min-width: 0; background-color: transparent; padding-right: 1rem; pointer-events: none;}
.sc-busfetch .tripdate .input_box img { flex-shrink: 0; width: 1.6rem; pointer-events: none;}
.sc-busfetch .fetch_button { margin-top: 1.6rem; padding: 1.6rem 0;}
.sc-busfetch .fetch_button.active { background-color: var(--brand-color);}

.homeWrap main .container { padding-bottom: 2rem;}
.homeWrap .sc1 .sc-contents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;}
.homeWrap .sc1 .sc-contents .menu-item { width: 100%; height: 15rem; padding: 2rem; background-color: #e6f1ff; display: flex; flex-direction: column; align-items: end; justify-content: space-between; gap: 0.8rem; border-radius: 0.5rem; }
.homeWrap .sc1 .sc-contents .menu-item .text_box { width: 100%;}
.homeWrap .sc1 .sc-contents .menu-item .text_box p { font-size: 1.8rem; line-height: 1.2; font-weight: 700; width: 100%;}
.homeWrap .sc1 .sc-contents .menu-item .text_box span { font-size: 1.6rem; color: #fff; background-color: var(--brand-color); display: inline-block; border-radius: 100px; padding: 0.4rem 1rem; margin-bottom: 0.6rem; font-weight: 200;}
.homeWrap .sc1 .sc-contents .menu-item img { width: 2rem; float: right;}
.homeWrap .sc1 .sc-contents .menu-item:nth-child(1) { background-color: #fff6e5;}
.homeWrap .sc1 .sc-contents .menu-item:nth-child(2) { background-color: #efefef;}
.homeWrap .sc1 .sc-contents .menu-item:nth-child(3) { background-color: #efefef;}
.homeWrap .sc1 .sc-contents .menu-item:nth-child(4) { background-color: #fff6e5;}

.homeWrap .sc-qna .sc-title { margin-bottom: 0.2rem;}
.homeWrap .sc-qna .sc-contents { display: flex; flex-direction: column; }
.homeWrap .sc-qna .sc-contents .link-item { border-radius: 0.5rem; display: flex; align-items: center; justify-content: space-between; padding: 2rem 0;}
.homeWrap .sc-qna .sc-contents .link-item:not(:last-child) { border-bottom: 1px solid #ccc;}
.homeWrap .sc-qna .sc-contents .link-item .text_box { display: flex; align-items: center; gap: 1rem;}
.homeWrap .sc-qna .sc-contents .link-item .text_box h4 { font-size: 1.6rem; }
.homeWrap .sc-qna .sc-contents .link-item .text_box img { width: 2.4rem;}
.homeWrap .sc-qna .sc-contents .link-item p { display: flex; align-items: center; font-size: 1.5rem; color: #999; gap: 0.8rem;}
.homeWrap .sc-qna .sc-contents .link-item p img { width: 1.2rem;}





/* subpage */
.subpage-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 2rem; margin-top: 1rem;}

.subpage-search { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;}
.subpage-search .select-wrap { color: #444; font-weight: 500; padding: 1.6rem 1.6rem; border: 0; width: 100%; background: #efefef url(../img/arrow-1.png) no-repeat center right 1.6rem / 1.8rem; border-radius: 0.5rem; width: 100%; font-size: 1.6rem;}
.subpage-search .select-wrap option { font-size: 1.6rem; background-color: #fff;}
.subpage-search .search-wrap { display: flex; background-color: #efefef; border-radius: 0.5rem; overflow: hidden;}
.subpage-search .search-wrap input { flex: 1; min-width: 0; font-size: 1.6rem;  padding: 1.6rem 1.6rem; background-color: transparent;}
.subpage-search .search-wrap input::placeholder { color: #999; font-weight: 300;}
.subpage-search .search-wrap button { padding-right: 1.6rem;}
.subpage-search .search-wrap button img { width: 2rem;}

.subpage-list { display: flex; flex-direction: column; gap: 3rem;}
.subpage-list .list-item h3{ color: var(--brand-color); font-size: 1.6rem; font-weight: 600; margin-bottom: 1rem;}
.subpage-list .list-item .item_text { flex: 1; min-width: 0;}
.subpage-list .list-item .item_text pre { font-size: 1.5rem; line-height: 1.5; color: #666; font-weight: 300;}
.subpage-list .list-item .item_text pre b { color: #333; font-weight: 500;}


.subpage-list2 { display: flex; flex-direction: column;}
.subpage-list2 .list-item { padding: 1.8rem 0;}
.subpage-list2 .list-item:not(:last-child) { border-bottom: 1px solid #ccc;}
.subpage-list2 .list-item h3 { font-size: 1.8rem; font-weight: 600; line-height: 1.3;}
.subpage-list2 .list-item .text_box { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 1rem;}
.subpage-list2 .list-item .text_box p { font-size: 1.5rem; color: #999; font-weight: 300; line-height: 1.2; flex: 1; min-width: 0; word-break: break-all;}



/* schedule.php */
.scheduleWrap .sc-schedule { margin-top: 2rem;}
.scheduleWrap .sc-schedule .route_reture { margin-top: 4rem;}

.scheduleWrap .sc-schedule .route_title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.8rem;}
.scheduleWrap .sc-schedule .route_title .title_wrap { display: flex; align-items: center; gap: 1rem;}
.scheduleWrap .sc-schedule .route_title .title_wrap img { width: 1.8rem;}
.scheduleWrap .sc-schedule .route_title .title_wrap h3 { font-size: 1.7rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem;}
.scheduleWrap .sc-schedule .route_title .title_wrap h3 span { font-size: inherit; font-weight: inherit;}
.scheduleWrap .sc-schedule .route_title p.date { color: #999; font-size: 1.4rem; font-weight: 400;}
.scheduleWrap .sc-schedule table { border-collapse: collapse; table-layout: fixed; width: 100%;}
.scheduleWrap .sc-schedule table thead th { border-left: 1px solid #ccc; border-right: 1px solid #ccc; background-color: #f4f4f4;}
.scheduleWrap .sc-schedule table thead tr{  border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}

.scheduleWrap .sc-schedule table tbody tr:first-child td { border-top: none;}
.scheduleWrap .sc-schedule table tbody td { border: 1px solid #ccc;}
.scheduleWrap .sc-schedule table thead th:first-child,
.scheduleWrap .sc-schedule table tbody td:first-child { border-left: none;}
.scheduleWrap .sc-schedule table thead th:last-child,
.scheduleWrap .sc-schedule table tbody td:last-child { border-right: none;}

.scheduleWrap .sc-schedule table thead th,
.scheduleWrap .sc-schedule table tbody td { font-size: 1.4rem; padding: 1rem 0; text-align: center;}
.scheduleWrap .sc-schedule table tbody td { color: #999; font-weight: 300;}
.scheduleWrap .sc-schedule table tbody td.info button { background-color: var(--brand-color); color: #fff; font-size: 1.4rem; padding: 0.4rem 1rem; border-radius: 100px;}

td.tdMessage { text-align: center; padding: 4rem !important; color: #999; line-height: 1.4; font-size: 1.6rem !important; }


/* qna.php */
.qnaWrap .qna_list { display: flex; flex-direction: column; border-top: 1px solid #ccc;}
.qnaWrap .qna_item { border-bottom: 1px solid #ccc;}
.qnaWrap .qna_item .qna_header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 0;}
.qnaWrap .qna_item .qna_header h3 { font-size: 1.5rem; flex: 1; min-width: 0; padding-right: 1rem; text-align: left; line-height: 1.4; }
.qnaWrap .qna_item .qna_header h3 b { color: var(--brand-color); font-weight: 300; margin-right: 0.4rem;}
.qnaWrap .qna_item .qna_header img { width: 1.8rem; transition: all 0.2s;}
.qnaWrap .qna_item .qna_body { background-color: #fff6e5; padding: 2rem 1.6rem; display: none;}
.qnaWrap .qna_item .qna_body pre { font-size: 1.5rem; line-height: 1.4; color: #666; font-weight: 300;}
.qnaWrap .qna_item.active .qna_header img { transform: rotate(180deg);}
.qnaWrap .qna_item.active .qna_body { display: block;}
.qnaWrap .qna_item .alertMessage { padding-bottom: 8rem;}




/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 4rem;}
.pagination .page-num { display: flex; align-items: center;}
.pagination .page-link.current { color: #fff; font-weight: 500; background-color: var(--brand-color);}
.pagination .page-link { color: #666; font-size: 1.8rem; width: 3rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 0.4rem;}
.pagination .page-btn { width: 1.2rem;}


/* modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); display: none;}
.modal.active { display: block;}
.modal .modal-container { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-height: 80vh; border-radius: 0.5rem; background-color: #fff; display: flex; flex-direction: column; overflow-y: auto;}

/* modal-station_modal */
.modal#station_modal .modal-container { overflow: hidden;}
.modal#station_modal .region_list { display: flex; flex-direction: column; overflow-y: auto; height: 100%; scrollbar-width: none; -ms-overflow-style: none; flex: 1; min-height: 0;}
.modal#station_modal .region_list::-webkit-scrollbar { display: none;}
.modal#station_modal .region_item { display: flex; align-items: baseline; font-size: 1.6rem; padding: 1.6rem 2rem; flex-shrink: 0;}
.modal#station_modal .region_item:not(:last-child) { border-bottom: 1px solid #eee; }
.modal#station_modal .button-wrap { margin-top: 2rem; padding: 0 2rem 2rem;}

/* modal-info_modal */
.modal#info_modal .modal-container { padding: 3rem 2rem;}
.modal#info_modal .modal-header .modal-title h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem;}
.modal#info_modal .info_list { display: flex; flex-direction: column;}
.modal#info_modal .info_item { display: flex; align-items: baseline; padding: 1rem 0;}
.modal#info_modal .info_item:not(:last-child) { border-bottom: 1px solid #eee; gap: 1rem;}
.modal#info_modal .info_item h5 { font-size: 1.5rem; color: #999; min-width: 8rem; flex-shrink: 0;}
.modal#info_modal .info_item p { font-size: 1.5rem; color: #333; word-break: break-all; flex: 1; min-width: 0; line-height: 1.5;}
.modal#info_modal button.btn-close { margin-top: 2rem;}