/* 별이 잠든 땅 — Ashfall Chronicles
   재빛 바탕 위에 잔불 주황(행동)과 별빛 파랑(정보)만 얹는다.
   어두운 화면 전용 디자인이므로 모든 색을 명시한다. */

:root{
  --ash:#0d0b0a;
  --soot:#1c1917;
  --soot-2:#252120;
  --line:#332d29;
  --line-soft:#221e1c;
  --bone:#e9e2d7;
  --bone-dim:#a89c8e;
  --bone-faint:#7a7067;
  --ember:#f97449;
  --ember-deep:#c2410c;
  --star:#78b0c6;
  --star-deep:#1d3038;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

body{
  margin:0;
  background:var(--ash);
  color:var(--bone);
  font-family:"IBM Plex Sans KR","Malgun Gothic",system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
.pixel{image-rendering:pixelated;}

h1,h2,h3{font-family:Hahmlet,"IBM Plex Sans KR",serif;margin:0;line-height:1.28;text-wrap:balance;}
h1{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:700;letter-spacing:-.03em;}
h2{font-size:clamp(1.55rem,3.6vw,2.15rem);font-weight:700;letter-spacing:-.02em;}
h3{font-size:1.05rem;font-weight:700;}
p{margin:0;}
a{color:var(--star);text-underline-offset:3px;}
a:hover{color:var(--bone);}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);
}

.wrap{max-width:1020px;margin:0 auto;padding:0 22px;}
.wrap-wide{max-width:1240px;margin:0 auto;padding:0 22px;}
section{padding:88px 0;border-top:1px solid var(--line-soft);}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:10px;}
.sec-head::after{content:"";flex:1;height:1px;background:var(--line-soft);}
.sec-lede{color:var(--bone-dim);max-width:60ch;margin-top:14px;}

/* ================= 네비게이션 ================= */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(13,11,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:1240px;margin:0 auto;padding:0 22px;
  height:58px;display:flex;align-items:center;gap:26px;
}
.nav-brand{
  font-family:Hahmlet,serif;font-weight:700;font-size:1rem;
  color:var(--bone);text-decoration:none;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
}
.nav-brand .brand-logo{height:40px;width:auto;display:block;}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center;}
.nav-links a{
  font-size:.88rem;font-weight:600;color:var(--bone-faint);
  text-decoration:none;padding:7px 14px;border-bottom:2px solid transparent;
  transition:color .16s,border-color .16s;white-space:nowrap;
}
.nav-links a:hover{color:var(--bone-dim);}
.nav-links a[aria-current="page"]{color:var(--ember);border-bottom-color:var(--ember);}
/* 언어 고르기 — site/i18n.js 가 나브 끝에 붙인다 */
.lang-pick{
  font:600 .78rem "IBM Plex Sans KR",system-ui,sans-serif;color:var(--bone-dim);
  background:transparent;border:1px solid var(--line-soft);padding:5px 6px;cursor:pointer;
}
.lang-pick option{background:#1a1512;color:var(--bone);}
/* 일본어 · 중국어는 이 사이트가 받는 글꼴(한글 · 라틴)에 글자가 없다 — 기기 글꼴로(게임과 같은 목록) */
html:lang(ja) body,html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif;line-break:strict}
html:lang(zh-Hans) body,html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;line-break:strict}

