/* 공통 헤더(han-hd) 스타일 */
.han-hd {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid #ededed;
}
.han-hd__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 100px);
  padding: 16px clamp(20px, 8vw, 150px);
}
.han-hd__logo { flex-shrink: 0; display: inline-flex; width: 150px; height: 33px; }
.han-hd__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.han-hd__nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(20px, 3vw, 60px);
}
.han-hd__item { position: relative; }
.han-hd__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease-out;
}
.han-hd__link:hover,
.han-hd__item--has-sub:hover > .han-hd__link { color: var(--main, #0a58a5); }
.han-hd__toggle { display: none; }

.han-hd__item--has-sub::after {
  content: '';
  position: absolute;
  left: -20px;
  right: -20px;
  top: 100%;
  height: 40px;
  z-index: 1;
}

@media (min-width: 1440px) {
  .han-hd__link { width: 170px; padding-left: 0; padding-right: 0; }
}

/* 서브 드롭다운 (데스크탑: hover) */
.han-hd__sub {
  position: absolute;
  top: calc(100% + 33px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(9,19,71,0.2);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
.han-hd__item--has-sub:hover > .han-hd__sub,
.han-hd__item--has-sub:focus-within > .han-hd__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.han-hd__sub a {
  padding: 4px 10px;
  border-radius: 8px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  transition: background 0.14s ease-out, color 0.14s ease-out;
}
.han-hd__sub a:hover { color: var(--main, #0a58a5); } /* 배경 유지, 글씨색만 변경 */

/* 언어 선택 */
.han-hd__lang { position: relative; flex-shrink: 0; }
.han-hd__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #222;
}
.han-hd__globe { width: 24px; height: 24px; }
.han-hd__caret { width: 18px; height: 18px; transition: transform 0.16s ease-out; }
.han-hd__lang.is-open .han-hd__caret { transform: rotate(180deg); }
.han-hd__lang-btn,
.han-hd__lang-btn:hover,
.han-hd__lang-btn:focus,
.han-hd__lang-btn:active,
.han-hd__lang-btn:focus-visible { background: transparent !important; box-shadow: none !important; color: #222 !important; }
.han-hd__lang-btn:hover span,
.han-hd__lang-btn:hover svg { color: #222 !important; }
/* 모바일 햄버거·서브 아코디언 토글 */
.han-hd__burger,
.han-hd__burger:hover,
.han-hd__burger:focus,
.han-hd__toggle,
.han-hd__toggle:hover,
.han-hd__toggle:focus { background: transparent !important; box-shadow: none !important; }
.han-hd__lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  padding: 6px;
  margin-top: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
.han-hd__lang.is-open .han-hd__lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.han-hd__lang-menu a {
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #222;
  text-decoration: none;
  text-align: center;
}
.han-hd__lang-menu a:hover { background: #f5f8fc; color: var(--main, #0a58a5); }

/* 햄버거 (모바일 전용) */
.han-hd__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.han-hd__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #222;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.han-hd.is-menu-open .han-hd__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.han-hd.is-menu-open .han-hd__burger span:nth-child(2) { opacity: 0; }
.han-hd.is-menu-open .han-hd__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Tablet 가로: ~1024px ────────────────── */
@media (max-width: 1024px) {
  .han-hd__link { font-size: 17px; padding: 10px 12px; }
  .han-hd__inner { gap: 24px; }
}

/* ── Tablet 세로 이하: ~768px → 모바일 메뉴 ── */
@media (max-width: 768px) {
  .han-hd__inner { gap: 16px; }
  .han-hd__burger { display: flex; }
  .han-hd__lang { margin-left: auto; }
  .han-hd__item--has-sub::after { display: none; } /* 모바일 아코디언에는 브릿지 불필요 */

  .han-hd__nav {
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 65px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: #fff;
    border-bottom: 1px solid #ededed;
    padding: 8px 24px 24px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .han-hd.is-menu-open .han-hd__nav { opacity: 1; visibility: visible; transform: translateY(0); }

  .han-hd__item { border-bottom: 1px solid #f0f0f0; }
  .han-hd__link { justify-content: flex-start; font-size: 18px; padding: 16px 0; }
  .han-hd__item--has-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .han-hd__item--has-sub > .han-hd__link { flex: 1 1 auto; }
  .han-hd__toggle {
    display: block;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
  }
  .han-hd__toggle::before, .han-hd__toggle::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 2px;
    background: #222;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
  }
  .han-hd__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
  .han-hd__item--has-sub.is-open .han-hd__toggle::after { transform: translate(-50%, -50%) rotate(0); }

  .han-hd__sub {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    gap: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid #e9eef4;
    border-radius: 0;
    margin: 0 0 0 4px;
    padding: 0 0 0 14px;
    opacity: 1;
    visibility: visible;
    display: flex;
    /* 부드러운 아코디언: 높이 트랜지션 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, padding 0.32s ease, margin 0.32s ease;
  }
  .han-hd__item--has-sub.is-open .han-hd__sub { max-height: 60vh; padding: 4px 0 14px 14px; margin: 4px 0 8px 4px; }
  .han-hd__item--has-sub:hover > .han-hd__sub,
  .han-hd__item--has-sub:focus-within > .han-hd__sub { transform: none; }
  .han-hd__sub a { padding: 12px 8px; color: #555; font-size: 16px; text-align: left; white-space: normal; }
  .han-hd__sub a:hover { color: var(--main, #0a58a5); }
}

@media (max-width: 480px) {
  .han-hd__logo { width: 128px; }
  .han-hd__lang-btn { font-size: 16px; }
}