:root {
  --color-main: #bebfba;
}

/* ============================================================
   폰트
   ============================================================ */
._csf .section-right .title h2,
._csf .section-right .title h3,
._csf .section-right .myshop-title,
._csf .section-right .myshop-title * {
  /* color: #000; */
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--text-heading2-kr) !important;
  line-height: var(--tw-leading, var(--text-heading2--line-height)) !important;
  border: 0;
  padding: 0;
}
._csf .section-right *:not([class^="btn"]) strong,
._csf .section-right *:not([class^="btn"]) b {
  font-weight: var(--font-weight-bold) !important;
}
._csf .section-right a.line {
  text-decoration: underline;
}
._csf caption {
  display: none;
}
._csf .txtEm,
._csf .txtEm span,
#userStyle #mCafe24Order .txtEm,
#userStyle #mCafe24Order .txtEm span {
  color: #000;
}
._csf .txtRed span,
#userStyle #mCafe24Order .txtRed span {
  color: inherit;
}

/* ============================================================
  공통 레이아웃
   ============================================================ */
/* 공통 레이아웃 */
._csf main.main-layout {
  padding: calc(var(--spacing) * 31) calc(var(--spacing) * 11);
}

/* 공통 좌우 레이아웃 */
.body-layout._csf,
#userStyle.body-layout._csf {
  display: block;
}

#userStyle .main-layout,
._csf .main-layout {
  width: 100%;
}
#userStyle .section-layout,
._csf .section-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: calc(var(--spacing) * 11);
}

/* ============================================================
   메인/좌측 네비게이션 영역
   ============================================================ */
._csf .category {
  display: flex;
}
._csf .category.col {
  flex-direction: row;
  flex-wrap: wrap;
}
@media (width>=64rem) {
  ._csf .category.col {
    flex-direction: column;
  }
}
._csf .category.row {
  flex-direction: row;
  flex-wrap: wrap;
}
._csf .category.maincategory {
  display: flex;
}
#userStyle .section-left a,
._csf .section-left a,
._csf .category.maincategory a,
._csf .category.subcategory a {
  font-weight: var(--font-weight-bold);
  font-size: var(--text-headline1-kr);
  line-height: var(--tw-leading, var(--text-headline1-kr--line-height));
}
@media (width>=64rem) {
  #userStyle .section-left a,
  ._csf .section-left a,
  ._csf .category.maincategory a,
  ._csf .category.subcategory a {
    font-size: var(--text-title1-kr);
    line-height: var(--tw-leading, var(--text-title1-kr--line-height));
  }
}
#userStyle .section-left #sub-featured li a,
._csf .section-left #sub-featured li a,
._csf .category.maincategory a,
._csf .category.subcategory a {
  position: relative;
  color: var(--color-label-assistive);
}
._csf .category.maincategory a {
  /* text-transform: uppercase; */
}
#userStyle .section-left #sub-featured li a,
._csf .section-left #sub-featured li a,
._csf .category.subcategory a {
  text-transform: capitalize;
}
#userStyle .section-left #sub-featured li.active a,
._csf .section-left #sub-featured li.active a,
._csf .category.maincategory li.active a,
._csf .category.subcategory li.active a {
  color: #000;
}
#userStyle .section-left ul.category,
._csf .section-left ul.category {
  /* display: flex; */
  /* flex-direction: column; */
}
#userStyle .section-left ul.category li:not(:last-child),
._csf .section-left ul.category li:not(:last-child) {
  display: flex;
  align-items: center;
}
#userStyle .section-left ul.category.arrow li:not(:last-child):after {
  --tw-content: "";
  content: "";
  background-image: url(/skin-skin22/svg/arrow-right-gray.svg);
  width: 60px;
  height: 60px;
  display: inline-block;
  background-size: 100% 100%;
}
#userStyle .section-left ul.category.arrow li.active:not(:last-child):after {
  background-image: url(/skin-skin22/svg/arrow-right.svg);
}

#userStyle .section-left-inner ul.category,
._csf .section-left-inner ul.category,
._csf .section-left .section-left-inner ul.category,
._csf .category.maincategory,
._csf .category.subcategory {
  /* flex-wrap: wrap; */
  /* display: flex; */
}
@media (width>=64rem) {
  #userStyle .section-left-inner ul.category,
  ._csf .section-left-inner ul.category,
  ._csf .category.maincategory,
  ._csf .category.subcategory {
    /* flex-direction: column; */
    /* column-gap: calc(var(--spacing) * 1); */
  }
}
._csf .section-left .section-left-inner ul.category.row,
._csf .category.maincategory,
._csf .category.subcategory {
  /* flex-direction: row; */
}
@media (width>=64rem) {
  ._csf .category.maincategory,
  ._csf .category.subcategory {
    /* flex-direction: column; */
    /* column-gap: calc(var(--spacing) * 8); */
  }
}

