/* ==========================================================================
   login.css — 로그인 및 계정/비밀번호 재설정 페이지 전용 개별 스타일
   ========================================================================== */
.page-title.mypage {
  padding: 15rem 0 10rem;
}

.login-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 0 0;
}

.login-section.w-lg {
  padding-top: 4rem;
}

.login-card {
  width: 100%;
  max-width: 64rem;
  border-radius: var(--radius-lg);
  padding: var(--spacing-80) var(--spacing-60);
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-6);
}

.login-logo img {
  height: 5rem;
  object-fit: contain;
}

.login-title {
  margin-bottom: var(--spacing-4);
  font-size: 3.6rem;
  text-align: center;
  letter-spacing: var(--letter-spacing-tight);
}

.login-title.text-lg {
  font-size: var(--text-5xl);
}

.login-title.text-lg.mt100 {
  margin-top: var(--spacing-100);
}

.login-desc {
  margin-bottom: var(--spacing-10);
  font-size: 1.8rem;
  text-align: center;
}

/* 소셜 로그인 */
.social-login {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  min-height: 5.2rem;
  padding: var(--spacing-3);
  font-size: var(--text-lg);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-social-kakao {
  background-color: #ffeb00;
}

.btn-social-naver {
  background-color: #03a94d;
  color: #ffffff;
}

.btn-social .icon-kakao {
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/common/icon_kakao_pay.svg) no-repeat center center;
  background-size: contain;
}

.btn-social .icon-naver {
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/common/icon_naver_pay.svg) no-repeat center center;
  background-size: contain;
}

.line-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-10);
  color: var(--text-gray60);
}

.line-box::before {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-color);
}

.line-box::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-color);
}

.line-box .line-text {
  font-size: 1.6rem;
}

/* 폼 헬퍼 및 에러 텍스트 */
.form-helper {
  margin-top: 0.6rem;
  color: var(--text-muted);
}

.error-text {
  margin-top: 0.6rem;
  font-size: var(--text-base);
  color: var(--primary);
  text-align: center;
}

/* 입력 필드 아래 인라인 안내/에러 문구는 항상 왼쪽 정렬
   (.error-text 기본값인 가운데 정렬은 로그인 실패 등 단독 메시지용) */
.form-helper.error-text {
  text-align: left;
}

.login-guide {
  margin-top: var(--spacing-4);
  color: var(--text-gray80);
  font-size: 1.6rem;
  text-align: center;
}

.login-guide a {
  color: var(--text-gray80);
  font-weight: 700;
}

/* 로그인 옵션 */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.line {
  position: relative;
  height: 0.1rem;
  width: 100%;
  margin: var(--spacing-5) 0;
  background-color: var(--border-color);
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-links a {
  position: relative;
  color: var(--text-gray70);
}

.login-guide a:hover,
.login-links a:hover {
  color: var(--primary);
}

.login-links a:not(:last-child)::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 1px;
  height: 1.2rem;
  margin: 0 0.8rem;
  background-color: var(--border-color);
}

/* 추가 SNS 연동 안내 문구 + 링크 (join/already-sns-member.html) */
.link-more-sns {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--text-gray80);
}

.link-more-sns a {
  font-weight: 700;
  color: var(--text-primary);
  margin-left: 0.4rem;
}

.link-more-sns a:hover {
  text-decoration: underline;
}

.login-info {
  margin-top: var(--spacing-10);
  color: var(--text-gray70);
  text-align: center;
}

.user-info {
  margin-bottom: var(--spacing-4);
  font-size: 2.8rem;
  text-align: center;
}

.helper-text {
  margin-bottom: var(--spacing-4);
  font-size: var(--text-base);
  color: var(--text-gray60);
}

/* SNS 간편 로그인 */
.sns-login-wrap {
  margin-top: var(--spacing-8);
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-6);
  text-align: center;
}

.sns-login-title {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-4);
  position: relative;
  display: inline-block;
  background-color: var(--bg-primary);
  padding: 0 var(--spacing-3);
  top: -2.3rem;
}

.sns-btn-group {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
  margin-top: -1rem;
}

.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-bounce);
  box-shadow: var(--shadow-sm);
}

.sns-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.sns-btn--kakao {
  background-color: #fee500;
  color: #1f2937;
}

