/*
Theme Name: 아파트사전
Theme URI: https://aptdict.com
Author: 아파트사전
Description: 공공데이터를 읽기 쉽게 정리하는 자료형 블록 테마. 사진 없이 표와 수치만으로 성립하도록 설계했습니다. 모든 수치는 근거 표본 건수를 함께 표시하며, 표본이 부족한 값은 테마가 스스로 감춥니다.
Version: 0.2.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aptdict
Tags: block-theme, full-site-editing, one-column, clean, minimal, accessibility-ready
*/

/* ═══════════════════════════════════════════════════════
   0. 토큰
   theme.json 이 대부분을 넘겨주지만, 계산이 필요한 값은 여기서.
   ═══════════════════════════════════════════════════════ */

:root {
	--apt-ink:    var(--wp--preset--color--ink,   #17181a);
	--apt-paper:  var(--wp--preset--color--paper, #f7f7f6);
	--apt-field:  var(--wp--preset--color--field, #edeeec);
	--apt-rule:   var(--wp--preset--color--rule,  #d5d6d3);
	--apt-muted:  var(--wp--preset--color--muted, #6a6c6e);
	--apt-seal:   var(--wp--preset--color--seal,  #8e3b30);

	/* 괘선 두께 — 대장 서식의 위계를 두께로만 만든다 */
	--apt-hair:   1px;
	--apt-heavy:  1.5px;

	/* 항목/값 두 칸의 기준 너비 */
	--apt-key-w:  8.5rem;
}

/* ═══════════════════════════════════════════════════════
   1. 바탕
   ═══════════════════════════════════════════════════════ */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	/* 한국어는 어절 단위로 끊어야 읽기가 편하다 */
	word-break: keep-all;
	overflow-wrap: break-word;
	line-break: strict;
	text-spacing-trim: trim-start;
}

/* 숫자는 자리를 맞춘다. 표와 수치에만 적용하고 본문에는 걸지 않는다. */
.apt-num,
.apt-figure__value,
.wp-block-table td,
.wp-block-table th,
.apt-asof time {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* 링크는 색이 아니라 밑줄로 구분한다 */
.wp-site-blocks a:where(:not(.wp-element-button):not(.apt-toc a)) {
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--apt-rule);
	transition: text-decoration-color 0.12s ease;
}
.wp-site-blocks a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--apt-ink);
}

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--apt-ink);
	outline-offset: 2px;
	border-radius: 1px;
}

.apt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--apt-ink);
	color: var(--apt-paper);
	padding: 0.6rem 1rem;
	z-index: 999;
}
.apt-skip:focus { left: 0; }

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

/* ═══════════════════════════════════════════════════════
   2. 머리말 · 꼬리말
   ═══════════════════════════════════════════════════════ */

.apt-masthead {
	border-block-end: var(--apt-hair) solid var(--apt-rule);
	padding-block: 0.8rem;
}
.apt-masthead .wp-block-site-title {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.3;
}
.apt-masthead .wp-block-site-title a { text-decoration: none; }
.apt-masthead .wp-block-site-tagline {
	font-size: 0.75rem;
	color: var(--apt-muted);
	line-height: 1.5;
	margin-block-start: 0.1rem;
}

.apt-colophon {
	border-block-start: var(--apt-hair) solid var(--apt-rule);
	margin-block-start: 3rem;
	padding-block: 1.5rem 3rem;
}
.apt-colophon p {
	font-size: 0.75rem;
	line-height: 1.75;
	color: var(--apt-muted);
	margin-block: 0 0.5rem;
}

/* ═══════════════════════════════════════════════════════
   3. 문서 머리 — 제목 · 기준일 · 충실도
   ═══════════════════════════════════════════════════════ */

.apt-dochead { padding-block-start: 1.5rem; }

.apt-docmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	align-items: baseline;
	margin-block-start: 0.6rem;
	font-size: 0.75rem;
	color: var(--apt-muted);
}

.apt-asof__label { letter-spacing: 0.04em; }

.apt-asof--stale .apt-asof__warn {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.05rem 0.35rem;
	border: var(--apt-hair) solid var(--apt-seal);
	color: var(--apt-seal);
	font-weight: 700;
}

/* ── 충실도 막대 ──────────────────────────────
   이 문서에서 몇 개 항목이 실제로 공식 자료로 뒷받침되는지
   한 줄로 보여준다. 눈금 하나가 수치 하나다. */

