/* =========================
   0) Reset / Base
   ========================= */
* { box-sizing: border-box; } /* padding/border 포함한 박스 계산 */
body {
  margin: 0;
  font-family: 'Noto Serif KR', 'Noto Serif TC', Georgia, serif;  /* 한글=본명조, 중문=본명조TC */
  background: #fcfafa;
  color: #222;
}

/* ===== Navigation (top-nav) ===== */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 0;
  background: rgba(110, 131, 135, 0.95);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
.top-nav.is-scrolled {
  padding: 10px 0;
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: space-between; align-items: center;
  transition: max-width 0.4s ease;
}
.top-nav.is-scrolled .nav-inner {
  max-width: 660px;
}
.nav-brand {
  font-family: 'adobe-fangsong-std', serif;
  font-size: 24px; color: #fff; text-decoration: none;
  opacity: 0.9; transition: opacity 0.3s;
}
.nav-brand:hover { opacity: 1; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  color: rgba(255,255,255,0.75); text-decoration: none;
  font-size: 15px; transition: color 0.4s;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }

/* Header / Footer (legacy) */
.site-header {
  padding: 20px;
  background: #111;
  color: #fff;
}
.site-header h1 { margin: 0; }
.site-header p { margin: 6px 0 0; opacity: .8; }

.site-footer {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: #666;
}

/* =========================
   2) Timeline Layout
   ========================= */
.timeline {
  position: relative;
  padding: 30px 20px;
}

/* [v2 리뉴얼] 기존 중앙 세로선 → 시대별 .era-timeline-line으로 대체
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #aaa;
  transform: translateX(-50%);
}
*/

/* [v2 리뉴얼] 기존 연도별 가로 행 → .era-section으로 대체
.timeline-item {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: start;
  margin: 12px 0;
  column-gap: 8px;
}
.timeline-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.timeline-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.timeline-marker {
  position: relative;
  display: flex;
  justify-content: center;
}
.timeline-marker.primary .year {
  background: #111;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}
*/

/* ===== [v2 리뉴얼] 시대별 세로 타임라인 ===== */
.era-section {
  position: relative;
  margin: 0;
}
.era-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0 10px;
  position: relative;
  z-index: 2;
}
.era-label {
  background: #6e8387;
  color: #fcfafa;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: 'adobe-fangsong-std', fangsong, serif;
}
.era-label-sub {
  font-size: 13px;
  color: #8a7a68;
}
.era-body {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  column-gap: 12px;
  min-height: 100px;
}
.era-center {
  display: flex;
  justify-content: center;
  position: relative;
}
.era-timeline-line {
  width: 2px;
  background: #aaa;
  height: 100%;
}
.era-left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px 0;
}
.era-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
}

/* 隋 / 五代十國 북엔드 (숨김) */
.era-bookend {
  display: none;
}

/* 타임라인 상하단 점선 */
.timeline::before,
.timeline::after {
  content: "";
  display: block;
  width: 2px;
  margin: 0 auto;
  background: repeating-linear-gradient(
    to bottom,
    #aaa 0, #aaa 6px,
    transparent 6px, transparent 12px
  );
}
.timeline::before { height: 60px; }
.timeline::after  { height: 60px; }

/* ===== [v2 리뉴얼] 시인 이름 워드클라우드 ===== */
.poet-names {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  align-items: baseline;
  justify-content: flex-end;
  line-height: 1.6;
}
.poet-names.empty {
  color: #999;
  font-size: 14px;
}
.poet-name {
  cursor: pointer;
  color: #222;
  transition: color 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.poet-name-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  border: 1px solid #ccc;
}
.poet-name:hover {
  color: #8b0000;
}
.poet-sep {
  color: #ccc;
  font-size: 12px;
  user-select: none;
}

/* ===== [v2 리뉴얼] 메인 역사 카드 (4대 사건) ===== */
.history-main-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-main-top {
  display: flex;
  gap: 8px;
  align-items: center;
}
.history-main-portrait {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
  flex-shrink: 0;
}
.history-main-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.history-main-title {
  font-weight: 700;
  font-size: 15px;
}
.history-main-title .zh {
  font-weight: normal;
  color: #555;
  margin-left: 4px;
}
.history-main-life {
  font-size: 12px;
  color: #777;
}
.history-main-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.history-main-summary {
  font-size: 14px;
  line-height: 1.4;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.history-detail-toggle {
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}
.history-detail-toggle .chev {
  font-size: 14px;
  transition: transform 0.15s ease;
}
.history-detail-toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}
.history-detail-panel {
  font-size: 14px;
  line-height: 1.5;
  color: #444;
  padding-top: 6px;
}
.history-detail-panel ul {
  margin: 0;
  padding: 0 0 0 16px;
}
.history-detail-panel li {
  margin: 4px 0;
}

