/* 예시파일 */

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

@charset 'utf-8';
/* 글꼴 파일(Montserrat / Pretendard)은 public/index.html 의 link 로 받는다.
   여기 @import 로 두면 CSS 파싱이 끝난 뒤에야 요청이 나가 첫 화면이 한 번 튄다. */

/* ============================================================================
   비뉴럭스 디자인 토큰
   ----------------------------------------------------------------------------
   여기가 스킨 전체의 단일 통제 지점이다. 페이지 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;

  /* --- 글꼴 (형아 2026-09-19) ---------------------------------------------
     이 스택 말고 다른 글씨체는 쓰지 않는다. 새 규칙에도 font-family 를 직접
     적지 말고 이 변수나 inherit 을 쓴다.
     영문·숫자는 Montserrat(지오메트릭 산세리프)가 먼저 잡고, Montserrat 에
     없는 한글만 Pretendard 로 떨어진다. 순서가 곧 역할 분담이다.
     Pretendard 는 한·영 베이스라인이 맞고 가변 굵기를 지원한다.
     Noto Sans KR 은 Pretendard CDN 이 막혔을 때만 쓰는 마지막 그물이다. */
  --benew-font-sans: Montserrat, 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;

  /* --- 타입 스케일 -------------------------------------------------------- */
  --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 */

  /* 판매가 상한 (형아 2026-09-19)
     오픈마켓은 가격을 24px 빨강 볼드로 때리지만 럭셔리는 상품명과 비슷한 급으로 눕힌다.
     상세 대표가도 이 값을 넘기지 않는다. 상세 데스크톱 스케일 업에도 딸려 올라가지 않도록
     .product-detail 오버라이드에서 이 토큰은 건드리지 않는다. */
  --benew-fs-price: calc(1.0625 * var(--benew-root)); /* 17px */

  /* --- 행간 / 자간 -------------------------------------------------------- */
  --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;

  /* 대문자 조판 자간 (형아 2026-09-19)
     럭셔리의 여백감은 글자를 키워서가 아니라 여기서 나온다. 값은 Tailwind 눈금과 맞춘다.
     한글에는 0.05em 위를 쓰지 않는다. 자모가 흩어져 오히려 싸구려로 보인다. */
  --benew-ls-soft: 0.025em; /* CTA 버튼. tracking-wide */
  --benew-ls-wider: 0.05em; /* 브랜드명·뱃지·하단탭. tracking-wider */
  --benew-ls-widest: 0.1em; /* 모바일 섹션 타이틀. tracking-widest */
  --benew-ls-luxe: 0.15em; /* 로고·PC 섹션 타이틀 */
  --benew-ls-ko: 0.02em; /* 한글이 섞이는 메뉴. 위 값을 쓰면 벌어진다 */

  /* --- 스페이스 스케일 ---------------------------------------------------- */
  --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-modal-pad-x: var(--benew-space-lg); /* 팝업 헤더·본문 좌우. 같아야 X와 본문 끝선이 맞는다 */
  --benew-modal-close: 28px; /* 팝업 헤더 좌우 칸. 타이틀이 전체 폭 정중앙에 오게 */
  --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 */

  /* 세로형 콘텐츠(상품 상세·공지·안내) 전용 리듬. 럭셔리 핏을 위해 여유롭게. */
  /* 진열 섹션 제목. 모바일 20px / PC 24px (형아 2026-09-19 권장표).
     26px 는 오픈마켓 헤드라인 크기다. 럭셔리는 크기를 줄이고 자간으로 세운다. */
  --benew-section-title-fs: calc(1.25 * var(--benew-root)); /* 20px */
  --benew-section-title-gap: var(--benew-space-2xl); /* 24px. 메인 섹션 제목↔흰 칸 */
  --benew-section-gray-gap: calc(0.625 * var(--benew-root)); /* 10px. 샵바이 l-panel 회색 띠 */
  --benew-main-grid-cols: 2;
  --benew-main-grid-gap: var(--benew-space-md);
  --benew-flow-gap: var(--benew-space-3xl); /* 블록과 블록 사이 */
  --benew-flow-gap-sm: var(--benew-space-xl); /* 블록 안쪽 항목 사이 */
  --benew-page-pad-x: var(--benew-space-lg); /* 페이지 좌우 기본 안여백 */
  --benew-pdp-info-gap: calc(1.125 * var(--benew-root)); /* 18px. PRODUCT INFO~공식공급사 */
  --benew-chip-pad-x: 10px; /* 필터 칩 안쪽. 경로 글자는 이 값+테두리만큼 들여 글자를 맞춘다 */
  --benew-plp-row-gap: calc(5 * var(--benew-root)); /* 80px. PLP 행간. 기존 28의 약 3배 */

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

  /* CTA·활성 표시는 대표색(빨강)을 쓰지 않는다 (형아 2026-09-19).
     빨강은 초특가·긴급을 파는 색이라 럭셔리에서 안 쓴다. 파페치·마이테레사·
     매치스 전부 검정이다. 대표색 변수 자체는 그대로 둔다 — 어드민 주입값이고
     장바구니 뱃지·품절 표시 같은 곳은 계속 그 색을 쓴다. */
  --benew-cta-bg: #000;
  --benew-cta-ink: #fff;

  /* --- 글자색 -------------------------------------------------------------
     슬레이트(#64748b 계열)는 푸른 끼가 남아 링크처럼 보인다.
     단계는 Tailwind neutral. 본문 설명은 --benew-ink-name (#737373). */
  --benew-ink: #111; /* 본문·제목 기본 */
  --benew-ink-deep: #171717;
  --benew-ink-soft: #262626;
  --benew-ink-800: #262626;
  --benew-ink-700: #404040;
  --benew-ink-600: #525252;
  --benew-ink-500: #737373;
  --benew-ink-name: #737373;
  --benew-ink-400: #a3a3a3;
  --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: #525252;

  /* --- 면(surface) -------------------------------------------------------- */
  --benew-white: #fff;
  --benew-surface-sub: #fafafa;
  --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: #f5f5f5;
  --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: #e5e5e5;
  --benew-border-dashed: #d4d4d4;
  --benew-border-mid: #bbb;
  --benew-border-tone: #cfcfcf;
  --benew-border-tone-2: #d2d2d2;
  --benew-border-tone-3: #d8d8d8;
  --benew-border-tone-4: #e0e0e0;
  --benew-border-hair: #f5f5f5; /* 스펙표 상하 기준선. Tailwind neutral-100 */
  --benew-divider: #f5f5f5;

  /* --- 상태색 ------------------------------------------------------------- */
  --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: 0; /* 입력창·버튼 직각. 예전 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(0, 0, 0, 0.04);
  /* 와이드 PC에서 750 몰이 흰 캔버스 위에 뜨는 그림자 (형아 2026-09-20). */
  --benew-mall-float: 0 0 40px rgba(0, 0, 0, 0.05);
  --benew-dim: rgba(0, 0, 0, 0.38); /* 모달·오버레이 딤 */

  /* --- 레이아웃 (기존 이름 유지: 다른 규칙·JSX가 참조 중) ----------------- */
  --mall-width: 750px;
  --benew-left-logo: 400px;
  --benew-left-logo-gap: 40px;
  --app-header-h: 44px;
  --benew-pdp-pager-h: calc(0.75 * var(--benew-root)); /* 슬라이더 페이지네이션 10+2 */
  --benew-pdp-gallery-collapsed-h: calc(min(100vw, 500px) * 0.64);
  --benew-instagram-chrome: 208px; /* 정사각 게시 캡션·좋아요·댓글. 인스타 MEASURE가 덮는다 */

  /* --- 오로라 원본 변수명 호환 레이어 -------------------------------------
     @shopby 컴포넌트와 기존 규칙이 이 이름들을 참조한다. 값은 토큰으로 넘긴다. */
  --whole-color: var(--benew-white);
  --background-color: var(--benew-white);
  --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;
  background-color: var(--benew-white);
}

/* 어드민이 html 인라인으로 --background-color:#F5F6F8 을 넣는다.
   body/common.css 가 var(--background-color) 를 쓰므로 변수 자체를 흰색으로 덮는다. */
html {
  --background-color: var(--benew-white) !important;
  background-color: var(--benew-white) !important;

  /* 스크롤바 자리를 항상 비워 둔다.
     오버레이(검색·옵션시트·모달)는 html 에 overflow:hidden 을 건다. 그러면 스크롤바가
     사라져 뷰포트가 15px 넓어지고, 뷰포트 기준인 position:fixed 요소 — 하단 5탭,
     구매바, PC 좌측 로고, 맨위로 버튼 — 가 전부 7.5px 오른쪽으로 튄다.
     body 에 padding-right 로 보정해도 fixed 에는 닿지 않아 그동안 요소마다
     좌표를 따로 박아 왔다. 폭이 처음부터 안 변하면 그 보정 자체가 필요 없다.
     짧은 페이지↔긴 페이지 이동 때 스크롤바가 생겼다 사라지며 생기던 흔들림도 같이 사라진다.
     모바일은 오버레이 스크롤바라 예약 폭이 0 이다. */
  scrollbar-gutter: stable;
}

/* 글꼴은 여기 한 곳에서만 정한다. 샵바이 common.css 의 body 선언을 덮는다.
   input·button·select·textarea 는 브라우저 기본 글꼴을 쓰고 상속하지 않으므로
   따로 묶어 준다. 이 네 가지를 빼면 주문서·검색창만 다른 글씨체가 된다.
   본문(타이틀 아닌 글)은 400 / 자간 normal. 한글에 0.05em 이상·음수 조임 금지.
   어드민·워드 붙여넣기(맑은 고딕·Apple SD Gothic)는 화면에서만 우리 스택으로 덮는다. */
html,
body,
input,
button,
select,
textarea,
optgroup {
  font-family: var(--benew-font-sans);
}

/* 입력·버튼 모서리는 직각. 예전 6px(--benew-radius) 과 샵바이 rounded 를 여기서 덮는다.
   원형(50%) 소셜 아이콘·체크/라디오는 제외. */
input:not([type='checkbox']):not([type='radio']),
textarea,
select,
button,
.btn,
a.btn,
.text-field,
.select-box,
.header__search-input,
.quantity,
.quantity button {
  border-radius: 0 !important;
}

body {
  background-color: var(--benew-white) !important;
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: var(--benew-lh-base);
  letter-spacing: normal;
  color: var(--benew-ink);
}

.editor,
.sanitize-wrap,
.footer,
.full-modal .title-modal__content,
.notice-detail__content {
  font-family: var(--benew-font-sans);
  letter-spacing: normal;
}

.editor,
.editor *,
.sanitize-wrap,
.sanitize-wrap * {
  font-family: inherit !important;
}

.editor [style],
.sanitize-wrap [style] {
  letter-spacing: normal !important;
}

/* 공통 팝업 크롬 (형아 2026-09-20 박제). 예외 없음.
   TitleModal / FullModal / PurchaseLayer / alert·confirm / 커스텀 레이어.
   새 팝업은 이 선택자를 탄다. 페이지 JSX에서 radius·X·탭·본문색을 다시 쓰지 않는다. */
.modal,
.full-modal,
.title-modal,
.purchase-layer__box,
.purchase.product-detail.is-option-open,
.purchase__option-box,
.order-sheet__customs-confirm-box,
.identification-verification-modal {
  border-radius: 0 !important;
  box-shadow: none;
}

.title-modal__header,
.identification-verification-modal__header {
  display: grid;
  grid-template-columns: var(--benew-modal-close) minmax(0, 1fr) var(--benew-modal-close);
  align-items: center;
  justify-content: initial;
  gap: 0;
  box-sizing: border-box;
  min-height: var(--benew-space-5xl);
  padding: 0 var(--benew-modal-pad-x);
}

.title-modal__title,
.identification-verification-modal__title {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--benew-ink);
  font-weight: 300;
  letter-spacing: var(--benew-ls-ko);
  text-align: center;
  text-transform: none;
}

.title-modal__content {
  padding-left: var(--benew-modal-pad-x);
  padding-right: var(--benew-modal-pad-x);
}

.title-modal__content,
.title-modal__content p,
.title-modal__content li,
.title-modal__content .editor,
.title-modal__content .editor * {
  color: var(--benew-ink-name);
  font-weight: 400;
  letter-spacing: normal;
}

.title-modal__content .editor b,
.title-modal__content .editor strong,
.title-modal__content b,
.title-modal__content strong {
  color: var(--benew-ink);
}

.modal .tabs__item,
.full-modal .tabs__item,
.title-modal__content .tabs__item,
.purchase-layer .tabs__item {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.modal .tabs__item.on,
.full-modal .tabs__item.on,
.title-modal__content .tabs__item.on,
.purchase-layer .tabs__item.on {
  color: var(--benew-ink);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--benew-ink);
}

.title-modal__close-btn,
.identification-verification-modal__close-btn,
.modal [class$='__close-btn'],
.purchase-layer [class$='__close-btn'] {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: flex;
  grid-column: 3;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: var(--benew-modal-close);
  height: var(--benew-modal-close);
  margin: 0;
  padding: 0;
}

