/* Twilight Echoes 시안 공용 — 색·서체는 게임 style.css :root 를 그대로 가져왔다.
   시안이 새 색을 발명하면 "고친 것" 이 아니라 "다른 것" 이 되어 비교가 성립하지 않는다. */
:root{
  --ink-black:#05070a; --ink-deep:#090d13; --midnight:#101720;
  --dusk:#1a2430; --dusk-light:#263341;
  --ember:#e07a35; --ember-glow:#ffab5c; --ember-deep:#8f4415;
  --blood:#7a1020; --blood-bright:#c2263f;
  --gold:#8d99a8; --gold-bright:#c3cede; --gold-deep:#39434f; --gold-pale:#aab4c2;
  --brass:#b08c4a; --brass-bright:#d9b46a;
  --bone:#e8e3d8; --bone-shadow:#a9a79e;
  --parchment:#ded8ca; --parchment-dark:#b0aa9c;
  --ash:#6a6f76; --ash-light:#878d95;
  --moss:#7a8e5a; --frost:#6a8eba;
  --fd:'Cinzel','Noto Serif KR',serif;
  --fb:'Noto Serif KR',serif;
  --fm:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink-black);color:var(--bone);font-family:var(--fb);
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:var(--ember);text-decoration:none} a:hover{color:var(--ember-glow)}

/* ── 페이지 뼈대 ── */
.wrap{max-width:1180px;margin:0 auto;padding:44px 24px 110px}
.back{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--ash);
  display:inline-block;margin-bottom:34px}
.back:hover{color:var(--ember)}
.title{display:flex;align-items:baseline;gap:14px;margin:0 0 10px}
.title .k{font-family:var(--fm);font-size:11px;letter-spacing:.18em;color:var(--ash);
  border:1px solid var(--gold-deep);padding:3px 8px}
.title h1{font-family:var(--fd);font-size:26px;letter-spacing:.1em;margin:0;font-weight:700}
.thesis{margin:0 0 8px;max-width:70ch;font-size:15px;line-height:1.8;color:var(--gold-pale)}
.trade{margin:0 0 40px;max-width:70ch;font-size:14px;line-height:1.75;color:var(--bone-shadow)}
.trade b{color:var(--ember);font-weight:600}

.screen{margin-bottom:56px}
.screen > h2{font-family:var(--fm);font-size:11px;letter-spacing:.2em;color:var(--ash);
  margin:0 0 12px;font-weight:400;display:flex;justify-content:space-between}
.screen > h2 span{color:var(--gold-deep)}
.frame{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;
  background:var(--ink-deep);border:1px solid var(--gold-deep)}

/* ── 무대 배경 (모든 방향 공용) ── */
.scene{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 8%,#24313f 0,#131b25 42%,#070b10 100%),
             linear-gradient(180deg,#0b1017 0,#05070a 100%)}
.scene::after{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
.scene.town{background:radial-gradient(130% 80% at 50% 100%,#2a2118 0,#141019 45%,#06070a 100%)}
.scene.forge{background:radial-gradient(90% 70% at 34% 62%,#4a2410 0,#1a1113 46%,#06070a 100%)}
.mob{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:19%;aspect-ratio:3/4;background:linear-gradient(180deg,#0a0e14,#05070a);
  clip-path:polygon(50% 0,72% 16%,66% 40%,84% 62%,72% 100%,28% 100%,16% 62%,34% 40%,28% 16%);
  box-shadow:0 0 90px 30px rgba(224,122,53,.07)}
.npc{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:13%;aspect-ratio:2/5;background:linear-gradient(180deg,#1b1410,#08070a);
  clip-path:polygon(50% 0,68% 12%,62% 34%,74% 100%,26% 100%,38% 34%,32% 12%);
  box-shadow:0 0 70px 24px rgba(224,122,53,.09)}

/* ── 스크롤 없는 목록용 얇은 구분선 ── */
.hair{height:1px;background:var(--gold-deep);opacity:.55}