@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap);
/* 예시파일 */

:root {
  --layout-color: #fff;
}

@charset 'utf-8';

/* ============================================================================
   비뉴럭스 디자인 토큰
   ----------------------------------------------------------------------------
   여기가 스킨 전체의 단일 통제 지점이다. 페이지 JSX를 하나씩 만지지 말고
   이 블록의 값만 바꿔서 타이포·여백·색을 일괄로 움직인다.

   [단위를 rem 이 아니라 calc(비율 * --benew-root) 로 쓰는 이유]
   src/index.js 가 이 파일보다 먼저 불러오는
   @shopby/shared/dist/styles/common.css 가 루트 폰트를 이렇게 뒤집는다.
       html { font-size: 87.5% }                      -> 1rem = 14px  (뷰포트 < 450px)
       @media (min-width: 450px) { html { 100% } }    -> 1rem = 16px  (그 이상)
   그래서 CSS 의 rem 을 그대로 쓰면 같은 값이 아이폰(<=430px)과 그 위 기기에서
   12.5% 씩 널뛴다. 파일에 남아 있던 1.71429rem(=24/14) 류가 그 사고의 흔적이다.
   html 폰트를 우리가 덮으면 @shopby 컴포넌트 사이징이 통째로 깨지므로 덮지 않는다.
   대신 --benew-root 로 절대 기준점을 고정하고 나머지는 전부 그 비율로 잡는다.
   -> 비율 기반 통제(원래 목적)는 살리고, 450px 뒤집힘은 피한다.
   -> 전체 타이포를 키우고 싶으면 --benew-root 하나만 올리면 된다.
   ============================================================================ */

:root {
  /* --- 기준 눈금 ---------------------------------------------------------- */
  --benew-root: 16px;

  /* --- 타입 스케일 -------------------------------------------------------- */
  --benew-fs-3xs: calc(0.625 * var(--benew-root)); /* 10px */
  --benew-fs-2xs: calc(0.6875 * var(--benew-root)); /* 11px */
  --benew-fs-xs: calc(0.75 * var(--benew-root)); /* 12px */
  --benew-fs-sm: calc(0.8125 * var(--benew-root)); /* 13px */
  --benew-fs-md: calc(0.875 * var(--benew-root)); /* 14px */
  --benew-fs-lg: calc(0.9375 * var(--benew-root)); /* 15px */
  --benew-fs-xl: calc(1 * var(--benew-root)); /* 16px */
  --benew-fs-2xl: calc(1.125 * var(--benew-root)); /* 18px */
  --benew-fs-3xl: calc(1.25 * var(--benew-root)); /* 20px */
  --benew-fs-4xl: calc(1.375 * var(--benew-root)); /* 22px */
  --benew-fs-5xl: calc(1.5 * var(--benew-root)); /* 24px */
  --benew-fs-6xl: calc(2 * var(--benew-root)); /* 32px */

  /* --- 행간 / 자간 -------------------------------------------------------- */
  --benew-lh-tight: 1.35;
  --benew-lh-heading: 1.4;
  --benew-lh-base: 1.6;
  --benew-lh-relaxed: 1.75;
  --benew-ls-tight: -0.03em;
  --benew-ls-base: -0.02em;
  --benew-ls-wide: 0.08em;

  /* --- 스페이스 스케일 ---------------------------------------------------- */
  --benew-space-3xs: calc(0.125 * var(--benew-root)); /* 2px */
  --benew-space-2xs: calc(0.25 * var(--benew-root)); /* 4px */
  --benew-space-xs: calc(0.375 * var(--benew-root)); /* 6px */
  --benew-space-sm: calc(0.5 * var(--benew-root)); /* 8px */
  --benew-space-md: calc(0.75 * var(--benew-root)); /* 12px */
  --benew-space-lg: calc(1 * var(--benew-root)); /* 16px */
  --benew-space-xl: calc(1.25 * var(--benew-root)); /* 20px */
  --benew-space-2xl: calc(1.5 * var(--benew-root)); /* 24px */
  --benew-space-3xl: calc(2 * var(--benew-root)); /* 32px */
  --benew-space-4xl: calc(2.5 * var(--benew-root)); /* 40px */
  --benew-space-5xl: calc(3.5 * var(--benew-root)); /* 56px */

  /* 세로형 콘텐츠(상품 상세·공지·안내) 전용 리듬. 럭셔리 핏을 위해 여유롭게. */
  --benew-flow-gap: var(--benew-space-3xl); /* 블록과 블록 사이 */
  --benew-flow-gap-sm: var(--benew-space-xl); /* 블록 안쪽 항목 사이 */
  --benew-page-pad-x: var(--benew-space-lg); /* 페이지 좌우 기본 안여백 */

  /* --- 대표색 -------------------------------------------------------------
     --point-color 는 @shopby/shared common.css 가 #f92626 으로 깔고,
     라이브에서는 어드민(서비스관리 > 쇼핑몰관리) 주입값이 그 위를 덮는다(#EB3F41).
     여기에 대표색을 하드코딩하지 말 것. 아래 fallback 은 두 값이 모두 없을 때만 쓰인다. */
  --benew-primary: var(--point-color, #eb3f41);
  --benew-primary-secondary: #2869f7;

  /* --- 글자색 ------------------------------------------------------------- */
  --benew-ink: #111; /* 본문·제목 기본 */
  --benew-ink-deep: #0f172a; /* 카드 헤딩 강조 */
  --benew-ink-soft: #262626;
  --benew-ink-800: #1e293b;
  --benew-ink-700: #334155;
  --benew-ink-600: #475569;
  --benew-ink-500: #64748b;
  --benew-ink-400: #94a3b8;
  --benew-text-strong: #222;
  --benew-text-body: #333;
  --benew-text-sub: #555;
  --benew-text-muted: #666;
  --benew-text-weak: #888;
  --benew-text-weaker: #8a8a8a;
  --benew-text-faint: #999;
  --benew-text-disabled: #b3b3b3;
  --benew-placeholder: #c4c4c4;
  --benew-default-font-color: #181818;
  --benew-gray-font-color: #828282;
  --benew-blue-gray-color: #3f434c;

  /* --- 면(surface) -------------------------------------------------------- */
  --benew-white: #fff;
  --benew-surface-sub: #f8fafc;
  --benew-surface-muted: #f5f5f5;
  --benew-surface-alt: #f6f6f6;
  --benew-surface-faint: #fafafa;
  --benew-surface-tint: #f4f4f4;
  --benew-surface-tone: #f3f3f3;
  --benew-surface-shade: #f2f2f2;
  --benew-bg: #f5f6f8;
  --benew-tooltip-bg: #f7f7f7;

  /* --- 테두리 / 구분선 ---------------------------------------------------- */
  --benew-border: #e5e5e5; /* 입력창 기본 테두리 */
  --benew-border-strong: #ddd;
  --benew-border-light: #eee;
  --benew-border-lighter: #ececec;
  --benew-border-faint: #e9e9e9;
  --benew-border-card: #e2e8f0;
  --benew-border-dashed: #cbd5e1;
  --benew-border-mid: #bbb;
  --benew-border-tone: #cfcfcf;
  --benew-border-tone-2: #d2d2d2;
  --benew-border-tone-3: #d8d8d8;
  --benew-border-tone-4: #e0e0e0;
  --benew-divider: #f1f5f9;

  /* --- 상태색 ------------------------------------------------------------- */
  --benew-info-bg: #f0f6ff;
  --benew-info-border: #dbeafe;
  --benew-info-ink: #1e40af;
  --benew-warn-bg: #fef2f2;
  --benew-warn-border: #fee2e2;
  --benew-warn-ink: #991b1b;
  --benew-info-text: #1e40af;
  --benew-danger-bg: #fff5f5;
  --benew-danger-text: #b42318;
  --benew-success-text: #0f766e;

  /* --- 브랜드(외부 서비스 고정색. 변경 금지) ------------------------------ */
  --benew-naver: #03c75a;
  --benew-kakao: #fee500;

  /* --- 모양 --------------------------------------------------------------- */
  --benew-radius-xs: 2px;
  --benew-radius-sm: 4px;
  --benew-radius: 6px; /* 입력창·버튼 기본 */
  --benew-radius-md: 8px;
  --benew-radius-lg: 10px;
  --benew-radius-xl: 12px;
  --benew-radius-2xl: 16px;
  --benew-radius-pill: 999px;

  --benew-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.02);
  --benew-shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.04);
  --benew-dim: rgba(15, 23, 42, 0.38); /* 모달·오버레이 딤 */

  /* --- 레이아웃 (기존 이름 유지: 다른 규칙·JSX가 참조 중) ----------------- */
  --mall-width: 600px;
  --app-header-h: 44px;

  /* --- 오로라 원본 변수명 호환 레이어 -------------------------------------
     @shopby 컴포넌트와 기존 규칙이 이 이름들을 참조한다. 값은 토큰으로 넘긴다. */
  --whole-color: var(--benew-white);
  --background-color: var(--benew-bg);
  --point-color-secondary: var(--benew-primary-secondary);
  --black-color: var(--benew-ink);
  --dark-gray-color: var(--benew-ink-soft);
  --empty-color: var(--benew-bg);
  --default-color: var(--benew-border-strong);
  --blue-gray-color: var(--benew-blue-gray-color);
  --gray-color: var(--benew-text-faint);
  --gray-font-color: var(--benew-gray-font-color);
  --tooltip-bg-color: var(--benew-tooltip-bg);
  --default-font-color: var(--benew-default-font-color);
}

html:root {
  --caution-color: var(--benew-primary);
}

html,
body,
#app {
  max-width: 100%;
  overflow: visible;
  overflow-anchor: none;
}

.product-thumb-brand {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  padding: 2px 0 0;
  font-size: var(--benew-fs-sm);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--black-color);
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

/* 브랜드만 노출: 이미지 너비 기준 가운데 정렬, 긴 이름은 두 줄까지 */
.product-thumb-brand--only {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  width: 100%;
  margin-bottom: 10px;
  padding: 2px 0 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

.thumb-item__info:has(.product-thumb-brand--only) {
  text-align: center;
}

.thumb-item__info:has(.product-thumb-brand--only) > a {
  display: block;
  width: 100%;
}

/* 상품 이미지: 비율 유지 + 흰 여백(Fit & Pad). 크롭/늘리기/확대 없음 */
.thumb-item__media:has(.thumb-item__img img),
.product-section .thumb-item__media,
.product-section--slide .thumb-item__media {
  background-color: var(--benew-white);
  background-image: none;
}

.thumb-item__img,
.product-section .thumb-item__img,
.product-section--slide .thumb-item__img {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--benew-white);
}

.thumb-item__img img,
.product-section .thumb-item__img img,
.product-section--slide .thumb-item__img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* 신규상품(SCMO0001)만 데스크톱에서도 모바일과 같은 2열로 크게 보여준다.
   샵바이 기본은 PC 4열(:where(.thumb-GALLERY.PC) .thumb-item { width: calc(25% - 5px) })이라
   600px(--mall-width) 몰 폭에서 이미지가 135px까지 줄어든다.
   같은 규칙이 .thumb-item 에 flex/margin-left 도 걸어두므로 둘 다 되돌린다. */
.product-section--SCMO0001 .thumb-GALLERY.PC {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--benew-space-md);
}

.product-section--SCMO0001 .thumb-GALLERY.PC .thumb-item {
  width: auto;
  margin-left: 0;
}

/* 인기상품(SCMO0002) 리스트 썸네일. 샵바이 기본은 120px.
   좌우 페이지 여백(20px)은 유지하고 썸네일 박스만 키운다. 이미지 크롭/확대 없음. */
.product-section--SCMO0002 .thumb-LIST .thumb-item__media,
.product-section--SCMO0002 .thumb-LIST .thumb-item__img-box,
.product-section--SCMO0002 .thumb-LIST .thumb-item__img {
  box-sizing: border-box;
  width: calc(10 * var(--benew-root));
  height: calc(10 * var(--benew-root));
  min-width: calc(10 * var(--benew-root));
  max-width: calc(10 * var(--benew-root));
}

/* 페이지 상단 제목. 공지·브랜드·위시리스트·로그인·제휴문의·장바구니·FAQ·회원가입·고객센터·주문서·내 정보 공용.
   좌우 여백은 각 페이지 본문(.partnership, .notice, .customer-center ...)과 같은 --benew-page-pad-x 라
   제목 왼쪽 라인이 본문 첫 글자와 정확히 맞는다. 값을 바꾸려면 본문 padding 도 같이 봐야 한다. */
.l-content .page-heading {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--benew-space-2xl) var(--benew-page-pad-x) var(--benew-space-md);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: var(--benew-fs-5xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--benew-ls-tight);
  color: var(--benew-ink);
  text-align: left;
  text-transform: none;
}

.brand-list__index {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 8px;
  overflow-x: auto;
  background: var(--benew-white);
  border-bottom: 1px solid var(--light-gray-border-color, var(--benew-border-lighter));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* 제목 바로 아래 레일이라 스크롤바가 보이면 상단이 지저분해진다. 필터 칩 레일과 같은 처리. */
.brand-list__index::-webkit-scrollbar {
  display: none;
}

.brand-list__index-link {
  flex: 1 0 auto;
  min-width: 18px;
  padding: 4px 3px;
  font-size: var(--benew-fs-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--benew-text-weaker);
  text-align: center;
  text-decoration: none;
}

.brand-list__index-link:not(.is-disabled) {
  color: var(--benew-ink);
}

.brand-list__index-link.is-disabled {
  pointer-events: none;
  opacity: 0.35;
}

.brand-list__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--benew-ink);
}

.brand-list__search-submit {
  display: flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--benew-ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.brand-list__search-icon {
  display: block;
  width: 18px;
  height: 18px;
  color: inherit;
}

.brand-list__search-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 4px 0;
  font-size: var(--benew-fs-xl);
  line-height: 1.3;
  color: var(--benew-ink);
  border: 0;
  outline: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.brand-list__search-input::placeholder {
  font-size: var(--benew-fs-xl);
  color: var(--benew-text-weaker);
  opacity: 1;
}

.brand-list__status {
  padding: 40px 16px;
  color: var(--gray-font-color);
  text-align: center;
}

.brand-list__section {
  scroll-margin-top: 46px;
}

.brand-list__letter {
  padding: 28px 16px 8px;
  font-size: var(--benew-fs-6xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--benew-ink);
}

.brand-list__items {
  list-style: none;
  margin: 0;
  padding: 0 16px;
}

.brand-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 0;
  font-size: var(--benew-fs-lg);
  color: var(--benew-ink);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--light-gray-border-color, var(--benew-border-lighter));
  cursor: pointer;
}

.brand-list__item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-list__item-count {
  flex: 0 0 auto;
  color: var(--benew-text-weaker);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.brand-list__item.is-active {
  font-weight: 600;
}

.brand-list__item.is-active .brand-list__item-count {
  font-weight: 400;
}

.page:has(.main-view) .app-chrome {
  position: sticky;
  top: 0;
  z-index: 8;
  box-sizing: border-box;
  background: var(--benew-white);
  box-shadow: 0 1px 0 var(--benew-border-light);
  overflow-anchor: none;
}

.page:has(.main-view) .app-chrome:has(.header--search-open) {
  z-index: 160;
}

.page:has(.main-view) .header.header--app {
  position: relative;
  top: auto;
  z-index: auto;
  background: transparent;
  overflow-anchor: none;
}

.page:has(.main-view) .header.header--app.header--search-hidden {
  padding-bottom: 0;
}

.page:has(.breadcrumb--plp) .app-chrome,
.page:has(.product-detail) .app-chrome {
  position: sticky;
  top: 0;
  z-index: 8;
  box-sizing: border-box;
  height: var(--app-header-h);
  background: var(--benew-white);
  box-shadow: 0 1px 0 var(--benew-border-light);
  overflow-anchor: none;
}

.page:has(.breadcrumb--plp) .app-chrome:has(.header--search-open),
.page:has(.product-detail) .app-chrome:has(.header--search-open) {
  height: auto;
  z-index: 160;
}

.page:has(.breadcrumb--plp) .header.header--app,
.page:has(.product-detail) .header.header--app {
  position: relative;
  top: auto;
  z-index: auto;
  box-sizing: border-box;
  height: var(--app-header-h);
  min-height: var(--app-header-h);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  transition: none;
  overflow-anchor: none;
}

.page:has(.product-detail) .l-content,
.page:has(.breadcrumb--plp) .l-content,
.page:has(.main-view) .l-content,
.page:has(.product-detail) .page__content.site,
.page:has(.breadcrumb--plp) .page__content.site,
.page:has(.main-view) .page__content.site,
.page:has(.product-detail) .page-inner,
.page:has(.breadcrumb--plp) .page-inner,
.page:has(.main-view) .page-inner,
.page:has(.product-detail) .page,
.page:has(.breadcrumb--plp) .page,
.page:has(.main-view) .page {
  overflow: visible;
  transition: none;
}

.page:has(.product-detail) .product-detail .tabs {
  position: sticky;
  top: var(--app-header-h);
  z-index: 7;
  width: 100%;
  margin: 0 auto;
  background: var(--benew-white);
  border-top: 0;
  transition: none;
  overflow-anchor: none;
}

.plp-stick {
  position: sticky;
  top: var(--app-header-h);
  z-index: 7;
  background: var(--benew-white);
  overflow-anchor: none;
}

.plp-stick.is-open {
  z-index: 30;
}

.plp-chrome {
  position: relative;
  top: auto;
  z-index: auto;
  background: var(--benew-white);
  transition: none;
  transform: none;
}

.plp-stick.is-scroll-hidden > .plp-chrome,
.plp-stick.is-scroll-hidden > .breadcrumb--plp {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.plp-chrome.is-open {
  z-index: 30;
}

.plp-chrome .breadcrumb--plp {
  position: relative;
  top: auto;
  z-index: auto;
  transform: none;
  pointer-events: auto;
}

.breadcrumb--plp {
  position: relative;
  top: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 5px 16px;
  overflow: visible;
  background: var(--benew-white);
  transition: none;
  transform: none;
  overflow-anchor: none;
}

.breadcrumb--plp.is-open {
  z-index: 30;
}

.breadcrumb--plp .breadcrumb__section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  height: 25px;
  margin: 0;
  padding: 0;
  font-size: var(--benew-fs-md);
  font-weight: 600;
  line-height: 1;
  color: var(--benew-ink);
}

.breadcrumb--plp .breadcrumb__section::before,
.breadcrumb--plp .breadcrumb__section::after {
  content: none;
  display: none;
}

.breadcrumb--plp .breadcrumb__link,
.breadcrumb--plp .breadcrumb__link a {
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb--plp .breadcrumb__toggle span,
.breadcrumb--plp .breadcrumb__current {
  display: inline-flex;
  align-items: center;
  height: auto;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb--plp .breadcrumb__sep {
  display: none;
}

.breadcrumb--plp .breadcrumb__link::after {
  content: none !important;
  display: none !important;
}

.breadcrumb--plp .breadcrumb__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 25px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

.breadcrumb--plp .breadcrumb__toggle span::after {
  content: none !important;
  display: none !important;
}

.breadcrumb--plp .breadcrumb__icon {
  display: block;
  flex: 0 0 12px;
  align-self: center;
  width: 12px;
  height: 12px;
  margin: 0;
  overflow: visible;
}

.breadcrumb--plp .breadcrumb__toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.breadcrumb--plp .category-callout {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 30;
  max-height: min(70vh, 480px);
  overflow: auto;
  background: var(--benew-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}

.breadcrumb--plp .category-callout__btn,
.breadcrumb--plp .category-callout__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  font-size: var(--benew-fs-md);
  line-height: 1.3;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-filter {
  display: contents;
}

.page:has(.category-filter) .l-panel {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.page:has(.category-filter) .total-sort {
  display: none;
}

.category-filter__count {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 8px 0 19px;
  font-size: var(--benew-fs-sm);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--benew-ink);
  white-space: nowrap;
  background: var(--benew-white);
}

.breadcrumb--plp .category-filter__count {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 25px;
  margin: 0 0 0 auto;
  padding: 0;
  line-height: 1;
}

.breadcrumb--plp .category-filter__count .highlight {
  margin: 0 1px;
  color: var(--benew-ink);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.category-filter__count .highlight {
  margin: 0 1px;
  color: var(--benew-ink);
  font-style: normal;
  font-weight: 600;
}

.page:has(.plp-stick) .category-filter__chips {
  position: relative;
  top: auto;
}

.category-filter__chips {
  position: sticky;
  top: var(--app-header-h);
  z-index: 4;
  width: 100%;
  min-width: 0;
  background: var(--benew-white);
  border-top: 1px solid var(--benew-border-light);
  border-bottom: 1px solid var(--benew-border-light);
  overflow: hidden;
  transition: none;
  overflow-anchor: none;
}

.category-filter__chips-scroll {
  width: 100%;
  min-width: 0;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-filter__chips-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: max-content;
}

.category-filter__chips.is-menu-open {
  z-index: 20;
  overflow: visible;
}

.category-filter__chips.is-menu-open .category-filter__chips-scroll {
  overflow: visible;
}

.category-filter__chips-scroll::-webkit-scrollbar {
  display: none;
}

.category-chip-wrap {
  position: relative;
  flex: 0 0 auto;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 25px;
  max-width: none;
  padding: 0 10px;
  font-size: var(--benew-fs-sm);
  color: var(--benew-ink);
  white-space: nowrap;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-strong);
  border-radius: var(--benew-radius-pill);
  cursor: pointer;
}

.category-chip.is-active {
  color: var(--benew-ink);
  background: var(--benew-white);
  border-color: var(--benew-ink);
  font-weight: 600;
}

.category-chip__text {
  flex: 0 0 auto;
}

.category-chip__chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  overflow: visible;
}

.category-chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 4;
  min-width: 132px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-light);
  border-radius: var(--benew-radius-xl);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.category-chip-menu__item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: var(--benew-fs-md);
  color: var(--benew-ink);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-chip-menu__item.is-active {
  font-weight: 600;
}

.category-chip-menu--colors {
  left: auto;
  right: 0;
  min-width: 176px;
  padding: 8px;
}

.category-chip-menu--sort {
  left: auto;
  right: 0;
}

.category-chip-menu--category {
  max-height: min(70vh, 420px);
  overflow: auto;
  min-width: 168px;
}

.category-chip-menu__item.is-child {
  padding-left: 28px;
}

.category-depth-panel-wrap {
  background: var(--benew-white);
  border-bottom: 1px solid var(--benew-border-light);
}

.category-depth-panel {
  background: var(--benew-white);
}

.category-depth-panel__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 16px 0;
  font-size: var(--benew-fs-xs);
  line-height: 1.3;
  color: var(--benew-text-weaker);
}

.category-depth-panel__trail-item {
  display: inline-flex;
  align-items: center;
}

.category-depth-panel__trail-sep {
  margin: 0 6px;
  color: var(--benew-placeholder);
}

.category-depth-panel__trail-btn {
  padding: 0;
  font-size: var(--benew-fs-xs);
  color: var(--benew-text-weaker);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-depth-panel__pills {
  display: flex;
  gap: 6px;
  padding: 12px 16px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--benew-text-muted) var(--benew-border-light);
  -webkit-overflow-scrolling: touch;
}

.category-depth-panel__pills::-webkit-scrollbar {
  height: 4px;
}

.category-depth-panel__pills::-webkit-scrollbar-track {
  background: var(--benew-border-light);
}

.category-depth-panel__pills::-webkit-scrollbar-thumb {
  background: var(--benew-text-muted);
  border-radius: var(--benew-radius-pill);
}

.category-depth-panel__pill {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  font-size: var(--benew-fs-sm);
  color: var(--benew-ink);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: var(--benew-radius-pill);
  cursor: pointer;
}

.category-depth-panel__pill.is-active {
  color: var(--benew-white);
  background: var(--benew-ink);
}

.category-depth-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 4px 8px 16px;
}

