/* BUGMORI 공개 사이트 — BUG ARCADE (design.md). 공개 페이지에서만 tokens.css 다음에 로드한다.
   모바일 우선(390) → 640 2열 → 1024 데스크톱(1440). 네온은 신호로만, 글로우 없음, 모서리 4px 계단, 모션 steps(). */

@font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/site/fonts/Pretendard-Regular.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/site/fonts/Pretendard-Bold.subset.woff2") format("woff2"); }
@font-face { font-family: "Galmuri11"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/site/fonts/Galmuri11-latin.woff2") format("woff2"); }

:root {
  /* tokens.css 계약 9개 덮어쓰기 */
  --bg: #0A0F24;
  --surface: #121A3B;
  --text: #EAF0FF;
  --muted: #949FCF;
  --line: #6272C0;
  --accent: #C6FF3D;
  --danger: #FF6B8B;
  --radius: 0;
  --font: "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 사이트 토큰 */
  --surface-2: #1A2550;
  --line-soft: #2C3A73;
  --text-2: #B4BEE6;
  --accent-hover: #DAFF7A;
  --on-accent: #0A0F24;
  --link: #3DE3FF;
  --focus: #3DE3FF;
  --soon: #B394FF;
  --screen: #FAF5ED;
  --ink: #2C0D02;
  --bubble: #FFFFFF;
  --font-pixel: "Galmuri11", "Pretendard", monospace;

  --fs-display: 34px; --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 18px;
  --fs-body: 16px; --fs-small: 14px; --fs-label: 12px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 80px; --sp-9: 120px;

  --dur-fast: 120ms; --dur-base: 200ms; --dur-sig: 480ms;

  --gutter: 16px;
  --header-h: 56px;
  --step: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}

/* 기반 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.7 var(--font);
  -webkit-text-size-adjust: 100%;
  word-break: keep-all; overflow-wrap: anywhere;
}
h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* 건너뛰기 링크 */
.skip {
  position: absolute; left: var(--sp-3); top: -80px; z-index: 50;
  padding: var(--sp-2) var(--sp-4); background: var(--text); color: var(--bg); font-weight: 700;
}
.skip:focus { top: var(--sp-3); }

/* 계단 프레임: --fc 테두리색, --fill 면, --bw 두께 */
.px, .btn::before, .btn::after {
  border: var(--bw, 2px) solid var(--fc, var(--line));
  background:
    linear-gradient(var(--fc, var(--line)) 0 0) 0 0 / calc(var(--bw, 2px) + 4px) calc(var(--bw, 2px) + 4px) no-repeat border-box,
    linear-gradient(var(--fc, var(--line)) 0 0) 100% 0 / calc(var(--bw, 2px) + 4px) calc(var(--bw, 2px) + 4px) no-repeat border-box,
    linear-gradient(var(--fc, var(--line)) 0 0) 0 100% / calc(var(--bw, 2px) + 4px) calc(var(--bw, 2px) + 4px) no-repeat border-box,
    linear-gradient(var(--fc, var(--line)) 0 0) 100% 100% / calc(var(--bw, 2px) + 4px) calc(var(--bw, 2px) + 4px) no-repeat border-box,
    var(--fill, var(--surface));
  clip-path: var(--step);
}

/* 버튼 (모양은 ::before, 포커스 계단 링은 ::after) */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 52px; padding: 0 var(--sp-5);
  font: 700 var(--fs-body)/1.2 var(--font); text-decoration: none; text-align: center;
  border: 0; background: none; cursor: pointer;
  transition: transform var(--dur-fast) steps(2);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.btn::after { content: none; }
.btn:focus-visible { outline: none; }
.btn:focus-visible::after {
  content: ""; position: absolute; inset: -6px; z-index: -2;
  --bw: 3px; --fc: var(--focus); --fill: transparent;
}
.btn-primary { color: var(--on-accent); --fc: var(--accent); --fill: var(--accent); }
.btn-secondary { color: var(--link); --fc: var(--link); --fill: transparent; }
.btn-primary:hover { --fc: var(--accent-hover); --fill: var(--accent-hover); transform: translateY(-2px); }
.btn-secondary:hover { --fill: color-mix(in srgb, var(--link) 12%, transparent); transform: translateY(-2px); }
.btn:active { transform: translateY(2px); transition: none; }
.btn-s { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-small); }
.btn-row { display: grid; gap: var(--sp-3); }
.text-link {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  color: var(--link); font-weight: 700; text-underline-offset: 4px;
}

