/* Header */
.header { position: fixed; top: 0; width: 100%; font-size: var(--p4); color: #fff; z-index: 1000; transition: 0.3s ease-in-out}
/* 첫 화면이 그려지는 동안은 헤더 전환을 끈다 — 헤더가 서브탑(.top_img)보다 먼저 파싱돼서 sub.css 의
   `body.sub:has(.top_img…)` 글래스 규칙이 처음엔 안 맞다가 서브탑이 읽히면 맞는데, 그 사이 0.3초 전환(검정 글자·밑줄 → 흰색)이
   매 진입마다 돌았다(ABOUT ELEV 텍스트 채움과 겹쳐 헤더에 선이 깜빡여 보임, 2026-10-01). body.hd_init 은 headerCommon.php 가
   붙이고 DOMContentLoaded 뒤 두 프레임 지나 뗀다 — 그 뒤 스크롤·메뉴 전환은 그대로 동작한다. */
body.hd_init .header, body.hd_init .header * {transition: none !important;}
.header.on {background-color: #fff; color: var(--black);}
.header.on .util_wrap .btn_reserv {border-color: var(--black);}
.header.on .logo .logo_mono {opacity: 0;}
.header.on .logo .logo_color {opacity: 1;}
/* 시안 "흰색 백그라운드 위" 는 그림자 대신 1px 하단 라인. 메뉴가 열린 상태(.on)는 드롭다운 패널이
   자체 border-top 을 그리므로 라인을 겹쳐 그리지 않는다. */
.header.header_down { background-color: #fff; color: var(--black);}
.header.header_down:not(.on) {box-shadow: 0 0px 50px 0px rgba(0,0,0,0.1);}
/* .header.down {transform: translateY(-100%)} */
.header .header_in { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 0; width: 100%; max-width: 100%; height: var(--hdH); padding: 0 var(--hdIn); align-items: center; z-index: 3; background: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);}
/* 헤더 글래스 블러는 이 .header_in 한 겹이다 — 바깥 .header 에 backdrop-filter 를 또 걸지 말 것(블러 중첩 → 애니메이션 중 선 깜빡임, sub.css 서브탑 헤더 규칙 참고) */

.header .logo { grid-row: 1; width: 15.3rem; position: relative;}   /* 시안 #GNB 로고 153×54 */
.header .logo img{ display: block; width: 100%; }
.header .logo .logo_mono {position: absolute; left: 0; top: 0; opacity: 1;}
.header .logo .logo_color {opacity: 0;}

.header.header_down .logo .logo_mono {opacity: 0;}
.header.header_down .logo .logo_color {opacity: 1;}

/* ── GNB 우측 유틸 (Figma #GNB 207:7231 — 예약하기 / 검색 / 로그인 / 다국어, gap 30px) ──
   아이콘 SVG 는 전부 currentColor 라 헤더의 color 만 뒤집으면 흰↔검정이 따라온다.
   (비주얼 위 흰 글씨 규칙은 sub.css "서브탑 위에 얹힌 헤더" 블록) */
.header .util_wrap { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; height: 100%; position: relative; gap: 3rem;}

/* 예약하기 — 흰 알약. 배경/글자는 두 시안 공통, 테두리만 헤더 상태에 맞춰 바뀐다. */
.header .util_wrap .btn_reserv {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 1rem; padding: 1rem 2.2rem; border: 1px solid transparent; border-radius: 60rem; background: #fff; font-size: var(--p5); font-weight: 600; line-height: 1.7; letter-spacing: -0.02em; color: var(--black); white-space: nowrap; transition: background .3s, color .3s, border-color .3s;}
.header .util_wrap .btn_reserv svg {flex-shrink: 0; width: 1.8rem; height: 1.8rem;}
@media (min-width: 1241px) {
    .header .util_wrap .btn_reserv:hover {background: var(--point01); border-color: var(--point01); color: #fff;}
}
.header.header_down .util_wrap .btn_reserv {border-color: var(--black);}
/* hover 테두리는 배경과 같은 보라 — 헤더 상태별 테두리 규칙(서브탑 위 흰색 sub.css `body.sub:has(.top_img…) .header:not(…) .btn_reserv`,
   스크롤 .header_down·검색 패널 .search_open 의 검정)이 hover 보다 우선해 보라 버튼 둘레에 흰/검정 선이 남았다(2026-10-01).
   body id + 태그로 그 규칙들보다 앞세운다(sub.css 쪽 규칙은 클래스 8개라 id 없이는 못 이긴다). */
@media (min-width: 1241px) {
    #bodyCont .header .util_wrap a.btn_reserv:hover {border-color: var(--point01);}
}

.header .util_wrap .ico_btn {display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; transition: color .3s;}
.header .util_wrap .ico_btn svg {width: 2.4rem; height: 2.4rem;}
.header .util_wrap .login.ico_btn svg {width: 2.3rem; height: 2.3rem;}
.header .util_wrap .login > .ico_btn svg {width: 2.3rem; height: 2.3rem;}

/* 로그인 상태의 유저 아이콘 드롭다운(마이페이지·로그아웃) — 비로그인은 버튼이 로그인 모달을 연다.
   다국어 드롭다운(.lang_list)과 같은 골격이되, 우측 정렬 + 페이드로 열린다. */
.header .util_wrap .login {position: relative; flex-shrink: 0;}
.header .util_wrap .login_nav {position: absolute; left: 50%; top: calc(100% + 1.5rem); min-width: 14rem; padding: 1rem 0; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 2rem rgba(28,28,28,.12); opacity: 0; visibility: hidden; transform: translate(-50%,-.5rem); transition: opacity .3s, transform .3s, visibility .3s; z-index: 30;}
.header .util_wrap .login_nav.active {opacity: 1;visibility: visible;transform: translate(-50%,0);}
.header .util_wrap .login_nav a {display: flex; align-items: center; gap: .8rem; padding: .9rem 2rem; font-size: var(--p5); font-weight: 500; line-height: 1.4; white-space: nowrap; color: var(--black); transition: color .3s;}   /* 아이콘 + 글자(2026-10-15 사용자 시안) */
.header .util_wrap .login_nav a svg {flex-shrink: 0; width: 1.4rem; height: 1.4rem; min-width: 13px; min-height: 13px;}
@media (min-width: 1241px) {
    .header .util_wrap .login_nav a:hover {color: var(--point01); font-weight: 700;}
    .header .util_wrap .ico_btn:hover {color: var(--point01);}
}

/* 다국어 — 시안은 KOR + 캐럿에 2px 밑줄. 목록은 시안에 없어 공용 드롭다운으로 처리. */
.header .util_wrap .lang {position: relative; flex-shrink: 0;}
.header .util_wrap .lang .lang_btn {display: flex; align-items: center; justify-content: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid currentColor; font-size: var(--p5); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: inherit;}
.header .util_wrap .lang .lang_btn svg {flex-shrink: 0; width: .8rem; height: auto; transition: transform .3s;}
.header .util_wrap .lang.open .lang_btn svg {transform: scaleY(-1);}
.header .util_wrap .lang .lang_list {position: absolute; left: 50%; top: calc(100% + 1.5rem); transform: translateX(-50%); display: none; min-width: 9rem; padding: 1rem 0; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 2rem rgba(28,28,28,.12); text-align: center;}
.header .util_wrap .lang.open .lang_list {display: block;}
.header .util_wrap .lang .lang_list a,
.header .util_wrap .lang .lang_list .off {display: block; padding: .8rem 1.5rem; font-size: var(--p5); font-weight: 500; line-height: 1; color: var(--gray60); transition: color .3s;}
.header .util_wrap .lang .lang_list a.active {color: var(--point01); font-weight: 700;}
@media (min-width: 1241px) {
    .header .util_wrap .lang .lang_list a:hover {color: var(--point01); font-weight: 700;}
}
/* 표면 미구축 언어(langList() 의 ready:false) — 목록에는 보이되 이동은 막는다. */
.header .util_wrap .lang .lang_list .off {opacity: .35; cursor: default;}

/* 전체메뉴(햄버거) — 시안(2560 데스크톱)에는 없다. nav 가 숨는 1440 이하에서만 노출. */
.header .util_wrap .ham {display: none;}
.header .util_wrap .ham_btn svg path {transition: 0.3s ease-in-out;}

.header .util_wrap .ico svg {width: 2.2em;}


.header .nav .top_box {display: none;}
.header .nav { height: 100%;  font-size: var(--p3); position: absolute; left:50%; top: 0;  transform: translateX(-50%);}
.header .nav .depth1 { position: relative; display: flex; height: 100%; align-items: center; justify-content: center; z-index: 10; }
.header .nav .depth1 li { height: 100%; transition: color 0.3s ease-in-out;}
.header .nav .depth1 > li > a { position: relative; display: flex; height: 100%; padding: 0 3.5rem 0; font-size: var(--p3); align-items: center; justify-content: center; font-weight: 600; transition: padding 0.5s; z-index: 21; white-space: nowrap; outline: none;}   /* 시안 1뎁스 gap 70px = 좌우 3.5rem */
.header .nav .depth1 > li > a > span:before { content: ''; position: absolute; left: 50%; bottom: -5px; width: 0; height: 2px; background-color: #fff; transform: translateX(-50%); transition: width 0.5s; }
@media (min-width: 1241px) {
    .header .nav .depth1 > li > a:hover > span:before {width: 100%;}
}
.header .nav .depth1 > li > a span { position: relative; }
.header .nav .depth1 > li.active > a{color: var(--point01); font-weight: 700;}   /* 시안: 현재 메뉴는 Bold */
@media (min-width: 1241px) {
    .header .nav .depth1 > li:hover:before {opacity: 1;}
    .header .nav .depth1 > li.active:hover > a > span:before {width: 0;}
}

/* --- depth2 --- */
.header .nav .depth1 > li .depth2_wrap{ --depth2Pdt: 6rem; --depth2H: 45rem;}
.header .nav .depth1 > li .depth2_wrap { position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; border-top: 1px solid var(--gray10); border-bottom: 1px solid var(--gray10); top: 100%;
   height: var(--depth2H); max-height: calc(100vh - var(--hdH, 8.5rem)); overflow: hidden; background: #fff; opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.2s ease; } /* box-shadow: 0 5px 10px rgba(0,0,0,0.03)*/
.header .nav .depth1 > li.is-open .depth2_wrap { opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0); }
.header .nav .depth1 > li.no-transition .depth2_wrap { transition: none !important; }

.header .nav .depth2_wrap a{line-height: 1.2;}
.header .nav .depth2_wrap .depth_in {position: relative; display: flex; width: 100%; height: 100%; max-width: 164rem ;padding: 0 var(--hdIn); min-height: 0; overscroll-behavior: contain; margin: 0 auto;} /*grid-template-columns: 32% 48%; */
.header .nav .depth2_wrap .depth_in li{height: auto;}

.header .nav .depth2_wrap .depth_tit {position: relative; display: flex; flex-direction: column; flex-shrink: 0; width: 21.186%; min-height: var(--depth2H); padding-top: var(--depth2Pdt); padding-right: 5rem; border-right: 1px solid var(--gray10);}
.en .header .nav .depth2_wrap .depth_tit {width: 26%;}
.header .nav .depth2_wrap .depth_tit .tit {position: relative; font-size:var(--h4); font-weight: 600; z-index: 2; color: var(--gray90); line-height: 1.2;}
.header .nav .depth2_wrap .depth_tit .intro_img { width: 36rem; height: 20rem; margin-top: 2.5rem; overflow: hidden; }
.header .nav .depth2_wrap .depth_tit .intro_img img { width: 100%; height: 100%; object-fit: cover; }
.header .nav .depth2_wrap .depth_tit .sub_tit { margin-top: 2rem; font-size: var(--p4); margin-top: 2rem; font-weight: 400; color: var(--gray50);}

.header .nav .depth2_wrap .depth2 { width: 100%; padding: var(--depth2Pdt) 0 3rem 5rem; margin-right: 3rem; }
.header .nav .depth2_wrap.depth2s_2 .depth2 {display: grid;grid-auto-flow: row;grid-template-columns: repeat(2, minmax(0, 1fr));align-content: start;}
.header .nav .depth2_wrap.depth2s_2 .depth2 > li:nth-child(2) ,
.header .nav .depth2_wrap.depth2s_2 .depth2 > li:first-child {padding-top: 0; border-top: none;}
.header .nav .depth2_wrap .depth2 > li { display: flex; gap: 5rem; font-size: var(--p4); border-top: 1px solid var(--gray10); padding: 2.5rem 2rem; }
.header .nav .depth2_wrap .depth2 > li:first-child { padding-top: 0; border-top: none; }
.header .nav .depth2_wrap .depth2 > li > a { padding-left: 0; width: 16rem; flex-shrink: 0 ;font-size: var(--p1); font-weight: 600; white-space: nowrap; transition: color 0.3s ease-in-out;}
.en .header .nav .depth2_wrap .depth2 > li > a, .ja .header .nav .depth2_wrap .depth2 > li > a {width: 22rem;}
.ja .header .nav .depth2_wrap .depth2 > li > a {white-space: normal;}   /* 일본어 2뎁스명이 22rem 보다 긴 경우(「エイジングケア＆ダイエット」) 옆 3뎁스 쪽으로 넘치지 않고 두 줄로 — 2026-10-15 */
.header .nav .depth2_wrap .depth2.wide > li > a {width: 27rem;}
.header .nav .depth2_wrap .depth2 > li > a[target="_blank"] {padding-right: 1.2em; position: relative;}
.header .nav .depth2_wrap .depth2 > li > a[target="_blank"]::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 0.75em; height: 0.75em; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M320 0L288 0l0 64 32 0 82.7 0L201.4 265.4 178.7 288 224 333.3l22.6-22.6L448 109.3l0 82.7 0 32 64 0 0-32 0-160 0-32L480 0 320 0zM32 32L0 32 0 64 0 480l0 32 32 0 424 0 32 0 0-32 0-128 0-32-64 0 0 32 0 96L64 448 64 96l96 0 32 0 0-64-32 0L32 32z"/></svg>') no-repeat center / contain;}

.header .nav .depth2_wrap .depth2 > li > a span {position: relative;}
.header .nav .depth2_wrap .depth2 > li > a span::before {content: ""; position: absolute; left: -0.5em; top: 50%; transform: translate(-100%, -50%) ;width: 0.25em; opacity:  0;height: 0.25em; background-color:var(--point01); border-radius: 50%; transition: opacity 0.3s ease-in-out;}

.header .nav .depth2_wrap .depth2 > li.active > a { color: var(--point01); }
@media (min-width: 1241px) {
    .header .nav .depth2_wrap .depth2 > li:hover > a { color: var(--point01); }
}
.header .nav .depth2_wrap .depth2 > li.active span::before {opacity: 1;}
@media (min-width: 1241px) {
    .header .nav .depth2_wrap .depth2 > li:hover span::before {opacity: 1;}
}

/* depth2 7개 이상 */
.header .nav .depth2_wrap .depth2.two_col { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.header .nav .depth2_wrap .depth2.two_col > li:nth-child(-n+2) { padding-top: 0; border-top: none; }


/* --- depth3 ---*/
.header .nav .depth2_wrap .depth3 { display: flex; flex-wrap: wrap; gap: 1rem 5rem;}
.header .nav .depth2_wrap .depth3 > li > a { font-size: var(--p3); width: auto; font-weight: 500; color: var(--gray50); white-space: nowrap; transition: 0.3s ease-in-out;}
.header .nav .depth2_wrap .depth3 > li.active > a {color: var(--gray90); font-weight: 700;}
@media (min-width: 1241px) {
    .header .nav .depth2_wrap .depth3 > li:hover > a {color: #000;}   /* 굵기 변화 없이 색만 검정(2026-10-14 사용자 지시 — --black 은 --gray90 과 같은 값이라 #000) */
}


/* --- right --- */
.header .nav .depth2_wrap .header_img {flex-shrink: 0; padding: var(--depth2Pdt) 0;}
.header .nav .depth2_wrap .header_img .img {height: 100%; overflow: hidden; border-radius: 1.5rem;}
.header .nav .depth2_wrap .header_img .img img{height: 100%;}

.header .nav .depth1 li.is-open > a{color: var(--point01);}
.header .nav .depth1 li.is-open > a > span:before {width: 100%;}
.header.on .nav .depth1 li.is-open > a > span:before {background-color: var(--point01);}
/* 하위 메뉴가 없는 1뎁스(li.no-depth2 — BEFORE & AFTER, 2026-10-02)는 패널이 열리지 않아 위 .on/.is-open 표시를 못 받는다.
   스크롤된 흰 헤더(.header_down)에서 기본 흰 밑줄이 배경에 묻히므로, 다른 1뎁스 hover(패널 열림)와 같은 보라 글자 + 보라 밑줄로 맞춘다.
   비주얼 위 투명 헤더(흰 글자)·텍스트형 서브(검정 글자)는 기존 hover 그대로. */
@media (min-width: 1241px) {
    .header.header_down .nav .depth1 > li.no-depth2 > a:hover {color: var(--point01);}
}
.header.header_down .nav .depth1 > li.no-depth2 > a > span:before {background-color: var(--point01);}







/* ---------- site map ---------- */
.site_map { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--point01);  z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
.site_map.on { opacity: 1; pointer-events: visible; }

.site_map .top {display: flex; align-items: center; width: 184rem; padding: 0 6rem 5rem 3rem; max-width: 100%;}
.site_map .top .logo {width: 28rem; position: relative;}
.site_map .top .logo_color {opacity: 0;}
.site_map .top .logo a {display: flex; align-items: center;  }
.site_map .top .close_btn {width: var(--h5); height: var(--h5); transition: 0.3s ease-in-out; margin-left: auto;}
.site_map .top .close_btn svg {width: 100%; height: auto;}

.site_map .list { display: flex; align-items: flex-start; justify-content: space-between; color: #fff; padding: 0 6rem;}
.site_map .cont {border-top: 1px solid rgba(255,255,255,0.4); width: 100%;}
.site_map .cont .list {width: 184rem; margin: 10rem auto 0; max-width: 100%;}
.site_map .cont .list > .depth1 > a { position: relative; margin-bottom: 1.6em; font-size: var(--h7); font-weight: 700; }
.site_map .cont .list > .depth1 > a:before { content: ''; position: absolute; left: 0; top: -0.6em; width: 0.4em; height: 0.4em; border-radius: 100%; background-color: var(--blue3); transform: translateY(-300%); opacity: 0; transition: opacity 0.5s, transform 0.5s; }
.site_map .cont .box.active .depth1:before { transform: translateY(0); opacity: 1; }
.site_map .cont .depth2 { margin-top: 5rem;  }
.site_map .cont .depth2 > li {  transition: color 0.6s; font-size: var(--p1);}
.site_map .cont .depth2 > li + li {margin-top: 0.9em;}
/* 1뎁스 제목 행(_sitemap-list.php li.depth2_tit) — 1440 이하 오른쪽 패널에서만 보인다 */
.site_map .cont .depth2 > li.depth2_tit {display: none;}
.site_map .cont .depth2 > li.depth2_tit + li {margin-top: 0;}
.site_map .cont .depth2 > li > a { position: relative; display: inline-block;}
.site_map .cont .depth2 > li > a::before { content: ""; position: absolute; right: -0.5em; top: 50%; transform: translate(100%, -50%);display: block; width: 0.35em; height: 0.35em; border-radius: 50%; background-color: #fff; opacity: 0;}
.site_map .cont .depth2 > li > a span { position: relative; }
.site_map .cont .depth2 > li > a span:before { content: ''; position: absolute; left: 0; bottom: -0.2em; width: 0; border-bottom: 1px solid #fff; transition: width 0.6s; }
.site_map .cont .list .depth3 {margin-top: 0.5em;}
.site_map .cont .list .depth3 li a {font-size: 0.85em; position: relative;  padding-left: 1em;  opacity: 0.6; transition: 0.3s ease-in-out;}
.site_map .cont .list .depth3 li + li {margin-top: 0.65em;}
.site_map .cont .list .depth3 li a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.45em; height: 2px; background-color: #fff; }


 .site_map .cont .depth2 > li.out_link > a span:after {content: ""; position: absolute; right: -10px; top: 50%; transform: translate(100%,-50%) ;display: block; width:0.8em; height: 0.8em; transition: 0.3s ease-in-out ;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 512 512"><path d="M304 24c0 13.3 10.7 24 24 24l102.1 0L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223L464 184c0 13.3 10.7 24 24 24s24-10.7 24-24l0-160c0-13.3-10.7-24-24-24L328 0c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104L0 440c0 39.8 32.2 72 72 72l336 0c39.8 0 72-32.2 72-72l0-128c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 128c0 13.3-10.7 24-24 24L72 464c-13.3 0-24-10.7-24-24l0-336c0-13.3 10.7-24 24-24l128 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L72 32z"/></svg>') no-repeat center / contain;}


.site_map .cont .depth2 li.active { font-weight: 700;}
.site_map .cont .depth2 li.active a:before {opacity: 1;}

@media (min-width: 1241px) {
    .site_map .cont .depth2 > li > a:hover span:before {width: 100%;}
    .site_map .cont .depth2 > li .depth3 li a:hover {opacity: 1;}
}




.site_map .bg_logo {position: absolute; right: 0; bottom: 0; width: 20%;}
.site_map .site_map_menu {display: none;}   /* 바로가기(카톡 상담·인스타 등) — 768 이하에서만(그 위 폭은 푸터 .quick_float 플로팅) */
.site_map .bg_logo svg {width: 100%; height: auto;}







@media screen and (max-width: 2000px) {

    .header .nav .depth1 > li > a {padding: 0 3.5rem;}
    .ja .header .nav .depth1 > li > a {padding: 0 2.8rem;}

    
    .header .nav .depth2_wrap .depth2 > li > a{font-size: 16px;}
    .header .nav .depth2_wrap .depth3 > li > a{font-size: 14px; width: 16rem;}


}


/* 1뎁스 9개가 화면 중앙 고정이라 폭이 줄면 우측 유틸과 겹친다 — 구간별로 좌우 여백을 단계적으로 좁힌다 */
@media screen and (max-width: 1900px) { .header .nav .depth1 > li > a {padding: 0 3rem;} .ja .header .nav {left: 48%;} }
@media screen and (max-width: 1800px) { .header .nav .depth1 > li > a {padding: 0 2.5rem;} .ja .header .nav .depth1 > li > a{padding: 0 2rem; font-size: 14px;} }
@media screen and (max-width: 1700px) { .header .nav .depth1 > li > a {padding: 0 2.2rem;} .header .nav {left: 48%;}}


@media screen and (max-width: 1640px) {
    /* 가운데 정렬 nav 가 우측 유틸(예약하기 알약 포함)과 겹치지 않게 좁힌다 */
    .header .nav .depth1 > li > a {padding: 0 2rem; font-size: 14px;}
    .ja .header .nav {left: 47%;}
    .ja .header .nav .depth1 > li > a {font-size: 11px; padding: 0 1.8rem;}
    .en .header .nav .depth1 > li > a {font-size: 12px;}
    .header .util_wrap .btn_reserv {padding: 1rem 1.8rem;}

    .header .nav {left: 47%;}
    .header .nav .depth1 > li .depth2_wrap {left: 54%;}

}





@media screen and (max-width: 1440px) {
    .header.down.open{transform: translateY(0);}
    .header .nav {display: none;}

    .header .header_in{padding:0 var(--inPd);}

    .header .util_wrap .ham {display: flex;}   /* nav 가 사라지는 구간부터 전체메뉴 버튼 노출 */

    .header .ham_btn{width:25px; height: 25px;}
    .header .ham_btn svg{display:block; width: 100%; height: 100%;}
    .header .util_wrap .util_btn_box.branch{display: none;}


    .site_map .top .logo,
    .header .logo {width: 12rem;}

    
    .site_map{justify-content: flex-start; overflow-y: auto; background-color: var(--point01); color: #101010; padding: 0}
    .site_map .top .logo_mono {display: block;}
    .site_map .top .logo_color {opacity: 0;}
    .site_map .top{position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 var(--inPd); height:var(--hdH); flex-shrink: 0; background-color: var(--point01);}
    .site_map .top .logo{display: block;  }
    .site_map .top .link_btn {background-color: var(--point01);}
    .site_map .top .link_btn .ico {display: none;}
    .site_map .top .close_btn {margin-inline-start: 20px;}

    .site_map .top .close_btn {position: relative; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; cursor: pointer; border:none; border-radius: 0;}
    .site_map .top .close_btn .ico{width: 100%; height: 100%;}
    .site_map .top .right_wrap{display: flex; align-items: center;}
    .site_map .top .right_wrap .util_btn{position: relative; display: inline-block; font-size: var(--smTxt); height: 2.4em; line-height: 2.4em; margin-inline-end: 2rem; padding: 0 1em; border-radius: 10rem;background-color: transparent; color: #fff; font-weight: 500; }
    .site_map .top .right_wrap .util_btn:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10rem; background-color: rgba(255,255,255,.2);}

    .site_map .cont {position: relative; padding: 0; width: 100%; height: 100%; background-color: var(--grayBg1); border-top: none;}
    .site_map .cont .list {flex-direction: column; max-width: 100%; padding: 0; margin-top: 0; gap: 0;}
    .site_map .cont .list .depth1 {display: flex; padding: 0; width:100%; background-color: var(--grayBg1);}
    .site_map .cont .list .depth1 + .depth1 {margin-top: 0; border-top: none;}
    .site_map .cont .list .depth1 > a{position:relative; display: flex; align-items: center; width: 30rem; padding: 0 1em; height: 3.5em; background-color: var(--grayBg1); cursor: pointer; font-size:16px; color: #000; font-weight: 700; margin-bottom: 0; line-height: 1.3;}
    .site_map .cont .list .depth1.active > a,
    .site_map .cont .list .depth1.on > a{background-color: #fff;}
    .site_map .cont .list .depth1 + .depth1 { margin-inline-start: 0; padding: 0; border-inline-start: none}

    .site_map .cont .list .depth1 > a:before{display: none;}
    .site_map .cont .list .depth1 > a span{display: inline-block; transform: translateY(0);}
    .site_map .cont .list .depth1.active > a{color: #101010;}

    .site_map .cont .list .depth1.active .depth2 {display: block}
    .site_map .cont .list .depth2 {display: none; position: absolute; top: 0; inset-inline-start: 30rem; width: calc(100% - 30rem); min-height: 100%; height: max-content; margin-top:0; padding: 0 1em; padding-bottom: 80px; color: #101010; background-color: #fff;}
    /* 오른쪽 패널 맨 위 — 선택한 1뎁스 제목(보라, 2026-10-13 사용자 시안). 1뎁스 링크라 누르면 1뎁스 페이지로 간다(li.depth2_tit). 높이는 왼쪽 1뎁스 한 줄과 같게 */
    .site_map .cont .list .depth2 > li.depth2_tit {display: block;}
    .site_map .cont .list .depth2 > li.depth2_tit > a {height: 3.5em; font-size: 18px; line-height: 1.2; color: var(--point01);}
    .site_map .cont .list .depth2 > li.depth2_tit + li {border-top: 0;}
    .site_map .cont .list .depth2 > li{ font-size:18px;}
    .site_map .cont .list .depth2 > li + li {margin-top: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); margin-inline-start: 0}
    .site_map .cont .list .depth2 > li:last-child {border-bottom: none;}
    .site_map .cont .list .depth2 > li.active > a {padding-inline-start: 0;}
    .site_map .cont .list .depth2 > li > a{position:relative; display: flex; align-items: center; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1.1; height:calc(18px * 3)}
    .site_map .cont .list .depth2 > li:not(.no-depth3) > a:after{content:""; display: block; width: 0.8em; height: 1em; transform: translateX(0); margin-inline-start: auto; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 26 25" fill="none"><path d="M22.8286 7.5L12.8286 17.5L2.82861 7.5" stroke="black" stroke-width="4" stroke-linecap="square"/></svg>') no-repeat center/ contain; transition: 0.3s ease-in-out}
    .site_map .cont .list .depth2 > li.on > a:after,
    .site_map .cont .list .depth2 > li.active > a:after{transform: rotate(180deg); opacity: 1;}

    .site_map .cont .list .depth2 > li.active > a{color: var(--point01);}
    .site_map .cont .list .depth2 > li.on > a{padding-inline-start: 0.8em;}
    .site_map .cont .list .depth2 > li.on > a:before { opacity: 1; inset-inline-start: 0 }

    .site_map .cont .list .depth3{display: none; margin-top: 0; padding-left: 0.7em; padding-bottom: 1em;}
    .site_map .cont .list .depth3 > li > a{opacity: 0.5; font-size: var(--p3); font-weight: 500; padding-inline-start: 0;}
    .site_map .cont .list .depth3 li a::before {display: none;}
    .site_map .cont .list .depth3 li + li {margin-top: 0.5em;}
    .site_map .cont .list .depth3 li.active a{opacity: 1; color: var(--point01);}

    .site_map .cont .links{display: block; margin-top: auto; padding: 60px var(--inPd) 2em;}
    .site_map .cont .link a{display: flex; align-items: center; justify-content: space-between; background-color: var(--blue); border-radius: 8px; color:#fff; height: 3.7em; font-size:20px; font-weight: 600; padding: 0 1.2em}
    .site_map .cont .link a .ico svg{display: block; width: 1.2em; height:1.2em;}

    .site_map .top .link_btn {font-size: var(--p5); padding: 0.7em 1.5em;}
    .site_map .top .close_btn svg path {fill: #fff;}

    .site_map .bg_logo {width: 30%;}


    .site_map .cont .list .depth2 > li:last-child.depth2_btn_box{border-top: none; margin-top: 20px; overflow: hidden;}
    .site_map .cont .list .depth2 > li:not(.no-depth3).depth2_btn_box > .depth2_btn{width: 220px; max-width: 100%; }
    .site_map .cont .list .depth2 > li:not(.no-depth3).depth2_btn_box > .depth2_btn:after{display: none;}
    .site_map .cont .depth2 > li.depth2_btn_box > .depth2_btn::before{display: block;display: block; width: 35%; inset-inline-end: 0; top:-8%;height: 116%;transform: unset; opacity: 1;border-radius: 0;
        background: transparent url('data:image/svg+xml,<svg width="83" height="72" viewBox="0 0 83 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.06"><path d="M41.7944 42.3063C41.7944 42.3063 15.4256 52.6276 4.51965 38.7564C-6.3908 24.8941 4.77826 13.5345 13.553 13.8096C22.3322 14.0847 26.4476 22.1962 28.2533 25.8393C30.068 29.4824 35.1509 39.6705 41.7989 42.3063H41.7944Z" fill="%231947C7"/><path d="M42.3359 40.1039C42.3359 40.1039 69.5385 32.2098 79.1381 47.004C88.7421 61.7937 76.5788 72.1017 67.862 71.0323C59.1497 69.9674 55.7923 61.5186 54.3209 57.7247C52.854 53.9307 48.7163 43.321 42.3359 40.1039Z" fill="%231947C7"/><path d="M54.5489 15.7065C54.3839 15.8307 54.2145 15.9594 54.045 16.0881C54.045 16.0881 60.0732 5.63369 70.1454 2.62071C66.3466 -0.1837 60.7108 -1.19098 53.4609 1.88411C37.1867 8.78421 40.388 36.8062 40.388 36.8062C44.655 31.0953 55.8686 28.8322 59.8681 28.0424C63.8676 27.2437 72.8072 25.3888 75.3443 17.0244C76.4991 13.226 75.4468 8.32717 72.4283 4.76396C69.1689 5.88662 63.7026 8.83302 54.5489 15.7154V15.7065Z" fill="%231947C7"/></g></svg>') no-repeat center / contain;
    }
    .site_map .cont .list .depth2 > li.active > a.depth2_btn{padding-inline-start: 1.25em;}


    .site_map .cont .close_btn{display: none;}

    .header .util_wrap {gap: 20px;}
    .header .util_wrap .ico_btn svg {width: 20px; height: 20px;}
    .header .util_wrap .login.ico_btn svg {width: 19px; height: 19px;}


}





@media screen and (max-width: 768px) {
    .site_map .top .logo ,
    .header .logo {width: 12rem;}

    /* 폰에서는 헤더가 좁아 시안의 유틸을 다 못 담는다 — 검색 + 다국어 + 전체메뉴만 남기고
       예약하기·로그인은 전체메뉴(site_map)와 하단 고정 바에서 처리한다(기존 회원가입/로그인 동작과 동일). */
    .header .util_wrap .btn_reserv,
    .header .util_wrap .login {display: none;}
    .header .util_wrap .lang .lang_btn {gap: 7px; padding-bottom: 4px; font-size: 12px; background: rgba(255, 255, 255, 0.20); border-radius: 20em; padding: 8px 10px; border: none;}
    .header .util_wrap .lang .lang_btn svg {width: 7px;}
    .header .util_wrap .lang .lang_list {top: calc(100% + 10px); min-width: 64px; padding: 6px 0;}
    .header .util_wrap .lang .lang_list a,
    .header .util_wrap .lang .lang_list .off {padding: 7px 10px; font-size: 12px;}

    .header .util_wrap {gap: 15px;}


    


    .site_map .util_wrap { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; height: 100%; position: relative; gap: 15px; margin-left: auto; color: #fff;}
    .site_map .util_wrap .txt_btn {display: flex; align-items: center;  font-size: var(--p3); font-weight: 700; color: #fff;}
    .site_map .util_wrap .txt_btn svg {width: 1em; margin-right: 5px; flex-shrink: 0; height: auto;}
    .site_map .util_wrap .txt_btn svg path {fill: #fff}

    /* 바로가기(카톡 상담·인스타 등 — inc/float-links.php 공용 마크업, 2026-10-07 푸터 하단 바에서 옮김).
       시안 2072:3849(2026-10-13): 보라 바(위 10 · 좌우 15 · 아래 15) 안에 칸 2개(간격 10) — 칸 = 높이 40 · 흰 20% 테두리 · 모서리 3 · 좌우 15,
       흰 아이콘 + 12px SemiBold 흰 글자(간격 5) + 오른쪽 꺾쇠(inc/img/sns/site_menu_arrow.svg). 바로가기가 3~4개인 언어(영·중·일)는 2열로 줄바꿈 */
    .site_map .site_map_menu {display: block; flex-shrink: 0; width: 100%; padding: 10px 15px 15px; background-color: var(--point01);}
    .site_map .site_map_menu .menu_list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
    .site_map .site_map_menu .menu_list a {display: flex; align-items: center; gap: 5px; min-width: 0; height: 40px; padding: 0 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; color: #fff; font-size: 12px; font-weight: 600; line-height: normal;}
    .site_map .site_map_menu .menu_list a::after {content: ""; flex-shrink: 0; width: 5px; height: 9px; margin-left: auto; background: url("/inc/img/sns/site_menu_arrow.svg") no-repeat center / 100% 100%;}
    .site_map .site_map_menu .menu_list svg {flex-shrink: 0; width: 17px; height: 17px; color: #fff;}
    .site_map .site_map_menu .menu_list a:not(.fl_insta):not(.fl_qr) svg {height: auto;}   /* 카카오 — 시안 17×15.6(원본 비율) */
    .site_map .site_map_menu .menu_list a.fl_insta svg {width: 16px; height: 16px;}
    .site_map .site_map_menu .menu_list svg [fill="white"] {fill: currentColor;}
    .site_map .site_map_menu .menu_list svg [stroke="white"] {stroke: currentColor;}
    .site_map .site_map_menu .menu_list svg mask [fill="white"] {fill: #fff;}   /* 왓츠앱 — luminance 마스크는 흰색 그대로여야 아이콘이 진하게 나온다 */
    .site_map .site_map_menu .menu_list .txt {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

        
    .site_map .cont .list .depth1 > a {width: 26rem; font-size: 14px; height: calc(14px * 3.5);}
    .site_map .cont .list .depth2 > li > a {font-size: 14px; height: calc(14px * 3.5);}
    .site_map .cont .list .depth2 {inset-inline-start: 26rem;width: calc(100% - 26rem);}
    .site_map .cont .list .depth2 > li.depth2_tit > a {height: calc(14px * 3.5); font-size: 16px;}   /* 1뎁스 제목 — 왼쪽 줄 높이(49px)에 맞춤 */
    .site_map .cont .list .depth3 > li > a {font-size: 13px;}
    .site_map .cont .list .depth3 li + li {margin-top: 0.25em;}

}

@media screen and (max-width: 600px) {
   .header .util_wrap .lang .lang_btn { background: rgba(0, 0, 0, 0.05); }
}