/* 서적 조문 각주·댓글 판(EXP 261022c, 원장 261022 미리보기 승인). 본문 옆 IDE 보조 판.
   721px 이상은 판이 본문을 민다, 720px 이하는 하단 시트(위 모서리 28px). 댓글 모양은 components/comments.css(게시글 화면과 같음). */
:root { --cn-w: 360px; }

/* 본문 각주 번호·댓글 수 */
.cn-ref { font-size: .62em; line-height: 0; margin-left: 2px; vertical-align: super; }
.cn-ref a { color: var(--color-primary); text-decoration: none; padding: 0 1px; }
.cn-ref a:hover { text-decoration: underline; }
/* 선택한 조문: 검색 강조 cd-hit 과 같은 깔개(좌측 강조선 금지) */
.cd-page #content-container .text-section.cn-sel::before { content: ""; position: absolute; inset: 0 -8px; z-index: -1; border-radius: 10px; background: var(--ui-hover); }
.cd-page #content-container .text-section { cursor: default; }
.cn-mark { position: absolute; right: 6px; bottom: 14px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--ui-soft); font: inherit; font-size: 11px; line-height: 1; cursor: pointer; }
.cn-mark:hover { background: var(--ui-hover); color: var(--ui-text); }
.cn-mark i { font-size: 11px; }
/* 文¹ 은 도구 줄 표시 단추(cd-g-orig)와 같은 글씨: 쪽 글꼴 그대로·굵게 */
.cn-wen { display: inline-flex; align-items: flex-start; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; }
.cn-wen sup { font-size: 8px; line-height: 1; margin-left: 1px; }
.cn-grp-count .cn-wen { font-size: 11px; }
.cn-grp-count .cn-wen sup { font-size: 7px; }
.cn-toggle svg { display: block; width: 20px; height: 20px; }

/* 판이 본문을 민다(721px 이상) */
@media (min-width: 721px) { body.cn-dock .container.cd-container { max-width: min(1392px, calc(100vw - var(--cn-w) - 16px)); margin-left: max(0px, calc((100vw - var(--cn-w) - 1392px) / 2)); margin-right: calc(var(--cn-w) + max(0px, calc((100vw - var(--cn-w) - 1392px) / 2))); } }
.cn-panel { position: fixed; right: 0; bottom: 0; z-index: 900; width: var(--cn-w); display: flex; flex-direction: column; background: var(--ui-surface); border-left: 1px solid var(--ui-border); color: var(--ui-text); font-size: 14px; }
.cn-panel[hidden] { display: none; }
/* 판 위 선이 제목 띠(.cd-head) 아래 선과 한 줄로 이어진다. 판 top 은 띠 아래 끝(place())이라 1px 올린다(원장 261022) */
@media (min-width: 721px) { .cn-panel { border-top: 1px solid var(--ui-border); margin-top: -1px; } }
/* 멀린 단추(z-index 1000)가 판 바닥 댓글 작성 단추를 가린다. 판이 열린 동안 데스크톱은 판 왼쪽으로, 휴대폰 시트는 숨긴다(원장 261022 안 3) */
@media (min-width: 721px) { body.cn-dock .merlin-widget { right: calc(var(--cn-w) + 20px); } }
@media (max-width: 720px) { body.cn-dock .merlin-widget { display: none; } }
/* 칸 머리(sticky, z-index 2)보다 위에 둔다. 아래면 머리 줄에서 손잡이가 끊긴다(원장 261022) */
.cn-grip { position: absolute; left: -3px; top: 0; bottom: 0; z-index: 3; width: 6px; cursor: col-resize; }
.cn-grip:hover, .cn-grip.is-drag { background: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.cn-head { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--ui-border); flex-shrink: 0; }
.cn-ctx { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.cn-ctx i { color: var(--ui-soft); font-size: 12px; }
.cn-ctx .cn-ctx-sep { font-size: 9px; }
.cn-ctx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-head .ui-segment { flex-shrink: 0; margin-right: 4px; }
.cn-jump { padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.cn-jump:hover { background: var(--ui-hover); }
.cn-panel.is-all .cn-sec, .cn-panel.is-all .cn-foot, .cn-panel.is-all .cn-ctx-sep, .cn-panel.is-all .cn-jump { display: none; }
.cn-panel:not(.is-all) .cn-all { display: none; }
.cn-all .cn-empty { padding: 12px 14px; }
.cn-grp + .cn-grp { border-top: 1px solid var(--ui-border); }
.cn-grp-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 14px; border: 0; background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cn-grp-head:hover { background: var(--ui-hover); }
.cn-grp-head .cn-grp-count { display: inline-flex; align-items: center; gap: 3px; color: var(--ui-soft); font-size: 11px; font-weight: 600; }
.cn-grp-head .cn-grp-count:first-of-type { margin-left: auto; }
.cn-grp-body { padding: 0 14px 10px; }
.cn-item { display: grid; grid-template-columns: 22px 1fr; gap: 2px; width: calc(100% + 12px); margin: 0 -6px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-text); font: inherit; font-size: 13px; line-height: 1.6; text-align: left; cursor: pointer; }
.cn-item:hover { background: var(--ui-hover); }
.cn-item .cn-num { color: var(--color-primary); font-weight: 600; font-size: 12px; }
.cn-item > i { color: var(--ui-soft); font-size: 11px; line-height: 21px; }
.cn-item-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-item-text b { margin-right: 6px; font-weight: 600; }
.cn-item a { pointer-events: none; color: var(--color-primary); }
.cn-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ui-muted); cursor: pointer; }
.cn-icon + .cn-icon { margin-left: 0; }
.cn-icon:hover { background: var(--ui-hover); color: var(--ui-text); }
.cn-body { flex: 1; overflow-y: auto; min-height: 0; }
/* 칸 머리는 스크롤해도 남는다(원장 261022 「스크롤 올리면 각주도 일종의 탭으로 남아 있어야지」). 칸을 display:contents 로 풀어 머리가 스크롤 상자 전체에 붙게 하고,
   각주 머리는 위에, 댓글 머리는 각주를 읽는 동안 아래에·댓글로 내려오면 각주 머리 밑에 붙는다 */