._csf .section-left .section-left-inner ul.category.row li:not(:last-child):after,
._csf .category.maincategory li:not(:last-child):after,
._csf .category.subcategory li:not(:last-child):after {
  background-image: none;
  content: "/";
  margin: 0 2px;
  display: inline-block;
  width: auto;
  height: auto;
  color: var(--color-label-assistive);
  font-weight: var(--font-weight-bold);
}
@media (width>=64rem) {
  ._csf .section-left .section-left-inner ul.category.row li:not(:last-child):after,
  ._csf .category.maincategory li:not(:last-child):after,
  ._csf .category.subcategory li:not(:last-child):after {
    margin: 0 4px;
  }
}

._csf .category.maincategory li.last:after {
  content: "";
}
._csf .section-left .section-left-inner ul.category.row li:nth-child(4):after {
  content: "";
}
._csf .section-left .section-left-inner ul.category.row li:not(:last-child):after,
._csf .category.maincategory li:not(:last-child):after {
  font-size: var(--text-headline1);
  line-height: var(--tw-leading, var(--text-headline1--line-height));
}

._csf .category.subcategory li:not(:last-child):after {
  font-size: var(--text-body2);
  line-height: var(--tw-leading, var(--text-body2--line-height));
}

@media (width>=64rem) {
  ._csf .section-left .section-left-inner ul.category.row li:not(:last-child):after,
  ._csf .category.maincategory li:not(:last-child):after,
  ._csf .category.subcategory li:not(:last-child):after {
    font-size: var(--text-title1);
    line-height: var(--tw-leading, var(--text-title1--line-height));
  }
}
._csf .section-left .xans-layout-statelogon {
  margin-top: calc(var(--spacing) * 17);
  display: none;
}

@media (width>=64rem) {
  ._csf .section-left .xans-layout-statelogon {
    display: block;
  }
}

/* 모바일 */
@media (width < 64rem) {
  #userStyle .section-left .category {
    display: none;
  }
  /* ._csf .category.maincategory li {
    display: none;
  } */
  ._csf .category.maincategory li.active {
    display: block;
  }
  ._csf .section-left .section-left-inner ul.row li {
    display: flex;
  }
  /* ._csf .category.maincategory li:first-child:after {
    content: "";
  } */

  ._csf .category.subcategory a {
    font-size: var(--text-body2);
    line-height: var(--tw-leading, var(--text-body2--line-height));
    row-gap: 2px;
  }
}

/* ============================================================
   qna에서 사용중인 탭 카테고리
   ============================================================ */
._csf .category.category-tiny {
  display: flex;
  gap: 11px;
}

@media (width>=64rem) {
  ._csf .category.category-tiny {
    gap: 14px;
  }
}

._csf .category.category-tiny li {
  position: relative;
  padding: 0;
}

._csf .category.category-tiny li:last-child a:after {
  content: "";
}

._csf .category.category-tiny li a {
  color: var(--color-label-assistive);
}

._csf .category.category-tiny li.active a {
  color: #000;
  text-decoration: underline;
}

._csf .category.category-tiny a:after {
  content: "/";
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translate(0, -50%);
  color: var(--color-label-assistive);
}

@media (width>=64rem) {
  ._csf .category.category-tiny a:after {
    right: -11px;
  }
}

/* ============================================================
   상품/게시판 목록에서 사용중인 카테고리 (category-small)
   - product/list.html, artfinger/board_menupackage_community.html 등
   ============================================================ */
._csf .category.category-small a {
  font-size: var(--text-body2);
  line-height: var(--tw-leading, var(--text-body2--line-height));
  font-weight: var(--font-weight-bold);
}

@media (width>=64rem) {
  ._csf .category.category-small a {
    font-size: var(--text-heading2);
    line-height: var(--tw-leading, var(--text-heading2--line-height));
  }
}

._csf .category.category-small li a {
  color: var(--color-label-assistive);
}

._csf .category.category-small li.active a {
  color: #000;
}

