@charset "UTF-8";

/* =========================================================
   홈파인 (homefine01) 추가 스타일
   - 색상은 layout.css :root 의 --color 를 따릅니다.
   - 클래스 접두어 : hf_
   ========================================================= */

:root{
--hf-text: #222;
--hf-sub: #666;
--hf-line: #e5e5e5;
--hf-bg: #f6f7f9;
--hf-point: #ff7a00;
}

/* ---------- 공통 ---------- */
.hf_eng{font-family: 'Montserrat', sans-serif; font-size: var(--fs14); font-weight: 600; letter-spacing: 0.15em; color: var(--color); margin-bottom: 12px;}
.hf_btns{display: flex; flex-wrap: wrap; gap: 10px;}
.hf_btn{display: inline-flex; align-items: center; justify-content: center; min-width: 160px; height: 52px; padding: 0 24px; font-size: 1.6rem; font-weight: 600; border: 1px solid transparent; border-radius: 4px; transition: 0.3s all;}
.hf_btn_primary{background: var(--color); border-color: var(--color); color: #fff;}
.hf_btn_primary:hover{background: #fff; color: var(--color);}
.hf_btn_dark{background: #222; border-color: #222; color: #fff;}
.hf_btn_dark:hover{background: var(--color); border-color: var(--color);}
.hf_btn_line{background: transparent; border-color: rgba(255,255,255,0.8); color: #fff;}
.hf_btn_line:hover{background: #fff; color: #222;}
.hf_btn_line_dark{background: #fff; border-color: #222; color: #222;}
.hf_btn_line_dark:hover{background: #222; color: #fff;}
.hf_center_btn{margin-top: 50px; text-align: center;}
.hf_empty{padding: 40px 0; text-align: center; color: #999;}
.hf_title{text-align: center; margin-bottom: 50px;}
.hf_title p{font-family: 'Montserrat', sans-serif; font-size: var(--fs14); font-weight: 600; letter-spacing: 0.15em; color: var(--color); margin-bottom: 10px;}
.hf_title h2{font-size: var(--fs32); font-weight: 700; color: var(--hf-text);}
.hf_title span{display: block; margin-top: 15px; font-size: var(--fs18); color: var(--hf-sub);}
.hf_chip{display: inline-block; margin: 3px 6px 3px 0; padding: 4px 12px; border-radius: 20px; background: var(--hf-bg); font-size: 1.4rem;}
.hf_state{display: inline-block; min-width: 64px; padding: 5px 10px; border-radius: 20px; font-size: 1.3rem; font-weight: 600; text-align: center; background: #eef1f6; color: #555; white-space: nowrap;}
.hf_state.ing, .hf_state.s1, .hf_state.s2{background: #e8efff; color: var(--color);}
.hf_state.done, .hf_state.s3{background: #e9f7ef; color: #1f8a4c;}
.hf_state.wait, .hf_state.s0{background: #fff3e6; color: var(--hf-point);}
.hf_state.s4{background: #f1f1f1; color: #888;}

/* 로고 (2배 해상도 이미지를 표시 크기로) */
#header .head_menu .logo img{display: block; width: 100%; height: auto;}
.foot_logo img{width: 245px; max-width: 70%; height: auto;}

/* 헤더 견적문의 버튼 */
#header .hf_head_cta{display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border-radius: 30px; background: var(--color); color: #fff; font-size: 1.5rem; font-weight: 600; white-space: nowrap;}
#header .hf_head_cta:hover{background: #fff; color: var(--color);}

/* ---------- 메인 : 비주얼 ---------- */
.hf_m_visual{position: relative;}
.hf_m_visual .swiper_visual{height: 100vh; min-height: 640px;}
.hf_m_visual .swiper-slide{background-repeat: no-repeat; background-position: center; background-size: cover;}
.hf_m_visual .hf_slide1{background-image: url('../img/visual01.png');}
.hf_m_visual .hf_slide2{background-image: url('../img/visual02.png');}
.hf_m_visual .hf_slide3{background-image: url('../img/visual03.png');}
.hf_m_visual_text{height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 90px; color: #fff;}
.hf_m_visual_text .hf_eng{color: #fff; opacity: 0.8;}
.hf_m_visual_text h2{font-size: var(--fs40); font-weight: 700; line-height: 1.35; color: #fff;}
.hf_m_visual_text .hf_desc{margin: 20px 0 35px; font-size: var(--fs20); color: #fff; opacity: 0.9;}
.hf_m_visual .swiper-pagination{bottom: 150px !important;}
.hf_m_visual .swiper-pagination-bullet{opacity: 1; background: rgba(255,255,255,0.5);}
.hf_m_visual .swiper-pagination-bullet-active{background: #fff; width: 25px; border-radius: 10px;}

/* ---------- 메인 : 강점 ---------- */
.hf_m_value{position: relative; z-index: 5; margin-top: -110px;}
.hf_value_list{display: flex; gap: 20px;}
.hf_value_list li{flex: 1; padding: 35px 30px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);}
.hf_value_list .hf_value_eng{font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.15em; color: var(--color);}
.hf_value_list .hf_value_icon{margin: 15px 0;}
.hf_value_list .hf_value_icon img{width: 64px; height: 64px;}
.hf_value_list h3{font-size: var(--fs24); font-weight: 700; margin-bottom: 12px;}
.hf_value_list p{color: var(--hf-sub); line-height: 1.6;}
.hf_value_list a{display: inline-block; margin-top: 20px; font-weight: 600; color: var(--color); border-bottom: 1px solid var(--color);}

/* ---------- 메인 : 실시간 현황 ---------- */
.hf_counter{display: flex; margin-bottom: 40px; border: 1px solid var(--hf-line); border-radius: 10px; background: #fff;}
.hf_counter li{flex: 1; padding: 25px 20px; text-align: center; border-left: 1px solid var(--hf-line);}
.hf_counter li:first-child{border-left: 0;}
.hf_counter span{display: block; margin-bottom: 8px; color: var(--hf-sub);}
.hf_counter strong{font-family: 'Montserrat', sans-serif; font-size: var(--fs32); font-weight: 700; color: var(--color);}
.hf_counter em{font-style: normal; margin-left: 3px; color: var(--hf-sub);}
.hf_status_wrap{display: flex; gap: 20px;}
.hf_status_box{flex: 1; padding: 30px; border-radius: 10px; background: var(--hf-bg);}
.hf_status_head{display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 5px; border-bottom: 2px solid #222;}
.hf_status_head h3{font-size: var(--fs22); font-weight: 700;}
.hf_more{font-size: 1.4rem; color: var(--hf-sub);}
.hf_more:hover{color: var(--color);}
.hf_lt_rows li{display: flex; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--hf-line);}
.hf_lt_rows li:last-child{border-bottom: 0;}
.hf_lt_rows .hf_lt_txt{flex: 1; min-width: 0;}
.hf_lt_rows .hf_lt_txt strong, .hf_lt_rows .hf_lt_txt a{display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hf_lt_rows .hf_lt_txt p{margin-top: 4px; font-size: 1.4rem; color: var(--hf-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hf_lt_rows .hf_lt_date{font-size: 1.4rem; color: #999; white-space: nowrap;}
.hf_lt_rows .empty_li{justify-content: center; padding: 40px 0; color: #999;}

/* ---------- 메인 : 템플릿 ---------- */
.hf_m_template{background: var(--hf-bg);}
.hf_industry_chip{display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px;}
.hf_industry_chip a{display: block; padding: 10px 20px; border: 1px solid #ddd; border-radius: 30px; background: #fff; font-size: 1.5rem;}
.hf_industry_chip a:hover, .hf_industry_chip a.on{background: #222; border-color: #222; color: #fff;}

/* 템플릿 카드 (메인·게시판 공통) */
.hf_tpl_list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px;}
.hf_tpl_item{position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hf-line); border-radius: 10px; overflow: hidden; transition: 0.3s all;}
.hf_tpl_item:hover{box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-3px);}
.hf_tpl_item.now{border-color: var(--color);}
.hf_tpl_thumb{position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #f1f1f1;}
.hf_tpl_thumb img{width: 100%; height: 100%; object-fit: cover; object-position: top;}
.hf_tpl_thumb .hf_tpl_cate{position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 14px; border-radius: 20px; background: var(--color); color: #fff; font-size: 1.3rem; font-weight: 600;}
.hf_badge{position: absolute; top: 14px; right: 14px; z-index: 2; padding: 4px 10px; border-radius: 4px; font-size: 1.2rem; font-weight: 600; color: #fff; background: rgba(0,0,0,0.55);}
.hf_badge.pc{background: rgba(85,85,85,0.75);}
.hf_tpl_demo{display: flex; gap: 6px; padding: 14px 14px 0;}
.hf_tpl_demo a, .hf_tpl_demo span{flex: 1; height: 40px; line-height: 38px; text-align: center; border: 1px solid #ddd; border-radius: 4px; background: #f3f4f6; font-size: 1.4rem; color: #333;}
.hf_tpl_demo a:hover{background: #222; border-color: #222; color: #fff;}
.hf_tpl_demo .adm{background: #fff;}
.hf_tpl_demo .off{color: #bbb; background: #fafafa;}
.hf_tpl_info{padding: 16px 14px 18px;}
.hf_tpl_name{display: block; font-size: var(--fs18); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hf_tpl_price{display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin-top: 10px;}
.hf_tpl_price del{font-size: 1.4rem; color: #aaa;}
.hf_tpl_price strong{font-size: var(--fs20); font-weight: 700;}
.hf_tpl_price strong.free{color: var(--color);}

/* 템플릿 목록 상단 : 탭 + 검색 */
.hf_tpl_top{display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 10px 0 25px; padding-bottom: 15px; border-bottom: 1px solid var(--hf-line);}
.hf_tpl_tab{display: flex; gap: 28px;}
.hf_tpl_tab a{position: relative; display: block; padding: 8px 0; font-size: var(--fs20); font-weight: 700; color: #aaa;}
.hf_tpl_tab a.on{color: #222;}
.hf_tpl_tab a.on::after{content: ''; position: absolute; left: 0; bottom: -16px; width: 100%; height: 3px; background: var(--color);}
.hf_tpl_search{position: relative; width: 300px; max-width: 45%;}
.hf_tpl_search input{width: 100%; height: 48px; padding: 0 50px 0 20px; border: 1px solid var(--hf-line); border-radius: 30px; background: #f7f8fa; font-size: 1.5rem;}
.hf_tpl_search button{position: absolute; top: 0; right: 0; width: 50px; height: 48px; border: 0; background: none; font-size: 2rem; color: #666; cursor: pointer;}

/* 템플릿 상세 */
.hf_tplv{display: flex; gap: 40px; margin-bottom: 50px;}
.hf_tplv_view{flex: 1; min-width: 0;}
.hf_tplv_shot{max-height: 620px; overflow-y: auto; border: 1px solid var(--hf-line); border-radius: 10px; background: #f7f8fa;}
.hf_tplv_shot img{width: 100%; display: block;}
.hf_tplv_info{width: 420px; flex: none;}
.hf_tplv_cate{display: inline-block; padding: 4px 14px; border-radius: 20px; background: var(--hf-bg); font-size: 1.4rem;}
.hf_tplv_code{margin: 12px 0; font-size: var(--fs24); font-weight: 500;}
.hf_tplv_code b{font-weight: 700;}
.hf_tplv_price{display: flex; align-items: baseline; gap: 10px; padding-bottom: 18px; border-bottom: 2px solid #222;}
.hf_tplv_price del{font-size: var(--fs18); color: #aaa;}
.hf_tplv_price strong{font-size: var(--fs32); font-weight: 700;}
.hf_tplv_price strong.free{color: var(--color);}
.hf_tplv_spec{width: 100%; margin: 20px 0 25px;}
.hf_tplv_spec caption{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);}
.hf_tplv_spec th, .hf_tplv_spec td{padding: 12px 10px; border-bottom: 1px solid var(--hf-line); text-align: left; font-size: 1.5rem; line-height: 1.5;}
.hf_tplv_spec th{width: 120px; color: var(--hf-sub); font-weight: 500;}
.hf_tplv_cta{width: 100%;}
.hf_tplv_btns{display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px;}
.hf_tplv_btns a, .hf_tplv_btns span{height: 44px; line-height: 42px; text-align: center; border: 1px solid #ddd; border-radius: 4px; font-size: 1.4rem;}
.hf_tplv_btns a:hover{border-color: var(--color); color: var(--color);}
.hf_tplv_btns .off{color: #bbb; background: #fafafa;}
.hf_tplv_case{margin-bottom: 50px;}
.hf_tplv_case h3{margin-bottom: 18px; font-size: var(--fs22); font-weight: 700;}
.hf_tplv_case ul{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.hf_tplv_case .hf_case_thumb{display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #eee;}
.hf_tplv_case .hf_case_thumb img{width: 100%; height: 100%; object-fit: cover; object-position: top;}
.hf_tplv_case .hf_case_name{display: block; margin-top: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hf_tpl_list .empty_list, .hf_pf_list .empty_list{grid-column: 1 / -1; padding: 80px 0; text-align: center; color: #999;}
.hf_chk{position: absolute; top: 10px; right: 10px; z-index: 4;}
.new_icon{display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 3px; background: var(--hf-point); color: #fff; font-size: 1.1rem; line-height: 16px; vertical-align: middle;}

/* 템플릿 필터 */
.hf_filter{margin: -20px 0 30px; padding: 18px 25px; border: 1px solid var(--hf-line); border-radius: 8px; background: #fff;}
.hf_filter dl{display: flex; align-items: center; padding: 6px 0;}
.hf_filter dt{width: 70px; font-weight: 600;}
.hf_filter dd{display: flex; flex-wrap: wrap; gap: 6px;}
.hf_filter dd a{padding: 6px 16px; border: 1px solid #ddd; border-radius: 20px; font-size: 1.4rem;}
.hf_filter dd a.on, .hf_filter dd a:hover{background: var(--color); border-color: var(--color); color: #fff;}

/* 모바일 미리보기 레이어 */
.hf_mo_layer{display: none; position: fixed; inset: 0; z-index: 2000;}
.hf_mo_bg{position: absolute; inset: 0; background: rgba(0,0,0,0.7);}
.hf_mo_box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 395px; max-width: 94%; padding: 40px 10px 10px; border-radius: 12px; background: #fff; text-align: center;}
.hf_mo_box iframe{display: block; width: 100%; height: 667px; max-height: 70vh; border: 1px solid var(--hf-line);}
.hf_mo_close{position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 1.4rem; color: #666;}
.hf_mo_newwin{display: inline-block; margin-top: 10px; font-size: 1.4rem; color: var(--color);}

/* ---------- 메인 : 기본 제공 ---------- */
.hf_benefit_list{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.hf_benefit_list li{padding: 30px 25px; border: 1px solid var(--hf-line); border-radius: 10px; text-align: center;}
.hf_benefit_list img{width: 60px; height: 60px; margin-bottom: 15px;}
.hf_benefit_list h3{font-size: var(--fs20); font-weight: 700; margin-bottom: 8px;}
.hf_benefit_list p{color: var(--hf-sub); line-height: 1.5;}

/* ---------- 메인 : 제작 방식 ---------- */
.hf_m_way{background: var(--hf-bg);}
.hf_way_wrap{display: flex; gap: 30px;}
.hf_way_box{flex: 1; display: block; border-radius: 10px; overflow: hidden; background: #fff; transition: 0.3s all;}
.hf_way_box:hover{box-shadow: 0 10px 25px rgba(0,0,0,0.08);}
.hf_way_img{aspect-ratio: 8 / 5; overflow: hidden; background: #eee;}
.hf_way_img img{width: 100%; height: 100%; object-fit: cover;}
.hf_way_text{padding: 30px;}
.hf_way_text span{color: var(--color); font-weight: 600;}
.hf_way_text h3{margin: 10px 0; font-size: var(--fs26); font-weight: 700;}
.hf_way_text p{color: var(--hf-sub); line-height: 1.6;}
.hf_way_text em{display: inline-block; margin-top: 20px; font-style: normal; font-weight: 600; border-bottom: 1px solid #222;}

/* 포트폴리오 카드 (메인·게시판 공통) */
.hf_pf_list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 25px;}
.hf_pf_item{position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--hf-line); background: #fff;}
.hf_pf_item.now{border-color: var(--color);}
.hf_pf_thumb{display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #eee;}
.hf_pf_thumb img{width: 100%; height: 100%; object-fit: cover; object-position: top; transition: 0.5s all;}
.hf_pf_item:hover .hf_pf_thumb img{transform: scale(1.04);}
.hf_pf_info{padding: 20px;}
.hf_pf_cate{display: inline-block; margin-bottom: 6px; font-size: 1.3rem; color: var(--color);}
.hf_pf_name{display: block; font-size: var(--fs18); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hf_pf_scope{margin-top: 6px; font-size: 1.4rem; color: var(--hf-sub);}
.hf_pf_btns{display: flex; gap: 8px; margin-top: 15px;}
.hf_pf_btns a{flex: 1; height: 38px; line-height: 36px; text-align: center; border: 1px solid #ddd; border-radius: 4px; font-size: 1.4rem;}
.hf_pf_btns a.visit{background: #222; border-color: #222; color: #fff;}
.hf_pf_btns a:hover{border-color: var(--color); color: var(--color);}
.hf_pf_btns a.visit:hover{background: var(--color); color: #fff;}

/* ---------- 메인 : FAQ ---------- */
.hf_faq_list{max-width: 1000px; margin: 0 auto; border-top: 2px solid #222;}
.hf_faq_list li{border-bottom: 1px solid var(--hf-line);}
.hf_faq_q{display: flex; align-items: center; gap: 15px; width: 100%; padding: 22px 10px; border: 0; background: none; text-align: left; font-size: var(--fs18); font-weight: 600;}
.hf_faq_q b, .hf_faq_a b{font-family: 'Montserrat', sans-serif; font-size: var(--fs20); color: var(--color);}
.hf_faq_a{display: none; gap: 15px; padding: 20px 10px 25px; background: var(--hf-bg);}
.hf_faq_a b{color: var(--hf-point);}
.hf_faq_list li.on .hf_faq_a{display: flex;}
.hf_faq_a div{line-height: 1.7; color: #444;}

/* ---------- 메인 : 빠른 상담 ---------- */
.hf_m_cta{padding: 70px 0; background: #1d2433 url('../img/cta_bg.png') no-repeat center / cover;}
.hf_cta_inner{display: flex; justify-content: space-between; align-items: center; gap: 30px;}
.hf_cta_text h2{font-size: var(--fs28); font-weight: 700; color: #fff;}
.hf_cta_text p{margin-top: 10px; color: rgba(255,255,255,0.8);}
.hf_quick_form{display: flex; gap: 10px;}
.hf_quick_form input{width: 200px; height: 52px; padding: 0 15px; border-radius: 4px; background: #fff; font-size: 1.5rem;}
.hf_quick_form button{height: 52px; padding: 0 28px; border: 0; border-radius: 4px; background: var(--color); color: #fff; font-size: 1.6rem; font-weight: 600; white-space: nowrap;}
.hf_quick_form button:hover{background: var(--hf-point);}

/* ---------- 서브 공통 ---------- */
.hf_sub_title{margin: 70px 0 25px;}
.hf_sub_title h3{font-size: var(--fs26); font-weight: 700; padding-left: 14px; border-left: 4px solid var(--color);}
.hf_sub_title p{margin-top: 10px; color: var(--hf-sub);}
.hf_box_gray{margin-top: 60px; padding: 40px; border-radius: 10px; background: var(--hf-bg);}
.hf_box_gray .hf_sub_title{margin-top: 0;}
.hf_sub_cta{margin-top: 80px; padding: 40px; border-radius: 10px; background: #222; text-align: center;}
.hf_sub_cta p{margin-bottom: 20px; font-size: var(--fs20); color: #fff;}
.hf_note{margin-top: 15px; font-size: 1.4rem; color: #999;}
.hf_table_wrap{overflow-x: auto;}
.hf_table{width: 100%; border-top: 2px solid #222;}
.hf_table th, .hf_table td{padding: 16px 15px; border-bottom: 1px solid var(--hf-line); text-align: left;}
.hf_table thead th{background: var(--hf-bg); font-weight: 600;}
.hf_table td b{font-weight: 700;}
.hf_td_price{font-weight: 700; color: var(--color); white-space: nowrap;}

/* 제작 방법 */
.hf_step_list{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.hf_step_list li{padding: 30px 25px; border: 1px solid var(--hf-line); border-radius: 10px;}
.hf_step_num{font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--color);}
.hf_step_icon{margin: 15px 0;}
.hf_step_icon img{width: 56px; height: 56px;}
.hf_step_list h3{font-size: var(--fs20); font-weight: 700; margin-bottom: 10px;}
.hf_step_list p{color: var(--hf-sub); line-height: 1.6;}
.hf_check_list{display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px;}
.hf_check_list li{position: relative; padding-left: 22px; line-height: 1.5;}
.hf_check_list li::before{content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--color);}

/* 제작 비용 */
.hf_plan_list{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.hf_plan_list > li{position: relative; display: flex; flex-direction: column; padding: 35px 30px; border: 1px solid var(--hf-line); border-radius: 10px; background: #fff;}
.hf_plan_list > li.best{border: 2px solid var(--color);}
.hf_plan_badge{position: absolute; top: -13px; right: 25px; padding: 4px 14px; border-radius: 20px; background: var(--color); color: #fff; font-size: 1.3rem; font-weight: 600;}
.hf_plan_name{font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.1em; color: var(--color);}
.hf_plan_list h4{margin-top: 8px; font-size: var(--fs22); font-weight: 700;}
.hf_plan_desc{margin-top: 8px; color: var(--hf-sub);}
.hf_plan_price{margin: 20px 0; font-size: var(--fs32); font-weight: 700;}
.hf_plan_info{padding: 15px 0; border-top: 1px solid var(--hf-line); border-bottom: 1px solid var(--hf-line);}
.hf_plan_info div{display: flex; justify-content: space-between; padding: 5px 0;}
.hf_plan_info dt{color: var(--hf-sub);}
.hf_plan_info dd{font-weight: 600;}
.hf_plan_opt{flex: 1; margin: 15px 0 25px;}
.hf_plan_opt li{position: relative; padding: 5px 0 5px 20px;}
.hf_plan_opt li.in::before{content: ''; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--color);}
.hf_plan_opt li.out{color: #aaa;}
.hf_plan_opt li.out::before{content: ''; position: absolute; left: 2px; top: 14px; width: 8px; height: 2px; background: #bbb;}
.hf_plan_list .hf_btn{width: 100%;}

/* 유지보수·호스팅 */
.hf_host_list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.hf_host_list li{padding: 30px; border: 1px solid var(--hf-line); border-radius: 10px; text-align: center;}
.hf_host_list span{color: var(--hf-sub);}
.hf_host_list strong{display: block; margin: 10px 0; font-size: var(--fs28); font-weight: 700; color: var(--color);}
.hf_host_list p{color: var(--hf-sub);}
.hf_renew_list{display: flex; gap: 15px;}
.hf_renew_list li{flex: 1; padding: 20px; border-radius: 8px; background: #fff; text-align: center;}
.hf_renew_list b{display: block; margin-bottom: 6px; font-family: 'Montserrat', sans-serif; font-size: var(--fs20); font-weight: 700; color: var(--color);}

/* 카드 목록 (유지보수·기능) */
.hf_card_list{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.hf_card_list li{position: relative; padding: 30px 25px; border: 1px solid var(--hf-line); border-radius: 10px;}
.hf_card_list img{width: 56px; height: 56px; margin-bottom: 15px;}
.hf_card_list h4{font-size: var(--fs20); font-weight: 700; margin-bottom: 8px;}
.hf_card_list p{color: var(--hf-sub); line-height: 1.6;}
.hf_card_option li{background: var(--hf-bg); border-color: var(--hf-bg);}
.hf_tag{position: absolute; top: 20px; right: 20px; padding: 3px 10px; border-radius: 20px; background: var(--hf-point); color: #fff; font-size: 1.2rem;}

/* 업종별 솔루션 */
.hf_solution{display: flex; align-items: center; gap: 50px; padding: 50px 0; border-bottom: 1px solid var(--hf-line);}
.hf_solution:nth-child(even){flex-direction: row-reverse;}
.hf_solution_img{width: 45%; border-radius: 10px; overflow: hidden; aspect-ratio: 10 / 7; background: #eee;}
.hf_solution_img img{width: 100%; height: 100%; object-fit: cover;}
.hf_solution_text{flex: 1;}
.hf_solution_cate{display: inline-block; margin-bottom: 10px; padding: 4px 14px; border-radius: 20px; background: var(--color); color: #fff; font-weight: 600;}
.hf_solution_text h3{font-size: var(--fs24); font-weight: 700; line-height: 1.4;}
.hf_solution_text dl{margin: 25px 0;}
.hf_solution_text dt{margin: 15px 0 8px; font-weight: 700;}
.hf_solution_text dd span{display: inline-block; margin: 3px 6px 3px 0; padding: 6px 12px; border-radius: 4px; background: var(--hf-bg); font-size: 1.4rem;}
.hf_solution_text dd span.fn{background: #e8efff; color: var(--color);}

/* 회사소개 */
.hf_about_top{display: flex; align-items: center; justify-content: space-between; gap: 50px;}
.hf_about_text{width: 52%;}
.hf_about_text h3{margin-bottom: 25px; font-size: var(--fs28); font-weight: 700; line-height: 1.4;}
.hf_about_text p{font-size: var(--fs18); color: #444; line-height: 1.7;}
.hf_about_text p + p{margin-top: 12px;}
.hf_about_img{width: 42%; border-radius: 10px; overflow: hidden;}
.hf_about_img img{width: 100%;}

/* ---------- 게시판 확장 ---------- */
.hf_view_box{margin: 30px 0; padding: 25px; border: 1px solid var(--hf-line); border-radius: 10px; background: #fff;}
.hf_view_table th{width: 180px; background: var(--hf-bg); font-weight: 600;}
.hf_view_box .hf_btns{margin-top: 20px;}
.hf_agree_text{max-height: 150px; overflow-y: auto; padding: 15px; margin-bottom: 10px; border: 1px solid var(--hf-line); border-radius: 8px; background: var(--hf-bg); font-size: 1.4rem; line-height: 1.7; color: #555;}
.hf_agree_chk{display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 1.5rem; font-weight: 600;}
.hf_agree_chk input{width: 18px; height: 18px;}
.hf_mk_table .hf_mk_items{color: var(--hf-sub);}
.hf_es_table .td_status, .hf_mk_table .td_status{text-align: center;}

/* ---------- 반응형 ---------- */
@media all and (max-width: 1200px){
	.hf_tpl_list{grid-template-columns: repeat(2, 1fr);}
	.hf_tplv{flex-direction: column;}
	.hf_tplv_info{width: 100%;}
	.hf_step_list, .hf_card_list, .hf_benefit_list, .hf_plan_list{grid-template-columns: repeat(2, 1fr);}
	#header .hf_head_cta{padding: 0 14px;}
}
@media all and (max-width: 1024px){
	.hf_m_visual .swiper_visual{height: 80vh; min-height: 520px;}
	.hf_m_visual_text{padding-top: 60px;}
	.hf_m_visual .swiper-pagination{bottom: 40px !important;}
	.hf_m_value{margin-top: 30px;}
	.hf_value_list{flex-direction: column;}
	.hf_status_wrap, .hf_way_wrap{flex-direction: column;}
	.hf_plan_list, .hf_host_list{grid-template-columns: 1fr;}
	.hf_pf_list{grid-template-columns: repeat(2, 1fr);}
	.hf_cta_inner{flex-direction: column; text-align: center;}
	.hf_solution, .hf_solution:nth-child(even){flex-direction: column; gap: 25px;}
	.hf_solution_img{width: 100%;}
	.hf_about_top{flex-direction: column;}
	.hf_about_text, .hf_about_img{width: 100%;}
}
@media all and (max-width: 768px){
	.hf_m_visual .hf_slide1{background-image: url('../img/m_visual01.png');}
	.hf_m_visual .hf_slide2{background-image: url('../img/m_visual02.png');}
	.hf_m_visual .hf_slide3{background-image: url('../img/m_visual03.png');}
	.hf_m_visual_text h2{font-size: var(--fs28);}
	.hf_m_visual_text .hf_desc{font-size: 1.6rem;}
	.hf_btn{min-width: 130px; height: 46px; font-size: 1.5rem;}
	.hf_title h2{font-size: var(--fs24);}
	.hf_title span{font-size: 1.5rem;}
	.hf_counter{flex-wrap: wrap;}
	.hf_counter li{flex: 0 0 50%; border-left: 0; border-bottom: 1px solid var(--hf-line);}
	.hf_counter strong{font-size: var(--fs24);}
	.hf_status_box{padding: 20px;}
	.hf_tpl_list, .hf_pf_list{grid-template-columns: repeat(2, 1fr); gap: 15px;}
	.hf_tpl_info, .hf_pf_info{padding: 12px;}
	.hf_tpl_demo{flex-wrap: wrap; gap: 4px; padding: 10px 10px 0;}
	.hf_tpl_demo a, .hf_tpl_demo span{flex: 1 1 45%; height: 32px; line-height: 30px; font-size: 1.2rem;}
	.hf_tpl_top{flex-direction: column; align-items: flex-start; gap: 12px;}
	.hf_tpl_tab{gap: 16px; width: 100%; overflow-x: auto;}
	.hf_tpl_tab a{font-size: 1.6rem; white-space: nowrap;}
	.hf_tpl_tab a.on::after{bottom: -13px;}
	.hf_tpl_search{width: 100%; max-width: none;}
	.hf_tplv_case ul{grid-template-columns: repeat(2, 1fr);}
	.hf_pf_btns{flex-direction: column;}
	.hf_step_list, .hf_card_list, .hf_benefit_list, .hf_check_list{grid-template-columns: 1fr;}
	.hf_renew_list{flex-wrap: wrap;}
	.hf_renew_list li{flex: 0 0 calc(50% - 8px);}
	.hf_quick_form{flex-direction: column; width: 100%;}
	.hf_quick_form input{width: 100%;}
	.hf_box_gray, .hf_sub_cta{padding: 25px 20px;}
	.hf_view_table th{width: 110px;}
	.hf_filter{padding: 12px 15px;}
	.hf_filter dl{align-items: flex-start;}
	.hf_filter dt{width: 50px; padding-top: 6px;}
}

/* ---------- 챗봇 상담 ---------- */
.hf_chat_launcher{position: fixed; right: 80px; bottom: 20px; z-index: 990; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px 0 8px; border: 0; border-radius: 30px; background: var(--color); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.2); cursor: pointer;}
.hf_chat_launcher img{width: 36px; height: 36px; border-radius: 50%; background: #fff;}
.hf_chat_launcher span{font-size: 1.5rem; font-weight: 600; color: #fff;}
.hf_chat_opened .hf_chat_launcher{display: none;}
.hf_chat{display: none; position: fixed; right: 20px; bottom: 20px; z-index: 1001; width: 380px; height: 600px; max-height: calc(100vh - 40px); flex-direction: column; border-radius: 16px; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,0.25); overflow: hidden;}
.hf_chat.on{display: flex;}
.hf_chat_head{display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--color); color: #fff;}
.hf_chat_avatar{width: 40px; height: 40px; border-radius: 50%; background: #fff;}
.hf_chat_title{flex: 1;}
.hf_chat_title strong{display: block; font-size: 1.6rem; font-weight: 700; color: #fff;}
.hf_chat_title span{font-size: 1.3rem; color: rgba(255,255,255,0.8);}
.hf_chat_close{border: 1px solid rgba(255,255,255,0.6); border-radius: 20px; background: none; color: #fff; padding: 4px 12px; font-size: 1.3rem;}
.hf_chat_body{flex: 1; overflow-y: auto; padding: 16px; background: var(--hf-bg);}
.hf_chat_msg{display: flex; flex-direction: column; margin-bottom: 12px;}
.hf_chat_msg.user{align-items: flex-end;}
.hf_chat_bubble{max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 1.4rem; line-height: 1.55; word-break: break-all;}
.hf_chat_msg.bot .hf_chat_bubble{background: #fff; border: 1px solid var(--hf-line); border-top-left-radius: 4px; color: #222;}
.hf_chat_msg.user .hf_chat_bubble{background: var(--color); color: #fff; border-top-right-radius: 4px;}
.hf_chat_msg.wait .hf_chat_bubble{color: #999;}
.hf_chat_links{display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;}
.hf_chat_links a{padding: 5px 12px; border: 1px solid var(--color); border-radius: 20px; background: #fff; color: var(--color); font-size: 1.3rem;}
.hf_chat_quick{display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; border-top: 1px solid var(--hf-line); background: #fff;}
.hf_chat_quick button{flex: none; padding: 6px 12px; border: 1px solid #ddd; border-radius: 20px; background: #fff; font-size: 1.3rem; white-space: nowrap;}
.hf_chat_quick .hf_chat_handoff{border-color: var(--hf-point); color: var(--hf-point);}
.hf_chat_input{display: flex; gap: 6px; padding: 10px 12px 14px; background: #fff;}
.hf_chat_input.off{display: none;}
.hf_chat_input input{flex: 1; height: 42px; padding: 0 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1.4rem;}
.hf_chat_input button{height: 42px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--color); color: #fff; font-size: 1.4rem;}
.hf_chat_lead{display: none; flex-direction: column; gap: 6px; padding: 12px; border-top: 1px solid var(--hf-line); background: #fff;}
.hf_chat_lead.on{display: flex;}
.hf_chat.lead_mode .hf_chat_quick{display: none;}
.hf_chat.lead_mode .hf_chat_body{min-height: 140px;}
.hf_chat_lead_tit{font-size: 1.5rem; font-weight: 700;}
.hf_chat_lead_desc{font-size: 1.3rem; color: var(--hf-sub);}
.hf_chat_lead input, .hf_chat_lead textarea{width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 1.4rem;}
.hf_chat_lead input{height: 38px;}
.hf_chat_lead .hf_chat_trap{position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;}
.hf_chat_agree p{max-height: 54px; overflow-y: auto; font-size: 1.2rem; color: #888; line-height: 1.5;}
.hf_chat_agree label{display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 1.3rem;}
.hf_chat_agree input{width: auto; height: auto;}
.hf_chat_lead_btns{display: flex; gap: 6px;}
.hf_chat_lead_btns button{flex: 1; height: 40px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 1.4rem;}
.hf_chat_lead_btns button[type=submit]{border-color: var(--color); background: var(--color); color: #fff;}
@media all and (max-width: 768px){
	.hf_chat_launcher{right: 75px; bottom: 20px; height: 46px; padding: 0 14px 0 6px;}
	.hf_chat_launcher img{width: 32px; height: 32px;}
	.hf_chat{right: 0; bottom: 0; width: 100%; height: 100%; max-height: none; border-radius: 0;}
}

/* ---------- 템플릿 상세 하단 공통 안내 ---------- */
.hfb{margin-top: 60px;}
.hfb_intro{padding: 60px 20px; border-top: 1px solid var(--hf-line); text-align: center;}
.hfb_intro h2{font-size: var(--fs28); font-weight: 700; line-height: 1.45;}
.hfb_intro p{margin-top: 15px; color: var(--hf-sub);}
.hfb_anchor{display: flex; justify-content: center; gap: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--hf-line);}
.hfb_anchor a{color: var(--hf-sub); font-size: 1.5rem;}
.hfb_anchor a:hover{color: var(--color); font-weight: 600;}
.hfb_free{padding: 45px 0;}
.hfb_free ul{display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;}
.hfb_free li{text-align: center;}
.hfb_free img{width: 56px; height: 56px;}
.hfb_free span{display: block; margin-top: 12px; font-size: 1.5rem; font-weight: 600;}
.hfb_box{margin-bottom: 40px; padding: 35px; border: 1px solid var(--hf-line); border-radius: 10px; background: #fff;}
.hfb_box_head{display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 20px;}
.hfb_box_head.center{display: block; margin-bottom: 30px; text-align: center;}
.hfb_box_head h3{font-size: var(--fs24); font-weight: 700;}
.hfb_box_head span{font-size: 1.4rem; color: #999;}
.hfb_eng{font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.15em; color: var(--color); margin-bottom: 8px;}
.hfb_table th, .hfb_table td{text-align: center; font-size: 1.5rem;}
.hfb_table thead th{background: var(--hf-bg);}
.hfb_table tbody th{background: #fafbfc; font-weight: 600;}
.hfb_table .hfb_td_left{text-align: left; color: var(--hf-sub);}
.hfb_table .hfb_td_free{color: var(--color); font-weight: 700;}
.hfb_note{margin-top: 15px; font-size: 1.4rem; color: #888;}
.hfb_split{display: flex; align-items: center; gap: 50px; padding: 50px 0; border-top: 1px solid var(--hf-line);}
.hfb_split.rev{flex-direction: row-reverse;}
.hfb_split_text{flex: 1;}
.hfb_split_img{width: 55%; border-radius: 10px; overflow: hidden; background: var(--hf-bg);}
.hfb_split_img img{width: 100%; display: block;}
.hfb_tag{display: inline-block; margin-bottom: 12px; padding: 4px 14px; border-radius: 20px; background: var(--hf-bg); font-size: 1.4rem; color: var(--color); font-weight: 600;}
.hfb_split_text h3{font-size: var(--fs26); font-weight: 700; line-height: 1.4;}
.hfb_check{margin-top: 20px;}
.hfb_check li{position: relative; padding: 6px 0 6px 22px; color: #444;}
.hfb_check li::before{content: ''; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--color);}
.hfb_step{padding: 50px 0; border-top: 1px solid var(--hf-line);}
.hfb_step ol{max-width: 900px; margin: 0 auto;}
.hfb_step > ol > li{display: flex; gap: 25px; padding-bottom: 35px;}
.hfb_step_num{flex: none; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: var(--color); color: #fff; text-align: center; font-weight: 700;}
.hfb_step_text{flex: 1; padding-bottom: 20px; border-bottom: 1px solid var(--hf-line);}
.hfb_step_text h4{font-size: var(--fs20); font-weight: 700;}
.hfb_step_text > p{margin: 8px 0 10px; color: #444;}
.hfb_step_text ul li{position: relative; padding: 3px 0 3px 12px; font-size: 1.4rem; color: var(--hf-sub);}
.hfb_step_text ul li::before{content: ''; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: #bbb;}
.hfb_cta{padding: 40px; border-radius: 10px; background: #222; text-align: center;}
.hfb_cta p{margin-bottom: 18px; font-size: var(--fs20); color: #fff;}
@media all and (max-width: 1024px){
	.hfb_free ul{grid-template-columns: repeat(3, 1fr); gap: 25px 10px;}
	.hfb_split, .hfb_split.rev{flex-direction: column; gap: 25px; }
	.hfb_split_img{width: 100%;}
}
@media all and (max-width: 768px){
	.hfb_intro{padding: 40px 10px;}
	.hfb_intro h2{font-size: var(--fs24);}
	.hfb_anchor{gap: 14px; overflow-x: auto; white-space: nowrap;}
	.hfb_free ul{grid-template-columns: repeat(2, 1fr);}
	.hfb_box{padding: 20px 15px;}
	.hfb_box_head{flex-direction: column; gap: 6px;}
	.hfb_table th, .hfb_table td{padding: 10px 8px; font-size: 1.3rem; white-space: nowrap;}
	.hfb_step > ol > li{gap: 12px;}
	.hfb_cta{padding: 25px 20px;}
}

/* 템플릿 상세 : 관리자에게만 보이는 작은 관리 링크 (방문자 화면에는 없음) */
.hf_v_admin{display: flex; justify-content: flex-end; gap: 14px; margin: 15px auto 40px;}
.hf_v_admin a{font-size: 1.3rem; color: #aaa;}
.hf_v_admin a:hover{color: var(--color); text-decoration: underline;}
#bo_v #bo_v_title{margin-bottom: 20px;}

/* 견적문의 : 개인정보 동의 영역 */
#bo_w .hf_agree_box .write_content{display: block;}
#bo_w .hf_agree_box .hf_agree_chk{margin-top: 4px;}
.hf_agree_box .hf_agree_text p{margin-bottom: 4px;}

/* ---------- 상담·견적문의 폼 ---------- */
#bo_w.hf_form{max-width: 900px; margin: 0 auto;}
.hf_form_head{margin-bottom: 30px; text-align: center;}
.hf_form_head h2{font-size: var(--fs32); font-weight: 700;}
.hf_form_head p:last-child{margin-top: 10px; color: var(--hf-sub);}
.hf_form_card{border: 1px solid var(--hf-line); border-radius: 14px; background: #fff; overflow: hidden;}
.hf_form_sec{padding: 30px 35px; border-top: 1px solid var(--hf-line);}
.hf_form_sec:first-child{border-top: 0;}
.hf_form_sec h3{display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: var(--fs20); font-weight: 700;}
.hf_form_sec h3 span{display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1.3rem;}
.hf_fields{display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px;}
.hf_field{position: relative; display: flex; flex-direction: column;}
.hf_field.full{grid-column: 1 / -1;}
.hf_field > label{margin-bottom: 8px; font-size: 1.4rem; font-weight: 600; color: #444;}
.hf_field.req > label::after{content: '*'; margin-left: 4px; color: #e60013;}
#bo_w.hf_form .hf_field input[type=text], #bo_w.hf_form .hf_field input[type=password], #bo_w.hf_form .hf_field input[type=email], #bo_w.hf_form .hf_field select{width: 100%; height: 50px; padding: 0 14px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 1.5rem; color: #333; transition: 0.2s all;}
#bo_w.hf_form .hf_field input:focus, #bo_w.hf_form .hf_field select:focus{border-color: var(--color); box-shadow: 0 0 0 3px rgba(14,48,146,0.08); outline: none;}
#bo_w.hf_form .hf_field input::placeholder{color: #bbb;}
#bo_w.hf_form .wr_content textarea{width: 100%; min-height: 180px; padding: 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 1.5rem; line-height: 1.7;}
#bo_w.hf_form .wr_content textarea:focus{border-color: var(--color); outline: none;}
#bo_w.hf_form .hf_file{display: flex; gap: 8px;}
#bo_w.hf_form .hf_file .file_name{flex: 1;}
#bo_w.hf_form .hf_file .file_upload{flex: none; display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 50px; border-radius: 8px; background: #f1f3f6; color: #444; font-size: 1.4rem; cursor: pointer;}
#bo_w.hf_form .hf_file .file_upload:hover{background: #222; color: #fff;}
#bo_w.hf_form .hf_file .hidden_file{position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden;}
#bo_w.hf_form .file_del{display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 1.3rem; color: #888;}
#bo_w.hf_form #btn_autosave{position: absolute; right: 8px; bottom: 8px; height: 34px; padding: 0 12px; border-radius: 6px;}
.hf_agree .hf_agree_text{max-height: none; padding: 20px; border-radius: 8px; border: 1px solid var(--hf-line); background: var(--hf-bg); font-size: 1.4rem; line-height: 1.8; color: #555;}
.hf_agree .hf_agree_text b{display: inline-block; min-width: 72px; color: #333;}
.hf_agree .hf_agree_chk{display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 1.5rem; font-weight: 600; cursor: pointer;}
.hf_agree .hf_agree_chk input{width: 18px; height: 18px;}
.hf_captcha #captcha{display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
#bo_w.hf_form .hf_opt .bo_v_option{display: flex; gap: 14px;}
#bo_w.hf_form .btn_confirm{margin-top: 35px;}
@media all and (max-width: 768px){
	.hf_fields{grid-template-columns: 1fr;}
	.hf_form_sec{padding: 22px 18px;}
	.hf_form_head h2{font-size: var(--fs24);}
}

/* ---------- 실시간 제작현황 목록 ---------- */
.hf_mk_head{display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 5px; border-bottom: 2px solid #222;}
.hf_mk_head p{color: var(--hf-sub);}
.hf_mk_list li{display: flex; align-items: center; gap: 18px; padding: 20px 10px; border-bottom: 1px solid var(--hf-line);}
.hf_mk_list li:hover{background: #fafbfc;}
.hf_mk_txt{flex: 1; min-width: 0;}
.hf_mk_txt strong{display: block; font-size: var(--fs18); font-weight: 600;}
.hf_mk_txt p{margin-top: 5px; font-size: 1.4rem; color: var(--hf-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hf_mk_date{font-size: 1.4rem; color: #999; white-space: nowrap;}
.hf_mk_more{padding: 6px 14px; border: 1px solid #ddd; border-radius: 20px; font-size: 1.3rem; color: #666;}
.hf_mk_list .empty_li{justify-content: center; padding: 70px 0; color: #999;}

/* ---------- 상담·견적문의 목록 ---------- */
.hf_es_head{display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 15px; margin-bottom: 5px; border-bottom: 2px solid #222;}
.hf_es_head p{color: var(--hf-sub);}
.hf_es_head .hf_btn{min-width: 130px; height: 44px;}
.hf_es_list li{display: flex; align-items: center; gap: 18px; padding: 18px 10px; border-bottom: 1px solid var(--hf-line);}
.hf_es_list li:hover{background: #fafbfc;}
.hf_es_txt{flex: 1; min-width: 0;}
.hf_es_txt a{display: block; font-size: var(--fs18); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hf_es_txt a i{margin-right: 6px; color: #aaa;}
.hf_es_txt p{margin-top: 5px; font-size: 1.4rem; color: var(--hf-sub);}
.hf_es_list .empty_li{justify-content: center; padding: 70px 0; color: #999;}

/* ---------- 공지사항·자주하는 질문 다듬기 ---------- */
#bo_list .tbl_head01 thead th{background: var(--hf-bg); border-bottom: 1px solid var(--hf-line); font-weight: 600;}
#bo_list .tbl_head01 td{border-bottom: 1px solid var(--hf-line);}
#bo_list .tbl_head01 tbody tr:hover{background: #fafbfc;}
#bo_v_title{font-size: var(--fs24); font-weight: 700; line-height: 1.45;}
#faq_con li h3{font-weight: 600;}
#faq_con li h3:hover{color: var(--color);}
@media all and (max-width: 768px){
	.hf_mk_head, .hf_es_head{flex-direction: column; align-items: flex-start; gap: 10px;}
	.hf_mk_list li, .hf_es_list li{flex-wrap: wrap; gap: 8px 12px; padding: 15px 5px;}
	.hf_mk_txt, .hf_es_txt{flex: 1 1 100%; order: 2;}
	.hf_mk_date{order: 3;}
}

/* ============================================================
 * 제작 비용·유지보수 : 비용 계산 / 상품 비교 / 무료 혜택 / 갱신 할인 / 템플릿 교체
 * ============================================================ */
.hf_cost{margin-top: 10px; padding: 40px; border-radius: 10px; background: #222; color: #fff;}
.hf_cost_head{margin-bottom: 25px; font-size: var(--fs18); color: rgba(255,255,255,0.75);}
.hf_cost_head b{font-family: 'Montserrat', sans-serif; letter-spacing: 0.08em; color: #fff;}
.hf_cost_list{display: flex; margin: 0; padding: 0; list-style: none;}
.hf_cost_list li{position: relative; flex: 1; padding: 0 30px; border-left: 1px solid rgba(255,255,255,0.15);}
.hf_cost_list li:first-child{padding-left: 0; border-left: 0;}
.hf_cost_list span{display: block; font-size: 1.5rem; color: rgba(255,255,255,0.6);}
.hf_cost_list strong{display: block; margin: 8px 0 12px; font-size: var(--fs32); font-weight: 700; color: #fff;}
.hf_cost_list p{font-size: 1.5rem; line-height: 1.6; color: rgba(255,255,255,0.7);}
.hf_cost_list li.sum span{color: #fff; font-weight: 600;}

.hf_cmp_table th, .hf_cmp_table td{text-align: center;}
.hf_cmp_table thead th:first-child, .hf_cmp_table tbody th{text-align: left;}
.hf_cmp_table tbody th{font-weight: 500; color: var(--hf-sub); white-space: nowrap;}
.hf_cmp_table thead th{font-family: 'Montserrat', sans-serif; letter-spacing: 0.05em; white-space: nowrap;}
.hf_cmp_table thead th span{display: block; margin-top: 4px; font-family: inherit; font-size: 1.3rem; font-weight: 500; letter-spacing: 0; color: var(--hf-sub);}
.hf_cmp_table thead th.best{background: var(--color); color: #fff;}
.hf_cmp_table thead th.best span{color: rgba(255,255,255,0.8);}
.hf_cmp_on{font-weight: 600; color: var(--color);}
.hf_cmp_off{color: #bbb;}

.hf_free_list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
.hf_free_list li{display: flex; flex-direction: column; padding: 25px; border-radius: 8px; background: #fff;}
.hf_free_list h4{margin-bottom: 8px; font-size: var(--fs20); font-weight: 700;}
.hf_free_list p{flex: 1; color: var(--hf-sub); line-height: 1.6;}
.hf_free_list em{margin-top: 15px; font-style: normal; font-weight: 700; color: var(--color);}
.hf_free_sum{margin-top: 25px; font-size: var(--fs18);}
.hf_free_sum b{color: var(--color);}

.hf_vs_table th, .hf_vs_table td{width: 40%;}
.hf_vs_table th:first-child{width: 20%;}
.hf_vs_table tbody th{font-weight: 500; color: var(--hf-sub); text-align: left;}
.hf_vs_table tbody td:last-child{font-weight: 600;}
.hf_vs_table thead th.best{background: var(--color); color: #fff;}

.hf_prepay_table td del{color: #aaa;}

.hf_swap{display: flex; align-items: center; gap: 50px; margin-top: 60px; padding: 45px; border: 1px solid var(--hf-line); border-radius: 10px;}
.hf_swap_text{flex: 1;}
.hf_swap_text h3{font-size: var(--fs26); font-weight: 700; line-height: 1.4;}
.hf_swap_text p{margin-top: 12px; color: var(--hf-sub); line-height: 1.6;}
.hf_swap_note{width: 40%; padding-left: 40px; border-left: 1px solid var(--hf-line);}
.hf_swap_note li{position: relative; padding: 6px 0 6px 16px; font-size: 1.5rem; color: var(--hf-sub); line-height: 1.5;}
.hf_swap_note li::before{content: ''; position: absolute; left: 0; top: 15px; width: 6px; height: 2px; background: var(--color);}

.hf_care_free{margin-bottom: 30px; padding: 30px 35px; border-radius: 10px; background: var(--hf-bg);}
.hf_care_free_head{font-size: var(--fs20); font-weight: 700;}
.hf_care_free_sub{margin: 12px 0 20px; color: var(--hf-sub); line-height: 1.6;}
.hf_care_free_sub b{color: var(--color);}

@media all and (max-width: 1024px){
	.hf_cost_list{flex-direction: column; gap: 22px;}
	.hf_cost_list li{padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.15);}
	.hf_cost_list li:first-child{padding-top: 0; border-top: 0;}
	.hf_free_list{grid-template-columns: repeat(2, 1fr);}
	.hf_swap{flex-direction: column; align-items: flex-start; gap: 25px;}
	.hf_swap_note{width: 100%; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--hf-line);}
}
@media all and (max-width: 768px){
	.hf_cost, .hf_swap, .hf_care_free{padding: 25px 20px;}
	.hf_free_list{grid-template-columns: 1fr;}
	.hf_cmp_table, .hf_vs_table{min-width: 560px;}
}
.hf_plan_host{margin: -10px 0 20px; font-size: 1.4rem; color: var(--hf-sub);}
.hf_plan_host b{color: var(--hf-text);}

/* ---------- 검색 사이트 등록 ---------- */
.hf_sch_intro{display: flex; align-items: center; justify-content: space-between; gap: 60px; margin-top: 50px;}
.hf_sch_intro_text{flex: 1;}
.hf_sch_intro_text h3{font-size: var(--fs32); font-weight: 700; line-height: 1.35;}
.hf_sch_intro_text p{margin: 20px 0 30px; font-size: var(--fs18); color: #444; line-height: 1.7;}
.hf_sch_mock{position: relative; width: 46%; padding: 30px; border-radius: 16px; background: var(--hf-bg);}
.hf_sch_mock_bar{display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; border: 2px solid var(--color); border-radius: 30px; background: #fff; font-size: 1.7rem; font-weight: 600;}
.hf_sch_mock_bar i{font-size: 2.2rem; color: var(--color);}
.hf_sch_mock_list{margin-top: 18px; display: grid; gap: 10px;}
.hf_sch_mock_list li{padding: 18px 22px; border-radius: 10px; background: #fff;}
.hf_sch_mock_list li.on{border: 1px solid var(--hf-line);}
.hf_sch_mock_list em{display: block; font-style: normal; font-size: 1.3rem; color: #1a7f37;}
.hf_sch_mock_list b{display: block; margin: 4px 0; font-size: 1.8rem; color: var(--color);}
.hf_sch_mock_list span{font-size: 1.4rem; color: var(--hf-sub);}
.hf_sch_mock_list li i{display: block; height: 10px; border-radius: 5px; background: #e6e8ee;}
.hf_sch_mock_list li i + i{margin-top: 8px;}
.hf_sch_mock_list li i:nth-child(1){width: 35%;}
.hf_sch_mock_list li i:nth-child(2){width: 70%;}
.hf_sch_mock_list li i:nth-child(3){width: 55%;}
.hf_sch_mock_tag{position: absolute; right: -14px; bottom: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 30px; background: var(--hf-point); color: #fff; font-size: 1.4rem; font-weight: 600;}
.hf_sch_mock_tag i{font-size: 1.8rem;}

.hf_engine_list{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.hf_engine_list > li{padding: 30px 25px; border: 1px solid var(--hf-line); border-radius: 10px; background: #fff; transition: 0.3s all;}
.hf_engine_list > li:hover{border-color: var(--color); transform: translateY(-4px);}
.hf_engine_mark{display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--color); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 2.2rem; font-weight: 700;}
.hf_engine_n .hf_engine_mark{background: #1a7f37;}
.hf_engine_d .hf_engine_mark{background: #222;}
.hf_engine_b .hf_engine_mark{background: var(--hf-point);}
.hf_engine_list h4{margin-top: 18px; font-size: var(--fs22); font-weight: 700;}
.hf_engine_tool{margin-top: 4px; color: var(--hf-sub);}
.hf_engine_list ul{margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hf-line);}
.hf_engine_list ul li{position: relative; padding: 4px 0 4px 18px;}
.hf_engine_list ul li::before{content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--color);}

.hf_setup_list{display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin: 0; padding: 0;}
.hf_setup_list li{padding: 25px 20px; border-radius: 10px; background: #fff;}
.hf_setup_num{font-family: 'Montserrat', sans-serif; font-size: var(--fs24); font-weight: 700; color: var(--color);}
.hf_setup_list h4{margin: 10px 0 8px; font-size: var(--fs18); font-weight: 700;}
.hf_setup_list p{color: var(--hf-sub); line-height: 1.6; font-size: 1.5rem;}

.hf_sch_step{margin: 0; padding: 0;}
.hf_sch_flow{margin: 0; padding: 0;}

.hf_sch_blog{display: flex; align-items: center; gap: 50px; margin-top: 70px; padding: 45px; border-radius: 10px; background: #1d2433;}
.hf_sch_blog_text{width: 42%; color: #fff;}
.hf_sch_blog_text .hf_eng{color: #fff; opacity: 0.7;}
.hf_sch_blog_text h3{font-size: var(--fs26); font-weight: 700;}
.hf_sch_blog_text p{margin-top: 14px; color: rgba(255,255,255,0.8); line-height: 1.7;}
.hf_sch_flow{flex: 1; display: flex; align-items: center; justify-content: space-between;}
.hf_sch_flow li{position: relative; flex: 1; text-align: center; color: #fff;}
.hf_sch_flow li + li::before{content: ''; position: absolute; left: -30%; top: 38px; width: 60%; height: 2px; background: rgba(255,255,255,0.3);}
.hf_sch_flow li + li::after{content: ''; position: absolute; left: calc(30% - 8px); top: 33px; border: 6px solid transparent; border-left: 8px solid rgba(255,255,255,0.6);}
.hf_sch_flow span{display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: #fff; color: var(--color); font-size: 3.2rem;}
.hf_sch_flow li:last-child span{background: var(--hf-point); color: #fff;}
.hf_sch_flow b{display: block; margin-top: 14px; font-size: 1.6rem; font-weight: 600; line-height: 1.4;}
.hf_search .hf_note{margin-top: 25px;}

@media all and (max-width: 1200px){
	.hf_engine_list{grid-template-columns: repeat(2, 1fr);}
	.hf_setup_list{grid-template-columns: repeat(3, 1fr);}
}
@media all and (max-width: 1024px){
	.hf_sch_intro{flex-direction: column; align-items: stretch; gap: 40px;}
	.hf_sch_mock{width: 100%;}
	.hf_sch_mock_tag{right: 10px;}
	.hf_sch_blog{flex-direction: column; align-items: stretch; gap: 35px;}
	.hf_sch_blog_text{width: 100%;}
}
@media all and (max-width: 768px){
	.hf_sch_intro_text h3{font-size: var(--fs24);}
	.hf_sch_intro_text p{font-size: 1.6rem;}
	.hf_sch_mock{padding: 20px;}
	.hf_sch_mock_bar{height: 48px; font-size: 1.5rem;}
	.hf_engine_list{grid-template-columns: repeat(2, 1fr); gap: 12px;}
	.hf_engine_list > li{padding: 22px 18px;}
	.hf_setup_list{grid-template-columns: 1fr;}
	.hf_sch_blog{padding: 30px 20px;}
	.hf_sch_flow span{width: 60px; height: 60px; font-size: 2.6rem;}
	.hf_sch_flow li + li::before{top: 29px;}
	.hf_sch_flow li + li::after{top: 24px;}
	.hf_sch_flow b{font-size: 1.4rem;}
}