:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --line: #d7dbe0;
    --ink: #1f2933;
    --muted: #6b7785;
    --accent: #2f5bea;
    --primary: #2f5bea;
    --error: #c0392b;
    /* 레이아웃 — 상단바·콘텐츠·푸터가 동일한 가운데 정렬 폭을 공유한다(우측 빈 공간 방지) */
    --container-w: 1280px;
    --gutter: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
                 system-ui, "Noto Sans KR", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 플레인 <h1>(홈 인사말·폼 페이지 등) 기본 크기 완화. page-header/login h1 은 더 구체적 규칙이 우선. */
h1 { font-size: 22px; line-height: 1.3; }

/* 키보드 포커스 가시성(접근성) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 배경은 전폭, 내부 항목은 콘텐츠와 같은 가운데 폭으로 정렬 */
    padding: 10px max(var(--gutter), calc((100% - var(--container-w)) / 2 + var(--gutter)));
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.brand { font-weight: 700; font-size: 16px; color: var(--ink); }
.topnav { display: flex; align-items: center; gap: 16px; }
.topnav a.active { font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.who { color: var(--muted); font-size: 14px; }
.role { font-size: 12px; color: var(--accent); margin-left: 4px; }
.logout-form { margin: 0; }

.content { max-width: var(--container-w); margin: 24px auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px; }

button {
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
}
button:hover { opacity: 0.92; }
button.link { background: none; color: var(--muted); padding: 4px; }

.centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.login-card { width: 340px; }
.login-card h1 { font-size: 18px; margin: 0 0 18px; }

label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
input {
    width: 100%;
    margin-top: 5px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
}
.login-card button[type=submit] { width: 100%; padding: 10px; }

.error { color: var(--error); font-size: 13px; }
.notice { color: var(--accent); font-size: 13px; }

/* ─── 배지 ────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge-danger  { background: #fdecea; color: #c0392b; }
.badge-warning { background: #fef3e2; color: #e67e22; }
.badge-muted   { background: #eef0f3; color: #6b7785; }
.badge-today   { background: #fef3e2; color: #e67e22; }
.badge-allday  { background: #eef0f3; color: #6b7785; }
.badge-active  { background: #e8f5e9; color: #2e7d32; }
.badge-closed  { background: #eef0f3; color: #6b7785; }
.badge-deleted { background: #fdecea; color: #c0392b; }
.badge-memo-phone   { background: #e3f2fd; color: #1565c0; }
.badge-memo-consult { background: #f3e5f5; color: #6a1b9a; }
.badge-memo-progress{ background: #e8f5e9; color: #2e7d32; }
.badge-memo-other   { background: #eef0f3; color: #6b7785; }

/* ─── 테이블 ─────────────────────────────────────────────────── */
.table, .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
.table th, .table td, .data-table th, .data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}
.table th, .data-table th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
}
.table tr:last-child td, .data-table tr:last-child td { border-bottom: none; }
.table tr.row-past td, .data-table tr.row-past td { color: var(--muted); }
.table--compact th, .table--compact td { padding: 8px 10px; }

/* ─── 버튼 ───────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 8px 14px;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
.btn:hover { opacity: 0.88; text-decoration: none; }
.btn-sm { padding: 4px 10px; font-size: 13px; border-radius: 5px; }
.btn-danger { background: var(--error); }
.btn-secondary { background: var(--muted); }
.btn-link { background: none; color: var(--accent); padding: 4px 0; }

/* ─── 폼 공통 ────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.form-group select, .form-group input[type="text"],
.form-group input[type="date"], .form-group input[type="time"],
.form-group textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
}
.form-actions { display: flex; gap: 8px; margin-top: 20px; }
.form-control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
}

/* ─── 폼 카드 (사건 등록·수정, 일정 폼) ─────────────────────── */
.form-card { max-width: 640px; }

/* ─── 폼 2·3컬럼 그리드 행 ──────────────────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 16px;
}

/* ─── 체크박스 아이템 ─────────────────────────────────────────── */
.checkbox-item { margin-bottom: 4px; }
.checkbox-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}
.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

/* ─── 필수 마커 · 검증 오류 ─────────────────────────────────── */
.required { color: var(--error); }
.field-error { color: var(--error); font-size: 12px; margin-top: 4px; display: block; }

