/*
  Flutter 앱(lib/app_theme.dart)의 조형을 그대로 옮긴 시트.

  - 모서리 반경 0. 카드도 버튼도 키캡도 직각이다.
  - 입체는 아래로 떨어지는 그림자 + 위쪽 1px 흰 테두리로 낸다
    (app_theme.dart 의 elevatedShadow 와 같은 구성).
  - 배경은 ThemeBackgroundMode.depth — 세로 그라데이션 위에 48px 격자.
  - 팔레트는 ThemePaletteId.paper = FlexScheme.materialBaseline.
  - 톤 3종(light / dim / dark)은 ThemeBrightnessTone 과 짝이 맞는다.
*/

:root {
  color-scheme: light;

  --primary: #6750a4;
  --on-primary: #ffffff;
  --primary-container: #eaddff;
  --on-primary-container: #21005d;
  --secondary: #625b71;
  --secondary-container: #e8def8;
  --tertiary: #7d5260;
  --tertiary-container: #ffd8e4;

  --surface: #fef7ff;
  --surface-lowest: #ffffff;
  --surface-low: #f7f2fa;
  --surface-mid: #f3edf7;
  --surface-high: #ece6f0;
  --surface-highest: #e6e0e9;

  --ink: #1d1b20;
  --muted: #49454f;
  --outline: #79747e;
  --line: #cac4d0;

  --grid: rgba(103, 80, 164, 0.09);
  --rim: rgba(255, 255, 255, 0.72);
  --drop: rgba(21, 16, 32, 0.18);
  --drop-soft: rgba(21, 16, 32, 0.1);
  --key-edge: #c6bed3;

  --glow-a: rgba(103, 80, 164, 0.16);
  --glow-b: rgba(125, 82, 96, 0.12);
  --deck-top: #f2ebf8;
  --deck-bottom: #e4dced;
  --cta-edge: #21005d;

  --sans: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Hiragino Sans",
    "PingFang SC", "Noto Sans SC", "Noto Sans Arabic", "Segoe UI", "Avenir Next",
    system-ui, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Menlo", "Consolas",
    "Apple SD Gothic Neo", "Noto Sans KR", monospace;

  --slab: 0 6px 10px var(--drop), 0 -1px 0 var(--rim);
  --slab-lift: 0 10px 18px var(--drop), 0 -1px 0 var(--rim);
  --slab-press: 0 2px 4px var(--drop), 0 -1px 0 var(--rim);
}

/* ThemeBrightnessTone.medium — 라이트에 블렌드를 크게 얹은 중간 톤. */
[data-tone="dim"] {
  color-scheme: light;
  --surface: #ded2ee;
  --surface-lowest: #efe9f8;
  --surface-low: #d5c9e7;
  --surface-mid: #cec1e2;
  --surface-high: #c5b8db;
  --surface-highest: #bdafd4;
  --ink: #211c2b;
  --muted: #453d55;
  --outline: #6b6180;
  --line: #a89bbf;
  --key-edge: #9385ac;
  --grid: rgba(59, 40, 100, 0.12);
  --rim: rgba(255, 255, 255, 0.55);
  --drop: rgba(21, 16, 32, 0.22);
  --drop-soft: rgba(21, 16, 32, 0.13);
  --deck-top: #d0c1e6;
  --deck-bottom: #b9a8d4;
  --glow-a: rgba(103, 80, 164, 0.26);
  --glow-b: rgba(125, 82, 96, 0.16);
}

[data-tone="dark"] {
  color-scheme: dark;

  --primary: #d0bcff;
  --on-primary: #381e72;
  --primary-container: #4f378b;
  --on-primary-container: #eaddff;
  --secondary: #ccc2dc;
  --secondary-container: #4a4458;
  --tertiary: #efb8c8;
  --tertiary-container: #633b48;

  --surface: #141218;
  --surface-lowest: #0e0c12;
  --surface-low: #1d1b20;
  --surface-mid: #211f26;
  --surface-high: #2b2930;
  --surface-highest: #36343b;

  --ink: #e6e0e9;
  --muted: #cac4d0;
  --outline: #938f99;
  --line: #49454f;

  --grid: rgba(208, 188, 255, 0.07);
  --rim: rgba(255, 255, 255, 0.07);
  --drop: rgba(0, 0, 0, 0.55);
  --drop-soft: rgba(0, 0, 0, 0.35);
  --key-edge: #14121a;

  --glow-a: rgba(103, 80, 164, 0.34);
  --glow-b: rgba(125, 82, 96, 0.2);
  --deck-top: #191622;
  --deck-bottom: #0c0a10;
  /* 다크에서는 onPrimaryContainer 가 밝아서 눌린 테두리로 못 쓴다. */
  --cta-edge: #3b2a63;
}

