/* ============================================================
   sellkit 브랜드 홈 공통 스타일
   토큰은 할인킷/업셀킷 상세페이지와 동일 체계를 사용합니다.
   ============================================================ */
:root {
  --brand: #0055fb;
  --brand-dark: #0040C0;
  --brand-deep: #002B80;
  --brand-light: #D0E2FA;
  --brand-mid: #5C9BF5;
  --brand-rgb: 0, 85, 251;
  --dark: #0F0A1E;
  --body: #3D3558;
  --muted: #8B86A0;
  --border: #D8E4F5;
  --bg: #FFFFFF;
  --bg-subtle: #F5F8FF;
  --success: #10B981;
  --warn: #F59E0B;
  --danger: #EF4444;
  --radius: 14px;
  --radius-lg: 24px;
  --header-h: 68px;
  --mono: 'Noto Sans KR', sans-serif; /* 킷 랜딩 톤앤매너 통일 — 모노 폰트 미사용 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* 화면에선 안 보이고 스크린리더만 읽는 텍스트 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* 킷 랜딩과 동일: 콘텐츠 순수 폭 1100px + 좌우 여백 40px (= 총 1180px) */
.container { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

/* ---------- 버튼 ---------- */
/* 버튼 톤앤매너 — 킷 랜딩과 동일한 라운드 사각형(12px) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; border-radius: 12px; border: 0;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  font-size: 16px; padding: 17px 36px;
}
.btn-sm { font-size: 14px; padding: 10px 20px; border-radius: 10px; }
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), .28);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn-primary:hover { background: var(--brand); filter: brightness(1.08) saturate(1.05); box-shadow: 0 12px 28px rgba(var(--brand-rgb), .42); }
}
.btn-ghost {
  background: #fff; color: var(--brand);
  box-shadow: inset 0 0 0 2px var(--brand-light);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--brand); }
.btn-white { background: #fff; color: var(--brand); box-shadow: 0 8px 22px rgba(0, 20, 60, .25); }
.btn-outline-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.btn-outline-white:hover { box-shadow: inset 0 0 0 2px #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- 섹션 공통 (킷 랜딩과 동일 규칙) ---------- */
section { padding: 96px 0; }
.section-eyebrow {
  display: inline-block; color: var(--brand);
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 16px;
}
.section-title {
  font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; color: var(--dark);
  line-height: 1.25; letter-spacing: -1px; margin-bottom: 16px;
}
.section-title em { font-style: normal; color: var(--brand); }
/* 강제 줄바꿈 대신 브라우저가 줄을 고르게 나눈다 — br 로 끊으면 넓은 화면에서
   둘째 줄이 첫 줄의 37%밖에 안 돼 아래가 뭉텅 잘린 것처럼 보인다 */
.section-title.is-balance { text-wrap: balance; }
/* 양쪽 정렬(justify)은 쓰지 않는다 — 한국어는 어절이 길어 마지막 줄 맞추려고
   공백이 늘어나면서 단어 사이가 들쭉날쭉해 보인다 */
.section-sub {
  font-size: 18px; color: var(--body); max-width: 560px;
  line-height: 1.7;
}
/* KIT LINEUP 서브: PC·태블릿에서 딱 2줄 (첫 줄이 접히지 않게 폭 확대) */
.kit-sub { max-width: 44em; text-align: left; }
/* 타이틀·서브 좌측정렬, 콘텐츠는 컨테이너 양측을 채움 */
.section-head { text-align: left; margin: 0 0 56px; }

/* 스크롤 등장 */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   헤더
   ============================================================ */
.sk-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.sk-header.scrolled { border-color: var(--border); box-shadow: 0 4px 24px rgba(15, 10, 30, .06); }
.sk-header-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 40px;
  height: var(--header-h); display: flex; align-items: center; gap: 36px;
}
.sk-logo {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 22px; font-weight: 900; color: var(--dark); letter-spacing: -0.04em;
  line-height: 1;
}
/* 로고 원본에 여백이 있어 살짝 크게 렌더링 */
.sk-brand { display: inline-flex; align-items: center; gap: 10px; }
.sk-logo img { height: 54px; width: auto; object-fit: contain; margin: -6px 0; }
.sk-logo span { color: var(--brand); }

.sk-nav { display: flex; align-items: center; gap: 6px; flex: 1; margin-left: -16px; }
.sk-nav-item { position: relative; }
.sk-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px; border: 0; background: none;
  font-size: 15.5px; font-weight: 700; color: var(--body);
  transition: color .15s, background .15s;
}
.sk-nav-link:hover { color: var(--brand); background: var(--bg-subtle); }
.sk-nav-link.active, .sk-nav-item.active > .sk-nav-link { color: var(--brand); }
.sk-ext { font-size: 12px; opacity: .7; }
.sk-caret { transition: transform .2s; }
.sk-has-drop:hover .sk-caret, .sk-has-drop.drop-open .sk-caret { transform: rotate(180deg); }

/* Kit 드롭다운 */
.sk-drop {
  position: fixed; top: var(--header-h); left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: 0 22px 40px rgba(15, 10, 30, .07);
  padding: 18px max(40px, calc((100% - 1100px) / 2)); display: flex; justify-content: space-between; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sk-has-drop:hover .sk-drop, .sk-has-drop.drop-open .sk-drop {
  opacity: 1; visibility: visible; transform: none;
}
.sk-drop-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  text-align: left; padding: 14px 16px;
  border-radius: 12px; border: 0; background: none;
  transition: background .18s, opacity .18s, transform .18s;
}
.sk-drop-item .sk-kit-txt strong,
.sk-drop-item .sk-kit-txt small { white-space: nowrap; transition: color .18s; }
/* 호버한 킷만 강조, 나머지는 살짝 흐리게 */
.sk-drop:hover .sk-drop-item { opacity: .45; }
.sk-drop:hover .sk-drop-item:hover { opacity: 1; }
.sk-drop-item:hover { background: var(--bg-subtle); transform: translateY(-2px); }
.sk-drop-item:hover .sk-kit-txt strong { color: var(--brand); }
.sk-drop-item:hover .sk-kit-txt small { color: var(--body); }
.sk-kit-txt { display: flex; flex-direction: column; gap: 4px; line-height: 1.35; }
.sk-kit-txt strong { font-size: 15px; color: var(--dark); font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.sk-kit-txt small { font-size: 12.5px; color: var(--muted); }
.sk-drop-item.is-coming .sk-kit-txt strong { color: var(--muted); }
.sk-soon {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .01em; color: var(--muted);
  background: rgba(139, 134, 160, .14); border-radius: 6px; padding: 2px 7px; line-height: 1.5;
}
/* 준비중(개발 중)은 파랑, 출시 예정(개발 전)은 위 회색 그대로.
   브랜드 파랑(#0055fb) 이 아니라 한 톤 진한 --brand-dark 를 쓴다 — 링크·CTA 와 같은 색이면
   배지가 클릭되는 것으로 읽힌다. */
.sk-soon.is-prep { color: var(--brand-dark); background: rgba(var(--brand-rgb), .10); }
.sk-header-right { display: flex; align-items: center; gap: 10px; }

/* 햄버거 */
.sk-burger { display: none; width: 44px; height: 44px; border: 0; background: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.sk-burger span { width: 20px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform .25s, opacity .25s; }
.menu-open .sk-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .sk-burger span:nth-child(2) { opacity: 0; }
.menu-open .sk-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 메뉴 — 헤더 아래 전체 화면을 덮는 패널 */
.sk-mobile {
  display: none; background: #fff;
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
  z-index: 99; padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}
.sk-mobile.open { display: flex; flex-direction: column; }
.sk-mobile-group { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--brand); text-transform: uppercase; margin: 6px 4px 12px; }
.sk-mobile-kit {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; padding: 15px 16px; margin-bottom: 8px; text-align: left;
  border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 14px;
  background: #fff;
}
.sk-mobile-kit .sk-kit-txt { gap: 3px; }
.sk-mobile-kit .sk-kit-txt strong { font-size: 16px; color: var(--brand); }
.sk-mobile-kit .sk-kit-txt small { font-size: 13px; }
.sk-mobile-kit:not(.is-coming)::after {
  content: "→"; flex: none; font-size: 18px; font-weight: 800; color: var(--brand);
}
.sk-mobile-kit.is-coming { border-left-color: var(--border); }
.sk-mobile-kit.is-coming .sk-kit-txt strong { color: var(--muted); }
.sk-mobile-link { display: block; padding: 14px 4px; margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--dark); border-top: 1px solid var(--bg-subtle); }
.sk-mobile-link.active { color: var(--brand); }
.sk-mobile-cta { display: flex; width: 100%; margin-top: auto; }

@media (max-width: 960px) {
  .sk-nav, .sk-header-cta { display: none; }
  .sk-header-inner { gap: 0; justify-content: space-between; }
  .sk-burger { display: flex; }
}

/* ============================================================
   1. 히어로
   ============================================================ */
.hero {
  position: relative; overflow: hidden; text-align: center;
  /* H1 이 3줄이라 상단 여백은 줄여서 인포그래픽(덱)을 첫 화면에 더 남긴다 */
  padding: calc(var(--header-h) + 56px) 0 80px;
  background:
    radial-gradient(50% 42% at 50% 0%, rgba(var(--brand-rgb), .07) 0%, transparent 100%),
    linear-gradient(180deg, var(--bg-subtle) 0%, #fff 60%);
}
.hero-badges {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 500;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hero-badge strong { font-weight: 800; }
/* 카페24 공식 입점 — 킷 랜딩 톤앤매너 */
.hero-badge-cafe24 { background: var(--brand-light); color: var(--brand); font-weight: 700; }
.hero-badge-cafe24 .dot { background: var(--brand); }
/* 무료체험 오퍼 */
.hero-badge-offer {
  background: #fff; border: 1px solid var(--border); color: var(--body);
  box-shadow: 0 4px 14px rgba(15, 10, 30, .05);
}
.hero-badge-offer .dot { background: var(--success); box-shadow: 0 0 0 4px rgba(16, 185, 129, .15); }
.hero-badge-offer strong { color: var(--brand); }
.hero h1 {
  font-size: clamp(32px, 5.6vw, 58px); font-weight: 800; color: var(--dark);
  line-height: 1.28; letter-spacing: -1px;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-sub { margin: 24px auto 0; max-width: 600px; font-size: 17px; color: var(--body); line-height: 1.7; }
.hero-cta { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 히어로 CTA — 문구 하나로 고정, 호버 효과 없음
   (.hero-cta 는 하단 CTA 섹션에서도 쓰이므로 .hero 안으로 한정) */
.hero .hero-cta .btn { min-width: 300px; height: 58px; }
@media (hover: hover) {
  .hero .hero-cta .btn:hover {
    transform: none; filter: none;
    box-shadow: 0 8px 20px rgba(var(--brand-rgb), .28);
  }
}

/* 히어로 H1 회전 문구 — "쇼핑몰에 없던 / [1+1 할인 / 설문 리뷰 / ...] / 셀킷이 채워드립니다"
   회전 문구는 항상 자기 줄(H1 3줄 고정). 문구 길이가 달라도 가운데 정렬로 좌우만 늘고
   옆 텍스트를 밀지 않으므로 폭을 재거나 맞출 필요가 없다.
   문구는 한 칸에 겹쳐 쌓아두고 fade + 아래에서 위로 흘려 교체. */
.hero-rotate {
  display: grid; justify-items: center; color: var(--brand);
  /* 좁은 화면에서 가장 긴 문구가 한 줄에 안 들어가면 이 줄만 자동으로 축소.
     9.6 = 가장 긴 문구(아이콘·간격 포함) 폭 8.7em + 여유.
     웹폰트가 늦게 적용되는 순간엔 대체 폰트가 더 넓으므로 여유를 넉넉히 둔다.
     더 긴 문구를 추가하면 이 숫자를 키워야 한다. 48px = 좁은 화면 좌우 여백. */
  font-size: min(1em, calc((100vw - 48px) / 9.6));
  /* 문구가 오르내릴 여유를 위아래로 열어둔다 (음수 마진으로 줄 간격은 그대로).
     이 여유가 없으면 이동 중에 글자가 클립 경계에 잘려 뚝뚝 끊겨 보인다. */
  padding: .22em 0; margin: -.22em 0;
  overflow: hidden;
}
.hero-rotate-item {
  grid-area: 1 / 1; width: max-content; white-space: nowrap;
  display: flex; align-items: center; gap: .3em;
  will-change: opacity, transform;
  /* 대기 위치: 아래쪽 */
  opacity: 0; transform: translateY(.44em);
  /* 들어올 때 — 지연(.22s)을 나가는 문구의 투명도 시간과 같게 맞춰 배턴터치.
     두 문구가 동시에 보이는 구간이 없다.
     transform 이 opacity 보다 길어서, 다 보인 뒤에도 미세하게 더 올라와 정착한다. */
  transition: opacity .42s cubic-bezier(.22, .61, .24, 1) .22s,
              transform .56s cubic-bezier(.16, .84, .28, 1) .22s;
}
.hero-rotate-item.is-in { opacity: 1; transform: translateY(0); }
.hero-rotate-item.is-out {
  opacity: 0; transform: translateY(-.44em);
  /* 나갈 때 — 투명도가 이동보다 먼저 빠진다. 글자가 멀리 가 클립 경계에 닿을 때는 이미 안 보이게. */
  transition: opacity .22s cubic-bezier(.4, 0, .85, .45),
              transform .38s cubic-bezier(.4, 0, .9, .5);
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotate-item, .hero-rotate-item.is-out { transition: none; }
}

/* 킷 아이콘 — H1 크기에서 24px 기준 선(stroke 1.7)이 실처럼 얇아 보이므로 굵기를 올린다.
   글자보다 살짝 작게 둬야 문구가 주인공으로 읽힌다.
   translateY: flex 중앙 정렬은 글자 '박스' 기준이라 한글 잉크 중심보다 위에 놓인다.
   렌더된 픽셀에서 잉크 중심차를 재서(-.047em) 보정한 값. */
.hero-rotate-ic { display: flex; flex: none; transform: translateY(.05em); }
.hero-rotate-ic svg {
  width: .78em; height: .78em; stroke-width: 2.6;
  /* 24 좌표계 끝에 붙은 도형(trend 의 x=1·23, truck 의 x=23)은 굵힌 선의 절반이 viewBox 를
     넘어가 잘린다. SVG 기본값이 overflow:hidden 이므로 풀어준다. */
  overflow: visible;
}

/* 킷 둘러보기 — 업셀킷 위젯 카탈로그 링크와 동일한 이동 보더 애니메이션 */
@property --catalog-border-angle {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.hero-catalog-link {
  display: inline-flex; align-items: center; gap: 6px;
  position: relative; z-index: 2; margin: 44px auto 0;
  padding: 13px 26px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; color: var(--brand);
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--catalog-border-angle), transparent 0%, var(--brand-mid) 6%, var(--brand) 12%, transparent 24%, transparent 100%) border-box;
  box-shadow: 0 10px 28px rgba(var(--brand-rgb), .14);
  transition: box-shadow .25s, transform .25s, background .35s;
  animation: catalogBorderTravel 2.8s linear infinite;
}
@keyframes catalogBorderTravel { to { --catalog-border-angle: 360deg; } }
.hero-catalog-link:hover {
  background: linear-gradient(#fff, #fff) padding-box, var(--brand) border-box;
  box-shadow: 0 16px 36px rgba(var(--brand-rgb), .28);
  transform: translateY(-3px); animation-play-state: paused;
}
.hero-catalog-link-arrow { display: inline-block; transition: transform .25s; }
.hero-catalog-link:hover .hero-catalog-link-arrow { transform: translateX(4px); }

/* 인포그래픽 하단 특징 문구 */
.hero-tags { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* 히어로 인포그래픽 — 할인킷 장바구니 (2+1 → 가장 저렴한 1개 FREE) */
/* PC/태블릿: 3장 가로 나열 */
.hero-visual { max-width: 1060px; margin: 52px auto 0; }
.deck { display: flex; justify-content: center; align-items: stretch; gap: 22px; padding-top: 14px; }
.deck-card { position: relative; flex: 1 1 320px; max-width: 344px; min-width: 0; transition: transform .28s ease, opacity .28s ease; }
.deck-card .kit-screen { height: 100%; min-height: 384px; display: flex; flex-direction: column; transition: box-shadow .28s ease; }
.deck-dots { display: none; justify-content: center; gap: 8px; margin-top: 24px; }
.deck-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--border); cursor: pointer; transition: background .2s, width .2s; }
.deck-dot.is-on { background: var(--brand); width: 22px; }

/* 1000px 이하: 인포그래픽 캐러셀(한 장 노출 + 스와이프) */
@media (max-width: 1000px) {
  .hero-visual { max-width: 380px; margin-top: 60px; }
  .deck { display: block; position: relative; height: 420px; padding-top: 0; gap: 0; }
  .deck-card {
    position: absolute; inset: 0; width: auto; max-width: none; flex: none;
    transition: opacity .5s ease;
  }
  .deck-card.pos-0 { opacity: 1; z-index: 3; }
  .deck-card.pos-1, .deck-card.pos-2 { opacity: 0; z-index: 1; pointer-events: none; }
  /* 현재 보이는 카드 태그는 찐파 */
  .deck-card.pos-0 .kit-tag { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(var(--brand-rgb), .3); }
  .deck-dots { display: flex; }
}

@media (max-width: 768px) {
  /* 모바일: 데스크톱용 강제 줄바꿈 해제 + 정렬 자연스럽게 */
  .br-pc { display: none; }
  /* 모바일 영역별 타이틀·서브 스펙 고정 */
  .section-title { font-size: 28px; }
  .section-sub { font-size: 15px; }
  /* 모바일: 본문 강제 줄바꿈 해제 + 왼쪽정렬 + 15px */
  .section-sub br, .kit-sub br, .kit-desc br, .pain-card p br { display: none; }
  .section-sub, .kit-sub, .kit-desc, .pain-card p { text-align: left; font-size: 15px; }
  .hero-sub { text-align: center; font-size: 15px; }
  /* 모바일: 서브 ↔ 카드 여백 축소 */
  .section-head { margin-bottom: 32px; }
}

/* 공통 카드 크롬 */
.kit-screen {
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 10, 30, .12); overflow: hidden; text-align: left;
}

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.cart-head-title { font-size: 16px; font-weight: 800; color: var(--dark); }
.cart-head-count { font-size: 13px; color: var(--muted); }

.cart-item { display: flex; align-items: center; gap: 14px; padding: 15px 22px; border-bottom: 1px solid var(--bg-subtle); }
.cart-thumb {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 23px;
  background: linear-gradient(135deg, var(--brand-light), var(--bg-subtle));
  border: 1px solid var(--border);
}
.cart-info { flex: 1; min-width: 0; }
.cart-name { font-size: 14.5px; font-weight: 700; color: var(--dark); }
.cart-opt { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cart-price { text-align: right; white-space: nowrap; }
.cart-amt { font-size: 15px; font-weight: 800; color: var(--dark); }
.cart-free {
  display: inline-block; font-size: 12px; font-weight: 800; color: #fff;
  background: var(--danger); border-radius: 999px; padding: 3px 11px; letter-spacing: .02em;
  animation: cart-free-pulse 2s ease-in-out infinite;
}
@keyframes cart-free-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
}
.cart-strike { display: block; font-size: 12.5px; color: var(--muted); text-decoration: line-through; margin-top: 5px; }

.cart-summary { background: var(--bg-subtle); padding: 16px 22px 18px; }
.cart-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; margin-top: 9px; }
.cart-row:first-child { margin-top: 0; }
.cart-row-label { color: var(--muted); }
.cart-row-val { font-weight: 700; color: var(--dark); }
.cart-row-disc .cart-row-label, .cart-row-disc .cart-row-val { color: var(--brand); font-weight: 800; }
.cart-promo-wrap { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; }
.cart-promo-hook { color: var(--brand); opacity: .55; font-size: 13px; }
.cart-promo {
  display: inline-flex; font-size: 12px; font-weight: 700; color: var(--brand);
  background: rgba(var(--brand-rgb), .08); border-radius: 8px; padding: 5px 10px;
}
.cart-total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cart-total .cart-row-label { color: var(--dark); font-weight: 800; font-size: 15px; }
.cart-total .cart-row-val { color: var(--brand); font-weight: 900; font-size: 18px; }

/* 할인킷 애니메이션 (8s): 빈 장바구니 → 상품 담김 → 2+1 적용 → 할인 강조 */
/* 높이는 고정(공간 예약), 상품은 제자리에서 페이드+슬라이드로 등장 → 카드 높이 불변 */
.dc-item-1 { animation: dcItem1 8s ease-in-out infinite; }
.dc-item-2 { animation: dcItem2 8s ease-in-out infinite; }
@keyframes dcItem1 {
  0%, 5% { opacity: 0; transform: translateY(12px); }
  16%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(12px); }
}
@keyframes dcItem2 {
  0%, 20% { opacity: 0; transform: translateY(12px); }
  32%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(12px); }
}
.dc-summary { position: relative; animation: dcSummary 8s ease-in-out infinite; }
@keyframes dcSummary {
  0%, 34% { opacity: 0; transform: translateY(8px); }
  44%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

.dc-swap { position: relative; display: inline-block; height: 1.4em; min-width: 82px; text-align: right; vertical-align: middle; }
.dc-swap > span { position: absolute; right: 0; top: 0; white-space: nowrap; }
.dc-was { animation: dcWasOut 8s ease-in-out infinite; }
.dc-now { opacity: 0; animation: dcNowIn 8s ease-in-out infinite; }
@keyframes dcWasOut { 0%, 48% { opacity: 1; } 54%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dcNowIn { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 1; } 100% { opacity: 0; } }
.dc-disc .dc-was { color: var(--muted); }
.dc-disc .dc-now { color: var(--brand); font-weight: 800; }

/* 자켓 가격 셀: 40,000원 → FREE + 취소선 (등장 시 버스트) */
.dc-price { position: relative; min-width: 78px; min-height: 46px; }
.dc-price .dc-was { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 800; color: var(--dark); white-space: nowrap; animation: dcWasOut 8s ease-in-out infinite; }
.dc-price .dc-now { position: absolute; right: 0; top: 0; opacity: 0; animation: dcNowIn 8s ease-in-out infinite; }
.dc-price .cart-free { animation: dcFreeBurst 8s ease-in-out infinite; }
@keyframes dcFreeBurst {
  0%, 52% { transform: scale(.4); box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); }
  58% { transform: scale(1.35); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  64% { transform: scale(.94); }
  69% { transform: scale(1.1); }
  74% { transform: scale(1); }
  84% { transform: scale(1.08); box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
  90% { transform: scale(1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); }
}

/* 2+1 행사 칩 등장 (팝) */
.dc-promo { animation: dcPromo 8s ease-in-out infinite; }
@keyframes dcPromo {
  0%, 46% { opacity: 0; transform: translateX(-6px) scale(.85); }
  53% { opacity: 1; transform: translateX(0) scale(1.12); }
  59%, 92% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-6px) scale(.85); }
}