.category-depth-panel__col {
  margin: 0;
  padding: 0 8px;
  list-style: none;
  border-right: 1px solid var(--benew-border-light);
}

.category-depth-panel__col:last-child {
  border-right: 0;
}

.category-depth-panel__grid-btn {
  display: block;
  width: 100%;
  padding: 10px 4px;
  font-size: var(--benew-fs-sm);
  line-height: 1.35;
  color: var(--benew-ink);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-depth-panel__grid-btn.is-active,
.category-depth-panel__trail-btn.is-current {
  font-weight: 700;
}

.category-depth-panel__empty {
  margin: 0;
  padding: 12px 16px 16px;
  font-size: var(--benew-fs-sm);
  color: var(--benew-text-weaker);
}

.category-chip-menu--colors .category-chip-menu__item {
  padding: 8px 10px;
}

.category-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 32px);
  gap: 10px;
  padding: 8px 6px 6px;
}

.category-color-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-color-swatch {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
}

.category-color-swatch.is-light {
  border-color: var(--benew-border-tone);
}

.category-color-swatch.is-multi {
  background: conic-gradient(#e11d48, #efc220, #2f8f4e, #2f6fed, #7a3ad8, #e11d48) !important;
}

.category-color-btn.is-active .category-color-swatch {
  box-shadow:
    0 0 0 2px var(--benew-white),
    0 0 0 4px var(--benew-ink);
}

.category-chip__swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.category-chip.is-active .category-chip__swatch {
  border-color: var(--benew-ink);
}

.category-menu__list {
  display: block;
  column-count: 3;
  column-gap: 16px;
  margin: 0;
  padding: 10px 16px 8px;
  list-style: none;
}

.category-menu__list > li {
  break-inside: avoid;
}

.category-menu__list .category-menu__link {
  display: block;
  padding: 5px 0;
  font-size: var(--benew-fs-sm);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.brand-list__clear {
  display: block;
  width: calc(100% - 32px);
  margin: 8px 16px 0;
  padding: 12px 0;
  font-size: var(--benew-fs-md);
  color: var(--benew-ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--light-gray-border-color, var(--benew-border-lighter));
  cursor: pointer;
}

.category-brand-filter__modal .title-modal__content {
  overflow: auto;
}

.category-filter-tree-modal .title-modal__content {
  overflow: hidden;
  padding: 0;
}

.category-tree--picker {
  min-height: calc(100vh - 52px);
  height: calc(100vh - 52px);
}

.category-tree--picker .category-tree__panel {
  overflow: auto;
}

.category-tree--picker .category-tree__all,
.category-tree--picker .category-tree__group-link,
.category-tree--picker .category-tree__grid-link {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-tree--picker .category-tree__all.is-active,
.category-tree--picker .category-tree__group-btn.is-active,
.category-tree--picker .category-tree__group-link.is-active,
.category-tree--picker .category-tree__grid-link.is-active {
  font-weight: 700;
}

/* 파페치 앱형 상단: 삼선·로고·백을 같은 44px 바에 맞춤 */
.header--app {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 0 4px 10px;
}

.header--app:not(:has(.header__search-wrap)) {
  padding-bottom: 0;
}

.header .header__bar {
  position: relative;
  width: 100%;
}

.header--app .header__bar,
.header--search-page .header__bar,
.header--tab .header__bar,
.header--sub .header__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
}

.header .header__icon-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--benew-text-strong);
  background: transparent;
  border: 0;
  transform: translateY(-50%);
}

.header .header__menu-btn,
.header .header__left-btn {
  left: 0;
}

.header .header__left-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--benew-text-strong);
  background: transparent;
  border: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.header .header__cart-btn.header__icon-btn {
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
}

.header .header__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.header--app .header__title {
  position: relative;
  z-index: 0;
  max-width: calc(100% - 96px);
  padding: 0;
  line-height: 0;
}

.header--app .header__logo-img {
  width: auto !important;
  height: 26px;
  max-width: 220px;
  max-height: 26px;
  object-fit: contain;
}

.header--app .header__logo-text {
  display: block;
  font-size: var(--benew-fs-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 44px;
  color: var(--benew-ink);
  text-decoration: none;
}

.header.header--app,
.header.header--tab,
.header.header--search-page,
.header.header--sub {
  min-height: 0;
}

.header--sub {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.header__cart-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: var(--benew-fs-3xs);
  font-weight: 600;
  line-height: 14px;
  color: var(--benew-white);
  text-align: center;
  background: var(--benew-text-strong);
  border-radius: var(--benew-radius);
}

.header--app .header__search-wrap {
  margin: 4px 12px 0;
}

.header--search-page,
.header--tab {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 0 16px 10px;
}

.header--search-page .header__title,
.header--tab .header__title,
.header--sub .header__title {
  max-width: calc(100% - 96px);
  font-size: var(--benew-fs-xl);
  font-weight: 600;
  color: var(--benew-ink);
}

.header__search-wrap {
  overflow: hidden;
  max-height: 52px;
  margin-top: 8px;
  opacity: 1;
  transition:
    max-height 0.28s ease,
    margin 0.28s ease,
    opacity 0.2s ease;
}

.header--search-hidden .header__search-wrap {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
}

.header__search-form {
  width: 100%;
}

.header__search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: var(--benew-fs-md);
  line-height: 1;
  color: var(--benew-text-weaker);
  text-align: left;
  background: var(--benew-surface-shade);
  border: 0;
  border-radius: var(--benew-radius-md);
}

.header__search-submit {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
}

.header__search-trigger-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.header__search-input {
  flex: 1;
  min-width: 0 !important;
  max-width: 100%;
  height: 100%;
  padding: 0;
  font-size: var(--benew-fs-xl);
  line-height: 1.2;
  color: var(--benew-ink);
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.header--sub .header__search-input,
.header--search-page .header__search-input,
.header--tab .header__search-input {
  font-size: var(--benew-fs-xl);
}

.header__search-input::placeholder {
  font-size: var(--benew-fs-xl);
  color: var(--benew-text-weaker);
}

.header__search-input::-webkit-search-decoration,
.header__search-input::-webkit-search-cancel-button,
.header__search-input::-webkit-search-results-button,
.header__search-input::-webkit-search-results-decoration {
  display: none;
}

.page__content.site {
  position: relative;
}

.header.header--search-open {
  position: fixed;
  top: 0;
  left: var(--search-overlay-left, 0px);
  z-index: 160;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  width: var(--search-overlay-w, 100%);
  max-width: var(--mall-width);
  height: var(--search-overlay-h, 100dvh);
  min-height: 0;
  margin: 0;
  padding: 8px 16px 0;
  overflow: hidden;
  background: var(--benew-white);
}

.header.header--app.header--search-open {
  position: relative;
  top: auto;
  left: auto;
  z-index: 160;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 4px 10px;
  overflow: visible;
}

.header--app.header--search-open .search-discover {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 155;
  flex: none;
  height: calc(100dvh - 100% - 88px);
  min-height: 0;
}

.header--search-open .header__search-wrap,
.header--app.header--search-open .header__search-wrap {
  display: block;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 4px 12px 0;
  padding: 0;
  overflow: visible;
}

.search-overlay__bar .header__search-form,
.header--search-open .header__search-form {
  width: 100%;
}

.header__search-cancel {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 0 2px;
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--benew-ink);
  white-space: nowrap;
  background: transparent;
  border: 0;
}

.search-overlay {
  position: absolute;
  inset: 0;
  z-index: 140;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--benew-white);
}

.search-overlay__bar,
.header--search-open .header__search-wrap {
  flex: 0 0 auto;
}

.search-overlay__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.search-overlay__cancel {
  flex: 0 0 auto;
  flex-shrink: 0;
  padding: 0;
  font-size: var(--benew-fs-lg);
  line-height: 1;
  color: var(--benew-ink);
  white-space: nowrap;
  background: transparent;
  border: 0;
}

.search-discover {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 8px 0 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  background: var(--benew-white);
  -webkit-overflow-scrolling: touch;
}

.search-discover__section + .search-discover__section {
  margin-top: 8px;
}

.search-discover__title {
  margin: 16px 16px 12px;
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--benew-ink);
}

.search-discover__products {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 16px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.search-discover__product {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  padding: 0;
  background: transparent;
  border: 0;
}

.search-discover__product-btn {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
}

.search-discover__product-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: var(--benew-fs-md);
  line-height: 1;
  color: var(--benew-white);
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  border-radius: 50%;
}

.search-discover__thumb,
.search-discover__thumb .thumb-item,
.search-discover__thumb .thumb-item__img,
.search-discover__thumb img {
  width: 88px;
  height: 88px;
}

.search-discover__thumb {
  display: block;
  overflow: hidden;
  background: var(--benew-surface-shade);
  border-radius: var(--benew-radius-xs);
}

.search-discover__thumb .thumb-item__info {
  display: none;
}

.search-discover__suggest {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-discover__suggest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: transparent;
  border: 0;
}

.search-discover__suggest-thumb,
.search-discover__suggest-thumb .thumb-item,
.search-discover__suggest-thumb .thumb-item__img,
.search-discover__suggest-thumb img {
  width: 56px;
  height: 56px;
}

.search-discover__suggest-thumb {
  flex: 0 0 56px;
  overflow: hidden;
  background: var(--benew-surface-shade);
  border-radius: var(--benew-radius-sm);
}

.search-discover__suggest-thumb .thumb-item__info {
  display: none;
}

.search-discover__suggest-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.search-discover__suggest-text em {
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-xs);
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
}

.search-discover__suggest-text strong {
  overflow: hidden;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-discover__brand-mark {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-md);
  font-weight: 700;
  line-height: 1;
  background: var(--benew-divider);
  border-radius: 50%;
}

.search-discover__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-discover__list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--benew-border-light);
}

.search-discover__row {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  font-size: var(--benew-fs-lg);
  line-height: 1.3;
  color: var(--benew-ink);
  text-align: left;
  background: transparent;
  border: 0;
}

.search-discover__clock {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--benew-text-weaker);
}

.search-discover__empty {
  margin: 0 16px 8px;
  font-size: var(--benew-fs-md);
  line-height: 1.4;
  color: var(--benew-text-weaker);
}

.search-discover__remove {
  flex: 0 0 auto;
  padding: 16px;
  font-size: var(--benew-fs-2xl);
  line-height: 1;
  color: var(--benew-text-disabled);
  background: transparent;
  border: 0;
}

.search-discover {
  padding-top: 0;
}

.search-hub {
  padding-bottom: 0;
}

.category-tree {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 160px);
  background: var(--benew-white);
}

.category-tree__nav {
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  width: 96px;
  background: var(--benew-surface-tone);
}

.category-tree__nav-btn {
  min-height: 52px;
  padding: 14px 8px;
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--benew-text-weaker);
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-tree__nav-btn.is-active {
  font-weight: 700;
  color: var(--benew-ink);
  background: var(--benew-white);
}

.category-tree__panel {
  flex: 1;
  min-width: 0;
  padding: 0 0 24px;
  background: var(--benew-white);
}

.category-tree__all,
.category-tree__group-btn,
.category-tree__group-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 16px;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--benew-ink);
  text-align: left;
  text-decoration: none;
  background: var(--benew-white);
  border: 0;
  border-bottom: 1px solid var(--benew-border-light);
  cursor: pointer;
}

.category-tree__all {
  font-weight: 500;
}

.category-tree__group-btn.is-open {
  border-bottom-color: transparent;
}

.category-tree__arrow {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid var(--benew-text-weaker);
  border-bottom: 1.5px solid var(--benew-text-weaker);
  transform: rotate(45deg);
}

.category-tree__group-btn.is-open .category-tree__arrow {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.category-tree__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  padding: 0 8px 8px 16px;
  list-style: none;
  border-bottom: 1px solid var(--benew-border-light);
}

.category-tree__grid-link {
  display: block;
  padding: 10px 8px 10px 0;
  font-size: var(--benew-fs-sm);
  line-height: 1.35;
  color: var(--benew-ink);
  text-decoration: none;
}

.category-tree__grid-link.is-sale,
.category-tree__group-link.is-sale,
.category-tree__group-btn .is-sale {
  color: var(--point-color);
}

.category-tree__empty {
  margin: 24px 16px;
  font-size: var(--benew-fs-md);
  line-height: 1.4;
  color: var(--benew-text-weaker);
}

.search-hub__tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--benew-border-light);
}

.search-hub__tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 4px 12px;
  font-size: var(--benew-fs-md);
  font-weight: 600;
  line-height: 1.2;
  color: var(--benew-text-weaker);
  letter-spacing: 0.04em;
  text-align: center;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
}

.search-hub__tab.is-active {
  color: var(--benew-ink);
  border-bottom-color: var(--point-color);
}

.search-hub__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-hub__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px;
  font-size: var(--benew-fs-lg);
  line-height: 1.3;
  color: var(--benew-ink);
  text-decoration: none;
  background: var(--benew-white);
  border-bottom: 1px solid var(--benew-border-light);
}

.search-hub__item--sale {
  font-weight: 600;
  color: var(--point-color);
}

.search-hub__chevron {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.search-hub__empty {
  margin: 24px 16px;
  font-size: var(--benew-fs-md);
  line-height: 1.4;
  color: var(--benew-text-weaker);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  column-gap: 20px;
  row-gap: 8px;
  margin: 16px 0 20px;
}

.footer__nav > div {
  flex: 0 0 auto;
  margin-right: 0 !important;
}

.footer__nav .footer__link {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--benew-fs-xs);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  border-left: 0 !important;
}

.footer__extra-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 20px;
  text-align: left;
}

.footer__extra-logo img {
  display: block;
  height: 60px;
  width: auto;
}

.footer__escrow-logo {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.page__content.site:has(.search-hub) .footer {
  display: none;
}

.page__content.site.is-search-open {
  min-height: 0;
}

.page__content.site.is-search-open .fab-top-down {
  display: none !important;
}

.hero,
.product-section {
  overflow-x: clip;
  overflow-y: visible;
}

@media (max-width: 500px) {
  .page,
  .page-inner,
  .page__content,
  .page__content.site {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible;
  }
}

html.is-search-open,
body.is-search-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* 샵바이 Portal이 넣는 prevent-scroll(overflow hidden)이 스크롤 컨테이너를 바꿔 화면이 밀림 */
html:has(body.prevent-scroll),
body.prevent-scroll,
html.is-layer-open,
body.is-layer-open {
  overflow: visible !important;
}

html.is-modal-lock,
html.is-modal-lock:has(body.prevent-scroll),
html.is-modal-lock:has(body.is-layer-open),
body.is-modal-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.is-search-open .search-discover {
  touch-action: pan-y;
}

/* 메인 히어로: 스켈레톤이 이미지와 세로로 쌓여 흰 공간이 생기는 것 방지 */
.hero {
  overflow: hidden;
}

.hero .swiper-slide {
  position: relative;
}

.custom-banner,
.hero .swiper-slide a {
  display: block;
  position: relative;
}

.custom-banner img,
.hero img {
  display: block;
  width: 100%;
  height: auto;
}

.custom-banner__skeleton,
.hero .skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.custom-banner__skeleton .skeleton,
.custom-banner__skeleton .skeleton__media,
.hero .skeleton__media {
  width: 100%;
  height: 100%;
}

/* 하단 5탭 */
.bottom-nav {
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav__link::before,
.bottom-nav__link:not(:first-child)::before {
  display: none;
  width: 0;
  height: 0;
  content: none;
}

.bottom-nav__home {
  margin-top: 0;
}

.bottom-nav__link {
  gap: 4px;
  justify-content: center;
  color: var(--benew-ink);
}

.bottom-nav__link.is-active {
  color: var(--point-color);
  font-weight: 600;
}

.bottom-nav__icon,
.bottom-nav__link svg {
  display: block;
  width: 22px;
  height: 22px;
}

.bottom-nav__icon--home {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url(https://storefront.cdn-nhncommerce.com/copy/mall-81966/benew2643-7175/home-icon..png?244fff80b4a93f9b1e11) center / contain no-repeat;
  mask: url(https://storefront.cdn-nhncommerce.com/copy/mall-81966/benew2643-7175/home-icon..png?244fff80b4a93f9b1e11) center / contain no-repeat;
}

.bottom-nav__label {
  margin-top: 0;
  font-size: var(--benew-fs-3xs);
  line-height: 1.2;
  white-space: nowrap;
}

.page .bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  width: 100%;
  max-width: var(--mall-width);
  margin-left: auto;
  margin-right: auto;
  /* iOS는 fixed + transform이면 뷰포트가 아니라 문서를 따라간다 */
  transform: none;
}

html.is-search-open .page .bottom-nav,
body.is-search-open .page .bottom-nav {
  z-index: 170;
}

.product-summary {
  padding: 24px 20px 0;
}

.product-summary--loading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-summary__placeholder {
  display: block;
  border-radius: var(--benew-radius-sm);
  background: linear-gradient(
    90deg,
    var(--benew-surface-shade) 25%,
    var(--benew-border-faint) 37%,
    var(--benew-surface-shade) 63%
  );
  background-size: 400% 100%;
  animation: product-summary-shimmer 1.4s ease-in-out infinite;
}

.product-summary__placeholder--brand {
  width: 120px;
  height: 27px;
}

.product-summary__placeholder--title {
  width: 78%;
  height: 21px;
}

.product-summary__placeholder--price {
  width: 148px;
  height: 30px;
  margin-top: 8px;
}

@keyframes product-summary-shimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.product-summary__brand-name {
  display: inline-block;
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-4xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.product-summary__title {
  margin: 8px 0 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 400;
  line-height: 1.4;
}

.product-summary__title .editor {
  margin: 0;
  font: inherit;
}

.product-summary__price-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 16px;
}

.product-summary__price-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 10px;
  width: 100%;
}

.product-summary__price-detail {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.product-summary__price-detail.is-discounted {
  align-items: flex-end;
}

.product-summary__price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--benew-fs-5xl);
  font-weight: 600;
  line-height: 26px;
  color: var(--default-font-color);
}

.product-summary__price {
  margin: 0;
  font-size: var(--benew-fs-5xl);
  font-weight: 600;
  line-height: 26px;
}

.product-summary__price span {
  margin-left: 4px;
  font-size: var(--benew-fs-2xl);
  font-weight: 400;
  vertical-align: middle;
}

.product-summary__original-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 2px -8px;
  color: var(--benew-text-faint);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: line-through;
}

