/* BASIC css start */

/* 풍류 모바일 기본 상단 | 깔끔한 전체메뉴
   기본 상단 > 기능 설정 > CSS 전체 교체용. style 태그 없이 입력하세요.
   현재 HTML과 JS를 함께 사용합니다.
   로고, 검색창, 가로 카테고리는 유지하고 전체메뉴 디자인을 정리했습니다. */
#prm-header  {

  /* 이 값들로 간격·크기·속도를 조절합니다. */
  --prm-nav-gap: 24px;
  --prm-nav-edge: 16px;
  --prm-nav-height: 48px;
  --prm-nav-size: 15px;
  --prm-motion: 240ms;
  --prm-z-index: 100;
  --prm-ink: #222;
  --prm-line: #ededed;
  --prm-accent: #f05223;
  --prm-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  position: sticky;
  top: 0;
  z-index: var(--prm-z-index);
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 0;
  border: 0;
  background: #fff;
  color: var(--prm-ink);
  font-family: var(--prm-font) !important;
  font-size: 14px;
  font-style: normal;
  line-height: 1.4;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
#prm-header.prm-fixed  {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  max-width: none;
  transform: none;
}
#prm-header-space  {
  display: none;
  clear: both;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
#prm-header, #prm-header *, #prm-header *::before, #prm-header *::after  {
  box-sizing: border-box;
}
#prm-header *  {
  font-family: var(--prm-font) !important;
}
#prm-header a  {
  color: inherit;
  text-decoration: none;
}
#prm-header button, #prm-header input  {
  font: inherit;
}
#prm-header a:focus-visible, #prm-header button:focus-visible  {
  outline: 2px solid #2157ca;
  outline-offset: -3px;
}

/* 1. 로고와 예약판매 안내: 기존 구성 유지 */
#prm-header .prm-brandbar  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
#prm-header .prm-logo  {
  display: block;
  flex-shrink: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
}
#prm-header .prm-notice  {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 44px;
  color: #777;
  font-size: 10px;
}
#prm-header .prm-notice strong  {
  color: #222;
  font-size: 10px;
  font-weight: 750;
}

/* 2. 검색창·전체 메뉴·장바구니 */
#prm-header .prm-tools  {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 10px 4px 16px;
}
#prm-header .prm-icon  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--prm-ink);
  cursor: pointer;
  appearance: none;
}
#prm-header .prm-icon svg  {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
#prm-header .prm-search  {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  min-width: 0;
  height: 42px;
  margin: 0 4px 0 0;
  padding: 0 0 0 12px;
  border: 0;
  border-radius: 8px;
  background: #f4f4f4;
}
#prm-header .prm-search input  {
  display: block;
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--prm-ink);
  font-size: 16px;
  line-height: normal;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
#prm-header .prm-search input::placeholder  {
  color: #999;
  opacity: 1;
  font-family: var(--prm-font);
  font-size: 12px;
}
#prm-header .prm-search .prm-icon svg  {
  width: 19px;
  height: 19px;
  color: #666;
}

/* 3. 카테고리: 글자 길이만큼 너비 + 일정한 24px 간격 */
#prm-header .prm-nav-shell  {
  width: 100%;
  border-bottom: 1px solid var(--prm-line);
}
#prm-header .prm-nav  {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#prm-header .prm-nav::-webkit-scrollbar  {
  display: none;
}
#prm-header .prm-nav-track  {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--prm-nav-gap);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0 var(--prm-nav-edge);
}
#prm-header .prm-tab  {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: var(--prm-nav-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #333;
  font-size: var(--prm-nav-size);
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.3px;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
#prm-header .prm-tab.prm-active  {
  color: #222;
  font-weight: 700;
}
#prm-header .prm-tab.prm-preorder, #prm-header .prm-menu-grid .prm-preorder  {
  color: var(--prm-accent);
}

/* 각각 생기는 밑줄 대신, 하나의 밑줄이 선택한 메뉴로 이동합니다. */
#prm-header .prm-nav-indicator  {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  height: 2px;
  margin: 0;
  padding: 0;
  background: #222;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  transition: transform var(--prm-motion) ease, width var(--prm-motion) ease, background-color var(--prm-motion) ease;
}

/* 4. 전체메뉴: 흰 바탕의 간결한 2열 텍스트 목록 */
#prm-header .prm-menu  {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  display: none;
  width: 100%;
  max-width: 768px;
  max-height: calc(100vh - var(--prm-bar-height, 141px) - 12px);
  max-height: calc(100dvh - var(--prm-bar-height, 141px) - 12px);
  margin: 0;
  padding: 12px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 0;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 0 0 12px 12px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .05);
  transform: translateX(-50%);
  scrollbar-width: thin;
  scrollbar-color: #dedede transparent;
  -webkit-overflow-scrolling: touch;
}

