/* ══════════════════════════════════════════════════════════════════
   김빠른 블로그 — 시안 「김빠른 블로그 디자인시안」
   기준 문서: 00-공통가이드.md · 01-글상세/가이드.md

   ★ 서비스 UI 와 다른 값 4개 (이것만 다르다)
     1. 본문 17px / 행간 30      (서비스는 15~16 / 22.5~24)
     2. PC 읽기 폭 720           (서비스는 560 · 셸은 1000)
     3. 붉은색을 본문 주의 박스에 쓴다   (서비스는 안 쓴다)
     4. 노란색을 주의에 안 쓴다        (서비스는 쓴다) — 3번과 역할이 뒤바뀐다
     5. 배경이 흰색이다            (서비스는 --grey-100 바닥 + 흰 카드)

   색·radius·그림자·모션 토큰은 kf-redesign.css 의 :root 를 그대로 쓴다.
   ══════════════════════════════════════════════════════════════════ */

.kfb{
  --red-bg:#fff5f5;                 /* 블로그 전용 — 본문 주의 박스에만 */
  --shadow-float:0 8px 24px rgba(0,25,60,.28);
  background:var(--white);
  color:var(--grey-700);
  font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.kfb *{box-sizing:border-box}

/* ── 셸 ──────────────────────────────────────────────────────────── */
.kfb-shell,.kfb-rel__in,.kfb-foot__in,.kfb-bar__in{
  max-width:1000px;margin:0 auto;padding-left:20px;padding-right:20px}
.kfb-read{max-width:720px}

/* ── 앱바 + 읽기 진행 바 ─────────────────────────────────────────── */
.kfb-bar{position:sticky;top:0;z-index:60;background:var(--white);
  box-shadow:0 1px 0 0 var(--grey-100)}
.kfb-bar__in{display:flex;align-items:center;gap:8px;height:56px}
.kfb-bar__back{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:-10px;color:var(--grey-800);flex:none}
.kfb-bar__sp{flex:1}
.kfb-bar__ic{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;background:none;color:var(--grey-800);cursor:pointer;flex:none}
.kfb-bar__ic:last-child{margin-right:-10px}
/* 스크롤과 붙어야 하므로 이징을 넣지 않는다 */
.kfb-prog{height:3px;background:var(--grey-100)}
.kfb-prog i{display:block;height:100%;width:0;background:var(--blue-500);
  transition:width .15s linear}

/* ── 글 머리 ─────────────────────────────────────────────────────── */
.kfb-main{padding-top:24px}
.kfb-cat{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;
  background:var(--blue-50);color:var(--blue-700);font-size:13px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.kfb-h1{margin:12px 0 0;font-size:28px;line-height:39px;font-weight:700;letter-spacing:-.02em;
  color:var(--grey-900);text-wrap:pretty}
.kfb-date{margin:12px 0 0;font-size:14px;line-height:21px;color:var(--grey-500);
  font-variant-numeric:tabular-nums}
.kfb-cover{margin-top:24px;border-radius:18px;overflow:hidden;background:var(--blue-50);
  aspect-ratio:16/9}
.kfb-cover .kfr-cover{display:block;width:100%;height:100%;background-size:cover;
  background-position:center;animation:kfFade .3s var(--ease-out) both}
.kfr-art{display:block;width:100%;height:100%}

/* ── 목차 (B9) ───────────────────────────────────────────────────── */
.kfb-toc--pc{display:none}
.kfb-toc--mo{margin-top:24px;border:1px solid var(--grey-200);border-radius:16px;overflow:hidden}
.kfb-toc__go{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 18px;border:0;background:none;cursor:pointer;
  font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900);text-align:left}
.kfb-toc__go svg{color:var(--grey-400);transition:transform .2s var(--ease-out);flex:none}
.kfb-toc__go[aria-expanded="true"] svg{transform:rotate(180deg)}
/* 접힘/펼침에 높이 애니메이션을 쓰지 않는다 — 아래 본문이 튄다 */
.kfb-toc--mo ul{list-style:none;margin:0;padding:0 18px 8px;animation:kfFade .2s var(--ease-out) both}
.kfb-toc--mo ul[hidden]{display:none}
.kfb-toc--mo li a{display:block;padding:9px 0;font-size:15px;line-height:22.5px;
  color:var(--grey-700);text-decoration:none;box-shadow:inset 0 1px 0 0 var(--grey-100)}
.kfb-toc--mo li:first-child a{box-shadow:none}

/* ── 본문 요소 11종 (B10) ────────────────────────────────────────── */
.kfb-body{margin-top:32px}
.kfb-body p{margin:0 0 16px;font-size:17px;line-height:30px;color:var(--grey-700)}
.kfb-body h2{margin:40px 0 0;font-size:22px;line-height:32px;font-weight:700;
  letter-spacing:-.01em;color:var(--grey-900);scroll-margin-top:76px}
.kfb-body h2 + p{margin-top:16px}
.kfb-body h3{margin:28px 0 0;font-size:19px;line-height:28px;font-weight:700;color:var(--grey-900)}
.kfb-body h3 + p{margin-top:12px}
.kfb-body ul,.kfb-body ol{margin:16px 0;padding-left:22px;font-size:17px;line-height:30px;
  color:var(--grey-700)}
.kfb-body ul{list-style:disc}
.kfb-body ol{list-style:decimal}
.kfb-body ul li + li{margin-top:4px}
.kfb-body ol li + li{margin-top:8px}
.kfb-body li::marker{color:var(--grey-400)}
/* 백링크가 실제로 사는 자리 — 색만이 아니라 밑줄로도 구분한다. 방문 후 색이 바뀌지 않는다 */
.kfb-body a{color:var(--blue-700);text-decoration:underline;text-underline-offset:3px;
  transition:color .15s var(--ease-out)}
.kfb-body a:visited{color:var(--blue-700)}
.kfb-body a:hover{color:var(--blue-500)}
/* 굵은 글씨는 색과 굵기를 함께 바꾼다 */
.kfb-body strong,.kfb-body b{font-weight:600;color:var(--grey-900)}
.kfb-body img{max-width:100%;height:auto;border-radius:18px;display:block;margin:0 auto}
.kfb-body figcaption{margin-top:8px;font-size:14px;line-height:21px;color:var(--grey-500);
  text-align:center}

/* 강조 박스 — 회색이다. 붉은 주의 박스와 섞지 않는다 */
.kfb-body blockquote,.kfb-note{margin:32px 0;padding:24px;border-radius:20px;
  background:var(--grey-50);border:0}
.kfb-body blockquote p,.kfb-note p{margin:0;font-size:17px;line-height:30px;color:var(--grey-800)}

/* 주의 박스 — 블로그 본문에서만 붉은색을 쓴다 (서비스 UI 와 반대) */
/* 표 바로 뒤에 오므로 위는 24 (시안 실측). 강조 박스의 32 와 다르다 */
.kfb-warn{display:flex;align-items:flex-start;gap:12px;margin:24px 0 32px;
  padding:18px 20px;border-radius:16px;background:var(--red-bg)}
.kfb-warn__ic{flex:none;margin-top:4px;color:var(--red-500)}
.kfb-warn b{display:block;font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900)}
.kfb-warn p{margin:4px 0 0;font-size:16px;line-height:26px;color:var(--grey-700)}

