/* 올라봄 법적 고지 공통 스타일 — 앱 토큰(src/ui/tokens.ts)과 같은 색을 쓴다. */
:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --text: #1F2622;
  --muted: #5C645D;
  --action: #2E5E3E;
  --forest-deep: #1B3A27;
  --line: #E3E0D8;
  --warn-bg: #FFF7E6;
  --warn-line: #E8C978;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F2418;
    --surface: #17301F;
    --text: #EDF1EC;
    --muted: #AFBCB1;
    --action: #8FC7A1;
    --forest-deep: #C9E3D2;
    --line: #2C4634;
    --warn-bg: #2A2416;
    --warn-line: #6B5A2E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 96px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 720px; margin: 0 auto; }

header.doc {
  padding: 40px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.brand {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--action);
  text-decoration: none;
  margin-bottom: 12px;
}

h1 { font-size: 26px; line-height: 1.35; margin: 0 0 12px; color: var(--forest-deep); }
h2 {
  font-size: 19px;
  line-height: 1.45;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--forest-deep);
}
h3 { font-size: 16px; margin: 24px 0 8px; color: var(--text); }
h2:first-of-type { border-top: 0; padding-top: 0; }

p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 8px; }

.meta { font-size: 14px; color: var(--muted); margin: 0; }
.meta strong { color: var(--text); }

.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 24px 0 8px;
}
.summary h2 { margin-top: 0; border-top: 0; padding-top: 0; font-size: 17px; }
.summary ul { margin-bottom: 0; }

.todo {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 15px;
}
.todo > strong:first-child { display: block; margin-bottom: 6px; }

.fill { background: rgba(232, 201, 120, 0.35); padding: 0 4px; border-radius: 3px; font-weight: 600; }

.table-scroll { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--surface); font-weight: 700; }

a { color: var(--action); }
a:focus-visible, .brand:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

footer.doc {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
footer.doc a { margin-right: 14px; }

.history { font-size: 14px; color: var(--muted); }