/* 기존 JS와 주소 해시 방식의 열기/닫기를 모두 지원 */
#prm-header .prm-menu:target, #prm-header .prm-menu.prm-is-open  {
  display: block;
}
#prm-header.prm-enhanced .prm-menu:not(.prm-is-open)  {
  display: none;
}
#prm-header .prm-menu-heading  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
#prm-header .prm-menu-heading strong  {
  color: #777;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
}

/* 원형 배경 없는 닫기 아이콘, 터치 영역 44px */
#prm-header .prm-close  {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0 -12px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #555;
  font-size: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
#prm-header .prm-close::before, #prm-header .prm-close::after  {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
#prm-header .prm-close::after  {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 전 항목을 같은 크기로 표시: 예약판매도 텍스트 색상만 강조 */
#prm-header .prm-menu-grid  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
}
#prm-header .prm-menu-grid > a  {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #333;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.35px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
#prm-header .prm-menu-grid > a > span[aria-hidden="true"]  {
  display: none;
}
#prm-header .prm-menu-grid > a.prm-preorder  {
  color: var(--prm-accent, #f05223);
  font-weight: 650;
}
#prm-header .prm-menu-grid > a[href="/m/basket.html"]  {
  color: #777;
}
#prm-header .prm-menu-grid > a:active  {
  opacity: .55;
}
#prm-header .prm-close:active  {
  color: #111;
}
#prm-header [data-prm-toggle][aria-expanded="true"]  {
  border-radius: 8px;
  background: #f4f4f4;
  color: #222;
}
#prm-header .prm-menu a:focus-visible  {
  outline: 2px solid #555;
  outline-offset: 2px;
  border-radius: 3px;
}
@media (hover: hover)  {
  #prm-header .prm-menu-grid > a:hover  {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
}
@media (max-width: 359px)  {
  #prm-header .prm-menu  {
    padding-right: 18px;
    padding-left: 18px;
  }
  #prm-header .prm-menu-grid  {
    column-gap: 20px;
  }
  #prm-header .prm-menu-grid > a  {
    min-height: 46px;
    font-size: 14px;
  }
}
#prm-header .prm-sr  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 359px)  {
  #prm-header  {
    --prm-nav-edge: 12px;
  }
  #prm-header .prm-brandbar  {
    padding-right: 12px;
    padding-left: 12px;
  }
  #prm-header .prm-logo  {
    font-size: 18px;
  }
  #prm-header .prm-tools  {
    padding-right: 6px;
    padding-left: 12px;
  }
}
@media (prefers-reduced-motion: reduce)  {
  #prm-header  {
    --prm-motion: 0ms;
  }
  #prm-header .prm-nav-indicator  {
    transition: none;
  }
}

/* 상단 가로 카테고리: 텍스트에만 기울임 적용 */
#prm-header .prm-nav .prm-tab  {
  font-style: italic;
}


/* 검색 입력창: 클릭·터치·입력 시 파란 포커스 테두리와 강조 효과 제거 */
#prm-header .prm-search,
#prm-header .prm-search:focus-within,
#prm-header .prm-search input,
#prm-header .prm-search input:focus,
#prm-header .prm-search input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
  animation: none !important;
  -webkit-tap-highlight-color: transparent;
}

div.H-5864-1-4289 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:repeat left top; border-top:0px solid ; border-right:0px solid ; border-bottom:0px solid ; border-left:0px solid ; }
/* 레이어 목록 */
#layer-list .pp2-layer-bg {height: 100%; background-color: #fff; margin-right: 60px;}
#pp2-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background-color: #000; }
#layer-list {visibility: visible; position: fixed; 
    top: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    z-index: 101;
    -webkit-transition-property:-webkit-transform, right, top;
    -webkit-transition-duration:.2s;
    -webkit-transform:translate3d(-100%,0,0);
    -webkit-transition-timing-function:ease-out;

    -moz-transition-property:-moz-transform, right, top;
    -moz-transition-duration:.2s;
    -moz-transform:translate3d(-100%,0,0);
    -moz-transition-timing-function:ease-out;

    -o-transition-property:-o-transform, right, top;
    -o-transition-duration:.2s;
    -o-transform:translate3d(-100%,0,0);
    -o-transition-timing-function:ease-out;
    -o-transform:translate(100%,0px);

    -ms-transition-property:-ms-transform, right, top;
    -ms-transition-duration:.2s;
    -ms-transform:translate3d(-100%,0,0);
    -ms-transition-timing-function:ease-out;

    transition-property:transform, right, top;
    transition-duration:.2s;
    transform:translate3d(-100%,0,0);
    transition-timing-function:ease-out;
}
.bg-modal {position:absolute; left:0; top:0; width:100%; height: 100%; z-index:4;}

