:root{
  --bg:#ffffff;               /* 전체 페이지 배경색 */
  --text:#1f2937;             /* 기본 본문 텍스트 색 */
  --muted:#6b7280;            /* 보조/설명 텍스트 색 */
  --divider:#e5e7eb;          /* 구분선/테두리 공용 색 */
  --ok:#2563eb;               /* 포커스/상호작용 강조색 */
  --error:#ef4444;            /* 오류 메시지 색 */
  --accent:#111827;           /* 진한 강조색  */
  --accent-weak:#374151;      /* 약한 강조색 */
  --radius:18px;              /* 둥근 모서리 기본값 */
}

/* 모든 button 요소에서 손가락 커서 표시  */
button {
  cursor: pointer;
}

/* ================================
   레이아웃 기본값 
================================ */
*{box-sizing:border-box}      /* 패딩/보더 포함 크기 계산 */
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:
    ui-sans-serif,-apple-system,Segoe UI,Roboto,
    "Noto Sans KR","Malgun Gothic",system-ui,Arial,sans-serif; /* 한국어 가독성 고려 폰트 스택 */
}

/* ================================
   최상위 레이아웃: 좌/우 2열
   좌측 0.8, 우측 1.2 비율
================================ */
.signup-wrap{
  min-height:100svh;          /* 모바일 환경 대응: 주소줄 제외 실 화면 높이 */
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;  /* 열 비율 */
  gap:0;                       /* 열 사이 간격 제거 */
}

/* ================================
   좌측 영역 
================================ */
.left{
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
  /* 위는 짙은 검정 → 아래는 밝아지는 수직 그라데이션 */
  background: linear-gradient(
    180deg,
    #0b0b0c 0%,   /* 상단: 거의 검정 */
    #151517 30px,  /* 중간: 회색 톤 */
    #f7f8fa 100%  /* 하단: 매우 밝은 회색에 가깝게 */
  );
}

/* 좌측 내부 컨테이너: 상단 타이틀 / 중앙 일러스트 / 하단 노트 */
.left-inner{
  width:min(720px, 88%);      /* 넓은 화면에서도 과도한 확장 방지 */
  display:grid;
  grid-template-rows: auto 1fr auto;  /* 위/가운데/아래 영역 분할 */
  padding:56px 0 36px;        /* 위아래 여백 */
}

/* 좌측 타이틀 (가운데 정렬/대형 폰트) */
.left-title{
  margin:0 0 16px;
  font-size: 60px;
  color:#ffffff;
  text-align: center;
}

/* 일러스트 영역: 가운데 정렬 */
.left-illust{ display:grid; place-items:center; }
/* 이미지: 반응형 크기 제한 */
.left-illust img{ width:min(420px,60%); }

/* 좌측 하단 안내 노트 (리스트) */
.left-notes{
  margin:0;
  padding-left:20px;          /* 불릿 들여쓰기 시각 보정 */
  line-height:1.7;
  color:#111;                 /* 하단이 밝아지므로 어두운 텍스트 사용 */
  font-weight:600;
}

/* ================================
   우측 패널
   가운데 구분선 표현을 위해 왼쪽 테두리 사용
================================ */
.panel{
  background:transparent;
  border-left:1px solid var(--divider);  /* 중앙 세로 분리선 */
  box-shadow:none; border-radius:0;
  padding:48px 48px;         /* 내부 여백 */
  display:grid;
  grid-template-columns: 180px 1fr;  /* 왼쪽 스텝퍼, 오른쪽 컨텐츠 */
  align-items:start;
  gap:0 28px;                /* 스텝퍼와 카드 사이 가로 간격 */
}

/* ================================
   스텝퍼 (세로 단계 표시)
================================ */
.stepper{
  list-style:none;
  margin:0;
  padding:8px 0;
  position:relative;          /* 필요 시 rail(연결선) 위치 기준점 */
}

/* 각 스텝 라인 아이템 */
.step{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 0;             /* 스텝 간 세로 간격 */
  cursor:default;             /* 숫자 클릭 이동 비활성화 시 기본 커서 */
  color:#9ca3af;              /* 비활성 색 */
  font-weight:700;
}

/* 스텝의 동그라미 숫자 */
.step .dot{
  display:grid; place-items:center;
  flex:0 0 auto;
  width:30px; height:30px;
  border-radius:50%;
  background:#e9ecef;         /* 비활성 배경 */
  color:#555;
  font-size:13px;
}