.apt-coverage {
	margin-block: 1.25rem;
	padding: 0.85rem 0 0.9rem;
	border-block: var(--apt-hair) solid var(--apt-rule);
}
.apt-coverage__label {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--apt-muted);
	margin-block-end: 0.5rem;
}
.apt-coverage__marks {
	display: flex;
	gap: 3px;
	height: 10px;
	margin-block-end: 0.5rem;
}
.apt-coverage__marks i {
	flex: 1 1 0;
	min-width: 3px;
	border-radius: 0;
}
.apt-coverage__marks i[data-tier="full"]    { background: var(--apt-ink); }
.apt-coverage__marks i[data-tier="thin"]    { background: var(--apt-muted); opacity: 0.45; }
.apt-coverage__marks i[data-tier="none"]    { background: var(--apt-rule); }
.apt-coverage__marks i[data-tier="missing"] {
	background: transparent;
	border: var(--apt-hair) dashed var(--apt-seal);
}
.apt-coverage__note {
	display: block;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--apt-muted);
}

/* ═══════════════════════════════════════════════════════
   4. 목차 — 20개 섹션을 폰에서 스크롤로만 찾게 두지 않는다
   ═══════════════════════════════════════════════════════ */

.apt-toc {
	margin-block: 1.5rem;
	border: var(--apt-hair) solid var(--apt-rule);
}
.apt-toc > summary {
	list-style: none;
	cursor: pointer;
	padding: 0.7rem 0.9rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--apt-muted);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.apt-toc > summary::-webkit-details-marker { display: none; }
.apt-toc > summary::after {
	content: "＋";
	font-size: 0.8rem;
	line-height: 1;
	color: var(--apt-muted);
}
.apt-toc[open] > summary::after { content: "－"; }
.apt-toc[open] > summary { border-block-end: var(--apt-hair) solid var(--apt-rule); }

.apt-toc ol {
	list-style: none;
	margin: 0;
	padding: 0.35rem 0;
	counter-reset: apt-toc;
}
.apt-toc li { margin: 0; }
.apt-toc a {
	display: flex;
	gap: 0.7rem;
	padding: 0.45rem 0.9rem;
	font-size: 0.875rem;
	line-height: 1.5;
	text-decoration: none;
	color: var(--apt-ink);
}
.apt-toc a:hover { background: var(--apt-field); }
.apt-toc a::before {
	counter-increment: apt-toc;
	content: counter(apt-toc, decimal-leading-zero);
	color: var(--apt-muted);
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	padding-block-start: 0.15em;
	flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════
   5. 섹션 표제 — 크기가 아니라 괘선으로 위계를 만든다
   ═══════════════════════════════════════════════════════ */

.entry-content > h2 {
	margin-block-start: 2.75rem;
	padding-block-start: 0.55rem;
	border-block-start: var(--apt-heavy) solid var(--apt-ink);
	scroll-margin-top: 1rem;
}
.entry-content > h2:first-child { margin-block-start: 0; }
.entry-content > h2 + * { margin-block-start: 0.75rem; }

.entry-content > h3 {
	margin-block-start: 1.75rem;
	color: var(--apt-muted);
}
.entry-content > h3 + * { margin-block-start: 0.5rem; }

/* 섹션 상태 줄 — 표제 바로 아래 붙는 한 줄 */
.is-style-apt-eyebrow {
	font-size: 0.75rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--apt-muted);
	margin-block-end: 0.5rem;
}

/* ═══════════════════════════════════════════════════════
   6. 표본 막대 — 이 테마의 서명
   등급은 [data-tier] 로 들어온다. 사람이 고르지 않는다.
   ═══════════════════════════════════════════════════════ */

.apt-figure { display: block; }

.apt-figure__label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--apt-muted);
	line-height: 1.5;
	margin-block-end: 0.15rem;
}

.apt-figure__value {
	display: block;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.03em;
}
.apt-figure__unit {
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--apt-muted);
	margin-inline-start: 0.15rem;
}
.apt-num--empty { color: var(--apt-rule); }

/* 막대 자체 */
.apt-evidence {
	display: block;
	margin-block-start: 0.45rem;
	height: 3px;
	background: var(--apt-rule);
	position: relative;
	overflow: hidden;
}
.apt-evidence i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	background: var(--apt-ink);
}

