:root {
  --js-header-navy: #173a5e;
  --js-header-ink: #152c45;
  --js-header-muted: #8794a5;
  --js-header-line: #e5e9ee;
  --js-header-surface: #fff;
}

.js-header,
.js-header * { box-sizing: border-box; }

.js-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  color: var(--js-header-ink);
  background: var(--js-header-surface);
  border-top: 1px solid var(--js-header-line);
  font-family: inherit;
}

.js-header--not-sticky { position: relative; top: auto; }
.admin-bar .js-header--not-sticky { top: auto; }
.js-header--no-shadow.is-scrolled .js-header__bar { box-shadow: none; }

.admin-bar .js-header { top: 32px; }

.js-header__bar {
  width: 100%;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: 0 clamp(24px, 4.1vw, 58px);
  border-bottom: 1px solid transparent;
  transition: min-height .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.js-header.is-scrolled .js-header__bar {
  min-height: 72px;
  border-color: var(--js-header-line);
  box-shadow: 0 5px 18px rgba(20, 45, 70, .06);
}

.js-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: var(--js-header-navy);
  text-decoration: none;
}

.js-header__mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--js-header-navy);
  color: #fff;
}

.js-header__mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.js-header__logo-image { display: block; width: auto; height: var(--js-header-logo-height, 40px); max-width: 260px; object-fit: contain; }
.js-header__brand-copy { display: flex; flex-direction: column; line-height: 1; }
.js-header__brand-copy strong { font-size: 18px; letter-spacing: -.045em; font-weight: 750; }
.js-header__brand-copy small { margin-top: 4px; color: var(--js-header-muted); font-size: 10px; letter-spacing: .025em; white-space: nowrap; }

.js-header__desktop-nav { margin-left: auto; align-self: stretch; }
.js-header__desktop-nav > ul { height: 100%; display: flex; align-items: stretch; gap: clamp(22px, 3vw, 46px); margin: 0; padding: 0; list-style: none; }
.js-header__desktop-nav > ul > li { position: relative; display: flex; align-items: stretch; }
.js-header__desktop-nav a,
.js-header__desktop-nav button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  color: var(--js-header-ink);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.js-header__desktop-nav > ul > li > :is(a, button)::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: '';
  background: var(--js-header-navy);
  transform: scaleX(0);
  transition: transform .18s ease;
}

.js-header__desktop-nav > ul > li:hover > :is(a, button)::after,
.js-header__desktop-nav > ul > li.is-open > button::after,
.js-header__desktop-nav > ul > li > :is(a, button):focus-visible::after { transform: scaleX(1); }
.js-header__chevron { width: 15px; height: 15px; fill: none; stroke: #738194; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.is-open > button .js-header__chevron { transform: rotate(180deg); }

.js-header__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: max-content;
  min-width: 176px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--js-header-line);
  border-top: 2px solid var(--js-header-navy);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 8px 18px rgba(18, 43, 68, .10);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.has-submenu:hover > .js-header__submenu,
