/* ============================================================
   AI-RPA 시스템 글로벌 스타일시트 v2.0
   디자인 참조: rpa-shared.jsx 디자인 토큰 기반
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ===== 디자인 토큰 ===== */
/* ============================================================
   디자인 토큰 v3.0 — 시안 A: 미니멀 프로 (Linear/Notion 스타일)
   - 액센트: 인디고 #4F46E5
   - 뉴트럴: 차가운 그레이 스케일 (#FAFAFA ~ #111827)
   - 폰트: Inter (영문/숫자) + Pretendard (한글)
   - 라운드: 10px 기본, 그림자 최소화
   ※ 변수명은 기존과 동일 유지 → Razor 인라인 스타일 자동 반영
   ============================================================ */
:root {
    --bg: #FFFFFF;
    --bg-subtle: #FAFAFA;
    --bg-muted: #F3F4F6;
    --bg-card: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --sidebar-hover: #F9FAFB;
    --sidebar-active: #EEF2FF;
    --border: #ECECEE;
    --border-strong: #E5E7EB;
    --grid-line: #D8DBE0;   /* [260715] 처리이력 그리드 셀 세로 구분선(색선) — var(--border)가 너무 옅어 별도 지정 */
    --text: #111827;
    --text-muted: #6B7280;
    --text-subtle: #9CA3AF;
    --accent: #4F46E5;
    --accent-dark: #4338CA;
    --accent-light: #EEF2FF;
    --accent-border: #C7D2FE;
    --success: #059669;
    --success-light: #ECFDF5;
    --success-border: #A7F3D0;
    --error: #DC2626;
    --error-light: #FEF2F2;
    --error-border: #FECACA;
    --warning: #D97706;
    --warning-light: #FFFBEB;
    --warning-border: #FDE68A;
    --purple: #7C3AED;
    --purple-light: #F5F3FF;
    --teal: #0D9488;
    --teal-light: #F0FDFA;
    --font: 'Inter', 'Pretendard', -apple-system, 'Segoe UI', sans-serif;
    --r: 10px;
    --r-sm: 6px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 9999px;
    --shadow: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 2px 6px rgba(0,0,0,.05);
    --shadow-lg: 0 8px 16px rgba(0,0,0,.06);
}

/* ===== 기본 리셋 ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg-subtle);
    -webkit-font-smoothing: antialiased;
}

.rpa-dashboard, .rpa-upload, .rpa-job-detail, .rpa-templates, .rpa-settings {
    font-family: var(--font);
    color: var(--text);
    padding: 24px 28px;
    width: 100%;          /* 화면 전체 너비 — 본문 꽉차게 (BOM 하위 메뉴와 동일) */
    max-width: 100%;
    box-sizing: border-box;
}

/* 화면 전체 너비 페이지 (SRM BOM 하위 메뉴용) */
.rpa-settings-full {
    font-family: var(--font);
    color: var(--text);
    padding: 24px 28px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ===== 버튼 ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    height: 34px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
.btn:hover { background: var(--bg-muted); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: 0.45; cursor: default; }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-success {
    background: var(--success);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-sm);
}
.btn-success:hover { background: #047857; }

.btn-danger {
    background: var(--error);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-sm);
}
.btn-danger:hover { background: #B91C1C; }

.btn-ghost {
    background: transparent;
    border: none;
    box-shadow: none;
}
.btn-ghost:hover { background: var(--bg-muted); }

.btn-sm { padding: 4px 12px; font-size: 12px; height: 30px; }
.btn-lg { padding: 9px 20px; font-size: 14px; height: 42px; }
.btn-back { padding: 4px 12px; font-size: 12px; height: 30px; }

/* ===== 요약 카드 그리드 ===== */
.summary-cards {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stat-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    transition: border-color 0.15s;
}
.stat-card:hover { border-color: var(--accent-border); }

.stat-card .stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 6px;
    white-space: nowrap;
}
.stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}
.stat-card .stat-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 0;
    white-space: nowrap;
}
.stat-card .stat-icon {
    font-size: 22px;
    opacity: 0.6;
}

