/*
 * 읽는 화면.
 *
 * 사용 설명서와 이용약관은 조작하는 화면이 아니라 **읽는** 화면이다. 조작 패널의 규칙
 * (촘촘한 간격, 작은 글자, 카드 격자)을 그대로 쓰면 몇 줄 읽다 덮게 된다.
 * 그래서 여기서만 줄 길이와 줄 간격을 따로 정한다.
 */

.doc {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  align-items: flex-start;
}
/* 차례는 좁아지면 스스로 위로 올라가 제 줄을 다 쓴다. */
.doc > .doc-toc { flex: 1 1 220px; max-width: 220px; }
.doc > .doc-body { flex: 999 1 420px; min-width: 0; }

/*
 * ── 차례는 **따라다니지 않는다** ──────────────────────────
 *
 * `position: sticky; top: 96px` 이었다. 옆에 세로로 설 때는 좋았는데, 줄바꿈으로 접히면
 * 차례가 본문 **위에 가로로 눕는다** -- 그 상태로 따라다니면 읽는 자리를 덮고, 뒤에 오는
 * 본문이 그 위에 겹쳐 그려져 둘 다 깨져 보인다.
 *
 * 폭을 물어 가를 수는 없다(지침 §3). 접혔는지를 CSS 가 알 방법도 없다. 그래서 따라다니기를
 * 걷었다 -- 긴 문서에서 위로 되돌아가는 일은 Home 한 번이고, 그 편의 하나 때문에 좁은
 * 화면에서 화면이 깨지는 것을 두고 볼 이유가 없다.
 */
.doc-toc { font-size: var(--t-sm); }
.doc-toc h2 {
  font-size: var(--t-xs); font-weight: 700; color: var(--gray-500);
  letter-spacing: .06em; margin: 0 0 10px;
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; }
.doc-toc li { margin-bottom: 2px; }
.doc-toc a {
  display: block; padding: 5px 10px; border-radius: 6px;
  color: var(--gray-600); text-decoration: none; line-height: 1.4;
}
.doc-toc a:hover { background: var(--gray-100); color: var(--navy-800); }

/* 한 줄이 너무 길면 다음 줄 첫 글자를 찾다가 읽던 자리를 놓친다. */
.doc-body { max-width: 76ch; min-width: 0; color: var(--gray-700); }
.doc-body h1 {
  font-size: 26px; font-weight: 700; color: var(--navy-800);
  margin: 0 0 12px; letter-spacing: -.01em;
}
.doc-body h2 {
  font-size: 19px; font-weight: 680; color: var(--navy-800);
  margin: 38px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200);
}
.doc-body h3 { font-size: var(--t-lg); font-weight: 650; color: var(--gray-700); margin: 24px 0 8px; }
.doc-body section { scroll-margin-top: 96px; }
.doc-body p { margin: 0 0 12px; line-height: 1.8; font-size: var(--t-md); word-break: keep-all; }
.doc-body ul, .doc-body ol { margin: 0 0 14px; padding-left: 22px; }
.doc-body li { line-height: 1.8; font-size: var(--t-md); margin-bottom: 6px; word-break: keep-all; }
.doc-body b { font-weight: 650; color: var(--navy-800); }
.doc-body i { font-style: normal; font-weight: 600; color: var(--blue-700); }

.doc-lead {
  font-size: var(--t-lg) !important; color: var(--gray-600);
  padding-bottom: 18px; border-bottom: 1px solid var(--gray-200); margin-bottom: 8px !important;
}

/* 번호가 붙은 절차. 몇 번째를 하고 있는지가 보여야 한다. */
.doc-steps { counter-reset: step; list-style: none; padding-left: 0; }
.doc-steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 14px 38px; margin-bottom: 0;
}
.doc-steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy-800); color: #fff;
  font-size: var(--t-xs); font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}

.doc-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: var(--t-md); }
.doc-table th, .doc-table td {
  border: 1px solid var(--gray-200); padding: 9px 12px;
  text-align: left; vertical-align: top; line-height: 1.65; word-break: keep-all;
}
.doc-table th { background: var(--gray-50); font-weight: 650; color: var(--gray-600); white-space: nowrap; }