/* ===== [v2 리뉴얼] 소규모 역사 이벤트 (점) ===== */
.history-minor-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-minor {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  font-size: 13px;
  color: #555;
}
.history-minor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
  flex-shrink: 0;
}
.history-minor-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== [v2 리뉴얼] 호버 팝업 (시인/역사 공용) ===== */
.hover-popup {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 12px 14px;
  max-width: 280px;
  pointer-events: none;
}
.hover-popup[hidden] {
  display: none !important;
}

/* 시인 팝업 */
.poet-popup {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
}
.poet-popup-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #ddd;
}
.poet-popup-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.poet-popup-name {
  font-weight: 700;
  font-size: 15px;
}
.poet-popup-name .zh {
  font-weight: normal;
  color: #555;
}
.poet-popup-life {
  font-size: 12px;
  color: #777;
}
.poet-popup-count {
  font-size: 13px;
  color: #8b0000;
  font-weight: 600;
}
.poet-popup-bio {
  font-size: 13px;
  line-height: 1.4;
  color: #444;
}

/* 역사 미니팝업 */
.history-popup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-popup-title {
  font-weight: 700;
  font-size: 14px;
}
.history-popup-title .zh {
  font-weight: normal;
  color: #555;
}
.history-popup-summary {
  font-size: 13px;
  line-height: 1.4;
  color: #444;
}

/* [v2 리뉴얼] 기존 카드 시스템 → 시인 워드클라우드 + 시대별 역사카드로 대체
.card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.card.compact {
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  padding: 10px;
}
.card.compact.expanded {
  height: auto;
}
*/

/* =========================
   5) Tag System (공통)
   ========================= */
.tag {
  display: inline-block;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eee;
  color: #333;
}

/* [v2 리뉴얼] 기존 타임라인 카드용 2줄 요약 → 새 카드에서 history-main-summary로 대체
.author-bio,
.history-desc {
  font-size: 16px;
  line-height: 1.4;
  color: #444;
  padding: 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
*/

/* [v2 리뉴얼] 기존 작가 카드 → .poet-name 워드클라우드로 대체
.author-top {
  display: flex;
  gap: 8px;
  align-items: center;
}
.author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
  flex-shrink: 0;
}
.author-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.author-name { font-weight: bold; font-size: 20px; }
.author-name .zh { margin-left: 4px; font-weight: normal; color: #555; }
.author-name .life { margin-left: 4px; font-size: 12px; color: #777; }
.author-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
*/

/* [v2 리뉴얼] 기존 역사 카드 → .history-main-card + .history-minor로 대체
.history-top {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.history-main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.history-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
  flex-shrink: 0;
}
.history-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.history-detail {
  font-size: 16px;
  line-height: 1.5;
  color: #444;
}
.history-sub{
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.history-detail-list{
  margin: 0;
  padding: 0 0 0 16px;
}
.history-detail-list li{
  margin: 4px 0;
}
*/

/* [v2 리뉴얼] 기존 타임라인 카드용 아코디언 → history-detail-toggle로 대체
.works-panel { margin-top: 2px; }
.works-handle {
  margin-top: 2px;
  padding: 0;
  height: 12px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.works-handle .chev {
  font-size: 16px;
  line-height: 1;
  color: #666;
  user-select: none;
  transition: transform 0.15s ease;
}
.card.expanded .works-handle .chev { transform: rotate(180deg); }
*/

/* =========================
   9) 작품 리스트 (모달 내부에서 사용 — 유지)
   ========================= */
