/* 자리 바꾸기 — 교실 칠판 + 리놀륨 바닥 + 합판 책상. 이름표는 자석으로 칠판에 붙어 있다가 책상으로 날아간다. */
:root {
  --board: #2d4c40;        /* 칠판 */
  --board-deep: #1f372e;   /* 칠판 그늘(패널) */
  --chalk: #f3f1e7;        /* 흰 분필 */
  --chalk-dim: rgba(243, 241, 231, .66);
  --chalk-faint: rgba(243, 241, 231, .16);
  --yellow: #f4d35e;       /* 노란 분필 */
  --pink: #f2a0b5;         /* 분홍 분필 */
  --floor: #d3d8cb;        /* 교실 바닥 */
  --desk: #e7c690;         /* 합판 상판 */
  --desk-edge: #b98a52;
  --steel: #8f9d95;        /* 의자 */
  --paper: #fffdf5;        /* 이름표 */
  --ink: #22302a;
  --wood: #7b5332;         /* 칠판 틀·분필받이 */
  --chalk-font: 'Gaegu', 'Pretendard Variable', sans-serif;
  --ui-font: 'Pretendard Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; min-height: 100%; background: var(--floor); color: var(--chalk);
  font: 400 15px/1.5 var(--ui-font); word-break: keep-all; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 앱 틀 */
.app {
  position: fixed; inset: 0; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

/* 칠판 */
.board {
  position: relative; z-index: 3; color: var(--chalk);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 20px;
  background:
    radial-gradient(60% 80% at 18% 30%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(40% 70% at 80% 60%, rgba(255,255,255,.04), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--board);
  border-top: 6px solid var(--wood);
  transition: min-height .5s cubic-bezier(.2,.7,.2,1);
}
.board-top { display: flex; justify-content: space-between; align-items: center; }
.logo {
  text-decoration: none; color: var(--board-deep); background: var(--yellow);
  font: 800 15px/1 var(--ui-font); padding: 6px 8px 5px; border-radius: 2px; letter-spacing: -.02em;
}
.chip {
  cursor: pointer; height: 30px; padding: 0 10px; border-radius: 2px; border: 1px solid var(--chalk-faint);
  background: transparent; color: var(--chalk-dim); font-size: 12.5px; font-weight: 600;
}
.chip[aria-pressed="true"] { color: var(--chalk); }
.board-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 6px; }
.chalk { font-family: var(--chalk-font); font-weight: 700; letter-spacing: -.03em; text-shadow: 0 0 1px rgba(243,241,231,.55), 0 0 6px rgba(243,241,231,.12); }
.board h1 { margin: 0; font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.board-sub { margin: 4px 0 0; font-size: 18px; line-height: 1.15; color: var(--chalk-dim); }
.board-right { display: grid; justify-items: end; font-size: 17px; line-height: 1.2; color: var(--chalk-dim); white-space: nowrap; }
.board-right b { color: var(--yellow); font-size: 1.35em; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tray {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: var(--wood);
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.tray i { position: absolute; bottom: 6px; width: 22px; height: 6px; border-radius: 2px; background: var(--chalk); }
.tray i:nth-child(1) { left: 22%; }
.tray i:nth-child(2) { left: calc(22% + 30px); width: 15px; background: var(--yellow); transform: rotate(-6deg); }
.tray i:nth-child(3) { left: calc(22% + 52px); width: 12px; background: var(--pink); }
.tray .eraser { position: absolute; right: 18%; bottom: 6px; width: 34px; height: 9px; border-radius: 2px; background: #3c4a66; box-shadow: inset 0 3px 0 #c8b892; }

/* 칠판에 붙는 이름표(자석) */
.draw {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  display: grid; justify-items: center; gap: 2px; pointer-events: none;
  transition: opacity .3s, transform .45s cubic-bezier(.3,1.5,.5,1);
}
.draw-name {
  position: relative; display: grid; place-items: center; min-width: 6.2em; padding: .2em .55em .12em;
  background: var(--paper); color: var(--ink); border-radius: 3px;
  font: 700 54px/1 var(--chalk-font); letter-spacing: -.06em; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.28);
}
.draw-name::before { /* 자석 */
  content: ''; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8e8e, #d23a3a 60%, #9e2222); box-shadow: 0 2px 3px rgba(0,0,0,.35);
}
.draw-name.empty { color: rgba(34,48,42,.25); }
.draw-name.hit { animation: hit .5s cubic-bezier(.3,1.6,.5,1); }
.board h1.write { animation: write 1.1s steps(14, end) .15s both; }
@keyframes write { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes hit { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.draw-name.hit::after {
  content: ''; position: absolute; inset: -6px; border: 3px solid var(--yellow); border-radius: 6px; animation: ring .6s ease-out forwards;
}
@keyframes ring { from { opacity: 1; transform: scale(.96); } to { opacity: 0; transform: scale(1.25); } }
.draw-count { font: 700 18px/1 var(--chalk-font); color: var(--chalk-dim); order: 2; margin-top: 8px; }
.draw.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 교실 바닥 */
.floor {
  position: relative; z-index: 1; min-height: 0; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(34,48,42,.045) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(90deg, rgba(34,48,42,.045) 0 1px, transparent 1px 58px),
    var(--floor);
}
.room { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; transition: transform .8s cubic-bezier(.6,0,.2,1); }
.podium {
  position: absolute; display: grid; place-items: center; background: #b48a5a; color: rgba(255,253,245,.92);
  font: 700 13px/1 var(--ui-font); letter-spacing: .1em; border-radius: 2px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
  transition: transform .8s cubic-bezier(.6,0,.2,1);
}
.frontzone {
  position: absolute; border: 2px dashed rgba(196, 118, 30, .5); background: rgba(244,211,94,.16); border-radius: 4px;
  display: none; pointer-events: none;
}
.frontzone span { position: absolute; right: 2px; top: -16px; font: 700 13px/1 var(--ui-font); color: rgba(150, 90, 20, .8); }
body[data-state="setup"] .frontzone.on { display: block; }
.floor-hint {
  position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; pointer-events: none;
  font-size: 12.5px; color: rgba(34,48,42,.6);
}
body:not([data-state="setup"]) .floor-hint { display: none; }

.seats { position: absolute; inset: 0; }
.seat { position: absolute; cursor: default; }
body[data-state="setup"] .seat { cursor: pointer; }
.desk {
  position: absolute; left: 4%; right: 4%; top: var(--dt); height: var(--dh);
  background:
    repeating-linear-gradient(100deg, rgba(160,110,50,.0) 0 7px, rgba(160,110,50,.09) 7px 8px, rgba(160,110,50,0) 8px 15px),
    var(--desk);
  border-radius: 2px; box-shadow: inset 0 -3px 0 rgba(140,95,45,.35), 0 1px 0 rgba(0,0,0,.18);
  transition: box-shadow .15s, background-color .2s;
}
.seat.jl .desk { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: inset 1px 0 0 rgba(140,95,45,.45), inset 0 -3px 0 rgba(140,95,45,.35), 0 1px 0 rgba(0,0,0,.18); }
.seat.jr .desk { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chair {
  position: absolute; left: 31%; right: 31%; top: var(--ct); height: var(--ch);
  background: var(--steel); border-radius: 3px 3px 6px 6px; box-shadow: inset 0 2px 0 rgba(255,255,255,.25);
}
.seat.up .chair { border-radius: 6px 6px 3px 3px; box-shadow: inset 0 -2px 0 rgba(255,255,255,.25); }
.seat.off .desk { background: transparent; box-shadow: none; border: 1.5px dashed rgba(34,48,42,.28); }
.seat.off .chair { opacity: 0; }
body:not([data-state="setup"]) .seat.off { visibility: hidden; }

.tag {
  position: absolute; left: 50%; top: var(--tt); width: var(--tw); height: var(--th);
  display: grid; place-items: center; padding: 0 2px;
  background: var(--paper); color: var(--ink); border-radius: 2px;
  font-family: var(--chalk-font); font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: -.06em;
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 2px 5px rgba(0,0,0,.12);
  transform: translateX(-50%) rotate(var(--tilt, 0deg)) scale(0); opacity: 0;
  transition: transform .8s cubic-bezier(.6,0,.2,1);
}
.seat.filled .tag, .seat.fixed .tag { opacity: 1; transform: translateX(-50%) rotate(var(--tilt, 0deg)) scale(1); }
.seat.fixed .tag::after {
  content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: #d23a3a; box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.seat.land .tag { animation: land .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes land {
  0% { transform: translateX(-50%) rotate(var(--tilt, 0deg)) scale(1.35, .7); }
  45% { transform: translateX(-50%) rotate(var(--tilt, 0deg)) scale(.92, 1.1); }
  100% { transform: translateX(-50%) rotate(var(--tilt, 0deg)) scale(1); }
}
.seat.land .desk { animation: bump .4s ease-out; }
@keyframes bump { 30% { transform: translateY(2px); } 100% { transform: none; } }
.seat.scan .desk { box-shadow: 0 0 0 3px var(--yellow), 0 0 22px 6px rgba(244,211,94,.55); background-color: #f6d998; }
.seat.found .desk { box-shadow: 0 0 0 4px var(--yellow), 0 0 30px 10px rgba(244,211,94,.75); background-color: #f8dc9c; }
.seat.lock .desk { box-shadow: 0 0 0 4px var(--yellow), 0 0 30px 10px rgba(244,211,94,.75); background-color: #f8dc9c; }
body[data-state="setup"][data-tab="layout"] .seat:hover .desk,
body[data-state="setup"][data-tab="rules"] .seat:not(.off):hover .desk { box-shadow: 0 0 0 2px var(--board); }
.flip .tag { transform: translateX(-50%) rotate(calc(var(--tilt, 0deg) + 180deg)) scale(0); }
.flip .seat.filled .tag, .flip .seat.fixed .tag { transform: translateX(-50%) rotate(calc(var(--tilt, 0deg) + 180deg)) scale(1); }
.flip .seat.land .tag { animation: none; }
.flip .podium { transform: rotate(180deg); }

/* 날아가는 이름표와 분필 가루 */
.fly-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.fly {
  position: fixed; left: 0; top: 0; display: grid; place-items: center; white-space: nowrap;
  background: var(--paper); color: var(--ink); border-radius: 3px; font: 700 54px/1 var(--chalk-font); letter-spacing: -.06em;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 18px 30px rgba(0,0,0,.3); transform-origin: 0 0; will-change: transform;
}
.dust { position: fixed; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255,253,245,.95); }

/* ---------------------------------------------------------------- 패널 */
.panel {
  position: relative; z-index: 4; background: var(--board-deep); color: var(--chalk);
  border-top: 1px solid rgba(0,0,0,.25); padding: 0 16px calc(12px + env(safe-area-inset-bottom));
  max-height: 52vh; max-height: 52svh; display: flex; flex-direction: column; min-height: 0;
}
.setup, .showbar, .result { display: none; }
body[data-state="setup"] .setup { display: flex; flex-direction: column; min-height: 0; flex: 1; }
body[data-state="show"] .showbar { display: flex; }
body[data-state="done"] .result { display: grid; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); flex: none; border-bottom: 1px solid var(--chalk-faint); }
.tabs button {
  position: relative; height: 46px; background: none; border: 0; cursor: pointer; color: var(--chalk-dim); font-weight: 700; font-size: 14.5px;
}
.tabs button em { font-style: normal; color: var(--yellow); font-variant-numeric: tabular-nums; margin-left: 2px; }
.tabs button[aria-selected="true"] { color: var(--chalk); }
.tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; border-radius: 2px; background: var(--chalk); }
.pane { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0 10px; overscroll-behavior: contain; display: grid; gap: 10px; align-content: start; }
.field-label { font-size: 13px; color: var(--chalk-dim); }
textarea, input[type="text"], input[type="search"], select {
  width: 100%; border: 1px solid var(--chalk-faint); background: rgba(0,0,0,.2); border-radius: 3px; color: var(--chalk);
  padding: 10px 12px; font-size: 16px; outline: none;
}
textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
textarea::placeholder, input::placeholder { color: rgba(243,241,231,.4); }
textarea:focus, input:focus, select:focus { border-color: var(--chalk-dim); }
select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--chalk-dim) 50%), linear-gradient(135deg, var(--chalk-dim) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--board-deep); color: var(--chalk); }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

.btn {
  height: 44px; padding: 0 14px; border-radius: 3px; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1px solid var(--chalk-faint); color: var(--chalk); font-weight: 700; font-size: 14.5px;
}
.btn.small { height: 36px; padding: 0 12px; font-size: 13.5px; }
.btn.primary { background: var(--yellow); border-color: var(--yellow); color: var(--board-deep); }
.btn.ghost { border-color: transparent; color: var(--chalk-dim); }
.btn.big { height: 52px; font-size: 17px; width: 100%; }
.btn.icon { width: 40px; padding: 0; display: grid; place-items: center; font-size: 20px; }
.btn.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }

.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.presets button {
  display: grid; justify-items: center; gap: 4px; padding: 8px 2px 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--chalk-faint); border-radius: 3px; color: var(--chalk-dim); font-size: 13px; font-weight: 700;
}
.presets svg { width: 40px; height: 28px; fill: currentColor; opacity: .8; }
.presets button[aria-checked="true"] { border-color: var(--chalk); color: var(--chalk); background: rgba(243,241,231,.06); }
.presets button[aria-checked="true"] svg { fill: var(--yellow); opacity: 1; }
.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stepper { display: grid; grid-template-columns: 1fr 40px 34px 40px; align-items: center; gap: 4px; font-size: 13.5px; color: var(--chalk-dim); }
.stepper output { text-align: center; font: 700 22px/1 var(--chalk-font); color: var(--chalk); font-variant-numeric: tabular-nums; }
.stepper .btn { height: 40px; }
.note { margin: 0; font-size: 13px; color: var(--chalk-dim); }

.rule { display: grid; gap: 6px; }
.rule + .rule { padding-top: 8px; border-top: 1px solid var(--chalk-faint); }
.rule-h { margin: 0; font-size: 14px; font-weight: 700; }
.pick { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.rule:nth-of-type(3) .pick { grid-template-columns: 1fr auto; }
.pick select { padding: 7px 26px 7px 10px; font-size: 15px; height: 38px; }
.pick .btn { height: 38px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chips li {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 3px 3px 9px; border-radius: 3px;
  background: rgba(243,241,231,.1); font-size: 13.5px;
}
.chips button { width: 28px; height: 28px; border: 0; background: none; color: var(--chalk-dim); cursor: pointer; font-size: 16px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; padding-top: 8px; border-top: 1px solid var(--chalk-faint); }
.check input { width: 20px; height: 20px; accent-color: var(--yellow); }

.go { flex: none; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--chalk-faint); }
.seed-row { display: grid; grid-template-columns: auto 1fr 40px minmax(0, 1.15fr); gap: 6px; align-items: center; }
.seed-row label { font-size: 13px; color: var(--chalk-dim); }
.seed-row input { height: 40px; padding: 6px 10px; font: 700 20px/1 var(--chalk-font); color: var(--yellow); letter-spacing: .06em; text-align: center; }
.seed-row .btn.icon { height: 40px; }
.seed-row select { height: 40px; padding: 6px 26px 6px 10px; font-size: 14px; }
.status { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--chalk-dim); }
.status.bad { color: var(--pink); }

.showbar { align-items: center; gap: 8px; padding-top: 10px; }
.progress { flex: 1; font: 700 18px/1 var(--chalk-font); color: var(--chalk-dim); font-variant-numeric: tabular-nums; }
#nextBtn { display: none; }
body.manual #nextBtn { display: block; }
body.manual #pauseBtn { display: none; }

.result { gap: 8px; padding-top: 12px; }
.view-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--chalk-faint); border-radius: 3px; padding: 3px; gap: 3px; }
.view-toggle button { height: 34px; border: 0; border-radius: 2px; background: none; cursor: pointer; color: var(--chalk-dim); font-weight: 700; font-size: 13.5px; }
.view-toggle button[aria-checked="true"] { background: var(--chalk); color: var(--board-deep); }
.actions { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: 6px; }
.actions.minor { grid-template-columns: repeat(3, 1fr); }
.actions.minor .btn { height: 36px; font-size: 13px; padding: 0 4px; }
.roster { display: none; }
.find { order: -1; }
.find input { height: 42px; width: 100%; -webkit-appearance: none; appearance: none; }
.find input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.find-out { margin: 4px 0 0; min-height: 1.2em; font-size: 13px; color: var(--yellow); }
.find-out:empty { display: none; }
.roster { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; grid-template-columns: 1fr 1fr; gap: 2px 10px; align-content: start; }
.roster button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 5px 4px; background: none; border: 0; border-bottom: 1px solid var(--chalk-faint); color: var(--chalk-dim); cursor: pointer; font-size: 13px; text-align: left; }
.roster b { font: 700 19px/1.1 var(--chalk-font); letter-spacing: -.04em; color: var(--chalk); }
.roster button:hover, .roster button[aria-pressed="true"] { color: var(--yellow); }

