/* 본문 글꼴 Pretendard (rules/libraries.md, 사이트 전체) — 사이트에 쓰인 글자만 남긴 한 파일 (npm run font). 없는 글자는 기기 기본 글꼴로 */
@font-face { font-family: "Pretendard Variable"; src: url("/vendor/pretendard@1.3.9/pretendard-subset.woff2") format("woff2-variations"), url("/vendor/pretendard@1.3.9/pretendard-subset.woff2") format("woff2"); font-weight: 45 920; font-style: normal; font-display: swap; }
/* 사이트 공통 틀 — 디자인 «흑백 미니멀 + 용어 노란 형광» (rules/design.md D-004~D-007, 2026-10-05 사람이 G4N 을 고름).
   검정·흰색이 바탕, 색은 노란 형광(용어·TL;DR)과 그래프·그림 안에만. 다크모드 없음 (D-002). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: #111;
  font-family: "Pretendard Variable", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.site-header, main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}
.site-title { font-weight: 600; font-size: .95rem; letter-spacing: .3em; text-transform: uppercase; color: inherit; text-decoration: none; }
.site-title::after { content: ""; display: inline-block; width: .5em; height: .5em; background: #ffd400; margin-left: .05em; vertical-align: .05em; } /* 사이트 표시 — TL;DR 머리와 같은 노란 ■ */
.site-header nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; }
.site-header nav a { color: #666; text-decoration: none; font-size: .85rem; }
.site-header nav a:hover { color: #111; }

main { padding-bottom: 4rem; }

a { color: #111; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cite { color: #888; }

/* 글 — 제목은 가운데, 장 제목 위에 검은 가는 선 (D-005) */
article[data-pagefind-body] > h1 { text-align: center; font-size: 2.1rem; font-weight: 800; line-height: 1.3; margin: 1rem 0 2rem; }
/* 부제(제목의 콜론 뒤) — 두 줄, 회색으로 작게 (사람 결정 2026-10-05, 안 A). 콜론은 화면에서만 숨겨 검색·낭독에는 «주제: 부제» 그대로 */
article[data-pagefind-body] > h1 .subtitle { display: block; font-size: .55em; font-weight: 500; color: #666; margin-top: .45em; }
@media (max-width: 480px) { article[data-pagefind-body] > h1 { font-size: 1.75rem; } } /* 휴대폰에서 주제가 한 줄에 들도록 (비교 페이지의 휴대폰 크기) */
article h2 { font-weight: 800; }
article[data-pagefind-body] > h2 { font-size: 1.2rem; margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid #111; }
article[data-pagefind-body] > h2::before { content: ""; display: inline-block; width: .55em; height: .55em; background: #ffd400; margin-right: .45em; vertical-align: .08em; } /* 번호 대신 노란 ■ */

/* 꾸밈 (2026-10-05 사람이 고름 — drafts/_design/decor.html): 정보 줄 · 링크·고른 글자 형광 · 넓은 화면 목차 · 캡션 번호 · 바닥글 */
.byline { text-align: center; font-size: .82rem; color: #777; margin: -1.2rem 0 1.8rem; }
.byline-tag { color: #333; text-decoration: none; background: #fff6b8; padding: 0 .35em; }
.byline-tag:hover { background: #ffe866; }
article a:not(.term):not(.cite):not(.byline-tag):hover { background: #ffe866; text-decoration-color: transparent; }
::selection { background: #ffe866; color: #111; }
.fig-no { font-weight: 700; color: #111; }
.toc { display: none; }
@media (min-width: 1200px) {
  .toc { display: block; position: fixed; top: 9rem; left: calc(50% - 21rem - 13.5rem); width: 12rem; font-size: .8rem; line-height: 1.5; }
  .toc a { display: block; color: #888; text-decoration: none; padding: .25rem 0 .25rem .7rem; border-left: 2px solid #e5e5e5; }
  .toc a:hover { color: #111; }
  .toc a.on { color: #111; border-left-color: #ffd400; }
}
.site-footer { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; border-top: 1px solid #111; display: flex; gap: 1rem; justify-content: center; align-items: baseline; font-size: .8rem; }
.site-footer a { color: #777; }
.site-footer .site-title { color: #111; font-size: .8rem; }

img, svg, canvas, video { max-width: 100%; height: auto; }

.post-list, .tag-list { list-style: none; padding: 0; margin: 0; }
.post-list li { margin: 0 0 2rem; }
.post-title { font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.post-summary { margin: 0.25rem 0; }
.post-meta { margin: 0; font-size: 0.875rem; color: #666; }
.post-meta a { color: inherit; }
.tag-list li { margin: 0 0 0.5rem; }
.count { color: #666; font-size: 0.875rem; }
.empty { color: #666; }

/* 출처가 아직 없는 사실 주장 (docs/DESIGN.md §5 article-draft) */
mark.needs-source { background: #fff3b0; }
mark.needs-source::after { content: " (확인 필요)"; font-size: 0.8em; color: #8a6d00; }

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

/* 용어 — 글 안의 용어 표시와 툴팁 (site/assets/terms.js), 용어 페이지 (/glossary/) */
a.term { color: inherit; text-decoration: none; background: #fff6b8; border-radius: 3px; padding: 0 .12em; cursor: help; } /* D-006 용어는 옅은 노란 형광 */
a.term:hover, a.term:focus { background: #ffe866; color: #111; }
.term-tip { position: absolute; z-index: 10; background: #fff; border: 1px solid #c9ced6; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: .6rem .8rem; font-size: .92rem; line-height: 1.6; }
.term-tip p { margin: .25rem 0 .4rem; }
.term-tip a { font-size: .85rem; }
.gl-intro, .gl-short, .gl-aka, .gl-status, .gl-crumb { color: #666; }
.gl-list { list-style: none; padding: 0; }
.gl-list li { margin: 0 0 .8rem; }
.gl-list .gl-short { display: block; font-size: .92rem; }
.gl-en { font-size: .6em; font-weight: 400; color: #777; }
.gl-en-ko { margin-top: -.6rem; font-size: .9rem; color: #666; }
.gl-lead { font-size: 1.1rem; }
.gl-status { font-size: .85rem; }
.gl-sources { font-size: .9rem; }

/* TL;DR — 본문 500자 이상인 글의 앞쪽 요약 (rules/writing.md W-004) */
.tldr { border: 1px solid #111; padding: .7rem 1rem; margin: 1rem 0 1.5rem; }
.tldr-h { margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; letter-spacing: .05em; color: #111; }
.tldr-h::before { content: "■ "; color: #ffd400; }
.tldr ul { margin: 0; padding-left: 1.1rem; }
.tldr li { margin: .2rem 0; }

/* 이어지는 글 — build 가 채운다 (설계 §3.2) */
.article-links { margin: 2.5rem 0 1.5rem; padding-top: 1rem; border-top: 1px solid #e3e6eb; }
.article-links h2 { margin-top: 0; }
.article-links ul { list-style: none; padding: 0; margin: 0; }
.article-links li { margin: .45rem 0; }
.link-kind { display: inline-block; min-width: 4.8rem; font-size: .8rem; color: #666; }
.soon-title { color: #555; }
.soon { font-size: .75rem; color: #888; border: 1px solid #c9ced6; border-radius: 4px; padding: 0 .3rem; }
.map-link { font-size: .85rem; margin-top: .8rem; }

/* 글과 용어 지도 */
.map { width: 100%; min-height: 440px; border: 1px solid #e3e6eb; border-radius: 8px; background: #fbfbfa; overflow: hidden; }
.map-svg { display: block; }
.map-svg .edge { stroke: #d5dae2; stroke-width: 1; }
.map-svg .edge-aa { stroke: #1a5fb4; stroke-width: 2; }
.map-svg .node circle { fill: #9db7e0; stroke: #fff; stroke-width: 2; }
.map-svg .node-a circle { fill: #1a5fb4; }
.map-svg .node-a.soon circle { fill: #fff; stroke: #1a5fb4; stroke-dasharray: 3 2; }
.map-svg .node text { font-size: 11px; fill: #555; paint-order: stroke; stroke: #fbfbfa; stroke-width: 3px; }
.map-svg .node-a text { font-size: 13px; font-weight: 700; fill: #222; }
.map-svg .node:focus { outline: none; }
.map-svg .node:focus circle, .map-svg .node:hover circle { stroke: #222; }
.map-svg .dim { opacity: .15; }
.map-list { margin-top: 1rem; font-size: .9rem; }
.map-out { color: #666; }

/* 시뮬레이터 — 흰 바탕, 검은 가는 테두리, 각진 모서리, 검은 버튼 (D-007). 글 전용 CSS 는 창 안쪽만 정한다 */
.sim { margin: 2rem 0; padding: 1rem; display: grid; gap: .75rem; background: #fff; border: 1px solid #111; }
.sim-q { font-weight: 700; }
.field { display: grid; gap: .25rem; font-size: .9rem; color: #555; }
.field.inline { display: inline-grid; }
.field input[type=text], .field select { font: inherit; color: #111; border: 1px solid #999; border-radius: 0; background: #fff; }
.field input[type=text] { font-size: 1.05rem; padding: .5rem .6rem; width: 100%; }
.field select { padding: .35rem; min-height: 2.75rem; } /* 손가락으로 누르기 좋은 높이 (44px) */
.controls { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.sim button { font: inherit; padding: .45rem .9rem; border: 1px solid #111; background: #111; color: #fff; cursor: pointer; }
.sim button.secondary { background: #fff; color: #111; }
.sim button:disabled { opacity: .4; cursor: default; }

/* 공유 설명 — 여러 글·용어 페이지가 함께 쓰는 설명 (설계 §3.3). 글에서는 펼쳐서, 용어 페이지에서는 접어서 */
.box { margin: 1.5rem 0; padding: .9rem 1rem; background: #fafafa; border: 1px solid #d5d9e0; border-left: 4px solid #111; }
.box-h { margin: 0 0 .5rem; font-size: .95rem; font-weight: 700; color: #111; } /* 머리말 없이 제목만 (사람 결정 2026-10-05) */
.box-h::before { content: "■ "; color: #ffd400; }
details.box > summary { cursor: pointer; font-size: .9rem; font-weight: 700; color: #222; }
details.box > summary::before { content: "■ "; color: #ffd400; }
details.box[open] > summary { margin-bottom: .5rem; }
.box-src { margin: .6rem 0 0; font-size: .78rem; color: #777; }
.box-src a { color: inherit; }
.box .diagram { margin: 1rem 0; }
.box .flow-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.box .diagram figcaption { font-size: .82rem; color: #666; }

/* 첫 화면 — 이어지는 줄기 (2026-10-05 사람이 고름, 글 목록 안 F). 줄기는 series.json, 고르기는 /assets/home.js */
.series-pick { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .5rem 0 2.2rem; }
.series-pick a { font-size: .82rem; text-decoration: none; padding: .2rem .7rem; border: 1px solid #111; color: #111; }
.series-pick a span { color: #888; font-size: .75rem; margin-left: .2em; }
.series-pick a.on { background: #111; color: #fff; }
.series-pick a.on span { color: #ccc; }
.series-js .series-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.series-h { font-size: 1rem; margin: 2rem 0 1rem; }
.post-list.stem { position: relative; padding-left: 1.6rem; }
.post-list.stem::before { content: ""; position: absolute; left: .32rem; top: .6rem; bottom: 1.2rem; width: 2px; background: #111; }
.post-list.stem li { position: relative; margin: 0 0 2rem; }
.post-list.stem li::before { content: ""; position: absolute; left: -1.6rem; top: .45rem; width: .75rem; height: .75rem; background: #ffd400; border: 2px solid #111; }
.post-list.stem li.later::before { background: #fff; }
.post-list.stem li.later .post-title { color: #999; font-weight: 600; }
.post-list.stem .rel { font-size: .75rem; color: #777; margin: 0 0 .1rem; }
.soon-tag { font-size: .72rem; color: #777; border: 1px solid #bbb; padding: 0 .35em; vertical-align: .15em; }
/* «모든 글» — 그림 위 카드 두 줄 (휴대폰 한 줄) */
.post-list.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; }
@media (max-width: 600px) { .post-list.cards { grid-template-columns: 1fr; } }
.post-list.cards li { margin: 0; border: 1px solid #111; display: flex; flex-direction: column; }
.post-list.cards .thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid #111; background: #f5f5f5; }
.post-list.cards .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.post-list.cards li:hover .thumb img { transform: scale(1.03); }
.post-list.cards .txt { padding: .8rem .9rem 1rem; }
.post-list.cards .post-title { font-size: 1.05rem; }


/* 세부 (2026-10-05 사람이 고름 — drafts/_design/details.html) */
/* 스켈레톤 안 2 «노란 ■ 깜빡임»: 그림이 오기 전 자리에 노란 ■ — 그림이 오면 그 위를 덮는다 (자바스크립트 없이) */
@keyframes sk-blink { 50% { opacity: .25; transform: scale(.8); } }
figure.hero, .post-list.cards .thumb { position: relative; background: #fafafa; }
figure.hero::before, .post-list.cards .thumb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #ffd400; animation: sk-blink 1s ease-in-out infinite; }
figure.hero img, .post-list.cards .thumb img { position: relative; }
/* 자바스크립트가 그리는 그래프: 그려지기 전 자리를 잡아 화면이 덜컹이지 않게 */
@media (scripting: enabled) {
  figure.chart:not(:has(svg))::before { content: ""; display: block; height: 180px; background: linear-gradient(#ffd400, #ffd400) center / 14px 14px no-repeat, #fafafa; animation: sk-blink 1s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { figure.hero::before, .post-list.cards .thumb::before, figure.chart::before { animation: none; } }

/* 장 제목 # 링크 (site.js 가 붙임) */
.h-anchor { margin-left: .35em; color: #bbb; text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .15s; }
h2:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor.copied { color: #111; opacity: 1; }
.h-anchor.copied::after { content: " 주소 복사됨"; font-size: .7em; color: #777; }
@media (hover: none) { .h-anchor { opacity: .6; } }

/* 키보드로 움직일 때 지금 위치를 노란 테두리로 */
:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }

/* 바깥 사이트로 가는 링크 뒤에 ↗ */
main a[href^="http"]:not([href^="https://hyun.today"])::after { content: "↗"; font-size: .75em; margin-left: .12em; color: #888; text-decoration: none; display: inline-block; }

/* 인쇄·PDF 저장: 메뉴·목차·바닥글·고르기는 빼고 글과 출처 주소만 */
@media print {
  .site-header nav, .toc, .site-footer, .series-pick, .h-anchor { display: none !important; }
  body { font-size: 11pt; }
  a { color: #000; }
  .sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  .sim { break-inside: avoid; }
  .sim::before { content: "시뮬레이터 — 화면에서 직접 해 보세요: https://hyun.today" ; display: block; font-size: .8em; color: #555; margin-bottom: .3em; }
  figure, table { break-inside: avoid; }
  h2 { break-after: avoid; }
}

/* 없는 페이지 (404) — CloudFront 오류 응답이 /404.html 을 보여 줄 때 */
.nf { text-align: center; padding-top: 2rem; }
.nf h1 { font-size: 3.2rem; letter-spacing: .08em; margin: 0 0 .5rem; }
.nf h1::after { content: ""; display: inline-block; width: .35em; height: .35em; background: #ffd400; margin-left: .05em; }