/* Desktop header: every top-level menu item stays visible (the Imweb "more" fold is disabled by fix-header-menu.mjs).
   Logo and flag columns share the leftover width equally, so the menu stays centred and fits down to 992px.
   Below 992px the mobile header takes over. */
@media (min-width: 992px) {
  #doz_header .inline-section:has(._inline_menu_container) {
    display: grid !important;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
  }
  #doz_header .inline-section:has(._inline_menu_container) > .inline-col-group {
    display: flex;
    align-items: center;
    width: auto !important;
  }
  #doz_header .inline-section:has(._inline_menu_container) > .inline-col-group-center {
    justify-content: center;
  }
  #doz_header .inline-section:has(._inline_menu_container) > .inline-col-group-right {
    justify-content: flex-end;
  }
  /* Keep the items on one row; each keeps its fixed width so the hover dropdown columns still line up. */
  #doz_header ._inline_menu_container ._main_menu {
    display: flex;
    flex-wrap: nowrap;
  }
  /* Hover dropdown columns: centre them like the menu. Imweb's computed left offset lands 15% short below 1025px,
     where it zooms the page to 85%, and the sticky header's dropdown had its own 65px indent. */
  [id^="dropdown_"] ._mega_dropdown_sync {
    left: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: max-content;
  }
  /* Sticky header (Korean): same 130px boxes as the main header so its dropdown columns line up too.
     Its labels are centred in their boxes, so the dropdown text is centred to sit under them. */
  #w202510109661320b374dc .viewport-nav > li {
    width: 130px;
  }
  #dropdown_w202510109661320b374dc .mega_dropdown_wrap .mega_dropdown > div,
  #dropdown_w202510109661320b374dc .mega_dropdown_wrap .mega_dropdown > div li {
    text-align: center !important;
  }
}

/* English menu: Pretendard 20px bold like the Korean menu (the site font is Pretendard, see replica-fonts.css).
   The labels differ a lot in length (HADDANGSE / PEOPLE / PERFORMANCES / NEWS), so equal boxes would leave uneven gaps.
   Each box is the label width + 56px, giving an even 56px gap; the dropdown columns use the same widths so they stay
   under their labels. Below 1025px Imweb scales the whole menu down, so these widths scale with it. */
#w20260815337c69776f03d .viewport-nav > li > a,
#w20260815337c69776f03d .viewport-nav > li > a .plain_name { font-size: 20px !important; font-weight: 700 !important; }
#w20260815337c69776f03d .viewport-nav > li:nth-child(1),
#dropdown_w20260815337c69776f03d .mega_dropdown_wrap .mega_dropdown > div:nth-child(1) { width: 180px; }
#w20260815337c69776f03d .viewport-nav > li:nth-child(2),
#dropdown_w20260815337c69776f03d .mega_dropdown_wrap .mega_dropdown > div:nth-child(2) { width: 130px; }
#w20260815337c69776f03d .viewport-nav > li:nth-child(3),
#dropdown_w20260815337c69776f03d .mega_dropdown_wrap .mega_dropdown > div:nth-child(3) { width: 217px; }
#w20260815337c69776f03d .viewport-nav > li:nth-child(4),
#dropdown_w20260815337c69776f03d .mega_dropdown_wrap .mega_dropdown > div:nth-child(4) { width: 114px; }
/* 1025-1199px: the 641px menu would push past the logo column and sit off-centre, so tighten it (18px labels, 32px gaps). */
@media (min-width: 1025px) and (max-width: 1199px) {
  #w20260815337c69776f03d .viewport-nav > li > a,
  #w20260815337c69776f03d .viewport-nav > li > a .plain_name { font-size: 18px !important; }
  #w20260815337c69776f03d .viewport-nav > li:nth-child(1),
  #dropdown_w20260815337c69776f03d .mega_dropdown_wrap .mega_dropdown > div:nth-child(1) { width: 143px; }
  #w20260815337c69776f03d .viewport-nav > li:nth-child(2),
  #dropdown_w20260815337c69776f03d .mega_dropdown_wrap .mega_dropdown > div:nth-child(2) { width: 99px; }
  #w20260815337c69776f03d .viewport-nav > li:nth-child(3),
  #dropdown_w20260815337c69776f03d .mega_dropdown_wrap .mega_dropdown > div:nth-child(3) { width: 177px; }
  #w20260815337c69776f03d .viewport-nav > li:nth-child(4),
  #dropdown_w20260815337c69776f03d .mega_dropdown_wrap .mega_dropdown > div:nth-child(4) { width: 85px; }
}