/* =========================================================
   preregistration-check.css
   - '사전등록 확인' 페이지 전용 스타일
   - 중요: header/subHero/breadcrumb 같은 공통 UI는 건드리지 않습니다.
     (base.css, subpage.css 가 담당)
   - 입력폼/버튼 톤은 preregistration-apply.css 를 그대로 재사용합니다.
   ========================================================= */

/* 카드(폼) 폭을 적당히 줄여서 이미지처럼 가운데에 "로그인 박스" 형태로 보이게 */
.checkWrap{
  padding: 8px 0 2px;
}
.checkTitle{
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 900;
  color:#103d74;
  text-align:center;
}
.field + .field{
  margin-top: 14px;
}

.checkCard {
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(17,32,59,.10);
  box-shadow: 0 18px 42px rgba(9,18,37,.08); /* ✅ (수정) Registration Check 카드가 덜 투박하고 더 정돈되어 보이도록 카드 자체 스타일을 부드럽게 다듬었습니다. */
}

/* =========================================================
   ✅ (수정사항 2) 비밀번호 "눈" 아이콘이 잘리던 문제 해결

   원인)
   - preregistration-check.html은 .pwRow / .pwBtn 클래스를 사용하지만,
     해당 클래스에 대한 CSS가 없어(기본 버튼 스타일로 렌더링)
     아이콘 버튼이 입력창 높이/정렬과 맞지 않으며 일부 환경에서 잘려 보였습니다.

   해결)
   - 사전등록(작성) 페이지와 동일한 UX로 보이도록
     비밀번호 입력 + 아이콘 버튼을 한 줄로 정렬하고,
     버튼 크기/정렬/아이콘 on/off(슬래시) 표시를 명확히 지정합니다.
========================================================= */

/* 비밀번호 입력 + 아이콘 버튼을 같은 줄에 배치 */
.pwRow{
  display:flex;
  gap:10px;
  /* ✅ (초보자용 설명)
     - input 과 버튼을 "한 줄"에 정확히 맞추려면
       세로 정렬을 center로 두는 편이 안전합니다.
     - stretch는 브라우저/폰트에 따라 버튼 내부 SVG가
       위/아래로 살짝 잘려 보이는 경우가 있어 center로 변경했습니다.
  */
  align-items:center;
}

/* ✅ flex 환경에서 input이 옆 버튼 때문에 찌그러지지 않게 */
/* ✅ (핵심) flex 환경에서 input이 옆 버튼 때문에 "밀려서" 잘리지 않게
   - 공통 스타일(preregistration-apply.css)에서 .input{width:100%}가 적용되어
     flex-row 안에서도 input이 100% 폭을 고집 → 눈 버튼이 밖으로 밀릴 수 있습니다.
   - 그래서 여기서 width를 auto로 덮어써서(우선순위 확보)
     input은 남은 공간만 차지하도록 만들었습니다.
*/
.pwRow .input{
  flex: 1 1 0;
  min-width: 0;
  width: auto !important; /* ✅ "100%"를 확실히 무력화 */
}

/* "눈" 버튼(아이콘 버튼) */
.pwBtn{
  flex: 0 0 44px;              /* ✅ 입력창 옆에서 일정한 너비 유지 */
  height:44px;                 /* ✅ 입력창(기본 padding 기준)과 높이 맞춤 */
  border-radius:10px;
  border:1px solid rgba(17,32,59,.18);
  background:#fff;
  color: rgba(9,18,37,.82);    /* ✅ 아이콘 색감(너무 검거나 이상해 보이지 않게) */
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;               /* ✅ SVG가 위/아래로 잘리지 않게 */

  /* ✅ (중요) 아이콘이 "옆으로 두 개" 나란히 렌더링되면
     버튼 안에서 공간이 부족해 잘려 보일 수 있습니다.
     그래서 버튼을 relative로 두고 SVG들을 중앙에 "겹쳐" 배치합니다.
  */
  position:relative;
  overflow: visible;
}

/* 살짝 hover 톤만 주고 과한 색 변경은 방지 */
.pwBtn:hover{ background:#f6f7f9; }

/* ✅ 아이콘은 버튼 중앙에 겹쳐서 배치(잘림 방지) */
.pwBtn svg{
  position:absolute;
  inset:0;
  margin:auto;
  pointer-events:none;
}

/* 기본 상태: 슬래시 보이게(비밀번호 숨김 상태를 직관적으로) */
.pwBtn .icoSlash{ opacity:.85; }

/* JS에서 .is-on이 붙으면 "비밀번호 표시(text)" 상태 → 슬래시 숨김 */
.pwBtn.is-on .icoSlash{ opacity:0; }

/* 버튼은 카드 폭에 맞춰 꽉 차게 */
.checkCard .btnPrimary {
  width: 100%;
  margin-top: 14px; /* ✅ (수정) 패스워드 입력창과 확인하기 버튼 사이 간격을 넓혔습니다. */
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #123d72 0%, #1f5fa8 100%);
  color:#fff;
  font-weight:800;
  box-shadow: 0 10px 22px rgba(18,61,114,.18);
}

/* 오류 메시지(이미지처럼 빨간 배경 박스) */
.errorBox {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(220, 53, 69, .25);
  background: rgba(220, 53, 69, .08);
  color: #d6243d;
  font-size: 13px;
}

/* 데모 안내 문구(작게) */
.checkHint {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(11, 18, 32, .55);
}

.checkForm .input{
  min-height:48px;
  border-radius:12px;
}
.formHint{
  justify-content:center;
  margin-bottom:18px;
}
.errorBox{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
}
.checkResult{
  margin-top:20px;
  padding-top:18px;
  border-top:1px dashed rgba(9,18,37,.12);
}

.checkCard .btnPrimary:hover{ filter:brightness(1.03); }
.checkCard .btnPrimary:active{ transform:translateY(1px); }
.checkHint{ margin-top: 14px; }