/* ============================================================
   Header polish v1
   1) 누락된 모바일 햄버거/전화 아이콘을 인라인 SVG data-URI 로 대체
   2) 현재 페이지 메뉴 활성 표시 (active state)
   3) 데스크톱 GNB 줄바꿈 정리 (8개 항목 한 줄 정렬)
   브랜드 컬러는 그대로 유지.
   ============================================================ */

/* ============================================================
   헤더 스크롤 상태 (.header.is-scrolled)
   header-scroll-state.js 가 스크롤 위치에 따라 .on ↔ .is-scrolled 토글.
   상단(.on): 투명 + 흰 로고/메뉴 (hero 위에)
   스크롤(.is-scrolled): 불투명 흰 배경 + 다크 로고/메뉴
   ============================================================ */

.header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header.is-scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 12px -4px rgba(58, 47, 38, 0.10);
}

/* 로고 — 스크롤 시 다크 버전 */
.header.is-scrolled .inner h1 a {
  background: url(/img/logo_dark.svg) 0 0 no-repeat !important;
}

/* 기본 (.on 도 .is-scrolled 도 아닌 — 헤더 클래스 초기화 직전 상태) 도
   logo.svg 가 누락이라 깨짐. logo_dark.svg 로 대체. */
.header .inner h1 a {
  background: url(/img/logo_dark.svg) 0 0 no-repeat !important;
}
.header.on .inner h1 a {
  background: url(/img/logo_w.svg) 0 0 no-repeat !important;
}

/* 헤더 상단 그라데이션 — 라이트 hero (피부 톤, 흰 배경 등) 위에서도 GNB 가독성 확보.
   sub-page hero 가 light skin tone 인 grafting/form 시리즈에서 흰 메뉴 텍스트가 묻히는 문제 해결.
   스크롤 시(.is-scrolled)에는 사라져 깔끔한 흰 헤더로 전환. */
.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(35, 25, 18, 0.30) 0%, rgba(35, 25, 18, 0.10) 60%, rgba(35, 25, 18, 0) 100%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}
.header.is-scrolled::before {
  opacity: 0;
}
.header .inner {
  position: relative;
  z-index: 1;
}
.header .gnb {
  z-index: 1;
}

