/* ==========================================================================
   VPNVL — base.css
   Design tokens, reset, typography, layout primitives, buttons,
   header & navigation, footer, shared shells, reveal system, a11y.
   All design values live in :root. Components must not hardcode colors.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------- */
:root {
  /* --- surfaces: three-step layering + supportive tints --- */
  --bg: #ECEFFC;
  --bg-top: #F3F6FF;
  --bg-bottom: #E4EAF9;
  --panel: #F8FAFF;
  --panel-2: #DDE4F7;
  --panel-3: #FFFFFF;
  --panel-4: #EEF2FC;
  --panel-5: #F3F6FE;
  --panel-6: #F0F5FF;
  --panel-7: #F2F5FD;
  --panel-8: #F7F9FF;
  --panel-9: #EDF1FC;
  --panel-10: #FBFCFE;
  --panel-11: #F7F6FF;
  --panel-12: #F4F2FF;
  --panel-13: #E7E4FF;
  --panel-14: #F3FBF7;
  --panel-15: #E2F5EA;
  --panel-soft: rgba(255, 255, 255, 0.62);
  --panel-glass: rgba(248, 250, 255, 0.76);
  --panel-card: rgba(255, 255, 255, 0.92);
  --veil: rgba(20, 26, 46, 0.44);
  --border: #CCD5EE;
  --border-soft: rgba(204, 213, 238, 0.72);

  /* --- accents --- */
  --accent: #5F5CF0;
  --accent-dark: #3B38C4;
  --accent-mid: #7C79F5;
  --accent-2: #6A67F2;
  --accent-3: #4FAE86;
  --success: #2FA36B;
  --mint: #7FD3A6;
  --mint-soft: #8FD9B2;
  --mint-deep: #63C795;
  --forest: #14603F;
  --warn: #BE8A22;
  --error: #D34A43;

  /* --- text --- */
  --text: #141A2E;
  --text-2: #39415F;
  --muted: #5C6689;
  --on-dark: #FFFFFF;
  --ink-a: #242C50;

  /* --- announcement strip --- */
  --announce-a: #EAE7FF;
  --announce-b: #F1EEFF;
  --announce-c: #E7F5EE;
  --announce-line: rgba(95, 92, 240, 0.14);

  /* --- textures & tinted washes --- */
  --grid-line: rgba(95, 92, 240, 0.05);
  --accent-06: rgba(95, 92, 240, 0.06);
  --accent-10: rgba(95, 92, 240, 0.10);
  --accent-16: rgba(95, 92, 240, 0.16);
  --accent-24: rgba(95, 92, 240, 0.24);
  --mint-10: rgba(47, 163, 107, 0.10);
  --mint-18: rgba(47, 163, 107, 0.18);
  --mint-22: rgba(127, 211, 166, 0.22);
  --mint-28: rgba(47, 163, 107, 0.28);
  --mint-34: rgba(47, 163, 107, 0.34);
  --mint-55: rgba(47, 163, 107, 0.55);
  --forest-76: rgba(20, 96, 63, 0.76);
  --white-16: rgba(255, 255, 255, 0.16);
  --white-22: rgba(255, 255, 255, 0.22);
  --white-26: rgba(255, 255, 255, 0.26);
  --white-30: rgba(255, 255, 255, 0.30);
  --white-82: rgba(255, 255, 255, 0.82);
  --white-94: rgba(255, 255, 255, 0.94);

  /* --- gradients --- */
  --grad-body: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 38%, var(--bg) 62%, var(--bg-bottom) 100%);
  --grad-keyword: linear-gradient(94deg, var(--accent) 0%, var(--accent-2) 34%, var(--accent-3) 72%, var(--success) 100%);
  --grad-announce: linear-gradient(90deg, var(--announce-a) 0%, var(--announce-b) 48%, var(--announce-c) 100%);
  --grad-ink: linear-gradient(180deg, var(--ink-a) 0%, var(--text) 100%);
  --grad-bar: linear-gradient(180deg, var(--panel-3) 0%, var(--panel-4) 100%);
  --grad-panel-soft: linear-gradient(180deg, var(--panel-8) 0%, var(--panel-9) 100%);
  --grad-promo: linear-gradient(118deg, var(--panel-3) 0%, var(--panel-12) 52%, var(--panel-14) 100%);

  /* --- elevation --- */
  --shadow-chip: 0 10px 22px -16px rgba(59, 56, 196, 0.85), inset 0 1px 0 var(--panel-3);
  --shadow-rail: 0 14px 30px -28px rgba(59, 56, 196, 0.9), inset 0 1px 0 var(--panel-3);
  --shadow-window: 0 50px 90px -56px rgba(59, 56, 196, 0.62), 0 24px 46px -34px rgba(20, 26, 46, 0.22), inset 0 1px 0 var(--panel-3);
  --shadow-card: 0 26px 50px -34px rgba(59, 56, 196, 0.55), 0 8px 18px -14px rgba(20, 26, 46, 0.16), inset 0 1px 0 var(--white-22);
  --shadow-panel: 0 20px 40px -32px rgba(59, 56, 196, 0.7), inset 0 1px 0 var(--panel-3);
  --shadow-btn-ink: 0 18px 34px -18px rgba(20, 26, 46, 0.8), inset 0 1.5px 0 var(--white-16);
  --shadow-btn-ghost: 0 12px 26px -22px rgba(59, 56, 196, 0.9), inset 0 1px 0 var(--panel-3);
  --shadow-menu: 0 26px 44px -30px rgba(59, 56, 196, 0.9), inset 0 1px 0 var(--panel-3);

  /* --- radii --- */
  --r-xl: 24px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;

  /* --- type --- */
  --font-display: Inter, 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: Inter, 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- rhythm --- */
  --gutter: 32px;
  --wrap-max: 1240px;
  --sec-y: 76px;
  --header-h: 64px;
  --announce-h: 30px;
}

