/* css/portal.css — atlas/index.html(포털) 전용 스타일.
   css/style.css의 색상 토큰(--ink/--paper/--gold)을 그대로 이어받는다 —
   포털도 결국 ATLAS라는 같은 프로젝트의 정문이라, 지도 페이지들과
   다른 브랜드처럼 보이면 안 된다. era-hub/archive-hub 오버레이 관련
   클래스는 css/style.css를 그대로 재사용하므로 여기서 다시 정의하지
   않는다(중복 방지) — index.html이 style.css도 함께 불러온다. */

:root {
  --ink:#15130f; --ink-soft:#1e1b16; --paper:#eee7d8;
  /* 2026-08-05 가독성 조정(왕두목): 보조 텍스트가 배경에 묻힌다는
     지적을 받고 --paper-dim을 #a89f8c(대비 7.07:1) → #c6bda9(9.8:1)로
     올렸다. 대비는 실제 배경색 기준으로 계산해서 정한 값이다.
     --paper-faint는 기존 dim 자리 — 정말 물러나 있어야 하는 요소에만. */
  --paper-dim:#c6bda9; --paper-faint:#a89f8c;
  --gold:#b89860; --gold-bright:#d4b578;
}

* { margin:0; padding:0; box-sizing:border-box; }
/* portal.css는 이 포털 페이지에서만 불러오므로, html 태그를 직접
   덮어써도 다른 페이지에 영향이 없다. */
html { height:auto !important; overflow-y:auto !important; overflow-x:hidden; }
/* css/style.css의 body 규칙(overflow:hidden, height:100dvh, position:relative)은
   지도 앱(고정 뷰포트, 안 스크롤되는 전체화면 지도)을 위한 것이다.
   포털은 위→아래로 스크롤하는 일반 페이지라 이걸 명시적으로 되돌려야
   한다 — 안 그러면 구축 현황·푸터가 화면 밖으로 잘려서 안 보인다. */
body.portal {
  font-family:-apple-system,'Apple SD Gothic Neo',sans-serif;
  background:var(--ink); color:var(--paper);
  min-height:100vh; height:auto !important;
  overflow-y:auto !important; overflow-x:hidden;
  position:static !important;
}

/* ── 배경 지도 이미지 ──
   assets/images/portal-bg-v2.jpg — 위성에서 본 한반도 야경 이미지.
   (파일명을 portal-map-bg.jpg에서 v2로 바꿨다 — 캐시가 계속 안 풀린다는
   보고를 받고, 쿼리스트링 캐시버스팅으로도 안 되길래 아예 새 파일명으로
   확실하게 캐시를 무력화했다.)
   이전 값(filter:brightness(0.7) + ::after 45~88% 오버레이)은 실제로는
   이미지가 정상 로드되고 있었는데도, 두 겹의 어둡게 하기가 누적되면서
   합성 결과 평균 밝기가 20/255까지 떨어져 배경색(--ink, 밝기 약 20)과
   거의 구별 안 되는 상태였다 — PIL로 실제 합성 결과를 렌더링해
   숫자로 확인한 뒤에 값을 다시 잡았다. 지금 값은 같은 방식으로
   재검증한 결과다: 도시 불빛이 보이면서도 좌상단 히어로 텍스트
   영역은 여전히 충분히 어둡다(그 영역 평균 밝기 약 30/255). */
.portal-map-bg {
  position:fixed; inset:0; z-index:0;
  background-color: var(--ink);
  /* background-image는 js/portal.js가 인라인으로 넣는다 (일간 로테이션, 2026-08-07) */
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 2026-08-05 가독성 조정(왕두목: "폰트색이 배경과 비슷해 잘 안 보인다").
   원인은 색 토큰이 아니라 배경이었다 — 히어로 배경은 주 단위로 바뀌는데
   (js/portal.js 주간 순환), 이번 주처럼 밝은 일출 사진이 걸리면 상단
   0~35% 구간의 10% 스크림으로는 그 위의 흰 글씨를 받쳐주지 못한다.
   어두운 사진 기준으로 잡힌 값이었던 셈이다.
   그래서 두 겹으로 나눈다:
     ① 세로 그라디언트 — 전체 톤을 눌러 하단 콘텐츠 영역까지 정리
     ② 좌상단 방사형 — 히어로 텍스트가 실제로 놓이는 자리만 더 눌러
        사진의 인상은 살리면서 글씨 뒤만 어둡게
   어떤 사진이 걸려도 히어로 텍스트 영역은 이 두 겹으로 보호된다. */
.portal-map-bg::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 8% 22%, rgba(21,19,15,0.72) 0%, rgba(21,19,15,0.45) 38%, rgba(21,19,15,0) 68%),
    linear-gradient(180deg, rgba(21,19,15,0.34) 0%, rgba(21,19,15,0.30) 30%, rgba(21,19,15,0.52) 70%, rgba(21,19,15,0.82) 100%);
}