.product-summary__duty {
  margin: 0;
  color: var(--benew-text-muted);
  font-size: var(--benew-fs-sm);
  line-height: 1.3;
}

.product-summary__coupon-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.product-summary__coupon-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 14px;
  border: 0;
  border-radius: var(--benew-radius-lg);
  background: var(--benew-danger-bg);
  color: var(--point-color);
  cursor: pointer;
}

.product-summary__coupon-line-left,
.product-summary__coupon-line-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.product-summary__coupon-line-amount {
  flex: 0 0 auto;
  color: var(--point-color);
  font-size: var(--benew-fs-sm);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.product-summary__coupon-line-name {
  overflow: hidden;
  color: var(--point-color);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-summary__coupon-line-right {
  flex: 0 0 auto;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  letter-spacing: -0.2px;
}

.product-summary__coupon-line-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.product-summary__coupon-unissuable {
  margin: 0;
  color: var(--benew-text-faint);
  font-size: var(--benew-fs-xs);
  line-height: 1.3;
}

.product-summary__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--benew-border-light);
}

.product-summary__meta-line {
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  line-height: 1.4;
}

.product-summary__meta-sep {
  margin: 0 6px;
  color: var(--benew-border-mid);
}

.product-summary__eta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
}

.product-summary__eta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.product-summary__eta-label {
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-sm);
  line-height: 1.4;
}

.product-summary__eta-date {
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 700;
  line-height: 1.4;
}

.product-summary__eta-hint {
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-sm);
  line-height: 1.4;
}

/* 샵바이 기본이 margin-top: 10px 을 줘서 위 .product-summary__meta 의 아래 여백(14px)에
   10px 이 더 붙어 구분선 간격이 위(14px)와 어긋난다. 리듬은 14px 하나로 통일한다. */
.product-summary__point {
  margin-top: 0;
  border-top: 1px solid var(--benew-border-light);
}

.product-summary__point-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.product-summary__point-text {
  flex: 1;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  text-align: left;
}

.product-summary__point-arrow {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--benew-text-faint);
  border-right: 1.5px solid var(--benew-text-faint);
  transform: rotate(45deg);
}

.portal:has(.accumulation-modal) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 300;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.portal:has(.accumulation-modal) .dim {
  position: absolute;
  inset: 0;
  background-color: var(--benew-dim);
}

.modal.accumulation-modal,
.accumulation-modal {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: min(360px, 100%) !important;
  min-width: 0 !important;
  max-width: 360px !important;
  height: auto !important;
  max-height: min(
    72dvh,
    calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
  ) !important;
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  transform: none !important;
}

.accumulation-modal .title-modal {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  height: auto !important;
}

.accumulation-modal .title-modal__header {
  height: 52px;
  padding: 0;
  border-bottom: 1px solid var(--benew-divider);
}

.accumulation-modal .title-modal__title {
  height: auto;
  padding: 0 40px;
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.accumulation-modal .title-modal__close-btn {
  right: 16px;
}

.accumulation-modal .title-modal__content {
  height: auto !important;
  min-width: 0 !important;
  margin: 0;
  padding: 14px 16px 16px;
  background: var(--benew-white);
}

.accumulation-modal__text {
  margin: 0;
  padding: 12px 14px;
  color: var(--benew-ink-600);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.2px;
  background: var(--benew-surface-sub);
  border-radius: var(--benew-radius-lg);
}

.portal:has(.discount-price-modal) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 300;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.portal:has(.discount-price-modal) .dim {
  position: absolute;
  inset: 0;
  background-color: var(--benew-dim);
}

.discount-price-modal {
  width: min(360px, 100%);
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

.discount-price-modal .title-modal__header {
  height: 56px;
  padding: 0;
  border-bottom: 1px solid var(--benew-divider);
}

.discount-price-modal .title-modal__title {
  height: auto;
  padding: 0 40px;
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.discount-price-modal .title-modal__close-btn {
  right: 16px;
}

.discount-price-modal .title-modal__content {
  height: auto;
  margin: 0;
  padding: 16px 16px 18px;
  background: var(--benew-white);
}

.discount-price-modal .discount-price-information {
  min-width: 0;
  height: auto;
}

.discount-price-modal .discount-price-information__detail {
  margin: 0;
  padding: 0;
  list-style: none;
}

.discount-price-modal .discount-price-information__detail li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  color: var(--benew-ink-700);
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.discount-price-modal .discount-price-information__detail li p {
  margin: 0;
}

.discount-price-modal .discount-price-information__detail li p:last-child {
  color: var(--benew-ink-deep);
  font-weight: 600;
}

.discount-price-modal .discount-price-information__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--benew-border-card);
  color: var(--point-color);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.discount-price-modal .discount-price-information__total p {
  margin: 0;
}

.discount-price-modal .discount-price-information__description {
  margin: 14px 0 0;
  padding: 12px 14px;
  list-style: none;
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.2px;
  background: var(--benew-surface-sub);
  border-radius: var(--benew-radius-lg);
}

.discount-price-modal .discount-price-information__description li + li {
  margin-top: 4px;
}

.portal:has(.coupon-download-modal),
.portal:has(.coupon-modal),
.portal:has(.search-zip-modal),
.portal:has(#search-zip),
.portal:has(.product-inquiry-modal) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 300;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.portal:has(.coupon-download-modal) .dim,
.portal:has(.coupon-modal) .dim,
.portal:has(.search-zip-modal) .dim,
.portal:has(#search-zip) .dim,
.portal:has(.product-inquiry-modal) .dim {
  position: absolute;
  inset: 0;
  background-color: var(--benew-dim);
}

.coupon-download-modal {
  width: min(360px, 100%);
  max-height: min(72dvh, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

.coupon-download-modal .title-modal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  max-height: min(72dvh, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

.coupon-download-modal .title-modal__header {
  flex: 0 0 auto;
  height: 56px;
  padding: 0;
  border-bottom: 1px solid var(--benew-divider);
}

.coupon-download-modal .title-modal__title {
  height: auto;
  padding: 0 40px;
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.coupon-download-modal .title-modal__close-btn {
  right: 16px;
}

.coupon-download-modal .title-modal__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 14px 16px 16px;
  overflow: auto;
  background: var(--benew-white);
}

.coupon-download-modal .coupons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.coupon-download-modal .coupon__wrap + .coupon__wrap {
  margin-top: 0;
}

.coupon-download-modal .coupon {
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-lg);
  box-shadow: none;
}

.coupon-download-modal .coupon::before,
.coupon-download-modal .coupon::after {
  display: none;
}

.coupon-download-modal .coupon__summary {
  width: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.coupon-download-modal .coupon__discount,
.coupon-download-modal .coupons .coupon__discount-information {
  font-size: var(--benew-fs-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.coupon-download-modal .coupon__discount-label,
.coupon-download-modal .coupon__title {
  display: block;
  overflow: hidden;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-download-modal .coupon__description,
.coupon-download-modal .coupon__wrap__constraint,
.coupon-download-modal .coupon p {
  margin: 2px 0 0;
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--benew-ink-500);
}

.coupon-download-modal .coupon .ico--download-red,
.coupon-download-modal .coupon .ico--download-gray {
  display: block;
  width: 16px;
  height: 16px;
  background: none !important;
  background-image: none !important;
}

.coupon-download-modal .coupon .ico--download-red::before,
.coupon-download-modal .coupon .ico--download-gray::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--point-color);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27black%27 d=%27M7.4 2h1.2v7.1l2-2 .9.9L8 11.4 4.5 7.9l.9-.9 2 2V2zm-4 10.6h9v1.2h-9z%27/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27black%27 d=%27M7.4 2h1.2v7.1l2-2 .9.9L8 11.4 4.5 7.9l.9-.9 2 2V2zm-4 10.6h9v1.2h-9z%27/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.coupon-download-modal .coupon .ico--download-gray::before {
  background-color: var(--benew-border-dashed);
}

.coupon-download-modal .coupons__download-btn {
  position: static;
  z-index: auto;
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: var(--benew-radius-lg);
  color: var(--benew-white);
  font-size: var(--benew-fs-md);
  font-weight: 600;
  line-height: 1.3;
  background: var(--point-color);
}

.coupon-download-modal .coupons__download-btn.disabled {
  color: var(--benew-white);
  background: var(--benew-border-dashed);
}

.modal.coupon-modal,
.modal.search-zip-modal,
.modal#search-zip,
.modal.product-inquiry-modal {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: flex;
  flex-direction: column;
  width: min(360px, 100%) !important;
  min-width: 0 !important;
  max-width: 360px !important;
  height: auto !important;
  max-height: min(
    72dvh,
    calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
  ) !important;
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  transform: none !important;
}

.modal.coupon-modal .title-modal,
.modal.search-zip-modal .title-modal,
.modal#search-zip .title-modal,
.modal.product-inquiry-modal .title-modal,
.modal.coupon-modal .title-modal--full,
.modal.search-zip-modal .title-modal--full,
.modal#search-zip .title-modal--full,
.modal.product-inquiry-modal .title-modal--full {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(
    72dvh,
    calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
  ) !important;
  margin: 0;
  background: var(--benew-white);
}

.modal.product-inquiry-modal {
  width: min(400px, 100%) !important;
  max-width: 400px !important;
  max-height: min(
    80dvh,
    calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
  ) !important;
}

.modal.product-inquiry-modal .title-modal,
.modal.product-inquiry-modal .title-modal--full {
  max-height: min(
    80dvh,
    calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
  ) !important;
}

.coupon-modal .title-modal__header,
.search-zip-modal .title-modal__header,
#search-zip .title-modal__header,
.product-inquiry-modal .title-modal__header {
  flex: 0 0 auto;
  height: 52px;
  padding: 0;
  border-bottom: 1px solid var(--benew-divider);
}

.coupon-modal .title-modal__title,
.search-zip-modal .title-modal__title,
#search-zip .title-modal__title,
.product-inquiry-modal .title-modal__title {
  height: auto;
  padding: 0 40px;
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.search-zip-modal .title-modal__close-btn,
#search-zip .title-modal__close-btn,
.product-inquiry-modal .title-modal__close-btn {
  right: 16px;
}

.coupon-modal .title-modal__close-btn {
  right: 12px;
  width: 28px;
  height: 28px;
  opacity: 0.7;
}

.coupon-modal .title-modal__close-btn .ico,
.coupon-modal .title-modal__close-btn .ico--x-black {
  position: relative;
  width: 14px;
  height: 14px;
  background: none !important;
  background-image: none !important;
}

.coupon-modal .title-modal__close-btn .ico--x-black::before,
.coupon-modal .title-modal__close-btn .ico--x-black::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: var(--benew-ink-deep);
  content: '';
}

.coupon-modal .title-modal__close-btn .ico--x-black::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.coupon-modal .title-modal__close-btn .ico--x-black::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.coupon-modal .title-modal__content,
.search-zip-modal .title-modal__content,
#search-zip .title-modal__content,
.product-inquiry-modal .title-modal__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0;
  padding: 0;
  overflow: auto;
  background: var(--benew-white);
}

.coupon-modal .coupon-modal__summary-total,
.coupon-modal__summary-total {
  margin: 12px 0 !important;
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
  text-align: right;
}

.coupon-modal__summary-total em {
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-md);
  font-weight: 700;
  font-style: normal;
}

.coupon-modal__details {
  position: static !important;
  width: 100%;
  height: auto !important;
  overflow: visible;
  background: var(--benew-white);
}

.coupon-modal__coupon-details {
  padding: 12px 16px 16px;
  background: var(--benew-white);
}

.coupon-modal__coupon-section {
  margin: 0;
}

.coupon-modal .coupon-modal__coupon-section > *:not(.coupon-modal__summary-total),
.coupon-modal__coupon-section > *:not(.coupon-modal__summary-total) {
  margin-top: 0 !important;
}

.coupon-modal__coupon-section + .coupon-modal__coupon-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--benew-border-card);
}

.coupon-modal__coupon-type {
  margin: 0 0 4px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.coupon-modal__coupon-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coupon-modal__coupon-note {
  margin: 0;
  padding: 0;
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.coupon-modal__coupon-note::before {
  content: '· ';
}

.coupon-modal__product {
  margin: 0;
  padding: 0;
}

.coupon-modal .coupon-modal__controller,
.coupon-modal__controller {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  flex: none;
  gap: 6px !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: 138px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--benew-placeholder) transparent;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-light);
  border-radius: var(--benew-radius-sm);
}

.coupon-modal .coupon-modal__controller::-webkit-scrollbar,
.coupon-modal__controller::-webkit-scrollbar {
  width: 6px;
}

.coupon-modal .coupon-modal__controller::-webkit-scrollbar-thumb,
.coupon-modal__controller::-webkit-scrollbar-thumb {
  background: var(--benew-placeholder);
  border-radius: var(--benew-radius);
}

.coupon-modal .coupon-modal__controller-item,
.coupon-modal .coupon-modal__controller-item--none,
.coupon-modal__controller-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0;
  padding: 0 12px !important;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  background: var(--benew-white);
  border: 0;
  border-bottom: 1px solid var(--benew-border-light);
  border-radius: 0;
  appearance: none;
  cursor: pointer;
}

.coupon-modal__controller-item:last-child {
  border-bottom: 0;
}

.coupon-modal__controller-item.is-selected {
  background: var(--benew-surface-muted);
}

.coupon-modal__controller-item--none.is-selected .coupon-modal__coupon-name--none {
  color: var(--benew-text-muted);
}

.coupon-modal__coupon-name {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.coupon-modal__coupon-name--none {
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
}

.coupon-modal__date {
  color: var(--benew-text-faint);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
}

.coupon-modal__coupon-amount {
  flex: 0 0 auto;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-align: right;
  white-space: nowrap;
}

.coupon-modal__apply-btn.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin: 0 !important;
  padding: 0;
  color: var(--benew-white) !important;
  font-size: var(--benew-fs-md);
  font-weight: 600;
  line-height: 1;
  background: var(--point-color) !important;
  border: 0 !important;
  border-radius: var(--benew-radius-lg);
}

.coupon-modal__info {
  margin: 0;
  padding: 12px 16px 16px;
  background: var(--benew-surface-sub);
  border-top: 0;
}

.coupon-modal__info .info-list__title {
  margin: 0 0 8px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.coupon-modal__info .info-list__items {
  margin: 0;
  padding: 0;
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-xs);
  line-height: 1.5;
  letter-spacing: -0.2px;
  list-style: none;
}

.coupon-modal__info .info-list__items li {
  position: relative;
  padding-left: 10px;
}

.coupon-modal__info .info-list__items li + li {
  margin-top: 4px;
}

.coupon-modal__info .info-list__items li::before {
  position: absolute;
  left: 0;
  content: '·';
}

.search-zip-modal .search-zip-code-form,
#search-zip .search-zip-code-form {
  height: auto !important;
}

.search-zip-modal .search-zip-code-form__search,
#search-zip .search-zip-code-form__search {
  height: auto !important;
  padding: 14px 16px 10px;
  background: var(--benew-white);
}

.search-zip-modal .search-zip-code-form__search .search-field .text-field,
#search-zip .search-zip-code-form__search .search-field .text-field {
  height: 40px;
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-md);
}

.search-zip-modal .search-zip-code-form__search-tip,
#search-zip .search-zip-code-form__search-tip {
  font-size: var(--benew-fs-2xs);
  line-height: 1.4;
}

.search-zip-modal .search-zip-code-form__tip-tit,
#search-zip .search-zip-code-form__tip-tit {
  margin: 0 16px 8px;
  padding-bottom: 8px;
  font-size: var(--benew-fs-md);
}

.search-zip-modal .search-zip-code-form__tip-list,
#search-zip .search-zip-code-form__tip-list {
  padding: 0 16px 16px 32px;
  font-size: var(--benew-fs-sm);
  line-height: 1.55;
}

.search-zip-modal .search-zip-code-form__tip-empty,
#search-zip .search-zip-code-form__tip-empty {
  padding: 16px;
  font-size: var(--benew-fs-sm);
}

.search-zip-modal .search-zip-code-form__items,
#search-zip .search-zip-code-form__items {
  height: auto !important;
  max-height: min(36dvh, 280px);
  padding: 0 16px 16px;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .modal.search-zip-modal,
  .modal#search-zip,
  .modal.coupon-modal {
    height: min(
      90dvh,
      calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
    ) !important;
    max-height: min(
      90dvh,
      calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
    ) !important;
  }

  .modal.search-zip-modal .title-modal,
  .modal.search-zip-modal .title-modal--full,
  .modal#search-zip .title-modal,
  .modal#search-zip .title-modal--full,
  .modal.coupon-modal .title-modal,
  .modal.coupon-modal .title-modal--full {
    height: 100% !important;
    max-height: none !important;
  }

  .search-zip-modal .title-modal__content,
  #search-zip .title-modal__content {
    overflow: hidden;
  }

  .search-zip-modal .search-zip-code-form,
  #search-zip .search-zip-code-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
  }

  .search-zip-modal .search-zip-code-form__items,
  #search-zip .search-zip-code-form__items,
  .search-zip-modal .search-zip-code-form__tip-list,
  #search-zip .search-zip-code-form__tip-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
}

@media (min-width: 768px) {
  .modal.search-zip-modal,
  .modal#search-zip,
  .modal.coupon-modal {
    width: min(480px, calc(100vw - 48px)) !important;
    max-width: 480px !important;
    height: min(80dvh, calc(100dvh - 48px)) !important;
    max-height: min(80dvh, calc(100dvh - 48px)) !important;
  }

  .modal.search-zip-modal .title-modal,
  .modal.search-zip-modal .title-modal--full,
  .modal#search-zip .title-modal,
  .modal#search-zip .title-modal--full,
  .modal.coupon-modal .title-modal,
  .modal.coupon-modal .title-modal--full {
    height: 100% !important;
    max-height: none !important;
  }

  .search-zip-modal .title-modal__content,
  #search-zip .title-modal__content {
    overflow: hidden;
  }

  .search-zip-modal .search-zip-code-form,
  #search-zip .search-zip-code-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
  }

  .search-zip-modal .search-zip-code-form__items,
  #search-zip .search-zip-code-form__items,
  .search-zip-modal .search-zip-code-form__tip-list,
  #search-zip .search-zip-code-form__tip-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
}

