/* 서적 페이지(/classic/책). 디자인 시스템 틀(ui-kit, --ui-* 토큰)만 쓴다(원장 261020 미리보기 승인).
   상자 없는 머리(경로·제목·한 줄 정보) → 해제 4줄 + 「더 보기」 → 목차(머리 줄 + .ui-rows 세 열).
   머리 값은 서적 리스트(.crl-page)·검색 결과(.crs-page)와 같다. 글 폭은 880px — 해제·본문 페이지 기본 본문 폭과 같다
   (원장 261020 미리보기 「880 으로 하자」. 리스트의 1392px 는 카드 세 열 폭이라 이 화면 근거가 아니다).
   선택자는 .cbk-page 아래 클래스 둘 — 다크 전역 규칙(theme.dark.css `body[data-theme="dark"] *`·`a`)이 덮지 않게. */
.cbk-page {
    max-width: 912px;
    margin: 0 auto;
    padding: 2.5rem 1rem 4rem;
    color: var(--ui-text);
}

/* ── 머리 ── */
.cbk-page .cbk-head { position: relative; margin-bottom: 1.6rem; }
.cbk-page .cbk-head h1 { margin: 0 0 .5rem; font-size: 1.9rem; font-weight: 600; color: var(--ui-text); }
.cbk-page .cbk-meta { margin: 0; min-height: 1.4em; font-size: .9rem; color: var(--ui-muted); word-break: keep-all; }
.cbk-page .cbk-meta span + span::before { content: '·'; margin: 0 .5em; color: var(--ui-soft); }
.cbk-page .cbk-meta .cbk-est { margin-left: 4px; font-size: .85em; }
.cbk-page .cbk-admin { position: absolute; right: 0; bottom: 0; display: flex; gap: 4px; }
.cbk-page .cbk-admin[hidden] { display: none; }

/* ── 저작 줄(정보 줄 아래): 정보 줄과 같은 크기·색, 저작 이름은 링크(원장 261021 미리보기 승인) ── */
.cbk-page .cbk-works { margin: .35rem 0 0; font-size: .9rem; color: var(--ui-muted); word-break: keep-all; }
.cbk-page .cbk-works > span + span::before { content: '·'; margin: 0 .5em; color: var(--ui-soft); }
.cbk-page .cbk-works b { margin-right: .5em; font-weight: 600; color: var(--ui-text); }
.cbk-page .cbk-works .cbk-terms-btn { margin: 0 .55em 0 0; }

/* ── 서지 용어 ⓘ·모달(저작 줄 「저작」 뒤, 저작 페이지 정보 줄 끝). 모달은 공용 .ui-modal, 글씨는 용어 14px·해설 13px·출처 12px(원장 261021) ── */
.cbk-page .cbk-terms-btn { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--ui-muted); font-size: 13px; line-height: 1; vertical-align: baseline; cursor: pointer; }
.cbk-page .cbk-terms-btn:hover { color: var(--ui-text); }
.cbk-terms dl { margin: 0; }
.cbk-terms dt { margin: 12px 0 0; font-size: .875rem; font-weight: 700; color: var(--ui-text); }
.cbk-terms dd { margin: 2px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--ui-muted); }
.cbk-terms .ui-modal-note { margin-top: 14px; font-size: .75rem; }
.cbk-page .cbk-works a,
.cbk-page .cbk-meta a { color: var(--ui-text); text-decoration: underline; text-decoration-color: var(--ui-border-2); text-underline-offset: 3px; }
.cbk-page .cbk-works a:hover,
.cbk-page .cbk-meta a:hover { text-decoration-color: currentColor; }

/* ── 해제: 4줄, 「더 보기」로 펼침 ── */
.cbk-page .cbk-about { max-width: 880px; margin: 0 0 2rem; }
.cbk-page .cbk-about[hidden] { display: none; }
.cbk-page .cbk-about p { margin: 0; font-size: .95rem; line-height: 1.8; color: var(--ui-text); white-space: pre-line; }
.cbk-page .cbk-about.is-clamped p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cbk-page .cbk-about .ui-text-button { margin-top: .4rem; padding-left: 0; padding-right: 0; }
.cbk-page .cbk-about .ui-text-button[hidden] { display: none; }

