/*
 * ui.css — 모든 화면이 싣는 스타일: 색·글자 토큰, 셸의 경로 규칙(.kcf-route), 목록 머리, 글 카드, 쪽 번호, 홈의 안내 구역, FAQ, 공통 안내.
 *          머리(내비·메가 메뉴) · 모바일 시트 · 하단 탭바 · 제휴 배너 · 셸 배치 · 바닥은 chrome.css 로 나갔다(2026-10-28 점검 F13 —
 *          iframe 문서(bare)에는 그것들이 없어 ui.css 의 약 30% 를 받기만 했다). 아래 ②~⑥ · ⑫ · ⑭ 의 차례 번호는 두 파일에 걸쳐 그대로 둔다.
 *
 * 2026-10-10 디자인 리뉴얼("모던" — 옛 기획 클린버전으로재구축.md §14, docs 리포 이력 — b9531d2 에서 지움). 글·페이지의 본문은 article.css 가 맡는다.
 * 마크업은 될 수 있으면 그대로 두고 여기서 배치한다 — 글자·링크·순서를 바꾸지 않는다(검색 노출은 그대로).
 *
 * 차례: ① 토큰·바탕 ② 머리 ③ 메가 메뉴 ④ 모바일 시트·탭바 ⑤ 제휴 배너 ⑥ 셸 ⑦ 목록 머리 ⑧ 목록·카드·쪽 번호
 *       ⑨ 홈의 안내 구역 ⑩ FAQ ⑪ 공통 안내 ⑫ 바닥 ⑬ 검색·없는 화면 ⑭ 좁은 화면
 */

/* ───────────────────────── ① 토큰·바탕 ───────────────────────── */
:root {
	--kcf-accent: #e11d48;        /* 강조색 — 글자로 써도 흰 바탕에서 4.7:1 */
	--kcf-accent-soft: #fdecef;   /* 강조색의 옅은 바탕 */
	--kcf-accent-deep: #b81c3f;   /* 옅은 바탕 위의 글자 */
	--kcf-ink: #14171c;           /* 제목·강한 글자 */
	--kcf-text: #414853;          /* 본문 */
	--kcf-muted: #68707c;         /* 보조 글자(흰 바탕 5.0:1, 회색 바탕 4.5:1) */
	--kcf-line: #e6e8ec;
	--kcf-line-strong: #d6dae0;
	--kcf-canvas: #f3f4f6;        /* 화면 바탕 */
	--kcf-surface: #ffffff;       /* 타일 */
	--kcf-dark: #14171c;
	--kcf-dark-raised: #1f242c;
	--kcf-on-dark: #b8bfc9;
	--kcf-dark-line: #2a3039;
	--kcf-w: 1200px;              /* 내용 폭 */
	--kcf-gutter: 24px;
	--kcf-gap: 20px;              /* 타일과 타일 사이(구역 사이의 기본 여백) */
	--kcf-gap-head: var(--kcf-gap);   /* 제목으로 시작하는 구역 앞 — 2026-10-10 사용자 지시로 타일 사이와 같은 값(배너 위아래 여백)으로 통일했다 */
	--kcf-r-tile: 32px;
	--kcf-r-card: 24px;
	--kcf-type-news: #2563eb;     /* 글 종류의 점 색 */
	--kcf-type-blog: #0f9d8a;
	--kcf-type-wiki: #7c3aed;
	--container-max-width: 880px; /* 제휴 배너 영역의 폭 — 바꾸지 않는다(절대 규칙 14) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--kcf-canvas);
	color: var(--kcf-ink);
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	font-size: 16px;
	line-height: 1.65;
	letter-spacing: -0.012em;
	word-break: keep-all;         /* 한글이 낱말 중간에서 끊기지 않게 */
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--kcf-accent); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--kcf-accent); outline-offset: 2px; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.clearfix::after { content: ""; display: table; clear: both; }
.row { margin: 0; }
.col6, .col8, .col12 { width: auto; float: none; }

/* 내용 폭 상자 — 겹쳐 들어간 것은 바깥 것만 여백을 갖는다 */
.container {
	width: 100%;
	max-width: calc(var(--kcf-w) + var(--kcf-gutter) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--kcf-gutter);
	padding-right: var(--kcf-gutter);
}
.container .container { max-width: none; padding-left: 0; padding-right: 0; }
.kcf-container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; }

/* ───────────────────────── ③ 메가 메뉴(#kcf-mega — header-nav.js 가 만든다) ───────────────────────── */
body.kcf-mega-open::after, body.kcf-search-open::after {
	content: ""; position: fixed; inset: 0; z-index: 98; background: rgba(14, 17, 22, 0.38); pointer-events: none;
}
/* 스크롤을 잠그면 스크롤 막대가 사라진다 — header-nav.js 가 잰 막대의 폭(--kcf-scrollbar-gap)만큼 body 의 오른쪽을 비워 내용이 밀리지 않게 한다.
   머리의 바는 가로 전체여야 하므로 그 빈 자리까지 늘인다(안쪽 내용의 자리는 그대로) — 늘이지 않으면 바의 오른쪽 끝이 잘려 보인다(2026-10-10) */
html.kcf-mega-scrolllock { overflow: hidden; }
html.kcf-mega-scrolllock body { padding-right: var(--kcf-scrollbar-gap, 0px); }
html.kcf-scrolllock, body.kcf-scrolllock { overflow: hidden; }
.kcf-route #shellHome,
.kcf-route:not(.kcf-route-home) .kcf-home-extra { display: none; }
/* iframe 안의 문서(bare) — 머리·배너·바닥이 없다 */
body.kcf-bare-mode { background: var(--kcf-canvas); }
/* iframe 안의 문서는 스크롤 막대를 그리지 않는다 — 셸이 iframe 의 높이를 문서 높이에 맞추지만(shell-router.js), 그림이 실리거나
   무엇이 펴지는 사이 잠깐 문서가 더 길어지면 iframe 안에 막대가 생겨 내용이 그 폭만큼 왼쪽으로 밀렸다(2026-10-11).
   막대만 감춘다 — 높이 맞춤이 늦어도 스크롤은 되고, 가로로 넘친 것 때문에 막대가 생기지도 않는다 */
html:has(> body.kcf-bare-mode) { scrollbar-width: none; overflow-x: hidden; }
html:has(> body.kcf-bare-mode)::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.kcf-bare-mode .site-content { padding-bottom: 8px; }

