/* ==========================================================================
   /home2 — 메인 페이지 컨셉 드래프트 (스냅푸시 AI flagship 구조)
   ========================================================================== */

/* ─── 1. HERO (밝은 톤 — 색상 단순화) ───────────────────────── */
.hf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  color: #0F172A;
  /* sticky 사이트 헤더 (.nav-bar) 높이만큼 빼서 첫 화면 딱 맞춤 */
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: center;
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 6vw, 80px);
  text-align: center;
  border-bottom: 1px solid #EDF1F6;
}
/* svh 지원 안 되는 구형 브라우저 — vh 폴백 */
@supports not (height: 100svh) {
  .hf-hero { min-height: calc(100vh - var(--header-height)); }
}
/* 중앙 글로우 — 3개 컬러 radial 가 cross-fade 로 순환되어 중심부만 색이 변함.
   접근성 prefers-reduced-motion 가드는 의도적으로 두지 않음 (사용자 요청). */
.hf-hero__glow {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 60% at 50% 25%, rgba(38, 153, 251, 0.22) 0%, transparent 65%),
    radial-gradient(55% 60% at 50% 25%, rgba(167, 139, 250, 0.22) 0%, transparent 65%),
    radial-gradient(55% 60% at 50% 25%, rgba(56, 189, 248, 0.22) 0%, transparent 65%);
  background-blend-mode: screen;
  animation: hfHeroHueShift 10s ease-in-out infinite;
}
@keyframes hfHeroHueShift {
  0%   { filter: hue-rotate(0deg)   saturate(1);    }
  25%  { filter: hue-rotate(-25deg) saturate(1.15); }  /* 시안 쪽 */
  50%  { filter: hue-rotate(0deg)   saturate(1);    }  /* 블루 (기본) */
  75%  { filter: hue-rotate(28deg)  saturate(1.15); }  /* 라일락 쪽 */
  100% { filter: hue-rotate(0deg)   saturate(1);    }
}
.hf-hero__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(closest-side, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 75%);
  pointer-events: none;
  opacity: 0.5;
}
.hf-hero__inner {
  position: relative; z-index: 2;
  width: 100%;            /* flex 행에서 가로 전체 차지 → 내부 max-width 로 중앙 정렬 */
  max-width: 880px;
  margin: 0 auto;
}
.hf-hero__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: #EFF6FF;
  color: #1664A9;
  border: 1px solid #BFD9F6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-bottom: 28px;
}
.hf-hero__title {
  font-size: clamp(36px, 5.4vw, 72px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: #0F172A;
  margin: 0 0 24px;
  word-break: keep-all;
}
/* accent — 그라데이션 → 단색 블루 (사용자 요청: 색상 단순화) */
.hf-hero__accent { color: #2699FB; }
.hf-hero__sub {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.7;
  color: #4B5563;
  letter-spacing: -0.012em;
  margin: 0 0 40px;
}
/* CRM 검색 타이핑창 — 밝은 배경 위 흰 캡슐 + 옅은 푸른 글로우 */
.hf-search {
  width: 100%;
  max-width: 500px;
  margin: 36px auto 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 22px;
  background: #fff;
  border: 1px solid #E2E7EE;
  border-radius: 20px;
  box-shadow:
    0 0 0 4px rgba(38, 153, 251, 0.06),
    0 12px 28px -10px rgba(15, 23, 42, 0.10);
}
.hf-search__icon {
  flex-shrink: 0;
  font-size: 22px;
  color: #94A3B8;
}
.hf-search__input {
  flex: 1;
  min-width: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.012em;
  padding: 12px 0;
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.4em;
}
.hf-search__input::after {
  content: '|';
  display: inline-block;
  margin-left: 0.08em;
  color: #2699FB;
  font-weight: 400;
  animation: hfCaretBlink 1s steps(2) infinite;
}
.hf-search__input.is-typing::after {
  animation: none;
  opacity: 1;
}
@keyframes hfCaretBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.hf-search__send {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: #2699FB;            /* 그라데이션 → 단색 (색상 단순화) */
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(38, 153, 251, 0.45);
}

.hf-hero__scroll {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: #fff;
  border: 1px solid #E2E7EE;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.012em;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.04);
}
.hf-hero__scroll:hover {
  background: #F4F8FF;
  border-color: #BFD9F6;
  transform: translateY(-1px);
}
.hf-hero__scroll i {
  animation: hfScrollBounce 1.8s ease-in-out infinite;
  color: #2699FB;
}
@keyframes hfScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}


/* ─── 2. FLAGSHIP (밝은 톤 — HERO·LINEUP 과 통일) ─────────────────── */
.hf-flag {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #FFFFFF;
  color: #0F172A;
  padding: clamp(80px, 10vw, 140px) 0 clamp(96px, 11vw, 160px);
}
/* 옅은 단일 블루 글로우 — flagship 특별감 유지 */
.hf-flag__bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(38, 153, 251, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
/* 5-step 데모 영역 */
.hf-demo {
  max-width: 1100px;
  margin: 0 auto;
}
.hf-demo__steps {
  list-style: none;
  padding: 8px;
  margin: 0 0 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  display: flex; align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hf-demo__steps::-webkit-scrollbar { display: none; }
.hf-demo__step {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.012em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.22s, color 0.22s;
}
.hf-demo__step:hover { color: rgba(255, 255, 255, 0.85); }
.hf-demo__step.is-active {
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 60%, #A553E5 130%);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(38, 153, 251, 0.55);
}
.hf-demo__step-no {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.hf-demo__step.is-active .hf-demo__step-no { opacity: 0.95; }
.hf-demo__step-arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.30);
  margin-left: 2px;
}

/* 패널 stage — 활성 1개만 보임 */
.hf-demo__stage {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  overflow: hidden;
  min-height: 460px;
  backdrop-filter: blur(8px);
}
.hf-demo__panel {
  position: absolute; inset: 0;
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  pointer-events: none;
}
.hf-demo__panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hf-demo__panel-meta {
  display: flex; align-items: center;
  gap: 18px;
}
.hf-demo__panel-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(160deg, #5BB6FF 0%, #2699FB 60%, #A553E5 130%);
  color: #fff;
  border-radius: 14px;
  letter-spacing: -0.02em;
  box-shadow: 0 12px 28px -10px rgba(38, 153, 251, 0.55);
  flex-shrink: 0;
}
.hf-demo__panel-name {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
}
.hf-demo__panel-caption {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  letter-spacing: -0.012em;
}
.hf-demo__panel-detail {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  letter-spacing: -0.012em;
  max-width: 720px;
  word-break: keep-all;
}
.hf-demo__panel-visual {
  align-self: stretch;
  background:
    linear-gradient(135deg, rgba(38, 153, 251, 0.10) 0%, rgba(165, 83, 229, 0.08) 100%),
    rgba(0, 0, 0, 0.20);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
.hf-demo__placeholder {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.012em;
}
.hf-demo__placeholder i { font-size: 32px; color: rgba(91, 182, 255, 0.55); }

/* Flagship CTA */
.hf-flag__cta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 64px);
}


/* ─── 2-2/2-3. AI 기능 추가 섹션 공통 (.hf-recm / .hf-seg) ─────────────
   상품 추천(recommendation.mp4) · 세그먼트 인사이트(new-segment.mp4) 동일 레이아웃. */
.hf-recm,
.hf-seg {
  padding: clamp(80px, 9vw, 130px) 0;
  background: #fff;
  border-top: 1px solid #EDF1F6;
}
/* 세그먼트 섹션은 옅은 톤으로 — 시각적 변주 */
.hf-seg {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.hf-recm__inner,
.hf-seg__inner {
  max-width: 1500px;                  /* 영상 1.5배 확장 수용 */
  display: flex; flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}
.hf-recm__head,
.hf-seg__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.hf-recm__eyebrow,
.hf-seg__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  background: #EFF6FF;
  color: #1664A9;
  border: 1px solid #BFD9F6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.hf-recm__title,
.hf-seg__title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #0F172A;
  margin: 0 0 18px;
  word-break: keep-all;
}
.hf-recm__accent,
.hf-seg__accent { color: #2699FB; }
.hf-recm__lead,
.hf-seg__lead {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: #475569;
  letter-spacing: -0.012em;
  margin: 0;
  word-break: keep-all;
}
.hf-recm__lead b,
.hf-seg__lead b { color: #1664A9; font-weight: 800; }

/* 비디오 — 자동 무한 루프, 그림자 + 둥근 모서리 (1.5배 확대 → 1470px) */
.hf-recm__video,
.hf-seg__video {
  position: relative;
  max-width: 1470px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #0F172A;
  box-shadow:
    0 24px 60px -20px rgba(15, 23, 42, 0.18),
    0 12px 24px -12px rgba(38, 153, 251, 0.12);
}
.hf-recm__video video,
.hf-seg__video video {
  display: block;
  width: 100%;
  height: auto;
}

/* 4가지 기능 — grid 4-col on desktop, stack on mobile */
.hf-recm__features,
.hf-seg__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin-left: auto; margin-right: auto;
}
.hf-recm__feature,
.hf-seg__feature {
  display: flex; align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: #FCFDFF;
  border: 1px solid #E6E9F0;
  border-radius: 12px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.hf-recm__feature:hover,
.hf-seg__feature:hover {
  border-color: #BFD9F6;
  box-shadow: 0 6px 16px -8px rgba(38, 153, 251, 0.18);
  transform: translateY(-1px);
}
.hf-recm__feature-icon,
.hf-seg__feature-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #E7F2FE 0%, #DDE9FE 100%);
  color: #2699FB;
  border-radius: 10px;
  font-size: 20px;
}
.hf-recm__feature-body,
.hf-seg__feature-body { min-width: 0; }
.hf-recm__feature-body h4,
.hf-seg__feature-body h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.018em;
}
.hf-recm__feature-body p,
.hf-seg__feature-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  letter-spacing: -0.012em;
  word-break: keep-all;
}
@media (min-width: 1024px) {
  .hf-recm__features,
  .hf-seg__features { grid-template-columns: repeat(4, 1fr); }
}


