/* 🚀 전문가 상세 페이지 - 공통 컴포넌트 기반 구조 */

/* 🚫 전문가 상세 페이지에서 기존 헤더 요소들 숨김 */
body:has(.as-navbar) .scroll-progress,
body:has(.as-navbar) .notification-bar,
body:has(.as-navbar) .header {
    display: none !important;
}

/* 📱 전문가 상세 페이지에서만 as-navbar 기능적 변경 */
body:has(.as-navbar) .as-navbar {
    position: fixed; /* sticky → fixed로 변경 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; /* 최상위 레이어 */
    width: min(100%, var(--container-max)); /* 600px 제한 */
}

/* 📱 as-navbar가 있을 때 page-section 상단 여백 조정 */
body:has(.as-navbar) .page-section {
    padding-top: calc(44px + var(--space-16-20));
}

@media (max-width: 600px) {
    body:has(.as-navbar) .as-navbar {
    width: 100%;
        left: 0;
        transform: none;
    }
}
.app-container {
    border-radius: 0px;
    overflow: visible; /* sticky 탭이 정상 동작하도록 부모 overflow 해제 */
}

/* 견적 정보 카드 */
.vendor-quote-card {
    background: var(--primary-10);
    border-radius: var(--radius-md);
    padding: var(--space-16-24) var(--space-16-24);
    margin: var(--space-20-24) var(--space-16-20) var(--space-16-20) var(--space-16-20);
}

.vendor-quote-title {
    font-weight: 700;
    font-size: var(--fs-16-20);
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0 0 var(--space-16-20) 0;
}

.vendor-quote-details {
    margin-bottom: var(--space-16-20);
}

.vendor-quote-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-12-16);
}

.vendor-quote-item:last-child {
    margin-bottom: 0;
}


.vendor-quote-label {
    font-weight: 500;
    font-size: var(--fs-13-17);
    line-height: 1.3;
    color: var(--text-primary);
    min-width: 80px;
    margin-right: var(--space-4-8);
}

.vendor-quote-value {
    font-weight: 400;
    font-size: var(--fs-13-17);
    line-height: 1.3;
    color: var(--text-primary);
}

.vendor-quote-price {
    font-weight: 600;
    color: var(--primary);
}

.vendor-quote-confirm-btn {
    width: 100%;
    background: var(--primary);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-8-12) 0;
    font-weight: 700;
    font-size: var(--fs-14-18);
    line-height: 1.4;
    cursor: pointer;
    transition: var(--transition-fast);
}

.vendor-quote-confirm-btn:hover {
    opacity: 0.9;
}

/* 견적 상세 정보 토글 */
.vendor-quote-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4-8);
    padding: var(--space-4-8) 0;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--text-secondary);
}

.vendor-quote-toggle:hover {
    color: var(--text-primary);
}


.vendor-quote-toggle-text {
    font-size: var(--fs-13-17);
    font-weight: 500;
    line-height: 1.4;
}

.vendor-quote-toggle-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* 접힐 수 있는 상세 정보 영역 */
.vendor-quote-details-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.vendor-quote-details-collapsible.expanded {
    max-height: 500px; /* 충분히 큰 값 */
    opacity: 1;
}

/* 접기 버튼 (펼쳐진 상태에서만 표시) */
.vendor-quote-toggle-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4-8);
    padding: var(--space-8-12) 0;
    margin-top: var(--space-8-12);
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--text-secondary);
}

.vendor-quote-toggle-collapse:hover {
    color: var(--text-primary);
}

/* 디바이더 */
.vendor-divider {
    height: 6px;
    background: var(--bg-tertiary);
    margin: 0;
}

/* 전문가 프로필 섹션 */
.vendor-profile-section {
    padding: var(--space-24-32) var(--space-16-24);
}

.vendor-profile-image-container {
    width: clamp(80px, 25vw, 110px);
    height: clamp(80px, 25vw, 110px);
    border-radius: var(--radius-md);
    background: var(--border-light);
    flex-shrink: 0;
    overflow: hidden;
}

.vendor-profile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vendor-profile-badges {
    display: flex;
    gap: var(--space-6-10);
}

.vendor-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px var(--space-8-12);
    border-radius: var(--radius-lg);
}

