#commonHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  background: linear-gradient(180deg, #0838a8 0%, #032e95 58%, #02277f 100%);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(167, 196, 255, .26);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#commonHeaderSpacer{height:0}

#commonHeader .headerInner{
  max-width: 1380px;
  margin: 0 auto;
  padding: 9px 14px 0;
  transition: padding .2s ease;
}
#commonHeader .row1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#commonHeader .leftBrand{display:flex;align-items:center;gap:16px;min-width:0}
#commonHeader .logoBox a{display:flex;align-items:center}
#commonHeader .logoImg{
  display: block;
  height: 44px;
  width: auto;
  transition: height .2s ease, transform .2s ease;
}
#commonHeader .nBox{width:28px;height:28px;border-radius:6px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
#commonHeader .topLinks{
  display: flex;
  max-width: 1600px;
  gap: 2px;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
  transition: max-width .2s ease, opacity .18s ease, margin .2s ease, gap .2s ease;
}
#commonHeader .leftBrand{overflow:visible}
#commonHeader .topMenuItem{position:relative}
#commonHeader .topMenuItem.has-children::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
}
#commonHeader .topMenuLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:rgba(230,240,255,.92);
  text-decoration:none;
  padding:13px 12px;
  border-radius:0;
  font-weight:700;
  letter-spacing:.15px;
  border-bottom:3px solid transparent;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1.1;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
