@import url('./mobile-stable.css?v=20260910-2');

@media (max-width:760px){
  .top{display:flex!important;align-items:center!important}
  .topin{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    width:100%!important;max-width:none!important;min-height:74px!important;height:74px!important;
    padding:0 8px!important;flex-wrap:nowrap!important;overflow:hidden!important;
  }
  .topin>b{display:none!important}
  .topright{
    margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:4px!important;width:auto!important;max-width:100%!important;min-width:0!important;
    height:42px!important;min-height:42px!important;padding:0!important;flex-wrap:nowrap!important;white-space:nowrap!important;
  }
  .topright>#authLabel{display:none!important}
  .topright .topbtn,.topright .admin-top-btn{
    box-sizing:border-box!important;height:42px!important;min-height:42px!important;margin:0!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;
    padding-left:8px!important;padding-right:8px!important;font-size:12px!important;
  }

  /* Logo left, language buttons right, public menu below. */
  header .nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand lang" "menu menu"!important;
    column-gap:12px!important;row-gap:0!important;
    align-items:center!important;width:100%!important;
    padding-top:12px!important;
  }
  header .nav>.brand{
    grid-area:brand!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;
    text-align:left!important;font-size:25px!important;line-height:1.05!important;white-space:nowrap!important;
  }
  header .nav>.brand small{
    display:block!important;margin-top:6px!important;font-size:10px!important;letter-spacing:2px!important;white-space:nowrap!important;
  }
  header .nav>.lang-switch{
    grid-area:lang!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
    width:auto!important;height:42px!important;margin:0!important;padding:0!important;
    position:static!important;transform:none!important;gap:0!important;white-space:nowrap!important;
  }
  header .nav>.lang-switch #langEn{order:1!important}
  header .nav>.lang-switch #langKo{order:2!important}
  header .nav>.lang-switch button{
    box-sizing:border-box!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;
    margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    border:1px solid var(--green)!important;background:#fff!important;color:var(--green)!important;
    font-size:12px!important;font-weight:700!important;line-height:1!important;
  }
  header .nav>.lang-switch #langEn{
    border-left:1px solid var(--green)!important;
  }
  header .nav>.lang-switch #langKo{
    border-left:0!important;
  }
  header .nav>.lang-switch #langEn.active,
  header .nav>.lang-switch #langKo.active{
    background:var(--green)!important;color:#fff!important;
  }
  /* When KR is selected, keep the EN box left vertical line visible. */
  header .nav>.lang-switch #langKo.active~#langEn,
  header .nav>.lang-switch #langEn{
    border-left:1px solid var(--green)!important;
  }
  header .nav>.menu{
    grid-area:menu!important;width:100%!important;margin-top:12px!important;
    grid-auto-flow:row!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:none!important;grid-auto-rows:auto!important;align-items:stretch!important;
  }
  header .nav>.menu>button:not([data-staff="1"]):not([data-admin="1"]){
    grid-column:span 1!important;height:48px!important;min-height:48px!important;white-space:nowrap!important;
  }
  header .nav>.menu:not(.mobile-role-menu-open)>[data-staff="1"],
  header .nav>.menu:not(.mobile-role-menu-open)>[data-admin="1"],
  header .nav>.menu:not(.mobile-role-menu-open)>.mobile-admin-menu-label{display:none!important}
  header .nav>.menu.mobile-role-menu-open>.mobile-admin-menu-label{
    grid-column:1/-1!important;min-height:38px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
    padding:8px 10px!important;margin:0!important;border-top:1px solid #d1aa2d!important;border-bottom:1px solid #d1aa2d!important;
    background:#f2c94c!important;color:#2e2400!important;font-size:13px!important;line-height:1.2!important;font-weight:800!important;box-sizing:border-box!important;
  }
  header .nav>.menu.mobile-role-menu-open>button.mobile-role-menu-item{
    grid-column:span 2!important;width:100%!important;height:auto!important;min-height:48px!important;padding:9px 8px!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:normal!important;
    word-break:keep-all!important;overflow-wrap:break-word!important;line-height:1.25!important;font-size:12px!important;font-weight:700!important;
    color:#2e2400!important;background:#fff3bf!important;border-right:1px solid #dfc04b!important;border-bottom:1px solid #dfc04b!important;box-sizing:border-box!important;
  }
  header .nav>.menu.mobile-role-menu-open>button.mobile-role-menu-item.active{background:#f2c94c!important;color:#2e2400!important}
  .topright .admin-top-btn.mobile-admin-expanded{background:#ffd85f!important;box-shadow:inset 0 0 0 2px #7a5d00!important}
}

@media (max-width:390px){
  .topin{min-height:70px!important;height:70px!important;padding-left:4px!important;padding-right:4px!important}
  .topright{gap:2px!important}
  .topright .topbtn,.topright .admin-top-btn{
    height:40px!important;min-height:40px!important;padding-left:5px!important;padding-right:5px!important;font-size:11px!important;
  }
  header .nav{column-gap:8px!important;padding-top:10px!important}
  header .nav>.lang-switch{height:38px!important}
  header .nav>.lang-switch button{width:34px!important;min-width:34px!important;height:36px!important;min-height:36px!important;font-size:11px!important}
  header .nav>.brand{font-size:21px!important}
  header .nav>.brand small{font-size:9px!important;letter-spacing:1.6px!important;margin-top:5px!important}
  header .nav>.menu{margin-top:10px!important}
  header .nav>.menu>button:not([data-staff="1"]):not([data-admin="1"]){height:46px!important;min-height:46px!important;font-size:11px!important}
  header .nav>.menu.mobile-role-menu-open>.mobile-admin-menu-label{min-height:36px!important;font-size:12px!important}
  header .nav>.menu.mobile-role-menu-open>button.mobile-role-menu-item{min-height:46px!important;padding:8px 6px!important;font-size:11px!important}
}

@media (min-width:761px){
  header .lang-switch #langEn{border-left:1px solid var(--green)!important}
}