/*
 * 한국아동가족연구소 페이지 — easyclass-design (Soft Pastel Card)
 * 폭 = 머리글 폭(최대 1240px) · 흰 카드(그림자만) · 오렌지는 주 버튼에만 · 파스텔은 칩·아이콘·썸네일
 * 구조는 페이지마다 다르게: 히어로(스플릿 · 스테이트먼트 · 스탯 밴드 · 탭) / 벤토 / 지그재그 / 트랙 / 비교표 / 패널 CTA
 */
.kf {
  /* 기본(aiblock)에서는 이 화면 고유의 색 — 사이트 디자인 색(관리자 › 화면 테마)과 따로. 다른 화면 테마를 고르면 아래 규칙이 테마 색으로 바꾼다 */
  --on-accent: #fff;   /* 강조색 바탕 위 글자 — 어두운 테마는 테마가 정한 색 */
  --ok-ink: #13804A;   /* 초록 글자 — 바탕이 어두우면 밝은 초록 */
  --dark: #1C1C28;   /* 진한 칩 · 단추 바탕 — 어두운 테마에서도 흰 글자가 읽히도록 글자색(--ink)과 나눔 */
  --bg-page: #EDEDF5; --bg-card: #FFFFFF; --bg-panel: #F0E7FB;
  --ink: #1C1C28; --mut: #9AA0AC; --sub: #5B5F6B;
  --accent: #F97316; --accent-soft: #FEEBDC; --ok: #2FC272;
  --p-blue: #D9E8F5; --p-purple: #E4D6F7; --p-pink: #F9D2DA; --p-mint: #D8F3E3; --p-yellow: #FCF0D4; --p-sky: #DDE3FF;
  --sh: 0 8px 24px rgba(28, 28, 40, .06); --r: 22px;
  color: var(--ink); font-family: var(--en-font, 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif);
  word-break: keep-all; -webkit-font-smoothing: antialiased; line-height: 1.7;
}
/* 다른 화면 테마(개발자 페이지 › 테마)를 고르면 색 · 모서리 · 그림자가 그 테마를 따른다 (기본 aiblock 은 위 고유 색 그대로) */
body:not(.theme-aiblock) .kf {
  --bg-page: var(--c-bg, #EDEDF5); --bg-card: var(--c-card, #FFFFFF); --bg-panel: var(--c-panel, #F0E7FB);
  --ink: var(--c-text, #1C1C28); --mut: var(--c-muted, #9AA0AC); --sub: color-mix(in srgb, var(--c-text, #1C1C28) 72%, var(--c-card, #fff));
  --accent: var(--c-accent, #F97316); --accent-soft: var(--c-accent-soft, #FEEBDC); --ok: var(--c-ok, #2FC272);
  --p-blue: var(--pastel-blue, #D9E8F5); --p-purple: var(--pastel-purple, #E4D6F7); --p-pink: var(--pastel-pink, #F9D2DA); --p-mint: var(--pastel-mint, #D8F3E3); --p-yellow: var(--pastel-yellow, #FCF0D4);
  --sh: var(--shadow, 0 8px 24px rgba(28, 28, 40, .06)); --r: var(--radius, 22px);
  --ok-ink: color-mix(in srgb, var(--c-ok, #2FC272) 45%, var(--c-text, #1C1C28)); --dark: var(--c-dark, #1C1C28); --on-accent: var(--dk-on-accent, #fff);
}

.kf *, .kf *::before, .kf *::after { box-sizing: border-box; }
.kf a { color: inherit; text-decoration: none; }
.kf img { max-width: 100%; display: block; }
.kf h1, .kf h2, .kf h3, .kf p, .kf ul, .kf ol, .kf figure, .kf blockquote { margin: 0; }
.kf h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.kf h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.kf h3 { font-size: 18px; font-weight: 700; line-height: 1.45; }
.kf-page { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 72px; display: flex; flex-direction: column; gap: 28px; }
.kf-card { background: var(--bg-card); border-radius: var(--r); padding: 32px; box-shadow: var(--sh); }
.kf-panel { background: var(--bg-panel); border-radius: var(--r); padding: 32px; }
.kf-label { display: inline-block; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.kf-sub { color: var(--sub); font-size: 16.5px; }
.kf-small { font-size: 13.5px; color: var(--sub); }
.kf-note { font-size: 12.5px; color: var(--mut); line-height: 1.7; }
.kf-read { max-width: 760px; }
.kf-center { text-align: center; }
.kf-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.kf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 9999px;
  background: var(--accent); color: var(--on-accent, #fff) !important; font-size: 15px; font-weight: 700; box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .15s; white-space: nowrap; cursor: pointer; font-family: inherit; }
.kf-btn:hover { transform: translateY(-1px); }
.kf-btn--line { background: #fff; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px #E3E4EC; }
.kf-btn--ghost { background: var(--accent-soft); color: var(--accent) !important; box-shadow: none; }
.kf-btn--dark { background: var(--dark); box-shadow: none; color: #fff !important; }
.kf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 9999px; background: var(--bg-page); font-size: 12.5px; font-weight: 600; color: var(--sub); }
.kf-ic { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; font-size: 20px; font-weight: 800; }

/* 히어로 — 스플릿 (메인) */
.kf-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; padding: 44px 48px; background: #fff; border-radius: 28px; box-shadow: var(--sh); overflow: hidden; }
.kf-hero h1 em { font-style: normal; background: linear-gradient(transparent 60%, var(--accent-soft) 60%); }
.kf-hero .kf-sub { margin: 18px 0 28px; font-size: 18px; }
.kf-hero-media { position: relative; }
.kf-hero-media img { width: 100%; height: auto; border-radius: 22px; }
.kf-hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
/* 히어로 — 가운데 스테이트먼트 (소개) */
.kf-statement { padding: 56px 16px 12px; text-align: center; }
.kf-statement .kf-sub { max-width: 680px; margin: 16px auto 0; }
/* 히어로 — 스탯 밴드 (기관) */
.kf-statband { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 0; background: #fff; border-radius: 28px; box-shadow: var(--sh); overflow: hidden; }
.kf-statband > div { padding: 36px 32px; }
.kf-statband > div + div { border-left: 2px solid var(--bg-page); }
.kf-statband b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.kf-statband small { display: block; margin-top: 8px; font-size: 13px; color: var(--sub); line-height: 1.55; }
/* 히어로 — 토큰(목차) */
.kf-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.kf-toc a { padding: 8px 16px; border-radius: 9999px; background: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--sh); }

/* 대상 선택 */
.kf-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kf-who a { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: 22px; background: #fff; box-shadow: var(--sh); transition: transform .2s, box-shadow .2s; }
.kf-who a:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(28, 28, 40, .1); }
.kf-who b { font-size: 18px; }
.kf-who span { font-size: 14px; color: var(--sub); line-height: 1.6; }
.kf-who .kf-ic, .kf-who .kf-ic span { font-size: 22px; line-height: 1; color: inherit; }
.kf-who .kf-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kf-who small { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--ink); }

/* 절차 트랙 */
.kf-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kf-track::before { content: ""; position: absolute; left: 6%; right: 6%; top: 23px; height: 4px; border-radius: 9999px; background: var(--bg-page); }
.kf-track li { position: relative; list-style: none; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.kf-track li i { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: #fff; box-shadow: 0 0 0 4px var(--bg-page); z-index: 1; }
.kf-track li:last-child i { background: var(--accent); color: var(--on-accent, #fff); box-shadow: 0 0 0 4px var(--accent-soft); }
.kf-track b { font-size: 15.5px; }
.kf-track span { font-size: 13px; color: var(--sub); line-height: 1.55; }
.kf-track ol, .kf-track ul { display: contents; }

/* 벤토 */
.kf-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(160px, auto); gap: 14px; }
.kf-bento .big { grid-row: span 2; }
.kf-bento .wide { grid-column: span 2; }
.kf-tile { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: #fff; box-shadow: var(--sh); }
.kf-tile p { font-size: 14.5px; color: var(--sub); }
.kf-tile.big { background: var(--bg-panel); box-shadow: none; }
.kf-tile.big h3 { font-size: 22px; }

/* 지그재그 챕터 */
.kf-chapter { display: grid; grid-template-columns: 64px minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: 28px 0; }
.kf-chapter + .kf-chapter { border-top: 2px solid var(--bg-page); }
.kf-chapter:nth-child(even) .kf-visual { order: -1; }
.kf-chapter:nth-child(even) { grid-template-columns: 300px 64px minmax(0, 1fr); }
.kf-chapter .no { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: var(--dark); color: #fff; }
.kf-chapter p { margin-top: 8px; color: var(--sub); }
.kf-chapter ul { margin-top: 10px; padding-left: 18px; color: var(--sub); font-size: 14.5px; }
.kf-visual { aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; display: grid; place-items: center; font-size: 46px; }
.kf-visual img { width: 100%; height: 100%; object-fit: cover; }

/* 목록 + 제목 칼럼 */
.kf-split { display: grid; grid-template-columns: 38fr 62fr; gap: 44px; }
.kf-rows { display: flex; flex-direction: column; gap: 12px; }
.kf-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--bg-page); }
.kf-row b { display: block; font-size: 15.5px; }
.kf-row span { font-size: 14px; color: var(--sub); line-height: 1.6; }

/* 번호 스텝 */
.kf-steps { display: flex; flex-direction: column; gap: 18px; counter-reset: k; }
.kf-steps li { list-style: none; display: flex; gap: 14px; counter-increment: k; }
.kf-steps li::before { content: counter(k); width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: 2px; }
.kf-steps b { display: block; font-size: 15.5px; }
.kf-steps span { font-size: 14px; color: var(--sub); }
.kf-steps ol { margin: 0; padding: 0; }

/* 비교 표 */
.kf-table { overflow-x: auto; }
.kf-table table { width: 100%; border-collapse: separate; border-spacing: 0 8px; min-width: 560px; }
.kf-table th { padding: 8px 16px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--mut); }
.kf-table td { padding: 15px 16px; font-size: 14.5px; background: var(--bg-page); vertical-align: top; }
.kf-table td:first-child { border-radius: 14px 0 0 14px; font-weight: 700; }
.kf-table td:last-child { border-radius: 0 14px 14px 0; }
.kf-x { color: var(--mut); text-decoration: line-through; }

/* 가격 */
.kf-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.kf-price { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 22px; background: #fff; box-shadow: var(--sh); }
.kf-price.is-pick { background: var(--bg-panel); box-shadow: none; }
.kf-price .amt { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.kf-price .amt small { font-size: 14px; font-weight: 600; color: var(--mut); }
.kf-price ul { padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.kf-price li { list-style: none; display: flex; gap: 8px; }
.kf-price li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.kf-price .kf-btn { margin-top: auto; }
.kf-list-price { display: flex; flex-direction: column; gap: 10px; }
.kf-list-price a, .kf-list-price div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 20px; border-radius: 16px; background: var(--bg-page); }
.kf-list-price b { font-size: 15.5px; } .kf-list-price span { font-size: 13px; color: var(--sub); } .kf-list-price em { font-style: normal; font-weight: 800; }

/* 인용 · CTA */
.kf-quote { padding: 40px; border-radius: 24px; background: var(--bg-panel); font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.6; text-align: center; }
.kf-quote small { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--sub); }
.kf-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.kf-cta-band { padding: 44px 24px; text-align: center; }
.kf-cta-band .kf-btns { justify-content: center; margin-top: 22px; }

/* 칩 클라우드 · 가치 */
.kf-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.kf-pills span { padding: 10px 18px; border-radius: 9999px; background: #fff; font-size: 14.5px; font-weight: 600; box-shadow: var(--sh); }
.kf-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kf-values > div { display: flex; flex-direction: column; gap: 8px; padding: 22px 18px; border-radius: 20px; background: #fff; box-shadow: var(--sh); }
.kf-values small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.kf-values p { font-size: 13.5px; color: var(--sub); line-height: 1.6; }

/* 아코디언 FAQ */
.kf-faq details { border-radius: 16px; background: var(--bg-page); }
.kf-faq details + details { margin-top: 10px; }
.kf-faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.kf-faq summary::after { content: "+"; font-weight: 400; font-size: 20px; line-height: 1; }
.kf-faq details[open] summary::after { content: "−"; }
.kf-faq details > div { padding: 0 20px 18px; font-size: 14.5px; color: var(--sub); }

/* 인사이트 카드 */
.kf-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kf-post { display: flex; flex-direction: column; border-radius: 20px; background: #fff; box-shadow: var(--sh); overflow: hidden; transition: transform .2s; }
.kf-post:hover { transform: translateY(-3px); }
.kf-post .th { aspect-ratio: 16 / 9; background: var(--p-blue); }
.kf-post .th img { width: 100%; height: 100%; object-fit: cover; }
.kf-post .bd { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.kf-post .bd b { font-size: 17px; line-height: 1.45; }
.kf-post .bd p { font-size: 14px; color: var(--sub); line-height: 1.6; }
.kf-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.kf-filters a { padding: 9px 16px; border-radius: 9999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--sub); box-shadow: var(--sh); }
.kf-filters a.on { background: var(--dark); color: #fff; }

/* 글 본문 (칼럼 · 약관) */
.kf-article { font-size: 16px; line-height: 1.85; }
.kf-article h2 { margin: 36px 0 12px; font-size: 21px; }
.kf-article h3 { margin: 28px 0 10px; }
.kf-article p + p { margin-top: 14px; }
.kf-article ul, .kf-article ol { margin: 12px 0; padding-left: 22px; }
.kf-article li + li { margin-top: 6px; }
.kf-article blockquote { margin: 18px 0; padding: 18px 22px; border-radius: 16px; background: var(--bg-panel); font-weight: 600; }

/* 레슨 본문 (LMS 차시) */
.kf-lesson { font-size: 16px; line-height: 1.85; }
.kf-lesson .kf-goal { padding: 16px 20px; border-radius: 16px; background: var(--bg-panel, #F0E7FB); margin-bottom: 20px; }
.kf-lesson blockquote { margin: 18px 0; padding: 16px 20px; border-radius: 16px; background: #FCF0D4; font-weight: 600; }
.kf-lesson .kf-try { margin-top: 26px; padding: 20px 22px; border-radius: 16px; background: #D8F3E3; }
.kf-lesson .kf-try h3 { margin: 0 0 8px; font-size: 16px; }
.kf-lesson .kf-tip { margin-top: 16px; font-size: 14px; color: #5B5F6B; }

@media (max-width: 1080px) {
  .kf-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kf-hero, .kf-split, .kf-cta { grid-template-columns: minmax(0, 1fr) !important; }
  .kf-hero { padding: 32px 28px; gap: 28px; }
  .kf-hero-media { order: -1; }
  .kf-who, .kf-posts, .kf-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kf-statband { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kf-statband > div:first-child { grid-column: 1 / -1; border-bottom: 2px solid var(--bg-page); }
  .kf-statband > div:nth-child(2) { border-left: 0; }
  .kf-bento { grid-template-columns: 1fr 1fr; }
  .kf-bento .big { grid-row: auto; grid-column: span 2; }
  .kf-track { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }   /* 페이지 안 style 로 칸 수를 정해도 모바일은 한 줄 */
  .kf-track::before { left: 23px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; }
  .kf-track li { flex-direction: row; text-align: left; align-items: flex-start; }
  .kf-chapter, .kf-chapter:nth-child(even) { grid-template-columns: 56px minmax(0, 1fr); }
  .kf-chapter .kf-visual { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 640px) {
  .kf-page { width: calc(100% - 32px); padding: 20px 0 56px; gap: 18px; }
  .kf-card, .kf-panel { padding: 22px 20px; }
  .kf-hero { padding: 24px 20px; border-radius: 22px; }
  .kf-who, .kf-posts, .kf-prices, .kf-values { grid-template-columns: minmax(0, 1fr); }
  .kf-statband { grid-template-columns: minmax(0, 1fr); }
  .kf-statband > div + div { border-left: 0; border-top: 2px solid var(--bg-page); }
  .kf-bento { grid-template-columns: minmax(0, 1fr); }
  .kf-bento .big, .kf-bento .wide { grid-column: auto; }
  .kf-btns .kf-btn { width: 100%; }
  .kf-quote { padding: 28px 20px; }
}

/* 소장 인사말 (/about/greeting) */
.kf-greet { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; padding-top: 24px; }
.kf-greet-photo { position: sticky; top: 96px; margin: 0; border-radius: 32px; overflow: hidden; background: #c79aa3; box-shadow: 0 30px 60px -24px rgba(120, 60, 80, .35); }
.kf-greet-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.kf-greet-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); }
.kf-greet-photo figcaption b { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.kf-greet-photo figcaption span { font-size: 13px; color: var(--mut); }
.kf-greet-body h1 { margin: 0 0 26px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.32; letter-spacing: -1px; word-break: keep-all; }
.kf-greet-body .kf-article { font-size: 17px; line-height: 1.95; color: #2f3140; word-break: keep-all; }
.kf-greet-body .kf-article p + p { margin-top: 18px; }
.kf-greet-sign { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 36px; padding: 22px 0 0; border-top: 1px solid rgba(28, 28, 40, .08); }
.kf-greet-sign span { font-size: 14px; color: var(--mut); }
.kf-greet-sign b { font-size: 24px; font-weight: 800; letter-spacing: 2px; }
.kf-greet-sign img { flex: none; width: auto; height: 78px; margin: -14px -4px -14px 4px; opacity: .88; transform: rotate(-6deg); pointer-events: none; }
.kf-greet-promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kf-greet-promise .kf-card h3 { margin: 14px 0 6px; font-size: 18px; }
.kf-greet-promise .kf-card p { margin: 0; color: var(--mut); line-height: 1.7; }
.kf-people-photo { display: block; width: 132px; height: 132px; object-fit: cover; object-position: 50% 22%; border-radius: 36px; box-shadow: 0 16px 34px -14px rgba(120, 60, 80, .4); }
@media (max-width: 900px) {
  .kf-greet { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 8px; }
  .kf-greet-photo { position: relative; top: 0; max-width: 420px; width: 100%; margin: 0 auto; }
  .kf-greet-body .kf-article { font-size: 16px; }
  .kf-greet-promise { grid-template-columns: minmax(0, 1fr); }
}

/* 인사이트 — 관리자 글쓰기 단추 · 카드 수정 */
.kf-insight-adm { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--bg-panel, #f6f5fb); border: 1.5px dashed rgba(124, 92, 255, .28); }
.kf-insight-adm span { font-size: 13.5px; font-weight: 700; color: var(--sub); }
.kf-insight-adm .kf-btn { min-height: 42px; }
.kf-post-w { position: relative; display: flex; flex-direction: column; transition: transform .2s; }
.kf-post-w > .kf-post { flex: 1; }
.kf-post-w > .kf-post:hover { transform: none; }
.kf-post-w:hover { transform: translateY(-3px); }
.kf-post-w.is-draft > .kf-post { opacity: .72; outline: 2px dashed rgba(0, 0, 0, .14); outline-offset: -2px; }
.kf .kf-post-edit, .kf-post-draft { position: absolute; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; border-radius: 99px; font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap; }
.kf .kf-post-edit { right: 12px; background: rgba(255, 255, 255, .96); color: #1c1c28 !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(28, 28, 40, .16), inset 0 0 0 1px rgba(28, 28, 40, .06); transition: background-color .15s, color .15s, box-shadow .15s, transform .15s; }
.kf .kf-post-edit svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kf .kf-post-edit:hover, .kf .kf-post-edit:focus-visible { background: var(--accent, #f97316); color: var(--on-accent, #fff) !important; box-shadow: 0 6px 18px rgba(249, 115, 22, .35); transform: translateY(-1px); }
.kf .kf-post-edit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kf-post-draft { left: 12px; background: #fff7d6; color: #8a6200; box-shadow: 0 4px 14px rgba(28, 28, 40, .12); }
.kf-toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; transition: opacity .4s, transform .4s; animation: kf-toast-in .35s ease-out; }
.kf-toasts.is-out { opacity: 0; transform: translate(-50%, 12px); }
.kf-toasts .kf-toast { margin: 0; padding: 14px 18px; border-radius: 14px; background: #1c1c28; color: #fff; font-weight: 700; font-size: 14.5px; box-shadow: 0 12px 32px rgba(28, 28, 40, .22); }
.kf-toasts .en-alert-error { background: #d14343; }
@keyframes kf-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 768px) { .kf-toasts { bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .kf-toasts { animation: none; transition: none; } }

/* ── 결과 리포트 예시 [kf_report] — 겹쳐 뜬 카드(3D 무대) · 1→70 점수 고리 · 영역 이름 큰 글자 ── */
.kfr { position: relative; perspective: 1500px; --rx: 7deg; --ry: -11deg; zoom: .7; width: min(100%, 680px); margin-inline: auto; padding-top: 58px; }   /* 오른쪽 무대 전체를 70%로 — 떠 있는 조각까지 섹션 안에 */
.kfr-stage { position: relative; display: grid; gap: 14px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.kfr-card { position: relative; background: rgba(255, 255, 255, .94); border-radius: 22px; padding: 22px 24px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -12px rgba(60, 40, 110, .22), 0 4px 10px rgba(28, 28, 40, .05); }
.kfr .kfr-eyebrow { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.kfr h4 { margin: 2px 0 12px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
/* 요약 카드 */
.kfr-main { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 4px 18px; align-items: center; transform: translateZ(10px); }
.kfr-main > :not(.kfr-gauge) { grid-column: 1; }
.kfr-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.kfr-tags span { padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; background: #F1F1F6; color: var(--sub); }
.kfr-tags span:first-child { background: var(--p-yellow); color: #8A5A00; }
.kf .kfr-title { margin: 2px 0 6px; font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.kf .kfr-lead { font-size: 14px; line-height: 1.7; color: var(--sub); }
.kfr-lead mark { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 58%, var(--accent-soft) 58%); }
.kfr-lead mark.is-grow { background: linear-gradient(transparent 58%, var(--p-purple) 58%); }
.kfr-gauge { grid-column: 2; grid-row: 1 / span 4; position: relative; width: 148px; aspect-ratio: 1; }
.kfr-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 8px 14px rgba(249, 115, 22, .28)); }
.kfr-gauge circle { fill: none; stroke-width: 11; }
.kfr-track { stroke: #EEEEF4; }
.kfr-arc { stroke: url(#kfr-g); stroke-linecap: round; }
.kfr-score { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.kfr-score b { font-size: 44px; font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.kfr-score small { margin-top: 6px; font-size: 10px; line-height: 1.35; color: var(--mut); }
/* 영역 — 이름을 큰 글자로, 점수만큼 형광펜이 지나간다 */
.kfr-type { margin-left: 44px; transform: translateZ(46px); }
.kf .kfr-rows { list-style: none; padding: 0; display: grid; gap: 6px; }
.kfr-rows li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 12px; padding: 8px 14px 7px; border-radius: 14px; overflow: hidden; background: #F6F6FA; }
.kfr-hl { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: linear-gradient(90deg, rgba(28, 28, 40, .04), rgba(28, 28, 40, .11)); box-shadow: inset -3px 0 0 var(--ink); transform-origin: left center; }
.kfr-rows li.is-strong .kfr-hl { background: linear-gradient(90deg, rgba(47, 194, 114, .08), rgba(47, 194, 114, .28)); box-shadow: inset -3px 0 0 var(--ok); }
.kfr-nm { position: relative; display: block; overflow: hidden; font-size: clamp(15px, 1.25vw, 16.5px); font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.kfr-nm span { display: inline-block; }
.kfr-num { position: relative; font-style: normal; font-size: clamp(16px, 1.35vw, 18px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kfr-rows li.is-strong .kfr-num { color: #13804A; }
.kfr-rows small { position: relative; grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; color: var(--sub); }
.kfr-rows li.is-strong small { color: #13804A; }
.kf .kfr-note { margin-top: 10px; font-size: 11px; color: var(--mut); }
/* 이번 주 */
.kfr-week { margin-right: min(36%, 250px); transform: translateZ(24px); }
.kf .kfr-week ol { padding: 0; list-style: none; counter-reset: w; display: grid; gap: 7px; }
.kfr-week li { counter-increment: w; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; }
.kfr-week li::before { content: counter(w); flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: #fff; font-size: 11px; font-weight: 700; margin-top: 1px; }
/* 떠 있는 조각 */
.kfr-float { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: center; padding: 11px 15px 11px 11px; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: 0 16px 34px -10px rgba(60, 40, 110, .3); font-size: 12px; line-height: 1.4; animation: kfr-bob 6s ease-in-out infinite; }
.kfr-float i { flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-weight: 800; }
.kfr-float b { display: block; font-size: 12.5px; }
.kfr-float span { color: var(--sub); }
.kfr-f1 { top: -46px; right: 4px; --z: 90px; }
.kfr-f1 i { background: var(--p-mint); color: #13804A; }
.kfr-f2 { right: 0; bottom: 40px; max-width: 230px; --z: 70px; animation-delay: -3s; }
.kfr-f2 i { background: var(--p-yellow); color: #A35A00; }
@keyframes kfr-bob { 0%, 100% { transform: translateZ(var(--z)) translateY(0); } 50% { transform: translateZ(var(--z)) translateY(-8px); } }
/* 광택 있는 입체 조각 (CSS 구 · 고리) */
.kfr-orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; animation: kfr-bob 8s ease-in-out infinite; }
.kfr-orb--sun { width: 70px; height: 70px; top: 128px; right: -10px; --z: -30px; background: radial-gradient(circle at 32% 28%, #FFE1BF 0 8%, #FFA552 34%, #F97316 62%, #C2410C 100%); box-shadow: 0 20px 30px -12px rgba(249, 115, 22, .55); }
.kfr-orb--mint { width: 46px; height: 46px; left: -18px; bottom: 120px; --z: 60px; animation-delay: -2s; background: radial-gradient(circle at 34% 30%, #F2FFF7 0 9%, #8EE6B4 40%, #2FC272 78%, #1C8F52 100%); box-shadow: 0 14px 24px -10px rgba(47, 194, 114, .6); }
.kfr-orb--ring { width: 74px; height: 74px; left: -8px; top: 230px; --z: -20px; animation-delay: -5s; background: radial-gradient(circle, transparent 0 46%, #C9B2F2 47%, #E9DDFF 58%, #A98BE6 72%, transparent 73%); filter: drop-shadow(0 12px 16px rgba(120, 80, 200, .35)); }
/* 왼쪽 — 리포트에 담기는 것 (내부 섹션) */
.kfr-points { margin-top: 26px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.kfr-points-cap { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--sub); }
.kf .kfr-points ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kfr-points li { display: flex; gap: 11px; align-items: center; padding: 12px 13px; border-radius: 15px; background: #fff; box-shadow: var(--sh); }
.kfr-points li i { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 800; }
.kfr-points li b { display: block; font-size: 14px; line-height: 1.35; letter-spacing: -.02em; }
.kfr-points li span { display: block; font-size: 12px; line-height: 1.45; color: var(--sub); }
.kfr-points .kf-btns { margin-top: 16px; }
@media (max-width: 480px) { .kf .kfr-points ul { grid-template-columns: minmax(0, 1fr); } .kfr-points { padding: 14px; } }
/* 움직임 — 스크립트가 is-armed(처음 상태) → is-on(재생) 을 붙인다. 스크립트가 없으면 끝 상태 그대로 */
.kfr.is-armed .kfr-hl { transform: scaleX(0); }
.kfr.is-armed .kfr-nm span { transform: translateY(105%); }
.kfr.is-armed .kfr-float, .kfr.is-armed .kfr-week, .kfr.is-armed .kfr-type { opacity: 0; }
.kfr.is-on .kfr-hl { transform: scaleX(1); transition: transform 1.5s cubic-bezier(.2, .8, .2, 1) calc(.55s + var(--i) * .14s); }
.kfr.is-on .kfr-nm span { transform: none; transition: transform .8s cubic-bezier(.2, .9, .25, 1) calc(.35s + var(--i) * .14s); }
.kfr.is-on .kfr-type, .kfr.is-on .kfr-week, .kfr.is-on .kfr-float { opacity: 1; transition: opacity .7s ease .2s; }
.kfr.is-on .kfr-week { transition-delay: 1.1s; }
.kfr.is-on .kfr-float { transition-delay: 1.5s; }
@media (max-width: 900px) {
  .kfr { --rx: 4deg; --ry: -6deg; margin-top: 8px; zoom: .85; }
}
@media (max-width: 640px) {
  .kfr { --rx: 0deg; --ry: 0deg; perspective: none; zoom: 1; padding-top: 0; }
  .kfr-main { grid-template-columns: minmax(0, 1fr); }
  .kfr-gauge { grid-column: 1; grid-row: auto; width: 128px; margin: 6px auto 0; }
  .kfr-type, .kfr-week { margin: 0; }
  .kfr-card { padding: 18px 16px; }
  .kfr-orb { display: none; }
  .kfr-float { position: relative; inset: auto; max-width: none; animation: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kfr-stage { transition: none; }
  .kfr-float, .kfr-orb { animation: none; transform: translateZ(var(--z, 0)); }
}