/*
 * 혁명가들 — "손팻말", 팻말이 걷는다 (docs/03-DESIGN.md)
 * 신문지 바탕 + 먹색 글자 + 형광 연두 한 가지(질서유지인 조끼 색). 정당 색(빨강·파랑·노랑·주황)은 쓰지 않는다.
 * 연두(--signal)는 주 CTA · 선택 상태 · 오늘/곧 시작 · 주말 밑줄 · focus · 일정 변경 notice 에만. hover 는 --sunk.
 * 읽는 글자는 Pretendard, Black Han Sans 는 워드마크 · 큰 숫자 · 섹션 제목만.
 * CSP 가 style="" 를 막으므로 위치·상태는 모두 클래스로 (막대 길이 .w0–.w100, 타일 .r* .c*, 농도 .dens-*).
 * 모션: 쉬는(기본) 상태가 언제나 최종 상태다. 숨긴 시작 상태는 @keyframes from 과
 * @media (prefers-reduced-motion: no-preference) { html.motion … } 안에만 둔다. color-mix 는 쓰지 않는다.
 *
 * 구역: 1 토큰 → 2 기본 → 3 레이아웃 → 4 컴포넌트 → 5 페이지 → 6 모션 → 7 동작 줄이기 → 8 print
 */

/* ══ 1. 토큰 ═══════════════════════════════════════════════════════════ */
:root {
	--paper: #f3f1ea;
	--surface: #fbfaf6;
	--sunk: #e6e3d9;
	--sunk-2: #d9d5c8;
	--ink: #141414;
	--ink-2: #3f3d38;   /* 종이 위 10.2:1 */
	--ink-3: #66625a;   /* 종이 위 5.3:1 — 보조 정보만 */
	--line: #d3cfc3;
	--line-2: #a9a497;
	--signal: #d6f23c;  /* 형광 연두. 글자는 언제나 --ink 로 (14:1) */
	--signal-deep: #b9d61c;
	--hazard: #f2cf00;  /* 검수 전 띠 (로컬 전용) */
	--hazard-2: #f7e36a;
	--tape: rgba(20, 20, 20, .08);

	--display: "Black Han Sans", "Pretendard Variable", Pretendard, sans-serif;
	--text: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

	--fs-mega: clamp(80px, 22vw, 128px);
	--fs-display: clamp(34px, 8vw, 56px);
	--fs-h2: clamp(24px, 5.2vw, 32px);
	--fs-q: clamp(22px, 4.6vw, 28px);
	--fs-h3: 18px;
	--fs-body: 16px;
	--fs-sm: 14px;
	--fs-xs: 12.5px;
	--lh-num: 1.05;
	--lh-head: 1.25;
	--lh-body: 1.65;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
	--sec-gap: 48px;
	--wrap: 1180px;
	--read: 760px;
	--list: 920px;
	--gutter: 16px;

	--r: 4px;
	--r-pill: 999px;
	--bw1: 1.5px;
	--bw2: 2px;
	--bw3: 3px;
	--lift-1: 2px 2px 0 var(--ink);
	--lift-2: 4px 4px 0 var(--ink);
	--lift-3: 6px 6px 0 var(--ink);

	--dur-press: 90ms;
	--dur-hover: 160ms;
	--dur-step: 300ms;
	--dur-reveal: 360ms;
	--dur-raise: 560ms;
	--dur-bar: 600ms;
	--dur-count: 700ms;
	--ease-out: cubic-bezier(.2, .8, .2, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--ease-inout: cubic-bezier(.65, 0, .35, 1);
	--stagger: 45ms;

	--z-day: 2;
	--z-bar: 5;
	--z-fab: 8;
	--z-skip: 10;

	color-scheme: light;
}

@media (min-width: 768px) {
	:root { --gutter: 28px; }
}

@media (min-width: 1024px) {
	:root { --fs-body: 17px; --fs-h3: 19px; --sec-gap: 72px; }
}

/* ══ 2. 기본 ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 8px; }
/* 붙박이 띠(위저드 바 · 상세 액션바 · 날짜 머리)가 키보드 focus 를 가리지 않게 — focus 이동 때 브라우저가 이만큼 비켜 스크롤한다 */
html:has(.quiz__bar:not([hidden])) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (max-width: 1023.98px) {
	html:has(.actionbar) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
.rows a { scroll-margin-top: 64px; } /* 날짜 머리(sticky top:0) 아래로. 머리로 건너뛰는 #day-… 앵커는 그대로 맨 위 */

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	word-break: keep-all;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img, svg { display: block; }
h1, h2, h3, p, ol, ul, fieldset, legend { margin: 0; }
:where(ol, ul)[role="list"] { list-style: none; padding: 0; } /* :where — 컴포넌트 padding(.rail 등)이 이기게 */
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button { font: inherit; color: inherit; }
summary { cursor: pointer; }

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--signal); }
[data-q]:focus, main:focus { outline: none; box-shadow: none; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 8px; top: -60px; z-index: var(--z-skip);
	padding: 8px 14px; background: var(--ink); color: var(--paper); font-weight: 800;
}
.skip-link:focus { top: 8px; }
.skip-link--2:focus { left: 220px; }

.ico {
	width: 1.1em; height: 1.1em; flex: none;
	fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Black Han Sans — 워드마크 · 큰 숫자 · 섹션 제목 · 날짜 */
.num, .sec-title, .page-title, .logo__word, .day__date, .row__time, .card__time, .dbar__day, .tile__n, .sbar__n,
.board__big, .placard__date, .quiz__no, .quiz__total, .opt--ticket .opt__n, .result-count strong, .notice strong,
.error-page__code {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.01em;
}
.num, .row__time, .card__time, .dbar__day, .tile__n, .sbar__n, .board__big, .quiz__no, .quiz__total,
.opt--ticket .opt__n, .result-count strong, .error-page__code {
	line-height: var(--lh-num);
}
/* count-up 이 폭을 고정할 수 있게 (Black Han Sans 에는 tnum 이 없다) */
[data-count], [data-total], [data-bar-n] { display: inline-block; }

/* ══ 3. 레이아웃 ════════════════════════════════════════════════════════ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* 등장(목록 행 translateX) · 위저드 단계(step-in) · 팻말(raise) 모션의 시작 상태가 375px 에서 가로 스크롤을 만들지 않게.
   clip 은 스크롤 컨테이너를 만들지 않아 sticky(날짜 머리 · 액션바 · 라이브 바)가 그대로 동작한다. 그림자 · focus 링은 gutter 안이라 잘리지 않는다 */
main { overflow-x: clip; }

/* 개발 배너 */
.dev-banner {
	margin: 0; padding: 6px var(--gutter); font-size: 14px; text-align: center;
	background: var(--ink); color: var(--paper);
}
.dev-banner--draft {
	color: var(--ink);
	background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, var(--hazard-2) 14px 28px);
}
.dev-banner code { font-size: 13px; background: rgba(255, 255, 255, .6); padding: 1px 5px; border-radius: var(--r); }

