/* ══════════════════════════════════════════════════════════════════════
   kf-intro.css — 홈 부분 개선 + 「배대지가 처음이신가요」 (handoff5)
   전달 패키지: 「김빠른 처음이신가요 시안」 2026-08-17

   ★ 이번 작업은 **부분 패치**다. 홈을 새로 만들지 않는다.
     조회 카드 아래에 블록 2개(샘플 카드 · 배너 슬라이드)를 끼우고,
     슬라이드 1이 가리키는 안내 페이지 1개를 만든다.
     히어로 · 조회 카드 · 그 아래 홈 전부 · 앱바 · 푸터는 손대지 않는다.

   대표 지시 (2026-08-17)
     - 「배대지가 뭔지부터 알고 싶어요」 안내 링크 행은 **만들지 않는다**
       (안내 페이지 진입은 배너 슬라이드 1 하나로 충분)
     - 샘플 카드 썸네일에 실제 샘플 상품 사진을 넣는다
     - 기존 등급 프로모션 큰 배너·얇은 띠는 슬라이드 2로 내린다

   ★ 이전 납품에서 실제로 걸렸던 결함 4가지 — 여기서 구조로 막는다
     1. 배너 트랙을 left/margin 으로 옮김      → transform 만
     2. 슬라이드 2 글이 장식 원에 덮임          → 글 래퍼 z-index:2
     3. 점 클릭 영역이 6px                     → 44×44 버튼 + 안쪽 span
     4. 하단 CTA 뒤 콘텐츠가 비침               → 불투명 배경 + 페이드 띠 별도
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 샘플 진입 (01) ─────────────────────────────────────────────── */
/* 조회 카드 **밖**이다. 안에 넣으면 배대지 선택·URL 입력과 섞여 버튼으로 읽히지 않는다. */
.kfi-sample__lead{
  margin:20px 0 8px;                      /* 조회 카드로부터 20px */
  font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-600);
}
.kfi-sample{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:14px 16px; border:1.5px solid var(--blue-100); border-radius:20px;
  background:var(--white); text-align:left; cursor:pointer; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:background-color 150ms cubic-bezier(.4,0,.2,1);
}
.kfi-sample:active{ background:var(--grey-50); }
/* 썸네일 52×52 — 이미지가 없어도 레이아웃이 무너지지 않게 고정 */
.kfi-sample__th{
  position:relative; flex:none; width:52px; height:52px;
  border-radius:14px; background:var(--grey-100); overflow:hidden;
}
.kfi-sample__th img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 「샘플」 띠 — 이미지가 들어와도 그대로 얹는다. 없으면 실제 주문 상품으로 오해한다 */
.kfi-sample__tag{
  position:absolute; left:0; right:0; bottom:0; padding:2px 0;
  background:rgba(25,31,40,.72); color:var(--white);
  font-size:11px; line-height:16.5px; font-weight:700; letter-spacing:.04em; text-align:center;
}
 /* 마크업이 <button> 안이라 자식이 전부 <span>(인라인)이다.
    block 으로 두지 않으면 줄 높이가 어긋나 카드 높이가 시안과 달라진다. */
.kfi-sample__tx{ flex:1; min-width:0; }
.kfi-sample__t, .kfi-sample__s{ display:block; }
.kfi-sample__t{ margin:0; font-size:17px; line-height:25.5px; font-weight:600; color:var(--grey-900); }
.kfi-sample__s{ margin:1px 0 0; font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-600); }
/* 꺾쇠가 회색이 아니라 **파랑**이다 — 이 카드가 능동 경로임을 나타낸다 */
.kfi-sample__go{ flex:none; width:18px; height:18px; color:var(--blue-500); }

/* ── 2. 배너 슬라이드 (02) ─────────────────────────────────────────── */
.kfi-carousel{ margin-top:24px; }         /* 샘플 카드로부터 24px */
.kfi-clip{ overflow:hidden; }             /* 없으면 두 장이 다 보인다 */
.kfi-track{
  display:flex; width:200%;
  transition:transform 350ms cubic-bezier(.19,1,.22,1);
}
/* flex:none 이 없으면 슬라이드가 줄어든다 */
.kfi-slide{ width:50%; flex:none; }
.kfi-track--1{ width:100%; }              /* 프로모션 종료 시 1장만 */
.kfi-track--1 .kfi-slide{ width:100%; }

