@charset "utf-8";

:root {
    /* [Board Primary & Point Colors] */
    --bd-color-primary: #E35826;
    --bd-color-primary-hover: #CC491C;
    --bd-color-notice: #F55921;
    --bd-color-orange-active: #EE7800;
    --bd-color-orange-bg: #FFF7F0;
    --bd-color-teal: #004A5A;
    --bd-color-blue: #2563EB;
    --bd-color-blue-hover: #1D4ED8;
    --bd-color-danger: #EF4444;
    
    /* [Dark Slate & Button Colors] */
    --bd-color-slate-dark: #1E293B;
    --bd-color-slate-btn: #334155;
    --bd-color-slate-hover: #1E293B;
    --bd-color-slate-main: #0F172A;
    --bd-color-slate-sub: #475569;
    --bd-color-slate-muted: #64748B;
    
    /* [Badge Colors] */
    --bd-badge-notice-bg: #FFF5F2;
    --bd-badge-notice-border: #FFD8CC;
    --bd-badge-replied-bg: #F0FDF4;
    --bd-badge-replied-text: #16A34A;
    --bd-badge-replied-border: #BBF7D0;
    --bd-badge-reply-bg: #FFF3EB;
    --bd-badge-reply-border: #FFE2D1;
    --bd-badge-reply-text: #FF5000;
    
    /* [Text Colors] */
    --bd-text-main: #222222;
    --bd-text-sub: #475569;
    --bd-text-muted: #94A3B8;
    
    /* [Background Colors] */
    --bd-bg-white: #FFFFFF;
    --bd-bg-light: #F8FAFC;
    --bd-bg-muted: #F1F5F9;
    --bd-bg-recom: #FFF9F5;
    --bd-bg-recom-hover: #FFF0E6;
    
    /* [Borders & Radius] */
    --bd-border-light: #E2E8F0;
    --bd-border-medium: #CBD5E1;
    --bd-border-active: #C7D2FE;
    
    --bd-radius-sm: 4px;
    --bd-radius-btn: 6px;
    --bd-radius-md: 8px;
    --bd-radius-lg: 12px;
    --bd-radius-pill: 20px;
    
    /* [Shadows & Transitions] */
    --bd-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    --bd-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
    --bd-transition-fast: all 0.2s ease;
    --bd-transition-accord: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================
   1. 공통 레이아웃 및 래퍼 (Wrapper & Container)
   ================================---------- */
.board-header-wrapper,
.board_list_container,
.after_box,
.view_container,
.prev_next,
.faq_container {width: 100%;max-width: 1200px;margin-left: auto;margin-right: auto;box-sizing: border-box;}

.board-header-wrapper { padding: 0px; }
.board_list_container, .view_container, .prev_next {background: var(--bd-bg-white);border: 1px solid var(--bd-border-light);border-radius: var(--bd-radius-lg);box-shadow: var(--bd-shadow-card);overflow: hidden;}
.after_box { margin: 30px auto; padding: 0; }



/* ==========================================
   2. 버튼 공통 스타일 및 액션 버튼
   ================================---------- */
.search-action-btn,
.wr-action-btn {display: inline-flex;align-items: center;justify-content: center;height: 44px;padding: 0 24px;font-size: 15px;font-weight: 700;color: var(--bd-bg-white);border-radius: var(--bd-radius-md);cursor: pointer;user-select: none;box-sizing: border-box;transition: background-color 0.2s ease, transform 0.1s ease;}
.search-action-btn {background-color: var(--bd-color-primary);text-decoration: none;}
.search-action-btn:hover { background-color: var(--bd-color-primary-hover); }
.search-action-btn:active { transform: scale(0.98); }
.wr-action-btn {background-color: var(--bd-color-slate-btn);text-decoration: none !important;white-space: nowrap;}
.wr-action-btn:hover { background-color: var(--bd-color-slate-hover); color: var(--bd-bg-white); }
.wr-action-btn:active { transform: scale(0.98); }


/* ==========================================
   3. 링크(a 태그) 기본 초기화 및 공통 처리
   ================================---------- */
.board_row_idx a,
.board_row_idx a:hover,
.board_row_idx a:focus,
.board_row_idx a:active,
.col_tit a,
.col_tit_1 a,
.prev_next dd a,
.after_card {text-decoration: none;}

.board_row_idx a { outline: none; }

.col_tit a,
.col_tit_1 a {color: var(--bd-text-main);display: inline-flex;align-items: center;max-width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: color 0.15s ease;}
.col_tit a:hover,
.col_tit_1 a:hover {color: var(--bd-color-notice);text-decoration: none;}


/* ==========================================
   4. 게시판 헤더 및 검색 폼 영역
   ================================---------- */
.board-header-row { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 30px 0; gap: 20px; box-sizing: border-box; }
.title-com { display: flex; align-items: center; font-size: 24px; font-weight: 700; color: var(--bd-text-main); letter-spacing: -0.5px; line-height: 1.3; }
.title-com::before { content: ''; display: inline-block; width: 5px; height: 22px; background-color: var(--bd-color-primary); border-radius: var(--bd-radius-sm); margin-right: 12px; flex-shrink: 0; }

.search-form-row { display: flex; align-items: center; gap: 8px; margin: 0; }
.w-select { position: relative; min-width: 100px; }
.w-input { width: 250px; box-sizing: border-box; }
.w-btn-box { flex-shrink: 0; }


/* ==========================================
   5. 게시판 리스트 및 테이블 구조
   ================================---------- */
.board_header_idx { display: flex; align-items: center; background-color: var(--bd-bg-light); border-bottom: 1px solid var(--bd-border-light); padding: 16px 0; font-weight: 700; text-align: center; font-size: 15px; color: var(--bd-text-sub); border-top-left-radius: 11px; border-top-right-radius: 11px; }
.board_row_idx { display: flex; align-items: center; border-bottom: 1px dashed var(--bd-border-light); padding: 18px 0; text-align: center; font-size: 15px; color: var(--bd-text-main); transition: background-color 0.15s ease; }
.board_list_container .board_row_idx:last-child { border-bottom: none; }

.board_row_idx.notice_recom { background-color: var(--bd-bg-recom); }
.board_row_idx.notice_recom:hover { background-color: var(--bd-bg-recom-hover); }

/* 공지사항 컬럼 크기 */
.col_no { width: 8%; display: flex; justify-content: center; align-items: center; }
.col_nt { width: 8%; display: flex; justify-content: center; align-items: center; font-weight: 700; color: var(--bd-color-notice); }
.col_tit { width: 69%; text-align: left; padding-left: 15px; box-sizing: border-box; }
.col_date { width: 13%; display: flex; justify-content: center; align-items: center; }
.col_hit { width: 10%; display: flex; justify-content: center; align-items: center; }

/* 상담문의 컬럼 크기 */
.col_no_1 { width: 8%; display: flex; justify-content: center; align-items: center; }
.col_nt_1 { width: 8%; display: flex; justify-content: center; align-items: center; font-weight: 700; color: var(--bd-color-notice); }
.col_tit_1 { width: 62%; text-align: left; padding-left: 15px; box-sizing: border-box; }
.col_name_1 { width: 10%; display: flex; justify-content: center; align-items: center; }
.col_date_1 { width: 10%; display: flex; justify-content: center; align-items: center; }
.col_hit_1 { width: 10%; display: flex; justify-content: center; align-items: center; }

.subject_n { font-weight: 500; color: var(--bd-color-notice); }
.subject_n_text { font-weight: 500; color: var(--bd-color-notice) !important; }

.none_list_idx { width: 100%; text-align: center; padding: 150px 0; color: var(--bd-text-muted); font-size: 18px; background-color: var(--bd-bg-white); font-weight: 400; }
.title_gap { padding: 10px 0 0 0; }
.xi-bookmark { display: none !important; }


/* ==========================================
   6. 페이지네이션 (Pagination)
   ================================---------- */
.paginate { font-size: 13px; margin: 30px 0; text-align: center; line-height: normal; clear: both; display: flex; justify-content: center; align-items: center; gap: 5px; user-select: none; }
.paginate a,
.paginate strong { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; background: var(--bd-bg-white); border: 1px solid var(--bd-border-medium); color: var(--bd-text-sub); font-weight: 500; text-decoration: none; vertical-align: middle; border-radius: var(--bd-radius-btn); box-sizing: border-box; transition: all 0.2s ease-in-out; }
.paginate a:hover,
.paginate a:active,
.paginate a:focus { color: var(--bd-color-orange-active); background: var(--bd-color-orange-bg); border-color: var(--bd-color-orange-active); border-radius: var(--bd-radius-btn); }
.paginate strong { color: var(--bd-bg-white) !important; background: var(--bd-color-orange-active); border: 1px solid var(--bd-color-orange-active); font-weight: 700; border-radius: var(--bd-radius-btn); }
.paginate a.direction { background: var(--bd-bg-white); border: 1px solid var(--bd-border-light); color: var(--bd-color-slate-muted); border-radius: var(--bd-radius-btn); }
.paginate a.direction:hover { color: var(--bd-color-orange-active); background: var(--bd-color-orange-bg); border-color: var(--bd-color-orange-active); }
.paginate span.direction { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; background: var(--bd-bg-muted); border: 1px solid var(--bd-border-light); color: var(--bd-color-slate-muted); border-radius: var(--bd-radius-btn); cursor: not-allowed; }


/* ==========================================
   7. 뱃지 (Badge) 컴포넌트
   ================================---------- */
.badge-line { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; border-radius: var(--bd-radius-btn); box-sizing: border-box; }
.status-notice { background-color: var(--bd-badge-notice-bg); color: var(--bd-color-primary); border: 1px solid var(--bd-badge-notice-border); padding: 2px 20px 3px 20px; }
.status-replied { background-color: var(--bd-badge-replied-bg); color: var(--bd-badge-replied-text); border: 1px solid var(--bd-badge-replied-border); padding: 2px 10px 3px 10px; }
.status-waiting { background-color: var(--bd-bg-light); color: var(--bd-color-slate-muted); border: 1px solid var(--bd-border-light); padding: 2px 10px 3px 10px; }


/* ==========================================
   8. 비밀번호 확인 팝업 및 레이어
   ================================---------- */
.pop_pass_box { max-width: 350px; margin: 0 auto; padding: 24px; text-align: center; background-color: var(--bd-bg-white); box-sizing: border-box; }
.pop_pass_content { display: flex; flex-direction: column; gap: 18px; }
.pop_pass_input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); font-size: 16px !important; color: var(--bd-text-main); background-color: var(--bd-bg-white); box-sizing: border-box; transition: var(--bd-transition-fast); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.pop_pass_input:focus, .select_basic:focus { outline: none; border-color: var(--bd-color-blue); }

