/* ============================================================================
 * endedit 상품상세 — 탈React 정적 프로토타입 CSS
 * 원본 파일들을 그대로 합친 것 (선택자·값 변경 없음, 순서만 토큰→화면):
 *   src/styles/tokens.css   (디자인 토큰 --wds-* — order/auth/cart/board/brands 와 동일한 값)
 *   src/shop/detail/detail.css (DetailPage 화면 클래스, 100% 그대로)
 * + react-detail-endedit.asp 셸에 있던 "★되심기" 핫픽스 중, 정적 HTML에서도
 *   여전히 필요한 의도만 뽑아 "직접 클래스"로 다시 썼다(React 인라인 스타일을
 *   `div[style*="..."]` 로 저격하던 attribute-selector 방식은 전부 걷어냄 —
 *   내가 마크업을 직접 쓰니 처음부터 정확한 클래스를 달면 되기 때문).
 *   걷어낸 핫픽스: 썸네일 크기/보더 강제(!important 다수), 갤러리 배경 제거 강제,
 *   모바일 이미지 absolute→relative 강제 — 전부 detail.css 기본값 그대로 두면
 *   문제가 재현되지 않아 불필요했다(React 인라인 스타일과 싸우던 것이었기 때문).
 *   유지한 핫픽스(의도만 이식): 탭 밑줄이 탭 폭만큼만 그려지는 것, PC 우측
 *   구매 레일의 위치·표시 로직, 모바일 뒤로가기 헤더의 반투명 스크림.
 * + 맨 아래에 이 프로토타입 전용 헤더/푸터 placeholder 스타일만 추가.
 * ========================================================================= */

/* ── tokens.css (order·auth·cart·board·brands 프로토타입과 동일한 값) ── */
:root {
  --wds-primary: #ff5c28;
  --wds-primary-strong: #f04d1a;
  --wds-primary-heavy: #d63f10;
  --wds-primary-tint: #fff4f0;

  --wds-text: rgb(23, 23, 23);
  --wds-text-neutral: rgba(46, 47, 51, 0.88);
  --wds-text-alt: rgba(55, 56, 60, 0.61);
  --wds-text-assistive: rgba(55, 56, 60, 0.28);
  --wds-inactive: rgba(55, 56, 60, 0.61);

  --wds-fill: rgba(112, 115, 124, 0.05);
  --wds-fill-strong: rgba(112, 115, 124, 0.16);
  --wds-line: rgba(112, 115, 124, 0.16);
  --wds-line-alt: rgba(112, 115, 124, 0.08);
  --wds-line-neutral: rgba(112, 115, 124, 0.16);

  --wds-surface: #fff;
  --wds-surface-alt: rgb(247, 247, 248);
  --wds-surface-inverse: rgb(23, 23, 25);

  --wds-cautionary: rgb(255, 146, 0);
  --wds-destructive: rgb(255, 66, 66);

  --wds-elev-inset-line: inset 0 0 0 1px rgba(112, 115, 124, 0.08);
  --wds-elev-popover: 0 0 60px rgba(23, 23, 23, 0.1);

  --wds-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-core: 'Pretendard JP', 'Pretendard Variable', Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;

  --layout-header-max: 1440px;
  --layout-body-max: 1200px;

  --ee-rail-w: 300px;
  --ee-rail-gap: 48px;
  --ee-rail-top: 76px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--wds-surface); font-family: var(--font-core); color: var(--wds-text); }
button { font-family: var(--font-core); border: 0; background: transparent; padding: 0; cursor: pointer; }
a { color: inherit; }

.ee { width: 100%; min-width: 320px; background: var(--wds-surface); position: relative; }
/* 기본은 숨김 — PC 구매바가 화면 위로 스크롤돼 나갔을 때만 JS(syncRail)가 보여준다.
   (버그 이력: JS가 "상태가 바뀔 때만" display를 건드리는 방식이라, 초기값을 CSS로
   명시해 두지 않으면 첫 렌더 때 기본 display:block 상태로 잠깐 노출되는 문제가 있었다) */