/* 슬라이드 공통 */
.kfi-banner{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:18px 20px; border:0; border-radius:20px;
  text-align:left; cursor:pointer; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:background-color 150ms cubic-bezier(.4,0,.2,1);
}
/* 슬라이드 1 — 흰 배너 */
.kfi-banner--intro{ background:var(--white); box-shadow:var(--shadow-card); }
.kfi-banner--intro:active{ background:var(--grey-50); }
.kfi-banner__ic{
  flex:none; width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-50); color:var(--blue-500);
}
.kfi-banner__ic svg{ width:22px; height:22px; }
.kfi-banner__tx{ flex:1; min-width:0; }
.kfi-banner__t, .kfi-banner__s{ display:block; }
.kfi-banner__t{ margin:0; font-size:17px; line-height:25.5px; font-weight:600; color:var(--grey-900); }
.kfi-banner__s{ margin:1px 0 0; font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-600); }
.kfi-banner__go{ flex:none; width:18px; height:18px; color:var(--grey-400); }

/* 슬라이드 2 — 프로모션 그라디언트. 그림자를 넣지 않는다 (이미 무겁다) */
.kfi-banner--promo{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#1b64da 0%,#3182f6 100%);
}
.kfi-banner__art{
  position:absolute; right:-24px; top:-28px; width:120px; height:120px;
  border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none;
}
/* ★ 없으면 장식 원이 글자를 덮는다 */
.kfi-banner--promo .kfi-banner__tx,
.kfi-banner--promo .kfi-banner__go{ position:relative; z-index:2; }
.kfi-badge{
  display:flex; width:max-content; align-items:center; gap:5px; height:22px; padding:0 8px;
  margin:0 0 6px; border-radius:9999px; background:rgba(255,255,255,.18);
}
.kfi-badge i{ width:4px; height:4px; border-radius:50%; background:var(--yellow-500); flex:none; }
.kfi-badge span{ font-size:12px; line-height:18px; font-weight:600; color:#fff; white-space:nowrap; }
.kfi-banner--promo .kfi-banner__t{ color:#fff; }
.kfi-banner--promo .kfi-banner__s{ color:rgba(255,255,255,.78); }
.kfi-banner--promo .kfi-banner__go{ color:rgba(255,255,255,.7); }

/* 점 — 시각 알약은 6px 이지만 **버튼은 44×44** 다 */
.kfi-dots{
  display:flex; justify-content:center; align-items:center; gap:8px;
  height:44px; margin-top:2px;
}
.kfi-dot{
  height:44px; min-width:44px; padding:0 2px; border:0; background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.kfi-dot span{
  display:block; width:6px; height:6px; border-radius:9999px; background:var(--grey-300);
  transition:width 300ms cubic-bezier(.19,1,.22,1), background-color 200ms cubic-bezier(.4,0,.2,1);
}
.kfi-dot.is-on span{ width:18px; background:var(--blue-500); }

/* ── 3. 안내 페이지 (03) ───────────────────────────────────────────── */
.kfi-page{ background:var(--grey-100); min-height:100vh; }
/* 하단 CTA 뒤로 타임라인이 지나가므로 여유 132px */
.kfi-main{ padding-bottom:132px; }
/* h1 블록 위 여백 — 앱바 바로 아래에 붙으면 제목이 눌려 보인다 */
.kfi-in--1{ margin-top:24px; }
@media (min-width:768px){ .kfi-in--1{ margin-top:40px; } }

.kfi-h1{
  margin:0; font-size:28px; line-height:37px; font-weight:700;
  letter-spacing:-.02em; color:var(--grey-900); text-wrap:pretty;
}
.kfi-h1__s{ margin:8px 0 0; font-size:17px; line-height:25.5px; font-weight:500; color:var(--grey-600); }
/* 섹션 제목은 카드 **밖**이다 — 스크롤할 때 앵커가 된다 */
.kfi-h2{
  margin:36px 0 12px; font-size:22px; line-height:31px; font-weight:700;
  letter-spacing:-.01em; color:var(--grey-900);
}

/* 정의 카드 — 이 페이지에서 가장 먼저 읽어야 할 한 문장이라 파란 배경 + 19px */
.kfi-def{
  margin-top:20px; padding:24px 20px; border-radius:20px; background:var(--blue-50);
}
.kfi-def__l{ margin:0 0 10px; font-size:15px; line-height:22.5px; font-weight:600; color:var(--blue-700); }
.kfi-def__b{
  margin:0; font-size:19px; line-height:28px; font-weight:400;
  letter-spacing:-.01em; color:var(--grey-900); text-wrap:pretty;
}
.kfi-def__b b{ font-weight:700; }
.kfi-def__f{ margin:10px 0 0; font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-700); }

/* 카드 공통 */
.kfi-card{
  background:var(--white); border-radius:20px; padding:22px 20px; box-shadow:var(--shadow-card);
}
.kfi-card + .kfi-card{ margin-top:10px; }
.kfi-card__t{
  margin:0; font-size:19px; line-height:28px; font-weight:600;
  letter-spacing:-.01em; color:var(--grey-900);
}
.kfi-card__b{ margin:6px 0 0; font-size:17px; line-height:25.5px; color:var(--grey-700); text-wrap:pretty; }
.kfi-card__b b{ font-weight:600; color:var(--grey-900); }

/* 금액 줄 */
.kfi-price{
  display:flex; align-items:baseline; gap:8px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--grey-200);
}
.kfi-price__l{ font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-600); }
.kfi-price__v{
  font-size:19px; line-height:28px; font-weight:700; color:var(--blue-700);
  font-variant-numeric:tabular-nums;
}