/* 곁들이는 말과 경고. 본문과 섞이면 지나친다. */
.doc-note, .doc-warn {
  border-left: 3px solid var(--gray-300); background: var(--gray-50);
  padding: 11px 14px !important; border-radius: 0 6px 6px 0; font-size: var(--t-md) !important;
}
.doc-warn { border-left-color: var(--err-700); background: var(--err-50); color: var(--err-700); font-weight: 500; }

.doc-foot {
  margin-top: 44px !important; padding-top: 16px; border-top: 1px solid var(--gray-200);
  font-size: var(--t-sm) !important; color: var(--ink-3);
}

/* 좁은 화면에서는 차례를 위로 접는다. 본문을 밀어내면 읽을 것이 남지 않는다. */
/*
 * ── 차례와 본문은 **줄바꿈으로 갈린다** ───────────────────
 *
 * 860px 아래에서 한 칸으로 바꾸고 차례를 위로 눕히는 갈림목이 있었다(지침 §3).
 * 줄바꿈 상자로 두면 같은 일이 갈림목 없이 일어난다 -- 자리가 되면 차례가 옆에 서서
 * 따라 내려가고, 좁아지면 위로 올라가 폭을 다 쓴다.
 *
 * **붙어 다니는 것(sticky)은 옆에 설 때만 뜻이 있다.** 위로 올라간 차례가 따라다니면
 * 본문을 덮는다. 폭을 묻지 않고 가르는 길은 하나뿐이다 -- 위에 설 때는 `.doc-toc` 이
 * 제 줄을 다 쓰므로(flex-basis 100%), 그때만 붙어 다니기를 끈다.
 */

/*
 * 설명서의 그림.
 *
 * 글로 설명한 화면이 실제로 어떻게 생겼는지 옆에 두는 것이 목적이다. 그래서 테두리를 주어
 * 화면과 종이의 경계를 분명히 한다 -- 배경이 흰 화면을 흰 종이에 그냥 얹으면
 * 어디까지가 그림인지 알 수 없다.
 */
.doc-fig { margin: 14px 0 20px; }
.doc-fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--gray-200); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  background: var(--gray-50);
}
.doc-fig figcaption {
  margin-top: 8px; font-size: var(--t-sm); color: var(--gray-500);
  line-height: 1.6; word-break: keep-all;
}

/*
 * ── 차례의 두 번째 설계를 **걷었다** (2026-10-05) ───────────
 *
 * 여기에 차례를 <한 줄에 늘어놓는> 설계가 한 벌 더 있었다. 그런데 그 모양은
 * `.doc-toc .card-body` 를 전제하는데, **그 마크업이 어디에도 없다** --
 * 차례를 그리는 데는 두 곳이고(manual.html · terms.html) 둘 다 `<ol><li><a>` 다.
 *
 * 그래서 가로 배치는 한 번도 서지 않았고, 대신 그 설계의 `padding` 과 `color` 와
 * `border-bottom` 만 위의 세로 설계를 덮었다. 남은 모습은 **둘이 섞인 잡종**이었다:
 *
 *   · 세로 목록인데 `padding: 2px 0` 이라 누르는 자리가 글자 높이만큼으로 줄고
 *   · `border-radius: 6px` 는 배경이 없어 보이지 않으며
 *   · 손을 올리면 **회색 배경과 밑줄이 함께** 나온다 (버린 설계와 새 설계의 것이 하나씩)
 *
 * 마크업이 사실이다. 세로 설계만 남긴다.
 */
/* 자판으로 옮겨 다닐 때 지금 어디인지 보여야 한다. 위 설계에 없던 것이라 남긴다. */
.doc-toc a:focus-visible { outline: none; box-shadow: var(--focus); }

/* 눌러서 온 자리가 머리 밑에 숨지 않게 한다. */
[id^="sec"] { scroll-margin-top: calc(var(--head-h) + var(--s-4)); }