/* Figma CL-007 Toast/Type — 다크 배경(#202020) + radius 12, 하단 고정.
   position:fixed는 뷰포트 기준이라 PC에서 .page__content.site(우측 --pc-content-width
   컬럼)가 아니라 화면 정중앙에 뜨는 문제가 있었음 — _productDetail.css의 .share-toast와
   동일한 3단 브레이크포인트로 콘텐츠 컬럼 폭/위치를 그대로 따라가게 함 */
/* 페이드+슬라이드업 인/아웃 — ToastProvider가 BottomSheet와 동일한 mount-hold 패턴으로
   is-visible 클래스를 붙였다 뗀다. 브레이크포인트마다 가로 정렬용 transform(translateX)이
   달라서, 닫힌 상태의 translateY(8px)를 각 브레이크포인트의 기존 transform에 이어붙이고
   is-visible에서 그 오프셋만 0으로 되돌린다(BottomSheet.css와 동일한 방식) */
.app-toast {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 90px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Figma Toast/Type — 높이 48 고정(좌우 16, 상하 0), fill #202020 a0.88 */
  padding: 0 16px;
  min-height: 48px;
  border-radius: 12px;
  background-color: rgba(32, 32, 32, 0.88);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 501px) {
  .app-toast {
    left: 50%;
    right: auto;
    width: calc(500px - 40px);
    transform: translateX(-50%) translateY(8px);
  }

  .app-toast.is-visible {
    transform: translateX(-50%) translateY(0);
  }
}

@media (min-width: 1001px) {
  .app-toast {
    left: auto;
    right: calc((100vw - 1000px) / 2 + 20px);
    width: calc(var(--pc-content-width) - 40px);
    transform: translateY(8px);
  }

  .app-toast.is-visible {
    transform: translateY(0);
  }
}

.app-toast__content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Figma CL-007 — 찜(WishList) 변형만 아이콘-텍스트 gap 4(카트 변형은 8) */
.app-toast__content--like {
  gap: 4px;
}

.app-toast__message {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 액션("보러가기") — Figma 13px/400(메시지와 동일 굵기) */
.app-toast__action {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
}

/* SectionHeaderBar
 * Figma 노드: 423:1724 마스터 영역 / 5356:44522 (Bar/SectionHeaderBar)
 * 섹션 헤더: 제목 + 전체보기 버튼 (ChevronRight 포함)
 *
 * 높이: 26px (lh=26px Pretendard SemiBold)
 * padding-top: 12px — Figma 컴포넌트 자체에 내장된 상단 여백. 이전엔 섹션 래퍼마다
 * (CampaignCardSection 16px, BestSellerCardRowSection 16px 등) 제각각 위쪽 패딩을
 * 줘서 헤더 위 간격이 섹션마다 달랐는데, 헤더 자체가 여백을 갖게 통일함
 * margin-bottom: 16px — Figma 헤더-콘텐츠 간격(섹션 상단 패딩 16). 이 여백은 여기서만
 * 관리한다: 각 섹션 CSS가 그리드/리스트에 마진을 또 얹으면(과거 12+12=24px로 벌어졌던
 * 원인, flex 컨테이너라 마진 미상쇄) 안 됨
 */

.section-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  height: 26px;
  margin-bottom: 16px;
}

/* ── 섹션 제목 — Figma 노드: 423:1724 ── */
.section-header-bar__title {
  font-family: Pretendard, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  color: #1A1A1A;
  margin: 0;
}

/* 진열명에 "최저가"가 포함될 때 그 글자만 강조 — Figma(423:1724) styleOverrideTable 실측값 */
.section-header-bar__title-highlight {
  color: #F80409;
}

/* ── 전체보기 버튼/링크 ── */
.section-header-bar__more {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: opacity 0.15s ease-in-out;
}

/* ── hover ── */
.section-header-bar__more:hover {
  opacity: 0.7;
}

/* ── active ── */
.section-header-bar__more:active {
  opacity: 0.5;
}