.vendor-badge-verified {
    background: var(--primary-10);
}

.vendor-badge-premium {
    background: var(--primary-20);
}

.vendor-badge-icon {
    width: 12px;
    height: 12px;
}

.vendor-badge-text {
    font-weight: 600;
    font-size: var(--fs-11-14);
    line-height: 1.38;
    color: var(--success);
}

.vendor-badge-premium .vendor-badge-text {
    color: var(--primary);
}

/* 서비스 태그 */
.vendor-services {
    display: flex;
    gap: var(--space-6-10);
}

.vendor-service-tag {
    padding: 3px var(--space-6-10);
    background: var(--bg-primary);
    border: 1px solid var(--text-tertiary);
    border-radius: var(--radius-sm);

    font-weight: 600;
    font-size: var(--fs-12-16);
    line-height: 1.5;
    color: var(--text-tertiary);
}

/* 전문가 통계 - 테이블 형태 */
.vendor-stats {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0 var(--space-4-8);
}

.vendor-stat-item {
    display: flex;
    align-items: center;
    padding: var(--space-4-8) 0;
}

.vendor-stat-item:last-child {
    border-bottom: none;
}

.vendor-stat-icon {
    width: 15px;
    height: 15px;
    margin-right: var(--space-6-10);
    flex-shrink: 0;
}

.vendor-stat-label {
    font-weight: 400;
    font-size: var(--fs-14-18);
    line-height: 1.3;
    color: var(--text-secondary);
    min-width: 94px;
    margin-right: var(--space-4-8);
}

.vendor-stat-value {
    font-weight: 500;
    font-size: var(--fs-14-18);
    line-height: 1.3;
    color: var(--text-primary);
}

/* 전문가 소개 */
.vendor-intro {
    margin: 0 0 var(--space-4-8) 0;
    padding: var(--space-16-20) var(--space-12-16);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.vendor-intro-text {
    font-size: var(--fs-14-18);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    word-break: keep-all;
    word-wrap: break-word;
}

/* 탭 네비게이션 */
.vendor-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
    padding: 0 var(--space-16-24);
    gap: var(--space-8-12);
    position: -webkit-sticky;
    position: sticky;
    top: calc(44px + var(--space-16-20));
    z-index: 30; 
    width: 100%;
    box-sizing: border-box; 
}

.vendor-tab {
    background: none;
    border: none;
    padding: var(--space-16-20) var(--space-8-12);
    font-weight: 700;
    font-size: var(--fs-14-18);
    line-height: 1.4;
    color: var(--text-tertiary);
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
    width: auto;
    white-space: nowrap;
    font-family: "Pretendard";
    letter-spacing: -0.02em;
}

/* 탭 카운트 배지 (연한 회색 배경 + text-secondary) */
.vendor-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 2px var(--space-4-8);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius-xs);
    font-size: var(--fs-12-16);
    font-weight: 500;
    line-height: 1.2;
}

.vendor-tab-active {
    color: var(--text-primary);
}

.vendor-tab-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-primary);
}

/* 섹션 콘텐츠 */
.vendor-section {
    padding: var(--space-24-32) var(--space-16-24) var(--space-6-10) var(--space-16-24);
    scroll-margin-top: 124px; 
}

/* 고객 후기 섹션 */
.vendor-reviews-header {
    margin-bottom: var(--space-32-40);
}

.vendor-reviews-summary {
    display: flex;
    align-items: center;
    gap: var(--space-6-10);
    margin-bottom: var(--space-16-24);
}

.vendor-reviews-title {
    font-weight: 700;
    font-size: var(--fs-18-22);
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0;
}

.vendor-reviews-count {
    background: var(--primary);
    color: var(--bg-primary);
    padding: 2px var(--space-4-8);
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: var(--fs-12-16);
    line-height: 1.4;
    min-width: 24px;
    text-align: center;
}

.vendor-badges-count {
    background: var(--primary);
    color: var(--bg-primary);
    padding: 2px var(--space-4-8);
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: var(--fs-12-16);
    line-height: 1.4;
    min-width: 24px;
    text-align: center;
}

