/* KCS_V63ZY_MOBILE_TOPNAV_WARM_3 */
@media (max-width:720px){
  header.topbar .wrap.nav,
  header.topbar .nav,
  .topbar .wrap.nav,
  .topbar .nav{
    min-height:72px!important;
    height:auto!important;
    padding:9px 12px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    background:#fff!important;
  }

  header.topbar .site-brand,
  .topbar .site-brand{
    flex:0 0 52px!important;
    width:52px!important;
    min-width:52px!important;
    margin:0!important;
    align-self:center!important;
  }
  header.topbar .site-brand img,
  header.topbar .brand-logo,
  .topbar .site-brand img,
  .topbar .brand-logo{
    display:block!important;
    width:52px!important;
    height:52px!important;
    object-fit:contain!important;
    border-radius:11px!important;
  }

  html body header.topbar .wrap.nav > nav,
  html body .topbar .wrap.nav > nav{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    white-space:normal!important;
    font-size:12px!important;
    line-height:1.15!important;
  }

  /* 모바일 상단에는 정확히 3개만 */
  html body header.topbar .wrap.nav > nav > a,
  html body .topbar .wrap.nav > nav > a{
    display:none!important;
  }
  html body header.topbar .wrap.nav > nav > a[data-kcs-mobile-nav="coupon"],
  html body header.topbar .wrap.nav > nav > a[data-kcs-mobile-nav="calendar"],
  html body header.topbar .wrap.nav > nav > a[data-kcs-mobile-nav="deals"],
  html body .topbar .wrap.nav > nav > a[data-kcs-mobile-nav="coupon"],
  html body .topbar .wrap.nav > nav > a[data-kcs-mobile-nav="calendar"],
  html body .topbar .wrap.nav > nav > a[data-kcs-mobile-nav="deals"]{
    min-width:0!important;
    height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    padding:0 5px!important;
    border:1px solid #fed7aa!important;
    border-radius:12px!important;
    background:linear-gradient(180deg,#fffdf9 0%,#fff7ed 100%)!important;
    color:#9a3412!important;
    font-weight:900!important;
    box-shadow:0 2px 8px rgba(234,88,12,.06)!important;
  }

  /* 사이트의 레드-오렌지 포인트를 할인코드에만 사용 */
  html body header.topbar .wrap.nav > nav > a[data-kcs-mobile-nav="coupon"],
  html body .topbar .wrap.nav > nav > a[data-kcs-mobile-nav="coupon"]{
    border-color:transparent!important;
    background:linear-gradient(135deg,#e11d48 0%,#ff5a1f 100%)!important;
    color:#fff!important;
    box-shadow:0 7px 16px rgba(225,29,72,.15)!important;
  }

  html body header.topbar .wrap.nav > nav > a[data-kcs-mobile-nav="calendar"]:active,
  html body header.topbar .wrap.nav > nav > a[data-kcs-mobile-nav="deals"]:active,
  html body .topbar .wrap.nav > nav > a[data-kcs-mobile-nav="calendar"]:active,
  html body .topbar .wrap.nav > nav > a[data-kcs-mobile-nav="deals"]:active{
    background:#ffedd5!important;
  }
}

@media (max-width:380px){
  header.topbar .wrap.nav,
  header.topbar .nav,
  .topbar .wrap.nav,
  .topbar .nav{padding:8px 8px!important;gap:6px!important;}
  header.topbar .site-brand,
  .topbar .site-brand{flex-basis:48px!important;width:48px!important;min-width:48px!important;}
  header.topbar .site-brand img,
  header.topbar .brand-logo,
  .topbar .site-brand img,
  .topbar .brand-logo{width:48px!important;height:48px!important;}
  html body header.topbar .wrap.nav > nav,
  html body .topbar .wrap.nav > nav{gap:4px!important;font-size:11px!important;}
  html body header.topbar .wrap.nav > nav > a[data-kcs-mobile-nav],
  html body .topbar .wrap.nav > nav > a[data-kcs-mobile-nav]{height:40px!important;padding:0 3px!important;border-radius:10px!important;}
}