/* ============================================================
   과학 아틀라스 — 시대 지도 (map.html)
   ============================================================ */
body.mapview{
  height:100dvh;overflow:hidden;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  background:var(--ink);
}

/* ── 상단 바 ── */
.mv-bar{display:flex;align-items:center;gap:14px;
  padding:10px 18px;border-bottom:1px solid var(--ink-3);
  background:var(--ink-2);min-height:52px}
.mv-home{display:flex;align-items:center;gap:7px;flex:none;
  color:var(--chalk-dim);font-size:13.5px;transition:.15s}
.mv-home:hover{color:var(--brass)}
.mv-home-txt{font-family:var(--disp);font-weight:700}

.mv-eras{display:flex;gap:5px;flex:1 1 auto;min-width:0}
.mv-era{flex:none;display:flex;align-items:center;gap:7px;
  background:none;border:1px solid transparent;border-radius:999px;
  padding:6px 13px;color:var(--chalk-dim);font-size:13px;transition:.15s;white-space:nowrap}
.mv-era i{font-family:var(--mono);font-size:10.5px;font-style:normal;
  color:var(--brass);opacity:.75}
.mv-era:hover{border-color:var(--ink-3);color:var(--chalk)}
.mv-era.is-active{background:var(--ink-3);border-color:var(--brass);color:var(--chalk)}
.mv-era.is-active i{opacity:1}

.mv-tools{display:flex;align-items:center;gap:7px;flex:none}

/* ── 시대 이동 버튼 ── */
.mv-eranav{flex:none;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:8px;color:var(--chalk-dim);transition:.15s;padding:0}
.mv-eranav:hover{border-color:var(--brass);color:var(--brass)}
.mv-eranav[disabled]{opacity:.22;pointer-events:none}

/* ── 필터 줄 ── */
.mv-filters{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;
  padding:10px 18px;border-bottom:1px solid var(--ink-3);background:var(--ink)}
.mv-filter-body{display:flex;align-items:center;gap:18px;flex:1 1 auto;min-width:0}
.mv-fbtn{display:none;align-items:center;gap:8px;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:9px;
  padding:9px 13px;color:var(--chalk-dim);font-size:13px;transition:.15s}
.mv-fbtn b{font-family:var(--mono);font-size:11px;color:var(--brass);font-weight:500}
.mv-fchev{margin-left:auto;transition:transform .25s ease}
body.filters-open .mv-fbtn{border-color:var(--brass);color:var(--chalk)}
body.filters-open .mv-fchev{transform:rotate(180deg)}
.mv-filter-body .chips{flex:1 1 auto;min-width:0;flex-wrap:nowrap}
.mv-filters .chip{padding:5px 12px;font-size:12.5px;flex:none;white-space:nowrap}

/* ── 지도 무대 ── */
.mv-stage{position:relative;min-height:0}
.mapview #map-canvas{position:absolute;inset:0;height:100%;background:var(--ink-2)}

.mv-eralabel{position:absolute;left:14px;top:14px;z-index:500;pointer-events:none;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(6px);border:1px solid var(--ink-3);
  border-radius:10px;padding:11px 15px;max-width:60vw}
.mv-eralabel span{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--brass);margin-bottom:4px}
.mv-eralabel b{display:block;font-family:var(--disp);font-size:19px;line-height:1.2}
.mv-eralabel em{display:block;font-style:normal;font-size:11.5px;
  color:var(--chalk-dim);margin-top:4px}

.mv-slide-toggle{position:absolute;right:16px;bottom:14px;z-index:500;
  display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(6px);
  border:1px solid var(--ink-3);border-radius:999px;padding:8px 15px;
  color:var(--chalk-dim);font-size:12.5px;transition:.15s}
.mv-slide-toggle:hover{border-color:var(--brass);color:var(--chalk)}
.mv-slide-toggle b{font-family:var(--mono);color:var(--brass);margin-right:1px}
.mv-slide-toggle svg{transition:transform .3s ease}
body.slide-closed .mv-slide-toggle svg{transform:rotate(180deg)}

/* ── 하단 슬라이드 ── */
.mv-slide{border-top:1px solid var(--ink-3);background:var(--ink-2);
  transition:height .3s cubic-bezier(.2,.7,.2,1);height:134px;overflow:hidden}
body.slide-closed .mv-slide{height:0;border-top-color:transparent}