/* 헤더 */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--line-soft);
}
.bar { display: flex; align-items: center; gap: var(--sp-2); height: var(--header-h); }
.logo {
  display: flex; align-items: center; gap: var(--sp-2); margin-right: auto; min-height: 48px;
  color: var(--text); text-decoration: none;
}
.logo-mark { width: 28px; height: 28px; transition: transform var(--dur-fast) steps(2); }
a.logo:hover .logo-mark { transform: rotate(-8deg); }
.logo-word { font: 700 22px/1 var(--font-pixel); letter-spacing: .02em; }
.logo-sub { display: none; font-size: var(--fs-small); color: var(--muted); }
.nav { display: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-1);
  color: var(--text); text-decoration: none; font-weight: 700; font-size: var(--fs-small);
}
.nav a:hover { color: var(--link); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
.hdr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 48px; padding: 0 var(--sp-3);
  color: var(--text); text-decoration: none; cursor: pointer;
  border: 2px solid var(--line);
  font: 700 var(--fs-label)/1 var(--font-pixel); letter-spacing: .06em;
}
a.hdr-btn:hover, .menu summary:hover { border-color: var(--link); color: var(--link); }
span.hdr-btn { border-color: transparent; color: var(--muted); cursor: default; } /* 링크 아닌 언어 항목(미리보기): 버튼처럼 보이지 않게 */

/* 모바일 메뉴: JS 없는 details/summary */
.menu summary { list-style: none; font-size: 20px; font-family: var(--font); }
.menu summary::-webkit-details-marker { display: none; }
.menu .menu-close, .menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: inline; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
.menu-panel a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: 0 var(--gutter); border-top: 1px solid var(--line-soft);
  color: var(--text); text-decoration: none; font-weight: 700;
}
.menu-panel .cur { color: var(--accent); font-size: 10px; visibility: hidden; }
.menu-panel a:hover .cur, .menu-panel a:focus-visible .cur, .menu-panel a[aria-current="page"] .cur { visibility: visible; }
.menu-panel a:focus-visible { outline-offset: -3px; }

/* 페이지 공통 */
.page { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.page-head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.page-label { font: 700 13px/1.4 var(--font-pixel); letter-spacing: .06em; color: var(--muted); }
.page h1 { font: 700 var(--fs-h1)/1.2 var(--font); text-wrap: balance; }
.block + .block { margin-top: var(--sp-7); }
.sec-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4); font: 700 var(--fs-h2)/1.2 var(--font-pixel); letter-spacing: .04em;
}
.sec-title::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; align-self: center; }
.sec-title small { font: 400 var(--fs-small)/1.4 var(--font); letter-spacing: 0; color: var(--muted); }
.panel { --fill: var(--surface); max-width: 760px; padding: var(--sp-5); }

/* 대화창 패널 */
.dialog { --fill: var(--surface); position: relative; max-width: 760px; padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.dialog p { max-width: 70ch; }
.dialog p + p { margin-top: var(--sp-3); }
.dialog-next { position: absolute; right: var(--sp-4); bottom: var(--sp-2); font-size: 8px; color: var(--accent); }

/* HUD 행 */
.hud-rows { border-top: 1px solid var(--line-soft); }
.hud-rows > div {
  display: grid; grid-template-columns: 112px 1fr; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft);
}
.hud-rows dt { font-size: var(--fs-small); color: var(--muted); }

/* 크림 스크린 + TEMP 표식 */
.screen-cream { --fill: var(--screen); --fc: var(--line); position: relative; color: var(--ink); }
.screen-cream :focus-visible { outline-color: var(--ink); }
.tag-temp {
  position: absolute; left: var(--sp-3); bottom: var(--sp-2);
  font: 700 var(--fs-label)/1 var(--font-pixel); letter-spacing: .06em;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}

/* S2 About */
.mascot-grid { display: grid; gap: var(--sp-5); justify-items: center; }
.mascot-img { width: 200px; height: 200px; }
.mascot-grid .hud-rows { width: 100%; max-width: 640px; }
.next-row { display: grid; gap: var(--sp-3); justify-items: start; }
.next-row .btn { width: 100%; }

