/* Filename: css/style.css */

/* [기본 설정] */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; height: 100vh; overflow: hidden; display: flex; font-family: 'Noto Sans KR', sans-serif; background-color: #525659; }

:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }

/* [수식 Atom 스타일] */
mjx-container { display: inline-block !important; vertical-align: baseline !important; margin: 0 2px; cursor: text; user-select: text; -webkit-user-select: text; color: inherit !important; }
mjx-container[display="false"] { padding-right: 0.1em; }
mjx-container svg { overflow: visible; }
mjx-assistive-mml { display: none !important; }
mjx-container svg path,
mjx-container svg polygon { fill: currentColor !important; stroke: none !important; stroke-width: 0 !important; }
/* MathJax는 분수선/근호선 등을 얇은 rect로 그리므로 fill을 유지해야 합니다. */
mjx-container svg rect:not([data-bgcolor]) { fill: currentColor; stroke: none; }
/* \\boxed{} 등은 rect stroke로 테두리를 그리므로 예외 처리 */
mjx-container svg .mjx-boxed rect { fill: none !important; stroke: currentColor !important; vector-effect: non-scaling-stroke; }
mjx-container svg line { stroke: currentColor !important; }
mjx-container .math-blank-box rect[data-bgcolor] { fill: #fff; stroke: #000; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
mjx-container:hover { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; }
mjx-container:focus { outline: 2px solid #007bff; border-radius: 4px; }
mjx-container.math-selected { background-color: rgba(0, 123, 255, 0.18); border-radius: 4px; outline: 1px solid rgba(0, 123, 255, 0.45); }

/* [빈칸 박스 스타일] */
span.blank-box {
    display: inline-block;
    vertical-align: middle;
    border: 1.5px solid #000;
    min-width: 40px;
    padding: 2px 5px;
    text-align: center;
    line-height: 1.2;
    margin: 0 2px;
    font-weight: bold;
    background: transparent;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.95em;
    cursor: pointer;
    border-radius: 2px;
    user-select: none;
}
span.blank-box:hover { background-color: transparent; border-color: #007bff; color: #007bff; }

/* [UI 요소] */
#drop-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 123, 255, 0.85); z-index: 9999; display: none; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; pointer-events: none; flex-direction: column; gap: 10px; }
body.drag-over #drop-overlay { display: flex; }
#loading-indicator { position: fixed; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.85); color: #fff; padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: bold; display: none; z-index: 11000; box-shadow: 0 4px 15px rgba(0,0,0,0.3); animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0.8; } }

#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 12000; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { background: rgba(0, 0, 0, 0.85); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 13px; opacity: 0; transform: translateY(-10px); transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: rgba(40, 167, 69, 0.9); }
.toast-error { background: rgba(220, 53, 69, 0.9); }

/* [모달] */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal-content { background: white; width: 700px; padding: 25px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 15px; }
.modal-textarea { width: 100%; height: 250px; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-family: monospace; font-size: 12px; resize: none; background: #f8f9fa; color: #333; }
body.modal-open { user-select: none; -webkit-user-select: none; }
body.modal-open .modal-content,
body.modal-open .modal-content * { user-select: text; -webkit-user-select: text; }
#find-replace-modal .modal-content { width: 400px; padding: 20px; gap: 10px; }
.fr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.fr-label { width: 80px; font-size: 13px; font-weight: bold; color: #333; }
.fr-input { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.fr-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.patch-notes-body { max-height: 60vh; overflow-y: auto; font-size: 12px; color: #333; line-height: 1.6; background: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; }
.patch-notes-date { font-weight: bold; margin-top: 6px; }
.patch-notes-list { margin: 4px 0 8px 18px; padding: 0; }
.patch-notes-list li { margin-bottom: 2px; }
.patch-notes-text { margin: 4px 0; }
.patch-notes-spacer { height: 6px; }

/* [레이아웃] */
.sidebar { width: 340px; background: #fff; border-right: 1px solid #ccc; display: flex; flex-direction: column; padding: 15px; z-index: 200; flex-shrink: 0; overflow-y: auto; }
.workspace { flex-grow: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 40px 0; background-color: #525659; }

.sidebar-tree { display: flex; flex-direction: column; gap: 8px; }
.sidebar-folder { border-bottom: 1px solid #eee; padding-bottom: 6px; }
.sidebar-folder:last-of-type { border-bottom: none; padding-bottom: 0; }
.sidebar-folder > summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 800; color: #222; display: flex; align-items: center; gap: 6px; padding: 4px 2px; user-select: none; }
.sidebar-folder > summary::-webkit-details-marker { display: none; }
.sidebar-folder > summary::before { content: '▸'; font-size: 11px; color: #555; transition: transform 0.15s ease; }
.sidebar-folder[open] > summary::before { transform: rotate(90deg); }
.sidebar-folder-body { margin-left: 14px; padding: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.sidebar-hint { font-size: 11px; color: #555; background: #f8f9fa; border: 1px dashed #ddd; padding: 6px; border-radius: 4px; line-height: 1.4; }
.sidebar-hint code { font-family: monospace; font-size: 11px; }
.workflow-hint { display: flex; flex-direction: column; gap: 4px; }
.workflow-title { font-weight: bold; color: #333; }
.workflow-step { display: flex; align-items: center; gap: 6px; }
.workflow-badge { background: #333; color: #fff; border-radius: 999px; padding: 1px 6px; font-size: 10px; }
.sidebar-folder-body .shortcut-guide { margin-top: 0; }
.template-controls { display: none; margin-bottom: 6px; }
.template-controls.active { display: block; }

.sidebar-section { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eee; }
.sidebar-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar-section-title { font-size: 12px; font-weight: 800; color: #333; margin-bottom: 8px; letter-spacing: 0.5px; }

.page { width: 210mm; height: 297mm; padding: 15mm 10mm; background: white; color: black; position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.5); margin-bottom: 30px; display: flex; flex-direction: column; flex-shrink: 0; overflow: visible; transform-origin: top center; transition: transform 0.1s; }
.page-layout-control { position: absolute; top: 10px; right: 10px; z-index: 5; }
.page-layout-label { font-size: 10px; color: #333; margin-right: 6px; }
.page-layout-select { font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid #ccc; background: #fff; }
.page-plan-control { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.page-plan-btn { font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.page-plan-btn:hover { background: #f1f3f5; }
.page-layout-input { font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid #ccc; width: 52px; }
.header-footer-control { position: absolute; right: 6px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; border: 1px solid #cfd4da; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 2px rgba(0,0,0,0.06); font-size: 11px; }
.header-footer-control.header-control { top: 10px; left: 10px; right: auto; }
.header-footer-control.footer-control { bottom: 6px; }
.hide-page-controls .page-layout-control,
.hide-page-controls .header-footer-control { display: none !important; }
.header-area { width: 100%; margin-bottom: 10px; flex-shrink: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.header-table { width: 100%; border-collapse: collapse; border: 2px solid #000; font-size: 10pt; table-layout: fixed; }
.header-table td { border: 1px solid #000; padding: 5px; text-align: center; height: 35px; vertical-align: middle; }
.col-title { width: 15%; background-color: #f0f0f0; font-weight: bold; }
.col-label { width: 10%; background-color: #f0f0f0; font-weight: bold; }
.col-input-wide { width: 45%; }
.col-input-narrow { width: 20%; }
.header-input, .footer-input { width: 100%; border: none; text-align: center; font-family: inherit; font-size: inherit; background: transparent; }
.header-line { width: 100%; border-bottom: 1px solid #000; height: 1px; margin-bottom: 10px; }
.page-footer { flex-shrink: 0; margin-top: auto; width: 100%; z-index: 10; background: white; text-align: center; font-size: 10pt; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.footer-content-first { border-top: 1px solid #000; padding-top: 5px; }
.footer-line { width: 100%; border-top: 1px solid #000; height: 1px; margin-bottom: 5px; }
.footer-text { font-size: 9pt; margin-bottom: 2px; }
.body-container { flex-grow: 1; display: flex; position: relative; width: 100%; align-items: flex-start; }
.body-container::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 1px solid #000; transform: translateX(-0.5px); z-index: 0; }
.column { width: 50%; height: 100%; display: flex; flex-direction: column; padding-right: 5mm; z-index: 1; }
.column.right { padding-right: 0; padding-left: 5mm; }
.body-container.single-column::after { display: none; }
.column.single { width: 100%; padding-right: 0; padding-left: 0; }

/* [교재 모드: 목차 페이지] */
.toc-page { padding: 0; overflow: hidden; color: var(--toc-body-text-color, #000); font-family: 'Noto Sans KR', sans-serif; --toc-content-width: 125mm; }
.toc-header-container { position: relative; width: 100%; flex-shrink: 0; background: var(--toc-main-color, #1a1a2e); }
.toc-header-inner { position: relative; width: min(var(--toc-content-width), calc(100% - 40mm)); height: 100%; margin: 0 auto; }
.toc-bg-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.toc-overlay-image { position: absolute; right: 20px; top: 20px; height: calc(100% - 40px); width: 45%; object-fit: contain; z-index: 1; }
.toc-bg-image,
.toc-overlay-image { cursor: move; user-select: none; }
.toc-title-box { position: absolute; left: 0; top: 22mm; z-index: 2; color: var(--toc-header-text-color, #fff); text-align: left; }
.toc-title { font-family: var(--toc-title-font-family, 'Noto Sans KR', sans-serif); font-weight: var(--toc-title-font-weight, 900); font-size: var(--toc-title-font-size, 40pt); font-style: var(--toc-title-font-style, normal); text-decoration: var(--toc-title-text-decoration, none); color: var(--toc-title-color, var(--toc-header-text-color, #fff)); letter-spacing: 1.8px; line-height: 1.05; }
.toc-subtitle { font-family: var(--toc-subtitle-font-family, 'Noto Serif KR', serif); font-weight: var(--toc-subtitle-font-weight, 500); font-size: var(--toc-subtitle-font-size, 13pt); font-style: var(--toc-subtitle-font-style, normal); text-decoration: var(--toc-subtitle-text-decoration, none); color: var(--toc-subtitle-color, var(--toc-header-text-color, #dddddd)); margin-top: 8px; opacity: 0.85; }
.toc-title[contenteditable="true"]:focus,
.toc-subtitle[contenteditable="true"]:focus,
.toc-section-text[contenteditable="true"]:focus,
.toc-part-text[contenteditable="true"]:focus,
.toc-sub-text[contenteditable="true"]:focus { outline: 2px solid #007bff; outline-offset: 2px; border-radius: 4px; }

.toc-image-controls { position: absolute; right: 20px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; z-index: 3; }
.toc-image-btn { font-size: 11px; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.6); background: rgba(0,0,0,0.35); color: #fff; border-radius: 4px; cursor: pointer; }
.toc-image-btn:hover { background: rgba(0,0,0,0.55); }
.toc-image-controls .toc-add-item { width: auto; padding: 3px 6px; margin: 0; font-size: 10px; line-height: 1.2; }

.toc-list-container { flex: 1; padding: 12mm 0 14mm; background: #fff; }
.toc-list-inner { width: min(var(--toc-content-width), calc(100% - 40mm)); margin: 0 auto; display: flex; flex-direction: column; gap: 12mm; }
.toc-add-item { align-self: flex-start; margin-bottom: 6px; font-size: 11px; }
.toc-empty { font-size: 11px; color: #777; border: 1px dashed #ddd; padding: 6px 8px; border-radius: 4px; display: inline-block; margin-bottom: 10px; }

.toc-section { display: flex; flex-direction: column; gap: 4mm; }
.toc-section-title { display: flex; align-items: baseline; gap: 6px; font-size: var(--toc-section-font-size, 12pt); font-weight: var(--toc-section-font-weight, 700); font-family: var(--toc-section-font-family, 'Noto Sans KR', sans-serif); font-style: var(--toc-section-font-style, normal); text-decoration: var(--toc-section-text-decoration, none); color: var(--toc-section-color, var(--toc-body-text-color, #111)); }
.toc-section-index { min-width: 14mm; text-align: right; color: var(--toc-sub-color, #1a1a2e); }
.toc-section-text { flex: 1; }
.toc-section-card { border: 1px solid #dedede; border-radius: 10px; padding: 5mm 6mm; background: #fff; width: 100%; box-sizing: border-box; }

.toc-part-title { display: flex; align-items: baseline; gap: 4px; margin-top: 3mm; font-size: var(--toc-part-font-size, 10pt); font-weight: var(--toc-part-font-weight, 700); font-family: var(--toc-part-font-family, 'Noto Sans KR', sans-serif); font-style: var(--toc-part-font-style, normal); text-decoration: var(--toc-part-text-decoration, none); color: var(--toc-part-color, var(--toc-body-text-color, #333)); }
.toc-part-title:first-child { margin-top: 0; }
.toc-part-index { color: var(--toc-sub-color, #333); }
.toc-part-text { flex: 1; }

.toc-sub-list { margin-top: 2mm; display: flex; flex-direction: column; gap: 2mm; }
.toc-sub-item { display: flex; align-items: baseline; gap: 4mm; font-size: var(--toc-sub-font-size, 9pt); font-weight: var(--toc-sub-font-weight, 400); font-family: var(--toc-sub-font-family, 'Noto Serif KR', serif); font-style: var(--toc-sub-font-style, normal); text-decoration: var(--toc-sub-text-decoration, none); color: var(--toc-sub-color, var(--toc-body-text-color, #444)); padding-left: 6mm; }
.toc-sub-index { width: 10mm; text-align: right; color: #5b647a; font-variant-numeric: tabular-nums; }
.toc-sub-text { flex: 1; }

.toc-item-controls { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.toc-item-level { font-size: 10px; padding: 2px 4px; border-radius: 4px; border: 1px solid #ddd; background: #fff; }
.toc-item-remove { border: 1px solid #ddd; background: #fff; border-radius: 4px; font-size: 10px; padding: 2px 6px; cursor: pointer; }
.toc-item-remove:hover { background: #f1f3f5; }

/* [교재 모드: 대단원 표지] */
.chapter-cover-page {
    position: relative;
    background: var(--chapter-bg-color, #f7f7fb);
    overflow: hidden;
    --chapter-bar-width: 48mm;
    --chapter-content-width: 150mm;
    --chapter-left-offset: 52mm;
    --chapter-title-top: 28mm;
    --chapter-points-top: 92mm;
    --chapter-points-width: 120mm;
    --chapter-parts-bottom: 30mm;
}
.chapter-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--chapter-bar-width); background: var(--chapter-main-color, #1a1a2e); }
.chapter-inner { position: relative; width: min(var(--chapter-content-width), calc(100% - 36mm)); margin-left: var(--chapter-left-offset); margin-right: auto; height: 100%; }
.chapter-title-block { position: absolute; left: 0; top: var(--chapter-title-top); color: var(--chapter-text-color, #000); text-align: left; }
.chapter-number { font-family: var(--chapter-number-font-family, 'Noto Serif KR', serif); font-size: var(--chapter-number-font-size, 40pt); font-weight: var(--chapter-number-font-weight, 700); font-style: var(--chapter-number-font-style, normal); text-decoration: var(--chapter-number-text-decoration, none); line-height: 1; color: var(--chapter-number-color, var(--chapter-main-color, #1a1a2e)); }
.chapter-title-ko { font-family: var(--chapter-title-ko-font-family, 'Noto Serif KR', serif); font-size: var(--chapter-title-ko-font-size, 30pt); font-weight: var(--chapter-title-ko-font-weight, 600); font-style: var(--chapter-title-ko-font-style, normal); text-decoration: var(--chapter-title-ko-text-decoration, none); margin-top: 3.5mm; color: var(--chapter-title-ko-color, var(--chapter-text-color, #000)); }
.chapter-title-en { font-family: var(--chapter-title-en-font-family, 'Noto Serif KR', serif); font-size: var(--chapter-title-en-font-size, 25pt); font-weight: var(--chapter-title-en-font-weight, 400); font-style: var(--chapter-title-en-font-style, normal); text-decoration: var(--chapter-title-en-text-decoration, none); color: var(--chapter-title-en-color, var(--chapter-sub-color, #6b7280)); margin-top: 2mm; }
.chapter-points-card { position: absolute; left: 0; top: var(--chapter-points-top); width: var(--chapter-points-width); border: 1px solid var(--chapter-main-color, #1a1a2e); background: #fff; }
.chapter-points-header { background: var(--chapter-main-color, #1a1a2e); color: var(--chapter-points-header-color, #fff); font-size: var(--chapter-points-header-font-size, 14pt); font-weight: var(--chapter-points-header-font-weight, 700); font-style: var(--chapter-points-header-font-style, normal); text-decoration: var(--chapter-points-header-text-decoration, none); padding: 4mm 5.5mm; letter-spacing: 1.4px; font-family: var(--chapter-points-header-font-family, 'Noto Sans KR', sans-serif); }
.chapter-points-body { padding: 6mm 6mm 7mm; display: flex; flex-direction: column; gap: 3.5mm; font-size: var(--chapter-points-body-font-size, 11pt); font-weight: var(--chapter-points-body-font-weight, 400); font-style: var(--chapter-points-body-font-style, normal); text-decoration: var(--chapter-points-body-text-decoration, none); color: var(--chapter-points-body-color, var(--chapter-text-color, #333)); line-height: 1.6; font-family: var(--chapter-points-body-font-family, 'Noto Serif KR', serif); }
.chapter-point-item { position: relative; padding-left: 3.8mm; }
.chapter-point-item::before { content: '•'; position: absolute; left: 0; top: 0; }
.chapter-parts { position: absolute; right: 0; bottom: var(--chapter-parts-bottom); display: flex; flex-direction: column; gap: 2mm; font-size: var(--chapter-parts-font-size, 25pt); font-weight: var(--chapter-parts-font-weight, 700); font-style: var(--chapter-parts-font-style, normal); text-decoration: var(--chapter-parts-text-decoration, none); color: var(--chapter-parts-color, var(--chapter-main-color, #1a1a2e)); text-align: right; font-family: var(--chapter-parts-font-family, 'Noto Serif KR', serif); }
.chapter-part-item { text-align: right; font-size: inherit; }
.chapter-cover-page [contenteditable="true"]:focus { outline: 2px solid #007bff; outline-offset: 2px; border-radius: 4px; }

/* [블록] */
.block-wrapper { position: relative; margin-bottom: 2px; width: 100%; flex-shrink: 0; border-radius: 4px; border: 1px solid transparent; transition: background 0.1s; padding-right: 0; overflow: visible; }
.block-wrapper:hover { background-color: rgba(0,0,0,0.03); }
.block-wrapper.bg-gray-block { background-color: #f1f3f5; border-radius: 6px; padding: 5px; margin-bottom: 5px; border: 1px solid #e9ecef; }
.block-wrapper.bg-gray-block + .block-wrapper.bg-gray-block { margin-top: -5px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
@supports(selector(:has(*))) {
    .block-wrapper.bg-gray-block:has(+ .block-wrapper.bg-gray-block) { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .block-wrapper.bg-gray-block + .block-wrapper.bg-gray-block { margin-top: 0; }
}
.block-wrapper.dragging { opacity: 0.4; background: #e2e6ea; }
.drop-target-top { border-top: 3px solid #007bff; margin-top: -3px; }
.drop-target-bottom { border-bottom: 3px solid #007bff; margin-bottom: -3px; }

.block-handle { position: absolute; left: -24px; top: 0; width: 24px; height: 100%; cursor: grab; display: flex; align-items: flex-start; padding-top: 6px; justify-content: center; opacity: 0; color: #bbb; z-index: 150; transition: opacity 0.2s; user-select: none; }
.block-wrapper:hover .block-handle { opacity: 1; }
.block-wrapper:focus-within .block-handle { opacity: 1; }
.block-wrapper.temp-show-handle .block-handle { opacity: 1; }
.block-handle::after { content: '≡'; font-size: 18px; line-height: 1; font-weight: bold; }
.block-handle:active { cursor: grabbing; color: #555; }

.header-footer-freebox { width: 100%; height: 100%; outline: none; padding: 4px 6px; box-sizing: border-box; }
.header-footer-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.header-footer-table td { border: 1px solid #000; padding: 4px; vertical-align: middle; text-align: center; }
.header-footer-image-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.header-footer-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; cursor: move; user-select: none; }
.header-footer-image-placeholder { width: 100%; height: 100%; border: 1px dashed #ccc; color: #777; font-size: 11px; display: flex; align-items: center; justify-content: center; }

.variant-left-concept .editable-box { background: var(--theme-sub-soft, #f5f5f5); border: 1px solid var(--theme-sub, #999); padding: 8px 10px 8px 14px; position: relative; }
.variant-left-concept .editable-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--theme-main, #1a1a2e); }
.variant-left-concept .q-label { color: var(--theme-main, #1a1a2e); }

.variant-top-concept .editable-box { padding: 0; border: none; background: transparent; }
.top-concept-header { background: var(--theme-main, #1a1a2e); color: #fff; padding: 4px 8px; font-weight: 700; letter-spacing: 0.4px; }
.top-concept-body { border: 1px solid var(--theme-main, #1a1a2e); border-top: none; padding: 8px 10px; background: #fff; box-sizing: border-box; }

.two-col-concept { display: grid; grid-template-rows: auto 1fr; border: 2px solid var(--theme-sub-50, #c0c0c0); border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; overflow: hidden; }
.two-col-concept-label { padding: 6px 8px; font-weight: 700; display: flex; align-items: center; gap: 8px; border-bottom: 1px dotted var(--theme-sub-50, #c0c0c0); }
.two-col-concept-title { font-size: 0.95em; }
.two-col-concept-sub { margin-left: auto; text-align: right; font-weight: 600; font-size: 0.85em; color: var(--theme-sub, #555); }
.two-col-concept-body { padding: 6px 8px; }

.editable-box { border-radius: 4px; padding: 2px 2px; font-family: 'Noto Serif KR', serif; font-size: 10.5pt; line-height: 1.6; text-align: inherit; word-break: break-all; min-height: 28px; width: 100%; cursor: text; }
.editable-box:focus { box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.35); border-radius: 4px; }
.editable-box:empty::before { content: attr(data-placeholder); color: #999; font-family: 'Noto Sans KR', sans-serif; pointer-events: none; }
.editable-box:focus:empty::before { color: #bbb; }
.editable-box.bordered-box { border: 1px solid #333; padding: 8px 10px; border-radius: 6px; background: #fff; }
.editable-box img { max-width: 100%; cursor: pointer; } 
.editable-box img[src=""]::before { content: '❌ 이미지 없음'; color: red; border: 1px dashed red; padding: 10px; display: block; }
.concept-box { border: 1px solid #333; border-radius: 6px; background: #fff; padding: 8px 10px; margin-bottom: 5px; width: 100%; }
.concept-answer-box { white-space: pre-wrap; }
.q-label { color: #1a6fc0; font-weight: var(--label-font-weight, 800); text-decoration: var(--label-text-decoration, none); font-family: var(--label-font-family, 'Noto Sans KR', sans-serif); font-size: var(--label-font-size, inherit); margin-right: 5px; }

.custom-box { width: 100%; margin: 15px 0; background: #fff; border: 2px solid #28a745; padding: 15px; position: relative; border-radius: 4px; }
.custom-box.labeled-box { }
.custom-box.simple-box { }
.box-label { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: #fff; padding: 0 10px; color: #000; font-weight: 800; text-align: center; font-family: 'Noto Sans KR', sans-serif; }
.box-label::before,
.box-label::after { content: "\275A"; display: inline-block; margin: 0 6px; }
.box-content { line-height: 1.6; text-align: left; }

.rect-box { width: 100%; margin: 15px 0; background: #fff; border: 2px solid #000; padding: 15px; position: relative; border-radius: 4px; box-sizing: border-box; }
.rect-box-content { line-height: 1.6; text-align: left; }

.spacer-block { width: 100%; background: repeating-linear-gradient(45deg, #f9f9f9, #f9f9f9 10px, #fff 10px, #fff 20px); border: 1px dashed #ddd; cursor: ns-resize; display: flex; align-items: center; justify-content: center; margin: 5px 0; }
.break-line { height: 24px; border-bottom: 2px dotted #ff4444; margin: 5px 0 15px 0; text-align: center; color: #ff4444; font-size: 11px; cursor: pointer; background: rgba(255, 200, 200, 0.1); }
.break-line:hover::after { content: ' (클릭하여 삭제)'; }

.image-placeholder { display: inline-block; width: 100%; padding: 20px; border: 2px dashed #007bff; background-color: #f0f7ff; color: #0056b3; text-align: center; cursor: pointer; font-size: 12px; border-radius: 6px; font-weight: bold; user-select: none; }
.image-placeholder.selected { border: 2px solid #0056b3; background-color: #dbeafe; box-shadow: 0 0 0 3px rgba(0,123,255,0.25); outline: none; }
.image-load-btn { margin-left: 8px; padding: 2px 8px; font-size: 11px; border: 1px solid #007bff; background: #fff; color: #0056b3; border-radius: 4px; cursor: pointer; }
.image-load-btn:hover { background: #007bff; color: #fff; }

table.editor-table { display: inline-table; border-collapse: collapse; resize: none; overflow: visible; vertical-align: top; margin: 4px; table-layout: fixed; }
table.editor-table td { border: 1px solid #333; padding: 4px; min-width: 40px; height: 24px; text-align: center; }
table.editor-table td.table-cell-selected { background: rgba(0, 123, 255, 0.12); box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.55); }
.table-resize-guide { position: absolute; background: rgba(0, 123, 255, 0.6); z-index: 9900; pointer-events: none; display: none; }
#table-resize-guide-v { width: 2px; }
#table-resize-guide-h { height: 2px; }
#table-resize-handle { position: absolute; width: 12px; height: 12px; border-right: 2px solid #6c757d; border-bottom: 2px solid #6c757d; z-index: 9900; pointer-events: none; display: none; }

#table-menu-handle { position: absolute; width: 20px; height: 20px; border: 1px solid #666; background: #fff; border-radius: 4px; display: none; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: 9910; box-shadow: 0 2px 6px rgba(0,0,0,0.2); user-select: none; }
#table-menu { position: absolute; display: none; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 8px; z-index: 9910; min-width: 220px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); font-size: 12px; }
.table-menu-title { font-weight: 800; font-size: 12px; margin-bottom: 6px; color: #333; }
.table-menu-section { margin-bottom: 8px; }
.table-menu-section:last-child { margin-bottom: 0; }
.table-menu-label { font-size: 11px; font-weight: 700; color: #333; margin-bottom: 4px; }
.table-menu-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.table-menu-select { font-size: 11px; padding: 2px 4px; border-radius: 4px; border: 1px solid #ddd; background: #fff; }
.table-menu-btn { border: 1px solid #ddd; background: #fff; border-radius: 4px; padding: 3px 6px; font-size: 11px; cursor: pointer; }
.table-menu-btn:hover { background: #e7f5ff; border-color: #007bff; color: #007bff; }
.table-menu-hint { font-size: 10px; color: #777; }

table.choice-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 6px 0; }
table.choice-table td { border: 1px dashed rgba(220, 53, 69, 0.55); padding: 4px 6px; vertical-align: top; background: transparent; }
table.choice-table td.choice-empty { border-color: rgba(220, 53, 69, 0.25); }
table.choice-table .choice-label { font-weight: 700; margin-right: 4px; white-space: nowrap; }
table.choice-table .choice-text { display: inline-block; min-width: 0; }

#choice-menu-handle { position: absolute; width: 24px; height: 20px; border: 1px solid #555; background: #fff; border-radius: 4px; display: none; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; z-index: 9910; box-shadow: 0 2px 6px rgba(0,0,0,0.2); user-select: none; }
#choice-menu { position: absolute; display: none; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 8px; z-index: 9910; min-width: 160px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); font-size: 12px; }
.choice-menu-title { font-weight: 800; font-size: 12px; margin-bottom: 6px; color: #333; }
.choice-menu-row { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-menu-btn { border: 1px solid #ddd; background: #fff; border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.choice-menu-btn:hover { background: #e7f5ff; border-color: #007bff; color: #007bff; }

#math-menu { position: absolute; display: none; flex-direction: column; align-items: stretch; gap: 6px; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; z-index: 10005; box-shadow: 0 6px 16px rgba(0,0,0,0.18); font-size: 12px; min-width: 220px; }
.math-menu-row { display: flex; gap: 6px; }
.math-menu-title { font-size: 10px; font-weight: 700; color: #666; }
.math-menu-btn { border: 1px solid #ddd; background: #fff; border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.math-menu-btn:hover { background: #e7f5ff; border-color: #007bff; color: #007bff; }
.math-menu-btn:disabled { opacity: 0.45; cursor: not-allowed; background: #f3f3f3; color: #888; border-color: #ddd; }
.math-menu-ops { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.math-menu-op { border: 1px solid #eee; background: #fff; border-radius: 4px; padding: 4px 6px; font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.math-menu-op:hover { background: #f8fbff; border-color: #007bff; color: #007bff; }
.math-menu-op-left { flex: 1; text-align: right; color: #555; }
.math-menu-op-token { font-family: 'Courier New', monospace; font-weight: 700; color: #222; }
.math-menu-op-right { flex: 1; text-align: left; color: #555; }
.math-menu-empty { font-size: 11px; color: #888; padding: 2px 4px; }
#element-menu { position: absolute; display: none; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; z-index: 10005; box-shadow: 0 6px 16px rgba(0,0,0,0.18); font-size: 12px; min-width: 200px; }
.element-menu-title { font-size: 10px; font-weight: 700; color: #666; }
.element-menu-row { display: flex; gap: 6px; }
.element-menu-btn { border: 1px solid #ddd; background: #fff; border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.element-menu-btn:hover { background: #e7f5ff; border-color: #007bff; color: #007bff; }
.choice-menu-actions { margin-top: 6px; }
.menu-btn-danger { color: #dc3545; border-color: #f1b0b7; }
.menu-btn-danger:hover { background: #fdecee; border-color: #dc3545; color: #dc3545; }

/* [도구] */
#floating-toolbar { position: absolute; background: #fdfdfd; border-radius: 10px; padding: 8px 10px; display: none; flex-direction: column; gap: 6px; z-index: 10000; box-shadow: 0 12px 24px rgba(15,23,42,0.18); border: 1px solid rgba(15,23,42,0.14); transform: translate(-50%, -120%); font-size: 12px; color: #111827; }
#floating-toolbar::before { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border-width: 7px; border-style: solid; border-color: rgba(15,23,42,0.14) transparent transparent transparent; }
#floating-toolbar::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #fdfdfd transparent transparent transparent; }
.ft-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-row-actions { padding-top: 6px; border-top: 1px solid #e5e7eb; }
#floating-toolbar[data-context="textbook"] .ft-row-actions { display: none; }
.ft-btn { background: #f3f4f6; border: 1px solid #d1d5db; color: #111827; cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1; }
.ft-btn:hover { background: #e5e7eb; border-color: #cbd5e1; }
.ft-btn.is-active { background: #111827; color: #fff; border-color: #111827; }
.ft-sep { width: 1px; background: #d1d5db; margin: 0 2px; height: 20px; align-self: center; }
.ft-select, .ft-input, .ft-color { height: 26px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 12px; padding: 2px 6px; background: #fff; color: #111827; }
.ft-select { min-width: 74px; }
.ft-select-wide { min-width: 130px; }
.ft-input { width: 56px; text-align: center; }
.ft-color { width: 28px; padding: 0; }
.ft-toggle-btn { width: 26px; padding: 4px 0; font-weight: 700; }
.ft-italic { font-style: italic; }
.ft-underline { text-decoration: underline; }
.ft-color-group { display: flex; align-items: center; gap: 6px; }
.ft-color-btn { width: 18px; height: 18px; border-radius: 5px; border: 1px solid #d1d5db; background: var(--swatch, #111827); cursor: pointer; padding: 0; }
.ft-color-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,0.15); }
.ft-color-btn.is-active { outline: 2px solid #111827; outline-offset: 1px; }

#image-resizer { position: absolute; border: 2px solid #007bff; z-index: 9900; display: none; pointer-events: none; }
.resizer-handle { position: absolute; width: 10px; height: 10px; background: #007bff; border: 1px solid white; pointer-events: auto; }
.rh-se { bottom: -6px; right: -6px; cursor: nwse-resize; }

#context-menu { position: fixed; background: white; border: 1px solid #ccc; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border-radius: 6px; z-index: 9999; display: none; width: 230px; }
.menu-item { padding: 8px 12px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; align-items: center; color: #333; }
.menu-item:hover { background: #e7f5ff; color: #007bff; }
.menu-item.disabled { opacity: 0.5; cursor: not-allowed; color: #999; }
.menu-item.disabled:hover { background: transparent; color: #999; }
.menu-font-row { justify-content: flex-start; gap: 6px; cursor: default; }
.menu-font-row:hover { background: transparent; color: inherit; }
.menu-font-row select, .menu-font-row input { font-size: 12px; }
.menu-sep { height: 1px; background: #eee; margin: 4px 0; }
.menu-title { font-size: 10px; color: #888; padding: 5px 10px; background: #f8f9fa; font-weight: bold; }
.shortcut-badge { font-size: 10px; color: #999; background: #f1f3f5; padding: 1px 4px; border-radius: 3px; }

.btn { width: 100%; padding: 8px; margin-bottom: 5px; cursor: pointer; background: white; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; }
.btn:hover { background: #f8f9fa; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; background: #f3f3f3; color: #888; border-color: #ddd; }
.btn-primary { background: #007bff; color: white; border: none; font-weight: bold; }
.btn-warning { background: #ffc107; color: #212529; border: none; font-weight: bold; }
.btn-success { background: #28a745; color: white; border: none; font-weight: bold; }
.btn-danger { background: #dc3545; color: white; border: none; font-weight: bold; }
.btn-purple { background: #6f42c1; color: white; border: none; font-weight: bold; }
.btn-sm { padding: 4px 8px; width: auto; font-size: 12px; }
#confirm-modal .btn { min-width: 56px; text-align: center; }
.prompt-date { font-size: 10px; opacity: 0.8; margin-left: 6px; }

.settings-panel { background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; padding:10px; margin-bottom:15px; }
.preflight-panel { font-size: 12px; }
.preflight-item { padding: 6px 4px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #e5e5e5; }
.preflight-item:last-child { border-bottom: none; }
.preflight-item.warn { color: #dc3545; font-weight: 700; }
.block-wrapper.preflight-highlight { box-shadow: 0 0 0 2px #dc3545; background-color: rgba(220, 53, 69, 0.06); }
.settings-row { display:flex; justify-content:space-between; align-items:center; font-size:11px; margin-bottom:5px; }
.settings-row label { color:#333; font-weight:bold; }
.settings-row input[type="number"], .settings-row input[type="text"] { width:60px; padding:2px; text-align:center; border:1px solid #ddd; border-radius:3px; }
.settings-row input[type="color"] { width:44px; height:20px; padding:0; border:1px solid #ddd; border-radius:3px; cursor:pointer; background:#fff; }
.settings-row select { width: 80px; padding: 2px; text-align: center; border:1px solid #ddd; border-radius:3px; background:#fff; font-size:11px; }
#folder-status { font-size: 11px; color: #666; font-weight: bold; display: block; margin-bottom: 5px; }
#folder-status.active { color: #28a745; }


.shortcut-guide { margin-top: 15px; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 0; font-size: 11px; color: #333; height: 220px; overflow-y: auto; }
.shortcut-header { background: #f1f3f5; padding: 8px; font-weight: bold; font-size: 12px; border-bottom: 1px solid #ddd; position: sticky; top:0; }
.shortcut-list { padding: 5px; }
.shortcut-item { display: flex; justify-content: space-between; padding: 4px 8px; border-bottom: 1px dashed #eee; }
.shortcut-item:last-child { border-bottom: none; }
.shortcut-key { font-weight: bold; color: #007bff; background: #e7f5ff; padding: 1px 5px; border-radius: 3px; font-family: monospace; }

@media print {
    @page { size: A4 portrait; margin: 0; }
    .sidebar, #floating-toolbar, #image-resizer, #context-menu, #table-menu, #table-menu-handle, #choice-menu, #choice-menu-handle, #math-menu, #element-menu, .block-handle, .block-actions, #loading-indicator, #drop-overlay, .modal-overlay, .page-layout-control, .header-footer-control, .header-footer-image-placeholder { display: none !important; }
    .toc-edit-control { visibility: hidden !important; pointer-events: none !important; }
    body, .workspace { background: white; overflow: visible; display: block; margin: 0; padding: 0; }
    .page { display: flex !important; flex-direction: column !important; margin: 0; box-shadow: none; border: none; page-break-after: always; transform: none !important; width: 210mm; height: 297mm !important; overflow: hidden !important; }
    .page.page-first { height: 297mm !important; }
    .body-container { flex-grow: 1 !important; margin-bottom: 0 !important; height: auto !important; }
    .page-footer { flex-shrink: 0; margin-top: auto !important; width: 100%; z-index: 10; background: white; text-align: center; font-size: 10pt; }
    .image-placeholder, .break-line { display: none; }
    .bg-gray-block { background-color: #f1f3f5 !important; -webkit-print-color-adjust: exact; }
    .spacer-block { border: none !important; background: none !important; }
    table.choice-table td { border: none !important; }
    .block-wrapper { padding-right: 0 !important; }
    #paper-container { transform: none !important; }
    mjx-container { color: #222 !important; }
    span.blank-box { background: transparent !important; border: 1.5px solid #000 !important; padding: 2px 5px !important; min-width: 40px; color: #000 !important; text-align: center; }
    .editable-box:empty::before { content: '' !important; }
}