/* 예시 박스 — 배경 없이 테두리만 */
.kfi-ex{ margin-top:18px; padding:14px 16px; border:1.5px solid var(--grey-200); border-radius:14px; }
.kfi-ex__l{ margin:0 0 6px; font-size:13px; line-height:19.5px; font-weight:500; color:var(--grey-500); }
.kfi-ex__v{
  margin:0; font-size:19px; line-height:28px; font-weight:500;
  letter-spacing:.01em; color:var(--grey-900);
}
/* 색만으로 구분하지 않는다 — 굵기와 색을 함께 바꾼다 */
.kfi-ex__v b{ font-weight:700; color:var(--blue-700); }

/* 타임라인 5단계 */
.kfi-steps{ background:var(--white); border-radius:20px; padding:24px 20px; box-shadow:var(--shadow-card); }
.kfi-step{ display:flex; gap:14px; align-items:flex-start; position:relative; padding-bottom:20px; }
.kfi-step:last-child{ padding-bottom:0; }
.kfi-step__line{ position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--grey-200); }
.kfi-step:last-child .kfi-step__line{ background:transparent; }
.kfi-step__n{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:21px; font-weight:700;
  background:var(--grey-100); color:var(--grey-500);
}
.kfi-step:first-child .kfi-step__n{ background:var(--blue-500); color:var(--white); }
.kfi-step__t{ margin:0; font-size:17px; line-height:25.5px; font-weight:600; color:var(--grey-900); }
.kfi-step__b{ margin:2px 0 0; font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-600); }

/* FAQ — 답변은 opacity 만 움직인다. height 를 움직이면 아래가 밀리며 버벅인다 */
.kfi-faq{ background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
.kfi-faq__row + .kfi-faq__row{ box-shadow:inset 0 1px 0 0 var(--grey-100); }
.kfi-faq__q{
  display:flex; align-items:flex-start; gap:12px; width:100%; padding:18px 20px;
  border:0; background:none; text-align:left; cursor:pointer; font-family:inherit;
}
.kfi-faq__q span{ flex:1; font-size:17px; line-height:25.5px; font-weight:500; color:var(--grey-900); }
.kfi-faq__c{
  flex:none; width:18px; height:18px; margin-top:4px; color:var(--grey-400);
  transition:transform 200ms cubic-bezier(.4,0,.2,1);
}
.kfi-faq__row.is-open .kfi-faq__c{ transform:rotate(180deg); }
.kfi-faq__a{
  display:none; margin:0; padding:0 20px 18px;
  font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-600); text-wrap:pretty;
}
.kfi-faq__row.is-open .kfi-faq__a{ display:block; animation:kfiFade 200ms cubic-bezier(0,0,.2,1); }

