/* ============================================
   Main page sections
   메인 페이지 섹션 스타일
   ============================================ */

.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) ----
   시안: 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: 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 공통 폰트
   - 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 — 사양 그대로
   비활성: 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 카드 시각 이미지 — 카드별 위치/크기 */

/* 텍스트/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 카드 우측 하단 화살표 원형 버튼 */
.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종 카테고리 그라디언트 카드
   ⚠ 헤더 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 통계: 큰 숫자·보조 카피 모두 --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)
   - 카드 588×343, radius 22, 그라디언트 배경 3종 (운영 확정)
   - PC 2장 동시 노출, 3장 무한 루프 (Swiper loop:true + autoplay)
   - main.js 의 initCaseBanner 가 Swiper init
   - 카드 = "좌측 그라디언트 + 우측 실사 사진" 한 장의 합성처럼 보여야 한다(시안).
     사진은 누끼가 아니라 알파 없는 직사각 사진이고, 색보정(그라디언트 톤)이 이미 구워져 있다.
     사진 좌측 약 10% 에도 그라디언트로 녹아드는 페이드가 구워져 있어 배경과 이음새가 생기지 않는다.
     → CSS 가 할 일은 (1) 시안과 같은 배경 그라디언트, (2) 사진을 우측 flush + 전체 높이로 배치.
     자세한 실측 근거는 .c-case-card--01 과 .c-case-card__image 주석 참고.
   ============================================ */
.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 변종이 부여 */
}

/* 그라디언트 3종 — 기획 시안(1638×960) 에서 직접 역산한 값이다.
   시안에 적혀 있던 스펙(120.57deg / #E65100 8.91% … 형태)을 그대로 쓰면 시안과 다르게 렌더된다.
   그 각도·stop 은 Figma 프레임 기준값이라 588×343 카드에서는 색이 다른 자리에 떨어진다
   (예: 하이브 시안 좌하단은 cyan 인데 120.57deg 로는 pink 가 나온다).
   → 시안에서 사진에 가려지지 않은 좌측 영역만 뽑아 (텍스트 픽셀 제외) 각도를 전수 탐색하고
     t 축으로 binning + median 하여 stop 을 복원했다. 각도는 카드마다 다르다.
     복원 오차(평균, 0~255): 01 = 1.6 / 02 = 7.2 / 03 = 3.5.
   마지막 stop 이 flat 인 것은 의도다: 그 구간(t > 약 0.62~0.68)은 항상 사진에 덮여 보이지 않으므로
   외삽하지 않고 마지막 실측색을 유지해 이상한 색이 새어나오지 않게 한다. */
/* 카드 1 — 에스원 (오렌지) */
.c-case-card--01 {
  background-image: linear-gradient(
    112deg,
    #E14C02 0%,
    #E34E02 14.8%,
    #E75F06 27.1%,
    #E9700D 35.1%,
    #EC8A18 44.1%,
    #ED9C22 54.1%,
    #EDA93B 61.2%,
    #EDA93B 100%
  );
}
/* 카드 2 — 하이브 (마젠타 → 보라 → 시안) */
.c-case-card--02 {
  background-image: linear-gradient(
    131.75deg,
    #D30E5F 0%,
    #D20E5C 6.8%,
    #D21261 15.3%,
    #D3196A 21.6%,
    #D32878 27.8%,
    #CE3B89 31.8%,
    #CA4E95 34.3%,
    #C7559C 36.6%,
    #C465A4 38.8%,
    #BC77B4 43.6%,
    #BD94C9 47.4%,
    #B8AAD5 50.1%,
    #B4BDDF 53.6%,
    #B6D3ED 57.9%,
    #C8E0ED 67.9%,
    #C5DAE9 68.4%,
    #C5DAE9 100%
  );
}
/* 카드 3 — 안랩 (딥퍼플 → 라이트퍼플) */
.c-case-card--03 {
  background-image: linear-gradient(
    133.75deg,
    #4C0983 0%,
    #4E0C85 18%,
    #5E1C92 28.3%,
    #6D2F9C 33.8%,
    #874BAD 40.6%,
    #C592D6 54.1%,
    #D0A1DD 57.1%,
    #D4A6E0 59.4%,
    #C99BD7 64.7%,
    #C49AD2 64.9%,
    #C59BD2 65.4%,
    #BB92CA 66.4%,
    #B487C8 66.7%,
    #B486C8 67.7%,
    #AE81C2 68.4%,
    #AE81C2 100%
  );
}

