/* Soul Dungeon — 앱 디자인을 따른다. 토큰 출처: 앱 lib/core/design/app_theme.dart Palette (SOD-ART-001 2장 팔레트).
   바탕 = 앱 DungeonBackground(5층 '왕의 심장' #1A1024 → UI 배경 #222222 그라데이션 + 벽돌 줄눈 + 가장자리 어둡게).
   상자·버튼 = 앱 PixelBox·PixelButton(검은 외곽선 2px, 위·왼쪽 밝은 베벨, 아래·오른쪽 어두운 베벨, 버튼 아래 두께 4px).
   서체 = 앱 번들과 같은 Noto Sans KR 가변(wght 100~900, SIL OFL 1.1) — google/fonts 원본을 KS X 1001 한글 2,350자 + 사이트 사용 글자로
   서브셋한 woff2 자체 호스팅. 제목 로고는 앱 5x7 비트맵 글꼴(PixelText)을 옮긴 logo.svg. 외부 폰트 CDN 없음.
   그림 = Kenney "Tiny Dungeon"(CC0 1.0) — 앱 lib/core/art/asset_map.dart 가 쓰는 타일 그대로. */

@font-face {
  font-family: "Noto Sans KR";
  src: url("fonts/NotoSansKR-wght-subset.woff2") format("woff2-variations"),
    url("fonts/NotoSansKR-wght-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #1a1024; /* Palette.floor5 = bgTop */
  --bg-bottom: #222222; /* Palette.uiBg = bgBottom */
  --ink: #ffffff; /* Palette.text */
  --title: #f1eaff; /* Palette.title */
  --muted: #b0b0b8; /* Palette.textMuted */
  --accent: #66aaff; /* Palette.uiAccent (주 버튼 면) */
  --accent-hi: #88bdff; /* Palette.lighten(uiAccent, 0.22) */
  --accent-strong: #40669b; /* Palette.darken(uiAccent, 0.42) */
  --accent-depth: #34517c; /* Palette.darken(uiAccent, 0.55) — 버튼 두께 */
  --gold: #ffcc00; /* Palette.gold */
  --soul: #b888ff; /* Palette.soulGem */
  --boss: #6600cc; /* Palette.boss */
  --surface: #2e2e34; /* Palette.panel */
  --surface-soft: #17161c; /* Palette.inset */
  --line: #4a4a55; /* Palette.panelLine = buttonSecondary */
  --line-hi: #72727a; /* Palette.lighten(panelLine, 0.22) */
  --line-strong: #302f38; /* Palette.darken(panelLine, 0.42) */
  --line-depth: #27262f; /* Palette.darken(panelLine, 0.55) */
  --hi: #55535f; /* Palette.panelHi */
  --lo: #1b1a20; /* Palette.panelLo */
  --outline: #0b0910; /* Palette.outline */
  --shadow: 0 2px 0 var(--outline); /* AppText.pixelShadow — 번짐 없이 아래로 2 */
  --frame: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 0 -2px 0 var(--outline), 0 2px 0 var(--outline),
    -2px 0 0 var(--outline), 2px 0 0 var(--outline);
  --font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg-bottom);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
  background-color: var(--bg-bottom);
  background-image: url("brick.svg"), linear-gradient(180deg, var(--bg) 0, var(--bg-bottom) 900px);
  background-repeat: repeat, no-repeat;
}

/* 앱 DungeonBackground 의 가장자리 어둡게(RadialGradient 55% → 60% 검정) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 60%) 100%);
  z-index: 0;
}

.site-header,
main,
footer {
  position: relative;
  z-index: 1;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: var(--shadow);
}

.sprite {
  image-rendering: pixelated;
  width: 48px;
  height: 48px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- 머리·꼬리 */

.site-header {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--title);
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
  text-shadow: var(--shadow);
  white-space: nowrap;
}

.brand img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  box-shadow: var(--frame);
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.site-nav a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

main {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
}

section {
  margin: 0 0 56px;
}