/* 표 — 모바일에서 가로 스크롤 */
.kfb-body .kfb-tw,.kfb-body figure.wp-block-table{margin:20px 0;overflow-x:auto;
  border:1px solid var(--grey-200);border-radius:16px}
.kfb-body table{width:100%;min-width:360px;border-collapse:collapse;font-size:15px}
.kfb-body thead th{background:var(--grey-50);font-weight:600;color:var(--grey-700);text-align:left}
/* 행 높이 50.5 = 패딩 28 + 줄상자 22.5. 테마 상속(24)을 그대로 두면 표가 14px 길어진다 */
.kfb-body th,.kfb-body td{padding:14px 16px;line-height:22.5px;color:var(--grey-700)}
.kfb-body tbody tr + tr th,.kfb-body tbody tr + tr td{border-top:1px solid var(--grey-100)}
/* 숫자 열은 오른쪽 정렬 + tabular */
.kfb-body td + td,.kfb-body th + th{text-align:right;font-variant-numeric:tabular-nums}

/* ── B4 본문 삽입 배너 ───────────────────────────────────────────── */
/* 위아래 32 — 본문과 붙으면 본문의 일부로 오해한다.
   점선 테두리·AD 표시·닫기·움직이는 요소는 넣지 않는다 (배너 블라인드니스) */