.mv-track{display:flex;gap:10px;height:100%;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;padding:14px 18px;
  touch-action:pan-x;overscroll-behavior-x:contain;overscroll-behavior-y:none;
  -webkit-overflow-scrolling:touch}
.mv-track::-webkit-scrollbar{height:5px}
.mv-track::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:4px}

.mv-item{flex:0 0 152px;text-align:left;
  display:flex;flex-direction:column;gap:6px;justify-content:center;
  background:var(--ink);border:1px solid var(--ink-3);border-radius:10px;
  padding:14px 15px;transition:.16s;color:var(--chalk)}
.mv-item:hover{border-color:var(--chalk-dim);transform:translateY(-2px)}
.mv-item.is-active{border-color:var(--brass);
  box-shadow:0 0 0 1px var(--brass), 0 6px 18px rgba(0,0,0,.3)}
.mv-item.is-stub{border-left:3px solid var(--brass)}
.mv-item-top{display:flex;align-items:center;gap:7px}
.mv-dot{width:7px;height:7px;border-radius:50%;flex:none}
.mv-year{font-family:var(--mono);font-size:11.5px;color:var(--brass);font-weight:500}
.mv-item-place{font-family:var(--disp);font-weight:700;font-size:15.5px;line-height:1.35;
  word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mv-item-who{font-size:11px;color:var(--chalk-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-empty{color:var(--chalk-dim);font-size:13.5px;padding:22px 4px}

/* 정보카드가 열리면 지도 우측 여백 확보 (데스크톱) */
@media (min-width:721px){
  body.mapview.ip-locked{overflow:hidden}
}

/* ── 모바일 ── */
@media (max-width:720px){
  .mv-bar{padding:9px 12px;gap:10px;min-height:48px}
  .mv-home-txt{display:none}
  .mv-era{padding:5px 11px;font-size:12.5px}
  .mv-filters{padding:8px 12px;gap:7px;flex-direction:column;align-items:stretch}
  .mv-filters .hs{flex:none;width:100%}
  .mv-filters .hs:last-child{margin-left:0}
  .mv-filters .chip{font-size:12px;padding:5px 11px}
  .mv-eralabel{left:10px;top:10px;padding:8px 12px;max-width:56vw}
  .mv-eralabel b{font-size:15.5px}
  .mv-eralabel em{display:none}
  .mv-slide-toggle{right:10px;bottom:10px;padding:7px 12px;font-size:12px}
  .mv-slide{height:118px}
  .mv-track{padding:11px 12px;gap:8px}
  .mv-item{flex:0 0 132px;padding:11px 12px}
  .mv-item-place{font-size:14px}
  /* 정보카드(바텀시트)가 열리면 슬라이드는 감춘다 */
  body.ip-locked .mv-slide{height:0;border-top-color:transparent}
  body.ip-locked .mv-slide-toggle{opacity:0;pointer-events:none}
}

/* 지도 컨트롤 톤 맞추기 */
.mapview .leaflet-control-zoom a{
  background:var(--ink-2);color:var(--chalk-dim);
  border-color:var(--ink-3)}
.mapview .leaflet-control-zoom a:hover{color:var(--brass)}
.mapview .leaflet-control-attribution{
  background:color-mix(in srgb, var(--ink) 78%, transparent)!important;
  color:var(--chalk-dim)!important;font-size:10px!important}
.mapview .leaflet-control-attribution a{color:var(--chalk-dim)!important}

@media (prefers-reduced-motion:reduce){
  .mv-slide,.mv-item,.mv-slide-toggle svg{transition:none}
}

/* 줌 컨트롤 우측 배치 */
.mapview .leaflet-top.leaflet-right{top:8px;right:8px}
.mapview .leaflet-control-zoom{border:1px solid var(--ink-3);border-radius:8px;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.28)}
.mapview .leaflet-control-zoom a{width:32px;height:32px;line-height:32px;font-size:17px;border-radius:0}
.mapview .leaflet-control-zoom a:first-child{border-bottom:1px solid var(--ink-3)}

/* 정보카드가 열리면 지도 위 오버레이는 뒤로 물러난다 */
body.ip-locked .mv-eralabel,
body.ip-locked .mapview .leaflet-top.leaflet-right{opacity:.25;transition:opacity .25s ease}
@media (min-width:721px){
  body.ip-locked .mv-slide-toggle{opacity:.25}
}


/* ============================================================
   가로 스크롤러 — 화살표는 넘칠 때만 나타난다
   JS가 없어도 스크롤바로 조작할 수 있게 만든다
   ============================================================ */
.hs{position:relative;display:flex;align-items:center;gap:2px;min-width:0}
.hs-eras{flex:1 1 auto}
.mv-filters .hs{flex:0 1 auto}
.mv-filters .hs:last-child{margin-left:auto}

/* 실제 스크롤 영역 — 손가락 스와이프가 최우선이다.
   scroll-behavior:smooth 는 넣지 않는다(터치 드래그를 브라우저가 애니메이션으로
   가로채 '밀리다 멈추는' 증상이 생긴다). 부드러운 이동은 JS가 필요할 때만 준다. */
.hs [data-hscroll]{
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent;
  padding-bottom:3px}
.hs [data-hscroll]::-webkit-scrollbar{height:6px}
.hs [data-hscroll]::-webkit-scrollbar-track{background:transparent}
.hs [data-hscroll]::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:4px}
.hs [data-hscroll]::-webkit-scrollbar-thumb:hover{background:var(--chalk-dim)}
/* 넘치지 않으면 스크롤바 자리만 없앤다. overflow 는 절대 잠그지 않는다 —
   JS 계측이 한 박자 늦으면 그대로 '먹통'이 되기 때문. */
.hs:not(.has-over) [data-hscroll]{padding-bottom:0;scrollbar-width:none}
.hs:not(.has-over) [data-hscroll]::-webkit-scrollbar{display:none}
.hs [data-hscroll].is-dragging{cursor:grabbing;scroll-behavior:auto}
.hs.has-over [data-hscroll]{cursor:grab}
.hs [data-hscroll].is-dragging .chip,
.hs [data-hscroll].is-dragging .mv-era{pointer-events:none}

/* 모든 가로 스크롤러 공통 — 브라우저에게 '이건 가로 팬이다'라고 먼저 알린다.
   touch-action 을 명시하지 않으면 브라우저가 방향을 판정하느라 첫 프레임을 버리고,
   overscroll-behavior-x 가 없으면 끝에서 스와이프가 '뒤로가기' 제스처에 먹힌다. */
[data-hscroll]{
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  -webkit-overflow-scrolling:touch}
[data-hscroll] > *{scroll-snap-align:none}
[data-hscroll].hs-js{touch-action:none}

/* 화살표 */
.hs-arrow{display:none;flex:none;width:26px;height:30px;
  align-items:center;justify-content:center;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:7px;
  color:var(--chalk-dim);font-size:17px;line-height:1;padding:0 0 2px;transition:.15s}
.hs-arrow:hover{border-color:var(--brass);color:var(--brass)}
.hs-arrow:disabled{opacity:.28;cursor:default;border-color:var(--ink-3);color:var(--chalk-dim)}
.hs.has-over .hs-arrow{display:flex}
.hs:not(.can-left) .hs-prev{opacity:.28;pointer-events:none}
.hs:not(.can-right) .hs-next{opacity:.28;pointer-events:none}

@media (max-width:720px){
  .hs-arrow{display:none!important}
  .hs [data-hscroll]{scrollbar-width:none;padding-bottom:0;overflow-x:auto!important}
  .hs [data-hscroll]::-webkit-scrollbar{display:none}
  .mv-track::-webkit-scrollbar{display:none}
  .mv-track{scrollbar-width:none}
  /* 더 밀 수 있다는 신호: 오른쪽 끝을 살짝 어둡게 */
  .hs{position:relative}
  .hs.can-right::after,.hs.can-left::before{
    content:'';position:absolute;top:0;bottom:0;width:26px;pointer-events:none;z-index:2}
  .hs.can-right::after{right:0;background:linear-gradient(90deg,transparent,var(--ink))}
  .hs.can-left::before{left:0;background:linear-gradient(-90deg,transparent,var(--ink))}
  .mv-bar .hs.can-right::after{background:linear-gradient(90deg,transparent,var(--ink-2))}
  .mv-bar .hs.can-left::before{background:linear-gradient(-90deg,transparent,var(--ink-2))}
}


/* ============================================================
   v3 — 모바일 스와이프 확정 수정
   원인 세 가지를 한꺼번에 없앤다.
   ① 손가락이 닿는 띠가 너무 얇았다. 시대 탭의 실제 스크롤 영역은 높이 30px
      남짓인데 바는 48px이라, 위아래 9px씩의 '죽은 구역'을 문지르면 아무 일도
      일어나지 않았다. → 스크롤 영역을 줄 전체 높이로 늘린다.
   ② 시대 탭이 홈 링크와 도구 버튼 사이에 낀 230px짜리 칸에 들어 있었다.
      → 모바일에서는 전용 줄로 내려 화면 전폭을 쓴다.
   ③ 네이티브 가로 스크롤 제스처 판정이 브라우저마다 달랐다.
      → js/hscroll.js 가 포인터 이벤트로 직접 끈다(관성 포함).
   ============================================================ */
@media (max-width:720px){
  /* ② 시대 탭 전용 줄 */
  .mv-bar{flex-wrap:wrap;row-gap:2px;padding:8px 0 0;min-height:0;align-items:center}
  .mv-bar > .mv-home{order:1;padding-left:12px}
  .mv-bar > .mv-tools{order:2;margin-left:auto;padding-right:12px}
  .mv-bar > .hs-eras{order:3;flex:1 0 100%;width:100%;min-width:0;margin:0}
  .mv-eras{padding:0 12px}
  .mv-era{padding:8px 12px;font-size:13px}

  /* ① 스크롤 영역을 줄 전체로 — 어디를 문질러도 잡힌다 */
  .hs{align-items:stretch}
  .hs [data-hscroll]{align-items:center;padding-top:7px;padding-bottom:9px}
  .mv-filters .chips{padding-top:5px;padding-bottom:5px}
  .mv-filters{gap:2px;padding:2px 12px 4px}
  .mv-filters .chip{padding:7px 12px}

  /* 드래그 중에는 안쪽 버튼이 눌리지 않게 */
  [data-hscroll].is-dragging .chip,
  [data-hscroll].is-dragging .mv-era,
  [data-hscroll].is-dragging .mv-item{pointer-events:none}
}
[data-hscroll].is-dragging{scroll-behavior:auto;cursor:grabbing}
/* 끄는 도중에는 안쪽 버튼이 눌리지 않게 — 마우스 드래그에도 적용된다 */
[data-hscroll].is-dragging .mv-item,
[data-hscroll].is-dragging .chip,
[data-hscroll].is-dragging .mv-era{pointer-events:none}
.mv-track{scroll-snap-type:none}


/* ============================================================
   v4 — 모바일에서는 '스와이프'를 요구하지 않는다
   가로 스와이프는 기기·브라우저마다 판정이 달라 신뢰할 수 없다.
   시대는 좌우 버튼으로, 필터는 펼침 패널에서 줄바꿈으로 처리한다.
   ============================================================ */
@media (max-width:720px){
  .mv-eranav{width:34px;height:34px;margin:0 2px}
  .hs-eras{gap:4px}
  .mv-eras{padding:0 2px}

  /* 필터: 접었다 펴는 패널 — 가로 스크롤 자체를 없앤다 */
  .mv-filters{flex-direction:column;align-items:stretch;gap:0;padding:6px 12px 7px}
  .mv-fbtn{display:flex;width:100%}
  .mv-filter-body{display:none}
  body.filters-open .mv-filter-body{display:flex;flex-direction:column;
    gap:8px;padding:10px 0 2px;width:100%}
  body.filters-open .mv-filters .hs{width:100%;display:block}
  body.filters-open .mv-filters .chips{flex-wrap:wrap!important;
    overflow:visible!important;touch-action:auto!important;padding:0;gap:7px}
  body.filters-open .mv-filters .chip{flex:none}
}


/* ============================================================
   v5 — 진짜 원인: 그리드 트랙이 화면보다 넓어졌다
   body.mapview 는 display:grid 인데 열(column)을 지정하지 않았다.
   암묵적 열은 'auto' 로 잡히고, 그리드 자식은 기본값이 min-width:auto 라
   자식 하나의 최소 내용 너비가 화면보다 넓으면 열 전체가 그만큼 벌어진다.
   그 결과 —
     · 상단 바와 필터 줄이 화면보다 넓은 칸 안에 놓인다
       → 시대 탭·칩은 그 넓은 칸 안에서는 '넘치지 않으므로' 스크롤할 것이 없다
         (그래서 아무리 밀어도 꿈쩍하지 않았다)
       → 오른쪽 끝의 ☀·EN 버튼과 시대 '›' 버튼이 화면 밖으로 나갔다
     · 하단 트랙은 넘치긴 하지만, 밀어낸 내용이 화면 밖 영역으로 들어가
       '조금 가다 마는' 것처럼 보인다
   body{overflow:hidden} 이 이 초과분을 잘라내고 있어서 눈에 띄지 않았다.
   → 열을 minmax(0,1fr) 로 못 박고, 모든 그리드 자식에 min-width:0 을 준다.
   ============================================================ */
html,body.mapview{max-width:100%;overflow-x:hidden}
body.mapview{grid-template-columns:minmax(0,1fr)}
body.mapview > .mv-bar,
body.mapview > .mv-filters,
body.mapview > .mv-stage,
body.mapview > .mv-slide{min-width:0;max-width:100%}
/* 혹시 남는 초과분이 있어도 줄 밖으로는 못 나가게 잘라낸다 */
body.mapview > .mv-filters{overflow:hidden}
/* 상단 바는 가로만 자른다 — 세로로 열리는 검색 결과를 자르면 안 된다 */
body.mapview > .mv-bar{overflow-x:hidden;overflow-y:visible}
.mv-eras,.mv-filters .chips,.mv-track{max-width:100%}

/* ============================================================
   v6 — 계보 지도
   상단은 분과 스트립, 하단은 연표축. 시대는 더 이상 벽이 아니다.
   ============================================================ */

/* 분과 스트립 */
.mv-field{display:inline-flex;align-items:center;gap:7px}
.fd-dot{width:8px;height:8px;border-radius:50%;flex:none}
.mv-field.is-active .fd-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 25%,transparent)}