/* 결제금액 행 (배경 하이라이트 제거) */
.dc-total-flash { border-radius: 8px; }

/* 절약 금액 플로팅 콜아웃 */
.dc-savings {
  position: absolute; right: 4px; bottom: 44px; z-index: 3;
  font-size: 13px; font-weight: 900; color: var(--danger);
  background: #FEECEC; border: 1px solid rgba(239, 68, 68, .25); border-radius: 999px;
  padding: 3px 11px; pointer-events: none; opacity: 0;
  animation: dcSavings 8s ease-in-out infinite;
}
@keyframes dcSavings {
  0%, 52% { opacity: 0; transform: translateY(10px) scale(.8); }
  58% { opacity: 1; transform: translateY(0) scale(1.12); }
  66% { opacity: 1; transform: translateY(-2px) scale(1); }
  80% { opacity: 0; transform: translateY(-18px) scale(1); }
  100% { opacity: 0; }
}

/* 카드마다 킷 이름 뱃지 (카드 상단 좌측에 떠 있음) */
.kit-tag {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-light); color: var(--brand); border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: -.01em; padding: 7px 18px;
  box-shadow: 0 5px 14px rgba(var(--brand-rgb), .14);
  transition: background .28s ease, color .28s ease, box-shadow .28s ease;
}
.kit-tag-ic { display: inline-flex; width: 17px; height: 17px; }
.kit-tag-ic svg { width: 16px; height: 16px; }

/* 업셀킷 — 함께 구매 추천 위젯 */
.up-item { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--bg-subtle); }
.up-add { flex: none; font-size: 12.5px; font-weight: 700; color: var(--brand); background: rgba(var(--brand-rgb), .08); border: 1px solid var(--brand-light); border-radius: 9px; padding: 8px 14px; }
.up-foot { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; background: var(--bg-subtle); }
.up-foot-label { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.up-foot-val { color: var(--brand); font-weight: 900; font-size: 16px; }

/* 업셀킷 2단계 데모: 하단 담기 바 → (담기) → 무료배송 진행도 + 추천 */
.up2 { position: relative; flex: 1; min-height: 300px; overflow: hidden; }
.up2-a, .up2-b { position: absolute; inset: 0; background: var(--bg-subtle); }
.up2-a { animation: up2FadeA 8s ease-in-out infinite; }
.up2-b { opacity: 0; padding: 16px; display: flex; flex-direction: column; gap: 11px; animation: up2FadeB 8s ease-in-out infinite; }
@keyframes up2FadeA { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes up2FadeB { 0%, 46% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* State A: 상세 스크롤 배경 + 하단 고정 담기 바 */
.up2-scroll { position: absolute; top: 0; left: 0; right: 0; padding: 14px 14px 100px; display: flex; flex-direction: column; gap: 9px; animation: up2Scroll 8s linear infinite; }
.up2-sk { background: rgba(var(--brand-rgb), .08); border-radius: 7px; flex: none; }
.up2-sk-img { height: 60px; }
.up2-sk-ln { height: 9px; }
@keyframes up2Scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.up2-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to top, var(--bg-subtle) 45%, transparent); }
.up2-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 11px 12px; box-shadow: 0 10px 26px rgba(15, 10, 30, .18); }
.up2-bar-ic { width: 38px; height: 38px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; background: linear-gradient(135deg, rgba(var(--brand-rgb), .14), rgba(var(--brand-rgb), .05)); }
.up2-bar-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.up2-bar-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.up2-bar-price { font-size: 15px; color: var(--dark); font-weight: 800; }
.up2-bar-btn { font-size: 12.5px; font-weight: 800; color: #fff; background: var(--dark); padding: 10px 15px; border-radius: 20px; white-space: nowrap; flex: none; animation: up2Press 8s ease-in-out infinite; }
@keyframes up2Press { 0%, 36% { transform: scale(1); } 40% { transform: scale(.9); } 44% { transform: scale(1.05); } 48%, 100% { transform: scale(1); } }

/* State B: 무료배송 진행도 + 추천 */
.up2-title { font-size: 15px; font-weight: 800; color: var(--dark); }
.up2-ship { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 4px 14px rgba(15, 10, 30, .08); display: flex; flex-direction: column; gap: 9px; }
.up2-ship-badge { align-self: flex-start; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--brand); padding: 4px 10px; border-radius: 20px; }
.up2-ship-msgs { position: relative; height: 19px; }
.up2-ship-msg, .up2-ship-done { position: absolute; left: 0; top: 0; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.up2-ship-msg { color: var(--dark); animation: up2MsgOut 8s ease-in-out infinite; }
.up2-ship-msg strong { color: var(--brand); }
.up2-ship-done { color: var(--success); opacity: 0; animation: up2MsgIn 8s ease-in-out infinite; }
@keyframes up2MsgOut { 0%, 64% { opacity: 1; } 70%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes up2MsgIn { 0%, 66% { opacity: 0; } 72%, 94% { opacity: 1; } 100% { opacity: 0; } }
.up2-track { background: #E9EDF3; border-radius: 20px; height: 9px; overflow: hidden; }
.up2-fill { height: 100%; border-radius: 20px; background: var(--brand); width: 55%; animation: up2Fill 8s ease-in-out infinite; }
@keyframes up2Fill {
  0%, 64% { width: 55%; background: var(--brand); }
  74%, 94% { width: 100%; background: var(--success); }
  100% { width: 55%; background: var(--brand); }
}

/* 담긴 상품 리스트 (+ 누르면 추천 상품이 리스트에 추가) */
.up2-list { display: flex; flex-direction: column; }
.up2-litem { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 9px 11px; box-shadow: 0 3px 10px rgba(15, 10, 30, .05); }
.up2-litem-thumb { width: 34px; height: 34px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(var(--brand-rgb), .08); }
.up2-litem-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up2-litem-name { font-size: 12.5px; font-weight: 700; color: var(--dark); }
.up2-litem-sub { font-size: 11px; color: var(--muted); }
.up2-added { overflow: hidden; animation: up2Added 8s ease-in-out infinite; }
@keyframes up2Added {
  0%, 62% { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; transform: translateY(6px); }
  70%, 94% { opacity: 1; max-height: 54px; margin-top: 8px; padding-top: 9px; padding-bottom: 9px; transform: none; }
  100% { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
}

/* 우측 하단 고정 + 담기 FAB (펌프) + 버블 */
.up2-fab {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand); color: #fff;
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), .35);
  animation: up2Pump 8s ease-in-out infinite;
}
/* + 글리프를 의사요소로 그려 원 정중앙에 배치 */
.up2-fab::before, .up2-fab::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); background: currentColor; border-radius: 2px;
}
.up2-fab::before { width: 17px; height: 3px; }
.up2-fab::after { width: 3px; height: 17px; }
@keyframes up2Pump {
  0%, 58% { transform: scale(1); }
  61% { transform: scale(.82); }
  64% { transform: scale(1.15); }
  67% { transform: scale(.9); }
  70% { transform: scale(1.08); }
  74%, 100% { transform: scale(1); }
}
.up2-bubble {
  position: absolute; right: 27px; bottom: 56px; z-index: 4;
  font-size: 22px; font-weight: 800; color: rgba(var(--brand-rgb), .5);
  pointer-events: none; opacity: 0;
  animation: up2Bubble 8s ease-in-out infinite;
}
@keyframes up2Bubble {
  0%, 60% { opacity: 0; transform: translateY(0) scale(.5); }
  63% { opacity: 1; }
  76% { opacity: 0; transform: translateY(-46px) scale(1.7); }
  100% { opacity: 0; }
}

/* 리뷰킷 — 리뷰 통계 (작성하기 → 폼 자동작성 → 등록되며 +1) */
.rv2 { padding: 18px; position: relative; }
.rv2-head { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--dark); }
.rv2-hcount { color: var(--brand); }
.rv2-plus { color: var(--brand); font-weight: 800; font-size: 12px; opacity: 0; animation: rvPlus 8s ease-in-out infinite; }