.sns-btn--naver {
  background-color: #03c75a;
  color: #ffffff;
}

.sns-btn--google {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
}

.sns-btn img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
}

/* 결과 노출 박스 */
.result-box {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-6);
  text-align: center;
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-10);
}

.result-box__value {
  font-family: var(--font-display);
  font-size: 2.8rem;
}

.result-box__info {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--spacing-3);
  border-top: 1px dashed var(--border-color);
  padding-top: var(--spacing-3);
}

.icon-top {
  width: 8rem;
  height: 8rem;
  margin: 0 auto var(--spacing-4);
}

/* 회원가입 */
.join-section {
  padding: var(--spacing-100) var(--spacing-100);
}

.join-title {
  font-size: 3.6rem;
  text-align: center;
  margin-bottom: var(--spacing-8);
  letter-spacing: var(--letter-spacing-tight);
}

.join-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.join-card {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  padding: var(--spacing-80) var(--spacing-60);
  box-shadow: var(--shadow-lg);
}

.join-card__title {
  font-size: 2.8rem;
  margin-bottom: var(--spacing-10);
  padding-bottom: var(--spacing-10);
  border-bottom: 1px solid var(--border-gray40);
}

.join-card__content {
  display: flex;
  flex-direction: column;
}

.join-banner-section {
  display: flex;
  width: 100%;
  max-width: 80rem;
  margin-top: 4rem;
}

.form-address-wrap {
  gap: 0.8rem;
}

/* 기부금 영수증 영역 */
.receipt-helper {
  color: var(--text-gray70);
}

.receipt-helper__secondary {
  margin-top: 0.2rem;
}

/* 하단 액션 버튼 */
.join-actions {
  display: inline-flex;
  justify-content: center;
  gap: var(--spacing-4);
  margin-top: 1.6rem;
  /* margin-bottom: var(--spacing-16); */
}

.join-actions .btn {
  width: 16.4rem;
}

.join-actions .error-text {
  color: var(--primary);
  text-align: center;
}

.join-actions .error-text span {
  position: relative;
  padding-left: 2rem;
  background: url(../images/common/icon_error.png) left 0 top 50% no-repeat;
}

/* 4. 요약 박스 */
.summary-box {
  display: flex;
  height: 14rem;
  background-color: rgba(208, 201, 255, 0.2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-60);
  box-sizing: border-box;
}

.summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 4rem;
  box-sizing: border-box;
}

.summary-label {
  font-size: 2rem;
  align-self: flex-start;
}

.summary-value {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-1);
  align-self: flex-end;
  line-height: 1;
}

.summary-value .number {
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
}

.summary-value .unit {
  font-size: 2.2rem;
}

.divider {
  width: 1px;
  height: 8rem;
  background-color: var(--border-color);
  align-self: center;
}

.empty-state {
  text-align: center;
  padding: var(--spacing-100) 0;
  font-size: var(--text-xl);
  color: var(--text-muted);
}

/* 기부금 영수증 확인 탭 */

.receipt-notice {
  font-size: 1.8rem;
  margin-bottom: var(--spacing-10);
  word-break: keep-all;
}

.receipt-box {
  background-color: #f4f2ee;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-100) var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.receipt-icon {
  margin-bottom: var(--spacing-6);
}

.receipt-title {
  font-size: 2.8rem;
  margin-bottom: var(--spacing-4);
  word-break: keep-all;
}

.receipt-desc {
  font-size: 1.8rem;
  margin-bottom: var(--spacing-10);
  word-break: keep-all;
}

.receipt-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin-bottom: var(--spacing-2);
}

.status-dot {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
}

.status-dot.yellow {
  background-color: #ffc72c;
}

.status-dot.green {
  background-color: #7cb342;
}

.status-dot.red {
  background-color: #e00000;
}

.desc-note {
  display: block;
  font-size: 1.6rem;
  color: var(--text-gray60);
  margin-top: var(--spacing-2);
}

/* ==========================================================================
   마이페이지 나의 정보 탭 (tab-info) 스타일
   ========================================================================== */

/* 1. 나의 정보 레이아웃 */
.mypage-info-title-wrap {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-6);
}

.mypage-info-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
}

.mypage-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
  width: 100%;
}

