/* PostX 전자결재 - 화이트 / 블루톤 디자인 시스템 */
:root {
  --primary: #2563eb;       /* blue-600 */
  --primary-hover: #1d4ed8; /* blue-700 */
  --primary-light: #dbeafe; /* blue-100 */
  --primary-soft: #eff6ff;  /* blue-50 */
  --border: #e2e8f0;        /* slate-200 */
  --border-strong: #cbd5e1; /* slate-300 */
  --text-primary: #0f172a;  /* slate-900 */
  --text-secondary: #475569;/* slate-600 */
  --text-muted: #94a3b8;    /* slate-400 */
  --bg: #f8fafc;            /* slate-50 */
  --surface: #ffffff;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
}

* { box-sizing: border-box; }
html, body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
body { font-size: 14px; }

/* 사이드바 */
.sidebar { width: 240px; min-height: 100vh; background: #fff; border-right: 1px solid var(--border); }
.sidebar-section-title { font-size: 12px; color: var(--text-muted); padding: 12px 20px 6px; font-weight: 500; letter-spacing: 0.02em; }
.sidebar-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; color: var(--text-secondary); cursor: pointer; font-size: 13.5px; transition: background 0.15s; }
.sidebar-item:hover { background: var(--primary-soft); color: var(--primary); }
.sidebar-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; border-left: 3px solid var(--primary); padding-left: 17px; }
.sidebar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; background: var(--danger); color: white; font-size: 11px; padding: 0 6px; border-radius: 9px; font-weight: 600; line-height: 1; }
.sidebar-badge-muted { background: #94a3b8; }
/* 배지 값이 방금 바뀌었음을 짧게 하이라이트 (실시간 반영을 시각화) */
@keyframes badge-flash-anim { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 100% { transform: scale(1); } }
.sidebar-badge.badge-flash { animation: badge-flash-anim 0.45s ease-out; }
.sidebar-item i { width: 16px; text-align: center; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; transition: all 0.15s; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: white; color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg); color: var(--text-primary); }
.btn-danger { background: #fee2e2; color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fecaca; }
.btn-warning { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.btn-warning:hover { background: #fde68a; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* 카드 */
.card { background: white; border: 1px solid var(--border); border-radius: 10px; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 20px; }

/* 테이블 */
.table-default { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-default thead { background: #f8fafc; }
.table-default th { padding: 10px 12px; text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); font-size: 12.5px; }
.table-default td { padding: 12px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.table-default tbody tr:hover { background: var(--primary-soft); cursor: pointer; }

/* 배지 */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-blue { background: var(--primary-light); color: var(--primary); }
.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f1f5f9; color: #475569; }

/* 결재 양식 (품의서 등) */
.form-title { font-size: 24px; font-weight: 700; text-align: center; margin: 16px 0 24px; letter-spacing: 0.4em; padding-right: -0.4em; }
.approval-form-table { width: 100%; border-collapse: collapse; border-top: 2px solid #334155; }
.approval-form-table th, .approval-form-table td { border: 1px solid #cbd5e1; padding: 8px 10px; font-size: 13px; }
.approval-form-table th { background: #f1f5f9; font-weight: 600; width: 100px; text-align: center; color: var(--text-secondary); }
.approval-form-table td input[type="text"],
.approval-form-table td input[type="number"],
.approval-form-table td input[type="date"],
.approval-form-table td input[type="time"],
.approval-form-table td select,
.approval-form-table td textarea {
  border: 1px solid var(--border-strong); padding: 6px 8px; border-radius: 4px; width: 100%; font-size: 13px; font-family: inherit; background: white;
}
.approval-form-table td input:focus, .approval-form-table td textarea:focus, .approval-form-table td select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light);
}

/* 동적 테이블 (출장자 명단, 법인카드 사용 내역 등) */
.form-section-title { font-weight: 600; font-size: 14px; color: var(--text-primary); margin: 8px 0 6px; padding-left: 4px; border-left: 3px solid var(--primary); padding-left: 8px; }
.dyn-table-wrap { margin-bottom: 6px; }
.dyn-table .dyn-row-action { width: 48px; text-align: center; }
.dyn-table thead th { background: #f1f5f9; }
.dyn-table tbody tr[data-row]:hover { background: #fafbfc; }
.dyn-table-actions { display: flex; align-items: center; padding: 8px 4px 0; }
.usages-total-row td { font-size: 13px; }
/* 시/분 select 공통 */
.time-select { display: inline-block; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 4px; background: white; font-size: 13px; min-width: 56px; }
/* 좁은 컬럼(예: 출장시간)에서 시/분 select 4개를 한 줄에 표시하기 위한 축소 변형 */
.time-select-sm { min-width: 0; padding: 3px 2px; font-size: 12px; width: auto; }

/* 출장시간 행 — 셀 폭에 정확히 맞추는 가변 폭 레이아웃 (스크롤 없음) */
.trip-time-row {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  overflow: hidden;          /* 가로 스크롤 제거 — 셀 폭 안에서 모두 표시 */
}
/* select는 셀 폭에 따라 균등하게 늘어남/줄어듦 */
.trip-time-row .time-select-sm {
  flex: 1 1 0;               /* 4개 select가 남은 공간을 균등 분배 */
  min-width: 0;              /* flex 자식이 컨텐츠 폭으로 강제 확장되지 않게 */
  width: 100%;               /* approval-form-table td select 의 width:100% 와 호환 */
  padding: 3px 2px;
  text-align: center;
  text-align-last: center;   /* select 표시 값 가운데 정렬 */
  font-size: 12px;
}
/* "시" / "분" / "~" 텍스트는 고정 폭 (실제 컨텐츠 폭만 차지) */
.trip-time-row > span {
  flex: 0 0 auto;
  font-size: 12px;
  color: #64748b;
  padding: 0 1px;
}
.trip-time-row > span.trip-time-sep { padding: 0 3px; color: #94a3b8; }
.amount-input { text-align: right; }

/* 결재 도장 박스 (오른쪽 상단) */
.approval-stamp-box { border: 1px solid #cbd5e1; }
.approval-stamp-box th, .approval-stamp-box td { border: 1px solid #cbd5e1; padding: 4px 6px; text-align: center; font-size: 12px; width: 60px; height: 24px; }
.approval-stamp-box .stamp-header { background: #f1f5f9; font-weight: 600; color: var(--text-secondary); }
.approval-stamp-box .stamp-side { background: #f1f5f9; font-weight: 600; writing-mode: vertical-rl; text-orientation: upright; padding: 8px 2px; }
.approval-stamp-box .stamp-cell { height: 60px; min-width: 70px; vertical-align: middle; }
.approval-stamp-box .stamp-cell.approved { background: rgba(220, 38, 38, 0.04); }
.approval-stamp-box .stamp-cell.pending { background: white; }
.approval-stamp-box .stamp-cell .stamp-mark {
  display: inline-block; padding: 4px 8px; border: 2px solid var(--danger); color: var(--danger);
  border-radius: 50%; font-weight: 700; font-size: 13px; transform: rotate(-8deg);
}
.approval-stamp-box .stamp-cell .stamp-pending { color: var(--text-muted); font-size: 11px; }
.approval-stamp-box .stamp-cell .name { font-size: 12px; color: var(--text-primary); margin-top: 2px; }

/* 모달 */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-panel { background: white; border-radius: 12px; max-width: 1080px; width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25); }
.modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: #f8fafc; border-radius: 0 0 12px 12px; }

/* 조직도 */
.org-tree { font-size: 13px; }
.org-dept { padding: 6px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--text-primary); user-select: none; }
.org-dept:hover { background: var(--primary-soft); }
.org-emp { padding: 6px 10px 6px 28px; cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
.org-emp:hover { background: var(--primary-soft); }
.org-emp .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
.org-emp .name { font-weight: 500; }
.org-emp .meta { color: var(--text-muted); font-size: 12px; margin-left: 4px; }

/* 결재선 패널 */
.line-section-title { background: #f1f5f9; padding: 8px 12px; font-weight: 600; font-size: 12.5px; color: var(--text-secondary); text-align: center; }
.line-item {
  position: relative;                /* 삽입 인디케이터(::before/::after) 위치 기준 */
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: white;
  transition: background 0.12s, box-shadow 0.12s;
}
.line-item:hover { background: #f8fafc; }
.line-item .drag-handle { color: var(--text-muted); cursor: grab; padding: 2px 2px; }
.line-item .drag-handle:active { cursor: grabbing; }
.line-item .type-select { border: 1px solid var(--border-strong); padding: 3px 6px; border-radius: 4px; font-size: 12px; }
.line-item.dragging { opacity: 0.35; background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
/* 순번 뱃지 (순차결재일 때만 표시) */
.line-order-badge {
  min-width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: white;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* 타입 뱃지 (결재 / 확인) */
.line-type-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  flex-shrink: 0;
}
.line-type-approve { background: #dbeafe; color: #1d4ed8; }
.line-type-receive { background: #f1f5f9; color: #475569; }

.line-empty { padding: 24px 14px; color: var(--text-muted); font-size: 12.5px; text-align: center; min-height: 70px; display: flex; align-items: center; justify-content: center; }
#approve-list, #receive-list { min-height: 70px; }
.org-emp[draggable="true"] { cursor: grab; }
.org-emp[draggable="true"]:active { cursor: grabbing; }
.org-emp.dragging { opacity: 0.4; background: var(--primary-soft); }

/* ── username(게이트웨이 아이디) 표시 & 인라인 편집 ── */
/* 좌측 조직도의 이름 옆 아이디 칩 */
.org-emp-username {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
  white-space: nowrap;
}

/* 우측 결재/확인 라인의 아이디 칩 */
.line-username {
  display: inline-block;
  font-size: 11px;
  color: #475569;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
  white-space: nowrap;
  cursor: default;
}
.line-username-empty {
  color: #94a3b8;
  background: #f8fafc;
  border-style: dashed;
  font-style: italic;
}

/* 연필 아이콘 수정 버튼 */
.line-username-edit-btn {
  padding: 2px 6px !important;
  font-size: 11px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-muted) !important;
  border-radius: 4px;
  line-height: 1;
}
.line-username-edit-btn:hover {
  background: #f1f5f9 !important;
  border-color: var(--border) !important;
  color: var(--primary) !important;
}

/* 인라인 편집 컨테이너 */
.line-username-editor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.line-username-input {
  width: 130px;
  padding: 3px 8px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid var(--primary);
  border-radius: 4px;
  outline: none;
  background: white;
  color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.line-username-input::placeholder {
  color: #cbd5e1;
  font-style: italic;
}
.line-username-editor .btn-sm {
  padding: 3px 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  min-height: unset !important;
}

/* 편집 중인 라인 강조 */
.line-item.line-item-editing {
  background: #fefce8;
  box-shadow: inset 3px 0 0 #eab308;
}
.line-item.line-item-editing:hover {
  background: #fef9c3;
}

/* ── DB 점검 도구 (kevin 전용) ── */
.db-table-item {
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 2px;
}
.db-table-item:hover { background: #f1f5f9; }
.db-table-item.active {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  padding-left: 5px;
}
.input.input-sm { padding: 4px 8px; font-size: 12px; }
.btn.btn-xs { padding: 2px 6px; font-size: 11px; line-height: 1; }

/* 드래그 타겟이 되는 섹션 강조 (은은한 배경만, 요란한 outline 은 제거해서 인디케이터 시인성 확보) */
#approve-list.line-drop-active, #receive-list.line-drop-active {
  background: color-mix(in srgb, var(--primary-soft) 60%, transparent);
  transition: background 0.1s;
}
.line-empty.line-drop-active {
  background: var(--primary-soft); color: var(--primary);
  border: 2px dashed var(--primary); border-radius: 6px; margin: 4px;
}

/* ── 삽입 인디케이터 (파란 가로선) ──
 * 정확한 드롭 위치를 사용자에게 시각화한다.
 * · drop-before : 항목 상단 경계에 2px 파란 선
 * · drop-after  : 항목 하단 경계에 2px 파란 선
 * 라인은 pointer-events: none 이라 자체가 드래그 오버 이벤트를 방해하지 않음. */
.line-item.drop-before::before,
.line-item.drop-after::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
  z-index: 2;
}
.line-item.drop-before::before { top: -2px; }
.line-item.drop-after::after   { bottom: -2px; }
/* 인디케이터 좌측 원형 마커 */
.line-item.drop-before::before,
.line-item.drop-after::after {
  /* 필요 시 마커 확장 지점 */
}

/* 결재선 영역에서 단계별 상태 */
.step-pending { background: white; }
.step-active { background: #fffbeb; border-left: 3px solid var(--warning); }
.step-approved { background: #f0fdf4; }
.step-rejected { background: #fef2f2; }

/* 헤더 */
.app-header { background: white; border-bottom: 1px solid var(--border); padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; }
.app-header .brand { font-weight: 700; font-size: 18px; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--bg); border-radius: 999px; font-size: 13px; }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }

/* 입력 */
.input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 13px; background: white; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }

/* 라디오 그룹 */
.radio-group { display: flex; gap: 14px; align-items: center; }
.radio-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* 토스트 */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--text-primary); color: white; padding: 12px 18px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-size: 13px; z-index: 9999; opacity: 0; transform: translateY(20px); transition: all 0.2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }

/* 빈상태 */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 48px; color: #cbd5e1; margin-bottom: 8px; }
/* 컴팩트 빈상태 (2x2 그리드 셀 내부) */
.empty-state-sm { padding: 32px 16px; font-size: 13px; }
.empty-state-sm i { font-size: 32px; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────────────────
   컴팩트 문서 리스트 (홈 대시보드 2x2 그리드 셀 내부)
   ───────────────────────────────────────────────────────────── */
.doc-list-compact { list-style: none; margin: 0; padding: 0; }
.doc-list-compact > li { border-bottom: 1px solid var(--border); }
.doc-list-compact > li:last-child { border-bottom: none; }
.doc-list-compact-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; text-decoration: none; color: var(--text-primary);
  transition: background 0.12s;
}
.doc-list-compact-item:hover { background: var(--primary-soft); color: var(--primary); }
.doc-list-compact-title {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-list-compact-meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.doc-list-compact-more { padding: 8px 20px; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); background: #fafbfc; text-align: center; }

/* ─────────────────────────────────────────────────────────────
   결재보기 스와이프 (홈 상단, 수신 결재 대기 문서를 가로 나열)
   - CSS scroll-snap 으로 카드 단위 스냅
   - 좌우 버튼 / 드래그 / 터치 스크롤 / 키보드(←→) 지원
   - 스크롤바는 시각적으로 숨김
   ───────────────────────────────────────────────────────────── */
.approval-swiper {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  outline: none;
}
.approval-swiper::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.approval-swiper.is-dragging { scroll-behavior: auto; cursor: grabbing; user-select: none; }
.approval-swiper:not(.is-dragging) { cursor: grab; }

.approval-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.approval-card:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08); transform: translateY(-1px); }
.approval-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.approval-card-title {
  font-weight: 700; font-size: 15px; color: var(--text-primary);
  text-decoration: none; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 2.8em; /* 두 줄 확보 → 카드 높이 일정하게 */
}
.approval-card-title:hover { color: var(--primary); }
.approval-card-meta {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 4px;
  font-size: 12px; color: var(--text-muted);
}
.approval-card-meta > div { display: flex; align-items: center; gap: 6px; }
.approval-card-meta dt { color: var(--text-muted); min-width: 48px; }
.approval-card-meta dd { color: var(--text-primary); margin: 0; }
.approval-card-meta .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.approval-card-actions { margin-top: auto; padding-top: 4px; }

/* 좁은 화면(모바일)에서 카드 폭 축소 */
@media (max-width: 640px) {
  .approval-card { flex: 0 0 84%; }
}

/* 양식 선택 카드 */
.form-pick-card { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 20px; cursor: pointer; transition: all 0.15s; background: white; text-align: center; }
.form-pick-card:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08); }
.form-pick-card i { font-size: 32px; color: var(--primary); margin-bottom: 10px; }
.form-pick-card .form-name { font-weight: 600; color: var(--text-primary); font-size: 14px; }
.form-pick-card .form-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* 현재 폴더 하이라이트: 사용자가 사이드바에서 특정 양식 폴더에 들어와 있을 때 */
.form-pick-card-hi { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.form-pick-hi-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 600; color: white; background: var(--primary); padding: 2px 8px; border-radius: 999px; }

/* 로딩 */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 결재라인 (상단 미니 표시 - 문서 보기 좌측 상단 칩 같은 영역) */
.approval-mini { display: flex; gap: 6px; flex-wrap: wrap; }
.approval-mini .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #f1f5f9; font-size: 12px; }
.approval-mini .chip.approved { background: #dcfce7; color: #166534; }
.approval-mini .chip.current { background: #fef3c7; color: #92400e; }
.approval-mini .chip.rejected { background: #fee2e2; color: #991b1b; }

/* 첨부영역 */
.attach-zone { border: 1.5px dashed var(--border-strong); border-radius: 8px; padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; background: #fafbfc; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.attach-zone:hover { background: var(--primary-soft); border-color: var(--primary); }

/* 결재 도장박스 사이드 패널 */
.approval-side-panel { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.approval-side-panel .approval-side-panel-title { display: flex; align-items: center; gap: 4px; }
.approval-side-panel .badge { display: inline-flex; align-items: center; }

/* 첨부파일 썸네일 그리드 */
.attach-thumb { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: white; transition: border-color 0.15s, box-shadow 0.15s; }
.attach-thumb:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.attach-thumb-preview { position: relative; aspect-ratio: 4 / 3; background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: zoom-in; overflow: hidden; }
.attach-thumb-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-thumb-file { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 36px; color: var(--text-muted); }
.attach-thumb-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.45); color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0; transition: opacity 0.15s; }
.attach-thumb-preview:hover .attach-thumb-overlay { opacity: 1; }
.attach-thumb-info { padding: 8px 10px; font-size: 12px; }
.attach-thumb-name { font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-thumb-meta { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.attach-thumb-download { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--primary); text-decoration: none; }
.attach-thumb-download:hover { text-decoration: underline; }

/* 첨부파일 미리보기 레이어 팝업 */
.attach-preview-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.75); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.attach-preview-panel { background: white; border-radius: 12px; max-width: 95vw; max-height: 95vh; width: 1100px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.attach-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.attach-preview-title { font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 600px; }
.attach-preview-body { flex: 1; overflow: auto; background: #1e293b; display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.attach-preview-img { max-width: 100%; max-height: calc(95vh - 60px); object-fit: contain; display: block; }
.attach-preview-frame { width: 100%; height: calc(95vh - 60px); border: 0; background: white; }
.attach-preview-fallback { background: white; padding: 48px; text-align: center; min-width: 400px; border-radius: 8px; margin: 24px; }

/* 첨부파일 갤러리 (스와이프) */
.attach-preview-body { position: relative; }
.gallery-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.gallery-loading { color: white; display: flex; align-items: center; justify-content: center; padding: 64px; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,0.9); color: #1e293b;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: background 0.15s, transform 0.15s;
}
.gallery-nav:hover { background: white; transform: translateY(-50%) scale(1.05); }
.gallery-nav-prev { left: 16px; }
.gallery-nav-next { right: 16px; }
.gallery-strip {
  display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto;
  background: #0f172a; border-top: 1px solid #1e293b;
  scrollbar-width: thin;
}
.gallery-strip::-webkit-scrollbar { height: 6px; }
.gallery-strip::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
.gallery-thumb {
  flex: 0 0 64px; height: 48px; border-radius: 4px; overflow: hidden;
  cursor: pointer; opacity: 0.6; transition: opacity 0.15s, outline 0.15s;
  background: #1e293b; display: flex; align-items: center; justify-content: center;
  outline: 2px solid transparent;
}
.gallery-thumb:hover { opacity: 0.9; }
.gallery-thumb.active { opacity: 1; outline-color: #2563eb; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb-file { color: #94a3b8; font-size: 16px; }

.attach-thumb-download {
  background: transparent; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: 11px; color: var(--primary); cursor: pointer;
}
.attach-thumb-download:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────── */
/* 관리자 임포트 (다우오피스 데이터 복원) 페이지 전용 스타일       */
/* ──────────────────────────────────────────────────────────── */
.dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  padding: 36px 20px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
  cursor: copy;
}
.dropzone:hover { background: #f1f5f9; }
.dropzone.drag-over {
  background: #eff6ff;
  border-color: #2563eb;
  border-style: solid;
}

/* 탭 버튼 */
.tab-btn {
  padding: 10px 16px;
  font-size: 14px;
  color: #64748b;
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.tab-btn:hover { color: #2563eb; }
.tab-btn.tab-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  font-weight: 600;
}

/* 큐 리스트 */
.queue-list {
  max-height: 600px;
  overflow-y: auto;
  padding: 6px;
}
.queue-item {
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.queue-item:hover { background: #f8fafc; }
.queue-item-active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #2563eb33;
}

/* 미리보기 표 */
.preview-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}
.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.preview-table th,
.preview-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
  border-right: 1px solid #f1f5f9;
  text-align: left;
  vertical-align: top;
}
.preview-table th {
  background: #f8fafc;
  font-weight: 600;
  color: #475569;
  font-size: 12px;
  width: 110px;
  white-space: nowrap;
}
.preview-table thead th {
  background: #f1f5f9;
  text-align: center;
  border-bottom-width: 2px;
  width: auto;
}
.preview-table tr:last-child td,
.preview-table tr:last-child th {
  border-bottom: 0;
}
.preview-table td:last-child,
.preview-table th:last-child {
  border-right: 0;
}
.preview-pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 6px;
  font-size: 12px;
  max-height: 280px;
  overflow: auto;
}
.preview-attach {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

/* 미니 스피너 (뱃지 안에 사용) */
.spinner-xs {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 2px;
}

/* 이력 항목 */
.history-item {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
}
.history-item:hover { background: #f8fafc; }

/* btn-xs */
.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 4px;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────
   알림 종 아이콘 + 드롭다운 (헤더 우측)
   ───────────────────────────────────────────────────────── */
.notif-wrap { position: relative; }
.notif-bell {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: #475569;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.notif-bell:hover { background: #f1f5f9; color: #2563eb; border-color: #e2e8f0; }
.notif-bell.has-unread { color: #2563eb; }
.notif-bell.has-unread i { animation: bell-ring 1.5s ease-in-out infinite; transform-origin: top center; }
@keyframes bell-ring {
  0%, 90%, 100% { transform: rotate(0); }
  93% { transform: rotate(-12deg); }
  96% { transform: rotate(10deg); }
}
.notif-badge-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #ef4444; color: #fff;
  border-radius: 9px;
  font-size: 10px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 380px;
  max-height: 480px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.notif-dropdown.open { display: flex; }
.notif-dropdown-header {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between;
  background: #f8fafc;
}
.notif-dropdown-body {
  flex: 1; overflow-y: auto;
  max-height: 380px;
}
.notif-dropdown-footer {
  padding: 8px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex; align-items: center; justify-content: space-between;
}
.notif-empty {
  padding: 40px 20px;
  text-align: center;
}
.notif-item {
  display: flex; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none; color: inherit;
  position: relative;
  transition: background 0.12s;
}
.notif-item:hover { background: #f8fafc; }
.notif-item.notif-unread { background: #eff6ff; }
.notif-item.notif-unread:hover { background: #dbeafe; }
.notif-item-icon {
  flex: 0 0 30px;
  padding-top: 2px;
  font-size: 16px;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: 13px; font-weight: 600; color: #0f172a;
  margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word;
}
.notif-item-desc {
  font-size: 12px; color: #64748b;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-bottom: 4px;
  word-break: break-word;
  white-space: pre-line;
}
.notif-item-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.notif-item-dot {
  position: absolute; top: 16px; right: 12px;
  width: 8px; height: 8px;
  background: #2563eb;
  border-radius: 50%;
}
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

@media (max-width: 640px) {
  .notif-dropdown {
    width: 320px;
    right: -60px;  /* 화면 밖으로 벗어나지 않도록 살짝 이동 */
  }
}

/* ─────────────────────────────────────────────────────────
   알림 권한 배너 (드롭다운 헤더 아래)
   ───────────────────────────────────────────────────────── */
.notif-perm-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  border-left: 3px solid transparent;
}
.notif-perm-banner-info {
  background: #eff6ff;         /* blue-50 */
  border-left-color: #3b82f6;  /* blue-500 */
}
.notif-perm-banner-warn {
  background: #fffbeb;         /* amber-50 */
  border-left-color: #f59e0b;  /* amber-500 */
}
.notif-perm-banner-muted {
  background: #f8fafc;         /* slate-50 */
  border-left-color: #94a3b8;  /* slate-400 */
}
.notif-perm-banner-ok {
  background: #f0fdf4;         /* green-50 */
  border-left-color: #22c55e;  /* green-500 */
}
.notif-perm-banner-icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  color: #64748b;
}
.notif-perm-banner-info .notif-perm-banner-icon { color: #2563eb; }
.notif-perm-banner-warn .notif-perm-banner-icon { color: #d97706; }
.notif-perm-banner-ok   .notif-perm-banner-icon { color: #16a34a; }
.notif-perm-banner-body {
  flex: 1; min-width: 0;
  font-size: 12px;
}
.notif-perm-banner-title {
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
  font-size: 12px;
}
.notif-perm-banner-desc {
  color: #475569;
  line-height: 1.4;
  font-size: 11.5px;
}
.notif-perm-banner .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 종 아이콘 상단의 작은 표시점 (알림이 꺼져 있음을 시각화) */
.notif-perm-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: #f59e0b;         /* amber-500 */
  border-radius: 50%;
  border: 2px solid #fff;
}
/* 안 읽은 알림 배지가 표시될 때는 표시점 숨김(겹침 방지) */
.notif-bell .notif-badge-count[style*="inline-flex"] ~ .notif-perm-dot { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   Rich Text Editor (public/static/rich-editor.js)
   결재 문서 본문용 경량 웹에디터
   ───────────────────────────────────────────────────────────── */
.rte-host {
  border: 1px solid #cbd5e1;      /* slate-300 */
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.rte-host.rte-readonly {
  border: 1px solid #e2e8f0;      /* slate-200 */
  background: #fafafa;
}
.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: 6px 8px;
  background: #f8fafc;            /* slate-50 */
  border-bottom: 1px solid #e2e8f0;
}
.rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #334155;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rte-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.rte-btn:active {
  background: #cbd5e1;
}
.rte-btn b, .rte-btn i, .rte-btn u, .rte-btn s {
  font-style: normal;
  font-weight: 600;
  pointer-events: none;
}
.rte-btn u { text-decoration: underline; }
.rte-btn s { text-decoration: line-through; }
.rte-btn i.fas, .rte-btn i.far {
  font-size: 12px;
}
.rte-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #cbd5e1;
  margin: 0 4px;
}
.rte-content {
  min-height: 160px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #0f172a;
  outline: none;
  overflow-y: auto;
  max-height: 480px;
}
.rte-content:focus {
  background: #fefefe;
}
.rte-content[contenteditable="true"]:empty::before,
.rte-content[contenteditable="true"]:has(> br:only-child):not(:focus)::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}
.rte-content p { margin: 0 0 6px; }
.rte-content ul, .rte-content ol { margin: 4px 0 8px 20px; padding-left: 8px; }
.rte-content li { margin-bottom: 2px; }
.rte-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 4px 0;
  display: inline-block;
}
.rte-content a {
  color: #2563eb;
  text-decoration: underline;
}
.rte-content blockquote {
  border-left: 3px solid #cbd5e1;
  padding-left: 10px;
  margin: 6px 0;
  color: #475569;
}
.rte-readonly-content {
  min-height: 40px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #0f172a;
}
.rte-readonly-content img { max-width: 100%; height: auto; }

/* 상세보기(readonly) 화면에서 편집기 툴바가 잔존해 있는 경우 대비하여 숨김 */
.rte-host.rte-readonly .rte-toolbar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   인쇄 전용 스타일 (v10.1)
   ─────────────────────────────────────────────────────────────────
   · 문서 상세 페이지(/documents/:id) 에서 window.print() 시 적용.
   · 헤더/사이드바/카드헤더/액션버튼/결재선패널/이력/첨부/토스트 등을 모두 숨기고,
     실제 결재 문서(#doc-form-area) 만 A4 박스로 출력.
   · 상단 러닝 헤더: 좌 "POSTX CO., LTD." / 우 "출력날짜: YYYY-MM-DD"
   · 하단 러닝 푸터 중앙: CONFIDENTIAL 문구
   · 표는 페이지 사이에서 안 잘리도록 page-break 방지.
   ═══════════════════════════════════════════════════════════════════ */

/* 화면에서는 인쇄 전용 요소들 완전 숨김 */
.print-only,
.print-header-bar,
.print-footer-bar {
  display: none;
}

@media print {
  /* ── A4 페이지 설정 (@page): 여백 안에서 running header/footer 위치 확보 */
  @page {
    size: A4;
    /* 상단 22mm(헤더바 영역) / 좌우 16mm / 하단 20mm(푸터바 영역) */
    margin: 22mm 16mm 20mm 16mm;
  }

  /* 브라우저 기본 배경/색상 유지 (모달, 표 배경 등이 회색 그대로 나오도록) */
  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 앱 전체 레이아웃 요소 숨김: 인쇄시 문서 본문만 남긴다 */
  .app-header,
  .sidebar,
  .toast,
  #toast,
  #doc-actions,
  .card-header,
  #doc-attachments-area,
  #doc-approval-panel,
  #doc-history-panel,
  .attach-zone,
  .dyn-table-actions,
  .dyn-row-action,
  [data-row-remove],
  #btn-traveler-add,
  #btn-handover-add,
  #btn-usage-add,
  .modal-overlay,
  .rte-toolbar {
    display: none !important;
  }

  /* 컨테이너 여백/그림자 제거: 인쇄 시 문서만 눈에 띄게 */
  .min-h-screen { min-height: 0 !important; display: block !important; }
  main, main.flex-1, .flex.flex-1 { display: block !important; padding: 0 !important; }
  .card {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .card-body { padding: 0 !important; }
  .mb-4 { margin-bottom: 0 !important; }
  a[href^="/"] { color: inherit !important; text-decoration: none !important; }

  /* 3-column grid → 단일 컬럼: 우측 결재선 패널/이력은 이미 숨겼지만, 폭 100% 확보 */
  .grid { display: block !important; }
  .col-span-2, .col-span-1 { width: 100% !important; max-width: 100% !important; }

  /* ── 인쇄 러닝 헤더: 페이지 상단 여백 안에 fixed 로 배치 → 매 페이지 반복 ── */
  .print-header-bar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: -16mm;                     /* @page margin-top(22mm) 안쪽 */
    left: 0;
    right: 0;
    height: 12mm;
    padding: 0 2mm;
    font-size: 10pt;
    font-weight: 600;
    color: #334155;
    border-bottom: 1px solid #94a3b8;
  }
  .print-header-bar .ph-left {
    letter-spacing: 0.08em;
    color: #1e40af;
  }
  .print-header-bar .ph-right {
    font-weight: 500;
    color: #475569;
  }

  /* ── 인쇄 러닝 푸터: 페이지 하단 여백 안에 fixed 로 배치 → 매 페이지 반복 ── */
  .print-footer-bar {
    display: block !important;
    position: fixed;
    bottom: -14mm;                  /* @page margin-bottom(20mm) 안쪽 */
    left: 0;
    right: 0;
    height: 10mm;
    padding-top: 3mm;
    text-align: center;
    font-size: 8.5pt;
    color: #64748b;
    border-top: 1px dashed #94a3b8;
    letter-spacing: 0.15em;
  }
  .print-footer-bar .pf-main {
    color: #b91c1c;
    font-weight: 700;
    letter-spacing: 0.3em;
    margin-right: 6px;
  }

  /* ── 문서 본문 박스: 결재 문서만 도장 있는 A4 지질처럼 보이게 ── */
  #doc-body {
    display: block !important;
    padding: 6mm 7mm !important;
    border: 1.2pt solid #334155 !important;
    background: #ffffff !important;
    box-sizing: border-box;
  }
  #doc-form-area { color: #0f172a; }

  /* 폼 제목: 문서 최상단 크게 */
  .form-title {
    font-size: 22pt !important;
    margin: 0 0 8mm !important;
    padding: 0 !important;
    border-bottom: 1.5pt solid #334155;
    padding-bottom: 3mm !important;
  }

  /* 결재 양식 표 스타일 강제 (배경 살리기) */
  .approval-form-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-top: 1.2pt solid #334155 !important;
    margin-bottom: 4mm !important;
  }
  .approval-form-table th,
  .approval-form-table td {
    border: 0.5pt solid #64748b !important;
    padding: 2mm 3mm !important;
    font-size: 10pt !important;
    vertical-align: middle;
  }
  .approval-form-table th {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
  }

  /* input/textarea → 값만 보이는 텍스트처럼 (테두리/배경 제거) */
  .approval-form-table td input,
  .approval-form-table td textarea,
  .approval-form-table td select,
  #doc-form-area input[type="text"],
  #doc-form-area input[type="number"],
  #doc-form-area input[type="date"],
  #doc-form-area input[type="time"],
  #doc-form-area textarea,
  #doc-form-area select,
  #doc-form-area input[type="text"][readonly],
  #usages-total {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-size: 10pt !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* 라디오 버튼은 값만 남기고 시각적으로 얇게 */
  #doc-form-area input[type="radio"] {
    transform: scale(0.85);
    margin-right: 2px;
  }

  /* 리치에디터: 툴바는 숨김, 내용은 그대로 노출 */
  .rte-host {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .rte-content, .rte-readonly-content {
    padding: 0 !important;
    color: #0f172a !important;
    font-size: 10pt !important;
    line-height: 1.55 !important;
    min-height: 0 !important;
  }
  .rte-content img,
  .rte-readonly-content img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }

  /* 도장박스(승인 표): 표 내용 검게 유지 */
  #approval-stamp-area,
  #approval-stamp-area table,
  #approval-stamp-area table td,
  #approval-stamp-area table th {
    color: #0f172a !important;
  }

  /* 표/행 페이지 나눔 제어: 되도록 표 내부에서 잘리지 않도록 */
  table { page-break-inside: auto; }
  tr    { page-break-inside: avoid; page-break-after: auto; }
  thead { display: table-header-group; }  /* 표가 여러 페이지 걸치면 헤더 반복 */
  tfoot { display: table-footer-group; }
  h1, h2, h3, .form-title { page-break-after: avoid; }
  img, .rte-content, .rte-readonly-content { page-break-inside: avoid; }

  /* 링크 URL 표시 방지 (Firefox 등이 링크 뒤에 URL 붙이는 것 방지) */
  a[href]:after { content: "" !important; }

  /* 카드/컨테이너 폭 강제 100% */
  .card, #doc-body, main { max-width: 100% !important; width: 100% !important; }
}