/* ===== 카드 (범용) ===== */
.card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    transition: all 0.15s;
}
.card:hover { border-color: var(--border-strong); }
.card-pad { padding: 16px; }
.card-header {
    padding: 14px 18px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

/* ===== 오류 경고 배너 ===== */
.alert-banner {
    background: var(--error-light);
    border: 1.5px solid var(--error-border);
    border-radius: var(--r);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.alert-banner .alert-text {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--error);
}
.alert-banner.alert-success {
    background: var(--success-light);
    border-color: var(--success-border);
}
.alert-banner.alert-success .alert-text { color: var(--success); }
.alert-banner.alert-warning {
    background: var(--warning-light);
    border-color: var(--warning-border);
}
.alert-banner.alert-warning .alert-text { color: var(--warning); }

/* ===== 테이블 ===== */
.rpa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rpa-table thead { background: var(--bg-subtle); }
.rpa-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.rpa-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bg-muted);
    vertical-align: middle;
}
.rpa-table tbody tr { transition: background 0.1s; }
.rpa-table tbody tr:hover { background: var(--bg-subtle); }
.rpa-table .row-fail { background: var(--error-light) !important; }
.rpa-table .row-processing { background: var(--warning-light) !important; }
.rpa-table .row-skip { background: var(--bg-muted); }
.rpa-table .row-expanded { background: var(--bg-subtle); }

.rpa-table code {
    background: var(--bg-muted);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-family: 'Fira Code', 'Consolas', monospace;
}

.filename {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 배지 ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.badge-success { background: var(--success-light); color: var(--success); }
.badge-success .badge-dot { background: var(--success); }
.badge-danger { background: var(--error-light); color: var(--error); }
.badge-danger .badge-dot { background: var(--error); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-warning .badge-dot { background: var(--warning); }
.badge-info, .badge-running { background: var(--accent-light); color: var(--accent); }
.badge-running .badge-dot { background: var(--accent); }
.badge-secondary, .badge-paused { background: var(--bg-muted); color: var(--text-muted); }
.badge-default { background: var(--bg-muted); color: var(--text-muted); }
.badge-purple { background: var(--purple-light); color: var(--purple); }

.confidence { font-weight: 600; }
.confidence.high { color: var(--success); }
.confidence.mid { color: var(--warning); }
.confidence.low { color: var(--error); }

.confidence-badge {
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 700;
}
.confidence-badge.high { background: var(--success-light); color: var(--success); }
.confidence-badge.mid { background: var(--warning-light); color: var(--warning); }
.confidence-badge.low { background: var(--error-light); color: var(--error); }

.template-badge {
    background: var(--purple-light);
    color: var(--purple);
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 500;
}

/* ===== 카운트 ===== */
.count-success { color: var(--success); font-weight: 600; }
.count-fail { color: var(--error); font-weight: 600; }
.count-skip { color: var(--text-subtle); }

/* ===== 진행률 바 ===== */
.progress-bar-mini {
    position: relative;
    height: 5px;
    background: var(--bg-muted);
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}
.progress-bar-mini .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.progress-section { margin: 20px 0; }
.progress-bar {
    display: flex;
    height: 24px;
    background: var(--bg-muted);
    border-radius: 12px;
    overflow: hidden;
}
.progress-fill { height: 100%; transition: width 0.5s; }
.progress-success { background: var(--success); }
.progress-fail { background: var(--error); }
.progress-skip { background: var(--text-subtle); }

.progress-legend {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    font-size: 13px;
}
.legend-item { display: flex; align-items: center; gap: 4px; }

/* ===== 파이프라인 미니 도트 ===== */
.pipeline-dots {
    display: flex;
    align-items: center;
    gap: 0;
}
.pipeline-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: #fff;
    transition: all 0.2s;
}
.pipeline-dot.done { background: var(--success); border-color: var(--success); }
.pipeline-dot.active { background: var(--accent); border-color: var(--accent); }
.pipeline-dot.error { background: var(--error); border-color: var(--error); }
.pipeline-line {
    width: 14px;
    height: 2px;
    background: var(--border);
}
.pipeline-line.done { background: var(--success); }

/* ===== 미니 차트 (7일 막대) ===== */
.mini-chart {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 60px;
}
.mini-chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.mini-chart-fill {
    width: 100%;
    border-radius: 3px 3px 0 0;
    transition: height 0.3s;
    min-height: 4px;
}
.mini-chart-label {
    font-size: 9px;
    color: var(--text-subtle);
}

/* ===== ERP 등록 현황 ===== */
.erp-stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}
.erp-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}
.erp-stat-value {
    font-size: 11px;
    font-weight: 700;
}

/* ===== 폼 요소 ===== */
.form-group { margin-bottom: 16px; }
.form-group label, .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.form-label .required { color: var(--error); margin-left: 2px; }

.form-select, .form-input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: all 0.12s;
}
.form-select:focus, .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.form-select-sm {
    padding: 0 8px;
    height: 32px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 12px;
    font-family: var(--font);
    background: var(--bg);
    min-width: 150px;
    outline: none;
}
.form-select-sm:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }

