/*
 * v7/widgets/post/view/business-card.css — 명함카드 위젯 스타일 (모던/심플)
 *
 * 디자인 원칙
 *  - 본문 가독성을 해치지 않도록 시각적 무게를 최소화하되, 명함임을 인지할 수 있게 카드 룩 유지
 *  - 흰 배경 + 얇은 #e2e8f0 테두리 + 10px 라운드
 *  - 연락처는 pill 형태 chip — 호버 시 채널별 은은한 브랜드 컬러
 *  - 댓글 컨텍스트는 한층 더 작고 촘촘하게
 *  - 위/아래 본문과의 분리는 상단 1px 디바이더로
 */

.business-card {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

.business-card--comment {
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
}

.business-card__card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.business-card__card:hover {
    background: #fafafa;
    border-color: #cbd5e1;
}

.business-card--comment .business-card__card {
    padding: 0.625rem 0.75rem;
    gap: 0.625rem;
}

.business-card__logo-link {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

.business-card__logo {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.business-card--comment .business-card__logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
}

.business-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.4;
}

.business-card--comment .business-card__body {
    font-size: 0.75rem;
    gap: 0.1875rem;
}

.business-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.business-card__name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    letter-spacing: -0.01em;
}

.business-card--comment .business-card__name {
    font-size: 0.8125rem;
}

.business-card__name a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.business-card__name a:hover {
    color: #0f172a;
}

.business-card__name i {
    color: #94a3b8;
    font-size: 0.8em;
}

/* 심사중 — 연한 노란톤 pill 뱃지 */
.business-card__badge--pending {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    color: #92400e;
    background: #fef3c7;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.business-card__tagline {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-card--comment .business-card__tagline {
    font-size: 0.75rem;
}

/*
 * 연락처 chips — 얇은 테두리의 pill 형태
 * 기본: 흰 배경 + #e2e8f0 테두리
 * 호버: 채널별 은은한 브랜드 컬러
 */
.business-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.business-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    font-size: 0.75rem;
    text-decoration: none;
    line-height: 1.3;
    max-width: 100%;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.business-card--comment .business-card__chip {
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    gap: 0.3125rem;
}

.business-card__chip i {
    font-size: 0.75rem;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.business-card__chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-card__chip:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.business-card__chip:hover i {
    color: #64748b;
}

/* 전화/모바일 — 은은한 그린 */
.business-card__chip--phone:hover,
.business-card__chip--mobile:hover {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}
.business-card__chip--phone:hover i,
.business-card__chip--mobile:hover i {
    color: #16a34a;
}

/* 카카오톡 — 은은한 옐로우 */
.business-card__chip--kakao:hover {
    background: #fef9c3;
    border-color: #fde047;
    color: #713f12;
}
.business-card__chip--kakao:hover i {
    color: #ca8a04;
}

/* 텔레그램 — 은은한 블루 */
.business-card__chip--telegram:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}
.business-card__chip--telegram:hover i {
    color: #2563eb;
}

/* 주소 — 한 줄 차지 + 은은한 레드 (구글맵 연상) */
.business-card__chip--address {
    flex-basis: 100%;
}

.business-card__chip--address:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
.business-card__chip--address:hover i {
    color: #dc2626;
}

/*
 * 내 업소 수정 / 업소정보 표시하기 — ghost 버튼 스타일
 */
.business-card__edit-link,
.business-card__register-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    align-self: flex-start;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, border-style 0.15s ease;
}

/* 단독(카드 없이) 표시되는 등록 버튼은 위 여백 0 */
.business-card > .business-card__register-link {
    margin-top: 0;
}

.business-card__edit-link:hover,
.business-card__register-link:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    border-style: solid;
    color: #1e293b;
}

.business-card__edit-link i,
.business-card__register-link i {
    color: #94a3b8;
    font-size: 0.75rem;
}

.business-card__edit-link:hover i,
.business-card__register-link:hover i {
    color: #64748b;
}

@media (max-width: 640px) {
    .business-card__card {
        padding: 0.625rem 0.75rem;
        gap: 0.625rem;
    }

    .business-card__logo {
        width: 40px;
        height: 40px;
    }

    .business-card__name {
        font-size: 0.875rem;
    }

    .business-card__chips {
        gap: 0.3125rem;
    }

    .business-card__chip {
        padding: 0.1875rem 0.5rem;
        font-size: 0.6875rem;
    }
}