@import"https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;500;700;900&display=swap";:root{font-family:Noto Sans KR,system-ui,sans-serif;color:#171713;background:#f5f0df;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #171713;--cream: #f5f0df;--paper: #fffdf5;--yellow: #f4c542;--red: #f05a43;--muted: #746f61}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--cream)}button,input{font:inherit}button{color:inherit}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(#302e25 .55px,transparent .55px);background-size:7px 7px;z-index:-1}.page-shell{width:min(1120px,calc(100% - 40px));margin:0 auto;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink)}.brand{display:inline-flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font-weight:900;letter-spacing:-.04em}.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--ink);color:var(--cream);border-radius:50%;font-family:Black Han Sans,sans-serif;font-size:14px;transform:rotate(-7deg)}.connection{display:flex;align-items:center;gap:8px;padding:8px 13px;border:1.5px solid var(--ink);border-radius:99px;background:#ffffff61;font-size:12px;font-weight:700}.connection-dot{width:8px;height:8px;border-radius:50%;background:#888}.connection--online .connection-dot{background:#3da35d;box-shadow:0 0 0 4px #3da35d26}.connection--connecting .connection-dot{background:var(--yellow);animation:blink 1s infinite}.connection--offline .connection-dot{background:var(--red);animation:blink 1s infinite}.topbar-actions{display:flex;align-items:center;gap:8px}.header-button{height:36px;padding:0 14px;border:1.5px solid var(--ink);border-radius:99px;background:var(--ink);color:#fff;cursor:pointer;font-size:11px;font-weight:900}.header-button:hover{background:var(--red)}.header-button--share,.header-button--public{background:var(--paper);color:var(--ink)}.header-button--danger{background:#b92f22}.header-button--catalog{background:var(--yellow);color:var(--ink)}.hero{padding:64px 20px 44px;text-align:center}.eyebrow{display:inline-flex;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;font-size:11px;font-weight:900;letter-spacing:.08em}.eyebrow span{padding:7px 10px}.eyebrow span:first-child{background:var(--ink);color:#fff}.hero h1{margin:20px 0 10px;font-family:Black Han Sans,sans-serif;font-size:clamp(44px,7vw,82px);font-weight:400;line-height:.98;letter-spacing:-.05em}.hero p{margin:0;color:var(--muted);font-size:15px}.arena{display:grid;grid-template-columns:1fr 74px 1fr;align-items:center}.choice{position:relative;min-height:374px;border:3px solid var(--ink);border-radius:14px;padding:38px 24px 30px;background:var(--paper);cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;align-items:center;justify-content:center}.choice:hover{transform:translateY(-5px);box-shadow:7px 8px 0 var(--ink)}.choice:focus-visible{outline:4px solid #2473ff;outline-offset:4px}.choice--selected{box-shadow:inset 0 0 0 7px var(--ink)}.choice--a{background:var(--yellow);transform:rotate(-.7deg)}.choice--a:hover{transform:rotate(-.7deg) translateY(-5px)}.choice--b{background:var(--red);transform:rotate(.7deg)}.choice--b:hover{transform:rotate(.7deg) translateY(-5px)}.choice-letter{position:absolute;top:18px;left:20px;display:grid;place-items:center;width:33px;height:33px;border:2px solid var(--ink);border-radius:50%;font-family:Black Han Sans,sans-serif}.choice-emoji{font-size:72px;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.18));transform:rotate(-4deg)}.choice strong{margin-top:15px;font-family:Black Han Sans,sans-serif;font-size:clamp(42px,6vw,68px);font-weight:400;letter-spacing:-.04em;line-height:1}.choice--custom strong{max-width:100%;font-family:Noto Sans KR,sans-serif;font-size:clamp(28px,4.2vw,50px);font-weight:900;line-height:1.18;overflow-wrap:anywhere}.choice-copy{margin-top:12px;font-size:13px;line-height:1.55;font-weight:700;opacity:.72}.vote-label{margin-top:22px;padding:9px 20px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);font-size:12px;font-weight:900;box-shadow:3px 3px 0 var(--ink)}.versus{position:relative;z-index:2;display:grid;place-items:center;width:82px;height:82px;margin-left:-4px;border:3px solid var(--ink);border-radius:50%;background:var(--paper);font-family:Black Han Sans,sans-serif;font-size:27px;transform:rotate(-7deg);box-shadow:4px 5px 0 var(--ink)}.results,.chat{margin-top:62px;padding-top:30px;border-top:3px solid var(--ink)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.section-heading h2{margin:3px 0 0;font-size:clamp(23px,3vw,32px);letter-spacing:-.045em}.section-heading>strong{font-size:14px}.mini-label{font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--red)}.result-numbers{display:grid;grid-template-columns:1fr 1fr;margin:35px 0 13px}.result-numbers span{display:flex;align-items:baseline;gap:10px}.result-numbers span:last-child{justify-content:flex-end}.result-numbers b{font-size:15px}.result-numbers strong{font-family:Black Han Sans,sans-serif;font-size:37px;font-weight:400}.result-numbers small{color:var(--muted)}.result-bar{height:44px;display:flex;border:3px solid var(--ink);border-radius:7px;overflow:hidden;background:var(--paper)}.result-bar>div{min-width:0;transition:width .55s cubic-bezier(.2,.8,.2,1)}.result-bar-a{background:repeating-linear-gradient(-45deg,var(--yellow),var(--yellow) 9px,#e6b82f 9px,#e6b82f 12px);border-right:1.5px solid var(--ink)}.result-bar-b{background:repeating-linear-gradient(45deg,var(--red),var(--red) 9px,#dd4935 9px,#dd4935 12px);border-left:1.5px solid var(--ink)}.empty-vote{margin:12px 0 0;text-align:center;color:var(--muted);font-size:13px}.chat{margin-bottom:70px}.chat-count{color:var(--muted);font-size:12px}.chat-log{margin-top:24px;height:310px;overflow-y:auto;background:#fffdf5c7;border:2px solid var(--ink);border-bottom:0;padding:8px 22px}.chat-empty{height:100%;display:grid;place-content:center;justify-items:center;color:var(--muted);text-align:center;font-size:13px;line-height:1.6}.chat-empty span{font-size:30px;filter:grayscale(1)}.chat-row{min-height:64px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed #bcb5a3}.chat-row:last-of-type{border-bottom:0}.chat-row--mine .avatar{background:var(--yellow)}.avatar{display:grid;place-items:center;width:34px;height:34px;background:#ded7c5;border:1.5px solid var(--ink);border-radius:50%;font-size:9px;font-weight:900}.chat-row b{font-size:11px}.chat-row p{margin:3px 0 0;font-size:13px;word-break:break-word}.chat-row time{color:var(--muted);font-size:10px}.chat-form{position:relative;display:flex;border:2px solid var(--ink);background:var(--paper)}.chat-form input{flex:1;min-width:0;height:58px;padding:0 78px 0 18px;border:0;outline:0;background:transparent;font-size:13px}.character-count{position:absolute;right:100px;top:50%;transform:translateY(-50%);color:#9b9588;font-size:10px}.chat-form button{width:86px;border:0;border-left:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;font-weight:900}.chat-form button:hover:not(:disabled){background:var(--red)}.chat-form button:disabled{cursor:not-allowed;opacity:.45}.toast{position:fixed;left:50%;bottom:24px;z-index:20;transform:translate(-50%);padding:12px 20px;border:2px solid var(--ink);border-radius:4px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;box-shadow:4px 4px 0 var(--red);animation:toast 2.8s both}.modal-backdrop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#171713ad;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.create-modal{position:relative;width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:36px;border:3px solid var(--ink);border-radius:14px;background:var(--cream);box-shadow:9px 10px 0 var(--yellow)}.create-modal h2{margin:5px 0 7px;font-family:Black Han Sans,sans-serif;font-size:38px;font-weight:400;letter-spacing:-.04em}.create-modal>p{margin:0 0 25px;color:var(--muted);font-size:13px}.modal-close{position:absolute;top:15px;right:15px;display:grid;place-items:center;width:35px;height:35px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--paper);cursor:pointer;font-size:24px;line-height:1}.create-modal form,.create-modal label{display:grid;gap:8px}.create-modal form{gap:18px}.create-modal label>span{font-size:12px;font-weight:900}.create-modal input{width:100%;height:52px;padding:0 14px;border:2px solid var(--ink);border-radius:5px;background:var(--paper);outline:0}.create-modal input:focus{box-shadow:3px 3px 0 var(--yellow)}.option-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-error{margin:-7px 0 0;color:#bf2d1e;font-size:12px;font-weight:700}.create-submit{height:55px;border:2px solid var(--ink);border-radius:5px;background:var(--red);color:#fff;cursor:pointer;font-weight:900;box-shadow:4px 4px 0 var(--ink)}.create-submit:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.create-submit:disabled{cursor:wait;opacity:.6}.delete-modal{box-shadow:9px 10px 0 var(--red)}.delete-modal .mini-label{color:#b92f22}.delete-modal .danger-copy{padding:14px;border:1.5px solid #b92f22;border-radius:5px;background:#f05a431a;color:#6e2119;line-height:1.6}.delete-submit{background:#b92f22}.catalog-modal{width:min(760px,100%);box-shadow:9px 10px 0 var(--yellow)}.catalog-intro{margin:-10px 0 2px;color:var(--muted);font-size:13px}.catalog-summary{display:flex;align-items:center;justify-content:space-between;margin:18px 0 12px;padding-bottom:10px;border-bottom:2px solid var(--ink);font-size:13px}.catalog-summary button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;text-decoration:underline}.catalog-list{display:grid;gap:9px}.catalog-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:15px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper)}.catalog-item time{color:var(--muted);font-size:9px}.catalog-item h3{display:flex;align-items:center;gap:7px;margin:3px 0 8px;font-size:16px;letter-spacing:-.025em}.catalog-item p{display:flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:11px}.catalog-item p b{color:var(--red);font-size:9px}.catalog-actions{display:flex;flex-wrap:wrap;gap:6px}.catalog-actions button{min-width:52px;height:34px;padding:0 10px;border:1.5px solid var(--ink);border-radius:4px;background:var(--yellow);cursor:pointer;font-size:11px;font-weight:900}.catalog-actions .catalog-show{background:#3da35d;color:#fff}.catalog-actions .catalog-hide{background:#ded7c5}.catalog-actions .catalog-delete{background:#b92f22;color:#fff}.visibility-badge{flex:none;padding:3px 6px;border:1px solid var(--ink);border-radius:99px;background:#ded7c5;color:var(--ink);font-size:9px;line-height:1}.visibility-badge--public{background:#3da35d;color:#fff}.public-modal{box-shadow:9px 10px #3da35d}.catalog-empty{margin:30px 0;text-align:center;color:var(--muted);font-size:13px}footer{min-height:90px;border-top:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}footer b{color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes blink{50%{opacity:.3}}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}12%,82%{opacity:1;transform:translate(-50%)}to{opacity:0}}@media(max-width:720px){.page-shell{width:min(100% - 24px,560px)}.topbar{height:72px}.connection{padding:7px 10px;font-size:10px}.connection{display:none}.header-button{height:34px;padding:0 11px}.header-button--share{display:none}.topbar-actions{gap:4px}.header-button--danger,.brand-title{display:none}.brand{font-size:14px}.brand-mark{width:33px;height:33px}.hero{padding:42px 8px 32px}.hero p{font-size:13px}.arena{grid-template-columns:1fr;gap:12px}.choice{min-height:260px;padding:25px 18px 22px}.choice-emoji{font-size:50px}.choice strong{font-size:48px}.choice-copy{display:none}.vote-label{margin-top:16px}.versus{position:absolute;left:50%;margin-top:0;width:62px;height:62px;transform:translate(-50%,-2px) rotate(-7deg);font-size:22px}.results,.chat{margin-top:46px}.result-numbers span{gap:5px}.result-numbers b{display:none}.result-numbers strong{font-size:31px}.result-bar{height:36px}.section-heading{align-items:center}.section-heading>strong{font-size:12px}.chat-log{padding:7px 13px}.create-modal{padding:31px 20px 24px}.create-modal h2{font-size:32px}.option-fields,.catalog-item{grid-template-columns:1fr}.catalog-actions button{flex:1}footer{flex-direction:column;justify-content:center;gap:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}