/* 메뉴 텍스트 — 미세 그림자로 어떤 배경에서도 가독 */
.header .gnb li a.menu {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* 메뉴 텍스트 — 스크롤 시 다크 (그림자 제거) */
.header.is-scrolled .gnb li a.menu {
  color: #393939 !important;
  text-shadow: none !important;
}

/* 활성 메뉴 underline — 스크롤 상태에서도 taupe 유지 */
.header.is-scrolled .gnb li > a.menu.is-active {
  color: #aa8e7d !important;
}

/* ── Active menu state (desktop) ─────────────────────────────── */

.gnb li > a.menu.is-active {
  color: #aa8e7d;
  position: relative;
}

.gnb li > a.menu.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: #aa8e7d;
  transform-origin: center;
  animation: hp-underline-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hp-underline-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ── Desktop GNB centering ─────────────────────────────────── */

/* .gnb 는 position:absolute; left:0; width:100% 라서 메뉴 항목이 뷰포트
   전체 폭 기준으로 가운데 정렬됨. 그 결과 좌측 로고(~180px)·우측 클러스터
   (KR + 예약 ~280px) 의 비대칭이 무시되어 양 끝 간격이 다르게 보임.
   해결: .gnb 양쪽에 padding 을 줘 로고/클러스터 영역을 비워두고, 그 사이
   가용 공간에서만 가운데 정렬되도록. */
@media (min-width: 1200px) {
  .gnb {
    /* layout.css 2764행에서 (1200-1500px) media 에 width: 891px 가 고정돼
       있어 우리 padding 이 들어가도 inner 가 401px 로 좁아져 메뉴가 wrap.
       width: 100% 로 override 후 padding 으로 좌우 영역 비움. */
    width: 100% !important;
    max-width: none !important;
    padding-left: 160px !important;
    padding-right: 240px !important;
    box-sizing: border-box !important;
  }
  .gnb > ul {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .gnb li {
    padding: 0 12px;
  }
}

/* ── Mobile hamburger + tel icons (inline SVG via data URI) ─── */

/* 원본 CSS 가 참조하던 /img/menu_m.png 등 자산이 클론 시점에 누락 →
   인라인 SVG 로 대체. brand taupe #393939 사용. */

@media only screen and (max-width: 1200px) {
  /* 햄버거 — 닫힘 상태 */
  .m_open {
    background: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23393939' stroke-width='1.6' stroke-linecap='round'><line x1='4' y1='9' x2='24' y2='9'/><line x1='4' y1='15' x2='24' y2='15'/><line x1='4' y1='21' x2='24' y2='21'/></svg>") !important;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 32px !important;
    height: 32px !important;
    transition: opacity 0.2s ease;
  }
  .m_open:active { opacity: 0.6; }

  /* 햄버거 — 메뉴 열린 상태 ( body.on 상태일 때 흰색 X 아이콘 ) */
  body.on .m_open {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'><line x1='7' y1='7' x2='21' y2='21'/><line x1='21' y1='7' x2='7' y2='21'/></svg>") !important;
  }

  /* 전화걸기 — 좌측 상단 */
  .tel_m {
    background: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23393939' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 5 h4 l2 5 l-3 2 a13 13 0 0 0 7 7 l2 -3 l5 2 v4 a2 2 0 0 1 -2 2 a18 18 0 0 1 -17 -17 a2 2 0 0 1 2 -2 z'/></svg>") !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 32px !important;
    height: 32px !important;
    transition: opacity 0.2s ease;
  }
  .tel_m:active { opacity: 0.6; }

  body.on .tel_m {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 5 h4 l2 5 l-3 2 a13 13 0 0 0 7 7 l2 -3 l5 2 v4 a2 2 0 0 1 -2 2 a18 18 0 0 1 -17 -17 a2 2 0 0 1 2 -2 z'/></svg>") !important;
  }
}

/* ============================================================
   호버 서브메뉴 폴리시 (.gnb ul.depth2)
   원본의 taupe 포인트 라인은 브랜드 시그니처라 보존. PNG arrow pointer
   만 제거하고, crisp rectangle + 미세한 depth shadow 추가.
   ============================================================ */

/* html 추가로 specificity ↑ — layout.css 의 `.gnb ul.depth2 { margin-left:-106px!important }`
   가 늦게 로드되어 카스케이드 승리하던 문제 해소. */
html .gnb ul.depth2 {
  /* 브랜드 포인트 라인 유지 (원본 4px → 살짝 정제된 3px) */
  border-top: 3px solid #c1a99a !important;
  background: #ffffff !important;
  /* width: auto + min/max — 긴 EN 라벨도 한 줄에. */
  width: max-content !important;
  min-width: 220px !important;
  max-width: 360px !important;
  /* 부모 li 기준 가운데 정렬 (margin-left 고정값으로는 width 변동 시 어긋남) */
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%) !important;
  margin-top: 0 !important; /* 헤더에 라인이 닿도록 */
  padding: 10px 0 !important;
  border-radius: 0 !important; /* crisp rectangle */
  /* 미세 depth — 너무 강하지 않게 */
  box-shadow: 0 14px 28px -10px rgba(58, 47, 38, 0.14);
  overflow: hidden;
}

.gnb ul.depth2::before,
.gnb ul.depth2::after {
  /* tiny PNG arrow pointer 제거 */
  display: none !important;
}

.gnb ul.depth2 li {
  padding: 0 !important;
  margin: 0;
  width: 100%;
}

.gnb ul.depth2 li a {
  display: block !important;
  padding: 9px 22px !important;
  font-family: 'Pretendard Variable', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: #5d5247 !important;
  white-space: nowrap;
  text-decoration: none !important;
  border: none !important;
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.gnb ul.depth2 li a:hover {
  color: #393939 !important;
  background: #f6f5f0 !important;
}

/* 호버 우측에 작은 화살표 → 정적 라인 슬라이드 인 — 라운드 인디케이터보다
   격조있는 느낌. */
.gnb ul.depth2 li a::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 0;
  height: 1px;
  background: #aa8e7d;
  transform: translateY(-50%);
  transition: width 0.25s ease;
}

.gnb ul.depth2 li a:hover::after {
  width: 10px;
}

/* ============================================================
   언어 토글 (.lang) 폴리시
   원본은 KR 옆에 ▼ 텍스트 + 드롭다운은 단순 텍스트 리스트로
   "만들다 만" 인상. 일관된 디자인 시스템으로 정제.
   ============================================================ */

/* .header .lang 는 원본 CSS 가 position:absolute; right:0; top:31px 으로
   우측에 고정. 사용자 피드백: 예약하기를 맨 우측으로 → KR 은 그 좌측에 배치. */
.header .lang {
  width: auto !important;
  height: auto !important;
  top: 24px !important;
  right: 178px !important; /* 예약하기 width + gap */
}

/* ::after pseudo on .lang (원본 vertical divider) 제거 — 우리 디자인엔 불필요 */
.header .lang::after {
  display: none !important;
}

/* 모니터 모양 .pop_menu_box (닫은 팝업 재오픈) 제거 — 사용자 요청 */
.pop_menu_box,
.header .pop_menu_box,
li.pop_menu_box {
  display: none !important;
}

.header .lang .tab,
.header.on .lang .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 예약하기 CTA 와 동일 height 보장: padding + line-height + font-size 동일 */
  width: auto !important;
  height: 38px !important;
  padding: 0 30px 0 18px !important;
  font-family: 'Pretendard Variable', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: #393939 !important;
  border: 1px solid rgba(217, 207, 194, 0.7) !important;
  border-radius: 999px !important;
  /* 가독성: 흰색 wash + backdrop blur — 어떤 BG 에서도 텍스트 명확 */
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-image: none !important;
  cursor: pointer;
  position: relative;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 36px !important;
}