#commonHeader .topMenuLink.big{font-weight:800}
#commonHeader .topMenuItem:hover > .topMenuLink,
#commonHeader .topMenuItem:focus-within > .topMenuLink{
  color:#ffffff;
}
#commonHeader .topMenuItem.active > .topMenuLink{
  background:transparent;
  color:#fff;
  border-bottom-color:#2d98ff;
}
#commonHeader .topMenuItem.has-children > .topMenuLink::after{
  content:"";
  width:6px;
  height:6px;
  border-right:1.5px solid rgba(221,235,255,.88);
  border-bottom:1.5px solid rgba(221,235,255,.88);
  transform:rotate(45deg) translateY(-1px);
  transition:transform .16s ease, border-color .16s ease;
}
#commonHeader .topMenuItem.has-children:hover > .topMenuLink::after,
#commonHeader .topMenuItem.has-children:focus-within > .topMenuLink::after{
  border-right-color:#fff;
  border-bottom-color:#fff;
  transform:rotate(45deg) translateY(1px);
}
#commonHeader .topDropdown{
  position:absolute;
  left:0;
  top:100%;
  min-width:188px;
  max-width:220px;
  padding:10px 8px 8px;
  border:1px solid #d8deea;
  border-top:5px solid #2192ff;
  border-radius:0 0 12px 12px;
  background:rgba(245,247,252,.98);
  box-shadow:0 14px 28px rgba(2,12,44,.24);
  backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:4100;
}
#commonHeader .topDropdown::before{
  content:"";
  position:absolute;
  top:-10px;
  left:48px;
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #2192ff;
}
#commonHeader .topDropdownLink{
  display:flex;
  align-items:center;
  font-size:13px;
  color:#202633;
  text-decoration:none;
  border-radius:9px;
  padding:8px 11px;
  white-space:nowrap;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.1px;
  transition:background-color .15s ease, color .15s ease, transform .15s ease;
}
#commonHeader .topDropdownLink + .topDropdownLink{
  margin-top:2px;
}
#commonHeader .topDropdownLink:hover,
#commonHeader .topDropdownLink:focus{
  background:#e6edf9;
  color:#0f1f40;
  transform:translateX(1px);
}
#commonHeader .topDropdownLink.active{
  background:#dbeafe;
  font-weight:800;
  color:#102554;
}
#commonHeader .topMenuItem.has-children:hover > .topDropdown,
#commonHeader .topMenuItem.has-children:focus-within > .topDropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
#commonHeader .rightTools{display:flex;gap:8px;align-items:center;flex:0 0 auto}
#commonHeader .rightTools .navbar-text{
  color:rgba(233,243,255,.9);
  font-weight:600;
  font-size:13px;
}
#commonHeader .rightTools .btn{
  border-radius:10px;
  padding:6px 11px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1px;
}
#commonHeader .rightTools .btn-outline-success,
#commonHeader .rightTools .btn-outline-secondary{
  border-color:rgba(195,220,255,.44);
  color:#f6f9ff;
  background:rgba(255,255,255,.06);
}
#commonHeader .rightTools .btn-outline-success:hover,
#commonHeader .rightTools .btn-outline-secondary:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(222,236,255,.7);
  color:#fff;
}
#commonHeader .headerUserMenu{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-width:0;
  height:34px;
  border:1px solid rgba(195,220,255,.44);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:#f6f9ff;
}
#commonHeader .headerUserIdentity{
  display:block;
  max-width:150px;
  padding:0 9px 0 12px;
  overflow:hidden;
  color:rgba(233,243,255,.94);
  font-size:13px;
  font-weight:800;
  line-height:32px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#commonHeader .headerUserToggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:32px;
  border:0;
  border-left:1px solid rgba(195,220,255,.28);
  border-radius:0 9px 9px 0;
  background:transparent;
  color:#fff;
}
#commonHeader .headerUserArrow{
  display:block;
  width:8px;
  height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .16s ease;
}
#commonHeader .headerUserMenu.show .headerUserArrow,
#commonHeader .headerUserToggle[aria-expanded="true"] .headerUserArrow{
  transform:rotate(225deg) translate(-1px, -1px);
}
#commonHeader .headerUserDropdown{
  min-width:190px;
  padding:8px;
  border:1px solid #d8deea;
  border-top:4px solid #2192ff;
  border-radius:0 0 12px 12px;
  box-shadow:0 14px 28px rgba(2,12,44,.24);
}
#commonHeader .headerUserDropdown .dropdown-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:34px;
  padding:7px 10px;
  border-radius:8px;
  color:#202633;
  font-size:13px;
  font-weight:700;
}
#commonHeader .headerUserDropdown .dropdown-item:hover,
#commonHeader .headerUserDropdown .dropdown-item:focus{
  background:#e6edf9;
  color:#0f1f40;
}
#commonHeader .headerUserDropdown .dropdown-item strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  padding:2px 7px;
  border-radius:999px;
  background:#e8eef7;
  color:#334155;
  font-size:11px;
  font-weight:900;
  line-height:1.35;
}
#commonHeader .headerUserDropdown .win_point strong{background:#dcfce7;color:#166534}
#commonHeader .headerUserDropdown .win_coupon strong{background:#f3e8ff;color:#6b21a8}
#commonHeader .headerUserDropdown .win_memo strong{background:#fee2e2;color:#991b1b}
#commonHeader .headerUserDropdown .headerUserLogout{color:#b42318}
#commonHeader .headerUserDropdown .dropdown-divider{margin:6px 0}
#commonHeader .btnLogin{border:1px solid rgba(255,255,255,.35);background:transparent;border-radius:10px;padding:6px 10px;font-size:13px;color:#fff}
#commonHeader .btnMenu{border:1px solid rgba(204,225,255,.46);background:rgba(255,255,255,.06);border-radius:10px;padding:6px 10px}
#commonHeader .hamburger{width:18px;height:14px;display:flex;flex-direction:column;justify-content:space-between}
#commonHeader .hamburger span{display:block;height:2px;background:#fff;border-radius:2px}
#commonHeader .row2{
  display:none;
}
#commonHeader .primaryTabsWrap{display:none}
#commonHeader .primaryTabs{display:none}
#commonHeader .subnav{
  display:none;
}
#commonHeader .subnavInner{display:none}
#commonHeader .subTabs{display:none}

/* Scroll down: compact fixed header */
#commonHeader.is-scrolled{
  box-shadow: 0 9px 20px rgba(3,16,56,.30), inset 0 -1px 0 rgba(174, 201, 255, .2);
  border-bottom-color: transparent;
}
#commonHeader.is-scrolled .headerInner{
  padding-top: 8px;
  padding-bottom: 8px;
}
#commonHeader.is-scrolled .logoImg{
  height: 34px;
  transform:translateY(-1px);
}
#commonHeader.is-scrolled .topLinks{
  display: none;
}
#commonHeader.is-scrolled .row2{
  display:none;
}
#commonHeader.is-scrolled .subnav{
  display:none;
}

