/* ==========================================================================
   WZ-DINING-001 그누보드 보정 — 원본 kyunghwa-style.css 뒤에 붙습니다. 원본 규칙은 고치지 않고, 원본에 없는 것만 더합니다.
   1) 원본 화면을 키트 공통 기본값에서 지킴(폼 요소 글꼴·긴 낱말 줄바꿈)
   2) 그누보드 때문에 바뀐 태그의 원본 모양(히어로 2·3장 제목 h2)
   3) 그누보드가 더하는 것(캡차·개인정보 동의·관리자 버튼·고객센터 화면 틀·입력칸·버튼·상자·탭·쪽 번호·사진 카드)을 원본 모양으로
   4) 반응형 보정(원본에도 있는 좁은 화면 결함)
   ========================================================================== */

/* 1) 키트 wz-base.css(레이어)의 폼 요소 font: inherit가 원본이 정하지 않은 단추·입력칸 값(줄 높이·굵기)을 바꾸지 않게(원본은 글꼴·크기·색만 정함 — 나머지는 브라우저 기본값).
   우선순위 0(:where)이라 원본 CSS가 정한 값은 그대로 이김. 원본에 없는 그누보드 화면 틀(.kh-g5)은 키트 기본값 유지 */
:where(.wz-original) :where(.main-header, .hidden-bar, .info-bar, .main-footer, main > :not(.kh-g5)) :where(button, input, select, textarea) { font: revert; font-family: var(--font-body); font-size: 15px; }
/* 키트 body { overflow-wrap: break-word }는 원본에 없음(원본 body는 word-break: keep-all만) — 원본 화면은 원본대로, 그누보드 화면 틀만 키트 값 */
body.wz-original { overflow-wrap: normal; }
.kh-g5 { overflow-wrap: break-word; }

/* 2) 히어로 2·3장 제목: 원본은 세 장 모두 h1 → 첫 장만 h1(페이지마다 h1 1개), 나머지 h2.kh-h1 = 원본 h1·.banner-section .content-box h1과 같은 값 */
.banner-section .content-box .kh-h1 { font-size: clamp(38px, 5.5vw, 84px); line-height: 1.12; color: var(--text-white); margin-bottom: 20px; }
/* 글 보기·고객센터처럼 머리 제목이 긴 그누보드 화면(원본 머리 제목은 짧음) — 휴대폰에서 줄을 바꿈 */
.inner-banner h1 { overflow-wrap: break-word; }

/* 3-1) 원본에 없는 그누보드 화면(고객센터 게시판·회원·1:1 문의·글쓰기·검색·FAQ·살롱 소식 글 보기)이 들어가는 원본 기본 구역(원본 내용 구역 위아래 100·110px, 차콜 바탕) */
.kh-g5 { position: relative; padding: 100px 0 110px; min-height: 420px; background-color: var(--bg-dark-1); }
@media (max-width: 767px) { .kh-g5 { padding: 70px 0 80px; } }
.kh-g5 > .auto-container > :first-child { margin-top: 0; }
/* 원본 CSS의 태그 규칙이 키트 스킨 안까지 바꾸는 것: 목록 점(ul, li { list-style: none }) · 큰 제목(h2 54px·h3 34px — 원본 섹션 제목 크기)을 그누보드 화면 틀 안에서만 되돌림.
   우선순위를 원본 태그 규칙과 비슷하게(:where + 태그) 두어 키트 스킨의 class 규칙은 그대로 이김 */
