/* 스마트 청소 관제 — 공통 스타일
   높이는 CSS 로만 잡는다(자바스크립트로 창 높이를 재면 스크롤바 생김/사라짐이 무한 렌더를 만든다). */

:root {
  --bg: #f1f5f9; --card: #fff; --line: #e2e8f0; --ink: #0f172a; --dim: #64748b;
  --brand: #4f46e5; --ok: #059669; --warn: #d97706; --bad: #e11d48;
  --top: 118px; /* 헤더 + 여백 */
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Malgun Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px; -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
a { color: var(--brand); }

/* ---- 높이 사슬: 창 바닥까지 ---- */
.fill-page { display: flex; flex-direction: column; height: calc(100vh - var(--top)); }
.fill-rest { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fill-pane { flex: 1; min-height: 0; overflow: auto; }
@media (max-width: 920px) {
  .fill-page { height: auto; }
  .fill-rest { display: block; }
  .fill-pane { max-height: 66vh; }
}

/* ---- 레이아웃 조각 ---- */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; }
.muted { color: var(--dim); }
.tiny { font-size: 11px; }
.small { font-size: 12px; }
.b { font-weight: 700; }

.btn { border: 1px solid var(--line); background: #fff; padding: 7px 12px; border-radius: 10px; font-weight: 700; font-size: 12px; }
.btn:hover { background: #f8fafc; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--dim); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.inp { border: 1px solid #cbd5e1; border-radius: 10px; padding: 7px 10px; font-size: 13px; background: #fff; }
.inp:focus { outline: 2px solid #c7d2fe; border-color: var(--brand); }

/* ---- 헤더 ---- */
header.top { background: #0f172a; color: #fff; position: sticky; top: 0; z-index: 40; }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
header.top select, header.top input { background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 9px; padding: 6px 8px; font-size: 12px; }
.nav { display: flex; gap: 3px; background: #1e293b; padding: 3px; border-radius: 11px; }
.nav button { background: transparent; border: 0; color: #cbd5e1; padding: 7px 11px; border-radius: 9px; font-size: 12px; font-weight: 700; }
.nav button.on { background: var(--brand); color: #fff; }

/* ---- 상태 배너 ---- */
.strip { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.strip.bad { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.strip.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.strip.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* ---- 요약 카드 ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.stat { padding: 12px 14px; }
.stat .k { font-size: 11px; font-weight: 700; color: var(--dim); }
.stat .v { font-size: 24px; font-weight: 800; margin-top: 2px; }

/* ---- 관제 히트맵 ---- */
.heat { border-collapse: separate; border-spacing: 0; width: 100%; }
.heat th, .heat td { padding: 0; }
.heat thead th {
  position: sticky; top: 0; z-index: 2; background: #f8fafc; border-bottom: 2px solid var(--line);
  font-size: 11px; font-weight: 800; color: #475569; padding: 7px 2px; text-align: center; min-width: 66px;
}
.heat thead th.corner { left: 0; z-index: 3; text-align: left; padding-left: 12px; min-width: 148px; }
.heat tbody td.name {
  position: sticky; left: 0; z-index: 1; background: #fff; border-right: 2px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 6px 12px; font-weight: 700; font-size: 13px; min-width: 148px;
}
.heat tbody td.cell { border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; padding: 2px; }
.cellbtn {
  width: 100%; min-height: 46px; border: 1px solid transparent; border-radius: 8px; padding: 3px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15;
}
.cellbtn .t { font-size: 12px; font-weight: 800; }
.cellbtn .s { font-size: 9px; opacity: .9; }
.c-done { background: #059669; color: #fff; }
.c-done:hover { background: #047857; }
.c-part { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.c-miss { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.c-wait { background: #f8fafc; color: #cbd5e1; }
.c-wait:hover { background: #f1f5f9; }
.dot-cam { font-size: 9px; }

/* ---- 월간 그리드 ---- */
.mon { border-collapse: collapse; width: 100%; font-size: 11px; }
.mon th, .mon td { border: 1px solid var(--line); padding: 3px 2px; text-align: center; }
.mon th { background: #f8fafc; font-weight: 800; }
.mon td.name { text-align: left; padding-left: 10px; font-weight: 700; background: #f8fafc; white-space: nowrap; }
.mon .box { border-radius: 4px; padding: 3px 0; font-weight: 800; }

/* ---- 페이지 바 (한 줄 고정) ---- */
.pager { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex-wrap: nowrap; padding: 6px 0; }
.pager button { border: 1px solid var(--line); background: #fff; border-radius: 7px; min-width: 26px; height: 26px; font-size: 11px; font-weight: 700; padding: 0 5px; }
.pager button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager button:disabled { opacity: .35; }
@media (max-width: 560px) { .pager button.far { display: none; } }

/* ---- 모달 ---- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; padding: 14px; z-index: 60; }
.modal.on { display: flex; }
.modal .box { background: #fff; border-radius: 16px; padding: 20px; width: 100%; max-width: 460px; max-height: 88vh; overflow: auto; }
.modal .box.wide { max-width: 720px; }

/* ---- 현장/공개 ---- */
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.hourgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hourbtn { border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 8px 2px; font-size: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hourbtn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.hourbtn.done { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.itemrow { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: #fff; }
.itemrow.on { background: #f0fdf4; border-color: #a7f3d0; }
.itemrow input { width: 21px; height: 21px; accent-color: #059669; }
.location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 7px; }
.location-choice {
  min-height: 46px; border: 1px solid #cbd5e1; background: #fff; border-radius: 12px;
  padding: 9px 12px; font-weight: 800; color: #334155;
}
.location-choice.on { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 4px 12px rgba(79,70,229,.22); }
.field-empty { padding: 24px 14px; border: 1px dashed #cbd5e1; border-radius: 12px; text-align: center; color: var(--dim); }
.field-note { display: flex; flex-direction: column; gap: 6px; }
.field-note textarea, .complaint-card textarea { resize: vertical; width: 100%; }
.photo-drop { border: 1.5px dashed #94a3b8; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: .15s; }
.photo-drop.dragging { background: #eef2ff; border-color: var(--brand); }
.photo-pick { display: block; text-align: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
.field-submit { padding: 14px; font-size: 15px; }
.submission-card { border: 1px solid var(--line); border-radius: 10px; padding: 9px; margin-top: 6px; }
.submission-card img { width: 100%; margin-top: 7px; border-radius: 8px; }

/* 방문객 민원: 공개 현황의 초록과 구분되는 짙은 청록색 접수 창 */
.complaint-card { margin-top: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid #0f766e; }
.complaint-head { display: flex; align-items: center; justify-content: space-between; }
.complaint-head > span { font-size: 26px; }
.complaint-card label { display: flex; flex-direction: column; gap: 5px; }
.complaint-submit { color: #fff; background: #0f766e; border-color: #0f766e; min-height: 46px; }
.complaint-count { font-size: 11px; font-weight: 800; color: #9f1239; background: #fff1f2; padding: 4px 8px; border-radius: 999px; }
.complaint-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.complaint-row { border: 1px solid var(--line); border-radius: 11px; padding: 10px; }
.complaint-log { cursor: pointer; background: #fff7ed; }
.complaint-content { margin: 6px 0; white-space: pre-wrap; }
.complaint-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.complaint-steps button { border: 1px solid var(--line); background: #f8fafc; padding: 6px; font-size: 11px; font-weight: 800; }
.complaint-steps button:first-child { border-radius: 8px 0 0 8px; }
.complaint-steps button:last-child { border-radius: 0 8px 8px 0; }
.complaint-steps button.on { color: #fff; background: #0f766e; border-color: #0f766e; }

/* ---- 인쇄 서식 ---- */
.sheet { background: #fff; border: 2px solid #333; border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sheet th, .sheet td { border: 1px solid #000; padding: 5px 3px; text-align: center; }
.sheet td.it { text-align: left; padding-left: 10px; font-weight: 700; background: #f8fafc; }
.qr-pair { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 28px; text-align: center; }
.qr-pair img { width: 220px; height: 220px; max-width: 100%; image-rendering: crisp-edges; }
.poster-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px 0; text-align: center; }
.sheet-qr-top { display: flex; justify-content: center; padding: 8px 0; }
.sheet-qr-top .qr-pair img { width: 112px; height: 112px; }
.sheet-location { margin-top: 10px; }

@media (max-width: 680px) {
  body { padding-bottom: 68px; background: #e9eef5; }
  .wrap { padding: 0 10px; }
  main.wrap { padding-top: 10px !important; }
  header.top { position: static; }
  header.top .wrap { padding: 9px 10px; }
  header.top .nav {
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 55;
    display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 8px 28px rgba(15,23,42,.35);
  }
  .nav button { min-height: 46px; padding: 6px 2px; font-size: 11px; }
  .inp, textarea, select { font-size: 16px; }
  .hourgrid { grid-template-columns: repeat(3, 1fr); }
  .hourbtn { min-height: 48px; }
  .itemrow { min-height: 52px; padding: 13px 12px; }
  .field-submit { position: sticky; bottom: 76px; z-index: 20; min-height: 52px; box-shadow: 0 8px 24px rgba(5,150,105,.3); }
  #v-field, #v-public { max-width: none !important; }
  #v-field .card, #v-public .card { border-radius: 14px; }
  .location-grid { grid-template-columns: repeat(2, 1fr); }
  .complaint-card { margin-bottom: 12px; }
  .qr-pair { gap: 10px; grid-template-columns: 1fr 1fr; }
  .qr-pair img { width: 150px; height: 150px; }
}

@media print {
  @page { size: auto; margin: 6mm; }
  .no-print, header.top { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .fill-page, .fill-rest, .fill-pane { height: auto !important; max-height: none !important; overflow: visible !important; display: block !important; }
  .sheet { page-break-after: always; break-after: page; break-inside: avoid; height: 96vh; border-width: 2px; }
  .sheet:last-child { page-break-after: auto; }
  .sheet .grow-table { flex: 1; }
  .sheet table { height: 100%; }
  .hide-print { display: none !important; }
  .heat thead th, .heat tbody td.name { position: static; }
  .heat { font-size: 9pt; }
  .cellbtn { min-height: 30px; }
}