/*
  Azaza Match (아자아자 매치) pages under www.argozone.com/azazamatch/: one stylesheet for every page.

  The look is the company main page's (www.argozone.com, resources/company/css/company.css as of 2026-10-14,
  ARGO_WEB_HOME d57b3f7): its colors, type, spacing, header, buttons, cards and footer are copied here as values,
  not linked, so these pages keep working if the main site renames its classes or files.
  Font: the main page's own stack. It names Pretendard first but does not download it, so neither do we.
  No scripts, no web fonts, no external files: the mobile menu is a second row of the header, pure CSS.
  The ARGOZONE mark is a copy of the main page's resources/company/img/logo_mark.png (img/argozone_mark.png).
  The game keeps its own colors inside this frame (the purple the main page gives its card, the tile colors).
*/

:root {
  color-scheme: light;
  /* the company main page */
  --bg: #ffffff;
  --bg-gray: #f4f5f7;
  --ink: #111418;
  --ink-2: #3b414c;
  --muted: #6b7280;
  --line: #e5e7eb;
  --dark: #07080c;
  --footer: #0e1014;
  --accent: #2fd1bd;
  --soon: #7c5cff;
  --contact-1: #0a2b8f;
  --contact-2: #1b4fd8;
  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1200px;
  --gnb-h: 68px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(17, 20, 24, .06);
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* ours: darker shades of the main page's colors where they must be read as small text or a focus ring (WCAG AA) */
  --link: #1b4fd8;
  --focus: #0f9e8c;
  --soon-ink: #6847e8;
  --muted-on-gray: #5b6170;
  /* the game, as the main page shows it (its Aza tile and feature card) */
  --aza-1: #6a63f5;
  --aza-2: #8b5cf0;
  --coral: #f0492c;
  --coral-light: #ff8e63;
  --ice: #337df4;
  --sun-light: #ffe06a;
  --grape: #8f7bff;
  --grape-deep: #5b49c9;
  --mint-deep: #10a98a;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--gnb-h) + 20px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;      /* Korean breaks between words, not inside them */
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--contact-1); }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.hero :focus-visible, .band :focus-visible, .footer :focus-visible { outline-color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { left: 16px; color: #fff; }

/* ---------- Buttons (the main page's) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 700; font-size: 15px; line-height: 1; border: 1px solid transparent; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2a2f38; color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #e9ecf1; color: var(--ink); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- Header: the company's identity, then the game's own menu ---------- */

.gnb {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.gnb__inner { height: var(--gnb-h); display: flex; align-items: center; gap: 40px; }
.gnb__id { display: flex; align-items: center; gap: 20px; flex: none; }
.logo { display: inline-flex; align-items: center; font-weight: 900; font-size: 22px; letter-spacing: -.02em; line-height: 1; color: var(--ink); text-decoration: none; flex: none; }
.logo:hover { color: var(--ink); }
.logo__mark { width: 30px; height: 30px; flex: none; margin-right: 9px; }
.logo span { color: var(--accent); }
.logo--light, .logo--light:hover { color: #fff; }
.crumb {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding-left: 20px; border-left: 1px solid var(--line);
  font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.crumb:hover { color: var(--ink); }
.crumb img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.gnb__menu { display: flex; gap: 30px; font-size: 15px; font-weight: 600; }
.gnb__menu a { position: relative; padding: 6px 0; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.gnb__menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform .2s; }
.gnb__menu a:hover, .gnb__menu a[aria-current] { color: var(--ink); }
.gnb__menu a:hover::after, .gnb__menu a[aria-current]::after { transform: scaleX(1); }
.gnb__right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-gray); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 40px; padding: 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--muted-on-gray); text-decoration: none;
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ---------- Home: hero (the main page's dark first screen, with the game's art) ---------- */

.hero { position: relative; overflow: hidden; background: var(--dark); color: #fff; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(48% 70% at 76% 46%, rgba(106, 99, 245, .52), rgba(106, 99, 245, 0) 72%),
    radial-gradient(36% 50% at 100% 100%, rgba(47, 209, 189, .16), rgba(47, 209, 189, 0) 70%);
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center;
  min-height: 600px; padding-top: 88px; padding-bottom: 96px;
}
.eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .24em; color: var(--accent); }
.eyebrow--dark { color: var(--muted); letter-spacing: .12em; }
.hero__title { display: flex; align-items: center; gap: 20px; }
.hero__title .app-icon { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); flex: none; }
.hero h1 { margin: 0; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.12; font-weight: 900; letter-spacing: -.03em; }
.hero__alt { margin: 6px 0 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
.hero__desc { margin: 26px 0 0; max-width: 480px; font-size: 19px; line-height: 1.65; font-weight: 600; color: rgba(255, 255, 255, .86); }
/* Store buttons: one per store, so each can turn into its own link when the app is out there
   (2026-10-18). Until then a button is a span marked .is-soon: it looks like a button, does nothing,
   and says "coming soon" in a small tag. Text only: no store badge images (their brand rules). */
.hero__stores { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn--store { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .32); gap: 10px; }
a.btn--store:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.btn--store.is-soon { cursor: default; }
.btn--store.is-soon:hover { transform: none; }
.btn__soon {
  padding: 4px 8px; border-radius: 6px;
  background: var(--soon-ink); color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
}
.hero__btns { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__art { position: relative; }
.hero__art img {
  width: 100%; aspect-ratio: 1024 / 500; border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotate(-3deg);
}

/* ---------- Sections (the main page's) ---------- */

.sec { padding: 104px 0; }
.sec--gray { background: var(--bg-gray); }
.sec--tight { padding: 72px 0; }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.sec__head h2 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); font-weight: 900; letter-spacing: -.02em; line-height: 1.25; }
.sec__head p { margin: 0; color: var(--muted); font-size: 17px; }
.sec--gray .sec__head p { color: var(--muted-on-gray); }

/* The story beside the quick facts (the main page's "about" block) */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.about h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; line-height: 1.3; letter-spacing: -.03em; }
.about__lead p { margin: 22px 0 0; max-width: 540px; color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.facts { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px 14px; }
.facts h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; padding: 13px 0 13px 34px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink-2); }
.checks li:first-child { border-top: 0; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23111418' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Feature cards (the main page's service cards) */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 32px 32px; }
.card h3 { margin: 22px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }
.card p { margin: 10px 0 0; color: var(--ink-2); }
.ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.ico svg { width: 28px; height: 28px; }
.ico--coral { background: linear-gradient(180deg, var(--coral-light), var(--coral)); }
.ico--grape { background: linear-gradient(180deg, var(--grape), var(--grape-deep)); }
.ico--sun { background: linear-gradient(180deg, var(--sun-light), #ffb01f); }
.ico--mint { background: linear-gradient(180deg, #4fe3be, var(--mint-deep)); }

/* Link cards */
.links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.links a {
  display: flex; flex-direction: column; height: 100%;
  padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; background: #fff;
  transition: border-color .2s, transform .2s;
}
.links a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.links strong { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.links .sub { flex: 1; margin-top: 6px; color: var(--muted); }
.links .go { margin-top: 18px; font-size: 14px; font-weight: 700; }

/* The blue contact band (the main page's) */
.band { background: linear-gradient(120deg, var(--contact-1), var(--contact-2)); color: #fff; padding: 72px 0; }
.band__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; }
.band h2 { margin: 0; font-size: clamp(24px, 2.8vw, 32px); font-weight: 900; letter-spacing: -.02em; line-height: 1.3; }
.band p { margin: 8px 0 0; color: rgba(255, 255, 255, .82); }
.band--card { border-radius: var(--radius); padding: 44px 48px; margin-bottom: 80px; }

/* ---------- Inner pages ---------- */

.page-head { background: var(--bg-gray); padding: 72px 0 60px; }
.page-head__game { margin: 0 0 16px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--ink-2); }
.page-head__game img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.page-head h1 { margin: 0; font-size: clamp(32px, 4.4vw, 50px); font-weight: 900; letter-spacing: -.03em; line-height: 1.2; }
.page-head__desc { margin: 14px 0 0; color: var(--muted-on-gray); font-size: 18px; }
.page-head__date { margin: 20px 0 0; font-size: 16px; color: var(--ink-2); }
.page-head__date strong { color: var(--ink); font-weight: 800; }

/* A page's sections: heading on the left, content on the right */
.split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 64px; align-items: start; }
.split + .split { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--line); }
.split--stack { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.split--stack .split__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.split--stack .split__head p { margin: 0; }
.split__head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.02em; line-height: 1.3; }
.split__head p { margin: 12px 0 0; color: var(--muted); }
.split__body > :first-child { margin-top: 0; }
.split__body > p { margin: 0 0 14px; color: var(--ink-2); }
.lead { font-size: 18px; line-height: 1.7; color: var(--ink-2); margin: 0 0 40px; max-width: 860px; }
.lead strong { color: var(--ink); }

.box { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }
.box h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.box p { margin: 0 0 12px; color: var(--ink-2); }
.box p.more { margin: 16px 0 0; }

/* Numbered steps */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps > li { counter-increment: step; position: relative; padding: 4px 0 0 50px; min-height: 34px; color: var(--ink-2); }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-weight: 800; font-size: 14px;
}
.cta, .box .cta { margin: 26px 0 0; }

.ui { /* words as they appear in the app */
  padding: 1px 6px; border-radius: 6px; background: var(--bg-gray); border: 1px solid var(--line);
  color: var(--ink); font-weight: 700; font-size: .94em; white-space: nowrap;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.note { margin: 22px 0 0; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--bg-gray); color: var(--ink-2); font-size: 15px; }
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note p { margin: 0 0 8px; }
.note strong { color: var(--ink); }

ul.dots { margin: 0; padding-left: 1.2em; color: var(--ink-2); }
ul.dots li { margin: 0 0 8px; }
ul.dots li:last-child { margin-bottom: 0; }
ul.dots li::marker { color: var(--accent); }
ul.dots strong { color: var(--ink); }
.after { margin: 18px 0 0; color: var(--ink-2); }

/* Two boxes side by side */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.6; }
.tag-del { background: #ffe4e0; color: #a3200c; }
.tag-keep { background: #e3eaff; color: #1c3f9e; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: box-shadow .2s, border-color .2s; }
.faq details[open] { border-color: #d5d8de; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 19px 60px 19px 24px; font-size: 17px; font-weight: 700; line-height: 1.5; border-radius: var(--radius-sm); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-gray); color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1;
}
.faq summary:hover::after { background: #e9ecf1; }
.faq details[open] summary::after { content: "\2212"; background: var(--ink); color: #fff; }
.faq .answer { padding: 0 24px 22px; color: var(--ink-2); }
.faq .answer > :first-child { margin-top: 0; }
.faq .answer > :last-child { margin-bottom: 0; }
.faq .answer p { margin: 0 0 10px; }
.faq .answer ul.dots { margin: 0 0 10px; }

/* ---------- The privacy policy ---------- */

.doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; padding-top: 64px; padding-bottom: 104px; }
.toc { position: sticky; top: calc(var(--gnb-h) + 28px); font-size: 14px; }
.toc__title { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li { counter-increment: toc; }
.toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.45; }
.toc a::before { content: counter(toc) ". "; color: var(--muted); }
.toc a:hover { color: var(--ink); border-left-color: var(--ink); }

.doc { max-width: 800px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.doc strong { color: var(--ink); }
.doc h2 { margin: 56px 0 16px; padding-top: 36px; border-top: 1px solid var(--line); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; color: var(--ink); }
.doc h3 { margin: 32px 0 10px; font-size: 18px; font-weight: 800; line-height: 1.45; color: var(--ink); }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 16px; padding-left: 1.2em; }
.doc li { margin: 0 0 8px; }
.doc li::marker { color: var(--accent); }
.doc a, .doc .url { overflow-wrap: anywhere; }
.doc .summary { margin: 24px 0 0; padding: 22px 24px; border-radius: var(--radius-sm); background: var(--bg-gray); }
.doc .meta { color: var(--muted); font-size: 15px; }
/* An archived version's dated notice */
.notice { margin: 0 0 28px; padding: 18px 22px; border-radius: var(--radius-sm); background: #f3f0ff; border: 1px solid #ddd5ff; color: var(--ink); }
.notice p { margin: 0; }

table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0 22px; font-size: 15px; line-height: 1.65; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
tbody > tr:last-child > th, tbody > tr:last-child > td { border-bottom: 0; }
th { background: var(--bg-gray); font-weight: 700; color: var(--ink); }
td { color: var(--ink-2); }
table.kv th { width: 26%; border-right: 1px solid var(--line); }
table.list thead th:first-child, table.list td:first-child { width: 32%; border-right: 1px solid var(--line); }
table.list td:first-child { color: var(--ink); font-weight: 600; }

/* ---------- Footer (the main page's) ---------- */

.footer { background: var(--footer); color: rgba(255, 255, 255, .62); padding: 56px 0 48px; font-size: 14px; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__links a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.footer__links a:hover { color: #fff; }
.footer__links strong { font-weight: 700; color: #fff; }
.footer__info { margin-top: 26px; display: grid; gap: 6px; line-height: 1.7; }
.footer__info p { margin: 0; }
.footer__info i { display: inline-block; width: 1px; height: 11px; margin: 0 12px; background: rgba(255, 255, 255, .25); vertical-align: middle; }
.footer__info a { color: inherit; text-decoration: none; }
.footer__info a:hover { color: #fff; text-decoration: underline; }
.footer__copy { margin: 22px 0 0; color: rgba(255, 255, 255, .5); font-size: 13px; }

/* ---------- Smaller screens (the main page's breakpoints: 1024px and 760px) ---------- */

@media (max-width: 1024px) {
  .gnb__inner { gap: 28px; }
  .gnb__menu { gap: 22px; }
  .about { grid-template-columns: 1fr; gap: 40px; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .doc-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .toc { position: static; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .toc ol { border-left: 0; columns: 2; column-gap: 28px; }
  .toc a { margin-left: 0; padding: 4px 0; border-left: 0; }
}

/* The header becomes two rows: the company and the game on top, the game's menu below. */
@media (max-width: 960px) {
  .gnb__inner { height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 16px; }
  .gnb__id { grid-column: 1 / 3; grid-row: 1; height: 60px; gap: 16px; }
  .gnb__right { grid-column: 3; grid-row: 1; }
  .crumb { padding-left: 16px; }
  .gnb__menu {
    grid-column: 1 / -1; grid-row: 2;
    margin: 0 -32px; padding: 0 32px; height: 48px; align-items: stretch;
    border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
  }
  .gnb__menu::-webkit-scrollbar { display: none; }
  .gnb__menu a { display: flex; align-items: center; padding: 0; }
  html { scroll-padding-top: calc(60px + 48px + 16px); }
}

@media (max-width: 760px) {
  :root { --gnb-h: 60px; }
  .wrap { padding: 0 16px; }
  .gnb { position: static; }
  html { scroll-padding-top: 16px; }
  .gnb__menu { margin: 0 -16px; padding: 0 16px; gap: 20px; }
  .hero__inner { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding-top: 40px; padding-bottom: 64px; }
  .hero__art { order: -1; }
  .hero__art img { transform: none; }
  .hero__title { gap: 16px; }
  .hero__title .app-icon { width: 64px; height: 64px; border-radius: 16px; }
  .hero__desc { font-size: 17px; margin-top: 20px; }
  .hero__desc br { display: none; }
  .sec { padding: 72px 0; }
  .sec--tight { padding: 48px 0; }
  .sec__head { margin-bottom: 24px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 24px 22px 26px; }
  .links { grid-template-columns: 1fr; gap: 12px; }
  .links a { padding: 22px; }
  .facts { padding: 22px 22px 8px; }
  .band { padding: 56px 0; }
  .band--card { padding: 32px 24px; margin-bottom: 56px; }
  .page-head { padding: 44px 0 40px; }
  .page-head__desc { font-size: 16px; }
  .split + .split { margin-top: 48px; padding-top: 48px; }
  .lead { font-size: 17px; margin-bottom: 32px; }
  .box { padding: 22px 18px; }
  .steps > li { padding-left: 46px; }
  .pair { grid-template-columns: 1fr; }
  .faq summary { padding: 17px 54px 17px 18px; font-size: 16px; }
  .faq summary::after { right: 14px; }
  .faq .answer { padding: 0 18px 18px; }
  .doc-layout { padding-top: 28px; padding-bottom: 72px; }
  .toc { padding: 18px 20px; }
  .toc ol { columns: 1; }
  .doc h2 { margin-top: 44px; padding-top: 28px; font-size: 21px; }
  .footer__info i { display: none; }
  .footer__info p span { display: block; }
  /* A two-column table reads better as one box of labelled rows. */
  table.kv, table.kv tbody, table.kv tr, table.kv th, table.kv td,
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: auto; }
  table.kv th, table.kv td, table.list td { border: 0; }
  table.kv th, table.list td:first-child { width: auto; background: none; padding: 12px 14px 0; font-size: 13px; font-weight: 800; color: var(--ink); }
  table.list td:first-child { border-right: 0; }
  table.kv td, table.list td + td { padding: 2px 14px 12px; }
  table.kv tr + tr, table.list tbody tr + tr { border-top: 1px solid var(--line); }
  table.list thead { display: none; }
}

/* On narrow phones the game's name in the header is read, not shown: its icon stays. */
@media (max-width: 480px) {
  .gnb__menu { gap: 16px; font-size: 14px; }
  .crumb__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gnb__id { gap: 14px; }
  .crumb { padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .links a, .gnb__menu a::after, .faq details { transition: none; }
  .btn:hover, .links a:hover { transform: none; }
}

@media print {
  .gnb, .skip, .toc, .hero__btns { display: none; }
  .hero, .band { background: none; color: var(--ink); }
  .hero::before { display: none; }
  .page-head { background: none; padding: 0 0 16px; }
  .footer { background: none; color: var(--ink); padding: 16px 0 0; }
  .footer__links, .logo { display: none; }
  .doc-layout { display: block; padding: 0; }
  body { font-size: 12pt; }
}