/* Document pages (the business plan). The whole document is one sheet:
   the same paper-white plate the landing page uses for figures, so a
   reader who comes from the landing page recognises it as a document
   rather than a new site. Tokens come from style.css. */
.doc-page { padding: 100px var(--gutter) var(--wing); }
.doc-top {
  max-width: 860px; margin: 0 auto 16px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 13px/1.5 var(--mono); color: var(--dim);
}
.doc-top a:hover { color: var(--ink); }
.doc {
  max-width: 860px; margin: 0 auto; box-sizing: border-box;
  padding: clamp(24px, 5vw, 72px);
  background: var(--sheet); color: var(--sheet-ink);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 20px 50px -30px rgba(0, 0, 0, .9);
  font-size: 16px; line-height: 1.7;
}
.doc.ko { font-family: 'Noto Sans KR', 'Malgun Gothic', var(--display); }
.doc a { color: #1f5f5f; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31, 95, 95, .35); }
.doc a:hover { text-decoration-color: currentColor; }
.doc p { margin: 0 0 12px; max-width: 72ch; }
.doc ul { margin: 0 0 14px; padding-left: 20px; max-width: 72ch; }
.doc li { margin-bottom: 8px; }
.doc strong { font-weight: 600; }
.doc .small { font-size: 13px; color: var(--sheet-dim); }

/* cover */
.doc .eyebrow { margin: 0 0 10px; font: 13px/1.4 var(--mono); letter-spacing: .06em; color: var(--sheet-dim); }
.doc h1 {
  margin: 0 0 14px; color: var(--sheet-ink);
  font-size: clamp(40px, 6vw, 64px); line-height: .95; letter-spacing: -.01em; font-variation-settings: 'wdth' 82;
}
.doc .sub { margin: 0 0 28px; font-size: clamp(18px, 2vw, 21px); line-height: 1.45; max-width: 40ch; color: var(--sheet-ink); }
.doc .meta { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 14px; }
.doc .meta dt { margin: 0; color: var(--sheet-dim); }
.doc .meta dd { margin: 0; overflow-wrap: anywhere; }
.doc .note { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--sheet-line); font-size: 13px; line-height: 1.6; color: var(--sheet-dim); max-width: none; }

/* sections: the plan is numbered in the original, and the numbers are
   how it is cited, so they stay */
.doc h2 {
  margin: 56px 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--sheet-ink);
  color: var(--sheet-ink); font-size: clamp(24px, 3vw, 30px); line-height: 1.15; font-variation-settings: 'wdth' 88;
}
.doc h2 .num { display: inline-block; min-width: 1.6em; font: 500 15px/1 var(--mono); color: var(--sheet-dim); }
.doc h3 { margin: 32px 0 10px; color: var(--sheet-ink); font-size: 19px; line-height: 1.3; }
.doc h4 { margin: 20px 0 6px; color: #1f5f5f; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.doc h2 + h3 { margin-top: 16px; }

/* summary block and the three headline figures */
.doc .summary { margin: 0 0 18px; padding: 18px 22px; background: #e9eef0; border-radius: var(--radius); }
.doc .summary p { margin: 0; max-width: none; }
.doc .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 20px 0 24px; }
.doc .stat { border-top: 2px solid var(--sheet-ink); padding-top: 10px; }
.doc .stat .num { font-size: 30px; line-height: 1.1; font-variation-settings: 'wdth' 88; color: var(--sheet-ink); }
.doc .stat .label { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--sheet-dim); }

/* tables: hairlines, mono header, right column for money */
.doc .tbl { overflow-x: auto; margin: 12px 0 22px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.doc th, .doc td { padding: 9px 10px 9px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sheet-line); }
.doc th { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--sheet-dim); border-bottom: 1px solid var(--sheet-ink); }
.doc td:first-child { color: var(--sheet-ink); font-weight: 500; white-space: nowrap; }
.doc td.r, .doc th.r { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 13.5px; }
.doc td.w { white-space: normal; }
.doc td.r strong { font-weight: 600; }

/* figures */
.doc figure { margin: 22px 0 28px; }
.doc figure img { width: 100%; height: auto; border: 1px solid var(--sheet-line); background: #fff; }
.doc figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--sheet-dim); }

/* narrow screens */
@media (max-width: 640px) {
  .doc-page { padding-top: 24px; }
  .doc .stats { grid-template-columns: 1fr; }
  .doc .meta { grid-template-columns: 1fr; gap: 0; }
  .doc .meta dt { margin-top: 8px; }
  /* tables stack: one row becomes one block, each cell labelled by its
     column header (data-th); two-column tables keep label + text only */
  .doc table, .doc tbody { display: block; }
  .doc tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--sheet-line); }
  .doc tr:first-child { display: none; }
  .doc td { display: block; padding: 2px 0; border: 0; white-space: normal; text-align: left; font-family: inherit; font-size: 14px; }
  .doc td::before { content: attr(data-th); display: block; margin-top: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--sheet-dim); }
  .doc td:first-child::before { margin-top: 0; }
  .doc td.r { font-family: var(--mono); }
  .doc td[data-th="#"]::before { display: none; }
  .doc td[data-th="#"] { font: 500 13px/1.4 var(--mono); color: var(--sheet-dim); }
  .doc .kv td::before { display: none; }
  .doc .kv td:first-child { font-weight: 600; }
  .doc .kv td + td { padding-top: 4px; }
}

/* print: the sheet becomes the page */
@media print {
  body { background: #fff; color: var(--sheet-ink); }
  .bar, .doc-top, .foot { display: none; }
  .doc-page { padding: 0; }
  .doc { max-width: none; padding: 0; box-shadow: none; border-radius: 0; }
  .doc h2 { page-break-after: avoid; }
  .doc figure, .doc .tbl, .doc .stats, .doc .summary { page-break-inside: avoid; }
  .doc a { text-decoration: none; color: inherit; }
}