:root{--red:#e63946;--blue:#1d3557;--gold:#f4a83a;--white:#f8f5f0;--dark:#0d0d0d;--mid:#1a1a1a;--border:#2a2a2a;--red-dim:rgba(230,57,70,.15);--blue-dim:rgba(29,53,87,.5)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--dark);color:var(--white);font-family:Noto Sans KR,sans-serif;min-height:100vh;overflow-x:hidden}header{position:-webkit-sticky;position:sticky;top:0;z-index:100;background:hsla(0,0%,5%,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);justify-content:space-between;padding:0 24px;height:60px}.logo,header{display:flex;align-items:center}.logo{font-family:Black Han Sans,sans-serif;font-size:22px;letter-spacing:-.5px;gap:8px}.logo span.fire{color:var(--gold)}.logo span.vs{color:var(--red);font-size:18px}nav{display:flex;gap:20px;font-size:13px;font-weight:500}nav a{color:#888;text-decoration:none;transition:color .2s}nav a.active,nav a:hover{color:var(--white)}.header-btn{background:var(--red);color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s,transform .1s}.header-btn:hover{background:#c62f3b;transform:scale(1.03)}.hero{text-align:center;padding:64px 24px 48px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(230,57,70,.12) 0,transparent 70%),radial-gradient(ellipse 60% 50% at 80% 50%,rgba(29,53,87,.4) 0,transparent 70%);pointer-events:none}.hero-tag{display:inline-block;background:var(--gold);color:var(--dark);font-size:11px;font-weight:700;padding:4px 12px;border-radius:100px;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(244,168,58,.4)}50%{box-shadow:0 0 0 8px rgba(244,168,58,0)}}.hero h1{font-family:Black Han Sans,sans-serif;font-size:clamp(36px,7vw,80px);line-height:1.05;letter-spacing:-2px;margin-bottom:16px}.hero h1 em{font-style:normal;color:var(--red);position:relative;display:inline-block}.hero h1 em:after{content:"";position:absolute;left:0;bottom:-4px;right:0;height:4px;background:var(--red);transform:skewX(-15deg)}.hero p{color:#aaa;font-size:15px;line-height:1.7;max-width:460px;margin:0 auto 32px}.battle-creator{max-width:780px;margin:0 auto 64px;padding:0 16px}.arena{background:var(--mid);border:1px solid var(--border);border-radius:16px;overflow:hidden;position:relative}.arena-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;min-height:200px}.side{padding:28px 28px 24px;display:flex;flex-direction:column;gap:12px;transition:background .3s}.side.left{background:rgba(230,57,70,.04)}.side.right{background:rgba(29,53,87,.2)}.side-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase}.side.left .side-label{color:var(--red)}.side.right .side-label{color:#6fa3d4}.input-wrap{position:relative}.battle-input{width:100%;background:hsla(0,0%,100%,.05);border:1px solid #333;border-radius:10px;color:var(--white);font-family:Black Han Sans,sans-serif;font-size:22px;letter-spacing:-.5px;padding:14px 16px;outline:none;transition:border-color .2s,background .2s}.battle-input::placeholder{color:#444;font-size:18px}.side.left .battle-input:focus{border-color:var(--red);background:rgba(230,57,70,.06)}.side.right .battle-input:focus{border-color:#4a8fc5;background:rgba(29,53,87,.3)}.tag-select{display:flex;flex-wrap:wrap;gap:6px}.tag{background:#222;border:1px solid #333;color:#aaa;font-size:12px;padding:4px 10px;border-radius:100px;cursor:pointer;transition:all .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag:hover{border-color:#555;color:#eee}.side.left .tag.active{background:var(--red-dim);border-color:var(--red);color:var(--red)}.side.right .tag.active{background:rgba(29,53,87,.6);border-color:#4a8fc5;color:#9ec5e8}.vs-divider{padding:0 8px;position:relative}.vs-badge,.vs-divider{display:flex;align-items:center;justify-content:center}.vs-badge{width:56px;height:56px;background:linear-gradient(135deg,var(--red),#c62f3b);border-radius:50%;font-family:Black Han Sans,sans-serif;font-size:20px;color:#fff;box-shadow:0 0 0 4px var(--dark),0 0 24px rgba(230,57,70,.4);z-index:2;animation:vsGlow 3s ease-in-out infinite}@keyframes vsGlow{0%,to{box-shadow:0 0 0 4px var(--dark),0 0 20px rgba(230,57,70,.3)}50%{box-shadow:0 0 0 4px var(--dark),0 0 36px rgba(230,57,70,.6)}}.vs-divider:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,transparent,#333,transparent)}.battle-footer{border-top:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px}.category-tabs{display:flex;gap:6px}.cat-tab{background:#222;border:1px solid #333;color:#888;font-family:inherit;font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer;transition:all .15s}.cat-tab:hover{color:#eee;border-color:#555}.cat-tab.active{background:rgba(230,57,70,.15);border-color:var(--red);color:var(--red)}.battle-go{background:var(--red);color:#fff;border:none;font-family:Black Han Sans,sans-serif;font-size:16px;letter-spacing:1px;padding:12px 32px;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.battle-go:hover{background:#c62f3b;transform:scale(1.04);box-shadow:0 4px 20px rgba(230,57,70,.4)}.battle-go .arrow{font-size:18px;transition:transform .2s}.battle-go:hover .arrow{transform:translateX(3px)}.section-header{justify-content:space-between;margin-bottom:20px}.section-header,.section-title{display:flex;align-items:center}.section-title{font-family:Black Han Sans,sans-serif;font-size:22px;gap:10px}.section-title .dot{width:8px;height:8px;background:var(--red);border-radius:50%;animation:blink 1.2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.see-all{color:#666;font-size:13px;text-decoration:none;transition:color .2s}.see-all:hover{color:#aaa}.battles-section{max-width:1100px;margin:0 auto 56px;padding:0 16px}.battles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:14px;gap:14px}.battle-card{background:var(--mid);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s}.battle-card:hover{border-color:#444;transform:translateY(-2px)}.card-top{padding:16px}.card-meta{display:flex;align-items:center;gap:8px;margin-bottom:12px}.card-category{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px}.cat-단지{background:rgba(230,57,70,.15);color:var(--red)}.cat-입지{background:rgba(244,168,58,.15);color:var(--gold)}.cat-학군{background:rgba(100,200,100,.12);color:#6ec66e}.cat-생활{background:rgba(100,150,255,.12);color:#7ba8f5}.cat-브랜드{background:rgba(200,100,255,.12);color:#c87af5}.hot-badge{margin-left:auto;font-size:10px;color:var(--gold);display:flex;align-items:center;gap:3px}.card-matchup{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;grid-gap:6px;gap:6px;margin-bottom:14px}.matchup-side{text-align:center;padding:10px 6px;border-radius:8px}.matchup-side.a{background:rgba(230,57,70,.08)}.matchup-side.b{background:rgba(29,53,87,.3)}.matchup-name{font-family:Black Han Sans,sans-serif;font-size:15px;line-height:1.2;margin-bottom:4px}.matchup-sub{font-size:10px;color:#666}.card-vs{text-align:center;font-family:Black Han Sans,sans-serif;font-size:14px;color:var(--red)}.vote-bar-wrap{margin-bottom:12px}.vote-bar-labels{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:4px}.vote-bar-labels .a{color:var(--red)}.vote-bar-labels .b{color:#6fa3d4}.vote-bar{height:6px;border-radius:100px;background:#222;overflow:hidden}.vote-bar-fill{height:100%;background:linear-gradient(90deg,var(--red),#ff6b7a);border-radius:100px;transition:width .6s cubic-bezier(.4,0,.2,1)}.card-stats{display:flex;gap:16px;font-size:12px;color:#555}.card-stats span{display:flex;align-items:center;gap:4px}.card-stats .icon{font-size:13px}.card-comment-preview{border-top:1px solid var(--border);padding:10px 16px;font-size:12px;color:#777;display:flex;gap:6px;align-items:flex-start}.comment-side-tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;flex-shrink:0;margin-top:1px}.comment-side-tag.a{background:var(--red-dim);color:var(--red)}.comment-side-tag.b{background:rgba(29,53,87,.5);color:#6fa3d4}.topics-section{max-width:1100px;margin:0 auto 56px;padding:0 16px}.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:10px;gap:10px}.topic-card{background:var(--mid);border:1px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:12px}.topic-card:hover{border-color:#555;transform:translateY(-1px)}.topic-rank{font-family:Black Han Sans,sans-serif;font-size:22px;color:#2a2a2a;min-width:32px}.topic-rank.top{color:var(--gold)}.topic-name{font-size:13px;font-weight:700;margin-bottom:3px}.topic-count{font-size:11px;color:#666}.leaderboard-section{max-width:1100px;margin:0 auto 56px;padding:0 16px}.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:14px;gap:14px}.lb-card{background:var(--mid);border:1px solid var(--border);border-radius:12px;overflow:hidden}.lb-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:#888;letter-spacing:1px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}.lb-header span.arrow-up{color:var(--red);font-size:14px}.lb-row{display:flex;align-items:center;padding:10px 16px;gap:12px;border-bottom:1px solid var(--border);transition:background .15s;cursor:pointer}.lb-row:last-child{border-bottom:none}.lb-row:hover{background:#222}.lb-num{font-size:12px;color:#555;min-width:18px}.lb-num.gold{color:var(--gold);font-weight:700}.lb-num.silver{color:#b0b0b0;font-weight:700}.lb-num.bronze{color:#cd7f32;font-weight:700}.lb-name{flex:1 1;font-size:14px;font-weight:500}.lb-sub{font-size:11px;color:#555}.lb-score{font-family:Black Han Sans,sans-serif;font-size:16px;color:var(--gold)}.lb-win-rate{font-size:12px;color:#888}footer{border-top:1px solid var(--border);padding:32px 24px;text-align:center;font-size:12px;color:#444}footer strong{color:#666}.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .25s}.modal-overlay.open{opacity:1;pointer-events:all}.modal{background:var(--mid);border:1px solid var(--border);border-radius:16px;width:100%;max-width:680px;max-height:90vh;overflow-y:auto;transform:scale(.96);transition:transform .25s}.modal-overlay.open .modal{transform:scale(1)}.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-title{font-family:Black Han Sans,sans-serif;font-size:18px}.modal-close{background:none;border:none;color:#666;font-size:22px;cursor:pointer;transition:color .2s;line-height:1}.modal-close:hover{color:var(--white)}.modal-arena{padding:24px}.modal-matchup{display:grid;grid-template-columns:1fr 60px 1fr;grid-gap:12px;gap:12px;align-items:center;margin-bottom:24px}.modal-side{border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;border:2px solid transparent}.modal-side.a{background:rgba(230,57,70,.08)}.modal-side.a.voted,.modal-side.a:hover{background:rgba(230,57,70,.18);border-color:var(--red)}.modal-side.b{background:rgba(29,53,87,.2)}.modal-side.b.voted,.modal-side.b:hover{background:rgba(29,53,87,.4);border-color:#4a8fc5}.modal-side-name{font-family:Black Han Sans,sans-serif;font-size:24px;margin-bottom:4px}.modal-side-sub{font-size:12px;color:#666;margin-bottom:12px}.vote-pct{font-family:Black Han Sans,sans-serif;font-size:32px}.modal-side.a .vote-pct{color:var(--red)}.modal-side.b .vote-pct{color:#6fa3d4}.vote-count{font-size:11px;color:#666;margin-top:2px}.modal-vs-badge{text-align:center;font-family:Black Han Sans,sans-serif;font-size:22px;color:var(--red)}.comments-section{padding:0 24px 24px}.comments-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.comments-title{font-size:14px;font-weight:700;color:#aaa}.comment-filter{display:flex;gap:6px}.cf-btn{background:none;border:1px solid #333;color:#777;font-family:inherit;font-size:11px;padding:4px 10px;border-radius:100px;cursor:pointer;transition:all .15s}.cf-btn.active{border-color:var(--red);color:var(--red)}.comment-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.comment-item{background:#1e1e1e;border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;gap:10px}.comment-team{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;flex-shrink:0;height:-moz-fit-content;height:fit-content;margin-top:1px}.comment-team.a{background:var(--red-dim);color:var(--red)}.comment-team.b{background:rgba(29,53,87,.5);color:#6fa3d4}.comment-body{flex:1 1}.comment-nick{font-size:12px;font-weight:700;margin-bottom:4px}.comment-text{font-size:13px;line-height:1.6;color:#ccc}.comment-foot{display:flex;align-items:center;gap:12px;margin-top:8px}.comment-time{font-size:11px;color:#555}.comment-likes{font-size:11px;color:#666;display:flex;align-items:center;gap:3px;cursor:pointer;transition:color .15s}.comment-likes:hover{color:var(--red)}.comment-input-wrap{display:grid;grid-template-columns:1fr auto auto;grid-gap:8px;gap:8px;align-items:flex-end}.comment-textarea{background:#1e1e1e;border:1px solid #333;border-radius:8px;color:var(--white);font-family:inherit;font-size:13px;padding:10px 12px;resize:none;outline:none;transition:border-color .2s;line-height:1.5}.comment-textarea:focus{border-color:#555}.team-pick-btn{background:#222;border:1px solid #333;color:#aaa;font-family:inherit;font-size:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all .15s;white-space:nowrap;height:42px}.team-pick-btn.a-active{background:var(--red-dim);border-color:var(--red);color:var(--red)}.team-pick-btn.b-active{background:rgba(29,53,87,.4);border-color:#4a8fc5;color:#6fa3d4}.submit-comment{background:var(--red);color:#fff;border:none;font-family:inherit;font-size:13px;font-weight:700;padding:10px 16px;border-radius:8px;cursor:pointer;transition:all .2s;height:42px}.submit-comment:hover{background:#c62f3b}@media (max-width:640px){.arena-inner{grid-template-columns:1fr}.vs-divider{padding:12px 0}.vs-divider:before{width:60%;height:1px;top:50%;left:20%;right:auto}.modal-matchup{grid-template-columns:1fr}.modal-vs-badge{order:-1}.battles-grid{grid-template-columns:1fr}.topics-grid{grid-template-columns:1fr 1fr}nav{display:none}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.battle-card,.lb-card,.topic-card{animation:fadeUp .4s ease both}.battle-card:nth-child(2){animation-delay:.05s}.battle-card:nth-child(3){animation-delay:.1s}.battle-card:nth-child(4){animation-delay:.15s}.battle-card:nth-child(5){animation-delay:.2s}.battle-card:nth-child(6){animation-delay:.25s}