/* ===== 단계 위자드 바 ===== */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
    padding: 16px 0;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-muted);
    color: var(--text-subtle);
    border: 2px solid transparent;
    transition: all 0.2s;
}
.step.active .step-num {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.step.done .step-num {
    background: var(--success);
    color: #fff;
}
.step-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
}
.step.active .step-label {
    color: var(--accent);
    font-weight: 600;
}
.step-line {
    width: 56px;
    height: 2px;
    background: var(--border);
    margin: 0 6px;
    margin-bottom: 18px;
    transition: background 0.2s;
}
.step-line.done { background: var(--success); }
.step-line.active { background: var(--accent); }

/* ===== 업로드: 좌우 분할 레이아웃 ===== */
.upload-layout {
    display: flex;
    gap: 0;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    min-height: 480px;
    box-shadow: var(--shadow-sm);
}
.upload-left {
    width: 340px;
    border-right: 1.5px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    background: var(--bg);
}
.upload-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 드래그앤드롭 */
.drop-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--r);
    padding: 24px 16px;
    text-align: center;
    transition: all 0.15s;
    background: var(--bg-subtle);
    cursor: pointer;
    overflow: hidden;
}
.drop-zone:hover, .drop-zone.drag-over {
    border-color: var(--accent);
    background: var(--accent-light);
}
.drop-icon { font-size: 28px; margin-bottom: 8px; }
.drop-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
}
.drop-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 12px;
}

/* 파일 아이템 */
.file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg);
    cursor: pointer;
    transition: all 0.15s;
}
.file-item.selected {
    border-color: var(--accent);
    background: var(--accent-light);
}
.file-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.file-item.selected .file-item-icon {
    background: var(--accent-border);
}
.file-item-name {
    font-weight: 600;
    font-size: 13px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-item-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* 팁 박스 */
.tip-box {
    background: var(--bg-muted);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
.tip-box-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.tip-box ul {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    padding-left: 16px;
    line-height: 1.7;
}

/* 시트 탭 */
.sheet-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid var(--border);
    padding: 0 20px;
    background: var(--bg);
    overflow: auto;
}
.sheet-tab {
    padding: 7px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.sheet-tab.active {
    font-weight: 600;
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* 데이터 정보바 */
.data-info-bar {
    padding: 8px 20px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
}
.data-info-bar strong { color: var(--text); }

/* 미리보기 테이블 */
.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.preview-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-dark);
    background: var(--accent-light);
    border-bottom: 1.5px solid var(--accent-border);
    border-right: 1px solid var(--accent-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.preview-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-table tbody tr:nth-child(even) { background: var(--bg-subtle); }

.row-num-th {
    padding: 8px 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-subtle);
    background: var(--bg-muted);
    border-bottom: 1.5px solid var(--border);
    border-right: 1px solid var(--border);
    width: 36px;
}
.row-num-td {
    padding: 7px 10px;
    text-align: center;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: var(--bg-muted);
    font-size: 11px;
    width: 36px;
}

/* 컬럼 타입 배지 */
.col-type-bar {
    border-top: 1.5px solid var(--border);
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    overflow: auto;
    background: var(--bg-subtle);
}
.col-type-chip {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 11px;
}
.col-type-chip .type-label {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

/* ===== 매핑: 우측 사이드 패널 레이아웃 ===== */
.mapping-layout {
    display: flex;
    gap: 0;
}
.mapping-main { flex: 1; overflow: auto; }
.mapping-sidebar {
    width: 260px;
    border-left: 1.5px solid var(--border);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    background: var(--bg-subtle);
}

.mapping-table { margin-bottom: 0; }
.mapping-table .low-confidence { background: var(--warning-light); }

.mapping-status-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mapping-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.mapping-status-icon { font-size: 11px; }
.mapping-status-icon.ok { color: var(--success); }
.mapping-status-icon.missing { color: var(--error); }
.mapping-status-icon.optional { color: var(--text-subtle); }

/* 자동 매핑 제안 박스 */
.ai-suggest-box {
    background: var(--accent-light);
    border: 1.5px solid var(--accent-border);
    border-radius: var(--r-sm);
    padding: 12px;
}
.ai-suggest-box .title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-dark);
    margin: 0 0 6px;
}
.ai-suggest-box .desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 10px;
    line-height: 1.6;
}

/* 템플릿 목록 (사이드바) */
.template-list-item {
    padding: 5px 8px;
    border-radius: var(--r-sm);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.12s;
}
.template-list-item:hover { border-color: var(--accent); }
.template-list-item .apply-link { color: var(--accent); font-size: 11px; }

