/* 네 진료과 헤더(피부과는 메인 · 사이드바 화면 제외) — 유리 캡슐. 1068px 이하는 header-mobile-bar 가 대신한다 */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; }
.header .inner.hx {
  max-width: none;
  padding: 0;
  font-family: var(--font-multilang);
  color: #16181d;
  word-break: keep-all;
  overflow-wrap: break-word;
}
html:lang(zh) .hx, html:lang(ja) .hx, html:lang(th) .hx { word-break: normal; line-break: strict; }
.header .inner.hx.scrolled { background: none; box-shadow: none; backdrop-filter: none; }
.hx a { color: inherit; text-decoration: none; }
.hx :focus-visible { outline: 2px solid #8c79b3; outline-offset: 2px; }
.hx [hidden] { display: none !important; }

.hx-bar {
  height: 80px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(107, 89, 146, .12);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: background-color .3s, box-shadow .3s;
}
.hx.scrolled .hx-bar { background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px -14px rgba(60, 40, 110, .28); }

.hx-brand { flex: none; display: flex; align-items: center; gap: 12px; }
.hx-logo img { display: block; height: 44px; width: auto; }
.hx-pop { position: relative; }
.hx-dept {
  height: 30px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(107, 89, 146, .22);
  background: rgba(255, 255, 255, .7);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #4d3f72;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hx-caret { flex: none; fill: currentColor; transition: transform .25s; }
[aria-expanded="true"] .hx-caret { transform: rotate(180deg); }

/* 드롭다운 */
.hx-dd {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 10;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 190px;
  max-width: 300px;
  box-sizing: border-box;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px -12px rgba(40, 30, 70, .3);
  animation: hxPop .16s cubic-bezier(.2, .8, .2, 1) both;
}
.hx-dd-right { left: auto; right: 0; }
.hx-dd-links { display: flex; flex-direction: column; }
.hx-dd a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #3a3d45;
  overflow-wrap: anywhere;
  transition: background-color .2s, color .2s;
}
.hx-dd a:hover, .hx-dd a[aria-current] { background: #f3effa; color: #4d3f72; }
.hx-dd a[aria-current] { font-weight: 700; }
.hx-langs img, .hx-lang img { flex: none; width: 21px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }

/* 상단 메뉴 */
.hx-navbox { flex: 1 1 auto; min-width: 0; align-self: stretch; position: relative; display: flex; align-items: center; }
.hx-ind {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 40px;
  margin-top: -20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f3eefb, #e9e1f6);
  box-shadow: inset 0 0 0 1px rgba(107, 89, 146, .12);
  opacity: 0;
  pointer-events: none;
  transition: left .38s cubic-bezier(.2, .8, .2, 1), width .38s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.hx-nav { position: relative; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 2px; }
/* 로고 그림 · 글꼴이 뜨고 메뉴 접기가 끝나면 보인다(header-x.js). 그전에 보이면 옆으로 밀리며 화면 밀림이 된다. 스크립트가 없어도 2초 뒤에는 보인다 */
.hx-dept, .hx-navbox { visibility: hidden; animation: hxReveal 0s 2s forwards; }
.hx.hx-ready .hx-dept, .hx.hx-ready .hx-navbox { visibility: visible; animation: none; }
.hx-item { position: relative; flex: none; }
.hx-top {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  color: #3a3d45;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .25s;
}
.hx-top:hover { color: #16181d; }
.hx-top[aria-expanded="true"] { font-weight: 700; color: #4d3f72; }
.hx-item > .hx-dd { top: calc(100% + 16px); min-width: 210px; padding: 8px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(76, 29, 149, .32), 0 1px 2px rgba(23, 21, 31, .06), 0 8px 20px -6px rgba(40, 30, 70, .2), 0 24px 48px -20px rgba(40, 30, 70, .34); }
.hx-item > .hx-dd a { min-height: 42px; padding: 8px 14px; font-size: 14.5px; }

/* 언어 · 계정 · 전체 메뉴 */
.hx-util { flex: none; display: flex; align-items: center; gap: 2px; }
.hx-icon {
  height: 42px;
  min-width: 42px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #16181d;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background-color .2s;
}
.hx-icon:hover { background: rgba(107, 89, 146, .10); }
.hx-user, .header .hx .btn_menu a { width: 42px; padding: 0; }
.header .hx .btn_menu { min-width: 0; height: auto; margin-left: 2px; }
.header .hx .btn_menu a { flex-direction: row; height: 42px; justify-content: center; }
/* 전체 메뉴가 열리면(header.js 가 .active) ☰ 가 X 로 — 패널과 같은 곡선 · 시간 */
.hx-burger path { transform-box: fill-box; transform-origin: center; transition: transform var(--mp-in, .36s) var(--mp-ease, ease), opacity var(--mp-in, .36s) var(--mp-ease, ease); }
.hx-burger a.active .hx-bar1 { transform: translateY(5px) rotate(45deg); }
.hx-burger a.active .hx-bar2 { opacity: 0; }
.hx-burger a.active .hx-bar3 { transform: translate(-2px, -5px) rotate(-45deg) scaleX(1.33); }
.hx-dot { position: absolute; right: 9px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #8c79b3; box-shadow: 0 0 0 2px #fff; animation: hxHalo 2.4s ease-in-out infinite; }
.hx-badge {
  position: absolute;
  right: 2px;
  top: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #8c79b3;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* 상단 메뉴 판이 열리면 헤더 아래 화면을 흐린다 — 마우스를 막지 않아야 헤더 밖으로 나갈 때 판이 닫힌다 */
.hx::before {
  content: '';
  position: fixed;
  inset: 80px 0 0 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(23, 21, 31, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .22s;
}
.hx.hx-open::before { opacity: 1; visibility: visible; transition: opacity .2s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.header:has(.nav_sub_menu.active) .hx::before, body:has(.derma-header-hamburger-menu.active) .hx::before { visibility: hidden; }

/* 메가 패널 */
.hx-mega {
  max-width: 1360px;
  margin: 12px auto 0;
  box-sizing: border-box;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(76, 29, 149, .3), 0 2px 4px rgba(23, 21, 31, .06), 0 12px 32px -8px rgba(40, 30, 70, .22), 0 48px 96px -32px rgba(40, 30, 70, .4);
  overflow: hidden;
  animation: hxDrop .24s cubic-bezier(.2, .8, .2, 1) both;
}
.hx-mega-grid {
  padding: 22px 22px 22px 18px;
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 300px);
  gap: 28px;
  align-items: stretch;
}
.hx-rail { position: relative; min-width: 0; padding: 6px 0; }
.hx-rail ul { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.hx-rail-ind {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f1ecfa, #f8f5fd);
  box-shadow: inset 3px 0 0 #8c79b3;
  pointer-events: none;
  transition: top .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1);
}
.hx-cat {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 8px 14px 8px 18px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: #3a3d45;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: color .25s;
}
.hx-cat-name { min-width: 0; overflow-wrap: anywhere; }
.hx-cat:hover, .hx-cat[aria-current="true"] { color: #4d3f72; }
.hx-cat[aria-current="true"] { font-weight: 800; }
.hx-count { flex: none; font-size: 12px; font-weight: 600; color: #a3a6ad; }
.hx-cat[aria-current="true"] .hx-count { color: #8c79b3; }
.hx-items-box { min-width: 0; max-height: calc(100vh - 150px); overflow-y: auto; padding: 10px 0 6px; }
/* 피부과 상세의 서랍은 뒤 화면을 어둡게 덮지 않는다(옛 상세 헤더와 같게) */
body > .derma-header-hamburger-menu ~ .hamburger-overlay { background: none; }
.hx-items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 2px 28px; }
.hx-items li { animation: hxRise .24s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 12ms); }
.hx-items a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 6px 0;
  border-bottom: 1px solid #f1eff5;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: #1f2128;
  overflow-wrap: anywhere;
  transition: color .2s;
}
.hx-items a > span { min-width: 0; }
.hx-items a:hover { color: #4d3f72; }
.hx-arrow { flex: none; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s; }
.hx-items a:hover .hx-arrow, .hx-items a:focus-visible .hx-arrow { opacity: 1; transform: none; }

.hx-spot {
  position: relative;
  min-width: 0;
  border-radius: 22px;
  padding: 22px 22px 18px;
  color: #fff;
  background: linear-gradient(160deg, #2f2652 0%, #4d3f72 55%, #6b5992 100%);
  overflow: hidden;
  isolation: isolate;
}
.hx-orb { position: absolute; z-index: -1; border-radius: 50%; }
.hx-orb-a { right: -60px; top: -50px; width: 220px; height: 220px; background: radial-gradient(circle at 40% 40%, rgba(234, 166, 200, .85), rgba(154, 133, 189, .25) 55%, transparent 70%); filter: blur(4px); animation: hxOrb 9s ease-in-out infinite; }
.hx-orb-b { left: -40px; bottom: -70px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(180, 163, 211, .55), transparent 70%); animation: hxOrb 12s ease-in-out infinite reverse; }
.hx-spot-head { animation: hxRise .26s cubic-bezier(.2, .8, .2, 1) both; }
.hx-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255, 255, 255, .7); }
.hx-spot-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.hx-spot-name { font-size: 30px; font-weight: 900; letter-spacing: -.6px; line-height: 1.2; overflow-wrap: anywhere; }
.hx-spot-count { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 700; }
.hx-spot-body { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); }
.hx-spot-body .hx-eyebrow { margin-bottom: 4px; letter-spacing: 0; }
.hx-spot-body ul { margin: 0; padding: 0; list-style: none; }
.hx-spot-body ul + .hx-eyebrow { margin-top: 12px; }
.hx-spot-body a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: background-color .2s, padding-left .25s;
}
.hx-quick a { font-weight: 500; color: rgba(255, 255, 255, .92); }
.hx-spot-body a:hover { background: rgba(255, 255, 255, .12); padding-left: 14px; }

@keyframes hxDrop { from { opacity: 0; transform: translateY(-10px) scale(.985); clip-path: inset(0 0 100% 0 round 28px); } to { opacity: 1; transform: none; clip-path: inset(-120px round 28px); } }
@keyframes hxPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hxOrb { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-26px, 18px) scale(1.12); } 66% { transform: translate(14px, -12px) scale(.94); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes hxReveal { to { visibility: visible; } }
@keyframes hxHalo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hx::before, .hx *, .hx *::before, .hx *::after { animation: none !important; transition: none !important; }
}