/* 뷰티:풀 UI 동작 레이어 — 변환 단계(tools/ui-layer.mjs)에서 주입됩니다. 디자인 원본과 별개. */

/* 섹션 이동: 부드러운 스크롤, 고정 헤더 가림 보정(scroll-margin 은 index.html 에 설정값으로 주입) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.vf-lock { overflow: hidden; }

/* 설정값이 비어 숨기는 요소 (예: 인스타그램 주소 없음) */
[data-hide="1"] { display: none !important; }

/* 헤더 메뉴: 현재 보고 있는 섹션에 밑줄 */
header nav a[data-active="1"] { text-decoration: underline !important; text-underline-offset: 8px; text-decoration-thickness: 1px; }

/* ── 예약·문의 패널 ── */
.vf-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(42, 26, 29, .55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.vf-overlay[hidden] { display: none; }
.vf-overlay.vf-in { opacity: 1; }
.vf-sheet { position: relative; width: 420px; max-width: calc(100% - 32px); background: #FFFFFF; border-radius: 6px; padding: 36px 32px 28px; box-sizing: border-box; font-family: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; color: #2A1A1D; box-shadow: 0 24px 64px rgba(42, 26, 29, .25); transform: translateY(12px); transition: transform .2s ease; word-break: keep-all; }
.vf-in .vf-sheet { transform: none; }
.vf-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: #8E8083; cursor: pointer; }
.vf-close:hover { color: #3F1116; }
.vf-eyebrow { margin: 0 0 10px; font-family: Fraunces, serif; font-style: italic; font-size: 14px; color: #7E3A47; letter-spacing: .02em; }
.vf-title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.vf-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #6E5F62; }
.vf-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.vf-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 3px; border: 1px solid #3F1116; background: #FFFFFF; color: #3F1116; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.vf-btn:hover { background: #F6EDED; }
.vf-btn.vf-primary { background: #3F1116; color: #FFFFFF; }
.vf-btn.vf-primary:hover { background: #2A0B0F; }
.vf-btn:disabled { opacity: .45; cursor: default; }
.vf-btn svg { width: 18px; height: 18px; flex: none; }
.vf-reveal { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 16px; background: #F6EDED; border-radius: 3px; }
.vf-reveal[hidden] { display: none; }
.vf-num { font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-feature-settings: 'tnum'; }
.vf-copy { height: 36px; padding: 0 14px; border: 1px solid #3F1116; border-radius: 2px; background: #FFFFFF; color: #3F1116; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.vf-foot { margin: 20px 0 0; font-size: 12px; line-height: 1.6; color: #8E8083; }
.vf-foot:empty { display: none; }

/* ── 가격표 이미지 라이트박스 ── */
.vf-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(42, 26, 29, .72); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; opacity: 0; transition: opacity .2s ease; }
.vf-lb[hidden] { display: none; }
.vf-lb.vf-in { opacity: 1; }
.vf-lb-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; transform: translateY(12px); transition: transform .2s ease; }
.vf-in .vf-lb-inner { transform: none; }
.vf-lb-img { display: block; width: auto; height: auto; max-width: min(92vw, 640px); max-height: calc(100vh - 150px); border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); background: #F6EDED; }
.vf-lb-close { position: absolute; top: -8px; right: -8px; transform: translate(100%, -100%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: #FFFFFF; color: #3F1116; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.vf-lb-bar { display: flex; gap: 10px; }
.vf-lb-bar .vf-btn { height: 46px; padding: 0 22px; font-family: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 14px; }
.vf-lb-bar .vf-btn:not(.vf-primary) { background: #FFFFFF; }
.vf-touch.vf-lb { padding: 4vw; align-items: center; }
.vf-touch .vf-lb-img { max-width: 100%; max-height: calc(100vh - 28vw); border-radius: 1.5vw; }
.vf-touch .vf-lb-close { top: 0; right: 0; transform: translate(30%, -30%); width: 10vw; height: 10vw; font-size: 7vw; }
.vf-touch .vf-lb-bar { gap: 2.4vw; width: 100%; }
.vf-touch .vf-lb-bar .vf-btn { flex: 1; height: 12.5vw; padding: 0; font-size: 3.7vw; border-radius: 1vw; }

/* 복사 완료 등 짧은 안내 */
.vf-toast { position: fixed; left: 50%; bottom: 32px; z-index: 1001; transform: translate(-50%, 8px); padding: 12px 18px; border-radius: 4px; background: #2A1A1D; color: #FFFFFF; font: 14px/1.4 Pretendard, 'Apple SD Gothic Neo', sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.vf-toast.vf-show { opacity: 1; transform: translate(-50%, 0); }

/* 터치 기기: 이 디자인은 뷰포트 메타 없이 980px 레이아웃이 축소 표시되므로, 패널만 vw 단위로 키워 읽을 수 있게 함 */
.vf-touch { align-items: flex-end; }
.vf-touch .vf-sheet { width: 100%; max-width: none; border-radius: 4vw 4vw 0 0; padding: 7vw 6vw 6vw; transform: translateY(6vw); }
.vf-touch .vf-close { top: 3vw; right: 3vw; width: 9vw; height: 9vw; font-size: 6.5vw; }
.vf-touch .vf-eyebrow { font-size: 3.2vw; margin-bottom: 2vw; }
.vf-touch .vf-title { font-size: 5.6vw; }
.vf-touch .vf-sub { font-size: 3.4vw; margin-top: 2vw; }
.vf-touch .vf-actions { gap: 2.4vw; margin-top: 5vw; }
.vf-touch .vf-btn { height: 12.5vw; font-size: 3.7vw; border-radius: 1vw; gap: 2vw; }
.vf-touch .vf-btn svg { width: 4.4vw; height: 4.4vw; }
.vf-touch .vf-reveal { margin-top: 3vw; padding: 3.4vw 4vw; }
.vf-touch .vf-num { font-size: 5.2vw; }
.vf-touch .vf-copy { height: 8.5vw; padding: 0 3.4vw; font-size: 3.2vw; }
.vf-touch .vf-foot { font-size: 3vw; margin-top: 4.5vw; }
.vf-touch .vf-toast { font-size: 3.4vw; padding: 3vw 4.4vw; bottom: 8vw; }