/* ==========================================================================
   예술가들 — 디자인 시스템 "읽히는 포스터" (docs/04-ART-DIRECTION.md)
   정체성(세 색 · 워드마크 · 분야 도형 · 크롭 D-숫자)은 포스터처럼, 읽는 글자는 서비스처럼.

   1. 토큰             2. 리셋 · 기본        3. 레이아웃 · 유틸리티
   4. 사이트 틀         5. 버튼 · 링크 · 입력  6. 분야 면 · 도형 · 표시
   7. D-day · 조건 배지  8. 목록 행 · 포스터 · 작은 행
   9. 섹션 머리 · 페이지 머리 · 분야 머리 · 공용 부품
  10. 홈               11. 공모 찾기(검색 · 필터)   12. 공모 상세
  13. 분야 홈 · 유형 랜딩 · 시리즈               14. 수상작
  15. 나한테 맞는 공고 찾기 · 저장 · 소개 · 데이터 원칙 · 오류
  16. 토스트 · 다이얼로그 · 액션바 · 움직임 · 인쇄

   반응형: 모바일 기본 → 600px → 768px → 1024px(넓은 화면 틀) → 1200px.
   글자: 읽는 글자는 Pretendard. Gothic A1 900 은 페이지 · 섹션 제목만, Bricolage 는 숫자만, Gasoek One 은 워드마크만.
   ========================================================================== */

/* 1. 토큰 ------------------------------------------------------------------ */
:root {
	color-scheme: light;

	/* 세 색과 파생 (글자는 놓이는 면 위에서 4.5:1 이상 — 수치는 docs/04-ART-DIRECTION.md §3) */
	--paper: #eeeee8;
	--surface: #f7f7f3;        /* 입력칸 · 카드 · hover */
	--sunk: #e5e5de;           /* 가라앉은 종이 */
	--navy: #0f1c26;
	--navy-2: #1c2a35;         /* 네이비 hover */
	--mauve: #d1bac0;
	--mauve-soft: #e6dadc;     /* 모브 50% */
	--mauve-deep: #b99ea6;     /* 모브 면 위 도형 */

	--ink: var(--navy);        /* 본문 14.9:1 */
	--ink-2: #3f4950;          /* 보조 글자: 종이 7.9 · 표면 8.6 · 가라앉은 종이 7.3 · 모브50% 6.8 · 모브 5.0 */
	--ink-3: #566067;          /* 흐린 글자: 종이 5.5 · 가라앉은 종이 5.1 · 모브50% 4.7 (모브 위 금지) */
	--on-navy: var(--paper);
	--on-navy-2: #b6bab8;      /* 네이비 위 보조 8.8 */
	--ink-2-on-mauve: #2f3a42; /* 모브 면 위 보조 6.4 (--ink-2 는 4.52 경계) */
	--line: #d6d7d1;           /* 가는 선 */
	--line-2: #bcbfb9;         /* 조금 진한 선 · 칩 · 토글 테두리 (글자가 이름을 말해 주는 곳) */
	--line-input: #7e8587;     /* 입력칸 · 선택칸 테두리 (WCAG 1.4.11): 종이 3.22 · 표면 3.50 */
	--focus: var(--navy);

	/* 글꼴 역할 */
	--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
		"Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
	--font-display: "Gothic A1", var(--font-sans);
	--font-num: "Bricolage Grotesque", var(--font-sans);
	--font-mark: "Gasoek One", "Gothic A1", var(--font-sans);

	/* 글자 크기 (모바일 → 1024px 에서 몇 개만 커진다) */
	--fs-xs: 0.75rem;          /* 12 라벨 */
	--fs-sm: 0.8125rem;        /* 13 캡션 · 배지 */
	--fs-meta: 0.875rem;       /* 14 메타 · 날짜 · 사실 줄 */
	--fs-body-sm: 0.9375rem;   /* 15 보조 본문 · 표 값 */
	--fs-body: 1rem;           /* 16 → 17 본문 */
	--fs-row: 1.0625rem;       /* 17 → 18 목록 제목 */
	--fs-lead: 1.125rem;       /* 18 → 20 리드 */
	--fs-h3: 1.25rem;          /* 20 → 22 소제목 · 카드 제목 */
	--fs-h2: 1.5rem;           /* 24 → 30 섹션 제목 (Gothic A1) */
	--fs-h1: 1.875rem;         /* 30 → 44 페이지 제목 (Gothic A1) */

	/* 목록 행 (§8): 폰 값 → 넓은 목록(@container rows 46rem~) 값. 넓은 목록은 줄 격자로 칩 · 날짜를 제목 · 사실 줄에 맞춘다 */
	--fs-fact: var(--fs-body-sm); /* 15 사실 줄 · 칩 옆 날짜 */
	--fs-fact-wide: 1rem;      /* 16 넓은 목록 사실 줄 */
	--fs-row-wide: 1.1875rem;  /* 19 넓은 목록 제목 (--fs-row 는 수상작도 쓴다) */
	--fs-chip-wide: 1.0625rem; /* 17 넓은 목록 D-day 칩 (Bricolage) */
	--row-line: 1.625rem;      /* 26 넓은 목록 제목 줄 */
	--row-line-fact: 1.375rem; /* 22 사실 줄 · 날짜 줄 */
	--row-line-meta: 1.25rem;  /* 20 메타 · 조건 줄 */
	--w-row-wide: 48rem;       /* 1200px 목록의 글줄 (그보다 좁은 목록은 --w-text) */

	--fs-sec: 1.25rem;         /* 20 → 24 상세 본문 섹션 제목 (폰에서 긴 제목 22 보다 작게) */
	--fs-desc: 0.9375rem;      /* 15 → 16 섹션 설명 · 상자 글 · 맺음 글 */

	/* 행간 역할 */
	--lh-display: 1.15;        /* Gothic h1 */
	--lh-tight: 1.25;          /* Gothic h2 (두 줄이 부딪히지 않게) */
	--lh-title-lg: 1.3;        /* Pretendard 800 24–40px */
	--lh-title: 1.4;           /* Pretendard 700–800 20–22px */
	--lh-snug: var(--lh-title);
	--lh-row: 1.45;            /* 17–18px 목록 제목 */
	--lh-meta: 1.5;            /* 15px 이하 한 줄 메타 · 라벨 */
	--lh-note: 1.6;            /* 13–16px 여러 줄 보조 글 */
	--lh-body: 1.7;

	/* 자간 역할: 클수록 좁게, 15px 이하는 0 */
	--ls-h1: -0.035em;
	--ls-h2: -0.03em;
	--ls-title: -0.025em;
	--ls-row: -0.02em;
	--ls-small: 0;

	/* 라벨 (표 · 사실 줄의 이름 칸): 값이 먼저 읽히게 */
	--label-fs: var(--fs-meta);
	--label-fw: 500;
	--label-lh: var(--lh-meta);

	/* 간격 (4 · 8 격자) */
	--s-0: 0.125rem; /* 2 */
	--s-1: 0.25rem;  /* 4 */
	--s-1h: 0.375rem;/* 6 */
	--s-2: 0.5rem;   /* 8 */
	--s-3: 0.75rem;  /* 12 */
	--s-4: 1rem;     /* 16 */
	--s-5: 1.5rem;   /* 24 */
	--s-6: 2rem;     /* 32 */
	--s-7: 3rem;     /* 48 */
	--s-8: 4rem;     /* 64 */
	--section: 3.5rem;         /* 56 → 72 → 88 섹션 사이 */
	/* 관계 간격: 가까운 것은 가깝게 (라벨→값 < 메타 < 항목 < 머리→내용 < 묶음 < 블록 < 하위 섹션) */
	--sp-stack: var(--s-0);    /* 라벨 → 값 */
	--sp-line: var(--s-1);     /* 한 줄 항목 · 메타 → 사실 */
	--sp-meta: var(--s-1h);    /* 머리글 → 제목 · 제목 → 메타 */
	--sp-label: var(--s-2);    /* 13–15px 라벨 제목 → 내용 */
	--sp-item: 0.625rem;       /* 10 → 12 여러 줄이 되는 목록 항목 사이 */
	--sp-para: 1em;            /* 문단 → 문단 */
	--sp-head: var(--s-3);     /* 12 → 16 16–24px 제목 → 내용 */
	--sp-group: 1.25rem;       /* 20 → 24 상세 시트 묶음 */
	--sp-block: var(--s-5);    /* 24 섹션 안 블록 → 블록 */
	--sp-shead: var(--s-5);    /* 24 → 32 Gothic 섹션 머리 → 내용 */
	--sp-page-top: var(--s-5); /* 24 → 32 경로 → 맨 페이지 머리 */
	--sp-sub: 2.5rem;          /* 40 → 48 → 56 상세 하위 섹션 사이 */
	--gutter: 1.25rem;         /* 20 → 32 → 40 페이지 좌우 */
	--w-page: 75rem;           /* 1200 */
	--w-text: 42rem;           /* 본문 글줄 최대 (목록 · 섹션 머리) */

	/* 읽는 글 (상세 본문 · 수상작 · 소개 · 데이터 원칙). 크기 → 1024px~ */
	--fs-read: 1.0625rem;      /* 17 → 18 문단 */
	--lh-read: 1.75;           /* → 1.7 문단 */
	--lh-data: 1.65;           /* 목록 · 표 값 · 꼭 확인할 점 */
	--ls-read: -0.01em;
	--w-read: 36rem;           /* 576: 18px 한글 한 줄 약 35자 · 17px 약 37자 */
	--w-note: 32rem;           /* 512: 14–16px 보조 글 한 줄 약 33–38자 */
	--gap-item: var(--sp-item);
	--header-h: 3.5rem;        /* 56 → 64 */

	--bw: 1px;
	--bw-strong: 2px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 160ms;

	/* 움직임 (docs/04 §9) — 짧게 · 빠르게 들어와 천천히 멈춘다. 줄인 움직임에선 거리 · 배율 토큰이 0 이 된다 */
	--dur-1: 120ms;            /* 누름 · 색 */
	--dur-2: 200ms;            /* 물체 hover */
	--dur-3: 320ms;            /* 단계 전환 */
	--dur-mark: 500ms;         /* 도형 돌기 */
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
	--hover-scale: 1.02;
	--press-scale: 0.985;
	--press-scale-sm: 0.92;    /* 아이콘 버튼 */
	--press-y: 1px;
	--lift: -2px;
	--nudge: 3px;
	--mark-turn: -10deg;
	--crop-rise: 0.08em;
	--shadow-sheet: 0 -12px 40px rgba(15, 28, 38, 0.18);
	--shadow-pop: 0 12px 32px rgba(15, 28, 38, 0.16);
}

@media (min-width: 768px) {
	:root {
		--gutter: 2rem;
		--sp-sub: 3rem;
		--section: 4.5rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--fs-body: 1.0625rem;
		--fs-row: 1.125rem;
		--fs-lead: 1.25rem;
		--fs-h3: 1.375rem;
		--fs-h2: 1.875rem;
		--fs-h1: 2.75rem;
		--fs-read: 1.125rem;
		--lh-read: 1.7;
		--fs-sec: 1.5rem;
		--fs-desc: 1rem;
		--sp-item: 0.75rem;
		--sp-head: 1rem;
		--sp-group: 1.5rem;
		--sp-shead: var(--s-6);
		--sp-page-top: var(--s-6);
		--sp-sub: 3.5rem;
		--section: 5.5rem;
		--gutter: 2.5rem;
		--header-h: 4rem;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--s-5);
}

@media (min-width: 1024px) {
	html {
		scroll-padding-top: calc(var(--header-h) + var(--s-5));
	}
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: -0.01em;
	word-break: keep-all;
	line-break: strict;
	overflow-wrap: break-word; /* anywhere 는 한글 낱말을 한 음절까지 줄여 '마/감'처럼 갈랐다 */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

main {
	flex: 1 0 auto;
	display: block;
}

main:focus {
	outline: none;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset {
	margin: 0;
}

ul, ol {
	padding: 0;
}

ul[role="list"], ol[role="list"] {
	list-style: none;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: var(--lh-snug);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p,
li,
dd {
	text-wrap: pretty;
}

img, svg, video, iframe {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

button, input, select, textarea {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

fieldset {
	border: 0;
	padding: 0;
	min-width: 0;
}

legend {
	padding: 0;
}

b, strong {
	font-weight: 700;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* 초점 링 색은 놓인 면을 따른다: 네이비 면 → 모브, 모브 · 종이 면 → 네이비 (모브 링이 모브 면에 앉지 않게) */
.band,
.field--music,
.ticker,
.actionbar,
.hall-head,
.doc-closing,
.toast {
	--focus: var(--mauve);
}

.field--art,
.field--literature {
	--focus: var(--navy);
}

::selection {
	background: var(--mauve);
	color: var(--navy);
}

/* 3. 레이아웃 · 유틸리티 ----------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--w-page) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-top: var(--section);
}

/* 푸터 앞 여백은 한 번만: 마지막 컨테이너(또는 섹션)가 준다. .section 은 위 여백만 가진다 */
main > .section:last-child,
main > .container:last-child {
	padding-bottom: var(--section);
}

.band {
	margin-top: var(--section);
	padding-block: var(--section);
	background: var(--navy);
	color: var(--on-navy);
}

main > .band:last-child {
	margin-bottom: 0;
}

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

.nowrap {
	white-space: nowrap;
}

html:not(.js) .js-only {
	display: none !important;
}

[hidden] {
	display: none !important;
}

.tag-sample {
	display: inline-flex;
	align-items: center;
	height: 1.25rem;
	padding: 0 0.375rem;
	border: 1px dashed currentColor;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1;
}

.list-more {
	margin-top: var(--s-5);
}

.note-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	padding: var(--s-5) 0;
	border-top: var(--bw) solid var(--line);
	border-bottom: var(--bw) solid var(--line);
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
}

/* 4. 사이트 틀 --------------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--s-4);
	z-index: 200;
	padding: var(--s-3) var(--s-4);
	background: var(--navy);
	color: var(--paper);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	top: var(--s-2);
}

.sample-banner {
	padding: var(--s-2) var(--gutter);
	background: var(--mauve);
	color: var(--navy);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-align: center;
}

/* 헤더: 모바일 [로고 ……… 도구] + 가로로 넘기는 메뉴 한 줄. 1024px~ 한 줄로 위에 붙는다 */
.site-header {
	position: relative;
	z-index: 60;
	background: var(--paper);
	border-bottom: var(--bw) solid var(--line);
}

.site-header__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"logo . tools"
		"nav nav nav";
	align-items: center;
}

.logo {
	grid-area: logo;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--header-h);
	color: var(--navy);
	text-decoration: none;
}

.logo__mark {
	width: 2.25rem;
	height: 0.75rem;
	fill: currentColor;
	flex: none;
}

.logo__word {
	font-family: var(--font-mark);
	font-size: 1.375rem;
	line-height: 1;
	letter-spacing: 0;
}

.site-nav {
	grid-area: nav;
	margin-inline: calc(var(--gutter) * -1);
	border-top: var(--bw) solid var(--line);
	overflow-x: auto;
	scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
	display: none;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	width: max-content;
	padding-inline: calc(var(--gutter) - var(--s-2));
}

.site-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	height: 2.75rem;
	padding-inline: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.site-nav__link:hover {
		color: var(--ink);
	}

	.site-nav__link:not([aria-current]):hover .site-nav__bar {
		transform: none;
	}
}

.site-nav__link[aria-current] {
	color: var(--ink);
	font-weight: 700;
}

/* 표시 막대(span — 페이지를 건너 미끄러질 수 있게, 17-b): 평소엔 접혀 있고(scaleX 0) hover 에서 회색으로 미리, 현재 메뉴는 네이비 */
.site-nav__bar {
	position: absolute;
	left: var(--s-2);
	right: var(--s-2);
	bottom: 0;
	height: 2px;
	background: var(--line-2);
	transform: scaleX(0);
	transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.site-nav__link[aria-current] .site-nav__bar {
	background: var(--navy);
	transform: none;
}

.site-nav__sep {
	width: 1px;
	height: 0.875rem;
	margin-inline: var(--s-1);
	background: var(--line-2);
}

.site-header__tools {
	grid-area: tools;
	display: flex;
	align-items: center;
	gap: var(--s-1);
	margin-right: calc(var(--s-2) * -1);
}

.tool-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: var(--s-2);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.tool-link:hover {
		background: var(--sunk);
	}
}

.tool-link__icon {
	width: 1.375rem;
	height: 1.375rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
	flex: none;
}

.count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3125rem;
	background: var(--navy);
	color: var(--paper);
	font-family: var(--font-num);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

.tool-link--saved .count {
	position: absolute;
	top: 0.25rem;
	right: 0.125rem;
}

.header-search {
	display: none;
}

/* 600 아래: 글자는 숨기되 읽는 이름('저장', '저장 3')으로는 남긴다 */
@media (max-width: 599.98px) {
	.tool-link__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (min-width: 600px) {
	.tool-link--saved .count {
		position: static;
	}
}

@media (min-width: 1024px) {
	.site-header {
		position: sticky;
		top: 0;
	}

	.site-header__bar {
		grid-template-columns: auto auto 1fr auto;
		grid-template-areas: "logo nav . tools";
		column-gap: var(--s-6);
	}

	.logo__word {
		font-size: 1.5rem;
	}

	.site-nav {
		margin: 0;
		border: 0;
		overflow: visible;
	}

	.site-nav__list {
		padding: 0;
	}

	.site-nav__link {
		height: var(--header-h);
		padding-inline: var(--s-3);
	}

	.site-nav__bar {
		left: var(--s-3);
		right: var(--s-3);
	}
}

@media (min-width: 1200px) {
	.header-search {
		position: relative;
		display: flex;
		align-items: center;
		width: 15rem;
	}

	.header-search + .tool-link--search {
		display: none;
	}

	.header-search__icon {
		position: absolute;
		left: var(--s-3);
		width: 1.125rem;
		height: 1.125rem;
		fill: none;
		stroke: var(--ink-2);
		stroke-width: 2;
		pointer-events: none;
	}

	.header-search__input {
		width: 100%;
		height: 2.5rem;
		padding: 0 var(--s-3) 0 2.375rem;
		background: var(--surface);
		border: var(--bw) solid var(--line-input);
		border-radius: 0;
		font-size: var(--fs-body-sm);
		-webkit-appearance: none;
		appearance: none;
	}

	.header-search__input::placeholder {
		color: var(--ink-3);
	}

	.header-search__input:focus {
		outline: none;
		border-color: var(--navy);
		box-shadow: inset 0 0 0 1px var(--navy);
	}
}

/* 빵부스러기 */
.crumbs {
	padding-top: var(--s-4);
}

.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) 0;
	font-size: var(--fs-sm);
	color: var(--ink-3);
	letter-spacing: var(--ls-small);
}

.crumbs__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.crumbs__item + .crumbs__item::before {
	content: "";
	flex: none;
	width: 0.3125rem;
	height: 0.3125rem;
	margin: 0 0.625rem 0 0.5rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}

.crumbs a {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.crumbs a:hover {
		color: var(--ink);
	}
}

.crumbs [aria-current] {
	display: block;
	max-width: 14rem;
	overflow: hidden;
	color: var(--ink-2);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 푸터 */
.site-footer {
	padding-block: var(--s-7) var(--s-6);
	background: var(--sunk);
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	letter-spacing: var(--ls-small);
}

.site-footer__inner {
	display: grid;
	gap: var(--s-6);
}

.site-footer__brand .logo {
	height: auto;
}

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-5);
}

/* 좁은 화면: 칸 폭을 글 길이대로 ('나한테 맞는 공고 찾기'가 두 줄로 꺾이지 않게) */
@media (max-width: 599.98px) {
	.site-footer__nav {
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
		column-gap: var(--s-4);
	}
}

.site-footer__notice {
	text-wrap: balance;
}

.site-footer__heading {
	margin-bottom: var(--sp-label);
	color: var(--ink);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.site-footer__links {
	display: grid;
	gap: var(--s-1);
}

.site-footer__links a {
	display: inline-block;
	padding-block: 0.25rem;
	text-decoration: none;
}

/* 개인정보 처리방침은 다른 링크와 구별되게 (개인정보 보호법 권고) */
.site-footer__links .site-footer__privacy {
	font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
	.site-footer__links a:hover {
		color: var(--ink);
	}
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-2) var(--s-5);
	margin-top: var(--s-7);
	padding-top: var(--s-5);
	border-top: var(--bw) solid var(--line-2);
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

/* 폰 푸터: 링크 줄 간격은 누름 자리(24px)만큼, 위아래 여백은 줄인다 (약 500 → 425px) */
@media (max-width: 767.98px) {
	.site-footer {
		padding-block: var(--s-6) var(--s-5);
	}

	.site-footer__links {
		gap: 0;
	}

	.site-footer__links a {
		padding-block: 0.3125rem;
		line-height: var(--lh-meta);
	}

	.site-footer__legal {
		margin-top: var(--s-6);
		padding-top: var(--s-4);
	}
}

@media (min-width: 1024px) {
	/* 로고는 제 폭만, 링크 칸이 나머지를 고르게 나눈다 (소개 문장을 뺀 뒤 왼쪽이 크게 비었다) */
	.site-footer__inner {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--s-8);
	}

	.site-footer__nav {
		gap: var(--s-6);
	}
}

/* 5. 버튼 · 링크 · 입력 ------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 3rem;
	padding: 0 var(--s-5);
	border: var(--bw) solid transparent;
	border-radius: 0;
	background: none;
	font-size: var(--fs-body-sm);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-small);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-1) var(--ease-out);
}

.btn--primary {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
	.btn--primary:hover {
		background: var(--navy-2);
	}
}

.btn--secondary {
	background: transparent;
	border-color: var(--navy);
	color: var(--navy);
}

@media (hover: hover) and (pointer: fine) {
	.btn--secondary:hover {
		background: var(--navy);
		color: var(--paper);
	}
}

.btn--accent {
	background: var(--mauve);
	border-color: var(--mauve);
	color: var(--navy);
}

@media (hover: hover) and (pointer: fine) {
	.btn--accent:hover {
		background: var(--mauve-deep);
		border-color: var(--mauve-deep);
	}
}

.btn--ghost {
	padding-inline: var(--s-3);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

@media (hover: hover) and (pointer: fine) {
	.btn--ghost:hover {
		background: var(--sunk);
	}
}

.btn--sm {
	min-height: 2.5rem;
	padding-inline: var(--s-4);
	font-size: var(--fs-meta);
}

.btn--lg {
	min-height: 3.5rem;
	padding-inline: var(--s-6);
	font-size: var(--fs-body);
	letter-spacing: var(--ls-read);
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn__icon {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	flex: none;
}

.band .btn--secondary,
.field--music .btn--secondary,
.award-hall .btn--secondary {
	border-color: var(--paper);
	color: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
	.band .btn--secondary:hover,
	.field--music .btn--secondary:hover,
	.award-hall .btn--secondary:hover {
		background: var(--paper);
		color: var(--navy);
	}
}

/* 더 보기 (섹션 머리 오른쪽) · 화살표 링크 */
.more {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	min-height: 2.75rem;
	color: inherit;
	font-size: var(--fs-body-sm);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.more__arrow {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.link-arrow {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.link-arrow::after {
	content: "\00a0→";
	display: inline-block;
	text-decoration: none;
}

/* 검색창: 한 페이지의 주 검색 하나만 2px 테 */
.searchbar {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	background: var(--surface);
	border: var(--bw-strong) solid var(--navy);
}

.searchbar__icon {
	position: absolute;
	top: 50%;
	left: var(--s-4);
	width: 1.25rem;
	height: 1.25rem;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--ink-2);
	stroke-width: 2;
	pointer-events: none;
}

.searchbar__input {
	flex: 1;
	min-width: 0;
	height: 3.25rem;
	padding: 0 var(--s-3) 0 3rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: var(--fs-body);
	-webkit-appearance: none;
	appearance: none;
}

.searchbar__input::placeholder {
	color: var(--ink-3);
}

.searchbar__input:focus {
	outline: none;
}

/* 검색 칸의 지우기 ×: 크롬 기본은 파란색이라 세 가지 색 밖 → 글자 색 × 로 */
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 0.875rem;
	height: 0.875rem;
	margin-left: var(--s-2);
	background: var(--ink-2);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	cursor: pointer;
}

.searchbar:focus-within {
	box-shadow: 0 0 0 3px var(--mauve);
}

.searchbar__submit {
	flex: none;
	min-width: 4.5rem;
	padding: 0 var(--s-4);
	background: var(--navy);
	border: 0;
	color: var(--paper);
	font-size: var(--fs-body-sm);
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.searchbar__submit:hover {
		background: var(--navy-2);
	}
}

.select {
	width: 100%;
	height: 2.75rem;
	padding: 0 2.25rem 0 var(--s-3);
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230f1c26' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1rem;
	border: var(--bw) solid var(--line-input);
	border-radius: 0;
	font-size: var(--fs-body-sm);
	-webkit-appearance: none;
	appearance: none;
}

.select:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: inset 0 0 0 1px var(--navy);
}

.hint {
	margin-top: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-note);
	letter-spacing: var(--ls-small);
}

/* 토글 칩 (라디오 · 체크박스를 칩으로): 라벨 안 sr-only 입력 */
.toggles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.5rem;
	padding: 0 var(--s-3);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.toggle:hover {
		border-color: var(--navy);
	}
}

.toggle:has(:checked) {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--paper);
}

.toggle:has(:focus-visible) {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.toggle .glyph {
	width: 0.6875rem;
	height: 0.6875rem;
}

.toggle__sym {
	font-family: var(--font-num);
	font-weight: 800;
}

/* 한 줄 고르기 (필터 '마감' 전체 · 7 · 14 · 30일): 곁 폭 288px 에서도 넷이 한 줄에 고르게.
   칸이 약 69px 이라 글자를 가운데 두고 안쪽 여백은 두지 않는다 (15px '30일 안'이 칸 안에 남는다 — 이름은 짧게, OpportunityController.deadlineOptions) */
.toggles--seg {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-1);
}

.toggles--seg .toggle {
	justify-content: center;
	padding-inline: 0;
	white-space: nowrap;
}

/* 6. 분야 면 · 도형 · 표시 ---------------------------------------------------- */
.glyph {
	width: 0.6875rem;
	height: 0.6875rem;
	fill: currentColor;
	flex: none;
}

/* 분야 면: 음악 네이비 · 미술 모브 · 문학 종이 + 2px 테 */
.field--music {
	--f-bg: var(--navy);
	--f-fg: var(--paper);
	--f-fg-2: var(--on-navy-2);
	--f-line: rgba(238, 238, 232, 0.22);
	--f-shape: var(--mauve);
	--f-shape-2: var(--paper);
	--f-cut: var(--navy);
	--focus: var(--mauve);
	background: var(--f-bg);
	color: var(--f-fg);
}

.field--art {
	--f-bg: var(--mauve);
	--f-fg: var(--navy);
	--f-fg-2: var(--ink-2-on-mauve);
	--f-line: rgba(15, 28, 38, 0.22);
	--f-shape: var(--navy);
	--f-shape-2: var(--navy);
	--f-cut: var(--paper);
	background: var(--f-bg);
	color: var(--f-fg);
}

.field--literature {
	--f-bg: var(--surface);
	--f-fg: var(--navy);
	--f-fg-2: var(--ink-2);
	--f-line: var(--line);
	--f-shape: var(--navy);
	--f-shape-2: var(--navy);
	--f-cut: var(--mauve);
	background: var(--f-bg);
	color: var(--f-fg);
	box-shadow: inset 0 0 0 var(--bw-strong) var(--navy);
}

/* 문학 면의 2px 테는 inset 그림자라 도형(z-index -1 · 트리 앞)이 그 위에 칠해져 테를 끊는다 → 도형 위에 테를 한 번 더 */
.face.field--literature::after,
.ftile.field--literature::after,
.poster.field--literature::after,
.dhead.field--literature::after,
.hcard__plate.field--literature::after,
.hall-cover.field--literature::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 var(--bw-strong) var(--navy);
	pointer-events: none;
}

.poster.field--literature .mark--poster {
	top: -0.75rem;
}

@media (max-width: 599.98px) {
	.ftile.field--literature .mark--tile {
		top: -2rem;
		right: -3.25rem;
	}
}

/* 큰 도형 (SVG 부품 이름은 fragments/marks.html) */
.mark .mk-fill {
	fill: var(--f-shape, var(--navy));
}

.mark .mk-line {
	fill: none;
	stroke: var(--f-shape-2, var(--navy));
	stroke-width: 3;
}

.mark--poster .mk-line {
	stroke-width: 2;
}

.mark .mk-line--thin {
	stroke-width: 1.25;
}

.mark .mk-dash {
	stroke-dasharray: 6 6;
}

.mark .mk-ink {
	fill: var(--f-cut, var(--navy));
}

.mark .mk-cut {
	fill: var(--f-cut, var(--paper));
}

.mark .mk-accent {
	fill: var(--mauve);
}

.field--art .mark .mk-accent {
	fill: var(--paper);
}

.mark .mk-staff path {
	stroke: var(--f-fg-2, var(--ink-2));
	stroke-width: 1;
	opacity: 0.5;
}

.field--music .mark .mk-line {
	stroke: var(--navy);
}

/* 빈 상태 세 도형 */
.mark--empty {
	width: 6rem;
	height: 2rem;
}

.mark--empty .mk-music,
.mark--empty .mk-literature {
	fill: var(--navy);
}

.mark--empty .mk-art {
	fill: var(--mauve);
}

/* 분야 표시 (도형 + 분야명) */
.ftag {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	color: var(--ink);
	font-weight: 700;
	white-space: nowrap;
}

.ftag .glyph {
	width: 0.625rem;
	height: 0.625rem;
}

/* 새 공모: 조용한 글자 표시(점 + 글자). 한꺼번에 정리한 날에는 많이 붙으므로 칩처럼 튀지 않게 */
.new-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	color: var(--ink);
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.new-mark::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	background: var(--mauve-deep);
	border-radius: 50%;
}

/* 7. D-day · 조건 배지 ------------------------------------------------------- */
/* D-day 칩: 급할수록 진하게. urgent(D-7 이내) 네이비 채움 · soon(D-21 이내) 모브 채움 · open 테 · upcoming 점선 · closed 흐림 */
.dchip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 3.25rem;
	height: 1.625rem;
	padding: 0 0.4375rem;
	border: 1.5px solid var(--navy);
	color: var(--navy);
	font-family: var(--font-num);
	font-size: var(--fs-meta);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

.dchip--urgent {
	background: var(--navy);
	color: var(--paper);
}

.dchip--soon {
	background: var(--mauve);
	border-color: var(--mauve);
}

.dchip--upcoming {
	border-style: dashed;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	letter-spacing: -0.01em;
}

.dchip--closed {
	background: var(--sunk);
	border-color: var(--line-2);
	color: var(--ink-3);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
}

.band .dchip--open,
.field--music .dchip--open,
.band .dchip--upcoming,
.field--music .dchip--upcoming {
	border-color: var(--paper);
	color: var(--paper);
}

.band .dchip--urgent,
.field--music .dchip--urgent {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--navy);
}

/* 조건 배지: 상자 없이 기호 + 글자 (상세 핵심 정보 .dcond 와 같은 모양). 뜻은 기호가 나눈다(+ ! × •).
   행에서 상자는 D-day 칩 하나뿐이라 칩의 색 단계가 다른 뜻과 섞이지 않는다 */
.conds {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-4);
}

.cond {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--fs-meta);
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
	letter-spacing: var(--ls-small);
}

.cond__sym {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.875rem;
	font-family: var(--font-num);
	font-weight: 800;
	flex: none;
}

.cond--positive .cond__sym::before {
	content: "+";
}

.cond--caution .cond__sym::before {
	content: "!";
}

.cond--restrictive .cond__sym::before {
	content: "×";
}

.cond--neutral {
	color: var(--ink-2);
}

.cond--neutral .cond__sym::before {
	content: "•";
}

.field--music .cond,
.band .cond {
	color: var(--paper);
}

/* 톤 기호 (상세 조건표 값 앞) */
.tone__sym {
	display: inline-block;
	width: 1rem;
	font-family: var(--font-num);
	font-weight: 800;
}

.tone--positive .tone__sym::before { content: "+"; }
.tone--caution .tone__sym::before { content: "!"; }
.tone--restrictive .tone__sym::before { content: "×"; }
.tone--neutral .tone__sym,
.tone--none .tone__sym { display: none; }

/* 8. 목록 행 · 포스터 · 작은 행 ------------------------------------------------ */
/* 목록 행: 행 전체가 링크(제목 링크를 늘림). 저장 버튼만 위에 따로 눌린다.
   한 줄기로 읽는다(F 자), 읽는 순서 = DOM 순서: 마감 → 제목(가장 크게) → 사실 줄(금액 · 대상 · 지역, 짙게) → 분야 · 유형 · 주최(조용히) → 조건.
   글자 단계(폰 → 넓은 목록): 제목 17 → 19/700 · 사실 15 → 16/500(금액 700) · 날짜 15/500 · 메타 14/400 보조 · 조건 14/500
   폰          [D-day · 날짜 ……… 저장] / 제목 / 사실 / 메타 / 조건 (사이 8 · 4 · 6 · 8)
   넓은 목록    [D-day / 날짜 | 제목 / 사실 / 메타 / 조건 (글줄 42 → 48rem) | 저장] — 칩은 제목 첫 줄 가운데, 날짜는 사실 줄과 한 줄 */
.rows {
	border-top: var(--bw) solid var(--navy);
	isolation: isolate;
	container: rows / inline-size;
}

.orow {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.75rem;
	grid-template-areas:
		"when save"
		"title title"
		"facts facts"
		"meta meta"
		"conds conds";
	column-gap: var(--s-3);
	padding: 0.875rem 0 var(--s-4);
	border-bottom: var(--bw) solid var(--line);
}

.orow::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--s-3) * -1);
	z-index: -1;
	background: var(--surface);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.orow:hover::before {
		opacity: 1;
	}
}

/* 마감: 칩(남은 날) + 날짜 한 번 ("D-3  10월 14일(수) 마감"). 날짜는 짙게 — 칩 옆에서 흐려 보이지 않게 */
.orow__when {
	grid-area: when;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1) 0.625rem;
	align-self: center;
	color: var(--ink);
	font-size: var(--fs-fact);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--ls-small);
}

.orow__when .dchip {
	min-width: 4.25rem; /* D-DAY · D-1 · D-112 · 접수 예정이 같은 폭: 옆 날짜가 한 세로줄에 선다 */
	height: 1.75rem;
}

/* 접수 예정 · 마감됨(한글 칩)도 옆 날짜와 같은 무게로 */
.orow__when .dchip--upcoming,
.orow__when .dchip--closed {
	font-size: var(--fs-meta);
}

.orow__title {
	grid-area: title;
	margin-top: var(--s-2);
	font-size: var(--fs-row);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-row);
	text-wrap: pretty;
}

.orow__link {
	text-decoration: none;
}

/* 이미 열어 본 공모는 제목을 한 단계 흐리게 — 긴 목록에서 어디까지 봤는지 알 수 있게 */
.orow__link:visited {
	color: var(--ink-2);
}

.orow__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.orow__link:focus-visible {
	outline: none;
}

.orow__link:focus-visible::after {
	outline: 2px solid var(--focus);
	outline-offset: 0;
}

/* 사실 줄: 제목 바로 아래 한 줄, 짙은 글자. 굵은 닻은 하나 — 금액 700, 참가비 있음 600, 나머지 500 */
.orow__facts {
	grid-area: facts;
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--s-1);
	color: var(--ink);
	font-size: var(--fs-fact);
	font-weight: 500;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-small);
}

.orow__amount {
	font-weight: 700;
}

.orow__fee--paid {
	font-weight: 600;
}

/* "지역 전국": 말이 없는 값에만 붙는 조용한 이름 (상세 핵심 정보의 지역 키와 같은 모양) */
.orow__key {
	color: var(--ink-2);
	font-weight: 400;
}

/* 메타: 무엇인지 · 누가 하는지. 한 단계 작은 보조 글자. 넓은 목록은 한 줄(주최 말줄임), 폰은 주최가 다음 줄로 내려가 다 보인다 */
.orow__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-top: var(--s-1h);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 400;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-small);
	white-space: nowrap;
}

.orow__meta > * {
	flex: none;
}