.product-detail > .product-summary + * {
  margin-top: 0;
}

/* PRODUCT INFO — 카드 박스를 걷어낸 세로 문서.
   라벨을 왼쪽 96px 로 고정하고 값을 오른쪽에 붙이던 2단 flex 행을,
   라벨 위 / 값 아래의 세로 스택으로 바꾼다. 긴 값이 좁은 칸에서 접히지 않는다. */
/* ----------------------------------------------------------------------------
   PRODUCT INFO — 상품 스펙표. benew-doc 카드와 같은 결(흰 카드 + 세로 강조바).
   라벨/값은 96px 고정 열 + 나머지 폭으로 나눈다. 스펙표는 좌우로 읽는 게
   훑기 쉬워서 여기만 2열을 쓴다. 안내·공지 영역은 계속 세로 문서다.
   ------------------------------------------------------------------------- */
.editor .product-info-card,
.product-info-card {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto var(--benew-space-2xl);
  padding: var(--benew-space-xl);
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-xl);
  box-shadow: var(--benew-shadow-card);
  color: var(--benew-ink-700);
  font-size: var(--benew-fs-sm);
  line-height: var(--benew-lh-base);
  letter-spacing: var(--benew-ls-base);
}

.editor .product-info-card__title,
.product-info-card__title {
  display: flex;
  align-items: center;
  gap: var(--benew-space-xs);
  margin: 0 0 var(--benew-space-md);
  padding: 0 0 var(--benew-space-sm);
  border-bottom: 1px solid var(--benew-divider);
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-md);
  font-weight: 700;
  line-height: var(--benew-lh-heading);
  letter-spacing: var(--benew-ls-base);
  text-transform: none;
}

/* 제목 앞 세로 강조바 (.benew-doc__title::before 와 같은 모양).
   .product-content__editor-box :not(iframe) 의 width: auto !important 가 width 를 덮으므로
   flex-basis 와 min/max-width 로 폭을 고정한다. (스와치와 같은 회피법) */
.editor .product-info-card__bar,
.product-info-card__bar {
  flex: 0 0 4px;
  display: inline-block;
  min-width: 4px;
  max-width: 4px;
  height: 13px;
  background: var(--benew-ink-deep);
  border-radius: var(--benew-radius-xs);
}

.editor .product-info-card__sub,
.product-info-card__sub {
  display: inline;
  margin: 0 0 0 var(--benew-space-3xs);
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  letter-spacing: var(--benew-ls-base);
  text-transform: none;
}

.editor .product-info-card__list,
.product-info-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--benew-fs-sm);
}

.editor .product-info-card__row,
.product-info-card__row {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: var(--benew-space-xs) 0;
  border-bottom: 1px solid var(--benew-surface-sub);
  list-style: none;
}

.editor .product-info-card__row:last-child,
.product-info-card__row:last-child {
  border-bottom: 0;
}

.editor .product-info-card__label,
.product-info-card__label {
  flex: 0 0 calc(6 * var(--benew-root)); /* 96px */
  width: calc(6 * var(--benew-root));
  margin: 0;
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  line-height: var(--benew-lh-base);
  letter-spacing: var(--benew-ls-base);
}

.editor .product-info-card__value,
.product-info-card__value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--benew-ink-800);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: var(--benew-lh-base);
  word-break: break-word;
}

.product-info-card__value--brand {
  color: var(--benew-ink-deep);
  font-weight: 600;
}

.editor .product-info-card__swatch,
.product-info-card__swatch {
  box-sizing: border-box;
  display: inline-block;
  /* .product-content__editor-box 의 width: auto !important 를 피하려고 min/max 로 고정한다 */
  min-width: 12px;
  max-width: 12px;
  height: 12px;
  margin: 0 6px 0 0;
  vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
}

.product-info-card__swatch.is-light {
  border-color: var(--benew-border-tone);
}

.product-info-card__swatch.is-multi {
  background: conic-gradient(#e11d48, #efc220, #2f8f4e, #2f6fed, #7a3ad8, #e11d48);
}

/* 색상명 뒤 물음표. 샵바이 에디터 박스가 width: auto !important 를 걸므로
   스와치·강조바와 같이 min/max-width 로 원을 고정한다. */
.editor .product-info-card__hint-btn,
.product-info-card__hint-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  max-width: 15px;
  height: 15px;
  position: relative;
  top: -1.5px; /* vertical-align: middle 만으로는 원 중심이 글자 중심보다 1.5px 내려간다 */
  margin: 0 0 0 var(--benew-space-2xs);
  padding: 0;
  vertical-align: middle;
  color: var(--benew-ink-400);
  /* button 은 폰트를 상속하지 않아 그냥 두면 ? 만 Arial 로 빠진다 */
  font-family: inherit;
  font-size: var(--benew-fs-2xs);
  font-weight: 600;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--benew-border-tone);
  border-radius: 50%;
  cursor: pointer;
}

.color-hint-modal__text {
  margin: 0;
  color: var(--benew-ink-700);
  font-size: var(--benew-fs-md);
  line-height: var(--benew-lh-base);
  letter-spacing: var(--benew-ls-base);
}

.product-content-shipping-claim {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}

.product-content-shipping-claim .editor ul {
  padding: 0;
  list-style: none;
}

.product-content-inquiry {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  color: var(--benew-ink-700);
  letter-spacing: -0.3px;
}

.product-content-inquiry .product-inquiry-summary {
  box-sizing: border-box;
  padding: 22px 20px;
  margin-bottom: 24px;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-xl);
  box-shadow: var(--benew-shadow-card);
  text-align: left;
}

.product-content-inquiry .product-inquiry-summary__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--benew-divider);
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-md);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.product-content-inquiry .product-inquiry-summary__title::before {
  content: '';
  display: inline-block;
  flex: 0 0 auto;
  width: 4px;
  height: 13px;
  background: var(--benew-ink-deep);
  border-radius: var(--benew-radius-xs);
}

.product-content-inquiry .product-inquiry-summary__sub {
  margin-left: 2px;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
}

.product-content-inquiry .product-inquiry-summary__description {
  margin: 0;
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-sm);
  line-height: 1.6;
  text-align: left;
  word-break: keep-all;
}

.product-content-inquiry .product-inquiry-summary__write-btn {
  width: 100%;
  height: 42px;
  margin: 16px 0 0;
  padding: 0;
  color: var(--benew-white);
  font-size: var(--benew-fs-sm);
  font-weight: 600;
  background: var(--benew-ink-deep);
  border: 0;
  border-radius: var(--benew-radius-md);
}

.product-content-inquiry .product-board-list {
  box-sizing: border-box;
  margin-bottom: 24px;
  padding: 22px 20px;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-xl);
  box-shadow: var(--benew-shadow-card);
}

.product-content-inquiry .product-board-list__search {
  display: flex;
  align-items: center;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--benew-divider);
}

.product-content-inquiry .product-board-list__search p {
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-sm);
  font-weight: 600;
}

.product-content-inquiry .product-board-list__total-count {
  margin-left: 4px;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
}

.product-content-inquiry .product-board-list__total-count em {
  margin-right: 2px;
  font-size: var(--benew-fs-sm);
  font-weight: 700;
}

.product-content-inquiry .product-board-list__empty {
  padding: 34px 0 36px;
}

.product-content-inquiry .product-board-list__empty-notes {
  padding: 6px 0 0;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
}

.product-content-inquiry .inquiry-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--benew-surface-sub);
}

.product-content-inquiry .inquiry-item:last-child {
  border-bottom: 0;
}

.product-content-inquiry .inquiry-item__top {
  margin-bottom: 6px;
}

.product-content-inquiry .inquiry-item__top .inquiry-item__info,
.product-content-inquiry .inquiry-item__top .inquiry-item__info p,
.product-content-inquiry .inquiry-item__top button,
.product-content-inquiry .inquiry-item__date {
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
}

.product-content-inquiry .inquiry-item__status-label {
  padding: 2px 8px;
  font-size: var(--benew-fs-2xs);
  font-weight: 700;
  border-radius: var(--benew-radius-sm);
}

.product-content-inquiry .inquiry-item__status-label--answered {
  color: var(--benew-info-text);
  background: var(--benew-info-bg);
  border: 1px solid var(--benew-info-border);
}

.product-content-inquiry .inquiry-item__status-label--ready {
  color: var(--benew-ink-700);
  background: var(--benew-surface-sub);
  border: 1px solid var(--benew-border-card);
}

.product-content-inquiry .inquiry-item__title {
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-sm);
  font-weight: 600;
}

.product-content-inquiry .inquiry-item__qna-text,
.product-content-inquiry .inquiry-item__qna-text .editor,
.product-content-inquiry .inquiry-item__qna-text p {
  color: var(--benew-ink-600);
  font-size: var(--benew-fs-sm);
  line-height: 1.6;
}

.product-content-inquiry .inquiry-item__text--answer {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--benew-surface-sub);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-md);
}

.product-content-inquiry .inquiry-item__text--answer .inquiry-item__date {
  display: block;
  margin-top: 6px;
}

.product-content-inquiry .board-form__buttons--small button {
  height: 30px;
  padding: 0 12px;
  color: var(--benew-ink-600);
  font-size: var(--benew-fs-xs);
  font-weight: 500;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius);
}

/* ============================================================================
   상품 상세 콘텐츠 컨테이너 — 여백 기준점
   ----------------------------------------------------------------------------
   오로라 원본은 .product-content__box 를 0.714rem/1.428rem 으로 잡는다. 그런데
   샵바이 common.css 의 html 폰트가 450px 에서 87.5% -> 100% 로 뒤집히기 때문에
   그 값이 10px/20px(모바일) -> 11.4px/22.9px(그 이상)로 저 혼자 널뛴다.
   기기와 무관하게 같은 여백이 되도록 토큰으로 고정한다.
   ============================================================================ */

.product-content__box {
  padding: var(--benew-space-md) var(--benew-page-pad-x);
}

/* 상품정보제공고시 · 인증정보 — 스킨 CSS 규칙이 없어 브라우저 기본에 의존하던 영역.
   어드민/패키지 CSS가 끼어들어 가로로 눕는 일이 없도록 세로 정렬을 명시한다. */
.product-content__title {
  margin: var(--benew-flow-gap) 0 var(--benew-space-lg);
  font-size: var(--benew-fs-2xl);
  font-weight: 700;
  line-height: var(--benew-lh-heading);
  letter-spacing: var(--benew-ls-wide);
  color: var(--benew-ink-deep);
  text-transform: uppercase;
}

.product-content__certification,
.product-content__certification dl,
.kc-info,
.kc-info dl,
.product-summary__reservation-info,
.product-summary__reservation-info dl {
  display: block;
  margin: 0;
  padding: 0;
}

.product-content__certification dt,
.kc-info dt,
.product-summary__reservation-info dt {
  display: block;
  margin: var(--benew-space-md) 0 var(--benew-space-2xs);
  font-size: var(--benew-fs-xs);
  font-weight: 500;
  line-height: var(--benew-lh-tight);
  letter-spacing: var(--benew-ls-wide);
  color: var(--benew-ink-400);
}

.product-content__certification dd,
.kc-info dd,
.product-summary__reservation-info dd {
  display: block;
  margin: 0;
  padding: 0 0 var(--benew-space-md);
  border-bottom: 1px solid var(--benew-divider);
  font-size: var(--benew-fs-md);
  line-height: var(--benew-lh-base);
  color: var(--benew-ink-800);
  word-break: break-word;
}

/* ============================================================================
   benew-doc — 상품 상세 안내 문서 (정품보증·필독·배송/교환·A/S·주의사항)
   ----------------------------------------------------------------------------
   비뉴럭스 자체 디자인. 흰 카드 + 다크 필 배지 + 컬러 태그로 위계를 만든다.
   세로 정렬 원칙은 유지한다: 카드는 위에서 아래로만 쌓고, 라벨/값이나 항목을
   좌우 2열로 나누지 않는다. (반품 제한 항목도 1열 세로 박스 리스트)

   .editor 접두 선택자를 함께 두는 이유: 샵바이 shopby-common.css 의
   `.editor ul { padding-left: 40px }` `.editor a { color: … }` 가 더 구체적이라
   그대로 두면 목록 들여쓰기와 링크 색이 덮인다.
   ========================================================================= */
.benew-doc {
  font-size: var(--benew-fs-sm);
  line-height: var(--benew-lh-base);
  letter-spacing: var(--benew-ls-base);
  color: var(--benew-ink-700);
}

/* 카드 한 장 = 주제 하나. 아래로만 쌓인다. */
.benew-doc__section {
  margin: 0 0 var(--benew-space-2xl);
  padding: var(--benew-space-xl);
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-xl);
  box-shadow: var(--benew-shadow-card);
}

.benew-doc__section:last-child {
  margin-bottom: 0;
}

/* 정품 보증 카드만 가운데 정렬 */
.benew-doc__section--hero {
  text-align: center;
}

/* 다크 필 배지 — 100% AUTHENTIC GUARANTEE */
.benew-doc__eyebrow {
  display: inline-block;
  margin: 0 0 var(--benew-space-md);
  padding: var(--benew-space-2xs) var(--benew-space-md);
  background: var(--benew-ink-deep);
  border-radius: var(--benew-radius-pill);
  font-size: var(--benew-fs-2xs);
  font-weight: 700;
  line-height: var(--benew-lh-tight);
  letter-spacing: var(--benew-ls-wide);
  color: var(--benew-surface-sub);
}

.benew-doc__headline {
  margin: 0 0 var(--benew-space-xs);
  font-size: var(--benew-fs-xl);
  font-weight: 700;
  line-height: var(--benew-lh-heading);
  color: var(--benew-ink-deep);
  word-break: keep-all;
}

.benew-doc__headline em {
  padding-bottom: 1px;
  border-bottom: 2px solid var(--benew-ink-deep);
  font-style: normal;
}

.benew-doc__lead {
  margin: 0 0 var(--benew-space-lg);
  font-size: var(--benew-fs-xs);
  line-height: var(--benew-lh-base);
  color: var(--benew-ink-500);
  word-break: keep-all;
}

/* 유통 유형 3종 박스 — 가운데 정렬 카드 안에서도 본문은 좌측 정렬 */
.editor .benew-doc__list,
.benew-doc__list {
  margin: 0 0 var(--benew-space-md);
  padding: var(--benew-space-lg);
  list-style: none;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-md);
  text-align: left;
}

.editor .benew-doc__item,
.benew-doc__item {
  margin: 0;
  padding: 0 0 var(--benew-space-md);
  border-bottom: 1px solid var(--benew-divider);
}

.benew-doc__item + .benew-doc__item {
  padding-top: var(--benew-space-md);
}

.benew-doc__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* 유통 유형 태그. 기본은 회색(중고 명품), 변형으로 파랑·빨강을 준다. */
.benew-doc__item-tag {
  display: inline-block;
  margin: 0 0 var(--benew-space-2xs);
  padding: var(--benew-space-3xs) var(--benew-space-xs);
  background: var(--benew-surface-sub);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-sm);
  font-size: var(--benew-fs-3xs);
  font-weight: 700;
  line-height: var(--benew-lh-tight);
  color: var(--benew-ink-700);
}

.benew-doc__item-tag--new {
  background: var(--benew-info-bg);
  border-color: var(--benew-info-border);
  color: var(--benew-info-ink);
}

.benew-doc__item-tag--warranty {
  background: var(--benew-warn-bg);
  border-color: var(--benew-warn-border);
  color: var(--benew-warn-ink);
}

.benew-doc__item-title {
  display: block;
  font-size: var(--benew-fs-sm);
  font-weight: 700;
  line-height: var(--benew-lh-heading);
  color: var(--benew-ink-deep);
  word-break: keep-all;
}

.benew-doc__item-desc {
  margin: var(--benew-space-3xs) 0 0;
  font-size: var(--benew-fs-xs);
  line-height: var(--benew-lh-base);
  color: var(--benew-ink-500);
  word-break: keep-all;
}

/* 감정 기관 각주 박스 */
.benew-doc__note {
  margin: 0 0 var(--benew-space-md);
  padding: var(--benew-space-md) var(--benew-space-lg);
  background: var(--benew-surface-sub);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-md);
  font-size: var(--benew-fs-2xs);
  line-height: var(--benew-lh-base);
  color: var(--benew-ink-500);
  text-align: left;
  word-break: keep-all;
}

/* 출처 링크 — 작은 박스 버튼. 카드가 아니라 버튼이므로 줄바꿈 허용. */
.editor .benew-doc__links,
.benew-doc__links {
  margin: var(--benew-space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.editor .benew-doc__links > li,
.benew-doc__links > li {
  display: inline-block;
  margin: 0 var(--benew-space-xs) var(--benew-space-xs) 0;
  padding: 0;
}

.editor .benew-doc a.benew-doc__link,
.benew-doc a.benew-doc__link {
  display: inline-block;
  padding: var(--benew-space-2xs) var(--benew-space-sm);
  background: var(--benew-white);
  border: 1px solid var(--benew-border-dashed);
  border-radius: var(--benew-radius-sm);
  font-size: var(--benew-fs-2xs);
  font-weight: 600;
  line-height: var(--benew-lh-tight);
  color: var(--benew-ink-800);
  text-decoration: none;
}

.benew-doc__sign {
  margin: var(--benew-space-md) 0 0;
  font-size: var(--benew-fs-2xs);
  line-height: var(--benew-lh-base);
  letter-spacing: var(--benew-ls-base);
  color: var(--benew-ink-400);
}

/* 섹션 제목 — 앞에 세로 강조바, 아래 헤어라인 */
.benew-doc__title {
  margin: 0 0 var(--benew-space-md);
  padding: 0 0 var(--benew-space-sm);
  border-bottom: 1px solid var(--benew-divider);
  font-size: var(--benew-fs-md);
  font-weight: 700;
  line-height: var(--benew-lh-heading);
  letter-spacing: var(--benew-ls-base);
  color: var(--benew-ink-deep);
}

.benew-doc__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.8em;
  margin-right: var(--benew-space-xs);
  background: var(--benew-ink-deep);
  border-radius: var(--benew-radius-xs);
  vertical-align: -0.04em;
}

.benew-doc__title-kr {
  margin-left: var(--benew-space-2xs);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  letter-spacing: var(--benew-ls-base);
  color: var(--benew-ink-400);
}

.benew-doc__subtitle {
  margin: var(--benew-space-lg) 0 var(--benew-space-md);
  font-size: var(--benew-fs-sm);
  font-weight: 700;
  line-height: var(--benew-lh-heading);
  letter-spacing: var(--benew-ls-base);
  color: var(--benew-ink-deep);
}

.benew-doc__subtitle::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.8em;
  margin-right: var(--benew-space-xs);
  background: var(--benew-ink-500);
  border-radius: var(--benew-radius-xs);
  vertical-align: -0.04em;
}

/* 불릿 목록 — 매달린 들여쓰기(hanging indent)로 두 번째 줄을 맞춘다. */
.editor .benew-doc__bullets,
.benew-doc__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--benew-fs-xs);
  line-height: var(--benew-lh-base);
  color: var(--benew-ink-600);
}

.editor .benew-doc__bullets > li,
.benew-doc__bullets > li {
  margin: 0 0 var(--benew-space-sm);
  padding-left: var(--benew-space-md);
  text-indent: calc(-1 * var(--benew-space-md));
  word-break: keep-all;
}

.benew-doc__bullets > li::before {
  content: '·';
  display: inline-block;
  width: var(--benew-space-md);
  font-weight: 700;
  color: var(--benew-ink-500);
  text-indent: 0;
}

.benew-doc__bullets > li:last-child {
  margin-bottom: 0;
}

.benew-doc__bullets strong {
  font-weight: 700;
  color: var(--benew-ink-deep);
}

/* 반품 제한 항목 — 원본은 2열 그리드였지만 세로 규칙에 맞춰 1열 박스로 편다. */
.editor .benew-doc__bullets--deny > li,
.benew-doc__bullets--deny > li {
  margin: 0 0 var(--benew-space-sm);
  padding: var(--benew-space-sm) var(--benew-space-md);
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius);
  text-indent: 0;
  color: var(--benew-ink-700);
}