footer {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 40px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

footer p {
  margin: 6px 0;
}

footer a {
  color: var(--muted);
}

/* 개인정보 처리방침 링크는 다른 링크와 구분(굵게 + 강조색) */
a.privacy-link {
  color: var(--accent);
  font-weight: 800;
}

/* ---------------------------------------------------------------- 첫 화면 */

.hero {
  padding: 36px 0 32px;
  text-align: center;
}

.hero h1 {
  margin: 0 auto 10px;
  text-shadow: none;
}

.hero h1 img {
  display: block;
  width: min(400px, 88vw);
  height: auto;
  margin: 0 auto;
}

.tagline {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: clamp(17px, 2.6vw, 20px);
  font-weight: 800;
  text-shadow: var(--shadow);
}

.badge {
  display: inline-block;
  padding: 4px 14px;
  margin: 0 0 20px;
  background: var(--surface);
  box-shadow: var(--frame);
  color: var(--soul);
  font-size: 14px;
  font-weight: 800;
}

.hero p.lead {
  color: var(--muted);
  font-size: clamp(16px, 2.4vw, 18px);
  max-width: 640px;
  margin: 0 auto 26px;
}

/* 던전 바닥 한 줄 — 검사 대 몬스터(Kenney Tiny Dungeon 타일, 앱 asset_map 매핑) */
.stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(6px, 2.4vw, 20px);
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 12px 12px 8px;
  background: var(--surface-soft);
  box-shadow: var(--frame);
}

.stage .sprite {
  width: clamp(30px, 10vw, 48px);
  height: auto;
  min-width: 0;
}

.stage .vs {
  align-self: center;
  color: var(--gold);
  font-weight: 800;
  text-shadow: var(--shadow);
}

.cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* ---------------------------------------------------------------- 버튼 (앱 PixelButton) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  margin-bottom: 6px;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 40ms;
}

/* 주 동작 = uiAccent 면. 흰 글자는 대비 2.4:1 이라 앱 규칙(밝은 면은 검은 글자)대로 outline 색 글자(8.2:1) */
.btn-primary {
  background: var(--accent);
  color: var(--outline);
  box-shadow: inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-strong), 0 -2px 0 var(--outline),
    -2px 0 0 var(--outline), 2px 0 0 var(--outline), 0 4px 0 var(--accent-depth), -2px 4px 0 var(--outline),
    2px 4px 0 var(--outline), 0 6px 0 var(--outline);
}

/* 부 동작 = buttonSecondary(panelLine) 면 + 흰 글자 */
.btn-ghost {
  background: var(--line);
  color: var(--ink);
  text-shadow: var(--shadow);
  box-shadow: inset 2px 2px 0 var(--line-hi), inset -2px -2px 0 var(--line-strong), 0 -2px 0 var(--outline),
    -2px 0 0 var(--outline), 2px 0 0 var(--outline), 0 4px 0 var(--line-depth), -2px 4px 0 var(--outline),
    2px 4px 0 var(--outline), 0 6px 0 var(--outline);
}

.btn:active {
  transform: translateY(4px);
}

.btn-primary:active {
  box-shadow: inset 2px 2px 0 var(--accent-strong), inset -2px -2px 0 var(--accent-hi), 0 -2px 0 var(--outline),
    0 2px 0 var(--outline), -2px 0 0 var(--outline), 2px 0 0 var(--outline);
}

.btn-ghost:active {
  box-shadow: inset 2px 2px 0 var(--line-strong), inset -2px -2px 0 var(--line-hi), 0 -2px 0 var(--outline),
    0 2px 0 var(--outline), -2px 0 0 var(--outline), 2px 0 0 var(--outline);
}

.btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------------------------------------------------------------- 본문 구역 */

h2 {
  font-size: clamp(23px, 3.4vw, 30px);
  margin: 0 0 8px;
  color: var(--title);
}

.section-lead {
  color: var(--muted);
  margin: 0 0 22px;
}

.loop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
}

.loop-step,
.feature-card,
.principle {
  background: var(--surface);
  box-shadow: var(--frame);
  padding: 18px;
}

.loop-step .num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  background: var(--gold);
  color: var(--outline);
  font-weight: 800;
  /* 베벨 = Palette.lighten(gold, 0.22) / Palette.darken(gold, 0.42) */
  box-shadow: inset 2px 2px 0 #ffd738, inset -2px -2px 0 #987a07, 0 -2px 0 var(--outline), 0 2px 0 var(--outline),
    -2px 0 0 var(--outline), 2px 0 0 var(--outline);
}