/* ---------------------------------------------------------------
   2. Reset & document
   --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 32px);
}

html.nav-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--grad-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* single texture for the whole site: a 3% square grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

/* ---------------------------------------------------------------
   3. Typography
   --------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: clamp(32px, 4.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h2 { font-size: clamp(24px, 2.6vw, 38px); }
h3 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 16px; line-height: 1.4; letter-spacing: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

.lead {
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.62;
  color: var(--muted);
}
.lead strong { color: var(--text); font-weight: 600; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-10);
  flex: 0 0 auto;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted); }

/* long unbreakable strings (subscription URLs, installer names) */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--accent-06);
  border: 1px solid var(--accent-16);
  color: var(--accent-dark);
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--panel-3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-2);
}
pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  overflow-wrap: normal;
}

.prose { max-width: 76ch; }
.prose h2 { margin: 40px 0 14px; }
.prose h3 { margin: 28px 0 10px; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--accent); }
.prose a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--accent); }

/* ---------------------------------------------------------------
   4. Layout primitives
   --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* vertical rhythm only — never shorthand padding on section shells */
.sec {
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}
.sec-tight { padding-top: calc(var(--sec-y) * 0.6); padding-bottom: calc(var(--sec-y) * 0.6); }

.page-head { padding-top: 44px; padding-bottom: 10px; }
.page-head h1 { margin-top: 12px; }
.page-head .lead { margin-top: 14px; max-width: 780px; }

.cols-2,
.cols-3 {
  display: grid;
  gap: 20px;
}
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2 > *,
.cols-3 > * { min-width: 0; }

.stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn svg { flex: 0 0 auto; }

.btn-primary {
  padding: 0 30px;
  color: var(--on-dark);
  background-image: var(--grad-ink);
  box-shadow: var(--shadow-btn-ink);
}
.btn-primary svg { width: 15px; height: 15px; opacity: 0.82; }

.btn-ghost {
  padding: 0 26px;
  color: var(--text);
  background: var(--white-94);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-btn-ghost);
}