/* S3 Contact */
.contact-panel { display: grid; gap: var(--sp-4); }
.mail-big { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.contact-panel .btn { width: 100%; }
.note { font-size: var(--fs-small); color: var(--muted); }

/* S4 Privacy (Read 모드: 프레임 없음) */
.doc-meta { font-size: var(--fs-small); color: var(--muted); }
.doc-grid { display: grid; gap: var(--sp-6); }
.toc ol { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.toc a { display: inline-flex; align-items: center; min-height: 44px; }
.doc { max-width: 70ch; }
.doc section + section { margin-top: var(--sp-6); }
.doc h2 { font: 700 20px/1.3 var(--font); margin-bottom: var(--sp-3); }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: var(--sp-3); }
.doc ul { list-style: disc; padding-left: var(--sp-5); }
.doc li + li { margin-top: var(--sp-2); }
/* seo-legal S4: 목차 2열 격자(1024 미만), 문서 표 + 스크롤 래퍼 */
.toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); padding-left: 0; }
.toc li { margin-left: var(--sp-5); }
.doc-table-wrap { overflow-x: auto; margin: var(--sp-4) 0; }
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.doc-table th, .doc-table td {
  padding: var(--sp-3); text-align: left; vertical-align: top;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.doc-table th { font-weight: 700; color: var(--muted); }
.doc-table thead th { color: var(--text); }
.doc-table th[scope="row"] { width: 88px; overflow-wrap: normal; } /* 88px = 최소 폭, 가장 긴 단어까지 늘어남. URL 은 td 에서만 anywhere */
.doc-table td { min-width: 128px; }

/* S7 404 */
.not-found { display: grid; gap: var(--sp-3); justify-items: start; }
/* 상반신 크롭: 잘린 아랫단을 패널 아래 테두리에 붙인다(오리가 아래에서 올라온 모양) */
.nf-screen { width: 100%; height: 220px; display: grid; place-items: end center; margin-bottom: var(--sp-3); }
.nf-screen img { display: block; width: min(100%, 360px); height: auto; }
.nf-desc { color: var(--text-2); }
.not-found .btn-row { width: 100%; margin-top: var(--sp-3); }
.not-found .btn { width: 100%; }

/* S1 메인: 섹션 */
.section { padding-top: var(--sp-7); }
.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4);
}
.sec-head .sec-title { margin-bottom: 0; }
.sec-body { max-width: 40em; margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); color: var(--text-2); }

/* 히어로 캐비닛: surface-2 + 4px 프레임 + 모서리 라임 점 + 스크린 안 스캔라인 */
.hero { padding-top: var(--sp-5); }
.hero > .wrap { padding: 0 var(--sp-3); }
.cabinet { --bw: 4px; --fill: var(--surface-2); position: relative; padding: var(--sp-6) var(--sp-4); }
.cabinet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1px 4px);
}
.cabinet::after {
  content: ""; position: absolute; inset: var(--sp-2); pointer-events: none;
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--accent) 0 0) 100% 0 / 4px 4px no-repeat,
    linear-gradient(var(--accent) 0 0) 0 100% / 4px 4px no-repeat,
    linear-gradient(var(--accent) 0 0) 100% 100% / 4px 4px no-repeat;
}
.screen { position: relative; display: grid; gap: var(--sp-5); justify-items: center; }
.hero-duck { width: 176px; height: 176px; }
.hero-copy { display: grid; gap: var(--sp-4); justify-items: start; width: 100%; }
.wordmark { font: 700 33px/1 var(--font-pixel); letter-spacing: .04em; }
.hero h1 { font: 700 var(--fs-display)/1.2 var(--font); text-wrap: balance; }
.hero h1 .nowrap { white-space: nowrap; } /* 히어로 문구는 문장 단위로만 줄바꿈 */
.lead { max-width: 34em; color: var(--text-2); text-wrap: pretty; }
.cta-row { display: grid; gap: var(--sp-3); width: 100%; margin-top: var(--sp-2); }
@keyframes hop { 0%, 93.3% { transform: none; } 93.4%, 96.6% { transform: translateY(-6px); } 96.7%, 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-duck { animation: hop 6s linear 3; } /* 6초 간격 2프레임 hop, 3회만 */
}

