/*
 * 마크다운 뷰어 — 화면(작업대) 스타일.
 * 문서 자체의 모양은 md-viewer-doc.css 가 정본이다(인쇄 창도 그 파일을 읽는다).
 */

.mdv-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.mdv-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.mdv-docname {
    max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--text-sm, .875rem); font-weight: 600; color: var(--text-secondary, #3d4450);
}

.mdv-modes {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--bg-subtle, #eef0f3);
    border: 1px solid var(--border-color, #e1e4e9);
    border-radius: 8px;
}
.mdv-mode {
    border: 0; background: transparent; cursor: pointer;
    padding: .3rem .85rem; border-radius: 6px;
    font-size: var(--text-ui-sm, .8125rem); font-weight: 600;
    color: var(--text-muted, #626977);
}
.mdv-mode:hover { color: var(--text-primary, #1f2328); }
.mdv-mode[aria-selected="true"] {
    background: var(--bg-surface, #fff); color: var(--text-primary, #1f2328);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.mdv-mode:focus-visible { outline: 2px solid #4a7fd6; outline-offset: 1px; }
.mdv-mode[hidden] { display: none; }

.mdv-fs { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.mdv-fs-select { width: auto; min-width: 5.25rem; padding-top: .25rem; padding-bottom: .25rem; }

.mdv-print-hint {
    margin: 0 0 .5rem; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977);
}
.mdv-print-hint i { margin-right: .25rem; }

.mdv-notices { display: flex; flex-direction: column; gap: .5rem; }
.mdv-notices:has(.mdv-notice:not([hidden])) { margin-bottom: .5rem; }
.mdv-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.mdv-notice > span:first-of-type { flex: 1 1 16rem; }
.mdv-notice-actions { display: inline-flex; gap: .375rem; }

/* ── 작업대 ─────────────────────────────────────────────── */
.mdv-work {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
    height: clamp(460px, calc(100vh - 230px), 1100px);
}
.mdv-work[data-mode="source"]  { grid-template-columns: minmax(0, 1fr); }
.mdv-work[data-mode="preview"] { grid-template-columns: minmax(0, 1fr); }
.mdv-work[data-mode="source"]  .mdv-pane-preview { display: none; }
.mdv-work[data-mode="preview"] .mdv-pane-source  { display: none; }

.mdv-pane {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    border: 1px solid var(--border-color, #e1e4e9);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface, #fff);
    overflow: hidden;
}
.mdv-pane-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--border-color, #e1e4e9);
    background: var(--bg-subtle, #f8f9fb);
    font-size: var(--text-ui-sm, .8125rem);
}
.mdv-pane-title { font-weight: 700; color: var(--text-secondary, #3d4450); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdv-pane-title i { margin-right: .25rem; opacity: .7; }
.mdv-pane-sub { font-weight: 400; color: var(--text-muted, #626977); margin-left: .35rem; }
.mdv-pane-meta { color: var(--text-muted, #626977); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mdv-source-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.mdv-source {
    display: block; width: 100%; height: 100%;
    margin: 0; padding: .85rem 1rem;
    border: 0; outline: none; resize: none;
    font-family: ui-monospace, 'SFMono-Regular', 'D2Coding', Menlo, Consolas, monospace;
    font-size: 14px; line-height: 1.65;
    color: var(--text-primary, #1f2328);
    background: transparent;
    tab-size: 4;
}
.mdv-source:focus-visible { box-shadow: inset 0 0 0 2px rgba(74, 127, 214, .35); }

/* 빈 상태 안내 — 편집기 위에 얹되 클릭은 편집기로 통과시킨다(버튼만 받는다) */
.mdv-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem; text-align: center;
    pointer-events: none;
    color: var(--text-muted, #626977);
}
.mdv-empty[hidden] { display: none; }
.mdv-empty > i { font-size: 2rem; opacity: .5; margin-bottom: .6rem; }
.mdv-empty-title { margin: 0 0 .25rem; font-weight: 600; color: var(--text-secondary, #3d4450); }
.mdv-empty-hint { margin: 0 0 .9rem; font-size: var(--text-ui-sm, .8125rem); }
.mdv-empty-actions { display: flex; gap: .5rem; pointer-events: auto; }

/* 미리보기 — 회색 책상 위의 A4 종이. 종이 폭은 고정이고 좁으면 «축소»해 보여 준다. */
.mdv-stage {
    flex: 1 1 auto; min-height: 0;
    overflow: auto;
    background: #e9ecef;
    padding: 16px;
}
.mdv-scaler { margin: 0 auto; }
.mdv-paper {
    width: 794px;                  /* A4 @96dpi */
    min-height: 1123px;
    box-sizing: border-box;
    padding: 57px;                 /* 15mm */
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
    transform-origin: top left;
}
.mdv-paper.is-empty .mdv-doc::before {
    content: '원본을 입력하면 여기에 결과가 나타납니다.';
    color: #8a929c;
}

.mdv-dropmask {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: rgba(74, 127, 214, .1);
    border: 2px dashed #4a7fd6; border-radius: var(--radius-md, 8px);
    color: #2f5fae; font-weight: 700; text-align: center;
    pointer-events: none;
}
.mdv-dropmask[hidden] { display: none; }
.mdv-dropmask i { font-size: 2rem; margin-bottom: .4rem; }
.mdv-dropmask p { margin: 0; }

.mdv-footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    margin-top: .5rem;
    font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977);
}
.mdv-autosave { display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer; }
.mdv-progress { color: var(--text-secondary, #3d4450); }

@media (max-width: 768px) {
    .mdv-toolbar { align-items: stretch; }
    .mdv-modes { order: -1; width: 100%; }
    .mdv-mode { flex: 1 1 0; }
    /* 사이트 공통 모바일 스타일이 버튼을 전폭으로 쌓아 툴바가 한 화면을 먹는다 → 2열로 접는다 */
    .mdv-toolbar .btn-tool { width: auto; }
    .mdv-output {
        width: 100%;
        display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    }
    .mdv-output .btn-tool { width: 100%; justify-content: center; }
    .mdv-output #mdvPngBtn   { order: 1; }
    .mdv-output #mdvPrintBtn { order: 2; }
    .mdv-output .mdv-fs      { order: 3; }
    .mdv-output .dropdown    { order: 4; }
    .mdv-output .dropdown > .btn-tool { width: 100%; }
    .mdv-fs-select { flex: 1 1 auto; }
    .mdv-docname { max-width: 12rem; }
    .mdv-work { height: clamp(420px, 72vh, 900px); }
    .mdv-stage { padding: 8px; }
    .mdv-pane-sub { display: none; }
}