/* =========================================================
   korea-timeline.css (최종본 + 상세 주석)
   ---------------------------------------------------------
   목표
   1) 헤더/툴바/카테고리 sticky 구조 안정화
   2) details 태그 없이 div + button 기반 아코디언 지원
   3) 기존 phase(1~6) 색/테마/레이아웃 유지
   4) 전역 선택자(div:nth-child 등)로 인한 레이아웃 오염 제거
========================================================= */

/* ===== 기본 설정(리셋/기본 타이포) ===== */

/* 모든 요소의 너비 계산을 예측 가능하게(패딩/보더 포함) */
* {
  box-sizing: border-box;
}

/* 페이지 전체 기본 스타일 */
body {
  margin: 0; /* 브라우저 기본 여백 제거 */
  font-size: 0.9rem;
  background: #fafafa; /* 살짝 밝은 배경으로 글 가독성 확보 */
  color: #222;
  line-height: 1.6; /* 텍스트 줄간격 */
}

/* 링크 색을 강제로 파랗게 만들지 않고 주변 문맥에 맞추기 */
a {
  color: inherit;
}

/* =========================================================
   [1] 헤더 영역 (로고 + 상단 메뉴 + 모바일 햄버거 버튼)
========================================================= */

/* 헤더는 화면 상단에 붙도록(sticky) + 다른 요소 위에 오도록(z-index) */
.site-header {
  position: sticky; /* 스크롤 시 상단에 달라붙음 */
  top: 0; /* 상단 기준점 */
  z-index: 1000; /* 툴바/카테고리보다 위에 오도록 크게 */
  background: #fff; /* 뒤 내용 비침 방지 */
  border-bottom: 1px solid #ddd; /* 헤더 하단 구분선 */
}

/* 헤더 내부: 최대 너비 제한 + 좌우 정렬 */
.header-inner {
  max-width: 1100px; /* 콘텐츠 폭 제한 */
  margin: 0 auto; /* 가운데 정렬 */
  padding: 0.5rem 1rem; /* 상하/좌우 여백 */
  display: flex; /* 로고/메뉴/버튼을 가로로 배치 */
  align-items: center; /* 세로 중앙 정렬 */
  justify-content: space-between; /* 양쪽 끝 정렬 */
}

/* 로고(사이트명) */
.logo {
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none; /* 밑줄 제거 */
  color: #222;
  white-space: nowrap; /* 줄바꿈 방지 */
}

/* 데스크톱 메뉴: 가로 배치 */
.main-nav {
  display: flex;
  gap: 0.75rem;
}

/* 메뉴 링크 공통 */
.main-nav a {
  text-decoration: none;
  font-size: 0.9rem;
  color: #444;
  padding: 0.3rem 0.7rem; /* 클릭 영역 확보 */
  border-radius: 999px; /* 알약 모양 */
  transition: background-color 0.15s ease;
}

/* 호버 시 가벼운 강조 */
.main-nav a:hover {
  background: #f2f2f2;
}

/* 현재 페이지 표시(밑줄 형태) */
.main-nav a.current {
  font-weight: 600;
  border-bottom: 2px solid #555;
  border-radius: 0; /* 밑줄이 깔끔하게 보이도록 */
}

/* 모바일 햄버거 버튼: 데스크톱에서는 숨김 */
.nav-toggle {
  display: none;
  border: none;
  background: none;
  font-size: 1.4rem;
  cursor: pointer;
}

/* =========================================================
   [2] 메인 영역 레이아웃
========================================================= */

/* 페이지 본문 래퍼(연표 전체를 감싸는 영역) */
.page-container {
  max-width: 100%; /* 기존 스타일 유지(너비를 꽉 쓰는 편) */
  margin: 1.5rem auto; /* 위아래 여백 + 가운데 정렬 */
  padding: 0 1rem 2rem; /* 좌우 여백 + 하단 여백 */
}

/* =========================================================
   [3] 기능 영역(보기 옵션 버튼들)
========================================================= */

/* "보기 옵션" 텍스트 */
.timeline-tools-label {
  color: #666;
  margin-right: 0.25rem;
}

/* 공통 버튼 */
.btn-tool {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #d6d9e6;
  background: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}

/* 보기 옵션(툴바) 안의 버튼들을 가운데 정렬 */
.timeline-tools {
  display: flex; /* 버튼을 가로로 배치 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  gap: 0.5rem; /* 버튼 사이 간격 */
}