.orow__meta > .orow__org {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.orow__meta .ftag,
.mrow__meta .ftag {
	color: var(--ink);
	font-weight: 600;
}

/* 분야 홈은 분야를, 유형 랜딩은 분야 · 유형을 머리가 이미 말한다 */
.category-page .orow__meta > .ftag,
.landing-page .orow__meta > .ftag,
.landing-page .orow__meta > .orow__type {
	display: none;
}

/* 조건: 지원할 수 있는지 가르는 말이라 짙게(--ink 500, 기호 800). '• 정보'만 보조 글자 (.cond--neutral) */
.orow > .conds {
	grid-area: conds;
	margin-top: var(--s-2);
	gap: var(--s-1) 0.875rem;
}

.orow > .conds .cond {
	line-height: var(--lh-title);
}

/* 기호를 왼쪽에 붙여 조건 줄이 제목 · 사실 · 메타와 같은 왼쪽 끝에 선다 */
.orow > .conds .cond__sym {
	width: 0.625rem;
	justify-content: flex-start;
}

/* 사실 · 메타 · 작은 행 메타의 구분선: 항목 왼쪽 끝 1px(배경)이고 항목을 1px 왼쪽으로 겹친다.
   줄 첫 항목의 구분선은 목록 상자 바깥(왼쪽 1px)에 놓여 overflow 로 잘린다 — 줄이 바뀌어도 줄 머리에 '|'가 남지 않는다 */
.orow__meta,
.orow__facts,
.mrow__meta {
	overflow: hidden;
	margin-left: -0.5rem;
}

.orow__meta > *,
.orow__facts > li,
.mrow__meta > * {
	margin-left: -1px;
	padding: 0 0.5rem 0 0.5625rem;
	background: linear-gradient(var(--line-2), var(--line-2)) no-repeat left center / 1px 0.6875rem;
}

/* 사실 줄은 글자가 커서(15–16px) 구분선도 조금 길게 */
.orow__facts > li {
	background-size: 1px 0.75rem;
}

/* 폰: 첫 항목 구분선(상자 왼쪽 1px 바깥)이 소수 배율에서 번져 들어오지 않게 왼쪽 3px 을 더 자른다 (글자는 9px 안쪽) */
@media (max-width: 767.98px) {
	.orow__meta,
	.orow__facts,
	.mrow__meta {
		clip-path: inset(0 0 0 0.1875rem);
	}

	/* 폰: 긴 주최는 자르지 않고 다음 줄로 (줄 머리 구분선은 위 overflow 로 잘린다) */
	.orow__meta {
		flex-wrap: wrap;
		white-space: normal;
	}

	.orow__meta > .orow__org {
		overflow: visible;
		text-overflow: clip;
	}
}

.orow__save {
	grid-area: save;
	position: relative;
	z-index: 1;
	align-self: center;
	justify-self: end;
	margin: -0.5rem -0.625rem -0.5rem 0;
}

.orow--closed .orow__title,
.orow--closed .orow__when,
.orow--closed .orow__meta,
.orow--closed .orow__facts,
.orow--closed .orow__key,
.orow--closed > .conds .cond,
.orow--closed .ftag,
.mrow--closed .ftag {
	color: var(--ink-3);
}

/* 마감된 행은 굵기도 한 단계 내린다 (색만으로 가리지 않게) */
.orow--closed .orow__title {
	font-weight: 600;
}

.orow--closed .orow__amount,
.orow--closed .orow__fee--paid {
	font-weight: 500;
}

/* 넓은 목록(목록 폭 46rem~, 뷰포트가 아니라 컨테이너 기준): 왼쪽 마감 칸 + 한 글줄.
   줄 격자: 제목 줄 26 · 사실 줄 22 · 메타 · 조건 줄 20. 칩(30)은 제목 첫 줄 가운데에, 날짜 줄(22)은 사실 줄과 같은 높이에 선다.
   간격은 제목 4 → 사실 6 → 메타 6 → 조건: 제목과 사실이 한 묶음 */
@container rows (min-width: 46rem) {
	.orow {
		grid-template-columns: 8rem minmax(0, 1fr) 2.75rem;
		grid-template-areas:
			"when title save"
			"when facts save"
			"when meta save"
			"when conds save";
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--s-5);
		padding: var(--s-4) 0;
	}

	.orow::before {
		inset: 0 calc(var(--s-4) * -1);
	}

	.orow__when {
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
		gap: var(--s-0);
		line-height: var(--row-line-fact);
	}

	/* 칩 30px 를 26px 제목 줄 가운데에(위로 2px). 칩 아래 2px 에서 날짜 줄 → 날짜가 사실 줄(제목 줄 26 + 4)과 같은 높이 */
	.orow__when .dchip {
		min-width: 4.25rem;
		height: 1.875rem;
		margin-top: calc((var(--row-line) - 1.875rem) / 2);
		font-size: var(--fs-chip-wide);
	}

	.orow__when .dchip--upcoming,
	.orow__when .dchip--closed {
		font-size: var(--fs-meta);
	}

	.orow__title,
	.orow__facts,
	.orow__meta,
	.orow > .conds {
		max-width: var(--w-text);
	}

	.orow__title {
		margin-top: 0;
		font-size: var(--fs-row-wide);
		line-height: var(--row-line);
	}

	.orow__facts {
		margin-top: var(--s-1);
		font-size: var(--fs-fact-wide);
		line-height: var(--row-line-fact);
	}

	.orow__meta {
		margin-top: var(--s-1h);
		line-height: var(--row-line-meta);
	}

	/* 조건이 남는 행 높이로 늘어나지 않게 */
	.orow > .conds {
		align-self: start;
		align-content: flex-start;
		align-items: flex-start;
		margin-top: var(--s-1h);
	}

	.orow > .conds .cond {
		line-height: var(--row-line-meta);
	}

	.orow__save {
		align-self: start;
		margin-top: calc((var(--row-line) - 2.75rem) / 2);
	}
}

/* 1200px 목록(홈 · 분야 홈 · 시리즈 · 비슷한 공모): 글줄을 넓혀 오른쪽 빈 띠를 줄인다 */
@container rows (min-width: 62rem) {
	.orow__title,
	.orow__facts,
	.orow__meta,
	.orow > .conds {
		max-width: var(--w-row-wide);
	}
}

/* 저장 버튼 (JS · 저장소가 있어야 보인다) */
.save-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	transition: transform var(--dur) var(--ease);
}

.save-btn__icon {
	width: 1.375rem;
	height: 1.375rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
	transition: fill var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.save-btn:hover .save-btn__icon {
		fill: var(--mauve);
	}
}

.save-btn[aria-pressed="true"] .save-btn__icon {
	fill: currentColor;
}

.save-btn.save-btn--lg {
	width: auto;
	height: auto;
	gap: var(--s-2);
	padding: 0 var(--s-5);
}

.save-btn--lg .save-btn__icon {
	width: 1.125rem;
	height: 1.125rem;
}

.save-btn--lg[aria-pressed="true"] {
	background: var(--navy);
	color: var(--paper);
}

html:not(.js) .save-btn,
html.no-storage .save-btn {
	display: none !important;
}

/* 포스터 카드 (홈 '주목할 기회'): 모바일은 옆으로 넘기고 768px~ 세 단 */
.posters {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16.5rem, 84%);
	gap: var(--s-3);
	margin-inline: calc(var(--gutter) * -1);
	padding: 0 var(--gutter) var(--s-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.posters::-webkit-scrollbar {
	display: none;
}

.posters > li {
	display: flex;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.posters {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-4);
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 1024px) {
	.posters {
		gap: var(--s-5);
	}
}

.poster {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
}

.poster__visual {
	position: relative;
	height: 9rem;
	overflow: hidden;
}

.poster__art .mark--poster {
	position: absolute;
	top: -1.5rem;
	right: -1.5rem;
	width: 10.5rem;
	height: 10.5rem;
}

/* 크롭 D-숫자: 3px 선 위에 서고, 글자 아랫부분은 선에서 잘린다 */
.crop {
	font-family: var(--font-num);
	font-weight: 800;
	font-stretch: 75%;
	font-variation-settings: "wdth" 75;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.poster__big {
	position: absolute;
	left: var(--s-5);
	right: var(--s-5);
	bottom: 0;
	display: flex;
	align-items: flex-end;
	height: 4rem;
	overflow: hidden;
	border-bottom: 3px solid currentColor;
	font-size: 5rem;
	line-height: 0.78;
}

.poster__big.is-long {
	font-size: 4.25rem;
}

.crop__d {
	align-self: flex-start;
	margin: 0.3em 0.2em 0 0;
	font-size: 0.32em;
	line-height: 1;
}

.crop__n {
	transform: translateY(0.12em);
}

.poster__big--text {
	height: auto;
	padding-bottom: var(--s-2);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 900;
	line-height: 1.2;
}

.poster__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--s-4) var(--s-5) var(--s-5);
}

.poster__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	color: var(--f-fg-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.poster__sep {
	opacity: 0.6;
}

.poster__title {
	margin-top: var(--sp-meta);
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-title);
}

.poster__link {
	text-decoration: none;
}

.poster__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.poster__link:focus-visible {
	outline: none;
}

.poster__link:focus-visible::after {
	outline: 3px solid var(--focus);
	outline-offset: -3px;
}

.poster__headline {
	margin-top: var(--s-2);
	color: var(--f-fg-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
}

.poster__facts {
	margin-top: auto;
	padding-top: var(--s-4);
}

.poster__fact {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: var(--s-3);
	padding: var(--s-2) 0;
	border-top: var(--bw) solid var(--f-line);
	font-size: var(--fs-body-sm);
	line-height: 1.45;
	letter-spacing: var(--ls-small);
}

.poster__fact dt {
	color: var(--f-fg-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	align-self: baseline;
}

.poster__amount {
	font-weight: 700;
}

.poster__save {
	position: absolute;
	top: var(--s-2);
	left: var(--s-2);
	z-index: 2;
}

.poster--closed .poster__visual {
	opacity: 0.55;
}

/* 작은 행 */
.mrows {
	border-top: var(--bw) solid var(--line-2);
}

.mrow {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-3);
	align-items: start;
	padding: var(--s-3) 0;
	border-bottom: var(--bw) solid var(--line);
}

.mrow .dchip {
	margin-top: -0.125rem;
}

.mrow__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: -0.01em;
}

.mrow__link {
	text-decoration: none;
}

.mrow__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mrow__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: var(--s-1);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.45;
	letter-spacing: var(--ls-small);
	font-variant-numeric: tabular-nums;
}

.mrow__amount {
	color: var(--ink);
	font-weight: 700;
}

.mrow--closed .mrow__title,
.mrow--closed .mrow__amount {
	color: var(--ink-3);
}

.mrow--closed .mrow__amount {
	font-weight: 500;
}

/* 9. 섹션 머리 · 페이지 머리 · 분야 머리 · 공용 부품 ------------------------------ */
.shead {
	margin-bottom: var(--sp-shead);
}

/* 내용 없이 머리만 있는 섹션(기다리는 시리즈)은 아래 구멍을 남기지 않는다 */
.shead:last-child {
	margin-bottom: 0;
}

.shead__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
}

.shead__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 900;
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
}

.shead__more {
	flex: none;
	margin-right: -0.25rem;
}

.shead__desc {
	margin-top: var(--s-2);
	max-width: var(--w-note);
	color: var(--ink-2);
	font-size: var(--fs-desc);
	line-height: var(--lh-note);
	letter-spacing: var(--ls-read);
}

.band .shead__desc {
	color: var(--on-navy-2);
}


.page-head {
	padding-block: var(--sp-page-top) var(--s-6);
}

.page-head__title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

/* H1 위 작은 글자 (마감 달력: H1 은 '2026년 11월 마감 공모전') */
.page-head__kicker {
	margin-bottom: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.page-head__lede {
	margin-top: var(--s-3);
	max-width: var(--w-read);
	color: var(--ink-2);
	font-size: var(--fs-body);
	line-height: 1.65;
}

@media (min-width: 1024px) {
	.page-head {
		padding-bottom: var(--s-7);
	}
}

/* 분야 머리 (분야 홈 · 유형 랜딩): 분야 면 + 큰 도형이 오른쪽에서 잘린다 */
.face {
	position: relative;
	margin-top: var(--s-4);
	padding: var(--s-6) var(--s-5) var(--s-5);
	overflow: hidden;
	isolation: isolate;
}

.face .mark--tile {
	position: absolute;
	top: -3.25rem;
	right: -4.25rem;
	z-index: -1;
	width: 10rem;
	height: 10rem;
}

@media (max-width: 767.98px) {
	.face__kicker {
		padding-right: 4.5rem;
	}
}

.face__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	color: var(--f-fg-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.face__kicker a {
	text-decoration: none;
}

.face__title {
	margin-top: var(--s-3);
	max-width: 36rem;
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

.face__title--xl {
	font-size: clamp(3.25rem, 15vw, 6rem);
	line-height: 1;
}

.face__sub {
	display: block;
	margin-top: var(--s-2);
	font-size: 0.5em;
	letter-spacing: -0.02em;
}

.face__title--xl .face__sub {
	font-size: 0.3em;
}

.face__lede {
	margin-top: var(--s-3);
	max-width: var(--w-read);
	color: var(--f-fg-2);
	font-size: var(--fs-body);
	line-height: 1.65;
}

.face__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-2) var(--s-5);
	margin-top: var(--s-5);
	padding-top: var(--s-4);
	border-top: var(--bw) solid var(--f-line);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.face__stat b {
	margin-right: 0.125rem;
	font-family: var(--font-num);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.face__stat span {
	color: var(--f-fg-2);
}

.face__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-5);
}

.field--music .face__actions .btn--primary {
	background: var(--mauve);
	border-color: var(--mauve);
	color: var(--navy);
}

@media (hover: hover) and (pointer: fine) {
	.field--music .face__actions .btn--primary:hover {
		background: var(--paper);
		border-color: var(--paper);
	}
}

.field--music .btn--ghost {
	color: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
	.field--music .btn--ghost:hover {
		background: var(--navy-2);
	}
}

@media (hover: hover) and (pointer: fine) {
	.field--art .btn--ghost:hover {
		background: var(--mauve-deep);
	}
}

@media (min-width: 768px) {
	.face {
		padding: var(--s-7) var(--s-7) var(--s-6);
	}

	.face .mark--tile {
		top: -3rem;
		right: -3rem;
		width: 20rem;
		height: 20rem;
	}
}

@media (min-width: 1024px) {
	.face .mark--tile {
		right: 1rem;
		top: -4rem;
		width: 25rem;
		height: 25rem;
	}
}

/* 글줄(제목 · 소개 · 숫자 줄 · 시리즈 사실)은 오른쪽 도형 앞에서 끝난다: 폭에서 도형 자리를 뺀다
   (~767: 10rem 도형이 모서리에 걸린 높이까지 제목이 올라오니 키커처럼 오른쪽 여백,
    768~: 20rem 도형이 오른쪽 -3rem → 13.5rem, 1024~: 25rem 도형이 오른쪽 1rem → 24rem, 음악 오선까지 비킨다) */
@media (max-width: 767.98px) {
	.face__title {
		padding-right: 3rem;
	}
}

@media (min-width: 768px) {
	.face__title,
	.face__lede,
	.face__stats,
	.series-head__facts {
		max-width: min(var(--w-read), calc(100% - 13.5rem));
	}

	.face.field--literature .mark--tile {
		top: -1.5rem;
	}
}

@media (min-width: 1024px) {
	.face__title,
	.face__lede,
	.face__stats,
	.series-head__facts {
		max-width: min(var(--w-read), calc(100% - 24rem));
	}

	.face.field--literature .mark--tile {
		top: -2.5rem;
	}
}

/* 문학 머리의 세로선은 쓰지 않는다 (상세 머리와 같다): 막대 ≡ 만으로 문학이 읽힌다 */
.face.field--literature .mark--tile .mk-line {
	display: none;
}

/* 유형 칩 (분야 안 유형 링크 + 건수) */
.type-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

/* 문학 유형 랜딩: 장르 허브 칩 줄을 유형 칩 줄 위에 (같은 칩 · 줄 사이만 띄운다) */
.type-chips--genres {
	margin-bottom: var(--s-3);
}

.type-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 2.75rem;
	padding: 0 0.375rem 0 var(--s-4);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), transform var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.type-chip:hover {
		border-color: var(--navy);
	}
}

.type-chip__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding: 0 0.375rem;
	background: var(--sunk);
	font-family: var(--font-num);
	font-size: var(--fs-meta);
	font-weight: 700;
	letter-spacing: 0;
}

.type-chips__quiet {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	margin-top: var(--s-4);
	color: var(--ink-3);
	font-size: var(--fs-meta);
}

.type-chips__quiet-label {
	color: var(--ink-2);
	font-weight: 700;
}

.type-chips__quiet-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-3);
}

.type-chips__quiet-list a {
	color: var(--ink-2);
}

/* 빈 상태 */
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-7) var(--s-4);
	text-align: center;
	border-top: var(--bw) solid var(--line);
	border-bottom: var(--bw) solid var(--line);
}

.empty .mark--empty {
	margin-bottom: var(--s-2);
}

.empty__message {
	font-size: var(--fs-lead);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.empty__hint {
	max-width: 28rem;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
}

.empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
	margin-top: var(--s-2);
}

/* 페이지 나누기 */
.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	margin-top: var(--s-6);
}

.pager__pages {
	display: flex;
	gap: var(--s-1);
}

.pager a,
.pager__step,
.pager__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 var(--s-2);
	font-family: var(--font-num);
	font-size: var(--fs-body-sm);
	font-weight: 700;
	letter-spacing: 0;
	text-decoration: none;
}

.pager .pager__step {
	flex: none;
	font-family: var(--font-sans);
	white-space: nowrap;
	padding-inline: var(--s-3);
}

/* 좁은 화면: 쪽 번호가 들어갈 자리를 위해 이전·다음은 화살표만 보이고 글자는 화면 낭독기에만 남긴다 */
@media (max-width: 479.98px) {
	.pager {
		gap: 0;
	}

	.pager .pager__step {
		padding-inline: 0;
	}

	.pager__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pager a,
	.pager__gap {
		min-width: 2.5rem;
	}

	/* 쪽 칸이 넷 이하일 때만 글자 · 44px ('…'가 있으면 칸은 늘 다섯 이상). :has 를 모르면 위 기본 */
	.pager:not(:has(.pager__pages > li:nth-child(5))) .pager__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.pager:not(:has(.pager__pages > li:nth-child(5))) a {
		min-width: 2.75rem;
	}
}

.pager svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

@media (hover: hover) and (pointer: fine) {
	.pager a:hover {
		background: var(--sunk);
	}
}

.pager a[aria-current="page"] {
	background: var(--navy);
	color: var(--paper);
}

/* 갈 곳 없는 이전 · 다음: 흐린 글자(2.3:1) 대신 자리만 지킨다 (쪽 번호가 가운데에 남게, aria-hidden) */
.pager__step--disabled {
	visibility: hidden;
}

/* 키-값 표 (dl) */
.kv__row {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: var(--s-3);
	padding: var(--s-3) 0;
	border-bottom: var(--bw) solid var(--line);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
	align-items: baseline;
}

.kv__row:first-child {
	border-top: var(--bw) solid var(--line);
}

.kv__label {
	color: var(--ink-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	line-height: var(--label-lh);
	letter-spacing: var(--ls-small);
}

.kv__value {
	min-width: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-data);
}

.band .kv__row {
	border-color: rgba(238, 238, 232, 0.2);
}

.band .kv__label {
	color: var(--on-navy-2);
}

@media (min-width: 768px) {
	.kv__row {
		grid-template-columns: 8.5rem minmax(0, 1fr);
		gap: var(--s-5);
	}
}

.bullets {
	display: grid;
	gap: var(--gap-item);
	padding: 0;
	list-style: none;
}

.bullets > li {
	position: relative;
	padding-left: 1rem;
}

.bullets > li::before {
	content: "";
	position: absolute;
	left: 0.125rem;
	top: 0.72em;
	width: 0.3125rem;
	height: 0.3125rem;
	background: currentColor;
	opacity: 0.5;
}

/* 알림 · 안내 상자 */
.notice {
	padding: var(--s-4) var(--s-5);
	background: var(--surface);
	border-left: 3px solid var(--navy);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
}

.notice__title {
	margin-bottom: var(--s-1);
	font-weight: 700;
}

.notice--caution {
	background: var(--mauve-soft);
}

/* 분야 타일 (홈 · 소개) */
.ftiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-2);
}

.ftile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 7.5rem;
	padding: var(--s-3);
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
}

.ftile .mark--tile {
	position: absolute;
	top: -2.5rem;
	right: -2.5rem;
	z-index: -1;
	width: 7.5rem;
	height: 7.5rem;
	transition: transform var(--dur-mark) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.ftile:hover .mark--tile {
		transform: rotate(var(--mark-turn)) scale(calc(1 + (var(--hover-scale) - 1) * 3));
	}
}

.ftile:focus-visible {
	outline-color: var(--navy);
	outline-offset: 3px;
}

.ftile__name {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.ftile__count {
	display: flex;
	align-items: baseline;
	gap: 0.125rem;
	margin-top: var(--s-1);
	color: var(--f-fg-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.ftile__num {
	color: var(--f-fg);
	font-family: var(--font-num);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0;
}

.ftile__kw {
	display: none;
}

@media (min-width: 768px) {
	.ftiles {
		gap: var(--s-4);
	}

	.ftile {
		min-height: 11rem;
		padding: var(--s-5);
	}

	.ftile .mark--tile {
		top: -2.5rem;
		right: -2.5rem;
		width: 8rem;
		height: 8rem;
	}

	.ftile__name {
		font-size: 2rem;
	}

	.ftile__count {
		font-size: var(--fs-meta);
	}

	.ftile__num {
		font-size: 1.5rem;
	}

	.ftile__kw {
		display: block;
		margin-top: var(--s-3);
		padding-top: var(--s-3);
		border-top: var(--bw) solid var(--f-line);
		color: var(--f-fg-2);
		font-size: var(--fs-sm);
		line-height: 1.5;
	}
}

@media (min-width: 1024px) {
	.ftile {
		min-height: 13rem;
	}

	.ftile .mark--tile {
		top: -3rem;
		right: -3rem;
		width: 10.5rem;
		height: 10.5rem;
	}
}

@media (min-width: 1200px) {
	.ftile .mark--tile {
		width: 12rem;
		height: 12rem;
	}
}

/* 10. 홈 ------------------------------------------------------------------- */
/* 마감 티커: 네이비 띠. 움직임을 줄이면 흐르지 않고 옆으로 넘긴다 */
.ticker {
	display: flex;
	align-items: stretch;
	height: 2.5rem;
	background: var(--navy);
	color: var(--paper);
	font-size: var(--fs-meta);
}

.ticker__label {
	display: flex;
	align-items: center;
	flex: none;
	padding: 0 var(--s-3) 0 var(--gutter);
	color: var(--mauve);
	font-weight: 700;
	white-space: nowrap;
}

.ticker__viewport {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}

.ticker__track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: ticker 80s linear infinite;
}

.ticker:focus-within .ticker__track,
.ticker.is-paused .ticker__track {
	animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
	.ticker:hover .ticker__track {
		animation-play-state: paused;
	}
}

.ticker__list {
	display: flex;
	align-items: center;
	flex: none;
}

.ticker__item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: 2.5rem;
	padding: 0 var(--s-5);
	color: var(--paper);
	text-decoration: none;
	white-space: nowrap;
}

.ticker__d {
	color: var(--mauve);
	font-family: var(--font-num);
	font-weight: 700;
	letter-spacing: 0;
}

.ticker__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	background: transparent;
	border: 0;
	border-left: var(--bw) solid rgba(238, 238, 232, 0.2);
	color: var(--paper);
}

.ticker__toggle svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: currentColor;
}

.ticker__play,
.ticker.is-paused .ticker__pause {
	display: none;
}

.ticker.is-paused .ticker__play {
	display: block;
}

@keyframes ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* 히어로: [워드마크 / 검색 / 지금 숫자 · 나한테 맞는 공고 찾기 / 분야 타일] — 설명 문장 없이 바로 찾기 */
.hero {
	padding-top: var(--s-6);
}

.hero__grid {
	display: grid;
	gap: var(--s-5);
}

.hero__mark {
	font-family: var(--font-mark);
	font-size: clamp(3.25rem, 15vw, 6rem);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.hero__controls {
	display: grid;
	gap: var(--s-4);
}

.searchbar--hero .searchbar__input {
	height: 3.5rem;
}

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-5);
	font-size: var(--fs-meta);
}

.hero__stats a {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.hero__stats > li:not(.hero__stat-cta) a:hover .hero__stat-label {
		text-decoration: underline;
	}
}

.hero__stat-label {
	color: var(--ink-2);
}

.hero__stat-num {
	margin-left: 0.375rem;
	font-family: var(--font-num);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0;
}

.hero__stat-unit {
	margin-left: 0.0625rem;
	font-weight: 600;
}

.hero__stat-cta {
	flex-basis: 100%;
}

/* 좁은 화면: 검색창과 같은 폭 · 600px~: 수 옆 오른쪽 끝 */
.hero__stat-cta .btn {
	width: 100%;
	min-height: 3rem;
	padding-inline: var(--s-5);
}

@media (min-width: 600px) {
	.hero__stat-cta {
		flex-basis: auto;
		margin-left: auto;
	}

	.hero__stat-cta .btn {
		width: auto;
	}
}

@media (min-width: 1024px) {
	.hero {
		padding-top: var(--s-7);
	}

	.hero__grid {
		row-gap: var(--s-6);
	}

	.hero__mark {
		font-size: clamp(7.5rem, 12vw, 10.5rem);
	}

	/* 검색창 한 줄, 그 아래 수 · 나한테 맞는 공고 찾기 한 줄 (옆에 세로로 쌓으면 검색창 위아래로 튀어나왔다) */
	.hero__controls {
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
		row-gap: var(--s-4);
	}

	.searchbar--hero .searchbar__input {
		height: 4rem;
		padding-left: 3.25rem;
		font-size: var(--fs-lead);
	}

	.searchbar--hero .searchbar__icon {
		left: var(--s-5);
	}

	.searchbar--hero .searchbar__submit {
		min-width: 6.5rem;
		font-size: var(--fs-body);
	}

	/* 검색창 아래 한 줄: 왼쪽 접수 중 수, 오른쪽 끝 '나한테 맞는 공고 찾기' (검색 버튼과 오른쪽 끝을 맞춘다) */
	.hero__stats {
		flex-direction: row;
		align-items: center;
		gap: var(--s-2) var(--s-6);
		font-size: var(--fs-body-sm);
	}

	.hero__stat-cta {
		margin-left: auto;
	}

}

/* 관심 분야 (JS) */
.prefs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-top: var(--s-5);
	padding: var(--s-4) var(--s-5);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
}

.prefs__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	font-size: var(--fs-body-sm);
}

.prefs__label {
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

.prefs__actions {
	display: flex;
	gap: var(--s-2);
}

/* 이번 주 마감 달력 띠: 오늘부터 8칸. 마감 있는 날은 네이비 */
.week {
	display: grid;
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}

.week__tally {
	display: flex;
	align-items: baseline;
	gap: var(--s-1);
}

.week__total {
	font-family: var(--font-num);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.week__unit {
	font-weight: 700;
	font-size: var(--fs-lead);
}

.week__range {
	margin-left: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
}

.week__days {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	border-top: var(--bw) solid var(--line);
	border-bottom: var(--bw) solid var(--line);
}

.week__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	padding: var(--s-2) 0;
	text-align: center;
}

/* 마감이 있는 날은 칸 전체가 링크 (그날 마감 달력으로) */
.week__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.week__link:hover .week__note {
		text-decoration: underline;
	}
}

.week__day + .week__day {
	border-left: var(--bw) solid var(--line);
}

.week__dow {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.week__date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-family: var(--font-num);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
}

.week__day.is-hit .week__date {
	color: var(--paper);
}

.week__day.is-today:not(.is-hit) .week__date {
	box-shadow: inset 0 0 0 1.5px var(--navy);
}

.week__note {
	min-height: 1.125rem;
	color: var(--ink-3);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	letter-spacing: var(--ls-small);
}

.week__day.is-hit .week__note {
	color: var(--ink);
	font-weight: 700;
}

@media (min-width: 768px) {
	.week {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--s-6);
	}

	.week__tally {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-1);
	}

	.week__range {
		margin-left: 0;
	}

	.week__total {
		font-size: 2.75rem;
	}

	.week__date {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.25rem;
	}

	.week__dow,
	.week__note {
		font-size: var(--fs-meta);
	}

	.week__day {
		padding: var(--s-3) 0;
	}
}

/* 조건으로 바로 찾기 */
.quick-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-2);
}

.quick-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	height: 100%;
	min-height: 3.5rem;
	padding: var(--s-3) var(--s-4);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), transform var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.quick-link:hover {
		border-color: var(--navy);
	}
}

.quick-link__label {
	font-size: var(--fs-body-sm);
	font-weight: 700;
	line-height: 1.35;
}

.quick-link__count {
	flex: none;
	font-family: var(--font-num);
	font-size: var(--fs-lead);
	font-weight: 800;
	letter-spacing: 0;
}

.quick-link__unit {
	margin-left: var(--s-0);
	font-family: var(--font-sans);
	font-size: max(var(--fs-sm), 0.55em);
	font-weight: 700;
}

/* 좁은 화면: 라벨 한 줄, 건수는 그 아래 (옆에 두면 라벨 칸이 좁아 '상금 1,000만 / 원 이상'처럼 갈렸다) */
@media (max-width: 767.98px) {
	.quick-link {
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--s-1);
	}
}

@media (min-width: 768px) {
	.quick-links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-3);
	}

	.quick-link {
		min-height: 4.5rem;
		padding-inline: var(--s-5);
	}
}

@media (min-width: 1024px) {
	.quick-links {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.quick-link {
		flex-direction: column;
		align-items: flex-start;
		min-height: 7rem;
		padding: var(--s-4) var(--s-5);
	}

	.quick-link__count {
		font-size: 1.75rem;
	}
}

/* 11. 공모 찾기 (검색 · 필터) --------------------------------------------------- */
.search-head {
	padding-bottom: var(--s-5);
}

.search-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-2);
}

.filterbar {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-3);
}

.filterbar__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex: none;
	height: 2.5rem;
	padding: 0 var(--s-3);
	background: var(--surface);
	border: var(--bw) solid var(--navy);
	font-size: var(--fs-meta);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.filterbar__toggle::-webkit-details-marker {
	display: none;
}

.filterbar__toggle.is-active {
	background: var(--navy);
	color: var(--paper);
}

.filterbar__toggle.is-active .count {
	background: var(--mauve);
	color: var(--navy);
}

.filterbar__icon {
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.qchips {
	display: flex;
	gap: var(--s-2);
	flex: 1;
	min-width: 0;
	margin-right: calc(var(--gutter) * -1);
	padding-right: var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.qchips::-webkit-scrollbar {
	display: none;
}

/* 오른쪽 끝을 흐려 옆으로 더 있다는 걸 알린다 */
.qchips {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
}

.qchip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 2.5rem;
	padding: 0 var(--s-3);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.qchip:hover {
		border-color: var(--navy);
	}
}

.qchip[aria-current] {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--paper);
}

.qchip .glyph {
	width: 0.625rem;
	height: 0.625rem;
}

/* 필터 묶음: 세 단계 — 패널 제목 20/800 → 묶음 이름 16/800 → 고르는 칩 15/500(고르면 600) → 도움말 14/400 */
.fgroup {
	padding: 1.25rem 0;
	border-bottom: var(--bw) solid var(--line);
}

.fgroup__legend {
	display: block;
	float: left;
	width: 100%;
	margin-bottom: var(--s-3);
	font-size: 1rem;
	font-weight: 800;
	line-height: var(--lh-title);
	letter-spacing: -0.01em;
}

.filter-panel .toggle,
.qchip {
	font-weight: 500;
	letter-spacing: var(--ls-small);
}

.filter-panel .toggle {
	font-size: var(--fs-body-sm);
}

.qchip[aria-current] {
	font-weight: 600;
}

.filter-panel .toggle:has(:checked) {
	font-weight: 600;
}

.fgroup .hint {
	margin-top: 0.625rem;
	font-size: var(--fs-meta);
	line-height: 1.55;
}

/* legend 뒤 모두: 분야를 고르면 앞 유형 묶음이 숨어 바로 뒤가 아니어도 띄움을 끊는다 */
.fgroup__legend ~ * {
	clear: both;
}

/* 유형 아코디언: 줄 사이에만 선 (첫 줄 위 · 끝줄 아래는 묶음 이름 · 묶음 선이 맡는다 — 선이 두 겹이 되지 않게) */
.search-types__group + .search-types__group {
	border-top: var(--bw) solid var(--line);
}

.search-types:has(> .search-types__group) {
	padding-bottom: var(--s-1);
}

.search-types__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.75rem;
	cursor: pointer;
	list-style: none;
	font-size: var(--fs-body-sm);
	letter-spacing: var(--ls-small);
}

.search-types__summary .ftag {
	font-weight: 600;
}

.search-types__summary::-webkit-details-marker {
	display: none;
}

.search-types__summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.25rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.125rem);
	transition: transform var(--dur) var(--ease);
}

.search-types__group[open] > .search-types__summary::after {
	transform: rotate(-135deg) translateY(-0.125rem);
}

.search-types__n {
	margin-left: auto;
	margin-right: var(--s-3);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-small);
}

.search-types__choices {
	padding-bottom: var(--s-4);
}

.toggle--sm,
.filter-panel .toggle--sm {
	min-height: 2.25rem;
	font-size: var(--fs-meta);
}

/* 조건 더 보기: 덜 쓰는 여섯 묶음을 접는다. 이름은 묶음 이름과 같은 단계, 아래 한 줄은 안에 든 것 · 적용 수 */
.fmore {
	border-bottom: var(--bw) solid var(--line);
}

.fmore__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--s-3);
	padding: var(--s-4) 0;
	cursor: pointer;
	list-style: none;
}

.fmore__summary::-webkit-details-marker {
	display: none;
}

.fmore__summary::after {
	content: "";
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.25rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.125rem);
	transition: transform var(--dur) var(--ease);
}

.fmore[open] > .fmore__summary::after {
	transform: rotate(-135deg) translateY(-0.125rem);
}

.fmore__label {
	font-size: 1rem;
	font-weight: 800;
	line-height: var(--lh-title);
	letter-spacing: -0.01em;
}

.fmore__meta {
	grid-column: 1;
	margin-top: var(--s-0);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.45;
	letter-spacing: var(--ls-small);
}

.fmore[open] > .fmore__summary {
	border-bottom: var(--bw) solid var(--line);
}

.fmore > .fgroup:last-child {
	border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
	.fmore__summary:hover .fmore__label {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

.fmore__summary:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* 나이: 만 [ ] 세 [적용] */
.search-age {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.search-age__input {
	width: 6rem;
	height: 2.75rem;
	padding: 0 var(--s-3);
	background: var(--surface);
	border: var(--bw) solid var(--line-input);
	border-radius: 0;
	font-family: var(--font-num);
	font-size: var(--fs-lead);
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.search-age__input::-webkit-outer-spin-button,
.search-age__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.search-age__input::placeholder {
	color: var(--ink-3);
	font-family: var(--font-sans);
	font-size: var(--fs-meta);
	font-weight: 500;
}

.search-age__input:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: inset 0 0 0 1px var(--navy);
}

.search-age__unit {
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	font-weight: 500;
}

.search-age__apply {
	height: 2.75rem;
	margin-left: var(--s-2);
	padding: 0 var(--s-4);
	background: transparent;
	border: var(--bw) solid var(--navy);
	font-size: var(--fs-meta);
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.search-age__apply:hover {
		background: var(--navy);
		color: var(--paper);
	}
}

.filter-panel__top,
.filter-panel__close {
	display: none;
}

.filter-panel__actions {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-2);
	padding-top: var(--s-4);
}

/* 초기화가 없으면 결과 보기가 줄 전체 */
.filter-panel__actions > :only-child {
	grid-column: 1 / -1;
}

/* 1024px 미만: 필터는 화면 아래에서 올라오는 시트. 뒤 배경(summary::before)을 누르면 닫힌다 */
@media (max-width: 1023.98px) {
	html:has(.filter-panel[open]) {
		overflow: hidden;
	}

	/* 시트가 열리면 붙는 필터 줄(z 30)이 헤더(z 60)보다 위로 올라와야 뒤 배경이 헤더까지 덮는다 */
	.search-side:has(.filter-panel[open]) {
		z-index: 150;
	}

	.filter-panel[open] > .filterbar__toggle::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(15, 28, 38, 0.5);
		cursor: default;
	}

	.filter-panel[open] > .filter-panel__body {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		max-height: min(88vh, 48rem);
		max-height: min(88dvh, 48rem);
		padding: 0 var(--gutter);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--paper);
		color: var(--ink);
		box-shadow: var(--shadow-sheet);
		animation: sheet-in 240ms var(--ease);
	}

	.filter-panel__top {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 3.5rem;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		background: var(--paper);
		border-bottom: var(--bw) solid var(--line);
	}

	.filter-panel__title {
		font-size: 1.25rem;
		font-weight: 800;
		line-height: var(--lh-title);
		letter-spacing: var(--ls-title);
	}

	.filter-panel__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-right: -0.625rem;
		background: transparent;
		border: 0;
	}

	.filter-panel__close svg {
		width: 1.375rem;
		height: 1.375rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
	}

	/* 시트의 칩은 움직이는 손가락으로도: 44px (유형 칩 38px + 보이지 않는 누름 자리, §19) */
	.filter-panel .toggle {
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	.filter-panel .toggle--sm {
		min-height: 2.375rem;
	}

	.filter-panel__actions {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin-inline: calc(var(--gutter) * -1);
		padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
		background: var(--paper);
		border-top: var(--bw) solid var(--line);
	}
}

@keyframes sheet-in {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

/* 결과 머리: 수 · 정렬 */
.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2) var(--s-4);
	padding: var(--s-4) 0 var(--s-3);
}

.toolbar__count {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	font-family: var(--font-sans);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.toolbar__label {
	margin-right: 0.25rem;
	color: var(--ink-2);
}

.toolbar__num {
	font-family: var(--font-num);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
}

.toolbar__page {
	margin-left: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 500;
	letter-spacing: var(--ls-small);
}

/* 폰: 쪽 표시는 화면에서 빼고 화면 낭독기에만 남긴다 (결과 제목이 몇 쪽인지 말한다) — 수 · 정렬이 한 줄에 */
@media (max-width: 599.98px) {
	.toolbar__page {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* 373~410px: Pretendard 로는 수 · 정렬이 한 줄에 들어간다. 수는 한 줄로 두고, 넘치면(글자 크기를 키운 사용자 · 앱 textZoom)
   정렬 칸 안에서만 줄을 바꾼다 — 숨긴 가로 스크롤로 '금액순'이 화면 밖에 숨지 않게 */
@media (min-width: 373px) and (max-width: 409.98px) {
	.toolbar {
		flex-wrap: nowrap;
	}

	.toolbar__count {
		flex: none;
		white-space: nowrap;
	}

	.sort {
		min-width: 0;
	}

	.sort__list {
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: var(--s-1);
	}
}

.sort__list {
	display: flex;
	align-items: center;
}

.sort__list > li + li::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.75rem;
	background: var(--line-2);
	vertical-align: middle;
}

/* 고르지 않은 정렬도 고를 수 있는 말이라 흐리게(ink-3) 두지 않는다 — 고른 것은 굵기 · 네모로 */
.sort__link {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: 0 var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	font-weight: 500;
	letter-spacing: var(--ls-small);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.sort__link:hover {
		color: var(--ink);
	}
}

.sort__link[aria-current] {
	color: var(--ink);
	font-weight: 700;
}

/* 고른 정렬의 ■ (span — 페이지를 건너 미끄러질 수 있게, 17-b) */
.sort__mark {
	width: 0.375rem;
	height: 0.375rem;
	margin-right: 0.375rem;
	background: var(--navy);
}

.sort__list > li:last-child .sort__link {
	padding-right: 0;
}

/* 좁은 화면: 정렬 줄이 목록 머리 왼쪽 선과 맞게 */
@media (max-width: 1023.98px) {
	.sort__list > li:first-child .sort__link {
		padding-left: 0;
	}
}

/* 선택한 조건 칩 */
.applied {
	margin-bottom: var(--s-4);
}

.applied__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}

/* 적용 조건 칩: 고른 토글 · 빠른 칩과 같은 네이비 채움 ('켜짐'은 한 모양) — × 로 하나씩 뺀다 */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.25rem;
	padding: 0.25rem var(--s-2) 0.25rem var(--s-3);
	background: var(--navy);
	color: var(--paper);
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--ls-small);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.chip:hover {
		background: var(--navy-2);
	}
}