/* 항목 아래 부연 설명 — 불릿의 매달린 들여쓰기를 물려받지 않게 초기화한다. */
.benew-doc__sub {
  display: block;
  margin: var(--benew-space-3xs) 0 0;
  padding-left: var(--benew-space-md);
  font-size: var(--benew-fs-xs);
  line-height: var(--benew-lh-base);
  color: var(--benew-ink-500);
  text-indent: 0;
  word-break: keep-all;
}

.benew-doc__sub--strong {
  font-weight: 500;
  color: var(--benew-ink-deep);
}

/* 고객만족센터 — 좌우 space-between 이 아니라 다크 박스 안 세로 스택 */
.benew-doc__cta {
  margin: var(--benew-space-lg) 0 0;
  padding: var(--benew-space-xl);
  background: var(--benew-ink-deep);
  border-radius: var(--benew-radius-xl);
  text-align: center;
}

.benew-doc__cta-label {
  display: block;
  margin: 0 0 var(--benew-space-2xs);
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  letter-spacing: var(--benew-ls-base);
  color: var(--benew-ink-400);
}

.editor .benew-doc a.benew-doc__cta-tel,
.benew-doc a.benew-doc__cta-tel {
  display: inline-block;
  font-size: var(--benew-fs-xl);
  font-weight: 800;
  line-height: var(--benew-lh-tight);
  letter-spacing: 0.03em;
  color: var(--benew-white);
  text-decoration: none;
}

.product-content__common-notice {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  color: var(--benew-ink-700);
  font-size: var(--benew-fs-sm);
  letter-spacing: var(--benew-ls-base);
  line-height: var(--benew-lh-base);
}

.product-content__gallery {
  width: 100%;
}

.product-content__gallery-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.product-content__gallery--collapsed .product-content__gallery-box {
  overflow: hidden;
}

.product-content__gallery-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.product-content__gallery-more,
.product-detail .product-content__content .product-content__more-btn {
  width: 100%;
  margin-top: 12px;
  background: transparent;
}

.product-content__gallery-more::before,
.product-detail .product-content__content .product-content__more-btn::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 50px;
  left: 0;
  height: 30px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), var(--benew-white));
}

.product-content__gallery--collapsed .product-content__gallery-more,
.product-detail .product-content__content.hidden .product-content__more-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin-top: 0;
}

.product-content__gallery-more button,
.product-detail .product-content__content .product-content__more-btn button {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 3.57143rem;
  color: var(--benew-ink);
  font-family: inherit;
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: 1.29;
  letter-spacing: -0.3px;
  text-align: center;
  background: var(--benew-white);
  border: 0;
  border-top: 1px solid var(--benew-border-light);
}

.product-detail .product-image-slider .swiper-slide,
.product-detail .product-image-slider .thumb-item,
.product-detail .product-image-slider .thumb-item__media,
.product-detail .product-image-slider .thumb-item__img-box,
.product-detail .product-image-slider .thumb-item__img {
  height: auto;
}

/* 높이는 1:1로 고정하고, 세로가 긴 이미지는 잘리지 않게 박스 안에서 축소한다. */
.product-detail .product-image-slider .thumb-item__media {
  aspect-ratio: 1 / 1;
}

.product-detail .product-image-slider .thumb-item__img-box,
.product-detail .product-image-slider .thumb-item__img {
  height: 100%;
}

/* scale-down: 원본보다 크게 늘리지 않고, 박스 안에서 가운데 정렬한다. */
.product-detail .product-image-slider img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: scale-down;
  object-position: center;
}

.product-image-slider.swiper {
  overflow: hidden;
}

.product-image-slider.swiper .swiper-pagination.swiper-pagination-horizontal {
  position: static;
  left: auto;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 2px;
  margin: 10px 0 0;
  padding: 0 16px;
  transform: none;
}

.product-image-slider .swiper-pagination-bullet {
  flex: 1 1 0;
  width: auto;
  height: 2px;
  margin: 0 2px !important;
  border-radius: 0;
  background: var(--benew-border-tone-3);
  opacity: 1;
}

.product-image-slider .swiper-pagination-bullet-active {
  background: var(--benew-ink);
}

.purchase,
.purchase.product-detail {
  left: 50%;
  right: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mall-width);
  padding-left: 20px;
  padding-right: 20px;
  /* 옵션 영역이 위로 열리므로 sticky 탭(z-index 7)보다 위에 있어야 한다. */
  z-index: 7;
  transform: translateX(-50%);
  border-top: 0 !important;
  box-shadow: none;
}

.product-detail .tabs {
  z-index: 6 !important;
  transition: none;
}

.product-detail .tabs .tabs__item,
.product-detail .tabs .tabs__item button {
  font-size: var(--benew-fs-md);
}

.purchase__button-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.purchase__share-btn,
.purchase__like-btn {
  box-sizing: border-box;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 2px;
}

.purchase__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--default-color);
  background: var(--benew-white);
  border: 1px solid var(--default-color);
  border-radius: var(--benew-radius-sm);
  cursor: pointer;
}

.purchase__share-btn svg {
  display: block;
  width: 40px;
  height: 40px;
}

.purchase__buy-btn,
.purchase__restock-btn {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
}

.purchase__opener {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* 기본 스킨의 좌우 -11px 마진이 옵션 영역(overflow-x: auto)을 넘겨 가로 스크롤을 만든다. */
.purchase__total {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1001px) {
  .page-inner {
    max-width: calc(500px + var(--mall-width)) !important;
  }

  .page__content.site {
    width: var(--mall-width);
    max-width: var(--mall-width);
    min-width: var(--mall-width);
  }

  .page .bottom-nav,
  .purchase,
  .purchase.product-detail {
    left: calc(50% - (var(--mall-width) - 500px) / 2);
    right: auto;
    width: var(--mall-width);
    max-width: var(--mall-width);
    transform: none;
  }

  /* 기본 스킨은 500px 몰 기준이라 600px에선 화살표가 안쪽으로 들어온다. */
  .page .fab-top-down {
    right: calc(50% - (500px + var(--mall-width)) / 2 + 16px);
  }
}

body:has(.bottom-nav) .l-content {
  padding-bottom: 88px;
}

body:has(.bottom-nav) .footer {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* 회사소개·이용약관 등 전체 모달이 하단 네비(z-index: 150) 뒤로 깔리지 않게 */
.portal:has(.full-modal),
.portal:has(.title-modal--full) {
  z-index: 300;
}

.modal.full-modal.agreement,
.full-modal.agreement .title-modal--full {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  height: 100%;
  margin: 0 auto;
  background: var(--benew-white);
}

.full-modal.agreement .title-modal__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 48px;
  padding: 0 48px;
  background: var(--benew-white);
  border-bottom: 1px solid var(--benew-border-light);
}

.full-modal.agreement .title-modal__title {
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-xl);
  font-weight: 600;
  letter-spacing: -0.2px;
}

.full-modal.agreement .title-modal__close-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.full-modal.agreement .title-modal__content {
  box-sizing: border-box;
  padding: 16px 16px 40px;
  overflow-y: auto;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  line-height: 1.7;
  letter-spacing: -0.2px;
}

.full-modal.agreement .title-modal__content .editor,
.full-modal.agreement .title-modal__content .editor * {
  max-width: 100% !important;
  box-sizing: border-box;
}

.full-modal.agreement .title-modal__content img {
  height: auto;
}

.full-modal.agreement .title-modal__content a {
  color: var(--benew-ink);
}

.full-modal.agreement .select-box {
  margin-top: 16px;
  background: var(--benew-white);
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius) !important;
}

.full-modal.agreement--intro .title-modal__content {
  padding: 0 0 40px;
}

.full-modal.agreement--intro .editor > div {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* alert·confirm은 전체 모달(z-index: 300) 위에 떠야 확인 버튼을 누를 수 있음 */
.portal:has(.modal__box--alert),
.portal:has(.modal__box--confirm) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal:has(.modal__box--alert) .dim,
.portal:has(.modal__box--confirm) .dim {
  background-color: var(--benew-dim);
}

.portal:has(.modal__box--alert) .modal,
.portal:has(.modal__box--confirm) .modal {
  position: relative;
  top: auto;
  left: auto;
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  transform: none;
}

.modal__box--alert,
.modal__box--confirm {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none;
  width: 100%;
}

.modal__box--alert .modal__content,
.modal__box--confirm .modal__content {
  min-height: 0;
  padding: 28px 20px 20px;
}

.modal__box--alert .modal__text,
.modal__box--confirm .modal__text {
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.3px;
}

.modal__box--confirm .cart__guest-order-guide {
  display: block;
  margin-top: 8px;
  color: var(--benew-text-faint);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.modal__box--alert .modal__btns,
.modal__box--confirm .modal__btns {
  gap: 8px;
  box-sizing: border-box;
  padding: 0 16px 16px;
  border-top: 0;
}

.modal__box--alert .modal__btns .btn,
.modal__box--confirm .modal__btns .btn {
  flex: 1 1 0;
  height: 48px;
  padding: 0;
  color: var(--benew-ink) !important;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  line-height: 48px;
  background: var(--benew-white) !important;
  border: 1px solid var(--default-color) !important;
  border-radius: var(--benew-radius-sm);
}

.modal__box--confirm .modal__btns .btn:last-child,
.modal__box--alert .modal__btns .btn {
  color: var(--benew-white) !important;
  background: var(--benew-ink) !important;
  border-color: var(--benew-ink) !important;
}

.total-sort {
  top: 0;
}

.total-sort__select-box.select-box.select-box--sort {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-width: 132px;
  height: 36px !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-tone-2) !important;
}

.total-sort__select-box.select-box.select-box--sort::before {
  top: 50% !important;
  left: 10px !important;
  transform: translateY(-50%);
}

.total-sort__select-box.select-box.select-box--sort::after {
  content: none !important;
}

.total-sort__select-box select {
  display: block !important;
  width: 100%;
  height: 36px !important;
  padding: 0 14px 0 40px !important;
  overflow: hidden;
  font-size: var(--benew-fs-sm);
  line-height: 36px;
  color: var(--benew-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

.page:has(.category-filter) .product-gallery {
  padding-top: 0 !important;
}

.product-gallery {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 28px 8px;
  padding: 8px 8px 24px !important;
}

.product-gallery .thumb-item {
  width: calc(50% - 4px) !important;
  margin: 0 !important;
}

.product-gallery .thumb-item__media {
  aspect-ratio: 3 / 4;
}

.product-gallery .thumb-item__info {
  padding: 10px 2px 0;
}

.product-gallery .product-thumb-brand {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal !important;
  word-break: break-word;
}

.product-gallery .product-thumb-title {
  display: block !important;
  overflow: visible !important;
  margin: 2px 0 0;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.35;
  color: var(--benew-ink);
  text-overflow: clip !important;
  white-space: normal !important;
}

.product-gallery .product-thumb-title-product-name {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2;
  overflow: hidden !important;
  margin: 0;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.35;
  color: var(--benew-ink);
  text-overflow: ellipsis;
  white-space: normal !important;
  word-break: break-word;
}

.product-gallery .product-thumb-price-info {
  margin: 6px 0 0;
  font-size: var(--benew-fs-sm);
  color: var(--benew-ink);
}

.product-gallery .product-thumb-price {
  font-style: normal;
  font-weight: 700;
}

.product-card__like-wrap {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

.product-card__like {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--benew-ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.product-card__like-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.member-modification-form__withdrawal {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.member-modification-form__withdrawal-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--benew-text-weaker);
  text-decoration: underline;
  background: none;
  border: 0;
}

.my-info {
  padding: 28px 20px 24px;
  color: var(--benew-ink);
  background: var(--benew-white);
}

.my-info__id {
  margin: 0;
  font-size: var(--benew-fs-5xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--benew-ink);
}

.my-info__grade {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: 1.4;
  color: var(--benew-ink);
  text-align: left;
  background: transparent;
  border: 0;
}

/* 상품문의 작성 모달 — 쿠폰받기형 카드 */
.product-inquiry-modal .product-inquiry-form {
  padding: 0;
}

.product-inquiry-modal .board-product-item__description {
  align-items: center;
  margin: 0;
  padding: 16px 20px;
  background: var(--benew-white);
  border-bottom: 0;
}

.product-inquiry-modal .product-inquiry-form__content,
.product-inquiry-modal .product-inquiry-form__content.l-panel,
.product-inquiry-modal .character-counter {
  background: var(--benew-white);
}

.product-inquiry-modal .board-product-item__image,
.product-inquiry-modal .board-product-item__image img {
  width: 56px;
  height: 56px;
  border-radius: var(--benew-radius-md);
}

.product-inquiry-modal .board-product-item__product {
  margin: 0 0 0 10px;
}

.product-inquiry-modal .board-product-item__product-name .editor {
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-sm);
  line-height: 1.4;
}

.product-inquiry-modal .product-inquiry-form__content {
  margin: 0;
  padding: 16px 20px 20px;
}

.product-inquiry-modal .character-counter {
  margin: 0;
}

.product-inquiry-modal .product-inquiry-form__text {
  height: 128px;
  min-height: 128px;
  padding: 12px;
  font-size: var(--benew-fs-sm);
  line-height: 1.5;
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-lg);
}

.product-inquiry-modal .board-form__button-group {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}

.product-inquiry-modal .board-form__button-group .btn {
  flex: 1;
  height: 44px;
  font-size: var(--benew-fs-md);
  font-weight: 600;
  border-radius: var(--benew-radius-lg);
}

.product-inquiry-modal .inquiry-form__btn--register,
.product-inquiry-modal .inquiry-form__btn--register.btn {
  background: var(--point-color) !important;
  border: 0 !important;
}

.product-inquiry-modal .board-form__notes {
  margin: 0;
  padding: 0;
}

.product-inquiry-modal .board-form__note {
  padding: 12px 16px 16px;
  background: var(--benew-surface-sub);
}

.product-inquiry-modal .board-form__note-title {
  margin: 0 0 6px;
  font-size: var(--benew-fs-sm);
  font-weight: 700;
}

.product-inquiry-modal .board-form__note-text {
  font-size: var(--benew-fs-xs);
  line-height: 1.5;
  color: var(--benew-text-weak);
}

/* 구매 옵션 - 사이즈 리스트 */
.purchase.product-detail {
  overflow-x: hidden;
}

.purchase.product-detail .purchase__opener {
  display: none;
}

.purchase.product-detail.is-option-open .purchase__button-wrap,
.purchase.product-detail.is-option-open .purchase__opener {
  display: none;
}

.purchase.product-detail .purchase__option[hidden] {
  display: none !important;
}

html.is-option-sheet-open .fab-top-down,
body.is-option-sheet-open .fab-top-down {
  display: none;
}

.purchase-option-dim {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 160;
  width: 100%;
  max-width: var(--mall-width);
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  transform: translateX(-50%);
  cursor: pointer;
}

.purchase.product-detail.is-option-open {
  z-index: 161;
  overflow: hidden;
  padding: 16px 16px 0 !important;
  background: var(--benew-white);
  border-radius: var(--benew-radius-xl) var(--benew-radius-xl) 0 0;
}

.purchase.product-detail.is-option-open .purchase__naver-pay-btn {
  display: none;
  margin: 0;
}

@media (min-width: 1001px) {
  .purchase-option-dim {
    left: calc(50% - (var(--mall-width) - 500px) / 2);
    transform: none;
  }
}

.purchase.product-detail .purchase__option:not([hidden]) {
  display: flex;
  flex-direction: column;
  max-height: min(78vh, 680px);
  overflow: hidden;
}

.purchase__option-box {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-strong);
  border-radius: var(--benew-radius-sm);
}

.purchase__option-body {
  max-height: min(42vh, 360px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--benew-placeholder) transparent;
  -webkit-overflow-scrolling: touch;
}

.purchase__option-body::-webkit-scrollbar {
  width: 6px;
}

.purchase__option-body::-webkit-scrollbar-track {
  background: transparent;
}

.purchase__option-body::-webkit-scrollbar-thumb {
  background: var(--benew-placeholder);
  border-radius: var(--benew-radius);
}

.purchase__option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 12px;
  margin: 4px 0 8px;
}

.purchase__option-title {
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.purchase__option-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  color: var(--benew-ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.purchase__option-close svg,
.purchase__option-close img {
  display: block;
  width: 18px;
  height: 18px;
}

.purchase__size-picker,
.purchase__size-list,
.purchase__size-list > li {
  display: block;
  width: 100%;
  max-width: 100%;
}

.purchase__size-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.purchase__size-list > li:has(.is-selected) {
  background: var(--benew-surface-muted);
}

.purchase__size-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 100%;
  max-width: 100%;
  padding: 14px 12px;
  color: var(--benew-ink);
  text-align: left;
  background: var(--benew-white);
  border: 0;
  border-bottom: 1px solid var(--benew-border-light);
  cursor: pointer;
}

.purchase__size-item:last-child {
  border-bottom: 0;
}

.purchase__size-item.is-selected {
  background: var(--benew-surface-muted);
}

.purchase__size-item.is-soldout {
  color: var(--benew-border-mid);
  cursor: default;
}

.purchase__size-name {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  gap: 4px;
  font-size: var(--benew-fs-md);
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase__size-name--product {
  white-space: normal;
}

.purchase__size-stock {
  color: var(--benew-text-faint);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
}

.purchase__size-item.is-soldout .purchase__size-stock {
  color: var(--benew-border-mid);
}

.purchase__size-price {
  flex: 0 0 auto;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 400;
  white-space: nowrap;
}

.purchase__size-item.is-soldout .purchase__size-price {
  color: var(--benew-border-mid);
}

.purchase__size-empty {
  margin: 12px 0;
  color: var(--benew-text-faint);
  font-size: var(--benew-fs-sm);
}

.purchase__option-notes-wrap {
  margin: 0;
  padding: 12px 0 0;
  background: var(--benew-white);
}

.purchase__option-notes {
  padding: 0;
  color: var(--benew-text-sub);
  font-size: var(--benew-fs-xs);
  line-height: 1.6;
  background: var(--benew-white);
}

.purchase__option-notes-line,
.purchase__option-notes-line-btn {
  margin: 8px 0 0;
  color: var(--benew-text-sub);
  font-size: var(--benew-fs-xs);
  line-height: 1.6;
}

.purchase__option-notes-line-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.purchase__option-notes-link {
  display: inline;
  margin: 0;
  padding: 0;
  color: var(--benew-text-body);
  font-size: var(--benew-fs-xs);
  font-weight: 600;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}

.purchase__option-notes > .purchase__option-notes-link {
  display: block;
}

.purchase__option-notes-wrap,
.purchase__btns {
  flex: 0 0 auto;
}

.purchase__quantity-box .quantity {
  display: none;
}

.purchase__quantity-box .extra-product__selected-options .quantity {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 14px 36px 14px 0;
  background: var(--benew-white);
  border-bottom: 1px solid var(--benew-border-light);
}

.purchase__btns {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--benew-white);
}

.purchase__sheet-btn--cart,
.purchase__sheet-btn--buy {
  flex: 1 1 0;
  height: 48px;
  border-radius: var(--benew-radius-sm);
  font-size: var(--benew-fs-lg);
  font-weight: 600;
}

.purchase__sheet-btn--cart {
  color: var(--benew-ink) !important;
  background: var(--benew-white) !important;
  border: 1px solid var(--default-color) !important;
}

.purchase__sheet-btn--buy {
  color: var(--benew-white) !important;
  background: var(--point-color) !important;
  border: 1px solid var(--point-color) !important;
}

.price-diff-modal__card {
  padding: 16px;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-xl);
  box-shadow: var(--benew-shadow-soft);
}

.price-diff-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-diff-modal__list li {
  position: relative;
  margin: 0;
  padding-left: 12px;
  color: var(--benew-ink-700);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.2px;
}

.price-diff-modal__list li + li {
  margin-top: 8px;
}

.price-diff-modal__list li::before {
  content: '';
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 3px;
  height: 3px;
  background: var(--benew-ink-700);
  border-radius: 50%;
}

/* 구매 시트 위 안내 레이어. CustomModal을 쓰지 않아 body 스크롤을 잠그지 않는다. */
.purchase-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 300;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
}

