/* ─── 메뉴/카드 드래그 차단, 본문 텍스트는 선택 가능 ─── */
 body {
 -webkit-user-select: none; -ms-user-select: none; user-select: none;
 -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
 }
 input, textarea, select, [contenteditable="true"],.selectable,
 p, li, td, th, pre, code, blockquote, article,.prose,.content,
 h1, h2, h3, h4, h5, h6 {
 -webkit-user-select: text; -ms-user-select: text; user-select: text;
 -webkit-touch-callout: default;
 }

 @font-face {
 font-family: 'Cafe24Ssurround';
 src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
 font-weight: normal;
 font-style: normal;
 }

 /* V31 —.font-sans /.font-serif override 제거 (2026-05-15).
 Tailwind 정적 빌드 도입 후 cascade 우선 이슈 (link 위, inline style 아래) 로
 우리 디자인 토큰 (Pretendard) 이 'Noto Sans KR'/'MaruBuri' 으로 덮였음.
 Tailwind config 의 fontFamily 가 Pretendard Variable 100% 통일이라 그것만 신뢰. */
 /* 아래 5줄은 호환 유지 위해 주석 (필요 시.font-cafe24 같은 별도 클래스로 복원) */
 /*.font-sans font-bold tracking-tight { font-family: 'Cafe24Ssurround', 'Noto Sans KR', sans-serif; } */
 /*.font-sans { font-family: 'Noto Sans KR', sans-serif; font-weight: 900; letter-spacing: -0.05em; } */
 /*.font-sans tracking-wide { font-family: 'Montserrat', sans-serif; } */
 /*.font-serif { font-family: 'Nanum Brush Script', cursive; } */
 /*.font-serif { font-family: 'MaruBuri', serif; font-weight: 700; } */

 html { font-size: clamp(16px, 1vw, 20px); scroll-behavior: smooth; }

 /* ── i18n 디자인 ── 언어별 폰트 스택 + 자간/줄간 최적화
 body 의 --ava-font-body / --ava-letter / --ava-line-h 변수만 lang 별 override.
 Tailwind/inline font-family 가 명시되지 않은 모든 텍스트가 자동 상속. */
 body.lang-ko { --ava-font-body: 'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif; --ava-letter: -0.02em; --ava-line-h: 1.65; }
 body.lang-en, body.lang-ru { --ava-font-body: 'Inter','Pretendard Variable',sans-serif; --ava-letter: -0.011em; --ava-line-h: 1.6; }
 body.lang-cn { --ava-font-body: 'Noto Sans SC','Pretendard Variable',sans-serif; --ava-letter: 0; --ava-line-h: 1.7; }
 body.lang-jp { --ava-font-body: 'Noto Sans JP','Pretendard Variable',sans-serif; --ava-letter: 0.005em; --ava-line-h: 1.7; }
 body.lang-th { --ava-font-body: 'Noto Sans Thai','Pretendard Variable',sans-serif; --ava-letter: 0; --ava-line-h: 1.75; font-size: 1.02em; }

 /* 전역 텍스트 품질 + 박스 깨짐 방지 (Gemini 디테일) */
 body {
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
 letter-spacing: var(--ava-letter, -0.02em);
 line-height: var(--ava-line-h, 1.65);
 word-break: keep-all;
 overflow-wrap: break-word;
 }
 /* 본문 fade transition — 헤더는 그대로 두고 page content 만 부드럽게 (Gemini 디테일) */
 #ava-main-content { transition: opacity 220ms ease-out; }
 body.lang-switching #ava-main-content { opacity: 0.4; }

 body, html {
 /* V31 step 3: 본문 전역 폰트를 Pretendard Variable 로 통일 (Modern Clean 옵션 A)..font-sans /.font-serif 명시한 곳은 그대로 유지 — 디자인 의도 보존. */
 font-family: var(--ava-font-body, 'Noto Sans KR', sans-serif);
 margin: 0;
 background-color: #fff;
 overflow-x: hidden;
 /* 기본 커서 사용 (인트로 모드에서도 메뉴 클릭 가능해야 함) */
 cursor: default; 
 -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
 -webkit-tap-highlight-color: transparent;
 caret-color: transparent;
 }

 input, textarea {
 -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important;
 caret-color: auto !important; cursor: text !important;
 }

 /* 2026-05-25: 인트로 비디오 CSS 일괄 제거 (.intro-container ·.intro-video ·.intro-skip-btn ·.intro-touch-btn) — 컴포넌트·자산 영구 삭제와 함께 */.nav-item { cursor: pointer; position: relative; transition: 0.3s; display: flex; align-items: center; height: 100%; }.nav-item::after { content:''; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; background: #A88C64; transition: 0.3s; }.nav-item:hover::after { width: 100%; }

 /* 애니메이션 유지 */
 @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }.animate-ken-burns { animation: kenBurns 15s ease-in-out infinite alternate; will-change: transform; }
 @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }.animate-fade-in-left { opacity: 0; animation: fadeInLeft 1.2s ease-out forwards; }
 @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }.animate-fade-in-right { opacity: 0; animation: fadeInRight 1.2s ease-out forwards; }
 @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }.animate-fade-in-up { opacity: 0; animation: fadeInUp 1s ease-out forwards; }
 @keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }.animate-zoom-in { opacity: 0; animation: zoomIn 1.2s ease-out forwards; }
 /* ★ 2026-08-02 — 원래는 1 → 1.1 → 1 로 「커졌다 작아지는」 무한 애니메이션이었다.
 히어로 헤드라인이 3초마다 110% 로 커지는데, 그때마다 브라우저가
 "더 큰 요소가 그려졌다"고 판단해 LCP 후보를 새로 잡았다.
 → LCP 가 영영 확정되지 않고 4~9초를 오갔다. 무엇을 최적화해도 이 값이 안 내려간 진짜 이유.
 크기를 줄이는 방향(1 → 0.91 → 1)으로 뒤집으면 첫 그림보다 커지는 순간이 없어
 LCP 가 첫 그림에서 확정된다. 맥동의 폭·주기는 그대로라 보이는 느낌은 같다. */
 @keyframes scaleLoop { 0% { transform: scale(1); } 50% { transform: scale(0.91); } 100% { transform: scale(1); } }.animate-scale-loop { animation: scaleLoop 3s ease-in-out infinite; display: inline-block; }
 @keyframes trackingIn { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { letter-spacing: normal; opacity: 1; } }.animate-tracking-in { animation: trackingIn 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards; display: inline-block; white-space: nowrap; }
 @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }.animate-float { animation: float 4s ease-in-out infinite; display: inline-block; }
 @keyframes flyInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }.animate-fly-in-right { animation: flyInRight 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards; display: inline-block; }
 @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }.animate-bounce-in { animation: bounceIn 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards; display: inline-block; }
 @keyframes pulseStrong { 0%, 100% { transform: scale(1); text-shadow: 0 0 10px rgba(176,141,87,0.3); } 50% { transform: scale(1.05); text-shadow: 0 0 25px rgba(176,141,87,0.8); } }.animate-pulse-strong { animation: pulseStrong 2s infinite ease-in-out; display: inline-block; }
 @keyframes blurIn { from { filter: blur(10px); opacity: 0; } to { filter: blur(0); opacity: 1; } }.animate-blur-in { animation: blurIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; display: inline-block; }
 @keyframes slideSharp { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }.animate-slide-sharp { animation: slideSharp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }.text-shadow-deep { text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5); }.delay-300 { animation-delay: 0.3s; }.delay-500 { animation-delay: 0.5s; }.delay-700 { animation-delay: 0.7s; }.delay-800 { animation-delay: 0.8s; }

 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 @keyframes popUp { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }.animate-fade-in { animation: fadeIn 1s ease-out forwards; }.consult-bar-wrapper { 
 position: fixed; bottom: 30px; left: 50%; 
 transform: translateX(-50%) translateY(0);
 width: 95%; max-width: 1200px;
 /* 2026-08-01: 0.5 → 0.78. 반투명이라 뒤 배경에 따라 흰 글씨 대비가 3.25:1 까지
 떨어졌다(밝은 섹션 위). 8.13:1 로 고정. blur 는 그대로라 유리 질감 유지. */
 background: rgba(30, 30, 30, 0.78); 
 backdrop-filter: blur(10px); 
 border: 1px solid rgba(255,255,255,0.1); 
 z-index: 100; 
 box-shadow: 0 10px 40px rgba(0,0,0,0.3); 
 padding: 12px 20px;
 border-radius: 60px;
 display: flex; align-items: center; justify-content: space-between;
 transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
 opacity: 1;
 }
 .consult-bar-wrapper.hidden-bar {
 transform: translateX(-50%) translateY(200%);
 opacity: 0;
 }.consult-input-new { height: 46px; background: white; border: none; padding: 0 20px; font-size: 14px; outline: none; transition: 0.2s; border-radius: 30px; text-align: center; }.consult-input-new:focus { box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.3); }
 /* 2026-08-02 — 빠른 상담 칸 비율.
 종전엔 이름 100px·연락처 140px 고정에 문의내용만 나머지를 다 먹어,
 화면이 넓어질수록 앞의 두 칸이 상대적으로 더 좁아 보였다.
 ★ 임의값 Tailwind 클래스(lg:flex-[3] 등)는 이 사이트의 정적 ava-tw.css 에 없다.
 빌드에 없는 클래스를 쓰면 아무 일도 안 일어난다 — 그래서 CSS 로 적는다. */
 /* 마이크로카피(⚡ 문구)는 입력칸 「위」에 있어야 한다 — mb-2·lg:text-left 가 그 의도다.
 그런데 wrapper 가 display:flex(가로)라 문구가 입력칸 옆에 붙어 1200px 중 450px 을 먹었고,
 입력칸 줄에 747px 밖에 안 남아 이름·연락처가 눌려 보였다(원장 지적).
 줄바꿈을 허용하고 문구에 한 줄을 통째로 준다 — 입력칸이 1200px 를 다 쓴다. */.consult-bar-wrapper { flex-wrap: wrap; }.consult-bar-wrapper > div:first-child { flex: 0 0 100%; }
 /* 모바일: 이름·연락처는 한 줄에 둘, 문의 내용은 그 아래 전체 폭.
 마크업의 col-span-2 는 이 사이트의 정적 ava-tw.css 에 없는 클래스라 아무 일도 안 했고,
 그래서 문의 칸이 반쪽만 차지하고 옆에 빈 칸이 남아 있었다. */
 @media (max-width: 1023px) {.consult-f-memo { grid-column: 1 / -1; }
 }

 @media (min-width: 1024px) {.consult-f-name { flex: 3 1 0%; min-width: 104px; }.consult-f-phone { flex: 4 1 0%; min-width: 132px; }.consult-f-memo { flex: 6 1 0%; min-width: 180px; }
 }.consult-dropdown { position: relative; height: 46px; background: white; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 14px; color: #555; border-radius: 30px; }.consult-dropdown-list { position: absolute; bottom: 110%; left: 0; width: 100%; background: white; border: 1px solid #eee; margin-bottom: 5px; max-height: 250px; overflow-y: auto; display: none; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); overflow: hidden; z-index: 200; }.consult-dropdown.open.consult-dropdown-list { display: block; }.consult-dropdown-item { padding: 12px 15px; border-bottom: 1px solid #f5f5f5; transition: 0.2s; font-size: 13px; text-align: left; }.consult-dropdown-item:hover { background: #fcfcfb; color: #b08d57; font-weight: bold; }
 @keyframes shine { 0% { left: -100%; opacity: 0; } 20% { opacity: 0.2; } 50% { opacity: 0.5; } 100% { left: 100%; opacity: 0; } }
 /* 2026-07-17 플랫 골드 — 그라데이션·shine 애니메이션 제거 (절제된 럭셔리 톤 통일) */.consult-btn-new { position: relative; height: 50px; background: var(--ava-gold-strong, #7A6136); color: white; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; padding: 0 22px; transition: background 0.25s, transform 0.25s; white-space: nowrap; border-radius: 30px; border: none; cursor: pointer; }.consult-btn-new:hover { background: #63502C; transform: translateY(-1px); }
 
 @media (max-width: 1024px) {
 /* SSoT: 탭바 위 10px 여백. body.has-tabbar 활성 시 자동으로 56px 위로 (var 안에 합산됨) */.consult-bar-wrapper { width: 96%; max-width: 96%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(0) scale(0.85); transform-origin: bottom center; border-radius: 25px; padding: 15px; flex-direction: column; gap: 10px; }
 /* ★ 2026-08-27 — 여기도 공백이 빠져 있었다 (main.html 안에서 세 번째).
   body.has-tabbar.consult-bar-wrapper = 「body 이면서 동시에 그 클래스인 요소」 = 존재 불가.
   바를 탭바 위로 올리려던 이 규칙이 통째로 죽어 있어 바가 탭바에 깔렸고,
   그래서 «데스크탑 전용» 처럼 보였다. 실제로는 모바일 리드 통로다
   — 이 폼이 quick_consultations 에 직접 쓴다(탭바 예약은 reservations 로 간다). */
body.has-tabbar .consult-bar-wrapper { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }.consult-bar-wrapper.hidden-bar { transform: translateX(-50%) translateY(150%) scale(0.85); }.consult-input-new,.consult-dropdown,.consult-btn-new { width: 100%; }.consult-input-new,.consult-dropdown { height: 40px; font-size: 13px; border-radius: 12px; padding: 0 10px; }.consult-btn-new { height: 44px; font-size: 16px; border-radius: 12px; }
 }.admin-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s; }.custom-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s; }.custom-popup-box { background: white; width: 90%; max-width: 400px; padding: 40px 30px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3); border-top: 4px solid #A88C64; transform: scale(1); animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }.popup-icon { font-size: 40px; color: #A88C64; margin-bottom: 20px; display: block; }.popup-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 22px; color: #222; margin-bottom: 10px; }.popup-message { color: #666; font-size: 15px; margin-bottom: 30px; line-height: 1.6; white-space: pre-wrap; }.popup-btn { background: #222; color: white; border: none; padding: 12px 0; width: 100%; font-weight: bold; font-size: 14px; cursor: pointer; transition: 0.2s; }.popup-btn:hover { background: #A88C64; }.scrollbar-hide::-webkit-scrollbar { display: none; }.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }