@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap);
/* 어신샵 레이아웃 오버라이드 */

/* 스크롤이 있는 페이지 → 없는 페이지로 이동하거나 모달이 열려 스크롤바가 사라지면
   그만큼 사용 가능한 폭이 늘어나 .page(justify-content:center) 중앙정렬 기준이 바뀌면서
   좌측 banner--left/.site가 화면 밀리는 문제가 있었음 — 스크롤바 자체를 항상 숨겨서
   (휠/터치 스크롤 동작은 그대로 유지) 스크롤바 유무가 레이아웃 폭에 아예 영향을 주지
   않게 함(자리를 예약하는 대신 애초에 표시하지 않는 방식) */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* 구 Edge/IE */
}

html::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* ── 콘텐츠가 화면보다 짧을 때 하단 CTA/BottomNav가 화면 중간에서 붕 뜨는 문제 ──
   베이스 스킨(aurora.css)은 .page__content.site가 일반 block 흐름이고
   main.l-content엔 calc(100vh - 156px - 331px)라는 매직넘버 min-height만 있음.
   이 156/331은 이 스킨의 실제 헤더(56px)/푸터 높이와 전혀 안 맞아서, 컨텐츠가
   짧은 페이지에서는 .page__content.site 자체는 min-height:100vh로 뷰포트만큼
   커지지만 그 안의 header+main+footer+CTA 합계가 그보다 짧아 마지막 요소
   뒤에 빈 여백만 남고 CTA가 진짜 화면 하단보다 위에 떠버렸음(sticky는 자기
   normal-flow 위치보다 아래로는 못 내려감).
   block 대신 flex-column으로 바꾸고 main.l-content가 flex:1로 남는 공간을
   전부 흡수하게 하면, 헤더/푸터/CTA 실제 높이가 얼마든 항상 화면 하단에
   붙는다 — 페이지마다 다른 헤더/푸터/BottomNav 유무 조합에도 매직넘버 없이 대응 */
.page__content.site {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ── 좁은 화면(논리 폭 375px 미만)에서 좌우 스크롤이 생기던 문제 ──
   베이스 스킨은 .page__content에 min-width:375px를 걸어둔다. 그래서 논리 폭이 360px인
   기기(갤럭시 S 계열 다수)에서는 페이지 폭이 화면보다 15px 넓어져 전 화면에 가로 스크롤이
   생기고, 오른쪽 끝(장바구니 아이콘/기획전 카드 등)이 화면 밖으로 밀린다.
   최소 폭 제약을 없애 화면 폭을 그대로 따르게 한다 — 안쪽 요소들은 이미 유동폭이라
   360px에서도 레이아웃이 깨지지 않는다(PC는 max-width:500px 규칙이 그대로 적용됨) */
.page__content {
  min-width: 0;
}

.page__content.site > main.l-content {
  flex: 1 0 auto;
  min-height: 0;
}

/* 헤더(뒤로가기+타이틀) 위에 붙는 얇은 브랜드 블루 바 — 주문 상세내역(Figma
   PaymentHead) 등에서 사용. Header는 Layout.tsx가 그리는 공용 컴포넌트라 페이지
   쪽에서 그 앞에 직접 렌더링할 수 없어 hasTopColorBar 레이아웃 상태로 제어한다 */
.top-color-bar {
  height: 16px;
  background-color: #4a69ea;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 6;
}

/* 이 바가 있는 페이지에서는 헤더가 바로 밑(16px)에 붙어야 스크롤해도 겹치지 않음 —
   바가 없는 다른 페이지의 헤더(top: 0)엔 영향 없도록 인접 형제 선택자로 스코프 */
.top-color-bar + .header {
  top: 16px;
}

/* ── 헤더 ── */
/* 베이스 스킨(aurora.css)이 .header에 min-height: 90px를 강제해서 실제 높이가
   56px보다 커지는 문제가 있어 min-height를 리셋 */
.header {
  height: var(--header-height);
  min-height: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* 메인 헤더: 로고 좌측 정렬 */
.header .header__title {
  margin: 0;
  font-size: inherit;
  line-height: 1;
  flex-shrink: 0;
}

.header .header__title h1,
.header h1.header__title {
  margin: 0;
  font-size: inherit;
  line-height: 1;
}

.header .header__logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* 배너 없을 때 텍스트 로고 fallback */
.header__logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--eoshin-navy, #101f3b);
  text-decoration: none;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* 헤더 우측 아이콘 영역 */
.header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header__icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--eoshin-navy, #101f3b);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  text-decoration: none;
  flex-shrink: 0;
}

.header__icon-btn:hover {
  background: var(--eoshin-bg, #f5f8fb);
}

.header__icon-btn:active {
  background: var(--eoshin-border, #e1eaef);
}

/* 장바구니 뱃지 — Figma BadgeNumber(구/신 TopBar 컴포넌트셋 모두) fill #FF5A5D.
   숫자 폰트는 Figma 표기가 14px인데 16px 원 안에서 두 자리 수가 잘려 12px로 절충
   (기존 10px보다 Figma에 가깝게 키움 — figma-audit-full.md CL-001 참고) */
.header__cart-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff5a5d;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* 서브 헤더 — Figma Bar/TopBar(5218:35671) 컴포넌트 셋 기준.
   뒤로가기 버튼이 있는 화면(TopBar=Title)은 타이틀이 버튼 바로 옆에 좌측 정렬되고,
   뒤로가기가 없는 화면(TopBar=TitleOnly)만 타이틀이 가운데 정렬됨 — 지금까지는
   뒤로가기 유무와 무관하게 항상 가운데 정렬로 겹쳐 있었음 */
.header--sub {
  justify-content: space-between;
  /* 베이스 스킨(aurora.css)의 .header--sub{border-bottom:1px solid
     var(--dark-gray-color)}가 모든 서브 헤더에 무조건 진한 회색 구분선을
     그려서 리셋 — 실제로 필요한 경우(아래 :has 규칙)만 다시 켬 */
  border-bottom: none;
}

.header--sub .header__title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.header--sub .header__title-group--centered {
  justify-content: center;
}

/* 헤더 하단 구분선 — Figma Bar/TopBar 컴포넌트셋을 보면 Logo/Title/IconFalse
   변형엔 stroke가 없고, 뒤로가기 없이 타이틀만 가운데 있는 TitleOnly 변형에만
   #e6e6e6 구분선이 있음. 지금까지 .header에 무조건 border-bottom을 그려서
   모든 화면에 안 보여야 할 줄이 계속 나오고 있었음 */
.header--sub:has(.header__title-group--centered) {
  border-bottom: 1px solid #e6e6e6;
}

/* 벤더 기본값(.l-panel{margin-bottom:10px;border-width:1px 0;box-shadow:0 10px 1px
   #f5f5f5})이 모든 콘텐츠 섹션 위아래에 테두리+그림자+여백을 그리는데, 이 스킨을
   쓰는 어떤 화면의 Figma에도 이 구분선이 실제로 존재한 적이 없었다 — 상품상세
   탭(product-content)/메인 상품섹션(product-section)/목록 페이지(gallery-list-page)/
   리뷰 폼(review-form__content) 등 마주칠 때마다 매번 같은 잔재를 개별적으로
   꺼왔던 걸 여기서 한 번에 전역으로 제거한다 */
.l-panel {
  margin-bottom: 0;
  border: none;
  box-shadow: none;
}

.header--sub .header__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 베이스 스킨(aurora.css)이 동일한 클래스명에 position:absolute/top/left/transform을
   이미 정의하고 있어(같은 이름을 그대로 재사용하는 구조), flex-shrink만 덮어써서는
   그 절대 위치 지정이 그대로 남아 flex 흐름을 벗어나 있었음 — 명시적으로 리셋 */
.header--sub .header__left-btn {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  flex-shrink: 0;
}

/* 베이스 스킨 arrow-left 스프라이트 아이콘을 Figma ChevronLeft 벡터로 교체 —
   검색 모달 뒤로가기(search-keyword-modal__back-btn)와 동일한 교체를 일반 헤더에도 적용.
   stroke #404040 — Figma TopBar=Sub 구(5218:35693)/신(6978) 컴포넌트셋과 실제 인스턴스
   모두 #404040 (기존 #1A1A1A는 검색 모달 쪽과 어긋난 값이었음) */
.header--sub .header__left-btn .ico--arrow-left {
  width: 24px;
  height: 24px;
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M15 18L9 12L15 6%27 stroke=%27%23404040%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
}

.header--sub .header__cart-btn {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  flex-shrink: 0;
}

.header--sub .header__cancel-btn {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  flex-shrink: 0;
}

/* ── 검색 모달 ── */
/* Figma 노드 5236:30508 — 베이스 스킨 기본값은 밑줄(underline) 형태 입력창인데,
   어신샵은 회색 배경의 둥근 검색창으로 사용. 좌측 16px / 우측 8px 여백은 Figma 프레임 그대로 */
.search-keyword-modal__top {
  height: var(--header-height);
  margin: 0;
  padding: 0 8px 0 16px;
  gap: 4px;
  /* 헤더-콘텐츠 사이 구분선 없음 — Figma Bar/SearchBar(5236:30507)는 스트로크 페인트가
     없다(벤더의 2px 밑줄과, 예전에 우리가 임의로 넣었던 1px 라인 모두 Figma에 없는 줄 —
     2026-08-13 사용자 지적으로 제거) */
  border-bottom: none;
}

.search-keyword-modal__back-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--eoshin-navy, #101f3b);
}

/* 베이스 스킨 arrow-left 스프라이트 아이콘을 Figma ChevronLeft 벡터로 교체 */
.search-keyword-modal__back-btn .ico--arrow-left {
  width: 24px;
  height: 24px;
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M15 18L9 12L15 6%27 stroke=%27%23404040%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
}

/* .header--search(SR-004 검색 결과 헤더)도 검색 모달과 같은 Bar/SearchBar 컴포넌트를
   재사용하는 화면이라, 아래 .search-field 스킨 규칙들은 두 컨텍스트 모두에 적용한다 */
.search-keyword-modal .search-field,
.header--search .search-field {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 4px;
}

.search-keyword-modal .search-field__input,
.header--search .search-field__input {
  display: flex;
  align-items: center;
  flex: 1;
  height: 40px;
  padding: 0 12px;
  background-color: #fafafa;
  border-radius: 8px;
}

.search-keyword-modal .text-field,
.header--search .text-field {
  flex: 1;
  border: none !important;
  background: transparent;
}

.search-keyword-modal .text-field input,
.header--search .text-field input {
  width: 100%;
  font-size: 16px !important;
  color: var(--eoshin-text-secondary, #404040);
  background: transparent;
}

.search-keyword-modal .text-field input::placeholder,
.header--search .text-field input::placeholder {
  color: var(--eoshin-text-muted, #9b9b9b);
}

.search-keyword-modal .search-field__clear-btn,
.header--search .search-field__clear-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* 입력값이 없을 때(플레이스홀더가 보이는 상태)는 Figma처럼 클리어 버튼을 숨김 */
.search-keyword-modal .search-field__input:has(input:placeholder-shown) .search-field__clear-btn,
.header--search .search-field__input:has(input:placeholder-shown) .search-field__clear-btn {
  display: none;
}

.search-keyword-modal .search-field__submit-btn,
.header--search .search-field__submit-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--eoshin-navy, #101f3b);
}

/* 베이스 스킨 magnet 스프라이트 아이콘을 Figma 돋보기 벡터로 교체 */
.search-keyword-modal .search-field__submit-btn .ico--magnet,
.header--search .search-field__submit-btn .ico--magnet {
  width: 24px;
  height: 24px;
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M21 21L16.66 16.66M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z%27 stroke=%27%23404040%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
}

/* .header(기본)이 좌우 16px 대칭 패딩인데, Figma Bar/SearchBar는 좌 16px/우 8px/
   버튼-입력창 간격 4px로 비대칭 — 검색 모달(.search-keyword-modal__top)과 동일 값 */
.header--search {
  padding: 0 8px 0 16px;
  gap: 4px;
}

/* 최근 검색어 — 베이스 스킨 기본값(테두리 박스 + 줄 구분 리스트)이 아닌
   테두리 없는 영역 + 알약(pill) 형태 태그 목록으로 오버라이드.
   상단 여백 12px — Figma Bar/SectionHeaderBar padding-top 12(기존 20px는 8px 큼) */
.search-keyword-modal .recent-keyword {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px 16px 20px;
  border: none;
  border-radius: 0;
}

.search-keyword-modal .recent-keyword__top {
  padding: 0 0 12px;
  border-bottom: none;
}

/* 벤더 RecentKeyword.js가 타이틀 "최근검색어"/버튼 "검색어 전체삭제"를 하드코딩하고
   있어(오버라이드 prop 없음) Figma SR-001 문구("최근 검색어"/"전체 삭제")로 CSS 치환 —
   원문은 font-size:0으로 숨기고 ::before로 올바른 문구를 그린다(클릭 동작은 원래 버튼 그대로) */
.search-keyword-modal .recent-keyword__top p {
  font-size: 0;
}

.search-keyword-modal .recent-keyword__top p::before {
  content: '최근 검색어';
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--eoshin-text-primary, #1a1a1a);
}

.search-keyword-modal .recent-keyword__top button {
  font-size: 0;
}

.search-keyword-modal .recent-keyword__top button::before {
  content: '전체 삭제';
  font-size: 12px;
  line-height: 18px;
  color: var(--eoshin-text-muted, #9b9b9b);
}

.search-keyword-modal .recent-keyword__content [data-testid='recent-keyword__list'] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-keyword-modal .recent-keyword__item {
  justify-content: flex-start;
  gap: 4px;
  margin-top: 0;
  height: 32px;
  padding: 0 12px;
  /* Figma General/Chip stroke #e6e6e6 — 브랜드 보더 변수(#e1eaef)와 다른 고정값 */
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background-color: #fff;
}

.search-keyword-modal .recent-keyword__item button:first-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--eoshin-text-secondary, #404040);
}

.search-keyword-modal .recent-keyword__item [data-testid='recent-keyword__item-delete-btn'] {
  width: 16px;
  height: 16px;
}

/* 검색 결과 없음(빈 상태) — 아이콘 없이 짧은 안내 문구만 표시 */
.search-keyword-modal .recent-keyword__content-empty {
  padding: 32px 0 0;
}

.search-keyword-modal .recent-keyword__content-empty::before {
  content: none;
}

.search-keyword-modal .recent-keyword__content-empty p {
  font-size: 14px;
  color: var(--eoshin-text-muted, #9b9b9b);
}

/* ── 검색 모달 프로모션 배너 — Figma PromotionBannerSection(5236:30507) ── */
.search-promotion-banner {
  width: calc(100% - 32px);
  height: 60px;
  margin: 0 16px 20px;
  padding: 0 0 0 20px;
  border: none;
  border-radius: 8px;
  background: #f0f4fe;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.search-promotion-banner__text {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.search-promotion-banner__title {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #1a1a1a;
}

.search-promotion-banner__sub {
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #404040;
}

.search-promotion-banner__img {
  width: 188px;
  height: 100%;
  margin-left: auto;
  object-fit: cover;
}

/* ── GNB 탭 (헤더 하단 카테고리) ── */
/* Figma 노드 5369:34978 — 탭 사이 8px 갭, 좌우 16px 여백, 헤더 바로 아래 sticky 고정 */
.nav {
  height: 48px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  overflow-x: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  scrollbar-width: none;
  gap: 8px;
  padding: 0 16px;
  position: sticky;
  top: var(--header-height);
  z-index: 5;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 0;
  height: 48px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #9b9b9b;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
  position: relative;
}

.nav__link::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
}

.nav__link.is-active {
  font-weight: 600;
  color: #1a1a1a;
}

/* 베이스 스킨(aurora.css)의 .nav__link.is-active::after가 우측 상단 4px 원형 점으로
   정의되어 있어(border-radius:50%, top/right 절대 위치) background만으로는 밑줄로 바뀌지
   않음 — 위치/크기/모양을 전부 재정의해 하단 밑줄 형태로 덮어씀.
   Figma CL-003 Indicator: stroke #202020 w2, 폭 = 라벨 텍스트 폭(탭 좌우 패딩 8px 제외) */
.nav__link.is-active::after {
  position: absolute;
  top: auto;
  right: 8px;
  left: 8px;
  bottom: 0;
  width: auto;
  height: 2px;
  border-radius: 0;
  background: #202020;
}

/* 연결할 페이지가 아직 확정되지 않은 탭 — 연회색으로 비활성 표시.
   pointer-events:none으로 막으면 마우스 이벤트 자체가 이 요소를 통과해버려 hover해도
   밑에 깔린 요소의 기본 화살표 커서만 보이고 cursor:not-allowed가 안 먹었음 — 클릭
   차단은 Nav.tsx의 onClick(preventDefault)로 옮기고, 여기서는 커서만 담당한다 */
.nav__link--disabled {
  color: #c4c4c4;
  cursor: not-allowed;
}

/* ── 하단 탭 바 ── */
/* 베이스 스킨(aurora.css)의 .bottom-nav padding-top(~10px)이 남아있어 실제 높이가
   .bottom-nav__item의 70px보다 커지는 문제가 있어 padding을 0으로 리셋.
   position:fixed는 뷰포트 기준이라 .page__content 폭(모바일 유동폭 / PC --pc-content-width)과
   따로 동기화해야 했는데, BottomNav는 이미 .page__content.site의 자식이라
   position:sticky로 바꾸면 부모 폭을 그대로 상속해서 폭이 항상 일치함(별도 width/left/right 불필요) */
.bottom-nav,
.page .bottom-nav {
  position: sticky;
  bottom: 0;
  /* 베이스 스킨이 구 fixed 방식용으로 넣어둔 left/transform/width/max-width 하드코딩을
     리셋 — sticky는 부모(.page__content.site) 폭을 그대로 상속해야 함.
     베이스 스킨 선택자(.page .bottom-nav)가 특이도가 더 높아서 이것도 같이 맞춰야 이김 */
  left: auto;
  right: auto;
  transform: none;
  width: 100%;
  max-width: none;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 0;
  background: #fff;
  /* Figma는 바(사각형)와 쿠폰 원형 배지(돌출부)를 하나의 도형으로 보고
     그 실루엣 전체에 그림자 하나를 씌우는 방식(offset -4px, blur 8px, alpha 0.04).
     filter: drop-shadow로 통째로 재현하면 될 것 같지만, overflow로 튀어나온
     원형 배지가 필터의 렌더 스냅샷에서 바 박스 안쪽으로 잘려나가 원 부분에
     그림자가 전혀 안 생기는 문제가 있어(브라우저 필터의 알려진 동작) 포기 —
     대신 바와 원 각각에 같은 스펙의 box-shadow를 걸어 이어붙인 것처럼 보이게 함 */
  box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 0 16px;
  height: var(--bottom-nav-height);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}

.bottom-nav__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eoshin-tab-inactive, #9b9b9b);
}

.bottom-nav__item.is-active .bottom-nav__icon {
  color: #404040;
}

.bottom-nav__label {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.0017em;
  text-align: center;
  color: var(--eoshin-tab-inactive, #9b9b9b);
}

.bottom-nav__item.is-active .bottom-nav__label {
  color: #404040;
}

/* 쿠폰 FAB 버튼 */
.bottom-nav__fab {
  position: relative;
  width: 72px;
  height: var(--bottom-nav-height);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
}

/* 원형 배지가 바 상단 경계 위로 12px만 튀어나오는 구조라 그림자를 원에 그대로
   걸면 바 안쪽까지 번져 보임 — 그림자 전용 레이어를 따로 두고 바 경계(y=0)
   위쪽만 노출되게 넉넉히 클리핑. 컨테이너 폭도 원(52px)보다 넓게 잡아
   블러 번짐이 좌우로 잘리지 않게 함(바 그림자와 동일 스펙으로 이어붙여 보이게) */
.bottom-nav__fab-shadow {
  position: absolute;
  top: -80px;
  left: 0;
  width: 72px;
  height: 80px;
  overflow: hidden;
  pointer-events: none;
}

.bottom-nav__fab-shadow::after {
  content: '';
  position: absolute;
  top: 68px;
  left: 10px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04);
}

.bottom-nav__fab-circle {
  position: absolute;
  top: -12px;
  left: 10px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* Figma Selected=DiscountDeselected 컴포넌트의 Label도 다른 탭과 동일하게
   비활성 시 회색(#9b9b9b)임 — 예전엔 "쿠폰은 항상 진한 색"으로 잘못 파악해서
   경로 활성 여부와 무관하게 고정해뒀던 것을 다른 탭과 같은 조건부 색상으로 수정 */
.bottom-nav__fab-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.0017em;
  text-align: center;
  color: var(--eoshin-tab-inactive, #9b9b9b);
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
}

.bottom-nav__fab.is-active .bottom-nav__fab-label {
  color: #404040;
}

/* ── PC 공통 레이아웃 배경 — Figma 5236:41112 루트 프레임 fill ── */
/* 그라디언트가 좌측 패널뿐 아니라 콘텐츠 카드(500px) 양옆 전체(우측 여백 포함)에 깔려있으므로
   body에 적용 — 모바일 폭에서는 콘텐츠가 항상 전체를 덮어서 안 보이므로 안전함.
   body 높이는 페이지 콘텐츠 길이만큼(수천px) 늘어나므로 background-attachment: fixed로
   그라디언트 크기를 뷰포트 기준으로 고정해야 Figma처럼 화면 어디서나 같은 톤으로 보임 */
/* body 배경만 있으면 그 자리에서 html의 기본 흰 배경이 잠깐 비치는 경우가 있어
   html에도 동일한 그라디언트를 깔아 어느 쪽이 보이든 흰 줄 없이 이어지게 함.
   추가로 단색(--pc-layout-bg)을 함께 깐다 — background-attachment:fixed 그라디언트는
   뷰포트 사각형에만 그려져서, 맥 오버스크롤(러버밴딩)처럼 문서 밖 영역이 드러나는 순간에는
   칠해지지 않은 캔버스가 흰색으로 보인다. 캔버스에 전파되는 단색이 있으면 그 순간에도
   같은 계열 색이 유지된다 */
html {
  background-color: var(--pc-layout-bg);
  background-image: var(--pc-layout-gradient);
  background-attachment: fixed;
}

body {
  background: var(--pc-layout-gradient);
  background-attachment: fixed;
}

/* 맥 러버밴딩으로 문서 밖이 드러날 때 색이 살짝 어긋나던 문제 — 위 단색(--pc-layout-bg)은
   그라디언트의 정확한 중간 톤(#e6edfe)인데, 위로 당기면 드러나는 곳은 화면 상단, 즉
   그라디언트가 가장 밝은 쪽(#f0f4fe)이라 rgb로 (10,7,0)만큼 어두워 한 단계 끊겨 보였다.
   평면색 하나로 그라디언트 양 끝을 동시에 맞출 수는 없으므로(상단에 맞추면 하단이 틀어짐)
   드러나는 순간 자체를 없앤다. 단색은 이 속성을 모르는 브라우저용 폴백으로 그대로 둔다.
   PC에서만 끄는 이유: 모바일은 당겨서 새로고침·바운스가 정상 동작이라 건드리지 않는다.
   overscroll-behavior는 뷰포트 스크롤러를 가리키는 html에 줘야 효과가 있다(body는 무효).

   주의: none은 바운스만 없애는 게 아니라 스크롤 체이닝도 끊는다. 현재 모달·바텀시트는
   자체 스크롤 컨테이너라 문제되지 않지만, 내부 스크롤 영역 끝에서 페이지로 이어 스크롤되길
   기대하는 UI가 생기면 이 규칙부터 의심할 것(그 경우 contain은 대안이 못 된다 — 체이닝만
   막고 바운스는 남아서 색 어긋남이 다시 보인다).

   바운스를 살려야 한다면 단색 교체가 아니라 그라디언트를 문서 전체로 늘리는 방식
   (background-attachment: scroll + background-size: 100% 100%)이 양 끝을 맞춘다. 대신
   스크롤에 따라 톤이 변해서 "화면 어디서나 같은 톤"(Figma 5236:41112 루트 프레임 fill)이
   깨지므로, 그건 디자인 의도를 바꾸는 결정이다 */
@media (min-width: 1001px) {
  html {
    overscroll-behavior-y: none;
  }
}

/* ── PC 좌측 패널(banner--left) — Figma 노드 5236:41112 ── */
/* 1001px 이상에서만 베이스 스킨이 display:flex로 노출시킴(그 이하에서는 display:none) */
/* 베이스 스킨의 .page .banner--left__tit(font-weight:bold), .page .banner--left img(width:100%)보다
   우선하도록 동일한 .page 조상 스코프로 선택자를 맞춤 */
.page .banner--left {
  /* html/body와 같은 그라디언트를 쓰되 background-attachment까지 fixed로 맞춰야 톤이 이어진다.
     기본값(scroll)이면 그라디언트가 배너 박스(580px × 뷰포트) 기준으로 다시 계산돼 주변과
     어긋난다 — 경계 x=220에서 234,240,254 → 233,239,254로 한 단계 끊기는 이음선이 실제로
     보였음. 배경을 아예 지우는 방법도 이음선은 없애지만, 배너가 가려주던 앱 카드 그림자
     (벤더 .page .site{box-shadow:0 0 50px rgba(0,0,0,.15)})의 왼쪽 절반이 드러난다 —
     그림자는 오른쪽에만 보이는 현재 모습을 유지해야 하므로 배경을 유지한다.
     ※ 주의: attachment:fixed는 조상에 transform/filter/will-change가 생기면 그 요소가 새
     컨테이닝 블록이 되어 무력화되고, 이 이음선이 조용히 돌아온다 — 이 영역(.page/.page-inner/
     .banner--left)에 애니메이션·트랜지션을 추가할 때는 경계 x=220 색이 이어지는지 확인할 것.
     스크롤해도 배경이 따라 움직이지 않는 것은 의도한 동작이다(Figma처럼 화면 어디서나 같은 톤) */
  background: var(--pc-layout-gradient);
  background-attachment: fixed;
  /* .banner--left와 .site는 같은 .page__content 클래스를 공유해서 위쪽의
     width:var(--pc-content-width) 규칙이 둘 다에 적용됨 — 원래는 베이스 스킨이 둘 다
     500px로 고정해서 500+500=1000(page-inner 폭)이 정확히 맞았는데, .site만 콘텐츠 폭에
     맞춰 줄이면서 둘을 더해도 1000이 안 채워져 가운데 빈 틈이 생김.
     position:fixed라 flex:1은 효과가 없으므로, page-inner(1000px)에서 .site 폭을 뺀
     나머지를 명시적으로 채워서 갭 없이 붙게 함.
     .page__content의 항상 적용되는 기본 규칙(max-width:500px)이 이 width 값을 500으로
     계속 잘라내고 있어서 max-width도 같이 풀어줘야 실제로 반영됨 */
  width: calc(1000px - var(--pc-content-width));
  max-width: none;
  min-width: 0;
}

.page .banner--left__tit {
  font-size: 36px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.02em;
  color: var(--eoshin-text-primary, #1a1a1a);
  text-align: center;
  white-space: normal;
}

.page .banner--left__logo {
  width: auto;
  height: 48px;
  margin-top: 28px;
}

/* ── 푸터 ── */
/* 푸터 — Figma Footer/Base(5218:34495 FT-000). 정책 링크(#fafafa 배경)와
   회사 정보(위쪽 1px #e6e6e6 구분선) 사이에 16px 간격.
   베이스 스킨(aurora.css)이 .footer{padding:30px 20px 100px;border-top:1px
   solid ...}, .footer__nav{margin:20px 0}, .footer__info{margin-bottom:20px}를
   기본값으로 깔아놔서, padding만 덮어쓰고 border/margin은 그대로 남아있었음
   — "이용약관" 위쪽에 예상 못한 공백이 생기던 원인. 전부 명시적으로 리셋 */
.footer {
  background: #fafafa;
  padding: 28px 16px 40px;
  border-top: none;
}

.footer__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

/* Figma CompanyPolicy(7298:51153)는 정책 링크가 1행이 아니라 2행(로그아웃+이용약관 /
   개인정보취급및보호방침+사업자정보확인)이라 가로 wrap 대신 세로 방향으로 행을 나눈다.
   벤더 aurora.css .footer__nav{cursor:pointer}(원래 행 전체가 하나의 토글이었던
   벤더 설계의 흔적)가 cursor는 상속 속성이라 실제 버튼/링크가 없는 빈 공간(각 행의
   남는 영역, gap 사이)까지 포인터 커서로 새어나오고 있었음 — 리셋해서 실제 클릭
   가능한 .footer__link(버튼/앵커, 자체적으로 cursor:pointer 지정)에서만 보이게 함 */
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  cursor: auto;
}

.footer__nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.footer__nav-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer__link {
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #9b9b9b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

/* 링크 사이 구분자 */
.footer__nav-sep {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #9b9b9b;
}

.footer__about {
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
}

/* "쇼핑몰/회사 소개" 약관 콘텐츠(Sanitized)를 그대로 렌더링 — 관리자 콘텐츠에
   이미 span별 font-size/font-weight 인라인 스타일이 있어 폰트패밀리/줄바꿈
   간격/색상만 지정 */
.footer__intro,
.footer__intro p {
  font-family: Pretendard, sans-serif;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #9b9b9b;
}

.footer__intro p {
  margin: 0 0 12px;
}

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

/* 회사명/대표자명("주식회사 애쓰지마 | 대표이사 : ...")·"SGMA CORP"에 쓰인 <b> —
   기본 스킨이 .footer__about에 font-weight:300을 깔아둬서, <b>의 브라우저 기본값인
   font-weight:bolder가 300 → 400으로만 계산돼(스펙상 300은 "700으로 뛰는" 구간이 아닌
   "400으로만 뛰는" 구간에 걸침) 주변 텍스트와 거의 구분이 안 됐음.
   Figma(BrandInfo/CopyRight의 SemiBold 오버라이드)대로 600을 명시 */
.footer__intro b {
  font-weight: 600;
}

.footer__extra-logo {
  margin-top: 8px;
}

/* ── PC 레이아웃: 모달/딤 콘텐츠 영역(500px) 제한 ── */
/* 뷰포트가 500px 초과일 때 portal이 전체 화면이 아닌 콘텐츠 열 안에서만 노출되도록 */
@media (min-width: 501px) {
  .portal {
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
  }
}

/* 베이스 스킨의 .title-modal--full 기본값(max-width:375px;min-width:375px)이 실제
   기기 폭(예: 390px 이상)과 무관하게 항상 375로 고정돼서, 그보다 넓은 화면에서는
   검색 모달 등 전체화면 모달 양옆에 빈 여백이 남아 화면을 다 못 채우는 문제가 있었음.
   모바일/태블릿에서는 뷰포트 전체를 채우고, PC(1001px~)는 아래 별도 규칙이 다시 덮어씀 */
.title-modal--full {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* .title-modal--full의 부모인 .modal 자체가 벤더 기본값(position:absolute;top:50%;
   left:50%;transform:translate(-50%,-50%);height:100%;max-height:861px)을 갖고 있어서,
   뷰포트 높이가 861px보다 작은 기기에서는 실제 뷰포트보다 몇 px 작게 렌더링되고, 그 중앙
   정렬 계산 오차만큼 위/아래에 딤(어두운 배경)이 얇은 줄처럼 드러나 보였음 — 전체화면
   모달(.title-modal--full)을 감싼 .modal만 .portal과 동일하게 뷰포트 전체를 꽉 채우도록
   고정 위치로 리셋 */
.modal:has(> .title-modal--full) {
  position: fixed;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-height: none;
}

/* .modal은 position:fixed라 뷰포트 기준으로 배치되는데, .portal이 transform을 가진
   501~1000px 구간에서만 우연히 .portal을 containing block으로 삼아 좁아지고, transform이
   없어지는 1001px~ 구간에서는 다시 뷰포트 전체 폭으로 튀어나옴 — .portal과 완전히 동일한
   폭 계산을 명시적으로 복제해서 모든 구간에서 콘텐츠 열 폭만 차지하게 함 */
@media (min-width: 501px) {
  .modal:has(> .title-modal--full) {
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
  }
}

@media (min-width: 1001px) {
  .modal:has(> .title-modal--full) {
    left: auto;
    right: calc((100vw - 1000px) / 2);
    transform: none;
    max-width: var(--pc-content-width);
  }
}

/* 벤더 .modal 기본값엔 width가 없다 — 화면마다 .config-modal.modal{width:450px} 식으로
   전용 모디파이어 클래스를 붙여야만 폭이 생기는 구조인데, TitleModal을 className 없이
   그냥 쓰면(예: 장바구니/주문서 "배송비 상세보기") 어떤 폭 규칙도 안 걸려서 콘텐츠 크기만큼
   쪼그라들어 트리거 버튼 위치에 작은 상자로 겹쳐 보였음(주문서 페이지만의 문제가 아니라
   장바구니에서도 동일하게 재현되는 기존 버그). 모디파이어 클래스가 없는 TitleModal에도
   기본 폭을 준다 */
.modal:has(> .title-modal:not(.title-modal--full)) {
  width: calc(100% - 48px);
  max-width: 400px;
}

/* <FullModal>(isFull=true → .title-modal--full)을 쓰는 앱 전체 전체화면 모달 헤더 —
   약관/문의내역/쿠폰/비밀번호찾기/FAQ/공지사항/주소찾기 등 25개 이상 화면이 전부 이 클래스를
   공유한다. onClose는 실제로는 히스토리 이동 없이 그냥 state를 꺼서 모달을 닫는 것뿐이라(각
   호출부의 onClose={() => setIsOpen(false)} 패턴), 벤더 기본 TitleModal 헤더(타이틀 가운데 +
   우측 X닫기) 대신 어신샵 서브페이지 헤더(Bar/TopBar: 좌측 뒤로가기 쉐브론 + 좌측 정렬 타이틀,
   .header--sub와 동일 스펙)로 보이도록 X 아이콘을 쉐브론으로 바꾸고 좌측으로 옮김 */
.title-modal--full .title-modal__header {
  justify-content: flex-start;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid #e6e6e6;
}

.title-modal--full .title-modal__close-btn {
  position: static;
  order: -1;
  flex-shrink: 0;
}

.title-modal--full .title-modal__close-btn .ico--x-black {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M15 18L9 12L15 6%27 stroke=%27%231A1A1A%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
}

/* Figma Bar/TopBar의 PageTitle은 20px/600/line-height 26px인데, 벤더 기본값(18px)이
   그대로 남아있어서 모든 화면에서 타이틀이 실제보다 작게 나오고 있었음 */
.title-modal--full .title-modal__title {
  justify-content: flex-start;
  overflow: hidden;
  margin-left: 12px;
  font-family: Pretendard, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: #1a1a1a;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 1001px 이상에서는 베이스 스킨이 .site(실제 콘텐츠)를 좌측 배너 영역(banner--left) 옆
   1000px 박스의 우측에 붙여서(margin-left: auto) 뷰포트 정중앙이 아닌 곳에 렌더링한다.
   위 규칙(뷰포트 정중앙 기준)을 그대로 두면 모달이 실제 콘텐츠와 어긋난 위치에 떠서
   "중앙에 이상하게 뜬다"는 문제가 생기므로, .site와 동일하게 우측 정렬로 맞춘다 */
@media (min-width: 1001px) {
  .portal {
    left: auto;
    right: calc((100vw - 1000px) / 2);
    transform: none;
    /* 베이스 스킨의 501px 규칙(max-width:500px)을 덮어써서 .page__content와 폭을 맞춤 —
       고정값이 아니라 --pc-content-width를 그대로 참조해 항상 레이아웃 폭을 따라가게 함 */
    max-width: var(--pc-content-width);
  }

  /* .portal 자체는 위에서 고쳤지만, 그 안의 실제 모달 콘텐츠 박스(.title-modal--full,
     검색 모달 등에서 씀)가 별도로 min/max-width:500px를 갖고 있어 .portal보다 더 넓게
     튀어나와 있었음 — 같이 --pc-content-width로 맞춤 */
  .title-modal--full {
    max-width: var(--pc-content-width);
    min-width: var(--pc-content-width);
  }

  /* 베이스 스킨은 PC(1001px~)에서 콘텐츠 폭을 500px(min-width:375px)로 고정하는데,
     Figma 모바일 프레임 기준으로 만들어진 이 스킨은 PC에서도 --pc-content-width로 맞춰야 함.
     min-width가 width보다 우선 적용되므로 같이 낮춰야 실제로 적용됨 */
  .page__content {
    width: var(--pc-content-width);
    min-width: var(--pc-content-width);
    /* 베이스 스킨의 항상 적용되는 기본 규칙(max-width:500px)이 --pc-content-width가 500을
       넘는 값으로 바뀔 경우 조용히 다시 잘라낼 수 있어 미리 방어 */
    max-width: none;
  }

  /* 아래는 베이스 스킨에 폭 500px(또는 375px)가 하드코딩된 나머지 fixed 요소들 —
     .portal과 같은 이유로 콘텐츠 폭과 어긋나 있어 한 번에 전부 정리함 */

  /* 오프캔버스 메뉴 딤 배경 — 현재 UI에는 여는 버튼이 없어 도달 불가능하지만 방어적으로 맞춤 */
  .offcanvas__dim {
    max-width: var(--pc-content-width);
  }

  /* 본인인증(성인/실명) iframe 모달 */
  .identification-verification-modal.modal {
    width: var(--pc-content-width);
  }

}

/* ── 하단 고정 바 — Purchase 컴포넌트가 React Portal로 Layout의 #bottom-bar-portal
   (Footer 뒤, .bottom-nav 앞의 형제 위치)에 렌더링되므로, .bottom-nav와 동일하게
   sticky로 .page__content.site 폭을 그대로 상속하면서 페이지 끝(Footer 포함)까지
   붙어있을 수 있음. <main> 안에 직접 두면 <main> 경계(Footer 시작 지점)에서 풀려버려
   Footer를 덮지 못했던 문제가 Portal로 해결됨 ── */
.product-detail.purchase {
  position: sticky;
  max-width: none;
  width: 100%;
  /* 베이스 스킨 기본값(사방 10px 동일)이 Figma Button/CTAArea(5236:30980, 좌우16/상하12,
     전체 높이 68px)와 달라 전체 바 높이가 살짝 낮았음(64px) — Figma 패딩 값으로 맞춤 */
  padding: 12px 16px;
}

.order-sheet-app-card {
  position: sticky;
  max-width: none;
  width: 100%;
}

/* .cart__fixed-order-btn 관련 스타일은 pages/Cart/ui/FixedOrderBtn/FixedOrderBtn.css로 이전됨 */

/* 상품상세 브랜드명/상품명 + 공유 버튼 — Figma InfoArea/HeadArea(5236:30950) */
.product-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.product-summary__name-area {
  flex: 1;
  min-width: 0;
}

.product-summary__share-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-top: 2px;
  background: none;
  border: none;
}

/* ── 확인/알림 모달(SDK Confirm/Alert) — Figma 공통 레이아웃 > 확인 모달(CL-008) ──
   벤더 기본값(카드 최소 350x250px, 딤 검정 80%, 테두리로 나뉜 무채색 버튼)이
   Figma 스펙(흰 카드 296px+radius12, 딤 검정 25%, radius8 파란/연파랑 알약 버튼)과
   전혀 달라서 다시 그림. 주소 검색 등 다른 커스텀 모달(.modal)은 그대로 두기 위해
   alert/confirm 박스를 담은 .modal에만 :has()로 스코프 */
/* 모달(Alert/Confirm/CustomModal 등 Portal 기반 전부)이 바텀시트보다 항상
   위에 오도록 z-index 명시 — 바텀시트(.bottom-sheet__dim/.bottom-sheet)는
   각각 30/31인데, 모달을 감싸는 .portal 자체가 벤더 기본값으로 z-index:7밖에
   안 돼서(position:fixed라 자체 스태킹 컨텍스트를 만듦) 그 안의 .dim/.modal에
   아무리 높은 z-index를 줘도 바텀시트보다 항상 뒤로 깔렸음 — .portal부터 올려야 함 */
.portal {
  z-index: 200;
}

.portal .dim {
  background-color: rgba(0, 0, 0, 0.25);
}

.modal {
  z-index: 201;
}

.modal:has(> .modal__box--alert),
.modal:has(> .modal__box--confirm) {
  position: fixed;
  top: 50%;
  left: 20px;
  right: 20px;
  bottom: auto;
  width: auto;
  height: auto;
  max-height: none;
  /* 벤더 기본값(.modal{background-color:#fff})이 자식(.modal__box--*)과 정확히
     같은 크기로 겹쳐져서, 자식의 radius 12px로 깎여나간 모서리 자리를 부모의
     각진 흰 배경이 그대로 채워버려 라운드가 안 보이던 문제 — 부모는 투명하게 */
  background-color: transparent;
  transform: translateY(-50%);
}

@media (min-width: 501px) {
  .modal:has(> .modal__box--alert),
  .modal:has(> .modal__box--confirm) {
    left: 50%;
    right: auto;
    width: calc(500px - 40px);
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 1001px) {
  .modal:has(> .modal__box--alert),
  .modal:has(> .modal__box--confirm) {
    left: auto;
    right: calc((100vw - 1000px) / 2 + 20px);
    width: calc(var(--pc-content-width) - 40px);
    transform: translateY(-50%);
  }
}

.modal__box--alert,
.modal__box--confirm {
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  /* Figma CL-008 Modal/Variation — 카드 패딩 24/16(좌우 16) */
  padding: 24px 16px;
  border-radius: 12px;
  background-color: #ffffff;
  box-sizing: border-box;
}

.modal__content {
  min-height: 0;
  padding: 0;
  /* Figma CL-008 카드 auto-layout gap 28 (콘텐츠-버튼 간격) */
  margin-bottom: 28px;
}

.modal__content img {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
}

.modal__text {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #1a1a1a;
  text-align: center;
}

/* OR-006 구매확정 확인모달처럼 제목 아래 보조 설명이 필요한 confirm에서 message를
   <>제목<span className="modal__subtext">보조설명</span></> 형태로 넘길 때 쓰는 보조 텍스트 */
.modal__subtext {
  display: block;
  margin-top: 4px;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #404040;
}

.modal__btns {
  justify-content: center;
  gap: 8px;
  padding: 0;
  border-top: none;
}

.modal__btns .btn {
  flex: 1;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background-color: #4a69ea;
  color: #ffffff;
}

/* Figma "기본배송지는 삭제할 수 없습니다" 등 단일 버튼 alert(5319:28175 Button/Buttons)
   실측값은 w116 — 임의로 잡아뒀던 128px보다 12px 작음.
   벤더 기본값 .btn{width:100%}가 남아있으면 flex-basis:auto가 그 width를 그대로 가져가
   버튼이 꽉 차 보이므로(flex-basis:auto는 width 속성이 있으면 content 크기 대신 그 값을 씀)
   width도 명시적으로 리셋해야 함 */
.modal__btns .btn:only-child {
  flex: 0 1 auto;
  width: auto;
  min-width: 116px;
  padding: 0 24px;
}

.modal__btns .btn:nth-of-type(n + 2) {
  border-left: none;
}

/* Confirm의 취소 버튼(첫 번째)만 연한 파랑 배경 + 파란 글씨로 구분 */
.modal__box--confirm .modal__btns .btn:first-child {
  background-color: #f0f4fe;
  color: #3c56d6;
}

/* ── 파괴적(위험) confirm 모달 공용 패턴 — Figma MY-015/OR-015/리뷰 삭제/회원탈퇴 계열 ──
   벤더 openConfirm은 모달마다 다른 클래스를 줄 수 없어(항상 .modal__box--confirm 고정),
   message JSX 안에 표식 클래스 `modal-danger-marker`를 가진 요소를 넣으면 :has()가 그
   모달만 빨간 톤으로 전환한다. 사용법:

   openConfirm({
     iconPath: warningIcon,                       // 48px 경고 일러스트(선택)
     message: (
       <>
         리뷰를 삭제할까요?
         <span className="modal__subtext modal-danger-marker">삭제한 리뷰는 복구할 수 없어요</span>
       </>
     ),
     cancelLabel: '취소',
     confirmLabel: '삭제하기',
     ...
   });

   보조설명이 없으면 <i className="modal-danger-marker" /> 만 넣어도 된다.
   취소(첫 버튼): 흰 배경 + #FF9698 보더 + #D40105 글자 / 확정(둘째 버튼): #F80409 배경 + 흰 글자.
   member-modification-exit-confirm__marker는 이 패턴의 원조(MY-015, MemberModificationForm.tsx)가
   쓰던 표식 — 공용화하면서 그 화면 CSS의 중복 규칙은 제거하고 여기서 함께 매칭한다 */
.modal__box--confirm:has(.modal-danger-marker, .member-modification-exit-confirm__marker)
  .modal__btns
  .btn:first-child {
  background-color: #ffffff;
  border: 1px solid #ff9698;
  color: #d40105;
}

.modal__box--confirm:has(.modal-danger-marker, .member-modification-exit-confirm__marker)
  .modal__btns
  .btn:nth-of-type(n + 2) {
  background-color: #f80409;
  color: #ffffff;
}

/* ── 메인 팝업(CL-009, 벤더 DesignPopup) — Figma 5849:28312 공통 팝업창 ──
   벤더 기본값(회색 1px 테두리 각진 카드 + 파란회색 닫기 버튼)을 Figma 스펙으로 교체:
   흰 카드 radius 12, 상단 이미지는 상단만 라운드, 하단 50px 버튼행
   "다시 보지 않기 | 닫기"(13px/400/#404040) + 세로 구분선 #E6E6E6 */
.design-popup {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
}

/* 벤더가 콘텐츠 박스에 또 한 겹 회색 테두리 + 10px 패딩을 그림 — 이미지가 카드에 꽉 차게 제거.
   패딩은 벤더가 `.editor .design-popup__content`(클래스 2개)로 걸어둬서 단일 클래스 선택자로는
   밀린다 — 아래에서 같은 구조로 다시 끈다 */
.design-popup__content {
  border: none;
  padding: 0;
  border-radius: 12px 12px 0 0;
}

/* 벤더 `.editor .design-popup__content{padding:10px}` 상쇄. box-sizing이 content-box라 이
   패딩이 어드민 팝업 크기 설정(detailInfo.screenWidth/Height) 위에 좌우·상하 20px씩 얹혀
   실제 박스가 설정값보다 커진다(360×200 설정 → 380×220 렌더) — 어드민 값이 그대로 나오게 제거 */
.editor .design-popup__content {
  padding: 0;
}

.design-popup__btns {
  border: none;
  height: 50px;
  background-color: #ffffff;
}

.design-popup__btns button {
  height: 50px;
  padding: 0 4px;
  background: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #404040;
}

.design-popup__btns button + button {
  border-left: 1px solid #e6e6e6;
}

/* 벤더가 !important로 파란회색 배경 + 흰 글씨를 강제 — 같은 강도로 되돌림 */
.design-popup__btn--close {
  background: #ffffff !important;
  color: #404040;
}

/* ── 어드민 팝업을 하단 바텀시트로 고정 ──
   어드민 팝업 관리의 좌표(detailInfo.screenLeftPosition/TopPosition)·크기 설정은 화면 어디에나
   떠 있는 플로팅 카드를 전제로 하는데, 어신샵은 하단 고정 시트로 노출하기로 정했다(사용자 요청).
   좌표·크기는 벤더가 인라인 style로 박아서 !important로만 덮을 수 있다 — 아래 인라인 상쇄가
   그 용도다. 어드민에서 좌표/크기를 바꿔도 이제 시트 위치·폭에는 영향이 없다(높이는 콘텐츠에
   맞춰 늘어나고 화면의 80%에서 멈춘 뒤 내부 스크롤) */
.design-popup {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  /* 시트라서 위쪽만 라운드 + BottomNav(z-index 5)·상단 헤더(5)보다 위 */
  border-radius: 16px 16px 0 0;
  z-index: 10;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

/* 벤더가 인라인으로 넣는 어드민 크기(width/height)를 시트 폭·자동 높이로 되돌린다 */
.design-popup .design-popup__content {
  width: 100% !important;
  height: auto !important;
  max-height: calc(80vh - 50px); /* 50px = 하단 버튼행 */
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
}

/* 어드민이 넣은 이미지는 시트 폭에 맞춘다(원본 3240px 같은 큰 이미지도 잘리지 않게) */
.design-popup .design-popup__content img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 이미지 위아래로 생기는 빈 여백 제거(2026-08-31 요청) ──
   어드민 에디터가 이미지를 문단으로 감싸고 뒤에 빈 줄바꿈을 하나 붙인다:
   `<p><a href="…"><img …></a><br></p>`
   그래서 팝업 크기 설정과 무관하게 ① 문단 기본 margin(위아래 14px씩)과 ② 빈 <br> 한 줄(16px)
   만큼 흰 띠가 생겼다(실측: 콘텐츠 275px 중 이미지 233px, 나머지 42px이 여백).
   문단 여백을 없애고, **맨 끝에 붙은** 줄바꿈만 지운다 — 텍스트 팝업에서 중간에 일부러 넣은
   줄바꿈은 살려야 하므로 :last-child로 한정한다. */
.design-popup .design-popup__content p {
  margin: 0;
}

.design-popup .design-popup__content br:last-child {
  display: none;
}

/* ── PC에서 팝업을 몰 콘텐츠 컬럼 기준으로 배치 ──
   어드민 팝업 좌표(detailInfo.screenLeftPosition/screenTopPosition)는 브라우저 창 기준으로
   해석되는데, PC 레이아웃은 몰 콘텐츠가 화면 중앙 컬럼(page-inner 1000px 안의 오른쪽
   --pc-content-width)에만 있어서 left:0 설정이 화면 맨 왼쪽(좌측 배너 위)에 떠버렸다.
   컬럼 왼쪽 끝만큼 밀어서 어드민 좌표를 "컬럼 기준"으로 읽게 한다 —
   컬럼 왼쪽 = 50vw + (1000px / 2) - var(--pc-content-width) (1440px에서 800px, 실측 일치).
   모바일(1000px 이하)은 화면 전체가 콘텐츠라 그대로 창 기준을 쓴다 */
@media (min-width: 1001px) {
  .design-popup {
    /* 시트도 몰 컬럼 폭·위치에 맞춘다. transform 대신 left/width를 직접 잡는 이유는
       하단 고정(position:fixed)에서 transform을 쓰면 어드민 인라인 left와 겹쳐 계산이 꼬이기 때문 */
    left: calc(50vw + 500px - var(--pc-content-width)) !important;
    width: var(--pc-content-width);
    transform: none;
  }
}

/* 어신샵 공용 벤더 컴포넌트 오버라이드 — 특정 화면 전용이 아니라 여러 화면이 공유하는
   ShopBy Aurora 컴포넌트(TextField/SelectBox/AddressForm/Tabs/ThumbItem/ProductSection
   등)를 대상으로 한다. _layout.css는 GNB/BottomNav/Header/Footer/PC 공통 레이아웃/공용
   모달 전용이고, 화면 하나만 쓰는 스타일은 해당 화면의 _*.css에 쓴다 — 여기는 그 사이,
   "여러 화면이 공유하지만 레이아웃 뼈대는 아닌" 벤더 컴포넌트 리셋만 모아둔다.
   새 화면에서 이미 여기 있는 컴포넌트(탭/셀렉트박스/주소폼/상품카드 등)의 벤더 기본값이
   또 새어나오면, 그 화면 CSS에 따로 재구현하지 말고 이 파일의 선택자 목록에 추가할 것. */

/* ── TextField / SelectBox 공통 보더 — Figma Input/TextInput 스펙 ── */
/* 벤더 기본 .text-field(TextField를 감싸는 <span>)가 자체적으로 각진 회색 보더를
   갖고 있어서, 화면마다 어신샵 스타일 둥근 보더를 <input>에 직접 덧입히면서
   똑같은 보더 스펙(Figma Input/TextInput: 기본 #e6e6e6, 포커스 #201f1f, 비활성 #d3d3d3,
   8px 라운드)을 회원정보수정/배송지관리/검색모달 등에서 매번 중복 정의해왔음 —
   여기 공통 지점 한 곳에서 관리하고, 화면별 CSS는 이 보더를 그대로 물려받게 함
   (기존 벤더 보더 제거 + 어신샵 보더 적용을 함께 처리) */
.text-field {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.text-field:focus-within {
  border-color: #201f1f;
}

.text-field:has(input:disabled) {
  border-color: #d3d3d3;
}

/* 벤더 QuantityChanger(component.css)의 가운데 수량 입력칸(.quantity-changer__input)도
   클래스명이 text-field라 위 공통 보더가 그대로 덧씌워지는데, 벤더 원래 설계는 이 칸에
   보더가 없고 양옆 증감 버튼의 border-right/border-left만으로 구분선을 만드는 구조라
   (component.css: .quantity-changer__input{border:none}), 위 규칙이 덮어쓰면서 스테퍼
   가운데 칸에 둥근 테두리 박스가 겹쳐 보였음 — Cart/Claim/ProductThumbItem 등
   QuantityChanger를 쓰는 모든 화면에 공통되는 문제라 여기서 한 번에 되돌린다 */
.quantity-changer__input.text-field {
  border: none;
  border-radius: 0;
}

/* 벤더 .select-box(SelectBox를 감싸는 <span> — 주문서 배송지/휴대폰 통신사 선택 등)도
   각진 회색(또는 검정) 보더를 자체적으로 갖고 있어 .text-field와 나란히 쓰이면 한 폼
   안에서 인풋끼리 테두리가 서로 달라 보였음 — 동일한 어신샵 보더 스펙으로 통일.
   .phone-number-input .select-box/.order-sheet .select-box(벤더, 클래스 2개)가 일반
   .select-box(클래스 1개)보다 명시도가 높아 이것도 따로 겨냥해야 함(안 그러면
   주문서의 "배송지 선택" 드롭다운만 벤더 기본 연한 테두리(#e1eaef)로 새어나옴) */
.select-box,
.phone-number-input .select-box,
.order-sheet .select-box {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.select-box:focus-within {
  border-color: #201f1f;
}

.select-box:has(select:disabled) {
  border-color: #d3d3d3;
}

/* ── AddressForm 공통 — 마이페이지 배송지 관리 · 주문서 배송지 변경이 공유 ── */
/* "주소찾기" 버튼(.address-form__zip-code .btn) — 벤더 기본값(검정 테두리/사각/130px
   고정폭)이 옆 우편번호 텍스트필드(#e6e6e6 보더/8px 라운드)와 전혀 다르게 보였음.
   마이페이지 배송지 관리·주문서 배송지 변경 두 화면 모두 AddressForm을 그대로
   재사용하는 동일 컴포넌트라 여기서 한 번에 맞춘다(80x_, #202020, radius 8) — 높이만
   화면마다 달라서(마이페이지 32px, 주문서는 벤더가 이미 40px로 맞춰놔서 별도 지정
   불필요) 페이지별 CSS에 남겨둔다 */
.address-form__zip-code {
  display: flex;
  align-items: center;
  gap: 8px;
}

.address-form__zip-code .text-field {
  flex: 1;
  width: auto;
}

.address-form__zip-code .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 80px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  background-color: #202020;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
}

/* ── Tabs 공통 — 상품상세/마이페이지 쿠폰·리뷰·클레임/아이디·비밀번호 찾기·FAQ 등
   .tabs를 쓰는 모든 화면에 공통 적용 ── */
/* 활성 탭 표시가 벤더 기본값 --point-color(샵바이 관리자가 몰 테마 색상으로 바꿀 수
   있는 변수)를 그대로 써서, 관리자가 포인트 컬러를 바꾸면 Figma가 지정한 고정 블랙
   밑줄 색상이 임의로 바뀌어버림 — 상품상세 탭에서 실제로 보라색으로 나오는 걸 확인함.
   카테고리 사이드바/GNB/BottomNav의 active 상태와 동일하게 고정 색상으로 덮어씀 */
.tabs__item.on {
  color: var(--eoshin-text-primary);
  border-bottom-color: var(--eoshin-text-primary);
}

/* 탭 라벨 폰트 — 벤더 body{font:"Montserrat","Noto Sans KR",sans-serif}가 전체에
   깔려있고 .tabs__item button에는 font-family 지정이 아예 없어서 그대로 새어나감.
   나머지 화면 전체가 Pretendard를 쓰는 것과 통일 */
.tabs__item button {
  font-family: Pretendard, sans-serif;
}

/* sticky로 고정되는 컨텍스트(상품상세 등)에서 벤더 기본값(top: 90px)이 이 스킨의
   실제 헤더 높이(56px)와 달라 스크롤 중 헤더 바로 아래가 아니라 그보다 34px 아래에
   탭이 고정되어 그 틈으로 스크롤 중인 콘텐츠가 비쳐 보이는 문제가 있었음.
   .tabs가 sticky가 아닌 컨텍스트(예: 아이디/비밀번호 찾기)에서는 top 값 자체가
   적용 안 되므로 무해함 — .nav/.category-sidebar와 동일하게 --header-height 참조 */
.tabs {
  top: var(--header-height);
}

/* ── 벤더 aurora.css의 화면별 구 스킨 탭 오버라이드 무력화 ──
   Figma Tab/CategoryMiddle·Tab/CategorySection은 마이페이지 상품후기(MY-004)·
   취소/반품/교환(MY-003)·주문내역(MY-002)·상품상세 정보/리뷰/Q&A 탭·FAQ(CS-002) 등에서
   전부 동일한 하나의 공용 컴포넌트인데(Figma 인스턴스로 직접 확인),
   벤더 aurora.css가 하필 이 화면들이 쓸 법한 클래스명(.profile-product-review,
   .claims__tabs)마다 서로 다른 구 스킨(짙은 남색/네이비 배경 + 흰 글씨) 탭 디자인을
   미리 박아놨음 — 화면 하나 늘 때마다 매번 새로 발견해서 그 화면 CSS에 각각
   덮어써왔던 걸(마이페이지 상품후기에서 처음 발견) 여기 공통 영역으로 모아
   한 번에 무력화한다. 새 화면에서 같은 증상(탭이 벤더 구 스킨 색으로 새어나옴)이
   보이면 페이지별 CSS가 아니라 이 선택자 목록에 추가할 것 — 화면별로 따로 재구현하지
   않는다(취소/반품/교환·FAQ에서 각각 따로 구현했다가 중복/누락이 발견된 적 있음).
   Figma 실측: 흰 배경, 높이 48px, 탭 바 전체에 걸친 연한 구분선(#e6e6e6 1px),
   활성 탭 밑줄(#202020 2px)만 그 위에 덮어 그려지는 구조, 라벨 16px/500(활성 600),
   비활성 라벨 #9b9b9b(--eoshin-tab-inactive).
   .orders__tabs(주문내역 상태 탭)·.product-detail .tabs(상품정보/리뷰/Q&A 탭)·
   .faq__tabs(자주 묻는 질문 카테고리 탭)는 벤더가 이 클래스명을 몰라서 위 두 화면과
   달리 아이템별 구 스킨 오버라이드 자체가 없는데, 그 대신 컴포넌트 기본값(아이템마다
   1px var(--default-color) 밑줄, 활성색 var(--eoshin-text-primary))이 그대로
   새어나와 있었음 — 같은 Figma 컴포넌트인 만큼 동일하게 맞춘다 */
.profile-product-review__tabs,
.claims__tabs,
.orders__tabs,
.product-detail .tabs,
.faq__tabs {
  height: 48px;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6;
}

/* 벤더가 탭 사이에 넣는 세로 구분선(어두운 배경 전용 장식) — Figma엔 없어서 제거 */
.profile-product-review__tabs li:not(:first-child):before,
.claims__tabs .tabs__item + .tabs__item::before {
  display: none;
}

/* .orders__tabs/.product-detail .tabs/.faq__tabs는 벤더가 이 클래스명 전용 리셋을
   안 갖고 있어서 컴포넌트 기본값(아이템마다 1px var(--default-color) 밑줄)이 그대로
   보임 — Figma는 컨테이너 전체에 걸친 위 구분선 하나만 있고 아이템 자체엔 선이 없어서
   제거 */
.orders__tabs .tabs__item,
.product-detail .tabs .tabs__item,
.faq__tabs .tabs__item {
  border-bottom: none;
}

/* 벤더가 같은 명시도(클래스 2개)로 뒤늦게(component.css 이후 로드되는 aurora.css) 전역
   .tabs__item.on을 덮어써서 흰 글씨/투명 밑줄로 새어나오는 걸, 명시도를 맞춰 다시 이김 */
.profile-product-review .tabs__item.on,
.claims__tabs .tabs__item.on,
.orders__tabs .tabs__item.on,
.product-detail .tabs .tabs__item.on {
  color: #1a1a1a;
  border-bottom: 2px solid #202020;
}

.profile-product-review__tabs .tabs__item button,
.claims__tabs .tabs__item button,
.orders__tabs .tabs__item button,
.product-detail .tabs .tabs__item button,
.faq__tabs .tabs__item button {
  font-size: 16px;
  font-weight: 500;
  color: var(--eoshin-tab-inactive, #9b9b9b);
}

/* color: 위(.tabs__item button) 규칙의 명시적 #9b9b9b가 li(.tabs__item.on)의 색 상속을
   이겨서 활성 탭 라벨도 회색으로 계산되던 문제 — 라벨 텍스트는 button 요소 안에 있으므로
   button 자체에 활성색을 명시해야 한다 (figma-audit-full.md PD Tab/CategoryMiddle 참고,
   Figma 활성 라벨 #1A1A1A/600) */
.profile-product-review__tabs .tabs__item.on button,
.claims__tabs .tabs__item.on button,
.orders__tabs .tabs__item.on button,
.product-detail .tabs .tabs__item.on button {
  font-weight: 600;
  color: #1a1a1a;
}

/* ── Checkbox(General/CheckBox) 공통 — 배송지관리·재입고알림·상품문의(비밀글)·
   약관동의(회원가입/오픈아이디 가입/마케팅수신동의/회원정보수정)·어신계정연동·장바구니 등
   여러 화면이 공유하는 하나의 Figma 컴포넌트(General/CheckBox, 20x20 원형).
   벤더 기본은 16x16 사각형이고, 화면마다(8곳) 동일한 재정의를 각자 복붙해왔음 — 여기
   한 곳으로 모은다. 체크 시 배경색은 Figma 실측 fill(#111111)이 정답인데 그중 7곳은
   옮겨적으며 #202020으로 조금씩 미끄러진 값이 굳어 있었고 장바구니 1곳만 정확한 값을
   쓰고 있었음 — Figma가 항상 우선이므로 정확한 값으로 통일한다.
   체크박스(Checkbox.js)와 라디오(Radio.js)가 같은 .check-radio 래퍼를 쓰는데, 라디오는
   벤더가 .check-radio__ico 자체를 display:none으로 숨기고 입력 엘리먼트를 직접 원형으로
   그리는 별도 구조라 이 규칙과 무관하다. 다만 레이아웃(.check-radio)과 라벨 색
   (.check-radio__label)은 라디오도 그대로 렌더링하므로, 아직 Figma 미검증인 라디오 화면
   (성별선택/현금영수증)에 새어나가지 않도록 [type="checkbox"]로 명시적으로 한정한다 */
.check-radio:has(input[type='checkbox']) {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.check-radio__ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
}

/* 체크 아이콘(.ico) 자체는 벤더가 큰 스프라이트 이미지에서 position:absolute + top/left:50% +
   transform:translate(-50%,-50%)로 잘라 보여주는 방식인데, 일부 모바일 기기에서 이 계산이
   어긋나 아이콘이 중앙에서 밀려 거의 안 보이는 문제가 있었다(2026-08-11 제보) — 그 메커니즘에
   기대지 않고 background-position:center로 직접 그려서 기기 종류와 무관하게 항상 정확히
   중앙에 오게 한다. 벤더 아이콘(.ico)은 겹쳐 보이지 않도록 숨긴다. */
.check-radio input[type='checkbox'] ~ .check-radio__ico .ico {
  display: none;
}

.check-radio input:checked ~ .check-radio__ico {
  background-color: #111111;
  border-color: #111111;
}

.check-radio input:checked[type='checkbox'] ~ .check-radio__ico {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2013L9%2017L19%207%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.check-radio input[type='checkbox'] ~ .check-radio__label {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
}

.check-radio input:checked[type='checkbox'] ~ .check-radio__label {
  color: #1a1a1a;
}

/* ── ThumbItem 공통 — 상품 썸네일을 쓰는 모든 화면(상품 목록, 카트, 주문서, 마이페이지
   찜/최근본상품/리뷰, 상품상세 관련상품 등)이 공유 ── */
/* 2열 그리드(.thumb-GALLERY/.thumb-CART)의 줄(행) 사이 간격 — 베이스 스킨은 flex-wrap만
   걸어두고 row-gap이 없어 줄바꿈 시 카드 사이 여백이 거의 없었음.
   Figma ProductCardGrid(5356:44524, 5356:44229 등 모든 상품 목록 화면에서 공통)의
   itemSpacing:24에 맞춤 */
.thumb-GALLERY,
.thumb-CART {
  row-gap: 24px;
  /* 베이스 스킨 기본 좌우 패딩(20px) 대신 Figma ProductListSection(5356:44228 등)의
     16px로 맞춤 — 같은 화면의 다른 요소(아이콘 그리드, 필터탭, 카운트바)는 전부 16px임 */
  padding-left: 16px;
  padding-right: 16px;
}

/* 이미지 영역 배경을 다른 카드들과 통일(#FAFAFA), 위시 버튼 절대위치 기준점 확보.
   Figma ImageFrame(341:3566)이 cornerRadius:8인데 여기 누락되어 있어 다른 카드
   (BestSellerCard, CampaignCard)와 달리 모서리가 각지게 보이던 문제를 맞춤.
   background는 손대지 않는다 — 벤더가 .thumb-item__media에 background:url(no-img.png)
   형태로 "이미지없음" 자리표시자를 shorthand로 깔아두는데(ThumbItemContent가 src 없으면
   .thumb-item__img 자체를 렌더링 안 해서 이 배경이 그대로 자리표시자로 보이는 구조),
   지우면 진짜 이미지가 없는 상품에서도 자리표시자가 안 보이게 된다.
   대신 아래 img-box/img/img 규칙으로 사진이 있을 때 박스를 완전히 덮어써서 자연스럽게
   가리기만 한다 — 박스 크기(72px/174px 등)와 무관하게 항상 안전한 방식(실제로 다른
   크기로 강제 축소해서 확인함) */
.thumb-item__media {
  position: relative;
  background-color: #fafafa;
  border-radius: 8px;
  overflow: hidden;
}

/* 벤더 <a>(.thumb-item__img-box)가 기본 display:inline이라 렌더링된 박스 높이가 텍스트
   line-height(~18px)만큼만 잡혀서, 클릭 가능 영역이 실제 이미지보다 훨씬 작았음
   (이미지 자체는 시각적으론 문제없이 꽉 차 보이지만 히트 영역만 작음) — 이미지 크기와
   실제 히트 영역을 일치시킨다 */
.thumb-item__img-box {
  display: block;
  width: 100%;
  height: 100%;
}

.thumb-item__img {
  border: none;
  width: 100%;
  height: 100%;
}

/* .thumb-item__img(span)가 display:flex라 자식 img가 기본 align-items:stretch로
   높이까지 강제로 늘어나고, width:100%(component.css)와 겹쳐 원본 비율이 무시된 채
   가로/세로 모두 늘어나 보이는(사실상 object-fit:fill) 문제가 있었음.
   Figma의 scaleMode:FILL(=object-fit:cover, 비율 유지하며 채우기)에 맞춤 */
.thumb-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 카트/주문서 상품 썸네일만 72x72/radius 4 — 전역 기본값(위, 상품 목록 그리드용
   8px 라운드)과 다른 두 화면 전용 크기라 여기서 따로 지정한다 */
.cart__product-card__image .thumb-item__media,
.order-sheet .thumb-item__media {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 브랜드명 — BrandName 텍스트 */
.product-thumb-brand {
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.0017em;
  color: #9b9b9b;
  margin: 0;
}

/* 할인 전 원가 — 취소선 */
.product-thumb-origin-price {
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.0017em;
  color: #9b9b9b;
  text-decoration: line-through;
  margin: 0;
}

/* 상품명 — 베이스 스킨 기본값(Montserrat, 14px/lh14px)이 남아있어 Pretendard로
   교체되지 않고 있었음. Figma Card/ProductCard ProductName(341:3577) 스펙에 맞춤 */
.product-thumb-title,
.product-thumb-title-product-name {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.0014em;
  color: #404040;
}

/* 최종가 — 베이스 스킨 기본값(Montserrat, 16px/700/letter-spacing:-1px)이 남아있어
   Pretendard로 교체되지 않고 있었음. Figma Price(341:3580) 스펙에 맞춤 */
.product-thumb-price,
.product-thumb-unit {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  color: #1a1a1a;
}

/* 할인율 — 가격 앞에 빨간색으로 표시. Figma DiscountRate(449:4995) 스펙(16px/lh24px)에 맞춤 */
.product-thumb-rate {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #ff272b;
  margin-right: 4px;
}

/* 위시(찜) 버튼 — Figma Card/WishButton, 이미지 우하단 12px 고정, 항상 노출.
   button 기본 테두리가 리셋되지 않아 Figma에는 없는 검은 1px 선이 새어나오고 있었음 */
.product-card__wish-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}

/* 찜 활성화 상태 — Figma Wished=True, 배경이 빨간색으로 바뀜 */
.product-card__wish-btn--active {
  background: #ff5a5d;
}

.product-card__wish-btn svg {
  width: 16px;
  height: 16px;
}

/* 프로모션 배지(최저가 등) — Figma Badge/Variation(Cheapest), 이미지 좌상단 4px 고정.
   ThumbItem 벤더 구조상 이 배지가 상품 링크(<Link>)의 형제 요소로 그 위에 겹쳐 그려져서,
   배지 영역을 클릭하면 링크를 안 타고 그냥 씹혀버리는 문제가 있었음 — 배지는 눌리는
   버튼이 아니라 정보 표시용이라 pointer-events:none으로 클릭이 아래 링크로 그대로 통과되게 함 */
.product-card__sticker-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  background: #ff5a5d;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

/* 스티커 색상 변형 — Figma Badge/Variation(Best/New/순위/최저가)은 라벨마다 배경색이
   다름. ShopBy 어드민 스티커 데이터엔 색상 정보가 없어 라벨 문구로만 구분 가능한
   변형(getStickerBadgeVariant)에 한해 여기서 배경/글자색을 덮어쓰고, 매칭되지 않는
   임의 문구는 위 기본(최저가류 빨간 배경) 스타일 그대로 노출된다 */
.product-card__sticker-badge--best,
.product-card__sticker-badge--rank-1 {
  background: #202020;
}

.product-card__sticker-badge--new {
  background: #4a69ea;
}

.product-card__sticker-badge--rank-2,
.product-card__sticker-badge--rank-3,
.product-card__sticker-badge--rank-4 {
  background: #d3d3d3;
  color: #1a1a1a;
}

/* stickerInfos[].type이 'IMAGE'인 경우 — 관리자가 올린 배지 이미지를 그대로 노출
   (텍스트 배지와 동일하게 이미지 좌상단 4px 고정, 높이만 맞추고 원본 비율 유지) */
.product-card__sticker-badge-img {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  height: 24px;
  pointer-events: none;
  width: auto;
}

/* 벤더 .thumb-item-badges{top:0;left:0}가 배지를 이미지 모서리에 딱 붙여놔서(여백 없음),
   다른 프로모션 배지(.product-card__sticker-badge)와 동일하게 Figma 실측 4px 인셋을 준다 */
.thumb-item-badges {
  margin: 4px;
}

/* 품절/판매상태 배지(구형, 좌상단 작은 배지) — PC의 SIMPLE_IMAGE 목록(이미지 없이 텍스트만
   나열, ProductGrid.tsx의 ProductThumbInfoBySimpleType)에서만 아직 쓰인다. 이미지가 있는
   일반 카드(모바일 GALLERY/LIST/CART 등)는 이미지 자체가 없어 아래 중앙 알약형 태그
   (.product-card__sold-out-tag)로 통일됐고 이 작은 배지는 더 이상 쓰지 않는다.
   Figma에 이 텍스트 전용 레이아웃의 배지 예시가 따로 없어, 이미 스펙이 있던 품절 배지
   (구 Figma 품절 카드 예시 6930:30533, 40x24/radius4/#111111)와 톤만 맞춘다 */
.badge.product-card__badge--sold-out,
.badge.product-card__badge-sale-status {
  min-width: 40px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: #111111;
  border-radius: 4px;
  background-color: #111111;
  font-size: 13px;
  font-weight: 600;
}

/* 품절/판매예정/판매종료 상품 이미지 오버레이 — Figma Dimmed(7453:44998). 예전엔 이미지
   전체에 검정 25% 오버레이 + 흰 로고 워터마크였는데, 디자인이 바뀌어 이미지 중앙에 검정
   75% 알약형 태그로 상태 문구를 보여주는 형태가 됐다(전체 이미지를 어둡게 하는 처리는
   빠짐). ProductSoldOutDim이 위시버튼/스티커 배지와 같은 HoverViewComponent 위치에서 먼저
   렌더링되어(DOM 순서상 아래) 그 위에 위시버튼/배지가 자연스럽게 겹쳐 보인다 */
.product-card__sold-out-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.product-card__sold-out-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
  color: #ffffff;
}

.product-card__sold-out-tag em {
  font-family: Pretendard, sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.product-card__sold-out-tag span {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 18px;
}

/* 총 개수 + 정렬 바 — Figma Bar/FilterBar(5356:44227). 베이스 스킨(aurora.css)이 여기에
   sticky 고정/하단 보더/32px 마진을 강제로 걸어놔서 스크롤하면 어색하게 떠 있고 밑에
   불필요한 공백이 생기던 문제를 같이 정리함 */
.total-sort {
  position: static;
  margin-bottom: 0;
  border-bottom: none;
  padding: 12px 16px;
}

/* font-family를 지정 안 해서 벤더 body{font:14px/1 "Montserrat",...} 전역 기본값이
   그대로 새어나오고 있었다 — "총 N개의 쿠폰/상품"의 숫자만 Pretendard가 아닌
   Montserrat 글꼴로 렌더링되던 문제 */
.total-sort__count {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
}

.total-sort__count .highlight {
  font-weight: 600;
  font-style: normal;
  color: #1a1a1a;
}

/* ── ProductSectionWrap 헤더 — SectionHeaderBar로 교체하며 베이스 스킨의 큰 타이틀
   (font-size:32px)/구분선 있는 더보기 버튼을 다른 섹션들과 동일한 헤더 스타일(좌우 16px
   패딩)로 통일. 카테고리/검색 등 여러 화면에서 재사용되는 벤더 클래스 ── */
.product-section__header {
  padding: 0 16px;
  /* 헤더-콘텐츠 간격은 SectionHeaderBar 자체의 margin-bottom(16px)이 담당 —
     여기서 12px를 더 얹으면 Figma 16px가 아니라 24px+가 됨(flex 컨테이너라 마진 미상쇄) */
  margin-bottom: 0;
}

/* .l-panel의 테두리/그림자/margin-bottom은 이제 전역에서 껐지만(_layout.css의 .l-panel
   규칙), .product-section 자신에게 벤더가 별도로 걸어둔 margin-top:60px는 .l-panel과
   무관한 규칙이라 여기서 따로 꺼야 한다 — Figma SCR-010_메인 프레임은 섹션 사이
   간격이 전혀 없이(gap 0) 딱 붙어있음 */
.product-section {
  margin-top: 0;
}

/* 메인 페이지 섹션 간 여백(카테고리배너/기획전/BEST 섹션과 동일하게 28px)을
   이 섹션에도 맞춘다 — .product-section은 카테고리/검색 등 다른 화면에서도
   재사용되는 벤더 클래스라 메인 페이지(.main-wrap)로만 스코프함 */
.main-wrap .product-section {
  padding-bottom: 28px;
}

/* ── 상품문의 텍스트 입력 공통 — 상품상세 "상품 문의하기"(ProductInquiryForm)와
   리뷰/Q&A "신고하기"(ReportForm)가 같은 클래스명(product-inquiry-form__title/__text)을
   그대로 재사용해서 쓰는데 둘 다 스타일이 전혀 없어 벤더 기본값 그대로였음 — 여기
   한 곳에서 맞춘다. Figma에 이 두 폼의 실제 목업이 없어 리뷰작성(ReviewForm)·1:1문의
   (PersonalInquiryForm) 등 이미 스타일이 있는 다른 게시판 폼과 톤만 맞춘다 */
.product-inquiry-form__title input {
  height: 44px;
  padding: 0 12px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
}

/* TextArea는 TextField와 달리 .text-field 래퍼가 없어(벤더 TextArea.js 확인) 보더를
   직접 지정해야 한다 */
.product-inquiry-form__text {
  height: 160px;
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
}

.product-inquiry-form__text:focus {
  border-color: #201f1f;
}

.product-inquiry-form__title ~ .character-counter__status,
.product-inquiry-form__text ~ .character-counter__status {
  margin-top: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9b9b9b;
}

/* 벤더가 현재 글자수 숫자에만 --point-color(몰 관리자가 바꿀 수 있는 색상)를 강제로
   입혀놔서, 어신샵 포인트컬러(파란색)가 그대로 새어나오고 있었음 — 위에서 지정한
   부모 색을 그대로 물려받게 리셋 */
.product-inquiry-form__title ~ .character-counter__status .character-counter__count,
.product-inquiry-form__text ~ .character-counter__status .character-counter__count {
  color: inherit;
  font-weight: 400;
}

/* 순위 리본 배지 — Figma Badge/Variation, 상단에서 이미지 프레임 좌측으로 8px 안쪽 고정
   (Badge/Variation 컴포넌트 자체는 64px 폭이지만 실제 리본은 그 안에서 8px 인셋된 위치에 있음).
   벡터 경로(M0 0H36V35.6436L18 45L0 35.6436V0Z)는 폭:높이 비율이 항상 100%:79.2%인
   지점에서 꺾이므로 clip-path 퍼센트 값은 rank1(36x45)/rank2+(32x40) 모두 동일하게 적용됨.
   원래 메인페이지 BestSellerCardRowSection 전용이었다가 BEST 전체보기(GalleryListPage)도
   같은 배지를 써서 이 파일로 옮김 — 클래스명은 그대로 유지(두 곳 다 리스크 없이 재사용) */
.best-seller-card__rank {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: 1;
  display: flex;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 79.2%, 50% 100%, 0 79.2%);
}

.best-seller-card__rank--first {
  width: 36px;
  height: 45px;
  padding-top: 6px;
  background: #202020;
}

.best-seller-card__rank--rest {
  width: 32px;
  height: 40px;
  padding-top: 5px;
  background: #d3d3d3;
}

/* 4위 이하 — Figma Badge/Variation은 4위부터 더 작은 28×28 배지(2·3위 32×40과 구분).
   clip-path는 퍼센트 기반이라 그대로 재사용 */
.best-seller-card__rank--rest-small {
  width: 28px;
  height: 28px;
  padding-top: 2px;
  background: #d3d3d3;
}

.best-seller-card__rank-label {
  font-family: Pretendard, sans-serif;
  font-weight: 600;
}

/* 1위 배지 — Figma Badge/Variation Container/1위(16px/lh24px) */
.best-seller-card__rank--first .best-seller-card__rank-label {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

/* 2~3위 배지 — 1위보다 작은 배지(32x40)에 맞춰 텍스트도 축소.
   Figma Badge/Variation Container/2위(13px/lh18px/letter-spacing 0.02) */
.best-seller-card__rank--rest .best-seller-card__rank-label {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.0015em;
  color: #1a1a1a;
}

/* 4위 이하 배지 — Figma 12px/400(2·3위 13px/600과 구분) */
.best-seller-card__rank--rest-small .best-seller-card__rank-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.0015em;
  color: #1a1a1a;
}

/* 사진 첨부 카메라 타일 그리드(ImageAttachTileGrid.tsx) — Figma PD-007_상품상세_리뷰작성
   (5593:8123) ImageUploadSection. 리뷰/1:1문의/취소·반품·교환 신청이 전부 같은 100x100
   카메라 타일 + 첨부 사진 그리드를 쓰는데, 화면마다(review-form__*, board-form__* 두 벌로)
   따로 구현/중복 정의돼 있던 걸 여기 하나로 모았다 */
.board-form__tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 16px;
}

.board-form__upload-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  padding: 0;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background-color: #ffffff;
}

.board-form__upload-tile span {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #404040;
}

.board-form__image-tile {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
}

.board-form__image-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-form__image-tile-remove {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background-color: #201f1f;
}

/* ── 간편로그인(OpenIdSignIn) 버튼 — 로그인(MB-001)/재인증(회원정보수정·회원탈퇴 진입)
   등 여러 화면이 같은 컴포넌트를 쓰는데, 브랜드 버튼 디자인이 SignInForm.css의
   .sign-in-open-id 스코프에 갇혀 있어서 재인증 화면엔 벤더 기본값(가운데 줄 그어진
   "간편로그인" 문구, 네이버 연두색 #1fd771 사각 버튼, 아이콘 없음)이 그대로 새고
   있었음(QA 지적, 2026-08-14) — 규칙대로 이 파일로 승격해 어디서 쓰든 같은 디자인.
   ("간편로그인" 구분선 문구는 Figma 로그인 화면에 없고 재인증 화면에서도 어색하다는
   확인을 받아 컴포넌트 전역에서 숨긴다) ── */
.open-id-sign-in__title {
  display: none;
}

.open-id-sign-in__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}

.open-id-sign-in__item {
  margin-top: 0;
}

/* 공용 컴포넌트가 provider를 알파벳 역순 정렬해 네이버가 먼저 오지만, Figma(MB-001)는
   카카오 → 네이버 순서라 시각 순서만 바꾼다(재인증처럼 provider가 1개인 화면엔 영향 없음) */
.open-id-sign-in__item.type-kakao {
  order: -1;
}

/* Figma 실측은 카카오/네이버 48px이지만 로그인 화면에서 어신앱 버튼(52px)과 높이를
   통일해달라는 요청이 있었음 — 모든 화면에서 52px로 통일 */
.open-id-sign-in__item button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 8px;
  font-weight: 600;
}

.open-id-sign-in__item button::before {
  content: '';
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.open-id-sign-in__item.type-naver button {
  background-color: #03c75a;
}

.open-id-sign-in__item.type-naver button::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M13.5596%2010.704L6.14589%200L0%200L0%2020L6.43845%2020L6.43845%209.296L13.8521%2020L20%2020L20%200L13.5596%200L13.5596%2010.704Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
}

.open-id-sign-in__item.type-kakao button {
  color: #000000;
}

.open-id-sign-in__item.type-kakao button::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2018.6667%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0001%200C4.47688%200%200%203.45884%200%207.72476C0%2010.3778%201.73157%2012.7166%204.36838%2014.1077L3.25893%2018.1606C3.16091%2018.5187%203.57047%2018.8041%203.88498%2018.5966L8.74819%2015.3869C9.1586%2015.4265%209.57568%2015.4496%2010.0001%2015.4496C15.5228%2015.4496%2020%2011.9909%2020%207.72476C20%203.45884%2015.5228%200%2010.0001%200Z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
}

/* 카테고리 페이지 레이아웃 — Figma 5218-33971 기준.
   CategoryBrowse(/category) 페이지 전용 — DisplayCategoryList/CategoryDisplayList가
   쓰는 widgets/CategoryMenu 관련 스타일(카테고리 상세 상단 아이콘 그리드/필터탭)은
   CategoryMenu.css 등 위젯에 콜로케이션됨. .category-content는 이 파일의 우측
   콘텐츠 레이아웃 컨테이너 전용이며, widgets/CategoryMenu/CategoryContent.tsx의
   관리자 등록 콘텐츠 영역은 이름이 같아 보이지만 별개(category-menu__content)다 */

/* 다른 페이지와 동일하게 문서 스크롤 사용 — 좌측 탭만 sticky로 고정 */
.category-layout {
  display: flex;
  align-items: flex-start;
}

/* 좌측 사이드바 탭 — sticky로 고정, top은 공통 헤더 높이만큼 오프셋 */
/* Figma 스펙(노드 5218-33971 CategoryTabGroup)에서 사이드바 배경이 탭 개수와 무관하게
   콘텐츠 영역 높이(뷰포트)만큼 항상 채워지므로, min-height로 배경이 탭 아래까지 이어지게 함.
   하단 고정 GNB만큼은 빼야 실제 보이는 영역과 맞고, sticky 범위도 불필요하게 줄지 않음.
   --header-height / --bottom-nav-height는 style.css :root에서 공통으로 관리 */
.category-sidebar {
  width: 100px;
  min-width: 100px;
  min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px));
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--header-height);
}

/* Figma CategoryPage/CategoryTab(5218:37283) — 라벨 14px, 좌측 정렬(pad-left 12),
   비활성 #9B9B9B */
.category-sidebar__tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 52px;
  padding: 8px 8px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
  background-color: #fafafa;
  text-decoration: none;
  text-align: left;
  word-break: keep-all;
  line-height: 1.3;
  box-sizing: border-box;
}

.category-sidebar__tab.is-active {
  background-color: #ffffff;
  font-weight: 600;
  color: #1a1a1a;
}

/* 우측 콘텐츠 영역. min-width:0이 없으면 flex 아이템 기본값(min-width:auto)이 적용되어,
   하위에 white-space:nowrap인 텍스트가 있으면(예전 category-campaign-banner__title) 그 텍스트의
   최소 폭(min-content)만큼 이 영역이 강제로 넓어져 사이드바 옆으로 화면이 밀려난다(기획전
   제목이 길 때 실제로 발생 확인, 2026-08-10). min-width:0으로 min-content 강제 확장을 끄면
   flex:1이 원래 의도대로 남은 공간까지만 차지하고, 그 안에서 title의 ellipsis도 정상 동작한다. */
.category-content {
  flex: 1;
  min-width: 0;
  background-color: #ffffff;
}

/* 카테고리 헤더 (타이틀 + 화살표). Figma(CategoryHeader 인스턴스)는 화살표가
   행 끝이 아니라 타이틀 바로 옆(4px gap)에 붙는 packed 레이아웃 */
.category-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  height: 48px;
}

