/* ═══ Logro 약관·정책 문서 — 랜딩과 같은 종이 위, 읽기 전용 레이아웃 ═══ */
:root {
  --paper: #FAFAF7; --surface: #FFFFFF; --surface-2: #F3F2EC;
  --line: #E7E5DE; --line-strong: #D6D3CA;
  --ink: #211F1C; --ink-2: #6E6A63; --ink-3: #A8A49B;
  --accent: #E8501E;
  --serif: "Gowun Batang", serif;
  --sans: "Gothic A1", "Apple SD Gothic Neo", sans-serif;
  --monof: "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

.lgtop {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(20px, 5vw, 40px);
  background: rgba(250, 250, 247, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.lgtop a { color: inherit; text-decoration: none; }
.wordmark { position: relative; font-family: var(--monof); font-weight: 500; font-size: 16px; letter-spacing: .14em; }
.wordmark::after {
  content: ""; position: absolute; top: -4px; right: -2px;
  width: 4px; height: 10px; background: var(--accent); border-radius: 0 0 2px 2px;
}
.lgtop nav { display: flex; gap: 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.lgtop nav a:hover, .lgtop nav a[aria-current] { color: var(--accent); }

main { max-width: 720px; margin: 0 auto; padding: clamp(40px, 8vw, 72px) 24px 100px; }
.doc-kicker { font-family: var(--monof); font-size: 11.5px; letter-spacing: .1em; color: var(--accent); }
h1 { margin: 12px 0 6px; font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 5vw, 38px); line-height: 1.35; }
.doc-meta { margin: 0 0 44px; font-family: var(--monof); font-size: 12px; color: var(--ink-3); }
.lead {
  margin: 0 0 40px; padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; font-size: 15.5px; color: var(--ink-2);
}
.lead b { color: var(--ink); }

h2 {
  margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.45;
}
h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 700; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
li::marker { color: var(--ink-3); }
strong { font-weight: 700; }
.muted { color: var(--ink-2); font-size: 14.5px; }

table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
th, td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; vertical-align: top; }
th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.tw { overflow-x: auto; }

.callout {
  margin: 0 0 18px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0;
  font-size: 14.5px; color: var(--ink-2);
}
.callout b { color: var(--ink); }

.lgfoot {
  max-width: 720px; margin: 0 auto; padding: 30px 24px 60px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}
.lgfoot a { color: var(--ink-2); text-decoration: none; }
.lgfoot a:hover { color: var(--accent); }

@media (prefers-color-scheme: dark) {
  /* 문서는 항상 종이 위 — 다크 모드에서도 대비를 유지한다 */
  body { background: var(--paper); color: var(--ink); }
}