/*
 * Yoontas 서비스 사이트(yoontas.com)의 약관, 처리방침, 지원, 404 쪽이 함께 쓰는 스타일.
 * 첫 쪽(랜딩)은 이 파일을 쓰지 않고 landing.css를 쓴다.
 * 색, 모서리, 글자 크기는 학생 앱의 디자인 토큰(apps/client/src/styles/tokens.css)에서 가져왔다.
 * 바깥에서 불러오는 글꼴, 그림, 스크립트가 없다. 글꼴은 기기에 있는 것을 쓴다.
 */

/* ----------------------------------------------------------------------
 * [초안 표시 스위치]
 * 약관과 처리방침 맨 위의 "법률 검토 전 초안이며 시행 전입니다" 알림,
 * 제목 위 "초안 · 시행 전" 표시는 draft.css의 한 줄(--draft)로 켜고 끈다.
 * 첫 쪽 바닥글의 초안 안내 한 줄도 같은 값으로 꺼지도록 스위치를 draft.css로 옮겼다
 * (landing.css도 그 파일을 불러온다). 끄는 법은 README "초안 표시를 떼는 법".
 * @import는 다른 규칙보다 앞에 있어야 한다. 이 줄 위에 규칙을 넣지 않는다.
 * -------------------------------------------------------------------- */
@import url('/draft.css');

:root {
  color-scheme: light dark;

  /* 바탕과 글자 (앱 tokens.css) */
  --bg: #f4f3ef;
  --surface: #ffffff;
  --ink: #1a1d23;
  --ink-muted: #525864;
  --line-strong: #8a8f99;
  --line: #e1ded6;

  /* 강조색과 의미색 (앱 tokens.css) */
  --accent: #2e4bd1;
  --on-accent: #ffffff;
  --accent-soft: #e9ecfa;
  --pen-red: #d3221b;
  --warn: #b3261e;
  --warn-bg: #fbe7e5;
  --hl: rgba(255, 206, 0, 0.4);
  --blank-bg: rgba(255, 206, 0, 0.32);

  /* 모서리: 시험지와 표시는 각지게, 누르는 곳은 살짝 */
  --radius-paper: 2px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-shot: 12px;

  --hairline: 1px solid var(--line);
  --edge: 1px solid var(--line-strong);
  --touch-min: 44px;

  --font-ui: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
  /* 숫자와 영어 낱말에만 쓴다. 한글은 위 글꼴로 내려간다. */
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

  --gutter: 16px;
  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171c;
    --surface: #1d2027;
    --ink: #ecebe6;
    --ink-muted: #a9aeb9;
    --line-strong: #6f7684;
    --line: #30343d;

    --accent: #9aabff;
    --on-accent: #10131a;
    --accent-soft: #252a40;
    --pen-red: #ff8f86;
    --warn: #ffa59d;
    --warn-bg: #3a1f1d;
    --hl: rgba(255, 206, 0, 0.26);
    --blank-bg: rgba(255, 206, 0, 0.22);
  }
}

@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1000px) {
  :root {
    --gutter: 32px;
  }
}

/* ---------- 바탕 ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.75 var(--font-ui);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
table {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--surface);
  border-radius: var(--radius-paper);
}

strong {
  font-weight: 700;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 건너뛰기 링크: 평소에는 화면 밖, 초점이 오면 맨 위에 나온다 */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 10;
  min-height: var(--touch-min);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

/* ---------- 머리 ---------- */

.site-head {
  background: var(--surface);
  border-bottom: var(--hairline);
}

.head-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
  padding-block: 6px;
}