/* ─── 빈 상태 ────────────────────────────────────────────────── */
.empty-state { padding: 20px 0; color: var(--muted); font-size: 14px; }
.empty-state p { margin: 0; }

/* ─── 메모 작성 섹션 ─────────────────────────────────────────── */
.memo-form-section {
    background: #f9fafb;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
}
.memo-form-section h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--muted);
}

/* ─── 페이지 헤더 ────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.page-header h1 { margin: 0; font-size: 20px; }
.action-group { display: flex; gap: 8px; }

/* ─── 알림 ───────────────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 14px; }
.alert-success { background: #e8f5e9; color: #2e7d32; }
.alert-error   { background: #fdecea; color: #c0392b; }

/* ─── 섹션 ───────────────────────────────────────────────────── */
.detail-section { margin-bottom: 32px; }
.detail-section h2 { font-size: 16px; margin: 0 0 12px; }
.memo-empty { padding: 20px 0; font-size: 14px; }

/* ─── 메모 목록 ───────────────────────────────────────────────── */
.memo-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.memo-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px 12px;
    background: var(--card);
}
.memo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.memo-meta .memo-author { font-weight: 600; color: var(--ink); }
.memo-meta .memo-date { color: var(--muted); }
.memo-meta form { margin-left: 2px; }
/* 메모 내용 — 메타/주변과 구별되도록 별도 박스 */
.memo-content {
    margin: 0;
    padding: 10px 12px;
    background: #f6f8fa;
    border: 1px solid var(--line);
    border-radius: 6px;
    white-space: pre-wrap;        /* 가져온 메모의 줄바꿈 보존 */
    word-break: break-word;
    line-height: 1.55;
    font-size: 14px;
    color: var(--ink);
}
.memo-pinned .memo-content { background: #fff; border-color: #cfe0ff; }
.memo-people { margin-top: 6px; }
/* 메모 첨부 칩(다운로드) */
.memo-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.attachment-chip {
    display: inline-flex; align-items: center; gap: 3px;
    max-width: 100%;
    padding: 3px 10px; font-size: 12px;
    border: 1px solid var(--line); border-radius: 12px;
    background: #f6f8fa; color: var(--accent);
}
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip:hover { background: #eef2ff; text-decoration: none; }
/* (유형 필터 탭 스타일은 아래 '메모 필터 탭' 섹션에서 정의 — 중복 정의 제거) */

/* ─── 대시보드 ───────────────────────────────────────────────── */
.dashboard-section {
    margin-bottom: 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}
.dashboard-section__title {
    font-size: 15px;
    margin: 0 0 12px;
    font-weight: 700;
    color: var(--ink);
}
.dashboard-section__title--danger { color: #c0392b; }
.dashboard-section__title--today  { color: #2f5bea; }
.dashboard-empty { font-size: 13px; padding: 4px 0; }
.dashboard-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ─── 탭 네비게이션 ──────────────────────────────────────────── */
.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--line);
    margin-bottom: 20px;
}
.tab-nav__item, .tab-item {
    padding: 8px 18px;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.tab-nav__item:hover, .tab-item:hover { color: var(--accent); text-decoration: none; }
.tab-nav__item--active, .tab-item-active {
    color: var(--accent);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

/* ─── 필터 폼 ────────────────────────────────────────────────── */
.filter-form { margin-bottom: 16px; }
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-group label { font-size: 13px; color: var(--muted); margin: 0; }
.filter-group select { width: auto; padding: 6px 10px; font-size: 13px; }
.filter-input { width: 220px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }

/* ─── 페이지네이션 ────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 16px 0;
    font-size: 13px;
}
.page-current {
    display: inline-block;
    padding: 4px 10px;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.page-info { color: var(--muted); margin-left: 8px; }

/* ─── 알림 추가 스타일 ────────────────────────────────────────── */
.alert-closed { background: #eef0f3; color: #5a6374; border-left: 3px solid #6b7785; }

/* ─── 보관함 ─────────────────────────────────────────────────── */
tr.row-deleted td { color: #999; }
tr.row-deleted td a { color: #999; text-decoration: line-through; }

/* ─── 캘린더 ─────────────────────────────────────────────────── */
.calendar-container {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

/* ─── 메모 필터 탭 ───────────────────────────────────────────── */
.memo-filter-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--line);
    margin-bottom: 14px;
}
.memo-filter-tabs a {
    padding: 6px 14px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}
.memo-filter-tabs a:hover { color: var(--accent); text-decoration: none; }
.memo-filter-tabs a.active {
    color: var(--accent);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

/* ─── 담당자 목록 + 추가 폼 ─────────────────────────────────── */
.member-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}
.member-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.member-list li:last-child { border-bottom: none; }
.add-member-form form { display: flex; gap: 8px; align-items: center; }
.add-member-form .form-control { flex: 1; }

/* ─── 관리자 폼 최대 너비 ────────────────────────────────────── */
.admin-form-card { max-width: 440px; }

/* ─── 인라인 액션 폼 (관리자 사용자 목록) ──────────────────── */
.form-control-sm { padding: 4px 8px; font-size: 13px; height: auto; }
.inline-action-form { display: flex; gap: 4px; align-items: center; }
.inline-action-form .form-control-sm { min-width: 80px; flex: 1; }

/* ─── 가로 스크롤 테이블 래퍼 + 관리자 사용자 표 셀 줄바꿈 방지 ── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-users-table th, .admin-users-table td { white-space: nowrap; }
.admin-users-table .inline-action-form { flex-wrap: nowrap; }

/* ─── 사건 기본 정보 그리드 ─────────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 8px 16px;
    margin: 0 0 16px;
    font-size: 14px;
}
.detail-grid dt {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    align-self: start;
    padding-top: 1px;
}
.detail-grid dd { margin: 0; color: var(--ink); }

/* ─── 기본 정보 카드형 그리드 (PC: 가로 다열 ≈ 2행 / 모바일: 2열) ───────── */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px 16px;
    margin: 0 0 16px;
}
.info-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.info-value { font-size: 14px; color: var(--ink); word-break: break-word; line-height: 1.35; }
@media (max-width: 768px) {
    .info-grid { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
}

/* ─── 모바일 햄버거 버튼 (데스크톱에서 숨김) ─────────────────── */
.nav-toggle { display: none; }

/* ─── 반응형 — 모바일 (≤768px) ──────────────────────────────── */
/* ─── 반응형 유틸 ─────────────────────────────────────────────── */
.show-on-mobile { display: none; }   /* 데스크톱: 모바일 전용 요소 숨김 */

@media (max-width: 768px) {
    /* 모바일: 데스크톱 전용 요소 숨김, 모바일 전용 노출 */
    .hide-on-mobile { display: none !important; }
    .show-on-mobile { display: block; }

    /* 사건 목록 — 표 대신 카드 */
    .case-cards.show-on-mobile { display: flex; flex-direction: column; gap: 10px; }
    .case-card {
        display: block;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px 14px;
        background: var(--card);
        color: var(--ink);
    }
    .case-card:hover { text-decoration: none; }
    .case-card__title { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
    .case-card__sub { font-size: 13px; color: var(--muted); margin-bottom: 7px; word-break: break-all; }
    .case-card__hearing { font-size: 13px; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .case-card__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; }

    /* 상단바 */
    .topbar {
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 14px;
        gap: 0;
    }
    .brand { flex: 1; font-size: 15px; }

    /* 햄버거 버튼 */
    .nav-toggle {
        display: block;
        background: none;
        color: var(--ink);
        border: none;
        font-size: 22px;
        padding: 2px 6px;
        cursor: pointer;
        line-height: 1;
    }

    /* 네비게이션 — 기본 숨김 */
    .topnav {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--line);
        margin-top: 8px;
        padding-top: 4px;
    }
    /* 네비게이션 — 열림 */
    .topbar.nav-open .topnav { display: flex; }

    .topnav a {
        font-size: 15px;
        padding: 11px 4px;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
        white-space: nowrap;
    }
    .topnav a:hover { color: var(--accent); text-decoration: none; }
    .who {
        padding: 10px 4px;
        font-size: 14px;
        border-bottom: 1px solid var(--line);
    }
    .logout-form { padding: 8px 0; }
    .logout-form button { width: 100%; padding: 10px; font-size: 14px; }

    /* 콘텐츠 */
    .content { padding: 0 12px; margin: 14px auto; }

    /* 카드 */
    .card { padding: 18px 14px; }
    .login-card { width: calc(100% - 40px); max-width: 340px; }

    /* 테이블 — 가로 스크롤 */
    .table, .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
    }
    /* 셀 줄바꿈 방지 → 테이블이 자연 너비로 overflow되어 스크롤 작동 */
    .table th, .table td,
    .data-table th, .data-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }
    /* 가로 스크롤 가시성 — 좌우 끝 그림자로 "더 볼 내용 있음"을 표시.
       td 셀이 투명하므로 테이블 배경의 그라데이션이 비쳐 보인다.
       cover(local)는 내용과 함께 이동해 해당 끝에 더 없을 때 그림자를 가리고,
       shadow(scroll)는 가시 영역 끝에 고정된다. */
    .table, .data-table {
        background-image:
            linear-gradient(to right, var(--card) 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to left,  var(--card) 30%, rgba(255, 255, 255, 0)),
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
        background-position: 0 0, 100% 0, 0 0, 100% 0;
        background-repeat: no-repeat;
        background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
        background-color: var(--card);
    }

    /* 페이지 헤더 */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }
    .page-header h1 { font-size: 18px; }

    /* 버튼·액션 그룹 */
    .action-group { flex-wrap: wrap; gap: 6px; }
    .form-actions { flex-wrap: wrap; gap: 6px; }
    .dashboard-actions { flex-wrap: wrap; gap: 6px; }

    /* 폼 카드·그리드 */
    .form-card { max-width: 100%; }
    .form-row { grid-template-columns: 1fr; }

    /* 필터 폼 */
    .filter-group {
        flex-wrap: wrap;
        gap: 6px;
    }
    .filter-group input[type="text"],
    .filter-group input[type="search"],
    .filter-input {
        width: 100% !important;
        flex: 1 1 auto;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 페이지네이션 */
    .pagination {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .pagination::-webkit-scrollbar { display: none; }

    /* 탭 — 가로 스크롤 */
    .tab-nav, .memo-filter-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .tab-nav::-webkit-scrollbar, .memo-filter-tabs::-webkit-scrollbar { display: none; }
    .tab-nav__item, .tab-item { white-space: nowrap; }

    /* 담당자 추가 폼 — 모바일 수직 배치 */
    .add-member-form form { flex-wrap: wrap; }
    .add-member-form .form-control { min-width: 0; }

    /* 대시보드 */
    .dashboard-section { padding: 12px; }

    /* 제목 — 플레인 h1(홈 인사말 등) 모바일 축소 */
    h1 { font-size: 19px; }
    .page-header h1 { font-size: 17px; }

    /* 내비 드롭다운이 길어도 화면 안에서 스크롤 (메뉴 항목 다수 대비) */
    .topbar.nav-open .topnav {
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    /* iOS 입력 자동 확대(줌) 방지 — 포커스 시 16px 미만이면 확대됨 → 16px 고정 + 터치 높이 확대 */
    input, select, textarea,
    .form-control, .form-group select, .form-group input, .form-group textarea,
    .filter-input, .login-card input {
        font-size: 16px;
    }
    .form-control, .form-group select, .form-group input[type="text"],
    .form-group input[type="date"], .form-group input[type="time"],
    .form-group textarea, .filter-input, .login-card input {
        padding: 11px 12px;
    }

    /* 주요 버튼 터치 타깃 확대(인라인 btn-sm/btn-link 는 제외) */
    button[type="submit"],
    .form-actions .btn,
    .action-group .btn,
    .login-card button[type="submit"],
    .dashboard-actions .btn {
        min-height: 44px;
    }

    /* 사건 기본 정보 — 긴 한글 라벨 잘림 방지: 단일 컬럼(라벨 위, 값 아래) 스택 */
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 0;
        font-size: 14px;
    }
    .detail-grid dt {
        padding: 9px 0 0;
        font-weight: 600;
        color: var(--muted);
    }
    .detail-grid dd {
        padding: 1px 0 9px;
        border-bottom: 1px solid var(--line);
        word-break: break-word;
    }
    .detail-grid dd:last-of-type { border-bottom: none; }
}

/* ── 사건번호 대법원 자동조회 링크 ───────────────────────────── */
.court-lookup-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.court-lookup-link::after {
    content: " ⚖";
    font-size: 0.85em;
    color: var(--muted);
}

/* ── 모달 팝업 ───────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 51, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.modal-box {
    background: var(--card);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 440px;
    padding: 22px 24px;
}
.modal-title { margin: 0 0 12px; font-size: 1.1rem; }
.modal-body { color: var(--ink); font-size: 0.95rem; line-height: 1.5; }
.modal-body p { margin: 0.4rem 0; }
.modal-actions {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.modal-warn {
    margin: 0.6rem 0 0;
    padding-left: 1.2rem;
    color: var(--error);
    font-size: 0.85rem;
}
.modal-spinner {
    width: 34px;
    height: 34px;
    margin: 6px auto 14px;
    border: 3px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: modal-spin 0.8s linear infinite;
}
@keyframes modal-spin { to { transform: rotate(360deg); } }

/* ─── 일정·대시보드 표 — 모바일에서 카드형 스택(가로 스크롤 제거, 모든 컬럼 노출) ─── */
@media (max-width: 768px) {
    .table--stack { display: block; overflow: visible; background: none; min-width: 0; }
    .table--stack thead { display: none; }
    .table--stack tbody { display: block; }
    .table--stack tr {
        display: block;
        padding: 9px 2px;
        border-bottom: 1px solid var(--line);
    }
    .table--stack tr:last-child { border-bottom: none; }
    .table--stack td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        border: none !important;
        padding: 3px 0 !important;
        white-space: normal !important;
        font-size: 13px;
        text-align: right;
    }
    .table--stack td::before {
        content: attr(data-label);
        color: var(--muted);
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    /* data-label 이 없는 셀(있다면)에는 가짜 라벨 공간을 만들지 않음 */
    .table--stack td:not([data-label])::before { content: ""; }
    /* 제목·사건 등 링크는 우측 정렬, 줄바꿈 허용 */
    .table--stack td a { word-break: break-word; }
}

/* 사건 상세 페이지 개선 (2026-06-14) */
.page-header { flex-wrap: wrap; gap: 8px; }
.memo-item.memo-auto { opacity: 0.7; }
.memo-item.memo-auto .memo-content { color: var(--muted); font-size: 0.85rem; }
.data-table tr.memo-auto td { color: var(--muted); }   /* 가져온/시스템 메모 흐림(표 행) */
.audit-summary { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) { .audit-summary { max-width: none; white-space: normal; } }

/* 참조인(CC) 구분 색상 (2026-06-14)
   메모·일정은 주담당·담당 전원에게 표시된다. 그중 '본인이 참조인으로 선택된' 항목을
   파란 배경+좌측 강조선으로 구분한다. cc-other(본인이 참조 아님)는 기본 흰 배경 유지(대비). */
.memo-item.cc-mine { background: #eaf2ff; box-shadow: inset 3px 0 0 var(--primary, #2563eb); }
.memo-item.cc-mine .memo-content { background: #fff; }
.table tr.cc-mine > td, .data-table tr.cc-mine > td { background: #eaf2ff; }
.table tr.cc-mine > td:first-child,
.data-table tr.cc-mine > td:first-child { box-shadow: inset 3px 0 0 var(--primary, #2563eb); }

/* 파일 첨부 드래그&드롭 (2026-06-14) — dropzone.js 가 input[data-dropzone] 를 감싼다. */
.dropzone {
    border: 1.5px dashed var(--line);
    border-radius: 8px;
    background: #fafbfc;
    padding: 12px 14px;
    transition: border-color .12s, background .12s;
}
.dropzone.dragover {
    border-color: var(--accent);
    background: #eef3ff;
}
.dropzone.dz-error { border-color: var(--error); background: #fdecea; }
.dropzone-hint {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
}
.dropzone-hint strong { color: var(--ink); }
.dropzone-hint small { color: var(--muted); }
.dropzone-icon { font-size: 15px; color: var(--accent); }
.dropzone input[type="file"] { display: block; max-width: 100%; }
.dropzone-msg { color: var(--error); font-size: 12px; margin-top: 6px; }
.dropzone-msg:empty { display: none; }
.dropzone-files {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dropzone-files:empty { display: none; }
.dropzone-files li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
}
.dropzone-files .dz-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-files .dz-size { color: var(--muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* 대법원 진행정보 일괄 조회(2026-06-14) — 홈 환영 영역 버튼 + 비동기 진행 패널 */
.welcome-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.welcome-title { margin: 0; }
.court-batch-btn { white-space: nowrap; }
.court-batch-btn:disabled { opacity: .55; cursor: not-allowed; }
.court-batch-panel {
    margin: 12px 0 20px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.cbp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cbp-title { font-size: 14px; }
.cbp-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #eef0f3; color: #6b7785; }
.cbp-status--running   { background: #fef3e2; color: #e67e22; }
.cbp-status--done      { background: #e8f5e9; color: #2e7d32; }
.cbp-status--cancelled { background: #fdecea; color: #c0392b; }
.cbp-status--error     { background: #fdecea; color: #c0392b; }
.cbp-cancel { margin-left: auto; }
.cbp-progress { height: 10px; background: #eef0f3; border-radius: 6px; overflow: hidden; }
.cbp-progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 6px; transition: width .4s ease; }
.cbp-meta { font-size: 12px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.cbp-current { font-size: 13px; margin-top: 6px; color: var(--ink); min-height: 18px; }
.cbp-details { margin-top: 10px; }
.cbp-details > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.cbp-results {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
    max-height: 280px; overflow: auto;
}
.cbp-result {
    font-size: 13px; padding: 4px 8px; border-radius: 6px;
    border: 1px solid var(--line); display: flex; gap: 6px; align-items: baseline;
}
.cbp-result--success { background: #f4fbf5; }
.cbp-result--fail    { background: #fdf3f2; }
.cbp-result--skipped { background: #fafbfc; }
.cbp-result-msg { font-size: 12px; }
@media (max-width: 768px) { .court-batch-btn { width: 100%; } }

/* 사건 진행 내용 페이지 — 버킷 + 행 */
.cp-bucket { margin-bottom: 24px; }
.cp-bucket-title { font-size: 16px; margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.cp-count { font-size: 13px; color: #888; font-weight: 400; }
.cp-empty { margin: 0 0 4px; font-size: 13px; }
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 10px; border-left: 3px solid #dfe3e6; border-radius: 4px; margin-bottom: 6px; background: #fafbfc; }
.cp-row--near { border-left-color: #e4572e; }
.cp-row--mid  { border-left-color: #f3a712; }
.cp-row--far  { border-left-color: #4c9f70; }
.cp-row--old  { border-left-color: #b8bcc0; }
.cp-title { font-weight: 600; }
.cp-no { font-size: 12px; }
.cp-meta { font-size: 12px; }
.cp-content { font-size: 13px; }
.cp-noinfo { margin-top: 16px; padding: 8px 10px; background: #fafbfc; border-radius: 4px; }

/* 홈 하단 사건 진행 요약 */
.court-progress-summary { margin-top: 8px; }
.cps-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.cps-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 14px; font-size: 13px; text-decoration: none; color: #333; background: #eef1f4; border: 1px solid #e1e5e8; }
.cps-chip strong { font-size: 14px; }
.cps-chip--near { background: #fdeee9; border-color: #f6cdbf; }
.cps-chip--mid  { background: #fef4e2; border-color: #f7dca6; }
.cps-chip--far  { background: #eaf5ef; border-color: #c3e2d2; }
.cps-chip--noinfo { background: #f4f5f6; color: #777; }
.cps-preview { list-style: none; margin: 0; padding: 0; }
.cps-preview li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; }
.cps-tag { font-size: 11px; padding: 1px 7px; border-radius: 10px; color: #fff; white-space: nowrap; }
.cps-tag--near { background: #e4572e; }
.cps-tag--mid  { background: #f3a712; }

/* 설정 화면 — 동작 방식 설명 목록 + 체크박스 라벨 */
.settings-info { margin: 12px 0 16px; padding: 12px 14px; background: #fafbfc; border: 1px solid #eceef0; border-radius: 6px; }
.settings-info dt { font-weight: 600; font-size: 13px; margin-top: 8px; }
.settings-info dt:first-child { margin-top: 0; }
.settings-info dd { margin: 2px 0 0; font-size: 13px; color: #444; }
.checkbox-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.checkbox-label input { width: auto; }
.settings-info code, .form-group code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   UI/UX 개선 반영 (2026-06-15) — docs/UI-UX-심층분석-보고서-20260615.md
   디자인 토큰 보강 + 미세 그림자 + 보조버튼 고스트화 + 타이포/대비 + 관리 메뉴 드롭다운.
   cascade 상 뒤 규칙이 우선하므로 기존 규칙을 비파괴적으로 덮어쓴다.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --line: #e5e7eb;           /* 테두리 연하게(기존 #d7dbe0) */
    --label: #4b5563;          /* 폼 라벨 — muted보다 진해 가독성/대비↑ */
    --accent-600: #1e44c4;     /* accent hover/active */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
    --shadow-md: 0 6px 18px rgba(16,24,40,.10);
}

/* 표면 미세 입체감(평평한 회색 박스 → 카드감) */
.card { box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
.dashboard-section, .calendar-container, .court-batch-panel,
.table, .data-table, .memo-item { box-shadow: var(--shadow-sm); }

/* 버튼 — 전환 효과 + 보조버튼 고스트(아웃라인)화 */
.btn, button { transition: background .12s ease, opacity .12s ease, box-shadow .12s ease, border-color .12s ease; }
.btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { background: #f3f4f6; opacity: 1; border-color: #d7dbe0; }

/* 타이포 위계·라벨 대비 */
.detail-section h2 { font-size: 17px; }
.dashboard-section__title { font-size: 16px; }
label, .form-group label, .info-label, .detail-grid dt, .filter-group label { color: var(--label); }

/* 배지 대비 보강(주황 계열 — 작은 글씨 AA) */
.badge-warning, .badge-today { color: #b45309; }

/* ─── 관리 메뉴 드롭다운(PC, ADMIN 전용) — 모바일은 평탄화 ─── */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group > .nav-group-label { display: inline-flex; align-items: center; gap: 3px; }
.nav-group-menu {
    display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;
    min-width: 168px; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    padding: 6px; z-index: 60; flex-direction: column;
}
.nav-group:hover .nav-group-menu, .nav-group:focus-within .nav-group-menu { display: flex; }
.nav-group-menu a { padding: 8px 10px; border-radius: 6px; white-space: nowrap; color: var(--ink); font-size: 14px; }
.nav-group-menu a:hover { background: #f3f4f6; text-decoration: none; }
.nav-group-menu a.active { color: var(--accent); font-weight: 700; border-bottom: none; }

@media (max-width: 768px) {
    /* 모바일: 햄버거 안에서 평탄화(라벨=소제목, 메뉴 항상 표시) */
    .nav-group { display: block; width: 100%; }
    .nav-group > .nav-group-label {
        display: block; padding: 11px 4px; color: var(--muted); font-size: 13px;
        border-bottom: 1px solid var(--line);
    }
    .nav-group-menu {
        display: flex !important; position: static; margin: 0;
        border: none; box-shadow: none; padding: 0; min-width: 0;
    }
    .nav-group-menu a { padding: 11px 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
}

/* ─── 알림(alert) — 아이콘 + 미정의 클래스 보강 + 자동 페이드 ─── */
.alert { display: flex; align-items: flex-start; gap: 8px; }
.alert::before { font-weight: 800; flex: 0 0 auto; line-height: 1.4; }
.alert-success::before { content: "✓"; }
.alert-error::before, .alert-danger::before { content: "!"; }
.alert-warn::before { content: "⚠"; }
.alert-danger { background: #fdecea; color: #c0392b; }   /* 템플릿에서 쓰이나 미정의였음 */
.alert-warn   { background: #fef3e2; color: #b45309; }   /* 템플릿에서 쓰이나 미정의였음 */
.alert.fade-out { opacity: 0; transition: opacity .5s ease; }

/* ─── 빈 상태 — 살짝 또렷하게(중앙·여백) ─── */
.empty-state { text-align: center; }

/* ─── 접기 섹션(설정 화면 등) ─── */
details.collapse-section > summary {
    cursor: pointer; list-style: none; font-size: 16px; font-weight: 700;
    padding: 6px 0; color: var(--ink);
}
details.collapse-section > summary::-webkit-details-marker { display: none; }
details.collapse-section > summary::before { content: "▸ "; color: var(--muted); }
details.collapse-section[open] > summary::before { content: "▾ "; }