.loop-step h3,
.feature-card h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.loop-step p,
.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.feature-card .icons {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.feature-card .icons .sprite {
  background: var(--surface-soft);
  box-shadow: inset 2px 2px 0 var(--lo), inset -2px -2px 0 var(--hi);
  padding: 4px;
  width: 56px;
  height: 56px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chips span {
  background: var(--surface-soft);
  color: var(--title);
  padding: 1px 9px;
  font-size: 13px;
  box-shadow: 0 -2px 0 var(--outline), 0 2px 0 var(--outline), -2px 0 0 var(--outline), 2px 0 0 var(--outline);
}

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.principle strong {
  display: block;
  font-size: 17px;
  margin-bottom: 6px;
  color: var(--gold);
  text-shadow: var(--shadow);
}

.principle span {
  color: var(--muted);
  font-size: 15px;
}

/* ---------------------------------------------------------------- 지원 */

.page-title {
  font-size: clamp(28px, 4.6vw, 38px);
  margin: 12px 0 18px;
  color: var(--title);
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-list details {
  background: var(--surface);
  box-shadow: var(--frame);
  padding: 14px 18px;
}

.faq-list summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
}

.faq-list p {
  color: var(--muted);
  margin: 10px 0 0;
}

.support-form {
  display: grid;
  gap: 14px;
  max-width: 560px;
  background: var(--surface);
  box-shadow: var(--frame);
  padding: 20px;
}

.support-form label {
  display: grid;
  gap: 6px;
  font-size: 15px;
}

.support-form select,
.support-form input,
.support-form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface-soft);
  border: 2px solid var(--outline);
  border-radius: 0;
  padding: 10px 12px;
  box-shadow: inset 2px 2px 0 var(--lo);
}

.support-form .btn {
  justify-self: start;
}

.form-note {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

#form-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--gold);
}

.contact-card {
  display: inline-block;
  background: var(--surface);
  box-shadow: var(--frame);
  padding: 16px 20px;
  font-size: 17px;
}

/* ---------------------------------------------------------------- 방침·약관 */

.policy {
  background: var(--surface);
  box-shadow: var(--frame);
  padding: clamp(20px, 4vw, 40px);
  margin: 12px 0 56px;
}

.policy h1 {
  font-size: clamp(27px, 4.4vw, 38px);
  margin: 0 0 6px;
  color: var(--title);
}

.policy h2 {
  font-size: 20px;
  margin: 34px 0 10px;
  color: var(--gold);
}

.policy h3 {
  font-size: 17px;
  margin: 22px 0 8px;
  text-shadow: none;
}

.policy p,
.policy li {
  color: #ececf0;
}

.policy .meta {
  color: var(--muted);
  font-size: 14px;
}

.policy .summary {
  background: var(--surface-soft);
  box-shadow: inset 2px 2px 0 var(--lo), inset -2px -2px 0 var(--hi);
  padding: 14px 18px;
  margin: 18px 0;
}

.policy .summary ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.policy table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 15px;
}

.policy th,
.policy td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
}

.policy td:first-child {
  min-width: 7.5em;
}

.policy th {
  color: var(--gold);
  font-weight: 800;
}

/* 항목 · 내용 두 칸 표(머리줄 없음) — 첫 칸을 항목 이름으로 */
.policy table.kv td:first-child {
  color: var(--gold);
  font-weight: 800;
}

@media (max-width: 640px) {
  .site-nav {
    gap: 6px 14px;
  }

  .policy table,
  .policy thead,
  .policy tbody,
  .policy tr,
  .policy th,
  .policy td {
    display: block;
  }

  .policy thead {
    display: none;
  }

  .policy td {
    border-bottom: 0;
    padding: 3px 0;
  }

  .policy td[data-label]::before {
    content: attr(data-label) " · ";
    color: var(--gold);
    font-weight: 800;
  }

  .policy tr {
    border-bottom: 2px solid var(--line);
    padding: 8px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn {
    transition: none;
  }
}

/* 몬스터가 검사 쪽을 보게 좌우 반전 */
.sprite.flip {
  transform: scaleX(-1);
}