/* 스택 타워 — 문서 페이지 공통 스타일 (게임 브랜드와 동일한 팔레트) */
:root{
  --navy:#141F38; --navy2:#1d2b4f; --panel:#1a2543;
  --orange:#F4A259; --coral:#E76F81; --blue:#5DA9E9; --yellow:#FFD54F;
  --text:#f4f6fb; --dim:rgba(244,246,251,.62); --line:rgba(255,255,255,.1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
    "Noto Sans KR",system-ui,sans-serif;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);
  background-attachment:fixed;
  color:var(--text); line-height:1.75; word-break:keep-all;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px 64px}

/* 헤더 */
header{padding:26px 0 20px;border-bottom:1px solid var(--line);margin-bottom:32px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand img{width:44px;height:44px;border-radius:12px}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.01em}
.brand span{display:block;font-size:11px;color:var(--yellow);font-weight:700;letter-spacing:.16em}
nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
nav a{
  font-size:13px;font-weight:600;color:var(--dim);text-decoration:none;
  background:rgba(255,255,255,.06);border-radius:99px;padding:7px 14px;transition:color .15s,background .15s;
}
nav a:hover{color:var(--text);background:rgba(255,255,255,.12)}
nav a.on{background:var(--yellow);color:var(--navy)}
nav a.play{background:var(--orange);color:var(--navy)}
/* 언어 전환 — 페이지 사이 이동이 아니라 '같은 페이지의 다른 언어'라 테두리로 구분한다 */
nav a.lang{background:none;border:1px solid rgba(255,255,255,.22)}

/* 본문 */
h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.lead{color:var(--dim);font-size:15px;margin-bottom:34px}
h2{
  font-size:20px;font-weight:800;margin:38px 0 12px;padding-left:12px;
  border-left:4px solid var(--orange);letter-spacing:-.01em;
}
h3{font-size:16px;font-weight:700;margin:24px 0 8px;color:var(--yellow)}
p{margin-bottom:14px;color:rgba(244,246,251,.88)}
ul,ol{margin:0 0 16px 20px}
li{margin-bottom:7px;color:rgba(244,246,251,.88)}
a{color:var(--blue)}
strong{color:var(--text);font-weight:700}
code{
  background:rgba(255,255,255,.08);border-radius:5px;padding:1px 6px;
  font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
hr{border:none;border-top:1px solid var(--line);margin:36px 0}

table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:14px;display:block;overflow-x:auto}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--yellow);font-weight:700;white-space:nowrap;font-size:13px}
td:first-child{white-space:nowrap;font-weight:600}

.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:20px 0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.note{border-left:4px solid var(--yellow);background:rgba(255,213,79,.08);
  border-radius:0 12px 12px 0;padding:14px 18px;margin:20px 0;font-size:14px}
.note b{color:var(--yellow)}
.updated{color:var(--dim);font-size:13px;margin-bottom:28px}

/* 스크린샷 */
figure.shot{margin:24px 0;text-align:center}
figure.shot img{display:block;width:100%;max-width:272px;margin:0 auto;border-radius:18px;
  border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.45);background:var(--navy)}
figure figcaption{margin-top:10px;font-size:13px;color:var(--dim);line-height:1.6}

.shot-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:18px;margin:24px 0}
.shot-row figure{margin:0;text-align:center}
.shot-row img{display:block;width:100%;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.4);background:var(--navy)}
.shot-row figcaption{margin-top:8px;font-size:12px}

.theme-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.theme-gallery figure{margin:0;text-align:center}
.theme-gallery img{display:block;width:100%;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(0,0,0,.35);background:var(--navy)}
.theme-gallery figcaption{margin-top:7px;font-size:12px;color:var(--text);font-weight:700}
.theme-gallery small{display:block;color:var(--dim);font-weight:500;font-size:11px}
@media (max-width:560px){.theme-gallery{grid-template-columns:repeat(2,1fr)}}

.hero{margin:0 0 36px;text-align:center}
.hero img{display:block;width:100%;max-width:290px;margin:0 auto;border-radius:22px;
  border:1px solid var(--line);box-shadow:0 24px 56px rgba(0,0,0,.55);background:var(--navy)}

/* CTA */
.cta{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;
  text-decoration:none;border-radius:14px;padding:14px 28px;margin-top:8px;font-size:16px}

/* 푸터 */
footer{border-top:1px solid var(--line);margin-top:48px;padding-top:24px;
  color:var(--dim);font-size:13px}
footer a{color:var(--dim);text-decoration:none;margin-right:14px}
footer a:hover{color:var(--text)}
footer .copy{margin-top:12px;font-size:12px}

@media (max-width:520px){
  h1{font-size:23px} h2{font-size:18px} .wrap{padding:0 16px 48px}
}