/* ================= 히어로 ================= */
.hero{position:relative;border-top:none;padding:0;overflow:hidden;}
.hero-canvas-wrap{position:absolute;inset:0;}
#heroCanvas{
  width:100%;height:100%;display:block;
  background:#150f0d;
  opacity:0;transition:opacity .7s ease;
}
#heroCanvas.is-ready{opacity:1;}
.hero-inner{
  position:relative;
  min-height:min(76vh,620px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:120px;padding-bottom:68px;   /* 옆 여백은 .wrap-wide 의 22px — 0 으로 덮으면 글이 화면 끝·다른 절보다 왼쪽에 붙는다 */
}
/* 글을 읽히게 하는 그늘. 글은 왼쪽에만 있으므로 왼쪽에서만 짙고 오른쪽은 놓아 준다 —
   넓게 퍼뜨리면 오른쪽에서 걷는 플레이어까지 함께 어두워진다. */
.hero-inner::before{
  content:"";position:absolute;inset:-40px -40px 0;
  background:radial-gradient(78% 74% at 14% 78%,rgba(13,11,10,.9) 0%,rgba(13,11,10,.46) 42%,transparent 72%);
  pointer-events:none;
}
.hero-inner > *{position:relative;}
.hero h1{margin:30px 0 0;text-shadow:0 3px 34px rgba(13,11,10,.9);}
/* 제목 글자 — 게임 타이틀과 같은 그림(tools/mklogo.py 가 굽는 site/wordmark*.png). 별 없는 몸 위에 별까지 다 있는 판을 겹쳐 두고,
   hero.js 가 별똥별을 떨어뜨려 앉는 순간 그 판을 드러낸다 — 앉은 뒤의 모습은 게임 로고와 화소 단위로 같다. 별은 앉은 뒤 움직이지 않는다. */
.hero-title{line-height:0;}
.wordmark{position:relative;display:block;width:clamp(300px,58.5vw,712px);max-width:100%;margin-left:-1.5%;}   /* 둘레 장식만큼 넓다 — 장식이 화면 밖으로 잘리지 않게 밀지 않는다 */
.wordmark img{display:block;width:100%;height:auto;}
.wordmark .wm-body{filter:drop-shadow(0 4px 26px rgba(13,11,10,.85));}
.wordmark .wm-full{position:absolute;inset:0;}
.wordmark.wm-anim .wm-full{opacity:0;transition:opacity .3s ease-out;}
.wordmark.wm-anim.wm-landed .wm-full{opacity:1;}
.wordmark::before{content:"";position:absolute;left:14%;right:14%;top:22%;bottom:8%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,138,52,.22),rgba(255,110,40,.07) 55%,transparent);filter:blur(8px);}
.wm-fx{position:absolute;left:-10%;top:-90%;width:150%;height:220%;pointer-events:none;}
/* 부제 — 주 이름 바로 아래. 잔불색으로 한 번만 튀게 둔다. */
.hero .subtitle{
  font-family:Hahmlet,serif;font-weight:500;
  font-size:clamp(1.15rem,2.8vw,1.6rem);
  color:var(--ember);margin-top:10px;letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(13,11,10,.95);
}
/* 이름(세리프) → 부제(세리프·잔불) 아래에까지 세리프를 쓰면 세 단이 뭉갠다.
   설명 줄만 산세리프로 내려 위계를 갈랐다. */
.hero .tagline{
  font-family:"IBM Plex Sans KR",sans-serif;
  font-size:clamp(.95rem,2vw,1.08rem);line-height:1.7;
  color:var(--bone-dim);margin-top:16px;max-width:42ch;
  text-shadow:0 2px 18px rgba(13,11,10,.9);
}
/* 시적인 태그라인 다음에 곧바로 스펙 시트로 넘어가면 톤이 끊긴다.
   이 한 줄이 그 사이에서 "그래서 무슨 게임인가"를 평범한 말로 받아 준다. */
