/* --- SHARED PATTERNS --- */
.chat-component,
.contract-conditions-component,
.payment-info-component,
.payment-confirm-component,
.reservation-confirm-component,
.contact-info-component,
.event-info-component,
.review-component,
.info-component,
.compound-component,
.intro-genre-preview-component,
.genre-recommendation-component,
.genre-selection-component,
.genre-confirm-component,
.team-recommendation-component,
.team-select-component,
.summary-confirm-component,
.quote-confirmation-component,
.budget-input-component,
.celebrity-select-branch-component,
.celebrity-search-component,
.event-status-branch-component,
.celebrity-category-select-component,
.celebrity-recommendation-component,
.celebrity-rec-retry-btn,
.celebrity-rec-retry-btn:hover:not(:disabled),
.celebrity-rec-retry-btn:disabled,
.celebrity-rec-retry-btn,
/* ============================================================================
   CELEBRITY_SELECT 컴포넌트
   ============================================================================
   연예인 최종 선택
*/
.celebrity-select-component, .celebrity-summary-confirm-component { background: transparent; padding: 16px; }
.ui-submit-btn:hover:not(:disabled), .team-select-btn:hover:not(:disabled), .payment-copy-btn:hover, .payment-check-btn:hover:not(:disabled), .reservation-next-btn:hover:not(:disabled), .contact-action-btn:hover, .contact-next-btn:hover:not(:disabled), .event-next-btn:hover:not(:disabled), .review-submit-btn:hover:not(:disabled), .genre-rec-submit-btn:hover:not(:disabled), .genre-confirm-btn.primary:hover:not(:disabled), .team-rec-submit-btn:hover:not(:disabled), .team-rec-expert-btn:hover:not(:disabled), .summary-confirm-btn.primary:hover:not(:disabled), .celebrity-search-btn:hover:not(:disabled), .open-price-btn.primary:hover:not(:disabled), .agency-action-btn.primary:hover:not(:disabled), .celebrity-add-search-submit:hover:not(:disabled), .mc-genre-submit-btn:hover:not(:disabled), .mc-rec-submit-btn:hover:not(:disabled), .mc-summary-btn.primary:hover:not(:disabled) {
  background: var(--primary-dark);
}
.chat-textarea:focus, .review-textarea:focus, .compound-text:focus, .compound-textarea:focus, .compound-datetime:focus, .compound-number:focus, .compound-time:focus, .compound-date:focus, .compound-other-input:focus, .genre-rec-radio-circle.checked, .genre-rec-radio-card.selected .genre-rec-radio-circle, .genre-rec-radio-item.selected .genre-rec-radio-circle, .genre-rec-radio-item input[type="radio"]:checked + .genre-rec-radio-circle, .budget-input-wrapper:focus-within, .celebrity-search-input:focus, .celebrity-select-card.selected .celebrity-select-radio {
  border-color: var(--primary);
}
.select-component.select-list .select-option:has(input:checked) .option-label, .select-component.select-cards .select-option:has(input:checked) .option-label, .select-other-component .select-option:has(input:checked) .option-label, .compound-select-option input[type="radio"]:checked + .option-content, .intro-genre-card.selected .intro-genre2-main, .intro-genre-radio-card.selected .intro-genre2-main, .mc-genre-btn.selected .mc-genre-desc, .payment-method-btn-selected .payment-method-label {
  color: var(--primary);
}
.chip.selected .chip-desc, .compound-field .chip.selected .chip-desc { color: inherit; }
.option-desc, .reservation-detail-label, .event-timeline-desc, .info-item-desc, .genre-sel-branch-btn .branch-desc, .team-rec-right-area .team-card-config, .team-rec-right-area .team-card-stats, .event-status-btn .status-desc, .accumulated-fee {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.chat-finish-btn:hover:not(:disabled), .genre-rec-alt-btn:hover:not(:disabled), .genre-confirm-btn.secondary:hover:not(:disabled), .summary-confirm-btn.secondary:hover:not(:disabled), .open-price-btn.secondary:hover:not(:disabled), .agency-action-btn.secondary:hover:not(:disabled), .celebrity-rec-outline-btn:hover:not(:disabled), .svc-complete-btn.secondary:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}
.select-other-component .other-input:focus, .quantity-select-component .quantity-input:focus, .compound-region-select .region-province:focus, .compound-region-select .region-city:focus, .compound-date:focus, .datetime-inline-container .datetime-inline-date:focus, .datetime-inline-container .datetime-inline-ampm:focus, .datetime-inline-container .datetime-inline-hour:focus, .compound-dropdown:focus, .celebrity-add-search-input:focus {
  border-color: var(--primary);
  outline: none;
}
.compound-select-option:has(input:checked), .genre-rec-radio-card.selected, .genre-rec-radio-item.selected, .team-rec-select-card.selected, .team-select-card.selected, .celebrity-rec-card.selected, .celebrity-select-card.selected {
  background: #fff8f5;
  border-color: var(--primary);
}
.genre-sel-branch-btn:hover:not(:disabled), .team-rec-select-card:hover, .team-select-card:hover, .event-status-btn:hover:not(:disabled), .category-option-btn:hover:not(:disabled), .celebrity-rec-card:hover, .celebrity-select-card:hover {
  background: var(--bg);
  border-color: var(--primary);
}
.select-component.select-list .select-option:hover, .chip:hover:not(:disabled):not(.selected), .select-other-component .select-option:hover, .cascading-multi-component .cascading-category-chip:hover:not(:disabled):not(.selected), .cascading-multi-component .cascading-sub-chip:hover:not(:disabled):not(.selected), .genre-candidate-card:hover {
  background: var(--bg-alt);
  border-color: var(--primary-light);
}
.team-card-name, .genre-rec-genre1, .team-rec-right-area .team-card-name, .summary-title, .celebrity-branch-btn .branch-label, .celebrity-summary-confirm-component .summary-title {
  color: var(--text);
  font-size: var(--font-size-md);
  font-weight: 600;
}
.compound-select-options, .genre-rec-group-items, .genre-rec-actions, .budget-guide-items, .accumulated-list-items { display: flex; flex-direction: column; gap: 8px; }
.estimate-arrival-card-body { display: flex; flex-direction: row; gap: 14px; }
.intro-genre2-main, .intro-genre-radio-card .intro-genre2-main, .genre-rec-radio-label, .celebrity-card-name, .mc-summary-value, .svc-complete-card-name { color: var(--text); font-size: var(--font-size-base); font-weight: 600; }
.genre-confirm-actions, .team-rec-actions, .summary-actions, .estimate-arrival-cards, .open-price-actions, .agency-response-actions { display: flex; flex-direction: column; gap: 10px; }
.contract-condition-item:last-child, .reservation-detail-item:last-child, .info-item:last-child, .summary-item:last-child, .booking-detail-item:last-child { border-bottom: none; }
.contact-card-title, .genre-confirm-label, .summary-requests-label, .quote-card-config, .mc-summary-requests-label { color: var(--text-secondary); font-size: var(--font-size-sm); margin-bottom: 8px; }
.contact-name, .event-timeline-title, .info-item-label, .genre-sel-branch-btn .branch-label, .event-status-btn .status-label { color: var(--text); font-size: var(--font-size-base); font-weight: 600; margin-bottom: 4px; }
.intro-genre-radio-circle.checked, .team-rec-select-card.selected .team-rec-checkbox, .team-select-card.selected .team-select-checkbox, .genre-candidate-card.selected .genre-candidate-radio, .accumulated-item.selected .accumulated-checkbox {
  background: var(--primary);
  border-color: var(--primary);
}
.genre-sel-options, .genre-candidate-list, .mc-genre-rows, .mc-summary-items, .svc-complete-services { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.genre-confirm-btn.primary, .summary-confirm-btn.primary, .open-price-btn.primary, .agency-action-btn.primary, .mc-summary-btn.primary { background: var(--primary); border: none; color: white; }
.genre-confirm-btn.secondary, .summary-confirm-btn.secondary, .open-price-btn.secondary, .agency-action-btn.secondary, .svc-complete-btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.summary-icon, .quote-icon, .agency-response-header .response-icon, .celebrity-summary-confirm-component .summary-icon, .svc-complete-icon { font-size: var(--font-size-2xl); }
.time-chip:hover:not(:disabled), .mc-genre-btn:hover:not(:disabled), .mc-rec-change-btn:hover:not(:disabled), .mc-rec-expert-btn:hover:not(:disabled), .mc-summary-btn.secondary:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--primary);
}
.option-label, .contract-condition-value, .budget-tier, .category-option-btn .option-label { color: var(--text); font-size: var(--font-size-base); font-weight: 500; }
.cascading-multi-component .cascading-sub-options, .celebrity-branch-options, .event-status-options, .celebrity-contact-info { display: flex; flex-direction: column; gap: 12px; }
.cascading-multi-component .cascading-sub-chips, .compound-field .chips-container, .compound-dynamic-select .dynamic-select-options, .category-chips-container { display: flex; flex-wrap: wrap; gap: 8px; }
.team-detail-btn:hover, .intro-genre-card.selected .intro-genre1-sub, .intro-genre-radio-card.selected .intro-genre1-sub, .svc-complete-btn.primary { background: var(--primary); color: white; }
.contract-header-title, .contract-team-name, .payment-header-title, .contact-header-title { color: var(--text); font-size: var(--font-size-md); font-weight: 600; margin-bottom: 4px; }
.contract-team-price, .compound-summary-value, .budget-range { color: var(--primary); font-size: var(--font-size-base); font-weight: 600; }
.team-rec-right-area .team-card-price { color: var(--primary); font-size: var(--font-size-sm); font-weight: 600; }
.intro-genre-reason, .intro-genre-radio-card .intro-genre-reason, .genre-rec-radio-desc, .celebrity-branch-btn .branch-desc { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.4; }
.intro-theme-group, .celebrity-add-search-section, .date-time-inline-component, .region-select-component { margin-bottom: 16px; }
.intro-theme-group:last-child, .genre-rec-actions .genre-rec-submit-btn, .quote-notice-list li:last-child, .celebrity-category-group:last-child { margin-bottom: 0; }
.intro-genre-radio-content, .quote-card-right, .celebrity-card-content, .chat-list-info { flex: 1; min-width: 0; }
.genre-rec-list, .team-rec-cards, .team-select-cards, .celebrity-select-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.team-rec-retry-btn:hover, .quote-submit-btn:hover:not(:disabled), .genre-candidate-submit-btn:hover:not(:disabled), .team-rec-genre-rec-btn:hover { box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3); transform: translateY(-2px); }
.team-rec-expert, .celebrity-category-group, .mc-summary-header, .booking-confirm-contact-section { margin-bottom: 20px; }
.estimate-arrival-date, .estimate-arrival-vat, .quote-price-detail, .estimate-history-item-date { color: var(--color-text-secondary, #868e96); font-size: var(--font-size-sm); }
.quote-price-label { font-size: var(--font-size-sm); color: var(--text-secondary, #6b7280); font-weight: 500; }
.number-input-component .ui-number-input::-webkit-outer-spin-button, .number-input-component .ui-number-input::-webkit-inner-spin-button, .quantity-select-component .quantity-input::-webkit-outer-spin-button, .quantity-select-component .quantity-input::-webkit-inner-spin-button, .budget-input-field::-webkit-outer-spin-button, .budget-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.chat-finish-btn:disabled, .review-skip-btn:disabled, .time-chip:disabled { cursor: not-allowed; opacity: 0.5; }
.contract-conditions-list, .info-items, .summary-items { background: white; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 16px; overflow: hidden; }
.contract-confirm-btn, .team-rec-submit-btn, .team-rec-expert-btn, .mc-rec-submit-btn {
  background: var(--primary);
  border-radius: 10px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 600;
  padding: 14px 24px;
  transition: all 0.2s;
  width: 100%;
}
.payment-amount-label, .review-header-subtitle, .summary-label { color: var(--text-secondary); font-size: var(--font-size-base); }
.payment-waiting-desc, .reservation-success-desc, .svc-complete-summary-text { color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; margin-bottom: 20px; }
.review-header, .genre-candidate-header, .booking-confirm-header { margin-bottom: 24px; text-align: center; }
.genre-rec-alt-actions, .compound-region-select .region-select-container, .region-select-row { display: flex; gap: 8px; }
.genre-chip:hover, .genre1-chip:hover, .genre2-chip:hover, .quote-detail-btn:hover, .celebrity-add-search-btn:hover:not(:disabled) { background: var(--border); }
.genre-confirm-btn, .summary-confirm-btn, .agency-action-btn {
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 600;
  padding: 14px;
  transition: all 0.2s;
  width: 100%;
}
.team-rec-checkbox .checkmark, .team-select-checkbox .checkmark, .quote-checkmark { color: white; font-size: var(--font-size-base); font-weight: bold; }
.summary-header, .agency-response-header, .celebrity-summary-confirm-component .summary-header { align-items: center; display: flex; gap: 10px; margin-bottom: 16px; }
.quote-title, .agency-response-header .response-title, .mc-summary-title { color: var(--text); font-size: var(--font-size-lg); font-weight: 700; }
.quote-submit-btn:disabled, .quote-book-btn:disabled, .genre-candidate-submit-btn:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; transform: none; }
.celebrity-branch-btn.selected, .event-status-btn.selected, .category-option-btn.selected { background: rgba(var(--primary-rgb), 0.08); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.chat-close-btn:hover, .chat-list-item:hover, .chat-back-btn:hover { background: var(--hover-bg, #f3f4f6); }
.select-component.select-list .select-option, .select-other-component .select-option {
  align-items: center;
  background: white;
  border-radius: 8px;
  border: 2px solid var(--border);
  cursor: pointer;
  display: flex;
  margin-bottom: 8px;
  padding: 12px 16px;
  transition: all 0.2s;
}
.chip.selected:hover:not(:disabled), .compound-field .chip.selected:hover:not(:disabled) { background: var(--accent-bg, #fff0eb); border-color: var(--primary-dark, #e64800); color: var(--primary-dark, #e64800); }
.chat-error, .contract-error {
  background: #fef2f2;
  border-radius: 8px;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: var(--font-size-base);
  padding: 16px;
  text-align: center;
}
.payment-amount-value, .genre-confirm-main { color: var(--primary); font-size: var(--font-size-lg); font-weight: 700; }
.payment-waiting-title, .review-header-title { color: var(--text); font-size: var(--font-size-lg); font-weight: 600; margin-bottom: 8px; }
.reservation-next-btn, .event-next-btn {
  background: var(--primary);
  border-radius: 10px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-top: 20px;
  padding: 14px;
  width: 100%;
}
.compound-datetime, .compound-time, .compound-date {
  border-radius: 8px;
  border: 2px solid var(--border);
  font-size: var(--font-size-base);
  outline: none;
  padding: 12px 16px;
  transition: border-color 0.2s;
  width: 100%;
}
.intro-genre-radio-card .intro-genre-name, .estimate-arrival-artist { align-items: center; display: flex; gap: 8px; margin-bottom: 4px; }
.intro-checklist-items, .quote-notice-list { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.6; margin: 0; padding-left: 20px; }
.genre-rec-empty, .team-rec-empty { color: var(--text-secondary); font-size: var(--font-size-base); padding: 40px 20px; text-align: center; }
.genre-rec-card.recommended, .celebrity-rec-card.recommended { background: linear-gradient(135deg, #fff8f5 0%, #fff8f5 100%); border-color: var(--primary); }
.genre-rec-genre2-main, .genre-candidate-genre2 { color: var(--text); font-size: var(--font-size-md); font-weight: 700; }
.genre-rec-radio-circle.checked::after, .genre-rec-radio-card.selected .genre-rec-radio-circle::after, .genre-rec-radio-item.selected .genre-rec-radio-circle::after, .genre-rec-radio-item input[type="radio"]:checked + .genre-rec-radio-circle::after {
  background: var(--primary);
  border-radius: 50%;
  content: '';
  height: 10px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
}
.genre-rec-footer-text, .team-select-help { color: var(--text-secondary); font-size: var(--font-size-sm); margin-bottom: 16px; text-align: center; }
.genre-sel-section-title, .accumulated-list-title { color: var(--text); font-size: var(--font-size-base); font-weight: 600; margin-bottom: 12px; }
.team-rec-header, .celebrity-rec-header { color: var(--text); font-size: var(--font-size-lg); font-weight: 700; margin-bottom: 16px; text-align: center; }
.team-rec-empty-title, .agency-status-title { color: var(--text); font-size: var(--font-size-lg); font-weight: 700; margin-bottom: 12px; }
.team-rec-retry-btn, .team-rec-modify-btn, .team-rec-expert-btn-alt, .team-rec-genre-rec-btn, .team-rec-genre-sel-btn {
  align-items: center;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-base);
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 14px 20px;
  transition: all 0.2s ease;
  width: 100%;
}
.team-rec-retry-btn, .team-rec-genre-rec-btn { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-gradient-end) 100%); color: white; }
.team-rec-left-area .team-detail-btn:hover, .team-detail-btn:hover { background: var(--border); border-color: var(--primary); color: var(--primary); }
.team-rec-right-area .team-card-header, .date-time-inline-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.team-rec-expert-badge.mostBooked, .team-rec-expert-badge.track-recommended { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
.team-rec-expert-badge.valueForMoney, .team-rec-expert-badge.track-value-pick { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.team-rec-expert-badge.newTeam, .team-rec-expert-badge.track-new-team { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.estimate-arrival-value, .estimate-arrival-artist-name { color: var(--color-text-primary, #212529); font-size: var(--font-size-base); font-weight: 600; }
.genre-candidate-select-component, .agency-response-component { background: white; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); padding: 20px; }
.datetime-inline-container .datetime-inline-ampm, .datetime-inline-container .datetime-inline-hour {
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: var(--font-size-md);
  padding: 12px 16px;
  width: 100px;
}
.celebrity-rec-outline-btn.primary { background: var(--primary); border-color: var(--primary); color: white; }
.celebrity-rec-outline-btn.primary:hover:not(:disabled) { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); color: white; }
.celebrity-rec-outline-btn, .mc-rec-expert-btn {
  background: transparent;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 500;
  padding: 14px;
  transition: all 0.2s;
  width: 100%;
}
.date-time-label, .region-select-label { color: var(--text); display: block; font-size: var(--font-size-base); font-weight: 600; margin-bottom: 8px; }
.date-time-date-input:focus, .date-time-ampm-select:focus, .date-time-hour-select:focus, .region-sido-select:focus, .region-sigungu-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1); outline: none; }
.date-time-help-text, .region-select-help-text { color: var(--text-secondary); font-size: var(--font-size-sm); margin-top: 6px; }

/* --- COMPONENT STYLES --- */

/* --- CONSOLIDATED: Shared Patterns (중복 제거) --- */
.genre-chip.selected, .genre1-chip.selected, .genre2-chip.selected, .category-chip-btn.selected, .mc-genre-btn.selected, .cascading-multi-component .cascading-category-chip.selected {
  background: var(--accent-bg-light, #fafafa);
  border-color: var(--primary);
  color: var(--primary);
}
.chip.selected, .time-chip.selected {
  background: white;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}
.select-component.select-list .select-option:has(input:checked), .select-component.select-cards .select-option:has(input:checked), .select-other-component .select-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--accent-bg-light, #fafafa);
  color: var(--text);
}
.select-component.select-list .select-option:has(input:checked) .option-desc, .select-component.select-cards .select-option:has(input:checked) .option-desc, .select-other-component .select-option:has(input:checked) .option-desc { color: var(--text-secondary); } .textarea-component .ui-textarea:focus, .date-component .ui-date-input:focus, .number-input-component .ui-number-input:focus, .text-input-component .ui-text-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.team-card-advantages, .team-card-booking-history, .team-card-review-analysis, .team-card-ai-reason { padding: 10px 14px; background: var(--accent-bg, #fff0eb); border-radius: 8px; }
.genre-confirm-btn:disabled, .team-rec-expert-btn:disabled, .team-rec-load-more-btn:disabled, .summary-confirm-btn:disabled, .estimate-refresh-btn:disabled, .celebrity-branch-btn:disabled, .open-price-btn:disabled, .event-status-btn:disabled, .agency-action-btn:disabled, .category-option-btn:disabled, .compound-date:disabled, .datetime-inline-container .datetime-inline-hour:disabled, .datetime-inline-container .datetime-inline-ampm:disabled, .compound-dropdown:disabled, .category-chip-btn:disabled, .celebrity-rec-secondary-btn:disabled, .celebrity-rec-outline-btn:disabled, .mc-genre-btn:disabled, .mc-genre-submit-btn:disabled, .mc-rec-submit-btn:disabled, .mc-rec-expert-btn:disabled, .mc-summary-btn:disabled, .team-rec-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ui-submit-btn:disabled, .team-select-btn:disabled, .chat-send-btn:disabled, .contract-confirm-btn:disabled, .payment-confirm-btn:disabled, .payment-check-btn:disabled, .reservation-next-btn:disabled, .contact-next-btn:disabled, .event-next-btn:disabled, .review-submit-btn:disabled, .genre-rec-submit-btn:disabled, .celebrity-search-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* --- SECTION 1: Form Components --- */
.ui-component { margin-top: 16px; padding: 16px; background: var(--bg); border-radius: 12px; border: none; }
.ui-help-text { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 8px; margin-bottom: 8px; }
.ui-submit-btn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  margin-top: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

/* --- TEXTAREA 컴포넌트 --- */
.textarea-component .ui-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
}

/* --- SELECT 컴포넌트 --- */
.option-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.select-option input[type="radio"], .select-other-component .select-option input[type="radio"], .select-component.select-cards .select-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.select-component.select-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.select-component.select-cards .select-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  min-height: 100px;
}
.select-component.select-cards .select-option:hover { border-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.select-component.select-cards .ui-submit-btn { grid-column: 1 / -1; }

/* --- MULTI 컴포넌트 --- */
.multi-component .chips-container, .multi-detail-component .chips-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 100px;
  max-width: calc(50% - 4px);
  padding: 12px 16px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  box-sizing: border-box;
}
.chip:disabled { cursor: not-allowed; opacity: 0.6; }
.chip-desc { font-size: var(--font-size-xs); font-weight: 400; opacity: 0.8; }

/* --- DATE 컴포넌트 --- */
.date-component .ui-date-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-md);
  font-family: inherit;
  cursor: pointer;
}
input[type="date"], input[type="datetime-local"] { cursor: pointer; }

/* --- SELECT_OTHER 컴포넌트 --- */
.select-other-component .other-option { flex-wrap: nowrap; }
.select-other-component .other-option .option-content { flex: 1; flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
.select-other-component .other-option .option-label { flex-shrink: 0; white-space: nowrap; }
.select-other-component .other-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--font-size-xs);
}
.select-other-component .other-input:disabled { background: var(--bg-alt); color: #94a3b8; }

/* --- MULTI_DETAIL 컴포넌트 --- */
.multi-detail-component .detail-group { margin-bottom: 16px; padding: 12px; background: white; border-radius: 8px; border: 1px solid var(--border); }

/* --- NUMBER_INPUT 컴포넌트 --- */
.number-input-component .number-input-wrapper { display: flex; align-items: center; gap: 8px; }
.number-input-component .ui-number-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-md);
  font-family: inherit;
  -moz-appearance: textfield;
}
.number-input-component .number-unit { font-size: var(--font-size-xs); color: var(--text-secondary); white-space: nowrap; }

/* --- TEXT_INPUT 컴포넌트 --- */
.text-input-component .ui-text-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-xs);
  font-family: inherit;
}
.text-input-component .ui-text-input:disabled { background: var(--bg-alt); color: #94a3b8; }

/* --- QUANTITY_SELECT 컴포넌트 --- */
.quantity-select-component .quantity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.quantity-select-component .quantity-input {
  width: 60px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-size-xs);
  text-align: center;
  -moz-appearance: textfield;
}

/* --- CASCADING_MULTI 컴포넌트 --- */
.cascading-multi-component .cascading-category-chip {
  padding: 10px 16px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
.cascading-multi-component .cascading-sub-group { padding: 12px; background: white; border: 1px solid var(--border); border-radius: 8px; }
.cascading-multi-component .cascading-sub-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cascading-multi-component .cascading-sub-chip {
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: var(--font-size-xs);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
.cascading-multi-component .cascading-sub-chip.selected { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* --- SECTION 2: Domain Components --- */

/* --- RECOMMENDATION 컴포넌트 --- */
.recommendation-component { padding: 16px; background: var(--accent-bg, #fff0eb); border: 2px solid var(--primary); border-radius: 16px; }
.recommendation-overall {
  margin-bottom: 20px;
  padding: 16px;
  background: transparent;
  border-radius: 12px;
  color: var(--text);
  font-size: var(--font-size-base);
  line-height: 1.6;
}
.recommendation-teams { display: flex; flex-direction: column; gap: 16px; }
.team-card { background: white; border: 2px solid var(--primary); border-radius: 12px; overflow: hidden; transition: all 0.2s; }
.team-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.team-card-img { width: 100%; object-fit: cover; background: var(--bg-alt); }
.team-card-content { padding: 16px; }
.team-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.team-card-score {
  padding: 4px 8px;
  background: var(--primary);
  color: white;
  border-radius: 4px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.team-card-strength {
  display: inline-block;
  padding: 4px 8px;
  background: #f0fdf4;
  color: #16a34a;
  border-radius: 4px;
  font-size: var(--font-size-sm);
  margin-bottom: 8px;
}
.team-card-price { font-size: var(--font-size-base); color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.team-card-config { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 4px; }
.team-card-stats { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 6px; }
.team-card-portfolio {
  font-size: var(--font-size-sm);
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-card-reason { font-size: var(--font-size-sm); color: var(--primary); margin: 4px 0; font-style: italic; line-height: 1.5; }
.team-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.team-detail-btn {
  flex: 1;
  padding: 12px;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.team-detail-btn-small { flex: none; padding: 6px 12px; font-size: var(--font-size-sm); }
.team-select-btn {
  flex: 1;
  padding: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

/* --- CHAT 컴포넌트 --- */
.chat-selected-team {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
}
.chat-team-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--border); }
.chat-team-info { flex: 1; }
.chat-team-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text); margin-bottom: 2px; }
.chat-team-status { font-size: var(--font-size-sm); color: var(--primary); }
.chat-input-area { display: flex; gap: 8px; align-items: flex-end; }
.chat-input-wrapper { flex: 1; position: relative; }
.chat-textarea {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 22px;
  font-size: var(--font-size-base);
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  line-height: 1.4;
}
.chat-textarea::placeholder { color: #94a3b8; }
.chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.chat-send-btn:hover:not(:disabled) { background: var(--primary-dark); transform: scale(1.05); }
.chat-send-btn svg { width: 20px; height: 20px; }
.chat-help-text { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 8px; text-align: center; }
.chat-actions { display: flex; justify-content: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.chat-finish-btn {
  padding: 10px 24px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
}

/* --- CONTRACT_CONDITIONS 컴포넌트 --- */
.contract-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 12px;
  border: 1px solid #86efac;
}
.contract-header-icon {
  width: 48px;
  height: 48px;
  background: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-2xl);
}
.contract-header-text { flex: 1; }
.contract-header-subtitle { font-size: var(--font-size-sm); color: #16a34a; }
.contract-team-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.contract-team-img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--bg-alt); }
.contract-team-details { flex: 1; }
.contract-condition-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.contract-condition-label { flex: 1; font-size: var(--font-size-base); color: var(--text-secondary); }
.contract-notice {
  padding: 12px 16px;
  background: #fff8f5;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  color: #b45309;
  line-height: 1.5;
  margin-bottom: 20px;
}
.contract-confirm-btn:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); }

/* --- PAYMENT_INFO 컴포넌트 --- */
.payment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #fff0eb 0%, #fde68a 100%);
  border-radius: 12px;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}
.payment-header-icon {
  width: 48px;
  height: 48px;
  background: #f59e0b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-2xl);
}
.payment-header-text { flex: 1; }
.payment-header-subtitle { font-size: var(--font-size-sm); color: #b45309; }
.payment-account-card { background: white; border: 2px solid var(--primary); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.payment-bank-name { font-size: var(--font-size-base); color: var(--text-secondary); margin-bottom: 8px; }
.payment-account-number { font-size: var(--font-size-xl); font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: 1px; }
.payment-account-holder { font-size: var(--font-size-base); color: var(--text); }
.payment-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 16px;
}
.payment-copy-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.payment-confirm-btn {
  width: 100%;
  padding: 14px;
  background: #16a34a;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.payment-confirm-btn:hover:not(:disabled) { background: #15803d; }

/* --- PAYMENT_CONFIRM 컴포넌트 --- */
.payment-waiting { text-align: center; padding: 40px 20px; background: white; border: 1px solid var(--border); border-radius: 12px; }
.payment-waiting-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: #fff0eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}
.payment-check-btn {
  padding: 12px 32px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
}

/* --- RESERVATION_CONFIRM 컴포넌트 --- */
.reservation-success { text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #86efac; border-radius: 12px; }
.reservation-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: calc(28.8px * var(--font-scale));
}
.reservation-success-title { font-size: var(--font-size-xl); font-weight: 700; color: #16a34a; margin-bottom: 8px; }
.reservation-details { background: white; border-radius: 8px; padding: 16px; text-align: left; }
.reservation-detail-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.reservation-detail-value { font-size: var(--font-size-sm); font-weight: 500; color: var(--text); }

/* --- CONTACT_INFO 컴포넌트 --- */
.contact-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%);
  border-radius: 12px;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}
.contact-header-icon {
  width: 48px;
  height: 48px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-2xl);
}
.contact-header-text { flex: 1; }
.contact-header-subtitle { font-size: var(--font-size-sm); color: var(--primary-gradient-end); }
.contact-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.contact-card-content { display: flex; align-items: center; gap: 12px; }
.contact-avatar {
  width: 48px;
  height: 48px;
  background: var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
}
.contact-details { flex: 1; }
.contact-phone { font-size: var(--font-size-base); color: var(--primary); }
.contact-action-btn {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.contact-next-btn {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}

/* --- EVENT_INFO 컴포넌트 --- */
.event-timeline { position: relative; padding-left: 24px; }
.event-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.event-timeline-item { position: relative; padding-bottom: 24px; }
.event-timeline-item:last-child { padding-bottom: 0; }
.event-timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--primary);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px var(--primary);
}
.event-timeline-item.completed .event-timeline-dot { background: #16a34a; box-shadow: 0 0 0 2px #16a34a; }
.event-timeline-item.pending .event-timeline-dot { background: #94a3b8; box-shadow: 0 0 0 2px #94a3b8; }
.event-timeline-content { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }

/* --- REVIEW 컴포넌트 --- */
.review-rating { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.review-star {
  width: 40px;
  height: 40px;
  background: var(--bg-alt);
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-2xl);
  cursor: pointer;
  transition: all 0.2s;
}
.review-star:hover { background: #fff0eb; transform: scale(1.1); }
.review-star.active { background: rgba(var(--primary-rgb), 0.3); transform: scale(1.1); }
.review-textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: var(--font-size-base);
  resize: none;
  outline: none;
  margin-bottom: 16px;
  font-family: inherit;
}
.review-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}
.review-skip-btn {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  cursor: pointer;
}
.review-skip-btn:hover:not(:disabled) { background: var(--bg); }

/* --- Phase 2-A 신규 컴포넌트 스타일 --- */

/* --- INFO 컴포넌트 --- */
.info-message {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text);
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.info-item { display: flex; flex-direction: column; padding: 12px 16px; border-bottom: 1px solid var(--border); }

/* --- COMPOUND 컴포넌트 --- */
.compound-summary { padding: 12px 16px; }
.compound-summary-content {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
}
.compound-summary-label { font-size: var(--font-size-sm); color: var(--text-secondary); flex-shrink: 0; }
.compound-field { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.compound-inline-row { display: flex; gap: 8px; margin-bottom: 16px; }
.compound-inline-row .compound-field { flex: 1; margin-bottom: 0; }
@media (max-width: 480px) {
  .compound-inline-row { flex-direction: column; }
  .compound-inline-row .compound-field { margin-bottom: 16px; }
  .compound-inline-row .compound-field:last-child { margin-bottom: 0; }
}
.compound-label { display: block; font-size: var(--font-size-base); font-weight: 600; color: var(--text); margin-bottom: 12px; }
.compound-field .chip { flex: 0 0 auto; min-width: auto; max-width: none; padding: 10px 16px; }
.compound-field .dynamic-placeholder {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  padding: 12px;
  background: var(--bg-alt);
  border-radius: 8px;
  text-align: center;
  width: 100%;
}
.compound-text, .compound-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.compound-textarea { resize: none; min-height: 80px; }
.compound-section-header {
  margin: 24px 0 12px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%);
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
}
.compound-section-header .section-title { margin: 0; font-size: var(--font-size-base); font-weight: 600; color: var(--primary); }
.compound-number-wrapper { display: flex; align-items: center; gap: 8px; }
.compound-number {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color 0.2s;
}
.compound-unit {
  padding: 12px 16px;
  background: var(--bg-alt);
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
}
.compound-select-option {
  display: flex;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.compound-select-option:hover { background: var(--bg-alt); }
.compound-select-option input[type="radio"] { margin-right: 12px; margin-top: 2px; accent-color: var(--primary); }
.compound-other-input {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-size-base);
  outline: none;
}
.compound-other-input:disabled { background: var(--bg-alt); cursor: not-allowed; }
.dynamic-placeholder { padding: 12px; color: var(--text-secondary); font-size: var(--font-size-sm); text-align: center; }

/* --- INTRO_GENRE_PREVIEW 컴포넌트 --- */
.intro-genre-header { font-size: var(--font-size-md); font-weight: 500; color: var(--text); margin-bottom: 16px; line-height: 1.5; }
.intro-event-type { font-weight: 700; color: var(--primary); }
.intro-genre-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.intro-genre-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 8px;
  transition: all 0.2s;
}
.intro-genre-card:hover { background: var(--bg); border-color: transparent; box-shadow: none; }
.intro-genre-card.selectable {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafafa;
  transition: all 0.2s ease;
}
.intro-genre-card.selectable:hover { background: #fff8f5; border-color: rgba(var(--primary-rgb), 0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15); }
.intro-genre-card.selected { background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); border-color: var(--primary); box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25); }
.intro-genre-selected-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.intro-genre-preview-component.selectable-mode .intro-genre-cta { text-align: center; font-weight: 500; color: var(--primary); }
.intro-genre-name { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.intro-genre1-sub { padding: 2px 6px; background: var(--bg-alt); border-radius: 4px; font-size: var(--font-size-xs); color: var(--text-secondary); }
.intro-genre-tip {
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  color: var(--primary);
  margin-bottom: 12px;
}
.intro-genre-cta { font-size: var(--font-size-base); color: var(--text-secondary); text-align: center; margin-bottom: 16px; line-height: 1.5; }

/* --- INTRO_GENRE_PREVIEW - 테마별 그룹 스타일 --- */
.intro-theme-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--accent-color, var(--primary));
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 0 8px 8px 0;
}
.intro-theme-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary, #1a1a1a); line-height: 1.4; }
.intro-theme-keyword {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--accent-color, var(--primary));
  background: var(--accent-bg, rgba(74, 144, 217, 0.08));
  padding: 2px 8px;
  border-radius: 10px;
  width: fit-content;
}
.intro-theme-items { display: flex; flex-direction: column; gap: 6px; padding-left: 8px; }