.purchase-layer__dim {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  background: var(--benew-dim);
  border: 0;
  cursor: pointer;
}

.purchase-layer__box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--benew-white);
}

.purchase-layer__box .title-modal {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: inherit;
}

/* 사이즈 가이드·무이자 안내·색상 안내 레이어는 하단 네비(z-index: 150) 위에 떠야 함 */
.portal:has(.size-guide-modal),
.portal:has(.color-hint-modal),
.portal:has(.installment-modal) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 300;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 16px;
  overflow: hidden;
  overscroll-behavior: none;
}

.size-guide-modal .title-modal,
.color-hint-modal .title-modal,
.installment-modal .title-modal {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: inherit;
}

.portal:has(.size-guide-modal) .dim {
  background-color: var(--benew-dim);
}

.size-guide-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: 86vh;
  overflow: hidden;
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

.size-guide-modal.price-diff-modal {
  width: min(520px, calc(100vw - 32px));
}

.size-guide-modal .title-modal__header {
  flex: 0 0 auto;
  height: 56px;
  border-bottom: 1px solid var(--benew-divider);
}

.size-guide-modal .title-modal__title {
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.size-guide-modal .title-modal__close-btn {
  right: 16px;
}

.size-guide-modal .title-modal__content {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 18px;
  background: var(--benew-surface-sub);
}

.size-guide__notes {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.size-guide__notes li {
  position: relative;
  padding-left: 10px;
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-xs);
  line-height: 1.55;
  letter-spacing: -0.2px;
}

.size-guide__notes li + li {
  margin-top: 4px;
}

.size-guide__notes li::before {
  content: '*';
  position: absolute;
  left: 0;
}

.size-guide__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.size-guide__tab {
  padding: 7px 12px;
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-pill);
  background: var(--benew-white);
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-xs);
  line-height: 1;
  letter-spacing: -0.2px;
  cursor: pointer;
}

.size-guide__tab.is-active {
  border-color: var(--benew-ink-deep);
  background: var(--benew-ink-deep);
  color: var(--benew-white);
  font-weight: 700;
}

.size-guide__table-wrap {
  overflow-x: auto;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-xl);
  box-shadow: var(--benew-shadow-soft);
}

.size-guide__table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--benew-fs-xs);
}

.size-guide__table th,
.size-guide__table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--benew-divider);
  color: var(--benew-ink-700);
  text-align: center;
  white-space: nowrap;
}

.size-guide__table th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 96px;
  border-right: 1px solid var(--benew-divider);
  background: var(--benew-surface-sub);
  color: var(--benew-ink-deep);
  font-weight: 700;
  text-align: left;
}

.size-guide__table tr:last-child th,
.size-guide__table tr:last-child td {
  border-bottom: 0;
}

.size-guide__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 12px 0 0;
  font-size: var(--benew-fs-xs);
  letter-spacing: -0.2px;
}

.size-guide__legend dt {
  color: var(--benew-ink-deep);
  font-weight: 700;
}

.size-guide__legend dd {
  margin: 0;
  color: var(--benew-ink-500);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .size-guide-modal .title-modal__content {
    padding: 14px;
  }

  .size-guide__table th,
  .size-guide__table td {
    padding: 8px 9px;
  }

  .size-guide__table th {
    min-width: 84px;
  }
}

/* 무이자 할부 안내 */
.product-summary__installment {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--benew-border-light);
  background: none;
  cursor: pointer;
}

.product-summary__installment-label {
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-sm);
}

.product-summary__installment-value {
  flex: 1;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  text-align: left;
}

.product-summary__installment-arrow {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--benew-text-faint);
  border-right: 1.5px solid var(--benew-text-faint);
  transform: rotate(45deg);
}

/* 아래 묶음은 무이자 할부 안내와 색상 안내가 같이 쓰는 레이어팝업 틀이다.
   한쪽만 고치면 두 팝업 모양이 어긋나므로 선택자를 함께 둔다. */
.portal:has(.color-hint-modal) .dim,
.portal:has(.installment-modal) .dim {
  position: absolute;
  inset: 0;
  background-color: var(--benew-dim);
  touch-action: none;
}

.modal.color-hint-modal,
.color-hint-modal,
.modal.installment-modal,
.installment-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: min(432px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-width: 432px !important;
  height: auto !important;
  max-height: min(80dvh, calc(100dvh - 32px)) !important;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  transform: translate(-50%, -50%) !important;
}

/* 무이자 안내는 KCP 400px 페이지를 확대해 보여주므로 색상 안내보다 넓게 쓴다 */
.modal.installment-modal,
.installment-modal {
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: 520px !important;
}

.color-hint-modal .title-modal__header,
.installment-modal .title-modal__header {
  flex: 0 0 auto;
  height: 56px;
  padding: 0;
  border-bottom: 1px solid var(--benew-divider);
}

.color-hint-modal .title-modal__title,
.installment-modal .title-modal__title {
  height: auto;
  padding: 0 40px;
  color: var(--benew-ink-deep);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.color-hint-modal .title-modal__close-btn,
.installment-modal .title-modal__close-btn {
  right: 16px;
}

.color-hint-modal .title-modal,
.color-hint-modal .title-modal__content,
.installment-modal .title-modal,
.installment-modal .title-modal__content,
.installment-modal__frame-box {
  min-width: 0;
  max-width: 100%;
}

.color-hint-modal .title-modal,
.installment-modal .title-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  height: auto !important;
  max-height: min(80dvh, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

.color-hint-modal .title-modal__content,
.installment-modal .title-modal__content {
  flex: 1 1 auto;
  min-width: 0 !important;
  min-height: 0;
  height: auto !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 16px 16px 18px;
  background: var(--benew-white);
}

.installment-modal__lead {
  margin: 0 0 10px;
  color: var(--benew-ink-600);
  font-size: var(--benew-fs-sm);
  line-height: 1.5;
}

/* KCP 페이지는 400px 고정. 헤더를 먼저 자른 뒤 zoom으로 맞춰 스크롤바 클릭이 빗나가지 않게 한다. */
.installment-modal__frame-box {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-xl);
  box-shadow: none;
}

/* 보이는 높이 360px = iframe 420px 에서 KCP 헤더 60px 을 잘라낸 값. 둘은 같이 움직여야 한다.
   KCP 카드 목록은 자체 스크롤 영역이라 이 값을 키워도 줄이 늘지 않고 아래에 공백만 생긴다.
   크게 보여주려면 높이가 아니라 모달 폭(= --kcp-scale)을 키워야 한다. */
.installment-modal__frame-scale {
  width: 400px;
  height: 360px;
  overflow: hidden;
  zoom: var(--kcp-scale, 1);
}

.installment-modal__frame {
  display: block;
  width: 400px;
  height: 420px;
  margin: -60px 0 0;
  border: 0;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

@supports not (zoom: 1) {
  .installment-modal__frame-box {
    height: calc(360px * var(--kcp-scale, 1));
  }

  .installment-modal__frame-scale {
    transform: scale(var(--kcp-scale, 1));
    transform-origin: top left;
  }
}

.installment-modal__note {
  margin: 10px 0 0;
  padding: 0;
  color: var(--benew-ink-500);
  font-size: var(--benew-fs-xs);
  line-height: 1.55;
  background: transparent;
  border-radius: 0;
}

/* 장바구니 — 구매 제한 사유
   샵바이 장바구니 API가 옵션마다 validInfo.message 로 제한 사유를 내려준다.
   그걸 상품 줄 아래에 그대로 노출해서 "왜 제한인지"를 화면에서 바로 알 수 있게 한다. */
.cart__invalid {
  margin: var(--benew-space-2xs) 0 var(--benew-space-sm);
}

.cart__invalid-reason {
  margin: 0;
  font-size: var(--benew-fs-xs);
  font-weight: 500;
  line-height: var(--benew-lh-base);
  letter-spacing: var(--benew-ls-base);
  color: var(--benew-primary);
  word-break: keep-all;
}

/* 무효 항목 복구 버튼 (수량 줄이기 / 다시 담기).
   무효 항목은 QuantityChanger 가 잠기므로 고객이 스스로 빠져나올 유일한 경로다. */
.cart__invalid-action {
  margin-top: var(--benew-space-sm);
  padding: var(--benew-space-xs) var(--benew-space-md);
  font-size: var(--benew-fs-xs);
  font-weight: 600;
  line-height: var(--benew-lh-tight);
  letter-spacing: var(--benew-ls-base);
  color: var(--benew-ink);
  background: var(--benew-white);
  border: 1px solid var(--benew-ink);
  border-radius: var(--benew-radius);
  cursor: pointer;
}

.cart__invalid-action:active {
  color: var(--benew-white);
  background: var(--benew-ink);
}

/* 로그인 */
.sign-in {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 16px 36px;
  background: var(--benew-white);
}

.sign-in__intro {
  margin: 0 0 28px;
  text-align: center;
}

.sign-in__brand {
  margin: 0 0 8px;
  font-family: Montserrat, 'Noto Sans KR', sans-serif;
  font-size: var(--benew-fs-2xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--benew-ink);
}

.sign-in__title {
  margin: 0;
  font-size: var(--benew-fs-3xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--benew-ink);
}

.sign-in .normal-sign-in,
.sign-in .guest-order {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sign-in .normal-sign-in__input-wrap,
.sign-in .guest-order__input-wrap {
  height: auto;
  margin: 0;
}

.sign-in .text-field {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius) !important;
}

.sign-in .text-field input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 12px !important;
  font-size: var(--benew-fs-md);
  line-height: 40px;
  color: var(--benew-ink);
  background: var(--benew-white) !important;
  border: 0 !important;
  border-radius: var(--benew-radius);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.sign-in .text-field input::placeholder,
.sign-in .text-field input::-webkit-input-placeholder {
  color: var(--benew-placeholder);
  opacity: 1;
}

.sign-in .text-field input:focus {
  outline: none;
  color: var(--benew-ink);
}

.sign-in .text-field:focus-within {
  border-color: var(--benew-ink) !important;
}

.sign-in .normal-sign-in .btn.btn--default {
  width: 100%;
  height: 48px;
  margin-top: 0;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  color: var(--benew-white) !important;
  background: var(--benew-ink) !important;
  border: 0 !important;
  border-radius: var(--benew-radius) !important;
}

.sign-in-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 16px 0 0;
}

.sign-in-link__item {
  position: relative;
  padding: 0 12px;
  font-size: var(--benew-fs-sm);
  line-height: 1.2;
  color: var(--benew-text-muted);
  text-decoration: none;
}

.sign-in-link__item + .sign-in-link__item::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 10px;
  background: var(--benew-border-strong);
  transform: translateY(-50%);
  content: '';
}

.sign-in-link__item:last-child {
  color: var(--benew-ink);
}

.sign-in__sign-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 16px;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  color: var(--benew-ink) !important;
  text-decoration: none;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-ink) !important;
  border-radius: var(--benew-radius) !important;
}

.sign-in-open-id {
  margin-top: 40px;
}

.sign-in .open-id-sign-in__title,
.sign-up-menu .open-id-sign-in__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  color: var(--benew-text-faint);
  text-align: center;
}

.sign-in .open-id-sign-in__title span,
.sign-up-menu .open-id-sign-in__title span {
  font-size: var(--benew-fs-xl);
  font-weight: 400;
  color: var(--benew-text-faint);
}

.sign-in .open-id-sign-in__title::before,
.sign-in .open-id-sign-in__title::after,
.sign-up-menu .open-id-sign-in__title::before,
.sign-up-menu .open-id-sign-in__title::after {
  flex: 1 1 auto;
  height: 1px;
  background: var(--benew-border-light);
  content: '';
}

.sign-in .open-id-sign-in__list,
.sign-up-menu .open-id-sign-in__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sign-in .open-id-sign-in__item,
.sign-up-menu .open-id-sign-in__item {
  width: auto !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
}

.sign-in .open-id-sign-in__link,
.sign-up-menu .open-id-sign-in__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
  background: transparent !important;
  border: 0 !important;
}

.sign-in .open-id-sign-in__link::before,
.sign-up-menu .open-id-sign-in__link::before {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  content: '';
}

.sign-in .open-id-sign-in__link::after,
.sign-up-menu .open-id-sign-in__link::after {
  font-size: var(--benew-fs-2xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--benew-text-muted);
}

.sign-in .type-naver .open-id-sign-in__link::before,
.sign-up-menu .type-naver .open-id-sign-in__link::before {
  background-color: var(--benew-naver);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 48 48%27%3E%3Cg transform=%27translate%2813 13%29%27%3E%3Cpath fill=%27%23fff%27 d=%27M14.91 11.77 6.56 0H0v22h6.88V10.23L14.79 22H22V0h-7.09z%27/%3E%3C/g%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: 48px 48px;
}

.sign-in .type-naver .open-id-sign-in__link::after,
.sign-up-menu .type-naver .open-id-sign-in__link::after {
  content: '네이버';
}

.sign-in .type-kakao .open-id-sign-in__link::before,
.sign-up-menu .type-kakao .open-id-sign-in__link::before {
  background-color: var(--benew-kakao);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%233C1E1E%27 d=%27M12 4C7.03 4 3 7.13 3 11c0 2.5 1.67 4.7 4.18 5.96L6.4 20.2c-.1.27.2.5.44.36l4.1-2.48c.35.04.7.07 1.06.07 4.97 0 9-3.13 9-7s-4.03-7-9-7z%27/%3E%3C/svg%3E");
}

.sign-in .type-kakao .open-id-sign-in__link::after,
.sign-up-menu .type-kakao .open-id-sign-in__link::after {
  content: '카카오';
}

.sign-in .type-google .open-id-sign-in__link::before,
.sign-up-menu .type-google .open-id-sign-in__link::before {
  background-color: var(--benew-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23EA4335%27 d=%27M12 10.2v3.6h5.1c-.2 1.2-1.5 3.6-5.1 3.6-3.1 0-5.6-2.6-5.6-5.8S8.9 5.8 12 5.8c1.8 0 3 .7 3.7 1.4l2.5-2.4C16.7 3.3 14.6 2.4 12 2.4 6.9 2.4 2.8 6.5 2.8 11.6S6.9 20.8 12 20.8c5.2 0 8.6-3.6 8.6-8.8 0-.6 0-1-.1-1.5H12z%27/%3E%3C/svg%3E");
  border: 1px solid var(--benew-border);
}

.sign-in .type-google .open-id-sign-in__link::after,
.sign-up-menu .type-google .open-id-sign-in__link::after {
  content: '구글';
}

.sign-in .guest-order {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--benew-border-light);
}

.sign-in .guest-order__title {
  margin: 0 0 12px;
  font-size: var(--benew-fs-sm);
  font-weight: 600;
  color: var(--benew-ink);
}

.sign-in .guest-order-link-wrap {
  margin-top: 40px;
}

.sign-in .guest-order .btn.btn--default,
.sign-in .guest-order-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 0;
  font-size: var(--benew-fs-md);
  font-weight: 600;
  color: var(--benew-ink) !important;
  text-decoration: none;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-ink) !important;
  border-radius: var(--benew-radius) !important;
}

/* 회원가입 메뉴 */
.sign-up-menu {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 36px 20px 48px;
  background: var(--benew-white);
}

.sign-up-menu__intro {
  margin: 0 0 28px;
  text-align: center;
}

.sign-up-menu__title,
.sign-up-form__page-title {
  margin: 0;
  font-size: var(--benew-fs-3xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--benew-ink);
  text-align: center;
}

.sign-up-menu__link-normal {
  margin: 0;
}

.sign-up-menu__link-normal a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  color: var(--benew-white) !important;
  text-decoration: none;
  background: var(--benew-ink) !important;
  border: 0 !important;
  border-radius: 0;
}

.sign-up-menu__link-open-id {
  margin-top: 40px;
}

/* 회원가입 폼 */
.sign-up-form {
  box-sizing: border-box;
  padding: 8px 16px 36px;
  background: var(--benew-white);
}

body:has(.bottom-nav) .l-content:has(.sign-up-form) {
  padding-bottom: 0;
}

.sign-up-form__confirm {
  margin-top: 36px;
}

.sign-up-form__page-title {
  margin: 0 0 20px;
}

.sign-up-form__item {
  margin: 0 0 14px;
}

.sign-up-form__tit {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  letter-spacing: -0.2px;
}

.sign-up-form__tit .required {
  width: 4px;
  height: 4px;
  margin: 0;
  background: var(--point-color);
  border-radius: 50%;
}

.sign-up-form__input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sign-up-form .text-field,
.sign-up-form .select-box,
.sign-up-form .email-input .text-field,
.sign-up-form .phone-number-input .text-field,
.sign-up-form .phone-number-input .select-box,
.sign-up-form .birthday-input .text-field,
.sign-up-form .birthday-input .select-box,
.sign-up-form .address-form .text-field,
.sign-up-form .address-form .select-box {
  box-sizing: border-box;
  background: var(--benew-white);
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius) !important;
}

.sign-up-form .text-field:focus-within,
.sign-up-form .select-box:focus-within,
.sign-up-form .email-input .text-field:focus-within,
.sign-up-form .phone-number-input .text-field:focus-within,
.sign-up-form .phone-number-input .select-box:focus-within,
.sign-up-form .birthday-input .text-field:focus-within,
.sign-up-form .birthday-input .select-box:focus-within,
.sign-up-form .address-form .text-field:focus-within,
.sign-up-form .address-form .select-box:focus-within {
  border-color: var(--benew-ink) !important;
}

.sign-up-form .text-field input,
.sign-up-form select,
.sign-up-form .email-input input,
.sign-up-form .phone-number-input input,
.sign-up-form .phone-number-input select,
.sign-up-form .birthday-input input,
.sign-up-form .birthday-input select,
.sign-up-form .address-form input,
.sign-up-form .address-form select {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  background: var(--benew-white);
  border: 0 !important;
  border-radius: var(--benew-radius);
  outline: none;
}

.sign-up-form .text-field input::placeholder,
.sign-up-form .text-field input::-webkit-input-placeholder,
.sign-up-form .email-input input::placeholder,
.sign-up-form .phone-number-input input::placeholder {
  color: var(--benew-placeholder);
  opacity: 1;
}

.sign-up-form .email-input,
.sign-up-form .phone-number-input,
.sign-up-form .birthday-input {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.sign-up-form .email-input .text-field,
.sign-up-form .phone-number-input .text-field,
.sign-up-form .phone-number-input .select-box {
  flex: 1 1 0;
  min-width: 0;
}

.sign-up-form__input-wrap > .text-field,
.sign-up-form__input-wrap > .select-box {
  flex: 1 1 100%;
  min-width: 0;
}

.sign-up-form .authentication-btn.btn,
.sign-up-form__input-wrap > .btn,
.sign-up-form .address-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  color: var(--benew-ink) !important;
  font-size: var(--benew-fs-sm);
  font-weight: 600;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-ink) !important;
  border-radius: var(--benew-radius) !important;
}

.sign-up-form .description {
  flex: 1 1 100%;
  margin: 4px 0 0;
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-xs);
  line-height: 1.4;
}

.sign-up-form .description.alert {
  color: var(--point-color);
}

.sign-up-form .sex-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
}

.sign-up-form .sex-input--buttons {
  flex-wrap: nowrap;
  gap: 8px;
}

.sign-up-form .sex-input__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  line-height: 1;
  background: var(--benew-white);
  border: 1px solid var(--benew-border);
  border-radius: var(--benew-radius);
  cursor: pointer;
}

.sign-up-form .sex-input__btn.is-selected {
  color: var(--benew-ink);
  font-weight: 600;
  border-color: var(--benew-ink);
}

.sign-up-form__tit-optional {
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-sm);
  font-weight: 500;
}

.sign-up-form .sign-up-form__agree-wrap {
  --agree-row: 32px;
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--benew-border-light);
}

.sign-up-form__agree-wrap .sign-up-form__input-wrap {
  display: block;
  width: 100%;
  margin: 0;
  gap: 0;
}

.sign-up-form__agree-wrap .sign-up-form__input-wrap > * {
  width: 100%;
  margin: 0;
  box-shadow: none !important;
}