/* ─── 3. 다른 5개 솔루션 라인업 (밝은 톤) ────────────────────────── */
.hf-lineup {
  padding: clamp(96px, 11vw, 160px) 0;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.hf-lineup__head {
  text-align: center;
  max-width: 740px;
  margin: 0 auto clamp(48px, 6vw, 80px);
}
.hf-lineup__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #2699FB;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.hf-lineup__title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.028em;
  color: #0F172A;
  margin: 0 0 18px;
  word-break: keep-all;
}
.hf-lineup__accent {
  background: linear-gradient(120deg, #2699FB 0%, #A553E5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hf-lineup__sub {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: #475569;
  margin: 0;
  letter-spacing: -0.012em;
}

.hf-lineup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px)  { .hf-lineup__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .hf-lineup__grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

.hf-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 28px 22px;
  background: #fff;
  border: 1px solid #E6E9F0;
  border-radius: 16px;
  transition: transform 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out;
  text-decoration: none;
  color: inherit;
}
.hf-card:hover {
  transform: translateY(-4px);
  border-color: #BFD9F6;
  box-shadow: 0 18px 36px -16px rgba(38, 153, 251, 0.25);
}
.hf-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: linear-gradient(160deg, #EFF6FF 0%, #DBE8F8 100%);
  color: #2699FB;
  border-radius: 12px;
  font-size: 22px;
}
.hf-card__tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #94A3B8;
  text-transform: uppercase;
}
.hf-card__name {
  font-size: 19px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin: 0;
}
.hf-card__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
  letter-spacing: -0.012em;
  word-break: keep-all;
  flex: 1;
}
.hf-card__arrow {
  align-self: flex-end;
  font-size: 18px;
  color: #94A3B8;
  transition: color 0.22s, transform 0.22s;
}
.hf-card:hover .hf-card__arrow { color: #2699FB; transform: translateX(3px); }


/* ─── 4. 고객사 마퀴 ────────────────────────────────────────── */
.hf-customers {
  padding: clamp(72px, 8vw, 120px) 0 clamp(56px, 6vw, 88px);
  background: #F4F8FF;
  border-top: 1px solid #E6E9F0;
  overflow: hidden;
}
.hf-customers__head {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.hf-customers__count {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #1664A9;
  letter-spacing: -0.012em;
  margin-bottom: 12px;
}
.hf-customers__count b {
  font-size: 18px;
  font-weight: 900;
  color: #2699FB;
  margin-right: 4px;
}
.hf-customers__title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.025em;
  margin: 0;
}

.hf-marquee {
  position: relative;
  display: flex; flex-direction: column;
  gap: 16px;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hf-marquee__row { overflow: hidden; }
.hf-marquee__track {
  display: flex;
  width: max-content;
  animation: hfMarqueeScroll 80s linear infinite;
}
.hf-marquee__track--reverse {
  animation-name: hfMarqueeScrollReverse;
  animation-duration: 90s;
}
.hf-marquee__set {
  display: flex; align-items: center;
  flex-shrink: 0;
}
/* hover 시 멈추지 않고 계속 흐르도록 — 의도적으로 pause 룰 제거
   (이전: .hf-marquee:hover .hf-marquee__track { animation-play-state: paused; }) */
@keyframes hfMarqueeScroll {
  to { transform: translateX(calc(-100% / 3)); }
}
@keyframes hfMarqueeScrollReverse {
  from { transform: translateX(calc(-100% / 3)); }
  to   { transform: translateX(0); }
}

.hf-cust {
  display: inline-flex; align-items: center; justify-content: center;
  height: 96px;
  width: 180px;
  margin: 0 10px;
  background: #fff;
  border: 1px solid #E6E9F0;
  border-radius: 14px;
  padding: 16px 22px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.22s, box-shadow 0.22s;
}
.hf-cust:hover {
  border-color: #BFD9F6;
  box-shadow: 0 8px 18px -8px rgba(38, 153, 251, 0.18);
}
.hf-cust img {
  max-width: 100%;
  max-height: 56px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
/* 저해상도 로고 — 자연 크기 이하로 캡 */
.hf-cust img[src$="/09women.png"]  { max-height: 32px; max-width: 160px; }
.hf-cust img[src$="/andar.jpg"]    { max-height: 68px; max-width: 130px; }
.hf-cust img[src$="/ihi.png"]      { max-height: 68px; max-width: 160px; }
.hf-cust img[src$="/soim.png"]     { max-height: 68px; max-width: 160px; }
.hf-cust__text {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

/* 반응형 — 모바일에서 카드 살짝 축소 */
@media (max-width: 720px) {
  .hf-cust { width: 140px; height: 76px; padding: 12px 16px; margin: 0 8px; }
  .hf-cust img { max-height: 44px; }
  .hf-marquee { gap: 10px; }
}


/* ─── 5. CLOSING + CTA ──────────────────────────────────────── */
.hf-closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, #0F1A36 0%, #16487F 100%);
  color: #fff;
  padding: clamp(96px, 11vw, 160px) 0;
}
.hf-closing::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(50% 70% at 100% 0%, rgba(38, 153, 251, 0.32) 0%, transparent 60%);
  pointer-events: none;
}
.hf-closing__inner {
  position: relative; z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hf-closing__title {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 22px;
}
.hf-closing__accent {
  background: linear-gradient(120deg, #5BB6FF 0%, #A553E5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hf-closing__sub {
  font-size: clamp(15.5px, 1.6vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.76);
  margin: 0 0 36px;
}
.hf-closing__points {
  list-style: none;
  padding: 0;
  margin: 0 0 44px;
  display: flex; flex-direction: column;
  gap: 12px;
  text-align: left;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.hf-closing__points li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.012em;
}
.hf-closing__points i {
  color: #5BB6FF;
  font-size: 22px;
  flex-shrink: 0;
}
.hf-closing__cta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px;
}


/* ─── Flagship AI 기능 칩 (sq-chat-wrap 와 CTA 사이) ─────────── */
.hf-flag__chips {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: clamp(36px, 4vw, 56px);
}
.hf-flag__chip {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  background: #fff;
  border: 1px solid #E2E7EE;
  border-radius: 999px;
  color: #1F2937;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.hf-flag__chip:hover {
  background: #F4F8FF;
  border-color: #BFD9F6;
  box-shadow: 0 6px 14px -6px rgba(38, 153, 251, 0.18);
  transform: translateY(-1px);
}
.hf-flag__chip i {
  font-size: 16px;
  color: #2699FB;       /* 그라데이션 → 단색 블루 */
}

/* ============================================================================
   AI 시나리오 5종 — sticky 좌측 아코디언 + 우측 mockup stack
   (스냅푸시 #온사이트 sticky 카피 패턴 응용)
   ============================================================================ */
.hf-feat {
  margin-top: clamp(56px, 6vw, 96px);
}
/* sidebar 안으로 이동 — 좌측 정렬, chip 리스트 위에 자리 */
.hf-feat__head {
  margin-bottom: 24px;
}
.hf-feat__eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(38, 153, 251, 0.08);
  color: #2699FB;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.hf-feat__title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.018em;
  color: #0F172A;
  line-height: 1.3;
  margin: 0;
}

.hf-feat__grid {
  display: grid;
  grid-template-columns: minmax(280px, 36%) 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* ─── 좌측 sidebar — 아코디언 chip 리스트 ─── */
.hf-feat__sidebar {
  position: sticky;
  top: calc(50vh - 220px);          /* viewport 가운데 보이도록 */
  align-self: start;
}
.hf-feat__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.hf-feat__chip {
  border-bottom: 1px solid #E5EAF2;
  padding: 18px 4px;
  cursor: default;
  transition: padding 0.3s ease;
}
.hf-feat__chip:first-child { border-top: 1px solid #E5EAF2; }

.hf-feat__chip-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.hf-feat__chip-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: #94A3B8;                    /* 비활성: 옅은 회색 */
  transition: color 0.3s ease, font-size 0.3s ease, font-weight 0.3s ease;
}
.hf-feat__chip-icon {
  font-size: 18px;
  color: #94A3B8;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* 아코디언 body — 비활성 시 0 으로 접힘 */
.hf-feat__chip-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.hf-feat__chip-desc {
  margin: 14px 0 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: #475569;
  letter-spacing: -0.012em;
}
.hf-feat__chip-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2699FB;
  letter-spacing: -0.01em;
}
.hf-feat__chip-tag i { font-size: 13px; }

/* 활성 상태 — 굵게 + 펼침 */
.hf-feat__chip.is-active .hf-feat__chip-title {
  color: #0F172A;
  font-size: 20px;
  font-weight: 800;
}
.hf-feat__chip.is-active .hf-feat__chip-icon {
  color: #0F172A;
  transform: rotate(180deg);
}
.hf-feat__chip.is-active .hf-feat__chip-body {
  max-height: 200px;
  opacity: 1;
}

/* ─── 우측 visuals — 단일 border 컨테이너 안에 패널 stack ─── */
.hf-feat__visuals {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #E5EAF2;
  border-radius: 20px;
  box-shadow: 0 14px 32px -18px rgba(15, 23, 42, 0.12);
  padding: clamp(22px, 2.4vw, 32px);
  gap: clamp(120px, 18vh, 220px);   /* 큰 gap = scroll trigger 간격 확보 (보더 안쪽 여백) */
}
/* ─── 채팅 베이스 panel — 사용자 질문 + AI 응답 형태 (개별 보더/배경 없음) ─── */
.hf-feat__panel {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  scroll-margin-top: 20vh;
}
/* 우상단 패널 번호 뱃지 — 화면 컨텍스트용 */
.hf-feat__panel-no {
  position: absolute;
  top: 14px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  background: linear-gradient(160deg, #2699FB, #5BB6FF);
  color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 14px -6px rgba(38, 153, 251, 0.5);
}

/* 채팅 thread — flex column, user/bot 메시지 누적 */
.hf-feat__chat {
  display: flex; flex-direction: column;
  gap: 16px;
}

/* 사용자 메시지 — 우측 정렬 */
.hf-feat__msg--user {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.hf-feat__user-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: #64748B;
  letter-spacing: -0.012em;
}
.hf-feat__user-meta i { font-size: 14px; color: #94A3B8; }
.hf-feat__user-bubble {
  width: fit-content;
  max-width: 80%;
  padding: 10px 14px;
  background: linear-gradient(160deg, #2699FB, #5BB6FF);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  font-size: 13px; font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.012em;
  box-shadow: 0 8px 18px -10px rgba(38, 153, 251, 0.45);
}

/* AI bot 메시지 — 좌측, brand mark + 섹션 badge + body */
.hf-feat__msg--bot {
  display: flex; flex-direction: column;
  gap: 8px;
}
.hf-feat__bot-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: #64748B;
  letter-spacing: -0.012em;
}
.hf-feat__brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: linear-gradient(160deg, #2699FB, #5BB6FF);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
}
.hf-feat__bot-body {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
  background: #F8FAFD;
  border: 1px solid #E5EEF9;
  border-radius: 12px 12px 12px 4px;
}
.hf-feat__sec-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #DBE9FF;
  border-radius: 999px;
  color: #1F73B6;
  font-size: 12px; font-weight: 700;
  letter-spacing: -0.01em;
}
.hf-feat__sec-tag i { font-size: 12px; color: #2699FB; }
.hf-feat__bot-intro {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: #334155;
  letter-spacing: -0.012em;
}

.hf-feat__panel-note {
  margin: 18px 0 0;
  padding: 12px 14px;
  background: #F1F7FE;
  border-left: 3px solid #2699FB;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #1F2937;
  line-height: 1.55;
  letter-spacing: -0.01em;
  display: flex; align-items: flex-start; gap: 8px;
}
.hf-feat__panel-note i { color: #2699FB; font-size: 16px; margin-top: 1px; }
.hf-feat__panel-note b { color: #1664A9; font-weight: 700; }

/* ─── 패널 1: 퍼널 그래프 ─── */
.hf-feat-funnel__bars {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
  height: 220px;
}
.hf-feat-funnel__bar {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}
.hf-feat-funnel__col {
  width: 100%;
  background: linear-gradient(180deg, #5BB6FF 0%, #2699FB 100%);
  border-radius: 6px 6px 0 0;
  min-height: 20px;
  box-shadow: 0 6px 14px -10px rgba(38, 153, 251, 0.6);
}
.hf-feat-funnel__bar:nth-child(5) .hf-feat-funnel__col {
  background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%);   /* 마지막 단계 — 이탈 강조 */
  box-shadow: 0 6px 14px -10px rgba(245, 158, 11, 0.55);
}
.hf-feat-funnel__lbl {
  font-size: 12px; font-weight: 600;
  color: #64748B;
  letter-spacing: -0.01em;
}
.hf-feat-funnel__val {
  font-size: 13px; font-weight: 800;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}

/* ─── 패널 2: 세그먼트 카드 ─── */
.hf-feat-seg {
  display: flex; flex-direction: column;
  gap: 14px;
}
.hf-feat-seg__card {
  background: #F8FAFD;
  border: 1px solid #E5EEF9;
  border-radius: 12px;
  padding: 16px 18px;
}
.hf-feat-seg__card--alt { background: #FFF8EE; border-color: #FCE8C7; }
.hf-feat-seg__card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.hf-feat-seg__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: #fff;
  border: 1px solid #DDE6F2;
  border-radius: 8px;
  color: #2699FB;
  font-size: 15px;
  flex-shrink: 0;
}
.hf-feat-seg__card--alt .hf-feat-seg__icon { color: #F59E0B; border-color: #FCE2BA; }
.hf-feat-seg__card-head h5 {
  margin: 0; flex: 1;
  font-size: 13.5px; font-weight: 700;
  color: #0F172A; line-height: 1.4;
  letter-spacing: -0.012em;
}
.hf-feat-seg__tag {
  flex-shrink: 0;
  padding: 3px 9px;
  background: #EAF4FF;
  color: #1F73B6;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: -0.005em;
}
.hf-feat-seg__card--alt .hf-feat-seg__tag { background: #FFF1DA; color: #B45309; }

.hf-feat-seg__conds {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.hf-feat-seg__conds li {
  font-size: 12.5px; font-weight: 500;
  color: #334155;
  letter-spacing: -0.012em;
}
.hf-feat-seg__crumb {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  background: #EFF6FF;
  color: #1664A9;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 600;
}
.hf-feat-seg__sep {
  text-align: center;
  font-size: 11px; font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.08em;
  margin: 4px 0;
}

/* ─── 패널 3: 상품 추천 ─── */
.hf-feat-prod {
  display: flex; flex-direction: column;
  gap: 16px;
}
.hf-feat-prod__rank {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(38, 153, 251, 0.08), rgba(91, 182, 255, 0.04));
  border: 1px solid #DBE9FF;
  border-radius: 12px;
}
.hf-feat-prod__rank-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: linear-gradient(160deg, #2699FB, #5BB6FF);
  color: #fff;
  border-radius: 12px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.hf-feat-prod__rank-body { flex: 1; }
.hf-feat-prod__rank-body h5 {
  margin: 0 0 8px;
  font-size: 14.5px; font-weight: 800;
  color: #0F172A; letter-spacing: -0.014em;
}
.hf-feat-prod__rank-body ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 18px;
}
.hf-feat-prod__rank-body li {
  display: flex; flex-direction: column;
  gap: 2px;
  font-size: 12px; color: #64748B; font-weight: 500;
}
.hf-feat-prod__rank-body li b {
  font-size: 14px; font-weight: 800; color: #0F172A;
  font-variant-numeric: tabular-nums;
}

.hf-feat-prod__pair { padding: 0 4px; }
.hf-feat-prod__pair h6 {
  margin: 0 0 10px;
  font-size: 12.5px; font-weight: 700;
  color: #475569;
  letter-spacing: -0.01em;
}
.hf-feat-prod__pair table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.hf-feat-prod__pair td {
  padding: 9px 0;
  border-bottom: 1px solid #EEF2F7;
  color: #334155; letter-spacing: -0.01em;
}
.hf-feat-prod__pair td:nth-child(2) {
  text-align: right;
  width: 80px;
  font-variant-numeric: tabular-nums;
}
.hf-feat-prod__pair td:nth-child(3) {
  text-align: right;
  width: 70px;
  color: #64748B;
  font-variant-numeric: tabular-nums;
}
.hf-feat-prod__pair tr:last-child td { border-bottom: 0; }

/* ─── 패널 4: 재유입 캐러셀 ─── */
.hf-feat-strat__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hf-feat-strat__cards li {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #FAFBFD;
  border: 1px solid #E5EAF2;
  border-radius: 10px;
  min-height: 150px;
}
.hf-feat-strat__chip {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 9px;
  background: #EAF4FF;
  color: #1664A9;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.hf-feat-strat__cards p {
  margin: 0;
  font-size: 12.5px; font-weight: 500;
  color: #334155;
  line-height: 1.5;
  letter-spacing: -0.012em;
  flex: 1;
}
.hf-feat-strat__cards b { color: #1F73B6; font-weight: 700; }
.hf-feat-strat__btn {
  font-size: 12px; font-weight: 700;
  color: #2699FB;
  letter-spacing: -0.01em;
}

/* ─── 패널 5: 성과 보고서 ─── */
.hf-feat-rep {
  display: flex; flex-direction: column;
  gap: 18px;
}
.hf-feat-rep__cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.hf-feat-rep__cmp th {
  text-align: left;
  padding: 10px 12px;
  background: #F4F7FB;
  color: #475569; font-weight: 700;
  font-size: 11.5px;
  letter-spacing: -0.005em;
  border-bottom: 1px solid #E5EAF2;
}
.hf-feat-rep__cmp th:not(:first-child) { text-align: right; }
.hf-feat-rep__cmp td {
  padding: 12px;
  color: #334155; font-weight: 600;
  border-bottom: 1px solid #EEF2F7;
  letter-spacing: -0.01em;
}
.hf-feat-rep__cmp td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hf-feat-rep__cmp td b { color: #0F172A; font-weight: 800; }
.hf-feat-rep__cmp tr.is-low td b { color: #94A3B8; }
.hf-feat-rep__cmp tr.is-low td { color: #94A3B8; }

.hf-feat-rep__points {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  counter-reset: rep;
}
.hf-feat-rep__points li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: #F8FAFD;
  border: 1px solid #E5EEF9;
  border-radius: 10px;
  font-size: 12.5px; font-weight: 500;
  color: #334155; letter-spacing: -0.012em;
  line-height: 1.5;
}
.hf-feat-rep__points li b { color: #1F73B6; font-weight: 700; }
.hf-feat-rep__pno {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: #2699FB;
  color: #fff;
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
  margin-top: -1px;
}

/* ─── 공통 컴포넌트 — accent header / KPI / stat / insight / msg / carousel / priority ─── */

/* accent header — 컬러 아이콘 + 제목 한 줄 (📈 추천 캠페인, 🎯 핵심 진단 등) */
.hf-feat-accent {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FFF7EC;
  border-left: 3px solid #F59E0B;
  font-size: 13.5px; font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.012em;
}
.hf-feat-accent i { font-size: 18px; color: #F59E0B; }
.hf-feat-accent--blue { background: #EEF6FF; border-left-color: #2699FB; }
.hf-feat-accent--blue i { color: #2699FB; }
.hf-feat-accent--green { background: #ECFDF5; border-left-color: #10B981; }
.hf-feat-accent--green i { color: #10B981; }

/* KPI 4-card 그리드 — 패널 1 funnel 상단 */
.hf-feat-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hf-feat-kpi__card {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #E5EEF9;
  border-radius: 10px;
}
.hf-feat-kpi__lbl {
  font-size: 11px; font-weight: 600;
  color: #64748B;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  display: block;
}
.hf-feat-kpi__val {
  font-size: 14px; font-weight: 800;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.014em;
}

/* stat 3-card 가로 — 비용·모수 요약 등 */
.hf-feat-stat {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hf-feat-stat__card {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #DBE9FF;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.hf-feat-stat__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #2699FB, #5BB6FF);
}
.hf-feat-stat__lbl {
  font-size: 11px; font-weight: 600;
  color: #64748B;
  letter-spacing: -0.005em;
  display: block;
  margin-bottom: 4px;
}
.hf-feat-stat__val {
  font-size: 16px; font-weight: 800;
  color: #1664A9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.014em;
}

/* AI 인사이트 callout — sparkle icon + label + 본문 */
.hf-feat-insight {
  display: flex; gap: 10px;
  padding: 12px 14px;
  background: #F4F0FF;
  border: 1px solid #E0D7FB;
  border-radius: 10px;
}
.hf-feat-insight__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: linear-gradient(160deg, #8B5CF6, #A78BFA);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  flex-shrink: 0;
}
.hf-feat-insight__body { flex: 1; }
.hf-feat-insight__lbl {
  display: block;
  font-size: 11px; font-weight: 800;
  color: #6D28D9;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.hf-feat-insight__body p {
  margin: 0;
  font-size: 12.5px; font-weight: 500;
  color: #1F2937;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

/* 채널·캠페인 표 (작은 폰트, header 옅은 블루) */
.hf-feat-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  background: #fff;
  border: 1px solid #E5EEF9;
  border-radius: 10px;
  overflow: hidden;
}
.hf-feat-tbl thead th {
  padding: 9px 8px;
  background: #EFF6FF;
  color: #1F73B6; font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.005em;
  border-bottom: 1px solid #DBE9FF;
  text-align: center;
}
.hf-feat-tbl td {
  padding: 9px 8px;
  border-bottom: 1px solid #F1F5F9;
  color: #334155; font-weight: 500;
  letter-spacing: -0.005em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.hf-feat-tbl td:first-child { text-align: left; font-weight: 600; color: #0F172A; }
.hf-feat-tbl tr:last-child td { border-bottom: 0; }
.hf-feat-tbl b { font-weight: 700; color: #0F172A; }

/* 베스트 상품 — 이미지 placeholder + 정보 */
.hf-feat-best {
  display: flex; flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid #E5EEF9;
  border-radius: 10px;
  padding: 8px;
}
.hf-feat-best__row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
}
.hf-feat-best__row:hover { background: #F8FAFD; }
.hf-feat-best__img {
  width: 38px; height: 38px;
  border-radius: 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #FBD2C8 0%, #FBE2D0 100%);
}
.hf-feat-best__img svg {
  width: 100%; height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}
/* 제품 카테고리별 백드롭 그라데이션 */
.hf-feat-best__img--stick   { background: linear-gradient(135deg, #FFE8D6, #FFD3B6); }
.hf-feat-best__img--cushion { background: linear-gradient(135deg, #FBE0DA, #F8CEC5); }
.hf-feat-best__img--bottle  { background: linear-gradient(135deg, #EDE2D0, #DFD0B7); }
.hf-feat-best__name {
  font-size: 12.5px; font-weight: 700;
  color: #0F172A; letter-spacing: -0.012em;
}
.hf-feat-best__cat {
  display: block;
  font-size: 11px; font-weight: 500;
  color: #94A3B8;
  margin-top: 1px;
}
.hf-feat-best__val {
  font-size: 12.5px; font-weight: 800;
  color: #1664A9;
  font-variant-numeric: tabular-nums;
}

/* 메시지 preview — 카카오/채널 chip + 말풍선 형식 */
.hf-feat-msg-preview {
  padding: 14px;
  background: #E8F1FB;
  border-radius: 10px;
}
.hf-feat-msg-preview__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.hf-feat-msg-preview__channel {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: #FAE100;
  border-radius: 4px;
  font-size: 11px; font-weight: 700;
  color: #3C1E1E;
}
.hf-feat-msg-preview__channel i { font-size: 13px; }
.hf-feat-msg-preview__tag {
  padding: 2px 8px;
  background: #fff;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  color: #475569;
  border: 1px solid #DBE9FF;
}
.hf-feat-msg-preview__bubble {
  display: flex; align-items: flex-end; gap: 6px;
}
.hf-feat-msg-preview__bubble p {
  flex: 1;
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  border-radius: 4px 12px 12px 12px;
  font-size: 12.5px; font-weight: 500;
  color: #0F172A;
  line-height: 1.5;
  letter-spacing: -0.012em;
}
.hf-feat-msg-preview__time {
  font-size: 10.5px; color: #94A3B8; font-weight: 500;
  white-space: nowrap;
}

/* 상품 카드 캐러셀 — 4 카드 grid (이미지 placeholder + 텍스트 + 버튼) */
.hf-feat-carousel {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  background: #DEEBF7;
  border-radius: 12px;
}
.hf-feat-carousel__card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.hf-feat-carousel__img {
  height: 90px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #FBD2C8 0%, #FBE2D0 100%);
}
.hf-feat-carousel__img svg {
  height: 78%;
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.12));
}
/* 제품 카테고리별 백드롭 — 명시적 변형자로 순서에 의존하지 않음 */
.hf-feat-carousel__img--stick   { background: linear-gradient(135deg, #FFE8D6, #FFD3B6); }
.hf-feat-carousel__img--cushion { background: linear-gradient(135deg, #FBE0DA, #F8CEC5); }
.hf-feat-carousel__img--bottle  { background: linear-gradient(135deg, #EDE2D0, #DFD0B7); }
.hf-feat-carousel__img--serum   { background: linear-gradient(135deg, #D4E5D0, #DFEEDD); }
.hf-feat-carousel__body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.hf-feat-carousel__title {
  font-size: 12px; font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.012em;
}
.hf-feat-carousel__desc {
  margin: 0;
  font-size: 11px; font-weight: 500;
  color: #475569;
  line-height: 1.45;
  letter-spacing: -0.008em;
}
.hf-feat-carousel__btn {
  margin-top: 4px;
  padding: 6px 0;
  background: #F4F6FA;
  text-align: center;
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: #1F2937;
}

/* 개선 우선순위 — 번호 + 제목 + 본문 (보고서 마무리) */
.hf-feat-priority {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid #E5EAF2;
  border-radius: 12px;
}
.hf-feat-priority__head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EEF2F7;
  margin-bottom: 4px;
  font-size: 12.5px; font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.012em;
}
.hf-feat-priority__head i { color: #2699FB; font-size: 16px; }
.hf-feat-priority__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 8px 4px;
}
.hf-feat-priority__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #EFF6FF;
  color: #1F73B6;
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
  margin-top: 1px;
}
.hf-feat-priority__body strong {
  display: block;
  font-size: 12.5px; font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.012em;
  margin-bottom: 2px;
}
.hf-feat-priority__body p {
  margin: 0;
  font-size: 12px; font-weight: 500;
  color: #475569;
  line-height: 1.5;
  letter-spacing: -0.008em;
}

/* 모바일 반응형 — KPI/stat/carousel 가 2-col 으로 */
@media (max-width: 900px) {
  /* 4-col 캐러셀이 좁아지면 2x2 그리드로 폴백 */
  .hf-feat-carousel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hf-feat-kpi { grid-template-columns: repeat(2, 1fr); }
  .hf-feat-stat { grid-template-columns: repeat(2, 1fr); }
  .hf-feat-carousel { grid-template-columns: 1fr; }
}

/* ─── 반응형 — 1100px 미만에서 단일 컬럼 ─── */
@media (max-width: 1100px) {
  .hf-feat__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hf-feat__sidebar {
    position: static;
    top: auto;
  }
  .hf-feat__visuals {
    gap: 32px;
    padding-bottom: 24px;
  }
}
@media (max-width: 640px) {
  .hf-feat-strat__cards { grid-template-columns: 1fr; }
  .hf-feat-funnel__bars { height: 180px; gap: 8px; }
  .hf-feat-funnel__lbl { font-size: 11px; }
}

/* ─── 채팅 스레드 스택 모드 ───
   stage 가 swap 되는 게 아니라 하나의 채팅 스레드 안에 누적되어 쌓이는 구조.
   snappush.css 의 grid-stacking + opacity 토글을 home2 에서 flex-column 누적으로 override.
   - 활성/비활성 = .is-active (snappush.js 제어, 클릭 타겟 식별용)
   - 표시/숨김  = .is-revealed (home2.js initHfStackedThread 제어, 누적 reveal) */
.page-home2 .sq-ai-stages {
  position: relative;
  display: flex !important;          /* snappush.css grid 무력화 */
  flex-direction: column;
  gap: 14px;
  height: 600px;                     /* 고정 — 컨텐츠 추가 시 sq-chat 흔들림 방지 */
  /* 사용자 직접 스크롤 차단 — overflow: hidden 이지만 JS 의 scrollTo() 는 그대로 작동 */
  overflow: hidden;
  padding-right: 4px;
  margin-bottom: 14px;
  scroll-behavior: smooth;
}
/* 스크롤 하단 여백 spacer — thread 가용 600px 는 그대로 두고, 마지막 컨텐츠가
   bottom edge 에 붙어 잘려 보이지 않도록 48px invisible flex-item 을 끝에 둠. */
.page-home2 .sq-ai-stages::after {
  content: '';
  flex: 0 0 48px;
}

/* 개별 stage — flex item, 자신의 자연 높이로 자리잡음. .is-revealed 없으면 thread 에서 제거 */
.page-home2 .sq-ai-stage {
  /* snappush.css 의 grid-area/opacity/translate 모두 무력화 */
  position: relative;
  display: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
/* home2 페이지에선 wizard stage 에서도 chat input + 추천 chips 가 항상 노출.
   snappush.css 2981 줄의 hide 규칙(`.page-snappush .sq-chat--ai.is-wizard [data-ai-input]` 등)
   과 같은 specificity 로 override — home2.css 가 뒤에 로드되어 우선 적용. */
.page-home2 .sq-chat--ai.is-wizard [data-ai-input],
.page-home2 .sq-chat--ai.is-wizard .sq-ai-chips { display: flex !important; }

.page-home2 .sq-ai-stage.is-revealed {
  display: block;
  animation: hfStageRevealIn 0.32s ease-out both;
}
@keyframes hfStageRevealIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
/* 데이터 분석 stage 는 화면 전환 애니메이션 없음 — wizard 에서 넘어올 때 컨테이너가 바로
   나타나고 안의 컨텐츠가 sequential flow 로 그려짐 (위에서 .is-analysis-mode 가 wizard hide). */
.page-home2 .sq-ai-stage[data-stage="analysis"].is-revealed {
  animation: none;
}

/* conversation 모드 — wizard 또는 analysis 가 활성화되면 welcome 카드 화면을 숨김.
   chat 식 누적 흐름: 사용자 메시지(상단) ↓ AI 응답(하단). */
.page-home2 .sq-ai-stages.is-conversation-mode .sq-ai-stage[data-stage="welcome"] {
  display: none !important;
}
/* analysis 모드에서 로딩은 thread 상단에 absolute 포지셔닝 — 분석 컨텐츠가 아직 hidden 일 때 보이도록.
   top/left 살짝 더 여유 줘서 컨테이너 모서리에 걸쳐 보이지 않게. */
.page-home2 .sq-ai-stages.is-analysis-mode .sq-ai-loading.is-shown {
  position: absolute;
  top: 24px; left: 20px;
  z-index: 5;
}

/* admin 활성화 시 — 채팅 thread 가 admin 화면으로 전환되는 느낌.
   다른 stages 모두 숨김, admin 만 풀로 표시. JS 가 .is-admin-mode 토글. */
.page-home2 .sq-ai-stages.is-admin-mode .sq-ai-stage:not([data-stage="admin"]) {
  display: none !important;
}
.page-home2 .sq-ai-stages.is-admin-mode .sq-ai-loading {
  display: none !important;
}
/* chat 영역 자체가 admin 페이지 컨테이너 처럼 보이게 */
.page-home2 .sq-ai-stages.is-admin-mode {
  background: #F4F6FA;
  border-radius: 12px;
  padding: 12px;
}

/* ─── 로딩 인디케이터 — 결과값 등장 직전 "분석중..." 잠시 노출 ─── */
.page-home2 .sq-ai-loading {
  display: none;
  align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 11px 16px;
  background: linear-gradient(180deg, #FAFCFF 0%, #EEF5FF 100%);
  border: 1px solid #D8E5F7;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1664A9;
  flex-shrink: 0;
  letter-spacing: -0.012em;
  box-shadow: 0 2px 5px -2px rgba(38, 153, 251, 0.18);
}
.page-home2 .sq-ai-loading.is-shown {
  display: inline-flex;
  animation: hfLoadingIn 0.28s ease-out both;
}
.sq-ai-loading__spinner {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
}
.sq-ai-loading__spinner i {
  font-size: 16px;
  color: #2699FB;
  display: inline-block;
  animation: hfLoadingSpin 0.9s linear infinite;
}
@keyframes hfLoadingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hfLoadingIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* ─── 컨텐츠 stagger 등장 — AI 가 한 줄씩 답하듯 자식 요소 순차 등장 ─── */
.page-home2 .is-streaming > * {
  animation: hfStreamItemIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes hfStreamItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}


/* ─── Stage 3 데이터 분석 (.hf-anal) ─────────────────────────────
   AI 응답 한 메시지 안에 진단 / 요약 / 근거 데이터 / 채널 성과 /
   우선순위 액션 / CRM 타겟 추천 / 한 줄 제안 까지 한 흐름으로 표현. */
.hf-anal {
  display: flex; flex-direction: column;
  gap: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #1F2937;
  letter-spacing: -0.012em;
}
.hf-anal__h {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}
.hf-anal__h-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
}
.hf-anal__p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #1F2937;
}
.hf-anal__p b { font-weight: 800; color: #0F172A; }
.hf-anal__hr {
  border: 0;
  border-top: 1px solid #EEF1F6;
  margin: 4px 0 6px;
}

/* 진단 5-항목 */
.hf-anal__diag {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.hf-anal__diag li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #1F2937;
}
.hf-anal__diag li i {
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 13px;
  color: #2699FB;
}
.hf-anal__diag li b { font-weight: 800; color: #0F172A; margin-right: 2px; }

/* 데이터 테이블 — 3-col (지표/수치/전월대비) 또는 4-col (채널/CTR/CVR/ROAS) */
.hf-anal__table {
  display: flex; flex-direction: column;
  border: 1px solid #E6E9F0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.hf-anal__row {
  display: grid;
  align-items: center;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #0F172A;
}
.hf-anal__row + .hf-anal__row { border-top: 1px solid #EEF1F6; }
.hf-anal__row--head {
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
  background: #F4F8FE;
  letter-spacing: 0.02em;
}
.hf-anal__table--3col .hf-anal__row { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 8px; }
.hf-anal__table--4col .hf-anal__row { grid-template-columns: 1.4fr 1fr 1fr 1fr;   gap: 8px; }
.hf-anal__row > span:first-child { font-weight: 600; }
.hf-anal__num   { font-weight: 700; color: #0F172A; }
.hf-anal__roas  { font-weight: 800; color: #2699FB; }
.hf-anal__delta--up   { color: #16A34A; font-weight: 700; }
.hf-anal__delta--down { color: #DC2626; font-weight: 700; }

/* 우선순위 액션 카드 */
.hf-anal__action {
  padding: 10px 12px;
  background: #FAFBFD;
  border-radius: 6px;
}
.hf-anal__action + .hf-anal__action { margin-top: 6px; }
.hf-anal__action-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
}
.hf-anal__action-title b { color: #2699FB; font-weight: 800; margin-right: 2px; }
.hf-anal__action-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #475569;
}

/* CRM 타겟 추천 세그먼트 */
.hf-anal__seg {
  padding: 12px 14px;
  background: #FAFBFD;
  border: 1px solid #E6E9F0;
  border-radius: 8px;
  border-left: 3px solid #2699FB;
  display: flex; flex-direction: column; gap: 10px;
}
.hf-anal__seg + .hf-anal__seg { margin-top: 8px; }
.hf-anal__seg-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
}
.hf-anal__seg-title b { font-weight: 800; color: #0F172A; }
.hf-anal__seg-note {
  margin: 0;
  font-size: 12px;
  color: #334155;
}
.hf-anal__seg-note b { font-weight: 800; color: #0F172A; margin-right: 4px; }
.hf-anal__seg-cta {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hf-anal__btn {
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: #2699FB;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: -0.012em;
  transition: background 0.18s, transform 0.18s;
}
.hf-anal__btn:hover { background: #1E86E5; transform: translateY(-1px); }
.hf-anal__btn.is-clicked { background: #1664A9; transform: scale(0.96); }

/* 모수 / 생성 완료 메시지 reveal — analysis stage 내부에서 home2.js initHfAnalPhases 가 토글.
   snappush.css 의 `.page-snappush .sq-ai-conv__msg { display: flex }` (specificity 2) 를
   이기기 위해 specificity 를 3 이상으로 올림. */
.page-home2 .sq-ai-conv__msg.hf-reveal { display: none; }
.page-home2 .sq-ai-conv__msg.hf-reveal.is-shown {
  display: flex;
  animation: hfRevealIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes hfRevealIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Stage 4·5 AI 생성 응답 카드 (.hf-aigen) ─────────────────────
   AI 가 세그먼트 추천 → CRM 생성 → 생성 완료 흐름을 한 카드 안에 표현.
   Stage 4: 모수 테이블 + "CRM 생성" 버튼
   Stage 5: 완료 메시지 + "확인하기 / 모수 확인하기" 2-버튼 (--done) */
.hf-aigen {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #E6E9F0;
  border-radius: 10px;
  box-shadow: 0 2px 6px -3px rgba(15, 23, 42, 0.06);
  /* 채팅 버블 형태로 컴팩트 — 컨텐츠 적은데 전체 width 차지하면 컬럼 간격 너무 벌어짐 */
  max-width: 520px;
  align-self: flex-start;
}

/* ─── 채팅 메시지 버블 너비 제한 — ChatGPT 처럼 좌측 정렬 컴팩트 버블 ───
   bot 메시지가 thread 전체 너비를 다 차지하면 컨텐츠가 sparse 해 보임. */
.page-home2 .sq-ai-conv__msg {
  max-width: 720px;
  align-self: flex-start;
}
/* 분석 컨텐츠 (.hf-anal) 의 sub 섹션들도 부모를 따라 자연스럽게 컴팩트 */
.page-home2 .hf-anal,
.page-home2 .hf-anal__table,
.page-home2 .hf-anal__action,
.page-home2 .hf-anal__seg {
  max-width: 100%;
}

/* 위자드 옵션 카드 4개 (.sq-ai-wiz__opts) — 컨텐츠가 적은데 wide 펼쳐지면 sparse 해 보임.
   wizard 컨테이너 자체는 그대로 두고 옵션 영역만 컴팩트하게 폭 제한. */
.page-home2 .sq-ai-wiz__opts {
  max-width: 560px;
}

/* 환영 stage 의 인사 + 카드 deck — 센터 정렬 (AI 인사 배너 느낌).
   stage 가 display:block 이라 align-self 무용 → margin: 0 auto 로 가운데. */
.page-home2 .sq-ai-welcome,
.page-home2 .sq-ai-deck {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* welcome stage 자체 텍스트도 가운데 (인사 헤더 텍스트 정렬) */
.page-home2 .sq-ai-stage[data-stage="welcome"] {
  text-align: center;
}
/* 카드 그리드는 행 안에서 가운데 정렬 */
.page-home2 .sq-ai-cards {
  justify-content: center;
}
.hf-aigen__chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  margin-right: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1664A9;
  background: linear-gradient(135deg, #E7F2FE 0%, #EFE9FF 100%);
  border-radius: 5px;
  vertical-align: middle;
}
.hf-aigen__lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #0F172A;
  letter-spacing: -0.012em;
}
.hf-aigen__lead b { font-weight: 800; color: #0F172A; }

.hf-aigen__table {
  display: flex; flex-direction: column;
  border: 1px solid #E6E9F0;
  border-radius: 8px;
  overflow: hidden;
}
.hf-aigen__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #0F172A;
  letter-spacing: -0.012em;
}
.hf-aigen__row + .hf-aigen__row { border-top: 1px solid #EEF1F6; }
.hf-aigen__row--head {
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
  background: #FAFBFD;
  letter-spacing: 0.02em;
}
.hf-aigen__row > span:first-child { font-weight: 600; }
.hf-aigen__num {
  font-weight: 800;
  color: #2699FB;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hf-aigen__note {
  margin: 0;
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #64748B;
  background: #F6F8FB;
  border-radius: 6px;
  letter-spacing: -0.012em;
}
.hf-aigen__note b { color: #1F2937; font-weight: 700; }

/* AI 응답 카드 안의 CTA 버튼 — 명시적인 버튼 스타일 (sq-ai-wiz__btn 상속 override) */
.hf-aigen__cta {
  align-self: flex-start;
  margin-top: 2px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #fff;
  background: linear-gradient(160deg, #2699FB, #5BB6FF);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(38, 153, 251, 0.45);
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  user-select: none;                   /* 텍스트 선택 모양으로 보이는 것 방지 */
}
.hf-aigen__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(38, 153, 251, 0.55);
}
.hf-aigen__cta:focus { outline: none; }
.hf-aigen__cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(38, 153, 251, 0.35);
}

.hf-aigen__cta-row {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
/* "모수 확인하기" 등 ghost variant — 흰 배경 + 파란 테두리 */
.hf-aigen__cta--ghost {
  color: #1664A9;
  background: #fff;
  border: 1px solid #BFD9F7;
  box-shadow: none;
}
.hf-aigen__cta--ghost:hover {
  background: #F4F8FE;
  border-color: #95C0F0;
  box-shadow: 0 2px 6px -3px rgba(38, 153, 251, 0.18);
}

/* ─── Stage 6 SCRM 어드민 mockup (.hf-admin) ───────────────────
   실제 SCRM 어드민 UI 의 축소판 — 사이드바 + 메인(탭/필터/카드 2개).
   Stage 컨테이너 max-height 600px 안에 들어가도록 폰트·간격 압축. */
.hf-admin {
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 12px;
  padding: 10px;
  background: #F4F6FA;
  border: 1px solid #E6E9F0;
  border-radius: 10px;
  font-size: 11.5px;
  color: #0F172A;
}

/* ── 좌측 사이드바 ── */
.hf-admin__side {
  background: #fff;
  border: 1px solid #E6E9F0;
  border-radius: 8px;
  padding: 10px 8px;
}
.hf-admin__nav {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.hf-admin__nav li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  font-size: 11.5px;
  font-weight: 500;
  color: #475569;
  border-radius: 6px;
  letter-spacing: -0.012em;
  cursor: default;
}
.hf-admin__nav li i { font-size: 14px; color: #94A3B8; flex-shrink: 0; }
.hf-admin__nav li.is-active {
  color: #1664A9;
  background: #EFF6FF;
  font-weight: 700;
}
.hf-admin__nav li.is-active i { color: #2699FB; }
.hf-admin__nav-mark { color: #A855F7 !important; }

/* ── 우측 메인 영역 ── */
.hf-admin__main {
  background: #fff;
  border: 1px solid #E6E9F0;
  border-radius: 8px;
  padding: 12px 14px 14px;
  display: flex; flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* 브랜드 헤더 — SNAP CRM 타이틀 */
.hf-admin__brand {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #EEF1F6;
  flex-wrap: wrap;
}
.hf-admin__brand-mark {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0F172A;
}
.hf-admin__brand-sub {
  font-size: 11px;
  color: #64748B;
  letter-spacing: -0.012em;
}

/* 상단 탭 */
.hf-admin__tabs {
  display: flex; flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EEF1F6;
}
.hf-admin__tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  background: #F4F6FA;
  border-radius: 5px;
  letter-spacing: -0.012em;
  cursor: default;
}
.hf-admin__tab i { font-size: 12px; }
.hf-admin__tab.is-active {
  color: #fff;
  background: #2699FB;
}
.hf-admin__tab--ai {
  color: #6D28D9;
  background: linear-gradient(135deg, #F3EAFE 0%, #E7F2FE 100%);
}

/* 필터 줄 */
.hf-admin__filter {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
}
.hf-admin__chip {
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: #475569;
  background: #F4F6FA;
  border: 1px solid #E6E9F0;
  border-radius: 999px;
  letter-spacing: -0.012em;
}
.hf-admin__search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  margin-left: auto;
  font-size: 11px;
  color: #0F172A;
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  min-width: 0;
}
.hf-admin__search i { font-size: 12px; color: #94A3B8; }
.hf-admin__btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #2699FB;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* CRM 카드 2개 — 로딩 / 로드 완료 두 상태 */
.hf-admin__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* 기본은 로딩만 표시 — JS 가 .is-loaded 토글로 전환 */
.hf-admin__cards--loaded { display: none; }
.hf-admin.is-loaded .hf-admin__cards--loading { display: none; }
.hf-admin.is-loaded .hf-admin__cards--loaded {
  display: grid;
  animation: hfAdminFadeIn 0.32s ease-out;
}
@keyframes hfAdminFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 로딩 카드 — dashed 테두리 + 보라 계산기 아이콘 */
.hf-admin__loadcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 24px 16px;
  background: #FCFDFF;
  border: 1px dashed #D5DAE4;
  border-radius: 8px;
  color: #6D28D9;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.hf-admin__loadcard i {
  font-size: 28px;
  padding: 8px;
  background: #F3EAFE;
  border-radius: 6px;
  color: #6D28D9;
  animation: hfAdminPulse 1.4s ease-in-out infinite;
}
@keyframes hfAdminPulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
.hf-admin__card {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #FCFDFF;
  border: 1px solid #E6E9F0;
  border-radius: 8px;
}
.hf-admin__card--ai {
  background: linear-gradient(180deg, #FAFBFF 0%, #F6F1FF 100%);
  border-color: #E2D5F8;
}
.hf-admin__card-head {
  display: flex; align-items: center; gap: 6px;
}
.hf-admin__card-star i { font-size: 12px; color: #F59E0B; }
.hf-admin__card-no {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748B;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.hf-admin__card-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.012em;
}
.hf-admin__card--ai .hf-admin__card-name { color: #6D28D9; }
.hf-admin__card-sub {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: #64748B;
  letter-spacing: -0.012em;
}
.hf-admin__card-cond {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: #fff;
  border: 1px dashed #CBD5E1;
  border-radius: 6px;
  font-size: 10.5px;
  color: #475569;
}
.hf-admin__cond-action {
  margin-left: auto;
  padding: 2px 8px;
  font-weight: 700;
  color: #2699FB;
  background: #EFF6FF;
  border-radius: 999px;
}
.hf-admin__card-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.hf-admin__card-list li {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #475569;
  letter-spacing: -0.012em;
}
.hf-admin__card-list li i { font-size: 11px; color: #94A3B8; flex-shrink: 0; }
.hf-admin__card-list li b {
  color: #1F2937;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hf-admin__card-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 2px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: -0.012em;
}
.hf-admin__card-cta i { font-size: 13px; }
.hf-admin__card-cta:hover { filter: brightness(1.04); }

/* admin stage 는 좌우 여백을 줄여 더 넓은 가로폭 확보 */
.page-home2 .sq-ai-stage.hf-admin-stage { padding-right: 4px; }

/* 모바일 반응형 — 사이드바 숨기고 카드 한 줄 배치 + thread 높이 축소 */
@media (max-width: 720px) {
  .page-home2 .sq-ai-stages {
    height: 500px;                 /* 600 → 500 (모바일 viewport 가 더 작아서) */
  }
  .hf-admin {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }
  .hf-admin__side { display: none; }
  .hf-admin__cards { grid-template-columns: 1fr; }
  .hf-admin__tab { font-size: 10px; padding: 3px 7px; }
  .hf-admin__search { width: 100%; margin-left: 0; }
}

/* ─── 비디오 모달 (Layer Popup) ─────────────────────────── */
.hf-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
}
.hf-video-modal.is-open {
  display: flex;
  animation: hfModalFadeIn 0.22s ease-out;
}
@keyframes hfModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hf-video-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 14, 30, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  cursor: pointer;
  padding: 0;
}
.hf-video-modal__panel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  background: #0F1A36;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: hfModalSlideIn 0.30s cubic-bezier(0.2, 0.85, 0.25, 1);
}
@keyframes hfModalSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hf-video-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hf-video-modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.012em;
}
.hf-video-modal__close {
  width: 36px; height: 36px;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.18s;
}
.hf-video-modal__close:hover { background: rgba(255, 255, 255, 0.16); }
.hf-video-modal__body {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
}
.hf-video-modal__player {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}
/* WebKit 의 기본 컨트롤 / 다운로드 / 미디어 키 등 모두 차단 */
.hf-video-modal__player::-webkit-media-controls,
.hf-video-modal__player::-webkit-media-controls-enclosure { display: none !important; }

/* 중앙 큰 play 버튼 — 재생 중에는 숨김 */
.hf-video-modal__play-big {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 36px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55);
  transition: opacity 0.18s, transform 0.18s, background 0.18s;
}
.hf-video-modal__play-big:hover {
  background: rgba(38, 153, 251, 0.85);
  transform: translate(-50%, -50%) scale(1.06);
}
.hf-video-modal__player.is-playing ~ .hf-video-modal__play-big {
  opacity: 0;
  pointer-events: none;
}

/* 하단 컨트롤 바 — 재생/일시정지 + 탐색 + 시간 */
.hf-video-modal__controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  pointer-events: none;
}
.hf-video-modal__body:hover .hf-video-modal__controls,
.hf-video-modal__player.is-paused ~ .hf-video-modal__controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hf-video-modal__play {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.18s;
}
.hf-video-modal__play:hover { background: rgba(255, 255, 255, 0.28); }

/* 탐색 range — 영상 진행 위치 이동만 */
.hf-video-modal__seek-wrap {
  flex: 1;
  display: flex; align-items: center;
}
.hf-video-modal__seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right,
    #5BB6FF 0%, #5BB6FF var(--progress, 0%),
    rgba(255, 255, 255, 0.20) var(--progress, 0%),
    rgba(255, 255, 255, 0.20) 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.hf-video-modal__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #2699FB;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.hf-video-modal__seek::-moz-range-thumb {
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #2699FB;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hf-video-modal__time {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* body 스크롤 잠금 — JS 가 .is-modal-open 토글 */
body.is-modal-open { overflow: hidden; }

/* ─── 반응형 보정 ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .hf-demo__stage { min-height: 540px; }
  .hf-demo__panel { padding: 22px; gap: 18px; }
  .hf-demo__panel-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hf-demo__panel-visual { min-height: 180px; }
  .hf-cust { width: 110px; height: 56px; margin: 0 8px; padding: 10px 14px; }
  .hf-cust img { max-height: 28px; }
}

/* ============================================================================
   SCENARIO A — 자사몰 현황·퍼널 분석 데모 전용 스타일
   사용 stage: wizard (사용자 메시지) → analysis (AI 응답 with funnel chart)
   ============================================================================ */

/* ─── STAGE 2 (wizard) — 사용자 메시지 single bubble ─────────────────────── */
.page-home2 .hf-user-stage { padding: 0 4px; }
.page-home2 .sq-ai-conv--user-only { gap: 8px; }
.page-home2 .sq-ai-conv__msg--user {
  align-self: flex-end;
  align-items: flex-end;
  max-width: 100%;
}
.page-home2 .sq-ai-conv__user-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: #64748B;
  letter-spacing: -0.012em;
}
.page-home2 .sq-ai-conv__user-meta i { font-size: 14px; color: #94A3B8; }
.page-home2 .sq-ai-conv__user-time {
  margin-left: 4px;
  font-weight: 500;
  font-size: 11.5px;
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
}
.page-home2 .sq-ai-conv__msg--user .sq-ai-conv__bubble {
  width: fit-content;
  max-width: 560px;
  padding: 12px 16px;
  background: linear-gradient(160deg, #2699FB, #5BB6FF);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  font-size: 14px; font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 10px 22px -10px rgba(38, 153, 251, 0.45);
  letter-spacing: -0.012em;
}
.page-home2 .sq-ai-conv__msg--user .sq-ai-conv__bubble p { margin: 0; }
.page-home2 .sq-ai-conv__msg--user .sq-ai-conv__bubble p + p { margin-top: 2px; }

/* ─── STAGE 3 (analysis) — 섹션 드롭다운 badge ──────────────────────────── */
.page-home2 .hf-anal__sec {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: #EFF6FF;
  border: 1px solid #DBE9FF;
  border-radius: 10px;
  margin-bottom: 14px;
}
.page-home2 .hf-anal__sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: #1664A9;
  letter-spacing: -0.012em;
}
.page-home2 .hf-anal__sec-tag i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: #2699FB;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
}
.page-home2 .hf-anal__sec-toggle { font-size: 16px; color: #94A3B8; }

/* ─── 퍼널 차트 (5단계 bar) ──────────────────────────────────────────────── */
.page-home2 .hf-funnel {
  margin: 18px 0 22px;
  padding: 20px 22px 24px;
  background: #F8FAFE;
  border: 1px solid #E5EEF9;
  border-radius: 14px;
}
.page-home2 .hf-funnel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-home2 .hf-funnel__period {
  font-size: 12px; font-weight: 600;
  color: #64748B;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}
.page-home2 .hf-funnel__legend {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 600;
  color: #475569;
}
.page-home2 .hf-funnel__legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.page-home2 .hf-funnel__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
}
.page-home2 .hf-funnel__dot--conv { background: #5BB6FF; }
.page-home2 .hf-funnel__dot--drop { background: #B794F4; }

.page-home2 .hf-funnel__chart {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: stretch;
}
.page-home2 .hf-funnel__axis {
  list-style: none;
  margin: 0; padding: 0;
  height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11px; font-weight: 600;
  color: #94A3B8;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.page-home2 .hf-funnel__axis li { line-height: 1; }
.page-home2 .hf-funnel__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: start;
  position: relative;
}
.page-home2 .hf-funnel__bars::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 220px;
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    #E5EEF9 calc(25% - 1px),
    #E5EEF9 25%
  );
  pointer-events: none;
}
.page-home2 .hf-funnel__bar {
  display: flex; flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* col = 고정 220px 차트 영역. 안의 conv/drop seg 가 inline % 로 바닥부터 쌓임 — bar_pct% 만큼만 채워짐 */
.page-home2 .hf-funnel__col {
  width: 100%;
  max-width: 86px;
  height: 220px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: relative;
}
.page-home2 .hf-funnel__seg {
  display: block;
  width: 100%;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home2 .hf-funnel__seg--drop {
  background: linear-gradient(180deg, #B794F4, #9F7AEA);
}
.page-home2 .hf-funnel__seg--conv {
  background: linear-gradient(180deg, #5BB6FF, #2699FB);
}

.page-home2 .hf-funnel__lbl {
  margin-top: 10px;
  font-size: 12.5px; font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.012em;
  text-align: center;
  word-break: keep-all;
  line-height: 1.3;
}
.page-home2 .hf-funnel__val {
  margin-top: 6px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.012em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.page-home2 .hf-funnel__val--total { color: #0F172A; font-size: 14px; font-weight: 800; }
.page-home2 .hf-funnel__val--conv  { color: #1664A9; }
.page-home2 .hf-funnel__val--drop  { color: #7C3AED; }
.page-home2 .hf-funnel__val-sub {
  margin-top: 2px;
  font-size: 11px; font-weight: 500;
  color: #94A3B8;
  text-align: center;
}

/* ─── AI 안내 박스 ──────────────────────────────────────────────────────── */
.page-home2 .hf-anal__notice {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0;
  padding: 12px 14px;
  background: #F1F5FB;
  border: 1px solid #E5EEF9;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #64748B;
  letter-spacing: -0.012em;
  word-break: keep-all;
}
.page-home2 .hf-anal__notice i {
  flex-shrink: 0;
  font-size: 16px;
  color: #2699FB;
  margin-top: 1px;
}
.page-home2 .hf-anal__notice span { display: block; }

/* ─── 후속 질문 칩 ──────────────────────────────────────────────────────── */
.page-home2 .hf-anal__next {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.page-home2 .hf-anal__next-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #E5EEF9;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: #1664A9;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  width: fit-content;
}
.page-home2 .hf-anal__next-item:hover {
  background: #F4F8FF;
  border-color: #DBE9FF;
}
.page-home2 .hf-anal__next-item i { font-size: 14px; color: #2699FB; }

/* ─── 반응형 보정 ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .page-home2 .hf-funnel { padding: 16px 14px 18px; }
  .page-home2 .hf-funnel__chart { grid-template-columns: 30px 1fr; gap: 4px; }
  .page-home2 .hf-funnel__axis { height: 170px; font-size: 10px; }
  .page-home2 .hf-funnel__col { height: 170px; }
  .page-home2 .hf-funnel__bars::before { height: 170px; }
  .page-home2 .hf-funnel__bars { gap: 8px; }
  .page-home2 .hf-funnel__lbl { font-size: 11px; }
  .page-home2 .hf-funnel__val { font-size: 10.5px; }
  .page-home2 .hf-funnel__val--total { font-size: 12.5px; }
}

/* ============================================================================
   SCENARIO B 확장 — 세그먼트 추천 + 모수 + CRM 생성 모달
   ============================================================================ */

/* hf-reveal 패턴 — 기본 hide, .is-shown 시 reveal (snappush 기본 룰보다 specificity 높게) */
.page-home2 .sq-ai-conv__msg.hf-reveal { display: none; }
.page-home2 .sq-ai-conv__msg.hf-reveal.is-shown {
  display: flex;
  animation: hfMsgFadeIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hfMsgFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 세그먼트 조건 카드 ────────────────────────────────────────────────── */
.page-home2 .hf-seg-card {
  margin: 18px 0 16px;
  border: 1px solid #E5EEF9;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.page-home2 .hf-seg-card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: #F8FAFE;
  border-bottom: 1px solid #E5EEF9;
}
.page-home2 .hf-seg-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: #E0EEFF;
  color: #1664A9;
  border-radius: 8px;
  font-size: 16px;
  flex-shrink: 0;
}
.page-home2 .hf-seg-card__title {
  flex: 1;
  margin: 0;
  font-size: 14px; font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.012em;
  line-height: 1.4;
  word-break: keep-all;
}
.page-home2 .hf-seg-card__tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: #F1F5FB;
  color: #64748B;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.012em;
  flex-shrink: 0;
}
.page-home2 .hf-seg-card__body {
  padding: 18px 20px;
  display: flex; flex-direction: column;
  gap: 14px;
}

/* 조건 블록 — 각 조건은 흰 카드 안의 그룹 박스 */
.page-home2 .hf-seg-cond {
  padding: 14px 16px;
  background: #FAFBFD;
  border: 1px solid #EEF2F7;
  border-radius: 10px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.page-home2 .hf-seg-cond__crumb {
  display: inline-flex;
  padding: 4px 10px;
  background: #E0EEFF;
  color: #1664A9;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: -0.012em;
  width: fit-content;
}
.page-home2 .hf-seg-cond__rule {
  margin: 0;
  font-size: 13.5px; font-weight: 600;
  color: #0F172A;
  letter-spacing: -0.012em;
  line-height: 1.5;
}
.page-home2 .hf-seg-cond__rule b { color: #0F172A; font-weight: 800; }
.page-home2 .hf-seg-cond__chips {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.page-home2 .hf-seg-cond__chip-label {
  font-size: 11.5px; font-weight: 600;
  color: #64748B;
}
.page-home2 .hf-seg-cond__chip {
  display: inline-flex;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #DBE9FF;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 600;
  color: #1664A9;
}

/* AND 구분자 */
.page-home2 .hf-seg-card__sep {
  display: flex; align-items: center;
  margin: 2px 0;
  position: relative;
}
.page-home2 .hf-seg-card__sep::before,
.page-home2 .hf-seg-card__sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5EEF9;
}
.page-home2 .hf-seg-card__sep span {
  margin: 0 14px;
  padding: 4px 14px;
  background: #fff;
  border: 1px solid #DBE9FF;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: #2699FB;
  letter-spacing: 0.02em;
}

/* 세부조건 헤더 */
.page-home2 .hf-seg-card__sub-head {
  display: flex; align-items: center; gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed #E5EEF9;
}
.page-home2 .hf-seg-card__sub-bar {
  display: inline-block;
  width: 3px; height: 14px;
  background: #2699FB;
  border-radius: 2px;
}
.page-home2 .hf-seg-card__sub-title {
  font-size: 12.5px; font-weight: 700;
  color: #0F172A;
}
.page-home2 .hf-seg-card__sub-desc {
  font-size: 11.5px; font-weight: 500;
  color: #94A3B8;
  letter-spacing: -0.012em;
}

/* 카드 안내 (info) */
.page-home2 .hf-seg-card__notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  padding: 12px 18px;
  background: #F1F5FB;
  border-top: 1px solid #E5EEF9;
  font-size: 11.5px; line-height: 1.55;
  color: #64748B;
  letter-spacing: -0.012em;
}
.page-home2 .hf-seg-card__notice i {
  font-size: 14px;
  color: #2699FB;
  flex-shrink: 0;
  margin-top: 2px;
}
.page-home2 .hf-seg-card__notice span { display: block; }

/* CTA 버튼 영역 */
.page-home2 .hf-seg-card__cta {
  display: flex; gap: 10px;
  padding: 14px 18px;
  background: #fff;
  border-top: 1px solid #E5EEF9;
}
.page-home2 .hf-seg-card__btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.012em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.page-home2 .hf-seg-card__btn--primary {
  background: #2699FB;
  color: #fff;
}
.page-home2 .hf-seg-card__btn--primary:hover { background: #1F84DC; }
.page-home2 .hf-seg-card__btn--ghost {
  background: #fff;
  color: #1664A9;
  border-color: #DBE9FF;
}
.page-home2 .hf-seg-card__btn--ghost:hover {
  background: #F4F8FF;
  border-color: #2699FB;
}

.page-home2 .hf-anal__cta {
  margin-top: 14px;
  display: inline-block;
}
.page-home2 .hf-anal__p--lead {
  margin-top: 18px;
  font-weight: 700;
}

/* ─── 모수 결과 표 (4-column) ────────────────────────────────────────────── */
/* 모수 결과가 들어가는 메시지 버블은 기본(720px)보다 넓혀 컬럼이 겹치지 않게 한다 */
.page-home2 .sq-ai-conv__msg[data-reveal="count"] {
  max-width: 860px;
}

.page-home2 .hf-count-table {
  display: grid;
  border: 1px solid #E5EEF9;
  border-radius: 10px;
  overflow: hidden;
  margin: 14px 0;
  background: #fff;
}
.page-home2 .hf-count-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1.2fr;
  align-items: center;
  column-gap: 16px;
  padding: 12px 18px;
  font-size: 12.5px;
  color: #0F172A;
  letter-spacing: -0.012em;
  border-bottom: 1px solid #EEF2F7;
}
.page-home2 .hf-count-table__row:last-child { border-bottom: none; }
.page-home2 .hf-count-table__row--head {
  background: #F1F5FB;
  font-weight: 700;
  color: #475569;
  font-size: 11.5px;
}
/* 2~4 컬럼(숫자 또는 숫자 헤더)은 오른쪽 정렬 — 1열 긴 텍스트와 시각적으로 분리 */
.page-home2 .hf-count-table__row > *:nth-child(n+2) {
  justify-self: end;
  text-align: right;
}
.page-home2 .hf-count-table__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-home2 .hf-count-table__num b { color: #0F172A; font-weight: 800; }

/* ─── AI 인사이트 박스 ──────────────────────────────────────────────────── */
.page-home2 .hf-insight {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 10px 0;
  padding: 12px 14px;
  background: #F1F5FB;
  border: 1px solid #DBE9FF;
  border-radius: 10px;
}
.page-home2 .hf-insight__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: linear-gradient(160deg, #2699FB, #5BB6FF);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
}
.page-home2 .hf-insight__body { flex: 1; }
.page-home2 .hf-insight__label {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  color: #1664A9;
  letter-spacing: -0.012em;
  margin-bottom: 2px;
}
.page-home2 .hf-insight__body p {
  margin: 0;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.55;
  letter-spacing: -0.012em;
}

/* ─── CRM 생성 확인 모달 ──────────────────────────────────────────────────
   .sq-chat 직속 배치 → position: absolute; inset: 0 이 chat 전체 영역에 매핑.
   stage scroll 위치와 무관하게 항상 viewport 안에 panel 이 자리잡음. */
.page-home2 .hf-confirm-modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 50;
}
/* 모달 위에서 가상 커서가 OK 버튼을 클릭하는 애니메이션이 보이도록 cursor 를
   modal(z-index:50) 보다 위에 둠. */
.page-home2 .sq-ai-cursor { z-index: 60; }
.page-home2 .hf-confirm-modal.is-open { display: flex; }
.page-home2 .hf-confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  animation: hfModalBackdropIn 200ms ease both;
}
.page-home2 .hf-confirm-modal__panel {
  position: relative;
  z-index: 1;
  width: min(320px, 88%);
  padding: 22px 22px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.25);
  text-align: center;
  animation: hfModalPanelIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-home2 .hf-confirm-modal__title {
  margin: 0 0 10px;
  font-size: 15px; font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.012em;
}
.page-home2 .hf-confirm-modal__desc {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.55;
  letter-spacing: -0.012em;
  word-break: keep-all;
}
.page-home2 .hf-confirm-modal__btns {
  display: flex; gap: 8px;
  justify-content: center;
}
.page-home2 .hf-confirm-modal__btn {
  flex: 1;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.012em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.page-home2 .hf-confirm-modal__btn--cancel {
  background: #fff;
  border-color: #E5EEF9;
  color: #64748B;
}
.page-home2 .hf-confirm-modal__btn--cancel:hover {
  background: #F8FAFE;
  border-color: #DBE9FF;
}
.page-home2 .hf-confirm-modal__btn--ok {
  background: #2699FB;
  color: #fff;
}
.page-home2 .hf-confirm-modal__btn--ok:hover { background: #1F84DC; }

@keyframes hfModalBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hfModalPanelIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── 반응형 ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .page-home2 .hf-seg-card__head { padding: 12px 14px; }
  .page-home2 .hf-seg-card__body { padding: 14px 14px; gap: 10px; }
  .page-home2 .hf-seg-card__cta { padding: 12px 14px; }
  .page-home2 .hf-count-table__row {
    grid-template-columns: 1.5fr 0.9fr 1.2fr 1fr;
    column-gap: 10px;
    padding: 10px 14px;
    font-size: 11.5px;
  }
  .page-home2 .sq-ai-conv__msg[data-reveal="count"] { max-width: 100%; }
}

/* ============================================================================
   모바일 spacing 일괄 보정 — 데모/패널 영역 (cascade 마지막에서 override)
   기존 @media 규칙으로 커버되지 않은 항목들 보강.
   구조 변경 없이 추가 CSS 로만 처리.
   ============================================================================ */

/* ─── 1100px 이하 — sidebar/visuals stack 모드 보강 ─── */
@media (max-width: 1100px) {
  .page-home2 .hf-feat { margin-top: clamp(48px, 8vw, 80px); }
  .page-home2 .hf-feat__head { margin-bottom: 20px; }
  /* sidebar 가 sticky 해제되면서 chip body 가 정적으로 펼쳐짐 — 위아래 여백 압축 */
  .page-home2 .hf-feat__chip { padding: 14px 4px; }
  .page-home2 .hf-feat__chip.is-active .hf-feat__chip-title { font-size: 18px; }
  .page-home2 .hf-feat__chip-title { font-size: 15px; }
  /* visuals — 패널 사이 gap 살짝 더 압축, 컨테이너 패딩 줄임 */
  .page-home2 .hf-feat__visuals {
    gap: clamp(40px, 7vw, 56px);
    padding: clamp(18px, 3vw, 24px);
    border-radius: 16px;
  }
}

/* ─── 720px 이하 — 핵심 모바일 보정 ─── */
@media (max-width: 720px) {
  /* 섹션 전체 간격 — 헤더 영역 압축 */
  .page-home2 .hf-feat__visuals { padding: 14px; gap: 32px; border-radius: 14px; }
  .page-home2 .hf-feat__chip { padding: 12px 2px; }
  .page-home2 .hf-feat__chip.is-active .hf-feat__chip-title { font-size: 16.5px; }
  .page-home2 .hf-feat__chip-desc { font-size: 13px; margin: 10px 0 8px; line-height: 1.55; }
  .page-home2 .hf-feat__chip-tag { font-size: 11.5px; }

  /* 채팅 thread / 메시지 버블 */
  .page-home2 .hf-feat__chat { gap: 12px; }
  .page-home2 .hf-feat__user-bubble { padding: 9px 12px; font-size: 12.5px; max-width: 90%; }
  .page-home2 .hf-feat__user-meta { font-size: 11px; }
  .page-home2 .hf-feat__bot-meta  { font-size: 11px; }
  .page-home2 .hf-feat__brand-mark { width: 20px; height: 20px; font-size: 11px; }
  .page-home2 .hf-feat__bot-body {
    padding: 12px 12px 14px;
    gap: 10px;
    border-radius: 10px 10px 10px 4px;
  }
  .page-home2 .hf-feat__bot-intro { font-size: 12.5px; line-height: 1.55; }
  .page-home2 .hf-feat__sec-tag { padding: 5px 10px; font-size: 11px; }

  /* accent header (📈 추천 캠페인 / 메시지 전략 등) */
  .page-home2 .hf-feat-accent {
    padding: 9px 12px;
    font-size: 12.5px;
    gap: 8px;
    border-radius: 8px;
  }
  .page-home2 .hf-feat-accent i { font-size: 15px; }

  /* AI 인사이트 callout */
  .page-home2 .hf-feat-insight { padding: 10px 12px; gap: 8px; }
  .page-home2 .hf-feat-insight__icon { width: 22px; height: 22px; font-size: 11px; }
  .page-home2 .hf-feat-insight__lbl { font-size: 10.5px; }
  .page-home2 .hf-feat-insight__body p { font-size: 11.5px; line-height: 1.5; }

  /* 패널 하단 note (🎯 ...) */
  .page-home2 .hf-feat__panel-note {
    padding: 10px 12px;
    margin-top: 14px;
    font-size: 11.5px;
    gap: 6px;
    line-height: 1.5;
  }
  .page-home2 .hf-feat__panel-note i { font-size: 14px; }

  /* 메시지 preview 카드 (카카오 말풍선 mock) */
  .page-home2 .hf-feat-msg-preview { padding: 12px; }
  .page-home2 .hf-feat-msg-preview__bubble { padding: 12px 14px; }
  .page-home2 .hf-feat-msg-preview__bubble p { font-size: 12px; }

  /* 베스트 상품 표 — 행 압축 + 가격이 좁아도 줄바꿈되지 않게 */
  .page-home2 .hf-feat-best { padding: 6px; }
  .page-home2 .hf-feat-best__row {
    grid-template-columns: 34px 1fr auto;
    gap: 8px;
    padding: 6px;
  }
  .page-home2 .hf-feat-best__img { width: 34px; height: 34px; border-radius: 7px; }
  .page-home2 .hf-feat-best__name { font-size: 11.5px; }
  .page-home2 .hf-feat-best__cat  { font-size: 10.5px; }
  .page-home2 .hf-feat-best__val  { font-size: 11.5px; white-space: nowrap; }

  /* 캐러셀 — 2x2 grid 카드 컴팩트 */
  .page-home2 .hf-feat-carousel { padding: 10px; gap: 8px; border-radius: 10px; }
  .page-home2 .hf-feat-carousel__img { height: 76px; }
  .page-home2 .hf-feat-carousel__body { padding: 9px 10px 10px; gap: 5px; }
  .page-home2 .hf-feat-carousel__title { font-size: 11.5px; }
  .page-home2 .hf-feat-carousel__desc  { font-size: 10.5px; line-height: 1.45; }
  .page-home2 .hf-feat-carousel__btn   { padding: 5px 0; font-size: 10.5px; margin-top: 2px; }

  /* 일반 표 (.hf-feat-tbl) — 폰트·패딩 축소 + 가로 스크롤 허용 */
  .page-home2 .hf-feat__bot-body .hf-feat-tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 8px;
  }
  .page-home2 .hf-feat-tbl thead th { padding: 8px 10px; font-size: 10.5px; }
  .page-home2 .hf-feat-tbl td       { padding: 8px 10px; font-size: 10.5px; }

  /* 발송 유형 비교 표 (.hf-feat-rep__cmp) */
  .page-home2 .hf-feat-rep { gap: 14px; }
  .page-home2 .hf-feat-rep__cmp { font-size: 11.5px; }
  .page-home2 .hf-feat-rep__cmp th { padding: 8px 10px; font-size: 10.5px; }
  .page-home2 .hf-feat-rep__cmp td { padding: 9px 10px; }
  .page-home2 .hf-feat-rep__points li { padding: 10px 12px; font-size: 11.5px; gap: 8px; }
  .page-home2 .hf-feat-rep__pno { width: 20px; height: 20px; font-size: 10px; }

  /* AI 데모 thread — 메시지 사이 간격 (snappush.js 가 stage stack 으로 보여줄 때) */
  .page-home2 .sq-ai-stages { gap: 12px; }
  .page-home2 .sq-ai-conv__msg { padding: 0; }
  .page-home2 .hf-seg-card__head .hf-seg-card__title { font-size: 13.5px; }
}

/* ─── 640px 이하 — 그리드 1-col 강제 + 카드 스와이퍼 변환 ─── */
@media (max-width: 640px) {
  /* 🅰 Matrix·세그먼트성과·이동트래킹·AI프리셋 카드 (스크린샷 그것)
     2-col 강제로 칼럼 폭이 너무 좁아 글자 단위로 줄바꿈됨 → 1-col */
  .hf-seg__features,
  .hf-recm__features {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 🅱 재유입 시나리오 카드 (패널 4, 3장) — 가로 스와이퍼화 */
  .page-home2 .hf-feat-strat__cards {
    position: relative;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    gap: 12px;
    /* visuals 패딩(14px)을 좌우로 빼서 카드가 화면 끝까지 닿도록 */
    margin: 0 -14px;
    padding: 4px 14px 6px;
    /* 스크롤바 숨김 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .page-home2 .hf-feat-strat__cards::-webkit-scrollbar { display: none; }
  .page-home2 .hf-feat-strat__cards > li {
    flex: 0 0 calc(82% - 6px);   /* 다음 카드가 살짝 보이도록 (peek) */
    scroll-snap-align: start;
    min-height: 140px;
  }

  /* 🅱 친구톡 캐러셀 (패널 4, 4장) — 가로 스와이퍼화 */
  .page-home2 .hf-feat-carousel {
    position: relative;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 12px;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .page-home2 .hf-feat-carousel::-webkit-scrollbar { display: none; }
  .page-home2 .hf-feat-carousel__card {
    flex: 0 0 calc(68% - 4px);   /* 4장 → 다음 카드 peek */
    scroll-snap-align: start;
  }
}

/* ─── 스와이퍼 dots 인디케이터 (JS 가 동적으로 swiper 컨테이너 뒤에 부착) ─── */
.page-home2 .hf-swiper-dots {
  display: none;        /* 데스크탑 / 태블릿에선 숨김 — 모바일에서만 보임 */
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.page-home2 .hf-swiper-dots__dot {
  display: block;
  width: 6px; height: 6px;
  padding: 0;
  background: #CBD5E1;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.28s ease, background 0.28s ease;
}
.page-home2 .hf-swiper-dots__dot:hover  { background: #94A3B8; }
.page-home2 .hf-swiper-dots__dot.is-active {
  width: 22px;
  background: #2699FB;
}
@media (max-width: 640px) {
  .page-home2 .hf-swiper-dots { display: flex; }
}

/* ─── 480px 이하 — 좁은 폰 (iPhone SE 등) — 추가 압축 ─── */
@media (max-width: 480px) {
  .page-home2 .hf-feat__visuals { padding: 12px; gap: 28px; }
  .page-home2 .hf-feat__bot-body { padding: 10px 10px 12px; gap: 8px; }
  .page-home2 .hf-feat__user-bubble { font-size: 12px; padding: 8px 11px; }
  .page-home2 .hf-feat__bot-intro { font-size: 12px; }

  /* 베스트 상품 — 카테고리 라벨 숨김 + 행 간격 더 압축 */
  .page-home2 .hf-feat-best__row { gap: 7px; padding: 5px 5px; }
  .page-home2 .hf-feat-best__cat { display: none; }
  .page-home2 .hf-feat-best__name { font-size: 11.5px; }
  .page-home2 .hf-feat-best__val  { font-size: 11px; }

  /* 캐러셀 — 매우 좁은 화면에선 1열 (640px 룰을 480px 까지 끌어옴) */
  .page-home2 .hf-feat-carousel__desc { font-size: 10px; -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

  /* 표 — 더 컴팩트 */
  .page-home2 .hf-feat-tbl thead th,
  .page-home2 .hf-feat-tbl td { padding: 7px 8px; font-size: 10px; }
  .page-home2 .hf-feat-rep__cmp { font-size: 11px; }
  .page-home2 .hf-feat-rep__cmp th,
  .page-home2 .hf-feat-rep__cmp td { padding: 7px 8px; }

  /* 모수 표 — 매우 좁을 때 2열로 떨어뜨림 (1열: 세그먼트, 2-4열: 숫자) */
  .page-home2 .hf-count-table__row {
    grid-template-columns: 1.3fr 1fr 1.1fr 1fr;
    column-gap: 8px;
    padding: 9px 12px;
    font-size: 10.5px;
  }
  .page-home2 .hf-count-table__row--head { font-size: 10px; }

  /* accent / insight / note */
  .page-home2 .hf-feat-accent { font-size: 12px; padding: 8px 11px; }
  .page-home2 .hf-feat__panel-note { font-size: 11px; }
  .page-home2 .hf-feat-insight__body p { font-size: 11px; }
}