.title-modal__close-btn .ico,
.title-modal__close-btn .ico--x-black,
.identification-verification-modal__close-btn .ico--x-black,
.modal .ico--x-black,
.purchase-layer .ico--x-black {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  background: none !important;
  background-image: none !important;
}

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

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

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

.page {
  --background-color: var(--benew-white);
  background-color: var(--benew-white);
}

/* 상품 카드 브랜드명. 크기는 작게(11px), 두께·자간으로 로고처럼 세운다.
   1줄 고정 (형아 2026-09-19): 2단 그리드에서 브랜드가 두 줄로 흘러내리면 카드 높이가
   서로 어긋나 열이 깨진다. 넘치면 말줄임. */
.product-thumb-brand {
  display: block;
  overflow: hidden;
  padding: 2px 0 0;
  font-size: var(--benew-fs-2xs);
  font-weight: 700;
  line-height: 1.35;
  color: var(--benew-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 브랜드만 노출하는 진열 카드는 예외로 두 줄까지 (형아 2026-09-19).
   브랜드가 카드의 유일한 정보다. HOT·MD 슬라이드는 카드 폭이 63px 까지 좁아져서
   한 줄로 자르면 'BOTTEGA…' 가 되어 무슨 브랜드인지 못 읽는다.
   1줄 원칙은 브랜드+상품명+가격이 같이 서는 2단 그리드 카드에만 적용한다.
   1줄 규칙 쪽에서 :not(--only) 로 빼 두었다. */
.product-thumb-brand--only {
  display: -webkit-box !important;
  -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;
  /* break-word 면 4열 슬라이드의 좁은 칸에서 'VALENTI / NO' 처럼 한 단어가 잘린다.
     넘치면 단어째로 말줄임하는 쪽이 읽힌다. */
  word-break: keep-all;
  overflow-wrap: normal;
}

.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;
}

/* 메인 진열 그리드. 샵바이 기본은 PC 4열(width: calc(25% - 5px))·EVENT 2x2·인기 LIST 가
   제각각이라 750 폭에서 썸네일이 150px 남짓으로 뭉개진다.
   모바일 2열 / PC(1001+) 3열로 전 섹션 뼈대를 맞춘다. flex·margin-left 도 같이 되돌린다. */
.main-view .product-section .thumb-GALLERY {
  display: grid;
  grid-template-columns: repeat(var(--benew-main-grid-cols), minmax(0, 1fr));
  gap: var(--benew-main-grid-gap);
}

.main-view .product-section .thumb-GALLERY .thumb-item {
  width: auto;
  margin-left: 0;
  flex: none;
}

.main-view .product-section .thumb-item__info,
.main-view .product-section .thumb-item__info > a,
.main-view .product-section .product-thumb-copy-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.main-view .product-section .thumb-item__info > a {
  color: inherit;
  text-decoration: none;
}

/* 페이지 상단 제목. 공지·브랜드·위시리스트·로그인·제휴문의·장바구니·FAQ·회원가입·고객센터·주문서·내 정보 공용.
   좌우 여백은 각 페이지 본문(.partnership, .notice, .customer-center ...)과 같은 --benew-page-pad-x 라
   제목 왼쪽 라인이 본문 첫 글자와 정확히 맞는다. 값을 바꾸려면 본문 padding 도 같이 봐야 한다. */
.l-content .page-heading,
.header--sub .header__title,
.header--tab .header__title,
.benew-page-title,
.breadcrumb--plp .benew-page-title {
  font-weight: 300;
  letter-spacing: var(--benew-ls-widest);
  text-transform: uppercase;
  color: var(--benew-ink);
}

.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: inherit;
  font-size: var(--benew-section-title-fs);
  line-height: 1;
  text-align: left;
}

/* 헤더에 이미 영문 타이틀이 있는 탭 페이지는 본문 h1 을 겹쳐 쓰지 않는다. */
.page:has(.header--tab) .l-content .page-heading {
  display: 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;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.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;
}

/* 로고 바는 홈·상세·장바구니 등에서만 붙박이다. 높이는 44px 로 고정한다.
   검색칸을 이 안에 넣고 접으면 문서 높이가 변해서 상단이 떤다. 검색칸은 밖에 둔다.
   샵바이 .header 기본 sticky 와 겹치면 1px 어긋나므로 헤더는 항상 relative. */
.app-chrome {
  position: sticky;
  top: 0;
  z-index: 8;
  box-sizing: border-box;
  isolation: isolate;
  background: var(--benew-white);
  /* 경계선은 border 로 두면 안 된다. 헤더가 45px 이 되어 --app-header-h(44px) 를 쓰는
     상세 탭 sticky 와 1px 어긋나고, 그 1px 이 스크롤 중 번갈아 그려지며 떨려 보인다. */
  box-shadow: inset 0 -1px 0 var(--benew-border-light);
  overflow: visible;
  overflow-anchor: none;
  transform: none;
  transition: none;
}

/* sticky 1px 틈·서브픽셀 떨림 시 위쪽을 흰색으로 메운다 */
.app-chrome:not(.app-chrome--flow)::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--benew-white);
  pointer-events: none;
}

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

/* 리스트는 로고를 붙이지 않는다. :has() 가 모바일에서 안 먹어도 클래스로 흘린다.
   샵바이 .header sticky 가 남으면 로고만 남고 경로 줄 자리에 배경이 빈다. */
.app-chrome--flow,
.page:has(.plp-stick) .app-chrome {
  position: relative;
  top: auto;
  box-shadow: none;
}

.app-chrome--flow::before,
.page:has(.plp-stick) .app-chrome::before {
  content: none;
}

.app-chrome__spacer {
  display: none;
}

.app-chrome--flow ~ .l-content,
.page:has(.plp-stick) .l-content {
  background: var(--benew-white);
}

/* 샵바이 aurora.css 의 .header { position: sticky } 를 끈다. 이게 남으면 .app-chrome 과
   이중 sticky 가 되어 모바일에서 1px 떨림·경로 줄 가림이 난다. 붙는 건 .app-chrome 하나다. */
.app-chrome .header {
  position: relative !important;
  top: auto !important;
  z-index: auto;
  min-height: 0 !important;
  background: transparent;
  overflow-anchor: none;
  transform: none !important;
  transition: none !important;
}

.page:has(.breadcrumb--plp) .header.header--app,
.page:has(.product-detail) .header.header--app {
  box-sizing: border-box;
  height: var(--app-header-h);
  min-height: var(--app-header-h);
  border-bottom: 0;
  box-shadow: none;
  transition: 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;
}

/* 상세 탭은 sticky 를 쓰지 않는다. 헤더와 sticky 가 맞물리면 1px 이 프레임마다 싸운다.
   붙는 순간은 JS 가 fixed 로 바꾸고, 자리는 .pdp-tabs__spacer 가 맡는다. */
.pdp-tabs {
  position: relative;
}

.pdp-tabs__sentinel {
  width: 100%;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.pdp-tabs__pin {
  position: relative;
  z-index: 7;
  background: var(--benew-white);
  transform: none;
  opacity: 1;
  transition: none;
}

.pdp-tabs__pin.is-fixed {
  position: fixed;
  z-index: 7;
  box-sizing: border-box;
  background: var(--benew-white);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.pdp-tabs__pin.is-fixed.is-scroll-hidden {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  pointer-events: none;
}

.pdp-tabs__pin.is-fixed::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--benew-white);
  pointer-events: none;
}

.pdp-tabs__spacer {
  pointer-events: none;
}

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

.plp-stick {
  background: var(--benew-white);
  overflow-anchor: none;
  transform: none;
  transition: none;
}

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

/* 리스트 상단 바. sticky top 은 항상 0. 경로를 숨길 때는 top 을 밀지 않고
   경로 칸만 접는다. top 음수는 높이 오차만큼 위에 공백을 만든다. */
.plp-topbar {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--benew-white);
  overflow: visible;
  overflow-anchor: none;
  transform: none;
  transition: none;
}

.plp-topbar::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--benew-white);
  pointer-events: none;
}

.plp-topbar__crumb {
  display: grid;
  grid-template-rows: 0fr;
}

.plp-topbar.is-pinned .plp-topbar__crumb,
.plp-topbar.has-callout .plp-topbar__crumb {
  grid-template-rows: 1fr;
}

.plp-topbar__crumb-clip {
  min-height: 0;
  overflow: hidden;
}

/* 레일은 바에 붙인 채로 아래로 겹친다. sticky 를 풀면 스크롤 중간에 바가 문서 맨 위로
   돌아가서 화면에서 사라진다. */
.plp-topbar__head {
  position: relative;
  z-index: 2;
}

.plp-topbar.has-callout {
  position: sticky;
  top: 0;
}

/* 덩어리 안쪽은 절대 따로 붙지 않는다. */
.plp-topbar .plp-chrome,
.plp-topbar .plp-topbar__chips,
.plp-topbar .category-filter__chips,
.plp-topbar .breadcrumb--plp {
  position: relative;
  top: auto;
  z-index: auto;
}

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

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

.breadcrumb.breadcrumb--plp,
.search-term-chips {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.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: var(--benew-space-sm);
  padding-left: calc(var(--benew-space-sm) + 1px + var(--benew-chip-pad-x));
  overflow: visible;
  background: var(--benew-white);
  transition: none;
  transform: none;
  overflow-anchor: none;
}

/* 예전에 카테고리 목록을 겹쳐 띄우던 시절의 z-index 30 은 지웠다. 목록이 흐름 안으로 들어오면서
   경로 줄을 고정하지 않게 됐는데, 그 상태에서 30 이 남아 있으면 스크롤할 때 경로 줄이
   앱 헤더(z-index 8) 위로 올라와 로고를 덮는다. */

/* 단계 버튼끼리는 떨어뜨리지 않는다. 사이에 틈이 있으면 그 위에서 커서가 끊기고 눌리지 않는다.
   보이는 간격은 버튼 안쪽 여백으로 만든다. */
.breadcrumb--plp .breadcrumb__section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  align-self: center;
  gap: 0;
  max-width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: var(--benew-fs-md);
  font-weight: 400;
  line-height: 1;
  color: var(--benew-text-muted);
}

.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__crumb {
  font-weight: 400;
  color: var(--benew-text-muted);
}

.breadcrumb--plp .breadcrumb__crumb .breadcrumb__icon {
  color: currentColor;
}

.breadcrumb--plp .breadcrumb__toggle,
.breadcrumb--plp .breadcrumb__toggle span,
.breadcrumb--plp .breadcrumb__current {
  color: var(--benew-ink);
  font-weight: 700;
}

.breadcrumb--plp .breadcrumb__current.benew-page-title {
  font-weight: 300;
  letter-spacing: var(--benew-ls-widest);
  text-transform: uppercase;
}

.breadcrumb--plp .breadcrumb__toggle span,
.breadcrumb--plp .breadcrumb__current {
  display: inline-flex;
  align-items: center;
  height: auto;
  overflow: hidden;
  font-size: 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;
}

/* 경로의 각 단계를 따로 누를 수 있게 span 이 아니라 버튼이다. 겉모습은 글씨 그대로 둔다. */
.breadcrumb--plp .breadcrumb__crumb,
.breadcrumb--plp .breadcrumb__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* 다음 단계와 붙어 있으니 사이 간격은 이 여백이 만든다. */
.breadcrumb--plp .breadcrumb__crumb {
  padding-right: 4px;
}

.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);
}

/* 레일은 항상 겹쳐 띄운다. 흐름에 넣으면 열고 닫을 때 문서 높이가 변해서 상단이 떤다.
   샵바이 기본값(`height: 60vh`)은 쓰지 않는다. */