.kfb-ad{display:block;margin:32px 0;padding:20px;border-radius:20px}
.kfb-ad--a{background:var(--blue-50)}
.kfb-ad--b{background:var(--grey-100)}   /* 배경이 같으면 같은 것이 두 번 나온 것처럼 보인다 */
.kfb-ad__ic{display:flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:16px;background:var(--white);color:var(--blue-500);flex:none}
/* 시안 실측: 아이콘 칩 끝(84)에서 제목 잉크(88.5)까지 4.5 — 줄상자 leading 뿐이다.
   margin 을 12 주면 배너가 12px 길어지고 그 아래가 전부 밀린다. */
.kfb-ad__tx{display:block;margin-top:0}
.kfb-ad__t{display:block;font-size:19px;line-height:28px;font-weight:700;letter-spacing:-.01em;
  color:var(--grey-900)}
.kfb-ad__s{display:block;margin-top:4px;font-size:15px;line-height:22.5px;color:var(--grey-700)}
.kfb-ad__go{display:flex;align-items:center;justify-content:center;width:100%;height:52px;
  margin-top:16px;padding:0 20px;border-radius:14px;font-size:16px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.kfb-ad--a .kfb-ad__go{background:var(--blue-500);color:var(--white)}
.kfb-ad--b .kfb-ad__go{background:var(--white);color:var(--blue-500)}

/* ── B6 글 끝 전환 블록 ──────────────────────────────────────────── */
.kfb-end{margin-top:40px;padding:28px 24px;border-radius:24px;background:var(--grey-900)}
.kfb-end__t{display:block;font-size:24px;line-height:34px;font-weight:700;letter-spacing:-.02em;
  color:var(--white)}
.kfb-end__s{margin:12px 0 0;font-size:16px;line-height:26px;color:var(--grey-400)}
.kfb-end__go{display:flex;align-items:center;justify-content:center;width:100%;height:56px;
  margin-top:20px;border-radius:16px;background:var(--blue-500);color:var(--white);
  font-size:17px;font-weight:600;text-decoration:none}
.kfb-end__more{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;padding-top:20px;
  border-top:1px solid var(--grey-800)}
.kfb-end__more a{font-size:15px;font-weight:600;color:var(--blue-100);
  text-decoration:underline;text-underline-offset:3px}

/* ── 공유 2개 ────────────────────────────────────────────────────── */
.kfb-share{display:flex;gap:8px;margin-top:28px}
.kfb-share__b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;border-radius:14px;border:1px solid var(--grey-200);background:var(--white);
  font-size:15px;font-weight:600;color:var(--grey-700);cursor:pointer}

/* ── B7 관련 글 + 목록 카드 ──────────────────────────────────────── */
.kfb-rel{margin-top:40px;padding:36px 0 40px;background:var(--grey-50)}
.kfb-rel__h{margin:0 0 16px;font-size:20px;line-height:29px;font-weight:700;letter-spacing:-.01em;
  color:var(--grey-900)}
.kfb-grid{display:grid;grid-template-columns:1fr;gap:16px}
.kfb-rel__all{display:block;margin-top:20px;text-align:center;font-size:15px;font-weight:600;
  color:var(--grey-700);text-decoration:none}

