/* home.php */
.homeWrap section .sc-title { margin-bottom: 2rem;}
.homeWrap section .sc-title .mainTitle{ font-size: 2.4rem; font-weight: 700;}
.homeWrap section + section { margin-top: 4rem;}
.homeWrap .sc1 .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem;}
.homeWrap .sc1 .sc1_button { border-radius: 1rem; overflow: hidden; padding: 4rem 0; flex: 1; height: 24rem;}
.homeWrap .sc1 .sc1_button h5 { font-weight: 600; font-size: 2rem; text-align: center; margin-bottom: 0.8rem;}
.homeWrap .sc1 .sc1_button p { font-weight: 300; font-size: 1.8rem; text-align: center; color: #666;}
.homeWrap .sc1 .sc1_button.btn1 { background: url(../img/btn-img-1.png) no-repeat center / cover;}
.homeWrap .sc1 .sc1_button.btn2 { background: url(../img/btn-img-2.png) no-repeat center / cover;}
.homeWrap .sc2 { background-color: #f2f2f5; padding: 4rem 0;}
.homeWrap .sc2 .sc-list { display: flex; flex-direction: column; gap: 2rem; }
.homeWrap .sc2 .sc-list a { border-radius: 1rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); padding: 3rem 2rem; display: flex; align-items: center; background-color: #fff;}
.homeWrap .sc2 .sc-list a .text-box { flex: 1; min-width: 0; padding-right: 2rem;}
.homeWrap .sc2 .sc-list a .text-box h3 { font-size: 1.8rem; font-weight: 600; line-height: 1.2;}
.homeWrap .sc2 .sc-list a .text-box p { font-size: 1.6rem; font-weight: 400; color: #999; margin-top: 0.4rem; line-height: 1.4;}
.homeWrap .sc2 .sc-list a img { flex-shrink: 0;}
.homeWrap .sc2 .sc-list a.item1 img { width: 4rem;}
.homeWrap .sc2 .sc-list a.item2 img { width: 5rem;}
.homeWrap .sc2 .sc-list a.item3 img { width: 6rem;}


/* 서브페이지 공통 */
.select_form { display: flex; align-items: center; justify-content: space-between; background-color: #f2f2f5; padding: 1.6rem; border-radius: 1rem; position: relative;}
.select_form .custom-select-wrapper { width: 100%;}
.select_form .custom-select-display { width: 100%; display: flex; align-items: center;}
.select_form .custom-select-display img { width: 2rem; transition: transform .3s; flex-shrink: 0;}
.select_form .custom-select-display.active img { transform: rotate(180deg);}
.select_form .custom-select-display p { font-size: 1.8rem; flex: 1; min-width: 0;}
.select_form .custom-select-display.placeholder p { color: #999; font-weight: 300;}
.select_form .custom-select-options { position: absolute; top: calc( 100% + 2rem); left: 0; border-radius: 1rem; overflow: hidden; width: 100%; background-color: #f2f2f5; display: none; max-height: calc( 5rem * 5); overflow-y: auto;}
.select_form .custom-select-options.show { display: block;}
.select_form .custom-select-option { padding: 2rem; font-size: 1.6rem;}
.select_form .custom-select-option + .custom-select-option { border-top: 1px solid #b6b6b8;}
.select_form .custom-select-option.selected { background-color: #333; color: #fff;}


.search_form { display: flex; align-items: center; justify-content: space-between; background-color: #f2f2f5; padding: 1.6rem; border-radius: 1rem;}
.search_form input { background-color: transparent; font-size: 1.8rem; flex: 1; min-width: 0;}
.search_form input::placeholder { color: #999; font-weight: 300;}
.search_form .btn-search { width: 2rem; flex-shrink: 0;}

.content-list { display: flex; flex-direction: column; gap: 2rem; margin-top: 1rem;}
.content-list .content-item { border-radius: 1rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); padding: 2rem 2rem; display: flex; align-items: start; background-color: #fff;}
.content-list .content-item .text-box { flex: 1; min-width: 0; padding-right: 1.6rem;}
.content-list .content-item .text-box h3 { font-size: 1.8rem; font-weight: 600; line-height: 1.2;}
.content-list .content-item .text-box p { font-size: 1.6rem; font-weight: 300; color: #999; margin-top: 0.4rem; line-height: 1.4;}
.content-list .content-item img { flex-shrink: 0;}
.btn-fav { width: 1.8rem; aspect-ratio: 1/1; background: url(../img/icon-4.png) no-repeat center / contain;}
.btn-fav.active { background: url(../img/icon-3.png) no-repeat center / contain;}
.btn-info { width: 1.8rem; aspect-ratio: 1/1;}

.text-area .text-box + .text-box { margin-top: 2rem;}
.text-area .text-box h3 { font-size: 1.8rem; font-weight: 600; line-height: 1.2;}
.text-area .text-box p { font-size: 1.6rem; font-weight: 400; color: #999; margin-top: 0.4rem; line-height: 1.4; word-break: normal;}


.toggle-list .toggle-item + .toggle-item { margin-top: 2rem;}
.toggle-list .item-header { background-color: #f2f2f5; display: flex; align-items: center; justify-content: space-between; padding: 2rem; border-radius: 1rem;}
.toggle-list .item-header h3 { font-size: 1.8rem; font-weight: 600; flex: 1; min-width: 0; padding-right: 1rem; line-height: 1.4;}
.toggle-list .item-header img { width: 2rem; transition: transform .3s;}
.toggle-list .toggle-item.active .item-header img { transform: rotate(180deg);}
.toggle-list .item-content { margin-top: 2rem; padding: 0 1.6rem; display: none;}
.toggle-list .item-content pre {  font-size: 1.6rem; line-height: 1.4; color: #999; font-weight: 300;}

.banner { border-radius: 1rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); padding: 3rem 2rem; display: flex; align-items: center; background-color: #fff;}
.banner_btm { margin-top: 4rem;}
.banner .text-box { flex: 1; min-width: 0; padding-right: 2rem;}
.banner .text-box h3 { font-size: 1.8rem; font-weight: 600; line-height: 1.2;}
.banner .text-box p { font-size: 1.6rem; font-weight: 400; color: #999; margin-top: 0.4rem; line-height: 1.4;}
.banner img { flex-shrink: 0; width: 6rem;}


/* bus.php */
.busWrap .content-list{ margin-top: 2rem;}


/* bus_detail.php */
.busDetailWrap .top-title { display: flex; justify-content: space-between; align-items: start; margin-bottom: 2rem;}
.busDetailWrap .top-title .text-box { flex: 1; min-width: 0;}
.busDetailWrap .top-title h2 { font-size: 2rem; color: #0015d4; font-weight: 600;}
.busDetailWrap .top-title .bus-info { display: flex; align-items: center; margin-top: 0.8rem; flex-shrink: 0; overflow: hidden; flex-wrap: wrap; }
.busDetailWrap .top-title .bus-info p { font-size: 1.6rem; color: #aaa; position: relative; font-weight: 300; line-height: 1.3;  width: fit-content; margin-right: 0.8rem; padding-right: 0.8rem;}
.busDetailWrap .top-title .bus-info p::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 50%; background-color: #ccc;}
.busDetailWrap .top-title .bus-info p:last-child { margin-right: 0; padding-right: 0;}
.busDetailWrap .top-title .bus-info p:last-child::after { display: none;}
.busDetailWrap .top-title .btn-wrap { display: flex; gap: 0.8rem; }

.busDetailWrap .bus-stop-list { display: flex; flex-direction: column; margin-top: 1rem;}
.busDetailWrap .bus-stop-item { margin-left: 2rem; padding-left: 2.4rem; position: relative;}
.busDetailWrap .bus-stop-item.active { background-color: #ebeeff;}
.busDetailWrap .bus-stop-item::before { content:''; position: absolute; top: 0; left: 0; transform: translateX(-50%); width: 0.4rem; height: 100%; background-color: #f2f2f5;}
.busDetailWrap .bus-stop-item:first-child::before { top: 3rem;}
.busDetailWrap .bus-stop-item:last-child::before { height: 3rem;}
.busDetailWrap .bus-stop-item::after { content:''; position: absolute; top: 1.2rem; left: 0; transform: translateX(-50%); width: 2.2rem; aspect-ratio: 1/1; background: url(../img/icon-5.png) no-repeat center / contain;}
.busDetailWrap .bus-stop-item .text-box { padding: 1.4rem 2.4rem 1.4rem 0; border-bottom: 1px solid #f2f2f5;}
.busDetailWrap .bus-stop-item:last-child .text-box { border: none;}
.busDetailWrap .bus-stop-item .stop-name { font-size: 1.8rem; font-weight: 700; line-height: 1.3;}
.busDetailWrap .bus-stop-item .route-info { font-size: 1.6rem; color: #aaa; font-weight: 300; line-height: 1.3; margin-top: 0.6rem;}

.no-data { margin-top: 8rem;}
.no-data p{ font-size: 1.6rem; color: #aaa; font-weight: 300; text-align: center;}
.no-search-result { animation: fadeInOut 2s ease-in-out forwards; position: fixed; z-index: 9; bottom: 4rem; left: 50%; background-color: rgba(0, 0, 0, 0.6); padding: 2rem; border-radius: 1rem;}
.no-search-result p { font-size: 1.4rem; color: #fff;}
  
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
}

/* bus_info.php */
.busInfoWrap main .container { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between;}

/* airport.php */
.airportWrap .select_form { position: relative;}
.airportWrap .content-list { margin-top: 2rem;}

/* favorites.php */
.favoritesWrap main .container { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.favoritesWrap .content-list { flex: 1; min-width: 0;}
.favoritesWrap .content-item { align-items: center;}
.favoritesWrap .content-item .btn-wrap { display: flex; align-items: center; gap: 0.4rem;}
.favoritesWrap .content-item .drag-handle { font-size: 1.8rem; color: #aaa; font-weight: 300; }
.favoritesWrap .content-item .del-btn { font-size: 1.6rem; color: #aaa; font-weight: 300;}
.favoritesWrap .button-wrap { display: flex; align-items: center; gap: 1rem; margin-top: 4rem; flex-shrink: 0;}
.favoritesWrap .button-wrap button { flex: 1; min-width: 0; border-radius: 0.5rem; text-align: center; padding: 1.6rem; font-size: 1.8rem; font-weight: 300;}
.favoritesWrap .button-wrap .cancel-btn { border: 1px solid #666;}
.favoritesWrap .button-wrap .save-btn { background-color: #f2f2f5; color: #999;}
.favoritesWrap .button-wrap .save-btn.active { background-color: #0015d4; color: #fff;}

/* money.php */

.moneyWrap .money-wrap + .money-wrap { margin-top: 4rem;}
.moneyWrap .money-header {  position: relative; margin-bottom: 2rem;}
.moneyWrap .money-title { display: flex; align-items: center; justify-content: space-between;}
.moneyWrap .money-title h3 { font-size: 1.8rem; font-weight: 700;}
.moneyWrap .money-title h3 span { font-size: 1.6rem; color: #aaa; font-weight: 300; margin-left: 0.4rem;}
.moneyWrap .money-title img{ width: 2rem; transition: transform .3s; flex-shrink: 0;}
.moneyWrap .money-header.active img { transform: rotate(180deg);}
.moneyWrap .money-input { display: flex; align-items: center; justify-content: space-between; background-color: #f2f2f5; padding: 1.6rem; border-radius: 1rem;}
.moneyWrap .money-input input { background-color: transparent; font-size: 1.8rem; flex: 1; min-width: 0; padding-right: 1rem;}
.moneyWrap .money-input input::placeholder { color: #999; font-weight: 300;}
.moneyWrap .money-input span { font-size: 1.8rem; color: #999; font-weight: 300;}

.moneyWrap .custom-select-options { position: absolute; top: calc( 100% + 2rem); left: 0; border-radius: 1rem; overflow: hidden; width: 100%; background-color: #f2f2f5;  max-height: calc( 5rem * 5); overflow-y: auto; display: none; z-index: 1;}
.moneyWrap .custom-select-options.show { display: block;}
.moneyWrap .custom-select-option { padding: 2rem; font-size: 1.6rem; }
.moneyWrap .custom-select-option span { font-weight: 300; font-size: 1.4rem; color: #999; margin-left: 0.4rem;}
.moneyWrap .custom-select-option + .custom-select-option { border-top: 1px solid #b6b6b8;}
.moneyWrap .custom-select-option.selected { background-color: #333; color: #fff;}
.moneyWrap .custom-select-option.selected span { color: #fff;}

.moneyWrap .exchange-btn { padding: 1.6rem; font-size: 1.8rem; font-weight: 300; text-align: center; background-color: #0015d4; color: #fff; border-radius: 0.5rem; width: 100%;margin-top: 2rem;}

.moneyWrap .exchange-graph { margin-top: 4rem; order: 4;}
.moneyWrap .exchange-graph .graph-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;}
.moneyWrap .exchange-graph .graph-title h3 { font-size: 2rem; font-weight: 700;}
.moneyWrap .exchange-graph .graph-title .btn-wrap  { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 0.5rem; overflow: hidden;}
.moneyWrap .exchange-graph .graph-title .btn-wrap button { padding: 0.6rem 1rem; width: 5rem; font-size: 1.4rem; font-weight: 300; color: #666; background-color: #fff;}
.moneyWrap .exchange-graph .graph-title .btn-wrap button + button { border-left: 1px solid #ccc;}
.moneyWrap .exchange-graph .graph-title .btn-wrap button.active { background-color: #f2f2f5;} 
.moneyWrap .exchange-graph .graph-wrap { margin-top: 2rem; height: 28rem; }




/* check_list.php */
.checkListWrap .text-box{ margin-top: 3rem; }
.checkListWrap .text-box p { color: #ff0000; font-size: 1.6rem; font-weight: 300; margin-bottom: 1rem; line-height: 1.4;}
.checkListWrap .text-box pre { font-size: 1.6rem; line-height: 1.4; color: #999; font-weight: 300;}



/* 페이지네이션 스타일 */
.pagination_wrap { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 2rem;}
.pagination { display: flex; align-items: center; gap: 0.2rem;}
.page_btn { display: flex; align-items: center; justify-content: center; width: 3rem; aspect-ratio: 1/1; color: #666; text-decoration: none; font-size: 1.8rem; font-weight: 500; transition: all 0.3s ease; cursor: pointer; border-radius: 100%;}
.page_btn.active { background-color: #eee; font-weight: 700; color: #333;}
.page_btn.prev,
.page_btn.next { width: 3rem; font-size: 1.8rem; font-weight: bold;}
.page_btn.prev img,
.page_btn.next img { width: 1.6rem; aspect-ratio: 1/1; object-fit: contain;}
.page_btn.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; opacity:0.2;}

.page_info { display: flex; align-items: center; gap: 1rem; font-size: 1.3rem; color: #666;}
.page_info span:first-child { font-weight: 500; color: #333;}




/* ad */
.homeWrap .sc1 .container .ads_wrap { grid-column: span 2;}
.toggle-list .ads_wrap { margin-top: 2rem;}