:root {
  --bg: #050507;
  --ink: #f1f3f2;
  --dim: rgba(241, 243, 242, 0.42);
  --line: rgba(241, 243, 242, 0.28);
  --accent: #ffd75a;
  --hud-font: 'Chakra Petch', 'Helvetica Neue', Arial, sans-serif;
  --edge: clamp(14px, 2.6vw, 30px);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  overflow: hidden;
  font-family: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 배경: 유성우(여기만 픽셀 질감) ────────── */
#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* ── 계기판 테두리 ────────────────────────── */
.hud {
  position: fixed;
  inset: var(--edge);
  pointer-events: none;
  opacity: 0;
  font-family: var(--hud-font);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--dim);
}

.is-open .hud {
  opacity: 1;
  transition: opacity 1s ease 0.9s;
}

.hud i { position: absolute; display: block; }

.corner {
  width: 22px;
  height: 22px;
  border: 0 solid var(--ink);
  opacity: 0.8;
}
.corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* 좌우 눈금자: 8px 마다 짧은 눈금, 40px 마다 긴 눈금 */
.ruler {
  top: 50%;
  height: min(321px, 46vh);
  width: 9px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 40px) left / 9px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px) left / 4px 100% no-repeat;
}
.ruler.left { left: 0; }
.ruler.right { right: 0; transform: translateY(-50%) scaleX(-1); }

.readout { position: absolute; white-space: nowrap; line-height: 1; }
.readout.tl { top: 6px; left: 34px; }
.readout.tr { top: 6px; right: 34px; font-variant-numeric: tabular-nums; white-space: pre; }
.readout.bl { bottom: 6px; left: 34px; }
.readout.br { bottom: 6px; right: 34px; }

.readout b {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: 0.25; } }

/* ── 본문 ─────────────────────────────────── */
.page {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}

.name {
  margin: 0;
  font-family: 'Ma Shan Zheng', 'Yuji Syuku', serif;
  font-weight: 400;
  font-size: clamp(112px, 24vw, 260px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  text-shadow: 0 0 28px rgba(255, 215, 90, 0.18);
}

/* 양 끝에 눈금이 달린 가는 기준선 */
.rule {
  width: min(360px, 70vw);
  height: 7px;
  margin: clamp(26px, 4.5vh, 48px) 0 clamp(22px, 3.5vh, 34px);
  border: 0 solid var(--line);
  border-width: 0 1px;
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}

.creed {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.08em;
  line-height: 1;
}

.creed li + li { margin-top: 1.15em; }

.creed .num {
  display: inline-block;
  width: 2.4em;
  font-family: var(--hud-font);
  font-weight: 600;
  color: var(--accent);
}

/* 인트로가 열릴 때 본문이 차례로 떠오른다 */
.name, .rule, .creed li {
  opacity: 0;
  transform: translateY(8px);
}

.is-open .name, .is-open .rule, .is-open .creed li {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.is-open .name { transition-delay: 0.45s; }
.is-open .rule { transition-delay: 0.9s; }
.is-open .creed li:nth-child(1) { transition-delay: 1.1s; }
.is-open .creed li:nth-child(2) { transition-delay: 1.35s; }

/* ── 인트로 ───────────────────────────────── */
#intro {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 10;
}

.half {
  position: absolute;
  top: 0;
  background: #000;
  transition: transform 1.25s cubic-bezier(0.76, 0, 0.18, 1);
  will-change: transform;
}

.half-l { right: 50%; }
.half-r { left: 50%; }

.is-open .half-l { transform: translateX(-101%); }
.is-open .half-r { transform: translateX(101%); }

@media (max-width: 600px) {
  .hud { font-size: 9px; letter-spacing: 0.12em; }
  .readout.tl, .readout.bl { left: 28px; }
  .readout.tr, .readout.br { right: 28px; }
  .readout.bl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #intro { display: none; }
  .hud, .name, .rule, .creed li { opacity: 1; transform: none; transition: none !important; }
  .readout b { animation: none; }
}