/* 값 교체 스와이프 — grid로 두 값을 같은 칸에 겹쳐 크로스페이드 (등록 후 +1) */
.rv2-swap { display: inline-grid; }
.rv2-swap > span { grid-area: 1 / 1; }
.rv2-was { animation: rvWasOut 8s ease-in-out infinite; }
.rv2-now { opacity: 0; animation: rvNowIn 8s ease-in-out infinite; }
@keyframes rvWasOut { 0%, 76% { opacity: 1; } 82%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rvNowIn { 0%, 78% { opacity: 0; } 84%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rvPlus {
  0%, 78% { opacity: 0; transform: translateY(5px) scale(.6); }
  84% { opacity: 1; transform: translateY(0) scale(1.1); }
  90% { opacity: 1; }
  96% { opacity: 0; transform: translateY(-9px); }
  100% { opacity: 0; }
}

.rv2-score { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.rv2-star { color: var(--brand); font-size: 30px; line-height: 1; }
.rv2-num { font-size: 30px; font-weight: 900; color: var(--dark); line-height: 1; }
.rv2-like { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.rv2-like strong { color: var(--brand); font-weight: 800; }

.rv2-write { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(var(--brand-rgb), .28); animation: rvPress 8s ease-in-out infinite; }
@keyframes rvPress { 0%, 13% { transform: scale(1); } 16% { transform: scale(.95); } 19% { transform: scale(1.02); } 23%, 100% { transform: scale(1); } }

.rv2-dist { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.rv2-drow { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.rv2-dl { flex: none; width: 62px; color: var(--body); }
.rv2-dbar { flex: 1; height: 7px; border-radius: 20px; background: #EAECEF; overflow: hidden; }
.rv2-dfill { display: block; height: 100%; border-radius: 20px; background: var(--brand); }
.rv2-dn { flex: none; min-width: 40px; text-align: right; color: var(--muted); }

.rv2-toast {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 5; white-space: nowrap; font-size: 12.5px; font-weight: 800;
  color: var(--brand); background: var(--brand-light); border-radius: 999px;
  padding: 6px 14px; box-shadow: 0 8px 20px rgba(var(--brand-rgb), .2);
  opacity: 0; pointer-events: none; animation: rvToast 8s ease-in-out infinite;
}
@keyframes rvToast {
  0%, 79% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); }
  85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  93% { opacity: 1; }
  98% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  100% { opacity: 0; }
}

/* 리뷰 작성 폼 오버레이 (버튼 클릭 → 별점 자동 채움 + 내용 자동 입력 → 등록) */
.rv2-form {
  position: absolute; inset: 0; z-index: 4;
  background: #fff; border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  animation: rvFormIn 8s ease-in-out infinite;
}
@keyframes rvFormIn {
  0%, 17% { opacity: 0; transform: translateY(14px) scale(.97); }
  24%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  78%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
}
.rv2-form-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 20px; }
.rv2-form-stars { position: relative; display: inline-block; font-size: 32px; letter-spacing: 4px; line-height: 1; margin-bottom: 22px; }
.rv2-stars-base { color: #E3E6EB; }
.rv2-stars-fill { position: absolute; left: 0; top: 0; color: var(--brand); overflow: hidden; white-space: nowrap; width: 0; animation: rvStarSweep 8s ease-in-out infinite; }
@keyframes rvStarSweep { 0%, 30% { width: 0; } 44%, 72% { width: 100%; } 78%, 100% { width: 0; } }
.rv2-form-box { width: 100%; min-height: 66px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); padding: 12px 14px; font-size: 13px; color: var(--dark); line-height: 1.5; text-align: left; overflow: hidden; }
.rv2-type { display: inline-block; white-space: nowrap; overflow: hidden; width: 0; vertical-align: bottom; animation: rvType 8s ease-in-out infinite; }
@keyframes rvType { 0%, 48% { width: 0; } 62%, 72% { width: 165px; } 78%, 100% { width: 0; } }
.rv2-caret { display: inline-block; color: var(--brand); font-weight: 400; opacity: 0; animation: rvCaret 8s steps(1, end) infinite; }
@keyframes rvCaret { 0%, 47% { opacity: 0; } 48% { opacity: 1; } 51% { opacity: 0; } 54% { opacity: 1; } 57% { opacity: 0; } 60% { opacity: 1; } 63% { opacity: 0; } 66%, 72% { opacity: 1; } 73%, 100% { opacity: 0; } }
.rv2-form-submit { margin-top: auto; width: 100%; padding: 13px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer; animation: rvSubmit 8s ease-in-out infinite; }
@keyframes rvSubmit { 0%, 65% { transform: scale(1); } 68% { transform: scale(.94); } 71% { transform: scale(1.02); } 74%, 100% { transform: scale(1); } }

/* 로드 시 페이드업 */
.fade-up { opacity: 0; animation: fade-up .7s ease forwards; }
.delay-1 { animation-delay: .08s; } .delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .32s; } .delay-4 { animation-delay: .48s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ============================================================
   2. 킷 스트립 (마퀴)
   ============================================================ */
.strip {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 18px 0; overflow: hidden; background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip-track { display: flex; width: max-content; animation: strip-move 30s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-seq { display: flex; align-items: center; gap: 40px; margin-right: 40px; }
.strip-chip {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--dark);
  letter-spacing: -0.01em; white-space: nowrap;
}
.strip-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--brand); }
.strip-ic svg { width: 19px; height: 19px; }
.strip-chip-next { color: var(--brand); font-weight: 700; }
.strip-chip-next .strip-ic { color: var(--brand); }
@keyframes strip-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   3. 공감
   ============================================================ */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pain-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg-subtle); border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: 34px 30px 30px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pain-ic {
  width: 52px; height: 52px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; color: var(--brand);
  background: rgba(var(--brand-rgb), .08);
  transition: background .3s ease;
}
.pain-ic svg { width: 26px; height: 26px; }
.pain-card h3 { font-size: 18.5px; font-weight: 800; color: var(--dark); margin-bottom: 10px; }
.pain-card p { font-size: 15px; color: var(--muted); }
.pain-fix {
  align-self: flex-start; margin-top: auto; padding-top: 18px;
  font-size: 13.5px; font-weight: 700; color: var(--brand);
  text-decoration: none;
  opacity: .75; transition: opacity .3s ease, transform .3s ease;
}
.pain-fix:hover { opacity: 1; transform: translateX(3px); }
@media (hover: hover) {
  .pain-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--brand-rgb), .18);
    box-shadow: 0 18px 40px rgba(var(--brand-rgb), .12);
  }
  .pain-card:hover .pain-fix { opacity: 1; transform: translateX(3px); }
}

/* ============================================================
   4. 킷 라인업 — 대형 가로 카드
   ============================================================ */
.kits { background: var(--bg-subtle); scroll-margin-top: calc(var(--header-h) + 20px); }
.kit-list { display: grid; gap: 20px; }
.kit-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 44px 48px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kit-row:hover { border-color: var(--brand-mid); box-shadow: 0 16px 40px rgba(var(--brand-rgb), .1); }
/* 행 교차: 짝수 행은 인포그래픽을 왼쪽으로 */
.kit-row:nth-child(even) .kit-visual { order: -1; }