* { box-sizing: border-box; }

/*
  배경색은 html 에만 준다. body 에 주면 그 상자가 음수 z-index 인
  body::before 데크를 덮어, 본문이 짧은 페이지에서 아래쪽만 격자가 보인다.
*/
html {
  background: var(--surface);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.6 var(--sans);
}

/* 데크 — 세로 그라데이션 + 48px 격자 (Flutter _DepthGridPainter 와 같은 간격). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* 첫 레이어가 위로 온다. 격자를 글로우보다 앞에 둬야 위쪽에서 지워지지 않는다. */
  background:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 48px),
    radial-gradient(ellipse 75% 50% at 8% -8%, var(--glow-a), transparent 68%),
    radial-gradient(ellipse 60% 38% at 102% 2%, var(--glow-b), transparent 62%),
    linear-gradient(180deg, var(--deck-top) 0%, var(--surface) 55%, var(--deck-bottom) 100%);
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
  animation: rise 0.55s ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* ── 상단 바 (언어 · 톤) ─────────────────────────────── */

.chrome-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
}

.lang, .tone {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
}

.lang button, .tone button {
  appearance: none;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 0;
  background: var(--surface-high);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  min-width: 2.4rem;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  box-shadow: 0 2px 3px var(--drop-soft);
  transition: transform 0.09s ease, box-shadow 0.09s ease, color 0.15s ease,
    background 0.15s ease, border-color 0.15s ease;
}

.lang button:hover, .tone button:hover { color: var(--ink); }

.lang button:active, .tone button:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  margin-bottom: 2px;
  box-shadow: none;
}

.lang button[aria-pressed="true"], .tone button[aria-pressed="true"] {
  background: var(--primary-container);
  border-color: var(--primary);
  color: var(--on-primary-container);
}

.tone button { font-size: 0.85rem; line-height: 1; padding: 0.35rem 0.55rem; }

/* ── 표제 ────────────────────────────────────────────── */

.kicker {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}

.kicker::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  background: var(--primary);
  vertical-align: 0.02em;
}

h1 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.85rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* 커서. h1 은 i18n 이 textContent 를 갈아 끼우므로 의사요소로만 붙인다. */
body > .wrap > h1::after {
  content: "";
  display: inline-block;
  width: 0.55ch;
  height: 0.95em;
  margin-left: 0.14em;
  background: var(--primary);
  vertical-align: -0.1em;
  animation: caret 1.06s steps(1, end) infinite;
}

@keyframes caret {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.lede {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 38rem;
}

/* ── 본문 블록 ───────────────────────────────────────── */

.block { margin: 0 0 1.65rem; }

.block h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.block h2::before {
  content: "";
  flex: none;
  width: 0.3rem;
  height: 1.05rem;
  background: var(--primary);
  box-shadow: 2px 0 0 color-mix(in srgb, var(--primary) 28%, transparent);
}

.block p, .block li {
  margin: 0 0 0.65rem;
  color: var(--muted);
  max-width: 40rem;
}

.block ul {
  margin: 0 0 0.65rem;
  padding-left: 1.2rem;
}

.block a {
  color: var(--primary);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.block a:hover { color: var(--tertiary); }
.block strong { color: var(--ink); font-weight: 700; }

.updated {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── 히어로 슬랩 (문장 미리보기) ─────────────────────── */

.deckcard {
  margin: 0 0 1.75rem;
  border: 1px solid var(--line);
  background: var(--surface-low);
  box-shadow: var(--slab);
  padding: 1.1rem 1.2rem 1.15rem;
}

.deckcard-label {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--outline);
}

/* 눌러 넣은 화면 — 앱의 pressedInset 표면과 같은 방향. */
.screen {
  border: 1px solid var(--line);
  background: var(--surface-lowest);
  box-shadow: inset 0 2px 5px var(--drop), inset 0 -1px 0 var(--rim);
  padding: 0.9rem 1rem;
}

.demo {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  line-height: 1.7;
  word-break: keep-all;
}

/* 왼쪽부터 색이 차오르며 「쳐 나가는」 느낌. 글자 수와 무관하게 동작한다. */
.demo-text {
  background-image: linear-gradient(90deg, var(--ink) 50%, var(--outline) 50%);
  background-size: 210% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: typeIn 4.5s cubic-bezier(0.5, 0.05, 0.35, 1) 0.5s both;
}

@keyframes typeIn {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.demo-caret {
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  background: var(--primary);
  vertical-align: -0.14em;
  animation: caret 1.06s steps(1, end) infinite;
}

/* ── 통계 슬랩 ───────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.stat {
  border: 1px solid var(--line);
  background: var(--surface-high);
  box-shadow: 0 3px 0 var(--key-edge), 0 4px 7px var(--drop-soft);
  padding: 0.65rem 0.7rem 0.7rem;
}

.stat b {
  display: block;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.stat span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── CTA ─────────────────────────────────────────────── */

.cta-row { margin: 0 0 2rem; }

.cta {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.85rem 1.9rem;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--cta-edge), 0 9px 16px var(--drop);
  transition: transform 0.09s ease, box-shadow 0.09s ease, background 0.15s ease;
}

.cta:hover { background: color-mix(in srgb, var(--primary) 88%, var(--tertiary)); }

.cta:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--cta-edge), 0 2px 5px var(--drop);
}

