*{box-sizing:border-box;margin:0;padding:0}body{background:#f4f7f4;font-family:'Noto Sans KR',sans-serif;color:#1a2e1a}
    ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f0f4f0}::-webkit-scrollbar-thumb{background:#a5d6a7;border-radius:3px}
    input,textarea,select{outline:none;font-family:inherit}button{cursor:pointer;font-family:inherit;border:none}
    .card{background:#ffffff;border:1px solid #ddeedd;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
    .card-b{background:#eef6ff;border:1px solid #bee3f8;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
    .btn-p{background:#388e3c;color:#fff;border-radius:10px;padding:10px 18px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .2s}
    .btn-p:hover{background:#2e7d32}
    .btn-b{background:#1565c0;color:#fff;border-radius:10px;padding:10px 18px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .2s}
    .btn-b:hover{background:#0d47a1}
    .btn-d{background:transparent;color:#e53935;border:1px solid #e53935;border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}
    .btn-d:hover{background:#e53935;color:#fff}
    .btn-e{background:transparent;color:#1565c0;border:1px solid #90caf9;border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}
    .btn-e:hover{background:#e3f2fd;color:#0d47a1}
    .btn-sec{background:#fff;color:#388e3c;border:1px solid #a5d6a7;border-radius:10px;padding:7px 14px;font-weight:700;font-size:12px;cursor:pointer;transition:all .2s}
    .btn-sec:hover{background:#e8f5e9;color:#2e7d32}
    .btn-ghost{background:transparent;color:#78909c;border:1px solid #cfd8dc;border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer}
    .tab{padding:8px 14px;border-radius:10px;font-weight:700;font-size:13px;background:transparent;color:#388e3c;white-space:nowrap;border:none;cursor:pointer;transition:all .2s}
    .tab.active{background:#388e3c;color:#fff}
    .tab.active-b{background:#1565c0;color:#fff}
    .tab.active-r{background:#7b1fa2;color:#fff}
    .tab.active-g{background:#e65100;color:#fff}
    .tab.active-o{background:#1565c0;color:#fff}
    .tab:hover:not(.active):not(.active-b):not(.active-r){background:#e8f5e9}
    .chip{display:inline-flex;align-items:center;gap:4px;background:#f1f8f1;border:1px solid #a5d6a7;border-radius:20px;padding:5px 11px;font-size:13px;cursor:pointer;user-select:none;color:#2e7d32}
    .chip.on{background:#388e3c;border-color:#388e3c;color:#fff}
    .inp{width:100%;background:#fff;border:1px solid #c8e6c9;border-radius:10px;padding:10px 14px;color:#1a2e1a;font-size:14px;transition:border .2s}
    .inp:focus{border-color:#388e3c;outline:none;box-shadow:0 0 0 3px rgba(56,142,60,0.1)}
    .inp-b{width:100%;background:#f8fbff;border:1px solid #90caf9;border-radius:10px;padding:10px 14px;color:#0d1a2e;font-size:14px;transition:border .2s}
    .inp-b:focus{border-color:#1565c0;outline:none;box-shadow:0 0 0 3px rgba(21,101,192,0.1)}
    .inp-auth{width:100%;background:#f9fdf9;border:1px solid #c8e6c9;border-radius:10px;padding:12px 16px;color:#1a2e1a;font-size:15px;margin-bottom:12px;transition:border .2s}
    .inp-auth:focus{border-color:#388e3c;outline:none}
    .sel{background:#fff;border:1px solid #c8e6c9;border-radius:10px;padding:10px 12px;color:#1a2e1a;font-size:13px}
    .sel-b{background:#f8fbff;border:1px solid #90caf9;border-radius:10px;padding:8px 12px;color:#0d1a2e;font-size:13px}
    .pbar{height:5px;background:#e8f5e8;border-radius:3px;overflow:hidden;margin-top:5px}
    .pfill{height:100%;background:linear-gradient(90deg,#388e3c,#66bb6a);border-radius:3px}
    .pfill-b{height:100%;background:linear-gradient(90deg,#1565c0,#42a5f5);border-radius:3px}
    .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:11px 22px;border-radius:30px;font-weight:700;font-size:13px;z-index:9999;white-space:nowrap;animation:su .3s ease;box-shadow:0 4px 16px rgba(0,0,0,0.2)}
    .toast.s{background:#388e3c;color:#fff}.toast.e{background:#c62828;color:#fff}
    .toast.i{background:#1565c0;color:#fff}.toast.b{background:#0d47a1;color:#fff}
    @keyframes su{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
    .mbg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:20px 16px;overflow-y:auto;backdrop-filter:blur(4px)}
    .mdl{background:#fff;border:1px solid #ddeedd;border-radius:20px;padding:24px;max-width:380px;width:100%;text-align:center;margin:auto;box-shadow:0 8px 32px rgba(0,0,0,0.14)}
    .mdl-wide{background:#fff;border:1px solid #ddeedd;border-radius:20px;padding:24px;max-width:640px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,0.14)}
    .mdl-b{background:#f8fbff;border:1px solid #90caf9;border-radius:20px;padding:24px;max-width:540px;width:100%;margin:auto;box-shadow:0 8px 32px rgba(0,0,0,0.14)}
    .mdl-res{background:#f8fbff;border:1px solid #90caf9;border-radius:20px;padding:24px;max-width:420px;width:100%;margin:auto;box-shadow:0 8px 32px rgba(0,0,0,0.14)}
    .bnum{font-family:"Black Han Sans",sans-serif;font-size:34px;color:#2e7d32;line-height:1}
    .bd{display:inline-block;border-radius:8px;padding:1px 7px;font-size:10px;font-weight:700}
    .bg{background:#e3f2fd;color:#1565c0}.bf{background:#fce4ec;color:#c2185b}
    .bk{background:#e3f2fd;color:#1565c0}.bn{background:#fff8e1;color:#f57f17}
    .b-gn{background:#e8f5e9;color:#2e7d32}.b-jn{background:#f3e5f5;color:#7b1fa2}
    .sl{border-left:4px solid #388e3c}
    .skill-btn{background:transparent;border:none;cursor:pointer;font-size:15px;padding:1px;transition:transform .1s}
    .skill-btn:hover{transform:scale(1.2)}
    .badge-남복{background:#e3f2fd;color:#1565c0;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700}
    .badge-여복{background:#fce4ec;color:#c2185b;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700}
    .badge-혼복{background:#e8f5e9;color:#2e7d32;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700}
    .badge-혼합{background:#fff8e1;color:#e65100;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700}
    .badge-잡복{background:#f5f5f5;color:#616161;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700}
    .badge-guest{background:#f3e5f5;color:#7b1fa2;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700}
    .match-card{background:#fafafa;border:1px solid #e8f0e8;border-radius:12px;padding:12px;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
    .match-card.completed{border-color:#a5d6a7;background:#f1f8f1}
    .match-card .team-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:#f8faf8}
    .match-card .team-row.winner-team{background:#e8f5e9;border:1px solid #66bb6a}
    .match-card .team-row.loser-team{opacity:.4}
    .player-tag{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:3px 8px;font-size:12px;font-weight:700;color:#1a2e1a}
    .player-tag.swap-sel{background:#e3f2fd;border:1px solid #1565c0}
    .stat-table{width:100%;border-collapse:collapse;font-size:12px}
    .stat-table th{color:#388e3c;font-weight:700;padding:8px 8px;text-align:left;border-bottom:2px solid #c8e6c9;font-size:11px;background:#f9fdf9}
    .stat-table td{padding:8px 8px;border-bottom:1px solid #f1f8f1;color:#1a2e1a}
    .stat-table tr:hover td{background:#f1f8f1}
    .auth-wrap{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:20px;padding-top:40px;background:#f4f7f4;overflow-y:auto;}
    .auth-card{background:#fff;border:1px solid #ddeedd;border-radius:20px;padding:40px;max-width:400px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,0.1)}
    .auth-tab{flex:1;padding:10px;border:none;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s}
    .auth-tab.active{background:#388e3c;color:#fff}
    .auth-tab:not(.active){background:#f1f8f1;color:#388e3c}
    .err-msg{background:#ffebee;border:1px solid #ffcdd2;border-radius:8px;padding:10px 14px;color:#c62828;font-size:13px;margin-bottom:12px}
    .ok-msg{background:#e8f5e9;border:1px solid #c8e6c9;border-radius:8px;padding:10px 14px;color:#2e7d32;font-size:13px;margin-bottom:12px}
    .loading{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#f4f7f4}
    .spinner{width:40px;height:40px;border:3px solid #c8e6c9;border-top:3px solid #388e3c;border-radius:50%;animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}