.kit-head { margin-bottom: 14px; }
.kit-icon {
  color: var(--brand); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.kit-icon svg { width: 27px; height: 27px; }
.kit-name-row { display: flex; align-items: center; gap: 9px; }
.kit-name-row h3 { font-size: 24px; font-weight: 800; color: var(--dark); letter-spacing: -0.5px; }
.kit-status { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 12px; }
.kit-status.live { color: var(--success); background: #E7F8F1; }
.kit-status.soon { color: var(--warn); background: #FEF3E2; }
.kit-tagline { font-size: 14px; font-weight: 700; color: var(--brand); margin-bottom: 14px; }
.kit-desc { font-size: 15.5px; color: var(--body); }
.kit-points { list-style: none; margin-top: 18px; display: grid; gap: 7px; }
.kit-points li { font-size: 14px; color: var(--muted); padding-left: 22px; position: relative; }
.kit-points li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 900; }
.kit-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-chips span {
  font-size: 12px; font-weight: 700; color: #3B7BFF;
  background: #EAF3FF; border: 1px solid #D3E4FF;
  border-radius: 8px; padding: 4px 11px; white-space: nowrap;
}
.kit-go {
  font-size: 15px; font-weight: 800; color: var(--brand); white-space: nowrap;
  border: 0; background: none; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none; padding: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.kit-go:hover { transform: translateX(3px); }

.kit-row.is-coming { border-style: solid; background: #ffffff77; }
.kit-row.is-coming .kit-go { color: var(--muted); font-weight: 600; }

/* ---------- 킷 인포그래픽 영역 ---------- */
.kit-visual {
  min-height: 260px; border-radius: var(--radius); padding: 30px;
  background: linear-gradient(160deg, #fff 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.kit-row.is-coming .kit-visual { opacity: .9; }
/* 첫구매킷 팝업은 다크 배경이라 흐림 예외 (선명하게) */
.kit-row.is-coming .ig-firstbuy { opacity: 1; }
.ig-cap { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.ig-cap b { color: var(--brand); }
.ig-l { display: block; height: 8px; border-radius: 4px; background: #E4EAF6; }
.ig-l.w30 { width: 30%; } .ig-l.w40 { width: 40%; } .ig-l.w50 { width: 50%; }
.ig-l.w60 { width: 60%; } .ig-l.w70 { width: 70%; } .ig-l.w80 { width: 80%; }

/* 할인킷 — N+1 */
.ig-nplus { display: flex; align-items: flex-end; gap: 12px; }
.ig-prod { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ig-prod-img { width: 58px; height: 58px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-light), #EAF1FE); border: 1px solid var(--border); }
.ig-prod span { font-size: 11px; font-weight: 700; color: var(--muted); }
.ig-prod.free .ig-prod-img { background: linear-gradient(135deg, var(--brand), var(--brand-mid)); border-color: transparent; position: relative; }
.ig-prod.free .ig-prod-img::after { content: 'FREE'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ig-prod.free span { color: var(--brand); }
.ig-plus-sign { font-size: 20px; font-weight: 800; color: var(--muted); padding-bottom: 22px; }

/* 할인킷 — 세트 1+1 / 카테고리 N+1 (2패널) */
.ig-set { width: 100%; display: flex; align-items: stretch; gap: 10px; }
.ig-set-panel {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 4px 4px;
}
.ig-set-title { font-size: 11.5px; font-weight: 800; color: var(--dark); }
.ig-set-list { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ig-set-row {
  display: flex; align-items: center; gap: 7px;
  background: #fff; border-radius: 10px; padding: 6px 8px;
  box-shadow: 0 2px 6px rgba(15, 10, 30, .06);
}
.ig-set-th {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, var(--brand-light), #EAF1FE);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.ig-set-nm { flex: 1; font-size: 11.5px; font-weight: 700; color: var(--dark); }
.ig-set-free { font-size: 9px; font-weight: 800; color: #fff; background: #F0353F; border-radius: 5px; padding: 2px 5px; letter-spacing: .04em; }
.ig-set-pr { font-size: 10.5px; font-weight: 800; color: var(--dark); white-space: nowrap; }
.ig-set-pr.strike { color: var(--muted); text-decoration: line-through; }
.ig-set-arrow { font-size: 13px; color: var(--brand-mid); line-height: .5; }
.ig-set-result { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.ig-set-rth {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-light), #EAF1FE);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.ig-set-op { font-size: 13px; font-weight: 800; color: var(--muted); }
/* 결과 = 라벨(박스밖) + 가격(박스) 분리, 위로 여백 */
.ig-set-final { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ig-set-flabel { font-size: 10px; font-weight: 700; color: var(--muted); }
.ig-set-badge { font-size: 13.5px; font-weight: 800; color: var(--brand); background: rgba(var(--brand-rgb), .12); border-radius: 999px; padding: 6px 16px; }

/* 할인킷 인포그래픽 애니메이션 — 정가 → 할인 적용(행 번쩍+FREE·취소선) → 결과 할인가 강조 (5s 루프) */
.ig-set-free { transform-origin: center; }
.ig-set-badge { transition: none; }
.dc-hit { position: relative; z-index: 1; }
.kit-row.visible .dc-hit { animation: dc-rowflash 5s ease-in-out infinite; }
.kit-row.visible .ig-set-free { animation: dc-free 5s cubic-bezier(.3,1.6,.5,1) infinite; }
.kit-row.visible .ig-set-pr.strike { animation: dc-strike 5s ease-in-out infinite; }
.kit-row.visible .ig-set-final { animation: dc-final 5s ease-in-out infinite; }
.kit-row.visible .ig-set-final .ig-set-badge { animation: dc-badge 5s cubic-bezier(.3,1.5,.5,1) infinite; }
.kit-row.visible .ig-set-result .ig-set-rth { animation: dc-pop 5s ease-in-out infinite; }
@keyframes dc-rowflash {
  0%, 24% { background: #fff; box-shadow: 0 2px 6px rgba(15,10,30,.06); }
  30% { background: #FFF0F1; box-shadow: 0 4px 14px rgba(240,53,63,.28); }
  40%, 88% { background: #fff; box-shadow: 0 2px 6px rgba(15,10,30,.06); }
  100% { background: #fff; }
}
@keyframes dc-free {
  0%, 25% { opacity: 0; transform: scale(.3); }
  31% { opacity: 1; transform: scale(1.4); }
  37%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes dc-strike {
  0%, 27% { color: var(--dark); text-decoration: none; }
  32%, 88% { color: var(--muted); text-decoration: line-through; }
  94%, 100% { color: var(--dark); text-decoration: none; }
}
@keyframes dc-pop {
  0%, 40% { transform: scale(.7); opacity: .3; }
  48% { transform: scale(1.15); opacity: 1; }
  54%, 88% { transform: scale(1); opacity: 1; }
  94%, 100% { transform: scale(.7); opacity: .3; }
}
@keyframes dc-final {
  0%, 52% { opacity: .45; }
  60%, 88% { opacity: 1; }
  94%, 100% { opacity: .45; }
}
@keyframes dc-badge {
  0%, 50% { transform: scale(.85); box-shadow: none; }
  60% { transform: scale(1.28); box-shadow: 0 10px 26px rgba(var(--brand-rgb), .6); }
  68%, 88% { transform: scale(1.06); box-shadow: 0 6px 16px rgba(var(--brand-rgb), .32); }
  94%, 100% { transform: scale(.85); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-row.visible .dc-hit,
  .kit-row.visible .ig-set-free,
  .kit-row.visible .ig-set-pr.strike,
  .kit-row.visible .ig-set-final,
  .kit-row.visible .ig-set-final .ig-set-badge,
  .kit-row.visible .ig-set-result .ig-set-rth { animation: none !important; }
}

/* 업셀킷 — 담기 → 무료배송 도달 스토리 애니메이션 */
.up3 { width: 100%; display: flex; flex-direction: column; gap: 16px; }
/* 상품(할인가 강조) 카드 */
.up3-prod {
  position: relative; display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(15, 10, 30, .1);
}
.up3-thumb {
  position: relative; width: 58px; height: 58px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: linear-gradient(135deg, var(--brand-light), #EAF1FE);
}
.up3-off {
  position: absolute; top: -9px; left: -9px; width: 36px; height: 36px; border-radius: 50%;
  background: #F0353F; color: #fff; font-size: 9.5px; font-weight: 800; line-height: 1.05;
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 3px 10px rgba(240, 53, 63, .45);
}
.up3-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.up3-name { font-size: 14.5px; font-weight: 700; color: var(--dark); }
.up3-prices { display: flex; align-items: baseline; gap: 7px; }
.up3-prices b { font-size: 19px; font-weight: 800; color: var(--dark); }
.up3-prices s { font-size: 12.5px; color: var(--muted); }
.up3-add {
  flex: none; font-size: 13.5px; font-weight: 800; color: #fff; background: var(--brand);
  border-radius: 11px; padding: 10px 16px; box-shadow: 0 5px 14px rgba(var(--brand-rgb), .32);
}
.up3-plus {
  position: absolute; top: 10px; right: 20px; font-size: 13px; font-weight: 800; color: #fff;
  background: #F0353F; border-radius: 999px; padding: 3px 10px; opacity: 0;
  box-shadow: 0 4px 10px rgba(240, 53, 63, .4);
  will-change: transform, opacity;
}
/* 무료배송 진행도 */
.up3-ship { background: var(--bg-subtle); border-radius: 16px; padding: 16px 18px; }
.up3-ship-top { position: relative; height: 22px; margin-bottom: 12px; }
.up3-ship-msg, .up3-ship-done { position: absolute; left: 0; top: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.up3-ship-msg { color: var(--body); }
.up3-ship-msg b { color: var(--brand); }
.up3-ship-done { color: var(--success); opacity: 0; }
.up3-track { height: 11px; border-radius: 999px; background: #E4EAF6; overflow: hidden; }
.up3-fill { height: 100%; width: 55%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #3B7BFF); }

/* --- 애니메이션 (스크롤 진입 시 5s 루프) --- */
.kit-row.visible .up3-add { animation: up3-add 5s ease-in-out infinite; }
.kit-row.visible .up3-plus { animation: up3-plus 5s ease-out infinite; }
.kit-row.visible .up3-fill { animation: up3-fill 5s ease-in-out infinite; }
.kit-row.visible .up3-ship-msg { animation: up3-msg 5s ease-in-out infinite; }
.kit-row.visible .up3-ship-done { animation: up3-done 5s ease-in-out infinite; }
@keyframes up3-add {
  0%, 26% { transform: scale(1); }
  31% { transform: scale(.86); }
  36%, 100% { transform: scale(1); }
}
@keyframes up3-plus {
  0%, 32% { opacity: 0; transform: translateY(0) scale(.8); }
  38% { opacity: 1; transform: translateY(-7px) scale(1); }
  68% { opacity: 1; transform: translateY(-24px) scale(1); }
  80%, 100% { opacity: 0; transform: translateY(-36px) scale(1); }
}
@keyframes up3-fill {
  0%, 40% { width: 55%; background: linear-gradient(90deg, var(--brand), #3B7BFF); }
  70% { width: 100%; background: linear-gradient(90deg, var(--brand), #3B7BFF); }
  76%, 100% { width: 100%; background: linear-gradient(90deg, #12B886, #0CA678); }
}
@keyframes up3-msg {
  0%, 60% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes up3-done {
  0%, 62% { opacity: 0; transform: scale(.8); }
  70% { opacity: 1; transform: scale(1.08); }
  75%, 100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .kit-row.visible .up3-add,
  .kit-row.visible .up3-plus,
  .kit-row.visible .up3-fill,
  .kit-row.visible .up3-ship-msg,
  .kit-row.visible .up3-ship-done { animation: none !important; }
  .up3-fill { width: 100%; }
  .up3-plus { opacity: 1; }
}

/* 멀티배송킷 — 주문서 → 엑셀 일괄등록 → 배송지 리스트 자동 생성 (세로 플로우) */
.mx { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.mx-order {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--dark);
  background: #fff; border-radius: 11px; padding: 10px 13px; box-shadow: 0 3px 10px rgba(15, 10, 30, .07);
}
.mx-oic { font-size: 15px; }
.mx-order b { color: var(--brand); }
.mx-ocnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); }
.mx-excel {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; color: var(--dark);
  background: #fff; border: 1.5px dashed var(--brand-mid); border-radius: 11px; padding: 10px 13px;
}
.mx-xls { font-size: 8.5px; font-weight: 800; color: #fff; background: #12B886; border-radius: 4px; padding: 2px 6px; letter-spacing: .03em; }
.mx-xtxt { flex: 1; }
.mx-xup { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 8px; padding: 6px 13px; box-shadow: 0 4px 11px rgba(var(--brand-rgb), .32); transform-origin: center; }
.mx-arrow { text-align: center; font-size: 15px; color: var(--brand-mid); line-height: .5; }
.mx-list { display: flex; flex-direction: column; gap: 6px; }
.mx-drow {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 10px; padding: 8px 11px; box-shadow: 0 3px 10px rgba(15, 10, 30, .07);
}
.mx-dno { width: 19px; height: 19px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.mx-dnm { font-size: 12px; font-weight: 700; color: var(--dark); }
.mx-daddr { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); }
.mx-more { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 1px 0; opacity: 0; }
.mx-more span { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.kit-row.visible .mx-more { animation: mx-more 5s ease-in-out infinite; }
@keyframes mx-more {
  0%, 46% { opacity: 0; transform: translateY(4px); }
  56% { opacity: .55; transform: none; }
  91% { opacity: .55; }
  96%, 100% { opacity: 0; }
}
.mx-done {
  align-self: center; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 12px; font-weight: 800; color: var(--brand); background: rgba(var(--brand-rgb), .1); border-radius: 999px; padding: 6px 15px;
}
.mx-check { font-weight: 900; }

/* --- 애니메이션 (스크롤 진입 시 5s 루프) --- */
.kit-row.visible .mx-excel { animation: mx-xup 5s ease-in-out infinite; }
.kit-row.visible .mx-xup { animation: mx-chip 5s ease-in-out infinite; }
.kit-row.visible .mx-arrow { animation: mx-arrow 5s ease-in-out infinite; }
.kit-row.visible .mx-drow { opacity: 0; animation: mx-gen 5s ease-in-out infinite; }
.kit-row.visible .mx-drow:nth-of-type(1) { animation-delay: 0s; }
.kit-row.visible .mx-drow:nth-of-type(2) { animation-delay: .18s; }
.kit-row.visible .mx-drow:nth-of-type(3) { animation-delay: .36s; }
.kit-row.visible .mx-done { animation: mx-done 5s ease-in-out infinite; }
@keyframes mx-xup {
  0%, 6% { border-color: var(--brand-mid); box-shadow: none; }
  12% { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }
  20%, 100% { border-color: var(--brand-mid); box-shadow: none; }
}
@keyframes mx-chip {
  0%, 8% { transform: scale(1); box-shadow: 0 4px 11px rgba(var(--brand-rgb), .32); }
  12% { transform: scale(.86); box-shadow: 0 2px 6px rgba(var(--brand-rgb), .3); }
  17% { transform: scale(1.06); }
  23%, 100% { transform: scale(1); box-shadow: 0 4px 11px rgba(var(--brand-rgb), .32); }
}
@keyframes mx-arrow {
  0%, 14% { opacity: .3; }
  20% { opacity: 1; transform: translateY(2px); }
  28%, 100% { opacity: 1; transform: none; }
}
@keyframes mx-gen {
  0%, 16% { opacity: 0; transform: translateY(7px); }
  26% { opacity: 1; transform: none; }
  92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}
@keyframes mx-done {
  0%, 46% { opacity: 0; transform: scale(.8); }
  54% { opacity: 1; transform: scale(1.1); }
  60%, 100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .kit-row.visible .mx-excel,
  .kit-row.visible .mx-xup,
  .kit-row.visible .mx-arrow,
  .kit-row.visible .mx-drow,
  .kit-row.visible .mx-more,
  .kit-row.visible .mx-done { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* 리뷰킷 — 총점 + 리뷰 리스트 (추천 상승 / 차단 제거 애니메이션) */
.ig-stars { color: #FBBF24; font-size: 15px; letter-spacing: 2px; }
.rv3 { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.rv3-score { display: flex; align-items: baseline; gap: 9px; }
.rv3-score b { font-size: 30px; font-weight: 800; color: var(--dark); letter-spacing: -1px; }
.rv3-stars { color: #FBBF24; font-size: 14px; letter-spacing: 1px; }
.rv3-total { margin-left: auto; position: relative; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rv3-tdown { position: absolute; right: 0; top: 0; opacity: 0; }
.rv3-list { display: flex; flex-direction: column; overflow: hidden; padding: 8px; margin: -8px; }
.rv3-item {
  position: relative; display: flex; align-items: center; gap: 9px; height: 40px; margin-bottom: 8px; box-sizing: border-box;
  background: #fff; border-radius: 10px; padding: 0 12px; box-shadow: 0 2px 6px rgba(15, 10, 30, .06);
}
.rv3-item:last-child { margin-bottom: 0; }
.rv3-av { font-size: 17px; flex: none; }
.rv3-mini { color: #FBBF24; font-size: 10px; letter-spacing: .5px; flex: none; }
.rv3-tx { flex: 1; height: 7px; border-radius: 4px; background: #E4EAF6; margin-right: 52px; }
/* 태그: 행 우측 중앙, 처음엔 숨김 → 나중에 달림 */
.rv3-tag {
  position: absolute; top: 50%; right: 10px; z-index: 2; text-align: center;
  font-size: 9px; font-weight: 800; border-radius: 6px; padding: 3px 8px; white-space: nowrap;
  opacity: 0; transform: translateY(-50%) scale(0); transform-origin: right center; box-shadow: 0 2px 7px rgba(15, 10, 30, .16);
}
.rv3-b { color: #fff; background: var(--brand); }
.rv3-r { color: #fff; background: #F0353F; }

/* --- 애니메이션 (스크롤 진입 시 5s 루프, 슬롯 48px = 높이40+간격8) --- */
.kit-row.visible .rv3-block { animation: rv3-block 6s ease-in-out infinite; }
.kit-row.visible .rv3-reco { animation: rv3-reco 6s cubic-bezier(.4, 1.3, .5, 1) infinite; }
.kit-row.visible .rv3-normal { animation: rv3-normal 6s cubic-bezier(.4, 1.3, .5, 1) infinite; }
.kit-row.visible .rv3-b { animation: rv3-pop 6s ease-in-out infinite; }
.kit-row.visible .rv3-r { animation: rv3-pop-r 6s ease-in-out infinite; }
.kit-row.visible .rv3-tnow { animation: rv3-cnt-now 6s ease-in-out infinite; }
.kit-row.visible .rv3-tdown { animation: rv3-cnt-down 6s ease-in-out infinite; }
/* 빌드업은 앞쪽(~70%)에서 원래 속도로 진행, 끝에서 완료상태 ~1.4s 유지 후 리셋 */
/* 추천 태그: 먼저 달림(22%) → 추천리뷰 상승 */
@keyframes rv3-pop {
  0%, 20% { opacity: 0; transform: translateY(-50%) scale(0); }
  25% { opacity: 1; transform: translateY(-50%) scale(1.2); }
  30%, 88% { opacity: 1; transform: translateY(-50%) scale(1); }
  93% { opacity: 0; transform: translateY(-50%) scale(1); }
  93.01%, 100% { opacity: 0; transform: translateY(-50%) scale(0); }
}
/* 차단 시 총 리뷰 수 1 감소 (70%에 스왑 → 유지) */
@keyframes rv3-cnt-now { 0%, 68% { opacity: 1; } 73%, 91% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes rv3-cnt-down { 0%, 68% { opacity: 0; } 73%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes rv3-reco {
  0%, 27% { transform: translateY(0); }
  47%, 91% { transform: translateY(-48px); }
  96%, 100% { transform: translateY(0); }
}
@keyframes rv3-normal {
  0%, 27% { transform: translateY(0); }
  47%, 91% { transform: translateY(48px); }
  96%, 100% { transform: translateY(0); }
}
/* 차단 태그: 그 다음 달림(52%) → 차단리뷰 제거 */
@keyframes rv3-pop-r {
  0%, 47% { opacity: 0; transform: translateY(-50%) scale(0); }
  52% { opacity: 1; transform: translateY(-50%) scale(1.2); }
  57%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes rv3-block {
  0%, 53% { opacity: 1; height: 40px; margin-bottom: 0; transform: none; }
  58% { opacity: 1; transform: translateX(8px); }
  65% { opacity: 0; transform: translateX(70px); height: 40px; }
  70%, 91% { opacity: 0; height: 0; margin-bottom: 0; transform: translateX(70px); }
  96%, 100% { opacity: 0; height: 40px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-row.visible .rv3-block,
  .kit-row.visible .rv3-reco,
  .kit-row.visible .rv3-normal,
  .kit-row.visible .rv3-b,
  .kit-row.visible .rv3-r { animation: none !important; transform: none !important; opacity: 1 !important; height: 40px !important; }
  .rv3-tag { transform: translateY(-50%) scale(1) !important; }
  .rv3-tdown { opacity: 0 !important; }
}

/* ---------- 속도분석킷 — 쇼핑몰 로딩 → 속도 분석 → 결과 3단계 ----------
   한 사이클 9초. 요소마다 같은 9s 타임라인을 주고 퍼센트로 등장 구간을 나눈다
   (0~30% 로딩, 33~58% 스캔, 60~97% 결과). 구간이 어긋나면 두 단계가 겹쳐 보인다. */
.sp3 { position: relative; width: 100%; }
.sp3-win {
  width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; box-shadow: 0 6px 18px rgba(15, 10, 30, .07);
  animation: sp3Win 9s ease-in-out infinite;
}
.sp3-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.sp3-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #D5DEEE; }
.sp3-url { margin-left: 6px; flex: 1; font-size: 10px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; }
.sp3-page { position: relative; padding: 12px; display: flex; flex-direction: column; gap: 7px; min-height: 132px; overflow: hidden; }

/* 로딩 스켈레톤 — 색은 처음부터 끝까지 #E9EFF9 하나로 고정한다.
   흐르는 하이라이트(shimmer)와 로딩 완료 시 색을 바꾸는 처리를 넣었더니, 단계가 넘어갈 때
   네모 색이 달라지는 게 눈에 걸렸다. 로딩 중임은 아래 sp3Blink 흐려짐만으로 표현한다. */
.sp3-sk, .sp3-cards > i {
  border-radius: 5px; background: #E9EFF9;
  animation: sp3Blink 9s ease-in-out infinite;
}
.sp3-hero { height: 34px; }
.sp3-l1 { height: 8px; width: 72%; }
.sp3-l2 { height: 8px; width: 48%; }
.sp3-cards { display: flex; gap: 7px; }
.sp3-cards > i { flex: 1; height: 30px; }
/* 블록마다 흐려지는 시점을 살짝 밀어 한 덩어리로 안 보이게 한다 */
.sp3-l1 { animation-delay: .08s; }
.sp3-l2 { animation-delay: .16s; }
.sp3-cards > i:nth-child(1) { animation-delay: .1s; }
.sp3-cards > i:nth-child(2) { animation-delay: .18s; }
.sp3-cards > i:nth-child(3) { animation-delay: .25s; }

/* 스캔선 — 33~58% 구간에 위에서 아래로 훑는다 */
.sp3-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 30px; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0) 0%, rgba(var(--brand-rgb), .16) 70%, rgba(var(--brand-rgb), .5) 100%);
  border-bottom: 2px solid var(--brand);
  animation: sp3Scan 9s ease-in-out infinite;
}
/* 단계 라벨 — 스켈레톤 위에 겹치므로 반투명 배경으로는 글자가 묻힌다.
   불투명 흰 알약 + 테두리 + 그림자로 띄워서 스켈레톤과 분리한다. */
.sp3-stage {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
  border-radius: 999px; padding: 7px 14px; opacity: 0;
  background: #fff; box-shadow: 0 3px 12px rgba(15, 10, 30, .14);
}
.sp3-st1 { color: var(--dark); border: 1px solid var(--border); animation: sp3St1 9s ease-in-out infinite; }
.sp3-st2 { color: var(--brand-dark); border: 1.5px solid var(--brand); animation: sp3St2 9s ease-in-out infinite; }
.sp3-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #D5DEEE; border-top-color: var(--brand); animation: sp3Spin .8s linear infinite; }

/* 결과 카드 — 60% 부터 브라우저 창을 덮으며 올라온다 */
/* 결과는 브라우저 창 안에 갇히지 않는다 — 흰 카드 틀을 벗고 인포그래픽 영역을 그대로 쓴다.
   창 안에 넣으면 '측정 화면의 일부'로 읽히는데, 이건 측정이 끝난 뒤의 결론이다.
   대신 창은 이 시점에 사라진다 (sp3Win 에서 함께 페이드아웃). */
.sp3-result {
  position: absolute; inset: 0; opacity: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  animation: sp3Res 9s ease-in-out infinite;
}
.sp3-rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sp3-rtitle { font-size: 12.5px; font-weight: 800; color: var(--dark); }
.sp3-rtitle em { display: block; margin-top: 3px; font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--muted); }
.sp3-grade { flex: none; font-size: 9.5px; font-weight: 800; color: #C2410C; background: #FEF3E2; border-radius: 999px; padding: 4px 9px; }
.sp3-rbody { flex: 1; display: flex; align-items: center; gap: 16px; }

/* 종합 점수 도넛 — 링은 stroke-dashoffset 으로 채운다.
   conic-gradient 로 하면 각도를 애니메이션하려고 @property 를 써야 해서 지원 폭이 좁다. */
.sp3-gauge { position: relative; width: 96px; height: 96px; flex: none; }
.sp3-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sp3-gtrack, .sp3-gfill { fill: none; stroke-width: 8; }
.sp3-gtrack { stroke: #E9EFF9; }
.sp3-gfill {
  stroke: #F59E0B; stroke-linecap: round;
  /* 반지름 33 → 원주 207.3. 57점이면 남는 길이가 207.3 × 0.43 = 89.1 */
  stroke-dasharray: 207.3; stroke-dashoffset: 207.3;
  animation: sp3Ring 9s ease-out infinite;
}
.sp3-gnum {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 900; color: var(--dark); line-height: 1; letter-spacing: -.03em;
  opacity: 0; animation: sp3Num 9s ease-out infinite;
}
.sp3-gnum i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); margin: 6px 0 0 1px; }

/* 문제 요약 — 긴 막대 3줄은 빈 트랙만 넓어 허전해 보였다. 건수 타일로 바꿔 한눈에 읽히게 */
.sp3-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.sp3-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp3-tile {
  border-radius: 10px; padding: 9px 4px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  opacity: 0; animation: sp3Tile 9s ease-out infinite;
}
.sp3-tlb { font-size: 9.5px; font-weight: 800; }
.sp3-tnum { font-size: 20px; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; }
.sp3-tnum i { font-style: normal; font-size: 9.5px; font-weight: 800; opacity: .75; margin-left: 1px; }
.sp3-crit { background: #FEF2F2; }
.sp3-crit .sp3-tlb { color: #E0313B; } .sp3-crit .sp3-tnum { color: #C81E27; }
.sp3-warn { background: #FEF6E7; animation-delay: .12s; }
.sp3-warn .sp3-tlb { color: #D98200; } .sp3-warn .sp3-tnum { color: #B36A00; }
.sp3-good { background: #E9F9F2; animation-delay: .24s; }
.sp3-good .sp3-tlb { color: #0E9F6E; } .sp3-good .sp3-tnum { color: #0A7D57; }

/* 조치 시 예상 개선치 */
.sp3-gain {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; opacity: 0;
  background: rgba(var(--brand-rgb), .07); border-radius: 9px; padding: 7px 9px;
  animation: sp3Cause 9s ease-out infinite;
}
.sp3-glb { font-size: 9.5px; font-weight: 700; color: var(--muted); }
.sp3-gain b { font-size: 11px; font-weight: 900; color: var(--brand-dark); }
.sp3-gdot { font-size: 10px; font-weight: 900; color: var(--brand-mid); }

/* 로딩 구간에서만 두 번 천천히 숨 쉬듯 흐려지고 그 뒤로는 불투명하게 고정.
   깜빡임 횟수를 늘리거나 더 투명하게 하면 눈이 따라가느라 난잡해진다 (3회 × 0.42 는 과했음).
   마지막 흐려짐을 22%(2초)에 끝내는 이유: 블록 지연이 최대 0.25초라 2 + 0.25 = 2.25초,
   로딩이 끝나는 2.7초 전에 모두 멈춘다. */
@keyframes sp3Blink {
  0% { opacity: 1; }
  6% { opacity: .72; }
  12% { opacity: 1; }
  18% { opacity: .72; }
  22%, 100% { opacity: 1; }
}
/* 창은 결과가 뜨는 시점에 물러난다 — 결과가 카드 틀 없이 얹히므로
   창이 남아 있으면 스켈레톤이 결과 글자 뒤로 비친다 */
@keyframes sp3Win {
  0%, 57% { opacity: 1; transform: scale(1); }
  63%, 96% { opacity: 0; transform: scale(.97); }
  99%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes sp3Scan {
  0%, 32% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(0); }
  55% { opacity: 1; transform: translateY(102px); }
  58%, 100% { opacity: 0; transform: translateY(102px); }
}
@keyframes sp3St1 {
  0%, 4% { opacity: 0; }
  8%, 26% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
@keyframes sp3St2 {
  0%, 33% { opacity: 0; }
  37%, 54% { opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes sp3Res {
  0%, 58% { opacity: 0; transform: translateY(10px); }
  64%, 94% { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes sp3Tile {
  0%, 66% { opacity: 0; transform: translateY(6px); }
  76%, 94% { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes sp3Ring {
  0%, 64% { stroke-dashoffset: 207.3; }
  82%, 94% { stroke-dashoffset: 89.1; }
  99%, 100% { stroke-dashoffset: 207.3; }
}
@keyframes sp3Num {
  0%, 66% { opacity: 0; }
  74%, 94% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes sp3Cause {
  0%, 78% { opacity: 0; }
  84%, 94% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes sp3Spin { to { transform: rotate(360deg); } }

/* 움직임 최소화 설정에서는 결과 화면만 고정 노출 (측정 과정은 생략) */
@media (prefers-reduced-motion: reduce) {
  .sp3-win, .sp3-sk, .sp3-cards > i, .sp3-scan, .sp3-stage, .sp3-spin { animation: none !important; }
  .sp3-win { display: none !important; }  /* 결과만 고정 노출하므로 창은 감춘다 */
  .sp3-sk, .sp3-cards > i { opacity: 1 !important; }
  .sp3-scan, .sp3-stage { display: none !important; }
  .sp3-result { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sp3-tile { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sp3-gfill { animation: none !important; stroke-dashoffset: 89.1 !important; }
  .sp3-gnum, .sp3-gain { animation: none !important; opacity: 1 !important; }
}

/* ---------- 인스타킷 — 4단계 화면 전환 ----------
   ① 계정 연동 ② 피드 수집 ③ 쇼핑몰 노출 ④ 사진 클릭 → 연결 상품.
   한 사이클 12초. 화면 네 장을 같은 자리에 겹쳐 두고 구간별로 교차 페이드한다.
   단계마다 화면을 통째로 쓰는 이유: 한 목업 안에서 다 보여주려니 요소가 작아지고
   무엇이 달라졌는지 안 읽혔다. */
.in3 { position: relative; width: 100%; }
.in3-screen { position: relative; height: 254px; }  /* ③ 쇼핑몰 목업이 가장 높다 — 그 높이에 맞춘다 */
.in3-sc { position: absolute; inset: 0; opacity: 0; display: flex; align-items: center; justify-content: center; }
.in3-sc1 { animation: in3S1 10s ease-in-out infinite; }
.in3-sc2 { animation: in3S2 10s ease-in-out infinite; }
.in3-sc3 { animation: in3S3 10s ease-in-out infinite; }
.in3-sc4 { animation: in3S4 10s ease-in-out infinite; }

/* ① 계정 연동 — 화면 하나를 크게 쓴다 */
.in3-linkcard {
  display: flex; align-items: center; gap: 13px; white-space: nowrap;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 15px 17px; box-shadow: 0 10px 26px rgba(15, 10, 30, .13);
}
/* 인스타 계정 프로필 — 그라디언트 링(인스타) 안에 셀킷 로고(우리 몰).
   링만 인스타 색을 쓰고 안은 흰 원 — 로고를 그라디언트 위에 바로 얹으면 대비가 죽는다. */
.in3-ava {
  width: 42px; height: 42px; flex: none; border-radius: 50%; padding: 2.5px;
  background: linear-gradient(135deg, #8A3AB9, #E1306C 55%, #FCAF45);
}
.in3-ava img {
  width: 100%; height: 100%; display: block; border-radius: 50%;
  background: #fff; object-fit: contain; padding: 4px;
}
.in3-acc { display: flex; flex-direction: column; gap: 3px; }
.in3-acc b { font-size: 15px; font-weight: 900; color: var(--dark); letter-spacing: -.02em; }
.in3-acc em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); }
/* 문구를 즉시 갈아끼우면 툭 끊긴다. 두 문구를 겹쳐 두고 0.24초 교차 페이드 + 색도 함께 넘긴다 */
.in3-btn {
  position: relative; flex: none; display: grid; place-items: center;
  min-width: 84px; height: 32px; border-radius: 9px;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--brand);
  animation: in3Btn 10s ease-out infinite;
}
.in3-btn-t1, .in3-btn-t2 { grid-area: 1 / 1; white-space: nowrap; }
.in3-btn-t1 { animation: in3BtnA 10s ease-in-out infinite; }
.in3-btn-t2 { opacity: 0; animation: in3BtnB 10s ease-in-out infinite; }

/* ② 피드 수집 — 흰 카드 틀 없이 인포그래픽 영역을 그대로 쓴다.
   여기는 화면 하나를 보여주는 게 아니라 진행 상태라, 창 틀을 두르면 ③ 쇼핑몰 목업과
   같은 무게로 읽혀 무엇이 화면이고 무엇이 과정인지 흐려진다. */
.in3-fetch { width: 100%; }
.in3-fhead { display: flex; align-items: center; justify-content: space-between; }
.in3-ftitle { font-size: 12.5px; font-weight: 800; color: var(--dark); }
.in3-fcnt { font-size: 10.5px; font-weight: 800; color: var(--brand); }
.in3-ftrack { margin-top: 9px; height: 6px; border-radius: 4px; background: #EDF1F9; overflow: hidden; }
.in3-ftrack > i { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--brand); animation: in3Fetch 10s ease-out infinite; }
.in3-fgrid { margin-top: 11px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.in3-ft {
  height: 58px; border-radius: 7px; overflow: hidden; background: #EDF1F9;
  opacity: 0; transform: scale(.9); animation: in3Ft 10s ease-out infinite;
}
.in3-ft img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 9장이 0.12초 간격으로 차례로 들어온다 — 한꺼번에 뜨면 '수집'이 아니라 그냥 목록으로 읽힌다 */
.in3-ft:nth-child(2) { animation-delay: .1s; }
.in3-ft:nth-child(3) { animation-delay: .2s; }
.in3-ft:nth-child(4) { animation-delay: .4s; }
.in3-ft:nth-child(5) { animation-delay: .4s; }
.in3-ft:nth-child(6) { animation-delay: .5s; }
.in3-ft:nth-child(7) { animation-delay: .8s; }
.in3-ft:nth-child(8) { animation-delay: .7s; }
.in3-ft:nth-child(9) { animation-delay: .8s; }

/* ③ 쇼핑몰에 피드 노출 */
.in3-shop {
  width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; box-shadow: 0 6px 18px rgba(15, 10, 30, .07);
}
/* 브라우저 크롬 — 속도분석킷(sp3-bar)과 같은 형태로 맞춘다.
   두 킷이 같은 '쇼핑몰 화면'을 보여주는데 상단바 모양이 다르면 다른 화면으로 읽힌다. */
.in3-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-subtle);
}
.in3-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #D5DEEE; }
.in3-url {
  margin-left: 6px; flex: 1; font-size: 10px; font-weight: 700; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px;
}
/* 쇼핑몰 콘텐츠(배너·상품 진열)는 회색 네모로. 여기가 눈에 띄면 피드와 주인공이 바뀐다 */
.in3-body { padding: 12px; }
.in3-banner { height: 26px; border-radius: 6px; background: linear-gradient(100deg, #E7EDF8, #DFE7F5); }
.in3-prow { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.in3-pcell { display: flex; flex-direction: column; gap: 4px; }
.in3-pimg { height: 34px; border-radius: 5px; background: #EDF1F9; }
.in3-pln { height: 4px; border-radius: 2px; background: #E4EAF6; }
.in3-pln.w7 { width: 70%; } .in3-pln.w6 { width: 60%; }
.in3-pln.w4 { width: 40%; } .in3-pln.w3 { width: 32%; }
/* 피드 섹션 — 위 상품 진열과 같은 여백(12px)·같은 열 수·같은 gap 을 써서
   덧붙인 위젯이 아니라 원래 있던 섹션처럼 보이게 한다 */
.in3-sec { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); animation: in3Sec 10s ease-out infinite; }
.in3-head { display: flex; align-items: baseline; justify-content: space-between; }
/* 영문 대문자는 자간을 좁히면 붙어 보인다 — 한글 기준(-.01em)이 아니라 살짝 벌린다 */
.in3-htitle { font-size: 11px; font-weight: 900; color: var(--dark); letter-spacing: .09em; }
.in3-hmore { font-size: 9.5px; font-weight: 700; color: var(--muted); }
/* 피드는 4열 — 위 상품 진열(3열)보다 촘촘해야 '진열'이 아니라 '피드'로 읽힌다.
   열이 하나 늘어 칸이 좁아지므로 높이도 같이 줄여 정사각에 가깝게 맞춘다. */
.in3-grid { margin-top: 9px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.in3-t { position: relative; height: 46px; border-radius: 6px; overflow: hidden; background: #EDF1F9; }
.in3-t img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ③ → ④ 이음 — 피드 사진 하나를 누르는 연출.
   두 장면을 그냥 교차 페이드하면 상세가 어디서 왔는지 안 보인다.
   ③ 이 끝나기 전에 첫 타일이 눌리고, 그 자리에서 ④ 모달이 커지며 열린다. */
.in3-t-tap { animation: in3Press 10s ease-out infinite; }
.in3-ripple {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(15, 10, 30, .18);
  opacity: 0; animation: in3Ripple 10s ease-out infinite;
}
/* ④ 사진 클릭 → 연결된 상품 확인 */
.in3-modal {
  width: 100%; height: 100%; display: flex; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 12px 30px rgba(15, 10, 30, .16);
  animation: in3Modal 10s ease-out infinite;
}
.in3-mphoto { position: relative; flex: 0 0 45%; background: #EDF1F9; }
.in3-mphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.in3-mpin {
  position: absolute; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--brand); box-shadow: 0 2px 8px rgba(15, 10, 30, .3);
  opacity: 0; transform: scale(.4); animation: in3Mpin 10s ease-out infinite;
}
.in3-mp1 { top: 30%; right: 16%; }
.in3-mp2 { top: 62%; left: 14%; animation-delay: .17s; }
.in3-mside { flex: 1; min-width: 0; padding: 11px 12px; display: flex; flex-direction: column; }
.in3-mhead { display: flex; align-items: center; justify-content: space-between; }
.in3-macc { font-size: 12.5px; font-weight: 900; color: var(--dark); }
.in3-mx { font-size: 11px; font-weight: 700; color: #AFB6C7; }
.in3-mdate { margin-top: 2px; font-size: 9.5px; font-weight: 600; color: var(--muted); }
.in3-mlabel { margin-top: 11px; font-size: 9.5px; font-weight: 700; color: var(--muted); }
.in3-mrow {
  margin-top: 7px; display: flex; align-items: center; gap: 8px;
  opacity: 0; animation: in3Mrow 10s ease-out infinite;
}
.in3-mrow:last-of-type { animation-delay: .13s; }
.in3-mth { width: 30px; height: 30px; flex: none; border-radius: 5px; overflow: hidden; background: #EDF1F9; }
.in3-mth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.in3-minfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.in3-minfo b { font-size: 10.5px; font-weight: 800; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in3-minfo em { font-style: normal; font-size: 9px; font-weight: 600; color: var(--muted); }
.in3-mbtn { flex: none; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 6px; padding: 5px 8px; }
.in3-mlink {
  margin-top: auto; text-align: center; font-size: 10px; font-weight: 800; color: var(--brand-dark);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 0;
}

/* 화면 전환 — 구간 사이를 2%(약 0.24초) 겹치지 않게 띄운다 */
@keyframes in3S1 { 0% { opacity: 0; } 2%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes in3S2 { 0%, 22% { opacity: 0; } 25%, 40% { opacity: 1; } 43%, 100% { opacity: 0; } }
/* ③ 은 탭 연출까지 보여준 뒤 사라진다 — ④ 뒤에 목업이 남으면 상세가 배경 위에 얹혀 지저분하다 */
@keyframes in3S3 { 0%, 44% { opacity: 0; } 47%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes in3S4 { 0%, 67% { opacity: 0; } 70%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
/* ① 버튼 — 10~12% 구간(약 0.24초)에 문구·색을 함께 넘긴다 */
@keyframes in3BtnA { 0%, 10% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes in3BtnB { 0%, 10% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes in3Btn {
  0%, 10% { background-color: #0055fb; transform: scale(1); }
  11% { transform: scale(.95); }
  12%, 100% { background-color: #10B981; transform: scale(1); }
}
/* ② 수집 진행바·썸네일 */
@keyframes in3Fetch { 0%, 25% { width: 6%; } 39%, 100% { width: 100%; } }
@keyframes in3Ft {
  0%, 26% { opacity: 0; transform: scale(.9); }
  31%, 100% { opacity: 1; transform: scale(1); }
}
/* ③ 피드 섹션이 쇼핑몰 화면에 붙는 순간 */
@keyframes in3Sec {
  0%, 48% { opacity: 0; transform: translateY(10px); }
  55%, 100% { opacity: 1; transform: translateY(0); }
}
/* ④ 모달·핀·상품행 */
@keyframes in3Modal {
  0%, 68% { transform: scale(.97); }
  72%, 100% { transform: scale(1); }
}
/* 타일이 눌리는 순간 (61~64%) */
@keyframes in3Press {
  0%, 60% { transform: scale(1); }
  62% { transform: scale(.94); }
  65%, 100% { transform: scale(1); }
}
@keyframes in3Ripple {
  0%, 60% { opacity: 0; transform: scale(.4); }
  62% { opacity: .95; transform: scale(1); }
  67%, 100% { opacity: 0; transform: scale(2.1); }
}

@keyframes in3Mpin {
  0%, 71% { opacity: 0; transform: scale(.4); }
  75% { opacity: 1; transform: scale(1.18); }
  78%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes in3Mrow {
  0%, 76% { opacity: 0; transform: translateY(5px); }
  82%, 100% { opacity: 1; transform: translateY(0); }
}

/* 움직임 최소화 — 마지막 화면(④ 연결된 상품)만 고정 노출 */
@media (prefers-reduced-motion: reduce) {
  .in3-sc, .in3-btn, .in3-btn-t1, .in3-btn-t2, .in3-ft, .in3-ftrack > i,
  .in3-sec, .in3-modal, .in3-mpin, .in3-mrow, .in3-t-tap, .in3-ripple { animation: none !important; }
  .in3-ripple { display: none !important; }
  .in3-sc1, .in3-sc2, .in3-sc3 { display: none !important; }
  .in3-sc4 { opacity: 1 !important; }
  .in3-modal { transform: none !important; }
  .in3-mpin { opacity: 1 !important; transform: none !important; }
  .in3-mrow { opacity: 1 !important; transform: none !important; }
}

/* 첫구매킷 — 웰컴 모달 팝업 (인포그래픽 전체 영역) */
/* 인포 박스 자체를 어두운 딤 화면으로 */
.ig-firstbuy { padding: 16px; background: linear-gradient(160deg, #221A3A, #14102A); border-color: transparent; }
.fb-scene { position: relative; width: 100%; flex: 1; align-self: stretch; display: flex; align-items: stretch; justify-content: center; min-height: 232px; }
/* 팝업 카드 — 딤 화면을 꽉 채움 */
.fb-pop {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  background: #fff; border-radius: 14px;
  padding: 24px; box-shadow: 0 14px 34px rgba(10, 6, 25, .28);
}
.fb-x { position: absolute; top: 11px; right: 14px; font-size: 16px; line-height: 1; color: var(--muted); }
.fb-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: var(--brand); background: rgba(var(--brand-rgb), .1); border-radius: 999px; padding: 4px 11px; }
.fb-title { font-size: 20px; font-weight: 800; color: var(--dark); line-height: 1.2; letter-spacing: -.5px; }
.fb-title b { color: var(--brand); }
.fb-sub { font-size: 11.5px; color: var(--body); margin-top: -3px; }
.fb-prods { display: flex; justify-content: center; gap: 12px; margin-top: 1px; }
.fb-prod { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fb-thumb { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(135deg, var(--brand-light), #EAF1FE); border: 1px solid var(--border); margin-bottom: 3px; }
.fb-was { font-size: 9px; color: var(--muted); text-decoration: line-through; }
.fb-now { font-size: 11.5px; font-weight: 800; color: var(--dark); }
.fb-cta { width: 100%; text-align: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 11px; padding: 11px; box-shadow: 0 8px 18px rgba(var(--brand-rgb), .3); margin-top: 3px; }

/* --- 즉시 인식 → 팝업 오픈 (스크롤 진입 시 무한 반복, 6s 사이클) --- */
/* 인식 오버레이 (로그인과 동시에 즉시 인식 — 로딩 아님) */
.fb-detect {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  opacity: 0;
}
.fb-detect-badge {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), #3B7BFF);
  box-shadow: 0 6px 18px rgba(var(--brand-rgb), .5);
  transform-origin: center;
}
.fb-detect-ic { color: #fff; font-size: 24px; font-weight: 900; line-height: 1; }
.fb-detect-line { font-size: 15.5px; font-weight: 700; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.fb-detect-line b { color: #9CC0FF; }
/* 초기(진입 전): 숨김 */
.ig-firstbuy .fb-pop { opacity: 0; transform: scale(.94); transform-origin: center; }
.ig-firstbuy .fb-pop > * { opacity: 0; }
/* 진입 시 무한 반복 애니메이션 부여 */
.kit-row.visible .fb-detect { animation: fb-detect-show 6s ease-in-out infinite; }
.kit-row.visible .fb-detect-badge { animation: fb-badge-pop 6s ease infinite; }
.kit-row.visible .fb-detect-line { animation: fb-line-in 6s ease infinite; }
.kit-row.visible .fb-pop { animation: fb-pop-cycle 6s ease infinite; }
.kit-row.visible .fb-pop > * { animation: fb-item-cycle 6s ease-in-out infinite; }
/* 내부 요소 살짝 스태거 */
.kit-row.visible .fb-title { animation-name: fb-item-cycle2; }
.kit-row.visible .fb-sub { animation-name: fb-sub-in; }
.kit-row.visible .fb-prods { animation-name: fb-item-cycle3; }
.kit-row.visible .fb-cta { animation-name: fb-item-cycle3; }
@keyframes fb-sub-in {
  0%, 38% { opacity: 0; transform: translateY(6px); }
  46% { opacity: 1; transform: none; }
  88% { opacity: 1; }
  92% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes fb-detect-show { 0% { opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 27% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fb-badge-pop {
  0%, 2% { opacity: 0; transform: scale(.3); }
  7% { opacity: 1; transform: scale(1.18); }
  11% { transform: scale(1); }
  22% { opacity: 1; transform: scale(1); }
  27% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fb-line-in {
  0%, 7% { opacity: 0; transform: translateY(6px); }
  12% { opacity: 1; transform: none; }
  22% { opacity: 1; transform: none; }
  27% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fb-pop-cycle {
  0%, 30% { opacity: 0; transform: scale(.94); }
  35% { opacity: 1; transform: scale(1.03); }
  39% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; transform: scale(1); }
  93% { opacity: 0; transform: scale(.97); }
  100% { opacity: 0; transform: scale(.94); }
}
@keyframes fb-item-cycle {
  0%, 34% { opacity: 0; transform: translateY(10px); }
  40% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; }
  92% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 0; }
}
@keyframes fb-item-cycle2 {
  0%, 37% { opacity: 0; transform: translateY(10px); }
  43% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; }
  92% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 0; }
}
@keyframes fb-item-cycle3 {
  0%, 40% { opacity: 0; transform: translateY(10px); }
  46% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; }
  92% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-firstbuy .fb-pop, .ig-firstbuy .fb-pop > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fb-detect { display: none !important; }
}

.kit-more {
  margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg); padding: 28px 34px;
}
.kit-more-label { display: inline-block; font-size: 12px; font-weight: 800; color: var(--brand); letter-spacing: .1em; }
.kit-more-title { font-size: 20px; font-weight: 800; color: var(--dark); letter-spacing: -.3px; margin: 9px 0 6px; }
.kit-more-sub { font-size: 15px; color: var(--muted); line-height: 1.6; }
.kit-more-btn { flex: none; white-space: nowrap; }

/* ============================================================
   5. 작동 방식
   ============================================================ */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-step {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 22px 26px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
@media (hover: hover) and (pointer: fine) {
  .how-step:hover { border-color: var(--brand-mid); box-shadow: 0 10px 32px rgba(var(--brand-rgb), .1); transform: translateY(-4px); }
}
.how-num { display: inline-block; font-size: 13px; font-weight: 800; color: var(--brand); letter-spacing: .12em; }
.how-step h3 { font-size: 20px; font-weight: 800; color: var(--dark); margin: 8px 0 8px; }
.how-step p { font-size: 15px; color: var(--muted); line-height: 1.65; }

.how-dots { display: none; justify-content: center; gap: 8px; margin-top: 20px; }
.how-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--border); cursor: pointer; transition: background .2s, width .2s; }
.how-dot.is-on { background: var(--brand); width: 22px; }

/* HOW IT WORKS 인포그래픽 비주얼 */
.how-viz {
  height: 150px; border-radius: 14px; background: var(--bg-subtle);
  position: relative; overflow: hidden; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
}

/* 01 · 앱 설치 타일 */
.how-tile {
  width: 80%; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(15, 10, 30, .08);
  padding: 13px 15px; display: flex; align-items: center; gap: 11px;
}
.how-tile-icon {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.how-tile-icon img { width: 100%; height: 100%; object-fit: contain; }
.how-tile-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.how-tile-name { font-size: 13px; font-weight: 800; color: var(--dark); }
.how-tile-sub { font-size: 10.5px; color: var(--muted); }
.how-inst-btn {
  position: relative; flex: none; width: 66px; display: inline-grid; align-items: center; justify-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: var(--brand);
  border-radius: 8px; padding: 7px 0;
  animation: howInstBtn 6s ease-in-out infinite;
}
.how-inst-t1, .how-inst-t2 { grid-area: 1 / 1; white-space: nowrap; }
.how-inst-t1 { animation: howInstT1 6s ease-in-out infinite; }
.how-inst-t2 { animation: howInstT2 6s ease-in-out infinite; }
.how-tap {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0;
  animation: howTap 6s ease-in-out infinite;
}
@keyframes howInstBtn {
  0%, 26% { background: var(--brand); transform: scale(1); }
  32% { transform: scale(.88); }
  40%, 92% { background: var(--success); transform: scale(1); }
  100% { background: var(--brand); }
}
@keyframes howInstT1 { 0%, 32% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes howInstT2 { 0%, 32% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes howTap {
  0%, 22% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  28% { opacity: .7; transform: translate(-50%, -50%) scale(.5); }
  40% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
  100% { opacity: 0; }
}

/* 02 · 옵션 설정 토글 */
.how-opts {
  width: 82%; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(15, 10, 30, .08);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 12px;
}
.how-opt { display: flex; align-items: center; gap: 12px; }
.how-opt-bar { height: 8px; border-radius: 4px; background: rgba(var(--brand-rgb), .13); width: 58%; }
.how-opt-bar.short { width: 42%; }
.how-tgl {
  position: relative; flex: none; margin-left: auto; width: 34px; height: 19px; border-radius: 20px; background: #C9D4E8;
  animation: howTglBg 6s ease-in-out infinite;
}
.how-tgl::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  animation: howTglKnob 6s ease-in-out infinite;
}
.how-opt:nth-child(2) .how-tgl, .how-opt:nth-child(2) .how-tgl::after { animation-delay: .4s; }
.how-opt:nth-child(3) .how-tgl, .how-opt:nth-child(3) .how-tgl::after { animation-delay: .8s; }
@keyframes howTglBg { 0%, 6% { background: #C9D4E8; } 16%, 90% { background: var(--brand); } 100% { background: #C9D4E8; } }
@keyframes howTglKnob { 0%, 6% { transform: translateX(0); } 16%, 90% { transform: translateX(15px); } 100% { transform: translateX(0); } }

/* 02 · 스크립트 설치 — 문의 채팅.
   자동 설치가 아니므로 '요청 → 입력 중 → 완료' 세 박자로 보여준다. */
.how-chat {
  width: 84%; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 10, 30, .08);
}
.how-chat-head {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; background: var(--bg-subtle); border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 800; color: var(--dark);
}
.how-chat-av {
  width: 20px; height: 20px; flex: none; border-radius: 50%; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px var(--border);
}
.how-chat-av img { width: 100%; height: 100%; object-fit: contain; padding: 2px; display: block; }
.how-chat-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 7px; }
/* 내가 보낸 말풍선 — 오른쪽, 브랜드 색 */
.how-chat-me {
  align-self: flex-end; max-width: 88%;
  background: var(--brand); color: #fff; border-radius: 10px 10px 3px 10px;
  padding: 7px 10px; font-size: 11px; font-weight: 700;
  opacity: 0; transform: translateY(6px); animation: howChatMe 6s ease-out infinite;
}
/* 상대가 입력 중 — 점 세 개 */
.how-chat-typing {
  align-self: flex-start; display: flex; align-items: center; gap: 3px;
  background: #EEF2FA; border-radius: 10px 10px 10px 3px; padding: 9px 10px;
  opacity: 0; animation: howChatTyping 6s ease-out infinite;
}
.how-chat-typing > i {
  width: 4px; height: 4px; border-radius: 50%; background: #A9B4CC;
  animation: howChatDot 1s ease-in-out infinite;
}
.how-chat-typing > i:nth-child(2) { animation-delay: .16s; }
.how-chat-typing > i:nth-child(3) { animation-delay: .32s; }
/* 답신 — 입력 중이 있던 자리에 겹쳐 나온다 */
.how-chat-you {
  align-self: flex-start; max-width: 88%; margin-top: -33px;
  background: #EEF2FA; color: var(--dark); border-radius: 10px 10px 10px 3px;
  padding: 7px 10px; font-size: 11px; font-weight: 700;
  opacity: 0; transform: translateY(6px); animation: howChatYou 6s ease-out infinite;
}
@keyframes howChatMe {
  0%, 6% { opacity: 0; transform: translateY(6px); }
  16%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes howChatTyping {
  0%, 22% { opacity: 0; }
  30%, 54% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
@keyframes howChatYou {
  0%, 58% { opacity: 0; transform: translateY(6px); }
  68%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes howChatDot {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* 03 · 옵션 설정 → 쇼핑몰 반영. 두 화면을 같은 자리에서 교체한다
   (한 그림에 같이 두면 무엇이 원인이고 무엇이 결과인지 순서가 안 보인다) */
.how-viz-swap .how-opts,
.how-viz-swap .how-shop { position: absolute; left: 9%; right: 9%; width: auto; }
.how-viz-swap .how-opts { animation: howOptsOut 6s ease-in-out infinite; }
/* 저장 알림 — 옵션을 켠 뒤 잠깐 떴다 사라지고, 그다음 반영 화면으로 넘어간다 */
.how-viz-swap .how-save {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--dark); color: #fff; border-radius: 10px; padding: 9px 13px;
  font-size: 11.5px; font-weight: 800; box-shadow: 0 8px 22px rgba(15, 10, 30, .28);
  opacity: 0; animation: howSave 6s ease-in-out infinite;
}
.how-save-ic {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: 9px;
}
.how-viz-swap .how-shop { opacity: 0; animation: howShopIn 6s ease-in-out infinite; }
@keyframes howOptsOut {
  0%, 50% { opacity: 1; transform: translateY(0); }
  58%, 100% { opacity: 0; transform: translateY(-8px); }
}
/* 저장 알림은 옵션 화면이 사라지기 전에 떴다 들어간다 */
@keyframes howSave {
  0%, 32% { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
  38%, 48% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  54%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.98); }
}
@keyframes howShopIn {
  0%, 56% { opacity: 0; transform: translateY(10px); }
  64%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

/* 03 두 번째 화면 — 쇼핑몰 반영 목업 */
.how-shop {
  width: 82%; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(15, 10, 30, .08); overflow: hidden;
}
.how-shop-bar { height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 11px; background: var(--bg-subtle); }
.how-shop-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--brand-rgb), .28); }
.how-shop-prog { height: 3px; background: rgba(var(--brand-rgb), .1); }
.how-shop-prog-fill { display: block; height: 100%; width: 0; background: var(--brand); animation: howProg 6s ease-in-out infinite; }
.how-shop-body { position: relative; padding: 13px 14px 15px; min-height: 62px; }
.how-shop-line { display: block; height: 8px; border-radius: 4px; background: rgba(var(--brand-rgb), .1); margin-bottom: 8px; }
.how-shop-line.short { width: 55%; }
.how-inject {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px;
  background: var(--brand); color: #fff; border-radius: 9px; padding: 8px 10px; font-size: 11.5px; font-weight: 800;
  opacity: 0; transform: translateY(12px) scale(.95);
  animation: howInject 6s ease-in-out infinite;
}
/* 진행바·반영 배지는 두 번째 화면이 뜬 뒤(58%)부터 움직인다 */
@keyframes howProg { 0%, 64% { width: 0; } 80%, 94% { width: 100%; } 100% { width: 0; } }
@keyframes howInject {
  0%, 80% { opacity: 0; transform: translateY(12px) scale(.95); }
  87%, 96% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(12px) scale(.95); }
}

/* ============================================================
   6. 셀킷과 함께라면 (다크)
   ============================================================ */
.promise { background: var(--bg-subtle); padding: 120px 0; }
.promise-head { max-width: 760px; }

.compare {
  display: grid; grid-template-columns: 0.84fr auto 1.18fr; align-items: center;
  gap: 26px; margin: 56px auto 0; max-width: 1000px;
}
.compare-col { border-radius: var(--radius-lg); }
.compare-before {
  padding: 30px 28px; background: var(--bg-subtle); border: 1.5px solid var(--border);
}
.compare-after {
  padding: 40px 38px; position: relative; z-index: 2;
  background: #fff; border: 2px solid var(--brand);
  box-shadow: 0 24px 54px rgba(var(--brand-rgb), .2);
}
.compare-col-head { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.compare-before .compare-col-head { font-size: 12.5px; color: var(--muted); margin-bottom: 20px; }
.compare-after .compare-col-head {
  display: inline-block; font-size: 13px; color: #fff; background: var(--brand);
  padding: 5px 13px; border-radius: 20px; margin-bottom: 24px; letter-spacing: .02em;
}
.compare-col ul { list-style: none; display: flex; flex-direction: column; }
.compare-before ul { gap: 16px; }
.compare-after ul { gap: 20px; }
.compare-col li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.55; }
.compare-ic {
  flex: none; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.compare-ic-x { width: 21px; height: 21px; font-size: 11px; background: rgba(239, 68, 68, .1); color: var(--danger); }
.compare-ic-o { width: 24px; height: 24px; font-size: 13px; background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgba(var(--brand-rgb), .35); }
.compare-before .compare-txt {
  font-size: 14px; color: var(--muted);
  text-decoration: line-through; text-decoration-color: rgba(139, 134, 160, .4);
}
.compare-after .compare-txt { display: block; font-size: 16px; color: var(--body); }
/* 설명은 굵은 문구 아래 줄로 — 세 항목 모양을 같게 맞춘다 */
.compare-after .compare-desc { display: block; margin-top: 4px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.compare-after li strong { color: var(--dark); font-weight: 800; }
.compare-arrow {
  align-self: center; z-index: 3; margin: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(var(--brand-rgb), .35);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800;
}
/* 스크롤 진입 스태거 (부모 .compare 는 트리거만) + 셀킷 박스 강조 */
.compare.reveal { opacity: 1; transform: none; }
.compare-before, .compare-arrow, .compare-after {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.compare.visible .compare-before { opacity: 1; transform: none; transition-delay: 0s; }
.compare.visible .compare-arrow  { opacity: 1; transform: none; transition-delay: .18s; }
.compare.visible .compare-after  { opacity: 1; transform: none; transition-delay: .36s; }
.compare-after { transform: translateY(24px) scale(.94); }
.compare.visible .compare-after { animation: compareGlow 2.8s ease-in-out 1.1s infinite; }
@keyframes compareGlow {
  0%, 100% { transform: none; box-shadow: 0 20px 48px rgba(var(--brand-rgb), .22); }
  50% { transform: scale(1.04); box-shadow: 0 36px 84px rgba(var(--brand-rgb), .62), 0 0 0 5px rgba(var(--brand-rgb), .17); }
}

/* ============================================================
   7. 목적별
   ============================================================ */
/* USE CASE — 좌측 목표 셀렉터 + 우측 킷 패널 */
.usecase { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; align-items: start; }
.usecase-nav { display: flex; flex-direction: column; gap: 10px; }
.usecase-goal {
  position: relative; overflow: hidden;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.usecase-goal-head {
  position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%;
  text-align: left; cursor: pointer; padding: 20px 46px 20px 22px;
  background: none; border: 0;
}
@media (hover: hover) and (pointer: fine) {
  .usecase-goal:not(.is-active):hover { border-color: var(--brand-mid); background: rgba(var(--brand-rgb), .03); }
}
.usecase-goal.is-active { border-color: var(--brand); background: rgba(var(--brand-rgb), .05); box-shadow: 0 10px 28px rgba(var(--brand-rgb), .12); }
.usecase-goal-tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); transition: color .2s; }
.usecase-goal.is-active .usecase-goal-tag { color: var(--brand); }
.usecase-goal-title { font-size: 16px; font-weight: 800; color: var(--dark); letter-spacing: -.3px; }
/* 활성 목표 카드 우측 셰브론 */
.usecase-goal-head::after {
  content: '❯'; position: absolute; top: 50%; right: 22px; transform: translateY(-50%);
  font-size: 15px; font-weight: 800; color: var(--brand);
  opacity: 0; transition: opacity .2s;
}
.usecase-goal.is-active .usecase-goal-head::after { opacity: 1; }
/* PC: 아코디언 본문 숨김(우측 패널 사용) */
.usecase-goal-acc { display: none; }
.usecase-panel {
  background: #fff; border: 1.5px solid var(--brand); border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(var(--brand-rgb), .12);
  padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; align-self: stretch;
}
.usecase-panel.is-in { animation: usecaseIn .35s ease; }
@keyframes usecaseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.purpose-links { display: flex; flex-direction: column; gap: 8px; }
.purpose-link {
  display: flex; align-items: center; gap: 13px; width: 100%; cursor: pointer;
  padding: 15px 16px; border-radius: 14px; border: 0; background: none; text-align: left;
  transition: background .18s;
}
.purpose-link:hover { background: rgba(var(--brand-rgb), .06); }
.kit-chip {
  flex: none; min-width: 116px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--brand); white-space: nowrap;
  background: rgba(var(--brand-rgb), .1); border-radius: 10px; padding: 8px 13px;
  transition: background .18s, color .18s;
}
.kit-chip-ic { display: inline-flex; }
.kit-chip-ic svg { width: 18px; height: 18px; }
.purpose-link:hover .kit-chip { background: var(--brand); color: #fff; }
.kit-chip.soon { color: var(--muted); background: rgba(139, 134, 160, .14); }
.purpose-link:hover .kit-chip.soon { background: rgba(139, 134, 160, .2); color: var(--muted); }
.purpose-benefit { flex: 1; font-size: 15.5px; color: var(--body); line-height: 1.45; }
.purpose-arrow {
  flex: none; font-size: 17px; font-weight: 800; color: var(--muted);
  opacity: .35; transform: translateX(-2px);
  transition: opacity .18s, transform .18s, color .18s;
}
.purpose-link:hover .purpose-arrow { opacity: 1; transform: none; color: var(--brand); }

/* ============================================================
   8. 플랫폼
   ============================================================ */
.platform { background: var(--bg-subtle); }
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.platform-card {
  text-align: center; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 18px 26px; background: #fff;
}
.platform-card.live {
  border-color: var(--brand); border-width: 1.5px;
  background: linear-gradient(180deg, rgba(var(--brand-rgb), .06), #fff 70%);
  animation: platGlow 3s ease-in-out infinite;
}
@keyframes platGlow {
  0%, 100% { box-shadow: 0 12px 30px rgba(var(--brand-rgb), .16); }
  50% { box-shadow: 0 18px 46px rgba(var(--brand-rgb), .4), 0 0 0 4px rgba(var(--brand-rgb), .12); }
}
/* 미지원 플랫폼: 회색 비활성 느낌 */
.platform-card:not(.live) { background: var(--bg-subtle); border-color: var(--border); box-shadow: none; }
.platform-card:not(.live) .platform-name { color: var(--muted); }
.platform-card:not(.live) .platform-logo { opacity: .45; filter: grayscale(1); }
.platform-name { font-size: 19px; font-weight: 800; color: var(--dark); height: 24px; line-height: 24px; margin-bottom: 12px; }
.platform-logo { display: block; height: 22px; width: auto; margin: 1px auto 13px; }
.platform-card .kit-status { display: inline-block; }
.platform-note { text-align: left; margin-top: 32px; font-size: 15px; color: var(--muted); }
.platform-note strong { color: var(--brand); font-weight: 800; }

/* ============================================================
   9. FAQ
   ============================================================ */
/* 킷 랜딩과 동일: 폭 제한 없음, 컨테이너 전체 사용 */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0; background: none; border: 0; text-align: left;
  font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.5;
}
.faq-toggle { font-size: 24px; font-weight: 300; color: var(--muted); line-height: 1; flex-shrink: 0; }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding-bottom .35s ease; }
/* 본문 안내 링크 */
.faq-body a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faq-body a:hover { color: var(--brand-dark); }
.faq-item.open .faq-body { max-height: 400px; padding-bottom: 24px; }
.faq-body p { font-size: 15px; color: var(--muted); line-height: 1.75; }
@media (max-width: 768px) {
  .faq-btn { padding: 20px 0; font-size: 15px; }
  .faq-body p { font-size: 14px; }
}

/* ============================================================
   10. 최종 CTA
   ============================================================ */
.cta-band {
  background:
    radial-gradient(70% 120% at 85% 0%, rgba(92, 155, 245, .35) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius: 22px; text-align: center;
  padding: 80px 32px; color: #fff; position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.cta-band:hover { transform: scale(1.02); box-shadow: 0 30px 70px rgba(var(--brand-rgb), .35); }

/* 트렌디 샤인 ①: 부드럽게 번지는 대각선 글레어가 천천히 스윕 */
.cta-band::before {
  content: ''; position: absolute; top: -60%; left: -60%; width: 45%; height: 220%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, .10) 30%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, .10) 70%,
    transparent 100%);
  filter: blur(16px); transform: rotate(18deg); pointer-events: none;
  animation: cta-sheen 4s cubic-bezier(.5, 0, .15, 1) infinite;
}
/* 트렌디 샤인 ②: 은은한 컬러 광원이 배경에서 서서히 떠다님 */
.cta-band::after {
  content: ''; position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(38% 50% at 22% 28%, rgba(150, 190, 255, .45), transparent 70%),
    radial-gradient(34% 46% at 82% 76%, rgba(120, 90, 255, .30), transparent 70%);
  mix-blend-mode: screen; filter: blur(6px);
  animation: cta-drift 9s ease-in-out infinite alternate;
}
.cta-band > * { position: relative; z-index: 1; }
@keyframes cta-sheen {
  0% { left: -60%; }
  62%, 100% { left: 125%; }
}
@keyframes cta-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(36px, -26px) scale(1.08); }
}
.cta-band h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 800; line-height: 1.3; letter-spacing: -1px; }
.cta-band p { margin: 18px auto 0; max-width: 480px; font-size: 16.5px; opacity: .85; }
.cta-band .hero-cta { margin-top: 36px; }
.cta-br { display: none; } /* CTA 타이틀 줄바꿈: 모바일에서만 노출 */
@media (prefers-reduced-motion: reduce) {
  .cta-band::before, .cta-band::after { animation: none; }
  .cta-band::before { display: none; }
}

/* ============================================================
   푸터
   ============================================================ */
.sk-footer { background: var(--dark); color: rgba(255, 255, 255, .68); font-size: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.sk-footer-inner { max-width: 1180px; margin: 0 auto; padding: 64px 40px 40px; }
.sk-footer-top {
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sk-footer-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-top: 16px;
}
.sk-footer-logo {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 21px; font-weight: 900; color: #fff; letter-spacing: -0.04em;
}
.sk-footer-logo img { height: 50px; width: auto; object-fit: contain; margin: -6px 0; }
.sk-footer-logo span { color: var(--brand-mid); }
.sk-footer-brand p { margin-top: 12px; line-height: 1.7; white-space: nowrap; }
.sk-footer-policy { display: flex; align-items: center; gap: 10px; }
.sk-footer-policy a {
  color: rgba(255, 255, 255, .82); background: none; border: 0;
  font-size: 13.5px; font-weight: 700; padding: 0; transition: color .15s;
}
.sk-footer-policy a:hover { color: #fff; }
.sk-footer-policy-sep { color: rgba(255, 255, 255, .3); }
.sk-footer-biz { padding: 32px 0 0; line-height: 1.9; }
.sk-footer-copy { margin-top: 20px; font-size: 12.5px; color: rgba(255, 255, 255, .38); }

/* ============================================================
   도입 문의
   ============================================================ */
.contact-page {
  padding: calc(var(--header-h) + 72px) 0 110px;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, #fff 320px);
}
.contact-wrap { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.contact-head { text-align: center; margin-bottom: 46px; }
.contact-head h1 { font-size: clamp(30px, 4.6vw, 42px); font-weight: 900; color: var(--dark); letter-spacing: -0.02em; }
.contact-head p { margin-top: 14px; color: var(--muted); font-size: 16px; }

.contact-form {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 44px 40px; box-shadow: 0 20px 60px rgba(15, 10, 30, .06);
  display: grid; gap: 24px;
}
.form-field label { display: block; font-size: 14.5px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.form-field label .req { color: var(--danger); margin-left: 2px; }
.form-field label .opt-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-left: 4px; }

/* 문의할 킷 다중선택 칩 — 개수가 늘면 여러 줄로 흐른다 */
/* 칩을 한 줄에 몰아넣지 않는다. grid-auto-flow: column 이면 칩이 몇 개든 한 행에 깔리는데,
   칩마다 white-space: nowrap 이라 줄일 수가 없어 폼 그리드 열이 통째로 카드 밖으로 밀린다
   (입력칸·동의박스·버튼까지 전부 카드 오른쪽으로 삐져나옴). */
.kit-select { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-sel-chip {
  font-family: inherit; cursor: pointer; text-align: center; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: var(--body);
  background: #fff; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 9px 10px; transition: border-color .15s, background .15s, color .15s;
}
.kit-sel-chip:hover { border-color: var(--brand-mid); }
.kit-sel-chip.is-sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.kit-sel-all { font-weight: 800; color: var(--brand); border-style: dashed; border-color: var(--brand-mid); }
.kit-sel-all.is-sel { background: var(--brand); border-style: solid; color: #fff; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: inherit; font-size: 15.5px; color: var(--dark);
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 13px 16px; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-field textarea { min-height: 150px; resize: none; line-height: 1.6; }
.form-field input:focus, .form-field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #B9B4CC; }
.field-error { display: none; margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--danger); }
.form-field.has-error .field-error { display: block; }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error .cat-trigger { border-color: var(--danger); }

/* 문의 내용 글자수 카운터 */
.char-count { margin-top: 6px; text-align: right; font-size: 12px; font-weight: 700; color: var(--muted); }
.char-count.is-full { color: var(--danger); }

/* 문의 카테고리 — 커스텀 드롭다운 */
.cat-dd { position: relative; }
.cat-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: inherit; font-size: 15.5px; color: var(--muted); text-align: left; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 16px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.cat-trigger.has-value { color: var(--dark); }
.cat-trigger:hover { border-color: var(--brand-mid); }
.cat-dd.open .cat-trigger { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.cat-arrow { color: var(--muted); flex: none; transition: transform .2s ease; }
.cat-dd.open .cat-arrow { transform: rotate(180deg); }
.cat-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 40px rgba(15, 10, 30, .14);
  list-style: none; margin: 0;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.cat-dd.open .cat-menu { opacity: 1; transform: none; pointer-events: auto; }
.cat-opt {
  font-size: 14.5px; font-weight: 600; color: var(--body); border-radius: 8px;
  padding: 11px 12px; cursor: pointer; transition: background .12s, color .12s;
}
.cat-opt:hover { background: var(--bg-subtle); color: var(--dark); }
.cat-opt.is-active { background: rgba(var(--brand-rgb), .1); color: var(--brand); font-weight: 800; }

/* 동의 영역 */
.consent-box { background: var(--bg-subtle); border-radius: var(--radius); padding: 20px 22px; }
.consent-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.consent-row input[type="checkbox"] {
  width: 19px; height: 19px; accent-color: var(--brand); flex: none; cursor: pointer;
}
.consent-row label { font-size: 14.5px; color: var(--body); cursor: pointer; flex: 1; }
.consent-row.all { border-bottom: 1px solid var(--border); padding-bottom: 13px; margin-bottom: 7px; }
.consent-row.all label { font-weight: 800; color: var(--dark); }
.consent-view { background: none; border: 0; font-size: 13px; color: var(--muted); text-decoration: underline; }
.consent-error { display: none; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--danger); }
.consent-box.has-error .consent-error { display: block; }

.contact-form .btn { width: 100%; }
.form-global-error { display: none; text-align: center; font-size: 14px; font-weight: 700; color: var(--danger); }

/* 접수 완료 */
.form-success {
  text-align: center; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 80px 40px;
  box-shadow: 0 20px 60px rgba(15, 10, 30, .06);
}
.form-success .check {
  width: 74px; height: 74px; margin: 0 auto 24px; border-radius: 50%;
  background: #E7F8F1; color: var(--success); font-size: 34px;
  display: flex; align-items: center; justify-content: center;
}
.form-success h2 { font-size: 26px; font-weight: 900; color: var(--dark); margin-bottom: 12px; }
.form-success p { color: var(--muted); font-size: 15.5px; }
.form-success .btn { margin-top: 32px; }

/* ============================================================
   법적 고지 (이용약관 / 개인정보처리방침)
   ============================================================ */
.legal {
  padding: calc(var(--header-h) + 64px) 0 110px;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, #fff 280px);
}
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.legal-eyebrow {
  display: inline-block; color: var(--brand);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px;
}
.legal h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; color: var(--dark); letter-spacing: -1px; }
.legal-updated { margin-top: 12px; font-size: 14px; color: var(--muted); }
.legal-intro { margin-top: 24px; font-size: 15.5px; color: var(--body); line-height: 1.85; }
.legal-article { margin-top: 40px; }
.legal-article h2 { font-size: 19px; font-weight: 800; color: var(--dark); margin-bottom: 12px; letter-spacing: -0.3px; }
.legal-article p { font-size: 15px; color: var(--body); line-height: 1.85; margin-bottom: 10px; }
.legal-article ul, .legal-article ol { margin: 8px 0 12px; padding-left: 20px; }
.legal-article li { font-size: 15px; color: var(--body); line-height: 1.85; margin-bottom: 4px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0 8px; font-size: 14.5px; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 12px 14px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--bg-subtle); font-weight: 700; color: var(--dark); white-space: nowrap; }
.legal-table td { color: var(--body); }
.legal-note {
  margin-top: 44px; padding: 20px 22px; background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: var(--radius); font-size: 13.5px; color: var(--muted); line-height: 1.8;
}

/* 법적 고지 모달 */
.legal-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 10, 30, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
}
.legal-modal.open { opacity: 1; visibility: visible; }
.legal-modal-box {
  width: 100%; max-width: 680px; max-height: 84vh; background: #fff;
  border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 10, 30, .3);
  transform: translateY(12px) scale(.98); transition: transform .22s ease;
}
.legal-modal.open .legal-modal-box { transform: none; }
.legal-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; border-bottom: 1px solid var(--border); flex: none;
}
.legal-modal-head h2 { font-size: 20px; font-weight: 800; color: var(--dark); letter-spacing: -0.3px; }
.legal-modal-close {
  width: 38px; height: 38px; border: 0; background: var(--bg-subtle); border-radius: 10px;
  font-size: 24px; line-height: 1; color: var(--muted); flex: none; transition: background .15s, color .15s;
}
.legal-modal-close:hover { background: var(--border); color: var(--dark); }
.legal-modal-body { padding: 24px 26px 30px; overflow-y: auto; }
.legal-modal-body .legal-updated { margin-top: 0; }
.legal-modal-body .legal-article { margin-top: 26px; }
.legal-modal-body .legal-article:first-of-type { margin-top: 20px; }
.legal-modal-body .legal-article h2 { font-size: 16.5px; }
.legal-modal-body .legal-note { margin-top: 30px; }

/* ============================================================
   반응형
   ============================================================ */
/* 셀킷과 함께라면: 1018px 이하부터 2단 대신 정돈된 세로 스택 (설명 접고 핵심 문구 중심) */
@media (max-width: 1018px) {
  .compare { grid-template-columns: 1fr; gap: 12px; max-width: 460px; margin: 26px auto 0; }
  .compare-col { border-radius: var(--radius); text-align: center; }
  .compare-before { padding: 22px 20px; }
  .compare-after { padding: 26px 22px; box-shadow: 0 14px 34px rgba(var(--brand-rgb), .16); }
  .compare-before .compare-col-head { margin-bottom: 14px; }
  .compare-after .compare-col-head { margin-bottom: 18px; }
  .compare-before ul { gap: 13px; }
  .compare-after ul { gap: 14px; }
  .compare-col ul { width: fit-content; margin-left: auto; margin-right: auto; align-items: flex-start; }
  .compare-col li { justify-content: flex-start; text-align: left; }
  .compare-after .compare-desc { display: none; }
  .compare-before .compare-txt { font-size: 14px; }
  .compare-after .compare-txt { font-size: 15.5px; }
  .compare-arrow { justify-self: center; margin: -24px 0; transform: translateY(18px) rotate(90deg); }
  .compare.visible .compare-arrow { transform: rotate(90deg); }
  .compare.visible .compare-after { animation: none; }
}

@media (max-width: 960px) {
  section { padding: 80px 0; }
  .pain-grid { grid-template-columns: 1fr; }
  /* 모바일: 섹션헤드↔콘텐츠 여백 축소 (헤드 여백만으로 간격 통일) */
  .section-head { margin-bottom: 26px; }
  /* USE CASE 모바일(A): 목표별 섹션을 전부 펼쳐 나열 (아코디언 없음) */
  .usecase { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
  .usecase-nav { gap: 12px; }
  .usecase-panel { display: none; }
  .usecase-goal, .usecase-goal.is-active { background: #fff; border-color: var(--border); box-shadow: none; }
  .usecase-goal-head { flex-direction: row; align-items: center; gap: 10px; padding: 15px 18px 8px; cursor: default; }
  .usecase-goal-title { order: 1; flex: 1; font-size: 17px; }
  .usecase-goal-tag {
    order: 2; margin-left: auto; font-size: 10px; letter-spacing: .06em;
    color: var(--brand); background: rgba(var(--brand-rgb), .1); padding: 4px 9px; border-radius: 6px;
  }
  .usecase-goal-head::after { display: none; }
  /* 킷 리스트 항상 노출 (타이틀 좌측 18px과 정렬: acc 6 + link 12) */
  .usecase-goal-acc { display: flex; flex-direction: column; gap: 4px; padding: 0 6px 8px; }
  .usecase-goal-acc .purpose-link { padding: 11px 12px; gap: 10px; }
  .usecase-goal-acc .kit-chip { min-width: 92px; font-size: 12.5px; padding: 7px 10px; gap: 7px; }
  .usecase-goal-acc .kit-chip-ic svg { width: 16px; height: 16px; }
  .usecase-goal-acc .purpose-benefit { font-size: 13.5px; }
  .usecase-goal-acc .purpose-arrow { display: block; opacity: .6; color: var(--brand); transform: none; }
  .how-grid {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; scrollbar-width: none;
  }
  .how-grid::-webkit-scrollbar { display: none; }
  .how-step { flex: 0 0 84%; scroll-snap-align: center; }
  /* 가로 캐러셀: 뷰포트 밖 카드가 스와이프 시 뒤늦게 페이드인되는 것 방지 */
  .how-step.reveal { opacity: 1; transform: none; transition: none; }
  .how-dots { display: flex; }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .platform-note { font-size: 13px; }
  /* 킷 카드: 세로 스택 — 이름 → 인포그래픽 → 설명·포인트 → 자세히보기 (모든 카드 통일) */
  .kit-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 32px 30px; min-width: 0; text-align: left; }
  .kit-content { display: contents; }
  .kit-foot { display: contents; } /* 칩·버튼을 개별 항목으로 분리 */
  .kit-head { order: 0; margin-bottom: 0; }
  .kit-chips { order: 1; margin-top: 12px; } /* 태그: 서브 아래 · 인포 위 */
  .kit-visual { order: 2; margin-top: 14px; min-width: 0; }
  .kit-row:nth-child(even) .kit-visual { order: 2; } /* 지그재그 해제 */
  .kit-desc { order: 3; margin-top: 18px; }
  .kit-points { order: 4; }
  .kit-go { order: 5; margin-top: 22px; justify-content: center; text-align: center; padding: 13px; border-radius: 12px; background: rgba(var(--brand-rgb), .08); }
  .kit-row.is-coming .kit-go { background: var(--bg-subtle); }
}
@media (max-width: 600px) {
  section { padding: 64px 0; }
  /* 좁은 화면 좌우 여백 축소 (킷 페이지와 동일) */
  .container, .sk-header-inner, .sk-footer-inner { padding-left: 24px; padding-right: 24px; }
  /* 모바일은 헤더에 로고만 남아 54px 이 과하게 커 보인다 */
  .sk-logo img { height: 46px; margin: -4px 0; }
  /* 카페24는 풀폭 강조, 나머지는 아래 작은 3열 */
  .platform-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .platform-card.live { grid-column: 1 / -1; }
  .platform-card:not(.live) { padding: 16px 8px 14px; }
  .platform-card:not(.live) .platform-name { font-size: 14px; height: auto; line-height: 1.3; margin-bottom: 8px; }
  .platform-card:not(.live) .kit-status { font-size: 11px; padding: 3px 8px; }
  /* NEXT KIT: 세로 스택 + 버튼 풀폭 */
  .kit-more { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 22px; }
  .kit-more-btn { width: 100%; }
  .hero-cta .btn { width: 100%; }
  .hero .hero-cta .btn { min-width: 0; }
  .hero-visual { max-width: 360px; margin-top: 60px; }
  .kit-desc br { display: none; }
  /* 모바일: 킷 카드 압축 (배치·버튼 스타일은 ≤960 공통 규칙 사용) */
  .kit-row { padding: 20px 18px; }
  .kit-name-row h3 { font-size: 20px; }
  .kit-desc { font-size: 14px; }
  .kit-points { margin-top: 12px; gap: 5px; }
  .kit-points li { font-size: 13px; }
  .kit-chips { flex-wrap: wrap; margin-top: 10px; }
  .kit-head { margin-bottom: 0; }
  .kit-tagline { margin-bottom: 4px; }
  .kit-visual { margin-top: 12px; min-height: 0; padding: 12px 10px; }

  /* 인스타킷 ④ 상세 모달 — 모바일도 PC와 같은 좌우 배치를 유지한다.
     좁은 폭에서 그대로 두면 상품명이 잘리므로, 모달 높이를 내용에 맞추고(세로 여백 회수)
     사진 비율·글자·버튼을 한 단계씩 줄여 오른쪽 칸을 확보한다. */
  /* 내용 높이(169px)만 쓰면 화면 칸(254px) 안에서 상세가 작아 보인다 — 최소 높이를 준다 */
  .in3-modal { height: auto; min-height: 214px; max-height: 100%; }
  /* min-height:0 없이는 사진이 안 줄어든다 — 정사각 이미지의 min-content 높이가 폭만큼 잡힌다 */
  .in3-mphoto { flex: 0 0 42%; min-height: 0; }
  .in3-mside { padding: 9px 9px 9px 10px; }
  .in3-macc { font-size: 11px; }
  .in3-mx { font-size: 10px; }
  .in3-mdate { font-size: 8.5px; }
  .in3-mlabel { margin-top: 8px; font-size: 8.5px; }
  .in3-mrow { margin-top: 6px; gap: 6px; }
  .in3-mth { width: 24px; height: 24px; }
  .in3-minfo b { font-size: 9px; }
  .in3-minfo em { font-size: 8px; white-space: nowrap; }
  .in3-mbtn { font-size: 8.5px; padding: 4px 6px; border-radius: 5px; }
  .in3-mlink { margin-top: auto; font-size: 9px; padding: 5px 0; }

  /* 속도분석킷 결과 카드 — 좁은 폭에서는 내용이 창 높이를 넘겨 카드 밖으로 새어나온다.
     도넛·타일·개선치를 한 단계씩 줄여 창 안에 들어오게 맞춘다. */
  .sp3-page { min-height: 118px; }
  .sp3-result { padding: 10px 11px; gap: 6px; }
  .sp3-rtitle { font-size: 11.5px; }
  .sp3-rtitle em { font-size: 8.5px; }
  .sp3-rbody { gap: 10px; }
  .sp3-gauge { width: 86px; height: 86px; }
  .sp3-gnum { font-size: 25px; }
  .sp3-gnum i { font-size: 10px; margin-top: 5px; }
  .sp3-sum { gap: 6px; }
  .sp3-tile { padding: 5px 2px 6px; border-radius: 8px; }
  .sp3-tlb { font-size: 8.5px; }
  .sp3-tnum { font-size: 15px; }
  .sp3-tnum i { font-size: 8.5px; }
  /* 개선치는 두 줄로 흐르게 둔다 — 세로로 쌓으면 "조치 시"가 혼자 한 줄을 먹어 3줄이 된다.
     가운뎃점만 줄 끝에 남는 걸 막으려고 점은 숨긴다. */
  .sp3-gain { flex-direction: row; flex-wrap: wrap; gap: 2px 6px; padding: 6px 8px; }
  .sp3-gain b { font-size: 10px; }
  .sp3-glb { font-size: 8.5px; }
  .sp3-gdot { display: none; }
  /* PC처럼 가로 2패널 유지 — 폭에 맞춰 축소 */
  .ig-set { flex-direction: row; gap: 6px; }
  .ig-set-panel { padding: 9px 6px; gap: 7px; }
  .ig-set-title { font-size: 10.5px; }
  .ig-set-list { gap: 5px; }
  .ig-set-row { gap: 5px; padding: 5px 6px; border-radius: 8px; }
  .ig-set-th { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
  .ig-set-nm { font-size: 10.5px; }
  .ig-set-free { font-size: 8px; padding: 2px 4px; }
  .ig-set-pr { font-size: 9.5px; }
  .ig-set-result { gap: 3px; }
  .ig-set-rth { width: 27px; height: 27px; font-size: 14px; border-radius: 8px; }
  .ig-set-op { font-size: 11px; }
  .ig-set-flabel { font-size: 9px; }
  .ig-set-badge { font-size: 11.5px; padding: 5px 12px; }
  /* 업셀킷 인포: 모바일은 컴팩트 사이즈로 */
  .up3 { gap: 12px; }
  .up3-prod { padding: 12px 14px; gap: 11px; }
  .up3-thumb { width: 46px; height: 46px; font-size: 24px; border-radius: 11px; }
  .up3-off { width: 30px; height: 30px; font-size: 8px; top: -8px; left: -8px; }
  .up3-name { font-size: 12.5px; }
  .up3-prices b { font-size: 15px; }
  .up3-prices s { font-size: 11px; }
  .up3-add { font-size: 12px; padding: 8px 12px; border-radius: 9px; }
  .up3-plus { font-size: 12px; padding: 2px 8px; right: 14px; }
  .up3-ship { padding: 12px 14px; }
  .up3-ship-top { height: 18px; margin-bottom: 9px; }
  .up3-ship-msg, .up3-ship-done { font-size: 12.5px; }
  .up3-track { height: 8px; }
  /* 리뷰킷 인포: 모바일 컴팩트 (행 높이/간격은 유지 → 스왑 정렬 보존) */
  /* 차단리뷰 접혀도 영역 안 줄고 콘텐츠 가운데 유지 (PC처럼) */
  .ig-review { min-height: 208px; justify-content: center; }
  .rv3 { gap: 10px; }
  .rv3-score { justify-content: center; }
  .rv3-total { margin-left: 8px; }
  .rv3-score b { font-size: 24px; }
  .rv3-stars { font-size: 12px; }
  .rv3-total { font-size: 10.5px; }
  .rv3-av { font-size: 15px; }
  .rv3-mini { font-size: 9px; }
  .rv3-tag { font-size: 8.5px; padding: 3px 7px; }
  /* 첫구매킷 팝업: 좁은 화면 대응 */
  .fb-pop { max-width: 300px; }
  .sk-footer-cols { gap: 40px; flex-wrap: wrap; }
  .contact-form { padding: 32px 22px; }
  .kit-sel-chip { padding: 9px 15px; }

  /* 최종 CTA 밴드 모바일 — 화면 전체 폭으로 풀블리드 */
  .cta { padding: 0; }
  .cta .container { max-width: none; padding: 0; }
  .cta-band { border-radius: 0; padding: 56px 24px; }
  .cta-band h2 { font-size: 24px; line-height: 1.35; }
  .cta-br { display: inline; }                     /* 타이틀 2줄 노출 */
  .cta-band p { font-size: 14.5px; line-height: 1.7; margin-top: 14px; }
  .cta-band p br { display: none; }               /* 서브 강제 줄바꿈 해제 → 자연스럽게 흐름 */
  /* 서브는 '맡습니다.' 뒤에서 끊는다 (문장 단위로 줄이 나뉘게) */
  .cta-band p .cta-sub-l1, .cta-band p .cta-sub-l2 { display: block; }
  .cta-band .hero-cta { margin-top: 28px; gap: 10px; }
  .cta-band .btn { width: 100%; padding: 16px 20px; font-size: 15.5px; }
}

/* ============================================================
   초소형 화면 (아이폰 SE·미니 등)
   ============================================================ */
@media (max-width: 400px) {
  /* 인스타킷 ④ 상세 모달 — 좌우 배치를 유지하되 한 단계 더 줄인다.
     360px 에서는 위 600px 값으로도 상품명·옵션이 잘렸다. */
  .in3-mphoto { flex: 0 0 38%; }
  .in3-mside { padding: 8px 8px 8px 9px; }
  .in3-macc { font-size: 10.5px; }
  .in3-mlabel { margin-top: 7px; font-size: 8px; }
  .in3-mrow { margin-top: 5px; gap: 5px; }
  .in3-mth { width: 22px; height: 22px; border-radius: 4px; }
  .in3-minfo b { font-size: 8.5px; }
  .in3-minfo em { font-size: 7.5px; }
  .in3-mbtn { font-size: 8px; padding: 4px 5px; }
  .in3-mlink { margin-top: auto; font-size: 8.5px; padding: 4px 0; }
}