.vendor-reviews-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.vendor-rating-stars {
    display: flex;
    gap: 4px; /* Figma 기준 3.67px */
}

.vendor-star {
    width: calc(3.5vw + 10px);  /* 컨테이너 폭 기반 동적 크기 - 축소 */
    height: calc(3.3vw + 9px); 
    max-width: 28px;  /* 최대 크기 제한 - 축소 */
    max-height: 27px;
    min-width: 18px;  /* 최소 크기 보장 - 축소 */
    min-height: 17px;
    display: inline-block;
}

.vendor-star-svg {
    width: 100%;
    height: 100%;
}

.vendor-rating-score {
    font-size: var(--fs-18-22);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

.vendor-reviews-note {
    font-weight: 400;
    font-size: var(--fs-11-14);
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

/* 후기 아이템 */
.vendor-review-item {
    margin-bottom: var(--space-20-28);
}

.vendor-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8-12);
}

.vendor-review-location {
    font-weight: 600;
    font-size: var(--fs-14-18);
    line-height: 1.4;
    color: var(--text-primary);
}

.vendor-review-date {
    font-weight: 400;
    font-size: var(--fs-12-16);
    line-height: 1.4;
    color: var(--text-secondary);
}

.vendor-review-rating {
    display: flex;
    gap: 3px;
    margin-bottom: var(--space-12-16);
}

.vendor-review-star {
    width: clamp(13px, 3.5vw, 16px);
    height: clamp(12px, 3.5vw, 15px);
}

.vendor-review-text {
    font-weight: 400;
    font-size: var(--fs-13-17);
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0 0 var(--space-16-20) 0;
}

.vendor-review-images {
    display: flex;
    gap: 8px;
}

.vendor-review-image {
    width: 80px;
    height: 80px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vendor-review-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vendor-review-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 더보기 버튼 */
.vendor-reviews-more-btn {
    width: 100%;
    background: none;
    border: 1px solid #0166FF;
    border-radius: 8px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;

    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    color: var(--primary);
    transition: background-color 0.2s, color 0.2s;
}

.vendor-reviews-more-btn:hover {
    background: var(--primary);
    color: var(--bg-primary);
}

.vendor-more-icon {
    width: 15px;
    height: 15px;
}

/* 리뷰 숨김 클래스 */
.vendor-review-hidden {
    display: none;
}

/* 페이지네이션 숨김 (우선순위 보장) */
.vendor-reviews-pagination.vendor-review-hidden {
    display: none;
}

/* 리뷰 구분선 */
.vendor-review-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 20px 0;
}

/* 페이지네이션 */
.vendor-reviews-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.pagination-btn {
    background: none;
    border: none;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    opacity: 0.8;
}

.pagination-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
}

.pagination-arrow {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(1228%) hue-rotate(218deg) brightness(95%) contrast(101%);
    transition: filter 0.2s;
}

.pagination-btn:disabled .pagination-arrow {
    filter: brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(23%) hue-rotate(314deg) brightness(98%) contrast(92%);
}

.pagination-arrow-left {
    transform: rotate(180deg);
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-number {
    background: none;
    border: none;
    padding: 8px 4px;
    font-size: 16px;
    font-weight: 400;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s;
    min-width: auto;
}

.pagination-number:hover {
    color: var(--primary);
}

.pagination-number.active {
    color: var(--primary);
    font-weight: 600;
}

.pagination-dots {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 4px;
}

/* 전문가 정보 섹션 */
.vendor-info-header {
    margin-bottom: 20px;
}

.vendor-info-title {
    font-weight: 700;
    font-size: var(--fs-18-22);
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0;
}

.vendor-info-subtitle {
    font-size: var(--fs-14-18);
    color: var(--text-secondary);
    margin: var(--space-4-8) 0 0 0;
    line-height: 1.4;
}

/* 전문가 정보 이미지 갤러리 - PHP 파일에서 통합 */
.vendor-info-images-container {
    width: 100%;
    margin-bottom: 20px;
}

.vendor-info-images {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox용 스크롤바 숨김 */
}

/* 스크롤바 숨김 (WebKit 브라우저) */
.vendor-info-images::-webkit-scrollbar {
    display: none;
}

/* 각 이미지 아이템 - 동적 크기 (2.8개 표시, 최대 148px) */
.vendor-info-image {
    width: calc((100% - 24px) / 2.8);  /* 컨테이너 폭 기준 2.8개 표시 (gap 12px * 2 = 24px) */
    max-width: 148px;  /* 최대 크기 제한 */
    aspect-ratio: 1;  /* 정사각형 비율 유지 */
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #fafafa;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vendor-info-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vendor-info-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* 칸을 꽉 채우되 중심 크롭 (잘린 느낌 최소화) */
    display: block;
}

.vendor-info-description {
    margin-bottom: 28px;
}

.vendor-info-description p {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
}

.vendor-info-more {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 16px 0;
    border-top: 1px solid #E3E5EA;
}

.vendor-info-more-icon {
    width: 16px;
    height: 16px;
}

.vendor-info-more-text {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-primary);
    flex: 1;
}