._csf .category.category-small li:not(:last-child):after {
  content: "/";
  color: var(--color-label-assistive);
  margin: 0 calc(var(--spacing) * 0.5);
}

@media (width>=64rem) {
  ._csf .category.category-small li:not(:last-child):after {
    margin: 0 calc(var(--spacing) * 1);
  }
}

/* ============================================================
   아티클 카테고리 (category-article)
   - artfinger/board_menupackage.html
   ============================================================ */
._csf .category.category-article {
  font-size: var(--text-body2);
  line-height: var(--tw-leading, var(--text-body2--line-height));
  font-weight: var(--font-weight-bold);
}

@media (width>=64rem) {
  ._csf .category.category-article {
    font-size: var(--text-heading2);
    line-height: var(--tw-leading, var(--text-heading2--line-height));
  }
}

._csf .category.category-article {
  display: flex;
}
._csf .category.category-article li {
  display: flex;
}

._csf .category.category-article li:last-child a:after {
  content: "";
}

._csf .category.category-article li a {
  color: var(--color-label-assistive);
}

._csf .category.category-article li.active a {
  color: #000;
}

._csf .category.category-article li:not(:last-child):after {
  content: "/";
  color: var(--color-label-assistive);
  margin: 0 calc(var(--spacing) * 0.5);
}

@media (width>=64rem) {
  ._csf .category.category-article li:not(:last-child):after {
    margin: 0 calc(var(--spacing) * 1);
  }
}

/* ============================================================
  헤더 전체 메뉴  
   ============================================================ */
