/*
  PRISM 웹사이트 — 디자인 시스템.

  게임과 같은 물성을 웹으로 옮긴다: 배경은 거의 검정, 조각은 어둡고 빛만 밝다.
  색은 게임의 팔레트(src/render/palette.ts)에서 그대로 가져왔다. 두 곳이 다른
  빨강을 쓰면 스토어에서 보고 온 사람이 다른 제품을 보게 된다.

  이미지는 실제 게임 렌더러로 뽑았다. 손으로 그린 그림은 쓰지 않는다 — 1.0의
  스토어 스크린샷 24장이 조용히 거짓이었던 적이 있고, 그 원인이 "실제로 도는
  코드가 아닌 것을 그림으로 만들었다"였다.
*/

:root {
  /* ── 색 ─────────────────────────────────────────────
     --ink-* 은 글자에 쓴다. 배경(#06070c) 대비 4.5:1 이상인 값만 있다.
     --hair 는 테두리·구분선 전용이다. 글자에 쓰지 않는다. */
  --bg: #06070c;
  --bg-raise: #0b0d16;
  --ink: rgba(255, 255, 255, 0.9);
  --ink-dim: rgba(255, 255, 255, 0.62);
  --ink-faint: rgba(255, 255, 255, 0.42);
  --hair: rgba(255, 255, 255, 0.12);
  --hair-soft: rgba(255, 255, 255, 0.06);

  /* 게임 팔레트. 이 값들은 palette.ts의 HEX와 같아야 한다. */
  --lit-r: #ff2d55;
  --lit-g: #32ff9a;
  --lit-b: #2d8cff;
  --lit-y: #ffd426;
  --accent: var(--lit-g);

  /* ── 타입 스케일 ─────────────────────────────────────
     clamp로 뷰포트에 따라 자란다. 노인·저시력 사용자가 브라우저에서
     글자를 키울 수 있도록 전부 rem 기준이다 — 앱은 이걸 못 해서 1.1의
     최우선 과제로 남아 있다. 웹에서는 지킨다. */
  --t-hero: clamp(2.25rem, 9vw, 3.5rem);
  --t-lead: clamp(1.0625rem, 2.4vw, 1.25rem);
  --t-h2: 1.125rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-micro: 0.8125rem;

  /* ── 여백 ───────────────────────────────────────── */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: clamp(3rem, 8vw, 5rem);

  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* 최소 터치 타깃. 앱이 판에 지키는 44pt와 같은 약속이다. */
  --tap: 44px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', system-ui,
    sans-serif;
  font-size: var(--t-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* 화면 위쪽에서 은은하게 밝아지는 비네팅 — 게임 화면과 같은 처리 */
  background-image: radial-gradient(
    ellipse at 50% 18%,
    rgba(40, 52, 90, 0.34) 0%,
    rgba(6, 7, 12, 0) 62%
  );
  background-repeat: no-repeat;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--s-5) var(--s-3) var(--s-4);
}

/* ── 히어로 ───────────────────────────────────────── */

.hero {
  text-align: center;
  margin-bottom: var(--s-5);
}

/*
  히어로의 분광 그림.

  여기 있던 112px 앱 아이콘을 대신한다. 아이콘은 App Store에서 이미 보고 오는
  그림이고, 제품 이름의 뜻을 설명하지 않는다. 흰 빛이 프리즘을 지나 세 색으로
  갈라지는 것이 PRISM이라는 이름이자 3챕터의 내용이다.

  제목 뒤에 겹치지 않고 **위에 놓는다.** 글자 위에 빛을 깔면 대비가 무너지고,
  이 사이트는 본문 대비 4.5:1을 지키기로 했다.
*/
.spectrum {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto var(--s-2);
}

h1 {
  font-size: var(--t-hero);
  font-weight: 200;
  letter-spacing: 0.3em;
  /* 자간이 마지막 글자 뒤에도 붙어 시각적 중심이 밀리는 것을 보정 */
  text-indent: 0.3em;
  line-height: 1.1;
}

.tagline {
  margin-top: var(--s-2);
  color: var(--ink-dim);
  font-size: var(--t-body);
  letter-spacing: 0.04em;
}

/* ── 판 이미지 ─────────────────────────────────────
   게임 화면이므로 배경과 이어 붙는다. 액자를 두르지 않는다. */