/* ===== 검증 아이콘 ===== */
.validation-icon { font-size: 14px; }
.validation-icon.pass { color: var(--success); }
.validation-icon.fail { color: var(--error); }
.validation-icon.none { color: var(--text-subtle); }

/* 매핑 미리보기 값 */
.preview-val {
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-muted);
    border-radius: var(--r-sm);
}

/* ===== 타입 배지 (날짜/문자/숫자) ===== */
.type-badge {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
}
.type-badge.date { background: rgba(124,58,237,0.13); color: var(--purple); }
.type-badge.text { background: rgba(59,130,246,0.13); color: var(--accent); }
.type-badge.number { background: rgba(22,163,74,0.13); color: var(--success); }

/* ===== 정보 그리드 ===== */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 16px;
    margin-bottom: 20px;
}
.info-item label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.info-item span { font-size: 14px; font-weight: 500; }

/* ===== 탭 ===== */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1.5px solid var(--border);
    margin-bottom: 16px;
}
.tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    font-size: 14px;
    font-family: var(--font);
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active {
    color: var(--accent);
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
    margin-bottom: -1px;
}

/* ===== 모달 ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content {
    background: var(--bg);
    border-radius: var(--r-lg);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; }
.modal-body { padding: 24px; }

/* ===== 설정 ===== */
.settings-section {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.settings-section h3 { margin-top: 0; margin-bottom: 16px; font-size: 16px; }
.settings-section h4 { margin-top: 20px; margin-bottom: 8px; font-size: 14px; }
.desc-text { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }

.sync-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sync-form .form-group { min-width: 200px; }

.status-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--error); }
.status-message { font-size: 13px; margin-top: 8px; }
.status-message.ok { color: var(--success); }
.status-message.err { color: var(--error); }

.table-list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.table-list li {
    background: var(--bg-muted);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
}

/* ===== AI 상태 표시 ===== */
.ai-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    margin-top: 24px;
    font-size: 13px;
}
.ai-status.healthy { background: var(--success-light); color: var(--success); }
.ai-status.offline { background: var(--error-light); color: var(--error); }
.ai-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: blink 2s infinite;
}

/* ===== 로딩 / 빈 상태 — 도트 펄스 통일 ===== */

/* 도트 펄스 애니메이션 */
@keyframes dot-pulse {
    0%, 100% { opacity: .2; transform: scale(.65); }
    50%       { opacity: 1;  transform: scale(1); }
}

/* 도트 1개 공통 */
.dot-pulse-dot {
    display: inline-block;
    border-radius: 50%;
    animation: dot-pulse 1.2s ease-in-out infinite;
}