.pop_pass_btn { width: 100%; max-width: 380px; padding: 12px; font-size: 15px; font-weight: 500; color: var(--bd-bg-white); background-color: var(--bd-color-blue); border: 1px solid var(--bd-color-blue); border-radius: var(--bd-radius-btn); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; box-sizing: border-box; }
.pop_pass_btn:hover { background-color: var(--bd-color-blue-hover); border-color: var(--bd-color-blue-hover); }

.delete_password_layer { display: none; position: absolute; right: 0; top: 32px; z-index: 20; background: var(--bd-bg-white); border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); overflow: hidden; }
.delete_password_layer iframe { width: 300px; height: 220px !important; border: none; }

.password_popup_card { width: 100%; max-width: 300px; margin: 0 auto; padding: 20px 16px; background-color: var(--bd-bg-white); border-radius: var(--bd-radius-lg); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.popup_title_zone { text-align: center; margin-bottom: 18px; }
.popup_title_zone h3 { margin: 0 0 6px 0; font-size: 17px; font-weight: 700; color: var(--bd-text-main); letter-spacing: -0.3px; }
.popup_title_zone p { margin: 0; font-size: 14px; color: var(--bd-color-slate-muted); line-height: 1.4; word-break: keep-all; }
.popup_content_zone { display: flex; flex-direction: column; gap: 14px; }

.input_wrapper { position: relative; width: 100%; }
.modern_input { width: 100%; height: 42px; padding: 0 12px; background-color: var(--bd-bg-light); border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); font-size: 14px; color: var(--bd-color-slate-main); outline: none; box-sizing: border-box; transition: var(--bd-transition-fast); }
.modern_input:focus { background-color: var(--bd-bg-white); border-color: var(--bd-color-slate-main); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08); }
.modern_input::placeholder { color: var(--bd-text-muted); }

