@charset "UTF-8";
/* ============================================================
   ps-signup.css — 회원가입(일반) 개편 화면
   구성: 좌 아카이브 갤러리 캐러셀 + 우 가입 폼(폼/비번규칙/소셜)
   토큰: ps-tokens.css (--ps-*). 단일 라이트 테마.
   ============================================================ */

/* ── 2단 레이아웃 ── */
.ps-signup {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--ps-header-h, 4.25rem));
  align-items: stretch;
}
@media (min-width: 768px) { .ps-signup { grid-template-columns: 1fr 1fr; } }

/* ── 좌: 아카이브 갤러리 ── */
.ps-signup-gallery { position: relative; height: 30vh; overflow: hidden; background: var(--ps-mute-100); }
@media (min-width: 768px) { .ps-signup-gallery { height: auto; } }

.ps-signup-slide {
  position: absolute; inset: 0; display: block; text-decoration: none;
  opacity: 0; z-index: 0; pointer-events: none;
  transition: opacity 1000ms ease-out;
}
.ps-signup-slide.is-active { opacity: 1; z-index: 10; pointer-events: auto; }
/* 웹접근성: 갤러리 포커스 가시화.
   outline 은 슬라이드 위에 얹힌 grad(z5)·cap(z10) 에 가려지므로, z-index 올린 ::after 테두리로 그림. */
.ps-signup-slide:focus-visible { outline: none; }
.ps-signup-slide:focus-visible::after {
  content: ""; position: absolute; inset: 0; z-index: 15; pointer-events: none;
  border: 4px solid var(--ps-accent); box-shadow: 0 0 0 2px rgba(24,24,18,.55);
}
.ps-signup-slide .ph { position: absolute; inset: 0; background: var(--ps-mute-200); }
/* 실제 아카이브 사진 — 슬라이드를 꽉 채운다. 비율이 제각각이라 cover 로 자른다.
   사진이 없는 건은 위 .ph 톤 배경이 대신 깔린다. */
