:root {
  --hv-glass-bd: rgba(255,255,255,0.22);
  --hv-glass-bg: rgba(255,255,255,0.08);
  --hv-dark-bd : rgba(0,0,0,0.12);
  --hv-dark-bg : rgba(255,255,255,0.9);
}

#hv-hd {
  position: fixed;
  top: var(--hv-hd-top); left: 0;
  width: 100%; height: var(--hv-h);
  z-index: var(--z-hd);
  background: transparent;

  transform: translateY(0);
  will-change: transform;
  transition: transform 0.55s var(--expo);
}

#hv-hd.hv--solid {
  position: fixed;
}
#hv-hd.hv--sc {
  position: fixed;
  height: var(--hv-h-sc);
  top: var(--hv-hd-sc-top, 0px);
}
#hv-hd.hv--sc .hv-inner {
  width: var(--hv-inner-w-sc, var(--hv-inner-w, 95%));
}

/* 스크롤 다운 — 헤더 숨김 */
#hv-hd.hv--hide {
  transform: translateY(-100%);
  transition:
    transform 0.8s var(--expo),
    background 0.4s var(--expo),
    backdrop-filter 0.5s var(--expo);
}

/* 스크롤 업 — 헤더 등장 (딜레이 후 부드럽게) */
#hv-hd.hv--peek {
  transform: translateY(0);
  transition:
    transform 0.85s var(--expo) 0.2s,
    background 0.4s var(--expo),
    backdrop-filter 0.5s var(--expo);
}

/* 이너 */
.hv-inner {
  position: relative;
  width: var(--hv-inner-w, 95%); max-width: 2400px;
  height: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--hv-hd-pad-x, 0px);
  background: transparent;
  border-radius: var(--hv-hd-radius, 0px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    background      0.58s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow      0.4s  var(--expo),
    backdrop-filter 0.4s  var(--expo),
    border-radius   0.4s  var(--expo);
}

/* 헤더 뒤 배경 밴드 — 둥근 모서리(.hv-inner radius) 뒤로 띠 색을 드러냄(레퍼런스).
   .hv-inner 와 동일 폭/정렬, 높이=radius, 헤더보다 한 단계 아래(z). 색 없으면 투명(무효과). */
#hv-hd-bd {
  position: fixed; top: var(--hv-hd-top, 0px); left: 50%;
  transform: translateX(-50%);
  width: var(--hv-inner-w, 95%); max-width: 2400px;
  height: var(--hv-hd-radius, 0px);
  background: var(--hv-hd-bd-color, transparent);
  z-index: calc(var(--z-hd) - 1);
  pointer-events: none;
  transition: top 0.4s var(--expo), height 0.4s var(--expo), background 0.4s var(--expo), width 0.4s var(--expo);
}
#hv-hd.hv--sc ~ #hv-hd-bd {
  top: var(--hv-hd-sc-top, 0px);
  width: var(--hv-inner-w-sc, var(--hv-inner-w, 95%));
  height: var(--hv-hd-sc-radius, 0px);
}
#hv-hd.hv--solid .hv-inner,
#hv-hd.hv--trans .hv-inner {
  background: var(--hv-hd-bg);
  -webkit-backdrop-filter: blur(var(--hv-hd-blur, 0px));
  backdrop-filter: blur(var(--hv-hd-blur, 0px));
  box-shadow: 0 6px 28px rgba(0,0,0,0.06);
}
#hv-hd.hv--sc .hv-inner {
  background: var(--hv-hd-sc-bg, var(--hv-hd-bg));
  -webkit-backdrop-filter: blur(var(--hv-hd-blur, 0px));
  backdrop-filter: blur(var(--hv-hd-blur, 0px));
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  border-radius: var(--hv-hd-sc-radius, 0px);
}
/* 헤더 바 박스쉐도우 끄기(hd_no_shadow) — 전역(모든 드롭다운 모드 공통). 기본/투명/스크롤 상태 전부 */
#hv-hd.hv--hd-no-sd .hv-inner { box-shadow: none !important; }
/* 메뉴 오픈 시 radius — horizontal/mega 전용, 하단 0으로 드롭다운과 연결 */
#hv-hd.hv-drop-horizontal.hv--nav-hover .hv-inner,
#hv-hd.hv-drop-mega.hv--nav-hover .hv-inner,
#hv-hd.hv-drop-mega.hv--mega-open .hv-inner {
  border-radius: var(--hv-hd-radius, 0px) var(--hv-hd-radius, 0px) 0 0;
}
/* sc 상태에서는 sc-radius 사용 */
#hv-hd.hv--sc.hv-drop-horizontal.hv--nav-hover .hv-inner,
#hv-hd.hv--sc.hv-drop-mega.hv--nav-hover .hv-inner,
#hv-hd.hv--sc.hv-drop-mega.hv--mega-open .hv-inner {
  border-radius: var(--hv-hd-sc-radius, 0px) var(--hv-hd-sc-radius, 0px) 0 0;
}

/* ============================================================
   Stacked layout — 로고 위(중앙) / 메뉴(왼쪽) + 아이콘(오른쪽) 아래
   스크롤(hv--sc) 시엔 자동으로 기존 horizontal 1줄로 복귀
   모바일(≤900px)은 햄버거 UX 유지 — 데스크톱(>900px)에서만 적용
   ============================================================ */
@media (min-width: 901px) {
  #hv-hd.hv--stacked:not(.hv--sc) {
    height: auto;
  }
  #hv-hd.hv--stacked:not(.hv--sc) .hv-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    height: auto;
    min-height: var(--hv-h);
    padding-top: 14px;
    padding-bottom: 14px;
    row-gap: 6px;
  }
  #hv-hd.hv--stacked:not(.hv--sc) .hv-logo {
    grid-column: 1 / -1;
    justify-self: center;
  }
  /* 이미지 로고 슬롯: __def 를 relative 로 — .hv-logo 가 IMG 높이로 자연스럽게 결정,
     __sc / __wht 는 그대로 absolute 로 위에 겹쳐 크로스페이드 유지 */
  #hv-hd.hv--stacked:not(.hv--sc) .hv-logo__def {
    position: relative;
  }
  #hv-hd.hv--stacked:not(.hv--sc) .hv-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    position: relative;
    inset: auto;
    height: auto;
    width: 100%;
    justify-content: center;
  }
  #hv-hd.hv--stacked:not(.hv--sc) .hv-btn-group {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
  /* 2줄 헤더의 실제 하단 좌표는 JS가 --hv-stacked-drop-top으로 동기화한다. */
  #hv-hd.hv--stacked:not(.hv--sc) ~ #hv-sub-wrap,
  #hv-hd.hv--stacked:not(.hv--sc) ~ #hv-mega {
    top: var(--hv-stacked-drop-top, calc(var(--hv-h) + var(--hv-hd-top, 0px)));
  }
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-panel .hv-pnl { top: calc(100% + 14px); }
  /* vertical 및 중간 폭 mega의 개별 드롭다운도 메뉴 글자 박스가 아니라
     2줄 헤더의 하단(아래 padding 14px)부터 시작한다. */
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-vertical .hv-li > .hv-sub,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-mega.hv--nav-individual .hv-li > .hv-sub,
  #hv-hd.hv--stacked:not(.hv--sc) .hv-nav-more__menu {
    top: var(--hv-li-drop-top, calc(100% + 14px));
  }
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-vertical .hv-li::after,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-mega.hv--nav-individual .hv-li::after,
  #hv-hd.hv--stacked:not(.hv--sc) .hv-nav-more::after {
    bottom: -14px;
    height: 14px;
  }
  #hv-hd.hv--stacked:not(.hv--sc) .hv-logo:hover { transform: none; }
  #hv-hd.hv--stacked:not(.hv--sc) .hv-logo--text:hover .hv-logo-text { transform: none; }
}

/* 내부 콘텐츠 — 기본 상태 (헤더 숨김 시 페이드 아웃) */
.hv-logo,
.hv-nav,
.hv-btn-group {
  transition:
    opacity 0.25s var(--expo),
    transform 0.25s var(--expo);
}

/* 헤더 숨김 시 내부도 빠르게 사라짐 */
#hv-hd.hv--hide .hv-logo,
#hv-hd.hv--hide .hv-nav,
#hv-hd.hv--hide .hv-btn-group {
  opacity: 0;
  transform: translateY(-6px);
}

/* 헤더 등장 시 내부 콘텐츠 — 헤더보다 늦게 순차적 */
#hv-hd.hv--peek .hv-logo {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.45s var(--expo) 0.80s, transform 0.5s var(--expo) 0.80s;
}
#hv-hd.hv--peek .hv-nav {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.45s var(--expo) 1.0s, transform 0.5s var(--expo) 1.0s;
}
#hv-hd.hv--peek .hv-btn-group {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.45s var(--expo) 1.0s, transform 0.5s var(--expo) 1.0s;
}

/* 최상단 trans / solid / sc — 정상 */
#hv-hd.hv--trans .hv-logo,
#hv-hd.hv--trans .hv-nav,
#hv-hd.hv--trans .hv-btn-group,
#hv-hd.hv--solid .hv-logo,
#hv-hd.hv--solid .hv-nav,
#hv-hd.hv--solid .hv-btn-group {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.3s var(--expo), transform 0.3s var(--expo);
}
#hv-hd.hv--sc .hv-logo,
#hv-hd.hv--sc .hv-nav,
#hv-hd.hv--sc .hv-btn-group {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.6s var(--expo), transform 0.3s var(--expo);
}

/* 로고 */
.hv-logo {
  position: relative;
  width: var(--hv-lw);
  /* 세 로고 상태가 모두 absolute여도 첫 페인트부터 실제 슬롯 높이를 예약한다.
     등록 로고의 기준 비율(250x121)을 유지해 hover/scroll 이미지 교체 시 CLS를 막는다. */
  aspect-ratio: 250 / 121;
  flex-shrink: 0; z-index: 20;
}

/* 옵션: 모바일 첫 스크롤 숨김 시 헤더 전체 transform 하나만 애니메이션한다.
   기본 OFF로 기존 설치처의 모션은 OTA 후에도 바뀌지 않는다. */
@media (max-width: 900px) {
  body.hv--mobile-scroll-perf #hv-hd,
  body.hv--mobile-scroll-perf #hv-hd.hv--hide,
  body.hv--mobile-scroll-perf #hv-hd.hv--peek {
    transition: transform 0.3s var(--snap);
  }
  body.hv--mobile-scroll-perf #hv-hd .hv-inner {
    transition: background 0.2s var(--snap), box-shadow 0.2s var(--snap), border-radius 0.2s var(--snap);
  }
  body.hv--mobile-scroll-perf #hv-hd.hv--hide .hv-logo,
  body.hv--mobile-scroll-perf #hv-hd.hv--hide .hv-nav,
  body.hv--mobile-scroll-perf #hv-hd.hv--hide .hv-btn-group {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.hv-logo:hover { transform: translateY(-2px); }
.hv-logo a { display: block; width: 100%; height: 100%; line-height: 0; }
.hv-logo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform 0.6s var(--expo), filter 0.4s var(--expo);
}
.hv-logo:hover img { transform: scale(1.04) rotate(0.3deg); filter: brightness(1.05); }

.hv-logo__def,
.hv-logo__sc,
.hv-logo__wht {
  position: absolute; top:0;right:0;bottom:0;left:0;inset:0;
  display: flex; align-items: center;
  transition: opacity 0.4s var(--expo), transform 0.5s var(--expo);
}
.hv-logo__def { opacity: 1; transform: translateY(0); }
.hv-logo__sc  { opacity: 0; transform: translateY(-10px) scale(0.98); }
.hv-logo__wht { opacity: 0; transform: translateY(0); }

#hv-hd.hv--sc .hv-logo { width: var(--hv-lw-sc); }
#hv-hd.hv--sc .hv-logo__def { opacity: 0; transform: translateY(12px) scale(0.98); }
#hv-hd.hv--sc .hv-logo__sc  { opacity: 1; transform: translateY(0) scale(1); }
#hv-hd.hv--sc .hv-logo__wht { opacity: 0; }

/* 텍스트 로고 — 메뉴 색 변수 그대로 상속 (이미지 4슬롯 대안) */
.hv-logo--text {
  width: auto; min-width: 0;
  display: flex; align-items: center;
}
.hv-logo--text:hover { transform: none; }
/* .hv-logo a { line-height:0; width:100% } 규칙이 글자 로고를 위로 뜨게 하던 것을 막는다 */
.hv-logo .hv-logo-text,
.hv-logo-text {
  display: inline-block;
  width: auto; height: auto;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--hv-tx-index);
  transition: color .35s var(--expo), transform .5s var(--expo);
}
.hv-logo--text:hover .hv-logo-text { transform: translateY(-2px); }
#hv-hd.hv--trans .hv-logo-text { color: var(--hv-tx-sub); }
#hv-hd.hv--solid .hv-logo-text { color: var(--hv-tx-index); }
#hv-hd.hv--sc    .hv-logo-text { color: var(--hv-tx-sc); }
#hv-hd.hv--nav-hover .hv-logo-text,
#hv-hd.hv-drop-mega.hv--mega-open .hv-logo-text { color: var(--hv-hd-open-tx); }

/* 첫 페인트부터 메뉴를 완전한 상태로 표시한다.
   li 전체의 순차 opacity 애니메이션은 새로고침 시 현재 hover 패널까지
   반투명하게 만들어 푸터 구간에서 헤더가 깜빡이는 원인이 된다. */
.hv-li {
  opacity: 1;
  transform: none;
}

/* NAV */
.hv-nav {
  position: absolute; left: 0; right: 0; top: 0;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
@media (min-width: 901px) {
  /* Render navigation with fallback fonts while final font metrics are loading. */
  #hv-hd.hv--nav-sizing .hv-nav { visibility: visible; }
  #hv-hd.hv--nav-sizing .hv-nav,
  #hv-hd.hv--nav-sizing .hv-nav * {
    transition: none !important;
    animation: none !important;
  }
}
.hv-ul {
  display: flex; align-items: stretch;
  list-style: none; margin: 0; padding: 0;
  height: 100%; gap: clamp(8px, .65vw, 14px);
}
.hv-li {
  position: relative;
  display: flex; align-items: center;
}

/* 메뉴 링크 */
.hv-a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%;
  padding: 0 calc(var(--hv-pc-px) + 4px);
  font-size: var(--hv-pc-sz);
  font-weight: var(--hv-pc-mw);
  letter-spacing: var(--hv-pc-ml);
  text-decoration: none; white-space: nowrap;
  overflow: visible;
  transition: color 0.28s ease, background-color 0.28s ease;
}
.hv-menu-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:1.7em;min-width:1.7em;margin-left:var(--hv-badge-gap,5px);padding:0 .55em;box-sizing:border-box;border-radius:999px;background:var(--hv-badge-bg,#ff5a7a);color:var(--hv-badge-color,#fff);font-family:Arial,sans-serif;font-size:var(--hv-badge-size,8px);font-weight:700;line-height:normal;letter-spacing:0;vertical-align:middle;white-space:nowrap;transform:translateY(var(--hv-badge-y,0))}
.hv-menu-badge--square{border-radius:2px}
@keyframes hvBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,122,.38)}50%{box-shadow:0 0 0 4px transparent}}
@keyframes hvBadgeBounce{0%,100%{transform:translateY(var(--hv-badge-y,0))}50%{transform:translateY(calc(var(--hv-badge-y,0) - 3px))}}
@keyframes hvBadgeBlink{0%,100%{opacity:1}50%{opacity:.42}}
.hv-menu-badge--pulse{animation:hvBadgePulse 1.8s ease-in-out infinite}.hv-menu-badge--bounce{animation:hvBadgeBounce 1.25s ease-in-out infinite}.hv-menu-badge--blink{animation:hvBadgeBlink 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hv-menu-badge--pulse,.hv-menu-badge--bounce,.hv-menu-badge--blink{animation:none!important}}
.hv-menu-labels {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  line-height: 1.25;
}
.hv-menu-labels .hv-menu-label {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
  transition: opacity .28s var(--expo), transform .38s var(--expo);
}
[data-menu-font-auto] > .hv-menu-script--eng { font-family: var(--font-eng, Georgia, serif); }
[data-menu-font-auto] > .hv-menu-script--kor { font-family: var(--font-pret, 'Pretendard', sans-serif); }
.hv-menu-labels [data-menu-label="primary"] { opacity: 1; transform: translateY(0); }
.hv-menu-labels [data-menu-label="alternate"] { opacity: 0; transform: translateY(115%); }
a:hover > .hv-menu-labels [data-menu-label="primary"],
a:focus-visible > .hv-menu-labels [data-menu-label="primary"],
.hv-li.hv--submenu-active > .hv-a > .hv-menu-labels [data-menu-label="primary"] { opacity: 0; transform: translateY(-115%); }
a:hover > .hv-menu-labels [data-menu-label="alternate"],
a:focus-visible > .hv-menu-labels [data-menu-label="alternate"],
.hv-li.hv--submenu-active > .hv-a > .hv-menu-labels [data-menu-label="alternate"] { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hv-menu-labels .hv-menu-label { transition: none; }
}

#hv-hd.hv--trans .hv-a { color: var(--hv-tx-sub); }   /* 투명 배경 (인덱스 사진 위) */
#hv-hd.hv--solid .hv-a { color: var(--hv-tx-index); } /* 기본 solid 배경 */
#hv-hd.hv--sc    .hv-a { color: var(--hv-tx-sc); }    /* 스크롤 고정 */

/* 히어로 위 헤더 톤(adaptive) — 밝은 히어로 위에서 메뉴를 어둡게.
   투명(hv--trans) 상태에서만 --hv-tx-sub/--hv-tx-index 를 어두운 값으로 재지정 →
   로고/메뉴/아이콘/현재표시(::before)/슬롯 등 var(--hv-tx-sub) 쓰는 요소 전부 자동 적용.
   스크롤(hv--sc)되면 셀렉터 불일치로 원복. JS(hv--trans-dark 토글)가 자동/수동으로 부여. */