/* Offcanvas(우측 슬라이딩 메뉴) */
.offcanvas#appOffcanvas{
  width:320px;
  background:#fff;
  color:#1f2937;
}
.offcanvas#appOffcanvas .offcanvas-title,
.offcanvas#appOffcanvas .list-group-item{
  color:#1f2937;
}
.offcanvasUserSummary{
  padding:10px 12px;
  border:1px solid #dbe5f2;
  border-radius:10px;
  background:#f8fbff;
  color:#0f2a5c;
  font-size:13px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.offcanvasMemberLinks{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px;
}
.offcanvasMemberLinks .list-group-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-height:34px;
  padding:7px 8px;
  border:1px solid #e8eef8;
  border-radius:8px !important;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
}
.offcanvasMemberLinks .list-group-item strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:2px 6px;
  border-radius:999px;
  background:#e8eef7;
  color:#334155;
  font-size:10px;
  font-weight:900;
  line-height:1.35;
}
.offcanvasMemberLinks .win_point strong{background:#dcfce7;color:#166534}
.offcanvasMemberLinks .win_coupon strong{background:#f3e8ff;color:#6b21a8}
.offcanvasMemberLinks .win_memo strong{background:#fee2e2;color:#991b1b}
.offcanvasMemberLinks .offcanvasLogoutLink{color:#b42318}
.offcanvasMenuGroups{display:flex;flex-direction:column;gap:8px}
.offcanvasMenuGroup .offcanvasParent{
  border:1px solid #dbe5f2;
  border-radius:10px;
  font-weight:700;
  background:#f8fbff;
  padding-top:10px;
  padding-bottom:10px;
}
.offcanvasMenuGroup .offcanvasChildren{
  display:none;
  margin-top:5px;
  margin-left:8px;
  border:0;
  gap:3px;
}
.offcanvasMenuGroup .offcanvasChild{
  border:1px solid #e8eef8;
  border-radius:8px;
  font-size:13px;
  padding-top:7px;
  padding-bottom:7px;
  background:#fff;
}
.offcanvasMenuGroup .offcanvasParent.active,
.offcanvasMenuGroup .offcanvasChild.active{
  color:#0f2a5c;
  background:#e8f1ff;
  border-color:#bdd8ff;
}
@media (hover:hover){
  .offcanvasMenuGroup:hover .offcanvasChildren,
  .offcanvasMenuGroup:focus-within .offcanvasChildren{
    display:grid;
  }
}
@media (hover:none){
  .offcanvasMenuGroup .offcanvasChildren{
    display:grid;
  }
}

@media (max-width: 991.98px){
  .offcanvasMenuGroup .offcanvasChildren{
    display:grid;
  }
}

.menu-notice-layer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1055;
  background: rgba(255, 245, 245, 0.98);
  border-top: 1px solid #fecaca;
  box-shadow: 0 -8px 20px rgba(127, 29, 29, 0.12);
}
.menu-notice-layer .menu-notice-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 12px;
  color: #b91c1c;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.45;
}

/* Mobile */
@media (max-width: 768px){
  #commonHeader .headerInner{padding:10px 10px}
  #commonHeader .logoImg{height:38px}
  #commonHeader .topLinks{display:none}
  #commonHeader .row2{gap:8px;flex-direction:column;align-items:stretch}
  #commonHeader .rightTools .navbar-text{display:none}
  #commonHeader .headerUserIdentity{max-width:108px}
  .offcanvas#appOffcanvas{width:85vw;max-width:360px}
  .menu-notice-layer .menu-notice-inner{font-size:12px;padding:8px 10px}
}
@media (max-width: 520px){
  #commonHeader .headerUserIdentity{max-width:76px}
  #commonHeader .headerUserDropdown{min-width:176px}
}