/* ============================================
   Main page sections
   main-design.md § 1 ~ § 6 / responsive.md § 5-2 ~ 5-7
   ============================================ */

.s-main {
  display: block;
  background: var(--color-white);
}

/* ============================================
   섹션 간격 정책
   - 흰 배경 섹션끼리: padding 20 0 → 인접 시 합산 20+20 = **40px 빈 공간**
   - 배경색 다른 섹션(s-mosaic 등): padding 40 0 (색 안쪽 위·아래 40 확보)
   - 색 다른 섹션과 인접한 흰 섹션: padding-bottom/top **40** → 색 경계 기점으로
     위 40(흰) + 아래 40(색) = 두 콘텐츠 사이 **80px**, 색 경계가 둘 사이 한 지점
   - 첫 섹션(Hero) 위쪽: padding-top **40** (헤더 아래 40 빈 공간)
   ============================================ */
.s-main > section { padding: 30px 0; }

/* 첫 섹션: 위쪽 40 */
.s-main > section:first-child { padding-top: 40px; }

/* s-category는 셀 내부 padding으로 여백을 처리하므로 외부 padding 0 */
.s-main > .s-category { padding: 0; }

/* 색 다른 섹션(현재는 s-mosaic만)
   - `.s-main > section` (specificity 0,1,1)보다 우선하도록 `.s-main > .s-mosaic`로 명시 */
.s-main > .s-mosaic { padding: 80px 0; }

/* 색 섹션 직전·직후의 흰 섹션은 색 경계 기점 40 확보 */
.s-main > section:has(+ .s-mosaic) { padding-bottom: 80px; }
.s-mosaic + section { padding-top: 80px; }

/* 마지막 섹션(CTA): 아래쪽도 40 */
.s-main > section:last-child { padding-bottom: 80px; }

/* ============================================
   § 1. Hero (운영자 빌더 배너)
   ============================================ */

.c-banner-hero {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  /*background: #6258F4;*/
}
.c-banner-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.c-banner-hero__image > .ph,
.c-banner-hero__image > img,
.c-banner-hero__image > picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-banner-hero__image .ph {
  border: 1px dashed rgba(255, 255, 255, 0.4);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05) 12px,
      rgba(255, 255, 255, 0.1) 12px,
      rgba(255, 255, 255, 0.1) 24px
    );
}
.c-banner-hero__image .ph__label { background: rgba(0, 0, 0, 0.3); color: #fff; }

/* c-banner-hero__body
   - flex column + height 100% + justify-content: space-between
   - 자식 3개(tabs / copy / ctas)가 위·중앙·아래로 자동 분포
   - copy 부모(c-banner-hero__copy)가 heading + body-text를 한 덩어리로 묶음
   - padding 50 0 0 50 (top·left만), ctas는 margin-bottom 50으로 박스 바닥 50 위
*/
.c-banner-hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-width: 500px;
  padding: 50px 0 0 50px;
  box-sizing: border-box;
  color: var(--color-white);
}

/* heading + body-text 묶음 */
.c-banner-hero__copy {
  display: flex;
  flex-direction: column;
}
.c-banner-hero[data-text-color="dark"] .c-banner-hero__body { color: var(--color-text-strong); }

/* ---- § 2.1 HERO 동적 panel 토글 ---- */
/* 패널 N개가 c-banner-hero 안에 stacking. is-active 만 보임 */
.c-banner-hero__panel {
  position: absolute;
  inset: 0;
  display: none;
}
.c-banner-hero__panel.is-active {
  display: block;
}

/* body-text 줄바꿈은 textarea 입력의 \n 을 그대로 시각화 */
.c-banner-hero__body-text {
  white-space: pre-line;
}

/* ---- Overlay 탭 (eyebrowTabs) ----
   Figma 시안: Overlay 박스 자체 padding 0, 첫·마지막 탭이 컨테이너 가장자리에 딱 맞음.
   active 탭은 컨테이너 높이(39px)와 동일, inactive 탭은 31px로 위아래 4px 내부 여백.
*/
.c-hero-tabs {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;            /* 부모 flex column의 stretch 차단 — 컨테이너 폭 = 자식 합산 폭 */
  width: fit-content;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  padding: 0;
  margin-bottom: 16px;
  height: 39px;
  gap: 0;
  backdrop-filter: blur(2px);
  overflow: hidden;
}
.c-hero-tab {
  height: 31px;
  padding: 0 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #4C4C4C;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.c-hero-tab.is-active {
  height: 39px;
  background: var(--color-white);
  color: var(--color-text-strong);
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.25);
  padding: 0 18px;
}

/* ---- Heading: 최대 2줄 고정 (1줄이어도 2줄 영역 차지, 초과는 잘림)
       white-space: pre-line — CP 입력 textarea 의 \n 줄바꿈 보존 ---- */