.ps-signup-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 이미지 미연동 — 아키텍처 톤 플레이스홀더 (슬라이드별 색조) */
.ps-signup-slide:nth-child(1) .ph { background: linear-gradient(135deg, #3a3f45, #6b7178); }
.ps-signup-slide:nth-child(2) .ph { background: linear-gradient(135deg, #4a4640, #837b6d); }
.ps-signup-slide:nth-child(3) .ph { background: linear-gradient(135deg, #33403f, #6f8481); }
.ps-signup-slide:nth-child(4) .ph { background: linear-gradient(135deg, #40434d, #767a88); }
.ps-signup-slide:nth-child(5) .ph { background: linear-gradient(135deg, #453f43, #857a80); }
.ps-signup-slide:nth-child(6) .ph { background: linear-gradient(135deg, #3c4640, #728174); }
.ps-signup-slide .grad {
  position: absolute; inset-inline: 0; bottom: 0; height: 40%; z-index: 5;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.3) 55%, transparent);
}
.ps-signup-slide .cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 10;
  padding: 0 var(--ps-gutter) 40px; color: var(--ps-paper);
}
.ps-signup-slide .cap .ps-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ps-paper); }
.ps-signup-slide .cap .ps-eyebrow .sep { opacity: .6; }
.ps-signup-slide .cap h2 {
  margin: 12px 0 0; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  font-weight: 900; letter-spacing: -0.02em; line-height: 0.92; max-width: 14ch;
}

/* 갤러리 컨트롤 (좌상단) */
.ps-signup-gallery-ctrl { position: absolute; left: var(--ps-gutter); top: 24px; z-index: 20; display: flex; align-items: center; gap: 6px; }
.ps-signup-gallery-ctrl button {
  width: 32px; height: 32px; display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ps-ink);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color 140ms ease;
}
.ps-signup-gallery-ctrl button:hover { background: var(--ps-paper); }
.ps-signup-gallery-ctrl button:focus-visible { outline: 3px solid var(--ps-accent); outline-offset: 2px; }
/* 재생/정지 버튼 — 두 아이콘을 같이 두고 상태(is-paused)로 하나만 보인다 [2026-09-25] */
#psGalPlay .ico-play { display: none; }
#psGalPlay.is-paused .ico-pause { display: none; }
#psGalPlay.is-paused .ico-play { display: block; }
.ps-signup-gallery-ctrl .count {
  margin-left: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ps-paper); background: rgba(24,24,18,.55); padding: 2px 8px; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* 진행 막대 (우하단) */
.ps-signup-gallery-bars { position: absolute; right: var(--ps-gutter); bottom: 40px; z-index: 20; display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ps-signup-gallery-bars li { height: 4px; width: 12px; background: rgba(255,255,255,.5); transition: width 500ms ease, background-color 500ms ease; }
.ps-signup-gallery-bars li.is-active { width: 32px; background: var(--ps-paper); }

/* ── 우: 가입 폼 ── */
.ps-signup-panel {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 3.5vw, 3rem) var(--ps-gutter);
  border-left: 1px solid var(--ps-ink);
}
@media (max-width: 767px) { .ps-signup-panel { border-left: 0; border-top: 1px solid var(--ps-ink); } }
.ps-signup-box { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 20px; }

.ps-signup-head .ps-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; }
.ps-signup-head h1 {
  margin: 12px 0 0; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 0.95; letter-spacing: -0.02em; white-space: pre-line;
}

/* 본인인증 진입 패널 */
.ps-signup-intro { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ps-mute-700); }
.ps-signup-verify {
  width: 100%; border: 1px solid var(--ps-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ps-accent); color: var(--ps-ink);
  padding: 14px; font-size: 15px; font-weight: 900; letter-spacing: 0.02em;
  transition: background-color 140ms ease, color 140ms ease;
}
.ps-signup-verify:hover { background: var(--ps-ink); color: var(--ps-paper); }
.ps-signup-verify .ico { display: inline-flex; }
/* 인증 건너뛰기 — 테스트 전용 [2026-09-18].
   ⚠ 일부러 눈에 띄게 둔다. 실서버에 켜진 채로 배포되면 바로 알아채야 한다.
     본 버튼(라임)과 확실히 달라 보이도록 점선 + 경고색으로 그린다. */
.ps-signup-skip {
  display: block; margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--ps-seoul-red); background: #fff5f3;
  font-size: 13px; color: var(--ps-seoul-red); text-align: center; text-decoration: none;
}
.ps-signup-skip:hover { background: #ffe9e4; }
.ps-signup-skip b { font-weight: 800; }
.ps-signup-skip .sub { display: block; margin-top: 3px; font-size: 12px; color: var(--ps-mute-700); }
/* 웹접근성: 폼/소셜/버튼 포커스 (밝은 배경 → 진청 링) */
.ps-signup-verify:focus-visible,
.ps-social-btn:focus-visible,
.ps-signup-submit:focus-visible,
.ps-signup-login a:focus-visible,
.ps-agree input:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 2px; }

/* 폼 */
.ps-signup-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ps-field { display: block; }
.ps-field-label { display: block; }
.ps-input {
  margin-top: 6px; width: 100%; border: 1px solid var(--ps-ink); background: transparent;
  padding: 10px 14px; font-size: 15px; outline: none; color: var(--ps-ink);
}
.ps-input::placeholder { color: var(--ps-mute-500); }
.ps-input:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 1px; }
/* 본인인증으로 확정된 값 — 읽기전용 잠금 */
.ps-input.is-locked { background: var(--ps-mute-50); color: var(--ps-mute-700); cursor: not-allowed; }
.ps-field-label .ps-lock { margin-left: 6px; font-size: 10px; opacity: .7; -webkit-text-size-adjust: none; }
.ps-field-hint { margin-top: 4px; display: block; font-size: 12px; line-height: 1.5; color: var(--ps-mute-500); }   /* 10.5px 는 안내·중복 경고가 잘 안 보여 12px [2026-10-23] */
.ps-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 비밀번호 규칙 안내 */
.ps-pw-note { border: 1px solid var(--ps-seoul-red); background: rgba(229,91,64,.05); padding: 12px 14px; }
.ps-pw-note .badge {
  display: inline-block; border: 1px solid var(--ps-seoul-red); color: var(--ps-seoul-red);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; padding: 2px 8px;
}
.ps-pw-note ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ps-pw-note li { font-size: 11.5px; line-height: 1.6; color: var(--ps-mute-700); }

/* 약관 동의 */
.ps-agree {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; cursor: pointer;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--ps-mute-700);
}
.ps-agree input { width: 14px; height: 14px; margin-top: 2px; accent-color: var(--ps-ink); flex: none; }
.ps-agree span { line-height: 1.35; }

/* 개인정보 수집·이용 동의 박스 (요약) */
.ps-agree-box { margin-top: 12px; border: 1px solid var(--ps-mute-200); background: var(--ps-mute-50); padding: 14px; }
.ps-agree-tit { margin: 0 0 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ps-ink); }
.ps-agree-sum { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.ps-agree-sum dt { font-size: 12px; font-weight: 700; color: var(--ps-mute-700); }
.ps-agree-sum dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ps-ink); }
.ps-agree-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ps-mute-500); }

/* 필수 동의 체크 리스트 (일반 문장 — uppercase 해제) */
.ps-agree-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ps-agree-list .ps-agree { text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 500; color: var(--ps-ink); }
.ps-agree-list .ps-agree b { font-weight: 800; color: var(--ps-ink); }
.ps-agree-list .ps-agree a { color: var(--ps-ink); text-underline-offset: 2px; white-space: nowrap; }

/* 로그인: 상태유지 + 찾기 링크 행 */
.ps-login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
/* '로그인 상태 유지' 체크박스를 없앤 뒤로 아이디·비밀번호 찾기 링크만 남는다 → 오른쪽 정렬 */
.ps-login-row.is-end { justify-content: flex-end; }
.ps-login-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--ps-mute-700); }
.ps-login-row label input { width: 14px; height: 14px; accent-color: var(--ps-ink); flex: none; }
.ps-login-row a { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--ps-mute-700); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.ps-login-row a:hover { color: var(--ps-ink); }
.ps-login-row a:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 2px; }

