:root{color-scheme:light dark;--paper:#f4efe6;--card:#fffaf1;--card2:#eee6d8;--ink:#191713;--muted:#6e685f;--line:#c9beae;--pink:#d91f5d;--pink-dark:#a80d43;--yellow:#f1c84b;--shadow:0 22px 60px rgba(61,40,22,.12)}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{min-height:100%;margin:0;background:radial-gradient(circle at 12% 7%,color-mix(in srgb,var(--pink) 10%,transparent),transparent 28rem),radial-gradient(circle at 88% 85%,color-mix(in srgb,var(--yellow) 18%,transparent),transparent 30rem),var(--paper);color:var(--ink);font:14px/1.6 "IBM Plex Sans KR",system-ui,sans-serif}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:wait;opacity:.6}
[hidden]{display:none!important}
.shell{width:min(1120px,100%);min-height:100vh;margin:auto;padding:24px 18px 56px}
.masthead{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.home{display:inline-block;margin-bottom:8px;color:var(--muted);font-size:12px;text-decoration:none}
.eyebrow{margin:0 0 6px;color:var(--pink);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
h1,h2{margin:0;font-family:Hahmlet,"Apple SD Gothic Neo",serif;line-height:1.24}
h1{font-size:clamp(29px,5vw,44px)}
h1 em{font-style:normal;background:linear-gradient(transparent 64%,var(--yellow) 64%,var(--yellow) 91%,transparent 91%)}
h2{font-size:clamp(24px,4vw,36px)}
.account{display:flex;align-items:center;gap:10px}.account span{max-width:220px;overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.button,.small-button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:var(--card2);color:var(--ink);padding:8px 14px;font-weight:700;text-decoration:none}
.small-button{min-height:35px;padding:5px 10px;font-size:12px}.button.primary{border-color:var(--pink);background:var(--pink);color:#fff}.button.primary:hover{background:var(--pink-dark)}
.panel{margin-top:20px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:var(--shadow);padding:clamp(20px,4vw,38px)}
.status-panel{display:flex;min-height:230px;align-items:center;justify-content:center;gap:22px}.status-panel p{margin:8px 0 0;color:var(--muted)}
.spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.invalid-panel p:not(.eyebrow){color:var(--muted)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.75fr);gap:20px}.intro-grid .panel{height:100%}
.intro-copy>p:not(.eyebrow){max-width:580px;margin:14px 0 0;color:var(--muted);font-size:16px}.intro-copy .button{margin-top:28px}
.draft-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.draft-facts span{border:1px solid var(--line);border-radius:999px;background:var(--card2);padding:5px 10px;font-size:12px;font-weight:600}
.rules-card ol{display:grid;gap:18px;margin:20px 0 0;padding:0;counter-reset:rules;list-style:none}.rules-card li{display:grid;grid-template-columns:32px 1fr;column-gap:10px;counter-increment:rules}.rules-card li::before{display:grid;grid-row:1/3;width:32px;height:32px;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:700;content:counter(rules)}.rules-card strong,.rules-card span{grid-column:2}.rules-card span{color:var(--muted);font-size:12px}.odd-note{margin:20px 0 0;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:12px}
.board-panel{margin-top:40px}.board-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}.board-note{margin:0;color:var(--muted);font-size:12px}
.board-scroll{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}.board{width:100%;min-width:760px;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.board th{padding:6px 4px 8px;border-top:4px solid var(--team,var(--line));font-size:12px;font-weight:700;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.board th.board-round,.board td.board-round{width:34px;border:0;color:var(--muted);font-size:11px;font-weight:700;text-align:center}
.board td{padding:0;vertical-align:top}.board-cell{display:flex;min-height:62px;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;background:var(--card2);padding:4px}
.board-cell img,.board-cell .board-initial{width:34px;height:51px;flex:none;border-radius:6px;object-fit:cover;background:var(--card)}.board-cell .board-initial{display:grid;place-items:center;font:800 17px/1 Hahmlet,serif}
.board-cell span{display:block;min-width:0}.board-cell strong{display:block;font-size:12px;line-height:1.25;overflow-wrap:anywhere}.board-cell small{display:block;color:var(--muted);font-size:10px;line-height:1.25;overflow-wrap:anywhere}.board-cell.passed{justify-content:center;color:var(--muted);font-size:11px}
.evaluation-progress{margin:12px 0 0;color:var(--muted);font-size:12px}
.play-view{padding-top:26px}.progress-head{display:flex;align-items:end;justify-content:space-between;gap:18px}.progress-head strong{font-family:Hahmlet,serif;font-size:22px}.progress-track{height:5px;margin:14px 0 24px;overflow:hidden;border-radius:99px;background:var(--line)}.progress-track span{display:block;width:0;height:100%;background:var(--pink);transition:width .25s ease}
.versus-grid{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center}.candidate{position:relative;display:flex;min-width:0;min-height:520px;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow);padding:0;color:var(--ink);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.candidate:hover,.candidate:focus-visible{z-index:2;transform:translateY(-5px);border-color:var(--pink);box-shadow:0 24px 70px color-mix(in srgb,var(--pink) 22%,transparent);outline:none}.candidate-media{position:relative;display:grid;min-height:430px;flex:1;place-items:center;overflow:hidden;background:linear-gradient(145deg,var(--card2),color-mix(in srgb,var(--pink) 7%,var(--card2)))}.candidate-media img{width:100%;height:100%;object-fit:contain;image-rendering:auto}.candidate-fallback{display:grid;width:148px;aspect-ratio:2/3;place-items:center;border:1px solid var(--line);border-radius:14px;background:var(--card);font:800 62px/1 Hahmlet,serif}.candidate-copy{width:100%;padding:18px;text-align:left}.candidate-copy strong{display:block;font:700 clamp(20px,3vw,29px)/1.3 Hahmlet,serif}.candidate-copy span{display:block;margin-top:4px;color:var(--muted)}
.versus{position:relative;z-index:3;display:grid;width:72px;height:72px;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);color:#17130b;font:800 20px/1 Hahmlet,serif;transform:rotate(-7deg)}
.keyboard-help{margin:18px 0 0;color:var(--muted);text-align:center}.keyboard-help kbd{border:1px solid var(--line);border-bottom-width:3px;border-radius:5px;background:var(--card);padding:2px 7px;font:inherit;font-weight:700}
.complete-view{text-align:center}.complete-mark{display:grid;width:74px;height:74px;margin:10px auto 20px;place-items:center;border-radius:50%;background:var(--pink);color:#fff;font-size:35px;font-weight:700}.complete-view>p:not(.eyebrow){color:var(--muted);font-size:16px}.complete-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:24px}
.notice{min-height:22px;margin:16px 0 0;color:var(--muted);text-align:center}.notice.error{color:#c42242}
@media(max-width:760px){.shell{padding:16px 12px 40px}.board-panel{padding:16px 10px}.board{min-width:780px;border-spacing:3px}.board-cell{min-height:0;flex-direction:column;gap:3px;padding:4px 2px;text-align:center}.board-cell img,.board-cell .board-initial{width:30px;height:45px}.board-cell strong{font-size:11px}.board-cell small{font-size:9px}.masthead{align-items:flex-start}.account{flex-direction:column;align-items:flex-end}.account span{max-width:145px}.intro-grid{grid-template-columns:1fr}.versus-grid{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}.candidate{min-height:390px;border-radius:13px}.candidate-media{min-height:300px}.candidate-copy{padding:13px 10px}.candidate-copy strong{font-size:18px}.candidate-copy span{font-size:12px}.versus{width:46px;height:46px;margin-left:-6px;font-size:14px}.keyboard-help{display:none}}
@media(max-width:430px){.masthead h1{font-size:27px}.account span{display:none}.panel{padding:20px 16px}.versus-grid{margin-inline:-4px}.candidate{min-height:338px}.candidate-media{min-height:250px}.candidate-fallback{width:100px;font-size:44px}.candidate-copy strong{font-size:16px}.candidate-copy span{font-size:11px}.versus{width:40px;height:40px;margin-left:-3px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.spinner{animation-duration:1.8s}.candidate,.progress-track span{transition:none}}
@media(prefers-color-scheme:dark){:root{--paper:#171513;--card:#211e1b;--card2:#2c2824;--ink:#f4eee5;--muted:#b5aca1;--line:#514941;--pink:#ff477d;--pink-dark:#dd2b62;--yellow:#e8bc3e;--shadow:0 22px 60px rgba(0,0,0,.28)}}