.chip__x {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	flex: none;
}

.applied__clear {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

@media (min-width: 1024px) {
	.search-layout {
		grid-template-columns: 18rem minmax(0, 1fr);
		column-gap: var(--s-7);
		align-items: start;
	}

	/* 필터 곁은 페이지와 함께 흐른다: 붙은 상자 속 스크롤 · 흐림 끝이 조건 절반을 가렸다.
	   무엇을 골랐는지는 결과 머리의 적용 칩이 늘 말한다 */
	.search-side {
		padding-bottom: var(--s-7);
	}

	.filterbar {
		display: block;
		margin-top: var(--s-2);
	}

	html.js .filterbar__toggle,
	.qchips {
		display: none;
	}

	.filterbar__toggle {
		margin-bottom: var(--s-3);
	}

	.filter-panel__actions {
		padding-top: var(--s-4);
	}

	html.js .search-form:not([data-pending]) .filter-panel__apply {
		display: none;
	}

	html.js .search-form:not([data-pending]) .filter-panel__actions {
		grid-template-columns: auto;
	}

	.toolbar {
		padding-top: 0;
	}

	.search-results > .rows:first-child,
	.toolbar + .rows {
		margin-top: 0;
	}
}

/* 12. 공모 상세 ------------------------------------------------------------- */
/* 1024px~ [머리 · 바로가기 · 본문 | 핵심 정보(붙는 곁)] */
.detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-top: var(--s-4);
}

@media (min-width: 1024px) {
	.detail {
		grid-template-columns: minmax(0, 1fr) 22rem;
		grid-template-areas:
			"closed closed"
			"head sheet"
			"jump sheet"
			"body sheet";
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--s-7);
		align-items: start;
	}

	.detail-closed { grid-area: closed; }
	.dhead { grid-area: head; }
	.djump { grid-area: jump; }
	.dbody { grid-area: body; }

	.dsheet { grid-area: sheet; }
}

@media (min-width: 1200px) {
	.detail {
		grid-template-columns: minmax(0, 1fr) 24rem;
		column-gap: var(--s-8);
	}
}

/* 마감된 공고 안내 */
.detail-closed {
	display: grid;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
	padding: var(--s-5);
	background: var(--sunk);
	border-left: 4px solid var(--navy);
}

.detail-closed__title {
	font-size: var(--fs-h3);
	font-weight: 800;
}

.detail-closed__text {
	margin-top: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
}

.detail-closed__next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-3);
	font-size: var(--fs-body-sm);
}

.detail-closed__next-label {
	font-weight: 700;
}

@media (min-width: 768px) {
	.detail-closed {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding: var(--s-5) var(--s-6);
	}
}

/* 머리: 분야 면 명판. [주최 ……… 잘린 도형] / 공모명.
   도형은 명판 위 · 오른쪽 끝에서 잘리고, 주최 줄이 도형이 보이는 높이만큼 자리를 잡아 제목은 늘 도형 아래에서 시작한다.
   D-숫자는 핵심 정보 맨 위(.dwhen), 원문 확인일은 공식 공고 버튼 아래(.dsheet__trust)에 있다. */
.dhead {
	--dh-pad-x: 1.25rem;
	--dh-pad-t: 1.25rem;
	--dh-pad-b: 1.5rem;
	--dh-mark: 6.5rem;          /* 도형 상자 한 변 */
	--dh-mark-top: -2.5rem;     /* 보이는 높이 = mark + top = 4rem */
	--dh-mark-right: -1.5rem;   /* 보이는 폭 = mark + right = 5rem */
	position: relative;
	padding: var(--dh-pad-t) var(--dh-pad-x) var(--dh-pad-b);
	overflow: hidden;
	isolation: isolate;
}

.dhead__art {
	position: absolute;
	top: var(--dh-mark-top);
	right: var(--dh-mark-right);
	z-index: -1;
	width: var(--dh-mark);
	height: var(--dh-mark);
}

.dhead__art .mark--poster {
	width: 100%;
	height: 100%;
}

/* 문학 도형의 세로선은 머리에서 쓰지 않는다 (제목 쪽으로 내려가는 선이었다) */
.dhead .mark--literature .mk-line {
	display: none;
}

/* 마감: 채운 도형 = 접수 중, 빈 선 = 끝남 (흐리게 하지 않는다) */
.dhead.is-closed .mark :is(.mk-fill, .mk-accent, .mk-cut, .mk-ink) {
	fill: none;
	stroke: var(--f-fg-2);
	stroke-width: 3;
}

.dhead.is-closed .mark .mk-line {
	stroke: var(--f-fg-2);
}

/* 문학: 강조 막대(도형 y 84/200)가 2px 테 바로 아래에 붙는다 — 테와 막대 사이에 가는 틈이 남지 않게 (폭마다 --dh-mark 에서 계산) */
.dhead.field--literature {
	--dh-mark-top: calc(var(--dh-mark) * -0.42 + var(--bw-strong));
}

/* 미술: 잘린 칸을 종이 색이 아니라 명판 색으로 — 명판이 물린 구멍이 아니라 네이비 사각의 홈으로 읽히게.
   변수로 바꿔 마감 상태의 빈 선 규칙(.dhead.is-closed … fill: none)이 그대로 이긴다 */
.dhead.field--art {
	--f-cut: var(--f-bg);
}

.dhead.is-closed .mark .mk-staff {
	display: none;
}

.dhead__org {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;      /* 한 줄이면 자리의 아래 끝, 제목 바로 위 */
	gap: 0.25rem 0.5rem;
	min-height: calc(var(--dh-mark) + var(--dh-mark-top) - var(--dh-pad-t));
	padding-right: calc(var(--dh-mark) + var(--dh-mark-right) + 0.75rem);
	color: var(--f-fg-2);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
}

.dhead__title {
	margin-top: 0.625rem;
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.dhead__title.is-long {
	font-size: 1.375rem;
	line-height: 1.35;
}

@media (min-width: 768px) {
	.dhead {
		--dh-pad-x: 2rem;
		--dh-pad-t: 1.75rem;
		--dh-pad-b: 2rem;
		--dh-mark: 9rem;
		--dh-mark-top: -3.5rem;
		--dh-mark-right: -2rem;
	}

	.dhead__org {
		font-size: var(--fs-body);
	}

	.dhead__title {
		margin-top: 0.75rem;
		font-size: 2rem;
		line-height: 1.25;
	}

	.dhead__title.is-long {
		font-size: 1.75rem;
		line-height: 1.3;
	}
}

@media (min-width: 1200px) {
	.dhead {
		--dh-pad-x: 2.5rem;
		--dh-pad-t: 2rem;
		--dh-pad-b: 2.25rem;
		--dh-mark: 10.5rem;
		--dh-mark-top: -4rem;
		--dh-mark-right: -2rem;
	}

	.dhead__title {
		font-size: 2.25rem;
	}

	.dhead__title.is-long {
		font-size: 1.875rem;
	}
}

/* 핵심 정보 — 묶음 다섯: 언제 │ 금액 · 사실 │ 지원 대상 │ 중요 조건(+원문에 없는 항목) │ 공식 공고 · 저장 · 캘린더 · 원문 확인.
   묶음 사이는 빈칸만. 선은 D-숫자 아래 3px 하나뿐, 상자는 두지 않는다 */
.dsheet {
	display: grid;
	gap: var(--sp-group);
	max-width: var(--w-read);
	margin-top: var(--s-5);
}

/* 600~1023px: D-숫자 아래 3px 선은 위 명판과 같은 폭까지, 글 · 버튼 묶음은 --w-read 에서 끊는다 (단 끝이 둘로 갈리지 않게) */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.dsheet {
		max-width: none;
	}

	.dsheet > :not(.dwhen),
	.dwhen > :not(.dwhen__band) {
		max-width: var(--w-read);
	}
}

/* 언제: [크롭 D-숫자 · 날짜 말]이 3px 선 위에 선다. 선은 띠 전체 폭 — 상태가 바뀌어도 같은 자리 */
.dwhen {
	--dw-h: 3rem;               /* 크롭 상자 높이 */
}

.dwhen__band {
	display: flex;
	align-items: flex-end;
	gap: var(--s-4);
	min-height: var(--dw-h);    /* 날짜 말이 두 줄이 되면(320px) 띠가 늘고 숫자는 선 위에 그대로 */
	border-bottom: 3px solid var(--navy);
}

.dwhen__big {
	display: flex;
	flex: none;
	align-items: flex-end;
	height: var(--dw-h);
	overflow: hidden;
	color: var(--navy);
	font-size: 4rem;
	line-height: 0.78;
}

.dwhen__big.is-long {
	font-size: 3.5rem;
}

/* 날짜가 없는 상태(접수 예정 · 접수 중 · 마감됨)는 말로: 포스터의 .poster__big--text 와 같은 문법 */
.dwhen__big--text {
	height: auto;
	padding-bottom: 0.5rem;
	overflow: visible;
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.dwhen__date {
	min-width: 0;
	padding-bottom: 0.4375rem;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.35;
}

.dwhen--upcoming .dwhen__band {
	border-bottom-style: dashed;
}

.dwhen--closed .dwhen__band {
	border-bottom-color: var(--line-2);
}

.dwhen--closed .dwhen__big,
.dwhen--closed .dwhen__date {
	color: var(--ink-2);
}

.dwhen__end,
.dwhen__note {
	margin-top: 0.5rem;
}

.dwhen__end + .dwhen__note {
	margin-top: 0.125rem;
}

.dwhen__end {
	font-size: var(--fs-body-sm);
	font-weight: 700;
	line-height: 1.55;
}

.dwhen__note {
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: 1.55;
	letter-spacing: 0;
}

/* 마감 기준을 싣지 못하고 링크만 남을 때 띠와 떨어뜨린다 (첫 문장만 싣는 자르기는 서버가 문장 끝에서 한다 — 말줄임 없음) */
.dwhen__band + .dmore {
	margin-top: 0.5rem;
}

/* 금액 · 사실: 값이 스스로 무엇인지 말하므로("참가비 20만 원") 라벨을 두지 않는다 — 목록 행 사실 줄과 같은 문법 */
.dsum__money {
	font-size: var(--fs-lead);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* 구분선은 항목 왼쪽 1px 배경 (.orow__facts 와 같은 방법: 줄이 바뀌어도 줄 머리에 선이 남지 않는다) */
.dsum__facts {
	display: flex;
	flex-wrap: wrap;
	margin: 0.25rem 0 0 -0.5rem;
	overflow: hidden;
	font-size: var(--fs-body-sm);
	line-height: 1.6;
	letter-spacing: 0;
}

.dsum__facts:first-child {
	margin-top: 0;
}

.dsum__facts > li {
	margin-left: -1px;
	padding: 0 0.5rem 0 0.5625rem;
	background: linear-gradient(var(--line-2), var(--line-2)) no-repeat left center / 1px 0.75rem;
}

.dsum__facts .is-strong {
	font-weight: 700;
}

/* 값만으로 무엇인지 알 수 없는 사실("전국")에 붙는 조용한 키 */
.dsum__key {
	color: var(--ink-2);
}

/* 지원 대상: 자격 항목은 서버가 통째로만 싣는다. 첫 항목 하나가 길 때만 두 줄(1024px~ 세 줄)에서 자른다(.is-long) */
.dtarget dt {
	color: var(--ink-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	line-height: var(--label-lh);
	letter-spacing: var(--ls-small);
}

.dtarget dd {
	margin-top: var(--sp-stack);
	font-size: var(--fs-body);
	line-height: var(--lh-data);
	letter-spacing: var(--ls-read);
}


/* 지원 대상 글이 잘리지 않아도 링크는 늘 다음 줄에서 시작한다 (글 끝에 "…팀지원 자격 모두 보기"로 붙지 않게) */
.dtarget dd .dmore {
	display: block;
	width: fit-content;
	margin-top: var(--sp-meta);
}

.dmore {
	display: inline-block;
	margin-top: 0.125rem;
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

/* 중요 조건: 칩 대신 기호 + 글자. 뜻은 기호가 나눈다 (+ 열림 · ! 확인 · × 제한 · • 정보).
   모든 폭에서 한 줄에 하나 — 기호가 한 세로줄에 서는 확인 목록 (이어 쓰면 조건 하나만 다음 줄에 홀로 남았다) */
.dconds {
	display: grid;
	gap: var(--sp-meta);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: var(--lh-row);
	letter-spacing: var(--ls-read);
}

.dcond {
	display: grid;
	grid-template-columns: 0.875rem minmax(0, 1fr);
	column-gap: 0.375rem;
	align-items: baseline;
}

.dcond__sym {
	font-family: var(--font-num);
	font-weight: 800;
	text-align: center;
}

.dcond--positive .dcond__sym::before { content: "+"; }
.dcond--caution .dcond__sym::before { content: "!"; }
.dcond--restrictive .dcond__sym::before { content: "×"; }
.dcond--neutral .dcond__sym::before { content: "•"; }

.dsheet__missing {
	margin-top: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.5;
	letter-spacing: 0;
}

.dsheet__missing:first-child {
	margin-top: 0;
}

.dsheet__missing-label {
	font-weight: 600;
}

/* 할 일: [공식 공고 보기 ……… │ 저장] / 캘린더 ……… 공유 / 원문 확인 */
.dsheet__do {
	display: grid;
	gap: 0.75rem;
}

/* flex: JS 가 없어 저장이 숨으면 공식 공고 보기가 줄을 다 쓴다 (빈 칸이 남지 않게) */
.dsheet__actions {
	display: flex;
	gap: var(--s-2);
}

.dsheet__actions .btn {
	min-height: 3.25rem;
}

.dsheet__source {
	flex: 1 1 auto;
}

.dsheet__actions .save-btn--lg {
	flex: none;
	padding-inline: var(--s-5);
}

.dsheet__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem var(--s-4);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.5;
	letter-spacing: 0;
}

.dsheet__calendar-links {
	white-space: nowrap;
}

.dsheet__calendar-links a,
.dsheet__share {
	display: inline-block;
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.dsheet__calendar-sep {
	margin-inline: 0.375rem;
	color: var(--ink-2);
}

.dsheet__share {
	margin-left: auto;          /* 캘린더 줄이 없는 공고(마감 · 상시)에서도 늘 오른쪽 끝 */
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	letter-spacing: inherit;
	cursor: pointer;
}

.dsheet__trust {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-note);
	letter-spacing: 0;
}

.dsheet__trust--caution {
	color: var(--ink);
	font-weight: 600;
}

.dsheet__trust--caution::before {
	content: "! ";
	font-family: var(--font-num);
	font-weight: 800;
}

.dsheet__trust-date {
	display: block;
	color: var(--ink-2);
	font-weight: 400;
}

@media (min-width: 1024px) {
	.dsheet {
		max-width: none;
		margin-top: 0; /* 크롭 숫자 띠 위쪽이 명판 위쪽에 맞는다 */
	}

	/* 붙는 곁은 1024×760 창에 버튼 · 캘린더 줄까지 들어와야 한다: 지원 대상 · 중요 조건은 넓은 화면에서 15px 에 머문다 */
	.dtarget dd,
	.dconds {
		font-size: var(--fs-body-sm);
		letter-spacing: var(--ls-small);
	}

	.dconds {
		gap: var(--s-1);
	}

	.dwhen {
		--dw-h: 4rem;
	}

	.dwhen__big {
		font-size: 5rem;
	}

	.dwhen__big.is-long {
		font-size: 4.25rem;
	}

	.dwhen__big--text {
		font-size: 1.75rem;
	}

}

/* 붙는 곁은 곁 전체가 화면에 들어올 때만 (키가 낮은 창에서 버튼이 잘리지 않게) */
@media (min-width: 1024px) and (min-height: 760px) {
	.dsheet {
		position: sticky;
		top: calc(var(--header-h) + var(--s-5));
	}
}

/* 바로가기: 아래 선 하나 */
.djump {
	margin: var(--s-6) calc(var(--gutter) * -1) 0;
	border-bottom: var(--bw) solid var(--line);
	overflow-x: auto;
	scrollbar-width: none;
}

.djump::-webkit-scrollbar {
	display: none;
}

.djump__list {
	display: flex;
	width: max-content;
	padding-inline: calc(var(--gutter) - var(--s-3));
}

.djump__list a {
	position: relative;
	display: flex;
	align-items: center;
	height: 2.75rem;
	padding: 0 var(--s-3);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.djump__list a:not([aria-current]):hover {
		color: var(--ink);
	}

	.djump__list a:not([aria-current]):hover::after {
		transform: none;
	}
}

@media (min-width: 1024px) {
	.djump {
		margin: var(--s-6) 0 0;
	}

	.djump__list {
		padding: 0;
	}

	.djump__list li:first-child a {
		padding-left: 0;
	}
}

/* 본문 섹션 */
.dbody {
	min-width: 0;
}

/* 글은 --w-read 에서 끊고, 선·면(조건표 · 꼭 확인할 점)은 단 끝(명판 끝)까지 */
.dsec__headline,
.dsec__text,
.dsec__bullets,
.dmissing,
.timeline,
.dsource {
	max-width: var(--w-read);
	margin-top: var(--sp-block);
}

/* 섹션 제목 → 첫 내용은 제목의 --sp-head 하나만 (뒤 블록의 24px 가 이겨 내용마다 벌어지던 것) */
.dsec > .dsec__title + * {
	margin-top: 0;
}

/* 요지 → 요약 글은 한 묶음 */
.dsec__headline + .dsec__text {
	margin-top: 0;
}

.dsec {
	padding-top: var(--sp-sub);
}

.dsec__title {
	margin-bottom: var(--sp-head);
	font-size: var(--fs-sec);
	font-weight: 800;
	line-height: var(--lh-title-lg);
	letter-spacing: var(--ls-title);
}

/* 요약 첫 줄(원문 요지): 장식 선 없이 한 단계 큰 굵은 글 */
.dsec__headline {
	margin-bottom: var(--s-2);
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.dsec__text {
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	letter-spacing: var(--ls-read);
}

/* 목록 (지원 자격 · 제출 · 선정 후 의무 · 꼭 확인할 점) */
.dsec__bullets,
.dnotes {
	gap: var(--sp-item);
	font-size: var(--fs-body);
	line-height: var(--lh-data);
}

.dsec__bullets {
	margin-bottom: var(--sp-block);
}

.dsec__bullets:last-child {
	margin-bottom: 0;
}

.dsec__bullets > li,
.dnotes > li {
	padding-left: 1.125rem;
}

/* 네모 기호는 첫 줄 가운데: 행간 1.65 의 절반 − 네모 반(2.5px) */
.dsec__bullets > li::before,
.dnotes > li::before {
	left: 0.1875rem;
	top: calc(0.825em - 0.15625rem);
}

/* 꼭 확인할 점: 본문에서 하나뿐인 면. 항목마다 붙던 검은 '!' 네모는 뺀다.
   글은 면 끝까지 (글만 --w-read 에서 끊으면 면 오른쪽 150px 가 빈 채로 남는다) */
.dnotes {
	padding: 1rem 1.25rem;
	background: var(--mauve-soft);
}

.dnotes > li::before {
	background: var(--navy);
	opacity: 1;
}

/* 600px 미만: 면을 화면 끝까지 넓혀 기호 · 글이 지원 자격 · 제출 목록과 같은 왼쪽 선에 선다 (글 폭 292 → 332px) */
@media (max-width: 599.98px) {
	.dnotes {
		margin-inline: calc(var(--gutter) * -1);
		padding: 1rem var(--gutter);
	}
}

/* 조건표: 모바일은 라벨 위 · 값 아래로 쌓는다 (값 칸 234px → 350px). 600px~ 두 칸 */
.ctable__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.125rem;
	padding: 0.875rem 0;
	border-bottom: var(--bw) solid var(--line);
}

.ctable__row:first-child {
	border-top: var(--bw) solid var(--line);
}

.ctable__label {
	color: var(--ink-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	line-height: var(--label-lh);
	letter-spacing: var(--ls-small);
}

.ctable__value {
	min-width: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-data);
}

.ctable__note {
	display: block;
	margin-top: 0.25rem;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: 1.55;
	letter-spacing: 0;
	max-width: var(--w-note);
}

.ctable__row.is-amount .ctable__value {
	font-weight: 700;
}

@media (min-width: 600px) {
	.ctable__row {
		grid-template-columns: 8rem minmax(0, 1fr);
		align-items: baseline;
		gap: 1.25rem;
	}
}

@media (min-width: 768px) {
	.ctable__row {
		grid-template-columns: 9rem minmax(0, 1fr);
		gap: 1.5rem;
	}

	.dnotes {
		padding: 1.25rem 1.5rem;
	}
}

/* 원문에 없는 항목: 칩 없이 글 한 줄 */
.dmissing {
	margin-top: 0.875rem;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.5;
	letter-spacing: 0;
}

.dmissing__label {
	font-weight: 700;
}

/* 일정 타임라인 */
.timeline {
	display: grid;
}

.timeline__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem var(--s-3);
	padding: 0 0 1.5rem 1.75rem;
}

.timeline__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3125rem;
	width: 0.75rem;
	height: 0.75rem;
	background: var(--paper);
	border: 2px solid var(--line-2);
}

.timeline__item::after {
	content: "";
	position: absolute;
	left: 0.34375rem;
	top: 1.3125rem;
	bottom: 0.125rem;
	width: 1px;
	background: var(--line-2);
}

.timeline__item:last-child {
	padding-bottom: 0;
}

.timeline__item:last-child::after {
	display: none;
}

.timeline__item.is-done::before {
	background: var(--navy);
	border-color: var(--navy);
}

.timeline__item.is-next::before {
	background: var(--mauve);
	border-color: var(--navy);
}

.timeline__label {
	flex-basis: 100%;
	color: var(--ink-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	line-height: var(--label-lh);
	letter-spacing: var(--ls-small);
}

.timeline__value {
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.45;
}

/* 날짜가 아니라 문장인 값("2026년 10월 중 협회 홈페이지 게시"): 날짜처럼 굵고 크게 쓰지 않는다 */
.timeline__value--text {
	font-size: var(--fs-body-sm);
	font-weight: 600;
	line-height: 1.55;
}

/* "기재 없음"은 날짜와 같은 굵기로 쓰지 않는다 */
.timeline__value.dfacts__none {
	font-weight: 400;
}

.timeline__note {
	flex-basis: 100%;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: 1.55;
	letter-spacing: 0;
}

/* 출처: 상자 없이 */
.dsec__stale {
	margin-top: var(--sp-block);
}

.dsource {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
	margin-top: var(--s-5);
}

.dsource__text {
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
	letter-spacing: 0;
	max-width: var(--w-note);
}

/* 태그 */
.dtags {
	padding-top: var(--s-6);
}

.dtags__title {
	margin-bottom: var(--sp-label);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.dtags__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.dtags__tag {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 var(--s-3);
	background: var(--sunk);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	a.dtags__tag:hover {
		background: var(--navy);
		color: var(--paper);
	}
}

/* 이어지는 영역 */
.detail-series__grid {
	display: grid;
	gap: var(--s-6);
}

.detail-series__label {
	margin-bottom: var(--sp-label);
	font-size: var(--fs-body-sm);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.detail-series__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-7);
	}

	/* 다른 회차가 없어 한 칸뿐이면 오른쪽 반을 비워 두지 않고 본문 폭으로 */
	.detail-series__grid > :only-child {
		grid-column: 1 / -1;
		max-width: var(--w-text);
	}

	/* 마지막 섹션(비슷한 공모)이 푸터에 붙지 않게 */
	.detail-page > .section:last-of-type {
		padding-bottom: var(--section);
	}
}

/* 13. 분야 홈 · 유형 랜딩 · 시리즈 ------------------------------------------------ */
.year-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-3);
	margin-top: var(--s-4);
	font-size: var(--fs-meta);
}

.year-nav__label {
	color: var(--ink-2);
	font-weight: var(--label-fw);
	font-size: var(--label-fs);
	line-height: var(--label-lh);
	letter-spacing: var(--ls-small);
}

.year-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.series-cards {
	display: grid;
	gap: var(--s-3);
}

.series-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-meta);
	height: 100%;
	padding: var(--s-4) var(--s-5);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
	transition: border-color var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.series-card:hover {
		border-color: var(--navy);
	}
}

.series-card__org {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.series-card__name {
	font-size: var(--fs-lead);
	font-weight: 800;
	line-height: 1.35;
}

.series-card__link {
	text-decoration: none;
}

.series-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.series-card__schedule {
	margin-top: var(--s-0);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-data);
}

/* 시리즈 이름 끝의 괄호(옛 이름·정식 이름)는 제목 아래 작은 줄로 — 괄호 가운데서 줄이 끊기지 않게 */
.face__aka {
	display: block;
	margin-top: var(--s-2);
	color: var(--f-fg-2, var(--ink-2));
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
}

/* 예년 일정: 회차마다 한 줄 */
.sched {
	display: grid;
	gap: var(--s-1);
}

.sched li {
	position: relative;
	padding-left: 0.875rem;
}

.sched li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 0.375rem;
	height: 2px;
	background: currentColor;
	opacity: 0.55;
}

.sched li:only-child {
	padding-left: 0;
}

.sched li:only-child::before {
	content: none;
}

.cta-box__text .sched {
	margin-top: var(--s-1);
}

/* 표 값 안의 항목 목록 (처리방침 이용 기록): 앞뒤 문장과 한 줄 간격 */
.ctable__list {
	margin-block: var(--s-1);
}

/* '예년 일정' 라벨: 글 위의 한 줄 (칩으로 두면 둘째 줄이 칩 아래로 감긴다) */
.series-card__label,
.cta-box__label {
	display: block;
	width: fit-content;
	margin: 0 0 var(--s-1);
	color: var(--ink-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	line-height: var(--label-lh);
	letter-spacing: var(--ls-small);
}

.series-card__more {
	margin-top: auto;
	padding-top: var(--s-2);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.series-card__more::after {
	content: " →";
}

@media (min-width: 768px) {
	.series-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.series-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-4);
	}
}

/* 행동 유도 상자 (조건으로 더 찾기 · 다음 모집으로 · 같은 유형) */
.cta-box {
	display: grid;
	gap: var(--s-4);
	padding: var(--s-5);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
}

.cta-box__kicker {
	margin-bottom: var(--sp-meta);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.cta-box__title {
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: var(--ls-title);
}

.cta-box__text {
	margin-top: var(--s-2);
	max-width: var(--w-note);
	color: var(--ink-2);
	font-size: var(--fs-desc);
	line-height: var(--lh-note);
	letter-spacing: var(--ls-read);
}

.cta-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

/* 폰: 글과 버튼 묶음 사이는 블록 간격 */
@media (max-width: 767.98px) {
	.cta-box {
		gap: var(--sp-block);
	}
}

/* 휴대폰: 버튼은 한 줄에 하나씩 같은 너비 (맺음 상자 .doc-closing__actions 와 같다) */
@media (max-width: 599.98px) {
	.cta-box__actions {
		display: grid;
		width: 100%;
	}

	.cta-box__actions .btn {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.cta-box {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--s-6);
		padding: var(--s-6) var(--s-7);
	}
}

/* 시리즈 머리 사실 */
.series-head__facts {
	display: grid;
	gap: var(--s-2);
	margin-top: var(--s-5);
	padding-top: var(--s-4);
	border-top: var(--bw) solid var(--f-line);
	font-size: var(--fs-body-sm);
}

.series-head__fact {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--s-3);
	line-height: 1.55;
}

.series-head__fact dt {
	color: var(--f-fg-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	line-height: var(--label-lh);
	letter-spacing: var(--ls-small);
}

.series-head__fact a {
	font-weight: 700;
}

.series-now__body {
	display: grid;
	gap: var(--s-5);
	align-items: start;
}

.series-now__poster {
	display: flex;
	max-width: 26rem;
}

.series-now__aside {
	display: grid;
	gap: var(--s-4);
	justify-items: start;
}

@media (min-width: 768px) {
	.series-now__body {
		grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
		gap: var(--s-7);
		align-items: end;
	}
}

/* 14. 수상작 ---------------------------------------------------------------- */
/* 카드: 네이비 띠 안에서는 종이 글자, 종이 면에서는 네이비 글자. 카드 전체가 링크 */
.award-list {
	display: grid;
	gap: var(--s-6);
}

@media (min-width: 768px) {
	.award-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-5);
	}
}

.award {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.award__figure {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	height: 6.5rem;
	margin-bottom: var(--s-4);
	overflow: hidden;
	border-bottom: 3px solid var(--mauve);
}

/* 큰 숫자가 무엇을 세는지 ("지원", "응모 약"). 숫자 바로 위에 */
.award__what {
	margin-bottom: 0.375rem;
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0;
}

.award__num {
	display: flex;
	align-items: flex-end;
	gap: 0.25rem;
	line-height: 0.8;
}

.award__num .crop {
	font-size: 5.5rem;
	transform: translateY(0.12em);
}

.award__num.is-long .crop {
	font-size: 4.25rem;
}

.award__unit {
	margin-bottom: 0.5rem;
	font-size: var(--fs-lead);
	font-weight: 700;
}

.award__work-big {
	padding-bottom: var(--s-2);
	font-family: var(--font-display);
	font-size: 2.75rem;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.04em;
	white-space: nowrap;
}

.award__work-big.is-long {
	font-size: 2rem;
}

.award__work-big.is-wide {
	font-size: 1.75rem;
}

.award__figure .mark--poster {
	width: 7rem;
	height: 7rem;
	margin: 0 0 -1rem -0.5rem;
}

/* 종이 면 카드의 음악 도형: 원은 모브, 고리 · 점은 네이비 (분야 머리와 같은 그림. 네이비 띠에서는 아래 .band 규칙이 이긴다) */
.award__figure .mark--music {
	--f-shape: var(--mauve);
}

.band .award__figure .mark {
	--f-shape: var(--mauve);
	--f-shape-2: var(--paper);
	--f-cut: var(--navy);
	--f-fg-2: var(--on-navy-2);
}

.award__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-small);
}

.band .award .ftag {
	color: var(--paper);
}

.award__video {
	padding: 0 0.375rem;
	border: 1px solid currentColor;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.5;
}

.award__competition {
	margin-top: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.band .award__competition,
.band .award__summary {
	color: var(--on-navy-2);
}

/* 결과는 값이라 보조 글자보다 한 단계 짙게 (14.9:1) */
.band .award__result {
	color: var(--on-navy);
}

.award__title {
	margin-top: var(--sp-meta);
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-title);
}

.award__link {
	text-decoration: none;
}

.award__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.award__result {
	margin-top: var(--sp-meta);
	color: var(--ink);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.award__summary {
	display: -webkit-box;
	margin-top: var(--s-2);
	overflow: hidden;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.6;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	max-width: var(--w-note);
	letter-spacing: var(--ls-small);
}

/* 수상작 목록 머리 (네이비) */
.hall-head {
	padding-bottom: var(--s-6);
	background: var(--navy);
	color: var(--paper);
}

.hall-head .crumbs__list,
.hall-head .crumbs [aria-current] {
	color: var(--on-navy-2);
}

.hall-head__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin-top: var(--sp-page-top);
	color: var(--on-navy-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.hall-head__title {
	margin-top: var(--s-3);
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

.hall-tabs {
	margin-top: var(--s-5);
}

.hall-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.hall-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 2.5rem;
	padding: 0 var(--s-3);
	border: var(--bw) solid rgba(238, 238, 232, 0.4);
	color: var(--paper);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: none;
	letter-spacing: var(--ls-small);
}

@media (hover: hover) and (pointer: fine) {
	.hall-tabs__link:hover {
		border-color: var(--paper);
	}
}

.hall-tabs__link[aria-current] {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--navy);
}

/* 0편 탭: 흐림(opacity) 대신 보조 글자색 (8.8:1). 0편이어도 지금 탭이면 종이 면 위 네이비 그대로 */
.hall-tabs__link.is-empty:not([aria-current]) {
	color: var(--on-navy-2);
}

.hall-tabs__count {
	font-family: var(--font-num);
	font-weight: 700;
}

/* 폰: 줄바꿈으로 탭 하나가 홀로 둘째 줄에 남지 않게 한 줄 고른 칸 (아주 좁으면 2×2) */
@media (max-width: 767.98px) {
	.hall-tabs__list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--s-1);
	}

	.hall-tabs__link {
		justify-content: center;
		gap: 0.25rem;
		width: 100%;
		padding: 0 var(--s-1);
		white-space: nowrap;
	}
}