/*
  판은 액자를 두른다.

  이미지의 배경(#06070C)과 페이지 배경이 같은 값인데, 페이지에는 비네팅
  그라디에이션이 깔려 있어서 이미지 영역만 평평하게 어둡다. 그래서 테두리를
  안 두면 "잘못 붙은 사각형"으로 읽힌다. 어차피 경계가 보이므로 의도한
  경계로 만든다 — facts 목록의 헤어라인과 같은 언어다.
*/
.board {
  display: block;
  width: 100%;
  height: auto;
  max-width: 26rem;
  margin: var(--s-4) auto;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-md);
  background: var(--bg);
}

figure {
  margin: var(--s-4) 0;
}

figcaption {
  color: var(--ink-faint);
  font-size: var(--t-micro);
  text-align: center;
  margin-top: calc(var(--s-1) * -1);
}

/* ── 본문 ─────────────────────────────────────────── */

section {
  margin-bottom: var(--s-5);
}

h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: var(--s-2);
}

h3 {
  font-size: var(--t-small);
  font-weight: 600;
  margin: var(--s-4) 0 var(--s-1);
}

p,
li {
  color: var(--ink-dim);
}

.lead {
  color: var(--ink);
  font-size: var(--t-lead);
  line-height: 1.65;
}

.facts {
  list-style: none;
  margin-top: var(--s-3);
  border-top: 1px solid var(--hair);
}

.facts li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hair);
}

.facts strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── 도형 범례 ─────────────────────────────────────
   색만으로 정보를 전달하지 않는다는 약속을 페이지에서도 지킨다.
   글자로 "빨강은 삼각형"이라고만 쓰면 색약 방문자가 확인할 방법이 없다. */

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.legend li {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-small);
}

.legend .glyph {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* ── CTA ─────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-top: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border: 1px solid rgba(50, 255, 154, 0.45);
  border-radius: var(--r-pill);
  background: rgba(50, 255, 154, 0.06);
  color: var(--accent);
  font-size: var(--t-body);
  letter-spacing: 0.02em;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.cta:hover {
  background: rgba(50, 255, 154, 0.12);
  border-color: var(--accent);
}

/* ── 문서 페이지(개인정보·지원) ─────────────────────── */

.doc h2 {
  margin-top: var(--s-4);
}

.doc p,
.doc li {
  margin-bottom: var(--s-2);
}

.doc ul {
  padding-left: var(--s-3);
  margin-bottom: var(--s-3);
}

.doc .updated {
  color: var(--ink-faint);
  font-size: var(--t-micro);
  margin-bottom: var(--s-4);
}

.doc .summary {
  border-left: 2px solid var(--accent);
  padding: var(--s-1) 0 var(--s-1) var(--s-3);
  color: var(--ink);
  font-size: var(--t-body);
}

/* ── 링크 ─────────────────────────────────────────── */

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(50, 255, 154, 0.28);
  transition: border-color 0.15s ease;
}

a:hover {
  border-bottom-color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.cta,
.back {
  border-bottom-color: transparent;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hair);
}

.links a {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

.back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-bottom: var(--s-3);
  color: var(--ink-dim);
  font-size: var(--t-small);
}

.back:hover {
  color: var(--ink);
}

footer {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hair);
}

footer p {
  color: var(--ink-faint);
  font-size: var(--t-micro);
}

/* 움직임을 줄이라고 설정한 방문자에게는 트랜지션을 걸지 않는다. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── AEO 개편에서 들어온 것들 ────────────────────────────────── */

/*
  미리보기 영상.

  스토어용 원본은 29MB라 웹에 얹을 수 없어 540px·무음·CRF 30으로 다시
  인코딩했다(141KB). 소리가 없으므로 자동재생이 허용되고, 컨트롤을 숨겨
  "움직이는 스크린샷"처럼 읽히게 한다. 재생 버튼을 누르게 만들면 대부분
  누르지 않는다.

  세로는 540×1170(실기기 녹화 그대로)에서 540×818로 잘랐다. 상단바 아래
  234px가 **모든 프레임에서** 비어 있었고(2fps로 44프레임을 떠서 밝기 100
  넘는 픽셀이 3개 미만인 행을 셌다), 그 띠 때문에 판이 긴 검은 통 가운데
  떠 있는 것처럼 보였다. 띠를 없애려면 그 위의 상단바(레벨 번호·챕터)까지
  같이 버려야 한다. 버렸다. 랜딩에서 필요한 것은 판이 움직이는 모습이지
  앱 크롬이 아니다. 원본은 media/orig/에 남겨 뒀다.
*/
.preview {
  display: block;
  width: 100%;
  max-width: 300px;
  /*
    `height: auto`가 없으면 마크업의 height 속성이 그대로 CSS 높이가 된다.
    폭은 width:100%로 줄어드는데 높이는 818px 그대로 남고, <video>의 기본
    object-fit은 contain이라 그 상자 안에서 영상이 축소되어 위아래에 검은
    띠가 생긴다. 영상을 잘라도 이 띠는 그대로였다. 비율을 브라우저가 잡게
    둔다.
  */
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid var(--hair, rgba(255, 255, 255, 0.14));
  background: #06070c;
}