.vendor-info-more-arrow {
    width: 20px;
    height: 20px;
}

/* 모달 관련 스타일 - PHP 파일에서 통합 */
/* 모달 배경 */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0); /* 배경색 */
    background-color: rgba(0, 0, 0, 0.8); /* 반투명 배경 */
    display: none;
}

/* 모달 콘텐츠 */
.modal-content-container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

/* 모달 안의 이미지 */
.modal-content {
    width: 100%;
    max-height: 80vh;
    border-radius: 8px;
}

/* 닫기 버튼 */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 모달 밖 클릭시 닫기 효과 */
.modal:active {
    display: block;
}

/* 페이지네이션 스타일 - PHP 파일에서 통합 (기존 스타일 덮어쓰기) */
.vendor-review-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-20-28);
    margin-bottom: var(--space-16-24);
    gap: var(--space-4-8);
}

.vendor-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--space-8-12);
    background: var(--bg-primary);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-14-18);
    font-weight: 500;
    transition: all 0.2s ease;
}

.vendor-page-link:hover {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.vendor-page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* 🎯 PHP 파일에서 통합된 스타일 (디자인 토큰 적용) */

/* 프로필 헤더 재정의 */
.vendor-profile-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12-16);
    margin-bottom: var(--space-24-32);
    padding: var(--space-24-32) var(--space-16-24) 0 var(--space-16-24);
}

/* 프로필 정보 영역 */
.vendor-profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 전문가 이름 재정의 */
.vendor-profile-name {
    font-size: var(--fs-22-28);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* 평점 정보 */
.vendor-rating-info {
    display: flex;
    align-items: center;
    gap: var(--space-4-8);
    margin: 2px 0 0 0;
}

.vendor-rating-display {
    display: flex;
    align-items: center;
    gap: var(--space-4-8);
}

.vendor-star-icon {
    width: 20px;
    height: 20px;
}

.vendor-rating-count {
    font-size: var(--fs-16-20);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* 완료 건수 및 경력 */
.vendor-completion {
    display: flex;
    align-items: center;
    gap: var(--space-4-8);
    margin: 0;
}

.vendor-completion-count,
.vendor-experience {
    font-size: var(--fs-14-18);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
}

.vendor-info-separator {
    font-size: var(--fs-13-17);
    color: var(--text-tertiary);
}

/* 서비스 태그 위치 조정 */
.vendor-services {
    margin: var(--space-16-20) 0 0 0;
}

/* 파트너 정보 섹션 */
.vendor-partner-info-section {
    margin-top: var(--space-8-12);
}

.vendor-partner-info-header {
    margin-bottom: var(--space-8-12);
}

.vendor-partner-info-title {
    font-size: var(--fs-16-20);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
}

/* 뱃지 컨테이너 재정의 - 2줄 제한 + 더보기 시스템 */
.vendor-expert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4-8);
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* 펼쳐진 상태 */
.vendor-expert-badges.expanded {
    cursor: default;
}

/* +숫자 더보기 뱃지 스타일 */
.vendor-badge-more-count {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px var(--space-6-10);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-14-18);
    font-weight: 500;
    color: var(--primary);
    background: transparent;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
    min-width: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 1;
    transform: scale(1);
}

.vendor-badge-more-count:hover {
    background: var(--primary);
    color: var(--bg-primary);
}