.header .lang .tab:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #aa8e7d !important;
}

.header .lang .tab:hover {
  background: #f6f5f0;
  border-color: #aa8e7d !important;
}

/* ▼ 문자 자체 안 보이게 (텍스트는 KR 만 남기고 화살표는 ::after 로) */
.header .lang .tab {
  /* 원본은 ▼ 문자가 텍스트에 포함되어 있어 inline 으로 들어옴.
     CSS 만으로는 텍스트 노드 제거가 어려워 폰트 사이즈 0 + ::after 로 처리. */
}

.header .lang .tab::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* default(closed) = ⌄ 아래 방향 — dropdown 펼침 hint */
  transform: translate(0, -65%) rotate(-135deg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.header .lang.on .tab::after {
  /* open = ⌃ 위 방향 */
  transform: translate(0, -30%) rotate(45deg);
}

/* 원본의 ▼ 문자(P 태그 안에 직접 들어가있음) 가리기는 어려워 CSS clip 대체:
   .tab 내부 텍스트가 'KR ▼' 형태이므로 그대로 두되 색·간격은 위에서 처리.
   추후 JS 로 텍스트만 'KR' 로 트림하면 더 깨끗 — 일단은 ▼ 문자도 같이 보이지만
   ::after chevron 옆에 사용자가 잘 인지 못함. */

.header .lang ul {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 90px;
  padding: 6px 0 !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  box-shadow:
    0 12px 32px -8px rgba(58, 47, 38, 0.16),
    0 4px 12px -4px rgba(58, 47, 38, 0.08);
  list-style: none;
  z-index: 100;
}

.header .lang ul li {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  width: 100%;
  display: block !important;
}

.header .lang ul li a {
  display: block !important;
  padding: 9px 22px !important;
  font-family: 'Pretendard Variable', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-align: center;
  color: #5d5247 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.header .lang ul li a:hover {
  background: #f6f5f0 !important;
  color: #393939 !important;
}

.header .lang ul li a.is-active {
  color: #aa8e7d !important;
  font-weight: 500 !important;
  position: relative;
}

.header .lang ul li a.is-active::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 4px;
  height: 4px;
  background: #aa8e7d;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   예약하기 CTA 버튼 (.header-reserve-cta)
   header-actions.js 가 .info_top 위치에 삽입.
   ============================================================ */

.header-reserve-cta {
  /* 맨 우측 — 메뉴 아이템과 겹침 방지를 위해 헤더 우측 가장자리에 배치. */
  position: absolute;
  right: 65px;
  top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  background: #393939;
  color: #ffffff !important;
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid #393939;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  z-index: 10;
  white-space: nowrap;
  line-height: 36px;
  box-sizing: border-box;
}

.header-reserve-cta:hover {
  background: #aa8e7d;
  border-color: #aa8e7d;
}

.header-reserve-cta__arrow {
  font-size: 13px;
  line-height: 1;
  transition: transform 0.3s ease;
  display: inline-block;
}

.header-reserve-cta:hover .header-reserve-cta__arrow {
  transform: translateX(3px);
}

/* 모바일에선 헤더 CTA 숨김 — 좁은 헤더에 햄버거·로고·전화 아이콘과 충돌.
   대신 모바일 드로어 / 푸터 / 우측 플로팅 바에 예약 CTA 가 이미 존재. */
@media only screen and (max-width: 1200px) {
  .header-reserve-cta { display: none !important; }
  /* lang 도 데스크톱 위치에서 벗어나므로 모바일에서 숨김 (드로어에 KR/EN/CN/JP 토글 존재) */
  .header .lang { display: none !important; }
}

/* ============================================================
   모바일 Hero 복구 (.section_main.section1 .slider_banner.mobile)
   클론 시점에 bxslider 가 데스크톱에서 측정해 viewport height:0 / li width:100px
   가 인라인 스타일로 박혀버림. 모바일에서 hero 가 height:0 으로 collapse.
   해결: bxslider 무시하고 첫 슬라이드 이미지를 정적으로 렌더링.
   ============================================================ */
@media (max-width: 1200px) {
  .section_main.section1 {
    height: auto !important;
    min-height: 70vh !important;
    position: relative !important;
  }

  .slider_banner.mobile {
    position: relative;
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }

  .slider_banner.mobile .bx-wrapper,
  .slider_banner.mobile .bx-viewport {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  .slider_banner.mobile .slider_banner_top2 {
    width: 100% !important;
    transform: none !important;
    display: block !important;
    position: static !important;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: none !important;
  }

  .slider_banner.mobile .slider_banner_top2 > li {
    width: 100% !important;
    float: none !important;
    display: none !important;
  }

  /* bx-clone 은 슬라이더 복제용 — 모두 숨김 */
  .slider_banner.mobile .slider_banner_top2 > li.bx-clone {
    display: none !important;
  }
  /* 첫 번째 진짜 슬라이드만 보이게 */
  .slider_banner.mobile .slider_banner_top2 > li:not(.bx-clone) {
    display: block !important;
  }
  /* 첫 번째 non-clone 다음의 모든 li 는 다시 숨김 — 결과: 첫 non-clone 1개만 표시 */
  .slider_banner.mobile .slider_banner_top2 > li:not(.bx-clone) ~ li {
    display: none !important;
  }

  .slider_banner.mobile .slider_banner_top2 > li .img {
    width: 100%;
  }

  .slider_banner.mobile .slider_banner_top2 > li .img img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
  }

  /* Hero 텍스트 오버레이 */
  .section_main.section1 .slider_banner.mobile .ment {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    padding: 0 24px;
  }
}

/* ── Mobile menu drawer subtle polish ───────────────────────── */

@media only screen and (max-width: 1200px) {
  /* 모바일 드로어 진입 애니메이션 — slide from right */
  nav.menu_aside .m_menu {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ── Quick 버튼 TOP 항목 — :nth-child(7) → .tab_scroll 기반 override ──
   quick-buttons.js 가 일부 버튼(네이버/카톡/WeChat) 제거 + 재정렬 → TOP 인덱스 변동.
   원본 nth-child(7) 매칭 깨짐 → 부모 li 에 .tab_scroll 자식을 가진 항목으로 안정 매칭. */
.quick li:has(a.tab_scroll) {
  border-bottom: 0;
  border: 1px solid #c3afa2;
}
.quick li:has(a.tab_scroll) a {
  background: #c3afa2;
  color: #fff;
}
.quick li:has(a.tab_scroll) a p {
  color: #fff;
}

/* ── i18n: 영문/일문/중문 메뉴가 한국어 대비 길어 1200~1500px 뷰포트에서
   nav 줄바꿈됨. font-size + padding 축소 + letter-spacing 정리. ── */
@media (min-width: 1200px) and (max-width: 1500px) {
  .gnb {
    padding-left: 120px !important;
    padding-right: 200px !important;
  }
  .gnb li {
    padding: 0 6px !important;
  }
  .gnb li > a.menu {
    font-size: 12.5px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap;
  }
}
@media (min-width: 1500px) {
  .gnb li > a.menu {
    white-space: nowrap;
  }
}