/* ══════════════════════════════════════════════════════════════
   MemberShortcuts — 바로가기 버튼 영역
   ══════════════════════════════════════════════════════════════ */

.shortcuts-card {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.shortcuts-title {
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── 버튼 공통 ────────────────────────────────────────────── */
.shortcut-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-primary-200);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    word-break: keep-all;
}

.shortcut-btn:hover,
.shortcut-btn:active {
    background: var(--color-primary-100);
    border-color: var(--color-primary-300);
}

.shortcut-btn:active {
    transform: scale(0.98);
}

/* ── 라벨 ─────────────────────────────────────────────────── */
.shortcut-label {
    flex: 1;
    min-width: 0;
}

/* ── 화살표 ───────────────────────────────────────────────── */
.shortcut-arrow {
    flex-shrink: 0;
    font-size: var(--text-lg);
    color: var(--color-primary-400);
    line-height: 1;
}

/* ── 색상 변형 ───────────────────────────────────────────── */

/* Blue (기본 — primary 토큰 그대로) */
.shortcut-btn--blue {
    background: var(--color-primary-50);
    border-color: var(--color-primary-200);
    color: var(--color-primary-700);
}
.shortcut-btn--blue:hover,
.shortcut-btn--blue:active {
    background: var(--color-primary-100);
    border-color: var(--color-primary-300);
}
.shortcut-btn--blue .shortcut-arrow { color: var(--color-primary-400); }

/* Amber */
.shortcut-btn--amber {
    background: var(--color-accent-50);
    border-color: var(--color-accent-200);
    color: #92400E;
}
.shortcut-btn--amber:hover,
.shortcut-btn--amber:active {
    background: var(--color-accent-100);
    border-color: var(--color-accent-400);
}
.shortcut-btn--amber .shortcut-arrow { color: var(--color-accent-400); }

/* Green */
.shortcut-btn--green {
    background: var(--color-success-50);
    border-color: #A7F3D0;
    color: #065F46;
}
.shortcut-btn--green:hover,
.shortcut-btn--green:active {
    background: var(--color-success-100);
    border-color: #6EE7B7;
}
.shortcut-btn--green .shortcut-arrow { color: #34D399; }

/* Violet */
.shortcut-btn--violet {
    background: #F5F3FF;
    border-color: #DDD6FE;
    color: #5B21B6;
}
.shortcut-btn--violet:hover,
.shortcut-btn--violet:active {
    background: #EDE9FE;
    border-color: #C4B5FD;
}
.shortcut-btn--violet .shortcut-arrow { color: #A78BFA; }

/* Rose */
.shortcut-btn--rose {
    background: #FFF1F2;
    border-color: #FECDD3;
    color: #9F1239;
}
.shortcut-btn--rose:hover,
.shortcut-btn--rose:active {
    background: #FFE4E6;
    border-color: #FDA4AF;
}
.shortcut-btn--rose .shortcut-arrow { color: #FB7185; }

/* ── 비활성 (링크 없음) ───────────────────────────────────── */
.shortcut-btn--disabled {
    background: var(--color-gray-50);
    border-color: var(--color-gray-200);
    color: var(--color-gray-400);
    cursor: not-allowed;
}

.shortcut-btn--disabled:hover,
.shortcut-btn--disabled:active {
    background: var(--color-gray-50);
    border-color: var(--color-gray-200);
    transform: none;
}

/* ── 안내 힌트 ────────────────────────────────────────────── */
.shortcut-hint {
    display: block;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-top: calc(-1 * var(--space-1));
    margin-bottom: var(--space-1);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .shortcuts-card {
        padding: var(--space-4);
    }

    .shortcut-btn {
        padding: var(--space-3);
        font-size: var(--text-xs);
    }
}