/* ── focus-visible: 키보드 포커스 링 ── */
.section-header-bar__more:focus-visible {
  outline: 2px solid #101F3B;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 전체보기 라벨 — Figma 노드: 423:1727 ── */
.section-header-bar__more-label {
  font-family: Pretendard, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.0017em;
  color: #9B9B9B;
}

/* ── ChevronRight 아이콘 — Figma 노드: 3012:29978 ── */
/* flex align-items:center로 박스 중심은 라벨과 정확히 일치하지만, 실제 렌더링되는
   글자 잉크(Pretendard 폰트 메트릭상 라인박스 중심보다 약간 위쪽에 찍힘)와
   쉐브론 잉크 위치가 미세하게 달라 눈으로 보면 살짝 어긋나 보임 — 1px 위로 보정 */
.section-header-bar__chevron {
  width: 16px;
  height: 16px;
  stroke: #9B9B9B;
  flex-shrink: 0;
  transform: translateY(-0.5px);
}

/* AttendancePointBar — Figma 출석 포인트(9553:39793), 328×60 시안 기준(폭 유동).
   내부는 absolute 없이 flex + padding으로 배치: 좌우 padding 32, 세로 가운데 정렬,
   텍스트-일러스트 갭 32 */

.attendance-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 60px;
  /* 배너와의 간격 — 위 12px(사용자 확인 2026-09-11), 좌우 16px */
  margin: 12px 16px 0;
  padding: 0 32px;
  border-radius: 12px;
  background: #e3efff;
  /* 우측 일러스트가 바 위로 튀어나오는 시안 — 잘리지 않게 overflow 유지 */
  overflow: visible;
  /* Link지만 시안의 카드 룩 유지 */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* 텍스트 블록이 남는 폭을 차지해 일러스트를 오른쪽 끝으로 민다(갭은 최소 32 유지) */
.attendance-bar__texts {
  flex: 1;
  min-width: 0;
}

.attendance-bar__eyebrow {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.26px;
  color: #000;
}

.attendance-bar__title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.36px;
  color: #1975ee;
}

.attendance-bar__arrow-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background: rgba(25, 117, 238, 0.5);
  overflow: hidden;
}

/* 일러스트 — 이미지 위쪽 기준(상단 정렬), 바 아래로 넘치는 부분은 그대로 둔다
   (export 원본 80.7×67.7이 60px 바보다 큼) */
.attendance-bar__illust {
  width: 78px;
  height: 65px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Figma MB-004_어신계정연동_안내(6930:64388) */
/* .title-modal(부모)이 flex가 아니라 header(60px)+content가 위아래로 쌓이는데,
   height:100%로 두면 content 혼자서 title-modal 전체 높이(100%)를 또 차지해버려
   header 높이만큼(60px) 모달 박스 밑으로 넘치고, 그 넘친 부분(하단 CTA 버튼)이
   가려지지 않고 화면 밖으로 나가버렸음 — 벤더 기본값(calc(100dvh - 60px))이
   header 높이를 이미 빼고 있으므로 height는 건드리지 않고 내부 레이아웃만 flex로 */
.eoshin-link-modal .title-modal__content {
  display: flex;
  flex-direction: column;
}

/* Figma Content pad-top 80, HeadContent gap 28(로고↔텍스트) */
.eoshin-link-modal__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 80px 16px 0;
  text-align: center;
}

/* Figma TextArea gap=8 — 타이틀↔서브텍스트 간격은 로고↔타이틀(28)과 다름 */
.eoshin-link-modal__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.eoshin-link-modal__logo {
  width: 225px;
  height: 92px;
}

.eoshin-link-modal__title {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 26px;
  color: #1a1a1a;
}

.eoshin-link-modal__subtitle {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #9b9b9b;
}

/* Figma HeadContent–BodyContent gap=64 */
.eoshin-link-modal__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  padding: 64px 16px 0;
}

.eoshin-link-modal__sync-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  border-radius: 8px;
  background-color: #f0f4fe;
}

/* Figma BoxTitle — 24×24 아이콘 + 라벨(17px/lh26), 아이콘-라벨 gap 4(x=1102+24 → 1130 실측) */
.eoshin-link-modal__box-title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  color: #1a1a1a;
}

.eoshin-link-modal__box-title-icon {
  width: 24px;
  height: 24px;
}

.eoshin-link-modal__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eoshin-link-modal__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background-color: #ffffff;
}

.eoshin-link-modal__card-label {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #404040;
}

.eoshin-link-modal__card-value {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 18px;
  color: #9b9b9b;
}

.eoshin-link-modal__notice {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 18px;
  color: #404040;
}

/* 동의 체크박스(Figma MB-004 General/CheckBox) — 원형/색상 스펙은 여러 화면이 공유하는
   컴포넌트라 _sharedComponents.css로 이전 */

.eoshin-link-modal__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.eoshin-link-modal__cancel-btn,
.eoshin-link-modal__confirm-btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 52px;
  border: none;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.eoshin-link-modal__cancel-btn {
  background-color: #f0f4fe;
  color: #3c56d6;
}

.eoshin-link-modal__confirm-btn {
  background-color: #4a69ea;
  color: #ffffff;
}

.eoshin-link-modal__confirm-btn:disabled {
  opacity: 0.5;
}