.has-submenu.is-open > .js-header__submenu,
.has-submenu:focus-within > .js-header__submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.js-header__submenu a { display: block; padding: 10px 22px; color: #536174; font-size: 14px; font-weight: 500; }
.js-header__submenu a:hover,
.js-header__submenu a:focus-visible { color: var(--js-header-navy); background: #f6f8fa; }

.js-header__cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 5px;
  color: #fff;
  background: var(--js-header-navy);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease;
}
.js-header__cta:hover,
.js-header__cta:focus-visible { color: #fff; background: #0f2f50; transform: translateY(-1px); }

.js-header__menu-toggle { display: none; margin-left: auto; border: 0; padding: 8px; color: var(--js-header-ink); background: transparent; cursor: pointer; }
.js-header__menu-toggle svg,
.js-header__drawer-title button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.js-header__overlay,
.js-header__drawer { display: none; }

@media (max-width: 1200px) {
  .js-header__bar { min-height: 74px; padding: 0 15px; }
  .js-header.is-scrolled .js-header__bar { min-height: 66px; }
  .js-header__mark { width: 40px; height: 40px; }
  .js-header__desktop-nav,
  .js-header__cta--desktop { display: none; }
  .js-header__menu-toggle { display: inline-grid; place-items: center; }
  .js-header__brand-copy strong { font-size: 17px; }
  .js-header__brand-copy small { font-size: 9.5px; }

  .js-header__overlay {
    position: fixed;
    z-index: 1001;
    inset: 0;
    display: block;
    background: rgba(20, 31, 42, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s;
  }

  .js-header__drawer {
    position: fixed;
    z-index: 1002;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: min(354px, calc(100vw - 48px));
    flex-direction: column;
    background: #fff;
    box-shadow: -12px 0 28px rgba(12, 30, 48, .12);
    transform: translateX(105%);
    transition: transform .25s ease;
  }

  .admin-bar .js-header__drawer { top: 32px; }
  .js-header.is-menu-open .js-header__overlay { opacity: 1; visibility: visible; }
  .js-header.is-menu-open .js-header__drawer { transform: translateX(0); }
  body.jiseong-menu-open { overflow: hidden; }

  .js-header__drawer-title { min-height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; border-bottom: 1px solid var(--js-header-line); }
  .js-header__drawer-title strong { font-size: 18px; }
  .js-header__drawer-title button { display: grid; place-items: center; border: 0; padding: 4px; color: #33475d; background: transparent; cursor: pointer; }
  .js-header__mobile-nav { overflow-y: auto; padding: 16px 27px 24px; }
  .js-header__mobile-nav ul { margin: 0; padding: 0; list-style: none; }
  .js-header__mobile-nav > ul > li { border-bottom: 1px solid var(--js-header-line); }
  .js-header__mobile-nav > ul > li > a,
  .js-header__mobile-nav > ul > li > button { width: 100%; min-height: 59px; display: flex; align-items: center; justify-content: space-between; border: 0; padding: 0 4px; color: var(--js-header-ink); background: transparent; font: inherit; font-size: 16px; font-weight: 650; text-align: left; text-decoration: none; cursor: pointer; }
  .js-header__mobile-submenu { max-height: 0; overflow: hidden; margin: 0 -27px !important; background: #f7f9fb; opacity: 0; transition: max-height .25s ease, opacity .2s ease, padding .2s ease; }
  .js-header__mobile-submenu a { display: block; padding: 11px 39px; color: #536174; font-size: 14px; text-decoration: none; }
  .is-open > .js-header__mobile-submenu { max-height: 320px; padding: 7px 0 10px; opacity: 1; }
  .js-header__drawer-footer { margin-top: auto; padding: 18px 22px 22px; border-top: 1px solid var(--js-header-line); }
  .js-header__drawer-footer .js-header__cta { width: 100%; min-height: 57px; font-size: 17px; }
}

@media (max-width: 782px) { .admin-bar .js-header { top: 46px; } .admin-bar .js-header__drawer { top: 46px; } }
@media (max-width: 380px) { .js-header__brand-copy small { display: none; } .js-header__drawer { width: calc(100vw - 36px); } }
@media (prefers-reduced-motion: reduce) { .js-header *, .js-header *::before, .js-header *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Keep the uploaded Korean logo and its English subtitle as one aligned lockup. */
.js-header__brand {
  min-width: 158px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.js-header__logo-image {
  display: block;
  width: auto;
  height: var(--js-header-logo-height, 40px);
  max-width: 190px;
  object-fit: contain;
}

.js-header__brand-copy {
  margin-top: -8px;
  align-items: center;
  text-align: center;
  line-height: 1.05;
}

.js-header__brand-copy strong { font-size: 15px; }
.js-header__brand-copy small { margin-top: 3px; font-size: 8.5px; letter-spacing: .04em; }

/* Align the desktop logo with the homepage hero copy start line. */
@media (min-width: 1201px) {
  .js-header__brand {
    margin-left: max(
      calc(6vw - 7.5px - clamp(24px, 4.1vw, 58px)),
      calc(44vw - 567.5px - clamp(24px, 4.1vw, 58px))
    );
  }
}

/* Improve desktop header and menu readability without affecting mobile. */
@media (min-width: 1401px) {
  .js-header__bar {
    min-height: 98px !important;
    gap: clamp(26px, 2.4vw, 42px) !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
  }
  .js-header.is-scrolled .js-header__bar { min-height: 84px !important; }
  .js-header__brand { min-width: 225px !important; }
  .js-header__logo-image { height: 60px !important; max-width: 225px !important; }
  .js-header__desktop-nav > ul { gap: clamp(24px, 2.15vw, 38px) !important; }
  .js-header__desktop-nav a,
  .js-header__desktop-nav button { font-size: 18px !important; font-weight: 650; }
  .js-header__submenu a { padding: 11px 23px; font-size: 15.5px !important; }
  .js-header__cta { min-height: 48px; padding: 0 25px; font-size: 16.5px !important; }
}

@media (min-width: 1025px) and (max-width: 1400px) {
  .js-header__bar {
    min-height: 92px !important;
    gap: 18px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
  .js-header.is-scrolled .js-header__bar { min-height: 78px !important; }
  .js-header__brand { min-width: 180px !important; }
  .js-header__logo-image { height: 50px !important; max-width: 190px !important; }
  .js-header__desktop-nav > ul { gap: clamp(14px, 1.4vw, 22px) !important; }
  .js-header__desktop-nav a,
  .js-header__desktop-nav button { font-size: 16px !important; font-weight: 650; }
  .js-header__submenu a { font-size: 15px !important; }
  .js-header__cta { min-height: 46px; padding: 0 18px; font-size: 15.5px !important; }
}

@media (max-width: 1200px) {
  .js-header__brand { min-width: 132px; gap: 3px; }
  .js-header__logo-image { height: min(var(--js-header-logo-height, 40px), 34px); max-width: 150px; }
  .js-header__brand-copy { margin-top: -6px; }
  .js-header__brand-copy strong { font-size: 13px; }
  .js-header__brand-copy small { margin-top: 2px; font-size: 7.5px; }
}

@media (max-width: 380px) {
  .js-header__brand { min-width: 112px; }
  .js-header__brand-copy small { display: block; font-size: 6.8px; }
}