:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#0d1117; --border:#30363d; --border2:#21262d;
  --fg:#e6edf3; --txt:#c9d1d9; --dim:#8b949e; --faint:#6e7781; --green:#3fb950; --gold:#e3b341; --red:#ff7b72; --blue:#58a6ff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:"SF Mono",ui-monospace,Menlo,"D2Coding",monospace}
body{padding:16px;display:flex;justify-content:center}
.wrap{width:100%;max-width:640px}
.term{border:1px solid var(--border);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.4)}
.bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--border);background:#0b0f14}
.dot{width:11px;height:11px;border-radius:50%}.r{background:#ff5f56}.y{background:#ffbd2e}.g{background:#27c93f}
.bar .t{margin-left:8px;color:var(--faint);font-size:13px}
.body{padding:20px 18px 26px}
.boot{color:var(--dim);font-size:12.5px;line-height:1.9;white-space:pre-wrap;margin:0 0 16px}
.boot b{color:var(--green)}
h1{font-size:22px;margin:4px 0 4px}
.sub{color:var(--dim);font-size:13.5px;margin:0 0 18px;line-height:1.6}

.field{margin:0 0 16px}
.field label{display:block;color:var(--dim);font-size:13px;margin:0 0 8px}
.field label::before{content:"› ";color:var(--green)}
input[type=text]{width:100%;background:#0b0f14;border:1px solid var(--border);color:var(--fg);border-radius:9px;padding:13px;font:inherit;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{background:#0b0f14;border:1px solid var(--border);color:var(--fg);border-radius:18px;padding:8px 13px;font-size:13.5px;cursor:pointer}
.chip:hover{border-color:var(--green)}
.row{display:flex;gap:9px}
.seg{flex:1;text-align:center;background:#0b0f14;border:1px solid var(--border);color:var(--fg);border-radius:9px;padding:12px;font:inherit;font-size:15px;cursor:pointer;user-select:none}
.seg.on{border-color:var(--green);color:var(--green);background:rgba(63,185,80,.1);font-weight:700}
.go{width:100%;margin-top:10px;background:var(--green);color:#04210d;border:0;border-radius:10px;padding:16px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.go:disabled{opacity:.45}

.calc{font-size:13.5px;line-height:2;white-space:pre-wrap;min-height:160px;color:var(--dim)}
.calc .ok{color:var(--green);font-weight:700}

/* 토너먼트 */
.round{text-align:center;margin:2px 0 4px}
.round .rname{font-size:18px;font-weight:800;color:var(--gold)}
.round .rprog{color:var(--dim);font-size:13px;margin-top:2px}
.pbar{height:5px;background:var(--border2);border-radius:3px;overflow:hidden;margin:10px 0 18px}
.pbar > i{display:block;height:100%;background:var(--green);width:0;transition:width .35s}
.match{display:flex;flex-direction:row;gap:8px;align-items:center}
.cand{flex:1;min-width:0;border:1px solid var(--border);border-radius:14px;background:#0b0f14;padding:18px 10px;text-align:center;cursor:pointer;transition:transform .08s,border-color .15s;animation:pop .3s}
.cand:active{transform:scale(.97)}
.cand:hover{border-color:var(--green)}
.cand .em{font-size:48px;line-height:1.1}
.cand .thumb{width:100%;height:150px;object-fit:cover;border-radius:11px;display:block;background:#161b22}
.champ .cthumb{width:200px;height:200px;object-fit:cover;border-radius:16px;display:block;margin:8px auto;background:#161b22}
.cand .nm{font-size:20px;font-weight:800;margin-top:9px;word-break:keep-all;line-height:1.25}
.cand .ds{font-size:12.5px;color:var(--dim);margin-top:6px;word-break:keep-all;line-height:1.4}
.cand.win{border-color:var(--green);background:rgba(63,185,80,.12)}
.cand.lose{opacity:.25;transform:scale(.95)}
.vs{flex:0 0 auto;color:var(--faint);font-weight:800;font-size:14px;letter-spacing:1px}
@media(max-width:430px){.cand{padding:13px 7px}.cand .thumb{height:120px}.cand .em{font-size:40px}.cand .nm{font-size:16px}.cand .ds{display:none}.vs{font-size:12px}}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 우승 */
.champ{text-align:center;animation:pop .5s}
.champ .crown{font-size:30px;color:var(--gold);letter-spacing:4px}
.champ .em{font-size:84px;line-height:1.1;margin:6px 0}
.champ .nm{font-size:34px;font-weight:900;color:var(--green)}
.champ .ds{color:var(--dim);font-size:14px;margin-top:6px}
.champ .vd{margin:16px auto 0;max-width:520px;color:var(--txt);font-size:15px;line-height:1.7;background:rgba(63,185,80,.07);border:1px solid #1f4d2b;border-radius:10px;padding:13px}
.champ .th{color:var(--faint);font-size:13px;margin-top:14px}
.podium{display:flex;justify-content:center;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.podium .p{background:#0b0f14;border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:13px}
.podium .p b{color:var(--fg)}
.share{display:flex;gap:9px;margin-top:22px}
.share button{flex:1;background:#0b0f14;border:1px solid var(--border);color:var(--fg);border-radius:10px;padding:14px;font:inherit;font-size:14px;cursor:pointer}
.share .prime{border-color:var(--green);color:var(--green);font-weight:700}
.foot{color:var(--faint);font-size:12px;text-align:center;margin-top:18px;line-height:1.6}
.hidden{display:none}
a{color:var(--blue)}