@media (max-width: 359.98px) {
	.hall-tabs__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 수상작 핵심 그림 칸 (figure): 라벨 위에 값, 값은 3px 선 위에 선다. 크기는 놓인 자리의 --afig 하나로만 */
.afig {
	--afig: 3.25rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.afig__label {
	margin-bottom: 0.375rem;
	color: var(--f-fg-2, var(--ink-2));
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.afig__value {
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	gap: 0.25rem;
	overflow: hidden;
	border-bottom: 3px solid currentColor;
	line-height: 0.8;
}

.afig__value .crop {
	font-size: var(--afig);
	transform: translateY(0.12em);
	transition: transform var(--dur-2) var(--ease-out);
}

.afig.is-long .afig__value .crop {
	font-size: calc(var(--afig) * 0.8);
}

.afig__unit {
	margin-bottom: 0.4em;
	font-size: max(var(--fs-meta), calc(var(--afig) * 0.28));
	font-weight: 800;
	line-height: 1;
}

/* 작품명: 두 줄까지 (5~8자는 is-wide 로 한 단계 작게) */
.afig--work .afig__value {
	display: block;
	padding-bottom: var(--s-2);
	font-family: var(--font-display);
	font-size: calc(var(--afig) * 0.54);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.afig--work.is-wide .afig__value {
	font-size: calc(var(--afig) * 0.44);
}

/* 수상작 첫 이야기 표지 (hallCover): 분야 면 하나 — 페이지에서 하나뿐인 큰 소리.
   왼쪽 글 단 │ 오른쪽 핵심 그림(바닥에 선다) 또는 오른쪽 아래로 잘려 나가는 큰 도형. 휴대폰은 그림 → 글 */
.hall-cover {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "art" "text";
	padding: var(--s-5);
	overflow: hidden;
	isolation: isolate;
}

.hall-cover .ftag {
	color: inherit;
}

.hall-cover__text {
	grid-area: text;
	display: flex;
	flex-direction: column;
}

/* 자리 잡지 않는 칸: 도형은 표지(.hall-cover)를 기준으로 놓인다 */
.hall-cover__art {
	grid-area: art;
}

.hall-cover .mark--tile {
	position: absolute;
	top: -2rem;
	right: -2.5rem;
	z-index: -1;
	width: 7.5rem;
	max-width: none;
	height: 7.5rem;
	transition: transform var(--dur-mark) var(--ease-out);
}

/* 문학 면은 세로선을 그리지 않는다 (분야 머리와 같은 규칙) */
.hall-cover.field--literature .mark--tile .mk-line {
	display: none;
}

.hall-cover .afig {
	--afig: 3.5rem;
	margin-bottom: var(--s-5);
	padding-right: 5rem;
}

.hall-cover .afig--mark {
	display: none;
}

.hall-cover--mark :is(.hall-cover__kicker, .hall-cover__competition) {
	padding-right: 4.5rem;
}

.hall-cover__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	color: var(--f-fg-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.hall-cover__sep {
	opacity: 0.6;
}

.hall-cover__year {
	font-variant-numeric: tabular-nums;
}

.hall-cover__competition {
	margin-top: var(--s-4);
	color: var(--f-fg-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.hall-cover__title {
	margin-top: var(--s-2);
	max-width: 22em;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.hall-cover__link {
	text-decoration: none;
}

.hall-cover__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hall-cover__result {
	margin-top: var(--s-4);
	font-size: var(--fs-body-sm);
	font-weight: 700;
}

.hall-cover__summary {
	display: -webkit-box;
	margin-top: var(--s-2);
	max-width: var(--w-read);
	overflow: hidden;
	color: var(--f-fg-2);
	font-size: var(--fs-body-sm);
	line-height: 1.7;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	text-wrap: pretty;
}

.hall-cover__more {
	margin-top: auto;
	padding-top: var(--s-5);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.hall-cover__more::after,
.hcard__more::after {
	content: "\00a0→";
	display: inline-block;
	transition: transform var(--dur-2) var(--ease-out);
}

@media (min-width: 768px) {
	.hall-cover {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		grid-template-areas: "text art";
		column-gap: var(--s-6);
		min-height: 20rem;
		padding: var(--s-7) var(--s-6) var(--s-6);
	}

	.hall-cover__art {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.hall-cover .afig {
		--afig: 5rem;
		margin-bottom: 0;
		padding-right: 0;
	}

	.hall-cover__title {
		font-size: 1.75rem;
	}

	.hall-cover .mark--tile {
		top: -3rem;
		right: -3rem;
		width: 11rem;
		height: 11rem;
	}

	/* 도형뿐인 이야기: 오른쪽 단을 큰 도형이 채우고 오른쪽으로 잘려 나간다 (표지 높이 가운데에서 조금 아래) */
	.hall-cover--mark .mark--tile {
		top: calc(50% - 10rem);
		right: -3rem;
		width: 22rem;
		height: 22rem;
	}

	.hall-cover--mark :is(.hall-cover__kicker, .hall-cover__competition) {
		padding-right: 0;
	}

	/* 문학 면은 테가 있어 막대가 테에 닿으면 T 자로 부딪쳐 보인다 → 막대는 판 안에서 끝난다 */
	.hall-cover--mark.field--literature .mark--tile {
		right: var(--s-5);
	}
}

@media (min-width: 1024px) {
	.hall-cover {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--s-7);
		min-height: 22rem;
		padding: var(--s-7) var(--s-7) var(--s-6);
	}

	.hall-cover .afig {
		--afig: 6.5rem;
	}

	.hall-cover__title {
		font-size: 2.125rem;
		line-height: 1.25;
	}

	.hall-cover__summary {
		font-size: var(--fs-body);
	}

	.hall-cover .mark--tile {
		top: -4rem;
		right: -3rem;
		width: 13rem;
		height: 13rem;
	}

	.hall-cover--mark .mark--tile {
		top: calc(50% - 12rem);
		right: -3rem;
		width: 26rem;
		height: 26rem;
	}

	.hall-cover--mark.field--literature .mark--tile {
		right: var(--s-6);
	}
}

@media (min-width: 1200px) {
	.hall-cover .afig {
		--afig: 8rem;
	}

	.hall-cover__title {
		font-size: 2.5rem;
	}
}

/* 수상작 목록 카드 (hallCard · hallGrid): 모든 카드가 같은 판(분야 면 + 오른쪽 위에 잘린 도형 + 3px 바닥선 + 핵심 그림)과
   같은 일곱 칸. 768 이상은 subgrid 로 한 줄의 제목 · 요약 · 꼬리가 같은 높이에서 시작한다. 휴대폰은 72px 판 행 */
.hall-grid {
	border-top: var(--bw) solid var(--line-2);
	isolation: isolate;
}

.hall-cover + .hall-grid {
	margin-top: var(--s-6);
}

.hall-grid > li + li {
	border-top: var(--bw) solid var(--line);
}

.hcard {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	column-gap: var(--s-4);
	align-content: start;
	padding-block: var(--s-4);
}

.hcard > * {
	grid-column: 2;
}

.hcard__plate {
	grid-column: 1;
	grid-row: 1 / span 4;
	position: relative;
	width: 4.5rem;
	height: 4.5rem;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--dur-2) var(--ease-out);
}

.hcard__plate .mark--poster {
	position: absolute;
	top: -0.75rem;
	right: -1.25rem;
	width: 5.5rem;
	max-width: none;
	height: 5.5rem;
	transition: transform var(--dur-mark) var(--ease-out);
}

.hcard__plate .afig,
.hcard__summary,
.hcard__more {
	display: none;
}

/* 72px 판에서는 문학 세로선이 테와 겹쳐 두 겹 테로 보인다 */
@media (max-width: 767.98px) {
	.hcard__plate .mark--literature .mk-line {
		display: none;
	}
}

.hcard__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--fs-sm);
	line-height: 1.4;
	letter-spacing: var(--ls-small);
}

.hcard__sep {
	color: var(--ink-3);
}

.hcard__year {
	color: var(--ink-2);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hcard__competition {
	margin-top: var(--s-1);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: var(--lh-meta);
	letter-spacing: var(--ls-small);
}

.hcard__title {
	display: -webkit-box;
	margin-top: var(--sp-meta);
	overflow: hidden;
	font-size: var(--fs-row);
	font-weight: 700;
	line-height: var(--lh-row);
	letter-spacing: var(--ls-row);
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	/* 제목은 쉼표에서 끊기게 balance (pretty 는 따옴표 안 · 구 가운데서 끊는다) */
	text-wrap: balance;
}

.hcard__link {
	text-decoration: none;
}

.hcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hcard__result {
	margin-top: var(--s-1);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: var(--ls-small);
}

@media (min-width: 768px) {
	.hall-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-5);
		row-gap: 0;
		border-top: 0;
	}

	.hall-cover + .hall-grid {
		margin-top: var(--s-7);
	}

	.hall-grid > li + li {
		border-top: 0;
	}

	/* 줄 사이 48px 는 칸 아래 여백으로: 마지막 줄 여백은 격자 바깥 여백(섹션)과 겹치지 않게 지운다 */
	.hall-grid {
		margin-bottom: calc(var(--s-7) * -1);
	}

	.hall-grid > li {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
		padding-bottom: var(--s-7);
	}

	.hcard {
		grid-row: 1 / -1;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
		row-gap: 0;
		padding: 0;
	}

	.hcard > * {
		grid-column: 1;
	}

	.hcard__plate {
		grid-row: 1;
		width: auto;
		height: 8.5rem;
	}

	.hcard__kicker {
		grid-row: 2;
		margin-top: var(--s-4);
	}

	.hcard__competition {
		grid-row: 3;
	}

	.hcard__title {
		grid-row: 4;
		font-size: var(--fs-h3);
		font-weight: 800;
		line-height: var(--lh-title);
		letter-spacing: var(--ls-title);
	}

	.hcard__result {
		grid-row: 5;
		margin-top: var(--s-2);
	}

	.hcard__summary {
		grid-row: 6;
		display: -webkit-box;
		margin-top: var(--s-2);
		overflow: hidden;
		color: var(--ink-2);
		font-size: var(--fs-meta);
		line-height: var(--lh-note);
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		text-wrap: pretty;
		letter-spacing: var(--ls-small);
	}

	.hcard__more {
		grid-row: 7;
		display: block;
		align-self: end;
		margin-top: var(--s-4);
		padding-top: var(--s-3);
		border-top: var(--bw) solid var(--line);
		font-size: var(--fs-meta);
		font-weight: 700;
	}

	.hcard__plate .mark--poster {
		top: -1.5rem;
		right: -1.5rem;
		width: 7rem;
		height: 7rem;
	}

	.hcard__plate .afig {
		display: flex;
		position: absolute;
		left: var(--s-4);
		right: var(--s-4);
		bottom: var(--s-3);
		z-index: 1;
	}

	.hcard__plate .afig--work .afig__value {
		padding-right: 5rem;
	}

	/* 도형뿐인 이야기: 빈 바닥선 대신 큰 도형이 판을 채우고 오른쪽 · 위아래로 잘려 나간다 (표지 hall-cover--mark 와 같은 생각).
	   문학 면은 테가 있어 막대가 테에 닿지 않게 판 안에 둔다 */
	.hcard__plate--mark .afig {
		display: none;
	}

	.hcard__plate--mark .mark--poster {
		top: calc(50% - 7.5rem);
		right: -2.5rem;
		width: 15rem;
		height: 15rem;
	}

	.hcard__plate--mark .mark--literature {
		top: calc(50% - 4.6rem);
		right: var(--s-5);
		width: 10rem;
		height: 10rem;
	}

	.hcard__plate--mark .mark--literature .mk-line {
		display: none;
	}
}

@media (min-width: 1024px) {
	.hall-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* subgrid 가 없는 브라우저: 줄 맞춤은 못 해도 같은 높이 · 꼬리는 바닥에 */
@supports not (grid-template-rows: subgrid) {
	@media (min-width: 768px) {
		.hall-grid > li {
			display: flex;
		}

		.hcard {
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		.hcard__more {
			margin-top: auto;
		}
	}
}

/* 수상작 카드 · 표지 상호작용: 정지 화면은 그대로. 제목은 밑줄이 쓸려 들어오고, 판만 살짝 커지고 도형이 돈다.
   표지는 넓은 물체라 커지지 않는다. 줄인 움직임에선 토큰이 0 이 되어 밑줄만 남는다 */
.hcard__link,
.hall-cover__link {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size var(--dur-2) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.hcard:hover .hcard__link,
	.hall-cover:hover .hall-cover__link {
		background-size: 100% 2px;
		transition-duration: var(--dur-3);
	}

	.hcard:hover .hcard__plate {
		transform: scale(var(--hover-scale));
	}

	.hcard:hover .hcard__plate .mark {
		transform: rotate(var(--mark-turn)) scale(calc(1 + (var(--hover-scale) - 1) * 3));
	}

	.hcard:hover .afig__value .crop,
	.hall-cover:hover .afig__value .crop {
		transform: translateY(calc(0.12em - var(--crop-rise)));
	}

	.hall-cover:hover .mark--tile {
		transform: rotate(calc(var(--mark-turn) * 0.6)) scale(calc(1 + (var(--hover-scale) - 1) * 2));
	}

	.hcard:hover .hcard__more::after,
	.hall-cover:hover .hall-cover__more::after {
		transform: translateX(var(--nudge));
	}
}

/* 누름: 휴대폰 행은 바탕이 가라앉고, 768 이상은 판이 살짝 줄어든다 */
.hcard:has(.hcard__link:active) .hcard__link,
.hall-cover:has(.hall-cover__link:active) .hall-cover__link {
	background-size: 100% 2px;
	transition-duration: 0s;
}

@media (max-width: 767.98px) {
	.hcard:has(.hcard__link:active)::before {
		content: "";
		position: absolute;
		inset: 0 calc(var(--s-2) * -1);
		z-index: -1;
		background: var(--sunk);
	}
}

@media (min-width: 768px) {
	.hcard:has(.hcard__link:active) .hcard__plate {
		transform: scale(var(--press-scale));
		transition-duration: 0s;
	}
}

/* 키보드: 링크 자체 링 대신 늘린 영역(::after)에 — 카드 · 표지 전체를 두른다 */
.hcard__link:focus-visible,
.hall-cover__link:focus-visible {
	outline: none;
	background-size: 100% 2px;
}

.hcard__link:focus-visible::after {
	outline: 2px solid var(--focus);
	outline-offset: 4px;
}

.hall-cover__link:focus-visible::after {
	outline: 3px solid var(--focus);
	outline-offset: -3px;
}

/* 문학 표지는 2px 테가 있어 링을 한 칸 안으로 (테와 붙어 굵은 테로 보이지 않게) */
.hall-cover.field--literature .hall-cover__link:focus-visible::after {
	outline-offset: -7px;
}

/* 수상작 상세 */
.award-hall {
	--focus: var(--mauve);
	padding-bottom: var(--s-7);
	overflow: hidden;
	background: var(--navy);
	color: var(--paper);
}

.award-hall .crumbs__list,
.award-hall .crumbs [aria-current] {
	color: var(--on-navy-2);
}

.award-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "kicker" "figure" "competition" "title" "label" "tools";
	padding-top: var(--sp-page-top);
}

.award-hero__kicker {
	grid-area: kicker;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	color: var(--on-navy-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.award-hero__kicker .ftag {
	color: var(--paper);
}

.award-hero__kicker a {
	text-decoration: none;
}

/* 크롭 숫자 안 쉼표: 아래가 잘리면 마침표처럼 보여 조금 올린다 */
.crop__sep {
	display: inline-block;
	transform: translateY(-0.16em);
}

.award-hero__competition {
	grid-area: competition;
	margin-top: var(--s-5);
	color: var(--on-navy-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--ls-small);
}

.award-hero__title {
	grid-area: title;
	margin-top: var(--s-2);
	max-width: 40rem;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.03em;
}

.award-hero__label {
	grid-area: label;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-6);
	margin-top: var(--s-5);
	padding-top: var(--s-4);
	border-top: var(--bw) solid rgba(238, 238, 232, 0.2);
}

.award-hero__row dt {
	color: var(--on-navy-2);
	font-size: var(--fs-sm);
	font-weight: 500;
}

.award-hero__row dd {
	font-size: var(--fs-body-sm);
	font-weight: 700;
}

.award-hero__tools {
	grid-area: tools;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-5);
}

/* 머리 그림은 하나만: 핵심 그림(숫자 · 작품명) 또는 분야 도형. 네이비 면이라 값 · 선 · 도형은 모브.
   1024 미만: 그림은 키커 아래 작게, 도형뿐이면 오른쪽 위 모서리에 잘라 둔다. 1024 이상: 글 │ 그림 두 단 */
.award-hero__figure {
	--f-shape: var(--mauve);
	--f-shape-2: var(--paper);
	--f-cut: var(--navy);
	--f-fg-2: var(--on-navy-2);
	grid-area: figure;
	margin-top: var(--s-5);
	color: var(--mauve);
}

.award-hero__figure .afig {
	--afig: 5.5rem;
}

.award-hero__figure .mark {
	display: none;
}

.award-hero .mark--literature .mk-line {
	display: none;
}

/* 격자 칸(grid-area)을 풀어야 머리 전체를 기준으로 모서리에 놓인다 */
.award-hero--mark .award-hero__figure {
	grid-area: auto;
	position: absolute;
	top: var(--s-3);
	right: calc(var(--gutter) * -1);
	width: 6rem;
	height: 5.5rem;
	margin: 0;
	overflow: hidden;
}

.award-hero--mark .award-hero__figure .afig {
	display: none;
}

.award-hero--mark .award-hero__figure .mark {
	display: block;
	position: absolute;
	top: -1rem;
	right: -2rem;
	width: 9rem;
	max-width: none;
	height: 9rem;
	opacity: 0.9;
}

.award-hero--mark :is(.award-hero__kicker, .award-hero__competition) {
	padding-right: 5rem;
}

@media (min-width: 768px) {
	.award-hero__figure .afig {
		--afig: 7rem;
	}
}

@media (min-width: 1024px) {
	.award-hero {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-rows: auto auto auto auto 1fr;
		grid-template-areas: "kicker figure" "competition figure" "title figure" "label figure" "tools figure";
		column-gap: var(--s-7);
	}

	.award-hero__figure {
		align-self: end;
		margin-top: 0;
	}

	.award-hero__figure .afig {
		--afig: clamp(6rem, 8vw, 9rem);
	}

	.award-hero--mark .award-hero__figure {
		grid-area: figure;
		position: relative;
		top: auto;
		right: auto;
		align-self: stretch;
		width: auto;
		height: auto;
		overflow: visible;
	}

	.award-hero--mark .award-hero__figure .mark {
		top: auto;
		right: -3rem;
		bottom: -5rem;
		width: 22rem;
		height: 22rem;
	}

	.award-hero--mark :is(.award-hero__kicker, .award-hero__competition) {
		padding-right: 0;
	}
}

.award-hero__jump .dchip {
	border-color: var(--navy);
}

.award-hero__jump .dchip--urgent {
	background: var(--navy);
	color: var(--paper);
}

.award-media {
	margin-top: var(--s-6);
	max-width: 48rem;
}

.award-media__caption {
	margin-top: var(--s-2);
	color: var(--on-navy-2);
	font-size: var(--fs-sm);
}

@media (min-width: 1024px) {
	.award-hero__title {
		font-size: 2.5rem;
		line-height: 1.25;
	}
}

/* 영상 */
.video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.video__thumb,
.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.video__play {
	position: absolute;
	left: var(--s-4);
	bottom: var(--s-4);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 3rem;
	padding: 0 var(--s-5) 0 var(--s-4);
	background: var(--paper);
	border: 0;
	color: var(--navy);
	font-size: var(--fs-body-sm);
	font-weight: 700;
	text-decoration: none;
}

.video__play-icon {
	width: 0;
	height: 0;
	border-left: 0.75rem solid currentColor;
	border-top: 0.5rem solid transparent;
	border-bottom: 0.5rem solid transparent;
}

.video.is-playing .video__play,
.video.is-playing .video__thumb {
	display: none;
}

html.js .no-js-only {
	display: none;
}

/* 본문 */
.award-body {
	max-width: calc(var(--w-read) + var(--gutter) * 2);
	margin-inline: 0 auto;
	padding-top: var(--s-6);
}

@media (min-width: 1200px) {
	.award-body {
		margin-inline: auto;
		max-width: calc(var(--w-page) + var(--gutter) * 2);
		padding-right: calc(var(--w-page) - var(--w-read) + var(--gutter));
	}
}

.award-block {
	padding: var(--s-5) 0;
}

.award-block__label {
	margin-bottom: var(--sp-label);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	font-weight: 800;
	letter-spacing: var(--ls-small);
}

.award-block__lede {
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: -0.02em;
}

.award-block__text {
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	letter-spacing: var(--ls-read);
}

/* 요약 · 편집자 노트는 두 문장씩 문단으로 온다 (AwardDetail.*Paragraphs) */
.award-block__lede + .award-block__lede,
.award-block__text + .award-block__text {
	margin-top: var(--sp-para);
}

.award-block__note {
	margin-top: var(--s-3);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
	letter-spacing: 0;
	max-width: var(--w-note);
}

/* 원문 버튼 이름이 길면("(사)한국청소년미술협회 수상자 발표 원문 보기") 폰에서 줄을 바꾼다 — 화면 밖으로 나가지 않게 */
.award-block .btn {
	max-width: 100%;
	padding-block: var(--s-2);
	white-space: normal;
}

/* 15. 나한테 맞는 공고 찾기 · 저장 · 소개 · 데이터 원칙 · 오류 ----------------------------------- */
.container--narrow {
	max-width: calc(52rem + var(--gutter) * 2);
}

.start-form {
	display: grid;
	gap: var(--s-7);
	padding-bottom: var(--section);
}

/* JS 가 있으면 한 화면에 한 질문 (app.js initStart → .is-wizard). 첫 그림부터 같은 간격이라 JS 가 늦게 돌아도 1단계가 움직이지 않는다 */
@media (scripting: enabled) {
	.start-form {
		gap: var(--s-5);
	}
}

.start-form.is-wizard {
	gap: var(--s-5);
}

.start-form.is-wizard:not([data-current="3"]) .start-notes {
	display: none;
}

/* 진행 막대 3칸 (aria-hidden — 단계는 제목 앞 sr-only 로 읽힌다) */
.start-progress {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-1);
	list-style: none;
	scroll-margin-top: var(--s-4);
}

/* defer 된 app.js 가 .js 를 달기 전에도 막대 자리를 잡아 둔다 (CLS) — .js-only 규칙보다 뒤에 둔다 */
@media (scripting: enabled) {
	html:not(.js) .start-progress {
		display: grid !important;
		visibility: hidden;
	}
}

.start-progress__bar {
	position: relative;
	display: block;
	height: 4px;
	overflow: hidden;
	background: var(--line);
}

.start-progress__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--navy);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-3) var(--ease-out);
}

.start-progress__item:is(.is-done, .is-current) .start-progress__bar::after {
	transform: none;
}

.start-progress__label {
	display: block;
	margin-top: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: var(--lh-meta);
	letter-spacing: var(--ls-small);
}

.start-progress__item.is-current .start-progress__label {
	color: var(--ink);
	font-weight: 800;
}

@media (min-width: 1024px) {
	.start-progress {
		scroll-margin-top: calc(var(--header-h) + var(--s-4));
	}
}

/* 새 단계는 16px 옆에서 들어온다 (뒤로 가면 반대쪽). 나가는 단계는 바로 숨겨 높이가 겹치지 않는다 */
@keyframes start-step-in {
	from {
		opacity: 0;
		transform: translateX(var(--start-shift));
	}
}

.start-step.is-in {
	--start-shift: 16px;
	animation: start-step-in var(--dur-3) var(--ease-out) both;
}

.start-step.is-in.is-back {
	--start-shift: -16px;
}

.start-step__legend {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-2);
	float: left;
	width: 100%;
}

.start-step__legend + * {
	clear: both;
}

.start-step__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	background: var(--navy);
	color: var(--paper);
	font-family: var(--font-num);
	font-size: var(--fs-body);
	font-weight: 800;
}

.start-step__title {
	font-size: var(--fs-h3);
	font-weight: 800;
	letter-spacing: var(--ls-title);
	line-height: var(--lh-title);
}

/* 단계가 바뀌면 JS 가 제목으로 초점을 옮긴다: 키보드일 때만 링 */
.start-step__title:focus {
	outline: none;
}

.start-step__title:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 4px;
}

.start-step__hint {
	margin-bottom: var(--s-4);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
	max-width: var(--w-note);
	letter-spacing: var(--ls-small);
}

.start-field {
	cursor: pointer;
	min-height: 8.5rem;
}

.start-field:has(:checked) {
	box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--navy);
}

/* 문학 면은 제 테가 있어 틈을 두면 두 겹 테로 보인다 → 테에 붙여 한 줄로 굵게 */
.start-field.field--literature:has(:checked) {
	box-shadow: 0 0 0 3px var(--navy);
}

/* 초점 링은 고름 테(6px) 바깥에 — 타일 사이 8px 안에 들어간다 */
.start-field:has(:focus-visible) {
	outline: 2px solid var(--navy);
	outline-offset: 6px;
}

.start-field:has(:checked) .mark--tile {
	transform: rotate(-12deg) scale(1.08);
}

.start-field__check {
	position: absolute;
	top: var(--s-3);
	left: var(--s-3);
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid currentColor;
	background: transparent;
}

.start-field:has(:checked) .start-field__check {
	background: currentColor;
}

.start-field:has(:checked) .start-field__check::after {
	content: "";
	position: absolute;
	left: 0.4375rem;
	top: 0.1875rem;
	width: 0.375rem;
	height: 0.6875rem;
	border-right: 2px solid var(--f-bg);
	border-bottom: 2px solid var(--f-bg);
	transform: rotate(45deg);
}

/* 유형 키워드는 바로 아래 2단계에 건수와 함께 나오니 타일에서는 뺀다 (라디오의 aria-describedby 로는 그대로 읽힌다) */
.start-field .ftile__kw {
	display: none;
}

/* 고르면 타일이 한 번 튀고 체크 칸이 부푼다 */
@keyframes start-pop {
	30% {
		transform: scale(0.95);
	}

	65% {
		transform: scale(1.03);
	}
}

@keyframes start-bump {
	50% {
		transform: scale(1.16);
	}
}

.start-field.is-picked {
	animation: start-pop 300ms var(--ease-out);
}

.start-field.is-picked .start-field__check {
	animation: start-bump 220ms 80ms var(--ease-out) both;
}

.toggle.is-picked .toggle__count,
.start-quiet__item.is-picked,
.start-count__num.is-bump,
.start-cond.is-picked .start-cond__box {
	animation: start-bump 220ms var(--ease-out);
}

.start-resume {
	display: inline-block;
	margin-bottom: var(--s-3);
	padding: 0.125rem var(--s-2);
	background: var(--mauve-soft);
	color: var(--ink);
	font-size: var(--fs-sm);
	font-weight: 600;
}

/* 막힌 '다음' 안내 (role=alert) — 단계마다 하나 */
.start-error {
	margin-bottom: var(--s-3);
	padding: var(--s-2) var(--s-3);
	background: var(--mauve-soft);
	border-left: 3px solid var(--navy);
	color: var(--ink);
	font-size: var(--fs-meta);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: var(--ls-small);
}

/* 2단계 칩: 이 화면에선 고르는 게 할 일이라 조금 크게 */
.start-form .start-type {
	min-height: 3rem;
	padding-inline: var(--s-4);
	font-size: var(--fs-body-sm);
}

.start-group + .start-group {
	margin-top: var(--s-5);
	padding-top: var(--s-5);
	border-top: var(--bw) solid var(--line);
}

.start-group__title {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: var(--sp-label);
	font-size: var(--fs-body-sm);
	font-weight: 700;
	letter-spacing: var(--ls-small);
}

.toggle__count {
	margin-left: 0.125rem;
	padding: 0 0.3125rem;
	background: var(--sunk);
	color: var(--ink);
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.toggle:has(:checked) .toggle__count {
	background: var(--mauve);
	color: var(--navy);
}

.start-quiet {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	margin-top: var(--s-3);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-small);
}

.start-quiet__label {
	color: var(--ink-2);
	font-weight: 700;
}

.start-quiet__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-3);
}

.start-quiet__item {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var(--line-2);
	text-underline-offset: 0.2em;
}

.start-quiet__item:has(:checked) {
	padding: 0 0.25rem;
	background: var(--navy);
	color: var(--paper);
	text-decoration: none;
}

.start-quiet__item:has(:focus-visible) {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* 3단계 조건: 칩보다 큰 행 하나씩 [칸] [이름 + 설명] [N건] */
.start-conds {
	display: grid;
	gap: var(--s-2);
}

.start-cond {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-3);
	min-height: 4.5rem;
	padding: var(--s-3) var(--s-4);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
	cursor: pointer;
	transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
		transform var(--dur-1) var(--ease-out);
}

.start-cond:has(:checked) {
	border-color: var(--navy);
	box-shadow: inset 0 0 0 1px var(--navy);
}

.start-cond:has(:focus-visible) {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.start-cond:not(.is-zero):active {
	transform: translateY(var(--press-y));
}

.start-cond__box {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--navy);
	background: var(--paper);
}

.start-cond:has(:checked) .start-cond__box {
	background: var(--navy);
}

.start-cond:has(:checked) .start-cond__box::after {
	content: "";
	position: absolute;
	left: 0.4375rem;
	top: 0.1875rem;
	width: 0.375rem;
	height: 0.6875rem;
	border-right: 2px solid var(--paper);
	border-bottom: 2px solid var(--paper);
	transform: rotate(45deg);
}

.start-cond__label {
	display: block;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: var(--lh-title);
}

.start-cond__desc {
	display: block;
	margin-top: var(--sp-stack);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
	letter-spacing: var(--ls-small);
}

.start-cond__count {
	font-family: var(--font-num);
	font-size: var(--fs-body);
	font-weight: 800;
	white-space: nowrap;
}

/* 고르면 0건이 되는 조건: 고를 수 없음 (점선 자리표시는 쓰지 않는다 — docs/04 §2) */
.start-cond.is-zero {
	background: transparent;
	border-color: var(--line);
	color: var(--ink-3);
	cursor: not-allowed;
}

.start-cond.is-zero .start-cond__desc {
	color: var(--ink-3);
}

.start-cond.is-zero .start-cond__box {
	border-color: var(--line-2);
}

.start-notes {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
	max-width: var(--w-note);
	letter-spacing: var(--ls-small);
}

/* 아래 띠: 상태 줄(건수) + 이전 · 다음 / N건 보기. 좁은 화면은 아래에 붙는다 */
.start-nav {
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: grid;
	gap: var(--s-2);
	margin-inline: calc(var(--gutter) * -1);
	padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
	background: linear-gradient(to top, var(--paper) 78%, rgba(238, 238, 232, 0));
}

/* 1단계에서 아직 아무것도 안 골랐을 때: 띠를 접는다 (상태 줄은 남겨 live region 이 계속 있게) */
.start-nav.is-idle {
	padding: 0 var(--gutter);
	background: none;
}

.start-count {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	letter-spacing: var(--ls-small);
}

.start-count__num {
	display: inline-block;
	color: var(--ink);
	font-family: var(--font-num);
	font-weight: 800;
}

.start-nav__buttons {
	display: flex;
	gap: var(--s-2);
}

.start-nav__buttons .btn {
	flex: 1 1 auto;
}

.start-nav__buttons .start-nav__back {
	flex: 0 0 5.5rem;
}

@media (min-width: 768px) {
	.start-nav {
		position: static;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-4);
		margin: 0;
		padding: var(--s-5) 0 0;
		border-top: var(--bw) solid var(--line);
		background: none;
	}

	.start-nav.is-idle,
	html:not(.js) .start-nav {
		padding: 0;
		border-top: 0;
	}

	.start-count {
		text-align: left;
	}

	.start-nav__buttons {
		margin-left: auto;
	}

	html:not(.js) .start-nav__buttons {
		margin-left: 0;
	}

	.start-nav__buttons .btn,
	.start-nav__buttons .start-nav__back {
		flex: none;
		min-width: 10rem;
	}

	.start-submit__button {
		width: auto;
		display: inline-flex;
	}

	/* 단계마다 높이가 달라도 아래 띠가 크게 뛰지 않게 */
	.start-form.is-wizard .start-step {
		min-height: 18rem;
	}
}

@media (hover: hover) and (pointer: fine) {
	/* 고른 타일 위에 올려도 도형이 hover 각도로 되돌아가지 않게 */
	.start-field:has(:checked):hover .mark--tile {
		transform: rotate(-12deg) scale(1.08);
	}

	.start-cond:not(.is-zero):hover {
		border-color: var(--navy);
	}
}

/* 저장 */
.saved-head__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	margin-left: var(--s-2);
	padding: 0 0.5rem;
	background: var(--navy);
	color: var(--paper);
	font-family: var(--font-num);
	font-size: 1.25rem;
	font-weight: 800;
	vertical-align: 0.3em;
	letter-spacing: 0;
}

.saved-head__tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-4);
}

.saved-layout {
	display: grid;
	gap: var(--s-7);
	padding-bottom: var(--section);
}

@media (min-width: 1024px) {
	.saved-layout {
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: var(--s-8);
		align-items: start;
	}
}

.saved-nostorage {
	display: none;
}

html.no-storage .saved-nostorage {
	display: block;
}

html.no-storage .saved-list,
html.no-storage .saved-empty {
	display: none !important;
}

.saved-loading {
	display: grid;
	gap: var(--s-3);
	padding: var(--s-6) 0;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
}

.saved-loading__bar {
	display: block;
	width: 100%;
	height: 2px;
	overflow: hidden;
	background: var(--line);
	position: relative;
}

.saved-loading__bar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 30%;
	background: var(--navy);
	animation: loading 1.2s var(--ease) infinite;
}

@keyframes loading {
	from { transform: translateX(-100%); }
	to { transform: translateX(340%); }
}

.saved-groups {
	display: grid;
	gap: var(--s-7);
}

.saved-group__title {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--sp-head);
	font-size: var(--fs-body);
	font-weight: 800;
}

.saved-group__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.3125rem;
	background: var(--sunk);
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.saved-empty__icon svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.saved-aside__title {
	margin-bottom: var(--sp-head);
	font-size: var(--fs-body);
	font-weight: 800;
}

.saved-aside .kv__row {
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--s-3);
	font-size: var(--fs-meta);
}

/* 곁 안내는 본문(빈 상태 안내)보다 작게: .kv__value 의 본문 크기를 메타 크기로 */
.saved-aside .kv__value {
	font-size: var(--fs-meta);
	line-height: 1.6;
	text-wrap: pretty;
}

/* 빈 상태에는 '공모 찾기' 버튼이 있으니 머리의 '공모 더 찾기'는 숨긴다 */
.saved-page:has([data-saved-empty]:not([hidden])) .saved-head__more {
	display: none;
}

/* 긴 글 (소개 · 데이터 원칙) */
.doc-head {
	display: grid;
	gap: var(--s-5);
	padding-block: var(--sp-page-top) var(--s-7);
	border-bottom: var(--bw) solid var(--navy);
}

.doc-head__title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 9vw, 4.5rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.doc-head__lede {
	margin-top: var(--s-2);
	max-width: var(--w-read);
	color: var(--ink-2);
	font-size: var(--fs-body);
	line-height: var(--lh-data);
}

@media (min-width: 1024px) {
	.doc-head {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-areas: "title aside";
		align-items: end;
		column-gap: var(--s-7);
	}

	.doc-head__title { grid-area: title; }
	.doc-head__aside { grid-area: aside; }
}

.doc-section {
	padding-top: var(--section);
}

.doc-body {
	display: grid;
	gap: var(--s-5);
}

/* 긴 글 페이지의 조건표도 값 칸을 읽는 글줄(--w-read)에서 끊는다 — 1440에서 한 줄 61자까지 벌어졌다 */
.doc-body .ctable {
	max-width: calc(var(--w-read) + 9rem + 1.5rem);
}

.prose p + p,
.doc-prose__lead + p {
	margin-top: var(--sp-para);
}

.doc-prose {
	max-width: var(--w-read);
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	letter-spacing: var(--ls-read);
}

.doc-prose__lead {
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: -0.02em;
}

.steps {
	display: grid;
	gap: var(--s-2);
	counter-reset: step;
}

.steps__item {
	position: relative;
	padding: var(--s-4) var(--s-5) var(--s-4) 3.75rem;
	background: var(--surface);
	border: var(--bw) solid var(--line);
	counter-increment: step;
}

.steps__item::before {
	content: counter(step);
	position: absolute;
	left: var(--s-5);
	top: var(--s-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--navy);
	color: var(--paper);
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	font-weight: 800;
}

.steps__title {
	font-weight: 800;
}

.steps__text {
	margin-top: var(--s-1);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.about-what {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--s-7);
		align-items: start;
	}
}

.facts-groups {
	display: grid;
	gap: var(--s-6);
}

@media (min-width: 1024px) {
	.facts-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-6) var(--s-7);
	}

	/* 데이터 원칙: 길이가 크게 다른 두 표(기호 범례 · 날짜와 표시)는 나란히 두지 않는다 (짧은 쪽 아래 빈 자리) */
	.policy .facts-groups {
		grid-template-columns: minmax(0, 1fr);
	}
}

.doc-subhead {
	margin-bottom: var(--sp-head);
	font-size: var(--fs-body);
	font-weight: 800;
}

.doc-note,
.doc-intro {
	max-width: var(--w-note);
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-note);
	letter-spacing: var(--ls-small);
}

.doc-note__sym {
	font-family: var(--font-num);
	font-weight: 800;
	color: var(--ink);
	white-space: nowrap;
}

.field-cols {
	display: grid;
	gap: var(--s-6);
}

@media (min-width: 768px) {
	.field-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-5);
	}
}

/* .ftile 의 height:100% 가 li 전체를 차지해 소개문·유형 목록이 li 밖으로 밀려나지 않게 */
.field-col__tile {
	height: auto;
	min-height: 13rem;
}

@media (max-width: 767.98px) {
	.field-col__tile {
		min-height: 8rem;
	}
}

/* 유형 줄: 밑줄 없는 글자 + 줄 머리에 남지 않는 1px 구분선 (.orow__meta 와 같은 방식) */
.field-col__types {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) 0;
	overflow: hidden;
	margin-top: var(--s-3);
	margin-left: -0.5rem;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 500;
	line-height: 1.6;
}

.field-col__types > li {
	margin-left: -1px;
	padding: 0 0.5rem 0 0.5625rem;
	background: linear-gradient(var(--line-2), var(--line-2)) no-repeat left center / 1px 0.6875rem;
}

.field-col__types a {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.field-col__types a:hover {
		color: var(--ink);
	}
}

.field-col .ftile__kw {
	display: block;
	margin-top: var(--s-2);
	padding-top: var(--s-2);
	border-top: var(--bw) solid var(--f-line);
	color: var(--f-fg-2);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.roadmap {
	display: grid;
	border-top: var(--bw) solid var(--navy);
}

.roadmap__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s-1) var(--s-4);
	padding: var(--s-4) 0;
	border-bottom: var(--bw) solid var(--line);
}

.roadmap__title {
	font-weight: 800;
}

.roadmap__status {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.roadmap__status.is-now {
	padding: 0 0.375rem;
	background: var(--mauve);
	color: var(--navy);
}

.roadmap__text {
	grid-column: 1 / -1;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-note);
	max-width: var(--w-note);
	letter-spacing: var(--ls-small);
}

@media (min-width: 768px) {
	.roadmap__row {
		grid-template-columns: 10rem 9rem minmax(0, 1fr);
		align-items: baseline;
	}

	/* 표의 한 칸(한 문장)이라 글줄 상한 없이 한 줄로 — 줄마다 높이가 들쭉날쭉하지 않게 */
	.roadmap__text {
		grid-column: auto;
		max-width: none;
	}

	.roadmap__status {
		justify-self: start;
	}
}

/* ── iOS 앱 소개 (/app) ─────────────────────────────────────────────── */
/* 앱 안에서 열면(html.is-app) 받기 버튼 같은 웹 전용 줄은 숨긴다 */
.is-app [data-web-only] {
	display: none !important;
}

.app-get {
	margin-top: var(--s-4);
}

.app-get__soon {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.app-more {
	display: grid;
	gap: var(--s-6);
}

.app-shots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 15rem));
	gap: var(--s-4);
	justify-content: start;
}

.app-shot {
	margin: 0;
}

.app-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--bw-strong) solid var(--navy);
	border-radius: 1.25rem;
	background: var(--paper);
}

.app-shot__cap {
	margin-top: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.app-more {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: var(--s-7);
	}
}

.rules {
	display: grid;
	counter-reset: rule;
}

@media (min-width: 768px) {
	.rules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--s-7);
	}
}

.rules__item {
	padding: var(--s-5) 0;
	border-top: var(--bw) solid var(--line);
}

.rules__title {
	font-size: var(--fs-body);
	font-weight: 800;
	line-height: var(--lh-row);
}

.rules__text {
	margin-top: var(--sp-label);
	color: var(--ink);
	font-size: var(--fs-body);
	line-height: var(--lh-read);
	max-width: var(--w-read);
	letter-spacing: var(--ls-read);
}

.legend .ctable__label {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.cond--key {
	justify-content: center;
}

.legend__eg {
	margin-top: var(--s-2);
}

.doc-channel {
	margin-top: var(--s-2);
}

.doc-closing {
	position: relative;
	display: grid;
	gap: var(--s-3);
	justify-items: start;
	margin-top: var(--section);
	padding: var(--s-6) var(--s-5);
	background: var(--navy);
	color: var(--paper);
}

.doc-closing .mark--empty {
	--f-shape: var(--mauve);
	margin-bottom: var(--s-3);   /* 도형 → 제목 24 */
}

.doc-closing .mark--empty .mk-music,
.doc-closing .mark--empty .mk-literature {
	fill: var(--paper);
}

.doc-closing__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.doc-closing__text {
	max-width: var(--w-note);
	color: var(--on-navy-2);
	font-size: var(--fs-desc);
	line-height: var(--lh-note);
	letter-spacing: var(--ls-read);
}

/* 32rem 에서 끊기는 한두 문장 보조 글: 줄 길이를 고르게 (한두 낱말 끝줄 · 구 가운데 끊김 대신 두 줄 반반) */
.shead__desc,
.start-step__hint,
.doc-closing__text,
.cta-box__text,
.doc-note,
.award-block__note {
	text-wrap: balance;
}

.doc-closing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-3);
}