._csf header .category.maincategory {
  gap: 0;
}
._csf header .category.maincategory a,
._csf header .category.subcategory a {
  color: #000;
}
._csf header .category.subcategory {
  /* display: none; */
  gap: 0;
}
._csf header .category.subcategory.open {
  display: flex;
}
._csf header .category.subcategory li {
  position: relative;
}
._csf header .category.maincategory a,
._csf header .category.subcategory a,
._csf header .category.maincategory li:not(:last-child):after,
._csf header .category.subcategory li:not(:last-child):after {
  font-family: var(--font-akkurat);
  font-size: var(--text-headline1);
  line-height: var(--tw-leading, var(--text-headline1--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: #000;
}
@media (width>=64rem) {
  ._csf header .category.maincategory a,
  ._csf header .category.subcategory a,
  ._csf header .category.maincategory li:not(:last-child):after,
  ._csf header .category.subcategory li:not(:last-child):after {
    font-size: var(--text-display1);
    line-height: var(--tw-leading, var(--text-display1--line-height));
  }
}

._csf header .category.subcategory li:not(:last-child) a:after {
  content: "";
}

._csf header .category.childcategory {
  padding-top: calc(var(--spacing) * 11);
}

/* ============================================================
   우측 컨텐츠 영역
   ============================================================ */
#userStyle .section-right,
._csf .section-right {
  grid-column: span 6;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: calc(var(--spacing) * 11);
}
#userStyle .section-right .content_board,
._csf .section-right .content_board {
  grid-column: span 6;
}

/* ============================================================
  버튼
   ============================================================ */
._csf .btnNormal,
._csf .btnStrong,
._csf .btnBasic,
._csf .btnSubmit,
._csf .btnEm {
  height: auto;
  color: #000;
  border: 1px solid #000;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  font-size: var(--text-label1-kr);
  line-height: var(--text-label1-kr--line-height);
  font-weight: var(--tw-font-weight, var(--text-label1-kr--font-weight));
}
@media (width>=64rem) {
  ._csf .btnNormal,
  ._csf .btnStrong,
  ._csf .btnBasic,
  ._csf .btnSubmit,
  ._csf .btnEm {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
    font-size: var(--text-body1-kr);
    line-height: var(--tw-leading, var(--text-body1-kr--line-height));
    font-weight: var(--tw-font-weight, var(--text-body1-kr--font-weight));
  }
}
._csf .btnNormal:hover,
._csf .btnStrong:hover,
._csf .btnBasic:hover,
._csf .btnSubmit:hover,
._csf .btnEm:hover,
._csf .btnNormal.active,
._csf .btnStrong.active,
._csf .btnBasic.active,
._csf .btnSubmit.active,
._csf .btnEm.active {
  color: #fff;
  background: #000;
}

/* 색상 */
._csf .btnNormal.black,
._csf .btnStrong.black,
._csf .btnBasic.black,
._csf .btnSubmit.black,
._csf .btnEm.black {
  color: #fff;
  background: #000;
}

._csf .btnNormal.black:hover,
._csf .btnStrong.black:hover,
._csf .btnBasic.black:hover,
._csf .btnSubmit.black:hover,
._csf .btnEm.black:hover,
._csf .btnNormal.black.active,
._csf .btnStrong.black.active,
._csf .btnBasic.black.active,
._csf .btnSubmit.black.active,
._csf .btnEm.black.active {
  color: #000;
  background: #fff;
}

._csf .btnNormal.b-gray,
._csf .btnStrong.b-gray,
._csf .btnBasic.b-gray,
._csf .btnSubmit.b-gray,
._csf .btnEm.b-gray {
  color: #000;
  border-color: var(--color-label-assistive);
  background: #fff;
}
._csf .btnNormal.b-gray:hover,
._csf .btnStrong.b-gray:hover,
._csf .btnBasic.b-gray:hover,
._csf .btnSubmit.b-gray:hover,
._csf .btnEm.b-gray:hover,
._csf .btnNormal.b-gray.active,
._csf .btnStrong.b-gray.active,
._csf .btnBasic.b-gray.active,
._csf .btnSubmit.b-gray.active,
._csf .btnEm.b-gray.active {
  color: #000;
  border-color: var(--color-label-assistive);
  background: var(--color-label-assistive);
}

/* 사이즈 */
._csf .btnNormal.small,
._csf .btnSubmit.small,
._csf .btnEm.small {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  font-size: var(--text-caption1-kr);
  line-height: var(--tw-leading, var(--text-caption1-kr--line-height));
  font-weight: var(--tw-font-weight, var(--text-caption1-kr--font-weight));
}

@media (width>=64rem) {
  ._csf .btnNormal.small,
  ._csf .btnSubmit.small,
  ._csf .btnEm.small {
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    font-size: var(--text-body1-kr);
    line-height: var(--tw-leading, var(--text-body1--line-height));
    font-weight: var(--tw-font-weight, var(--text-body1-kr--font-weight));
  }
}

._csf .btnNormal.large,
._csf .btnSubmit.large,
._csf .btnEm.large {
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  font-size: var(--text-label2-kr);
  line-height: var(--tw-leading, var(--text-label2--line-height));
  font-weight: var(--tw-font-weight, var(--text-label2-kr--font-weight));
}

@media (width>=64rem) {
  ._csf .btnNormal.large,
  ._csf .btnSubmit.large,
  ._csf .btnEm.large {
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
    font-size: var(--text-body1-kr);
    line-height: var(--tw-leading, var(--text-body1--line-height));
    font-weight: var(--tw-font-weight, var(--text-body1-kr--font-weight));
  }
}

._csf .btnNormal.xlarge,
._csf .btnSubmit.xlarge,
._csf .btnEm.xlarge {
  width: 100%;
  padding: calc(var(--spacing) * 3) 0;
  font-size: var(--text-label1-kr);
  line-height: var(--tw-leading, var(--text-label1--line-height));
  font-weight: var(--tw-font-weight, var(--text-label1-kr--font-weight));
}

@media (width>=64rem) {
  ._csf .btnNormal.xlarge,
  ._csf .btnSubmit.xlarge,
  ._csf .btnEm.xlarge {
    width: 100%;
    padding: calc(var(--spacing) * 4) 0;
    font-size: var(--text-body1-kr);
    line-height: var(--tw-leading, var(--text-body1--line-height));
    font-weight: var(--tw-font-weight, var(--text-body1-kr--font-weight));
  }
}

/* ============================================================
   ec-base-table 
   ============================================================ */
.form-control,
.form-control-label > input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
.xans-member-login .login fieldset input[type="text"],
.xans-member-login .login fieldset input[type="password"],
#search-menu input,
#mCafe24Order input[type="text"],
#mCafe24Order input[type="password"],
#mCafe24Order input[type="number"],
#mCafe24Order input[type="tel"] {
  min-height: 34px;
}
@media (width>=64rem) {
  .form-control,
  .form-control-label > input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  .xans-member-login .login fieldset input[type="text"],
  .xans-member-login .login fieldset input[type="password"],
  #search-menu input,
  #mCafe24Order input[type="text"],
  #mCafe24Order input[type="password"],
  #mCafe24Order input[type="number"],
  #mCafe24Order input[type="tel"] {
    min-height: 42px;
  }
}
#search-menu {
  display: none;
}
#search-menu.open {
  display: flex;
}
._csf .section-right .ec-base-table {
  border: 0;
}