.kh-g5 :where(#bo_v_con, .wz-fit-view__body, .wz-content, #ctt_con) :where(ul) { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.kh-g5 :where(#bo_v_con, .wz-fit-view__body, .wz-content, #ctt_con) :where(ol) { list-style: decimal; padding-left: 1.4em; margin-bottom: 1em; }
.kh-g5 :where(#bo_v_con, .wz-fit-view__body, .wz-content, #ctt_con) :where(li) { list-style: inherit; }
:where(.kh-g5) h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; }
:where(.kh-g5) h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.35; }
:where(.kh-g5) h4 { font-size: 19px; }
.kh-g5 :where(#bo_v_con, .wz-fit-view__body) img { height: auto; }

/* 3-2) 관리자에게만 보이는 버튼·빈 목록 안내 */
.kh-admin { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; }
.kh-empty { width: 100%; padding: 40px 15px; margin: 0; text-align: center; color: var(--text-muted); }

/* 3-3) 예약·문의 폼: 그누보드 캡차·개인정보 동의를 원본 입력칸 모양으로. 자동등록방지는 숫자 그림·듣기·새로고침 한 줄, 입력칸은 다음 줄 전체 폭 */
.kh-captcha #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; }
.kh-captcha #captcha legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kh-captcha #captcha #captcha_img { order: 1; display: inline-block; height: 46px; width: auto; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.12); }
.kh-captcha #captcha #captcha_mp3,
.kh-captcha #captcha #captcha_reload { width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.12); background-color: #ffffff; }
.kh-captcha #captcha #captcha_mp3 { order: 2; }
.kh-captcha #captcha #captcha_reload { order: 3; }
/* 자동등록방지 입력칸 = 원본 예약 폼 입력칸(.default-form input)과 같은 값 */
.kh-captcha #captcha #captcha_key { order: 4; flex: 1 1 100%; display: block; width: 100%; height: 56px; padding: 12px 20px; margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 30px; color: var(--text-white); background: var(--bg-input); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; outline: none; }
.kh-captcha #captcha #captcha_key:focus { border-color: var(--gold); }
.kh-captcha #captcha #captcha_info { order: 5; flex-basis: 100%; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.kh-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; line-height: 1.65; text-align: left; color: var(--text-muted); }
.kh-consent input { flex: none; width: 16px; height: 16px; margin-top: 4px; accent-color: var(--gold); appearance: auto; }
.kh-consent a { color: var(--gold); text-decoration: underline; }
/* 문의 보기(관리자) 위 칸 요약 */
.kh-inquiry-info { margin-bottom: 28px; }
.kh-inquiry-info p { margin: 0; line-height: 1.8; color: var(--text-white); }
.kh-inquiry-info strong { color: var(--gold); font-weight: 500; }

/* 3-4) 고객센터·회원 화면 입력칸·이름표(원본 예약 폼 .default-form input·select·textarea와 같은 값 — 원본 칸 규칙은 폼 안 태그 선택자라 class로 옮김) */
.kh-input { display: block; width: 100%; min-height: 56px; padding: 12px 20px; font-family: var(--font-body); font-size: 15px; line-height: 30px; color: var(--text-white); background-color: var(--bg-input); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; outline: none; transition: border-color 0.3s ease; box-sizing: border-box; }
.kh-input:focus { border-color: var(--gold); }
.kh-input::placeholder { color: var(--text-muted); }
.kh-select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-white) 50%), linear-gradient(135deg, var(--text-white) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 19px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.kh-select option { background-color: #171819; color: #ffffff; }
.kh-textarea { min-height: 200px; resize: vertical; padding-top: 15px; }
input.kh-input[type="file"] { padding: 12px 16px; line-height: 1.5; }
.kh-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold); }

/* 3-5) 버튼(원본 .theme-btn.btn-style-one 골드 채움 · .btn-style-two 골드 테두리 — 원본은 위아래로 바뀌는 글자 두 줄이 있어야 호버에 글자가 보임.
   키트 스킨 버튼은 글자 한 줄이므로 호버 원형 채움(::before) 대신 색만 바꿈) */
.theme-btn.kh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; text-align: center; cursor: pointer; }
.theme-btn.kh-btn::before { display: none; }
.btn-style-one.kh-btn:hover, .btn-style-one.kh-btn:focus-visible { color: var(--gold); background-color: transparent; }
.btn-style-two.kh-btn:hover, .btn-style-two.kh-btn:focus-visible { color: var(--bg-black); background-color: var(--gold); }
.theme-btn.kh-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* 3-6) 상자(원본 예약 안내 상자 .reserv-info — 골드 테두리 + 안쪽 10px 연한 골드 테두리, 먹색 바탕) · 작은 표시(원본 메뉴 배지 .s-info — 골드 바탕 먹색 대문자) */
.kh-card { padding: 30px 32px; background-color: var(--bg-dark-2); border: 1px solid var(--gold); outline: 1px solid rgba(228, 197, 144, 0.45); outline-offset: -10px; }
@media (max-width: 575px) { .kh-card { padding: 26px 22px; } }
.kh-tag { display: inline-block; padding: 1px 8px; font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg-black); background-color: var(--gold); vertical-align: 2px; }