/* 헤더 — 모바일: 1행 로고 | 찾기(56px), 2행 nav 4칸(44px). ≥768: 한 줄 64px */
.site-header { background: var(--paper); border-bottom: var(--bw3) solid var(--ink); }
.site-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "logo cta" "nav nav";
	align-items: center;
	column-gap: 12px;
}
.site-header__bar > .logo { grid-area: logo; min-height: 56px; }
.site-header__bar > .btn-find { grid-area: cta; }
.site-nav { grid-area: nav; }

.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; justify-self: start; }
.logo__mark {
	width: 26px; height: 26px; fill: var(--signal); stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round;
	transform-origin: 50% 95%;
}
.logo__word { font-size: 24px; line-height: 1; padding-top: 2px; }
.logo--footer .logo__word { font-size: 20px; }
.logo--footer .logo__mark { width: 22px; height: 22px; }

.site-nav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding-bottom: 4px; }
.site-nav a {
	display: flex; align-items: center; justify-content: center; height: 40px;
	font-weight: 800; font-size: 15px; text-decoration: none; border-radius: var(--r-pill);
}
.site-nav a:hover { background: var(--sunk); }
.site-nav a[aria-current] { background: var(--ink); color: var(--paper); }

.btn-find--header {
	position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r); background: var(--signal); box-shadow: var(--lift-1);
	font-weight: 800; font-size: 15px; line-height: 1; text-decoration: none; white-space: nowrap;
}
.btn-find--header::after { content: ""; position: absolute; inset: -4px -2px; } /* 터치 영역 44px+ */
.btn-find--header[aria-current] { background: var(--ink); color: var(--paper); }

@media (min-width: 768px) {
	.site-header__bar { display: flex; align-items: center; gap: 16px; min-height: 64px; }
	.site-header__bar > .logo { min-height: 0; }
	.site-nav { margin-left: auto; }
	.site-nav ul { display: flex; gap: 2px; padding: 0; }
	.site-nav a { padding: 0 14px; font-size: 16px; }
}

/* 빵부스러기 */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 14px 0 0; font-size: 14px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* 푸터 */
.site-footer { margin-top: 56px; padding: 26px 0 40px; border-top: var(--bw3) solid var(--ink); background: var(--sunk); }
.has-fab .site-footer { padding-bottom: 88px; }
.site-footer__basis { margin-bottom: 14px; font-size: 13px; font-weight: 800; }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; font-weight: 700; }
.site-footer__links a { display: inline-block; padding: 6px 0; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__notice { margin-top: 16px; font-size: 13px; line-height: 1.7; color: var(--ink-2); max-width: var(--read); }
.site-footer__legal { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* 섹션 공용 */
.sec { padding-top: var(--sec-gap); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; }
.sec-head .more { margin-left: auto; }
.sec-title { font-size: var(--fs-h2); line-height: var(--lh-head); }
.sec-title--sm { font-size: 22px; }
.sec-count { align-self: center; }
.sec-sub { margin-bottom: 14px; font-size: var(--fs-sm); color: var(--ink-3); }
.sub-title { font-size: var(--fs-h3); font-weight: 800; line-height: var(--lh-head); }
.more { font-size: 15px; font-weight: 800; text-underline-offset: 4px; white-space: nowrap; }
.more::after { content: " →"; }
.fine { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-3); }
.fine a { color: var(--ink-2); font-weight: 700; }
.empty { padding: 28px 0; color: var(--ink-2); }
.empty__actions { padding-bottom: 12px; }

/* ══ 4. 컴포넌트 ════════════════════════════════════════════════════════ */

/* 버튼 */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r); background: var(--paper);
	font: inherit; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--ink);
	text-align: center; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--sunk); }
.btn--signal { background: var(--signal); }
.btn--signal:hover { background: var(--signal-deep); }
.btn--ghost { background: transparent; }
.btn--sm { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.btn--xl { min-height: 56px; padding: 12px 22px; font-size: 18px; width: 100%; }
@media (min-width: 768px) {
	.btn--xl { width: auto; }
}

/* 스티커 — 2px 먹 알약, 종이 바탕, -3°. 연두는 .is-today · .is-soon 만 */
.sticker {
	display: inline-block; padding: 1px 10px; border: var(--bw2) solid var(--ink); border-radius: var(--r-pill);
	background: var(--paper); color: var(--ink); font-family: var(--text); font-weight: 800; font-size: 13px; line-height: 1.5;
	white-space: nowrap; transform: rotate(-3deg);
}
.sticker.is-today, .sticker.is-soon { background: var(--signal); }

/* 칩 */
.chips { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.chips__label { flex: none; width: 52px; padding-top: 10px; font-size: 14px; font-weight: 800; }
.chips__list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chips--scroll .chips__list {
	flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
	margin-right: calc(var(--gutter) * -1); padding: 8px var(--gutter) 8px 8px; /* 가로 스크롤은 위아래도 자른다 — focus 링(6px) 자리 */
}
.chips--scroll .chips__list::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.chips--scroll .chips__list { flex-wrap: wrap; overflow: visible; margin-right: 0; padding: 0; }
}

.chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r-pill); background: var(--surface);
	font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.chip:hover { background: var(--sunk); }
.chip__n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chip--on { background: var(--ink); color: var(--paper); }
.chip--on:hover { background: var(--ink-2); }
.chip--on .chip__n { color: var(--signal); }
.chip--zero { border-color: var(--line-2); border-style: dashed; color: var(--ink-3); background: transparent; }
.chip--zero .chip__n { color: var(--ink-3); }

/* 한 줄 가로 스크롤 칩 줄 */
.chips__list--row {
	flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
	margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter); scroll-padding: 0 var(--gutter);
}
.chips__list--row::-webkit-scrollbar { display: none; }
.chips__list--row li { flex: none; }
@media (min-width: 768px) {
	.chips__list--row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 4px 0 8px; }
}

/* 기간 세그먼트 — 모바일 두 줄 격자(4칸: 다가오는 전체 · 이번 주말 · 7일 안은 2칸), ≥768 한 줄 5칸.
   가로 스크롤을 두지 않는다 — 고른 칸이 화면 밖에 숨지 않게 (JS 없이도). 칸 사이 선은 먹 바탕 + 2px 틈.
   선택 칸은 먹 바탕에 숫자만 연두. focus 링은 칸 안쪽(inset) — 이웃 칸에 가리지 않는다 */