/* 게임 카드(표준 + 메인 버튼 줄) */
.grid { display: grid; gap: var(--sp-4); }
.card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: var(--sp-3); }
.cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) ease-out; }
.typo-cover {
  display: grid; place-items: center; height: 100%; padding: var(--sp-4);
  background: repeating-conic-gradient(var(--surface) 0 25%, var(--surface-2) 0 50%) 0 0 / 16px 16px;
}
.typo-cover span { max-width: 100%; padding: var(--sp-1) var(--sp-3); background: var(--bg); font-weight: 700; text-align: center; }
.card-body { display: grid; gap: var(--sp-2); align-content: start; flex: 1; min-width: 0; }
.badge {
  justify-self: start; display: inline-block; padding: var(--sp-1) var(--sp-2);
  font: 700 var(--fs-label)/1.2 var(--font); background: var(--surface-2);
}
.st-in_development { color: var(--link); }
.st-coming_soon { color: var(--soon); }
.st-pre_registration { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.st-released { color: var(--on-accent); background: var(--accent); }
.st-discontinued { color: var(--muted); }
.card-name { font: 700 var(--fs-h3)/1.3 var(--font); }
.card-link {
  color: var(--text); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { outline: none; }
.card .cur { display: none; margin-right: var(--sp-2); font-size: .7em; color: var(--accent); }
.card:focus-within { --fc: var(--accent); }
.card:focus-within .cur { display: inline; }
@media (hover: hover) {
  .card:hover { --fc: var(--accent); }
  .card:hover .cur { display: inline; }
  .card:hover .cover img { transform: scale(1.04); }
}
.card-meta { font-size: var(--fs-small); color: var(--text-2); }
.card-desc {
  font-size: var(--fs-small); line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-actions {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-2);
}
/* 대표 1개: 쇼케이스 */
.showcase { display: grid; gap: var(--sp-4); padding: var(--sp-4); }
.showcase .card-name { font-size: 24px; }
.showcase .hud-rows > div, .hud-pixel > div { align-items: center; padding: var(--sp-2) 0; }
.showcase .hud-rows dt, .hud-pixel dt { font: 700 var(--fs-label)/1.4 var(--font-pixel); letter-spacing: .06em; }
.showcase .card-actions { margin-top: 0; }

/* 빈 상태 패널: 문구 위, 상반신 크롭은 패널 아랫변에 붙인다 */
.empty-screen {
  display: grid; grid-template-rows: auto 1fr; justify-items: center;
  max-width: 760px; height: 220px; padding-top: var(--sp-4);
}
.empty-msg { padding: 0 var(--sp-4); font-weight: 700; text-align: center; }
.empty-screen img { align-self: end; display: block; width: min(100%, 300px); }

/* MEET THE DUCK 아레나(크림 스크린). 버그 → 부리(먹기 프레임 기준 가로 75%·세로 43%) */
.arena {
  --duck-h: 150px; --duck-w: calc(var(--duck-h) * .795); --duck-x: var(--sp-4);
  --bug-x: calc(100cqw - 24px - 56px);
  position: relative; height: 260px; overflow: hidden; container-type: inline-size;
}
.arena::after { /* 지면 줄: 바닥에서 32px 위, 8px, ink 15% 와 투명 교대 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 32px; height: 8px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 15%, transparent) 0 8px, transparent 8px 16px);
}
.arena-duck {
  position: absolute; left: var(--duck-x); bottom: calc(40px - var(--duck-h) * .025);
  width: var(--duck-w); height: var(--duck-h);
}
.arena-duck img { position: absolute; inset: 0; width: 100%; height: 100%; }
.duck-eat, .is-chomp .duck-idle { opacity: 0; }
.is-chomp .duck-eat { opacity: 1; }
.bubble { display: none; position: absolute; left: 55%; bottom: calc(100% + var(--sp-3)); z-index: 1; }
.bubble span {
  --fill: var(--bubble); --fc: var(--ink); display: block; padding: var(--sp-1) var(--sp-3);
  font-weight: 700; color: var(--ink); white-space: nowrap;
}
.bubble::after { /* 아래 꼬리 4px 계단 */
  content: ""; position: absolute; left: var(--sp-3); top: 100%; width: 8px; height: 8px;
  background: linear-gradient(var(--ink) 0 0) 0 0 / 8px 4px no-repeat, linear-gradient(var(--ink) 0 0) 0 4px / 4px 4px no-repeat;
}
.is-fed .bubble { display: block; animation: pop var(--dur-fast) steps(2); }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
.bug-btn, .bug-still { position: absolute; bottom: 40px; }
.bug-btn {
  left: var(--bug-x); width: 56px; height: 56px; display: grid; place-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.bug-btn img, .bug-still { width: 48px; height: 48px; }
.bug-still { left: calc(var(--bug-x) + 4px); bottom: 44px; }
.bug-btn img { transition: transform var(--dur-fast) steps(2); }
.bug-btn:hover img, .bug-btn:focus-visible img { transform: translateY(-4px); }
.is-eating .bug-btn {
  transform: translate(calc(var(--duck-x) + var(--duck-w) * .75 - var(--bug-x) - 28px), calc(28px - var(--duck-h) * .545)) scale(.6);
  transition: transform var(--dur-sig) steps(8);
}
.is-eating .bug-btn img { transform: none; }
.is-chomp .bug-btn { visibility: hidden; }
.bug-done {
  position: absolute; right: var(--sp-3); top: var(--sp-3); max-width: 60%;
  font-weight: 700; color: var(--ink); text-align: right;
}
.bug-done:focus { outline: none; } /* 결과 문장(비상호작용)으로 옮긴 프로그램 포커스 — 링 대신 aria-live·포커스 이동으로 알린다 */
.dialog .text-link { margin-top: var(--sp-2); }

/* S5 게임 목록 */
.page-count { font-size: var(--fs-small); color: var(--muted); }

/* S6 게임 상세 */
.back-link { margin: calc(-1 * var(--sp-5)) 0 var(--sp-4); }
.game-hero { display: grid; gap: var(--sp-4); }
.game-banner { --bw: 4px; --fill: var(--surface-2); padding: var(--sp-2); align-self: start; }
.game-banner img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.typo-banner { height: auto; aspect-ratio: 16 / 9; }
.typo-banner span { font-size: 24px; line-height: 1.3; }
.select-panel { --fill: var(--surface); display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-5) var(--sp-4); }
.game-logo { display: block; width: auto; max-width: 100%; height: 64px; }
.game-tagline { color: var(--text-2); }
.game-cta { width: 100%; margin-top: var(--sp-2); }
.game-sec { margin-top: var(--sp-7); }
.prose p { max-width: 70ch; }
.prose p + p { margin-top: var(--sp-3); }
.features { display: grid; gap: var(--sp-2); max-width: 70ch; }
.features li { position: relative; padding-left: var(--sp-5); }
.features li::before { content: ""; position: absolute; left: var(--sp-1); top: .75em; width: 4px; height: 4px; background: var(--accent); }
.shots {
  display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
}
.shots li { flex: 0 0 87%; scroll-snap-align: start; }
.shot { --fill: var(--surface-2); display: block; padding: var(--sp-1); }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot:hover { --fc: var(--accent); }
.shot:focus-visible { outline: none; --bw: 3px; --fc: var(--focus); }
.shot-cap { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--muted); }
.link-list { display: grid; gap: var(--sp-3); }
.link-list .btn { width: 100%; }
.info-rows > div { grid-template-columns: 1fr; gap: var(--sp-1); }
.info-rows dd { overflow-wrap: anywhere; }
.updates { display: grid; gap: var(--sp-4); }
.update { --fill: var(--surface); padding: var(--sp-4); }
.update h3 { font: 700 var(--fs-h3)/1.3 var(--font); }
.update time { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-small); color: var(--muted); }
.earlier { margin-top: var(--sp-4); }
.earlier summary {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  list-style: none; cursor: pointer; color: var(--link); font-weight: 700;
}
.earlier summary::-webkit-details-marker { display: none; }
.earlier .cur { font-size: 10px; color: var(--accent); transition: transform var(--dur-fast) steps(2); }
.earlier[open] .cur { transform: rotate(90deg); }
.earlier[open] summary { margin-bottom: var(--sp-4); }