/* 6건 이상 — 꽉 찬 실선 */
[data-tier="full"] .apt-evidence i { width: 100%; }

/* 3~5건 — 절반, 그리고 흐리게 */
[data-tier="thin"] .apt-evidence i {
	width: 50%;
	background: var(--apt-muted);
}

/* 0~2건 — 짧게, 그리고 끊어서 */
[data-tier="none"] .apt-evidence i {
	width: 20%;
	background: repeating-linear-gradient(
		90deg,
		var(--apt-muted) 0 3px,
		transparent 3px 6px
	);
}

/* 자료 없음 — 채우지 않고, 바탕을 파선으로 */
[data-tier="missing"] .apt-evidence {
	height: 0;
	border-block-start: 2px dashed var(--apt-seal);
	background: none;
	opacity: 0.55;
}

.apt-figure__basis {
	display: block;
	margin-block-start: 0.4rem;
	font-size: 0.6875rem;
	line-height: 1.55;
	color: var(--apt-muted);
	letter-spacing: 0.01em;
}
[data-tier="missing"] .apt-figure__basis { color: var(--apt-seal); }

/* 수치 여러 개를 나란히 */
.apt-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 1.25rem 1.5rem;
	margin-block: 1rem;
}

/* ═══════════════════════════════════════════════════════
   7. 상태 배지 — 색은 "모른다"에만 쓴다
   ═══════════════════════════════════════════════════════ */

.apt-badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
	padding: 0.02rem 0.4rem;
	border: var(--apt-hair) solid var(--apt-rule);
	color: var(--apt-muted);
	white-space: nowrap;
	vertical-align: 0.1em;
}
.apt-badge--official {
	border-color: var(--apt-ink);
	color: var(--apt-ink);
}
.apt-badge--partial {
	border-style: dashed;
}
.apt-badge--missing,
.apt-badge--check {
	border-color: var(--apt-seal);
	color: var(--apt-seal);
}
.apt-badge--pending {
	border-style: dashed;
	color: var(--apt-muted);
}

/* ═══════════════════════════════════════════════════════
   8. 표 — 폰에서 옆으로 밀지 않는다
   좁아지면 각 행이 카드로 접힌다. 라벨은 JS가 thead 에서 읽어 붙인다.
   ═══════════════════════════════════════════════════════ */

.entry-content .wp-block-table { margin-block: 0.75rem; }

.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content .wp-block-table :is(th, td) {
	border: 0;
	border-block-end: var(--apt-hair) solid var(--apt-rule);
	padding: 0.6rem 0;
	vertical-align: baseline;
	text-align: start;
}

.entry-content .wp-block-table thead th {
	border-block-end: var(--apt-heavy) solid var(--apt-ink);
	padding-block-end: 0.45rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--apt-ink);
}

/* 머리행 없는 표 = 항목/값 두 칸짜리 대장 서식
   :has() 를 쓰되, 스크립트가 붙여 주는 클래스로도 같은 서식이 걸리게 한다. */
.entry-content .wp-block-table table:not(:has(thead)) td:first-child,
.entry-content .wp-block-table table.apt-table--pairs td:first-child {
	width: var(--apt-key-w);
	color: var(--apt-muted);
	font-size: 0.75rem;
	padding-inline-end: 0.9rem;
}

/* 머리행 있는 표 = 숫자 정렬 */
.entry-content .wp-block-table table:has(thead) :is(th, td):not(:first-child),
.entry-content .wp-block-table table.apt-table--stack :is(th, td):not(:first-child) {
	text-align: end;
}

.entry-content .wp-block-table figcaption {
	margin-block-start: 0.45rem;
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--apt-muted);
	text-align: start;
}

/* ── 좁은 화면: 행을 카드로 ────────────────── */
@media (max-width: 34rem) {

	.entry-content .apt-table--stack thead {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.entry-content .apt-table--stack tr {
		display: block;
		padding: 0.7rem 0;
		border-block-end: var(--apt-hair) solid var(--apt-rule);
	}

	.entry-content .apt-table--stack td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		border: 0;
		padding: 0.18rem 0;
		text-align: end;
		width: auto;
	}

	.entry-content .apt-table--stack td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 0.6875rem;
		letter-spacing: 0.02em;
		color: var(--apt-muted);
		text-align: start;
	}

	/* 첫 칸은 그 카드의 제목처럼 */
	.entry-content .apt-table--stack td:first-child {
		display: block;
		font-weight: 700;
		font-size: 0.9375rem;
		text-align: start;
		margin-block-end: 0.3rem;
		color: var(--apt-ink);
		width: auto;
	}
	.entry-content .apt-table--stack td:first-child::before { display: none; }
}

