/*
 * contribution_result — SUP-04 결제 결과(성공/실패 · 이름/메시지 · 다음 단계 · 오류 상세 · P4-S4-T1)
 * 이 파일은 application.css 맨 위 @import 한 줄로만 불러옵니다
 * (여러 명이 같은 시간에 application.css 를 고쳐서 생기는 병합 충돌을 줄이려고 화면별로 나눕니다).
 */
.contribution-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.contribution-result__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.contribution-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: 50%;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
}

.contribution-result--success .contribution-result__icon {
  background: var(--color-indigo-50);
  color: var(--color-status-success);
}

.contribution-result--failure .contribution-result__icon {
  background: var(--color-surface);
  color: var(--color-status-error);
}

.contribution-result__lead {
  color: var(--color-text-muted);
}

.contribution-result__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  margin: 0;
}

.contribution-result__summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.contribution-result__summary-row dt {
  color: var(--color-text-muted);
}

.contribution-result__summary-row dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.contribution-result__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contribution-result__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contribution-result__field input,
.contribution-result__field textarea {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
}

.contribution-result__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: 0;
}

.contribution-result__submit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contribution-result__submit-button {
  min-height: var(--button-height);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-primary-pressed);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
}

.contribution-result__submit-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: 0;
  text-align: center;
}

.contribution-result__next {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.contribution-result__next-link,
.contribution-result__retry-button,
.contribution-result__support-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-card);
}

.contribution-result__error {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.contribution-result__error-code {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: 0 0 var(--space-1);
}

.contribution-result__error-message {
  margin: 0;
}

.contribution-result__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.contribution-result__retry-button {
  border: 1px solid var(--color-primary-pressed);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
}