.vendor-more-text {
    font-size: var(--fs-12-16);
    font-weight: 600;
}

/* 숨겨진 뱃지들 - 초기 상태 */
.vendor-expert-badge.hidden {
    display: none;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
}

/* 펼쳐진 상태에서 모든 뱃지 표시 */
.vendor-expert-badges.expanded .vendor-expert-badge.hidden {
    display: flex;
    animation: slideInFade 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 펼쳐진 상태에서 +숫자 박스 숨김 (부드러운 페이드아웃) */
.vendor-expert-badges.expanded .vendor-badge-more-count {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: all 0.3s ease;
}

/* 접힌 상태로 돌아갈 때 +숫자 박스 표시 */
.vendor-expert-badges:not(.expanded) .vendor-badge-more-count {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition: all 0.3s ease 0.2s; /* 0.2s 딜레이로 자연스럽게 나타남 */
}

/* 드롭다운 애니메이션 - 순차적 등장 효과 */
@keyframes slideInFade {
    0% {
        opacity: 0;
        transform: translateY(-15px) scale(0.9);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-5px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 각 뱃지별 딜레이 적용 (순차적 등장) */
.vendor-expert-badges.expanded .vendor-expert-badge.hidden:nth-child(13) { animation-delay: 0.05s; }
.vendor-expert-badges.expanded .vendor-expert-badge.hidden:nth-child(14) { animation-delay: 0.1s; }
.vendor-expert-badges.expanded .vendor-expert-badge.hidden:nth-child(15) { animation-delay: 0.15s; }
.vendor-expert-badges.expanded .vendor-expert-badge.hidden:nth-child(16) { animation-delay: 0.2s; }
.vendor-expert-badges.expanded .vendor-expert-badge.hidden:nth-child(17) { animation-delay: 0.25s; }
.vendor-expert-badges.expanded .vendor-expert-badge.hidden:nth-child(18) { animation-delay: 0.3s; }
.vendor-expert-badges.expanded .vendor-expert-badge.hidden:nth-child(19) { animation-delay: 0.35s; }
.vendor-expert-badges.expanded .vendor-expert-badge.hidden:nth-child(20) { animation-delay: 0.4s; }

/* 프리미엄 뱃지 스타일 (우수 파트너) */
.vendor-premium-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px var(--space-8-12);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-14-18);
    font-weight: 400;
    line-height: 1.3;
    color: var(--primary);
    background: transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 일반 뱃지 스타일 재정의 */
.vendor-expert-badge {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px var(--space-6-10);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--fs-14-18);
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
}

/* 뱃지 아이콘 통일 색상 */
.vendor-badge-icon {
    width: 10px;
    height: 10px;
}

/* 전문가 소개 헤더 - 기본 스타일 */
.vendor-intro-header {
    margin-bottom: var(--space-8-12);
}

.vendor-intro-title {
    font-size: var(--fs-16-20);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin: var(--space-20-24) 0 var(--space-6-10) 0;
}

/* 전문가 액션 버튼 영역 - 기본 스타일 */
.vendor-expert-actions {
    display: flex;
    gap: var(--space-8-12);
    margin: var(--space-16-20) 0 0 0;
    width: 100%;
}

/* 채팅 문의 버튼 (왼쪽 - 아웃라인) */
.vendor-expert-chat-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6-10);
    padding: var(--space-8-12) var(--space-16-20);
    background: none;
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    font-size: var(--fs-15-19);
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary);
    cursor: pointer;
    transition: var(--transition-fast);
    min-height: 48px;
}

.vendor-expert-chat-btn:hover {
    background-color: var(--primary-10);
}

/* 바로 예약 버튼 (오른쪽 - 채워진 스타일) */
.vendor-expert-confirm-btn {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6-10);
    padding: var(--space-8-12) var(--space-16-20);
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    font-size: var(--fs-15-19);
    font-weight: 500;
    line-height: 1.4;
    color: var(--bg-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    min-height: 48px;
}

.vendor-expert-confirm-btn:hover {
    opacity: 0.9;
}