.kfb-card{display:block;border-radius:18px;overflow:hidden;background:var(--white);
  text-decoration:none;color:inherit;transition:transform .1s var(--ease-out)}
.kfb-card:active{transform:scale(.98)}
.kfb-card__img{display:block;aspect-ratio:16/9;background:var(--grey-100)}
.kfb-card__img .kfr-cover{display:block;width:100%;height:100%;
  background-size:cover;background-position:center}
.kfb-card__bd{display:block;padding:16px 18px 18px}
.kfb-cat--sm{height:24px;font-size:12px;padding:0 8px}
.kfb-card__t{display:block;margin-top:8px;font-size:17px;line-height:25.5px;font-weight:600;
  color:var(--grey-900)}
.kfb-card__ex{display:block;margin-top:6px;font-size:16px;line-height:26px;color:var(--grey-600)}
.kfb-card__d{display:block;margin-top:8px;font-size:13px;line-height:19.5px;color:var(--grey-500);
  font-variant-numeric:tabular-nums}

/* ── 푸터 · 하단 여유 120 (플로팅 64 + 아래 12 + 여백 44) ─────────── */
.kfb-foot{border-top:1px solid var(--grey-200)}
.kfb-foot__in{padding-top:28px;padding-bottom:120px}
.kfb-foot__b{display:block;font-size:15px;font-weight:700;color:var(--grey-700)}
/* 시안은 링크 사이에 가운뎃점이 흐른다 — gap 만으로는 줄이 끊겨 보인다 */
.kfb-foot__nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:10px}
.kfb-foot__nav i{font-style:normal;color:var(--grey-300);font-size:13px}
.kfb-foot__nav a{font-size:14px;line-height:24px;color:var(--grey-500);text-decoration:none}
.kfb-foot__biz{margin:12px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-400)}

/* ── B5 하단 플로팅 ──────────────────────────────────────────────── */
/* 닫기 버튼 없음 — 넣으면 첫 화면에서 닫혀 전환이 0이 된다.
   바닥에 붙이지 않고 12px 띄운다. iOS 홈 인디케이터를 피한다. */
.kfb-float{position:fixed;left:20px;right:20px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:70;display:flex;align-items:center;gap:12px;height:64px;padding:0 8px 0 16px;
  border-radius:16px;background:var(--grey-900);box-shadow:var(--shadow-float);
  animation:kfFloat .2s ease-out both}
.kfb-float[hidden]{display:none}
.kfb-float.is-off{animation:kfFloatOut .2s ease-out both}
.kfb-float__ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:10px;background:rgba(255,255,255,.12);color:var(--white);flex:none}
.kfb-float__tx{flex:1;min-width:0}
.kfb-float__tx b{display:block;font-size:15px;line-height:20px;font-weight:600;color:var(--white)}
.kfb-float__tx span{display:block;font-size:13px;line-height:18px;color:var(--grey-400)}
.kfb-float__go{display:inline-flex;align-items:center;justify-content:center;height:40px;
  padding:0 16px;border-radius:12px;background:var(--blue-500);color:var(--white);
  font-size:15px;font-weight:600;text-decoration:none;flex:none;white-space:nowrap}

@keyframes kfFloat   {from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}}
@keyframes kfFloatOut{from{opacity:1;transform:none} to{opacity:0;transform:translateY(16px)}}