/* 2. 카드 박스 */
.info-card {
  background-color: rgba(208, 201, 255, 0.2);
  border: 1px solid var(--border-gray40);
  border-radius: var(--radius-lg);
  padding: 6rem;
  display: flex;
  flex-direction: column;
}

.info-card-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 3rem;
  margin-bottom: 3.2rem;
}

.info-card-title {
  font-size: 2.2rem;
}

.info-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
}

/* 3. 폼 컨트롤 확장 */
.info-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
}

.info-form-group.flex-row-layout {
  flex-direction: row;
  justify-content: space-between;
}

.info-label {
  font-size: var(--text-lg);
}

.info-label.required::before {
  content: "* ";
  margin-right: 0.2rem;
}

.form-control.editable {
  background-color: var(--bg-primary);
}

.info-input-desc {
  color: var(--text-gray60);
  margin-top: 0.2rem;
}

.info-action-btn-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.4rem;
}

.info-action-btn {
  /* max-width: 16.6rem; */
}

/* 4. 비밀번호 변경 박스 */
.pw-change-box {
  background-color: rgba(208, 201, 255, 0.2);
  border: 1px solid var(--border-gray40);
  border-radius: var(--radius-sm);
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.pw-change-title {
  font-family: var(--font-bold);
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.pw-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* 5. 알림 수신동의 체크박스 색상 커스텀 */
.info-form-group .custom-checkbox {
  width: 26.4rem;
  font-size: var(--text-lg);
  text-align: right;
}

/* 6. 기부금 영수증 신청 여부 카드 */
.receipt-consent-card {
  background-color: rgba(208, 201, 255, 0.2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-6);
  padding: 6rem;
}

.receipt-consent-body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.receipt-consent-title {
  font-size: 2.2rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.6rem;
  margin-bottom: 0.8rem;
}

.receipt-consent-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
}

.receipt-consent-desc {
  font-size: var(--text-lg);
  flex: 1;
}

.receipt-consent-btn {
  max-width: 23rem;
  flex-shrink: 0;
}

/* 7. 하단 액션 버튼 */
.info-action-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
  margin-top: 4rem;
}

.info-action-buttons .btn {
  max-width: 16rem;
}

/* 8. 회원 탈퇴 링크 */
.withdraw-link-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 4rem;
}

.withdraw-link {
  font-family: var(--font-bold);
  font-size: var(--text-lg);
  text-decoration: none;
  border-bottom: 3px solid var(--primary);
  padding-bottom: 0.2rem;
  display: inline-block;
}

.withdraw-link:hover {
  color: var(--primary);
}

/* SNS 계정 연동 */
.sns-connect-wrap {
  display: flex;
  gap: var(--spacing-4);
  flex-direction: column;
  width: 24rem;
  font-size: var(--text-lg);
}

.sns-connect-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  font-size: var(--text-lg);
}

.sns-icon {
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.sns-icon::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.8rem;
  border-radius: 50%;
}

.sns-icon.kakao::before {
  background: url("/images/common/icon_kakao_pay.svg") 50% 50% no-repeat;
  background-size: contain;
}

.sns-icon.naver::before {
  background: url("/images/common/icon_naver_pay.svg") 50% 50% no-repeat;
  background-size: contain;
}

.sns-status.connected {
  display: flex;
  align-items: center;
}

.sns-status.connected::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("/images/common/icon_check.png") 50% 50% no-repeat;
  background-size: contain;
}

.sns-status.action {
  font-size: var(--text-lg);
  text-decoration: underline;
  cursor: pointer;
}

.sns-status.action:hover {
  color: var(--primary);
}

/* 반응형 미디어 쿼리 */
@media screen and (max-width: 1024px) {
  .mypage-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   마이페이지 회원탈퇴
   ========================================================================== */

.withdraw-section {
  margin: 0 auto;
  padding: 4rem var(--spacing-4) var(--spacing-16);
}

.withdraw-title {
  font-size: 2.8rem;
  margin-bottom: var(--spacing-8);
  text-align: left;
}

.withdraw-notice-desc {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-10);
}

.withdraw-notice-desc p {
  font-size: 1.8rem;
  color: var(--text-gray90);
}

.withdraw-notice-desc p strong {
  font-weight: 600;
  color: var(--text-gray90);
}