.popup_action_buttons { display: flex; gap: 8px; width: 100%; }
.btn_action_confirm,
.btn_action_cancel { flex: 1; height: 42px; border: none; border-radius: var(--bd-radius-md); font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--bd-transition-fast); display: inline-flex; align-items: center; justify-content: center; }

.btn_action_confirm { background-color: var(--bd-color-blue); color: var(--bd-bg-white); }
.btn_action_confirm:hover { background-color: var(--bd-color-blue-hover); }
.btn_action_confirm:active { transform: scale(0.97); }

.btn_action_cancel { background-color: var(--bd-bg-muted); color: var(--bd-color-slate-btn); border: 1px solid var(--bd-border-medium); }
.btn_action_cancel:hover { background-color: var(--bd-border-light); color: var(--bd-color-slate-main); }
.btn_action_cancel:active { transform: scale(0.97); }


/* ==========================================
   9. 입력 폼 및 인라인 그룹 (Form Controls)
   ================================---------- */
.input-inline-group input[name="writer"],
.input-inline-group input[name="user_name"] { width: 220px !important; }
.input-inline-group select[name="res_hp1"],
.input-inline-group select[name="hp_tel1"] { width: 100px !important; }
.input-inline-group input[name="res_hp2"],
.input-inline-group input[name="res_hp3"],
.input-inline-group input[name="hp_tel1"],
.input-inline-group input[name="hp_tel2"],
.input-inline-group input[name="hp_tel3"] { width: 100px !important; }
.input-inline-group input[name="email"] { width: 40% !important; }
.input-inline-group input[name="title"] { width: 100% !important; }
.input-inline-group textarea[name="content"],
.input-inline-group textarea[name="textarea_order"] { width: 100% !important; }
.input-inline-group input[name="password"],
.input-inline-group input[name="captchacode"] { width: 150px !important; }

.input-inline-group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.input-inline-group #imgCaptcha { height: 28px; vertical-align: middle; border-radius: var(--bd-radius-sm); }
.bor_captcha_refresh { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 44px; padding: 0 13px; font-size: 15px; color: var(--bd-text-sub); background-color: var(--bd-bg-muted); border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.bor_captcha_refresh:hover { background-color: var(--bd-border-light); }

.input-inline-group input[name="food_nm"] { width: 300px !important; }
.input-inline-group input[name="area_nm"] { width: 400px !important; }
.input-inline-group input[name="s_ymd"],
.input-inline-group input[name="e_ymd"] { width: 170px !important; margin: 0 10px 0 0; }
.input-inline-group input[name="hope_term"],
.input-inline-group input[name="adult_cnt"],
.input-inline-group input[name="child_cnt"],
.input-inline-group input[name="baby_cnt"] { width: 50px !important; }
.input-inline-group input[name="hope_price"] { width: 170px !important; }
.input-inline-group input[name="active"] { width: 350px !important; }
.input-inline-group .datepicker { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); font-size: 15px; color: var(--bd-text-main); box-sizing: border-box; transition: var(--bd-transition-fast); -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--bd-bg-white) url('/images/goods/ico_calander.png') no-repeat; background-position: calc(100% - 15px) center; cursor: pointer; }


/* ==========================================
   10. 약관 동의 및 마케팅 테이블
   ================================---------- */