/* 버튼 아이콘 공통 스타일 */
.vendor-btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* 전체화면 이미지 모달 */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-modal.show {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

.image-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-20-24) var(--space-16-20);
    position: relative;
    z-index: 10001;
    flex-shrink: 0;
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    background: var(--bg-primary);
}

.image-modal-counter {
    font-size: var(--fs-16-20);
    font-weight: 600;
    color: var(--text-secondary);
}

.image-modal-close {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: var(--transition-fast);
    position: absolute;
    top: 50%;
    right: var(--space-16-20);
    transform: translateY(-50%);
}

.image-modal-close:hover {
    background-color: var(--bg-tertiary);
}

.image-modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary);
}

.image-modal-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    background: var(--bg-primary);
}

.image-modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin-bottom: var(--space-8-12);
}

.image-modal-prev,
.image-modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    font-size: 32px;
    color: var(--bg-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    z-index: 10001;
}

.image-modal-prev {
    left: var(--space-16-20);
}

.image-modal-next {
    right: var(--space-16-20);
}

.image-modal-prev:hover,
.image-modal-next:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.image-modal-prev:disabled,
.image-modal-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}




/* 📱 소형 모바일 (360px 이하) - 통합된 반응형 스타일 */
@media (max-width: 360px) {
    .vendor-star-icon {
        width: 18px;
        height: 18px;
    }
    
    .vendor-completion {
        margin: -3px 0 0 0;
    }
    
    /* 파트너 정보 섹션 */
    .vendor-partner-info-title {
        font-size: var(--fs-15-19);
        line-height: 1.4;
        margin: 0;
    }
    
    /* 뱃지 시스템 */
    .vendor-expert-badges {
        gap: var(--space-4-8);
    }
    
    .vendor-premium-badge {
        padding: 2px var(--space-6-10);
        font-size: var(--fs-12-16);
        line-height: 1.4;
        font-weight: 400;
    }
    
    .vendor-expert-badge {
        padding: 2px var(--space-4-8);
        font-size: var(--fs-12-16);
        line-height: 1.4;
    }
    
    .vendor-badge-icon {
        width: 8px;
        height: 8px;
    }
    
    /* 전문가 액션 버튼 영역 */
    .vendor-expert-actions {
        gap: var(--space-6-10);
        margin: var(--space-16-20) 0 0 0;
        width: 100%;
    }
    
    .vendor-expert-chat-btn,
    .vendor-expert-confirm-btn {
        padding: var(--space-8-12) var(--space-8-12);
        font-size: var(--fs-14-18);
        min-height: 44px;
    }
    
    .vendor-btn-icon {
        width: 16px;
        height: 16px;
    }
    
    /* 전문가 소개 헤더 */
    .vendor-intro-header {
        margin: var(--space-16-20) 0 var(--space-4-8) 0;
    }
    
    /* 이미지 모달 */
    .image-modal-header {
        padding: var(--space-20-24) var(--space-16-20);
    }
    
    .image-modal-counter {
        font-size: var(--fs-15-19);
    }
    
    .image-modal-close {
        width: 36px;
        height: 36px;
        font-size: 28px;
    }
    
    .image-modal-prev,
    .image-modal-next {
        width: 44px;
        height: 44px;
        font-size: 28px;
    }
    
    .image-modal-prev {
        left: var(--space-16-20);
    }
    
    .image-modal-next {
        right: var(--space-16-20);
    }
    
    .image-modal-container {
        padding: 0;
    }
}