/* 3-7) 분류 탭·고객센터 묶음 메뉴(원본 4탭 메뉴판 .tabs-box .tab-btn과 같은 값 — Forum 대문자, 선택·호버 골드 + 이중 골드 밑줄, 탭 사이 마름모). 원본 탭은 div라 같은 모양을 링크 class로 */
.kh-tabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; margin: 0 0 50px; padding: 0; }
.kh-tab { position: relative; display: inline-block; margin: 0 26px; padding: 6px 0; font-family: var(--font-heading); font-size: 19px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-white); transition: color 0.3s ease; }
.kh-tab::after { content: ""; position: absolute; right: -30px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 1px solid var(--gold); transform: rotate(45deg); }
.kh-tab:last-child::after { display: none; }
.kh-tab::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: scaleX(0); transition: transform 0.35s ease; }
.kh-tab:hover, .kh-tab.active-btn { color: var(--gold); }
.kh-tab.active-btn::before { transform: scaleX(1); }
.wz-fit-subnav.kh-tabs { margin-bottom: 56px; }
@media (max-width: 767px) {
  .kh-tabs { gap: 4px 0; margin-bottom: 36px; }
  .kh-tab { margin: 0 14px; font-size: 16px; }
  .kh-tab::after { right: -18px; width: 6px; height: 6px; margin-top: -3px; }
}

/* 3-8) 쪽 번호(원본에 쪽 번호가 없어 원본 탭 글자 모양 — Forum, 지금 쪽 골드 + 이중 골드 밑줄) */
.kh-pages, .wz-fit-pages.kh-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 30px 0 0; padding: 0; }
.kh-page { position: relative; display: inline-block; min-width: 40px; padding: 6px 8px; font-family: var(--font-heading); font-size: 20px; line-height: 1.4; text-align: center; color: var(--text-white); }
a.kh-page:hover { color: var(--gold); }
.kh-page.current { color: var(--gold); }
.kh-page.current::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 5px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }

/* 3-9) 고객센터 사진 카드(키트 wz-fit 갤러리·웹진 = 원본 살롱 소식 카드 .news-block — 먹색 바탕 사진 카드, 호버 확대·골드 제목) 3열 */
.kh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 991px) { .kh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .kh-grid { grid-template-columns: 1fr; } }
.kh-post { display: flex; flex-direction: column; background-color: var(--bg-dark-2); border: 1px solid var(--border-subtle); transition: border-color 0.4s ease; }
.kh-post:hover { border-color: rgba(228, 197, 144, 0.55); }
.kh-post-media { position: relative; display: block; overflow: hidden; }
.kh-post-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.kh-post:hover .kh-post-media img { transform: scale(1.06); }
.kh-post-media .wz-noimg { aspect-ratio: 4 / 3; height: auto; }
.kh-post-badge { position: absolute; left: 20px; top: 20px; z-index: 2; }
.kh-post-body { padding: 22px 24px 26px; }
.kh-post-title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 21px; line-height: 1.4; }
.kh-post-title a { color: var(--text-white); }
.kh-post-title a:hover { color: var(--gold); }
.kh-post-meta { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); }
.kh-post-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--text-muted); }

/* 3-10) 살롱 소식 목록(원본 메인 소식 구역을 목록으로) — 분류 탭 아래 카드, 사진 없는 글은 원본 사진 칸 높이(430px)를 채우는 썸네일 그림 */
.kh-news-list .row { row-gap: 0; }
.news-block .image a.kh-noimg { display: block; }
.news-block .image .wz-noimg { width: 100%; height: 430px; }

/* 3-11) 404(원본 메인 소식 구역 바탕·제목 상자·골드 테두리 단추) */
.kh-404 .title-box .text { max-width: 640px; margin: 18px auto 0; }

/* 3-12) 원본 img { height: auto }가 그누보드 캡차 그림(1×1 크기 속성 — 스크립트가 그림을 바꿔 넣음)을 지우므로 모든 화면의 캡차 그림 크기를 되살림(키트 wz-fit 글쓰기·회원가입 포함) */
#captcha #captcha_img { width: auto; height: 46px; }

/* 3-13) 조리 영상(원본 팝업 .wz-lightbox 안 — kh-g5.js): 팝업 폭(920px)에 맞는 16:9, 바탕 검정 */
.wz-lightbox .kh-film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

