/* ================================================================
 * 회원가입 7단계 — 시안 Image 5·6 정렬 그대로
 * ================================================================ */

.gab-reg-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
    display: flex;
    flex-direction: column;
}

/* === 시안 간소 헤더 (다크 네이비) === */
.gab-reg-header {
    background: var(--gab-navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gab-reg-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--gab-space-6);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gab-space-6);
}
.gab-reg-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.gab-reg-logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--gab-primary-500), var(--gab-primary-700));
    border-radius: var(--gab-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}
.gab-reg-logo-name { font-size: var(--gab-text-lg); font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.gab-reg-logo-name .accent { color: var(--gab-accent-400); }
.gab-reg-logo-tag { font-size: 9px; color: rgba(255,255,255,0.45); letter-spacing: 1px; text-transform: uppercase; }

.gab-reg-nav {
    display: flex;
    gap: var(--gab-space-6);
    flex: 1;
    justify-content: center;
}
.gab-reg-nav a {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--gab-text-md);
    font-weight: 600;
    transition: color var(--gab-transition-fast);
}
.gab-reg-nav a:hover { color: #fff; }

.gab-reg-header-right { display: flex; align-items: center; gap: var(--gab-space-3); }
.gab-reg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--gab-radius);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--gab-text-sm);
    font-weight: 600;
}

/* === 본문 === */
.gab-reg-body {
    flex: 1;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: var(--gab-space-10) var(--gab-space-6) var(--gab-space-16);
}

/* 타이틀 */
.gab-reg-title-wrap { text-align: center; margin: var(--gab-space-8) 0 var(--gab-space-10); }
.gab-reg-title { font-size: var(--gab-text-3xl); font-weight: 800; color: var(--gab-gray-900); letter-spacing: -1px; margin-bottom: var(--gab-space-3); }
.gab-reg-subtitle { font-size: var(--gab-text-md); color: var(--gab-gray-500); line-height: 1.6; }

/* === 좌우 레이아웃 (큰 카드 + 사이드 카드) === */
.gab-reg-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--gab-space-6);
    align-items: start;
}
.gab-reg-card {
    background: #fff;
    border: 1px solid var(--gab-gray-200);
    border-radius: var(--gab-radius-xl);
    padding: var(--gab-space-8);
    box-shadow: var(--gab-shadow-sm);
}
.gab-reg-side {
    background: #fff;
    border: 1px solid var(--gab-gray-200);
    border-radius: var(--gab-radius-xl);
    padding: var(--gab-space-6);
    box-shadow: var(--gab-shadow-sm);
}