/* 도트 3개 묶음 (가로 배치) */
.dot-pulse {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.dot-pulse .d1 { width:7px; height:7px; background:#378ADD; animation-delay:0s; }
.dot-pulse .d2 { width:7px; height:7px; background:#7F77DD; animation-delay:.2s; }
.dot-pulse .d3 { width:7px; height:7px; background:#1D9E75; animation-delay:.4s; }

/* 버튼 안 소형 도트 (흰색) */
.dot-pulse-sm {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.dot-pulse-sm .d1 { width:5px; height:5px; background:#fff; animation-delay:0s; }
.dot-pulse-sm .d2 { width:5px; height:5px; background:#fff; animation-delay:.2s; }
.dot-pulse-sm .d3 { width:5px; height:5px; background:#fff; animation-delay:.4s; }

/* 전체 화면 로딩 컨테이너 */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 13px;
}
/* 기존 .spinner 호환 — 도트 펄스로 렌더 */
.spinner {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.spinner::before,
.spinner::after,
.spinner b {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    animation: dot-pulse 1.2s ease-in-out infinite;
}
.spinner::before { background: #378ADD; animation-delay: 0s; }
.spinner b       { background: #7F77DD; animation-delay: .2s; width:10px; height:10px; border-radius:50%; display:inline-block; }
.spinner::after  { background: #1D9E75; animation-delay: .4s; }

/* 기존 .spinner-sm 호환 — 소형 흰색 도트 */
.spinner-sm {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    vertical-align: middle;
}
.spinner-sm::before,
.spinner-sm::after,
.spinner-sm b {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: dot-pulse 1.2s ease-in-out infinite;
}
.spinner-sm::before { animation-delay: 0s; }
.spinner-sm b       { width:5px; height:5px; border-radius:50%; display:inline-block; background:currentColor; animation: dot-pulse 1.2s ease-in-out infinite; animation-delay:.2s; }
.spinner-sm::after  { animation-delay: .4s; }


.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }

.limit-notice {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
}

/* ===== AI 분석 애니메이션 ===== */
.analyzing-section { text-align: center; padding: 60px 20px; }
.ai-animation { position: relative; display: inline-block; margin-bottom: 20px; }
.brain-icon { font-size: 64px; position: relative; z-index: 1; }
.pulse-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; height: 100px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

.analysis-info {
    background: var(--accent-light);
    display: inline-block;
    padding: 16px 32px;
    border-radius: var(--r);
    margin-top: 16px;
    text-align: left;
}
.analysis-info p { margin: 4px 0; font-size: 14px; }

/* 결과 섹션 */
.result-section {
    text-align: center;
    padding: 60px 20px;
}
.result-icon { font-size: 64px; margin-bottom: 16px; }

/* ===== 액션 ===== */
.action-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

/* 페이지 헤더 */
.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.page-header h2 { margin: 0; font-size: 18px; font-weight: 700; }

.section-header { margin-bottom: 12px; }
.section-header h3 { font-size: 14px; font-weight: 700; margin: 0; }

/* 에러 박스 */
.error-box {
    background: var(--error-light);
    border: 1.5px solid var(--error-border);
    border-radius: var(--r);
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 13px;
    color: var(--error);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.warning-box {
    background: var(--warning-light);
    border: 1.5px solid var(--warning-border);
    border-radius: var(--r);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
}
.warning-box p { margin: 4px 0; }

.unmapped-warning {
    background: var(--error-light);
    border: 1.5px solid var(--error-border);
    border-radius: var(--r);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--error);
}

/* 버튼 닫기 */
.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
}

/* ===== 애니메이션 ===== */
@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
@keyframes blink { 50% { opacity: 0.3; } }

/* ===== 반응형 ===== */
@media (max-width: 768px) {
    .summary-cards { flex-direction: column; }
    .upload-layout { flex-direction: column; }
    .upload-left { width: 100%; border-right: none; border-bottom: 1.5px solid var(--border); }
    .mapping-layout { flex-direction: column; }
    .mapping-sidebar { width: 100%; border-left: none; border-top: 1.5px solid var(--border); }
    .step-indicator { flex-wrap: wrap; justify-content: center; }
    .step-line { width: 24px; }
    .form-row { flex-direction: column; }
    .info-grid { grid-template-columns: 1fr; }
    .sync-form { flex-direction: column; }
    .rpa-table { font-size: 11px; }
    .rpa-table th, .rpa-table td { padding: 8px 10px; }
    /* [260721] !important: ≤1024px 일괄 min-width:0 차단 규칙에 밀리지 않도록 */
    .stat-card { min-width: 140px !important; }
}

/* Dashboard 자동갱신 상태 표시 */
@keyframes pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px rgba(16,185,129,0.6); }
    50%      { opacity: 0.5; transform: scale(0.85); box-shadow: 0 0 2px rgba(16,185,129,0.3); }
}

/* PDF 버튼 스피너 */
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 챗봇 탭 전용 오버플로 제어 =====
   rpa-main이 min-height:100vh만 지정되어 있어서
   챗봇 div가 뷰포트를 벗어나면 브라우저 스크롤이 생김.
   챗봇 탭에서는 .chat-tab-root가 height:calc(100vh-158px)로
   스스로 높이를 잡으므로 상위 rpa-main의 overflow를 hidden으로 막음. */
.rpa-main:has(.chat-tab-root) {
    overflow: hidden;
    height: 100vh;
}

/* 챗봇 탭 래퍼 식별자 클래스 */
.chat-tab-root {
    display: flex;
    flex-direction: column;
    /* 한 줄 통합 헤더(탭바 ~40px) 기준 — 컴팩트 레이아웃 적용 후 보정 */
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    overflow: hidden;
}

/* ===== AI 추론 로딩 애니메이션 (TAB3 AI요약 모달 + 챗봇 말풍선 공용) =====
   .ai-infer-loading  : 모달용 전체 래퍼 (padding 포함 큰 버전)
   .ai-infer-bubble   : 챗봇 말풍선 내부용 (compact 버전)
   ※ 노드·흐름선은 인라인 SVG + JS animation으로 처리,
     CSS는 공용 반복 애니메이션 키프레임만 정의. */

@keyframes ai-pulse-ring {
    0%,100% { opacity:.10; transform:scale(1.00); }
    50%     { opacity:.28; transform:scale(1.18); }
}
@keyframes ai-node-glow {
    0%,100% { opacity:.25; }
    50%     { opacity:1;   }
}
@keyframes ai-stream {
    0%   { stroke-dashoffset:40; opacity:0; }
    15%  { opacity:1; }
    85%  { opacity:1; }
    100% { stroke-dashoffset:0;  opacity:0; }
}
@keyframes ai-bar-bounce {
    0%,80%,100% { transform:scaleY(.35); opacity:.45; }
    40%         { transform:scaleY(1);   opacity:1;   }
}
@keyframes ai-badge-fade {
    0%,100% { opacity:.5; }
    50%     { opacity:1;  }
}

/* 공용 바 아이템 */
.ai-bar {
    width:4px;
    border-radius:2px;
    background:#4F46E5;
    transform-origin:bottom;
    animation: ai-bar-bounce 1.2s ease-in-out infinite;
}
.ai-bar.b2 { animation-delay:.2s; }
.ai-bar.b3 { animation-delay:.4s; }

/* 모달 전용 래퍼 */
.ai-infer-loading {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:32px 20px 28px;
}

/* 챗봇 말풍선 전용 래퍼 */
.ai-infer-bubble {
    display:flex;
    align-items:center;
    gap:10px;
}
.ai-infer-bubble .ai-bar {
    width:3px;
    height:12px;
}

/* ── air-* SVG 애니메이션 클래스 (TAB3 모달 + 챗봇 버블 인라인 SVG 공용)
   키프레임: ai-pulse-ring / ai-node-glow / ai-stream (위에서 정의)
   transform-origin은 각 SVG 좌표계 기준으로 인라인 style로 재정의 ── */
.air-ring { animation: ai-pulse-ring 2s ease-in-out infinite; }
.air-n0   { animation: ai-node-glow 1.8s ease-in-out infinite 0.0s; }
.air-n1   { animation: ai-node-glow 1.8s ease-in-out infinite 0.3s; }
.air-n2   { animation: ai-node-glow 1.8s ease-in-out infinite 0.6s; }
.air-n3   { animation: ai-node-glow 1.8s ease-in-out infinite 0.9s; }
.air-n4   { animation: ai-node-glow 1.8s ease-in-out infinite 1.2s; }
.air-s0   { animation: ai-stream 2.2s ease-in-out infinite 0.0s; }
.air-s1   { animation: ai-stream 2.2s ease-in-out infinite 0.4s; }
.air-s2   { animation: ai-stream 2.2s ease-in-out infinite 0.8s; }
.air-s3   { animation: ai-stream 2.2s ease-in-out infinite 1.2s; }
.air-s4   { animation: ai-stream 2.2s ease-in-out infinite 1.6s; }

/* ══════════════════════════════════════════════════════════════════
   [260715] 처리 이력 그리드 셀 세로 구분선 — 단일·병합 동일 적용
   ------------------------------------------------------------------
   요청: 병합 처리이력처럼 단일 처리이력에도 셀 구분선(색선)이 보이게.
   원인: 단일 헬퍼 TdS/ThS 의 인라인 border-right 색이 var(--border)(#ECECEE)
         라 화면에서 거의 안 보였고, 병합은 세로선 자체가 없었음.
   조치: .histgrid 클래스를 두 처리이력 <table> 에 부여.
         - 인라인(border-right:var(--border))보다 우선하도록 !important.
         - 마지막 열은 외곽 래퍼선과 겹치므로 세로선 제거.
   ※ ThS/TdS 는 미리보기·버전이력·이상탐지 등 다른 표에서도 공용이므로
     헬퍼를 건드리지 않고 이 클래스로만 처리이력 표에 한정 적용한다.
   ══════════════════════════════════════════════════════════════════ */
.histgrid th,
.histgrid td { border-right: 1px solid var(--grid-line) !important; }
.histgrid th:last-child,
.histgrid td:last-child { border-right: none !important; }

/* ═══════════════════════════════════════════════════════════
   [260717 계층화] 반응형 규칙 2계층 구조
   · 1계층(≤1024px, 구조 규칙): 팽창 차단·테이블 스크롤·페이지 가드.
     ★기존 768px 한정이 원인이 된 실사고 — 뷰포트 ~800px(작은 태블릿/
     좁은 창)에서는 규칙이 전혀 적용되지 않아 여전히 잘렸다(스크린샷).
     구조 규칙은 레이아웃을 바꾸지 않고 '잘림 대신 스크롤'만 만들므로
     1024px까지 확장해도 부작용이 없다. 데스크톱(≥1025px)은 무영향.
   · 2계층(≤768px, 시각 규칙): 그리드 1열 스택·말풍선 폭·입력 16px 등
     화면 구성을 실제로 바꾸는 규칙 — 진짜 모바일 폭에서만 적용.
   ═══════════════════════════════════════════════════════════ */

/* ── 1계층: 구조 규칙 (≤1024px — 모바일 + 작은 태블릿/좁은 창) ── */
@media (max-width: 1024px) {

    /* ★[260721] 최상위 본문 컨테이너(.rpa-main) 폭 가두기 —
       769~1024px 구간에서는 사이드바가 아직 데스크톱 모드(margin-left:230px)
       이면서 콘텐츠는 모바일 규칙을 받는다. 이때 .rpa-main 에 폭 제한이
       없으면 넓은 테이블이 .rpa-main 을 밀어 스크롤이 안 생기고 잘린다.
       MainLayout 의 ≤768px 규칙과 별개로, 콘텐츠 규칙과 같은 1024px
       기준에서 .rpa-main 을 남은 폭(calc)에 가둬 사각지대를 없앤다.
       calc: 사이드바 230px 제외한 잔여폭. 모바일(≤768px)에선 MainLayout
       에서 margin-left:0 + max-width:100vw 로 다시 덮이므로 무해. */
    .rpa-main {
        max-width: calc(100vw - 230px) !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .sidebar-collapsed .rpa-main {
        max-width: calc(100vw - 62px) !important;   /* 접힘 사이드바 폭 62px */
    }

    /* 처리이력 등 넓은 테이블 — 가로 스크롤은 table이 아니라 감싸는
       래퍼(div)에 걸어야 동작(table에 overflow는 무효). */
    .hist-table-wrap {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;   /* iOS 관성 스크롤 */
    }
    .histgrid { width: auto !important; min-width: 100%; }

    /* ★핵심★ 부모 체인 팽창 차단 — 스크롤 래퍼가 실제로 스크롤되려면
       조상들이 테이블 넓이만큼 늘어나지 않고 화면 폭에 갇혀야 한다.
       flex/블록 자식의 기본 min-width:auto(콘텐츠 폭 강제)를 해제.
       [260721] .srm-tab-content 자신도 100vw 로 가둔다(패딩 포함 box-sizing).
       종전엔 max-width:100% 였으나, 부모(.srm-page-root)가 넘치면 100%도
       같이 넘쳐 무의미 → 뷰포트 절대 기준(100vw)으로 못박는다. */
    .srm-tab-content {
        min-width: 0 !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;      /* 자신은 숨기고 자식 래퍼가 스크롤 소유 */
    }
    .srm-tab-content .card,
    .srm-tab-content .card-pad { min-width: 0 !important; max-width: 100% !important; }
    /* [260721] 병합 처리이력 루트도 srm-tab-content 와 동일하게 뷰포트 절대
       기준(100vw)으로 가둠 — 자체 인라인 overflow:hidden 과 함께 이중 안전. */
    .merge-tab3-root {
        min-width: 0 !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* ① 전 div 팽창 차단 — 페이지 하위 전체 일괄.
       [260721] !important 로 강화 — 종전엔 인라인 min-width(검색창 140px 등)
       보존을 위해 !important 를 뺐으나, 그 결과 flex 체인의 min-width:auto
       복귀를 못 이겨 처리이력·견적이력 테이블/필터가 화면 밖으로 팽창해
       잘리는 문제가 재발했다(스크린샷 ~730px).
       → :not([style*="min-width"]) 로 '인라인에 min-width 를 명시한 div'만
         제외하고 나머지 전부 !important 차단. 두 요구를 동시에 만족한다.
       카드가 화면 폭에 갇히면 필터 바의 인라인 flex-wrap 도 비로소 동작. */
    .srm-page-root div:not([style*="min-width"]),
    .rpa-settings  div:not([style*="min-width"]) { min-width: 0 !important; }

    /* ①-예외: 클래스로 '의도된 최소폭'을 가진 요소는 위 일괄 차단에서
       복원한다. ※특이성 주의: 일반화 규칙이 (0,2,1)이므로 예외도
       div.클래스 형태로 (0,2,1) 동률을 만들어 '후행 규칙 승리'로 이긴다.
       새 클래스 min-width 추가 시 여기에도 같은 형태로 예외 등록할 것. */
    .srm-page-root div.progress-bar-mini,
    .rpa-settings  div.progress-bar-mini { min-width: 80px !important; }

    /* ② 테이블을 '직접' 감싼 div → 자동 가로 스크롤 래퍼화.
       모든 탭의 넓은 테이블이 별도 클래스 없이 잘림 대신 스크롤된다.
       [260721] !important 추가 — 인라인 overflow(visible 등)에 밀려
       무력화되지 않도록 강제. (:has 는 환경 검증됨) */
    .srm-page-root div:has(> table),
    .rpa-settings  div:has(> table) {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 페이지 루트 — 자식이 넘쳐도 페이지째 가로로 밀리지 않도록 차단 */
    .srm-page-root { max-width: 100vw; overflow-x: hidden; }
    .rpa-settings  { max-width: 100vw; overflow-x: hidden; }

    /* ──────────────────────────────────────────────────────────────
       [260721] 통합병합 '처리 이력' 탭(.merge-tab3-root) 전용 보강.

       증상(스크린샷 ~750px): ① 상단 조회 조건 바의 발주번호/날짜/반영률
       입력이 화면 밖으로 잘림, ② 이력 테이블 우측(생성일시·작업 버튼)이
       잘림.

       근본 원인: 이 탭 루트는 자체 인라인 overflow:hidden 을 가지며,
       조회 조건 바 외부 div 와 테이블 래퍼(.hist-table-wrap)의 '직속
       부모'가 flex 컨텍스트에서 min-width:auto(콘텐츠 폭 강제)로 복귀해
       화면 폭 이상으로 팽창 → ①의 flex-wrap 이 발동하지 않고, ②는
       래퍼에 overflow:auto 가 있어도 부모가 늘어나 페이지째 잘림.

       해결: 앞 규칙(①②)의 min-width:0 이 인라인에 밀리지 않도록, 이
       탭 하위 전 div 를 !important 로 팽창 차단하고, 조회 조건 바와
       테이블 래퍼를 명시적으로 가로 스크롤 래퍼화한다.
       (인라인 style 을 확실히 이기기 위해 !important 필수) */
    .merge-tab3-root,
    .merge-tab3-root div { min-width: 0 !important; }

    /* 조회 조건 바(테이블을 감싸지 않아 :has(>table) 대상 아님) —
       내부 입력들의 인라인 고정폭 합이 넘치면 잘리므로 자동 가로 스크롤.
       내부 flex 는 계속 wrap 우선 시도, 폭 부족 시에만 스크롤로 폴백. */
    .merge-hist-filterbar {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ※ 테이블 래퍼(.hist-table-wrap) 자체의 가로 스크롤 규칙은 본 미디어
       쿼리 상단(위 '넓은 테이블' 블록)에 이미 존재한다. 그런데도 잘렸던
       근본 원인은 래퍼가 아니라 '부모 체인 팽창'이었다 — 위 .merge-tab3-root
       div 팽창 차단(!important)과 조회 조건 바 스크롤 보강으로 해결된다. */

    /* 상단 탭 바 — 탭 7개 한 줄 나열이 폭을 넘기면 잘리던 문제.
       줄바꿈 대신 가로 스크롤로 모든 탭 접근 보장(버튼 수축 방지 포함). */
    .srm-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .srm-tab-bar::-webkit-scrollbar { height: 3px; }
    .srm-tab-bar > button,
    .srm-tab-bar > div { flex: 0 0 auto; }   /* 탭 버튼·타이틀 수축 방지 */

    /* 전역 안전망 — 개별 래퍼 처리가 누락돼도 페이지째 잘림은 차단 */
    html, body { max-width: 100vw; overflow-x: hidden; }
}

/* ── 2계층: 시각 규칙 (≤768px — 진짜 모바일 폭 한정) ── */
@media (max-width: 768px) {
    .chat-bubble  { max-width: 95% !important; }
    .mobile-fluid { max-width: 95% !important; min-width: 0 !important; }

    /* 모바일 입력 확대 방지 — iOS 사파리 포커스 자동 줌 차단(16px 미만 시 발동) */
    input, textarea, select { font-size: 16px !important; }

    /* ③ 요약 카드 그리드(총 발행건수/총 견적금액, KPI 3~5칸 나열) —
       1fr 반복 그리드가 셀 내용(금액 텍스트) min-content로 폭을 넘겨
       잘리던 문제 → 모바일에서 세로 1열 스택. 인라인 style 문자열 매칭이라
       !important 필수, 공백 유무 두 표기 모두 대응.
       ※ 취약점: 새 그리드 추가 시 표기를 기존과 동일하게 유지할 것. */
    .srm-page-root div[style*="grid-template-columns:repeat("],
    .srm-page-root div[style*="grid-template-columns: repeat("],
    .srm-page-root div[style*="grid-template-columns:1fr 1fr 1fr"],
    .srm-page-root div[style*="grid-template-columns: 1fr 1fr 1fr"],
    .srm-page-root div[style*="grid-template-columns:1fr 1fr auto"],
    .rpa-settings  div[style*="grid-template-columns:repeat("],
    .rpa-settings  div[style*="grid-template-columns: repeat("],
    .rpa-settings  div[style*="grid-template-columns:1fr 1fr 1fr"],
    .rpa-settings  div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}