.c-banner-hero__heading {
  font-family: Pretendard, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;  /* 28px PC */
  line-height: 1.2;
  letter-spacing: -0.56px;
  margin: 0 0 16px;
  color: inherit;
  white-space: pre-line;
  /* 영역 고정 + 초과 줄 자르기 */
  min-height: calc(2 * 1.2em);
  max-height: calc(2 * 1.2em);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- Body text: Figma 1990:260 Pretendard Regular(400) 16px / 1.6 / white
   - 최대 3줄 고정 (1줄이어도 3줄 영역 차지, 초과는 잘림) ---- */
.c-banner-hero__body-text {
  font-family: Pretendard, "Pretendard Variable", sans-serif;
  font-weight: 400;
  font-size: var(--text-body-l);
  line-height: 1.6;
  color: inherit;
  opacity: 0.92;
  margin: 0;
  max-width: 440px;
  /* 영역 고정 + 초과 줄 자르기 */
  min-height: calc(3 * 1.6em);
  max-height: calc(3 * 1.6em);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ---- CTA 버튼 그룹 (Hero 색 슬롯)
   - body가 justify-content: space-between으로 자동 분포하므로 margin-top auto 불필요
   - margin-bottom: 50px → 박스 맨 아래에서 50px 위 (absolute 사용 X) ---- */
.c-banner-hero__ctas {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 50px;
}
/* Hero CTA 공통 폰트 (Figma 1990:272/277)
   - Pretendard SemiBold 14.5px / white / line-height 약 1.17
   - .c-btn--lg 기본값(17px Bold)을 override */
.c-btn--hero-primary,
.c-btn--hero-secondary {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 600;            /* SemiBold */
  font-size: 14.5px;
  line-height: 1.17;
  letter-spacing: 0;
}
.c-btn--hero-primary {
  --btn-bg: rgba(255, 255, 255, 0.31);
  --btn-text: #FFFFFF;
  /*box-shadow: var(--shadow-cta-primary);*/
}
.c-btn--hero-secondary {
  --btn-bg: transparent;
  --btn-border: #FFFFFF;
  --btn-text: #FFFFFF;
}
.c-btn__icon { flex: 0 0 auto; }

/* ---- Responsive Hero ---- */
@media (max-width: 1279px) {
  .c-banner-hero { height: auto; aspect-ratio: 1232 / 454; }
  .c-banner-hero__body { padding: 56px 0 0 40px; max-width: 50%; }
  .c-banner-hero__heading { font-size: 1.75rem; }
}
@media (max-width: 767px) {
  .c-banner-hero {
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
  }
  .c-banner-hero__body {
    position: relative;
    padding: 24px 16px 24px;
    max-width: 100%;
  }
  .c-banner-hero__heading { font-size: clamp(1.5rem, 7vw, 2rem); }
  .c-hero-tabs {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .c-banner-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .c-banner-hero__ctas .c-btn { width: 100%; }
}

/* ============================================
   § 2. 카테고리 아이콘 그리드
   ============================================ */
.c-category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 11px;
}
.c-category-cell {
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.c-category-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-soft); }
.c-category-cell > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  text-decoration: none;
  color: inherit;
}
.c-category-cell__icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 10px;
}
.c-category-cell__label {
  font-family: Pretendard, sans-serif;
  font-weight: 700;
  font-size: var(--text-label-m);
  color: var(--color-mono-1);
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 1279px) {
  .c-category-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .c-category-cell__icon { width: 60px; height: 60px; }
}
@media (max-width: 767px) {
  .c-category-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .c-category-cell__icon { width: 56px; height: 56px; }
}

/* ============================================
   § 3. 상품 추천 (Mode A Carousel)
   ============================================ */
.s-product-recommend__header {
  margin-bottom: 24px;
}
.s-product-recommend__title {
  font-size: var(--text-heading-2);
  font-weight: 700;
  color: var(--color-mono-1);
  margin: 0 0 24px;
}

/* ---- FilterChip ---- */
.c-filter-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 24px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
  cursor: grab;                    /* 드래그 가능 표시 */
  user-select: none;
}
.c-filter-chips::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.c-filter-chips.is-dragging { cursor: grabbing; }
.c-filter-chips.is-dragging .c-filter-chip { pointer-events: none; }

/* FilterChip — Figma 1990:340/342 사양 그대로
   비활성: bg #FFF + border 1px #CCC + Pretendard Regular 14px / #666
   활성  : bg #222 + border 1px #EEE + Pretendard Bold    14px / #FFF
*/
.c-filter-chip {
  flex: 0 0 auto;
  height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--color-mono-6);    /* #CCC */
  border-radius: 99px;
  background: var(--color-white);
  color: var(--color-mono-4);                /* #666 */
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 0.875rem;                       /* 14px */
  font-weight: 400;                          /* Regular */
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.c-filter-chip:hover { filter: brightness(0.96); }
.c-filter-chip.is-active {
  background: var(--color-mono-1);           /* #222 */
  border-color: var(--color-mono-7);          /* #EEE */
  color: var(--color-white);
  font-weight: 700;                          /* Bold */
}

