@charset "utf-8";
/* ==============================================================
   [남수헌 어댑터] 다국어 전용 스타일
   - 원본 CSS는 건드리지 않는다. tran_header.php에서 원본 CSS 뒤에 로드된다.
   - 마크업: .lang-switch-wrap > .lang-switch > a  (현재 언어에 .on, 미번역 언어에 .disabled)
   - 삽입 위치 2곳: 데스크탑 .header-container / 모바일 .mUtility-nav(.lang-switch-m)

   남수헌 헤더 전제 (common.css 확인):
     .header            position:absolute; height:100px  — 어두운 히어로 위 → GNB 글씨 흰색
     .header-container  display:flex; justify-content:space-between; width:95%
     .header-btn        background:var(--primary,#A48953); color:#fff; height:40px; font-family:var(--serif)
     @media (max-width:1024px)  .header-nav-wrapper{display:none} / .mHeader{display:flex; background:#fff}
       → 모바일 헤더는 흰 배경이므로 스위처 색을 반대로 뒤집어야 한다.

   ※ main_body.php의 .site-header / .mobile-nav 는 전체가 HTML 주석 처리돼 있어 렌더되지 않는다.
     메인·서브 통틀어 실제 헤더는 header.php의 #header 하나뿐 → 스위처 삽입도 여기 한 곳이면 충분.
   ============================================================== */

/* ---------- 데스크탑: 어두운 히어로 위 (흰색 계열) ---------- */
.lang-switch-wrap {display: flex; align-items: center; margin-top:16px;}

