/* Reader for CommuLingo reference documents (참고 문헌).
   Loads on top of palette.css + style.css, so it inherits the site's tokens
   (dark-default palette, IBM Plex Sans/Pretendard, 1rem base). The long-form
   scale mirrors report.css (.report-body). */

.book {
  /* 980px matches .commulingo-page .container, so the reader shares the width of
     the rest of CommuLingo instead of sitting 180px narrower. At 1440 that cuts
     the empty margin each side from 320px to 230px. The measure grows with it,
     from 52 Korean characters a line to 73, which is long for prose; narrow this
     back toward 900px if it reads worse than the extra width is worth. */
  max-width: 980px;
  margin: 0 auto;
  /* Side padding shrinks to 12px on a phone to buy back column width. It only
     buys about two characters a line (26 to 28 at 390px) because the padding was
     already small; going below 12px gains nothing and crowds the screen edge. */
  padding-inline: clamp(12px, 2.5vw, 20px);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  line-height: 1.88;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Justify the prose so line ends align down the right edge of the column, at
   every width including a phone.
   word-break matters more than the justification itself here. Under keep-all,
   which the reader used before, no Korean 어절 can be split, so a narrow column
   has too few words per line to absorb the slack and the gaps blow out: measured
   at a 350px column the median gap was 7.4px against a 4px space, the 95th
   percentile 19px and the worst 33px. Korean prose is normally set breaking
   between characters, and word-break: normal restores that, which brings the
   same column to a 4.8px median, 6.3px p95 and 11px worst. Latin and Cyrillic
   words are still never split by normal; overflow-wrap above remains the escape
   hatch for a token longer than the line.
   Headings keep keep-all and stay ragged: they are short, mid-word breaks read
   badly in a title, and text-wrap: balance below already evens their lines. */
.book p,
.book blockquote,
.book ul li,
.book ol li {
  text-align: justify;
  word-break: normal;
}

/* The contents list is navigation, not prose. Needs .book in front to outweigh
   '.book ol li' above, which otherwise justifies wrapped entries. */
.book .doc-toc li,
.book .doc-toc p {
  text-align: start;
}

.book h1,
.book h2,
.book h3 {
  line-height: 1.35;
  word-break: keep-all;
  text-wrap: balance;
  /* Clears the collapsed contents bar, which stays pinned at the top of the
     viewport: at 1rem the heading a reader jumped to landed behind it. */
  scroll-margin-top: 5rem;
}

.book h1 {
  font-size: 1.6em;
  margin: 1.6em 0 0.6em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
}

.book article > h1:first-child {
  font-size: 1.8em;
  margin-top: 0.6em;
}

.book h2 {
  font-size: 1.3em;
  margin: 1.4em 0 0.5em;
}

.book h3 {
  font-size: 1.1em;
  margin: 0.8em 0 0.4em;
}

.book p {
  margin: 0.6em 0;
  orphans: 3;
  widows: 3;
}

.book blockquote {
  border-left: 3px solid var(--border-emphasis);
  padding-left: 1em;
  margin: 0.8em 0;
  color: var(--text-secondary);
}

/* Statistical tables in archival texts keep their columns intact and scroll
   horizontally on narrow screens. */
.book .table-scroll {
  margin: 1em 0;
}

.book .source-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: 0.88em;
  line-height: 1.5;
  overflow-wrap: normal;
}

.book .source-table caption {
  padding: 0 0 0.45em;
  color: var(--text-muted);
  font-weight: 600;
  text-align: start;
}

.book .source-table th,
.book .source-table td {
  border: 1px solid var(--border);
  padding: 0.4em 0.6em;
  text-align: start;
  vertical-align: top;
  white-space: nowrap;
}

.book .source-table th {
  background: var(--surface-raised, rgba(127, 127, 127, 0.08));
  font-weight: 600;
}

/* Dictionary links in the document body. These are the classes linkify.js
   emits; a fragment that links a name by hand writes no class, so the route
   (routes/commulingo-docs.js) stamps the same class on those before render —
   this file must never be the only thing that knows about a link kind.
   The vocabulary is the one the
   dictionaries already use (commulingo.css, which this page does not load): the
   text keeps the body colour and the rule underneath carries the affordance,
   dashed for an entry (person, glossary, event, classification) and dotted for
   another full text.
   Recolour alone was worse than nothing here. --link on the dark canvas is
   #5d7a5a, 4.30 against the canvas where body text is 18.36, so a linked name
   sitting in a list of plain ones read as the *dimmer* item rather than the
   actionable one.
   The footnote markers opt out: superscript digits are already set apart by
   position, and a rule under a [7] reads as a stray mark. */