#hv-hd.hv--trans.hv--trans-dark {
  --hv-tx-sub:   var(--hv-tx-sub-dark, #16181d);
  --hv-tx-index: var(--hv-tx-sub-dark, #16181d);
}
/* 밝게(흰색) 강제 — 사이트 기본 --hv-tx-sub 이 흰색이 아니어도 흰색으로 띄움(어두운 히어로 위) */
#hv-hd.hv--trans.hv--trans-light {
  --hv-tx-sub:   var(--hv-tx-sub-light, #ffffff);
  --hv-tx-index: var(--hv-tx-sub-light, #ffffff);
}
/* 톤에 맞춰 이미지 로고 색 보정 — 보이는 로고를 흰/검정 단색으로 강제(단색 로고 가정).
   등록된 흰/어두운 로고 변형에 의존하지 않아 단일 로고만 있어도 동작.
   텍스트 로고(.hv-logo-text)는 위 --hv-tx-sub override 로 자동 처리되므로 제외. */
/* at-rest 로고(__def)에만 필터 → hover/메가/스크롤 시 뜨는 로고(__wht/__sc)는 손대지 않아 원래 설정 유지.
   텍스트 로고면 __def 가 없으므로 무영향(텍스트는 --hv-tx-sub override 로 처리). */
#hv-hd.hv--trans.hv--trans-light .hv-logo__def img { filter: brightness(0) invert(1); }
#hv-hd.hv--trans.hv--trans-dark  .hv-logo__def img { filter: brightness(0); }

.hv-a::after { display: none; }

/* 활성 메뉴 — hv--cur */
.hv-li:hover > .hv-a,
.hv-li.hv--submenu-active > .hv-a,
.hv-a:focus-visible {
  color: var(--hv-tx-hover);
  background-color: var(--hv-menu-hv-bg);
}
/* 현재 페이지가 속한 대메뉴는 호버 여부와 관계없이 활성 색상을 유지한다. */
#hv-hd .hv-li.hv--cur > .hv-a { color: var(--hv-tx-hover); }

/* 대메뉴 마우스오버 효과(menu_hover_fx) */
#hv-hd.hv--menufx-line .hv-a:hover,
#hv-hd.hv--menufx-line .hv-a:focus-visible,
#hv-hd.hv--menufx-line_center .hv-a:hover,
#hv-hd.hv--menufx-line_center .hv-a:focus-visible,
#hv-hd.hv--menufx-bar .hv-a:hover,
#hv-hd.hv--menufx-bar .hv-a:focus-visible,
#hv-hd.hv--menufx-text .hv-a:hover,
#hv-hd.hv--menufx-text .hv-a:focus-visible,
#hv-hd.hv--menufx-marker .hv-a:hover,
#hv-hd.hv--menufx-marker .hv-a:focus-visible,
#hv-hd.hv--menufx-slide .hv-a:hover,
#hv-hd.hv--menufx-slide .hv-a:focus-visible { background-color: transparent; }

#hv-hd.hv--menufx-line .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv--menufx-line_center .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv--menufx-bar .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv--menufx-text .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv--menufx-marker .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv--menufx-slide .hv-li.hv--submenu-active > .hv-a { background-color: transparent; }

/* 형광펜: 글자 폭만큼 아래쪽을 inset 칠한다.
   background-image 방식은 설치처의 메뉴 배경 규칙에 덮일 수 있어 사용하지 않는다. */
#hv-hd.hv--menufx-marker .hv-a [data-menu-font-auto="1"] {
  display: inline-block;
  background: transparent !important;
  box-shadow: inset 0 0 0 var(--hv-menu-marker);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: box-shadow 0.34s var(--expo);
}
#hv-hd.hv--menufx-marker .hv-a:hover [data-menu-font-auto="1"],
#hv-hd.hv--menufx-marker .hv-a:focus-visible [data-menu-font-auto="1"],
#hv-hd.hv--menufx-marker .hv-li.hv--submenu-active > .hv-a [data-menu-font-auto="1"] {
  box-shadow: inset 0 -0.58em 0 var(--hv-menu-marker) !important;
}
/* 활성 메뉴 보더/밑줄 효과가 형광펜 위에 겹치지 않도록 hover 항목에서는 분리한다. */
#hv-hd.hv--menufx-marker .hv-li:hover > .hv-a,
#hv-hd.hv--menufx-marker .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv--menufx-marker .hv-a:focus-visible {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#hv-hd.hv--menufx-marker .hv-li:hover > .hv-a::before,
#hv-hd.hv--menufx-marker .hv-li:hover > .hv-a::after,
#hv-hd.hv--menufx-marker .hv-li.hv--submenu-active > .hv-a::before,
#hv-hd.hv--menufx-marker .hv-li.hv--submenu-active > .hv-a::after,
#hv-hd.hv--menufx-marker .hv-a:focus-visible::before,
#hv-hd.hv--menufx-marker .hv-a:focus-visible::after {
  display: none !important;
  border: 0 !important;
}
/* 형광펜 모드 자체가 단독 강조 방식이므로 현재 메뉴 표시를 포함한 선 효과를 모두 제거한다. */
#hv-hd.hv--menufx-marker .hv-a {
  text-decoration: none !important;
  background-image: none !important;
}
#hv-hd.hv--menufx-marker .hv-a::before,
#hv-hd.hv--menufx-marker .hv-a::after {
  display: none !important;
  border: 0 !important;
}

/* 하위메뉴 형광펜 — vertical/mega 개별형, panel, horizontal, megagroup 공통. */
#hv-hd.hv--subfx-marker .hv-sub a [data-menu-font-auto="1"],
#hv-hd.hv--subfx-marker .hv-pnl a [data-menu-font-auto="1"],
#hv-hd.hv--subfx-marker ~ #hv-sub-wrap .hv-sub a [data-menu-font-auto="1"],
#hv-mg.hv-mg-subfx-marker .hv-mg__a [data-menu-font-auto="1"] {
  display: inline-block;
  background: transparent !important;
  box-shadow: inset 0 0 0 var(--hv-menu-marker);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: box-shadow 0.34s var(--expo);
}
#hv-hd.hv--subfx-marker .hv-sub a:hover,
#hv-hd.hv--subfx-marker .hv-pnl a:hover,
#hv-hd.hv--subfx-marker ~ #hv-sub-wrap .hv-sub a:hover,
#hv-mg.hv-mg-subfx-marker .hv-mg__a:hover { background-color: transparent !important; }
#hv-hd.hv--subfx-marker .hv-sub a::before,
#hv-hd.hv--subfx-marker .hv-sub a::after,
#hv-hd.hv--subfx-marker .hv-pnl a::before,
#hv-hd.hv--subfx-marker .hv-pnl a::after,
#hv-hd.hv--subfx-marker ~ #hv-sub-wrap .hv-sub a::before,
#hv-hd.hv--subfx-marker ~ #hv-sub-wrap .hv-sub a::after,
#hv-mg.hv-mg-subfx-marker .hv-mg__a::before,
#hv-mg.hv-mg-subfx-marker .hv-mg__a::after {
  display: none !important;
  border: 0 !important;
}
#hv-hd.hv--subfx-marker .hv-sub a:hover [data-menu-font-auto="1"],
#hv-hd.hv--subfx-marker .hv-sub a:focus-visible [data-menu-font-auto="1"],
#hv-hd.hv--subfx-marker .hv-pnl a:hover [data-menu-font-auto="1"],
#hv-hd.hv--subfx-marker .hv-pnl a:focus-visible [data-menu-font-auto="1"],
#hv-hd.hv--subfx-marker ~ #hv-sub-wrap .hv-sub a:hover [data-menu-font-auto="1"],
#hv-hd.hv--subfx-marker ~ #hv-sub-wrap .hv-sub a:focus-visible [data-menu-font-auto="1"],
#hv-mg.hv-mg-subfx-marker .hv-mg__a:hover [data-menu-font-auto="1"],
#hv-mg.hv-mg-subfx-marker .hv-mg__a:focus-visible [data-menu-font-auto="1"] {
  box-shadow: inset 0 -0.58em 0 var(--hv-menu-marker) !important;
}

#hv-hd.hv--menufx-line .hv-a::after,
#hv-hd.hv--menufx-line_center .hv-a::after {
  content: '';
  display: block;
  position: absolute;
  left: calc(var(--hv-pc-px) + 4px);
  right: calc(var(--hv-pc-px) + 4px);
  bottom: 18px;
  height: 1.5px;
  background: var(--hv-tx-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.36s var(--expo);
  pointer-events: none;
}
#hv-hd.hv--menufx-line_center .hv-a::after { transform-origin: center center; }
#hv-hd.hv--menufx-line .hv-a:hover::after,
#hv-hd.hv--menufx-line .hv-a:focus-visible::after,
#hv-hd.hv--menufx-line .hv-li.hv--submenu-active > .hv-a::after,
#hv-hd.hv--menufx-line_center .hv-a:hover::after,
#hv-hd.hv--menufx-line_center .hv-a:focus-visible::after,
#hv-hd.hv--menufx-line_center .hv-li.hv--submenu-active > .hv-a::after { transform: scaleX(1); }

#hv-hd.hv--menufx-slide .hv-a {
  background-image: linear-gradient(var(--hv-menu-hv-bg), var(--hv-menu-hv-bg));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0;
  transition: color 0.28s ease, background-size 0.36s var(--expo);
}
#hv-hd.hv--menufx-slide .hv-a:hover,
#hv-hd.hv--menufx-slide .hv-a:focus-visible,
#hv-hd.hv--menufx-slide .hv-li.hv--submenu-active > .hv-a { background-size: 100% 100%; }

#hv-hd.hv--menufx-bar .hv-a::after {
  content: '';
  display: block;
  position: absolute;
  left: 8px;
  top: 32%;
  bottom: 32%;
  width: 2px;
  background: var(--hv-tx-hover);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.32s var(--expo);
  pointer-events: none;
}
#hv-hd.hv--menufx-bar .hv-a:hover::after,
#hv-hd.hv--menufx-bar .hv-a:focus-visible::after,
#hv-hd.hv--menufx-bar .hv-li.hv--submenu-active > .hv-a::after { transform: scaleY(1); }

#hv-hd.hv--menufx-zoom .hv-a { transition: color 0.28s ease, background-color 0.28s ease, transform 0.32s var(--expo); }
#hv-hd.hv--menufx-zoom .hv-a:hover,
#hv-hd.hv--menufx-zoom .hv-a:focus-visible,
#hv-hd.hv--menufx-zoom .hv-li.hv--submenu-active > .hv-a { transform: scale(1.05); }
.hv-li.hv--cur > .hv-a::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  right: auto;
  width: 40px;
  height: 2px;
  background: var(--hv-tx-hover);
  border-radius: 2px;
  transform: translateX(-50%) scaleX(1);
  transform-origin: center center;
  display: none;
}
#hv-hd.hv--trans .hv-li.hv--cur > .hv-a::before { background: var(--hv-tx-index); }
/* 헤더 자동숨김 시 활성 메뉴 밑줄이 화면 상단에 삐져나오는 것 방지 */
#hv-hd.hv--hide .hv-li.hv--cur > .hv-a::before { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hv-li.hv--cur > .hv-a::before { transition: none; }
}
/* ── 활성 메뉴 표시 방식(nav_active) — #hv-hd.hv--navfx-{val}. 미지정/none/legacy line=표시 없음 ── */
/* 풀폭 밑줄(가장자리까지) */
#hv-hd.hv--navfx-line_full .hv-li.hv--cur > .hv-a::before { display: block; top: auto; bottom: 0; left: 0; right: 0; width: auto; border-radius: 0; height: 3px; transform: none; }
/* 윗줄 */
#hv-hd.hv--navfx-top .hv-li.hv--cur > .hv-a::before { display: block; top: 8px; }
/* 가운데 점 */
#hv-hd.hv--navfx-dot .hv-li.hv--cur > .hv-a::before { display: block; left: 50%; right: auto; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; }
/* 배경/알약/박스 — ::before 채움이 텍스트 뒤로 가도록 .hv-a 에 스택 컨텍스트 부여(헤더 배경 뒤로 숨는 것 방지) */
#hv-hd.hv--navfx-bg .hv-li.hv--cur > .hv-a,
#hv-hd.hv--navfx-pill .hv-li.hv--cur > .hv-a,
#hv-hd.hv--navfx-box .hv-li.hv--cur > .hv-a { z-index: 0; }
/* 배경 채움(전체 높이 컬럼) — 텍스트 뒤로 */
#hv-hd.hv--navfx-bg .hv-li.hv--cur > .hv-a::before { display: block; inset: 0; width: auto; height: auto; background: rgba(var(--hv-rgb), 0.10); border-radius: 0; transform: none; z-index: -1; }
/* 라운드 배경(알약) */
#hv-hd.hv--navfx-pill .hv-li.hv--cur > .hv-a::before { display: block; top: 24%; bottom: 24%; left: 4px; right: 4px; width: auto; height: auto; background: rgba(var(--hv-rgb), 0.12); border-radius: 999px; transform: none; z-index: -1; }
/* 테두리 박스 */
#hv-hd.hv--navfx-box .hv-li.hv--cur > .hv-a::before { display: block; top: 26%; bottom: 26%; left: 4px; right: 4px; width: auto; height: auto; background: transparent; border: 1.5px solid var(--hv-main); border-radius: 6px; transform: none; z-index: -1; }

/* nav 겹침 방지 — normal → tight-1 → tight-2 → tight-3 → tight-4 → MORE
   각 tier 마다 폰트 -1px / 패딩 약 -7px씩 점진 축소하여 부자연스러운 점프 제거.
   font-size 는 사용자가 관리자에서 설정한 var(--hv-pc-sz) 기준으로 calc, 12px 미만으로 떨어지지 않도록 max() 보호. */

#hv-hd.hv--nav-tight-1 .hv-a {
  padding: 0 max(8px, calc(var(--hv-pc-px) - 4px));
}
#hv-hd.hv--nav-tight-1 .hv-ul { gap: 6px; }
#hv-hd.hv--nav-tight-2 .hv-a {
  padding: 0 max(5px, calc(var(--hv-pc-px) - 8px));
}
#hv-hd.hv--nav-tight-2 .hv-ul { gap: 3px; }
/* 중간 폭의 메가 메뉴는 현재 항목 아래의 개별 드롭다운으로 전환한다. */
#hv-hd.hv-drop-mega.hv--nav-individual ~ #hv-mega {
  display: none !important;
  pointer-events: none !important;
}
#hv-hd.hv-drop-mega.hv--nav-individual .hv-sub {
  display: block !important;
}
/* 긴 번역 메뉴 대응: 마지막 항목부터 MORE 드롭다운으로 이동 */
#hv-hd .hv-li.hv--nav-overflowed { display: none !important; }
#hv-hd .hv-nav-more {
  display: none;
  position: relative;
}
#hv-hd .hv-nav-more.hv--show { display: flex; }
#hv-hd .hv-nav-more__btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-eng, Georgia, serif);
  font-synthesis: none;
}
#hv-hd .hv-nav-more__menu {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(var(--hv-more-cols, 1), minmax(180px, 1fr));
  width: min(calc(var(--hv-more-cols, 1) * 220px), calc(100vw - 32px));
  min-width: min(220px, calc(100vw - 32px));
  max-width: 660px;
  max-height: calc(100vh - var(--hv-h, 80px) - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 28px 0;
  list-style: none;
  background: var(--hv-drop-bg, #fff);
  border: 0;
  border-radius: 0 0 var(--hv-hd-radius, 0px) var(--hv-hd-radius, 0px);
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .32s var(--expo), transform .38s var(--expo), visibility .32s;
}
#hv-hd .hv-nav-more:hover .hv-nav-more__menu,
#hv-hd .hv-nav-more:focus-within .hv-nav-more__menu,
#hv-hd .hv-nav-more.hv--open .hv-nav-more__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#hv-hd .hv-nav-more__menu a {
  display: block;
  color: rgba(var(--hv-drop-tx-rgb), .82);
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
}
#hv-hd .hv-nav-more__row {
  min-width: 0;
  margin: 0;
  padding: 0 24px;
}
#hv-hd .hv-nav-more__primary {
  margin: 0 0 10px;
  padding: 0 0 10px;
  color: rgba(var(--hv-drop-tx-rgb), .58) !important;
  font-size: var(--hv-pc-sz);
  font-weight: var(--hv-pc-mw);
  letter-spacing: var(--hv-pc-ml, 0em);
}
#hv-hd .hv-nav-more__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}
#hv-hd .hv-nav-more__sub a {
  padding: 8px 0;
  font-size: var(--hv-pc-ssz);
  font-weight: 400;
  letter-spacing: var(--hv-pc-sub-ml, .02em);
  transition: color .22s var(--expo), transform .28s var(--expo);
}
#hv-hd .hv-nav-more__menu a:hover,
#hv-hd .hv-nav-more__menu a:focus-visible {
  color: var(--hv-drop-tx-hover);
  background: transparent;
}
#hv-hd .hv-nav-more__sub a:hover,
#hv-hd .hv-nav-more__sub a:focus-visible {
  transform: translateX(4px);
}
#hv-hd.hv--tone-light .hv-nav-more__menu,
#hv-hd.hv--trans:not(.hv--sc) .hv-nav-more__menu {
  background: var(--hv-drop-bg, #fff);
}

/* 버튼 그룹 */
.hv-btn-group {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 510;
}

/* 검색 버튼 */
.hv-search-btn {
  position: relative;
  width: 42px; height: 42px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  color: var(--hv-tx-index);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition:
    color 0.25s var(--expo),
    transform 0.35s var(--spring),
    background 0.35s var(--expo),
    border-color 0.35s var(--expo),
    box-shadow 0.35s var(--expo);
}
#hv-hd.hv--solid .hv-search-btn { color: var(--hv-tx-index); }
#hv-hd.hv--sc    .hv-search-btn { color: var(--hv-tx-sc); }
.hv-search-btn:hover {
  color: var(--hv-main);
  transform: translateY(-2px) scale(1.06);
}
.hv-search-btn:active { transform: translateY(0) scale(1); transition-duration: 0.08s; }
.hv-search-btn svg { width: 17px; height: 17px; stroke-width: 2.1; }

/* 햄버거 버튼 */
.hbg_cd {
  --bc: var(--hv-tx-index);  /* 히어로: 흰색 */
  --fc: var(--hv-main);
  --bt: 0.16s;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center;
  width: 44px; height: 44px;
  border: none; border-radius: 0;
  background: transparent;
  cursor: pointer; padding: 0;
  transition: background 0.48s var(--expo);
}
/* 투명 상태 — 메뉴 텍스트와 같은 색 */
#hv-hd.hv--trans .hbg_cd          { --bc: var(--hv-tx-sub); }
#hv-hd.hv--trans .hv-search-btn   { color: var(--hv-tx-sub); }
#hv-hd.hv--trans .hv-icons-toggle { color: var(--hv-tx-sub); }
/* solid 상태 — index 색상 */
#hv-hd.hv--solid .hbg_cd { --bc: var(--hv-tx-index); }
/* sc 상태 — sc 색상 */
#hv-hd.hv--sc    .hbg_cd { --bc: var(--hv-tx-sc); }

/* 드로어 열림 시 — 배경 없음, X바 검정 */
.hbg_cd.hv--open {
  --bc: #111;
  position: fixed;
  z-index: calc(var(--z-dr) + 10);
}
/* 열림 시 배경 채움 제거 */
.hbg_cd.hv--open .bl_bg { display: none; }
.hbg_cd.hv--open:hover .bl_bg {
  display: none;
  transition-delay: 0s;
}