/* ── 목차: 머리 줄(이름·권 수·이 서적에서 찾기) + 행 세 열. 상자(.ui-panel) 없이 ── */
.cbk-page .cbk-toc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cbk-page .cbk-toc-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ui-text); }
.cbk-page .cbk-toc-count { margin-left: auto; white-space: nowrap; font-size: 13px; color: var(--ui-soft); font-variant-numeric: tabular-nums; }
.cbk-page .cbk-toc-head .ui-search { margin: 0; width: 260px; }
.cbk-page .cbk-search-note { margin: -6px 0 12px; font-size: 12.5px; color: var(--ui-soft); text-align: right; }
.cbk-page .cbk-search-note:empty { display: none; }
.cbk-page .cbk-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin-top: 0; }
.cbk-page .cbk-rows .ui-row { cursor: pointer; }
.cbk-page .cbk-rows .ui-row-act { width: auto; }
.cbk-page .cbk-empty { margin: 0; padding: 14px 4px; border-top: 1px solid var(--ui-border); font-size: 13px; color: var(--ui-soft); }

/* ── 같은 저작의 서적(서적 페이지 목차 아래)·저작 페이지 행: 목차와 같은 머리 줄 + 한 열 행 ── */
.cbk-page #classicRelated:not(:empty) { margin-top: 2.5rem; }
.cbk-page .cbk-related { margin: 0 0 2rem; }
.cbk-page .cbk-related .cbk-related-go { font-size: 13px; color: var(--ui-muted); text-decoration: none; white-space: nowrap; }
.cbk-page .cbk-related .cbk-related-go:hover { color: var(--ui-text); }
.cbk-page .cbk-related .ui-row-name { display: flex; align-items: baseline; min-width: 0; }
.cbk-page .cbk-related .ui-row-name > span:first-child { flex: none; }
.cbk-page .cbk-related .ui-row-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbk-page .cbk-related .ui-row-count { flex: none; margin-left: 12px; font-size: 13px; font-weight: 500; color: var(--ui-muted); }

/* 받는 동안의 자리(검색 결과 .crs-sk 와 같은 빛 흐름) */
.cbk-page .cbk-sk {
    display: block; border-radius: 6px;
    background: linear-gradient(90deg, var(--ui-surface-2) 20%, var(--ui-border) 38%, var(--ui-surface-2) 56%);
    background-size: 220% 100%; animation: cbkSkelShimmer 1.1s ease-in-out infinite;
}
.cbk-page h1 .cbk-sk { height: 1.9rem; width: min(320px, 70%); }
/* 막대는 글자 한 줄 높이를 차지하고 위아래는 비운다(위아래 margin 은 이웃 막대와 겹쳐 줄어들어 padding + content-box) */
.cbk-page .cbk-meta .cbk-sk,
.cbk-page .cbk-about .cbk-sk { box-sizing: content-box; background-clip: content-box; }
.cbk-page .cbk-meta .cbk-sk { width: 220px; height: 1em; padding: .3em 0; }
/* 해제 한 줄(.95rem × 1.8) 높이에 막대 하나, 「더 보기」 자리는 비워 둔다 — 받은 뒤 아래가 밀리지 않게 */
.cbk-page .cbk-about .cbk-sk { height: .95rem; padding: calc(.95rem * .4) 0; }
.cbk-page .cbk-about.is-loading .ui-text-button { visibility: hidden; }
.cbk-page .cbk-about .cbk-sk.is-short { width: 62%; }
.cbk-page .cbk-toc-count .cbk-sk { display: inline-block; height: 13px; width: 32px; vertical-align: middle; }
.cbk-page .cbk-rows .ui-row.is-skeleton { cursor: default; pointer-events: none; }
.cbk-page .cbk-rows .ui-row.is-skeleton .cbk-sk { height: 14px; width: 46%; margin: 4px 0; }
@keyframes cbkSkelShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cbk-page .cbk-sk { animation: none; } }

/* 휴대폰: 공용 styles.css 가 body 좌우에 더하는 0.5rem 을 뺀다 → 틀 안쪽 16px 만(원장 261020) */
@media (max-width: 768px) {
    body { padding-left: 0; padding-right: 0; }
}