/* --- INTRO_GENRE_PREVIEW - 라디오 버튼 스타일 --- */
.intro-phase-radio-list { display: flex; flex-direction: column; gap: 6px; }
.intro-genre-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
.intro-genre-radio-card:hover { background: #fff8f5 !important; transform: translateX(4px); }
.intro-genre-radio-card.selected { background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%) !important; border: 2px solid var(--primary) !important; border-radius: 10px; }
.intro-genre-radio-indicator { flex-shrink: 0; margin-top: 2px; }
.intro-genre-radio-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: white;
  transition: all 0.2s ease;
}
.intro-genre-radio-circle.checked::after { content: ''; width: 8px; height: 8px; background: white; border-radius: 50%; }
.intro-genre-radio-card .intro-genre1-sub { font-size: var(--font-size-xs); padding: 2px 6px; background: var(--border); color: var(--text-secondary); border-radius: 4px; }

/* --- INTRO_GENRE_PREVIEW - 체크리스트 스타일 --- */
.intro-checklist { background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); border: 1px solid rgba(var(--primary-rgb), 0.3); border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.intro-checklist-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.intro-checklist-title::before { content: '💡'; font-size: var(--font-size-base); }
.intro-checklist-items li { margin-bottom: 4px; position: relative; }
.intro-checklist-items li::marker { color: var(--primary); }
.intro-genre-buttons { display: flex; flex-direction: row; gap: 8px; margin-top: 8px; align-items: stretch; }
.intro-genre-buttons .ui-submit-btn { flex: 1; margin-top: 0; }
.intro-genre-buttons .ui-submit-btn:disabled { background: var(--primary); cursor: pointer; opacity: 1; }
@media (max-width: 768px) { .intro-genre-buttons { flex-direction: column; } }
.intro-genre-direct-btn {
  flex: 1;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.2s;
}
.intro-genre-direct-btn:hover { background: rgba(var(--primary-rgb), 0.06); }

