/*
 * 미누로그 정적 페이지 공통 스타일 — 메인(Vue 앱)과 같은 밝은 디자인.
 * 각 페이지의 <style> 뒤에 불러와서, 페이지 고유 레이아웃은 두고 색·글꼴·헤더·버튼·카드 모양을 통일한다.
 * 색 토큰은 src/style.css의 @theme과 같은 값 — 한쪽을 바꾸면 다른 쪽도 맞춰야 한다.
 * <html data-theme="memo|sun|zipteo">로 페이지 강조색을 고른다 (없으면 검정).
 */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --ink: #16181d;
  --ink-soft: #5d6470;
  --ink-faint: #767c86;
  --line: #dfe2e7;
  --rule: #16181d;
  --success: #1f8a4c;
  --red-soft: #fdeceb;
  --red-ink: #a92c25;

  /* page accent: --accent is a fill (white text on it), --accent-ink is text on the light page */
  --accent: #16181d;
  --accent-on: #ffffff;
  --accent-ink: #16181d;
  --accent-soft: #eef0f3;
  --accent-2: var(--accent);
  --accent-2-ink: var(--accent-ink);

  --font: 'Pretendard Variable', Pretendard, system-ui, -apple-system, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
[data-theme='memo'] {
  --accent: #d63b32;
  --accent-ink: #a92c25;
  --accent-soft: #fdeceb;
}
[data-theme='sun'] {
  --accent: #3f3491;
  --accent-ink: #3f3491;
  --accent-soft: #efedfb;
}
[data-theme='zipteo'] {
  --accent: #24405a;
  --accent-ink: #24405a;
  --accent-soft: #e9eef3;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  word-break: keep-all;
}
code,
kbd {
  font-family: var(--font-code);
}
:focus-visible {
  outline: 3px solid #6b5bd6;
  outline-offset: 3px;
}
::selection {
  background: var(--ink);
  color: var(--bg);
}

/* headings: heavy and tight, like the main page */
h1 {
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.2;
}
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* eyebrow line above titles — plain text now, no terminal "//" glyph */
.kicker {
  font-family: inherit;
  font-weight: 700;
  color: var(--ink-soft);
}
.kicker .glyph {
  display: none;
}

/* header */
.nav {
  background: rgba(246, 247, 249, 0.94);
  border-bottom: 2px solid var(--rule);
}
.nav-inner,
.nav-inner a,
.nav-links {
  font-family: inherit;
}
.brand,
.nav-inner .brand {
  color: var(--ink);
  font-weight: 850;
  letter-spacing: -0.04em;
  font-size: 1.25rem;
}
.brand .from {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
}
.nav-links a,
.nav-inner a {
  color: var(--ink);
  font-weight: 650;
}
.nav-links a:hover,
.nav-inner a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-links a.nav-cta {
  background: var(--accent);
  color: var(--accent-on) !important;
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 750;
}
.nav-links a.nav-cta:hover {
  text-decoration: none;
  opacity: 0.9;
}
.lang-toggle {
  font-family: inherit;
  font-weight: 700;
  border-color: var(--rule);
  border-radius: 999px;
}
.lang-toggle button {
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--ink-soft);
}
.lang-toggle button:hover {
  color: var(--ink);
}
.lang-toggle button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--bg);
}

/* buttons: pills, filled with the page accent */
.btn,
.btn-primary {
  font-family: inherit;
  font-weight: 750;
  border-radius: 999px;
}
.btn,
.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--rule);
}
.btn-ghost:hover {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--surface);
}

/* cards and panels: white on the grey page, rounder corners */
.summary,
.post-card,
.cta,
.callout,
.feature,
.usecase,
.faq,
.report,
.chrome,
.spec-box,
.toc,
.box,
.step-card {
  border-radius: 20px;
}
.post-card:hover {
  border-color: var(--rule);
}
.callout,
.notice {
  background: var(--accent-soft);
}

/* footer */
.footer {
  border-top: 2px solid var(--rule);
  font-family: inherit;
  color: var(--ink-soft);
}
.footer-inner {
  font-family: inherit;
  color: var(--ink-soft);
}
.footer a,
.footer-links a {
  color: var(--ink-soft);
}
.footer a:hover,
.footer-links a:hover {
  color: var(--ink);
}

/* keep the last card on a page off the footer rule */
main {
  padding-bottom: 56px;
}
