/* yangbul_erp components/layout (기획 18 §3 레이아웃, §4 표준블록) */
* { box-sizing: border-box; }
/* [hidden]이 display:flex 등 클래스 규칙에 덮이지 않도록 강제(로그아웃 시 관리자 네비 잔존 버그 방지) */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-15);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 1440px) { .wrap { max-width: 1180px; } }
a { color: var(--brand-strong); }
button { font-family: inherit; cursor: pointer; }

/* header / footer 영역 분리 */
.app-header {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: var(--z-header);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.logo { width: 34px; height: 34px; }
.brand-title { font-weight: 800; font-size: var(--fs-17); color: var(--brand-strong); line-height: 1.1; }
.brand-sub { font-size: var(--fs-12); color: var(--ink-mute); }
.user-box { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-14); }
/* 전역 검색 (헤더) */
.hdr-search { position: relative; flex: 0 1 260px; min-width: 110px; margin: 0 var(--sp-3); }
.hdr-search input { width: 100%; padding: 8px 12px; font-size: var(--fs-14); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.hdr-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(44,159,93,.15); }
.gs-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: var(--z-modal); max-height: 60vh; overflow-y: auto; }
.gs-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: var(--fs-13); border-bottom: 1px solid var(--line-soft); }
.gs-item:hover { background: var(--line-soft); }
.gs-ico { flex: none; }
.gs-lbl { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-sub { color: var(--ink-mute); font-size: var(--fs-12); margin-left: auto; white-space: nowrap; flex: none; }
.gs-empty { padding: 12px; text-align: center; color: var(--ink-mute); font-size: var(--fs-13); }
@media (max-width: 640px) { .hdr-search { flex: 1 1 100px; margin: 0 var(--sp-2); } .gs-results { position: fixed; left: 8px; right: 8px; } }
.main { flex: 1; padding-top: var(--sp-5); padding-bottom: var(--sp-8); }

/* nav */
.app-nav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 60px; z-index: calc(var(--z-header) - 1); }
.nav-inner { display: flex; gap: var(--sp-1); padding: var(--sp-2) 0; overflow-x: auto; }
.nav-btn { padding: 9px 15px; font-size: var(--fs-14); font-weight: 600; color: var(--ink-soft); background: none; border: none; border-radius: var(--radius-sm); white-space: nowrap; flex: none; }
/* 서브바 — 선택한 대분류의 화면 목록을 상시 노출(오버레이 메가패널 대체).
   본문을 덮지 않으므로 hover 로 열 필요가 없고, 지금 어느 그룹에 있는지가 항상 보인다. */
.subnav { background: var(--surface); border-bottom: 1px solid var(--line);
          position: sticky; top: 108px; z-index: calc(var(--z-header) - 2); }
.subnav[hidden] { display: none; }
.subnav-inner { display: flex; gap: var(--sp-1); padding: var(--sp-1) 0; overflow-x: auto; scrollbar-width: none; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-btn { flex: 0 0 auto; padding: 8px 14px; font-size: var(--fs-13); font-weight: 600;
              color: var(--ink-soft); background: none; border: 0; border-radius: 999px;
              cursor: pointer; white-space: nowrap; }
.subnav-btn:hover { background: var(--line-soft); color: var(--ink); }
.subnav-btn.active { background: var(--brand); color: #fff; }
@media (max-width: 720px) { .subnav { top: 60px; } }   /* 모바일은 상단 대메뉴 바(.app-nav)가 숨겨져 헤더(60px) 바로 아래 */
@media print { .subnav { display: none; } }

/* 모바일 햄버거 + 좌측 슬라이드 드로어 */
.btn-hamb { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 22px; background: none; border: none; color: var(--ink); border-radius: var(--radius-sm); margin-right: 4px; flex: none; }
.btn-hamb:hover { background: var(--line-soft); }
.drawer { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(31,41,55,.5); backdrop-filter: blur(2px); }
.drawer[hidden] { display: none; }
.drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 86%; max-width: 320px; background: var(--surface); box-shadow: var(--shadow-lg); overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-8); animation: dwslide .18s ease; }
@keyframes dwslide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer-user { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2); }
.drawer-user .btn { margin-left: auto; }
.dw-group { border-bottom: 1px solid var(--line-soft); }
.dw-gbtn { width: 100%; text-align: left; background: none; border: none; font-weight: 800; font-size: var(--fs-15); color: var(--brand-strong); padding: 12px 10px; min-height: 44px; }
.dw-mids { padding: 2px 0 8px; }
.dw-mid { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); min-height: 40px;
          font-weight: 700; font-size: var(--fs-14); color: var(--ink); padding: 10px 12px; }
.dw-mid:hover, .dw-mid.active { background: var(--brand); color: #fff; }

/* 반드시 `screen and` — 이 블록에 표 카드형 전환이 들어 있다. 미디어쿼리를 화면으로 한정하지 않으면
   인쇄에도 적용된다: A4 세로의 실제 콘텐츠 폭은 210mm−여백 ≈ 703px 로 720px 미만이라,
   인쇄물의 표가 한 행씩 카드로 쪼개져 몇 장으로 늘어난다(2026-08-08 가로등 상세표에서 실제 발생). */
@media screen and (max-width: 720px) {
  .btn-hamb { display: inline-flex; }
  .app-nav { display: none; }              /* 데스크톱 탭바 숨김 → 드로어 사용 */
  .hdr-search { display: none; }           /* 검색은 드로어 밖(생략), 헤더 클리핑 방지 */
  .brand-sub { display: none; }            /* 서브타이틀 숨겨 겹침 제거 */
  .user-box { display: none; }             /* 사용자/로그아웃은 드로어로 이동 */
  .header-inner { justify-content: flex-start; gap: var(--sp-2); }
  /* 데이터 표 → 카드형 전환(헤더는 data-label로 각 셀 앞에 표기) */
  .table thead { display: none; }
  .table, .table tbody { display: block; width: 100%; }
  .table tr { display: block; border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: var(--sp-2); padding: 4px 10px; background: var(--surface); }
  .table tbody tr:hover { background: var(--surface); }
  .table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; border: none; padding: 6px 0; font-size: var(--fs-14); }
  .table td::before { content: attr(data-label); font-weight: 700; color: var(--ink-soft); text-align: left; flex: none; white-space: nowrap; }
  .table td:empty { display: none; }
  .table td .chip { white-space: nowrap; }
  .bottom-nav.show { display: flex; }
  .main { padding-bottom: 66px; }   /* 바텀 내비 여백 */
}

/* 입주민 모바일 바텀 내비게이션 */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-modal) - 1); display: none; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(0,0,0,.05); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; padding: 7px 0 8px; font-size: 11px; font-weight: 600; color: var(--ink-mute); min-height: 54px; }
.bottom-nav button .bi { font-size: 20px; line-height: 1; }
.bottom-nav button.active { color: var(--brand-strong); }
.nav-btn:hover { background: var(--line-soft); }
.nav-btn.active { color: var(--brand-strong); background: var(--brand); color: #fff; }
.nav-groups { border-bottom: 1px solid var(--line-soft); }
.nav-groups .nav-btn { font-weight: 700; }
.nav-groups .nav-btn.active { background: var(--brand-strong); }
.app-nav .nav-inner + .nav-inner { padding-top: 4px; }
.nav-btn .dot { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 5px; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; }
.app-footer { border-top: 1px solid var(--line); background: var(--surface); font-size: var(--fs-12); color: var(--ink-mute); }
.app-footer .wrap { display: flex; justify-content: space-between; padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.mute { color: var(--ink-mute); }

/* page header (표준 블록) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.page-title { font-size: var(--fs-20); font-weight: 800; margin: 0; white-space: nowrap; }

/* card */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: var(--sp-4); }

/* KPI tiles (표준 블록) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-4); }
/* 큰 금액(7~9자리)이 좁은 카드 폭에서 2줄로 줄바꿈되던 문제 → 뷰포트 반응형 축소 */
.stat-num { font-size: clamp(18px, 4.6vw, var(--fs-24)); font-weight: 900; color: var(--brand-strong); line-height: 1.1; }
.stat-label { font-size: var(--fs-13); color: var(--ink-soft); margin-top: var(--sp-1); font-weight: 600; }

/* filter bar — 자식 input/select의 전역 width:100%를 무력화하고 한 줄 가로배치.
   순서 규칙: 화면 순서를 DOM 순서와 일치시킨다(검색창 먼저 → select → 날짜 → 버튼).
   이전에는 검색창에 order:5가 걸려 DOM과 화면이 항상 뒤집혔다. */
.filter-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select { width: auto; }
.filter-bar input[type=search], .filter-bar input[type=text] { order: 0; flex: 1 1 240px; min-width: 160px; max-width: 360px; }
.filter-bar select { order: 1; flex: 0 1 170px; min-width: 120px; }
.filter-bar input[type=date], .filter-bar input[type=month] { order: 2; flex: 0 0 auto; }
/* '~' 같은 구분 텍스트는 order 미지정 시 기본 0 → select·날짜보다 앞으로 튄다 */
.filter-bar > .mute, .filter-bar > span { order: 2; flex: 0 0 auto; }
.filter-bar .fb-actions { order: 3; display: flex; gap: var(--sp-2); }
.filter-bar .fb-spacer { order: 8; flex: 1 1 auto; }
/* 검색 필드 안 돋보기 아이콘 */
.filter-bar .fb-search { order: 0; position: relative; flex: 1 1 240px; max-width: 360px; }
.filter-bar .fb-search input { width: 100%; max-width: none; padding-left: 38px; }
.filter-bar .fb-search::before {
  content: "🔎"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-14); opacity: .55; pointer-events: none;
}
@media (max-width: 640px) {
  /* 검색창만 풀폭 한 줄, 짧은 select/날짜는 2개씩 나란히(연·월, 유형·상태 등) */
  .filter-bar .fb-search,
  .filter-bar input[type=search], .filter-bar input[type=text] { flex: 1 1 100%; width: 100%; max-width: none; }
  .filter-bar select,
  .filter-bar input[type=date], .filter-bar input[type=month] { flex: 1 1 calc(50% - var(--sp-2)); min-width: 0; width: auto; }
}