.plp-callout {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: auto;
  overflow: visible;
  background: var(--benew-white);
  border-bottom: 1px solid var(--benew-border-light);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

/* 3열 목록도 제 아래 선을 갖고 있다. 필터 줄 윗선과 맞닿아 1px 두 개가 붙으면
   필터 위만 아래보다 두꺼워 보인다. 경계선은 필터 줄 것 하나만 남긴다. */
.plp-callout .category-menu__list {
  border-bottom: 0;
}

.category-filter {
  display: contents;
}

.page:has(.category-filter) .l-panel,
.page:has(.plp-stick) .l-panel {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

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

.category-filter__count {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: var(--benew-fs-2xs);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--benew-text-faint);
  white-space: nowrap;
  background: transparent;
}

.page:has(.plp-stick) .category-filter__chips {
  position: relative;
  top: auto;
  /* 경로 줄과 한 덩어리로 본다. 윗선까지 있으면 위아래 두 줄이 되어 두껍게 보인다. */
  border-top: 0;
}

.category-filter__chips {
  position: relative;
  top: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  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 {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 5px var(--benew-space-sm);
  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 var(--benew-chip-pad-x);
  font-size: var(--benew-fs-xs);
  color: var(--benew-ink);
  white-space: nowrap;
  background: var(--benew-white);
  border: 1px solid var(--benew-border);
  border-radius: var(--benew-radius-xs);
  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);
}

/* 브랜드 패널은 흐름에서 빼서 칩 줄 아래에 겹쳐 띄운다. 흐름에 두면 열고 닫을 때마다
   문서 높이가 250px 씩 오르내려 목록이 튄다. 스크롤로 감출 때도 같은 문제가 생긴다. */
.plp-stick .category-depth-panel-wrap {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 6;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  transition: none;
}

/* 이 레일+3열 목록은 이동 대신 onSelect 를 쓰려고 Link 가 아니라 button 이다.
   버튼 기본 스타일만 링크처럼 되돌린다. 브랜드 패널과 리스트 콜아웃이 같이 쓴다. */
.category-menu--picker .category-menu__link {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-menu--picker .category-menu__slide {
  background: var(--benew-white);
}

.category-menu--picker .category-menu__slide li {
  padding: 4px 8px;
}

.category-menu--picker .category-menu__slide .category-menu__link {
  padding: 6px 2px 5px;
  font-weight: 400;
  color: var(--benew-text-muted);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.category-menu--picker .category-menu__slide .category-menu__link.is-active {
  font-weight: 700;
  color: var(--benew-ink);
  background: transparent;
  border-bottom-color: var(--benew-ink);
  border-radius: 0;
}

/* 3열 하위 카테고리. 전부 먹색이면 굵기 하나로만 갈려서 지금 칸이 안 보인다
   (형아 2026-09-20). 선택 안 된 항목을 회색으로 내려 대비를 만든다. */
.category-menu--picker .category-menu__list .category-menu__link {
  width: 100%;
  color: var(--benew-ink-500);
  text-align: left;
}

.category-menu--picker .category-menu__list .category-menu__link.is-current {
  font-weight: 700;
  color: var(--benew-ink);
}

/* 브랜드 카테고리 칩은 단계마다 버튼이 따로 있다. 알약 껍데기는 그대로 두고 안쪽만 나눈다. */
.category-chip--path {
  gap: 0;
  padding: 0 4px 0 0;
  cursor: default;
}

.category-chip__crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-chip__crumb:first-child {
  padding-left: 10px;
}

.category-chip__crumb.is-current {
  font-weight: 600;
}

.category-chip__toggle .category-chip__crumb {
  padding: 0;
}

/* 단계 버튼 안에 들어 있다. 눌러도 그 단계로 이동하는 게 맞으니 커서를 물려받는다. */
.category-chip__sep {
  flex: 0 0 auto;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  color: var(--benew-text-weaker);
  cursor: inherit;
}

/* 마지막 단계 글씨를 안에 품는다. 글씨와 화살표가 한 덩어리로 눌린다.
   안쪽 글씨는 자기 여백을 갖지 않는다. 버튼 여백과 겹쳐 앞 단계보다 왼쪽이 벌어진다. */
.category-chip__toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  padding: 0 4px 0 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
}


.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);
}

/* column-count 는 위에서 아래로 채워서 읽는 순서가 어긋난다.
   좌에서 우로 채우도록 그리드로 잡는다(샵바이 기본 CSS 와 같은 3열). */
.category-menu__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 4px 12px 6px;
  list-style: none;
}

.category-menu__list li {
  padding: 2px 4px;
  border-right: 0;
}

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

/* 지금 보고 있는 5뎁스 표시. 레일의 is-active 는 검은 알약이라 목록 안에서는 과하다.
   카테고리 트리에서 고른 항목을 굵게 하는 방식과 같이 간다. */
.category-menu__list .category-menu__link.is-current {
  font-weight: 700;
}

.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;
}

/* 검색 페이지는 Link 로 그리지만 picker 는 button 이라 폰트·정렬을 되돌려 준다. */
.category-tree--picker .category-tree__all,
.category-tree--picker .category-tree__group-link,
.category-tree--picker .category-tree__grid-link {
  width: 100%;
  font-family: inherit;
  text-align: left;
  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%;
  background: var(--benew-white);
}

.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: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: auto 0;
  padding: 0;
  color: var(--benew-text-strong);
  background: transparent;
  border: 0;
  transform: none;
}

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

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

.header .header__cart-btn.header__icon-btn {
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  transform: none;
}

.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__search-slot .header__search-wrap {
  margin: 4px 12px 8px;
}

.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: 300;
  letter-spacing: var(--benew-ls-widest);
  color: var(--benew-ink);
  text-transform: uppercase;
}

.header--search-page .header__title *,
.header--tab .header__title *,
.header--sub .header__title * {
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.header__search-slot {
  position: relative;
  z-index: 7;
  background: var(--benew-white);
}

.header__search-wrap {
  margin-top: 8px;
}

.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;
  background-color: var(--benew-white);
}

.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;
  overflow: visible;
}

.header--search-plp {
  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;
}

.header--search-plp .header__search-inline {
  position: relative;
  z-index: 1;
  width: calc(100% - 96px);
  max-width: calc(100% - 96px);
}

.header--search-plp .header__search-form {
  width: 100%;
}

.header--search-plp .header__search-trigger {
  height: 36px;
}

.header--search-plp .header__search-input,
.header--search-plp .header__search-input::placeholder {
  font-size: var(--benew-fs-md);
}

.header__within-search {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 0;
  font-size: var(--benew-fs-2xs);
  line-height: 1;
  color: var(--benew-text-weaker);
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.header__within-search.is-on {
  color: var(--benew-ink);
}

.header__within-search-mark {
  display: inline-flex;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.header__within-search-mark svg {
  display: block;
  width: 14px;
  height: 14px;
}

.header.header--search-plp.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;
  overflow: visible;
}

.search-term-chips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--benew-space-sm);
  background: var(--benew-white);
}

.search-term-chips__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.search-term-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px 0 12px;
  font-size: var(--benew-fs-sm);
  line-height: 1;
  color: var(--benew-ink);
  background: var(--benew-surface-muted);
  border: 0;
  border-radius: var(--benew-radius-pill);
  cursor: pointer;
}

.search-term-chip__text {
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-term-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  font-size: var(--benew-fs-lg);
  line-height: 1;
  color: var(--benew-text-weaker);
}

.header__search-slot.is-open {
  z-index: 155;
}

.header__search-slot.is-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-slot.is-open .header__search-wrap,
.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);
  font-size: var(--benew-fs-2xs);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--benew-ls-wider);
  line-height: 1.3;
  text-transform: uppercase;
}

.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);
}

/* 투명 2px 를 미리 깔아 둔다. 선택될 때만 색을 넣어야 글자가 안 밀린다. */
.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;
  border-left: 2px solid transparent;
  cursor: pointer;
}

/* 선택 탭은 흰 배경만으로는 모바일에서 눈에 안 띈다 (형아 2026-09-20).
   왼쪽 블랙 2px 바 + Bold 로 칼각 인디케이터를 세운다. */
.category-tree__nav-btn.is-active {
  font-weight: 700;
  color: var(--benew-ink);
  background: var(--benew-white);
  border-left-color: var(--benew-cta-bg);
}

.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);
}

/* 푸터 메뉴는 왼쪽 두 줄. 회사명 시작선과 맞춘다.
   샵바이 기본이 감싼 div 에 16px 행간을 남긴다. 그 박스를 강제로 접는다. */
nav.footer__nav,
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  column-gap: var(--benew-space-lg);
  row-gap: var(--benew-space-2xs) !important;
  margin: 0 0 var(--benew-space-lg) !important;
  overflow: visible;
}

.footer__nav-break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  pointer-events: none;
  font-size: 0;
  line-height: 0;
}

@media (min-width: 1001px) {
  nav.footer__nav,
  .footer__nav {
    flex-wrap: nowrap;
  }

  .footer__nav-break {
    display: none !important;
  }
}

.footer__nav > div {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
  min-height: 0 !important;
}

.footer__nav .footer__link,
.footer__nav .footer__link.footer__link--bold,
.footer__nav a,
.footer__nav button {
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: var(--benew-fs-xs) !important;
  font-weight: 400;
  line-height: 1.2 !important;
  letter-spacing: var(--benew-ls-ko);
  color: var(--benew-ink);
  text-align: left;
  white-space: nowrap;
  border-left: 0 !important;
}

/* 푸터 사업자정보·카피라이트 (형아 2026-09-19 권장표: 11~12px, Regular~Medium).
   샵바이 기본은 사업자정보 Light(300), 카피라이트 10px SemiBold 라 둘 다 역전돼 있다.
   행간을 넓히고 색을 뺀다 — 법정 고지라 있어야 하지만 시선을 끌 자리는 아니다. */
.footer p,
.footer span,
.footer address,
.footer em {
  font-size: var(--benew-fs-2xs);
  font-style: normal;
  font-weight: 400;
  line-height: var(--benew-lh-relaxed);
  letter-spacing: var(--benew-ls-ko);
  color: var(--benew-ink-500);
}

/* 회사소개 위·아래(아래 선까지)는 같은 16px.
   섹션 회색 띠는 마지막 블록이 아니라 푸터 윗선에 붙인다. 메인·더보기 같다. */
.page .footer {
  padding-top: var(--benew-space-lg) !important;
}

.page:has(.main-view) .footer,
.page:has(.plp-stick) .footer,
.page:has(.product-gallery) .footer,
.page:has(.product-detail) .footer {
  border-top: var(--benew-section-gray-gap) solid var(--benew-surface-muted);
}

.main-view > .product-section:last-child,
.main-view > .benew-instagram:last-child {
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

.footer__company {
  margin: 0 !important;
  padding-top: var(--benew-space-lg);
  padding-bottom: var(--benew-space-lg);
  border-top: 1px solid var(--benew-border-light);
  line-height: 1.2;
}

.footer__company em {
  line-height: 1.2;
}

/* 정품 원칙·통신판매중개 고지. 사업자정보와 카피라이트 사이에 선으로만 나눈다. */
.footer__disclaimer {
  margin: var(--benew-space-lg) 0 var(--benew-space-md);
  padding-top: var(--benew-space-lg);
  border-top: 1px solid var(--benew-border-light);
}

.footer__disclaimer p {
  margin: 0 0 var(--benew-space-sm);
  font-size: var(--benew-fs-2xs); /* 11px */
  line-height: var(--benew-lh-relaxed);
  letter-spacing: var(--benew-ls-ko);
  color: var(--benew-ink-400);
  word-break: keep-all;
}

.footer__disclaimer p:last-child {
  margin-bottom: 0;
}

.footer .copyright {
  font-size: var(--benew-fs-2xs); /* 11px */
  font-weight: 400;
  line-height: 1.6; /* 1 이면 g·y 아래가 잘린다 */
  color: var(--benew-ink-400);
}

.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;
}

.fab-top-down {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* 샵바이 .fab-btn 기본은 50px 원형 + 짙은 그림자. 40px 직각·플랫. */
.fab-btn,
.fab-btn--top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--benew-space-4xl);
  height: var(--benew-space-4xl);
  padding: 0;
  font-size: var(--benew-fs-xl);
  border: 1px solid var(--benew-border);
  border-radius: 0 !important;
  box-shadow: none !important;
}

.fab-btn--top .fab-btn__top {
  transform: rotate(180deg) scale(0.8);
}

