/* 배경 & 기본 글꼴 */
body{
    background: radial-gradient(60rem 40rem at 10% -10%, #e9f6ff 0%, transparent 60%), #f6f8fb;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Segoe UI, Roboto, Arial, "Noto Sans KR", sans-serif;
    color:#1f2937;
    line-height:1.55;
    margin:0;
}

/* 카드 컨테이너 */
.container.signup{
    max-width:1300px;
    margin:48px auto;
    border-radius:18px;
    box-shadow:0 24px 60px rgba(2,8,20,.08), 0 8px 24px rgba(2,8,20,.06);
    background:#fff;
    overflow:hidden;
}

/* 2열 레이아웃 */
.signup-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr; /* 좌/우 */
    min-height:620px;
}

/* 왼쪽 히어로 */
.signup-hero{
    background:linear-gradient(45deg,#172E6C,#6FC8F8);
    padding:56px 48px;
    display:flex; flex-direction:column; justify-content:center;
    color:#fff;
}
.signup-hero h3{ font-size:40px; font-weight:800; margin:0 0 14px; line-height:1.15; }
.signup-hero p{ max-width:420px; margin:0; font-size:15px; color:rgba(255,255,255,.9); }

/* 오른쪽 폼 영역 */
.signup-body{
    display: flex;
    justify-content: center;
    align-items: center; /* 세로 가운데 정렬 */
    min-height: 620px;   /* 높이 고정 또는 충분히 크게 */
    padding: 40px 48px;
    /*padding: 40px 48px;*/
    /*display:flex; justify-content:center; align-items:flex-start;*/
}

/* 🔒 공통 레일: 우측 끝선 정렬용 */
.rail{ width:100%; max-width:640px; margin:0 auto; }
.rail > *{ width:100%; }
.signup-body h2{ font-size:26px; font-weight:800; margin:0 0 20px; }

/* 역할 버튼 */
.role-btns{
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:16px; margin-bottom:20px;
}
.role-btns button{
    padding:14px 16px; border-radius:12px; border:1px solid #dfe7f1;
    background:#f7f9fc; font-weight:700; color:#334155;
    transition:all .18s ease; cursor:pointer;
}
.role-btns button.active{
    background:#6FC8F8; border-color:#6FC8F8; color:#fff;
    box-shadow:0 12px 20px rgba(111,200,248,.35);
}

/* 입력 필드 */
.form-group{ margin-bottom:16px; }
label{ display:block; margin-bottom:.35rem; font-weight:600; font-size:.92rem; color:#6b7280; }

/* 인풋 + 우측 버튼 한 줄 배치 */
.input-row{
    display:grid;
    grid-template-columns: 1fr auto; /* 인풋이 늘어나고 버튼은 내용폭 */
    gap:12px;
    width:100%;
    align-items:center;
}

input[type="text"], input[type="password"], input[type="email"]{
    width:100%; height:48px; font-size:1rem; padding:10px 14px;
    border:1px solid #e5e7eb; border-radius:12px; background:#fff;
    box-sizing:border-box;
    transition:border-color .18s ease, box-shadow .18s ease;
}
input:focus{ border-color:#90cff8; box-shadow:0 0 0 .25rem rgba(111,200,248,.25); }

/* 오른쪽 작은 액션 버튼 */
.action-btn{
    height:48px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid #dfe7f1;
    background:#eef6ff;
    color:#0f2f50;
    font-weight:700;
    cursor:pointer;
    transition:all .18s ease;
    white-space:nowrap;
}
.action-btn:hover{ background:#dff0ff; transform:translateY(-1px); }
.action-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* 감지 방식 섹션 */
.detect-label{ display:block; font-weight:600; color:#6b7280; margin:14px 0 8px; }
.detect-btns{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:12px; margin-bottom:20px; width:100%;
}
.detect-btn{
    height:68px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:12px 10px;
    border-radius:12px; border:1px solid #dfe7f1;
    background:#f7f9fc; font-size:.9rem; color:#374151;
    cursor:pointer; transition:all .18s ease;
    box-sizing:border-box;
}
.detect-btn iconify-icon{ font-size:24px; line-height:1; }
.detect-btn:hover{ transform:translateY(-2px); }
.detect-btn.active{
    background:#6FC8F8; border-color:#6FC8F8; color:#fff;
    box-shadow:0 12px 20px rgba(111,200,248,.35);
}

/* 이메일 인증 행 */
#emailVerifyGroup{ display:none; }
.subtext{ margin-top:6px; font-size:.88rem; color:#6b7280; }
.ok{ color:#16a34a; }
.err{ color:#ef4444; }

/* 비밀번호 안내 메시지 영역 높이 고정 */
.subtext, .err, .ok {
    min-height: 22px; /* 메시지 한 줄 기준, 필요시 더 크게 조정 */
    display: block;
}

/* 제출 버튼 */
.submit-btn{
    width:100%; padding:14px 18px; border:0; border-radius:10px;
    font-size:1rem; font-weight:700; background:#6FC8F8; color:#fff; cursor:pointer;
    transition:background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.submit-btn:hover{ background:#5bbcf0; transform:translateY(-1px); box-shadow:0 14px 20px rgba(111,200,248,.35); }
.msg{ margin-top:10px; color:#d32f2f; font-weight:600; }

/* 프로세싱 바 */
.progress-bar { display: flex; justify-content: space-between; margin-bottom: 24px; }
.progress-bar .step { flex: 1; text-align: center; padding: 8px 0; border-bottom: 3px solid #e0e7ef; color: #b0b8c1; font-weight: 700; font-size: 1.1rem; transition: all .2s; }
.progress-bar .step.active { border-bottom: 3px solid #6FC8F8; color: #1976d2; }

/* 단계별 섹션 */
.step-section { display: none; }
.step-section.active { display: block; }

.step-section {
    height: 520px; /* min-height 대신 height로 고정 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 내부 요소 세로 가운데 정렬 */
}
.step-section:not(.active) {
    display: none;
}


/* 단계별 버튼 */
.step-btns { display: flex; justify-content: space-between; margin-top: 24px; gap: 24px; }
.next-btn, .prev-btn {
    background: linear-gradient(90deg, #6FC8F8 0%, #1976d2 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(111,200,248,.18);
    transition: background .2s, box-shadow .2s, transform .12s;
}
.next-btn:hover, .prev-btn:hover {
    background: linear-gradient(90deg, #1976d2 0%, #6FC8F8 100%);
    box-shadow: 0 8px 20px rgba(111,200,248,.28);
    transform: translateY(-2px);
}

/* 진행 바 스타일 추가 */
.progress-bar-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 2rem;
}
.progress-bar-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.progress-bar-step .circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e0e7ef;
  color: #333;
  font-weight: bold;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  transition: background 0.2s, color 0.2s;
}
.progress-bar-step.active .circle {
  background: #6FC8F8;
  color: #fff;
  box-shadow: 0 0 8px #6FC8F866;
}
.progress-bar-step .label {
  font-size: 0.98rem;
  color: #b0b8c1;
  font-weight: 500;
  letter-spacing: -1px;
  transition: color 0.2s, font-weight 0.2s;
}
.progress-bar-step.active .label {
  color: #1976d2;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .progress-bar-container {
    gap: 16px;
  }
  .progress-bar-step .label {
    font-size: 0.88rem;
  }
}

/* 반응형 */
@media (max-width: 991.98px){
    .signup-grid{ grid-template-columns:1fr; }
    .signup-hero{ min-height:280px; }
    .signup-body{ padding:28px 32px 36px; }
    .rail{ max-width: 680px; }
}
@media (max-width: 575.98px){
    .signup-hero h3{ font-size:32px; }
    .signup-body{ padding:24px 20px 32px; }
    .rail{ max-width: 100%; }
    .detect-btns{ grid-template-columns:1fr; }
    .role-btns{ grid-template-columns:1fr; }
    .detect-btn{ height:60px; }
}
@media (min-width: 576px) and (max-width: 767.98px){
    .detect-btns{ grid-template-columns:repeat(2,1fr); }
}

/* 개인정보 수집 및 이용 동의 스타일 */
.privacy-consent {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #d1e7dd;
    border-radius: 8px;
    background-color: #f8f9fa;
}
.privacy-consent h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.privacy-consent p {
    margin-bottom: 12px;
    line-height: 1.6;
}
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.privacy-table-header {
    background-color: #f1f5f9;
    font-weight: bold;
}
.privacy-table-cell, .privacy-table-header {
    padding: 8px;
    border: 1px solid #dee2e6;
    text-align: left;
}
.privacy-table-row {
    display: table-row;
}
.privacy-table-cell {
    display: table-cell;
}
.privacy-table-header {
    display: table-header-group;
}
.privacy-table-row:nth-child(even) {
    background-color: #f9f9f9;
}
.privacy-consent h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 16px;
    margin-bottom: 8px;
}
.privacy-consent ul {
    margin-left: 20px;
    margin-bottom: 12px;
}
.privacy-consent li {
    margin-bottom: 8px;
}

/* 로그인/비밀번호 찾기 메뉴 스타일 */
.login-sub-menu {
    width: 100%;
    margin: 36px 0 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 32px;
    list-style: none;
}
.login-sub-menu li {
    display: flex;
    align-items: center;
}
.login-sub-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #1976d2;
    background: #f7f9fc;
    border-radius: 10px;
    padding: 12px 28px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(111,200,248,.10);
    transition: background .18s, color .18s, box-shadow .18s, transform .12s;
}
.login-sub-menu a:hover {
    background: linear-gradient(90deg, #6FC8F8 0%, #1976d2 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(111,200,248,.18);
    transform: translateY(-2px);
}
.login-sub-menu iconify-icon {
    font-size: 1.3em;
}
@media (max-width: 575.98px) {
    .login-sub-menu {
        flex-direction: column;
        gap: 14px;
    }
    .login-sub-menu a {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
        padding: 12px 0;
    }
}

/* 텍스트형 로그인/비밀번호 찾기 메뉴 스타일 (구분선 항상 보이게) */
.login-text-menu {
    width: 100%;
    margin: 36px 0 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    list-style: none;
    color: #8a8a8a;
    font-size: 1.08rem;
    font-weight: 500;
}
.login-text-menu li {
    display: flex;
    align-items: center;
}
.login-text-menu li:not(:last-child)::after {
    content: '|';
    display: inline-block;
    margin: 0 12px;
    color: #bdbdbd;
    font-size: 1.08em;
    font-weight: 400;
    vertical-align: middle;
}
.login-text-menu a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color .18s;
}
.login-text-menu a:hover {
    color: #1976d2;
    text-decoration: underline;
}
@media (max-width: 575.98px) {
    .login-text-menu {
        flex-direction: column;
        gap: 0;
        align-items: center;
    }
    .login-text-menu li:not(:last-child)::after {
        content: '|';
        margin: 8px 0;
        display: block;
        text-align: center;
    }
}

/* 입력 필드 간 간격 일관성 확보 */
.form-group {
    margin-bottom: 16px;
}
/* 이름 입력칸과 비밀번호 입력칸 사이에도 동일한 간격 적용 */
#user_name.form-group {
    margin-bottom: 16px;
}

/* 개인정보 수집 및 이용 동의 스타일 */
.privacy-consent {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #d1e7dd;
    border-radius: 8px;
    background-color: #f8f9fa;
}
.privacy-consent h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.privacy-consent p {
    margin-bottom: 12px;
    line-height: 1.6;
}
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.privacy-table-header {
    background-color: #f1f5f9;
    font-weight: bold;
}
.privacy-table-cell, .privacy-table-header {
    padding: 8px;
    border: 1px solid #dee2e6;
    text-align: left;
}
.privacy-table-row {
    display: table-row;
}
.privacy-table-cell {
    display: table-cell;
}
.privacy-table-header {
    display: table-header-group;
}
.privacy-table-row:nth-child(even) {
    background-color: #f9f9f9;
}
.privacy-consent h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 16px;
    margin-bottom: 8px;
}
.privacy-consent ul {
    margin-left: 20px;
    margin-bottom: 12px;
}
.privacy-consent li {
    margin-bottom: 8px;
}

/* 로그인/비밀번호 찾기 메뉴 스타일 */
.login-sub-menu {
    width: 100%;
    margin: 36px 0 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 32px;
    list-style: none;
}
.login-sub-menu li {
    display: flex;
    align-items: center;
}
.login-sub-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #1976d2;
    background: #f7f9fc;
    border-radius: 10px;
    padding: 12px 28px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(111,200,248,.10);
    transition: background .18s, color .18s, box-shadow .18s, transform .12s;
}
.login-sub-menu a:hover {
    background: linear-gradient(90deg, #6FC8F8 0%, #1976d2 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(111,200,248,.18);
    transform: translateY(-2px);
}
.login-sub-menu iconify-icon {
    font-size: 1.3em;
}
@media (max-width: 575.98px) {
    .login-sub-menu {
        flex-direction: column;
        gap: 14px;
    }
    .login-sub-menu a {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
        padding: 12px 0;
    }
}

/* 텍스트형 로그인/비밀번호 찾기 메뉴 스타일 (구분선 항상 보이게) */
.login-text-menu {
    width: 100%;
    margin: 36px 0 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    list-style: none;
    color: #8a8a8a;
    font-size: 1.08rem;
    font-weight: 500;
}
.login-text-menu li {
    display: flex;
    align-items: center;
}
.login-text-menu li:not(:last-child)::after {
    content: '|';
    display: inline-block;
    margin: 0 12px;
    color: #bdbdbd;
    font-size: 1.08em;
    font-weight: 400;
    vertical-align: middle;
}
.login-text-menu a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color .18s;
}
.login-text-menu a:hover {
    color: #1976d2;
    text-decoration: underline;
}
@media (max-width: 575.98px) {
    .login-text-menu {
        flex-direction: column;
        gap: 0;
        align-items: center;
    }
    .login-text-menu li:not(:last-child)::after {
        content: '|';
        margin: 8px 0;
        display: block;
        text-align: center;
    }
}