#ee-pd-float-slot { display: none; }
.sh-wrap { max-width: var(--layout-body-max); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.sh-pad-pdp { padding-top: 24px; }
.sh-pad-pdp-btm { padding-bottom: 64px; }
.sh-page-hold { min-height: 60vh; }
.sh-page-err { display: grid; place-items: center; min-height: 60vh; }
.sh-err-t { color: var(--wds-text-alt); font-size: 15px; }
.shop-scroll-x { overflow-x: auto; }
.shop-scroll-x::-webkit-scrollbar { display: none; }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── detail.css (원본 그대로, 값 변경 없음) ── */
.ee-pd-ir { display: flex; gap: 12px; font-size: 15px; line-height: 24px; letter-spacing: 0.0145em; }
.ee-pd-ir-k { flex: 0 0 76px; color: var(--wds-text-alt); }
.ee-pd-ir-v { flex: 1; color: var(--wds-text-neutral); }

.ee-pd-opt {
  min-width: 52px; height: 44px; padding: 0 16px; border-radius: 4px; border: 0; cursor: pointer;
  font-family: var(--font-core); font-size: 15px; font-weight: 600; letter-spacing: 0.0145em;
  background: var(--wds-fill); color: var(--wds-text-neutral);
}
.ee-pd-opt.is-on { background: var(--wds-text); color: #fff; }
.ee-pd-opt.is-small { min-width: 40px; height: 34px; padding: 0 12px; font-size: 13px; }

.ee-pd-stars { display: flex; color: var(--wds-cautionary); }

.ee-pd-fav {
  height: 100%; flex: none; border-radius: 4px; border: 0; background: var(--wds-fill);
  display: grid; place-items: center; cursor: pointer; color: var(--wds-text-alt);
}
.ee-pd-fav.is-on { color: var(--wds-destructive); }
.ee-pd-buybar .ee-pd-fav { width: 50px; }
.ee-pd-fbtns .ee-pd-fav { width: 46px; }

.ee-pd-buybar { display: flex; gap: 8px; height: 50px; }
.ee-pd-cart,
.ee-pd-buy {
  height: 100%; border-radius: 4px; border: 0; cursor: pointer;
  font-family: var(--font-core); font-size: 17px; font-weight: 700; letter-spacing: 0.0057em;
}
.ee-pd-cart { flex: 1; background: var(--wds-fill); color: var(--wds-text); }
.ee-pd-buy { flex: 1.4; background: var(--wds-primary); color: #fff; }

.ee-pd-opts { display: flex; flex-direction: column; gap: 14px; }
.ee-pd-opts.is-small { gap: 8px; }
.ee-pd-opt-g { display: flex; flex-direction: column; gap: 8px; }
.ee-pd-opt-t { font-size: 15px; font-weight: 600; letter-spacing: 0.0145em; color: var(--wds-text); }
.ee-pd-opts.is-small .ee-pd-opt-t { font-size: 13px; font-weight: 700; color: var(--wds-text-neutral); }
.ee-pd-opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ee-pd-opts.is-small .ee-pd-opt-row { gap: 6px; }

.ee-pd-picks { display: flex; flex-direction: column; gap: 8px; }
.ee-pd-picks.is-small { gap: 6px; max-height: 132px; overflow-y: auto; }
.ee-pd-pick { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 4px; background: var(--wds-surface-alt); }
.ee-pd-picks.is-small .ee-pd-pick { gap: 8px; padding: 10px; }
.ee-pd-pick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ee-pd-pick-k { font-size: 15px; font-weight: 600; letter-spacing: 0.0145em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-pd-picks.is-small .ee-pd-pick-k { font-size: 13px; }
.ee-pd-pick-p { font-size: 14px; color: var(--wds-text-alt); }
.ee-pd-qty { display: flex; align-items: center; gap: 2px; background: var(--wds-surface); border-radius: 4px; }
.ee-pd-qty-b {
  width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--wds-text-neutral);
}
.ee-pd-picks.is-small .ee-pd-qty-b { width: 28px; height: 28px; }
.ee-pd-qty-n { min-width: 24px; text-align: center; font-size: 15px; font-weight: 600; }
.ee-pd-picks.is-small .ee-pd-qty-n { min-width: 18px; font-size: 13px; }
.ee-pd-pick-x {
  width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--wds-text-alt);
}
.ee-pd-picks.is-small .ee-pd-pick-x { width: 28px; height: 28px; }

.ee-pd-mhd { flex: 0 0 auto; position: relative; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-pd-mhd-row { height: 56px; display: flex; align-items: center; padding: 0 4px; }
.ee-pd-mhd-b {
  width: 44px; height: 44px; flex: 0 0 auto; border: 0; padding: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center; color: var(--wds-text);
}
.ee-pd-mhd-gap { flex: 1; }
.ee-pd-mhd-a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--wds-text); }
.ee-pd-mhd-a.is-cart { position: relative; }
.ee-pd-mhd-badge { position: absolute; top: 6px; right: 6px; }

.ee-pd-crumb { font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-alt); margin-bottom: 16px; }
.ee-pd-crumb-a { color: inherit; text-decoration: none; }
.ee-pd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }

.ee-pd-gal { display: flex; flex-direction: column; gap: 12px; }
.ee-pd-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--wds-fill); overflow: hidden; border-radius: 2px; }
.ee-pd-swipe {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ee-pd-swipe::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ee-pd-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; scroll-snap-align: start; scroll-snap-stop: always; }
.ee-pd-slide img,
.ee-pd-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ee-pd-sold { position: absolute; inset: 0; background: rgba(23, 23, 25, 0.52); display: grid; place-items: center; }
.ee-pd-sold-t { color: #fff; font-size: 17px; font-weight: 700; }
.ee-pd-count {
  position: absolute; right: 12px; bottom: 12px; height: 26px; padding: 0 10px; border-radius: 1000px;
  background: rgba(23, 23, 25, 0.52); color: #fff; font-size: 13px; line-height: 26px; font-weight: 600;
}
.ee-pd-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 0; justify-content: center; }
.ee-pd-thumb {
  flex: none; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 2px;
  overflow: hidden; cursor: pointer; background: var(--wds-fill); box-shadow: var(--wds-elev-inset-line);
  position: relative;
}
.ee-pd-thumb.is-on { box-shadow: inset 0 0 0 2px var(--wds-text); }
.ee-pd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ee-pd-info { display: flex; flex-direction: column; gap: 20px; padding: 0; }
.ee-pd-ttl-g { display: flex; flex-direction: column; gap: 8px; }
.ee-pd-brand-row { display: flex; align-items: center; gap: 6px; }
.ee-pd-brand { font-size: 14px; letter-spacing: 0.0194em; font-weight: 700; }
.ee-pd-brand-chev { color: var(--wds-text-assistive); display: grid; }
.ee-pd-h1 { margin: 0; font-size: 26px; line-height: 34px; letter-spacing: -0.023em; font-weight: 700; }
.ee-pd-sub { font-size: 14px; color: var(--wds-text-alt); }
.ee-pd-price { display: flex; flex-direction: column; gap: 4px; padding-bottom: 20px; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-pd-list { font-size: 14px; color: var(--wds-text-assistive); text-decoration: line-through; }
.ee-pd-price-row { display: flex; align-items: baseline; gap: 8px; }
.ee-pd-off { font-size: 28px; font-weight: 800; letter-spacing: -0.0236em; color: var(--wds-primary); }
.ee-pd-now { font-size: 28px; font-weight: 800; letter-spacing: -0.0236em; }
.ee-pd-infos { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-pd-total { display: flex; align-items: baseline; gap: 8px; padding-top: 4px; }
.ee-pd-total-k { font-size: 15px; color: var(--wds-text-alt); }
.ee-pd-total-v { margin-left: auto; font-size: 24px; font-weight: 800; letter-spacing: -0.0194em; }

/* ── 탭 — 밑줄이 "탭이 실제로 차지하는 폭" 만큼만 그려지게 (셸 핫픽스 의도 이식) ── */
.ee-pd-tabs-w {
  box-shadow: none; position: sticky; top: 0; background: var(--wds-surface); z-index: 10;
}
.ee-pd-tabs-w .sh-tabs-row {
  display: flex;
  background-image: linear-gradient(var(--wds-line-neutral), var(--wds-line-neutral));
  background-repeat: no-repeat; background-size: 100% 1px; background-position: left bottom;
  background-origin: content-box; background-clip: content-box;
  padding-left: 0; padding-right: 0;
}
.ee-pd-tab {
  flex: 1; min-height: 52px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-core); font-size: 16px; letter-spacing: 0.0096em;
  font-weight: 500; color: var(--wds-text-alt); box-shadow: none;
}
.ee-pd-tab.is-on { font-weight: 700; color: var(--wds-text); box-shadow: inset 0 -2px 0 var(--wds-text); }
.ee-pd-tab-n { color: var(--wds-text-alt); font-weight: 500; }

.ee-pd-cont-w { display: flex; justify-content: center; }
.ee-pd-cont { width: 100%; max-width: 860px; overflow-x: hidden; }
.ee-pd-rv { display: flex; flex-direction: column; gap: 20px; }
.ee-pd-rv-sum { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 4px; background: var(--wds-surface-alt); }
.ee-pd-rv-sum-t { font-size: 15px; color: var(--wds-text-alt); }
.ee-pd-empty { padding: 30px 0 40px; text-align: center; font-size: 15px; color: var(--wds-text-alt); }
.ee-pd-rv-i { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-pd-rv-hd { display: flex; align-items: center; gap: 8px; }
.ee-pd-rv-who { font-size: 14px; font-weight: 600; }
.ee-pd-rv-date { margin-left: auto; font-size: 13px; color: var(--wds-text-assistive); }
.ee-pd-rv-subj { font-size: 15px; font-weight: 600; }
.ee-pd-rv-body { margin: 0; font-size: 15px; line-height: 24px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); white-space: pre-line; }
.ee-pd-qna { display: flex; flex-direction: column; gap: 0; }
.ee-pd-qna-i { display: flex; align-items: center; gap: 12px; min-height: 60px; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-pd-qna-s { flex: 1; font-size: 16px; letter-spacing: 0.0096em; color: var(--wds-text-neutral); }
.ee-pd-qna-s.is-secret { color: var(--wds-text-assistive); }
.ee-pd-qna-who { font-size: 13px; color: var(--wds-text-alt); }
.ee-pd-qna-b {
  font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 4px;
  background: var(--wds-primary-tint); color: var(--wds-primary);
}
.ee-pd-qna-b.is-done { background: var(--wds-fill); color: var(--wds-text-neutral); }
.ee-pd-dv { display: flex; flex-direction: column; gap: 24px; max-width: 860px; }
.ee-pd-dv-rows { display: flex; flex-direction: column; gap: 10px; }

.ee-pd-rel { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--wds-line-neutral); }
.ee-pd-rel-t { font-size: 19px; line-height: 28px; letter-spacing: -0.002em; font-weight: 700; margin-bottom: 16px; }
.ee-pd-rel-grid { display: grid; gap: 28px 20px; }
.ee-pd-rel-a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.ee-pd-rel-th { position: relative; width: 100%; aspect-ratio: 1 / 1; background: transparent; overflow: hidden; border-radius: 2px; }
.ee-pd-rel-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ee-pd-rel-meta { display: flex; flex-direction: column; gap: 4px; }
.ee-pd-rel-name { font-size: 15px; line-height: 22px; color: var(--wds-text-neutral); }
.ee-pd-rel-price { display: flex; align-items: baseline; gap: 6px; }
.ee-pd-rel-off { font-size: 15px; font-weight: 700; color: var(--wds-primary); }
.ee-pd-rel-v { font-size: 16px; font-weight: 700; color: var(--wds-text); }

/* ── PC 우측 플로팅 구매 패널 — 위치는 셸 핫픽스 의도 그대로(본문 컬럼 오른쪽 끝 정렬,
   탭바 아래로, 탭 영역을 지나면 숨김) 이식, 대상은 attribute-selector 대신 클래스 직접 지정 ── */
.ee-pd-float {
  position: fixed;
  right: max(20px, calc(50% - 700px));
  top: var(--ee-rail-top, 76px);
  width: var(--ee-rail-w); z-index: 45;
  height: fit-content; max-height: calc(100vh - var(--ee-rail-top, 76px) - 24px); overflow-y: auto;
  background: var(--wds-surface); border-radius: 8px; box-shadow: var(--wds-elev-popover);
  padding: 20px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
  transition: opacity .18s ease;
  animation: eeRailIn .32s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes eeRailIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ee-pd-float { animation-duration: .01ms; transition: none; } }
body.ee-rail-off .ee-pd-float { opacity: 0; pointer-events: none; }
@media (max-width: 1179px) { .ee-pd-float { display: none !important; } }
.ee-pd-float-hd { display: flex; gap: 10px; align-items: center; }
.ee-pd-float-th { flex: none; position: relative; width: 52px; height: 68px; border-radius: 2px; overflow: hidden; background: var(--wds-fill); display: block; }
.ee-pd-float-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ee-pd-float-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ee-pd-float-brand { font-size: 13px; letter-spacing: 0.0252em; font-weight: 700; color: var(--wds-text-alt); }
.ee-pd-float-name {
  font-size: 14px; line-height: 20px; letter-spacing: 0.0145em; color: var(--wds-text-neutral);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ee-pd-float-total { display: flex; align-items: baseline; gap: 8px; padding-top: 4px; box-shadow: inset 0 1px 0 var(--wds-line-alt); }
.ee-pd-float-total-k { flex: 1; padding-top: 12px; font-size: 13px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.ee-pd-float-total-v { padding-top: 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.012em; }
.ee-pd-fbtns { display: flex; gap: 8px; height: 46px; }
.ee-pd-fcart,
.ee-pd-fbuy { height: 100%; border-radius: 4px; border: 0; cursor: pointer; font-family: var(--font-core); font-size: 15px; font-weight: 700; }
.ee-pd-fcart { flex: 1; background: var(--wds-fill); color: var(--wds-text); }
.ee-pd-fbuy { flex: 1.3; background: var(--wds-primary); color: #fff; }

.ee-pd-mbar {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px 16px;
  background: var(--wds-surface); box-shadow: inset 0 1px 0 var(--wds-line-alt); z-index: 50;
}
.ee-pd-mbar-hold { height: 76px; }

.ee-pd-cf-dim {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 20px 16px; background: rgba(23, 23, 25, 0.52);
}
.ee-pd-cf { width: 100%; max-width: 420px; background: var(--wds-surface); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.ee-pd-cf-t { font-size: 17px; line-height: 26px; font-weight: 700; text-align: center; }
.ee-pd-cf-acts { display: flex; gap: 8px; }
.ee-pd-cf-no {
  flex: 1; height: 44px; border-radius: 4px; border: 0; cursor: pointer;
  background: var(--wds-fill); font-family: var(--font-core); font-size: 15px; font-weight: 700; color: var(--wds-text);
}
.ee-pd-cf-go {
  flex: 1; height: 44px; border-radius: 4px; display: grid; place-items: center;
  background: var(--wds-primary); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
}

/* ── 모바일 뒤로가기 헤더 — 반투명 스크림(셸 핫픽스 의도 이식, 대상은 직접 클래스) ── */
@media (max-width: 768px) {
  header.ee-mhead {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    background: transparent; box-shadow: none;
  }
  header.ee-mhead::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 104px; pointer-events: none;
    background: linear-gradient(180deg, rgba(17,17,19,.58) 0%, rgba(17,17,19,.42) 34%, rgba(17,17,19,.18) 66%, rgba(17,17,19,0) 100%);
  }
  header.ee-mhead .ee-pd-mhd-row { position: relative; z-index: 1; }
  header.ee-mhead button, header.ee-mhead a, header.ee-mhead svg { color: #fff; }
  header.ee-mhead svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
}

@media (max-width: 768px) {
  .ee-pd-top { grid-template-columns: 1fr; gap: 0; }
  .ee-pd-gal { gap: 0; }
  .ee-pd-stage { border-radius: 0; }
  .ee-pd-thumbs { padding: 12px 16px 0; display: none; } /* 모바일은 썸네일 줄 숨김 — 스와이프가 유일한 이동수단 */
  .ee-pd-thumb { width: 56px; height: 56px; }
  .ee-pd-info { padding: 20px 16px; }
  .ee-pd-h1 { font-size: 22px; line-height: 30px; }
  .ee-pd-buybar { height: 44px; }
  .ee-pd-buybar .ee-pd-fav { width: 44px; }
  .ee-pd-rel { margin-top: 40px; padding-top: 32px; }
  .sh-wrap { padding: 0 16px; }
  .ee-pd-tabs-w .sh-tabs-row { padding-left: 0; padding-right: 0; }

  /* 모바일 이미지 — 정사각 틀을 풀고 폭 100% · 높이는 이미지 비율 */
  .ee-pd-stage { aspect-ratio: auto; height: auto; }
  .ee-pd-stage > img { position: relative; inset: auto; width: 100%; height: auto; }
  .ee-pd-swipe { position: relative; inset: auto; width: 100%; align-items: center; height: auto; }
  .ee-pd-swipe .ee-pd-slide { position: relative; height: auto; }
  .ee-pd-swipe .ee-pd-slide img { position: relative; inset: auto; width: 100%; height: auto; }
}
@media (min-width: 1180px) {
  .ee-pd-tabs-w .sh-tabs-row {
    padding-left: 0;
    padding-right: calc(var(--ee-rail-w) + var(--ee-rail-gap));
  }
  .sh-pad-pdp-btm > .ee-pd-cont-w,
  .sh-pad-pdp-btm > .ee-pd-rv,
  .sh-pad-pdp-btm > .ee-pd-qna,
  .sh-pad-pdp-btm > .ee-pd-dv {
    padding-right: calc(var(--ee-rail-w) + var(--ee-rail-gap));
  }
}

/* ── 프로토타입 전용 헤더/푸터 placeholder (order·auth·cart·board·brands 와 동일 패턴) ── */
.ee-proto-hdr {
  height: 40px; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--wds-surface-alt); border-bottom: 1px solid var(--wds-line-alt);
  font-size: 12px; color: var(--wds-text-alt); padding: 0 16px; text-align: center;
}
.ee-proto-hdr .logo { font-weight: 800; letter-spacing: -0.02em; color: var(--wds-text); }
.ee-proto-ftr { padding: 24px 16px; text-align: center; font-size: 12px; color: var(--wds-text-assistive); }