.cn-sec { display: contents; }
.cn-sec-head { position: sticky; z-index: 2; background: var(--ui-surface) !important; }
/* 說文解字 칸(classic-shuowen.js) 이 맨 위. 說文 칸을 읽는 동안 각주·댓글 머리가 바닥에 차례로 붙는다(원장 261029 「각주, 댓글이 모두 접히게 보여야 해」) */
.cn-sec[data-sec="shuowen"] .cn-sec-head { top: 0; }
.cn-sec[data-sec="notes"] .cn-sec-head { top: 36px; bottom: 36px; border-top: 1px solid var(--ui-border); }
.cn-sec[data-sec="comments"] .cn-sec-head { top: 72px; bottom: 0; border-top: 1px solid var(--ui-border); }
.cn-sec-head { display: flex; align-items: center; gap: 6px; width: 100%; height: 36px; padding: 0 8px 0 10px; border: 0; background: transparent; color: var(--ui-muted); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.cn-sec-head:hover { color: var(--ui-text); }
.cn-sec-head .fa-chevron-down { width: 12px; font-size: 10px; transition: transform .15s; }
.cn-sec.is-fold .cn-sec-head .fa-chevron-down { transform: rotate(-90deg); }
.cn-sec.is-fold .cn-sec-body { display: none; }
.cn-count { padding: 1px 6px; border-radius: 999px; background: var(--ui-hover); color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.cn-sec-tool { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--ui-muted); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; cursor: pointer; }
.cn-sec-tool:hover { background: var(--ui-hover); color: var(--ui-text); }
.cn-sec-tool[hidden] { display: none; } /* display 가 hidden 을 덮지 않게(편집 권한 없는 각주 추가·앞 글자 없는 되돌아가기) */
.cn-sec-body { padding: 0 14px 14px; }
.cn-empty { margin: 2px 0 0; color: var(--ui-soft); font-size: 13px; line-height: 1.6; }
.cn-note { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px; padding: 8px 6px; margin: 0 -6px; border-radius: 8px; line-height: 1.7; }
.cn-note.is-hit { background: var(--ui-hover); }
.cn-note .cn-num { color: var(--color-primary); font-weight: 600; font-size: 12px; line-height: 23px; }
.cn-note-text { white-space: pre-line; }
.cn-note a { color: var(--color-primary); text-decoration: none; }
.cn-note a:hover { text-decoration: underline; }
.cn-note .comment-more { height: 24px; margin: 0; }
.cn-panel .comments-list { margin-top: 0; }
.cn-panel .comment-group:first-child { margin-top: 0; border-top: 0; padding-top: 4px; }
.cn-panel .comment-content, .cn-panel .comment-actions { padding-left: 34px; }
/* 이름 옆 회원 구분·공개 프로필 링크: 게시글 화면(post-view.css)과 같은 값 */
.cn-panel .member-label { margin-left: .35rem; font-size: 12px; font-weight: 400; color: var(--ui-soft); }
.cn-panel .author-link { color: inherit; text-decoration: none; }
.cn-panel .author-link:hover { text-decoration: underline; }
.cn-foot { flex-shrink: 0; padding: 10px 14px 14px; border-top: 1px solid var(--ui-border); }
.cn-panel .pv-comment-shell { margin: 0; padding: 10px; }
.cn-panel .pv-comment-shell textarea { min-height: 64px; }
.cn-panel .pv-comment-profile { display: none; }
/* 비밀댓글은 도서관에 두지 않는다(원장 261022). 작성 단추는 오른쪽 끝 */
.cn-panel .pv-comment-bottom { justify-content: flex-end; }
.cn-scrim { display: none; }
@media (max-width: 720px) {
    .cn-panel { left: 0; width: auto; height: 62vh; top: auto !important; border-left: 0; border-top: 1px solid var(--ui-border); border-radius: 28px 28px 0 0; box-shadow: 0 -12px 32px rgba(0,0,0,.2); }
    .cn-grip { display: none; }
    .cn-head { height: 52px; padding-top: 8px; }
    .cn-head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--ui-border-2); }
    .cn-scrim { display: block; position: fixed; inset: 0; z-index: 899; background: var(--color-overlay-dark, rgba(0,0,0,.4)); }
    .cn-scrim[hidden] { display: none; }
    .cn-panel textarea { font-size: 16px; }
}