.withdraw-notice-desc p.warning-highlight {
  color: #db0007;
  font-weight: 600;
}

.withdraw-divider {
  border: 0;
  height: 1px;
  background-color: var(--border-color);
  margin: var(--spacing-10) 0;
  display: block;
}

.withdraw-agree-wrap {
  margin-bottom: var(--spacing-10);
  display: flex;
  align-items: center;
}

.withdraw-agree-wrap .custom-checkbox {
  font-size: 1.8rem;
}

.withdraw-agree-wrap .required-badge {
  color: #db0007;
  margin-right: 0.4rem;
}

.withdraw-agree-wrap .checkbox-txt {
}

/* 정보 확인 카드 상자 */
.withdraw-confirm-card {
  background-color: rgba(208, 201, 255, 0.15);
  /* 연보랏빛/연회색빛 배경 */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-60);
  margin-bottom: var(--spacing-10);
}

.withdraw-confirm-card .card-section-title {
  font-size: 2.2rem;
  color: var(--text-black);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 3.2rem;
  margin-bottom: 3.2rem;
}

.withdraw-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
  width: 100%;
}

.form-group-col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.form-group-col .form-label {
  font-size: var(--text-lg);
}

.form-group-col .form-label.required::before {
  content: "* ";
  margin-right: 0.2rem;
}

/* 하단 액션 버튼 */
.withdraw-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-10);
}

.withdraw-actions .btn {
  max-width: 16rem;
}

/* 비활성화 버튼 디자인 */
.btn-primary.btn-disabled,
.btn-primary.btn-disabled:hover,
.btn-primary:disabled {
  background-color: #f39c9c !important;
  /* 핑크 톤 */
  color: #ffffff !important;
  cursor: not-allowed;
  box-shadow: none;
}
.donation-detail-section .summary-box .summary-label {
  font-size: 2rem;
}

.donation-detail-section .summary-box .summary-value .number {
  font-family: var(--font-display);
  font-size: 3.6rem;
}

.donation-detail-section .summary-box .summary-value .unit {
  font-family: var(--font-text);
  font-size: 2.2rem;
}

.donate-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 12rem;
  width: 100%;
  margin-top: 8rem;
  padding: 0 18rem;
  overflow: hidden;
  border-radius: 1.2rem;
  background-color: #d0c9ff;
  box-sizing: border-box;
}

.join-banner-section .donate-banner {
  margin-top: 0;
  padding: 0 4rem;
}

.donate-banner__heart {
  position: absolute;
  left: 6rem;
  top: -22rem;
  width: 90.4rem;
  height: 76rem;
  background: url("/images/main/img_heart_banner.svg") center / contain
    no-repeat;
  will-change: transform;
}

.join-banner-section .donate-banner__heart {
  left: 1rem;
  top: -26.5rem;
  width: 60rem;
}

.donate-banner__content,
.donate-banner__btn {
  position: relative;
  z-index: 1;
}

.donate-banner__content {
  width: 100%;
  max-width: 54rem;
}

.donate-banner h2 {
  color: #fffdf0;
  font-size: 2.2rem;
  text-align: center;
}

.join-banner-section .donate-banner h2 {
  font-size: 2.2rem;
}

.donate-banner__btn {
  max-width: 21rem;
}

/* .donate-banner__btn.btn-arrow:hover {
  color: #fffdf0;
  background-color: var(--primary);
} */