/* ── 상단 내비 ── */
.portal-nav {
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:flex-end;
  padding:16px 32px;
}
.portal-nav-menu { display:flex; gap:26px; }
/* 내비는 배경 사진의 가장 밝은 부분(하늘) 위에 놓일 때가 많다.
   스크림만으로는 부족해서 글자 자체에 얇은 그림자를 깐다. */
.portal-nav-menu a, .portal-nav-menu button { text-shadow:0 1px 3px rgba(0,0,0,0.75); }
.portal-nav-item {
  appearance:none; background:none; border:none; color:var(--paper-dim);
  font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.portal-nav-item:hover { color:var(--paper); }

/* ── 상단 영역: 왼쪽(히어로+자료실 둘러보기) / 오른쪽(오늘의 특집) ──
   전 버전 문제 두 가지를 여기서 고친다:
   1) 특집 카드가 히어로보다 길면 "자료실 둘러보기"가 그만큼 밀려
      내려가던 문제 → 히어로와 둘러보기를 .portal-left로 한 컬럼에
      묶어서, 특집 카드 높이와 완전히 무관하게 붙어있게 한다.
   2) 특집 카드가 화면 우측 끝에 안 붙고 중간에 떠 있던 문제 →
      justify-content:space-between으로 왼쪽 컬럼과 오른쪽 카드를
      양 끝으로 밀어낸다. */
.portal-top {
  position:relative; z-index:2;
  display:flex; justify-content:space-between; gap:28px; align-items:flex-start;
  padding:28px 32px 0; flex-wrap:wrap;
}
.portal-left { flex:1 1 420px; min-width:0; max-width:560px; display:flex; flex-direction:column; gap:22px; }
.portal-hero { padding:0; }
.portal-hero-title { font-family:Georgia,'Noto Serif KR',serif; font-size:44px; font-weight:700; color:var(--gold-bright); letter-spacing:2px; line-height:1; }
.portal-hero-sub { font-size:13px; color:var(--gold); margin-top:6px; letter-spacing:0.5px; }
.portal-hero-tagline { font-size:21px; font-weight:700; line-height:1.35; margin-top:16px; color:var(--paper); }
.portal-hero-range { font-size:12.5px; color:var(--paper-dim); margin-top:9px; text-shadow:0 1px 3px rgba(0,0,0,0.7); }

.portal-cta {
  display:inline-flex; align-items:center; gap:12px;
  margin-top:16px; padding:12px 18px; border-radius:10px;
  background:var(--gold); color:#241d10; text-decoration:none;
  font-weight:800; font-size:14px;
}
.portal-cta:hover { background:var(--gold-bright); }
.portal-cta-icon { font-size:17px; }
.portal-cta-sub { display:block; font-size:11px; font-weight:600; opacity:0.9; margin-top:1px; }

.portal-era-launch { margin-top:16px; }
.portal-era-launch-label { font-size:12px; color:var(--paper-dim); margin-bottom:8px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.7); }
.portal-era-grid { display:flex; gap:8px; flex-wrap:wrap; }
.portal-era-btn {
  appearance:none; border:1.5px solid rgba(238,231,216,0.18); border-radius:10px;
  background:rgba(30,27,22,0.5); color:var(--paper); padding:8px 12px;
  text-align:left; cursor:pointer; text-decoration:none; display:block; min-width:88px;
}
.portal-era-btn:hover:not(.disabled) { border-color:var(--gold); background:rgba(184,152,96,0.12); }
.portal-era-btn.disabled { opacity:0.4; cursor:default; }
.portal-era-btn-period { display:block; font-size:10px; color:var(--paper-dim); letter-spacing:0.5px; }
.portal-era-btn-name { display:block; font-size:12.5px; font-weight:700; margin-top:2px; }
/* ── ATLAS TODAY — 시대 줄의 마지막 칸 ──
   2026-08-05: 다른 시대 버튼과 같은 옷을 입고 있으니 일곱 형제 중
   하나로 묻혔다. 줄에서 빼내는 대신(타임라인이 끊긴다) 같은 자리에서
   혼자만 금색으로 "채워" 둔다 — 나머지가 테두리만 있는 어두운 칸이라,
   채워진 칸 하나는 멀리서도 먼저 눈에 들어온다. */