/* 현재 스텝(활성) 스타일 */
.step.is-active{ color:var(--text) }
.step.is-active .dot{ background:#111827; color:#fff }

/* 완료된 스텝 스타일 */
.step.is-done{ color:#c5cbd3 }
.step.is-done .dot{ background:#c5cbd3; color:#fff }

/* ================================
   스텝별 컨텐츠 카드
================================ */
.cards{ padding:8px 0 }       /* 카드 리스트 상단 여백 */
.card{ display:none }         /* 기본은 감춤 */
.card.is-active{ display:block } /* 현재 스텝 카드만 표시 */

.card-title{ margin:4px 0 10px; font-size:24px } /* 카드 제목 */
.card-desc{ margin:0 0 22px; color:var(--muted); line-height:1.7 } /* 설명문 */

/* 폼 그리드/필드/레이블 공통 */
.fields{ display:grid; gap:16px }
.field{ display:grid; gap:8px }
.label-text{ font-size:13px; color:var(--muted) }

/* 한 줄 행 배치 (인풋 + 버튼 등) */
.row{ display:flex; gap:10px; align-items:center }
/* 좌/우로 끝까지 벌려 배치 (인풋 왼쪽, 버튼 오른쪽) */
.row.between{ justify-content:space-between }

/* 인풋/셀렉트 기본 스타일 */
input, select{
  height:44px;
  padding:0 14px;
  border:1.5px solid #e5e7eb;
  border-radius:12px;
  font-size:15px;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:border-color .15s, box-shadow .15s; /* 포커스 애니메이션 */
  flex:1 1 auto;               /* 남는 공간을 유연하게 차지 */
}

/* 포커스 강조: 파란 외곽 그림자 */
input:focus, select:focus{
  border-color:var(--ok);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* 파일 인풋 높이 보정 */
input.file{ padding:9px 12px; height:auto }

/* 힌트/오류 메시지 */
.hint{ font-size:12px; color:#9ca3af; margin:0 }
.hint.good{ color:#10b981 }   /* 성공/일치 등 긍정 메시지 */
.error{ font-size:12px; color:var(--error); margin:0 }

/* 첨부 설명 및 파일칩(선택된 파일명 표시 등) */
.file-note{ font-size:12px; color:#9ca3af }
.file-chip{
  width:max-content;          /* 내용 길이만큼 가로폭 */
  max-width:100%;
  padding:8px 12px;
  border:1px solid #eef0f3;
  border-radius:999px;        /* 완전 둥근 칩 형태 */
  background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
  font-size:13px;
  color:#0b0b0c;
  margin-top:8px;
}

/* ================================
   버튼 스타일 (변형별)
================================ */
.button-primary{
  background:#0b0b0c;         /* 진한 검정 톤 */
  color:#fff;
  border:0;
  border-radius:12px;
  height:46px;
  padding:0 18px;
  font-weight:800;
  cursor:pointer;
  transition:.12s;            /* hover 전환 부드럽게 */
}
.button-primary:hover{ background:#111827 }  /* 더 진하게 */

.button-outline{
  border:1.5px solid #e5e7eb;
  background:#fff;
  color:#333;
  height:44px;
  border-radius:12px;
  padding:0 14px;
  cursor:pointer;
}

.button-muted{
  background:#0b0b0c;         /* 현재는 primary와 동일 톤 (필요 시 분리) */
  color:#fff;
  border:0;
  border-radius:12px;
  height:44px;
  padding:0 18px;
}

.button-ghost{
  background:transparent;     /* 투명 배경, 외곽선만 */
  border:1.5px solid #e5e7eb;
  height:44px;
  border-radius:12px;
  padding:0 16px;
}

/* 어두운 강조 버튼: 중복확인/다음단계 등 */
.button-dark{
  background:#0b0b0c;
  color:#fff;
  border:0;
  border-radius:8px;
  height:44px;
  padding:0 16px;
  font-weight:700;
  cursor:pointer;
  transition:.12s;
}
.button-dark:hover{ background:#111827 }

/* 버튼 영역 공통 레이아웃 */
.actions{
  display:flex;
  gap:10px;
  justify-content:flex-start; /* 기본은 왼쪽 정렬 */
  margin-top:22px;
}
/* 좌/우 끝으로 벌리기 (예: 다음단계/취소하기) */
.actions.space-between{ justify-content:space-between }

/* 아이콘 형태의 보조 버튼 (예: 비밀번호 보기/숨기기) */
.icon-button{
  background:transparent;
  border:1px dashed #e5e7eb;
  height:44px;
  border-radius:10px;
  padding:0 12px;
  cursor:pointer;
}

/* ================================
   반응형 (태블릿 이하)
   - 1열로 전환
   - 좌측 분리선 제거
   - 제목/일러스트 크기 축소
================================ */
@media (max-width: 980px){
  .signup-wrap{ grid-template-columns:1fr } /* 단일 열 */
  .panel{
    border-left:0;             /* 중앙 분리선 제거 (모바일에서는 불필요) */
    padding:28px 20px;
    grid-template-columns:1fr; /* 스텝퍼 위, 카드 아래로 세로 배치 */
  }
  .stepper{
    display:flex;              /* 가로 스크롤 가능한 스텝퍼 */
    gap:12px;
    overflow-x:auto;
    padding-bottom:12px;
  }
  .stepper .rail{ display:none } /* 세로 연결선은 감춤 (모바일) */

  .left-inner{ width:92%; padding:36px 0 28px }
  .left-title{ font-size:38px }      /* 타이틀 축소 */
  .left-illust img{ width:min(320px,70%) } /* 이미지 축소 */
}