.chips--period { flex-wrap: wrap; row-gap: 2px; }
.chips--period .chips__label { width: 100%; padding-top: 0; }
.chips--period .chips__list {
	flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bw2);
	border: var(--bw2) solid var(--ink); border-radius: var(--r); background: var(--ink);
}
.chips--period li { display: flex; min-width: 0; }
.chips--period li:nth-child(1), .chips--period li:nth-child(4), .chips--period li:nth-child(5) { grid-column: span 2; }
.chips--period .chip {
	width: 100%; justify-content: center; border: 0; border-radius: 0; background: var(--surface); padding: 6px 8px;
}
.chips--period .chip:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--signal); }
.chips--period .chip:hover { background: var(--sunk); }
.chips--period .chip--on, .chips--period .chip--on:hover { background: var(--ink); color: var(--paper); }
.chips--period .chip--zero { color: var(--ink-3); }
@media (min-width: 768px) {
	.chips--period { flex-wrap: nowrap; }
	.chips--period .chips__label { width: 52px; padding-top: 10px; }
	.chips--period .chips__list { flex: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.chips--period li:nth-child(n) { grid-column: auto; }
}

/* 태그 · 형식 · 상태 */
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
	display: inline-block; padding: 1px 8px; border: var(--bw1) solid var(--ink); border-radius: var(--r-pill);
	font-size: 13px; font-weight: 700; line-height: 1.6; text-decoration: none; background: var(--paper);
}
.tag:hover { background: var(--sunk); }
.kind {
	display: inline-block; padding: 1px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
	font-size: 13px; font-weight: 800; line-height: 1.75;
}
.status { display: inline-block; padding: 0 6px; border-radius: var(--r); background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 800; }
.draft-tag { display: inline-block; padding: 0 6px; border-radius: var(--r); background: var(--hazard); color: var(--ink); font-size: 12px; font-weight: 800; }
.note-tag {
	display: inline-block; padding: 0 6px; border: var(--bw1) dashed var(--ink); border-radius: var(--r);
	font-size: 12px; font-weight: 800; color: var(--ink);
}

/* 곧 시작 — app.js 가 오늘(KST) 시작 시각과 비교해 글자를 넣는다 */
.soon {
	display: inline-block; padding: 0 8px; border: var(--bw2) solid var(--ink); border-radius: var(--r-pill);
	font-size: var(--fs-xs); font-weight: 800; line-height: 1.5; white-space: nowrap;
}
.soon.is-soon { background: var(--signal); transform: rotate(-3deg); }
.soon.is-past { border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); }

/* 팻말 — 3px 먹 테두리 + 6px 그림자 + 테이프 + 손잡이. 화면에 하나 */
.sign {
	position: relative; padding: 24px 20px 20px;
	border: var(--bw3) solid var(--ink); border-radius: var(--r); background: var(--surface); box-shadow: var(--lift-3);
	transform: rotate(-1.2deg);
}
.sign::before { /* 테이프 */
	content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
	background: var(--tape); transform: rotate(-4deg);
}
.sign::after { /* 손잡이 */
	content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 40px; margin: 3px 0 0 -5px;
	background: var(--ink); transform-origin: top;
}

/* 카드 · 레일 */
.rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); gap: 12px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain;
	margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 12px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
/* 마우스(가는 포인터)로는 가로 스크롤을 알아보기 어렵다 — 가는 스크롤 막대를 보인다 (≥1024 레일 · ≥768 칩 줄은 넘치지 않는다) */
@media (hover: hover) and (pointer: fine) {
	.rail, .chips__list--row, .chips--scroll .chips__list, .daynav__list { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
	.rail::-webkit-scrollbar, .chips__list--row::-webkit-scrollbar, .chips--scroll .chips__list::-webkit-scrollbar,
	.daynav__list::-webkit-scrollbar { display: block; height: 8px; background: transparent; }
	.rail::-webkit-scrollbar-thumb, .chips__list--row::-webkit-scrollbar-thumb, .chips--scroll .chips__list::-webkit-scrollbar-thumb,
	.daynav__list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
}
@media (min-width: 1024px) {
	.rail {
		grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible; margin: 0; padding: 4px 0 0;
	}
}

.card {
	position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r); background: var(--surface); scroll-snap-align: start;
}
.card__time { font-size: 28px; }
.card__time.is-unknown { font-family: var(--text); font-size: 14px; font-weight: 800; line-height: 1.6; color: var(--ink-3); }
.card__when { font-weight: 800; font-size: 15px; line-height: 1.4; }
.card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.card__title {
	font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: -0.015em;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.card__title a:focus-visible { outline: none; box-shadow: none; }
.card__title a:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--signal); }
.card__where { display: flex; align-items: flex-start; gap: 4px; font-size: 14px; color: var(--ink-2); }
.card__where .ico { width: 1em; height: 1em; margin-top: .3em; }
.card__org { font-size: 13px; color: var(--ink-3); }
.card.is-off .card__title, .card.is-off .card__time { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-3); }
.card.is-draft { border-style: dashed; padding-top: 20px; }
.card.is-draft::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
	background: repeating-linear-gradient(-45deg, var(--ink) 0 4px, var(--hazard) 4px 8px);
}

.rail__more { scroll-snap-align: start; }
.rail__more a {
	display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; padding: 14px;
	border: var(--bw2) dashed var(--ink); border-radius: var(--r); font-weight: 800; text-align: center; text-decoration: none;
}
.rail__more a:hover { background: var(--sunk); }

/* 노선도 — 3px 선 위의 점과 정류장 이름 */
.route-line { /* 번호 없는 노선 — 순서 번호를 보이지 않는다 (상세의 ol 은 aria-hidden 이라 role 이 없다) */
	position: relative; display: flex; justify-content: space-between; gap: 6px; margin: 10px 0 2px; padding: 18px 0 0;
	list-style: none;
}
.route-line::before {
	content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 3px; background: var(--ink); transform-origin: left;
}
.route-line li {
	position: relative; flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center;
}
.route-line li::before {
	content: ""; position: absolute; top: -18px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r-pill); background: var(--surface);
}
.route-line li:first-child { text-align: left; }
.route-line li:first-child::before { left: 0; margin-left: 0; }
.route-line li:last-child { text-align: right; }
.route-line li:last-child::before { left: auto; right: 0; margin-left: 0; }

/* 타일 지도 (4열 × 5행, Region.row/col) — 흑백 농도 dens-0..3 */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.tiles__item.r0 { grid-row: 1; --row: 0; }
.tiles__item.r1 { grid-row: 2; --row: 1; }
.tiles__item.r2 { grid-row: 3; --row: 2; }
.tiles__item.r3 { grid-row: 4; --row: 3; }
.tiles__item.r4 { grid-row: 5; --row: 4; }
.tiles__item.c0 { grid-column: 1; --col: 0; }
.tiles__item.c1 { grid-column: 2; --col: 1; }
.tiles__item.c2 { grid-column: 3; --col: 2; }
.tiles__item.c3 { grid-column: 4; --col: 3; }
.tile {
	display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 72px; padding: 8px 10px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r); background: var(--surface); text-decoration: none;
}
.tile__name { font-weight: 800; font-size: 16px; line-height: 1.3; }
.tile__n { font-size: 26px; align-self: flex-end; }
.tile:hover { background: var(--sunk); }
.tile.dens-0 { border-style: dashed; border-color: var(--line-2); background: transparent; color: var(--ink-3); }
.tile.dens-0 .tile__n { font-size: 18px; }
.tile.dens-0:hover { background: var(--sunk); }
.tile.dens-1 { background: var(--surface); }
.tile.dens-2 { background: var(--sunk); }
.tile.dens-2:hover { background: var(--sunk-2); }
.tile.dens-3 { background: var(--ink); color: var(--paper); }
.tile.dens-3:hover { background: var(--ink-2); }
@media (min-width: 768px) {
	.tiles { gap: 8px; }
	.tile { min-height: 88px; }
	.tile__n { font-size: 32px; }
}