.cta-note {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── 카드 격자 ───────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 0.7rem;
  margin: 0 0 1.75rem;
  counter-reset: card;
}

/* 칸 수를 고정해 3+1 같은 외톨이 줄을 막는다. */
.cards.pair { grid-template-columns: repeat(2, 1fr); }
.cards.trio { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 34rem) {
  .cards.trio { grid-template-columns: repeat(2, 1fr); }
  .cards.trio .card:last-child { grid-column: 1 / -1; }
}

/* 좁은 화면에서 2단은 한 줄에 서너 글자만 들어가 읽기 어렵다. */
@media (max-width: 27rem) {
  .cards, .cards.pair, .cards.trio { grid-template-columns: 1fr; }
  .cards.trio .card:last-child { grid-column: auto; }
}

/* 게임은 연습과 구분되도록 3차 색을 쓴다. */
.cards.trio .card::before { background: var(--tertiary); }

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-low);
  box-shadow: var(--slab);
  padding: 1rem 1.05rem 1.05rem 1.15rem;
  transition: transform 0.11s ease, box-shadow 0.11s ease, background 0.15s ease;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.card:hover {
  transform: translateY(3px);
  box-shadow: var(--slab-press);
  background: var(--surface-mid);
}

.card:hover::before { opacity: 1; }

.card h3 {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 800;
}

.cards .card h3::before {
  counter-increment: card;
  content: counter(card, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ── 키캡 (언어 목록) ────────────────────────────────── */

.keycaps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.85rem;
  padding: 0;
  list-style: none;
}

.keycaps li {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-high);
  padding: 0.34rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  box-shadow: 0 3px 0 var(--key-edge), 0 5px 8px var(--drop-soft);
  transition: transform 0.09s ease, box-shadow 0.09s ease, background 0.15s ease,
    color 0.15s ease, border-color 0.15s ease;
  cursor: default;
}

.keycaps li:hover {
  transform: translateY(3px);
  background: var(--primary-container);
  border-color: var(--primary);
  color: var(--on-primary-container);
  box-shadow: 0 0 0 var(--key-edge), 0 1px 3px var(--drop-soft);
}

/* ── 하단 내비 ───────────────────────────────────────── */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 2rem 0 0;
  padding: 0.5rem;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--surface-high);
  box-shadow: var(--slab);
}

.site-nav a {
  display: block;
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.site-nav a:hover {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--ink);
}

/* ── 개발자 사이트 띠 ────────────────────────────────── */

.pol-net {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.pol-net-dir {
  display: inline-block;
  margin-bottom: 0.6rem;
  text-decoration: none;
  color: var(--tertiary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.pol-net-dir:hover { text-decoration: underline; }

.pol-net-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
}

.pol-net-list a, .pol-net-list .is-current {
  font-size: 0.84rem;
  color: var(--muted);
  text-decoration: none;
}

.pol-net-list a:hover { color: var(--primary); }

.pol-net-list .is-current {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
}

/* ── 접근성 ──────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wrap { animation: none; }
  .demo-text { animation: none; background-position: 0 0; }
  .demo-caret, body > .wrap > h1::after { animation: none; }
  .card, .cta, .keycaps li, .lang button, .tone button { transition: none; }
}

@media (max-width: 26rem) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats li:last-child { grid-column: 1 / -1; }
}