/* ---- Carousel ----
   PC 콘텐츠 폭 1112(=1232 - 60×2) 안에 화살표 40×2 + gap 16×2 + 카드 5장 + gap 28×4가 들어가야 함.
   카드 폭 = (1112 - 40×2 - 16×2 - 28×4) / 5 = (1112 - 80 - 32 - 112) / 5 = 888 / 5 = 177.6 ≈ 178px
   → 메인 페이지 캐러셀 카드 폭은 178px (Grid 모드 224보다 작음 — 화살표 영역 보정)
*/
.c-product-carousel {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.c-product-carousel__nav {
  flex: 0 0 40px;
}
.c-product-carousel__track {
  flex: 1 1 auto;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.c-product-carousel__track::-webkit-scrollbar { display: none; }

/* ---- Product Card ----
   카드 폭은 트랙 폭에 비례하여 항상 5장 노출되도록 fluid 계산.
   계산식: (트랙 폭 - column-gap*4) / 5
   - 트랙 폭 = container 콘텐츠 - nav 40*2 - gap 16*2 = 콘텐츠 - 112
   - viewport ≥ 1352 (콘텐츠 1232): 트랙 1120, 카드 ≈ 201.6
   - 1280~1351: 콘텐츠 fluid (1160~1232), 카드도 비례 축소
   - 100% 기준은 부모(.c-product-carousel__track) 폭
*/
.c-product-card {
  flex: 0 0 calc((100% - 28px * 4) / 5);
  scroll-snap-align: start;
}
.c-product-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.c-product-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--color-mono-7);
  margin-bottom: 12px;
}
.c-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- hover 액션 영역 (견적서 / 구매하기 / 장바구니) — B 의 .buy_icon_wrap > .buy_icon > .buy_btn 패턴 동일 재현 ---- */

/* 1) wrap: 카드 가운데 absolute, opacity 0 → 1 (sub.css L490) */
.c-product-card__actions {
  position: absolute;
  z-index: 5;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;     /* hover 전 클릭 차단 — fade-in 중 픽업 방지 */
}
.c-product-card:hover .c-product-card__actions,
.c-product-card:focus-within .c-product-card__actions {
  opacity: 1;
  pointer-events: auto;
}

/* 2) bar: 알약형 검은 반투명 박스 (sub.css L491) — width 80%, padding 10px, border-radius 5em */
.c-product-card__actions-bar {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5em;
}

/* 3) buy_btn: 정사각형 1:1 비율 (padding-top 33.33% 트릭), hover 시 파란 배경 (sub.css L492) */
.c-product-card__action {
  position: relative;
  width: 33.33%;
  padding-top: 33.33%;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #ffffff;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.c-product-card__action:hover {
  background-color: var(--point-blue-1);
}

/* 4) 아이콘: 버튼 중앙 absolute (sub.css L493 의 .btn 역할). 크기는 B 의 img width 35%~45% 사이로 */
.c-product-card__action-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  display: block;
  pointer-events: none;
}

/* 5) txt: 기본 숨김, hover 시 표시. B 의 .txt 와 동일 (sub.css L494, L497) */
.c-product-card__action-label {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  display: none;
  pointer-events: none;
}
.c-product-card__action:hover .c-product-card__action-label {
  display: block;
}

/* hover 시 아이콘 위로 살짝 올려 라벨 자리 확보 (B는 padding-top trick + flex 로 동시 정렬되지만, 라벨이 absolute 라 아이콘이 살짝 위로) */
.c-product-card__action:hover .c-product-card__action-icon {
  top: 38%;
}

/* 모바일에선 hover 가 부자연스러우니 비활성화 */
@media (hover: none) {
  .c-product-card__actions { display: none; }
}
.c-product-card__brand {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--color-mono-1);
  margin: 0 0 6px;
}
.c-product-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-mono-1);
  margin: 0 0 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.c-product-card__price-original {
  font-size: 0.875rem;
  font-weight: 300;
  color: #727272;
  text-decoration: line-through;
  margin: 0 0 6px;
}
.c-product-card__price-final {
  display: flex;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
}
.c-product-card__discount { color: var(--point-blue-1); }
.c-product-card__sale { color: var(--color-mono-1); }

/* ---- Badges (이미지 위 absolute) ---- */
.c-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  padding: 0 6px;
  border-radius: var(--radius-img);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}
.c-badge--day {
  top: 8px;
  left: 7px;
  min-width: 40px;
  background: var(--color-stripe-violet);
}
.c-badge--tag {
  top: auto;
  bottom: 8px;
  right: 8px;
  min-width: 86px;
  background: var(--color-stripe-purple);
}

