/* ============================================================
   Race Info — 블루/퍼플 네온 톤
   ============================================================ */

.page-race-info {
    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 */
.ri-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);
}
.ri-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%);
}
.ri-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;
}
.ri-hero-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ri-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: ri-orb-drift 18s ease-in-out infinite alternate; }
.ri-hero-orb--cyan { width: 360px; height: 360px; top: -110px; left: -70px; background: radial-gradient(circle, #00d4ff 0%, transparent 70%); }
.ri-hero-orb--violet { width: 440px; height: 440px; bottom: -150px; right: -90px; background: radial-gradient(circle, #c95cff 0%, transparent 70%); animation-delay: -9s; }
@keyframes ri-orb-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(36px, 28px) scale(1.06); } }

.ri-hero-content { max-width: 900px; }
.ri-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);
}
.ri-hero-eyebrow i { color: #ffd24c; filter: drop-shadow(0 0 6px rgba(255, 210, 76, 0.6)); }
.ri-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;
}
.ri-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));
}
.ri-hero-sub { max-width: 620px; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); margin: 0; }

/* MAIN */
.ri-main { padding: 40px 0 16px; }

/* ===== Race Programs — 떠다니는 카드 클라우드 (JS 렌더) ===== */
.ri-prog-cloud-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-align: center;
    margin: 0 0 30px;
    font-size: 0.86rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}
.ri-prog-cloud-hint i { color: #8b5cff; }

.ri-prog-cloud {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    align-items: stretch; /* 닫힌 타일들 높이 통일 */
}

/* 떠다니는 슬롯 — float 애니메이션은 슬롯, hover 변형은 카드에 두어 transform 충돌 방지 */
.ri-prog-slot {
    animation: ri-prog-float 6s ease-in-out infinite;
    will-change: transform;
}
.ri-prog-slot:nth-child(1) { animation-delay: 0s;    animation-duration: 6.5s; }
.ri-prog-slot:nth-child(2) { animation-delay: -1.4s; animation-duration: 7.2s; }
.ri-prog-slot:nth-child(3) { animation-delay: -2.6s; animation-duration: 6.0s; }
.ri-prog-slot:nth-child(4) { animation-delay: -3.5s; animation-duration: 7.6s; }
.ri-prog-slot:nth-child(5) { animation-delay: -4.7s; animation-duration: 6.8s; }
.ri-prog-slot { position: relative; }
.ri-prog-slot:hover { animation-play-state: paused; }
/* 클릭으로 펼쳐진 카드: float 정지 + 전체 폭 차지 */
.ri-prog-slot:has(.ri-prog-card.is-open) {
    animation-play-state: paused;
    grid-column: 1 / -1;
    z-index: 6;
}
@keyframes ri-prog-float {
    0%, 100% { transform: translateY(0) rotate(-0.5deg); }
    50%      { transform: translateY(-12px) rotate(0.5deg); }
}

.ri-prog-card {
    --tc: #8b5cff;
    position: relative;
    display: flex; flex-direction: column;
    width: 100%; height: 100%;     /* 슬롯 높이를 채워 닫힌 타일 높이 통일 */
    min-height: 258px;             /* 다른 행에 홀로 있어도 높이 통일 */
    border-radius: 18px;
    padding: 24px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.34);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(.2, .7, .3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.ri-prog-card::before {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 50%, transparent) 0%, transparent 50%);
    -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.6; pointer-events: none;
}
.ri-prog-card-glow {
    position: absolute; top: -55%; right: -25%;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, var(--tc) 0%, transparent 70%);
    opacity: 0.16; pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 컴팩트 타일 hover/focus 어포던스 (펼침은 클릭으로) */
.ri-prog-slot:not(:has(.is-open)) .ri-prog-card:hover,
.ri-prog-card:focus-visible {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--tc) 45%, rgba(255, 255, 255, 0.14));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 46px rgba(0, 0, 0, 0.46), 0 0 30px color-mix(in srgb, var(--tc) 28%, transparent);
    outline: none;
}
.ri-prog-card:hover .ri-prog-card-glow,
.ri-prog-card:focus-visible .ri-prog-card-glow { opacity: 0.3; transform: scale(1.12); }

