/* 게임 스튜디오 키아트. 검은 바탕 한 벌로만 간다 — 색을 전부 명시한다.
   ⚠️ 세 나라 말 페이지(/ · /en/ · /ja/)가 이 한 벌을 같이 쓴다.
      한 쪽만 고치는 일이 없도록 파일로 뺐다. */
:root{
  --void:#0A0908; --panel:#100E0B; --edge:#221E18;
  --ink:#F3EEE2; --soft:#A29885; --faint:#6A6154;
  --gold:#C9A227; --gold-hi:#E8C15A;
  /* 본문 글꼴은 말마다 다르다. 한글 글꼴이 가나·한자를 그리면 자형이
     어긋나 보인다 — 일본어 독자에게는 그것이 곧 「남의 나라 글꼴」이다. */
  --sans:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
}
html:lang(en){--sans:"Noto Sans","Helvetica Neue",Arial,sans-serif}
html:lang(ja){--sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",
  "Yu Gothic",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--void); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:hidden}
p,h1{margin:0}
h1{font-weight:400; text-wrap:balance}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:4px; border-radius:3px}

/* ── 언어 칩 ─────────────────────────────────────────────────
   🔴 **자바스크립트가 없다.** 세 개짜리 목록이라 열고 닫을 것이 없고,
   그냥 링크 셋이면 된다 — 크롤러도 사람도 같은 것을 본다.
   ⚠️ 제 나라 말로 적는다. 지금 화면의 말을 못 읽는 사람이
      자기 말을 알아볼 수 있어야 하는 것이 이 칩의 전부다. */
.langs{position:fixed; top:14px; right:14px; z-index:9; display:flex; gap:2px;
  padding:3px; border:1px solid var(--edge); border-radius:999px;
  background:rgba(16,14,11,.74); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px)}
 /* ⚠️ 쉬고 있는 칸도 **읽혀야 한다**. 각주 색(--faint)으로 두었더니 배경 대비가
    3.2:1 이라 11px 글자로는 모자랐다 — 길 찾는 장치는 각주가 아니다. */
.langs a{padding:9px 13px; border-radius:999px; text-decoration:none; color:var(--soft);
  font-size:11.5px; line-height:1; letter-spacing:.04em; white-space:nowrap;
  transition:color .18s ease, background-color .18s ease}
.langs a:hover{color:var(--ink)}
/* 지금 보고 있는 말. 금빛은 모퉁잇돌 몫이라 여기 쓰지 않는다 — 칩은 연장이다. */
.langs a[aria-current="page"]{color:var(--ink); background:#1C1811}
/* ⚠️ 칩의 각 칸은 **제 나라 글꼴**로 그린다. 지금 페이지가 안 받아 온 글꼴이면
   그 나라의 시스템 글꼴로 떨어진다 — 그래도 한국어 글꼴이 「日本語」를 그리는 것보다 낫다. */
.langs a[lang="ko"]{font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.langs a[lang="ja"]{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",
  "Yu Gothic","Noto Sans KR",sans-serif}
.langs a[lang="en"]{font-family:"Noto Sans","Helvetica Neue",Arial,sans-serif}

/* ── 히어로 ─────────────────────────────────────────────────
   벽이 워드마크 바로 위에 **같은 너비로** 앉는다. 그 너비는 글꼴이
   붙은 뒤에야 알 수 있어서 CSS 로 못 맞추고 재서 넣는다(site.js 의 fit). */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; padding:96px 22px 84px; text-align:center}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 46% at 50% 42%, rgba(201,162,39,.13), transparent 68%)}
.lock{position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:clamp(10px,1.6vw,22px)}   /* JS 가 폭에 비례해 다시 넣는다 */
/* 벽이 그려지는 자리. 폭은 JS 가 워드마크에 맞춰 넣는다. */
#wall{display:block; width:100%; height:auto; cursor:pointer}
.big{font-family:"Anton",sans-serif; font-size:clamp(52px,13.5vw,164px); line-height:.86;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
  text-shadow:0 0 46px rgba(201,162,39,.24)}
.big i{font-style:normal; color:var(--gold-hi)}
.scr{position:absolute; bottom:26px; left:0; right:0; z-index:1;
  font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.34em; color:#564F44}

/* ── 본문 ── */
.band{max-width:1000px; margin:0 auto; padding:clamp(76px,13vh,132px) 24px;
  border-top:1px solid var(--edge)}
/* 칸 머리는 「무엇에 대한 구절인가」를 글자로 말하지 않고 그것을 놓아 보인다.
   워드마크 · 흰 벽돌 셋 · 금빛 한 장 — 페이지 맨 위의 마크에서 그대로 떼어 온 것들이다. */
.head{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:30px}
.lab{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.42em;
  text-transform:uppercase; color:#8A7A57}
.dash{color:var(--faint); font-size:12px}
.hw{font-family:"Anton",sans-serif; font-size:26px; line-height:1; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink)}
.hw i{font-style:normal; color:var(--gold-hi)}
/* 34×18 은 벽의 세 장짜리 줄과 같은 비율(1.9:1)이다 — 눈이 같은 벽돌로 읽는다 */
.brx{display:flex; gap:3.5px}
.brx span{width:34px; height:18px; background:var(--ink)}
.brx span.corner{background:var(--gold-hi); box-shadow:0 0 20px rgba(201,162,39,.5)}
/* 이 페이지에는 이것 말고 글이 없다. 설명을 붙이지 않는 것이 이 페이지의 형식이다.
   ⚠️ 줄바꿈은 <br> 이 정한다 — `ch` 로 폭을 잡으면 한글이 일곱 자쯤에서 접힌다
   (`ch` 는 숫자 0 의 폭이라 한글과 안 맞는다). */
.creed{margin:0}
.creed p{font-size:clamp(21px,3.5vw,40px); line-height:1.38; color:var(--soft);
  letter-spacing:-.01em}
/* ⚠️ 라틴 문자는 같은 한 줄이 두 배 길다 — 한 급 낮춰야 같은 무게로 읽힌다 */
html:lang(en) .creed p{font-size:clamp(20px,3vw,34px); letter-spacing:0}
.creed em{font-style:normal; color:var(--gold-hi); font-weight:700;
  text-shadow:0 0 34px rgba(201,162,39,.28)}
.creed b{color:var(--ink); font-weight:400}
.creed cite{display:block; margin-top:22px; font-style:normal;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--faint)}
footer{max-width:1000px; margin:0 auto; padding:52px 24px 72px; border-top:1px solid var(--edge);
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--faint)}
.frow{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
/* 🔴 인용한 번역본을 밝힌다 — 저작권이 있는 번역이다. 말마다 문구가 다르다. */
.tr{margin:26px 0 0; max-width:78ch; font-family:var(--sans); font-size:10.5px; line-height:1.75; letter-spacing:.01em;
  text-transform:none; color:#4F493F}