/* css/portal.css — 포털(index.html) 전용.
   css/style.css의 색상 토큰을 그대로 이어받는다.

   ── 구성 원칙 ──
   첫 화면은 한 장면이다. 상징 이미지 위에 제목과 시대 카드 세 장만 얹는다.
   "왜 셋으로 나눴나", "기록 원칙", "구축 현황"은 스크롤로 쌓지 않고
   상단 버튼 → 모달로 뺐다. ATLAS 포털이 소개와 FAQ를 모달로 두는 것과
   같은 방식이며, 첫 화면에서 읽어야 할 것을 최소로 줄이기 위해서다. */

html { height: 100%; }
body.portal { min-height: 100%; overflow: hidden; }

/* ── 상단 내비 ── */
.portal-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px;
}
.portal-nav .fill { flex: 1; }
.portal-brand {
  font-family: var(--serif); font-weight: 700; font-size: 16px;
  color: var(--paper); text-decoration: none; letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.portal-brand span { color: var(--gold); }
.portal-nav .site-link {
  background: rgba(21,19,15,.5); backdrop-filter: blur(6px); cursor: pointer;
  font-family: inherit;
}

/* ── 무대 ── */
.stage { position: relative; height: 100vh; overflow: hidden; }

/* 배경 이미지. assets/portal-hero.jpg 를 넣으면 자동으로 잡힌다.
   없으면 아래 잉크색 바탕만 보이므로 이미지 없이도 화면이 깨지지 않는다. */
.stage-bg {
  position: absolute; inset: 0;
  background: var(--ink) url('../assets/portal-hero.jpg') center/cover no-repeat;
  transform: scale(1.04);
}
/* 왼쪽에서 오른쪽으로 걷히는 장막. 글자가 얹히는 쪽만 어둡게 눌러
   이미지는 살리고 가독성은 지킨다. */
.stage-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(21,19,15,.94) 0%, rgba(21,19,15,.86) 34%,
                    rgba(21,19,15,.55) 62%, rgba(21,19,15,.35) 100%),
    linear-gradient(0deg, rgba(21,19,15,.85) 0%, transparent 42%);
}

.stage-inner {
  position: relative; z-index: 2; height: 100%;
  max-width: 1180px; margin: 0 auto; padding: 96px 30px 34px;
  display: flex; flex-direction: column; justify-content: center;
}

.hero-eyebrow {
  font-family: var(--mono); font-size: 11.5px; color: var(--gold);
  letter-spacing: .22em; margin-bottom: 16px;
}
.hero-title {
  font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.18; letter-spacing: -.035em; margin-bottom: 20px;
  text-shadow: 0 2px 30px rgba(0,0,0,.7);
}
.hero-lead {
  font-size: 15px; line-height: 1.85; color: var(--paper-dim);
  max-width: 500px; word-break: keep-all; margin-bottom: 38px;
}

/* ── 시대 카드 ── */
.era-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.era-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 9px; padding: 17px 16px 15px;
  background: rgba(30,27,22,.72); backdrop-filter: blur(8px); overflow: hidden;
  transition: border-color .18s, transform .18s;
}
.era-card > * { position: relative; z-index: 2; }

/* 시대 사진. 위에 어두운 장막을 깔아 글자 대비를 확보한다.
   사진 자체는 평균 밝기가 낮지만(50 안팎) 부분적으로 밝은 곳이 있어
   장막 없이 흰 글자를 얹으면 조명·창문 위에서 읽히지 않는다. */
.era-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .5; transition: opacity .25s, transform .35s;
}
.era-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,19,15,.72) 0%, rgba(21,19,15,.9) 100%);
}
.era-card:hover {
  border-color: var(--gold); transform: translateY(-2px);
}
.era-card:hover .era-bg { opacity: .72; transform: scale(1.04); }
.era-card.disabled { opacity: .42; pointer-events: none; }
.era-card.disabled .era-bg { filter: grayscale(.5); }