/* 막대 길이 — CSP 때문에 style="" 대신 클래스 (5단위) */
.w0 { --w: 0; } .w5 { --w: .05; } .w10 { --w: .1; } .w15 { --w: .15; } .w20 { --w: .2; } .w25 { --w: .25; }
.w30 { --w: .3; } .w35 { --w: .35; } .w40 { --w: .4; } .w45 { --w: .45; } .w50 { --w: .5; } .w55 { --w: .55; }
.w60 { --w: .6; } .w65 { --w: .65; } .w70 { --w: .7; } .w75 { --w: .75; } .w80 { --w: .8; } .w85 { --w: .85; }
.w90 { --w: .9; } .w95 { --w: .95; } .w100 { --w: 1; }

/* 짧은 행 (지난 집회) */
.minis { display: grid; gap: 8px; }
@media (min-width: 768px) {
	.minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mini a {
	display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 10px 12px; text-decoration: none;
	border: var(--bw2) solid var(--ink); border-radius: var(--r); background: var(--surface);
}
.mini a:hover { background: var(--sunk); }
.mini__when { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mini__title { font-weight: 800; line-height: 1.4; }
.mini__where { font-size: 14px; color: var(--ink-3); }
.mini--off .mini__title { text-decoration: line-through; color: var(--ink-3); }
.mini--draft a { border-style: dashed; }
.past .mini a { border-color: var(--line-2); }

/* FAB — 모바일(<768)만. JS 가 헤더·히어로 CTA 와 푸터가 안 보일 때 .is-shown */
.fab {
	position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-fab);
	height: 52px; padding: 0 20px; border-radius: var(--r-pill); box-shadow: var(--lift-1);
	transform: translateY(160%); transition: transform 240ms var(--ease-out);
}
.fab.is-shown { transform: none; }
@media (min-width: 768px) {
	.fab { display: none; }
}

/* ══ 5. 페이지 ══════════════════════════════════════════════════════════ */

/* ── 홈 ───────────────────────────────────────────── */
.home-top { padding-top: 0; }
.hero {
	margin: 0 calc(var(--gutter) * -1); padding: 22px var(--gutter) 30px;
	background-image: radial-gradient(rgba(20, 20, 20, .07) 1px, transparent 1.3px); background-size: 8px 8px;
}
.hero__kicker { margin-bottom: 12px; }
.hero__title { margin-bottom: 26px; font-size: var(--fs-display); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; }
.sign--hero { margin-bottom: 52px; }
.sign__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; text-decoration: none; }
.sign__count:hover .sign__label { text-decoration: underline; text-underline-offset: 4px; }
.sign__label { flex-basis: 100%; font-size: 16px; font-weight: 800; }
.num--mega { font-size: var(--fs-mega); line-height: .95; }
.sign__unit { font-size: 24px; font-weight: 800; }
.sign__off { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.btn-find--hero { margin-top: 18px; }
.sign__hint { margin-top: 8px; font-size: 14px; color: var(--ink-3); text-align: center; }
@media (min-width: 768px) {
	.sign--hero { max-width: 460px; }
	.sign__hint { text-align: left; }
}
.quick__label { margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.quick .chips__list { gap: 8px; }
.hero__basis { margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.hero__basis a { color: var(--ink-2); font-weight: 700; text-underline-offset: 3px; }

/* 날짜별 집회 수 — 세로 막대 7개 */
.dbars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dbar { position: relative; }
.dbar a {
	display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 6px 2px 8px;
	border: var(--bw3) solid transparent; border-radius: var(--r); text-decoration: none;
}
.dbar a:hover { background: var(--sunk); }
.dbar__n { font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dbar__track {
	position: relative; display: block; width: 100%; max-width: 44px; height: 120px; margin-top: 2px;
	border-bottom: var(--bw2) solid var(--ink);
}
.dbar__fill {
	position: absolute; inset: 0; background: var(--ink); border-radius: var(--r) var(--r) 0 0;
	transform-origin: bottom; transform: scaleY(var(--w, 0));
}
.dbar__month { /* 달이 바뀌는 칸 — 칸 위에 걸어 두어 다른 칸과 줄이 어긋나지 않게 */
	position: absolute; top: -11px; left: 50%; z-index: 1; padding: 0 5px; transform: translateX(-50%);
	border-radius: var(--r); background: var(--ink); color: var(--paper);
	font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap;
}
.dbar__dow { padding: 0 6px; border-radius: var(--r-pill); font-size: 13px; font-weight: 800; line-height: 1.5; }
.dbar__day { font-size: 26px; padding: 0 2px 2px; }
.dbar.is-today a { border-color: var(--ink); }
.dbar.is-today .dbar__dow { background: var(--ink); color: var(--paper); }
.dbar.is-weekend .dbar__day { box-shadow: inset 0 -4px 0 var(--signal); }
.dbar.is-zero .dbar__n { color: var(--ink-3); }
.dbar.is-zero .dbar__track { border-bottom: var(--bw2) dashed var(--line-2); }
.sticker--peak {
	position: absolute; top: 30px; left: 0; z-index: 1; padding: 0 6px; font-size: 11.5px;
	background: var(--paper); transform: rotate(-4deg); pointer-events: none;
}
.dbar:nth-child(n+5) .sticker--peak { left: auto; right: 0; }
@media (min-width: 768px) {
	.dbars { gap: 8px; }
	.dbar__track { height: 160px; }
	.dbar__day { font-size: 32px; }
	.dbar__n { font-size: 14px; }
	.sticker--peak { font-size: 12.5px; padding: 1px 8px; }
}
@media (min-width: 1024px) {
	.dbar__track { height: 200px; }
}

/* 오늘 · 다음 레일 */
.next__regions { margin-bottom: 4px; }
.ongoing { margin-top: 24px; }
.ongoing__list { margin-top: 8px; border-top: var(--bw2) solid var(--ink); }
.ongoing__list a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0;
	border-bottom: 1px solid var(--line); text-decoration: none;
}
.ongoing__list a:hover { background: var(--sunk); }
.ongoing__title { font-weight: 800; line-height: 1.4; }
.ongoing__span { grid-column: 1; font-size: 13px; color: var(--ink-3); }
.ongoing__until { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; font-weight: 800; white-space: nowrap; }

/* 숫자로 보는 7일 — 먹 띠. 연두 막대 금지 (막대는 종이색) */
.band { margin-top: var(--sec-gap); padding: 48px 0; background: var(--ink); color: var(--paper); }
.band .sec-title { color: var(--paper); }
.band .sticker { border-color: var(--paper); }
.band .more { color: var(--paper); }
.boards { display: grid; gap: 16px; margin-top: 18px; }
.board { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 16px; border: var(--bw1) solid var(--ink-3); border-radius: var(--r); }
.board::before {
	content: ""; position: absolute; top: -9px; left: 18px; width: 56px; height: 16px;
	background: rgba(243, 241, 234, .2); transform: rotate(-4deg);
}
.board__title { font-size: var(--fs-h3); font-weight: 800; line-height: var(--lh-head); }
.board__big { font-size: 56px; }
.board__line { font-size: 14px; font-weight: 800; }
.board__cap { margin-top: auto; font-size: var(--fs-xs); color: var(--line-2); }
.board__more { align-self: flex-start; }
.band__foot { margin-top: 20px; font-size: 13px; color: var(--line); }
.sbars { display: grid; gap: 4px; }
.sbar {
	display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px;
	padding: 0 6px; margin: 0 -6px; border-radius: var(--r); text-decoration: none;
}
.sbar:hover { background: var(--ink-2); }
.sbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; }
.sbar__track { position: relative; height: 16px; border: 1px dashed var(--ink-3); }
.sbar__fill { position: absolute; inset: -1px; background: var(--paper); transform-origin: left; transform: scaleX(var(--w, 0)); }
.sbar__n { min-width: 2.4em; font-size: 20px; text-align: right; }
.marches { display: grid; }
.marches a { display: grid; gap: 2px; padding: 10px 6px; margin: 0 -6px; border-top: 1px solid var(--ink-2); text-decoration: none; border-radius: var(--r); }
.marches a:hover { background: var(--ink-2); }
.marches__when { font-size: 13px; font-weight: 800; color: var(--line); }
.marches__title { font-weight: 800; line-height: 1.4; }
.marches__none { font-size: 13px; color: var(--line-2); }
.marches__route { font-size: 13px; color: var(--line); }
.band .route-line::before { background: var(--paper); }
.band .route-line li::before { border-color: var(--paper); background: var(--ink); }
@media (min-width: 768px) {
	.boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.board--march { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.band { padding: 72px 0; }
	.boards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.board--march { grid-column: auto; }
}

/* 지역 · 주제 */
#regions, #topics {
	content-visibility: auto; contain-intrinsic-size: auto 560px;
	/* paint 제한 안에서 focus 링 · 들림 그림자가 잘리지 않게 */
	padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px;
}
.chips--topics { padding: 8px 0; }
.more-tags { margin-top: 10px; }
.more-tags summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 800; }
.more-tags .chips__list { padding: 6px 0 4px; }
.home-end { padding-top: var(--sec-gap); }
.home-end a { font-size: 20px; }

@media (min-width: 1024px) {
	.home-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; padding-top: 28px; }
	.hero { margin: 0; padding: 24px 24px 32px; }
	.home-top .days { padding-top: 24px; }
	.home-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
}

