.reading-wrap {
  width: min(1096px, calc(100% - 96px));
  margin-inline: auto;
}
.document-intro { padding: clamp(42px, 7vw, 88px) 0 34px; border-bottom: 1px solid var(--line); }
.document-label { display: flex; align-items: center; gap: .7em; font-size: 13px; font-weight: 700; color: var(--brown); }
.document-label::before { content: ""; width: 24px; height: 2px; background: var(--coral); }
.document-label span { color: #a59587; }
.document-intro h1 { margin: 14px 0 20px; font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -.065em; font-family: var(--display); font-weight: 800; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 17px; font-size: 14px; color: var(--brown); }
.doc-meta b { margin-left: 4px; }
.draft-state { padding: 4px 12px; background: #f3e1d4; color: #793e2b; border-radius: 99px; font-weight: 750; }
.document-intro p { max-width: 68ch; color: var(--muted); line-height: 1.8; }
.document-intro .demo-note { margin-top: 5px; font-size: 14px; }
.reading-layout { display: grid; grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); align-items: start; gap: clamp(26px, 5vw, 68px); padding-block: 36px 80px; }
.contents-panel { position: sticky; top: 96px; max-height: calc(100dvh - 116px); overflow: auto; padding: 20px 16px; background: #f0eae2; border: 1px solid var(--line); border-radius: 14px; }
.contents-panel summary { display: flex; align-items: center; justify-content: space-between; padding: 6px 7px; min-height: 44px; font-size: 17px; font-weight: 750; letter-spacing: -.03em; cursor: pointer; list-style: none; }
.contents-panel summary::-webkit-details-marker { display: none; }
.contents-panel summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid var(--brown); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.contents-panel details[open] > summary::after { transform: rotate(225deg); }
.contents-panel ol { list-style: none; padding: 0; }
.contents-panel a { display: block; padding: 7px; line-height: 1.45; font-size: 14px; border-radius: 5px; }
.contents-panel a span { display: inline-block; min-width: 3.25em; font-size: .89em; font-weight: bold; color: var(--brown); }
.contents-panel a:hover, .contents-panel a:focus-visible { background: var(--milk); }
.clause { padding: 28px 0; border-bottom: 1px solid var(--line); }
.clause:first-child { padding-top: 4px; }
.clause h2 { margin-bottom: 16px; font-size: clamp(21px, 2vw, 26px); letter-spacing: -.05em; }
.clause:target h2 { color: #85412d; }
.clause p, .clause li { font-size: 16px; line-height: 1.95; color: #473a34; }
.clause p + p, .clause li + li { margin-top: 9px; }
.clause ul, .clause ol { margin: 12px 0; padding-left: 1.7em; }
.clause li::marker { color: var(--brown); }
.clause a, .doc-footer a, .after-document a { text-decoration: underline; text-underline-offset: 4px; }
.clause mark { color: #713c25; background: #f8e4cd; padding: .08em .22em; border-radius: 3px; font-weight: 650; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
#article-8 { margin-top: 20px; padding: clamp(18px, 3vw, 30px); background: #fbf2e9; border: 1px solid #dfbdab; border-radius: 14px; }
#article-8 strong { color: #6c3828; font-weight: 800; }
.after-document,.doc-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.after-document { justify-content: space-between; padding-top: 26px; }
.after-document a,.doc-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.doc-footer .wrap { justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 800px) {
  .reading-wrap { width: min(100% - 40px, 680px); }
  .reading-layout { display: block; padding-block: 24px 52px; }
  .contents-panel { position: static; max-height: none; margin-bottom: 26px; padding: 14px; }
  .contents-panel ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .contents-panel a { display: flex; align-items: center; min-height: 44px; }
  .clause { padding-block: 24px; }
}
@media (max-width: 480px) {
  .reading-wrap { width: calc(100% - 36px); }
  .document-intro { padding-block: 34px 22px; }
  .contents-panel ol { grid-template-columns: 1fr; }
  .contents-panel a { border-top: 1px solid #dfd5ca; border-radius: 0; }
  .clause p, .clause li { line-height: 1.82; }
}