.lang-switch {
    display: flex; align-items: center; gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50px;
}
.lang-switch a {
    display: inline-block;
    padding: 4px 12px 3px;
    border-radius: 50px;
    font-family: var(--serif, 'Aboreto', serif);
    font-size: 13px; line-height: 1.5; letter-spacing: 0;
    white-space: nowrap;
    color: #fff;
    transition: background-color .3s ease, color .3s ease;
}
.lang-switch a:hover {background: rgba(255, 255, 255, .18);}
.lang-switch a.on {background: var(--primary, #A48953); color: #fff;}
.lang-switch a:focus-visible {outline: 2px solid var(--point, #ffbf3e); outline-offset: 2px;}

/* 번역 안 된 페이지의 en·cn — 비활성(회색·클릭불가).
   남수헌은 manifest에 콘텐츠 33개가 전부 들어 있어 실제로 보일 일은 드물다. */
.lang-switch a.disabled {opacity: .35; cursor: not-allowed; pointer-events: none;}
.lang-switch a.disabled:hover {background: none;}

/* ★ 스위처를 flex 흐름 밖으로 뺀다 — 이게 레이아웃 깨짐의 핵심 수정이다.
   common.css:114  #header .gnb-s{max-width:900px; width:100%; margin-left:auto; margin-right:20px}
   common.css:116  #header .gnb-s .gnb > li{flex:1}          → 6개면 각 150px
   common.css:117  #header .gnb-s .gnb > li > a{height:60px} → white-space 지정 없음

   .header-container(display:flex)에 스위처를 4번째 항목으로 넣으면 .gnb-s가 그만큼 눌리고,
   영문 라벨은 국문의 약 2.7배 길이(최상위 6개 합계 18자 → 48자)라 각 칸에서 2줄로 접히면서
   60px 높이를 넘겨 헤더가 무너진다. 국문은 짧아 증상이 안 나타난다.
   → 스위처를 .header(position:absolute) 기준으로 절대배치해 GNB 폭을 전혀 잠식하지 않게 한다.
     .header는 height:100px, .header-container는 margin-top:30px이므로 위쪽 30px가 비어 있다. */
.header-nav-wrapper .lang-switch-wrap {
    position: absolute; top: 8px; right: 2.7%;
    margin-top: 0; z-index: 2;
}
.header-nav-wrapper .lang-switch {padding: 2px;}
.header-nav-wrapper .lang-switch a {padding: 2px 13px 1px; font-size: 12px; letter-spacing: 0.02em;}

/* 영문·중문 라벨은 길다 — 절대 줄바꿈시키지 않는다(2줄이 되면 60px 높이를 넘겨 무너짐) */
#header .gnb-s .gnb > li > a {white-space: nowrap;}

/* 1400px 이하에서 원본이 .gnb-s{width:700px} + font-size:18px로 줄인다.
   영문·중문은 여기서 더 조인다. */
@media (max-width: 1400px) {
    html[lang="en"] #header .gnb-s .gnb > li > a,
    html[lang="zh-CN"] #header .gnb-s .gnb > li > a {font-size: 15px; letter-spacing: -0.3px;}
}
@media (max-width: 1200px) {
    html[lang="en"] #header .gnb-s .gnb > li > a,
    html[lang="zh-CN"] #header .gnb-s .gnb > li > a {font-size: 14px;}
    .header-nav-wrapper .lang-switch a {padding: 2px 7px 1px; font-size: 10px;}
}

/* ---------- 데스크탑: navbar-fixed-top → 어두운 계열로 반전  ---------- */
.navbar-fixed-top .lang-switch{border:1px solid rgb(153 153 153 / 45%);}
.navbar-fixed-top .lang-switch a:not(.on){color:var(--primary);}


/* ---------- 모바일(≤1024px): .mHeader는 흰 배경 → 어두운 계열로 반전 ---------- */
.lang-switch-m {display: none;}

@media (max-width: 1024px) {
    .lang-switch-m {display: flex; margin-top: 0;}
    .lang-switch-m .lang-switch {
        gap: 0; padding: 2px;
        border-color: rgba(0, 0, 0, .18);
    }
    .lang-switch-m .lang-switch a {
        padding: 3px 7px 2px;
        font-size: 11px; letter-spacing: -.2px;
        color: var(--text-dark, #2c2c2c);
    }
    .lang-switch-m .lang-switch a:hover {background: rgba(0, 0, 0, .06);}
    .lang-switch-m .lang-switch a.on {background: var(--primary, #A48953); color: #fff;}
}


/* ---------- 번역 대기 배너 (tran_sub_body_full.php 폴백) ----------
   ★ 반드시 화면 하단 고정. 문서 흐름 맨 위에 두면 안 된다.
     #header{position:absolute; top:0; height:100px}이고 배경이 투명이라
     어두운 .sub-hero 이미지를 배경으로 전제한다. 배너가 흐름 맨 위에 오면
     헤더가 연노랑 배너에 겹쳐 흰 GNB 글씨가 묻히고 .sub-hero가 42px 밀려난다.
     (실측: banner y=0 h=42 / #header y=0 h=100 / .sub-hero y=62 → 헤더 붕괴로 보임)
     하단 고정이면 레이아웃을 전혀 건드리지 않으면서 안내는 계속 보인다. */
.trans-pending {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 200;
    margin: 0;
    padding: 10px 16px;
    text-align: center;
    background: #fff3cd;
    border: 0; border-top: 1px solid #ffe08a;
    border-radius: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    font-size: 14px; line-height: 1.5;
    color: var(--text-dark, #2c2c2c);
}

/* ---------- 중문 폰트 폴백 ----------
   원본 GNB는 font-family:'Hahmlet','Pretendard',serif — 둘 다 한글 웹폰트라
   간체 중국어 글리프가 없다. OS 기본 폴백(Windows 맑은고딕/YaHei, macOS PingFang)으로
   떨어지면서 브랜드 타이포와 어긋난다. 중문일 때만 CJK 지원 폰트를 앞에 세운다. */
html[lang="zh-CN"] body,
html[lang="zh-CN"] #header .gnb-s .gnb a,
html[lang="zh-CN"] .header-btn,
html[lang="zh-CN"] .allMenu,
html[lang="zh-CN"] .site-footer {
    font-family: 'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
}

/* ---------- 언어별 레이아웃 보정 ----------
   국문은 글자수가 적어 한 줄에 들어가지만 영문·중문은 길어져 GNB가 줄바꿈될 수 있다.
   ※ 실제 값은 배포 후 육안 확인하며 조정할 것 — 아래는 보수적 시작점이다. */
html[lang="en"] #header .gnb-s .gnb > li > a,
html[lang="zh-CN"] #header .gnb-s .gnb > li > a {
    font-size: 17px;
    letter-spacing: -0.2px;
}
html[lang="en"] .header-btn,
html[lang="zh-CN"] .header-btn {white-space: nowrap;}

/* 드롭다운(2차) 항목도 영문은 길다 — 원본은 li ul li a{font-size:16px} */
html[lang="en"] #header .gnb-s .gnb > li ul li a,
html[lang="zh-CN"] #header .gnb-s .gnb > li ul li a {white-space: nowrap; letter-spacing: 0;}

/* 전체메뉴(사이트맵) 오버레이 — 영문 메뉴명이 길어 2줄이 되면 높이가 어긋난다 */
html[lang="en"] .allMenu .allmenu a,
html[lang="zh-CN"] .allMenu .allmenu a {word-break: keep-all;}


/* ---------- 영문 ---------- */
html[lang="en"] {
	/*header 및 gnb 영문에 맞춤*/
	#header .gnb-s{max-width:850px}
	.header-btn{letter-spacing:0; font-size:var(--fs-14);}
	#header .gnb-s .gnb > li:nth-of-type(6){margin-left:0;}
	#header .gnb-s .gnb > li:has(a[title="Rooms"]){margin-left:28px; }
	#header .gnb-s .gnb > li:has(a[title="Art"]){flex:0 1 100px}
	
	.section-brand-story .stat-item{max-width:25rem}
	.section-room .room-intro-text .intro-main,
	.section-lounge .lounge-intro-title{font-size:clamp(40px, 4.5vw, 72px)}
	
	/*sub*/
	.about-heritage h2, .about-space h2, .about-form h2, .about-courtyard h2{font-size:var(--fs-36);}
	.sub-parallax-tall .sub-parallax-quote p {font-size: var(--fs-28);}
	.about-form-body h3{font-size:var(--fs-28)}
	.sub-cta h2{font-size:var(--fs-32);}
	.sub-sec-dark .sub-sec-intro h2{line-height:1.3}
	.sub-sec-dark .sub-sec-desc{line-height:1.8}
	.sub-sec-dark .sub-sec-desc, .lounge-info p{opacity:0.5}
	/*영문 중복 표기 제거*/
	:where(.stay-features, .stay-gallery, .stay-notice, .stay-marquee-info, .info-rate, .info-season, .info-terms, .cancel-fee, .cancel-notice, .loc-map, .loc-ways) em[lang="en"]{display:none}
}

/* ---------- 주변관광지 카드 카테고리 배지 ----------
   ※ 같은 카테고리의 필터 버튼 라벨은 HTML이라 glossary로 고정한다 — 둘이 어긋나지 않게. */
html[lang="en"] .tour-card[data-cat="heritage"]::after { content: "Heritage"; }
html[lang="en"] .tour-card[data-cat="museum"]::after   { content: "Museum"; }
html[lang="en"] .tour-card[data-cat="nature"]::after   { content: "Nature · Park"; }
html[lang="en"] .tour-card[data-cat="culture"]::after  { content: "Culture Space"; }

html[lang="zh-CN"] .tour-card[data-cat="heritage"]::after { content: "历史遗产"; }
html[lang="zh-CN"] .tour-card[data-cat="museum"]::after   { content: "博物馆"; }
html[lang="zh-CN"] .tour-card[data-cat="nature"]::after   { content: "自然 · 公园"; }
html[lang="zh-CN"] .tour-card[data-cat="culture"]::after  { content: "文化空间"; }