/* ==========================================================================
   KEYWORK 등급 카드 (grade-card)
   - 마이페이지 허브 전용 유저 등급 카드
   - 4단계: 신입 / 반장 / 팀장 / 소장 + 운영자(잡부)
   - 플랫 디자인, shadow 없음, 카드 bg 통일, 뱃지만 차별화
   - .level-card (profile.php 인라인/mypage.css 충돌 회피 위해 신규 네임)
   ========================================================================== */

/* ---------- Tokens (scoped — 전역 변수 충돌 없음) ---------- */
.grade-card {
    --gc-bg: #DBEAFE;               /* brand-tint 기본 (반장 톤) */
    --gc-border: #DBEAFE;
    --gc-border-w: 1px;
    --gc-text: #475569;
    --gc-text-strong: #0F172A;
    --gc-badge-bg: #3B82F6;         /* brand */
    --gc-badge-border: transparent;
    --gc-badge-border-w: 0;
    --gc-badge-text: #ffffff;
    --gc-bar-bg: rgba(37,99,235,.15);
    --gc-bar-fill: #3B82F6;

    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    margin-bottom: 20px;
    background: var(--gc-bg);
    border: var(--gc-border-w) solid var(--gc-border);
    border-radius: 16px;
    box-shadow: none;
    text-decoration: none;
    color: var(--gc-text);
    transition: transform .15s cubic-bezier(.2,.6,.2,1);
}
.grade-card:active { transform: scale(.99); }

/* ---------- Badge (왼쪽 작은 아이콘) ---------- */
.grade-card__badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--gc-badge-bg);
    border: var(--gc-badge-border-w) solid var(--gc-badge-border);
    color: var(--gc-badge-text);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    box-sizing: border-box;
}

/* ---------- Info Body ---------- */
.grade-card__info {
    flex: 1;
    min-width: 0;
}
.grade-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gc-text-strong);
    line-height: 1.3;
    margin: 0;
}
.grade-card__pts {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    color: var(--gc-text);
    margin-top: 2px;
}
.grade-card__pts strong {
    font-size: 17px;
    font-weight: 800;
    color: #2563EB;
    font-variant-numeric: tabular-nums;
}
.grade-card__progress {
    margin-top: 10px;
    height: 6px;
    border-radius: 3px;
    background: var(--gc-bar-bg);
    overflow: hidden;
}
.grade-card__bar {
    height: 100%;
    width: 0;
    background: var(--gc-bar-fill);
    border-radius: 3px;
    transition: width .6s cubic-bezier(.2,.6,.2,1);
}
.grade-card__next {
    font-size: 15px;
    color: #475569;
    margin-top: 6px;
}
.grade-card__next i {
    margin-right: 3px;
}

/* ==========================================================================
   4단계 variants (카드 bg 통일, 뱃지만 차별화)
   ========================================================================== */

/* Lv1 신입 — 은은한 인디고 뱃지 */
.grade-card--lv1 .grade-card__badge {
    background: #C7D2FE;
    color: #3730A3;
}

/* Lv2 반장 — 브랜드 (기본값 그대로) */
/* .grade-card--lv2 는 별도 설정 없이 :root 기본값 사용 */

/* Lv3 팀장 — 진한 브랜드 + 흰 테두리 */
.grade-card--lv3 .grade-card__badge {
    background: #2563EB;
    border-color: #ffffff;
    border-width: 2px;
}

/* Lv4 소장 — 흰색 반전 + 브랜드 테두리 */
.grade-card--lv4 .grade-card__badge {
    background: #ffffff;
    border-color: #2563EB;
    border-width: 2px;
    color: #2563EB;
}

/* 운영자 (잡부 자조) — 회색 뱃지 + 캐릭터 라벨 */
.grade-card--owner .grade-card__badge {
    background: #475569;
    color: #ffffff;
}
.grade-card--owner .grade-card__title::after {
    content: ' (자칭)';
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    opacity: .7;
}

/* ==========================================================================
   Dark mode — [data-theme="dark"]
   카드 bg는 다크 브랜드 tint로 오버라이드, 뱃지는 가독성 보정
   ========================================================================== */

[data-theme="dark"] .grade-card {
    --gc-bg: #1E3A5F;
    --gc-border: #1E3A5F;
    --gc-text: #E2E8F0;
    --gc-text-strong: #F1F5F9;
    --gc-bar-bg: rgba(255,255,255,.15);
}
[data-theme="dark"] .grade-card__pts strong { color: #93C5FD; }
[data-theme="dark"] .grade-card__next { color: #CBD5E1; }

[data-theme="dark"] .grade-card--lv1 .grade-card__badge {
    background: #A5B4FC;
    color: #1E1B4B;
}
[data-theme="dark"] .grade-card--lv3 .grade-card__badge {
    border-color: #ffffff;
}
[data-theme="dark"] .grade-card--lv4 .grade-card__badge {
    background: #1E293B;
    border-color: #3B82F6;
    color: #F1F5F9;
}
[data-theme="dark"] .grade-card--owner .grade-card__badge {
    background: #64748B;
}
[data-theme="dark"] .grade-card--owner .grade-card__title::after {
    color: #94A3B8;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .grade-card,
    .grade-card__bar {
        transition: none !important;
    }
}

/* ==========================================================================
   Hover (데스크톱 포인터 전용)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .grade-card[href]:hover {
        border-color: #3B82F6;
    }
}