.era-no {
  font-family: var(--mono); font-size: 10px; color: var(--gold);
  letter-spacing: .1em; margin-bottom: 7px;
}
.era-period { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); }
.era-name {
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  margin: 3px 0 7px; letter-spacing: -.02em;
}
.era-tagline { font-size: 12.5px; color: var(--gold); margin-bottom: 8px; }
.era-summary { font-size: 12px; line-height: 1.7; color: var(--paper-dim); word-break: keep-all; }

.era-badge {
  position: absolute; top: 13px; right: 13px; font-family: var(--mono);
  font-size: 9px; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px;
  border: 1px solid currentColor;
}
.badge-soon { color: var(--paper-dim); }
.badge-live { color: var(--gold-bright); }

.stage-foot {
  margin-top: 30px; font-size: 12.5px; color: var(--paper-dim); line-height: 1.8;
  word-break: keep-all;
}
.stage-foot b { color: var(--paper); font-family: var(--serif); font-weight: 700; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
}

/* ── 모달 ── */
.modal-root { position: fixed; inset: 0; z-index: 200; }
.modal-root[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(9,8,6,.72); backdrop-filter: blur(3px); }

.modal {
  position: relative; z-index: 2;
  max-width: 780px; margin: 6vh auto; max-height: 88vh; overflow-y: auto;
  background: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 30px 32px 34px; box-shadow: 0 26px 70px rgba(0,0,0,.6);
}
.modal-close {
  position: absolute; top: 14px; right: 16px; width: 30px; height: 30px;
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--paper-dim); font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: rgba(184,152,96,.2); color: var(--paper); }

.modal-title {
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  letter-spacing: -.02em; padding-bottom: 13px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.modal-lead {
  font-size: 13.5px; line-height: 1.85; color: var(--paper-dim);
  margin-bottom: 20px; word-break: keep-all;
}
.modal-lead b, .modal-foot b { color: var(--paper); font-weight: 500; }
.modal-foot {
  font-size: 12.5px; line-height: 1.8; color: var(--paper-dim);
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  word-break: keep-all;
}

.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reason { border-top: 2px solid var(--line-strong); padding-top: 13px; }
.reason-no {
  font-family: var(--mono); font-size: 21px; color: var(--gold);
  line-height: 1; margin-bottom: 9px;
}
.reason h3 { font-family: var(--serif); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.reason p, .rule p { font-size: 12.5px; line-height: 1.75; color: var(--paper-dim); word-break: keep-all; }
.reason b, .rule b { color: var(--paper); font-weight: 500; }

.rule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.rule {
  border: 1px solid var(--line); border-radius: 6px; padding: 14px 15px;
  background: rgba(184,152,96,.045);
}
.rule h3 { font-family: var(--serif); font-size: 14px; font-weight: 700; margin-bottom: 7px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.stat {
  border: 1px solid var(--line); border-radius: 6px; padding: 14px;
  text-align: center; background: rgba(184,152,96,.045);
}
.stat-num {
  font-family: var(--mono); font-size: 21px; font-weight: 500;
  color: var(--gold-bright); line-height: 1.1;
}
.stat-num small { font-size: 11px; color: var(--paper-dim); }
.stat-label { font-size: 11px; color: var(--paper-dim); margin-top: 6px; }

@media (max-width: 860px) {
  body.portal { overflow: auto; }
  .stage { height: auto; min-height: 100vh; }
  .stage-inner { padding: 84px 18px 40px; justify-content: flex-start; }
  .hero-lead { font-size: 14px; margin-bottom: 26px; }
  .era-grid, .reason-grid, .rule-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-nav { padding: 12px 14px; gap: 6px; flex-wrap: wrap; }
  .modal { margin: 0; max-height: 100vh; min-height: 100vh; border-radius: 0; padding: 26px 18px 34px; }
}