.doc-closing .btn--secondary {
	border-color: var(--paper);
	color: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
	.doc-closing .btn--secondary:hover {
		background: var(--paper);
		color: var(--navy);
	}
}

@media (min-width: 768px) {
	.doc-closing {
		padding: var(--s-7);
	}
}

/* 오류 */
.error-poster {
	display: grid;
	gap: var(--s-4);
	padding-top: var(--sp-page-top);
}

.error-poster__figure {
	height: 7rem;
	overflow: hidden;
	border-bottom: 3px solid var(--navy);
	font-size: 9rem;
	line-height: 0.78;
}

.error-poster__figure .crop__n {
	display: inline-block;
	transform: translateY(0.1em);
}

.error-poster__title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

.error-poster__body {
	display: grid;
	gap: var(--s-4);
	max-width: 40rem;
}

.error-poster__lede {
	color: var(--ink-2);
	font-size: var(--fs-body);
	line-height: var(--lh-data);
}

.error-poster__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.error-block {
	margin-top: var(--s-7);
}

.error-block__title {
	margin-bottom: var(--sp-head);
	font-size: var(--fs-body);
	font-weight: 800;
}

.error-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-2);
}

@media (min-width: 768px) {
	.error-tiles {
		gap: var(--s-4);
	}
}

.error-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-5);
}

.error-links .more::after {
	content: " →";
}

.error-fieldlinks {
	display: grid;
	border-top: var(--bw) solid var(--line);
}

.error-fieldlink {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	padding: var(--s-3) 0;
	border-bottom: var(--bw) solid var(--line);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.error-fieldlink:hover .ftag {
		text-decoration: underline;
	}
}

.error-fieldlink__kw {
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

.error-note {
	margin-top: var(--s-6);
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

/* 16. 토스트 · 다이얼로그 · 액션바 · 움직임 · 인쇄 ----------------------------------- */
.toast {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
	z-index: 300;
	display: flex;
	align-items: center;
	gap: var(--s-4);
	width: max-content;
	max-width: calc(100vw - var(--s-6));
	margin-inline: auto;
	padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
	background: var(--navy);
	color: var(--paper);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	box-shadow: var(--shadow-pop);
	opacity: 0;
	pointer-events: none;
	transform: translateY(16px);
	transition: opacity var(--dur-2) var(--ease-in), transform var(--dur-2) var(--ease-in);
}

/* 들어올 땐 --dur-3 ease-out, 나갈 땐 한 단계 짧게 --dur-2 ease-in */
.toast.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition-duration: var(--dur-3);
	transition-timing-function: var(--ease-out);
}

.toast__action {
	flex: none;
	padding: var(--s-2) var(--s-2);
	margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0;
	background: none;
	border: 0;
	color: var(--mauve);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.detail-page ~ .toast,
body:has(.actionbar.is-visible) .toast {
	bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

.dialog {
	width: min(28rem, calc(100vw - 2rem));
	padding: 0;
	border: 0;
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-pop);
}

.dialog::backdrop {
	background: rgba(15, 28, 38, 0.5);
}

.dialog__body {
	display: grid;
	gap: var(--s-3);
	padding: var(--s-6) var(--s-5) var(--s-5);
}

.dialog__eyebrow {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.dialog__title {
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-title);
}

.dialog__text {
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: 1.65;
}

.dialog__body {
	position: relative;
}

.dialog__close {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
}

.dialog__close svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

@media (hover: hover) and (pointer: fine) {
	.dialog__close:hover {
		background: var(--sunk);
	}
}

.dialog__eyebrow {
	padding-right: 2.5rem;
}

/* 할 일은 한 줄에 하나씩 같은 너비로, 알림 의향은 버튼보다 한 단계 낮은 글자 링크로 */
.dialog__actions {
	display: grid;
	gap: var(--s-2);
	margin-top: var(--s-3);
}

.dialog__actions .btn {
	width: 100%;
}

.dialog__notify {
	justify-self: start;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink-2);
	font: inherit;
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* 하단 액션바: 1024px 미만 공모 상세. JS 가 핵심 정보 버튼 줄이 화면에 있는 동안 숨긴다 */
.actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--navy);
	color: var(--paper);
	transform: translateY(0);
}

/* JS 가 켜져 있으면 첫 그림부터 숨겨 둔다 (app.js 가 늦게 돌아도 보였다가 내려가지 않게). app.js 가 못 오면 숨은 채 — 핵심 정보 버튼의 복제라 괜찮다 */
@media (scripting: enabled) {
	.actionbar {
		transform: translateY(110%);
	}
}

html.js .actionbar {
	transform: translateY(110%);
}

html.js .actionbar.is-visible {
	transform: translateY(0);
}

/* 전환은 app.js 가 첫 자리를 정한 뒤(.is-ready)에만: 숨을 땐 --dur-2 ease-in, 올라올 땐 --dur-3 ease-out */
.actionbar.is-ready {
	transition: transform var(--dur-2) var(--ease-in);
}

.actionbar.is-ready.is-visible {
	transition-duration: var(--dur-3);
	transition-timing-function: var(--ease-out);
}

.actionbar__inner {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	max-width: calc(var(--w-page) + var(--gutter) * 2);
	margin-inline: auto;
	padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
}

.actionbar__info {
	display: flex;
	flex: 1;
	min-width: 0;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-meta);
}

/* 옆 D-day 칩이 "마감" · "접수 예정"을 말하므로 날짜만 (Deadline.barDate). 말줄임 대신 두 줄까지 — "2027년 / 1월 4일(월)" */
.actionbar__date {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	color: var(--on-navy-2);
	font-size: var(--fs-sm);
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.actionbar .save-btn {
	color: var(--paper);
	flex: none;
}

.actionbar .btn {
	flex: none;
	min-height: 2.75rem;
	padding-inline: var(--s-4);
}

.actionbar .dchip--open,
.actionbar .dchip--upcoming {
	border-color: var(--paper);
	color: var(--paper);
}

.actionbar .dchip--urgent {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--navy);
}

.detail-page {
	padding-bottom: 4.5rem;
}

@media (min-width: 1024px) {
	.actionbar {
		display: none;
	}

	.detail-page {
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--hover-scale: 1;
		--press-scale: 1;
		--press-scale-sm: 1;
		--press-y: 0px;
		--lift: 0px;
		--nudge: 0px;
		--mark-turn: 0deg;
		--crop-rise: 0em;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.ticker__track {
		animation: none !important;
	}

	.ticker__viewport {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ticker__list[aria-hidden="true"],
	.ticker__toggle {
		display: none;
	}

	/* /start: 움직임 없이 바로 (클래스는 app.js 가 시간으로 뗀다) */
	.start-step.is-in,
	.start-field.is-picked,
	.start-field.is-picked .start-field__check,
	.toggle.is-picked .toggle__count,
	.start-quiet__item.is-picked,
	.start-count__num.is-bump,
	.start-cond.is-picked .start-cond__box {
		animation: none;
	}
}

@media (forced-colors: active) {
	.dchip,
	.toggle,
	.qchip,
	.chip,
	.btn {
		border: 1px solid CanvasText;
	}

	.orow__link:focus-visible::after,
	.poster__link:focus-visible::after,
	.award__link:focus-visible::after,
	.hcard__link:focus-visible::after,
	.hall-cover__link:focus-visible::after {
		outline: 2px solid Highlight;
	}

	.hcard__plate,
	.hall-cover {
		border: 1px solid CanvasText;
	}

	.start-progress__bar::after {
		background: Highlight;
	}

	.start-cond,
	.start-field {
		border: 1px solid CanvasText;
	}

	.start-field:has(:checked),
	.start-cond:has(:checked) {
		outline: 3px solid Highlight;
		outline-offset: 3px;
	}
}

@media print {
	.site-header,
	.site-footer,
	.ticker,
	.actionbar,
	.save-btn,
	.share-btn,
	.djump,
	.filterbar,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff;
	}

	.field--music,
	.band,
	.hall-head,
	.award-hall {
		background: #fff !important;
		color: #000 !important;
	}

	.detail {
		display: block;
	}

	/* 네이비 띠 안 글자는 밝은 색이라 흰 종이에서 사라진다 */
	.band *,
	.field--music *,
	.award-hall * {
		color: #000 !important;
	}

	/* 공모 상세를 인쇄할 때는 그 공모의 조건만: 추천 목록과 공유·캘린더 도구는 뺀다 */
	.detail-page .detail-awards,
	.detail-page .detail-similar,
	.dsheet__tools,
	.dsheet__actions,
	.dsource__report,
	.toast,
	.dialog {
		display: none !important;
	}

	/* 링크가 종이에서 사라지지 않게 원문 주소를 적는다 */
	.dsource__link::after {
		content: " " attr(href);
		font-weight: 400;
		word-break: break-all;
	}
}

/* 결과 0건: 조건을 하나 빼면 */
.relax {
	display: grid;
	gap: var(--s-2);
	width: min(100%, 24rem);
	margin-top: var(--s-2);
	text-align: left;
}

.relax__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 3rem;
	padding: 0 var(--s-4);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
	font-size: var(--fs-body-sm);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.relax__link:hover {
		border-color: var(--navy);
	}
}

.relax__count {
	flex: none;
	font-family: var(--font-num);
	font-weight: 800;
}

/* 스크롤해도 닿는 필터 줄 · 바로가기 줄
   모바일 공모 찾기: 검색창은 위로 흘려보내고 [필터 · 빠른 칩] 줄만 위에 붙는다(음수 top).
   공모 상세: 바로가기 줄이 위에 붙는다(1024px~ 헤더 아래). */
@media (max-width: 1023.98px) {
	.search-side {
		position: sticky;
		top: calc((3.25rem + 4px + var(--s-3) - var(--s-2)) * -1);
		z-index: 30;
		padding-top: var(--s-2);
		margin-top: calc(var(--s-2) * -1);
		margin-inline: calc(var(--gutter) * -1);
		padding: 0 var(--gutter) var(--s-2);
		background: var(--paper);
		border-bottom: var(--bw) solid var(--line);
	}
}

.djump {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--paper);
}

/* 오른쪽에 탭이 더 있으면 끝을 흐린다. 두 번째 층은 위·아래 선을 흐리지 않게 남긴다 */
.djump.has-more {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent), linear-gradient(#000 1px, transparent 1px, transparent calc(100% - 1px), #000 calc(100% - 1px));
	mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent), linear-gradient(#000 1px, transparent 1px, transparent calc(100% - 1px), #000 calc(100% - 1px));
}

/* 왼쪽으로 밀려 난 탭이 있으면 그쪽 끝도 흐린다 (initJump 가 has-back 을 단다) */
.djump.has-back {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem), linear-gradient(#000 1px, transparent 1px, transparent calc(100% - 1px), #000 calc(100% - 1px));
	mask-image: linear-gradient(90deg, transparent, #000 2.5rem), linear-gradient(#000 1px, transparent 1px, transparent calc(100% - 1px), #000 calc(100% - 1px));
}

.djump.has-back.has-more {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent), linear-gradient(#000 1px, transparent 1px, transparent calc(100% - 1px), #000 calc(100% - 1px));
	mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent), linear-gradient(#000 1px, transparent 1px, transparent calc(100% - 1px), #000 calc(100% - 1px));
}

.djump__list a[aria-current] {
	color: var(--ink);
	font-weight: 700;
}

/* 바로가기 막대도 메뉴와 같다: 스크롤로 현재 칸이 바뀌면 옛 막대는 접히고 새 막대가 펴진다 */
.djump__list a::after {
	content: "";
	position: absolute;
	left: var(--s-3);
	right: var(--s-3);
	bottom: -1px;
	height: 2px;
	background: var(--line-2);
	transform: scaleX(0);
	transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.djump__list a[aria-current]::after {
	background: var(--navy);
	transform: none;
}

.dsec__title {
	scroll-margin-top: 2rem;
}

@media (min-width: 1024px) {
	.djump {
		top: var(--header-h);
	}

	.djump__list li:first-child a::after {
		left: 0;
	}

}

/* 글자 저장 버튼은 버튼 테를 유지한다 (.save-btn 의 border:0 보다 뒤) */
.btn.save-btn--lg {
	border: var(--bw) solid var(--navy);
}

/* 모바일: 빵부스러기 마지막(현재 페이지)은 바로 아래 제목과 같아 네 번째부터 숨긴다 */
@media (max-width: 767.98px) {
	.crumbs__item:nth-child(n+4):last-child {
		display: none;
	}
}

/* 이번 주 달력: 넓은 화면에서도 수 · 단위는 한 줄, 기간은 아래 */
@media (min-width: 768px) {
	.week__tally {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr); /* 남는 폭은 단위 칸으로: 수와 '건' 사이가 벌어지지 않게 */
		justify-content: start;
		align-items: baseline;
		column-gap: 0.125rem;
	}

	/* 기간 · 달력 링크는 한 줄씩 차지해 수 칸이 링크 폭만큼 넓어지지 않게 ("15      건" 방지) */
	.week__range,
	.week__tally > .week__more {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* 조건으로 바로 찾기: 개수에 맞춰 채운다 */
@media (min-width: 1024px) {
	.quick-links {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}
}

/* 필터 곁 검색창: 좁은 칸에서 자리표시 글자가 잘리지 않게 */
@media (min-width: 1024px) {
	.search-form__q .searchbar__input {
		padding-left: 2.5rem;
		font-size: var(--fs-body-sm);
	}

	.search-form__q .searchbar__icon {
		left: var(--s-3);
		width: 1.125rem;
		height: 1.125rem;
	}

	.search-form__q .searchbar__submit {
		min-width: 3.5rem;
		padding-inline: var(--s-3);
	}
}

/* 저장: 최근 본 공모 */
.saved-recent {
	margin-top: var(--s-7);
}

.saved-recent__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}

.saved-recent__head .saved-group__title {
	margin-bottom: 0;
}

/* 작은 글자 링크의 누르는 영역을 24px 이상으로 (글자 크기는 그대로) */
.crumbs a,
.face__kicker a,
.award-hero__kicker a,
.dmore,
.type-chips__quiet-list a,
.start-quiet__item {
	display: inline-block;
	padding-block: 0.3125rem;
	margin-block: -0.3125rem;
}

/* "홈"·"문학"처럼 한두 글자 링크는 옆으로도 넓힌다 (보이는 자리는 그대로) */
.crumbs a,
.face__kicker a,
.award-hero__kicker a {
	min-width: 1.5rem;
	padding-inline: 0.375rem;
	margin-inline: -0.375rem;
	text-align: center;
}

.logo--footer,
.dsheet__calendar-links a,
.dsheet__share,
.link-arrow,
.week__more,
.mcal__item {
	min-height: 1.5rem;
	line-height: 1.35;
}

/* 마감 달력 ----------------------------------------------------------------- */
.mcal-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-5);
	padding-bottom: var(--s-4);
	border-bottom: var(--bw) solid var(--navy);
}

.mcal-nav {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	width: 100%;
}

.mcal-nav__title {
	flex: 1;
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

.mcal-nav__total {
	display: block;
	margin-top: 0.125rem;
	color: var(--ink-2);
	font-family: var(--font-sans);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

.mcal-nav__total b {
	color: var(--ink);
	font-family: var(--font-num);
	font-size: var(--fs-lead);
	font-weight: 800;
}

.mcal-nav__step {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	min-width: 4.5rem;
	height: 2.75rem;
	padding: 0 var(--s-3);
	border: var(--bw) solid var(--line-2);
	font-size: var(--fs-meta);
	font-weight: 700;
	text-decoration: none;
	justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
	a.mcal-nav__step:hover {
		border-color: var(--navy);
	}
}

.mcal-nav__step.is-disabled {
	color: var(--ink-3);
	opacity: 0.5;
}

.mcal-nav__step svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.mcal-cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.mcal-today {
	margin-left: auto;
}

@media (min-width: 768px) {
	.mcal-nav {
		width: auto;
		gap: var(--s-4);
	}

	.mcal-nav__title {
		flex: none;
		min-width: 12rem;
	}
}

/* 달력 표 (768px~) */
.mcal {
	display: none;
	width: 100%;
	margin-top: var(--s-5);
	border-collapse: collapse;
	table-layout: fixed;
}

.mcal th {
	padding: var(--s-2) var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-align: left;
	border-bottom: var(--bw) solid var(--line-2);
}

.mcal th.is-sun,
.mcal th.is-sat {
	color: var(--ink-3);
}

.mcal td {
	height: 7.5rem;
	padding: var(--s-2);
	vertical-align: top;
	border: var(--bw) solid var(--line);
	background: var(--paper);
}

/* 앞뒤 달의 날: 칸은 흐린 바탕, 날짜는 흐린 글자 */
.mcal td.is-outside > .mcal__date {
	color: var(--ink-3);
}

.mcal td.is-outside,
.mcal td.is-blank {
	background: var(--sunk);
}

.mcal td.has-items {
	background: var(--surface);
}

.mcal td.is-outside.has-items {
	background: var(--sunk);
}

/* 지난 칸: 흐림(opacity) 대신 종이 바탕 + 흐린 글자 400 (지금 접수 중인 칸의 600 짙은 글자와 굵기로도 갈린다).
   '+N건' 팝업 안 목록은 칸 안 목록이 아니라 그대로 읽힌다 */
.mcal td.is-past.has-items:not(.is-outside):not(.is-target) {
	background: var(--paper);
}

.mcal td.is-past > .mcal__date,
.mcal td.is-past > .mcal__items .mcal__item,
.mcal td.is-past > .mcal__more > .mcal__more-toggle {
	color: var(--ink-3);
}

.mcal td.is-past > .mcal__items .mcal__item {
	font-weight: 400;
}

/* '+N건 더 보기'도 같은 두 단계 (700 → 500): 지난 칸에서 보조 단추가 가장 굵은 글자가 되지 않게 */
.mcal td.is-past > .mcal__more > .mcal__more-toggle {
	font-weight: 500;
}

.mcal td.is-past > .mcal__items .mcal__item .glyph {
	opacity: 0.6;
}

.mcal td.is-today {
	box-shadow: inset 0 0 0 2px var(--navy);
}

.mcal__date {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--sp-meta);
	font-family: var(--font-num);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.4;
}

.mcal__today {
	padding: 0 0.3125rem;
	background: var(--navy);
	color: var(--paper);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.6;
}

.mcal__items {
	display: grid;
	gap: var(--sp-meta);
}

.mcal__item {
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	padding: 0.125rem 0.25rem;
	margin-inline: -0.25rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.mcal__item span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.mcal__item:hover {
		background: var(--sunk);
	}
}

@media (hover: hover) and (pointer: fine) {
	.mcal__item:hover span {
		text-decoration: underline;
	}
}

.mcal__item .glyph {
	width: 0.5625rem;
	height: 0.5625rem;
}

.mcal__item--art .glyph {
	fill: var(--mauve-deep);
}

/* 날짜별 목록 (768px 미만) */
.agenda {
	display: grid;
	gap: var(--s-6);
	margin-top: var(--s-5);
	padding-bottom: var(--section);
}

.agenda__date {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	padding-bottom: var(--s-2);
	font-size: var(--fs-lead);
}

.agenda__today {
	padding: 0 0.3125rem;
	background: var(--navy);
	color: var(--paper);
	font-size: var(--fs-xs);
	font-weight: 700;
}

.agenda__count {
	margin-left: auto;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.agenda__day.is-past {
	opacity: 0.6;
}

.agenda__day .mrows {
	border-top-color: var(--navy);
}

@media (min-width: 768px) {
	.mcal {
		display: table;
	}

	.agenda {
		display: none;
	}

	.calendar-page .container {
		padding-bottom: var(--section);
	}
}

.week__more {
	margin-left: auto;
	font-size: var(--fs-meta);
}

@media (min-width: 768px) {
	.week__more {
		grid-column: 1 / -1;
		margin: var(--s-2) 0 0;
	}
}

/* 칸 안 공모 이름: 앞 연도를 떼고 두 줄까지 (한 줄 말줄임은 "2026 지역 예술 유통 기반 강…"처럼 읽을 수 없었다) */
.mcal td {
	position: relative;
}

.mcal__items,
.mcal__item span {
	min-width: 0;
}

.mcal__item {
	align-items: flex-start;
}

.mcal__item .glyph {
	flex: none;
	margin-top: 0.35em;
}

.mcal__item span {
	display: -webkit-box;
	flex: 1 1 auto;
	overflow: hidden;
	white-space: normal;
	overflow-wrap: anywhere;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mcal__more-toggle {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	margin-top: 0.125rem;
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.mcal__more-toggle::-webkit-details-marker {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.mcal__more-toggle:hover {
		color: var(--ink);
	}
}

.mcal__more-close,
.mcal__more[open] .mcal__more-open {
	display: none;
}

.mcal__more[open] .mcal__more-close {
	display: inline;
}

/* "+N건 더 보기": 칸을 늘리지 않고 칸 아래로 뜨는 목록 (그날 전체) */
.mcal__pop {
	position: absolute;
	top: calc(100% - 1px);
	left: -1px;
	z-index: 10;
	width: max(calc(100% + 2px), 17rem);
	max-height: min(60vh, 26rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s-3);
	border: var(--bw) solid var(--navy);
	background: var(--surface);
	box-shadow: var(--shadow-pop);
}

.mcal tr > td:nth-child(n + 6) .mcal__pop {
	left: auto;
	right: -1px;
}

.mcal__pop-title {
	margin-bottom: var(--sp-label);
	padding-bottom: var(--s-2);
	border-bottom: var(--bw) solid var(--line);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.mcal td:has(.mcal__more[open]) {
	z-index: 10;
}

/* 좁은 화면 목록: 이미 지난 마감은 접어 둔다 */
.agenda__past {
	border: var(--bw) solid var(--line);
}

.agenda__past-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.75rem;
	padding: 0 var(--s-3);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.agenda__past-toggle::-webkit-details-marker {
	display: none;
}

.agenda__past-toggle svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: transform 160ms var(--ease);
}

.agenda__past[open] .agenda__past-toggle svg {
	transform: rotate(180deg);
}

.agenda__past[open] {
	display: grid;
	gap: var(--s-6);
	padding: 0 var(--s-3) var(--s-4);
}

.agenda__past[open] .agenda__past-toggle {
	margin-inline: calc(var(--s-3) * -1);
	border-bottom: var(--bw) solid var(--line);
}

/* ── 리뷰 반영 (2026-09-21) ───────────────────────────────────────────── */

/* 나한테 맞는 공고 찾기: 768px~ 타일에서 체크 · 도형이 분야명 · 유형 줄을 덮지 않게 */
@media (min-width: 768px) {
	.start-field {
		min-height: 11rem;
		padding-top: 3.5rem;
	}

	.start-field .mark--tile {
		top: -2rem;
		right: -2rem;
		width: 7.5rem;
		height: 7.5rem;
	}

	.start-field__check {
		top: var(--s-4);
		left: var(--s-5);
	}
}

/* 모바일 시트에서는 나이 '적용' 대신 아래 '결과 보기'로 */
@media (max-width: 1023.98px) {
	.search-age__apply {
		display: none;
	}
}

/* 홈 '새로 올라온 공모' 안에서는 새 공모 표시가 당연하므로 숨긴다 */
.home-fresh .new-mark {
	display: none;
}

/* 좁은 폰(390px 미만): 메뉴 여백을 줄이고 오른쪽 끝을 흐려 옆으로 더 있음을 알린다 */
.site-nav {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
}

/* 오른쪽으로 밀린 상태(지금 보는 메뉴를 끌어왔거나 손으로 민 뒤): 왼쪽 끝도 흐려 글자가 통째로 썰린 것처럼 보이지 않게 */
.site-nav.has-back {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}

@media (max-width: 389.98px) {
	.site-nav__list {
		gap: 0;
	}

	.site-nav__link {
		padding-inline: 0.375rem;
		font-size: var(--fs-meta);
	}

	.site-nav__bar {
		left: 0.375rem;
		right: 0.375rem;
	}
}

@media (min-width: 1024px) {
	.site-nav,
	.site-nav.has-back {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* 홈 조건 타일: 마지막 하나가 혼자 남으면 한 줄을 다 쓴다 */
@media (max-width: 767.98px) {
	.quick-links > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* 홈 히어로 숫자 링크 누르는 영역 (버튼은 제 높이를 쓴다) */
.hero__stats > li:not(.hero__stat-cta) a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* 티커 라벨을 본문 왼쪽 선에 맞춘다 */
.ticker__label {
	padding-left: max(var(--gutter), calc((100vw - var(--w-page)) / 2));
}

/* 한 편뿐인 수상작 목록: 반쪽이 아니라 가로 두 단 */
@media (min-width: 768px) {
	.award-list > li:only-child {
		grid-column: 1 / -1;
	}

	.award-list > li:only-child .award {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: auto auto auto auto 1fr;
		column-gap: var(--s-7);
	}

	.award-list > li:only-child .award__figure {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;
		height: 9rem;
		margin: 0;
	}

	/* 넓은 칸의 요약은 세 줄 잘림 대신 한 단계 큰 글로 */
	.award-list > li:only-child .award__summary {
		font-size: var(--fs-body-sm);
		line-height: 1.65;
	}
}

/* 시리즈 이번 회차: 포스터와 설명을 위에서 맞춘다 */
@media (min-width: 768px) {
	.series-now__body {
		align-items: start;
	}
}

/* 수상작 상세 머리 아래 여백 */
.award-hall {
	padding-bottom: var(--s-6);
}

/* 출처 섹션의 '원문에 기재 없음' 한 줄 */
.dsec__absent {
	margin-top: var(--s-4);
}

/* 출처 줄 없이 바로 오면 제목 아래 간격(--sp-head)만 */
.dsec__title + .dsec__absent {
	margin-top: 0;
}

.face__kicker-note {
	flex-basis: 100%;
}

.saved-head__more {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	font-size: var(--fs-meta);
}

/* 데이터 원칙: D-day 색 단계 범례 */
.dchip-legend {
	display: grid;
	gap: var(--s-2);
	margin-top: var(--s-3);
}

.dchip-legend li {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--fs-meta);
}

.dsource__report {
	margin-top: var(--s-2);
	font-size: var(--fs-meta);
}

/* 검색어 표시 */
mark.hit {
	background: var(--mauve);
	color: inherit;
	padding: 0 0.0625rem;
}

/* 넓은 화면 필터 곁 머리: [필터 ……… 초기화]. 좁은 화면 시트는 아래 줄에 초기화가 있어 머리에서는 숨긴다 */
.filter-panel__reset {
	display: none;
}

@media (min-width: 1024px) {
	html.js .filter-panel__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--s-4) 0 0;
	}

	.filter-panel__title {
		font-size: var(--fs-lead);
		font-weight: 800;
		letter-spacing: var(--ls-title);
	}

	.filter-panel__reset {
		display: inline-flex;
		align-items: center;
		min-height: 2rem;
		color: var(--ink-2);
		font-size: var(--fs-sm);
		font-weight: 600;
	}
}

/* 좁은 화면 목록 끝: 다음 달로 이어지는 마감 */
.agenda__spill {
	display: grid;
	gap: var(--s-6);
	padding-top: var(--s-5);
	border-top: var(--bw) dashed var(--line-2);
}

.agenda__spill-head {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 700;
}

.agenda__spill-more {
	justify-self: start;
}

/* 홈 날짜 링크로 들어온 달력 칸 */
.mcal td.is-target {
	box-shadow: inset 0 0 0 2px var(--mauve-deep);
}

/* 고른 조건은 + 대신 ✓ (켜져 있음을 기호로도) */
.toggle:has(:checked) .toggle__sym {
	font-size: 0;
}

.toggle:has(:checked) .toggle__sym::before {
	content: "✓";
	font-family: var(--font-sans);
	font-size: var(--fs-meta);
}

.qchip[aria-current]:not(:has(.glyph))::before {
	content: "✓";
	margin-right: 0.25rem;
	font-weight: 700;
}

/* 필터 시트: 결과가 0건이면 결과 보기 버튼을 한 단계 낮춘다 */
.filter-panel__apply.is-empty {
	background: var(--paper);
	border-color: var(--line-2);
	color: var(--ink-2);
}

/* 저장 목록 행 아래: 이 공모 마감일만 캘린더에 */
.saved-cal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--s-3);
	padding-bottom: var(--s-3);
	border-bottom: var(--bw) solid var(--line);
	font-size: var(--fs-meta);
}

/* 캘린더 줄이 붙은 행은 행의 밑줄을 캘린더 줄 아래로 옮긴다 */
li:has(> .saved-cal) > .orow {
	padding-bottom: var(--s-2);
	border-bottom: 0;
}

.saved-cal__label {
	color: var(--ink-2);
}

.saved-cal a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	font-weight: 700;
}

/* "104건": 수와 단위는 붙여 쓴다 (앞의 라벨과는 띄운다) */
.toolbar__unit {
	margin-left: -0.3125rem;
}

/* 크롭 숫자의 쉼표: 좁은 숫자 사이에 묻혀 "18.629"로 읽히지 않게 양옆을 조금 띄운다 */
.crop__sep {
	margin: 0 0.06em 0 0.03em;
}

/* 줄 폭보다 긴 한 덩어리(WJ · NBSP 로 붙인 긴 기관명 · 예년 일정)는 어디서든 끊는다 — 폰에서 칸 밖으로 나가지 않게.
   달력 칸 이름(.mcal__item span)도 같은 이유로 anywhere */
.dhead__org,
.series-head__fact dd {
	overflow-wrap: anywhere;
}

/* 가운데 정렬 안내문 · 빈 상태: 마지막 줄에 한 어절만 남지 않게 */
.empty__message,
.empty__hint,
.hint {
	text-wrap: balance;
}

/* 넓은 화면의 필터 곁은 위쪽 '초기화'만 (아래 결과 보기는 JS 없을 때를 위해 남긴다) */
@media (min-width: 1024px) {
	.filter-panel__reset-bottom {
		display: none;
	}
}

/* 마감 달력 ── 이레가 모두 지난 주는 낮게: 1440×900 첫 화면에 이번 주가 들게 */
.mcal tr.is-past-week td {
	height: 3.25rem;
}

/* 앞뒤 달 칸: 지난 날만 흐리게. 다가오는 다음 달 마감(지금 접수 중)은 칸 바탕 · 날짜 · 이름 모두 제 색으로
   ('10월 1일'처럼 달을 붙인 날짜가 달이 바뀐 것을 알린다). 홈에서 들어온 칸(.is-target)의 모브 바탕은 그대로 둔다 */
.mcal td.is-outside.has-items:not(.is-past):not(.is-target) {
	background: var(--surface);
}

.mcal td.is-outside.has-items:not(.is-past) > .mcal__date {
	color: var(--ink-3);
}

/* 미술 기호는 칸 안에서도 칩과 같은 네이비 (연한 모브는 칸 바탕 대비가 모자랐다) */
.mcal__item--art .glyph {
	fill: currentColor;
}

/* 홈 날짜 링크로 들어온 칸: 오늘 칸보다 눈에 띄게 */
.mcal td.is-target {
	background: var(--mauve-soft);
	box-shadow: inset 0 0 0 3px var(--navy);
}

/* 도구줄 버튼 높이를 44px 로 맞춘다 */
.mcal-bar .qchip,
.mcal-bar .mcal-today {
	min-height: 2.75rem;
}

@media (max-width: 599.98px) {
	.mcal-bar {
		column-gap: var(--s-2);
	}

	.mcal-bar .mcal-today {
		padding-inline: var(--s-2);
	}
}

/* 날짜별 목록: 같은 날 마감이라 D-day 는 날짜 제목에 한 번만 두고 행에서는 뺀다.
   '접수 예정'만 행마다 다르니 남기고, 그 행은 칩 폭이 달라도 제목 선이 맞게 칸을 둔다 */
.agenda .mrow {
	grid-template-columns: minmax(0, 1fr);
}

.agenda .mrow__title {
	font-size: 1rem;
	line-height: var(--lh-title);
}

.agenda .mrow .dchip:not(.dchip--upcoming) {
	display: none;
}

.agenda .mrow:has(.dchip--upcoming) {
	grid-template-columns: 4.25rem minmax(0, 1fr);
}

.agenda__date .dchip {
	align-self: center;
}

.agenda .mrow .dchip {
	justify-self: start;
}

/* 접어 둔 지난 날 목록: 날짜 묶음 사이 간격, 흐림은 덜 */
.agenda__past .agenda__day + .agenda__day {
	margin-top: var(--s-6);
}

.agenda__past .agenda__day {
	margin-top: var(--s-4);
}

.agenda__day.is-past {
	opacity: 0.78;
}

/* 마감된 공모의 하단 액션바: 공식 공고 · 다음 모집은 테두리 버튼으로 (본문 버튼 위계와 맞춤) */
.actionbar .btn--secondary {
	border-color: var(--paper);
	background: transparent;
	color: var(--paper);
}

/* 포스터: 금액이 원문에 없을 때 */
.poster__none {
	color: var(--f-fg-2);
	font-weight: 500;
}

/* 조건으로 바로 찾기 타일: 라벨이 두 줄이면 고르게 (한 낱말만 다음 줄에 남지 않게) */
.quick-link__label {
	text-wrap: balance;
}

/* 저장 목록: 넓은 행에서는 캘린더 줄을 제목 열에 맞춘다 */
@container rows (min-width: 46rem) {
	.saved-cal {
		padding-left: calc(8rem + var(--s-5));
	}
}

/* 소개 맺음: 좁은 화면에서 두 버튼을 같은 폭으로 */
@media (max-width: 599.98px) {
	.doc-closing__actions {
		display: grid;
		gap: var(--s-2);
		width: 100%;
	}

	.doc-closing__actions .btn {
		width: 100%;
	}
}

/* 분야 타일 키워드 줄: 두 줄이면 고르게 */
.ftile__kw {
	text-wrap: balance;
}

/* 문학 머리(좁은 화면): 첫 막대가 위 테두리에 붙어 보이지 않게 조금 더 올린다 */
@media (max-width: 599.98px) {
	.face.field--literature .mark--tile {
		top: -2.5rem;
	}
}

/* 지난 날 목록: 흐림은 행(흐린 제목 글자)에만, 묶음 전체에 한 번 더 걸지 않는다 */
.agenda__day.is-past {
	opacity: 1;
}

.agenda__day.is-past .agenda__date b {
	color: var(--ink-2);
}

/* 달력 페이지 빈 상태: 도구줄 선 바로 아래라 위 선은 두지 않는다 */
.calendar-page .empty {
	border-top: 0;
}

/* 좁은 화면 달력: '이번 달로'는 달 제목 줄의 작은 링크로 */
.mcal-nav__today {
	display: none;
}

@media (max-width: 599.98px) {
	.mcal-bar .mcal-today {
		display: none;
	}

	.mcal-nav__today {
		display: inline;
		margin-left: 0.375rem;
		color: var(--ink);
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* 분야 머리: 통계 줄이 없는 짧은 머리(빈 유형)에서도 도형 아래 끝이 머리 아래 끝에 1~2px 차이로 걸쳐
   가는 띠가 생기지 않게 최소 높이를 둔다 (도형 크기 · 위치는 위 .face .mark--tile 과 같은 값에서 계산) */
@media (min-width: 768px) {
	.face {
		min-height: 15.5rem;
	}
}

@media (min-width: 1024px) {
	.face {
		min-height: 19rem;
	}
}

/* 아주 좁은 화면(320px): 한 줄로 두는 요소가 격자 칸을 화면 밖으로 밀지 않게 */
@media (max-width: 767.98px) {
	.hero__grid,
	.hero__controls,
	.error-poster,
	.error-poster__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 검색칸의 기본 최소 폭(약 20글자)이 칸을 넓히지 않게 */
.searchbar__input {
	min-width: 0;
}

/* 원문에 없는 값 ("기재 없음"): 읽는 정보라 흐린 글자 대신 보조 글자 */
.dfacts__none {
	color: var(--ink-2);
}

/* 320px 액션바: 날짜가 "10월..."로 잘리느니 칩만 (날짜는 핵심 정보 맨 위에 있다) */
@media (max-width: 359.98px) {
	.actionbar__date {
		display: none;
	}
}

/* 17. 상호작용 층 (2026-10) ------------------------------------------------------- */
/* 정지 화면은 그대로 두고 hover · 누름 · 초점 · 상태 바뀜에만 움직인다 (docs/04 §9).
   hover 는 정밀한 포인터에서만, 누름은 모든 포인터에서. 거리 · 배율은 토큰이라 줄인 움직임에선 0/1 이 된다.
   물체(타일 · 포스터 · 카드)만 커지고, 조작(버튼 · 칩 · 탭)과 넓은 것(행 · 머리)은 커지지 않는다. 카드 그림자 · will-change 없음 */

/* 전환: 조작은 색 · 테 · 1px 누름을 --dur-1 로 */
.qchip,
.chip,
.hall-tabs__link,
.pager a,
.dtags__tag,
.relax__link,
a.mcal-nav__step,
.search-age__apply,
.filterbar__toggle,
.tool-link,
.searchbar__submit,
.sort__link,
.dialog__close,
.ticker__toggle,
.site-nav__link,
.djump__list a,
.mcal__item {
	transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.ticker__toggle svg,
.dialog__close svg {
	transition: transform var(--dur-1) var(--ease-out);
}

/* 물체: 커지고 줄어드는 건 --dur-2, 테 색은 그대로 */
.ftile,
.quick-link,
.series-card,
.poster,
.award {
	transition: transform var(--dur-2) var(--ease-out), border-color var(--dur) var(--ease);
}

/* 커질 때 이웃 위로 올라서게 (정지 화면은 그대로) */
.quick-link {
	position: relative;
}

.crop__n,
.award__num .crop,
.award__work-big,
.award__figure .mark {
	transition: transform var(--dur-2) var(--ease-out);
}

.poster__art .mark--poster {
	transition: transform var(--dur-mark) var(--ease-out);
}

.type-chip__count {
	transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

/* 쓸리는 밑줄: 카드 · 행 제목. 읽는 방향으로 줄마다 그어지고(--dur-3) 빠르게 걷힌다(--dur-2). 평소엔 폭 0 */
.orow__link,
.mrow__link,
.series-card__link,
.ticker__title,
.poster__link,
.award__link {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% var(--ul, 1px);
	transition: background-size var(--dur-2) var(--ease-out);
}

.poster__link,
.award__link {
	--ul: 2px;
}

.orow__link:focus-visible,
.mrow__link:focus-visible,
.series-card__link:focus-visible,
.poster__link:focus-visible,
.award__link:focus-visible {
	background-size: 100% var(--ul, 1px);
}

/* 번지는 밑줄: 작은 글자 링크. 밑줄은 늘 있고 색만 투명 → 글자색 */
.crumbs a,
.site-footer__links a,
.face__kicker a,
.award-hero__kicker a,
.field-col__types a,
.more,
.mcal__more-toggle {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

/* 작은 행: 목록 행처럼 hover · 누름 바탕 */
.mrows {
	isolation: isolate;
}

.mrow::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--s-2) * -1);
	z-index: -1;
	background: var(--surface);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

/* 저장: 담을 때만 한 번 튀고(놓을 때는 채움만 빠진다), 머리의 저장 수가 부푼다. app.js replay() 가 클래스를 붙였다 뗀다 */
@keyframes save-pop {
	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.28);
	}

	65% {
		transform: scale(0.92);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes count-bump {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.35);
	}

	100% {
		transform: scale(1);
	}
}

.save-btn.is-popping .save-btn__icon {
	animation: save-pop 420ms var(--ease-pop);
}

.count.is-bumped {
	animation: count-bump 360ms var(--ease-pop);
}

/* hover (마우스) */
@media (hover: hover) and (pointer: fine) {
	.ftile:hover,
	.quick-link:hover,
	.series-card:hover {
		z-index: 1;
		transform: scale(var(--hover-scale));
	}

	.type-chip:hover .type-chip__count {
		background: var(--navy);
		color: var(--paper);
	}

	.orow:hover .orow__link,
	.mrow:hover .mrow__link,
	.series-card:hover .series-card__link,
	.ticker__item:hover .ticker__title,
	.poster:hover .poster__link,
	.award:hover .award__link {
		background-size: 100% var(--ul, 1px);
		transition-duration: var(--dur-3);
	}

	.crumbs a:hover,
	.site-footer__links a:hover,
	.face__kicker a:hover,
	.award-hero__kicker a:hover,
	.field-col__types a:hover,
	.more:hover,
	.mcal__more-toggle:hover {
		text-decoration-color: currentColor;
	}

	.mrow:hover::before {
		opacity: 1;
	}

	/* 띠 안 수상작 카드: 머리만 움직이고 글은 그대로. 숫자는 선 위로 조금 올라오고, 도형은 돌고, 「작품」은 뜬다 */
	.award:hover .award__num .crop {
		transform: translateY(calc(0.12em - var(--crop-rise)));
	}

	.award:hover .award__figure .mark {
		transform: rotate(calc(var(--mark-turn) * 0.6)) scale(calc(1 + (var(--hover-scale) - 1) * 2));
	}

	.award:hover .award__work-big {
		transform: translateY(calc(var(--lift) * 1.5));
	}

	.hall-tabs__link[aria-current]:hover {
		border-color: var(--paper);
	}

	.ticker__toggle:hover {
		background: var(--navy-2);
	}

	/* 책갈피 위에서는 행 · 포스터가 아니라 책갈피만 반응한다 */
	.orow:has(.orow__save:hover)::before {
		opacity: 0;
	}

	.orow:has(.orow__save:hover) .orow__link,
	.poster:has(.poster__save:hover) .poster__link {
		background-size: 0% var(--ul, 1px);
	}
}

/* 포스터는 768 이상에서만 커진다 (그 아래는 옆으로 넘기는 띠라 넘친 부분이 잘린다) */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.poster:hover {
		z-index: 1;
		transform: scale(var(--hover-scale));
	}

	.poster:hover .crop__n {
		transform: translateY(calc(0.12em - var(--crop-rise)));
	}

	.poster:hover .mark--poster {
		transform: rotate(calc(var(--mark-turn) * 0.6)) scale(calc(1 + (var(--hover-scale) - 1) * 2));
	}

	.poster:has(.poster__save:hover) {
		transform: none;
	}

	.poster:has(.poster__save:hover) .crop__n {
		transform: translateY(0.12em);
	}

	.poster:has(.poster__save:hover) .mark--poster {
		transform: none;
	}
}

/* 누름: 들어갈 땐 바로(0s), 놓을 땐 --dur-1. 조작은 1px 내려앉고, 물체는 살짝 줄고, 행은 바탕이 가라앉는다 */
.btn:active,
.qchip:active,
.chip:active,
.toggle:active,
.type-chip:active,
.hall-tabs__link:active,
.pager a:active,
a.dtags__tag:active,
.relax__link:active,
a.mcal-nav__step:active,
.search-age__apply:active,
.filterbar__toggle:active,
.tool-link:active,
.searchbar__submit:active,
.sort__link:active,
.video__play:active {
	transform: translateY(var(--press-y));
	transition-duration: 0s;
}

.ftile:active,
.quick-link:active,
.poster:has(.poster__link:active),
.series-card:has(.series-card__link:active),
.award:has(.award__link:active) {
	transform: scale(var(--press-scale));
	transition-duration: 0s;
}

.orow:has(.orow__link:active)::before,
.mrow:has(.mrow__link:active)::before {
	opacity: 1;
	background: var(--sunk);
	transition-duration: 0s;
}

.save-btn:not(.btn):active .save-btn__icon,
.ticker__toggle:active svg,
.dialog__close:active svg {
	transform: scale(var(--press-scale-sm));
	transition-duration: 0s;
}

/* 누르고 있는 동안 티커가 멈춘다 (태블릿 터치) */
.ticker:active .ticker__track {
	animation-play-state: paused;
}

.ticker__toggle:active {
	background: var(--navy-2);
}

/* 터치에서만: hover 색이 없으니 누름에 바탕색을 한 단계 바꾼다 */
@media (hover: none), (pointer: coarse) {
	.btn--secondary:not([aria-pressed="true"]):active,
	.btn--ghost:active,
	.qchip:not([aria-current]):active,
	.toggle:not(:has(:checked)):active,
	.type-chip:active,
	.quick-link:active,
	.relax__link:active,
	.pager a:not([aria-current]):active,
	a.mcal-nav__step:active,
	.tool-link:active,
	.search-age__apply:active,
	.site-nav__link:active,
	.mcal__item:active {
		background: var(--sunk);
	}

	.btn--primary:active,
	.save-btn--lg[aria-pressed="true"]:active,
	.searchbar__submit:active,
	.chip:active,
	.qchip[aria-current]:active,
	.filterbar__toggle.is-active:active,
	.toggle:has(:checked):active,
	.ticker__item:active {
		background: var(--navy-2);
	}

	.btn--accent:active {
		background: var(--mauve-deep);
		border-color: var(--mauve-deep);
	}

	a.dtags__tag:active {
		background: var(--navy);
		color: var(--paper);
	}

	.band .btn--secondary:active,
	.band .btn--ghost:active,
	.field--music .btn--secondary:active,
	.field--music .btn--ghost:active,
	.award-hall .btn--secondary:active,
	.award-hall .btn--ghost:active,
	.hall-head .btn--secondary:active,
	.hall-head .btn--ghost:active,
	.doc-closing .btn--secondary:active,
	.doc-closing .btn--ghost:active,
	.actionbar .btn--secondary:active,
	.actionbar .btn--ghost:active,
	.hall-tabs__link:not([aria-current]):active {
		background: rgba(238, 238, 232, 0.12);
	}
}

/* 초점: 가로로 넘기는 띠 안에서는 링을 안쪽에 그려 잘리지 않게 */
@media (max-width: 1023.98px) {
	.site-nav__link:focus-visible {
		outline-offset: -2px;
	}
}

.qchip:focus-visible,
.djump__list a:focus-visible {
	outline-offset: -2px;
}

/* 고른 칩은 네이비라 안쪽 링을 모브로 */
.qchip[aria-current]:focus-visible {
	outline-color: var(--mauve);
}

.ticker__item:focus-visible {
	outline-offset: -3px;
}

/* 띠 안 수상작 카드: 링크 자체 대신 카드 전체를 두른다 */
.award__link:focus-visible {
	outline: none;
}

.award__link:focus-visible::after {
	outline: 2px solid var(--focus);
	outline-offset: 4px;
}

/* 고대비: 배경 그림 밑줄 대신 글자 밑줄 */
@media (forced-colors: active) {
	.orow__link:focus-visible,
	.mrow__link:focus-visible,
	.series-card__link:focus-visible,
	.poster__link:focus-visible,
	.award__link:focus-visible {
		text-decoration: underline;
	}
}

@media (forced-colors: active) and (hover: hover) and (pointer: fine) {
	.orow:hover .orow__link,
	.mrow:hover .mrow__link,
	.series-card:hover .series-card__link,
	.ticker__item:hover .ticker__title,
	.poster:hover .poster__link,
	.award:hover .award__link {
		text-decoration: underline;
	}
}

/* 17-b. 페이지 사이 (View Transitions, 2026-10) ------------------------------------------ */
/* 같은 출처 링크 이동에만, 줄인 움직임이 아닐 때만 (@view-transition 이 media 안). 뒤로 · 앞으로 · 새로 고침은 boot.js 가 건너뛴다.
   이름은 전환 중에만 생긴다: 옛 문서는 app.js pageswap 이, 새 문서는 boot.js pagereveal 이 html 에 vt-* 를 단다.
   평소 화면에는 이름이 0개라 렌더링 · 정지 화면이 그대로다. 이름 하나에 한 화면 하나 (숨은 쪽에는 폭별로 주지 않는다) */
@keyframes vt-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes vt-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes vt-rise-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes vt-out-l {
	to {
		opacity: 0;
		transform: translateX(-24px);
	}
}

@keyframes vt-out-r {
	to {
		opacity: 0;
		transform: translateX(24px);
	}
}

@keyframes vt-in-l {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}
}

@keyframes vt-in-r {
	from {
		opacity: 0;
		transform: translateX(24px);
	}
}

@keyframes vt-out-up {
	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@keyframes vt-in-down {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	/* 화면 전체: 옛 화면은 --dur-1 로 사라지고 새 화면이 8px 아래에서 --dur-2 로 */
	::view-transition-old(root) {
		animation: vt-fade-out var(--dur-1) var(--ease-in) both;
	}

	::view-transition-new(root) {
		animation: vt-rise-in var(--dur-2) var(--ease-out) both;
	}

	/* 1024px~ 머리가 붙는 폭: 머리는 제자리에 새 그림만 (저장 수 · 현재 메뉴가 바뀌어도 깜박이지 않게) */
	@media (min-width: 1024px) {
		html.vt-on .site-header {
			view-transition-name: site-header;
		}

		::view-transition-group(site-header),
		::view-transition-new(site-header) {
			animation: none;
		}

		::view-transition-old(site-header) {
			display: none;
		}
	}

	/* 좁은 폭도 머리가 화면 안이면(vt-nav) 제자리 — 로고 · 아이콘 · 메뉴가 두 겹으로 떠오르지 않게 */
	html.vt-nav .site-header {
		view-transition-name: site-header;
	}

	::view-transition-group(site-header),
	::view-transition-new(site-header) {
		animation: none;
	}

	::view-transition-old(site-header) {
		display: none;
	}

	/* 관리자 화면(같은 app.css)은 전환 없이 바로 */
	html:has(.adm-header)::view-transition-group(*),
	html:has(.adm-header)::view-transition-old(*),
	html:has(.adm-header)::view-transition-new(*) {
		animation: none;
	}

	/* 누른 공모 행 · 포스터 · 작은 행 · 달력 항목 → 상세 머리 상자 (화면 위 2/3 안에서 누른 것만, app.js) */
	html.vt-on .vt-src,
	html.vt-dst .dhead {
		view-transition-name: opp;
	}

	::view-transition-group(opp) {
		animation-duration: var(--dur-3);
		animation-timing-function: var(--ease-out);
	}

	::view-transition-old(opp),
	::view-transition-new(opp) {
		height: 100%;
		object-fit: none;
		object-position: left top;
	}

	::view-transition-old(opp) {
		animation: vt-fade-out var(--dur-1) var(--ease-in) both;
	}

	::view-transition-new(opp) {
		animation: vt-fade-in var(--dur-2) var(--ease-out) 80ms both;
	}

	/* 폰 · 태블릿: 누름이 먹지 않는 창을 짧게 (320ms 안) */
	@media (max-width: 1023.98px) {
		::view-transition-group(opp) {
			animation-duration: var(--dur-2);
		}

		::view-transition-new(opp) {
			animation-delay: 0s;
		}
	}

	/* 메뉴 막대 · 정렬 ■ · 수상작 탭: 옛 자리에서 새 자리로 미끄러진다 (머리가 화면 안일 때만) */
	html.vt-nav .site-nav__link[aria-current] .site-nav__bar {
		view-transition-name: nav-bar;
	}

	html.vt-nav .sort__mark {
		view-transition-name: sort-mark;
	}

	html.vt-nav .hall-tabs__link[aria-current] {
		view-transition-name: hall-tab;
	}

	::view-transition-group(nav-bar),
	::view-transition-group(sort-mark),
	::view-transition-group(hall-tab) {
		animation-duration: var(--dur-3);
		animation-timing-function: var(--ease-out);
	}

	::view-transition-old(hall-tab),
	::view-transition-new(hall-tab) {
		height: 100%;
		object-fit: none;
		object-position: center;
	}

	/* 공모 찾기 → 공모 찾기 (조건 · 정렬 · 쪽): 화면은 그대로, 결과만 바뀐다 (곁 · 머리는 움직이지 않음) */
	html.vt-filter .search-results {
		view-transition-name: results;
	}

	html.vt-filter::view-transition-old(root),
	html.vt-filter::view-transition-new(root),
	html.vt-cal::view-transition-old(root),
	html.vt-cal::view-transition-new(root),
	::view-transition-group(results),
	::view-transition-group(cal-body),
	::view-transition-group(cal-title) {
		animation: none;
	}

	::view-transition-old(results),
	::view-transition-new(results),
	::view-transition-old(cal-body),
	::view-transition-new(cal-body),
	::view-transition-old(cal-title),
	::view-transition-new(cal-title) {
		height: 100%;
		object-fit: none;
		object-position: left top;
	}

	::view-transition-old(results) {
		animation: vt-fade-out var(--dur-1) var(--ease-in) both;
	}

	::view-transition-new(results) {
		animation: vt-fade-in var(--dur-2) var(--ease-out) both;
	}

	/* 마감 달력 달 넘김: 넘어가는 쪽으로 24px, 달 제목은 위아래 8px */
	@media (min-width: 768px) {
		html.vt-cal .mcal {
			view-transition-name: cal-body;
		}
	}

	@media (max-width: 767.98px) {
		html.vt-cal .agenda {
			view-transition-name: cal-body;
		}
	}

	html.vt-cal .mcal-nav__title {
		view-transition-name: cal-title;
	}

	::view-transition-old(cal-body),
	::view-transition-old(cal-title) {
		animation: vt-fade-out var(--dur-1) var(--ease-in) both;
	}

	::view-transition-new(cal-body),
	::view-transition-new(cal-title) {
		animation: vt-fade-in var(--dur-2) var(--ease-out) both;
	}

	html.vt-next::view-transition-old(cal-body),
	html.vt-next::view-transition-old(results) {
		animation-name: vt-out-l;
	}

	html.vt-next::view-transition-new(cal-body),
	html.vt-next::view-transition-new(results) {
		animation-name: vt-in-r;
	}

	html.vt-prev::view-transition-old(cal-body),
	html.vt-prev::view-transition-old(results) {
		animation-name: vt-out-r;
	}

	html.vt-prev::view-transition-new(cal-body),
	html.vt-prev::view-transition-new(results) {
		animation-name: vt-in-l;
	}

	html.vt-cal.vt-next::view-transition-old(cal-title),
	html.vt-cal.vt-prev::view-transition-old(cal-title) {
		animation-name: vt-out-up;
	}

	html.vt-cal.vt-next::view-transition-new(cal-title),
	html.vt-cal.vt-prev::view-transition-new(cal-title) {
		animation-name: vt-in-down;
	}

	/* /start 의 'N건' → 결과 수, 머리 제목 → 결과 머리 제목 */
	html.vt-match .start-count__num,
	html.vt-match .search-page .toolbar__num {
		view-transition-name: match-n;
	}

	::view-transition-group(match-n) {
		animation-duration: var(--dur-3);
		animation-timing-function: var(--ease-out);
	}

	::view-transition-old(match-n),
	::view-transition-new(match-n) {
		height: 100%;
		object-fit: none;
		object-position: left center;
	}

	/* 결과 수의 첫 그림 올라옴(num-rise)과 겹치지 않게 */
	html.vt-match .search-page .toolbar__num {
		animation: none;
	}
}

/* 17-c. 상태 · 첫 그림 움직임 (delight, 2026-10) ---------------------------------------------- */
/* 모두 prefers-reduced-motion: no-preference 안. 첫 그림 연출은 html:not(.seen)(이 탭에서 처음 연 주소, boot.js) 에서만 한 번.
   글자 · 행 · 버튼은 움직이지 않고 장식 · 숫자만 transform · clip-path 로. 끝나면 원래 cascade 로 돌아간다(backwards) */

/* 크롭 숫자 올라옴: 3px 선 아래에서 (포스터 · 상세 D-숫자 · 오류 큰 수 · 수상작 큰 수) */
@keyframes crop-up {
	from {
		transform: translateY(0.55em);
	}
}

/* 결과 수 · 히어로 수: 제 아래 끝을 기준선으로 잘린 채 올라온다 */
@keyframes num-rise {
	from {
		transform: translateY(0.5em);
		clip-path: inset(0 0 0.5em 0);
	}

	to {
		transform: none;
		clip-path: inset(0 0 0 0);
	}
}

/* 도장: 마감 띠 칸 · 토스트 분야 도형 */
@keyframes stamp-in {
	from {
		transform: scale(0.85);
	}
}

@keyframes stamp {
	from {
		transform: scale(1.3);
	}
}

/* 분야 동사: 음악은 돈다 · 미술은 맞춰진다 · 문학은 써진다 */
@keyframes verb-turn {
	from {
		transform: rotate(-90deg);
	}
}

@keyframes verb-snap {
	from {
		transform: translate(-6%, -6%);
	}
}

@keyframes verb-write {
	from {
		transform: scaleX(0.4);
	}
}

/* 빈 상태 세 도형 도미노 */
@keyframes hop {
	40% {
		transform: translateY(-6px);
	}
}

/* 저장: 책갈피 안이 아래에서 차오른다 (save-pop 과 같은 길이로 끝나 replay 가 한꺼번에 뗀다) */
@keyframes ink-up {
	0% {
		clip-path: inset(100% 0 0 0);
	}

	48%,
	100% {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes sheet-out {
	to {
		opacity: 0;
		transform: translateY(24px);
	}
}

/* 달력 도착 칸: 모브가 한 번 번진 뒤 원래 바탕으로 */
@keyframes land {
	from {
		background-color: var(--mauve);
	}
}

@keyframes land-soft {
	from {
		background-color: var(--mauve-soft);
	}

	to {
		background-color: transparent;
	}
}

/* 정지 화면용 바탕: 마감 띠 칸의 네이비 면을 ::before 로 떼어 둔다 (도장은 면만 찍히고 수는 그대로) */
.week__date {
	position: relative;
	isolation: isolate;
}

.week__day.is-hit .week__date::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--navy);
}

/* 저장 잉크: 평소엔 보이지 않는다 (채움은 원래대로 아이콘 path) */
.save-btn__ink {
	fill: none;
	stroke: none;
}

/* 토스트 남은 시간 막대 · 분야 도형 */
.toast__time {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--mauve);
	transform-origin: left;
	pointer-events: none;
}

.toast__glyph {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	margin-right: calc(var(--s-2) - var(--s-4));
	fill: var(--mauve);
}

/* 시트 '결과 보기'의 건수 */
.count-n {
	display: inline-block;
	font-variant-numeric: tabular-nums;
}

.count-n.is-bump {
	animation: start-bump 220ms var(--ease-pop);
}

/* 첫 저장 창의 '앱에서 마감 알림 받기'(링크) */
a.dialog__notify {
	display: inline-flex;
	align-items: center;
	color: var(--ink-2);
}

/* 상세 바로가기: 지금 칸 막대 하나 (app.js initJump). 칸마다의 ::after 는 hover 미리보기만 */
.djump__list {
	position: relative;
}

.djump__ink {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: var(--ink-w, 0);
	height: 2px;
	background: var(--navy);
	transform: translateX(var(--ink-x, 0));
	pointer-events: none;
}

.djump__ink.is-ready {
	transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out);
}

