/* walnut.co.kr — 값은 tokens.css(--wn-*)만 쓴다 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wn-bg-canvas);
  color: var(--wn-text-primary);
  font: var(--wn-text-body1);
  letter-spacing: var(--wn-text-body1-tracking);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: var(--wn-text-link); }
a:focus-visible { outline: 2px solid var(--wn-focus-ring); outline-offset: 2px; border-radius: var(--wn-radius-xs); }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--wn-space-5); }

/* ---------- 헤더 ---------- */
.site-header { border-bottom: 1px solid var(--wn-border-default); background: var(--wn-bg-surface); }
.site-header .wrap { display: flex; align-items: center; min-height: 56px; }
.wordmark {
  display: inline-flex; align-items: baseline; gap: var(--wn-space-3);
  color: var(--wn-brand); text-decoration: none;
  font: var(--wn-text-title2); letter-spacing: var(--wn-text-title2-tracking);
}
.wordmark-ko { color: var(--wn-text-tertiary); font: var(--wn-text-label); }

/* ---------- 랜딩 ---------- */
.hero { background: linear-gradient(var(--wn-bg-brand-subtle), var(--wn-bg-canvas)); padding: var(--wn-space-11) 0; }
.eyebrow { margin: 0 0 var(--wn-space-3); color: var(--wn-text-link); font: var(--wn-text-label); }
.hero h1 { margin: 0 0 var(--wn-space-5); font: var(--wn-text-display); letter-spacing: var(--wn-text-display-tracking); }
.hero p { margin: 0; max-width: 34em; color: var(--wn-text-secondary); }

.status-chip {
  display: inline-block; margin-top: var(--wn-space-7);
  padding: var(--wn-space-3) var(--wn-space-5); border-radius: var(--wn-radius-full);
  background: var(--wn-action-secondary); color: var(--wn-action-secondary-text);
  font: var(--wn-text-label);
}

.features { display: grid; gap: var(--wn-space-5); padding: var(--wn-space-10) 0; margin: 0; list-style: none; }
@media (min-width: 720px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  padding: var(--wn-space-7); border-radius: var(--wn-radius-lg);
  background: var(--wn-bg-surface); border: 1px solid var(--wn-border-default);
}
.feature h2 { margin: 0 0 var(--wn-space-3); font: var(--wn-text-headline); letter-spacing: var(--wn-text-headline-tracking); }
.feature p { margin: 0; color: var(--wn-text-secondary); font: var(--wn-text-body2); }

/* ---------- 정책 문서 ---------- */
.doc { max-width: 720px; padding: var(--wn-space-9) var(--wn-space-5) var(--wn-space-11); }
.doc h1 { margin: 0 0 var(--wn-space-3); font: var(--wn-text-title1); letter-spacing: var(--wn-text-title1-tracking); }
.doc .meta { margin: 0 0 var(--wn-space-8); color: var(--wn-text-tertiary); font: var(--wn-text-caption1); }
.doc h2 { margin: var(--wn-space-9) 0 var(--wn-space-4); font: var(--wn-text-title3); letter-spacing: var(--wn-text-title3-tracking); }
.doc h3 { margin: var(--wn-space-7) 0 var(--wn-space-3); font: var(--wn-text-headline); }
.doc p, .doc li { color: var(--wn-text-secondary); }
.doc ol, .doc ul { padding-left: var(--wn-space-7); }
.doc li + li { margin-top: var(--wn-space-2); }
.doc .lead { padding: var(--wn-space-5); border-radius: var(--wn-radius-md); background: var(--wn-bg-subtle); }

.table-scroll { overflow-x: auto; margin: var(--wn-space-4) 0; }
.doc table { width: 100%; border-collapse: collapse; font: var(--wn-text-body2); }
.doc th, .doc td { padding: var(--wn-space-3) var(--wn-space-4); border: 1px solid var(--wn-border-default); text-align: left; vertical-align: top; color: var(--wn-text-secondary); }
.doc th { background: var(--wn-bg-subtle); color: var(--wn-text-primary); font: var(--wn-text-label); }

/* ---------- 푸터 ---------- */
.site-footer { border-top: 1px solid var(--wn-border-default); background: var(--wn-bg-surface); padding: var(--wn-space-8) 0 var(--wn-space-9); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--wn-space-5); margin-bottom: var(--wn-space-5); font: var(--wn-text-label); }
.footer-links a { color: var(--wn-text-secondary); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.biz-info { display: flex; flex-wrap: wrap; gap: var(--wn-space-2) var(--wn-space-5); margin: 0; font: var(--wn-text-caption1); color: var(--wn-text-tertiary); }
.biz-info div { display: flex; gap: var(--wn-space-2); }
.biz-info dt::after { content: ':'; }
.biz-info dd { margin: 0; }
.copyright { margin: var(--wn-space-5) 0 0; font: var(--wn-text-caption1); color: var(--wn-text-tertiary); }