/* 서적 본문 그림(PLAN 261022, classic-figures.js). 원장 261022·261023 미리보기 승인 모양 */

/* 조문 앞뒤 그림 행: 조문 행과 같은 여백·구분선, 그림은 가운데 */
.cd-page #content-container .cf-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 18px 40px 18px 0;
    border-top: 1px solid var(--ui-border);
}
.cf-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cf-fig img {
    display: block;
    max-width: min(100%, 320px);
    max-height: 360px;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    background: #fff;
    cursor: zoom-in;
}
.cf-fig figcaption,
.cf-zoom-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; }
.cf-fig figcaption { font-size: .86em; color: var(--ui-text); }
.cf-fig figcaption:empty { display: none; }
.cf-credit { font-size: .82em; color: var(--ui-muted); }

/* 글자 자리: 원문 글자 높이. png·jpg 는 흰 바탕, svg 는 글자색 */
.cf-glyph { display: inline-block; height: 1.25em; width: auto; vertical-align: -0.25em; margin: 0 .08em; border-radius: 3px; background: #fff; cursor: zoom-in; }
.cf-glyph-svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: var(--cf-src) center / contain no-repeat;
    mask: var(--cf-src) center / contain no-repeat;
}

/* 확대 창 */
.cf-zoom {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 20px 20px;
    background: rgba(0, 0, 0, .82);
}
.cf-zoom img { max-width: 100%; max-height: calc(100vh - 140px); background: #fff; border-radius: 8px; }
.cf-zoom-tools {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}
.cf-zoom-tools button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-soft); cursor: pointer; font-size: 14px; }
.cf-zoom-tools button:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: var(--ui-text); }
.cf-zoom-tools button.is-done { color: var(--color-success); }
.cf-zoom-tools button.is-fail { color: var(--color-danger); }
.cf-zoom-cap { padding: 6px 12px; border-radius: 8px; background: var(--ui-surface); color: var(--ui-text); font-size: 13px; }
.cf-zoom-cap .cf-credit { font-size: 12px; }