.btn-secondary {
  padding: 0 24px;
  color: var(--accent-dark);
  background: var(--panel-3);
  border: 1px solid var(--accent-24);
  box-shadow: var(--shadow-btn-ghost);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sm { height: 40px; padding: 0 18px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------
   6. Header & navigation
   --------------------------------------------------------------- */
#site-header {
  position: relative;
  z-index: 4;
}

/* --- top announcement strip --- */
.announce {
  position: relative;
  z-index: 3;
  background-image: var(--grad-announce);
  border-bottom: 1px solid var(--announce-line);
}
.announce-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 7px var(--gutter);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
  text-decoration: none;
  text-align: center;
}
.announce-in strong { color: var(--accent-dark); font-weight: 650; }
.announce-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
}
.announce-arrow { font-family: var(--font-mono); font-size: 12px; color: var(--accent-dark); }
.announce-in:hover strong { text-decoration: underline; }

/* --- bar --- */
.site-head {
  position: relative;
  z-index: 2;
  background: var(--panel-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
}
.head-in {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  text-decoration: none;
}
.brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 8px 18px -11px rgba(59, 56, 196, 0.95);
}
.brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}

.main-nav { display: flex; align-items: center; margin-left: 2px; min-width: 0; }
.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1px;
}
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav-item svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.nav-item:hover { background: var(--accent-06); color: var(--accent-dark); }
.nav-item:hover svg { color: var(--accent); }
.nav-item[data-active],
.nav-item[aria-current="page"] {
  background: var(--accent-10);
  color: var(--accent-dark);
  font-weight: 600;
}
.nav-item[data-active] svg,
.nav-item[aria-current="page"] svg { color: var(--accent); }

.head-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.lang-wrap { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.lang-btn:hover { background: var(--accent-06); color: var(--accent-dark); }
.lang-btn svg { flex: 0 0 auto; color: var(--muted); }
.lang-btn .ico-globe { width: 14px; height: 14px; }
.lang-btn .ico-caret { width: 10px; height: 10px; }
.lang-label { white-space: nowrap; }

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 158px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-menu);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
}
.lang-menu a:hover { background: var(--accent-06); color: var(--accent-dark); }
.lang-menu a[aria-current="true"] {
  background: var(--accent-10);
  color: var(--accent-dark);
  font-weight: 600;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-24);
  background: var(--panel-3);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-chip);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.login-btn:hover { transform: translateY(-1px); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-3);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-chip);
}
.burger svg { width: 20px; height: 20px; }
.burger .ico-close { display: none; }
.burger[aria-expanded="true"] .ico-menu { display: none; }
.burger[aria-expanded="true"] .ico-close { display: block; }

/* --- mobile drawer (solid background, full-row links) --- */
.drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 3;
  display: none;
  max-height: calc(100dvh - var(--header-h) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px var(--gutter) 18px;
  background: var(--panel-3);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 30px 46px -32px rgba(59, 56, 196, 0.9);
}
.drawer.is-open { display: block; }
.drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.drawer a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}
.drawer a svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.drawer a:hover,
.drawer a:focus-visible { background: var(--accent-06); color: var(--accent-dark); }
.drawer a[data-active] { background: var(--accent-10); color: var(--accent-dark); font-weight: 600; }
.drawer-sep { height: 1px; margin: 8px 4px; background: var(--border); }
.drawer-title {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  background: var(--veil);
}
.veil.is-open { display: block; }

/* ---------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------- */
.site-foot {
  position: relative;
  z-index: 1;
  padding-top: 56px;
  padding-bottom: 26px;
  background-image: var(--grad-panel-soft);
  border-top: 1px solid var(--border);
}
.foot-in {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.15fr 0.9fr;
  gap: 32px;
}
.foot-brand .brand { margin-bottom: 12px; }
.foot-desc {
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.foot-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.foot-facts li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foot-title {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.foot-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.foot-list a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
}
.foot-list a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

.foot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--panel-3);
  border: 1px solid var(--border-soft);
  font-size: 11.5px;
  color: var(--text-2);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.foot-tags a:hover { background: var(--accent-06); border-color: var(--accent-24); color: var(--accent-dark); }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.copyright {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--muted);
  text-decoration: none;
}
.legal-links a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   8. Cards, badges, chips, dots
   --------------------------------------------------------------- */
