@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  color-scheme: light;
  --canvas: #f6f7fc;
  --panel: #ffffff;
  --panel-muted: #f8f9fd;
  --ink: #202842;
  --ink-strong: #111c35;
  --muted: #606d83;
  --muted-2: #626e82;
  --line: #e1e6f0;
  --line-strong: #cbd3e1;
  --primary: #505cdb;
  --primary-hover: #3f4ac7;
  --primary-contrast: #ffffff;
  --primary-soft: #f0f1ff;
  --primary-soft-ink: #404bbb;
  --coral: #ee7969;
  --teal: #158e86;
  --success-bg: #e9f8f0;
  --success-ink: #087e55;
  --error-bg: #fff1f0;
  --error-ink: #b33e41;
  --shadow: 0 14px 45px rgba(33, 44, 91, 0.045), 0 2px 12px rgba(33, 44, 91, 0.025);
  --wheel-1: #626fe8;
  --wheel-2: #f18878;
  --wheel-3: #40b9ac;
  --wheel-4: #f4bd65;
  --wheel-5: #94a5f5;
  --wheel-6: #f69fbd;
  --wheel-7: #7ecbb6;
  --wheel-8: #bba0f0;
  font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101626;
  --panel: #192238;
  --panel-muted: #202b44;
  --ink: #dce4f6;
  --ink-strong: #f4f7ff;
  --muted: #a7b4cf;
  --muted-2: #8998b7;
  --line: #303e57;
  --line-strong: #43536c;
  --primary: #95a0ff;
  --primary-hover: #b2b9ff;
  --primary-contrast: #121a37;
  --primary-soft: #2a315b;
  --primary-soft-ink: #bbc3ff;
  --coral: #ff9a88;
  --teal: #54c8bc;
  --success-bg: #183c35;
  --success-ink: #79e7bb;
  --error-bg: #4b2a37;
  --error-ink: #ffb6b9;
  --shadow: 0 12px 42px rgba(0, 0, 0, 0.18);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
  color-scheme: dark;
  --canvas: #101626;
  --panel: #192238;
  --panel-muted: #202b44;
  --ink: #dce4f6;
  --ink-strong: #f4f7ff;
  --muted: #a7b4cf;
  --muted-2: #8998b7;
  --line: #303e57;
  --line-strong: #43536c;
  --primary: #95a0ff;
  --primary-hover: #b2b9ff;
  --primary-contrast: #121a37;
  --primary-soft: #2a315b;
  --primary-soft-ink: #bbc3ff;
  --coral: #ff9a88;
  --teal: #54c8bc;
  --success-bg: #183c35;
  --success-ink: #79e7bb;
  --error-bg: #4b2a37;
  --error-ink: #ffb6b9;
  --shadow: 0 12px 42px rgba(0, 0, 0, 0.18);
}
}
*, *::before, *::after {box-sizing: border-box}
html {min-height:100%;scrollbar-gutter:stable}
body {margin:0;min-height:100vh;background:var(--canvas);color:var(--ink);font-size:15px}
button,textarea,input {font:inherit}
button {cursor:pointer}
button:disabled {cursor:not-allowed;opacity:.5}
a {color:inherit;text-decoration:none}
:focus-visible {outline:3px solid var(--teal);outline-offset:3px}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible {outline:3px solid var(--teal);outline-offset:3px}
.sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.icon {width:19px;height:19px;display:inline-block;flex:none;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon.sm {width:16px;height:16px}.icon.lg {width:22px;height:22px}
.site-header {background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:5}
.header-inner {max-width:1372px;margin:auto;padding:0 40px;min-height:82px;display:flex;align-items:center;gap:46px}
.brand {display:inline-flex;gap:12px;align-items:center;white-space:nowrap;flex:none}
.brand-mark {display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#505cdb;color:white;position:relative;box-shadow:0 5px 15px rgba(80,92,219,.18)}
.brand-mark .icon {width:27px;height:27px;stroke-width:2.5}
.brand-word {font-size:22px;font-weight:850;letter-spacing:-.9px;color:var(--ink-strong)}
.brand-word span {color:var(--primary)}
.primary-nav {display:flex;align-items:center;gap:7px;flex:1}
.nav-link {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 17px;border-radius:11px;font-size:14px;font-weight:680;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.nav-link:hover {background:var(--panel-muted);color:var(--ink-strong)}
.nav-link.active {color:var(--primary-soft-ink);background:var(--primary-soft)}
.nav-link .icon {width:17px;height:17px}
.header-actions {display:flex;align-items:center;gap:14px;margin-left:auto}
.private-top {display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap}
.private-top .icon {width:14px;height:14px;color:var(--teal)}
.theme-toggle {display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel-muted);color:var(--ink);flex:none}
.theme-toggle:hover {border-color:var(--primary)}
.app-shell {max-width:1372px;margin:0 auto;padding:36px 40px 30px}
.page-intro {margin:0 0 26px;display:flex;align-items:end;justify-content:space-between;gap:16px}
.page-eyebrow {font-size:11px;font-weight:820;letter-spacing:1.55px;color:var(--primary-soft-ink);text-transform:uppercase;margin-bottom:8px}
.page-title {font-size:clamp(26px,2.5vw,36px);line-height:1.32;letter-spacing:-1.25px;margin:0;color:var(--ink-strong);font-weight:820}
.page-description {color:var(--muted);font-size:14px;margin:8px 0 0;line-height:1.65}
.page-deco {display:flex;align-items:center;gap:8px;padding-bottom:4px;color:var(--muted-2);font-size:12px}
.page-deco .tiny-dot {height:7px;width:7px;border-radius:100%;background:var(--teal)}
.workspace {display:grid;grid-template-columns:minmax(360px,452px) minmax(0,1fr);align-items:start;gap:22px}
.control-stack {display:flex;flex-direction:column;gap:20px}
.panel {background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:20px;overflow:hidden}
.panel-inner {padding:24px}
.panel-heading {display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:17px}
.panel-title {display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.48px;font-weight:790;color:var(--ink-strong);margin:0}
.step {display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:9px;background:var(--primary-soft);color:var(--primary-soft-ink);font-size:12px;font-weight:800;letter-spacing:-.2px}
.panel-kicker {color:var(--muted-2);font-size:12px;white-space:nowrap;line-height:27px}
.field-label {font-size:13px;font-weight:730;display:block;color:var(--ink);margin-bottom:9px}
.name-input {display:block;width:100%;resize:vertical;min-height:242px;height:242px;max-height:550px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel-muted);color:var(--ink-strong);padding:13px 15px;line-height:1.8;font-size:14px;outline:0;transition:border-color .15s,box-shadow .15s}
.name-input:focus {border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.name-input::placeholder {color:var(--muted-2);opacity:.86}
.input-hint {color:var(--muted);font-size:12px;margin:11px 0 0;line-height:1.65}
.name-stats {margin-top:15px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted);background:var(--panel-muted);padding:12px;border-radius:10px}
.name-stats b {color:var(--ink-strong);font-weight:790}
.stat-divider {color:var(--line-strong)}
.mode-control {width:100%;padding:4px;border-radius:13px;background:var(--panel-muted);display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:20px;border:1px solid var(--line)}
.mode-button {border:0;border-radius:10px;background:transparent;color:var(--muted);min-height:44px;font-size:14px;font-weight:710}
.mode-button.active {background:var(--panel);color:var(--primary-soft-ink);box-shadow:0 2px 8px rgba(20,28,52,.08)}
.mode-button:hover:not(.active) {color:var(--ink)}
.number-row {display:flex;align-items:center;gap:12px}
.number-field {width:124px;height:48px;padding:0 12px;border-radius:11px;border:1px solid var(--line-strong);background:var(--panel-muted);color:var(--ink-strong);font-weight:720;outline:0}
.number-field:focus {border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.unit-text {font-size:14px;font-weight:700;color:var(--ink)}
.field-desc {color:var(--muted);font-size:12px;margin:9px 0 0}
.choice-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:17px}
.choice {display:flex;align-items:center;gap:7px;padding:12px;border:1px solid var(--line-strong);border-radius:11px;cursor:pointer;min-height:54px;font-size:12.5px;font-weight:700;color:var(--muted);transition:border-color .16s,background .16s}
.choice.checked {border-color:var(--primary);background:var(--primary-soft);color:var(--primary-soft-ink)}
.choice input {accent-color:var(--primary);margin:0;flex:none;width:16px;height:16px}
.choice:focus-within {outline:3px solid var(--teal);outline-offset:2px}
.setting-note {display:flex;align-items:start;gap:8px;background:var(--panel-muted);border-radius:10px;padding:11px 12px;margin-top:15px;font-size:12px;color:var(--muted);line-height:1.65}
.setting-note .icon {margin-top:1px;color:var(--primary);width:16px;height:16px}
.validation {min-height:18px;display:flex;align-items:center;gap:6px;font-size:12px;margin:12px 0 0;color:var(--muted)}
.validation.error {color:var(--error-ink)}
.validation.ok {color:var(--success-ink)}
.primary-action {display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:17px;min-height:52px;padding:12px 18px;border:0;border-radius:12px;background:var(--primary);color:var(--primary-contrast);font-size:15px;font-weight:770;box-shadow:0 6px 15px rgba(80,92,219,.16);transition:background .15s,transform .15s}
.primary-action:hover:not(:disabled) {background:var(--primary-hover);transform:translateY(-1px)}
.primary-action:disabled {box-shadow:none}
.result-panel {min-height:690px;display:flex;flex-direction:column}
.result-header {padding:24px 26px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.result-title-wrap {display:flex;flex-direction:column;gap:3px}
.result-headline {display:flex;align-items:center;gap:10px;font-size:18px;font-weight:790;letter-spacing:-.5px;color:var(--ink-strong);margin:0}
.result-subheading {color:var(--muted);font-size:12px;padding-left:37px}
.result-header-actions {display:flex;align-items:center;gap:8px}
.button-small {display:inline-flex;justify-content:center;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:10px;min-height:44px;padding:0 13px;font-size:12px;font-weight:750;white-space:nowrap}
.button-small:hover:not(:disabled) {background:var(--panel-muted);border-color:var(--primary)}
.button-small .icon {width:16px;height:16px}
.button-small.secondary-strong {border-color:var(--primary);color:var(--primary-soft-ink);background:var(--primary-soft)}
.result-body {padding:25px 26px 26px;min-width:0;flex:1;display:flex;flex-direction:column}
.empty-state {flex:1;min-height:510px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 12px}
.empty-visual {width:150px;height:146px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.empty-circle {width:112px;height:112px;border:2px dashed var(--line-strong);border-radius:50%;background:var(--panel-muted);display:grid;place-items:center;color:var(--primary)}
.empty-circle .icon {width:44px;height:44px;stroke-width:1.35}
.empty-avatar {position:absolute;width:38px;height:38px;border-radius:12px;background:var(--primary-soft);border:2px solid var(--panel);display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--primary-soft-ink)}
.empty-avatar.one {top:0;left:8px;transform:rotate(-14deg)}
.empty-avatar.two {right:1px;top:20px;background:#fae9df;color:#a85c4c;transform:rotate(12deg)}
.empty-avatar.three {bottom:0;left:54px;background:#dff4ee;color:#287f71;transform:rotate(-5deg)}
:root[data-theme="dark"] .empty-avatar.two {background:#503a44;color:#ffb9ab}
:root[data-theme="dark"] .empty-avatar.three {background:#244a48;color:#8bdece}
.empty-title {font-size:18px;font-weight:790;letter-spacing:-.5px;color:var(--ink-strong);margin:0}
.empty-desc {margin:10px auto 0;color:var(--muted);font-size:13px;max-width:330px;line-height:1.85}
.result-ready {flex:1;display:flex;flex-direction:column;gap:24px}
.result-info {display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.status-pill {display:inline-flex;align-items:center;gap:6px;background:var(--success-bg);color:var(--success-ink);padding:5px 10px;border-radius:99px;font-size:12px;font-weight:800}
.status-pill .icon {width:14px;height:14px}
.result-group {min-width:0}
.group-head {display:flex;align-items:center;gap:8px;margin-bottom:12px}
.group-head h3 {font-size:16px;margin:0;color:var(--ink-strong);font-weight:780;letter-spacing:-.3px}
.group-count {font-size:12px;font-weight:780;background:var(--panel-muted);color:var(--muted);border-radius:99px;padding:3px 9px}
.winners-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.winner {display:flex;align-items:center;gap:12px;min-width:0;border:1px solid #dfe0fc;border-radius:13px;background:var(--primary-soft);padding:13px 14px;font-weight:780;color:var(--ink-strong);overflow-wrap:anywhere;min-height:60px}
:root[data-theme="dark"] .winner {border-color:#41497a}
.winner-num {color:var(--primary-soft-ink);font-size:12px;font-weight:850;width:27px;min-width:27px;height:27px;border-radius:8px;background:var(--panel);display:grid;place-items:center}
.remaining-box {background:var(--panel-muted);border:1px solid var(--line);padding:17px;border-radius:14px}
.remaining-list {display:flex;flex-wrap:wrap;gap:8px}
.remaining-person {border:1px solid var(--line-strong);border-radius:9px;padding:7px 11px;font-size:13px;color:var(--ink);overflow-wrap:anywhere;max-width:100%;background:var(--panel)}
.none-message {color:var(--muted);font-size:13px;padding:8px 0}
.ordered-list {list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ordered-list li {display:flex;align-items:center;gap:12px;min-height:54px;padding:11px 13px;border:1px solid var(--line);background:var(--panel-muted);border-radius:12px;min-width:0;overflow-wrap:anywhere;font-weight:690}
.order-num {min-width:30px;height:30px;background:var(--primary-soft);border-radius:9px;display:grid;place-items:center;color:var(--primary-soft-ink);font-size:12px;font-weight:850}
.team-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.team-card {border:1px solid var(--line);background:var(--panel-muted);border-radius:14px;overflow:hidden;min-width:0}
.team-card-head {display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid var(--line)}
.team-card-head strong {color:var(--ink-strong);font-size:14px}
.team-card-head span {color:var(--muted);font-size:12px}
.team-members {list-style:none;margin:0;padding:9px 14px 14px;display:flex;flex-direction:column;gap:5px}
.team-members li {padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.team-members li:last-child {border-bottom:0}
.result-bottom {margin-top:auto;border-top:1px solid var(--line);padding-top:19px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.result-bottom-note {color:var(--muted);font-size:12px;max-width:310px}
.rerun-button {display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 18px;border-radius:11px;border:1px solid var(--primary);background:var(--primary-soft);color:var(--primary-soft-ink);font-weight:780;font-size:13px}
.rerun-button:hover:not(:disabled) {filter:brightness(.98)}
.roulette-board {display:flex;flex-direction:column;align-items:center;gap:14px;min-height:0;justify-content:flex-start;position:relative;container-type:inline-size;overflow-anchor:none}
.wheel-wrap {position:relative;width:min(420px,100%);aspect-ratio:1;display:grid;place-items:center;padding:12px;overflow-anchor:none}
.wheel-border {position:absolute;inset:0;border-radius:50%;background:#fff;border:11px solid #fff;box-shadow:0 0 0 1px rgba(17,28,53,.06),0 18px 40px rgba(17,28,53,.14)}
.wheel-disc {position:absolute;inset:14px;border-radius:50%;overflow:hidden;transform:rotate(var(--wheel-angle,0deg));transition:none;border:3px solid rgba(255,255,255,.72);container-type:inline-size}
.wheel-disc.spinning {transition:transform 2.65s cubic-bezier(.15,.7,.13,1)}
.wheel-label {position:absolute;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;max-width:30%;min-width:0;margin:0;padding:4px 10px;border:0;border-radius:999px;background:#fff;color:#182039;font-size:13px;font-weight:800;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;box-shadow:0 1px 3px rgba(24,32,57,.16);transform:translate(-50%,-50%);transition:transform 480ms cubic-bezier(.2,.7,.2,1);pointer-events:none;user-select:none}
.wheel-disc:not(.spinning):not(.is-settling) .wheel-label {transform:translate(-50%,-50%) rotate(calc(-1 * var(--wheel-upright, 0deg)))}
.wheel-disc.spinning .wheel-label {transition:none}
.wheel-center {position:absolute;z-index:2;width:112px;height:112px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#fff;box-shadow:0 2px 13px rgba(20,29,63,.15);color:#182039;font-weight:800;font-size:12px;border:5px solid rgba(255,255,255,.92)}
.wheel-center .icon {color:#505cdb;width:23px;height:23px}
.wheel-center span {font-size:11px;color:#606d83}
.wheel-pointer {position:absolute;top:-2px;z-index:4;left:50%;width:0;height:0;transform:translateX(-50%);border-left:14px solid transparent;border-right:14px solid transparent;border-top:28px solid #1b2440;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18))}
.wheel-note {font-size:12px;color:var(--muted);text-align:center;line-height:1.6;margin:3px 0 0}
.winner-reveal {text-align:center;margin:3px auto 0;width:100%;max-width:520px;border:1px solid var(--line);border-radius:15px;padding:19px 22px;background:var(--panel-muted)}
.winner-reveal-label {font-size:12px;color:var(--muted);font-weight:800;margin-bottom:5px}
.winner-reveal-name {font-size:clamp(23px,2.7vw,36px);line-height:1.35;letter-spacing:-.7px;color:var(--primary-soft-ink);font-weight:860;overflow-wrap:anywhere}
.winner-reveal.pending .winner-reveal-name {font-size:17px;color:var(--muted);font-weight:600}
.trust-strip {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:22px}
.trust-cell {display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:12px;background:var(--panel);min-width:0}
.trust-cell .icon {color:var(--teal);width:18px;height:18px}
.site-footer {max-width:1372px;margin:0 auto;padding:0 40px 28px;display:flex;justify-content:space-between;gap:12px;color:var(--muted-2);font-size:11px}
.copy-feedback {font-size:12px;display:inline-flex;align-items:center;gap:6px;color:var(--success-ink);font-weight:730}
.copy-feedback.failed {color:var(--error-ink)}
.presentation[hidden] {display:none!important}
.presentation {position:fixed;inset:0;background:var(--canvas);z-index:1000;display:flex;flex-direction:column;color:var(--ink-strong);overflow:auto}
body.has-presentation {overflow:hidden}
.presentation-top {padding:18px max(28px,calc((100vw - 1300px)/2));border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:center;justify-content:space-between;background:var(--panel)}
.presentation-brand {display:flex;align-items:center;gap:12px;font-weight:780;color:var(--ink-strong)}
.presentation-brand .brand-mark {width:33px;height:33px;border-radius:10px}
.presentation-brand .brand-mark .icon {width:21px;height:21px}
.presentation-controls {display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.presentation-action {display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:11px;border:1px solid var(--line-strong);background:var(--panel);font-size:13px;font-weight:760;color:var(--ink)}
.presentation-action.is-primary {background:var(--primary);color:var(--primary-contrast);border-color:var(--primary)}
.presentation-action .icon {width:17px;height:17px}
.presentation-action[aria-disabled="true"] {opacity:.55;cursor:not-allowed}
.presentation-main {width:100%;max-width:1320px;margin:0 auto;padding:clamp(35px,5vh,78px) 35px 80px;text-align:center;display:flex;flex-direction:column;align-items:stretch;gap:22px}
.presentation-eyebrow {font-size:12px;letter-spacing:2px;font-weight:820;color:var(--primary-soft-ink)}
.presentation-title {margin:0;font-size:clamp(31px,4vw,56px);font-weight:870;letter-spacing:-1.5px;line-height:1.25;outline:none}
.presentation-description {color:var(--muted);font-size:15px;margin:0}
.presentation-groups {margin-top:18px;text-align:left;display:flex;flex-direction:column;gap:25px}
.presentation-section {border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:clamp(20px,2.5vw,35px)}
.presentation-section h3 {font-size:clamp(19px,2.2vw,26px);margin:0 0 17px;color:var(--ink-strong)}
.presentation-winners {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.presentation-person {display:flex;align-items:center;gap:16px;background:var(--primary-soft);border:1px solid var(--line);border-radius:13px;padding:19px 21px;font-size:clamp(21px,2.35vw,32px);font-weight:820;overflow-wrap:anywhere;min-width:0}
.presentation-person .number {background:var(--panel);color:var(--primary-soft-ink);font-size:15px;border-radius:10px;padding:8px 11px}
.presentation-remaining {display:flex;flex-wrap:wrap;gap:13px}
.presentation-remaining span {border:1px solid var(--line);border-radius:11px;background:var(--panel-muted);padding:12px 16px;font-size:clamp(16px,1.8vw,22px);overflow-wrap:anywhere}
.presentation-order {display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.presentation-order-item {background:var(--panel-muted);padding:18px;border:1px solid var(--line);border-radius:12px;display:flex;gap:13px;align-items:center;overflow-wrap:anywhere;font-size:clamp(19px,2vw,28px);font-weight:760}
.presentation-order-item strong {color:var(--primary-soft-ink);font-size:16px}
.presentation-team-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:17px}
.presentation-team {border-radius:15px;border:1px solid var(--line);background:var(--panel-muted);padding:20px 23px}
.presentation-team h3 {font-size:clamp(22px,2.4vw,30px);margin:0 0 12px}
.presentation-team ul {list-style:none;margin:0;padding:0;display:grid;gap:10px}
.presentation-team li {font-size:clamp(18px,1.85vw,26px);overflow-wrap:anywhere}
.presentation-roulette-winner {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;background:var(--primary-soft);border:1px solid var(--line);border-radius:20px;min-height:245px;padding:40px 24px}
.presentation-roulette-winner span {font-size:18px;color:var(--primary-soft-ink);font-weight:780}
.presentation-roulette-winner strong {font-size:clamp(38px,6vw,82px);font-weight:850;line-height:1.2;overflow-wrap:anywhere;max-width:100%}
.presentation-feedback {font-size:12px;color:var(--success-ink);font-weight:760}
@media (max-width:1110px) {
 .header-inner {gap:22px;padding:0 26px}
 .nav-link {padding:0 12px}
 .app-shell {padding-left:26px;padding-right:26px}
 .site-footer {padding-left:26px;padding-right:26px}
 .workspace {grid-template-columns:minmax(315px,390px) minmax(0,1fr);gap:16px}
 .panel-inner {padding:20px}
 .result-header {padding:20px}
 .result-body {padding:21px}
 .private-top {display:none}
 .trust-strip {grid-template-columns:repeat(2,1fr)}
 .winners-grid,.ordered-list,.team-grid {grid-template-columns:1fr}
}
@media (max-width:760px) {
 .header-inner {padding:10px 18px 11px;display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:9px}
 .brand-mark {width:35px;height:35px;border-radius:11px}
 .brand-mark .icon {width:23px;height:23px}
 .brand-word {font-size:20px}
 .primary-nav {grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:4px;min-width:0}
 .header-actions {grid-column:2;grid-row:1}
 .nav-link {font-size:12px;padding:0 7px;gap:6px;min-height:44px}
 .nav-link .icon {width:16px;height:16px}
 .app-shell {padding:23px 16px 26px}
 .page-intro {margin-bottom:20px}
 .page-title {font-size:27px;letter-spacing:-1px}
 .page-eyebrow {font-size:10px}
 .page-description {font-size:12.5px;line-height:1.7}
 .page-deco {display:none}
 .workspace {grid-template-columns:minmax(0,1fr);gap:17px}
 .control-stack {gap:17px}
 .panel {border-radius:17px}
 .panel-inner {padding:20px 18px}
 .name-input {height:204px;min-height:204px}
 .result-panel {min-height:525px}
 .result-header {padding:20px 18px;gap:13px}
 .result-body {padding:20px 18px}
 .empty-state {min-height:360px}
 .winners-grid,.ordered-list {grid-template-columns:repeat(2,minmax(0,1fr))}
 .team-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .trust-strip {gap:9px;grid-template-columns:1fr 1fr;margin-top:17px}
 .trust-cell {padding:12px 10px;font-size:11px;gap:8px}
 .site-footer {padding:0 18px 23px;flex-direction:column;font-size:10px}
 .presentation-top {padding:13px 16px;gap:8px}
 .presentation-brand .brand-mark {display:none}
 .presentation-brand {font-size:12px;white-space:nowrap}
 .presentation-action {min-height:44px;padding:0 10px;font-size:12px}
 .presentation-controls {gap:6px}
 .presentation-main {padding:32px 16px 50px;gap:14px}
 .presentation-title {font-size:34px}
 .presentation-section {padding:18px}
}
@media (max-width:440px) {
 .nav-link .icon {display:none}
 .choice-grid {gap:8px}
 .choice {padding:9px;font-size:12px}
 .result-header {align-items:start}
 .result-header-actions {width:100%;gap:8px}
 .result-header-actions .button-small {flex:1}
 .winners-grid,.ordered-list,.team-grid {grid-template-columns:1fr}
 .result-bottom {align-items:stretch}
 .result-bottom-note {max-width:none}
 .rerun-button {width:100%}
 .trust-strip {grid-template-columns:1fr}
 .wheel-wrap {width:min(420px,100%)}
 .presentation-top {display:grid;grid-template-columns:1fr;row-gap:9px}
 .presentation-brand {font-size:11px}
 .presentation-controls {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .presentation-action {width:auto;min-width:0;padding:0 6px;font-size:11px;gap:5px}
 .presentation-action .icon {width:15px;height:15px}
 .presentation-action span.label {display:inline}
 .presentation-controls .presentation-action:last-child {width:auto;padding:0 6px}
 .presentation-person {font-size:23px}
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* v0.1.1 · 큰 명단/긴 이름/많은 팀을 위한 가독성과 스크롤 개선 */
[hidden] {display:none!important}
.person-text {min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal}
.name-input.many-names {height:320px;max-height:560px}
.result-panel.is-high-volume {overflow:visible}
.result-panel.is-high-volume .result-header {
  position:sticky;
  top:8px;
  z-index:4;
  border-radius:19px 19px 0 0;
  background:var(--panel);
  box-shadow:0 5px 18px rgba(22,34,75,.10);
}
.result-headline {scroll-margin-top:18px}
.result-ready.is-dense .result-info {padding-bottom:5px;border-bottom:1px solid var(--line)}
.result-ready.is-dense .winners-grid,
.result-ready.is-dense .ordered-list {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,222px),1fr));
  gap:10px;
}
.result-ready.is-dense .remaining-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr));
  align-items:start;
  gap:8px;
}
.result-ready.is-dense .remaining-person {display:block;min-width:0;padding:10px 12px}
.result-ready.is-dense .team-grid {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:12px;
}
.result-ready.is-dense .team-members {padding:6px 12px 10px}
.result-ready.is-dense .team-card-head {padding:11px 12px}
.result-ready.is-dense .team-members li {padding:6px 0}
.result-ready.is-dense .order-num {min-width:38px;width:auto;padding-inline:5px}
.result-ready.is-dense .winner-num {min-width:34px;width:auto;padding-inline:5px}
.presentation {overscroll-behavior:contain}
.presentation-top {position:sticky;top:0;z-index:10;box-shadow:0 3px 12px rgba(20,30,65,.06)}
.presentation-groups.is-dense .presentation-team-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,225px),1fr));gap:12px}
.presentation-groups.is-dense .presentation-team {padding:15px 17px}
.presentation-groups.is-dense .presentation-team li {font-size:clamp(17px,1.6vw,23px);line-height:1.5}
.presentation-groups.is-dense .presentation-order {grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),1fr));gap:10px}
.presentation-groups.is-dense .presentation-order-item {padding:14px;align-items:flex-start;font-size:clamp(18px,1.75vw,25px)}
.presentation-groups.is-dense .presentation-winners {grid-template-columns:repeat(auto-fill,minmax(min(100%,225px),1fr))}
.presentation-groups.is-dense .presentation-person {padding:15px 16px;align-items:flex-start}
.presentation-groups.is-dense .presentation-remaining {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,195px),1fr));gap:10px}
.presentation-groups.is-dense .presentation-remaining span {display:block;min-width:0}
@media (max-width:760px) {
  .name-input.many-names {height:255px;max-height:420px}
  .result-panel.is-high-volume .result-header {top:0;border-radius:16px 16px 0 0;padding:14px 18px}
  .is-high-volume .result-header-actions {width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .is-high-volume .result-header-actions .button-small {min-width:0;padding-inline:7px;white-space:nowrap}
  .presentation-groups.is-dense .presentation-team-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
}
@media (max-width:440px) {
  .is-high-volume .result-header-actions {grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-high-volume #rerun-shortcut {grid-column:1/-1}
  .result-ready.is-dense .remaining-list {grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
  .presentation-top {gap:7px}
}

@media (max-width:440px) {
  .result-panel.is-high-volume .result-subheading {display:none}
  .result-panel.is-high-volume .result-header {gap:9px}
}

/* v0.1.2 · Chromium에서 검증된 761~960px 태블릿 레이아웃 보정.
   기존의 좁은 2열 워크스페이스는 결과 헤더 버튼을 가릴 수 있습니다. */
@media (min-width:761px) and (max-width:960px) {
  .workspace {grid-template-columns:minmax(0,1fr);gap:20px}
  .control-stack {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:17px}
  .result-panel {min-height:470px}
  .result-header-actions {flex-wrap:wrap;min-width:0}
}
/* 작은 휴대전화에서도 발표 화면에서 모든 조작 라벨을 한 줄로 표시합니다. */
.presentation-action {white-space:nowrap}
@media (max-width:360px) {
  .presentation-controls {gap:5px}
  .presentation-action {gap:2px;padding:0 5px;font-size:11px}
  .presentation-action .icon {display:none}
}
/* 브랜드 링크도 모바일에서 최소 44px 높이의 터치 영역을 유지합니다. */
.brand {min-height:44px}

/* v0.1.3 · 명확한 키보드 초점과 회전 중 재실행 상태 */
.presentation-title:focus,
.page-title:focus {
  outline: 3px solid var(--teal);
  outline-offset: 6px;
  border-radius: 5px;
}
/* 라우트 전환 직후 제목 초점 테두리가 상단 보조문구와 설명에 겹치지 않게 합니다. */
.page-title:focus {outline-offset: 0}
.rerun-button[aria-disabled="true"] {opacity:.55;cursor:not-allowed}
.presentation-feedback.failed {color:var(--error-ink)}

.primary-action[aria-disabled="true"] {opacity:.55;cursor:not-allowed;box-shadow:none}

/* v0.1.4 · 모바일 입력→실행→결과 동선 최적화 */
.result-headline:focus {outline:3px solid var(--teal);outline-offset:5px;border-radius:5px}
@media (max-width:760px) {
  /* 설정을 숨기거나 실행 버튼을 중복 생성하지 않고 초기 화면의 수직 거리를 줄입니다. */
  .app-shell {padding-top:16px}
  .page-intro {margin-bottom:12px}
  .page-eyebrow {margin-bottom:4px}
  .page-description {margin-top:5px}
  .workspace,.control-stack {gap:12px}
  .panel-inner {padding:16px 18px}
  .panel-heading {margin-bottom:12px}
  .name-input {height:168px;min-height:168px}
  .name-input.many-names {height:220px;min-height:220px}
  .input-hint {margin-top:8px}
  .name-stats {margin-top:10px;padding:9px 10px}
  .settings-panel .mode-control {margin-bottom:14px}
  .settings-panel .setting-note {margin-top:10px}
  .settings-panel .validation {margin-top:8px}
  .settings-panel .primary-action {margin-top:12px}
  .result-headline {scroll-margin-top:20px}
  /* 재실행은 결과 상단에서도 가능하며, 본문의 재실행 버튼 역시 유지합니다. */
  .result-panel.has-result .result-header-actions {width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .result-panel.has-result .result-header-actions .button-small {min-width:0;padding-inline:7px;white-space:nowrap}
}
@media (max-width:440px) {
  .result-panel.has-result .result-header-actions {grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-panel.has-result #rerun-shortcut {grid-column:1/-1}
}
@media (max-width:360px) {
  .name-stats {gap:3px;font-size:11px;padding-inline:8px}
}
/* 결과 제목으로 초점을 옮겼을 때 초점 테두리가 보조 설명을 가리지 않도록 간격을 확보합니다. */
@media (max-width:760px) {
  .result-panel.has-result .result-title-wrap {gap:10px}
}


/* v0.1.5 · 검색 유입용 짧은 설명을 도구/개인정보 안내 아래에 배치합니다. */
.usage-guide {margin-top:24px;padding:25px 28px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow)}
.usage-heading h2 {font-size:18px;line-height:1.4;font-weight:820;letter-spacing:-.45px;margin:0;color:var(--ink-strong)}
.usage-heading p {font-size:13px;line-height:1.75;color:var(--muted);margin:6px 0 0}
.usage-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:17px}
.usage-card {border-left:2px solid var(--line-strong);padding:2px 4px 2px 15px;min-width:0}
.usage-card h3 {font-size:13.5px;color:var(--ink-strong);font-weight:760;margin:0 0 5px;line-height:1.5}
.usage-card p {font-size:12px;line-height:1.75;color:var(--muted);margin:0;overflow-wrap:anywhere}
@media (max-width:760px) {
 .usage-guide {padding:19px 18px;margin-top:17px;border-radius:17px}
 .usage-grid {grid-template-columns:1fr;gap:14px}
 .usage-card {padding-left:13px}
}

/* 500~1,000명 규모에서도 전원 결과를 DOM/복사/발표에 남기되,
   화면 밖의 고밀도 카드에 대한 브라우저의 레이아웃·페인트 작업을 줄입니다.
   content-visibility:auto는 DOM에서 항목을 제거하지 않아 검색·접근성·텍스트 복사에 영향을 주지 않습니다. */
.result-ready.is-huge .winner,
.result-ready.is-huge .ordered-list li {
  content-visibility: auto;
  contain-intrinsic-size: auto 30px;
}
.result-ready.is-huge .remaining-person {
  content-visibility: auto;
  contain-intrinsic-size: auto 14px;
}
.result-ready.is-huge .team-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 130px;
}
.presentation-groups.is-huge .presentation-person,
.presentation-groups.is-huge .presentation-order-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 30px;
}
.presentation-groups.is-huge .presentation-remaining span {
  content-visibility: auto;
  contain-intrinsic-size: auto 22px;
}
.presentation-groups.is-huge .presentation-team {
  content-visibility: auto;
  contain-intrinsic-size: auto 110px;
}
/* 보이는 행 높이와 최대한 비슷한 추정치를 사용해 긴 스크롤의 위치 변화 방지 */
.presentation-groups.is-huge .presentation-person {contain-intrinsic-size: auto 38px}
.presentation-groups.is-huge .presentation-order-item {contain-intrinsic-size: auto 28px}
@media (min-width:900px) {
  .presentation-groups.is-huge .presentation-person {contain-intrinsic-size: auto 55px}
  .presentation-groups.is-huge .presentation-order-item {contain-intrinsic-size: auto 40px}
  .presentation-groups.is-huge .presentation-team {contain-intrinsic-size: auto 140px}
}

/* 로컬 확대·장문·대규모 발표 검증: 긴 토큰도 가로 넘침 없이 표시합니다. */
.wheel-note,.winner-reveal-name,.presentation-roulette-winner strong {overflow-wrap:anywhere}
.presentation-team,.presentation-section,.presentation-order-item,.team-card {min-width:0}
@media (max-width:600px) {
  .presentation-main {min-width:0;padding-inline:16px}
  .presentation-groups {min-width:0}
  .presentation-team-grid,.presentation-order,.presentation-winners {grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px) {
  .presentation-top {padding-inline:10px}
  .presentation-brand {font-size:12px;gap:6px}
}

/* v0.2.0 기능 추가: 원본 이름은 바꾸지 않고 표시만 격리 */
.person-text, .remaining-person, .wheel-label, .winner-reveal-name, .presentation-remaining span {unicode-bidi:plaintext; overflow-wrap:anywhere;}
.name-label-row {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.name-label-row .field-label {margin-bottom:0}
.clear-names {min-height:44px;border:1px solid var(--line);background:var(--panel-muted);color:var(--muted);padding:8px 12px;border-radius:10px;display:inline-flex;gap:5px;align-items:center;font-size:13px}
.clear-names:disabled {opacity:.42}
.result-search {padding:14px 23px;border-bottom:1px solid var(--line);background:var(--panel-muted)}
.result-search[hidden] {display:none}
.result-search label {display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.result-search-row {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.result-search input {background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:10px;padding:9px 12px;min-height:44px;flex:1;min-width:130px;max-width:320px}
#result-search-count {font-size:13px;color:var(--muted);white-space:nowrap}
.found-name {background:var(--success-bg)!important;color:var(--success-ink)!important;box-shadow:inset 0 0 0 2px var(--teal);border-radius:4px}
.found-current {outline:3px solid var(--primary);outline-offset:3px}
.team-card.found-team {border-color:var(--teal)}
.presentation-size-controls,.presentation-team-nav {display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.presentation-size-controls span,.presentation-team-nav span {font-size:12px;white-space:nowrap;color:var(--ink)}
.presentation-team {scroll-margin-top:124px}
.presentation-team:focus {outline:3px solid var(--teal);outline-offset:2px}
/* 글자 크기를 기존 clamp 계산에 곱해 팀/이름의 기본 가독성을 유지합니다. */
.presentation-groups .presentation-person {font-size:calc(clamp(21px,2.35vw,32px) * var(--presentation-scale,1))}
.presentation-groups.is-dense .presentation-person {font-size:calc(clamp(18px,2vw,27px) * var(--presentation-scale,1))}
.presentation-groups .presentation-order-item {font-size:calc(clamp(19px,2vw,28px) * var(--presentation-scale,1))}
.presentation-groups.is-dense .presentation-order-item {font-size:calc(clamp(18px,1.75vw,25px) * var(--presentation-scale,1))}
.presentation-groups .presentation-team li {font-size:calc(clamp(18px,1.85vw,26px) * var(--presentation-scale,1))}
.presentation-groups.is-dense .presentation-team li {font-size:calc(clamp(17px,1.6vw,23px) * var(--presentation-scale,1))}
.presentation-groups .presentation-remaining span {font-size:calc(clamp(16px,1.8vw,22px) * var(--presentation-scale,1))}
.presentation-roulette-winner strong {font-size:calc(clamp(38px,6vw,82px) * var(--presentation-scale,1))}
@media(max-width:760px) { .result-search {padding:12px 14px} .presentation-controls {flex-wrap:wrap} .presentation-team {scroll-margin-top:175px} }
@media(max-width:380px) { .presentation-size-controls, .presentation-team-nav {gap:4px} }

/* 44px 발표 글자 조작 터치 대상 */
.presentation-size-controls .presentation-action {min-width:44px;min-height:44px;}

/* v0.2.1 — result search navigation, 44px touch targets */
.result-search-actions {display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.result-search-actions .button-small {min-height:44px;white-space:nowrap}
@media (max-width:440px) {
  /* 발표 제목/맥락은 본문에 남기고, 상단의 중복 브랜드 행만 숨깁니다. */
  .presentation-top {display:block;padding:7px 8px 8px}
  .presentation-brand {display:none}
  .presentation-controls {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:"run run copy copy exit exit" "size size size size size size";
    gap:5px;width:100%;align-items:center}
  .presentation-controls:has(.presentation-team-nav) {grid-template-areas:"run run copy copy exit exit" "size size size team team team"}
  #presentation-rerun {grid-area:run}
  #presentation-copy {grid-area:copy}
  #presentation-exit {grid-area:exit}
  .presentation-size-controls {grid-area:size;min-width:0;justify-content:center;flex-wrap:nowrap}
  .presentation-team-nav {grid-area:team;min-width:0;justify-content:center;flex-wrap:nowrap}
  .presentation-action {min-height:44px;font-size:11px}
  .presentation-size-controls span,.presentation-team-nav span {font-size:11px}
  .presentation-team-nav .presentation-action {min-width:44px;min-height:44px;padding-inline:2px}
  .result-search-row {gap:7px}
  .result-search input {max-width:none;flex-basis:100%;min-width:0}
  .result-search-actions {width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .result-search-actions .button-small {min-width:0;width:100%;padding-inline:2px;font-size:12px}
}
@media (max-width:360px) {
  .presentation-controls:has(.presentation-team-nav) {
    grid-template-areas:"run run copy copy exit exit" "size size size size size size" "team team team team team team";
  }
}

/* v0.2.4 / UX-01~13: 결과 탐색, 팀 예상치, 발표 조작, 명단 관리 */
.team-preview {margin-top:13px;padding:12px 13px;border:1px solid var(--line-strong);border-radius:11px;background:var(--primary-soft);color:var(--primary-soft-ink);font-size:13px;line-height:1.55;font-weight:750;overflow-wrap:anywhere}
.pick-presets {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.preset-button {min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);background:var(--panel-muted);color:var(--ink);border-radius:10px;font-size:12px;font-weight:700}
.preset-button[aria-pressed="true"] {border-color:var(--primary);background:var(--primary-soft);color:var(--primary-soft-ink)}
.preset-button:hover:not(:disabled) {border-color:var(--primary)}
.jump-settings {display:none;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:10px;width:100%;border:1px solid var(--line-strong);border-radius:11px;background:var(--panel-muted);color:var(--ink);font-size:13px;font-weight:720}
.search-toggle {display:none;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:11px;background:var(--panel);color:var(--ink);font-size:13px;font-weight:730}
.search-toggle .icon {transition:transform .16s}
.search-expanded .search-toggle .icon {transform:rotate(90deg)}
.result-search-fields {min-width:0}
.result-jumps {display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.result-jumps .button-small {min-height:44px}
.empty-state.was-reset .empty-circle {border-style:solid}
/* Native modal handles focus trapping and inert background without external dependencies. */
.clear-dialog {border:1px solid var(--line-strong);border-radius:18px;background:var(--panel);color:var(--ink);padding:24px;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 32px);box-shadow:0 22px 80px rgba(0,0,0,.25)}
.clear-dialog::backdrop {background:rgba(10,17,38,.66)}
.clear-dialog h2 {font-size:21px;font-weight:800;margin:0;color:var(--ink-strong)}
.clear-dialog p {font-size:14px;line-height:1.7;margin:12px 0 22px;color:var(--muted)}
.clear-dialog-actions {display:flex;gap:10px;justify-content:flex-end}
.clear-dialog-actions button {min-height:46px;min-width:116px}
.clear-dialog-confirm {background:var(--error-bg);border:1px solid var(--error-ink);color:var(--error-ink);border-radius:10px;font-weight:760;padding:10px 16px}
/* Default desktop presentation: options are visible without extra action. */
.presentation-controls {flex-wrap:wrap}
.presentation-options {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.presentation-options-toggle {display:none}
.presentation-team-grid:has(.team-focused) {grid-template-columns:minmax(0,min(100%,860px));justify-content:center}
.presentation-team.team-focused {width:100%;max-width:860px;margin-inline:auto;padding:clamp(18px,3.5vw,42px)}
.presentation-team.team-focused h3 {font-size:clamp(24px,3vw,42px)}
.presentation-team.team-focused li {font-size:calc(clamp(21px,2.8vw,40px) * var(--presentation-scale,1));padding-block:9px}
@media (max-width:760px) {
 .search-toggle {display:flex}
 .result-search.search-collapsed .result-search-fields {display:none}
 .result-search.search-expanded .result-search-fields {padding-top:12px}
 .result-search:not([hidden]) {padding:10px 14px}
 .jump-settings {display:flex}
 .presentation-top {display:block;padding:9px 12px}
 .presentation-brand {display:none}
 .presentation-controls,
 .presentation-controls:has(.presentation-team-nav) {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"run copy exit" "toggle toggle toggle" "panel panel panel";gap:7px;width:100%;align-items:center}
 #presentation-rerun {grid-area:run}
 #presentation-copy {grid-area:copy}
 #presentation-exit {grid-area:exit}
 #presentation-options-toggle {grid-area:toggle;display:flex;justify-content:center;width:100%;min-height:44px;background:var(--panel-muted);color:var(--ink)}
 .presentation-options {grid-area:panel;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;padding:8px 4px 3px;border-top:1px solid var(--line)}
 .presentation-options.is-closed {display:none}
 .presentation-options .presentation-size-controls,
 .presentation-options .presentation-team-nav {grid-area:auto;display:flex;flex-wrap:wrap;justify-content:center}
 .presentation-options #presentation-team-focus {min-height:44px}
 .presentation-controls > .presentation-action {min-width:0;min-height:44px;font-size:12px;padding-inline:5px;white-space:nowrap}
 .presentation-main {padding-top:18px}
 .presentation-team.team-focused {padding:20px 15px}
}
@media (max-width:440px) {
 .presentation-controls,
 .presentation-controls:has(.presentation-team-nav) {grid-template-areas:"run copy exit" "toggle toggle toggle" "panel panel panel";grid-template-columns:repeat(3,minmax(0,1fr))}
 .presentation-options .presentation-size-controls,.presentation-options .presentation-team-nav {grid-area:auto;flex-wrap:wrap}
 .presentation-options .presentation-team-nav .presentation-action {min-width:44px}
 .presentation-controls > .presentation-action {font-size:11px}
 .result-search-row {gap:8px}
 .result-search-actions {margin-top:4px}
 .name-stats {display:grid;grid-template-columns:minmax(0,1fr) 0 minmax(0,1fr) 0 minmax(0,1fr);gap:0;text-align:center;align-items:center;font-size:11px;line-height:1.55;padding:9px 5px}
 .name-stats > span:not(.stat-divider) {min-width:0;white-space:normal}
 .name-stats .removed-word {display:none}
 .stat-divider {width:0;overflow:hidden;font-size:0}
 .result-jumps {display:grid;grid-template-columns:1fr 1fr}
 .result-jumps button {min-width:0}
 .clear-dialog {padding:20px 16px}
 .clear-dialog-actions button {flex:1;min-width:0}
 .pick-presets {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .preset-button {min-width:0;padding-inline:2px}
}
@media (prefers-reduced-motion:reduce) {
 .search-toggle .icon {transition:none}
}
/* Space-efficient mobile workspace: keep input, error message and action reachable. */
.team-note-content {min-width:0}
.team-note .team-preview {margin:0 0 3px;padding:0;border:0;border-radius:0;background:none;color:var(--primary-soft-ink);font-size:12px;line-height:1.5;font-weight:780}
@media (max-width:760px) {
 .app-shell {padding-top:15px}
 .page-intro {margin-bottom:12px}
 .page-eyebrow {margin-bottom:4px}
 .page-description {margin-top:5px}
 .control-stack {gap:10px}
 .input-panel .panel-inner {padding-block:16px}
 .name-input {height:138px;min-height:138px}
 .name-input.many-names {height:206px;min-height:206px}
 .input-hint {margin-top:7px;line-height:1.55}
 .jump-settings {margin-top:7px}
 .settings-panel .panel-inner {padding-block:16px}
 .settings-panel .panel-heading {margin-bottom:12px}
 .setting-note {margin-top:10px}
}
@media (max-width:760px) {
 .settings-panel .choice-grid {margin-bottom:11px}
 .settings-panel .choice {min-height:48px}
 .settings-panel .setting-note {font-size:11.5px;line-height:1.45;padding-block:9px}
 .settings-panel .validation {margin-top:8px}
 .settings-panel .primary-action {margin-top:12px}
}
@media (max-width:760px) {
 .page-intro {margin-bottom:8px}
 .input-panel .panel-inner,.settings-panel .panel-inner {padding-block:13px}
}


/* v0.2.7 — 안정적인 결과 탐색, 명단 편집, 발표 팀 이동 */
.names-tools {display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.names-tools .button-small {min-height:44px;display:inline-flex;gap:6px;align-items:center}
.edit-names-shortcut {white-space:nowrap}
.edit-names-footer {min-height:44px}
.search-navigation-dock[hidden] {display:none!important}
.search-navigation-dock {position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:160;display:flex;align-items:center;justify-content:center;gap:8px;width:min(500px,calc(100% - 20px));padding:10px 12px;background:var(--panel);border:2px solid var(--primary);box-shadow:0 8px 28px rgba(12,20,46,.3);border-radius:16px;color:var(--ink)}
.search-navigation-dock .button-small {min-height:44px;flex:1;min-width:0;white-space:nowrap;padding:8px 4px}
.search-navigation-dock #search-dock-count {font-size:12px;font-weight:700;white-space:nowrap;min-width:0}
.found-current {scroll-margin-top:110px;scroll-margin-bottom:90px}
.manual-copy-dialog {width:min(660px,calc(100vw - 24px))}
.manual-copy-dialog textarea {display:block;width:100%;height:min(42vh,360px);min-height:150px;background:var(--panel-muted);color:var(--ink-strong);border:1px solid var(--line-strong);padding:12px;border-radius:12px;white-space:pre;font-size:14px;line-height:1.65;resize:vertical;margin:12px 0}
.name-editor-dialog {border:1px solid var(--line-strong);border-radius:16px;background:var(--panel);color:var(--ink);padding:0;width:min(900px,calc(100vw - 24px));height:min(92dvh,900px);max-height:92dvh;box-shadow:0 22px 80px rgba(0,0,0,.27);display:flex;flex-direction:column}
.name-editor-dialog:not([open]) {display:none}
.name-editor-dialog::backdrop {background:rgba(10,17,38,.70)}
.name-editor-dialog .editor-heading {padding:18px 20px 9px}
.editor-heading h2 {margin:0 0 4px;font-size:21px}
.editor-heading p {font-size:13px;color:var(--muted);margin:0}
.name-editor-dialog textarea {background:var(--panel-muted);color:var(--ink-strong);flex:1;min-height:0;resize:none;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:10px;padding:16px;font-size:16px;line-height:1.75;font-family:inherit;margin:10px 18px}
.name-editor-dialog .editor-actions {display:flex;justify-content:flex-end;gap:10px;padding:10px 18px 18px}
.name-editor-dialog button {min-height:44px}
.presentation-team-jump {display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.presentation-team-jump label {font-size:12px;color:var(--ink);white-space:nowrap}
.presentation-team-jump input {width:76px;min-width:64px;height:44px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink-strong);padding:7px 8px;font-size:16px}
.presentation-team-jump input[aria-invalid="true"] {outline:2px solid var(--error-ink)}
.presentation-team-jump button {min-width:44px;min-height:44px}
@media(max-width:760px) {
  .names-tools {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .names-tools button {font-size:12px;min-width:0;justify-content:center;padding-inline:5px}
  .result-header-actions .edit-names-shortcut {order:4;flex-basis:100%}
  .result-header-actions {gap:6px}
  .search-navigation-dock {padding:7px;gap:4px;border-radius:12px}
  .search-navigation-dock .button-small {font-size:12px}
  .search-navigation-dock #search-dock-count {font-size:11px}
  .name-editor-dialog .editor-heading {padding:13px 14px 5px}
  .name-editor-dialog textarea {margin:8px 12px;font-size:16px}
  .name-editor-dialog .editor-actions {padding:8px 12px 12px}
  .presentation-team-jump {width:100%;justify-content:center}
}
@media(max-width:360px) {
  .search-navigation-dock #search-dock-count {max-width:65px;white-space:normal;line-height:1.35}
  .search-navigation-dock .button-small {font-size:11px}
}

/* v0.2.7 mobile: 명단 관리와 실행 이동을 한 행에 통합해 첫 실행 거리를 유지합니다. */
@media(max-width:760px) {
  .name-actions-row {display:grid;grid-template-columns:2fr 1fr;gap:6px;align-items:stretch;margin-top:7px}
  .name-actions-row .names-tools {margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .name-actions-row .names-tools .button-small {min-width:0;min-height:44px;font-size:11px;white-space:normal;line-height:1.25;padding:5px 4px}
  .name-actions-row .names-tools .icon {display:none}
  .name-actions-row .jump-settings {margin-top:0;min-width:0;font-size:11px;line-height:1.25;white-space:normal;gap:4px;padding:5px 4px}
  .name-actions-row .jump-settings .icon {display:none}
  .input-panel .input-hint {margin-top:5px}
  .input-panel .name-stats {margin-top:8px}
  .control-stack {gap:9px}
}

/* v0.2.7: 5,000명 순서 발표는 네이티브 ol 번호로 표시해 불필요한 번호 DOM 노드를 줄입니다. */
.presentation-order {margin:0;padding:0;list-style:decimal inside}
.presentation-order-item {display:list-item;list-style:decimal inside}
.presentation-order-item::marker {color:var(--primary-soft-ink);font-size:.78em;font-weight:800}
.presentation-order-item .person-text {display:inline;overflow-wrap:anywhere}
/* v0.2.10 · UX-25~37: 시각적 계층과 공통 간격을 이 섹션에서 통제합니다.
   기존 색상 토큰·추첨 로직·정보 구조를 유지합니다. */
:root {
  --control-height: 44px;
  --card-radius: 14px;
  --keyboard-inset: 0px;
}
/* UX-27: 결과에서 가장 중요한 동작을 한 그룹에 배치합니다. */
.result-title-wrap {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:10px;
  row-gap:1px;
  align-items:center;
  min-width:0;
}
.result-headline {grid-column:1;grid-row:1;line-height:1.4}
.result-subheading {grid-column:1/-1;grid-row:2;padding-left:0;font-size:12px}
.edit-names-shortcut {
  grid-column:2;grid-row:1;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:44px;padding:7px 3px;
  font-size:13px;font-weight:730;color:var(--primary-soft-ink);
  border:0;background:transparent;white-space:nowrap;
}
.edit-names-shortcut:not(:disabled):hover {text-decoration:underline;text-underline-offset:4px}
.edit-names-shortcut .icon {width:16px;height:16px}
.result-header-actions {flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.result-header-actions .rerun-shortcut {
  border-color:var(--primary);background:var(--primary);color:var(--primary-contrast);
  box-shadow:0 3px 12px rgba(80,92,219,.14);
}
.result-header-actions .rerun-shortcut:hover:not(:disabled) {background:var(--primary-hover)}
.result-header-actions .button-small {font-size:13px;font-weight:740;min-height:44px}
.result-header-actions .copy-feedback {
  flex-basis:100%;justify-content:flex-end;font-size:12px;line-height:1.5;
}
/* UX-34: 상태 피드백은 항상 명확한 문장/아이콘으로 전달합니다. */
.validation {line-height:1.5;font-size:12.5px}
.validation.error {background:var(--error-bg);border-radius:9px;padding:7px 9px}
.validation.ok {color:var(--success-ink)}
.status-pill {font-size:12px}
.empty-state.was-reset {color:var(--ink-strong)}
.empty-state.was-reset .empty-title {color:var(--primary-soft-ink)}
/* UX-31: 제목의 프로그램 초점은 입력창 테두리 대신 왼쪽 강조선으로 표시합니다. */
.page-title:focus,.result-headline:focus,.presentation-title:focus {
  outline:2px solid var(--teal);outline-offset:2px;
  box-shadow:inset 4px 0 0 var(--teal);
  background:color-mix(in srgb,var(--teal) 8%,var(--panel));
  border-radius:5px;padding-inline:10px 6px;
  scroll-margin-top:14px;
}
/* UX-32: 결과에서는 이름을, 번호는 보조 정보로 읽히게 합니다. */
.winner,.ordered-list li {align-items:flex-start;gap:10px;padding:12px 14px;line-height:1.5}
.winner .person-text,.ordered-list .person-text {
  color:var(--ink-strong);font-size:15px;font-weight:760;line-height:1.55;
}
.winner-num,.order-num {
  flex:none;min-width:34px;width:auto;padding-inline:5px;
  font-variant-numeric:tabular-nums;letter-spacing:-.2px;
  font-size:12px;font-weight:770;opacity:.9;
}
.remaining-person {line-height:1.5}
/* UX-33: 많은 팀의 소속감을 유지하며 과도한 구분선과 내부 공간을 축소합니다. */
.team-grid {gap:12px;align-items:start}
.team-card {background:var(--panel);border-color:var(--line);border-radius:var(--card-radius)}
.team-card-head {background:var(--panel-muted);padding:12px 14px;min-height:45px}
.team-card-head strong {font-weight:820;font-size:15px;font-variant-numeric:tabular-nums}
.team-card-head span {font-size:12px;font-weight:700;white-space:nowrap}
.team-members {gap:0;padding:7px 14px 11px}
.team-members li {padding:7px 0;border-bottom:0;font-size:13.5px;line-height:1.55}
.team-members li + li {border-top:1px solid var(--line)}
.result-ready.is-dense .team-card-head {padding:10px 12px;min-height:42px}
.result-ready.is-dense .team-members {padding:6px 12px 9px}
.result-ready.is-dense .team-members li {padding:6px 0}
/* UX-28: 대규모 룰렛은 실제 인원 수의 구획으로 오해할 수 없는 상징적 그라데이션입니다. */
.wheel-disc.is-symbolic {border:5px solid color-mix(in srgb,var(--panel) 70%,transparent)}
.wheel-disc.is-symbolic::after {
  content:"";position:absolute;inset:16%;border-radius:50%;
  border:2px dashed rgba(255,255,255,.52);pointer-events:none;
}
.wheel-symbolic-label {
  position:absolute;left:50%;bottom:3%;transform:translateX(-50%);
  color:var(--ink-strong);background:var(--panel);border:1px solid var(--line-strong);
  border-radius:100px;padding:5px 12px;font-size:11.5px;font-weight:760;
  white-space:nowrap;z-index:5;box-shadow:var(--shadow);pointer-events:none;
}
.result-ready .winner-reveal:not(.pending) {
  border:1px solid var(--primary);background:var(--primary-soft);
  padding:21px 22px;
}
.result-ready .winner-reveal:not(.pending) .winner-reveal-label {color:var(--primary-soft-ink)}
.result-ready .winner-reveal:not(.pending) .winner-reveal-name {font-size:clamp(26px,3vw,39px)}
/* UX-37: 사용법은 짧게 소개하고 자세한 설명만 사용자가 펼칩니다. */
.usage-guide {padding:21px 24px;margin-top:20px}
.usage-heading {display:block}
.usage-details {margin-top:10px}
.usage-details summary {
  cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;
  color:var(--primary-soft-ink);font-weight:750;font-size:13px;list-style:none;
}
.usage-details summary::-webkit-details-marker {display:none}
.usage-details summary::before {content:"+";font-size:18px;font-weight:600;line-height:1}
.usage-details[open] summary::before {content:"−"}
.usage-details .usage-grid {margin-top:5px;padding-top:13px;border-top:1px solid var(--line)}
/* UX-29: 데스크톱 발표 옵션은 유지하고 모바일만 간결하게 배치합니다. */
.presentation-action .label-mobile {display:none}
/* UX-30: 소프트 키보드 위로 도크 이동, 하단 결과 보호 */
.search-navigation-dock {
  bottom:calc(10px + env(safe-area-inset-bottom,0px) + var(--keyboard-inset,0px));
  max-width:calc(100% - 16px);
}
.found-current {scroll-margin-bottom:calc(110px + var(--keyboard-inset,0px))}
body.has-search-dock #result-body {padding-bottom:85px}
/* 이동 중 DOM/포커스가 가려지지 않도록 다른 고정 영역보다 위에 놓습니다. */
.search-navigation-dock {z-index:160}
@media (max-width:960px) and (min-width:761px) {
  .result-header {gap:10px}
  .result-header-actions .button-small {padding-inline:12px}
}
@media (max-width:760px) {
  /* UX-26: 시각적 설명은 줄이되 입력창과 실행 버튼은 계속 노출합니다. */
  .app-shell {padding-top:12px}
  .page-eyebrow {display:none}
  .page-intro {margin-bottom:9px}
  .page-title {font-size:25px;line-height:1.25;letter-spacing:-.8px}
  .page-description {font-size:13px;line-height:1.45;margin-top:4px}
  .workspace,.control-stack {gap:9px}
  .panel-inner {padding:12px 14px}
  .input-panel .panel-inner,.settings-panel .panel-inner {padding-block:12px}
  .panel-heading {margin-bottom:9px}
  .panel-kicker {display:none}
  .name-label-row {gap:6px}
  .name-input {height:124px;min-height:124px;padding:9px 12px;line-height:1.6;font-size:14px}
  .name-input.many-names {height:206px;min-height:206px}
  .input-hint {margin-top:5px;line-height:1.45}
  .name-stats {margin-top:7px;padding-block:7px}
  .name-actions-row {gap:6px;margin-top:7px}
  /* UX-25: 조작을 한 줄에 유지하며 레이블을 13px 이상으로 수정합니다. */
  .name-actions-row .names-tools .button-small,
  .name-actions-row .jump-settings {
    min-height:44px;font-size:13px;font-weight:760;line-height:1.25;
    padding:5px 3px;letter-spacing:-.25px;
  }
  .name-actions-row .names-tools .button-small {white-space:normal}
  .settings-panel .mode-control {margin-bottom:10px}
  .settings-panel .choice-grid {margin-bottom:10px}
  .settings-panel .field-label {margin-bottom:5px}
  .settings-panel .number-row .number-field {height:44px}
  .settings-panel .validation {margin-top:7px}
  .settings-panel .primary-action {margin-top:9px}
  .result-header {padding:13px 14px 12px;gap:8px}
  .result-panel.is-high-volume .result-header {padding:13px 14px}
  .result-panel.has-result .result-header-actions,
  .is-high-volume .result-header-actions {
    width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  }
  .result-header-actions .button-small {min-width:0;padding-inline:4px;font-size:12.5px;white-space:nowrap}
  .result-header-actions .button-small .icon {display:none}
  .result-header-actions .copy-feedback {grid-column:1/-1;justify-content:center}
  .result-header-actions .rerun-shortcut {grid-column:auto!important}
  .result-header-actions .edit-names-shortcut {order:initial;flex-basis:auto}
  .result-title-wrap {width:100%;gap:4px}
  .edit-names-shortcut {font-size:13px}
  .result-subheading {font-size:11.5px}
  .result-body {padding:17px 14px 20px}
  .winner .person-text,.ordered-list .person-text {font-size:15px}
  .team-card-head strong {font-size:14px}
  .usage-guide {padding:15px 16px;margin-top:15px}
  /* UX-29: 필수 3개 조작과 설정 버튼을 한 줄로 유지합니다. */
  .presentation-top {padding:7px 10px}
  .presentation-controls,
  .presentation-controls:has(.presentation-team-nav) {
    display:grid;grid-template-columns:1.12fr 1fr 1fr .83fr;
    grid-template-areas:"run copy exit toggle" "panel panel panel panel";
    gap:5px;
  }
  #presentation-options-toggle {font-size:12px;padding-inline:2px;min-height:44px}
  .presentation-controls > .presentation-action {font-size:12px;min-height:44px;padding-inline:3px;gap:3px}
  .presentation-action .label-desktop {display:none}
  .presentation-action .label-mobile {display:inline}
  .presentation-controls > .presentation-action .icon {width:15px;height:15px}
  .presentation-main {padding:13px 14px 44px;gap:8px}
  .presentation-eyebrow,.presentation-description {display:none}
  .presentation-groups {margin-top:4px;gap:14px}
  .presentation-title {font-size:30px}
  .presentation-section {padding:15px}
  .wheel-wrap.is-symbolic {width:min(280px,100%)}
  .roulette-board {min-height:0;gap:8px}
  .wheel-note {max-width:390px}
  .winner-reveal {margin-top:0}
}
@media (max-width:440px) {
  .name-actions-row {grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .name-actions-row .names-tools {gap:4px}
  .name-actions-row .names-tools .button-small,
  .name-actions-row .jump-settings {font-size:13px;letter-spacing:-.45px}
  .result-panel.has-result .result-header-actions,
  .is-high-volume .result-header-actions {grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .result-header-actions .button-small {font-size:12px;padding-inline:1px}
  .presentation-controls,
  .presentation-controls:has(.presentation-team-nav) {
    grid-template-columns:1.12fr 1fr 1fr .83fr;
    grid-template-areas:"run copy exit toggle" "panel panel panel panel";
  }
  .presentation-top {padding:6px 8px}
  .presentation-main {padding:10px 12px 34px}
  .presentation-title {font-size:28px}
  .presentation-groups {margin-top:2px}
  .presentation-action .icon {display:none}
  .presentation-options .presentation-action {font-size:13px}
  .search-navigation-dock {padding:6px;gap:3px}
  .search-navigation-dock .button-small {font-size:12px}
  .wheel-wrap.is-symbolic {width:min(245px,100%)}
  .winner-reveal-name {line-height:1.3}
}
@media (max-width:360px) {
  .name-actions-row .names-tools .button-small,
  .name-actions-row .jump-settings {font-size:13px}
  .search-navigation-dock #search-dock-count {max-width:63px}
  .search-navigation-dock .button-small {font-size:12px}
}

/* v0.2.10: 기존 .presentation-action span.label 규칙보다 높은 명시도로 짧은 라벨만 노출 */
@media(max-width:760px) {
 .presentation-controls .presentation-action .label-desktop {display:none}
 .presentation-controls .presentation-action .label-mobile {display:inline}
}

/* Optional roster reuse: generated aliases, user-initiated local saves, and URL snapshots. */
.reuse-tools {margin-top:13px;border:1px solid var(--line);border-radius:13px;background:var(--panel-muted);overflow:hidden}
.reuse-tools summary {cursor:pointer;padding:12px 14px;min-height:48px;display:flex;align-items:center;gap:9px;color:var(--primary-soft-ink);font-size:13px;font-weight:790;list-style-position:inside}
.reuse-tools summary::marker {color:var(--primary-soft-ink)}
.reuse-tools[open] summary {border-bottom:1px solid var(--line)}
.reuse-content {display:grid;gap:13px;padding:14px}
.reuse-group {display:grid;gap:9px;padding:0 0 13px;border-bottom:1px solid var(--line);min-width:0}
.reuse-group:last-of-type {padding-bottom:0;border-bottom:0}
.reuse-heading {display:flex;align-items:baseline;gap:5px 10px;flex-wrap:wrap}
.reuse-heading strong {font-size:14px;color:var(--ink-strong)}
.reuse-heading span,.reuse-group p,.result-share-tools span {font-size:12px;color:var(--muted);line-height:1.6}
.reuse-group p {margin:0}
.reuse-inputs {display:grid;grid-template-columns:auto minmax(74px,90px) minmax(0,1fr);gap:7px;align-items:center}
.reuse-inputs label {font-size:13px;font-weight:720}
.reuse-inputs input,.reuse-inputs select,.reuse-text-input {min-width:0;height:44px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink-strong);font:inherit;font-size:14px}
.reuse-inputs .reuse-primary {grid-column:1/-1}
.reuse-primary {background:var(--primary);color:var(--primary-contrast)!important;border-color:transparent!important;min-height:44px;font-weight:770}
.reuse-primary:hover {background:var(--primary-hover)}
.reuse-buttons {display:flex;gap:7px;flex-wrap:wrap}
.reuse-buttons .button-small {flex:1;min-width:120px}
.reuse-group .button-small {min-height:44px;justify-content:center}
.reuse-feedback,.reuse-dialog-status {font-size:12px;color:var(--primary-soft-ink);line-height:1.6;min-height:0;margin:0;overflow-wrap:anywhere}
.reuse-feedback:empty,.reuse-dialog-status:empty {display:none}
.result-share-tools {border-bottom:1px solid var(--line);padding:10px 18px;display:flex;align-items:center;gap:9px 14px;flex-wrap:wrap}
.result-share-tools[hidden] {display:none}
.result-share-tools .button-small {min-height:44px;flex:none}
.result-share-tools span:last-child {color:var(--primary-soft-ink)}
.reuse-dialog {width:min(540px,calc(100vw - 28px))}
.reuse-dialog .reuse-text-input {width:100%;margin:5px 0 12px}
.reuse-dialog .reuse-dialog-status {margin-bottom:10px}
.saved-lists-dialog {width:min(700px,calc(100vw - 28px))}
.saved-list-items {display:grid;gap:8px;max-height:55dvh;overflow-y:auto;margin:12px 0;padding:0;list-style:none}
.saved-list-items li {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-muted)}
.saved-list-desc {display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
.saved-list-desc strong {font-size:14px;color:var(--ink-strong)}
.saved-list-desc span {font-size:12px;color:var(--muted)}
.saved-list-actions {display:flex;gap:6px;flex:none}
.saved-list-actions button {min-height:44px;min-width:62px}
.saved-delete {color:var(--error-ink)}
.reuse-empty {font-size:13px;color:var(--muted)}
@media (max-width:440px) {
 .reuse-tools {margin-top:10px}
 .reuse-content {padding:11px;gap:12px}
 .reuse-inputs {grid-template-columns:auto 74px minmax(0,1fr);gap:6px}
 .reuse-inputs input,.reuse-inputs select {padding-inline:6px;font-size:13px}
 .reuse-buttons {display:grid;grid-template-columns:1fr 1fr}
 .reuse-buttons .button-small {min-width:0;padding-inline:5px;font-size:12px;white-space:normal}
 .result-share-tools {padding:10px 12px}
 .saved-list-items li {flex-wrap:wrap}
 .saved-list-actions {width:100%}
 .saved-list-actions button {flex:1}
}

.outside-reuse-feedback:not(:empty) {display:block;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--primary-soft);color:var(--primary-soft-ink)}

/* TurnCove 0.3 · 동물 별명 우선 참가자 명단, 게임별 설정, 사다리타기 */
@media(max-width:760px){.primary-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.nav-link{font-size:12px;padding:0 3px}}
@media(min-width:761px) and (max-width:1400px){.primary-nav{gap:2px}.nav-link{padding:0 9px;font-size:13px}.header-inner{gap:18px}.private-top{display:none}}
.roster-generator{padding:17px;border:1px solid var(--primary);background:var(--primary-soft);border-radius:14px;display:grid;gap:12px}
.roster-generator-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px}
.roster-generator-head strong{font-size:15px;color:var(--primary-soft-ink)}
.roster-generator-head span{font-size:12px;color:var(--muted)}
.roster-generator .reuse-inputs{grid-template-columns:1fr minmax(0,1.1fr);gap:8px}
.roster-generator .reuse-inputs label{grid-column:1/-1}
.roster-generator .reuse-inputs input,.roster-generator .reuse-inputs select{width:100%;height:46px;background:var(--panel)}
.roster-generator .reuse-inputs .reuse-primary{grid-column:1/-1;min-height:50px;font-size:15px}
.roster-generator p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.roster-manual{margin-top:18px}
.roster-manual .name-input{height:128px;min-height:100px}
.roster-manual .name-input.many-names{height:210px}
.roster-save-tools{display:flex;width:fit-content;max-width:100%;margin-top:16px;border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;background:var(--panel)}
.roster-save-tools .button-small{flex:1;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:13px;padding:8px 14px;min-height:44px;white-space:nowrap}
.roster-save-tools .button-small + .button-small{border-left:1px solid var(--line)}
.roster-privacy{font-size:12px;color:var(--muted);margin:9px 0 0}
.game-run-panel{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 22px;background:var(--panel-muted)}
.game-run-caption{display:grid;gap:2px;flex:1;min-width:145px}
.game-run-caption strong{color:var(--ink-strong);font-size:15px}
.game-run-caption span{color:var(--muted);font-size:12px}
.game-run-panel .primary-action{width:auto;min-width:180px;min-height:52px;margin:0}
.game-run-panel .validation{width:100%;margin:0}
.ladder-settings{display:grid;gap:10px}.ladder-outcomes-field{display:block;width:100%;min-height:106px;padding:12px;border:1px solid var(--line-strong);border-radius:11px;background:var(--panel-muted);color:var(--ink-strong);line-height:1.6;resize:vertical}
.ladder-result{display:grid;gap:15px;min-width:0}.ladder-legend{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.ladder-scroll{overflow-x:auto;width:100%;max-width:100%;border:1px solid var(--line);background:var(--panel-muted);border-radius:13px;padding:10px 0;overscroll-behavior-inline:contain}
.ladder-svg{display:block;max-width:none}.ladder-lines{stroke:var(--line-strong);stroke-width:3;stroke-linecap:round}.ladder-highlight{stroke:var(--coral);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ladder-labels{fill:var(--ink-strong);font-size:13px;font-weight:720}
.ladder-help{font-size:13px;color:var(--muted);margin:0;line-height:1.55}
.ladder-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:9px}
.ladder-person{border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink-strong);padding:12px 13px;display:flex;min-height:56px;align-items:center;gap:10px;text-align:left;min-width:0}
.ladder-person.is-selected{background:var(--primary-soft);border-color:var(--primary)}
.ladder-number{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:var(--primary-soft);color:var(--primary-soft-ink);font-weight:800;font-size:12px;flex:none}
.ladder-person-name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px;font-weight:700}
.ladder-person strong{font-size:12px;color:var(--primary-soft-ink);max-width:105px;overflow-wrap:anywhere}
.ladder-presentation-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.ladder-presentation-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-muted);padding:16px;font-size:clamp(17px,2vw,25px);overflow-wrap:anywhere}
.ladder-presentation-item span{color:var(--primary-soft-ink);font-weight:850}
@media(max-width:600px){.game-run-panel{padding:14px 16px;gap:8px}.game-run-panel .primary-action{width:100%;min-width:0}.game-run-caption{width:100%}.roster-generator{padding:13px}.roster-save-tools .button-small{font-size:12px}.ladder-people{grid-template-columns:1fr}}
@media(max-width:350px){.roster-save-tools{width:100%}.roster-save-tools .button-small{padding-inline:8px;font-size:12px}}

.ladder-person-name.found-name{background:var(--primary-soft);outline:2px solid var(--teal);border-radius:4px}.ladder-person .found-current{outline:3px solid var(--teal);outline-offset:2px}

.control-stack{display:block}
.roster-game-settings{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.roster-game-settings .panel-heading{margin-bottom:12px;align-items:center}
.roster-game-settings.is-collapsed .panel-heading{margin-bottom:0}
.game-settings-toggle{flex:none}
.roster-game-settings .field-label{margin-bottom:7px}
.roster-game-settings .mode-control{margin-bottom:12px}
.roster-game-settings .setting-note{margin-top:9px}
.roster-manual{border-top:1px solid var(--line);padding-top:14px}

/* v0.3.1: 사다리 20~40명/모바일 읽기·선택·가로 탐색 개선 */
.ladder-navigation{display:grid;grid-template-columns:minmax(65px,auto) minmax(0,1fr) minmax(65px,auto);align-items:end;gap:8px}
.ladder-navigation>.button-small{min-height:44px;padding-inline:12px;white-space:nowrap}
.ladder-selector-wrap{display:grid;gap:5px;min-width:0;color:var(--muted);font-size:12px;font-weight:700}
.ladder-selector-wrap select{width:100%;min-height:44px;min-width:0;background:var(--panel);color:var(--ink-strong);border:1px solid var(--line-strong);border-radius:10px;padding:7px 9px;font-size:14px}
.ladder-selection-status{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:12px 14px;background:var(--primary-soft);border-radius:12px;border:1px solid var(--primary);font-size:14px;line-height:1.55}
.ladder-selection-status strong{font-weight:800;color:var(--primary-soft-ink)}
.ladder-selection-status span{color:var(--ink-strong);font-weight:700;overflow-wrap:anywhere}
.ladder-highlight-outline{stroke:var(--panel);stroke-width:12;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ladder-highlight{stroke-width:6.5}
.ladder-endpoint{fill:var(--coral);stroke:var(--panel);stroke-width:3}
.ladder-labels .ladder-label-active{fill:var(--primary-soft-ink);stroke:var(--panel);stroke-width:2;paint-order:stroke; font-weight:900;font-size:16px}
.ladder-scroll{scrollbar-gutter:stable;touch-action:pan-x pan-y}
.ladder-help{font-size:13px;line-height:1.6}
.ladder-roster{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.ladder-roster summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:5px;padding:10px 14px;color:var(--ink-strong);font-weight:800}
.ladder-roster summary span{font-size:12px;color:var(--muted);font-weight:500}
.ladder-roster[open] summary{border-bottom:1px solid var(--line)}
.ladder-roster .ladder-people{padding:10px}
.ladder-person.is-selected{outline:2px solid var(--primary);outline-offset:-2px}
.count-enter-hint{font-size:11px;font-weight:500;color:var(--muted)}
@media(max-width:600px){.ladder-navigation{grid-template-columns:65px minmax(0,1fr) 65px;gap:6px}.ladder-selection-status{padding:10px 12px}.ladder-selector-wrap select{font-size:13px}.ladder-result{gap:11px}}
@media(max-width:350px){.ladder-navigation{grid-template-columns:52px minmax(0,1fr) 52px}.ladder-navigation>.button-small{padding-inline:5px;font-size:12px}.count-enter-hint{display:none}}
@media(prefers-reduced-motion:reduce){.ladder-scroll{scroll-behavior:auto}}

/* v0.3.2 — 인원 설정과 직접 이름 입력 중심의 간결한 UI */
.roster-top-controls{padding:17px;gap:12px;background:var(--primary-soft)}
.roster-count-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.roster-count-fields>div{min-width:0}
.count-stepper{display:flex;min-width:0;align-items:stretch;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;min-height:52px}
.count-stepper button{flex:0 0 47px;background:var(--panel-muted);color:var(--text);border:0;font-size:25px;font-weight:600;cursor:pointer;min-height:50px}
.count-stepper button:first-child{border-right:1px solid var(--line)}
.count-stepper button:last-child{border-left:1px solid var(--line)}
.count-stepper button:hover{background:var(--primary-soft)}
.count-stepper button:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;position:relative;z-index:2}
.count-stepper input{width:100%;min-width:0;text-align:center;font-size:21px;font-weight:700;border:0;background:transparent;color:var(--text);-moz-appearance:textfield}
.count-stepper input::-webkit-inner-spin-button,.count-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.roster-live-count{font-size:13px;font-weight:600;color:var(--primary-soft-ink)}
.optional-name{color:var(--muted);font-weight:400;font-size:12px}
.roster-manual{margin-top:14px;padding-top:14px}
.roster-manual .name-input{height:118px;min-height:90px}
.roster-preview-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;margin:12px 0 7px}
.roster-preview-list,.live-board-names{display:flex;flex-wrap:wrap;gap:6px;max-height:155px;overflow:auto}
.roster-chip,.live-person{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel-muted);font-size:13px;overflow-wrap:anywhere}
.roster-chip small,.live-person small{font-size:11px;color:var(--muted)}
.live-board{padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--panel-muted);margin-bottom:13px}
.live-board-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px;margin-bottom:11px}
.live-board-heading span{color:var(--muted);font-size:13px}
.live-board>p{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 0}
@media(max-width:420px){.roster-count-fields{gap:7px}.count-stepper button{flex-basis:39px}.count-stepper input{font-size:19px}.roster-top-controls{padding:12px}.roster-manual .name-input{height:108px}}

/* v0.3.3 — 실시간 상황판과 동물 별명의 시각적 식별 */
.live-board-v033 { display:block; padding:clamp(16px,2vw,24px); border:1px solid var(--line, #dfe5ef); border-radius:18px; background:var(--panel, #fff); }
.live-board-v033 .live-board-heading { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.live-board-v033 .live-board-heading h3 { margin:2px 0 0; font-size:clamp(19px,2vw,24px); }
.live-board-eyebrow { font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--muted,#69758a); }
.live-board-status { display:inline-flex; padding:8px 12px; border-radius:999px; background:var(--panel-muted,#eef2f9); font-weight:700; font-size:13px; overflow-wrap:anywhere; }
.board-metrics { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 15px; }
.board-metrics > span { border-radius:10px; background:var(--panel-muted,#eef2f9); padding:9px 12px; font-size:12px; color:var(--muted,#66748d); }
.board-metrics strong { font-size:16px; margin-right:5px; color:var(--ink-strong,#18233a); }
.live-board-v033 .live-board-names { display:flex; flex-wrap:wrap; gap:9px; }
.live-board-v033 .live-person { display:inline-flex; align-items:center; gap:7px; min-height:38px; overflow-wrap:anywhere; max-width:100%; padding:7px 10px; border-radius:10px; background:var(--panel-muted,#eef2f9); font-size:14px; }
.live-person bdi { overflow-wrap:anywhere; }
.animal-emoji { display:inline-block; font-size:1.25em; line-height:1; vertical-align:-.08em; margin-right:.14em; flex-shrink:0; }
.board-foot { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:17px; font-size:13px; color:var(--muted,#66748d); }
.board-reset-note { font-weight:600; }
@media(max-width:390px) { .live-board-v033 .live-board-heading { flex-direction:column; } .live-board-v033 .live-person { font-size:13px; } }

/* v0.3.4: 게임별 상황판 식별과 대규모 명단의 선택적 확장 */
.live-board-v033 { border-inline-start:4px solid var(--accent,#5865db); }
.live-board-v033.board-team { border-inline-start-color:#168f87; }
.live-board-v033.board-roulette { border-inline-start-color:#d97745; }
.live-board-v033.board-ladder { border-inline-start-color:#8c61c7; }
.live-board-v033 .live-board-status { line-height:1.4; }
.live-board-v033 .live-board-names { max-height:none; }
.live-board-toggle { display:block; min-height:44px; width:100%; margin-top:12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-muted); color:var(--ink-strong); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.live-board-toggle:focus-visible {outline:3px solid var(--accent,#5865db); outline-offset:3px;}
.live-board-v033 .animal-emoji {font-size:1.15em; line-height:1;}

/* v0.3.5: 대규모 상황판의 제한된 DOM·터치 탐색 */
.board-page-nav{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.board-page-nav button{min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink-strong);background:var(--panel-muted);font:inherit;font-weight:650;cursor:pointer;}
.board-page-nav button:disabled{opacity:.5;cursor:default;}
.board-page-nav button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.board-page-nav span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
.legacy-animal-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;max-height:min(42vh,300px);overflow:auto;padding:10px 0;}
.legacy-animal-list label{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--panel-muted);overflow-wrap:anywhere;}
.legacy-animal-list input{width:18px;height:18px;}
@media(max-width:390px){.board-page-nav{display:grid;grid-template-columns:1fr 1fr;}.board-page-nav span{order:-1;grid-column:1 / -1;text-align:center;}}

/* v0.3.6: 눌러서 시작하는 룰렛 중심 버튼 */
.wheel-center-button{cursor:pointer;font-family:inherit;min-width:112px;min-height:112px;padding:7px;transition:box-shadow .15s ease,scale .15s ease}
.wheel-center-button:hover:not(:disabled):not([aria-disabled="true"]){scale:1.055;box-shadow:0 3px 20px rgba(35,42,95,.27)}
.wheel-center-button:focus-visible{outline:4px solid var(--teal);outline-offset:4px}
.wheel-center-button:disabled,.wheel-center-button[aria-disabled="true"]{cursor:progress;opacity:.85}
.wheel-center-button strong{font-size:15px;white-space:nowrap;color:#182039}
/* 시작 전에는 연결선을 보여주지 않는 미리보기 */
.ladder-waiting{display:grid;gap:14px;margin-top:14px}
.ladder-waiting-avatars{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ladder-waiting-avatar{display:grid;place-items:center;width:49px;height:49px;font-size:28px;background:var(--panel-muted);border:1px solid var(--line);border-radius:13px}
.ladder-waiting-more{color:var(--muted);font-size:12px}
.ladder-covered{min-height:215px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px dashed var(--line-strong);border-radius:17px;background:var(--panel-muted);padding:20px;text-align:center}
.ladder-covered-lines{position:absolute;inset:-20px;opacity:.16;filter:blur(11px);background:repeating-linear-gradient(90deg,transparent 0 40px,var(--ink) 41px 43px,transparent 44px 76px),repeating-linear-gradient(0deg,transparent 0 41px,var(--ink) 42px 44px,transparent 45px 77px);pointer-events:none}
.ladder-covered strong,.ladder-covered span{z-index:1;position:relative}
.ladder-covered strong{color:var(--ink-strong);font-size:clamp(15px,2vw,19px)}
.ladder-covered span,.ladder-waiting-guide{color:var(--muted);font-size:13px;line-height:1.6}
.ladder-waiting-guide{margin:0}
.ladder-board-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.ladder-piece-tray,.ladder-peek-controls{display:flex;flex-wrap:wrap;gap:8px}
.ladder-piece{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border:1px dashed var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink-strong);font-weight:750;cursor:grab;user-select:none;touch-action:none}
.ladder-piece:active{cursor:grabbing}
.ladder-peek-controls [aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-soft-ink)}
.ladder-setup{position:relative}
.ladder-setup-tops,.ladder-setup-bottoms{position:relative;height:36px}
.ladder-setup-avatar,.ladder-setup-bottom{position:absolute;top:4px;transform:translateX(-50%);line-height:1;white-space:nowrap}
.ladder-setup-avatar{font-size:22px}
.ladder-setup-bottom{font-size:13px;font-weight:750;color:var(--ink-strong)}
.ladder-setup-field{position:relative}
.ladder-setup-field>.ladder-covered{min-height:100%;height:100%;border:0;border-radius:0}
.ladder-setup-field>.ladder-covered .ladder-covered-lines{opacity:.05}
.ladder-setup-vert{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--line-strong);border-radius:2px}
.ladder-setup-rung{position:absolute;height:3px;margin-top:-1.5px;padding:0;border:0;background:var(--line-strong);cursor:pointer}
.ladder-setup-rung:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.ladder-play-frame{position:relative}
.ladder-hit-layer{position:absolute;inset:0;pointer-events:none}
.ladder-hit{position:absolute;pointer-events:none}
.ladder-hit-bomb{width:44px;height:36px;top:0}
.ladder-setup-field .ladder-hit-bomb{top:0;bottom:0;height:auto}
body.is-ladder-dragging .ladder-hit{pointer-events:auto}
body.is-ladder-dragging-rung .ladder-hit:not(.ladder-hit-bomb),
body.is-ladder-dragging-bomb .ladder-hit-bomb{background:color-mix(in srgb,var(--primary) 16%,transparent);border-radius:6px}
body.is-ladder-dragging .ladder-hit.is-drop-target{background:color-mix(in srgb,var(--primary) 38%,transparent);outline:2px solid var(--primary)}
.ladder-random-note{margin:8px 12px 0;color:var(--muted);font-size:13px;line-height:1.5}
/* 실제 경로의 길이에 맞게 그리기: CSS pathLength=100 사용 */
.ladder-highlight-animated{stroke-dasharray:100;stroke-dashoffset:0;animation:ladder-trace 1.45s ease-in-out both}
@keyframes ladder-trace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.ladder-labels text{font-size:22px}
.ladder-number{font-size:20px;width:33px;height:33px}
@media(prefers-reduced-motion:reduce){.ladder-highlight-animated{animation:none}.wheel-center-button{transition:none}}
@media(max-width:390px){.ladder-waiting-avatar{width:44px;height:44px;font-size:25px}}

/* v0.3.7: 확장 가능한 카테고리 메뉴와 홈 게임 탐색 */
.nav-group{position:relative;min-width:0}
.nav-group>summary{cursor:pointer;list-style:none;user-select:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group.active>summary,.nav-group[open]>summary{background:var(--primary-soft);color:var(--primary-soft-ink)}
.nav-group>summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.nav-dropdown{position:absolute;top:calc(100% + 7px);left:0;z-index:15;min-width:235px;padding:7px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 38px rgba(18,24,42,.16);display:grid;gap:4px}
.nav-dropdown-all{right:0;left:auto}
.nav-dropdown-link{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 13px;border-radius:9px;color:var(--ink-strong);text-decoration:none;font-size:14px;font-weight:650}
.nav-dropdown-link:hover,.nav-dropdown-link.active{background:var(--primary-soft);color:var(--primary-soft-ink)}
.nav-dropdown-link .icon{width:18px;height:18px}
.home-discovery{margin-top:26px;padding:22px;border:1px solid var(--line);background:var(--panel);border-radius:18px}
.home-discovery-head h2{margin:0 0 5px;font-size:20px;color:var(--ink-strong)}
.home-discovery-head p{margin:0 0 16px;color:var(--muted);font-size:13px}
.home-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.home-game-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px 10px;padding:16px 13px;min-height:100px;border:1px solid var(--line);background:var(--panel-muted);border-radius:13px;text-decoration:none;color:var(--ink-strong)}
.home-game-card>.icon{grid-row:span 2;color:var(--primary);width:24px;height:24px}
.home-game-card strong{font-size:15px}
.home-game-card>span:not(.home-game-next){grid-column:2;font-size:12px;color:var(--muted)}
.home-game-next{grid-column:3;grid-row:1/span 2;color:var(--primary);font-size:19px}
.home-game-card:hover{border-color:var(--primary)}
.home-intro{font-size:13px;line-height:1.7;color:var(--muted);margin:17px 0 0}
.home-intro strong{color:var(--ink-strong)}
.ladder-playback-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:10px 0;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--panel-muted)}
.ladder-playback-controls label{font-size:13px;font-weight:700;color:var(--ink-strong)}
.ladder-playback-controls select{min-width:92px;min-height:44px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink-strong);padding:0 8px}
.ladder-playback-help{font-size:12px;color:var(--muted)}
.ladder-result .ladder-highlight-animated{animation-duration:var(--ladder-animation-duration,1.45s)}
@media(max-width:760px){.primary-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.nav-dropdown{min-width:195px}.nav-group.nav-all .nav-dropdown{right:0;left:auto}.nav-group .nav-link{width:100%;font-size:12px;padding:0 5px}.home-discovery{padding:16px}.home-game-grid{grid-template-columns:1fr;gap:8px}.home-game-card{min-height:70px;padding:12px}.home-discovery-head h2{font-size:18px}}
@media(max-width:390px){.nav-group .nav-link{font-size:11px}.nav-group .nav-link .icon{display:none}.nav-dropdown-link{font-size:13px}.nav-dropdown{min-width:170px}.ladder-playback-help{flex-basis:100%}}
.nav-catalog{appearance:none;border:0;background:transparent;font-family:inherit;cursor:pointer}
.nav-catalog:hover{background:var(--panel-muted);color:var(--ink-strong)}

/* TurnCove v0.3.8 — category navigation + gift-box reveal game */
.primary-nav .nav-group { flex:0 0 auto; }
.primary-nav .nav-group > summary { border:0; }
.primary-nav .nav-chevron {font-size:12px;line-height:1;color:var(--muted);transition:transform .15s}
.primary-nav details[open] .nav-chevron {transform:rotate(180deg)}
.primary-nav .nav-group:nth-of-type(3) .nav-dropdown,.primary-nav .nav-group:nth-of-type(4) .nav-dropdown {left:auto;right:0;}
.nav-dropdown-link[aria-current="page"]{color:var(--primary-soft-ink);background:var(--primary-soft)}
.gift-stage{margin-top:12px;border:1px solid var(--line);background:var(--panel-muted);border-radius:18px;padding:20px;display:grid;gap:16px;min-width:0}
.gift-stage-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gift-stage-title strong{font-size:17px;font-weight:830;color:var(--ink-strong)}
.gift-stage-title span{font-size:13px;font-weight:650;color:var(--muted)}
.gift-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px;min-width:0}
.gift-item{min-width:0;min-height:156px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:16px;border:1.5px solid var(--line-strong);background:var(--panel);padding:14px 10px;color:var(--ink-strong);box-shadow:0 5px 16px rgba(21,31,72,.03);text-align:center;overflow-wrap:anywhere;transition:transform .18s,border-color .18s,background .18s}
button.gift-item:hover{border-color:var(--primary);transform:translateY(-3px)}
.gift-item.is-closed{background:linear-gradient(145deg,var(--primary-soft) 0%,var(--panel) 85%);border-color:var(--line-strong)}
.gift-item.is-winning{background:var(--success-bg);border-color:var(--success-ink)}
.gift-item.is-miss{background:var(--panel);border-style:dashed}
.gift-icon{font-size:43px;line-height:1.2;user-select:none}
.gift-index{font-size:12px;font-weight:800;color:var(--muted)}
.gift-secret{font-size:12px;font-weight:660;color:var(--primary-soft-ink)}
.gift-person{font-size:15px;line-height:1.35;font-weight:800;max-width:100%;overflow-wrap:anywhere}
.gift-outcome{font-size:12px;font-weight:820;color:var(--ink-strong)}
.gift-item.is-winning .gift-outcome{color:var(--success-ink)}
.gift-summary{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;font-size:13px;font-weight:740;color:var(--ink-strong)}
.gift-summary .button-small{min-height:44px}
.gift-hint{color:var(--muted);font-size:12px;line-height:1.6;margin:0}
.box-settings{display:grid;gap:9px}
.box-settings .count-stepper{max-width:260px}
.board-box{border-inline-start-color:var(--primary)}
.presentation-box-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px}
.presentation-box-item{background:var(--panel-muted);border:1px solid var(--line);border-radius:18px;padding:21px;min-height:155px;display:grid;align-content:center;text-align:center;gap:9px}
.presentation-box-item>span{font-size:16px;font-weight:820;color:var(--muted)}
.presentation-box-item>strong{font-size:clamp(19px,2.6vw,30px);line-height:1.3;overflow-wrap:anywhere;color:var(--ink-strong)}
.presentation-box-item>small{font-size:14px;color:var(--muted);font-weight:750}
.presentation-box-item.winner{background:var(--success-bg);border-color:var(--success-ink)}
.presentation-box-item.winner>small{color:var(--success-ink)}
@keyframes gift-reveal{0%{transform:scale(.86) rotate(-3deg);opacity:.38}65%{transform:scale(1.05) rotate(1deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.gift-item.just-opened{animation:gift-reveal .38s ease-out both}
@media(max-width:760px){
 .primary-nav .nav-group{min-width:0;width:100%}
 .primary-nav .nav-group>summary{width:100%;white-space:normal;line-height:1.2;gap:3px;padding:6px 3px;text-align:center;min-height:48px}
 .primary-nav .nav-chevron{display:none}
 .primary-nav .nav-group:first-child .nav-dropdown{left:0;right:auto}
 .primary-nav .nav-group:nth-of-type(2) .nav-dropdown{left:0;right:auto}
 .primary-nav .nav-group:nth-of-type(3) .nav-dropdown,.primary-nav .nav-group:nth-of-type(4) .nav-dropdown{left:auto;right:0}
 .gift-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .gift-stage{padding:14px;gap:12px}
 .gift-item{min-height:132px;padding:10px 5px;gap:5px}
 .gift-icon{font-size:33px}
 .gift-person{font-size:13px}
 .presentation-box-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .presentation-box-item{padding:14px 9px;min-height:126px}
}
@media(max-width:370px){.gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-group .nav-link span:not(.nav-chevron){font-size:11px}}
@media(prefers-reduced-motion:reduce){.gift-item,.nav-chevron{transition:none}.gift-item.just-opened{animation:none}button.gift-item:hover{transform:none}}

.home-game-category{display:grid;gap:11px;margin-top:17px}
.home-game-category>h3{font-size:14px;font-weight:850;color:var(--ink-strong);margin:0}
.home-game-category+.home-game-category{margin-top:24px}
.home-game-grid .home-game-card{min-width:0}

/* v0.3.9 — 이름 공개 카드 게임; 사전 공개 방지와 키보드/발표 터치 조작 */
.flip-stage{display:grid;gap:15px;min-width:0;padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.flip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;min-width:0}
.flip-card{position:relative;display:block;min-width:0;min-height:164px;padding:0;border:0;border-radius:16px;background:transparent;color:var(--ink-strong);perspective:750px;cursor:pointer;text-align:center;font:inherit;overflow-wrap:anywhere}
.flip-card-inner{position:relative;display:block;min-height:164px;width:100%;transform-style:preserve-3d;border-radius:16px;transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.flip-card-back,.flip-card-front{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;padding:13px 9px;overflow-wrap:anywhere}
.flip-card-back{background:linear-gradient(148deg,var(--primary),var(--primary-soft));color:var(--ink-strong);border:2px solid var(--primary);font-size:44px;font-weight:800}
.flip-card-back small{font-size:13px;color:var(--ink-strong)}
.flip-card-front{background:var(--success-bg);border:2px solid var(--success-ink);transform:rotateY(180deg);color:var(--ink-strong)}
.flip-card-front strong{font-size:clamp(15px,2vw,21px);overflow-wrap:anywhere;line-height:1.35}
.flip-card-front small,.flip-card-front span{font-size:12px;color:var(--success-ink)}
.flip-card.is-flipped .flip-card-inner{transform:rotateY(180deg)}
.flip-card.just-flipped .flip-card-inner{animation:flip-reveal .55s both}
.flip-card[aria-disabled="true"]{cursor:default}
.flip-card:not([aria-disabled="true"]):hover .flip-card-inner{box-shadow:0 5px 18px rgba(20,30,60,.18)}
.flip-card:focus-visible{outline:3px solid var(--focus,#00A89B);outline-offset:3px}
@keyframes flip-reveal{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.flip-stage.waiting .flip-card-back{position:relative;min-height:144px}
.presentation-box-item{font:inherit;color:var(--ink-strong)}
button.presentation-box-item{cursor:pointer}
button.presentation-box-item:not([aria-disabled="true"]):hover{border-color:var(--primary)}
button.presentation-box-item:focus-visible{outline:3px solid var(--focus,#00A89B);outline-offset:3px}
button.presentation-box-item[aria-disabled="true"]{cursor:default}
.presentation-card-item.closed{background:var(--primary-soft);border-color:var(--primary)}
.presentation-card-item.closed>strong{font-size:34px}
.presentation-card-item.flipped{background:var(--success-bg);border-color:var(--success-ink)}
.presentation-reveal-actions{display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:14px;color:var(--muted)}
@media(max-width:760px){.flip-stage{padding:12px}.flip-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.flip-card,.flip-card-inner{min-height:132px}.flip-card-back{font-size:34px}.flip-card-front{padding:8px 4px}.flip-card-front strong{font-size:14px}}
@media(max-width:360px){.flip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.flip-card-inner{transition:none!important}.flip-card.just-flipped .flip-card-inner{animation:none!important}}
/* 상자·카드 모바일 포인터 조작 피드백. 햅틱 API나 추가 권한은 사용하지 않습니다. */
button.gift-item:not(.is-open):active{transform:scale(.965);border-color:var(--primary)}
button.flip-card[aria-disabled="false"]:active .flip-card-inner{transform:scale(.965)}
button.gift-item:focus-visible{outline:3px solid var(--focus,var(--primary));outline-offset:3px}
.gift-item.just-opened .gift-icon{animation:gift-icon-pop .36s ease-out}
@keyframes gift-icon-pop{0%{transform:scale(.55)}65%{transform:scale(1.2)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){button.gift-item:not(.is-open):active,button.flip-card[aria-disabled="false"]:active .flip-card-inner{transform:none}.gift-item.just-opened .gift-icon{animation:none}}

/* v0.4.0 — 동물 경주 · 좌석 배치 · 긴 카드 이름 가독성 */
.race-stage,.seats-stage{min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:clamp(12px,2vw,22px);display:grid;gap:16px}
.race-intro{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.race-intro strong{color:var(--ink-strong);font-size:clamp(17px,2vw,23px)}
.race-intro span,.race-help{color:var(--muted);font-size:13px;line-height:1.55}
.race-lanes{display:grid;gap:8px}
.race-lane{min-width:0;display:grid;grid-template-columns:minmax(90px,160px) minmax(100px,1fr) 64px;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px}
.race-label{display:flex;gap:7px;align-items:center;min-width:0;font-size:13px;font-weight:650;color:var(--ink-strong)}
.race-label bdi{min-width:0;overflow-wrap:anywhere}
.race-track{height:40px;min-width:0;position:relative;border-radius:9px;background:repeating-linear-gradient(90deg,var(--panel-muted) 0 22px,var(--panel) 22px 25px);border:1px dashed var(--line);overflow:hidden}
.race-runner{position:absolute;left:0;top:3px;font-size:26px;line-height:32px;z-index:1;transition:left var(--race-time,2.5s) cubic-bezier(.15,.55,.65,1)}
.race-running .race-runner{left:calc(100% - 42px)}
.race-flag{position:absolute;right:5px;top:6px;font-size:21px}
.race-place{font-size:12px;text-align:center;color:var(--ink-strong);overflow-wrap:anywhere}
.race-podium{border-radius:12px;background:var(--success-bg);border:1px solid var(--success-ink);padding:14px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.race-podium strong{font-size:clamp(17px,2.5vw,24px);overflow-wrap:anywhere;color:var(--ink-strong)}
.race-podium span{font-size:13px;color:var(--muted)}
.race-waiting{border-radius:14px;background:var(--panel-muted);padding:24px;text-align:center;color:var(--ink-strong)}
.seat-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.seat-settings>div{min-width:0}
.seats-front{text-align:center;border:2px solid var(--primary);color:var(--ink-strong);border-radius:12px;padding:12px;font-weight:800;background:var(--primary-soft)}
.seats-grid{display:grid;grid-template-columns:repeat(var(--seat-cols),minmax(0,1fr));gap:8px;overflow-x:auto;padding:3px}
.seat-cell{display:grid;place-content:center;gap:5px;min-width:0;min-height:76px;padding:8px 5px;border:1px solid var(--line);border-radius:11px;text-align:center;background:var(--panel-muted)}
.seat-cell.occupied{border-color:var(--primary);background:var(--primary-soft)}
.seat-cell strong{min-width:0;overflow-wrap:anywhere;color:var(--ink-strong);font-size:clamp(12px,1.3vw,16px);line-height:1.35}
.seat-cell.empty strong{color:var(--muted);font-weight:500}
.seat-number{font-size:11px;color:var(--muted)}
.seat-layouts{display:grid;gap:8px;margin-bottom:12px}
.seat-layout-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.seat-layout{min-height:64px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink-strong);padding:8px 10px;text-align:left;display:grid;align-content:center;gap:2px;font:inherit;cursor:pointer}
.seat-layout[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--primary)}
.seat-layout:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.seat-layout-name{font-weight:760;font-size:14px}
.seat-layout small{color:var(--muted);font-size:12px;font-weight:650}
.seat-layout-caption{margin:0;font-size:13px;font-weight:750;color:var(--ink-strong)}
.seats-grid[data-layout]{gap:12px 8px;align-items:stretch;padding:10px 6px;border-radius:14px;background:var(--panel-muted)}
.seats-grid[data-layout="class-pairs"]{column-gap:0;row-gap:14px}
.desk{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;min-width:0;min-height:112px;padding:4px 2px 6px}
.desk-top{width:78%;height:13px;border-radius:5px 5px 2px 2px;background:linear-gradient(#f0d2a8,#c49262);box-shadow:0 2px 0 #8d6840}
.desk-face{font-size:32px;line-height:1;margin-top:-9px;filter:drop-shadow(0 1px 0 rgba(24,35,69,.18))}
.desk-name{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center;color:var(--ink-strong);font-size:clamp(11px,1.2vw,14px);line-height:1.25;font-weight:750}
.desk.empty .desk-name{color:var(--muted);font-weight:560}
.desk-chair{width:44%;height:10px;border:3px solid var(--line-strong);border-top:0;border-radius:0 0 10px 10px;margin-top:1px}
.seats-stage[data-board="bottom"] .desk{flex-direction:column-reverse;justify-content:flex-end}
.seats-stage[data-layout="class-pairs"] .desk.is-pair-left .desk-top{width:94%;border-top-right-radius:2px;margin-right:-12%}
.seats-stage[data-layout="class-pairs"] .desk.is-pair-right .desk-top{width:94%;border-top-left-radius:2px;margin-left:-12%}
.seats-stage[data-layout="class-pairs"] .seat-aisle{margin:6px 8px}
.seat-aisle{align-self:stretch;min-height:88px;border-radius:999px;background:repeating-linear-gradient(180deg,transparent 0 7px,var(--line-strong) 7px 8px)}
.seat-gap{align-self:stretch;min-height:88px}
.desk .seat-token,.desk .desk-hit{align-self:stretch;width:100%;min-height:44px;margin:0;padding:2px 2px 0;border:0;background:transparent;color:inherit;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;touch-action:none;user-select:none}
.desk .seat-token{position:relative;cursor:grab}
.desk .desk-hit{cursor:pointer}
.seat-token.is-pinned{border-radius:10px;box-shadow:inset 0 0 0 2px var(--primary)}
.seat-token.is-carried{border-radius:10px;box-shadow:0 0 0 3px var(--primary)}
.seat-pin{position:absolute;top:0;right:2px;padding:1px 5px;border-radius:999px;background:var(--primary-soft);color:var(--primary-soft-ink);font-size:10px;font-weight:800;line-height:1.4}
.desk.is-seat-target,.seat-bench.is-seat-target{border-radius:12px;box-shadow:0 0 0 3px var(--primary);background:var(--primary-soft)}
.seat-bench{display:grid;gap:8px;padding:10px;border:1px dashed var(--line-strong);border-radius:14px;background:var(--panel-muted)}
.seat-bench-label{margin:0;font-size:13px;font-weight:750;color:var(--ink-strong)}
.seat-bench-row{display:flex;flex-wrap:wrap;gap:8px}
.seat-bench-empty{color:var(--muted);font-size:13px;line-height:1.5}
.seat-bench .seat-token{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-strong);font:inherit;font-weight:750;cursor:grab;touch-action:none;user-select:none}
.seat-bench .seat-token .desk-face{margin:0;font-size:22px;filter:none}
.seat-bench .seat-token.is-pinned{box-shadow:none;border-color:var(--primary)}
body.is-seat-dragging{user-select:none;cursor:grabbing}
body.is-seat-dragging .seat-token{cursor:grabbing}
#seat-drag-ghost{position:fixed;z-index:40;pointer-events:none;transform:translate(-40%,-140%);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border-radius:999px;border:1px solid var(--primary);background:var(--panel);color:var(--ink-strong);font-weight:750;box-shadow:var(--shadow)}
#seat-drag-ghost .desk-face{margin:0;font-size:22px;filter:none}
.seats-stage[data-layout="exam-spread"] .desk-top,.seats-stage[data-layout="exam-columns"] .desk-top{width:66%;height:16px;border-radius:3px;background:linear-gradient(var(--panel),var(--panel-muted));box-shadow:inset 0 0 0 1px var(--line-strong),0 2px 0 var(--line)}
.race-results-presentation{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:0;list-style:none;counter-reset:none}
.race-results-presentation li{display:grid;gap:6px;padding:14px 18px;border-radius:13px;background:var(--panel-muted);border:1px solid var(--line);overflow-wrap:anywhere}
.race-results-presentation li:first-child{background:var(--success-bg);border-color:var(--success-ink)}
.race-results-presentation li strong{font-size:14px;color:var(--muted)}
.race-results-presentation li span{font-size:clamp(18px,2.4vw,28px);font-weight:750;color:var(--ink-strong)}
/* 공개된 카드의 긴 이름은 말줄임 없이 줄바꿈하며, 작은 발표 화면에서는 카드 폭을 확보합니다. */
.flip-card-front{min-height:100%;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.flip-card-front strong{display:block;max-width:100%;line-height:1.35;overflow-wrap:anywhere;word-break:break-word;max-height:none}
.presentation-card-grid .presentation-card-item{min-width:0;min-height:175px;padding:16px 12px;overflow-wrap:anywhere;word-break:break-word}
.presentation-card-grid .presentation-card-item>strong{font-size:clamp(17px,2.3vw,28px);line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:760px){
 .race-stage,.seats-stage{padding:11px;gap:12px}
 .race-lane{grid-template-columns:minmax(58px,90px) minmax(90px,1fr) 45px;gap:5px;padding:5px}
 .race-label{font-size:11px;display:grid;gap:2px;text-align:center;justify-items:center}
 .race-track{height:36px}.race-runner{font-size:24px;top:2px}.race-place{font-size:11px}
 .seats-grid{grid-template-columns:repeat(var(--seat-cols),minmax(86px,1fr))}
 .seats-stage{overflow:hidden}.seats-grid{overflow-x:auto}
 .presentation-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .presentation-card-grid .presentation-card-item{min-height:155px;padding:12px 8px}
 .flip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .flip-card,.flip-card-inner{min-height:156px}
 .flip-card-front strong{font-size:15px}
}
@media(max-width:360px){.presentation-card-grid{grid-template-columns:repeat(1,minmax(0,1fr))}.seat-settings,.seat-layout-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.race-runner{transition:none!important}}

.race-stage[data-running="false"] .race-runner{left:calc(100% - 42px)}

/* v0.4.1: 마니또 개인 확인, 동물 경주 밀도, 좌석 방향 */
.manitto-stage{border:1px solid var(--line);border-radius:16px;padding:clamp(12px,2vw,24px);display:grid;gap:16px;background:var(--panel)}
.manitto-intro strong{font-size:clamp(18px,2vw,23px);color:var(--ink-strong)}
.manitto-intro p,.manitto-warning{font-size:13px;line-height:1.6;color:var(--muted);margin:6px 0 0}
.manitto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.manitto-person{display:grid;gap:9px;min-width:0;align-content:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-muted)}
.manitto-person span{overflow-wrap:anywhere;color:var(--ink-strong);font-weight:700}
.manitto-person button{min-height:44px;justify-content:center}
.manitto-secret{margin:14px 0;padding:20px;border:2px solid var(--primary);border-radius:14px;background:var(--primary-soft);color:var(--ink-strong);font-size:clamp(20px,3.5vw,34px);font-weight:800;overflow-wrap:anywhere;text-align:center}
.option-select{min-height:44px;width:100%;border:1px solid var(--line);border-radius:10px;color:var(--ink-strong);background:var(--panel);padding:8px 12px}
.seat-directions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.seat-directions label{font-size:13px;color:var(--ink-strong);font-weight:650;display:grid;gap:6px}
.seats-stage[data-board="bottom"] .seats-front{order:3}
.seats-stage[data-board="bottom"] .seat-door{order:1}
.seats-stage[data-board="bottom"] .seats-grid{order:2}
.seats-stage[data-board="bottom"] .race-help{order:4}
.seat-door{font-size:13px;color:var(--muted);text-align:left;min-height:28px}
.seats-stage[data-door="right"] .seat-door{text-align:right}
.race-stage.is-crowded .race-lanes{gap:5px}
.race-stage.is-crowded .race-lane{padding:5px 7px;gap:7px}
.race-stage.is-crowded .race-track{height:34px}
.race-stage.is-crowded .race-runner{font-size:22px;top:1px}
.race-stage.is-crowded .race-label{font-size:12px}
@media(max-width:760px){.race-stage.is-crowded .race-lane{grid-template-columns:minmax(52px,78px) minmax(0,1fr) 38px;gap:4px}.race-stage.is-crowded .race-label{font-size:11px}.manitto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.manitto-person{padding:10px}.seat-directions{gap:8px}}
@media(max-width:350px){.manitto-grid{grid-template-columns:1fr}.seat-directions{grid-template-columns:1fr}}

/* TurnCove v0.4.2 — 풍선 게임. 추첨 결과는 준비 단계에서 확정, 클릭은 공개만 수행. */
.balloon-stage{margin-top:12px;min-width:0;display:grid;gap:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel-muted);padding:clamp(12px,2vw,22px)}
.balloon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;min-width:0}
.balloon-item{min-width:0;min-height:168px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:12px 9px;border:1.5px solid var(--line-strong);border-radius:17px;background:var(--panel);font:inherit;color:var(--ink-strong);text-align:center;overflow-wrap:anywhere;transition:transform .18s,border-color .18s,background .18s}
button.balloon-item.is-ready:hover{transform:translateY(-4px);border-color:var(--primary)}
.balloon-item.is-ready{background:linear-gradient(170deg,var(--primary-soft),var(--panel) 82%)}
.balloon-visual{display:grid;place-items:center;min-height:68px;font-size:52px;line-height:1.15;filter:drop-shadow(0 6px 8px rgba(24,35,69,.1));user-select:none}
.balloon-index{font-size:13px;font-weight:790;color:var(--ink-strong)}
.balloon-hint,.balloon-outcome{font-size:12px;color:var(--muted);font-weight:740}
.balloon-item strong{font-size:clamp(14px,1.8vw,18px);line-height:1.4;word-break:break-word;overflow-wrap:anywhere}
.balloon-item.is-winning{background:var(--success-bg);border-color:var(--success-ink)}
.balloon-item.is-winning .balloon-outcome{color:var(--success-ink)}
.balloon-item.is-miss{border-style:dashed}
.balloon-item.just-popped .balloon-visual{animation:balloon-pop .38s ease-out both}
@keyframes balloon-pop{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.24)}100%{transform:scale(1);opacity:1}}
.balloon-item:focus-visible,.presentation-balloon-item:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.balloon-item[aria-disabled="true"],.presentation-balloon-item[aria-disabled="true"]{cursor:default}
.presentation-balloon-item.closed{background:linear-gradient(160deg,var(--primary-soft),var(--panel-muted));border-color:var(--line-strong)}
.presentation-balloon-item>span{font-size:32px}
.presentation-balloon-item>strong{overflow-wrap:anywhere;word-break:break-word}
.presentation-balloon-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.manitto-privacy-screen{padding:18px;background:var(--panel-muted);border:1px solid var(--line-strong);border-radius:12px;text-align:center}
.manitto-privacy-screen>strong{font-size:20px;color:var(--ink-strong)}
.manitto-privacy-screen p{font-size:13px;line-height:1.55;color:var(--muted)}
#manitto-secret[hidden],#manitto-hide[hidden],#manitto-show[hidden],#manitto-privacy-screen[hidden]{display:none!important}
/* 발표 모드에서 결과가 길어도 조작 영역을 침범하지 않도록 독립 스크롤 영역 사용 */
@media(max-width:760px){
 .balloon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .balloon-item{min-height:144px;padding:10px 5px;gap:5px}
 .balloon-visual{font-size:39px;min-height:52px}
 .balloon-item strong{font-size:13px}
 .balloon-hint{font-size:11px}
 .presentation-balloon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .presentation-balloon-item{min-height:134px;padding:13px 8px}
 .presentation-main:has(.presentation-box-grid),.presentation-main:has(.manitto-stage){min-height:0}
 #presentation-body:has(.presentation-box-grid),#presentation-body:has(.manitto-stage){overflow-y:auto;overscroll-behavior:contain;max-height:calc(100dvh - 205px);padding:5px 3px 20px;scrollbar-gutter:stable}
}
@media(max-width:360px){.balloon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.balloon-item{min-height:145px}.presentation-balloon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.balloon-item,.balloon-item.just-popped .balloon-visual{animation:none!important;transition:none!important}}

/* v0.4.3: 공개 진행률 및 공개된 항목만 탐색하기 */
.reveal-overview{display:grid;gap:9px;padding:13px 15px;border:1px solid var(--line);background:var(--panel-muted);border-radius:13px;margin:12px 0 15px;min-width:0}
.reveal-progress-heading{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;align-items:baseline;color:var(--ink-strong);font-size:13px}
.reveal-progress-heading span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.reveal-progress{display:block;width:100%;height:10px;accent-color:var(--primary);border:0;border-radius:100px;overflow:hidden}
.reveal-progress::-webkit-progress-bar{background:var(--line);border-radius:100px}
.reveal-progress::-webkit-progress-value{background:var(--primary);border-radius:100px}
.reveal-progress::-moz-progress-bar{background:var(--primary);border-radius:100px}
.reveal-view-switch{display:flex;flex-wrap:wrap;gap:7px}
.reveal-view-switch button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--panel);color:var(--ink-strong);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.reveal-view-switch button[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-soft-ink)}
.reveal-view-switch button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.reveal-empty{padding:15px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--muted);font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.presentation-groups .reveal-overview{max-width:900px;margin-inline:auto;width:100%}
/* v0.4.3: 두 이름만 포함하는 마니또 개인 카드 */
.manitto-person-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.manitto-person-actions>.button-small{flex:1 1 105px;min-width:0;white-space:normal;line-height:1.4}
.manitto-personal-feedback{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.personal-card-shell{min-height:100dvh;display:grid;place-items:center;padding:clamp(15px,4vw,45px);background:var(--canvas,#f5f6fb)}
.personal-card{width:min(100%,520px);padding:clamp(20px,5vw,38px);border-radius:20px;border:1px solid var(--line);background:var(--panel);box-shadow:0 12px 38px rgba(18,24,42,.12);display:grid;gap:13px;text-align:center;color:var(--ink-strong)}
.personal-card-symbol{font-size:50px;line-height:1}
.personal-card-eyebrow{color:var(--muted);font-size:12px;font-weight:700;margin:0}
.personal-card h1{font-size:clamp(22px,5vw,30px);line-height:1.25;overflow-wrap:anywhere;margin:0 0 8px}
.personal-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.personal-card .personal-card-giver,.personal-card .personal-card-recipient{font-size:clamp(18px,4.6vw,26px);padding:10px 12px;background:var(--panel-muted);border-radius:12px;overflow-wrap:anywhere}
.personal-card .personal-card-recipient{color:var(--primary-soft-ink);border:1px solid var(--line-strong)}
.personal-card .personal-card-warning{text-align:left;padding:12px;border-radius:12px;background:var(--panel-muted);font-size:12px;line-height:1.8}
.personal-card button{max-width:240px;width:100%;margin:3px auto 0}
@media(max-width:390px){.reveal-view-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.reveal-view-switch button{padding-inline:7px;font-size:12px}}

/* TurnCove v0.4.4 — opt-in game feel, fully separate from fair draw state. */
.game-feel-settings{margin:10px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--panel-muted);font-size:13px;max-width:100%;min-width:0}
.game-feel-settings summary{min-height:44px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:10px 12px;color:var(--ink-strong);font-weight:790;cursor:pointer}
.game-feel-settings summary>span{font-size:11px;color:var(--muted);font-weight:590}
.game-feel-settings[open] summary{border-bottom:1px solid var(--line)}
.game-feel-fields{padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.game-feel-fields label{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--ink-strong);font-weight:690;font-size:12px}
.game-feel-fields select{width:100%;min-width:0;min-height:42px;padding:6px;border:1px solid var(--line-strong);border-radius:9px;background:var(--panel);color:var(--ink-strong);font:inherit}
.game-feel-fields input[type=range]{width:100%;min-height:32px;accent-color:var(--primary)}
.game-feel-fields .game-feel-sound{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;min-height:42px}
.game-feel-sound input{height:19px;width:19px;accent-color:var(--primary)}
.game-feel-sound span{color:var(--muted);font-size:11px;font-weight:550}
.game-feel-note{padding:0 12px 12px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.tc-skip-animation{min-height:44px;margin:8px auto;border:1px solid var(--primary);background:var(--primary-soft);color:var(--primary-soft-ink);font-weight:760}
.tc-step-controls{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 14px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--panel-muted)}
.tc-step-controls span{color:var(--muted);font-size:12px}
.tc-mobile-edit{display:none}
.tc-result-flash{position:relative;isolation:isolate;animation:tc-result-glow .52s ease-out both}
@keyframes tc-result-glow{0%{filter:brightness(1.06)}45%{filter:brightness(1.1)}100%{filter:brightness(1)}}
.tc-confetti{position:absolute;pointer-events:none;left:50%;top:48%;z-index:3;width:0;height:0;overflow:visible}
.tc-confetti i{position:absolute;left:0;top:0;width:7px;height:12px;border-radius:2px;background:var(--primary);opacity:0;transform:rotate(var(--part-angle)) translateY(0);animation:tc-confetti-pop .72s ease-out both}
.tc-confetti i:nth-child(2n){background:var(--coral,#f47b6d)}
.tc-confetti i:nth-child(3n){background:var(--teal,#00a89b)}
@keyframes tc-confetti-pop{0%{opacity:1;transform:rotate(var(--part-angle)) translateY(0) scale(.8)}60%{opacity:1}100%{opacity:0;transform:rotate(var(--part-angle)) translateY(calc(-1 * var(--part-dist))) scale(.55)}}
/* Result reveal is not allowed to affect DOM order, focus or data. */
.tc-result-flash .winner,.tc-result-flash .team-card,.tc-result-flash .seat-cell.occupied,.tc-result-flash .ordered-list>li{animation:tc-result-enter .3s ease-out both}
.tc-result-flash .winner:nth-child(2n),.tc-result-flash .team-card:nth-child(2n){animation-delay:.05s}
@keyframes tc-result-enter{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* The original gift icon is already changed by the single, committed reveal. A decorative lid overlays only while its one-shot animation runs. */
.gift-icon,.presentation-gift-icon{display:inline-grid;place-items:center;position:relative}
.gift-item.just-opened .gift-icon::before,.presentation-box-item.just-opened .presentation-gift-icon::before{content:'🎁';position:absolute;inset:0;animation:tc-gift-lid .43s ease-out both;pointer-events:none}
@keyframes tc-gift-lid{0%{opacity:1;transform:translateY(0) scale(1)}43%{opacity:1;transform:translateY(-13px) scale(1.13)}100%{opacity:0;transform:translateY(-32px) rotate(-9deg) scale(.8)}}
.presentation-gift-icon{font-size:38px;line-height:1.3}
.balloon-item.just-popped .balloon-visual,.presentation-balloon-item.just-popped .balloon-visual{position:relative;animation:tc-balloon-reveal .38s ease-out both}
.balloon-item.just-popped .balloon-visual::before,.presentation-balloon-item.just-popped .balloon-visual::before{content:'🎈';position:absolute;inset:0;animation:tc-balloon-shell .34s ease-out both}
.balloon-item.just-popped .balloon-visual::after,.presentation-balloon-item.just-popped .balloon-visual::after{content:'✦  ✧';position:absolute;font-size:16px;opacity:0;animation:tc-balloon-sparks .5s ease-out both}
@keyframes tc-balloon-shell{0%{opacity:1;transform:scale(1)}45%{opacity:1;transform:scale(1.22)}46%,100%{opacity:0;transform:scale(1.5)}}
@keyframes tc-balloon-reveal{0%{transform:scale(.8);opacity:.7}55%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes tc-balloon-sparks{15%{opacity:0;transform:scale(.5)}45%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2)}}
.presentation-balloon-item .balloon-visual{font-size:36px}
.presentation-card-item{transform-style:preserve-3d;perspective:700px}
.presentation-card-item .presentation-card-visual{font-size:28px;line-height:1}
.presentation-card-item.just-flipped{animation:tc-presentation-flip .55s cubic-bezier(.2,.74,.25,1) both}
@keyframes tc-presentation-flip{0%{transform:rotateY(-88deg);opacity:.65}65%{transform:rotateY(8deg);opacity:1}100%{transform:rotateY(0);opacity:1}}
/* Running position uses composited transforms and a container-length unit, not layout-affecting left transitions. */
.race-track{container-type:inline-size}
.race-runner{left:0!important;transform:translateX(0);transition:none!important}
.race-running .race-runner{left:0!important;will-change:transform;animation:tc-race-run var(--race-time,2.5s) linear both}
.race-stage[data-running="false"] .race-runner{left:0!important;transform:translateX(calc(100cqw - 42px))}
@keyframes tc-race-run{0%{transform:translateX(0)}18%{transform:translateX(calc((100cqw - 42px)*var(--tc-race-p18,.12)))}42%{transform:translateX(calc((100cqw - 42px)*var(--tc-race-p42,.35)))}68%{transform:translateX(calc((100cqw - 42px)*var(--tc-race-p68,.69)))}89%{transform:translateX(calc((100cqw - 42px)*var(--tc-race-p89,.91)))}100%{transform:translateX(calc(100cqw - 42px))}}
.race-stage[data-running="false"] .race-lane:has(.race-place:first-of-type){border-color:var(--line)}
.race-stage[data-running="false"] .race-podium{animation:tc-result-enter .33s ease-out both}
/* Quieter privacy-focused manitto feedback; no sound and no extra participants. */
.manitto-dialog.tc-envelope-open .manitto-secret{animation:tc-envelope-open .32s ease-out both}
.personal-card .tc-envelope-symbol{transform-origin:center bottom;animation:tc-envelope-open .34s ease-out both}
.personal-card .personal-card-recipient{animation:tc-recipient-show .34s ease-out both}
@keyframes tc-envelope-open{from{transform:rotateX(-35deg) scale(.96);opacity:.25}to{transform:rotateX(0) scale(1);opacity:1}}
@keyframes tc-recipient-show{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* OS preference always has priority, independent of saved local preferences. */
:root[data-tc-motion="minimal"] *, :root[data-tc-motion="minimal"] *::before, :root[data-tc-motion="minimal"] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
:root[data-tc-motion="minimal"] .tc-confetti{display:none}
/* Short mode is now controlled by --tc-motion-scale for all visual-only effects. */
@media(max-width:760px){
 .game-feel-fields{grid-template-columns:1fr}
 .tc-mobile-edit{display:inline-flex;grid-column:1/-1;justify-content:center}
 .tc-mobile-compact .control-stack{display:none}
 .tc-mobile-compact .result-panel{min-height:0}
 .tc-mobile-compact .result-header{scroll-margin-top:20px}
 .tc-mobile-compact .tc-mobile-edit{background:var(--primary-soft);color:var(--primary-soft-ink);border-color:var(--primary)}
}
@media(prefers-reduced-motion:reduce){.tc-result-flash,.tc-result-flash *, .tc-confetti,.tc-confetti *, .gift-item.just-opened .gift-icon::before,.presentation-box-item.just-opened .presentation-gift-icon::before,.presentation-balloon-item.just-popped .balloon-visual,.personal-card .tc-envelope-symbol{animation:none!important}}

/* v0.4.5 GF-15/19/23: one local visual motion scale, result-first staged cover. */
.tc-sound-shortcut{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.tc-sound-shortcut>span{font-size:11px;color:var(--muted)}
.tc-sound-shortcut button{min-height:44px}
.game-feel-status{padding:0 12px 10px;margin:0;color:var(--muted);font-size:12px}
.game-feel-status:empty{display:none}
.tc-result-flash{animation-duration:calc(.52s * var(--tc-motion-scale,1))}
.tc-confetti i{animation-duration:calc(.72s * var(--tc-motion-scale,1))}
.tc-result-flash .winner,.tc-result-flash .team-card,.tc-result-flash .seat-cell.occupied,.tc-result-flash .ordered-list>li{animation-duration:calc(.30s * var(--tc-motion-scale,1))}
.gift-item.just-opened .gift-icon,.presentation-box-item.just-opened .presentation-gift-icon{animation-duration:calc(.36s * var(--tc-motion-scale,1))}
.gift-item.just-opened .gift-icon::before,.presentation-box-item.just-opened .presentation-gift-icon::before{animation-duration:calc(.43s * var(--tc-motion-scale,1))}
.balloon-item.just-popped .balloon-visual,.presentation-balloon-item.just-popped .balloon-visual{animation-duration:calc(.38s * var(--tc-motion-scale,1))}
.balloon-item.just-popped .balloon-visual::before,.presentation-balloon-item.just-popped .balloon-visual::before{animation-duration:calc(.34s * var(--tc-motion-scale,1))}
.balloon-item.just-popped .balloon-visual::after,.presentation-balloon-item.just-popped .balloon-visual::after{animation-duration:calc(.50s * var(--tc-motion-scale,1))}
.flip-card.just-flipped .flip-card-inner,.presentation-card-item.just-flipped{animation-duration:calc(.55s * var(--tc-motion-scale,1))}
.manitto-dialog.tc-envelope-open .manitto-secret,.personal-card .tc-envelope-symbol,.personal-card .personal-card-recipient{animation-duration:calc(.34s * var(--tc-motion-scale,1))}
/* Three visual phases: press, lid/shell/flip, precommitted text becomes visible. Accessible names remain immediate. */
.gift-item.just-opened,.balloon-item.just-popped,.flip-card.just-flipped,
.presentation-box-item.just-opened,.presentation-balloon-item.just-popped,.presentation-card-item.just-flipped{position:relative;isolation:isolate}
.gift-item.just-opened::after,.balloon-item.just-popped::after,.flip-card.just-flipped::after,
.presentation-box-item.just-opened::after,.presentation-balloon-item.just-popped::after,.presentation-card-item.just-flipped::after{
  content:'✦';display:grid;place-items:center;position:absolute;inset:0;z-index:4;
  border-radius:inherit;pointer-events:none;color:var(--primary-soft-ink);font-size:28px;
  background:var(--panel-muted);animation:tc-staged-reveal calc(.48s * var(--tc-motion-scale,1)) ease-out both
}
@keyframes tc-staged-reveal{
  0%{opacity:1;transform:scale(.97)}20%{opacity:1;transform:scale(1)}
  64%{opacity:1}80%{opacity:.32}100%{opacity:0;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){.gift-item.just-opened::after,.balloon-item.just-popped::after,.flip-card.just-flipped::after,.presentation-box-item.just-opened::after,.presentation-balloon-item.just-popped::after,.presentation-card-item.just-flipped::after{display:none}}
:root[data-tc-motion="minimal"] .gift-item.just-opened::after,:root[data-tc-motion="minimal"] .balloon-item.just-popped::after,:root[data-tc-motion="minimal"] .flip-card.just-flipped::after,:root[data-tc-motion="minimal"] .presentation-box-item.just-opened::after,:root[data-tc-motion="minimal"] .presentation-balloon-item.just-popped::after,:root[data-tc-motion="minimal"] .presentation-card-item.just-flipped::after{display:none}
/* Presenter primary controls, optional settings behind a single button on mobile. */
#presentation .presentation-controls>[hidden],#presentation .presentation-options [hidden]{display:none!important}
@media(max-width:760px){
 #presentation .presentation-controls,#presentation .presentation-controls:has(.presentation-team-nav){display:flex;flex-wrap:wrap;align-items:center;gap:6px}
 #presentation #presentation-next-reveal,#presentation #presentation-rerun,#presentation #presentation-exit{flex:1 1 29%;min-width:70px;width:auto;min-height:44px}
 #presentation #presentation-options-toggle{flex:1 1 100%;min-height:44px;width:100%}
 #presentation #presentation-options{flex:1 1 100%;min-width:0;justify-content:center}
 #presentation .tc-skip-animation{flex:1 1 100%;min-height:44px;margin:0}
 .tc-sound-shortcut{justify-content:flex-start}
}

/* v0.4.6: ladder full-board focus */
.workspace.ladder-compact{grid-template-columns:minmax(0,1fr)}
.workspace.ladder-compact>.control-stack{display:none}
.workspace .ladder-settings-toggle{grid-column:1/-1;justify-self:start}
.workspace.ladder-compact .result-panel{min-width:0}
.ladder-playback-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ladder-playback-controls select{max-width:100%;min-height:40px}
@media(max-width:760px){.workspace.ladder-compact>.control-stack{display:none}.ladder-playback-controls{gap:8px}}

/* v0.4.7: ladder playback state feedback and focus restoration. */
.ladder-playback-progress{display:inline-block;max-width:100%;font-size:12px;line-height:1.5;font-weight:750;color:var(--primary-soft-ink)}

/* In compact ladder mode, prioritize the playable board over repeated run/share actions. */
.workspace.ladder-compact .game-run-panel{display:none}
.workspace.ladder-compact .result-body{order:1}
.workspace.ladder-compact .result-share-tools{order:2;border-top:1px solid var(--line);border-bottom:0}
.workspace.ladder-compact .search-navigation-dock{order:3}
.workspace.ladder-compact .ladder-playback-controls select{min-height:44px}

/* v0.4.8: staged ladder presentation and stable path-only replay updates. */
.presentation-ladder-intro{display:grid;justify-items:center;gap:16px;padding:clamp(24px,5vw,64px);text-align:center;border:2px dashed var(--line-strong);border-radius:18px;background:var(--panel-muted)}
.presentation-ladder-intro>strong{font-size:clamp(20px,3vw,34px);color:var(--ink-strong)}
.presentation-ladder-intro p{max-width:48ch;line-height:1.6;color:var(--muted)}
.presentation-ladder-intro .ladder-playback-controls{width:100%;justify-content:center}
.presentation-ladder-intro [data-action="presentation-ladder-start"]{min-height:48px;min-width:180px}
.presentation-ladder{max-width:100%;min-width:0}
.presentation-ladder .ladder-scroll{background:var(--panel);max-width:100%;overflow-x:auto}
.presentation-ladder .ladder-person{min-height:58px}
.presentation-ladder .ladder-people{grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr))}
.presentation-ladder .ladder-selection-status{gap:8px}
@media(max-width:600px){.presentation-ladder .ladder-people{grid-template-columns:repeat(2,minmax(0,1fr))}.presentation-ladder-intro{padding:22px 12px}}
@media(prefers-reduced-motion:reduce){.presentation-ladder .ladder-highlight-animated{animation:none}}

/* v0.4.9 — all 10 tools, accessible catalog filtering */
.catalog-toolbar{display:grid;gap:11px;margin-top:17px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--panel-muted)}
.catalog-toolbar>label{font-size:13px;font-weight:770;color:var(--ink-strong)}
.catalog-search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#game-catalog-search{flex:1 1 220px;min-width:0;min-height:44px;padding:9px 12px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;color:var(--ink-strong);font:inherit}
#game-catalog-search:focus-visible,.catalog-category:focus-visible{outline:3px solid var(--focus,var(--primary));outline-offset:2px}
.catalog-categories{display:flex;flex-wrap:wrap;gap:8px}
.catalog-category{border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink);min-height:44px;padding:8px 14px;font:inherit;font-size:13px;font-weight:680;cursor:pointer}
.catalog-category[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-soft-ink)}
.catalog-category:hover{border-color:var(--primary)}
#game-catalog-count{margin:0;font-size:12px;color:var(--muted)}
.catalog-empty{margin:15px 0;padding:15px;border:1px dashed var(--line-strong);border-radius:12px;color:var(--muted)}
.home-game-card[hidden],.home-game-category[hidden],.catalog-empty[hidden]{display:none!important}
/* Released names must be legible without clipping; pre-reveal name stays out of the DOM. */
.flip-card.card-name-long,.flip-card.card-name-long .flip-card-inner{min-height:202px}
.flip-card.card-name-very-long,.flip-card.card-name-very-long .flip-card-inner{min-height:260px}
.flip-card-front strong.card-name-long{font-size:clamp(13px,1.7vw,18px);overflow-wrap:anywhere;line-height:1.3}
.flip-card-front strong.card-name-very-long{font-size:clamp(12px,1.35vw,15px);overflow-wrap:anywhere;line-height:1.32}
.presentation-card-grid .presentation-card-item.card-name-long{min-height:200px}
.presentation-card-grid .presentation-card-item.card-name-very-long{min-height:240px}
.presentation-card-grid .presentation-card-item>strong.card-name-long{font-size:clamp(15px,1.8vw,22px)}
.presentation-card-grid .presentation-card-item>strong.card-name-very-long{font-size:clamp(12px,1.6vw,17px)}
/* Intermediate turn points only after path animation completes. */
.ladder-waypoint{fill:var(--primary);stroke:var(--panel);stroke-width:2.5;pointer-events:none}
@media(max-width:600px){.catalog-toolbar{padding:12px}.catalog-categories{gap:6px}.catalog-category{padding:8px 10px;font-size:12px}}

/* v0.4.11: opt-in session tools; avoid visual noise until the user expands the section. */
.tc-operations-panel{margin:20px 20px 24px;border:1px solid var(--line);border-radius:14px;background:var(--panel-muted);color:var(--ink)}
.tc-operations-panel>summary{cursor:pointer;padding:13px 16px;font-weight:740;color:var(--ink-strong);list-style-position:inside}
.tc-operations-panel[open]>summary{border-bottom:1px solid var(--line)}
.tc-ops-inner{padding:14px;display:grid;gap:14px}
.tc-ops-group{padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.tc-ops-group h3{font-size:14px;margin:0 0 10px;color:var(--ink-strong)}
.tc-ops-group h3 small{font-size:11px;color:var(--muted);font-weight:550}
.tc-ops-group summary{cursor:pointer;font-weight:680;line-height:1.6}
.tc-ops-group p,.tc-ops-hint{font-size:12px;line-height:1.6;color:var(--muted);margin:8px 0}
.tc-ops-group select{border:1px solid var(--line-strong);border-radius:9px;max-width:100%;min-height:36px;padding:5px 8px;background:var(--panel);color:var(--ink)}
.tc-button-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.tc-history-list{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tc-history-list button{max-width:100%;white-space:normal}
.tc-check{display:flex;gap:8px;align-items:center;line-height:1.5;font-size:13px;cursor:pointer}
.tc-check input{width:18px;height:18px;accent-color:var(--primary)}
.tc-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.tc-compare-col{min-width:0;background:var(--panel-muted);padding:10px;border-radius:9px}
.tc-compare-col strong{font-size:12px}
.tc-compare-col pre{font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;font-size:12px;line-height:1.6}
.tc-preset-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}
.tc-preset-row strong{max-width:180px;overflow-wrap:anywhere}
.tc-preset-row span{margin-right:auto;color:var(--muted);font-size:12px}
.tc-countdown-status:not(:empty){display:block;text-align:center;font-size:clamp(28px,6vw,56px);font-weight:900;color:var(--primary);padding:5px}
.tc-countdown-status:empty{display:none}
:root[data-tc-style="party"]{--primary:#ae408d;--primary-hover:#8f2878;--primary-soft:#fceafa;--primary-soft-ink:#84266c;--teal:#087c7a;--coral:#ea6c51}
:root[data-tc-style="business"]{--primary:#285e87;--primary-hover:#174966;--primary-soft:#e9f2fa;--primary-soft-ink:#174e76;--teal:#186f69;--coral:#aa6a35}
:root[data-theme="dark"][data-tc-style="party"]{--primary:#e6a4d9;--primary-hover:#f6b9ea;--primary-soft:#482643;--primary-soft-ink:#ffd4f5}
:root[data-theme="dark"][data-tc-style="business"]{--primary:#8bbfea;--primary-hover:#add7f7;--primary-soft:#213f55;--primary-soft-ink:#b4dcf8}
body.tc-stage-focus .control-stack,body.tc-stage-focus .page-intro,body.tc-stage-focus .home-discovery,body.tc-stage-focus .guide-section,body.tc-stage-focus .trust-strip{display:none!important}
body.tc-stage-focus .app-shell{max-width:100%;padding:14px}
body.tc-stage-focus .workspace{display:block;max-width:100%}
body.tc-stage-focus .result-panel{width:100%;max-width:none}
body.tc-stage-focus .result-body{min-height:35vh}
.result-panel:fullscreen{overflow:auto;min-height:100vh;border-radius:0;padding:clamp(10px,2vw,30px);background:var(--panel);color:var(--ink)}
.result-panel:fullscreen .result-body{min-height:55vh}
.result-panel:fullscreen .result-header{font-size:1.2em}
@media(min-width:1400px){.result-panel:fullscreen .winner-reveal-name{font-size:clamp(48px,6vw,100px)}}
@media(max-width:600px){.tc-operations-panel{margin:12px 10px 20px}.tc-ops-inner{padding:9px}.tc-ops-group{padding:11px}.tc-compare{grid-template-columns:1fr}}
@media print {
  body{background:#fff!important;color:#111!important}
  .site-header,.page-intro,.control-stack,.game-run-panel,.result-header-actions,.result-share-tools,.result-search,.search-navigation-dock,.tc-operations-panel,.site-footer,.trust-strip,.home-discovery,button{display:none!important}
  .app-shell,.workspace,.result-panel{max-width:100%!important;display:block!important;padding:0!important;border:0!important;box-shadow:none!important}
  .result-body{overflow:visible!important;color:#111!important}
  .result-ready,.result-body *{animation:none!important;transition:none!important}
  .presentation{display:none!important}
}

/* v0.4.12 event tools entry */
.event-promo{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--primary-soft);border:1px solid var(--line-strong);border-radius:16px;padding:20px 24px;margin:22px 0}.event-promo strong{font-size:18px;color:var(--ink-strong)}.event-promo p{margin:6px 0;color:var(--muted);font-size:13px}.event-promo a{white-space:nowrap;background:var(--panel);padding:11px 16px;border-radius:10px;border:1px solid var(--line)}@media(max-width:640px){.event-promo{align-items:stretch;flex-direction:column}}

/* NEXT-06: non-destructive language preview; original Korean game state remains unchanged. */
.tc-locale{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem;font-size:.75rem;max-width:100%}
.tc-locale button{border:1px solid var(--line, #abb8ce);background:transparent;color:inherit;padding:.38rem .5rem;border-radius:.5rem;font:inherit;cursor:pointer;white-space:nowrap}
.tc-locale button[aria-pressed="true"]{background:var(--primary-soft,#e9efff);border-color:var(--primary,#5573cd);color:var(--text,#293550)}
.tc-locale button:focus-visible{outline:3px solid var(--primary,#5573cd);outline-offset:2px}
#tc-i18n-notice{flex-basis:100%;font-size:.72rem;color:var(--muted,#5d6570);max-width:36rem;line-height:1.4;margin:.25rem 0}
@media(max-width:650px){.tc-locale{font-size:.7rem}.tc-locale button{padding:.35rem .4rem}}

.page-intro > .tc-locale { display:flex; width:fit-content; max-width:100%; margin-top:.65rem; justify-content:flex-start; }
#event-main > .tc-locale { display:flex; justify-content:flex-start; margin:.4rem 0 1rem; }

/* v0.4.17: small-screen quick action; never obscures focused form controls or keyboards */
.mobile-quick-run{display:none}
@media(max-width:600px){.mobile-quick-run{display:block;position:fixed;left:12px;right:12px;bottom:calc(9px + env(safe-area-inset-bottom));z-index:30;width:calc(100% - 24px);padding:13px 20px;min-height:46px;border:1px solid #244b67;border-radius:12px;background:#173a54;color:#fff;font-weight:800;font-size:15px;box-shadow:0 5px 20px #092e4c44}.app-shell{padding-bottom:calc(74px + env(safe-area-inset-bottom))}body:has(:is(input,textarea,select):focus) .mobile-quick-run,body:has(#presentation:not([hidden])) .mobile-quick-run{display:none}}

/* v0.4.17: tablet-width navigation must not force horizontal page scrolling. */
@media (min-width:761px) and (max-width:900px) {
  .site-header .header-inner {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:7px;padding:9px 18px 10px}
  .site-header .primary-nav {grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;min-width:0}
  .site-header .nav-link {padding:0 3px;font-size:12px;gap:4px;min-width:0}
  .site-header .header-actions {grid-column:2;grid-row:1;margin-left:0}
}

/* v0.4.21: status is visual only; the existing live-region announces transitions. */
.tc-result-phase{display:inline-flex;align-items:center;margin-top:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:700;background:var(--panel,transparent);color:var(--text-muted,var(--muted,#667085))}
.tc-result-phase[data-phase="done"]{color:var(--success-ink,#14643a);background:var(--success-bg,#edf9f1)}
.tc-result-phase[data-phase="error"]{color:var(--danger,#ad3535)}
.tc-result-phase[data-phase="running"]{color:var(--accent,#3257bc)}

/* Roster slots: one row per participant. Faded text is an automatic nickname. */
.roster-slots{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;padding:10px 8px;scroll-padding:12px}
.roster-slot{display:grid;grid-template-columns:2.2rem 2.75rem minmax(0,1fr);gap:8px;align-items:center}
.roster-slot-index{color:var(--muted);font-size:13px;font-weight:700;text-align:center;cursor:grab;user-select:none}
.roster-slot-index:active{cursor:grabbing}
.roster-slot-input{display:block;width:100%;height:44px;min-height:44px;margin:0;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink-strong);font:inherit;font-size:14px;font-weight:700}
.roster-slot-input.is-generated{color:var(--muted);font-weight:500;background:var(--panel-muted)}
.roster-slot.is-dragging,.live-person.is-dragging{outline:2px solid var(--primary);outline-offset:2px}
.roster-slot.is-drop-target,.live-person.is-drop-target{outline:2px dashed var(--primary);outline-offset:2px}
.roster-slot-nav{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:8px}
.roster-slot-nav[hidden]{display:none}
.roster-slot-nav button{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-muted);color:var(--ink-strong);font:inherit;font-weight:650}
.roster-slot-nav button:disabled{opacity:.5;cursor:default}
.roster-slot-nav span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.live-board-v033 .live-person.is-generated,.live-board-v033 .live-person.is-generated bdi{color:var(--muted)}
.live-board-v033 .live-person{cursor:grab}
.live-board-v033 .live-person:active{cursor:grabbing}

/* Line slots: one row per item. Faded text is a default value. */
.line-slots{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;padding:2px}
.line-slot{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:8px;align-items:center}
.line-slot.cols-pair{grid-template-columns:2.5rem minmax(0,1fr) minmax(0,1fr)}
.line-slot.cols-triple{grid-template-columns:2.5rem minmax(0,1.4fr) 4.5rem 4.5rem}
.line-slot.cols-weight{grid-template-columns:2.5rem minmax(0,1fr) 5rem auto}
.line-slot-index{color:var(--muted);font-size:13px;font-weight:700;text-align:center;cursor:grab;user-select:none}
.line-slot-index:active{cursor:grabbing}
.line-slot-input{display:block;width:100%;height:44px;min-height:44px;margin:0;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink-strong);font:inherit;font-size:14px;font-weight:700}
.line-slot-input.is-generated{color:var(--muted);font-weight:500;background:var(--panel-muted)}
.line-slot.is-dragging{outline:2px solid var(--primary);outline-offset:2px}
.line-slot.is-drop-target{outline:2px dashed var(--primary);outline-offset:2px}
.line-slot-nav{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:8px}
.line-slot-nav[hidden]{display:none}
.line-slot-nav button{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-muted);color:var(--ink-strong);font:inherit;font-weight:650}
.line-slot-nav button:disabled{opacity:.5;cursor:default}
.line-check{display:flex;align-items:center;gap:6px;min-height:44px;color:var(--muted);font-size:13px;font-weight:650;white-space:nowrap}
.line-check input{width:1.1rem;height:1.1rem}
.line-slots-source{display:none !important}
.seat-pick-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;padding:2px}
.seat-pick{display:flex;align-items:center;gap:8px;min-height:36px;color:var(--ink-strong);font-size:14px;font-weight:650}
.event-tool .line-slots{margin:0 0 8px}
.event-tool .line-slot-nav{margin:0 0 12px}
@media (max-width:600px){
  .line-slot.cols-triple{grid-template-columns:2rem minmax(0,1fr) 3.4rem 3.4rem}
  .line-slot.cols-weight{grid-template-columns:2rem minmax(0,1fr) 4rem}
  .line-slot.cols-weight .line-check{grid-column:2 / -1}
}

/* Name-slot focus rings stay inside the scrollport. The icon is separate from the name. */
.roster-slot-input:focus-visible,
.roster-icon-button:focus-visible{outline-offset:2px;position:relative;z-index:1}
.roster-icon-button{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel-muted);color:var(--ink-strong);font-size:22px;line-height:1;display:grid;place-items:center}
.roster-icon-glyph{pointer-events:none}
.roster-shuffle{min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel-muted);color:var(--ink);font-size:13px;font-weight:700}
.live-board-heading .ring-shuffle{margin-left:auto;align-self:center;flex:none}
@media(max-width:390px){.live-board-v033 .live-board-heading{flex-direction:row;align-items:center}}
.team-stepper .count-stepper{max-width:260px}
.roster-slots.is-shuffling{pointer-events:none;perspective:700px}
.roster-slots.is-shuffling .roster-slot{position:relative;animation:roster-slot-spin var(--shuffle-ms,1100ms) cubic-bezier(.12,.78,.18,1) both;transform-origin:center}
@keyframes roster-slot-spin{to{transform:rotateX(1080deg)}}
.roster-icon-popover{position:fixed;z-index:40;width:280px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}
.roster-icon-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;max-height:min(280px,46vh);overflow:auto}
.roster-icon-choice{min-height:40px;border:0;border-radius:8px;background:var(--panel-muted);font-size:20px;line-height:1}
.roster-icon-clear{width:100%;min-height:40px;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-weight:700}

.result-header{position:relative;z-index:2}
.result-header-utility{position:relative;display:flex;align-items:center;gap:6px;flex:none}
.result-header-utility .button-small{flex:0 0 auto}
.sound-icon-button{width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink-strong);font-size:18px;line-height:1;display:grid;place-items:center}
.feel-settings-popover{position:absolute;top:calc(100% + 8px);right:0;width:min(320px,80vw);z-index:20;padding:12px 0 4px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}
.feel-settings-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 12px 8px}
.feel-settings-head strong{color:var(--ink-strong);font-size:14px}
.feel-settings-head span{color:var(--muted);font-size:12px;font-weight:550}

@property --angle{syntax:"<angle>";inherits:true;initial-value:-90deg}
.ring-stage{container-type:size;position:relative;width:min(100%,460px);aspect-ratio:1;min-height:280px;margin:8px auto 12px}
.ring-rotor{position:absolute;inset:0;transform-origin:50% 50%}
.ring-circle{position:absolute;inset:14%;border:2px dashed var(--line-strong);border-radius:50%;pointer-events:none}
.ring-stage.is-drop-target .ring-circle{border-color:var(--teal);background:var(--primary-soft)}
.ring-seat{position:absolute;left:50%;top:50%;z-index:1;max-width:38%;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-24cqmin);transition:transform 480ms ease}
.ring-seat.is-outside{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-42cqmin)}
.ring-stage .ring-person{position:relative;left:auto;top:auto;margin:0;max-width:none;white-space:nowrap;transform:rotate(calc(var(--angle) * -1));transform-origin:center}
.ring-stage .ring-person.is-compact{width:36px;height:36px;min-height:36px;padding:0;justify-content:center;border-radius:50%}
@keyframes ring-rotor-spin{to{transform:rotate(1080deg)}}
@keyframes ring-person-spin{to{rotate:-1080deg}}
@keyframes ring-tumble{from{translate:0 -5px}to{translate:0 5px}}
.ring-stage.is-shuffling{pointer-events:none}
.ring-stage.is-shuffling .ring-rotor{animation:ring-rotor-spin var(--shuffle-ms,1100ms) cubic-bezier(.12,.78,.18,1) both}
.ring-stage.is-shuffling .ring-circle{border-color:var(--primary);background:var(--primary-soft)}
.ring-stage.is-shuffling .ring-seat{transition:none;pointer-events:none}
.ring-stage.is-shuffling .ring-person{pointer-events:none;animation:ring-person-spin var(--shuffle-ms,1100ms) cubic-bezier(.12,.78,.18,1) both,ring-tumble 140ms ease-in-out infinite alternate}
.ring-summary{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:62%;text-align:center;font-weight:750;color:var(--ink-strong)}
.ring-bench{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ring-bench-label{font-size:12px;font-weight:750;color:var(--muted)}
.ring-bench-animal{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 10px;border:1px dashed var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink-strong);font:inherit;font-size:13px;font-weight:700;cursor:grab}
.ring-bench-animal:active{cursor:grabbing}
.ring-bench-hint{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.wheel-label bdi{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wheel-label .animal-emoji{margin-right:0;font-size:15px}
.wheel-label.is-compact{max-width:24%;padding:2px 6px;font-size:12px;gap:2px}
.wheel-label.is-compact .animal-emoji{font-size:14px}
@container (max-width: 380px) {
  .wheel-label.is-compact{width:28px;height:28px;max-width:28px;padding:0;gap:0}
  .wheel-label.is-compact bdi{display:none}
  .wheel-label.is-compact .animal-emoji{font-size:16px;line-height:1}
}
.wheel-label.is-icon{width:30px;height:30px;max-width:30px;padding:0;gap:0}
.wheel-label.is-icon .animal-emoji{font-size:18px;line-height:1}
.wheel-label.is-icon.is-tight{width:26px;height:26px;max-width:26px}
.wheel-label.is-icon.is-tight .animal-emoji{font-size:16px;line-height:1}
.wheel-label[data-roster-drag]{pointer-events:auto;cursor:grab}
.wheel-label[data-roster-drag]:active{cursor:grabbing}
.wheel-disc.spinning .wheel-label,.wheel-disc.is-settling .wheel-label{pointer-events:none;cursor:default}
.wheel-label.is-drop-target,.wheel-chip.is-drop-target{outline:2px dashed var(--primary);outline-offset:2px}
.wheel-label.is-dragging,.wheel-chip.is-dragging{opacity:.45}
.wheel-wrap.is-drop-target .wheel-border{box-shadow:0 0 0 3px var(--teal),0 18px 40px rgba(17,28,53,.14)}
.wheel-roster{width:min(100%,520px)}
.wheel-roster-label,.wheel-roster-note{display:block;margin:0;color:var(--muted);font-size:12px;font-weight:750;line-height:1.5;text-align:center}
.wheel-roster-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.wheel-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:40px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-strong);font-size:13px;font-weight:750;cursor:grab;user-select:none}
.wheel-chip:active{cursor:grabbing}
.wheel-chip .animal-emoji{margin-right:0;font-size:15px}
.wheel-chip bdi{min-width:0;overflow:hidden;text-overflow:ellipsis}
.roulette-pens{display:grid;grid-template-columns:1fr;gap:10px;width:min(100%,640px)}
@container (min-width: 560px){.roulette-pens{grid-template-columns:1fr 1fr}.roulette-pens:has(> :only-child){grid-template-columns:1fr}}
.animal-pen{min-width:0;border:1.5px dashed var(--line-strong);border-radius:16px;padding:10px 12px 12px;background:color-mix(in srgb,var(--panel-muted) 72%,transparent)}
.animal-pen-label{display:block;margin:0 0 8px;font-size:13px;font-weight:800;color:var(--ink-strong)}
.animal-pen-body{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.animal-pen-participants .animal-pen-body{max-height:180px;overflow:auto}
.animal-pen-empty,.animal-pen-note{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.animal-pen-note{margin-top:8px}
.animal-pen .ring-bench-animal{background:var(--panel)}
.live-board .animal-pen-candidates,.result-ready > .animal-pen-candidates{margin-top:12px}
.animal-pen-candidates{
  --fence-post:#6b4423;
  --fence-rail:#d3924a;
  position:relative;
  border:0;
  border-radius:14px;
  padding:22px 20px 16px;
  background:color-mix(in srgb,var(--panel-muted) 78%,#f0d7a8);
}
:root[data-theme="dark"] .animal-pen-candidates{
  --fence-post:#f0d2a8;
  --fence-rail:#c4843c;
  background:color-mix(in srgb,var(--panel-muted) 84%,#4a321c);
}
.animal-pen-candidates::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(var(--fence-rail),var(--fence-rail)) 0 4px / 100% 4px no-repeat,
    linear-gradient(var(--fence-rail),var(--fence-rail)) 0 13px / 100% 4px no-repeat,
    linear-gradient(var(--fence-rail),var(--fence-rail)) 0 calc(100% - 17px) / 100% 4px no-repeat,
    linear-gradient(var(--fence-rail),var(--fence-rail)) 0 calc(100% - 8px) / 100% 4px no-repeat,
    linear-gradient(var(--fence-rail),var(--fence-rail)) 4px 0 / 4px 100% no-repeat,
    linear-gradient(var(--fence-rail),var(--fence-rail)) 13px 0 / 4px 100% no-repeat,
    linear-gradient(var(--fence-rail),var(--fence-rail)) calc(100% - 17px) 0 / 4px 100% no-repeat,
    linear-gradient(var(--fence-rail),var(--fence-rail)) calc(100% - 8px) 0 / 4px 100% no-repeat,
    repeating-linear-gradient(90deg,var(--fence-post) 0 8px,transparent 8px 28px) top / 100% 18px no-repeat,
    repeating-linear-gradient(90deg,var(--fence-post) 0 8px,transparent 8px 28px) bottom / 100% 18px no-repeat,
    repeating-linear-gradient(180deg,var(--fence-post) 0 8px,transparent 8px 28px) left / 18px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--fence-post) 0 8px,transparent 8px 28px) right / 18px 100% no-repeat;
}
.result-panel[data-roulette] .is-reserved{visibility:hidden;pointer-events:none}
.result-panel[data-roulette] .result-subheading{min-height:2.6em}
.result-panel[data-roulette] .tc-result-phase{min-width:4.5em;justify-content:center}
/* 결과가 생겨도 복사 안내와 제목 간격이 헤더 높이를 바꾸지 않습니다. */
.result-panel[data-roulette] #copy-feedback{position:absolute;right:18px;bottom:8px;z-index:3;flex-basis:auto;margin:0;padding:2px 8px;border-radius:8px;background:var(--panel);pointer-events:none}
.result-panel[data-roulette] .result-header-actions,
.result-panel[data-roulette].has-result .result-header-actions{display:flex;flex-wrap:wrap;grid-template-columns:none}
.result-panel[data-roulette] #result-share-tools{order:8}
.result-panel[data-roulette] .game-run-panel{position:relative}
.result-panel[data-roulette] .game-run-panel .primary-action{width:210px;min-width:210px;flex:none;white-space:nowrap}
.result-panel[data-roulette] .game-run-panel .validation{min-height:44px;box-sizing:border-box}
.result-panel[data-roulette][data-phase="running"] .game-run-panel .validation{visibility:hidden}
.result-panel[data-roulette] .game-run-panel .tc-skip-animation{position:absolute;left:22px;right:22px;bottom:18px;z-index:1;margin:0}
.roulette-board > .winner-reveal{flex:none;width:min(100%,520px);min-height:108px;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-anchor:none}
.result-ready .roulette-board > .winner-reveal:not(.pending),
.result-ready .roulette-board > .winner-reveal.pending{padding:16px 22px}
.roulette-board > .winner-reveal .winner-reveal-name,
.roulette-board > .winner-reveal.pending .winner-reveal-name,
.result-ready .roulette-board > .winner-reveal:not(.pending) .winner-reveal-name{font-size:clamp(26px,3vw,39px);line-height:1.2;min-height:1.2em}
@media(max-width:760px){
  .result-panel[data-roulette].has-result .result-title-wrap{gap:4px}
}
@media(max-width:600px){
  .result-panel[data-roulette] .game-run-panel .primary-action{width:100%;min-width:0}
  .result-panel[data-roulette] .game-run-panel .tc-skip-animation{left:16px;right:16px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  .wheel-label{transition:none}
}
.live-board [data-ring-drop].is-drop-target:not(.ring-stage),
.ladder-result.is-drop-target,
.balloon-stage.is-drop-target,
.gift-stage.is-drop-target,
.flip-stage.is-drop-target,
.race-stage.is-drop-target,
.team-preview.is-drop-target,
.result-group.is-drop-target,
.result-ready.is-drop-target,
.manitto-board.is-drop-target{outline:3px solid var(--teal);outline-offset:3px}
.wheel-label{overflow-wrap:normal}
.manitto-board{margin-bottom:14px}
.manitto-cycle-stage{container-type:size;position:relative;width:min(100%,520px);aspect-ratio:1;margin:4px auto 8px}
.manitto-cycle-arrows{position:absolute;inset:0;width:100%;height:100%;color:var(--teal);overflow:visible;z-index:0}
.manitto-cycle-center{position:absolute;left:50%;top:50%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(42%,9.5em);margin:0;transform:translate(-50%,-50%);text-align:center;font-weight:800;font-size:clamp(14px,4.4cqmin,22px);line-height:1.45;color:var(--ink-strong);pointer-events:none}
.manitto-node{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:calc(var(--node) * 1%);max-width:112px;aspect-ratio:1;padding:4px;transform:translate(-50%,-50%);border:2.5px solid var(--teal);border-radius:50%;background:color-mix(in srgb,var(--teal) 18%,var(--panel));color:var(--ink-strong);font-weight:800;font-size:clamp(11px,3.2cqmin,18px);line-height:1.15;text-align:center;overflow:hidden}
.manitto-node .animal-emoji{font-size:.9em;line-height:1}
.manitto-node bdi{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;max-width:100%}
.manitto-node.is-mark{padding:0;font-size:clamp(9px,2.2cqmin,13px)}
.manitto-node.is-dot{padding:0;border-width:1.5px;font-size:0}
.manitto-cycle-note,.manitto-cycle-count{margin:0;text-align:center;font-size:13px;line-height:1.55;color:var(--muted)}
.manitto-cycle-count{margin-bottom:4px;font-weight:750;color:var(--ink-strong)}
.manitto-cycle-path{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin:0 0 8px;font-size:14px;font-weight:750;color:var(--ink-strong)}
.manitto-cycle-list{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;margin:8px 0 0;padding:0;overflow:auto;list-style:none}
.manitto-cycle-list li{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:13px;font-weight:700}
.manitto-cycle-fold{border:1px solid var(--line);border-radius:14px;background:var(--panel-muted)}
.manitto-cycle-fold summary{display:flex;align-items:center;min-height:44px;padding:10px 14px;cursor:pointer;color:var(--ink-strong);font-weight:800}
.manitto-cycle-fold summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.manitto-cycle-fold[open] summary{border-bottom:1px solid var(--line)}
.manitto-cycle-fold[open]{padding-bottom:12px}
.manitto-cycle-fold-note{margin:8px 0 0;text-align:center;font-size:13px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){
  .result-panel.has-result .result-header-actions,
  .result-panel.is-high-volume .result-header-actions,
  .is-high-volume .result-header-actions{display:flex;flex-wrap:wrap;grid-template-columns:none}
  .result-header-utility{margin-left:auto}
}
.nav-emoji{font-size:16px;line-height:1}
button.nav-dropdown-link{appearance:none;border:0;background:transparent;font:inherit;width:100%;text-align:start;cursor:pointer}
button.home-game-card{appearance:none;width:100%;font:inherit;text-align:start;cursor:pointer;color:inherit}
.home-game-card>span.animal-card-emoji{grid-column:1;grid-row:1 / span 2;font-size:28px;line-height:1}
.animal-guide{display:grid;gap:14px}
.animal-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.animal-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;min-height:72px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel-muted)}
.animal-card-emoji{grid-row:span 2;font-size:28px;line-height:1}
.animal-card strong{font-size:15px;color:var(--ink-strong)}
.animal-card>span:last-child{font-size:12px;color:var(--muted);line-height:1.45}
.animal-card[hidden]{display:none!important}
@media(max-width:600px){.animal-guide-grid{grid-template-columns:1fr}}