html.is-fab-top-visible .fab-top-down {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

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

/*
  메인 섹션 제목 위·아래가 달라 보이는 이유 (샵바이 기본값)
  - .product-section { margin-top: 60px; border-top-width: 0 }
  - .l-panel { margin-bottom: 10px; border-width: 1px 0; box-shadow: 0 10px 1px #f5f5f5 }
  - .product-section__title { margin-bottom: 1.42857rem }  ← 아래만 약 23px
  회색 띠(그림자 10px)는 레이아웃 높이가 0이라, 다음 섹션 margin-top 60px 안으로 그려진다.
  제목 패딩만 맞추면 위쪽 흰 칸이 회색에 먹히고, 인스타는 margin-top 32px라 또 다르다.
  회색 칸은 아래 10px를 자리로 남겨 두고, 제목 흰 칸은 그 밖 24px로만 센다.
*/
.main-view .product-section {
  margin-top: 0;
  margin-bottom: var(--benew-section-gray-gap);
  border-top-width: 1px;
  box-shadow: 0 var(--benew-section-gray-gap) 1px var(--benew-surface-muted);
}

.main-view .hero + .product-section {
  border-top-width: 0;
}

.main-view .product-section .product-section__title {
  margin-bottom: 0;
  padding-top: var(--benew-section-title-gap);
  padding-bottom: var(--benew-section-title-gap);
  font-size: var(--benew-section-title-fs);
  line-height: 1;
  color: var(--benew-ink);
  text-box: trim-both text;
  text-box-trim: trim-both;
  text-box-edge: text;
}

.main-view .product-section .product-section__title {
  font-weight: 300;
  letter-spacing: var(--benew-ls-widest);
}

.main-view .product-section .thumb-LIST > .thumb-item:first-child {
  margin-top: 0;
}

.main-view .product-section :where(.thumb-GALLERY, .thumb-CART, .thumb-LIST) {
  margin-bottom: 0;
}

.main-view .product-section .product-section__more {
  display: block;
  width: fit-content;
  margin: var(--benew-space-xl) auto 0;
  padding: 0 0 var(--benew-space-3xs);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--benew-ls-wider);
  color: var(--benew-text-muted);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.main-view .product-section .product-section__more:hover,
.main-view .product-section .product-section__more:focus-visible {
  color: var(--benew-ink);
  border-bottom-color: var(--benew-ink);
}

.main-view .product-section .product-section__more-ico {
  display: none;
}

.benew-instagram {
  padding-bottom: 0;
}

.benew-instagram__embed {
  container-type: inline-size;
  width: 100%;
  max-width: 40.625em;
  margin: 0 auto;
  overflow: hidden;
  --benew-instagram-frame-h: calc(100cqw + var(--benew-instagram-chrome));
}

.benew-instagram__frame {
  display: block;
  width: 100%;
  height: var(--benew-instagram-frame-h);
  border: 0;
}

.product-detail .benew-instagram {
  margin-top: var(--benew-space-md);
}

.product-detail > .l-panel:last-child,
.product-detail > .benew-instagram:last-child,
.product-detail > .related-product:last-child {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.product-detail .benew-instagram .product-section__title {
  display: none;
}

.related-product {
  min-height: calc(11 * var(--benew-root));
  margin-bottom: var(--benew-section-gray-gap);
  padding-bottom: var(--benew-space-xl);
  border-top-width: 0;
  border-bottom-width: 0;
  box-shadow:
    0 calc(-1 * var(--benew-section-gray-gap)) 1px var(--benew-surface-muted),
    0 var(--benew-section-gray-gap) 1px var(--benew-surface-muted);
}

.related-product__title {
  margin: 0;
  padding: var(--benew-space-xl) 0 var(--benew-space-xl) var(--benew-page-pad-x);
  text-align: left;
  font-size: var(--benew-fs-md);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--benew-ls-widest);
  text-transform: uppercase;
  color: var(--benew-ink);
}

.related-product .thumb-item__info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--benew-space-2xs);
}

.related-product__brand {
  display: block;
  overflow: hidden;
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-2xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-product__brand,
.related-product__product-name,
.related-product__price {
  width: 100%;
  min-width: 0;
}

.related-product__product-name,
.related-product__price,
.related-product__price strong,
.related-product__price span {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  line-height: 1;
  text-align: left;
}

.related-product__product-name,
.related-product__product-name-wrapper,
.related-product__product-name-wrapper * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 한 줄로 자르는 자리라도 행간 1 은 overflow:hidden 과 만나 g·y·ㅇ 아래가 깎인다.
   1.45 로 올린다. 줄이 하나라 카드 높이는 몇 px 만 는다. */
.related-product__product-name,
.related-product__product-name-wrapper {
  line-height: 1.45;
}

@media (min-width: 1001px) {
  .product-content__gallery--collapsed .product-content__gallery-box,
  .product-content__detail-slot {
    --benew-pdp-gallery-collapsed-h: calc(var(--mall-width) * 0.64);
  }
}

@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;
  }

  /* aurora .page-inner { align-items:center } 는 몰 컬럼을 세로 가운데로 밀어 상단에 회색이 생긴다 */
  .page {
    display: block;
    min-height: 100%;
    background-color: var(--benew-white);
  }

  .page-inner {
    display: block;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
  }

  .page .page__content.site,
  .page__content.site {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* iOS 에서 sticky 1px 떨림 → 로고 바만 fixed + 문서 안 스페이서 */
  .app-chrome:not(.app-chrome--flow) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .app-chrome__spacer {
    display: block;
    flex: none;
    height: var(--app-header-h);
    pointer-events: 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;
}

/* 검색 잠금은 prevent-scroll 보다 뒤에 둔다. 안 그러면 스크롤바만 사라지거나
   패딩만 들어가서 몰 컬럼이 좌우로 밀린다. */
html.is-search-open,
html.is-search-open:has(body.prevent-scroll),
body.is-search-open,
body.is-search-open.prevent-scroll {
  overflow: hidden !important;
  overscroll-behavior: none;
}

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

/* body 를 overflow:hidden 으로 잠그면 body 가 스크롤 컨테이너가 되어
   .app-chrome 의 sticky 기준이 viewport 에서 body 로 바뀐다. 옵션을 열 때
   헤더가 문서 원위치로 튄다. clip 은 스크롤 컨테이너를 만들지 않는다.
   clip 미지원 브라우저는 앞줄 hidden 을 쓴다. */
body.is-modal-lock {
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior: none;
}

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

/* 메인 히어로 페이지네이션은 상세 이미지 바와 같은 선. 화살표는 안 쓴다. */
.hero {
  position: relative;
  overflow: hidden;
}

.hero .swiper-pagination,
.hero-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 2px;
  padding: 0 16px;
  gap: 0;
}

.hero .swiper-pagination-bullet {
  flex: 1 1 0;
  width: auto;
  height: 2px;
  margin: 0 2px !important;
  border-radius: 0;
  background: rgb(255 255 255 / 40%);
  opacity: 1;
  box-shadow: none;
}

.hero .swiper-pagination-bullet-active {
  background: #fff;
}

.hero .slide-prev,
.hero .slide-next,
.hero .swiper-button-prev,
.hero .swiper-button-next {
  display: none !important;
}

.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-500);
}

/* 선택 탭은 블랙 (형아 2026-09-20). 어드민 대표색(빨강)을 쓰면 구매하기·탭 밑줄·
   카테고리 인디케이터가 전부 블랙인데 하단만 빨강으로 튄다.
   아이콘이 currentColor 마스크라 색 하나로 글자·아이콘이 같이 간다. */
.bottom-nav__link.is-active {
  color: var(--benew-cta-bg);
  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;
}

/* 하단 탭 라벨 10px / Medium / tracking-wider (형아 2026-09-19 모바일표).
   색은 링크에서 상속한다 — 아이콘이 currentColor 마스크라 여기서 바꾸면 둘이 따로 논다. */
.bottom-nav__label {
  margin-top: 0;
  font-size: var(--benew-fs-3xs);
  font-weight: 500;
  letter-spacing: var(--benew-ls-wider);
  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;
}

/* 상세 전용으로 타입 스케일을 한 단계 밀던 블록은 걷어냈다 (형아 2026-09-19).
   권장표가 상세 본문을 PC 14px 로 못박는데, 스케일을 통째로 밀면 15px 가 되고
   가격·브랜드까지 같이 올라가 26px / 24px 가 된다. 럭셔리는 그 반대다.
   크기는 각 블록에서 표대로 직접 잡고, 상세의 읽는 맛은 행간(1.75)으로 낸다. */

.product-summary {
  padding: 24px var(--benew-page-pad-x) 0;
}

.product-summary--loading {
  display: block;
}

.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;
  margin-top: 8px;
}

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

.product-summary__placeholder--duty {
  width: 88px;
  height: calc(1.3 * var(--benew-fs-sm));
}

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

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

/* 상세 브랜드. 22~24px 는 헤드라인 크기라 상품명을 눌러 버린다.
   브랜드는 크기가 아니라 대문자·자간·굵기로 세운다(아래 대문자 블록). */
.product-summary__brand-name {
  display: inline-block;
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-2xl);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

/* 상세 상품명 16px / Regular / leading-snug (형아 2026-09-19 모바일표 16~18px).
   브랜드(18)보다 작고 본문(14)보다 커서 위계가 잡힌다. */
.product-summary__title {
  margin: 8px 0 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-xl);
  font-weight: 400;
  line-height: 1.375;
}

.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-price);
  font-weight: 600;
  line-height: 1.3;
  color: var(--default-font-color);
}

.product-summary__price {
  margin: 0;
  font-size: var(--benew-fs-price);
  font-weight: 600;
  line-height: 1.3;
}

/* '원' 은 금액에 붙인다. 4px 를 띄우면 '1,601,000 원' 처럼 벌어져 엉성하다. */
.product-summary__price span {
  margin-left: 0;
  font-size: var(--benew-fs-price);
  font-weight: 400;
  vertical-align: baseline;
}

.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;
}

/* 가격 옆 보조문구. 대표가를 방해하지 않게 11px + 연한 회색으로 눕힌다
   (형아 2026-09-19). */
.product-summary__duty {
  margin: 0;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-2xs);
  line-height: 1.4;
}

.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;
}

/* 배송·적립 같은 부가 정보 묶음. 12~13px 로 통일하고 줄 사이를 넓힌다
   (형아 2026-09-19). 대표가·상품명보다 조용해야 하는 자리다. */
.product-summary__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--benew-border-light);
}

.product-summary__meta--pending {
  min-height: calc(7.5 * var(--benew-root));
}

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

.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: 4px;
  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: var(--benew-lh-relaxed);
}

/* 도착예상일. 14px/700 은 부가 정보 자리에서 너무 세다. 13px 로 낮추고
   굵기만 남겨 대비를 준다. */
.product-summary__eta-date {
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 600;
  line-height: var(--benew-lh-relaxed);
}

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

/* 샵바이 기본이 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--pending,
.product-summary__installment--pending {
  min-height: calc(1.75 * var(--benew-root) + 1.4 * var(--benew-fs-sm));
  pointer-events: none;
}

.product-summary__point-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 18px 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;
  line-height: var(--benew-lh-relaxed);
  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);
  border-radius: 0;
  box-shadow: none;
  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 var(--benew-modal-pad-x);
  border-bottom: 1px solid var(--benew-divider);
}

.accumulation-modal .title-modal__title {
  height: auto;
  padding: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--benew-ls-ko);
}

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

.accumulation-modal__text {
  margin: 0;
  padding: 0;
  color: var(--benew-ink-name);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  background: transparent;
  border-radius: 0;
}

.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);
  border-radius: 0;
  box-shadow: none;
}

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

.discount-price-modal .title-modal__title {
  height: auto;
  padding: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--benew-ls-ko);
}

.discount-price-modal .title-modal__content {
  height: auto;
  margin: 0;
  padding: 16px var(--benew-modal-pad-x) 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);
  border-radius: 0;
  box-shadow: none;
}

.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 var(--benew-modal-pad-x);
  border-bottom: 1px solid var(--benew-divider);
}

.coupon-download-modal .title-modal__title {
  height: auto;
  padding: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--benew-ls-ko);
}

.coupon-download-modal .title-modal__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 14px var(--benew-modal-pad-x) 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);
  border-radius: 0;
  box-shadow: none;
  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 var(--benew-modal-pad-x);
  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;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--benew-ls-ko);
}

.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-detail > .product-summary + .related-product {
  margin-top: var(--benew-section-gray-gap);
}

.product-detail .l-panel.product-content {
  margin-top: 0;
  border-top-width: 0;
}

.product-detail .tabs .tabs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: calc(2.875 * var(--benew-root));
  border-top: 2px solid transparent;
}

.product-detail .tabs .tabs__item button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* 지금 보고 있는 탭. 샵바이 기본은 대표색(빨강) 밑줄인데 럭셔리에서는 검정이다
   (형아 2026-09-19). 선은 2px 로 묵직하게 둔다. */
.product-detail .tabs .tabs__item.on,
.product-detail .tabs .tabs__item.on button {
  color: var(--benew-cta-bg);
  border-bottom-color: var(--benew-cta-bg);
}

/* ----------------------------------------------------------------------------
   PRODUCT INFO — 상품 스펙표.

   카드(테두리 + 둥근 모서리 + 그림자)를 걷어낸다 (형아 2026-09-19).
   럭셔리 플랫폼은 정보를 상자에 담지 않는다. 위아래 가로선만 얇게 긋고
   안쪽은 열어 둔다. 라벨/값은 96px 고정 열 + 나머지 폭으로 나눈다 —
   스펙표는 좌우로 읽는 게 훑기 쉬워서 여기만 2열이다.
   ------------------------------------------------------------------------- */
.editor .product-info-card,
.product-info-card {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--benew-ink-700);
  font-size: var(--benew-fs-sm);
  line-height: var(--benew-lh-base);
  letter-spacing: var(--benew-ls-base);
}

/* 제목은 표 위에 얹는다. 표 자체의 윗선은 .product-info-card__list 가 긋는다. */
.editor .product-info-card__title,
.product-info-card__title {
  display: flex;
  align-items: center;
  gap: var(--benew-space-xs);
  margin: 0 0 var(--benew-pdp-info-gap);
  padding: 0;
  border-bottom: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--benew-ls-widest);
  text-transform: uppercase;
}

/* 제목 앞 세로 강조바는 쓰지 않는다 (형아 2026-09-19).
   포인트 마커 없이 자간·굵기만으로 제목을 세운다. 마크업은 상세 HTML 생성 쪽에
   남아 있을 수 있으므로 CSS 에서도 확실히 지운다. */