/* ── 집회 찾기 (/find) ────────────────────────────── */
.find {
	max-width: calc(var(--read) + 2 * var(--gutter)); padding-bottom: 24px;
	background-image: radial-gradient(rgba(20, 20, 20, .07) 1px, transparent 1.3px); background-size: 8px 8px;
}
.quiz { margin-top: 8px; }
.quiz__steps { display: flex; gap: 6px; }
.quiz__steps li { flex: 1 1 0; min-width: 0; }
.quiz__pill {
	position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 4px 14px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r-pill); background: var(--surface);
	text-decoration: none; line-height: 1.25; overflow: hidden;
}
.quiz__pill::after {
	content: ""; position: absolute; inset: 0; background: var(--signal);
	transform: scaleX(0); transform-origin: left;
}
.quiz__pill > span { position: relative; z-index: 1; }
.quiz__pill-k { font-size: var(--fs-xs); font-weight: 800; color: var(--ink-2); }
.quiz__pill-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; }
.quiz__pill-v:empty { display: none; }
.quiz__pill:hover { background: var(--sunk); }
.quiz__pill.is-done::after { transform: scaleX(1); }
.quiz__pill[aria-current="step"] { background: var(--ink); color: var(--paper); }
.quiz__pill[aria-current="step"]::after { transform: scaleX(0); }
.quiz__pill[aria-current="step"] .quiz__pill-k { color: var(--line); }

.quiz__nojs {
	margin-top: 14px; padding: 10px 14px; border: var(--bw2) dashed var(--ink-3); border-radius: var(--r);
	background: var(--surface); font-size: var(--fs-sm); color: var(--ink-2);
}
.quiz__notice {
	margin-top: 14px; padding: 10px 14px; border-radius: var(--r);
	background: var(--ink); color: var(--paper); font-size: var(--fs-sm); font-weight: 700;
}
/* role=status 는 늘 접근성 트리에 둔다 (hidden 으로 감췄다 글과 함께 꺼내면 읽지 않는 화면 읽기 도구가 있다) — 비면 접기만 */
.quiz__notice:empty { margin: 0; padding: 0; }

.quiz__step {
	margin-top: 24px; padding: 16px; border: var(--bw2) dashed var(--ink); border-radius: var(--r); background: var(--surface);
}
.quiz.is-live .quiz__step { border: var(--bw3) solid var(--ink); box-shadow: var(--lift-3); }
.quiz__q { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: var(--fs-q); font-weight: 800; line-height: var(--lh-head); letter-spacing: -0.02em; }
legend.quiz__q { float: left; width: 100%; }
legend.quiz__q + * { clear: both; }
.quiz__no {
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
	border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 22px; padding-top: 2px;
}
.quiz__hint { margin: -4px 0 12px; font-size: var(--fs-sm); color: var(--ink-2); }

.opts { display: grid; gap: 8px; }
.opt {
	position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r); background: var(--surface); cursor: pointer; line-height: 1.3;
}
.opt__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt__input:disabled { cursor: not-allowed; }
.opt__label { font-weight: 800; }
.opt__hint { font-size: var(--fs-sm); color: var(--ink-2); }
.opt__n { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt:hover { background: var(--sunk); }
.opt:has(.opt__input:checked) { background: var(--ink); color: var(--paper); }
.opt:has(.opt__input:checked) .opt__hint { color: var(--line); }
.opt:has(.opt__input:checked) .opt__n { color: var(--signal); }
.opt.is-zero { border-style: dashed; color: var(--ink-3); } /* JS 없으면 고를 수 있는 선택지 — 글자 대비(5.8:1)는 지킨다 */
.opt:has(:disabled) { cursor: not-allowed; opacity: .55; } /* 흐리게는 JS 가 막은(비활성) 것만 */
.opt:has(:disabled):hover { background: var(--surface); }
.opt:has(.opt__input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--signal); }
.opt__input:focus-visible { outline: none; box-shadow: none; }
@supports not selector(:has(*)) {
	/* :has 가 없는 브라우저 — 고른 값과 focus 를 라벨 글자로 */
	.opt__input:checked ~ .opt__label { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
	.opt__input:checked ~ .opt__label::before { content: "✓ "; }
	.opt__input:focus-visible ~ .opt__label { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--signal); }
}

.opt--ticket {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label n" "hint n";
	column-gap: 14px; row-gap: 2px; align-items: center; min-height: 64px; padding: 10px 16px;
}
.opt--ticket .opt__label { grid-area: label; font-size: 17px; }
.opt--ticket .opt__hint { grid-area: hint; }
.opt--ticket .opt__n {
	grid-area: n; align-self: stretch; display: flex; align-items: center; min-width: 3.2em; justify-content: flex-end;
	margin: -10px -16px -10px 0; padding: 0 16px 0 14px; border-left: var(--bw2) dashed currentColor; font-size: 28px;
}
.opt--any { width: 100%; margin-bottom: 10px; }
.tiles--quiz { max-width: none; }
.opt--tile { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2px; height: 100%; min-height: 64px; padding: 6px 8px; }
.opt--tile .opt__label { font-size: 15px; }
.opt--tile .opt__n { margin-left: 0; align-self: flex-end; font-size: 13px; }
.opts--chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt--chip { gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); }
.opt--chip .opt__n { margin-left: 0; font-size: 13px; }
.opts__group { margin: 16px 0 8px; font-size: var(--fs-sm); font-weight: 800; }
.quiz__hidden-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.quiz__nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
.quiz__nav [data-go="next"] { margin-left: auto; min-width: 7em; }