/* border 4변 시계방향 */
.hbg_cd .bl_t,
.hbg_cd .bl_r,
.hbg_cd .bl_b,
.hbg_cd .bl_l { position: absolute; background: var(--bc); z-index: 2; }

.hbg_cd .bl_t { top:0;    left:0;  width:100%;  height:1px; transform:scaleX(0); transform-origin:left;   transition:transform var(--bt) var(--expo); transition-delay:0s; }
.hbg_cd .bl_r { top:0;    right:0; width:1px; height:100%;  transform:scaleY(0); transform-origin:top;    transition:transform var(--bt) var(--expo); transition-delay:calc(var(--bt)*1); }
.hbg_cd .bl_b { bottom:0; left:0;  width:100%;  height:1px; transform:scaleX(0); transform-origin:right;  transition:transform var(--bt) var(--expo); transition-delay:calc(var(--bt)*2); }
.hbg_cd .bl_l { top:0;    left:0;  width:1px; height:100%;  transform:scaleY(0); transform-origin:bottom; transition:transform var(--bt) var(--expo); transition-delay:calc(var(--bt)*3); }

/* 보더 — 열림 시 숨김 */
.hbg_cd.hv--open .bl_t,
.hbg_cd.hv--open .bl_r,
.hbg_cd.hv--open .bl_b,
.hbg_cd.hv--open .bl_l { display: none; }

/* 배경 채우기 — 클릭 시만, border 완성 후 */
.hbg_cd .bl_bg {
  position: absolute; top:0;right:0;bottom:0;left:0;inset:0;
  background: var(--fc);
  transform: scaleX(0); transform-origin: left center;
  opacity: 0; visibility: hidden; z-index: 1;
  transition: visibility 0s linear 0.4s;
}
.hbg_cd.hv--open .bl_bg {
  transform: scaleX(1); opacity: 1; visibility: visible;
  transition: transform 0.4s var(--expo), opacity 0.4s var(--expo), background 0.4s var(--expo), visibility 0s linear 0s;
  transition-delay: calc(var(--bt)*4);
}

/* 내부 콘텐츠 */
.hbg_cd .cd_inner {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 0;
}

/* 햄버거 바 */
.hbg_cd .bars { display: flex; flex-direction: column; gap: 5px; width: 20px; flex-shrink: 0; }
.hbg_cd .bar {
  width: 100%; height: 1px; border-radius: 0;
  background: var(--bc);
  transform-origin: center;
  transition: transform 0.52s var(--expo), opacity 0.28s var(--expo);
}

.hbg_cd.hv--open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hbg_cd.hv--open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hbg_cd.hv--open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 호버 — bar 엇갈림 이동 */
.hbg_cd:not(.hv--open):hover .bar:nth-child(1) { transform: translateX(4px); transition-delay: 0s; }
.hbg_cd:not(.hv--open):hover .bar:nth-child(2) { transform: translateX(-4px); transition-delay: 0.06s; }
.hbg_cd:not(.hv--open):hover .bar:nth-child(3) { transform: translateX(4px); transition-delay: 0.12s; }
body.hv--no-hbg-hover-fx .hbg_cd:not(.hv--open):hover .bar {
  transform: none;
  transition-delay: 0s;
}


/* 반응형 */
@media (max-width: 900px) {
  #hv-hd { border-bottom: none; }
  .hv-inner { justify-content: center; }
  .hv-nav { display: none !important; }
  /* 이미지 로고만 width 강제 — 텍스트 로고(.hv-logo--text)는 자동 폭 유지 */
  .hv-logo:not(.hv-logo--text)  { width: calc(var(--hv-lw) * 0.88); }
  #hv-hd.hv--sc .hv-logo:not(.hv-logo--text) { width: calc(var(--hv-lw-sc) * 0.92); }

  .hv-btn-group {
    position: absolute; top: 0; left: 0; right: 0;
    width: 100%; height: 100%; margin: 0; pointer-events: none;
  }
  .hv-search-btn {
    pointer-events: auto;
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
  }
  .hv-search-btn:hover { transform: translateY(-50%) scale(1.05); }
  /* 전화 아이콘 — 모바일 우측. 기본은 검색 자리(right:12px), 검색이 보이면 검색 왼쪽으로 자동 이동 */
  body.hv--tel-mo .hv-tel-btn {
    pointer-events: auto;
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
  }
  /* 검색 + 전화 둘 다 ON 인 경우에만 전화가 검색 왼쪽으로 비켜남 */
  body.hv--tel-mo:not(.hv--no-search-mo) .hv-tel-btn { right: 54px; }
  body.hv--tel-mo .hv-tel-btn:hover  { transform: translateY(-50%) scale(1.05); }
  body.hv--tel-mo .hv-tel-btn:active { transform: translateY(-50%) scale(0.95); }
  body.hv--tel-mo .hv-tel-btn svg    { width:19px; height:19px; }
  .hbg_cd {
    pointer-events: auto;
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
  }
  .hbg_cd:hover,
  .hbg_cd.hv--open { transform: translateY(-50%); }
  .hbg_cd .bars { width: 18px; }
}
@media (max-width: 600px) {
  .hv-logo:not(.hv-logo--text) { width: calc(var(--hv-lw) * 0.8); }
  #hv-hd.hv--sc .hv-logo:not(.hv-logo--text) { width: calc(var(--hv-lw-sc) * 0.86); }
  .hv-search-btn { right: 10px; }
  body.hv--tel-mo .hv-tel-btn { right: 10px; }
  body.hv--tel-mo:not(.hv--no-search-mo) .hv-tel-btn { right: 50px; }
  .hbg_cd { left: 10px; width: 40px; height: 40px; }
}


/* 래퍼 */
.hv-icons-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* 토글 버튼 */
.hv-icons-toggle {
  position: relative;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; padding: 0;
  color: var(--hv-tx-index);
  border-radius: 50%;
  transition: color 0.45s var(--expo), transform 0.4s var(--spring);
}
#hv-hd.hv--solid .hv-icons-toggle { color: var(--hv-tx-index); }
#hv-hd.hv--sc    .hv-icons-toggle { color: var(--hv-tx-sc); }
.hv-icons-toggle:hover { color: var(--hv-main); transform: scale(1.08); }
.hv-icons-toggle:active { transform: scale(0.96); transition-duration: 0.08s; }

.hv-icons-toggle .ico-grid,
.hv-icons-toggle .ico-x {
  position: absolute;
  transition: opacity 0.35s var(--expo), transform 0.42s var(--expo), visibility 0s linear 0.35s;
}
.hv-icons-toggle .ico-grid { opacity: 1; visibility: visible; transform: scale(1) rotate(0deg); transition-delay: 0s; }
.hv-icons-toggle .ico-x    { opacity: 0; visibility: hidden; transform: scale(0.7) rotate(-45deg); }
.hv-icons-wrap.hv--open .hv-icons-toggle .ico-grid { opacity: 0; visibility: hidden; transform: scale(0.7) rotate(45deg); }
.hv-icons-wrap.hv--open .hv-icons-toggle .ico-x    { opacity: 1; visibility: visible; transform: scale(1) rotate(0deg); transition-delay: 0s; }

/* 패널 */
.hv-icons-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.05);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.97);
  transition:
    opacity 0.42s var(--expo),
    transform 0.46s var(--expo),
    visibility 0.42s var(--expo);
  z-index: var(--z-drop);
  white-space: nowrap;
  pointer-events: none;
}
.hv-icons-wrap.hv--open .hv-icons-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 패널 내 아이콘 순차 등장 */
.hv-icons-panel .icon_mod,
.hv-icons-panel .icon_lang,
.hv-icons-panel .hv-cart-btn,
.hv-icons-panel .hv-search-btn {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.32s var(--expo),
    transform 0.38s var(--expo),
    color 0.38s var(--expo),
    background 0.38s var(--expo);
}
.hv-icons-wrap.hv--open .hv-icons-panel .icon_mod:nth-child(1),
.hv-icons-wrap.hv--open .hv-icons-panel .icon_lang:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.06s; }
.hv-icons-wrap.hv--open .hv-icons-panel .icon_mod:nth-child(2),
.hv-icons-wrap.hv--open .hv-icons-panel .icon_lang:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.10s; }
.hv-icons-wrap.hv--open .hv-icons-panel .icon_mod:nth-child(3),
.hv-icons-wrap.hv--open .hv-icons-panel .icon_lang:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.14s; }
.hv-icons-wrap.hv--open .hv-icons-panel .icon_mod:nth-child(4),
.hv-icons-wrap.hv--open .hv-icons-panel .icon_lang:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.18s; }
.hv-icons-wrap.hv--open .hv-icons-panel .icon_mod:nth-child(5),
.hv-icons-wrap.hv--open .hv-icons-panel .icon_lang:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.22s; }
.hv-icons-wrap.hv--open .hv-icons-panel .hv-cart-btn{opacity:1;transform:translateY(0);transition-delay:.06s}
.hv-icons-wrap.hv--open .hv-icons-panel .hv-search-btn{opacity:1;transform:none;transition-delay:.10s}
#hv-hd .hv-icons-panel .hv-cart-btn{width:42px;height:42px;padding:0;color:#555;border-radius:10px}
#hv-hd .hv-icons-panel .hv-cart-btn:hover{color:var(--hv-main);background:rgba(var(--hv-rgb),.08)}
#hv-hd .hv-icons-panel .hv-search-btn{position:relative;right:auto;top:auto;width:42px;height:42px;padding:0;color:#555;border-radius:10px}
#hv-hd .hv-icons-panel .hv-search-btn:hover{color:var(--hv-main);background:rgba(var(--hv-rgb),.08);transform:translateY(-2px)}

/* 아이콘 버튼 */
.icon_mod {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: #555;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.38s var(--expo), background 0.38s var(--expo), transform 0.38s var(--spring);
}
.icon_mod:hover {
  color: var(--hv-main);
  background: rgba(var(--hv-rgb), 0.08);
  transform: translateY(-2px);
}
.icon_mod:active { transform: translateY(0); transition-duration: 0.08s; }
.icon_mod svg { display: block; }

/* 구분선 */
.hv-icons-divider {
  width: 1px; height: 22px;
  background: rgba(0,0,0,0.08);
  margin: 0 4px;
  flex-shrink: 0;
}

/* 언어 드롭다운 */
.icon_lang {
  position: relative;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: #555;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.38s var(--expo), background 0.38s var(--expo), transform 0.38s var(--spring);
}
.icon_lang:hover {
  color: var(--hv-main);
  background: rgba(var(--hv-rgb), 0.08);
  transform: translateY(-2px);
}
.icon_lang svg { display: block; pointer-events: none; }
.hv-lang-trigger { display: flex; align-items: center; justify-content: center; gap: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; line-height: inherit; white-space: inherit; cursor: pointer; }
.icon_lang.hv-lang--flag-code {
  width: auto;
  min-width: 76px;
  padding: 0 10px;
  gap: 7px;
  white-space: nowrap;
}
.hv-lang-trigger-flag { display:inline-flex; width:20px; height:20px; flex:0 0 20px; line-height:1; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.08); overflow:hidden; }
.hv-lang-trigger-flag svg { width:100%; height:100%; display:block; }
.hv-lang-trigger-code { font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: .02em; }
.hv-lang-trigger-chevron { flex: 0 0 auto; transition: transform .25s var(--expo); }
.icon_lang.hv--open .hv-lang-trigger-chevron { transform: rotate(180deg); }

.lang-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.13), 0 4px 10px rgba(0,0,0,0.05);
  padding: 6px;
  min-width: 148px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition:
    opacity 0.38s var(--expo),
    transform 0.42s var(--expo),
    visibility 0.38s var(--expo);
  z-index: 10;
}
.icon_lang:hover .lang-drop,
.icon_lang.hv--open .lang-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lang-drop a,
.lang-drop button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  color: #444;
  text-decoration: none;
  font-size: 13px;
  border-radius: 9px;
  transition: color 0.35s var(--expo), background 0.35s var(--expo);
}

/* 개별 노출형: 선택 아이콘은 원본 요소를 밖으로 이동하고, 나머지는 점 메뉴에 유지 */
.hv-icons-inline-list { display: none; }
.hv-icons-inline-list:not(:empty) { display: flex; align-items: center; gap: 0; }
.hv-icons-inline-list .icon_mod,
.hv-icons-inline-list .icon_lang,
.hv-icons-inline-list .hv-cart-btn,
.hv-icons-inline-list .hv-search-btn {
  opacity: 1;
  transform: none;
  color: var(--hv-tx-index);
  transition-delay: 0s;
}
#hv-hd.hv--sc .hv-icons-inline-list .icon_mod,
#hv-hd.hv--sc .hv-icons-inline-list .icon_lang { color: var(--hv-tx-sc); }
#hv-hd.hv--trans .hv-icons-inline-list .icon_mod,
#hv-hd.hv--trans .hv-icons-inline-list .icon_lang { color: var(--hv-tx-sub); }
#hv-hd.hv--nav-hover .hv-icons-inline-list .icon_mod,
#hv-hd.hv--nav-hover .hv-icons-inline-list .icon_lang,
#hv-hd.hv--mega-open .hv-icons-inline-list .icon_mod,
#hv-hd.hv--mega-open .hv-icons-inline-list .icon_lang { color: var(--hv-hd-open-tx); }
#hv-hd.hv--icons-all-inline .hv-icons-toggle { display: none; }
.hv-icons-panel.hv--no-divider .hv-icons-divider { display: none; }
.lang-drop button {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lang-drop a:hover,
.lang-drop button:hover { color: var(--hv-main); background: rgba(var(--hv-rgb), 0.07); }
.lang-drop a.active,
.lang-drop a.is-current,
.lang-drop button.active,
.lang-drop button.is-current { color: var(--hv-main); font-weight: 500; }
.lang-code { margin-left: auto; font-size: 11px; color: #bbb; letter-spacing: 0.06em; }
.hv-lang-menu-flag { display:inline-flex; width:20px; height:20px; flex:0 0 20px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.08); overflow:hidden; }
.hv-lang-menu-flag svg { width:100%; height:100%; display:block; }
.hv-lang-menu-label { min-width:0; }

/* 모바일 아이콘 패널 */
@media (max-width: 900px) {
  .hv-icons-wrap {
    display: flex;
    position: absolute;
    right: 58px; top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
  }
  /* 오른쪽 검색/전화 버튼 수에 맞춰 아이콘 묶음 위치 자동 보정 */
  body.hv--no-search-mo .hv-icons-wrap { right: 12px; }
  body.hv--tel-mo .hv-icons-wrap { right: 100px; }
  body.hv--tel-mo.hv--no-search-mo .hv-icons-wrap { right: 54px; }
  /* 관리 아이콘은 모두 한 묶음으로 우측 정렬한다. 검색을 패널로 보내도 빈 자리를 남기지 않는다. */
  #hv-hd.hv--icons-ready .hv-icons-wrap { right: 12px; }
  body.hv--tel-mo #hv-hd.hv--icons-ready .hv-icons-wrap { right: 54px; }
  body.hv--tel-mo #hv-hd.hv--icons-ready .hv-tel-btn { right: 12px; }
  .hv-icons-inline-list .icon_mod,
  .hv-icons-inline-list .icon_lang,
  .hv-icons-inline-list .hv-cart-btn,
  .hv-icons-inline-list .hv-search-btn {
    width: 34px;
    height: 36px;
  }
  #hv-hd .hv-icons-inline-list .hv-search-btn,
  #hv-hd .hv-icons-panel .hv-search-btn {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    pointer-events: auto;
  }
  .hv-icons-inline-list .icon_lang.hv-lang--flag-code {
    width: auto;
    min-width: 68px;
    padding: 0 8px;
    gap: 5px;
  }
  .hv-icons-toggle {
    width: 36px; height: 36px;
  }
  /* 패널 — 부모(36px) 기준 우측 오프셋으로 화면 안으로 당김 */
  .hv-icons-panel {
    right: 0;
    left: auto;
    width: 220px;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 14px;
  }
  /* 구분선 — row 레이아웃 세로 구분 */
  .hv-icons-divider {
    width: 1px; height: 22px;
    margin: 0 2px;
  }
  /* 언어 드롭다운 — 화면 우측 기준 정렬 */
  .hv-icons-panel .lang-drop {
    right: 0;
    left: auto;
  }
}
@media (max-width: 600px) {
  .hv-icons-wrap { right: 54px; }
  body.hv--no-search-mo .hv-icons-wrap { right: 10px; }
  body.hv--tel-mo .hv-icons-wrap { right: 92px; }
  body.hv--tel-mo.hv--no-search-mo .hv-icons-wrap { right: 50px; }
  #hv-hd.hv--icons-ready .hv-icons-wrap { right: 10px; }
  body.hv--tel-mo #hv-hd.hv--icons-ready .hv-icons-wrap { right: 50px; }
  body.hv--tel-mo #hv-hd.hv--icons-ready .hv-tel-btn { right: 10px; }
  /* 아이콘이 우측 끝으로 재배치된 뒤에도 패널은 토글의 우측 경계에 맞춘다. */
  .hv-icons-panel { right: 0; width: 200px; }
}


/* vertical 드롭다운 */
.hv-sub {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 160px;
  background: var(--hv-drop-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.05);
  padding: 8px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition:
    opacity 0.42s var(--expo),
    transform 0.46s var(--expo),
    visibility 0.42s var(--expo);
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.05);
  z-index: var(--z-drop);
}
/* 토글: 테두리/음영 끄기 — #hv-hd 클래스(빌더 라이브 + 실제 렌더 공용) */
/* 테두리 끄기 = 1px 보더 + 유리효과(backdrop-filter) 가장자리 제거 → 평평한 패널 */
#hv-hd.hv--drop-no-bd .hv-sub { border: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#hv-hd.hv--drop-no-sd .hv-sub { box-shadow: none !important; }
/* 모서리 각지게 = 둥근 모서리(14px) 제거 */
#hv-hd.hv--drop-no-rad .hv-sub { border-radius: 0 !important; }
/* 상단 포인트 라인 = 메인색(--hv-main, cf_10) 강조선. no-bd 와 함께 켜도 보이도록 뒤에 배치(longhand·!important) */
#hv-hd.hv--drop-accent .hv-sub { border-top: 2px solid var(--hv-main) !important; }
/* 마우스 브릿지 */
.hv-li::after {
  content: ''; position: absolute; bottom: -10px; left: 0; right: 0;
  height: 10px; background: transparent;
}
.hv-li:hover .hv-sub,
.hv-li:focus-within .hv-sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 서브 아이템 순차 등장 */
.hv-sub li {
  margin: 0; padding: 0;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.32s var(--expo), transform 0.32s var(--expo);
}
.hv-li:hover .hv-sub li,
.hv-li:focus-within .hv-sub li { opacity: 1; transform: translateY(0); }
.hv-li:hover .hv-sub li:nth-child(1) { transition-delay: 0.06s; }
.hv-li:hover .hv-sub li:nth-child(2) { transition-delay: 0.09s; }
.hv-li:hover .hv-sub li:nth-child(3) { transition-delay: 0.12s; }
.hv-li:hover .hv-sub li:nth-child(4) { transition-delay: 0.15s; }
.hv-li:hover .hv-sub li:nth-child(5) { transition-delay: 0.18s; }
.hv-li:hover .hv-sub li:nth-child(6) { transition-delay: 0.21s; }