/* ── PC (1024 이상 · 768~1023 도 여기로 붙는다) ──────────────────── */
@media (min-width:768px){
  .kfb-shell,.kfb-rel__in,.kfb-foot__in,.kfb-bar__in{padding-left:24px;padding-right:24px}
  .kfb-main{padding-top:40px}
  .kfb-shell{display:grid;grid-template-columns:200px minmax(0,720px);gap:40px;
    justify-content:center}
  .kfb-read{max-width:720px}
  .kfb-toc--mo{display:none}
  .kfb-toc--pc{display:block;position:sticky;top:24px;max-height:calc(100vh - 96px);overflow:auto}
  .kfb-toc__lb{display:block;font-size:13px;line-height:19.5px;font-weight:700;
    color:var(--grey-500);letter-spacing:.04em}
  .kfb-toc--pc ul{list-style:none;margin:10px 0 0;padding:0}
  .kfb-toc--pc a{display:block;padding:7px 0 7px 12px;border-left:2px solid var(--grey-200);
    font-size:15px;line-height:22.5px;color:var(--grey-500);text-decoration:none;
    transition:color .15s var(--ease-out),border-color .15s var(--ease-out)}
  .kfb-toc--pc a.is-on{color:var(--blue-500);font-weight:600;border-left-color:var(--blue-500)}

  .kfb-h1{font-size:36px;line-height:48px}
  .kfb-cat{margin-top:0}
  .kfb-body h2{font-size:24px;line-height:34px}
  .kfb-ad{display:flex;align-items:center;gap:16px}
  .kfb-ad__tx{flex:1;min-width:0;margin-top:0}
  .kfb-ad__t{font-size:20px;line-height:29px}
  .kfb-ad__go{width:auto;margin-top:0;flex:none}
  .kfb-end{padding:32px}
  .kfb-end__t{font-size:28px;line-height:39px}
  .kfb-grid{grid-template-columns:repeat(3,1fr)}
  .kfb-float{left:50%;right:auto;transform:translateX(-50%);width:560px}
  @keyframes kfFloat   {from{opacity:0;transform:translate(-50%,16px)} to{opacity:1;transform:translateX(-50%)}}
  @keyframes kfFloatOut{from{opacity:1;transform:translateX(-50%)} to{opacity:0;transform:translate(-50%,16px)}}
}