.cap {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  opacity: 0.55;
}

/*
  챕터 카드.

  로마자 목록 여섯 줄이었다. 여섯 챕터는 이 게임의 뼈대인데 줄글로 늘어놓으면
  다른 문단과 구분되지 않는다. 카드로 세우고, **왼쪽 띠에 그 챕터가 가르치는
  것을 그린다** — 반사는 흰 한 줄, 분산은 빨강·초록·파랑 세 칸, 혼합은
  빨강에서 노랑을 지나 초록으로, 수렴은 전부. 띠가 장식이 아니라 목록의
  내용을 한 번 더 말한다.

  색맹 방문자에게도 로마 숫자와 챕터 이름이 그대로 있으므로 띠가 없어도
  정보가 빠지지 않는다. 앱이 결정에 도형을 새기는 것과 같은 규칙이다.
*/
.chapters {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
  counter-reset: none;
}

.chapter {
  position: relative;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-md);
  background: var(--bg-raise);
  line-height: 1.55;
}

/* 왼쪽 띠. 각 챕터의 --beam 을 그대로 칠한다. */
.chapter::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--beam);
}

.chapter-1 {
  --beam: rgba(255, 255, 255, 0.85);
}
.chapter-2 {
  --beam: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0 46%,
    rgba(255, 255, 255, 0.3) 46% 54%,
    rgba(255, 255, 255, 0.85) 54% 100%
  );
}
.chapter-3 {
  --beam: linear-gradient(
    180deg,
    var(--lit-r) 0 33%,
    var(--lit-g) 33% 66%,
    var(--lit-b) 66% 100%
  );
}
.chapter-4 {
  --beam: linear-gradient(180deg, var(--lit-r), var(--lit-y), var(--lit-g));
}
.chapter-5 {
  --beam: linear-gradient(180deg, rgba(255, 255, 255, 0.85), var(--lit-r));
}
.chapter-6 {
  --beam: linear-gradient(
    180deg,
    var(--lit-r),
    var(--lit-y),
    var(--lit-g),
    var(--lit-b),
    rgba(255, 255, 255, 0.85)
  );
}

.ch-num {
  display: block;
  color: var(--ink-faint);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
}

.chapter strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}

.ch-desc {
  display: block;
  color: var(--ink-dim);
  font-size: var(--t-small);
}

/*
  자주 묻는 것.

  `<dl>` 여섯 쌍이 펼쳐져 있었다. 여기까지 내려온 사람은 이미 살지 말지를
  정한 뒤이고, 글 벽으로 끝나면 마지막 인상이 그것이 된다. `<details>`로
  접되 첫 문답은 열어 둬서 무엇이 접혀 있는지 보이게 한다.

  답은 접혀 있어도 DOM에 그대로 있다. FAQPage JSON-LD와 어긋나지 않고,
  답변 엔진도 읽는다.
*/
.faq {
  margin-top: var(--s-3);
  border-top: 1px solid var(--hair);
}

.qa {
  border-bottom: 1px solid var(--hair);
}

.qa summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

/* 사파리의 기본 삼각형. 아래에서 직접 그린다. */
.qa summary::-webkit-details-marker {
  display: none;
}

/* 닫힘은 가로선, 열림은 세로로 세운 같은 선. 여는 동작이 눈에 보인다. */
.qa summary::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}

.qa[open] summary::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.qa summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.qa p {
  padding: 0 0 var(--s-3) calc(10px + var(--s-2));
  line-height: 1.75;
}