.djump__list.has-ink a[aria-current]::after {
	transform: scaleX(0);
	transition: none;
}

/* /saved '최근 본 공모': 기록이 있으면(boot.js html.has-recent · --recent-n) 첫 그림부터 자리를 잡는다 (밀림 방지).
   행 높이는 가장 낮은 값(넓은 목록 137px)으로 잡아 자리가 실제보다 커지지 않게 한다 */
html.has-recent .saved-recent[hidden] {
	display: block;
	visibility: hidden;
	min-height: calc(2.5rem + var(--recent-n, 1) * 8.4375rem);
}

/* 홈 티커: 멈춘 채로 둔 것을 기억 (boot.js) */
html.ticker-paused .ticker__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.toast__time {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* 크롭 숫자 · 큰 수 (M08) */
	html:not(.seen) :is(.poster__big, .dwhen__big, .error-poster__figure) > .crop__n,
	html:not(.seen) .afig__value > .crop {
		animation: crop-up var(--dur-mark) var(--ease-out) 60ms backwards;
	}

	.hero__stat-num {
		display: inline-block;
	}

	html:not(.seen) .toolbar__num,
	html:not(.seen) .hero__stat-num {
		animation: num-rise var(--dur-3) var(--ease-out) backwards;
	}

	/* 최근 본 공모 (M20): JS 가 넣은 행만 살짝 나타난다 */
	.saved-recent[data-loaded] .orow {
		animation: vt-fade-in var(--dur-2) var(--ease-out) both;
	}

	/* 저장 (M10): 담을 때 겉 채움 대신 잉크가 아래에서 차오른다 */
	.save-btn.is-popping[aria-pressed="true"] .save-btn__icon {
		fill: none;
	}

	.save-btn.is-popping[aria-pressed="true"] .save-btn__ink {
		fill: currentColor;
		animation: ink-up 420ms var(--ease-out) both;
	}

	/* 토스트 (M11) */
	.toast__glyph {
		animation: stamp 220ms var(--ease-pop) both;
	}

	.toast.is-swap .toast__text {
		animation: vt-fade-in var(--dur-1) var(--ease-out);
	}

	/* 첫 저장 창 (M12): 아래 16px 에서 올라오고, 닫힐 땐 한 단계 짧게 */
	.dialog {
		transition: opacity var(--dur-2) var(--ease-in), transform var(--dur-2) var(--ease-in),
			overlay var(--dur-2) var(--ease-in) allow-discrete, display var(--dur-2) var(--ease-in) allow-discrete;
	}

	.dialog[open] {
		transition-duration: var(--dur-3);
		transition-timing-function: var(--ease-out);
	}

	.dialog:not([open]) {
		opacity: 0;
		transform: translateY(16px);
	}

	@starting-style {
		.dialog[open] {
			opacity: 0;
			transform: translateY(16px);
		}
	}

	.dialog::backdrop {
		transition: opacity var(--dur-2) var(--ease-out), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
	}

	.dialog:not([open])::backdrop {
		opacity: 0;
	}

	@starting-style {
		.dialog[open]::backdrop {
			opacity: 0;
		}
	}

	/* 접힌 칸 (M14): 사용자가 눌렀을 때만 (app.js 가 [data-anim] 을 단다). 접힘은 이 전환, 펼침은 app.js 가 Web Animations 로
	   (Chrome 은 닫힌 칸에서 여는 높이 전환이 바로 끝난다). ::details-content 를 모르면 바로 열린다 */
	details[data-anim] {
		interpolate-size: allow-keywords;
	}

	details[data-anim]::details-content {
		height: 0;
		overflow: clip;
		transition: height var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
	}

	details[data-anim][open]::details-content {
		height: auto;
	}

	.mcal__more[open] .mcal__pop {
		transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
	}

	@starting-style {
		.mcal__more[open] .mcal__pop {
			opacity: 0;
			transform: translateY(-4px);
		}
	}

	/* 마감 띠 도장 · 달력 도착 (M16) */
	html:not(.seen) .week__day.is-hit .week__date::before {
		animation: stamp-in 220ms var(--ease-pop) backwards;
	}

	html:not(.seen) .week__day:nth-child(2) .week__date::before { animation-delay: 30ms; }
	html:not(.seen) .week__day:nth-child(3) .week__date::before { animation-delay: 60ms; }
	html:not(.seen) .week__day:nth-child(4) .week__date::before { animation-delay: 90ms; }
	html:not(.seen) .week__day:nth-child(5) .week__date::before { animation-delay: 120ms; }
	html:not(.seen) .week__day:nth-child(6) .week__date::before { animation-delay: 150ms; }
	html:not(.seen) .week__day:nth-child(7) .week__date::before { animation-delay: 180ms; }
	html:not(.seen) .week__day:nth-child(8) .week__date::before { animation-delay: 210ms; }

	.mcal td.is-target {
		animation: land 1200ms var(--ease-out) both;
	}

	.agenda [id^="d-"]:target {
		animation: land-soft 1200ms var(--ease-out) both;
	}

	/* 빈 상태 세 도형 도미노 (M17). svg 기본 overflow:hidden 에 잘리지 않게 */
	.empty .mark--empty {
		overflow: visible;
	}

	html:not(.seen) .empty .mark--empty :is(.mk-music, .mk-art, .mk-literature) {
		transform-box: fill-box;
		animation: hop 420ms var(--ease-pop) backwards;
	}

	html:not(.seen) .empty .mark--empty .mk-art { animation-delay: 90ms; }
	html:not(.seen) .empty .mark--empty .mk-literature { animation-delay: 180ms; }

	/* 분야 동사 (M09): 도형 부품만 */
	.ftile .mark--tile :is(.mk-dash, .mk-line, .mk-fill, .mk-accent) {
		transform-box: fill-box;
		transform-origin: center;
	}

	.ftile.field--literature .mark--tile :is(.mk-fill, .mk-accent) {
		transform-origin: left center;
	}

	/* 차례: 문학 막대는 50ms 씩(--verb-delay), 404 타일은 80ms 씩(--tile-delay) */
	.ftile.field--literature .mark--tile :nth-child(3) { --verb-delay: 50ms; }
	.ftile.field--literature .mark--tile :nth-child(4) { --verb-delay: 100ms; }
	.ftile.field--literature .mark--tile :nth-child(5) { --verb-delay: 150ms; }
	.ftile.field--literature .mark--tile :nth-child(6) { --verb-delay: 200ms; }
	.error-tiles > :nth-child(2) .mark--tile { --tile-delay: 80ms; }
	.error-tiles > :nth-child(3) .mark--tile { --tile-delay: 160ms; }

	.start-field.is-picked.field--music .mark--tile .mk-dash,
	html:not(.seen) .error-page .ftile.field--music .mark--tile .mk-dash {
		animation: verb-turn var(--dur-mark) var(--ease-out) var(--tile-delay, 0ms) backwards;
	}

	.start-field.is-picked.field--art .mark--tile .mk-line,
	html:not(.seen) .error-page .ftile.field--art .mark--tile .mk-line {
		animation: verb-snap var(--dur-mark) var(--ease-out) var(--tile-delay, 0ms) backwards;
	}

	.start-field.is-picked.field--literature .mark--tile :is(.mk-fill, .mk-accent),
	html:not(.seen) .error-page .ftile.field--literature .mark--tile :is(.mk-fill, .mk-accent) {
		animation: verb-write var(--dur-mark) var(--ease-out) calc(var(--tile-delay, 0ms) + var(--verb-delay, 0ms)) backwards;
	}
}

/* 분야 동사 hover (마우스) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.ftile.field--music:hover .mark--tile .mk-dash {
		animation: verb-turn var(--dur-mark) var(--ease-out);
	}

	.ftile.field--art:hover .mark--tile .mk-line {
		animation: verb-snap var(--dur-mark) var(--ease-out);
	}

	.ftile.field--literature:hover .mark--tile :is(.mk-fill, .mk-accent) {
		animation: verb-write var(--dur-mark) var(--ease-out) var(--verb-delay, 0ms) backwards;
	}
}

/* 홈 관심 분야 상자 (M21): JS 가 보이게 한 상자만, 이 탭에서 처음 연 홈에서 한 번 */
@media (prefers-reduced-motion: no-preference) {
	html:not(.seen) .prefs:not([hidden]) {
		animation: vt-rise-in var(--dur-3) var(--ease-out) both;
	}
}

/* 폰 머리 검색 줄 (M22): 머리 아래 8px 에서 내려앉고, 🔍 → ✕ 는 돌며 바뀐다 */
@keyframes icon-turn {
	from {
		opacity: 0;
		transform: rotate(-90deg);
	}
}

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
	.site-header.is-searching .header-search {
		transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
	}

	@starting-style {
		.site-header.is-searching .header-search {
			opacity: 0;
			transform: translateY(-8px);
		}
	}

	.site-header.is-searching .tool-link--search .tool-link__close {
		animation: icon-turn var(--dur-1) var(--ease-out);
	}
}

/* 필터 시트 뒤 배경은 summary::before(fixed). 누름 transform 이 summary 에 걸리면 배경이 summary 상자로 붙어 버려
   누른 손을 뗀 곳이 body 가 되고 닫히지 않는다 → 시트가 열린 동안에는 누름 움직임을 끈다 */
@media (max-width: 1023.98px) {
	.filter-panel[open] > .filterbar__toggle:active {
		transform: none;
	}
}

/* 필터 시트 닫힘 · 뒤 배경 (M13) */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
	.filter-panel[open] > .filterbar__toggle::before {
		animation: vt-fade-in var(--dur-2) var(--ease-out) both;
	}

	.filter-panel[open].is-closing > .filter-panel__body {
		animation: sheet-out var(--dur-2) var(--ease-in) both;
	}

	.filter-panel[open].is-closing > .filterbar__toggle::before {
		animation: vt-fade-out var(--dur-2) var(--ease-in) both;
	}
}

/* 18. 모바일 정리 (2026-10): 767.98px 이하만 ------------------------------------------ */
/* 넓은 화면의 정지 모습은 그대로. 폰에서 되풀이(티커 · 같은 말 하는 빵부스러기 · 분야 표시)와 상자 속 상자를 덜어낸다.
   :has() 규칙은 지원 안 하는 브라우저가 목록 전체를 버리지 않게 따로 둔다 */

/* 메뉴: 600 아래에서는 짧은 이름 (보이는 글자 = 읽는 이름) */
.site-nav__short {
	display: none;
}

@media (max-width: 599.98px) {
	.site-nav__full,
	.site-nav__sep {
		display: none;
	}

	.site-nav__short {
		display: inline;
	}

	/* 일곱 항목이 한 줄에 고르게: 첫 글자는 로고와 같은 여백에 */
	.site-nav__list {
		min-width: 100%;
		justify-content: space-between;
		gap: 0;
		padding-inline: calc(var(--gutter) - 0.375rem);
	}

	.site-nav__link {
		padding-inline: 0.375rem;
		font-size: var(--fs-meta);
	}

	.site-nav__bar {
		left: 0.375rem;
		right: 0.375rem;
	}
}

@media (max-width: 374.98px) {
	.site-nav__link {
		font-size: var(--fs-sm);
	}
}

/* 메뉴 흐림: 그쪽으로 더 있을 때만 (app.js initNav 가 has-more · has-back 을 단다) */
@media (max-width: 767.98px) {
	.site-nav,
	.site-nav.has-back {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.site-nav.has-more {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
	}

	.site-nav.has-back {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem);
		mask-image: linear-gradient(90deg, transparent, #000 1.5rem);
	}

	.site-nav.has-back.has-more {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
	}
}

/* JS 없이 320px: 한 줄에 안 들어가니 오른쪽 흐림은 늘 */
@media (max-width: 359.98px) {
	html:not(.js) .site-nav {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
	}
}

@media (max-width: 767.98px) {
	/* 홈 티커: 바로 아래 '7일 안에 마감'과 같은 내용이라 폰에서는 뺀다 */
	.home > .ticker {
		display: none;
	}
}

/* 분야 머리: 낮게. 도형도 줄이고, 숫자 줄은 한 줄에 */
@media (max-width: 767.98px) {
	.face {
		margin-top: var(--gutter);
		padding: var(--s-5) var(--gutter) var(--gutter);
	}

	.face__title--xl {
		font-size: clamp(2.5rem, 12vw, 3.25rem);
	}

	.face__stats {
		gap: var(--s-1) var(--s-4);
		margin-top: var(--s-4);
		padding-top: var(--s-3);
	}

	.face__stat b {
		font-size: 1.375rem;
	}

	.face__actions {
		margin-top: var(--s-4);
	}

	.face .mark--tile {
		top: -2.5rem;
		right: -3.25rem;
		width: 8rem;
		height: 8rem;
	}

	.face.field--literature .mark--tile {
		top: -2rem;
	}

	/* 유형 칩: 건수는 상자 없이 글자만 (상자 속 상자를 덜어낸다) */
	.type-chips__list {
		gap: 0.375rem;
	}

	.type-chip {
		gap: 0.375rem;
		padding: 0 0.875rem;
	}

	.type-chip__count {
		min-width: 0;
		height: auto;
		padding: 0;
		background: none;
		color: var(--ink-2);
		font-size: var(--fs-meta);
		font-weight: 500;
	}
}

/* 빵부스러기: '홈 > 여기' 뿐이면 메뉴 밑줄 · 제목과 같은 말이라 뺀다 (셋 이상은 그대로) */
@media (max-width: 767.98px) {
	.crumbs:not(:has(.crumbs__item:nth-child(3))) {
		display: none;
	}

	/* 빵부스러기가 빠진 /awards 머리: 첫 줄 위 여백이 네이비 밖으로 새지 않게 */
	.hall-head {
		display: flow-root;
	}
}

/* 홈을 짧게: 새 공모 3건 · 수상작 이야기 2편 (나머지는 '전체 보기') */
@media (max-width: 767.98px) {
	.home-fresh .rows > li:nth-child(n+4),
	.home-awards .award-list > li:nth-child(n+3) {
		display: none;
	}
}

/* 19. 사용성 고침 (2026-10) ------------------------------------------------------- */
/* 넓은 화면의 정지 모습은 그대로. 붙는 줄에 가리는 곳 · 작은 누름 자리 · 폰 검색 */

/* 붙는 줄: 공모 상세 끝의 푸터 마지막 줄이 액션바에 가리지 않게, Tab 으로 옮긴 초점이 바로가기 줄 · 액션바 · 필터 줄 밑에 숨지 않게.
   바로가기로 간 제목은 바로가기 줄 아래 24px (폰 68px · 넓은 화면 132px) — 여백을 제목 대신 html 이 갖는다 */
@media (max-width: 1023.98px) {
	body:has(.actionbar) .site-footer {
		padding-bottom: calc(var(--s-6) + 3.75rem + env(safe-area-inset-bottom));
	}

	html:has(.djump) {
		scroll-padding-top: 4.25rem;
		scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
	}

	.dsec__title {
		scroll-margin-top: 0;
	}

	.search-page .orow,
	.search-page .orow a,
	.search-page .pager a {
		scroll-margin-top: 4.5rem;
	}
}

@media (min-width: 1024px) {
	html:has(.djump) {
		scroll-padding-top: calc(var(--header-h) + 4.25rem);
	}

	.dsec__title {
		scroll-margin-top: 0;
	}
}

/* 바로가기로 옮긴 제목 초점: 눌러서 간 것엔 테두리 없이, 키보드로 간 것만 */
.dsec__title:focus:not(:focus-visible) {
	outline: none;
}

.dsec__title:focus-visible {
	outline-offset: 4px;
}

/* 보이지 않는 누름 자리: 크기 · 간격은 그대로, 위아래 빈틈으로만 44px 까지 (이웃과 겹치지 않게 간격의 반씩) */
.chip,
.applied__clear,
.dtags__tag,
.hall-tabs__link,
.qchip,
.filterbar__toggle,
.sort__link,
.toast__action,
.dsheet__share,
.dsheet__calendar-links a {
	position: relative;
}

.chip::after,
.applied__clear::after,
.dtags__tag::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

/* 이 공모 하나뿐인 태그는 링크가 아닌 글자 (TagLink): 누르는 알약처럼 보이지 않게 바탕 대신 가는 테 · 보통 굵기, 누름 자리도 없다 */
.dtags__tag--plain {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--line-2);
	font-weight: 500;
}

.dtags__tag--plain::after {
	content: none;
}

.hall-tabs__link::after,
.qchip::after,
.filterbar__toggle::after,
.sort__link::after {
	content: "";
	position: absolute;
	inset: -2px 0;
}

.toast__action::after {
	content: "";
	position: absolute;
	inset: -4px;
}

.dsheet__share::after,
.dsheet__calendar-links a::after {
	content: "";
	position: absolute;
	inset: -10px 0;
}

