* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; color: #1f2937; }
  #app { display: flex; height: 100vh; width: 100vw; }
  #sidebar {
    width: 340px; min-width: 340px; height: 100%; overflow-y: auto;
    background: #ffffff; border-right: 1px solid #e5e7eb; padding: 18px;
    display: flex; flex-direction: column;
  }
  /* 사이드바 h1/부제목은 항상 맨 위(기본 order 0), 맨 아래 용어 설명은 항상 맨 아래에 고정합니다.
     섹션 순서는 표시 방식(동별 집계/반경 클러스터)에 따라 달라져서, 각 섹션에 순서를 부여하고
     #sidebar.mode-cluster일 때 그 값을 덮어씁니다. (2026-08-31, 목업 승인) */
  #sidebar > .footnote { order: 99; }
  #viewModeSection { order: 1; }
  #layerSection { order: 2; }
  #legendSection { order: 3; }
  #monthSection { order: 4; }
  #pestFilterSection { order: 5; }
  #mergeDataSection, #radiusSection { order: 6; }
  #fieldEntrySection { order: 7; }
  #detailInfoSection { order: 8; }

  #sidebar.mode-cluster #viewModeSection { order: 1; }
  #sidebar.mode-cluster #monthSection { order: 2; }
  #sidebar.mode-cluster #mergeDataSection { order: 2; }
  #sidebar.mode-cluster #pestFilterSection { order: 3; }
  #sidebar.mode-cluster #layerSection { order: 4; }
  #sidebar.mode-cluster #legendSection { order: 5; }
  #sidebar.mode-cluster #radiusSection { order: 6; }
  #sidebar.mode-cluster #fieldEntrySection { order: 7; }
  #sidebar.mode-cluster #detailInfoSection { order: 8; }
  /* 자치구 표시/선택 (2026-09-13 자치구 확장, 목업 승인) — 사이드바 제목 바로 아래 */
  .district-switch { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
  .district-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; white-space: nowrap; }
  .district-chip.super { background: #eff6ff; color: #2563eb; border-color: #dbeafe; }
  .district-switch select { flex: 1; min-width: 0; border: 1px solid #d1d5db; border-radius: 8px; padding: 6px 10px; background: #ffffff; color: #111827; font: inherit; font-weight: 700; }
  .district-switch select:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
  #mapWrap { flex: 1; height: 100%; position: relative; }
  #map { width: 100%; height: 100%; }
  /* 지도 여백(광진구 윤곽선 바깥 흰색 마스크) 네 모서리를 부드럽게 하는 순수 CSS 비네트 —
     지리적으로 정확한 마스크(GWANGJIN_HULL)는 그대로 두고, 그 위에 얹는 시각적 보정만 담당합니다.
     (2026-08-31, 목업 승인) */
  .map-vignette-overlay {
    position: absolute; inset: 0; pointer-events: none; z-index: 450;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0) 42%, rgba(255,255,255,0.55) 100%);
  }
  #statCardOverlay {
    position: absolute; bottom: 12px; left: 12px; z-index: 500;
    background: rgba(255,255,255,0.94); backdrop-filter: blur(4px);
    border-radius: 10px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    font-size: 11.5px; color: #374151; min-width: 132px; max-width: calc(100vw - 48px);
  }
  #statCardOverlay .t { font-weight: 800; color: #111827; font-size: 12.5px; margin-bottom: 6px; }
  #statCardOverlay .row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
  #statCardOverlay .row b { color: #2563eb; font-variant-numeric: tabular-nums; }
  #statCardOverlay .row.hidden-row { display: none; }
  /* 좌표가 없어 지도에 못 그리는 기록을 알리는 줄 (2026-10-13 승인). 0건이면 JS 가 이 요소를
     **아예 만들지 않는다** — 그래서 평소 카드는 이 기능이 없던 때와 글자 하나까지 같다.
     ★ 위 hidden-row 를 재사용하지 말 것: 선택자가 `.row.hidden-row` 라 .row 가 없는 이 줄엔
       안 걸려서, 숨긴 줄 알고 0건에도 그대로 보인다(2026-10-13 실측).
     ★ .sub 같은 범용 이름도 쓰지 말 것: 저장소의 .sub 규칙 4개는 전부 다른 조상 아래로 한정돼 있어
       이 카드 안에서는 아무 스타일도 안 받는다. */
  #statCardOverlay .miss {
    display: flex; justify-content: space-between; gap: 10px;
    margin-top: 6px; padding-top: 6px; border-top: 1px solid #e5e7eb;
    color: #b45309; cursor: pointer;
  }
  #statCardOverlay .miss b { color: #b45309; font-variant-numeric: tabular-nums; }
  #statCardOverlay .miss:hover { text-decoration: underline; }
  #statCardOverlay .miss-note { color: #9ca3af; font-size: 10px; margin-top: 3px; }
  #sidebarToggle {
    display: none; position: fixed; top: 12px; left: 12px; z-index: 1001;
    width: 40px; height: 40px; border-radius: 8px; border: none;
    background: #ffffff; box-shadow: 0 1px 6px rgba(0,0,0,0.3);
    font-size: 18px; align-items: center; justify-content: center; cursor: pointer;
  }
  #sidebarBackdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999;
  }
  @media (max-width: 768px) {
    #sidebarToggle { display: flex; }
    #sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
      width: 85vw; min-width: 0; max-width: 340px;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      box-shadow: 2px 0 16px rgba(0,0,0,0.25);
      padding-top: 56px;
    }
    #sidebar.open { transform: translateX(0); }
    #sidebarBackdrop.show { display: block; }
    #mapWrap { width: 100%; }
  }
  h1 { font-size: 17px; margin: 0 0 2px 0; }
  .subtitle { font-size: 12px; color: #6b7280; margin-bottom: 18px; }
  .section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f0f1f3; }
  .section h2 { font-size: 13px; margin: 0 0 10px 0; color: #374151; }
  .month-row { display: flex; align-items: center; gap: 10px; }
  .month-row input[type=range] { flex: 1; }
  .range-slider { position: relative; height: 26px; margin: 6px 2px 4px 2px; }
  .range-slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: #e5e7eb; border-radius: 2px; transform: translateY(-50%); }
  .range-slider-range { position: absolute; top: 50%; height: 4px; background: #2563eb; border-radius: 2px; transform: translateY(-50%); }
  .range-slider input[type=range] {
    position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0;
    background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
  }
  .range-slider input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 26px; }
  .range-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 5px;
    border-radius: 50%; background: #2563eb; border: 2px solid #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); cursor: pointer;
  }
  .range-slider input[type=range]::-moz-range-track { background: transparent; }
  .range-slider input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #2563eb; border: 2px solid #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); cursor: pointer;
  }
  /* 양쪽 손잡이가 같은 값(겹친 상태)일 때 뒤에 그려진 쪽이 항상 클릭을 가로채서 반대쪽을 못 잡는
     문제 방지용 — JS가 드래그 시작 직전에 더 가까운 손잡이 쪽만 클릭 가능하게 이 클래스를 토글함
     (2026-09-07). */
  .range-slider input[type=range].no-pointer::-webkit-slider-thumb { pointer-events: none; }
  .range-slider input[type=range].no-pointer::-moz-range-thumb { pointer-events: none; }
  .range-slider-months { display: flex; justify-content: space-between; font-size: 10px; color: #9ca3af; padding: 0 1px; }
  .quick-period-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
  .quick-period-btn { border: 1px solid #d1d5db; background: #fff; color: #374151; font-size: 10.5px; padding: 4px 9px; border-radius: 12px; cursor: pointer; font-family: inherit; }
  .quick-period-btn:hover { border-color: #2563eb; color: #2563eb; }
  .quick-period-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
  /* 조회 기간 일 단위 조작부 (2026-09-14 목업 승인) */
  .period-date-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #6b7280; }
  .period-date-row input[type=date] { flex: 1; min-width: 0; border: 1px solid #d1d5db; border-radius: 6px; padding: 4px 6px; font-family: inherit; font-size: 12px; color: #111827; background: #fff; }
  .range-slider-days { position: relative; height: 13px; font-size: 10px; color: #9ca3af; }
  .range-slider-days span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
  .range-slider-days span::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 5px; background: #d1d5db; }
  .period-nudge-row { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: #6b7280; }
  .period-nudge-row b { font-weight: 600; color: #111827; min-width: 36px; text-align: center; }
  .period-nudge-row .spacer { margin-left: auto; }
  .period-nudge { border: 1px solid #d1d5db; background: #fff; border-radius: 6px; width: 24px; height: 22px; font-size: 9px; cursor: pointer; color: #374151; padding: 0; font-family: inherit; }
  .period-nudge:hover { border-color: #2563eb; color: #2563eb; }
  .period-warn { font-size: 11px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 5px 8px; margin-top: 8px; line-height: 1.4; }
  .item-list { max-height: 220px; overflow-y: auto; border: 1px solid #eef0f2; border-radius: 6px; }
  .item-row { display: flex; gap: 6px; align-items: baseline; font-size: 11px; padding: 5px 7px; border-bottom: 1px solid #f5f6f7; }
  .item-row:last-child { border-bottom: none; }
  .item-month { flex-shrink: 0; white-space: nowrap; color: #6b7280; }
  .item-pest { flex-shrink: 0; white-space: nowrap; font-weight: 700; }
  .item-addr { flex: 1; color: #374151; overflow-wrap: anywhere; }
  .checkbox-line { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
  .checkbox-line input { margin: 0; }
  .filter-toggle-row { margin: -4px 0 8px; font-size: 12px; }
  .filter-toggle-btn { border: none; background: none; padding: 0; color: #2563eb; font-size: 12px; cursor: pointer; }
  .collapse-toggle {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 9px 11px;
    font-size: 12.5px; font-weight: 700; color: #374151; cursor: pointer;
  }
  .collapse-toggle .chev { transition: transform 0.2s; color: #9ca3af; }
  .collapse-toggle.open .chev { transform: rotate(180deg); }
  .collapse-body { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
  .collapse-body.open { max-height: 480px; }
  .collapse-body-inner { padding-top: 10px; }
  .filter-toggle-btn:hover { text-decoration: underline; }
  .layer-hint { font-size: 11px; color: #6b7280; margin: -2px 0 8px; line-height: 1.4; } /* 2026-09-14 핀 기간 규칙 안내 */
  .filter-toggle-sep { color: #d1d5db; margin: 0 4px; }
  .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
  .legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; }
  .legend-box { width: 16px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); }
  .legend-gradient { height: 12px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.08); margin-bottom: 4px; }
  .legend-ticks { display: flex; justify-content: space-between; font-size: 11px; color: #6b7280; }
  #infoPanel { font-size: 13px; line-height: 1.5; }
  #infoPanel .placeholder { color: #9ca3af; }
  .dong-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
  .stat-row { display: flex; justify-content: space-between; margin-bottom: 3px; }
  .stat-label { color: #6b7280; }
  .stat-value { font-weight: 600; }
  .chronic-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; margin-left: 6px; }
  .chronic-high { background: #fee2e2; color: #b91c1c; }
  .chronic-mid { background: #ffedd5; color: #c2410c; }
  .chronic-low { background: #dcfce7; color: #15803d; }
  #trend { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin: 8px 0; }
  #trend .bar { flex: 1; background: #60a5fa; border-radius: 2px 2px 0 0; min-height: 2px; position: relative; }
  #trend .bar span { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: 9px; color: #9ca3af; }
  #pestBreakdown div { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
  .footnote { font-size: 11px; color: #9ca3af; line-height: 1.5; }
  /* 섹션 제목 옆 물음표 호버 도움말 — 평소엔 회색 문구를 안 보이게 숨겨뒀다가, 물음표에 마우스를
     올렸을 때만 말풍선으로 보여줍니다. (2026-08-31, 목업 승인) */
  .section-h2-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .help-icon {
    position: relative; width: 16px; height: 16px; border-radius: 50%; background: #f3f4f6; color: #6b7280;
    border: 1px solid #e5e7eb; font-size: 10px; font-weight: 800; display: flex; align-items: center;
    justify-content: center; cursor: help; flex-shrink: 0;
  }
  .help-icon:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
  .help-tooltip {
    position: absolute; top: 22px; right: 0; width: 220px; background: #111827; color: #e5e7eb;
    font-size: 11.5px; line-height: 1.55; padding: 10px 12px; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transform: translateY(-4px);
    transition: opacity 0.12s, transform 0.12s; z-index: 20; font-weight: 400; text-align: left;
  }
  .help-icon:hover .help-tooltip { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .help-tooltip::after {
    content: ''; position: absolute; top: -5px; right: 5px; width: 9px; height: 9px; background: #111827;
    transform: rotate(45deg);
  }
  /* 병해충 유형 필터가 어디에 걸리는지 알려주는 표시(2026-09-21, 목업 승인) */
  .scope-box { font-size: 11.5px; line-height: 1.6; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; color: #374151; }
  .scope-box .sub { color: #6b7280; }
  .scope-box .swatch { vertical-align: -1px; }
  .filter-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
  .filter-badge.on { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
  .filter-badge.off { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
  .leaflet-popup-content { font-size: 13px; }

  /* ---- 민원 상세정보 패널 (사진/메모) ---- */
  .item-row.clickable { cursor: pointer; }
  .item-row.clickable:hover { background: #f8fafc; }
  #detailBackdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.35); z-index: 1400;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  #detailBackdrop.open { opacity: 1; pointer-events: auto; }
  #detailPanel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw;
    background: white; z-index: 1401; box-shadow: -4px 0 24px rgba(0,0,0,0.18);
    transform: translateX(100%); transition: transform 0.25s ease;
    display: flex; flex-direction: column; overflow: hidden;
  }
  #detailPanel.open { transform: translateX(0); }
  .detail-panel-header {
    padding: 16px 18px 14px; border-bottom: 1px solid #eef0f2;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  }
  .detail-back-btn {
    border: none; background: #f3f4f6; width: 28px; height: 28px; border-radius: 6px;
    font-size: 14px; color: #374151; cursor: pointer; flex-shrink: 0; display: none;
  }
  .detail-back-btn.show { display: inline-flex; align-items: center; justify-content: center; }
  .detail-back-btn:hover { background: #e5e7eb; }
  .detail-header-text { flex: 1; min-width: 0; }
  .detail-panel-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
  .detail-panel-sub { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .detail-close-btn {
    border: none; background: #f3f4f6; width: 28px; height: 28px; border-radius: 6px;
    font-size: 15px; color: #6b7280; cursor: pointer; flex-shrink: 0;
  }
  .detail-close-btn:hover { background: #e5e7eb; }
  .detail-panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
  .detail-badge {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px;
    border-radius: 10px; margin-right: 6px; white-space: nowrap;
  }
  .detail-info-grid { display: grid; grid-template-columns: 64px 1fr; gap: 7px 10px; font-size: 13px; margin: 14px 0 18px; }
  .detail-info-label { color: #9ca3af; }
  .detail-info-value { color: #1f2937; font-weight: 500; }
  .detail-section-title {
    font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase;
    letter-spacing: 0.02em; margin: 0 0 8px;
  }
  .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
  .photo-slot {
    aspect-ratio: 1 / 1; border-radius: 10px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #f9fafb;
  }
  .photo-slot.filled { cursor: pointer; }
  .photo-slot.filled img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-slot.empty {
    border: 2px dashed #d1d5db; color: #9ca3af;
    flex-direction: column; gap: 4px; font-size: 11px; cursor: pointer;
  }
  .photo-slot.empty:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
  .photo-slot.empty.disabled { cursor: default; opacity: 0.5; }
  .photo-slot.empty.disabled:hover { border-color: #d1d5db; color: #9ca3af; background: #f9fafb; }
  .photo-slot .plus { font-size: 22px; line-height: 1; font-weight: 300; }
  .photo-slot.uploading { color: #6b7280; font-size: 11px; }
  .photo-del {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: white; border: none; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .photo-dl {
    position: absolute; bottom: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: white; border: none; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .photo-dl:hover { background: #2563eb; }
  #memoBox {
    width: 100%; min-height: 90px; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 10px 11px; font-size: 13px; font-family: inherit; resize: vertical;
    color: #1f2937; line-height: 1.5; box-sizing: border-box;
  }
  #memoBox:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
  #memoBox:disabled { background: #f9fafb; color: #6b7280; }
  .memo-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
  .memo-saved { font-size: 11px; color: #16a34a; opacity: 0; transition: opacity 0.2s ease; }
  .memo-saved.show { opacity: 1; }
  #saveMemoBtn {
    border: none; background: #2563eb; color: white; font-size: 12px; font-weight: 600;
    padding: 6px 14px; border-radius: 6px; cursor: pointer;
  }
  #saveMemoBtn:hover { background: #1d4ed8; }
  #saveMemoBtn:disabled { background: #9ca3af; cursor: default; }
  /* 민원 "직접 완료 처리" — 종이서류 등으로 이미 처리된 작업을 현장기록 없이 바로 완료 처리
     (뒤에서 현장기록을 자동 생성해서 매칭). 2026-09-01 */
  .direct-complete-box { border: 1.5px dashed #d1d5db; border-radius: 12px; padding: 14px; margin: 4px 0 18px; }
  .dc-title { font-size: 12.5px; font-weight: 700; color: #374151; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
  .dc-hint { font-size: 11px; color: #9ca3af; line-height: 1.6; margin-bottom: 12px; }
  .dc-open-btn {
    width: 100%; border: none; background: #1f2937; color: #fff; font-size: 13px; font-weight: 700;
    padding: 10px; border-radius: 9px; cursor: pointer; font-family: inherit;
  }
  .dc-open-btn:hover { background: #111827; }
  .dc-form { display: none; }
  .dc-form.open { display: block; }
  .dc-field-label { font-size: 11.5px; font-weight: 700; color: #6b7280; margin: 12px 0 6px; }
  .dc-field-label .opt { font-weight: 500; color: #9ca3af; }
  .dc-textarea {
    width: 100%; min-height: 64px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 9px 10px;
    font-size: 12.5px; font-family: inherit; resize: vertical; color: #1f2937;
  }
  .dc-actions { display: flex; gap: 8px; margin-top: 16px; }
  .dc-cancel-btn { flex: none; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; font-size: 12.5px; font-weight: 700; padding: 10px 14px; border-radius: 9px; cursor: pointer; font-family: inherit; }
  .dc-submit-btn { flex: 1; border: none; background: #16a34a; color: #fff; font-size: 13px; font-weight: 800; padding: 10px; border-radius: 9px; cursor: pointer; font-family: inherit; }
  .dc-submit-btn:hover { background: #15803d; }
  .dc-submit-btn:disabled { background: #9ca3af; cursor: default; }
  .dc-note { font-size: 10.5px; color: #9ca3af; line-height: 1.6; margin-top: 10px; padding: 8px 10px; background: #f9fafb; border-radius: 8px; }
  .detail-panel-footer {
    padding: 12px 18px; border-top: 1px solid #eef0f2; font-size: 11px; color: #9ca3af; line-height: 1.5;
  }
  .detail-badges-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  #detailEditBtn {
    display: none; flex-shrink: 0; border: none; background: #f3f4f6; color: #374151;
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  }
  #detailEditBtn.show { display: inline-flex; align-items: center; }
  #detailEditBtn:hover { background: #e5e7eb; }
  #detailDeleteBtn {
    display: none; flex-shrink: 0; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  }
  #detailDeleteBtn.show { display: inline-flex; align-items: center; }
  #detailDeleteBtn:hover { background: #fee2e2; }
  .detail-edit-row { margin-bottom: 10px; }
  .detail-edit-row label { display: block; font-size: 11px; color: #9ca3af; margin-bottom: 4px; }
  .detail-edit-row select, .detail-edit-row input {
    width: 100%; box-sizing: border-box; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 8px 10px; font-size: 13px; font-family: inherit; color: #1f2937; background: white;
  }
  .detail-edit-row select:focus, .detail-edit-row input:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe;
  }
  .detail-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
  .detail-edit-actions button {
    border: none; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 6px 14px; cursor: pointer;
  }
  #editCancelBtn { background: #f3f4f6; color: #374151; }
  #editCancelBtn:hover { background: #e5e7eb; }
  #editSaveBtn { background: #2563eb; color: white; }
  #editSaveBtn:hover { background: #1d4ed8; }
  #editSaveBtn:disabled { background: #9ca3af; cursor: default; }
  .detail-edit-status { font-size: 11px; margin-top: 6px; min-height: 14px; }
  .detail-edit-status.err { color: #dc2626; }
  .detail-edit-status.ok { color: #16a34a; }
  #photoLightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1500;
    display: none; align-items: center; justify-content: center; cursor: zoom-out;
  }
  #photoLightbox.open { display: flex; }
  #photoLightbox img { max-width: 88vw; max-height: 88vh; border-radius: 8px; }

  #loginOverlay {
    position: fixed; inset: 0; z-index: 9999;
    background: #f3f4f6; display: flex; align-items: center; justify-content: center;
  }
  #loginBox {
    background: white; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 32px; width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }
  #loginBox h2 { margin: 0 0 4px; font-size: 18px; }
  #loginBox p.desc { margin: 0 0 20px; font-size: 12px; color: #6b7280; }
  #loginBox input {
    width: 100%; box-sizing: border-box; padding: 9px 10px; margin-bottom: 10px;
    border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px;
  }
  #loginBox button {
    width: 100%; padding: 10px; border: none; border-radius: 6px;
    background: #2563eb; color: white; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  #loginBox button:hover { background: #1d4ed8; }
  #loginError { color: #dc2626; font-size: 12px; margin-top: 8px; min-height: 16px; }
  .login-privacy-link { display: block; text-align: center; margin-top: 12px; font-size: 11px; color: #9ca3af; text-decoration: underline; }
  #accessDeniedBox {
    background: white; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 32px; width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }
  #accessDeniedBox h2 { margin: 0 0 4px; font-size: 18px; color: #b91c1c; }
  #accessDeniedBox p.desc { margin: 0 0 20px; font-size: 12.5px; color: #6b7280; line-height: 1.5; }
  #accessDeniedLink {
    display: block; text-align: center; padding: 10px; border-radius: 6px; margin-bottom: 10px;
    background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 700; text-decoration: none;
  }
  #accessDeniedLogoutBtn, #accessDeniedRetryBtn, #accessDeniedReadOnlyBtn {
    width: 100%; padding: 10px; border: none; border-radius: 6px; margin-bottom: 8px;
    background: #f3f4f6; color: #374151; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  #accessDeniedRetryBtn { background: #2563eb; color: #fff; }
  #accessDeniedLogoutBtn { margin-bottom: 0; }
  /* 2026-09-22: 읽기 전용 모드 배너(데이터 일부를 못 불러왔을 때) */
  #readOnlyBanner {
    display: none; position: absolute; left: 12px; right: 12px; top: 56px; z-index: 900; /* 오른쪽 위 버튼 줄(#topRightBar) 아래 */
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px;
    padding: 10px 14px; font-size: 12px; line-height: 1.6; box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  /* 그리다 실패했을 때만 뜨는 띠 (2026-10-16 승인). 「읽기 전용」 띠와 같은 자리·같은 수치이고
     색만 다르다 — 그쪽은 "데이터를 못 받았다", 이쪽은 "그림이 최신이 아닐 수 있다"로 뜻이 다르다.
     ★ 평소에는 이 요소를 **아예 만들지 않는다**(JS). 숨겨 두면 옛 사본에서 터지고 첫 그리기 전에 보인다. */
  #drawFailBanner {
    position: absolute; left: 12px; right: 12px; top: 56px; z-index: 900;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px;
    padding: 10px 14px; font-size: 12px; line-height: 1.6; box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  #drawFailBanner .ttl { font-weight: 800; }
  #drawFailBanner .det {
    margin-top: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
    background: rgba(146,64,14,.08); border-radius: 6px; padding: 7px 9px; overflow-wrap: anywhere;
  }
  #drawFailBanner .acts { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
  #drawFailBanner button {
    border: none; border-radius: 6px; font-size: 11.5px; font-weight: 700; padding: 6px 11px; cursor: pointer;
  }
  #drawFailBanner .retry { background: #92400e; color: #fff; }
  #drawFailBanner .more { background: rgba(146,64,14,.12); color: #92400e; }
  #topRightBar {
    position: fixed; top: 8px; right: 8px; z-index: 1200;
    display: flex; align-items: center; gap: 8px;
  }
  #photoFinderBtn {
    border: none; background: #2563eb; color: white; border-radius: 8px;
    padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
    text-decoration: none; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  #logoutBar {
    background: white; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 6px 10px; font-size: 12px; color: #374151;
    align-items: center; gap: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    position: relative;
  }
  #logoutBar button {
    border: none; background: #f3f4f6; border-radius: 4px; padding: 4px 8px;
    font-size: 11px; cursor: pointer;
  }
  /* 좁은 화면(모바일)에서만 쓰는 계정 아이콘 — 넓은 화면에선 숨기고 이메일+로그아웃을 그대로 보여줌 */
  #userAvatarBtn { display: none; }
  #userMenuPanel { display: contents; }

  /* ---- 상단 우측 바(설정/매칭관리/민원접수/통계/사진찾기/계정) 모바일 대응 (2026-09-01) ----
     버튼이 다 안 들어가면 글자 단위로 줄바꿈되던 문제 — 줄바꿈 대신 가로 스크롤로 바꾸고,
     이메일 상시노출+로그아웃 버튼은 계정 아이콘 하나로 접어서 탭하면 펼쳐지게 함.
     (base #topRightBar/#logoutBar 규칙보다 뒤에 와야 우선순위가 이겨서 여기 둠) */
  @media (max-width: 768px) {
    #topRightBar {
      left: 56px; right: 8px; max-width: none;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding-bottom: 2px; /* 스크롤바 자리 확보(브라우저가 스크롤바를 그리는 경우 대비) */
    }
    #topRightBar::-webkit-scrollbar { display: none; }
    /* 2026-09-02: 문구까지 다 넣으니 좁은 화면에서 여전히 빡빡하다는 피드백 — 아이콘만
       남기고 라벨은 숨김(버튼 자체는 title 속성 없이도 아이콘만으로 뜻이 통함: ⚙️🔗📝📊📷) */
    #settingsBtn, #matchBtn, #intakeBtn, #statsBtn, #insightsBtn, #photoFinderBtn {
      white-space: nowrap; flex-shrink: 0; padding: 8px 10px; font-size: 15px;
    }
    #settingsBtn .btn-label, #matchBtn .btn-label, #intakeBtn .btn-label,
    #statsBtn .btn-label, #insightsBtn .btn-label, #photoFinderBtn .btn-label {
      display: none;
    }
    #logoutBar {
      flex-shrink: 0; margin-left: auto; padding: 0; border: none; box-shadow: none; background: transparent;
    }
    #userAvatarBtn {
      display: flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 50%; background: #111827; color: #fff;
      font-size: 13px; font-weight: 800; border: none; cursor: pointer; flex-shrink: 0;
    }
    #userMenuPanel {
      display: none; flex-direction: column; gap: 8px; position: absolute; top: 38px; right: 0;
      background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.18);
      padding: 10px; min-width: 180px; z-index: 1250;
    }
    #userMenuPanel.show { display: flex; }
    #userMenuPanel #loginUserLabel {
      color: #6b7280; font-size: 11.5px; padding-bottom: 8px; border-bottom: 1px solid #eef0f2;
      word-break: break-all;
    }
    #userMenuPanel #logoutBtn { width: 100%; }
  }

  /* ---- 현장 빠른 기록 모달 (관리자 전용) ---- */
  .photo-slot.failed {
    border: 2px solid #fca5a5; background: #fef2f2; color: #b91c1c;
    flex-direction: column; font-size: 10.5px; gap: 2px; text-align: center; padding: 4px;
  }
  #qcBackdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 1600;
    opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
  }
  #qcBackdrop.open { opacity: 1; pointer-events: auto; }
  #qcModal {
    position: fixed; top: 50%; left: 50%; width: 420px; max-width: 94vw; max-height: 88vh;
    background: white; border-radius: 14px; z-index: 1601; box-shadow: 0 8px 40px rgba(0,0,0,0.28);
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; pointer-events: none; transform: translate(-50%,-46%);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  #qcModal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%); }
  .qc-header { padding: 14px 16px; border-bottom: 1px solid #eef0f2; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
  .qc-title { font-size: 15px; font-weight: 700; }
  .qc-close { border: none; background: #f3f4f6; width: 28px; height: 28px; border-radius: 6px; font-size: 14px; color: #6b7280; cursor: pointer; }
  .qc-close:hover { background: #e5e7eb; }
  .qc-body { flex: 1; overflow-y: auto; padding: 16px; }
  .qc-footer { padding: 12px 16px; border-top: 1px solid #eef0f2; display: flex; gap: 8px; flex-shrink: 0; }
  .qc-footer:empty { display: none; padding: 0; border: none; }
  .qc-screen { display: none; }
  .qc-screen.active { display: block; }
  .qc-bigbtn {
    width: 100%; padding: 16px 10px; border: none; border-radius: 12px; background: #2563eb; color: white;
    font-size: 14.5px; font-weight: 700; cursor: pointer;
  }
  .qc-bigbtn:hover { background: #1d4ed8; }
  .qc-subtitle { font-size: 12.5px; font-weight: 700; color: #374151; }
  .qc-typetoggle { display: flex; gap: 8px; margin-bottom: 14px; }
  .qc-typetoggle button {
    flex: 1; padding: 10px 4px; border: 2px solid #e5e7eb; background: white; border-radius: 10px;
    font-size: 12px; font-weight: 700; color: #6b7280; cursor: pointer;
  }
  .qc-typetoggle button.treat.active { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
  .qc-typetoggle button.mon.active { border-color: #2563eb; background: #eff6ff; color: #1e40af; }
  .qc-gpsbox { font-size: 12.5px; color: #374151; background: #f9fafb; border: 1px solid #eef0f2; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
  .qc-gpsbox.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
  .qc-gpsbox.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
  #qcMiniMap { height: 170px; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; }
  .qc-label { font-size: 12px; color: #374151; display: block; margin-bottom: 4px; font-weight: 600; }
  #qcDong, #qcMemo, #qcPestType {
    width: 100%; box-sizing: border-box; padding: 8px 9px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px;
  }
  .qc-status { font-size: 12px; min-height: 16px; margin-top: 4px; }
  .qc-status.ok { color: #15803d; font-weight: 700; }
  .qc-status.err { color: #dc2626; font-weight: 700; }
  .qc-status.pending { color: #b45309; font-weight: 700; }
  .qc-primary-btn { flex: 1; border: none; background: #2563eb; color: white; font-size: 13.5px; font-weight: 700; padding: 10px; border-radius: 8px; cursor: pointer; }
  .qc-primary-btn:hover { background: #1d4ed8; }
  .qc-primary-btn:disabled { background: #9ca3af; cursor: default; }
  .qc-secondary-btn { flex: 1; border: 1px solid #d1d5db; background: white; color: #374151; font-size: 13.5px; font-weight: 600; padding: 10px; border-radius: 8px; cursor: pointer; }
  .qc-secondary-btn:hover { background: #f3f4f6; }
  .qc-today-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 7px 9px; border-bottom: 1px solid #f5f6f7; }
  .qc-today-row:last-child { border-bottom: none; }
  .qc-today-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 8px; }
  .qc-today-badge.treat { background: #fffbeb; color: #92400e; }
  .qc-today-badge.mon { background: #eff6ff; color: #1e40af; }
  .qc-today-dong { flex: 1; color: #374151; overflow-wrap: anywhere; }
  .qc-today-photostat { flex-shrink: 0; font-size: 10.5px; color: #9ca3af; cursor: default; white-space: nowrap; }
  .qc-today-photostat.pending { color: #b45309; cursor: pointer; text-decoration: underline; }
  .qc-empty { font-size: 12px; color: #9ca3af; padding: 10px 2px; text-align: center; }
  /* 2026-09-22: 빠른 기록 사진 다시 시도 — 오늘 목록 "추가", 재시도 화면의 연결 대기·실패 표시, 완료 화면 "다시 시도" */
  .qc-today-add { flex-shrink: 0; border: none; background: none; padding: 0 2px; font-size: 10.5px; font-weight: 600; color: #2563eb; cursor: pointer; text-decoration: underline; white-space: nowrap; }
  .qc-today-add:hover { color: #1d4ed8; }
  .qc-slot-tag {
    position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px 4px; border-radius: 6px;
    background: rgba(180,83,9,0.9); color: #fff; font-size: 10px; font-weight: 700; text-align: center; line-height: 1.3;
  }
  .qc-slot-tag.err { background: rgba(185,28,28,0.9); }
  .qc-done-retry { display: block; width: 100%; margin-top: 12px; }

  /* ==== 커스텀 알림(토스트) / 확인창 — 네이티브 alert·confirm 대체 (2026-08-27) ==== */
  .toast-stack {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 8px; z-index: 9400; align-items: center; pointer-events: none; /* 확인창(9300)·매칭관리(9150) 등 어떤 창보다 앞 — 알림은 항상 보여야 함 */
  }
  .toast {
    background: #111827; color: #fff; font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); opacity: 0; transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease; max-width: 360px; text-align: center;
  }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.error { background: #7f1d1d; }
  .toast.success { background: #065f46; }

  .confirm-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: none;
    align-items: center; justify-content: center; z-index: 9300; /* 매칭관리(9150)·후보선택(9160)·상세(9200) 위에서 열려도 항상 맨 앞 */
  }
  .confirm-modal-backdrop.show { display: flex; }
  .confirm-modal-box { background: #fff; border-radius: 16px; padding: 22px; width: 300px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
  .confirm-modal-title { font-size: 15px; font-weight: 800; color: #1f2937; margin-bottom: 8px; }
  .confirm-modal-desc { font-size: 12.5px; color: #6b7280; line-height: 1.6; margin-bottom: 18px; }
  .confirm-modal-actions { display: flex; gap: 8px; }
  .confirm-modal-actions button { flex: 1; padding: 11px; border-radius: 10px; border: none; font-weight: 800; font-size: 13px; cursor: pointer; }
  .confirm-modal-cancel { background: #f1f5f9; color: #374151; }
  .confirm-modal-confirm { background: #b91c1c; color: #fff; }

  /* ---- 엑셀/사진대지 내보내기 범위 선택 모달 (2026-08-31, 목업 승인) ---- */
  .export-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: none;
    align-items: center; justify-content: center; z-index: 9100; padding: 20px;
  }
  .export-modal-backdrop.show { display: flex; }
  .export-modal-box {
    background: #fff; border-radius: 16px; width: 380px; max-width: 100%; max-height: 90vh;
    overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  }
  .export-modal-hd { padding: 16px 18px; border-bottom: 1px solid #eef0f2; font-weight: 800; font-size: 15px; color: #1f2937; }
  .export-modal-bd { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
  .export-field-title { display: block; font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 8px; }
  .export-range-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .export-range-row input[type=month] {
    border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px; font-size: 13px; font-family: inherit;
  }
  .export-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .export-chip {
    font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid #d1d5db;
    background: #f9fafb; color: #374151; cursor: pointer; user-select: none;
  }
  .export-chip.active { background: #2563eb; color: #fff; border-color: #2563eb; }
  /* 2026-09-30 해충 필터: '(종류 정보 없음)'은 성격이 달라 점선으로 구분한다(모니터링이 통째로 빠지는 칩) */
  .export-chip.nolink { border-style: dashed; }
  /* 칩마다 건수 — 13종이 늘 다 보이므로 어느 칩이 무엇을 담는지 숫자로 알려준다 */
  .export-chip .export-chip-cnt { margin-left: 5px; font-weight: 600; font-size: 11px; opacity: 0.72; }
  /* 0건 칩은 자리만 지키고 눌리지 않는다 — 사이드바처럼 칩 자리가 안 흔들리게 */
  .export-chip.zero { opacity: 0.45; cursor: default; background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
  .export-hint { font-weight: 500; color: #6b7280; }
  .export-pest-note {
    margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: #9a3412;
    background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 7px 9px;
  }
  .export-modal-ft {
    padding: 14px 18px; border-top: 1px solid #eef0f2; display: flex; justify-content: space-between;
    align-items: center; gap: 10px;
  }
  .export-count-preview { font-size: 12.5px; color: #6b7280; }
  .export-count-preview b { color: #2563eb; font-size: 15px; }
  .export-modal-ft button {
    border: none; border-radius: 8px; font-size: 13px; font-weight: 700; padding: 9px 16px; cursor: pointer;
  }
  #exportModalCancel { background: #f1f5f9; color: #374151; }
  #exportModalConfirm { background: #2563eb; color: #fff; }
  #exportModalConfirm:disabled { background: #9ca3af; cursor: default; }

  /* ---- 통계 보고서 (2026-08-31, B.행정보고서 스타일 확정안) ---- */
  #statsBtn {
    border: none; background: #8a2f3c; color: #fff; border-radius: 8px;
    padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: inline-flex; align-items: center; gap: 4px;
  }
  .stats-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.55); display: none;
    align-items: flex-start; justify-content: center; z-index: 9200; padding: 26px 16px;
    overflow-y: auto;
  }
  .stats-modal-backdrop.show { display: flex; }
  .stats-modal-box {
    background: #eef1ee; border-radius: 6px; width: 780px; max-width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4); position: relative; color: #262622;
  }
  .stats-modal-close {
    position: absolute; top: 14px; right: 16px; border: none; background: #fff; color: #6b6b62;
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    z-index: 2;
  }
  .stats-period-card {
    margin: 38px 38px 0; padding: 14px 18px; background: #fff; border: 1px solid #dcdfd8;
    border-radius: 8px; font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  }
  .stats-period-card h2 { font-size: 12px; font-weight: 700; color: #374151; margin: 0 0 2px; }
  .stats-report { padding: 20px 38px 40px; font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
  .stats-report .doc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #262622; padding-bottom: 14px; margin-bottom: 20px; }
  .stats-report .doc-head .tag { font-size: 10.5px; color: #6b6b62; letter-spacing: 0.05em; }
  .stats-report .doc-head .no { font-size: 10.5px; color: #8a2f3c; font-weight: 700; }
  .stats-report h2.stats-title { font-family: Georgia, "Noto Serif KR", serif; font-size: 19px; font-weight: 800; margin: 0 0 22px; color: #1c1c18; }
  .stats-report .section-label { font-family: Georgia, "Noto Serif KR", serif; font-size: 13px; font-weight: 700; color: #1c1c18; margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #c7cdc2; }
  .stats-report .section-label:first-of-type { margin-top: 0; }
  .stats-report .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #c7cdc2; margin-bottom: 6px; }
  .stats-report .stat-strip .cell { padding: 16px 15px; border-right: 1px solid #c7cdc2; }
  .stats-report .stat-strip .cell:last-child { border-right: none; }
  .stats-report .stat-strip .lbl { font-size: 11px; color: #6b6b62; margin-bottom: 7px; }
  .stats-report .stat-strip .val { font-family: Georgia, "Noto Serif KR", serif; font-size: 27px; font-weight: 900; color: #8a2f3c; line-height: 1; }
  .stats-report .stat-strip .val small { font-size: 12px; color: #6b6b62; font-weight: 600; }
  .stats-report .stat-strip .sub { font-size: 10.5px; color: #6b6b62; margin-top: 6px; line-height: 1.5; }
  .stats-report table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 4px; }
  .stats-report th { text-align: left; font-weight: 700; font-size: 11px; color: #262622; padding: 7px 9px; border-top: 2px solid #262622; border-bottom: 1px solid #262622; }
  .stats-report th.r, .stats-report td.r { text-align: right; }
  .stats-report td { padding: 8px 9px; border-bottom: 1px solid #d7dcd4; color: #3a3a34; }
  .stats-report td.hi { color: #8a2f3c; font-weight: 700; }
  .stats-report .bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
  .stats-report .barrow { display: grid; grid-template-columns: 62px 1fr 48px; align-items: center; gap: 10px; font-size: 11.5px; color: #3a3a34; }
  .stats-report .barrow .track { height: 8px; background: #dde2d9; }
  .stats-report .barrow .fill { height: 100%; background: #8a2f3c; }
  .stats-report .barrow .pct { text-align: right; color: #6b6b62; }
  .stats-report .trendchart { display: flex; align-items: flex-end; gap: 3px; height: 78px; margin-bottom: 4px; }
  .stats-report .tbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
  .stats-report .tbar-fill { width: 100%; background: #a7afa0; }
  .stats-report .tbar-fill.peak { background: #8a2f3c; }
  .stats-report .tbar-lbl { font-size: 8px; color: #8a887c; margin-top: 4px; }
  .stats-report .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .stats-report .doc-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid #c7cdc2; font-size: 10px; color: #8a887c; text-align: right; }
  .stats-report .stat-strip.c2 { grid-template-columns: repeat(2, 1fr); }
  .stats-report .sec-sub { font-family: -apple-system, "Malgun Gothic", sans-serif; font-weight: 600; color: #6b6b62; font-size: 11.5px; }
  .stats-report details.why { border: 1px solid #d9c9a3; background: #fffbeb; border-radius: 6px; padding: 9px 13px; margin: 12px 0 4px; font-size: 11px; color: #78350f; line-height: 1.75; }
  .stats-report details.why summary { cursor: pointer; font-weight: 800; }
  .stats-report details.why table { margin-top: 8px; background: #fff; }
  .stats-report details.why td, .stats-report details.why th { color: #3a3a34; }
  .stats-report .note-inline { font-size: 10.5px; color: #6b6b62; line-height: 1.6; margin: -2px 0 14px; }
  .stats-report .empty-note {
    font-size: 11.5px; color: #92400e; background: #fefce8; border: 1px solid #fde68a; border-radius: 6px;
    padding: 10px 13px; margin-bottom: 4px; line-height: 1.6;
  }
  @media (max-width: 640px) { .stats-report .two-col { grid-template-columns: 1fr; } }

  /* ---- 민원접수 (2026-08-31, 빠른입력/엑셀업로드) ---- */
  #intakeBtn {
    border: none; background: #2563eb; color: #fff; border-radius: 8px;
    padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .intake-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: none;
    align-items: center; justify-content: center; z-index: 9150; padding: 20px;
  }
  .intake-modal-backdrop.show { display: flex; }
  .intake-modal-box {
    background: #fff; border-radius: 14px; width: 460px; max-width: 100%; max-height: 90vh;
    overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  }
  .intake-head { padding: 16px 18px; border-bottom: 1px solid #eef0f2; display: flex; align-items: center; gap: 10px; }
  .intake-head .ttl { font-weight: 800; font-size: 15px; color: #1f2937; }
  .intake-head .back { border: none; background: none; color: #6b7280; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: auto; }
  .intake-subtabs { display: flex; gap: 4px; padding: 14px 18px 0; }
  .intake-subtab {
    flex: 1; text-align: center; padding: 9px; border-radius: 9px 9px 0 0; font-size: 12.5px; font-weight: 700;
    color: #6b7280; cursor: pointer; border: 1px solid transparent;
  }
  .intake-subtab.active { color: #1d4ed8; background: #eff6ff; border-color: #eef0f2; border-bottom-color: #eff6ff; }
  .intake-stage { display: none; padding: 18px; }
  .intake-stage.active { display: block; }
  .intake-field { margin-bottom: 14px; }
  .intake-field label { display: block; font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 6px; }
  .intake-field input[type=text], .intake-field input[type=datetime-local], .intake-field select {
    width: 100%; border: 1px solid #d1d5db; border-radius: 9px; padding: 10px 12px; font-size: 13.5px;
    font-family: inherit; background: #fff; box-sizing: border-box;
  }
  .intake-addr-preview {
    margin-top: 7px; font-size: 11.5px; color: #1d4ed8; background: #eff6ff; border-radius: 7px; padding: 7px 10px;
    display: none;
  }
  .intake-addr-preview.show { display: block; }
  .intake-addr-preview.err { color: #b91c1c; background: #fef2f2; }
  .intake-note { font-size: 10.5px; color: #9ca3af; margin-top: 6px; }
  .intake-submit-btn {
    width: 100%; background: #2563eb; color: #fff; border: none; border-radius: 10px; padding: 12px;
    font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; margin-top: 2px;
  }
  .intake-submit-btn:disabled { background: #9ca3af; cursor: default; }
  .intake-recent { margin-top: 20px; border-top: 1px solid #f0f1f3; padding-top: 12px; }
  .intake-recent .rt { font-size: 11px; font-weight: 800; color: #9ca3af; margin-bottom: 8px; }
  .intake-recent-row {
    display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; background: #f9fafb;
    border-radius: 8px; font-size: 12px; margin-bottom: 6px;
  }
  .intake-recent-row .ra { color: #111827; font-weight: 600; }
  .intake-recent-row .rm { color: #9ca3af; font-size: 10.5px; }
  .intake-drop-zone {
    border: 2px dashed #d1d5db; border-radius: 12px; padding: 30px 18px; text-align: center; color: #6b7280;
    background: #fafbfc; margin-bottom: 14px; cursor: pointer;
  }
  .intake-drop-zone .ic { font-size: 26px; margin-bottom: 8px; }
  .intake-drop-zone .t { font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 4px; }
  .intake-drop-zone .s { font-size: 11px; color: #9ca3af; }
  .intake-excel-note {
    font-size: 11.5px; color: #6b7280; line-height: 1.7; background: #fefce8; border: 1px solid #fef08a;
    border-radius: 9px; padding: 12px 14px;
  }
  .intake-excel-note b { color: #854d0e; }
  .intake-excel-result { font-size: 12px; color: #374151; margin-top: 12px; line-height: 1.7; }
  /* 2026-09-22 (전수검수, 목업 승인): 행정동 직접 선택 · 엑셀 처리 중 잠금 · 행별 확인창 */
  .intake-dong-pick { display: none; margin-top: 7px; }
  .intake-dong-pick.show { display: block; }
  .intake-drop-zone.busy { opacity: 0.55; cursor: progress; pointer-events: none; }
  .intake-dlg-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: none;
    align-items: center; justify-content: center; z-index: 5; padding: 20px;
  }
  .intake-dlg-backdrop.show { display: flex; }
  .intake-dlg-box {
    background: #fff; border-radius: 14px; width: 440px; max-width: 100%; max-height: 85vh;
    display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  }
  .intake-dlg-title { padding: 16px 18px; border-bottom: 1px solid #eef0f2; font-weight: 800; font-size: 15px; color: #1f2937; }
  .intake-dlg-body { padding: 14px 18px; overflow-y: auto; font-size: 12px; color: #374151; line-height: 1.6; }
  .intake-dlg-body p { margin: 0 0 10px; }
  .intake-dlg-actions { display: flex; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid #eef0f2; }
  .intake-dlg-actions button { flex: 1; padding: 11px; border-radius: 10px; border: none; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; }
  .intake-dlg-cancel { background: #f1f5f9; color: #374151; }
  .intake-dlg-ok { background: #2563eb; color: #fff; }
  .intake-dlg-ok:disabled { background: #9ca3af; cursor: default; }
  .intake-rv-sec { margin: 0 0 10px; padding: 10px 12px; border-radius: 9px; background: #f9fafb; }
  .intake-rv-sec.dup { background: #eff6ff; }
  .intake-rv-sec.skip { background: #fef2f2; color: #7f1d1d; }
  .intake-rv-sec.warn, .intake-rv-sec.info { background: #fefce8; border: 1px solid #fef08a; color: #854d0e; }
  .intake-rv-warn { margin-top: 6px; color: #854d0e; }
  .intake-rv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .intake-rv-toggle {
    border: 1px solid #d1d5db; background: #fff; border-radius: 7px; padding: 3px 9px;
    font-size: 11px; font-weight: 700; color: #374151; cursor: pointer; font-family: inherit;
  }
  .intake-rv-note { font-size: 11px; color: #6b7280; margin-top: 4px; }
  .intake-rv-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 160px; overflow-y: auto; }
  .intake-rv-list li { padding: 4px 0; font-size: 11.5px; border-top: 1px solid rgba(0,0,0,0.06); word-break: keep-all; overflow-wrap: anywhere; }
  .intake-rv-list li:first-child { border-top: none; }
  .intake-rv-list label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
  .intake-rv-list input[type=checkbox] { margin-top: 2px; flex: none; }

  /* ---- 설정 (2026-08-31, 완료처리 방식 자동/수동 + 핀 표시) ---- */
  #settingsBtn, #matchBtn, #insightsBtn {
    border: none; background: #fff; color: #374151; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-decoration: none; align-items: center;
  }
  .settings-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: none;
    align-items: center; justify-content: center; z-index: 9150; padding: 20px;
  }
  .settings-modal-backdrop.show { display: flex; }
  .settings-modal-box {
    background: #fff; border-radius: 14px; width: 460px; max-width: 100%; max-height: 90vh;
    overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  }
  .settings-head { padding: 16px 18px; border-bottom: 1px solid #eef0f2; display: flex; align-items: center; gap: 10px; }
  .settings-head .ttl { font-weight: 800; font-size: 15px; color: #1f2937; }
  .settings-head .close { border: none; background: none; color: #6b7280; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: auto; }
  .settings-body { padding: 18px; }
  .settings-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f1f3; }
  .settings-item:last-child { border-bottom: none; }
  .settings-item .stxt .t { font-size: 12.5px; font-weight: 700; color: #111827; margin-bottom: 3px; }
  .settings-item .stxt .s { font-size: 11px; color: #9ca3af; line-height: 1.5; }
  .settings-toggle-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .settings-toggle-lbl { font-size: 11px; font-weight: 700; color: #374151; white-space: nowrap; }
  .settings-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
  .settings-switch input { opacity: 0; width: 0; height: 0; }
  .settings-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 22px; cursor: pointer; transition: background .15s; }
  .settings-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
  .settings-switch input:checked + .settings-slider { background: #2563eb; }
  .settings-switch input:checked + .settings-slider::before { transform: translateX(18px); }
  .settings-mode-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .settings-mode-btn {
    border: 1.5px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 11px 13px;
    cursor: pointer; text-align: left; font-family: inherit; display: flex; align-items: flex-start; gap: 10px;
  }
  .settings-mode-btn .radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #d1d5db; flex-shrink: 0; margin-top: 1px; }
  .settings-mode-btn.active { border-color: #2563eb; background: #eff6ff; }
  .settings-mode-btn.active .radio { border-color: #2563eb; background: radial-gradient(#2563eb 0 40%, transparent 42%); }
  .settings-mode-btn .mt { font-size: 12.5px; font-weight: 800; color: #111827; margin-bottom: 2px; }
  .settings-mode-btn.active .mt { color: #1d4ed8; }
  .settings-mode-btn .ms { font-size: 10.5px; color: #6b7280; line-height: 1.5; }
  .subtype-list { margin-top: 12px; padding: 12px; background: #f9fafb; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; transition: opacity .15s; }
  .subtype-list.disabled { opacity: .4; pointer-events: none; }
  .subtype-row { display: flex; align-items: center; gap: 9px; }
  .subtype-row input { width: 15px; height: 15px; accent-color: #2563eb; }
  .subtype-row label { font-size: 12px; color: #374151; }
  .settings-save-note { font-size: 10.5px; color: #9ca3af; text-align: center; padding: 10px 18px 16px; }

  /* ---- 매칭 관리 (2026-08-31, 목업 승인) ---- */
  .matchmgmt-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: none;
    align-items: flex-start; justify-content: center; z-index: 9150; padding: 26px 16px; overflow-y: auto;
  }
  .matchmgmt-backdrop.show { display: flex; }
  .matchmgmt-box {
    background: #fff; border-radius: 14px; width: 640px; max-width: 100%; max-height: 88vh;
    display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  }
  .matchmgmt-head { padding: 16px 18px; border-bottom: 1px solid #eef0f2; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .matchmgmt-head .ttl { font-weight: 800; font-size: 15px; color: #1f2937; }
  .matchmgmt-head .sub { font-size: 11.5px; color: #9ca3af; margin-top: 2px; }
  .matchmgmt-head .close { border: none; background: none; color: #6b7280; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: auto; }
  .matchmgmt-body { padding: 16px 18px 20px; overflow-y: auto; }

  .matchmgmt-subtabs { display: flex; gap: 4px; background: #eef1f6; padding: 4px; border-radius: 9px; width: fit-content; margin-bottom: 16px; }
  .matchmgmt-subtab { padding: 7px 14px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: #6b7280; cursor: pointer; }
  .matchmgmt-subtab.active { background: #fff; color: #1f2430; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .matchmgmt-panel { display: none; }
  .matchmgmt-panel.active { display: block; }
  .matchmgmt-empty { text-align: center; color: #9ca3af; font-size: 12.5px; padding: 34px 10px; }
  .mm-done-hint { font-size: 11px; color: #9ca3af; background: #fafbfc; border-radius: 7px; padding: 7px 9px; margin-bottom: 8px; }
  .mm-showall-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6b7280; cursor: pointer; user-select: none; margin-bottom: 10px; }

  .mm-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; transition: opacity .25s, transform .25s; }
  .mm-card.gone { opacity: 0; transform: translateX(16px); pointer-events: none; }
  .mm-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
  .mm-type { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
  .mm-source { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
  .mm-source.auto { background: #eff6ff; color: #1d4ed8; }
  .mm-source.manual { background: #f5f3ff; color: #6d28d9; }
  .mm-date { font-size: 10.5px; color: #9ca3af; margin-left: auto; }
  .mm-addr { font-size: 12.5px; color: #1f2430; font-weight: 600; margin-bottom: 2px; }
  .mm-worker { font-size: 10.5px; color: #9ca3af; }
  .mm-link-line { font-size: 11.5px; color: #374151; margin: 7px 0 0; padding: 7px 9px; background: #fafbfc; border-radius: 7px; display: flex; align-items: center; gap: 6px; }
  .mm-link-line .dot { width: 8px; height: 8px; border-radius: 50%; background: #ea580c; flex-shrink: 0; }
  .mm-actions { display: flex; gap: 6px; margin-top: 10px; }
  .mm-btn { padding: 7px 12px; border-radius: 7px; font-size: 11px; font-weight: 800; cursor: pointer; border: none; font-family: inherit; }
  .mm-btn.link { background: #2563eb; color: #fff; }
  .mm-btn.skip { background: #f3f4f6; color: #6b7280; }
  .mm-btn.unmatch { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
  .mm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

  /* ---- 민원 후보 선택 모달 (매칭 관리 안에서 뜸) ---- */
  .mm-pick-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 9160; display: none; align-items: center; justify-content: center; }
  .mm-pick-backdrop.show { display: flex; }
  .mm-pick-modal { background: #fff; border-radius: 14px; width: 400px; max-width: 92vw; max-height: 74vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
  .mm-pick-head { padding: 15px 17px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
  .mm-pick-head .ttl { font-size: 13px; font-weight: 800; color: #1f2430; }
  .mm-pick-head .src { font-size: 10.5px; color: #6b7280; margin-top: 3px; }
  .mm-pick-body { flex: 1; overflow-y: auto; padding: 10px 11px; }
  .mm-cand { display: flex; gap: 10px; align-items: center; padding: 9px 9px; border-radius: 9px; cursor: pointer; border: 1.5px solid transparent; margin-bottom: 5px; }
  .mm-cand:hover { background: #f8fafc; }
  .mm-cand.picked { border-color: #2563eb; background: #eff6ff; }
  .mm-cand .dot { width: 9px; height: 9px; border-radius: 50%; background: #ea580c; flex-shrink: 0; }
  .mm-cand .info { flex: 1; min-width: 0; }
  .mm-cand .info .t1 { font-size: 11.5px; font-weight: 700; color: #1f2430; }
  .mm-cand .info .t2 { font-size: 10px; color: #9ca3af; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-cand .dist { font-size: 10px; font-weight: 800; color: #059669; white-space: nowrap; }
  .mm-pick-footer { padding: 11px 15px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px; flex-shrink: 0; }
  .mm-pick-btn { flex: 1; padding: 9px; border-radius: 8px; font-size: 11.5px; font-weight: 800; cursor: pointer; border: none; font-family: inherit; }
  .mm-pick-btn.cancel { background: #f3f4f6; color: #374151; }
  .mm-pick-btn.confirm { background: #2563eb; color: #fff; }
  .mm-pick-btn.confirm:disabled { background: #bfdbfe; cursor: not-allowed; }

  /* ---- 담당자 배정 (2026-09-18, 목업 승인) ---- */
  .assignmgmt-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: none;
    align-items: flex-start; justify-content: center; z-index: 9150; padding: 26px 16px; overflow-y: auto;
  }
  .assignmgmt-backdrop.show { display: flex; }
  .assignmgmt-box {
    background: #fff; border-radius: 14px; width: 640px; max-width: 100%; max-height: 88vh;
    display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  }
  .assignmgmt-head { padding: 16px 18px; border-bottom: 1px solid #eef0f2; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .assignmgmt-head .ttl { font-weight: 800; font-size: 15px; color: #1f2937; }
  .assignmgmt-head .sub { font-size: 11.5px; color: #9ca3af; margin-top: 2px; }
  .assignmgmt-head .close { border: none; background: none; color: #6b7280; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: auto; flex-shrink: 0; }
  .assignmgmt-toolbar { padding: 12px 18px; border-bottom: 1px solid #eef0f2; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .assignmgmt-toolbar label { font-size: 11.5px; font-weight: 700; color: #6b7280; }
  .assignmgmt-toolbar select {
    font: inherit; font-size: 12px; font-weight: 700; padding: 6px 9px; border-radius: 8px;
    border: 1px solid #d1d5db; background: #fff; color: #1f2937; cursor: pointer;
  }
  .assignmgmt-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }

  .as-warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; font-size: 11.5px; font-weight: 700; }
  .as-col { background: #f9fafb; border-radius: 12px; border: 1.5px dashed transparent; overflow: hidden; transition: border-color .12s, background .12s; }
  .as-col.drag-over { border-color: #2563eb; background: #eff6ff; }
  .as-col-head { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; user-select: none; }
  .as-col-head:hover { background: rgba(0,0,0,0.03); }
  .as-col-name { font-size: 12.5px; font-weight: 800; color: #1f2937; display: flex; align-items: center; gap: 6px; min-width: 0; }
  .as-col-name .as-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .as-avatar { width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: #fff; border: 1.5px solid #e5e7eb; display: grid; place-content: center; font-size: 10px; font-weight: 800; color: #6b7280; }
  .as-col.unassigned .as-avatar { background: #ecfdf5; color: #16a34a; border-color: transparent; }
  .as-col-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .as-cnt { font-size: 10.5px; font-weight: 800; color: #6b7280; background: #fff; border-radius: 999px; padding: 2px 8px; }
  .as-chev { font-size: 9px; color: #9ca3af; transition: transform .15s; display: inline-block; }
  .as-col.is-open .as-chev { transform: rotate(90deg); }
  .as-col-body { padding: 0 10px 10px; display: flex; flex-wrap: wrap; gap: 7px; min-height: 60px; }
  .as-col:not(.is-open) .as-col-body { display: none; }
  .as-empty { flex: 1 1 100%; text-align: center; color: #9ca3af; font-size: 11px; padding: 16px 6px; border: 1.5px dashed #e5e7eb; border-radius: 10px; }
  .as-col-peek { padding: 0 12px 10px; font-size: 10.5px; color: #9ca3af; }

  .as-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 10px; cursor: grab; box-shadow: 0 1px 2px rgba(15,23,42,0.04); flex: 1 1 210px; min-width: 190px; max-width: 280px; }
  .as-card:active { cursor: grabbing; }
  .as-card.dragging { opacity: 0.4; }
  .as-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: #1f2937; }
  .as-card-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .as-day { flex-shrink: 0; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #fffbeb; color: #b45309; }
  .as-day.overdue { background: #fef2f2; color: #b91c1c; }
  .as-card-meta { font-size: 10.5px; color: #9ca3af; margin-top: 3px; }