/* ═══════════════════════════════════════════════════════
   archive-article.css — 자료실 정적 글 페이지 전용 스타일
   build/generate_archive_pages.py가 생성하는 archive/**/*.html이
   이 파일을 링크한다. 지도 SPA(css/style.css)와는 완전히 분리된
   스타일시트다 — 이 페이지들은 지도 UI가 아니라 "글을 읽는 페이지"라
   era-hub·intro-page에서 쓰던 라이트 페이퍼 톤(#f7f4ef 배경·
   #3a352c 잉크·#b89860 골드 악센트)을 그대로 가져와 사이트 톤을
   유지하되, 지도 전용 CSS(고정 레이아웃·다크 배경 등)는 섞지 않는다.
   ═══════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #f7f4ef;
  color: #3a352c;
  font-family: -apple-system, 'Apple SD Gothic Neo', sans-serif;
  line-height: 1.75;
}

body {
  padding: 28px 20px 80px;
}

article {
  max-width: 680px;
  margin: 0 auto;
}

/* ── 브레드크럼 ── */
.breadcrumb {
  display: block;
  font-size: 12px;
  color: #a39a8c;
  letter-spacing: 0.2px;
  margin-bottom: 22px;
}
.breadcrumb a {
  color: #8a6a3a;
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }

/* ── 제목/메타 ── */
h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.4;
  margin-bottom: 10px;
}
.event-meta {
  font-size: 13px;
  color: #a39a8c;
  letter-spacing: 0.3px;
  margin-bottom: 26px;
}

/* ── 본문(주장/반박/서술) ── */
article section { margin-bottom: 22px; }
article section h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #6a655c;
}
article section p {
  font-size: 15.5px;
  color: #3a352c;
  white-space: pre-line;
}

