/* Draw lots / 제비뽑기 (2026-10-28). Linked from the page body (not the head), so app.css and every <head> stay
   byte-identical. Tap targets >= 44 px. Animations are skipped with prefers-reduced-motion (base.css rule + below). */
.lots [hidden]{display:none!important}
.lots-seg{display:flex;width:100%;max-width:560px;margin:0 0 12px}
.lots-seg button{flex:1 1 0;min-height:44px;padding:8px 10px;line-height:1.25}
.lots-row{display:flex;align-items:flex-end;gap:10px;max-width:560px}
.lots-row .field{flex:1 1 0;min-width:0;margin:0}
.lots-row label{display:block;margin-bottom:4px}
.lots-row input{text-align:center;font-variant-numeric:tabular-nums}
.lots-go{flex:1.35 1 0;min-width:0}
.lots-go .btn{width:100%;padding-left:10px;padding-right:10px;white-space:normal;line-height:1.2}
.lots-lines{margin:12px 0 0;max-width:560px}
.lots-lines textarea{min-height:120px}
.lots-sum{margin:10px 0 0;font-weight:600}
.lots-sum:empty{display:none}
.lots .err:empty{display:none}
.lots-fix{margin-top:8px}
/* board */
#lots-board{scroll-margin-top:72px}
.lots-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.lots-head h2{font-size:var(--fs-h3,19px);margin:0 0 4px;outline-offset:4px}
.lots-stat{margin:0;color:var(--text-2);font-size:var(--fs-sm,15px);font-variant-numeric:tabular-nums}
.lots-bun{flex:none;display:block;width:76px;height:auto;aspect-ratio:372/480;background:none;border:0}
@media (min-width:600px){.lots-bun{width:96px}}
.lots-bun.hop{animation:lots-hop .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes lots-hop{0%{transform:translateY(0)}40%{transform:translateY(-12px) rotate(-3deg)}100%{transform:none}}
.lots-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.lot-li{min-width:0}
.lot{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:64px;padding:8px;border:1.5px solid color-mix(in oklab,var(--accent) 28%,var(--line));border-radius:10px;cursor:pointer;font:inherit;color:var(--text);
  background:linear-gradient(225deg,var(--bg) 0 14px,color-mix(in oklab,var(--accent) 22%,var(--surface-2)) 14px 16px,transparent 16px),
    linear-gradient(180deg,transparent calc(50% - 1px),color-mix(in oklab,var(--accent) 14%,var(--line)) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    color-mix(in oklab,var(--accent) 7%,var(--surface));
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 10%,transparent);transition:transform .12s}
.lot:hover{border-color:var(--accent)}
.lot:active{transform:scale(.97)}
.lot .lot-n{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;background:color-mix(in oklab,var(--surface) 85%,transparent);border-radius:999px;padding:0 8px;line-height:1.5}
.lot-open{display:grid;gap:6px;align-content:start;height:100%;min-height:64px;padding:8px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface)}
.lot-open.is-hit{border-color:var(--accent);background:var(--accent-soft)}
.lot-face{margin:0;display:grid;gap:2px;text-align:center}
.lot-open .lot-n{font-size:var(--fs-xs,14px);color:var(--text-2);font-variant-numeric:tabular-nums}
.lot-r{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.lot-open.is-hit .lot-r{color:var(--accent-fg)}
.lot-open.is-blank .lot-r{color:var(--text-2);font-weight:600}
.lot-name{min-height:44px!important;padding:6px 8px!important;font-size:16px!important;text-align:center}
.lot-open.unfold{animation:lot-unfold .32s cubic-bezier(.16,1,.3,1);transform-origin:50% 0}
@keyframes lot-unfold{from{transform:perspective(400px) rotateX(-75deg);opacity:.4}to{transform:none;opacity:1}}
.lots-acts{margin-top:16px}
.lots-acts .btn{min-height:48px}
.lots-confirm{margin-top:12px;padding:12px 14px;border-radius:var(--r-ctl,10px);background:var(--accent-soft)}
.lots-confirm p{margin:0 0 10px;font-weight:600}
.lots-fair{margin:14px 0 0}
@media (max-width:600px){.lots-acts .btn{flex:1 1 calc(50% - 5px)}}
@media (prefers-reduced-motion:reduce){.lots-bun.hop,.lot-open.unfold{animation:none!important}.lot{transition:none}}