/* URL.KR v2 - 유료 서비스 연장 신청(pages/domain_extend_request.php, 2026-10-28)
   단계형 신청서: ① 주소 확인 → ② 결제 방법 → ③ 카드/계좌이체. 공통 폼 클래스는 sub.css, 여기는 단계 표시·확인 결과·입금 계좌만 */

.ex-step { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border); }
.ex-step:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }   /* 폼 맨 앞의 CSRF input 때문에 :first-child 는 안 맞는다 */
.ex-step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--heading); }
.ex-step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; flex: none; }

/* 주소 확인 결과 */
.ex-result { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--alt); border: 1px solid var(--border); }
.ex-result-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.ex-result-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.ex-result-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.ex-result-list dt { color: var(--muted); }
.ex-result-list dd { margin: 0; color: var(--heading); font-weight: 600; }
.ex-result-note { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--accent-ink); }

/* 계좌이체 단계의 입금 계좌 */
.ex-bank { display: grid; gap: 6px; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--alt); font-size: 14px; }
.ex-bank-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ex-bank-label { min-width: 64px; color: var(--muted); }
.ex-bank-value { font-weight: 700; color: var(--heading); }
.ex-copy { padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: 12px; color: var(--heading); cursor: pointer; }
.ex-kakao { margin: 0 0 14px; font-size: 14px; }
.ex-kakao summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.ex-kakao-body { display: grid; justify-items: center; gap: 10px; margin-top: 12px; text-align: center; }
.ex-kakao-qr { display: block; width: min(100%, 220px); height: auto; }