.sign-up-form__agree-wrap .sign-up-form__checkbox--all,
.sign-up-form__agree-wrap .sign-up-form__checkbox--partial,
.sign-up-form__agree-wrap .custom-terms__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: var(--agree-row);
  min-height: var(--agree-row);
  max-height: var(--agree-row);
  margin: 0;
  padding: 0;
  font-size: var(--benew-fs-sm);
  background: transparent;
  border: 0;
}

.sign-up-form__agree-wrap .sign-up-form__checkbox--all {
  justify-content: flex-start;
  border-bottom: 1px solid var(--benew-border);
}

.sign-up-form__agree-wrap .sign-up-form__checkbox--all .check-radio__label {
  font-weight: 600;
}

.sign-up-form__agree-wrap .sign-up-form__agree-list,
.sign-up-form__agree-wrap .custom-terms,
.sign-up-form__agree-wrap .marketing-receive-agreement {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.sign-up-form__agree-wrap .sign-up-form__agree-list li,
.sign-up-form__agree-wrap .sign-up-form__agree-list li:not(:first-child),
.sign-up-form__agree-wrap .marketing-receive-agreement__item,
.sign-up-form__agree-wrap .custom-terms li {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.sign-up-form__agree-wrap .marketing-receive-agreement__item--parent {
  position: static;
}

.sign-up-form__agree-wrap .marketing-receive-agreement__sub-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  box-sizing: border-box;
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 14px;
  background: var(--benew-surface-muted);
  border-radius: var(--benew-radius);
}

.sign-up-form__agree-wrap .marketing-receive-agreement__sub-item {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
}

.sign-up-form__agree-wrap .marketing-receive-agreement__sub-item::before,
.sign-up-form__agree-wrap .marketing-receive-agreement__item--parent::before {
  content: none;
}

.sign-up-form__agree-wrap .check-radio,
.sign-up-form__agree-wrap .check-radio input,
.sign-up-form__agree-wrap .check-radio__label,
.sign-up-form__agree-wrap .check-radio__ico,
.sign-up-form__agree-wrap label,
.sign-up-form__agree-wrap .sign-up-form__checkbox--partial .btn,
.sign-up-form__agree-wrap .custom-terms__item .btn,
.sign-up-form__agree-wrap .custom-terms__item button,
.sign-up-form__agree-wrap .marketing-receive-agreement__sub-item {
  cursor: pointer;
}

.sign-up-form__agree-wrap .check-radio,
.sign-up-form__agree-wrap .text-field,
.sign-up-form__agree-wrap .select-box {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sign-up-form__agree-wrap .check-radio input,
.sign-up-form__agree-wrap input[type='checkbox'] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 16px;
}

.sign-up-form__agree-wrap .sign-up-form__checkbox--partial .btn,
.sign-up-form__agree-wrap .custom-terms__item .btn,
.sign-up-form__agree-wrap .custom-terms__item button {
  flex: 0 0 auto;
  width: auto;
  height: 22px;
  margin: 0;
  padding: 0 8px;
  color: var(--benew-ink) !important;
  font-size: var(--benew-fs-xs);
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius) !important;
}

.sign-up-form .check-radio__label,
.sign-up-form .sex-input label,
.sign-up-form__agree-wrap label,
.sign-up-form__agree-wrap .check-radio__label {
  color: var(--benew-ink) !important;
  font-size: var(--benew-fs-sm);
  line-height: 1.2;
}

.sign-up-form .notice-list {
  margin: 0 0 16px;
  padding: 0;
}

.sign-up-form .notice-list__item {
  margin: 0;
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-xs);
  line-height: 1.5;
}

.sign-up-form__confirm button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  color: var(--benew-white) !important;
  background: var(--benew-ink) !important;
  border: 0 !important;
  border-radius: var(--benew-radius);
}

/* 고객센터 */
.customer-center {
  box-sizing: border-box;
  padding: 8px 16px 48px;
  background: var(--benew-white);
}

/* 샵바이 기본이 .customer-center__information 에 text-align:center 를 걸어둔다.
   .page-heading 이 좌측 정렬이라 연락처도 같은 축으로 명시해서 덮는다. */
.customer-center__information {
  margin: 0 0 24px;
  padding: 0 0 20px !important;
  text-align: left;
  background: var(--benew-white) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--benew-border-light) !important;
}

.customer-center__kicker,
.notice__kicker {
  display: block;
  margin: 0 0 8px;
  font-family: Montserrat, 'Noto Sans KR', sans-serif;
  font-size: var(--benew-fs-2xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--benew-ink);
}

.customer-center__name {
  margin: 0 0 16px;
  font-size: var(--benew-fs-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--benew-ink);
}

.customer-center__phone {
  display: block;
  margin: 0 0 4px;
  font-size: var(--benew-fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--benew-ink);
  text-decoration: none;
}

.customer-center__email {
  display: block;
  font-size: var(--benew-fs-sm);
  color: var(--benew-text-muted);
  text-decoration: none;
}

.customer-center__tabs {
  display: flex;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--benew-border-light);
}

.customer-center__tab {
  flex: 1 1 50%;
  height: 44px;
  padding: 0;
  font-size: var(--benew-fs-md);
  font-weight: 500;
  line-height: 44px;
  color: var(--benew-text-faint);
  text-align: center;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.customer-center__tab.is-active {
  font-weight: 600;
  color: var(--benew-ink);
  border-bottom-color: var(--benew-ink);
}

.customer-center__tab-en {
  margin-left: 4px;
  font-family: Montserrat, 'Noto Sans KR', sans-serif;
  font-size: var(--benew-fs-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: inherit;
}

.customer-center__faq,
.customer-center__notice {
  margin: 0;
}

.customer-center .faq-list .ico--q,
.customer-center .faq-list .ico--a,
.faq-list .ico--q,
.faq-list .ico--a {
  display: none !important;
}

.customer-center .faq-list,
.customer-center .faq-list__content-wrap,
.notice__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-center .faq-list__content-wrap,
.customer-center .customer-center__content-warp {
  border-bottom: 1px solid var(--benew-border-light);
}

.customer-center .faq-list__question,
.customer-center .customer-center__content--question {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 0;
  background: var(--benew-white);
}

.customer-center .faq-list__question p,
.customer-center .customer-center__content--question p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: 1.4;
  color: var(--benew-ink);
}

.customer-center .faq-list__question .arrow,
.customer-center .customer-center__content--question .arrow {
  flex: 0 0 auto;
  margin: 0;
  color: var(--benew-ink);
}

.customer-center .faq-list__answer,
.customer-center .customer-center__content--answer {
  padding: 0 0 16px 0;
  font-size: var(--benew-fs-sm);
  line-height: 1.6;
  color: var(--benew-text-sub);
  background: var(--benew-white);
}

.customer-center .notice__list-button {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 14px 0;
}

.customer-center .notice__tit {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-center .notice__date {
  flex: 0 0 auto;
}

.customer-center .faq-list__answer .ico--a {
  display: none;
}

.customer-center .go-to-list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--benew-fs-sm);
  color: var(--benew-text-muted);
  background: transparent;
  border: 0;
}

.customer-center .go-to-list__title {
  margin: 0;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  color: var(--benew-text-muted);
}

.customer-center__inquiry {
  margin-top: 24px;
}

.customer-center__inquiry-button.btn,
.customer-center .customer-center__inquiry .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  color: var(--benew-white) !important;
  background: var(--benew-ink) !important;
  border: 0 !important;
  border-radius: 0;
}

/* 공지사항 */
.notice {
  box-sizing: border-box;
  padding: 8px 16px 48px;
  background: var(--benew-white);
}

.notice__title {
  display: none;
}

.notice__lead {
  margin: 0;
  font-size: var(--benew-fs-md);
  line-height: 1.5;
  color: var(--benew-text-muted);
}

/* 샵바이 기본 .notice__list li 가 좌우 1.5rem 을 넣어 목록 글자가 .page-heading 축보다 안으로 밀린다.
   행 높이는 .notice__list-button 이 잡으므로 li 여백은 0. */
.notice__list > li {
  padding: 0;
  border-bottom: 1px solid var(--benew-border-light);
}

.notice__list--pinned {
  margin: 0 0 12px;
  padding: 0 12px;
  background: var(--benew-surface-alt);
}

.notice__list--pinned > li:last-child {
  border-bottom: 0;
}

.notice__list--pinned .notice__list-button {
  background: transparent;
}

.notice__list-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 14px 0;
  text-align: left;
  background: var(--benew-white);
  border: 0;
  cursor: pointer;
}

.notice__tit {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  font-size: var(--benew-fs-md);
  font-weight: 500;
  line-height: 1.45;
  color: var(--benew-ink);
}

.notice__tit-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice__badge {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin-right: 8px;
  padding: 0 6px;
  font-size: var(--benew-fs-2xs);
  font-weight: 600;
  line-height: 1;
  color: var(--benew-ink);
  border: 1px solid var(--benew-ink);
}

.notice__date,
.notice__category-label {
  margin: 0;
  font-size: var(--benew-fs-xs);
  line-height: 1.2;
  color: var(--benew-text-faint);
}

.partnership .notice__list-button {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  cursor: default;
}

.partnership .notice__tit-text {
  white-space: normal;
}

.partnership .notice__date {
  margin-top: 6px;
}

.notice__list-item--locked {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 16px 0;
  font-size: var(--benew-fs-md);
  color: var(--benew-text-faint);
}

.notice-detail__title-box {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--benew-border-light);
}

.notice-detail__title {
  margin: 0 0 8px;
  font-size: var(--benew-fs-xl);
  font-weight: 600;
  line-height: 1.4;
  color: var(--benew-ink);
}

.notice-detail__date {
  margin: 0;
  font-size: var(--benew-fs-xs);
  color: var(--benew-text-faint);
}

.notice-detail__content {
  padding: 20px;
  font-size: var(--benew-fs-md);
  line-height: 1.7;
  color: var(--benew-text-body);
}

.notice-detail__index {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  text-align: left;
  background: var(--benew-white);
  border: 0;
  border-top: 1px solid var(--benew-border-light);
  cursor: pointer;
}

.notice-detail__index-text-flag {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--benew-fs-xs);
  color: var(--benew-text-faint);
}

.notice-detail__index-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--benew-fs-sm);
  color: var(--benew-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice .empty-list,
.customer-center .empty-list,
.partnership .empty-list {
  padding: 40px 0;
  font-size: var(--benew-fs-md);
  color: var(--benew-text-faint);
  text-align: center;
}

/* 제휴문의 */
.partnership {
  box-sizing: border-box;
  padding: 8px 16px 48px;
  background: var(--benew-white);
}

/* .page-heading 이 좌측 정렬이므로 부제도 같은 축에 둔다. */
.partnership__lead {
  margin: 0 0 var(--benew-space-xl);
  font-size: var(--benew-fs-md);
  line-height: var(--benew-lh-base);
  color: var(--benew-text-muted);
}

.partnership__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--benew-border-light);
}

.partnership__form .text-field,
.partnership__password .text-field {
  box-sizing: border-box;
  width: 100%;
  background: var(--benew-white);
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius) !important;
}

.partnership__form .text-field:focus-within,
.partnership__password .text-field:focus-within {
  border-color: var(--benew-ink) !important;
}

.partnership__form .text-field input,
.partnership__password .text-field input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: var(--benew-fs-md);
  color: var(--benew-ink);
  background: var(--benew-white);
  border: 0 !important;
  border-radius: var(--benew-radius);
  outline: none;
}

.partnership__form .text-field input::placeholder,
.partnership__form .text-field input::-webkit-input-placeholder,
.partnership__password .text-field input::placeholder,
.partnership__password .text-field input::-webkit-input-placeholder {
  color: var(--benew-placeholder);
  opacity: 1;
}

.partnership__textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  font-size: var(--benew-fs-md);
  line-height: 1.5;
  color: var(--benew-ink);
  resize: vertical;
  background: var(--benew-white);
  border: 1px solid var(--benew-border);
  border-radius: var(--benew-radius);
  outline: none;
}

.partnership__textarea:focus {
  border-color: var(--benew-ink);
}

.partnership__textarea::placeholder,
.partnership__textarea::-webkit-input-placeholder {
  color: var(--benew-placeholder);
  opacity: 1;
}

.partnership__secret {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--benew-fs-sm);
  color: var(--benew-ink);
  cursor: pointer;
}

.partnership__secret input[type='checkbox'] {
  appearance: auto;
  -webkit-appearance: checkbox;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--benew-ink);
}

.partnership__terms {
  max-height: 120px;
  overflow: auto;
  padding: 10px 12px;
  font-size: var(--benew-fs-xs);
  line-height: 1.5;
  color: var(--benew-text-muted);
  background: var(--benew-surface-faint);
  border: 1px solid var(--benew-border);
  border-radius: var(--benew-radius);
}

.partnership__submit.btn,
.partnership__form .partnership__submit,
.partnership__password .partnership__submit {
  width: 100%;
  height: 48px;
  margin-top: 4px;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  color: var(--benew-white) !important;
  background: var(--benew-ink) !important;
  border: 0 !important;
  border-radius: var(--benew-radius);
}

.partnership__form .board-form__upload-btn {
  width: 100%;
  height: 48px;
  margin-top: 4px;
  font-size: var(--benew-fs-md);
  font-weight: 500;
  color: var(--benew-ink) !important;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-ink) !important;
  border-radius: var(--benew-radius);
}

.partnership__password {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.partnership__password-lead {
  margin: 0;
  font-size: var(--benew-fs-sm);
  line-height: 1.5;
  color: var(--benew-text-muted);
}

.partnership__attachments {
  margin: 16px 16px 24px;
  padding: 0;
  list-style: none;
}

.partnership__attachments li + li {
  margin-top: 12px;
}

.partnership__attachments img {
  display: block;
  max-width: 100%;
  margin: 0 0 8px;
}

.partnership__attachments a {
  font-size: var(--benew-fs-sm);
  color: var(--benew-ink);
  word-break: break-all;
}

.partnership-modal .title-modal--full {
  display: flex;
  flex-direction: column;
  height: auto !important;
  max-height: 84vh;
}

.partnership-modal .title-modal__content {
  flex: 0 1 auto;
  height: auto !important;
  min-height: 0;
  overflow-y: auto;
}

.partnership-detail {
  padding-bottom: 16px;
}

.partnership-detail .notice-detail__title-box {
  padding: 16px 16px 12px;
}

.partnership-detail .notice-detail__content,
.partnership-detail .notice-detail__content.editor,
.partnership-detail .editor {
  min-height: 0 !important;
  height: auto;
}

.partnership-detail .notice-detail__content {
  max-height: 36vh;
  overflow-y: auto;
  padding: 12px 16px;
}

.partnership__reply {
  margin: 0 16px 12px;
  padding: 16px;
  background: var(--benew-tooltip-bg);
  border-radius: var(--benew-radius-md);
}

.partnership__reply-label {
  margin: 0 0 8px;
  font-size: var(--benew-fs-xs);
  font-weight: 700;
  color: var(--point-color);
}

.partnership__reply-title {
  margin: 0 0 4px;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  color: var(--benew-ink);
}

.partnership__reply-meta {
  margin: 0 0 12px;
  font-size: var(--benew-fs-xs);
  color: var(--benew-text-faint);
}

/* 주문서: 머스트잇처럼 섹션 사이 회색 간격, 안쪽은 한 줄로 압축. 결제 로직은 그대로 */
.l-content:has(.order-sheet) {
  background: var(--benew-surface-tint);
}

.l-content:has(.order-sheet) .page-heading {
  padding: var(--benew-space-lg) var(--benew-page-pad-x) var(--benew-space-md);
  background: var(--benew-white);
}

.order-sheet {
  box-sizing: border-box;
  padding-bottom: 0;
  background: var(--benew-surface-tint);
}

.order-sheet__guest-notice {
  margin: 0 0 8px;
  padding: 10px 16px;
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-xs);
  line-height: 1.4;
  letter-spacing: -0.2px;
  background: var(--benew-white);
}

.order-sheet > .l-panel,
.order-sheet > .order-sheet__section,
.order-sheet > .order-sheet__terms,
.order-sheet > .cash-receipt,
.order-sheet > .order-sheet__item {
  margin: 0 0 8px !important;
  padding: 0 0 12px;
  background: var(--benew-white);
  border: 0;
}

.order-sheet > .order-sheet__item {
  display: block;
  padding: 10px 16px;
}

.order-sheet__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 8px;
}

.order-sheet__address-checks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.order-sheet__address-checks-split {
  color: var(--benew-border-strong);
  font-size: var(--benew-fs-2xs);
  font-weight: 400;
  line-height: 1;
}

.order-sheet__section-head .order-sheet__member-sync.check-radio {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.order-sheet__section-head .order-sheet__member-sync .check-radio__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-2xs);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.2px;
  text-align: right;
}

.order-sheet__section-head .order-sheet__address-checks .order-sheet__member-sync.check-radio {
  flex: 0 0 auto;
}

.order-sheet__section-head .order-sheet__address-checks .order-sheet__member-sync .check-radio__label {
  flex: 0 0 auto;
}

.order-sheet__section-head .order-sheet__member-sync .check-radio__ico {
  flex: 0 0 auto;
  margin: 0 !important;
}

.order-sheet__section-title,
.order-sheet .accordion__title,
.order-sheet__promotion-title,
.order-sheet__pay-method-title,
.order-sheet__cash-receipt-title {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 14px 16px 8px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  background: transparent;
}

.order-sheet__section-head .order-sheet__section-title {
  padding: 0;
}

.order-sheet__control > .flex {
  flex: 1 1 0;
  min-width: 0;
}

.order-sheet__section-head .check-radio {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--benew-fs-xs);
  color: var(--benew-text-sub);
}

.order-sheet .check-radio,
.order-sheet .check-radio input,
.order-sheet .check-radio .check-radio__ico,
.order-sheet .check-radio .check-radio__label {
  cursor: pointer;
}

.order-sheet__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 10px;
  margin: 0;
  padding: 4px 16px;
}

.order-sheet__item-subject {
  flex: 0 0 76px;
  padding-top: 10px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  letter-spacing: -0.2px;
}

@media (max-width: 767px) {
  .order-sheet__section--orderer .order-sheet__item-subject,
  .order-sheet__section--shipping .order-sheet__item-subject {
    flex: 0 0 48px;
    width: 48px;
    white-space: nowrap;
    letter-spacing: -0.5px;
  }

  .order-sheet__section--orderer .order-sheet__item > .email-input + .select-box,
  .order-sheet__section--orderer .order-sheet__alert-msg,
  .order-sheet__section--shipping .order-sheet__alert-msg,
  .order-sheet__section--shipping .order-sheet__customs-id-issuance,
  .order-sheet__section--shipping .order-sheet__customs-verify-msg {
    margin-left: 58px;
  }

  .order-sheet__section--orderer .text-field input,
  .order-sheet__section--orderer select,
  .order-sheet__section--shipping .text-field input,
  .order-sheet__section--shipping select {
    color: var(--benew-ink);
  }

  .order-sheet__section--orderer .text-field input::placeholder,
  .order-sheet__section--orderer .text-field input::-webkit-input-placeholder,
  .order-sheet__section--shipping .text-field input::placeholder,
  .order-sheet__section--shipping .text-field input::-webkit-input-placeholder {
    color: var(--benew-placeholder);
    opacity: 1;
    font-size: var(--benew-fs-md);
    letter-spacing: -0.3px;
  }
}

.order-sheet__item-subject--customs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
}

.order-sheet__item-subject--customs label {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.order-sheet__customs-tip {
  position: relative;
  display: inline-flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--benew-text-muted);
  font-size: var(--benew-fs-2xs);
  font-weight: 700;
  line-height: 1;
  background: var(--benew-white);
  border: 1px solid var(--benew-text-faint);
  border-radius: 50%;
  cursor: pointer;
}

.order-sheet__customs-tip-text {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  color: var(--benew-white);
  font-size: var(--benew-fs-2xs);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.2px;
  white-space: normal;
  text-align: left;
  background: var(--benew-ink);
  border-radius: var(--benew-radius-sm);
}

.order-sheet__customs-tip:hover .order-sheet__customs-tip-text,
.order-sheet__customs-tip.is-open .order-sheet__customs-tip-text {
  display: block;
}

