/* ============================================================
   Wikibook Theme — Tokens & Base Typography
   WP hook equivalents:
     - Registered in functions.php via wp_enqueue_style('wb-theme', ...)
   ============================================================ */

:root {
  /* Palette */
  --wb-bg: #ffffff;
  --wb-panel: #f4f3ee;
  --wb-panel-2: #ecebe4;
  --wb-ink: #111111;
  --wb-mute: #767473;
  --wb-dim: #aaa8a3;
  --wb-line: #e4e2dc;
  --wb-line-2: #d8d6cf;
  --wb-accent: #e23c28;
  --wb-accent-hover: #c42e1c;
  --wb-success: #2a9d5c;

  /* Type */
  --wb-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Layout */
  --wb-gutter: 32px;
  --wb-radius: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--wb-font);
  background: var(--wb-panel-2);
  color: var(--wb-ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 박스형 셸 — 시안 wikibook-b의 #root (1200px 중앙 정렬, 양옆 보더, 흰 배경).
   flex 컬럼 + min-height:100vh 로 푸터를 항상 화면 하단에 고정(sticky footer). */
#page {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--wb-bg);
  border-left: 1px solid var(--wb-line);
  border-right: 1px solid var(--wb-line);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; display: block; }

/* Utility */
.wb-mono { font-family: var(--wb-mono); }
.wb-mute { color: var(--wb-mute); }
.wb-hidden { display: none !important; }
.wb-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;
}

/* Animations */
.wb-fade-in { animation: wb-fadeIn 0.2s ease; }
@keyframes wb-fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Focus */
input:focus, textarea:focus, select:focus { outline: 1px solid var(--wb-ink); outline-offset: -1px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--wb-line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--wb-mute); }
::-webkit-scrollbar-track { background: transparent; }