.card {
  position: relative;
  min-width: 0;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--panel-3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
}
.card-soft {
  background: var(--panel);
  border-color: var(--border-soft);
}
.card-glass {
  background: var(--panel-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-rail);
}
.card h3 + p { margin-top: 8px; }
.card p { color: var(--text-2); font-size: 14px; line-height: 1.7; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--panel-3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-chip);
  font-size: 12px;
  color: var(--text-2);
  max-width: 100%;
}
.badge b { color: var(--text); font-weight: 600; }
.badge-mint {
  background: var(--mint-10);
  border-color: var(--mint-28);
  color: var(--forest);
}
.badge-accent {
  background: var(--accent-06);
  border-color: var(--accent-24);
  color: var(--accent-dark);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--accent-06);
  border: 1px solid var(--accent-16);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;
  color: var(--accent-dark);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 10px;
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--mint-18);
  flex: 0 0 auto;
}
.dot-accent { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-16); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(190, 138, 34, 0.18); }
.dot-muted { background: var(--border); box-shadow: none; }

/* ---------------------------------------------------------------
   9. Reveal system (visible by default; hidden state is added by JS)
   --------------------------------------------------------------- */
.reveal {
  transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.pending {
  opacity: 0;
  transform: translateY(16px);
}

/* ---------------------------------------------------------------
   10. Utilities & a11y
   --------------------------------------------------------------- */
.no-break { white-space: nowrap; }

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

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* decorative tilt helper — never applied to long content blocks */
.tilt { transform: rotate(-2deg); }

/* dynamic line-status container must never break the grid */
#server-status {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 28px;
  overflow: hidden;
  contain: paint;
}
#server-status > * { max-width: 100%; }

/* ---------------------------------------------------------------
   11. Breakpoints
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .foot-in { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot-col-lang { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .main-nav { display: none; }
  .burger { display: inline-flex; }
  .head-tools { margin-left: auto; }
  .head-in { gap: 10px; }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --sec-y: 50px;
  }
  h1 { font-size: clamp(26px, 7.4vw, 38px); }
  h2 { font-size: clamp(21px, 5.6vw, 28px); }
  h3 { font-size: clamp(17px, 4.6vw, 20px); }
  .page-head { padding-top: 30px; }
  .cols-2,
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .btn { height: 46px; font-size: 14.5px; }
  .btn-primary { padding: 0 24px; }
  .btn-ghost { padding: 0 20px; }
}

@media (max-width: 640px) {
  /* narrow screens may wrap keyword spans again */
  .no-break { white-space: normal; }
  .tilt { transform: none; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot-base { margin-top: 26px; }
  .announce-in { font-size: 11.5px; gap: 6px; padding-block: 6px; }
  .announce-arrow { display: none; }
  .brand-name { font-size: 16px; }
  .login-btn { padding: 0 14px; }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .lang-label { display: none; }
  .lang-btn { min-width: 44px; min-height: 44px; padding: 0 6px; }
  .head-tools { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal,
  .reveal.pending { opacity: 1; transform: none; transition: none; }
  .tilt { transform: none; }
}

/* lh:local-harden:start */
:is(h1,h2,h3,h4){text-wrap:balance}
:is(p,li,dd,dt,figcaption,blockquote,td,th){text-wrap:pretty}
html[lang|="ko"] body{word-break:keep-all;overflow-wrap:break-word}
html[lang|="ja"] :is(h1,h2,h3,h4){word-break:auto-phrase}
.lh-tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.lh-tscroll :is(th,td){min-width:5.5em}}
@supports (animation-timeline:scroll()){
  .float-cta{animation:lh-fab-in linear both;animation-timeline:scroll(root);animation-range:0 70vh}
}
@keyframes lh-fab-in{0%,45%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
/* lh:local-harden:end */