/* 놀이차례 — 라운드 운영판: 다음 배치·대기 줄이 가장 크고, 옆에 사람별 이력 띠. 멀리서 읽히는 이름표. */
:root { --bg: var(--surface-bg, #f6f3ea); --panel: var(--surface-panel, #ffffff); --line: var(--surface-line, #dcd6c8); --ink: var(--surface-ink, #1c2b1f); --ink2: var(--surface-muted, #5d6659); --acc: var(--surface-primary, #2e7d4f); --wait: #c2410c; --r: 8px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, "Malgun Gothic", sans-serif; }
body[data-surface-state="compiled"] { font-family: system-ui, "Malgun Gothic", sans-serif; }
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 16px 20px 4px; }
h1 { margin: 0; font-size: 20px; } h1 span { color: var(--ink2); font-weight: 400; font-size: 14px; }
h2 { font-size: 17px; margin: 0 0 10px; } h3 { font-size: 14px; margin: 0 0 6px; }
.tag { margin: 0; color: var(--ink2); font-size: 13px; flex: 1 1 260px; }
.lang button { border: 1px solid var(--line); background: var(--panel); color: var(--ink2); padding: 4px 10px; font: inherit; cursor: pointer; border-radius: var(--r); }
.lang button[aria-current="true"] { color: var(--acc); border-color: var(--acc); font-weight: 600; }
.state { margin: 6px 20px; min-height: 22px; font-size: 14px; color: var(--ink2); overflow-wrap: anywhere; }
.state.error { color: var(--wait); font-weight: 600; } .state.saved { color: var(--acc); }
body[data-surface-topology] .surface-shell { display: block; }
body[data-surface-state="compiled"] main.bench { max-width: 1320px; }
.bench { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; padding: 8px 20px 32px; }
.board, .attendance, .record { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; min-width: 0; margin-bottom: 16px; }
.board { border: 2px solid var(--acc); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink2); }
input, select { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 8px 10px; font: inherit; border-radius: var(--r); min-width: 0; }
input[type=number] { width: 90px; }
button, .ghost-link { border: 1px solid var(--acc); background: var(--acc); color: #fff; padding: 8px 14px; font: inherit; cursor: pointer; border-radius: var(--r); min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; }
button.ghost, .ghost-link { background: var(--panel); color: var(--acc); }
button.danger { color: var(--wait); border-color: var(--wait); }
button.primary { font-weight: 700; font-size: 16px; }
button.small { min-height: 30px; padding: 2px 8px; font-size: 12.5px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--wait); outline-offset: 2px; }
.courts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.court { border: 2px solid var(--acc); border-radius: var(--r); padding: 10px; background: #f3faf5; }
.team { display: flex; flex-wrap: wrap; gap: 6px; }
.vs { margin: 4px 0; font-size: 12px; color: var(--ink2); }
.chip { background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-weight: 700; font-size: 17px; min-height: 42px; }
.chip.picked { outline: 3px solid var(--wait); }
.queue { border-top: 1px dashed var(--line); padding-top: 10px; }
.queue ul { list-style: none; padding: 0; margin: 0; } .queue li { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.queue .chip { border-color: var(--wait); color: var(--wait); }
.why { font-weight: 600; } .queue small { color: var(--ink2); }
.conflicts { border-left: 4px solid var(--wait); background: #fff3ec; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }
.conflicts ul { margin: 4px 0; padding-left: 18px; }
.fine { font-size: 12.5px; color: var(--ink2); overflow-wrap: anywhere; }
.roster { list-style: none; padding: 0; margin: 0 0 10px; }
.roster li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.roster .who { font-weight: 700; } .roster li.ABSENT .who, .roster li.LEFT .who { color: var(--ink2); font-weight: 400; }
.sts { display: flex; gap: 4px; flex-wrap: wrap; }
button.st { background: var(--panel); color: var(--ink2); border-color: var(--line); min-height: 34px; padding: 3px 10px; font-size: 13px; }
button.st.on { background: var(--acc); color: #fff; border-color: var(--acc); }
.constraints { padding-left: 18px; font-size: 13.5px; }
.strips { margin-bottom: 10px; }
.strip { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.strip .who { width: 70px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marks { display: flex; flex-wrap: wrap; gap: 2px; }
.marks i { width: 12px; height: 12px; display: inline-block; border-radius: 3px; background: var(--line); }
.marks i.p { background: var(--acc); } .marks i.w { background: var(--wait); } .marks i.x { background: repeating-linear-gradient(45deg, #ccc, #ccc 2px, #fff 2px, #fff 4px); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { border-bottom: 1px solid var(--line); padding: 6px; text-align: left; }
.file { position: relative; border: 1px solid var(--acc); color: var(--acc); padding: 8px 14px; cursor: pointer; flex-direction: row; font-size: 15px; border-radius: var(--r); }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.surface-identity-band { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 20px 20px; font-size: 12px; color: var(--ink2); }
.space-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 20px 4px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.space-bar-label { font-weight: 700; font-size: 13px; color: var(--ink); }
.space-select { min-width: 150px; }
.plan-chip { font-size: 13px; font-weight: 600; color: var(--ink2); margin-left: auto; }
.space-readonly { width: 100%; margin: 4px 0 0; font-size: 13px; color: var(--wait); font-weight: 600; }
.modal-overlay { border: 1px solid var(--line); border-radius: var(--r); padding: 0; max-width: 520px; width: calc(100% - 24px); background: var(--panel); color: var(--ink); }
.modal-overlay::backdrop { background: rgba(28, 43, 31, 0.45); }
.modal-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modal-title { margin: 0; font-size: 18px; }
.plan-list { margin: 0; padding-left: 18px; font-size: 14px; }
.plan-list li { margin-bottom: 6px; }
.modal-note { margin: 0; font-size: 13px; color: var(--ink2); }
.site-footer { padding: 14px 20px 24px; font-size: 13px; color: var(--ink2); border-top: 1px solid var(--line); }
.site-footer a { color: var(--acc); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .bench { grid-template-columns: 1fr; padding: 8px 12px 28px; }
  header { padding: 12px 12px 4px; } .state { margin: 6px 12px; }
  .courts { grid-template-columns: 1fr; }
  /* 휴대폰: 확정 행은 화면 아래에 붙어 늘 보인다. */
  .confirm-row { position: sticky; bottom: 0; z-index: 2; background: var(--panel); margin: 0 -14px; padding: 8px 14px; border-top: 1px solid var(--line); }
}
@media print { header nav, button, .file, form, .attendance, .confirm-row { display: none !important; } .bench { display: block; } }