/* 뽑기나무. 나무빛 틀 안에 흰 시트. 그리드 계산(1440): 228 틀 + 1204 시트 + 8 여백. 시트 안 1156 = 작업판 340 + 24 + 792 */
:root {
  --ground: #f1f5ef;
  --surface: #ffffff;
  --raised: #f5f8f3;
  --active: #e3eadf;
  --border: #e3e8df;
  --rule: #eef1ec;
  --control: #c9d0c5;
  --text: #131416;
  --muted: #565d55;
  --accent: #2c6e49;
  --accent-pale: #e4efe6;
  --gold: #8a5a08;
  --gold-pale: #f7eed8;
  --negative: #a2332f;
  --primary: #17331f;
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-sheet: 16px;
  --sheet-inset: 8px;
  --gap: 24px;
  --pad: 24px;
  --control-height: 40px;
  --font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 15px/1.55 var(--font); font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: anywhere; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 30; background: var(--surface); padding: 8px 12px; }

/* 틀 */
.frame { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.side { padding: 18px 12px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 18px; text-decoration: none; font-weight: 600; font-size: 17px; }
.brand svg { width: 30px; height: 30px; flex: none; }
#nav { display: none; }
.nav-label { font-size: 12px; color: var(--muted); padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-control); text-decoration: none; color: #2e3530; }
.nav a svg { width: 17px; height: 17px; flex: none; stroke: #56605a; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover { background: #e8eee4; }
.nav a[aria-current="page"] { background: var(--active); color: var(--text); font-weight: 500; }
.side-foot { margin-top: auto; padding: 16px 10px 0; font-size: 12px; color: var(--muted); }
.side-foot a { display: block; text-decoration: none; padding: 3px 0; }
.side-foot a:hover { text-decoration: underline; }
.topbar { display: none; }
.sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sheet); margin: var(--sheet-inset) var(--sheet-inset) var(--sheet-inset) 0; padding: var(--pad); min-width: 0; }

/* 제목 */
.title-row { margin-bottom: 20px; }
.title-row h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.title-row p { color: var(--muted); margin-top: 4px; font-size: 15px; max-width: 760px; }