/* 필터 칩(토글)은 시트로 쓰는 1024px 미만만: 넓은 화면에서는 ::after 하나로도 글자 다듬기(안티에일리어싱)가 달라져 정지 모습이 바뀐다 */
@media (max-width: 1023.98px) {
	.toggle--sm::after {
		content: "";
		position: absolute;
		inset: -4px 0;
	}

	.toggle:not(.toggle--sm)::after {
		content: "";
		position: absolute;
		inset: -2px 0;
	}
}

/* 옆으로 넘기는 칩 줄이 넓힌 자리를 자르지 않게 (안팎이 상쇄돼 자리는 그대로) */
.qchips {
	padding-block: 2px;
	margin-block: -2px;
}

/* 폰 머리 🔍: JS 가 있으면 그 자리에서 검색 줄을 연다 (app.js initHeaderSearch). 닫기 ✕ 는 열렸을 때만 */
.tool-link__close {
	display: none;
}

@media (max-width: 767.98px) {
	.site-header.is-searching .header-search {
		position: absolute;
		top: var(--header-h);
		left: 0;
		right: 0;
		z-index: 61;
		display: flex;
		align-items: center;
		padding: var(--s-1) var(--gutter) var(--s-2);
		background: var(--paper);
		border-bottom: var(--bw) solid var(--line);
	}

	.site-header.is-searching .header-search__icon {
		position: absolute;
		left: calc(var(--gutter) + var(--s-3));
		width: 1.125rem;
		height: 1.125rem;
		fill: none;
		stroke: var(--ink-2);
		stroke-width: 2;
		pointer-events: none;
	}

	/* 16px 글자: iOS 가 확대하지 않는다 */
	.site-header.is-searching .header-search__input {
		width: 100%;
		height: 2.75rem;
		padding: 0 var(--s-3) 0 2.375rem;
		background: var(--surface);
		border: var(--bw) solid var(--line-input);
		border-radius: 0;
		font-size: 1rem;
		-webkit-appearance: none;
		appearance: none;
	}

	.site-header.is-searching .header-search__input::placeholder {
		color: var(--ink-3);
	}

	.site-header.is-searching .header-search__input:focus {
		outline: none;
		border-color: var(--navy);
		box-shadow: inset 0 0 0 1px var(--navy);
	}

	.site-header.is-searching .tool-link--search .tool-link__icon:not(.tool-link__close) {
		display: none;
	}

	.site-header.is-searching .tool-link--search .tool-link__close {
		display: block;
	}
}

/* 19-b. 사용성 (delight WP2, 2026-10) ------------------------------------------------
   0건 · 결과가 적을 때 · 조용한 유형 칩 · 맨 위로 · 저장 목록 마감 묶음 · 캘린더 버튼 · 달력 · 수상작 다음 모집 · 기다리기 */

/* 0건: '혹시 “…”를 찾으셨나요?' · 예년 일정 길은 조건 빼기보다 먼저, 테를 진하게 */
.relax--hint .relax__link {
	border-color: var(--navy);
}

.relax--hint + .relax {
	margin-top: 0;
}

/* 결과가 1~2건: 조금 넓혀 보면 */
.widen .relax {
	width: min(100%, 28rem);
	margin-top: 0;
}

.widen__closed {
	margin-top: var(--s-3);
	font-size: var(--fs-body-sm);
	font-weight: 600;
}

.widen__title {
	margin: var(--s-6) 0 var(--s-3);
	font-size: var(--fs-body);
	font-weight: 800;
	letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
	.widen .series-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* '지금 모집 없음' 유형 (/start 2단계 · 필터 유형): 글자 줄 → 1px 테 칩 (누름 자리 44px). 고르면 칩과 같은 네이비 */
.start-quiet {
	gap: var(--s-2);
}

.start-quiet__label {
	flex-basis: 100%;
}

.start-quiet__list {
	gap: var(--s-2);
}

.start-quiet__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	margin: 0;
	padding: 0 var(--s-3);
	border: 1px solid var(--line-2);
	color: var(--ink-2);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.start-quiet__item::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

@media (hover: hover) and (pointer: fine) {
	.start-quiet__item:hover {
		border-color: var(--navy);
		color: var(--ink);
	}
}

.start-quiet__item:has(:checked) {
	padding: 0 var(--s-3);
	background: var(--navy);
	border-color: var(--navy);
	color: var(--paper);
}

/* 고른 조용한 유형의 예년 일정 안내: JS 가 고른 것만 푼다 (JS 가 없으면 모두 보인다) */
.start-quiet__note {
	flex-basis: 100%;
	color: var(--ink);
	font-size: var(--fs-body-sm);
	letter-spacing: 0;
}

html.js .start-quiet__note:not(.is-shown) {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	html.js .start-quiet__note.is-shown {
		animation: quiet-note-in var(--dur-2) var(--ease-out);
	}
}

@keyframes quiet-note-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* 필터 곁 · 시트의 0건 유형 줄 */
.fquiet {
	margin-top: var(--s-3);
}

.search-types__choices + .fquiet {
	margin-top: var(--s-2);
}

/* 맨 위로 (JS 가 만드는 층, 1024px 미만): 오른쪽 아래 44px 사각 — 종이 바탕 · 네이비 테, 그림자 없음 */
.to-top {
	position: fixed;
	right: var(--gutter);
	bottom: calc(env(safe-area-inset-bottom) + 16px);
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--paper);
	border: var(--bw) solid var(--navy);
	color: var(--navy);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity var(--dur-2) var(--ease-in), transform var(--dur-2) var(--ease-in), visibility 0s linear var(--dur-2),
		bottom var(--dur-2) var(--ease-out);
}

.to-top svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: square;
}

.to-top.is-shown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s,
		bottom var(--dur-2) var(--ease-out);
}

.to-top:active {
	transform: scale(var(--press-scale-sm));
}

@media (hover: hover) and (pointer: fine) {
	.to-top:hover {
		background: var(--navy);
		color: var(--paper);
	}
}

/* 액션바 위로 비켜서고, 토스트 · 필터 시트 · 첫 저장 창이 떠 있으면 숨는다. 1024px 이상에는 없다 */
html:has(.actionbar.is-visible) .to-top {
	bottom: calc(2.75rem + var(--s-2) * 2 + 12px + env(safe-area-inset-bottom));
}

html:has(.toast.is-visible) .to-top,
html:has(.filter-panel[open]) .to-top,
html:has(dialog[open]) .to-top {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (min-width: 1024px) {
	.to-top {
		display: none;
	}
}

@media print {
	.to-top {
		display: none;
	}
}

/* 저장 목록: 마감된 공모는 접어 둔다 (작은 행 · 다음 회차 한 줄 · 모두 정리) */
.saved-closed {
	border-top: var(--bw-strong) solid var(--navy);
}

.saved-closed__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 2.75rem;
	padding-top: var(--s-3);
	cursor: pointer;
	list-style: none;
}

.saved-closed__summary::-webkit-details-marker {
	display: none;
}

.saved-closed__summary::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dur-2) var(--ease-out);
}

.saved-closed[open] > .saved-closed__summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.saved-closed__summary .saved-group__title {
	margin: 0;
	padding: 0;
	border: 0;
}

.saved-closed__summary:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.saved-closed__tools {
	display: flex;
	justify-content: flex-end;
	margin: var(--s-2) 0 var(--s-1);
}

/* 다음 회차 한 줄은 행 안쪽(제목 줄)에 맞추고, 행의 밑줄을 이 줄 아래로 옮긴다 */
.saved-closed .mrow .dchip {
	min-width: 4.25rem;
}

li:has(> .saved-next) > .mrow {
	padding-bottom: var(--s-2);
	border-bottom: 0;
}

.saved-next {
	padding: 0 0 var(--s-3) calc(4.25rem + var(--s-3));
	border-bottom: var(--bw) solid var(--line);
	font-size: var(--fs-meta);
	font-weight: 600;
}

/* 작은 행 + 저장: [칩 | 제목 · 메타 | 저장] */
.mrow--save {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.mrow__save {
	position: relative;
	z-index: 1;
	align-self: center;
	margin: -0.5rem -0.625rem -0.5rem 0;
}

/* 급한 행 날짜 꼬리: "10월 28일(수) 마감 · 오후 3시 · 우편 도착" — 날짜보다 한 단계 옅고 작게 */
.orow__tail {
	color: var(--ink-2);
	font-size: 0.875rem;
}

/* 넓은 목록(날짜가 칩 아래 8rem 칸): 꼬리는 날짜 아래 제 줄에, 가운뎃점 없이 */
@container rows (min-width: 46rem) {
	.orow__tail {
		display: block;
	}

	.orow__tail-sep {
		display: none;
	}
}

/* 공모 상세 캘린더: [라벨 ……… 공유] / [구글 캘린더 │ 아이폰·기타 캘린더] 44px 두 칸 */
.dsheet__tools {
	align-items: center;
	row-gap: var(--s-2);
}

.dsheet__calendar {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.dsheet__share {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	min-height: 2.75rem;
	text-decoration: none;
}

.dsheet__share::after {
	inset: 0;
}

.dsheet__share-icon {
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
	.dsheet__share:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.25em;
	}
}

.dcal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	flex-basis: 100%;
	border: var(--bw) solid var(--line-2);
	background: var(--surface);
}

.dcal__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 var(--s-2);
	color: var(--ink);
	font-size: var(--fs-meta);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.dcal__btn + .dcal__btn {
	border-left: var(--bw) solid var(--line-2);
}

.dcal__btn:active {
	background: var(--sunk);
}

@media (hover: hover) and (pointer: fine) {
	.dcal__btn:hover {
		background: var(--navy);
		color: var(--paper);
	}
}

.dcal__btn:focus-visible {
	z-index: 1;
	outline-offset: -2px;
}

/* 마감 달력: '오늘 보기' (이번 달, 600px~ — 좁은 목록은 이미 오늘부터 시작한다) · 지난 마감 수는 한 단계 옅게 */
.mcal-bar .mcal-jump {
	min-height: 2.75rem;
}

.mcal-bar .mcal-today + .mcal-jump {
	margin-left: 0;
}

.mcal-nav__past {
	color: var(--ink-2);
	font-weight: 500;
}

@media (max-width: 599.98px) {
	.mcal-bar .mcal-jump {
		display: none;
	}
}

/* 작은 행 저장: 날짜별 목록은 칩이 없는 한 칸 + 저장 */
.agenda .mrow--save {
	grid-template-columns: minmax(0, 1fr) auto;
}

.agenda .mrow--save:has(.dchip--upcoming) {
	grid-template-columns: 4.25rem minmax(0, 1fr) auto;
}

/* '+N건 더 보기' 층: [이름 ……… 저장] */
.mcal__items--pop > li {
	display: flex;
	align-items: center;
	gap: var(--s-1);
}

.mcal__items--pop .mcal__item {
	flex: 1;
	min-width: 0;
}

.mcal__items--pop .save-btn {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	margin-right: calc(var(--s-2) * -1);
}

/* 수상작 카드 꼬리: "이야기 읽기 → · 다음 모집 D-11" — 화살표는 '이야기 읽기'에만 붙인다 */
.hcard__more::after {
	content: none;
}

.hcard__read::after {
	content: "\00a0→";
	display: inline-block;
	transition: transform var(--dur-2) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.hcard:hover .hcard__read::after {
		transform: translateX(var(--nudge));
	}
}

.hcard__next {
	margin-left: var(--s-2);
	color: var(--ink-2);
	font-weight: 600;
	white-space: nowrap;
}

.hcard__next::before {
	content: "·";
	margin-right: var(--s-2);
}

.hcard__d {
	color: var(--ink);
	font-family: var(--font-num);
	font-weight: 800;
}

.dchip--sm {
	min-width: 0;
	height: 1.375rem;
	padding: 0 0.3125rem;
	font-size: var(--fs-sm);
	vertical-align: 0.05em;
}

/* 검색 도우미: 검색칸 아래 뜨는 층 (자리를 차지하지 않는다). 종이 바탕 · 네이비 테, 칩은 1px 테 */
.qhelp-host {
	position: relative;
}

.qhelp {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 120;
	padding: var(--s-3);
	background: var(--paper);
	border: var(--bw) solid var(--navy);
	color: var(--ink);
	text-align: left;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.qhelp.is-shown {
	opacity: 1;
	transform: none;
}

.qhelp--header {
	left: auto;
	width: min(22rem, calc(100vw - var(--gutter) * 2));
}

.qhelp__label {
	margin-bottom: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--ls-small);
}

.qhelp__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.qhelp__chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.25rem;
	padding: 0 var(--s-3);
	background: var(--surface);
	border: var(--bw) solid var(--line-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.qhelp__chip::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

.qhelp__chip:active {
	transform: scale(var(--press-scale));
}

@media (hover: hover) and (pointer: fine) {
	.qhelp__chip:hover {
		border-color: var(--navy);
	}
}

.qhelp__n {
	padding: 0 0.3125rem;
	background: var(--sunk);
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.qhelp {
		transition: none;
	}
}

/* 20. 관리자 (/admin, docs/07-ADMIN.md) -------------------------------------------
   공개 화면과 같은 글꼴 · 세 색 · 평면. 꾸밈 없이 표 · 폼 위주. 클래스는 모두 adm- 로 시작한다 (공개 화면과 섞이지 않게). */
.adm-wrap {
	width: 100%;
	max-width: calc(68rem + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.adm-wrap--narrow {
	max-width: calc(36rem + var(--gutter) * 2);
	padding-top: var(--s-7);
}

.adm-header {
	background: var(--navy);
	color: var(--on-navy);
}

.adm-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-5);
	min-height: var(--header-h);
	padding-block: var(--s-2);
}

.adm-logo {
	display: inline-flex;
	align-items: baseline;
	gap: var(--s-2);
	color: var(--on-navy);
	text-decoration: none;
}

.adm-logo__tag {
	padding: 0 var(--s-1h);
	background: var(--mauve);
	color: var(--navy);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.6;
}

.adm-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-4);
}

.adm-nav__link {
	padding-block: var(--s-1);
	color: var(--on-navy-2);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: none;
	border-bottom: var(--bw-strong) solid transparent;
}

.adm-nav__link[aria-current="page"] {
	color: var(--on-navy);
	border-bottom-color: var(--mauve);
}

@media (hover: hover) and (pointer: fine) {
	.adm-nav__link:hover {
		color: var(--on-navy);
	}
}

.adm-user {
	margin: 0 0 0 auto;
	color: var(--on-navy-2);
	font-size: var(--fs-sm);
}

.adm-main {
	padding-block: var(--s-5) var(--s-7);
}

.adm-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	margin-bottom: var(--s-5);
}

.adm-head .adm-sub {
	flex-basis: 100%;
	order: 2;
}

.adm-h1 {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-h2);
}

.adm-h2 {
	margin: 0 0 var(--s-3);
	padding: 0;
	font-size: var(--fs-lead);
	font-weight: 800;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-title);
}

.adm-h3 {
	margin: var(--s-5) 0 var(--s-2);
	font-size: var(--fs-body);
	font-weight: 800;
}

.adm-sub,
.adm-help {
	margin: 0;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
}

.adm-help {
	margin-bottom: var(--s-3);
}

.adm-count {
	color: var(--ink-3);
	font-family: var(--font-num);
	font-weight: 700;
}

.adm-mono {
	font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.875em;
	letter-spacing: 0;
	word-break: break-all;
}

.adm-card {
	margin-bottom: var(--s-5);
	padding: var(--s-4);
	background: var(--surface);
	border: var(--bw) solid var(--line);
}

.adm-empty {
	margin: 0;
	color: var(--ink-3);
	font-size: var(--fs-body-sm);
}

.adm-link {
	color: var(--ink);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

/* 표 */
.adm-table-wrap {
	overflow-x: auto;
}

.adm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body-sm);
}

.adm-table th,
.adm-table td {
	padding: var(--s-2) var(--s-3);
	border-bottom: var(--bw) solid var(--line);
	text-align: left;
	vertical-align: top;
}

.adm-table thead th {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	border-bottom-color: var(--line-2);
}

.adm-table--num td,
.adm-table--num thead th:not(:first-child) {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.adm-table tfoot th,
.adm-table tfoot td {
	font-weight: 800;
	border-bottom: 0;
}

.adm-table a {
	color: var(--ink);
}

/* 숫자 칸 */
.adm-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3);
	margin: 0 0 var(--s-5);
}

@media (min-width: 768px) {
	.adm-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.adm-stat {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	margin: 0;
	padding: var(--s-3) var(--s-4);
	background: var(--surface);
	border: var(--bw) solid var(--line);
	color: var(--ink);
	text-decoration: none;
}

.adm-stat__n {
	font-family: var(--font-num);
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1.1;
}

.adm-stat__l {
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

.adm-stat--warn {
	background: var(--mauve-soft);
	border-color: var(--mauve-deep);
}

.adm-stat--error {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-navy);
}

.adm-stat--error .adm-stat__l {
	color: var(--on-navy-2);
}

@media (hover: hover) and (pointer: fine) {
	a.adm-stat:hover {
		border-color: var(--navy);
	}
}

/* 배지 */
.adm-badge {
	display: inline-block;
	padding: 0 var(--s-1h);
	border: var(--bw) solid var(--line-2);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	vertical-align: 0.1em;
}

.adm-badge--open,
.adm-badge--ok {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-navy);
}

.adm-badge--upcoming,
.adm-badge--wait,
.adm-badge--warn {
	background: var(--mauve);
	border-color: var(--mauve);
	color: var(--navy);
}

.adm-badge--closed {
	color: var(--ink-2);
}

.adm-badge--error {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--paper);
}

/* 목록 줄 */
.adm-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adm-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-1) var(--s-4);
	padding-block: var(--s-3);
	border-bottom: var(--bw) solid var(--line);
}

.adm-row:last-child {
	border-bottom: 0;
}

.adm-rows--list .adm-row:last-child {
	border-bottom: var(--bw) solid var(--line);
}

.adm-row__main {
	flex: 1 1 24rem;
	min-width: 0;
}

.adm-row__title {
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: var(--lh-row);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.adm-row__title:hover {
		text-decoration: underline;
	}
}

.adm-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	margin: var(--s-1) 0 0;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
}

.adm-row__links {
	display: flex;
	gap: var(--s-4);
}

/* 사실 목록 */
.adm-facts {
	display: grid;
	gap: var(--s-2);
	margin: var(--s-3) 0 0;
	font-size: var(--fs-body-sm);
}

.adm-facts > div {
	display: grid;
	gap: var(--s-0) var(--s-4);
}

@media (min-width: 600px) {
	.adm-facts > div {
		grid-template-columns: 11rem 1fr;
	}
}

.adm-facts dt {
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

.adm-facts dd {
	margin: 0;
}

.adm-facts a {
	color: var(--ink);
}

.adm-deploy__state {
	margin: 0;
	font-size: var(--fs-body-sm);
}

/* 알림 줄 */
.adm-msg {
	margin: 0 0 var(--s-4);
	padding: var(--s-3) var(--s-4);
	border-left: var(--bw-strong) solid var(--line-2);
	background: var(--sunk);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-note);
}

.adm-msg--error {
	border-left: 4px solid var(--navy);
	background: var(--mauve-soft);
	color: var(--ink);
	font-weight: 600;
}

.adm-msg--ok {
	border-left: 4px solid var(--navy);
	background: var(--paper);
}

/* 점검 */
.adm-issues {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adm-issue-item {
	padding-block: var(--s-3);
	border-bottom: var(--bw) solid var(--line);
}

.adm-issues > li:last-child .adm-issue-item,
.adm-issues > li:last-child.adm-issue-item {
	border-bottom: 0;
}

.adm-issue-item__title {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-3);
	align-items: baseline;
	margin: 0 0 var(--s-2);
	font-weight: 700;
}

.adm-issue-item__title a:not(.adm-link) {
	color: var(--ink);
}

.adm-issue-list,
.adm-summary,
.adm-field-msgs {
	display: grid;
	gap: var(--s-1h);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
}

.adm-issue__field {
	margin-inline: var(--s-1);
}

.adm-issue__help {
	display: block;
	color: var(--ink-3);
	font-size: var(--fs-sm);
}

.adm-summary {
	margin-bottom: var(--s-3);
}

.adm-summary a,
.adm-summary strong {
	margin-inline: var(--s-1);
	color: var(--ink);
	font-weight: 700;
}

/* 필터 */
.adm-filter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3);
	align-items: end;
	margin-bottom: var(--s-4);
	padding: var(--s-4);
	background: var(--surface);
	border: var(--bw) solid var(--line);
}

.adm-filter label {
	display: block;
	margin-bottom: var(--s-1);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.adm-filter__q,
.adm-filter .btn {
	grid-column: 1 / -1;
}

@media (min-width: 768px) {
	.adm-filter {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	}

	.adm-filter__q,
	.adm-filter .btn {
		grid-column: auto;
	}

	.adm-filter .btn {
		min-height: 2.75rem;
	}
}

/* 폼 */
.adm-input {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: var(--s-2) var(--s-3);
	background: var(--surface);
	border: var(--bw) solid var(--line-input);
	border-radius: 0;
	color: var(--ink);
	font: inherit;
	font-size: 1rem; /* iOS 확대 막기 */
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
}

.adm-input:focus,
.adm-main .select:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: inset 0 0 0 1px var(--navy);
}

.adm-main .select {
	font-size: 1rem;
}

.adm-textarea {
	min-height: 5.5rem;
	resize: vertical;
}

.adm-input--num {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
}

.adm-section {
	min-width: 0;
	margin: 0 0 var(--s-5);
	padding: var(--s-4);
	background: var(--surface);
	border: var(--bw) solid var(--line);
}

.adm-section > legend {
	float: left;
	width: 100%;
	margin-bottom: var(--s-4);
}

.adm-section .adm-input,
.adm-section .select {
	background-color: var(--paper);
}

.adm-grid {
	clear: both;
	display: grid;
	gap: var(--s-4) var(--s-5);
}

@media (min-width: 768px) {
	.adm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.adm-field--wide {
		grid-column: 1 / -1;
	}
}

.adm-field {
	min-width: 0;
	scroll-margin-top: var(--s-5);
}

.adm-label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-2);
	margin: 0 0 var(--s-1h);
	padding: 0;
	font-size: var(--fs-body-sm);
	font-weight: 700;
	line-height: var(--lh-meta);
}

.adm-label__note {
	color: var(--ink-3);
	font-size: var(--fs-sm);
	font-weight: 500;
}

.adm-req {
	color: var(--ink-2);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.adm-req::before {
	content: "· ";
}

.adm-hint {
	margin: var(--s-1h) 0 0;
	color: var(--ink-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-note);
}

.adm-static {
	margin: 0;
	padding-block: var(--s-2);
	font-size: var(--fs-body-sm);
	font-weight: 600;
}

.adm-field.is-invalid .adm-input,
.adm-field.is-invalid .select {
	border-color: var(--navy);
	border-width: var(--bw-strong);
	background-color: var(--mauve-soft);
}

.adm-field-msgs {
	margin-top: var(--s-2);
}

.adm-field-msgs li {
	padding-left: var(--s-2);
	border-left: var(--bw-strong) solid var(--mauve-deep);
}

.adm-field-msgs li.is-error {
	border-left-color: var(--navy);
	font-weight: 600;
}

.adm-field-msgs__tag {
	font-size: var(--fs-xs);
	font-weight: 800;
}

.adm-checks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.adm-checks > legend {
	float: left;
	width: 100%;
}

.adm-check {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1h);
	min-height: 2.5rem;
	padding: 0 var(--s-3);
	border: var(--bw) solid var(--line-2);
	background: var(--paper);
	font-size: var(--fs-body-sm);
	cursor: pointer;
}

.adm-check:has(input:checked) {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-navy);
}

.adm-check input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--mauve);
}

.adm-check--solo {
	margin-top: var(--s-1);
}

.adm-check--strong {
	font-weight: 700;
}

.adm-actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	margin-inline: calc(var(--gutter) * -1);
	padding: var(--s-3) var(--gutter);
	background: var(--paper);
	border-top: var(--bw) solid var(--line-2);
}

.adm-actions__note {
	flex: 1 1 14rem;
	margin: 0;
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

.adm-actions .btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* 미리 보기 diff */
.adm-diff th[scope="row"] {
	width: 11rem;
	font-weight: 700;
}

.adm-diff__key {
	display: block;
	color: var(--ink-3);
	font-weight: 400;
}

.adm-diff td {
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.adm-diff__old {
	color: var(--ink-2);
	text-decoration: line-through;
	text-decoration-color: var(--ink-3);
}

.adm-diff__new {
	background: var(--mauve-soft);
}

.adm-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

@media (max-width: 599.98px) {
	.adm-diff,
	.adm-diff tbody,
	.adm-diff tr,
	.adm-diff th,
	.adm-diff td {
		display: block;
		width: auto;
	}

	.adm-diff thead {
		display: none;
	}

	.adm-diff tr {
		padding-block: var(--s-2);
		border-bottom: var(--bw) solid var(--line);
	}

	.adm-diff th,
	.adm-diff td {
		padding: var(--s-1) 0;
		border: 0;
	}

	.adm-diff th[scope="row"] {
		width: auto;
	}
}

/* 통계 (/admin/stats) — 차트는 서버가 그린 SVG(속성 · 클래스만). 글자는 SVG 밖 HTML 이라 폰에서도 크기가 그대로다 */
.adm-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-1) var(--s-4);
}

.adm-card__head .adm-h2 {
	margin-bottom: var(--s-3);
}

.adm-tabs {
	display: flex;
	gap: var(--s-1) var(--s-4);
	margin: 0 0 var(--s-3);
	overflow-x: auto;
	border-bottom: var(--bw) solid var(--line-2);
	scrollbar-width: thin;
}

.adm-tabs__link {
	flex: none;
	margin-bottom: -1px;
	padding: var(--s-2) 0;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: var(--bw-strong) solid transparent;
}

.adm-tabs__link[aria-current="page"] {
	color: var(--ink);
	font-weight: 800;
	border-bottom-color: var(--navy);
}

/* 폰: 탭 8개를 가로 스크롤 대신 두 줄로 (스크롤바가 숨어 뒤쪽 탭을 못 찾는다) */
@media (max-width: 599.98px) {
	.adm-tabs {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

@media (hover: hover) and (pointer: fine) {
	.adm-tabs__link:hover {
		color: var(--ink);
	}
}

.adm-period {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	margin: 0 0 var(--s-4);
}

.adm-seg {
	display: inline-flex;
	border: var(--bw) solid var(--line-input);
}

.adm-seg__item {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 var(--s-3);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.adm-seg__item + .adm-seg__item {
	border-left: var(--bw) solid var(--line-input);
}

.adm-seg__item[aria-current="true"] {
	background: var(--navy);
	color: var(--on-navy);
}

.adm-toggle {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.adm-sorts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1);
	margin: 0 0 var(--s-3);
}

.adm-sorts .adm-seg__item {
	min-height: 2.25rem;
	border: var(--bw) solid var(--line-input);
}

.adm-sorts__l {
	margin-right: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.adm-notes {
	display: grid;
	gap: var(--s-1);
	margin: 0 0 var(--s-4);
	padding: 0;
	list-style: none;
	color: var(--ink-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-note);
}

.adm-notes li::before {
	content: "· ";
}

/* 기록 상태는 접어 둔다 (숫자가 먼저 보이게) */
.adm-notes-box {
	margin: 0 0 var(--s-4);
}

.adm-notes-box .adm-notes {
	margin: var(--s-2) 0 0;
}

/* 개요의 요약 카드 셋: 들어온 곳 · 페이지 · 검색어 */
.adm-tops {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--s-4);
}

@media (min-width: 1100px) {
	.adm-tops {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
	}
}

/* 공모 성과: 폰에서 가려지는 정렬 열 값을 제목 아래에 */
.adm-sorted {
	color: var(--ink-2);
	font-weight: 600;
}

@media (min-width: 900px) {
	.adm-sorted {
		display: none;
	}
}

/* 숫자 칸 */
.adm-kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bw);
	margin: 0 0 var(--s-3);
	padding: var(--bw);
	list-style: none;
}

@media (min-width: 768px) {
	.adm-kpis {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.adm-kpi {
	display: flex;
	flex-direction: column;
	gap: var(--s-0);
	min-width: 0;
	padding: var(--s-3);
	background: var(--surface);
	box-shadow: 0 0 0 var(--bw) var(--line); /* 빈 칸이 생겨도 회색 면이 남지 않게 선은 칸마다 */
}

.adm-kpi__l {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.adm-kpi__n {
	font-family: var(--font-num);
	font-size: var(--fs-h3);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.adm-kpi__cmp {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-2);
	align-items: baseline;
	font-size: var(--fs-sm);
}

.adm-kpi__prev,
.adm-kpi__note {
	color: var(--ink-3);
	font-size: var(--fs-xs);
	line-height: var(--lh-meta);
}

.adm-delta {
	font-family: var(--font-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.adm-delta--up::before {
	content: "▲ ";
	font-size: 0.75em;
}

.adm-delta--down::before {
	content: "▼ ";
	font-size: 0.75em;
}

.adm-delta--up,
.adm-delta--new {
	color: var(--ink);
}

.adm-delta--down,
.adm-delta--flat {
	color: var(--ink-2);
}

/* 표 안 가로 막대 */
.adm-bar {
	display: block;
	width: 100%;
	max-width: 16rem;
	height: 0.375rem;
	margin-top: var(--s-1);
	background: var(--sunk);
}

.adm-bar__fill {
	fill: var(--mauve-deep);
}

.adm-table--bars th[scope="row"] {
	min-width: 10rem;
	font-weight: 600;
}

.adm-table--bars td {
	white-space: nowrap;
}

.adm-cell {
	overflow-wrap: anywhere;
}

a.adm-cell {
	color: var(--ink);
	text-underline-offset: 0.2em;
}

.adm-path {
	display: block;
	margin-top: var(--s-0);
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: 400;
	overflow-wrap: anywhere;
}

.adm-path .adm-link {
	margin-left: var(--s-2);
	font-size: var(--fs-xs);
}

.adm-csv {
	font-size: var(--fs-sm);
}

.adm-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-4);
}

@media (min-width: 900px) {
	.adm-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

/* 날짜별 차트 */
.adm-chart {
	margin: var(--s-4) 0 0;
}

.adm-chart__title {
	margin: 0 0 var(--s-1);
	font-size: var(--fs-body-sm);
	font-weight: 700;
}

.adm-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-4);
	margin: 0 0 var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-sm);
}

.adm-key::before {
	content: "";
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-right: var(--s-1h);
	vertical-align: -0.05em;
	background: var(--mauve-deep);
}

.adm-key--line::before {
	height: 2px;
	vertical-align: 0.25em;
	background: var(--navy);
}

.adm-chart__plot {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-2);
}

.adm-chart__y {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 10rem;
	color: var(--ink-3);
	font-family: var(--font-num);
	font-size: var(--fs-xs);
	line-height: 1;
	text-align: right;
}

.adm-chart__svg {
	display: block;
	width: 100%;
	height: 10rem;
	overflow: visible;
}