/* ===== 클릭으로 펼쳐진 카드 — 전체 폭, 가로 2단 레이아웃 ===== */
.ri-prog-card.is-open {
    display: grid;
    grid-template-columns: minmax(200px, 264px) 1fr;
    gap: 32px;
    align-items: start;
    padding: 30px 32px;
    transform: none;
    border-color: color-mix(in srgb, var(--tc) 50%, rgba(255, 255, 255, 0.14));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 26px 54px rgba(0, 0, 0, 0.5), 0 0 40px color-mix(in srgb, var(--tc) 30%, transparent);
}
.ri-prog-card.is-open .ri-prog-card-glow { opacity: 0.3; }
.ri-prog-card.is-open .ri-prog-face {
    align-self: center;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* 기본 노출 영역 — 아이콘/배지/제목/힌트를 항상 세로로 정렬(불일치 방지) */
.ri-prog-face {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: flex-start;
    flex: 1;
}
.ri-prog-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-bottom: 14px;
    border-radius: 14px;
    font-size: 1.4rem; color: var(--tc);
    background: color-mix(in srgb, var(--tc) 14%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--tc) 34%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 28%, transparent);
}
.ri-prog-face .card-badge { margin-bottom: 10px; }
.ri-prog-title {
    margin: 0;
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 800; line-height: 1.12; letter-spacing: -0.01em;
    color: #fff;
}
.ri-prog-hint {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto;        /* 카드 하단으로 밀어 모든 카드에서 힌트 위치 통일 */
    padding-top: 16px;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--tc) 65%, #fff);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
/* 펼침 시엔 face가 grid 셀이라 flex:1 의미 없음 → 정상 */
.ri-prog-card.is-open .ri-prog-face { flex: none; }
.ri-prog-card.is-open .ri-prog-hint { display: none; }

/* 상세 — 기본 숨김, 클릭(is-open) 시 오른쪽 넓은 영역에 가로로 노출 */
.ri-prog-detail {
    position: relative; z-index: 1;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: opacity 0.3s ease;
}
.ri-prog-card.is-open .ri-prog-detail {
    max-height: none; opacity: 1; overflow: visible;
}
/* 펼쳐진 상태에선 설명/특징을 넓게 — 특징은 다열 그리드로 */
.ri-prog-card.is-open .card-features {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card-badge {
    display: inline-flex; align-items: center;
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em;
    color: var(--tc);
    padding: 5px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tc) 14%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--tc) 38%, transparent);
    text-transform: uppercase;
    margin-bottom: 14px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 30%, transparent);
}

.card-description {
    font-size: 0.96rem; line-height: 1.75;
    color: rgba(255, 255, 255, 0.7); margin-bottom: 18px;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.card-description p { margin-bottom: 8px; }
.card-description strong { color: #fff; }

.card-features {
    list-style: none; padding: 0; margin: 0 0 20px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
.card-features li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.86rem; color: rgba(255, 255, 255, 0.78); line-height: 1.5;
}
.feature-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--tc);
    background: color-mix(in srgb, var(--tc) 14%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--tc) 32%, transparent);
    font-size: 0.86rem;
    line-height: 1;
}
.feature-icon .feature-emoji {
    font-size: 0.96rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tc) 35%, transparent));
}

.card-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* 프로그램 전용 페이지로 가는 메인 액션 — 프로그램(--tc) 색상 기반 화살표 CTA */
.ri-prog-cta {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 18px;
    border-radius: 11px;
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-weight: 800; font-size: 0.84rem; letter-spacing: 0.02em;
    color: #fff; text-decoration: none;
    background: color-mix(in srgb, var(--tc) 18%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--tc) 48%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.ri-prog-cta i { font-size: 0.95rem; transition: transform 0.2s ease; }
.ri-prog-cta:hover {
    color: #fff;
    background: color-mix(in srgb, var(--tc) 30%, transparent);
    border-color: color-mix(in srgb, var(--tc) 72%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--tc) 32%, transparent);
    transform: translateY(-1px);
}
.ri-prog-cta:hover i { transform: translateX(4px); }