.book article .commu-person-link,
.book article .commu-term-link,
.book article .commu-event-link,
.book article .commu-topic-link,
.book .notes-list .commu-person-link,
.book .notes-list .commu-term-link,
.book .notes-list .commu-event-link,
.book .notes-list .commu-topic-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dashed var(--link, #5d7a5a);
}

/* Another full text, or the learning course that covers the same material. */
.book article .commu-doc-link,
.book article .commu-book-link,
.book .notes-list .commu-doc-link,
.book .notes-list .commu-book-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dotted var(--link, #5d7a5a);
}

.book article a:not(.note-ref):hover,
.book .notes-list a:not(.back-link):hover {
  border-bottom-style: solid;
}

/* Footnote references in the running text. */
.note-ref {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 1;
  text-decoration: none;
  padding: 0 0.1em;
  /* 주석 끝의 ↩로 되돌아올 때의 착지점이기도 하다. 헤딩과 같은 값으로 컨트롤
     바를 비켜 준다 — 안 그러면 주석을 달았던 그 줄이 바 뒤에 숨는다. */
  scroll-margin-top: 3rem;
}

/* Footnote list at the end of the document. */
.notes-list {
  font-size: 0.85em;
  color: var(--text-muted);
  padding-left: 1.6em;
  margin: 0.5em 0;
}

.notes-list li {
  margin: 0.3em 0;
  /* 각주 번호를 눌러 내려왔을 때 그 주석이 목차 바(크럼 34px + 테두리 2px)에
     가리지 않도록 비워 두는 자리. 1rem은 바보다 낮아서 주석 첫 줄이 늘 바 뒤에
     들어갔고, 독자가 도착한 뒤 한 줄씩 더 스크롤해야 했다. 헤딩과 같은 3rem을
     써서 바 아래로 12px 여유를 두고 착지한다. */
  scroll-margin-top: 3rem;
}

.notes-list .back-link {
  text-decoration: none;
  margin-left: 0.25em;
}

/* Reader chrome: the footer added by the commulingo-doc template. The header
   is now the shared crumb bar (commulingo-crumb.css), the same one the
   dictionaries use, sitting inside the sticky control bar below. */
/* Prev/next chapter navigation on paginated documents. */
.doc-pager {
  display: flex;
  /* Centred, not baseline: the prev/next links are two lines each and the
     position label is one, so aligning on the first baseline pinned "2 / 10"
     to the top of the box beside them. */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Two lines: the direction word, then the chapter it leads to. The heading is
   the long part, so it is the one that gets the ellipsis; the direction always
   shows in full because it is what tells the reader this is a page control. */
.doc-pager a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--link);
  text-decoration: none;
  max-width: 40%;
  min-width: 0;
  /* The reader's shared rule (`.book article a:hover { border-bottom-style:
     solid }`) is written for the dictionary links, which all declare a 2px
     border already. A link that declares none gets `medium` when that style
     switches on, and medium is 3px — which is what grew this box under the
     pointer and shrank it again on the way out. Pinning the width to 0 leaves
     the shared rule with nothing to turn on; the hover cue is the heading's
     own border below. */
  border-bottom: 0 solid transparent;
}

