/*
 * ui.css — 모든 화면이 싣는 스타일: 색·글자 토큰, 머리(내비·메가 메뉴), 모바일 시트·하단 탭바, 제휴 배너,
 *          목록 머리, 글 카드, 쪽 번호, 홈의 안내 구역, FAQ, 공통 안내, 바닥.
 *
 * 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; }

/* ───────────────────────── ② 머리 ───────────────────────── */
/* 머리는 화면 가로 전체를 쓰는 흰 바(높이 64px)이고, 안쪽 내용만 콘텐츠 폭이다 — 2026-10-10 사용자가 고른 A안
   (반투명 C안을 먼저 해 봤다가 바꿨다). 아래에 한 줄 테두리. 배너는 그 아래 구역 여백(--kcf-gap)만큼 떨어져 시작한다 */
.kcf-site-header {
	position: sticky; top: 0; z-index: 100; padding: 0 var(--kcf-gutter);
	background: #ffffff; border-bottom: 1px solid var(--kcf-line);
}
.kcf-site-header .kcf-container { max-width: var(--kcf-w); }
/* 로그인한 관리자에게는 워드프레스의 관리 막대가 위에 붙어 있다(32px, 좁은 화면 46px, 600px 이하에서는 따라오지 않는다) */
body.admin-bar .kcf-site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .kcf-site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .kcf-site-header { top: 0; } }
.kcf-header {
	display: flex; align-items: center; gap: 18px;
	min-height: 64px; gap: 28px;
}
.kcf-header__branding { flex: 0 0 auto; }
.kcf-header__logo { display: block; }
.kcf-header__logo-icon { display: block; }   /* 크기는 마크업의 width·height 속성이 정한다(120×24 — header_bar.php) */
.kcf-header__nav-slot { flex: 1 1 auto; min-width: 0; }
.kcf-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.kcf-nav__item { position: relative; }
.kcf-nav__link { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-radius: 20px; color: var(--kcf-ink); white-space: nowrap; }
.kcf-nav__link:hover { background: var(--kcf-canvas); color: var(--kcf-ink); }
.kcf-nav__icon { display: none; }
.kcf-nav__chevron { display: inline-flex; transition: transform 0.2s ease; }
.kcf-nav__item.is-current > .kcf-nav__link,
.kcf-nav__item.is-mega-open > .kcf-nav__link { background: var(--kcf-ink); color: #ffffff; }
/* 메가 메뉴가 열려 있는 동안에는 열린 메뉴만 검게 — 지금 화면의 메뉴 표시는 잠시 뺀다(검은 것이 둘이면 어느 것이 열렸는지 헷갈린다) */
body.kcf-mega-open .kcf-nav__item.is-current:not(.is-mega-open) > .kcf-nav__link { background: none; color: var(--kcf-ink); }
.kcf-nav__item.is-mega-open > .kcf-nav__link .kcf-nav__chevron { transform: rotate(180deg); }
.kcf-nav__item > .kcf-nav__toggle, .kcf-nav__item > .kcf-nav__submenu { display: none; }   /* 펼침 단추와 2차 메뉴는 시트(④)에서만 보인다 */
.kcf-header__controls { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.kcf-icon-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; }
.kcf-header__search {
	display: inline-flex; align-items: center; gap: 8px; width: 240px; height: 40px; padding: 0 16px;
	border: 1px solid var(--kcf-line); border-radius: 20px; background: var(--kcf-canvas);
	color: var(--kcf-muted); font-size: 14px; text-align: left;
}
.kcf-header__search:hover { border-color: var(--kcf-line-strong); color: var(--kcf-ink); }
.kcf-header__search svg { flex: 0 0 auto; }
.kcf-header__telegram-btn {
	display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 20px;
	background: var(--kcf-accent); color: #ffffff; font-size: 15px; font-weight: 600;
}
.kcf-header__telegram-btn:hover { color: #ffffff; filter: brightness(0.94); }
.kcf-header__telegram-icon { display: block; width: 18px; height: 18px; filter: brightness(0) invert(1); }   /* 아이콘 파일은 검정이다 — 빨간 단추 위에서는 흰색으로 */
.kcf-mobile-nav-toggle { display: none; }

/* 검색 층 — 머리의 검색 단추가 연다(header-nav.js) */
.kcf-search-layer {
	position: fixed; z-index: 99; left: 50%; top: 96px; transform: translateX(-50%);
	width: min(640px, calc(100vw - 32px)); display: none;
	padding: 18px; border-radius: 28px; background: #ffffff; box-shadow: 0 30px 80px rgba(14, 17, 22, 0.28);
}
body.kcf-search-open .kcf-search-layer { display: block; }
.kcf-search-layer form { display: flex; align-items: center; gap: 8px; }
.kcf-search-layer input[type="search"] {
	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;
}
.kcf-search-layer input[type="search"]:focus { border-color: var(--kcf-ink); }
.kcf-search-layer button[type="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; }

/* ───────────────────────── ③ 메가 메뉴(#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;
}
.kcf-mega {
	position: fixed; z-index: 99; left: 50%; top: 96px; transform: translateX(-50%);
	width: min(var(--kcf-w), calc(100vw - var(--kcf-gutter) * 2)); max-height: calc(100vh - 120px);
	display: none; grid-template-columns: 280px minmax(0, 1fr); gap: 36px;
	padding: 36px; border-radius: 32px; background: #ffffff; box-shadow: 0 30px 80px rgba(14, 17, 22, 0.28);
}
body.kcf-mega-open .kcf-mega { display: grid; }
/* 층은 화면 가운데에 놓인다 — 스크롤을 잠그면 화면이 막대 폭만큼 넓어져 가운데가 반만큼 오른쪽으로 간다. 그만큼 되돌려 본문·배너와 좌우를 맞춘다(2026-10-10) */
html.kcf-mega-scrolllock .kcf-mega { left: calc(50% - var(--kcf-scrollbar-gap, 0px) / 2); width: min(var(--kcf-w), calc(100vw - var(--kcf-scrollbar-gap, 0px) - var(--kcf-gutter) * 2)); }
.kcf-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* 머리와 층 사이를 지나는 동안 닫히지 않게 */
.kcf-mega__side { display: flex; flex-direction: column; min-height: 0; }
.kcf-mega__title { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--kcf-accent); }
.kcf-mega__count { margin-top: 10px; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.kcf-mega__count small { margin-left: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.kcf-mega__search { margin-top: 24px; }
.kcf-mega__input {
	width: 100%; height: 50px; padding: 0 18px; border: 1px solid var(--kcf-line-strong); border-radius: 25px;
	background: #ffffff; font-size: 15px; outline: none;
}
.kcf-mega__input:focus { border-color: var(--kcf-ink); }
.kcf-mega__all {
	display: flex; align-items: center; justify-content: space-between; height: 54px; margin-top: 12px; padding: 0 22px;
	border-radius: 27px; background: var(--kcf-ink); color: #ffffff; font-size: 15px; font-weight: 600;
}
.kcf-mega__all:hover { color: #ffffff; filter: brightness(1.25); }
.kcf-mega__all::after { content: "→"; font-size: 17px; }
.kcf-mega__list { min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.kcf-mega__list .kcf-nav__submenu-list {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 8px; list-style: none; font-size: 15px; font-weight: 500;
}
.kcf-mega__list .kcf-nav__submenu-link {
	display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--kcf-ink);
}
.kcf-mega__list .kcf-nav__submenu-link .kcf-nav__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcf-mega__list .kcf-nav__submenu-link:hover,
.kcf-mega__list .kcf-nav__submenu-link.is-hit { background: var(--kcf-canvas); color: var(--kcf-ink); }
.kcf-mega__list .kcf-nav__submenu-link.is-current { background: var(--kcf-accent-soft); color: var(--kcf-accent-deep); font-weight: 600; }
.kcf-mega__close {
	position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border: 0; border-radius: 22px;
	background: transparent; font-size: 24px; line-height: 1; color: var(--kcf-muted);
}
.kcf-mega__close:hover { background: var(--kcf-canvas); color: var(--kcf-ink); }
/* 스크롤을 잠그면 스크롤 막대가 사라진다 — header-nav.js 가 잰 막대의 폭(--kcf-scrollbar-gap)만큼 body 의 오른쪽을 비워 내용이 밀리지 않게 한다.
   머리의 바는 가로 전체여야 하므로 그 빈 자리까지 늘인다(안쪽 내용의 자리는 그대로) — 늘이지 않으면 바의 오른쪽 끝이 잘려 보인다(2026-10-10) */
html.kcf-mega-scrolllock { overflow: hidden; }
html.kcf-mega-scrolllock .kcf-site-header { margin-right: calc(var(--kcf-scrollbar-gap, 0px) * -1); padding-right: calc(var(--kcf-gutter) + var(--kcf-scrollbar-gap, 0px)); }
html.kcf-mega-scrolllock body { padding-right: var(--kcf-scrollbar-gap, 0px); }

/* ───────────────────────── ④ 모바일 시트(#kcf-drawer)·하단 탭바 ───────────────────────── */
.kcf-drawer-overlay {
	position: fixed; inset: 0; z-index: 200; background: rgba(14, 17, 22, 0.55);
	opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
body.kcf-drawer-open .kcf-drawer-overlay { opacity: 1; pointer-events: auto; }
.kcf-drawer {
	position: fixed; z-index: 201; left: 0; right: 0; bottom: 0; height: calc(100% - 36px); max-height: 100dvh;
	display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: #ffffff;
	transform: translateY(102%); transition: transform 0.28s ease; visibility: hidden;
}
body.kcf-drawer-open .kcf-drawer { transform: none; visibility: visible; }
.kcf-drawer__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 6px 10px 0 20px; }
.kcf-drawer__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--kcf-muted); }
.kcf-drawer__title-icon { display: none; }
.kcf-drawer__close { width: 44px; height: 44px; border-radius: 22px; background: var(--kcf-canvas); }
.kcf-drawer__close-icon { display: block; width: 14px; height: 14px; }
.kcf-drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
.kcf-drawer__footer { flex: 0 0 auto; padding: 10px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
.kcf-telegram-button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 27px; background: var(--kcf-accent); color: #ffffff; font-size: 16px; font-weight: 600; }
.kcf-telegram-button:hover { color: #ffffff; }
.kcf-telegram-button__icon { display: block; width: 20px; height: 20px; }
/* 시트 안의 메뉴(머리의 메뉴 DOM 이 옮겨 온다) */
.kcf-drawer .kcf-nav__list { flex-direction: column; align-items: stretch; gap: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.kcf-drawer .kcf-nav__item { display: grid; grid-template-columns: minmax(0, 1fr) 60px; border-bottom: 1px solid var(--kcf-line); }
.kcf-drawer .kcf-nav__link { height: 60px; padding: 0 4px; border-radius: 0; background: none; color: var(--kcf-ink); }
.kcf-drawer .kcf-nav__item.is-current > .kcf-nav__link { background: none; color: var(--kcf-accent); }
.kcf-drawer .kcf-nav__chevron { display: none; }
.kcf-drawer .kcf-nav__text[data-count]::after {
	content: attr(data-count); display: inline-flex; align-items: center; height: 24px; margin-left: 8px; padding: 0 9px;
	border-radius: 12px; background: var(--kcf-ink); color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: 0; vertical-align: 2px;
}
.kcf-drawer .kcf-nav__toggle { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; }
.kcf-drawer .kcf-nav__toggle-icon { display: block; width: 18px; height: 18px; transition: transform 0.2s ease; }
.kcf-drawer .kcf-nav__item.is-subopen > .kcf-nav__toggle .kcf-nav__toggle-icon { transform: rotate(180deg); }
.kcf-drawer .kcf-nav__item.is-subopen > .kcf-nav__submenu { display: block; grid-column: 1 / -1; }
.kcf-drawer .kcf-nav__submenu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 0 0 14px; list-style: none; }
.kcf-drawer .kcf-nav__submenu-link { display: flex; align-items: center; height: 44px; padding: 0 6px; font-size: 15px; font-weight: 500; letter-spacing: -0.012em; color: var(--kcf-text); }
.kcf-drawer .kcf-nav__submenu-link .kcf-nav__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcf-drawer .kcf-nav__submenu-link.is-current { color: var(--kcf-accent); font-weight: 600; }
html.kcf-scrolllock, body.kcf-scrolllock { overflow: hidden; }

.kcf-tabbar { display: none; }

/* ───────────────────────── ⑤ 제휴 배너 ─────────────────────────
   아래 17개 규칙은 2026-10-10 이전의 site.css 에서 글자 하나 바꾸지 않고 옮겼다(절대 규칙 14 — 자리·크기·순서를 바꾸지 않는다).
   고치지 않는다. 1023px 이하의 배너는 이 규칙 그대로이고 영역의 폭은 위 ① 의 --container-max-width(880px)다.
   1024px 이상의 3열 배치는 이 규칙들 바로 아래에 따로 있다(사용자 지시 2026-10-10). */
.kcf-top-banner { padding: 0; }
.kcf-top-banner__inner { padding: 0; }
.kcf-top-banner__list { padding: 0; margin: 0; list-style-type: none; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0; }
/* 빈칸은 뒤의 배너로 메운다(사용자 지시 2026-10-12) — 가로 두 칸짜리가 줄을 넘기며 남긴 칸에 그 뒤의 첫 한 칸짜리가 들어간다.
   마크업의 순서는 그대로이고 놓는 자리만 당긴다. 4열과 2열이 저마다 따로 메운다. 계산은 inc/banner.php 의 kcf_banner_pack_dense() 와 같다 */
.kcf-top-banner__list--dense { grid-auto-flow: row dense; }
.kcf-top-banner__tile { position: relative; display: flex; height: 105px; background-color: #ffffff; justify-content: center; align-items: center; font-size: 12px; text-align: center; color: #999999; cursor: pointer; }
.kcf-top-banner__tile--telegram { background-color: #4a95cc; transition: background-color 0.3s ease; }
.kcf-top-banner__tile--telegram:hover { background-color: #3877a6; }
.kcf-top-banner__tile:not(.kcf-top-banner__tile--telegram) img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* 움직이는 소재(업체관리 플러그인이 GIF 를 영상으로 바꿔 낸다) — 그림과 같은 자리·같은 크기 */
.kcf-top-banner__tile:not(.kcf-top-banner__tile--telegram) video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; background: #ffffff; pointer-events: none; }
/* 링크가 칸 전체를 덮는다 — 소재가 절대 위치라 링크 자체는 크기가 0 이었고, 영상은 클릭을 통과시켜 칸(div)만 눌렸다(2026-10-20 수정) */
.kcf-top-banner__tile:not(.kcf-top-banner__tile--telegram) > a { position: absolute; inset: 0; display: block; }
.kcf-top-banner__telegram-link { position: relative; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 180px; height: 60px; background-color: #4a95cd; color: #ffffff; font-size: 14px; font-weight: 400; text-decoration: none; border-radius: 25px; }
.kcf-top-banner__telegram-text { text-align: left; }
.kcf-top-banner__telegram-title, .kcf-top-banner__telegram-handle { display: block; line-height: 1; }
.kcf-top-banner__telegram-icon { position: relative; width: 40px; height: 40px; margin-right: 10px; }
.kcf-top-banner__item--span2 { grid-column: span 2; }
.kcf-top-banner__item--span4 { grid-row: span 2; }
.kcf-top-banner__item--span4 .kcf-top-banner__tile { height: 210px; }
@media screen and (max-width: 580px) { .kcf-top-banner__list { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 580px) { .kcf-top-banner__tile { height: 71px; } }
@media screen and (max-width: 580px) { .kcf-top-banner__item--span4 .kcf-top-banner__tile { height: 142px; } }
/* 여기까지 — 옮겨 온 배너 규칙 끝 */

/* PC(1024px 이상) — 배너를 콘텐츠 폭에 4열로 놓는다. 2026-10-10 사용자 지시(옛 기획 클린버전으로재구축.md §14.8 — docs 리포 이력, b9531d2 에서 지움).
   **1023px 이하는 위의 규칙 그대로다(2열).** 순서는 바꾸지 않는다(grid-auto-flow: dense 금지).
   소재가 2열 기준으로 짜여 있어(가로 두 칸짜리가 늘 짝수 자리에서 시작한다) 4열에서는 순서 그대로 놓아도 빈칸이 생기지 않는다.
   높이는 75px 로 고정이다(사용자 지시 2026-10-10) — 폭 1200px 에서 한 칸 300×75px(그림의 원래 비율은 300×80). 세로 두 칸은 150px. */
.kcf-top-banner__item--fill { display: none; }
/* 2열(1023px 이하)의 빈칸에 두는 "배너 문의" 칸 — 4열에서는 감춘다(4열의 빈칸은 --fill 이 메운다). 2026-10-12 */
.kcf-top-banner__item--fill-m { display: block; }
@media (min-width: 1024px) {
	body > .kcf-top-banner > .kcf-container { max-width: calc(var(--kcf-w) + var(--kcf-gutter) * 2); padding: 0 var(--kcf-gutter); }
	.kcf-top-banner__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.kcf-top-banner__item { min-width: 0; }
	.kcf-top-banner__item--fill { display: block; }
	.kcf-top-banner__item--fill-m { display: none; }
	.kcf-top-banner__tile { height: 75px; }
	.kcf-top-banner__item--span4 .kcf-top-banner__tile { height: 150px; }
}
/* 채우는 칸("광고 문의") — 조용한 어두운 칸에 점선 테두리. 배너보다 눈에 띄지 않게 */
.kcf-top-banner__tile--inquiry { background-color: var(--kcf-dark); cursor: default; }
.kcf-top-banner__inquiry {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: calc(100% - 16px); height: calc(100% - 16px);
	border: 1px dashed #4a515c; border-radius: 12px; color: var(--kcf-on-dark); font-size: 12.5px; line-height: 1.3; letter-spacing: 0; text-decoration: none;
}
.kcf-top-banner__inquiry strong { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; }
.kcf-top-banner__inquiry:hover { border-color: var(--kcf-accent); color: #ffffff; }
/* 구역 사이의 여백은 하나다 — --kcf-gap(20px, 좁은 화면 12px). 배너의 위아래 여백을 기준으로 모든 구역을 맞췄다(사용자 지시 2026-10-10).
   머리↔배너↔홈 머리↔글 목록↔쪽 번호↔안내 구역들↔FAQ↔공통 안내↔바닥, 그리고 카드와 카드 사이까지 같은 값이다 */
body > .kcf-top-banner { margin-top: var(--kcf-gap); }

/* ───────────────────────── ⑥ 셸(/app.kr) ─────────────────────────
   홈(#shellHome)은 셸이 직접 그리고, 그 밖의 경로는 iframe 이 싣는다. <html> 에 kcf-route 가 있으면 iframe 을 보여준다 */
#contentFrame { display: none; width: 100%; min-height: 800px; margin-top: var(--kcf-gap); border: 0; }
#shellHome { margin-top: var(--kcf-gap); }
.kcf-route #contentFrame { display: block; }
.kcf-route #shellHome,
.kcf-route:not(.kcf-route-home) .kcf-home-extra { display: none; }   /* 홈의 안내 구역과 FAQ 는 홈과 홈 목록의 2쪽 이후(kcf-route-home — shell-router.js)에서만 */
.kcf-progress-wrap { position: sticky; top: 0; z-index: 101; height: 3px; margin-bottom: -3px; pointer-events: none; }
.kcf-progress-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--kcf-accent); transition: width 0.3s ease; }
.kcf-progress-bar.loading { width: 85%; transition: width 8s cubic-bezier(0.1, 0.5, 0.3, 1); }
.kcf-progress-bar.done { width: 100%; transition: width 0.2s ease; }
.kcf-progress-bar.fade { opacity: 0; transition: opacity 0.4s ease; }
/* 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; }

/* ───────────────────────── ⑫ 바닥 ─────────────────────────
   화면 가로 전체의 어두운 면 — 로고·소개·연령 표시 / 메뉴 세 묶음 / 연락처, 아래 줄에 저작권과 SNS */
#colophon { margin-top: var(--kcf-gap); padding: 60px var(--kcf-gutter) 44px; background: var(--kcf-dark); color: var(--kcf-on-dark); font-size: 14.5px; }
.kcf-foot, .kcf-foot__bottom { max-width: var(--kcf-w); margin: 0 auto; }
.kcf-foot { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)) minmax(0, 3fr); gap: 40px; }
.kcf-foot__logo { display: block; width: 150px; height: auto; filter: brightness(0) invert(1); }
.kcf-foot__brand p { max-width: 320px; margin-top: 16px; line-height: 1.8; }
.kcf-foot__age { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px 8px 8px; border-radius: 22px; background: var(--kcf-dark-raised); font-size: 13px; color: #e9ecf1; }
.kcf-foot__age span { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--kcf-accent); border-radius: 14px; font-size: 11px; font-weight: 800; color: #ff7f97; }
.kcf-foot__title { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #ff7f97; }
.kcf-foot__col .navbar { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; list-style: none; font-size: 15px; }
.kcf-foot__col .navbar a { color: #e9ecf1; }
.kcf-foot__col .navbar a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.footer_credits { margin-top: 14px; line-height: 1.9; color: #e9ecf1; }
.footer_credits span { color: var(--kcf-on-dark); }
.kcf-foot__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--kcf-dark-line); }
.kcf-foot__copy { font-size: 13px; }
.footer_sns { display: flex; flex-wrap: wrap; gap: 8px; }
.footer_sns a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; background: var(--kcf-dark-raised); }
.footer_sns a:hover { background: #2a3039; }
.footer_sns img { display: block; width: 20px; height: 20px; }
.alia_gototop_button {
	position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
	border-radius: 24px; background: var(--kcf-ink); color: #ffffff; font-size: 16px; box-shadow: 0 10px 24px rgba(14, 17, 22, 0.22);
	opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 0.2s ease;
}
.alia_gototop_button.alia_gototop_visible { opacity: 1; pointer-events: auto; }

/* ───────────────────────── ⑬ 검색·없는 화면 ───────────────────────── */
.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) {
	.kcf-header__search { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
	.grid_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kcf-mega__list .kcf-nav__submenu-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	:root { --kcf-gutter: 12px; --kcf-r-tile: 28px; --kcf-gap: 12px; }
	/* 머리 — 로고·검색·텔레그램만. 메뉴는 하단 탭바와 시트로 */
	.kcf-site-header { padding: 0; }
	.kcf-header { min-height: 60px; padding: 0 10px 0 16px; gap: 18px; }
	.kcf-header__nav-slot { display: none; }
	.kcf-header__controls { margin-left: auto; gap: 6px; }
	.kcf-header__telegram-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
	.kcf-header__telegram-text { display: none; }
	.kcf-header__telegram-icon { width: 20px; height: 20px; }
	.kcf-search-layer { top: 72px; }
	/* 하단 탭바 */
	body:not(.kcf-bare-mode) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
	.kcf-tabbar {
		position: fixed; z-index: 210; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; height: 68px; padding: 0 6px;
		border: 1px solid var(--kcf-line); border-radius: 34px; background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 14px 34px rgba(14, 17, 22, 0.2);
		font-size: 11px; font-weight: 600; letter-spacing: -0.02em;
	}
	.kcf-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; padding: 0; border: 0; border-radius: 28px; background: none; color: var(--kcf-text); white-space: nowrap; }
	.kcf-tabbar__item:hover { color: var(--kcf-ink); }
	.kcf-tabbar__item.is-current, body.kcf-drawer-open .kcf-tabbar__item--menu { background: var(--kcf-ink); color: #ffffff; }
	body.kcf-drawer-open .kcf-tabbar__item.is-current:not(.kcf-tabbar__item--menu) { background: none; color: var(--kcf-text); }
	.alia_gototop_button { right: 16px; 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; }
	#colophon { padding: 36px 22px calc(110px + env(safe-area-inset-bottom, 0px)); }
	.kcf-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
	.kcf-foot__brand { grid-column: 1 / -1; }
	.kcf-foot__bottom { flex-direction: column-reverse; align-items: flex-start; margin-top: 28px; }
	.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; }
}
/* 좁은 화면의 작은 누름 영역 — 눌리는 범위만 넓히고 겉보기 자리·크기는 그대로 둔다(2026-10-21, 높이 24px 아래였던 것들).
   글줄 안의 링크(display: inline)는 위아래 padding 이 줄 높이를 바꾸지 않으므로 padding 으로, 상자인 것은 투명한 ::after 로 넓힌다.
   제휴 배너(.kcf-top-banner)는 여기서 다루지 않는다(절대 규칙 14) */
@media (max-width: 1023px) {
	.kcf-foot__col .navbar a { padding-block: 5px; }   /* 줄 사이 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; }
}