/* ============================================================
   Community Stats — 블루/퍼플 네온 톤
   ============================================================ */

.page-stats {
    background:
        radial-gradient(ellipse 1100px 700px at 12% 0%, rgba(0, 130, 255, 0.13) 0%, transparent 60%),
        radial-gradient(ellipse 900px 600px at 88% 18%, rgba(160, 107, 255, 0.12) 0%, transparent 60%),
        #06070d;
    color: #fff;
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
}

/* HERO */
.st-hero { position: relative; margin-top: var(--fixed-header-h, 96px); padding: 72px 0 60px; overflow: hidden; isolation: isolate; border-bottom: 1px solid rgba(160, 107, 255, 0.16); }
.st-hero-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 70% 100% at 0% 0%, rgba(0, 198, 255, 0.18) 0%, transparent 55%), radial-gradient(ellipse 80% 100% at 100% 100%, rgba(201, 92, 255, 0.16) 0%, transparent 60%), linear-gradient(135deg, #050714 0%, #0a0b18 50%, #0d0a1a 100%); }
.st-hero-bg::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(91, 139, 255, 0.04) 0 2px, transparent 2px 14px); opacity: 0.55; }
.st-hero-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.st-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: st-orb-drift 18s ease-in-out infinite alternate; }
.st-hero-orb--cyan { width: 360px; height: 360px; top: -110px; left: -70px; background: radial-gradient(circle, #00d4ff 0%, transparent 70%); }
.st-hero-orb--violet { width: 440px; height: 440px; bottom: -150px; right: -90px; background: radial-gradient(circle, #c95cff 0%, transparent 70%); animation-delay: -9s; }
@keyframes st-orb-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(36px, 28px) scale(1.06); } }

.st-hero-content { max-width: 900px; }
.st-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; color: #c5b8ff; margin-bottom: 16px; padding: 6px 16px; border: 1px solid rgba(139, 92, 255, 0.45); background: rgba(91, 139, 255, 0.12); border-radius: 999px; text-transform: uppercase; backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(123, 92, 255, 0.18); }
.st-hero-eyebrow i { color: #5fd9ff; filter: drop-shadow(0 0 6px rgba(95, 217, 255, 0.6)); }
.st-hero-title { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 14px; color: #fff; }
.st-hero-title-grad { background: linear-gradient(135deg, #5fd9ff 0%, #8b5cff 60%, #c95cff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 30px rgba(160, 107, 255, 0.4)); }
.st-hero-sub { max-width: 620px; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); margin: 0; }

/* STATS STRIP */
.st-stats-strip { position: relative; z-index: 3; margin-top: -32px; margin-bottom: 30px; }
.st-stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1199px) { .st-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .st-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .st-stats-grid { grid-template-columns: 1fr; } }

.st-stat-card {
    position: relative; padding: 16px 18px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.28);
    overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: 84px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.st-stat-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, transparent 0%, transparent 55%, var(--stat-c, #5b8bff) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; pointer-events: none; }
.st-stat-card::after { content: ""; position: absolute; top: -40%; right: -30%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--stat-c, #5b8bff) 0%, transparent 70%); opacity: 0.14; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; }
.st-stat-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.36), 0 0 22px color-mix(in srgb, var(--stat-c, #5b8bff) 22%, transparent); }
.st-stat-card:hover::after { opacity: 0.28; transform: scale(1.1); }
.st-stat-card--cyan   { --stat-c: #00d4ff; }
.st-stat-card--blue   { --stat-c: #5b8bff; }
.st-stat-card--purple { --stat-c: #a06bff; }
.st-stat-card--violet { --stat-c: #c95cff; }
.st-stat-card--pink   { --stat-c: #ff5cb8; }

.st-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: color-mix(in srgb, var(--stat-c, #5b8bff) 14%, rgba(255, 255, 255, 0.02)); border: 1px solid color-mix(in srgb, var(--stat-c, #5b8bff) 36%, transparent); color: var(--stat-c, #5b8bff); font-size: 1.08rem; box-shadow: 0 0 16px color-mix(in srgb, var(--stat-c, #5b8bff) 30%, transparent); }
.st-stat-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.st-stat-value { font-size: 1.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px color-mix(in srgb, var(--stat-c, #5b8bff) 50%, transparent); margin-bottom: 2px; word-break: break-all; }
.st-stat-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* MAIN */
.st-main { padding-bottom: 70px; }

/* Panel (각 섹션) */
.st-panel { position: relative; padding: 20px 22px 22px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.008) 100%); border: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.25); overflow: hidden; }
.st-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, transparent 0%, transparent 55%, #a06bff 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.4; pointer-events: none; }

.st-panel-title { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 0.94rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; text-transform: uppercase; }
.st-panel-title i { color: #a06bff; filter: drop-shadow(0 0 6px rgba(160, 107, 255, 0.5)); }

.st-panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(160, 107, 255, 0.18); }
.st-panel-head .st-panel-title { margin: 0; }
.st-panel-meta { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.st-meta-num { color: #c5a8ff; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-panel-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.st-panel-body { display: flex; flex-direction: column; gap: 12px; }

/* Bar rows (controller, tyre) */
.st-bar-row { }
.st-bar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
.st-bar-label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; font-weight: 700; color: rgba(255, 255, 255, 0.88); }
.st-bar-label i { color: #c5a8ff; font-size: 0.95rem; }
.st-bar-count { font-size: 0.82rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.st-bar-pct { color: rgba(255, 255, 255, 0.45); margin-left: 4px; font-weight: 600; }

.st-bar-track { height: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; overflow: hidden; }
.st-bar-track--slim { height: 5px; }
.st-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s cubic-bezier(0.2, 0, 0.2, 1); }
.st-fill--wheel    { background: linear-gradient(90deg, #00d4ff 0%, #5b8bff 100%); box-shadow: 0 0 12px rgba(91, 139, 255, 0.5); }
.st-fill--pad      { background: linear-gradient(90deg, #5b8bff 0%, #8b5cff 100%); box-shadow: 0 0 12px rgba(139, 92, 255, 0.5); }
.st-fill--keyboard { background: linear-gradient(90deg, #a06bff 0%, #c95cff 100%); box-shadow: 0 0 12px rgba(201, 92, 255, 0.5); }
.st-fill--unknown  { background: rgba(255, 255, 255, 0.18); }
.st-fill--tyre     { background: linear-gradient(90deg, #1f9bff 0%, #8b5cff 60%, #c95cff 100%); box-shadow: 0 0 12px rgba(139, 92, 255, 0.45); }
.st-fill--stage    { background: linear-gradient(90deg, #5b8bff 0%, #a06bff 100%); box-shadow: 0 0 10px rgba(139, 92, 255, 0.42); }
.st-fill--car      { background: linear-gradient(90deg, #c95cff 0%, #ff5cb8 100%); box-shadow: 0 0 10px rgba(201, 92, 255, 0.42); }

/* Rank rows (stage / car) */
.st-rank-row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: flex-start; padding: 6px 0; }
.st-rank-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(160, 107, 255, 0.12); border: 1px solid rgba(160, 107, 255, 0.32); color: #c5a8ff; font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-rank-body { min-width: 0; }
.st-rank-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.st-rank-name { font-size: 0.88rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-rank-count { font-size: 0.78rem; font-weight: 800; color: #c5a8ff; font-variant-numeric: tabular-nums; }

/* Table */
.st-table-wrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.st-table thead th { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; padding: 11px 10px; border-bottom: 1px solid rgba(160, 107, 255, 0.18); background: transparent; white-space: nowrap; }
.st-table tbody td { padding: 11px 10px; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.st-table tbody tr { cursor: pointer; transition: background 0.18s ease; }
.st-table tbody tr:hover { background: color-mix(in srgb, #a06bff 6%, transparent); }
.st-table tbody tr:last-child td { border-bottom: none; }

.st-driver { font-weight: 800; font-size: 0.92rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-driver i { margin-left: 4px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.32); transition: color 0.18s ease, transform 0.18s ease; }
.st-table tbody tr:hover .st-driver i { color: #a06bff; transform: translate(2px, -2px); }
.st-stage { color: #c5a8ff; font-weight: 700; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-car { color: rgba(255, 255, 255, 0.62); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-meta { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.st-chip { display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); letter-spacing: 0.04em; }
.st-time { font-weight: 800; font-size: 0.96rem; background: linear-gradient(135deg, #fff 0%, #c5a8ff 60%, #d77dff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 8px rgba(160, 107, 255, 0.55)); }
.st-count { font-weight: 800; color: #c5a8ff; font-variant-numeric: tabular-nums; }

/* Rank cells */
.st-rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 8px; font-weight: 800; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); font-variant-numeric: tabular-nums; }
.st-rank-1 { color: #ffd24c; background: rgba(255, 210, 76, 0.1); border-color: rgba(255, 210, 76, 0.45); text-shadow: 0 0 12px rgba(255, 210, 76, 0.5); }
.st-rank-2 { color: #dcdcdc; background: rgba(220, 220, 220, 0.08); border-color: rgba(220, 220, 220, 0.35); text-shadow: 0 0 10px rgba(220, 220, 220, 0.4); }
.st-rank-3 { color: #e09558; background: rgba(224, 149, 88, 0.1); border-color: rgba(224, 149, 88, 0.4); text-shadow: 0 0 10px rgba(224, 149, 88, 0.45); }
.st-table tbody tr.st-row-rank-1 { background: linear-gradient(90deg, rgba(255, 210, 76, 0.08), transparent 60%); }
.st-table tbody tr.st-row-rank-2 { background: linear-gradient(90deg, rgba(220, 220, 220, 0.05), transparent 60%); }
.st-table tbody tr.st-row-rank-3 { background: linear-gradient(90deg, rgba(224, 149, 88, 0.05), transparent 60%); }

/* Search */
.st-search-wrap { position: relative; display: inline-flex; align-items: center; width: 220px; max-width: 100%; }
.st-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.35); font-size: 0.85rem; pointer-events: none; }
.st-search-input { width: 100%; padding: 7px 36px 7px 34px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.85rem; transition: border-color 0.18s ease, background 0.18s ease; }
.st-search-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.st-search-input:focus { outline: none; border-color: rgba(139, 92, 255, 0.55); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 12px rgba(123, 92, 255, 0.22); }
.st-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: rgba(255, 255, 255, 0.45); cursor: pointer; padding: 3px 6px; border-radius: 6px; display: none; font-size: 0.8rem; }
.st-search-clear:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* Pagination */
.st-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(160, 107, 255, 0.18); }
.st-pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.65); font-weight: 700; font-size: 0.86rem; text-decoration: none; transition: all 0.18s ease; }
.st-pg-btn:hover { background: rgba(139, 92, 255, 0.12); border-color: rgba(139, 92, 255, 0.35); color: #fff; }
.st-pg-btn.is-active { background: linear-gradient(135deg, #1f9bff 0%, #8b5cff 100%); border-color: rgba(139, 92, 255, 0.6); color: #fff; box-shadow: 0 4px 14px rgba(123, 92, 255, 0.42); }
.st-pg-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.st-pg-info { margin-left: 8px; color: rgba(255, 255, 255, 0.42); font-size: 0.78rem; }

/* Skeleton */
.st-sk-line { display: inline-block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--skel-track, rgba(255, 255, 255, 0.045)) 0%, var(--skel-track, rgba(255, 255, 255, 0.045)) 35%, var(--skel-halo, rgba(0, 198, 255, 0.10)) 44%, var(--skel-sheen, rgba(0, 198, 255, 0.34)) 50%, var(--skel-halo, rgba(0, 198, 255, 0.10)) 56%, var(--skel-track, rgba(255, 255, 255, 0.045)) 65%, var(--skel-track, rgba(255, 255, 255, 0.045)) 100%); background-size: 220% 100%; animation: st-shimmer 1.4s ease-in-out infinite; }
.st-sk-bar { background: linear-gradient(90deg, var(--skel-track, rgba(255, 255, 255, 0.045)) 0%, var(--skel-track, rgba(255, 255, 255, 0.045)) 35%, var(--skel-halo, rgba(0, 198, 255, 0.10)) 44%, var(--skel-sheen, rgba(0, 198, 255, 0.34)) 50%, var(--skel-halo, rgba(0, 198, 255, 0.10)) 56%, var(--skel-track, rgba(255, 255, 255, 0.045)) 65%, var(--skel-track, rgba(255, 255, 255, 0.045)) 100%) !important; background-size: 220% 100% !important; animation: st-shimmer 1.4s ease-in-out infinite; width: 100%; height: 100%; }
.st-skeleton-row td { background: transparent !important; padding: 10px !important; }
@keyframes st-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Empty */
.st-empty { text-align: center; padding: 50px 16px; color: rgba(255, 255, 255, 0.4); }
.st-empty i { display: block; font-size: 2.2rem; margin-bottom: 10px; color: rgba(160, 107, 255, 0.4); }

/* Footer link */
.st-footer-link { margin-top: 24px; text-align: center; }
.st-link-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; background: linear-gradient(135deg, rgba(31, 155, 255, 0.12), rgba(139, 92, 255, 0.16)); border: 1px solid rgba(139, 92, 255, 0.4); color: #fff; text-decoration: none; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.06em; transition: all 0.22s ease; }
.st-link-cta:hover { color: #fff; transform: translateY(-2px); background: linear-gradient(135deg, rgba(31, 155, 255, 0.22), rgba(139, 92, 255, 0.28)); box-shadow: 0 8px 22px rgba(123, 92, 255, 0.35); }

@media (max-width: 768px) {
    .st-hero { padding: 56px 0 44px; }
    .st-stats-strip { margin-top: -20px; }
    .st-table thead th, .st-table tbody td { padding: 9px 7px; }
}