.category-header__title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.category-header__icon {
  color: #9a9a9a;
  display: flex;
  align-items: center;
}

/* 하위 카테고리 3열 그리드 — Figma CategoryPage/Category/ItemGrid:
   행 간 gap 20 / 가로 gap 12 / 좌우 인셋 16 / pad-bottom 28 +
   하단 1px #F5F5F5 구분선 */
.category-item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 12px;
  padding: 0 16px 28px;
  border-bottom: 1px solid #f5f5f5;
}

/* 아이템 68×86 = 이미지 68 + 라벨 18, 간격 0 (Figma) */
.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  text-decoration: none;
}

/* 카테고리 상세 페이지 상단 아이콘 그리드(CategoryIconGrid)에서 현재 보고 있는
   하위 카테고리를 표시 — /category 전체 그리드에서는 쓰이지 않음(활성 개념이 없음) */
.category-item.is-active .category-item__label {
  font-weight: 700;
  color: #1a1a1a;
}

.category-item__img {
  width: 68px;
  height: 68px;
  object-fit: fill;
  border-radius: 4px;
}

.category-item__img--placeholder {
  width: 68px;
  height: 68px;
  border-radius: 4px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma CategoryItemLabel — 14px/500/lh18/#404040, 이미지-라벨 간격 0 */
.category-item__label {
  margin-top: 0;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
  text-align: center;
  word-break: keep-all;
  line-height: 18px;
}

/* ── 기획전 모음 (맨 아래 정적 탭) — Figma 5218:36704 ── */
.category-header--link {
  text-decoration: none;
  cursor: pointer;
}

/* 맨 마지막 섹션이라 콘텐츠가 뷰포트보다 짧으면 탭 클릭 스크롤이 문서 끝에서 막혀
   헤더 아래로 완전히 못 올라옴 — min-height로 부족한 만큼만 자동으로 채운다.
   콘텐츠가 이미 더 길면(기획전 개수가 늘어난 경우) min-height는 아무 영향이 없어
   불필요한 빈 공간이 남지 않는다. .header/.bottom-nav 둘 다 position:sticky라
   fixed처럼 겹치는 게 아니라 실제 문서 흐름 공간을 차지하므로 둘 다 빼야 한다 —
   .category-sidebar의 min-height 공식과 동일(--header-height만 뺐다가 .bottom-nav
   높이만큼 스크롤이 더 내려가는 문제가 있어서 맞춤) */
.category-campaign-section {
  min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.category-campaign-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px;
}

/* Figma 5218:36704 — TextArea가 카드 세로 중앙(높이 68, 상하 16px 여백)에 오도록
   flex center. 텍스트가 2줄로 늘어도 중앙 정렬이 유지된다(이미지는 absolute라 무관) */
.category-campaign-banner {
  position: relative;
  display: flex;
  align-items: center;
  /* 어드민이 label에 줄바꿈을 넣으면 제목이 2줄이 되어 내용 높이가 100px를 넘는다(제목 48 +
     캡션 26 + 패딩 32 = 106). 고정 높이로 두면 overflow:hidden에 잘려서 최소 높이로 바꿨다. */
  min-height: 100px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  text-decoration: none;
}

/* object-fit:cover는 넘치는 부분을 잘라내는 방식이라 정사각 이미지를 와이드 배너에
   채울 때 위아래가 크게 잘려나감 — 잘라내지 않고 가로/세로 100%에 그대로 맞춰 채움 */
.category-campaign-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.category-campaign-banner__text {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 70%;
  padding: 16px;
  box-sizing: border-box;
}

.category-campaign-banner__tag {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #1a1a1a;
}

.category-campaign-banner__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #1a1a1a;
  /* 어드민이 label에 입력한 줄바꿈(\n → useMainEvents에서 실제 개행으로 정규화)을 그대로
     반영한다. 메인 기획전 카드(campaign-card__headline)와 같은 방식.
     줄바꿈 없이 아주 긴 제목이 카드를 늘리지 않도록 2줄에서 말줄임한다(기존 nowrap+ellipsis가
     하던 방어 역할). */
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-campaign-banner__caption {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #404040;
}

/* ── PL-002 라이프스타일 카테고리 배너 (widgets/categoryMenu/LifestyleCategoryBanner)
   — Figma 5295:27014~27039. 360×160, bg #F0F4FE, 텍스트 좌 20/상 24 ── */
.lifestyle-category-banner {
  position: relative;
  width: 100%;
  height: 160px;
  background-color: #f0f4fe;
  overflow: hidden;
}

.lifestyle-category-banner__text {
  position: absolute;
  top: 24px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 헤드카피 — Figma 20/600/lh30/-0.01em/#1A1A1A */
.lifestyle-category-banner__title {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  white-space: pre-line;
}

/* 서브카피 — Figma 13/400/lh18/0.02em/#404040 */
.lifestyle-category-banner__subtitle {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #404040;
  white-space: pre-line;
}

/* 공지사항 목록 — Figma CS-001_공지사항목록(5295:27045) */
.notice {
  background-color: #ffffff;
}

.notice__list {
  margin: 0;
  padding: 0 16px 20px;
  list-style: none;
}

/* 벤더 기본 .notice__list li{padding:1.45rem 1.5rem 1.5rem;border-bottom:...}가
   태그 결합 선택자(타입+클래스)라 명시성이 .notice__list-item 한 클래스보다 높아
   패딩/보더 일부가 계속 새어 나왔음 — .notice__list 아래로 한 단계 더 묶어서 명시성을
   올려야 확실히 덮어써짐(값 자체를 !important 없이 이기려면 이 방법이 안전).
   Figma NoticeCard(5295:27048)는 individualStrokeWeights가 top/right/left:0,
   bottom:1이라 실제로는 아래쪽 구분선 하나뿐 — 좌우/위 보더는 없음 */
.notice__list .notice__list-item {
  padding: 0;
  border-bottom: 1px solid #e6e6e6;
}

.notice__list-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 20px 0;
  border: none;
  background: none;
  text-align: left;
}

.notice__text-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* 벤더 기본 .notice__tit{display:-webkit-box;-webkit-line-clamp:2;margin-top:.6rem;
   line-height:1.52 등}가 같은 클래스라 명시성이 같아서, 겹치지 않는 속성(margin-top/
   display/line-height 등)은 계속 남아있었음 — Figma는 줄 제한 없이 그대로 줄바꿈되는
   텍스트라 전부 명시적으로 리셋 */
.notice__tit {
  display: block;
  overflow: visible;
  margin-top: 0;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  letter-spacing: normal;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #404040;
}

.notice__date {
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #9b9b9b;
}

.notice__chevron {
  flex-shrink: 0;
}

/* 공지사항 상세 — Figma CS-008_세부공지사항(5295:29013), 모달이 아니라 /notice/:postNo 페이지 */
.notice-detail {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.notice-detail__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px;
  /* Figma HeadTitle — individualStrokeWeights bottom:1(#E6E6E6)만 있는 하단 구분선 */
  border-bottom: 1px solid #e6e6e6;
}

.notice-detail__title {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #404040;
}

.notice-detail__date {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9b9b9b;
}

/* 본문 기본값은 Figma BodyTextContainer(14px/500/lh18) — 실제 콘텐츠는 어드민 에디터
   HTML이라 자체 인라인 스타일이 있으면 그쪽이 이김(기본값만 맞춰둔다) */
.notice-detail__content {
  padding: 20px 16px 80px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #404040;
}

.notice-detail__list-button {
  align-self: center;
  height: 40px;
  margin-bottom: 20px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  background-color: #f0f4fe;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #3c56d6;
}

/* 주문 상세내역 페이지(OrderDetail) — Figma OR-004_주문상세내역(5850:31048 등).
   지금까지 전혀 손대지 않아 벤더 기본 디자인(진한 네이비 헤더, 테두리 없는 회색 박스,
   Montserrat 계열 여백)이 그대로 노출되고 있었음 — Cart/OrderSheet와 동일한 방식으로
   Figma 카드 스펙(흰 배경, padding 16px)으로 교체한다. */
.order-detail .l-panel {
  margin-bottom: 0;
  padding: 16px 16px 20px;
  border: none;
  box-shadow: none;
  background-color: #fff;
}

/* Figma General/Divider(5850:30893/30913/30923) — 섹션 사이 8px 높이 #fafafa 구간.
   PriceListContainer(결제 정보) 뒤 버튼/안내 영역 앞에는 이 여백이 없어서(8개 상태
   전부 확인) 인접 형제 선택자로 "바로 앞에 다른 섹션이 있을 때"만 붙인다 */
.order-detail__delivery-info-list + .l-panel,
.order-detail .l-panel + .l-panel {
  border-top: 8px solid #fafafa;
}

/* 최상단 브랜드 블루 바(Figma PaymentHead)는 헤더보다 위에 있어야 해서
   .top-color-bar(hasTopColorBar 레이아웃 상태, Layout.tsx가 Header 앞에 렌더링)로
   옮겼다 — _layout.css 참고 */

/* 모든 섹션이 공유하는 제목 — Figma SectionTitle/HeadLabel(16/600/#1a1a1a).
   벤더가 이 클래스에 자체 padding:20px(전방향) + border-bottom을 갖고 있어서,
   이미 16px 패딩이 있는 부모(.l-panel)와 겹쳐 좌우 36px로 이중 들여쓰기 되고
   있었고 Figma에는 없는 구분선까지 타이틀 밑에 그려지고 있었음 */
.order-detail-info__item-title {
  margin: 0 0 16px;
  padding: 0;
  border-bottom: none;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

/* ── 상단 주문번호 바 — 벤더 기본값(진한 네이비 #3f434c 배경, 흰 텍스트)을 걷어내고
   Figma DeliveryInfoList 톤(흰 배경, 회색 라벨/진한 값 텍스트)으로 교체 ── */
.order-no-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
}

.order-no-label__no {
  margin-left: 8px;
  color: #404040;
}

/* Figma OR-004_주문상세내역_상품준비중(5850:30960) — "전체 취소"는 주문번호 옆이
   아니라 페이지 최하단에 전체너비 버튼으로 노출된다("목록 보기"는 Figma에 없는
   문구였음). 톤은 구형 하단 CTA(흰 배경/레드 테두리/레드 텍스트) 스펙 그대로 —
   철회(WITHDRAW_*) 버튼과 같은 파괴적 톤(카드 안 "상품 취소하기"는 신형에서 연블루) */
.order-detail__list-btn-wrap .order-detail__cancel-all-btn {
  width: 100%;
  height: 52px;
  border: 1px solid #ff9698;
  border-radius: 8px;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #d40105;
  cursor: pointer;
}

/* ── 주문 상품 — Figma OrderProductSection과 동일 패턴(OrderSheet OrderProductTable 참고) ── */
.order-detail__product-table .thumb-LIST {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Figma 신형 리비전(7770:40898) ProductStatusCard — 상품마다 r12/#E6E6E6 1px 보더 카드로
   감싸고, 카드 안에 상태 배지/상품 정보/택배사·송장 행/버튼을 함께 담는다
   (구형처럼 카드 보더 없이 플랫하게 나열하지 않음) */
.order-detail__product {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background-color: #fff;
}

/* 카드 안 상태 배지 래퍼 — 배지(span)가 줄 전체로 늘어나지 않게 블록 여백만 리셋 */
.order-detail__product-status {
  margin: 0;
}

/* 상품 이미지 — Figma ImageContainer(7298:44019) 72x72/radius 4px인데, OrderSheet엔
   이미 같은 스코프 규칙(.order-sheet .thumb-item__media)이 있어 적용되지만 OrderDetail엔
   없어서 벤더 기본값(84x84/radius 8px)이 그대로 노출되고 있었음 */
.order-detail__product-table .thumb-item__media {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 이미지-정보 영역 가로 간격 — Figma OrderProductContainer(7298:44018) itemSpacing 12px인데
   벤더 .thumb-item__info 기본값이 padding-left:20px라 실제로는 20px로 더 벌어져 있었음
   (2026-08-11 실측으로 확인) */
.order-detail__product-table .thumb-item__info {
  padding-left: 12px;
}

/* 상품명 — Figma ProductName(7298:44022) 14px/weight 500/letter-spacing 2%/line-height
   18px(벤더 기본은 weight 400, letter-spacing/line-height 미지정) */
.order-detail__product-table .product-thumb-item__name .editor {
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.02em;
}

/* 옵션/수량 줄 — Figma 신형(7770:40898) "옵션: 기본 1개" 13px/400/line-height 16px/#9B9B9B.
   벤더 OptionLabel 대신 OrderDetailProductTable의 OrderOptionLine이 직접 그린다 */
.order-detail__product-option p {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  color: #9b9b9b;
}

/* 가격 — Figma 신형(7770:40898) SalePrice 16px/weight 600/#1a1a1a/line-height 19px.
   (14px는 구형 7298:44038 실측값이었음 — 신형 재실측으로 16px 복원, 2026-08-14) */
.order-detail__product-table .product-thumb-item__amount li:last-child {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 0;
  color: #1a1a1a;
}

/* 벤더가 이 클래스에 자체 스타일(--empty-color 배경 + 말풍선 모양 radius + 12px 회색
   텍스트)을 이미 갖고 있어서, 배경/여백/폰트를 명시적으로 리셋하지 않으면 안쪽의
   상태 배지(.order-detail__status-label)가 이 넓은 회색 박스 위에 얹힌 것처럼 보였음 */
.order-detail__product-top-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

/* Figma DeliveryState/Badge(8개 상태) — 3가지 톤: 준비중·진행중(파랑, 기본값)/
   완료(초록)/취소·반품·교환(회색). 톤 클래스는 OrderDetailProductTable.tsx의
   getStatusTone이 실제 라벨 문구를 보고 계산한다 */
.order-detail__status-label {
  /* Figma 배지 높이 24 = 텍스트 lh16 + 상하 4px */
  padding: 4px 8px;
  border-radius: 4px;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}

.order-detail__status-label--blue {
  background-color: #f1f4fd;
  color: #303ec5;
}

.order-detail__status-label--green {
  background-color: #e5f6ea;
  /* Figma 실측값 #009143 (구형 44282·신형 7770 동일) */
  color: #009143;
}

.order-detail__status-label--gray {
  background-color: #d3d3d3;
  color: #404040;
}

/* 택배사/송장번호 행 — Figma 신형(7770:40898) ShippingInfoRow: 좌측 "택배사 송장번호"
   (10/500/#9B9B9B), 우측 "배송 조회"(10/400/#9B9B9B) 양끝 배치 */
.order-detail__delivery-info {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #9b9b9b;
}

/* "배송 조회"(NextActionButton이 그리는 버튼) — 텍스트 링크 모양으로 리셋 */
.order-detail__delivery-info .btn--view_delivery {
  padding: 0;
  border: none;
  background: none;
  font-family: Pretendard, sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #9b9b9b;
  cursor: pointer;
}

/* Figma Button/CTAArea — 버튼 1개(상품 취소하기 단독 등)일 땐 카드 폭 전체를, 2개
   (배송완료: 교환⋅반품 신청 + 구매 확정)일 땐 절반씩 차지한다. flex:1 하나로
   두 경우 모두 자연스럽게 대응.
   크기는 신형 리비전(7770:40898) ProductStatusCard 실측 — 높이 48px/폰트 15px
   (구형 7298:43997은 52px/16px였고 이전 구현이 그걸 따르고 있었음) */
.order-detail__next-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-detail__next-action-btns button {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* 기본(세컨더리) 톤 — Figma "교환 ⋅ 반품 신청"(연한 블루 배경/블루 텍스트).
   Figma에 없는 액션(리뷰 작성 등)도 위험하지 않은 일반 액션이라 이 톤을 기본값으로 둔다 */
.order-detail__next-action-btns button {
  background-color: #f0f4fe;
  color: #3c56d6;
}

/* 프라이머리 톤 — Figma "구매 확정"(브랜드 블루/흰 텍스트), 유일하게 강조되는 액션 */
.order-detail__next-action-btns .btn--confirm_order {
  background-color: #4a69ea;
  color: #ffffff;
  font-weight: 600;
}

/* 카드 안 "상품 취소하기"(CANCEL) — 신형 리비전(7770:40898) 실측: 연블루 배경(#f0f4fe)
   + 텍스트 #4a69ea. 교환·반품(#3c56d6)과 미묘하게 다른 텍스트 색이 Figma에 그대로
   찍혀 있어 실측값을 따른다. 레드 파괴적 톤은 구형(7298:43997) 하단 CTA 스펙이라
   카드 안 버튼에는 쓰지 않는다 */
.order-detail__next-action-btns .btn--cancel {
  color: #4a69ea;
}

/* "교환 · 반품 신청" 통합 버튼(신형 7770:40898 배송완료 카드) — 세컨더리 톤과 동일.
   위 기본 규칙(.order-detail__next-action-btns button)이 이미 크기/톤을 입혀주므로
   여기선 추가 정의 없음(클래스는 식별용). */

/* 통합 버튼 클릭 시 교환/반품 선택 바텀시트 옵션 — 시트 셸은 공용 BottomSheet가 담당 */
.order-detail__claim-sheet-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.order-detail__claim-sheet-options button {
  height: 52px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  cursor: pointer;
}

/* 파괴적 톤 — 구형 Figma 하단 "상품 취소하기"(흰 배경/연한 레드 테두리/레드 텍스트) 스펙.
   철회(WITHDRAW_*) 액션은 진행 중인 신청을 되돌리는 동작이고 신형 시안에 별도 스펙이
   없어 이 톤을 유지한다 */
.order-detail__next-action-btns .btn--withdraw_cancel,
.order-detail__next-action-btns .btn--withdraw_return,
.order-detail__next-action-btns .btn--withdraw_exchange {
  background-color: #ffffff;
  border: 1px solid #ff9698;
  color: #d40105;
}

/* ── 주문일/주문번호 — Figma DeliveryInfoList(신형 7770:40898), 행마다
   label(#9b9b9b)/value(#404040) 좌우 배치. 송장번호 값만 배송조회로 이어지는
   클릭 요소라 포인트 컬러(#303ec5) 유지.
   Figma는 리스트 자체(DeliveryInfoList)엔 패딩이 없고 각 행(DeliveryInfoRow)이
   좌우 16px/상하 4px 패딩을 갖는 구조인데, 반대로 리스트에 12px 16px를 주고 행엔
   좌우 패딩이 빠져있어 상하 여백이 이중으로 더 크게 나고 있었음. 아래쪽 20px
   여백은 DeliveryInfoSection 자체의 paddingBottom이라 리스트의 마지막 여백으로 옮김 */
.order-detail__delivery-info-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
  /* 아래 경계는 8px #fafafa 디바이더(.l-panel border-top)만 — Figma General/Divider엔
     스트로크가 없어(실측) 예전에 함께 그리던 1px #e6e6e6 선은 제거 */
}

.order-detail__delivery-info-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 16px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.order-detail__delivery-info-list li > span:first-child {
  color: #9b9b9b;
}

.order-detail__delivery-info-list li > span:last-child {
  color: #404040;
}

/* ── 배송 안내 — Figma DeliveryNoticeSection(배송준비중/배송중 상태에서만 노출) ── */
.order-detail__delivery-notice {
  padding: 16px;
}

.order-detail__delivery-notice p {
  margin: 0;
  padding: 12px 20px;
  border-radius: 4px;
  background-color: #fafafa;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #404040;
  text-align: center;
}

/* ── 주문자 정보 / 배송지 — Figma DeliveryInfoSection, Label(#9b9b9b)/Value(#404040) ── */
.order-detail-info dl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.order-detail-info dl > div,
.order-detail-info dl {
  font-family: Pretendard, sans-serif;
}

.order-detail-info dt {
  display: inline;
  margin-right: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
}

.order-detail-info dd {
  display: inline;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
}

/* 벤더 aurora.css의 `.order-detail-info dl:not(.price-tag__final-amount) dd{word-break:break-all}`
   (명시도 0,2,2)가 위 규칙(0,1,1)보다 높아서 keep-all이 안 먹혔음 — 주소값이 길어 줄바꿈될 때
   "우편번호" 같은 단어가 음절 중간(우 / 편번호)에서 끊겨 보이는 문제라, 같은 조합 선택자로
   명시도를 맞춰서 이긴다 */
.order-detail-info dl:not(.price-tag__final-amount) dd {
  word-break: keep-all;
}

/* dt/dd가 각각 한 줄씩 흐르는 벤더 dl 기본 구조를 Figma처럼 "라벨 + 값" 한 행으로 묶는다 */
.order-detail-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 8px;
  column-gap: 12px;
}

/* ── 결제정보 — 결제수단 라벨 + 무통장입금 상세 + PriceTag(Cart와 동일 컴포넌트) ──
   벤더가 이 클래스에 자체 padding(20px 20px 0)을 갖고 있어, 이미 16px 패딩이 있는
   부모(.l-panel)와 겹쳐 좌우가 36px로 이중 들여쓰기 되고 있었음 — 리셋 */
.order-detail-info__pay-method {
  padding: 0;
  gap: 0;
}

.order-detail-info__pay-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.order-detail-info__pay-type-row > span:first-child {
  color: #9b9b9b;
}

.order-detail-info__pay-type-row > span:last-child {
  color: #404040;
}

.order-detail-info__app-card-info {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: #9b9b9b;
}

.order-detail-info__pay-method dl {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  background-color: #fafafa;
}

.order-detail-info__copy-btn {
  width: 100%;
  height: 40px;
  margin-bottom: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
  cursor: pointer;
}

/* 가격 행 자체(.price-info-list__*)는 주문서와 공유하는 entities/order/PriceInfoList
   컴포넌트가 co-located CSS로 직접 관리한다 — 이 파일에서 관리하지 않음 */

/* ── 하단 "전체 취소" 버튼 래퍼(canCancelAll일 때만 렌더링) ── */
.order-detail__list-btn-wrap {
  padding: 16px;
}

/* ReceiptInfo(간이영수증/거래명세서/결제영수증)도 같은 래퍼 클래스를 재사용하고 있어,
   전체 취소 버튼과 분리되도록 receipt-info로 스코프해 기존 스타일을 유지한다 */
.order-detail__list-btn-wrap.receipt-info .btn {
  width: 100%;
  height: 52px;
  border-radius: 8px;
  background-color: #4a69ea;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

/* 기획전 상세 페이지(EX-002, EventContents.tsx) 전용 CSS */

/* 히어로 배너 — Figma CampaignBanner(5236:29413) 실측. 이미지 위에 기획전 타이틀(20px/600)
   +서브타이틀(13px/400)을 왼쪽 정렬로 오버레이한다. 벤더 기본 .event-hero는 width:100%만
   있고 높이는 원본 이미지 비율 그대로라 Figma의 고정 160px 크롭 배너와 다름 */
.event-hero-banner {
  position: relative;
  overflow: hidden;
  background-color: #f0f4fe;
}

.event-hero-banner .event-hero {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.event-hero-banner__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  max-width: 200px;
  padding-left: 20px;
  pointer-events: none;
}

.event-hero-banner__title {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  white-space: pre-line;
}

.event-hero-banner__sub-text {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #404040;
  /* 타이틀과 동일 — 어드민이 입력한 줄바꿈(\n)을 그대로 살린다(EventTopImg.tsx 참고) */
  white-space: pre-line;
}

/* 전시 섹션 탭 — 사용자 요청으로 카테고리 3뎁스 필터탭(Tab/FilterSection,
   widgets/categoryMenu/CategoryFilterTabs.css)과 동일한 pill 스타일로 맞춘다.
   벤더 기본값은 연회색 배경 바 위에 어두운 pill(활성)만 스타일이 있고 비활성 버튼은
   색상 지정이 아예 없어 브라우저 기본 버튼 회색으로 보였다 */
.event-nav {
  padding: 12px 16px;
  background-color: #ffffff;
  border: none;
}

.event-nav .swiper-slide {
  width: auto;
  margin-right: 8px;
}

.event-nav .swiper-slide:last-child {
  margin-right: 0;
}

.event-nav__btn {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #9b9b9b;
  white-space: nowrap;
}

.event-nav__btn.is-active {
  border-color: transparent;
  background-color: #202020;
  color: #ffffff;
}

/* ── 회원탈퇴 페이지 — Figma CS-005_회원탈퇴(5295:28222) ──
   벤더 aurora.css의 .member-withdrawal 계열(회색 폼 박스 + 아이디 필드 + 빨강/남색 버튼)
   구조를 쓰지 않고 Figma 구성(사유 체크박스 → 자유입력 의견 → 동의 → 유의사항 → CTA)으로
   재구성한 화면(src/pages/memberWithdrawal/ui/memberWithdrawalContent)의 전용 스타일.
   재확인 모달의 빨간 톤은 _layout.css의 공용 패턴(.modal__box--confirm:has(.modal-danger-marker))이
   담당한다. */

/* 벤더 .member-withdrawal{padding:20px} 리셋 — 각 섹션이 자기 몫의 패딩을 갖는다 */
.member-withdrawal {
  padding: 0;
  background-color: #ffffff;
}

/* 섹션 타이틀 — Figma Bar/SectionHeaderBar(17px, pad 12/16, 더보기 버튼 숨김).
   회원정보수정(.member-modification-section-title)과 동일 스펙 */
.member-withdrawal__section-title {
  margin: 0;
  padding: 12px 16px 0;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  color: #1a1a1a;
}

/* 탈퇴 사유 목록 — Figma WithdrawSurveySection(행 52px, pad 16, 하단 보더 #f5f5f5) */
.member-withdrawal__reason-list {
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.member-withdrawal__reason-item {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
}

.member-withdrawal__reason-item:not(:last-child) {
  border-bottom: 1px solid #f5f5f5;
}

/* 자유입력 의견 — Figma WithdrawReasonSection > ReviewBox(328x120, r8, #e6e6e6 보더,
   플레이스홀더 14/500/#9b9b9b) */
.member-withdrawal__opinion {
  padding: 16px 16px 20px;
}

.member-withdrawal__opinion textarea {
  box-sizing: border-box;
  width: 100%;
  height: 120px;
  padding: 12px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #ffffff;
  resize: none;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #404040;
}

.member-withdrawal__opinion textarea::placeholder {
  color: #9b9b9b;
}

/* 8px 회색 거터 — Figma General/Divider(#fafafa), 다른 마이페이지 화면들과 동일 스펙 */
.member-withdrawal__divider {
  height: 8px;
  background-color: #fafafa;
}

/* 동의 영역 — Figma AgreementSection: "동의합니다" 체크(라벨 14/500) + 보조 문구
   (13/400/#9b9b9b, 체크박스 20px + gap 8만큼 들여쓰기) */
.member-withdrawal__agreement {
  padding: 16px;
  background-color: #ffffff;
}

.member-withdrawal__agreement-sub {
  margin: 8px 0 0;
  padding-left: 28px;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 18px;
  color: #9b9b9b;
}

/* 유의사항 — Figma CautionSection(#fafafa, 타이틀 16px + 본문 13/400/#404040).
   본문은 어드민 약관(WITHDRAWAL_GUIDE) HTML이라 컨테이너에 기본 타이포만 깔아준다 */
.member-withdrawal__caution {
  padding: 20px 16px;
  background-color: #fafafa;
}

.member-withdrawal__caution-title {
  margin: 0 0 8px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #404040;
}

.member-withdrawal__caution-content {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 18px;
  color: #404040;
}

/* CTA — Figma Button/CTAArea(pad 12/16, 좌 "취소" 160px + 우 "탈퇴하기" 160px, gap 8).
   버튼 자체 배색(#f0f4fe/#3c56d6, #4a69ea, disabled #e6e6e6/#ababab)은 EoshinButton이 담당 */
.member-withdrawal__btn-wrap {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background-color: #ffffff;
}

.member-withdrawal__btn-wrap .eoshin-btn {
  flex: 1;
}

/* ── 상품상세 페이지 벤더 오버라이드 — Figma PD-000(5218:34098) 감사 결과 반영 ──
   컴포넌트 로컬 CSS(Summary.css/Purchase.css 등)가 이미 있는 항목은 거기서 처리하고,
   여기에는 벤더 컨테이너 클래스 자체를 덮어야 하는(로컬 파일이 마땅치 않은) 것만 둔다 */

/* ProductInfo 섹션 패딩 — Figma ProductInfo(5236:30949) padding: 40px 16px.
   벤더 .product-summary{padding:3.2857rem 1.2857rem}(=46px 18px)가 그대로 남아있었음 */
.product-summary {
  padding: 40px 16px;
}

/* 배송정보 라인 — Figma DeliveryInfo(5236:30949): 위·아래 모두 1px #E6E6E6
   (individualStrokeWeights top:1/bottom:1) + padding 16px 0, 바로 위 PriceArea와의
   간격은 ProductInfo itemSpacing 20px. 벤더 기본(margin-top:2rem; padding-top:1.7rem;
   border-top:1px solid #eaeaea)은 하단 보더가 없고 색/여백이 전부 달랐음 */
.product-summary__freight-line {
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

/* 이미지 캐러셀 페이지네이션 도트 — Figma General/Dot: 활성/비활성 모두 8x8 원형,
   활성 #202020 / 비활성 #000000 25%. 벤더는 비활성 8x8 #9ea1a8에 활성만 24x8
   알약형(#40444d)이라 모양 자체가 달랐음 */
.product-image-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
}

.product-image-slider .swiper-pagination-bullet-active {
  width: 8px;
  border-radius: 50%;
  background: #202020;
}

/* 상세 본문(상품정보 탭) — Figma ProductDetailSection(5236:30944) padding: 16px 16px 20px.
   래퍼 .product-content__box의 벤더 패딩(10px 20px)은 리뷰/Q&A 탭이 각자 음수 마진으로
   상쇄하는 전제라 건드리지 않고(그쪽 규칙이 -20px 고정), DETAIL 탭 콘텐츠도 같은
   방식으로 래퍼 패딩을 상쇄한 뒤 자기 패딩만 갖게 한다. 벤더가 같은 클래스에 걸어둔
   margin-bottom:3.57rem(50px)도 이 margin 단축 속성으로 함께 제거됨 — Figma는 상세
   본문과 하단 아코디언 사이 추가 여백이 없음 */
.product-detail .product-content__content {
  /* 이 요소는 벤더가 .editor 클래스를 함께 붙여 width:100%가 걸려 있다. 폭이 auto가 아니면
     아래 좌우 음수 마진이 박스를 왼쪽으로만 20px 당기고 폭은 그대로여서(래퍼 패딩을 뺀 350px)
     오른쪽에 40px이 남고 본문이 왼쪽에 붙는다 — 좌 16px / 우 56px. width를 auto로 되돌려
     음수 마진만큼 폭이 늘어나게 해야 좌우 16px로 맞는다 */
  width: auto;
  margin: -10px -20px;
  padding: 16px 16px 20px;
}

/* 일반(ID/비밀번호) 회원가입 화면 — src/pages/signUp. Figma에 이 화면 시안이 없어
   (회원가입은 어신/소셜만 기획됨, 9efcf76 커밋 참고) 벤더 aurora 기본 스타일을 그대로
   쓰고, 벤더 기본이 어긋나는 부분만 여기서 최소로 손본다.

   주의: .sign-up-form 루트 클래스는 어신 SSO 가입 화면(EoshinSignUpContent, 루트에
   .eoshin-sign-up-form 병기)도 함께 쓴다 — 그 화면 전용 스타일은 EoshinSignUpContent.css에
   .eoshin-sign-up-form 스코프로 있으므로, 여기 규칙이 그 화면에 새어들지 않게 이 파일은
   일반 가입에만 존재하는 요소(.email-input 등) 기준으로만 작성할 것. */

/* 이메일 직접입력(아이디@도메인)과 도메인 선택 드롭다운 사이 간격 — 벤더 aurora.css는
   자기네 SelectBox 기준(.email-input + .select-box{margin-top:8px})으로만 간격을 주는데,
   이 프로젝트는 SelectBox 대신 커스텀 OptionDropdown을 쓰고 있어 이 규칙이 안 걸려
   드롭다운이 이메일 입력칸에 딱 붙어 보였다 — 같은 값(8px)으로 맞춰준다. */
.sign-up-form__input-wrap .email-input + .option-dropdown {
  margin-top: 8px;
}

/* 인증번호 발송/재인증/확인 버튼 — 벤더 기본 Button(theme=default, 회색) 대신 공용
   EoshinButton(variant=dark)으로 교체하면서, 가입 CTA(52px)와 구분되도록 벤더가 원래
   주던 크기(.authentication-btn / .text-field+.btn--default의 height:44px, margin-top:6px)를
   유지한다. EoshinButton.css의 .eoshin-btn.eoshin-btn(0,2,0)을 로드 순서와 무관하게
   이기도록 명시도 0,3,0으로 작성. 이 클래스는 일반 가입 폼에서만 쓰므로 어신 SSO 가입
   화면(.eoshin-sign-up-form)에는 영향 없음 */
.sign-up-form .eoshin-btn.sign-up-form__btn--certificate {
  height: 44px;
  margin-top: 6px;
  font-size: 14px;
}

/* newMain — 신규 메인 프로토타입 상품 카드 피드.
   다이나믹 컬러 스펙 v2.1: 카드마다 DynamicProductCard가 썸네일에서 추출·변환한 색을
   --card-bg 인라인 CSS 변수로 주입하고(모드는 컨트롤 바 토글이 결정), 카드 배경·
   그라데이션·info 영역이 이 변수 하나로 제어된다. 파스텔 모드는 L 87% 고정이라 텍스트는
   고정색(#333/#666/#444)을 쓴다. */

.new-main {
  padding: 16px;
}

/* 조합 테스트(/newMain/test) — 배너·출석바가 자체 마진(12px 16px)을 갖고 있어
   페이지 패딩을 빼고, 피드 그리드에만 같은 여백을 준다 */
.new-main--test {
  padding: 0 0 16px;
}

.new-main--test .new-main__grid {
  margin: 0 16px;
}

/* 추천 상품 섹션 헤더 — Figma 9553:40767: 출석바와 16px 간격(+헤더 자체 pt 12),
   좌우 16px. 헤더의 기본 margin-bottom 16이 첫 카드와의 간격을 만든다 */
.new-main__section-header {
  margin: 16px 16px 0;
}

/* 스펙 검토용 컨트롤 바 — 모드 토글 / 그라데이션 높이 입력 (검토 끝나면 제거).
   스크롤을 따라오도록 sticky — 헤더(56px) + GNB(48px + border 1px) 바로 아래에 붙는다.
   .new-main의 padding 16px을 음수 마진으로 상쇄해 풀블리드 흰 바탕으로 깐다 */
.new-main__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
  color: #333333;
  position: sticky;
  top: calc(var(--header-height) + 49px);
  z-index: 4;
  background: #fff;
  margin: -16px -16px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e6e6e6;
}

.new-main__control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.new-main__control input[type='number'] {
  width: 52px;
  padding: 4px 6px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  text-align: right;
}

.new-main__control input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--eoshin-blue);
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

.new-main__grid {
  display: grid;
  /* 1fr(=minmax(auto,1fr))이면 썸네일 원본폭이 컬럼 최소폭을 밀어 올려 가로 오버플로가 생김 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

/* 좌우 독립 컬럼 — 행 단위로 높이를 맞추지 않고 각 컬럼이 자기 카드만큼 쌓인다 */
.new-main__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* 텍스트·칩 색은 토큰으로 — 기본값은 스펙 v2.1 고정색("텍스트 고정" ON).
   "텍스트 고정" OFF(.new-main--text-adaptive)면 피그마 카드 변형(light/dark)처럼
   패널 밝기에 따라 토큰이 통째로 바뀐다(값은 피그마 dark 카드 픽셀 실측) */
.new-main-card {
  /* 가상 스크롤 — 화면 밖 카드는 브라우저가 레이아웃/페인트를 건너뛴다(네이티브 가상화).
     intrinsic-size는 대략적 카드 높이(스크롤바 안정용)이고 auto라 실측 후엔 실제값 사용.
     미지원 브라우저(구형 사파리)는 무시되어 기존처럼 전부 그린다 */
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
  --text-main: #333333;
  --text-sub: #666666;
  --chip-bg: rgba(255, 255, 255, 0.75);
  --chip-text: #444444;
  --reward: #666666;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 0.4px solid rgba(0, 0, 0, 0.08);
  background: var(--card-bg);
  text-align: left;
}

/* 적응 모드 — 밝은 패널: 피그마 light 변형(검정 텍스트 + 흰 40% 칩) */
.new-main--text-adaptive .new-main-card {
  --text-main: #000000;
  --text-sub: rgba(0, 0, 0, 0.6);
  --chip-bg: rgba(255, 255, 255, 0.4);
  --chip-text: rgba(0, 0, 0, 0.7);
  --reward: #4a69ea;
}

/* 어두운 패널(v2.2 짙은색 카드 포함) — 흰 텍스트 + 검정 40% 칩. 짙은색 스펙의
   text_color #FFFFFF 는 텍스트 고정 토글과 무관하게 항상 적용돼야 해서 스코프 없이 두되,
   적응 모드의 밝은 블록(.new-main--text-adaptive .new-main-card, 클래스 2개)보다 명시도가
   밀리지 않도록 적응 스코프 선택자도 함께 나열한다 */
.new-main-card--dark,
.new-main--text-adaptive .new-main-card--dark {
  --text-main: #ffffff;
  --text-sub: rgba(255, 255, 255, 0.6);
  --chip-bg: rgba(0, 0, 0, 0.4);
  --chip-text: rgba(255, 255, 255, 0.7);
  --reward: #7097ff;
}

.new-main-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
}

.new-main-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 이미지 → 파스텔 연결 그라데이션 — 스펙: px 고정 금지, 이미지 높이의 % 비율.
   기본 24%(v2.2 조정값), 컨트롤 바 입력이 --gradient-height로 덮어씀 */
.new-main-card__thumb::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--gradient-height, 24%);
  background: linear-gradient(to bottom, transparent 0%, var(--card-bg) 100%);
  pointer-events: none;
}

