.profile-dropdown { // ── 아바타 트리거 버튼 ───────────────────────────── &__trigger { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; // ── 비로그인 수정자 ────────────────────────── &--guest { background: none; font-size: 1rem; font-weight: 500; color: var(--text-head); cursor: pointer; white-space: nowrap; &:hover { background: none; text-decoration: underline; font-weight: 700; } > span { width: clamp(1.25rem, 3vw, 1.75rem); } } } &__fallback { font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); background: var(--bg-elevated); &:hover { border: 1px solid var(--border-strong); } } // ── 드롭다운 컨텐츠 ────────────────────────────── &__content { width: auto; } // ── 프로필 헤더 영역 ───────────────────────────── &__header { display: flex; align-items: center; gap: 12px; padding: 12px; } &__user-info { flex: 1; min-width: 0; } &__name { font-size: 0.9375rem; font-weight: 600; color: var(--fg-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &__balance { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; &-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-blue); color: #fff; font-size: 0.5625rem; font-weight: 700; flex-shrink: 0; } > span:last-child { color: var(--text-primary); } } &__withdraw { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; &-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 0.6875rem; flex-shrink: 0; } } // ── 메뉴 아이콘 ────────────────────────────────── &__menu-icon { width: 20px; text-align: center; font-size: 1rem; flex-shrink: 0; } // ── 위험 액션 (로그아웃) ────────────────────────── &__danger { color: var(--color-danger); &:focus { color: var(--color-danger); background: var(--color-danger-bg); } } // ── 비로그인 링크 ──────────────────────────────── &__guest { display: flex; align-items: center; gap: 8px; white-space: nowrap; } &__guest-link { font-size: 0.875rem; font-weight: 500; color: var(--text-head); text-decoration: none; &:hover { text-decoration: underline; } } &__guest-divider { font-size: 0.75rem; color: var(--text-head); opacity: 0.5; } }