.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;
}
/* 실사 사진 — 카드 우측에 전체 높이로 flush 배치.
   배치 근거(추정 아님): 시안과 사진 파일을 edge map NCC 로 정합한 결과
     하이브 NCC 0.9955 / 안랩 0.9089, 둘 다 "높이를 카드에 맞추고 우측 끝에 붙임" 으로 수렴했다.
     시안에서 사진 영역을 이 규칙대로 재구성했을 때 픽셀 오차가 하이브 0.00 / 안랩 0.14 이라,
     시안의 사진 영역 = 이 파일 그대로이고 위에 덮인 오버레이가 없음이 확인된다(측정 알파 0.000).
     (에스원만 시안이 다른 컷이라 정합되지 않는다. 같은 규칙을 적용한다.)
   - height:100% + width:auto → 원본 비율대로 폭 결정 (01·02 = 0.809, 03 = 0.791).
     588×343 카드에서 폭 277 / 277 / 272 → 사진 좌측 경계가 카드 x 311 / 311 / 317.
     시안 실측 경계 309 / 309 / 316 과 1~2px 차이로 일치한다. 폭을 하드코딩할 필요가 없다.
   - 카드 밖으로 넘치지 않는다(right:0, 넘침 0). 이전 누끼 방식의 bleed 는 시안에 없다.
   - 이음새: 시안 접합부의 |dC/dx| 는 0.68~1.29 로 배경 평균(1.89~2.32)보다도 낮다 = 이음새 없음.
     사진 좌측에 그라디언트로 녹아드는 페이드가 이미 구워져 있기 때문이다.
     mask 는 그 위에 보험을 한 겹 더 얹는 것이다 — 복원한 배경 그라디언트의 잔차(최대 평균 7)가
     경계에서 단차로 보이지 않도록 완만하게 섞고, 동시에 좌측 텍스트가 사진의 선명한 부분과
     겹치지 않게 한다. 이미 페이드된 구간을 다시 페이드하는 것이라 그림이 흐려지지는 않는다.
   - mask 16% 근거: 사진 폭 277 의 16% = 44px → 카드 x 311~355 구간에서 서서히 나타난다.
     headline 박스 우측 끝이 63 + 282 = 345 라 텍스트가 놓이는 자리는 전부 페이드 구간 안이다. */
.c-case-card__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center right;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%);
          mask-image: linear-gradient(to right, transparent 0%, #000 16%);
}

/* 로고 슬라이더 */
.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: 카드 비율 축소 (케이스 배너 반응형 룰)
     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; }
}
/* 768~960vw (카드 448~576) — 배치 규칙(우측 flush + 전체 높이)은 PC 와 같다. 사진 폭은 비율로
   정해지므로 카드가 좁아져도 277px 로 고정이고, 그만큼 사진 좌측 경계가 왼쪽으로 밀려
   (448 카드에서 x 171) 텍스트와 겹치는 구간이 생긴다.
   페이드 구간만 넓히는 방식은 실패한다. "텍스트 잉크가 완전 불투명 지점보다 왼쪽" 은 잘못된 기준으로,
   768vw 에서 mask 46% 로도 잉크 우측 끝의 사진 불투명도가 88% 라 흰 글씨가 밝은 피사체(도시락·책상)
   위에 얹혀 읽히지 않았다. 기준은 "잉크 위치의 불투명도가 0 에 가까울 것" 이어야 한다.
   그러려면 페이드가 사진 폭의 100% 를 넘어야 해서 mask 로는 해결이 불가능하다 → 사진을 실제로 줄인다.
   - max-width 35% 근거: 잉크 최대 284(768vw 카드 448) + 여유 8 → 사진 좌측 경계가 292 이상이어야
     하므로 폭 ≤ 156 = 카드의 34.8%. 960vw(카드 576)에서는 폭 202, 좌측 경계 374 로 더 여유롭다.
   - object-position: center 근거: 폭이 줄면 cover 가 좌우를 잘라내는데, right 로 두면 에스원 남성의
     얼굴이 세로로 반 잘린다. center 는 원본 가로 22~78% 구간을 남기고, 3장의 얼굴이 각각
     36~69%(01) / 35~63%(02) / 31~67%(03) 라 어느 카드도 얼굴이 잘리지 않는다.
   - cover 로 좌측을 잘라내면 파일에 구워진 페이드도 함께 잘려나가므로, 이 구간의 이음새는
     아래 mask 18% 가 전담한다 (768vw 기준 28px). 사진 톤이 이미 그라디언트에 맞춰져 있어 충분하다. */
