/* common */
section .sc-title { margin-bottom:  1rem; display: flex; align-items: center; justify-content: space-between;}
section .sc-title .mainTitle { font-size: 2rem; font-weight: 700; line-height: 1.4;}
.no-result { text-align: center; font-size: 2rem; color: #999; margin-top: 6rem;}

/* search_area 검색창 공통 */
.sc-search .search_area { margin-top: 2rem;}
.search_area { flex-shrink: 0;}
.search_area > form { display: flex; flex-direction: column; gap: 1.5rem;}
.search_area .btn-search { margin-top: 1.6rem;}

.search_input { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid #cfcfcf; padding: 0 1.6rem; height: 4.2rem; gap: 1rem;}
.search_input input { flex: 1; min-width: 0; font-size: 1.6rem; padding: 1.2rem 0; outline: none; border: none; background: transparent;}
.search_input img { width: 1.8rem; display: block; flex-shrink: 0;}

.typeWrap { display: flex; align-items: center; gap: 1rem;}
.typeWrap .typeSel { background-color: #f4f4f4; flex: 1; min-width: 0; border-radius: 1rem; box-sizing: border-box; position: relative; height: 4.5rem;}
.typeWrap .typeSel > a { font-size: 1.6rem; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 2rem; height: 100%;}
.typeWrap .typeSel > a input.select-input { background-color: transparent;}
.typeWrap .typeSel > a img { width: 1.2rem; flex-shrink: 0; transition: all 0.2s;}
.typeWrap .typeSel > a.active img { transform: rotate(180deg);}
.typeWrap .typeOption { display: none; flex-direction: column; position: absolute; top:100%; left: 0; right: 0; background-color: #f4f4f4; border-radius: 0 0 1rem 1rem; z-index: 10; max-height: 20rem; overflow-y: auto;}
.typeWrap .typeOption a { padding: 1.5rem 2rem; font-size: 1.6rem;  width: 100%;}
.typeWrap .typeOption a.active { background: var(--brand-color); color: #fff;}
.typeWrap .typeSel.open { border-radius: 1rem 1rem 0 0;}


.alertMessage { color: #999; font-size: 1.8rem; font-weight: 300; margin-top: 8rem; text-align: center;}
.btn-disabled { background-color: #ededed !important; color: #aaa !important;}
.btn-s1 { background-color: var(--brand-color); color: #fff; text-align: center; display: block; padding: 1.6rem 0; width: 100%; font-size: 1.8rem; flex: 1; min-width: 0;} 
.bottom-button { margin-top: 4rem;}
.select_box { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;}
.select_box select { flex: 1; min-width: 0; border: 1px solid #cfcfcf; font-size: 1.6rem; padding: 1.2rem 1.6rem; color: #666; background-image: url(../img/arrow-1.png); background-position:  center right 1.6rem; background-repeat: no-repeat; background-size: 1.2rem; outline: none; background-color: #fff;}
.select_box select option { font-size: 1.6rem;}
.search_tab_wrap { display: flex; align-items: center;}
.search_tab_wrap button { flex: 1; min-width: 0; font-size: 1.8rem; position: relative; border-bottom: 1px solid #999; padding: 1.6rem;}
.search_tab_wrap button.active { color: var(--brand-color); }
.search_tab_wrap button.active::after { content:''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--brand-color); transform: translateY(50%);}

/* home.php */
.homeWrap main { display: flex; flex-direction: column; gap: 2rem;}
.homeWrap .sc-menu { background-color: #f5f5f5; padding: 2rem 0;}
.homeWrap .sc-menu .container { display: grid; grid-template-columns: repeat(2 , 1fr); gap: 1.6rem;}
.homeWrap .sc-menu .menu-item { flex: 1; min-width: 0; background-color: #fff; border-radius: 0.8rem; padding: 2rem; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.6rem;}
.homeWrap .sc-menu .menu-item .text_box { width: 100%;}
.homeWrap .sc-menu .menu-item .text_box h3 { font-size: 1.6rem; font-weight: 600; line-height: 1.3;}
.homeWrap .sc-menu .menu-item .text_box p { font-size: 1.4rem; line-height: 1.3; color: #999; margin-top: 0.2rem;}



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

.subpage-list { display: flex; flex-direction: column; gap: 1.8rem;}
.subpage-list .list-item { background-color: #f4f5f7; border-radius: 1rem; padding: 2.4rem 1.8rem;}
.subpage-list .list-item .item-title { font-size: 1.6rem; font-weight: 600;}
.subpage-list .list-item .item-desc { font-size: 1.4rem; color: #999; line-height: 1.4; margin-top: 1rem;}
.subpage-list .list-item .item-desc strong{ font-size: inherit; margin-bottom: 4px; display: inline-block; color: #444; line-height: 1.3;}

.sub-intro .intro_title { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem;}

.result-list { display: flex; flex-direction: column; position: relative; flex: 1; min-height: 0; margin-top: 2rem;}
.result-item { padding: 2rem 0; display: flex; flex-direction: column;}
.result-item:not(:last-child) { border-bottom: 1px solid #eee;}
.result-item .title_wrap { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; gap: 1rem;}
.result-item .title_wrap .title { font-size: 1.8rem; line-height: 1.4; font-weight: 700; flex: 1; min-width: 0;}
.result-item .title_wrap a { font-size: 1.6rem; color: var(--brand-color); background-color: #f0f1ff; padding: 0.6rem 1.6rem; border-radius: 0.4rem;}

.item_mark span.blue { border: 1px solid var(--brand-color); background-color: var(--brand-color); color: #fff;}
.item_mark span { display: block;border-radius: 100px;text-align: center; border: 1px solid #ccc; color: #999;}

/* _detail.php */
.detailWrap .contents_area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px;}
.detailWrap .item_mark { display: flex; align-items: center; flex-wrap: nowrap; gap: 1rem; }
.detailWrap .item_mark span { font-size: 1.4rem; padding: 0.6rem 1.2rem;  flex: 1; min-width: 0; font-weight: 300;}
.detailWrap .contents_area { margin-top: 4rem; display: flex; flex-direction: column; gap: 2rem;}
.detailWrap .contents_area p { display: flex; align-items: baseline; font-size: 1.4rem; color: #999; line-height: 1.4;}
.detailWrap .contents_area p span { font-size: 1.6rem; color: #333; font-weight: 500; width: 12rem;}

/* charger_ev.php */
.chargerEvWrap .result-item .item_mark { display: flex; align-items: center; flex-wrap: nowrap; gap: 1rem;}
.chargerEvWrap .result-item .item_mark span { font-size: 1.3rem; padding: 0.6rem 1rem; min-width: 8rem;}

/* charger_hv.php */
.chargerHvWrap .result-item .sign { font-size: 1.4rem; margin-bottom: 1rem;}
.chargerHvWrap .result-item .sign.open { color: var(--brand-color);}
.chargerHvWrap .result-item .sign.close { color: #ff0000;}
.chargerHvWrap .result-item .price { font-size: 1.6rem; font-weight: 500;}
.chargerHvWrap .result-item .item_con p { font-size: 1.4rem; color: #999;}


/* sub.php */
.subWrap .sc-zev-info { display: flex; flex-direction: column; gap: 2rem;}
.subWrap .zev-intro { display: flex; flex-direction: column; gap: 1rem; border-bottom: 1px solid #ddd; padding-bottom: 2rem;}
.subWrap .zev-intro_title { font-size: 2rem; font-weight: 700;}
.subWrap .zev-intro_desc { font-size: 1.6rem; line-height: 1.7; color: #999; font-weight: 300;}
.subWrap .zev-intro_em { color: #1a73e8; font-weight: 600; font-size: inherit;}
.subWrap .zev-card-list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 4rem;}
.subWrap .zev-card { display: flex; flex-direction: column; gap: 1.2rem;}
.subWrap .zev-card_head { display: flex; align-items: center; gap: 0.8rem;}
.subWrap .zev-card_icon { width: 2.4rem;}
.subWrap .zev-card_title { font-size: 1.8rem; font-weight: 700;}
.subWrap .zev-card_list { display: flex; flex-direction: column; gap: 0.6rem; padding-left: 0; list-style: none;}
.subWrap .zev-card_list li { font-size: 1.6rem; line-height: 1.6; color: #999; padding-left: 1.2rem; position: relative;}
.subWrap .zev-card_list li::before { content: '·'; position: absolute; left: 0; color: #999;}
.subWrap .zev-footnote { font-size: 1.3rem; line-height: 1.6; color: #999; border-top: 1px solid #ddd; padding-top: 2rem;}


/* sub2.php */
.sub2Wrap .subsidy-section { display: flex; flex-direction: column; gap: 0.8rem; padding: 2.8rem 0; border-bottom: 1px solid #ddd; }
.sub2Wrap .subsidy-section:last-child { border: none;}
.sub2Wrap .subsidy-section_title { font-size: 1.6rem; font-weight: 700;  margin-bottom: 0.4rem;}
.sub2Wrap .subsidy-section_desc { font-size: 1.4rem; line-height: 1.7; color: #666;}
.sub2Wrap .subsidy-steps { display: flex; flex-direction: column; gap: 0rem; list-style: none; padding: 0; margin: 0; gap: 1.8rem;}
.sub2Wrap .subsidy-steps_item { display: flex; align-items: center; gap: 1.4rem; padding: 2rem; border:1px solid #ddd;}
.sub2Wrap .subsidy-steps_num { flex-shrink: 0; width: 3rem; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--brand-color); color: #fff; font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center;}
.sub2Wrap .subsidy-steps_body { display: flex; flex-direction: column; gap: 0.3rem;}
.sub2Wrap .subsidy-steps_name { font-size: 1.6rem; font-weight: 600; }
.sub2Wrap .subsidy-steps_sub { font-size: 1.3rem; color: #999;}

.sub2_123Wrap .result-item .title_wrap .price { font-size: 1.6rem;  font-weight: 600;}
.sub2_123Wrap .result-item .item_con p { font-size: 1.4rem; color: #999;}

/* sub2_4.php */
.sub2_4Wrap .contents { margin-top: 4rem;}
.sub2_4Wrap .contents img { margin: 0 auto;}

/* sub3.php */
.sub3Wrap .search_area { margin-bottom: 0; display: flex; flex-direction: column; gap: 1.2rem;}
.sub3Wrap .search_area form { display: flex; flex-direction: column; gap: 1.2rem;}
.sub3Wrap .result-item.car-item { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;}
.sub3Wrap .result-item.car-item .item_info { flex: 1; min-width: 0;}
.sub3Wrap .result-item.car-item .item_info .title { font-size: 1.8rem; font-weight: 700; color: #222; margin-bottom: 1rem;}
.sub3Wrap .result-item.car-item .item_info .maker { font-size: 1.4rem; color: var(--brand-color);}
.sub3Wrap .result-item.car-item .btn-detail { flex-shrink: 0; padding: 0.8rem 1.6rem; background-color: var(--brand-color); color: #fff; font-size: 1.4rem; border-radius: 100px; text-decoration: none; white-space: nowrap;}

/* sub3DetailWrap */
.sub3DetailWrap.detailWrap .item_mark span { flex: initial; min-width: 12rem;}


/* sub4.php */
.sub4Wrap .search_area { margin-bottom: 0; display: flex; flex-direction: column; gap: 1.2rem;}
.sub4Wrap .search_area form { display: flex; flex-direction: column; gap: 1.2rem;}
.sub4Wrap .result-item.car-item { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;}
.sub4Wrap .result-item.car-item .item_info { flex: 1; min-width: 0;}
.sub4Wrap .result-item.car-item .item_info .title { font-size: 1.8rem; font-weight: 700; color: #222; margin-bottom: 1rem;}
.sub4Wrap .result-item.car-item .item_info .maker { font-size: 1.4rem; color: var(--brand-color);}
.sub4Wrap .result-item.car-item .btn-detail { flex-shrink: 0; padding: 0.8rem 1.6rem; background-color: var(--brand-color); color: #fff; font-size: 1.4rem; border-radius: 100px; text-decoration: none; white-space: nowrap;}
.sub4Wrap .result-item.car-item .btn-detail:hover { opacity: 0.85;}


/* sub5.php */
.sub5Wrap .select_box { display: flex; align-items: center; gap: 1.2rem;}
.sub5Wrap .select_box select { width: 12rem; flex: none;}
.sub5Wrap .result-item.dict-item { flex-direction: column; align-items: baseline; justify-content: space-between;  gap: 1.4rem;}
.sub5Wrap .result-item.dict-item .item_info { flex: 1; min-width: 0;}
.sub5Wrap .result-item.dict-item .item_info .title { font-size: 1.8rem; font-weight: 700; color: #222;}
.sub5Wrap .result-item.dict-item .btn-detail { flex-shrink: 0; padding: 0.8rem 2rem; background-color: var(--brand-color); color: #fff; font-size: 1.4rem; border-radius: 100px; white-space: nowrap; border: none; cursor: pointer;}

/* sub5 모달 */
.sub5Wrap ~ #detailModal .modal-title { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 1.6rem;}
.sub5Wrap ~ #detailModal .modal-divider { border: none; border-top: 1px solid #eee; margin-bottom: 1.6rem;}
.sub5Wrap ~ #detailModal .modal-context { font-size: 1.5rem; color: #555; line-height: 1.8;}

/* charge_detail.php */
.chDetailWrap .contents_area { flex: 1; min-height: 0;}

/* charge_hv_detail.php */
.hvDetailWrap .title_wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem;}
.hvDetailWrap .title_wrap .subpage-title { margin-bottom: 0;}
.hvDetailWrap .title_wrap .btn-favorite { width: 2.4rem; aspect-ratio: 1/1; flex-shrink: 0; position: relative;}


/* faq.php */
.faqWrap .faq-list { display: flex; flex-direction: column; margin-top: 1rem; gap: 1.6rem;}
.faqWrap .faq-item { border: 1px solid #ddd;}

.faqWrap .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; background: none; border: none; cursor: pointer; text-align: left;}
.faqWrap .faq-question span { font-size: 1.6rem; color: #222; line-height: 1.4; flex: 1; min-width: 0;}
.faqWrap .faq-question .faq-arrow { width: 1.2rem; flex-shrink: 0; transition: transform 0.3s;}
.faqWrap .faq-item.open .faq-arrow { transform: rotate(180deg);}

.faqWrap .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faqWrap .faq-answer p { font-size: 1.5rem; color: #555; line-height: 1.8; padding: 1.6rem 1.8rem 2rem; background-color: #f0f4ff; border-top: 1px solid #ddd;}


.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem;}
.modal-wrap { background: #fff; width: 100%; max-width: 40rem; overflow: hidden;}
.modal-body { padding: 3rem 2.4rem;}
.modal_inheader { padding-bottom: 2rem; border-bottom: 1px solid #eee;}
.modal-title { font-size: 1.8rem; font-weight: 700; color: #222; margin-bottom: 1rem;}
.modal-call { font-size: 1.6rem; color: var(--brand-color); font-weight: 400; }
.modal-callsub { font-size: 1.4rem; color: #666; line-height: 1.8;}
.modal_inbody { padding: 2rem 0;}
.modal-footer { padding: 0 2.4rem 2.4rem;}


/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 4rem;}
.pagination .page-link.current { color: #fff; font-weight: 700; background-color: var(--brand-color);}
.pagination .page-link { color: #666; font-size: 1.8rem; width: 3rem; aspect-ratio: 1/1; background-color: #ededed; display: flex; align-items: center; justify-content: center; border-radius: 100%;}
.pagination .page-btn { width: 1.5rem; aspect-ratio: 1/1; margin: 0 1rem;}
.pagination .page-btn img {width: 100%;}