/* --- GENRE_RECOMMENDATION 컴포넌트 --- */
.genre-rec-header-text { font-size: var(--font-size-base); font-weight: 500; color: var(--text); margin-bottom: 12px; line-height: 1.5; }
.genre-rec-header-text strong { color: var(--primary); font-weight: 700; }
.genre-rec-overall-tip {
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%);
  border-radius: 10px;
  font-size: var(--font-size-base);
  color: var(--primary-dark);
  line-height: 1.5;
  margin-bottom: 16px;
}
.genre-rec-card {
  position: relative;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s;
}
.genre-rec-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.genre-rec-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 4px 12px;
  background: var(--primary);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 12px;
}
.genre-rec-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.genre-rec-genre2 { padding: 4px 8px; background: var(--border); border-radius: 4px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.genre-rec-genre1-sub {
  padding: 3px 8px;
  background: var(--bg-alt);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-left: 6px;
}
.genre-rec-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.genre-rec-radio-list { gap: 8px; }
.genre-rec-radio-card { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 14px 16px; }
.genre-rec-radio-card .genre-rec-badge { top: -8px; left: 40px; }
.genre-rec-radio-indicator {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.genre-rec-radio-circle {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  position: relative;
  transition: all 0.2s;
}
.genre-rec-card-content { flex: 1; }
.genre-rec-radio-card .genre-rec-header { margin-bottom: 4px; }
.genre-rec-radio-card .genre-rec-desc { margin-bottom: 0; font-size: var(--font-size-sm); line-height: 1.4; }
.genre-rec-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.genre-rec-alt-btn {
  flex: 1;
  padding: 10px 12px;
  background: white;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
}

/* --- 그룹핑 장르 추천 (PDF 기준 UI) --- */
.genre-rec-grouped { padding: 16px; }
.genre-rec-groups { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.genre-rec-group { background: var(--bg); border-radius: 12px; padding: 16px; }
.genre-rec-group-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text); margin: 0 0 4px 0; }
.genre-rec-group-desc { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0 0 12px 0; line-height: 1.4; }
.genre-rec-radio-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.genre-rec-radio-item:hover:not([style*="pointer-events:none"]) { border-color: var(--primary-light); background: #fefefe; }
.genre-rec-radio-item input[type="radio"] { display: none; }
.genre-rec-radio-item .genre-rec-radio-circle {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  position: relative;
  margin-top: 2px;
  transition: all 0.2s;
}
.genre-rec-radio-content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.genre-rec-actions .genre-rec-alt-btn-secondary { width: 100%; text-align: center; }

/* --- 지역 선택 (REGION_SELECT) --- */
.compound-region-select .region-province, .compound-region-select .region-city {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  background: white;
  color: var(--text);
}

/* --- GENRE_SELECTION 컴포넌트 --- */
.genre-sel-branch-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.genre-sel-branch-btn:disabled { cursor: not-allowed; }
.genre-sel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.genre-chip, .genre1-chip, .genre2-chip {
  padding: 10px 16px;
  background: var(--bg-alt);
  border: 2px solid transparent;
  border-radius: 20px;
  font-size: var(--font-size-base);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
#genre2Container { padding-top: 16px; border-top: 1px solid var(--border); }

/* --- GENRE_CONFIRM 컴포넌트 --- */
.genre-confirm-summary {
  background: white;
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}
.genre-confirm-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--primary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.genre-confirm-sub {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--text-secondary);
  background: var(--bg-alt);
  padding: 2px 8px;
  border-radius: 4px;
}
.genre-confirm-separator { color: var(--text-secondary); }

/* --- TEAM_RECOMMENDATION 컴포넌트 --- */
.team-rec-reason {
  padding: 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 12px;
  color: white;
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: 20px;
}
.team-rec-no-results { padding: 32px 20px; background: white; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.team-rec-empty-desc { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; }
.team-rec-empty-actions { display: flex; flex-direction: column; gap: 12px; max-width: 300px; margin: 0 auto 24px; }
.team-rec-modify-btn { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); }
.team-rec-modify-btn:hover { background: var(--border); border-color: var(--primary-light); }
.team-rec-expert-btn-alt { background: linear-gradient(135deg, #f59e0b 0%, var(--primary) 100%); color: white; }
.team-rec-expert-btn-alt:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3); }
.team-rec-empty-actions .btn-icon { font-size: var(--font-size-lg); }
.team-rec-empty-tip {
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%);
  border-radius: 10px;
  font-size: var(--font-size-sm);
  color: var(--primary-dark);
  line-height: 1.5;
}
@media (max-width: 480px) {
  .team-rec-no-results { padding: 24px 16px; }
  .team-rec-empty-title { font-size: var(--font-size-md); }
  .team-rec-empty-actions { max-width: 100%; }
  .team-rec-retry-btn,
  .team-rec-modify-btn,
  .team-rec-expert-btn-alt { padding: 12px 16px; font-size: var(--font-size-base); }
  .team-rec-card-body { flex-direction: column; gap: 12px; }
  .team-rec-left-area { flex: none; max-width: none; width: 100%; flex-direction: row; align-items: flex-start; gap: 12px; }
  .team-rec-left-area .team-card-img,
  .team-card-img-placeholder { width: 80px; aspect-ratio: 1 / 1; flex-shrink: 0; }
  .team-rec-left-area .team-card-actions { flex: 1; }
  .team-rec-left-area .team-detail-btn { width: auto; padding: 6px 10px; }
  .team-rec-badge-area { justify-content: flex-start; }
  .team-rec-right-area .team-card-name { font-size: var(--font-size-base); }
  .team-rec-right-area .team-card-price { font-size: var(--font-size-sm); }
}
.team-rec-expert-badge {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, #f59e0b 0%, var(--primary) 100%);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: 16px;
  margin-bottom: 12px;
}
.team-card.expert-pick { border: 2px solid #f59e0b; background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); }
.team-rec-select-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.team-rec-select-card.expert-pick { border-color: #f59e0b; background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); }
.team-rec-select-card.expert-pick.selected { border-color: var(--primary); background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); }
.team-rec-select-card.display-only { cursor: default; border: 2px solid var(--primary); background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); }
.team-rec-select-card.display-only:hover { border-color: var(--primary); background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); }
.team-rec-select-card.display-only .team-rec-checkbox { display: none; }