/* forms */
.form-row { margin-bottom: var(--sp-3); }
.form-row label { display: block; font-size: var(--fs-13); font-weight: 700; color: var(--ink-soft); margin-bottom: var(--sp-1); }
.req { color: var(--danger); }
/* 폼 컨트롤 — 타입 화이트리스트가 아니라 '제외 목록'.
   date·number·url·month·time 등이 스타일에서 빠져 네이티브 위젯으로 노출되던 문제를 막고,
   새 input 타입을 써도 자동으로 같은 모양이 되도록 한다. */
/* :where() 로 특이도 0 고정 — 컴포넌트/서식 스코프 규칙이 항상 이기도록 한다.
   (이전: :not() 10개가 특이도를 (0,10,1)로 올려 모든 input 개별 스타일을 덮어썼음.
    셀렉터 리스트는 각 셀렉터마다 특이도가 따로 계산되므로 select/textarea만 정상 동작했다.) */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden])),
select, textarea {
  width: 100%; padding: 11px 13px; font-size: var(--fs-15); line-height: 1.35; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(44,159,93,.15); }

/* 네이티브 위젯이 붙는 타입은 높이를 텍스트 입력과 맞춘다 */
input[type=date], input[type=month], input[type=time], input[type=datetime-local], select {
  min-height: 46px; -webkit-appearance: none; appearance: none;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* 숫자 입력: 스핀버튼 제거 + 우측 정렬(관리비·검침 가독성) */
input[type=number] { -moz-appearance: textfield; text-align: right; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* appearance:none 으로 사라진 select 화살표 복구 */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234B5563' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
input:disabled, select:disabled, textarea:disabled { background: var(--line-soft); color: var(--ink-mute); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--ink-mute); }

/* ── 문서형(인쇄 A4 원본형상) 서식 안의 입력은 '셀 그 자체'다.
   앱 폼 스킨(테두리·패딩·최소높이·라운드)을 전부 벗기고,
   각 서식의 .xi/.gi/.mi/.ins-inp 규칙이 그 위에 자기 모양을 그린다.
   위치 주의: 전역 input[type=date]{min-height:46px} 보다 반드시 뒤에 와야 이긴다. */
.doc-form :is(input, select, textarea),
.swf :is(input, select, textarea),
table.gen :is(input, select, textarea),
table.xl :is(input, select, textarea),
#insFormWrap :is(input, select, textarea),
#mtBody :is(input, select, textarea) {
  width: 100%;
  min-height: 0; height: auto;
  padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  font: inherit; color: inherit; line-height: inherit;
  -webkit-appearance: none; appearance: none;
}
/* 문서형 서식은 흰 종이·검은 괘선을 하드코딩하므로 네이티브 컨트롤도 라이트로 고정
   (OS 다크 모드에서 date 피커·select 드롭다운만 어둡게 섞이는 것을 막는다) */
.doc-form, .swf, table.gen, table.xl, #insFormWrap, #mtBody { color-scheme: light; }
/* 편집 모드에서만 아주 옅은 바닥선으로 '여기 입력 가능' 표시 (인쇄에는 안 나감).
   border 대신 inset box-shadow — 셀 폭·행높이(mm 계산)에 영향을 주지 않는다. */