.doc-pager-dir {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.doc-pager-heading {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Declared, and merely colourless, so hover only repaints it. */
  border-bottom: 2px solid transparent;
  transition: border-bottom-color 0.12s ease;
}

.doc-pager a:hover {
  color: var(--link-hover);
}

.doc-pager a:hover .doc-pager-heading {
  border-bottom-color: currentColor;
}

.doc-pager-next {
  text-align: right;
}

.doc-pager-pos,
.doc-toc-pos {
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.doc-pager-gap {
  max-width: 40%;
  flex: 1;
}

.doc-colophon {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.doc-colophon p {
  margin: 0 0 0.35rem;
}

/* Table of contents (auto-built from h1/h2 by docs-store; slots in after the
   title). Bordered-box idiom shared with the rest of the site. */
/* This is a <nav>, so it picks up the sticky rule in style.css and pins to the
   top of the viewport. Collapsed that is useful; expanded it was 1360px tall
   against a 900px viewport and covered the whole page, hiding the very section
   the reader had just jumped to. The list is capped to the viewport and scrolls
   inside itself, so an open contents panel can never blank the page even if the
   script below fails to run. */
/* 스크롤을 따라오는 컨트롤 바: 왼쪽은 나머지 공산링고와 같은 크럼 파셜, 오른쪽
   한 칸이 목차다. 예전에는 왼쪽이 메뉴 오버레이를 여는 ☰ 버튼이었는데, 이제
   로고·테마·언어·주 메뉴가 다른 페이지와 같은 자리(문서 맨 위)에 있다.
   sticky·테두리·배경은 <nav>였을 때 전역 규칙에서 오던 것을 이 래퍼가 직접
   갖는다. 안의 크럼은 정지시키고 자기 테두리를 벗는다 — 상자는 바깥 바 하나. */
.doc-toc {
  position: sticky;
  top: 0;
  z-index: 50;
  /* 아래 여백은 제목까지의 간격이다. 2rem은 h1 자신의 위 여백과 겹쳐 바와 제목
     사이에 빈 띠를 만들었다. */
  margin: 0.8rem 0 0.6rem;
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

/* 크럼이 남는 폭을 모두 차지하고 목차는 라벨만큼만 차지한다. */
.doc-toc .commu-crumb {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  border: 0;
  background: none;
}

/* 사전 상세 페이지는 좁은 화면에서 셋째 마디를 접는다 — 바로 아래 제목이 같은
   말을 하기 때문이다. 리더는 문서 하나를 오래 스크롤하는 화면이라 그 제목이
   화면 밖으로 나가고, 그때 '지금 무엇을 읽는 중인가'를 말해 주는 건 이 마디뿐
   이다. 그래서 여기서만 남기고, 대신 남는 폭만큼만 쓰고 잘라 낸다. */
@media (max-width: 560px) {
  .doc-toc .commu-crumb-item:nth-child(3) {
    display: flex;
  }
}

.doc-toc-nav {
  position: static;
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  border: 0;
  background: none;
}

.doc-toc summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  white-space: nowrap;
  /* 크럼과 목차 사이의 단 하나의 칸막이. */
  border-left: 1px solid var(--border);
}

/* The open list overlays the page instead of expanding in flow. In flow it made
   the document 1304px taller, which moved all 9,180 paragraphs below it: a
   no-op frame on this page costs 15.8ms and a full style recalc 16.3ms, but the
   toggle cost 46.5ms, and the difference is that shift being laid out and
   repainted. Out of flow the toggle changes no geometry outside this box.
   The panel anchors to the sticky bar, not to the summary box it hangs from, so
   it spans the whole column instead of the width of the word 목차. */
.doc-toc details[open] > .doc-toc-parts {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 0;
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.doc-toc summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.doc-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-toc-parts {
  margin-top: 0.8rem;
}

.doc-toc-parts > li + li {
  margin-top: 0.8rem;
}

.doc-toc a {
  color: var(--text-secondary);
  text-decoration: none;
}

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

.doc-toc-part {
  font-weight: 600;
}

.doc-toc-chapters {
  margin-top: 0.3rem;
  padding-left: 1rem;
  font-size: 0.92em;
  line-height: 1.8;
}

@media print {
  .doc-colophon,
  .doc-toc {
    display: none;
  }

  .book {
    max-width: none;
    padding: 0;
  }

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

  .book blockquote,
  .notes-list li {
    break-inside: avoid;
  }
}

/* 제목 바로 아래 한 줄: 이 문헌이 어느 사전 항목에 속하는지. 본문보다 작고
   흐리게 두어 읽기 시작을 막지 않고, 종류 라벨(인물·용어·사건)이 그보다 더
   흐려서 이름들이 먼저 읽힌다. 링크는 밑줄 없이 흐른다 — 여덟 개가 파랗게
   빛나면 상단 칩 줄을 자리만 옮겨 되살리는 셈이다. */
.doc-refs {
  margin: -0.2rem 0 1.8rem;
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--text-muted);
  /* 본문 문단은 양쪽 맞춤이지만 이 줄은 아니다: 이름 목록이라 어절이 길고,
     맞춤을 걸면 마지막 줄 전까지 단어 사이가 벌어져 모바일에서 특히 성글다. */
  text-align: left;
}

.doc-refs-group + .doc-refs-group::before {
  content: '·';
  margin: 0 0.5rem 0 0.15rem;
  opacity: 0.55;
}

.doc-refs-label {
  margin-right: 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* 밑줄은 늘 있되 글자보다 훨씬 옅게: 링크인 줄은 알아보되, 여덟 개가 한 줄에
   늘어서도 줄무늬로 보이지 않는다. hover에서 제 색을 찾는다. */
.doc-refs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.doc-refs a:hover,
.doc-refs a:focus-visible {
  color: var(--link);
  text-decoration-color: currentColor;
}

/* 컨트롤 바 높이. 여백은 details가 아니라 summary가 갖는다 — details에 두면
   목차 라벨이 상자 안에서 뜨고 위아래로 죽은 공간이 남는다. summary가 상자
   높이를 꽉 채우면 그 공간이 클릭 영역이 되고, 세로 여백을 0.8rem에서
   0.4rem으로 줄여 바 높이를 절반으로 낮춘다. 테두리·배경은 바깥 바 하나만
   갖는다. */
.doc-toc details {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0;
}

/* 세로 여백은 0 — 바 높이는 크럼이 정하고(commulingo-crumb.css의 34px), 목차
   칸은 그 높이를 그대로 채워 클릭 영역만 넓게 갖는다. */
.doc-toc summary {
  padding: 0 1rem;
  height: 100%;
  box-sizing: border-box;
}

/* 바가 낮아진 만큼 제목 점프 시 확보할 여백도 줄인다. 5rem은 이전 바 높이에
   맞춘 값이라 지금은 헤딩이 필요 이상으로 내려간다. */
.book h1,
.book h2,
.book h3 {
  scroll-margin-top: 3rem;
}

/* 컨트롤 바는 본문 칼럼의 좌우 여백을 상쇄해 컨테이너 폭을 꽉 채운다. 바가
   .book 안에 있어 산문용 padding을 그대로 물려받고 있었을 뿐, 좁게 둘 이유는
   없었다. 모바일에서는 이 여백이 그대로 화면 양옆의 빈 공간이 된다. */
.doc-toc {
  margin-inline: calc(-1 * clamp(12px, 2.5vw, 20px));
}

/* 제목 아래 한 줄로 붙는 저자·부제. 문헌의 신원이지 본문도 해제도 아니므로
   본문보다 한 단계 낮은 색으로 두고 양쪽 맞춤에서 빼 둔다. */
.book .doc-byline {
  margin: 0.2em 0 0;
  color: var(--text-secondary);
  font-size: 0.95em;
  text-align: start;
}

/* 엮은이 주 — 사료 본문과 눈으로 구분되어야 한다. 참고 문헌 페이지에서 해제를
   본문과 같은 모양으로 흘리면 독자가 명령서가 한 말과 이 사이트가 한 말을
   구분할 수 없다. 서식 문제가 아니라 정확성 문제라 색만 흐리게 하지 않고
   세로선과 라벨로 경계를 준다. */
.book .doc-editorial {
  margin: 1.2rem 0 1.6rem;
  padding: 0.7rem 0 0.7rem 1rem;
  border-left: 3px solid var(--btn-primary);
  background: var(--bg-inset);
  font-size: 0.92em;
  color: var(--text-secondary);
}

.book .doc-editorial p {
  margin: 0 0 0.5em;
  text-align: start;
}

.book .doc-editorial p:last-child {
  margin-bottom: 0;
}

/* 서지 항목(집필·최초 발표·저본)은 해제 문단 아래에 목록으로 붙는다. 본문의
   양쪽 맞춤을 물려받으면 'ru.wikisource.org' 같은 끊기지 않는 문자열 하나가
   한 줄을 통째로 벌려 놓으므로 목록 항목은 왼쪽 맞춤으로 되돌린다. */
.book .doc-editorial ul {
  margin: 0.6em 0 0;
  padding-left: 1.15em;
  list-style: disc;
}

.book .doc-editorial li {
  margin: 0 0 0.35em;
  text-align: start;
  word-break: break-word;
}

.book .doc-editorial li:last-child {
  margin-bottom: 0;
}

.book .doc-editorial-label {
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: none;
}