.hero-what{
  font-family:"IBM Plex Sans KR",sans-serif;
  font-size:clamp(.9rem,1.8vw,1rem);line-height:1.7;
  color:var(--bone);margin-top:18px;max-width:46ch;
  text-shadow:0 2px 18px rgba(13,11,10,.95);
}
.hero-what strong{color:var(--ember);font-weight:600;}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.badge{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.06em;
  border:1px solid var(--line);background:rgba(28,25,23,.78);
  padding:4px 11px;color:var(--bone-dim);
}
.badge.hot{border-color:var(--ember-deep);color:var(--ember);}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"IBM Plex Sans KR",sans-serif;font-size:.95rem;font-weight:600;
  padding:13px 24px;border:1px solid var(--line);
  background:var(--soot);color:var(--bone);
  text-decoration:none;cursor:pointer;
  transition:border-color .16s,background .16s,color .16s;
}
.btn:hover{border-color:var(--bone-faint);background:var(--soot-2);color:var(--bone);}
.btn-primary{background:var(--ember);border-color:var(--ember);color:#1a0d07;}
.btn-primary:hover{background:#ff8a63;border-color:#ff8a63;color:#1a0d07;}
.btn-lg{padding:16px 30px;font-size:1rem;}
.btn .sz{font-family:"IBM Plex Mono",monospace;font-size:.74rem;opacity:.72;font-weight:400;}

/* ================= 수치 띠 ================= */
.figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
/* 원래는 히어로 바로 아래 전면 띠였다. 페이지를 열자마자 큰 숫자부터 들이밀면
   "양으로 때우나"로 읽히기 쉬워서, 실제 화면을 먼저 보여 준 뒤 목표 섹션 안으로
   내려 맥락과 함께 두기로 했다. 그 자리에서는 테두리가 겹치므로 위아래 선을 뗀다. */
.figures-inline{
  border:1px solid var(--line);margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
}
.figures-inline .fig{padding:16px 12px;}
.figures-inline .fig .n{font-size:1.35rem;}
.fig-lede{margin-top:34px;font-size:.86rem;color:var(--bone-dim);}
.fig{background:var(--ash);padding:22px 20px;text-align:center;}
.fig .n{
  font-family:"IBM Plex Mono",monospace;font-size:1.75rem;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ember);
  display:block;line-height:1.1;letter-spacing:-.02em;
}
.fig .l{font-size:.78rem;color:var(--bone-faint);display:block;margin-top:6px;}

/* ================= 전제 ================= */
.premise{max-width:60ch;}
.premise p + p{margin-top:18px;}
.premise .lead{
  font-family:Hahmlet,serif;font-size:clamp(1.15rem,2.6vw,1.5rem);
  line-height:1.6;color:var(--bone);
}
.premise .body{color:var(--bone-dim);}

/* ================= 목표 ================= */
.goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:32px;}
.goal{border:1px solid var(--line);background:var(--soot);padding:20px;display:flex;flex-direction:column;gap:8px;}
.goal .k{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--star);}
.goal .v{font-family:"IBM Plex Mono",monospace;font-size:1.5rem;color:var(--bone);line-height:1;font-variant-numeric:tabular-nums;}
.goal p{font-size:.86rem;color:var(--bone-dim);}

/* ================= 게임플레이 띠 ================= */
.band{position:relative;margin-top:32px;border:1px solid var(--line);background:#0d0b0a;overflow:hidden;}
/* 비율은 캔버스가 직접 갖는다. 부모에 aspect-ratio 를 주고 자식에 height:100% 를
   물리면 높이가 서로를 참조해 0 으로 잡힌다. */
.band canvas{
  display:block;width:100%;height:auto;
  opacity:0;transition:opacity .6s ease;
}
.band canvas.is-ready{opacity:1;}
#regionBand{aspect-ratio:1280/320;}
#beastBand{aspect-ratio:1280/170;}
/* 지형을 덜 가리려고 띠 아래 전체를 덮던 그늘을 걷어냈다. 대신 이름표만 제 밑을 깐다. */
.band-label{
  position:absolute;left:16px;bottom:14px;
  padding:6px 14px 7px;background:rgba(13,11,10,.72);
  border:1px solid rgba(214,196,171,.16);backdrop-filter:blur(3px);
  font-family:Hahmlet,serif;font-weight:700;font-size:1.15rem;
  color:var(--bone);text-shadow:0 2px 10px rgba(13,11,10,.9);
  pointer-events:none;
}
.band-label::before{
  content:"";display:inline-block;width:6px;height:6px;
  background:var(--ember);margin-right:10px;vertical-align:middle;
}
@media (max-width:600px){
  /* 좁은 화면에서는 showcase.js 가 논리 폭을 640 으로 낮춘다. 비율도 같이 맞춘다. */
  #regionBand{aspect-ratio:640/280;}
  #beastBand{aspect-ratio:640/180;}
  .band-label{font-size:1rem;left:12px;bottom:10px;padding:5px 11px 6px;}
}

/* ================= 보스 ================= */
.bosses{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px;
}
.boss{
  background:var(--soot);padding:16px 12px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  transition:background .18s;
}
.boss:hover{background:var(--soot-2);}
.boss-art{
  height:78px;width:100%;
  display:flex;align-items:flex-end;justify-content:center;
}
.boss-art canvas{
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
  display:block;
}
.boss-name{font-family:Hahmlet,serif;font-weight:700;font-size:.92rem;line-height:1.35;}
.boss-ch{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.08em;color:var(--bone-faint);}

/* 아직 만나지 않은 것 — 실루엣은 캔버스에서 칠하고, 여기서는 글자만 죽인다 */
.boss--locked .boss-name,
.ch--locked .ch-title{
  font-family:"IBM Plex Mono",monospace;
  letter-spacing:.22em;
  color:var(--bone-faint);
}
.boss--locked .boss-art canvas{filter:none;opacity:.85;}
.ch--locked .ch-art{
  filter:blur(7px) brightness(.42) saturate(.35);
  transform:scale(1.09);       /* 흐림 때문에 가장자리가 비는 것을 덮는다 */
}
.ch--locked .ch-line{color:var(--bone-faint);font-style:normal;opacity:.75;}
.ch--locked .ch-sub{color:var(--bone-faint);}

/* ================= 챕터 ================= */
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:14px;margin-top:32px;}
.ch{border:1px solid var(--line);background:var(--soot);overflow:hidden;display:flex;flex-direction:column;}
.ch-art{aspect-ratio:16/10;background-size:cover;background-position:center;image-rendering:pixelated;border-bottom:1px solid var(--line);}
.ch-body{padding:13px 15px 16px;display:flex;flex-direction:column;gap:3px;}
.ch-sub{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;color:var(--star);}
.ch-title{font-family:Hahmlet,serif;font-weight:700;font-size:1rem;}
.ch-line{font-size:.79rem;color:var(--bone-faint);line-height:1.6;}