/* 기존 가이드 링크 행 — 카드가 아니다 */
.kfi-more{
  display:flex; align-items:center; gap:12px; width:100%;
  margin-top:20px; padding:16px 4px; border:0; background:none;
  text-align:left; cursor:pointer; font-family:inherit; text-decoration:none;
}
.kfi-more span{ flex:1; font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-700); }
.kfi-more svg{ flex:none; width:16px; height:16px; color:var(--grey-400); }

/* 하단 고정 CTA — 반투명 그라디언트만으로 만들지 않는다 (뒤가 비친다) */
.kfi-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:9;
  padding:0 20px calc(20px + env(safe-area-inset-bottom));
  background:var(--grey-100);
}
.kfi-cta__fade{
  position:absolute; left:0; right:0; top:-28px; height:28px; pointer-events:none;
  background:linear-gradient(to top, #f2f4f6, rgba(242,244,246,0));
}
.kfi-cta__in{ position:relative; }
.kfi-cta__note{
  margin:0 0 8px; text-align:center;
  font-size:14px; line-height:21px; font-weight:500; color:var(--grey-600);
}
.kfi-btn{
  display:flex; align-items:center; justify-content:center; width:100%; height:56px;
  border:0; border-radius:16px; background:var(--blue-500); color:var(--white);
  font-family:inherit; font-size:17px; line-height:25.5px; font-weight:600;
  cursor:pointer; text-decoration:none;
  transition:background-color 150ms cubic-bezier(.4,0,.2,1);
}
.kfi-btn:active{ background:var(--blue-700); }

/* ── 4. 진입 모션 — 7블록 40ms 간격 · 전체 540ms ──────────────────── */
@keyframes kfiUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes kfiFade{ from{ opacity:0 } to{ opacity:1 } }
.kfi-in{
  animation:kfiUp 300ms cubic-bezier(.19,1,.22,1) both;   /* both 가 없으면 delay 동안 먼저 보인다 */
}
.kfi-in--1{ animation-delay:0ms }
.kfi-in--2{ animation-delay:40ms }
.kfi-in--3{ animation-delay:80ms }
.kfi-in--4{ animation-delay:120ms }
.kfi-in--5{ animation-delay:160ms }
.kfi-in--6{ animation-delay:200ms }
.kfi-in--7{ animation-delay:240ms }

@media (prefers-reduced-motion: reduce){
  .kfi-in, .kfi-track, .kfi-dot span, .kfi-faq__c, .kfi-faq__row.is-open .kfi-faq__a,
  .kfi-sample, .kfi-banner, .kfi-btn{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
}

/* ── 5. PC (768px 이상) — 글자 크기는 모바일과 같다 ────────────────── */
@media (min-width:768px){
  .kfi-h1{ margin-top:0; }
}

/* 테마의 `.site-main--page .wp-block-post-content h1/h2` 가 우리 클래스를 이긴다.
   kf-redesign.css §.kfr2-h2 와 같은 방식으로 특이도를 맞춘다 (!important 없이). */
.site-main--page .wp-block-post-content .kfi-h1{
  margin:0; font-size:28px; line-height:37px; font-weight:700; letter-spacing:-.02em; color:var(--grey-900);
}
.site-main--page .wp-block-post-content .kfi-h2{
  margin:36px 0 12px; font-size:22px; line-height:31px; font-weight:700; letter-spacing:-.01em; color:var(--grey-900);
}
.site-main--page .wp-block-post-content .kfi-card__t{
  margin:0; font-size:19px; line-height:28px; font-weight:600; letter-spacing:-.01em; color:var(--grey-900);
}