@media (max-width: 720px) {
    .cbk-page { padding-top: 1.5rem; }
    .cbk-page .cbk-head h1 { font-size: 1.6rem; }
    .cbk-page .cbk-admin { position: static; margin: .6rem 0 0 -.95rem; }
    .cbk-page .cbk-toc-head { flex-wrap: wrap; }
    .cbk-page .cbk-toc-head .ui-search { order: 3; width: 100%; margin-top: 6px; }
    .cbk-page .cbk-toc-head .ui-search .ui-search-input { font-size: 16px; }
    .cbk-page .cbk-search-note { margin-top: 0; text-align: left; }
    .cbk-page .cbk-rows { grid-template-columns: minmax(0, 1fr); }
    .cbk-page .cbk-related .ui-row-desc { display: none; }
}

/* ── 관리 동작(권 통합·본문 전체 삭제·권 이름 변경) ──
   되돌리기 어려운 동작이라 평소에도 빨간 글자(원장 261020 「빨간색 표시가 되게」). ui-kit 의 .is-danger 는 호버만 빨강이라 이 화면만 따로 둔다. */
.cbk-page .cbk-admin .ui-text-button,
.cbk-page .cbk-rows [data-rename] { color: var(--ui-danger); }
.cbk-page .cbk-admin .ui-text-button:hover,
.cbk-page .cbk-rows [data-rename]:hover { background: var(--ui-danger-bg); color: var(--ui-danger); }

/* 확인 창(#cbkActionModal, 공용 .ui-modal). 통합 1단계의 옮길 권 고르기 */
#cbkActionModal .ui-modal-label { display: flex; align-items: baseline; }
#cbkActionModal .cbk-pick-count { margin-left: auto; font-size: .75rem; font-weight: 400; color: var(--ui-soft); }
#cbkActionModal .cbk-pick-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#cbkActionModal .cbk-pick-tools .ui-search { flex: 1; margin: 0; }
#cbkActionModal .cbk-pick-tools .ui-text-button { flex: none; }
#cbkActionModal .cbk-pick {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px;
    max-height: 240px; overflow-y: auto; padding: 6px 8px;
    border: 1.5px solid var(--ui-border-2); border-radius: 10px;
}
#cbkActionModal .cbk-pick label { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 2px; font-size: .84rem; color: var(--ui-text); cursor: pointer; }
#cbkActionModal .cbk-pick label[hidden] { display: none; }
#cbkActionModal .cbk-pick label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cbkActionModal .cbk-pick label.is-off { opacity: .45; cursor: default; }
#cbkActionModal .cbk-pick input { flex: none; margin: 0; accent-color: var(--color-primary); }
#cbkActionModal .ui-modal-hint.is-error { color: var(--ui-danger); }
/* 삭제: 입력할 서적 제목은 굵게, 한 번에 골라 복사되게 */
#cbkActionModal .cbk-type-field { margin-top: 16px; }
#cbkActionModal .cbk-type-title { font-weight: 700; color: var(--ui-text); user-select: all; }
/* 확인 단계: 바뀌는 것 */
#cbkActionModal .cbk-change {
    margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--ui-surface-2);
    font-size: .84rem; line-height: 1.6; color: var(--ui-text); overflow-wrap: anywhere;
}
#cbkActionModal .cbk-change ul { margin: 0; padding-left: 1.1em; max-height: 140px; overflow-y: auto; }
#cbkActionModal .cbk-change code { font-family: inherit; color: var(--ui-muted); }
#cbkActionModal .cbk-change b { font-weight: 700; }
#cbkActionModal .cbk-change-note { margin: 10px 0 0; }
@media (max-width: 640px) {
    #cbkActionModal .cbk-pick { grid-template-columns: minmax(0, 1fr); }
    #cbkActionModal .cbk-pick-tools { flex-wrap: wrap; }
    #cbkActionModal .cbk-pick-tools .ui-search { flex: 1 0 100%; }
    #cbkActionModal .cbk-pick-tools .ui-text-button:first-of-type { margin-left: -.95rem; }
}