/* 딥링크 팀 정보 컴팩트 카드 */
.team-info-compact {
  border: 1px solid var(--primary);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.team-info-compact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  text-decoration: none;
  color: inherit;
}
a.team-info-compact-link:hover {
  background: var(--bg-secondary, #f9fafb);
}
.team-info-compact-photo {
  width: 20%;
  min-width: 64px;
  max-width: 100px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary, #f3f4f6);
}
.team-info-compact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-info-compact-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-left: 8px;
}
.team-info-compact-name {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--text-primary, #1f2937);
}
.team-info-compact-breadcrumb {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}
.team-info-compact-stats {
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
}
.team-card-category {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  background: var(--bg-secondary, #f3f4f6);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
}
.team-rec-card-body { flex: 1; min-width: 0; display: flex; flex-direction: row; gap: 16px; }
.team-rec-left-area {
  position: relative;
  flex: 0 0 25%;
  max-width: 160px;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-rec-checkbox {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  align-self: center;
}
.team-rec-left-area .team-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--bg-alt); }
.team-card-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--border) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-rec-left-area .team-card-actions { margin-top: 0; }
.team-rec-left-area .team-detail-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
}
.team-rec-badge-area { display: flex; justify-content: center; }
.team-rec-badge-area .team-rec-expert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: white;
  border-radius: 16px;
  white-space: nowrap;
}
.team-rec-right-area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.team-rec-right-area .team-card-score {
  padding: 2px 8px;
  background: var(--primary);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: 10px;
}
.team-rec-right-area .team-card-disclaimer { font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.4; margin-top: 4px; }
.team-rec-right-area .team-card-booking-history, .team-rec-right-area .team-card-review-analysis, .team-rec-right-area .team-card-ai-reason { margin-top: 6px; } /* 기존 스타일 (하위 호환성) */ .team-rec-card-body .team-rec-expert-badge {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 8px;
}
.team-rec-card-body .team-card-content { padding: 0; }
.team-rec-card-body .team-card-reason { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; margin-top: 8px; margin-bottom: 8px; }
.team-detail-btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: all 0.2s;
}

