* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  --paper: #fffcf7; --cream: #f3ece2; --line: #e3dbcd; --text: #3d3831; --muted: #8a8177;
  --accent: #4a5d45; --warn: #c0584f; --full: #dcebd6;
}
body {
  margin: 0; background: var(--cream); color: var(--text);
  font: 18px/1.55 "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; cursor: pointer; }

/* ---------- 비밀번호 화면 ---------- */
.gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; }
.gate-card { width: min(360px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 32px 26px; text-align: center; }
.gate-card h1 { margin: 0 0 6px; font-size: 20px; }
.gate-card p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.gate-card input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
.gate-card button { width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; }
.gate-error { margin-top: 12px !important; color: var(--warn) !important; }

/* ---------- 상단 막대 ---------- */
.bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.side-name { margin: 0; font-size: 19px; font-weight: 600; }
.counts { margin: 0; color: var(--muted); font-size: 15px; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lock input[type=range] { width: 110px; }
.lock { font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ghost { padding: 9px 15px; border: 1px solid var(--line); background: #fff; border-radius: 8px; color: var(--text); white-space: nowrap; }

/* ---------- 좌우 구성 ---------- */
.body { display: flex; align-items: flex-start; height: calc(100dvh - 56px); }
/* 자리 미배정 목록: 화면 위에 떠 있는 작은 창. 눌러서 접을 수 있습니다. */
.pool {
  position: fixed; left: 14px; bottom: 14px; z-index: 20;
  width: 250px; max-height: 46vh; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(60, 50, 35, .18); overflow: hidden;
}
.pool-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 14px; border: 0; background: var(--cream);
  font-size: 16px; font-weight: 600; color: var(--text); text-align: left;
}
.pool-arrow { transition: transform .2s; }
.pool.is-closed .pool-body { display: none; }
.pool.is-closed .pool-arrow { transform: rotate(-90deg); }
.pool-body { overflow: auto; padding: 10px 14px 14px; }
.pool-help { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.pool-list { display: flex; flex-direction: column; gap: 7px; }
.pool-list .chip { font-size: 16px; }
.pool.is-over { outline: 2px dashed var(--accent); outline-offset: -6px; }
.floor-wrap { flex: 1; height: 100%; overflow: auto; padding: 24px 24px 120px; }
.floor-box { position: relative; margin: 0 auto; }
.floor { position: relative; transform-origin: 0 0; width: 1040px; margin: 0 auto; background:
  linear-gradient(var(--paper), var(--paper)) padding-box; border: 1px solid var(--line); border-radius: 12px; }

/* ---------- 이름표 ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 17px; background: #fff; border: 1px solid var(--line); font-size: 18px; white-space: nowrap; touch-action: none; cursor: grab; }
.chip b { font-weight: 600; }
.chip small { color: var(--muted); }
.chip.is-absent { opacity: .45; text-decoration: line-through; }
.chip.is-pending { border-style: dashed; color: var(--muted); }
.chip.dragging { opacity: .4; }
.chip-ghost { position: fixed; z-index: 50; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,.2); }

/* ---------- 테이블 ---------- */
.table { position: absolute; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; text-align: center; touch-action: none; }
.table.is-full { background: var(--full); border-color: #9bbf8e; }
.table.is-over-capacity { border-color: var(--warn); background: #fbeae9; }
.table.is-over { outline: 3px solid var(--accent); outline-offset: 3px; }
.table .no { font-size: 26px; font-weight: 700; line-height: 1.1; }
.table .cnt { font-size: 16px; color: var(--muted); }
.table .title { display: block; max-width: 118px; margin: 4px auto 0; padding: 2px 5px; border-radius: 5px; font-size: 18px; font-weight: 600; color: var(--accent); line-height: 1.25; word-break: keep-all; cursor: text; }
.table .title:empty::before { content: '제목'; color: #cfc8bb; font-weight: 400; }
.table .title:hover { background: #f3f1ea; }
.table .title:focus { outline: 2px solid var(--accent); background: #fff; }
.table.is-over-capacity .cnt { color: var(--warn); font-weight: 600; }
.seat { position: absolute; transform: translate(-50%, -50%); }
.moving .table { cursor: move; box-shadow: 0 0 0 2px var(--accent) inset; }

/* ---------- 단상 · 문 ---------- */
.fixture { position: absolute; transform: translate(-50%, -50%); padding: 16px 36px; border-radius: 10px; font-size: 22px; font-weight: 600; letter-spacing: .08em; touch-action: none; }
.fixture.stage { background: var(--accent); color: #fff; }
.fixture.door { background: #fff; border: 2px dashed var(--muted); color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 11px 20px; border-radius: 20px; background: rgba(58,52,44,.92); color: #fff; font-size: 15px; z-index: 60; }

@media print {
  .bar, .pool, .pool-help { display: none !important; }
  .body, .floor-wrap { height: auto; overflow: visible; padding: 0; }
  .floor { border: 0; }
}

/* 휴대폰: 목록을 아래쪽 가로 띠로, 배치도는 화면 전체 */
@media (max-width: 760px) {
  .bar { padding: 8px 10px; gap: 8px; }
  .side-name { font-size: 16px; }
  .counts { width: 100%; order: 3; font-size: 13px; }
  .bar-right { margin-left: 0; width: 100%; gap: 8px; }
  .lock input[type=range] { width: 84px; }
  .ghost { padding: 8px 12px; font-size: 14px; }
  /* 좁은 화면에서는 버튼 글씨를 짧게 바꿉니다. */
  .ghost#tidy { font-size: 0; }
  .ghost#tidy::after { content: '정렬'; font-size: 14px; }
  .lock-text { display: none; }
  .floor-wrap { padding: 12px 12px 90px; }
  .pool { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 40vh; }
  .pool-body { padding: 10px 12px 12px; }
  .pool-list { flex-direction: row; flex-wrap: wrap; }
}