/* ═══════════════════════════════════════════════════════
   9. 해설 · 주의
   숫자 바로 아래 붙되, 자료와 말은 눈으로 구분되어야 한다.
   ═══════════════════════════════════════════════════════ */

.is-style-apt-comment {
	margin-block-start: 0.8rem;
	padding: 0.8rem 0 0.8rem 0.9rem;
	border-inline-start: 2px solid var(--apt-rule);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--apt-ink);
}

.is-style-apt-caution {
	margin-block: 1.25rem;
	padding: 0.95rem 1rem;
	border: var(--apt-hair) solid var(--apt-rule);
	font-size: 0.875rem;
	line-height: 1.7;
}
.is-style-apt-caution strong { font-weight: 700; }

/* 직접 확인할 항목 — 사이트가 모르는 것을 모아 보여주는 자리 */
.apt-unknowns {
	margin-block: 1.5rem;
	padding: 1rem;
	border: var(--apt-hair) solid var(--apt-seal);
}
.apt-unknowns h3 {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	color: var(--apt-seal);
}
.apt-unknowns ul {
	margin: 0;
	padding-inline-start: 1.1rem;
	font-size: 0.875rem;
	line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════
   10. 출처 · 갱신 이력
   ═══════════════════════════════════════════════════════ */

.entry-content .is-style-apt-ledger {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0.5rem;
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--apt-muted);
}
.entry-content .is-style-apt-ledger li {
	padding-block: 0.4rem;
	border-block-end: var(--apt-hair) solid var(--apt-rule);
	font-variant-numeric: tabular-nums;
}
.entry-content .is-style-apt-ledger li:last-child { border-block-end: 0; }

/* ═══════════════════════════════════════════════════════
   11. 목록 화면
   ═══════════════════════════════════════════════════════ */

.apt-index .wp-block-post-template { padding-inline-start: 0; }
.apt-index .wp-block-post-template > li {
	border-block-end: var(--apt-hair) solid var(--apt-rule);
	padding-block: 0.95rem;
	margin-block: 0;
}
.apt-index .wp-block-post-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.5;
	margin: 0;
}
.apt-index .wp-block-post-title a { text-decoration: none; }
.apt-index .wp-block-post-title a:hover { text-decoration: underline; }
.apt-index .wp-block-post-excerpt {
	margin-block-start: 0.25rem;
}
.apt-index .wp-block-post-excerpt__excerpt {
	font-size: 0.75rem;
	line-height: 1.65;
	color: var(--apt-muted);
}
.apt-index .wp-block-post-excerpt__more-text { display: none; }

.wp-block-query-pagination {
	margin-block-start: 1.5rem;
	font-size: 0.8125rem;
}

/* 검색창 */
.wp-block-search__label {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--apt-muted);
}
.wp-block-search__input {
	border: var(--apt-hair) solid var(--apt-rule);
	border-radius: 0;
	padding: 0.6rem 0.7rem;
	font-size: 1rem; /* 16px 미만이면 iOS 가 화면을 확대한다 */
	background: #fff;
}
.wp-block-search__button {
	border: var(--apt-hair) solid var(--apt-ink);
	border-radius: 0;
	background: var(--apt-ink);
	color: var(--apt-paper);
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════
   12. 인쇄 — 이런 자료는 실제로 인쇄된다
   ═══════════════════════════════════════════════════════ */

@media print {
	body { background: #fff; color: #000; font-size: 10pt; }
	.apt-masthead .wp-block-navigation,
	.apt-toc,
	.wp-block-query-pagination,
	.wp-block-search { display: none !important; }

	.entry-content > h2 {
		break-after: avoid;
		border-block-start-color: #000;
	}
	.apt-figure, .wp-block-table, .is-style-apt-comment { break-inside: avoid; }

	/* 인쇄물에는 출처 주소가 남아야 한다 */
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 8pt;
		color: #555;
		word-break: break-all;
	}
	.apt-coverage { border-color: #000; }
}
