/* ==================== 배듬 카드 ==================== */

.badumer-business-card {
    background: var(--card-bg, var(--color-bg-card, #ffffff));
    border-radius: var(--card-radius, var(--radius-lg, 16px));
    border: 1px solid var(--card-border, var(--color-border-light, #e5e7eb));
    box-shadow: var(--card-shadow, var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.04)));
    transition: all var(--transition-smooth);
    overflow: hidden;
    position: relative;
    font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.badumer-card-style-layer {
    width: 100%;
    height: 100%;
}

.badumer-card-graphics-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.badumer-business-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.badumer-card-inner {
    padding: var(--card-padding, var(--spacing-lg, 24px));
}

/* 모바일: 패딩 조정 */
@media (max-width: 767px) {
    .badumer-card-inner {
        padding: var(--spacing-md, 16px);
    }
}

.badumer-card-header {
    display: flex;
    gap: var(--element-gap, var(--spacing-md, 16px));
    margin-bottom: var(--section-gap, var(--spacing-lg, 16px));
}

.badumer-avatar-section {
    flex-shrink: 0;
    width: var(--avatar-size, 64px);
    height: var(--avatar-size, 64px);
}

.badumer-avatar {
    width: var(--avatar-size, 64px);
    height: var(--avatar-size, 64px);
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-border-light);
}

.badumer-avatar-placeholder {
    width: var(--avatar-size, 64px);
    height: var(--avatar-size, 64px);
    border-radius: var(--radius-full, 50%);
    background: var(--avatar-bg, var(--accent-primary, #4f6ef7));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--avatar-text, #ffffff);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    border: 2px solid var(--card-border, var(--color-border-light, #e5e7eb));
}

.badumer-identity-section {
    flex: 1;
    min-width: 0;
}

.badumer-name {
    font-size: var(--name-size, var(--font-size-xl, 20px));
    font-weight: var(--name-weight, 700);
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary, var(--color-text-main, #111827));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badumer-name-multi {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.badumer-intro {
    font-size: var(--intro-size, var(--font-size-sm, 14px));
    font-weight: var(--intro-weight, 400);
    color: var(--text-secondary, var(--color-text-sub, #6b7280));
    line-height: var(--line-height-relaxed);
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.badumer-intro-undefined {
    color: var(--color-text-light);
    font-style: italic;
}

.badumer-portfolios-section {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--element-gap, var(--spacing-md, 16px));
    margin-bottom: var(--section-gap, var(--spacing-lg, 16px));
    padding-bottom: var(--section-gap, var(--spacing-lg, 16px));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 목록 카드: 포트폴리오 유무와 관계없이 높이 통일 */
.badumer-business-card[data-variant="list"] .badumer-portfolios-section {
    min-height: 28px;
}

.badumer-business-card[data-variant="list"] .badumer-portfolios-placeholder {
    align-items: center;
}

.badumer-business-card[data-variant="list"] .badumer-portfolio-placeholder-text {
    display: block;
    width: 100%;
    height: 28px;
}

.badumer-portfolios-wrap {
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.badumer-portfolios-compact {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.badumer-portfolios-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.badumer-portfolios-scroll:focus {
    outline: 2px solid var(--accent-primary, #4f6ef7);
    outline-offset: 2px;
}

.badumer-portfolio-button {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs, 4px) var(--spacing-md, 16px);
    font-size: clamp(10px, 2.6vw, var(--font-size-xs));
    background: var(--chip-bg, var(--color-bg-subtle, #ffffff));
    color: var(--chip-text, var(--color-text-main, #111827));
    border: 1px solid var(--chip-border, var(--color-border, #e5e7eb));
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-base);
    min-height: 28px;
    cursor: pointer;
    font-family: inherit;
    /* 버튼 기본 스타일 리셋 */
    margin: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.badumer-portfolio-compact {
    padding: 4px 12px;
    font-size: clamp(9px, 2.4vw, 11px);
    min-height: 28px;
}

.badumer-portfolio-button:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.badumer-portfolio-button-static {
    cursor: default;
}

.badumer-contact-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 12px);
}

.badumer-contact-stack {
    flex-direction: column;
    align-items: flex-start;
}

.badumer-email-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badumer-email-inline {
    font-size: var(--font-size-sm);
    color: var(--text-secondary, var(--color-text-sub, #6b7280));
    text-decoration: none;
    word-break: break-all;
    line-height: 1.4;
}

.badumer-email-inline:hover {
    color: var(--color-primary);
}

/* 이메일 빈 상태 */
.badumer-email-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-sub, #6b7280);
    font-style: italic;
    opacity: 0.7;
    line-height: 1.4;
}

/* QR 코드 설명 텍스트 */
.badumer-qr-description {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
}

.badumer-qr-description-line1 {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-main, #1f2937);
    font-weight: 400;
}

.badumer-qr-description-line2 {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-sub, #9ca3af);
    font-weight: 400;
}

.badumer-qr-wrapper {
    flex-shrink: 0;
}

.badumer-qr-wrapper-inline {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badumer-qr-right {
    /* 기본값: 우측 하단 */
}

.badumer-qr-inline {
    /* Email과 같은 줄 */
}

.badumer-qr-bottom {
    /* 하단 중앙 */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* QR 코드 빈 상태 */
.badumer-qr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-bg-subtle, #f9fafb);
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    opacity: 0.6;
}

.badumer-qr-empty-icon {
    font-size: 20px;
    color: var(--color-text-sub, #6b7280);
    line-height: 1;
    margin-bottom: 2px;
}

.badumer-qr-empty-text {
    font-size: 8px;
    color: var(--color-text-sub, #6b7280);
    line-height: 1;
    text-align: center;
}

.badumer-card-divider {
    height: 1px;
    background: var(--card-border, var(--color-border-light, #e5e7eb));
    margin-bottom: var(--section-gap, var(--spacing-lg, 16px));
}

.badumer-card-graphics-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}