/*
  언어 전환 — **맨 위에 둔다.**

  자기 언어가 아닌 페이지에 떨어진 사람이 가장 먼저 찾는 것이고, 그 사람은
  페이지를 읽지 못하므로 끝까지 스크롤하지 않는다. 아래에 두면 없는 것과 같다.

  각 언어는 자기 글자로 적는다 — 「일본어」라고 써두면 일본어 사용자가
  자기 줄을 못 찾는다.
*/
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--s-3);
  font-size: var(--t-small);
}

/*
  칩으로 만든다. 밑줄 친 링크 세 개가 페이지의 첫 요소로 떠 있으면 그게
  본문의 일부처럼 읽힌다. 테두리를 둘러 "고르는 것"으로 만들고, 높이를
  44px로 잡아 손가락으로도 눌린다.
*/
.langs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-2);
  border: 1px solid var(--hair-soft);
  border-bottom-color: var(--hair-soft);
  border-radius: var(--r-pill);
  color: var(--ink-dim);
}

.langs a:hover {
  border-color: var(--hair);
  border-bottom-color: var(--hair);
  color: var(--ink);
}

/* ── 개편: 숫자 스트립 · 구분선 · 마무리 ─────────────────── */

/*
  숫자 넷.

  240판, 6챕터, 판마다 정답 하나, 그리고 0(광고·결제·가입). 문장 속에
  흩어져 있던 사실을 한 줄로 모았다. 사람은 여기서 제품 전체를 읽고,
  답변 엔진이 인용할 때 집는 것도 문장이 아니라 이 숫자들이다.

  마지막 0은 초록으로 둔다. 유료 앱에서 구매를 막는 것은 가격이 아니라
  "사고 나서 또 결제하라고 하면?"이고, 그 답이 이 자리다.
*/
.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hair-soft);
}

.stats li {
  text-align: center;
  line-height: 1.3;
}

.stats b {
  display: block;
  color: var(--ink);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 200;
  letter-spacing: 0.02em;
}

.stats span {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: var(--t-micro);
}

.stats li:last-child b {
  color: var(--accent);
}

/* 넷이 한 줄에 들어가지 않는 폭에서는 2×2로 접는다. */
@media (max-width: 26rem) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3) var(--s-2);
  }
}

/*
  섹션 구분선 — 빛이 지나가다 결정을 만난다.

  가운데가 밝고 양끝으로 사라지는 선에 육각 결정 하나. 밑줄로 끊던 자리를
  제품의 언어로 바꾼 것이고, 페이지를 읽는 동안 같은 사건이 네 번 반복된다.

  `.js`가 붙은 뒤에만 어두워진다. 스크립트가 막힌 방문자에게는 처음부터
  켜져 있고, 빈 선이 남지 않는다.
*/
.beam {
  position: relative;
  height: 1px;
  margin: var(--s-5) 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hair) 22%,
    var(--hair) 78%,
    transparent
  );
}

.beam i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 12px;
  margin: -6px 0 0 -5.5px;
  background: var(--accent);
  /* 결정의 육각형. 앱이 결정을 그리는 모양과 같다. */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 14px rgba(50, 255, 154, 0.55);
}

.js .beam i {
  opacity: 0.18;
  background: var(--ink-faint);
  box-shadow: none;
  transition:
    opacity 0.5s ease,
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

.js .beam.lit i {
  opacity: 1;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(50, 255, 154, 0.55);
}

/*
  마무리.

  CTA가 페이지 맨 위에 하나뿐이었다. 5,000px을 내려온 사람은 사겠다고
  마음먹은 바로 그 자리에서 버튼을 찾지 못하고 위로 되돌아가야 했다.
  여기서 태그라인을 한 번 더 말하고, 버튼을 주고, 약속 넷을 붙인다.
*/
.closer {
  text-align: center;
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-3);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-lg);
  background: var(--bg-raise);
}

.closer-line {
  color: var(--ink);
  font-size: var(--t-lead);
  letter-spacing: 0.02em;
}

.cta-lg {
  padding: var(--s-2) clamp(1.5rem, 6vw, 2.75rem);
  font-size: var(--t-lead);
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-3);
}

.badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px var(--s-2);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-pill);
  color: var(--ink-dim);
  font-size: var(--t-micro);
}

/* 뱃지 앞의 작은 결정. 글자만으로도 읽히므로 aria에는 넣지 않는다. */
.badges li::before {
  content: '';
  width: 7px;
  height: 8px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}