/* [생성 파일 — 직접 수정 금지]
 * login.css 를 ".pp-pub" 스코프로 한정한 파생본.
 * 원본이 갱신되면 scripts/scope-css.js 를 재실행해 다시 생성할 것.
 */
@charset "UTF-8";
/**
 * pages/login — 로그인(로그인_1) 페이지 전용 레이아웃.
 * 공통 컴포넌트 재사용, 이 페이지 고유 배치만. head { "css": "login" }.
 */
/**
 * SCSS 변수 (연산/믹스인용) — CSS 출력 없음(어디서 @use 해도 중복 없음).
 * :root 토큰은 _tokens.scss 에서 출력.
 */
/* 레이아웃 폭 (PC 전용) */
/**
 * 타이포 스케일 (단일 소스) — @Guide_Typography 기준. key = font-size(px).
 * 여기만 고치면 font() 믹스인과 --fs-* / --lh-* 토큰이 함께 갱신됨.
 */
/**
 * pages/login — 로그인(로그인_1) 페이지 전용 레이아웃.
 * 공통 컴포넌트 재사용, 이 페이지 고유 배치만. head { "css": "login" }.
 */
/**
 * 공용 믹스인 — `@use '../common/mixins' as *;`
 */
/**
 * 타이포 스케일 적용(size+line-height 한 쌍). `@include font(20);` → 20px/30px.
 * 허용 키는 $font-scale. weight는 별도(--fw-* 토큰).
 */
/* 중앙 카드형 → 전역 최소폭(#wrap 1200) 해제: 축소 시 좌우 여백이 균등히 줄어
 * fixed 모달과 흐름 콘텐츠 중앙이 항상 일치. (login.css 로드 페이지 한정) */.pp-pub #wrap{
  min-width: 0;
}

/* 이 화면군 한정 — 푸터 .inner 도 축소 시 좌우 패딩만 줄여 가로 오버플로 방지 */.pp-pub .inner{
  width: 100%;
  max-width: calc(var(--content-width) + 48px);
  padding: 0 24px;
}.pp-pub .login{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 140px);
  padding: 40px 0 60px;
  background: var(--n-50);
}

/* 카드 (폭 536 = 440 + 좌우 48) */.pp-pub .login-box{
  width: 536px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}.pp-pub .login-form{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 48px;
}.pp-pub .login-heads{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}.pp-pub .login-sub{
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--n-500);
}.pp-pub .login-title{
  font-size: 24px;
  line-height: 36px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}.pp-pub .login-fields{
  display: flex;
  flex-direction: column;
  gap: 10px;
}.pp-pub .login-inputs{
  display: flex;
  flex-direction: column;
  gap: 10px;
}.pp-pub .login-pw{
  position: relative;
}.pp-pub .login-pw .input{
  padding-right: 44px;
}.pp-pub .login-pw-toggle{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--n-500);
  cursor: pointer;
}.pp-pub .login-otp{
  display: flex;
  gap: 8px;
}.pp-pub .login-otp .input{
  flex: 1 1 auto;
  min-width: 0;
}.pp-pub .login-otp-btn{
  flex: 0 0 100px;
}

/* 인증코드 — 기본 숨김, OTP 전송 후 노출 */.pp-pub .login-code{
  display: none;
}

/* OTP 전송 후 (JS 가 .is-otp-sent 부여) */.pp-pub .login-form.is-otp-sent .login-code{
  display: block;
}.pp-pub .login-form.is-otp-sent .btn-otp{
  background: var(--n-50);
  border-color: transparent;
  color: var(--n-900);
}.pp-pub .login-form.is-otp-sent .btn-otp:hover{
  background: var(--n-100);
}.pp-pub .login-remember{
  gap: 5px;
}.pp-pub .login-actions{
  display: flex;
  flex-direction: column;
  gap: 14px;
}.pp-pub .login-links{
  display: flex;
  align-items: center;
}.pp-pub .login-links a{
  flex: 1 1 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-600);
  text-align: center;
}.pp-pub .login-links-sep{
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  background: var(--n-300);
}

/* 로그인 오류 — 기본 숨김, .is-error 시 노출 */.pp-pub .login-error{
  display: none;
}.pp-pub .login-form.is-error .login-error{
  display: flex;
}

/* 가입신청 내역 조회 (카드 하단, 상단 구분선) */.pp-pub .login-inquiry{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 48px;
  border-top: 1px solid var(--n-100);
}.pp-pub .login-inquiry-text{
  display: flex;
  flex-direction: column;
  gap: 8px;
}.pp-pub .login-inquiry-title{
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}.pp-pub .login-inquiry-desc{
  font-size: 13px;
  line-height: 20px;
  color: var(--n-600);
}.pp-pub .login-inquiry-form{
  display: flex;
  gap: 6px;
}.pp-pub .login-inquiry-form .input{
  flex: 1 1 0;
  min-width: 0;
}.pp-pub .login-inquiry-form .btn{
  flex: 0 0 auto;
}

/* 문의 이메일 (카드 아래) */.pp-pub .login-contact{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 536px;
  padding-top: 30px;
}.pp-pub .login-contact-desc{
  font-size: 14px;
  line-height: 20px;
  color: var(--n-600);
  text-align: center;
}.pp-pub .login-contact-mail{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-semibold);
  color: var(--n-800);
}.pp-pub .login-contact-mail .ico{
  color: var(--n-800);
}

/* 회원가입 신청 처리 현황 모달 콘텐츠 (.popup 컴포넌트 안) */.pp-pub .status-msg{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* 상태 아이콘 — N-50 원(80) + 상태 그래픽(멀티컬러) */.pp-pub .status-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--n-50);
}.pp-pub .status-icon img{
  width: 48px;
  height: 48px;
}.pp-pub .status-text{
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--n-900);
  text-align: center;
}.pp-pub .status-text b{
  font-weight: var(--fw-bold);
}.pp-pub .status-word--apply{
  color: var(--g-600);
}.pp-pub .status-word--receipt{
  color: var(--db-500);
}.pp-pub .status-word--approve{
  color: var(--color-point);
}.pp-pub .status-word--reject{
  color: var(--color-error);
}.pp-pub .status-info{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  font-size: 14px;
  line-height: 20px;
}.pp-pub .status-info-row{
  display: flex;
  align-items: flex-start;
}.pp-pub .status-info-key{
  flex: 0 0 60px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}.pp-pub .status-info-val{
  flex: 1 1 0;
  min-width: 0;
  font-weight: var(--fw-medium);
  color: var(--n-600);
}

/* 약관 동의 모달 (넓은 팝업 690) */.pp-pub .popup--terms{
  width: 690px;
}.pp-pub .terms-list{
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}.pp-pub .terms-block{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 약관 본문 박스 — Figma 형태 커스텀 스크롤바. 짧은 문구여도 아래 빈 여백으로 스크롤 작동 */.pp-pub .terms-text{
  box-sizing: border-box;
  height: 190px;
  padding: 20px;
  border-right: 8px solid transparent;
  overflow-y: scroll;
  background: var(--n-40);
  border-radius: 10px;
}.pp-pub .terms-text::-webkit-scrollbar{
  width: 5px;
}.pp-pub .terms-text::-webkit-scrollbar-track{
  margin: 8px 0;
  background: transparent;
}.pp-pub .terms-text::-webkit-scrollbar-thumb{
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50px;
}

/* 본문 — 짧은 문구 + 아래 빈 여백(스크롤 작동이 눈에 보이도록) */.pp-pub .terms-text-body{
  min-height: 210px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: #616161;
}.pp-pub .terms-check{
  gap: 5px;
}