/* 모바일 */
@media screen and (max-width: 768px) {
  .line-box .line-text {
    font-size: 1.2rem;
  }

  .form-group-col .form-label {
    font-size: 1.4rem;
  }

  .withdraw-link {
    font-size: 1.4rem;
  }

  .login-section {
    padding: 2rem 2.4rem;
  }

  .login-title {
    font-size: 2.2rem;
  }

  .login-desc {
    margin-bottom: 2.4rem;
    font-size: 1.4rem;
  }

  .login-desc.small {
    font-size: 1.4rem;
  }

  .login-card {
    padding: 4rem 2.4rem;
  }

  .btn-social {
    font-size: 1.4rem;
  }

  .error-text {
    font-size: 1.2rem;
  }

  .join-actions {
    gap: 0.8rem;
  }

  .join-actions .btn {
    width: 100%;
  }

/* 🖋️ 출금동의 서명 캔버스/패널 스타일 */
.signature-pad-canvas-box {
  transition: var(--transition-fast);
  user-select: none;
  background-color: rgba(208, 201, 255, 0.20);
}

  .login-guide span {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
  }

  .login-guide a {
    font-size: 1.2rem;
  }

  .social-login {
    gap: 0.8rem;
  }

  .login-section .form-group + .form-group {
    margin-top: 0.8rem;
  }

  .login-info {
    margin-top: 2.4rem;
    font-size: 1.2rem;
  }

  .login-links a {
    font-size: 1.2rem;
  }

  .result-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
    padding: 0;
  }

  .result-box__value {
    font-size: 2rem;
  }

  .line {
    margin: 2.4rem 0;
  }

  .user-info {
    font-size: 2rem;
  }

  .helper-text {
    font-size: 1.2rem;
  }

  .icon-top {
    width: 6rem;
    height: 6rem;
  }

  /* 회원가입 */
  .join-section {
    padding: 2rem 2.4rem;
  }

  .join-title {
    margin-bottom: 2.4rem;
    font-size: 2.2rem;
  }

  .join-form {
    gap: 2rem;
  }

  .join-form .join-card {
    padding: 4rem 2.4rem;
  }

  .join-card__title {
    margin-bottom: 2.4rem;
    padding-bottom: 2.4rem;
    font-size: 2rem;
  }

  .form-group.form + .form-group.form {
    margin-top: 2.4rem;
  }

  .form-control-row {
    min-height: 4.4rem;
  }

  .form-check-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .form-check-wrap .form-control-with-btn {
    display: contents;
  }

  .form-check-wrap .form-control-with-btn .form-control {
    order: 1;
  }

  .form-check-wrap .form-helper {
    order: 2;
    margin-top: 0;
  }

  .form-check-wrap .form-control-with-btn .btn {
    order: 3;
    width: 100%;
  }

  .btn-input-action {
    width: 9.2rem;
  }

  /* ==========================================================================
     마이페이지 나의 정보 탭
     ========================================================================== */
  .mypage-info-title-wrap {
    justify-content: center;
  }

  .mypage-info-title {
    font-size: 2rem;
  }

  .mypage-info-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .mypage-info-grid .info-card-title {
    font-size: 1.8rem;
  }

  .mypage-info-grid .info-label {
    font-size: 1.4rem;
  }

  .info-card {
    padding: 2.4rem 1.6rem;
    border-radius: 0.8rem;
  }

  .info-card-header {
    padding-bottom: 2.6rem;
    margin-bottom: 2.6rem;
  }

  .info-card-title {
    font-size: 1.8rem;
  }

  .info-action-btn-wrap {
    justify-content: center;
    width: 100%;
  }

  .info-action-btn {
    width: 100%;
    max-width: 100%;
  }

  .pw-change-box {
    padding: 2rem 1.6rem;
    gap: 1.6rem;
    border-radius: 0.8rem;
  }

  .pw-change-title {
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
  }

  .info-form-group.flex-row-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .info-form-group.flex-row-layout .custom-checkbox {
    width: 100%;
    font-size: 1.4rem;
  }

  .receipt-consent-card {
    padding: 2.4rem 1.6rem;
    margin-top: 2.4rem;
    border-radius: 0.8rem;
  }

  .receipt-consent-title {
    font-size: 1.8rem;
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
  }

  .receipt-consent-desc {
    font-size: 1.4rem;
  }

  .receipt-consent-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
  }

  .receipt-consent-btn {
    width: 100%;
    max-width: 100%;
  }

  .info-action-buttons {
    flex-direction: row;
    width: 100%;
    margin-top: 3.2rem;
    gap: 0.8rem;
  }

  .info-action-buttons .btn {
    flex: 1;
    max-width: none;
  }

  /* 회원 탈퇴 */
  .withdraw-section {
    padding: 0;
  }

  .withdraw-link-container {
    margin-top: 2.4rem;
  }

  .withdraw-title {
    font-size: 2rem;
  }

  .withdraw-confirm-card .card-section-title {
    margin-bottom: 2.6rem;
    padding-bottom: 2.6rem;
    font-size: 1.8rem;
  }

  .withdraw-notice-desc p {
    font-size: 1.4rem;
  }

  .withdraw-actions {
    margin-top: 4rem;
  }

  .withdraw-form-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .withdraw-agree-wrap .custom-checkbox {
    font-size: 1.4rem;
  }
  .withdraw-confirm-card {
    padding: 3rem var(--spacing-4);
  }

  .withdraw-actions {
    flex-direction: row;
    width: 100%;
  }

  .withdraw-actions .btn {
    flex: 1;
    max-width: none;
  }

  .sns-connect-wrap .sns-connect-item,
  .sns-connect-wrap .sns-status.action {
    font-size: 1.4rem;
  }

  /* ==========================================================================
     비회원 후원 조회 & 마이페이지 공통
     ========================================================================== */
  .summary-box,
  .donation-detail-section .summary-box {
    flex-direction: column;
    height: auto;
    padding: 2.4rem 2rem;
    margin-bottom: 3rem;
    gap: 1.6rem;
    border-radius: 0.8rem;
  }

  .summary-item,
  .donation-detail-section .summary-box .summary-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0;
    height: auto;
  }

  /* 누적 후원 금액 (마지막 항목): 금액 확장 시 겹침 방지를 위해 라벨 상단/금액 우측하단 세로배치 (Frame 1010107166.pdf 시안 100% 일치) */
  .summary-item:last-child,
  .donation-detail-section .summary-box .summary-item:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .summary-item:last-child .summary-label,
  .donation-detail-section
    .summary-box
    .summary-item:last-child
    .summary-label {
    align-self: flex-start;
  }

  .summary-item:last-child .summary-value,
  .donation-detail-section
    .summary-box
    .summary-item:last-child
    .summary-value {
    align-self: flex-end;
    width: 100%;
    justify-content: flex-end;
  }

  .summary-label,
  .donation-detail-section .summary-box .summary-label {
    font-size: 1.6rem;
    align-self: center;
    margin-bottom: 0;
  }

  .summary-value,
  .donation-detail-section .summary-box .summary-value {
    align-self: center;
    align-items: baseline;
  }

  .summary-value .number,
  .donation-detail-section .summary-box .summary-value .number {
    font-size: 2.2rem;
  }

  .summary-value .unit,
  .donation-detail-section .summary-box .summary-value .unit {
    font-size: 1.8rem;
  }

  /* 세로 가로 분리선 */
  .divider {
    width: 100%;
    height: 1px;
    background-color: var(--border-color, #e5e7eb);
    align-self: stretch;
  }

  /* ==========================================================================
     후원 현황 테이블 모바일 카드 UI
     ========================================================================== */
  .table-wrap {
    overflow-x: visible;
  }

  .donation-table,
  .donation-table tbody {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .donation-table thead {
    display: none;
  }

  .donation-table tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px solid var(--border-gray40);
    border-radius: 0.8rem;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  /* 카드의 상단 핑크 헤더 띠 영역 - order 1 */
  .donation-table td.col-type {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    background-color: rgba(219, 0, 7, 0.1);
    padding: 1.5rem 1.6rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-gray40);
    box-sizing: border-box;
  }

  .donation-table td.col-type::before {
    display: none;
  }

  /* 일반 키-값 데이터 셀 - order 2 */
  .donation-table
    td:not(.col-type):not(.col-no):not(.col-action):not([data-label="No"]) {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.6rem;
    font-size: 1.2rem;
    border-bottom: none;
    text-align: right;
    box-sizing: border-box;
  }

  .price-bold {
    font-weight: 700;
  }

  /* col-type 바로 다음 첫 번째 데이터 td: 위쪽 패딩 16px (1.6rem) */
  .donation-table td.col-type + td {
    padding-top: 1.6rem;
  }

  /* 데이터 셀 중 마지막 td: 아래쪽 패딩 16px (1.6rem) */
  /* .donation-table
    td:not(.col-type):not(.col-no):not(.col-action):not(
      [data-label="No"]
    ):last-of-type {
    padding-bottom: 1.6rem;
  } */

  .donation-table
    td:not(.col-type):not(.col-no):not(.col-action):not(
      [data-label="No"]
    )::before {
    content: attr(data-label);
    text-align: left;
    font-size: 1.2rem;
  }

  /* No 항목은 모바일 카드 시안에 맞춰 100% 완전 생략 */
  .donation-table td.col-no,
  .donation-table th.col-no,
  .donation-table td[data-label="No"] {
    display: none;
  }

  /* 카드의 하단 버튼 영역 - order 3 */
  .donation-table td.col-action {
    order: 3;
    flex: 0 0 auto;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem 0.4rem;
    border-bottom: none;
    box-sizing: border-box;
  }

  .donation-table td.col-action:first-of-type {
    padding-left: 1.6rem;
  }

  .donation-table td.col-action::before {
    display: none;
  }

  .donation-table td.line-bottom {
    padding-bottom: 1.6rem !important;
    border-bottom: 1px solid var(--border-gray40) !important;
  }

  .donation-table td.line-top {
    padding-top: 1.6rem !important;
  }

  .donation-table td.col-action .btn-table {
    min-width: 7.2rem;
    height: 3.6rem;
    padding: 0 1.2rem;
    font-size: 1.2rem;
    border-radius: 0.8rem;
    border: 1px solid #1f2937;
    margin: 0;
  }
  /* 비회원 후원 조회 페이지 제목, 탭, 카드 모바일 반응형 */
  .page-title.mypage {
    padding: 5rem 0;
  }

  .page-title.mypage + .tab-menu {
    margin-bottom: 2.4rem;
  }

  .tab-btn {
    font-size: 1.8rem;
    padding: 1.6rem;
  }

  .content-card {
    padding: 3rem 2.4rem;
  }

  .card-title-wrap {
    justify-content: center;
  }

  .donation-detail-section .card-title,
  .card-title-wrap .card-title {
    font-size: 2rem;
  }

  .receipt-notice {
    margin-bottom: 2.4rem;
    font-size: 1.4rem;
  }

  .receipt-icon {
    width: 6rem;
    height: 6rem;
  }

  .receipt-title {
    font-size: 2rem;
  }

  .receipt-desc {
    font-size: 1.4rem;
  }

  .receipt-box {
    padding: 3rem 2.4rem;
  }

  .receipt-status {
    font-size: 1.4rem;
  }

  /* 공통 하단 배너 모바일 */
  .donate-banner {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 24rem;
    height: 24rem;
    padding: 3.2rem 2rem;
    margin-top: 4rem;
    gap: 2rem;
    text-align: center;
    border-radius: 1.2rem;
    background-color: #d0c9ff;
    background-image: url(/images/common/img_heart_banner.svg);
    background-size: 145%;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-sizing: border-box;
  }

  .join-banner-section .donate-banner {
    padding: 0;
  }

  .donate-banner__content {
    width: 100%;
  }

  .donate-banner__heart {
    display: none;
  }

  .join-banner-section .donate-banner h2,
  .donate-banner h2 {
    font-size: 1.8rem;
    color: #fffdf0;
    text-align: center;
    margin: 0;
  }

  .donate-banner__btn {
    width: 100%;
    max-width: 18rem;
    margin-top: 0;
  }

  .join-banner-section {
    width: 100%;
    margin-top: 2rem;
  }

  .receipt-helper {
    font-size: 14px;
    line-height: 20px;
  }

  .join-card__content .receipt-helper {
    margin-top: 1.6rem;
  }

  /* ==========================================================================
     마이페이지 후원 상세 정보 요약 표 모바일 카드 UI (Frame 1010107327.pdf 100% 반영)
     ========================================================================== */
  .donation-detail-section .detail-info-table {
    border-top: 2px solid var(--border-black);
    border-bottom: 1px solid var(--border-gray40);
    margin-bottom: 1.6rem;
    overflow: hidden;
  }

  .donation-detail-section .detail-info-table tbody {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .donation-detail-section .detail-info-table tr {
    display: contents;
  }

  .donation-detail-section .detail-info-table th {
    flex: 0 0 50%;
    width: 50%;
    background-color: rgba(208, 201, 255, 0.2);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    padding: 1.2rem 1.2rem;
    height: auto;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-gray40);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .donation-detail-section .detail-info-table td {
    flex: 0 0 50%;
    width: 50%;
    font-size: 1.4rem;
    text-align: left;
    padding: 1.2rem 1.6rem;
    height: auto;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-gray40);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    word-break: keep-all;
  }

  .detail-info-table + .card-title-wrap {
    margin-top: 6rem;
  }

  /* 테이블 1 (기본 정보) 순서 교정: Frame 1010107327.pdf 시안 순서 일치 */
  /* 1행: 구분 / 정기 (order: 1) */
  .donation-detail-section
    .detail-info-table:nth-of-type(1)
    tr:nth-child(1)
    th:nth-of-type(1),
  .donation-detail-section
    .detail-info-table:nth-of-type(1)
    tr:nth-child(1)
    td:nth-of-type(1) {
    order: 1;
  }

  /* 2행: 기부 시작일 / 2026-01-28 (order: 2) */
  .donation-detail-section
    .detail-info-table:nth-of-type(1)
    tr:nth-child(2)
    th:nth-of-type(1),
  .donation-detail-section
    .detail-info-table:nth-of-type(1)
    tr:nth-child(2)
    td:nth-of-type(1) {
    order: 2;
  }

  /* 3행: 정기후원 해지 / [해지 신청] (order: 3) */
  .donation-detail-section
    .detail-info-table:nth-of-type(1)
    tr:nth-child(1)
    th:nth-of-type(2),
  .donation-detail-section
    .detail-info-table:nth-of-type(1)
    tr:nth-child(1)
    td:nth-of-type(2) {
    order: 3;
  }

  /* 4행: 기부 종료일 / - (order: 4) */
  .donation-detail-section
    .detail-info-table:nth-of-type(1)
    tr:nth-child(2)
    th:nth-of-type(2),
  .donation-detail-section
    .detail-info-table:nth-of-type(1)
    tr:nth-child(2)
    td:nth-of-type(2) {
    order: 4;
  }

  /* 테이블 2 (결제 정보) 순서 교정: Frame 1010107327.pdf 시안 순서 일치 */
  /* 1행: 후원금액 / 50,000원 (order: 1) */
  .donation-detail-section
    .detail-info-table:nth-of-type(2)
    tr:nth-child(1)
    th:nth-of-type(1),
  .donation-detail-section
    .detail-info-table:nth-of-type(2)
    tr:nth-child(1)
    td:nth-of-type(1) {
    order: 1;
  }

  /* 2행: 결제방법 / 결제일 (order: 2) */
  .donation-detail-section
    .detail-info-table:nth-of-type(2)
    tr:nth-child(2)
    th:nth-of-type(1),
  .donation-detail-section
    .detail-info-table:nth-of-type(2)
    tr:nth-child(2)
    td:nth-of-type(1) {
    order: 2;
  }

  /* 3행: 정기후원 해지 / [금액 변경] (order: 3) */
  .donation-detail-section
    .detail-info-table:nth-of-type(2)
    tr:nth-child(1)
    th:nth-of-type(2),
  .donation-detail-section
    .detail-info-table:nth-of-type(2)
    tr:nth-child(1)
    td:nth-of-type(2) {
    order: 3;
  }

  /* 4행: 기부 종료일 / [결제 변경] (order: 4) */
  .donation-detail-section
    .detail-info-table:nth-of-type(2)
    tr:nth-child(2)
    th:nth-of-type(2),
  .donation-detail-section
    .detail-info-table:nth-of-type(2)
    tr:nth-child(2)
    td:nth-of-type(2) {
    order: 4;
  }

  .donation-detail-section .detail-info-table tr:nth-child(2) th:nth-of-type(2),
  .donation-detail-section
    .detail-info-table
    tr:nth-child(2)
    td:nth-of-type(2) {
    border-bottom: none;
  }

  .donation-detail-section .detail-info-table td .btn-table {
    min-width: 7.2rem;
    height: 3.6rem;
    padding: 0 1.2rem;
    font-size: 1.3rem;
    border-radius: 0.4rem;
    border: 1px solid #1f2937;
    color: #1f2937;
    margin: 0;
  }

  .current-payment-value {
    font-size: 1.4rem !important;
  }

  .current-payment-title {
    font-size: 1.6rem !important;
  }

  .payment-form-section-title {
    font-size: 1.6rem;
    margin-top: 3.2rem;
  }
}