.quiz__done { margin-top: 24px; }
.sign--summary { margin-bottom: 64px; padding: 24px 20px 20px; }
.sign--summary .quiz__q { margin-bottom: 8px; }
.quiz__sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.quiz__sum li {
	padding: 2px 12px; border: var(--bw2) solid var(--ink); border-radius: var(--r-pill);
	background: var(--paper); font-size: var(--fs-sm); font-weight: 800;
}
.quiz__big { display: flex; align-items: baseline; gap: 6px; }
.quiz__total { font-size: var(--fs-mega); line-height: .95; }
.quiz__big > span { font-size: 24px; font-weight: 800; }
.quiz__pv-title { margin-top: 12px; font-size: var(--fs-sm); font-weight: 800; }
.quiz__preview { margin-top: 4px; border-top: var(--bw2) solid var(--ink); }
.quiz__preview a { display: grid; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.quiz__preview a:hover { background: var(--sunk); }
.pv__when { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.pv__title { font-weight: 800; line-height: 1.4; }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.quiz__bar {
	position: sticky; bottom: 0; z-index: var(--z-bar); display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 28px calc(var(--gutter) * -1) 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
	background: var(--ink); color: var(--paper);
}
.quiz__now { font-weight: 800; }
.quiz__now b { color: var(--signal); font-family: var(--display); font-weight: 400; font-size: 22px; line-height: var(--lh-num); }
.quiz__bar .btn { border-color: var(--paper); }

/* ── 목록 · 날짜 ─────────────────────────────────── */
.page-list main, .page-date main { max-width: var(--list); }
.page-head { padding: 14px 0 10px; }
.page-kicker { margin-bottom: 10px; }
.page-title { font-size: var(--fs-display); line-height: 1.12; }
.page-lede { margin-top: 6px; color: var(--ink-2); }

.query {
	margin-top: 8px; padding: 14px; border: var(--bw3) solid var(--ink); border-radius: var(--r);
	background: var(--surface); box-shadow: var(--lift-2); scroll-margin-top: 8px;
}
.query__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px 4px 14px;
	border: var(--bw2) solid var(--ink); border-radius: var(--r-pill); background: var(--paper);
	font-size: var(--fs-sm); font-weight: 800; text-decoration: none;
}
.pill:hover { background: var(--sunk); }
.pill__x { width: 1em; height: 1em; }
.query__none { font-weight: 800; color: var(--ink-2); }
.result-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin-top: 10px; font-weight: 800; }
.result-count strong { font-size: 40px; }
.result-count__off, .result-count__sum { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.result-count__sum { flex-basis: 100%; }
.query__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.filters { margin-top: 16px; padding: 4px 0 8px; border-bottom: var(--bw2) solid var(--ink); }
.refine summary {
	display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; list-style: none;
}
.refine summary::-webkit-details-marker { display: none; }
.refine summary::after { content: "▾"; margin-left: auto; font-size: 14px; transition: transform var(--dur-hover) var(--ease-out); }
.refine[open] summary::after { transform: rotate(180deg); }
.refine__on {
	padding: 0 8px; border: var(--bw1) solid var(--ink); border-radius: var(--r-pill); background: var(--paper);
	font-size: 13px; line-height: 1.6;
}

.daynav__list {
	display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
	margin: 8px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter);
}
.daynav__list::-webkit-scrollbar { display: none; }
.daynav__list li { flex: none; }
.daynav__list a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; white-space: nowrap;
	border: var(--bw2) solid var(--ink); border-radius: var(--r-pill); background: var(--surface);
	font-size: var(--fs-sm); font-weight: 800; text-decoration: none;
}
.daynav__list a:hover { background: var(--sunk); }
@media (min-width: 768px) {
	.daynav__list { flex-wrap: wrap; overflow: visible; margin: 12px 0 0; padding: 0; }
}

/* 날짜 묶음 + 행 */
.day { margin-top: 18px; }
.day__head {
	position: sticky; top: 0; z-index: var(--z-day); display: flex; align-items: center; gap: 10px;
	margin: 0 calc(var(--gutter) * -1); padding: 8px 12px; background: var(--ink); color: var(--paper);
	font-family: var(--text); font-weight: 400; font-size: inherit;
}
@media (min-width: 768px) {
	.day__head { margin: 0; border-radius: var(--r); }
}
.day__head a { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-decoration: none; }
.day__head a:hover .day__date { text-decoration: underline; text-underline-offset: 4px; }
.day__date { font-size: 22px; line-height: 1.2; }
.day__rel {
	padding: 0 8px; border: var(--bw1) solid var(--paper); border-radius: var(--r-pill);
	font-size: 13px; font-weight: 800; line-height: 1.6; color: var(--paper);
}
.day__rel.is-today { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.day__count { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day__carry { padding: 8px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
@media (min-width: 768px) {
	.day__carry { padding: 8px 12px 0; }
}
.day--weekend .day__head { box-shadow: inset 0 -4px 0 var(--signal); }

.row {
	position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 0;
	border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
	.row { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; padding: 16px 12px; }
}
.row:active { background: var(--sunk); }
.row__time { font-size: 22px; padding-top: 4px; }
.row__time.is-unknown { font-family: var(--text); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--ink-3); padding-top: 6px; }
@media (min-width: 768px) {
	.row__time { font-size: 26px; }
}
.row__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.row__title { margin: 2px 0; font-size: 18px; font-weight: 800; line-height: 1.4; letter-spacing: -0.015em; }
.row__title a { text-decoration: none; }
.row__title a::after { content: ""; position: absolute; inset: 0; }
.row__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.row__title a:focus-visible { outline: none; box-shadow: none; }
.row__title a:focus-visible::after { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--signal); }
.row__where { display: flex; align-items: flex-start; gap: 4px; font-size: 15px; color: var(--ink-2); }
.row__where .ico { width: 1em; height: 1em; margin-top: .32em; }
.row__org { font-size: 14px; color: var(--ink-3); }
.row .tags { position: relative; z-index: 1; margin-top: 6px; }
.row--off .row__title, .row--off .row__time { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-3); }
.row--past .row__time { color: var(--ink-3); }
.row--draft { padding-left: 14px; }
.row--draft::after {
	content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 6px; border-radius: var(--r);
	background: repeating-linear-gradient(-45deg, var(--ink) 0 4px, var(--hazard) 4px 8px);
}

.relax { margin-top: 16px; padding: 16px; border: var(--bw2) dashed var(--ink); border-radius: var(--r); background: var(--surface); }
.relax .chips__list { margin: 10px 0 14px; }