/* 서브 링크 — over_line 방식 */
.hv-sub a {
  position: relative;
  display: block; padding: 10px 16px;
  color: var(--hv-drop-tx);
  font-size: var(--hv-pc-ssz);
  letter-spacing: var(--hv-pc-sub-ml, 0.02em);
  text-align: var(--hv-pc-sub-align);
  text-decoration: none; border-radius: 8px;
  width: 100%;
  transition: color 0.36s var(--expo), background 0.36s var(--expo);
}
.hv-sub a::after {
  content: '';
  position: absolute; left: 16px; bottom: 6px;
  width: calc(100% - 32px); height: 1px;
  background: var(--hv-main);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.48s var(--expo);
}
.hv-sub a:hover {
  background: rgba(var(--hv-rgb), 0.06);
  color: var(--hv-drop-tx-hover);
}
.hv-sub a:hover::after { transform: scaleX(1); }

/* ── 2차메뉴 마우스오버 효과 (drop_hover) — #hv-hd.hv--subfx-{val}. default = 위 기본(밑줄+배경) ── */
/* 밑줄만: 배경 틴트 제거(밑줄 ::after 유지) */
#hv-hd.hv--subfx-line .hv-sub a:hover { background: transparent; }
/* 배경색: 밑줄 숨기고 메인색 옅은 배경 강조 */
#hv-hd.hv--subfx-bg .hv-sub a:hover::after { transform: scaleX(0); }
#hv-hd.hv--subfx-bg .hv-sub a:hover { background: rgba(var(--hv-rgb), 0.13); }
/* 화살표 부드럽게 등장: 좌측에서 → 슬라이드 인. 밑줄/배경 제거 */
#hv-hd.hv--subfx-arrow .hv-sub a { padding-left: 30px; }
#hv-hd.hv--subfx-arrow .hv-sub a::after { display: none; }
#hv-hd.hv--subfx-arrow .hv-sub a::before {
  content: '→'; position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%) translateX(-7px);
  opacity: 0; color: var(--hv-main); font-size: 0.95em; line-height: 1;
  transition: opacity 0.34s var(--expo), transform 0.34s var(--expo);
}
#hv-hd.hv--subfx-arrow .hv-sub a:hover { background: transparent; }
#hv-hd.hv--subfx-arrow .hv-sub a:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }
/* 원형 등장: 좌측 원형 점이 스케일로 등장. 밑줄/배경 제거 */
#hv-hd.hv--subfx-circle .hv-sub a { padding-left: 32px; }
#hv-hd.hv--subfx-circle .hv-sub a::after { display: none; }
#hv-hd.hv--subfx-circle .hv-sub a::before {
  content: ''; position: absolute; left: 15px; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hv-main);
  transform: translateY(-50%) scale(0); opacity: 0;
  transition: transform 0.38s var(--expo), opacity 0.38s var(--expo);
}
#hv-hd.hv--subfx-circle .hv-sub a:hover { background: transparent; }
#hv-hd.hv--subfx-circle .hv-sub a:hover::before { transform: translateY(-50%) scale(1); opacity: 1; }
/* 밑줄(가운데): 밑줄이 중앙에서 양쪽으로 퍼짐. 배경 제거 */
#hv-hd.hv--subfx-line_center .hv-sub a { background: transparent; }
#hv-hd.hv--subfx-line_center .hv-sub a:hover { background: transparent; }
#hv-hd.hv--subfx-line_center .hv-sub a::after { transform-origin: center center; }
/* 배경 슬라이드: 배경이 왼쪽에서 채워짐(와이프). 밑줄 제거 */
#hv-hd.hv--subfx-fill .hv-sub a { overflow: hidden; z-index: 0; }
#hv-hd.hv--subfx-fill .hv-sub a::after { display: none; }
#hv-hd.hv--subfx-fill .hv-sub a::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(var(--hv-rgb), 0.12);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.42s var(--expo);
}
#hv-hd.hv--subfx-fill .hv-sub a:hover { background: transparent; }
#hv-hd.hv--subfx-fill .hv-sub a:hover::before { transform: scaleX(1); }
/* 좌측 바: 세로 막대가 위아래로 펼쳐지며 등장. 밑줄/배경 제거 */
#hv-hd.hv--subfx-bar .hv-sub a { padding-left: 24px; }
#hv-hd.hv--subfx-bar .hv-sub a::after { display: none; }
#hv-hd.hv--subfx-bar .hv-sub a::before {
  content: ''; position: absolute; left: 12px; top: 50%;
  width: 3px; height: 0; border-radius: 2px; background: var(--hv-main);
  transform: translateY(-50%);
  transition: height 0.34s var(--expo);
}
#hv-hd.hv--subfx-bar .hv-sub a:hover { background: transparent; }
#hv-hd.hv--subfx-bar .hv-sub a:hover::before { height: 58%; }
/* 살짝 확대: 텍스트가 살짝 커짐(왼쪽 기준). 밑줄/배경 제거 */
#hv-hd.hv--subfx-zoom .hv-sub a { transform-origin: left center; transition: color 0.36s var(--expo), transform 0.3s var(--expo); }
#hv-hd.hv--subfx-zoom .hv-sub a::after { display: none; }
#hv-hd.hv--subfx-zoom .hv-sub a:hover { background: transparent; transform: scale(1.06); }
/* 글자색만: 밑줄·배경 모두 제거, 색 변화만 */
#hv-hd.hv--subfx-text .hv-sub a:hover { background: transparent; }
#hv-hd.hv--subfx-text .hv-sub a:hover::after { transform: scaleX(0); }




/* ── nav hover → 헤더 배경 전환 (모든 모드 공통) ── */
/* 배경 변경: vertical 포함 전체 모드 */
#hv-hd.hv--nav-hover .hv-inner,
#hv-hd.hv-drop-mega.hv--mega-open .hv-inner {
  background: var(--hv-hd-hover-bg) !important;
  box-shadow: none !important;
}
/* 하단 radius 제거: horizontal/mega 전용 (dropdown과 flush 연결) */
#hv-hd.hv-drop-horizontal.hv--nav-hover .hv-inner,
#hv-hd.hv-drop-mega.hv--nav-hover .hv-inner,
#hv-hd.hv-drop-mega.hv--mega-open .hv-inner {
  border-radius: var(--hv-hd-radius, 0px) var(--hv-hd-radius, 0px) 0 0 !important;
}
/* sc 상태 sc-radius 적용 */
#hv-hd.hv--sc.hv-drop-horizontal.hv--nav-hover .hv-inner,
#hv-hd.hv--sc.hv-drop-mega.hv--nav-hover .hv-inner,
#hv-hd.hv--sc.hv-drop-mega.hv--mega-open .hv-inner {
  border-radius: var(--hv-hd-sc-radius, 0px) var(--hv-hd-sc-radius, 0px) 0 0 !important;
}
/* 텍스트·아이콘·햄버거 — 전체 모드 nav hover + mega open */
#hv-hd.hv--nav-hover .hv-a,
#hv-hd.hv--nav-hover .hv-search-btn,
#hv-hd.hv--nav-hover .hv-icons-toggle,
#hv-hd.hv--nav-hover .hv-cart-btn,
#hv-hd.hv--nav-hover .hv-tel-btn,
#hv-hd.hv--nav-hover .hbg_cd,
#hv-hd.hv-drop-mega.hv--mega-open .hv-a,
#hv-hd.hv-drop-mega.hv--mega-open .hv-search-btn,
#hv-hd.hv-drop-mega.hv--mega-open .hv-icons-toggle,
#hv-hd.hv-drop-mega.hv--mega-open .hv-cart-btn,
#hv-hd.hv-drop-mega.hv--mega-open .hv-tel-btn,
#hv-hd.hv-drop-mega.hv--mega-open .hbg_cd { color: var(--hv-hd-open-tx) !important; }

/* 오픈 상태의 전체 메뉴색보다 실제 hover/focus 메뉴의 사용자 지정 색을 우선한다.
   패널 band형은 활성 컬럼의 흰색 계약을 유지하므로 제외한다. */
#hv-hd.hv--nav-hover:not(.hv-drop-panel) .hv-li:hover > .hv-a,
#hv-hd.hv--nav-hover:not(.hv-drop-panel) .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv--nav-hover:not(.hv-drop-panel) .hv-a:focus-visible,
#hv-hd.hv-drop-mega.hv--mega-open .hv-li:hover > .hv-a,
#hv-hd.hv-drop-mega.hv--mega-open .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv-drop-mega.hv--mega-open .hv-a:focus-visible,
#hv-hd.hv-drop-panel.hv--panel-clean.hv--nav-hover .hv-li:hover > .hv-a,
#hv-hd.hv-drop-panel.hv--panel-clean.hv--nav-hover .hv-li.hv--submenu-active > .hv-a,
#hv-hd.hv-drop-panel.hv--panel-clean.hv--nav-hover .hv-a:focus-visible {
  color: var(--hv-tx-hover) !important;
}
#hv-hd.hv--nav-hover .hbg_cd,
#hv-hd.hv-drop-mega.hv--mega-open .hbg_cd { --bc: var(--hv-hd-open-tx); }
/* 로고: hover 로고(wht) 표시 */
#hv-hd.hv--nav-hover .hv-logo__def,
#hv-hd.hv-drop-mega.hv--mega-open .hv-logo__def { opacity: 0 !important; }
#hv-hd.hv--nav-hover .hv-logo__sc,
#hv-hd.hv-drop-mega.hv--mega-open .hv-logo__sc  { opacity: 0 !important; }
#hv-hd.hv--nav-hover .hv-logo__wht,
#hv-hd.hv-drop-mega.hv--mega-open .hv-logo__wht { opacity: 1 !important; transform: translateY(0) scale(1) !important; }

/* 중앙 2줄 배치에서는 메뉴 호버 때 서로 여백이 다른 로고 파일로 교체되면
   로고가 움직여 보인다. 기준 로고 슬롯을 유지해 위치를 완전히 고정한다. */
@media (min-width: 901px) {
  #hv-hd.hv--stacked:not(.hv--sc).hv--nav-hover .hv-logo__def,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-mega.hv--mega-open .hv-logo__def,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-megagroup.hv--mega-open .hv-logo__def {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  #hv-hd.hv--stacked:not(.hv--sc).hv--nav-hover .hv-logo__sc,
  #hv-hd.hv--stacked:not(.hv--sc).hv--nav-hover .hv-logo__wht,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-mega.hv--mega-open .hv-logo__sc,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-mega.hv--mega-open .hv-logo__wht,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-megagroup.hv--mega-open .hv-logo__sc,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-megagroup.hv--mega-open .hv-logo__wht {
    opacity: 0 !important;
  }
  /* 다른 여백의 hover 로고 파일로 갈아끼우지 않고 같은 기본 로고에 색 효과만 적용한다.
     따라서 형상 위치는 고정되고 메뉴 오픈 피드백은 그대로 보인다. */
  #hv-hd.hv--stacked:not(.hv--sc).hv--nav-hover .hv-logo__def img,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-mega.hv--mega-open .hv-logo__def img,
  #hv-hd.hv--stacked:not(.hv--sc).hv-drop-megagroup.hv--mega-open .hv-logo__def img {
    filter: brightness(0) invert(1);
  }
}

/* 배경 없음 모드 — hover/open 상태는 별도 처리하므로 제외 */
#hv-hd.hv--no-bg:not(.hv--mega-open):not(.hv--nav-hover) .hv-inner {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
/* 최상단만 투명 — 스크롤(hv--sc) 진입 시 자동 색상 적용 */
#hv-hd.hv--bg-trans-top:not(.hv--mega-open):not(.hv--nav-hover):not(.hv--sc) .hv-inner {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
/* 서브페이지(인덱스 아님) 대메뉴 배경 — --hv-menu-bg-sub 가 설정되면 hv--solid 기본 상태에 적용
   - hv--sc(스크롤): --hv-hd-sc-bg 가 우선
   - hv--nav-hover / hv--mega-open: hover/open 배경이 우선
   - hv--bg-trans-top / hv--no-bg 의 !important transparent 도 덮어씀 (서브페이지 우선)
   - 미설정 시 기존 --hv-hd-bg 동작 유지 */
#hv-hd.hv--solid:not(.hv--sc):not(.hv--mega-open):not(.hv--nav-hover) .hv-inner {
  background: var(--hv-menu-bg-sub, var(--hv-hd-bg)) !important;
}
/* 유리 헤더(hd_glass: dark|light|auto): 테두리 없이 뒤 화면 색이 부드럽게 번져 비치는 막대.
   배경 없음·최상단만 투명 설정과 드롭다운 열림 상태는 기존 규칙을 그대로 따른다. */
#hv-hd.hv--glass { --hv-glass-bg: rgba(22,22,24,.42); --hv-glass-sh: 0 10px 30px rgba(0,0,0,.18); }
#hv-hd.hv--glass-dark  { --hv-tx-index: #fff; --hv-tx-sub: #fff; --hv-tx-sc: #fff; }
#hv-hd.hv--glass-light { --hv-glass-bg: rgba(255,255,255,.55); --hv-glass-sh: 0 10px 30px rgba(0,0,0,.10); --hv-tx-index: #1d1d1f; --hv-tx-sub: #1d1d1f; --hv-tx-sc: #1d1d1f; }
/* 자동: 메인 히어로 위(맨 위, 투명 상태)는 어두운 유리, 스크롤 뒤·서브 화면처럼 밝은 바탕 위는 밝은 유리 */
#hv-hd.hv--glass-auto { --hv-glass-bg: rgba(255,255,255,.62); --hv-glass-sh: 0 10px 30px rgba(0,0,0,.10); --hv-tx-index: #1d1d1f; --hv-tx-sub: #1d1d1f; --hv-tx-sc: #1d1d1f; }
#hv-hd.hv--glass-auto.hv--trans:not(.hv--sc) { --hv-glass-bg: rgba(22,22,24,.42); --hv-glass-sh: 0 10px 30px rgba(0,0,0,.18); --hv-tx-index: #fff; --hv-tx-sub: #fff; --hv-tx-sc: #fff; }
#hv-hd.hv--glass:not(.hv--no-bg):not(.hv--bg-trans-top):not(.hv--mega-open):not(.hv--nav-hover) .hv-inner,
#hv-hd.hv--glass.hv--bg-trans-top.hv--sc:not(.hv--no-bg):not(.hv--mega-open):not(.hv--nav-hover) .hv-inner {
  background: var(--hv-glass-bg) !important;
  -webkit-backdrop-filter: saturate(200%) blur(30px) !important;
  backdrop-filter: saturate(200%) blur(30px) !important;
  box-shadow: var(--hv-glass-sh) !important;
  border: 0;
}
#hv-hd.hv--glass ~ #hv-hd-bd { display: none; }
/* '헤더 그림자 끄기'(hd_no_shadow)는 유리 헤더 그림자에도 적용한다 */
#hv-hd.hv--glass.hv--hd-no-sd { --hv-glass-sh: none !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #hv-hd.hv--glass       { --hv-glass-bg: rgba(22,22,24,.9); }
  #hv-hd:is(.hv--glass-light,.hv--glass-auto) { --hv-glass-bg: rgba(255,255,255,.94); }
}
/* 전체 메뉴(드로어)도 같은 유리감: 글자색 설정을 살리도록 밝은 반투명 */
body.hv--glass-menu #hv-dr {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
}
body.hv--glass-menu #hv-dr .hv-dr__R { background: transparent; }
/* 모바일 떠 있는 캡슐(hd_float_mo): 화면 가장자리에서 띄우고 둥글게 */
@media (max-width: 900px) {
  #hv-hd.hv--float-mo .hv-inner,
  #hv-hd.hv--float-mo.hv--sc .hv-inner {
    width: calc(100% - 24px) !important;
    height: 54px;
    /* margin 은 헤더 밖으로 겹쳐 빠져 본문까지 밀어 내므로 top 으로 띄운다 */
    top: calc(10px + env(safe-area-inset-top, 0px));
    margin: 0 auto;
    border-radius: 27px !important;
    justify-content: flex-start;
  }
  /* 캡슐 안에서는 로고를 메뉴 버튼 옆(왼쪽)에 두어 오른쪽 아이콘과 겹치지 않게 한다 */
  #hv-hd.hv--float-mo .hv-logo { margin-left: 8px; }
}

/* PC 메뉴 / 햄버거 ON/OFF */
#hv-hd.hv--no-nav .hv-nav { display: none !important; }
#hv-hd.hv--no-hbg .hbg_cd { display: none !important; }
/* 위젯 표시 ON/OFF (빌더 라이브 프리뷰용 — 서버단 가드와 별개) */
body.hv--no-badge .hv-badge,
body.hv--no-badge .hv-mo-badge { display: none !important; }
body.hv--no-chat #aiChatWrap { display: none !important; }

/* === 디바이스별 아이콘 ON/OFF ============================================
   body 에 hv--no-{key}-pc / hv--no-{key}-mo 클래스가 붙으면 해당 디바이스에서만 숨김.
   브레이크포인트는 헤더 기본값(900px) 기준 — PC: ≥901px, MO: ≤900px */
@media (min-width: 901px) {
  body.hv--no-search-pc .hv-search-btn,
  body.hv--no-cart-pc   .hv-cart-btn,
  body.hv--no-chat-pc   #aiChatWrap,
  body.hv--no-hbg-pc    .hbg_cd,
  body.hv--no-icons-toggle-pc .hv-icons-toggle,
  body.hv--no-icons-toggle-pc .hv-icons-panel,
  body.hv--no-badge-pc  .hv-badge { display: none !important; }
}
@media (max-width: 900px) {
  body.hv--no-search-mo .hv-search-btn,
  body.hv--no-cart-mo   .hv-cart-btn,
  body.hv--no-chat-mo   #aiChatWrap,
  body.hv--no-hbg-mo    .hbg_cd,
  body.hv--no-icons-toggle-mo .hv-icons-toggle,
  body.hv--no-icons-toggle-mo .hv-icons-panel,
  body.hv--no-badge-mo  .hv-mo-badge { display: none !important; }
}
/* 전화 아이콘 — 모바일 전용. show_tel_mo 가 ON 일 때만 노출 */
.hv-tel-btn { display: none; }
@media (max-width: 900px) {
  body.hv--tel-mo .hv-tel-btn { display: inline-flex; }
}