/* Figma MB-005_어신계정연동_완료(6930:59173) — 체크마크+문구가 위쪽에 붙고(paddingTop 80)
   나머지 공간은 비워둔 채 CTA가 하단에 고정되는 구조라, 이 영역 전체를 flex:1로 둬서
   title-modal__content(flex column)의 남는 높이를 흡수하게 한다 */
.eoshin-link-modal__complete-head {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 16px 0;
  text-align: center;
}

.eoshin-link-modal__complete-icon {
  width: 160px;
  height: 160px;
}

/* HomeBanner — Figma 배너_로그인(9553:39792)·배너_비회원(41768)·배너_미연동(42770).
   328×160 시안 기준, 폭은 유동(양옆 16px 마진)이고 세로 160px 고정 */

.home-banner {
  position: relative;
  margin: 12px 16px 0;
  /* 시안 카드 높이 160 고정(폭은 유동) — 라운드는 CSS에서 직접 적용.
     스와이퍼 래퍼가 자체 여백으로 커지는 것도 함께 차단 */
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
}

/* 연동 조회 중 스켈레톤 — 카드와 같은 자리·크기로 먼저 그려 레이아웃 시프트 방지 */
.home-banner__loading {
  height: 160px;
  border-radius: 8px;
  background: #eef2f8;
}

/* 캐러셀 슬라이드 공통 — 상태 배너 카드(160px)와 어드민 배너를 같은 프레임으로 */
.home-banner__slide {
  height: 160px;
}

/* 어드민 BNSLIDE 배너 이미지 — 상태 배너와 같은 카드 프레임(160px, 라운드 8) */
.home-banner__admin-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 비회원/미연동 — 노드 전체를 그대로 export한 통 이미지(테두리·라운드 포함) */
.home-banner__static {
  position: relative;
}

.home-banner__image {
  display: block;
  width: 100%;
  height: 160px;
  /* 원본이 328:160 비율이라 세로 왜곡 없이, 넓은 화면에선 좌우만 미세 크롭 */
  object-fit: cover;
  border-radius: 8px;
}

/* 비회원/미연동 배너는 카드 전체가 클릭 랜딩(비회원 → 회원가입, 미연동 → 마이페이지) */
.home-banner__static {
  cursor: pointer;
}

.home-banner__card {
  position: relative;
  height: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* 웨이브 배경 한 장(시안 기하 그대로 구운 328×160@3x) — 폭이 늘어나면 가로만 늘어난다 */
.home-banner__waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 상단 프로필 줄 — 아바타+닉네임 / 등급 물고기+등급명 */
.home-banner__profile {
  position: absolute;
  top: 4.375%; /* 시안 7/160 */
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px;
}

.home-banner__profile-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-banner__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.home-banner__nickname {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.28px;
  color: rgba(0, 0, 0, 0.7);
}

/* 등급 칩 — 버튼이지만 시안의 텍스트 룩 유지 */
.home-banner__level {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.home-banner__level-label {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.26px;
  color: #000;
}

/* 중단 혜택 2칸 — 시안 좌 19px / 우 191px 배치를 유동폭에서 space-between으로 대응 */
.home-banner__benefits {
  position: absolute;
  top: 43.1%; /* 시안 69/160 */
  left: 19px;
  right: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-banner__benefit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 등급별 할인혜택 — 버튼이지만 시안의 텍스트 룩 유지 */
.home-banner__benefit--link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.home-banner__benefit-label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.24px;
  color: #fff;
}

.home-banner__benefit-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.28px;
  color: #ffed25;
}

/* 적립금 필 — bg rgba(20,40,116,0.05) + 흰 30% 테두리. 적립금 내역으로 가는 버튼 */
.home-banner__point-pill {
  position: absolute;
  top: 58.1%; /* 시안 93/160 */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(20, 40, 116, 0.05);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

/* 코인은 시안 렌더에서 24×24로 잘라낸 이미지 — 주변 웨이브가 동일해 배경이 이어져 보인다 */
.home-banner__coin {
  display: block;
}

.home-banner__point-label {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.28px;
  color: #fff;
  white-space: nowrap;
}

.home-banner__point-amount {
  flex: 1;
  text-align: right;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: #ffed25;
}

/* dot은 캐러셀 위 오버레이 — 슬라이드가 바뀌어도 같은 자리(카드 하단 중앙).
   스와이퍼 래퍼가 카드(160px)보다 높게 잡힐 수 있어 bottom 대신 카드 기준 top으로 고정 */
.home-banner__dots {
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}

.home-banner__dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  /* 시안 dot은 파란 배너 기준 흰색 — 밝은 어드민 배너 위에서도 보이도록 옅은 윤곽만 추가 */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
}

.home-banner__dot--active {
  background: #fff;
}