.btn-tool:hover {
  background: #f5f5f5;
}

/* =========================
   sticky 높이 관리(권장)
========================= */
:root {
  /* sticky 높이 */
  --header-h: 56px;
  --tools-h: 48px;
  --search-h: 52px;

  /* ===== 시대(phase) 색상 ===== */
  --p1: #d2b48c; /* 기원 전/후 */
  --p2: #3eb489; /* 고려시대 */
  --p3: #b82647; /* 조선시대 */
  --p4: #6d1b43; /* 개항기 */
  --p5: #333333; /* 강점기 */
  --p6: #005ba6; /* 광복 이후 */

  /* 배경/라인에 쓰기 위한 RGB(공백 구분) */
  --p1-rgb: 210 180 140;
  --p2-rgb: 62 180 137;
  --p3-rgb: 184 38 71;
  --p4-rgb: 109 27 67;
  --p5-rgb: 51 51 51;
  --p6-rgb: 0 91 166;
}

/* 기능영역: 헤더 바로 아래 */
.timeline-tools {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid #eee;

  /* 버튼 중앙정렬(이전 요청 반영) */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
}

/* ✅ 검색영역: 기능영역 바로 아래(고정) */
.search-panel {
  position: sticky;
  top: calc(var(--header-h) + var(--tools-h));
  z-index: 25;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 0.5rem 0;
}

.search-panel[hidden] {
  display: none !important;
}

/* 검색바: 이미지처럼 한 줄 구성 */
.search-bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

/* 검색 입력창 */
.search-input {
  width: min(520px, 90vw);
  height: 34px;
  padding: 0 0.6rem;
  border: 2px solid #111;
  border-radius: 4px;
  font: inherit;
}

/* 이미지 같은 작은 아이콘 버튼 */
.btn-icon {
  height: 34px;
  min-width: 38px;
  padding: 0 0.5rem;
  border: 2px solid #111;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.btn-icon:hover {
  background: #f2f2f2;
}

/* 카테고리: 검색영역 아래에 고정 */
.category-wrapper {
  position: sticky;
  top: calc(var(--header-h) + var(--tools-h) + var(--search-h));
  z-index: 20;
  background: #fff;
}

/* =========================================================
   [4] 팝업/하이라이트/UI (기존 기능 유지)
========================================================= */

/* 검색/강조 표시 */
.highlight {
  background-color: yellow;
}
.current-highlight {
  background-color: orange;
}