._csf .section-right .ec-base-table th {
  min-width: 112px;
  padding: 6px 0;
  height: 42px;
}
._csf .section-right .ec-base-table th,
._csf .section-right .ec-base-table td {
  border: 0;
}
._csf .section-right .ec-base-table td {
  padding: 6px 0 6px calc(var(--spacing) * 11);
}
._csf .section-right .ec-base-table .thumb {
  font-size: 0 !important;
  line-height: 0 !important;
}
._csf .section-right .ec-base-table table {
  width: 100%;
}
._csf .ec-base-table.typeWrite input[type="checkbox"] {
  margin-right: 8px;
}
._csf .ec-base-table.typeWrite img[alt="필수"] {
  display: inline-block;
  vertical-align: top;
}

/* ============================================================
   헤더
   ============================================================ */
header nav {
  color: #000;
}

header nav.fixed {
  top: 0;
  z-index: 99;
  background: #fff;
}

header nav.fixed .logo {
  height: 24px;
}

header ul li.cart_btn_box {
  position: relative;
}

header .xans-layout-logotop {
  font-size: 0;
  line-height: 0;
}

header .icoClose {
  line-height: 0;
  font-size: 0;
}

header #shop-menu {
  background-color: #bebfba;
}

header .mobile-menu-inner {
  padding: calc(var(--spacing) * 4);
}
header .mobile-menu-inner .xans-layout-mobilenavigation {
  padding-block: calc(var(--spacing) * 4);
}
header .mobile-menu-inner .menu-box {
  margin-top: calc(var(--spacing) * 10);
}
header .mobile-menu-inner .category-mobile {
  padding-inline: calc(var(--spacing) * 6);
}
header .mobile-menu-inner .category-mobile ul {
  padding-left: calc(var(--spacing) * 5);
}

/* 헤더 장바구니 */
._csf .xans-order-layerbasket.ec-base-layer.typeModal {
  position: fixed;
  transition: 0.3s all cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 0.2s;
}
._csf .xans-order-layerbasket.ec-base-layer.typeModal .xans-order-list > div:first-child {
  display: grid;
}
._csf .xans-order-layerbasket.ec-base-layer.typeModal .xans-order-list > div {
  display: none;
}
.xans-order-layerbasket .prodcut-option,
.xans-order-layerbasket .prodcut-price,
.xans-order-layerbasket .prodcut-quantity {
  font-size: 15px;
}
.xans-order-layerbasket .strike {
  text-decoration: line-through;
}
.xans-order-layerbasket .icons img {
  height: 15px;
}

.xans-order-layerbasket .prodcut-name-box {
  display: flex;
  align-items: center;
  gap: 3px;
}

.xans-order-layerbasket .thumbnail {
  font-size: 0;
  line-height: 0;
}

/* 헤더 검색 */
.xans-layout-searchheader .search_box {
  align-items: center;
}

/* 푸터 */
.sns-list-wrap a {
  font-size: 0;
  line-height: 0;
}

/* ============================================================
   반응형 — 모바일 (max-width: 1025px)
   ============================================================ */
