/* [생성 파일 — 직접 수정 금지]
 * signup.css 를 ".pp-pub" 스코프로 한정한 파생본.
 * 원본이 갱신되면 scripts/scope-css.js 를 재실행해 다시 생성할 것.
 */
@charset "UTF-8";
/**
 * pages/signup — 회원가입 (Figma 1:1808 대표파트너 기준).
 * 콘텐츠 1080(중앙) · 좌 폼카드 600 / 우 안내·FAQ 440(flex). 공통 컴포넌트 재사용.
 */
/**
 * SCSS 변수 (연산/믹스인용) — CSS 출력 없음(어디서 @use 해도 중복 없음).
 * :root 토큰은 _tokens.scss 에서 출력.
 */
/* 레이아웃 폭 (PC 전용) */
/**
 * 타이포 스케일 (단일 소스) — @Guide_Typography 기준. key = font-size(px).
 * 여기만 고치면 font() 믹스인과 --fs-* / --lh-* 토큰이 함께 갱신됨.
 */
/**
 * pages/signup — 회원가입 (Figma 1:1808 대표파트너 기준).
 * 콘텐츠 1080(중앙) · 좌 폼카드 600 / 우 안내·FAQ 440(flex). 공통 컴포넌트 재사용.
 */
/**
 * 공용 믹스인 — `@use '../common/mixins' as *;`
 */
/**
 * 타이포 스케일 적용(size+line-height 한 쌍). `@include font(20);` → 20px/30px.
 * 허용 키는 $font-scale. weight는 별도(--fw-* 토큰).
 */
/* 스크롤 끝 튕김(rubber-band overscroll) 제거 — 상단 회색(헤더)/하단 흰색(푸터)이라
   튕길 때 배경색이 반대쪽과 안 맞아 삐져나옴. PC 전용이라 튕김 자체를 없앰. */.pp-pub{
  overscroll-behavior: none;
}

/* 콘텐츠 폭 1080 (Figma) */.pp-pub .inner{
  width: 1080px;
}.pp-pub .join-head{
  margin-bottom: 40px;
  text-align: center;
}.pp-pub .join-title{
  font-size: 32px;
  line-height: 44px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}.pp-pub .join-subtitle{
  margin-top: 6px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-02);
}.pp-pub .join-layout{
  display: flex;
  align-items: flex-start;
  gap: 40px;
}.pp-pub .join-form{
  flex: 0 0 600px;
  width: 600px;
}.pp-pub .join-form .card{
  padding: 32px;
  background: #fff;
  border: 0;
  border-radius: 14px;
}

/* 입력+버튼 행: 버튼 자연폭(min 80 — btn-line 기본) */.pp-pub .input-group .btn{
  flex: 0 0 auto;
}

/* 입력 검증 오류 — 공용 .error-msg 재사용. 기본 숨김, .is-error 에서 노출. 입력↔오류 32(Figma) */.pp-pub .signup-form .error-msg{
  display: none;
  margin-top: 32px;
}.pp-pub .signup-form.is-error .error-msg{
  display: flex;
}

/* 역할별 — 증빙서류는 대표파트너(.is-rep)만 노출, 기본(파트너)은 숨김 */.pp-pub .signup-form .rep-only{
  display: none;
}.pp-pub .signup-form.is-rep .rep-only{
  display: block;
}.pp-pub .join-side{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}.pp-pub .side-block{
  display: flex;
  flex-direction: column;
  gap: 8px;
}.pp-pub .side-title{
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}.pp-pub .join-info{
  padding: 20px;
  background: #fff;
  border-radius: 14px;
}.pp-pub .join-info-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}.pp-pub .join-info-list li{
  display: flex;
  gap: 6px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-02);
}.pp-pub .join-info-list li::before{
  content: "";
  flex: 0 0 auto;
  width: 2px;
  height: 2px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--text-02);
}

/* FAQ 리스트 — 공통 .accordion 재사용. 여백은 .side-block gap 담당 */.pp-pub .faq .accordion{
  margin-top: 0;
}

/* 팝업 입력영역 (소속사 검색·이메일 인증 공용) — 공용 .popup 재사용. 안내↔입력 16(Figma) */.pp-pub .popup-field{
  display: flex;
  flex-direction: column;
  gap: 16px;
}.pp-pub .popup-guide{
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--n-900);
}.pp-pub .company-search{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 검색 결과 박스 — 기본 숨김. 성공(.is-searched)=회사명 · 없음(.is-empty)=안내(개발 연동) */.pp-pub .company-result{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 20px;
  border-radius: 10px;
  background: var(--n-40);
  font-size: 15px;
  line-height: 22px;
}.pp-pub .company-result .ico{
  width: 18px;
  height: 18px;
}.pp-pub .company-result:not(.company-result--empty){
  font-weight: var(--fw-semibold);
  color: var(--n-900);
}.pp-pub .company-result:not(.company-result--empty) .ico{
  color: var(--n-900);
}.pp-pub .company-result--empty{
  color: var(--text-02);
}.pp-pub .company-result--empty .ico{
  color: var(--text-02);
}.pp-pub .company-search.is-searched .company-result:not(.company-result--empty), .pp-pub .company-search.is-empty .company-result--empty{
  display: flex;
}

/* ID 중복 확인 팝업 — 알림형 .popup 재사용. '사용 중' 상태 아이콘은 주의(N-400) */.pp-pub .popup-msg-icon--noti{
  color: var(--n-400);
}