/*
 * quote-card.css — "견적서 카드" 재사용 컴포넌트 (SC-05 pdf/p08.png 기준).
 *
 * 이 파일은 어디서든(모든 페이지가 components/*.css 를 자동 로드한다, header.php 참고) 쓸 수 있는
 * 순수 CSS 컴포넌트다. 현재 이 패키지(WP4)가 실제로 사용하는 곳은 quote/detail.php(작성 중 미리보기 +
 * 전송 완료 후 요약)이고, WP5(채팅)가 chat/room.php 의 메시지 목록 안에 같은 마크업/클래스로
 * 견적서 카드를 렌더링한다(WP5는 폴링으로 받은 JSON을 JS에서 이 클래스 그대로 그리면 된다).
 *
 * ---- 마크업 계약 (WP5 는 이 구조를 그대로 따르면 스타일이 바로 적용된다) ----
 * <div class="quote-card" data-quote-id="123" data-quote-status="sent">
 *   <div class="quote-card__head">
 *     <span class="quote-card__title">견적서</span>
 *     <span class="quote-card__ttl">유효 48시간</span>            -- 유효시간(전송 후 24h 카운트다운 등 표시용 텍스트)
 *   </div>
 *   <div class="quote-card__body">
 *     <p class="quote-card__price">₩ 120,000</p>                  -- 금액
 *     <dl class="quote-card__meta">
 *       <div class="quote-card__meta-row"><dt>예상 소요시간</dt><dd>약 2시간</dd></div>
 *       <div class="quote-card__meta-row"><dt>방문일정</dt><dd>6/25(화) 오전</dd></div>
 *       <div class="quote-card__meta-row"><dt>결제조건</dt><dd>방문 후 결제</dd></div>
 *     </dl>
 *   </div>
 *   <div class="quote-card__actions">
 *     <a class="btn btn--outline btn--sm quote-card__detail-btn" href="...">상세보기</a>
 *     <button type="button" class="btn btn--primary btn--sm quote-card__accept-btn" data-quote-id="123">수락하기</button>
 *   </div>
 * </div>
 *
 * WP5 HOOK: quote-card__accept-btn 은 이 패키지(WP4)에서 아무 JS 이벤트도 걸지 않는다.
 * 업체선정(수락) 확정 트랜잭션은 WP5 의 MatchService 가 이 버튼의 data-quote-id 를 읽어 처리한다.
 * 상태별로 .quote-card--sent/--viewed/--accepted/--rejected/--canceled/--refunded 를 루트에
 * 추가하면(quotes.status 그대로) 아래 상태별 스타일이 자동 적용된다(수락하기 비활성화 등).
 */

.quote-card {
  border: 1px solid #dbe2ea;
  border-radius: var(--radius-md);
  background: var(--surface-0);
  overflow: hidden;
  max-width: 320px;
}

.quote-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--sub-color);
  color: var(--color-on-primary);
}

.quote-card__title {
  font-weight: 700;
  font-size: 0.9375rem;
}

.quote-card__ttl {
  font-size: 0.75rem;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 1px var(--sp-2);
}

.quote-card__body {
  padding: var(--sp-4);
}

.quote-card__price {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: var(--sp-3);
}

.quote-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quote-card__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 0.8125rem;
}

.quote-card__meta-row dt {
  color: var(--text-3);
  flex-shrink: 0;
}

.quote-card__meta-row dd {
  color: var(--text-1);
  text-align: right;
}

.quote-card__actions {
  display: flex;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-4);
}

.quote-card__actions .btn {
  flex: 1;
  min-height: 40px;
}

/* 상태별: 열람/수락/거절/취소/환불된 카드는 "수락하기"를 더 이상 눌러도 의미가 없으므로
   시각적으로 비활성 처리한다(실제 disabled 속성/이벤트 차단은 각 렌더링 주체가 부여한다). */
.quote-card--viewed .quote-card__accept-btn,
.quote-card--accepted .quote-card__accept-btn,
.quote-card--rejected .quote-card__accept-btn,
.quote-card--canceled .quote-card__accept-btn,
.quote-card--refunded .quote-card__accept-btn {
  opacity: 0.5;
  pointer-events: none;
}

.quote-card--accepted .quote-card__ttl {
  background: rgba(46, 184, 114, 0.28);
}

.quote-card--canceled .quote-card__ttl,
.quote-card--refunded .quote-card__ttl {
  background: rgba(229, 72, 77, 0.28);
}

/* ---- quote/detail.php 전용 보조 클래스 ----
   업체가 견적서를 작성/전송한 화면에서 쓰는 요청 요약/포인트 차감 요약 패널.
   이 패키지(WP4)에는 quote/detail.php 전용 페이지 CSS 파일이 없어 컴포넌트 파일에 함께 둔다. */

.quote-detail-block {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-8);
}

.quote-request-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-6);
}

.quote-request-summary__row {
  display: flex;
  gap: var(--sp-3);
  font-size: 0.9375rem;
}

.quote-request-summary__row dt {
  flex-shrink: 0;
  width: 88px;
  color: var(--text-3);
}

.quote-request-summary__row dd {
  color: var(--text-1);
}

.quote-request-summary__row--block {
  flex-direction: column;
}

.quote-request-summary__content {
  white-space: pre-line;
  background: var(--surface-0);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}

.quote-card--full {
  max-width: none;
}

.quote-card__message {
  margin-top: var(--sp-3);
  color: var(--text-2);
  white-space: pre-line;
}

.quote-card__contact-guide {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(42, 171, 225, 0.1);
  color: var(--main-color);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.quote-summary-panel {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--surface-1);
  border-radius: var(--radius-md);
}

.quote-summary-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9375rem;
  color: var(--text-2);
  padding: 4px 0;
}

.quote-summary-panel__row strong {
  color: var(--text-1);
}

.quote-summary-panel__row--total strong {
  color: var(--sub-color);
  font-size: 1.0625rem;
}

.quote-summary-panel__warning {
  margin-top: var(--sp-2);
  color: var(--color-danger);
  font-size: 0.8125rem;
}

@media (min-width: 768px) {
  .quote-card {
    max-width: 360px;
  }
}