: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;
    /* 한글 글꼴을 맨 앞에 — 숫자(날짜)와 한글이 같은 글꼴에서 렌더되어 글꼴이 섞여 보이지 않게 한다.
       (Apple SD Gothic Neo/맑은 고딕/Noto Sans KR 은 라틴·숫자 글리프도 포함) */
    font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR",
                 -apple-system, system-ui, 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: var(--muted); }
.badge-today   { background: #fef3e2; color: #e67e22; }
.badge-allday  { background: #eef0f3; color: var(--muted); }
.badge-active  { background: #e8f5e9; color: #2e7d32; }
.badge-closed  { background: #eef0f3; color: var(--muted); }
.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: var(--muted); }

/* ─── 계속기관(법원) 배지 ─────────────────────────────────────────
   사건명 앞/위에 작은 색 배지로 "계속기관(진행 중인 법원)"을 표시.
   지역=색 계열(hue): 서울=남색 / 경기=주황 / 강원=청록 / 그외=rose / 비법원=중립회색
   유형=명도: 형사(crim)=진 / 민사(civil)=중 / 그외(gen)=연  + 접두 "형"·"민"
   .badge 기반 위에 always region+type 두 클래스 조합. 1px 테두리로 .cc-mine(연파랑 행) 위에서도 분리.
   CSS 클래스는 서버 헬퍼 @courtBadge.css(court, caseType)가 내려준다. */
.court-badge {
    /* 자기완결형 — 헬퍼 css()는 'court-badge ...'만 내보내고 'badge'는 안 붙이므로
       .badge에 의존하지 말고 필요한 기본 속성을 여기서 모두 정의한다. */
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 11px;          /* 사건명보다 작게 */
    font-weight: 600;
    white-space: nowrap;
    padding: 1px 6px;
    letter-spacing: 0.01em;
    min-width: 3.2em;         /* 접두("민")+최소 1~2글자 보장(잘림 완화) */
    max-width: 11em;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    margin-right: 6px;
}
.court-badge__type { font-weight: 700; margin-right: 2px; }
/* 명도 3단계: 형사(crim)=진 / 민사(civil)=중 / 그외(gen)=연. gen도 또렷이 채색되도록
   세 단계를 한 칸씩 진하게(가장 연한 단계가 흰색에 묻히지 않게) — 전부 WCAG AA 4.5:1↑. */
/* 서울 = 남색(indigo) — .cc-mine 연파랑 행과 구분 위해 남색으로 이동 */
.court-badge--seoul.court-badge--crim  { background: #93c5fd; border-color: #2563eb; color: #1e3a8a; }
.court-badge--seoul.court-badge--civil { background: #bfdbfe; border-color: #3b82f6; color: #1e3a8a; }
.court-badge--seoul.court-badge--gen   { background: #dbeafe; border-color: #60a5fa; color: #1e3a8a; }
/* 경기 = 주황(amber) */
.court-badge--gyeonggi.court-badge--crim  { background: #fcd34d; border-color: #d97706; color: #78350f; }
.court-badge--gyeonggi.court-badge--civil { background: #fde68a; border-color: #f59e0b; color: #78350f; }
.court-badge--gyeonggi.court-badge--gen   { background: #fef3c7; border-color: #fbbf24; color: #78350f; }
/* 강원 = 초록(green) — 서울 남색과 옅은 톤에서 혼동되지 않게 청록→초록으로 분리 */
.court-badge--gangwon.court-badge--crim  { background: #86efac; border-color: #16a34a; color: #14532d; }
.court-badge--gangwon.court-badge--civil { background: #bbf7d0; border-color: #22c55e; color: #14532d; }
.court-badge--gangwon.court-badge--gen   { background: #dcfce7; border-color: #4ade80; color: #14532d; }
/* 강원 원주권 = 보라(violet) — 강원 초록 안에서 원주를 별색으로 구별 */
.court-badge--wonju.court-badge--crim  { background: #c4b5fd; border-color: #7c3aed; color: #4c1d95; }
.court-badge--wonju.court-badge--civil { background: #ddd6fe; border-color: #8b5cf6; color: #4c1d95; }
.court-badge--wonju.court-badge--gen   { background: #ede9fe; border-color: #a78bfa; color: #4c1d95; }
/* 그외 = rose */
.court-badge--etc.court-badge--crim  { background: #fda4af; border-color: #e11d48; color: #881337; }
.court-badge--etc.court-badge--civil { background: #fecdd3; border-color: #fb7185; color: #881337; }
.court-badge--etc.court-badge--gen   { background: #ffe4e6; border-color: #fda4af; color: #881337; }
/* 중립 = 비법원·미분류(검찰/경찰/헌재 등) */
.court-badge--neutral { background: #eef0f3; border-color: #d1d5db; color: #374151; }
/* 모바일 카드: 제목 위 독립 줄 */
.case-card .court-badge { display: inline-block; width: fit-content; margin: 0 0 3px; }

/* ─── 테이블 ─────────────────────────────────────────────────── */
.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;
    white-space: nowrap;   /* 라벨이 '검'/'색'처럼 세로로 쪼개지지 않게 */
    text-align: center;
}
.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;
}
/* 맨 select/textarea 기본 외형 — .form-control 이 없어도 앱 전체에서 일관된 라운드·패딩.
   (select 는 인라인 유지: width 는 강제하지 않아 필터·추가 폼 레이아웃을 깨지 않는다.) */
select, textarea {
    padding: 8px 10px;
    border: 1px solid var(--field-border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    line-height: 1.4;
}
textarea { width: 100%; }
select { max-width: 100%; }
/* 인라인 추가 폼(계약담당자 추가 등) — 셀렉트 + 버튼 한 줄 정렬 */
.inline-add-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}
.inline-add-form select { min-width: 220px; }

/* ─── 폼 카드 (사건 등록·수정, 일정 폼) ─────────────────────── */
.form-card { max-width: 640px; }
/* 넓은 폼 카드 — 관련사건/의뢰인 연락처 선택 위젯(긴 사건명)이 들어가는
   사건 등록·수정, 연락처 등록·수정처럼 넓은 폭이 필요한 폼에 form-card 와 함께 부여.
   (단순 폼은 640px 유지: 가독 라인폭 보존.) */
.form-card--wide { max-width: 1040px; }

/* ─── 폼 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);
}

/* ─── 관련사건 검색·선택 위젯(연락처 폼) ─────────────────────── */
.case-picker-search { display: flex; gap: 8px; align-items: stretch; }
.case-picker-search .form-control { flex: 1 1 auto; min-width: 0; }
.case-picker-search .btn { flex: 0 0 auto; }   /* '검색' 버튼은 줄지 않음(세로 줄바꿈 방지) */
.case-picker-results,
.selected-cases { list-style: none; margin: 8px 0 0; padding: 0; }
.case-result,
.selected-case {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 14px;
}
/* 라벨 칸은 남는 폭을 채우되 필요하면 줄바꿈(min-width:0 없으면 버튼을 밀어냄) */
.case-result > span:first-child,
.selected-case .sc-label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.45;
}
.case-result .badge,
.selected-case .badge { margin-left: 6px; }
/* 행 우측 액션 버튼(추가/추가됨/제거)은 자연폭 유지 — 눌려서 쪼개지지 않게 */
.case-result .btn,
.selected-case .btn { flex: 0 0 auto; align-self: center; }
.selected-case .sc-remove { color: var(--error); padding: 2px 6px; }

/* ─── 필수 마커 · 검증 오류 ─────────────────────────────────── */
.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; }
/* 페이지 부제(사건명 등) — 헤더 바로 아래, 식별 메타 라인 위 */
.page-subtitle {
    margin: -12px 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ─── 알림 ───────────────────────────────────────────────────── */
.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 var(--muted); }

/* ─── 보관함 ─────────────────────────────────────────────────── */
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;
}

/* 달력 헤더 줄(제목·오늘·이전/다음)과 날짜(요일) 헤더를 스크롤해도 상단에 고정.
   오프셋(top)은 schedules/index.html 의 syncStickyOffsets()가 topbar·toolbar 실측 높이로
   --cal-toolbar-top / --cal-header-top 변수에 채운다(값 없으면 아래 기본값 사용). */
.calendar-container .fc-header-toolbar {
    position: sticky;
    top: var(--cal-toolbar-top, 44px);   /* topbar(높이 ~44px) 바로 아래 */
    z-index: 31;
    background: var(--card);
    margin-bottom: 0;
    padding: 6px 0 10px;
}
/* 날짜·요일 컬럼 헤더(stickyHeaderDates 가 만든 sticky 요소)의 top:0 을 toolbar 아래로 내림.
   FC 기본 규칙과 특이도가 같아 !important 로 덮는다. 월·주 달력 공통. */
.calendar-container .fc-scrollgrid-section-header > * {
    top: var(--cal-header-top, 96px) !important;
    z-index: 20;
    background: var(--card);
}

/* 주 달력 시간 행 높이 2배(FC 기본 1.5em → 3em). FC 가 .fc 클래스를 마운트 요소(#calendar=.calendar-container)
   자체에 붙이므로 compound 선택자 .calendar-container.fc 로 FC 기본 규칙(.fc .fc-timegrid-slot)을 이긴다.
   새벽 접힘 행은 font-size:0 이라 3em→0 으로 그대로 유지된다(아래 블록). */
.calendar-container.fc .fc-timegrid-slot { height: 3.5em; }

/* 달력 이벤트 2구획 표시(월·주 공통): 1구획 = [지역 배지] 사건명, 2구획 = 시간 + 일정제목.
   (index.html eventContent 가 DOM 생성, 배지 배경색은 이벤트 테두리색을 인라인으로 받음)
   한 줄 ellipsis 로 사건명·제목이 뭉텅 잘리던 것을 줄바꿈+최대 줄수(line-clamp)로 바꿔
   좁은 칸에서도 내용이 실제로 읽히게 한다(그래도 넘치면 wrap.title 툴팁으로 전체 확인). */
/* white-space:normal — FC 기본 .fc-daygrid-event{white-space:nowrap} 이 월 달력에서 줄바꿈을
   막아 line-clamp 를 무력화하므로 명시적으로 되돌린다(주/일 timegrid 엔 원래 없음). */
.fc-ev2 { line-height: 1.25; overflow: hidden; white-space: normal; }
.fc-ev2-l1 { display: flex; align-items: flex-start; gap: 3px; font-weight: 600; min-width: 0; }
.fc-ev2-badge {
    flex: 0 0 auto;
    font-size: 0.82em; font-weight: 700; color: #fff;
    padding: 0 4px; border-radius: 5px; white-space: nowrap;
    margin-top: 1px;
}
.fc-ev2-case {
    min-width: 0; word-break: break-all;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.fc-ev2-l2 {
    font-size: 0.92em; word-break: break-all;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.fc-ev2-time { opacity: 0.78; font-variant-numeric: tabular-nums; }

/* 주/일 달력 시간축 폭 축소 — 라벨이 "8시"·"14시"로 짧아진 만큼 여백도 최소화(모바일 공간 절약). */
.calendar-container.fc .fc-timegrid-slot-label-cushion,
.calendar-container.fc .fc-timegrid-axis-cushion { padding: 0 3px; font-size: 12px; }

/* 주/일 달력 이벤트 상자 밖 텍스트 클리핑 — FC 는 timegrid 이벤트에 overflow 를 지정하지 않아
   줄바꿈된 내용이 상자 아래로 흘러나와 다음 시간대/옆 이벤트와 뒤엉킨다. */
.calendar-container.fc .fc-timegrid-event { overflow: hidden; }

/* 주/일 달력 이벤트 내부 줄수 정돈 — 1시간 상자(슬롯 3.5em)에 3줄이 딱 맞게:
   사건명 1줄 ellipsis + (시간+제목) 2줄. 상자 밑선에서 글자가 반토막 나는 것 방지.
   (월 달력은 셀이 늘어나므로 위 기본 규칙(사건명 2줄 등) 유지.) */
.calendar-container.fc .fc-timegrid-event .fc-ev2-l1 {
    display: flex; align-items: center; gap: 3px;   /* 모바일 inline-배지 규칙보다 우선(특이도) */
}
.calendar-container.fc .fc-timegrid-event .fc-ev2-case {
    display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.calendar-container.fc .fc-timegrid-event .fc-ev2-l2 { -webkit-line-clamp: 2; }

/* 월 달력 오전/오후 2구역: 각 날짜 칸의 일정 영역을 정오선 기준으로 나눈다.
   오전 일정은 위에서부터, 오후 일정은 정오선(칸 중간)에서부터 채운다(JS layoutAmPm 가 마진·정오선 생성). */
.fc-daygrid-day-events { position: relative; min-height: 5.5em; }
.fc-noon-line {
    position: absolute; left: 0; right: 0;
    border-top: 1px dashed var(--line);
    pointer-events: none;
}
.fc-noon-line::after {
    content: "정오";
    position: absolute; right: 2px; top: -7px;
    font-size: 9px; color: var(--muted);
    background: var(--card); padding: 0 2px;
}

/* 주 달력 새벽(00~08시)을 4시간 단위 2행(오전 12시·오전 4시)으로 — 중간시각(01·02·03·05·06·07시)
   행을 0높이로 접어 숨긴다. 8시부터는 시간별, 보이는 행은 모두 동일 높이.
   (index.html 의 slotDuration:'01:00:00' 와 함께 작동. 일정이 거의 없는 새벽을 빼곡한 줄 없이 간결하게.) */
.fc .fc-timegrid-slot[data-time="01:00:00"],
.fc .fc-timegrid-slot[data-time="02:00:00"],
.fc .fc-timegrid-slot[data-time="03:00:00"],
.fc .fc-timegrid-slot[data-time="05:00:00"],
.fc .fc-timegrid-slot[data-time="06:00:00"],
.fc .fc-timegrid-slot[data-time="07:00:00"] {
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 0;
}
.fc .fc-timegrid-slot-label[data-time="01:00:00"] .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-slot-label[data-time="02:00:00"] .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-slot-label[data-time="03:00:00"] .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-slot-label[data-time="05:00:00"] .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-slot-label[data-time="06:00:00"] .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-slot-label[data-time="07:00:00"] .fc-timegrid-slot-label-cushion {
    display: none;
}

/* 달력 모바일(≤768px): 좁은 칸에서도 일정 내용이 읽히도록 여백·폰트를 줄이고 줄수를 늘린다. */
@media (max-width: 768px) {
    .calendar-container { padding: 8px 6px; }
    /* 이벤트 글자: FC 기본 .85em 상대크기 대신 고정 11px — 칸 폭 대비 글자수 확보 */
    .fc-ev2 { font-size: 11px; line-height: 1.3; }
    .fc-ev2-badge { font-size: 10px; padding: 0 3px; border-radius: 4px; }
    /* 배지·사건명을 inline 흐름으로 — flex 2단이면 좁은 칸에서 사건명이 배지 옆 한두 글자로 뭉개짐 */
    .fc-ev2-l1 {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
        overflow: hidden; word-break: break-all;
    }
    .fc-ev2-badge { display: inline; margin-right: 2px; }
    .fc-ev2-case { display: inline; }
    .fc-ev2-l2 { font-size: 11px; -webkit-line-clamp: 3; }
    /* 월 달력: 이벤트 블록 간격 확보 */
    .calendar-container.fc .fc-daygrid-event { margin-top: 2px; }
    /* 주 달력만: 7일 컬럼이 폭 40px 수준으로 뭉개지므로 최소폭을 강제하고 가로 스크롤.
       :has() 로 주 달력 harness 에만 한정 — 월/일 달력은 overflow 를 남겨두면 sticky
       요일 헤더의 top 오프셋이 harness 기준이 돼 헤더가 본문 중간으로 밀린다.
       (시간축 sticky left 는 Chromium 이 sticky 테이블셀 텍스트를 그리지 않는 문제로 사용 불가.) */
    .calendar-container .fc-view-harness:has(.fc-timeGridWeek-view) { overflow-x: auto; }
    .calendar-container .fc-view-harness:has(.fc-timeGridWeek-view) .fc-timeGridWeek-view { min-width: 640px; }
    /* 가로 스크롤 컨테이너 안에서는 sticky top 오프셋(--cal-header-top)이 harness 기준이 돼
       요일 헤더가 아래로 밀린다 → 주 달력만 top:0 으로 원위치(스크롤 고정 대신 정위치). */
    .calendar-container .fc-view-harness:has(.fc-timeGridWeek-view) .fc-scrollgrid-section-header > * {
        top: 0 !important;
    }
}

/* ─── 메모 필터 탭 ───────────────────────────────────────────── */
.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; }
    /* 메모 내용 셀: 라벨(내용) 윗줄 + 본문 아랫줄 전체폭·좌측정렬(긴 메모도 끼이지 않고 읽기 좋게) */
    .table--stack td.memo-cell { display: block; text-align: left; }
    .table--stack td.memo-cell::before { display: block; margin-bottom: 2px; }
}

/* 사건 상세 페이지 개선 (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; } }
/* 메모 목록(/memos) 내용 셀 — 전체 내용을 줄바꿈으로 표시(앞부분 잘림 방지). 긴 단어/URL 도 칸 안에서 줄바꿈
   되어 모바일에서 가로로 넘치지 않는다(PC 잘림·모바일 가로넘침 동시 해결). */
.memo-cell {
    white-space: pre-wrap;        /* 줄바꿈 보존 + 자동 줄바꿈 */
    word-break: break-word;
    overflow-wrap: anywhere;      /* 공백 없는 긴 문자열도 칸 안에서 끊어 줄바꿈 */
    line-height: 1.5;
}

/* ─── 슬라이드 토글 스위치(예: 사건명 잠그기) ───────────────────── */
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; font-size: 12px; color: var(--muted); user-select: none; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-slider { position: relative; width: 38px; height: 20px; background: #cfd5dd; border-radius: 20px; transition: background .15s; flex: 0 0 auto; }
.switch-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
/* 일반형제(~) 사용: Thymeleaf th:field 가 체크박스 뒤에 hidden 마커(_필드명)를 끼워넣어
   인접형제(+)로는 .switch-slider 에 닿지 못함 → 토글 시각 피드백이 사라진다. */
.switch input:checked ~ .switch-slider { background: var(--accent); }
.switch input:checked ~ .switch-slider::before { transform: translateX(18px); }
.switch input:focus-visible ~ .switch-slider { outline: 2px solid var(--accent); outline-offset: 1px; }
.switch-text { white-space: nowrap; }
/* 사건명 잠그기: 입력칸 아래 좌측 정렬 토글 + 설명 */
.lock-toggle { margin-top: 8px; }
.lock-help { display: block; margin-top: 4px; line-height: 1.4; }
/* 사건 상세 보조줄의 '사건명 잠김' 표시 — 자물쇠 색으로 주의 환기 */
.lock-flag { color: #b45309; font-weight: 600; white-space: nowrap; }
/* 사건명 잠그기 토글 겹침 교정: .form-group label{display:block}(특이도 0,1,1)가 .switch{inline-flex}(0,1,0)를
   덮어 슬라이더·글자가 겹치던 것을, 더 높은 특이도(0,2,1)로 inline-flex 복원 */
.form-group label.switch { display: inline-flex; margin-bottom: 0; }

/* 참조인(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; }

/* 메모 인라인 수정 폼(2026-07) — 보기 모드와 구분되는 옅은 박스, 작성 폼과 동일한 .form-group 구조 */
.memo-edit-form {
    margin: 6px 0 4px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.memo-edit-form .form-group { margin-bottom: 12px; }
.memo-edit-form .form-group > label { margin-bottom: 4px; }
.memo-edit-form .checkbox-item { display: inline-block; margin: 0 14px 4px 0; }
.memo-edit-actions { display: flex; gap: 8px; align-items: center; }
.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;
    width: auto;
    max-width: 100%;
    font-size: 13px;
    color: var(--muted);
}
/* 네이티브 '파일 선택' 버튼을 앱 보조 버튼처럼 — OS 기본 회색 버튼의 이질감 제거 */
.dropzone input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.dropzone input[type="file"]::file-selector-button:hover {
    background: #eef3ff;
    border-color: var(--accent);
    color: var(--accent);
}
.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; }
.dropzone-files .dz-remove {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
}
.dropzone-files .dz-remove:hover { color: var(--error, #c0392b); background: #fdecea; }

/* 대법원 진행정보 일괄 조회(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: var(--muted); }
.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: "▾ "; }

/* ═══════════════════════════════════════════════════════════════
   Phase 1 (2026-06-19) — docs/UX-개선계획-2026-06-19.md
   대비(--muted/입력 테두리)·한글 줄바꿈·포커스·skip-link.
   cascade 상 뒤 규칙이 우선 → 기존 규칙을 비파괴적으로 덮어쓴다.
   (광역 px→rem 타이포 스케일은 회귀 검수 필요 → 후속 패스로 보류)
   ═══════════════════════════════════════════════════════════════ */
:root {
    --muted: #5b6675;          /* 기존 #6b7785 → 한 단계 진하게(대비 4.56→~5.4:1 on #fff) */
    --field-border: #8a94a3;   /* 폼 컨트롤 테두리 전용(on #fff ≈ 3.2:1, --line은 카드 구분용으로 연하게 유지) */
    --focus-ring: rgba(47,91,234,.28);
}

/* 한글 어절 보존(글자 단위 분절 금지) + 칸보다 긴 토큰/URL만 강제 분절 */
.info-value, .memo-cell, .case-card__title { word-break: keep-all; overflow-wrap: anywhere; }
.case-card__sub { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .table--stack td a, .table--stack td { word-break: keep-all; overflow-wrap: anywhere; }
}

/* 폼 컨트롤 테두리 대비(WCAG 1.4.11 비텍스트 3:1) — 카드 구분선(--line #e5e7eb, ~1.2:1)과 분리 */
input, select, textarea, .form-control, .form-control-sm, .filter-input,
.form-group input, .form-group select, .form-group textarea {
    border-color: var(--field-border);
}

/* 포커스 가시성 강화: 오프셋 + 연배경(배지/칩)에서도 보이는 후광 */
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: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring);
}

/* 본문 바로가기(skip link) + 스크린리더 전용 유틸 */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 8px; top: -48px; z-index: 100;
    background: var(--card); color: var(--accent);
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px;
    transition: top .12s;
}
.skip-link:focus { top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   Phase 2 (2026-06-19) — 내비게이션 재편(업무/관리/계정 3영역)
   기존 .nav-group 드롭다운(L1159~) 활용 + 상단바 2분할.
   ═══════════════════════════════════════════════════════════════ */
/* 상단바 3영역: 브랜드 | 1차 업무(좌, margin-right:auto) … 관리·계정(우) */
.topnav--primary { margin-left: 24px; margin-right: auto; }
/* 드롭다운 트리거 라벨을 톱레벨 링크처럼 */
.nav-group-label { cursor: pointer; color: var(--ink); font-size: 14px; }
.nav-group-label.active { font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.nav-group--account .role { font-size: 12px; color: var(--accent); margin: 0 4px 0 4px; }
/* 계정 드롭다운 안 로그아웃(POST form 버튼)을 메뉴 항목처럼 정렬 */
.nav-group-menu .logout-form { margin: 0; padding: 0; }
.nav-group-action {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    background: none; color: var(--error);
    padding: 8px 10px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.nav-group-action:hover { background: #fdecea; opacity: 1; }
/* 모바일 햄버거 '업무' 소제목(관리·계정 소제목과 대칭) — show-on-mobile 로 데스크톱 숨김 */
.nav-section-label {
    padding: 11px 4px 4px; color: var(--muted);
    font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line);
}
@media (max-width: 768px) {
    .topnav--primary { margin-left: 0; margin-right: 0; }   /* 모바일 컬럼 — margin 초기화 */
    .nav-group-action { padding: 11px 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 3 (2026-06-19) — 모바일 표 전략 통일(기록형=카드 스택)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 카드 스택 안에서는 법원배지를 잘리지 않게 독립 표시(가로 경쟁 제거) */
    .table--stack td .court-badge { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 5 (2026-06-19) — 대시보드·검색
   ═══════════════════════════════════════════════════════════════ */
/* 대시보드: 오늘·이번주 2열(데스크톱) → 빈 구간이 상단을 점유하지 않음. align-items:start(비대칭 높이 방지) */
.dashboard-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 28px; }
.dashboard-top .dashboard-section { margin-bottom: 0; }
@media (max-width: 768px) { .dashboard-top { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; } }
/* 빈 상태 — 납작한 띠 + 행동 유도(개인일정 추가) */
.dashboard-empty--inline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); padding: 6px 2px; }
.dashboard-empty__icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: #eaf5ef; color: #2e9e6b; font-size: 12px; flex: 0 0 auto; }
.dashboard-empty__cta { margin-left: auto; font-size: 13px; }
/* 검색: 키워드 칸 넓게(flex-grow), 날짜는 고정폭. 모바일은 기존 .filter-input{width:100%!important}가 폴백 */
.search-bar { flex-wrap: wrap; gap: 8px 10px; }
.search-input { flex: 1 1 320px; min-width: 240px; width: auto; }
/* 빈 검색 — 안내 + 진입점 */
.empty-state--search { padding: 36px 0; }
.empty-state__title { font-size: 16px; color: var(--ink); font-weight: 600; margin: 0 0 6px; }
.empty-state__hint { margin: 0 0 16px; color: var(--muted); }
.empty-state__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* 결과 섹션 점프 칩(건수) — 0건은 흐림 */
.search-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.search-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 12px; border-radius: 14px; background: #eef1f4; border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.search-chip:hover { text-decoration: none; border-color: var(--accent); }
.search-chip strong { color: var(--accent); }
.search-chip.is-empty { opacity: .5; }
.search-chip.is-empty strong { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   Phase 6 (2026-06-19) — 마감 품질(저위험 한정)
   숫자(날짜·D-day·금액) 자릿수 정렬. zebra/hover는 cc-mine·row-past 등
   다중 행색과 간섭 위험으로 보류(P2 백로그).
   ═══════════════════════════════════════════════════════════════ */
.table, .data-table { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   보류분 마무리 (2026-06-19) — 인쇄·헤딩 위계·검색 하이라이트
   ═══════════════════════════════════════════════════════════════ */
/* 헤딩 위계 강화(인라인 font-size 없는 셀렉터만 → 회귀 안전) */
.page-header h1 { font-weight: 700; }
.detail-section h2, .dashboard-section__title { font-weight: 700; letter-spacing: -.01em; }

/* 인쇄: 접힌 <details>(활동내역·진행내용 더보기 등)를 강제로 펼쳐 기록 누락 방지 + 화면 크롬 숨김 */
@media print {
    .topbar, .nav-toggle, .skip-link, .foot, .form-actions, .dashboard-actions,
    .court-batch-panel, .pagination, .memo-filter-tabs { display: none !important; }
    details > summary { list-style: none; }
    details > summary::before { content: "" !important; }
    details:not([open]) > *:not(summary) { display: revert !important; }
    .content { margin: 0; padding: 0; max-width: none; }
    a[href]::after { content: ""; }
}

/* 검색 결과 키워드 하이라이트 */
mark { background: #fff3b0; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   사건 상세 섹션 점프 내비(비-sticky → topbar 겹침 위험 없음) + 표 zebra
   ═══════════════════════════════════════════════════════════════ */
.section-jump {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 8px 0; margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.section-jump a {
    padding: 4px 10px; font-size: 13px; color: var(--muted);
    text-decoration: none; border-radius: 14px;
}
.section-jump a:hover { color: var(--accent); background: #eef2ff; text-decoration: none; }
/* 앵커 점프 시 sticky topbar 아래로 정렬(기존 inline 70px과 동일) */
.detail-section[id] { scroll-margin-top: 70px; }
@media (max-width: 768px) {
    .section-jump { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .section-jump::-webkit-scrollbar { display: none; }
}

/* 표 zebra(가독성) — 강조행(cc-mine 참조·row-past 과거·memo-auto 자동수집)은 제외해 색 간섭 방지 */
.table tbody tr:nth-child(even):not(.cc-mine):not(.row-past):not(.memo-auto) > td,
.data-table tbody tr:nth-child(even):not(.cc-mine):not(.row-past):not(.memo-auto) > td {
    background: #fafbfc;
}

/* 사건목록 정렬 헤더 링크 + 컬럼 폭(다음기일·등록일 넓게, 의뢰인 좁게는 th inline width로) */
.cases-table th .sort-link { color: var(--label); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.cases-table th .sort-link:hover { color: var(--accent); text-decoration: none; }
.cases-table th .sort-link.sort-active { color: var(--accent); font-weight: 700; }
.sort-arrow { font-size: 10px; line-height: 1; }
.sort-arrow--idle { color: var(--muted); opacity: 0.55; }   /* 비활성 컬럼: 정렬 가능 힌트(↕) */

/* 모바일 사건목록 정렬 셀렉트 — 표 헤더(hide-on-mobile) 대체. 데스크톱에서는 숨김. */
.mobile-sort { align-items: center; gap: 8px; margin: 0 0 10px; }
.mobile-sort label { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
@media (max-width: 768px) {
    .mobile-sort.show-on-mobile { display: flex; }
}

/* view-as 상단 바(다른 사람 화면 보기) */
.view-as-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.view-as-bar .viewas-form { margin: 0; display: inline-flex; align-items: center; }
.view-as-banner { display: flex; align-items: center; }
.viewas-back-btn { background: none; border: none; padding: 0; color: #2563eb; text-decoration: underline; cursor: pointer; font: inherit; }

/* ═══════════════════════════════════════════════════════════════
   UI 정돈(2026-07) — 페이지 내 영역 구분 일관화
   원칙: "회색 페이지 배경 + 흰 카드"는 이 앱의 기본 문법(홈·법원정보 상단과
   동일)이므로 새 스타일을 만들지 않고 그 문법을 전 페이지에 일관 적용한다.
   ① 섹션 = 카드 (제목/제목줄/접이식 summary = 하단 구분선 있는 카드 헤더)
   ② 필터·뷰 컨트롤 = 툴바 박스 (배경 위에 떠 있던 컨트롤 정리)
   ③ 페이지 배경 대비 소폭 강화 (카드 경계가 또렷하도록)
   ═══════════════════════════════════════════════════════════════ */
:root { --bg: #edeff2; }

/* ① 섹션 카드화 — 사건상세·법원정보·계약·연락처상세·관리자(설정/그룹/백업/동기화)·사건진행 버킷 */
.detail-section, .cp-bucket {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 20px 18px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
/* 섹션 헤더 통일 — h2 단독 / 제목+액션(.page-header) / 접이식 summary 모두 동일한 헤더 룩 */
.detail-section > h2,
.cp-bucket > .cp-bucket-title {
    font-size: 15px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.detail-section > .page-header {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.detail-section > .page-header h2 { font-size: 15px; }
details.collapse-section.detail-section > summary,
.detail-section > details.collapse-section > summary {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
/* 접힌 상태에선 카드가 헤더 한 줄로 축약 — 구분선·여백 제거 */
details.collapse-section.detail-section:not([open]) > summary,
.detail-section > details.collapse-section:not([open]) > summary {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* ② 필터·뷰 컨트롤 툴바 — view-as 바(메모/일정/사건진행/사건목록)와 검색 필터(사건목록/연락처/통합검색) */
.view-as-bar, .filter-form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
/* 뷰 바 바로 아래 검색 필터가 오면 하나의 툴바로 융합(사건 목록) */
.view-as-bar:has(+ .filter-form) { border-radius: 8px 8px 0 0; border-bottom: 0; margin-bottom: 0; }
.view-as-bar + .filter-form { border-radius: 0 0 8px 8px; }

/* 모바일 — 카드 패딩 축소 */
@media (max-width: 640px) {
    .detail-section, .cp-bucket { padding: 12px 14px 14px; }
}