/* Clear diagram presentation. Content, graph direction and semantic fills stay intact. */
.lec-mermaid-box,
.law-mermaid-panel,
.eyeread-diagram-modal {
  --clear-bg:#f5f8fe;
  --clear-paper:#fff;
  --clear-ink:#15233b;
  --clear-muted:#64748b;
  --clear-line:#dce6f7;
  --clear-blue:#3169ef;
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',system-ui,sans-serif;
}
.lec-mermaid-box,
.explain-middle .lec-mermaid-box,
.dz-canvas .lec-mermaid-box {
  background:var(--clear-paper) !important;
  border:1px solid var(--clear-line) !important;
  border-radius:18px;
  padding:20px;
  box-shadow:0 6px 22px rgba(49,83,138,.04);
  text-align:center;
}
.lec-mermaid-box .mmd-cap,
.explain-middle .lec-mermaid-box .mmd-cap {
  color:var(--clear-ink) !important;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.025em;
  margin:0 0 18px;
  padding:0 0 12px;
  border-bottom:1px solid var(--clear-line);
  text-align:left;
}
.lec-mermaid-box .mmd-cap::before {
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--clear-blue);
  margin:0 8px 2px 0;
}
.lec-mermaid-box .mermaid,
.explain-middle .mermaid {
  background:var(--clear-paper) !important;
  padding:8px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.lec-mermaid-box .mermaid svg {display:block;margin:auto;max-width:100%;height:auto}
.lec-mermaid-box .mermaid svg .node rect {rx:13px;ry:13px}
.lec-mermaid-box .mermaid svg .node polygon {stroke-linejoin:round}
.lec-mermaid-box .mermaid svg .edgeLabel {font-size:13px}
.lec-mermaid-box:not(.dz-clone)::after {
  content:'눌러서 크게 보기';
  position:static;
  display:block;
  width:max-content;
  max-width:100%;
  margin:14px auto 0;
  padding:5px 11px;
  background:#edf3ff;
  color:#2456c8;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  border-radius:8px;
}
.eyeread-diagram-modal {
  background:var(--clear-bg) !important;
  border:1px solid var(--clear-line) !important;
  border-radius:20px;
  box-shadow:0 18px 52px rgba(21,35,59,.16);
}
.eyeread-diagram-modal-head,
body.dark .eyeread-diagram-modal-head {
  background:var(--clear-paper) !important;
  color:var(--clear-ink) !important;
  border-bottom:1px solid var(--clear-line) !important;
  padding:13px 14px;
  font-size:14px;
  font-weight:700;
}
.eyeread-diagram-modal-body {padding:16px}
.eyeread-diagram-modal-close,
body.dark .eyeread-diagram-modal-close {
  background:#edf3ff;
  color:#2456c8;
  width:36px;
  height:36px;
  border-radius:11px;
}
.eyeread-diagram-btn,
.law-mermaid-toggle,
body.dark .eyeread-diagram-btn,
body.dark .law-mermaid-toggle {
  background:#edf3ff !important;
  border-color:#cbdcfb !important;
  color:#2456c8 !important;
  border-radius:9px;
  font-weight:600;
}
body.dark .lec-mermaid-box,
body.dark .law-mermaid-panel,
body.dark .eyeread-diagram-modal,
html[data-theme='dark'] .lec-mermaid-box,
html[data-theme='dark'] .law-mermaid-panel,
html[data-theme='dark'] .eyeread-diagram-modal {
  --clear-bg:#121c2d;
  --clear-paper:#fff;
  --clear-ink:#15233b;
  --clear-muted:#64748b;
  --clear-line:#dce6f7;
}
body.dark .law-mermaid-panel {background:#121c2d !important;border-color:#334561 !important}
@media(max-width:520px){
  .lec-mermaid-box,.explain-middle .lec-mermaid-box,.dz-canvas .lec-mermaid-box {padding:16px 12px;border-radius:16px}
  .lec-mermaid-box .mmd-cap,.explain-middle .lec-mermaid-box .mmd-cap {font-size:14px;margin-bottom:14px}
  .eyeread-diagram-modal-body {padding:12px}
}
@media(prefers-reduced-motion:no-preference){
  .lec-mermaid-box {transition:border-color .16s ease,box-shadow .16s ease}
  .lec-mermaid-box:not(.dz-clone):hover {border-color:#b9cef7 !important;box-shadow:0 8px 26px rgba(49,83,138,.08)}
}

/* 미니문제(drill) — 채점 뒤 「이 조문 강의」 도식과 비교 도식도 같은 카드로 (2026-10-26) */
.fb-lec-diag .mmd-box,
.ep-cmp-diagram {
  background:#fff !important;
  border:1px solid #dce6f7 !important;
  border-radius:16px;
  padding:14px 12px;
  margin:10px 0;
  box-shadow:0 6px 22px rgba(49,83,138,.04);
}
.fb-lec-diag .mmd-box .mmd-cap,
.ep-cmp-diagram .ep-cmp-cap {
  color:#15233b !important;
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.025em;
  margin:0 0 12px;
  padding:0 0 10px;
  border-bottom:1px solid #dce6f7;
  text-align:left;
}
.fb-lec-diag .mmd-box .mmd-cap::before,
.ep-cmp-diagram .ep-cmp-cap::before {
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#3169ef;margin:0 8px 2px 0;
}
.fb-lec-diag .mmd-box .mermaid,
.ep-cmp-diagram .mermaid {background:#fff !important;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fb-lec-diag .mmd-box .mermaid svg,
.ep-cmp-diagram .mermaid svg {display:block;margin:auto;max-width:100%;height:auto}
.fb-lec-diag .mmd-box .mermaid svg .node rect,
.ep-cmp-diagram .mermaid svg .node rect {rx:13px;ry:13px}
.fb-lec-diag .mmd-box .mermaid svg .node polygon,
.ep-cmp-diagram .mermaid svg .node polygon {stroke-linejoin:round}