/* 팝업(오버레이) 컨테이너 */
.popup-container {
  position: fixed;
  z-index: 1000; /* 헤더와 동급 이상으로 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 팝업 본문 박스 */
.popup-content {
  color: #000;
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 50%;
  min-width: 300px;
}

/* 팝업 닫기(X) */
.close-popup-button {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* 요소 숨김 유틸 */
.hidden {
  display: none;
}

/* 이모지 아이콘 크기/정렬 */
.seolki-emoji {
  width: 18px;
  height: 18px;
  border: 2px solid black;
  border-radius: 20%;
  vertical-align: middle;
}

/* 새 링크 알림 점(반짝이) */
.sparkle-dot {
  position: absolute;
  top: 0px;
  right: -5px;
  width: 10px;
  height: 10px;
  background-color: hotpink;
  border-radius: 50%;
  box-shadow: 0 0 5px hotpink;
  animation: sparkle 1.2s infinite ease-in-out;
}

@keyframes sparkle {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 5px hotpink;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.6;
    box-shadow: 0 0 10px deeppink;
  }
}

/* =========================================================
   [5] 스크롤 기준 + 상단 고정 요소(sticky 3단)
   ---------------------------------------------------------
   1) site-header (top: 0, z-index:1000)
   2) timeline-tools (top: 헤더 높이)
   3) category-wrapper (top: 헤더 + 툴바 높이)
========================================================= */

/* 내부 스크롤을 만들지 않음: sticky가 전체 페이지 기준으로 안정적으로 작동 */
.main-content {
  overflow: visible;
}

/* 보기 옵션 툴바: 헤더 바로 아래에 고정 */
.timeline-tools {
  position: sticky;
  top: 56px; /* 헤더 높이(대략값). 실제 높이가 다르면 숫자만 조정 */
  z-index: 20; /* 카테고리보다 위 */
  background: #fafafa;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e6e8ef;
}

/* 카테고리 헤더: 툴바 아래에 고정 */
.category-wrapper {
  position: sticky;
  top: 104px; /* 헤더(56) + 툴바(약48) = 104 (대략값) */
  background-color: #fff;
  z-index: 10;
}

/* =========================================================
   [6] 연표(표) 공통 레이아웃
   ---------------------------------------------------------
   .category, .phase1~6 는 "6칸짜리 행"을 의미
   각 행은 flex로 6개 div를 가로 배치
========================================================= */

.category,
.phase1,
.phase2,
.phase3,
.phase4,
.phase5,
.phase6 {
  display: flex;
  justify-content: space-between;
}

/* 카테고리(열 제목 행) 각 칸의 flex 비율/테두리 */
.category > div:nth-child(1) {
  border: 1px solid;
  text-align: center;
  flex: 2;
}
.category > div:nth-child(2) {
  border: 1px solid;
  text-align: center;
  flex: 2;
}
.category > div:nth-child(3) {
  border: 1px solid;
  text-align: center;
  flex: 0.8;
  font-weight: bold;
}
.category > div:nth-child(4) {
  border: 2px solid #003478;
  text-align: center;
  flex: 4;
}
.category > div:nth-child(5) {
  border: 2px solid #005ba6;
  text-align: center;
  flex: 2;
}
.category > div:nth-child(6) {
  border: 1px solid;
  text-align: center;
  flex: 2;
}

/* 표 내부 칸 모서리를 약간 둥글게(통일감) */
.category > div,
.phase1 > div,
.phase2 > div,
.phase3 > div,
.phase4 > div,
.phase5 > div,
.phase6 > div {
  border-radius: 5px;
}

/* ---------------------------------------------------------
   ✅ 중요한 수정 포인트
   전역 div:nth-child(...)를 쓰면
   헤더/기타 div까지 영향을 받아 레이아웃이 깨짐.
   그래서 "연표 행(.category/.phase*)"에만 margin을 적용한다.
--------------------------------------------------------- */

/* 첫 번째 칸 마진 */
.category > div:nth-child(1),
.phase1 > div:nth-child(1),
.phase2 > div:nth-child(1),
.phase3 > div:nth-child(1),
.phase4 > div:nth-child(1),
.phase5 > div:nth-child(1),
.phase6 > div:nth-child(1) {
  margin-right: 4px;
  margin-top: 4px;
}

/* 나머지 칸 마진 */
.category > div:nth-child(2),
.category > div:nth-child(3),
.category > div:nth-child(4),
.category > div:nth-child(5),
.category > div:nth-child(6),
.phase1 > div:nth-child(2),
.phase1 > div:nth-child(3),
.phase1 > div:nth-child(4),
.phase1 > div:nth-child(5),
.phase1 > div:nth-child(6),
.phase2 > div:nth-child(2),
.phase2 > div:nth-child(3),
.phase2 > div:nth-child(4),
.phase2 > div:nth-child(5),
.phase2 > div:nth-child(6),
.phase3 > div:nth-child(2),
.phase3 > div:nth-child(3),
.phase3 > div:nth-child(4),
.phase3 > div:nth-child(5),
.phase3 > div:nth-child(6),
.phase4 > div:nth-child(2),
.phase4 > div:nth-child(3),
.phase4 > div:nth-child(4),
.phase4 > div:nth-child(5),
.phase4 > div:nth-child(6),
.phase5 > div:nth-child(2),
.phase5 > div:nth-child(3),
.phase5 > div:nth-child(4),
.phase5 > div:nth-child(5),
.phase5 > div:nth-child(6),
.phase6 > div:nth-child(2),
.phase6 > div:nth-child(3),
.phase6 > div:nth-child(4),
.phase6 > div:nth-child(5),
.phase6 > div:nth-child(6) {
  margin: 4px 2px 0px 2px;
}

/* =========================================================
   [7] NEW: div 기반 아코디언(요약/상세/닫기)
   ---------------------------------------------------------
   HTML 구조(핵심)
   <div class="timeline-item">
     <button class="timeline-summary"> (요약)
       <article class="phase1 phase-summary">...</article>
     </button>
     <div class="timeline-panel" hidden> (상세)
       <button class="timeline-close">닫기</button>
       <article class="phase1 phase-detail">...</article>
     </div>
   </div>
========================================================= */

.timeline-item {
  margin-bottom: 2px; /* 시간 블록 간 간격 */
}

/* 요약은 버튼으로 감싸서 "행 전체 클릭"이 가능하도록 */
.timeline-summary {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

/* 버튼 기본 폰트/줄높이 때문에 글자가 작아지는 현상 방지 */
.timeline-summary {
  font: inherit; /* font-family, font-size, font-weight까지 한 번에 상속 */
  line-height: inherit; /* 줄간격도 body 기준으로 */
  color: inherit; /* 글자색도 상속 */
}

/* 버튼 내부 article 기본 마진 제거(줄이 밀리는 현상 방지) */
.timeline-summary > article {
  margin: 0;
}

/* 열려 있을 때는 요약을 숨기고(상세만 보이게) */
.timeline-item.is-open > .timeline-summary {
  display: none;
}

/* 상세 패널 */
.timeline-panel {
  position: relative; /* 닫기 버튼 배치 등 확장 대비 */
}

/* hidden 속성은 기본적으로 display:none이지만, 강제해 충돌 방지 */
.timeline-panel[hidden] {
  display: none !important;
}

/* 닫기 버튼 */
.timeline-close {
  display: block;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 0px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  font-size: 0.9rem;
}

/* 키보드 접근성: 포커스 표시 */
.timeline-summary:focus-visible,
.timeline-close:focus-visible {
  outline: 2px solid #999;
  outline-offset: 2px;
}

/* =========================================================
   [8] 날짜 토글
   ---------------------------------------------------------
   JS에서 body에 hide-dates를 붙이면,
   .hideYears(연도 표시)만 숨기게 된다.
========================================================= */
body.hide-dates .hideYears {
  display: none;
}

/* =========================================================
   [9] 구분선(SubLine) + EventBundle(기존 유지)
========================================================= */

.line1,
.line2,
.line3,
.line4,
.line5,
.line6,
.SubLine {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  margin: 2px;
}

.line1 {
  color: #d2b48c;
}
.line2 {
  color: #3eb489;
}
.line3 {
  color: #b82647;
}
.line4 {
  color: #6d1b43;
}
.line5 {
  color: #333333;
}
.line6 {
  color: #005ba6;
}

/* 이벤트 묶음(테두리+약한 배경) */
.EventBundle1 {
  border: solid 2px rgb(210, 180, 140, 0.8);
  border-left: none;
  border-radius: 8px;
  padding: 4px 2px;
  background-color: rgb(210, 180, 140, 0.03);
}
.EventBundle2 {
  border: solid 2px rgb(62, 180, 137, 0.8);
  border-left: none;
  border-radius: 8px;
  padding: 4px 2px;
  background-color: rgb(62, 180, 137, 0.03);
}
.EventBundle3 {
  border: solid 2px rgb(184, 38, 71, 0.8);
  border-left: none;
  border-radius: 8px;
  padding: 4px 2px;
  background-color: rgb(184, 38, 71, 0.03);
}
.EventBundle4 {
  border: solid 2px rgb(109, 27, 67, 0.8);
  border-left: none;
  border-radius: 8px;
  padding: 4px 2px;
  background-color: rgb(109, 27, 67, 0.03);
}
.EventBundle5 {
  border: solid 2px rgb(51, 51, 51, 0.8);
  border-left: none;
  border-radius: 8px;
  padding: 4px 2px;
  background-color: rgb(51, 51, 51, 0.03);
}
.EventBundle6 {
  border: solid 2px rgb(0, 91, 166, 0.8);
  border-left: none;
  border-radius: 8px;
  padding: 4px 2px;
  background-color: rgb(0, 91, 166, 0.03);
}

/* =========================================================
   [10] Phase(1~6) 레이아웃(열 비율)
   ---------------------------------------------------------
   연표는 6칸이며, 각 칸의 비율을 통일해 화면 일관성 유지
========================================================= */

/* 1번 칸(대체로 세계/지역 묶음) */
.phase1 > div:nth-child(1),
.phase2 > div:nth-child(1),
.phase3 > div:nth-child(1),
.phase4 > div:nth-child(1),
.phase5 > div:nth-child(1),
.phase6 > div:nth-child(1) {
  flex: 2;
}

/* 2번 칸 */
.phase1 > div:nth-child(2),
.phase2 > div:nth-child(2),
.phase3 > div:nth-child(2),
.phase4 > div:nth-child(2),
.phase5 > div:nth-child(2),
.phase6 > div:nth-child(2) {
  flex: 2;
}

/* 3번 칸(연대/세기 표시) */
.phase1 > div:nth-child(3),
.phase2 > div:nth-child(3),
.phase3 > div:nth-child(3),
.phase4 > div:nth-child(3),
.phase5 > div:nth-child(3),
.phase6 > div:nth-child(3) {
  flex: 0.8;
  text-align: center;
}

/* 4번 칸(한국사 본문이 길게 들어가는 영역) */
.phase1 > div:nth-child(4),
.phase2 > div:nth-child(4),
.phase3 > div:nth-child(4),
.phase4 > div:nth-child(4),
.phase5 > div:nth-child(4),
.phase6 > div:nth-child(4) {
  flex: 4;
}

/* 5번 칸(비고/영향 등) */
.phase1 > div:nth-child(5),
.phase2 > div:nth-child(5),
.phase3 > div:nth-child(5),
.phase4 > div:nth-child(5),
.phase5 > div:nth-child(5),
.phase6 > div:nth-child(5) {
  flex: 2;
}

/* 6번 칸(일본/기타 등) */
.phase1 > div:nth-child(6),
.phase2 > div:nth-child(6),
.phase3 > div:nth-child(6),
.phase4 > div:nth-child(6),
.phase5 > div:nth-child(6),
.phase6 > div:nth-child(6) {
  flex: 2;
}

/* 요약(phase-summary) 문단 간격: 요약은 촘촘하게 */
.phase-summary > div > p {
  margin: 4px 6px;
}

/* 상세(phase-detail) 문단 간격: 상세는 읽기 편하게 */
.phase-detail > div > p {
  margin: 6px 6px;
}

/* 상세 줄간격은 조금 넉넉하게 */
.phase-detail {
  line-height: 1.6;
}

/* 3번째 칸(연대) 강조: 요약은 굵게, 상세는 회색 */
.phase-summary > div:nth-child(3) > p {
  font-weight: bold;
  text-align: center;
}
.phase-detail > div:nth-child(3) > p {
  color: gray;
  text-align: center;
}

/* =========================================================
   [11] Phase별 테마(요약/상세 색상 연결) - 수정본
   - 요약(닫힘): 시대색 테두리(얇게) + 아주 옅은 배경
   - 요약 hover: 테두리 굵게 + 배경 조금 진하게
   - 상세(열림): 테두리 굵게 + 배경 옅게
========================================================= */

/* 공통: 요약/상세 텍스트 정렬 */
.timeline-summary [class^="phase"] > div,
.timeline-panel [class^="phase"] > div {
  text-align: left;
  color: #000;
}

/* ---- Phase 1 (기원 전/후) ---- */
.timeline-summary .phase1 > div {
  border: 1px solid var(--p1);
  background: rgb(var(--p1-rgb) / 0.02);
}
.timeline-summary:hover .phase1 > div {
  border: 2px solid var(--p1);
  background: rgb(var(--p1-rgb) / 0.05);
}
.timeline-panel .phase1 > div {
  border: 2px solid var(--p1);
  background: rgb(var(--p1-rgb) / 0.03);
}
.linephase1 {
  width: 96%;
  border-color: rgb(var(--p1-rgb) / 0.2);
  border-width: 1px;
  margin: 0 auto;
}

/* ---- Phase 2 (고려) ---- */
.timeline-summary .phase2 > div {
  border: 1px solid var(--p2);
  background: rgb(var(--p2-rgb) / 0.02);
}
.timeline-summary:hover .phase2 > div {
  border: 2px solid var(--p2);
  background: rgb(var(--p2-rgb) / 0.05);
}
.timeline-panel .phase2 > div {
  border: 2px solid var(--p2);
  background: rgb(var(--p2-rgb) / 0.03);
}
.linephase2 {
  width: 96%;
  border-color: rgb(var(--p2-rgb) / 0.2);
  border-width: 1px;
  margin: 0 auto;
}

/* ---- Phase 3 (조선) ---- */
.timeline-summary .phase3 > div {
  border: 1px solid var(--p3);
  background: rgb(var(--p3-rgb) / 0.02);
}
.timeline-summary:hover .phase3 > div {
  border: 2px solid var(--p3);
  background: rgb(var(--p3-rgb) / 0.05);
}
.timeline-panel .phase3 > div {
  border: 2px solid var(--p3);
  background: rgb(var(--p3-rgb) / 0.03);
}
.linephase3 {
  width: 96%;
  border-color: rgb(var(--p3-rgb) / 0.2);
  border-width: 1px;
  margin: 0 auto;
}

/* ---- Phase 4 (개항기) ---- */
.timeline-summary .phase4 > div {
  border: 1px solid var(--p4);
  background: rgb(var(--p4-rgb) / 0.02);
}
.timeline-summary:hover .phase4 > div {
  border: 2px solid var(--p4);
  background: rgb(var(--p4-rgb) / 0.05);
}
.timeline-panel .phase4 > div {
  border: 2px solid var(--p4);
  background: rgb(var(--p4-rgb) / 0.03);
}
.linephase4 {
  width: 96%;
  border-color: rgb(var(--p4-rgb) / 0.2);
  border-width: 1px;
  margin: 0 auto;
}

/* ---- Phase 5 (강점기) ---- */
.timeline-summary .phase5 > div {
  border: 1px solid var(--p5);
  background: rgb(var(--p5-rgb) / 0.02);
}
.timeline-summary:hover .phase5 > div {
  border: 2px solid var(--p5);
  background: rgb(var(--p5-rgb) / 0.05);
}
.timeline-panel .phase5 > div {
  border: 2px solid var(--p5);
  background: rgb(var(--p5-rgb) / 0.03);
}
.linephase5 {
  width: 96%;
  border-color: rgb(var(--p5-rgb) / 0.2);
  border-width: 1px;
  margin: 0 auto;
}

/* ---- Phase 6 (광복 이후) ---- */
.timeline-summary .phase6 > div {
  border: 1px solid var(--p6);
  background: rgb(var(--p6-rgb) / 0.02);
}
.timeline-summary:hover .phase6 > div {
  border: 2px solid var(--p6);
  background: rgb(var(--p6-rgb) / 0.05);
}
.timeline-panel .phase6 > div {
  border: 2px solid var(--p6);
  background: rgb(var(--p6-rgb) / 0.03);
}
.linephase6 {
  width: 96%;
  border-color: rgb(var(--p6-rgb) / 0.2);
  border-width: 1px;
  margin: 0 auto;
}

/* =========================================================
   [12] 텍스트 꾸밈
   ---------------------------------------------------------
   - 링크 
   - 모바일에서 메뉴는 햄버거로 전환
========================================================= */

.Goside {
  text-decoration: none; /* 기본 밑줄 제거 */
  position: relative; /* 가상 요소를 사용하기 위해 필요 */
  font-weight: bold;
}

.Goside::after {
  content: ""; /* 가상 요소를 사용하여 밑줄 추가 */
  position: absolute; /* 가상 요소의 위치를 설정 */
  left: 0; /* 기준 요소의 왼쪽 경계에 맞춘다 */
  bottom: 0px; /* 텍스트 아래에 밑줄을 위치 */
  width: 100%; /* 밑줄의 너비 */
  height: 1px; /* 밑줄의 두께 */
  background-color: tomato; /* 원하는 밑줄 색상으로 변경 */
  border-radius: 1px; /* 둥근 끝부분 추가 */
}

/* 클릭된 Goside 링크의 배경색과 텍스트 색을 변경 */
.Goside.active {
  background-color: #ffd1dc;
  font-weight: 700;
  border-radius: 4px; /* 테두리에 곡률을 추가 */
  padding: 1px 8px; /* 패딩을 추가하여 배경 크기를 더 크게 설정 */
  display: inline-block; /* 링크 영역이 클릭한 배경을 포함하게 하도록 inline-block으로 설정 */
}

/* 문화유산 강조 스타일 */
.cultural-heritage {
  color: white; /* 글자 색상 */
  background-color: #623400; /* 배경색 */
  border-radius: 4px; /* 모서리 둥글게 */
}

/* 인물 */
.person {
  color: teal;
}

/* 왕 또는 황제 */
.king {
  color: tomato;
}

/* 부족, 계통? */
.tribe {
  color: slateblue;
}

/* 한줄로 정리 */
.BriefDescription {
  color: #000080;
}

/* 연도 표기 */
.hideYears {
  color: #b6b6b4;
}

/* ==========================================
   섹션 제목 강조 (line1 ~ line6)
   - 가운데 정렬 + 굵게 + 앞뒤 라인
   - 각 섹션 컬러를 각각 적용
========================================== */

/* 공통(크기/굵기/정렬) */
.line1,
.line2,
.line3,
.line4,
.line5,
.line6 {
  text-align: center;
  font-size: 1.15rem; /* 글자 크기 업 */
  font-weight: 800; /* 굵게 */
  letter-spacing: 0.02em;
}

/* line1 (기원 전/후) */
.line1::before,
.line1::after {
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  background: rgba(210, 180, 140, 0.45); /* #d2b48c */
  vertical-align: middle;
  margin: 0 10px;
}

/* line2 (고려시대) */
.line2::before,
.line2::after {
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  background: rgba(62, 180, 137, 0.45); /* #3eb489 */
  vertical-align: middle;
  margin: 0 10px;
}

/* line3 (조선시대) */
.line3::before,
.line3::after {
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  background: rgba(184, 38, 71, 0.45); /* #b82647 */
  vertical-align: middle;
  margin: 0 10px;
}

/* line4 (개항기) */
.line4::before,
.line4::after {
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  background: rgba(109, 27, 67, 0.45); /* #6d1b43 */
  vertical-align: middle;
  margin: 0 10px;
}

/* line5 (강점기) */
.line5::before,
.line5::after {
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  background: rgba(51, 51, 51, 0.45); /* #333333 */
  vertical-align: middle;
  margin: 0 10px;
}

/* line6 (광복 이후) */
.line6::before,
.line6::after {
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  background: rgba(0, 91, 166, 0.45); /* #005ba6 */
  vertical-align: middle;
  margin: 0 10px;
}

/* ==========================================
    서브라인
   - 가운데 정렬 + 굵게 + 앞뒤 라인
   - 각 섹션 컬러를 각각 적용
========================================== */
.SubLine {
  text-align: center;
  font-weight: bold; /* 굵게 */
  letter-spacing: 0.02em;
}

.SubLine::before,
.SubLine::after {
  content: "";
  display: inline-block;
  width: 10%;
  height: 1px;
  background: rgb(0, 0, 0); /* #005ba6 */
  vertical-align: middle;
  margin: 0 10px;
}

/* =========================================================
   [13] 반응형(모바일)
   ---------------------------------------------------------
   - 연표 6칸 중 일부를 숨겨 핵심만 보이게
   - 모바일에서 메뉴는 햄버거로 전환
========================================================= */
@media (max-width: 768px) {
  /* 연표 표의 일부 열 숨김(1,2,5,6) */
  .category > div:nth-child(1),
  .category > div:nth-child(2),
  .category > div:nth-child(5),
  .category > div:nth-child(6),
  .phase1 > div:nth-child(1),
  .phase1 > div:nth-child(2),
  .phase1 > div:nth-child(5),
  .phase1 > div:nth-child(6),
  .phase2 > div:nth-child(1),
  .phase2 > div:nth-child(2),
  .phase2 > div:nth-child(5),
  .phase2 > div:nth-child(6),
  .phase3 > div:nth-child(1),
  .phase3 > div:nth-child(2),
  .phase3 > div:nth-child(5),
  .phase3 > div:nth-child(6),
  .phase4 > div:nth-child(1),
  .phase4 > div:nth-child(2),
  .phase4 > div:nth-child(5),
  .phase4 > div:nth-child(6),
  .phase5 > div:nth-child(1),
  .phase5 > div:nth-child(2),
  .phase5 > div:nth-child(5),
  .phase5 > div:nth-child(6),
  .phase6 > div:nth-child(1),
  .phase6 > div:nth-child(2),
  .phase6 > div:nth-child(5),
  .phase6 > div:nth-child(6) {
    display: none;
  }

  /* 모바일 네비게이션(드롭다운 스타일) */
  .main-nav {
    display: none; /* 기본 숨김 */
    position: absolute; /* 헤더 아래 떠 있는 메뉴 */
    top: 100%; /* 헤더 바로 밑 */
    right: 0.5rem;
    background: #fff;
    border: 1px solid #ddd;
    padding: 0.5rem 0.75rem;
    flex-direction: column; /* 세로 배치 */
    gap: 0.25rem;
    border-radius: 0.5rem;
  }

  /* JS에서 open 클래스 붙이면 표시 */
  .main-nav.open {
    display: flex;
  }

  /* 모바일에서만 햄버거 버튼 표시 */
  .nav-toggle {
    display: block;
  }

  /* 헤더 내부 요소 간격 */
  .header-inner {
    gap: 0.75rem;
  }
}