.s-product-recommend__more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* 빈 카테고리 결과 */
.c-product-carousel__empty {
  flex: 1 1 100%;
  padding: 40px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-mono-4);
}

@media (max-width: 1279px) {
  /* Tablet: 콘텐츠 폭 = viewport - 80, 안에 5장이 빡빡하면 3장씩 노출로 fluid */
  .c-product-card { flex-basis: calc((100% - 80px - 32px - 16px*2 - 20px*2) / 3); }
}
@media (max-width: 767px) {
  .c-product-carousel__nav { display: none; }
  .c-product-carousel { gap: 0; }
  .c-product-carousel__track { gap: 16px; padding: 0 16px; }
  .c-product-card { flex-basis: calc(100vw - 96px); max-width: 280px; }
  .s-product-recommend__more .c-btn { width: 100%; }
}

/* ============================================
   § 4. WHY SENDBEE 모자이크
   ============================================ */
.s-mosaic {
  background: var(--color-mosaic-bg);
  /* 카드 본문 wrap 위치를 whatIsSendbee(.s-about) 와 동일하게 맞춤 — 부모 wrapper 의 letter-spacing 차이로 §C 셀 텍스트가 한 줄 더 wrap 되던 문제 보정 */
  letter-spacing: -0.01em;
}

.c-mosaic {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 18px;
  align-items: stretch;
}

/* 3행 모자이크 — 셀별 span 배치 (시안 비율 기반) */
.c-mosaic__cell--a { grid-column: span 8; grid-row: 1; min-height: 240px; }
.c-mosaic__cell--b { grid-column: span 7; grid-row: 1; min-height: 240px; }
.c-mosaic__cell--c { grid-column: span 5; grid-row: 1; min-height: 240px; }
.c-mosaic__cell--d { grid-column: span 8; grid-row: 2; min-height: 240px; }
.c-mosaic__cell--e { grid-column: span 12; grid-row: 2; min-height: 240px; }
.c-mosaic__cell--f { grid-column: span 3; grid-row: 3; min-height: 180px; }
.c-mosaic__cell--g { grid-column: span 3; grid-row: 3; min-height: 180px; }
.c-mosaic__cell--h { grid-column: span 11; grid-row: 3; min-height: 180px; }
.c-mosaic__cell--i { grid-column: span 3; grid-row: 3; min-height: 180px; }

/* 흰 카드 공통 */
.c-mosaic-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-card-lg);
  padding: 30px;
  box-shadow: var(--shadow-card-soft);
  overflow: hidden;
}
/* §A 헤드라인 셀: 카드 배경 없음 (페이지 배경 그대로) */
.c-mosaic__cell--a {
  background: transparent;
  padding: 30px;
}

