.layout-head-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.schedule-sync-status {
  color: var(--gray-400);
  font-size: var(--fs-xs);
  white-space: nowrap;
  align-self: center;
}

.schedule-sync-status.is-error {
  color: #b42318;
}

.layout-mode-picker { min-width: 125px; }
.layout-slot-picker { min-width: 190px; }
.layout-copy-picker { min-width: 190px; }

.layout-mode-picker select,
.layout-slot-picker select,
.layout-copy-picker select {
  min-height: 37px;
  background: #fff;
}

.layout-grid {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(var(--layout-cols, 1), minmax(105px, 1fr));
  grid-template-rows: repeat(var(--layout-rows, 1), minmax(158px, auto));
  gap: 9px;
  align-items: stretch;
  overflow: auto;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: var(--r-md);
  background-color: #f8fafc;
  background-image: linear-gradient(#dbe3ef55 1px, transparent 1px), linear-gradient(90deg, #dbe3ef55 1px, transparent 1px);
  background-size: 22px 22px;
}

.layout-cell {
  display: flex;
  position: relative;
  flex-direction: column;
  min-height: 158px;
  padding: 28px 10px 9px;
  border: 2px solid #9db5e6;
  border-radius: var(--r-md);
  background: #f6f8ff;
  cursor: pointer;
  box-shadow: 0 2px 7px #3451b212;
}

.layout-cell > b { color: #263b72; font-size: 15px; }
.layout-cell > .muted { flex: 1; margin-top: 5px; font-size: var(--fs-xs); }
.layout-cell > small { margin-top: 5px; color: var(--gray-500); font-size: 9px; }

.layout-cell-type {
  position: absolute;
  top: 7px;
  left: 8px;
  padding: 2px 6px;
  border-radius: var(--r-full);
  color: #3448a5;
  background: #e2e8ff;
  font-size: 9px;
  font-weight: var(--fw-bold);
}

.layout-assignment {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  padding: 6px 7px;
  border: 1px solid #bac8ef;
  border-radius: 7px;
  background: #fff;
}

.mode-operate .layout-assignment[draggable="true"] { cursor: grab; }
.layout-assignment.dragging,
.mode-operate .layout-assignment.dragging { opacity: .45; cursor: grabbing; }
.layout-assignment span { color: var(--gray-500); font-size: 8px; font-weight: var(--fw-bold); }
.layout-assignment strong { overflow: hidden; color: #253b80; font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.layout-assignment small { overflow: hidden; color: var(--gray-500); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.layout-assignment.empty { display: block; color: var(--gray-500); background: #f7f8fb; font-size: 10px; text-align: center; }

.layout-cell.AISLE {
  border-color: #cbd0d8;
  background: repeating-linear-gradient(45deg, #f8f9fb, #f8f9fb 8px, #e4e7ec 8px, #e4e7ec 16px);
  color: var(--gray-500);
  box-shadow: none;
}

.layout-cell.AISLE .layout-cell-type { color: var(--gray-600); background: #e4e7ec; }

.layout-cell.DESK {
  border-color: #f5b95c;
  background: #fff6ed;
  box-shadow: 0 2px 7px #f7900918;
}

.layout-cell.DESK .layout-cell-type { color: #b54708; background: #ffddb0; }

.layout-cell.BLANK {
  border-color: #c8ced8;
  border-style: dashed;
  background: #ffffff66;
  color: var(--gray-500);
  box-shadow: none;
}

.layout-cell.BLANK .layout-cell-type { color: var(--gray-500); background: #eaecf0; }

.layout-empty-slot {
  display: grid;
  min-height: 158px;
  place-content: center;
  gap: 4px;
  border: 2px dashed #cbd5e1;
  border-radius: var(--r-md);
  color: var(--gray-500);
  background: #ffffff99;
  cursor: pointer;
}

.layout-empty-slot span { color: var(--gray-500); font-size: 24px; line-height: 1; }
.layout-empty-slot small { font-size: 9px; }
.layout-empty-slot:hover,
.layout-empty-slot:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
  background: #f4f3ff;
  outline: none;
}

.mode-operate .layout-empty-slot { cursor: default; opacity: .55; }
.layout-cell.drag-over { outline: 4px solid #3451b255; }
.layout-cell.reservation-drag-over { border-color: #12b76a; outline: 4px solid #12b76a33; background-color: #ecfdf3; }

.layout-grid-readonly,
.layout-grid-readonly * {
  pointer-events: none;
  user-select: none;
}

.layout-grid-readonly .layout-cell { cursor: default; }
.layout-grid-readonly .layout-empty-slot.readonly {
  border-color: transparent;
  background: #ffffff08;
  opacity: .35;
}

/* .card 는 .grid 의 그리드 아이템이라 min-width:auto 로 배치 그리드의
   내재 최소 폭(105px x 열)만큼 늘어난다. 0 으로 낮춰야 .layout-grid 가
   자체 가로 스크롤을 만들고 페이지가 밀리지 않는다. */
.card:has(.layout-grid) { min-width: 0; }

@media (max-width: 1024px) {
  .layout-mode-picker select,
  .layout-slot-picker select,
  .layout-copy-picker select {
    min-height: 44px;
  }
}

/* 고정 min-width 두 개(125+190)와 버튼이 한 줄에 남아 좁은 화면에서 1px 넘친다. */
@media (max-width: 768px) {
  .layout-head-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .layout-mode-picker,
  .layout-slot-picker,
  .layout-copy-picker {
    min-width: 0;
    flex: 1 1 140px;
  }
}