/* 405.kr 가이드 글 읽기 틀 (제안서 틀 C, 2026-09-07) — 읽기 폭 720·17px·차례. guide/*.html 66장이 부른다(목록 index 는 제외). 스웜이 썼고 클로드가 잰다. */
main.wrap {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.7;
}

main.wrap p,
main.wrap li {
  max-width: 68ch;
}

main.wrap h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

main.wrap h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin-top: 44px;
  scroll-margin-top: 80px;
}

main.wrap img,
main.wrap svg,
main.wrap table {
  max-width: 100%;
}

main.wrap table {
  display: block;
  overflow-x: auto;
}

.g-toc {
  display: none;
}

@media (min-width: 1240px) {
  .g-toc {
    display: block;
    position: fixed;
    top: 96px;
    left: calc(50% - 360px - 236px);
    width: 200px;
    font-size: 13px;
    line-height: 1.5;
    max-height: calc(100vh - 120px);
    overflow: auto;
  }

  .g-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--t-line);
  }

  .g-toc a {
    display: block;
    padding: 5px 0 5px 12px;
    color: var(--t-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
  }

  .g-toc a.is-here,
  .g-toc a:hover {
    color: var(--t-accent-t);
    border-left-color: var(--t-accent);
  }

  .g-toc-h {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--t-muted);
    margin: 0 0 8px 12px;
    font-weight: 600;
  }
}

.g-toc-m {
  display: none;
}

@media (max-width: 1239.98px) {
  .g-toc-m {
    display: block;
    margin: 18px 0 26px;
    border: 1px solid var(--t-line);
    border-radius: 12px;
    background: var(--t-surf);
  }

  .g-toc-m summary {
    padding: 12px 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  .g-toc-m summary::-webkit-details-marker {
    display: none;
  }

  .g-toc-m summary::after {
    content: "+";
    float: right;
  }

  .g-toc-m[open] summary::after {
    content: "−";
  }

  .g-toc-m ol {
    padding: 0 16px 12px 32px;
    margin: 0;
    list-style: none;
  }

  .g-toc-m li {
    margin: 6px 0;
  }

  .g-toc-m a {
    color: var(--t-link);
    text-decoration: none;
  }
}

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

/* 🔴 머리띠 폭을 <b>본문에 맞추려다 되돌렸다</b>(2026-09-08).

   처음엔 머리띠(860)가 본문(720)보다 양쪽 70px 씩 넓어 세로선이 어긋난 것을 고치려고
   머리띠를 720 으로 좁혔다. 그러자 <b>상단바 메뉴가 더 잘렸다</b> —
   쓸 수 있는 폭이 687 에서 <b>560</b> 으로 줄어 모자람이 73 → 200px 이 됐다.

   <b>메뉴 항목이 안 보이는 것은 기능 결함이고, 머리띠 세로선이 70px 어긋난 것은 모양이다.</b>
   그래서 머리띠는 사이트 공통 폭(860)으로 되돌린다. 본문 720 은 읽기 폭이라 그대로다.
   ⚠️ 다시 좁히려면 <b>내비가 720 안에 들어가는지 먼저 재라.</b> */