@charset "utf-8";
/* ============================================================
biz_03 (HERITAGE) 테마 · 공통 스타일
- 색상변수 / 그누보드 공통 요소 / 헤더·푸터 / 서브배너 / 폼 / 표 / 페이징
- 메인페이지 전용 스타일은 css/main.css · 일반페이지는 css/page.css
- 게시판·회원 등 스킨 전용 스타일은 각 스킨의 style.css
※ 색을 바꾸려면 아래 :root 변수만 고치면 됩니다.
(--wine 이 포인트색 이름으로 남아 있지만 값은 이 테마의 골드입니다)
============================================================ */
:root{--porcelain:#FAF8F4;--white:#fff;--ink:#23211E;--graphite:#6E675D;--line:#E5DFD3;--wine:#8A6A3F;--wine-deep:#6E5432;--blush:#F1EAE0;--gold:#B08D57;--radius:0px;--max:1200px;--serif:'Noto Serif KR',serif;--sans:'Noto Sans KR',sans-serif;--latin:'Cormorant',serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.b03-lock{overflow:hidden}
body{font-family:var(--sans);color:var(--ink);background:var(--porcelain);line-height:1.75;font-weight:300;-webkit-font-smoothing:antialiased;word-break:keep-all}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
/* 본문(에디터로 쓴 글)은 예외 — 글 속 사진은 글자와 같은 줄에 놓이게 하고,
붙여넣은 넓은 표가 모바일에서 화면을 밀지 않게 한다 */
#bo_v_atc{overflow-x:auto}
#bo_v_atc table{max-width:100%}
#bo_v_atc img{display:inline-block;height:auto}ul,ol{list-style:none}button,input,select,textarea{font-family:inherit}button{cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* ============================================================
그누보드 공통 요소 (팝업창·버튼·표·폼·캡차 등)
코어와 기본 스킨이 쓰는 클래스를 biz_03 디자인으로 다시 그린 것.
※ 기본테마(basic)의 css 를 그대로 쓰면 글꼴크기가 em 기준이라
버튼·입력칸이 커지고 틀어진다. 그래서 px 기준으로 새로 썼다.
============================================================ */
/* 팝업레이어 (관리자 > 팝업레이어 설정) — 이 규칙이 없으면
'팝업레이어 알림' 제목이 화면 맨 위에 흰 띠로 보이면서 헤더를 밀어낸다 */
#hd_pop{position:relative;z-index:1000;margin:0 auto;height:0}
#hd_pop h2{position:absolute;width:0;height:0;font-size:0;line-height:0;overflow:hidden}
.hd_pops{position:absolute;border:1px solid var(--line);background:#fff;box-shadow:0 20px 50px -30px rgba(30,27,26,.6)}
.hd_pops img{max-width:100%}
.hd_pops_con{overflow:auto}
.hd_pops_footer{position:relative;padding:0;background:var(--ink);color:#fff;text-align:left}
.hd_pops_footer:after{content:"";display:block;clear:both}
.hd_pops_footer button{padding:11px 14px;border:0;background:none;color:#fff;font-size:13px}
.hd_pops_footer .hd_pops_reject{background:var(--ink);text-align:left}
.hd_pops_footer .hd_pops_close{position:absolute;top:0;right:0;background:var(--wine)}
.placeholdersjs{color:#B5ADA9 !important}
.is-hidden{display:none !important}
.is-visible{display:block !important}
.pc-only{display:none}
@media (min-width:769px){.pc-only{display:block !important}}
.mobile-only{display:block}
@media (min-width:769px){.mobile-only{display:none !important}}
/* 화면에 안 보이는 안내문 */
#hd_login_msg{position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only,.sound_only{display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
legend{position:absolute;width:0;height:0;font-size:0;line-height:0;overflow:hidden}
.img_fix{width:100%;height:auto}
/* 코어 버튼들 — 시안의 .btn 과 같은 결로 */
.btn_submit,button.btn_submit,input.btn_submit{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border:1px solid var(--wine);border-radius:var(--radius);background:var(--wine);color:#fff;font-size:14px;font-weight:400;letter-spacing:.04em;transition:.25s}
.btn_submit:hover{background:var(--wine-deep);border-color:var(--wine-deep);color:#fff}
.btn_close,a.btn_close,.btn_cancel,a.btn_cancel,button.btn_cancel{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border:1px solid var(--ink);border-radius:var(--radius);background:#fff;color:var(--ink);font-size:14px;font-weight:400;transition:.25s}
.btn_close:hover,.btn_cancel:hover{background:var(--ink);color:#fff}
.btn_confirm{display:flex;justify-content:center;gap:8px;margin-top:24px}
.btn_b01,a.btn_b01,.btn_b02,a.btn_b02,.btn_b03,a.btn_b03,.btn_b04,a.btn_b04,.btn01,a.btn01,button.btn01,.btn02,a.btn02,button.btn02,.btn_admin,a.btn_admin,.btn_frmline,button.btn_frmline,a.btn_frmline{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--graphite);font-size:13px;line-height:1;transition:.25s;white-space:nowrap}
.btn_b01:hover,.btn_b02:hover,.btn_b03:hover,.btn_b04:hover,.btn01:hover,.btn02:hover,.btn_frmline:hover,a.btn_b01:hover,a.btn_b02:hover,a.btn_b03:hover,a.btn_admin:hover,.btn_admin:hover{border-color:var(--wine);color:var(--wine);background:#FBF5F4}
.btn_cke_sc{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--graphite);font-size:12px}
.btn_info_toggle{display:block;margin:6px 0 0;border:0;background:none;color:var(--wine);font-size:12px;text-decoration:underline;text-underline-offset:3px}
/* 입력칸 공통 */
/* :where() 로 우선순위를 0 으로 둬서, 각 화면(.srch·.fld 등)의 모양이 이깁니다 */
:where(input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=search],select,textarea){border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);font-family:inherit;font-weight:300;font-size:15px}
:where(input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=search],select){height:48px;padding:0 14px}
:where(textarea){padding:13px 14px;line-height:1.8}
:where(select){padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--graphite) 50%),linear-gradient(135deg,var(--graphite) 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;-webkit-appearance:none;appearance:none}
.frm_input,.full_input,.half_input,.twopart_input{border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);font-size:15px;font-weight:300}
.frm_input{height:48px;padding:0 14px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--wine) !important;box-shadow:0 0 0 3px rgba(110,42,58,.07) !important}
:where(input,textarea)::placeholder{color:#B5ADA9}
:where(input[readonly],input[disabled],select[disabled],textarea[readonly]){background:#F4F1EE;color:#8B827E}
.full_input{width:100%}
.half_input{width:49%}
.twopart_input{width:140px}
.required,textarea.required{background-image:none}
.frm_info,.frm_info.add_info{display:block;margin-top:6px;color:#9A928E;font-size:12px;line-height:1.6}
input[type=checkbox],input[type=radio]{width:17px;height:17px;accent-color:var(--wine);vertical-align:middle}
input[type=file]{font-size:13px;color:var(--graphite);max-width:100%}
input[type=file]::file-selector-button{margin-right:10px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--graphite);font-family:inherit;font-size:13px;cursor:pointer;transition:.25s}
input[type=file]::file-selector-button:hover{border-color:var(--wine);color:var(--wine)}
/* 코어 폼 레이아웃 (.form_01 / .tbl_frm01) */
.form_01 h2{font-family:var(--serif);font-weight:400;font-size:20px;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.form_01 ul{display:block}
.form_01 li{list-style:none;margin-bottom:18px}
.form_01 li:after{content:"";display:block;clear:both}
.form_01 .frm_label{display:block;margin-bottom:8px;color:var(--graphite);font-size:12px;letter-spacing:.08em}
.form_01 textarea{width:100%;min-height:120px}
.tbl_frm01{margin:0 0 24px}
.tbl_frm01 table{width:100%;border-collapse:collapse}
.tbl_frm01 th{width:150px;padding:14px 16px;border-bottom:1px solid var(--line);background:#FBF9F7;color:var(--ink);font-weight:400;font-size:14px;text-align:left}
.tbl_frm01 td{padding:12px 16px;border-bottom:1px solid var(--line)}
.tbl_frm01 textarea,.write_div textarea,.wr_content textarea{width:100%;min-height:180px}
.tbl_frm01 .frm_file{display:block;margin-bottom:8px}
.tbl_frm01 a{text-decoration:none}
/* 표 (관리자·회원·주문 등 코어 화면) */
.tbl_wrap{width:100%;overflow-x:auto}
.tbl_wrap table{width:100%;border-collapse:collapse;font-size:14px}
.tbl_wrap caption,.tbl_head01 caption,.tbl_head02 caption{position:absolute;width:0;height:0;font-size:0;overflow:hidden}
.tbl_head01,.tbl_head02{margin:0 0 12px}
.tbl_head01 thead th,.tbl_head02 thead th{padding:16px 8px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);background:#fff;color:var(--graphite);font-family:var(--latin);font-size:13px;font-weight:400;letter-spacing:.12em;text-align:center}
.tbl_head01 tbody th,.tbl_head02 tbody th{padding:14px 8px;border-bottom:1px solid var(--line);font-weight:400}
.tbl_head01 td,.tbl_head02 td{padding:16px 8px;border-bottom:1px solid var(--line);color:var(--graphite);text-align:center;word-break:break-word}
.tbl_head01 tbody tr:hover td,.tbl_head02 tbody tr:hover td{background:#FCFAF8}
.tbl_head01 tfoot th,.tbl_head01 tfoot td,.tbl_head02 tfoot th,.tbl_head02 tfoot td{padding:14px 8px;border-top:1px solid var(--ink);background:#FBF9F7;text-align:center}
.tbl_head01 a:hover,.tbl_head02 a:hover{color:var(--wine)}
.empty_table,.empty_list{padding:64px 0;color:#9A928E;font-size:14px;text-align:center}
.list_01 ul{border-top:1px solid var(--line)}
.list_01 li{padding:16px 4px;border-bottom:1px solid var(--line);font-size:14px}
.list_01 li:after{content:"";display:block;clear:both}
.list_01 li:hover{background:#FCFAF8}
.list_01 li.empty_li{padding:60px 0;color:#9A928E;text-align:center}
/* 표 안의 자리별 폭 */
.td_board{width:120px;text-align:left}
.td_category{width:100px}
.td_chk{width:44px}
.td_date{width:110px;font-family:var(--latin)}
.td_datetime{width:150px;font-family:var(--latin)}
.td_group{width:110px}
.td_mb_id{width:110px}
.td_mng{width:110px}
.td_name{width:110px;text-align:left}
.td_nick{width:110px;text-align:left}
.td_num{width:70px;font-family:var(--latin)}
.td_numbig{width:110px;font-family:var(--latin)}
.td_stat{width:90px}
.txt_active{color:#3E7A4C}
.txt_done{color:var(--wine)}
.txt_expired{color:#B4423B}
.txt_rdy{color:#8B6B2E}
/* 페이징 (코어가 만드는 .pg_wrap) */
.pg_wrap{display:flex;justify-content:center;margin-top:48px;clear:both}
.pg_wrap:after{content:"";display:block;clear:both}
.pg{display:flex;justify-content:center;align-items:center;gap:4px;margin:0}
.pg_page,.pg_current{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border:0;border-radius:50%;background:none;color:var(--graphite);font-family:var(--latin);font-size:16px;text-decoration:none;transition:.25s}
.pg_page:hover,.pg a:focus{background:#EFEAE6;color:var(--ink)}
.pg_current{background:var(--ink);color:#fff}
.pg_start,.pg_prev,.pg_next,.pg_end{font-family:var(--sans);font-size:13px;border-radius:20px}
/* 자동등록방지 */
#captcha{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:#FBF9F7}
#captcha #captcha_img{height:48px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;vertical-align:middle}
#captcha #captcha_key{width:110px;height:48px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-family:var(--latin);font-size:20px;font-weight:500;text-align:center}
#captcha #captcha_mp3,#captcha #captcha_reload{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--graphite);font-size:0;position:relative;transition:.25s}
#captcha #captcha_mp3:hover,#captcha #captcha_reload:hover{border-color:var(--wine);color:var(--wine)}
#captcha #captcha_mp3:before{content:"♪";font-size:16px}
#captcha #captcha_reload:before{content:"↻";font-size:18px}
#captcha #captcha_info{display:block;width:100%;margin-top:4px;color:#9A928E;font-size:12px}
#captcha.m_captcha audio{width:100%;margin-top:6px}
/* 새창(팝업) 페이지 */
.new_win{padding:0 0 40px;background:#fff}
.new_win #win_title{padding:22px 24px;background:var(--wine-deep);color:#fff;font-family:var(--serif);font-size:20px;font-weight:400}
.new_win #win_title .sv{font-size:13px;opacity:.75}
.new_win .win_ul{display:flex;gap:6px;padding:16px 24px 0}
.new_win .win_ul li a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:30px;color:var(--graphite);font-size:13px}
.new_win .win_ul .selected a{background:var(--wine);border-color:var(--wine);color:#fff}
.new_win .win_desc{margin:16px 24px;padding:14px 18px;border:1px solid var(--blush);border-radius:var(--radius);background:#FBF5F4;color:var(--wine-deep);font-size:13px;line-height:1.7}
.new_win .win_desc:after{content:"";display:block;clear:both}
.new_win .new_win_con,.new_win .new_win_con2{padding:0 24px}
.new_win .new_win_con:after{content:"";display:block;clear:both}
.new_win .win_total{float:right;color:var(--graphite);font-size:13px}
.new_win .frm_info{color:#9A928E;font-size:12px}
.new_win .win_btn,.new_win .btn_confirm{display:flex;justify-content:center;gap:8px;padding:24px 24px 0}
.new_win .btn_confirm:after{content:"";display:block;clear:both}
.new_win .tbl_wrap{padding:0 24px}
.new_win .cert_btn{display:flex;gap:8px;justify-content:center;padding:16px 24px}
#validation_check{max-width:640px;margin:60px auto;padding:40px;border:1px solid var(--line);background:#fff;text-align:center}
#validation_check h1{margin-bottom:16px;font-family:var(--serif);font-size:22px;font-weight:400}
#validation_check p{color:var(--graphite);font-size:14px;line-height:1.8}
/* 회원 이름 위 말풍선 메뉴 */
.sv_wrap{position:relative;display:inline-block}
.sv_wrap .sv{display:none;position:absolute;top:100%;left:0;z-index:1000;min-width:110px;margin-top:6px;padding:6px 0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 14px 30px -18px rgba(30,27,26,.5);font-size:13px}
.sv_wrap .sv a{display:block;padding:7px 14px;color:var(--graphite)}
.sv_wrap .sv a:hover{background:#FBF5F4;color:var(--wine)}
.sv_wrap .sv_on{display:block}
.sv_member,.sv_guest{color:inherit}
.sch_word{color:var(--wine);font-weight:500}
/* 에디터 서식 도우미 */
.cke_sc{display:inline-block;margin-bottom:6px}
.cke_sc_def{margin:6px 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#FBF9F7;font-size:13px}
.cke_sc_def dl:after{content:"";display:block;clear:both}
.cke_sc_def dt{float:left;width:120px;color:var(--graphite)}
.cke_sc_def dd{margin-left:120px}
.cheditor-popup-window *,.cheditor-popup-window :before,.cheditor-popup-window :after{box-sizing:content-box}
/* 게시물 본문 안 목록 */
#bo_v_con ul{display:block;margin:1em 0;padding-left:24px;list-style:disc}
#bo_v_con ol{display:block;margin:1em 0;padding-left:24px;list-style:decimal}
#bo_v_con li{display:list-item}
/* 모바일/PC 전환 단추 */
#device_change{display:block;margin:10px auto;padding:12px 0;max-width:320px;border:1px solid var(--line);border-radius:30px;background:#fff;color:var(--ink);font-size:14px;text-align:center}
/* 본문 바로가기 */
#skip_to_container a{position:absolute;top:0;left:0;z-index:100000;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus,#skip_to_container a:active{width:auto;height:auto;padding:12px 18px;background:var(--wine);color:#fff;font-size:14px;line-height:1.4;text-align:center;overflow:visible}
/* 상단으로 단추 */
#top_btn{position:fixed;right:20px;bottom:90px;z-index:140;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:18px;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 10px 24px -12px rgba(30,27,26,.4)}
#top_btn.on{opacity:1;pointer-events:auto}
#top_btn:hover{background:var(--wine);border-color:var(--wine);color:#fff}
@media (max-width:900px){#top_btn{right:14px;bottom:80px}}
/* 상단 2차 메뉴 */
nav.gnb li{position:relative}
nav.gnb .gnb2{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(8px);min-width:216px;padding:12px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;box-shadow:0 22px 44px -26px rgba(30,27,26,.45);z-index:60}
nav.gnb .gnb2:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
nav.gnb li:hover .gnb2,nav.gnb li:focus-within .gnb2{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
nav.gnb .gnb2 ul{display:block}
nav.gnb .gnb2 a{display:block;padding:12px 18px;border-radius:3px;color:var(--graphite);font-size:14px;line-height:1.3;white-space:nowrap;transition:background .2s,color .2s}
nav.gnb .gnb2 a::after{display:none}
nav.gnb .gnb2 a:hover{background:#FBF5F4;color:var(--wine)}
/* 모바일 메뉴 회원 링크 */
.mnav .mutil{display:flex;gap:16px;margin-top:22px;color:var(--graphite);font-size:14px}
.mnav .mtel a{color:inherit}
/* 게시판 그룹 화면 */
.grp-lay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.grp-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--ink)}
.grp-head h2{font-family:var(--serif);font-size:20px;font-weight:400}
.grp-head .more{color:var(--graphite);font-size:13px}
@media (max-width:900px){.grp-lay{grid-template-columns:minmax(0,1fr)}}
/* 본문 영역 최소 높이 */
main.content{min-height:46vh}
/* ── 마무리 손질 ─────────────────────────────────────── */
.btn:focus-visible,.btn_submit:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.bd-actions{flex-wrap:wrap}
.bd-top{row-gap:12px}
.srch{flex-shrink:0}
@media (max-width:600px){
.srch{width:100%}
.srch input{width:100%;flex:1}
.bd-actions{justify-content:stretch}
.bd-actions .btn{flex:1}
}
/* 표 안에서 가로로 넘칠 때 */
.tbl{table-layout:auto}
.tbl td.subj a{max-width:100%}
/* ============================================================
HERITAGE 레이아웃 — 헤더(센터 로고) · 모바일 메뉴 · 서브배너 · 푸터
(위 공통 규칙보다 뒤에 두어 이 테마의 모양이 이깁니다)
============================================================ */
/* 헤더 : 가운데 세리프 로고 + 그 아래 센터 메뉴, 위아래 얇은 라인 */
header.site{position:sticky;top:0;z-index:100;background:rgba(250,248,244,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-util{border-bottom:1px solid var(--line)}
.hd-util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:18px;height:38px;font-size:12px;letter-spacing:.04em;color:var(--graphite)}
.hd-util a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hd-util .tel{font-family:var(--latin);font-size:15px;letter-spacing:.08em;color:var(--ink)}
/* 스크롤 축소는 padding·font-size 를 바꾼다 — 둘 다 레이아웃 속성이라 transition 을 걸면
0.35초 내내 sticky 헤더 아래 문서 전체를 다시 배치해 스크롤이 버벅인다.
★ 여기에 transition 을 다시 넣지 말 것. (2026-09-01 점검) */
.hd-brand{text-align:center;padding:26px 24px 18px}
.hd-brand .logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1}
.hd-brand .en{font-family:var(--latin);font-size:34px;letter-spacing:.34em;text-indent:.34em;font-weight:500}
.hd-brand .ko{font-size:11px;letter-spacing:.5em;text-indent:.5em;color:var(--graphite);margin-top:7px}
header.site nav.gnb>ul{display:flex;justify-content:center;gap:44px}
nav.gnb a{font-size:14px;font-weight:400;letter-spacing:.06em;position:relative;padding:14px 0;display:inline-block}
nav.gnb>ul>li>a::after{content:"";position:absolute;left:50%;bottom:10px;width:0;height:1px;background:var(--gold);transition:width .3s,left .3s}
nav.gnb>ul>li>a:hover::after{width:100%;left:0}
/* 스크롤하면 로고가 줄어 한 줄로 압축 */
header.site.compact .hd-util{display:none}
header.site.compact .hd-brand{padding:12px 24px 4px}
header.site.compact .hd-brand .en{font-size:20px}
header.site.compact .hd-brand .ko{display:none}
.ham{display:none;position:absolute;top:50%;right:18px;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
.ham span{display:block;height:1px;background:var(--ink);width:26px}.ham span:nth-child(2){width:18px}
/* 모바일 메뉴 (오른쪽 서랍) */
.mnav{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:var(--porcelain);z-index:220;transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.3,1);padding:22px 26px;display:flex;flex-direction:column;overflow-y:auto;border-left:1px solid var(--line)}
.mnav.open{transform:translateX(0)}
.mnav .close{align-self:flex-end;border:0;background:none;font-size:32px;font-weight:200;line-height:1;width:44px;height:44px}
.mnav .mlogo{font-family:var(--latin);font-size:20px;letter-spacing:.3em;margin:4px 0 14px}
.mnav>ul>li{border-bottom:1px solid var(--line)}
.mnav>ul>li>a{display:block;font-family:var(--serif);font-size:20px;padding:15px 0}
.mnav>ul>li>ul{padding:0 0 14px}
.mnav>ul>li>ul a{display:block;padding:7px 0 7px 14px;font-size:14px;color:var(--graphite)}
.mnav .mutil{margin-top:22px;display:flex;gap:20px;font-size:14px}
.mnav .mtel{margin-top:auto;padding-top:24px;font-family:var(--latin);font-size:26px}
.mnav-dim{position:fixed;inset:0;background:rgba(35,33,30,.45);z-index:210;opacity:0;pointer-events:none;transition:opacity .35s}
.mnav-dim.on{opacity:1;pointer-events:auto}
/* 서브 상단 배너 : 아이보리 위 세리프 대형 타이포 + 골드 라인 */
.subhero{background:var(--porcelain);border-bottom:1px solid var(--line);padding:76px 0 0;text-align:center}
.subhero .crumb{font-size:11px;letter-spacing:.14em;color:#A79D8E;margin-bottom:26px;text-transform:uppercase}
.subhero .crumb a:hover{color:var(--ink)}
.subhero .crumb a+a::before,.subhero .crumb span::before{content:"—";margin:0 10px;opacity:.5}
.subhero .lb{display:block;font-family:var(--latin);font-style:italic;font-size:17px;letter-spacing:.22em;color:var(--gold);margin-bottom:10px}
.subhero h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.3;color:var(--ink)}
.subhero p{max-width:640px;margin:14px auto 0;font-size:14px;color:var(--graphite)}
.subhero .rule{display:block;width:1px;height:52px;background:var(--gold);margin:34px auto 0}
main.content{padding:64px 0 120px;min-height:46vh}
.narrow{max-width:820px;margin:0 auto}
.sec-title{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:26px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-title small{font-family:var(--sans);font-size:13px;color:var(--graphite);font-weight:300}
/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 26px;font-size:13px;font-weight:400;letter-spacing:.1em;line-height:1;white-space:nowrap;border:1px solid var(--ink);background:none;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);color:#fff}
.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{background:var(--wine);border-color:var(--wine)}
.btn.gold{border-color:var(--gold);background:var(--gold);color:#fff}.btn.gold:hover{background:var(--wine);border-color:var(--wine)}
.btn.ghost{border-color:var(--line);color:var(--graphite)}.btn.ghost:hover{border-color:var(--ink);background:none;color:var(--ink)}
.btn.line{border-color:var(--line);color:var(--graphite)}.btn.line:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.wine{background:var(--ink);border-color:var(--ink);color:#fff}.btn.wine:hover{background:var(--gold);border-color:var(--gold)}
.btn.sm{height:38px;padding:0 16px;font-size:12px;letter-spacing:.05em}
.btn.wide{width:100%;height:54px;font-size:14px}
.btn:active{transform:translateY(1px)}
/* 폼 */
.fld{margin-bottom:26px}
.fld label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.fld label i{color:var(--gold);font-style:normal}
.fld input,.fld select,.fld textarea{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:11px 2px;font-size:16px;color:var(--ink);transition:border-color .3s;font-weight:300}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--ink);box-shadow:none !important}
.fld textarea{resize:vertical;min-height:140px;line-height:1.8}
.fld .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.fld .hint{font-size:12px;color:#A79D8E;margin-top:6px}
.fld .hint.ok{color:#3E7A4C}.fld .hint.err{color:#B4423B}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px}
.chk{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--graphite);line-height:1.6}
.chk input{width:16px;height:16px;margin-top:3px;accent-color:var(--gold);flex-shrink:0}
.card{background:#fff;border:1px solid var(--line);padding:48px}
/* 게시판 공통 (목록 상단·검색·표·배지·하단 단추) */
.bd-top{display:flex;justify-content:space-between;align-items:center;gap:16px;row-gap:12px;flex-wrap:wrap;margin-bottom:28px}
.bd-top .cnt{font-size:13px;color:var(--graphite);letter-spacing:.04em}
.bd-top .cnt b{color:var(--ink);font-weight:500;font-family:var(--latin);font-size:18px;margin-right:2px}
.srch{display:flex;border-bottom:1px solid var(--ink);background:none;height:46px;flex-shrink:0}
.srch select{border:0;padding:0 12px 0 2px;font-size:13px;background:none;color:var(--graphite);outline:0}
.srch input{border:0;padding:0 12px;font-size:14px;width:220px;background:none;height:100%}.srch input:focus{outline:0;box-shadow:none !important;border:0 !important}
.srch button{border:0;background:none;color:var(--ink);padding:0 6px;font-size:12px;letter-spacing:.15em;transition:.25s}.srch button:hover{color:var(--gold)}
.tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);background:none;font-size:15px;table-layout:auto}
.tbl th{font-weight:400;padding:16px;border-bottom:1px solid var(--line);background:none;letter-spacing:.15em;color:var(--graphite);text-transform:uppercase;font-family:var(--latin);font-size:13px}
.tbl td{padding:24px 16px;border-bottom:1px solid var(--line);text-align:center;color:#98907F;vertical-align:middle;font-size:13px;letter-spacing:.02em}
.tbl td.num{font-family:var(--latin);font-size:15px;color:#B4AC9C}
.tbl td.date{font-family:var(--latin);font-size:14px}
.tbl td.subj{text-align:left;color:var(--ink);font-family:var(--serif);font-size:17px;font-weight:400;padding-left:20px}
.tbl td.subj a{display:inline-flex;align-items:center;gap:8px;max-width:100%;transition:color .25s}
.tbl tbody tr:hover td.subj a{color:var(--wine);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold)}
.tbl tr.notice td{background:#F6F1E9}.tbl tr.notice td.subj{font-weight:500}
.badge{display:inline-flex;align-items:center;font-size:11px;padding:3px 10px;letter-spacing:.08em;line-height:1.4;font-weight:400;border:1px solid var(--line);color:var(--graphite)}
.badge.n{background:var(--ink);border-color:var(--ink);color:#fff}
.badge.new{color:var(--gold);font-family:var(--latin);font-style:italic;font-size:12px;padding:0;border:0;letter-spacing:.15em}
.badge.g{background:var(--blush);border-color:var(--blush);color:var(--wine)}
.bd-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:26px;flex-wrap:wrap}
.empty_list,.empty_table{padding:80px 0;color:#A79D8E;font-size:14px;text-align:center}
/* 푸터 */
footer{background:var(--ink);color:#B3AB9D;font-size:13px;padding:70px 0 0}
footer .ft-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:44px;padding-bottom:44px;border-bottom:1px solid #3A362F}
footer .logo{display:flex;flex-direction:column;line-height:1.2}
footer .logo .en{font-family:var(--latin);font-size:24px;letter-spacing:.3em;color:#fff}
footer .logo .ko{font-size:11px;letter-spacing:.4em;color:#8B8374;margin-top:6px}
footer .slogan{margin-top:18px;font-family:var(--latin);font-style:italic;font-size:15px;letter-spacing:.08em;color:var(--gold)}
footer h4{color:#fff;font-family:var(--latin);font-weight:500;font-size:14px;letter-spacing:.2em;margin-bottom:16px}
footer li{margin-bottom:9px;font-weight:300}
footer .ft-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
footer .ft-info{padding:24px 0;font-size:12px;line-height:1.9;color:#8B8374}
footer .copy{border-top:1px solid #3A362F;padding:20px 0 26px;font-size:11px;color:#6E6759;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer .copy a:hover{color:#fff}
/* 반응형 */
@media (max-width:1100px){header.site nav.gnb>ul{gap:30px}}
@media (max-width:900px){
.hd-util{display:none}
header.site nav.gnb{display:none}
.ham{display:flex}
.hd-brand{text-align:left;padding:18px 24px}
.hd-brand .en{font-size:22px}
header.site.compact .hd-brand{padding:14px 24px}
.subhero{padding:44px 0 0}.subhero .rule{height:36px;margin-top:24px}
main.content{padding:44px 0 84px}
.card{padding:28px 20px}.grid2{grid-template-columns:minmax(0,1fr)}
.bd-top{margin-bottom:18px}
.srch{width:100%}.srch input{width:auto;flex:1;min-width:0}
.tbl thead{display:none}.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
.tbl tr{padding:20px 4px;border-bottom:1px solid var(--line)}
.tbl tr.notice{background:#F6F1E9;padding-left:14px;padding-right:14px;margin:0 -4px}.tbl tr.notice td{background:none}
.tbl td{padding:0;border:0;text-align:left;font-size:12px}
.tbl td.subj{font-size:16px;line-height:1.5;margin-bottom:8px;padding:0}.tbl td.subj a{display:inline}
.tbl td.hide-m{display:none}
.tbl td.meta-m{display:inline-block;width:auto;margin-right:14px;color:#A79D8E;font-size:12px}
footer .ft-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bd-actions .btn{flex:1}
}
@media (max-width:600px){
footer .ft-top{grid-template-columns:minmax(0,1fr)}
.srch select{display:none}
}
/* ── 좁은 화면(360px 급) 가로 넘침 방지 · 2026-08-31 점검 ─────────────────
그누보드 코어 화면(새글모음·FAQ·자동등록방지·상품검색)은 고정폭이라
갤럭시 계열 360px 기기에서 옆으로 밀린다. 이 블록을 지우면 증상이 돌아온다. */
#new_sch,#faq_sch{min-width:0;max-width:100%;box-sizing:border-box}
#pw_confirm,.mbskin,#info_fs{max-width:100%;min-width:0}
#info_fs input,#info_fs .frm_input,#pw_confirm input,.mbskin input{max-width:100%;min-width:0;box-sizing:border-box}
/* 320px 급 좁은 기기 — 한 낱말이 칸보다 길면 그때만 끊어 준다.
word-break:keep-all 로 한글 단어는 그대로 두되, 넘치는 것보다는 끊는 편이 낫다. */
body{overflow-wrap:break-word}
#new_sch form,#faq_sch form{width:100%;max-width:100%;flex-wrap:wrap}
#new_sch select,#new_sch input,#new_sch .frm_input,
#faq_sch select,#faq_sch input,#faq_sch .frm_input{max-width:100%}
#captcha{max-width:100%}
#captcha img,#captcha audio,#captcha_audio{max-width:100%}
#ssch_q,.ssch_input{max-width:100%}
@media (max-width:480px){
#new_sch,#faq_sch{padding:18px}
}
/* ── 모바일 입력창 확대 방지 · 2026-08-31 점검 ────────────────────────────
iOS 사파리는 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대해 버리고,
사용자가 손으로 되돌려야 한다. 휴대폰에서만 글자를 16px 로 올려 막는다.
(칸의 높이·테두리·색은 그대로이므로 디자인은 유지된다)
화면별 규칙(.xx-auth .fld input 등)이 더 세서 !important 로 눌러 둔다 —
이 한 줄을 빼면 로그인·가입·검색칸에서 확대가 다시 일어난다. */
@media (max-width:768px){
input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=number],input[type=search],input[type=url],input[type=date],
input[type=time],input[type=datetime-local],input[type=month],input[type=week],
input:not([type]),select,textarea{font-size:16px!important}
}
/* ── 폼 입력칸 한 벌로 통일 · 2026-08-31 점검 ──────────────────────────────
HERITAGE 는 밑줄형 입력칸이 디자인 언어인데, 로그인·회원가입에만 걸려 있고
**비밀번호찾기와 자동등록방지 칸만 코어의 박스형**으로 남아 있었다.
★ 칸 모양을 바꾸려면 이 블록만 고치면 네 화면이 함께 따라간다. */
#mb_login input[type=text],#mb_login input[type=password],#mb_login input[type=email],
#mb_login input[type=tel],#mb_login select,
#register_form input[type=text],#register_form input[type=password],#register_form input[type=email],
#register_form input[type=tel],#register_form select,#register_form .frm_input,
#find_info input[type=text],#find_info input[type=email],#find_info select,#find_info .frm_input,
#pw_confirm input[type=password],#pw_confirm .frm_input,
#captcha.m_captcha #captcha_key,#captcha #captcha_key,#captcha .captcha_box,#captcha_key,.captcha_box{
box-sizing:border-box;width:100%;height:49px;
border:0;border-bottom:1px solid var(--line);border-radius:0;
padding:0 2px;font-size:16px;line-height:normal;
background:none;color:var(--ink);
-webkit-appearance:none;outline:0;transition:border-color .2s}
#mb_login select,#register_form select,#find_info select{-webkit-appearance:menulist;appearance:menulist}
#mb_login input:focus,#register_form input:focus,#find_info input:focus,.captcha_box:focus{
border-bottom-color:var(--gold)}
#mb_login textarea,#register_form textarea,#find_info textarea{
box-sizing:border-box;width:100%;min-height:150px;border:1px solid var(--line);border-radius:0;
padding:14px;font-size:16px;line-height:1.8;background:#fff;color:var(--ink);outline:0}
/* 자동등록방지 칸은 좁으니 폭만 따로 둔다 */
#captcha.m_captcha #captcha_key,#captcha #captcha_key,#captcha .captcha_box,#captcha_key,.captcha_box{width:120px;text-align:center;letter-spacing:.2em}
/* 폼을 감싼 fieldset 에 브라우저 기본 테두리(2px groove)가 남아 회색 홈 박스가 그려졌다.
로그인·비밀번호찾기·자동등록방지에서 특히 눈에 띄었다. (2026-08-31 점검) */
#mb_login fieldset,.auth fieldset,.b01-auth fieldset,#fregisterform fieldset,
#register_form fieldset,#find_info fieldset,#pw_confirm fieldset,
fieldset#login_fs,fieldset#info_fs,fieldset#captcha,fieldset.captcha,fieldset.srch,
#fregister fieldset,fieldset.fregister_agree{
border:0;margin:0;padding:0;min-width:0}
/* 약관 동의 체크줄은 위쪽 여백만 남긴다 (2026-09-01 점검) */
#fregister fieldset.fregister_agree,fieldset.fregister_agree{margin-top:14px}
#mb_login legend,.auth legend,.b01-auth legend,#register_form legend,#find_info legend{padding:0}
/* ── 칸 옆 버튼·자동등록방지 줄 정렬 · 2026-08-31 점검 ─────────────────────
'주소 검색' 버튼이 우편번호 칸보다 낮고 한 줄 아래로 밀려 있었고,
자동등록방지는 그림·입력칸·새로고침 버튼의 높이와 윗선이 제각각이었다.
칸 높이(49px)에 맞춰 한 줄로 가지런히 세운다. */
#register_form .btn_frmline,#find_info .btn_frmline,#mb_login .btn_frmline,
.auth .btn_frmline,.b01-auth .btn_frmline,#register_form button.btn_frmline{
box-sizing:border-box;height:49px;padding:0 16px;border-radius:0;
display:inline-flex;align-items:center;justify-content:center;
vertical-align:top;line-height:1;white-space:nowrap}
#fregisterform #captcha,#captcha{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
#fregisterform #captcha #captcha_img,#captcha #captcha_img,#captcha img{vertical-align:middle;border-radius:0;max-width:100%}
/* #captcha_reload 는 브라우저 기본 모양(회색 그라데이션)이라 테마와 겉돌았다 (2026-08-31 점검) */
#fregisterform #captcha #captcha_reload,#captcha #captcha_reload,#captcha button{text-indent:0;overflow:visible;width:auto;white-space:nowrap;background-image:none;background:#fff;color:var(--ink);border:1px solid var(--line);cursor:pointer;font-size:14px;
box-sizing:border-box;height:49px;min-width:49px;padding:0 12px;border-radius:0;
display:inline-flex;align-items:center;justify-content:center;line-height:1}
#captcha #captcha_info,#captcha .captcha_info{flex:1 1 100%;margin:6px 0 0;font-size:13px;line-height:1.6}
#captcha #captcha_audio,#captcha audio{flex:1 1 100%;max-width:100%;margin:0 0 6px}
/* legend 가 섹션 제목(h2)과 같은 '자동등록방지' 를 한 번 더 찍어 두 번 나왔다 → 읽기용으로만 남긴다 */
#captcha legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 안내 문구는 버튼 옆에 끼어 뒤엉켰다 → 늘 아랫줄 전체를 쓰게 한다 */
#fregisterform #captcha #captcha_info,#captcha #captcha_info,#captcha .captcha_info{flex:0 0 100%;min-width:100%}
#captcha #captcha_reload span{display:none}
/* 그누보드 가입양식은 두 칸짜리 줄의 에도 half_input 클래스를 붙인다.
입력칸 모양 규칙(.half_input)이 그 에까지 걸려 비밀번호 줄만 네모 상자가 그려졌다.
줄을 감싸는 에서는 칸 모양을 없앤다. (2026-08-31 점검) */
#register_form li.half_input,#register_form li.full_input,#register_form li.twopart_input,
#register_form li.margin_input,#register_form li.left_input,#register_form li.frm_input{
border:0;background:none;height:auto;padding:0;border-radius:0;box-shadow:none}
/* 반폭 줄(half_input) 안의 입력칸은 그 줄을 꽉 채우게만 한다.
★ 줄의 배치(2열이냐 한 줄이냐)는 테마 디자인이므로 건드리지 않는다 —
display·float·width 를 손댔더니 PC 에서 섹션 카드가 겹쳐 무너졌다. (2026-08-31 점검) */
#register_form li.half_input>input,#register_form li.half_input>.frm_input{width:100%}
/* 우편번호 칸이 줄 전체를 차지해 '주소 검색' 버튼이 아랫줄로 밀렸다.
칸을 줄이고 버튼을 옆에 붙인다. (2026-08-31 점검) */
#register_form #reg_mb_zip,#register_form input[name=mb_zip],#find_info input[name=mb_zip]{
width:150px;max-width:48%;display:inline-block;vertical-align:middle;margin-right:8px}
#register_form #reg_mb_zip+.btn_frmline,#register_form input[name=mb_zip]+.btn_frmline{vertical-align:middle}
/* 라벨 옆 도움말 단추(.tooltip_icon)는 코어가 '설명보기' 글자만 내보내고 아이콘은 테마 몫이다.
그대로 두면 테마마다 빈 동그라미(20×20)이거나 아예 0×0 이라 안 보였다.
물음표 아이콘으로 통일한다. (2026-08-31 점검) */
#register_form .tooltip_icon,.tooltip_icon{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;min-width:18px;padding:0;margin-left:5px;
border:1px solid var(--line);border-radius:50%;background:none;
font-size:0;line-height:1;vertical-align:middle;cursor:pointer}
#register_form .tooltip_icon::before,.tooltip_icon::before{
content:"?";font-size:11px;font-weight:700;line-height:1;color:inherit}