/* 운영 관리 (ops) — rooms · cleaning · facility · report · mobile apps */

/* ── Room grid ── */
.floor + .floor { margin-top: var(--s4); }
.floor__label { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); font: 500 13px var(--font-display); color: var(--secondary); }
.room-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }

.room {
  display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: var(--s2) var(--s3);
  border: 1px solid var(--st-line, var(--line)); border-radius: var(--r-control);
  background: var(--st-bg, var(--surface)); color: var(--st-fg, var(--ink)); text-align: left;
  transition: box-shadow var(--t-hover) var(--ease), translate var(--t-hover) var(--ease);
}
.room:hover { box-shadow: var(--shadow-card); translate: 0 -1px; }
.room[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.room__no { font: 600 15px var(--font-display); color: var(--ink); }
.room__status { font-size: 12px; font-weight: 500; }
.room__staff { font-size: 12px; opacity: 0.85; }

.room-legend { display: flex; flex-wrap: wrap; gap: var(--s2); }

.room-detail__head { display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-start; }
.timeline { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--chart-muted); }
.timeline__item { position: relative; display: flex; gap: var(--s3); align-items: baseline; }
.timeline__item::before { content: ""; position: absolute; left: -20px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--chart); }
.timeline__item.is-done::before { background: var(--chart); }
.timeline__time { font: 500 12px var(--font-display); color: var(--secondary); min-width: 40px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }

/* ── Cleaning record ── */
.record-list { display: flex; flex-direction: column; gap: var(--s2); }
.record-item {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: var(--s3) var(--s4); text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-popover); background: var(--surface);
  transition: background var(--t-hover) var(--ease);
}
.record-item:hover { background: var(--tint); }
.record-item[aria-pressed="true"] { background: var(--selected); border-color: var(--chart); }
.zone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.zone { display: flex; flex-direction: column; gap: var(--s2); }
.zone__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: 13px; }

.split-list { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.filters { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: end; }

/* ── Facility plan ── */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }
.week__col { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); border-radius: var(--r-popover); background: var(--tint); min-width: 0; }
.week__head { display: flex; flex-direction: column; padding: var(--s1) var(--s2); }
.week__head b { font-weight: 500; }
.week__room {
  display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 8px;
  background: var(--surface); font: 500 13px var(--font-display); border: 1px solid transparent;
}
.week__room.is-done { background: var(--lime); }
.week__room.is-doing { background: var(--aqua); border-color: var(--chart); }
.week__room.is-moved { background: var(--disabled-bg); color: var(--secondary); text-decoration: line-through; }

.issue-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-popover); background: var(--surface); }
.issue-row__room { font: 600 15px var(--font-display); }

/* ── Report ── */
.insight { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-popover); background: var(--surface); align-items: flex-start; }
.insight__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-control); background: var(--tint); }

/* ── Mobile field apps: phone frame on large screens, full-bleed on phones ── */
.phone-flow { display: flex; gap: var(--s6); flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.phone {
  position: relative; width: 390px; max-width: 100%; min-height: 760px; display: flex; flex-direction: column;
  border: 1px solid var(--edge); border-radius: 36px; background: var(--canvas); box-shadow: var(--shadow-shell); overflow: hidden;
}
.phone__status { display: flex; justify-content: space-between; padding: 14px 24px 4px; font: 500 13px var(--font-display); }
.phone__body { flex: 1; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) 20px var(--s6); overflow-y: auto; }
.phone__foot { padding: var(--s3) 20px var(--s6); background: var(--glass-float); border-top: 1px solid var(--line); }
.phone-caption { text-align: center; color: var(--secondary); margin-bottom: var(--s3); }

.task {
  display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
}
.task.is-muted { background: var(--disabled-bg); color: var(--secondary); }
.task__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.task__no { font: 600 22px var(--font-display); }

.zone-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-popover); background: var(--surface); border: 1px solid var(--line); min-height: 64px; }
.zone-row.is-done { background: var(--lime); border-color: transparent; }
.zone-row__thumb { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-control); background: var(--tint); color: var(--secondary); }
.zone-row.is-done .zone-row__thumb { background: var(--surface); color: var(--ink); }

.finding { padding: var(--s4); border-radius: var(--r-card); background: var(--warning-bg); color: var(--ink); display: flex; flex-direction: column; gap: var(--s3); }
.finding__title { font-weight: 500; color: var(--warning); }

.check-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; min-height: 56px; border-bottom: 1px solid var(--line); }

.hist { display: flex; flex-direction: column; gap: var(--s4); padding-left: 20px; position: relative; }
.hist::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--chart-muted); }
.hist__item { position: relative; padding: var(--s3) var(--s4); border-radius: var(--r-popover); background: var(--surface); }
.hist__item::before { content: ""; position: absolute; left: -20px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--chart); border: 2px solid var(--canvas); }

/* ── Responsive ── */
@media (max-width: 1199px) {
  .room-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split-list { grid-template-columns: minmax(0, 1fr); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .search { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .phone { border-radius: 0; border: 0; box-shadow: none; width: 100%; min-height: calc(100vh - 140px); background: transparent; }
  .phone__status { display: none; }
  .phone__body { padding: 0 0 var(--s6); }
  .phone__foot { padding: var(--s3) 0; background: transparent; border: 0; }
  .phone-flow { gap: var(--s8); }
}