/* 계보 위의 인물 — 순번 핀 */
.lin-pin i{display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--c);color:var(--ink);
  font-family:var(--mono);font-size:10px;font-weight:500;font-style:normal;
  border:1.5px solid var(--ink);
  box-shadow:0 1px 6px rgba(0,0,0,.45);cursor:pointer;transition:transform .12s}
.lin-pin:hover i{transform:scale(1.18)}
.lineage-line{pointer-events:none}

/* 연표축 */
.mv-timeline{display:flex;align-items:stretch;gap:4px;
  padding:8px 18px;background:var(--ink);border-top:1px solid var(--ink-3);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  touch-action:pan-x;overscroll-behavior-x:contain}
.mv-timeline::-webkit-scrollbar{display:none}
.tl-seg{flex:1 1 0;min-width:74px;display:flex;flex-direction:column;
  align-items:center;gap:2px;padding:7px 6px 8px;border-radius:8px;
  border:1px solid transparent;background:none;color:var(--chalk-dim);
  transition:.15s;position:relative}
.tl-seg i{font-family:var(--mono);font-size:9.5px;font-style:normal;
  letter-spacing:.1em;opacity:.6}
.tl-seg span{font-family:var(--disp);font-weight:700;font-size:13px;
  white-space:nowrap;line-height:1.3}
