html, body {
  height: 100%;
  overflow: hidden;   /* ✅ 페이지 스크롤 제거 (바깥 스크롤 없어짐) */
}

/* ===== 상단 전체 고정 ===== */
.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 200;
  padding: 0 10px 5px 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* ===== 툴바 ===== */
.toolbar { margin-bottom: 6px; background: #fff; }
.legend-line { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.legend-line b { margin-right: 6px; }

.btn {
  border: 1px solid #bbb;
  background: #f6f6f6;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.btn.active { border-color: #333; background: #e8f0ff; font-weight: 700; }
.btn.plain { border: none; background: transparent; text-decoration: underline; padding: 0 2px; }

.tag {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
}

[data-type="civilization"].tag {
  background: #fff !important;
  font-weight: 600;
}

[data-type="category"].tag { border-color: transparent; }
[data-type="region"].tag { border: none !important; }

#legend-period .btn { margin-right: 2px; }

/* ===== 검색 ===== */
.search-line { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

.search-wrap { position: relative; display: inline-block; }

#searchBox {
  width: 280px;
  padding: 4px 30px 4px 6px;
  border: 1px solid #bbb;
  border-radius: 20px;
}

.filebox {
  border:1px dashed #bbb;
  padding:2px 6px;
  border-radius:6px;
  cursor:pointer;
}
.filebox input { display:none; }

/* X 버튼 */
.clear-btn {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: none;
  font-size: 13px;
  line-height: 22px;
  background: rgba(0,0,0,.12);
  color: #222;
}
.clear-btn.show { display: inline-block; }
.clear-btn:hover { background: rgba(0,0,0,.18); }
.clear-btn:active { background: rgba(0,0,0,.25); }
.clear-btn:focus-visible { outline: 1px solid #4d90fe; }

/* ===== 연도 헤더 ===== */
.timeline-header {
  background: #fff;
  z-index: 150;
}

/* ticks / timeline / guidelines 폭을 동일하게 만들기 위한 공통 래퍼 */
.timeline-inner{
  position: relative;
  width: 100%;
  padding: 0 10px;   /* ← 스크롤영역과 동일 패딩 */
  box-sizing: border-box;
  overflow: hidden;
}

/* 연도 숫자 */
#ticks {
  position: relative;
  height: 20px;
  overflow: hidden;
}

.tick {
  position: absolute;
  top: 0;
  font-size: 11px;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ===== 스크롤 영역 ===== */
.timeline-container {
  position: fixed;                 /* ✅ 고정 */
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--header-h, 220px);     /* ✅ 헤더 높이만큼 아래에서 시작 */
  overflow-y: auto;               /* ✅ 스크롤은 여기만 */
  overflow-x: hidden;
  padding: 10px 0;
}

/* ===== 타임라인 ===== */
#timeline {
  position: relative;
  z-index: 2;
}

.row { position: relative; height: 28px; }

.person-bar {
  position: absolute;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  padding-left: 6px;
  white-space: nowrap;
  border: none;
  border-radius: 3px;
}

/* 세로 연도 가이드라인 */
#guidelines {
  position: absolute;
  top: 0;
  left: 0px;                 /* timeline-inner 패딩과 동일하게 맞춤 */
  right: 0px;
  pointer-events: none;
  z-index: 1;
}

.vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ccc;
}

/* 툴팁 */
.tooltip-box {
  position: absolute;
  background: #fff;
  border: 1px solid #aaa;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 4px;
  display: none;
  z-index: 1000;
  pointer-events: none;
  max-width: 320px;
}
/* ===== 오른쪽 스크롤바 숨기기 (스크롤은 유지) ===== */
.timeline-container{
  -ms-overflow-style: none;  /* IE/Edge(legacy) */
  scrollbar-width: none;     /* Firefox */
}
.timeline-container::-webkit-scrollbar{
  width: 0;
  height: 0;
}