.pager { display: flex; gap: 8px; margin-top: 16px; }
.pager .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 8px 12px; font-size: 15px; }

/* ── 상세 ─────────────────────────────────────────── */
.detail { padding: 14px 0 0; max-width: var(--read); }
.draft-ribbon {
	margin-bottom: 14px; padding: 8px 12px; font-size: 14px; font-weight: 800; border-radius: var(--r);
	background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, var(--hazard-2) 14px 28px);
}
.detail__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.detail__title { margin: 10px 0 6px; font-size: 28px; font-weight: 800; line-height: 1.28; letter-spacing: -0.025em; }
@media (min-width: 768px) {
	.detail__title { font-size: 38px; }
}
.detail__org { font-weight: 700; color: var(--ink-2); }
.detail__label { margin-right: 8px; font-size: 13px; font-weight: 800; color: var(--ink-3); }

.notice {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 14px; padding: 12px 14px;
	border: var(--bw3) solid var(--ink); border-radius: var(--r);
}
.notice strong { font-size: 20px; }
.notice--off { background: var(--ink); color: var(--paper); }
.notice--changed { background: var(--signal); }

.placard {
	position: relative; margin-top: 24px; padding: 22px 16px 16px;
	border: var(--bw3) solid var(--ink); border-radius: var(--r); background: var(--surface); box-shadow: var(--lift-3);
}
.placard::before, .placard::after { /* 테이프 두 장 */
	content: ""; position: absolute; top: -9px; width: 56px; height: 18px; background: var(--tape);
}
.placard::before { left: 14px; transform: rotate(-6deg); }
.placard::after { right: 14px; transform: rotate(5deg); }
.placard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.placard__rel { font-size: 14px; }
.detail--off .placard__rel { background: var(--sunk); }
.placard__date { font-size: 32px; line-height: 1.15; }
@media (min-width: 768px) {
	.placard__date { font-size: 40px; }
}
.placard__time { margin-top: 2px; font-size: 20px; font-weight: 800; }
.placard__note { font-size: 15px; color: var(--ink-2); }
.placard__place { display: flex; flex-direction: column; margin-top: 12px; padding-top: 12px; border-top: var(--bw2) dashed var(--line-2); }
.placard__area { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.placard__place strong { font-size: 20px; line-height: 1.4; }
.placard__route { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.placard__route.is-strong { color: var(--ink); font-weight: 700; }
.placard__label {
	display: inline-block; margin-right: 2px; padding: 0 6px; border: var(--bw1) solid currentColor; border-radius: var(--r);
	font-size: 12px; font-weight: 800;
}
.placard .route-line { margin-top: 12px; }
.detail--off .placard__date, .detail--off .placard__time { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--ink-3); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 1023.98px) {
	.only-wide { display: none !important; }
}

.actionbar {
	position: sticky; bottom: 0; z-index: var(--z-bar); display: flex; gap: 8px;
	margin: 28px calc(var(--gutter) * -1) 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
	background: var(--paper); border-top: var(--bw3) solid var(--ink);
}
.actionbar .btn--signal { flex: 1 1 auto; width: auto; }

.trust { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.trust li { padding: 3px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 800; }
.trust--solid { background: var(--sunk); }
.trust--solid::before { content: "✓ "; }
.trust--weak { border: var(--bw2) dashed var(--ink-3); color: var(--ink-2); }

.notes { margin-top: 20px; padding: 12px 14px; border: var(--bw2) dashed var(--ink); border-radius: var(--r); background: var(--surface); }
.notes__title { font-size: 15px; font-weight: 800; }
.notes ul { display: grid; gap: 4px; margin-top: 4px; }
.notes li { position: relative; padding-left: 14px; line-height: 1.6; }
.notes li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--ink); }

.detail__sec { margin-top: 28px; }
.detail__h { margin-bottom: 6px; padding-bottom: 4px; border-bottom: var(--bw2) solid var(--ink); font-size: 15px; font-weight: 800; }
.detail__summary { font-size: 18px; line-height: 1.75; }

.sources { display: grid; gap: 8px; }
.sources li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sources__kind { padding: 0 6px; border: var(--bw1) solid var(--ink); border-radius: var(--r); font-size: 12px; font-weight: 800; }
.sources a { font-weight: 700; text-underline-offset: 3px; }
.sources__checked { font-size: 13px; color: var(--ink-3); }

@media (min-width: 1024px) {
	.page-detail main { max-width: var(--wrap); }
	.detail {
		display: grid; max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-areas: "ribbon ribbon" "head aside" "notice aside" "body aside"; grid-template-rows: auto auto auto 1fr;
		column-gap: 48px; align-items: start;
	}
	.draft-ribbon { grid-area: ribbon; }
	.detail__head { grid-area: head; }
	.detail > .notice { grid-area: notice; }
	.detail__aside { grid-area: aside; position: sticky; top: 24px; align-self: start; }
	.detail__aside .placard { margin-top: 12px; }
	.detail__body { grid-area: body; }
	.actionbar { display: none; }
}

/* ── 글 페이지 · 오류 ─────────────────────────────── */
.prose { max-width: calc(var(--read) + 2 * var(--gutter)); padding-bottom: 20px; }
.prose .page-title { margin-top: 14px; }
.prose h2 { margin-top: 28px; font-size: 20px; font-weight: 800; }
.prose p, .prose ul, .prose ol { margin-top: 10px; }
.prose li + li { margin-top: 4px; }

.error-page { padding: 40px var(--gutter) 30px; }
.error-page__code { font-size: 72px; color: var(--paper); -webkit-text-stroke: 2px var(--ink); }
.error-page p { margin-top: 12px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 들림 · 누름 (M12 · M13) ──────────────────────── */
@media (hover: hover) and (pointer: fine) {
	.card, .tile, .chip, .btn, .opt, .btn-find--header, .pill {
		transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
			background-color var(--dur-hover) var(--ease-out);
	}
	.card:hover, .tile:hover, .chip:hover, .btn:not(.fab):hover, .opt:hover, .btn-find--header:hover {
		transform: translate(-2px, -2px); box-shadow: var(--lift-2);
	}
	/* :has 를 모르는 브라우저가 위 규칙까지 버리지 않게 따로 둔다 */
	.opt:has(:disabled):hover { transform: none; box-shadow: none; }
	.chips--period .chip:hover { transform: none; box-shadow: none; }
	.row:hover { background: var(--surface); }
	.row::before {
		content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink);
		transform: scaleY(0); transform-origin: top; transition: transform var(--dur-hover) var(--ease-out);
	}
	.row:hover::before { transform: scaleY(1); }
}
.card:active, .tile:active, .chip:active, .btn:not(.fab):active, .opt:active, .btn-find--header:active {
	transform: translate(2px, 2px); box-shadow: none; transition-duration: var(--dur-press);
}
.chips--period .chip:active { transform: none; }
.opt:has(:disabled):active { transform: none; box-shadow: none; }