.tl-seg:hover{color:var(--chalk);background:var(--ink-2)}
.tl-seg.is-on{color:var(--brass);border-color:var(--brass);background:var(--ink-2)}
.tl-all{flex:0 0 auto;min-width:0;justify-content:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  padding:7px 14px;white-space:nowrap}
/* 시간의 흐름을 얇은 선으로 깐다 */
.mv-timeline::before{content:'';position:absolute;left:0;right:0;height:1px}

/* 하단 카드의 계보 순번 */
.mv-ord{display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;flex:none;
  background:var(--brass);color:var(--ink);
  font-family:var(--mono);font-size:9.5px;font-weight:500}
.mv-item.is-work{opacity:.62}
.mv-item.is-work .mv-dot{opacity:.5}

/* 그리드 행이 하나 늘었다 */
body.mapview{grid-template-rows:auto auto 1fr auto auto}

@media (max-width:720px){
  .mv-timeline{padding:6px 12px;gap:3px}
  .tl-seg{min-width:62px;padding:6px 4px 7px}
  .tl-seg span{font-size:12px}
  .tl-all{padding:6px 11px;font-size:10px}
  .lin-pin i{width:24px;height:24px;font-size:10.5px}
}

/* 계보선 켜고 끄기 */
.mv-linetoggle[hidden]{display:none}
.mv-linetoggle{display:block;margin-top:9px;padding:5px 11px;
  background:var(--ink);border:1px solid var(--ink-3);border-radius:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--chalk-dim);transition:.15s;pointer-events:auto}