@media (max-width: 960px) {
  .c-case-card__image {
    max-width: 35%;
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%);
            mask-image: linear-gradient(to right, transparent 0%, #000 18%);
  }
}
@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; }
  /* 모바일은 카드(약 343×280)가 좁다. 텍스트 박스를 고정폭(242)으로 두면 사진 위로 깊이 들어가므로
     right 40% 로 좌측 60% 컬럼에 가둔다 → 잉크 우측 끝 약 205.
     사진 폭은 위 max-width 35% 가 그대로 적용돼 120 이고 좌측 경계가 223 이라 여유 18 로 통과한다.
     (모바일 전용 사진 룰이 따로 없는 이유다 — 35% 가 343 카드에서도 성립한다.) */
  .c-case-card__headline { top: 56px; left: 28px; font-size: 1.375rem; width: auto; right: 40%; }
  .c-case-card__summary  { left: 28px; bottom: 32px; width: auto; right: 40%; font-size: 0.875rem; }
  .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 박스 버튼 공통 폰트
   - 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%; }
}

/* ============================================
   메인 팝업 (비로그인 메인 한정 — new/index.html)
   - 구 index.html(/css/main.css)의 #main_popup 을 신규 메인으로 이관.
   - 신규 페이지는 /css/main.css 를 로드하지 않아 레거시 .popup_wrap(전체화면
     fixed/백드롭)에 의존할 수 없으므로, #main_popup 자체에 오버레이 사양을
     자기완결로 정의한다. (popup.css 의 alert/modal 규칙과도 분리)
   ============================================ */
#main_popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 2000);   /* sticky 헤더(--z-sticky-header:1000) 위 */
  background-color: rgba(0, 0, 0, 0.7);
}
#main_popup > div {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#main_popup > div img { max-width: 80vw; border-radius: 30px; }
.main_popup_img_pc { display: block; }
.main_popup_img_mobile { display: none; }
#main_popup > div .main_popup_button_wrap {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: -3em;
  right: 0;
}
#main_popup > div .main_popup_button_wrap > button {
  padding: 0.5em;
  margin-bottom: 1.5em;
  margin-left: 1em;
  color: #fff;
  text-align: left;
  font-size: 1.1rem;
  background: none;
  border: 0;
  cursor: pointer;
}

/* 이미지만 있는 경우 */
#main_popup > div:not(.popup_half_video):not(.popup_inner_video) {
  width: 80vw;
  max-height: 80vh;
  justify-content: center;
}
#main_popup > div:not(.popup_half_video):not(.popup_inner_video) .main_popup_img_pc {
  margin: 0 auto;
  height: 100%;
}

/* 동영상 반쪽짜리 (이미지 좌 50% + 영상 우 50%) */
#main_popup > .popup_half_video { min-width: 80vw; }
#main_popup > div.popup_half_video img { width: 100%; border-radius: 20px 0 0 20px; }
#main_popup > .popup_half_video video { width: 50%; object-fit: cover; border-radius: 0 20px 20px 0; }

/* 동영상 이미지 안에 있는 경우 */
#main_popup > .popup_inner_video { max-width: min(35vw, 900px); position: relative; }
#main_popup > div.popup_inner_video img { width: 100%; border-radius: 20px; }
#main_popup > .popup_inner_video video { object-fit: cover; position: absolute; }

@media screen and (max-width: 768px) {
  .main_popup_img_pc { display: none; }
  .main_popup_img_mobile { display: block; }

  #main_popup > .popup_half_video,
  #main_popup > .popup_inner_video { min-width: 65vw; flex-direction: column; }
  #main_popup > div.popup_half_video img { width: 100%; border-radius: 20px 20px 0 0; }
  #main_popup > .popup_half_video video { width: 100%; border-radius: 0 0 20px 20px; }

  #main_popup > div.popup_inner_video img { border-radius: 20px 20px 0 0; }
  #main_popup > .popup_inner_video video {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 0 20px 20px;
    position: static;
    top: unset !important;
    left: unset !important;
  }
}

@media screen and (max-width: 630px) {
  #main_popup > .popup_half_video,
  #main_popup > .popup_inner_video { min-width: 80vw; }
}