@media all and (max-width: 1025px) {
  /* ============================================================
   폰트 설정
   ============================================================ */
  /* ._csf .section-right *:not([class^="btn"]) {
 font-size: var(--text-label1-kr) !important;
    line-height: var(--tw-leading, var(--text-label1--line-height)) !important;
  } */
  ._csf .section-right .title h2,
  ._csf .section-right .title h3,
  ._csf .section-right .myshop-title,
  ._csf .section-right .myshop-title * {
    font-size: var(--text-body1-kr) !important;
    line-height: var(--tw-leading, var(--text-body1--line-height)) !important;
    font-weight: var(--tw-font-weight, var(--text-body1-kr--font-weight));
  }

  /* ============================================================
   공통 레이아웃
   ============================================================ */
  ._csf main.main-layout {
    padding: calc(var(--spacing) * 11) calc(var(--spacing) * 4);
  }
  #userStyle .section-layout,
  ._csf .section-layout {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 11);
  }

  /* ._csf .section-left-inner.row #sub-featured li a:after {
    right: -1px;
    margin: 0;
    background-image: none !important;
  }
  ._csf .section-left .xans-layout-statelogon {
    display: none;
  }
  #userStyle .section-left #sub-featured,
  ._csf .section-left.order {
    display: none;
  } */
  header.open nav.fixed,
  #mobile-menu {
    background: #bebfba;
  }
  /* 헤더 장바구니 */
  .xans-order-layerbasket.ec-base-layer.typeModal {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ============================================================
   반응형 — 데스크탑 (min-width: 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  /* 헤더 장바구니 */
  header.open,
  header.open nav,
  header .mobile-menu-inner {
    background-color: transparent ;
  }

  .fixed-header .xans-order-layerbasket.ec-base-layer.typeModal {
    top: 65px;
  }
  /* 공통 좌우 레이아웃 */
  #userStyle.body-layout,
  #userStyle.body-layout._csf {
    gap: 124px;
  }
  #userStyle .section-layout,
  ._csf .section-layout {
    flex-direction: row;
    width: 100%;
  }
  #userStyle .section-left,
  ._csf .section-left {
    grid-column: span 6;
  }
  #userStyle .section-left-inner,
  ._csf .section-left-inner {
    position: sticky;
    top: 124px;
  }
  #userStyle .section-right .content_board.span4,
  ._csf .section-right .content_board.span4 {
    grid-column: span 4;
  }
}
.xans-product-listnormal .article-card .product_icons {
  gap: 10px;
}
@media (width>=64rem) {
  .xans-product-listnormal .article-card .product_icons {
    gap: 12px;
  }
}
.xans-product-listnormal .article-card .product_icons img {
  height: 20px;
}

@media (width>=64rem) {
  .xans-product-listnormal .article-card .product_icons img {
    height: 26px;
  }
}



/* ============================================================
   헤더 Shop 메뉴 애니메이션
   - PC Shop 메뉴: header.shop-open
   - 모바일 햄버거: header.open
   ============================================================ */

#shop-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-18px);
  clip-path: inset(0 0 100% 0);
  height: 52vh !important;
  min-height: 560px !important;
  z-index: 60 !important;
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 460ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 460ms;
  will-change: opacity, transform, clip-path;
}

#shop-menu.hidden {
  display: block !important;
}

#shop-menu.is-open,
#shop-menu.open,
header.shop-open #shop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}

#shop-menu .category-wrap,
#shop-menu .description {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 280ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

#shop-menu.is-open .category-wrap,
#shop-menu.open .category-wrap,
header.shop-open #shop-menu .category-wrap,
#shop-menu .description.is-visible {
  opacity: 1;
  transform: translateY(0);
}

header.shop-open #shop-menu .description {
  transform: translateY(0);
}

#shop-menu .subcategory > li {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--item-index, 0) * 45ms);
}

#shop-menu .subcategory > li.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.header-dim {
  z-index: 40 !important;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity 280ms ease,
    background-color 280ms ease,
    backdrop-filter 280ms ease,
    -webkit-backdrop-filter 280ms ease;
}

body.shop-menu-open .header-dim,
.shop-menu-open .header-dim,
header.shop-open ~ .header-dim {
  opacity: 1;
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* PC Shop 메뉴 열렸을 때 1번처럼 헤더까지 같은 배경 */
@media (min-width: 1024px) {
  
  header.shop-open #shop-menu {
    background: rgba(210, 210, 210, 0.9);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }
  /* header 자체 배경은 투명하게 */
  header.shop-open {
    background: transparent;
  }
}

/* 모바일 햄버거 메뉴 배경은 기존 header.open 유지 */
@media (max-width: 1025px) {
  header.open nav.fixed,
  #mobile-menu {
  background: rgba(210, 210, 210, 0.6);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  }
}

/* ============================================================
   임시/호환 보정
   - 일부 페이지에서 예전 header.js가 header.open만 붙이는 경우 대응
   - 모바일 햄버거 오작동 방지를 위해 PC에서만 적용
   ============================================================ */
@media (min-width: 1024px) {
  header.open #shop-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    transition-delay: 0s;
  }

  header.open #shop-menu .category-wrap,
  header.open #shop-menu .description {
    opacity: 1;
    transform: translateY(0);
  }



  header.open #shop-menu {
  background: rgba(210, 210, 210, 0.9);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  }
}



header nav.fixed {
  top: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
}

header nav.fixed.nav-transparent,
header nav.nav-transparent {
  background: rgba(210, 210, 210, 0.9) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
}