.mv-linetoggle:hover{border-color:var(--brass);color:var(--brass)}
.mv-linetoggle.is-off{border-style:dashed;opacity:.75}
.mv-eralabel{pointer-events:none}

/* 카드 안에서 펼쳐지는 용어 (v3.6.3) */
.ip-gl button.ip-glx{font:inherit;font-size:12.5px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--ink-3);background:var(--ink);color:var(--chalk-dim);cursor:pointer}
.ip-gl button.ip-glx:hover{border-color:var(--brass);color:var(--chalk)}
.ip-gl button.ip-glx.is-on{border-color:var(--brass);color:var(--ink);background:var(--brass)}
.ip-gl-open[hidden]{display:none}
.ip-gl-open{margin-top:12px;padding:14px 16px;border-radius:10px;background:var(--ink);
  border-left:3px solid var(--brass)}
.ip-gl-open b{display:block;margin-bottom:8px;font-family:var(--disp);font-size:15px;
  color:var(--chalk)}
.ip-gl-open p{margin:0 0 9px;font-size:13px;line-height:1.75;color:var(--chalk-dim);
  word-break:keep-all}
.ip-gl-scene{padding-left:10px;border-left:2px solid var(--ink-3)}
.ip-gl-open .ip-glx-in{font:inherit;color:var(--brass);background:none;border:0;padding:0;
  cursor:pointer;border-bottom:1px dashed var(--brass)}