.adm-chart__grid {
	stroke: var(--line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.adm-chart__base {
	stroke: var(--line-2);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.adm-chart__bars rect {
	fill: var(--mauve-deep);
}

.adm-chart__line {
	fill: none;
	stroke: var(--navy);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.adm-chart__hits rect {
	fill: transparent;
}

@media (hover: hover) and (pointer: fine) {
	.adm-chart__hits rect:hover {
		fill: rgba(15, 28, 38, 0.07);
	}
}

.adm-chart__x {
	display: flex;
	justify-content: space-between;
	margin-top: var(--s-1);
	color: var(--ink-3);
	font-family: var(--font-num);
	font-size: var(--fs-xs);
}

.adm-details {
	margin-top: var(--s-3);
	font-size: var(--fs-body-sm);
}

.adm-details > summary {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	cursor: pointer;
}

.adm-details .adm-table-wrap {
	max-height: 24rem;
	overflow: auto;
	margin-top: var(--s-2);
}

/* 유입 묶음 */
.adm-srcs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adm-src {
	border-bottom: var(--bw) solid var(--line);
}

.adm-src:last-child {
	border-bottom: 0;
}

.adm-src__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 3.5rem;
	align-items: baseline;
	gap: 0 var(--s-3);
	padding: var(--s-2) 0;
	font-size: var(--fs-body-sm);
	cursor: pointer;
}

.adm-src__row--flat {
	cursor: default;
}

.adm-src details > summary {
	list-style: none;
}

.adm-src details > summary::-webkit-details-marker {
	display: none;
}

.adm-src__name {
	font-weight: 700;
}

details > .adm-src__row .adm-src__name::after {
	content: " ▸";
	color: var(--ink-3);
	font-size: 0.8em;
}

details[open] > .adm-src__row .adm-src__name::after {
	content: " ▾";
}

.adm-src__n,
.adm-src__pct {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.adm-src__pct {
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

.adm-src__row .adm-bar {
	grid-column: 1 / -1;
	max-width: none;
}

.adm-hosts {
	display: grid;
	gap: var(--s-1);
	margin: 0 0 var(--s-3);
	padding: var(--s-2) var(--s-3);
	list-style: none;
	background: var(--sunk);
	font-size: var(--fs-meta);
}

.adm-hosts li {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
}

/* 깔때기 */
.adm-funnel {
	display: grid;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.adm-funnel__step {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 var(--s-3);
	align-items: baseline;
}

.adm-funnel__l {
	font-weight: 700;
}

.adm-funnel__n {
	font-family: var(--font-num);
	font-size: var(--fs-h3);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.adm-funnel__pct,
.adm-funnel__note {
	grid-column: 1 / -1;
	color: var(--ink-2);
	font-size: var(--fs-sm);
}

.adm-funnel__note {
	color: var(--ink-3);
	font-size: var(--fs-xs);
}

.adm-funnel .adm-bar {
	grid-column: 1 / -1;
	max-width: none;
	height: 0.625rem;
}

.adm-steps {
	display: grid;
	gap: var(--s-2);
	margin: 0 0 var(--s-3);
	padding-left: 1.25rem;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-note);
}

.adm-remote-meta {
	margin-bottom: var(--s-4);
}

.adm-how dd {
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
}

/* 대시보드의 오늘 띠 */
.adm-stats--flush {
	margin-bottom: 0;
}

.adm-stats--flush .adm-stat {
	background: var(--paper);
}

.adm-stat__n--text {
	font-family: var(--font-sans);
	font-size: var(--fs-lead);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.adm-opps th[scope="row"] {
	min-width: 14rem;
}

@media (max-width: 599.98px) {
	.adm-main .adm-table th,
	.adm-main .adm-table td {
		padding-inline: var(--s-2);
	}

	.adm-table--bars th[scope="row"] {
		min-width: 7.5rem;
	}

	.adm-opps th[scope="row"] {
		min-width: 11rem;
	}

	.adm-card {
		padding: var(--s-3);
	}
}

/* 21. K-POP 공연 (/kpop, docs/01 §17) ------------------------------------------------
   같은 정체성(세 색 · Gothic 제목 · Bricolage 숫자 · 납작한 면)으로 팬이 먼저 보는 것 — 날짜 · D-day · 티켓 오픈 시각 — 을 굵게.
   큰 소리는 한 화면에 하나: 개요 · 허브는 무료 홍보 배너, 상세는 핵심 정보의 크롭 D-숫자. 포스터 · 사진은 쓰지 않는다. */

.kpop-head {
	padding-bottom: var(--s-5);
}

.kpop-head__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-4);
	margin-top: var(--s-3);
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	font-weight: 500;
	line-height: 1.5;
}

.kpop-num {
	margin-right: 0.125rem;
	color: var(--ink);
	font-family: var(--font-num);
	font-size: 1.375rem;
	font-weight: 800;
	font-stretch: 75%;
	font-variation-settings: "wdth" 75;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: -0.01em;
}

/* ── 무료 홍보 배너: 네이비 면 · 글은 HTML · 그림 칸은 그림이 없어도 완성된 구성 ──
   큰 판(개요): 폰은 그림 띠 없이 키커 · 제목 · 첫 문장 + 나머지는 맺음 글씨로 한 덩어리 (첫 화면에 지역 칩 · 검색이 보이게).
   768px~ 글 | 그림 칸(38%). 그림이 있으면 칸 비율을 3:2 로 고정해 잘리지 않게, 폰은 위 5:2 띠.
   작은 판(지역 허브 · 공연 상세): 키커 · 제목 · 한 문장, 그림 칸 없음 (폰 140px · 넓은 화면 120px 아래). */
.promo {
	--promo-pad: 1rem;
	position: relative;
	display: grid;
	grid-template-areas: "art" "text";
	background: var(--navy);
	color: var(--paper);
	overflow: hidden;
	isolation: isolate;
}

.promo__text {
	grid-area: text;
	position: relative;
	z-index: 1;
	padding: var(--s-4) var(--promo-pad);
}

.promo__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

.promo__tag {
	padding: 0.125rem 0.4375rem;
	background: var(--mauve);
	color: var(--navy);
	font-weight: 700;
}

.promo__status {
	padding: 0.0625rem 0.375rem;
	border: 1.5px dashed var(--on-navy-2);
	color: var(--on-navy-2);
}

.promo__title {
	margin-top: var(--s-2);
	font-family: var(--font-display);
	font-size: 1.3125rem;
	font-weight: 900;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-h2);
	text-wrap: balance;
}

.promo__lead {
	margin-top: var(--s-2);
	max-width: var(--w-read);
	font-size: var(--fs-body-sm);
	line-height: 1.55;
	text-wrap: pretty;
}

.promo__more,
.promo__fine {
	max-width: var(--w-read);
	color: var(--on-navy-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-note);
	letter-spacing: 0;
	text-wrap: pretty;
}

.promo__more {
	margin-top: var(--s-2);
}

.promo__fine {
	margin-top: var(--s-1);
}

.promo__fine a {
	color: var(--paper);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

/* 지금 만나 볼 신진 음악가: 신청을 받기 전에도 배너의 약속을 실제 예술가로 (수상작 이야기 링크) */
.promo__picks {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	margin-top: var(--s-3);
	padding-top: var(--s-2);
	border-top: var(--bw) solid color-mix(in srgb, var(--on-navy-2) 40%, transparent);
	font-size: var(--fs-meta);
	line-height: 1.45;
	letter-spacing: 0;
}

.promo__picks-label {
	color: var(--mauve);
	font-weight: 700;
}

.promo__picks-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-3);
}

.promo__pick {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 2rem;
	color: var(--paper);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.promo__pick-arrow {
	text-decoration: none;
}

/* 폰: 알림 신청 안내는 아래 '지금 만나 볼 신진 음악가' 띠에 (첫 화면의 배너를 줄인다) · 이름 줄은 한 줄로 */
@media (max-width: 767.98px) {
	.promo__notify {
		display: none;
	}

	.promo__picks {
		margin-top: var(--s-2);
		padding-top: var(--s-1h);
		column-gap: var(--s-2);
	}

	.promo__pick {
		min-height: 1.75rem;
	}
}

.kpop-picks__notify {
	margin-top: var(--s-4);
	color: var(--on-navy-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
}

.kpop-picks__notify a {
	color: var(--paper);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
	.promo__pick:hover,
	.promo__fine a:hover {
		color: var(--mauve);
	}
}

/* 그림 칸: 폰은 그림이 있을 때만 위 5:2 띠 (없으면 글자만 — 도형은 768px~ 에서) */
.promo__art {
	grid-area: art;
	position: relative;
	display: none;
	overflow: hidden;
}

.promo.has-image .promo__art {
	display: block;
	aspect-ratio: 5 / 2;
}

.promo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.promo__mark {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.promo__staff path {
	fill: none;
	stroke: var(--on-navy-2);
	stroke-opacity: 0.45;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.promo__sun {
	fill: var(--mauve);
}

.promo__ring {
	fill: none;
	stroke: var(--navy);
	stroke-width: 2;
	stroke-dasharray: 8 7;
	vector-effect: non-scaling-stroke;
}

.promo__dot {
	fill: var(--navy);
}

.promo__sq {
	fill: none;
	stroke: var(--paper);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.promo__bars rect {
	fill: var(--paper);
}

.promo__crowd circle {
	fill: var(--paper);
	fill-opacity: 0.85;
}

/* 작은 판: 왼쪽 굵은 모브 선 하나로 '같은 자리'임을 알린다 */
.promo--compact {
	border-left: 0.375rem solid var(--mauve);
}

.promo--compact .promo__text {
	padding: 0.75rem var(--promo-pad) 0.875rem;
}

.promo--compact .promo__title {
	margin-top: 0.375rem;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.promo__line {
	margin-top: 0.25rem;
	color: var(--on-navy-2);
	font-size: var(--fs-sm);
	line-height: 1.5;
	letter-spacing: 0;
	text-wrap: pretty;
}

.kshow-page .promo--compact {
	margin-top: var(--section);
}

.kpop-page .page-head + .promo--compact {
	margin-top: var(--s-1);
}

@media (min-width: 768px) {
	.promo {
		--promo-pad: 2rem;
	}

	.promo--full {
		grid-template-columns: minmax(0, 1fr) minmax(14rem, 38%);
		grid-template-areas: "text art";
		min-height: 15rem;
	}

	.promo--full .promo__text {
		align-self: center;
		padding: var(--s-6) var(--promo-pad);
	}

	.promo__art {
		display: block;
	}

	/* 그림이 있으면 칸을 3:2 로 고정 (가운데 정렬) — 글 높이에 따라 비율이 흔들려 그림이 잘리지 않게. 1800×1200 그림이 통째로 보인다 */
	.promo.has-image {
		min-height: 0;
	}

	.promo.has-image .promo__art {
		align-self: center;
		aspect-ratio: 3 / 2;
	}

	.promo.has-image .promo__img {
		position: absolute;
		inset: 0;
	}

	.promo__kicker {
		font-size: var(--fs-meta);
	}

	.promo__title {
		margin-top: var(--s-3);
		font-size: 1.875rem;
	}

	.promo__lead,
	.promo__more {
		margin-top: var(--s-3);
		color: var(--paper);
		font-size: 1.0625rem;
		line-height: 1.65;
	}

	.promo__more {
		margin-top: var(--s-1);
	}

	.promo__fine {
		margin-top: var(--s-3);
	}

	.promo--compact .promo__text {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		grid-template-areas: "kicker line" "title line";
		align-items: center;
		column-gap: var(--s-6);
		padding: var(--s-4) var(--promo-pad);
	}

	.promo--compact .promo__kicker {
		grid-area: kicker;
	}

	.promo--compact .promo__title {
		grid-area: title;
		margin-top: var(--s-1);
		font-size: 1.25rem;
	}

	.promo--compact .promo__line {
		grid-area: line;
		margin: 0;
		font-size: var(--fs-meta);
	}
}

@media (min-width: 1200px) {
	.promo {
		--promo-pad: 2.5rem;
	}

	.promo--full:not(.has-image) {
		min-height: 17rem;
	}
}

/* ── 메뉴의 K-POP 칸 (base.html) ──
   600px 미만: 메뉴 띠는 원래 일곱 칸 그대로(한 줄에 고르게), K-POP 은 머리 도구 줄의 글자 링크로 옮긴다.
   600~767 · 1024~1279px 는 메뉴 한 줄이 꽉 차 짧은 이름. */
.tool-link--kpop {
	display: none;
}

@media (max-width: 599.98px) {
	.site-nav__kpop {
		display: none;
	}

	.tool-link--kpop {
		display: inline-flex;
		min-width: 0;
		padding-inline: var(--s-2);
		font-size: var(--fs-meta);
		font-weight: 700;
		letter-spacing: 0;
	}

	.tool-link--kpop[aria-current] {
		box-shadow: inset 0 -2px 0 var(--navy);
	}
}

@media (max-width: 767.98px), (min-width: 1024px) and (max-width: 1279.98px) {
	.site-nav__link--kpop .site-nav__full {
		display: none;
	}

	.site-nav__link--kpop .site-nav__short {
		display: inline;
	}
}

/* 1200~1359px: 머리 검색칸(15rem)이 생겨 메뉴 여덟 칸이 한 줄에 들도록 검색칸만 조금 줄인다 (1280px 는 'K-POP 공연' 전체 이름) */
@media (min-width: 1200px) and (max-width: 1359.98px) {
	.header-search {
		width: 13rem;
	}
}

/* 1200~1279px: 그래도 모자란 자리 — 검색칸을 한 단계 더 줄이고 '저장' 글자는 화면 읽기에만 남긴다 (아이콘 · 개수는 그대로) */
@media (min-width: 1200px) and (max-width: 1279.98px) {
	.header-search {
		width: 12rem;
	}

	.tool-link--saved .tool-link__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ── 지역 칩 · 아티스트 검색 ── */
.kpop-filter {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-3);
	margin-top: var(--s-5);
}

.kpop-regions {
	min-width: 0;
	margin-inline: calc(var(--gutter) * -1);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
}

.kpop-regions::-webkit-scrollbar {
	display: none;
}

.kchips {
	display: flex;
	gap: var(--s-2);
	width: max-content;
	padding-inline: var(--gutter);
}

.kpop-elsewhere .kchips {
	flex-wrap: wrap;
	width: auto;
	padding-inline: 0;
}

.kchip {
	gap: 0.3125rem;
}

.kchip__n {
	font-family: var(--font-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ink-2);
}

.kchip[aria-current] .kchip__n {
	color: var(--on-navy-2);
}

.kpop-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s-2);
	max-width: 32rem;
}

.kpop-search__icon {
	position: absolute;
	left: 0.875rem;
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: var(--ink-2);
	stroke-width: 2;
	pointer-events: none;
}

.kpop-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.75rem;
	padding: 0 var(--s-3) 0 2.5rem;
	background: var(--surface);
	border: var(--bw) solid var(--line-input);
	border-radius: 0;
	color: var(--ink);
	font: inherit;
	font-size: var(--fs-body);
}

.kpop-search__go {
	flex: none;
	height: 2.75rem;
}

@media (min-width: 1024px) {
	.kpop-filter {
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: center;
	}

	.kpop-regions {
		margin-inline: 0;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.kchips {
		flex-wrap: wrap;
		width: auto;
		padding-inline: 0;
	}

	.kpop-search {
		justify-self: end;
		width: 100%;
	}
}

/* ── 공연 목록 행: [D-day · 날짜] → 아티스트(굵게) → 공연명 → 장소 · 종류 → 다음 예매 ── */
.krows {
	border-top: var(--bw) solid var(--navy);
	isolation: isolate;
}

.krow {
	position: relative;
	display: grid;
	gap: var(--sp-line);
	padding: 0.875rem 0 var(--s-4);
	border-bottom: var(--bw) solid var(--line);
}

.krow::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--s-3) * -1);
	z-index: -1;
	background: transparent;
	transition: background-color var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.krow:hover::before {
		background: var(--surface);
	}
}

.krow:active::before {
	background: var(--sunk);
}

.krow__when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--s-1);
}

.krow__date {
	font-size: var(--fs-fact);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.krow__status {
	padding: 0.0625rem 0.375rem;
	background: var(--navy);
	color: var(--paper);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.krow__artist {
	font-size: var(--fs-row);
	font-weight: 800;
	line-height: var(--lh-row);
	letter-spacing: var(--ls-row);
}

.krow__link {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--s-2);
	color: inherit;
	text-decoration: none;
}

.krow__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.krow__link:focus-visible {
	outline: none;
}

.krow__link:focus-visible::after {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.krow__name {
	overflow-wrap: anywhere;
}

.krow__sub {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

.krow__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	line-height: 1.45;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.krow__facts,
.ktick__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem 0;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.45;
	letter-spacing: 0;
}

/* 구분선: .orow__facts 와 같은 방법 — 항목 왼쪽 1px 배경, 줄 첫 항목의 선은 상자 바깥으로 밀려 잘린다 (줄 머리에 '|'가 남지 않는다) */
.krow__facts,
.ktick__meta {
	overflow: hidden;
	margin-left: -0.5rem;
}

.krow__facts > span,
.ktick__meta > span {
	margin-left: -1px;
	padding: 0 0.5rem 0 0.5625rem;
	background: linear-gradient(var(--line-2), var(--line-2)) no-repeat left center / 1px 0.6875rem;
}

@media (max-width: 767.98px) {
	.krow__facts,
	.ktick__meta {
		clip-path: inset(0 0 0 0.1875rem);
	}
}

.krow__range {
	color: var(--ink);
	font-weight: 600;
}

.krow__venue {
	color: var(--ink);
	font-weight: 500;
}

.krow__ticket {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--s-2);
	margin-top: var(--s-1);
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
}

.krow__ticket::before {
	content: "";
	flex: none;
	align-self: center;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--mauve-deep);
}

.krow__ticket.is-live::before {
	background: var(--navy);
}

.krow--past .krow__date,
.krow--past .krow__artist,
.krow--past .krow__venue {
	color: var(--ink-3);
}

.krel {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 500;
}

.krel:empty {
	display: none;
}

@media (min-width: 768px) {
	.krow {
		grid-template-columns: 13.5rem minmax(0, 1fr);
		grid-template-areas:
			"when artist"
			"when title"
			"when facts"
			"when ticket";
		column-gap: var(--s-5);
		padding-block: var(--s-4);
	}

	.krow__when {
		grid-area: when;
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
		gap: var(--s-1h);
		margin: 0;
		padding-top: 0.125rem;
	}

	.krow__artist {
		grid-area: artist;
		font-size: var(--fs-row-wide);
	}

	.krow__title {
		grid-area: title;
		max-width: var(--w-text);
	}

	.krow__facts {
		grid-area: facts;
	}

	.krow__ticket {
		grid-area: ticket;
	}
}

/* ── 티켓 오픈 임박: 여는 시각이 칩 ── */
.kticks {
	display: grid;
	border-top: var(--bw) solid var(--navy);
	isolation: isolate;
}

.ktick {
	position: relative;
	display: grid;
	gap: var(--sp-line);
	padding: var(--s-3) 0 0.875rem;
	border-bottom: var(--bw) solid var(--line);
}

.ktick::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--s-3) * -1);
	z-index: -1;
	transition: background-color var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.ktick:hover::before {
		background: var(--surface);
	}
}

.ktick__when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}

.ktick__chip {
	min-width: 0;
	height: 1.75rem;
	padding-inline: 0.5rem;
	font-family: var(--font-sans);
	font-size: var(--fs-meta);
	font-weight: 700;
	letter-spacing: 0;
}

.ktick.is-live .ktick__chip::before {
	content: "";
	width: 0.4375rem;
	height: 0.4375rem;
	margin-right: 0.375rem;
	border-radius: 50%;
	background: var(--mauve);
}

.ktick__title {
	font-size: var(--fs-row);
	font-weight: 800;
	line-height: var(--lh-row);
	letter-spacing: var(--ls-row);
}

.ktick__link {
	color: inherit;
	text-decoration: none;
}

.ktick__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ktick__link:focus-visible {
	outline: none;
}

.ktick__link:focus-visible::after {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.ktick__artist {
	overflow-wrap: anywhere;
}

.ktick__sub {
	margin-left: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

.ktick__phase {
	color: var(--ink-2);
	font-weight: 600;
}

.ktick__show {
	color: var(--ink);
	font-weight: 600;
}

@media (min-width: 768px) {
	.kticks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-6);
	}
}

@media (min-width: 1200px) {
	.kticks {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kticks-more {
	margin-top: var(--s-4);
}

.kticks-more .kticks {
	border-top-color: var(--line);
}

/* ── 날짜 묶음 (마감 달력의 agenda 문법): 날짜는 머리에 한 번, 그 아래 그날 시작하는 공연 ──
   폰: [칩 · 날짜 · N건] 머리 줄 → 행. 768px~ 왼쪽 13.5rem 칸에 머리, 오른쪽에 행. 1200px~ 행 두 단 */
.kdays {
	border-top: var(--bw) solid var(--navy);
}

.kday {
	padding-top: var(--s-3);
	border-bottom: var(--bw) solid var(--line);
}

.kday__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}

.kday__date {
	font-size: var(--fs-fact);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.kday__n {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.kday__rows {
	border-top: 0;
}

.kday__rows > li:last-child > .krow {
	border-bottom: 0;
}

.krow--day {
	padding-top: var(--s-3);
}

.krow__when--status {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.kday {
		display: grid;
		grid-template-columns: 13.5rem minmax(0, 1fr);
		column-gap: var(--s-5);
		padding-top: 0;
	}

	.kday__head {
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
		gap: var(--s-1h);
		padding-top: var(--s-4);
	}

	.krow--day {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: none;
		padding-block: var(--s-4);
	}

	.krow--day > * {
		grid-area: auto;
	}

	.kday__rows > li + li > .krow--day {
		border-top: 0;
	}
}

@media (min-width: 1200px) {
	.kday__rows {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-6);
	}

	/* 두 단: 마지막 줄의 두 칸 모두 바닥선을 지운다 */
	.kday__rows > li:nth-last-child(2):nth-child(odd) > .krow {
		border-bottom: 0;
	}
}

/* ── 지역별로 보기: 지역 타일 (폰 두 단 · 768 세 단 · 1024 네 단) ── */
.ktiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-2);
}

.ktile {
	display: grid;
	align-content: start;
	gap: var(--s-1h);
	padding: var(--s-3);
	background: var(--surface);
	border-top: 3px solid var(--navy);
}

.ktile__head {
	font-size: var(--fs-body);
	font-weight: 800;
	line-height: 1.3;
}

.ktile__link {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	min-height: 2rem;
	color: inherit;
	text-decoration: none;
}

.ktile__name {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.ktile__n {
	flex: none;
	margin-left: auto;
	color: var(--ink-2);
	font-family: var(--font-num);
	font-size: var(--fs-meta);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ktile__link::after {
	content: "→";
	flex: none;
	color: var(--ink-2);
	font-weight: 600;
}

.ktile__lines {
	display: grid;
}

.ktile__line {
	display: grid;
	gap: 0;
	padding-block: 0.3125rem;
	border-top: var(--bw) solid var(--line);
	color: inherit;
	font-size: var(--fs-meta);
	line-height: 1.4;
	letter-spacing: 0;
	text-decoration: none;
}

.ktile__artist {
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ktile__date {
	color: var(--ink-2);
	font-size: var(--fs-sm);
}

.ktile__more {
	font-size: var(--fs-sm);
	font-weight: 600;
}

.ktile__more a {
	color: var(--ink-2);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
	.ktile__link:hover .ktile__name,
	.ktile__line:hover .ktile__artist {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
}

@media (min-width: 768px) {
	.ktiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-3);
	}

	.ktile__line {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		column-gap: var(--s-2);
	}
}

@media (min-width: 1024px) {
	.ktiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ── 개요: 지금 만나 볼 신진 음악가 띠 · 무대에 서는 쪽의 음악 공모 · 지난 공연만 남았을 때 안내 ── */
.kpop-picks {
	margin-top: var(--section);
}

.kpop-bridge__more {
	margin-top: var(--s-3);
	font-size: var(--fs-body-sm);
	font-weight: 700;
}

.kpop-bridge__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	min-height: 2.75rem;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.kpop-note {
	margin-top: var(--s-5);
	padding: var(--s-3) var(--s-4);
	background: var(--sunk);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	line-height: 1.5;
}

.kpop-head__checked {
	align-self: center;
	color: var(--ink-2);
	font-size: var(--fs-sm);
}

/* ── 달 묶음 · 공연장 · 지난 공연 · 출처 ── */
.kmonth + .kmonth {
	margin-top: var(--s-6);
}

.kmonth__title {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	padding-bottom: var(--s-2);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.kmonth__n {
	color: var(--ink-2);
	font-family: var(--font-sans);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

.kvenues {
	display: grid;
	border-top: var(--bw) solid var(--navy);
}

.kvenues li {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	padding: 0.625rem 0;
	border-bottom: var(--bw) solid var(--line);
	font-size: var(--fs-body-sm);
	line-height: 1.45;
}

.kvenues__name {
	font-weight: 600;
}

.kvenues__n {
	flex: none;
	color: var(--ink-2);
	font-family: var(--font-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
	.kvenues {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-6);
	}
}

.kpast {
	border-top: var(--bw) solid var(--line-2);
}

.kpast__toggle {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 3rem;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.kpast__toggle::-webkit-details-marker {
	display: none;
}

.kpast__toggle::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.125rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.125rem) rotate(45deg);
}

.kpast[open] .kpast__toggle::after {
	transform: translateY(0.125rem) rotate(-135deg);
}

.kpop-elsewhere {
	margin-top: var(--s-5);
	text-align: center;
}

.kpop-elsewhere .kchips {
	justify-content: center;
}

.kpop-elsewhere__label {
	margin-bottom: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.kpop-source {
	display: grid;
	gap: var(--s-1);
	margin-block: var(--section);
	padding-top: var(--s-4);
	border-top: var(--bw) solid var(--line);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
	letter-spacing: 0;
}

.kpop-source p {
	max-width: var(--w-text);
	text-wrap: pretty;
}

.kpop-source__kopis,
.ksource__kopis {
	font-size: var(--fs-sm);
}

/* ── 공연 상세 ── */
.kshow-notice {
	margin-top: var(--s-4);
	padding: var(--s-3) var(--s-4);
	background: var(--sunk);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	line-height: 1.5;
}

.kshow-head {
	margin-top: var(--sp-page-top);
}

.kshow-head__title {
	overflow-wrap: anywhere;
}

.kshow-head__artist {
	margin-top: var(--s-2);
	color: var(--mauve);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.kshow-head__status {
	padding: 0 0.375rem;
	background: var(--paper);
	color: var(--navy);
	font-weight: 700;
}

.kshow-layout {
	display: grid;
	gap: var(--sp-sub);
	margin-top: var(--s-5);
}

.kshow-sheet {
	display: grid;
	gap: var(--sp-group);
	align-content: start;
}

.kwhen {
	display: grid;
	gap: var(--s-2);
}

.kwhen__big {
	display: flex;
	align-items: flex-end;
	height: 4.25rem;
	overflow: hidden;
	border-bottom: 3px solid var(--navy);
	font-size: 5.5rem;
	line-height: 0.78;
}

.kwhen__big.is-long {
	font-size: 4.5rem;
}

.kwhen__big--text {
	height: auto;
	padding-bottom: var(--s-2);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.2;
}

.kwhen--closed .kwhen__big {
	border-color: var(--ink-3);
	color: var(--ink-3);
}

.kwhen__date {
	font-size: var(--fs-lead);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.knext {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem var(--s-2);
	padding: var(--s-3) var(--s-4);
	background: var(--mauve-soft);
	font-size: var(--fs-body);
	line-height: 1.45;
}

.knext.is-live {
	background: var(--navy);
	color: var(--paper);
}

.knext__label {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.knext.is-live .knext__label,
.knext.is-live .krel {
	color: var(--on-navy-2);
}

.knext__phase {
	font-weight: 800;
}

.knext__when {
	font-weight: 700;
}

.kfacts {
	display: grid;
	gap: var(--s-3);
}

.kfacts__row {
	display: grid;
	gap: var(--sp-stack);
}

.kfacts dt {
	color: var(--ink-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	line-height: var(--label-lh);
}

.kfacts dd {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: var(--lh-data);
	overflow-wrap: anywhere;
}

.kfacts__venue {
	display: block;
	font-weight: 700;
}

.kfacts__sub {
	display: block;
	color: var(--ink-2);
	font-size: var(--fs-body-sm);
	font-weight: 400;
}

.kshow-missing {
	margin-top: calc(var(--sp-group) * -0.5);
}

.kshow-do {
	display: grid;
	gap: 0.75rem;
}

.kshow-actions {
	display: grid;
	gap: var(--s-2);
}

.kshow-actions .btn {
	min-height: 3.25rem;
}

.kshow-main {
	display: grid;
	gap: var(--sp-sub);
	align-content: start;
}

.ksec__title {
	margin-bottom: var(--sp-head);
	font-size: var(--fs-sec);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.kshows {
	border-top: var(--bw) solid var(--navy);
}

.kshows__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--s-4);
	padding: 0.75rem 0;
	border-bottom: var(--bw) solid var(--line);
	font-size: var(--fs-body);
	line-height: 1.45;
}

.kshows__date {
	min-width: 8.5rem;
	font-weight: 700;
}

.kshows__time {
	font-family: var(--font-num);
	font-size: 1.125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.kshows__note {
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

.kshows__item.is-past {
	color: var(--ink-3);
}

.ksec__note,
.ksec__hint {
	margin-top: var(--s-3);
	max-width: var(--w-note);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
	text-wrap: pretty;
}

.ksec__note {
	color: var(--ink);
	font-size: var(--fs-body-sm);
}

.ksteps {
	position: relative;
	display: grid;
}

.ksteps__item {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	column-gap: var(--s-2);
	padding-bottom: var(--s-4);
}

.ksteps__item::before {
	content: "";
	position: absolute;
	top: 1rem;
	bottom: 0;
	left: 0.4375rem;
	width: 1px;
	background: var(--line-2);
}

.ksteps__item:last-child::before {
	display: none;
}

.ksteps__mark {
	grid-row: 1 / span 3;
	width: 0.9375rem;
	height: 0.9375rem;
	margin-top: 0.25rem;
	border: 1.5px solid var(--navy);
	background: var(--paper);
}

.ksteps__item.is-done .ksteps__mark {
	background: var(--navy);
}

.ksteps__item.is-live .ksteps__mark,
.ksteps__item.is-next .ksteps__mark {
	border-color: var(--navy);
	background: var(--mauve);
}

.ksteps__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.45;
}

.ksteps__state {
	padding: 0 0.375rem;
	background: var(--navy);
	color: var(--paper);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.5;
}

.ksteps__state--next {
	background: var(--mauve);
	color: var(--navy);
}

.ksteps__when {
	font-size: var(--fs-body-sm);
	line-height: 1.5;
}

.ksteps__item.is-done .ksteps__label,
.ksteps__item.is-done .ksteps__when {
	color: var(--ink-2);
	font-weight: 500;
}

.ksteps__note {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: 1.5;
}

.ksource__list {
	display: grid;
	gap: var(--s-2);
}

.ksource__list a {
	color: var(--ink);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	overflow-wrap: anywhere;
}

.ksource__note {
	margin-top: var(--s-3);
	max-width: var(--w-note);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
	text-wrap: pretty;
}

.ksource__kopis {
	margin-top: var(--s-1);
	color: var(--ink-2);
}

@media (min-width: 768px) {
	.kwhen__big {
		height: 5rem;
		font-size: 6.5rem;
	}

	.kfacts__row {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		align-items: baseline;
		column-gap: var(--s-4);
	}

	.kshow-actions {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}
}

@media (min-width: 1024px) {
	.kshow-layout {
		grid-template-columns: minmax(0, 1fr) 24rem;
		grid-template-areas: "main sheet";
		column-gap: var(--s-7);
		margin-top: var(--s-6);
	}

	.kshow-sheet {
		grid-area: sheet;
		align-self: start;
		padding: var(--s-5);
		background: var(--surface);
		border-top: 3px solid var(--navy);
	}

	.kshow-main {
		grid-area: main;
	}

	.kshow-actions {
		grid-template-columns: 1fr;
	}

	.kfacts__row {
		grid-template-columns: 5.5rem minmax(0, 1fr);
	}
}

@media (min-width: 1024px) and (min-height: 760px) {
	.kshow-sheet {
		position: sticky;
		top: calc(var(--header-h) + var(--s-4));
	}
}

/* ── 공연 상세 폰 하단 액션바 (공모 상세의 .actionbar 부품 그대로): 767px 이하 · JS 가 있을 때만 ── */
.kshow-page {
	padding-bottom: 0;
}

@media (max-width: 767.98px) {
	.kshow-page:has(.actionbar--kpop) {
		padding-bottom: 4.5rem;
	}
}

@media (min-width: 768px) {
	.actionbar--kpop {
		display: none;
	}
}

.actionbar--kpop .btn {
	max-width: 55vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.krow::before,
	.ktick::before {
		transition: none;
	}
}

@media print {
	.promo,
	.kpop-filter,
	.actionbar--kpop {
		display: none;
	}
}

/* 22. 키워드 허브 (2026-10, docs/01 §14 '키워드 허브') ---------------------------------------
   신춘문예 일정표 · 부문별 분량 · 장르 허브 · 테마 허브 · 월 허브 · 대회별 모아 보기. 새 색 · 새 움직임 없음.
   데이터 표(.dtable): 600px~ 가로 표(머리 줄 네이비 선 · 줄 사이 가는 선), 600px 미만은 줄마다 [라벨 위 · 값 아래]로 쌓는다
   (조건표와 같은 방식, 라벨은 data-label). 빈 칸은 쌓인 화면에서 숨긴다 — 추측한 값으로 채우지 않는다 */
.dtable-wrap {
	margin-top: var(--s-4);
}

.dtable {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-meta);
	word-break: keep-all;
	line-break: strict;
}

.dtable__caption {
	caption-side: top;
	padding-bottom: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	text-align: left;
}

.dtable__caption--title {
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 800;
}

.dtable thead th {
	padding: var(--s-2) var(--s-3) var(--s-2) 0;
	border-bottom: var(--bw) solid var(--navy);
	color: var(--ink-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	text-align: left;
	white-space: nowrap;
}

.dtable tbody th,
.dtable tbody td {
	padding: var(--s-3) var(--s-3) var(--s-3) 0;
	border-bottom: var(--bw) solid var(--line);
	color: var(--ink);
	font-weight: 400;
	text-align: left;
	vertical-align: baseline;
}

.dtable tbody .dtable__name {
	font-weight: 700;
}

.dtable__name a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--line-2);
	text-underline-offset: 0.2em;
}

.dtable__name a:hover {
	text-decoration-color: currentColor;
}

.dtable__when,
.dtable__num {
	font-weight: 600;
	white-space: nowrap;
}

.dtable__state {
	display: inline-block;
	margin-left: var(--s-2);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 600;
}

/* 마감된 줄: 흐린 글자(--ink-3 종이 위 5.5:1)와 한 단계 가벼운 굵기 — 색만으로 가리지 않게 '마감됨' 글자도 둔다 */
.dtable tr.is-closed td,
.dtable tr.is-closed th,
.dtable tr.is-closed .dtable__name a {
	color: var(--ink-3);
	font-weight: 500;
}

.dtable-after {
	margin-top: var(--s-3);
	font-size: var(--fs-meta);
}

@media (max-width: 599.98px) {
	.dtable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.dtable,
	.dtable tbody,
	.dtable tr,
	.dtable tbody th,
	.dtable tbody td {
		display: block;
	}

	.dtable tr {
		padding: var(--s-3) 0;
		border-bottom: var(--bw) solid var(--line);
	}

	.dtable tbody tr:first-child {
		border-top: var(--bw) solid var(--navy);
	}

	.dtable tbody th,
	.dtable tbody td {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		column-gap: var(--s-3);
		align-items: baseline;
		padding: var(--s-0) 0;
		border: 0;
		white-space: normal;
	}

	.dtable tbody th::before,
	.dtable tbody td::before {
		content: attr(data-label);
		color: var(--ink-2);
		font-size: var(--label-fs);
		font-weight: var(--label-fw);
		line-height: var(--label-lh);
	}

	.dtable tbody td:empty {
		display: none;
	}

	/* 줄의 이름(주최 · 사업)은 라벨 없이 맨 위에 크게 */
	.dtable tbody .dtable__name {
		display: block;
		order: -1;
		padding-bottom: var(--s-1);
		font-size: var(--fs-body);
	}

	.dtable tbody .dtable__name::before {
		content: none;
	}

	.dtable tr {
		display: flex;
		flex-direction: column;
	}
}

/* 신춘문예: 공고를 아직 찾지 못한 곳 — 표 밖의 따로 묶은 목록 (마감 칸 없음) */
.sinchun-missing {
	margin-top: var(--s-6);
}

.sinchun-missing__title {
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-title);
}

.sinchun-missing__note {
	max-width: var(--w-note);
	margin-top: var(--s-1);
	color: var(--ink-2);
	font-size: var(--fs-desc);
	line-height: var(--lh-note);
	text-wrap: pretty;
}

.sinchun-missing__list {
	margin-top: var(--s-3);
	border-top: var(--bw) solid var(--line-2);
}

.sinchun-missing__list > li {
	padding: var(--s-3) 0;
	border-bottom: var(--bw) solid var(--line);
}

.sinchun-missing__host {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--s-3);
	font-weight: 700;
}

.sinchun-missing__host a {
	color: var(--ink);
}

.sinchun-missing__checked {
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 400;
}

.sinchun-missing__line {
	max-width: var(--w-read);
	margin-top: var(--s-1);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-note);
	text-wrap: pretty;
}

.sinchun-missing__key {
	color: var(--ink-2);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
}

/* 부문별 응모 분량: 표 여러 개, 1024px~ 두 단 */
.len-groups {
	display: grid;
	gap: var(--s-5);
	margin-top: var(--s-4);
}

@media (min-width: 1024px) {
	.len-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.dtable--len td:nth-child(2) {
	white-space: nowrap;
}

/* 장르 허브: 목록 행 아래 분량 줄 (요강 원문 그대로). 행의 밑줄을 이 줄 아래로 옮기고, 넓은 목록에서는 제목 칸에 맞춘다 */
.hub-note {
	padding: 0 0 var(--s-4);
	border-bottom: var(--bw) solid var(--line);
	color: var(--ink);
	font-size: var(--fs-meta);
	line-height: var(--lh-note);
	text-wrap: pretty;
}

li:has(> .hub-note) > .orow {
	padding-bottom: var(--s-2);
	border-bottom: 0;
}

.hub-note__key {
	margin-right: var(--s-1);
	color: var(--ink-2);
	font-weight: var(--label-fw);
}

.hub-note__sep {
	color: var(--ink-2);
}

@container rows (min-width: 46rem) {
	.hub-note {
		padding-left: calc(8rem + var(--s-5));
	}
}

.lists-closed .hub-note {
	color: var(--ink-2);
}

.hub-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-3);
}

.hub-related {
	margin-top: var(--s-3);
}

/* 테마 허브 머리: 기관 이름을 내건 페이지라 '관계없음' 한 줄과 공식 안내를 이름 바로 아래에 */
.topic-head__sub {
	display: block;
	margin-top: var(--s-1);
	color: var(--ink-2);
	font-size: var(--fs-h3);
	font-family: var(--font-sans);
	font-weight: 700;
	letter-spacing: var(--ls-title);
}

.topic-head__lede {
	max-width: var(--w-read);
	margin-top: var(--s-4);
	font-size: var(--fs-lead);
	line-height: var(--lh-note);
	text-wrap: pretty;
}

.topic-head__notice {
	max-width: var(--w-read);
	margin-top: var(--s-4);
	padding: var(--s-3) var(--s-4);
	border-left: 3px solid var(--navy);
	background: var(--surface);
	font-size: var(--fs-desc);
	line-height: var(--lh-note);
}

.topic-head__official {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	margin-top: var(--s-2);
}

.topic-head__checked {
	color: var(--ink-2);
	font-size: var(--fs-meta);
}

.hub-source {
	max-width: var(--w-note);
	color: var(--ink-2);
	line-height: var(--lh-note);
}

@media (max-width: 599.98px) {
	.dtable caption {
		display: block;
		width: 100%;
	}
}

.dsec__hub,
.series-now__hub {
	margin-top: var(--s-3);
}

/* K-POP 월 허브 */
.kmonth-head__intro {
	max-width: var(--w-read);
	margin-top: var(--s-3);
	font-size: var(--fs-body);
	line-height: var(--lh-note);
	text-wrap: pretty;
}

.kmonth-regions {
	margin-top: var(--s-4);
}

.kchip--plain {
	cursor: default;
}

.kmonth__more {
	margin: var(--s-1) 0 var(--s-2);
	font-size: var(--fs-meta);
}

/* 대회별로 찾기: 이름순 목록 (넓은 화면 두 단) */
.dir-list {
	display: grid;
	margin-top: var(--s-4);
	border-top: var(--bw) solid var(--navy);
}

@media (min-width: 768px) {
	.dir-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-6);
	}
}

.dir-row {
	padding: var(--s-3) 0 var(--s-4);
	border-bottom: var(--bw) solid var(--line);
}

.dir-row__name {
	font-size: var(--fs-row);
	font-weight: 700;
	line-height: var(--lh-row);
	letter-spacing: var(--ls-row);
}

.dir-row__name a {
	color: var(--ink);
}

.dir-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-2);
	margin-top: var(--s-1);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
}

.dir-row__meta > span + span::before {
	content: "·";
	margin-right: var(--s-2);
}

.dir-row__when {
	margin-top: var(--s-1);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	font-weight: 500;
	line-height: var(--lh-meta);
}

/* 23. 안내 페이지 · 공모 결과 발표 줄 · 해마다 열리는 공모 보강 (2026-10, docs/01 §14 '안내 페이지') -------------------
   새 색 · 새 움직임 없음. 표는 22의 .dtable(600px 미만 쌓기), 규정 줄은 22의 .hub-note 를 그대로 쓴다 */
.guide-head__checked {
	margin-top: var(--s-3);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
}

.guide-empty {
	margin-top: var(--s-3);
	color: var(--ink-2);
	font-size: var(--fs-desc);
}

.guide-criteria {
	max-width: 48rem;
}

.dtable__sub {
	display: block;
	margin-top: var(--s-0);
	color: var(--ink-2);
	font-size: var(--fs-meta);
	font-weight: 400;
}

.dtable--guide td {
	min-width: 6rem;
	text-wrap: pretty;
}

.dtable--guide td:nth-child(2) {
	min-width: 14rem;
}

.dtable--matrix {
	max-width: 52rem;
}

.dtable.dtable--matrix tbody td,
.dtable.dtable--matrix thead th:not(:first-child) {
	padding-right: 0;
	padding-left: var(--s-3);
	text-align: right;
}

@media (max-width: 599.98px) {
	.dtable.dtable--matrix tbody td,
	.dtable--guide td,
	.dtable--guide td:nth-child(2) {
		min-width: 0;
		padding-left: 0;
		text-align: left;
	}

	.dtable--guide tbody td {
		grid-template-columns: 6.5rem minmax(0, 1fr);
	}
}

.guide-qa__list {
	display: grid;
	gap: var(--s-6);
	max-width: var(--w-read);
	margin-top: var(--s-4);
}

.guide-qa__q {
	font-size: var(--fs-sec);
	font-weight: 800;
	line-height: var(--lh-title-lg);
	letter-spacing: var(--ls-title);
}

.guide-qa__a {
	margin-top: var(--s-2);
	font-size: var(--fs-body);
	line-height: var(--lh-read);
	text-wrap: pretty;
}

.guide-qa__items {
	margin-top: var(--s-2);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-data);
}

.guide-qa__more {
	margin-top: var(--s-2);
}

.guide-method__box {
	max-width: var(--w-read);
	margin-top: var(--s-4);
	padding: var(--s-4) var(--s-5);
	border-left: 3px solid var(--navy);
	background: var(--surface);
	font-size: var(--fs-desc);
	line-height: var(--lh-note);
}

.guide-method__legal {
	margin-bottom: var(--s-3);
	font-weight: 600;
}

.guide-method__fix {
	margin-top: var(--s-3);
}

/* 마감된 공모: 결과 발표 줄 (발표일 · 발표 방법 원문 · 수상작 이야기) */
.detail-closed__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-2);
	margin-top: var(--s-3);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-note);
}

.detail-closed__result-text {
	min-width: 0;
	text-wrap: pretty;
}

/* 해마다 열리는 공모: 다음 공고 확인 줄 · 결과 발표 줄 · 회차 한눈에 */
.series-glance__waiting,
.series-glance__result {
	max-width: var(--w-note);
	margin-top: var(--s-3);
	color: var(--ink);
	font-size: var(--fs-desc);
	line-height: var(--lh-note);
	text-wrap: pretty;
}

.series-glance__table {
	max-width: 48rem;
	margin-top: var(--s-4);
}

.dsheet__guide {
	margin-top: var(--s-2);
	font-size: var(--fs-meta);
}