* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f0f2f5;
    color: #333;
    min-height: 100vh;
}

/* Header */
header {
    background: #1a237e;
    color: white;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

h1 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.header-sub {
    font-size: 0.85rem;
    opacity: 0.7;
}

.header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.summary {
    display: flex;
    gap: 16px;
    font-size: 0.9rem;
}

.summary .up { color: #a5d6a7; }
.summary .down { color: #ef9a9a; }

.last-updated {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Main Grid */
main {
    padding: 16px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: calc(100vh - 105px);
    box-sizing: border-box;
}

.server-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
}

/* ── 메인 패널 (공통) ── */
.main-panel.hidden { display: none; }
.main-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 520px;
    overflow: hidden;
    position: relative;
}
.main-panel--editing {
    min-height: 80vh;
}
.main-panel.has-op-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    z-index: 19;
    border-radius: 12px;
}

.docs-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    background: #fafafa;
}
.docs-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a237e;
    letter-spacing: 0.2px;
}

/* 맨 위로 버튼 */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #3949ab;
    color: white;
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.scroll-top-btn:hover {
    background: #283593;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.28);
}

/* Server Card */
.card {
    background: white;
    border-radius: 8px;
    padding: 6px 12px;
    flex: 1;
    min-width: 120px;
    max-width: 260px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border-left: 3px solid #e0e0e0;
    transition: box-shadow 0.15s;
}
.card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.13); }
.card.up   { border-left-color: #43a047; }
.card.down { border-left-color: #e53935; }

.card-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.card-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a237e;
}

.badge-portal {
    font-size: 0.63rem;
    background: #e8eaf6;
    color: #3949ab;
    border-radius: 3px;
    padding: 1px 5px;
    font-weight: 600;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.up .status-dot   { background: #43a047; }
.down .status-dot { background: #e53935; }

.card-ext-url {
    display: block;
    margin-top: 3px;
    font-size: 0.7rem;
    color: #5c6bc0;
    text-decoration: none;
    word-break: break-all;
    opacity: 0.8;
    transition: opacity 0.15s;
    padding-left: 14px;
}
.card-ext-url:hover { opacity: 1; text-decoration: underline; }


/* Toast */
.toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: #323232;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 1000;
    transition: opacity 0.3s;
}

.toast.success { background: #2e7d32; }
.toast.error   { background: #c62828; }
.toast.hidden  { opacity: 0; pointer-events: none; }

/* Header — 로그아웃 버튼 영역 */
.header-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

.btn-logout {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-logout:hover {
    background: rgba(255,255,255,0.28);
}

/* Login Page */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}

body.login-page::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    background: #4f46e5;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.25;
    top: -140px;
    right: -140px;
    pointer-events: none;
}

body.login-page::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    background: #7c3aed;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.22;
    bottom: -100px;
    left: -100px;
    pointer-events: none;
}

.login-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px;
    position: relative;
    z-index: 1;
}

.login-brand-logo {
    display: block;
    width: 90px;
    margin: 0 auto 20px;
    filter: brightness(1.1);
}

.login-box {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px 36px 36px;
    width: 100%;
    max-width: 380px;
}
.login-box.hidden { display: none; }

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.login-sub {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.form-group input {
    padding: 10px 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    font-size: 0.92rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.form-group input:focus {
    border-color: #818cf8;
    background: rgba(255, 255, 255, 0.12);
}

.login-error {
    font-size: 0.82rem;
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.20);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 6px;
    padding: 8px 12px;
}
.login-error.hidden  { display: none; }

.btn-login {
    margin-top: 4px;
    padding: 11px 0;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 7px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.btn-login:hover:not(:disabled) {
    opacity: 0.85;
    transform: translateY(-1px);
}

.btn-login:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pw-change-box .btn-login { padding: 7px 0; font-size: 0.88rem; }

.login-register-link {
    margin-top: 18px;
    text-align: center;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.45);
}

.link-btn {
    background: none;
    border: none;
    color: #a5b4fc;
    cursor: pointer;
    font-size: 0.92rem;
    text-decoration: underline;
    padding: 0;
}

.link-btn:hover {
    color: #c7d2fe;
}

.login-success {
    font-size: 0.82rem;
    color: #86efac;
    background: rgba(22, 163, 74, 0.20);
    border: 1px solid rgba(22, 163, 74, 0.35);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.login-success.hidden { display: none; }

.req {
    color: #c62828;
    font-size: 0.8rem;
}

/* 비밀번호 변경 모달 */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal-overlay.hidden { display: none; }

.pw-change-box {
    background: white;
    border-radius: 12px;
    padding: 40px 36px 32px;
    width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}

.pw-change-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 10px;
}

.pw-change-desc {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* ── AWS 비용 바 ── */
.cost-bar {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: #444;
}
.cost-bar-label {
    font-weight: 700;
    color: #1a237e;
    font-size: 0.82rem;
    white-space: nowrap;
}
.cost-account-id {
    font-size: 0.75rem;
    font-weight: 400;
    color: #888;
    margin-left: 4px;
}
.cost-bar-amounts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.cost-bar-amounts b { color: #1a237e; }
.cost-bar-sep { color: #ccc; }
.cost-bar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cost-bar-group-label {
    font-size: 0.75rem;
    color: #aaa;
    font-weight: 600;
    margin-right: 2px;
}
.cost-bar-inner-sep { color: #ddd; font-size: 0.8rem; }
.btn-cost-detail {
    background: #e8eaf6;
    color: #3949ab;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-cost-detail:hover { background: #c5cae9; }

/* ── AWS 비용 모달 ── */
.cost-dialog { max-width: 1200px; }
.cost-period-badge {
    font-size: 0.75rem;
    background: #e8eaf6;
    color: #3949ab;
    border-radius: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    font-weight: 600;
}
.cost-modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}
.cost-summary-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
.cost-summary-card {
    flex: 1;
    background: #f5f6fa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
}
.cost-summary-label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 6px;
}
.cost-summary-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a237e;
}
.cost-summary-unit {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 2px;
}
.cost-table-wrap { overflow-x: auto; }
.cost-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.cost-table th {
    background: #e8eaf6;
    color: #1a237e;
    padding: 8px 14px;
    text-align: left;
    border: 1px solid #d0d5e0;
    font-weight: 700;
}
.cost-table td {
    padding: 7px 14px;
    border: 1px solid #e8e8e8;
    color: #444;
}
.cost-table tr:nth-child(even) td { background: #f9f9fc; }
.cost-table tr:hover td { background: #eef0fb; }
.cost-num { text-align: right; font-family: 'Consolas', monospace; color: #333; }
.expand-cell { width: 28px; text-align: center; }
.expand-icon { font-size: 0.7rem; color: #3949ab; }
.user-row.expandable { cursor: pointer; }
.user-row.expandable:hover td { background: #eef0fb; }
.detail-wrap.hidden { display: none; }
.svc-detail-table { width: 100%; border-collapse: collapse; }
.svc-detail-row td { background: #f5f6fa; border-bottom: 1px solid #e8eaf6; padding: 5px 14px; font-size: 0.82rem; }
.svc-detail-name { padding-left: 32px !important; color: #555; }

.cost-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a237e;
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e8eaf6;
}
.cost-user-note {
    font-size: 0.82rem;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 10px 14px;
    line-height: 1.6;
}
.cost-discount-note {
    font-size: 0.8rem;
    color: #1565c0;
    background: #e3f2fd;
    border-left: 3px solid #1976d2;
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin-bottom: 20px;
    line-height: 1.7;
}

/* ── 문서 버튼 ── */
.btn-docs {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-docs:hover {
    background: rgba(255,255,255,0.28);
}
.btn-docs.nav-active {
    background: rgba(255,255,255,0.38);
    border-color: rgba(255,255,255,0.7);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}

/* ── 문서 모달 ── */
.docs-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.docs-modal.hidden { display: none; }

.docs-dialog {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    width: 100%;
    max-width: 1200px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.docs-dialog.has-op-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    z-index: 19;
    border-radius: 12px;
}

.docs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid #e0e0e0;
    background: #f5f6fa;
    flex-shrink: 0;
}

.docs-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a237e;
}

.docs-close {
    background: none;
    border: none;
    font-size: 1rem;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.docs-close:hover { background: #e0e0e0; color: #333; }

.docs-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 편집 아이콘 버튼 (뷰 모드) */
.docs-edit-btn {
    background: none;
    border: 1px solid #c5cae9;
    font-size: 1rem;
    color: #5c6bc0;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}
.docs-edit-btn:hover { background: #e8eaf6; color: #1a237e; }

/* 저장 / 취소 버튼 (편집 모드) */
.docs-action-btn {
    border: none;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    transition: background 0.15s;
}
.docs-save-btn   { background: #3949ab; color: #fff; }
.docs-save-btn:hover   { background: #283593; }
.docs-cancel-btn { background: #e0e0e0; color: #444; }
.docs-cancel-btn:hover { background: #bdbdbd; }

/* 편집 모드 textarea */
.docs-edit-textarea {
    width: 100%;
    height: 100%;
    min-height: 400px;
    box-sizing: border-box;
    border: none;
    outline: none;
    resize: none;
    font-family: 'Consolas', 'D2Coding', monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #263238;
    background: #fafbff;
    padding: 0;
    display: block;
}

/* 헤더 버튼 그룹 */
.docs-header-actions { display: flex; align-items: center; gap: 6px; }

/* PDF 저장 버튼 (green) */
.btn-docs-pdf {
    background: #f0fdf4; border: 1px solid #86efac; color: #16a34a;
    font-size: 0.78rem; padding: 4px 12px; border-radius: 5px;
    cursor: pointer; font-weight: 600;
}
.btn-docs-pdf:hover { background: #dcfce7; }

/* 편집 버튼 (blue, 설계서/화면설계서 공통) */
.btn-docs-edit {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8;
    font-size: 0.78rem; padding: 4px 12px; border-radius: 5px;
    cursor: pointer; font-weight: 600;
}
.btn-docs-edit:hover { background: #dbeafe; }

/* 편집 액션 바 */
.docs-edit-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 20px; background: #fefce8; border-bottom: 1px solid #fde68a;
    flex-shrink: 0;
}
.docs-edit-hint { font-size: 0.78rem; color: #92400e; }
.docs-edit-actions { display: flex; gap: 8px; }
.btn-docs-cancel {
    background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569;
    font-size: 0.78rem; padding: 5px 14px; border-radius: 5px; cursor: pointer;
}
.btn-docs-cancel:hover { background: #e2e8f0; }
.btn-docs-save {
    background: #1d4ed8; border: 1px solid #1e40af; color: #fff;
    font-size: 0.78rem; padding: 5px 14px; border-radius: 5px;
    cursor: pointer; font-weight: 600;
}
.btn-docs-save:hover { background: #1e40af; }
.btn-docs-save:disabled { background: #93c5fd; border-color: #93c5fd; cursor: not-allowed; }

/* 편집 모드: 다이얼로그 높이 확장 */
.docs-dialog--editing { height: 94vh; max-height: 94vh; }

/* EasyMDE 편집기 래퍼 */
.docs-editor-wrap { flex: 1; min-height: 0; overflow: hidden; display: block; }
.docs-editor-wrap .EasyMDEContainer  { height: 100%; overflow: hidden; }
.docs-editor-wrap .editor-toolbar    { border-top: none; background: #f8fafc;
                                       border-bottom: 1px solid #e2e8f0; padding: 4px 8px; }
.docs-editor-wrap .CodeMirror        { font-size: 0.84rem; overflow: hidden;
                                       font-family: 'Consolas','Monaco',monospace; line-height: 1.65; }
.docs-editor-wrap .CodeMirror-scroll { overflow-x: hidden !important; overflow-y: scroll !important; }
.docs-editor-wrap .CodeMirror-sizer  { min-width: 0 !important; }
.docs-editor-wrap .CodeMirror-lines  { padding: 0 !important; }
.docs-editor-wrap .editor-statusbar  { font-size: 0.72rem; padding: 3px 12px; }
.docs-editor-wrap .editor-preview    { overflow-y: auto; background: #fff; padding: 16px 24px; }

.docs-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* flex 자식이 overflow-y: auto로 스크롤되려면 필수 */
}

.docs-nav {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    padding: 12px 8px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.docs-nav-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.83rem;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    transition: background 0.12s;
    word-break: break-all;
}
.docs-nav-item:hover { background: #e8eaf6; }
.docs-nav-item.active { background: #e8eaf6; color: #1a237e; font-weight: 700; }

/* 폴더 항목 */
.docs-nav-folder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #3949ab;
}
.docs-nav-folder-count {
    font-size: 0.68rem;
    background: #e8eaf6;
    color: #3949ab;
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 700;
    flex-shrink: 0;
}

/* 폴더 드릴다운 — 뒤로가기 버튼 */
.docs-nav-back {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #5c6bc0;
    font-size: 0.79rem;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.12s;
    margin-bottom: 2px;
    flex-shrink: 0;
}
.docs-nav-back:hover { background: #e8eaf6; }

/* 폴더 드릴다운 — 폴더명 헤더 */
.docs-nav-folder-title {
    font-size: 0.68rem;
    font-weight: 800;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 10px 4px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.docs-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    min-height: 0;
}

.docs-placeholder, .docs-error {
    font-size: 0.88rem;
    color: #999;
    margin-top: 12px;
}
.docs-error { color: #c62828; }

/* ── op-mgr 네비 섹션 */
.docs-op-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 4px 6px;
    border-top: 1px solid #e0e0e0;
    font-size: 0.68rem;
    font-weight: 800;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex-shrink: 0;
}
.docs-op-new-btn {
    background: #e8f5e9;
    color: #2e7d32;
    border: none;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.docs-op-new-btn:hover { background: #c8e6c9; }
.docs-op-empty {
    font-size: 0.78rem;
    color: #bbb;
    padding: 4px 12px;
    font-style: italic;
}
.docs-op-file-row {
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: background 0.12s;
}
.docs-op-file-row:hover { background: #e8eaf6; }
.docs-op-file-row.active { background: #e8eaf6; }
.docs-op-file-btn {
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 4px 8px 12px;
    font-size: 0.83rem;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    word-break: break-all;
}
.docs-op-file-btn.active { color: #1a237e; font-weight: 700; }
.docs-op-rename-btn {
    background: none;
    border: none;
    padding: 5px 7px;
    color: #bbb;
    cursor: pointer;
    font-size: 0.76rem;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s;
}
.docs-op-file-row:hover .docs-op-rename-btn,
.docs-op-file-row.active .docs-op-rename-btn { opacity: 1; }
.docs-op-rename-btn:hover { color: #3949ab; background: #dde0f7; }
.docs-op-move-btn {
    background: none;
    border: none;
    padding: 4px 4px;
    color: #bbb;
    cursor: pointer;
    font-size: 0.6rem;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0;
    line-height: 1;
    transition: opacity 0.1s;
}
.docs-op-move-btn:disabled { cursor: default; }
.docs-op-file-row:hover .docs-op-move-btn:not(:disabled),
.docs-op-file-row.active .docs-op-move-btn:not(:disabled) { opacity: 1; color: #7986cb; }
.docs-op-move-btn:not(:disabled):hover { background: #dde0f7; }

/* ── op 파일명 입력 패널 */
.op-name-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.22);
    padding: 20px 24px;
    z-index: 20;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.op-name-panel.hidden { display: none; }
.op-name-panel-title { font-size: 0.92rem; font-weight: 700; color: #1a237e; }
.op-name-input {
    border: 1px solid #c5cae9;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.84rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}
.op-name-input:focus { border-color: #3949ab; }
.op-name-hint { font-size: 0.74rem; color: #999; }
.op-name-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.btn-op-cancel {
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    color: #555;
}
.btn-op-cancel:hover { background: #f5f5f5; }
.btn-op-confirm {
    background: #3949ab;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    font-weight: 600;
}
.btn-op-confirm:hover { background: #1a237e; }
.btn-op-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* 마크다운 렌더링 */
.md-body { font-size: 0.9rem; line-height: 1.75; color: #333; }
.md-body h1 { font-size: 1.3rem; color: #1a237e; border-bottom: 2px solid #e8eaf6; padding-bottom: 6px; margin: 0 0 16px; }
.md-body h2 { font-size: 1.1rem; color: #283593; margin: 24px 0 10px; }
.md-body h3 { font-size: 0.97rem; color: #3949ab; margin: 16px 0 8px; }
.md-body p  { margin: 0 0 10px; }
.md-body ul, .md-body ol { padding-left: 20px; margin: 0 0 10px; }
.md-body li { margin-bottom: 3px; }
.md-body code { background: #f0f2f5; border-radius: 4px; padding: 1px 5px; font-size: 0.85em; font-family: 'Consolas', monospace; }
.md-body pre  { background: #1e1e2e; border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 10px 0 14px; }
.md-body pre code { background: none; color: #cdd6f4; padding: 0; font-size: 0.83em; }
.md-body table { border-collapse: collapse; width: 100%; margin: 10px 0 14px; font-size: 0.85rem; }
.md-body th { background: #e8eaf6; color: #1a237e; padding: 7px 12px; text-align: left; border: 1px solid #d0d5e0; }
.md-body td { padding: 6px 12px; border: 1px solid #e0e0e0; }
.md-body tr:nth-child(even) td { background: #f9f9fc; }
.md-body blockquote { border-left: 3px solid #3949ab; margin: 0 0 10px; padding: 6px 14px; background: #f5f6fa; color: #555; }
.md-body a { color: #3949ab; text-decoration: none; }
.md-body a:hover { text-decoration: underline; }
.md-body hr { border: none; border-top: 1px solid #e0e0e0; margin: 18px 0; }

/* ── diff side-by-side viewer  (GitHub Dark palette) ───────── */
.diff-sec-hdr { cursor: pointer; user-select: none; }
.diff-sec-hdr:hover { opacity: 0.75; }
.dv-wrap { margin: 10px 0 18px; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.78rem; box-shadow: 0 4px 20px rgba(0,0,0,0.55); background: #0d1117; }
.dv-file { border-bottom: 1px solid #30363d; }
.dv-file:last-child { border-bottom: none; }
.dv-fhdr { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #161b22; cursor: pointer; user-select: none; border-bottom: 1px solid #30363d; }
.dv-fhdr:hover { background: #1c2128; }
.dv-ficon { color: #484f58; font-size: 0.65rem; flex-shrink: 0; }
.dv-fname { flex: 1; font-weight: 500; color: #adbac7; font-size: 0.81rem; word-break: break-all; }
.dv-fstat { display: flex; gap: 10px; flex-shrink: 0; }
.dv-fadd { color: #3fb950; font-weight: 600; }
.dv-fdel { color: #f85149; font-weight: 600; }
.dv-colhdr { display: grid; grid-template-columns: 1fr 1fr; }
.dv-colhdr > div { padding: 4px 16px; background: #0d1117; color: #6e7681; font-size: 0.68rem; font-weight: 700; text-align: center; letter-spacing: 0.08em; text-transform: uppercase; }
.dv-colhdr > div:first-child { border-right: 1px solid #30363d; }
.dv-hkhdr { padding: 3px 16px; background: #1d2840; color: #79c0ff; font-size: 0.73rem; border-top: 1px solid #21262d; font-style: italic; }
.dv-fbody { overflow-x: auto; }
.dv-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 600px; }
.dv-tbl td { border: none !important; }
.dv-ln { width: 40px; min-width: 40px; text-align: right; padding: 2px 8px; background: #0d1117 !important; color: #6e7681; font-size: 0.7rem; user-select: none; border-right: 1px solid #21262d !important; white-space: nowrap; vertical-align: top; }
.dv-ln-r { border-left: 1px solid #30363d !important; }
.dv-cd { padding: 2px 12px; white-space: pre; overflow: hidden; background: #0d1117 !important; color: #e6edf3; vertical-align: top; }
.dv-cd.dv-ctx { background: #0d1117 !important; color: #e6edf3; }
.dv-cd.dv-del { background: #3d1c20 !important; color: #ffa198; }
.dv-cd.dv-add { background: #1b3a27 !important; color: #7ee787; }
.dv-cd.dv-gap { background: #0d1117 !important; }
.dv-mark { width: 18px; min-width: 18px; text-align: center; padding: 2px 4px; background: #0d1117 !important; color: #6e7681; font-size: 0.78rem; user-select: none; vertical-align: top; border-right: 1px solid #21262d !important; }
.dv-mark.dv-del { background: #3d1c20 !important; color: #f85149; }
.dv-mark.dv-add { background: #1b3a27 !important; color: #3fb950; }
.dv-mark.dv-ctx { background: #0d1117 !important; color: #6e7681; }
.dv-mark.dv-gap { background: #0d1117 !important; }

/* ── merged file block (.mfb) ───────────────────────────────── */
.mfb { border: 1px solid #30363d; border-radius: 8px; margin: 12px 0; overflow: hidden; }
.mfb-hdr { background: #161b22; padding: 10px 16px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid #30363d; }
.mfb-fname { color: #e6edf3; font-weight: 700; font-size: 0.85rem; font-family: 'Consolas','Monaco',monospace; flex-shrink: 0; }
.mfb-fpath { color: #484f58; font-size: 0.71rem; font-family: 'Consolas','Monaco',monospace; word-break: break-all; }
.mfb-desc { padding: 8px 16px 10px; background: #0d1117; border-bottom: 1px solid #21262d; font-size: 0.82rem; color: #8b949e; line-height: 1.55; }
.mfb-desc p { margin: 2px 0 4px; }
.mfb-desc code { background: #161b22; padding: 1px 5px; border-radius: 3px; font-size: 0.8em; color: #adbac7; }
.mfb .dv-wrap { margin: 0; border: none; border-radius: 0; box-shadow: none; }
.mfb .dv-fhdr { background: #0d1117; border-top: 1px solid #21262d; border-bottom: none; }
.mfb .dv-fhdr .dv-fname { display: none; }

/* ── 산출물 모달 탭 ──────────────────────────────────── */
.docs-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    background: #f5f6fa;
    flex-shrink: 0;
}
.docs-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 22px;
    font-size: 0.83rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.docs-tab:hover { color: #3949ab; }
.docs-tab.active { color: #1a237e; border-bottom-color: #3949ab; }

.docs-tab-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.docs-tab-panel.hidden { display: none; }

/* ══════════════════════════════════════════════════════
   Confluence Wiki (산출물 > Wiki 탭)
   ══════════════════════════════════════════════════════ */
.wiki-nav    { width: 240px; gap: 2px; min-height: 0; }

/* ── 네비게이션 입력 ── */
.wiki-search-input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1.5px solid #d0d5e0;
    border-radius: 7px;
    font-size: 0.82rem;
    color: #333;
    outline: none;
    margin-bottom: 5px;
    flex-shrink: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 9px center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wiki-search-input:focus {
    border-color: #3949ab;
    box-shadow: 0 0 0 3px rgba(57,73,171,0.1);
}
.wiki-url-input {
    padding-left: 10px;
    background-image: none;
}
.wiki-url-input::placeholder { font-size: 0.78rem; }

/* ── 네비게이션 항목 ── */
.wiki-nav-back {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #5c6bc0;
    font-size: 0.79rem;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    letter-spacing: 0.1px;
    transition: background 0.12s;
}
.wiki-nav-back:hover { background: #e8eaf6; }

.wiki-space-title {
    font-size: 0.68rem;
    font-weight: 800;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 10px 4px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
}

.wiki-nav-space { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wiki-space-icon { font-size: 0.82rem; flex-shrink: 0; opacity: 0.7; }
.wiki-space-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-space-type {
    font-size: 0.62rem;
    background: #ede7f6;
    color: #7e57c2;
    border-radius: 3px;
    padding: 1px 5px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── 검색 결과 ── */
.wiki-search-result  { display: flex; flex-direction: column; gap: 2px; }
.wiki-result-title   { font-size: 0.83rem; font-weight: 500; color: #333; }
.wiki-result-space   { font-size: 0.71rem; color: #aaa; }

/* ── 콘텐츠 영역 ── */
.wiki-content {
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ══════════════════════════════════════════════════════
   페이지 헤더
   ══════════════════════════════════════════════════════ */
.wiki-page-header {
    padding: 26px 32px 18px;
    border-bottom: 1px solid #e8eaf6;
    background: linear-gradient(160deg, #f5f7ff 0%, #fafafa 100%);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
}
.wiki-page-breadcrumb {
    display: inline-flex;
    align-items: center;
    font-size: 0.71rem;
    font-weight: 700;
    color: #5c6bc0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e8eaf6;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.wiki-page-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #1a237e;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
}
.wiki-page-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.wiki-page-meta {
    font-size: 0.73rem;
    color: #aaa;
    background: #f3f3f3;
    padding: 2px 9px;
    border-radius: 4px;
}
.wiki-open-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #3949ab;
    text-decoration: none;
    border: 1.5px solid #c5cae9;
    padding: 3px 11px;
    border-radius: 20px;
    transition: background 0.15s, border-color 0.15s;
}
.wiki-open-link:hover { background: #e8eaf6; border-color: #9fa8da; }

/* 모바일 전용 back 버튼 — 데스크탑에서는 숨김 */
.wiki-mobile-back { display: none; }

/* ══════════════════════════════════════════════════════
   페이지 본문
   ══════════════════════════════════════════════════════ */
.wiki-body {
    padding: 28px 32px 36px;
    font-size: 0.9rem;
    line-height: 1.82;
    color: #2d2d2d;
    overflow-x: auto;
    flex: 1;
}

/* 헤딩 */
.wiki-body h1 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1a237e;
    letter-spacing: -0.2px;
    padding-bottom: 10px;
    margin: 6px 0 18px;
    border-bottom: 2px solid #e8eaf6;
}
.wiki-body h2 {
    font-size: 1.08rem;
    font-weight: 700;
    color: #283593;
    margin: 30px 0 12px;
    padding-left: 12px;
    border-left: 3px solid #5c6bc0;
}
.wiki-body h3 {
    font-size: 0.97rem;
    font-weight: 700;
    color: #3949ab;
    margin: 22px 0 8px;
}
.wiki-body h4, .wiki-body h5, .wiki-body h6 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #555;
    margin: 16px 0 6px;
}

/* 단락 / 목록 */
.wiki-body p            { margin: 0 0 13px; }
.wiki-body ul, .wiki-body ol { padding-left: 24px; margin: 0 0 13px; }
.wiki-body li           { margin-bottom: 5px; line-height: 1.7; }
.wiki-body li:last-child { margin-bottom: 0; }

/* 링크 */
.wiki-body a {
    color: #3949ab;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s;
}
.wiki-body a:hover { border-bottom-color: #5c6bc0; }

/* 인라인 코드 */
.wiki-body code {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 0.87em;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    color: #3949ab;
}

/* 코드 블록 */
.wiki-body pre {
    background: none;
    border: none;
    border-left: 3px solid #c5cae9;
    border-radius: 0;
    padding: 10px 0 10px 16px;
    overflow-x: auto;
    margin: 12px 0 16px;
}
.wiki-body pre code {
    background: none;
    border: none;
    color: #263238;
    padding: 0;
    font-size: 0.85em;
    line-height: 1.75;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
}
/* Confluence: code panel 매크로 */
.wiki-body .code.panel,
.wiki-body .codeContent,
.wiki-body .syntaxhighlighter {
    background: none !important;
    border: none !important;
    border-left: 3px solid #c5cae9 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 12px 0 16px !important;
    overflow-x: auto !important;
    box-shadow: none !important;
}
.wiki-body .codeContent pre,
.wiki-body .syntaxhighlighter pre {
    background: none !important;
    border: none !important;
    border-left: none !important;
    margin: 0 !important;
    padding: 10px 0 10px 16px !important;
    color: #263238 !important;
    font-size: 0.85em !important;
    line-height: 1.75 !important;
}
/* 줄번호 등 decorator는 숨김 */
.wiki-body .syntaxhighlighter .line .number { color: #9fa8c7 !important; }
.wiki-body .syntaxhighlighter .bar          { display: none !important; }

/* 테이블 */
.wiki-body .wiki-table-wrap { overflow-x: auto; margin: 14px 0 18px; }
.wiki-body table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 14px 0 18px;
    font-size: 0.85rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    border: 1px solid #e0e4f0;
}
.wiki-body th {
    background: #3949ab;
    color: #fff;
    padding: 10px 15px;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-right: 1px solid #4a5bbf;
}
.wiki-body th:last-child { border-right: none; }
.wiki-body td {
    padding: 9px 15px;
    border-bottom: 1px solid #eef0f8;
    border-right: 1px solid #eef0f8;
    color: #3a3a3a;
    vertical-align: top;
}
.wiki-body td:last-child  { border-right: none; }
.wiki-body tr:last-child td { border-bottom: none; }
.wiki-body tr:nth-child(even) td { background: #f8f9fd; }
.wiki-body tr:hover td { background: #eef0fb; transition: background 0.1s; }

/* 인용 */
.wiki-body blockquote {
    border-left: 4px solid #7986cb;
    margin: 14px 0 16px;
    padding: 12px 18px;
    background: #f5f7ff;
    border-radius: 0 8px 8px 0;
    color: #555;
    font-style: italic;
}

/* 이미지 */
.wiki-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    margin: 8px 0;
}

/* 구분선 */
.wiki-body hr {
    border: none;
    border-top: 2px solid #e8eaf6;
    margin: 24px 0;
}

/* ── Confluence 매크로 박스 ── */
.wiki-body .confluence-information-macro {
    border-radius: 8px;
    padding: 13px 16px 13px 46px;
    margin: 14px 0;
    font-size: 0.86rem;
    position: relative;
    line-height: 1.65;
}
.wiki-body .confluence-information-macro::before {
    position: absolute;
    left: 14px;
    top: 13px;
    font-size: 1rem;
}
.wiki-body .confluence-information-macro-note {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
}
.wiki-body .confluence-information-macro-note::before    { content: '📝'; }
.wiki-body .confluence-information-macro-tip {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #22c55e;
}
.wiki-body .confluence-information-macro-tip::before     { content: '💡'; }
.wiki-body .confluence-information-macro-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 4px solid #f97316;
}
.wiki-body .confluence-information-macro-warning::before { content: '⚠️'; }
.wiki-body .confluence-information-macro-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
}
.wiki-body .confluence-information-macro-danger::before  { content: '🚨'; }
/* Confluence panel 매크로 */
.wiki-body .panel {
    border: 1px solid #dde1f0;
    border-radius: 8px;
    overflow: hidden;
    margin: 14px 0;
}
.wiki-body .panelHeader {
    background: #e8eaf6;
    color: #283593;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 8px 14px;
}
.wiki-body .panelContent { padding: 12px 14px; font-size: 0.86rem; }

/* 구성도 모달 ── */
.arch-dialog {
    max-width: 1200px;
    width: 100%;
}
.arch-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e4f0;
    padding: 0 24px;
    background: #fff;
    flex-shrink: 0;
}
.arch-tab {
    padding: 8px 22px;
    border: none;
    background: none;
    font-size: 0.84rem;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 4px 4px 0 0;
}
.arch-tab.active {
    color: #3949ab;
    border-bottom-color: #3949ab;
}
.arch-tab:hover:not(.active) {
    color: #5c6bc0;
    background: #f3f4ff;
}
.arch-tab-content {
    width: 100%;
}
.arch-tab-content.hidden {
    display: none;
}
.arch-body {
    padding: 20px 24px 24px;
    overflow: auto;
    flex: 1;
    background: #fafafa;
}
#arch-svg,
#arch-screen-svg,
#arch-dir-svg {
    width: 100%;
    height: auto;
    display: block;
    min-width: 640px;
}

/* ── DynamoDB 모달 ── */
.dynamo-dialog { max-width: 1200px; min-height: 540px; }

.dynamo-region-badge {
    font-size: 0.72rem;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    font-weight: 600;
}

.dynamo-nav {
    width: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

#dynamo-table-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.dynamo-table-pager {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.btn-dynamo-pg {
    background: #e8eaf6;
    color: #3949ab;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-dynamo-pg:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-dynamo-pg:hover:not(:disabled) { background: #c5cae9; }

.btn-dynamo-pg-num {
    background: #f3f4fb;
    color: #3949ab;
    border: 1.5px solid #c5cae9;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 30px;
    transition: background 0.15s;
}
.btn-dynamo-pg-num:hover { background: #c5cae9; }
.btn-dynamo-pg-num.active {
    background: #3949ab;
    color: #fff;
    border-color: #3949ab;
    cursor: default;
    font-weight: 700;
}
.dynamo-pg-ellipsis {
    font-size: 0.82rem;
    color: #aaa;
    padding: 0 3px;
    display: flex;
    align-items: center;
    user-select: none;
}

.dynamo-pager-loading {
    display: flex;
    align-items: center;
    padding: 6px 2px;
}
.dynamo-pager-loading-bar {
    width: 140px;
    height: 3px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.dynamo-pager-loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -45%;
    width: 45%;
    height: 100%;
    background: #3949ab;
    border-radius: 2px;
    animation: dynamo-pager-slide 1.2s ease-in-out infinite;
}
@keyframes dynamo-pager-slide {
    0%   { left: -45%; }
    100% { left: 100%; }
}
.dynamo-pager-loading-txt {
    font-size: 0.72rem;
    color: #64748b;
    margin-left: 8px;
}

.dynamo-total-count {
    font-size: 0.75rem;
    color: #7986cb;
    font-weight: 400;
    margin-left: 2px;
}

/* ── DynamoDB 쿼리 패널 ── */
.dynamo-query-panel {
    background: #f8f9ff;
    border: 1px solid #e0e4f0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 16px;
    flex-shrink: 0;
}

.dynamo-query-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #5c6bc0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.dynamo-query-input {
    width: 100%;
    height: 72px;
    padding: 8px 10px;
    border: 1.5px solid #d0d5e0;
    border-radius: 6px;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    font-size: 0.83rem;
    color: #263238;
    background: #fff;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.55;
}
.dynamo-query-input:focus {
    border-color: #3949ab;
    box-shadow: 0 0 0 3px rgba(57,73,171,0.08);
}

.dynamo-query-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.btn-dynamo-exec {
    background: #3949ab;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-dynamo-exec:hover { background: #283593; }

.dynamo-query-hint {
    font-size: 0.72rem;
    color: #aaa;
}

/* ── s2tMonitorResults 검색 필터 패널 ── */
.monitor-filter-bar {
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.monitor-filter-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #3949ab;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}
.monitor-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.monitor-filter-label {
    font-size: 0.76rem;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}
.monitor-filter-input {
    height: 28px;
    padding: 0 8px;
    border: 1.5px solid #c7d2fe;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #1e293b;
    background: #fff;
    outline: none;
    cursor: pointer;
}
.monitor-filter-input:focus { border-color: #3949ab; }
.monitor-filter-input-sm { width: 80px; }
.monitor-filter-date {
    height: 28px;
    padding: 0 6px;
    border: 1.5px solid #c7d2fe;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #1e293b;
    background: #fff;
    outline: none;
}
.monitor-filter-date:focus { border-color: #3949ab; }
.monitor-filter-sep { font-size: 0.8rem; color: #94a3b8; }
.monitor-filter-btn {
    height: 28px;
    padding: 0 14px;
    background: #3949ab;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    margin-left: 4px;
}
.monitor-filter-btn:hover { background: #283593; }
.monitor-filter-btn-reset {
    height: 28px;
    padding: 0 10px;
    background: #fff;
    color: #64748b;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}
.monitor-filter-btn-reset:hover { background: #f1f5f9; }

/* ── 결과 영역 ── */
.dynamo-items-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eaf6;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dynamo-items-count {
    font-size: 0.78rem;
    font-weight: 400;
    color: #888;
    margin-left: 6px;
}

.dynamo-items-table-wrap { overflow-x: auto; }

.dynamo-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.dynamo-items-table th {
    background: #e8eaf6;
    color: #1a237e;
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #d0d5e0;
    font-weight: 700;
    white-space: nowrap;
}

.dynamo-items-table th.key-col {
    background: #c5cae9;
}
.dynamo-items-table th.dynamo-sortable {
    cursor: pointer;
    user-select: none;
}
.dynamo-items-table th.dynamo-sortable:hover {
    background: #9fa8da;
}
.dynamo-full-scan-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: normal;
    color: #5c6bc0;
    cursor: pointer;
    margin-left: 12px;
    vertical-align: middle;
}
.dynamo-full-scan-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #5c6bc0;
}

.dynamo-items-table td {
    padding: 7px 12px;
    border: 1px solid #e8e8e8;
    color: #444;
    vertical-align: top;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dynamo-items-table tr:nth-child(even) td { background: #f9f9fc; }
.dynamo-items-table tr:hover td { background: #eef0fb; }

.dynamo-mode-badge {
    font-size: 0.68rem;
    background: #e8eaf6;
    color: #3949ab;
    border-radius: 4px;
    padding: 2px 7px;
    font-weight: 700;
    margin-left: 2px;
}
.dynamo-mode-badge.query {
    background: #e8f5e9;
    color: #2e7d32;
}

.dynamo-null     { color: #bbb; font-style: italic; }
.dynamo-empty    { text-align: center; color: #999; padding: 20px !important; }
.dynamo-exec-ok  { text-align: center; color: #2e7d32; font-weight: 600; padding: 16px !important; background: #f0fdf4; }

/* ── DynamoDB 오류 박스 ── */
.dynamo-error-box {
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 4px;
}
.dynamo-error-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #dc2626;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.dynamo-error-msg {
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: #7f1d1d;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    line-height: 1.65;
}

.dynamo-items-pager {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid #e8eaf6;
}

/* ── DynamoDB 탭 ── */
.dynamo-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-bottom: 2px solid #e0e4f0;
    flex-shrink: 0;
}

.dynamo-tab {
    padding: 6px 20px;
    border: none;
    background: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 4px 4px 0 0;
}

.dynamo-tab.active {
    color: #3949ab;
    border-bottom-color: #3949ab;
}

.dynamo-tab:hover:not(.active) {
    color: #5c6bc0;
    background: #f3f4ff;
}

/* ── DynamoDB 스키마 ── */
.dynamo-schema-wrap {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.dynamo-schema-section {
    margin-bottom: 20px;
}

.dynamo-schema-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #5c6bc0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.dynamo-schema-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dynamo-schema-info-item {
    background: #f8f9ff;
    border: 1px solid #e0e4f0;
    border-radius: 6px;
    padding: 8px 12px;
}

.dynamo-schema-info-label {
    font-size: 0.68rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}

.dynamo-schema-info-value {
    font-size: 0.84rem;
    color: #333;
    font-weight: 600;
    word-break: break-all;
}

.dynamo-schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.dynamo-schema-table th {
    background: #3949ab;
    color: #fff;
    padding: 7px 12px;
    text-align: left;
    font-weight: 600;
}

.dynamo-schema-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.dynamo-schema-table tr:nth-child(even) td { background: #f9f9fc; }
.dynamo-schema-table tr:hover td { background: #eef0fb; }

.dynamo-schema-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
}

.dynamo-schema-badge.hash   { background: #e3f2fd; color: #1565c0; }
.dynamo-schema-badge.range  { background: #f3e5f5; color: #7b1fa2; }
.dynamo-schema-badge.type-s { background: #e8f5e9; color: #2e7d32; }
.dynamo-schema-badge.type-n { background: #fff3e0; color: #e65100; }
.dynamo-schema-badge.type-b { background: #fce4ec; color: #c62828; }
.dynamo-schema-badge.type-etc { background: #f5f5f5; color: #555; }

.dynamo-schema-arn {
    font-family: monospace;
    font-size: 0.78rem;
    color: #555;
    background: #f8f9ff;
    border: 1px solid #e0e4f0;
    border-radius: 6px;
    padding: 8px 12px;
    word-break: break-all;
}

.dynamo-schema-index-card {
    background: #f8f9ff;
    border: 1px solid #e0e4f0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.dynamo-schema-index-name {
    font-weight: 700;
    color: #3949ab;
    font-size: 0.88rem;
    margin-bottom: 6px;
}

.dynamo-schema-index-meta {
    font-size: 0.78rem;
    color: #666;
    margin-bottom: 4px;
}

/* ── DynamoDB 테이블 생성 / 아이템 CRUD 폼 ── */

.dynamo-nav-header {
    padding: 10px 8px 8px;
    border-bottom: 1px solid #e0e4f0;
    flex-shrink: 0;
}

.btn-dynamo-create-table {
    width: 100%;
    background: #3949ab;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-dynamo-create-table:hover { background: #283593; }

.dynamo-form-wrap {
    padding: 4px 2px;
    max-width: 560px;
}

.dynamo-form-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eaf6;
}
.dynamo-form-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eaf6;
}
.dynamo-form-title-row > span {
    font-size: 0.96rem;
    font-weight: 700;
    color: #1a237e;
}
.dynamo-help-btn {
    font-size: 0.74rem;
    font-weight: 600;
    color: #3949ab;
    background: #e8eaf6;
    border: 1px solid #c5cae9;
    border-radius: 5px;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dynamo-help-btn:hover { background: #c5cae9; }
.dynamo-help-btn.active { background: #3949ab; color: #fff; border-color: #3949ab; }

/* ── 테이블 생성 도움말 패널 ── */
.dynamo-help-panel {
    background: #f0f4ff;
    border: 1px solid #c5cae9;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 0.79rem;
    color: #333;
    line-height: 1.65;
}
.dynamo-help-section {
    margin-bottom: 13px;
}
.dynamo-help-section:last-child { margin-bottom: 0; }
.dynamo-help-heading {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 3px;
}
.dynamo-help-tip {
    font-size: 0.74rem;
    color: #444;
    background: #fff;
    border-left: 3px solid #7986cb;
    border-radius: 0 4px 4px 0;
    padding: 5px 10px;
    margin-top: 6px;
}
.dynamo-help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 5px 0;
    font-size: 0.77rem;
}
.dynamo-help-table td {
    padding: 4px 8px;
    vertical-align: top;
}
.dynamo-help-table tr:nth-child(even) td { background: rgba(255,255,255,0.55); }
.dynamo-help-example-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dashed #c5cae9;
    font-size: 0.77rem;
}
.dynamo-help-example-row:last-child { border-bottom: none; }
.dynamo-help-example-label {
    font-weight: 600;
    color: #3949ab;
    min-width: 76px;
    flex-shrink: 0;
}
.dynamo-help-example-val {
    color: #444;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.dynamo-form-table-name {
    font-size: 0.82rem;
    color: #5c6bc0;
    font-weight: 400;
    margin-left: 6px;
}

.dynamo-form-section { margin-bottom: 14px; }

.dynamo-form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 5px;
}
.dynamo-form-required { color: #e53935; }
.dynamo-form-optional { color: #aaa; font-weight: 400; }
.dynamo-form-hint { color: #aaa; font-weight: 400; font-size: 0.72rem; }

.dynamo-form-row { display: flex; gap: 8px; align-items: center; }

.dynamo-form-input {
    padding: 7px 10px;
    border: 1.5px solid #d0d5e0;
    border-radius: 6px;
    font-size: 0.84rem;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
}
.dynamo-form-input:focus { border-color: #3949ab; box-shadow: 0 0 0 2px rgba(57,73,171,0.08); }

.dynamo-form-select {
    padding: 7px 10px;
    border: 1.5px solid #d0d5e0;
    border-radius: 6px;
    font-size: 0.84rem;
    color: #333;
    background: #fff;
    outline: none;
    cursor: pointer;
}
.dynamo-form-select:focus { border-color: #3949ab; }

.dynamo-form-textarea {
    width: 100%;
    min-height: 200px;
    padding: 8px 10px;
    border: 1.5px solid #d0d5e0;
    border-radius: 6px;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    font-size: 0.83rem;
    color: #263238;
    background: #fff;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.55;
    box-sizing: border-box;
}
.dynamo-form-textarea:focus {
    border-color: #3949ab;
    box-shadow: 0 0 0 3px rgba(57,73,171,0.08);
}
.dynamo-form-textarea.json-valid {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.08);
}
.dynamo-form-textarea.json-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.08);
}


.put-item-json-status {
    font-size: 0.75rem;
    margin-top: 5px;
    min-height: 1.1em;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
}
.put-item-json-status.json-valid   { color: #16a34a; }
.put-item-json-status.json-invalid { color: #dc2626; }

.dynamo-form-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}

.btn-dynamo-cancel {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-dynamo-cancel:hover { background: #e8eaf6; }

/* ── 아이템 추가 버튼 바 ── */
.dynamo-add-item-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.btn-dynamo-add-item {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-dynamo-add-item:hover { background: #c8e6c9; }

/* ── 행 액션 버튼 ── */
.dynamo-action-col {
    width: 62px;
    text-align: center !important;
    white-space: nowrap;
}
.dynamo-action-cell {
    text-align: center;
    white-space: nowrap;
    vertical-align: middle !important;
}
.btn-dynamo-row-edit,
.btn-dynamo-row-del {
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btn-dynamo-row-edit { background: #e3f2fd; color: #1565c0; margin-right: 3px; }
.btn-dynamo-row-edit:hover { background: #bbdefb; }
.btn-dynamo-row-del { background: #fce4ec; color: #c62828; }
.btn-dynamo-row-del:hover { background: #f8bbd0; }

/* ── Responsive (mobile) ── */
@media (max-width: 640px) {

    /* ── 헤더 ── */
    header {
        height: auto;
        padding: 10px 14px;
    }
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .header-title {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    h1 { font-size: 1.05rem; }
    .header-sub { display: none; }          /* 부제목 숨김 */
    .header-meta {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .summary { font-size: 0.78rem; gap: 8px; }
    .last-updated { display: none; }         /* 갱신시각 숨김 */
    .header-bottom { gap: 6px; }
    .btn-docs, .btn-logout {
        font-size: 0.74rem;
        padding: 4px 8px;
    }

    /* ── 메인 그리드 ── */
    main { padding: 10px 12px 20px; gap: 12px; min-height: calc(100vh - 90px); }
    .server-grid { flex-direction: column; gap: 8px; }
    .card { width: 100%; padding: 6px 12px; }
    .docs-section { min-height: 400px; }
    .scroll-top-btn { bottom: 14px; right: 14px; width: 34px; height: 34px; font-size: 0.9rem; }

    /* ── Toast ── */
    .toast {
        left: 12px;
        right: 12px;
        bottom: 14px;
        text-align: center;
    }

    /* ── 비용 바: 2줄 구조 (라벨+버튼 / 금액) ── */
    .cost-bar {
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
    }
    .cost-bar-label  { order: 1; flex: 1; font-size: 0.8rem; }
    .cost-account-id { display: none; }      /* 계정ID 숨김 */
    .btn-cost-detail { order: 2; font-size: 0.74rem; padding: 4px 10px; }
    .cost-bar-amounts {
        order: 3;
        width: 100%;
        flex-direction: column;
        gap: 2px;
    }
    .cost-bar-sep { display: none; }
    .cost-bar-group { font-size: 0.78rem; gap: 4px; flex-wrap: nowrap; }
    .cost-bar-group-label { font-size: 0.68rem; }

    /* ── 비용 모달 요약 카드: 2×2 그리드 ── */
    .docs-modal { padding: 8px; }
    .cost-summary-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .cost-summary-card {
        flex: 0 0 calc(50% - 4px);
        padding: 12px 10px;
    }
    .cost-summary-amount { font-size: 1rem; }
    .cost-summary-label  { font-size: 0.72rem; }
    .cost-modal-body { padding: 14px; }

    /* ── 문서 / Wiki 모달 공통 ── */
    .docs-modal  { padding: 8px; align-items: flex-end; }
    .docs-dialog {
        max-height: 90vh;
        height: 90vh;           /* 모바일에서 고정 높이로 스크롤 계산 가능하게 */
        border-radius: 16px 16px 8px 8px;
    }
    .docs-body { flex-direction: column; overflow: hidden; }

    /* ── .md 문서 모달 nav: 가로 탭 (wrap X, 가로 스크롤) ── */
    .docs-nav {
        width: 100%;
        max-height: 52px;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 8px;
        gap: 4px;
        flex-shrink: 0;
    }
    .docs-nav-item { width: auto; flex-shrink: 0; }
    .docs-content  { padding: 14px; flex: 1; min-height: 0; }

    /* ── Wiki 탭: step 방식 ───────────────────────────────
       #docs-tab-wiki에 .wiki-show-content 클래스 유무로 전환
       JS에서 window.innerWidth 체크 없이 CSS만으로 제어
    ─────────────────────────────────────────────────── */

    /* 기본(Step 1/2): nav 전체화면, content 숨김 */
    .wiki-nav {
        display: flex;
        flex: 1;
        min-height: 0;
        max-height: none;        /* docs-nav의 52px 제한 해제 */
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: none;
        border-bottom: none;
        padding: 10px 8px;
        gap: 2px;
        flex-shrink: 1;
    }
    .wiki-content { display: none; }

    /* Step 3: content 전체화면, nav 숨김 */
    .wiki-show-content .wiki-nav     { display: none; }
    .wiki-show-content .wiki-content {
        display: flex;
        flex: 1;
        min-height: 0;
        flex-direction: column;
        overflow-y: auto;
        padding: 0;
    }

    /* 본문 상단 "← 목록" 버튼 */
    .wiki-mobile-back {
        display: flex;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        color: #5c6bc0;
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0 0 10px;
        cursor: pointer;
    }

    .wiki-page-header { padding: 12px 14px; }
    .wiki-page-title  { font-size: 1.05rem; }
    .wiki-body        { padding: 12px 14px 32px; font-size: 0.86rem; }

}

/* ══════════════════════════════════════════════════════
   사용자 관리 모달
   ══════════════════════════════════════════════════════ */
.users-dialog { max-width: 1200px; }

.users-content {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

/* ── 툴바 ── */
.users-toolbar { margin-bottom: 16px; }

.btn-users-add {
    background: #3949ab; color: #fff;
    border: none; border-radius: 6px;
    padding: 7px 16px; font-size: 0.85rem;
    cursor: pointer; font-weight: 600;
}
.btn-users-add:hover { background: #303f9f; }

/* ── 사용자 목록 테이블 ── */
.users-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.86rem;
}
.users-table th {
    background: #3949ab; color: #fff;
    padding: 8px 12px; text-align: left;
    font-weight: 600; white-space: nowrap;
}
.users-table td {
    padding: 8px 12px; border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}
.users-table tr:hover td { background: #f8fafc; }
.users-actions { white-space: nowrap; }

/* ── 배지 ── */
.users-badge {
    display: inline-block; border-radius: 4px;
    padding: 2px 8px; font-size: 0.75rem; font-weight: 600;
}
.users-badge-admin { background: #ede7f6; color: #5e35b1; }
.users-badge-user  { background: #e8f5e9; color: #2e7d32; }
.users-badge-on    { background: #e0f2f1; color: #00695c; }
.users-badge-off   { background: #fce4ec; color: #c62828; }

/* ── 행 버튼 ── */
.btn-users-edit {
    background: #f0f4ff; color: #3949ab;
    border: 1px solid #c5cae9; border-radius: 4px;
    padding: 3px 10px; font-size: 0.78rem;
    cursor: pointer; margin-right: 4px;
}
.btn-users-edit:hover { background: #e8eaf6; }

.btn-users-del {
    background: #fff5f5; color: #e53e3e;
    border: 1px solid #fed7d7; border-radius: 4px;
    padding: 3px 10px; font-size: 0.78rem;
    cursor: pointer;
}
.btn-users-del:hover { background: #fed7d7; }

/* ── 추가/수정 폼 ── */
.users-form {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 16px 20px;
    margin-bottom: 20px;
}
.users-form-title {
    font-size: 0.9rem; font-weight: 700;
    color: #3949ab; margin-bottom: 14px;
}
.users-form-row {
    display: flex; gap: 16px; margin-bottom: 12px;
    flex-wrap: wrap;
}
.users-form-label {
    display: flex; flex-direction: column;
    gap: 4px; font-size: 0.8rem;
    color: #475569; flex: 1; min-width: 160px;
}
.users-input {
    border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 6px 10px; font-size: 0.84rem;
    outline: none; background: #fff;
}
.users-input:focus { border-color: #3949ab; }

.users-check-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.84rem; color: #334155; cursor: pointer;
}

.users-form-actions {
    display: flex; gap: 8px; margin-top: 4px;
}
.btn-users-submit {
    background: #3949ab; color: #fff;
    border: none; border-radius: 5px;
    padding: 6px 18px; font-size: 0.84rem;
    font-weight: 600; cursor: pointer;
}
.btn-users-submit:hover { background: #303f9f; }

.btn-users-cancel {
    background: #f1f5f9; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 6px 18px; font-size: 0.84rem;
    cursor: pointer;
}
.btn-users-cancel:hover { background: #e2e8f0; }

.users-form-hint {
    font-size: 0.78rem; color: #64748b;
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 5px; padding: 6px 12px;
    margin-bottom: 10px;
}

/* 가입 요청 대기 섹션 */
.users-pending-section {
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 8px; padding: 14px 16px;
    margin-bottom: 20px;
}
.users-pending-title {
    font-size: 0.88rem; font-weight: 700;
    color: #b45309; margin-bottom: 10px;
}

.btn-users-approve {
    background: #f0fdf4; color: #16a34a;
    border: 1px solid #86efac; border-radius: 4px;
    padding: 3px 10px; font-size: 0.78rem;
    cursor: pointer;
}
.btn-users-approve:hover { background: #dcfce7; }

/* ── 로그 관리 팝업 ─────────────────────────────────────── */
.logs-dialog {
    max-width: 1200px; width: 95vw;
    max-height: 85vh; display: flex; flex-direction: column;
}
.logs-body {
    display: flex; flex: 1; overflow: hidden;
    min-height: 0;
}

/* 서버 목록 nav */
.logs-nav {
    width: 160px; min-width: 140px;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto; padding: 8px 0;
    flex-shrink: 0;
}
.logs-nav-loading { font-size: 0.82rem; color: #94a3b8; padding: 12px; }
.logs-nav-item {
    padding: 10px 14px; cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .15s;
}
.logs-nav-item:hover { background: #f0f4ff; }
.logs-nav-item.active {
    background: #eef2ff;
    border-left-color: #5c6bc0;
}
.logs-nav-name {
    display: block; font-size: 0.88rem; font-weight: 600; color: #334155;
}
.logs-nav-meta {
    display: block; font-size: 0.74rem; color: #94a3b8; margin-top: 2px;
}

/* 메인 영역 */
.logs-main {
    flex: 1; overflow-y: auto; padding: 14px 18px; min-width: 0;
}

/* 툴바 */
.logs-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; flex-wrap: wrap;
}
.logs-server-title {
    font-size: 0.95rem; font-weight: 700; color: #1e293b; margin-right: auto;
}
.logs-file-count {
    font-size: 0.78rem; color: #64748b; font-weight: 400; margin-left: 6px;
}
.logs-toolbar-actions { display: flex; gap: 6px; }

/* 툴바 버튼 */
.btn-logs-sel-all, .btn-logs-refresh {
    background: #f1f5f9; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 4px 10px; font-size: 0.78rem; cursor: pointer;
}
.btn-logs-sel-all:hover, .btn-logs-refresh:hover { background: #e2e8f0; }
.btn-logs-del-sel {
    background: #fff1f2; color: #be123c;
    border: 1px solid #fecdd3; border-radius: 5px;
    padding: 4px 10px; font-size: 0.78rem; cursor: pointer;
}
.btn-logs-del-sel:hover { background: #ffe4e6; }

/* 파일 목록 테이블 */
.logs-table-wrap { overflow-x: auto; }
.logs-table {
    width: 100%; border-collapse: collapse; font-size: 0.83rem;
}
.logs-table th {
    background: #3949ab; color: #fff;
    padding: 8px 10px; text-align: left; font-weight: 600;
    white-space: nowrap; user-select: none;
}
.logs-table th.logs-th-active {
    background: #283593;
}
.logs-table td {
    padding: 7px 10px; border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.logs-table tr:hover td { background: #f8fafc; }
.logs-chk-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.logs-chk-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: #5c6bc0; cursor: pointer; }
.logs-filename { word-break: break-all; }
.logs-size  { white-space: nowrap; color: #64748b; }
.logs-date  { white-space: nowrap; color: #64748b; font-size: 0.78rem; }
.logs-actions { white-space: nowrap; }

/* 행 액션 버튼 */
.btn-logs-view {
    background: #eff6ff; color: #1d4ed8;
    border: 1px solid #bfdbfe; border-radius: 4px;
    padding: 3px 10px; font-size: 0.78rem; cursor: pointer;
    margin-right: 4px;
}
.btn-logs-view:hover { background: #dbeafe; }
.btn-logs-del {
    background: #fff1f2; color: #be123c;
    border: 1px solid #fecdd3; border-radius: 4px;
    padding: 3px 10px; font-size: 0.78rem; cursor: pointer;
}
.btn-logs-del:hover { background: #ffe4e6; }

/* 파일 내용 뷰어 */
.logs-viewer-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px; flex-wrap: wrap;
}
.btn-logs-back {
    background: #f1f5f9; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 4px 12px; font-size: 0.82rem; cursor: pointer;
}
.btn-logs-back:hover { background: #e2e8f0; }
.logs-viewer-title {
    font-size: 0.9rem; font-weight: 700; color: #1e293b;
    word-break: break-all;
}
.logs-viewer-hint {
    font-size: 0.75rem; color: #94a3b8; margin-left: auto;
}
.logs-viewer-wrap {
    height: calc(85vh - 160px); overflow-y: auto;
    background: #0f172a; border-radius: 6px;
    padding: 12px 14px;
}
.logs-viewer-pre {
    margin: 0; font-family: Consolas, 'Courier New', monospace;
    font-size: 0.78rem; line-height: 1.55;
    color: #e2e8f0; white-space: pre-wrap; word-break: break-all;
}

@media (max-width: 600px) {
    .logs-nav { width: 110px; min-width: 100px; }
    .logs-nav-name { font-size: 0.8rem; }
    .logs-viewer-wrap { height: calc(85vh - 200px); }
}

/* ── 로그 관리 팝업 탭 바 ───────────────────────────────────────────────── */
.logs-tab-bar {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
    padding: 0 16px;
}
.logs-tab {
    padding: 10px 22px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.88rem;
    color: #64748b;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s;
}
.logs-tab:hover { color: #1e293b; }
.logs-tab.active { color: #3730a3; border-bottom-color: #3730a3; font-weight: 700; }

/* 탭 패널 숨김 */
.logs-body.hidden { display: none !important; }

/* ── 접속로그 패널 ──────────────────────────────────────────────────────── */
.access-logs-wrap {
    display: flex; flex-direction: column;
    width: 100%; height: 100%; min-height: 0;
    padding: 14px 18px; box-sizing: border-box;
    gap: 10px;
}
.access-logs-toolbar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; flex-shrink: 0;
}
.access-logs-label {
    font-size: 0.84rem; color: #475569; font-weight: 600;
}
.access-log-select {
    padding: 5px 10px; font-size: 0.84rem;
    border: 1px solid #cbd5e1; border-radius: 5px;
    background: #fff; color: #334155; cursor: pointer;
}
.btn-access-query {
    background: #eef2ff; color: #3730a3;
    border: 1px solid #c7d2fe; border-radius: 5px;
    padding: 5px 14px; font-size: 0.82rem; cursor: pointer;
}
.btn-access-query:hover { background: #e0e7ff; }
.btn-access-refresh {
    background: #f1f5f9; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 5px 12px; font-size: 0.82rem; cursor: pointer;
}
.btn-access-refresh:hover { background: #e2e8f0; }

.access-logs-content {
    flex: 1; overflow-y: auto; min-height: 0;
}
.access-logs-table-wrap { overflow-x: auto; }
.access-logs-table {
    width: 100%; border-collapse: collapse; font-size: 0.83rem;
}
.access-logs-table th {
    background: #3949ab; color: #fff;
    padding: 8px 10px; text-align: left; font-weight: 600;
    white-space: nowrap; user-select: none;
}
.access-logs-table th.access-th-active { background: #283593; }
.access-logs-table td {
    padding: 7px 10px; border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.access-logs-table tr:hover td { background: #f8fafc; }
.access-time    { white-space: nowrap; color: #475569; font-size: 0.8rem; }
.access-loginid { font-weight: 600; color: #1e293b; }
.access-ip      { font-size: 0.78rem; color: #64748b; white-space: nowrap; }
.access-reason  { font-size: 0.78rem; color: #94a3b8; }

.access-badge-ok {
    background: #f0fdf4; color: #16a34a;
    border: 1px solid #86efac; border-radius: 4px;
    padding: 2px 8px; font-size: 0.76rem; font-weight: 600;
}
.access-badge-fail {
    background: #fff1f2; color: #be123c;
    border: 1px solid #fecdd3; border-radius: 4px;
    padding: 2px 8px; font-size: 0.76rem; font-weight: 600;
}

.access-logs-pager {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; flex-shrink: 0;
}
.access-logs-count { font-size: 0.78rem; color: #94a3b8; margin-right: auto; }
.btn-access-pg {
    background: #f1f5f9; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 4px 12px; font-size: 0.8rem; cursor: pointer;
}
.btn-access-pg:hover { background: #e2e8f0; }

/* ── RegTester ────────────────────────────────────────────── */
.regtester-dialog { max-width: 860px; min-height: 420px; }

.btn-regtester-run {
    background: #4f46e5; color: #fff;
    border: none; border-radius: 6px;
    padding: 5px 16px; font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
}
.btn-regtester-run:hover:not(:disabled) { background: #4338ca; }
.btn-regtester-run:disabled { opacity: 0.55; cursor: default; }

.btn-regtester-run-admin {
    background: #059669; color: #fff;
    border: none; border-radius: 6px;
    padding: 5px 16px; font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
}
.btn-regtester-run-admin:hover:not(:disabled) { background: #047857; }
.btn-regtester-run-admin:disabled { opacity: 0.55; cursor: default; }

/* Admin 자격증명 입력 패널 */
.rt-admin-cred-panel {
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 7px; padding: 10px 16px; margin: 0 0 4px;
}
.rt-admin-cred-panel.hidden { display: none; }
.rt-admin-cred-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rt-admin-label {
    font-size: 0.82rem; font-weight: 600; color: #065f46; white-space: nowrap;
}
.rt-admin-input {
    border: 1px solid #6ee7b7; border-radius: 5px;
    padding: 5px 10px; font-size: 0.84rem; color: #1e293b;
    outline: none; width: 140px;
}
.rt-admin-input:focus { border-color: #059669; box-shadow: 0 0 0 2px #d1fae5; }
.rt-admin-id-fixed { background: #f1f5f9; color: #64748b; cursor: default; }
.rt-admin-id-fixed:focus { border-color: #6ee7b7; box-shadow: none; }
.rt-admin-confirm {
    background: #059669; color: #fff;
    border: none; border-radius: 5px;
    padding: 5px 14px; font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
}
.rt-admin-confirm:hover { background: #047857; }
.rt-admin-cancel {
    background: #f1f5f9; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 5px 14px; font-size: 0.82rem; cursor: pointer;
}
.rt-admin-cancel:hover { background: #e2e8f0; }

.regtester-target-badge {
    font-size: 0.72rem; background: #ede9fe; color: #5b21b6;
    border: 1px solid #c4b5fd; border-radius: 10px;
    padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}

.regtester-body { padding: 16px 20px; overflow-y: auto; }

.regtester-loading {
    display: flex; align-items: center; gap: 10px;
    color: #64748b; font-size: 0.9rem; padding: 24px 0;
}
.regtester-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 3px solid #c4b5fd; border-top-color: #4f46e5;
    border-radius: 50%; animation: rt-spin 0.7s linear infinite;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }

.regtester-error {
    background: #fff1f2; border: 1px solid #fecdd3;
    color: #be123c; border-radius: 6px; padding: 14px 16px;
    font-size: 0.85rem; line-height: 1.6;
}

.regtester-summary {
    border-radius: 7px; padding: 10px 16px;
    font-size: 0.84rem; margin-bottom: 14px; font-weight: 500;
}
.regtester-summary-pass { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.regtester-summary-fail { background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; }
.rt-s-pass  { color: #16a34a; font-weight: 700; }
.rt-s-fail  { color: #dc2626; font-weight: 700; }
.rt-s-error { color: #d97706; font-weight: 700; }
.rt-prev-badge {
    display: inline-block; margin-left: 10px;
    background: #f1f5f9; color: #64748b;
    border: 1px solid #cbd5e1; border-radius: 10px;
    padding: 1px 9px; font-size: 0.72rem; font-weight: 600;
    vertical-align: middle;
}

.regtester-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.regtester-table th {
    background: #f8fafc; color: #475569; font-weight: 600;
    padding: 8px 10px; border-bottom: 2px solid #e2e8f0; text-align: left;
}
.regtester-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.rt-id { font-weight: 700; color: #334155; white-space: nowrap; }
.rt-name-btn { cursor: pointer; color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
.rt-name-btn:hover { color: #1e40af; }
.rt-detail-row { background: #f8fafc; }
.rt-detail-row.hidden { display: none; }
.rt-detail-row td { border-bottom: 1px solid #e2e8f0; padding: 7px 10px 7px 36px; }
.rt-detail-cell { color: #475569; font-size: 0.81rem; line-height: 1.5; }
.rt-detail-icon { margin-right: 6px; color: #94a3b8; font-style: normal; }
.rt-dur { color: #64748b; white-space: nowrap; }
.rt-msg { color: #475569; }
.rt-skip  { background: #e2e8f0; color: #64748b; }
.rt-s-skip { color: #94a3b8; font-weight: 700; }
.rt-row-skip td { opacity: 0.6; }
.rt-name-skip { color: #94a3b8; }
.rt-mode-badge-admin {
    display: inline-block; margin-left: 10px;
    background: #d1fae5; color: #065f46;
    border: 1px solid #6ee7b7; border-radius: 10px;
    padding: 1px 9px; font-size: 0.72rem; font-weight: 600;
    vertical-align: middle;
}

.rt-badge {
    display: inline-block; border-radius: 10px;
    padding: 2px 10px; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.rt-pass  { background: #dcfce7; color: #15803d; }
.rt-fail  { background: #fee2e2; color: #dc2626; }
.rt-error { background: #fef3c7; color: #b45309; }

/* ── 탭 바 ── */
.rt-tab-bar {
    display: flex; gap: 0; border-bottom: 2px solid #e2e8f0;
    padding: 0 20px; background: #f8fafc;
}
.rt-tab {
    padding: 9px 20px; font-size: 0.85rem; font-weight: 600;
    color: #64748b; background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.rt-tab:hover { color: #334155; }
.rt-tab.active { color: #4f46e5; border-bottom-color: #4f46e5; }
.rt-tab-badge {
    display: inline-block; margin-left: 5px;
    font-size: 0.72rem; font-weight: 700;
    border-radius: 8px; padding: 0 5px;
}
.rt-tab-badge-pass { background: #dcfce7; color: #15803d; }
.rt-tab-badge-fail { background: #fee2e2; color: #dc2626; }

/* ── 탭 패널 ── */
.rt-panel { padding: 16px 20px; overflow-y: auto; }
.rt-panel.hidden { display: none; }

/* ── 진행 바 ── */
.rt-progress-wrap {
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 12px 16px; margin-bottom: 14px;
}
.rt-progress-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.rt-progress-label { font-size: 0.84rem; color: #475569; font-weight: 500; }
.rt-progress-pct   { font-size: 0.84rem; color: #4f46e5; font-weight: 700; }
.rt-progress-bar-wrap {
    height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden;
}
.rt-progress-bar {
    height: 100%; background: #4f46e5; border-radius: 4px;
    transition: width 0.3s ease;
}

/* ── 인쇄 / PDF 저장 ───────────────────────────────────── */
@media print {
    /* 불필요 UI 전부 숨기기 */
    header,
    .cost-bar,
    .docs-section-header,
    .docs-tabs,
    .docs-nav,
    .docs-edit-bar,
    #docs-editor-wrap,
    #screens-editor-wrap,
    .op-name-panel,
    .main-panel.hidden { display: none !important; }

    /* 배경·레이아웃 초기화 */
    body { background: white !important; }
    .main-panel { padding: 0 !important; box-shadow: none !important; background: white !important; }

    /* 탭 패널 펼치기 (hidden 탭은 인쇄에서도 숨김 유지) */
    .docs-tab-panel.hidden { display: none !important; }
    .docs-tab-panel:not(.hidden) { display: block !important; }
    .docs-body { display: block !important; height: auto !important; overflow: visible !important; }


    /* 콘텐츠 전체 너비 */
    .docs-content {
        width: 100% !important; max-width: 100% !important;
        height: auto !important; overflow: visible !important;
        border: none !important; padding: 0 !important;
        box-shadow: none !important; border-radius: 0 !important;
    }

    /* 마크다운 인쇄 타이포그래피 */
    .md-body { font-size: 11pt; line-height: 1.8; color: #000; }
    .md-body h1 { font-size: 18pt; color: #1a237e; border-bottom: 1.5pt solid #c5cae9; padding-bottom: 6pt; margin-bottom: 14pt; page-break-after: avoid; }
    .md-body h2 { font-size: 14pt; color: #283593; margin-top: 20pt; margin-bottom: 8pt; page-break-after: avoid; }
    .md-body h3 { font-size: 12pt; color: #3949ab; margin-top: 14pt; page-break-after: avoid; }
    .md-body h4, .md-body h5, .md-body h6 { page-break-after: avoid; }
    .md-body p  { orphans: 3; widows: 3; }
    .md-body pre {
        background: #f5f5f5 !important; border: 1pt solid #ddd;
        padding: 10pt 12pt; page-break-inside: avoid;
        border-radius: 4pt;
    }
    .md-body pre code { color: #333 !important; font-size: 9pt; }
    .md-body code { background: #f0f2f5 !important; color: #c7254e; }
    .md-body table { page-break-inside: avoid; border-collapse: collapse; width: 100%; }
    .md-body th { background: #e8eaf6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .md-body blockquote { page-break-inside: avoid; }
    .md-body a { color: #3949ab; text-decoration: none; }
    .md-body a::after { content: none !important; }
    .md-body hr { border-top: 1pt solid #ddd; }

    /* 페이지 여백 */
    @page { margin: 20mm 18mm; }
}

/* ── 코드리뷰 관리 패널 ──────────────────────────────────────────────────── */
.review-status-msg { font-size: 12px; color: #90a4ae; }

/* 목록 테이블 */
.review-list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.review-list-table thead th {
    background: #e8eaf6; color: #3949ab; font-weight: 600;
    padding: 8px 10px; text-align: left; border-bottom: 2px solid #c5cae9;
    white-space: nowrap;
}
.review-list-row { cursor: pointer; transition: background .12s; }
.review-list-row:hover { background: #f3f4ff; }
.review-list-table td { padding: 8px 10px; border-bottom: 1px solid #e8eaf6; vertical-align: middle; }
.review-empty   { text-align: center; color: #aaa; padding: 24px !important; }
.review-error   { color: #e53935; }
.review-id-cell { font-family: monospace; font-size: 12px; color: #455a64; }
.workmgr-title-cell { max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: #37474f; }
.review-date-cell { white-space: nowrap; font-size: 12px; }
.review-cnt-col { text-align: center; font-weight: 700; width: 48px; }
.review-high    { color: #e53935; }
.review-med     { color: #f57c00; }
.review-low     { color: #43a047; }

/* 상태 배지 */
.review-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.review-badge-open   { background: #e3f2fd; color: #1565c0; }
.review-badge-inprog { background: #fff3e0; color: #e65100; }
.review-badge-done   { background: #e8f5e9; color: #2e7d32; }

/* 삭제 버튼 */
.review-del-btn {
    background: none; border: 1px solid #ef9a9a; color: #e53935;
    border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer;
    transition: background .12s;
}
.review-del-btn:hover { background: #ffebee; }

/* 상세 뷰 */
.review-detail-header {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0 14px; border-bottom: 1px solid #e8eaf6; flex-wrap: wrap;
}
.review-back-btn {
    background: none; border: 1px solid #c5cae9; color: #3949ab;
    border-radius: 5px; padding: 5px 12px; font-size: 12px; cursor: pointer;
    transition: background .12s;
}
.review-back-btn:hover { background: #e8eaf6; }
.review-detail-title { font-weight: 700; font-size: 14px; color: #333; flex: 1; font-family: monospace; }
.review-detail-actions { display: flex; gap: 8px; margin-left: auto; }
.workmgr-detail-id-inline {
    margin: 4px 0 20px; padding-bottom: 14px;
    border-bottom: 3px solid #e8eaf6;
}
.workmgr-detail-id-label {
    display: block;
    font-size: 1.1rem; font-weight: bold; color: #283593; margin: 24px 0 10px;
}
.workmgr-detail-id-value {
    display: block;
    font-family: 'Consolas', 'JetBrains Mono', monospace;
    font-size: 0.9rem; color: #90a4ae; letter-spacing: 0.3px;
}
.review-save-btn {
    background: #3949ab; color: #fff; border: none; border-radius: 5px;
    padding: 6px 14px; font-size: 12px; cursor: pointer; transition: background .12s;
}
.review-save-btn:hover { background: #283593; }
.review-done-btn {
    background: #43a047; color: #fff; border: none; border-radius: 5px;
    padding: 6px 14px; font-size: 12px; cursor: pointer; transition: background .12s;
}
.review-done-btn:hover { background: #2e7d32; }

/* 마크다운 결과 */
.review-result-md { padding: 14px 0 8px; }

/* 처리 대상 테이블 */
.review-items-section { margin-top: 16px; }
.review-items-title { font-size: 13px; font-weight: 700; color: #455a64; margin-bottom: 8px; }
.review-items-hint  { font-weight: 400; color: #90a4ae; font-size: 11px; margin-left: 6px; }
.review-items-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.review-items-table thead th {
    background: #eceff1; color: #546e7a; font-weight: 600;
    padding: 7px 9px; text-align: left; border-bottom: 2px solid #cfd8dc;
}
.review-items-table td { padding: 7px 9px; border-bottom: 1px solid #eceff1; vertical-align: middle; }
.review-chk-col   { width: 42px; text-align: center; }
.review-sev-col   { width: 64px; }
.review-fixed-col { width: 52px; text-align: center; color: #43a047; font-weight: 700; }
.review-fileref   { font-family: monospace; font-size: 11px; color: #455a64; white-space: nowrap; }
.review-row-fixed { background: #f1f8e9; opacity: .75; }
.review-chk       { cursor: pointer; width: 15px; height: 15px; }

/* 심각도 배지 */
.review-sev       { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.sev-high         { background: #ffebee; color: #c62828; }
.sev-med          { background: #fff3e0; color: #bf360c; }
.sev-low          { background: #e8f5e9; color: #1b5e20; }

/* ── 변경요청 배지 ── */
.changereq-badge-pending  { background: #fff8e1; color: #e65100; }
.changereq-badge-approved { background: #e8f5e9; color: #1b5e20; }
.changereq-badge-rejected { background: #ffebee; color: #b71c1c; }
.changereq-badge-applied  { background: #e3f2fd; color: #0d47a1; }

/* ── 변경요청 승인/반려 버튼 ── */
.changereq-approve-btn {
    background: #43a047; color: #fff; border: none;
    padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.changereq-approve-btn:hover { background: #388e3c; }
.changereq-reject-btn {
    background: #e53935; color: #fff; border: none;
    padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.changereq-reject-btn:hover { background: #c62828; }

/* ── 작업관리 통합 패널 ── */
.workmgr-filter-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0 12px; flex-wrap: wrap;
}
.workmgr-filter-label { font-size: 12px; color: #546e7a; font-weight: 600; }
.workmgr-filter-select {
    font-size: 12px; border: 1px solid #c5cae9; border-radius: 4px;
    padding: 4px 8px; color: #37474f; background: #fff; cursor: pointer;
}
.workmgr-filter-select:focus { outline: none; border-color: #5c6bc0; }
.workmgr-refresh-btn {
    margin-left: auto; background: none; border: 1px solid #c5cae9; color: #5c6bc0;
    border-radius: 4px; padding: 4px 12px; font-size: 12px; cursor: pointer;
    transition: background .12s;
}
.workmgr-refresh-btn:hover { background: #e8eaf6; }
.workmgr--detail-open { min-height: 80vh; overflow: visible; }
.workmgr-pager {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 12px 0 4px; border-top: 1px solid #e8eaf6; margin-top: 4px;
}
.workmgr-page-btn {
    background: none; border: 1px solid #c5cae9; color: #5c6bc0;
    border-radius: 4px; padding: 4px 12px; font-size: 13px; cursor: pointer;
    transition: background .12s;
}
.workmgr-page-btn:hover:not(:disabled) { background: #e8eaf6; }
.workmgr-page-btn:disabled { color: #bdbdbd; border-color: #e0e0e0; cursor: default; }
.workmgr-page-info { font-size: 13px; color: #455a64; }
.workmgr-page-total { font-size: 11px; color: #90a4ae; }
.workmgr-type-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.workmgr-type-review { background: #e8eaf6; color: #3949ab; }
.workmgr-type-change { background: #f3e5f5; color: #6a1b9a; }

/* ── 공개 페이지 관리 탭 ──────────────────────────────────────── */
.public-pages-wrap { padding: 16px 0; }

.public-reg-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 14px; border-bottom: 1px solid #e8eaf6; margin-bottom: 14px;
}
.public-reg-bar-title { font-size: 13px; font-weight: 600; color: #37474f; }

.btn-public-add {
    background: #5c6bc0; color: #fff; border: none; border-radius: 5px;
    padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .12s;
}
.btn-public-add:hover { background: #3f51b5; }

.public-reg-form {
    background: #f5f6ff; border: 1px solid #c5cae9; border-radius: 8px;
    padding: 16px 18px 14px; margin-bottom: 16px;
}
.public-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 14px; }
.public-reg-row { display: flex; flex-direction: column; gap: 4px; }
.public-reg-label { font-size: 11px; font-weight: 600; color: #5c6bc0; text-transform: uppercase; letter-spacing: .4px; }
.public-reg-opt { font-weight: 400; color: #90a4ae; text-transform: none; }
.public-reg-input, .public-reg-select {
    font-size: 13px; border: 1px solid #c5cae9; border-radius: 4px;
    padding: 6px 9px; color: #37474f; background: #fff; outline: none;
    transition: border-color .12s;
}
.public-reg-input:focus, .public-reg-select:focus { border-color: #5c6bc0; }
.public-reg-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-public-cancel {
    background: none; border: 1px solid #c5cae9; border-radius: 4px;
    padding: 6px 16px; font-size: 12px; color: #607d8b; cursor: pointer;
}
.btn-public-cancel:hover { background: #eceff1; }
.btn-public-save {
    background: #5c6bc0; color: #fff; border: none; border-radius: 4px;
    padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .12s;
}
.btn-public-save:hover { background: #3f51b5; }

.public-pages-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.public-pages-table thead th {
    background: #f5f6ff; border-bottom: 2px solid #c5cae9;
    padding: 9px 12px; text-align: left; font-size: 11px;
    font-weight: 700; color: #5c6bc0; text-transform: uppercase; letter-spacing: .4px;
}
.public-pages-table tbody tr { border-bottom: 1px solid #e8eaf6; }
.public-pages-table tbody tr:hover { background: #fafafa; }
.public-pages-table td { padding: 10px 12px; color: #37474f; vertical-align: middle; }
.public-col-title { font-weight: 600; max-width: 160px; }
.public-col-file  { font-size: 12px; color: #607d8b; max-width: 220px; word-break: break-all; }
.public-col-actions { white-space: nowrap; text-align: right; }

.public-slug-code {
    background: #e8eaf6; color: #3949ab; border-radius: 4px;
    padding: 2px 7px; font-family: monospace; font-size: 12px; font-weight: 600;
}
.public-type-tag {
    display: inline-block; background: #e0f2f1; color: #00695c;
    border-radius: 3px; padding: 1px 5px; font-size: 10px; font-weight: 700;
    margin-right: 5px; text-transform: uppercase; letter-spacing: .3px;
}
.public-badge {
    display: inline-block; padding: 2px 9px; border-radius: 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.public-active   { background: #e8f5e9; color: #2e7d32; }
.public-inactive { background: #f5f5f5; color: #9e9e9e; }

.btn-pa {
    border: none; border-radius: 4px; padding: 4px 10px;
    font-size: 11px; font-weight: 600; cursor: pointer; margin-left: 4px;
    transition: opacity .12s;
}
.btn-pa:hover { opacity: .8; }
.btn-pa.view   { background: #e8f5e9; color: #2e7d32; }
.btn-pa.copy   { background: #e3f2fd; color: #1565c0; }
.btn-pa.toggle { background: #e8eaf6; color: #3949ab; }
.btn-pa.del    { background: #fce4ec; color: #c62828; }

/* ── Image Convert Panel (PC 전용 2컬럼 레이아웃) ─────────────────── */
.imgconv-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 28px 48px;
}

/* ── 1단: 변환 옵션 바 ── */
.imgconv-options-bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(26,35,126,0.07);
}
.imgconv-opt-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 14px;
    min-width: 0;
}
.imgconv-opt-card--narrow {
    flex: 0 0 140px;
}
.imgconv-opt-vdiv {
    width: 1px;
    background: #e8eaf6;
    flex-shrink: 0;
    align-self: stretch;
}

/* ── 2단: 파일+버튼(좌) / 결과(우) ── */
.imgconv-bottom-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: start;
    gap: 16px;
}
.imgconv-left-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 24px;
}

/* ── 옵션 공통 ── */
.imgconv-option-item  { padding: 2px 0 10px; }
.imgconv-option-divider { height: 1px; background: #e8eaf6; margin: 4px 0 14px; }
.imgconv-opt-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.imgconv-opt-name  { font-size: 0.90rem; color: #444; font-weight: 600; }
.imgconv-opt-badge {
    font-size: 0.81rem;
    color: #3949ab;
    background: #e8eaf6;
    padding: 2px 9px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.imgconv-slider { width: 100%; accent-color: #3949ab; cursor: pointer; }
.imgconv-opt-desc { margin: 8px 0 0; font-size: 0.80rem; color: #90a4ae; line-height: 1.45; }
.imgconv-color-row { display: flex; align-items: center; gap: 10px; }
.imgconv-color-swatch-label { position: relative; cursor: pointer; display: inline-block; }
.imgconv-color-swatch-label input[type="color"] {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    opacity: 0;
    cursor: pointer;
}
.imgconv-color-swatch {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 2px solid #c5cae9;
    display: block;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.imgconv-color-swatch-label:hover .imgconv-color-swatch {
    transform: scale(1.08);
    border-color: #3949ab;
    box-shadow: 0 0 0 3px rgba(57,73,171,0.12);
}
.imgconv-opt-pick-hint { font-size: 0.82rem; color: #90a4ae; }

/* ── 변환 버튼 ── */
.btn-imgconv-run {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, #3949ab 0%, #283593 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 0.90rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .18s, transform .12s, box-shadow .18s;
    box-shadow: 0 2px 12px rgba(57,73,171,0.28);
    letter-spacing: 0.03em;
}
.btn-imgconv-run:hover:not(:disabled) {
    opacity: .88;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(57,73,171,0.38);
}
.btn-imgconv-run:active:not(:disabled) { transform: translateY(0); }
.btn-imgconv-run:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

/* ── 에러 ── */
.imgconv-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fce4ec;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    padding: 9px 12px;
    color: #c62828;
    font-size: 0.82rem;
    line-height: 1.5;
}
.imgconv-error.hidden { display: none; }

/* ── 메인 영역 ── */
.imgconv-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── 업로드 영역 ── */
.imgconv-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    border: 2px dashed #c5cae9;
    border-radius: 14px;
    padding: 48px 40px 44px;
    text-align: center;
    cursor: pointer;
    transition: border-color .22s, background .22s, transform .12s;
    background: #f8f9ff;
    user-select: none;
}
.imgconv-upload-area:hover {
    border-color: #3949ab;
    background: #ede7f6;
}
.imgconv-upload-area.drag-over {
    border-color: #3949ab;
    background: #e8eaf6;
    transform: scale(1.005);
}
.imgconv-upload-icon {
    color: #7986cb;
    margin-bottom: 18px;
}
.imgconv-upload-hint { margin: 0 0 7px; font-size: 0.95rem; color: #444; font-weight: 600; }
.imgconv-browse { color: #3949ab; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.imgconv-upload-sub { margin: 0; font-size: 0.84rem; color: #90a4ae; letter-spacing: 0.02em; }
.imgconv-filename {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.88rem;
    color: #3949ab;
    background: #e8eaf6;
    border-radius: 20px;
    padding: 4px 14px;
}
.imgconv-filename.hidden { display: none; }

/* ── 결과 패널 ── */
.imgconv-result {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 6px rgba(26,35,126,0.07);
}
.imgconv-result.hidden { display: none; }

/* 결과 툴바 */
.imgconv-result-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    gap: 8px;
}
.imgconv-result-title {
    font-size: 0.79rem;
    color: #1a237e;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.imgconv-toolbar-right { display: flex; align-items: center; gap: 5px; }
.imgconv-toolbar-sep   { width: 1px; height: 16px; background: #e0e0e0; margin: 0 3px; }

/* 배경 토글 */
.imgconv-bg-toggle {
    display: flex;
    align-items: center;
    background: #f0f2f5;
    border-radius: 6px;
    padding: 2px;
    gap: 1px;
}
.imgconv-bg-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
}
.imgconv-bg-btn:hover  { background: rgba(57,73,171,0.1); }
.imgconv-bg-btn.active { background: #e8eaf6; }

/* 줌 컨트롤 */
.imgconv-zoom-ctrl {
    display: flex;
    align-items: center;
    gap: 1px;
    background: #f0f2f5;
    border-radius: 6px;
    padding: 2px;
}
.imgconv-zoom-label {
    font-size: 0.79rem;
    color: #546e7a;
    min-width: 38px;
    text-align: center;
    font-weight: 700;
    user-select: none;
    font-variant-numeric: tabular-nums;
}
.imgconv-icon-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    width: 24px; height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #607d8b;
    transition: background .15s, color .12s;
    padding: 0;
}
.imgconv-icon-btn:hover { background: #e8eaf6; color: #1a237e; }
.imgconv-fit-btn { width: auto; padding: 0 8px; font-size: 0.79rem; font-weight: 600; }
.btn-imgconv-dl {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #e8eaf6;
    color: #283593;
    border: 1px solid #c5cae9;
    border-radius: 6px;
    padding: 4px 11px;
    font-size: 0.87rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, border-color .18s;
    white-space: nowrap;
}
.btn-imgconv-dl:hover { background: #c5cae9; border-color: #9fa8da; }

/* ── 분할 미리보기 ── */
.imgconv-split-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #e0e0e0;
    min-height: 440px;
}
.imgconv-pane { display: flex; flex-direction: column; background: #fff; }
.imgconv-pane-label {
    font-size: 0.77rem;
    color: #546e7a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 7px 14px;
    border-bottom: 1px solid #e8eaf6;
    background: #f8f9ff;
}
.imgconv-pan-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #b0bec5; }
.imgconv-original-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fafafa;
}
.imgconv-original-img {
    max-width: 100%;
    max-height: 380px;
    height: auto;
    border-radius: 4px;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* SVG 미리보기 (줌/패닝) */
.imgconv-preview-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    cursor: grab;
    background: #ffffff;
}
.imgconv-preview-wrap.bg-grid {
    background-image:
        linear-gradient(45deg, #e8eaf6 25%, transparent 25%),
        linear-gradient(-45deg, #e8eaf6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e8eaf6 75%),
        linear-gradient(-45deg, transparent 75%, #e8eaf6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-color: #f5f5f5;
}
.imgconv-preview-wrap.bg-dark { background: #1e1e2e; }
.imgconv-preview-wrap:active  { cursor: grabbing; }
.imgconv-preview-stage {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.imgconv-preview-stage svg { display: block; max-width: none; height: auto; }

/* 재변환 힌트 */
.imgconv-reconvert-hint {
    font-size: 0.81rem;
    color: #90a4ae;
    text-align: center;
    padding: 8px;
    margin: 0;
}
.imgconv-reconvert-hint b { color: #3949ab; font-weight: 700; }

/* ── SVG 전체화면 모달 ─────────────────────────────────────────────── */
.imgconv-modal {
    position: fixed;
    inset: 0;
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.imgconv-modal.hidden { display: none; }
.imgconv-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
.imgconv-modal-box {
    position: relative;
    z-index: 1;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    width: min(94vw, 1000px);
    height: min(90vh, 800px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}
.imgconv-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    flex-shrink: 0;
}
.imgconv-modal-title { font-size: 0.90rem; color: #1a237e; font-weight: 700; flex: 1; }
.imgconv-modal-close {
    background: transparent;
    border: none;
    color: #78909c;
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: color .15s, background .15s;
    margin-left: 4px;
}
.imgconv-modal-close:hover { color: #1a237e; background: #e8eaf6; }
.imgconv-modal-stage {
    flex: 1;
    overflow: hidden;
    position: relative;
    cursor: grab;
    background: #ffffff;
}
.imgconv-modal-stage:active { cursor: grabbing; }
.imgconv-modal-inner {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.imgconv-modal-inner svg { display: block; max-width: none; height: auto; }

/* ── 콤팩트 업로드 (사이드바 내부) ── */
.imgconv-upload-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 16px;
    border: 2px dashed #c5cae9;
    border-radius: 10px;
    background: #f8f9ff;
    cursor: pointer;
    transition: border-color .20s, background .20s;
    user-select: none;
}
.imgconv-upload-compact:hover  { border-color: #3949ab; background: #ede7f6; }
.imgconv-upload-compact.drag-over { border-color: #3949ab; background: #e8eaf6; }
.imgconv-upload-compact-icon   { color: #7986cb; flex-shrink: 0; }
.imgconv-upload-compact-text   { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.imgconv-upload-compact-main   { font-size: 0.87rem; color: #444; font-weight: 600; }
.imgconv-upload-compact-sub    { font-size: 0.77rem; color: #90a4ae; }

/* ── 빈 상태 플레이스홀더 ── */
.imgconv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fafafa;
    text-align: center;
    gap: 16px;
    padding: 40px;
}
.imgconv-empty-state.hidden { display: none; }
.imgconv-empty-state p      { font-size: 0.92rem; color: #90a4ae; margin: 0; line-height: 1.75; }
.imgconv-empty-state strong { color: #5c6bc0; font-weight: 700; }

/* ── 반전 토글 버튼 ── */
.imgconv-invert-btn {
    font-size: 0.81rem;
    color: #90a4ae;
    background: #f0f2f5;
    border: 1px solid #e0e0e0;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
    letter-spacing: 0.02em;
}
.imgconv-invert-btn.active { color: #3949ab; background: #e8eaf6; border-color: #c5cae9; }