.ip-gl-more{display:inline-block;margin-top:2px;font-size:12px;color:var(--brass);
  text-decoration:none}
.ip-gl-more:hover{text-decoration:underline}

/* ── 카드 계보 — 본문이 이미 부른 이름만 단추가 된다 ── */
.ip-rel{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.ip-rel button.ip-relx{display:inline-flex;align-items:baseline;gap:8px;font:inherit;
  padding:7px 14px;border-radius:999px;border:1px solid var(--ink-3);
  background:var(--ink);color:var(--chalk);cursor:pointer;
  transition:border-color .15s,background .15s}
.ip-rel button.ip-relx:hover{border-color:var(--brass);background:var(--ink-2)}
.ip-rel button.ip-relx b{font-weight:600;font-size:13px;word-break:keep-all}
.ip-rel button.ip-relx span{font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-dim);flex:none;letter-spacing:.03em}

/* ── 길 — 자료실 시리즈를 따라 걷는 모드 ── */
.mv-strip-sep{flex:none;width:1px;height:16px;background:var(--ink-3);
  margin:0 6px;align-self:center}
.mv-era.mv-route.is-active{border-color:var(--brass);color:var(--chalk);
  background:var(--ink-3)}
/* 길 위에서는 시대 눈금을 쓰지 않는다 — 눌러도 길에서 나가버리니 미리 알린다 */
body.on-route #mv-timeline{opacity:.4}
.lin-pin.rt-pin i{border-width:2px}

/* ============================================================
   계보 지도 — 지도 칸이 0으로 접히던 문제 (2026-09-09)
   body.mapview 가 화면 높이에 고정된 격자인데, 맨 아래 소개글(#mv-intro)까지
   같은 격자에 들어 있어 남는 높이가 없으면 지도 칸(1fr)이 0이 됐다.
   → 지도 칸에 높이를 직접 주고, 페이지는 세로로 스크롤되게 푼다.
   mapview.css 맨 끝에 그대로 이어 붙인다.
   ============================================================ */
body.mapview{height:auto;min-height:100dvh;overflow:visible;overflow-x:hidden}
body.mapview > .mv-stage{height:clamp(380px,60vh,640px);min-height:380px}
body.mapview > #mv-intro{padding:36px 22px 44px;max-width:1120px;margin:0 auto;width:100%}
@media (max-width:720px){
  body.mapview > .mv-stage{height:clamp(300px,50vh,480px);min-height:300px}
  body.mapview > #mv-intro{padding:28px 16px 36px}
}

/* 카드로 날아간 자리 반짝이기 */
.mv-pulse{background:none;border:0;pointer-events:none}
.mv-pulse i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;border:2px solid var(--brass);opacity:0;
  animation:mv-ring 1.6s ease-out infinite}
.mv-pulse i:nth-child(2){animation-delay:.8s}
@keyframes mv-ring{0%{transform:scale(.25);opacity:.95}100%{transform:scale(1.15);opacity:0}}