/* 고정석 고르기 */
.picker { position: fixed; inset: 0; z-index: 50; background: rgba(15,25,20,.55); display: grid; place-items: end center; }
.picker-in {
  width: min(100%, 460px); max-height: 70vh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 10px;
  background: var(--board-deep); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 6px 6px 0 0;
  border-top: 6px solid var(--wood);
}
.picker-title { margin: 0; font: 700 22px/1.1 var(--chalk-font); }
.picker-list { overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.picker-list button {
  height: 38px; padding: 0 12px; border-radius: 3px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer;
  font: 700 19px/1 var(--chalk-font);
}
.picker-list button[aria-pressed="true"] { outline: 3px solid var(--yellow); }

.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); z-index: 60; transform: translate(-50%, -8px);
  max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 3px; background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.fallback { position: fixed; inset: 40% 16px auto; text-align: center; color: var(--ink); }

/* ---------------------------------------------------------------- 상태별 */
body[data-state="show"] .board { min-height: 31vh; min-height: 31svh; }
body[data-state="show"] .draw { display: grid; }
body[data-state="show"] .board-sub { visibility: hidden; }
@media (max-width: 899px) { body[data-state="show"] #today { display: none; } body[data-state="show"] .draw { top: 62%; } }
body[data-state="done"] .board h1 { font-size: 40px; }
body[data-state="done"] .board-sub { color: var(--chalk); font-size: 22px; }

/* 연출 중 패널은 아래 얇은 막대만 */
body[data-state="show"] .panel { max-height: none; }

@media (min-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); }
  .board { grid-column: 1; padding: 18px 28px 26px; }
  .floor { grid-column: 1; }
  .panel { grid-column: 2; grid-row: 1 / 3; max-height: none; padding: 16px 20px 20px; border-top: 0; border-left: 6px solid var(--wood); }
  .board h1 { font-size: 46px; }
  .board-sub { font-size: 22px; }
  .board-right { font-size: 21px; }
  .draw-name, .fly { font-size: 84px; }
  .draw-count { font-size: 22px; }
  body[data-state="done"] .result { grid-template-rows: auto auto auto auto minmax(0, 1fr); height: 100%; min-height: 0; }
  .setup, .result { height: 100%; }
  .find { order: 0; margin-top: 10px; }
  .roster { display: grid; }
  body[data-state="show"] .app { grid-template-columns: minmax(0, 1fr) 0; }
  body[data-state="show"] .panel {
    position: fixed; right: 20px; bottom: 20px; width: auto; padding: 10px 12px; border: 0; border-radius: 4px;
    background: rgba(31,55,46,.92); box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }
  body[data-state="show"] .showbar { padding: 0; }
  body[data-state="show"] .progress { min-width: 90px; }
  body[data-state="done"] .board h1 { font-size: 54px; }
  body[data-state="done"] .board-sub { font-size: 28px; }
  .toast { left: calc(50% - 190px); }
  .picker { place-items: center; }
  .picker-in { border-radius: 6px; }
}
@media (min-width: 1600px) {
  .app { grid-template-columns: minmax(0, 1fr) 420px; }
  .board h1 { font-size: 60px; }
  .board-right { font-size: 28px; }
  .draw-name, .fly { font-size: 120px; }
  body[data-state="done"] .board h1 { font-size: 72px; }
  body[data-state="done"] .board-sub { font-size: 36px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .panel { max-height: 58vh; }
}
@media (prefers-reduced-motion: reduce) {
  .room, .tag, .podium, .board { transition-duration: .01s; }
  .seat.land .tag, .seat.land .desk, .draw-name.hit { animation: none; }
}

/* ---------------------------------------------------------------- 인쇄: 만든 A4 이미지 한 장만 */
@media print {
  @page { size: A4 portrait; margin: 0; }
  body { background: #fff; }
  .app, .guide, .toast, .fly-layer, .picker { display: none !important; }
  #printImg { display: block !important; width: 210mm; height: 297mm; object-fit: contain; }
}

/* ---------------------------------------------------------------- 설명서 (첫 화면 아래) */
.guide {
  position: relative; z-index: 30; margin-top: 100vh; margin-top: 100svh;
  background: var(--board-deep); color: var(--chalk); border-top: 9px solid var(--wood);
  font: 400 15.5px/1.75 var(--ui-font);
  content-visibility: auto; contain-intrinsic-size: auto 1900px;
}
.guide-in { max-width: 1080px; margin: 0 auto; padding: 44px 16px calc(56px + env(safe-area-inset-bottom)); }
.guide h2 { margin: 0; font: 700 30px/1.2 var(--chalk-font); letter-spacing: -.01em; }
.guide h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--yellow); }
.guide-lede { margin: 12px 0 0; max-width: 38em; color: var(--chalk-dim); }
.guide section, .guide-more { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--chalk-faint); }
.guide-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.guide-steps li { counter-increment: s; position: relative; padding-left: 40px; color: var(--chalk-dim); }
.guide-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border-radius: 2px; font: 700 19px/1 var(--chalk-font);
}
.guide b { display: block; color: var(--chalk); font-weight: 700; }
.guide-fair p { margin: 0 0 12px; max-width: 40em; color: var(--chalk-dim); }
.guide dl { margin: 0; display: grid; gap: 22px; }
.guide dt { font-weight: 700; }
.guide dd { margin: 4px 0 0; color: var(--chalk-dim); max-width: 38em; }
.guide-when ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: var(--chalk-dim); }
.guide-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide-more a { display: block; padding: 12px 14px; border: 1px solid var(--chalk-faint); border-radius: 3px; color: var(--chalk-dim); text-decoration: none; }
.guide-more a:hover, .guide-more a:focus-visible { border-color: var(--yellow); }
.site-foot a { color: var(--chalk-dim); }
@media (min-width: 900px) {
  .guide-in { padding: 64px 24px 72px; }
  .guide h2 { font-size: 40px; }
  .guide-steps ol { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .guide dl { grid-template-columns: 1fr 1fr; gap: 26px 48px; }
  .guide-when ul { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .guide-more ul { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}