.new-main-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  padding: 2px 6px;
  border-radius: 4px;
  background: #ff373b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.new-main-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  padding: 10px 12px 14px;
  background: var(--card-bg);
  transition: background-color 0.3s;
}

.new-main-card__stock {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--chip-bg);
  border: 1px solid rgba(255, 39, 43, 0.5);
  color: #ff272b;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.new-main-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.02px;
  color: var(--text-main);
}

.new-main-card__price {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--text-main);
}

.new-main-card__pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sub);
}

.new-main-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.new-main-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

/* 적립금은 보조 텍스트 — 스펙 텍스트 가이드의 #666 */
.new-main-card__reward {
  color: var(--reward);
}

.new-main-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
}

.new-main-card__pick {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

/* 커스텀 팔레트 색 입력 — 콤마 구분 hex */
.new-main__custom-colors {
  width: 150px;
  padding: 4px 6px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

@charset 'utf-8';

:root {
  /* 어신샵 브랜드 색상 */
  --eoshin-blue: #4dacdf;
  --eoshin-navy: #101f3b;
  --eoshin-red: #e43d3d;
  --eoshin-bg: #f5f8fb;
  --eoshin-card: #e0f1fb;
  --eoshin-border: #e1eaef;
  --eoshin-gray-text: #9e9e9e;
  --eoshin-tab-inactive: #9b9b9b;

  /* 어신샵 텍스트/공용 색상 토큰 */
  --eoshin-white: #ffffff;
  --eoshin-text-primary: #1a1a1a;
  --eoshin-text-secondary: #404040;
  --eoshin-text-muted: #9b9b9b;

  /* 공통 레이아웃 치수 — 헤더/하단바 높이에 의존하는 페이지(예: 카테고리 sticky 사이드바)는
     이 값을 참조해서 계산해야 실제 헤더/하단바 크기가 바뀌어도 같이 어긋나지 않음 */
  --header-height: 56px;
  --bottom-nav-height: 70px;

  /* PC 공통 레이아웃(Figma 5236:41112) 배경 — 콘텐츠 카드(420px) 양옆으로 보이는 전체 배경 */
  --pc-layout-gradient: linear-gradient(135deg, #f0f4fe 0%, #dbe6ff 100%);
  /* 위 그라디언트의 중간 톤. 뷰포트 고정 그라디언트가 닿지 않는 순간(맥 오버스크롤 등)에
     캔버스가 흰색으로 비치지 않도록 html 배경색으로 함께 깐다 */
  --pc-layout-bg: #e6edfe;

  /* PC(1001px~)에서의 콘텐츠 폭 — 모달/바텀시트(.portal)도 이 값을 그대로 참조해서
     콘텐츠 폭이 바뀌어도 둘이 따로 어긋나지 않게 함 */
  --pc-content-width: 420px;

  /* Aurora 기본 변수 → 어신샵 브랜드로 교체
     주의: 이 변수들은 벤더 CSS(component.css/aurora.css) 안에서 수십~백여 곳에 쓰이고 있어서,
     하나를 바꾸면 애초에 의도한 화면 말고도 전혀 무관한 곳까지 조용히 영향을 줄 수 있다
     (예: --default-color를 바꿨다가 페이지네이션 비활성 버튼 배경이 덩달아 바뀐 사례 있음 —
     pages/ProductDetail/ui/Review(Inquiry)/*.css의 .pagination__prev:disabled 참고).
     이 값을 바꾸거나 @shopby/react-components 버전을 올린 뒤에는 `yarn audit:css`로
     의도치 않게 새어나온 곳이 있는지 다시 확인할 것(scripts/audit-vendor-css.mjs) */
  --whole-color: #fff;
  --background-color: #f5f8fb;
  --point-color: #4dacdf;
  --point-color-secondary: #101f3b;
  --black-color: #111;
  --dark-gray-color: #262626;

  --empty-color: #f5f8fb;
  --default-color: #e1eaef;
  --blue-gray-color: #3f434c;
  --gray-color: #9b9b9b;
  --gray-font-color: #828282;
  --tooltip-bg-color: #f7f7f7;

  --default-font-color: #181818;
}

/* 벤더(common.css)가 body{font:14px/1 "Montserrat","Noto Sans KR",sans-serif}로 전역 기본
   글꼴을 Montserrat로 깔아둬서, font-family를 따로 지정하지 않은 요소는 전부 이 값을
   상속받아 Montserrat/Noto Sans KR로 새어나갔다(Figma는 전체가 Pretendard) — 지금까지
   여러 화면에서 이 문제를 발견할 때마다 그 화면 CSS에 개별적으로 patch해왔는데
   (_sharedComponents.css 등 참고), 뿌리(body)를
   여기서 한 번에 고쳐두면 앞으로 새로 발견되는 화면에서도 반복할 필요가 없다.
   font-family만 override하므로 font 단축 속성의 나머지 값(font-size:14px 등)은
   그대로 남아있고, 그건 기존처럼 화면별로 필요한 곳에서 개별 지정한다 */
body {
  font-family: Pretendard, sans-serif;
}

/* 벤더(aurora.css)는 페이지 최상위 클래스마다(.claim/.cart/.order-sheet/.order-confirm/
   .order-detail) line-height:1.5em을 각각 따로 정의해둬서, 그 목록에 없는 새 페이지를
   추가할 때마다 화면 CSS에 같은 값을 반복해서 써야 했다(Pretendard 폰트 자체 지표가
   빡빡해서 line-height:normal이 글자 크기와 거의 1:1로 계산되는 문제 — claimSelect
   화면에서 실제로 겪음). 벤더 쪽 중복은 node_modules라 손댈 수 없지만, 우리가 새로
   만드는 페이지 루트 클래스는 여기 한 곳에 모아둔다 — 새 페이지를 추가할 때 이 셀렉터
   목록에 클래스명만 보태면 되고, 그 페이지 CSS에서 다시 선언할 필요가 없다 */
.claim-select {
  line-height: 1.5em;
}

/* 아래 @import들은 항상 index.tsx의 벤더 스타일(@shopby/shared/styles/common·component·aurora)
   보다 나중에 로드된다(index.tsx가 벤더 import 후에 이 style.css를 import함) — 이 프로젝트의
   모든 오버라이드는 "같은 명시도면 나중에 로드된 규칙이 이긴다"는 이 순서 하나에 의존한다.
   @import 순서를 임의로 재배열하지 말 것(알파벳순 정렬 등) — 특히 이 파일들 사이의 순서가
   바뀌는 건 무해하지만, 벤더 스타일 import보다 이 style.css가 먼저 로드되도록 바뀌면
   지금까지 고친 오버라이드가 전부 조용히 무력화된다 */

/* 샵바이 공용 Button(@shopby/react-components) — theme="dark"/"caution"의 기본 배경/
   radius/폰트가 어신샵 디자인과 달라 화면마다 같은 내용을 반복해서 스코프 오버라이드하고
   있었음(1:1문의 등록/취소, 구매하기 등에서 각각 #4a69ea·#f0f4fe·radius 8·Pretendard로
   독립적으로 실측·확인된 값이 동일해 어신샵 공통 브랜드 버튼 스타일로 판단, 전역으로 통일).
   theme="default"(수정/삭제 등 텍스트형 버튼 95곳)는 이 화면들마다 이미 자체 스타일을
   갖고 있어 영향 범위 밖에 두기 위해 dark/caution 두 테마에만 한정한다. 화면별로
   flex/margin/width 등 레이아웃 값만 다르므로 그 부분은 각 페이지 CSS에 남겨둔다. */
.btn--dark {
  border: 0;
  border-radius: 8px;
  background-color: #f0f4fe;
  color: #3c56d6;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.btn--caution {
  border: 0;
  border-radius: 8px;
  background-color: #4a69ea;
  color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.app-loading-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.app-loading-fallback__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e1eaef;
  border-top-color: #4dacdf;
  border-radius: 50%;
  animation: app-loading-fallback-spin 0.7s linear infinite;
}

@keyframes app-loading-fallback-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 렌더링 예외로 전체 화면이 대체될 때만 보이는 안전망 화면 — Figma 디자인 대상이 아니라
   브랜드 컬러만 맞춰 최소한으로 구성한다 */
.render-error-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 100vh;
  padding: 24px;
  text-align: center;
}

.render-error-boundary__message {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #101f3b;
}

.render-error-boundary__reload-btn {
  border: 0;
  border-radius: 8px;
  padding: 12px 24px;
  background-color: #4dacdf;
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
}