.portal-era-btn-today {
  border-color:var(--gold-bright);
  background:linear-gradient(135deg, rgba(184,152,96,0.42), rgba(184,152,96,0.20));
  box-shadow:0 0 0 1px rgba(184,152,96,0.18), 0 4px 16px rgba(0,0,0,0.3);
}
.portal-era-btn-today:hover {
  border-color:#e8cf95;
  background:linear-gradient(135deg, rgba(184,152,96,0.58), rgba(184,152,96,0.30));
  box-shadow:0 0 0 1px rgba(232,207,149,0.3), 0 6px 20px rgba(0,0,0,0.4);
}
.portal-era-btn-today .portal-era-btn-period {
  color:#f0dcae; font-weight:700; display:flex; align-items:center; gap:5px;
}
.portal-era-btn-today .portal-era-btn-name { color:#fbf5e6; }
/* 상시 갱신되는 사이트라는 신호. 시대 버튼 줄에서 유일하게 움직이는
   요소라, 정지한 여섯 칸 사이에서 시선을 끈다. */
.today-dot {
  width:6px; height:6px; border-radius:50%; background:#e0603c; flex:0 0 6px;
  animation:todayPulse 2.2s ease-out infinite;
}
@keyframes todayPulse {
  0%   { box-shadow:0 0 0 0 rgba(224,96,60,0.6); }
  70%  { box-shadow:0 0 0 7px rgba(224,96,60,0); }
  100% { box-shadow:0 0 0 0 rgba(224,96,60,0); }
}
@media (prefers-reduced-motion: reduce) { .today-dot { animation:none; } }

/* ── 자료실 둘러보기 ── */
.portal-explore-label { font-size:12px; color:var(--paper-dim); font-weight:700; margin-bottom:10px; text-shadow:0 1px 3px rgba(0,0,0,0.7); }
#portalExplore { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
.portal-explore-card {
  display:block; background:rgba(30,27,22,0.55); border:1px solid rgba(238,231,216,0.16);
  border-radius:12px; padding:14px 16px; text-decoration:none; color:var(--paper);
}
.portal-explore-card:hover { border-color:var(--gold); }
.portal-explore-badge { font-size:11px; color:var(--gold); font-weight:800; letter-spacing:0.5px; }
.portal-explore-title { font-size:13.5px; font-weight:700; margin-top:4px; }
.portal-explore-desc { font-size:11.5px; color:var(--paper-dim); margin-top:4px; line-height:1.5; }

/* ── 오늘의 특집 카드 ── 오른쪽 끝에 고정폭. */
.portal-featured-wrap { flex:0 0 360px; max-width:360px; }
.featured-card {
  background:var(--ink-soft); border:1px solid rgba(238,231,216,0.1); border-radius:16px;
  padding:16px; box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.featured-card-eyebrow { font-size:10.5px; color:var(--gold); font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.featured-card-sub { font-size:11.5px; color:var(--paper-dim); margin-top:2px; margin-bottom:12px; }
.featured-badge {
  display:inline-block; background:#c44536; color:#fff; font-size:10px; font-weight:800;
  padding:3px 8px; border-radius:5px; margin-bottom:8px;
}
.featured-thumb {
  display:block; position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/9;
  background:#000;
}
.featured-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.featured-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#fff; background:rgba(0,0,0,0.15);
}
.featured-title { font-size:15px; font-weight:800; margin-top:10px; line-height:1.32; color:var(--paper); }
.featured-desc { font-size:11.5px; color:var(--paper-dim); margin-top:5px; line-height:1.55; }
.featured-related { margin-top:12px; padding-top:10px; border-top:1px solid rgba(238,231,216,0.1); }
.featured-related-title { font-size:11.5px; color:var(--paper-dim); margin-bottom:7px; }
.featured-related-list { display:flex; flex-wrap:wrap; gap:6px; }
.featured-related-list a {
  font-size:11px; color:var(--gold-bright); text-decoration:none;
  border:1px solid rgba(184,152,96,0.35); border-radius:6px; padding:4px 9px;
}
.featured-related-list a:hover { background:rgba(184,152,96,0.12); }
.featured-cta {
  display:block; text-align:center; margin-top:13px; padding:10px; border-radius:8px;
  background:var(--gold); color:#241d10; text-decoration:none; font-weight:800; font-size:13px;
}
.featured-cta:hover { background:var(--gold-bright); }
.featured-empty { font-size:12.5px; color:var(--paper-dim); padding:16px 0; text-align:center; }

/* ── 아틀라스 현황 카드 ── 특집 카드 바로 아래, 같은 사이드바 폭. */
.stats-card {
  margin-top:16px; padding:18px 20px; border-radius:12px;
  background:rgba(238,231,216,0.04); border:1px solid rgba(238,231,216,0.1);
}
.stats-card-title { font-size:13px; font-weight:800; color:var(--paper); margin-bottom:12px; }
.stats-card-grid { display:flex; flex-wrap:wrap; gap:18px 26px; }
.stat-item { display:flex; align-items:baseline; gap:6px; }
.stat-num { font-family:Georgia,serif; font-size:20px; font-weight:800; color:var(--gold-bright); }
.stat-label { font-size:11.5px; color:var(--paper-dim); }
.stats-card-note {
  margin-top:14px; padding-top:12px; border-top:1px solid rgba(238,231,216,0.1);
  font-size:11px; line-height:1.6; color:var(--paper-dim);
}

/* ── 추천 루트 ── 가로 스크롤 카드 캐러셀. */
.portal-routes { position:relative; z-index:2; margin:36px 32px 0; }
.portal-routes-header { margin-bottom:16px; }
.portal-section-title { font-size:20px; font-weight:800; color:var(--paper); }
.portal-section-sub { font-size:12.5px; color:var(--paper-dim); margin-top:4px; }

.portal-routes-scroll {
  display:flex; gap:16px; overflow-x:auto; padding-bottom:10px;
  scroll-snap-type:x proximity;
}
.portal-routes-scroll::-webkit-scrollbar { height:6px; }
.portal-routes-scroll::-webkit-scrollbar-thumb { background:rgba(238,231,216,0.15); border-radius:3px; }

.route-card {
  flex:0 0 220px; scroll-snap-align:start; position:relative;
  height:280px; border-radius:12px; overflow:hidden; text-decoration:none;
  background-size:cover; background-position:center;
  border:1px solid rgba(238,231,216,0.1);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px; transition:transform 0.15s ease, border-color 0.15s ease;
}
.route-card:hover { transform:translateY(-3px); border-color:rgba(212,181,120,0.5); }
.route-card-period {
  position:absolute; top:14px; left:14px; font-size:10.5px; font-weight:700;
  color:#241d10; background:var(--gold-bright); padding:3px 9px; border-radius:20px;
}
.route-card-name { font-size:16px; font-weight:800; color:var(--paper); line-height:1.3; }
.route-card-tagline {
  font-size:11.5px; color:var(--paper-dim); margin-top:5px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.route-card-meta { font-size:11px; color:var(--gold-bright); margin-top:9px; font-weight:700; }

/* ── 빠른 접근 ── */
.portal-quick { position:relative; z-index:2; margin:40px 32px 0; }
.portal-quick-header { margin-bottom:16px; }
.portal-quick-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
/* 답사 항목이 추가되면서 4열 → 5열. 모바일 2열에서는 마지막 칸이 홀로 남으므로
   전체 너비를 차지하게 해 신규 갈래를 눈에 띄게 한다(아래 미디어쿼리).
   2026-08-16 「독립유공자 찾기」 추가로 10개 = 5열 2줄로 정확히 맞아떨어진다.
   2026-08-20 「친일반민족행위자 찾기」를 넣으면서 「지도 탐험」을 뺐다 —
   11칸이 되면 둘째 줄이 어긋나고, 지도는 히어로 CTA와 시대 버튼에
   이미 있었다. 10칸 2줄 구조는 그대로 지킨다. */
/* 「이름의 지도」 — 추모의 성격이 있어 답사(갈색)와 구분되는 청동 계열로 둔다. */
.portal-quick-item-indep {
  border-color:rgba(79,179,167,0.45);
  background:linear-gradient(135deg, rgba(79,179,167,0.16), rgba(79,179,167,0.05));
}
/* 「결정의 기록」(2026-08-20) — 바로 옆 칸인 「독립유공자 찾기」와 마주보게
   둔다. 같은 시대의 양면이므로 형태는 같게, 색만 반대편으로 가져간다:
   청동 ↔ 벽돌. 다만 채도를 독립유공자 쪽보다 낮춰 강조하지 않는다 —
   고발이 아니라 기록이므로, 두 칸 중 이쪽이 더 튀면 성격이 어긋난다.
   벽돌색은 친일단체 계보도(collab_groups.html)의 '병탄 협력형' 색과
   같은 계열이라, 두 페이지가 한 몸으로 읽힌다. */
.portal-quick-item-collab {
  border-color:rgba(160,76,62,0.40);
  background:linear-gradient(135deg, rgba(160,76,62,0.13), rgba(160,76,62,0.04));
}
.portal-quick-item-collab:hover { border-color:rgba(160,76,62,0.70); }
.portal-quick-item-damsa { border-color:rgba(190,140,80,.45); }
/* ATLAS TODAY 빠른 접근 칸 (2026-08-05) — 시대 줄의 칸과 같은 금색
   계열로 묶어, 두 곳 어디서 봐도 같은 목적지임을 알게 한다. */
.portal-quick-item-today {
  border-color:rgba(184,152,96,0.6);
  background:linear-gradient(135deg, rgba(184,152,96,0.20), rgba(184,152,96,0.07));
}
.portal-quick-item-today:hover { border-color:var(--gold-bright); }
.portal-quick-item-today .portal-quick-label { color:#fbf5e6; }
.portal-quick-item-today .today-dot { display:inline-block; margin-left:6px; vertical-align:middle; }

/* 기억의 뜰 (2026-08-05) — 다른 칸보다 차분하게. 강조하되 들뜨지 않도록
   테두리만 옅은 금색으로 두고 배경은 살짝 어둡게 눌러 둔다. */
.portal-quick-item-memorial {
  border-color: rgba(184,152,96,.42);
  background: linear-gradient(180deg, rgba(184,152,96,.06), rgba(20,17,12,.02));
}
.portal-quick-item-memorial:hover { border-color: rgba(184,152,96,.75); }
.portal-quick-item {
  display:flex; flex-direction:row; align-items:center; gap:14px;
  padding:18px 18px; border-radius:14px; text-decoration:none;
  background:linear-gradient(165deg, rgba(238,231,216,0.06), rgba(238,231,216,0.02));
  border:1px solid rgba(238,231,216,0.12);
  color:var(--paper); text-align:left;
  transition:transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.portal-quick-item:hover {
  transform:translateY(-3px);
  background:linear-gradient(165deg, rgba(184,152,96,0.18), rgba(184,152,96,0.05));
  border-color:rgba(212,181,120,0.55);
}
.portal-quick-badge {
  flex-shrink:0; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:rgba(212,181,120,0.12); border:1px solid rgba(212,181,120,0.28);
}
.portal-quick-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.portal-quick-label { font-size:13.5px; font-weight:800; letter-spacing:-0.01em; }
.portal-quick-sub {
  font-size:10.5px; color:var(--paper-dim); font-weight:600; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.portal-quick-item-accent {
  background:linear-gradient(165deg, rgba(140,74,46,0.22), rgba(140,74,46,0.06));
  border-color:rgba(196,120,80,0.35);
}
.portal-quick-item-accent .portal-quick-badge {
  background:rgba(196,120,80,0.18); border-color:rgba(196,120,80,0.4);
}
.portal-quick-item-accent:hover {
  background:linear-gradient(165deg, rgba(196,120,80,0.3), rgba(196,120,80,0.08));
  border-color:rgba(212,150,110,0.6);
}
@media (max-width:640px) {
  .portal-quick-grid { grid-template-columns:1fr 1fr; }
  /* 홀수 개일 때만 마지막 칸이 홀로 남으므로 그 칸만 전체 폭을 쓴다.
     2026-08-16: 항목이 10개(짝수)가 되면서 무조건 적용하면 빈칸이 생겼다.
     :nth-child(odd)를 함께 걸어 홀수 개일 때만 동작하게 한다. */
  .portal-quick-item:last-child:nth-child(odd) { grid-column:1 / -1; }
  .portal-quick-sub { white-space:normal; }
}

.portal-footer { position:relative; z-index:2; padding:36px 32px 24px; font-size:12px; color:var(--paper-dim); }
.portal-footer-links { margin-top:14px; padding-top:14px; border-top:1px solid rgba(238,231,216,0.08);
  font-size:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.portal-footer-links a { color:var(--paper-dim); text-decoration:none; font-weight:600; }
.portal-footer-links a:hover { color:var(--gold-bright); }
.portal-footer-links span { color:var(--paper-faint); opacity:0.5; }

/* 2026-08-06: 패밀리 사이트 블록(엠케이아틀라스 우산).
   4칸 그리드 고정 — 과학·철학이 공개되면 .is-soon만 떼면 된다. */
.portal-family { margin-top:18px; padding-top:16px; border-top:1px solid rgba(238,231,216,0.08); }
.portal-family-brand { font-size:12px; font-weight:700; letter-spacing:0.02em; color:var(--paper-dim); margin-bottom:10px; }
.portal-family-brand span { font-weight:500; opacity:0.45; margin-left:6px; letter-spacing:0.08em; }
.portal-family-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.portal-family-list li { border:1px solid rgba(238,231,216,0.10); border-radius:8px; padding:10px 12px; }
.portal-family-list a { display:block; text-decoration:none; }
.portal-family-list .pf-name { display:block; font-size:12.5px; font-weight:700; color:var(--paper-dim); }
.portal-family-list .pf-note { display:block; font-size:11px; margin-top:3px; color:var(--paper-faint); opacity:0.6; }
.portal-family-list a:hover .pf-name { color:var(--gold-bright); }
.portal-family-list li.is-current { border-color:rgba(238,231,216,0.22); }
.portal-family-list li.is-soon { opacity:0.42; }

/* 2026-08-21: 스튜디오 표기.
   작고 흐리게 둔다 — 아틀라스 이용자에게 영업하려는 표기가 아니라
   "누가 만들었나"를 찾는 사람만 발견하면 되는 줄이다. 검색엔진에는
   크기와 무관하게 동일한 링크 신호로 잡힌다.
   color:inherit이라 푸터 글자색을 그대로 따라간다. */
.mk-studio-credit { margin-top:14px; font-size:12px; letter-spacing:0.04em; opacity:0.55; }
.mk-studio-credit a { color:inherit; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px; opacity:0.9;
  transition:opacity 0.3s ease; }
.mk-studio-credit a:hover { opacity:1; }

@media (max-width:900px) {
  .portal-family-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.info-modal-body p { font-size:13.5px; line-height:1.8; color:#4a443a; margin-bottom:14px; }

@media (max-width:900px) {
  .portal-nav, .portal-top, .portal-routes, .portal-quick, .portal-footer { padding-left:20px; padding-right:20px; }
  .portal-top { flex-direction:column; }
  .portal-nav-menu { gap:14px; }
  .portal-hero-title { font-size:34px; }
  .portal-hero-tagline { font-size:18px; }
  .portal-left, .portal-featured-wrap { max-width:none; flex-basis:auto; }
  .portal-nav-item span.label-full { display:none; }
  .stats-card-grid { gap:14px 22px; }
  .portal-quick-grid { grid-template-columns:repeat(2, 1fr); }
  .portal-quick-item:last-child { grid-column:1 / -1; }
  .route-card { flex-basis:190px; height:250px; }
}

/* ── NEW 배지 (2026-07-28) ─────────────────────────────
   루트·자료실 항목에 updated:'YYYY-MM-DD'를 적어두면 그날부터 일주일간
   카드 좌상단에 붙는다. 루트 카드는 position:relative 위에 얹히는
   오버레이라 카드 안쪽 흐름을 건드리지 않고, 자료실 카드는 시리즈
   이름 배지 옆에 인라인으로 따라붙는다. */
/* 2026-07-31 색 교체 — 금색이라 카드의 금빛 톤에 묻혀 안 보인다는
   지적(왕두목: "항일무장투쟁에 NEW 배지가 눈에 띄지 않는다"). 상단
   메뉴의 .nav-new와 같은 빨강으로 통일한다 — 이 프로젝트에서 '새 것'을
   나타내는 색은 하나로 고정하는 것이 맞다. 색이 두 개면 사람이 매번
   "이건 새 것 맞나?"를 다시 판단해야 한다. */
.portal-new-badge {
  display:inline-block; background:#d0342c; color:#fff;
  font-size:9px; font-weight:900; letter-spacing:0.8px;
  padding:2px 6px; border-radius:999px; line-height:1.4;
  vertical-align:middle; box-shadow:0 1px 4px rgba(0,0,0,0.35);
}
.route-card { position:relative; }
.route-card .portal-new-badge {
  position:absolute; top:10px; right:10px; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,0.45);
}
.portal-explore-card .portal-new-badge { margin-left:6px; }


/* ── NEW 배지 (2026-07-30) ────────────────────────────────────
   새로 생긴 갈래(지금은 「답사」)를 알리는 표시.
   portal-nav-item은 button과 <a>가 섞이므로 text-decoration도 눌러둔다. */
.nav-new {
  display: inline-block; margin-left: 4px; vertical-align: 2px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .04em;
  line-height: 1.4; color: #fff; background: #d0342c;
  border-radius: 3px; padding: 1px 3px 0;
}
a.portal-nav-item { text-decoration: none; display: inline-flex; align-items: center; }

/* ═══════════════════════════════════════════════════════
   주간(라이트) 모드 — 2026-08-07
   ═══════════════════════════════════════════════════════
   포털에도 주간/야간 전환을 넣는다(왕두목 지시). 지도 페이지는
   타일 URL을 밝은 것으로 갈아끼우는 방식이지만, 포털에는 타일이
   없고 배경 사진 한 장이 깔려 있을 뿐이다. 그래서 방식이 다르다.

   핵심 판단: 사진은 그대로 두고 그 위의 스크림을 뒤집는다.
   야간에는 어두운 스크림으로 사진을 눌러 흰 글씨를 받쳤다면,
   주간에는 밝은 스크림(종이색 워시)을 얹어 사진을 바래게 하고
   그 위에 어두운 글씨를 올린다. 배경 사진의 밝은 버전을 따로
   만들 필요가 없고, 오래된 종이 지도 같은 인상이라 브랜드와도
   맞는다.

   색 토큰(--ink/--paper)을 통째로 뒤집으므로 대부분의 규칙은
   자동으로 따라온다. 다만 rgba로 하드코딩된 표면·테두리는
   야간 기준(어두운 판, 밝은 테두리)이라 아래에서 개별로 뒤집는다. */

body.portal.portal-light {
  --ink:#f2ece0; --ink-soft:#fbf7ee; --paper:#2a251c;
  --paper-dim:#4e463a; --paper-faint:#6d6555;
  --gold:#8a6d34; --gold-bright:#6f5626;
  color:var(--paper);
}

/* 스크림 반전 — 어둡게 누르던 두 겹을 밝게 바래는 두 겹으로.
   히어로 텍스트가 놓이는 좌상단은 야간과 마찬가지로 더 강하게
   덮어, 어떤 사진이 걸려도 글씨가 읽히도록 보호한다. */
/* 2026-08-07 재조정: 최초 값(0.90/0.74/0.42 + 0.62~0.93)은 너무 두꺼웠다.
   PIL로 실제 합성해 재보니 원본 사진의 명암 편차 42~84가 합성 후 5~13으로
   무너져, 주간 모드에서는 배경 사진이 사실상 백지가 됐다(전체 평균 밝기
   224/255). 어두운 사진 넉 장만 놓고 "밝게만 만들면 된다"고 잡은 값이었다.
   아래 값은 같은 방식으로 다시 재서 고른 것 — 전체 평균 198/255, 편차 15로
   사진이 바랜 채 살아 있고, 히어로 텍스트 대비는 최저 8.85:1로 여전히
   기준(4.5:1)을 크게 넘는다. */
body.portal-light .portal-map-bg::after {
  background:
    radial-gradient(120% 85% at 8% 22%, rgba(246,241,231,0.78) 0%, rgba(246,241,231,0.58) 38%, rgba(246,241,231,0.22) 68%),
    linear-gradient(180deg, rgba(246,241,231,0.42) 0%, rgba(246,241,231,0.46) 30%, rgba(246,241,231,0.62) 70%, rgba(246,241,231,0.78) 100%);
}

/* 야간용 글자 그림자는 밝은 바탕에서 글씨를 뭉개므로 없앤다. */
body.portal-light .portal-nav-menu a,
body.portal-light .portal-nav-menu button { text-shadow:none; }
body.portal-light .portal-hero-range { text-shadow:none; }
body.portal-light .portal-hero-title { color:#7a5f2a; }

/* 어두운 반투명 판 → 밝은 반투명 판.
   (--ink-soft를 쓰는 .featured-card/.stats-card는 토큰 반전으로
   자동 처리되므로 여기 없다.) */
body.portal-light .portal-era-btn { background:rgba(255,253,248,0.72); }
body.portal-light .portal-explore-card { background:rgba(255,253,248,0.72); }
body.portal-light .stats-card { background:rgba(255,253,248,0.55); }
body.portal-light .portal-quick-item { background:rgba(255,253,248,0.62); }
body.portal-light .portal-quick-item:hover { background:rgba(255,253,248,0.85); }

/* 밝은 테두리(rgba(238,231,216,x)) → 어두운 테두리.
   야간에는 어두운 판 위의 밝은 선이었지만, 주간에는 반대가 되어야
   경계가 보인다. */
body.portal-light .featured-card,
body.portal-light .portal-quick-item,
body.portal-light .stats-card,
body.portal-light .route-card,
body.portal-light .portal-family-list li { border-color:rgba(60,52,38,0.20); }
body.portal-light .portal-family-list li.is-current { border-color:rgba(60,52,38,0.38); }
body.portal-light .portal-routes-scroll::-webkit-scrollbar-thumb { background:rgba(60,52,38,0.22); }
body.portal-light .portal-quick-badge {
  background:rgba(160,120,50,0.14); border-color:rgba(160,120,50,0.34);
}

/* 루트 카드는 사진 위에 흰 글씨를 얹는 구조라, 주간에도 카드 안쪽은
   어두운 채로 둔다 — 사진을 밝게 바래면 글씨가 죽는다. */
body.portal-light .route-card-name,
body.portal-light .route-card-tagline,
body.portal-light .route-card-period { color:#f4efe2; }

/* CTA(금색 버튼)는 야간에 어두운 글자였는데, 주간에도 금색 판
   위에 어두운 글자라 그대로 두면 된다 — 대비가 충분하다. */

/* 영상 썸네일 위 재생 버튼은 흰 글자가 전제 — 그대로 둔다. */
body.portal-light .featured-play { color:#fff; }


/* ── 홈 자료실 블록 (2026-08-15 SEO) ─────────────────────────
   전용 클래스를 만들지 않는다. 이 블록은 '빠른 접근'과 똑같은
   .portal-quick / .portal-quick-item 구조를 재사용한다 —
   주간·야간 테마 규칙이 이미 그 클래스들에 붙어 있기 때문이다.
   (한 번 전용 클래스로 만들었다가 주간 테마 대응이 없어 글자가
    배경에 묻히는 문제가 있었다. 2026-08-15 왕두목 지적.)
   여기서 필요한 것은 섹션 소제목 안의 링크 색 하나뿐이다. */
.portal-section-sub a { color: var(--gold-bright, #d9b978); font-weight: 700; }