/* ───────────────────────── ⑦ 목록 머리(.archive_header) ─────────────────────────
   홈과 목록 화면의 맨 위 — 어두운 타일 하나다(2026-10-10 사용자가 고른 시안 A). 왼쪽에 경로·제목(.h_line1)과 소개 문단 둘,
   오른쪽에 발행 수 네 칸(.kcf-hero-stats — template-parts/archive/hero-stats.php). 화려한 배너 바로 아래에서 본문이 시작하는 자리다.
   마크업: .h_line1 + .h_line3(> .container > 문단·숫자 칸) — .h_line3 와 그 안의 .container 는 display: contents 로 푼다.
   숫자 칸이 없는 머리(검색·태그·작성자·기본)는 한 칸으로 놓인다. 글 한 편의 머리(.post_header_single)는 article.css 가 따로 그린다 */
.archive_header {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; column-gap: 56px;
	max-width: var(--kcf-w); margin: 0 auto; padding: 52px 56px; border-radius: var(--kcf-r-tile);
	background: radial-gradient(120% 140% at 100% 0%, #3f1a28 0%, var(--kcf-dark) 58%); color: #ffffff;
}
@media (max-width: 1247px) { .archive_header { margin-left: var(--kcf-gutter); margin-right: var(--kcf-gutter); } }
.archive_header > .h_line1 { grid-column: 1; grid-row: 1; }
.archive_header > .h_line3, .archive_header > .h_line3 > .container { display: contents; }
.archive_header > .h_line1 > .container { max-width: none; padding: 0; }
.archive_header .intro-text { grid-column: 1; grid-row: 2; margin-top: 20px; font-size: 16.5px; line-height: 1.8; letter-spacing: -0.015em; color: var(--kcf-on-dark); }
.archive_header .frontpage-note { grid-column: 1; grid-row: 3; align-self: end; margin-top: 22px; font-size: 14.5px; line-height: 1.75; color: var(--kcf-on-dark); }
.archive_header .intro-text strong { color: #ffffff; font-weight: 600; }
.archive_header .frontpage-note a { color: #ffffff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--kcf-accent); }
.archive_header:not(:has(.kcf-hero-stats)) { grid-template-columns: minmax(0, 1fr); }
.archive_header h1.title { margin-top: 22px; font-size: 44px; font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; text-wrap: balance; color: #ffffff; }
.archive_header .header-img { display: none; }
/* 오른쪽의 숫자 네 칸 — 누르면 그 목록으로 */
.kcf-hero-stats { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 280px; list-style: none; }
.kcf-hero-stats a { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 22px 24px; border-radius: 24px; background: #ffffff; color: var(--kcf-ink); transition: transform 0.18s ease; }
.kcf-hero-stats a:hover { color: var(--kcf-ink); transform: translateY(-2px); }
.kcf-hero-stats a::after {
	content: ""; position: absolute; right: 22px; top: 22px; width: 18px; height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kcf-hero-stats__label { font-size: 14px; font-weight: 600; color: var(--kcf-muted); }
.kcf-hero-stats__num { font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--kcf-muted); }
.kcf-hero-stats__num b { margin-right: 4px; font-size: 44px; font-weight: 800; letter-spacing: -0.04em; color: var(--kcf-ink); font-variant-numeric: tabular-nums; }
/* 지금 보는 목록의 칸 — 빨간 칸에 "지금 보는 목록" */
.kcf-hero-stats .is-current a { background: var(--kcf-accent); color: #ffffff; }
.kcf-hero-stats .is-current a:hover { color: #ffffff; transform: none; }
.kcf-hero-stats .is-current a::after { content: "지금 보는 목록"; width: auto; height: auto; top: 20px; padding: 3px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.22); font-size: 12px; font-weight: 700; line-height: 1.4; }
.kcf-hero-stats .is-current .kcf-hero-stats__label, .kcf-hero-stats .is-current .kcf-hero-stats__num { color: rgba(255, 255, 255, 0.88); }
.kcf-hero-stats .is-current .kcf-hero-stats__num b { color: #ffffff; }
.kcf-hero-updated { display: inline-flex; align-items: center; min-height: 34px; margin-left: 10px; font-size: 13px; color: var(--kcf-on-dark); vertical-align: top; font-variant-numeric: tabular-nums; }
.kcf-hero-updated time { margin-left: 5px; font-weight: 600; color: #ffffff; }
/* 어두운 타일 위의 경로 표시 */
.archive_header .rank-math-breadcrumb { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.archive_header .rank-math-breadcrumb a { color: #ffffff; }
.archive_header .rank-math-breadcrumb .separator::before { color: var(--kcf-on-dark); }
.archive_header .rank-math-breadcrumb .current, .archive_header .rank-math-breadcrumb > a:last-child { color: #ff7f97; }
/* 글 한 편의 머리(.post_header_single)는 바깥 타일(.single_post_body — article.css)이 어두운 면을 그린다. 안쪽의 이 상자는 바탕·모서리를 갖지 않는다 */
.archive_header.post_header_single { border-radius: 0; background: none; }
/* 경로 표시 */
.rank-math-breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 34px; padding: 0 14px; border: 1px solid var(--kcf-line); border-radius: 17px; background: #ffffff; font-size: 13px; font-weight: 600; color: var(--kcf-text); }
.rank-math-breadcrumb a { color: var(--kcf-text); }
.rank-math-breadcrumb .separator { font-size: 0; }
.rank-math-breadcrumb .separator::before { content: "›"; font-size: 15px; line-height: 1; color: var(--kcf-muted); }
.rank-math-breadcrumb .current, .rank-math-breadcrumb > a:last-child { color: var(--kcf-accent); }
.rank-math-breadcrumb > .separator:last-child { display: none; }   /* 뒤에 아무것도 없는 구분 표시는 감춘다 */

/* ───────────────────────── ⑧ 목록·카드·쪽 번호 ───────────────────────── */
.main_content_area { padding-top: var(--kcf-gap); }
/* iframe 안에서는 셸이 이미 배너 아래를 한 칸 띄운다 — 글·안내 화면에서 여백이 두 번 겹치던 것(40px)을 하나로 */
body.kcf-bare-mode .main_content_area:not(.blog_index_area) { padding-top: 0; }
/* 목록 제목 줄(H2 + 설명)은 2026-10-10 에 뺐다 — 머리의 소개 문단과 겹쳤다. 머리 아래 타일 여백만큼 떨어져 목록(홈은 글 종류 단추)이 온다 */
.blog_index_area { padding-top: var(--kcf-gap); }
.main_content_area > .kcf-typechips:first-child, .main_content_area > .kcf-typechips { margin-top: 0; }
.list-title { font-size: 32px; line-height: 1.3; letter-spacing: -0.035em; text-wrap: balance; }
.list-title:empty { display: none; }
.list-description { max-width: 820px; margin-top: 14px; font-size: 16px; line-height: 1.75; color: var(--kcf-text); }
.list-description:empty { display: none; }
.list-description strong { color: var(--kcf-ink); font-weight: 600; }
/* 목록 머리 — 제목(왼쪽)과 소개(오른쪽)를 나란히. 구역마다 같은 틀이다(FAQ 의 머리도 같다) */
.kcf-list-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 12px 56px; }
.kcf-list-head .list-description { max-width: none; margin-top: 0; }
.kcf-list-head .list-description:empty, .kcf-list-head .list-title:empty { display: none; }
.kcf-list-head:has(.list-description:empty), .kcf-list-head:not(:has(.list-description)) { grid-template-columns: minmax(0, 1fr); }
/* 글 종류 칩(홈) */
.kcf-typechips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; font-size: 15px; font-weight: 600; }
.kcf-typechips a { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 23px; background: #ffffff; color: var(--kcf-ink); }
.kcf-typechips a[aria-current] { background: var(--kcf-ink); color: #ffffff; }

.grid_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kcf-gap); margin-top: 0; list-style: none; }
.grid_list > li { min-width: 0; }
.grid_list .blog_post_container { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--kcf-r-card); overflow: hidden; background: var(--kcf-surface); }
.grid_list .post_banner { position: relative; flex: 0 0 auto; background: var(--kcf-line); }
.grid_list .post_banner img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.kcf-card-ribbon {
	position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
	border-radius: 14px; background: rgba(255, 255, 255, 0.94); color: var(--kcf-ink); font-size: 12.5px; font-weight: 600;
}
.kcf-card-ribbon:hover { background: #ffffff; color: var(--kcf-accent); }
.grid_list .post_body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.grid_list .post_header { display: flex; flex-direction: column; gap: 8px; }
/* 카드의 규격(2026-10-10 사용자 지시): 제목은 늘 두 줄 높이(넘치면 … 으로 자른다) → 바로 아래 날짜 → 요약은 세 줄까지, 카드 바닥 쪽에 붙인다 → 자세히 보기 */
.grid_list .post_title { min-height: 3em; font-size: 16.5px; font-weight: 600; line-height: 1.5; letter-spacing: -0.022em; }
.grid_list .post_title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.grid_list .post_title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* 카드 어디를 눌러도 글로 간다 */
.post-date { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--kcf-muted); font-variant-numeric: tabular-nums; }
.post-date::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 3px; background: var(--kcf-accent); }
.blog_post_container.news .post-date::before { background: var(--kcf-type-news); }
.blog_post_container.blog .post-date::before { background: var(--kcf-type-blog); }
.blog_post_container.wiki .post-date::before { background: var(--kcf-type-wiki); }
.grid_list .post_info_wrapper { flex: 1 1 auto; display: flex; flex-direction: column; }
.grid_list .entry-summary { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.grid_list .entry-summary > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 14px; line-height: 1.7; color: var(--kcf-text); }
.grid_list .blog_post_readmore { margin-top: 0; }
.grid_list .more-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: -10px; font-size: 14px; font-weight: 600; color: var(--kcf-ink); }
.grid_list .more-link:hover { color: var(--kcf-accent); }
.grid_list .more-link .fas { font-size: 12px; }
/* 무료 슬롯 카드의 겹친 그림(인라인 스타일이 달려 있다) */
.grid_list .ssd-layered-thumb { border-radius: 0; }

/* 홈 1쪽의 첫 글 — 가로로 긴 카드 */
body.home:not(.paged) .blog_index_area .grid_list > li:first-child { grid-column: 1 / -1; }
body.home:not(.paged) .blog_index_area .grid_list > li:first-child .blog_post_container { flex-direction: row; border-radius: var(--kcf-r-tile); }
body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_banner { flex: 6 1 0; min-width: 0; }
body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_banner img { height: 100%; min-height: 320px; }
body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_body { flex: 5 1 0; min-width: 0; justify-content: center; gap: 14px; padding: 40px 44px; }
body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_title { min-height: 0; font-size: 29px; font-weight: 700; line-height: 1.36; letter-spacing: -0.035em; }
body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_info_wrapper,
body.home:not(.paged) .blog_index_area .grid_list > li:first-child .entry-summary { flex: 0 0 auto; }
body.home:not(.paged) .blog_index_area .grid_list > li:first-child .entry-summary > p { -webkit-line-clamp: 3; font-size: 16px; line-height: 1.75; }
/* 다음 쪽 타일(홈 1쪽) */
.kcf-next-tile a {
	display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 240px; padding: 26px;
	border-radius: var(--kcf-r-card); background: var(--kcf-dark); color: #ffffff;
}
.kcf-next-tile a:hover { color: #ffffff; }
.kcf-next-tile__label { font-size: 14px; font-weight: 600; color: var(--kcf-on-dark); }
.kcf-next-tile__title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 25px; font-weight: 700; line-height: 1.28; letter-spacing: -0.03em; }
.kcf-next-tile__title::after {
	content: ""; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 26px;
	background: var(--kcf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* 쪽 번호 */
.navigation.pagination { margin-top: var(--kcf-gap); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 23px; background: #ffffff; color: var(--kcf-ink); font-variant-numeric: tabular-nums; }
.pagination .page-numbers.current { background: var(--kcf-ink); color: #ffffff; }
.pagination .page-numbers.dots { min-width: 24px; padding: 0; background: none; color: var(--kcf-muted); }
.pagination a.page-numbers:hover { color: var(--kcf-accent); }

/* ───────────────────────── ⑨ 홈의 안내 구역(셸) ─────────────────────────
   2026-10-10 에 다시 그렸다(디자인 캔버스 "홈 하단" 시안): 바로가기 → 체크리스트 → 원칙·책임 안내 → FAQ. 구역 사이는 --kcf-gap */
.kcf-home-extra { padding-top: 0; }
.main-section-content { max-width: calc(var(--kcf-w) + var(--kcf-gutter) * 2); margin: var(--kcf-gap) auto 0; padding: 0 var(--kcf-gutter); }
.main-section-content > .container { max-width: none; padding: 0; }
.main-section-content h2 { font-size: 25px; line-height: 1.36; letter-spacing: -0.03em; }
.main-section-content p { font-size: 15px; line-height: 1.8; color: var(--kcf-text); }
.main-section-content p strong { color: var(--kcf-ink); font-weight: 600; }
.main-section-content p a, .verify-grid li a { color: var(--kcf-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--kcf-accent); }
.main-section-content ul, .main-section-content ol { list-style: none; }
/* 바로가기 — 어두운 소개 타일 + 번호 붙은 줄 목록 타일 둘 */
.casino-trend-section > .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kcf-gap); counter-reset: kcf-trend; }
.kcf-hub-intro { display: flex; flex-direction: column; gap: 14px; padding: 40px 36px; border-radius: var(--kcf-r-tile); background: radial-gradient(120% 140% at 100% 0%, #3f1a28 0%, var(--kcf-dark) 58%); }
.kcf-hub-intro h2 { font-size: 28px; line-height: 1.32; letter-spacing: -0.033em; text-wrap: balance; color: #ffffff; }
.kcf-hub-intro p { color: var(--kcf-on-dark); }
.kcf-hub-intro p:last-child { margin-top: auto; }
.kcf-hub-intro p strong, .kcf-hub-intro p a { color: #ffffff; }
.trend-grid { display: flex; flex-direction: column; padding: 6px 28px; border-radius: var(--kcf-r-tile); background: #ffffff; }
.trend-grid li { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; counter-increment: kcf-trend; min-height: 96px; padding: 16px 34px 16px 58px; }
.trend-grid li + li { border-top: 1px solid var(--kcf-line); }
.trend-grid li::before {
	content: counter(kcf-trend, decimal-leading-zero); position: absolute; left: 0; top: 50%; margin-top: -20px;
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px;
	background: var(--kcf-accent-soft); color: var(--kcf-accent-deep); font-size: 13px; font-weight: 700;
}
.trend-grid li::after { content: ""; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; }
.trend-grid li a { font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.028em; color: var(--kcf-ink); }
.trend-grid li a::after { content: ""; position: absolute; inset: 0; }   /* 줄 어디를 눌러도 간다 */
.trend-grid li:hover a { color: var(--kcf-accent); }
/* 설명은 늘 두 줄 높이 — 한 줄짜리도 두 줄 자리를 차지하고, 넘치면 … 으로 자른다(여섯 줄의 높이가 같아진다) */
.kcf-hub-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3.2em; margin-top: 2px; font-size: 13.5px; line-height: 1.6; color: var(--kcf-muted); }
/* 먹튀검증 체크리스트 — 흰 타일, 머리(제목 왼쪽·소개 오른쪽) 아래에 큰 번호 여섯 칸 */
.casino-safety-guide > .container { padding: 44px 48px; border-radius: var(--kcf-r-tile); background: var(--kcf-surface); }
.kcf-sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 12px 56px; }
.kcf-sec-head h2 { font-size: 30px; line-height: 1.3; letter-spacing: -0.035em; text-wrap: balance; }
.kcf-sec-head p { font-size: 15.5px; }
.safety-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; counter-reset: kcf-step; }
.safety-step-grid li { counter-increment: kcf-step; padding: 22px 24px; border-radius: 22px; background: var(--kcf-canvas); font-size: 14px; line-height: 1.7; color: var(--kcf-text); }
.safety-step-grid li::before { content: counter(kcf-step, decimal-leading-zero); display: block; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--kcf-accent); }
.safety-step-grid li strong { display: block; margin: 14px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.028em; color: var(--kcf-ink); }
/* 평가·편집 원칙(흰 타일) + 책임 있는 이용 안내(어두운 타일) */
.kcf-home-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kcf-gap); max-width: calc(var(--kcf-w) + var(--kcf-gutter) * 2); margin: var(--kcf-gap) auto 0; padding: 0 var(--kcf-gutter); }
.kcf-home-duo > .main-section-content { max-width: none; margin: 0; padding: 0; }
.eeat-policy > .container { display: flex; flex-direction: column; height: 100%; padding: 40px 44px; border-radius: var(--kcf-r-tile); background: var(--kcf-surface); }
.eeat-policy p { margin-top: 10px; }
/* 옆의 타일(책임 안내)이 더 길면 네 줄이 남는 높이를 고르게 나눠 가진다 — 아래가 비지 않게 */
.verify-grid { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 12px; }
.verify-grid li { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 15px 0; border-top: 1px solid var(--kcf-line); font-size: 14px; line-height: 1.7; color: var(--kcf-text); }
.verify-grid li:first-child { border-top: 0; }
.verify-grid li strong { display: block; margin-bottom: 2px; font-size: 15.5px; font-weight: 700; color: var(--kcf-ink); }
.verify-grid li > span { display: block; }
.eeat-policy .verify-grid + p { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--kcf-line); font-size: 14.5px; }
.responsible-play > .container { display: flex; flex-direction: column; gap: 18px; height: 100%; padding: 40px 44px; border-radius: var(--kcf-r-tile); background: var(--kcf-dark); }
.responsible-play h2 { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: #ffffff; }
/* 연령 표시 — 작은 알약 꼬리표(제목 위) */
.kcf-age { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--kcf-accent); font-size: 12.5px; font-weight: 700; letter-spacing: 0; line-height: 1; color: #ffffff; }
.responsible-play p { color: var(--kcf-on-dark); }
/* 상담 전화 — 큰 번호 */
.kcf-helpline { display: flex; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 20px; background: var(--kcf-dark-raised); }
.kcf-helpline strong { flex: 0 0 auto; font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #ffffff; font-variant-numeric: tabular-nums; }
.kcf-helpline span { font-size: 14px; line-height: 1.6; color: var(--kcf-on-dark); }
.kcf-helpline b { display: block; font-size: 15.5px; font-weight: 700; color: #ffffff; }
.checklist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: kcf-check; }
.checklist-grid li { counter-increment: kcf-check; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px; border-radius: 16px; background: var(--kcf-dark-raised); font-size: 14.5px; font-weight: 500; line-height: 1.5; color: #ffffff; }
.checklist-grid li::before { content: counter(kcf-check, decimal-leading-zero); flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #ff7f97; }
/* 멈춰야 할 신호 */
.kcf-signs strong { display: block; font-size: 15px; font-weight: 700; color: #ffffff; }
.kcf-signs ul { margin-top: 8px; }
.kcf-signs li { position: relative; padding: 3px 0 3px 16px; font-size: 14px; line-height: 1.7; color: var(--kcf-on-dark); }
.kcf-signs li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 5px; height: 5px; border-radius: 3px; background: #ff7f97; }
.responsible-play .kcf-resp-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.responsible-play .kcf-resp-links a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 18px; border: 1px solid #3a414c; border-radius: 22px; color: #ffffff; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.responsible-play .kcf-resp-links a::after { content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; }
.responsible-play .kcf-resp-links a:hover { border-color: #ffffff; }

/* ───────────────────────── ⑩ FAQ(홈·아카이브 공통 마크업) ─────────────────────────
   흰 타일 하나 — 왼쪽에 제목·소개(홈은 "FAQ 전체 보기" 단추), 오른쪽에 질문 목록. 질문만 먼저 보이고 누르면 답이 펴진다(<details>).
   답은 문서에 그대로 들어 있다 — 검색엔진이 읽는 글과 FAQPage 구조화 데이터는 펴져 있든 접혀 있든 같다 */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 56px; max-width: var(--kcf-w); margin: var(--kcf-gap) auto 0; padding: 44px 48px 28px; border-radius: var(--kcf-r-tile); background: var(--kcf-surface); }
@media (max-width: 1247px) { .faq { margin-left: var(--kcf-gutter); margin-right: var(--kcf-gutter); } }
.faq .container { max-width: none; padding: 0; }
.faq .header-line > .container { display: flex; flex-direction: column; height: 100%; padding-bottom: 16px; }
.faq .header-line h2 { font-size: 30px; line-height: 1.3; letter-spacing: -0.035em; text-wrap: balance; }
.faq .header-line p { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--kcf-text); }
.kcf-faq-more { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-top: auto; padding: 0 22px; border-radius: 26px; background: var(--kcf-ink); color: #ffffff; font-size: 15px; font-weight: 600; }
.kcf-faq-more::after { content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; }
.kcf-faq-more:hover { color: #ffffff; background: #2a3039; }
.faq-item { border-top: 1px solid var(--kcf-line); }
.faq-item:first-child { border-top: 0; }
.faq-item > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; background: var(--kcf-canvas); color: var(--kcf-ink); font-size: 18px; font-weight: 500; line-height: 1; }
.faq-item[open] > summary::after { content: "\2212"; background: var(--kcf-ink); color: #ffffff; }
.faq-item h3 { font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.025em; }
.faq-item > summary:hover h3 { color: var(--kcf-accent); }
/* 펴졌을 때 질문 아래 여백을 줄이고 답을 붙인다 — 답을 음수 여백으로 끌어올리지 않는다(질문의 초점 테두리와 답이 겹쳤다, 2026-10-10) */
.faq-item[open] > summary { padding-bottom: 10px; }
.faq-item > summary:focus-visible { outline: 2px solid var(--kcf-ink); outline-offset: 4px; border-radius: 10px; }
.faq-item > summary:focus:not(:focus-visible) { outline: none; }
.faq-item p { max-width: 640px; margin-top: 0; padding-bottom: 20px; font-size: 15px; line-height: 1.8; color: var(--kcf-text); }
.faq-item p a { color: var(--kcf-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--kcf-accent); }

/* ───────────────────────── ⑪ 공통 안내(#description) ─────────────────────────
   모든 화면의 바닥 위 — 낮은 흰 타일. 왼쪽 안내 글과 기준 세 칸, 오른쪽 제보·문의 */
#description { max-width: calc(var(--kcf-w) + var(--kcf-gutter) * 2); margin: var(--kcf-gap) auto 0; padding: 0 var(--kcf-gutter); }
#description .item_header { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px 48px; padding: 36px 44px; border-radius: var(--kcf-r-tile); background: var(--kcf-surface); }
.footer-guide-title { font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; }
.kcf-desc-text p { margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: var(--kcf-text); }
.kcf-desc-text p strong { color: var(--kcf-ink); font-weight: 600; }
#description p a { color: var(--kcf-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--kcf-accent); }
#description p a:hover { color: var(--kcf-accent); }
.kcf-desc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--kcf-line); list-style: none; }
.kcf-desc-list li { font-size: 13.5px; line-height: 1.7; color: var(--kcf-text); }
.kcf-desc-list li strong { display: block; font-size: 15px; font-weight: 700; color: var(--kcf-ink); }
.kcf-desc-contact { display: flex; flex-direction: column; justify-content: center; padding: 22px; border-radius: 22px; background: var(--kcf-canvas); }
.kcf-desc-contact__title { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.kcf-desc-contact p { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--kcf-text); }
.telegram-button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin-top: 14px; border-radius: 26px; background: var(--kcf-accent); color: #ffffff; font-size: 15px; font-weight: 600; }
.telegram-button:hover { color: #ffffff; filter: brightness(0.94); }
.telegram-button .telegram-icon { display: block; width: 22px; height: 22px; filter: brightness(0) invert(1); }
.telegram-button strong { font-weight: 700; }

/* ───────────────────────── ⑬ 검색·없는 화면 ───────────────────────── */
.not-found .full_width_list { max-width: 640px; margin: 40px auto 0; padding: 56px 40px; border-radius: var(--kcf-r-tile); background: var(--kcf-surface); text-align: center; }
.error_icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 32px; background: var(--kcf-accent-soft); color: var(--kcf-accent); font-size: 24px; }
.not-found .page-title { margin-top: 20px; font-size: 28px; letter-spacing: -0.035em; }
.not-found .page-content p { margin-top: 12px; color: var(--kcf-text); }
.search-form { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.search-form label { display: none; }
.search-form .search-field { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 20px; border: 1px solid var(--kcf-line-strong); border-radius: 27px; background: #ffffff; font-size: 16px; outline: none; }
.search-form .search-field:focus { border-color: var(--kcf-ink); }
.search-form .search_submit { flex: 0 0 auto; height: 54px; padding: 0 26px; border: 0; border-radius: 27px; background: var(--kcf-ink); color: #ffffff; font-size: 16px; font-weight: 600; cursor: pointer; }
.archive_header.search_header h1.page-title { font-size: 38px; font-weight: 800; letter-spacing: -0.04em; color: #ffffff; }
.archive_header.search_header h1.page-title span { color: #ff7f97; }@media (max-width: 1239px) {
	.grid_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}@media (max-width: 1023px) {
	:root { --kcf-gutter: 12px; --kcf-r-tile: 28px; --kcf-gap: 12px; }
	/* 하단 탭바 */
	body:not(.kcf-bare-mode) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

	.archive_header { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 26px 22px 24px; }
	.archive_header .intro-text { grid-row: auto; margin-top: 14px; font-size: 15px; line-height: 1.75; }
	.archive_header .frontpage-note { grid-row: auto; margin-top: 14px; font-size: 14px; }
	.kcf-hero-stats { grid-column: 1; grid-row: auto; gap: 8px; min-height: 0; margin-top: 18px; }
	.kcf-hero-stats a { gap: 14px; padding: 14px 16px; border-radius: 18px; }
	.kcf-hero-stats a::after { right: 14px; top: 14px; width: 16px; height: 16px; }
	.kcf-hero-stats .is-current a::after { top: 12px; right: 12px; font-size: 11px; }
	.kcf-hero-stats__label { font-size: 13px; }
	.kcf-hero-stats__num { font-size: 13px; }
	.kcf-hero-stats__num b { font-size: 28px; }
	.kcf-hero-updated { margin-left: 8px; font-size: 12.5px; }
	.kcf-list-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.archive_header h1.title, .archive_header:not(:has(.header-img)) h1.title, .archive_header.search_header h1.page-title { margin-top: 14px; font-size: 29px; line-height: 1.22; }
	.rank-math-breadcrumb { min-height: 32px; padding: 0 12px; font-size: 12px; }

	.list-title { font-size: 24px; }
	.list-description { font-size: 15px; }
	.kcf-typechips { flex-wrap: nowrap; margin-left: calc(var(--kcf-gutter) * -1); margin-right: calc(var(--kcf-gutter) * -1); padding: 0 var(--kcf-gutter); overflow-x: auto; font-size: 14px; white-space: nowrap; }
	.kcf-typechips a { flex: 0 0 auto; height: 44px; padding: 0 18px; }
	.grid_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .blog_post_container { flex-direction: column; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_banner,
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_body { flex: 0 0 auto; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_banner img { height: auto; min-height: 0; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_body { padding: 20px 22px 22px; gap: 10px; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_title { font-size: 22px; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .entry-summary > p { font-size: 15px; }
	.kcf-next-tile { grid-column: 1 / -1; }
	.kcf-next-tile a { flex-direction: row; align-items: center; min-height: 84px; padding: 0 16px 0 24px; border-radius: var(--kcf-r-tile); }
	.kcf-next-tile__label { display: none; }
	.kcf-next-tile__title { flex: 1 1 auto; align-items: center; font-size: 20px; }
	.pagination .nav-links { gap: 6px; }

	.main-section-content h2, .kcf-hub-intro h2, .kcf-sec-head h2, .faq .header-line h2 { font-size: 22px; }
	.casino-trend-section > .container { grid-template-columns: minmax(0, 1fr); }
	.kcf-hub-intro { padding: 28px 22px; }
	.kcf-hub-intro p:last-child { margin-top: 0; }
	.trend-grid { padding: 6px 20px; }
	.trend-grid li { min-height: 84px; }
	.trend-grid li a { font-size: 16px; }
	.casino-safety-guide > .container { padding: 26px 22px 22px; }
	.kcf-sec-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.kcf-sec-head p { font-size: 14.5px; line-height: 1.75; }
	.safety-step-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
	.safety-step-grid li { padding: 18px; border-radius: 18px; }
	.safety-step-grid li::before { font-size: 24px; }
	.kcf-home-duo { grid-template-columns: minmax(0, 1fr); }
	.eeat-policy > .container, .responsible-play > .container { padding: 26px 22px; }
	.checklist-grid { grid-template-columns: minmax(0, 1fr); }
	.faq { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 26px 22px 12px; }
	.faq .header-line > .container { padding-bottom: 6px; }
	.faq .header-line p { margin-top: 8px; font-size: 14.5px; line-height: 1.75; }
	.kcf-faq-more { order: 3; margin: 6px 0 14px; }
	.faq.faq--home { display: flex; flex-direction: column; }
	.faq.faq--home .header-line { display: contents; }
	.faq.faq--home .header-line > .container { display: contents; }
	.faq.faq--home .body-line { order: 2; }
	.faq-item > summary { padding: 16px 0; }
	.faq-item h3 { font-size: 15.5px; }
	.faq-item[open] > summary { padding-bottom: 8px; }
	.faq-item p { font-size: 14.5px; padding-bottom: 16px; }
	#description .item_header { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 22px; }
	.footer-guide-title { font-size: 20px; }
	.kcf-desc-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.not-found .full_width_list { margin-top: 20px; padding: 40px 22px; }
	.search-form { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
	/* 글 카드 — 작은 그림이 왼쪽에 붙는 줄. 줄들은 한 장의 흰 타일처럼 이어진다 */
	.grid_list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.grid_list > li { padding: 0 16px; background: var(--kcf-surface); }
	.grid_list > li + li { border-top: 1px solid var(--kcf-line); }
	.grid_list > li:first-child { border-radius: var(--kcf-r-tile) var(--kcf-r-tile) 0 0; }
	.grid_list > li:last-child, .grid_list > li:has(+ .kcf-next-tile) { border-radius: 0 0 var(--kcf-r-tile) var(--kcf-r-tile); }
	.grid_list > li:only-child { border-radius: var(--kcf-r-tile); }
	.grid_list .blog_post_container { flex-direction: row; align-items: center; gap: 14px; padding: 14px 0; border-radius: 0; overflow: visible; background: none; }
	.grid_list .post_banner { flex: 0 0 112px; border-radius: 14px; overflow: hidden; }
	.grid_list .post_banner img { aspect-ratio: 4 / 3; }
	.grid_list .kcf-card-ribbon { left: 6px; top: 6px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 10.5px; }
	.grid_list .post_body { padding: 0; gap: 4px; min-width: 0; }
	.grid_list .post_header { flex-direction: column-reverse; gap: 4px; }
	.grid_list .post_title { min-height: 0; font-size: 15px; line-height: 1.45; }
	.grid_list .post_title a { -webkit-line-clamp: 2; }
	.post-date { font-size: 12px; }
	.grid_list .entry-summary > p { -webkit-line-clamp: 1; font-size: 13px; }
	.grid_list .blog_post_readmore { display: none; }
	/* 홈 1쪽의 첫 글은 따로 떨어진 큰 카드로 */
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child { margin-bottom: 12px; padding: 0; border-radius: var(--kcf-r-tile); background: none; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .blog_post_container { align-items: stretch; gap: 0; padding: 0; border-radius: var(--kcf-r-tile); overflow: hidden; background: var(--kcf-surface); }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_banner { border-radius: 0; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_banner img { aspect-ratio: 16 / 9; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .kcf-card-ribbon { left: 14px; top: 14px; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 12.5px; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_header { flex-direction: column; gap: 8px; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .post_title a { -webkit-line-clamp: 3; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child .entry-summary > p { -webkit-line-clamp: 3; }
	body.home:not(.paged) .blog_index_area .grid_list > li:first-child + li { border-top: 0; border-radius: var(--kcf-r-tile) var(--kcf-r-tile) 0 0; }
	.grid_list > li.kcf-next-tile { margin-top: 12px; padding: 0; border: 0; border-radius: var(--kcf-r-tile); background: none; }
}


/* ───────────────────────── 작성자 화면 (2026-10-11, 디자인 캔버스 "11 작성자 화면 개선안") ─────────────────────────
   author.php. 프로필 머리(어두운 타일 — 왼쪽 프로필, 오른쪽 숫자 칸), 글 목록 머리(편수·분류 거르기), 필진. 카드는 ⑧ 의 것 */
.kcf-profile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 40px; max-width: var(--kcf-w); margin: 0 auto; padding: 44px 48px; border-radius: var(--kcf-r-tile); background: radial-gradient(60% 130% at 0% 0%, #3f1a28 0%, var(--kcf-dark) 62%); color: #ffffff; }
@media (max-width: 1247px) { .kcf-profile { margin-left: var(--kcf-gutter); margin-right: var(--kcf-gutter); } }
.kcf-profile__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.kcf-profile .rank-math-breadcrumb { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 17px; background: rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 600; color: #ffffff; }
.kcf-profile .rank-math-breadcrumb a { color: #ffffff; }
.kcf-profile .rank-math-breadcrumb .current { font-weight: 500; color: #ff7f97; }
.kcf-profile__who { display: flex; align-items: center; gap: 22px; }
.kcf-profile__img { flex: 0 0 auto; width: 112px; height: 112px; border: 3px solid rgba(255, 255, 255, 0.18); border-radius: 50%; object-fit: cover; background: #ffffff; }
.kcf-profile__img--org { padding: 20px; object-fit: contain; }
/* 숫자 칸이 홀수일 때(분류·제공사의 머리) 마지막 칸은 가로를 다 쓴다 */
.kcf-profile__stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kcf-profile__role { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: #ff7f97; }
.kcf-profile__name { margin-top: 4px; font-size: 36px; font-weight: 800; line-height: 1.25; letter-spacing: -0.04em; color: #ffffff; }
.kcf-profile__tagline { margin-top: 4px; font-size: 15.5px; color: var(--kcf-on-dark); }
.kcf-profile__bio { font-size: 16px; line-height: 1.8; letter-spacing: -0.015em; color: #d5d9e0; }
.kcf-profile__topics { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.kcf-profile__topics li { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(255, 255, 255, 0.1); font-size: 13px; color: #e9ecf1; }
.kcf-profile__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
.kcf-profile__stats li, .kcf-profile__stats li > a { display: flex; flex-direction: column; gap: 4px; border-radius: 20px; background: #ffffff; color: var(--kcf-ink); }
.kcf-profile__stats li { padding: 20px 22px; }
.kcf-profile__stats li:has(> a) { padding: 0; }
.kcf-profile__stats li > a { padding: 20px 22px; transition: transform 0.15s ease; }
.kcf-profile__stats li > a:hover { transform: translateY(-2px); color: var(--kcf-ink); }
.kcf-profile__stats span { font-size: 12px; font-weight: 700; color: #8e96a3; }
.kcf-profile__stats b { font-size: 22px; font-weight: 700; letter-spacing: -0.035em; white-space: nowrap; color: var(--kcf-ink); font-variant-numeric: tabular-nums; }
.kcf-profile-list { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: var(--kcf-gap); padding: 24px 36px; border-radius: var(--kcf-r-card); background: var(--kcf-surface); }
.kcf-profile-list__title { font-size: 22px; font-weight: 700; letter-spacing: -0.032em; color: var(--kcf-ink); }
.kcf-profile-list__desc { margin-top: 4px; font-size: 14px; color: var(--kcf-muted); }
.kcf-profile-list__desc a { color: var(--kcf-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--kcf-accent); text-underline-offset: 3px; }
.kcf-profile-list { position: relative; z-index: 3; }
.kcf-profile-list__filter { position: relative; flex: 0 0 auto; }
.kcf-profile-list__filter > summary { display: inline-flex; align-items: center; gap: 10px; min-width: 200px; height: 46px; padding: 0 44px 0 18px; border: 1px solid var(--kcf-line-strong); border-radius: 23px; background: var(--kcf-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 16px no-repeat; font-size: 14.5px; cursor: pointer; list-style: none; }
.kcf-profile-list__filter > summary::-webkit-details-marker { display: none; }
.kcf-profile-list__filter > summary span { font-size: 12.5px; font-weight: 700; color: #8e96a3; }
.kcf-profile-list__filter > summary b { font-weight: 600; color: var(--kcf-ink); }
.kcf-profile-list__filter[open] > summary { border-color: var(--kcf-ink); }
.kcf-profile-list__menu { position: absolute; z-index: 5; top: calc(100% + 8px); right: 0; min-width: 100%; max-height: 320px; padding: 8px; border-radius: 18px; background: var(--kcf-surface); box-shadow: 0 14px 34px rgba(20, 23, 28, 0.16), 0 0 0 1px var(--kcf-line); overflow-y: auto; }
.kcf-profile-list__menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; white-space: nowrap; color: #3a414c; }
.kcf-profile-list__menu a span { font-size: 13px; color: #a3aab5; }
.kcf-profile-list__menu a:hover { background: var(--kcf-canvas); color: var(--kcf-ink); }
.kcf-profile-list__menu a.is-on { background: var(--kcf-ink); font-weight: 600; color: #ffffff; }
.kcf-profile-list__menu a.is-on span { color: rgba(255, 255, 255, 0.7); }
.kcf-team { margin-top: var(--kcf-gap); padding: 32px 44px; border-radius: var(--kcf-r-card); background: var(--kcf-surface); }
.kcf-team__title { font-size: 22px; font-weight: 700; letter-spacing: -0.032em; color: var(--kcf-ink); }
.kcf-team ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--kcf-ink); list-style: none; }
.kcf-team a { display: flex; align-items: center; gap: 14px; color: var(--kcf-ink); }
.kcf-team img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.kcf-team img.is-org { padding: 9px; background: var(--kcf-canvas); object-fit: contain; }
.kcf-team a > span { display: flex; flex-direction: column; min-width: 0; }
.kcf-team b { font-size: 16px; font-weight: 700; }
.kcf-team em { font-size: 13.5px; font-style: normal; color: var(--kcf-muted); }
.kcf-team a:hover b { color: var(--kcf-accent); }
@media (max-width: 1023px) {
	.kcf-profile { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 22px; }
	.kcf-profile__main { gap: 14px; }
	.kcf-profile__who { gap: 14px; }
	.kcf-profile__img { width: 72px; height: 72px; }
	.kcf-profile__name { font-size: 26px; }
	.kcf-profile__tagline { font-size: 14px; }
	.kcf-profile__bio { font-size: 15px; }
	.kcf-profile__stats { gap: 8px; }
	.kcf-profile__stats li, .kcf-profile__stats li > a { border-radius: 16px; }
	.kcf-profile__stats li, .kcf-profile__stats li > a { padding: 14px 16px; }
	.kcf-profile__stats li:has(> a) { padding: 0; }
	.kcf-profile__stats b { font-size: 16.5px; }
	.kcf-profile-list { flex-direction: column; align-items: stretch; padding: 20px 22px; }
	.kcf-profile-list__title { font-size: 19px; }
	.kcf-profile-list__filter > summary { display: flex; min-width: 0; }
	.kcf-profile-list__menu { left: 0; }
	.kcf-team { padding: 24px 22px; }
	.kcf-team__title { font-size: 19px; }
	.kcf-team ul { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 4px; }
	.kcf-team li + li { border-top: 1px solid var(--kcf-line); }
	.kcf-team a { padding: 16px 0; }
}

/* ───────────────────────── 검색 결과 (2026-10-11) ─────────────────────────
   search.php. 머리는 작성자 화면의 프로필 타일(.kcf-profile)을, 목록 머리와 거르기는 .kcf-profile-list 를, 아래 구역은 안내 문서 모음(.kcf-docs)을 그대로 쓴다 */
.kcf-searchhead .kcf-profile__name { margin-top: 4px; word-break: break-all; }
.kcf-searchhead__form { display: flex; align-items: center; gap: 8px; max-width: 560px; }
.kcf-searchhead__form input[type="search"] { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 26px; background: rgba(255, 255, 255, 0.08); font-size: 16px; color: #ffffff; outline: none; }
.kcf-searchhead__form input[type="search"]::placeholder { color: #8e96a3; }
.kcf-searchhead__form input[type="search"]:focus { border-color: #ffffff; background: rgba(255, 255, 255, 0.12); }
.kcf-searchhead__form button { flex: 0 0 auto; height: 52px; padding: 0 26px; border: 0; border-radius: 26px; background: var(--kcf-accent); font-size: 15.5px; font-weight: 700; color: #ffffff; cursor: pointer; }
.kcf-searchhead:not(:has(.kcf-profile__stats)) { grid-template-columns: minmax(0, 1fr); }
.kcf-searchhead:not(:has(.kcf-profile__stats)):has(.kcf-searchhead__suggest) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.kcf-searchhead__suggest { padding: 26px 28px; border-radius: 24px; background: #ffffff; }
.kcf-searchhead__suggest p { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: #8e96a3; }
.kcf-searchhead__suggest ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; list-style: none; }
.kcf-searchhead__suggest a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--kcf-line-strong); border-radius: 20px; font-size: 14.5px; font-weight: 600; color: var(--kcf-ink); }
.kcf-searchhead__suggest a:hover { border-color: var(--kcf-ink); background: var(--kcf-ink); color: #ffffff; }
.kcf-search-empty { padding: 40px 44px; border-radius: var(--kcf-r-card); background: var(--kcf-surface); }
.kcf-search-empty__head { display: flex; align-items: center; gap: 18px; }
.kcf-search-empty__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--kcf-accent-soft); color: var(--kcf-accent); }
.kcf-search-empty h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.032em; color: var(--kcf-ink); }
.kcf-search-empty__head p { margin-top: 4px; font-size: 14.5px; color: var(--kcf-muted); }
.kcf-search-empty__tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; list-style: none; counter-reset: kcf-tip; }
.kcf-search-empty__tips li { counter-increment: kcf-tip; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 20px; background: var(--kcf-canvas); }
.kcf-search-empty__tips li::before { content: counter(kcf-tip, decimal-leading-zero); font-size: 12.5px; font-weight: 700; color: var(--kcf-accent); }
.kcf-search-empty__tips b { font-size: 16px; font-weight: 700; letter-spacing: -0.025em; color: var(--kcf-ink); }
.kcf-search-empty__tips span { font-size: 14px; line-height: 1.7; color: #4a515c; }
.kcf-search-recent { margin-top: var(--kcf-gap); }
@media (max-width: 1023px) {
	.kcf-searchhead__form input[type="search"], .kcf-searchhead__form button { height: 48px; }
	.kcf-searchhead__form button { padding: 0 20px; }
	.kcf-searchhead:not(:has(.kcf-profile__stats)):has(.kcf-searchhead__suggest) { grid-template-columns: minmax(0, 1fr); }
	.kcf-searchhead__suggest { padding: 20px 20px; border-radius: 20px; }
	.kcf-searchhead__suggest a { height: 38px; padding: 0 14px; font-size: 14px; }
	.kcf-search-empty { padding: 24px 22px; }
	.kcf-search-empty__icon { width: 48px; height: 48px; }
	.kcf-search-empty h2 { font-size: 18px; }
	.kcf-search-empty__tips { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 20px; }
	.kcf-search-empty__tips li { padding: 18px 20px; border-radius: 16px; }
}

/* 안내 문서 모음 — 안내 페이지 아래(template-parts/page/doc-index.php)와 검색 결과 아래(search.php) */
.kcf-docs { margin-top: var(--kcf-gap); padding: 36px 44px; border-radius: var(--kcf-r-card); background: var(--kcf-surface); }
.kcf-docs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.kcf-docs__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.032em; color: var(--kcf-ink); }
.kcf-docs__desc { margin: 0; font-size: 14px; color: var(--kcf-muted); }
.kcf-docs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 24px; padding-top: 24px; border-top: 2px solid var(--kcf-ink); }
.kcf-docs__label { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: #8e96a3; }
.kcf-docs ul { margin: 0; padding: 0; list-style: none; }
.kcf-docs li { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.kcf-docs li a { color: #3a414c; }
.kcf-docs li a:hover { color: var(--kcf-accent); }
.kcf-docs li.is-current span { font-weight: 700; color: var(--kcf-accent); }
.kcf-docs li.is-current em { margin-left: 6px; font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--kcf-accent); }
@media (max-width: 1023px) {
	.kcf-docs { padding: 24px 22px; }
	.kcf-docs__head { flex-direction: column; }
	.kcf-docs__title { font-size: 19px; }
	.kcf-docs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}@media (max-width: 1023px) {   /* 줄 사이 10px 를 반씩 — 이웃 링크와 겹치지 않는다 */
	.kcf-card-ribbon::after { content: ""; position: absolute; inset: -4px -2px; }
	.rank-math-breadcrumb a:not(.post_header_single a) { position: relative; }   /* 글 머리의 경로는 이미 32px(article.css) */
	.rank-math-breadcrumb a:not(.post_header_single a)::after { content: ""; position: absolute; inset: -6px -2px; }
}