/* 네이버 예약 칸 · 5칸 하단 바 · 언어 선택 — 기존 모양(아이콘 크기·색·글자)은 그대로 두고 칸만 더한다 */

/* 언어 선택 — 알약 버튼 하나(지구본 + 지금 언어 국기 + 이름 + ▾). 누르면 버튼 바로 아래 오른쪽 정렬로 흰 카드가 펼쳐진다.
   국기는 직사각형(3:2 · 모서리 2px · 얇은 테두리). 지금 언어 줄은 옅은 남색 바탕 + 오른쪽 ✓.
   옛 상단 줄 규칙(.header_topmenu ul a · ul li)이 목록 안까지 내려오므로 선택자를 한 단계 높여 막는다 */
details.ce-langmenu {
  position: relative;
  display: block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}
details.ce-langmenu > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dfe5ec;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #1f2a37;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
/* 누르는 자리는 버튼보다 넉넉하게(보이는 크기는 그대로) */
details.ce-langmenu > summary::after { content: ""; position: absolute; inset: -8px -4px; }
details.ce-langmenu > summary::-webkit-details-marker { display: none; }
details.ce-langmenu > summary::marker { content: ""; }
details.ce-langmenu > summary:hover,
details.ce-langmenu[open] > summary { border-color: rgba(19, 72, 121, .35); background: #fff; color: #134879; }
details.ce-langmenu > summary:focus-visible { outline: 2px solid #134879; outline-offset: 2px; }
details.ce-langmenu svg.ce-langmenu__globe { flex: none; width: 16px; height: 16px; color: #134879; }
details.ce-langmenu svg.ce-langmenu__caret { flex: none; width: 14px; height: 14px; color: #6b7785; transition: transform .15s ease-out; }
details.ce-langmenu[open] svg.ce-langmenu__caret { transform: rotate(180deg); }
details.ce-langmenu img.ce-langmenu__flag {
  display: block;
  flex: none;
  width: 18px;
  height: 12px;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 30, 50, .14);
}
details.ce-langmenu ul.ce-langmenu__list {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 100000;
  display: block;
  width: max-content;
  min-width: 176px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(10, 30, 48, .1), 0 8px 10px -6px rgba(10, 30, 48, .1);
}
/* 닫힌 동안 목록은 그리지도, 자리를 재지도 않는다(닫힌 details 안 글자도 상자는 잡힌다) */
details.ce-langmenu:not([open]) ul.ce-langmenu__list { display: none; }
details.ce-langmenu ul.ce-langmenu__list > li { display: block; height: auto; margin: 0; padding: 0; }
details.ce-langmenu ul.ce-langmenu__list > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color .15s ease-out;
}
details.ce-langmenu ul.ce-langmenu__list > li > a:hover,
details.ce-langmenu ul.ce-langmenu__list > li > a:focus-visible { background: #f3f5f8; outline: none; }
details.ce-langmenu ul.ce-langmenu__list > li > a[aria-current] { background: #edf2f8; color: #134879; }
details.ce-langmenu ul.ce-langmenu__list img.ce-langmenu__flag { width: 21px; height: 14px; }
details.ce-langmenu svg.ce-langmenu__check { flex: none; width: 16px; height: 16px; margin-inline-start: auto; padding-inline-start: 6px; box-sizing: content-box; color: #2a6aa6; }

/* 목록을 연 동안은 머리를 첫 방문 안내 팝업(#popupLayer)보다 위로 — 목록이 팝업에 깔리지 않게.
   머리의 transition: all 이 z-index 까지 0.5초 끌어올리므로 여는 순간에는 전환을 끈다 */
.header:has(details.ce-langmenu[open]),
.header_mo:has(details.ce-langmenu[open]) { z-index: 100000000; transition: none; }

/* PC 상단 줄 — 옛 국기 3개 자리 */
.header_topmenu ul li.ce-langmenu-li {
  display: flex;
  align-items: center;
  height: 56px;
  margin-left: 24px;
}

/* 폰 로고 줄 — 햄버거 바로 앞. 이름은 숨기고 국기만(지구본 + 국기 + ▾) */
.header_mo_gnb details.ce-langmenu--mo { margin-inline-start: auto; }
.header_mo_gnb details.ce-langmenu--mo > summary { gap: 6px; height: 28px; padding: 0 10px; font-size: 12px; }
.header_mo_gnb details.ce-langmenu--mo .ce-langmenu__name { display: none; }
.header_mo_gnb details.ce-langmenu--mo ul.ce-langmenu__list { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); }
.header_mo_gnb details.ce-langmenu--mo:dir(rtl) { margin-inline-end: 10px; }
.header_mo_gnb:has(details.ce-langmenu--mo) .logo { max-width: 200px; }
.header_mo_gnb:has(details.ce-langmenu--mo) .btn_submenu img { width: 40px; }
@media screen and (max-width: 360px) {
  .header_mo_gnb:has(details.ce-langmenu--mo) .logo { max-width: 170px; }
}

/* PC 우측 퀵메뉴 — 칸이 6개가 되어 아래 AI 상담창 자리를 비운다 */
.quick_menu2 div[data-ce-extra="naver-booking"] a img { width: 46px; height: 46px; }
/* 서브 지면 탭 줄(.lnb · sticky z 999)이 스크롤 중 퀵메뉴를 덮던 것 — 한 단계만 위로(머리 펼침 메뉴 99999 보다는 아래) */
.quick_menu2:has([data-ce-extra="naver-booking"]) { z-index: 1000; }
@media screen and (min-width: 961px) {
  .quick_menu2:has([data-ce-extra="naver-booking"]) {
    bottom: max(12vh, 176px);
  }
  .quick_menu2:has([data-ce-extra="naver-booking"]) div { margin-top: 14px; }
}
/* 키가 낮은 PC 화면(1366×768 등) — 6칸이 머리에 닿지 않게 아이콘 간격·크기를 줄인다 */
@media screen and (min-width: 961px) and (max-height: 860px) {
  .quick_menu2:has([data-ce-extra="naver-booking"]) div { margin-top: 8px; }
  .quick_menu2:has([data-ce-extra="naver-booking"]) div a img { width: 38px; height: 38px; }
}

/* 폰 하단 고정 바 5칸 */
.btm_menu ul.ce-btm5 li a img,
.btm_menu ul.ce-btm5 li:nth-child(1) a img {
  width: 28px;
  height: auto;
  margin-left: 0;
}
.btm_menu ul.ce-btm5 li[data-ce-extra="naver-booking"] a img { height: 28px; }
.btm_menu ul.ce-btm5 a {
  font-size: 14px;
  letter-spacing: -0.04em;
}
.btm_menu ul.ce-btm5 a em {
  margin-top: 8px;
  white-space: nowrap;
}
@media screen and (max-width: 400px) {
  .btm_menu ul.ce-btm5 a { font-size: 13px; letter-spacing: -0.06em; }
}