/* A4 미리보기 배너: 밝은 면, 390 에서 2줄. 배너가 있으면 사이트 헤더는 sticky 를 풀어 겹치지 않게 한다 */
.preview-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4);
  min-height: 48px; padding: var(--sp-2) var(--gutter); background: var(--text); color: var(--bg);
}
.preview-bar a { color: var(--bg); }
.preview-bar a:focus-visible { outline-color: var(--bg); }
.preview-bar a[aria-current] { font-weight: 700; }
.preview-bar nav { display: flex; gap: var(--sp-2); }
.preview-actions { display: flex; align-items: center; gap: var(--sp-4); flex-basis: 100%; }
.preview-long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preview-bar ~ .site-header { position: static; }

/* 푸터 */
.site-footer { margin-top: var(--sp-8); border-top: 1px solid var(--line-soft); padding: var(--sp-7) 0 var(--sp-5); }
.foot-grid { display: grid; gap: var(--sp-6); }
.foot-title { font: 700 13px/1.4 var(--font-pixel); letter-spacing: .06em; color: var(--muted); margin-bottom: var(--sp-2); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-biz { font-size: var(--fs-small); color: var(--text-2); }
.copyright { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--muted); }

@media (min-width: 640px) {
  .btn-row { grid-auto-flow: column; justify-content: start; }
  .not-found .btn-row { width: auto; }
  .not-found .btn, .next-row .btn, .contact-panel .btn { width: auto; }
  .contact-panel { justify-items: start; }
  .next-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link-list { display: flex; flex-wrap: wrap; }
  .link-list .btn { width: auto; }
  .preview-actions { flex-basis: auto; margin-left: auto; }
  .preview-long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 56px; --fs-h1: 40px; --fs-h3: 20px;
    --fs-body: 17px; --fs-small: 15px; --fs-label: 13px;
    --gutter: 40px; --header-h: 64px;
  }
  .logo-mark { width: 32px; height: 32px; }
  .logo-sub { display: inline; margin-left: var(--sp-2); }
  .menu { display: none; }
  .nav { display: flex; gap: var(--sp-5); margin-right: var(--sp-5); }
  .btn { min-height: 56px; }
  .btn-s { min-height: 44px; }
  .block + .block { margin-top: var(--sp-8); }
  .mascot-grid { grid-template-columns: 5fr 7fr; align-items: center; justify-items: start; }
  .mascot-img { width: 280px; height: 280px; justify-self: center; }
  .hud-rows > div { grid-template-columns: 160px 1fr; }
  .mail-big { font-size: 24px; }
  .page { padding-top: var(--sp-8); }
  .doc-grid { grid-template-columns: minmax(0, 720px) 240px; justify-content: space-between; align-items: start; }
  .toc { grid-column: 2; grid-row: 1; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; }
  .toc ol { grid-template-columns: none; }
  .doc-table th[scope="row"] { width: 160px; }
  .doc { grid-column: 1; grid-row: 1; }
  .not-found { justify-items: center; text-align: center; }
  .nf-screen { width: 480px; height: 270px; }
  .nf-screen img { width: 450px; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  /* S1 메인 */
  .section { padding-top: var(--sp-8); }
  .sec-head { margin-bottom: var(--sp-5); }
  .hero { padding-top: var(--sp-7); }
  .hero > .wrap { padding: 0 var(--gutter); }
  .cabinet { display: grid; align-items: center; max-width: 1120px; min-height: 520px; margin: 0 auto; padding: var(--sp-7); }
  .screen { grid-template-columns: 3fr 2fr; align-items: center; gap: var(--sp-7); }
  .hero-duck { grid-column: 2; grid-row: 1; width: 360px; height: 360px; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .wordmark { font-size: 44px; }
  .lead { font-size: 18px; }
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); width: auto; }
  .grid { gap: var(--sp-5); }
  .grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { padding: var(--sp-4); }
  .showcase { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--sp-6); padding: var(--sp-5); }
  .showcase .card-name { font-size: 32px; }
  /* S6 게임 상세 */
  .game-hero { grid-template-columns: 7fr 5fr; gap: var(--sp-5); }
  .typo-banner span { font-size: 48px; }
  .select-panel { padding: var(--sp-6); }
  .game-cta { width: auto; justify-self: start; }
  .game-sec { margin-top: var(--sp-8); }
  .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); overflow: visible; padding-bottom: 0; }
  .info-rows > div { grid-template-columns: 160px 1fr; gap: var(--sp-3); }
  .update { padding: var(--sp-5); }
  .arena { --duck-h: 200px; --duck-x: var(--sp-7); --bug-x: calc(var(--duck-x) + var(--duck-w) + 480px); height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .logo-mark { transition: none; }
  .btn:hover, .btn:active, a.logo:hover .logo-mark { transform: none; }
  .cover img, .bug-btn img, .is-eating .bug-btn, .earlier .cur { transition: none; }
  .card:hover .cover img, .bug-btn:hover img, .bug-btn:focus-visible img { transform: none; }
}