/* --- 팀 카드 확장 섹션 (PDF 기준) --- */
.team-rec-expert-badge.celebrity-rank-badge { background: linear-gradient(135deg, #f59e0b 0%, var(--primary) 100%); }
.team-rec-expert-badge.track-new { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
.team-card-advantages { margin-top: 8px; border-left: 4px solid #22c55e; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.team-card-advantages strong { display: block; font-size: var(--font-size-base); font-weight: 600; color: #15803d; margin-bottom: 4px; }
.team-card-advantages p { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0; line-height: 1.4; }
.team-card-booking-history { margin-top: 12px; border-left: 4px solid var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.team-card-booking-history strong { display: block; font-size: var(--font-size-base); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.team-card-booking-history p { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0; line-height: 1.5; }
.team-card-review-analysis { margin-top: 10px; padding: 10px 12px; }
.team-card-review-analysis strong { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--primary-dark); margin-bottom: 4px; }
.team-card-review-analysis p { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0; line-height: 1.5; }
.team-card-ai-reason { margin-top: 10px; border-left: 4px solid var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.team-card-ai-reason strong { display: block; font-size: var(--font-size-base); font-weight: 600; color: var(--primary-dark); margin-bottom: 4px; }
.team-card-ai-reason p { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0; line-height: 1.5; }
.team-rec-load-more { margin: 16px 0; text-align: center; }
.team-rec-load-more-btn {
  padding: 12px 24px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.team-rec-load-more-btn:hover:not(:disabled) { background: var(--border); border-color: var(--primary); color: var(--primary); border-style: solid; }

/* --- 팀 카드 1:3 레이아웃 - 모바일 반응형 (기본 스타일 이후에 위치해야 함) --- */
@media (max-width: 480px) {
  .team-rec-select-card { position: relative; }
  .team-rec-badge-area { position: absolute; top: 12px; right: 12px; z-index: 1; }
  .team-rec-badge-area .team-rec-expert-badge { padding: 4px 10px; font-size: var(--font-size-xs); }
  .team-rec-card-body { flex-direction: column !important; gap: 12px; }
  .team-rec-left-area { flex: none !important; max-width: none !important; min-width: 0 !important; width: 100%; flex-direction: column !important; align-items: center; gap: 8px; }
  .team-rec-left-area .team-card-img,
  .team-rec-left-area .team-card-img-placeholder { min-width: auto; flex-shrink: 0; }
  .team-rec-left-area .team-card-actions { width: 100%; max-width: 200px; display: flex; flex-direction: column; gap: 6px; }
  .team-rec-left-area .team-detail-btn { width: 100%; padding: 10px 16px; font-size: var(--font-size-sm); white-space: nowrap; }
  .team-rec-right-area { width: 100%; gap: 6px; }
  .team-rec-right-area .team-card-name { font-size: var(--font-size-base); }
  .team-rec-right-area .team-card-config,
  .team-rec-right-area .team-card-stats { font-size: var(--font-size-sm); }
  .team-rec-right-area .team-card-price { font-size: var(--font-size-sm); }
  .team-card-booking-history,
  .team-card-review-analysis,
  .team-card-ai-reason { margin-top: 8px; padding: 8px 10px; }
  .team-card-booking-history strong,
  .team-card-review-analysis strong,
  .team-card-ai-reason strong,
  .team-card-booking-history p,
  .team-card-review-analysis p,
  .team-card-ai-reason p { font-size: var(--font-size-xs); }
}

/* --- TEAM_SELECT 컴포넌트 --- */
.team-select-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.team-select-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-select-card .team-card-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.team-select-card .team-card-content { flex: 1; padding: 0; }

/* --- SUMMARY_CONFIRM 컴포넌트 --- */
.summary-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.summary-value { font-size: var(--font-size-base); font-weight: 500; color: var(--text); text-align: right; max-width: 60%; }
.summary-requests { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.summary-requests-value { font-size: var(--font-size-base); color: var(--text); line-height: 1.5; }

/* --- QUOTE_CONFIRMATION 컴포넌트 --- */
.quote-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
}
.quote-error {
  padding: 20px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  text-align: center;
  font-size: var(--font-size-base);
}
.quote-event-summary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: 12px; padding: 16px; margin-bottom: 20px; color: white; }
.quote-event-title { font-size: var(--font-size-md); font-weight: 600; margin-bottom: 8px; }
.quote-event-info { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--font-size-sm); opacity: 0.9; }
.quote-event-info span { display: flex; align-items: center; gap: 4px; }
.quote-teams { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.quote-team-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: all 0.2s; }
.quote-team-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.quote-notice { background: #fff8f5; border: 1px solid rgba(var(--primary-rgb), 0.3); border-radius: 8px; padding: 16px; }
.quote-notice-title { font-size: var(--font-size-base); font-weight: 600; color: var(--primary-dark); margin-bottom: 8px; }
.quote-notice-list li { margin-bottom: 4px; }
.quote-team-card.selectable { cursor: pointer; position: relative; border: 2px solid var(--border); transition: all 0.2s ease; display: flex; flex-wrap: wrap; align-items: stretch; }
.quote-team-card.selectable:hover { border-color: var(--primary); background: #fff8f5; }
.quote-team-card.selectable.selected { border-color: var(--primary); background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15); }
.quote-team-card.selectable > .team-rec-card-body { flex: 1; min-width: 0; }
.quote-team-card.selectable > .estimate-arrival-extra,
.quote-team-card.selectable > .quote-card-actions { flex-basis: 100%; }

/* 다중 선택 체크박스 */
.quote-card-select-area { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding-right: 4px; align-self: flex-start; padding-top: 16px; }
.quote-team-checkbox { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; cursor: pointer; }
.quote-team-checkbox input[type="checkbox"] { display: none; }
.quote-team-checkbox-mark {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 2px solid var(--border); border-radius: 6px;
  background: white; transition: all 0.2s ease;
}
.quote-team-checkbox input:checked + .quote-team-checkbox-mark {
  background: var(--primary); border-color: var(--primary);
}
.quote-team-checkbox input:checked + .quote-team-checkbox-mark::after {
  content: '\2713'; color: white; font-size: 14px; font-weight: 700; line-height: 1;
}

/* 견적 도착 카드 내 인라인 체크박스 */
.estimate-checkbox-inline { margin-left: auto; flex-shrink: 0; }

/* 다중 선택 sticky footer */
.quote-multi-select-footer {
  position: sticky; bottom: 0; z-index: 10;
  background: white; border-top: 1px solid var(--border);
  padding: 12px 16px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.quote-select-summary { display: flex; flex-direction: column; gap: 2px; }
.quote-select-hint { font-size: var(--font-size-md); color: var(--primary); font-weight: 600; }
.quote-select-count { font-size: var(--font-size-sm); color: var(--text-secondary); }
.quote-selected-num { color: var(--primary); font-size: var(--font-size-md); }
.quote-select-total-price { font-size: var(--font-size-sm); color: var(--text-secondary); }
.quote-selected-total { color: var(--text-primary); font-size: var(--font-size-md); }
.quote-multi-submit-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-gradient-end) 100%);
  color: white; border: none; border-radius: 8px;
  padding: 14px 28px; font-weight: 600; font-size: var(--font-size-base);
  cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
  min-width: 280px;
}
.quote-multi-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
@media (max-width: 480px) {
  .quote-multi-select-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .quote-multi-submit-btn { width: 100%; text-align: center; min-width: auto; }
  .quote-select-hint { font-size: var(--font-size-sm); word-break: keep-all; }
}

.quote-submit-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-gradient-end) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 16px;
}
.estimate-arrival-section { margin: 16px 0; padding: 16px; background: var(--color-bg-secondary, #f8f9fa); border-radius: 12px; border: 1px solid var(--color-border, #e9ecef); }
.estimate-arrival-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: var(--font-size-base);
}
.estimate-arrival-icon { font-size: var(--font-size-md); }
.estimate-arrival-count { margin-left: auto; font-size: var(--font-size-sm); color: var(--color-primary, var(--primary)); font-weight: 600; }
.estimate-refresh-btn {
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text-secondary, #495057);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.estimate-refresh-btn:hover { background: var(--color-bg-secondary, #f8f9fa); border-color: var(--color-primary, var(--primary)); color: var(--color-primary, var(--primary)); }
.estimate-refresh-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-border, #dee2e6);
  border-top-color: var(--color-primary, var(--primary));
  border-radius: 50%;
  animation: estimate-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes estimate-spin {
  to { transform: rotate(360deg); }
}
.estimate-arrival-empty { text-align: center; padding: 20px 0; color: var(--color-text-secondary, #868e96); }
.estimate-arrival-empty p { margin: 4px 0; font-size: var(--font-size-sm); }
.estimate-arrival-hint { font-size: var(--font-size-sm) !important; }
.estimate-arrival-card { background: #fff; border-radius: 10px; border: 1px solid var(--color-border, #e9ecef); padding: 14px; transition: all 0.2s; position: relative; }
.estimate-arrival-left { flex-shrink: 0; width: 20%; min-width: 120px; display: flex; flex-direction: column; gap: 6px; }
.estimate-arrival-left .estimate-arrival-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; border: 1px solid var(--color-border, #dee2e6); background: var(--bg-alt); }
.estimate-arrival-left .team-card-img-placeholder { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--bg-alt, #f3f4f6); }
@media (max-width: 480px) {
  .estimate-arrival-card-body { flex-direction: column; }
  .estimate-arrival-left { width: 100%; min-width: auto; flex-direction: column; align-items: center; gap: 6px; }
  .estimate-arrival-left .estimate-arrival-photo,
  .estimate-arrival-left .team-card-img-placeholder { max-width: 200px; }
  .estimate-arrival-left .team-card-actions { width: 100%; max-width: 200px; }
  .estimate-arrival-left .team-detail-btn { width: 100%; padding: 8px 12px; }
  .estimate-arrival-right { width: 100%; }
}
.estimate-arrival-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.estimate-arrival-right .estimate-arrival-artist-name { font-size: var(--font-size-base); font-weight: 700; color: var(--text, #1f2937); }
.estimate-arrival-card.selectable { cursor: pointer; border: 2px solid var(--border); display: flex; flex-wrap: wrap; align-items: stretch; }
.estimate-arrival-card.selectable > .estimate-arrival-card-body { flex: 1; min-width: 0; }
.estimate-arrival-card.selectable:hover { border-color: var(--primary); background: #fff8f5; }
.estimate-arrival-card.selectable.selected { border-color: var(--primary); background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15); }
.estimate-arrival-card.hired { border-color: var(--color-success, #51cf66); background: #f0fff4; }
.estimate-arrival-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.estimate-arrival-header-badges,
.estimate-arrival-extra-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.estimate-arrival-extra-row { margin-bottom: 6px; }
.estimate-arrival-score { white-space: nowrap; }
.estimate-arrival-score-reasons { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.estimate-arrival-score-reason { font-size: var(--font-size-sm); color: var(--color-text-secondary, #868e96); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.estimate-arrival-score-details { margin-top: 8px; border-top: 1px solid var(--color-border, #e9ecef); padding-top: 6px; }
.estimate-arrival-score-summary { min-height: 38px; padding: 6px 0; display: flex; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; list-style: none; font-size: var(--font-size-xs); color: var(--color-text-secondary, #868e96); font-weight: 600; touch-action: manipulation; }
.estimate-arrival-score-summary span:last-child { margin-left: auto; font-weight: 500; }
.estimate-arrival-score-summary::-webkit-details-marker { display: none; }
.estimate-arrival-score-summary::before { content: '▸'; color: var(--color-text-secondary, #868e96); }
.estimate-arrival-score-details[open] .estimate-arrival-score-summary::before { content: '▾'; }
.estimate-arrival-score-bar-row { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.estimate-arrival-score-bar { flex: 1 1 auto; width: 100%; height: 6px; border-radius: 3px; background: #f1f3f5; overflow: hidden; }
.estimate-arrival-score-bar-fill { height: 100%; border-radius: 3px; background: var(--primary); transition: width 0.25s ease; }
.estimate-arrival-score-bar-fill[data-tier="high"] { background: var(--primary); }
.estimate-arrival-score-bar-fill[data-tier="mid"] { background: #f59f00; }
.estimate-arrival-score-bar-fill[data-tier="low"] { background: #adb5bd; }
.estimate-arrival-score-percent { flex: 0 0 auto; min-width: 34px; color: var(--primary); font-size: var(--font-size-xs); font-weight: 700; line-height: 1; }
.estimate-arrival-score-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: var(--font-size-xs); color: var(--color-text-secondary, #868e96); }
.estimate-arrival-score-detail-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.estimate-arrival-score-detail { display: flex; align-items: flex-start; gap: 5px; font-size: var(--font-size-xs); color: var(--color-text-secondary, #666); line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.estimate-arrival-score-icon { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; margin-top: 1px; }
.estimate-arrival-score-category { flex: 0 1 auto; max-width: 48%; padding: 1px 6px; border-radius: 4px; background: #f1f3f5; color: var(--color-text-primary, #212529); font-weight: 600; overflow-wrap: anywhere; }
.estimate-arrival-score-desc { min-width: 0; }
.estimate-arrival-score-value { color: var(--primary); font-weight: 600; }
.estimate-arrival-score-max { color: var(--color-text-secondary, #868e96); font-weight: 400; margin-left: 2px; }
.estimate-arrival-score-detail.ok .estimate-arrival-score-icon { background: #6c757d; color: #fff; }
.estimate-arrival-score-detail.warn .estimate-arrival-score-icon { border: 1px solid #868e96; color: #6c757d; background: transparent; }
.estimate-status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: var(--font-size-sm); font-weight: 600; }
.estimate-status-badge.pending { background: #fff8f5; color: var(--primary); }
.estimate-status-badge.hired { background: #d3f9d8; color: #2b8a3e; }
.estimate-status-badge.declined { background: #ffe3e3; color: #c92a2a; }
.estimate-status-badge.already-hired { background: #f1f3f5; color: #868e96; }
.estimate-status-badge.selected { background: #fff3e0; color: var(--primary); font-weight: 700; }
.estimate-status-badge.new-team { background: #eef2ff; color: #243b6b; }
.estimate-arrival-card.selected { border-color: var(--primary); background: #fff8f5; }
.quote-team-card.selected { border: 2px solid var(--primary); background: #fff8f5; }
.estimate-declined-msg { color: #c92a2a; font-size: var(--font-size-sm); font-weight: 500; }
.estimate-declined-block { text-align: center; color: #c92a2a; font-size: var(--font-size-base); font-weight: 600; padding: 16px 0; }
.estimate-arrival-price { display: flex; align-items: baseline; gap: 6px; }
.estimate-arrival-label { font-size: var(--font-size-sm); color: var(--color-text-secondary, #868e96); min-width: 50px; }
.estimate-arrival-detail { display: flex; align-items: center; gap: 6px; }
.estimate-arrival-memo { margin-top: 4px; }
.estimate-arrival-memo p { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--color-text-primary, #212529); line-height: 1.5; word-break: break-word; }
.estimate-arrival-photo { width: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border, #dee2e6); }
.estimate-arrival-price-detail { font-size: var(--font-size-sm); color: var(--color-text-secondary, #868e96); line-height: 1.4; }
.estimate-history-section { margin-top: 10px; border-top: 1px dashed var(--color-border, #dee2e6); padding-top: 8px; }
.estimate-history-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #868e96);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: color 0.2s;
}
.estimate-history-toggle:hover { color: var(--color-primary, var(--primary)); }
.estimate-history-toggle-arrow { font-size: 10px; transition: transform 0.25s ease; }
.estimate-history-section.open .estimate-history-toggle-arrow { transform: rotate(180deg); }
.estimate-history-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.estimate-history-section.open .estimate-history-list { max-height: 1000px; }
.estimate-history-item { padding: 10px 12px; margin-top: 8px; background: var(--color-bg-secondary, #f8f9fa); border-radius: 8px; border-left: 3px solid var(--color-border, #dee2e6); }
.estimate-history-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.estimate-history-item-price { font-size: var(--font-size-sm); color: var(--color-text-secondary, #868e96); text-decoration: line-through; }
.estimate-history-item.declined .estimate-history-item-price { text-decoration: none; color: #c92a2a; }
.estimate-history-item-memo { font-size: var(--font-size-sm); color: var(--color-text-primary, #212529); line-height: 1.5; word-break: break-word; margin-top: 4px; }
.estimate-history-item-memo.agency { color: var(--color-text-secondary, #868e96); font-style: italic; }

/* --- 견적도착 스타일 (PDF 기반 - 1:3 가로 레이아웃) --- */
.quote-vat-notice { color: #dc2626; font-size: var(--font-size-sm); margin-bottom: 16px; padding: 0 4px; }
.quote-card-body { display: flex; gap: 16px; margin-bottom: 12px; }
.quote-card-left { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quote-card-img { width: 120px; height: 120px; border-radius: 8px; object-fit: cover; background: var(--bg-alt); }
.quote-card-img-placeholder { width: 120px; height: 120px; border-radius: 8px; background: var(--border); }
.quote-detail-btn {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-decoration: none;
  text-align: center;
  width: 100%;
}
.quote-card-name { font-size: var(--font-size-lg); font-weight: 700; color: var(--text); margin-bottom: 4px; }
.quote-card-price { font-size: var(--font-size-md); font-weight: 700; color: #ea580c; margin-bottom: 8px; }
.quote-price-vat { font-size: var(--font-size-sm); font-weight: 400; color: #ea580c; }
.quote-card-reason { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; }
.quote-card-actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.quote-book-btn {
  flex: 1;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-gradient-end) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.quote-card-actions .chat-inquiry-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
}
.quote-book-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); }
.quote-confirmation-component [disabled] .quote-book-btn { background: #cbd5e1; cursor: not-allowed; }
.quote-team-card [disabled] { pointer-events: none; }
/* 견적 확인 컴포넌트: 히스토리에서도 상호작용 유지 (채팅/섭외 버튼) */
.message.is-history .quote-confirmation-component,
.message.is-history .multi-service-quote-confirmation { pointer-events: auto; }
@media (max-width: 480px) {
  .quote-event-info { flex-direction: column; gap: 6px; }
  .quote-card-body { flex-direction: column; align-items: center; }
  .quote-card-left { flex: none; width: 100%; max-width: 160px; }
  .quote-card-img { width: 100%; height: auto; aspect-ratio: 1; }
  .quote-card-img-placeholder { width: 100%; height: auto; aspect-ratio: 1; }
  .quote-card-actions { flex-direction: column; }
  .quote-book-btn { width: 100%; }
  .quote-card-actions .chat-inquiry-btn { width: 100%; }
}

/* --- GENRE_CANDIDATE_SELECT 컴포넌트 --- */
.genre-candidate-title { font-size: var(--font-size-md); font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1.5; }
.genre-candidate-keywords {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border-radius: 20px;
  font-weight: 700;
  font-size: var(--font-size-base);
  margin-right: 4px;
}
.genre-candidate-subtitle { font-size: var(--font-size-base); color: var(--text-muted); }
.genre-candidate-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--bg);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.genre-candidate-card.selected { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.04) 100%); border-color: var(--primary); }
.genre-candidate-radio {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: all 0.2s ease;
}
.genre-candidate-radio-circle { width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: all 0.2s ease; }
.genre-candidate-card.selected .genre-candidate-radio-circle { background: white; }
.genre-candidate-content { flex: 1; }
.genre-candidate-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.genre-candidate-genre1 { font-size: var(--font-size-sm); color: var(--text-muted); padding: 2px 8px; background: var(--border); border-radius: 12px; }
.genre-candidate-reason { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; }
.genre-candidate-submit-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-gradient-end) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}
.genre-candidate-manual { text-align: center; padding-top: 16px; border-top: 1px solid var(--border); }
.genre-candidate-manual-text { font-size: var(--font-size-sm); color: var(--text-muted); margin-right: 8px; }
.genre-candidate-manual-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.genre-candidate-manual-btn:hover { color: var(--primary-dark); }
.genre-candidate-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: var(--font-size-base); }
@media (max-width: 480px) {
  .genre-candidate-select-component { padding: 16px; }
  .genre-candidate-card { padding: 14px; }
  .genre-candidate-genre2 { font-size: var(--font-size-base); }
  .genre-candidate-reason { font-size: var(--font-size-sm); }
}

/* --- Phase 2-C 연예인 컴포넌트 스타일 --- */

/* --- BUDGET_INPUT 컴포넌트 --- */
.budget-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.budget-input-field {
  flex: 1;
  border: none;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.budget-input-field::placeholder { color: #94a3b8; font-weight: 400; }
.budget-input-field[type=number] { -moz-appearance: textfield; }
.budget-input-unit { font-size: var(--font-size-md); color: var(--text-secondary); font-weight: 500; }
.budget-guide { background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); border: 1px solid rgba(var(--primary-rgb), 0.2); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.budget-guide-title { font-size: var(--font-size-base); font-weight: 600; color: var(--primary-dark); margin-bottom: 12px; }
.budget-guide-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: white;
  border-radius: 8px;
}

/* 예산 티어 선택 */
.budget-tier-select .budget-tier-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.budget-tier-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.budget-tier-btn:hover {
  border-color: #FF6B35;
  background: #FFF8F5;
}

.budget-tier-btn.selected {
  border-color: #FF6B35;
  background: #FFF8F5;
}

.budget-tier-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #333;
}

.budget-tier-range {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: #FF6B35;
}

/* --- CELEBRITY_SELECT_BRANCH 컴포넌트 --- */
.celebrity-branch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.celebrity-branch-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--bg); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.celebrity-branch-btn .branch-icon { font-size: var(--font-size-2xl); margin-bottom: 4px; }

/* --- CELEBRITY_SEARCH 컴포넌트 --- */
.celebrity-search-wrapper { display: flex; gap: 10px; }
.celebrity-search-input {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color 0.2s;
}
.celebrity-search-input::placeholder { color: #94a3b8; }
.celebrity-search-btn {
  padding: 14px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

/* --- BUDGET_COMPARE 컴포넌트 --- */

/* --- OPEN_PRICE_DISPLAY 컴포넌트 --- */
.open-price-component { padding: 20px; background: transparent; }
.open-price-component.open-price-not-found { background: white; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border-left: 4px solid #6b7280; }
.open-price-not-found-message {
  padding: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-size: var(--font-size-base);
  color: #991b1b;
  line-height: 1.6;
  margin-bottom: 16px;
  text-align: center;
}
.open-price-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.open-price-ai-recommend-section { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
.ai-recommend-hint { text-align: center; font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0 0 12px 0; line-height: 1.5; }

/* --- EVENT_STATUS_BRANCH 컴포넌트 --- */
.event-status-btn {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

/* --- AGENCY_CONTACT_STATUS 컴포넌트 --- */
.agency-contact-status-component { padding: 32px 20px; background: white; border-radius: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.agency-status-icon { font-size: calc(38.4px * var(--font-scale)); margin-bottom: 16px; }
.agency-status-desc { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.agency-status-progress { max-width: 200px; margin: 0 auto 24px; }
.agency-status-progress .progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.agency-status-progress .progress-fill {
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-gradient-end) 100%);
  border-radius: 3px;
  animation: progress-animation 2s infinite;
}
@keyframes progress-animation {
  0% { width: 20%; }
  50% { width: 80%; }
  100% { width: 20%; }
}

/* --- AGENCY_RESPONSE 컴포넌트 --- */
.agency-response-component.response-ok { border-left: 4px solid #16a34a; }
.agency-response-component.response-no { border-left: 4px solid #dc2626; }
.agency-response-component.response-negotiate { border-left: 4px solid #f59e0b; }
.agency-response-message {
  padding: 16px;
  background: var(--bg);
  border-radius: 10px;
  font-size: var(--font-size-base);
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
}
.agency-response-help {
  padding: 14px 16px;
  background: #fff8f5;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  color: var(--primary-dark);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* --- CELEBRITY_CATEGORY_SELECT 컴포넌트 --- */
.category-group-header { font-size: var(--font-size-base); font-weight: 600; color: var(--text); margin-bottom: 12px; padding-left: 4px; }
.category-options { display: flex; flex-wrap: wrap; gap: 10px; }
.category-option-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s;
}
.category-option-btn .option-icon { font-size: var(--font-size-lg); }

/* --- CELEBRITY_RECOMMENDATION 컴포넌트 --- */
.celebrity-rec-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.celebrity-card-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-alt);
}
.celebrity-card-fee { font-size: var(--font-size-base); color: var(--primary); font-weight: 600; margin-bottom: 6px; }
.celebrity-select-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.celebrity-select-radio {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.radio-circle { width: 12px; height: 12px; border-radius: 50%; background: transparent; transition: all 0.2s; }
.radio-circle.checked { background: var(--primary); }
.celebrity-select-card .celebrity-card-content { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.celebrity-select-card .celebrity-card-fee { font-size: var(--font-size-base); color: var(--primary); font-weight: 600; margin-bottom: 0; }

/* --- CELEBRITY_SUMMARY_CONFIRM 컴포넌트 --- */
@media (max-width: 480px) {
  .celebrity-branch-btn { padding: 20px 16px; }
  .celebrity-branch-btn .branch-icon { font-size: var(--font-size-2xl); }
  .budget-input-field { font-size: var(--font-size-lg); }
  .celebrity-card-img { width: 56px; height: 56px; }
}

/* --- TIME_SELECT 필드 스타일 --- */
.time-select-container { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.time-chip {
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: var(--font-size-base);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 70px;
  text-align: center;
}
.time-chip.selected { font-weight: 500; }

/* --- DATE 필드 스타일 --- */
.compound-date {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-md);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s ease;
}

/* --- DATE_TIME_INLINE 필드 스타일 (날짜 + 시간 한 줄) --- */
.datetime-inline-container { display: flex; gap: 12px; align-items: center; }
.datetime-inline-container .datetime-inline-date {
  flex: 1;
  min-width: 140px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-md);
  background: var(--surface);
  color: var(--text);
}
@media (max-width: 480px) {
  .datetime-inline-container { flex-wrap: wrap; gap: 8px; }
  .datetime-inline-container .datetime-inline-date { width: 100%; flex: none; }
  .datetime-inline-container .datetime-inline-ampm,
  .datetime-inline-container .datetime-inline-hour { flex: 1; min-width: 80px; }
}

/* --- DYNAMIC_SELECT 필드 스타일 --- */
.compound-dynamic-select .dynamic-placeholder,
/* ============================================================================
   DROPDOWN 필드 스타일
   ============================================================================
*/
.compound-dropdown {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.compound-dropdown option { padding: 8px; }
@media (max-width: 480px) {
  .time-chip { padding: 8px 12px; font-size: var(--font-size-sm); min-width: 60px; }
  .time-select-container { gap: 6px; }
}

/* --- 연예인 플로우 신규 스타일 (PDF 반영) --- */
.celebrity-category-chips { padding: 16px; }
.category-chip-btn {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
.category-chip-btn:hover:not(:disabled) { border-color: var(--primary); background: #fff8f5; color: var(--primary); }
.open-price-option2 { padding: 16px; }
.celebrity-accumulated-list { background: var(--bg); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.accumulated-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.accumulated-item.selected { border-color: var(--primary); background: #fff8f5; }
.accumulated-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: white;
}
.accumulated-name { flex: 1; font-size: var(--font-size-base); font-weight: 500; color: var(--text); }
.celebrity-add-search-btn {
  width: 100%;
  padding: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.celebrity-add-search-input-wrapper { display: flex; gap: 8px; margin-top: 12px; }
.celebrity-add-search-input { flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--font-size-base); }
.celebrity-add-search-submit {
  padding: 12px 20px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}
.celebrity-rec-action-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.celebrity-rec-secondary-btn {
  width: 100%;
  padding: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
.celebrity-rec-secondary-btn:hover:not(:disabled) { background: var(--border); border-color: var(--primary); }
.celebrity-rec-secondary-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; }
.celebrity-rec-secondary-row .celebrity-rec-secondary-btn { flex: 1 1 auto; min-width: calc(50% - 4px); padding: 12px 8px; font-size: var(--font-size-sm); }
.celebrity-rec-quote-desc { text-align: center; font-size: var(--font-size-base); color: var(--text-secondary); margin: 16px 0 12px 0; }
.celebrity-rank-badge { background: linear-gradient(135deg, #FFD700, #FFA500) !important; color: #333 !important; }
.team-card-disclaimer { font-size: var(--font-size-xs); color: #94a3b8; margin-top: 4px; }

/* --- UI 그룹핑 스타일 (A영역/B영역 구분) --- */
.team-rec-group-a { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.team-rec-group-b { padding-top: 8px; }
.team-card-showgle-stats { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: var(--font-size-sm); }
.team-card-rating { color: #f59e0b; font-weight: 600; }
.team-card-likes { color: #ef4444; font-weight: 600; }
.team-rec-genre-sel-btn { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; }
.team-rec-genre-sel-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3); }

/* --- 팀 추천 액션 카드 (2개 나란히 배치) --- */
.team-rec-action-cards { display: flex; gap: 16px; margin-top: 16px; }
.team-rec-action-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.team-rec-action-title { font-size: var(--font-size-base); font-weight: 500; color: var(--text); line-height: 1.5; margin-bottom: 8px; }
.team-rec-action-tip { font-size: var(--font-size-sm); color: #dc2626; font-weight: 500; margin-bottom: 16px; flex-grow: 1; }
.team-rec-action-card .team-rec-submit-btn,
.team-rec-action-card .team-rec-expert-btn { margin-top: auto; }
.team-rec-sample-cta { text-align: center; padding: 24px 16px; margin-top: 16px; }
.team-rec-sample-cta-text { font-size: var(--font-size-md); color: var(--text); line-height: 1.6; margin-bottom: 16px; }
.team-rec-sample-cta-text strong { color: var(--primary); }
.team-rec-cta-btn { display: block; width: 100%; padding: 14px 24px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: var(--font-size-md); font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.team-rec-cta-btn:hover { opacity: 0.85; }
.team-rec-select-card.sample-card { cursor: default; }
.team-rec-select-card.sample-card:hover { box-shadow: none; }
.team-rec-cards:has(.sample-card) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 640px) { .team-rec-cards:has(.sample-card) { grid-template-columns: 1fr; } }
.team-review-btn { color: var(--primary); font-size: var(--font-size-sm); text-decoration: none; margin-left: 8px; }
.team-review-btn:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .team-rec-action-cards { flex-direction: column; }
  .mc-genre-row { flex-direction: column; }
  .mc-genre-btn { width: 100%; }
  .date-time-inline-row { flex-direction: column; }
  .date-time-date-input,
  .date-time-ampm-select,
  .date-time-hour-select { width: 100%; }
  .region-select-row { flex-direction: column; }
  .region-sido-select,
  .region-sigungu-select { width: 100%; }
  .ai-checkpoint-btn { width: 100%; }
  .booking-confirm-component { padding: 16px; }
  .booking-confirm-title { font-size: var(--font-size-base); }
  .booking-detail-item { flex-direction: column; gap: 4px; }
  .booking-contact-item { flex-direction: column; gap: 4px; }
  .svc-complete-container { padding: 16px; }
  .svc-complete-title { font-size: var(--font-size-md); }
  .svc-complete-actions { flex-direction: column; }
  .svc-complete-btn { width: 100%; }
}

/* --- MC (Phase 2-B) 컴포넌트 스타일 --- */
.mc-genre-select-component { padding: 20px; background: var(--surface); border-radius: 16px; }
.mc-genre-header { font-size: var(--font-size-md); font-weight: 600; color: var(--text); margin-bottom: 20px; text-align: center; }
.mc-genre-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mc-genre-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100px;
}
.mc-genre-desc { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 4px; }
.mc-genre-submit { margin-top: 20px; }
.mc-genre-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}
.mc-rec-change-btn {
  padding: 12px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
.mc-rec-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.mc-rec-action-section { text-align: center; }
.mc-rec-action-desc { font-size: var(--font-size-base); color: var(--text); margin-bottom: 6px; }
.mc-rec-action-tip { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 12px; }
.mc-summary-confirm-component { padding: 24px; background: var(--surface); border-radius: 16px; }
.mc-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
}
.mc-summary-label { font-size: var(--font-size-base); color: var(--text-secondary); font-weight: 500; }
.mc-summary-requests { padding: 16px; background: #fafafa; border-radius: 8px; margin-bottom: 20px; }
.mc-summary-requests-value { font-size: var(--font-size-base); color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.mc-summary-question { text-align: center; font-size: var(--font-size-base); color: var(--text); margin-bottom: 16px; }
.mc-summary-actions { display: flex; gap: 12px; }
.mc-summary-btn {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.mc-summary-btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* --- Phase 2-E/F/G/H: 시스템~음식 서비스 컴포넌트 --- */
.ai-checkpoint-component { padding: 20px; background: linear-gradient(135deg, #fff8f5 0%, #fff0eb 100%); border-radius: 16px; border: 1px solid var(--border); }
.ai-checkpoint-message {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  border-left: 4px solid var(--primary);
}
.ai-checkpoint-actions { display: flex; justify-content: center; }
.ai-checkpoint-btn {
  padding: 14px 32px;
  border-radius: 12px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}
.ai-checkpoint-btn.primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); }
.ai-checkpoint-btn.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4); }
.ai-checkpoint-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.date-time-date-input {
  flex: 1;
  min-width: 140px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  background: var(--surface);
  color: var(--text);
}
.date-time-ampm-select, .date-time-hour-select {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.date-time-ampm-select { min-width: 80px; }
.date-time-hour-select { min-width: 80px; }
.region-sido-select, .region-sigungu-select {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.section-header-component { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; padding-top: 16px; }
.section-header-divider { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.section-header-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  padding: 4px 12px;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 16px;
}

/* --- PAYMENT_REQUEST 컴포넌트 (결제 요청) --- */
.payment-request-component { padding: 1.25rem; }
.payment-request-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; }
.payment-request-icon { font-size: 1.5rem; }
.payment-request-title { font-size: 1.125rem; font-weight: 700; color: var(--text); }
/* 썸네일 + 결제 정보 래핑: 데스크톱 횡배치, 모바일 종배치 */
.payment-summary-with-thumb { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.payment-team-thumb-wrap { flex-shrink: 0; }
.payment-team-thumb { width: 72px; height: 72px; border-radius: 0.75rem; object-fit: cover; border: 2px solid var(--border); }
.payment-summary-with-thumb .payment-request-summary { flex: 1; margin-bottom: 0; }
@media (max-width: 480px) {
  .payment-summary-with-thumb { flex-direction: column; align-items: center; }
  .payment-team-thumb { width: 80px; height: 80px; }
  .payment-summary-with-thumb .payment-request-summary { width: 100%; }
}
.payment-request-summary { background: var(--bg-alt); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.payment-summary-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
.payment-summary-item + .payment-summary-item { border-top: 1px solid var(--border); }
.payment-summary-label { font-size: 0.875rem; color: var(--text-secondary); }
.payment-summary-value { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.payment-summary-item.payment-total { padding-top: 0.75rem; margin-top: 0.25rem; border-top: 2px solid var(--border); }
.payment-summary-item.payment-total .payment-summary-label { font-weight: 700; font-size: 0.938rem; color: var(--text); }
.payment-price { font-size: 1.125rem !important; font-weight: 700 !important; color: var(--primary) !important; }
.payment-price-breakdown { text-align: right; font-size: 0.75rem; color: var(--text-secondary); padding: 0.25rem 0 0; }
.payment-account-info { background: var(--card-bg); border: 2px solid var(--primary); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.payment-account-header {
  font-size: 0.938rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.payment-account-detail { display: flex; flex-direction: column; gap: 0.5rem; }
.payment-account-row { display: flex; justify-content: space-between; align-items: center; }
.payment-account-label { font-size: 0.875rem; color: var(--text-secondary); }
.payment-account-value { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.payment-account-value.account-number { font-size: 1rem; font-weight: 700; color: var(--primary); letter-spacing: 0.03em; }
.payment-request-notice { margin-bottom: 1rem; padding: 0.75rem; background: var(--bg-alt); border-radius: 0.5rem; }
.payment-request-notice p { margin: 0; font-size: 0.813rem; color: var(--text-secondary); line-height: 1.6; }
.payment-request-notice.postpay-notice { background: rgba(242, 101, 34, 0.05); border: 1px solid rgba(242, 101, 34, 0.2); }
.payment-preparing-msg { color: var(--primary) !important; font-weight: 600; text-align: center; }
.payment-request-actions { display: flex; gap: 0.625rem; }
.payment-btn {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: none;
  border-radius: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.payment-btn-primary { background: var(--primary); color: var(--card-bg); }
.payment-btn-primary:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 0.25rem 0.75rem rgba(242, 101, 34, 0.3); }
.payment-btn-primary:active:not(:disabled) { transform: translateY(0); }
.payment-btn:disabled, .payment-btn-disabled { background: var(--bg-alt) !important; color: var(--text-secondary) !important; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.payment-method-section { margin-top: 1rem; }
.payment-method-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; }
.payment-method-options { display: flex; gap: 0.75rem; }
.payment-method-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.payment-method-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--bg-alt); transform: translateY(-2px); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); }
.payment-method-btn:active:not(:disabled) { transform: translateY(0); }
.payment-method-icon { font-size: 1.5rem; }
.payment-method-label { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.payment-method-btn-selected { border-color: var(--primary) !important; background: rgba(242, 101, 34, 0.08) !important; }
.payment-method-btn-dimmed { opacity: 0.4; cursor: not-allowed; }
.payment-method-btn:disabled { cursor: not-allowed; }
.payment-method-info { padding: 0.75rem 1rem; background: var(--bg-alt); border-radius: 0.5rem; margin-bottom: 0.75rem; }
.payment-method-info p { margin: 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }

/* --- 다중 서비스 결제 진행 표시 --- */
.payment-multi-progress { margin-bottom: 1.25rem; padding: 1rem; background: var(--bg-alt); border-radius: 0.75rem; }
.payment-multi-progress-header { display: flex; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; }
.payment-multi-progress-text { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.payment-multi-progress-current { font-size: 0.813rem; font-weight: 700; color: var(--primary); }
.payment-multi-progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 0.75rem; }
.payment-multi-progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s ease; }
.payment-completed-services { display: flex; flex-direction: column; gap: 0.375rem; }
.payment-completed-service { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; background: rgba(76, 175, 80, 0.08); border-radius: 0.375rem; font-size: 0.813rem; }
.payment-completed-check { color: #4CAF50; font-weight: 700; flex-shrink: 0; }
.payment-completed-name { flex: 1; color: var(--text-secondary); }
.payment-completed-amount { font-weight: 600; color: var(--text); white-space: nowrap; }

/* --- BOOKING_CONFIRM 컴포넌트 (섭외확정) --- */
.booking-confirm-component { padding: 24px; background: #fff; border-radius: 16px; font-size: var(--font-size-sm); }
.booking-confirm-icon { font-size: calc(38.4px * var(--font-scale)); color: #4CAF50; margin-bottom: 8px; }
.booking-confirm-title { font-size: var(--font-size-lg); font-weight: 700; color: #1a1a1a; }
.booking-confirm-details { background: #f8f9fa; border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.booking-detail-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e9ecef; }
hr.booking-team-divider { border: none; border-top: 2px dashed #dee2e6; margin: 12px 0; }
.booking-detail-label { color: #666; font-size: var(--font-size-sm); }
.booking-detail-value { font-weight: 600; color: #1a1a1a; font-size: var(--font-size-sm); }
.booking-confirm-postpay-notice {
  background: #fff3e0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  color: #e65100;
  font-size: var(--font-size-sm);
}
.booking-confirm-contact-section > p { font-size: var(--font-size-sm); color: #555; margin-bottom: 12px; }
.booking-confirm-contacts { background: #fff8f5; border-radius: 12px; padding: 16px; }
.booking-contact-item { display: flex; justify-content: space-between; padding: 8px 0; }
.booking-contact-label { color: #333; font-size: var(--font-size-sm); }
.booking-contact-value { font-weight: 600; color: var(--primary-dark); font-size: var(--font-size-sm); }
.booking-confirm-footer {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
  color: #666;
  font-size: var(--font-size-xs);
  line-height: 1.8;
}
.booking-confirm-footer p { margin: 4px 0; }

/* --- 다중 서비스 BOOKING_CONFIRM --- */
.booking-multi-summary .booking-multi-count { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 400; margin-top: 4px; }
.booking-multi-services { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.booking-service-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.booking-service-card-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.booking-service-card-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: var(--font-size-xs); font-weight: 700; color: #fff; background: var(--primary); }
.booking-service-card-team { font-size: var(--font-size-sm); font-weight: 600; color: var(--text); }
.booking-service-card .booking-confirm-details { margin-bottom: 0; border-radius: 0; }
.booking-grand-total { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: #fff8f5; border: 2px solid var(--primary); border-radius: 12px; margin-bottom: 20px; }
.booking-grand-total-label { font-size: var(--font-size-base); font-weight: 700; color: var(--text); }
.booking-grand-total-value { font-size: 1.25rem; font-weight: 700; color: var(--primary); }

/* --- SVC_COMPLETE_SUMMARY 서비스 완료 요약 --- */
.svc-complete-container { padding: 20px; background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.svc-complete-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.svc-complete-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--text); margin: 0; }
.svc-complete-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; transition: all 0.2s; }
.svc-complete-card.completed { background: #f0fdf4; border-color: #86efac; }
.svc-complete-card.pending { background: #fff0eb; border-color: rgba(var(--primary-rgb), 0.3); }
.svc-complete-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.svc-complete-card-status { font-size: var(--font-size-base); font-weight: bold; color: var(--success); flex-shrink: 0; }
.svc-complete-card.pending .svc-complete-card-status { color: var(--warning); }
.svc-complete-card-detail { font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 28px; line-height: 1.4; }
.svc-complete-estimate-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.svc-complete-estimate-badge.success { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }
.svc-complete-estimate-badge.failed { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.svc-complete-estimate-badge.pending { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }
.svc-complete-estimate-detail { font-size: var(--font-size-xs); color: var(--text-secondary); padding-left: 28px; margin-top: 6px; font-family: 'Courier New', monospace; }
.svc-complete-actions { display: flex; gap: 10px; margin-top: 16px; }
.svc-complete-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.svc-complete-btn.primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.3); }
.svc-complete-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* --- SECTION 3: Responsive --- */
@media (max-width: 768px) {
  .sidebar { position: fixed; left: -280px; top: 0; bottom: 0; z-index: 1000; transition: left 0.3s ease; }
  .sidebar.open { left: 0; }
  .sidebar-overlay.active { display: block; opacity: 1; }
  .main-content { width: 100%; margin-left: 0; }
  .mobile-header { display: flex; }
  .chat-header { display: none; }
  .ui-component { padding: 12px; }
  .select-component.select-cards { grid-template-columns: repeat(2, 1fr); }
  .chip { flex: 1 1 calc(50% - 4px); min-width: 80px; max-width: none; padding: 10px 12px; font-size: var(--font-size-xs); }
  .messages-container { padding: 8px; }
  .message.ai { width: 100%; max-width: 100%; }
  .team-card-img { height: 150px; }
  .chat-textarea { padding: 10px 14px; min-height: 40px; }
  .chat-send-btn { width: 40px; height: 40px; }
}

/* --- 소형 모바일 (max-width: 380px) --- */
@media (max-width: 380px) {
  .select-component.select-cards { grid-template-columns: 1fr; }
  .team-card-content { padding: 12px; }
  .review-star { width: 36px; height: 36px; font-size: var(--font-size-md); }
  .ui-submit-btn,
  .contract-confirm-btn,
  .payment-confirm-btn,
  .reservation-next-btn,
  .contact-next-btn,
  .event-next-btn,
  .review-submit-btn { padding: 12px; font-size: var(--font-size-xs); }
}

/* --- 고해상도 디스플레이 (min-width: 1200px) --- */
@media (min-width: 1200px) {
  .recommendation-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

/* --- 다크 모드 지원 (시스템 설정 기반) --- */

/* --- 접근성: 모션 감소 선호 --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* --- 인쇄 스타일 --- */
@media print {
  .sidebar,
  .sidebar-overlay,
  .mobile-header,
  .input-area,
  .chat-input-area,
  .chat-actions,
  .ui-submit-btn,
  .team-select-btn { display: none !important; }
  .main-content { width: 100%; margin: 0; }
  .messages-container { max-height: none; overflow: visible; }
}

/* --- 쇼글 미등록 연예인 배지 --- */
.celebrity-external-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--bg-alt);
  color: #64748b;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-size-xs, 11px);
  font-weight: 500;
}

/* --- AUTH_REQUIRED 컴포넌트 (로그인 필요 안내) --- */
.login-required-notice { padding: 24px 20px; background: #FFF8E1; border-radius: 12px; border: 1px solid #FFE082; text-align: center; }
.login-required-icon { font-size: var(--font-size-2xl); margin-bottom: 8px; }
.login-required-title { font-weight: 700; font-size: var(--font-size-base); color: #E65100; margin-bottom: 10px; }
.login-required-desc { font-size: var(--font-size-sm); color: #555; line-height: 1.6; margin-bottom: 16px; }
.login-required-actions { display: flex; justify-content: center; gap: 8px; }
.login-required-btn {
  padding: 12px 32px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: none;
}
.login-required-btn.primary { background: #FF6D00; color: #fff; }
.login-required-btn.primary:hover { background: #E65100; }

/* --- 1:1 채팅 컴포넌트 --- */
.chat-floating-btn {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: calc(24px + env(safe-area-inset-right));
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: calc(19.2px * var(--font-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1050;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}
.chat-floating-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.chat-floating-label {
  font-size: 11px;
  color: white;
  line-height: 1;
  white-space: nowrap;
}
.chat-floating-btn:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.chat-floating-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ef4444;
  color: white;
  font-size: calc(8.8px * var(--font-scale));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.chat-list-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: var(--bg, #fff);
  z-index: 1100;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}
.chat-list-overlay.active { right: 0; }
.chat-list-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; padding-top: calc(16px + env(safe-area-inset-top)); border-bottom: 1px solid var(--border, #e5e7eb); }
.chat-list-header h3 { margin: 0; font-size: var(--font-size-base); font-weight: 600; }
.chat-close-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: calc(19.2px * var(--font-scale));
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.chat-list-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.chat-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-list-avatar-wrap { flex-shrink: 0; }
.chat-list-avatar, .chat-list-avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.chat-list-avatar-placeholder {
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: 600;
}
.chat-list-avatar-placeholder svg {
  color: #d7d7d7;
}
.chat-list-name { font-size: calc(9.6px * var(--font-scale)); font-weight: 500; color: var(--text, #111827); margin-bottom: 2px; }
.chat-list-preview { font-size: calc(10.4px * var(--font-scale)); color: var(--text-secondary, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-list-time { font-size: calc(9.6px * var(--font-scale)); color: var(--text-secondary, #9ca3af); }
.chat-unread-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ef4444;
  color: white;
  font-size: calc(8.8px * var(--font-scale));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-list-empty { text-align: center; padding: 48px 20px; color: var(--text-secondary, #9ca3af); font-size: var(--font-size-xs); }
.chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg, #fff);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.chat-overlay.active { transform: translateX(0); }
.chat-overlay-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg, #fff);
  flex-shrink: 0;
}
.chat-back-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: calc(16px * var(--font-scale));
  cursor: pointer;
  color: var(--text, #111827);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.chat-overlay-title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f9fafb;
}
.chat-bubble { max-width: 75%; display: flex; flex-direction: column; }
.chat-bubble.mine { align-self: flex-end; }
.chat-bubble.theirs { align-self: flex-start; }
.chat-bubble-content { padding: 10px 14px; border-radius: 16px; font-size: var(--font-size-xs); line-height: 1.5; word-break: break-word; }
.chat-bubble.mine .chat-bubble-content { background: var(--primary); color: white; border-bottom-right-radius: 4px; }
.chat-bubble.theirs .chat-bubble-content { background: white; color: var(--text, #111827); border: 1px solid var(--border, #e5e7eb); border-bottom-left-radius: 4px; }
.chat-bubble-time { font-size: calc(8.8px * var(--font-scale)); color: var(--text-secondary, #9ca3af); margin-top: 4px; padding: 0 4px; }
.chat-bubble.mine .chat-bubble-time { text-align: right; }
.chat-bubble.theirs .chat-bubble-time { text-align: left; }
.chat-bubble.send-failed .chat-bubble-content { opacity: 0.6; }
.chat-bubble.blocked .chat-bubble-content { opacity: 0.5; text-decoration: line-through; }
.chat-bubble-blocked-label { font-size: calc(8.8px * var(--font-scale)); color: #ef4444; text-align: right; margin-top: 2px; padding: 0 4px; }
.chat-bubble-error { font-size: calc(8.8px * var(--font-scale)); color: #ef4444; text-align: right; margin-top: 2px; }
.chat-warning { margin: 8px 16px; padding: 12px 14px; border: 1.5px solid #fca5a5; border-radius: 12px; background: #fef2f2; }
.chat-warning-title { font-size: var(--font-size-xs); font-weight: 600; color: #dc2626; margin-bottom: 8px; }
.chat-warning-body { display: flex; flex-direction: column; gap: 4px; }
.chat-warning-item { font-size: calc(10.4px * var(--font-scale)); color: #991b1b; padding: 2px 0; }
.chat-warning-guide { font-size: calc(9.6px * var(--font-scale)); color: #6b7280; margin-top: 8px; line-height: 1.5; }
.chat-bubble-summarized { font-size: calc(8.8px * var(--font-scale)); color: var(--text-secondary, #9ca3af); text-align: right; margin-top: 2px; padding: 0 4px; }
.chat-bubble.theirs .chat-bubble-summarized { text-align: left; }
.chat-summary-bubble .chat-bubble-content { background: #fff7ed !important; color: var(--text, #111827) !important; border: 1px solid #f97316 !important; border-bottom-left-radius: 4px; }
.chat-summary-bubble.artist-summary .chat-bubble-content { background: white !important; border: 1px solid var(--border, #e5e7eb) !important; }
.chat-summary-header { font-size: calc(9.6px * var(--font-scale)); font-weight: 600; color: var(--text-secondary, #9ca3af); padding: 0 4px 2px; }
.chat-summary-meta { display: flex; gap: 6px; align-items: center; font-size: calc(8.8px * var(--font-scale)); color: var(--text-secondary, #9ca3af); margin-top: 4px; padding: 0 4px; }
.chat-summary-status { font-weight: 500; }
.chat-msg-row { display: flex; gap: 8px; max-width: 80%; }
.chat-msg-row.theirs { align-self: flex-start; }
.chat-msg-avatar-wrap { flex-shrink: 0; width: 36px; height: 36px; margin-top: 2px; }
.chat-msg-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chat-msg-avatar-placeholder { width: 36px; height: 36px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; }
.chat-msg-avatar-placeholder svg { color: #9ca3af; }
.chat-msg-body { display: flex; flex-direction: column; min-width: 0; }
.chat-msg-sender { font-size: calc(9.6px * var(--font-scale)); font-weight: 600; color: var(--text-primary, #1f2937); padding: 0 4px 3px; }
.chat-msg-row .chat-bubble { max-width: 100%; }
.chat-system-notice { text-align: center; font-size: calc(9.6px * var(--font-scale)); color: var(--text-secondary, #9ca3af); padding: 8px 16px; margin: 4px 0; }
.chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--bg, #fff);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  resize: none;
  max-height: 120px;
  line-height: 1.4;
  outline: none;
  font-family: inherit;
}
.chat-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1); }
.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.chat-send-btn:hover:not(:disabled) { background: var(--primary-dark); transform: scale(1.05); }
.chat-send-btn svg { width: 18px; height: 18px; fill: currentColor; }
.chat-inquiry-btn {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.chat-inquiry-btn:hover { background: var(--primary); color: white; }
.chat-loading, .chat-empty, .chat-error { text-align: center; padding: 32px 20px; color: var(--text-secondary, #9ca3af); font-size: var(--font-size-xs); }
@keyframes chat-spin { to { transform: rotate(360deg); } }
.chat-loading-spinner { width: 28px; height: 28px; border: 3px solid var(--border, #e5e7eb); border-top-color: var(--primary); border-radius: 50%; animation: chat-spin 0.6s linear infinite; margin: 0 auto; }
.chat-btn-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: chat-spin 0.6s linear infinite; }
.chat-list-session { font-size: calc(8.8px * var(--font-scale)); color: var(--text-secondary, #9ca3af); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-error { color: #ef4444; }
.chat-guide-message {
  text-align: center;
  padding: 20px 16px 16px;
  margin: 8px 16px 12px;
  background: #f8f9fa;
  border-radius: 12px;
  color: var(--text-primary, #1f2937);
  font-size: var(--font-size-base, 15px);
  font-weight: 500;
  line-height: 1.8;
}
.chat-guide-tip {
  margin-top: 10px;
  font-size: calc(10.4px * var(--font-scale));
  color: var(--primary);
  font-weight: 400;
}
@media (min-width: 768px) {
  .chat-overlay { top: 50%; left: 50%; width: 480px; height: 680px; max-height: 90vh; transform: translate(-50%, -50%) scale(0.95); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; }
  .chat-overlay.active { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
  .chat-list-overlay { top: 50%; right: auto; left: 50%; height: 600px; max-height: 85vh; transform: translate(-50%, -50%) scale(0.95); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; }
  .chat-list-overlay.active { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; right: auto; }
}

/* --- "이전 단계" 롤백 버튼 --- */
.go-back-wrapper { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.go-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 12px;
  background: var(--bg-white, #fff);
  color: var(--text-secondary, #888);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.go-back-btn:hover { background: var(--bg-hover, #f5f5f5); color: var(--text-primary, #333); border-color: var(--border-hover, #bbb); }
.go-back-btn:active { transform: scale(0.97); }

/* --- 다중 서비스 견적 확인 탭 UI --- */
.multi-service-quote-confirmation { padding: 0; }
.multi-service-quote-header { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.multi-service-quote-icon { font-size: 20px; }
.multi-service-quote-title { font-weight: 600; font-size: 15px; color: var(--text-primary, #1f2937); }
.multi-service-quote-progress {
  margin-left: auto;
  font-size: 13px;
  color: var(--primary-color, var(--primary));
  font-weight: 600;
  background: var(--primary-bg, #fff8f5);
  padding: 2px 10px;
  border-radius: 12px;
}
.quote-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.quote-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.quote-tab:hover { color: var(--text-primary, #1f2937); }
.quote-tab.active { color: var(--primary-color, var(--primary)); border-bottom-color: var(--primary-color, var(--primary)); font-weight: 600; }
.quote-tab.contracted .quote-tab-name { color: var(--success-color, #10b981); }
.quote-tab.contracted.active .quote-tab-name { color: var(--success-color, #10b981); }
.quote-tab-check { color: var(--success-color, #10b981); font-size: 12px; font-weight: 700; }
.quote-tab-panel { display: none; padding: 0; }
.quote-tab-panel.active { display: block; }
.quote-tab-panel .quote-confirmation-component { border: none; border-radius: 0; box-shadow: none; margin: 0; }
.multi-service-complete-notice { padding: 12px 16px; margin: 0 16px 16px; background: var(--success-bg, #ecfdf5); border-radius: 8px; text-align: center; }
.multi-service-complete-notice p { margin: 0; color: var(--success-color, #10b981); font-size: 14px; font-weight: 500; }
@media (max-width: 480px) {
  .quote-tabs { padding: 0 12px; }
  .quote-tab { padding: 8px 12px; font-size: 13px; }
  .multi-service-quote-header { padding: 12px 12px 10px; }
}
.quote-tab.skipped .quote-tab-name { color: var(--text-muted, #9ca3af); text-decoration: line-through; }
.quote-tab-skip { color: var(--text-muted, #9ca3af); font-size: 14px; font-weight: 700; }
.quote-skip-service-wrap { padding: 12px 16px 16px; text-align: center; }
.quote-skip-service-btn {
  padding: 8px 20px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.quote-skip-service-btn:hover { background: var(--bg-hover, #f3f4f6); border-color: var(--text-secondary, #6b7280); }
.quote-skipped-notice { padding: 16px; margin: 12px 16px 0; background: var(--bg-muted, #f9fafb); border-radius: 8px; text-align: center; }
.quote-skipped-notice p { margin: 0; color: var(--text-muted, #9ca3af); font-size: 14px; }
.quote-contracted-notice {
  padding: 16px;
  margin: 12px 16px 0;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  text-align: center;
}
.quote-contracted-notice p { margin: 0; color: #15803d; font-size: 14px; font-weight: 500; }

/* --- 연예인 서비스 전담매니저 연락처 섹션 --- */
.celebrity-contact-section { margin: 16px 0 0; padding: 20px 16px; background: #fffef5; border: 1px solid #f5e6b8; border-radius: 12px; }
.celebrity-contact-notice { margin-bottom: 16px; line-height: 1.6; }
.celebrity-contact-notice p { margin: 0 0 4px; font-size: var(--font-size-xs, 13px); color: var(--text-primary, #1f2937); }
.celebrity-contact-notice .celebrity-contact-hours { margin-top: 8px; font-size: var(--font-size-xs, 12px); color: #b45309; font-weight: 500; }
.celebrity-contact-phone { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm, 14px); font-weight: 600; }
.celebrity-contact-label { color: var(--text-primary, #1f2937); }
.celebrity-contact-number { color: var(--text-primary, #1f2937); font-weight: 700; font-size: 16px; text-decoration: none; }
.celebrity-contact-number:hover { text-decoration: underline; }
.celebrity-contact-kakao-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  background: #FEE500;
  color: #191919;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-sm, 14px);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}
.celebrity-contact-kakao-btn:hover { background: #F5DC00; }
.quote-skipped-notice.celebrity { background: #fffef5; border-color: #f5e6b8; }
.quote-skipped-notice.celebrity p { color: var(--text-primary, #1f2937); font-weight: 500; }

/* --- 채팅 넛지 배너 (전문가 채팅 후 섭외 확정 안내) --- */
.chat-nudge-banner { margin: 16px 0 0; padding: 20px 16px; background: #fffef5; border: 1px solid #f5e6b8; border-radius: 12px; }
.chat-nudge-message { margin-bottom: 16px; }
.chat-nudge-question { margin: 0 0 6px; font-size: var(--font-size-xs, 13px); color: var(--text-secondary, #6b7280); }
.chat-nudge-action { margin: 0; font-size: var(--font-size-md, 16px); color: var(--text-primary, #1f2937); font-weight: 600; line-height: 1.5; }
.chat-nudge-action strong { color: var(--primary, #f97316); }
.chat-nudge-support { margin-bottom: 16px; line-height: 1.6; }
.chat-nudge-support p { margin: 0 0 4px; font-size: var(--font-size-xs, 13px); color: var(--text-primary, #1f2937); }
.chat-nudge-support .chat-nudge-hours { margin-top: 8px; font-size: var(--font-size-xs, 12px); color: #b45309; font-weight: 500; }
.chat-nudge-contact { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-nudge-phone { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm, 14px); font-weight: 600; }
.chat-nudge-label { color: var(--text-primary, #1f2937); }
.chat-nudge-number { color: var(--text-primary, #1f2937); font-weight: 700; font-size: 16px; text-decoration: none; }
.chat-nudge-number:hover { text-decoration: underline; }
.chat-nudge-kakao-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  background: #FEE500;
  color: #191919;
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-xs, 13px);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.chat-nudge-kakao-btn:hover { background: #F5DC00; }
@media (max-width: 480px) {
  .chat-nudge-contact { flex-direction: column; align-items: flex-start; }
  .chat-nudge-kakao-btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   견적 그만받기 + AI 추천 컴포넌트
   ============================================================================ */

/* 견적 그만받기 프롬프트 박스 */
.estimate-close-prompt-box {
  margin-top: 16px;
  padding: 16px;
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: 12px;
}
.estimate-close-prompt-text {
  font-size: var(--font-size-base, 15px);
  font-weight: 600;
  color: var(--color-text-primary, #212529);
  line-height: 1.5;
  margin-bottom: 10px;
}
.estimate-close-warning-text {
  font-size: var(--font-size-sm, 13px);
  color: #dc2626;
  line-height: 1.6;
  margin-bottom: 12px;
}
.estimate-close-confirm-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-primary, #212529);
}
.estimate-close-confirm-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary, #FF6B35);
  cursor: pointer;
}
.estimate-close-submit-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base, 15px);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8F5E 100%);
  cursor: pointer;
  transition: all 0.2s;
}
.estimate-close-submit-btn:hover { opacity: 0.9; }
.estimate-close-submit-btn:active { transform: scale(0.98); }
.estimate-close-submit-btn.not-ready,
.estimate-close-submit-btn:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

/* AI 추천 뱃지/이유 (견적 카드 내 인라인 표시) */
.ai-recommend-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border-radius: 10px;
  border: 1px solid #C7D2FE;
}
.ai-recommend-header-icon { font-size: 18px; }
.ai-recommend-header-title {
  font-size: var(--font-size-base, 15px);
  font-weight: 700;
  color: #312E81;
}
.ai-recommend-pick {
  position: relative;
  margin-bottom: 4px;
}
.ai-recommend-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: var(--font-size-xs, 12px);
  font-weight: 700;
  margin-bottom: 6px;
}
.ai-recommend-badge-recommended {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  border: 1px solid #F59E0B;
}
.ai-recommend-badge-value {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  color: #065F46;
  border: 1px solid #34D399;
}
.ai-recommend-reason {
  margin-top: 6px;
  padding: 8px 12px;
  background: #F8FAFC;
  border-radius: 8px;
  font-size: var(--font-size-sm, 13px);
  color: #475569;
  line-height: 1.5;
  border-left: 3px solid #818CF8;
}