/* Naïl: Under the Roots 공식 페이지(0069, 다시 짬 0155).
   한 가지 이야기: 스크롤하면 땅 위(노을) → 굴(흙) → 뿌리 지대 → 어두운 심층 → 가장 깊은 곳으로 내려간다.
   층마다 바탕색이 짙어지고, 옆의 깊이 눈금에서 나일이 같이 내려간다(site.js). 그림은 도트 그대로(pixelated).
   움직임(반딧불·걷는 스프라이트)은 prefers-reduced-motion이면 멈춘다. */
@font-face {
  font-family: "Galmuri11";
  src: url("fonts/galmuri11-sub.woff2?v=df40937b") format("woff2");
  font-display: swap;
}
:root {
  --sky: #2a1d2c;
  --soil: #17130f;
  --soil-2: #221c16;
  --soil-3: #34291f;
  --root: #6b5240;
  --deep: #0e0c14;
  --deep-2: #181524;
  --deep-3: #2a2540;
  --core: #09080c;
  --text: #ece5da;
  --muted: #b8ab9b;
  --moss: #9cc46e;
  --glow: #f2cd5c;
  --petal: #f3a7c0;
  --thread: #a879d8;
  --spore: #6fc6e8;
  --f-pixel: "Galmuri11", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-body: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--core); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--soil); color: var(--text);
  font-family: var(--f-body); font-size: 17px; line-height: 1.7; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--glow); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--glow); color: var(--soil); padding: .4rem .8rem; }
.skip:focus { left: 8px; top: 8px; }
.wrap {
  max-width: 68rem; margin: 0 auto;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
}
h1, h2, h3, .pixel { font-family: var(--f-pixel); font-weight: 400; letter-spacing: .01em; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.3; margin: 0; }
h3 { font-size: 1.25rem; margin: 0; line-height: 1.35; }
p { margin: 0; }
.tag { font-family: var(--f-pixel); color: var(--moss); font-size: .9rem; letter-spacing: .08em; }

