/* css/namu.css — 「나의 역사 나무」 개인 페이지 스타일
   2026-07-22. portal.css의 색상 토큰(--ink/--paper/--gold)을 이어받아
   ATLAS의 다른 페이지와 같은 브랜드로 보이게 한다. 다만 이 페이지는
   개인의 기록을 보는 곳이라 지도 페이지보다 여백을 넉넉히 준다. */

.namu-page {
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  font-family: -apple-system, 'Apple SD Gothic Neo', sans-serif;
}

/* ── 상단 바 ─────────────────────────────────────────────── */
.namu-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: rgba(21, 19, 15, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(184, 152, 96, 0.22);
}
.namu-back {
  color: var(--gold); text-decoration: none;
  font-size: 14px; letter-spacing: .02em;
}
.namu-back:hover { color: var(--gold-bright); }
.namu-topbar-title { font-size: 14px; color: var(--paper-dim); }

.namu-wrap {
  max-width: 720px; margin: 0 auto;
  padding: 24px 18px 72px;
}

/* ── 나무 ────────────────────────────────────────────────── */
.namu-hero { text-align: center; padding: 12px 0 8px; }

.namu-tree-stage {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4px;
  min-height: 260px;
}
.namu-tree { width: 100%; max-width: 340px; }
.atlas-tree-svg { width: 100%; height: auto; display: block; }

/* 진묘수 — 나무 옆에 서서 안내한다. 이미지가 없으면 onerror로 숨겨진다. */
.namu-guide {
  position: absolute; right: 4px; bottom: 6px;
  width: 92px; height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
@media (max-width: 480px) {
  .namu-guide { width: 72px; right: 0; }
}

.namu-stage-label { margin-top: 6px; }
.namu-stage-name {
  display: block; font-size: 22px; font-weight: 700;
  color: var(--gold-bright); letter-spacing: .04em;
}
.namu-stage-sub {
  display: block; margin-top: 3px;
  font-size: 12.5px; color: var(--paper-dim);
}

/* ── 성장 그래프 ─────────────────────────────────────────── */
.namu-progress { margin: 18px auto 0; max-width: 420px; }
.namu-progress-track {
  height: 8px; border-radius: 999px;
  background: rgba(184, 152, 96, 0.16);
  overflow: hidden;
}
.namu-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #7d9b6a, var(--gold));
  border-radius: 999px;
  transition: width .6s ease;
}
.namu-progress-text {
  margin-top: 8px; font-size: 12.5px; color: var(--paper-dim);
}

.namu-guide-line {
  margin: 16px auto 0; max-width: 480px;
  font-size: 13.5px; line-height: 1.7;
  color: var(--paper); opacity: .88;
}