/* 전화 아이콘 버튼 스타일 — 검색/카트와 동일 톤 */
.hv-tel-btn{
  position:relative;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  color: var(--hv-tx-index, #111);
  padding:8px;text-decoration:none;
  transition: color .2s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
#hv-hd.hv--solid .hv-tel-btn { color: var(--hv-tx-index); }
#hv-hd.hv--sc    .hv-tel-btn { color: var(--hv-tx-sc); }
#hv-hd.hv--trans .hv-tel-btn { color: var(--hv-tx-sub); }
.hv-tel-btn:hover  { color: var(--hv-main); transform: translateY(-2px) scale(1.06); }
.hv-tel-btn:active { transform: translateY(0) scale(.96); transition-duration:.08s; }
.hv-tel-btn svg    { width:20px; height:20px; display:block; stroke: currentColor; }


:root {
  --hv-dr-panel : #ffffff;
  --hv-dr-panel2: #f8f8f8;
  --hv-dr-text  : #111111;
  --hv-dr-text2 : #555555;
  --hv-dr-text3 : #8a8a8a;
  --hv-dr-line  : rgba(0,0,0,0.08);
  --hv-dr-line2 : rgba(255,255,255,0.14);
}

/* 오버레이 */
#hv-ov {
  position: fixed; top:0;right:0;bottom:0;left:0;inset:0;
  background: rgba(5,5,5,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--expo), visibility 0.5s var(--expo);
  z-index: var(--z-ov);
}
#hv-ov.hv--on { opacity: 1; visibility: visible; }

/* 드로어 */
#hv-dr {
  /* 상단 띠팝업이 보이면 그 아래부터 드로어를 연다.
     띠가 없거나 닫히면 fallback/동적 변수 값이 0이라 기존 전체 높이와 같다. */
  position: fixed; top: var(--hive-top-notice-h, 0px); right: 0;
  width: min(1980px, 100vw);
  height: calc(100vh - var(--hive-top-notice-h, 0px));
  height: calc(100dvh - var(--hive-top-notice-h, 0px));
  display: flex; flex-direction: row;
  z-index: var(--z-dr);
  opacity: 0; visibility: hidden;
  /* 닫힘: opacity 패널 슬라이드 후 페이드, visibility 완전 종료 후 숨김 */
  transition: opacity 0.3s var(--expo) 0.65s, visibility 0s step-end 1.0s;
  box-shadow: -40px 0 100px rgba(0,0,0,0.20);
}
#hv-dr.hv--open {
  opacity: 1; visibility: visible;
  /* 열림: 즉시 visible, opacity 빠르게 */
  transition: opacity 0.4s var(--expo), visibility 0s;
}

/* 좌측 브랜딩 */
.hv-dr__L {
  position: relative;
  width: 25%; min-width: 330px; flex-shrink: 0;
  overflow: hidden; padding: 60px 44px 46px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--hv-main); opacity: 0.6;
  transform: translateX(-100%);
  transition: transform 0.7s var(--expo);
}
#hv-dr.hv--open .hv-dr__L {
  transform: translateX(0);
  transition: transform 1.0s var(--expo) 0.08s;
}

/* 드로어 로고 */
.hv-dr__logo {
  position: relative; z-index: 2;
  display: block; width: 146px;
  transform: translateY(18px); opacity: 0;
  transition: opacity 0.2s var(--expo), transform 0.2s var(--expo);
}
#hv-dr.hv--open .hv-dr__logo {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.65s var(--expo) 0.50s, transform 0.8s var(--expo) 0.50s;
}
.hv-dr__logo img { width: 100%; height: auto; display: block; }

/* 드로어 연락처 */
.hv-dr__contact {
  position: relative; z-index: 2;
  transform: translateY(24px); opacity: 0;
  transition: opacity 0.2s var(--expo), transform 0.2s var(--expo);
}
#hv-dr.hv--open .hv-dr__contact {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s var(--expo) 0.65s, transform 0.85s var(--expo) 0.65s;
}

/* 좌측 정보 행 */
.hv-dr__info-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 18px;
  font-size: 12px; line-height: 1.85;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-pret, 'Pretendard', sans-serif);
  word-break: keep-all;
}
.hv-dr__info-row > i {
  flex-shrink: 0; margin-top: 2px;
  font-size: 16px; color: rgba(255,255,255,0.8);
}
.hv-dr__tel {
  text-decoration: none; color: #fff;
  font-size: 16px; font-weight: 600;
  transition: color 0.45s var(--expo);
}
.hv-dr__tel:hover { color: rgba(255,255,255,0.8); }
.hv-dr__tel > i { color: #fff; }

/* SNS — over_line 패턴 */
.hv-dr__sns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hv-dr__sns-a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  text-decoration: none; color: rgba(255,255,255,0.7);
  transition: color 0.45s var(--expo);
}
.hv-dr__sns-a::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 18px; height: 1px;
  background: #fff;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.48s var(--expo);
}
.hv-dr__sns-a:hover { color: #fff; }
.hv-dr__sns-a:hover::after { transform: translateX(-50%) scaleX(1); }
.hv-dr__sns-a i { font-size: 18px; }

/* 우측 패널 */
.hv-dr__R {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,1); overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.7s var(--expo);
}
#hv-dr.hv--open .hv-dr__R {
  transform: translateX(0);
  transition: transform 1.0s var(--expo) 0.14s;
}
.hv-dr__R::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(var(--hv-rgb),0.08), rgba(var(--hv-rgb),0) 72%);
  pointer-events: none;
}

/* 상단 바 */
.hv-dr__top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 44px;
  /**border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.82);**/
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-20px); opacity: 0;
  transition: opacity 0.2s var(--expo), transform 0.2s var(--expo);
}
#hv-dr.hv--open .hv-dr__top {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.55s var(--expo) 0.55s, transform 0.75s var(--expo) 0.55s;
}

/* 인증 버튼 — over_line 패턴 */
.hv-dr__auth { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.hv-dr__auth-a {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0;
  background: transparent; border: none;
  color: #555; text-decoration: none;
  font-size: 13px; font-family: var(--font-pret, 'Pretendard', sans-serif);
  transition: color 0.45s var(--expo);
}
.hv-dr__auth-a i { font-size: 15px; }
.hv-dr__auth-a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--hv-main);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.48s var(--expo);
}
.hv-dr__auth-a:hover { color: var(--hv-main); }
.hv-dr__auth-a:hover::after { transform: scaleX(1); }

/* 닫기 버튼 — PC 숨김 (햄버거 CLOSE 토글로 대체) */
.hv-dr__close { display: none; }

/* 메뉴 그리드 */
.hv-dr__grid {
  position: relative; z-index: 2;
  flex: 1; overflow-y: auto;
  padding: 46px 44px 38px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 42px 24px; align-content: start;
}
.hv-dr__grid::-webkit-scrollbar { width: 5px; }
.hv-dr__grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 999px; }

/* 메뉴 컬럼 */
.hv-dr__col {
  position: relative; padding: 0;
  transform: translateY(30px); opacity: 0;
  transition: opacity 0.15s var(--expo), transform 0.15s var(--expo);
}
#hv-dr.hv--open .hv-dr__col {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.6s var(--expo), transform 0.8s var(--expo);
}
#hv-dr.hv--open .hv-dr__col:nth-child(1) { transition-delay: 0.60s; }
#hv-dr.hv--open .hv-dr__col:nth-child(2) { transition-delay: 0.68s; }
#hv-dr.hv--open .hv-dr__col:nth-child(3) { transition-delay: 0.76s; }
#hv-dr.hv--open .hv-dr__col:nth-child(4) { transition-delay: 0.84s; }
#hv-dr.hv--open .hv-dr__col:nth-child(5) { transition-delay: 0.92s; }
#hv-dr.hv--open .hv-dr__col:nth-child(6) { transition-delay: 1.00s; }
#hv-dr.hv--open .hv-dr__col:nth-child(7) { transition-delay: 1.08s; }
#hv-dr.hv--open .hv-dr__col:nth-child(8) { transition-delay: 1.16s; }
#hv-dr.hv--open .hv-dr__col:nth-child(9)  { transition-delay: 1.24s; }
#hv-dr.hv--open .hv-dr__col:nth-child(10) { transition-delay: 1.32s; }
#hv-dr.hv--open .hv-dr__col:nth-child(11) { transition-delay: 1.40s; }
#hv-dr.hv--open .hv-dr__col:nth-child(12) { transition-delay: 1.48s; }
#hv-dr.hv--open .hv-dr__col:nth-child(13) { transition-delay: 1.56s; }
#hv-dr.hv--open .hv-dr__col:nth-child(14) { transition-delay: 1.64s; }
#hv-dr.hv--open .hv-dr__col:nth-child(15) { transition-delay: 1.72s; }

.hv-dr__col-inner {
  position: relative;
  padding: 22px 20px 18px;
  border-radius: 0;
  background: transparent;
  border: none;
  border-left: 1px solid transparent;
  transition:
    transform 0.55s var(--expo),
    border-color 0.52s var(--expo),
    background 0.52s var(--expo);
}
/* 좌측 액센트 라인 — 아래서 위로 reveal */
.hv-dr__col-inner::before {
  content: '';
  position: absolute;
  left: 0; top: 20px; bottom: 20px;
  width: 1px;
  background: var(--hv-main);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.55s var(--expo);
}
.hv-dr__col:hover .hv-dr__col-inner {
  transform: translateY(-3px);
  background: rgba(var(--hv-rgb), 0.03);
}
.hv-dr__col:hover .hv-dr__col-inner::before {
  transform: scaleY(1);
}

/* 컬럼 헤더 */
.hv-dr__col-h {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding-bottom: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--hv-rgb),0.16);
  color: var(--hv-main);
  transition: color 0.45s var(--expo);
}
.hv-dr__col-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hv-dr__col-icon {
  width: 34px; height: 34px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: rgba(var(--hv-rgb), 0.5);
  flex-shrink: 0;
  transition:
    transform 0.52s var(--expo),
    color 0.48s var(--expo),
    opacity 0.48s var(--expo);
}
.hv-dr__col:hover .hv-dr__col-icon {
  transform: translateY(-2px);
  color: var(--hv-main);
  opacity: 1;
}
.hv-dr__col-icon i { font-size: 14px; }
.hv-dr__col-tit {
  display: block; min-width: 0;
  font-size: var(--hv-mo-sz); line-height: 1.35;
  color: var(--hv-main); word-break: keep-all;
  font-family: var(--font-pret, 'Pretendard', sans-serif);
}
.hv-dr__col-arr {
  color: rgba(var(--hv-rgb),0.48);
  transition: transform 0.4s var(--spring), color 0.35s var(--expo);
}
.hv-dr__col:hover .hv-dr__col-arr { transform: translateX(4px); color: var(--hv-main); }
.hv-dr__col-arr i { font-size: 12px; }

/* 서브메뉴 */
.hv-dr__sub-ul, .hv-dr__sub-ul-inner { list-style: none; margin: 0; padding: 0; }
.hv-dr__sub-ul li + li { margin-top: 2px; }

.hv-dr__sub-a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 10px 0 10px 2px;
  color: #888; text-decoration: none;
  font-size: var(--hv-mo-ssz); line-height: 1.5;
  font-family: var(--font-pret, 'Pretendard', sans-serif);
  letter-spacing: 0.01em;
  transition:
    color 0.48s var(--expo),
    transform 0.48s var(--expo);
}
/* 좌측 dot — 기본 숨김, hover 시 등장 */
.hv-dr__sub-a::before {
  content: '';
  flex-shrink: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--hv-main);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.42s var(--expo), transform 0.42s var(--expo);
}
.hv-dr__sub-a::after { display: none; }
.hv-dr__sub-a .sub-arr {
  font-size: 11px;
  color: transparent;
  flex-shrink: 0; margin-left: auto;
  opacity: 0;
  transition: color 0.42s var(--expo), opacity 0.42s var(--expo), transform 0.48s var(--expo);
}
.hv-dr__sub-a:hover {
  color: var(--hv-main);
  transform: translateX(4px);
}
.hv-dr__sub-a:hover::before {
  opacity: 1;
  transform: scale(1);
}
.hv-dr__sub-a:hover .sub-arr {
  color: var(--hv-main);
  opacity: 1;
  transform: translateX(3px);
}

/* 모바일 드로어 */
@media (max-width: 900px) {
  #hv-ov { display: none; }

  #hv-dr {
    width: 100vw;
    height: calc(100vh - var(--hive-top-notice-h, 0px));
    height: calc(100dvh - var(--hive-top-notice-h, 0px));
    flex-direction: column;
    box-shadow: none;
    background: #fff;
    z-index: var(--z-dr);   /* 챗봇(9999) 위로 올리기 위해 :root --z-dr(10000) 따라감 */
    /* 닫힘 상태 */
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s var(--expo), visibility 0.5s var(--expo);
  }
  #hv-dr.hv--open {
    opacity: 1; visibility: visible;
    transition: opacity 0.5s var(--expo), visibility 0s;
  }

  .hv-dr__L {
    width: 100%; min-width: 0; flex-shrink: 0;
    padding: 8px 20px;
    background: transparent;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
    transform: none; transition: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  #hv-dr.hv--open .hv-dr__L { transform: none; }

  .hv-dr__logo {
    width: min(42vw, 180px); height: 40px; margin: 0;
    transform: translateY(-10px); opacity: 0;
    transition: opacity 0.2s var(--expo), transform 0.2s var(--expo);
  }
  /* 가로로 긴 모바일 로고도 세로가 지나치게 작아지거나 찌그러지지 않게
     안정된 슬롯 안에서 원본 비율로 맞춘다. */
  .hv-dr__logo img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: right center;
  }
  #hv-dr.hv--open .hv-dr__logo {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.5s var(--expo) 0.08s, transform 0.55s var(--expo) 0.08s;
  }
  .hv-dr__logo .dr-logo-pc { display: none; }
  .hv-dr__logo .dr-logo-mo { display: block; }
  .hv-dr__contact { display: none; }

  .hv-dr__R {
    flex: 1; background: transparent;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    transform: none; transition: none;
  }
  .hv-dr__R::-webkit-scrollbar { display: none; }
  #hv-dr.hv--open .hv-dr__R { transform: none; }
  .hv-dr__R::after { display: none; }

  .hv-dr__top.pc { display: none; }

  .hv-dr__auth-a {
    height: 36px; padding: 0 14px;
    background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08);
    box-shadow: none; font-size: 12px;
  }
  .hv-dr__close {
    display: flex;
    width: 42px; height: 42px;
    border: 0; border-radius: 50%;
    align-items: center; justify-content: center;
    background: transparent; color: var(--hv-dr-tx2);
    cursor: pointer; box-shadow: none;
    transition: transform 0.45s var(--spring);
  }
  .hv-dr__close:hover { color: var(--hv-main); transform: rotate(90deg); }

  .hv-dr__grid {
    display: block; padding: 0; gap: 0;
    flex: none; overflow: visible;
    grid-template-columns: none; align-content: unset;
  }

  .hv-dr__col {
    margin-bottom: 0; border-bottom: 1px solid rgba(0,0,0,0.05);
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.15s var(--expo), transform 0.15s var(--expo);
  }
  #hv-dr.hv--open .hv-dr__col {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.5s var(--expo), transform 0.55s var(--expo);
  }
  #hv-dr.hv--open .hv-dr__col:nth-child(1) { transition-delay: 0.24s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(2) { transition-delay: 0.30s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(3) { transition-delay: 0.36s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(4) { transition-delay: 0.42s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(5) { transition-delay: 0.48s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(6) { transition-delay: 0.54s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(7) { transition-delay: 0.60s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(8) { transition-delay: 0.66s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(9)  { transition-delay: 0.72s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(10) { transition-delay: 0.78s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(11) { transition-delay: 0.84s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(12) { transition-delay: 0.90s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(13) { transition-delay: 0.96s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(14) { transition-delay: 1.02s; }
  #hv-dr.hv--open .hv-dr__col:nth-child(15) { transition-delay: 1.08s; }
  .hv-dr__col-inner {
    padding: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none;
  }
  .hv-dr__col:hover .hv-dr__col-inner {
    transform: none; border-color: transparent; box-shadow: none; background: transparent;
  }

  .hv-dr__col-h {
    margin: 0; padding: 17px 20px; border-bottom: 0;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; color: #1a1a1a;
    font-size: 17px; font-weight: 500;
    opacity: 1; transform: none;
    transition: color 0.42s var(--expo);
  }

  .hv-dr__col-left { display: none; }
  .hv-dr__col-icon { display: none; }
  .hv-dr__col-arr i { font-size: 15px; color: rgba(0,0,0,0.2); transition: transform 0.42s var(--expo), color 0.3s var(--expo); }

  .hv-dr__col.hv--open .hv-dr__col-h { color: var(--hv-main); }
  .hv-dr__col.hv--open .hv-dr__col-arr i { transform: rotate(90deg); color: var(--hv-main); }

  /* 모바일 아코디언 화살표 */
  .mo-arrow {
    width: 22px; height: 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,0,0,0.2);
    transition: transform 0.42s var(--expo), color 0.3s var(--expo);
  }
  .mo-arrow .ph-ico { width: 15px; height: 15px; }
  .hv-dr__col.hv--open .mo-arrow { transform: rotate(90deg); color: var(--hv-main); }
  .hv-dr__col-name { flex: 1; }

  .hv-dr__sub-ul {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--expo);
    background: rgba(0,0,0,0.02);
  }
  .hv-dr__col.hv--open .hv-dr__sub-ul { grid-template-rows: 1fr; }
  .hv-dr__sub-ul-inner { overflow: hidden; padding: 0 0 0 20px; }

  .hv-dr__sub-a {
    min-height: 40px; padding: 13px 20px 13px 0;
    color: #999; transform: none;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14px; letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: color 0.42s var(--expo);
  }
  .hv-dr__sub-a::before { display: none; }
  .hv-dr__sub-a::after { display: none; }
  .hv-dr__sub-a .sub-arr {
    font-size: 11px; color: transparent; flex-shrink: 0;
    opacity: 0;
    transition: color 0.42s var(--expo), opacity 0.42s var(--expo), transform 0.42s var(--expo);
  }
  .hv-dr__sub-a:hover { transform: none; color: var(--hv-main); }
  .hv-dr__sub-a:hover .sub-arr { color: var(--hv-main); opacity: 1; transform: translateX(3px); }
  .hv-dr__sub-toggle { width:100%; border:0; background:transparent; text-align:left; cursor:pointer; font-family:inherit; }
  .hv-dr__sub-toggle .sub-arr { color:rgba(0,0,0,.28); opacity:1; }
  .hv-dr__sub-li.hv--third-open > .hv-dr__sub-toggle { color:var(--hv-main); }
  .hv-dr__sub-li.hv--third-open > .hv-dr__sub-toggle .sub-arr { color:var(--hv-main); transform:rotate(90deg); }
  .hv-dr__third-ul { display:grid; grid-template-rows:0fr; margin:0; padding:0; list-style:none; background:rgba(0,0,0,.025); transition:grid-template-rows .42s var(--expo); }
  .hv-dr__sub-li.hv--third-open > .hv-dr__third-ul { grid-template-rows:1fr; }
  .hv-dr__third-inner { overflow:hidden; margin:0; padding:0 0 0 18px; list-style:none; }
  .hv-dr__third-a { display:block; padding:11px 20px 11px 14px; color:#aaa; font-size:max(12px,calc(var(--hv-mo-ssz) - 1px)); line-height:1.45; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.035); }
  .hv-dr__third-a:hover, .hv-dr__third-a:focus-visible { color:var(--hv-main); }
  /* 하위 메뉴 아이템 스태거 딜레이 */
  .hv-dr__sub-ul-inner li {
    opacity: 0; transform: translateX(-8px);
    transition: opacity 0.35s var(--expo), transform 0.4s var(--expo);
  }
  .hv-dr__col.hv--open .hv-dr__sub-ul-inner li { opacity: 1; transform: translateX(0); }
  .hv-dr__col.hv--open .hv-dr__sub-ul-inner li:nth-child(1) { transition-delay: 0.08s; }
  .hv-dr__col.hv--open .hv-dr__sub-ul-inner li:nth-child(2) { transition-delay: 0.13s; }
  .hv-dr__col.hv--open .hv-dr__sub-ul-inner li:nth-child(3) { transition-delay: 0.18s; }
  .hv-dr__col.hv--open .hv-dr__sub-ul-inner li:nth-child(4) { transition-delay: 0.23s; }
  .hv-dr__col.hv--open .hv-dr__sub-ul-inner li:nth-child(5) { transition-delay: 0.28s; }
  .hv-dr__col.hv--open .hv-dr__sub-ul-inner li:nth-child(6) { transition-delay: 0.33s; }
  .hv-dr__col.hv--open .hv-dr__sub-ul-inner li:nth-child(7) { transition-delay: 0.38s; }

  .hv-dr__sub-ul-inner li:last-child .hv-dr__sub-a { border-bottom: 0; }
  .hv-dr__sub-ul-inner li:last-child .hv-dr__sub-a::after { display: none; }

  /* 모바일 배경 — clip-path 비활성 */
  #hv-dr-bg1, #hv-dr-bg2 { display: none !important; }
}
@media (max-width: 480px) {
  .hv-dr__L    { padding: 18px 16px 8px; }
  .hv-dr__top  { padding: 8px 16px 14px; }
  .hv-dr__col-h { padding: 17px 18px; }
  .hv-dr__sub-a { padding: 12px 18px; }
}