@media (prefers-reduced-motion:reduce){
  .kfb *,.kfb *::before,.kfb *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── 옛 테마 껍데기 걷어내기 ──────────────────────────────────────
   블로그는 자체 앱바·푸터를 쓴다. 서비스 화면(.kfr)에 걸어둔 규칙과 같은 일을
   .kfb 에도 해 준다 — 안 하면 옛 헤더의 로그인 알약이 앱바 위에 겹쳐 나온다. */
body:has(.kfb) .site-header,
body:has(.kfb) .site-header__logo,
body:has(.kfb) .site-header__wrap,
body:has(.kfb) .site-header__mobile,
body:has(.kfb) .site-footer,
body:has(.kfb) .page-title,
body:has(.kfb) .kf-nav{display:none!important}
/* 블로그 배경은 흰색이다 (서비스 UI 의 회색 바닥이 아니다) */
body:has(.kfb),
body:has(.kfb) .site-main,
body:has(.kfb) .entry-content{background:var(--white)!important;margin:0!important;padding:0!important}
/* 블록 테마의 is-layout-flow 는 자식마다 margin-block-start 를 붙인다.
   그 32px 이 앱바와 분류 배지 사이에 끼어 첫 여백이 24 대신 56 이 됐다. */
body:has(.kfb) .site-main > *,
.kfb{margin-block-start:0!important;margin-top:0!important}

/* 테마 기본값이 새 컴포넌트를 덮지 않게 — 링크 색과 버튼 리셋 */
/* 클래스가 붙은 링크(버튼·카드·칩)는 저마다 색이 있다 — 리셋이 그것까지 덮으면 안 된다.
   파일 뒤쪽에 있어 특이도가 같은 컴포넌트 규칙을 이겨 버렸다(B6 버튼 글자가 회색이 됐다). */
.kfb a:not([class]){color:inherit;text-decoration:none}
/* font 단축을 쓰면 line-height 까지 되돌려 아래 컴포넌트 값을 덮는다 (목차 높이 83px 사고).
   개별 속성으로만 상속시킨다. */
.kfb button{font-family:inherit;letter-spacing:inherit;margin:0;
  -webkit-appearance:none;appearance:none}
.kfb-bar__back,.kfb-bar__ic{color:var(--grey-800)!important;padding:0}
.kfb-toc__go{line-height:24px;min-height:0}

/* 인라인 박스가 만드는 줄상자 여백 제거 — 배지·목차가 몇 px 씩 아래로 밀린다.
   inline-flex 는 줄상자에 얹히므로 폰트의 여백을 그대로 받는다. 블록으로 만든다. */
.kfb-main{margin:0}
.kfb-read > .kfb-cat{display:flex;width:fit-content}
.kfb-toc--mo{line-height:0}
.kfb-toc--mo ul li a{line-height:22.5px}

/* ⚠ 위의 `.kfb a{color:inherit;text-decoration:none}` 리셋과 `.kfb-body a` 는 특이도가 같다.
   나중에 선언한 리셋이 이겨서 본문 링크의 파랑·밑줄이 사라졌다.
   백링크가 실제로 사는 자리이므로 한 단계 높은 특이도로 다시 세운다. */
/* kimfast.css 의 전역 링크 규칙 `:is(body:not(:has(.kfr))) a:not(...)...` 이
   특이도 15로 모든 링크 색을 덮고 있었다. 그 규칙은 리디자인 화면(.kfr)만 비켜 가도록
   만들어졌는데 블로그(.kfb)를 몰랐다 — kimfast.css 쪽 가드에 .kfb 를 넣어 해결했다.
   그래서 여기서는 !important 가 필요 없다.
   ⚠ B4 배너는 본문 안(.kfb-body)에 끼워 넣으므로 본문 링크 규칙에 함께 걸린다. 버튼은 제외한다. */
.kfb .kfb-body a:not(.kfb-ad__go){color:var(--blue-700);
  text-decoration:underline;text-underline-offset:3px}
.kfb .kfb-body a:not(.kfb-ad__go):visited{color:var(--blue-700)}
.kfb .kfb-body a:not(.kfb-ad__go):hover{color:var(--blue-500)}
.kfb .kfb-end__more a{color:var(--blue-100);text-decoration:underline;text-underline-offset:3px}

/* 배너 버튼은 본문 링크 규칙(.kfb-body a)보다 특이도가 낮아 밑줄이 따라붙었다.
   광고처럼 보이지 않게 하는 것이 B4 의 절대 규칙이므로 여기서 못을 박는다. */
.kfb .kfb-ad__go{text-decoration:none}

/* ══ 02 목록 (B1 · B2 · B11) ══════════════════════════════════════
   이 화면에는 플로팅 CTA 가 없다 — 하단 여유도 32 다(글 상세는 120). */
.kfb-wrap{max-width:1000px;margin:0 auto;padding-left:20px;padding-right:20px}
.kfb-main--list{padding-top:24px}
.kfb-list .kfb-h1{margin:0}
.kfb-sub{margin:8px 0 0;font-size:17px;line-height:25.5px;color:var(--grey-600)}
.kfb-lead{margin-top:20px}

/* 분류 칩 — 좌우 패딩만큼 음수 마진을 줘 화면 끝까지 흐르게 한다 */
.kfb-chips{display:flex;gap:8px;margin:20px -20px 16px;padding:0 20px;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.kfb-chips::-webkit-scrollbar{display:none}
.kfb-chips--tight{margin-top:4px}
.kfb-chip{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 14px;
  border-radius:9999px;background:var(--grey-100);color:var(--grey-700);
  font-size:15px;font-weight:600;text-decoration:none;
  transition:background .15s var(--ease-out),color .15s var(--ease-out)}
.kfb-chip.is-on{background:var(--grey-900);color:var(--white)}

.kfb-count{margin:0 0 14px;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfb-grid--list{grid-template-columns:1fr;gap:16px}

/* 카드 3종 — 뼈대는 같고 크기만 다르다 */
.kfb-card--lead{border-radius:20px}
.kfb-card--lead .kfb-card__bd{padding:20px}
.kfb-card--lead .kfb-cat--sm{height:26px;padding:0 10px;font-size:13px;border-radius:8px}
.kfb-card--lead .kfb-card__t{margin-top:10px;font-size:22px;line-height:32px;font-weight:700;
  letter-spacing:-.02em;text-wrap:pretty}
.kfb-card--lead .kfb-card__ex{margin-top:10px;font-size:16px;line-height:26px}
.kfb-card--lead .kfb-card__d{margin-top:12px}

.kfb-card--list .kfb-card__bd{padding:18px 20px 20px}
.kfb-card--list .kfb-card__t{margin-top:8px;font-size:18px;line-height:27px;font-weight:700;
  letter-spacing:-.01em;text-wrap:pretty}
.kfb-card--list .kfb-card__ex{margin-top:8px;font-size:15px;line-height:24px}
.kfb-card--list .kfb-card__d{margin-top:12px}

/* B11 빈 상태 — 대표 글·그리드는 감추되 칩은 남긴다 */
.kfb-empty{padding:56px 20px;border-radius:20px;background:var(--grey-50);text-align:center}
.kfb-empty__ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--white);color:var(--grey-400)}
.kfb-empty__t{display:block;margin-top:16px;font-size:20px;line-height:29px;font-weight:700;
  letter-spacing:-.01em;color:var(--grey-900)}
.kfb-empty__s{margin:8px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfb-empty__go{display:inline-flex;align-items:center;justify-content:center;height:52px;
  margin-top:20px;padding:0 24px;border-radius:14px;background:var(--blue-500);color:var(--white);
  font-size:16px;font-weight:600;text-decoration:none}

.kfb-pg{display:flex;gap:8px;justify-content:center;margin-top:28px}
.kfb-pg a{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:12px;
  background:var(--grey-100);color:var(--grey-700);font-size:15px;font-weight:600;text-decoration:none}

/* 목록 푸터 — 플로팅이 없으므로 하단 여유 32 */
.kfb-list .kfb-foot__in{padding-bottom:32px}

@media (min-width:768px){
  .kfb-wrap{padding-left:24px;padding-right:24px}
  .kfb-main--list{padding-top:40px}
  .kfb-chips{margin-left:-24px;margin-right:-24px;padding:0 24px}
  .kfb-grid--list{grid-template-columns:repeat(2,1fr)}
  .kfb-card--lead .kfb-card__t{font-size:26px;line-height:37px}
}

/* 목록의 푸터는 마지막 카드에서 40 띄운다 (가이드 §8).
   글 상세는 앞에 관련 글 섹션이 있어 이 여백이 필요 없다. */
.kfb-list .kfb-foot{margin-top:40px}

/* ══ 03 공유 시트 (B12) — 모바일만 ════════════════════════════════
   PC 는 시트를 열지 않고 링크 복사를 즉시 실행한다. */
.kfb-sheet{position:fixed;inset:0;z-index:90}
.kfb-sheet[hidden]{display:none}
.kfb-sheet__dim{position:absolute;inset:0;background:var(--dim);opacity:0;
  transition:opacity .2s var(--ease-out)}
.kfb-sheet.is-on .kfb-sheet__dim{opacity:1}
.kfb-sheet__box{position:absolute;left:0;right:0;bottom:0;
  padding:24px 0;border-radius:24px 24px 0 0;background:var(--white);
  transform:translateY(100%);transition:transform .3s var(--ease-spring)}
.kfb-sheet.is-on .kfb-sheet__box{transform:none}
.kfb-sheet__t{display:block;margin:0 24px 12px;font-size:20px;line-height:29px;
  font-weight:700;color:var(--grey-900)}
.kfb-sheet__row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 24px;
  border:0;background:none;cursor:pointer;text-align:left}
.kfb-sheet__row + .kfb-sheet__row{box-shadow:inset 0 1px 0 0 var(--grey-100)}
.kfb-sheet__ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;background:var(--grey-100);color:var(--grey-700);flex:none}
.kfb-sheet__ic--kakao{background:var(--kakao);color:var(--grey-900)}
.kfb-sheet__lb{flex:1;font-size:17px;line-height:25.5px;font-weight:500;color:var(--grey-900)}
@media (min-width:768px){ .kfb-sheet{display:none} }