/* 說文解字 칸(classic-shuowen.js, 원장 261029 덮개 미리보기 승인). 고른 본문 글자는 CSS Highlight 배경, 풀이 안 링크 글자는 호버 배경만(밑줄·파란색 없음) */
::highlight(cn-sw) { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }
.cn-sw-char { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--ui-text); }
.cn-sw-entry + .cn-sw-entry { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ui-border); }
.cn-sw-top { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; margin: 2px 0 10px; }
.cn-sw-top.has-seal { grid-template-columns: 72px 1fr; }
.cn-sw-seal { display: block; width: 72px; height: 72px; padding: 4px; border: 1px solid var(--ui-border); border-radius: 10px; background: #fff; }
.cn-sw-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-sw-meta b { font-size: 22px; line-height: 1.2; }
.cn-sw-meta span { color: var(--ui-muted); font-size: 12px; }
.cn-sw-tag { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-muted); font-size: 11px; font-weight: 600; vertical-align: middle; }
.cn-sw-ref { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--ui-hover); color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
.cn-sw-text { margin: 0; font-size: 15px; line-height: 1.8; }
.cn-sw-label { display: block; margin: 10px 0 2px; color: var(--ui-soft); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.cn-sw-note { margin: 0; color: var(--ui-muted); font-size: 14px; line-height: 1.8; }
.cn-sw-src { margin: 6px 0 0; color: var(--ui-soft); font-size: 11px; }
.cn-sw-dz { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--ui-border); }
.cn-sw-dz-p { margin: 6px 0 0; font-size: 14px; line-height: 1.8; }
.cn-sw-dz-p::after { content: ''; display: block; clear: both; }
.cn-sw-dz-img { float: left; width: 40px; height: 40px; margin: 3px 8px 0 0; padding: 2px; border-radius: 6px; background: #fff; }
.cn-sw-form { font-weight: 700; }
.cn-sw-yw { color: var(--ui-text); }
.cn-sw-zs { color: var(--ui-muted); }
/* 본문 화면 테마는 body[data-theme](theme.dark.css) */
body[data-theme="dark"] .cn-sw-seal, body[data-theme="dark"] .cn-sw-dz-img { filter: invert(1); }
.cn-sw-go { border-radius: 3px; cursor: pointer; }
.cn-sw-go:hover { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }

/* 각주 입력 창(공용 .ui-modal). 위키 논문 각주 창과 같은 폭·항목 */
.cn-modal .ui-modal-card { width: min(520px, 100%); }
.cn-modal .cn-kind { margin-bottom: 12px; } /* 항목 사이(ui-modal-field)와 같은 12px */
.cn-modal [data-kind-body]:not([hidden]) { display: contents; }
.cn-modal .cn-cite { margin: 0; font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; }
.cn-modal .cn-cands { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; color: var(--ui-text); }
.cn-modal .cn-cands label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cn-modal .cn-cands input { margin: 0; accent-color: var(--color-primary); }
.cn-modal .cn-cands a { font-size: .75rem; }
.cn-paper-cite { overflow-wrap: anywhere; }
.cn-paper-note { display: block; color: var(--ui-muted); }
#cnText { display: block; height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.6; resize: vertical; }