/* 일정 페이지가 없는 프로그램의 안내 문구 (중복 버튼 대체) */
.ri-prog-note {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}
.ri-prog-note i { color: #7c84ff; font-size: 0.95rem; }

/* 보조 링크(룰북, 유튜브 등) — 고스트 칩 */
.ri-prog-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 11px;
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-weight: 700; font-size: 0.82rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.ri-prog-link:hover {
    color: #fff;
    background: color-mix(in srgb, var(--tc) 12%, rgba(255, 255, 255, 0.04));
    border-color: color-mix(in srgb, var(--tc) 45%, transparent);
    transform: translateY(-1px);
}

/* ===== Skeleton ===== */
.ri-skeleton-list { display: flex; flex-direction: column; gap: 18px; }
.ri-skeleton-card {
    padding: 28px 30px;
    border-radius: 18px;
    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);
    display: flex; flex-direction: column; gap: 12px;
}
.ri-sk-badge,
.ri-sk-title,
.ri-sk-text,
.ri-sk-features span {
    display: inline-block;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(91, 139, 255, 0.14) 50%, rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: ri-shimmer 1.4s ease-in-out infinite;
}
.ri-sk-badge { width: 120px; height: 22px; border-radius: 999px; }
.ri-sk-title { width: 60%; max-width: 360px; height: 32px; }
.ri-sk-text { width: 90%; height: 14px; }
.ri-sk-text--short { width: 55%; }
.ri-sk-features { display: flex; gap: 10px; margin-top: 6px; }
.ri-sk-features span { flex: 1; height: 38px; border-radius: 10px; }
@keyframes ri-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.race-info-empty {
    text-align: center;
    padding: 80px 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
}

/* JOIN section */
.ri-join {
    padding: 60px 0 80px;
    text-align: center;
}
.ri-join-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800; letter-spacing: -0.02em;
    margin: 0 0 14px;
    background: linear-gradient(135deg, #fff 0%, #c5a8ff 60%, #d77dff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 26px rgba(160, 107, 255, 0.35));
}
.ri-join-desc {
    color: rgba(255, 255, 255, 0.62); font-size: 0.98rem;
    line-height: 1.7; margin-bottom: 26px;
}
.ri-join-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5865f2 0%, #8b5cff 100%);
    color: #fff;
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(88, 101, 242, 0.45);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.ri-join-cta:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 38px rgba(123, 92, 255, 0.55); }
.ri-join-cta i { font-size: 1.2rem; }

@media (max-width: 768px) {
    .ri-hero { padding: 56px 0 44px; }
    .ri-prog-card { padding: 20px 18px; }
}

/* 좁은 화면: 펼쳐진 카드도 세로 스택(왼쪽 구분선 제거) */
@media (max-width: 640px) {
    .ri-prog-card.is-open {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 20px;
    }
    .ri-prog-card.is-open .ri-prog-face {
        padding-right: 0;
        border-right: none;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* 터치 기기 / 모션 최소화: 떠다니는 애니메이션만 정지 (펼침은 탭으로 동작) */
@media (hover: none) {
    .ri-prog-slot { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ri-prog-slot { animation: none !important; }
}

/* ==========================================================
   Club Intro Section (ABOUT)
   ========================================================== */
.club-intro-section {
    padding: 20px 0;
    position: relative;
    z-index: 2;
}

/* 가운데 정렬 헤더 (팀 섹션과 동일 리듬) */
.club-intro-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
}

.club-intro-logo {
    width: 72px;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: 18px;
    filter:
        drop-shadow(0 0 14px rgba(0, 198, 255, 0.32))
        drop-shadow(0 0 30px rgba(0, 198, 255, 0.18));
}

.club-intro-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    color: #c5b8ff;
    font-size: 0.74rem; letter-spacing: 0.14em; font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 6px 15px; border-radius: 999px;
    border: 1px solid rgba(139, 92, 255, 0.4);
    background: rgba(91, 139, 255, 0.1);
    backdrop-filter: blur(8px);
}
.club-intro-kicker i { color: #5fd9ff; }

.club-intro-headline {
    margin: 0;
    color: #ffffff;
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.club-intro-headline-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 26px rgba(160, 107, 255, 0.35));
}

.club-intro-summary {
    margin: 12px auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-size: 0.98rem;
    line-height: 1.8;
    max-width: 620px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 4개 특징 카드 — auto-fit으로 한 줄 가득 채움(빈 공간 없음) */
.club-intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.club-intro-point {
    --theme-color: #00c6ff;
    padding: 18px 16px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.club-intro-point:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3), 0 0 22px color-mix(in srgb, var(--theme-color) 22%, transparent);
}

.club-intro-point strong {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.club-intro-point span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-size: 0.82rem;
    line-height: 1.65;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Intro Grid Icons */
.intro-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color);
    background: color-mix(in srgb, var(--theme-color) 12%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--theme-color) 32%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--theme-color) 22%, transparent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.intro-icon svg {
    width: 24px;
    height: 24px;
}
.club-intro-point:hover .intro-icon {
    transform: scale(1.1);
    box-shadow: 0 0 26px color-mix(in srgb, var(--theme-color) 50%, transparent);
}