.agree_container { border: 1px solid var(--bd-border-light); padding: 20px; border-radius: var(--bd-radius-lg); background-color: var(--bd-bg-light); box-shadow: var(--bd-shadow-card); box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.agree_container:hover { border-color: var(--bd-border-medium); box-shadow: var(--bd-shadow-hover); }
.agree_scroll_box { width: 100%; height: 140px; overflow-y: auto; font-size: 14px; line-height: 1.7; color: var(--bd-text-sub); padding-right: 10px; box-sizing: border-box; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.agree_scroll_box p, 
.agree_scroll_box div { margin: 0 0 8px 0; word-break: keep-all; }
.agree_scroll_box p strong { color: var(--bd-text-main); font-size: 15px; display: inline-block; margin-top: 10px; word-break: keep-all; }
.agree_scroll_box .pt10 { height: 10px; }

.agree_scroll_box::-webkit-scrollbar { width: 6px; }
.agree_scroll_box::-webkit-scrollbar-track { background-color: var(--bd-bg-muted); border-radius: var(--bd-radius-sm); }
.agree_scroll_box::-webkit-scrollbar-thumb { background-color: var(--bd-border-medium); border-radius: var(--bd-radius-sm); }
.agree_scroll_box::-webkit-scrollbar-thumb:hover { background-color: var(--bd-text-muted); }

.b-marketing-table { width: 100%; margin: 10px 0; border: 1px solid var(--bd-border-light); border-radius: 10px; overflow: hidden; background-color: var(--bd-bg-white); }
.b-marketing-table .table-thead { display: flex; background-color: var(--bd-bg-light); border-bottom: 1px solid var(--bd-border-light); font-weight: 500; color: var(--bd-color-slate-dark); text-align: center; }
.b-marketing-table .table-thead .th-cell { padding: 10px 10px; font-size: 14px; }
.b-marketing-table .tb-row { display: flex; border-bottom: 1px solid var(--bd-bg-muted); }
.b-marketing-table .tb-row:last-child { border-bottom: none; }
.b-marketing-table .td-cell { padding: 10px 12px; font-size: 14px; display: flex; align-items: center; color: var(--bd-text-sub); word-break: keep-all; line-height: 1.5; }
.b-marketing-table .th-cell:nth-child(1), .b-marketing-table .item-fields { flex: 2; }
.b-marketing-table .th-cell:nth-child(2), .b-marketing-table .item-purpose { flex: 3; }
.b-marketing-table .th-cell:nth-child(3), .b-marketing-table .item-period { flex: 3; }
.mobile-th { display: none; }


/* ==========================================
   11. 상세 보기 및 이전/다음글 영역
   ================================---------- */
.view_header { padding: 25px 25px; background-color: var(--bd-bg-light); border-bottom: 1px solid var(--bd-border-light); }
.view_subject { margin: 0; font-size: 18px; font-weight: 700; color: var(--bd-text-main); line-height: 1.4; word-break: keep-all; }
.view_content { padding: 20px 20px; min-height: 250px; font-size: 16px; line-height: 1.8; color: var(--bd-text-main); word-break: break-all; box-sizing: border-box; }
.view_content p,
.view_content figure,
.view_content div { max-width: 100% !important; }
.view_content img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; margin: 0 auto; border-radius: var(--bd-radius-md); }

.view_file {padding: 12px 20px;background-color: var(--bd-bg-light, #f9f9f9);border-top: 1px solid var(--bd-border-light);font-size: 14px;display: flex;justify-content: flex-end;gap: 15px;align-items: center;}
.view_file span a {display: inline-flex;align-items: center;gap: 5px;color: var(--bd-text-main);text-decoration: none;}
.view_file span a:hover {text-decoration: underline;}

.prev_next dl { display: flex; align-items: center; margin: 0; padding: 14px 20px; font-size: 15px; background-color: var(--bd-bg-white); transition: background-color 0.15s ease; }
.prev_next dl.prev { border-bottom: 1px dashed var(--bd-border-light); }
.prev_next dt { width: 60px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background-color: #F1F3F5; color: #636d76; font-size: 13px; font-weight: 500; border: 1px solid #dee2e6; border-radius: var(--bd-radius-btn); flex-shrink: 0; }
.prev_next dd { margin: 0; margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--bd-border-light); flex: 1; min-width: 0; overflow: hidden; }
.prev_next dd.no_data { color: var(--bd-text-muted); }
.prev_next dd a { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bd-text-main); transition: color 0.15s ease; }
.prev_next dd a:hover { color: var(--bd-color-primary); }

.meta-container { display: flex; flex-wrap: wrap; padding: 10px 25px; font-size: 14px; color: var(--bd-text-sub); border-bottom: 1px solid var(--bd-border-light); }
.meta-item { display: inline-flex; align-items: center; white-space: nowrap; margin-right: 15px; }
.meta-item:last-child { margin-right: 0; }


/* ==========================================
   12. 댓글 및 답글 영역
   ================================---------- */
.reply-list,
.comment_list_container { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }

.reply-item,
.comment_item { border: 1px solid var(--bd-border-light); padding: 20px; border-radius: var(--bd-radius-lg); background-color: var(--bd-bg-light); box-shadow: var(--bd-shadow-card); box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.comment_item { background-color: var(--bd-bg-white); border-color: #E5E7EB; }
.comment_item:hover { border-color: var(--bd-border-medium); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04); }

.reply-header,
.comment_header { display: flex; align-items: center; margin-bottom: 12px; }
.reply-header { gap: 8px; }
.comment_header { justify-content: space-between; }

.reply-header img { width: 20px; height: 20px; object-fit: cover; }
.reply-header .reply-author { font-size: 16px; font-weight: 700; color: var(--bd-text-main); }
.reply-header .reply-badge { font-size: 13px; font-weight: 700; color: #3A6CD9; background-color: #EFF6FF; border: 1px solid #BFDBFE; padding: 1px 6px; border-radius: var(--bd-radius-sm); }

.reply-content,
.comment_body { margin-bottom: 12px; }
.comment_body { margin-bottom: 5px; }

.reply-content { font-size: 15px; line-height: 1.7; color: var(--bd-text-main); word-break: keep-all; overflow-wrap: break-word; }
.reply-footer { font-size: 14px; color: var(--bd-color-slate-muted); }

.author_profile { display: flex; align-items: center; gap: 8px; }
.author_profile .profile_icon { width: 40px; height: 40px; background-color: var(--bd-bg-muted); color: var(--bd-text-sub); font-size: 17px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.author_profile .author_name { font-size: 15px; font-weight: 500; color: var(--bd-text-main); }
.comment_date { font-size: 14px; color: var(--bd-text-muted); }

.comment_text { font-size: 15px; line-height: 1.7; color: var(--bd-color-slate-btn); word-break: break-all; }
.comment_footer { display: flex; justify-content: flex-end; }
.comment_delete_wrap { position: relative; }

.btn_comment_delete { display: inline-flex; align-items: center; gap: 4px; background: var(--bd-bg-light); border: 1px solid var(--bd-border-light); color: var(--bd-color-slate-muted); font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: var(--bd-radius-btn); cursor: pointer; transition: var(--bd-transition-fast); }
.btn_comment_delete:hover { color: var(--bd-color-danger); background-color: #FEF2F2; border-color: #FCA5A5; }
.ico_trash { width: 14px; height: 14px; }
.comment_empty { padding: 40px 20px; text-align: center; font-size: 14px; color: var(--bd-text-muted); background-color: var(--bd-bg-light); border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-lg); }

/* 댓글 작성 폼 */
.reply_form_wrapper { display: block; margin-top: 30px; width: 100%; }
.reply_form_container { background-color: var(--bd-bg-light); border: 1px solid #E5E7EB; border-radius: var(--bd-radius-lg); padding: 20px; box-sizing: border-box; }
.reply_meta_grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 16px; }
.reply_input_box,
.reply_captcha_wrapper { display: flex; flex-direction: column; gap: 6px; }

.input_label { font-size: 15px; font-weight: 700; color: var(--bd-text-sub); }
.reply_input_text.width_160 { width: 160px !important; height: 42px; padding: 0 12px; background-color: var(--bd-bg-white); border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); font-size: 15px; color: var(--bd-color-slate-main); outline: none; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.reply_input_text.width_160:focus { border-color: var(--bd-text-sub); box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1); }
.reply_input_text.width_160::placeholder { color: var(--bd-text-muted); }

.captcha_flex_row { display: flex; align-items: center; gap: 6px; }
.captcha_img_group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.captcha_image_zone { height: 42px; border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); overflow: hidden; background: var(--bd-bg-white); flex-shrink: 0; }
.captcha_image_zone img { height: 100%; width: auto; display: block; }

.btn_captcha_refresh { width: 42px; height: 42px; padding: 0; background: var(--bd-bg-white); border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); cursor: pointer; font-size: 16px; color: var(--bd-text-sub); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.2s ease; }
.btn_captcha_refresh:hover { background-color: var(--bd-bg-muted); }

.reply_body_wrapper { display: flex; gap: 12px; }
.textarea_inner { flex: 1; }
.textarea_inner textarea { width: 100%; height: 90px; padding: 12px; background-color: var(--bd-bg-white); border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); font-size: 15px; color: var(--bd-text-main); line-height: 1.5; resize: vertical; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; }
.textarea_inner textarea:focus { border-color: var(--bd-color-blue); }
.textarea_inner textarea::placeholder { color: var(--bd-text-muted); }

.submit_button_inner { width: 120px; flex-shrink: 0; }
.btn_reply_submit { width: 100%; height: 90px; background-color: var(--bd-text-sub); color: var(--bd-bg-white); border: none; border-radius: var(--bd-radius-md); font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }
.btn_reply_submit:hover { background-color: var(--bd-color-slate-btn); }
.btn_reply_submit:active { transform: scale(0.98); }


/* ==========================================
   13. 여행후기 카드 레이아웃
   ================================---------- */
.after_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 24px; }
.after_card { display: flex; flex-direction: column; background: var(--bd-bg-white); overflow: hidden; cursor: pointer; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.after_card .photo_wrap { position: relative; width: 100%; padding-top: 62.5%; flex-shrink: 0; border-radius: var(--bd-radius-lg); overflow: hidden; }
.after_card .photo_wrap:hover img { transform: scale(1.08); filter: brightness(0.75); }
.after_card .photo_wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(1); transition: transform 0.5s ease, filter 0.5s ease; }
.after_card .text_wrap { width: 100%; height: 240px; padding: 24px; flex-shrink: 0; background-color: var(--bd-bg-light); border: 1px solid var(--bd-border-light); border-radius: var(--bd-radius-lg); box-sizing: border-box; overflow: hidden; }
.after_card .detail { font-size: 15px; color: var(--bd-text-sub); line-height: 1.7; text-align: justify; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.after_card .card_info { padding: 15px 0px 0px 0px; container-type: inline-size; }
.after_card .subject { font-size: 17px; font-weight: 500; color: var(--bd-text-main); line-height: 1.4; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.after_card .meta_row { display: flex; justify-content: space-between; align-items: center; }
.after_card .day { font-size: 14px; color: var(--bd-text-muted); }
.after_card .reply_badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 4px 8px; background-color: var(--bd-badge-reply-bg); border: 1px solid var(--bd-badge-reply-border); border-radius: var(--bd-radius-pill); font-size: 12px; font-weight: 700; color: var(--bd-badge-reply-text); line-height: 1; }
.after_card .reply_badge .badge_icon { font-size: 11px; transform: translateY(-0.5px); }


/* ==========================================
   14. 기타 유틸리티 및 에디터, 파일 첨부
   ================================---------- */
.responsive_board_img { width: 200px; height: auto; display: block; border-radius: var(--bd-radius-md) !important; }

.file_input_wrap { display: inline-flex; align-items: center; gap: 8px; width: 100%; max-width: 450px; }
.file_input_wrap .file_name { flex: 1; height: 44px; padding: 0 15px; background-color: var(--bd-bg-light); border: 1px solid var(--bd-border-medium); border-radius: var(--bd-radius-md); font-size: 15px; color: var(--bd-color-slate-btn); box-sizing: border-box; outline: none; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file_input_wrap .btn_file { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; background-color: var(--bd-text-sub); color: var(--bd-bg-white); font-size: 15px; font-weight: 500; border-radius: var(--bd-radius-md); cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, transform 0.1s ease; user-select: none; }
.file_input_wrap .btn_file:hover { background-color: var(--bd-color-slate-btn); }
.file_input_wrap .btn_file:active { transform: scale(0.98); }
.file_input_wrap .real_file_input { display: none !important; }

.editor_wrap { padding: 0px 0; width: 100%; }
.editor_wrap .editor_textarea { width: 100%; min-width: 100%; height: 500px; display: none; }
.editor_wrap iframe,
.editor_wrap .se2_input_area,
.editor_wrap .husky_seditor_editing_area_container { border-radius: var(--bd-radius-lg) !important; border: 1px solid var(--bd-border-medium) !important; overflow: hidden !important; }
.editor_wrap .se2_tool { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; border-bottom: 1px solid var(--bd-border-light) !important; }


/* ==========================================
   15. 자주 묻는 질문 (FAQ)
   ================================---------- */
.faq_wrapper { border: none; }
#faq_main { display: flex; flex-direction: column; gap: 12px; }
.faq_item { background-color: var(--bd-bg-white); border: 1px solid var(--bd-border-light); border-radius: var(--bd-radius-lg); overflow: hidden; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03); transition: var(--bd-transition-accord); }
.faq_item:last-child { border-bottom: 1px solid var(--bd-border-light); }

#faq_main .title { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; font-size: 17px; font-weight: 500; color: var(--bd-text-main); line-height: 1.5; cursor: pointer; background-color: var(--bd-bg-white); transition: var(--bd-transition-accord); word-break: break-all; }
#faq_main .title .num_prefix { color: var(--bd-color-teal); font-weight: 700; margin-right: 15px; flex-shrink: 0; }
#faq_main .title .title_txt { flex-grow: 1; padding-right: 20px; }
#faq_main .title .icon_arrow { width: 22px; height: 22px; fill: none; stroke: #9ca3af; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s; flex-shrink: 0; }

#faq_main .faq_item.active { border-color: var(--bd-border-active); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.06); }
#faq_main .faq_item.active .title { background-color: var(--bd-bg-light); color: var(--bd-color-teal); }
#faq_main .faq_item.active .icon_arrow { transform: rotate(180deg); stroke: var(--bd-color-teal); }
#faq_main .answer { display: none; padding: 20px 28px 25px 60px; font-size: 15px; color: var(--bd-text-main); line-height: 1.8; background-color: var(--bd-bg-light); border-top: 1px dashed var(--bd-border-active); word-break: break-all; }
#faq_main .title:hover { background-color: var(--bd-bg-light); color: var(--bd-color-teal); }
#faq_main .title:hover .icon_arrow { stroke: var(--bd-color-teal); }


/* ==========================================
   16. 미디어 쿼리 (반응형 그룹화)
   ================================---------- */

/* 1280px 이하 */
@media (max-width: 1280px) {
    .board-header-row { margin: 25px 0; padding: 0 0px; }
    .title-com { font-size: 22px; }
    .title-com::before { height: 19px; }
    .w-input { width: 240px; }
    .search-action-btn,
    .wr-action-btn { padding: 0 18px; }
}

/* 1024px 이하 */
@media (max-width: 1024px) {
    .board-header-row { margin: 20px 0; padding: 0 15px; gap: 12px; }
    .title-com { font-size: 20px; }
    .title-com::before { height: 18px; margin-right: 10px; }
    .w-select { min-width: 90px; }
    .w-input { width: 230px; }
    .search-action-btn,
    .wr-action-btn { height: 42px; padding: 0 16px; font-size: 14px; }

    .board_list_container { width: calc(100% - 30px); margin: 0 auto; }
    .board_header_idx { padding: 14px 0; font-size: 14px; }
    .board_row_idx { padding: 15px 0; font-size: 14px; }

    .col_no, .col_nt { width: 7%; }
    .col_tit { width: 70%; }
    .col_date { width: 13%; }
    .col_hit { width: 10%; }

    .col_no_1, .col_nt_1 { width: 7%; }
    .col_tit_1 { width: 60%; }
    .col_name_1 { width: 12%; }
    .col_date_1 { width: 11%; }
    .col_hit_1 { width: 10%; }
 
    .paginate { margin: 25px 0; gap: 4px; }
    .paginate a,
    .paginate strong,
    .paginate span { min-width: 32px; height: 32px; padding: 0 6px; font-size: 13px; }
    .none_list_idx { padding: 100px 0; font-weight: 400; }

    .view_container,
    .prev_next { width: calc(100% - 0px); margin-left: auto; margin-right: auto; }
    .view_header { padding: 18px 20px; }
    .view_subject { font-size: 17px; }
    .view_content { padding: 20px 20px; min-height: 220px; font-size: 15px; line-height: 1.7; }
    .prev_next dl { padding: 14px 20px; }

    .after_box { padding: 0 15px; margin: 30px auto; }
    .after_grid { grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
    .after_card .text_wrap { height: 200px; padding: 20px; }
    .after_card .detail { -webkit-line-clamp: 6; }
}

/* 820px 이하 */
@media (max-width: 820px) {
    .after_box { padding: 0 15px; margin: 30px auto; }
    .after_grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
    .after_card .text_wrap { height: 210px; padding: 20px; }
    .after_card .detail { -webkit-line-clamp: 6; }

    .view_file {flex-direction: column !important;align-items: flex-start !important;gap: 8px !important;}
}

/* 768px 이하 (태블릿 세로 및 모바일 공통) */
@media (max-width: 768px) {
    .board-header-wrapper { padding-top: 5px; }
    .board-header-row { flex-direction: column; align-items: flex-start; margin: 15px 0; padding: 0 15px; gap: 12px; }
    .title-com { font-size: 18px; }
    .title-com::before { height: 18px; margin-right: 8px; }
    .search-form-row { width: 100%; flex-wrap: wrap; gap: 6px; }
    .w-select { flex: none; width: 90px; min-width: 0 !important; }
    .w-select select { width: 100%; box-sizing: border-box; font-size: 14px; }
    .w-input { flex: 1; width: 100%; min-width: 0; } 
    .w-btn-box { display: flex; gap: 6px; }
    .search-action-btn { padding: 0 16px; font-size: 14px; }
    .wr-action-btn { padding: 0 14px; font-size: 14px; }

    .board_list_container_wrapper { padding: 5px 15px 0px 15px; width: 100%; box-sizing: border-box; }
    .board_list_container, .my_list_container { width: 100%; box-sizing: border-box; }
    .board_header_idx { display: none; }
    .board_row_idx { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 16px 15px; position: relative; box-sizing: border-box; }
    .board_row_idx.notice_recom:first-child,
    .board_row_idx.notice_recom:nth-child(2) { border-top-left-radius: 11px; border-top-right-radius: 11px; }

    .col_no, .col_nt, .col_hit { display: none !important; }
    .col_tit { width: 100% !important; padding-left: 0 !important; font-size: 15px; line-height: 1.45; margin-bottom: 5px; box-sizing: border-box; }
    .col_tit a { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .col_date { display: block !important; width: 100% !important; font-size: 13px; color: var(--bd-text-muted); white-space: nowrap !important; overflow: visible !important; text-align: left !important; }
    .col_date span { display: inline-block !important; white-space: nowrap !important; }

    .col_no_1, .col_nt_1 { display: none !important; }
    .col_tit_1 { width: 100% !important; padding-left: 0 !important; font-size: 15px; line-height: 1.45; margin-bottom: 5px; box-sizing: border-box; }
    .col_tit_1 a { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .col_name_1 { width: auto !important; display: block !important; font-size: 14px; color: var(--bd-text-muted); text-align: left !important; margin-bottom: 4px; }
    .col_date_1 { width: auto !important; display: block !important; font-size: 13px; color: var(--bd-text-muted); text-align: left !important; }
    .col_hit_1 { position: absolute; right: 16px; bottom: 14px; width: auto !important; }
 
    .badge-line { padding: 1px 8px 2px 8px; font-size: 12px; }
    .mobile_notice_badge { display: inline-block; background-color: var(--bd-color-primary); color: var(--bd-bg-white); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: var(--bd-radius-sm); margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
    .xi-bell-o { display: inline-block !important; }

    .paginate { margin-top: 25px; gap: 3px; }
    .paginate a, 
    .paginate strong, 
    .paginate span,
    .paginate .on { min-width: 32px; height: 32px; font-size: 13px; }
    .none_list_idx { padding: 100px 0; font-weight: 400; }

    .input-inline-group input[name="writer"],
    .input-inline-group input[name="email"],
    .input-inline-group input[name="title"],
    .input-inline-group textarea[name="content"],
    .input-inline-group input[name="password"],
    .input-inline-group input[name="user_name"],
    .input-inline-group input[name="food_nm"],
    .input-inline-group input[name="area_nm"],
    .input-inline-group input[name="hope_price"],
    .input-inline-group textarea[name="textarea_order"],
    .input-inline-group input[name="active"] { flex: none !important; width: 100% !important; min-width: 0 !important; }

    .input-inline-group select[name="res_hp1"],
    .input-inline-group select[name="hp_tel1"],
    .input-inline-group input[name="hp_tel1"] { flex: 2 1 0% !important; width: 0 !important; min-width: 0 !important; box-sizing: border-box; }
    
    .input-inline-group input[name="res_hp2"],
    .input-inline-group input[name="res_hp3"],
    .input-inline-group input[name="hp_tel2"],
    .input-inline-group input[name="hp_tel3"] { flex: 4 1 0% !important; width: 0 !important; min-width: 0 !important; box-sizing: border-box; }

    .input-inline-group input[name="s_ymd"] { width: 130px !important; margin: 0 7px 0 0; box-sizing: border-box; }
    .input-inline-group input[name="e_ymd"] { width: 130px !important; margin: 0 7px 0 0; box-sizing: border-box; }
    .input-inline-group input[name="hope_term"] { width: 40px !important; box-sizing: border-box; }

    .input-inline-group input[name="captchacode"] { flex: 1 1 0% !important; width: 0 !important; min-width: 0 !important; }
    .input-inline-group #imgCaptcha,
    .bor_captcha_refresh { flex: none !important; }
    .bor_captcha_refresh { padding: 0 8px; font-size: 14px; font-weight: 700; gap: 2px; }

    .input-inline-group .datepicker { padding: 0 10px; font-size: 16px; background-position: calc(100% - 7px) center; letter-spacing: -0.5px; }

    .agree_container { padding: 14px; border-radius: 10px; }
    .agree_scroll_box { height: 120px; font-size: 13px; padding-right: 6px; }
    .agree_scroll_box p strong { font-size: 14px; color: var(--bd-color-slate-dark); margin-top: 10px; }
    
    .b-marketing-table { border: none; background: transparent; margin: 0px 0; }
    .b-marketing-table .table-thead { display: none; }
    .b-marketing-table .tb-row { display: flex; flex-direction: column; gap: 10px; background: var(--bd-bg-white); border: 1px solid var(--bd-border-light); border-radius: var(--bd-radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); }
    .b-marketing-table .td-cell { display: flex; align-items: flex-start; padding: 2px 0; font-size: 13px; line-height: 1.5; border: none; width: 100%; }
    .mobile-th { display: inline-flex; align-items: center; justify-content: center; width: 90px; box-sizing: border-box; font-weight: 700; color: var(--bd-text-sub); font-size: 13px; flex-shrink: 0; background-color: var(--bd-bg-muted); padding: 4px 0; border-radius: var(--bd-radius-btn); margin-right: 12px; text-align: center; }
    .item-fields, .item-period { color: var(--bd-color-primary); }

    .view_container,
    .prev_next { width: calc(100% - 0px); }
    .view_header { padding: 15px 18px; }
    .view_subject { font-size: 16px; line-height: 1.45; width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: break-word; box-sizing: border-box; }
    .view_content { padding: 18px 18px; min-height: 180px; font-size: 15px; line-height: 1.7; }
    .view_content img { margin: 0px 0; }

    .prev_next dl { padding: 12px 14px; font-size: 13px; }
    .prev_next dt { width: 52px; height: 26px; font-size: 12px; }
    .prev_next dd { margin-left: 10px; padding-left: 10px; }
    .meta-container { padding: 10px 18px; font-size: 13px; }

    .reply-list { margin-top: 30px; }
    .reply-item { padding: 15px 18px; }
    .reply-header img { width: 18px; height: 18px; }
    .reply-header .reply-author { font-size: 15px; }
    .reply-content { font-size: 14px; line-height: 1.6; }
    .reply-footer { font-size: 13px; }

    .after_box { padding: 0 15px; margin: 20px auto; }
    .after_grid { grid-template-columns: repeat(1, 1fr); gap: 30px; }
    .after_card .text_wrap { height: 180px; padding: 18px; }
    .after_card .detail { font-size: 14px; -webkit-line-clamp: 5; }
    .after_card .subject { font-size: 16px; font-weight: 500; }
    .after_card .day { font-size: 14px; }

    .responsive_board_img { width: 100% !important; max-width: 100%; }
    .file_input_wrap .file_name { font-size: 14px; }
    .file_input_wrap .btn_file { font-size: 14px; font-weight: 700; }

    .editor_wrap .editor_textarea { height: 400px; }
    .editor_wrap #smart_editor2,
    .editor_wrap .husky_seditor_container { height: 400px !important; }
    .editor_wrap iframe,
    .editor_wrap textarea,
    .editor_wrap input,
    .editor_wrap select { font-size: 16px !important; -webkit-text-size-adjust: 100%; }

    .comment_list_container { gap: 10px; }
    .comment_item { padding: 16px; border-radius: 10px; }
    .comment_text { font-size: 14px; }
    .author_profile .profile_icon { width: 24px; height: 24px; font-size: 12px; }
    .author_profile .author_name { font-size: 14px; }
    .comment_date { font-size: 13px; }

    .reply_form_container { padding: 14px; border-radius: 10px; }
    .reply_meta_grid { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 12px; }
    .reply_input_box, .reply_captcha_wrapper { width: 100%; }
    .reply_input_box .reply_input_text.width_160 { width: 100% !important; }

    .captcha_flex_row { width: 100%; gap: 6px; }
    .captcha_img_group { flex-shrink: 0; }
    .captcha_image_zone { height: 42px; max-width: 130px; }
    .captcha_image_zone img { width: 100%; object-fit: contain; }
    .btn_captcha_refresh { width: 40px; height: 42px; }

    .captcha_code_input.width_160 { flex: 1 !important; width: 100% !important; min-width: 0; }
    .reply_body_wrapper { flex-direction: column; gap: 10px; }
    .textarea_inner textarea { height: 80px; }
    .submit_button_inner { width: 100%; }
    .btn_reply_submit { height: 46px; }
    .reply_input_text.width_160,
    .textarea_inner textarea { font-size: 16px !important; }

    .password_popup_card { padding: 18px 14px; border-radius: 12px; }
    .popup_title_zone h3 { font-size: 16px; }
    .popup_title_zone p { font-size: 12.5px; }
    .modern_input { font-size: 16px !important; height: 40px; }
    .btn_action_confirm,
    .btn_action_cancel { height: 40px; font-size: 14px; }

    .faq_container { margin: 16px auto; padding: 0 12px; }
    #faq_main { gap: 10px; }
    .faq_item { border-radius: 10px; }
    #faq_main .title { padding: 16px 16px; font-size: 15px; }
    #faq_main .title .num_prefix { margin-right: 10px; }
    #faq_main .title .title_txt { padding-right: 8px; }
    #faq_main .title .icon_arrow { display: block !important; width: 18px; height: 18px; }
    #faq_main .answer { padding: 16px 16px 20px 16px; font-size: 14px; line-height: 1.6; }
}

@media (max-width: 400px) {
    .input-inline-group input[name="s_ymd"] { width: 105px !important; margin: 0 4px 0 0; box-sizing: border-box; }
    .input-inline-group input[name="e_ymd"] { width: 105px !important; margin: 0 4px 0 0; box-sizing: border-box; }
    .input-inline-group input[name="hope_term"] { width: 40px !important; box-sizing: border-box; }

    .input-inline-group .datepicker {padding: 0 10px; font-size: 16px; background: var(--bd-bg-white) no-repeat; letter-spacing: -0.5px;}
    .input-inline-group input[name="adult_cnt"],
    .input-inline-group input[name="child_cnt"],
    .input-inline-group input[name="baby_cnt"] { width: 45px !important; }
}