/* ================= 플레이 임베드 ================= */
.stage{position:relative;border:1px solid var(--line);background:#000;aspect-ratio:16/9;overflow:hidden;margin-top:32px;}
.stage iframe{width:100%;height:100%;border:0;display:block;}
.stage-cover{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background-size:cover;background-position:center;
  cursor:pointer;border:0;width:100%;color:var(--bone);font-family:inherit;
}
.stage-cover::before{content:"";position:absolute;inset:0;background:rgba(13,11,10,.62);}
.stage-cover > *{position:relative;}
.play-mark{
  width:74px;height:74px;border:2px solid var(--ember);border-radius:50%;
  display:grid;place-items:center;background:rgba(13,11,10,.5);
  transition:background .16s,transform .16s;
}
.stage-cover:hover .play-mark{background:var(--ember);transform:scale(1.05);}
.play-mark svg{width:26px;height:26px;fill:var(--ember);margin-left:4px;transition:fill .16s;}
.stage-cover:hover .play-mark svg{fill:#1a0d07;}
.stage-cover .label{font-weight:600;font-size:1.05rem;}
.stage-cover .hint{font-size:.82rem;color:var(--bone-dim);}
.stage-fine{margin-top:16px;font-size:.82rem;color:var(--bone-faint);}
.stage-fine a{color:var(--bone-dim);}

/* ================= 마을 사람들의 소개 ================= */
/* 장면 한 장 + 그곳을 아는 사람의 말. 넓은 화면에선 그림과 말이 번갈아 좌우로, 좁으면 위아래로. */
.tour{display:flex;flex-direction:column;gap:56px;margin-top:40px;}
.stop{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;align-items:center;}
.stop:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);}
.stop:nth-child(even) .stop-shot{order:2;}
.stop-shot{margin:0;border:1px solid var(--line);background:#000;}
.stop-shot img{width:100%;height:auto;display:block;}
.stop-talk{display:flex;flex-direction:column;gap:14px;}
.who{display:flex;align-items:center;gap:14px;}
.who img{width:64px;height:64px;border:1px solid var(--line);background:var(--soot-2);flex:none;image-rendering:pixelated;}   /* 초상 128px(64칸 2배) — 64px 로 칸 하나 = 1px, 72 처럼 정수배가 아니면 칸 굵기가 들쭉날쭉 */
.who p{display:flex;flex-direction:column;line-height:1.35;}
.who b{font-family:Hahmlet,serif;font-size:1.08rem;}
.who span{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;color:var(--star);}
/* 말풍선 — 꼬리는 초상 쪽(위)으로 */
.say{
  position:relative;background:var(--soot);border:1px solid var(--line);
  padding:16px 18px;color:var(--bone-dim);font-size:.93rem;
}
.say::before{
  content:"";position:absolute;left:26px;top:-7px;width:12px;height:12px;
  background:var(--soot);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);
}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.tags li{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.06em;color:var(--ember);border:1px solid var(--ember-deep);padding:3px 9px;}
@media (max-width:860px){
  .stop,.stop:nth-child(even){grid-template-columns:1fr;gap:18px;}
  .stop:nth-child(even) .stop-shot{order:0;}
}