/* 제출 버튼 */
.ps-signup-submit {
  margin-top: 8px; width: 100%; border: 0; cursor: pointer;
  background: var(--ps-accent); color: var(--ps-ink);
  padding: 12px; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.16em;
  transition: background-color 140ms ease, color 140ms ease;
}
.ps-signup-submit:hover { background: var(--ps-ink); color: var(--ps-paper); }
.ps-signup-submit:disabled { opacity: .5; cursor: not-allowed; }
.ps-signup-submit:disabled:hover { background: var(--ps-accent); color: var(--ps-ink); }

/* 구분선 */
.ps-or { display: flex; align-items: center; gap: 12px; }
.ps-or .line { height: 1px; flex: 1; background: var(--ps-mute-300); }
.ps-or .txt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ps-mute-500); }

/* 소셜 */
.ps-social { display: flex; flex-direction: column; gap: 8px; }
.ps-social-btn {
  display: flex; align-items: center; width: 100%; border: 1px solid var(--ps-ink);
  background: transparent; cursor: pointer; transition: background-color 140ms ease;
}
.ps-social-btn:hover { background: var(--ps-mute-50); }
.ps-social-btn .ico { display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; border-right: 1px solid var(--ps-ink); font-size: 14px; font-weight: 900; }
.ps-social-btn .ico.kakao { background: #fee500; color: #191919; }
.ps-social-btn .ico.naver { background: #03c75a; color: #fff; }
.ps-social-btn .label { flex: 1; text-align: center; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ps-ink); }
.ps-social-btn .pad { width: 40px; }
.ps-social-note { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--ps-mute-500); }

/* 로그인 링크 */
.ps-signup-login { margin: 0; font-size: 14px; color: var(--ps-mute-700); }
.ps-signup-login a { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; color: var(--ps-ink); }
.ps-signup-login a:hover { color: var(--ps-mute-700); }

/* 간편인증 레이어 — 새 창 대신 이 화면 위에 띄운다 [2026-09-03].
   새 창은 브라우저 팝업 차단에 걸리면 아무 일도 안 일어난 것처럼 보이고,
   모바일에서는 탭이 따로 떠 흐름이 끊긴다.
   라온 인증창은 iframe 안에서 자기 화면을 그린다 — 같은 문서에 직접 붙이면
   라온이 함께 싣는 jQuery 3.3.1 이 포털 jQuery 와 부딪히므로 iframe 으로 가둔다. */
.ps-cert-ov {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45); align-items: center; justify-content: center; padding: 20px;
}
.ps-cert-ov.on { display: flex; }

/* 인증창만 띄운다 — 우리 머리말·닫기 버튼을 덧대지 않는다.
   라온 인증창이 자기 제목과 닫기 버튼을 이미 그리므로 겹쳐 보인다.
   닫기는 라온 쪽 버튼(→ window.psOacxClose)과 바깥 클릭으로 한다. */
.ps-cert-frame {
  width: 412px; max-width: 100%; height: 730px; max-height: 92vh;
  border: 0; display: block; background: var(--ps-paper);
}

/* 좁은 화면에서는 화면을 꽉 채운다 — 412px 고정이면 잘려 보인다 */
@media (max-width: 480px) {
  .ps-cert-ov { padding: 0; }
  .ps-cert-frame { width: 100%; height: 100%; max-height: none; }
}

/* =============================================================
   휴면 계정 안내 — 로그인 화면에서 비밀번호가 맞았을 때만 나온다.
   경고가 아니라 "되살리면 됩니다" 라는 안내라서 붉은색을 쓰지 않는다.
   ============================================================= */
.ps-dormant {
  margin-top: 14px; padding: 16px 18px;
  border: 1px solid var(--ps-mute-400); background: var(--ps-mute-50);
}
.ps-dormant[hidden] { display: none; }
.ps-dormant .t {
  margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--ps-ink);
}
.ps-dormant .d {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--ps-mute-700);
}
.ps-dormant .acts { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ps-dormant .acts button {
  width: 100%; border: 1px solid var(--ps-ink); cursor: pointer;
  padding: 11px; font: inherit; font-size: 13.5px; font-weight: 700;
  background: var(--ps-ink); color: var(--ps-paper);
  transition: background-color 140ms ease, color 140ms ease;
}
.ps-dormant .acts button:hover { background: var(--ps-paper); color: var(--ps-ink); }
/* 보조 경로(메일) — 비밀번호를 잊은 사람만 쓴다 */
.ps-dormant .acts button.sub {
  background: transparent; color: var(--ps-ink); border-color: var(--ps-mute-400); font-weight: 600;
}
.ps-dormant .acts button.sub:hover { background: var(--ps-mute-100); color: var(--ps-ink); }
.ps-dormant .acts button[disabled] { opacity: .5; cursor: default; }