/*
 * lameproof 책 화면 꾸밈 (reader.css) — reader.js 짝. 배포 때 lib/reader.cjs 가 끼운다.
 * 책 공통 변수(--bg --fg --fg-muted --border --accent --bg-code --sidebar-bg)를 쓰고,
 * 대문(--bg-color --text-color --border-color --card-bg)과 변수가 없을 때의 대체값을 둔다.
 * 어두운 화면은 html[data-theme="dark"]. 이모지 없음(체크 표시는 CSS 로 그린다).
 */
:root {
  --lp-bg: var(--bg, var(--bg-color, #ffffff));
  --lp-fg: var(--fg, var(--text-color, #1a1a1a));
  --lp-muted: var(--fg-muted, var(--text-secondary, #555555));
  --lp-border: var(--border, var(--border-color, #dddddd));
  --lp-accent: var(--accent, var(--link-color, #1565c0));
  --lp-soft: var(--bg-code, var(--card-bg, #f5f5f5));
  --lp-good: #1b7f1b;
  --lp-bad: #c0392b;
}
html[data-theme="dark"] {
  --lp-good: #5cc95c;
  --lp-bad: #ef7d6f;
}

/* ── 함께 풀기 ─────────────────────────────────────────── */
@media screen {
  .lp-fold-hidden { display: none !important; }
}
.lp-fold-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem 0 1rem;
}
.lp-fold-next {
  font: inherit;
  font-size: 0.95em;
  font-weight: 600;
  padding: 0.5em 1.2em;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--lp-accent);
  background: var(--lp-accent);
  color: #fff;
  cursor: pointer;
}
.lp-fold-next:hover { filter: brightness(1.08); }
.lp-fold-all, .lp-fold-back {
  font: inherit;
  font-size: 0.8em;
  padding: 0.3em 0.6em;
  border: none;
  background: none;
  color: var(--lp-muted);
  text-decoration: underline;
  cursor: pointer;
}
.lp-fold-all:hover, .lp-fold-back:hover { color: var(--lp-fg); }
@media print { .lp-fold-bar { display: none; } }

/* ── 정리 문제 ─────────────────────────────────────────── */
.lp-quiz .lp-q-hint { font-size: 0.85em; color: var(--lp-muted); margin: 0.4em 0 0.6em; }
.lp-q-choices { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 1rem; }
.lp-q-item { display: flex; flex-direction: column; }
.lp-q-btn {
  font: inherit;
  text-align: left;
  width: 100%;
  min-height: 44px;
  padding: 0.6em 0.9em;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: var(--lp-bg);
  color: var(--lp-fg);
  cursor: pointer;
  line-height: 1.55;
}
.lp-q-btn:hover:not(:disabled) { border-color: var(--lp-accent); }
.lp-q-btn:disabled { cursor: default; }
.lp-q-btn > p { margin: 0; }
.lp-q-wrong .lp-q-btn { opacity: 0.55; border-style: dashed; }
.lp-q-right .lp-q-btn { border: 2px solid var(--lp-good); opacity: 1; }
.lp-q-solved .lp-q-item:not(.lp-q-right):not(.lp-q-wrong) .lp-q-btn { opacity: 0.6; }
.lp-q-why { font-size: 0.9em; margin: 0.35em 0.2em 0.1em; line-height: 1.55; }
.lp-q-wrong .lp-q-why strong { color: var(--lp-bad); }
.lp-q-right .lp-q-why strong { color: var(--lp-good); }

/* ── 목차 패널: 독자 칸 ────────────────────────────────── */
.lp-reader-box {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.6rem 0.7rem;
  border: 1px solid var(--lp-border);
  border-radius: 8px;
  background: var(--lp-bg);
  font-size: 0.85em;
}
.lp-account { margin-bottom: 0.6rem; }
.lp-account[hidden] { display: none; }
.lp-consent { font-size: 0.82em; line-height: 1.5; color: var(--lp-muted); margin: 0 0 0.5rem; }
.lp-gbtn { min-height: 32px; font-size: 0.85em; color: var(--lp-muted); }
.lp-login-msg { font-size: 0.85em; margin-top: 0.3rem; color: var(--lp-muted); }
.lp-acct-email { font-weight: 600; word-break: break-all; }
.lp-acct-actions { display: flex; gap: 0.8rem; align-items: baseline; margin-top: 0.2rem; }
.lp-link-btn {
  font: inherit;
  padding: 0.2em 0;
  border: none;
  background: none;
  color: var(--lp-accent);
  cursor: pointer;
  text-decoration: underline;
}
.lp-link-btn.lp-small { font-size: 0.85em; color: var(--lp-muted); }
.lp-book-progress { display: flex; flex-direction: column; gap: 0.25rem; }
.lp-bar-label { font-size: 0.9em; color: var(--lp-fg); }
.lp-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--lp-soft);
  border: 1px solid var(--lp-border);
  overflow: hidden;
}
.lp-bar-fill { display: block; height: 100%; width: 0; background: var(--lp-accent); transition: width 0.3s ease; }

/* ── 목차 패널: 장·절 표시 ─────────────────────────────── */
#sidebar li.lp-ch-li { display: flex; flex-wrap: wrap; align-items: center; }
#sidebar li.lp-ch-li > a { flex: 1 1 0; min-width: 0; }
#sidebar li.lp-ch-li > ul { flex: 0 0 100%; }
#sidebar li.lp-ch-li > ul[hidden] { display: none; }
.lp-ch-count {
  float: right;
  margin-left: 0.4em;
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
#sidebar a.lp-ch-part .lp-ch-count { opacity: 1; font-weight: 600; }
#sidebar a.lp-ch-done .lp-ch-count { opacity: 1; font-weight: 600; color: var(--lp-good); }
#sidebar a.active.lp-ch-done .lp-ch-count { color: inherit; }
.lp-ch-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border: none;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  position: relative;
  color: var(--lp-muted);
}
.lp-ch-toggle:hover { background: var(--lp-soft); }
.lp-ch-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.lp-ch-toggle[aria-expanded="true"]::before { transform: translate(-50%, -30%) rotate(225deg); }
#sidebar .sidebar-toc a.lp-done,
#sidebar .sidebar-toc li.lp-quiz-line { position: relative; padding-left: 1.4em; }
#sidebar .sidebar-toc a.lp-done::before,
#sidebar .sidebar-toc li.lp-quiz-line.lp-done::before {
  content: "";
  position: absolute;
  left: 0.45em;
  top: 0.45em;
  width: 0.35em;
  height: 0.7em;
  border-right: 2px solid var(--lp-good);
  border-bottom: 2px solid var(--lp-good);
  transform: rotate(45deg);
}
#sidebar .sidebar-toc li.lp-quiz-line { font-size: 0.8em; color: var(--lp-muted); padding-top: 0.2em; padding-bottom: 0.2em; }
#sidebar .sidebar-toc li.lp-quiz-line.lp-done::before { left: 0.45em; top: 0.35em; }

/* ── 이어 읽기 띠 ──────────────────────────────────────── */
.lp-jump {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 34rem;
  margin: 0 auto;
  z-index: 1001;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: var(--lp-bg);
  color: var(--lp-fg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  font-size: 0.9rem;
  line-height: 1.5;
}
.lp-jump-sep { color: var(--lp-muted); }
.lp-jump-stay {
  font: inherit;
  padding: 0.15em 0.2em;
  border: none;
  background: none;
  color: var(--lp-accent);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ── 댓글 칸 ───────────────────────────────────────────── */
.lp-comments {
  max-width: var(--max-width, 52rem);
  margin: 2.5rem auto 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--lp-border);
  font-size: 0.95rem;
}
.lp-c-title { font-size: 1.05em; font-weight: 700; margin-bottom: 0.2rem; }
.lp-c-title.lp-c-offline { font-weight: 400; color: var(--lp-muted); font-size: 0.95em; }
.lp-c-note, .lp-c-need { font-size: 0.85em; color: var(--lp-muted); margin: 0.2rem 0 0.6rem; }
.lp-c-need { color: var(--lp-fg); }
.lp-c-form { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.lp-c-text {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  min-height: 6em;
  padding: 0.6em 0.7em;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: var(--lp-bg);
  color: var(--lp-fg);
  resize: vertical;
}
.lp-c-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.lp-c-left { font-size: 0.8em; color: var(--lp-muted); font-variant-numeric: tabular-nums; }
.lp-c-send {
  font: inherit;
  font-weight: 600;
  min-height: 40px;
  padding: 0.4em 1.2em;
  border-radius: 8px;
  border: 1px solid var(--lp-accent);
  background: var(--lp-accent);
  color: #fff;
  cursor: pointer;
}
.lp-c-send:disabled { opacity: 0.6; cursor: default; }
.lp-c-status { font-size: 0.85em; color: var(--lp-muted); min-height: 1em; }
.lp-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.3em;
  max-width: 100%;
  padding: 0.25em 0.3em 0.25em 0.6em;
  border-radius: 6px;
  background: var(--lp-soft);
  border: 1px solid var(--lp-border);
  font-size: 0.85em;
}
.lp-chip-text { overflow-wrap: anywhere; max-height: 4.8em; overflow: hidden; }
.lp-chip-x { font: inherit; border: none; background: none; cursor: pointer; color: var(--lp-muted); padding: 0 0.3em; }
.lp-c-mine { list-style: none; padding: 0; margin: 0; }
.lp-c-item { padding: 0.6rem 0; border-top: 1px solid var(--lp-border); }
.lp-c-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: baseline; font-size: 0.8em; color: var(--lp-muted); }
.lp-c-state { font-weight: 600; }
.lp-st-applied { color: var(--lp-good); }
.lp-c-q { margin: 0.3rem 0; padding: 0 0 0 0.7em; border-left: 3px solid var(--lp-border); color: var(--lp-muted); font-size: 0.9em; }
.lp-c-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 0.2rem; }
@media print { .lp-comments, .lp-jump, .lp-reader-box { display: none; } }

/* ── 절 끝 표지(보이지 않음) ──────────────────────────── */
.lp-end { height: 1px; margin: 0; padding: 0; }

/* ── 대문 카드 막대 ────────────────────────────────────── */
.lp-card-progress { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.lp-card-progress .lp-bar { flex: 1 1 auto; max-width: 12rem; }
.lp-card-progress .lp-bar-label { font-size: 0.8em; color: var(--lp-muted); white-space: nowrap; }

/* ── 휴대폰 폭 ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .lp-fold-next { flex: 1 1 auto; }
  .lp-comments { margin-top: 2rem; }
  .lp-c-row { flex-wrap: wrap; }
  .lp-c-send { flex: 1 1 auto; }
  .lp-jump { font-size: 0.85rem; }
}

/* ── 읽음 되돌리기 (2026-10-29) ───────────────────────────── */
.lp-fold-bar [hidden], .lp-read-row[hidden] { display: none !important; }
#sidebar .sidebar-toc li { position: relative; }
#sidebar .sidebar-toc a.lp-done.lp-tg::before { display: none; }
#sidebar .sidebar-toc button.lp-unread {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  height: 1.6em;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  z-index: 1;
}
#sidebar .sidebar-toc button.lp-unread::before {
  content: "";
  position: absolute;
  left: 0.55em;
  top: 0.4em;
  width: 0.35em;
  height: 0.7em;
  border-right: 2px solid var(--lp-good);
  border-bottom: 2px solid var(--lp-good);
  transform: rotate(45deg);
}
#sidebar .sidebar-toc button.lp-unread:hover { background: var(--lp-soft); }
#sidebar .sidebar-toc button.lp-unread:hover::before { border-color: var(--lp-muted); }
.lp-read-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 2rem 0 1rem;
  font-size: 0.85em;
  color: var(--lp-muted);
}
.lp-read-row.lp-read-on .lp-read-msg::before { content: "✓ "; color: var(--lp-good); }
.lp-read-btn {
  font: inherit;
  padding: 0.25em 0.7em;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.lp-read-btn:hover { color: var(--lp-fg); }
@media print { .lp-read-row { display: none; } }
.lp-q-again {
  font: inherit;
  font-size: 0.8em;
  padding: 0.25em 0.7em;
  margin: -0.4rem 0 1rem;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  background: none;
  color: var(--lp-muted);
  cursor: pointer;
}
.lp-q-again:hover { color: var(--lp-fg); }
.lp-quiz [hidden] { display: none !important; }
@media print { .lp-q-again { display: none; } }

/* ── 책 안 검색 (2026-10-29) ─────────────────────────────── */
.lp-search { margin: 0 0 0.8rem; font-size: 0.85em; }
.lp-s-row { display: flex; gap: 0.4rem; align-items: stretch; }
.lp-s-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* 휴대폰에서 칸을 누를 때 화면이 확대되지 않게 */
  padding: 0.35em 0.6em;
  min-height: 36px;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  background: var(--lp-bg);
  color: var(--lp-fg);
}
.lp-s-input:focus { outline: 2px solid var(--lp-accent); outline-offset: -1px; }
.lp-s-scope {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.9em;
  padding: 0 0.3em;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  background: var(--lp-bg);
  color: var(--lp-fg);
}
.lp-s-status { margin: 0.4rem 0 0; color: var(--lp-muted); font-size: 0.9em; }
.lp-s-status[hidden], .lp-s-results[hidden] { display: none; }
#sidebar ol.lp-s-results, ol.lp-s-results {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--lp-border);
}
.lp-s-results > li { margin: 0; padding: 0; }
.lp-s-results > li.lp-s-book { font-weight: 700; padding: 0.5em 0.2em 0.2em; color: var(--lp-fg); }
.lp-s-results > li.lp-s-more { padding: 0.5em 0.2em; color: var(--lp-muted); font-size: 0.9em; }
#sidebar a.lp-s-hit, a.lp-s-hit {
  display: block;
  padding: 0.45em 0.3em;
  border-bottom: 1px solid var(--lp-border);
  color: var(--lp-fg);
  text-decoration: none;
  font-size: 1em;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
a.lp-s-hit:hover, a.lp-s-hit:focus { background: var(--lp-soft); }
.lp-s-title { display: block; font-weight: 600; color: var(--lp-accent); }
.lp-s-sub { font-weight: 500; color: var(--lp-fg); }
/* 같은 자리가 잇달아 나와 한 줄로 묶은 결과의 곳 수(「2곳」) */
.lp-s-n { display: inline-block; margin-left: 0.45em; padding: 0 0.45em; border: 1px solid var(--lp-border); border-radius: 999px; font-size: 0.8em; font-weight: 500; line-height: 1.5; color: var(--lp-muted); vertical-align: 0.05em; white-space: nowrap; }
#sidebar a.lp-s-hit.lp-s-cont, a.lp-s-hit.lp-s-cont { padding-left: 1.1em; }
.lp-s-snip { display: block; color: var(--lp-muted); font-size: 0.92em; }
.lp-s-snip b { color: var(--lp-fg); font-weight: 700; }
.lp-search-root { max-width: 40rem; margin: 0 auto 1.5rem; padding: 0 1rem; font-size: 1rem; box-sizing: border-box; }
.lp-search-root .lp-s-input { min-height: 42px; }
.lp-search-root ol.lp-s-results { max-height: 70vh; }
mark.lp-hit { background: #ffe066; color: #1a1a1a; border-radius: 2px; transition: background-color 1.5s ease; }
html[data-theme="dark"] mark.lp-hit { background: #b8860b; color: #fff; }
mark.lp-hit.lp-hit-fade { background: transparent; color: inherit; }
@media print { .lp-search { display: none; } }

/* ── UX 다듬기 (2026-10-30, 계약서 끝 「변경 (UX 다듬기)」 절) ──────────────── */
/* 어두운 화면의 강조색(#64b5f6)은 밝아서 흰 글씨가 묻힌다(대비 2.2). 짙은 남색 글씨로(대비 약 8.6) */
/* 목차 지금 장 줄(#sidebar a.active)의 같은 글자색은 책 style.css 에 둔다(2026-10-30 여기서 옮김, 한 곳에 두기) */
html[data-theme="dark"] .lp-fold-next,
html[data-theme="dark"] .lp-c-send { color: #0d1b2a; }
/* 목차의 지금 장 줄 숫자는 흐리게 하지 않는다(밝은 화면 11px 글자에 opacity .75 → 대비 3.96) */
#sidebar a.active .lp-ch-count { opacity: 1; }
/* 화면에는 안 보이고 화면 읽기만 읽는 글자 */
.lp-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 본문으로 건너뛰기: 초점을 받을 때만 */
.lp-skip {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 0.5em 0.9em;
  border-radius: 6px;
  background: var(--lp-bg);
  color: var(--lp-accent);
  border: 2px solid var(--lp-accent);
  font-weight: 600;
  text-decoration: none;
}
.lp-skip:focus { top: 12px; }
main[tabindex="-1"]:focus, #sidebar[tabindex="-1"]:focus, .lp-q-why:focus:not(:focus-visible) { outline: none; }
/* 휴대폰 ☰ 단추: 아래로 굴릴 때 숨는다(본문 오른쪽 위 글자를 가리지 않게). 초점을 받으면 다시 보인다 */
#sidebar-open { transition: transform 0.2s ease, opacity 0.2s ease; }
#sidebar-open.lp-menu-hide { transform: translateY(-72px); opacity: 0; pointer-events: none; }
#sidebar-open.lp-menu-hide:focus { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { #sidebar-open { transition: none; } }
/* 닫힌 목차 패널(화면 밖)은 Tab 차례에서 뺀다. reader.js 가 inert 도 건다. 이것은 inert 없는 브라우저용 */
#sidebar.lp-sb-shut { visibility: hidden; transition: left 0.3s ease, visibility 0s linear 0.3s; }
/* 목차의 체크(안 읽음 되돌리기) 단추: 누르는 자리를 24px 이상으로, 옆 링크 글자는 그만큼 밀어 둔다 */
#sidebar .sidebar-toc button.lp-unread { min-width: 24px; min-height: 24px; }
#sidebar .sidebar-toc a.lp-done.lp-tg { padding-left: max(1.4em, 26px); }

/* ── 로그인 칸 안의 이메일 안내(접힘, 2026-10-30) ───────── */
.lp-consent-box { margin: 0.4rem 0 0.2rem; font-size: 0.82em; color: var(--lp-muted); }
.lp-consent-box > summary { cursor: pointer; list-style-position: inside; }
.lp-consent-box > summary:hover { color: var(--lp-fg); }
.lp-consent-box[open] > .lp-consent { margin-top: 0.4rem; font-size: 1em; }

/* ── 가로로 넘치는 수식·표의 「더 있음」 그림자 (2026-10-30, reader.js 「가로로 넘치는 수식·표」 절) ── */
/* 띠는 상자 안 마지막 자식이고 reader.js 가 굴릴 때마다 보이는 오른쪽 끝으로 옮긴다. 끝까지 밀면 사라진다.
   밝은 바탕(흰 문제 상자 포함)은 옅은 그림자, 어두운 바탕은 옅은 빛(검은 그림자는 어두운 바탕에서 안 보여서) */
.lp-xs { position: relative; }
.lp-xs-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18));
}
.lp-xs-dark > .lp-xs-shade { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)); }
.lp-xs-more > .lp-xs-shade { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lp-xs-shade { transition: none; } }
@media print { .lp-xs-shade { display: none; } }