/* ---- 배경 장식 — 게임 아이템 그림(decor.js) ---- */
/* 읽는 글 뒤에 옅게 깐다. 글자와 겹치지 않도록 절 양옆 여백 띠에만 놓고, 좁은 화면에선 뺀다. */
.decor{position:relative;overflow:hidden;}
.decor > .wrap,.decor > .wrap-wide{position:relative;z-index:1;}
.decor-layer{position:absolute;inset:0;pointer-events:none;z-index:0;}
.decor-layer img{position:absolute;image-rendering:pixelated;opacity:.16;animation:drift 9s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translateY(-6px) rotate(-4deg);}to{transform:translateY(6px) rotate(4deg);}}
@media (max-width:1320px){.decor-layer{display:none;}}

/* ---- 전체 화면 ---- */
/* 무대 아래 줄. 게임이 시작되기 전에는 JS 가 hidden 으로 접어 둔다. */
.stage-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-top:14px;
}
.stage-bar[hidden]{display:none;}
.stage-note{font-size:.8rem;color:var(--bone-faint);margin:0;max-width:62ch;}
.btn-sm{padding:9px 15px;font-size:.85rem;gap:8px;}
.btn-sm svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;}

/* 전체 화면에서는 16:9 틀을 풀고 화면을 다 쓴다.
   :fullscreen 과 :-webkit-full-screen 은 반드시 규칙을 나눠 써야 한다 —
   한 선택자에 묶으면 둘 중 하나를 모르는 브라우저가 규칙 전체를 버린다. */
#stage:fullscreen{aspect-ratio:auto;width:100%;height:100%;margin:0;border:0;}
#stage:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%;margin:0;border:0;}

/* 전체 화면 중에만 뜨는 나가기 버튼. 게임을 가리지 않게 평소엔 흐리게 두고
   마우스를 올리거나 초점이 오면 또렷해진다. */
.fs-exit{
  /* 왼쪽 아래 — 게임 HUD 에서 유일하게 빈 모서리다(오른쪽 아래는 탭 단추 줄 · 타이틀의 판 표기,
     왼쪽 위 체력 · 오른쪽 위 미니맵 · 가운데 아래 핫바). 오른쪽에 두면 탭 단추를 덮는다. */
  display:none;position:absolute;left:14px;bottom:14px;z-index:2;
  align-items:center;gap:8px;padding:8px 13px;
  background:rgba(13,11,10,.72);border:1px solid rgba(214,196,171,.22);
  color:var(--bone);font-family:inherit;font-size:.8rem;font-weight:600;
  cursor:pointer;opacity:.3;
  transition:opacity .18s,background .18s,border-color .18s;
}
.fs-exit:hover,.fs-exit:focus-visible{
  opacity:1;background:rgba(13,11,10,.94);border-color:var(--bone-faint);
}
.fs-exit svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;}
#stage:fullscreen .fs-exit{display:inline-flex;}
#stage:-webkit-full-screen .fs-exit{display:inline-flex;}

.stage-mobile{
  display:none;border:1px solid var(--line);background:var(--soot);
  padding:34px 24px;text-align:center;color:var(--bone-dim);font-size:.92rem;margin-top:32px;
}