/* stagger 순번 (--i) */
[data-reveal="group"] > :nth-child(1), .dbar:nth-child(1), .sbars li:nth-child(1), .quick li:nth-child(1), .route-line li:nth-child(1) { --i: 0; }
[data-reveal="group"] > :nth-child(2), .dbar:nth-child(2), .sbars li:nth-child(2), .quick li:nth-child(2), .route-line li:nth-child(2) { --i: 1; }
[data-reveal="group"] > :nth-child(3), .dbar:nth-child(3), .sbars li:nth-child(3), .quick li:nth-child(3), .route-line li:nth-child(3) { --i: 2; }
[data-reveal="group"] > :nth-child(4), .dbar:nth-child(4), .sbars li:nth-child(4), .quick li:nth-child(4), .route-line li:nth-child(4) { --i: 3; }
[data-reveal="group"] > :nth-child(5), .dbar:nth-child(5), .sbars li:nth-child(5), .quick li:nth-child(5), .route-line li:nth-child(5) { --i: 4; }
[data-reveal="group"] > :nth-child(6), .dbar:nth-child(6), .sbars li:nth-child(6), .route-line li:nth-child(6) { --i: 5; }
[data-reveal="group"] > :nth-child(7), .dbar:nth-child(7), .route-line li:nth-child(7) { --i: 6; }
[data-reveal="group"] > :nth-child(8), .route-line li:nth-child(8) { --i: 7; }
[data-reveal="group"] > :nth-child(n+9), .route-line li:nth-child(n+9) { --i: 8; }

/* ══ 6. 모션 — 전부 transform · opacity 만. 숨긴 시작 상태는 이 블록과 @keyframes from 에만 ═══ */
@keyframes raise { from { opacity: 0; transform: translateY(28px) rotate(-5deg); } }
@keyframes handle { from { transform: scaleY(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes pop { from { opacity: 0; transform: scale(.4) rotate(-10deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes step-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes step-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes tick { 50% { transform: scale(1.08); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes wobble { 30% { transform: rotate(-8deg); } 60% { transform: rotate(4deg); } }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	/* M7–M10 등장 (JS IO 가 .is-in 을 붙인다. html.motion 은 JS 가 화면 안 요소에 .is-in 을 먼저 붙인 뒤에 단다) */
	/* 숨긴 상태는 focus 가 들어온 묶음에는 걸지 않는다 (키보드로 간 링크가 투명한 채 남지 않게 — app.js 도 .is-in 을 붙인다).
	   묶음 안 카드 · 행 · 타일의 등장은 transform 이 아니라 따로 있는 translate · scale 속성으로 — transform 은 들림 · 누름
	   (M12 · M13) 몫이라 지연 없이 바로 반응한다 */
	html.motion [data-reveal]:not(.is-in):not(:focus-within) { opacity: 0; transform: translateY(14px); }
	html.motion [data-reveal] { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
	html.motion [data-reveal="group"]:not(.is-in):not(:focus-within), html.motion [data-reveal="tiles"]:not(.is-in):not(:focus-within) { opacity: 1; transform: none; }
	html.motion [data-reveal="group"]:not(.is-in):not(:focus-within) > * { opacity: 0; translate: 24px 0; }
	html.motion [data-reveal="group"] > * {
		transition: opacity var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
			translate var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
			transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
			background-color var(--dur-hover) var(--ease-out);
	}
	/* 타일 지연은 행·열 (--row · --col: 반경 토큰 --r 과 겹치지 않게 이름을 바꿨다) */
	html.motion [data-reveal="tiles"]:not(.is-in):not(:focus-within) .tile { opacity: 0; scale: .92; }
	html.motion [data-reveal="tiles"] .tile {
		transition: opacity 280ms var(--ease-spring) calc((var(--row, 0) + var(--col, 0)) * 35ms),
			scale 280ms var(--ease-spring) calc((var(--row, 0) + var(--col, 0)) * 35ms),
			transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
			background-color var(--dur-hover) var(--ease-out);
	}
	/* 누름(M13)은 90ms — 위 transition 이 .card:active 보다 구체적이라 여기서 다시 준다 */
	html.motion [data-reveal="group"] > :active, html.motion [data-reveal="tiles"] .tile:active { transition-duration: var(--dur-press); transition-delay: 0s; }
	html.motion .board:not(.is-in) .sbar__fill { transform: scaleX(0); }
	html.motion .board .sbar__fill { transition: transform var(--dur-bar) var(--ease-out); transition-delay: calc(80ms + var(--i, 0) * 50ms); }

	/* M1 · M2 히어로 팻말 — 들어 올리고 손잡이를 내린다 */
	.sign--hero { animation: raise var(--dur-raise) var(--ease-spring) 80ms both; }
	.sign--hero::after { animation: handle 300ms var(--ease-out) 520ms both; }
	/* M4 바로 시작 칩 */
	.quick li { animation: rise 280ms var(--ease-out) both; animation-delay: calc(420ms + var(--i, 0) * 40ms); }
	/* M5 · M6 날짜 막대와 "가장 바쁜 날" */
	.dbar__fill { animation: grow-y var(--dur-bar) var(--ease-out) both; animation-delay: calc(300ms + var(--i, 0) * 50ms); }
	.sticker--peak { animation: pop 320ms var(--ease-spring) 950ms both; }
	/* M11 노선도 — 보드가 보이거나 상세가 열릴 때 */
	html.motion .is-in .route-line::before { animation: draw 700ms var(--ease-inout) both; }
	html.motion .is-in .route-line li::before { animation: pop 240ms var(--ease-spring) both; animation-delay: calc(700ms + var(--i, 0) * 90ms); }
	/* M14 위저드 단계 */
	.quiz.is-live .quiz__step:not([hidden]) { animation: step-in var(--dur-step) var(--ease-out); }
	.quiz.is-live.is-back .quiz__step:not([hidden]) { animation-name: step-back; }
	/* M15 선택 채움 · 진행 알약 */
	.opt { transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); }
	.quiz__pill::after { transition: transform 400ms var(--ease-out); }
	/* M16 라이브 숫자 */
	.is-tick { animation: tick 220ms var(--ease-out); }
	/* M17 요약 팻말 */
	.quiz.is-live .sign--summary { animation: raise 420ms var(--ease-spring) both; }
	/* M18 상세 팻말 */
	.placard { animation: raise 480ms var(--ease-spring) both; }
	.placard__rel { animation: pop 340ms var(--ease-spring) 250ms both; }
	/* M19 곧 시작 */
	.soon.is-soon { animation: pop 240ms var(--ease-spring); }
	/* M21 로고 */
	.logo:hover .logo__mark, .logo:focus-visible .logo__mark { animation: wobble 400ms var(--ease-out); }
	/* 접기 */
	.refine[open] > :not(summary) { animation: rise 200ms var(--ease-out); }

	/* M22 View Transition — 문서 사이 크로스페이드 + 결과 숫자 */
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
	::view-transition-group(result-count) { animation-duration: 360ms; animation-timing-function: var(--ease-out); }
	.result-count strong, .quiz__total { view-transition-name: result-count; }
}

/* ══ 7. 동작 줄이기 ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ══ 8. print ═══════════════════════════════════════════════════════════ */
@media print {
	[data-reveal], [data-reveal] > *, .tile { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; }
	.fab, .actionbar, .quiz__bar { display: none !important; }
	.skip-link, .site-nav, .btn-find--header { display: none !important; }
}