:root {
  --bottom-bar-h: 60px; /* 하단바 높이 */
}

/* ==========================================
   1. 하단바 (메뉴 숏컷) CSS
========================================== */
#header-bottom_new { 
  height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom)); 
}
#userMenu {
  margin-top: 0px;
}
.menu_shortcut {
  position: fixed;
  z-index: 90;
  bottom: 0;
  width: 100%;
  height: var(--bottom-bar-h);
  background-color: #fff;
  text-align: center;
  max-width: var(--s-max-width);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-top: solid 1px #eaeaea;
  box-shadow: 0 -3px 3px -3px #dcdcdc;
}
.menu_shortcut .list {
  overflow: hidden;
}
.menu_shortcut li {
  float: left;
  width: 20%;
}
.menu_shortcut a {
  display: block;
  width: 50px;
  height: 40px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 26px; /* 중복되던 사이즈를 공통으로 통합 */
}

/* 최근본상품 a만 별도 */
.menu_shortcut li a:has(.shortcut_time_goods) {
  width: 28px;
  height: 28px;
  margin: 8px auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

/* 최근본상품 이미지 */
.shortcut_time_goods {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid #231F20;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 하단바 아이콘 이미지 */
.menu_shortcut .shortcut_menu { background-image: url(https://shopagtr5422.cdn-nhncommerce.com/data/skin/mobile/renewal_2208/_mplshop/images/new/icon/mbar_menu.png); }
.menu_shortcut .shortcut_mypage { background-image: url(https://shopagtr5422.cdn-nhncommerce.com/data/skin/mobile/renewal_2208/_mplshop/images/new/icon/mbar_mypage.png); }
.menu_shortcut .shortcut_home { background-image: url(https://shopagtr5422.cdn-nhncommerce.com/data/skin/mobile/renewal_2208/_mplshop/images/new/icon/mbar_home.png); }
.menu_shortcut .shortcut_special { background-image: url(https://shopagtr5422.cdn-nhncommerce.com/data/skin/mobile/renewal_2208/_mplshop/images/new/icon/mbar_special.png); }
.menu_shortcut .shortcut_cart { background-image: url(https://shopagtr5422.cdn-nhncommerce.com/data/skin/mobile/renewal_2208/_mplshop/images/new/icon/mbar_cart.png); }
.menu_shortcut .shortcut_first { 
	background-image: url(https://shopagtr5422.cdn-nhncommerce.com/data/skin/mobile/renewal_2208/_mplshop/images/new/icon/mbar_first.png); 
	background-size: 30px;
}
.menu_shortcut .shortcut_time {
    background-image: url(https://shopagtr5422.cdn-nhncommerce.com/data/skin/mobile/renewal_2208/_mplshop/images/new/icon/time-goods.svg);
    background-size: 33px;
}

/* ==========================================
   2. 바텀시트 (스페셜샵) CSS
========================================== */
.specialsheet {
  position: fixed;
  inset: 0;
  z-index: 999;           
  display: none;
  pointer-events: none;
}
.specialsheet.is-open { 
  display: block; 
}
.specialsheet__dim,
.specialsheet__panel {
  pointer-events: auto;
}

.specialsheet__dim {
  position: absolute;
  inset: 0 0 calc(var(--bottom-bar-h) + env(safe-area-inset-bottom)) 0; /* left, right, top, bottom 한번에 처리 */
  background: rgba(0,0,0,.45);
}

.specialsheet__panel {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
  max-width: var(--s-max-width);
  margin: 0 auto;
  padding: 12px 12px 14px;
  background: #fff;
  border-radius: 16px 16px 0 0;  
  transform: translateY(110%);
  transition: transform .25s ease;
  overflow: hidden;
}
.specialsheet.is-open .specialsheet__panel { 
  transform: translateY(0); 
}

/* 2x2 그리드 & 배너 */
.specialsheet__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.specialsheet__banner {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eaeaea;
  background: #fff;
}
.specialsheet__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/*
.menu_shortcut{ transition:none !important; }
.menu_shortcut.is-hide{ display:none !important; }
*/