/* ==========================================================================
   4) 반응형 보정(2026-10-22 검수 handoff/reports/WZ-DINING-001/responsive/review.md — 원본 kyunghwa-style.css에도 있는 결함). 원본 규칙은 그대로 두고 여기서만 덮음.
   1200px 이상(1440)은 4-1·4-6 말고 원본과 같음.
   ========================================================================== */
/* 4-1) 메인 예약 구역(style-two가 아닌 .reserve-section): 상자가 top:-270px·margin-bottom:-270px로 후기 구역 위로 올라가는데, 그 음수 여백이 구역 밖으로 빠져나가
   구역(z-index 5, 차콜 바탕)이 다음 "4대 원칙" 구역의 위 270px를 덮음 → 제목(WHY CHOOSE US · 경화당이 지켜온 4대 원칙)이 가려져 상자 아래가 빈 공간처럼 보임(모든 폭).
   구역을 새 블록 문맥으로 만들어 음수 여백을 안에 가둠 — 다음 구역 위치·페이지 높이는 같고, 가려졌던 제목만 보임 */
.reserve-section:not(.style-two) { display: flow-root; }

/* 4-2) 온라인 테이블 예약 폼(메인·메뉴판 1~4): 992~1199px에서 인원·날짜·시간 3칸 줄(.col-lg-4)의 칸 안쪽이 82~89px라 '2인 살롱 테이블'·'오후 12:30 (런치 2부)'가 잘림
   → 이 구간만 원본 768~991px 배치(인원·날짜 2칸 + 시간 한 줄)로 */
@media (min-width: 992px) and (max-width: 1199px) {
  .reservation-form .form-group.col-lg-4 { flex: 0 0 50%; max-width: 50%; }
  .reservation-form .form-group.col-lg-4.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* 4-3) 메뉴판 1~4 특전 상자(.discount-card): 992~1199px 좁은 오른쪽 칸(글자 폭 161px)에서 제목 36px가 4줄, '지금 예약하기' 버튼 글자 2줄
   → 이 구간만 칸 안쪽 여백을 줄이고(무늬 테두리 15px 안쪽은 비움) 제목 26px·두 줄 균형 */
@media (min-width: 992px) and (max-width: 1199px) {
  .reserve-section.style-two .info-col .inner { padding-left: 15px; padding-right: 15px; }
  .reserve-section.style-two .discount-card { padding-left: 25px; padding-right: 25px; }
  .reserve-section.style-two .discount-card .offer-title { font-size: 26px; line-height: 1.55; text-wrap: balance; }
  .reserve-section.style-two .discount-card .theme-btn { white-space: nowrap; }
}
/* 4-4) 같은 특전 제목: 원본에 작은 화면 크기가 없어 375에서 36px 4줄 → 575px 이하 24px·두 줄 균형 */
@media (max-width: 575px) {
  .discount-card .offer-title { font-size: 24px; line-height: 1.55; text-wrap: balance; }
}

/* 4-5) 메뉴판 2(시그니처) 사진 카드 격자(.offer-block-three col-xl-3 col-lg-4 — 8장씩 두 묶음): 992~1199px 3칸이면 마지막 줄 2칸만 남음
   → 이 구간도 1200px 이상처럼 4칸(8장 = 4 × 2줄) */
@media (min-width: 992px) and (max-width: 1199px) {
  .special-offer-two .offer-block-three.col-lg-4 { flex: 0 0 25%; max-width: 25%; }
}

/* 4-6) 원본 마크업의 .row.justify-content-center(셰프진·메인 정찬 3장·메인 셰프진·살롱 소식 카드 줄)에 원본 CSS 규칙이 없어,
   768~991px 2칸일 때 셋째 카드가 왼쪽에 혼자 남음 → 마크업 뜻대로 가운데(가득 찬 줄은 그대로라 1440 화면 같음) */
.row.justify-content-center { justify-content: center; }

/* 4-7) 메인 히어로 '테이블 예약하기' 도장(.book-btn — 글자는 HTML): 767px 이하 원본 9.5px가 너무 작음 → 원본 큰 화면 글자 11px(도장 86px 안 66px 칸에 두 줄)·자간 조금 줄임 */
@media (max-width: 767px) {
  .banner-section .book-btn .txt { font-size: 11px; letter-spacing: 0.08em; }
}