.editor .product-info-card__bar,
.product-info-card__bar,
.editor .benew-doc__title::before,
.benew-doc__title::before {
  display: none !important;
}

.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__id,
.product-info-card__id {
  margin-left: auto;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  letter-spacing: var(--benew-ls-base);
  text-transform: none;
}

/* 센스·파페치 스펙표 (형아 2026-09-20). 안쪽 가로선은 전부 뺀다.
   블록 경계는 위아래 기준선 한 줄씩, 행 사이는 패딩만. */
.editor .product-info-card__list,
.product-info-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--benew-space-sm); /* 8px. 행 사이만 타이트 */
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--benew-border-hair);
  border-bottom: 1px solid var(--benew-border-hair);
  list-style: none;
  font-size: var(--benew-fs-xs);
}

.editor .product-info-card__row,
.product-info-card__row {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 0;
  list-style: none;
}

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

.editor .product-info-card__row:first-child,
.product-info-card__row:first-child {
  padding-top: var(--benew-pdp-info-gap);
}

.editor .product-info-card__row:last-child,
.product-info-card__row:last-child {
  padding-bottom: var(--benew-pdp-info-gap);
}

.editor .product-info-card__label,
.product-info-card__label {
  flex: 0 0 calc(5 * var(--benew-root)); /* w-20 */
  width: calc(5 * var(--benew-root));
  margin: 0;
  color: var(--benew-text-weak); /* #888. slate(#94a3b8) 푸른기를 뺀다 */
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
}

.editor .product-info-card__value,
.product-info-card__value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-xs);
  font-weight: 500;
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
  word-break: break-word;
}

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

.editor .product-info-card__value--measure,
.product-info-card__value--measure {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.editor .product-info-card__value--break,
.product-info-card__value--break {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
}

.editor .product-info-card__break-line,
.product-info-card__break-line {
  display: block;
}

.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);
}

/* 색상명 뒤 [?]. 1px 직각 박스. 라운드 없음. */
.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: 14px;
  max-width: 14px;
  height: 14px;
  position: relative;
  top: -1px;
  margin: 0 0 0 var(--benew-space-2xs);
  padding: 0;
  vertical-align: middle;
  color: var(--benew-ink-400);
  font-family: inherit;
  font-size: var(--benew-fs-2xs);
  font-weight: 400;
  line-height: 1;
  appearance: none;
  background: none;
  border: 1px solid var(--benew-ink-400);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

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

.product-content-shipping-claim {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
  /* 박스 위 12px을 빼서 배송 안내 위가 40px. */
  padding: calc(var(--benew-space-4xl) - var(--benew-space-md)) 0 0;
}

.product-content-shipping-claim .benew-doc__section:last-child {
  margin-bottom: 0;
  padding-bottom: var(--benew-space-4xl);
  border-bottom: 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;
  /* 배송/교환 탭과 같게. 박스 위 12px을 빼서 제목 위가 40px. */
  padding: calc(var(--benew-space-4xl) - var(--benew-space-md)) 0 0;
  color: var(--benew-ink-700);
  font-size: var(--benew-fs-md);
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
}

/* 카드 해체 (형아 2026-09-19). 상자 대신 아래 가로선과 여백으로 나눈다. */
.product-content-inquiry .product-inquiry-summary {
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.product-content-inquiry .product-inquiry-summary__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--benew-space-lg);
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 300;
  letter-spacing: var(--benew-ls-widest);
  line-height: var(--benew-lh-heading);
  text-transform: uppercase;
  text-align: left;
}

/* 제목 앞 세로 마커는 쓰지 않는다 */
.product-content-inquiry .product-inquiry-summary__title::before {
  content: none;
}

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

.product-content-inquiry .product-inquiry-summary__description {
  margin: 0;
  color: var(--benew-ink-600);
  font-size: var(--benew-fs-sm);
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
  text-align: left;
  word-break: keep-all;
}

.product-content-inquiry .product-inquiry-summary__write-btn {
  width: 100%;
  height: 46px;
  margin: 20px 0 0;
  padding: 0;
  color: var(--benew-cta-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  letter-spacing: var(--benew-ls-soft);
  background: var(--benew-cta-bg);
  border: 0;
  border-radius: var(--benew-radius-xs);
}

.product-content-inquiry .product-board-list {
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 0 0 var(--benew-space-4xl);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

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

.product-content-inquiry .product-board-list__items,
.product-content-inquiry .product-board-list__items ul,
.product-content-inquiry .product-board-list__items li,
.product-content-inquiry .product-board-list__items li:first-child {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  list-style: none;
}

.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;
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
}

.inquiry-item__mark {
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 700;
  line-height: var(--benew-lh-relaxed);
}

.inquiry-item__actions {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--benew-space-md);
  width: 100%;
}

.inquiry-item.is-active .inquiry-item__actions {
  display: flex;
}

.inquiry-item__action {
  margin: 0;
  padding: 0;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.inquiry-item__action:hover {
  color: var(--benew-ink);
  text-decoration: underline;
}

.product-inquiry-list {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.product-inquiry-list .inquiry-item__report {
  display: none !important;
}

.inquiry-item--qa,
.inquiry-item--qa.is-active,
.inquiry-item--qa:first-child,
.inquiry-item--qa.is-active:first-child {
  display: block;
  margin-top: 0 !important;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 0 !important;
  border-bottom: 1px solid var(--benew-border-light);
  border-radius: 0;
  box-shadow: none;
}

.inquiry-item--qa .inquiry-item__row,
.inquiry-item--qa .inquiry-item__text--question,
.inquiry-item--qa .inquiry-item__text--answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, max-content) 0.7rem;
  column-gap: var(--benew-space-lg);
  align-items: center;
}

.inquiry-item--qa .inquiry-item__row {
  padding: var(--benew-space-xl) 0;
}

.inquiry-item--qa.inquiry-item--openable .inquiry-item__row {
  cursor: pointer;
}

.inquiry-item--qa .inquiry-item__lead {
  display: flex;
  align-items: center;
  gap: var(--benew-space-sm);
  min-width: 0;
}

.inquiry-item--qa .inquiry-item__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 500;
  letter-spacing: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inquiry-item--qa .inquiry-item__sub {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-self: end;
  gap: var(--benew-space-2xs);
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  white-space: nowrap;
}

.inquiry-item--qa .inquiry-item__type,
.inquiry-item--qa .inquiry-item__writer,
.inquiry-item--qa .inquiry-item__date,
.inquiry-item--qa .inquiry-item__report {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.inquiry-item--qa .inquiry-item__date {
  font-variant-numeric: tabular-nums;
}

.inquiry-item--qa .inquiry-item__dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin: 0 var(--benew-space-2xs);
  background: currentColor;
  border-radius: 50%;
}

.inquiry-item--qa .inquiry-item__report {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.inquiry-item--qa .inquiry-item__report:hover {
  color: var(--benew-ink);
  text-decoration: underline;
}

/* 답변 상태도 흑백 두 단계. 파랑 뱃지를 쓰지 않는다 (형아 2026-09-19). */
.inquiry-item--qa .inquiry-item__status-label {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: var(--benew-fs-2xs);
  font-weight: 500;
  letter-spacing: var(--benew-ls-wider);
  border-radius: 0;
}

.inquiry-item--qa .inquiry-item__status-label--answered {
  color: var(--benew-cta-ink);
  background: var(--benew-cta-bg);
  border: 1px solid var(--benew-cta-bg);
}

.inquiry-item--qa .inquiry-item__status-label--ready {
  color: var(--benew-ink-500);
  background: none;
  border: 1px solid var(--benew-border-mid);
}

.inquiry-item--qa .inquiry-item__chevron,
.inquiry-item--qa .inquiry-item__chevron-slot {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0;
  justify-self: center;
}

.inquiry-item--qa .inquiry-item__chevron {
  border-right: 1px solid var(--benew-ink-400);
  border-bottom: 1px solid var(--benew-ink-400);
  transform: rotate(45deg);
}

.inquiry-item--qa.is-active .inquiry-item__chevron {
  transform: rotate(-135deg);
}

.inquiry-item--qa .inquiry-item__expand {
  display: none;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  margin-left: 0;
  padding: 0;
  padding-left: 0;
  background: transparent;
}

.inquiry-item--qa.is-active .inquiry-item__expand {
  display: flex;
  margin-top: 0;
  padding-bottom: var(--benew-space-xl);
}

.inquiry-item--qa .inquiry-item__qna-text,
.inquiry-item--qa .inquiry-item__qna-text .editor,
.inquiry-item--qa .inquiry-item__qna-text p {
  min-width: 0;
  color: var(--benew-ink-600);
  font-size: var(--benew-fs-sm);
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.inquiry-item--qa .inquiry-item__text.inquiry-item__text--question {
  display: grid !important;
  align-items: start;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.inquiry-item--qa .inquiry-item__question-main {
  display: flex;
  align-items: flex-start;
  gap: var(--benew-space-sm);
  min-width: 0;
}

.inquiry-item--qa .inquiry-item__actions,
.inquiry-item--qa.is-active .inquiry-item__actions {
  display: none !important;
}

.inquiry-item--qa .inquiry-item__text.inquiry-item__text--answer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, max-content) 0.7rem;
  column-gap: var(--benew-space-lg);
  align-items: start;
  margin-top: var(--benew-space-2xl);
  margin-left: 0;
  padding: 0;
  padding-left: 0;
  background: transparent;
  border: 0 !important;
  border-style: none !important;
  border-radius: 0;
  box-shadow: none;
}

.inquiry-item--qa .inquiry-item__answer-main {
  display: flex;
  align-items: flex-start;
  gap: var(--benew-space-sm);
  min-width: 0;
}

.inquiry-item--qa .inquiry-item__mark {
  flex: 0 0 auto;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 700;
  line-height: var(--benew-lh-relaxed);
  letter-spacing: 0.02em;
}

.inquiry-item--qa .inquiry-item__text .icon,
.inquiry-item--qa .inquiry-item__text [class*='ico--q'],
.inquiry-item--qa .inquiry-item__text [class*='ico--a'] {
  display: none;
}

.inquiry-item--qa .inquiry-item__answer-body,
.inquiry-item--qa .inquiry-item__answer-body p {
  min-width: 0;
  color: var(--benew-ink-600);
  font-size: var(--benew-fs-sm);
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
}

.inquiry-item--qa .inquiry-item__answer-date,
.inquiry-item--qa .inquiry-item__text--answer .inquiry-item__date {
  display: block;
  justify-self: end;
  align-self: start;
  margin: 0;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: calc(var(--benew-fs-sm) * var(--benew-lh-relaxed));
  letter-spacing: normal;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.inquiry-item--qa .inquiry-item__action {
  margin: 0;
  padding: 0;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.inquiry-item--qa .inquiry-item__action:hover {
  color: var(--benew-ink);
  text-decoration: underline;
}

/* 주문 목록. 샵바이 둥근 카드·회색 필을 빼고 세로 선 리스트로 둔다. */
.orders {
  box-sizing: border-box;
  padding: var(--benew-space-lg) var(--benew-page-pad-x) var(--benew-space-4xl);
  background: var(--benew-white);
}

.orders .start-ymd-selector,
.orders .start-ymd-selector.select-box {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 2.5rem;
  margin: 0 0 var(--benew-space-xl);
  padding: 0;
  overflow: hidden;
  background: var(--benew-white);
  border: 1px solid var(--benew-border);
  border-radius: 0;
  box-shadow: none;
}

.orders .start-ymd-selector:focus-within {
  border-color: var(--benew-ink);
}

.orders .start-ymd-selector select {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 2.25rem 0 var(--benew-space-lg);
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 2.375rem;
  letter-spacing: normal;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.orders__order-summary,
.orders a.orders__order-summary {
  display: block;
  margin: 0;
  padding: var(--benew-space-xl) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--benew-border-light);
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}

.orders__identifier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--benew-space-sm);
  margin: 0 0 var(--benew-space-md);
}

.orders__identifier time,
.orders__identifier .bold {
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  letter-spacing: normal;
}

.orders__order-no {
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  letter-spacing: normal;
}

.orders__product,
.orders__order-summary .orders__product {
  display: flex;
  align-items: flex-start;
  gap: var(--benew-space-md);
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.orders__product img {
  display: block;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  background: var(--benew-surface-muted);
  border-radius: 0;
}

.orders__product-description {
  display: flex;
  flex-direction: column;
  gap: var(--benew-space-xs);
  min-width: 0;
}

.orders__product-name,
.orders__product-name * {
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
}

.orders__product-tag,
.orders__pay-amount-label {
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 400;
  letter-spacing: normal;
}

.orders__pay-amount {
  margin-right: 0.15em;
}

.orders__no-data {
  padding: var(--benew-space-4xl) 0;
  color: var(--benew-ink-400);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  letter-spacing: normal;
  text-align: center;
}

/* ============================================================================
   상품 상세 콘텐츠 컨테이너 — 여백 기준점
   ----------------------------------------------------------------------------
   오로라 원본은 .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: … }` 가 더 구체적이라
   그대로 두면 목록 들여쓰기와 링크 색이 덮인다.
   ========================================================================= */
/* 상세 본문·스펙 안내. 14px + 행간 1.75 (형아 2026-09-19).
   글자를 키우는 대신 줄 사이에 공기를 넣는다. 자간을 음수로 조이지 않는다. */
.benew-doc {
  font-size: var(--benew-fs-md);
  line-height: var(--benew-lh-relaxed);
  letter-spacing: normal;
  color: var(--benew-ink-700);
}

/* 주제 하나 = 섹션 하나. 상자에 담지 않고 가로선과 여백으로만 나눈다
   (형아 2026-09-19). 테두리·둥근 모서리·그림자 전부 없다. */
.benew-doc__section {
  margin: 0 0 var(--benew-space-4xl);
  padding: 0 0 var(--benew-space-4xl);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--benew-border-light);
  border-radius: 0;
  box-shadow: none;
}

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

/* 정품 보증. 회색 박스 없음. 위 실선은 빼고 여백만. 아래 실선만. */
.benew-doc__section--hero {
  margin: 0 0 var(--benew-space-3xl);
  padding: var(--benew-space-3xl) 0 var(--benew-pdp-info-gap);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--benew-border);
  text-align: left;
}