/* ================= 하단 다운로드 유도 ================= */
.getit{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#141110 0%,var(--ash) 100%);
  padding:88px 0;
}
.getit-inner{text-align:center;max-width:52ch;margin:0 auto;}
.getit h2{margin-bottom:16px;}
.getit p{color:var(--bone-dim);}
.getit .cta-row{justify-content:center;margin-top:32px;}
.getit .fine{font-size:.8rem;color:var(--bone-faint);margin-top:20px;}

/* ================= 다운로드 페이지 ================= */
.page-head{padding-top:72px;}   /* ★ 좌우는 .wrap 여백 그대로 — 0 으로 덮으면 아래 섹션보다 22px 바깥으로 나갔다 */
.page-head h1{font-size:clamp(2rem,5vw,3rem);}
.page-head .sec-lede{margin-top:18px;}

.dl-mode{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:8px;}
.dl-mode-btn{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border:1px solid var(--line);background:var(--ash);color:var(--bone-dim);font:inherit;cursor:pointer;}
.dl-mode-btn b{font-family:"IBM Plex Sans KR",sans-serif;font-size:1rem;color:var(--bone);}
.dl-mode-btn span{font-size:.8rem;line-height:1.5;}
.dl-mode-btn[aria-pressed="true"]{border-color:var(--ember-deep);background:var(--soot);box-shadow:inset 0 -2px 0 var(--ember);}
.dl-mode-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px;}
.run-mode{grid-template-columns:1fr 1fr;margin:16px 0 20px;max-width:640px;}
.run-mode .dl-mode-btn{padding:10px 14px;}
.dl .btn.is-off{opacity:.45;pointer-events:none;}
.dl-app-note{margin-top:16px;}
#get [hidden]{display:none !important;}
.dl-app-wait{display:block;margin-top:6px;color:var(--ember);}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:32px;}
.dl{border:1px solid var(--line);background:var(--soot);padding:22px;display:flex;flex-direction:column;gap:14px;}
.dl[data-recommended="1"]{border-color:var(--ember-deep);box-shadow:inset 0 2px 0 var(--ember);}
.dl-os{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.dl-os h3{font-family:"IBM Plex Sans KR",sans-serif;font-size:1.1rem;}
.dl-you{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ember);border:1px solid var(--ember-deep);
  padding:2px 8px;white-space:nowrap;
}
.dl-meta{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--bone-faint);line-height:1.9;}
.dl-meta .k{color:var(--bone-dim);}
.dl-meta .hash{word-break:break-all;}

.tabs{display:flex;gap:0;margin-top:32px;border-bottom:1px solid var(--line);}
.tab{
  font-family:"IBM Plex Sans KR",sans-serif;font-size:.9rem;font-weight:600;
  background:none;border:0;border-bottom:2px solid transparent;
  color:var(--bone-faint);padding:11px 20px;cursor:pointer;
  transition:color .16s,border-color .16s;
}
.tab:hover{color:var(--bone-dim);}
.tab[aria-selected="true"]{color:var(--ember);border-bottom-color:var(--ember);}
.panel{padding-top:26px;display:flex;flex-direction:column;gap:18px;}
.panel[hidden]{display:none;}
.panel ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:12px;}
.panel li::marker{color:var(--ember);font-weight:600;}

pre.cmd{
  margin:0;padding:14px 16px;overflow-x:auto;
  background:#000;border:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;line-height:1.7;
  color:var(--bone);white-space:pre;
}

.alert{border-left:3px solid var(--star);background:var(--star-deep);padding:15px 18px;font-size:.9rem;color:var(--bone-dim);}
.alert.hot{border-left-color:var(--ember);background:#2a1710;}
.alert b.h{display:block;color:var(--bone);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace;margin-bottom:4px;}

/* ================= 표 ================= */
.tscroll{overflow-x:auto;border:1px solid var(--line);margin-top:32px;background:var(--soot);}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:.88rem;}
th,td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
thead th{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-faint);font-weight:500;background:#141110;border-bottom:1px solid var(--line);
}
tbody tr:last-child td{border-bottom:none;}
kbd{
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;
  background:#000;border:1px solid var(--line);border-radius:3px;
  padding:1px 7px;color:var(--bone);white-space:nowrap;
}