@media (min-width: 600px) {

    .vendor-quote-label {
        margin-right: 24px;
    }
    
    .vendor-profile-name {
        margin: 0;
    }
    
    .vendor-badge-text {
        font-size: 12px;
    }
    
    .vendor-service-tag {
        font-size: 14px;
    }
    
    .vendor-stat-item {
        padding: 7px 0;
    }

    .vendor-stat-icon {
        width: 16px;
        height: 16px;
    }

    .vendor-stat-label {
        font-size: 16px;
        min-width: 100px;
    }
    
    .vendor-stat-value {
        font-size: 16px;
    }
    
    .vendor-reviews-summary {
        gap: 8px;
    }

    .vendor-reviews-count {
        font-size: 16px;
        padding: 2px 6px;
    }
    
    .vendor-rating-stars {
        gap: 5px;
    }
    
    .vendor-reviews-more-btn {
        font-size: 16px;
        padding: 10px 0;
    }

    .vendor-more-icon {
        width: 16px;
        height: 16px;
    }
    
    .vendor-review-divider {
        margin: 18px 0;
    }
    
    .vendor-reviews-pagination {
        margin-top: 18px;
    }
    
    .pagination-arrow {
        width: 18px;
        height: 18px;
    }
    
    .pagination-number {
        font-size: 18px;
        padding: 8px 4px;
    }
    
    .pagination-numbers {
        gap: 14px;
    }
    
    /* 태블릿/데스크탑에서 이미지 크기 확대 - 2.5개 표시 유지 */
    .vendor-info-image {
        width: calc((100% - 32px) / 2.8);  /* gap 16px * 2 = 32px */
    }
    
    .vendor-info-images {
        gap: 10px;
    }

    .vendor-info-description p {
        font-size: 15px;
    }
    
    .vendor-info-more-text {
        font-size: 18px;
    }
    
    .vendor-info-more-icon {
        width: 18px;
        height: 18px;
    }
    
    .vendor-review-image {
        width: 90px;
        height: 90px;
    }
    
    .vendor-review-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    /* 🎯 통합된 데스크탑 스타일 (PHP에서 이동) */
    
    /* 파트너 정보 섹션 - 데스크탑 */
    .vendor-partner-info-title {
        font-size: var(--fs-17-21);
        line-height: 1.4;
    }
    
    /* 뱃지 시스템 - 데스크탑 */
    .vendor-expert-badges {
        gap: var(--space-6-10);
    }
    
    .vendor-premium-badge {
        padding: 3px var(--space-8-12);
        font-size: var(--fs-15-19);
        line-height: 1.5;
        font-weight: 400;
    }
    
    .vendor-expert-badge {
        padding: 3px var(--space-6-10);
        font-size: var(--fs-15-19);
        line-height: 1.5;
    }
    
    .vendor-badge-icon {
        width: 10px;
        height: 10px;
    }
    
    /* 전문가 액션 버튼 영역 - 데스크탑 */
    .vendor-expert-actions {
        gap: var(--space-8-12);
        margin: var(--space-20-24) 0 0 0;
        width: 100%;
    }
    
    .vendor-expert-chat-btn,
    .vendor-expert-confirm-btn {
        padding: var(--space-12-16) var(--space-16-20);
        font-size: var(--fs-16-20);
        min-height: 52px;
    }
    
    .vendor-btn-icon {
        width: 20px;
        height: 20px;
    }
    
    /* 전문가 소개 헤더 - 데스크탑 */
    .vendor-intro-header {
        margin-bottom: var(--space-8-12);
    }
}

/* ================================
   3D 배지 섹션 스타일
   ================================ */

/* 배지 섹션은 기존 vendor-info-header 스타일을 재사용 */

/* 슬라이더 컨테이너 */
.vendor-badges-slider-container {
	padding: 0;
	padding-bottom: var(--space-24-32);
	overflow: hidden;
}

.vendor-badges-slider {
	display: flex;
	gap: var(--space-8-12);
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: var(--space-4-8) 0;
	-webkit-overflow-scrolling: touch;
	/* 스크롤바 숨김 */
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	/* 드래그 기능을 위한 설정 */
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.vendor-badges-slider:active {
	cursor: grabbing;
}

.vendor-badges-slider::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera - 스크롤바 완전 숨김 */
}