.layer-list {position:absolute; left:0; top:0; width:100%;}
.layer-list .layer-list-box {margin-right:60px; background:#fff; overflow:hidden; line-height:14px;}
.layer-goods-box .layer-overlay-click,
.layer-list .layer-overlay-click { position: absolute; right: 0; top: 0; width: 60px; height: 100%; z-index: 1; }



.layer-list .layer-list-top { position: relative; height: 50px; border-bottom: 1px solid #bbbbbb; }
.layer-list .layer-list-top .btn-logo { display: inline-block; margin-left: 10px; height: 50px; line-height: 50px; font-weight: bold;}
.layer-list .layer-list-top .btn-logo img { max-height: 20px; width: auto; }
.layer-list .layer-list-top .btn-list-close {position: absolute; top: 5px; right: 5px; width: 45px; height: 36px;}
.layer-list .layer-list-top .btn-list-close .pop-close-btn .x1 {border: 1px solid #777; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 25px; position: absolute; top: 17px; right: 7px;}
.layer-list .layer-list-top .btn-list-close .pop-close-btn .x2 {border: 1px solid #777; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); width: 25px; position: absolute; top: 17px; right: 7px;}
.layer-list .layer-list-top .menu-sch-box .sch .btn-detail-sch {position: absolute; right: 10px; top: 15px; width: 15px; height: 15px; font-size: 0.75em; line-height: 0; color: #777;}

.layer-list .my-list { height: 40px; padding: 0 10px 15px; overflow: hidden; background-color: #f1f1f1; }
.layer-list .my-list li {float:left; width:50%; color:#333; font-size:0.75em; text-align:center;}
.layer-list .my-list li a.btn-join { display: block; height: 36px; line-height: 36px; border: 1px solid #383838; color: #383838; font-weight: bold; background-color: #fff; border-radius: 3px; margin-right: 3px; }
.layer-list .my-list li a.btn-login { display: block; height: 36px; line-height: 36px; border: 1px solid #383838; color: #fff; background-color: #383838; border-radius: 3px; }
.layer-list .my-list li strong {color:#e74c3c;}z`
.layer-list .my-list li a {color:#333;}
.layer-list .my-list li a strong {color:#e74c3c;}

.layer-list .my-list-sch { position: relative; }
.layer-list .my-list-sch .menu-sch-box .sch { background: none; }
.layer-list .my-list-sch .menu-sch-box .sch p { margin: 0; }
.layer-list .my-list-sch .menu-sch-box .sch .btn-detail-sch {position: absolute; right: 20px; top: 21px; width: 15px; height: 15px; font-size: 0.75em; line-height: 0; color: #777;}
.layer-list .my-list-sch .menu-sch-box .sch input[type='text'] {border: 2px solid #9e9e9e; width: 100%; height: 35px; line-height: 35px; border-radius: 18px;}
.layer-list .my-list-sch .menu-sch-box .sch > div { padding: 10px; background-color: #f1f1f1; } 

.layer-list .stats-logout .member-stats { padding: 10px 0 25px; text-align: center; background-color: #f1f1f1; }
.layer-list .stats-logout .member-stats dl dt { margin-bottom: 15px; font-weight: bold; color: #202020; font-size: 0.875em; }
.layer-list .stats-logout .member-stats dl dd { line-height: 20px; font-weight: bold; color: #858484; font-size: 0.875em; }

.layer-list .stats-login .member-stats { padding: 10px 0 25px; text-align: center; background-color: #f1f1f1; }
.layer-list .stats-login .member-stats dl dt { margin-bottom: 15px; font-weight: bold; color: #202020; font-size: 0.875em; }
.layer-list .stats-login .member-stats dl dd { line-height: 20px; font-weight: bold; color: #858484; font-size: 0.875em; }
.layer-list .stats-login .member-stats dl dd .del-count {display: block; color: #F74F4F; margin-top: 5px;}


.layer-list .tab-menu {overflow:hidden; font-size: 0.875em; padding: 5px 2px 10px;}
.layer-list .tab-menu li {position:relative; float:left; width:33.3%; margin-top:8px; box-sizing: border-box;}
.layer-list .tab-menu li:first-child {border-left: 1px solid #585858;}
.layer-list .tab-menu li a {display:block; text-align:center; height:39px; line-height:40px; color:#585858; font-size:0.875em; border: 1px solid #585858; border-left: 0px;}
.layer-list .tab-menu .on a {background:#585858; color:#fff;}
.layer-list .tab-menu .on a em {position:absolute; left:44%; bottom:-6px; border-top:6px solid #585858; border-left:4px solid transparent; border-right:4px solid transparent;}
.layer-list .list-menu {overflow:hidden; font-size: 0.79em;}
.layer-list .list-menu .category-list-top {border-top: 1px solid #e0e0e0;}
.layer-list .list-menu ul li span {display:block; height:41px; line-height:42px; border-bottom:1px solid #e0e0e0; padding-right: 35px;}
.layer-list .list-menu ul li span a { display:block; padding-left:10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; height:100%;}
.layer-list .list-menu ul li ul li span a {padding-left:25px;}
.layer-list #tab-category.list-menu > ul li { position: relative; }
.layer-list #tab-category.list-menu > ul > li ul { display: none; background-color: #f9f9f9; }
.layer-list #tab-category.list-menu > ul > li > ul > li > ul > li > span a { padding-left: 50px; }
.layer-list #tab-category.list-menu > ul li span a.expend {display: block; position: absolute; top: 0; right: 0; width: 50px; height: 41px; padding-left: 0; text-align: center;}
.layer-list #tab-category.list-menu > ul li span a.expend:before { content: "\f107"; font-family: FontAwesome; }
.layer-list #tab-category.list-menu > ul li span a.expend.showing:before { content: "\f106"; font-family: FontAwesome;}

#review-board-type .reply-write .sub-reviews li { border-bottom: 1px solid #e1e1e1; list-style-type: none; padding: 10px 14px; background-color: #fff; }
#review-board-type .reply-write .sub-reviews li:last-child { border-bottom: none; }
#review-board-type .reply-write .sub-reviews .info { font-size: .75em; color: #777; }
#review-board-type .reply-write .sub-reviews .info .btns { display: inline-block; margin-left: 10px; }
#review-board-type .reply-write .sub-reviews .info a { font-size: 1em; }
#review-board-type .reply-write .sub-reviews li p { margin-top: 5px; font-size: .75em; color: #777; }
#review-board-type .reply-write td ul.agree li a {position: absolute; right: 14px; top: 7px; font-size: 1em; }

.layer-list .cs-center {padding:20px;}
.layer-list .cs-center p {color:#666; font-size:0.75em; text-align: center;}


.member-menu { position: relative; margin: 7px 5px 0; border: 3px double #dedede; border-radius: 5px; }
.member-menu .fa-hover {color: #717171;}
.member-menu .fa-hover span {font-size: 1.5em;}

#menuArea { padding: 15px 0; text-align: center; }
#menuArea ul {overflow: hidden;}
#menuArea ul li { display: inline-block; float: left;}
#menuArea ul li figure {padding-top: 2px;}
#menuArea ul li.last { margin-right: 0; }
#menuArea ul li figcaption { margin-top: 3px; font-size: 12px; }

/* 최근 본 상품 */
.resent-list ul {overflow:hidden;}
.resent-list ul li dl dd a span.tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.resent-list {overflow:hidden; padding: 0 8px; text-align: center;}
.resent-list ul li {float:left; width:50%; margin-bottom:10px;}
.resent-list ul li dl {padding: 0 1px 5px;}
.resent-list ul li dl dt img {max-width:100%; height:auto;}
.resent-list ul li dl dd {color:#555555; line-height:18px; font-size:0.75em; padding:5px 7px 0 7px;}
.resent-list ul li dl dd span {display:block; color:#000; word-break: break-all; }
.resent-list ul li dl dd a {color:#555555;}
.resent-list .recent-dec {text-align: center; display: block; font-size: 0.875em; background-color: #f9f9f9; padding: 20px 0;}

/* 자주찾는 카테고리 모음 */
.favorite_cate {border: 1px solid #b1bbc5; margin: 2px 3px 5px; border-radius: 3px;}
.favorite_cate .favorite_btn {padding: 10px 0; display: inline-block; width: 100%; background-color: #e2e6ea; text-align: center;}
.favorite_cate .favorite_wrap li { overflow:hidden; padding:5px 10px 10px; font-size: 0.875em; text-align: center;}
.favorite_cate .favorite_wrap li a {float:left; height: 25px; line-height: 25px; padding: 0 5px; margin:5px 5px 0 0; border:1px solid #ccc; background:#fff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%; box-sizing: border-box;}
.favorite_cate .favorite_wrap {display: none; border-top: 1px dotted #b1bbc5;}


div.H-5864-1-4294 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:repeat left top; border-top:0px solid ; border-right:0px solid ; border-bottom:0px solid ; border-left:0px solid ; }

div.H-5864-1-4295 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:repeat left top; border-top:0px solid ; border-right:0px solid ; border-bottom:0px solid ; border-left:0px solid ; }
/* BASIC css end */