/* koduck — 공유 기사 스타일 (모든 기사 공통. 여기 한 곳만 고치면 전 기사 반영) */
*{box-sizing:border-box;}
body{ margin:0; background:#fff; color:#333; font-family:'Nunito','Apple SD Gothic Neo','Malgun Gothic',sans-serif; -webkit-font-smoothing:antialiased; }
.post{ max-width:600px; margin:0 auto; padding:36px 24px 70px; }
.post-title{ font-size:23px; font-weight:700; line-height:1.5; letter-spacing:-0.5px; text-align:center; color:#1a1a1a; margin:6px 0 0; }
.byline{ text-align:center; color:#a0a0a0; font-size:14px; margin:12px 0 0; }
.byline strong{ color:#666; }
.byline .upd{ display:block; margin-top:4px; font-size:13px; color:#e5372b; }
.title-rule{ border:0; border-top:1px solid #e6e6e6; margin:26px 0 38px; }
.body{ text-align:left; font-size:17px; line-height:2.1; color:#3a3a3a; }
.body p{ margin:0 0 34px; }
.figure{ margin:6px 0 12px; }
.figure img{ width:100%; height:auto; border-radius:8px; display:block; }
.figure figcaption{ font-size:14px; color:#a0a0a0; text-align:center; margin:14px 0 34px; }
.section-head{ text-align:center; margin:50px 0 26px; }
.section-head .q-open, .section-head .q-close{ display:block; font-family:Georgia,serif; font-size:42px; line-height:0.5; color:#d2d2d2; }
.section-head .q-open{ margin-bottom:24px; }
.section-head .q-close{ margin-top:30px; }
.section-head .hook{ font-size:23px; font-weight:800; font-style:italic; font-family:'Georgia','Nanum Myeongjo',serif; color:#1a1a1a; margin:0; }
.section-head .subtitle{ font-size:15px; color:#a8a8a8; margin-top:16px; font-weight:500; }
.numhead{ font-size:18px; font-weight:800; color:#1a1a1a; margin:44px 0 30px; text-align:center; }

/* ================= 박스 컴포넌트 (디자인 시스템 — 전 기사 공통. 글별 extraCss에 박스 CSS 복붙 금지) ================= */
/* 요약 박스: 스포일러=분홍(기본) / 긍정=초록(.good) */
.body .ans{ border:1.5px solid #f2c9c5; background:#fff5f4; border-radius:12px; padding:14px 18px; max-width:520px; margin:30px auto; text-align:left; line-height:1.55; }
.body .ans .q{ font-weight:800; color:#c0392b; font-size:15.5px; line-height:1.3; margin:0 0 5px; }
.body .ans p{ margin:0; font-size:15px; line-height:1.6; }
.body .ans.good{ border-color:#cfe3d6; background:#f5faf6; }
.body .ans.good .q{ color:#2e8b57; }
/* 정보/팁 박스: 회색 + 빨강 라인 (.info = .infocard) */
.body .info, .body .infocard{ border:1.5px solid #eef0f2; border-left:4px solid #e5372b; border-radius:12px; background:#fafafa; padding:16px 18px; max-width:540px; margin:30px auto; text-align:left; line-height:1.55; }
.body .info .t, .body .infocard .t{ font-weight:800; color:#e5372b; font-size:13.5px; line-height:1.3; letter-spacing:.2px; margin-bottom:8px; }
.body .info p, .body .infocard p{ margin:0 0 5px; font-size:15px; line-height:1.6; }
.body .info .k, .body .infocard .k{ font-weight:700; color:#555; }
/* 라벨-값 표 (.rows): 인물별 결말·정보 정리. 회색 라벨 + 값 2열, 모바일 1열 */
.body .rows{ border:1.5px solid #eef0f2; border-radius:12px; background:#fafafa; padding:6px 20px; max-width:560px; margin:30px auto; text-align:left; }
.body .rows .t{ font-weight:800; color:#e5372b; font-size:13.5px; line-height:1.3; letter-spacing:.2px; padding:14px 0 2px; }
.body .rows .row{ display:grid; grid-template-columns:minmax(104px,auto) 1fr; gap:16px; padding:13px 0; }
.body .rows .row + .row{ border-top:1px solid #ebedf0; }
.body .rows .t + .row{ border-top:0; }
.body .rows .k{ font-weight:700; color:#8a8f96; font-size:14.5px; line-height:1.6; }
.body .rows .k small{ display:block; font-weight:400; font-size:12.5px; color:#aab0b7; line-height:1.4; margin-top:1px; }
.body .rows .v{ font-size:15px; line-height:1.6; color:#222; }
@media (max-width:480px){
  .body .rows{ padding:6px 16px; }
  .body .rows .row{ grid-template-columns:1fr; gap:2px; }
}
/* 개념 설명 박스 (빨간 pill 태그) */
.body .explainer{ max-width:520px; margin:30px auto; background:#f7f8fb; border:1px solid #e2e6f0; border-radius:12px; padding:20px 22px; text-align:left; font-size:15px; line-height:1.85; color:#3a3a3a; }
.body .explainer .tag{ display:inline-block; background:#e5372b; color:#fff; font-size:12px; font-weight:700; line-height:1.3; padding:3px 11px; border-radius:20px; margin-bottom:12px; }
.body .explainer b{ color:#1a1a1a; }
.body .explainer p{ margin:0 0 12px; }
.body .explainer p:last-child{ margin:0; }
/* 강조 한 줄 */
.body .highlight{ background:#fff4f4; border:1.5px solid #f0c9c9; border-radius:12px; padding:18px 20px; margin:30px auto; max-width:520px; font-size:16px; font-weight:700; color:#c0392b; line-height:1.6; }
/* 인용 카드 (검정 배경) */
.body .quote-card{ border-radius:14px; padding:32px 24px; background:#0f1622; color:#fff; text-align:center; margin:30px auto; max-width:560px; }
.body .quote-card .mark{ font-family:Georgia,serif; font-size:44px; color:#e5372b; line-height:.4; }
.body .quote-card .txt{ font-size:20px; font-weight:800; line-height:1.5; margin:14px 0 8px; }
.body .quote-card .who{ font-size:13px; color:#9aa5b1; }
/* FAQ/섹션 질문 헤더 */
.body .q{ font-size:18px; font-weight:700; color:#1a1a1a; margin:40px 0 28px; }
/* 본문 링크 */
.body a{ color:#e5372b; font-weight:700; text-decoration:none; border-bottom:1px solid #f2b8b3; }
.body a:hover{ border-bottom-color:#e5372b; }
/* 영상 임베드 반응형 */
.figure iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:8px; display:block; }
/* 박스 안 마지막 요소 아래여백 0 → 상하 패딩 대칭 */
.body .ans > :last-child, .body .info > :last-child, .body .infocard > :last-child, .body .explainer > :last-child, .body .quote-card > :last-child{ margin-bottom:0; }

/* 기사 상단 kicker(작품 태그) + 하단 칩(배우·태그) — 2026-07-27 신설.
   목록 카드가 「태그 + 제목」을 함께 보여주는데 기사 페이지엔 작품명이 아예 없었다.
   사람에겐 "이 작품 글 모아보기" 입구가 되고, 검색엔진엔 기사 77편 → 태그 페이지로 가는 내부링크가 된다. */
.post-kicker{ display:inline-block; margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.01em;
  color:#e5372b; text-decoration:none; }
.post-kicker:hover{ text-decoration:underline; }
.post-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.post-tag{ display:inline-block; padding:4px 10px; border:1px solid #eef0f2; border-radius:14px;
  background:#fafafa; color:#8a9099; font-size:12.5px; text-decoration:none; }
.post-tag:hover{ border-color:#dcdfe3; color:#1f1f1f; }

/* ── 태그 페이지 본문 (2026-07-27) — 요약 + 인물 관계도 + 자주 찾는 질문.
   관계도는 SVG·라이브러리 없이 HTML/CSS 로만 그린다: 의존성 0, 모바일에서 1열로 접히고,
   전부 텍스트라 검색엔진이 읽는다. */
.tx-intro{ margin:0 0 18px; }
.tx-intro p{ margin:0 0 10px; font-size:16px; line-height:1.75; color:#1f1f1f; }
.tx-h2{ font-size:19px; margin:30px 0 12px; padding-bottom:8px; border-bottom:1.5px solid #eef0f2; }
.tx-note{ margin:0 0 14px; font-size:13.5px; color:#8a9099; }
.tx-facts{ list-style:none; margin:0 0 6px; padding:14px 16px; background:#fafafa;
  border:1px solid #eef0f2; border-radius:12px; }
.tx-facts li{ font-size:14.5px; line-height:1.7; color:#1f1f1f; }
.tx-facts li b{ display:inline-block; min-width:96px; color:#8a9099; font-weight:700; }

/* 관계도 */
.tx-hero .tx-person{ border-color:#e5372b; background:#fff8f7; }
.tx-hero{ margin:0 0 6px; }
.tx-groups{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:720px){ .tx-groups{ grid-template-columns:1fr; } }
.tx-group{ border:1px solid #eef0f2; border-radius:12px; padding:12px 12px 6px; background:#fff; }
.tx-g-label{ font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#8a9099; margin:0 0 10px; }
.tx-g-items{ display:flex; flex-direction:column; gap:10px; }
.tx-person{ border:1.5px solid #eef0f2; border-radius:10px; padding:10px 12px; background:#fff; }
.tx-p-name{ font-size:15.5px; font-weight:800; color:#1f1f1f; }
.tx-p-actor{ font-size:13px; color:#e5372b; font-weight:700; margin-top:1px; }
.tx-p-rel{ font-size:12.5px; color:#8a9099; margin-top:2px; }
.tx-p-note{ margin:7px 0 0; font-size:14px; line-height:1.65; color:#3d4147; }

/* 자주 찾는 질문 */
.tx-qa ul{ list-style:none; margin:0; padding:0; }
.tx-qa li{ padding:11px 0; border-bottom:1px solid #eef0f2; font-size:15px; line-height:1.6; }
.tx-qa li:last-child{ border-bottom:0; }
.tx-q-link{ color:#e5372b; font-weight:700; text-decoration:none; white-space:nowrap; }
.tx-q-link:hover{ text-decoration:underline; }







/* ══ 태그 페이지 (2026-07-27) ═══════════════════════════════════════════
   ★반구석 백오피스 디자인 언어를 따른다: 흰 카드 + #E2E6EF 테두리 + radius 12,
     #f4f6fa 톤의 수치 칩, pill 태그(radius 20 / weight 800), 보라 액센트(#5b46c4).
   ★폰트: 본문 16 / 보조 14 하한. 그보다 작게 쓰지 않는다.
   ★모바일(≤700px): 관계도를 가로 스크롤로 밀지 않고 <b>인물 카드 목록</b>으로 교체한다. */
.rp{ --ink:#1a1a1a; --sub:#6b7280; --mute:#98a0ad; --line:#E2E6EF; --hair:#ecedf0;
  --soft:#f4f6fa; --acc:#5b46c4; font-size:16px; }

/* KPI 카드 */
.rp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:10px 0 28px; }
@media(max-width:700px){ .rp-stats{ grid-template-columns:repeat(2,1fr); gap:8px; } }
.rp-stat{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.rp-stat-label{ font-size:14px; font-weight:700; color:var(--sub); }
.rp-stat-value{ margin-top:6px; font-size:24px; font-weight:800; color:#2c3441; line-height:1.2;
  letter-spacing:-.4px; }
.rp-stat-sub{ margin-top:5px; font-size:14px; color:var(--mute); line-height:1.5; }

/* 리드 */
.rp-lead p{ margin:0 0 12px; font-size:17px; line-height:1.8; color:#55606a; }

/* 섹션 — 무거운 검은 밑줄 대신 pill 번호 + 얇은 헤어라인 */
.rp-sec{ margin:32px 0 0; }
.rp-sec-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.rp-sec-n{ font-size:13px; font-weight:800; color:#fff; background:var(--acc);
  border-radius:20px; padding:3px 10px; letter-spacing:.02em; }
.rp-sec-head h2{ margin:0; font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.3px; }
.rp-sec-note{ margin-left:auto; font-size:14px; color:var(--mute); }

/* 기본정보 표 — 백오피스 rb-tablewrap 결 */
.rp-table{ width:100%; border-collapse:collapse; font-size:16px;
  border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:#fff; }
.rp-table tr + tr{ border-top:1px solid var(--hair); }
.rp-table th{ width:32%; padding:14px 16px; text-align:left; vertical-align:top;
  background:#fbfcfd; color:#9aa1ab; font-weight:600; font-size:15px; }
.rp-table td{ padding:14px 16px; color:#2c3441; line-height:1.7; }
@media(max-width:600px){
  .rp-table, .rp-table tbody, .rp-table tr, .rp-table th, .rp-table td{ display:block; width:auto; }
  .rp-table tr + tr{ border-top:1px solid var(--hair); }
  .rp-table th{ padding:12px 14px 2px; background:transparent; font-size:14px; }
  .rp-table td{ padding:0 14px 12px; }
}

/* 자주 묻는 것 — 카드 */
.rp-qa{ display:flex; flex-direction:column; gap:10px; }
.rp-qa-row{ display:flex; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; }
.rp-qa-n{ flex:0 0 auto; font-size:15px; font-weight:800; color:#c9cede; padding-top:2px; }
.rp-qa-body h3{ margin:0 0 6px; font-size:17px; font-weight:800; color:var(--ink); line-height:1.5;
  letter-spacing:-.2px; }
.rp-qa-body p{ margin:0; font-size:16px; line-height:1.75; color:#55606a; }
.rp-link{ display:inline-block; margin-top:9px; font-size:15px; font-weight:800; color:var(--acc);
  text-decoration:none; }
.rp-link:hover{ text-decoration:underline; }
.rp-postnote{ margin:-4px 0 12px; font-size:14px; color:var(--mute); }
@media(max-width:600px){ .rp-qa-row{ padding:14px 15px; gap:11px; } }



/* 섹션 note 는 모바일에서 제목 아래로 (오른쪽 정렬이면 어색하게 떨어진다) */
@media(max-width:600px){ .rp-sec-note{ margin-left:0; flex-basis:100%; } }




/* ── 등장인물 (그룹별). 주요 인물만 사진 카드, 나머지는 한 줄 행.
   21명을 전부 큰 카드로 깔면 스크롤만 길어져서 오히려 안 읽힌다. */
.ch-group{ margin:0 0 22px; }
.ch-group:last-child{ margin-bottom:0; }
.ch-g-head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:0 0 10px; }
.ch-g-head b{ font-size:15px; font-weight:800; color:#5b46c4; }
.ch-g-head span{ font-size:14px; color:#98a0ad; }

/* 주요 인물 — 사진 카드 */
.ch-leads{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:820px){ .ch-leads{ grid-template-columns:1fr; } }
.ch-lead{ display:flex; gap:14px; background:#fff; border:1px solid #E2E6EF; border-radius:12px;
  padding:15px 16px; text-decoration:none; color:inherit; transition:border-color .14s, box-shadow .14s; }
.ch-lead.is-link:hover{ border-color:#c9cfd6; box-shadow:0 2px 10px rgba(20,21,24,.07); }
.ch-photo{ flex:0 0 auto; width:64px; height:64px; border-radius:50%; overflow:hidden; background:#f4f6fa;
  display:flex; align-items:center; justify-content:center; }
.ch-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ch-photo i{ font-style:normal; font-size:18px; font-weight:800; color:#98a0ad; }
.ch-body{ min-width:0; display:flex; flex-direction:column; }
.ch-name{ font-size:17px; font-weight:800; color:#1a1a1a; letter-spacing:-.2px; }
.ch-lead.is-link:hover .ch-name{ text-decoration:underline; }
.ch-actor{ margin-top:1px; font-size:15px; font-weight:700; color:#5b46c4; }
.ch-role{ margin-top:2px; font-size:14px; color:#98a0ad; }
.ch-note{ margin-top:8px; font-size:15px; line-height:1.7; color:#55606a; }

/* 그 외 인물 — 한 줄 행 */
.ch-rows{ border:1px solid #ecedf0; border-radius:12px; overflow:hidden; background:#fff; }
.ch-row{ display:block; padding:13px 16px; text-decoration:none; color:inherit; }

.ch-row.is-link:hover{ background:#fbfcfd; }
.ch-row-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ch-row-head b{ font-size:16px; font-weight:800; color:#1a1a1a; }
.ch-row-head em{ font-style:normal; font-size:15px; font-weight:700; color:#5b46c4; }
.ch-row-role{ font-size:14px; color:#98a0ad; }
.ch-row-note{ display:block; margin-top:5px; font-size:15px; line-height:1.7; color:#55606a; }

/* 목차 — 한 페이지에 다 담는 대신 이동 수단을 준다(나무위키의 목차와 같은 역할). */
.rp-toc{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 22px;
  padding:13px 15px; background:#f4f6fa; border:1px solid #E2E6EF; border-radius:12px; }
.rp-toc b{ font-size:14px; font-weight:800; color:#98a0ad; margin-right:2px; }
.rp-toc a{ font-size:15px; font-weight:700; color:#5b46c4; text-decoration:none;
  background:#fff; border:1px solid #ddd8f5; border-radius:20px; padding:5px 12px; }
.rp-toc a:hover{ background:#5b46c4; border-color:#5b46c4; color:#fff; }
.rp-sec{ scroll-margin-top:72px; }


/* 인물 행 — 카드 하나 = 인물 하나. 데스크톱 2열로 컴팩트하게, 모바일 1열.
   긴 설명은 접고, 펼치기 표시는 화살표만 둔다(이름을 다시 쓰면 카드와 중복된다). */
.ch-rows{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:820px){ .ch-rows{ grid-template-columns:1fr; } }
.ch-item{ position:relative; background:#fff; border:1px solid #E2E6EF; border-radius:12px;
  scroll-margin-top:78px; }
.ch-item:target{ border-color:#c9bfff; box-shadow:0 0 0 2px rgba(124,92,255,.12); }
.ch-rows .ch-row{ display:block; padding:13px 44px 12px 15px; text-decoration:none; color:inherit; }
.ch-rows .ch-row.is-link:hover{ background:#fbfcfd; border-radius:12px; }
.ch-hook{ display:block; margin-top:5px; font-size:15px; line-height:1.65; color:#55606a; }

/* 펼치기 — 오른쪽 위 화살표 버튼 */
.ch-more{ }
.ch-more > summary{ position:absolute; right:9px; top:11px; width:28px; height:28px;
  cursor:pointer; list-style:none; border-radius:8px; border:1px solid #E2E6EF; background:#fff; }
.ch-more > summary::-webkit-details-marker{ display:none; }
.ch-more > summary::after{ content:""; position:absolute; left:9px; top:10px;
  width:8px; height:8px; border-right:2px solid #8a92a6; border-bottom:2px solid #8a92a6;
  transform:rotate(45deg); transition:transform .16s; }
.ch-more > summary:hover{ border-color:#c9bfff; background:#f7f5ff; }
.ch-more[open] > summary::after{ transform:rotate(-135deg); top:13px; }
.ch-more p{ margin:0; padding:0 15px 14px; font-size:15px; line-height:1.8; color:#55606a;
  border-top:1px solid #f2f4f6; padding-top:11px; }
.site-top{position:sticky;top:0;z-index:30;border-bottom:1px solid #eef0f2;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.site-top .in{max-width:960px;margin:0 auto;padding:0 20px;display:flex;align-items:center;height:60px;}
.site-top .brand{display:flex;align-items:center;gap:9px;font-family:'Nunito','Apple SD Gothic Neo',sans-serif;font-weight:900;font-size:19px;color:#1f1f1f;letter-spacing:-.5px;text-decoration:none;}
.site-top .brand img{width:32px;height:32px;border-radius:50%;border:1.5px solid #ededed;}
.site-top .nav{margin-left:auto;display:flex;gap:18px;}
.site-top .nav a{font-family:'Nunito','Apple SD Gothic Neo',sans-serif;font-size:14px;font-weight:800;color:#5b616b;text-decoration:none;}
.site-top .nav a:hover{color:#e5372b;}
.related{max-width:960px;margin:46px auto 0;padding:0 20px;font-family:'Nunito','Apple SD Gothic Neo',sans-serif;}
.related .rel-title{font-size:18px;font-weight:900;color:#1f1f1f;letter-spacing:-.3px;margin:0 0 16px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:820px){.rel-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.rel-grid{grid-template-columns:1fr;}}
.rel-card{display:block;border:1.5px solid #eef0f2;border-radius:14px;overflow:hidden;text-decoration:none;color:#1f1f1f;transition:.14s;}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,24,40,.07);border-color:#e2e5ea;}
.rel-thumb{aspect-ratio:1/1;background:#fafafa;overflow:hidden;}
.rel-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.rel-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:15px;text-align:center;padding:8px;background:linear-gradient(135deg,#e5372b,#ff7a6e);}
.rel-meta{padding:11px 12px 13px;}
.rel-cat{font-size:10.5px;font-weight:900;color:#e5372b;}
.rel-h3{font-size:14px;font-weight:800;line-height:1.35;margin-top:4px;}
.site-foot{border-top:1px solid #eef0f2;background:#fafafa;margin-top:44px;font-family:'Nunito','Apple SD Gothic Neo',sans-serif;}
.site-foot .in{max-width:960px;margin:0 auto;padding:28px 20px;text-align:center;}
.site-foot .fb{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:15px;color:#1f1f1f;}
.site-foot .fb img{width:30px;height:30px;border-radius:50%;border:1.5px solid #ededed;}
.site-foot .fl{margin:12px 0 10px;}
.site-foot .fl a{font-size:13px;font-weight:700;color:#5b616b;text-decoration:none;margin:0 7px;}
.site-foot .fl a:hover{color:#e5372b;}
.site-foot .cp{color:#b9bec5;font-size:12px;font-weight:600;line-height:1.6;}