/* 3D 배지 카드 */
.vendor-badge-3d-card {
	flex: 0 0 clamp(90px, 26vw, 120px);
	width: clamp(90px, 26vw, 120px);
	height: clamp(90px, 26vw, 120px);
	background: var(--bg-primary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	box-shadow: 0px 2px 5px 0px rgba(99, 99, 99, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4-8);
	padding: 12px 8px;
	cursor: pointer;
	transition: all var(--transition-fast);
	position: relative;
	overflow: hidden;
}

.vendor-badge-3d-card:hover {
	transform: translateY(-2px);
	box-shadow: 1px 4px 12px 0px rgba(99, 99, 99, 0.2);
	border-color: var(--primary);
}

.vendor-badge-3d-card.premium {
	background: var(--primary-20);
}

.vendor-badge-3d-card.premium:hover {
	box-shadow: 0 4px 12px rgba(1, 102, 255, 0.15);
}

/* 3D 배지 아이콘 */
.vendor-badge-3d-icon {
	width: clamp(40px, 12vw, 58px); /* 반응형: 최소 40px, 최대 58px */
	height: clamp(40px, 12vw, 58px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.vendor-badge-3d-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* 배지 이름 */
.vendor-badge-3d-name {
	font-size: var(--fs-12-16); 
	font-weight: 500; 
	color: var(--text-primary);
	text-align: center;
	line-height: 1.5;
	word-break: keep-all;
	width: 100%;
	min-width: min-content;
}

/* 배지 없음 상태 */
.vendor-badges-empty {
	padding: var(--space-24-32);
	text-align: center;
}

.vendor-badges-empty p {
	color: var(--text-secondary);
	font-size: var(--fs-base);
	margin: 0;
}


/* ================================
   Vue 배지 모달 / 바텀시트 스타일
   ================================ */
.zja-badge-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0,0,0,0.3);
	z-index: 9999;
}

.zja-badge-modal.is-modal {
	align-items: center;
}

.zja-badge-panel {
	width: min(560px, 92vw);
	max-height: 90vh;
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-16-24) var(--space-16-24) var(--space-40-48) var(--space-16-24);
	position: relative;
}

.zja-badge-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.zja-badge-header-title {
	font-size: var(--fs-16-20);
	font-weight: 700;
	color: var(--text-primary);
}

.zja-badge-modal.is-sheet .zja-badge-panel {
	width: 100%;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
}

.zja-badge-close { width: 30px; height: 30px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 28px; line-height: 28px; }

.zja-badge-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--space-8-12);
}
.zja-badge-hero img {
	width: clamp(120px, 35vw, 150px);
	height: clamp(120px, 35vw, 150px);
	object-fit: contain;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}

.zja-badge-content {
	text-align: center;
	padding: var(--space-12-16) 0;
}
.zja-badge-title {
	margin: 0;
	font-size: var(--fs-18-22);
	color: var(--text-primary);
	font-weight: 700;
}
.zja-badge-desc {
	margin: var(--space-4-8) 0 0;
	color: var(--primary);
	font-size: var(--fs-14-18);
	white-space: pre-line;
    line-height: 1.5;
}
.zja-badge-criteria {
    margin: var(--space-16-20) auto 0;
    color: var(--text-secondary);
    font-size: var(--fs-12-16);
    border: 1px solid var(--border-light);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: var(--space-8-12) var(--space-12-16);
    line-height: 1.5;
    max-width: 400px;
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-line;
}

.zja-badge-center-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-12-16);
	margin-top: 0;
}
.zja-mini-nav {
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 20px;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
.zja-center-label {
	font-size: var(--fs-12-16);
	color: var(--text-secondary);
}


/* 스트립은 패널의 내부 중앙 정렬 기준을 따르도록 좌우 오버플로우만 허용 */
.zja-badge-strip {
	display: flex;
	align-items: center;
	gap: var(--space-8-12);
	margin-top: var(--space-8-12);
    overflow: hidden; /* 수직 레이아웃 영향 제거 */
}
.zja-badge-strip-inner {
	display: flex;
	gap: var(--space-8-12);
	overflow-x: auto;
	padding: var(--space-8-12) 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.zja-badge-strip-inner::-webkit-scrollbar { display: none; }
.zja-badge-chip {
	flex: 0 0 auto;
	width: clamp(56px, 16vw, 80px);
	height: clamp(56px, 16vw, 80px);
    padding: var(--space-4-8);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--bg-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.zja-badge-chip img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.7;
}

.zja-badge-chip.is-active { 
    outline: 1px solid var(--primary-60); 
    background: var(--primary-10);
}

.zja-badge-chip.is-active img { opacity: 1; }

.zja-badge-nav {
    border: none; 
    background: transparent; 
    color: var(--text-secondary); 
    font-size: 20px; width: 24px; 
    height: 24px; 
    cursor: pointer; 
}