.benew-doc__section--hero:last-child {
  padding-bottom: var(--benew-pdp-info-gap);
  border-bottom: 1px solid var(--benew-border);
}

/* 영문 타이틀 — 얇고 작게, 자간만 넓게. */
.benew-doc__eyebrow {
  display: block;
  margin: 0 0 var(--benew-space-xs);
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: var(--benew-fs-xs);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--benew-ls-widest);
  color: var(--benew-ink-500);
}

.benew-doc__headline {
  margin: 0 0 var(--benew-space-2xs);
  font-size: var(--benew-fs-2xl);
  font-weight: 500;
  line-height: var(--benew-lh-heading);
  letter-spacing: var(--benew-ls-ko);
  color: var(--benew-ink);
  word-break: keep-all;
}

/* 밑줄은 긋지 않는다. 강조는 굵기로만. */
.benew-doc__headline em {
  padding-bottom: 0;
  border-bottom: 0;
  font-style: normal;
  font-weight: 600;
}

.benew-doc__lead {
  margin: 0 0 var(--benew-space-3xl);
  font-size: var(--benew-fs-md);
  line-height: var(--benew-lh-relaxed);
  color: var(--benew-ink-500);
  word-break: keep-all;
}

/* 항목은 가로선 없이 여백과 타이포만으로 나눈다. */
.editor .benew-doc__list,
.benew-doc__list {
  display: flex;
  flex-direction: column;
  gap: var(--benew-space-3xl);
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.editor .benew-doc__item,
.benew-doc__item {
  margin: 0;
  padding: 0;
  border: 0;
}

.benew-doc__item-title {
  display: block;
  font-size: var(--benew-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--benew-ls-ko);
  color: var(--benew-ink);
  word-break: keep-all;
}

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

/* 감정 기관 각주. 박스 없이 윗선 하나로만 본문과 떼어 놓는다. */
.benew-doc__note {
  margin: var(--benew-space-lg) 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--benew-fs-2xs);
  line-height: var(--benew-lh-relaxed);
  color: var(--benew-ink-500);
  text-align: left;
  word-break: keep-all;
}

/* 출처 링크 — 박스 버튼 없음. 밑줄 텍스트만. */
.editor .benew-doc__links,
.benew-doc__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--benew-space-md) calc(2 * var(--benew-space-xl));
  margin: var(--benew-space-md) 0 0;
  padding: 0;
  list-style: none;
}

.editor .benew-doc__links > li,
.benew-doc__links > li {
  display: block;
  margin: 0;
  padding: 0;
}

.editor .benew-doc a.benew-doc__link,
.benew-doc a.benew-doc__link {
  display: inline;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: var(--benew-lh-base);
  letter-spacing: var(--benew-ls-ko);
  color: var(--benew-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.benew-doc__sign {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: var(--benew-space-3xl) 0 0;
  padding-top: var(--benew-pdp-info-gap);
  border-top: 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__sign::before {
  content: '';
  position: absolute;
  top: 0;
  right: calc(-1 * var(--benew-page-pad-x));
  left: calc(-1 * var(--benew-page-pad-x));
  border-top: 1px solid var(--benew-border-hair);
}

/* 영문 섹션 타이틀. 페이지 타이틀과 같다 — 300 / 0.1em / uppercase.
   한글 보조(.benew-doc__title-kr)는 굵기·자간을 상속하지 않는다. */
.editor .benew-doc__title,
.benew-doc__title {
  margin: 0 0 var(--benew-space-lg);
  padding: 0;
  border-bottom: 0;
  font-size: var(--benew-fs-md);
  font-weight: 300;
  line-height: var(--benew-lh-heading);
  letter-spacing: var(--benew-ls-widest);
  text-transform: uppercase;
  color: var(--benew-ink);
}

.benew-doc__title-kr {
  margin-left: var(--benew-space-sm);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  letter-spacing: var(--benew-ls-ko);
  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);
}

/* 소제목도 마커 없이 (형아 2026-09-19) */
.benew-doc__subtitle::before {
  content: none;
}

/* 불릿 목록 — 매달린 들여쓰기(hanging indent)로 두 번째 줄을 맞춘다.
   필독사항·상세 안내가 여기 들어간다. 읽는 본문이라 13px + 행간 1.75 (형아 2026-09-19). */
.editor .benew-doc__bullets,
.benew-doc__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--benew-fs-sm);
  line-height: var(--benew-lh-relaxed);
  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열로 펴되
   박스가 아니라 가로선 리스트로 둔다 (형아 2026-09-19). */
.editor .benew-doc__bullets--deny > li,
.benew-doc__bullets--deny > li {
  margin: 0;
  padding: var(--benew-space-md) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--benew-border-light);
  border-radius: 0;
  text-indent: 0;
  color: var(--benew-ink-700);
}

.editor .benew-doc__bullets--deny > li:last-child,
.benew-doc__bullets--deny > li:last-child {
  border-bottom: 0;
}

/* 항목 아래 부연 설명 — 불릿의 매달린 들여쓰기를 물려받지 않게 초기화한다. */
.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);
}

.benew-doc__section--cta {
  padding-bottom: 0;
  border-bottom: 0;
}

/* 고객만족센터 — 다크 박스 안 세로 스택. 모서리는 각지게 (형아 2026-09-19). */
.benew-doc__cta {
  margin: 0;
  padding: var(--benew-space-xl);
  background: var(--benew-cta-bg);
  border-radius: 0;
  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: 0;
}

.product-content__gallery-img + .product-content__gallery-img {
  margin-top: var(--benew-space-sm);
}

.product-content__gallery--collapsed .product-content__gallery-box {
  overflow: hidden;
  height: var(--benew-pdp-gallery-collapsed-h);
}

.product-content__detail-slot {
  min-height: calc(var(--benew-pdp-gallery-collapsed-h) + 3.57143rem);
}

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

.product-detail .product-content__content {
  margin-bottom: 0;
}

.product-detail .product-content__box {
  padding-bottom: 0;
}

.product-content__gallery-more {
  width: 100%;
  margin-top: 0;
  background: transparent;
}

.product-content__gallery-more::before {
  content: none;
}

.product-content__gallery--collapsed .product-content__gallery-more::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--benew-space-3xl);
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0), var(--benew-white));
}

.product-content__gallery--collapsed .product-content__gallery-more {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin-top: 0;
}

.product-content__gallery-more button {
  display: inline-flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  gap: var(--benew-space-xs);
  width: 100%;
  height: auto;
  padding: var(--benew-space-md) 0;
  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-width: 0;
}

.product-content__gallery--collapsed .product-content__gallery-more button {
  height: 3.57143rem;
  padding: 0;
}

.product-content__more-arrow {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.product-content__more-arrow.is-open {
  margin-top: 0.15em;
  transform: rotate(-135deg);
}

.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-wrap {
  position: relative;
  overflow: hidden;
}

.product-image-slider-wrap.is-pending,
.product-image-slider-wrap.is-waiting-rest {
  padding-bottom: var(--benew-pdp-pager-h);
}

.product-image-slider-wrap__media {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.product-image-slider-wrap.is-pending .skeleton,
.product-image-slider-wrap.is-pending .skeleton__media,
.product-image-slider-wrap__media .skeleton,
.product-image-slider-wrap__media .skeleton__media {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.product-image-slider-wrap .swiper-wrapper,
.product-image-slider-wrap .swiper-slide,
.product-image-slider-wrap .thumb-item,
.product-image-slider-wrap .thumb-item a,
.product-image-slider-wrap .thumb-item img {
  cursor: grab;
}

.product-image-slider-wrap .swiper-wrapper:active,
.product-image-slider-wrap .swiper-slide:active,
.product-image-slider-wrap .thumb-item:active,
.product-image-slider-wrap .thumb-item a:active,
.product-image-slider-wrap .thumb-item img:active {
  cursor: grabbing;
}

.product-image-slider-wrap .swiper-button-prev,
.product-image-slider-wrap .swiper-button-next {
  z-index: 1;
  width: calc(1.25 * var(--benew-root));
  height: calc(1.75 * var(--benew-root));
  margin-top: calc(-0.875 * var(--benew-root));
  color: var(--benew-placeholder);
  cursor: pointer;
  --swiper-navigation-color: var(--benew-placeholder);
  --swiper-navigation-size: calc(1.25 * var(--benew-root));
}

.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);
}

/* 샵바이 기본은 left:50% + translateX(-50%) + transition:all 이다.
   옵션을 열면 스크롤 잠금이 50% 기준을 가로로 키워 시트가 오른쪽으로 미끄러진다.
   가로는 %/translate 를 쓰지 않고, 몰 컬럼(.page__content.site)에 맞춰
   --benew-purchase-left/width 로 고정한다. 최대 폭은 항상 --mall-width. */
.purchase,
.purchase.product-detail {
  left: var(--benew-purchase-left, 0);
  right: var(--benew-purchase-right, 0);
  box-sizing: border-box;
  width: var(--benew-purchase-width, 100%);
  /* 1001px 미만은 샵바이 몰 컬럼이 500. 600으로 두면 틀 밖으로 나간다. */
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: var(--benew-page-pad-x);
  padding-right: var(--benew-page-pad-x);
  /* 옵션 영역이 위로 열리므로 sticky 탭(z-index 7)보다 위에 있어야 한다. */
  z-index: 7;
  transform: none;
  transition: none;
  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;
}

/* CTA 는 15px / Medium / tracking-wide (형아 2026-09-19 모바일표).
   16px Regular 은 버튼 글씨가 커서 오픈마켓 느낌이 난다. */
.purchase__buy-btn,
.purchase__restock-btn {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0;
  font-size: var(--benew-fs-lg);
  font-weight: 500;
  letter-spacing: var(--benew-ls-soft);
  line-height: 16px;
  border: 0;
  border-radius: var(--benew-radius-xs);
  transition: none;
}

/* 샵바이 .btn--caution 이 대표색(빨강)을 깔아서 같은 무게로 덮는다. */
.purchase__buy-btn,
.purchase__buy-btn:hover,
.purchase__restock-btn,
.purchase__restock-btn:hover {
  color: var(--benew-cta-ink);
  background: var(--benew-cta-bg);
}

.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) {
  /* 와이드 PC 좌우는 캔버스다. 크림·29CM처럼 배너·회색 띠를 두지 않는다.
     배경은 몰과 같은 순백. 입체감은 750 래퍼 그림자가 맡는다. */
  html,
  body,
  #app,
  .page,
  .page__side {
    background-color: var(--benew-white);
  }

  /* 몰만 화면 가운데. 왼쪽 PC 로고(BNBGLEFT 500)는 몰을 밀지 않는다. */
  .page,
  .page-inner {
    overflow: visible;
  }

  .page-inner {
    position: relative;
    max-width: var(--mall-width) !important;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--benew-white);
    box-shadow: var(--benew-mall-float);
  }

  /* 몰은 항상 화면 정중앙이고, 로고는 왼쪽 남는 여백의 한가운데에 놓는다.
     여백이 좁으면 400 을 고집하지 않고 그 여백에 맞춰 줄인다 —
     고정폭이면 창이 좁을 때 화면 밖으로 잘린다(1280 에서 left:-182 실측).
     gap 과 16px 은 폭 상한을 정할 때 쓰는 최소 간격이다. 위치는 그 뒤 여백을
     좌우로 똑같이 나눈다. 오른쪽만 gap 으로 붙이면 왼쪽이 넓어 치우쳐 보인다. */
  .page__content.banner--left {
    --benew-left-logo-fit: min(
      var(--benew-left-logo),
      calc((100vw - var(--mall-width)) / 2 - var(--benew-left-logo-gap) - 16px)
    );

    position: fixed;
    top: 0;
    bottom: 0;
    left: calc((50% - var(--mall-width) / 2 - var(--benew-left-logo-fit)) / 2);
    z-index: 0;
    display: flex;
    align-items: center;
    /* .page__content 기본값(min-width 375 / max-width 500)이 남아 있으면
       좁은 창에서 계산값보다 커져 몰을 덮는다. 1440 에서 53px 침범했다. */
    width: var(--benew-left-logo-fit);
    min-width: 0;
    max-width: none;
    pointer-events: auto;
  }

  .page__content.banner--left figure,
  .page__content.banner--left .custom-banner,
  .page__content.banner--left a {
    width: var(--benew-left-logo-fit);
  }

  .page__content.banner--left img {
    width: var(--benew-left-logo-fit);
    height: auto;
    max-width: var(--benew-left-logo-fit);
    object-fit: contain;
  }

  .page .page__content.site,
  .page__content.site {
    width: var(--mall-width);
    max-width: var(--mall-width);
    min-width: var(--mall-width);
    background-color: var(--benew-white);
    /* 샵바이 기본 0 0 50px rgba(0,0,0,.15) 를 끄고, 입체감은 .page-inner 만. */
    box-shadow: none;
  }

  /* 좌우는 캔버스. 어드민 좌측 로고가 있어도 와이드에서는 안 깐다. */
  .page__content.banner--left {
    display: none !important;
  }

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

  .purchase,
  .purchase.product-detail {
    left: var(--benew-purchase-left, calc(50% - var(--mall-width) / 2));
    right: auto;
    width: var(--benew-purchase-width, var(--mall-width));
    max-width: var(--mall-width);
    margin: 0;
    transform: none;
  }

  /* 와이드 PC: 창 끝이 아니라 몰 750 오른쪽 선 밖 24px. 화면이 커져도 몰을 따라간다. */
  .page .fab-top-down {
    --benew-fab-top-shift: calc(var(--mall-width) / 2 + var(--benew-space-2xl));

    position: fixed;
    left: 50%;
    right: auto;
    bottom: var(--benew-space-4xl);
    z-index: 5;
    transform: translate3d(var(--benew-fab-top-shift), 16px, 0);
  }

  html.is-fab-top-visible .page .fab-top-down {
    transform: translate3d(var(--benew-fab-top-shift), 0, 0);
  }
}