/* ================= 변경 이력 ================= */
details.log{border:1px solid var(--line);background:var(--soot);margin-top:12px;}
details.log summary{padding:14px 18px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:12px;list-style:none;}
details.log summary::-webkit-details-marker{display:none;}
details.log summary::before{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--ember);font-size:1.05rem;}
details.log[open] summary::before{content:"\2212";}
details.log .log-body{padding:0 18px 18px 44px;color:var(--bone-dim);font-size:.89rem;}
details.log .log-body ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:7px;}
/* 아직 안 나온 판 — 내려받는 것과 웹에서 도는 것이 다르다는 걸 한눈에.
   테두리만 잉걸빛으로 세우고 나머지는 다른 항목과 같게 둔다. */
details.log.log-wip{border-color:color-mix(in srgb,var(--ember) 45%,var(--line));}
details.log.log-wip summary::before{content:"\25CF";font-size:.7rem;}
details.log .wip{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:400;letter-spacing:.06em;
  border:1px solid color-mix(in srgb,var(--ember) 55%,var(--line));border-radius:3px;
  padding:1px 7px;color:var(--ember);
}
details.log .log-note{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line);}

/* ================= 푸터 ================= */
footer{border-top:1px solid var(--line);padding:40px 0 60px;color:var(--bone-faint);font-size:.82rem;}
.foot-row{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:baseline;}
/* 지금 도는 판. 눈에 띌 필요는 없고, 물어보면 답할 수 있으면 된다 —
   "사이트를 고쳤는데 반영이 안 된다"가 캐시인지 배포인지 여기서 갈린다. */
.site-build{opacity:.42;font-size:.82em;margin-left:6px;}
.eyebrow-sub{opacity:.55;letter-spacing:.04em;font-weight:400;}
.lede-note{display:block;margin-top:6px;font-size:.9em;opacity:.72;}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;}
/* 애셋 출처 — 눈에 띌 필요는 없지만 반드시 보이는 자리에 있어야 한다 */
.foot-credit{flex-basis:100%;order:3;margin:14px 0 0;opacity:.62;font-size:.9em;}
.foot-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.foot-credit a:hover{color:var(--bone);}
/* 같은 빌드를 올린 두 주소(Vercel · Cloudflare Pages) — 어느 하나를 앞세우지 않고 같은 모양으로 나란히 */
.foot-hosts{flex-basis:100%;order:4;margin:6px 0 0;opacity:.62;font-size:.9em;}
.foot-hosts a{white-space:nowrap;color:inherit;text-decoration:underline;text-underline-offset:2px;font-family:"IBM Plex Mono",monospace;font-size:.95em;}
.foot-hosts a:hover{color:var(--bone);}

/* ================= 스크롤 등장 =================
   기본은 "보이는" 상태다. 스크립트가 관찰자를 실제로 띄웠을 때만 html.anim 이 붙어
   숨기기가 시작된다. 반대로 만들면(기본 숨김) 스크립트가 안 돌거나 관찰자가 발동하지
   않는 환경에서 본문이 통째로 사라진다. */
.reveal{transition:opacity .6s ease,transform .6s ease;}
html.anim .reveal{opacity:0;transform:translateY(14px);}
html.anim .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html.anim .reveal{opacity:1;transform:none;}
}

@media (max-width:760px){
  section{padding:64px 0;}
  .hero-inner{min-height:auto;padding-top:92px;padding-bottom:52px;}
  .stage,.stage-bar{display:none;}
  .stage-mobile{display:block;}
  .nav-links a{padding:7px 10px;font-size:.84rem;}
  .nav-inner{gap:12px;}
  .getit{padding:64px 0;}
}
/* 좁은 화면에서 자리가 모자라면 사이트 이름이 아니라 중복되는 것부터 접는다.
   "바로 플레이"는 히어로에 큰 버튼으로 또 있고, CTA "내려받기"는 바로 옆
   "다운로드" 링크와 목적지가 같다. 둘 다 빼면 이름이 온전히 남는다. */
@media (max-width:560px){
  .nav-links a[href$="#play"]{display:none;}
}
@media (max-width:480px){
  .nav-inner{gap:14px;}
}