.post-claim {
  background: rgba(122, 32, 32, 0.05);
  border-left: 3px solid rgba(122, 32, 32, 0.35);
  padding: 16px 18px;
  border-radius: 0 10px 10px 0;
}
.post-claim h2 { color: #7a2020; }

.post-rebuttal {
  background: rgba(58, 130, 97, 0.06);
  border-left: 3px solid rgba(58, 130, 97, 0.4);
  padding: 16px 18px;
  border-radius: 0 10px 10px 0;
}
.post-rebuttal h2 { color: #2c6b48; }

.post-body {
  background: #fff;
  border: 1px solid rgba(58,53,44,0.1);
  padding: 18px 20px;
  border-radius: 12px;
}

/* ── 출처 ── */
.post-sources {
  background: #fff;
  border: 1px solid rgba(58,53,44,0.1);
  border-radius: 12px;
  padding: 16px 20px;
}
.post-sources ul { list-style: none; }
.post-sources li {
  font-size: 13px; color: #55504a;
  padding: 6px 0;
  border-bottom: 1px solid rgba(58,53,44,0.06);
}
.post-sources li:last-child { border-bottom: none; }
.post-sources a { color: #8a6a3a; }
.source-type {
  display: inline-block; font-size: 10px; font-weight: 700;
  color: #8a6a3a; background: rgba(184,152,96,0.14);
  padding: 1px 6px; border-radius: 5px; margin-right: 6px;
}
.source-meta { color: #a39a8c; }

/* ── 관련 콘텐츠 ── */
.post-related {
  background: #fff;
  border: 1px solid rgba(58,53,44,0.1);
  border-radius: 12px;
  padding: 16px 20px;
}
.related-group { margin-bottom: 14px; }
.related-group:last-child { margin-bottom: 0; }
.related-group h3 {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px;
  color: #8a8276; margin-bottom: 6px;
}
.related-group ul { list-style: none; }
.related-group li { font-size: 13.5px; padding: 3px 0; }
.related-group a { color: #8a6a3a; }
.book-meta { color: #a39a8c; font-size: 12px; }

/* 관련 영상 — 썸네일 카드 (2026-08-05 신설).
   자료실 글에서 유튜브로 넘어가는 동선이 제목 텍스트뿐이라 눈에 띄지
   않던 것을 카드로 바꾼다. 페이퍼 톤을 깨지 않도록 테두리는 얇게, 재생
   버튼만 붉은 점으로 둔다. */
.related-group li.video-item { padding: 5px 0; }
.video-card {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border: 1px solid rgba(58,53,44,0.1); border-radius: 10px;
  text-decoration: none; background: #fffdf8;
  transition: border-color .15s ease;
}
.video-card:hover { border-color: #b89860; }
.video-thumb {
  position: relative; flex: 0 0 132px; width: 132px; aspect-ratio: 16 / 9;
  border-radius: 7px; overflow: hidden; background: #e8e2d6;
}
.video-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* hqdefault는 4:3 레터박스라 위아래 검은 띠가 생긴다 — 살짝 확대해 잘라낸다 */
.video-thumb img { transform: scale(1.35); }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 24px; border-radius: 6px; background: rgba(20,17,12,.72);
}
.video-play::after {
  content: ''; position: absolute; left: 13px; top: 6px;
  border-style: solid; border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}
.video-title {
  font-size: 13px; font-weight: 700; line-height: 1.5; color: #3a352c;
}
.video-sub {
  display: block; font-size: 11.5px; font-weight: 400; color: #a39a8c; margin-top: 3px;
}
@media (max-width: 520px) {
  .video-thumb { flex-basis: 104px; width: 104px; }
  .video-title { font-size: 12.5px; }
}

/* ── 시리즈 컨텍스트 / 목록(랜딩 페이지) ── */
.series-context, .series-list { font-size: 13.5px; color: #6a655c; }
.series-context a, .series-list a { color: #8a6a3a; }
.series-list h2 {
  font-size: 14px; font-weight: 800; margin-bottom: 12px; color: #3a352c;
}
.wp-list, .route-wp-list { list-style: none; }
.wp-list li, .route-wp-list li {
  padding: 10px 0; border-bottom: 1px solid rgba(58,53,44,0.08);
  font-size: 14.5px;
}
.wp-list li:last-child, .route-wp-list li:last-child { border-bottom: none; }
.wp-date { color: #a39a8c; font-size: 12.5px; margin-left: 4px; }

/* ── 이전/다음 페이지 네비게이션 ── */
.wp-pager {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; margin-top: 8px;
  padding-top: 16px; border-top: 1px solid rgba(58,53,44,0.1);
}
.wp-pager a { color: #8a6a3a; text-decoration: none; }
.wp-pager a:hover { text-decoration: underline; }

/* ── 지도 CTA / 링크 공통 ── */
a { color: #8a6a3a; }
.map-cta { margin-top: 10px; }
.map-cta a {
  display: inline-block; font-size: 13px; font-weight: 700;
  color: #fff; background: #3a352c;
  padding: 9px 16px; border-radius: 8px; text-decoration: none;
}
.map-cta a:hover { background: #2a2620; }

.summary { font-size: 15.5px; color: #55504a; margin-bottom: 20px; }

/* ── 사건카드 전용: 처리 경과(stages)·역사적 평가(legacy) ──
   generate_archive_pages.py의 format:'case_tracking' 지원 확장과 짝을
   이룬다(docs/power_accountability_roadmap.md §3). */
.post-stages ol { list-style: none; counter-reset: stage; }
.post-stages li {
  counter-increment: stage;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid #e7e0d3;
  position: relative;
}
.post-stages li:last-child { border-bottom: none; }
.post-stages li::before {
  content: counter(stage);
  position: absolute;
  left: 0;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #b89860;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}
.stage-date { color: #a39a8c; font-size: 12.5px; margin-right: 6px; }
.stage-name { font-weight: 700; }
.stage-institution { color: #6a655c; font-size: 13px; }
.stage-detail { display: block; font-size: 13.5px; color: #55504a; margin-top: 2px; }
.stage-result { display: block; font-size: 13.5px; color: #7a5a20; margin-top: 2px; font-weight: 600; }
.post-legacy { background: #f0ebe0; padding: 16px 18px; border-radius: 4px; }
.post-legacy h2 { color: #5a3d2b; }

@media (max-width: 640px) {
  body { padding: 20px 16px 60px; }
  h1 { font-size: 21px; }
}

/* ── 사료읽기(source_reading) 전용 ── */
.post-original {
  background: rgba(140, 107, 46, 0.07);
  border-left: 3px solid rgba(140, 107, 46, 0.45);
  padding: 16px 18px;
  border-radius: 0 10px 10px 0;
}
.post-original h2 { color: #6e5524; }
.post-original blockquote {
  margin: 0;
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  font-size: 1.02em;
  line-height: 1.85;
}
.post-original .source-note {
  margin-top: 10px;
  font-size: 0.85em;
  color: #8a8172;
}

.post-translation {
  background: #fff;
  border: 1px solid rgba(58,53,44,0.1);
  padding: 16px 18px;
  border-radius: 12px;
}
.post-translation h2 { color: #3a352c; }

.post-commentary {
  background: rgba(61, 74, 92, 0.06);
  border-left: 3px solid rgba(61, 74, 92, 0.4);
  padding: 16px 18px;
  border-radius: 0 10px 10px 0;
}
.post-commentary h2 { color: #3d4a5c; }

/* ── 연작 시리즈 내비게이션 바 (권력과 책임 4부작) ── */
/* 2026-07 두목님 피드백: 4개 시리즈가 자료실 목록에 흩어져 몰입이 끊긴다는
   지적에 따라, 이 그룹에 속한 모든 글/랜딩 페이지 상단에 자동 삽입된다.
   (build/generate_archive_pages.py의 render_story_group_nav 참조) */
.story-group-nav {
  background: rgba(90, 59, 59, 0.06);
  border: 1px solid rgba(90, 59, 59, 0.18);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
}
.story-group-nav p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: #6b5252;
}
.story-group-nav a {
  color: #7a4a4a;
  text-decoration: none;
}
.story-group-nav a:hover { text-decoration: underline; }
.story-group-nav strong {
  color: #3a2c2c;
  font-weight: 700;
}

/* ── 허브 페이지: 부(部) 카드 목록 ── */
.story-parts { list-style: none; padding: 0; }
.story-part {
  border: 1px solid rgba(58,53,44,0.12);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #fff;
}
.story-part a { text-decoration: none; }
.story-part strong {
  font-size: 16px;
  color: #3a2c2c;
}
.story-part .summary { margin: 6px 0 4px; font-size: 14px; }
.story-part .wp-date { margin-left: 0; }

/* ═══════════════════════════════════════════════════════
   인물 사전 (character_sheet 포맷) — 2026-07-19 신설
   그리스·로마·북유럽 신화 인물 카드에 공용으로 쓰는 스타일.
   기존 아티클의 세피아 톤을 그대로 계승한다.
   ═══════════════════════════════════════════════════════ */
.char-table {
  width: 100%; border-collapse: collapse; margin: 4px 0 8px;
  font-size: 15px;
}
.char-table th {
  text-align: left; vertical-align: top;
  width: 128px; padding: 7px 12px 7px 0;
  color: #8a6a3a; font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid rgba(184,152,96,0.18);
}
.char-table td {
  padding: 7px 0; color: #3a352c;
  border-bottom: 1px solid rgba(184,152,96,0.18);
}
.char-info { margin-bottom: 18px; }
.char-lineage { margin: 18px 0; }
.char-lineage h2, .char-stories h2, .char-legacy h2 {
  font-size: 18px; color: #6a655c; margin-bottom: 8px;
}
.char-story { margin-bottom: 16px; }
.char-story h3 {
  font-size: 15.5px; color: #8a6a3a; margin: 0 0 4px;
}
.char-story p { margin: 0; line-height: 1.75; color: #3a352c; }
.char-legacy {
  margin-top: 20px; padding: 14px 16px;
  background: rgba(184,152,96,0.09);
  border-left: 3px solid rgba(184,152,96,0.5);
  border-radius: 3px;
}
.char-legacy h2 { margin-top: 0; }
.char-legacy p { margin: 0; line-height: 1.75; color: #55504a; }

/* ── 스크랩 버튼 (2026-07-28) ─────────────────────────────
   자료실 글을 「나의 서재」에 담는 버튼. 지도 정보카드의 같은 이름
   버튼과 시각적으로 통일한다. 저장은 localStorage(growth.js)라
   로그인 없이 동작하고, 기기 간 동기화는 되지 않는다. */
.scrap-btn {
  display:inline-flex; align-items:center; gap:5px;
  margin:2px 0 18px; padding:6px 13px;
  background:transparent; color:#8a6a24;
  border:1px solid rgba(138,106,36,0.5); border-radius:999px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.3px;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.scrap-btn:hover { background:rgba(184,152,96,0.14); }
.scrap-btn.is-on { background:#c8a827; color:#241f18; border-color:#c8a827; }

/* ── 붕당 논쟁(faction_debate) — 2026-07-31 신설 ────────────────
   조선 붕당사 시리즈 전용. 두 세력의 입장을 나란히 놓고, 판정 대신
   "나였다면"을 묻는 구조. 색은 각 카드의 --fd 변수로 세력마다 다르다. */
.post-factions .fd-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 640px) {
  .post-factions .fd-grid { grid-template-columns: 1fr; }
}
.fd-card {
  background: #fff; border: 1px solid rgba(58,53,44,0.12);
  border-top: 3px solid var(--fd, #8a8276);
  padding: 15px 17px; border-radius: 10px;
}
.fd-card h3 {
  font-size: 16px; margin: 0 0 4px; color: var(--fd, #3a352c); letter-spacing: -0.2px;
}
.fd-card .fd-leaders {
  font-size: 13px; color: #6b6455; margin: 0 0 10px; font-weight: 600;
}
.fd-card p { font-size: 15px; line-height: 1.75; }
.fd-card .fd-basis {
  margin-top: 10px; padding-top: 10px; font-size: 13.5px; color: #5d574a;
  border-top: 1px dashed rgba(58,53,44,0.18);
}
.fd-card .fd-basis b { color: var(--fd, #3a352c); }

.post-outcome {
  background: #fff; border: 1px solid rgba(58,53,44,0.1);
  padding: 18px 20px; border-radius: 12px;
}
.post-question {
  background: rgba(184, 152, 96, 0.09);
  border-left: 3px solid rgba(184, 152, 96, 0.6);
  padding: 16px 18px; border-radius: 0 10px 10px 0;
}
.post-question h2 { color: #8a6a20; }
.post-question p { font-size: 15.5px; }

.post-mirror {
  background: rgba(60, 74, 107, 0.06);
  border-left: 3px solid rgba(60, 74, 107, 0.4);
  padding: 16px 18px; border-radius: 0 10px 10px 0;
}
.post-mirror h2 { color: #3a4a6b; }

/* ── 사상가 프로필(thinker) — 2026-08-01 신설 ────────────────
   조선 사상사 시리즈 전용. 생애 → 핵심 사상 → 당대의 역할 →
   논쟁 → 오늘 읽기 순서. */
.post-thinker-meta {
  background: rgba(107, 91, 62, 0.06);
  border: 1px solid rgba(107, 91, 62, 0.18);
  padding: 14px 18px; border-radius: 10px;
}
.post-thinker-meta .tk-row {
  display: flex; gap: 12px; font-size: 14px; line-height: 1.7;
  padding: 5px 0;
}
.post-thinker-meta .tk-row + .tk-row { border-top: 1px dashed rgba(58,53,44,0.14); }
.post-thinker-meta dt { flex: 0 0 66px; color: #6b5b3e; font-weight: 700; }
.post-thinker-meta dd { flex: 1; color: #3a352c; }

.post-core {
  background: rgba(107, 91, 62, 0.07);
  border-left: 3px solid rgba(107, 91, 62, 0.5);
  padding: 16px 18px; border-radius: 0 10px 10px 0;
}
.post-core h2 { color: #6b5b3e; }
.post-core p { font-size: 15.5px; }

.post-role {
  background: #fff; border: 1px solid rgba(58,53,44,0.1);
  padding: 18px 20px; border-radius: 12px;
}
.post-controversy {
  background: rgba(122, 32, 32, 0.05);
  border-left: 3px solid rgba(122, 32, 32, 0.32);
  padding: 16px 18px; border-radius: 0 10px 10px 0;
}
.post-controversy h2 { color: #7a2020; }

.post-today {
  background: rgba(60, 74, 107, 0.06);
  border-left: 3px solid rgba(60, 74, 107, 0.4);
  padding: 16px 18px; border-radius: 0 10px 10px 0;
}
.post-today h2 { color: #3a4a6b; }

/* ═══════════════════════════════════════════════════════
   사건(event)·루트(route) 정적 페이지 (2026-08-14 추가)

   ■ 무엇이 문제였나
     event/*.html 2,013장과 route/*.html 56장이 스타일시트를 링크하지
     않고 있었다. 링크된 것은 /css/namu.css 하나뿐인데, 그 파일은
     「나의 역사 나무」개인 페이지 전용이라 .namu-page 아래에서만
     동작하고 색상 토큰(--ink/--paper)도 portal.css에 있다. 즉 사건
     페이지에는 아무 스타일도 적용되지 않았다.
     (namu.css는 namuBadge.js가 넣는 '서재에 담기' 배지 때문에 링크된
      것으로 보인다. 페이지 스타일시트를 빠뜨린 것이다.)

     자료실(archive/*)만 이 파일을 링크해 정상으로 보였고, 그래서 오래
     드러나지 않았다. 답사 카드의 atlasCards 딥링크가 사건 페이지로
     향하면서 눈에 띄었다.

   ■ 왜 새 파일을 만들지 않았나
     이 파일이 이미 .breadcrumb / h1 / .event-meta / .summary /
     .wp-pager / .map-cta / .scrap-btn / .route-wp-list / .wp-date 를
     정의하고 있다. 사건 페이지 마크업과 그대로 겹친다. 새 파일을 만들면
     같은 규칙이 두 벌이 되고 언젠가 갈라진다.
     아래는 사건·루트 페이지에만 있고 여기 없던 것들만 채운 것이다.
   ═══════════════════════════════════════════════════════ */

/* ── 섹션 제목 (관련 인물 / 관련 사건 / 참고 자료 / 타임라인) ── */
.people > h2,
.related > h2,
.sources-section > h2,
.route-timeline > h2,
.route-archives > h2 {
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #6b5b3e;
  margin-bottom: 10px;
}

/* ── 목록 공통 — 사건·인물·자료 ── */
.related-events,
.related-people,
.sources,
.route-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.related-events li,
.related-people li,
.sources li,
.route-archive-list li {
  font-size: 14.5px;
  line-height: 1.7;
  padding: 5px 0 5px 13px;
  position: relative;
}
.related-events li::before,
.related-people li::before,
.sources li::before,
.route-archive-list li::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: #b89860;
  font-weight: 700;
}
.related-events a,
.route-archive-list a,
.sources a {
  color: #8a6a3a;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 106, 58, 0.28);
}
.related-events a:hover,
.route-archive-list a:hover,
.sources a:hover { border-bottom-color: #8a6a3a; }

/* 인물은 링크가 아니라 이름만 있는 경우가 많다 — 태그처럼 보이게 */
.related-people { display: flex; flex-wrap: wrap; gap: 6px; }
.related-people li {
  padding: 3px 10px;
  background: rgba(184, 152, 96, 0.12);
  border-radius: 999px;
  font-size: 13.5px;
}
.related-people li::before { content: none; }

/* 참고 자료는 본문보다 한 단계 물러나야 한다 */
.sources li { font-size: 13.5px; color: #6f675a; }

/* ── 루트 안의 한 장면임을 알리는 줄 ── */
.route-context {
  background: rgba(184, 152, 96, 0.1);
  border-left: 3px solid rgba(184, 152, 96, 0.55);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  margin: 22px 0;
}
.route-context p { font-size: 14px; color: #6b5b3e; margin: 0; }
.route-context a { color: #8a6a3a; font-weight: 700; }

/* ── 자료실로 넘어가는 링크 ── */
.archive-cta { margin: 18px 0; }
.archive-cta a {
  display: inline-block;
  padding: 9px 16px;
  background: rgba(184, 152, 96, 0.16);
  border: 1px solid rgba(184, 152, 96, 0.42);
  border-radius: 8px;
  font-size: 14px; font-weight: 700; color: #6b5b3e;
  text-decoration: none;
}
.archive-cta a:hover { background: rgba(184, 152, 96, 0.26); }

/* ── 의혹·주장 표기 — 사실과 구분되어야 한다 ── */
.allegation-note {
  background: rgba(122, 32, 32, 0.05);
  border-left: 3px solid rgba(122, 32, 32, 0.3);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  color: #6f675a;
  margin: 18px 0;
}

/* ── 형제 사이트 푸터 ── */
.mk-siblings {
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid rgba(58, 53, 44, 0.12);
  font-size: 12.5px;
  color: #a39a8c;
  text-align: center;
}
.mk-siblings a { color: #8a6a3a; text-decoration: none; }
.mk-siblings a:hover { text-decoration: underline; }

/* ── 루트 타임라인 ── */
.route-timeline { margin-top: 30px; }

/* ── 좁은 화면 ── */
@media (max-width: 520px) {
  body { padding: 20px 16px 60px; }
  h1 { font-size: 22px; }
}