.c-mosaic__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.71875rem;
  font-weight: 700;
  color: #2D6BFF;
  letter-spacing: 2.07px;
  margin: 0 0 16px;
}
.c-mosaic__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2D6BFF;
  box-shadow: 0 0 0 4px rgba(45, 107, 255, 0.15);
}
.c-mosaic__heading {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;
  font-size: var(--text-display);  /* 40px */
  line-height: 1.14;
  letter-spacing: -1px;
  color: var(--color-text-strong);
  margin: 0 0 16px;
}
.c-mosaic__body {
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
.c-mosaic__gradient-text {
  background: var(--gradient-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-mosaic__gradient-text--green {
  background: var(--gradient-choice-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 카드 내부 헤딩/본문 */
.c-mosaic-card__heading {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;
  font-size: 1.125rem;  /* 18px - B/C/H */
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: var(--color-text-strong);
  margin: 0 0 16px;
}
.c-mosaic__cell--e .c-mosaic-card__heading,
.c-mosaic__cell--d .c-mosaic-card__heading {
  font-size: 1.625rem;  /* 26px */
  line-height: 1.2;
  letter-spacing: -0.52px;
}
.c-mosaic__cell--d .c-mosaic-card__heading {
  font-size: 2rem;  /* 32px */
  letter-spacing: -0.64px;
}
.c-mosaic__cell--h .c-mosaic-card__heading {
  font-size: 1.375rem;
  letter-spacing: -0.44px;
}
.c-mosaic-card__body {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* §D 그라디언트 카드 */
.c-mosaic-card--accent {
  background: var(--gradient-mosaic-d);
  color: var(--color-white);
}
.c-mosaic-card--accent .c-mosaic-card__heading { color: var(--color-white); }
.c-mosaic-card--accent .c-mosaic-card__body { color: rgba(255, 255, 255, 0.86); }
.c-mosaic-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-pill);
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.46px;
  margin-bottom: 16px;
  /* §D 셀이 flex column 이라 align-items: stretch 기본값으로 chip이 가로로 늘어나는 문제 해결.
     본인 콘텐츠 폭만 차지하도록 align-self + width 명시 */
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
.c-mosaic-card__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #FFE066;
  color: #1A47B8;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
}

/* §F/G/I 통계 셀 */
.c-mosaic-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}
.c-mosaic-stat__number {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  font-weight: 800;
  font-size: var(--text-stat);  /* 36px */
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin: 0 0 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.c-mosaic-stat__number--blue { color: #2D6BFF; }
.c-mosaic-stat__number--dark { color: var(--color-text-strong); }
.c-mosaic-stat__number--purple { color: var(--color-stat-purple); font-size: 2.5rem; }
.c-mosaic-stat__plus { font-size: 1.375rem; color: inherit; }
.c-mosaic-stat__slash {
  font-weight: 600;
  color: #9AA1AC;
}
.c-mosaic-stat__caption {
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* 모자이크 임시 비주얼 영역 */
.ph--mosaic-visual {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 140px;
  height: 140px;
}

/* § 2.4 카드 시각 이미지 — 카드별 위치/크기 (Figma 2031:1054) */

/* 텍스트/chip/화살표가 이미지 위로 오도록 z-index 정리 */
.c-mosaic-card__heading,
.c-mosaic-card__body,
.c-mosaic-card__chip {
  position: relative;
  z-index: 1;
}
.c-mosaic-card__more { z-index: 2; }

/* 이미지 공통 베이스 — z-index: 0 으로 글자 아래
   §B/§D 는 div wrapper 형태 (시안에서 원본 이미지를 크게 두고 부분만 노출하는 마스킹 구조)
   §C/§E 는 img 단일 형태 (원본 그대로 노출) — 둘 다 같은 클래스명으로 통합 */
.c-mosaic-card__visual {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  overflow: hidden;
}
/* §B/§D wrapper 내부 img — 원본 크기 유지하면서 음수 위치로 우측 부분만 노출 */
.c-mosaic-card__visual-img {
  position: absolute;
  max-width: none;
  display: block;
}

/* §B·§C — 시안: 이미지가 카드 위쪽, 글자는 아래쪽 → flex-end 정렬 + 화살표 자리 확보 */
.c-mosaic__cell--b,
.c-mosaic__cell--c {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 64px;
}

/* §D·§E — 시안: 콘텐츠 vertical center 정렬 */
.c-mosaic__cell--d,
.c-mosaic__cell--e {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* §B 카카오톡 알림톡 (시안 398×240) — 컨테이너 117×169 (29.4%) 안에 원본 이미지를
   216.24% × 133.77% 로 크게 두고 좌측 -52.56%, 상단 -20.06% 음수 배치하여 우측 부분만 노출 */
.c-mosaic__cell--b .c-mosaic-card__visual {
  right: 3%;
  top: 5px;
  width: 29%;
  height: auto;
  aspect-ratio: 117 / 169;
}
.c-mosaic__cell--b .c-mosaic-card__visual-img {
  width: 216.24%;
  height: 133.77%;
  left: -52.56%;
  top: -20.06%;
}
.c-mosaic__cell--b .c-mosaic-card__heading,
.c-mosaic__cell--b .c-mosaic-card__body {
  max-width: 60%;
}

/* §C 1만여 개 상품 (시안 294×240, 이미지 153×153 우측 위 작은 일러스트) */
.c-mosaic__cell--c .c-mosaic-card__visual {
  right: -8px;
  top: -8px;
  width: 130px;
  height: 130px;
}
.c-mosaic__cell--c .c-mosaic-card__heading,
.c-mosaic__cell--c .c-mosaic-card__body {
  max-width: 60%;
}

/* §D 30분 응대 (시안 502×240, 그라디언트) — 컨테이너 119×178 (23.7%) 안에 원본 이미지를
   224.37% × 100% 로 두고 좌측 -59.24% 음수 배치하여 우측 부분만 노출 */
.c-mosaic__cell--d .c-mosaic-card__visual {
  right: 6.5%;
  bottom: 0;
  top: auto;
  transform: none;
  width: 24%;
  height: auto;
  aspect-ratio: 119 / 178;
}
.c-mosaic__cell--d .c-mosaic-card__visual-img {
  width: 224.37%;
  height: 100%;
  left: -59.24%;
  top: 0.08%;
}
.c-mosaic__cell--d .c-mosaic-card__heading,
.c-mosaic__cell--d .c-mosaic-card__body,
.c-mosaic__cell--d .c-mosaic-card__chip {
  max-width: 70%;
}

/* §E 최대 1,000건 (시안 711×240, 큰 카드, 이미지 276×276 우측 정사각형) */
.c-mosaic__cell--e .c-mosaic-card__visual {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
  height: 250px;
}
.c-mosaic__cell--e .c-mosaic-card__heading,
.c-mosaic__cell--e .c-mosaic-card__body {
  max-width: 65%;
}

/* §H [B]Choice — 4종 카드 우측에 있으므로 글자 max-width 제한 */
.c-mosaic__cell--h {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 280px;       /* 우측 4 카드 자리 확보 */
}
.c-mosaic__cell--h .c-mosaic-card__heading,
.c-mosaic__cell--h .c-mosaic-card__body {
  max-width: 100%;
}

/* § 2.4 카드 우측 하단 화살표 원형 버튼 (Figma 2031:1069·1076·1121) */
.c-mosaic-card__more {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #E8EFFF;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.c-mosaic-card__more:hover { background: #D5E0FF; transform: translateY(-1px); }
.c-mosaic-card__more img { width: 14px; height: 14px; display: block; }

/* § 2.4 §H [B]Choice 4종 카테고리 그라디언트 카드 (Figma 2031:1099)
   ⚠ 헤더 GNB 의 [B] Choice 프리뷰가 .c-bchoice-card 를 사용하므로
      모자이크 §H 4종 카드는 충돌 방지 위해 .c-bchoice-tile 로 별도 네임스페이스 */
.c-mosaic-bchoice {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 130px;
  pointer-events: none;
}
.c-bchoice-tile {
  position: absolute;
  width: 70px;
  height: 100px;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0 14px 22px -14px rgba(16,24,40,0.25), 0 0 0 1px #E7E9EE;
  overflow: hidden;
}
.c-bchoice-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 31px 0;
}
.c-bchoice-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  color: #2A2F3A;
  line-height: 1;
}
.c-bchoice-tile--chicken  { left: 0;    top: 10px; transform: rotate(-8deg); }
.c-bchoice-tile--chicken::before  { background: linear-gradient(160deg, #FFE0B0 0%, #FFB07A 100%); }
.c-bchoice-tile--bakery   { left: 56px;  top: 0;    transform: rotate(-2deg); }
.c-bchoice-tile--bakery::before   { background: linear-gradient(160deg, #FFD3DC 0%, #FF7AA2 100%); }
.c-bchoice-tile--coffee   { left: 112px; top: 5px;  transform: rotate(4deg);  z-index: 2; }
.c-bchoice-tile--coffee::before   { background: linear-gradient(160deg, #C5D2FF 0%, #5C8BFF 100%); }
.c-bchoice-tile--voucher  { left: 168px; top: 12px; transform: rotate(10deg); }
.c-bchoice-tile--voucher::before  { background: linear-gradient(160deg, #CFE9C8 0%, #22C55E 100%); }
.c-bchoice-tile__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #2D6BFF;
  box-shadow: 0 6px 10px -4px rgba(45,107,255,0.5);
  color: #FFF;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Responsive 모자이크 */
@media (max-width: 1279px) {
  .c-mosaic { grid-template-columns: repeat(2, 1fr); }
  .c-mosaic__cell--a,
  .c-mosaic__cell--b,
  .c-mosaic__cell--c,
  .c-mosaic__cell--d,
  .c-mosaic__cell--e,
  .c-mosaic__cell--f,
  .c-mosaic__cell--g,
  .c-mosaic__cell--h,
  .c-mosaic__cell--i {
    grid-column: span 1;
    grid-row: auto;
  }
  .c-mosaic__heading { font-size: 2rem; }
  /* §H 태블릿에서는 우측 카드 자리 padding 해제 (1열로 좁아짐) */
  .c-mosaic__cell--h { padding-right: 30px; }
}
@media (max-width: 767px) {
  .c-mosaic { grid-template-columns: 1fr; }
  .c-mosaic__heading { font-size: clamp(1.5rem, 7vw, 2rem); }
  .ph--mosaic-visual { position: relative; right: auto; bottom: auto; margin-top: 16px; width: 100%; height: 140px; }
  /* § 2.4 모바일에서는 이미지를 카드 하단에 자연스럽게 배치 + 텍스트 풀폭
     §B/§D 의 마스킹(wrapper + 음수 위치) 도 풀어서 전체 이미지 노출 */
  .c-mosaic-card__visual {
    position: relative;
    right: auto; top: auto; bottom: auto;
    transform: none;
    width: 60%;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
    margin: 12px auto 0;
    display: block;
  }
  .c-mosaic-card__visual-img {
    position: static;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
  }
  .c-mosaic__cell--b,
  .c-mosaic__cell--c {
    padding-bottom: 30px;     /* 모바일은 화살표 자리 별도로 확보 */
  }
  .c-mosaic__cell--b .c-mosaic-card__heading,
  .c-mosaic__cell--b .c-mosaic-card__body,
  .c-mosaic__cell--c .c-mosaic-card__heading,
  .c-mosaic__cell--c .c-mosaic-card__body,
  .c-mosaic__cell--d .c-mosaic-card__heading,
  .c-mosaic__cell--d .c-mosaic-card__body,
  .c-mosaic__cell--d .c-mosaic-card__chip,
  .c-mosaic__cell--e .c-mosaic-card__heading,
  .c-mosaic__cell--e .c-mosaic-card__body {
    max-width: 100%;
  }
  .c-mosaic-bchoice { position: relative; right: auto; top: auto; transform: none; margin: 16px auto 0; }
}

/* ============================================
   § 5. sec-trust
   ============================================ */
.s-trust__title {
  font-size: var(--text-heading-1);
  font-weight: 800;
  text-align: center;
  margin: 0 0 60px;          /* sec-trust container 내부 sub-element 간격 통일 40 */
  color: var(--color-text-strong);
}

/* 통계 3분할 */
.c-trust-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 60px;           /* 64 → 40 */
  gap: 0;
}
.c-trust-stats__cell {
  flex: 1 1 0;
  text-align: center;
  padding: 0 24px;
  position: relative;
}
.c-trust-stats__cell + .c-trust-stats__cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: var(--color-mono-6);
}
/* sec-trust 통계: Figma 시안 — 큰 숫자·보조 카피 모두 --point-blue-1 (#4B75F2) */
.c-trust-stats__number {
  font-family: Inter, Pretendard, "Noto Sans KR", sans-serif;
  font-size: 2.25rem;    /* 36px */
  font-weight: 700;
  color: var(--point-blue-1);
  line-height: 1.1;
  margin: 0 0 4px;
}
.c-trust-stats__caption {
  font-family: Inter, Pretendard, "Noto Sans KR", sans-serif;
  font-size: 1.375rem;   /* 22px */
  font-weight: 400;
  color: var(--point-blue-1);
  margin: 0;
}

/* ============================================
   케이스 카드 배너 (c-case-banner) — Figma 2216:38
   - 카드 588×343, radius 22, 그라디언트 배경 3종 (운영 확정)
   - PC 2장 동시 노출, 3장 무한 루프 (Swiper loop:true + autoplay)
   - main.js 의 initCaseBanner 가 Swiper init
   ============================================ */
.c-case-banner {
  margin: 0 0 60px;
  overflow: hidden;             /* Swiper viewport 역할 */
  /* swiper-bundle.css 의 .swiper-wrapper { height: 100% } 가 부모 height 를 참조하므로
     .swiper 컨테이너(.c-case-banner) 에 명시 height 가 없으면 wrapper 가 0 으로 collapse → 카드가
     박스 밖으로 잘려 시각상 사라짐. 카드 height 343 과 동일하게 명시. */
  height: 343px;
}
/* cascade 차단: 다른 CSS의 ul::after / .brand_list::after 등이 끼어들지 않도록 */
.c-case-banner::after,
.c-case-banner::before {
  content: none !important;
  display: none !important;
}
.c-case-banner__track {
  display: flex;
  /* Swiper-wrapper 로 동작 — gap 은 Swiper spaceBetween 옵션이 처리 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Case Card ---- */
.c-case-card {
  position: relative;
  flex-shrink: 0;
  width: 588px;
  height: 343px;
  border-radius: 22px;
  overflow: hidden;
  list-style: none;
  /* 배경은 c-case-card--01/02/03 변종이 부여 */
}

/* 카드 1 — 에스원 (오렌지/노랑) */
.c-case-card--01 {
  background-image: linear-gradient(
    120.57deg,
    rgb(230, 81, 0)    8.91%,
    rgb(242, 153, 74)  27.46%,
    rgb(242, 201, 76)  46.02%,
    rgb(255, 237, 188) 64.58%,
    rgb(255, 255, 255) 83.13%
  );
}
/* 카드 2 — 하이브 (핑크/보라/민트) */
.c-case-card--02 {
  background-image: linear-gradient(
    120.57deg,
    rgb(216, 27, 96)   8.91%,
    rgb(142, 36, 170)  27.46%,
    rgb(255, 122, 138) 46.02%,
    rgb(255, 193, 204) 64.58%,
    rgb(224, 247, 250) 83.13%
  );
}
/* 카드 3 — 안랩 (보라/핑크) */
.c-case-card--03 {
  background-image: linear-gradient(
    120.57deg,
    rgb(74, 20, 140)   8.91%,
    rgb(126, 87, 194)  27.46%,
    rgb(183, 164, 245) 46.02%,
    rgb(240, 98, 146)  64.58%,
    rgb(225, 190, 231) 83.13%
  );
}

.c-case-card__brand {
  position: absolute;
  top: 64px;
  left: 63px;
  margin: 0;
  color: #fff;
  font-size: 1.125rem;          /* 18px */
  font-weight: 500;
  line-height: 1;
}
.c-case-card__headline {
  position: absolute;
  top: 96px;
  left: 63px;
  margin: 0;
  width: 282px;
  color: #fff;
  font-size: 2rem;              /* 32px */
  font-weight: 700;
  line-height: 1.2;
}
.c-case-card__summary {
  position: absolute;
  left: 63px;
  bottom: 64px;
  margin: 0;
  width: 242px;
  color: #fff;
  font-size: 1rem;              /* 16px */
  font-weight: 400;
  line-height: 1.45;
}
.c-case-card__image {
  position: absolute;
  top: 55px;
  right: 33px;
  width: 230px;
  height: 230px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* 로고 슬라이더 */
.c-logo-slider {
  overflow: hidden;
  position: relative;
}
.c-logo-slider__track {
  display: flex;
  gap: 40px;
  width: max-content;
  /* will-change 로 별도 GPU 레이어 분리 — 일부 환경에서 부모 cascade 영향으로 transform 이 무효화되는 경우 방어 */
  will-change: transform;
  /* duration 은 인라인 style 의 --slide-duration 으로 아이템 수에 비례하게 주입 (40개 기준 30s = 1개당 0.75s) */
  animation: logoSlide var(--slide-duration, 30s) linear infinite;
  animation-play-state: running;
}
.c-logo-slider:hover .c-logo-slider__track { animation-play-state: paused; }
.c-logo-slider__item {
  flex: 0 0 136px;
  height: 44.68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-logo-slider__img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: none;
}
.ph--logo {
  width: 100%;
  height: 100%;
}
@keyframes logoSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .c-logo-slider__track { animation: none; }
}

@media (max-width: 1279px) {
  /* 768~1279: 카드 비율 축소 (responsive.md §5-5 케이스 배너 룰)
     Swiper 가 slidesPerView/spaceBetween 으로 폭 조정하므로 카드 자체에는 max-width 만 부여 */
  .c-case-card { width: 100%; max-width: 588px; }
  .c-case-card__headline { font-size: 1.625rem; }
  .c-case-card__brand    { top: 56px; left: 48px; }
  .c-case-card__headline { top: 84px; left: 48px; }
  .c-case-card__summary  { left: 48px; bottom: 56px; }
  .c-case-card__image    { right: 24px; width: 200px; height: 200px; top: 60px; }
}
@media (max-width: 767px) {
  .c-trust-stats { flex-direction: column; gap: 24px; }
  .c-trust-stats__cell + .c-trust-stats__cell::before { display: none; }
  .c-trust-stats__cell + .c-trust-stats__cell { border-top: 1px solid var(--color-mono-6); padding-top: 24px; }
  /* 모바일: 한 화면 1.05 ~ 1.1장 노출 (다음 카드 살짝 보임). 높이는 시각 비례 280 */
  .c-case-banner { height: 280px; }
  .c-case-card { height: 280px; }
  .c-case-card__brand    { top: 32px; left: 28px; font-size: 1rem; }
  .c-case-card__headline { top: 56px; left: 28px; font-size: 1.375rem; width: auto; right: 28px; }
  .c-case-card__summary  { left: 28px; bottom: 32px; width: auto; right: 28px; font-size: 0.875rem; }
  .c-case-card__image    { right: 16px; bottom: 16px; width: 140px; height: 140px; top: auto; }
  .c-logo-slider__item { flex-basis: 100px; height: 36px; }
  .c-logo-slider__track { gap: 24px; }
}

/* ============================================
   § 6. CTA
   ============================================ */
.c-cta-box {
  max-width: 1232px;
  height: 267px;
  margin: 0 auto;
  background: var(--point-blue-1);
  border-radius: var(--radius-card-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;              /* 64 → 40 (container 내부 간격 통일) */
  color: var(--color-white);
  text-align: center;
}
.c-cta-box__heading {
  font-size: var(--text-heading-2);
  font-weight: 800;
  letter-spacing: -0.6px;
  margin: 0 0 16px;
  color: var(--color-white);
}
.c-cta-box__sub {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
}
.c-cta-box__ctas {
  display: flex;
  gap: 12px;
}
/* § 6 CTA 박스 버튼 공통 폰트 (Figma 1990:621/623)
   - Pretendard Bold 14.5px / line-height 약 1.17 */
.c-btn--cta-primary,
.c-btn--cta-secondary {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700;            /* Bold */
  font-size: 14.5px;
  line-height: 1.17;
  letter-spacing: 0;
}
.c-btn--cta-primary {
  --btn-bg: var(--color-white);
  --btn-text: var(--point-blue-1);
}
.c-btn--cta-secondary {
  --btn-bg: rgba(255, 255, 255, 0.16);
  --btn-text: var(--color-white);
  backdrop-filter: blur(4px);
}

@media (max-width: 1279px) {
  .c-cta-box { padding: 48px 40px; height: auto; }
  .c-cta-box__heading { font-size: 1.75rem; }
}
@media (max-width: 767px) {
  .c-cta-box { padding: 40px 24px; border-radius: 18px; }
  .c-cta-box__heading { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .c-cta-box__ctas { flex-direction: column; width: 100%; gap: 8px; }
  .c-cta-box__ctas .c-btn { width: 100%; }
}