@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

    body { background-color: #0f172a; }
    
    .radar-wrapper { 
        padding: 40px 10px; 
        font-family: 'Pretendard', sans-serif; 
        color: #fff;
    }

    .radar-container { 
        max-width: 100%; 
        margin: 0 auto; 
        background: #040b1b; 
        border-radius: 5px;
        border: 1px solid #2a3458;
        backdrop-filter: blur(10px); 
        overflow: hidden;
        margin: 10px 40px;
    }
    
    .top-price-bar { 
        padding: 30px 40px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        background: #1a1f3a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .market-label { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-weight: 700; font-size: 23px; }
    .market-label span { color:#22c55e }
    .market-label .sub { font-size: 12px; color: #475569; font-weight: 500; margin-top: 3px; }
    .pulse-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 10px #22c55e; animation: blink 2s infinite; flex-shrink: 0; }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    
    .main-price { font-size: 40px; font-weight: 900; color: #fff; line-height: 1; text-align: center; }
    .main-price small { font-size: 18px; color: #475569; margin-left: 5px; font-weight: 500; }
    
    .score-container {
        text-align: right;
        background: rgba(0, 0, 0, 0.3);
        padding: 10px 20px;
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(4px);
    }
    .score-label {
        display: block; font-size: 11px; color: #94a3b8; font-weight: 700; margin-bottom: 2px;
        text-transform: uppercase; letter-spacing: 1px;
    }
    .score-value {
        font-size: 42px; font-weight: 900; line-height: 1;
        text-shadow: 0 0 20px currentColor; font-family: 'Inter', sans-serif;
    }
    .score-total { font-size: 16px; color: #64748b; font-weight: 600; vertical-align: super; }

    .quad-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .status-card { 
        padding: 28px; border-right: 1px solid rgba(255, 255, 255, 0.05); 
        display: flex; flex-direction: column;
    }
    .status-card:last-child { border-right: none; }

    .card-title { 
        font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 4px; 
        display: inline-block; margin-bottom: 20px; width: fit-content;
    }
    .title-5m  { background: rgba(244, 114, 182, 0.15); color: #f472b6; border: 1px solid rgba(244, 114, 182, 0.3); }
    .title-4h  { background: rgba(251, 146, 60, 0.15);  color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3); }
    .title-90d { background: rgba(167, 139, 250, 0.15); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.3); }
    .title-52w { background: rgba(56, 189, 248, 0.15);  color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }

    .card-weight { font-size: 10px; color: #475569; font-weight: 600; margin-bottom: 16px; }

    .data-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
    .data-row small { font-size: 10px; color: #64748b; font-weight: 600; margin-bottom: 4px; display: block; }
    .data-row b { font-size: 12.5px; color: #e2e8f0; font-family: 'Inter', sans-serif; }

    .gauge-box { 
        background: rgba(0, 0, 0, 0.2); padding: 18px; border-radius: 5px; margin-top: auto;
    }
    .gauge-info { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
    
    .gauge-left { display: flex; flex-direction: column; gap: 4px; }
    .gauge-left span { font-size: 11px; color: #94a3b8; font-weight: 600; }
    .gauge-point { font-size: 11px; color: #cbd5e1; font-family: 'Inter', sans-serif; }
    .gauge-point b { font-weight: 800; color: #fff; font-size: 12px; }
    
    .gauge-right b { font-size: 24px; font-weight: 900; display:block; text-align:right; }

    .bar-bg { width: 100%; height: 6px; background: #0f172a; border-radius: 4px; overflow: hidden; }
    .bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease-in-out; }

    .usage-guide-section {
        padding: 28px 40px;
        background: rgba(15, 23, 42, 0.6);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    .guide-header {
        font-size: 18px; font-weight: 800; color: #818cf8; margin-bottom: 14px; display: block;
        letter-spacing: 1px;
    }
    .guide-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .guide-list li { font-size: 13px; color: #94a3b8; line-height: 1.7; }
    .guide-list li strong { color: #e2e8f0; font-weight: 700; }

    @media (max-width: 1100px) {
        .quad-grid { grid-template-columns: repeat(2, 1fr); }
        .status-card:nth-child(2) { border-right: none; }
        .status-card:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.05); }
    }
    @media (max-width: 600px) {
        .quad-grid { grid-template-columns: 1fr; }
        .status-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    }

    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #0d1117; }
    ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; border: 2px solid #0d1117; }
    ::-webkit-scrollbar-thumb:hover { background: #8b949e; }