/* 작업 영역 */
.work { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.panel { background: var(--raised); border-radius: var(--radius-card); padding: 18px; }
.field { display: block; margin-bottom: 14px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.label-row span.count, .hint-inline { font-weight: 400; color: var(--muted); font-size: 13px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
input[type=text], input[type=number], select, textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius-control);
  padding: 8px 10px; min-height: var(--control-height); font-size: 15px;
}
textarea { resize: vertical; line-height: 1.5; display: block; }
textarea.tall { min-height: 164px; }
textarea.short { min-height: 68px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 8px; align-items: flex-start; min-height: 28px; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--active); border-radius: var(--radius-control); padding: 3px; margin-bottom: 14px; }
.seg label { display: block; text-align: center; padding: 6px 8px; border-radius: 4px; font-size: 14px; cursor: pointer; color: var(--muted); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg input:checked + span { color: var(--text); font-weight: 500; }
.seg label:has(input:checked) { background: var(--surface); color: var(--text); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); }
details.more { margin: 2px 0 14px; }
details.more > summary { cursor: pointer; font-size: 14px; font-weight: 500; padding: 6px 0; }
details.more[open] > summary { margin-bottom: 8px; }
.btn, .primary, .textbtn { cursor: pointer; border-radius: var(--radius-control); min-height: var(--control-height); padding: 6px 14px; font-size: 14px; font-weight: 500; transition: background-color .12s, transform .06s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn { background: var(--surface); border: 1px solid var(--control); }
.btn:hover { background: #eef2ec; }
.btn:active, .primary:active { transform: translateY(1px); }
.btn:disabled { color: #5f665e; background: var(--rule); cursor: default; }
.primary { background: var(--primary); color: #fff; border: 0; width: 100%; font-size: 16px; min-height: 46px; }
.primary:hover { background: #24492e; }
.textbtn { background: none; border: 0; padding: 0; min-height: 0; color: var(--muted); font-weight: 400; font-size: 13px; text-decoration: underline; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.presets .btn { min-height: 34px; padding: 4px 10px; font-size: 13px; }
.msg { background: #fbecea; color: #7f231f; border-radius: var(--radius-control); padding: 8px 10px; font-size: 14px; margin-bottom: 12px; }
.notice { background: var(--gold-pale); color: #5f3e05; border-radius: var(--radius-control); padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.shared-note { background: var(--accent-pale); color: #123d26; border-radius: var(--radius-control); padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.stage { min-width: 0; scroll-margin-top: 56px; }
.stage-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; margin-bottom: var(--gap); }
.stage-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.stage-head h2 { font-size: 16px; font-weight: 600; }
.status { color: var(--muted); font-size: 14px; }
.is-empty { color: var(--muted); }

/* 추첨 번호표: 사이트의 고유 요소 */
.ticket { display: grid; grid-template-columns: minmax(0, 1fr) 176px; background: var(--accent-pale); border-radius: var(--radius-card); position: relative; margin-bottom: var(--gap); overflow: hidden; }
.ticket::before, .ticket::after { content: ""; position: absolute; right: 168px; width: 16px; height: 16px; background: var(--surface); border-radius: 50%; }
.ticket::before { top: -8px; } .ticket::after { bottom: -8px; }
.ticket-main { padding: 16px 20px; min-width: 0; }
.ticket-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #264a34; }
.ticket-brand { font-weight: 600; }
.ticket-no { font: 500 30px/1.25 var(--mono); color: #123d26; margin: 6px 0 8px; letter-spacing: .01em; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; font-size: 13px; }
.ticket-meta div { display: flex; gap: 6px; }
.ticket-meta dt { color: #3b5a46; }
.ticket-meta dd { margin: 0; font-weight: 500; }
.ticket-stub { border-left: 2px dashed #a8c6ae; padding: 14px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ticket-stub .btn { width: 100%; min-height: 36px; background: transparent; border-color: #8fb39a; }
.ticket-stub .btn:hover { background: #d3e6d7; }

/* 자리 */
.board { --cols: 6; }
.chalk { background: #24412f; color: #fff; text-align: center; border-radius: var(--radius-control); padding: 6px; font-size: 14px; margin: 0 auto 14px; max-width: 60%; }
.board .seats + .chalk { margin: 14px auto 0; }
.seats { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; }
.seat { min-height: 52px; border: 1px solid var(--control); background: var(--surface); border-radius: var(--radius-control); padding: 4px; font-size: 15px; cursor: pointer; color: var(--muted); transition: background-color .12s; }
.seat:hover:not(:disabled) { background: #eef2ec; }
.seat.off { background: var(--rule); border-color: var(--rule); }
.seat.empty { border-style: dashed; background: none; }
.seat.filled { background: var(--accent-pale); border-color: #bcd5c2; color: var(--text); font-weight: 500; cursor: default; }
.seat.hidden-seat { background: var(--gold-pale); border-color: #e0cda0; color: #5f3e05; }

/* 팀 */
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.team { background: var(--raised); border-radius: var(--radius-card); padding: 14px; }
.team-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.team h3 { font-size: 16px; font-weight: 600; color: #174e31; }
.team-meta, .team-tail { font-size: 13px; color: var(--muted); }
.team-list { list-style: none; margin: 0; padding: 0; }
.team-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border); }
.gap-line { font-weight: 500; margin-bottom: 12px; }

/* 사다리 */
.ladder-scroll { overflow-x: auto; }
.ladder-inner { margin: 0 auto; }
.ladder-names, .ladder-ends { display: grid; justify-content: start; }
.ladder-name, .ladder-end { font-size: 14px; text-align: center; padding: 6px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder-name { background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; font-weight: 500; margin: 0 4px 2px; }
.ladder-name:hover { background: var(--active); }
.ladder-name.done { background: var(--surface); }
.ladder-end { font-weight: 500; }
.rungs.concealed { opacity: 0; }
table.result { border-collapse: collapse; width: 100%; max-width: 560px; }
table.result th { text-align: left; font-size: 13px; font-weight: 400; color: var(--muted); padding: 4px 8px 6px 0; }
table.result td { padding: 8px 8px 8px 0; border-top: 1px solid var(--rule); }
td.muted { color: var(--muted); }

/* 룰렛 */
.wheel-wrap { position: relative; max-width: 480px; margin: 0 auto; }
#wheel { width: 100%; aspect-ratio: 1; display: block; }
.pointer { position: absolute; top: -3px; left: 50%; width: 0; height: 0; margin-left: -13px; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid var(--text); z-index: 2; }
.winner-big { text-align: center; font-size: 28px; font-weight: 600; margin: 16px 0 4px; color: #174e31; }
.center-actions { display: flex; justify-content: center; margin-top: 10px; }
.hist { margin: 8px 0 0; padding-left: 24px; }

/* 제비뽑기 */
.lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.lot { min-height: 76px; border: 0; border-radius: var(--radius-control); background: var(--primary); color: #fff; font-size: 18px; font-weight: 500; cursor: pointer; padding: 6px; transition: background-color .15s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lot:hover { background: #2a5236; }
.lot.open { background: var(--raised); color: var(--text); cursor: default; font-size: 15px; }
.lot.open.win { background: var(--gold-pale); color: #4f3304; font-weight: 600; }
.lot small { font-size: 12px; color: var(--muted); font-weight: 400; }
.lot.open.win small { color: #5f3e05; }

/* 추첨기 */
.rolling { font-size: 32px; font-weight: 600; text-align: center; padding: 28px 8px; color: #174e31; }
.picked { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.picked li { counter-increment: p; display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.picked li:first-child { border-top: 0; }
.picked li::before { content: counter(p) "."; color: var(--muted); min-width: 28px; font-size: 14px; }
.picked strong { font-size: 18px; font-weight: 600; }
.pick-label { color: #174e31; font-weight: 500; min-width: 64px; font-size: 14px; }

/* 핀볼 */
.pin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; }
#pin { width: 100%; height: 560px; display: block; border-radius: var(--radius-control); background: var(--ground); }
.pin-live { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pin-live strong { font-size: 18px; font-weight: 600; color: #174e31; }
.pin-live span { color: var(--muted); font-size: 14px; }
.rank { list-style: none; margin: 0; padding: 0; max-height: 530px; overflow-y: auto; position: relative; }
.rank-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; gap: 4px; align-items: baseline; padding: 4px 6px; border-radius: 4px; background: var(--surface); }
.rank-no { color: var(--muted); font-size: 13px; }
.rank-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-delta { font-size: 13px; font-weight: 600; text-align: right; }
.rank-delta.up { color: #1e7b4f; }
.rank-delta.down { color: var(--negative); }
.rank-row.arrived { background: var(--raised); }
.rank-row.win { background: var(--gold-pale); font-weight: 600; }
.rank-row.win .rank-no { color: #5f3e05; }
.pin-result { background: var(--gold-pale); border-radius: var(--radius-control); padding: 10px 14px; margin-bottom: 14px; }
.pin-result strong { font-size: 20px; font-weight: 600; color: #4f3304; }

/* 홈 */
.home-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); }
.tool-list a { display: flex; flex-direction: column; text-decoration: none; padding: 14px 8px; border-top: 1px solid var(--rule); min-height: 92px; border-radius: 4px; transition: background-color .12s; }
.tool-list a:hover { background: var(--raised); }
.tool-list strong { font-size: 17px; font-weight: 600; }
.tool-list span { color: var(--muted); font-size: 14px; margin-top: 2px; }
.sample-ticket { margin-top: var(--gap); }

/* 설명 글 */
.doc { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px var(--gap); max-width: 1156px; }
.doc h2 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; }
.doc p + p { margin-top: 10px; }
.doc ol, .doc ul { padding-left: 22px; margin: 0; }
.doc li + li { margin-top: 6px; }
.faq h3 { font-size: 16px; font-weight: 600; margin: 16px 0 4px; }
.faq h3:first-of-type { margin-top: 0; }
.doc .wide { grid-column: 1 / -1; }
.prose { max-width: 760px; }
.prose h2 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
.prose p, .prose li { font-size: 16px; line-height: 1.75; }
.prose p + p { margin-top: 10px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose a, .doc a { color: #174e31; }
.foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (max-width: 1099px) {
  .frame { display: block; }
  .side { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; position: sticky; top: 0; z-index: 20; background: var(--ground); }
  .topbar .brand { padding: 0; font-size: 16px; }
  .topbar .btn { min-height: 38px; }
  #nav { display: none; position: fixed; inset: 52px 0 0; background: var(--ground); padding: 8px 16px 24px; overflow-y: auto; z-index: 19; }
  #nav.open { display: block; }
  .nav a { min-height: 46px; font-size: 16px; }
  .sheet { margin: 0; border-radius: 0; border-width: 0; padding: 18px 16px; min-height: calc(100vh - 52px); }
}
@media (max-width: 860px) {
  .work, .home-grid, .doc { grid-template-columns: minmax(0, 1fr); }
  .tool-list { grid-template-columns: 1fr; }
  .pin-grid { grid-template-columns: minmax(0, 1fr); }
  #pin { height: 460px; }
  .rank { max-height: 220px; }
  .title-row h1 { font-size: 22px; }
}
@media (max-width: 560px) {
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket::before, .ticket::after { display: none; }
  .ticket-stub { border-left: 0; border-top: 2px dashed #a8c6ae; flex-direction: row; flex-wrap: wrap; }
  .ticket-stub .btn { width: auto; flex: 1 1 28%; min-height: 44px; padding: 4px 6px; }
  .ticket-no { font-size: 26px; }
  .seat { min-height: 46px; font-size: 13px; }
  .seats { gap: 5px; }
  .stage-card { padding: 12px; }
  .chalk { max-width: 100%; }
  .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  body { background: #fff; }
  .side, .topbar, .panel, .doc, .foot, .title-row p, .ticket-stub, #seat-bar, .skip { display: none !important; }
  .frame { display: block; }
  .sheet { border: 0; margin: 0; padding: 0; }
  .work { display: block; }
  .stage-card { border: 0; padding: 0; }
  .ticket { background: none; border: 1px solid #999; display: block; }
  .ticket::before, .ticket::after { display: none; }
  .seat { border: 1px solid #555; background: #fff !important; color: #000; }
  .chalk { background: #fff; color: #000; border: 1px solid #555; }
}

/* 재미 요소: 움직임은 조작에 대한 반응으로만 쓴다 */
.title-tool { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.title-tool .btn { flex: none; }
.confetti { position: fixed; width: 8px; height: 8px; z-index: 40; pointer-events: none; border-radius: 1px; }
@keyframes pop { 0% { transform: scale(.72); opacity: .3; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.pop { animation: pop .26s ease-out; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-4deg) scale(1.05); } 80% { transform: rotate(4deg) scale(1.08); } }
.shaking { animation: shake .5s ease-in-out; }
.seat.rolling { background: var(--gold-pale); border-color: #e0cda0; color: #5f3e05; cursor: default; }
.seat.filled.pop { background: #cfe5d5; }
.team-list li.pop { animation: pop .24s ease-out; }
.deal { font-size: 18px; font-weight: 600; color: #174e31; margin-bottom: 12px; min-height: 28px; }
.ladder-end.covered { color: var(--muted); background: var(--raised); border-radius: var(--radius-control); margin: 0 6px; }
.ladder-end.win { color: #4f3304; background: var(--gold-pale); border-radius: var(--radius-control); margin: 0 6px; font-weight: 600; }
.win-text { color: #174e31; font-weight: 600; }
.center-actions { flex-wrap: wrap; gap: 8px; }
.pointer { transform-origin: 50% 0; }
.turn { font-size: 18px; font-weight: 600; color: #174e31; margin-bottom: 4px; }
.lots-status { margin-bottom: 12px; }
.lots-log { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 16px; }
.lot.open { animation: pop .24s ease-out; }
.lot:hover:not(.open) { transform: translateY(-2px); }
.lot { transition: background-color .15s, transform .1s; }
.roll-box { background: var(--raised); border-radius: var(--radius-card); margin-bottom: 14px; padding: 18px 12px 8px; text-align: center; }
.roll-label { color: var(--muted); font-size: 15px; }
.rolling { padding: 8px 8px 16px; min-height: 64px; }
.picked li.waiting strong { color: var(--muted); font-weight: 400; }
.sample-ticket::before, .sample-ticket::after { display: none; }
.title-tool > div { min-width: 0; }
@media (max-width: 560px) {
  .title-tool { gap: 10px; }
  .title-tool .btn { min-height: 40px; padding: 4px 10px; font-size: 13px; }
  .presets .btn { min-height: 42px; }
  .ladder-name { min-height: 42px; }
}
@media print { #sound, .confetti { display: none !important; } }

.team.preview .team-list li, .team.preview h3 { color: var(--muted); }
.lot.preview, .lot.preview:hover { background: var(--active); color: var(--muted); cursor: default; transform: none; }
.ladder-name:disabled { cursor: default; color: var(--muted); }
@media (max-width: 1099px) { .frame { min-height: 0; } }

.picked.is-empty li::before { content: none; }