/* ── 요약 숫자 ───────────────────────────────────────────── */
.namu-stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; margin: 28px 0 8px;
}
.namu-stat {
  text-align: center; padding: 12px 4px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(184,152,96,.14);
  border-radius: 10px;
}
.namu-stat b {
  display: block; font-size: 17px; color: var(--gold-bright);
  font-weight: 700; line-height: 1.3;
}
.namu-stat span {
  display: block; margin-top: 4px;
  font-size: 10.5px; color: var(--paper-dim); line-height: 1.35;
}
@media (max-width: 560px) {
  .namu-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ── 섹션 공통 ───────────────────────────────────────────── */
.namu-section { margin-top: 34px; }
.namu-section h2 {
  font-size: 15px; color: var(--gold);
  letter-spacing: .04em; font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(184,152,96,.2);
}
.namu-count { color: var(--paper-dim); font-weight: 400; font-size: 13px; }
.namu-section-note {
  margin-top: 10px; font-size: 12.5px; line-height: 1.65;
  color: var(--paper-dim);
}
.namu-empty {
  margin-top: 14px; font-size: 13px; color: var(--paper-dim);
  padding: 18px; text-align: center;
  border: 1px dashed rgba(184,152,96,.22); border-radius: 10px;
}

/* ── 시대별 발자취 ───────────────────────────────────────── */
.namu-eras { list-style: none; margin-top: 14px; }
.namu-era {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px;
}
.namu-era.is-unvisited { opacity: .38; }
.namu-era-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.namu-era-name { flex: 0 0 64px; }
.namu-era-bar {
  flex: 1 1 auto; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.namu-era-bar i {
  display: block; height: 100%; border-radius: 999px;
  transition: width .5s ease;
}
.namu-era-time {
  flex: 0 0 auto; font-size: 11.5px; color: var(--paper-dim);
  min-width: 62px; text-align: right;
}

/* ── 스크랩 ──────────────────────────────────────────────── */
.namu-scraps { list-style: none; margin-top: 14px; }
.namu-scrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.namu-scrap-link {
  flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px;
  color: var(--paper); text-decoration: none; min-width: 0;
}
.namu-scrap-link:hover .namu-scrap-title { color: var(--gold-bright); }
.namu-scrap-kind {
  flex: 0 0 auto; font-size: 10.5px; color: var(--gold);
  border: 1px solid rgba(184,152,96,.3);
  border-radius: 4px; padding: 1.5px 5px;
}
.namu-scrap-title {
  font-size: 13px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.namu-scrap-del {
  flex: 0 0 auto; width: 26px; height: 26px;
  background: none; border: none; cursor: pointer;
  color: var(--paper-dim); font-size: 17px; line-height: 1;
  border-radius: 6px;
}
.namu-scrap-del:hover { color: #d88; background: rgba(255,255,255,.06); }

/* ── 안내 상자 ───────────────────────────────────────────── */
.namu-note-box p {
  margin-top: 10px; font-size: 12.5px; line-height: 1.7;
  color: var(--paper-dim);
}
.namu-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.namu-btn {
  display: inline-block; cursor: pointer;
  padding: 8px 14px; font-size: 12.5px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(184,152,96,.28);
  border-radius: 8px; color: var(--paper);
  font-family: inherit;
}
.namu-btn:hover { background: rgba(184,152,96,.14); }
.namu-btn-danger { border-color: rgba(200,110,110,.3); color: #d9a3a3; }
.namu-btn-danger:hover { background: rgba(200,110,110,.12); }
.namu-tiny {
  margin-top: 14px; font-size: 11.5px; color: var(--paper-dim); opacity: .8;
}

/* ── 헤더 새싹 아이콘 (모든 페이지 공통) ─────────────────── */
/* 지도·자료실 어디서든 우상단에 작게 떠 있어서, 나무가 자라는 걸
   계속 보게 만든다. 클릭하면 namu.html로 간다. */
.atlas-namu-badge {
  /* z-index 1210: 지도의 타임라인(600)·범례(600)·레이어토글(600)·
     검색(700)·정보패널(1150~1205)보다 위에 온다. 처음엔 900으로 뒀는데
     지도 화면에서 타임라인에 가려 보이지 않았다(2026-07-24 수정). */
  position: fixed; z-index: 1210;
  right: 12px; bottom: 12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21,19,15,.88);
  border: 1px solid rgba(184,152,96,.3);
  border-radius: 50%;
  text-decoration: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  transition: transform .2s ease, border-color .2s ease;
}
.atlas-namu-badge:hover {
  transform: translateY(-2px);
  border-color: var(--gold, #b89860);
}
.atlas-namu-badge svg { width: 26px; height: 26px; display: block; }

/* ═══════════════════════════════════════════════════════════
   「나의 서재」 — 2026-07-24
   나무(tree)에서 서재(library)로 전환하며 추가한 스타일.
   기존 .namu-* 클래스는 페이지 골격으로 계속 쓰고,
   서재 고유 요소만 .lib-* 로 둔다.
   ═══════════════════════════════════════════════════════════ */

/* ── 오늘의 변화 ─────────────────────────────────────────── */
.lib-changes {
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: rgba(184,152,96,.07);
  border: 1px solid rgba(184,152,96,.2);
  border-radius: 10px;
}
.lib-changes-title {
  font-size: 12px; color: var(--gold);
  letter-spacing: .06em; font-weight: 700;
}
.lib-changes-list { list-style: none; margin-top: 8px; }
.lib-changes-list li {
  font-size: 13px; line-height: 1.7; color: var(--paper);
  padding-left: 12px; position: relative;
}
.lib-changes-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
}

/* ── 서가 ────────────────────────────────────────────────── */
/* 2026-07-24 배경 이미지 도입.
   .lib-stage가 배경(고지도 벽 + 나무 선반)을 깔고, 그 위에 SVG로 그린
   책들이 얹힌다. SVG의 viewBox(1200x800)와 배경 이미지 비율(1.50)을
   똑같이 맞춰뒀기 때문에, 어떤 화면 폭에서도 책이 선반 위에 정확히
   서 있다. 배경을 바꾸려면 이미지와 js/library.js의 LAY.baseY만
   같이 조정하면 된다. */
.lib-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1200 / 800;
  background-image: url('../assets/images/shelf-bg.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 60px rgba(0,0,0,.35);
}
/* aspect-ratio 미지원 브라우저 대비 */
@supports not (aspect-ratio: 1 / 1) {
  .lib-stage::before { content: ''; display: block; padding-top: 66.67%; }
}

.lib-shelf {
  position: absolute; inset: 0;
}
.atlas-library-svg { width: 100%; height: 100%; display: block; }

/* 진묘수 — 서가 앞에 앉아 서재를 지킨다.
   무령왕릉 진묘수(국보 162호)를 캐릭터화한 ATLAS의 안내자다.
   무덤을 지키던 수호수가 여기서는 기록을 지킨다.
   배경 안쪽에 들어가야 하므로 .lib-stage 기준으로 배치한다.
   이미지 파일이 없으면 img의 onerror가 통째로 숨긴다. */
.lib-guide {
  position: absolute;
  /* x 900~1170 영역. 배지 수첩(x 840~890)과 겹치지 않게 오른쪽으로 뺀다. */
  right: 2.5%; bottom: 3%;
  width: 22.5%; height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.6));
  z-index: 2;
}

/* ── 시대별 책 목록 ──────────────────────────────────────── */
.lib-books { list-style: none; margin-top: 14px; }
.lib-book {
  display: grid;
  grid-template-columns: 10px 58px 1fr auto;
  grid-template-areas:
    "dot name bar meta"
    ".   line line line";
  align-items: center;
  gap: 4px 9px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.lib-book.is-closed { opacity: .4; }
.lib-book-dot {
  grid-area: dot;
  width: 9px; height: 9px; border-radius: 2px;
}
.lib-book-name { grid-area: name; font-size: 13px; }
.lib-book-bar {
  grid-area: bar; height: 7px; border-radius: 3px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.lib-book-bar i {
  display: block; height: 100%; border-radius: 3px;
  transition: width .6s ease, opacity .6s ease;
}
.lib-book-meta {
  grid-area: meta; font-size: 10.5px; color: var(--gold);
  letter-spacing: .03em; white-space: nowrap;
}
.lib-book-line {
  grid-area: line;
  font-size: 11.5px; color: var(--paper-dim); line-height: 1.5;
  padding-left: 67px;
}
@media (max-width: 420px) {
  .lib-book-line { padding-left: 0; }
}

/* ── 나의 한국사 ─────────────────────────────────────────── */
.lib-pages { list-style: none; margin-top: 14px; counter-reset: page; }
.lib-page {
  counter-increment: page;
  position: relative;
  padding: 10px 0 10px 34px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px; line-height: 1.65;
}
.lib-page::before {
  content: counter(page) '쪽';
  position: absolute; left: 0; top: 11px;
  font-size: 10px; color: var(--gold); opacity: .7;
  letter-spacing: .02em;
}
.lib-page-date {
  display: block; font-size: 10.5px;
  color: var(--paper-dim); margin-bottom: 2px;
}
.lib-page-text { color: var(--paper); opacity: .92; }

/* 지도 화면 전용 위치 보정.
   지도에는 하단 전체를 덮는 타임라인(.timeline)과 우하단 레이어 토글
   (bottom:110px)이 있다. 서재 버튼이 그 위에 겹치지 않도록, 지도
   페이지에서는 레이어 토글보다 조금 더 위로 올린다.
   .map-page는 지도 index.html의 body에 붙는 클래스다. */
.atlas-namu-badge.on-map {
  bottom: 158px;
}
@media (max-width: 768px) {
  .atlas-namu-badge.on-map {
    bottom: 168px;
  }
}