.brand {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font: 700 18px/1 var(--font-ui);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand svg {
  flex: none;
  width: 26px;
  height: 26px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-inline: -10px;
}

.site-nav a {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font: 500 15px/1 var(--font-ui);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a[aria-current='page'] {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* 좁은 폰(440px 아래): 메뉴가 다섯 개가 되어("요금제"를 더했다) 한 줄에 들어가게 글자와 옆 여백을 줄인다. */
@media (max-width: 440px) {
  .site-nav ul {
    margin-inline: -5px;
  }

  .site-nav a {
    padding: 0 5px;
    font-size: 14px;
  }
}

/* ---------- 공용 조각 ---------- */

/* 시험지 머리의 두 줄 선 */
.exam-rule {
  height: 6px;
  border: 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: var(--edge);
  border-radius: var(--radius-paper);
  background: var(--surface);
  color: var(--ink);
  font: 700 13px/18px var(--font-ui);
  white-space: nowrap;
}

/* 아직 정해지지 않은 값. 눈에 띄게 노란 표시를 한다. */
.blank {
  padding: 0 2px;
  border-radius: var(--radius-paper);
  background: var(--blank-bg);
  color: var(--ink);
  font-weight: 500;
}

/* 노란 표시와 빨간 펜 밑줄: 앱의 형광펜과 펜에서 가져온 강조 */
.hl {
  background: linear-gradient(transparent 58%, var(--hl) 58%);
  white-space: nowrap;
}

.pen {
  text-decoration: underline;
  text-decoration-color: var(--pen-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* 줄이 바뀔 때 떨어지면 안 되는 말 묶음 */
.nb {
  white-space: nowrap;
}

.muted {
  color: var(--ink-muted);
}

/* ---------- 화면 사진 ---------- */

.shot {
  min-width: 0;
}

.shot img {
  width: 100%;
  border: var(--edge);
  border-radius: var(--radius-shot);
  background: #f4f3ef;
}

.shot figcaption {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

.shot-phone {
  max-width: 390px;
}

.shot-narrow {
  max-width: 412px;
}

/* ---------- 첫 쪽: 맨 위 ---------- */

.hero {
  padding-block: 40px 56px;
}

.hero-text {
  max-width: 760px;
}

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 20px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
}

.hero h1 {
  font: 700 30px/1.36 var(--font-ui);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero .lead {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.75;
}

.hero .sub {
  margin-top: 12px;
  color: var(--ink-muted);
}

/* 스토어 단추. 출시 전에는 index.html에서 주석으로 묶여 있다. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  list-style: none;
}

.store {
  min-height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}

.hero-shot {
  margin-top: 36px;
}

@media (min-width: 641px) {
  .hero {
    padding-block: 56px 72px;
  }

  .hero h1 {
    font-size: 40px;
    line-height: 1.3;
  }

  .hero .lead {
    font-size: 19px;
  }

  .hero-shot {
    margin-top: 48px;
  }
}

@media (min-width: 1000px) {
  .hero h1 {
    font-size: 46px;
  }
}

/* ---------- 첫 쪽: 구역 ---------- */

.band {
  padding-block: 56px;
  border-top: var(--hairline);
}

.band-surface {
  background: var(--surface);
}

.band h2 {
  font: 700 26px/1.4 var(--font-ui);
  letter-spacing: -0.015em;
}

.band-lead {
  max-width: 720px;
  margin-top: 12px;
  color: var(--ink-muted);
}

@media (min-width: 641px) {
  .band {
    padding-block: 80px;
  }

  .band h2 {
    font-size: 32px;
  }
}

/* 기능 구역. 번호는 시험지 선택지의 동그라미 번호 모양이다. */
.feature-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: start;
}

.num {
  width: 34px;
  height: 34px;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font: 400 19px/1 var(--font-serif);
}

.feature p {
  margin-top: 14px;
}

.points {
  margin-top: 16px;
  list-style: none;
  border-top: var(--hairline);
}

.points li {
  position: relative;
  padding: 12px 0 12px 20px;
  border-bottom: var(--hairline);
}

.points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 25px;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

.feature-media {
  margin-top: 28px;
}

.feature-note {
  color: var(--ink-muted);
  font-size: 15px;
}

/* 글과 사진이 나란한 구역 */
@media (min-width: 900px) {
  .feature-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 64px;
    align-items: center;
  }

  .feature-split .feature-media {
    margin-top: 0;
  }

  /* 사진이 왼쪽에 오는 구역. 사진 쪽을 더 넓게 준다. */
  .feature-split.flip {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .feature-split.flip .feature-text {
    order: 2;
  }

  .feature-split .shot-narrow {
    margin-inline: auto;
  }

  .feature-stack .feature-text {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 64px;
    align-items: start;
  }

  .feature-stack .feature-text .points {
    margin-top: 6px;
  }

  .feature-stack .feature-media {
    margin-top: 44px;
  }
}

/* 사진 두 장을 놓는 틀. 넓은 화면에서만 나란히 놓고, 그보다 좁으면 위아래로 쌓아 글자가 읽히게 한다. */
.pair {
  display: grid;
  gap: 28px;
}

.pair .shot-natural {
  max-width: 668px;
}

@media (min-width: 900px) {
  .pair {
    align-items: start;
    column-gap: 32px;
  }

  .pair-handoff {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  }

  .pair-archive {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
  }

  .pair .shot-phone,
  .pair .shot-natural {
    max-width: none;
  }
}

/* 기기 */
.devices {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.devices li {
  padding: 16px;
  border: var(--edge);
  border-radius: var(--radius-paper);
  background: var(--surface);
}

.band-surface .devices li {
  background: var(--bg);
}

.devices b {
  display: block;
  font-size: 18px;
  line-height: 1.4;
}

.devices span {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.55;
}

.after-list {
  margin-top: 20px;
}

@media (min-width: 900px) {
  .devices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 자주 묻는 것 */
.faq {
  max-width: 800px;
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}

.faq details {
  border-bottom: var(--hairline);
}

.faq summary {
  min-height: 56px;
  padding: 14px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: 'Q';
  flex: none;
  width: 22px;
  color: var(--accent);
  font: 700 18px/1 var(--font-serif);
}

.faq summary::after {
  content: '+';
  flex: none;
  margin-left: auto;
  color: var(--ink-muted);
  font: 400 22px/1 var(--font-ui);
}

.faq details[open] summary::after {
  content: '\2212';
}

.faq .answer {
  padding: 0 4px 20px 38px;
}

.faq .answer p + p {
  margin-top: 10px;
}

/* 맺음 */
.closing {
  display: grid;
  gap: 12px;
}

.closing .band-lead {
  margin-top: 0;
}

.btn {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}

.btn-quiet {
  background: transparent;
  color: var(--accent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* ---------- 문서 쪽(약관, 처리방침, 지원) ---------- */

.doc-top {
  padding-block: 40px 28px;
}

.doc-kicker {
  margin-bottom: 8px;
  color: var(--warn);
  font: 700 14px/1.4 var(--font-ui);
}

.doc-top h1 {
  font: 700 30px/1.35 var(--font-ui);
  letter-spacing: -0.02em;
}

.doc-top .exam-rule {
  margin-top: 20px;
}

.doc-meta {
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: 15px;
}

.doc-intro {
  max-width: 760px;
  margin-top: 16px;
}

@media (min-width: 641px) {
  .doc-top {
    padding-block: 56px 32px;
  }

  .doc-top h1 {
    font-size: 38px;
  }
}

/* 초안 알림. 맨 위 스위치(--draft)로 켜고 끈다. */
.draft-notice,
.draft-only {
  display: var(--draft);
}

.draft-notice {
  max-width: 760px;
  margin-top: 20px;
  padding: 16px 18px;
  border: 2px solid var(--pen-red);
  border-radius: var(--radius-paper);
  background: var(--warn-bg);
}

.draft-notice .draft-title {
  color: var(--warn);
  font: 700 19px/1.5 var(--font-ui);
}

.draft-notice p + p {
  margin-top: 6px;
  font-size: 16px;
}

.doc-layout {
  padding-bottom: 72px;
}

.toc {
  max-width: 760px;
  padding: 16px 18px;
  border: var(--edge);
  border-radius: var(--radius-paper);
  background: var(--surface);
}

.toc h2 {
  font: 700 16px/1.5 var(--font-ui);
}

.toc ol {
  margin-top: 6px;
  list-style: none;
}

.toc a {
  min-height: var(--touch-min);
  padding-block: 6px;
  display: flex;
  align-items: center;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  text-decoration: none;
}

.toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.doc {
  max-width: 760px;
  margin-top: 36px;
}

.doc section + section {
  margin-top: 44px;
}

.doc h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  font: 700 21px/1.45 var(--font-ui);
  letter-spacing: -0.01em;
}

.doc h3 {
  margin-top: 24px;
  font: 700 17px/1.5 var(--font-ui);
}

.doc p,
.doc ol,
.doc ul,
.doc dl {
  margin-top: 12px;
}

.doc ol,
.doc ul {
  padding-left: 24px;
}

.doc li + li {
  margin-top: 6px;
}

.doc li > ol,
.doc li > ul {
  margin-top: 6px;
}

.doc .callout {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
}

.doc .callout p:first-child {
  margin-top: 0;
}

.steps {
  counter-reset: step;
  list-style: none;
}

.doc ol.steps {
  padding-left: 0;
}

.steps > li {
  position: relative;
  padding-left: 44px;
  min-height: 32px;
}

.steps > li + li {
  margin-top: 14px;
}

.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font: 400 17px/1 var(--font-serif);
}

/* 표. 좁은 화면에서는 줄마다 한 묶음으로 쌓아 옆으로 밀리지 않게 한다. */
.tbl {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

.tbl caption {
  padding-bottom: 8px;
  color: var(--ink-muted);
  font-size: 15px;
  text-align: left;
}

.tbl th,
.tbl td {
  padding: 10px 12px;
  border-bottom: var(--hairline);
  text-align: left;
  vertical-align: top;
}

.tbl thead th {
  background: var(--surface);
  border-bottom: var(--edge);
  font-weight: 700;
  white-space: nowrap;
}

.tbl tbody th {
  width: 34%;
  font-weight: 700;
}

.tbl.cols-3 tbody th {
  width: 22%;
}

@media (max-width: 640px) {
  .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tbl,
  .tbl caption,
  .tbl tbody,
  .tbl tr,
  .tbl th,
  .tbl td {
    display: block;
  }

  .tbl tbody th,
  .tbl.cols-3 tbody th {
    width: auto;
  }

  .tbl tr {
    padding: 12px 0;
    border-bottom: var(--edge);
  }

  .tbl th,
  .tbl td {
    padding: 2px 0;
    border-bottom: 0;
  }

  .tbl td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-top: 8px;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
  }
}

/* 넓은 화면: 목차를 왼쪽에 붙여 둔다 */
@media (min-width: 1040px) {
  .doc-layout.has-toc {
    display: grid;
    grid-template-columns: 260px minmax(0, 760px);
    column-gap: 56px;
    align-items: start;
  }

  .doc-layout.has-toc .toc {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 14px 16px;
  }

  .doc-layout.has-toc .toc a {
    padding-block: 4px;
    font-size: 15px;
  }

  .doc-layout.has-toc .doc {
    margin-top: 0;
  }
}

/* 지원 쪽의 연락처 묶음 */
.contact {
  margin-top: 16px;
  padding: 18px;
  border: var(--edge);
  border-radius: var(--radius-paper);
  background: var(--surface);
}

.contact dt {
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 700;
}

.contact dd {
  margin-bottom: 10px;
}

.contact dd:last-child {
  margin-bottom: 0;
}

.contact .mail {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  font: 700 20px/1.4 var(--font-ui);
}

/* ---------- 바닥 ---------- */

.site-foot {
  padding-block: 32px 40px;
  border-top: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.7;
}

.foot-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -10px;
  list-style: none;
}

.foot-nav a {
  min-height: var(--touch-min);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.foot-nav a:hover {
  text-decoration: underline;
}

.biz {
  margin-top: 12px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 14px;
}

.biz dt {
  font-weight: 700;
}

/* 누를 곳을 44px로 넓히되 줄 간격은 그대로 둔다 */
.biz a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
  color: inherit;
}

.foot-note {
  margin-top: 14px;
}

@media (min-width: 800px) {
  .biz {
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1.4fr);
    column-gap: 16px;
  }
}

/* ---------- 움직임 줄이기 ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- 인쇄 ---------- */

@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --ink: #000000;
    --ink-muted: #333333;
    --line-strong: #666666;
    --line: #bbbbbb;
    --accent: #000000;
    --on-accent: #ffffff;
    --pen-red: #000000;
    --warn: #000000;
    --warn-bg: #ffffff;
    --blank-bg: #eeeeee;
  }

  body {
    font-size: 11pt;
    line-height: 1.6;
  }

  .skip,
  .site-nav,
  .foot-nav {
    display: none;
  }

  .site-head,
  .site-foot {
    background: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .doc-layout.has-toc {
    display: block;
  }

  .doc-layout.has-toc .toc {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .toc a {
    min-height: 0;
    padding-block: 2px;
  }

  .doc,
  .toc,
  .draft-notice,
  .doc-intro {
    max-width: none;
  }

  .doc h2,
  .doc h3 {
    break-after: avoid;
  }

  .tbl tr,
  .doc li,
  .draft-notice,
  .callout {
    break-inside: avoid;
  }

  .doc section + section {
    margin-top: 24pt;
  }

  /* 바탕색은 인쇄되지 않으므로, 정해지지 않은 값은 밑줄로 표시한다 */
  .blank {
    border-bottom: 1px solid #000000;
  }
}