/* 위 막대: 첫 화면 위에 떠 있다가 내려가면 바탕이 생긴다 */
.top { position: sticky; top: 0; z-index: 20; background: rgba(23, 19, 15, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding-block: .55rem; flex-wrap: wrap; }
.brand { font-family: var(--f-pixel); font-size: 1.2rem; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.brand img { width: 24px; height: 24px; }
.top nav { display: flex; gap: .3rem 1.1rem; flex-wrap: wrap; font-size: .95rem; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--text); }
.top nav .lang { color: var(--glow); }

/* 첫 화면: 타이틀 바탕 한 장(땅 위 + 굴 단면 + 큰 나무). 글은 하늘 쪽에 둥근 그늘(게임 타이틀과 같은 0152) */
/* 아래 "땅속으로 ▼" 자리(scroll-hint)를 비워 둔다: 가로로 눕힌 폰처럼 글이 화면보다 길면 hero가 글에 맞춰 늘어나는데, 안내가 hero 바닥에 붙어 마지막 줄(버전)과 겹쳤다. */
.hero { position: relative; min-height: min(100svh, 56.25vw + 4rem); display: grid; align-items: start; overflow: hidden; background: var(--sky); padding-bottom: 3.4rem; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(to bottom, transparent, var(--soil)); pointer-events: none; }
.hero-text { position: relative; z-index: 2; display: grid; gap: .9rem; max-width: 34rem; margin: clamp(2rem, 7vh, 5rem) 0 0 max(18px, calc((100vw - 68rem) / 2 + 18px)); padding: 1.4rem 1.6rem; }
.hero-text::before { content: ""; position: absolute; inset: -10% -14%; z-index: -1; background: radial-gradient(closest-side, rgba(10, 6, 12, .62), rgba(10, 6, 12, .38) 62%, transparent); }
.eyebrow { font-family: var(--f-pixel); color: var(--moss); letter-spacing: .08em; font-size: .95rem; }
.logo { font-size: clamp(2.8rem, 8vw, 5rem); line-height: 1; margin: 0; color: var(--glow); text-shadow: 0 3px 0 #5a3a20, 0 0 24px rgba(242, 205, 92, .35); }
.logo small { display: block; font-size: .4em; color: var(--text); margin-top: .4rem; letter-spacing: .06em; text-shadow: 0 2px 0 #000; }
.lede { font-size: 1.12rem; max-width: 32rem; text-shadow: 0 1px 2px #000; }
.cta { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.cta-line { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.btn.soon { border-style: dashed; color: var(--muted); border-color: var(--muted); box-shadow: none; cursor: default; }
.btn.soon small { font-size: .7em; opacity: .85; }
.btn.soon:hover { transform: none; box-shadow: none; }
.btn {
  display: inline-block; font-family: var(--f-pixel); font-size: 1.05rem; text-decoration: none; padding: .62rem 1.15rem;
  border: 2px solid var(--glow); color: var(--soil); background: var(--glow); box-shadow: 4px 4px 0 var(--root);
  transition: transform .08s, box-shadow .08s;
}
.btn.alt { background: rgba(10, 6, 12, .5); color: var(--glow); }
.btn.small { font-size: .95rem; padding: .45rem .9rem; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--root); }
.meta { color: var(--muted); font-size: .92rem; text-shadow: 0 1px 2px #000; }
.meta b { color: var(--text); font-weight: 600; }
.scroll-hint { position: absolute; z-index: 2; left: 50%; bottom: 1.2rem; transform: translateX(-50%); font-family: var(--f-pixel); color: var(--text); text-decoration: none; font-size: .95rem; opacity: .85; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 5px); } }

/* 반딧불: site.js가 .flies 안에 점을 뿌린다 */
.flies { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.fly { position: absolute; width: 4px; height: 4px; background: #fff3b0; box-shadow: 0 0 6px 2px rgba(242, 205, 92, .7), 0 0 16px 6px rgba(242, 205, 92, .25); opacity: 0;
  animation: drift var(--d, 9s) ease-in-out var(--delay, 0s) infinite, blink var(--b, 3s) ease-in-out var(--delay, 0s) infinite; }
@keyframes drift { 0% { transform: translate(0, 0); } 33% { transform: translate(var(--x1), var(--y1)); } 66% { transform: translate(var(--x2), var(--y2)); } 100% { transform: translate(0, 0); } }
@keyframes blink { 0%, 100% { opacity: 0; } 40%, 60% { opacity: .95; } }

/* 스프라이트: 칸을 가로로 이은 띠(sp_*.png)를 steps()로 돌린다. --n 칸 수, --f 한 칸 시간(기본 .16s), --s 한 칸 크기(기본 = 24칸의 3배, 32·40칸 시트는 inline으로 3·4배).
   그림은 각 요소의 inline background-image로 준다 — url()을 변수(--sp)에 넣으면 페이지가 아니라 이 css 기준으로
   풀려서 en/ 페이지의 ../img/가 사이트 밖을 가리켰다(0181). */
.sprite { --s: 72px; display: inline-block; width: var(--s); height: var(--s); background-position: 0 0; background-size: calc(var(--n) * var(--s)) var(--s); background-repeat: no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges; animation: frames calc(var(--n) * var(--f, .16s)) steps(var(--n)) infinite; }
.sprite.big { --s: 96px; }
@keyframes frames { to { background-position-x: calc(var(--n) * var(--s) * -1); } }

/* 첫 화면 아래: 나일과 포포가 굴 쪽으로 걸어간다 */
.parade { position: relative; height: 76px; background: var(--soil); border-bottom: 4px solid var(--soil-3);
  background-image: linear-gradient(var(--soil-3) 0 0); background-size: 100% 4px; background-position: 0 100%; background-repeat: no-repeat; overflow: hidden; }
/* 걷는 이들은 site.js가 무작위로 골라 하나씩 내보낸다(0228 덧붙임) — --f 한 칸 시간, --d 건너는 시간, --delay 출발.
   스크립트가 없으면 HTML의 나일·포포가 계속 걷는다. */
.parade .walker { position: absolute; bottom: 4px; left: calc(var(--s) * -1);
  animation: frames calc(var(--n) * var(--f, .16s)) steps(var(--n)) infinite, walk var(--d, 26s) linear var(--delay, 0s) var(--loop, infinite); }
.parade .w2 { --delay: 1.4s; }
@keyframes walk { to { left: 100%; } }

/* 층: 내려갈수록 어둡다 */
.section { position: relative; padding-block: 4.2rem; }
.section > .wrap { position: relative; z-index: 2; }
.layer-burrow { background: linear-gradient(var(--soil), var(--soil-2)); }
.layer-roots { background: linear-gradient(var(--soil-2), #1a1714); }
.layer-roots + .layer-deep { border-top: 0; }
.layer-deep { background: linear-gradient(#141218, var(--deep)); }
.layer-core { background: var(--core); }
/* 층 사이의 흙 가장자리(계단 모양) */
.layer-roots::before, .layer-deep::before, .layer-core::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; pointer-events: none;
  background: linear-gradient(135deg, transparent 50%, currentColor 50%) 0 0 / 24px 12px repeat-x;
}
.layer-burrow + .layer-roots::before { color: var(--soil-2); }
.layer-roots::before { color: #1a1714; }
.layer-deep::before { color: #141218; }
.layer-core::before { color: var(--core); }
.layer-roots + .layer-roots::before, .layer-deep + .layer-deep::before, .layer-core + .layer-core::before { display: none; }
#story { padding-top: 3rem; }

.head { display: grid; gap: .5rem; max-width: 44rem; margin-bottom: 2rem; }
.head p:not(.tag) { color: var(--muted); }
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.split .copy { display: grid; gap: .9rem; min-width: 0; }
.split .copy h2, .split .copy h3 { color: var(--glow); }
.split + .split, .cast + .split { margin-top: 2.6rem; }
.frame { margin: 0; border: 2px solid var(--soil-3); background: #000; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35); min-width: 0; }
/* 칸이 그림 원본보다 넓으면(큰 글자 설정·넓은 화면) 그림을 칸 폭에 맞춰 키운다. 안 그러면 오른쪽에 검은 여백(사장 피드백 2026-10-27). */
.frame > img { width: 100%; }
.frame > video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.frame figcaption { font-size: .85rem; color: var(--muted); padding: .35rem .6rem; background: var(--soil-2); font-family: var(--f-pixel); }

/* 싸움 */
.fight { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: center; }
.moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.moves li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .1rem .9rem; align-items: baseline; }
.moves .keys { grid-row: span 2; align-self: center; }
.moves b { font-family: var(--f-pixel); font-weight: 400; font-size: 1.1rem; color: var(--glow); }
.moves span:not(.keys) { color: var(--muted); font-size: .95rem; }
kbd {
  display: inline-block; min-width: 1.9em; text-align: center; font-family: var(--f-pixel); font-size: .9rem; line-height: 1.5;
  color: var(--text); background: #2b2420; border: 1px solid #d9cbb5; box-shadow: 0 2px 0 #6b5240; padding: 0 .35rem; margin: 0 .1rem;
}
.moves kbd { font-size: 1.15rem; padding: .1rem .5rem; }

/* 지대 */
.zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.zone { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.6rem; align-items: center; padding: 1rem; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.zone .shot { border: 2px solid var(--soil-3); min-width: 0; }
.zone > div { display: grid; gap: .6rem; min-width: 0; }
.zone h3 { color: var(--text); font-size: 1.4rem; display: flex; align-items: center; gap: .6rem; }
.z-n { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; background: var(--glow); color: var(--soil); font-size: 1rem; }
.zone:nth-child(2) .z-n { background: var(--moss); }
.zone:nth-child(3) .z-n { background: var(--spore); }
.zone p { color: var(--muted); }
.zone p b { color: var(--text); font-weight: 600; }
.crit { display: flex; gap: .4rem; align-items: end; min-height: 48px; }
.note { margin-top: 1.4rem; color: var(--muted); border-left: 3px solid var(--thread); padding-left: .9rem; }
.note b { color: var(--thread); font-weight: 600; }
.gallery { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .gallery { grid-template-columns: 1fr 1fr; } }

/* 이웃 */
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.cast li { background: rgba(42, 37, 64, .35); border: 1px solid var(--deep-3); padding: .9rem; display: grid; grid-template-columns: 88px 1fr; gap: .85rem; align-items: center; transition: border-color .2s, transform .2s; }
.cast li:hover { border-color: var(--thread); transform: translateY(-2px); }
.cast img { width: 88px; height: 88px; background: var(--deep-3); }
.cast h3 { font-size: 1.1rem; color: var(--text); }
.cast .who { color: var(--petal); font-size: .85rem; font-family: var(--f-pixel); }
.cast p { color: var(--muted); font-size: .93rem; line-height: 1.55; }

/* 두 캐릭터 */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.duo.trio { grid-template-columns: repeat(3, 1fr); }
#two .split { margin-top: 1.4rem; }
#route .route-map { margin-bottom: 1.6rem; }
.duo article { display: grid; justify-items: center; text-align: center; gap: .6rem; padding: 1.6rem 1.2rem; background: rgba(42, 37, 64, .35); border: 1px solid var(--deep-3); }
.duo h3 { color: var(--glow); font-size: 1.4rem; }
.duo p { color: var(--muted); max-width: 22rem; }

/* 목록 */
.more { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.1rem 2rem; list-style: none; margin: 0; padding: 0; }
.more li { display: grid; gap: .15rem; padding-left: 1.2rem; position: relative; }
.more li::before { content: ""; position: absolute; left: 0; top: .6rem; width: 7px; height: 7px; background: var(--glow); box-shadow: 0 0 8px rgba(242, 205, 92, .6); }
.more b { font-family: var(--f-pixel); font-weight: 400; color: var(--text); font-size: 1.05rem; }
.more span { color: var(--muted); font-size: .94rem; }
.credits { list-style: none; margin: 0; padding: 1rem 1.2rem; display: grid; gap: .55rem; background: rgba(42, 37, 64, .35); border: 1px solid var(--deep-3); }
.credits li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; border-bottom: 1px dashed var(--deep-3); padding-bottom: .45rem; }
.credits li:last-child { border: 0; padding: 0; }
.credits b { font-family: var(--f-pixel); font-weight: 400; }
.credits span { color: var(--muted); font-size: .9rem; }
.langs { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.langs li { font-size: .92rem; padding: .2rem .65rem; border: 1px solid var(--deep-3); background: rgba(42, 37, 64, .35); color: var(--text); }

/* 해 보기 */
.play { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.play > div { background: #15121b; border: 1px solid var(--deep-3); padding: 1.1rem; display: grid; gap: .7rem; align-content: start; min-width: 0; }
.play h3 { color: var(--glow); }
.play p, .play li { color: var(--muted); font-size: .95rem; }
.play ul { margin: 0; padding-left: 1.1rem; }
.play .small-note { font-size: .82rem; overflow-wrap: anywhere; }
/* 받는 파일·릴리스 노트는 웹·Android·PC 모두의 것 — 카드 하나 안이 아니라 카드 줄 아래 전체 폭에. */
.play .small-note.files { grid-column: 1 / -1; margin: -.3rem 0 0; }
.keytable { overflow-x: auto; grid-column: 1 / -1; }
.keytable table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.keytable th, .keytable td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--deep-3); }
.keytable th { color: var(--muted); font-weight: 400; }
.facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--deep-3); border: 1px solid var(--deep-3); }
.facts div { background: #15121b; padding: .7rem .9rem; }
.facts dt { font-family: var(--f-pixel); color: var(--moss); font-size: .85rem; }
.facts dd { margin: 0; color: var(--text); font-size: .95rem; }
.faq { display: grid; gap: .8rem; max-width: 48rem; }
.faq details { background: #15121b; border: 1px solid var(--deep-3); padding: .7rem 1rem; }
.faq summary { cursor: pointer; font-family: var(--f-pixel); color: var(--text); }
.faq details[open] summary { color: var(--glow); margin-bottom: .4rem; }
.faq p { color: var(--muted); font-size: .95rem; }

/* 소식 */
.news { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.news li { display: grid; grid-template-columns: 4.5rem 6.5rem 1fr; gap: .2rem 1rem; align-items: baseline; border-bottom: 1px dashed var(--deep-3); padding-bottom: .55rem; }
.news .v { font-family: var(--f-pixel); color: var(--glow); }
.news .d { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.news a { color: var(--text); }

footer { position: relative; padding-block: 2.4rem 3rem; color: var(--muted); font-size: .86rem; border-top: 1px solid var(--deep-2); }
footer .wrap { display: grid; gap: .6rem; }
footer a { color: var(--muted); }

/* 깊이 눈금: 넓은 화면의 오른쪽 */
.depth { display: none; }
@media (min-width: 1240px) {
  .depth { display: block; position: fixed; z-index: 15; right: 22px; top: 50%; transform: translateY(-50%); height: 56vh; width: 110px; pointer-events: none; }
  .depth ol { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; border-right: 2px dotted rgba(255, 255, 255, .18); }
  .depth li { font-family: var(--f-pixel); font-size: .78rem; color: rgba(236, 229, 218, .45); text-align: right; padding-right: 26px; text-shadow: 0 1px 2px #000; position: relative; transition: color .3s; }
  .depth li::after { content: ""; position: absolute; right: -5px; top: .55em; width: 8px; height: 8px; background: rgba(255, 255, 255, .25); }
  .depth li.on { color: var(--glow); }
  .depth li.on::after { background: var(--glow); box-shadow: 0 0 8px var(--glow); }
  .depth-mole { --s: 32px; position: absolute; right: -16px; top: var(--p, 0%); transform: translateY(-50%) rotate(90deg); }
}

@media (max-width: 860px) {
  .news li { grid-template-columns: 4.5rem 1fr; }
  .news a { grid-column: 1 / -1; }
  .split, .fight, .zone { grid-template-columns: 1fr; gap: 1.1rem; }
  .duo, .duo.trio { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .hero { min-height: auto; display: block; padding-bottom: 0; }
  .hero-bg { position: relative; height: auto; aspect-ratio: 16 / 9; }
  .hero::after { display: none; }
  .hero-text { margin: 0; padding: 1.4rem max(18px, env(safe-area-inset-left, 0px)) 2.4rem; max-width: none; background: linear-gradient(var(--sky), var(--soil)); }
  .hero-text::before { display: none; }
  .hero .flies { bottom: auto; height: calc(100vw * 9 / 16); }
  .scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .cast li:hover { transform: none; }
  .fly { animation: none; opacity: .7; }
  .sprite, .scroll-hint { animation: none; }
  .parade .walker { animation: none; left: 12%; }
  .parade .w2 { left: calc(12% + 56px); }
}