/* Theme Variables */
.theme-highway { --theme-color: #00c6ff; --theme-color-rgb: 0, 198, 255; }
.theme-touge { --theme-color: #8bff4d; --theme-color-rgb: 139, 255, 77; }
.theme-drift { --theme-color: #ff9e44; --theme-color-rgb: 255, 158, 68; }
.theme-laptime { --theme-color: #ff5fd2; --theme-color-rgb: 255, 95, 210; }

@media (max-width: 575.98px) {
    .club-intro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .club-intro-logo { width: 64px; }
}
@media (max-width: 400px) {
    .club-intro-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Meet the Team — STAFF INTRODUCTION 스타일 통일 카드
   (역할색 헤더 밴드 · 워터마크 아이콘 · 코너 태그 · 아이콘 배지)
   섹션(방장 / 스태프 ...)별로 분리 렌더
   ========================================================== */
.ri-team-section {
    padding: 34px 0 10px;
    position: relative;
    z-index: 2;
}
.ri-team { --rc: #8b5cff; }

.ri-team-head {
    text-align: center;
    margin-bottom: 44px;
}
.ri-team-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c5b8ff;
    margin-bottom: 14px;
    padding: 6px 16px;
    border: 1px solid rgba(139, 92, 255, 0.4);
    background: rgba(91, 139, 255, 0.1);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.ri-team-eyebrow i { color: #5fd9ff; }
.ri-team-title {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.ri-team-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 26px rgba(160, 107, 255, 0.35));
}
.ri-team-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.96rem;
    line-height: 1.6;
}

/* ----- 섹션(역할 그룹) — 중앙 정렬로 소수 인원도 균형 있게 ----- */
.ri-team-group { --rc: #8b5cff; margin-bottom: 40px; }
.ri-team-group:last-child { margin-bottom: 0; }
.ri-team-section-head {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 22px;
}
.ri-team-section-label {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 16px; border-radius: 999px;
    background: color-mix(in srgb, var(--rc) 20%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 32%, transparent);
}
.ri-team-section-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem; font-weight: 800;
    color: color-mix(in srgb, var(--rc) 80%, #fff);
    background: color-mix(in srgb, var(--rc) 12%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent);
}
.ri-team-section-line { display: none; }

/* ----- 카드 그리드: 한 줄 4명 (8명 → 4 + 4 2행) ----- */
.ri-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* ----- 통일 카드 ----- */
.ri-team-card {
    --rc: #8b5cff;
    width: 100%;
    position: relative;
    display: flex; flex-direction: column;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.008) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.ri-team-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--rc) 45%, rgba(255, 255, 255, 0.14));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 30px color-mix(in srgb, var(--rc) 26%, transparent);
}

/* 배너 (역할색) — 디스코드 프로필 느낌 */
.ri-team-banner {
    position: relative;
    height: 72px;
    background:
        radial-gradient(120% 170% at 80% 0%, color-mix(in srgb, var(--rc) 68%, transparent) 0%, transparent 65%),
        linear-gradient(135deg, color-mix(in srgb, var(--rc) 80%, #000) 0%, color-mix(in srgb, var(--rc) 36%, #0a0c14) 100%);
}
.ri-team-banner::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 9px 9px; opacity: 0.4;
}
/* 역할 태그 (배너 우상단) */
.ri-team-tag {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    padding: 4px 10px; border-radius: 7px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

/* 본문 */
.ri-team-card-body {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; flex: 1;
    padding: 0 24px 22px;
}

/* 원형 프로필 아바타 (사진 우선, 배너에 걸침 · 디스코드 컷아웃 링) */
.ri-team-avatar {
    position: relative;
    width: 84px; height: 84px;
    margin-top: -42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: #0c0e16;
    border: 4px solid #0c0e16;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 55%, transparent), 0 8px 20px rgba(0, 0, 0, 0.5);
}
.ri-team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ri-team-avatar > i { font-size: 1.9rem; color: color-mix(in srgb, var(--rc) 82%, #fff); }
.ri-team-avatar-initial { font-weight: 800; font-size: 1.7rem; color: color-mix(in srgb, var(--rc) 82%, #fff); }

.ri-team-name {
    margin: 12px 0 0;
    color: #fff;
    font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em;
}
/* 직책 — 디스코드 롤 핀 느낌 */
.ri-team-role {
    display: inline-flex; align-items: center;
    width: fit-content; margin-top: 8px;
    padding: 3px 11px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--rc) 82%, #fff);
    background: color-mix(in srgb, var(--rc) 14%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--rc) 42%, transparent);
}

/* 본문 메인(About + 한줄평) — flex로 늘려 핸들을 카드 하단에 정렬 */
.ri-team-body-main { flex: 1; }
.ri-team-about { margin-top: 16px; }
.ri-team-about-label,
.ri-team-quote-label {
    display: block; margin-bottom: 6px;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.ri-team-bio {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem; line-height: 1.75;
    white-space: pre-line;       /* 입력한 줄바꿈 유지 */
    word-break: keep-all;        /* 한글을 단어(띄어쓰기) 단위로 줄바꿈 */
    overflow-wrap: break-word;   /* 긴 영문/URL 안전 줄바꿈 */
}

/* 한줄평 (About 아래, 역할/하이라이트 색 인용 박스) */
.ri-team-quote {
    margin-top: 14px;
    padding: 10px 13px;
    border-left: 3px solid var(--rc);
    border-radius: 0 9px 9px 0;
    background: color-mix(in srgb, var(--rc) 10%, rgba(255, 255, 255, 0.02));
}
.ri-team-quote-label { color: color-mix(in srgb, var(--rc) 72%, #fff); }
.ri-team-quote-text {
    margin: 0;
    font-size: 0.84rem; font-style: italic; line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ===== 카드 배경 스타일 (멤버별 선택) ===== */
/* gradient — 카드 전체 대각선 그라데이션 */
.ri-team-card.style-gradient {
    background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 26%, #0a0c14) 0%, rgba(255, 255, 255, 0.012) 62%);
}
.ri-team-card.style-gradient .ri-team-banner {
    background: linear-gradient(120deg, var(--rc) 0%, color-mix(in srgb, var(--rc) 45%, #7b3cff) 100%);
}

/* neon — 어두운 배경 + 강한 네온 글로우 테두리 */
.ri-team-card.style-neon {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.22) 100%);
    border-color: color-mix(in srgb, var(--rc) 55%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 28%, transparent), 0 0 26px color-mix(in srgb, var(--rc) 30%, transparent), 0 12px 30px rgba(0, 0, 0, 0.4);
}
.ri-team-card.style-neon .ri-team-banner {
    background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 62%, #000) 0%, #0a0c14 100%);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--rc) 70%, transparent);
}
.ri-team-card.style-neon .ri-team-banner::after { opacity: 0.18; }

/* carbon — 카본 파이버 패턴 */
.ri-team-card.style-carbon {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 4px),
        linear-gradient(180deg, #14161d 0%, #0c0e14 100%);
}
.ri-team-card.style-carbon .ri-team-banner {
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.28) 0 3px, transparent 3px 6px),
        linear-gradient(135deg, color-mix(in srgb, var(--rc) 72%, #000) 0%, color-mix(in srgb, var(--rc) 30%, #14161d) 100%);
}

/* aurora — 다색 오로라 블롭 */
.ri-team-card.style-aurora {
    background:
        radial-gradient(60% 55% at 18% 8%, color-mix(in srgb, var(--rc) 38%, transparent), transparent 60%),
        radial-gradient(55% 50% at 92% 28%, rgba(0, 198, 255, 0.2), transparent 60%),
        radial-gradient(65% 60% at 72% 105%, rgba(160, 107, 255, 0.22), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.16));
}
.ri-team-card.style-aurora .ri-team-banner {
    background: linear-gradient(120deg, var(--rc) 0%, #00c6ff 52%, #a06bff 100%);
}

/* 핸들/링크 (카드 하단, 역할색 모노) */
.ri-team-handles {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ri-team-handle {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.82rem; font-weight: 600;
    color: color-mix(in srgb, var(--rc) 72%, #fff);
    text-decoration: none;
    width: fit-content;
    transition: color 0.18s ease, transform 0.18s ease;
}
.ri-team-handle:hover { color: #fff; transform: translateX(2px); }
.ri-team-handle i { font-size: 0.9rem; }

@media (max-width: 1100px) {
    .ri-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .ri-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .ri-team-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
    .ri-team-card { max-width: 360px; }
}