.order-sheet__item
  > *:not(.order-sheet__item-subject):not(.order-sheet__alert-msg):not(.order-sheet__customs-id-issuance):not(
    .order-sheet__customs-verify-msg
  ):not(.order-sheet__accumulation-amt) {
  flex: 1 1 0;
  min-width: 0;
}

.order-sheet__item > .email-input + .select-box {
  flex: 1 1 100%;
  margin-left: 86px;
}

.order-sheet__item .country-select-box:empty {
  display: none;
}

.order-sheet .address-form {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.order-sheet .address-form .text-field,
.order-sheet .address-form__zip-code,
.order-sheet .address-form p {
  margin: 0;
}

.order-sheet .address-form__zip-code {
  display: contents;
}

.order-sheet .address-form__zip-code .text-field {
  flex: 0 0 58px;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  order: 1;
}

.order-sheet .address-form__zip-code .text-field input {
  padding: 0 4px;
  font-size: var(--benew-fs-sm);
  text-align: center;
  letter-spacing: 0;
}

.order-sheet .address-form__zip-code .btn {
  flex: 0 0 118px;
  width: 118px;
  max-width: 118px;
  order: 3;
  height: 40px;
  padding: 0;
  color: var(--benew-ink) !important;
  font-size: var(--benew-fs-sm);
  font-weight: 600;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-ink) !important;
  border-radius: var(--benew-radius);
}

.order-sheet .address-form > .text-field:nth-of-type(1) {
  flex: 1 1 0;
  min-width: 0;
  order: 2;
}

.order-sheet .address-form > .text-field:nth-of-type(2) {
  flex: 1 1 100%;
  min-width: 0;
  order: 4;
}

@media (max-width: 767px) {
  .order-sheet .address-form__zip-code .text-field {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    order: 1;
  }

  .order-sheet .address-form__zip-code .text-field input {
    padding: 0 12px;
    text-align: left;
  }

  .order-sheet .address-form__zip-code .btn {
    order: 2;
  }

  .order-sheet .address-form > .text-field:nth-of-type(1) {
    flex: 1 1 100%;
    order: 3;
  }

  .order-sheet .address-form > .text-field:nth-of-type(2) {
    flex: 1 1 100%;
    order: 4;
  }
}

.order-sheet__control {
  display: flex;
  flex: 1 1 0;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.order-sheet__control .text-field,
.order-sheet__control .select-box {
  height: 40px;
  margin: 0;
}

.order-sheet__control .text-field,
.order-sheet__customs-field {
  flex: 1 1 0;
  min-width: 0;
}

.order-sheet__customs-field {
  position: relative;
}

.order-sheet__customs-field .text-field {
  width: 100%;
}

.order-sheet__customs-field.is-ok .text-field input {
  padding-right: 96px;
}

.order-sheet__control .order-sheet__domain-select,
.order-sheet__control .select-box {
  flex: 0 0 118px;
  width: 118px;
  max-width: 118px;
  margin-left: 0 !important;
}

.order-sheet__control .order-sheet__domain-select select,
.order-sheet__control .select-box select {
  padding-right: 22px;
  overflow: visible;
  font-size: var(--benew-fs-sm);
}

.order-sheet__control .select-box select {
  width: 100%;
  height: 40px;
}

.order-sheet__control > .select-box:only-child {
  flex: 1 1 0;
  width: auto;
  max-width: none;
}

.order-sheet__custom-memo {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
}

.order-sheet__alert-msg,
.order-sheet__customs-id-issuance,
.order-sheet__customs-verify-msg {
  flex: 1 1 100%;
  margin: 0 0 0 86px;
  padding: 0;
}

.order-sheet__customs-verify-btn.btn,
.order-sheet__side-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 118px;
  width: 118px;
  max-width: 118px;
  height: 40px;
  padding: 0;
  color: var(--benew-ink) !important;
  font-size: var(--benew-fs-sm);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-ink) !important;
  border-radius: var(--benew-radius);
}

.order-sheet__customs-verify-btn.btn:disabled {
  color: var(--benew-ink) !important;
  background: var(--benew-surface-tone) !important;
  border-color: var(--benew-ink) !important;
  opacity: 1;
}

.order-sheet__customs-verify-msg {
  font-size: var(--benew-fs-xs);
  line-height: 1.4;
}

.order-sheet__customs-verify-msg.is-ok {
  color: var(--benew-success-text);
}

.order-sheet__customs-verify-msg.is-error {
  color: var(--benew-danger-text);
}

.order-sheet .text-field input:disabled,
.order-sheet select:disabled {
  color: var(--benew-ink) !important;
  background: var(--benew-surface-tone) !important;
  opacity: 1;
}

.order-sheet .address-form.is-locked .btn {
  color: var(--benew-ink) !important;
  background: var(--benew-surface-tone) !important;
  pointer-events: none;
}

.order-sheet__address-select.is-locked {
  pointer-events: none;
}

.order-sheet__lock-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.order-sheet__lock-wrap .order-sheet__control,
.order-sheet__lock-wrap .address-form {
  width: 100%;
}

.order-sheet__lock-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.order-sheet__customs-confirm {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: auto;
}

.order-sheet__customs-confirm-dim {
  position: absolute;
  inset: 0;
  background: var(--benew-dim);
}

.order-sheet__customs-confirm-box {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border-card);
  border-radius: var(--benew-radius-2xl);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  transform: translate(-50%, -50%);
}

.order-sheet__customs-confirm-text {
  margin: 0;
  padding: 28px 20px 20px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.3px;
  text-align: center;
  word-break: keep-all;
}

.order-sheet__customs-confirm-btns {
  display: flex;
  align-items: stretch;
  gap: 8px;
  box-sizing: border-box;
  padding: 0 16px 16px;
}

.order-sheet__customs-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.3px;
  text-align: center;
  background: var(--benew-white);
  border: 1px solid var(--benew-ink);
  border-radius: var(--benew-radius);
  appearance: none;
  -webkit-appearance: none;
}

.order-sheet__customs-confirm-btn.is-ok {
  color: var(--benew-white);
  background: var(--benew-ink);
}

.order-sheet__customs-verify-msg.is-in-field {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 1;
  flex: none;
  margin: 0;
  font-size: var(--benew-fs-xs);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}

.order-sheet__item--checks {
  display: block;
}

.order-sheet .text-field,
.order-sheet .select-box {
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius) !important;
}

.order-sheet .text-field:focus-within,
.order-sheet .select-box:focus-within {
  border-color: var(--benew-ink) !important;
}

.order-sheet .text-field input,
.order-sheet select {
  height: 40px;
}

.order-sheet .order-sheet__promotion .order-sheet__promotion-items {
  padding: 0 !important;
  background: transparent !important;
}

.order-sheet .order-sheet__promotion .order-sheet__item {
  margin-bottom: 0 !important;
}

.order-sheet .order-sheet__promotion .order-sheet__item-subject {
  display: block !important;
  flex: 0 0 76px !important;
  width: 76px;
  margin: 0 !important;
  padding-top: 10px;
}

@media (max-width: 767px) {
  .order-sheet .order-sheet__promotion .order-sheet__item-subject {
    flex: 0 0 48px !important;
    width: 48px;
    white-space: nowrap;
    letter-spacing: -0.8px;
  }
}

.order-sheet .order-sheet__promotion-input {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 6px !important;
}

.order-sheet .order-sheet__money-field {
  position: relative;
  display: flex;
  flex: 1 1 0 !important;
  align-items: center;
  min-width: 0;
  height: 40px;
  background: var(--benew-white);
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius);
}

.order-sheet .order-sheet__money-field:focus-within {
  border-color: var(--benew-ink) !important;
}

.order-sheet .order-sheet__money-field .text-field {
  flex: 1 1 0;
  width: 100%;
  height: 40px;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
}

.order-sheet .order-sheet__money-field input {
  width: 100%;
  height: 40px !important;
  padding: 0 28px 0 10px !important;
  color: var(--benew-ink) !important;
  font-size: var(--benew-fs-sm);
  letter-spacing: -0.2px;
  text-align: right;
  background: transparent !important;
}

.order-sheet .order-sheet__money-unit {
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.2px;
  pointer-events: none;
  transform: translateY(-50%);
}

.order-sheet .order-sheet__accumulation-amt {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin: 0 0 0 86px !important;
  padding: 0 0 4px;
  color: var(--benew-text-weak) !important;
  font-size: var(--benew-fs-xs);
  line-height: 1.4;
  letter-spacing: -0.2px;
}

@media (max-width: 767px) {
  .order-sheet .order-sheet__accumulation-amt {
    margin-left: 58px !important;
  }
}

.order-sheet .order-sheet__accumulation-amt p {
  margin: 0;
}

.order-sheet .order-sheet__promotion-input .btn,
.order-sheet .order-sheet__promotion-input button,
.order-sheet__sign-in-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 118px !important;
  width: 118px !important;
  max-width: 118px !important;
  height: 40px !important;
  padding: 0 !important;
  color: var(--benew-ink) !important;
  font-size: var(--benew-fs-sm) !important;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-ink) !important;
  border-radius: var(--benew-radius) !important;
}

.order-sheet__pay-wrap {
  margin-top: -8px;
  padding: 0 16px 32px;
  background: var(--benew-white);
}

.order-sheet__pay-agree {
  margin: 0 0 12px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.2px;
  text-align: center;
}

.order-sheet__pay-btn {
  display: block;
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  padding: 0;
  width: 100%;
  color: var(--benew-white) !important;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  background: var(--point-color) !important;
  border: 1px solid var(--point-color) !important;
  border-radius: var(--benew-radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}

.order-sheet__pay-btn:active {
  transform: scale(0.98);
  filter: brightness(0.86);
}

/* KCP 결제창: position:fixed인데 top에 scrollTop을 더해서 주문서 아래로 밀림 */
#NAX_BLOCK {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

#blockOverlayID,
body > .blockUI.blockOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.order-confirm {
  overflow-x: hidden;
}

.order-confirm__message,
.order-confirm__message-title,
.order-confirm__sub-message {
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.order-confirm__retry-btn {
  color: var(--benew-white) !important;
  background: var(--benew-ink) !important;
  border: 1px solid var(--benew-ink) !important;
}

.order-sheet .price-tag {
  margin: 0 16px;
  border-color: var(--benew-border-light);
}

.order-sheet .price-tag__final-amount dt,
.order-sheet .price-tag__final-amount dd {
  color: var(--benew-ink);
  font-weight: 700;
}

.order-sheet__payment-summary.price-tag {
  padding: 16px;
}

.order-sheet__payment-rows,
.order-sheet__payment-final {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.order-sheet__payment-row,
.order-sheet__payment-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-sheet__payment-row dt,
.order-sheet__payment-row dd {
  margin: 0;
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.order-sheet__payment-row dt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.order-sheet__payment-row dd {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex: 0 0 auto;
  color: var(--benew-ink);
  text-align: right;
}

.order-sheet__payment-amt {
  display: grid;
  grid-template-columns: 88px 16px;
  column-gap: 4px;
  align-items: baseline;
  justify-items: end;
}

.order-sheet__payment-sign {
  margin-right: 3px;
  color: inherit;
}

.order-sheet__payment-amt em {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  width: 100%;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
  text-align: right;
}

.order-sheet__payment-unit {
  width: 16px;
  color: inherit;
  text-align: right;
}

.order-sheet__payment-row--detail dt,
.order-sheet__payment-row--detail dd,
.order-sheet__payment-row--detail .order-sheet__payment-amt em,
.order-sheet__payment-row--detail .order-sheet__payment-unit,
.order-sheet__payment-row--detail .order-sheet__payment-sign {
  color: var(--benew-text-faint);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
}

.order-sheet__payment-row--detail dt::before {
  content: '└ ';
}

.order-sheet__payment-row--toggle {
  cursor: pointer;
}

.order-sheet__payment-row--toggle:hover dt,
.order-sheet__payment-row--toggle:hover .order-sheet__payment-toggle::before {
  color: var(--benew-ink);
}

.order-sheet__payment-row--toggle:hover .order-sheet__payment-toggle::before {
  border-color: var(--benew-ink);
}

.order-sheet__payment-toggle {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.order-sheet__payment-toggle::before {
  display: block;
  width: 6px;
  height: 6px;
  margin: 2px auto 0;
  border-right: 1.5px solid var(--benew-text-weak);
  border-bottom: 1.5px solid var(--benew-text-weak);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  content: '';
}

.order-sheet__payment-toggle.is-open::before {
  margin-top: 5px;
  transform: rotate(-135deg);
}

.order-sheet__payment-discount-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.order-sheet__payment-discount-details > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.order-sheet__payment-discount-details.is-open {
  grid-template-rows: 1fr;
}

.order-sheet__payment-divider {
  height: 0;
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--benew-border-light);
}

.order-sheet__payment-final {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.order-sheet__payment-final dt,
.order-sheet__payment-final dd {
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.order-sheet__payment-final dd {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  color: var(--point-color);
  text-align: right;
}

.order-sheet__payment-final .order-sheet__payment-amt em {
  color: var(--point-color);
  font-size: var(--benew-fs-2xl);
  font-weight: 700;
}

.order-sheet__payment-final .order-sheet__payment-unit {
  color: var(--point-color);
}

.order-sheet__pay-method-btns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  padding: 4px 16px 16px;
}

.order-sheet__pay-method-item,
.order-sheet__pay-method-naver .pay-method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 60px !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  overflow: hidden;
  background: var(--benew-white) !important;
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius) !important;
  cursor: pointer;
}

.order-sheet__pay-method-naver {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 60px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.order-sheet__pay-method-item {
  flex-direction: column;
  gap: 1px;
  color: var(--benew-text-faint);
  letter-spacing: 0;
}

.order-sheet__pay-method-main {
  color: var(--benew-text-sub);
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.order-sheet__pay-method-sub {
  color: var(--benew-border-mid);
  font-size: var(--benew-fs-2xs);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.order-sheet__pay-method-item.is-selected {
  color: var(--benew-white);
  background: var(--benew-text-body) !important;
  border-color: var(--benew-text-body) !important;
}

.order-sheet__pay-method-item.is-selected .order-sheet__pay-method-main {
  color: var(--benew-white);
}

.order-sheet__pay-method-item.is-selected .order-sheet__pay-method-sub {
  color: rgba(255, 255, 255, 0.72);
}

.order-sheet__pay-method-naver.is-selected .pay-method-btn {
  background: var(--benew-text-body) !important;
  border-color: var(--benew-text-body) !important;
  color: var(--benew-white) !important;
}

.order-sheet__installment-wrap {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  overflow: hidden;
  transition: grid-template-rows 0.22s ease;
}

.order-sheet__installment-wrap > div {
  min-height: 0;
  overflow: hidden;
}

.order-sheet__installment-wrap.is-open {
  grid-template-rows: 1fr;
}

.order-sheet__installment-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-align: left;
  background: var(--benew-white);
  border: 0;
  border-bottom: 1px solid var(--benew-border-light);
  cursor: pointer;
}

.order-sheet__installment-banner .product-summary__installment-value {
  flex: 1;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  text-align: left;
}

.order-sheet__installment-banner .product-summary__installment-arrow {
  flex: 0 0 auto;
}

body:has(.order-sheet) .fab-top-down,
body:has(.order-sheet) .footer {
  display: none !important;
}

.order-sheet__terms {
  padding: 12px 16px !important;
}

@media (max-width: 767px) {
  .order-sheet__terms .check-radio__label,
  .order-sheet__terms .order-sheet__term-view-btn {
    font-size: var(--benew-fs-sm);
  }
}

.order-sheet__term-checker--master {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--benew-border-light);
}

.order-sheet__term-children {
  padding: 4px 0 0 8px;
}

.order-sheet__term-children .order-sheet__term-checker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  position: relative;
  min-height: 28px;
  margin: 0;
  padding: 0 0 0 17px;
}

.order-sheet__term-children .order-sheet__term-checker::before,
.order-sheet__term-children .order-sheet__term-checker::after {
  content: '';
  position: absolute;
  left: 0;
  box-sizing: border-box;
}

.order-sheet__term-children .order-sheet__term-checker::before {
  top: 0;
  width: 0;
  height: 100%;
  border-left: 1px solid var(--benew-border-tone-4);
}

.order-sheet__term-children .order-sheet__term-checker::after {
  top: calc(50% + 3px);
  width: 12px;
  height: 0;
  border-top: 1px solid var(--benew-border-tone-4);
}

.order-sheet__term-children .order-sheet__term-checker:last-child::before {
  height: calc(50% + 3px);
}

.order-sheet__term-checker-body {
  display: flex;
  align-items: center;
  min-width: 0;
}

.order-sheet__term-children .order-sheet__term-checker .check-radio {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.order-sheet__term-children .order-sheet__term-checker .check-radio .check-radio__label {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.order-sheet__term-children .order-sheet__term-view-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: 0.25em;
  flex: 0 0 auto;
}

.order-sheet__term-modal {
  padding: 20px 20px 4px;
}

.order-sheet__term-modal-title {
  margin: 0 0 8px;
  font-size: var(--benew-fs-md);
  font-weight: 600;
}

.order-sheet__term-modal-section + .order-sheet__term-modal-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--benew-border-light);
}

.order-sheet__product-table,
.order-sheet .thumb-list,
.order-sheet .thumb-LIST {
  padding: 0 16px 4px;
}

.order-sheet__section--products {
  padding-bottom: 6px !important;
}

.order-sheet__section--products .order-sheet__section-title {
  padding: 12px 16px 4px;
}

.order-sheet .product-thumb-item {
  align-items: center;
  min-height: 0;
  padding: 6px 0;
}

.order-sheet .product-thumb-item .thumb-item__media,
.order-sheet .product-thumb-item .thumb-item__img,
.order-sheet .product-thumb-item .thumb-item__img-box {
  box-sizing: border-box;
  width: 80px !important;
  height: 80px !important;
  min-width: 80px;
  max-width: 80px;
  min-height: 80px;
  max-height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--benew-white);
}

.order-sheet .product-thumb-item .thumb-item__img img {
  width: 100% !important;
  height: 100% !important;
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 767px) {
  .order-sheet .product-thumb-item .thumb-item__media,
  .order-sheet .product-thumb-item .thumb-item__img,
  .order-sheet .product-thumb-item .thumb-item__img-box {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
  }

  .order-sheet .product-thumb-item .thumb-item__img img {
    max-width: 100px;
    max-height: 100px;
  }

  .order-sheet .product-thumb-item .thumb-item__info {
    padding-left: 8px !important;
  }
}

.order-sheet .product-thumb-item__meta {
  margin: 4px 0 0;
  color: var(--benew-text-weak);
  font-size: var(--benew-fs-xs);
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.order-sheet .product-thumb-item__amount-wrap {
  display: none;
}

.order-sheet__alert-msg {
  flex: 1 1 100%;
  margin: 0 0 0 86px;
  padding: 0;
  list-style: none;
  font-size: var(--benew-fs-2xs);
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.order-sheet__alert-msg--hint,
.order-sheet__alert-msg--error {
  color: var(--point-color);
}

.order-sheet__alert-msg--ok {
  color: var(--benew-ink);
}

/* iOS Safari: 입력칸 글자가 16px 미만이면 포커스 때 화면을 확대하고, 그 상태로 가로 스크롤이 남는다.
   샵바이 common.css가 html을 87.5%(14px)로 두고 body/input이 그걸 물려받아서 상품문의·게시판·1:1·주문서 전부가 같이 터진다.
   1rem은 모바일에서 14px이므로 여기만 16px로 고정한다. */
@media (hover: none), (max-width: 1023px) {
  input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio']):not(
      [type='file']
    ):not([type='hidden']):not([type='range']):not([type='image']):not([type='color']),
  textarea,
  select,
  [contenteditable='true'] {
    font-size: var(--benew-fs-xl) !important;
  }

  .order-sheet
    input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio']):not(
      [type='file']
    ):not([type='hidden']):not([type='range']):not([type='image']):not([type='color']),
  .order-sheet textarea,
  .order-sheet select {
    font-size: var(--benew-fs-md) !important;
  }
}