.works-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.work-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-top: 1px dashed #eee;
  font-size: 16px;
  cursor: pointer;
}
.work-no {
  font-weight: 700;
  font-size: 12px;
  color: #111;
}
.work-title {
  max-width: 16ch;          /* 제목 길이 제한(메타 보호) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-meta { color: #777; font-size: 12px; }

/* =========================
   11) Modal (공용) — 폭 900px
   ========================= */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.modal{
  width: min(860px, 96vw);
  max-height: 88vh;
  overflow: auto;
  background: #fcfafa;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 24px;
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #c8d3d5;
  margin-bottom: 12px;
}

.modal-title{
  font-size: 16px;
  font-weight: 700;
}

.modal-close{
  width: 24px;
  height: 24px;
  border-radius: 20%;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

/* =========================
   12) Author Modal (구조)
   ========================= */
.author-modal{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.author-hero{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.author-photo{
  width: 92px;
  height: 92px;
  border-radius: 12px;
  background: #ddd;
  object-fit: cover;
  flex-shrink: 0;
}

.author-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.author-name-line{
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.name-ko{ font-size: 20px; font-weight: 700; }
.name-zh{ font-size: 14px; color: #555; }
.author-life{ font-size: 13px; color: #777; }

/* =========================
   12.5) History Modal
   ========================= */
.history-modal{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.history-hero{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.history-photo{
  width: 92px;
  height: 92px;
  border-radius: 12px;
  background: #ddd;
  object-fit: cover;
  flex-shrink: 0;
}

.history-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-name-line{
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.history-life{ font-size: 13px; color: #777; }

.history-detail-list.modal{
  padding-left: 18px;
}

/* 출생지/관계도: 좌우 2컬럼 */
.author-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.panel{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-title{ font-weight: 700; font-size: 14px; }
.panel-sub{ font-size: 12px; color: #777; }

.panel-box{
  height: 180px;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
}
.placeholder{ background: #fafafa; color: #777; }

/* ===== 출생지 지도 & 관계도 (모달 내) ===== */
.map-container {
  height: 180px;
  background: #eef;
  border-radius: 10px;
  overflow: hidden;
}
.graph-container {
  height: 180px;
  background: #fafafa;
  border-radius: 10px;
  overflow: hidden;
}

/* 모달 내 공통 블록 */
.block-title{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}
.block-box{
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  background: #fafafa;
  line-height: 1.7;
}

.muted{ color: #777; }

/* =========================
   13) Poem Sections (모달 안)
   - 순서: 1)시본문(한자) 2)집평(한자) 3)주석
   - 상세보기: 4)시번역 5)집평번역
   - 심화자료: 병음/평측/멀티미디어
   - 본문에 제목/시인명 표시 (v3 변경)
   ========================= */
.poem-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.poem-sec{
  border: 1px solid #c8d3d5;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 4px;
}

/* 아코디언 헤더 (클릭해서 펼침) */
.poem-head{
  width: 100%;
  text-align: left;
  background: #fcfafa;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
}
.poem-head:hover{ background: #c8d3d5; }

.poem-head-line{
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.poem-no{
  font-weight: 700;
  font-size: 13px;
  color: #111;
  flex-shrink: 0;
}

.poem-title{
  font-weight: 700;
  font-size: 15px;
}

.poem-head-meta{
  margin-top: 2px;
  font-size: 12px;
  color: #777;
}

.poem-body{
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── 시 텍스트 박스 (책 레이아웃) ── */
.poem-text-box{
  background: var(--poem-text-bg, #fcfafa);
  padding: 20px 24px;
  display: inline-flex;
  flex-direction: column;
  align-self: center;        /* 유동 폭: 시에 맞게 */
  min-width: 60%;
  max-width: 100%;
}

.poem-title-zh{
  text-align: center;
  font-family: var(--font-zhTitle-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: var(--font-zhTitle-size, 22px);
  font-weight: var(--font-zhTitle-weight, 700);
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.poem-title-ko{
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-bottom: 6px;
}

.poem-poet-zh{
  text-align: right;
  font-family: var(--font-zhPoet-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: var(--font-zhPoet-size, 15px);
  font-weight: var(--font-zhPoet-weight, 400);
  color: var(--font-zhPoet-color, #555);
  margin-bottom: 16px;
}

/* 2컬럼: 한자 | 한글 */
.poem-bilingual{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bl-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  line-height: 1.9;
}

.bl-zh{
  font-family: var(--font-zhBody-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: var(--font-zhBody-size, 18px);
  font-weight: var(--font-zhBody-weight, 400);
  color: var(--font-zhBody-color, #222);
  text-align: left;
}

.bl-ko{
  font-family: var(--font-koBody-family, inherit);
  font-size: var(--font-koBody-size, 17px);
  font-weight: var(--font-koBody-weight, 400);
  color: var(--font-koBody-color, #555);
  line-height: 1.9;
  text-align: left;
}

/* ── 섹션별 배경색 (위→아래 점점 진해짐) ── */
.poem-sec-label{
  font-size: 12px;
  font-weight: 600;
  color: #8a7e6e;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.poem-section-block{
  padding: 14px 20px;
}

.poem-sec-commentary{
  background: var(--poem-commentary-bg, #fcfafa);
}
.poem-sec-commentary-tr{
  background: var(--poem-commentary-tr-bg, #c8d3d5);
}
.poem-sec-notes{
  background: var(--poem-notes-bg, #c8d3d5);
}
.poem-sec-advanced{
  background: var(--poem-advanced-bg, #c8d3d5);
}

.poem-sec-text{
  line-height: 1.7;
}

.poem-sec-text.pre{
  white-space: pre-wrap;
}

/* 주석 리스트 */
.note-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note-item{
  display: grid;
  grid-template-columns: 48px 120px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 13px;
  line-height: 1.5;
}
.note-no{ color: #111; font-weight: 700; cursor: pointer; }
.note-head{ color: #333; cursor: pointer; }
.note-text{ color: #444; }

/* 심화자료 내부 block-title은 표시 */
.poem-section-block .block-title{
  font-size: 12px;
  font-weight: 600;
  color: #8a7e6e;
  margin-bottom: 6px;
}

/* 시인모달 그리드 패널(출생지/관계도) 라벨은 숨김 유지 */
.panel-title,
.panel-sub { display: none !important; }

/* 작품/설명 섹션 라벨도 숨김 (author-bio-full, author-works-full) */
.author-bio-full .block-title,
.author-works-full .block-title { display: none !important; }

/* 역사 모달: 지도/멀티미디어 자리(풀폭) */
.history-modal .history-map-full .panel-box{ height: 240px; }
.history-modal .history-media .panel-box{ height: 120px; }

/* =====================================================================
   [v3 시대섹션 리디자인] 성당 프로토타입
   Readdy 톤앤매너: 크림 배경 + 고전 서체 + 금색 포인트
   ===================================================================== */

/* --- v3 시대 섹션 전체 --- */
.era-section.v3 {
  background: #fff;
  border-radius: 0;                /* 둥근 모서리 제거 → 섹션끼리 딱 붙음 */
  margin: 0;                       /* 섹션 간 간격 제거 */
  padding: 0 20px;                 /* 하단 패딩 제거 → 타임라인 바닥까지 연결 */
}

/* 시대별 배경색 — 통일된 따뜻한 톤 */
.era-section.v3[data-era="early"] { background: #fcfafa; color: #222; }
.era-section.v3[data-era="high"]  { background: #fcfafa; color: #222; }
.era-section.v3[data-era="mid"]   { background: #fcfafa; color: #222; }
.era-section.v3[data-era="late"]  { background: #fcfafa; color: #222; }

/* --- v3 시대 헤더: 제거됨 (서브헤더로 우측 칼럼 안에 통합) --- */

/* --- v3 시대 바디 (3칼럼 × 2행 그리드) ---
   Row1: [빈칸] [타임라인선] [서브헤더+점선]
   Row2: [시인카드] [도트]    [설명박스]     ← 세 개가 같은 줄 시작 */
.era-body.v3 {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 8px;
  min-height: 200px;
}

/* --- v3 좌측: 시인 미니카드 (Row2) --- */
.era-left.v3 {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;       /* 오른쪽 정렬 (타임라인 쪽) */
  padding: 12px 0 24px;
}

.v3-poet-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;           /* 줄 단위 오른쪽 정렬 */
}
.v3-poet-grid.empty {
  color: #999;
  font-size: 14px;
}

.v3-poet-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;       /* 줄 내부도 오른쪽 정렬 */
}

.v3-poet-card {
  width: 58px;
  height: 58px;
  background: #fff;
  border: 1px solid #d4c5a9;       /* 한지풍 테두리 */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.v3-poet-card:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 12px rgba(90, 62, 40, 0.2);
  border-color: #8b6914;           /* 금색 보더 */
  z-index: 2;
}

.v3-poet-card-name {
  font-family: var(--font-zhPoet-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: var(--font-zhPoet-size, 16px);
  font-weight: var(--font-zhPoet-weight, 600);
  color: var(--font-zhPoet-color, #6e8387);
  letter-spacing: 1px;
  line-height: 1.2;
  text-align: center;
  user-select: none;
}

/* --- v3 가운데 타임라인 (Row1~2 전체 관통) --- */
.era-center.v3 {
  grid-column: 2;
  grid-row: 1 / -1;               /* 양쪽 행 모두 관통 */
  position: relative;
  overflow: visible;               /* 점 라벨이 우측으로 삐져나갈 수 있게 */
}

/* v3 타임라인 선: 부모 전체 높이를 꽉 채움 (absolute) */
.era-section.v3 .era-timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #aaa;
  height: auto;
  z-index: 1;
}

/* 사건 점 컨테이너 (Row2, 중앙 칼럼): 균등 분포 */
.v3-timeline-dots {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;   /* 같은 간격으로 골고루 분포 */
  align-items: center;
  overflow: visible;
  z-index: 2;
  padding: 12px 0;
}

/* 개별 사건 점: 마커는 타임라인 위, 텍스트는 우측으로 삐져나감 */
.v3-event-dot {
  position: relative;
  display: flex;
  align-items: center;
  cursor: default;
  width: 10px;                     /* 마커 크기만큼만 */
}

.v3-dot-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9b896;
  border: 2px solid #a09070;
  flex-shrink: 0;
  z-index: 3;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* 연도+제목 라벨: 마커 우측으로 삐져나감 */
.v3-dot-label {
  position: absolute;
  left: 18px;                      /* 마커 오른쪽으로 */
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 15px;
  color: #5a4a38;
  pointer-events: auto;
  transition: color 0.15s ease;
}

.v3-event-dot:hover .v3-dot-marker {
  background: #8b6914;
  border-color: #6b4f0a;
}
.v3-event-dot:hover .v3-dot-label {
  color: #8b6914;
}

.v3-dot-year {
  font-weight: 700;
  font-size: 14px;
  color: #8c7a62;
}

.v3-dot-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- v3 우측 Row1: 서브헤더 + 점선 --- */
.v3-featured-header {
  grid-column: 3;
  grid-row: 1;
  padding: 16px 0 0;
}

/* --- v3 우측 Row2: 설명 텍스트 --- */
.v3-featured-content {
  grid-column: 3;
  grid-row: 2;
  padding: 0 0 24px;
}

/* 서브헤더: 2칼럼 (왼=시대라벨, 우=사건이름) */
.v3-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
}
.v3-era-info {
  font-size: 18px;
  font-weight: 700;
  color: #5a3e28;
  letter-spacing: 1px;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.v3-era-zh {
  font-family: var(--font-zhTitle-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: 42px;
  line-height: 1;
  color: #6e8387;
}
.v3-event-info {
  font-family: var(--font-zhPoet-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: 17px;
  font-weight: 600;
  color: #8b6914;
  text-align: right;
  white-space: nowrap;
}
.v3-event-life {
  font-size: 14px;
  font-weight: normal;
  color: #a0927c;
  margin-left: 4px;
}

/* 점선 구분 */
.v3-featured-divider {
  border: none;
  border-top: 2px dashed #c9b896;
}

/* 설명 텍스트 박스: 투명 배경, 최대 400px, 오른쪽 정렬 */
.v3-desc-box {
  max-width: 400px;
  margin-left: auto;               /* 오른쪽으로 밀기 */
  display: flex;
  flex-direction: column;
  gap: 0;                          /* summary ↔ detail 갭 없음 */
  padding-top: 10px;
}

/* 설명 텍스트: 줄임 없이 전체 노출 */
.v3-featured-text {
  font-size: 16px;
  line-height: 1.7;
  color: #4a3d2e;
}
.v3-featured-text p {
  margin: 0 0 10px;
}

/* ===================================================================== */

/* =========================
   10) Hidden attribute (JS 토글 안정화)
   ========================= */
[hidden] { display: none !important; }

/* 주석 십자가(†) 숨김 — display: inline으로 바꾸면 다시 표시됨 */
.note-dagger { display: none; }

/* =========================
   11) 주석 시스템 (하이브리드: 인라인 + 툴팁)
   ========================= */

/* 주석 키워드 하이라이팅 (밑줄 없이 색상만) */
.note-word {
  cursor: pointer;
  border-bottom: none;
  transition: color 0.2s ease;
}
.note-word-legacy {
  color: #d35400;
}
.note-word-legacy:hover {
  color: #e67e22;
}
.note-word-owned {
  color: #1f7a43;
}
.note-word-owned:hover {
  color: #2c9d5a;
}

/* 윗첨자 번호 — 숨김 (디지털에서 색인 불필요) */
.note-ref {
  display: none;
}

/* 주석 툴팁 */
.annotation-tooltip {
  position: absolute;          /* 절대 위치 (모달 기준) */
  background: #2c3e50;         /* 어두운 배경 */
  color: #ecf0f1;              /* 밝은 글자 */
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;            /* 최대 너비 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;              /* 최상위 */
  pointer-events: none;        /* 마우스 이벤트 무시 (툴팁 위로 마우스 이동 시 깜빡임 방지) */
  word-wrap: break-word;       /* 긴 단어 줄바꿈 */
  white-space: pre-wrap;       /* 줄바꿈 유지 */
}

.annotation-tooltip[hidden] {
  display: none !important;
}

/* 크로스 링크 하이라이트 애니메이션 */
@keyframes highlight-flash {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(211, 84, 0, 0.2);  /* 주황빛 하이라이트 */
  }
}

.highlight-flash {
  animation: highlight-flash 2s ease;
}

/* =====================================================================
   심화자료: 간체자 & 병음 / 평측 / 멀티미디어 / TTS / 배경그림
   ===================================================================== */

/* 루비문자: 간체자 + 병음/평측 */
.ruby-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ruby-line {
  font-family: var(--font-zhBody-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: 20px;
  letter-spacing: 6px;
  line-height: 2.2;
  color: #333;
  text-align: center;
}
.ruby-line ruby {
  ruby-align: center;
}
.ruby-line rt {
  font-size: 11px;
  font-style: italic;
  color: #888;
  font-family: Georgia, 'Noto Serif KR', serif;
  letter-spacing: 0;
}
/* 평측 루비 — 平은 파랑, 仄은 빨강 */
.ruby-grid.pingze .tone-ping rt { color: #1565c0; font-style: normal; font-weight: 600; }
.ruby-grid.pingze .tone-ze rt { color: #c62828; font-style: normal; font-weight: 600; }
.ruby-grid.pingze ruby { font-size: 20px; }

/* TTS 재생 버튼 */
.tts-player {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #ddd;
}
.tts-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius: 16px;
  background: #fafafa;
  cursor: pointer;
  font-size: 12px;
  color: #555;
  transition: all 0.2s;
}
.tts-btn:hover {
  background: #f0f0f0;
  border-color: #999;
}
.tts-btn.playing {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
}
.tts-icon {
  font-size: 10px;
}
.tts-status {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

/* 시 본문 내 제목/시인 표시 */
.poem-body-title {
  text-align: center;
  font-family: var(--font-zhTitle-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: var(--font-zhTitle-size, 20px);
  font-weight: var(--font-zhTitle-weight, 700);
  margin-bottom: 4px;
  letter-spacing: 2px;
}
.poem-body-poet {
  text-align: right;
  font-family: var(--font-zhPoet-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: var(--font-zhPoet-size, 16px);
  font-weight: var(--font-zhPoet-weight, 400);
  margin-bottom: 12px;
  color: var(--font-zhPoet-color, #555);
}
.poem-body-text {
  white-space: pre-wrap;
}
/* 한글해석 가운데 정렬 */
.poem-translation {
  text-align: center;
}

/* 병음 섹션 내 제목/시인 루비 */
.ruby-title {
  text-align: center;
  font-family: var(--font-zhTitle-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: var(--font-zhTitle-size, 22px);
  font-weight: var(--font-zhTitle-weight, 700);
  margin-bottom: 2px;
  letter-spacing: 4px;
  line-height: 2.2;
}
.ruby-poet {
  text-align: right;
  font-family: var(--font-zhPoet-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: 18px;
  margin-bottom: 10px;
  letter-spacing: 4px;
  line-height: 2.2;
  color: var(--font-zhPoet-color, #555);
}
.ruby-title rt, .ruby-poet rt {
  font-size: 10px;
  font-style: italic;
  color: #888;
  font-family: Georgia, 'Noto Serif KR', serif;
  letter-spacing: 0;
}

/* TTS 라벨 */
.tts-label {
  font-size: 12px;
  color: #888;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #ddd;
  margin-bottom: 2px;
}

/* 심화자료 2컬럼 레이아웃 */
.deep-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .deep-two-col {
    grid-template-columns: 1fr;
  }
}

/* YouTube 임베드 플레이어 */
.yt-embed-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}
.yt-embed-wrap:last-child {
  margin-bottom: 0;
}
.yt-embed-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: none;
}

/* ── poem-hero: 배경그림 + 시 본문 (두루마리 컨셉) ── */
.poem-hero{
  position: relative;
  background-size: cover;
  background-position: bottom center;  /* 그림 하단=주제 부분이 보임 */
  background-repeat: no-repeat;
  min-height: 240px;
  padding: 40px 32px 60px;
}

/* 하단 그라데이션 페이드 → 다음 섹션 색으로 자연스럽게 */
.poem-hero::after{
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(transparent, #f5f2ed);
  pointer-events: none;
}

.poem-hero-text{
  position: relative;
  z-index: 1;
  white-space: pre-line;
  font-family: var(--font-zhBody-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: var(--font-zhBody-size, 18px);
  line-height: 2.0;
  color: #2a2520;
  text-shadow: 0 0 16px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7);
  text-align: center;
}

/* 배경 그림 위 주석 스타일 */
.poem-hero .note-word-legacy{
  color: #5a3e1b;
  border-bottom-color: #c4a06a;
}
.poem-hero .note-word-legacy:hover{
  color: #3a2510;
  border-bottom-color: #a0805a;
}
.poem-hero .note-word-owned{
  color: #2e6340;
  border-bottom-color: #7bb38f;
}
.poem-hero .note-word-owned:hover{
  color: #224a30;
  border-bottom-color: #5d9b74;
}
.poem-hero .note-ref{
  color: rgba(90,62,27,0.6);
}

/* 배경 위 제목/시인 */
.poem-hero .poem-body-title{
  font-size: 22px;
  font-weight: 700;
  color: #2a2520;
  text-align: center;
  margin-bottom: 4px;
}
.poem-hero .poem-body-poet{
  font-size: 16px;
  color: #a4b8c4;
  text-align: center;
  margin-bottom: 16px;
}

/* ── poem-hero-plain: 그림 없는 시 (종이색 배경) ── */
.poem-hero-plain{
  background: #fcfafa;
  padding: 32px 32px 24px;
}

.poem-hero-plain .poem-hero-text{
  text-align: left;
  text-shadow: none;
  padding-left: 8px;
}

.poem-hero-plain .poem-body-title{
  font-size: 20px;
  font-weight: 700;
  color: #2a2520;
  text-align: left;
  margin-bottom: 4px;
}
.poem-hero-plain .poem-body-poet{
  font-size: 15px;
  color: #a4b8c4;
  text-align: left;
  margin-bottom: 12px;
}

/* ── 구형 스타일 호환 (관리툴용) ── */
.poem-bg-wrap {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
}
.poem-text-overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  white-space: pre-line;
  font-family: var(--font-zhBody-family, fangsong, 'LXGW WenKai Mono TC', 'Noto Serif TC', serif);
  font-size: 16px;
  line-height: 1.8;
  color: #fff;
  max-width: 80%;
  max-height: 85%;
  overflow: auto;
}
.poem-text-overlay .note-word-legacy {
  color: #ffd54f;
  border-bottom-color: #ffd54f;
}
.poem-text-overlay .note-word-legacy:hover {
  color: #ffecb3;
  border-bottom-color: #ffecb3;
}
.poem-text-overlay .note-word-owned {
  color: #8dffb3;
  border-bottom-color: #8dffb3;
}
.poem-text-overlay .note-word-owned:hover {
  color: #c7ffdc;
  border-bottom-color: #c7ffdc;
}
.poem-text-overlay .note-ref {
  color: rgba(255,255,255,0.7);
}
.poem-text-overlay .poem-body-title {
  color: #fff;
}
.poem-text-overlay .poem-body-poet {
  color: rgba(255,255,255,0.85);
}