/*
 * chrome.css — 머리가 있는 문서(셸 /app.kr · 봇이 받는 전체 페이지)에만 싣는 스타일: 머리(내비 · 메가 메뉴) · 모바일 시트 · 하단 탭바 ·
 *              제휴 배너 · 셸 배치(진행 막대 · #contentFrame) · 바닥. iframe 문서(bare — kcf_is_iframe_mode())는 싣지 않는다.
 *
 * 2026-10-28 ui.css 에서 규칙 단위로 떼었다(점검 F13 — 규칙의 선택자가 모두 위 부분의 이름을 담은 것만). 차례 · 주석은 ui.css 의 것 그대로이고,
 * ui.css 바로 뒤에 실린다(inc/assets.php — 그래서 두 파일을 이어 붙인 것과 같은 순서다). 떼기 전 · 뒤에 셸 · 전체 페이지 · iframe 문서의
 * 모든 요소의 계산된 스타일 · 위치를 견줘 같은 것을 확인했다.
 * 제휴 배너(⑤)의 자리 · 순서 · 노출 방식은 광고 계약이다 — 바꾸지 않는다(CLAUDE.md 절대 규칙 14).
 */

/* ───────────────────────── ② 머리 ───────────────────────── */
/* 머리는 화면 가로 전체를 쓰는 흰 바(높이 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 {
	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); }
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)); }

/* ───────────────────────── ④ 모바일 시트(#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; }

.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 수정) */
/* "배너 문의" 칸은 뺀다 — 이 규칙의 display:block 이 그 칸의 가운데 정렬(flex)을 덮어 글자가 위로 붙고 점선 틀이 어긋났다(2026-10-28) */
.kcf-top-banner__tile:not(.kcf-top-banner__tile--telegram):not(.kcf-top-banner__tile--inquiry) > 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; }   /* 홈의 안내 구역과 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; }

/* ───────────────────────── ⑫ 바닥 ─────────────────────────
   화면 가로 전체의 어두운 면 — 로고·소개·연령 표시 / 메뉴 세 묶음 / 연락처, 아래 줄에 저작권과 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; }

/* ───────────────────────── ⑭ 좁은 화면 ───────────────────────── */
@media (max-width: 1239px) {
	.kcf-header__search { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
	.kcf-mega__list .kcf-nav__submenu-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
@media (max-width: 1023px) {
	/* 머리 — 로고·검색·텔레그램만. 메뉴는 하단 탭바와 시트로 */
	.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; }
	.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)); }
	#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; }}
/* 좁은 화면의 작은 누름 영역 — 눌리는 범위만 넓히고 겉보기 자리·크기는 그대로 둔다(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; }}