/* 여백이 이만큼도 안 나오면 로고는 접는다. 억지로 두면 몰을 가리거나 잘린다. */
@media (max-width: 1150px) {
  .page__content.banner--left {
    display: none;
  }
}

/* 어드민에서 BNBGLEFT 를 끄면 이미지가 없다. 그래도 article 은
   position:fixed + 폭(--benew-left-logo-fit) + 첫 로딩 Skeleton 으로
   왼쪽에 빈 칸이 잡힌다. 이미지 없을 땐 칸 자체를 접는다. */
.page__content.banner--left:not(:has(img)) {
  display: none !important;
}

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

body:has(.bottom-nav):has(.benew-instagram) .l-content,
body:has(.bottom-nav) .l-content:has(.plp-stick),
body:has(.bottom-nav) .l-content:has(.product-gallery) {
  padding-bottom: 0;
}

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;
}

/* 모달 잠금 때 .page 가운데 정렬이 스크롤바 폭만큼 움직이면
   모달(portal fixed)은 그대로고 뒷배경만 옆으로 밀린다. 프레임만 되돌린다. */
html.is-modal-lock .page-inner {
  position: relative;
  left: var(--benew-lock-x, 0px);
}

.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 .title-modal__header,
.full-modal.agreement .title-modal__header,
.full-modal.notice-detail-modal .title-modal__header,
.title-modal--full .title-modal__header {
  display: grid;
  grid-template-columns: var(--benew-modal-close) minmax(0, 1fr) var(--benew-modal-close);
  align-items: center;
  justify-content: initial;
  gap: 0;
  position: relative;
  min-height: 48px;
  padding: 0 var(--benew-modal-pad-x);
  background: var(--benew-white);
  border-bottom: 1px solid var(--benew-border-light);
}

.full-modal.agreement .title-modal__title,
.full-modal.notice-detail-modal .title-modal__title,
.full-modal .title-modal__title,
.title-modal--full .title-modal__title {
  grid-column: 2;
  margin: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-xl);
  font-weight: 300;
  letter-spacing: var(--benew-ls-ko);
  text-align: center;
  text-transform: none;
}

.full-modal .title-modal__close-btn,
.full-modal.agreement .title-modal__close-btn,
.full-modal.notice-detail-modal .title-modal__close-btn,
.title-modal--full .title-modal__close-btn {
  grid-column: 3;
  justify-self: end;
}

/* 푸터 TERMS/PRIVACY/ABOUT · 공지 제목만 영문 타이틀 조판 */
.full-modal.agreement--page-title .title-modal__title,
.full-modal.notice-detail-modal .title-modal__title {
  letter-spacing: var(--benew-ls-widest);
  text-transform: uppercase;
}

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

.full-modal .title-modal__content p,
.full-modal .title-modal__content li,
.full-modal .title-modal__content .editor,
.full-modal .title-modal__content .editor *,
.full-modal.agreement .title-modal__content .editor,
.full-modal.agreement .title-modal__content .editor * {
  max-width: 100% !important;
  box-sizing: border-box;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
  color: var(--benew-ink-name) !important;
}

.full-modal.agreement .title-modal__content .editor b,
.full-modal.agreement .title-modal__content .editor strong {
  color: var(--benew-ink) !important;
  font-weight: 500;
}

.purchase-layer .title-modal__content,
.purchase-layer .title-modal__content p,
.purchase-layer .title-modal__content li,
.color-hint-modal .title-modal__content,
.color-hint-modal .title-modal__content p,
.installment-modal .title-modal__content,
.installment-modal .title-modal__content p {
  color: var(--benew-ink-name);
}

.customer-center .faq-list__answer .editor,
.customer-center .faq-list__answer .editor *,
.notice-detail__content.editor,
.notice-detail__content.editor * {
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
}

.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);
  border-radius: 0;
  box-shadow: none;
  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: 400;
  line-height: 1.5;
  letter-spacing: var(--benew-ls-ko);
}

.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: var(--benew-plp-row-gap) 8px;
  padding: 8px 8px 0 !important;
}

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

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

.product-gallery .thumb-item__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px var(--benew-space-md) 0;
}

/* PLP 하트는 썸네일이 아니라 브랜드명 줄 우측 (형아 2026-09-20).
   긴 브랜드가 하트를 밀거나 겹치지 않게 텍스트/아이콘을 나눈다. */
.product-thumb-brand-row {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.product-thumb-brand-row .product-thumb-brand {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-right: calc(16px + var(--benew-space-sm));
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-thumb-brand-row .product-card__like-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  line-height: 0;
  transform: translateY(-50%);
}

.product-thumb-brand-row .product-card__like {
  width: 16px;
  height: 16px;
  padding: 0;
}

.product-thumb-brand-row .product-card__like-icon {
  width: 14px;
  height: 14px;
}

/* 그리드 카드의 브랜드는 한 줄. 두 줄로 흘러내리면 옆 카드와 높이가 어긋난다
   (형아 2026-09-19). 샵바이 기본이 !important 라 여기도 같이 맞춘다.

   아래 카드 규칙에 .thumb-item__info 를 같이 적는 이유: 메인 진열과 목록/검색이
   서로 다른 래퍼(.product-gallery 유무)를 쓴다. 한쪽만 적으면 같은 카드인데
   메인은 가격 700 + 자간 -1px 인 샵바이 기본이 그대로 남는다. */
.product-thumb-copy-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--benew-space-2xs);
  width: 100%;
  min-width: 0;
}

.product-thumb-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--benew-space-2xs);
  min-width: 0;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.product-gallery .product-thumb-brand:not(.product-thumb-brand--only),
.thumb-item__info .product-thumb-brand:not(.product-thumb-brand--only) {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  padding-top: 0;
  font-size: var(--benew-fs-2xs);
  font-weight: 700;
  letter-spacing: var(--benew-ls-wider);
  color: var(--benew-ink);
  white-space: nowrap !important;
  text-overflow: ellipsis;
}

/* 카드는 flex item 이라 기본 min-width 가 auto 다. 안쪽 상품명이 nowrap 이면
   그 min-content 만큼 카드가 늘어나 그리드를 밀어낸다 (형아 2026-09-20).
   0 으로 내려야 flex-basis 대로 서고 말줄임이 작동한다. */
.thumb-item,
.thumb-item__info,
.thumb-item__info .product-thumb-copy,
.thumb-item__info .product-thumb-copy-stack {
  min-width: 0;
  max-width: 100%;
}

/* 상품명을 감싸는 p. 안쪽 이름이 카드 폭을 넘지 못하게 여기서 잘라 둔다. */
.product-gallery .product-thumb-title,
.thumb-item__info .product-thumb-title {
  display: block !important;
  min-width: 0;
  max-width: 100%;
  overflow: hidden !important;
  margin: 0;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.35;
  color: var(--benew-ink-name);
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

/* 상품명은 한 줄 말줄임 (형아 2026-09-20). 카드 높이를 고정해 그리드가 안 밀린다.
   자손 * 까지 nowrap 을 걸어야 안쪽 span 에서 줄이 갈라지지 않는다.

   색은 브랜드·가격보다 한 톤 내린다 (형아 2026-09-20). 품번·시즌 코드가
   먹색이면 도매 카탈로그처럼 보인다. 브랜드(700/#111)와 가격(600/#111)만 남긴다.
   슬레이트(#64748b)는 파란 끼가 남아 링크색처럼 보인다. 무채 쿨그레이. */
.product-gallery .product-thumb-title-product-name,
.thumb-item__info .product-thumb-title-product-name {
  display: block !important;
  overflow: hidden !important;
  margin: 0;
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--benew-ink-name);
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: normal;
}

.product-gallery .product-thumb-title-product-name *,
.thumb-item__info .product-thumb-title-product-name * {
  color: inherit;
  white-space: nowrap !important;
}

.product-gallery .product-thumb-price-info,
.thumb-item__info .product-thumb-price-info {
  margin: 0;
  font-size: var(--benew-fs-md);
  font-weight: 600;
  color: var(--benew-ink);
}

/* 판매가. 숫자와 원을 붙인다. 샵바이 기본 -1px 자간은 끈다. */
.product-gallery .product-thumb-price,
.thumb-item__info .product-thumb-price {
  font-style: normal;
  font-size: var(--benew-fs-md);
  font-weight: 600;
  letter-spacing: normal;
}

.product-gallery .product-thumb-unit,
.thumb-item__info .product-thumb-unit {
  margin: 0;
  padding: 0;
  font-weight: 600;
  letter-spacing: normal;
}

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

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

.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: var(--benew-purchase-left, 0);
  right: var(--benew-purchase-right, 0);
  z-index: 160;
  width: var(--benew-purchase-width, 100%);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  transform: none;
  cursor: pointer;
}

.purchase.product-detail.is-option-open {
  z-index: 161;
  overflow: hidden;
  padding: var(--benew-page-pad-x) var(--benew-page-pad-x)
    calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--benew-white);
  border-radius: 0 !important;
  transform: none;
  transition: none;
}

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

@media (min-width: 1001px) {
  .purchase-option-dim {
    left: var(--benew-purchase-left, calc(50% - var(--mall-width) / 2));
    right: auto;
    width: var(--benew-purchase-width, var(--mall-width));
    max-width: var(--mall-width);
    margin: 0;
    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: 0;
}

.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;
  padding: 10px 0 0;
  background: var(--benew-white);
}

.purchase__sheet-btn--cart,
.purchase__sheet-btn--buy {
  flex: 1 1 0;
  height: 48px;
  padding: 0;
  border-radius: 0;
  font-size: var(--benew-fs-lg);
  font-weight: 500;
  letter-spacing: var(--benew-ls-soft);
  line-height: 16px;
  transition: none;
}

.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-cta-ink) !important;
  background: var(--benew-cta-bg) !important;
  border: 0 !important;
}

.price-diff-modal__card {
  padding: 0;
  background: var(--benew-white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.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-name);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
}

.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);
  border-radius: 0;
}