.doc-form input:not([readonly]):not([disabled]),
.swf input.xi, table.gen input.gi, #mtBody input.mi, #insFormWrap .ins-inp {
  box-shadow: inset 0 -1px 0 rgba(44,159,93,.22);
}
@media print {
  .doc-form input, .swf input.xi, table.gen input.gi,
  #mtBody input.mi, #insFormWrap .ins-inp { box-shadow: none !important; }
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: start; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* 접두어가 붙는 입력(단축 URL 등) */
.input-prefix { display: flex; align-items: stretch; gap: 0; }
.input-prefix > .input-prefix-txt {
  flex: 0 0 auto; display: flex; align-items: center; white-space: nowrap;
  padding: 0 12px; font-size: var(--fs-13); color: var(--ink-mute); background: var(--line-soft);
  border: 1.5px solid var(--line); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-prefix > input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
@media (max-width: 480px) {
  .input-prefix { flex-direction: column; }
  .input-prefix > .input-prefix-txt {
    border-right: 1.5px solid var(--line); border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 6px 12px;
  }
  .input-prefix > input { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
}

/* 필드 힌트 / 오류 */
.field-hint { margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--ink-mute); line-height: 1.5; }
.field-err { margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--danger); font-weight: 600; }
.form-row.is-error input, .form-row.is-error select, .form-row.is-error textarea { border-color: var(--danger); }
.form-row.is-error input:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px;
  font-size: var(--fs-14); font-weight: 700; border-radius: var(--radius-sm); border: none; transition: background .15s, transform .08s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { background: var(--line-soft); color: var(--ink); }
.btn-ghost:hover { background: var(--line); }
.btn-outline { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn-danger { background: #fee2e2; color: var(--danger); }
.btn-danger:hover { background: #fecaca; }
.link { color: var(--brand-strong); text-decoration: none; border-bottom: 1px dashed currentColor; }
.link:hover { color: var(--brand); }
.stat-tile.clickable { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.stat-tile.clickable:hover { box-shadow: 0 2px 10px rgba(0,0,0,.09); transform: translateY(-1px); }

/* 일정 달력 보기 */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; }
.cal th { padding: 6px 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.cal td { border: 1px solid var(--line-soft); vertical-align: top; height: 88px; padding: 3px; overflow: hidden; }
.cal td.cal-out { background: var(--line-soft); }
.cal td.cal-today { background: color-mix(in srgb, var(--brand) 16%, transparent); outline: 2px solid var(--brand-strong); outline-offset: -2px; }
.cal .cal-day { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.cal .sun { color: #dc2626; }
.cal .sat { color: #2563eb; }
.cal .cal-ev { display: block; margin-top: 2px; padding: 1px 5px; font-size: 11px; line-height: 1.5; border-radius: 4px; background: var(--brand); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-sm { padding: 7px 12px; font-size: var(--fs-13); }
.btn-block { width: 100%; padding: 13px; }

/* table / list */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.table th { font-size: var(--fs-12); color: var(--ink-mute); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.table tbody tr:hover { background: var(--line-soft); }
.table.insg-t td.insg { font-weight: 700; text-align: center; background: var(--line-soft); vertical-align: middle; white-space: nowrap; border-right: 1px solid var(--line); }
.table.insg-t td.insa { font-weight: 700; text-align: center; background: var(--line); color: var(--ink); vertical-align: middle; writing-mode: vertical-rl; letter-spacing: 2px; white-space: nowrap; border-right: 1px solid var(--line); }
/* 3단(부위/항목/세부) 서식: 고정 레이아웃 — 긴 항목 텍스트가 세부문항 열을 짓누르지 않도록 */
.table.insg-fix { table-layout: fixed; width: 100%; }
.table.insg-fix td, .table.insg-fix th { word-break: break-all; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
.table.insg-fix td.insg { white-space: normal; word-break: break-all; font-size: 12px; line-height: 1.3; padding: 6px 8px; }
.table.insg-fix td.insl { text-align: left; line-height: 1.35; }
.table.insg-fix td.insa { letter-spacing: 1px; padding: 4px 0; }

/* status chip */
.chip { display: inline-block; padding: 3px 9px; font-size: var(--fs-12); font-weight: 700; border-radius: 999px; }
.chip-resident { background: #eaf6ef; color: #15603a; }
.chip-vacant { background: #fef3c7; color: #92400e; }
.chip-rented { background: #dbeafe; color: #1e40af; }
.chip-pending { background: #fef3c7; color: #92400e; }
.chip-progress { background: #dbeafe; color: #1e40af; }
.chip-completed { background: #eaf6ef; color: #15603a; }
.chip-rejected { background: #fee2e2; color: #991b1b; }
.chip-normal { background: #eaf6ef; color: #15603a; }
.chip-info { background: #dbeafe; color: #1e40af; }
.chip-urgent { background: #fee2e2; color: #991b1b; }

/* complaint / notice item cards (mobile-friendly list) */
.item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: var(--sp-2); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.item:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.item-head { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: flex-start; }
.item-title { font-weight: 700; font-size: var(--fs-15); }
.item-meta { font-size: var(--fs-12); color: var(--ink-mute); margin-top: 3px; display: flex; gap: var(--sp-3); flex-wrap: wrap; }
/* 카드 내 액션(삭제 등)은 정보보다 우선순위 낮게: 평소 흐리게, hover 시 선명 */
.item .seg { margin-top: 8px; }
.item .seg [data-del], .item [data-del] { opacity: .6; transition: opacity .15s; }
.item:hover [data-del], .item [data-del]:hover, .item [data-del]:focus { opacity: 1; }
.item-preview { font-size: var(--fs-13); color: var(--ink-soft); margin-top: var(--sp-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); cursor: zoom-in; }
.detail-label { font-size: var(--fs-12); font-weight: 800; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; margin: var(--sp-4) 0 var(--sp-1); }
.detail-value { white-space: pre-wrap; word-break: break-word; }

/* 입주안내문 서식(form) — 관리사무소 체크리스트 그리드 재현
   ※ 클래스명은 .chkform-* 로 고유화(앱 편집폼의 .form-grid=display:grid 와 충돌 방지) */
.chkform { color: var(--ink); }
.chkform-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-13); }
.chkform-grid th, .chkform-grid td { border: 1px solid var(--ink-soft); vertical-align: middle; padding: 8px 10px; }
.chkform-grid .chkform-grp { width: 84px; text-align: center; font-weight: 800; font-size: var(--fs-14); letter-spacing: .02em; background: var(--line-soft); line-height: 1.5; }
.chkform-grid .chkform-sub { width: 128px; text-align: center; font-weight: 700; color: var(--ink); background: var(--surface-2, var(--line-soft)); line-height: 1.5; }
.chkform-grid .chkform-items { text-align: left; vertical-align: top; padding: 8px 12px; }
.chkform-chk { display: flex; align-items: flex-start; gap: 7px; padding: 2px 0; line-height: 1.55; color: var(--ink); }
.chkform-chk + .chkform-chk { margin-top: 3px; }
.chkform-chk .chkform-cbx { flex: none; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-soft); }
.chkform-t { flex: 1; word-break: break-word; }
.chkform-mini-wrap { margin: 6px 0 4px; }
.chkform-mini { border-collapse: collapse; width: 100%; font-size: var(--fs-12); }
.chkform-mini th, .chkform-mini td { border: 1px solid var(--ink-soft); padding: 4px 7px; text-align: center; vertical-align: middle; }
.chkform-mini th { background: var(--line-soft); font-weight: 700; }
.chkform-note { border: 1px solid var(--ink-soft); border-top: none; padding: 4px 7px; font-size: var(--fs-12); font-weight: 600; }
.chkform-footer { text-align: center; font-weight: 800; letter-spacing: .12em; margin-top: 14px; font-size: var(--fs-15); }
@media (max-width: 640px) {
  .chkform-grid { table-layout: auto; font-size: var(--fs-12); }
  .chkform-grid .chkform-grp { width: 56px; padding: 6px 4px; }
  .chkform-grid .chkform-sub { width: 88px; padding: 6px 4px; }
}
.resp { background: var(--line-soft); border-left: 3px solid var(--brand); padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: var(--sp-2); }
.resp-meta { font-size: var(--fs-12); color: var(--ink-soft); font-weight: 700; margin-bottom: 3px; }
.seg { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

/* 서브탭(카드 내부 탭) */
.subtabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.subtab { appearance: none; border: none; background: none; cursor: pointer; font-family: inherit; font-size: var(--fs-14); font-weight: 700; color: var(--ink-mute); padding: 9px 14px; margin-bottom: -2px; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.subtab:hover { color: var(--ink); background: var(--line-soft); }
.subtab.active { color: var(--brand); border-bottom-color: var(--brand); }
.subtab-panel[hidden] { display: none; }

/* pagination */
.pager { display: flex; gap: var(--sp-1); justify-content: center; align-items: center; margin-top: var(--sp-4); flex-wrap: wrap; }
.pager button { min-width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); font-size: var(--fs-13); }
.pager button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .info { font-size: var(--fs-12); color: var(--ink-mute); margin: 0 var(--sp-2); }

/* empty / loading */
.empty { text-align: center; padding: 40px 20px; color: var(--ink-mute); }

/* login */
.login-card { max-width: 380px; margin: 6vh auto 0; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(31,41,55,.5); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4); backdrop-filter: blur(3px); }
/* 필드가 많은 모달에서 하단 버튼이 화면 밖으로 밀리던 문제 → 본문만 스크롤 */
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 480px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: calc(100dvh - var(--sp-8)); }
.modal-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; }
.modal-title { font-size: var(--fs-17); font-weight: 800; margin: 0; }
.modal-body { padding: var(--sp-5); flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
/* 모달 안의 form 이 flex 자식이 되어도 본문 스크롤 구조가 유지되도록 */
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal-close { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--ink-mute); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.modal-close:hover { background: var(--line-soft); color: var(--ink); }
.modal-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.modal-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); justify-content: flex-end;
  flex: 0 0 auto; position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* 유틸 — 마크업에서 쓰고 있었으나 규칙이 없던 것들 */
.c { text-align: center; }
.r { text-align: right; }
.sm { font-size: var(--fs-12); line-height: 1.5; }
/* 상태 칩 추가 변형 */
.chip-ok { background: #EAF6EF; color: #15603A; }
.chip-off { background: var(--line-soft); color: var(--ink-mute); }
.chip-exp { background: #FDECEC; color: #9B1C1C; }
/* 단축링크 액션 열 — 버튼 5개가 좁은 화면에서 줄바꿈되도록 */
.sl-acts { white-space: nowrap; }
.sl-acts .btn { margin: 2px 0; }
@media (max-width: 720px) { .sl-acts { white-space: normal; display: flex; flex-wrap: wrap; gap: var(--sp-1); } }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-size: var(--fs-14); font-weight: 600; box-shadow: var(--shadow-lg); }
.toast.success { background: var(--brand-strong); }
.toast.error { background: var(--danger); }

/* ===== 기전일지(기전주임) ===== */
.mech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 6px; }
/* 제목 줄바꿈 여부로 카드 높이가 갈리던 문제 → flex 세로 + 마지막 줄(칩) 바닥 고정 */
.mech-card { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.mech-card > :last-child { margin-top: auto; padding-top: 8px; }
.mech-card:not(.off):hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.mech-card.off { opacity: .55; cursor: not-allowed; }
.mech-card .mech-cat { font-size: 11px; color: var(--ink-mute); font-weight: 700; }
.mech-card .mech-name { font-size: 15px; font-weight: 700; margin: 4px 0 10px; color: var(--ink); }
.mech-card .mech-badge { font-size: 12px; color: var(--ink-mute); }
.mech-card .mech-badge.on { color: var(--brand-strong); font-weight: 700; }

/* 점검 달력 */
.fac-cal { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 640px; }
.fac-cal th { border: 1px solid var(--line); padding: 6px 4px; font-size: 12px; font-weight: 700; background: var(--line-soft); }
.fac-cal td { border: 1px solid var(--line); vertical-align: top; height: 92px; width: 14.28%; padding: 3px; }
.fac-cal td.fac-empty { background: var(--line-soft); }
.fac-cal td.fac-out { background: var(--line-soft); }
.fac-cal td.fac-out .fac-dnum { color: var(--ink-mute); opacity: .45; font-weight: 500; }
.fac-cal td.fac-today { background: #eef4ff; box-shadow: inset 0 0 0 2px var(--brand); }
.fac-cal .fac-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.fac-cal .fac-dnum { font-size: 12px; font-weight: 700; color: var(--ink-mute); }
.fac-cal .fac-duty { font-size: 11px; font-weight: 700; width: 18px; height: 18px; line-height: 15px; text-align: center; border: 1.5px solid var(--brand); border-radius: 50%; color: var(--brand); box-sizing: border-box; flex: 0 0 auto; }
.fac-cal .fac-duty.empty { border-style: dashed; border-color: var(--line); color: var(--ink-mute); }
.fac-cal .fac-duty.clk { cursor: pointer; }
.fac-cal .fac-duty.clk:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.fac-cal .fac-ev { font-size: 11px; line-height: 1.3; padding: 2px 5px; margin: 2px 0; border-radius: 4px; background: #eef; color: #2b3a8c; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; }
.fac-cal .fac-ev:hover { border-color: var(--brand); }
.fac-cal .fac-ev.done { background: #e8f5ec; color: #1a7f37; }
/* 날짜 옆 [+] 일정 등록 — 근무 배지(원형 +)와 헷갈리지 않게 사각. 평소엔 흐리게, 칸에 마우스를 올리면 선명하게 */
.fac-cal .fac-dl { display: inline-flex; align-items: center; gap: 4px; }
.fac-cal .fac-add { width: 18px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--brand); font-size: 13px; font-weight: 700; line-height: 15px; cursor: pointer; opacity: .3; transition: opacity .12s; }
.fac-cal td:hover .fac-add, .fac-cal .fac-add:focus-visible { opacity: 1; }
.fac-cal .fac-add:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (hover: none) { .fac-cal .fac-add { opacity: .7; } }   /* 터치 기기는 hover 가 없어 더 진하게 */
.fac-cal .fac-ev-extra { display: none; }
.fac-cal .fac-more { display: block; width: 100%; margin-top: 2px; padding: 2px 4px; border: 1px dashed var(--line); border-radius: 4px; background: none; color: var(--ink-soft); font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; }
.fac-cal .fac-more:hover { border-color: var(--brand); color: var(--brand); }
/* 상세보기 모달 — 칸 안과 달리 줄바꿈해 전체 제목을 보인다 */
.fac-cal.fac-day-list { min-width: 0; }
.fac-day-list .fac-ev { display: flex; justify-content: space-between; gap: 8px; white-space: normal; font-size: 13px; padding: 8px 10px; margin: 0 0 6px; }
.fac-day-list .fac-ev .mute { flex: 0 0 auto; font-size: 12px; }
/* 인쇄 — 조작 버튼은 빼고, 상세보기로 접힌 일정도 모두 출력 */
@media print {
  .no-print { display: none !important; }
  .fac-cal .fac-ev-extra { display: block !important; }
}
.sched-list { display: flex; flex-direction: column; gap: 8px; }
.sched-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.sched-row .sched-info { min-width: 0; }

/* 가로등 점·소등 — 월별 그래프(인라인 SVG) + 미니 달력 */
.sl-wrap { overflow-x: auto; }
.sl-svg { display: block; width: 100%; min-width: 720px; height: auto; }
.sl-grid { stroke: var(--line); stroke-width: 1; }
.sl-midline { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 4 3; }
.sl-yl { fill: var(--ink-mute); font-size: 10px; text-anchor: end; dominant-baseline: middle; }
.sl-xl { fill: var(--ink-mute); font-size: 10px; text-anchor: middle; }
.sl-xl.sun { fill: #c0392b; }
.sl-xtick { stroke: #c0392b; stroke-width: 1; }
.sl-band { fill: #4a5a8c; opacity: .85; }
.sl-sun { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.sl-today-col { fill: var(--brand); opacity: .1; }
.sl-hit rect { fill: transparent; }
.sl-hit:hover rect { fill: var(--brand); fill-opacity: .08; }
.sl-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.sl-legend i { display: inline-block; width: 14px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.sl-legend .sl-key-band { background: #4a5a8c; }
.sl-legend .sl-key-sun { height: 3px; background: var(--accent); }
.sl-legend .sl-key-mid { height: 0; border-top: 2px dashed var(--ink-mute); }
.sl-sum { cursor: pointer; font-weight: 700; font-size: var(--fs-14); color: var(--ink); }

.sl-cal { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 560px; }
.sl-cal th { border: 1px solid var(--line); padding: 5px 4px; font-size: 12px; font-weight: 700; background: var(--line-soft); }
.sl-cal td { border: 1px solid var(--line); vertical-align: top; height: 68px; width: 14.28%; padding: 3px 4px; }
.sl-cal td.sl-out { background: var(--line-soft); }
.sl-cal td.sl-out .sl-dnum { color: var(--ink-mute); opacity: .45; font-weight: 500; }
.sl-cal td.sl-today { background: #eef4ff; box-shadow: inset 0 0 0 2px var(--brand); }
.sl-cal .sl-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.sl-cal .sl-dnum { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.sl-cal .sl-dur { font-size: 10px; color: var(--ink-mute); }
.sl-cal .sl-r { font-size: 11px; line-height: 1.55; white-space: nowrap; color: var(--ink-soft); }
.sl-cal .sl-r b { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 3px; font-size: 10px; margin-right: 3px; }
.sl-cal .sl-off b { background: #fdf0d5; color: #8a5a00; }
.sl-cal .sl-on b { background: #e2e6f5; color: #35406e; }
.sl-c-sun { color: #c0392b; }
.sl-c-sat { color: #3457d5; }
tr.sl-tr-today > td { background: #eef4ff; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  tr.sl-tr-today > td { background: #1c2740; }
  .sl-band { fill: #7f8ec4; }
  .sl-legend .sl-key-band { background: #7f8ec4; }
  .sl-cal td.sl-today { background: #1c2740; }
  .sl-cal .sl-off b { background: #4a3a12; color: #e8c579; }
  .sl-cal .sl-on b { background: #2b3350; color: #b9c2e8; }
  .sl-xl.sun, .sl-c-sun { color: #ef7d6c; fill: #ef7d6c; }
  .sl-c-sat { color: #8ea4ee; }
}

/* 수배전반 폼 */
.sw-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 8px 0 4px; }
.sw-field { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sw-field label { font-weight: 700; color: var(--ink-mute); font-size: 12px; }
.sw-appr { gap: 4px; }
.sw-note { font-size: 12px; color: var(--ink-mute); background: var(--surface-2, #f4f6f4); border-radius: 6px; padding: 6px 10px; margin: 8px 0; }
.sw-note.warn { color: var(--danger); background: #fdf0f0; }
.sw-sec-t { font-weight: 800; font-size: 14px; margin: 16px 0 6px; color: var(--ink); border-left: 3px solid var(--brand); padding-left: 8px; }
.sw-tbl { border-collapse: collapse; width: 100%; }
.sw-tbl th, .sw-tbl td { border: 1px solid var(--line); padding: 2px 4px; text-align: center; font-size: 12px; }
.sw-tbl th { background: var(--surface-2, #eef2ee); font-weight: 700; font-size: 11px; }
.sw-tbl td.sw-h, .sw-tbl .sw-h { background: var(--surface-2, #f4f6f4); font-weight: 700; }
.sw-in { width: 100%; min-width: 48px; border: 1px solid var(--line); border-radius: 4px; padding: 3px 4px; font-size: 12px; text-align: center; background: var(--surface); color: var(--ink); }
.sw-in:focus { outline: none; border-color: var(--brand); }
.sw-in.sw-prev { background: #fffbe9; }
.sw-ro { display: inline-block; min-width: 40px; font-weight: 700; color: var(--brand-strong); }
.sw-carry { display: inline-block; min-width: 40px; color: var(--ink-mute); background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.03) 4px, rgba(0,0,0,.03) 8px); padding: 0 4px; border-radius: 3px; }
.sw-pow td { min-width: 52px; }
.sw-chk-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sw-chk-cat { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.sw-chk-h { font-weight: 700; font-size: 12px; color: var(--ink-mute); margin-bottom: 6px; }
.sw-chk { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; margin-bottom: 4px; font-size: 12px; cursor: pointer; background: var(--surface); }
.sw-chk span { color: var(--ink); }
.sw-chk b { font-weight: 800; padding: 0 6px; border-radius: 3px; }
.sw-chk.ok b { color: var(--brand-strong); }
.sw-chk.bad { border-color: var(--danger); }
.sw-chk.bad b { color: #fff; background: var(--danger); }

/* 수배전반 원본형상 그리드(입력·인쇄 공용) — 문서형(흰 배경·검은 괘선) */
.xl-wrap { overflow-x: auto; margin: 6px 0; }
table.xl { border-collapse: collapse; table-layout: fixed; background: #fff; color: #000; border: 1px solid #000; }
/* 테두리 전부 1px 균일 */
table.xl td { border: 1px solid #000; font-size: 11px; text-align: center; padding: 0 1px; overflow: hidden; line-height: 1.15; vertical-align: middle; }
table.xl td.foot { overflow: visible; white-space: nowrap; text-align: right; padding-right: 3px; }
/* 타이포 위계 — 제목/섹션헤더/라벨은 굵게, 데이터·점검문장은 일반(11px) */
.xl td.xl-title { font-size: 19px; font-weight: 800; letter-spacing: .04em; padding: 2px 1px; }
/* 제목·날짜줄은 표 밖 머리글처럼 괘선 없음. collapse에서 none은 인접 셀·표 외곽선에 지므로
   위·왼쪽·아래는 hidden(무조건 우선)으로 지우고, 오른쪽만 none으로 두어 결재란 좌측선은 남긴다. */
.xl td.xl-title, .xl td.xl-head { border-top: hidden; border-left: hidden; border-right: none; }
.xl td.xl-title { border-bottom: hidden; }   /* 제목-날짜줄 사이 */
.xl td.xl-head { border-bottom: none; }      /* 아래 본문 표의 상단선은 유지 */
.xl td.xl-head { text-align: left; padding-left: 4px; }
.xl td.xl-sec { font-size: 12.5px; font-weight: 700; }
.xl td.xl-lbl { font-weight: 700; }
.xl .hdln { font-weight: 700; font-size: 12.5px; }
.xl-cap { text-align: right; font-size: 11px; color: #000; padding: 3px 4px 0; background: #fff; }
.xl input.xi { width: 100%; box-sizing: border-box; border: none; background: transparent; font-size: 11px; text-align: center; padding: 1px 1px; color: #000; font-family: inherit; -moz-appearance: textfield; }
.xl input.xi::-webkit-outer-spin-button, .xl input.xi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xl input.xi:focus { outline: none; background: #e8f5ec; }
.xl input.xi.xp { background: #fffbe9; }
.xl .xc { color: #555; display: inline-block; min-width: 100%; }
.xl .xo { font-weight: 700; color: #0a6b3b; display: inline-block; min-width: 100%; }
.xl .xk { display: block; width: 100%; height: 100%; cursor: pointer; font-weight: 700; user-select: none; }
.xl .xk:hover { background: #e8f5ec; }

/* 발전기 운전일지(화면 편집 폼) */
table.gen { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 780px; background: #fff; color: #000; border: 1px solid #000; }
table.gen td { border: 1px solid #000; font-size: 12px; text-align: center; padding: 2px 3px; height: 28px; vertical-align: middle; word-break: break-all; line-height: 1.2; }
.gen td.gtitle { font-size: 19px; font-weight: 800; letter-spacing: .04em; }
.gen td.gmeta { text-align: left; font-weight: 600; padding-left: 6px; }
.gen td.gv { font-weight: 700; }
.gen td.gsec { font-weight: 700; background: #f2f2f2; }
.gen td.gl, .gen tr.gh2 td { font-weight: 600; background: #f7f7f7; }
.gen td.gl2 { text-align: left; font-weight: 400; background: #fff; padding-left: 6px; }
.gen td.gc0 { text-align: center; }
.gen input.gi, .gen select.gi, .gen textarea.gi { width: 100%; box-sizing: border-box; border: none; background: transparent; font-size: 12px; text-align: center; padding: 1px; color: #000; font-family: inherit; -moz-appearance: textfield; }
.gen textarea.gi { line-height: 1.4; }
.gen input.gi::-webkit-outer-spin-button, .gen input.gi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gen input.gi:focus, .gen select.gi:focus, .gen textarea.gi:focus { outline: none; background: #e8f5ec; }
.gen input.gi.gp { background: #fffbe9; }
.gen .gc { color: #555; display: inline-block; min-width: 100%; }
.gen .go { font-weight: 700; color: #0a6b3b; display: inline-block; min-width: 100%; }
.gen input.gi.gm { color: #0a6b3b; font-weight: 700; }
.gen input.gi.gm.on { background: #fff3c4; color: #8a5a00; box-shadow: inset 0 0 0 1.5px #e0b400; }
.gen .gk { display: inline-block; min-width: 100%; height: 100%; cursor: pointer; font-weight: 700; user-select: none; }
.gen .gk.bad { color: #c0392b; }
.gen .gk:hover { background: #e8f5ec; }
.gen td.gtblock { text-align: center; vertical-align: middle; }
.gen .gtblock .gtitle { font-size: 20px; font-weight: 800; letter-spacing: .06em; }
.gen .gtblock .gsub { font-size: 12.5px; font-weight: 600; margin-top: 10px; }
.gen td.gsig { height: 40px; }
.gen .gk2 { display: inline-block; min-width: 100%; height: 100%; cursor: pointer; font-weight: 700; user-select: none; }
.gen .gk2.on { color: #0a6b3b; }
.gen .gk2.bad.on { color: #c0392b; }
.gen .gk2:hover { background: #e8f5ec; }
.gen-foot { text-align: right; margin-top: 6px; font-size: 12px; color: #000; }

/* ==================== 단지정보 표 → 카드 ====================
   info_pages(format=table)를 첫 열 기준으로 묶어 카드로 표시.
   좁은 화면·현장 조회에서 가로 스크롤 없이 읽히도록 한다. */
.infocards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.infocard { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.infocard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: var(--line-soft);
  font-size: var(--fs-14); font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.infocard-head .ic-n { flex: none; font-size: var(--fs-12); font-weight: 600; color: var(--ink-mute); }
.infocard-body { padding: 4px 12px 8px; }
.ic-item { padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.ic-item:last-child { border-bottom: 0; }
.ic-t { font-size: var(--fs-14); font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.ic-line { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-13); line-height: 1.5; }
.ic-line .ic-k { flex: none; min-width: 42px; color: var(--ink-mute); font-weight: 600; }
.ic-line .ic-v { flex: 1; color: var(--ink); word-break: break-word; }
@media (max-width: 640px) { .infocards { grid-template-columns: 1fr; } }

/* ---------- 단지정보 본문 편집기(format=html) ----------
   편집기(TinyMCE)는 이 app.css 를 그대로 물려 쓴다(app.js: infInitEditor → contentCss).
   여기 규칙을 고치면 편집 화면과 실제 화면이 함께 바뀐다 — 한 벌만 관리한다. */
.ihtml { font-size: var(--fs-14); line-height: 1.7; color: var(--ink); word-break: break-word; }
.ihtml > :first-child { margin-top: 0; }
.ihtml > :last-child { margin-bottom: 0; }
.ihtml h1 { font-size: 1.5em; font-weight: 800; margin: 1em 0 .5em; }
.ihtml h2 { font-size: 1.25em; font-weight: 800; margin: 1.1em 0 .45em; padding-bottom: 4px; border-bottom: 2px solid var(--line); }
.ihtml h3 { font-size: 1.08em; font-weight: 700; margin: 1em 0 .4em; color: var(--ink); }
.ihtml p { margin: .5em 0; }
.ihtml ul, .ihtml ol { margin: .5em 0; padding-left: 1.4em; }
.ihtml li { margin: .25em 0; }
.ihtml img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.ihtml a { color: var(--primary); }
.ihtml hr { border: 0; border-top: 1px solid var(--line); margin: 1.1em 0; }
/* 표는 서식 드롭다운에서 .table 을 주지 않아도 읽히게 기본값을 준다 */
.ihtml table { width: 100%; border-collapse: collapse; margin: .6em 0; font-size: var(--fs-13); }
.ihtml th, .ihtml td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
.ihtml th { background: var(--line-soft); font-weight: 700; }
/* 강조 박스 — 놓치면 안 되는 안내(요금·금지사항 등) */
.ihtml .ih-alert {
  margin: .8em 0; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--line-soft); border-left: 4px solid var(--primary); font-weight: 600;
}
.ihtml .infocard-body p { margin: .35em 0; }

/* 인쇄(A4 세로) — 카드 2열 × 4줄이 1면에 들어가도록 압축.
   minmax(0,1fr) 필수: 1fr 은 최소폭이 auto 라 긴 내용이 인쇄영역을 넘긴다. */
.rep-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; align-items: start; }
.rep-card { border: 1px solid #999; border-radius: 3px; overflow: hidden; min-width: 0; break-inside: avoid; page-break-inside: avoid; }
.rep-card .rc-head { background: #eee; border-bottom: 1px solid #999; padding: 1.5mm 2.5mm; font-size: 10.5px; font-weight: 700; }
.rep-card .rc-body { padding: .8mm 2.5mm 1.4mm; }
.rep-card .rc-item { display: flex; gap: 2mm; padding: .7mm 0; border-bottom: 1px dotted #ddd; font-size: 8.6px; line-height: 1.35; }
.rep-card .rc-item:last-child { border-bottom: 0; }
.rep-card .rc-t { flex: none; width: 24mm; font-weight: 700; word-break: break-word; }
.rep-card .rc-v { flex: 1; min-width: 0; word-break: break-word; }
.rep-card .rc-v i { display: block; font-style: normal; color: #555; }
/* 묶음에 행이 하나뿐이면 소제목 없이 라벨:값 으로 */
.rep-card .rc-line { display: flex; gap: 2mm; font-size: 8.6px; line-height: 1.35; }
.rep-card .rc-line .rc-k { flex: none; width: 13mm; color: #555; font-weight: 600; }
.rep-card .rc-line .rc-v { flex: 1; min-width: 0; }

/* ---------- 시설 › 전광판 (ESP-01S LED) ---------- */
.led-cv { display: block; width: 100%; max-width: 640px; height: auto; aspect-ratio: 4 / 1; border-radius: 8px; background: #0d0f12; }
.led-notice { background: #fff7e6; border: 1px solid #f5c26b; color: #7a4a00; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.led-dev { border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); padding: 12px 14px; margin-bottom: 12px; }
.led-dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 16px; font-size: 13px; margin-top: 6px; }
.led-glyph-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 18px; align-items: start; }
.led-glyph-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; max-height: 60vh; overflow: auto; }
.led-glyph-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; font-family: inherit; }
.led-glyph-cell:hover { border-color: var(--brand); }
.led-glyph-cell span { font-size: 13px; }
.led-glyph-cell.edited { border-color: #f59e0b; background: #fffbeb; }
.led-glyph-cell.absent { border-style: dashed; color: var(--danger); }
.led-glyph-cell small { font-size: 10px; }
.led-glyph-editor { position: sticky; top: 10px; }
.led-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: 100%; max-width: 360px; aspect-ratio: 1; background: #000; padding: 6px; border-radius: 8px; touch-action: none; user-select: none; }
.led-cell { background: #2a2e35; border-radius: 4px; cursor: crosshair; }
.led-cell.on { background: #ffb000; box-shadow: 0 0 6px #ffb000aa; }
@media screen and (max-width: 720px) {
  .led-glyph-wrap { grid-template-columns: 1fr; }
  .led-glyph-editor { position: static; }
}
/* 전광판 — 속도·밝기·색 입력, 글자별 색 칠하기, 빠른 조절 */
.led-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.led-sw { width: 28px; height: 28px; border-radius: 6px; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.led-sw.on { outline: 3px solid var(--brand); outline-offset: 1px; }
.led-sw-def { width: auto; padding: 0 8px; background: #23272e; color: #ddd; font-size: 12px; font-weight: 700; }
.led-sw-free { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
.led-sw-free input[type=color] { width: 32px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.led-paint { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.led-paint-chars { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: #0d0f12; border-radius: 6px; margin-bottom: 8px; }
.led-pc { min-width: 30px; height: 34px; border: 1px solid #333; border-radius: 5px; background: #1b1e24; color: #c8c8c8; font-size: 17px; font-weight: 700; cursor: pointer; font-family: inherit; }
.led-pc:hover { border-color: #888; }
.led-paint-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.led-text-chip { display: inline-block; background: #111; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.led-quick { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; margin-top: 8px; padding: 8px 10px; background: var(--line-soft, #f5f6f8); border-radius: 8px; font-size: 12.5px; }
.led-quick label { display: flex; flex-direction: column; gap: 2px; min-width: 140px; flex: 1 1 140px; }
.led-quick input[type=range] { width: 100%; }
.led-resume { display: flex; flex-wrap: wrap; gap: 8px; }
.led-resume-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; cursor: pointer; }
.led-resume-opt:has(input:checked) { border-color: var(--brand); background: #eaf6ef; }
.led-resume-opt.disabled { opacity: .45; cursor: not-allowed; }
/* ---------- 시설 › 작업일정 (기간 막대 달력) ---------- */
.wj-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.wj-ym { min-width: 96px; text-align: center; font-size: var(--fs-17); }
.wj-sp { flex: 1; }
.wj-filter { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line); font-size: 12px; }
.wj-filter .mute { margin-right: 2px; }
.wj-fchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink-soft); }
.wj-fchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.wj-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
/* 상태 색 — 흰 글자 대비 4.5:1 이상 */
.wj-planned { --wj: #64748b; }
.wj-progress { --wj: #3b5bdb; }
.wj-done { --wj: #2b8a3e; }
.wj-hold { --wj: #c2410c; }
.wj-dot.wj-planned, .wj-dot.wj-progress, .wj-dot.wj-done, .wj-dot.wj-hold { background: var(--wj); }
.wj-fchip.on .wj-dot { box-shadow: 0 0 0 1.5px #fff; }

.wj-cal { min-width: 680px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.wj-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--line-soft); border-bottom: 2px solid var(--line); }
.wj-head div { text-align: center; padding: 7px 4px; font-size: 12px; font-weight: 700; }
.wj-head .sun, .wj-day.sun .wj-dnum { color: #c0392b; }
.wj-head .sat, .wj-day.sat .wj-dnum { color: #3457d5; }
.wj-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; min-height: 108px; border-top: 1px solid var(--line); padding-bottom: 3px; }
.wj-head + .wj-week { border-top: 0; }
.wj-day { border-left: 1px solid var(--line); padding: 4px 6px; user-select: none; min-width: 0; }
.wj-day:first-child { border-left: 0; }
.wj-day.out { background: var(--line-soft); }
.wj-day.out .wj-dnum { opacity: .4; }
.wj-day.today { box-shadow: inset 0 0 0 2px var(--brand); }
.wj-day.sel { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.wj-dtop { display: flex; align-items: center; justify-content: space-between; height: 18px; }
.wj-dnum { font-size: 12px; font-weight: 700; }
.wj-add { width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--brand); font-size: 14px; font-weight: 700; line-height: 17px; cursor: pointer; opacity: .3; transition: opacity .12s; }
.wj-day:hover .wj-add, .wj-add:focus-visible { opacity: 1; }
.wj-add:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (hover: none) { .wj-add { opacity: .7; } }
.wj-ev { position: relative; z-index: 1; align-self: center; margin: 0 4px; padding: 0 8px; height: 22px; line-height: 22px; border-radius: 4px; background: var(--wj); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.wj-ev:hover { filter: brightness(1.12); }
.wj-ev.cl { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wj-ev.cr { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wj-ev.late { box-shadow: inset 4px 0 0 #e03131; }
.wj-ev.wj-done { opacity: .85; }
.wj-more { position: relative; z-index: 1; align-self: start; border: 0; background: none; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--ink-soft); text-align: left; cursor: pointer; }
.wj-more:hover { color: var(--brand); }
/* 하루 작업 목록(더보기) */
.wj-daylist { display: flex; flex-direction: column; gap: 6px; }
.wj-daylist .wj-ev { height: auto; line-height: 1.35; padding: 7px 10px; margin: 0; white-space: normal; font-size: 13px; }
.wj-daylist .wj-ev small { display: block; font-weight: 500; opacity: .9; }
/* 이번 달 목록 */
.wj-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wj-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--line); }
.wj-row:first-child { border-top: 0; }
.wj-row.late .wj-info b { color: var(--danger); }
.wj-info { flex: 1; min-width: 0; }
.wj-info .mute { font-size: 12px; }
.wj-st { width: auto; flex: none; border: 0; border-radius: 999px; padding: 4px 8px; background: var(--wj); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.wj-st option { background: var(--surface); color: var(--ink); }
/* 등록 창 — 상태 선택 */
.wj-stsel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wj-stsel label { margin: 0; }
.wj-stsel input { position: absolute; opacity: 0; pointer-events: none; }
.wj-stsel span { display: block; text-align: center; padding: 8px 4px; border: 1.5px solid var(--wj); border-radius: var(--radius-sm); color: var(--wj); font-weight: 700; font-size: 13px; cursor: pointer; }
.wj-stsel input:checked + span { background: var(--wj); color: #fff; }
.wj-stsel input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.wj-quick { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); margin: -4px 0 10px; }
.wj-quick button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--ink); }
.wj-quick button:hover { border-color: var(--brand); color: var(--brand); }
.wj-quick .mute { margin-left: 6px; }
/* 인쇄본 */
.wj-print { min-width: 0; border-color: #000; }
.wj-print .wj-week { min-height: 24mm; border-color: #000; }
.wj-print .wj-day { border-color: #000; }
.wj-print .wj-head { border-color: #000; }
.wj-print .wj-ev { font-size: 10px; height: 16px; line-height: 16px; }
@media screen and (max-width: 720px) {
  .wj-filter { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
}

/* ---------- 시설 › 연락처 (.ct-*) ---------- */
.ct-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ct-search { flex: 1 1 320px; min-width: 220px; }
.ct-search input { width: 100%; padding: 9px 12px; font-size: 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.ct-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(44,159,93,.15); }
.ct-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-flags .wj-fchip:disabled { cursor: default; opacity: .75; }
.ct-steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ct-chips.sub { padding-left: 4px; }
.ct-step { color: var(--ink-mute); font-weight: 700; margin-right: 2px; }
.ct-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ct-chip b { color: var(--brand-strong); margin-left: 2px; }
.ct-chip.zero { opacity: .45; }
.ct-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ct-chip.on b { color: #fff; }
.ct-chips.sub .ct-chip { font-size: 12px; padding: 4px 10px; }
.ct-catmemo { font-size: 13px; color: var(--ink-soft); background: var(--line-soft); border-left: 3px solid var(--info); border-radius: 6px; padding: 7px 10px; margin-bottom: 8px; }
.ct-count { font-size: 13px; font-weight: 700; margin: 4px 0 6px; }
.ct-reset { border: 0; background: none; color: var(--info); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0 2px; }
.ct-group { font-size: 12.5px; color: var(--ink-soft); padding: 12px 4px 5px; border-bottom: 2px solid var(--line); }
.ct-group b { color: var(--ink); font-size: 13.5px; }
.ct-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.ct-row:hover { background: var(--line-soft); }
.ct-row.arch { opacity: .55; }
.ct-star { border: 0; background: none; font-size: 19px; line-height: 1; color: var(--ink-mute); cursor: pointer; padding: 2px; }
.ct-star.on { color: var(--accent); }
.ct-star:disabled { cursor: pointer; pointer-events: none; }
.ct-main { min-width: 0; }
.ct-name { font-size: 14.5px; overflow-wrap: anywhere; }
.ct-work { color: var(--ink-soft); font-size: 13px; margin-left: 4px; }
.ct-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.ct-sp + .ct-sp::before { content: '· '; color: var(--ink-mute); }
.ct-memo { color: var(--ink-mute); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-row mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
.ct-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-right: 5px; vertical-align: 1px; }
.ct-badge.emg { background: #fee2e2; color: #b91c1c; }
.ct-badge.chk { background: #fef3c7; color: #92400e; }
.ct-badge.arch { background: var(--line); color: var(--ink-soft); }
.ct-phones { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: flex-end; max-width: 430px; }
.ct-tel { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--brand-strong); text-decoration: none; }
a.ct-tel:hover { border-color: var(--brand); background: rgba(44,159,93,.08); }
.ct-tel.fax { color: var(--ink-soft); }
/* 상세 */
.ct-dl { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.ct-dl > span { color: var(--ink-mute); font-size: 12.5px; font-weight: 700; padding-top: 2px; }
.ct-pn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ct-memofull { white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; margin-top: 4px; }
.ct-checks label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
/* 분류 관리 */
.ct-ctree { display: flex; flex-direction: column; gap: 8px; }
.ct-ctop { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px; }
.ct-cline { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.ct-cline > b, .ct-cline > span:first-child { flex: 1; min-width: 0; }
.ct-cline.sub { padding-left: 16px; font-size: 13px; border-top: 1px dashed var(--line-soft); }
.ct-cbtn { display: inline-flex; gap: 2px; }
.ct-cbtn button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 5px; font-size: 12px; padding: 2px 7px; cursor: pointer; }
.ct-cbtn button.danger { color: var(--danger); }
.ct-cform { display: flex; flex-direction: column; gap: 8px; background: var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.ct-cform label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; color: var(--ink-soft); }
.ct-cform input, .ct-cform select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 14px; }
.ct-cform > span { text-align: right; }
@media (prefers-color-scheme: dark) {
  .ct-row mark { background: #6b5310; }
  .ct-badge.emg { background: #4c1d1d; color: #fca5a5; }
  .ct-badge.chk { background: #4a3a12; color: #fcd34d; }
}
@media (max-width: 640px) {
  .ct-row { grid-template-columns: 28px minmax(0, 1fr); }
  .ct-phones { grid-column: 2; justify-content: flex-start; max-width: none; }
  .ct-tel { font-size: 14.5px; padding: 6px 10px; }
  .ct-memo { max-width: 100%; }
  .ct-dl { grid-template-columns: 70px 1fr; }
}

/* ---------- 시설 › 기전업무 (탭 → 페이지) ---------- */
.tw-cnt { font-size: 11px; font-weight: 600; color: var(--ink-mute); background: var(--line-soft); border-radius: 9px; padding: 1px 6px; margin-left: 2px; }
.subtab.active .tw-cnt { color: var(--brand); }
.tw-addtab { color: var(--brand); font-weight: 600; }
.tw-tabtools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; margin: -4px 0 10px; }
.tw-tabtools > span { margin-right: 4px; }
.tw-split { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.tw-item { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
  padding: 9px 11px; margin-bottom: 6px; cursor: pointer; font: inherit; }
.tw-item:hover { border-color: var(--brand); }
.tw-item.on { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); background: var(--line-soft); }
.tw-item b { font-size: 14px; display: block; }
.tw-sum { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.tw-tag { display: inline-block; font-size: 11px; color: var(--brand); border: 1px solid var(--brand); border-radius: 9px; padding: 0 6px; margin-top: 4px; }
/* 본문은 인쇄물과 같은 흰 종이 위에 보인다(man-body 서식이 밝은 배경 기준) */
.tw-doc { border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #222; padding: 16px 18px; }
.tw-doc-head { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; border-bottom: 2px solid #263238; padding-bottom: 8px; margin-bottom: 14px; }
.tw-doc-head h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.tw-doc .mute { color: #607d8b; }
@media screen and (max-width: 820px) {
  .tw-split { grid-template-columns: minmax(0, 1fr); }
  .tw-doc { padding: 12px; }
}

/* ---------- 시설 › PIT·휀룸 ---------- */
.px-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.px-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 11px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.px-card:hover, .px-card:focus-visible { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(44,159,93,.12); }
.px-card.arch { opacity: .55; }
.px-card mark, .px-hits mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
.px-ct { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.px-nm { font-size: 16px; letter-spacing: -.01em; margin-right: 2px; }
.px-kind { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; background: var(--line-soft); color: var(--ink-soft); }
.px-kind.pit { background: #e0f2fe; color: #075985; }
.px-kind.fan { background: #ede9fe; color: #5b21b6; }
.px-alias { font-size: 13px; font-weight: 700; color: var(--brand-strong); }
.px-loc { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.px-use { font-size: 12.5px; color: var(--ink-mute); overflow-wrap: anywhere; }
.px-caution { font-size: 12.5px; font-weight: 700; color: #b91c1c; }
.px-caution.big { font-size: 14px; background: #fee2e2; border-radius: 6px; padding: 7px 10px; margin-bottom: 8px; }
.px-hits { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; background: var(--line-soft); border-radius: 6px; padding: 5px 8px; }
.px-hits small { color: var(--ink-mute); }
.px-cnt { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.px-st { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.px-st.ok { background: #dcfce7; color: #166534; }
.px-st.chk { background: #fef3c7; color: #92400e; }
.px-st.bad { background: #fee2e2; color: #b91c1c; }
.px-st.in { background: #e0f2fe; color: #075985; }
.px-st.out { background: var(--line); color: var(--ink-mute); }
.px-dhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.px-dtitle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.px-dtitle .page-title { margin: 0; }
.px-dbtn { display: flex; gap: 6px; }
.px-info { margin-bottom: 10px; }
.px-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--line); margin: 6px 0 10px; scrollbar-width: none; }
.px-tab { flex: none; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 700; padding: 9px 12px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.px-tab b { font-size: 12px; color: var(--ink-mute); margin-left: 2px; }
.px-tab.on { color: var(--brand-strong); border-bottom-color: var(--brand); }
.px-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.px-item { position: relative; border-bottom: 1px solid var(--line-soft); padding: 10px 4px; cursor: pointer; min-height: 44px; }
.px-item:hover { background: var(--line-soft); }
.px-item.out { opacity: .6; }
.px-iname { font-size: 14.5px; overflow-wrap: anywhere; padding-right: 86px; }
.px-qty { margin-left: 5px; font-weight: 700; color: var(--brand-strong); }
.px-spec { font-size: 12.5px; color: var(--ink-mute); }
.px-imeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; margin-top: 3px; }
.px-fix { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.px-imemo { font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 3px; }
.px-out { position: absolute; top: 8px; right: 4px; }
.px-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 4px 0; margin-right: 10px; }
.px-upbtn { cursor: pointer; }
.px-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.px-ph { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; padding: 0; background: var(--line-soft); cursor: pointer; aspect-ratio: 1; display: block; }
.px-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-perm { position: absolute; top: 4px; left: 4px; background: rgba(255,255,255,.9); border-radius: 50%; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 13px; }
.px-cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: 11.5px; padding: 12px 6px 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-cap:empty { display: none; }
.px-phmodal { max-width: 760px; }
.px-phbig { width: 100%; max-height: 62vh; object-fit: contain; background: #111; border-radius: 6px; display: block; }
.px-logs { font-size: 13px; }
.px-log { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line-soft); }
.px-ld { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) {
  .px-card mark, .px-hits mark { background: #6b5310; }
  .px-kind.pit, .px-st.in { background: #0c3a52; color: #7dd3fc; }
  .px-kind.fan { background: #2e1f5e; color: #c4b5fd; }
  .px-st.ok { background: #14432a; color: #86efac; }
  .px-st.chk { background: #4a3a12; color: #fcd34d; }
  .px-st.bad, .px-caution.big { background: #4c1d1d; color: #fca5a5; }
  .px-caution { color: #f87171; }
}
@media screen and (max-width: 640px) {
  .px-grid { grid-template-columns: minmax(0, 1fr); }
  .px-dbtn { width: 100%; }
  .px-dbtn .btn { flex: 1; }
  .px-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .px-log { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  /* 탭 4개를 한 줄에 균등 배치 — 가로 스크롤로 [이력]이 숨지 않게 */
  .px-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: visible; }
  .px-tab { padding: 8px 2px; font-size: 12.5px; line-height: 1.3; text-align: center; }
  .px-tab b { display: block; margin: 0; }
}

/* ---------- 입주민 › 소독 신청(/d) — 휴대폰·어르신 기준: 큰 글자, 48px 터치, 한 화면 한 가지 일 ---------- */
.dzr { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.dzr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; }
.dzr-h { font-size: 17px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.02em; }
.dzr-hero { border-radius: 18px; padding: 20px 18px 16px; color: #fff; background: linear-gradient(135deg, #1f7a47 0%, #2C9F5D 100%); box-shadow: 0 6px 18px rgba(31,122,71,.25); }
.dzr-hero.regular { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); box-shadow: 0 6px 18px rgba(29,78,216,.22); }
.dzr-hero.request { background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%); box-shadow: 0 6px 18px rgba(109,40,217,.22); }
.dzr-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dzr-kind { background: rgba(255,255,255,.2); border-radius: 99px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; }
.dzr-pill { border-radius: 99px; padding: 4px 11px; font-size: 12.5px; font-weight: 800; background: #fff; color: #1f7a47; }
.dzr-pill.urgent { color: #c2410c; } .dzr-pill.soon { color: #1d4ed8; } .dzr-pill.closed, .dzr-pill.off { color: #475569; }
.dzr-title { font-size: 22px; font-weight: 800; margin: 12px 0 10px; line-height: 1.3; letter-spacing: -.03em; color: #fff; word-break: keep-all; }
.dzr-when { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; }
.dzr-wi { font-size: 24px; }
.dzr-when b { display: block; font-size: 19px; letter-spacing: -.02em; }
.dzr-when span { display: block; font-size: 15px; font-weight: 600; opacity: .95; }
.dzr-target { font-size: 13.5px; margin-top: 8px; opacity: .9; }
.dzr-deadline { margin-top: 10px; font-size: 14px; font-weight: 700; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.25); }
.dzr-deadline.urgent { color: #fde68a; }
.dzr-notice { font-size: 15px; line-height: 1.7; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; position: relative; }
.dzr-notice p { margin: 0 0 8px; }
.dzr-notice ul, .dzr-notice ol { margin: 0 0 8px; padding-left: 20px; }
.dzr-notice li { margin-bottom: 4px; }
.dzr-notice img { max-width: 100%; height: auto; border-radius: 8px; }
.dzr-notice img[alt="소독 신청 QR"] { display: none; }  /* 이미 이 화면에 들어와 있으므로 QR 은 숨긴다 */
.dzr-notice table { border-collapse: collapse; width: 100%; font-size: 14px; }
.dzr-notice th, .dzr-notice td { border: 1px solid var(--line); padding: 5px 8px; }
.dzr-notice .dz-hi { color: #c53030; font-weight: 800; }
.dzr-notice.clamp { max-height: 190px; overflow: hidden; }
.dzr-notice.clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--surface)); }
.dzr-more { display: block; width: 100%; margin-top: 6px; background: var(--line-soft); border: 0; border-radius: 10px; padding: 11px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.dzr-step { display: flex; gap: 12px; padding: 4px 0 16px; }
.dzr-sn { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.dzr-sb { flex: 1; min-width: 0; }
.dzr-lbl { font-size: 15px; font-weight: 800; margin: 2px 0 8px; color: var(--ink); }
.dzr-lbl small { font-weight: 500; font-size: 12.5px; color: var(--ink-mute); margin-left: 4px; }
.dzr-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.dzr-in { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 12px; min-height: 54px; cursor: text; }
.dzr-in:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(44,159,93,.15); }
.dzr-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 20px; font-weight: 700; padding: 0; color: var(--ink); box-shadow: none; }
.dzr-in span { font-size: 16px; font-weight: 700; color: var(--ink-soft); margin-left: 4px; }
.dzr-input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 12px; font-size: 17px; background: var(--surface); color: var(--ink); font-family: inherit; }
.dzr-input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(44,159,93,.15); }
input.dzr-input[name="contact"] { font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.dzr-day + .dzr-day { margin-top: 10px; }
.dzr-dayh { font-size: 13.5px; font-weight: 800; color: var(--ink-soft); margin: 0 0 6px; }
.dzr-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 7px; }
.dzr-slot { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; min-height: 52px; padding: 6px 4px; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; font-variant-numeric: tabular-nums; }
.dzr-slot small { font-size: 12px; font-weight: 600; color: var(--brand-strong); margin-top: 2px; }
.dzr-slot.few small { color: #c2410c; }
.dzr-slot.full { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.dzr-slot.full small { color: var(--ink-mute); }
.dzr-slot.any small { color: var(--ink-mute); }
.dzr-slot.on { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(44,159,93,.3); }
.dzr-slot.on small { color: #fff; }
.dzr-slot.sm { min-height: 44px; font-size: 14px; font-weight: 700; }
.dzr-opt summary { cursor: pointer; font-size: 15px; font-weight: 800; padding: 6px 0; list-style: none; color: var(--ink); }
.dzr-opt summary::-webkit-details-marker { display: none; }
.dzr-opt summary::before { content: "＋ "; color: var(--brand); }
.dzr-opt[open] summary::before { content: "－ "; }
.dzr-opt summary small { font-weight: 500; color: var(--ink-mute); }
.dzr-phbtn { margin-top: 10px; cursor: pointer; }
.dzr-phs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.dzr-ph { position: relative; }
.dzr-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.dzr-ph button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; }
.dzr-agree { display: flex; gap: 10px; align-items: flex-start; background: var(--line-soft); border-radius: 12px; padding: 13px 12px; cursor: pointer; margin-top: 2px; }
.dzr-agree input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--brand); }
.dzr-agree b { font-size: 14.5px; display: block; }
.dzr-agree small { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; }
.dzr-err { color: var(--danger); font-size: 14px; font-weight: 700; margin-top: 8px; }
.dzr-err:empty { display: none; }
.dzr-sum { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; font-weight: 700; color: var(--ink-soft); background: var(--line-soft); border-radius: 10px; padding: 10px 12px; margin: 14px 0 10px; }
.dzr-submit { min-height: 56px; font-size: 18px !important; font-weight: 800 !important; border-radius: 14px !important; }
.dzr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dzr-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--brand-strong); font: inherit; font-size: 14.5px; font-weight: 700; padding: 10px 6px; cursor: pointer; text-decoration: none; }
.dzr-link.center { display: flex; margin: 8px auto 0; }
.dzr-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; }
.dzr-fine { text-align: center; font-size: 12.5px; color: var(--ink-mute); margin: 0; line-height: 1.6; }
.dzr-emptycard { text-align: center; padding: 28px 18px; }
.dzr-emptycard h3 { font-size: 18px; margin: 8px 0 6px; }
.dzr-emptycard p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 14px; line-height: 1.6; }
.dzr-big { font-size: 42px; }
.dzr-mine { border: 2px solid var(--brand); }
.dzr-mine-h { font-size: 18px; font-weight: 800; color: var(--brand-strong); margin-bottom: 10px; }
.dzr-mitem + .dzr-mitem { border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 12px; }
.dzr-mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dzr-mrow b { font-size: 20px; letter-spacing: -.02em; }
.dzr-no { font-size: 12.5px; color: var(--ink-mute); font-weight: 600; }
.dzr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 0; }
.dzr-steps span { text-align: center; font-size: 12.5px; font-weight: 700; padding: 7px 2px; border-radius: 8px; background: var(--line-soft); color: var(--ink-mute); }
.dzr-steps span.on { background: var(--brand); color: #fff; }
.dzr-steps span.bad { background: #f59e0b; color: #fff; }
.dzr-kv { display: flex; gap: 10px; padding: 7px 0; font-size: 14.5px; border-bottom: 1px solid var(--line-soft); }
.dzr-kv span { flex: none; width: 74px; color: var(--ink-mute); font-weight: 600; }
.dzr-kv b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dzr-mbtn { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.dzr-mbtn .btn { min-height: 46px; }
.dzr-cancel { color: var(--danger) !important; }
.dzr-success { text-align: center; }
.dzr-success h3 { font-size: 20px; margin: 10px 0 14px; }
.dzr-success .dzr-kv { text-align: left; }
.dzr-check { width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 36px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 4px auto 0; animation: dzrPop .35s ease-out; }
@keyframes dzrPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dzr-tip { text-align: left; background: #fff7e6; border-radius: 12px; padding: 12px 14px; margin: 14px 0 10px; font-size: 14px; color: #713f12; }
.dzr-tip ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.75; }
.dzr-success .btn-block { min-height: 52px; font-size: 17px; margin-top: 10px; }
.dzr-modal { max-width: 480px; }
@media (prefers-color-scheme: dark) {
  .dzr-tip { background: #3b2f12; color: #fde68a; }
}

/* ---------- 관리소 › 소독 신청 ---------- */
.dza-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.dza-tab { flex: none; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink-soft); padding: 9px 14px; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.dza-tab.on { color: var(--brand-strong); border-bottom-color: var(--brand); }
.dza-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dza-camp { border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; margin-bottom: 10px; background: var(--surface); }
.dza-camp.active { border: 2px solid var(--brand); box-shadow: 0 2px 10px rgba(44,159,93,.1); }
.dza-ch { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.dza-ct { font-size: 15.5px; font-weight: 800; overflow-wrap: anywhere; }
.dza-live { display: inline-block; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 99px; padding: 2px 8px; margin-right: 6px; vertical-align: 2px; }
.dza-cm { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.dza-state { flex: none; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 4px 10px; background: var(--line-soft); color: var(--ink-soft); }
.dza-state.open { background: #dcfce7; color: #166534; }
.dza-state.soon { background: #dbeafe; color: #1e40af; }
.dza-state.closed { background: #fef3c7; color: #92400e; }
.dza-stats { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; margin: 10px 0 8px; }
.dza-st { font-weight: 700; border-radius: 6px; padding: 2px 7px; background: var(--line-soft); color: var(--ink-soft); }
.dza-st.pending { background: #e0f2fe; color: #075985; }
.dza-st.scheduled { background: #dbeafe; color: #1e40af; }
.dza-st.done { background: #dcfce7; color: #166534; }
.dza-st.no_show { background: #fef3c7; color: #92400e; }
.dza-st.wk { background: #ede9fe; color: #5b21b6; }
.dza-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dza-del { color: var(--danger) !important; }
.dza-note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; line-height: 1.6; }
.dza-sec { font-size: 13px; font-weight: 800; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 12px 0 5px; margin-bottom: 8px; }
.dza-url { display: flex; gap: 6px; }
.dza-url input { flex: 1; min-width: 0; font-family: Consolas, monospace; font-size: 12.5px; }
.dza-wk { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0 6px; }
.dza-wk img { flex: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }
.dza-wk .btn { margin: 0 4px 6px 0; }
.dza-wkbtn { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }
.dza-rbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dza-camp-sel { flex: 1 1 240px; min-width: 0; }
.dza-q { flex: 1 1 220px; min-width: 0; padding: 8px 11px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: 14.5px; background: var(--surface); color: var(--ink); }
.dza-sort { width: auto; }
.dza-bulk { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.dza-bulk .btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.dza-bulk .dza-del { color: #fca5a5 !important; }
.dza-selall { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-soft); padding: 2px 4px 6px; cursor: pointer; }
.dza-req { display: flex; gap: 10px; align-items: flex-start; padding: 11px 6px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.dza-req:hover { background: var(--line-soft); }
.dza-req.canceled { opacity: .55; }
.dza-ck { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--brand); }
.dza-rmain { flex: 1; min-width: 0; }
.dza-raddr { font-size: 15.5px; font-weight: 800; }
.dza-rmeta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dza-rmemo { font-size: 12.5px; color: #92400e; margin-top: 3px; overflow-wrap: anywhere; }
.dza-rmemo.wk { color: #5b21b6; }
.dza-rst { flex: none; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 3px 8px; background: var(--line-soft); color: var(--ink-soft); white-space: nowrap; }
.dza-rst.pending { background: #e0f2fe; color: #075985; }
.dza-rst.scheduled { background: #dbeafe; color: #1e40af; }
.dza-rst.done { background: #dcfce7; color: #166534; }
.dza-rst.no_show { background: #fef3c7; color: #92400e; }
.dza-lbl { font-size: 13px; font-weight: 800; margin: 14px 0 6px; }
.dza-seg { display: grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.dza-seg button { border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 2px; cursor: pointer; }
.dza-seg button:last-child { border-right: 0; }
.dza-seg button.on { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) {
  .dza-note { background: #172554; border-color: #1e3a8a; color: #bfdbfe; }
  .dza-state.open, .dza-st.done, .dza-rst.done { background: #14432a; color: #86efac; }
  .dza-state.soon, .dza-st.scheduled, .dza-rst.scheduled, .dza-st.pending, .dza-rst.pending { background: #172554; color: #93c5fd; }
  .dza-state.closed, .dza-st.no_show, .dza-rst.no_show { background: #4a3a12; color: #fcd34d; }
}
@media screen and (max-width: 640px) {
  .dza-wk { flex-direction: column; align-items: center; text-align: center; }
  .dza-seg button { font-size: 12.5px; padding: 11px 0; }
  .dzr-title { font-size: 21px; }
}
.dza-warn { background: #fef3c7; color: #92400e; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; margin: 0 0 8px; line-height: 1.5; }
@media (prefers-color-scheme: dark) { .dza-warn { background: #4a3a12; color: #fcd34d; } }

/* ---------- 시설 › 무단투기 CCTV (app.js viewCctv·ccOpen·viewCctvLinks) ---------- */
.cc-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-q { width: 240px; max-width: 100%; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.cc-card { display: flex; gap: 12px; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px; cursor: pointer; color: var(--ink); font: inherit; min-width: 0; }
.cc-card:hover, .cc-card:focus-visible { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(44,159,93,.12); }
.cc-card.requested { border-left-color: var(--danger); } .cc-card.checking { border-left-color: var(--warning); }
.cc-card.found { border-left-color: var(--success); } .cc-card.canceled { opacity: .55; }
.cc-th { position: relative; flex: none; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--line-soft); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.cc-th img { width: 100%; height: 100%; object-fit: cover; }
.cc-th i { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.65); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 5px; }
.cc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cc-h { display: flex; gap: 6px; align-items: center; } .cc-h b { flex: 1; font-size: 15px; }
.cc-when { font-size: 14px; font-weight: 600; }
.cc-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-res { font-size: 13px; font-weight: 700; color: var(--success); }
.cc-modal { max-width: 1040px; width: 96vw; }
.cc-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; }
.cc-detail h4 { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.cc-req { background: var(--line-soft); border-radius: 10px; padding: 14px; }
.cc-big { font-size: 18px; font-weight: 800; margin-bottom: 8px; line-height: 1.4; }
.cc-dl { display: grid; grid-template-columns: 72px 1fr; gap: 5px 8px; margin: 12px 0; font-size: 14px; }
.cc-dl dt { color: var(--ink-mute); font-weight: 600; } .cc-dl dd { margin: 0; }
.cc-phs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cc-phs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: var(--surface); }
.cc-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cc-seg button { border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 10px 0; font: inherit; font-weight: 700; cursor: pointer; }
.cc-seg button.on[data-s="checking"] { border-color: var(--warning); background: rgba(245,158,11,.12); }
.cc-seg button.on[data-s="found"] { border-color: var(--success); background: rgba(22,163,74,.12); }
.cc-seg button.on[data-s="not_found"] { border-color: var(--ink-mute); background: var(--line-soft); }
.cc-lbl { font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.cc-lbl .mute { font-weight: 500; font-size: 12px; }
.cc-rph { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.cc-rph > div { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--line-soft); }
.cc-rph img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.cc-rph button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; }
.cc-add { aspect-ratio: 4/3; border: 2px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 24px; color: var(--ink-mute); cursor: pointer; }
.cc-add span { font-size: 12px; font-weight: 600; } .cc-add:hover { border-color: var(--brand); color: var(--brand); }
.cc-pick { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 6px; }
.cc-k { width: 34px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink-mute); }
.cc-floors { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.cc-floors .ct-chip { min-width: 38px; padding: 5px 0; text-align: center; }
.cc-loctxt { margin-top: 6px; font-size: 15px; }
#ccMemo { width: 100%; }
.cc-del { color: var(--danger); }
.cc-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-presets label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.cc-presets textarea { width: 100%; }
@media screen and (max-width: 820px) {
  .cc-detail, .cc-presets { grid-template-columns: 1fr; }
  .cc-grid { grid-template-columns: 1fr; }
  .cc-q { width: 100%; }
}

/* ===== 메뉴 3단 — 상세메뉴 탭 바(#tabnav, 2026-10-31) =====
   대메뉴(#navGroups) → 소메뉴(#subnav) → 상세메뉴(#tabnav). 탭 바는 #app 밖이라 화면을 다시 그려도 남는다. */
.tabnav { padding-top: var(--sp-4); }
.tabnav + .main { padding-top: var(--sp-3); }
.tabnav[hidden] + .main { padding-top: var(--sp-5); }
.tabnav-inner { margin-bottom: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabnav-inner::-webkit-scrollbar { display: none; }
.tabnav-inner .subtab { flex: 0 0 auto; white-space: nowrap; }
@media print { .tabnav { display: none !important; } }
/* 드로어 — 대메뉴 펼침 표시·상세 이름 힌트·메뉴 찾기 */
.dw-gbtn { display: flex; align-items: center; justify-content: space-between; }
.dw-caret { color: var(--ink-mute); font-size: 13px; font-weight: 600; }
.dw-mid small.dw-hint { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink-mute); white-space: normal; }
.dw-mid.active small.dw-hint, .dw-mid:hover small.dw-hint { color: rgba(255,255,255,.85); }
.dw-q { width: 100%; padding: 9px 12px; margin: 0 0 8px; font-size: var(--fs-14); border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.dw-q:focus { outline: none; border-color: var(--brand); }
.dw-qres { padding-bottom: 8px; }