/* ===== STEP 3: 서류 제출 (Image 6) ===== */
.gab-upload-list { display: flex; flex-direction: column; gap: var(--gab-space-5); }
.gab-upload-item {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--gab-space-5);
    align-items: center;
    padding-bottom: var(--gab-space-5);
    border-bottom: 1px solid var(--gab-gray-100);
}
.gab-upload-item:last-of-type { border-bottom: none; padding-bottom: 0; }
.gab-upload-info { display: flex; gap: var(--gab-space-3); align-items: flex-start; }
.gab-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--gab-radius);
    background: var(--gab-primary-50);
    color: var(--gab-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.gab-upload-texts { flex: 1; }
.gab-upload-name {
    font-size: var(--gab-text-md);
    font-weight: 700;
    color: var(--gab-gray-900);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gab-upload-opt { font-size: 11px; color: var(--gab-gray-400); font-weight: 600; }
.gab-upload-desc { font-size: var(--gab-text-sm); color: var(--gab-gray-500); line-height: 1.5; }
.gab-upload-formats { font-size: 11px; color: var(--gab-gray-400); margin-top: 6px; }

/* 드롭존 */
.gab-dropzone {
    border: 2px dashed var(--gab-gray-300);
    border-radius: var(--gab-radius-lg);
    padding: var(--gab-space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gab-space-3);
    cursor: pointer;
    transition: all var(--gab-transition-fast);
    background: var(--gab-gray-50);
    min-height: 88px;
}
.gab-dropzone:hover { border-color: var(--gab-primary-400, #4E72A2); background: var(--gab-primary-50); }
.gab-dropzone-icon { font-size: 28px; color: var(--gab-primary-500); }
.gab-dropzone-text { font-size: var(--gab-text-sm); color: var(--gab-gray-600); font-weight: 600; }
.gab-dropzone-sub { font-size: 11px; color: var(--gab-gray-400); margin-top: 2px; }

/* 폼 하단 버튼 */
.gab-reg-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--gab-space-3);
    margin-top: var(--gab-space-8);
    padding-top: var(--gab-space-6);
    border-top: 1px solid var(--gab-gray-100);
}
.gab-reg-actions--end { justify-content: flex-end; }

/* 서류 심사 기준 (사이드) */
.gab-side-title {
    font-size: var(--gab-text-md);
    font-weight: 700;
    color: var(--gab-gray-900);
    margin-bottom: var(--gab-space-5);
    display: flex;
    align-items: center;
    gap: 8px;
}
.gab-side-title i { color: var(--gab-primary-600); }
.gab-side-rule { display: flex; gap: var(--gab-space-3); margin-bottom: var(--gab-space-5); }
.gab-side-rule:last-child { margin-bottom: 0; }
.gab-side-rule-icon { color: var(--gab-primary-500); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.gab-side-rule-icon--warn { color: var(--gab-accent-500); }
.gab-side-rule-icon--time { color: var(--gab-gray-400); }
.gab-side-rule-title { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-800); margin-bottom: 3px; }
.gab-side-rule-desc { font-size: var(--gab-text-xs); color: var(--gab-gray-500); line-height: 1.5; }

/* ===== STEP 4: 검토 중 (Image 5) ===== */
.gab-review {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--gab-space-8);
    align-items: center;
}
.gab-review-illust {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gab-primary-50) 0%, #fff 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    color: var(--gab-primary-500);
    margin: 0 auto;
}
.gab-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--gab-primary-50);
    color: var(--gab-primary-700);
    border-radius: var(--gab-radius-full);
    font-size: var(--gab-text-sm);
    font-weight: 700;
    margin-bottom: var(--gab-space-5);
}
.gab-review-rows { display: flex; flex-direction: column; gap: var(--gab-space-3); margin-bottom: var(--gab-space-5); }
.gab-review-row {
    display: flex;
    align-items: center;
    gap: var(--gab-space-3);
    padding-bottom: var(--gab-space-3);
    border-bottom: 1px solid var(--gab-gray-100);
}
.gab-review-row:last-child { border-bottom: none; padding-bottom: 0; }
.gab-review-row-icon { color: var(--gab-gray-400); font-size: 18px; width: 20px; }
.gab-review-row-label { font-size: var(--gab-text-sm); color: var(--gab-gray-600); }
.gab-review-row-value { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-900); margin-left: auto; }
body[dir="rtl"] .gab-review-row-value { margin-left: 0; margin-right: auto; }
.gab-review-notes { display: flex; gap: var(--gab-space-3); }
.gab-review-notes-icon { color: var(--gab-primary-500); font-size: 18px; flex-shrink: 0; }
.gab-review-notes ul { list-style: none; }
.gab-review-notes li { font-size: var(--gab-text-sm); color: var(--gab-gray-600); margin-bottom: 6px; padding-left: 14px; position: relative; }
.gab-review-notes li::before { content: '•'; position: absolute; left: 0; color: var(--gab-primary-400, #4E72A2); }

/* 고객지원 사이드 */
.gab-support-head {
    display: flex;
    align-items: center;
    gap: var(--gab-space-3);
    margin-bottom: var(--gab-space-5);
    padding-bottom: var(--gab-space-4);
    border-bottom: 1px solid var(--gab-gray-100);
}
.gab-support-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--gab-radius);
    background: var(--gab-primary-50);
    color: var(--gab-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.gab-support-name { font-size: var(--gab-text-md); font-weight: 700; color: var(--gab-gray-900); }
.gab-support-hours { font-size: var(--gab-text-xs); color: var(--gab-gray-500); }
.gab-support-item { display: flex; gap: var(--gab-space-3); margin-bottom: var(--gab-space-4); }
.gab-support-item-icon { color: var(--gab-primary-500); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.gab-support-item-value { font-size: var(--gab-text-sm); font-weight: 700; color: var(--gab-gray-900); }
.gab-support-item-label { font-size: var(--gab-text-xs); color: var(--gab-gray-500); }
.gab-support-notice {
    background: var(--gab-primary-50);
    border-radius: var(--gab-radius);
    padding: var(--gab-space-3) var(--gab-space-4);
    display: flex;
    gap: 8px;
    margin-top: var(--gab-space-4);
}
.gab-support-notice i { color: var(--gab-primary-600); font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.gab-support-notice span { font-size: 11px; color: var(--gab-gray-600); line-height: 1.5; }

/* ===== STEP 1: 유형 선택 ===== */
.gab-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gab-space-5); }
.gab-type-card {
    border: 2px solid var(--gab-gray-200);
    border-radius: var(--gab-radius-xl);
    padding: var(--gab-space-8);
    text-align: center;
    cursor: pointer;
    transition: all var(--gab-transition);
}
.gab-type-card:hover { border-color: var(--gab-primary-400, #4E72A2); box-shadow: var(--gab-shadow-md); transform: translateY(-3px); }
.gab-type-card.is-selected { border-color: var(--gab-primary-600); background: var(--gab-primary-50); }
.gab-type-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--gab-space-4);
    border-radius: var(--gab-radius-lg);
    background: var(--gab-primary-50);
    color: var(--gab-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}
.gab-type-icon--buyer { background: #F4EBD7; color: var(--gab-accent-600); }
.gab-type-name { font-size: var(--gab-text-xl); font-weight: 800; color: var(--gab-gray-900); margin-bottom: var(--gab-space-2); }
.gab-type-desc { font-size: var(--gab-text-sm); color: var(--gab-gray-500); line-height: 1.6; margin-bottom: var(--gab-space-4); }
.gab-type-docs { font-size: var(--gab-text-xs); color: var(--gab-gray-400); padding-top: var(--gab-space-3); border-top: 1px solid var(--gab-gray-100); }

/* ===== STEP 5·7: 완료 상태 ===== */
.gab-result { text-align: center; padding: var(--gab-space-8) var(--gab-space-4); }
.gab-result-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--gab-space-6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
}
.gab-result-icon--success { background: #DCFCE7; color: #15803D; }
.gab-result-title { font-size: var(--gab-text-3xl); font-weight: 800; color: var(--gab-gray-900); margin-bottom: var(--gab-space-3); }
.gab-result-desc { font-size: var(--gab-text-md); color: var(--gab-gray-500); line-height: 1.7; margin-bottom: var(--gab-space-8); max-width: 480px; margin-left: auto; margin-right: auto; }

/* 기본 정보 폼 그리드 */
.gab-reg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gab-space-5); }
.gab-reg-form-grid .gab-field--full { grid-column: 1 / -1; }

/* === 반응형 === */
@media (max-width: 900px) {
    .gab-reg-layout { grid-template-columns: 1fr; }
    .gab-reg-nav { display: none; }
    .gab-upload-item { grid-template-columns: 1fr; gap: var(--gab-space-3); }
    .gab-review { grid-template-columns: 1fr; gap: var(--gab-space-5); }
    .gab-type-grid { grid-template-columns: 1fr; }
    .gab-reg-form-grid { grid-template-columns: 1fr; }
}

/* ===== 가입폼 인라인 서류 업로드 (판매자) ===== */
.gab-mini-uploads { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gab-mini-upload { display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; border:1.5px dashed var(--gab-gray-300); border-radius: 5px; cursor:pointer; text-align:center; transition:all .15s ease; background:var(--gab-gray-50); }
.gab-mini-upload:hover { border-color:var(--gab-primary-400); background:var(--gab-primary-50); }
.gab-mini-upload i { font-size:22px; color:var(--gab-primary-500); }
.gab-mini-upload-name { font-size:12.5px; font-weight:700; color:var(--gab-gray-800); }
.gab-mini-upload-file { font-size:11px; color:var(--gab-gray-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.gab-mini-upload.is-filled { border-color:var(--gab-success); border-style:solid; background:#ECFDF5; }
.gab-mini-upload.is-filled i { color:var(--gab-success); }
.gab-mini-upload.is-filled .gab-mini-upload-file { color:var(--gab-success); font-weight:600; }
@media (max-width:640px){ .gab-mini-uploads { grid-template-columns:1fr; } }

/* 국가 select 등 폼 셀렉트 (가입폼) */
.gab-reg-form select.gab-field__input { background:#fff; cursor:pointer; }

/* ============================================================
 * 회원가입 언어 선택 게이트 (7단계)
 * ============================================================ */
.gab-reglang { max-width: 760px; margin: 20px auto; text-align: center; }
.gab-reglang-head { margin-bottom: 28px; }
.gab-reglang-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; background: var(--gab-primary-50); color: var(--gab-primary-700);
  border-radius: var(--gab-radius-full); font-size: 12px; font-weight: 700; margin-bottom: 16px;
}
.gab-reglang-title { font-size: 28px; font-weight: 800; margin: 0 0 8px; color: var(--gab-gray-900); }
.gab-reglang-sub { font-size: 15px; color: var(--gab-gray-500); margin: 0; }
.gab-reglang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.gab-reglang-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px; background: #fff;
  border: 2px solid var(--gab-gray-200); border-radius: var(--gab-radius-xl);
  cursor: pointer; transition: all .18s ease; position: relative;
}
.gab-reglang-card:hover { border-color: var(--gab-primary-500); box-shadow: var(--gab-glow-brand); transform: translateY(-3px); }
.gab-reglang-flag {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--gab-shadow-sm); margin-bottom: 6px; background: var(--gab-gray-100);
}
.gab-reglang-flag svg, .gab-reglang-flag img { width: 100%; height: 100%; object-fit: cover; }
.gab-reglang-native { font-size: 20px; font-weight: 800; color: var(--gab-gray-900); }
.gab-reglang-en { font-size: 13px; color: var(--gab-gray-500); font-weight: 500; }
.gab-reglang-go {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gab-gray-100); color: var(--gab-gray-400);
  display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .18s;
}
.gab-reglang-card:hover .gab-reglang-go { background: var(--gab-grad-brand); color: #fff; }
.gab-reglang-rtl .gab-reglang-go { right: auto; left: 14px; }
.gab-reglang-note { font-size: 13px; color: var(--gab-gray-500); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .gab-reglang-grid { grid-template-columns: 1fr; gap: 12px; }
  .gab-reglang-card { flex-direction: row; justify-content: flex-start; padding: 18px 22px; gap: 16px; }
  .gab-reglang-flag { margin-bottom: 0; width: 44px; height: 44px; flex-shrink: 0; }
  .gab-reglang-title { font-size: 23px; }
  .gab-reglang-card .gab-reglang-go { top: 50%; transform: translateY(-50%); }
}