/* 모바일 검색창 — sticky */
.hv-mo-sch {
  position: sticky; top: 0; z-index: 5;
  padding: 10px 20px;
  background: rgba(250,249,247,0.96);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.3s var(--expo) 0.48s, transform 0.3s var(--expo) 0.48s;
}
#hv-dr.hv--open .hv-mo-sch { opacity: 1; transform: translateY(0); }
.hv-mo-sch__form {
  display: flex; align-items: center;
  background: transparent; border-radius: 0; overflow: hidden;
  border: none; border-bottom: 1px solid rgba(0,0,0,0.1);
}
.hv-mo-sch__input {
  flex: 1; height: 44px; padding: 0 16px;
  border: 0; background: transparent; font-size: 14px; color: #222;
  outline: none; font-family: var(--font-pret, 'Pretendard', sans-serif);
}
.hv-mo-sch__submit {
  width: 44px; height: 44px; border: 0; background: transparent;
  color: #666; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s var(--expo);
}
.hv-mo-sch__submit:hover { color: var(--hv-main); }

/* 이벤트 카드 */
.hv-mo-evt {
  padding: 14px 20px 16px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s var(--expo) 0.5s, transform 0.3s var(--expo) 0.5s;
}
#hv-dr.hv--open .hv-mo-evt { opacity: 1; transform: translateY(0); }
.hv-mo-evt__title { font-size: 11px; letter-spacing: 0.1em; color: #999; margin-bottom: 10px; font-family: var(--font-pret, 'Pretendard', sans-serif); }
.hv-mo-evt__list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.hv-mo-evt__list::-webkit-scrollbar { height: 2px; }
.hv-mo-evt__list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }
.hv-mo-evt__card {
  flex-shrink: 0; width: 120px; height: 80px;
  border-radius: 0; position: relative; overflow: hidden;
  cursor: pointer; background: #eee;
}
.hv-mo-evt__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-mo-evt__card::before {
  content: ''; position: absolute; top:0;right:0;bottom:0;left:0;inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  z-index: 1;
}
.hv-mo-evt__card-tx {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 10px; z-index: 2;
  transform: translateY(4px); opacity: 0.85;
  transition: transform 0.3s var(--expo), opacity 0.3s var(--expo);
}
.hv-mo-evt__card:hover .hv-mo-evt__card-tx { transform: translateY(0); opacity: 1; }
.hv-mo-evt__card-tx span { display: block; font-size: 11px; color: #fff; font-family: var(--font-pret, 'Pretendard', sans-serif); line-height: 1.3; }

/* 회원 영역 */
.hv-mo-member {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,0.07);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s var(--expo) 0.52s, transform 0.3s var(--expo) 0.52s;
}
#hv-dr.hv--open .hv-mo-member { opacity: 1; transform: translateY(0); }
.hv-mo-thumb { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(var(--hv-rgb),0.2); cursor: pointer; }
.hv-mo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-mo-member-info { flex: 1; }
.hv-mo-member-name { font-size: 14px; font-weight: 500; color: #111; font-family: var(--font-pret, 'Pretendard', sans-serif); }
.hv-mo-member-sub  { font-size: 11px; color: #999; font-family: var(--font-pret, 'Pretendard', sans-serif); }
.hv-mo-member-btn  { display: flex; gap: 6px; }
.hv-mo-member-btn a {
  font-size: 11px; color: #666; text-decoration: none;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.1);
  transition: background 0.2s var(--expo), color 0.2s var(--expo);
}
.hv-mo-member-btn a:hover { background: var(--hv-main); color:var(--hv-on,#fff); border-color: var(--hv-main); }

/* 하단 3단 구성 */
.hv-mo-bottom {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 14px 20px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--expo) 0.58s, transform 0.55s var(--expo) 0.58s;
}
#hv-dr.hv--open .hv-mo-bottom { opacity: 1; transform: translateY(0); }

/* SNS — flat, no background */
.hv-mo-sns {
  display: flex; align-items: center; gap: 18px; justify-content: center;
  padding: 0;
  border: none;
}
.hv-mo-sns__a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: rgba(0,0,0,0.28); text-decoration: none;
  background: transparent; border-radius: 0;
  transition: color 0.28s var(--expo), transform 0.35s var(--spring);
}
.hv-mo-sns__a:hover { color: var(--hv-main); transform: translateY(-3px); }
.hv-mo-sns__a i { font-size: 20px; }

/* 구분선 */
.hv-mo-bottom-divider { width: 100%; height: 1px; background: rgba(0,0,0,0.05); }

/* 하단 바 — 로그인/회원가입 + 진료배지 */
.hv-mo-bottom-bar {
  display: flex; align-items: center;
  width: 100%; gap: 0;
}

/* 로그인/회원가입 — btn_sf */
.hv-mo-auth { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; }
.hv-mo-auth-sep { width: 1px; height: 14px; background: rgba(0,0,0,0.1); flex-shrink: 0; }
.hv-mo-auth-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; flex: 1; min-width: 0;
  border: 0; background: transparent;
  cursor: pointer; text-decoration: none;
}
.hv-mo-auth-btn .sf_bg { position: absolute; top:0;right:0;bottom:0;left:0;inset:0; background: rgba(var(--hv-rgb),0.06); transform: translateY(102%); transition: transform 0.42s var(--expo); z-index: 0; }
.hv-mo-auth-btn .sf_f,
.hv-mo-auth-btn .sf_b { position: absolute; top:0;right:0;bottom:0;left:0;inset:0; display: flex; align-items: center; justify-content: center; gap: 5px; z-index: 1; font-family: var(--font-pret, 'Pretendard', sans-serif); font-size: 12px; transition: transform 0.42s var(--expo), opacity 0.32s var(--expo); white-space: nowrap; }
.hv-mo-auth-btn .sf_f { color: #888; transform: translateY(0); opacity: 1; }
.hv-mo-auth-btn .sf_b { color: var(--hv-main); font-weight: 500; transform: translateY(102%); opacity: 0; }
.hv-mo-auth-btn .sf_b i { font-size: 12px; }
.hv-mo-auth-btn:hover .sf_bg { transform: translateY(0); }
.hv-mo-auth-btn:hover .sf_f  { transform: translateY(-102%); opacity: 0; }
.hv-mo-auth-btn:hover .sf_b  { transform: translateY(0); opacity: 1; }

/* 진료배지 — 고정 너비, 찌그러짐 방지 */
.hv-mo-badge {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; padding-left: 14px;
  border-left: 1px solid rgba(0,0,0,0.08);
}
.hv-mo-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hv-mo-dot.open   { background: #22c55e; animation: hvPulse 2s infinite; }
.hv-mo-dot.lunch  { background: #f59e0b; }
.hv-mo-dot.closed { background: #9ca3af; }
.hv-mo-badge-txt { font-size: 12px; color: #999; font-family: var(--font-pret, 'Pretendard', sans-serif); white-space: nowrap; }

@media (min-width: 901px) {
  .hv-mo-sch, .hv-mo-evt, .hv-mo-member, .hv-mo-bottom,
  .mo-arrow, .dr-logo-mo,
  #hv-dr-bg1, #hv-dr-bg2 { display: none !important; }
}


body.hv--dr-card #hv-dr.hvd {
  --hvd-bg: #f2f2f7;
  --hvd-card: var(--hv-dr-bg2, #fff);
  --hvd-tx: #1d1d1f;
  --hvd-tx2: #6e6e73;
  --hvd-tx3: #8e8e93;
  --hvd-line: rgba(60,60,67,.13);
  --hvd-fill: rgba(118,118,128,.12);
  --hvd-main: var(--hv-main, #1d1d1f);
  --hvd-on: var(--hv-on, #fff);
  --hvd-ease: cubic-bezier(.32,.72,0,1);
  position: fixed; top: var(--hive-top-notice-h, 0px); right: 0; left: auto; bottom: auto;
  width: min(440px, 100vw);
  height: calc(100vh - var(--hive-top-notice-h, 0px));
  height: calc(100dvh - var(--hive-top-notice-h, 0px));
  display: flex; flex-direction: column;
  background: var(--hvd-bg); color: var(--hvd-tx);
  border-left: 1px solid rgba(0,0,0,.06); box-shadow: none;
  font-family: var(--font-pret, 'Pretendard', sans-serif);
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  opacity: 1; visibility: hidden; transform: translate3d(100%,0,0);
  transition: transform .4s var(--hvd-ease), visibility 0s linear .4s;
}
body.hv--dr-card #hv-dr.hvd.hv--open {
  visibility: visible; transform: none;
  transition: transform .5s var(--hvd-ease), visibility 0s;
}
body.hv--dr-card.hv--glass-menu #hv-dr.hvd { background: rgba(242,242,247,.95) !important; }
/* 바탕색 옵션 brand: 회색 대신 대표색을 옅게 섞은 바탕·채움·선. color-mix 를 모르는 브라우저는 위의 기본 회색 그대로 */
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
  body.hv--dr-card.hv--dr-tone-brand #hv-dr.hvd {
    --hvd-bg: color-mix(in srgb, var(--hv-main, #8e8e93) 8%, #faf9f7);
    --hvd-fill: color-mix(in srgb, var(--hv-main, #767680) 10%, transparent);
    --hvd-line: color-mix(in srgb, var(--hv-main, #3c3c43) 14%, transparent);
    --hvd-tx2: color-mix(in srgb, var(--hv-main, #6e6e73) 45%, #5f5f63);
  }
  body.hv--dr-card.hv--dr-tone-brand.hv--glass-menu #hv-dr.hvd { background: color-mix(in srgb, var(--hvd-bg) 95%, transparent) !important; }
}
body.hv--dr-card #hv-dr-bg1, body.hv--dr-card #hv-dr-bg2 { display: none !important; }
/* 공용 화면 바탕색 옵션 brand: 글쓰기·예약·장바구니·보관함·로그인·상담 창의 회색을 대표색을 옅게 섞은 색으로.
   각 화면은 var(--hv-ui-*, 기존 회색) 으로 읽으므로 옵션을 켜지 않으면 기존 색 그대로다 */
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
  :root:has(body.hv--ui-tone-brand), body.hv--ui-tone-brand {
    --hv-ui-group: color-mix(in srgb, var(--hv-main, #8e8e93) 8%, #faf9f7);
    --hv-ui-group-hover: color-mix(in srgb, var(--hv-main, #8e8e93) 14%, #faf9f7);
    --hv-ui-group-a: color-mix(in srgb, var(--hv-ui-group) 92%, transparent);
    --hv-ui-field: color-mix(in srgb, var(--hv-main, #8e8e93) 6%, #fdfcfb);
    --hv-ui-fill: color-mix(in srgb, var(--hv-main, #767680) 8%, transparent);
    --hv-ui-fill2: color-mix(in srgb, var(--hv-main, #767680) 13%, transparent);
    --hv-ui-fill3: color-mix(in srgb, var(--hv-main, #767680) 20%, transparent);
    --hv-ui-faint: color-mix(in srgb, var(--hv-main, #8e8e93) 3%, #fff);
    --hv-ui-rule: color-mix(in srgb, var(--hv-main, #8e8e93) 12%, #fff);
  }
}
/* 시트 안에 닫기 버튼이 있으므로 위로 옮겨진 햄버거는 감춘다 */
body.hv--dr-card #hvHbg.hv--open { opacity: 0; visibility: hidden; pointer-events: none; }
#hv-dr.hvd :is(a, button):focus-visible { outline: 2px solid var(--hvd-main); outline-offset: 2px; }
#hv-dr.hvd ul { list-style: none; margin: 0; padding: 0; }

/* 머리 */
.hvd-head { flex: none; display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 10px 12px 6px 20px; }
.hvd-logo { display: flex; align-items: center; height: 34px; max-width: 58%; margin-right: auto; }
.hvd-logo--text { height: auto; color: var(--hvd-tx); font-size: 22px; line-height: 1.2; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hvd-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
.hvd-ibtn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--hvd-fill); color: var(--hvd-tx); cursor: pointer;
  transition: background .2s;
}
.hvd-ibtn:hover { background: rgba(118,118,128,.2); }
.hvd-ibtn[hidden] { display: none; }

/* 몸통(스크롤) */
.hvd-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 6px 16px 28px; scrollbar-width: none;
}
.hvd-body::-webkit-scrollbar { display: none; }
/* 모바일: 두 칸 상자를 풀고 마이 → 탭 → 메뉴 → 나머지 순서로 */
.hvd-main, .hvd-side { display: contents; }
.hvd-my { order: 1; }
.hvd-seg { order: 2; }
#hvdPane-menu { order: 3; }
.hvd-side > :not(.hvd-my):not(.hvd-seg) { order: 4; }
.hvd-main > *, .hvd-side > * { opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
#hv-dr.hvd.hv--open .hvd-main > *, #hv-dr.hvd.hv--open .hvd-side > * { opacity: 1; transform: none; transition: opacity .45s var(--hvd-ease) .12s, transform .55s var(--hvd-ease) .12s; }
.hvd-card { background: var(--hvd-card); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.hvd-label { margin: 26px 16px 8px; font-size: 13px; font-weight: 600; color: var(--hvd-tx2); letter-spacing: -.005em; }

/* 마이 카드 */
.hvd-my { padding: 16px; }
.hvd-me { display: flex; align-items: center; gap: 14px; min-height: 52px; color: inherit; text-decoration: none; }
.hvd-avatar {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--hvd-main); color: var(--hvd-on); font-size: 20px; font-weight: 700;
}
.hvd-me--guest .hvd-avatar { background: var(--hvd-fill); color: var(--hvd-tx2); }
.hvd-me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hvd-me-t b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.hvd-me-t span { font-size: 13px; color: var(--hvd-tx2); }
.hvd-me-btns { display: flex; gap: 8px; margin-top: 14px; }
.hvd-pill {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--hvd-fill); color: var(--hvd-tx); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: filter .2s;
}
.hvd-pill--main { background: var(--hvd-main); color: var(--hvd-on); }
.hvd-pill:hover { filter: brightness(.96); }
.hvd-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px;
  margin-top: 16px !important; padding-top: 14px !important; border-top: 1px solid var(--hvd-line);
}
.hvd-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-height: 72px; padding: 4px 2px; border-radius: 12px;
  color: var(--hvd-tx); text-decoration: none; font-size: 13px; font-weight: 500; text-align: center; line-height: 1.25;
}
.hvd-tile-ic {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: rgba(118,118,128,.09); transition: background .2s, transform .3s var(--hvd-ease);
}
.hvd-tile:hover .hvd-tile-ic { background: rgba(118,118,128,.16); transform: translateY(-1px); }
.hvd-tile-n {
  position: absolute; top: -5px; right: -7px; display: grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; border: 2px solid var(--hvd-card);
  background: #ff3b30; color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.hvd-tile-n:not(.has) { display: none; }
button.hvd-tile { width: 100%; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--hvd-tx); cursor: pointer; }

/* 세그먼트 탭 */
.hvd-seg { display: flex; gap: 2px; margin: 18px 0 12px; padding: 3px; border-radius: 12px; background: var(--hvd-fill); }
.hvd-seg button {
  flex: 1; min-height: 38px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: var(--hvd-tx); font: 600 15px/1.2 var(--font-pret, 'Pretendard', sans-serif); white-space: nowrap;
  transition: background .25s var(--hvd-ease), box-shadow .25s var(--hvd-ease);
}
.hvd-seg button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* 고른 탭 표시(흰 알약)가 그 자리로 미끄러져 간다. 위치는 runtime 이 --seg-x·--seg-w 로 알려 준다(스크립트가 없으면 위 기본 모양 그대로) */
.hvd-seg { position: relative; }
.hvd-seg.hvd-seg--thumb::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--seg-w, 0px); transform: translateX(var(--seg-x, 0px)); border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); transition: transform .38s cubic-bezier(.32,.72,0,1), width .38s cubic-bezier(.32,.72,0,1); pointer-events: none; }
.hvd-seg.hvd-seg--thumb button { position: relative; z-index: 1; }
.hvd-seg.hvd-seg--thumb button[aria-selected="true"] { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .hvd-seg.hvd-seg--thumb::before { transition: none; } }
.hvd-pane[hidden] { display: none; }
.hvd-pane:not(:first-of-type) { animation: hvdIn .35s var(--hvd-ease); }
@keyframes hvdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 목록 줄(왼쪽을 들인 구분선) */
.hvd-list { overflow: hidden; }
.hvd-list li, .hvd-acc-ul li { position: relative; }
.hvd-list > li + li::before, .hvd-acc-ul > li::before {
  content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--hvd-line); z-index: 1;
}
.hvd-acc-ul > li::before { left: 32px; }
.hvd-acc-ul .hvd-acc-ul > li::before { left: 48px; }
.hvd-list--app > li + li::before { left: 58px; }
.hvd-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px;
  border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none;
  color: var(--hvd-tx); font-family: inherit; font-size: 15px; line-height: 1.35;
  transition: background .15s;
}
.hvd-row:hover { background: rgba(118,118,128,.06); }
.hvd-row:active { background: var(--hvd-fill); }
.hvd-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hvd-row-t small { font-size: 13px; font-weight: 400; color: var(--hvd-tx2); }
/* 이중 제목(고정 표기 + 번역되는 이름): 왼쪽에 붙이고, 행에 마우스를 올리거나 펼치면 번역되는 이름으로 바꾼다 */
.hvd-row-t > .hv-menu-labels { justify-items: start; }
/* 메뉴 배지(NEW 등): 이 칸은 세로로 쌓이는 flex 라 배지가 줄 폭 전체로 늘어나 긴 막대처럼 보였다(2026-10-07).
   배지가 있는 줄은 이름 옆에 나란히 놓고, :has 를 모르는 브라우저에서는 이름 아래 작은 배지로 둔다. */
.hvd-row-t > .hv-menu-badge { align-self: flex-start; margin-left: 0; }
.hvd-row-t:has(> .hv-menu-badge) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.hvd-row-t:has(> .hv-menu-badge) > .hv-menu-badge { align-self: center; }
.hvd-row-t:has(> .hv-menu-badge) > small { flex: 0 0 100%; }
.hvd-row:is(:hover, :focus-visible, [aria-expanded="true"]) .hv-menu-labels [data-menu-label="primary"] { opacity: 0; transform: translateY(-115%); }
.hvd-row:is(:hover, :focus-visible, [aria-expanded="true"]) .hv-menu-labels [data-menu-label="alternate"] { opacity: 1; transform: translateY(0); }
.hvd-row-i { flex: none; display: grid; place-items: center; color: var(--hvd-tx3); transition: transform .3s var(--hvd-ease); }
.hvd-row[aria-current="page"]::before { content: ''; flex: none; width: 6px; height: 6px; margin-right: -4px; border-radius: 50%; background: var(--hvd-main); }
.hvd-row[aria-current="page"] { font-weight: 700; }
.hvd-row--d1 { min-height: 54px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hvd-row--d2 { min-height: 48px; padding-left: 32px; font-size: 15px; font-weight: 400; }
.hvd-row--d3 { min-height: 44px; padding-left: 48px; font-size: 15px; color: var(--hvd-tx2); }
.hvd-acc.is-open > .hvd-row { color: var(--hvd-tx); }
.hvd-acc.is-open > .hvd-row .hvd-row-i { transform: rotate(180deg); }
.hvd-acc-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s var(--hvd-ease); }
.hvd-acc.is-open > .hvd-acc-p { grid-template-rows: 1fr; }
.hvd-acc-ul { min-height: 0; overflow: hidden; background: rgba(118,118,128,.035); visibility: hidden; transition: visibility 0s linear .36s; }
.hvd-acc.is-open > .hvd-acc-p > .hvd-acc-ul { visibility: visible; transition: none; }

/* 이벤트·콘텐츠 항목 */
.hvd-item { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 12px 16px; color: var(--hvd-tx); text-decoration: none; transition: background .15s; }
.hvd-item:hover { background: rgba(118,118,128,.06); }
.hvd-evt > li + li::before, .hvd-post > li + li::before { left: 94px; }
.hvd-post > li + li::before { left: 114px; }
.hvd-th { flex: none; display: grid; place-items: center; overflow: hidden; width: 64px; height: 64px; border-radius: 12px; background: var(--hvd-fill); color: var(--hvd-tx3); }
.hvd-th--wide { width: 84px; height: auto; aspect-ratio: 4 / 3; }
.hvd-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hvd-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hvd-item-t b { font-size: 15px; font-weight: 600; line-height: 1.38; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hvd-sub { font-size: 13px; color: var(--hvd-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hvd-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.hvd-price i { font-style: normal; font-size: 15px; font-weight: 700; color: #ff3b30; }
.hvd-price em { font-style: normal; font-size: 15px; font-weight: 700; }
.hvd-price s { font-size: 13px; color: var(--hvd-tx3); }
.hvd-badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: rgba(255,59,48,.1); color: #d70015; font-size: 12px; font-weight: 700; }
.hvd-evt--grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 12px; padding: 14px !important; }
.hvd-evt--grid > li::before { display: none; }
.hvd-evt--grid .hvd-item { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 0; }
.hvd-evt--grid .hvd-item:hover { background: none; }
.hvd-evt--grid .hvd-th { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.hvd-more {
  display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 44px; margin-top: 6px;
  color: var(--hvd-tx2); font-size: 13px; font-weight: 600; text-decoration: none;
}
.hvd-more:hover { color: var(--hvd-tx); }

/* 유튜브 쇼츠 */
.hvd-shorts {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px !important; padding: 0 16px !important; scroll-padding-inline: 16px;
}
.hvd-shorts::-webkit-scrollbar { display: none; }
.hvd-shorts li { flex: 0 0 calc((100% - 20px) / 3.15); scroll-snap-align: start; }
.hvd-short { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 14px; background: #1d1d1f; color: #fff; text-decoration: none; }
.hvd-short img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hvd-short::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.7)); }
.hvd-short-pl { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.4); }
.hvd-short-t { position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 1; font-size: 12px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#hv-dr.hvd .hvd-shorts + .hvd-card { margin-top: 14px; }
.hvd-list--app .hvd-row-t { font-weight: 600; }

/* 채널 앱 아이콘 */
.hvd-app { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #8e8e93; color: #fff; }
.hvd-app .ph-ico { width: 18px; height: 18px; }
.hvd-app--main { background: var(--hvd-main); color: var(--hvd-on); }
.hvd-app--kakao { background: #fee500; color: #191919; }
.hvd-app--naver, .hvd-app--blog { background: #03c75a; }
.hvd-app--insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.hvd-app--yt { background: #ff0033; }
.hvd-app--line { background: #06c755; }
.hvd-app--wa { background: #25d366; }

/* 진료시간 */
.hvd-kv { margin: 0; padding: 0 16px; }
.hvd-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; }
.hvd-kv > div + div { border-top: 1px solid var(--hvd-line); }
.hvd-kv dt { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--hvd-tx2); }
.hvd-kv dd { margin: 0; font-size: 15px; font-weight: 500; text-align: right; }
.hvd-kv-st dt { color: var(--hvd-tx); font-weight: 700; }
.hvd-kv-st dd { color: var(--hvd-tx2); font-weight: 400; }
.hvd-dot { width: 8px; height: 8px; border-radius: 50%; background: #8e8e93; }
.hvd-dot.is-open { background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.18); }
.hvd-dot.is-lunch { background: #ff9f0a; }
.hvd-out { display: block; width: max-content; margin: 22px auto 0; min-height: 44px; padding: 0 16px; line-height: 44px; font-size: 13px; color: var(--hvd-tx2); text-decoration: none; }

/* 아래 고정 상담 막대 */
.hvd-foot {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(242,242,247,.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(0,0,0,.06);
}
/* 바탕색 옵션 brand: 아래 고정 막대도 같은 바탕색을 따른다 */
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
  body.hv--dr-card.hv--dr-tone-brand .hvd-foot { background: color-mix(in srgb, var(--hvd-bg) 92%, transparent); }
  /* 같은 옵션으로 검색 창 바탕도 맞춘다(전체 메뉴와 한 벌로 보이게) */
  body.hv--dr-tone-brand #hv-sch { background: color-mix(in srgb, color-mix(in srgb, var(--hv-main, #8e8e93) 8%, #faf9f7) 96%, transparent); }
}
/* 모양 옵션 modern: 평평한 한 면. 위쪽 버튼의 원형, 카드의 둥근 모서리·그림자, 알약 탭, 아이콘 타일 바탕을 걷어 낸다 */
body.hv--dr-look-modern #hv-dr.hvd .hvd-head { min-height: 60px; padding: 8px 12px 8px 24px; border-bottom: 1px solid var(--hvd-line); }
body.hv--dr-look-modern #hv-dr.hvd .hvd-ibtn { background: none; border-radius: 0; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-ibtn:hover { background: none; opacity: .6; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-card { background: transparent; border-radius: 0; box-shadow: none; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-my { padding: 20px 8px 18px; border-bottom: 1px solid var(--hvd-line); }
body.hv--dr-look-modern #hv-dr.hvd .hvd-avatar { border-radius: 10px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-pill { border-radius: 8px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-pill:not(.hvd-pill--main) { background: transparent; box-shadow: inset 0 0 0 1px var(--hvd-line); }
body.hv--dr-look-modern #hv-dr.hvd .hvd-tile-ic { background: none; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-tile:hover .hvd-tile-ic { background: none; transform: none; opacity: .6; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-seg { gap: 0; margin: 6px 0 0; padding: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--hvd-line); }
body.hv--dr-look-modern #hv-dr.hvd .hvd-seg.hvd-seg--thumb::before { top: auto; bottom: -1px; height: 2px; border-radius: 0; background: var(--hvd-main); box-shadow: none; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-seg button { min-height: 50px; border-radius: 0; color: var(--hvd-tx2); }
body.hv--dr-look-modern #hv-dr.hvd .hvd-seg button[aria-selected="true"] { background: transparent; box-shadow: none; color: var(--hvd-tx); }
body.hv--dr-look-modern #hv-dr.hvd .hvd-seg:not(.hvd-seg--thumb) button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--hvd-main); }
body.hv--dr-look-modern #hv-dr.hvd .hvd-row { padding-left: 8px; padding-right: 8px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-row--d1 { min-height: 58px; font-size: 18px; font-weight: 500; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-row--d2 { padding-left: 22px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-row--d3 { padding-left: 36px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-list > li + li::before, body.hv--dr-look-modern #hv-dr.hvd .hvd-acc-ul > li::before { left: 8px; right: 8px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-acc-ul { background: transparent; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-label { margin: 30px 8px 6px; font-size: 12px; letter-spacing: .06em; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-item { padding-left: 8px; padding-right: 8px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-th { border-radius: 6px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-foot { padding-left: 24px; padding-right: 24px; }
body.hv--dr-look-modern #hv-dr.hvd .hvd-cta { border-radius: 8px; }
/* 모양 옵션 modern: 모바일에서도 메뉴가 열릴 때 뒤 화면이 서서히 어두워진다(기본은 모바일에서 딤 없음).
   :has 를 모르는 브라우저는 기존처럼 딤 없이 열린다 */
@media (max-width: 900px) {
  body.hv--dr-look-modern #hv-ov { display: block; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .45s ease, visibility 0s linear .45s; }
  body.hv--dr-look-modern:has(#hv-dr.hvd.hv--open) #hv-ov { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { body.hv--dr-look-modern #hv-ov { transition: none; } }
.hvd-cta {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 16px;
  border: 0; border-radius: 14px; background: var(--hvd-main); color: var(--hvd-on); cursor: pointer; text-decoration: none;
  font: 700 17px/1.2 var(--font-pret, 'Pretendard', sans-serif); letter-spacing: -.01em; transition: filter .2s, transform .2s;
}
.hvd-cta:hover { filter: brightness(1.06); }
.hvd-cta:active { transform: scale(.98); }
.hvd-cta[hidden] { display: none; }
.hvd-round { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--hvd-tx); box-shadow: 0 1px 2px rgba(0,0,0,.04); text-decoration: none; }
.hvd-round .ph-ico { width: 22px; height: 22px; }
.hvd-round--kakao { background: #fee500; color: #191919; }
.hvd-round--naver { background: #03c75a; color: #fff; }

/* PC: 전체 메뉴를 한 번에(왼쪽 여러 칸 펼침) + 오른쪽 마이·이벤트·콘텐츠·채널·진료시간 */
@media (min-width: 901px) {
  body.hv--dr-card #hv-dr.hvd {
    width: min(1240px, 100vw);
    display: grid; grid-template-columns: minmax(0,1fr) 380px; grid-template-rows: auto minmax(0,1fr) auto;
  }
  .hvd-head { grid-column: 1 / -1; min-height: 76px; padding: 14px 20px 10px 32px; border-bottom: 1px solid rgba(0,0,0,.06); }
  .hvd-body { display: contents; }
  .hvd-main { display: block; grid-column: 1; grid-row: 2 / 4; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 40px 32px; scrollbar-width: thin; }
  .hvd-side { display: block; grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 28px; border-left: 1px solid rgba(0,0,0,.06); scrollbar-width: none; }
  .hvd-side::-webkit-scrollbar { display: none; }
  #hv-dr.hvd:not(:has(.hvd-foot)) .hvd-side { grid-row: 2 / 4; }
  .hvd-foot { grid-column: 2; grid-row: 3; border-left: 1px solid rgba(0,0,0,.06); }
  .hvd-seg { margin-top: 16px; }
  /* PC 오른쪽 칸: 마이 → 공식 채널(앱 아이콘 한 줄) → 탭 → 진료시간 */
  .hvd-side { display: flex; flex-direction: column; }
  #hv-dr.hvd .hvd-side > .hvd-my { order: 1; }
  #hv-dr.hvd .hvd-side > .hvd-ch { order: 2; }
  #hv-dr.hvd .hvd-side > .hvd-seg { order: 3; }
  #hv-dr.hvd .hvd-side > .hvd-pane { order: 4; }
  #hv-dr.hvd .hvd-side > :not(.hvd-my):not(.hvd-ch):not(.hvd-seg):not(.hvd-pane) { order: 5; }
  .hvd-ch .hvd-label { margin-top: 20px; }
  #hv-dr.hvd .hvd-ch .hvd-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; padding: 12px 8px; }
  .hvd-ch .hvd-list > li::before { display: none; }
  .hvd-ch .hvd-row { flex-direction: column; gap: 7px; min-height: 0; padding: 6px 2px; border-radius: 12px; text-align: center; }
  .hvd-ch .hvd-app { width: 40px; height: 40px; border-radius: 12px; }
  .hvd-ch .hvd-app .ph-ico { width: 22px; height: 22px; }
  .hvd-ch .hvd-row-t { align-items: center; font-size: 12px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
  .hvd-ch .hvd-row-t small, .hvd-ch .hvd-row-i { display: none; }
  .hvd-seg--n2, #hvdTab-menu { display: none; }
  #hvdPane-menu, #hvdPane-menu[hidden] { display: block; animation: none; }

  /* 메뉴: 대메뉴마다 흰 카드, 하위 메뉴는 모두 펼쳐 둔다(높이 다른 카드는 벽돌 쌓기) */
  #hv-dr.hvd .hvd-menu { columns: 3 220px; column-gap: 16px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  #hv-dr.hvd .hvd-menu > li {
    break-inside: avoid; margin: 0 0 16px; padding: 8px 0 10px;
    background: var(--hvd-card); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .hvd-menu > li + li::before, .hvd-acc-ul > li::before { display: none; }
  .hvd-menu > li > .hvd-row { min-height: 44px; padding: 10px 18px 6px; font-size: 17px; font-weight: 700; }
  .hvd-menu > li:not(.hvd-acc) > .hvd-row { padding-bottom: 10px; }
  .hvd-menu .hvd-acc > .hvd-row { cursor: default; }
  .hvd-menu .hvd-acc > .hvd-row:hover, .hvd-menu .hvd-acc > .hvd-row:active { background: none; }
  .hvd-menu .hvd-acc > .hvd-row .hvd-row-i { display: none; }
  #hv-dr.hvd .hvd-acc-p { grid-template-rows: 1fr; }
  #hv-dr.hvd .hvd-acc-ul { visibility: visible; background: none; }
  .hvd-menu .hvd-row--d2 {
    width: calc(100% - 16px); margin: 0 8px; min-height: 40px; padding: 8px 10px; border-radius: 10px;
    font-size: 15px; color: #3a3a3c;
  }
  .hvd-menu .hvd-row--d2 .hvd-row-i { opacity: 0; transition: opacity .15s; }
  .hvd-menu a.hvd-row--d2:hover { background: rgba(118,118,128,.08); color: var(--hvd-tx); }
  .hvd-menu a.hvd-row--d2:hover .hvd-row-i { opacity: 1; }
  .hvd-menu .hvd-acc .hvd-acc > .hvd-row--d2 { min-height: 34px; padding-bottom: 2px; font-weight: 600; color: var(--hvd-tx); }
  .hvd-menu .hvd-row--d3 { width: calc(100% - 16px); margin: 0 8px; min-height: 36px; padding: 6px 10px 6px 22px; border-radius: 10px; font-size: 13px; }
  .hvd-menu a.hvd-row--d3:hover { background: rgba(118,118,128,.08); color: var(--hvd-tx); }
  .hvd-menu .hvd-row--d3 .hvd-row-i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.hv--dr-card #hv-dr.hvd, body.hv--dr-card #hv-dr.hvd.hv--open, .hvd-body > *, .hvd-acc-p { transition: none !important; }
  .hvd-pane { animation: none !important; }
}


/* 검색 창(확정 스타일 v2, 2026-10-02): 회색 바탕 + 흰 알약 입력, 알약 추천어, 흰 카드 목록. 강조는 사이트 색 + 자동 글자색 */
#hv-sch {
  --sch-main: var(--hv-main); --sch-on: #fff; --sch-line: rgba(60,60,67,.12); --sch-soft: rgba(118,118,128,.12);
  position: fixed; inset: 10px; z-index: var(--z-sch);
  display: flex; flex-direction: column; overflow: hidden;
  clip-path: circle(0% at var(--sch-ox, 95%) var(--sch-oy, 36px));
  border-radius: 24px; background: rgba(242,242,247,.96);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 12px 60px rgba(0,0,0,.14);
  color: #1d1d1f; font-family: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif; word-break: keep-all;
  visibility: hidden;
  transition: clip-path .45s var(--expo), visibility .45s var(--expo);
}
@supports (color: oklch(from red l c h)) { #hv-sch { --sch-on: oklch(from var(--sch-main) clamp(0,(0.6 - l) * 1000,1) 0 0); } }
#hv-sch.hv--on {
  clip-path: circle(150% at var(--sch-ox, 95%) var(--sch-oy, 36px));
  visibility: visible;
  transition: clip-path .8s var(--expo), visibility .8s var(--expo);
}
@media (max-width: 900px) { #hv-sch { inset: 0; border-radius: 0; box-shadow: none; } }
#hv-sch :is(a,button):focus-visible { outline: 2px solid var(--sch-main); outline-offset: 2px; }
#hv-sch input:focus-visible { outline: none; }

/* 위 막대·제목·입력: 열릴 때 차례로 */
.sch-topbar, .sch-title, .sch-input-wrap, .sch-section { opacity: 0; transform: translateY(10px); transition: opacity 0s, transform 0s; }
#hv-sch.hv--on :is(.sch-topbar,.sch-title,.sch-input-wrap,.sch-section) { opacity: 1; transform: none; }
#hv-sch.hv--on .sch-topbar { transition: opacity .4s var(--expo) .25s, transform .45s var(--expo) .25s; }
#hv-sch.hv--on .sch-title { transition: opacity .45s var(--expo) .32s, transform .5s var(--expo) .32s; }
#hv-sch.hv--on .sch-input-wrap { transition: opacity .45s var(--expo) .4s, transform .5s var(--expo) .4s; }
#hv-sch.hv--on .sch-section:nth-child(1) { transition: opacity .45s var(--expo) .48s, transform .5s var(--expo) .48s; }
#hv-sch.hv--on .sch-section:nth-child(2) { transition: opacity .45s var(--expo) .56s, transform .5s var(--expo) .56s; }
#hv-sch.hv--on .sch-section:nth-child(3) { transition: opacity .45s var(--expo) .64s, transform .5s var(--expo) .64s; }
.sch-topbar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; height: 56px; padding: calc(env(safe-area-inset-top,0px) + 8px) 16px 0; }
.sch-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sch-soft); color: #1d1d1f; cursor: pointer; }
.sch-back .ph-ico { width: 18px; height: 18px; }
.sch-title { flex-shrink: 0; padding: 12px 20px 16px; }
.sch-title p { margin: 0; color: #1d1d1f; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.sch-input-wrap { flex-shrink: 0; padding: 0 16px; }
.sch-input-row { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 6px 0 18px; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s ease; }
.sch-input-row:focus-within { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sch-main) 55%, transparent), 0 0 0 5px color-mix(in srgb, var(--sch-main) 9%, transparent); }
.sch-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #1d1d1f; font-family: inherit; font-size: 16px; caret-color: var(--sch-main); }
.sch-input::placeholder { color: #8e8e93; }
.sch-clear-btn { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--sch-soft); color: #3a3a3c; cursor: pointer; }
.sch-clear-btn.show { display: flex; }
.sch-clear-btn .ph-ico { width: 12px; height: 12px; }
.sch-submit-btn { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sch-main); color: var(--sch-on); cursor: pointer; }
.sch-submit-btn .ph-ico { width: 18px; height: 18px; }

/* 본문 */
.sch-body { flex: 1; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.sch-body::-webkit-scrollbar { display: none; }
.sch-section { padding: 24px 16px 0; }
.sch-section:last-child { padding-bottom: 32px; }
.sch-section-label { margin: 0 4px 10px; color: #1d1d1f; font-size: 15px; font-weight: 700; }

/* 추천 검색어: 알약 */
.sch-tags-wrap { position: relative; }
.sch-tags { display: flex; flex-wrap: wrap; gap: 8px; max-height: 80px; overflow: hidden; }
.sch-tags.is-open { max-height: none; }
.sch-tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: #fff; color: #3a3a3c; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s ease; }
.sch-tag:hover { background: rgba(255,255,255,.7); }
.sch-tag-hash { margin-right: 2px; color: #8e8e93; font-weight: 600; }
.sch-tags-more { display: none; margin-top: 10px; padding: 0 12px; min-height: 32px; border: 0; border-radius: 16px; background: var(--sch-soft); color: #3a3a3c; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sch-tags-more.is-show { display: inline-flex; align-items: center; gap: 4px; }
.sch-tags-more .ph-ico { width: 12px; height: 12px; transition: transform .3s var(--expo); }
.sch-tags-more.is-open .ph-ico { transform: rotate(180deg); }

/* 인기 순위: 흰 카드 목록 */
.sch-rank { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 16px; background: #fff; }
@media (max-width: 500px) { .sch-rank { grid-template-columns: 1fr; } }
.sch-rank-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 16px; color: inherit; text-decoration: none; cursor: pointer; transition: background-color .2s ease; }
.sch-rank-item + .sch-rank-item::before { content: ""; position: absolute; top: 0; right: 0; left: 50px; height: 1px; background: var(--sch-line); }
.sch-rank-item:hover { background: rgba(118,118,128,.06); }
.sch-rank-num { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sch-soft); color: #3a3a3c; font-size: 13px; font-weight: 700; }
.sch-rank-item:nth-child(-n+3) .sch-rank-num { background: var(--sch-main); color: var(--sch-on); }
.sch-rank-name { flex: 1; min-width: 0; overflow: hidden; color: #1d1d1f; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sch-badge { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; font-weight: 700; }
.sch-badge-hot { background: rgba(210,63,49,.1); color: #c0392b; }
.sch-badge-up { background: rgba(0,104,214,.1); color: #0058b8; }
.sch-badge-new { background: rgba(52,199,89,.14); color: #1f7a39; }

/* 관심 항목 */
.sch-rec-list { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; }
.sch-rec-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; cursor: pointer; }
.sch-rec-item + .sch-rec-item::before { content: ""; position: absolute; top: 0; right: 0; left: 64px; height: 1px; background: var(--sch-line); }
.sch-rec-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: var(--sch-soft); color: #3a3a3c; }
.sch-rec-icon .ph-ico { width: 18px; height: 18px; }
.sch-rec-info { flex: 1; min-width: 0; }
.sch-rec-name { color: #1d1d1f; font-size: 15px; font-weight: 600; }
.sch-rec-desc { color: #6e6e73; font-size: 12px; }
.sch-rec-arr { flex-shrink: 0; color: #c7c7cc; }
.sch-rec-arr .ph-ico { width: 15px; height: 15px; }

/* 검색 결과: 흰 카드 목록 */
.sch-result { display: none; padding: 20px 16px 32px; }
.sch-result.show { display: block; }
.sch-result-header { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; }
.sch-result-label { color: #1d1d1f; font-size: 15px; font-weight: 700; }
.sch-result-count { color: #6e6e73; font-size: 13px; }
.sch-result-list { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; }
.sch-result-list:empty { display: none; }
.sch-result-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; color: inherit; text-decoration: none; }
.sch-result-item + .sch-result-item::before { content: ""; position: absolute; top: 0; right: 0; left: 72px; height: 1px; background: var(--sch-line); }
.sch-result-item:hover { background: rgba(118,118,128,.06); }
.sch-result-thumb { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: 12px; background: #e5e5ea center/cover no-repeat; }
.sch-result-thumb .ph-ico { width: 20px; height: 20px; color: #8e8e93; }
.sch-result-info { flex: 1; min-width: 0; }
.sch-result-name { overflow: hidden; color: #1d1d1f; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sch-result-name em { color: inherit; font-style: normal; background: color-mix(in srgb, var(--sch-main) 22%, transparent); border-radius: 3px; }
.sch-result-desc { color: #6e6e73; font-size: 13px; }
.sch-result-arr { flex-shrink: 0; color: #c7c7cc; }
.sch-result-arr .ph-ico { width: 14px; height: 14px; }
.sch-loading { display: none; justify-content: center; gap: 7px; padding: 32px 0; }
.sch-loading.show { display: flex; }
.sch-dot { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: schDot 1.2s ease-in-out infinite; }
.sch-dot:nth-child(2) { animation-delay: .18s; }
.sch-dot:nth-child(3) { animation-delay: .36s; }
@keyframes schDot { 0%,100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.sch-empty { padding: 32px 0; color: #6e6e73; font-size: 14px; text-align: center; }
.sch-more { display: none; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 12px; border-radius: 24px; background: var(--sch-soft); color: #1d1d1f; font-size: 14px; font-weight: 600; text-decoration: none; }
.sch-more.show { display: flex; }
.sch-more .ph-ico { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  #hv-sch, #hv-sch.hv--on, .sch-topbar, .sch-title, .sch-input-wrap, .sch-section, #hv-sch.hv--on :is(.sch-topbar,.sch-title,.sch-input-wrap,.sch-section) { transition: none !important; }
  .sch-dot { animation: none; }
}


/* 진료 배지 */
.hv-badge {
  position: fixed; left: 28px; bottom: 28px; z-index: var(--z-flt);
  padding: 8px 16px; border-radius: 999px;
  background: var(--hv-main); cursor: default;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 6px 20px rgba(var(--hv-rgb),0.35);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--expo);
}
.hv-badge:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(var(--hv-rgb),0.4); }
.hv-badge::after {
  content: attr(data-time);
  position: absolute; left: 0; bottom: calc(100% + 10px);
  background: #111; color: #fff; font-size: 12px; line-height: 1.6;
  padding: 8px 14px; border-radius: 10px;
  white-space: pre-line; min-width: 180px;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity 0.25s var(--expo), transform 0.25s var(--expo);
}
.hv-badge:hover::after { opacity: 1; transform: translateY(0); }

.hv-dot { width: 6px; height: 6px; border-radius: 50%; }
.hv-dot--open   { background: #22c55e; animation: hvPulse 2s infinite; }
.hv-dot--lunch  { background: #f59e0b; }
.hv-dot--closed { background: #9ca3af; }
@keyframes hvPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
  50%      { box-shadow: 0 0 0 7px rgba(34,197,94,0.06); }
}


/* 빠른상담 버튼 — btn_sf 슬라이드 패턴 적용 */
.hv-fast-btn {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: var(--z-flt);
  /* btn_sf 구조 */
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 160px; height: 52px; padding: 0 36px;
  background: var(--hv-main); color:var(--hv-on,#fff);
  border: none; border-radius: 999px;
  font-size: 15px; font-family: var(--font-pret, 'Pretendard', sans-serif);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(var(--hv-rgb),0.4);
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--expo),
    opacity 0.3s var(--expo);
  will-change: transform;
}
/* 슬라이드 채우기 레이어 */
.hv-fast-btn::before {
  content: '';
  position: absolute; top:0;right:0;bottom:0;left:0;inset:0;
  background: var(--hv-main); /* color-mix 미지원 폴백 */
  background: color-mix(in srgb, var(--hv-main) 78%, #000 22%);
  transform: translateY(102%);
  transition: transform 0.42s var(--expo);
  border-radius: 999px;
}
.hv-fast-btn:hover { transform: translateX(-50%) translateY(-4px); box-shadow: 0 16px 36px rgba(var(--hv-rgb),0.45); }
.hv-fast-btn:hover::before { transform: translateY(0); }
.hv-fast-btn:active { transform: translateX(-50%) translateY(0); transition-duration: 0.08s; }
.hv-fast-btn.hv--hide { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); }

#hv-fast-wrap {
  position: fixed; left: 0; bottom: 0; width: 100%;
  z-index: var(--z-flt);
  background: rgba(var(--hv-rgb),0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform 0.5s var(--expo);
}
#hv-fast-wrap.hv--open { transform: translateY(0); }

/* 진행 바 */
#hv-prog {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--hv-main), var(--hv-sub));
  width: 100%; transform: scaleX(0); transform-origin: left center;
  z-index: var(--z-prog);
  border-radius: 0 2px 2px 0; will-change: transform;
}

@media (max-width: 900px) {
  .hv-badge { left: 20px; right: auto; bottom: 28px; }
}


@media(max-width:900px){
 #hv-hd .hv-icons-panel{left:auto;right:0;max-width:calc(100vw - 24px);box-sizing:border-box}
 #hv-dr{left:0;right:0;width:100%;max-width:100%;box-sizing:border-box}
 #hv-dr .hv-dr__R{min-height:0;overscroll-behavior:contain}
 body.hv-dr-open #qmb_bar{visibility:hidden;pointer-events:none}
 /* 막대 안에서 따로 '보임'으로 지정된 가운데 아이콘까지 같이 숨긴다(메뉴의 상담 신청 글자 위에 아이콘만 떠 있었다, 2026-10-07) */
 body.hv-dr-open #qmb_bar *{visibility:hidden!important}
 /* 시술 안내 목록의 하단 선택 막대(#hprMfoot)는 전체 메뉴보다 위(z-index 10001)에 있어, 메뉴를 열어도 떠 있었다(2026-10-07) */
 body.hv-dr-open #hprMfoot{visibility:hidden;pointer-events:none}
}
/* Persistent route state is independent of hover/expanded panel state. */
#hv-mg .hv-mg__a[data-hive-menu-current],
#hv-sub-wrap a[data-hive-menu-current],
#hv-hd .hv-sub a[data-hive-menu-current],
#hv-hd .hv-pnl a[data-hive-menu-current],
#hv-mega a[data-hive-menu-current]{color:var(--hv-drop-tx-hover);font-weight:700}
#hv-dr [data-hive-menu-current]{color:var(--hv-main);font-weight:700}
#hv-mg .hv-mg__a[data-hive-menu-current="page"],
#hv-dr a[data-hive-menu-current="page"]{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}


/* 항상 표시 옵션: 상태 전환 중 높이/로고가 갑자기 바뀌지 않도록 한다. */
body.hv--header-always-visible #hv-hd {
  transition: height .42s cubic-bezier(.22,.61,.36,1), top .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1);
}
body.hv--header-always-visible #hv-hd .hv-logo {
  transition: width .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease, transform .42s cubic-bezier(.22,.61,.36,1);
}
body.hv--header-always-visible #hv-hd .hv-inner {
  transition: width .42s cubic-bezier(.22,.61,.36,1), background-color .42s ease, box-shadow .42s ease, border-radius .42s ease;
}
@media (prefers-reduced-motion:reduce) {
  body.hv--header-always-visible #hv-hd,
  body.hv--header-always-visible #hv-hd .hv-inner,
  body.hv--header-always-visible #hv-hd .hv-logo,
  body.hv--header-always-visible #hv-hd .hv-logo img { transition:none!important; }
}
/* 모바일 로고 왼쪽 · 메뉴 버튼 오른쪽(옵션 mo_logo_left). 기본 배치(메뉴 버튼 왼쪽·로고 가운데)는 그대로 */
@media(max-width:900px){
#hv-hd.hv--mo-logo-left .hv-inner{justify-content:flex-start!important;padding-left:16px!important}
#hv-hd.hv--mo-logo-left .hv-logo{margin-left:0!important;margin-right:auto!important}
#hv-hd.hv--mo-logo-left #hvHbg{left:auto!important;right:8px!important}
#hv-hd.hv--mo-logo-left .hv-icons-wrap{right:52px!important}
}
/* 모바일 바로가기 줄(헤더 빌더 옵션 mtabs): 헤더 바로 아래에 붙어 따라오는 가로 메뉴 한 줄. 넓은 화면에서는 숨긴다 */
.hv-mtabs{display:none}
@media (max-width: 900px) {
#hv-hd.hv--mtabs ~ .hv-mtabs{display:block;position:sticky;top:calc(var(--hv-hd-top,0px) + var(--hv-h));z-index:450;background:var(--hv-mtabs-bg,rgba(255,255,255,.96));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.08)}
#hv-hd.hv--mtabs.hv--sc ~ .hv-mtabs{top:calc(var(--hv-hd-sc-top,0px) + var(--hv-h-sc,var(--hv-h)))}
/* 헤더가 스크롤에 숨는 설정이면 바로가기 줄도 같은 박자로 함께 숨고, 헤더가 다시 나오면 함께 나온다.
   '헤더 항상 표시' 설정이면 헤더가 숨지 않으므로 줄도 그대로 남는다 */
#hv-hd.hv--mtabs ~ .hv-mtabs{transition:transform .8s var(--expo),top .3s var(--snap),visibility 0s linear 0s}
#hv-hd.hv--mtabs.hv--hide ~ .hv-mtabs{transform:translateY(calc(-100% - var(--hv-h-sc,var(--hv-h)) - var(--hv-hd-sc-top,0px)));visibility:hidden;pointer-events:none;transition:transform .8s var(--expo),top .3s var(--snap),visibility 0s linear .8s}
body.hv--mobile-scroll-perf #hv-hd.hv--mtabs ~ .hv-mtabs{transition:transform .3s var(--snap),top .3s var(--snap),visibility 0s linear 0s}
body.hv--mobile-scroll-perf #hv-hd.hv--mtabs.hv--hide ~ .hv-mtabs{transition:transform .3s var(--snap),top .3s var(--snap),visibility 0s linear .3s}
@media (prefers-reduced-motion: reduce){#hv-hd.hv--mtabs ~ .hv-mtabs{transition:none}}
.hv-mtabs-list{display:flex;gap:4px;margin:0;padding:0 12px;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hv-mtabs-list::-webkit-scrollbar{display:none}
.hv-mtabs-list li{flex:1 0 auto}
.hv-mtabs-a{display:block;min-height:44px;padding:0 10px;line-height:42px;text-align:center;border-bottom:2px solid transparent;color:#444;font-size:14px;font-weight:400;white-space:nowrap;text-decoration:none}
.hv-mtabs-a.is-on{color:#111;border-bottom-color:currentColor}
.hv-mtabs-a>.hv-menu-labels{vertical-align:middle;line-height:1.4}
.hv-mtabs-a:focus-visible{outline:2px solid #111;outline-offset:-3px}
/* 넘치는 쪽 끝: 흐림(뒤 글자가 서서히 사라짐) + 화살표. 넘칠 때만 스크립트가 보이게 한다 */
.hv-mtabs-arr{position:absolute;top:0;bottom:1px;z-index:1;display:flex;align-items:center;width:56px;padding:0;border:0;color:#111;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hv-mtabs-arr[hidden]{display:none}
.hv-mtabs-arr--next{right:0;justify-content:flex-end;padding-right:10px;background:var(--hv-mtabs-bg,rgba(255,255,255,.96));-webkit-mask-image:linear-gradient(to right,transparent,#000 55%);mask-image:linear-gradient(to right,transparent,#000 55%)}
.hv-mtabs-arr--prev{left:0;justify-content:flex-start;padding-left:10px;background:var(--hv-mtabs-bg,rgba(255,255,255,.96));-webkit-mask-image:linear-gradient(to left,transparent,#000 55%);mask-image:linear-gradient(to left,transparent,#000 55%)}
.hv-mtabs-arr:focus-visible{outline:2px solid #111;outline-offset:-3px}
}