/* 구매 시트 위 안내 레이어. 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);
  border-radius: 0;
  box-shadow: none;
}

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

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

.size-guide-modal .title-modal__title {
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 300;
  letter-spacing: var(--benew-ls-ko);
}

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

.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-name);
  font-size: var(--benew-fs-xs);
  line-height: 1.55;
  letter-spacing: normal;
}

.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: 0 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--benew-border-light);
}

.size-guide__tab {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  color: var(--benew-ink-name);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--benew-ls-ko);
  cursor: pointer;
}

.size-guide__tab.is-active {
  border-bottom-color: var(--benew-ink);
  background: transparent;
  color: var(--benew-ink);
  font-weight: 600;
}

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

.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-border-light);
  color: var(--benew-ink);
  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-border-light);
  background: var(--benew-white);
  color: var(--benew-ink);
  font-weight: 500;
  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: var(--benew-ls-ko);
}

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

.size-guide__legend dd {
  margin: 0;
  color: var(--benew-ink-name);
  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: 18px 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);
  border-radius: 0;
  box-shadow: none;
  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 var(--benew-modal-pad-x);
  border-bottom: 1px solid var(--benew-divider);
}

.color-hint-modal .title-modal__title,
.installment-modal .title-modal__title {
  height: auto;
  padding: 0;
  color: var(--benew-ink);
  font-size: var(--benew-fs-lg);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--benew-ls-ko);
}

.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 var(--benew-modal-pad-x) 18px;
  background: var(--benew-white);
}

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

/* KCP 페이지는 400px 고정. 헤더를 먼저 자른 뒤 zoom으로 맞춰 스크롤바 클릭이 빗나가지 않게 한다. */
.installment-modal__frame-box {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: var(--benew-white);
  border: 1px solid var(--benew-border);
  border-radius: 0;
  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-name);
  font-size: var(--benew-fs-xs);
  line-height: 1.55;
  letter-spacing: normal;
  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);
}

/* 장바구니 주문하기·요약·체크는 구매하기와 같은 블랙 CTA (형아 2026-09-20).
   샵바이 .btn--default / .check-radio / .price-tag 가 대표색(빨강)을 깐다. */
.cart__order-btn,
.cart__order-btn.btn,
.cart__order-btn.btn--default,
.cart__order-btn.btn--caution,
.cart__order-btn:hover {
  color: var(--benew-cta-ink) !important;
  font-weight: 600;
  background: var(--benew-cta-bg) !important;
  border: 1px solid var(--benew-cta-bg) !important;
  border-radius: var(--benew-radius-xs);
}

.cart__order-btn:active {
  transform: scale(0.98);
  filter: brightness(0.86);
}

.cart .price-tag {
  border-color: var(--benew-border);
}

.cart .price-tag__final-amount dt,
.cart .price-tag__final-amount dd,
.cart .price-tag__final-amount em {
  color: var(--benew-ink);
  font-weight: 700;
}

.cart .check-radio input:checked + .check-radio__ico {
  background-color: var(--benew-cta-bg) !important;
  border-color: var(--benew-cta-bg) !important;
}

/* 로그인 */
.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: inherit;
  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;
}

/* 크롬 자동완성은 연하늘색을 인라인으로 깐다. 배경을 못 지우니
   흰 inset 그림자로 덮는다 (형아 2026-09-20). */
.sign-in .text-field input:-webkit-autofill,
.sign-in .text-field input:-webkit-autofill:hover,
.sign-in .text-field input:-webkit-autofill:focus,
.sign-in .text-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--benew-ink);
  caret-color: var(--benew-ink);
  box-shadow: 0 0 0 1000px var(--benew-white) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--benew-white) inset !important;
  transition: background-color 99999s ease-out 0s;
  background-color: var(--benew-white) !important;
}

.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);
}

/* 아이디·비밀번호 찾기. 헤더 FIND ID / FIND PASSWORD 가 있으므로 한글 중복 제목은 숨긴다. */
.find-id,
.find-password {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 16px 36px;
  background: var(--benew-white);
}

.find-id__tit,
.find-password__tit {
  display: none;
}

.find-id .tabs,
.find-password .tabs {
  display: flex;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  background: transparent;
  border-bottom: 1px solid var(--benew-border-light);
}

.find-id .tabs__item,
.find-password .tabs__item {
  flex: 1 1 50%;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
}

.find-id .tabs__item button,
.find-password .tabs__item button {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0 0 -1px;
  padding: 0;
  color: var(--benew-ink-name);
  font-size: var(--benew-fs-md);
  font-weight: 400;
  letter-spacing: var(--benew-ls-ko);
  line-height: 44px;
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

.find-id .tabs__item.on button,
.find-password .tabs__item.on button {
  color: var(--benew-ink);
  font-weight: 600;
  border-bottom-color: var(--benew-ink);
}

.find-id-form__item,
.find-password-form__item {
  margin: 0 0 10px;
}

.find-id-form__input-wrap,
.find-password-form__input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.find-id .text-field,
.find-id .select-box,
.find-id .email-input .text-field,
.find-id .phone-number-input .text-field,
.find-id .phone-number-input .select-box,
.find-password .text-field,
.find-password .select-box,
.find-password .email-input .text-field,
.find-password .phone-number-input .text-field,
.find-password .phone-number-input .select-box {
  box-sizing: border-box;
  background: var(--benew-white);
  border: 1px solid var(--benew-border) !important;
  border-radius: var(--benew-radius) !important;
}

.find-id .text-field:focus-within,
.find-id .select-box:focus-within,
.find-password .text-field:focus-within,
.find-password .select-box:focus-within {
  border-color: var(--benew-ink) !important;
}

.find-id .text-field input,
.find-id select,
.find-id .email-input input,
.find-id .phone-number-input input,
.find-id .phone-number-input select,
.find-password .text-field input,
.find-password select,
.find-password .email-input input,
.find-password .phone-number-input input,
.find-password .phone-number-input select {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  color: var(--benew-ink);
  font-size: var(--benew-fs-md);
  font-weight: 400;
  letter-spacing: normal;
  background: var(--benew-white) !important;
  border: 0 !important;
  border-radius: var(--benew-radius);
  outline: none;
}

.find-id .text-field input::placeholder,
.find-id .email-input input::placeholder,
.find-id .phone-number-input input::placeholder,
.find-password .text-field input::placeholder,
.find-password .email-input input::placeholder,
.find-password .phone-number-input input::placeholder {
  color: var(--benew-placeholder);
  opacity: 1;
}

.find-id .email-input,
.find-id .phone-number-input,
.find-password .email-input,
.find-password .phone-number-input {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.find-id .email-input .text-field,
.find-id .phone-number-input .text-field,
.find-id .phone-number-input .select-box,
.find-password .email-input .text-field,
.find-password .phone-number-input .text-field,
.find-password .phone-number-input .select-box {
  flex: 1 1 0;
  min-width: 0;
}

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

.find-id-form__caution,
.find-password-form__caution {
  margin: 0 0 10px;
  color: var(--benew-ink-name);
  font-size: var(--benew-fs-xs);
  font-weight: 400;
  letter-spacing: normal;
}

.find-id-form__btn-wrap,
.find-password-form__btn-wrap {
  margin-top: 16px;
}

.find-id-form__btn-wrap .btn,
.find-password-form__btn-wrap .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0;
  color: var(--benew-white) !important;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  letter-spacing: var(--benew-ls-ko);
  background: var(--benew-ink) !important;
  border: 0 !important;
  border-radius: var(--benew-radius);
}

.find-password-form__btn-wrap a {
  display: inline-block;
  margin-top: 12px;
  color: var(--benew-ink-name);
  font-size: var(--benew-fs-sm);
  font-weight: 400;
  letter-spacing: var(--benew-ls-ko);
  text-decoration: none;
}

.find-id-result {
  padding: 8px 0 16px;
}

.find-id-result__tit,
.find-id-result__id-text,
.find-id-result__dormant-text,
.find-id-result__link {
  color: var(--benew-ink);
  font-weight: 400;
  letter-spacing: var(--benew-ls-ko);
}

.find-id-result__tit {
  margin: 0 0 16px;
  font-size: var(--benew-fs-md);
}

.find-id-result__id-text {
  margin: 0 0 8px;
  font-size: var(--benew-fs-lg);
}

.find-id-result__dormant-text {
  margin-left: 6px;
  color: var(--benew-ink-name);
  font-size: var(--benew-fs-sm);
}

.find-id-result__link-wrap {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.find-id-result__link {
  font-size: var(--benew-fs-sm);
  text-decoration: none;
}

/* 고객센터 */
.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: inherit;
  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: inherit;
  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: 300;
  line-height: 1.4;
  letter-spacing: var(--benew-ls-ko);
  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);
  border-radius: 0;
  box-shadow: none;
  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;
}

/* 결제하기는 구매하기·로그인과 같은 블랙 CTA (형아 2026-09-20).
   샵바이 .btn--caution 이 대표색(빨강)을 깔아서 같은 무게로 덮는다. */
.order-sheet__pay-btn,
.order-sheet__pay-btn.btn,
.order-sheet__pay-btn.btn--caution,
.order-sheet__pay-btn:hover {
  display: block;
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  padding: 0;
  width: 100%;
  color: var(--benew-cta-ink) !important;
  font-size: var(--benew-fs-lg);
  font-weight: 600;
  background: var(--benew-cta-bg) !important;
  border: 1px solid var(--benew-cta-bg) !important;
  border-radius: var(--benew-radius-xs);
  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(--benew-ink);
  text-align: right;
}

.order-sheet__payment-final .order-sheet__payment-amt em {
  color: var(--benew-ink);
  font-size: var(--benew-fs-2xl);
  font-weight: 700;
}

.order-sheet__payment-final .order-sheet__payment-unit {
  color: var(--benew-ink);
}

.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;
  }
}

/* ============================================================================
   대문자 조판 (형아 2026-09-19)

   로고·카테고리 메뉴·진열 섹션 제목·브랜드명은 대문자에 자간을 넓혀 세운다.
   명품 사이트의 여백감은 글자를 키워서가 아니라 이 자간에서 나온다.

   text-transform 은 화면 표기만 바꾼다. 상세에 찍는 부티크 원문 브랜드 문자열
   자체는 그대로다 (benewlux-api-integration §9 — 우리가 접은 대표명으로
   덮어쓰지 않는다는 규칙은 값에 대한 것이고, 여기는 표시 스타일이다).

   한글에는 uppercase 가 걸리지 않으므로 한글·영문이 섞이는 자리에 같이 써도 된다.
   다만 자간은 걸린다. 그래서 한글이 본문인 카테고리 메뉴만 따로 떼어 좁게 준다.
   ========================================================================== */

/* 로고·섹션 제목 — 영문 대문자가 기본인 자리. 가장 넓게 */
.header__logo-text,
.header--app .header__logo-text,
.product-section__title {
  text-transform: uppercase;
  letter-spacing: var(--benew-ls-luxe);
}

/* 인스타 등 한글 제목은 Medium. 메인 영문 진열 제목은 아래 .main-view 규칙에서 300 + 0.1em. */
.product-section__title {
  font-weight: 500;
  letter-spacing: var(--benew-ls-widest);
}

/* ----------------------------------------------------------------------------
   PC 타이포 (형아 2026-09-19 권장표)

   기본값은 모바일이고 여기서만 한 눈금 올린다. 표의 PC 칸을 그대로 따른다.
     섹션 타이틀 20 → 24 / 카드 브랜드 12 → 13 / 카드 상품명 13 → 14
   가격은 모바일·PC 모두 16px 라 분기하지 않는다(표 14~16 / 15~17 교집합).
   -------------------------------------------------------------------------- */
@media (min-width: 1001px) {
  :root {
    --benew-section-title-fs: calc(1.5 * var(--benew-root)); /* 24px */
    --benew-main-grid-cols: 3;
    --benew-main-grid-gap: var(--benew-space-lg);
  }

  .main-view .product-section .product-section__title {
    letter-spacing: var(--benew-ls-widest);
  }

  .product-thumb-brand:not(.product-thumb-brand--only) {
    font-size: var(--benew-fs-2xs); /* 11px */
  }

  .product-gallery .product-thumb-title-product-name,
  .thumb-item__info .product-thumb-title-product-name {
    font-size: var(--benew-fs-md); /* 14px */
  }

  .product-gallery .product-thumb-price,
  .thumb-item__info .product-thumb-price,
  .product-gallery .product-thumb-price-info,
  .thumb-item__info .product-thumb-price-info {
    font-size: var(--benew-fs-md);
  }
}

/* 브랜드명 — 작고 단단하게. Farfetch·Mytheresa 처럼 크기 대신 자간으로 밀도를 만든다.
   0.15em 을 주면 두 줄로 넘어가는 긴 브랜드가 늘어난다. */
.product-thumb-brand,
.product-thumb-item__brand,
.product-summary__brand-name,
.related-product__brand,
.product-review-item__brand-name,
.brand-list__item,
.brand-list__letter {
  text-transform: uppercase;
  letter-spacing: var(--benew-ls-wider);
}

/* 카테고리 메뉴 — 라벨이 한글이라 대문자는 표기상 의미가 없고 자간만 걸린다 */
.category-menu__link {
  text-transform: uppercase;
  letter-spacing: var(--benew-ls-ko);
}

/* 카테고리 내비(햄버거) — 표의 GNB 자리. 라벨이 전부 한글이라 uppercase 는 걸지 않고
   Medium 굵기와 좁은 자간만 준다. 영문 메뉴가 생기면 여기에 widest 를 준다. */
.category-nav-links__item {
  font-weight: 500;
  letter-spacing: var(--benew-ls-ko);
}