/* ============================================================
   preregistration-apply.css
   - pages/preregistration-apply.html (사전등록 작성 페이지) 전용 스타일
   - base.css / subpage.css / preregistration.css 위에 '추가'로 덮어쓰기

   초보자 가이드
   1) 레이아웃/간격/글꼴 톤은 기존 페이지와 통일
   2) 입력 폼은 'formGrid(2열)' -> 모바일에서 1열로 자동 변경
   3) 버튼/모달은 사이트 공통 색(블루 계열) 톤을 유지
============================================================ */

/* 필수 표시(빨간 *) */
.req{
  color:#d62d20;
  font-weight:700;
}

/* 상단 안내문 */
.formHint{
  display:flex;
  align-items:center;
  gap:8px;
  margin: 8px 0 18px;
  color:#556173;
  font-size:14px;
}
.formHint__dot{
  color:#2a6fe8;
  font-weight:900;
}

/* =========================
   폼 기본 블록/타이틀
========================= */
.regForm{
  display:block;
}

.regBlock{
  margin-top:20px;
  padding-top:18px;
  /*
    수정사항(요청 1)
    - "표시된 항목(*)은 필수" 안내문 아래에 얇은 선이 보였는데,
      첫 번째 regBlock(기본 정보) 시작 부분의 border-top 때문에 생기는 구분선이었습니다.
    - 레퍼런스 화면에서는 해당 선이 없어서, 구역 구분선(border-top)을 제거했습니다.
      (구역 구분은 하늘색 타이틀 박스로 충분합니다.)
  */
  border-top:0;
}

.regBlock__title{
  /*
    요청사항(1,6): 섹션 제목 뒤 '하늘색 배경' 처리
    - 디자인 레퍼런스(사용자 스크린샷)처럼 제목 라인을 박스 형태로 보여줍니다.
    - 아래 값(색/여백)은 필요하면 자유롭게 조정 가능합니다.
  */
  margin:0 0 14px;
  padding: 12px 14px;
  font-size:16px;
  font-weight:800;
  color:#0b1220;
  background:#eaf3ff;
  border:1px solid rgba(42,111,232,.18);
  border-radius:12px;
  /*
    수정사항(요청 2)
    - 타이틀 왼쪽에 보이던 '작은 색깔(세로 바)'는 inset box-shadow로 만든 강조선입니다.
    - 사용자가 원한 형태는 "작은 바 없이" 타이틀 박스 색상만 깔끔하게 보이는 형태라
      해당 강조선을 제거했습니다.
  */
  box-shadow:none;
}

/* =========================
   그리드(2열 -> 모바일 1열)
========================= */
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 16px;
}

.field{
  min-width:0;
}

/* 전체 폭(2열 모두 차지) */
.field--wide{
  grid-column: 1 / -1;
}

.label{
  display:block;
  margin:0 0 8px;
  font-size:13px;
  font-weight:700;
  color:#253047;
}

.input,
.select,
.textarea{
  width:100%;
  border:1px solid rgba(17,32,59,.16);
  border-radius:10px;
  padding: 12px 12px;
  font-size:14px;
  background:#fff;
  outline:none;
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:#2a6fe8;
  box-shadow: 0 0 0 4px rgba(42,111,232,.12);
}

.textarea{
  resize: vertical;
  min-height: 100px;
}

/* input + 버튼을 한 줄에 배치 */
.inputRow{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.btnSub{
  flex:0 0 auto;
  padding: 0 14px;
  border-radius:10px;
  border:1px solid rgba(17,32,59,.18);
  background:#f3f6fb;
  font-weight:700;
  color:#1b2b4a;
  cursor:pointer;
}
.btnSub:hover{
  filter:brightness(.98);
}

.help{
  margin-top:7px;
  color:#6b778b;
  font-size:12px;
}

/* 아이콘 버튼(비번 보기/모달 닫기 등) */
.iconBtn{
  width:44px;
  border-radius:10px;
  border:1px solid rgba(17,32,59,.18);
  background:#fff;
  cursor:pointer;
}

/*
  수정사항(요청 3)
  - 기존엔 원/점으로 눈을 표현했는데(동그라미 2개처럼 보임),
    레퍼런스처럼 "눈(eye)" 아이콘으로 교체했습니다.
  - 실제 아이콘은 HTML 안의 inline SVG(.iconEyeSvg)로 들어갑니다.
*/
.iconEyeSvg{
  display:block;
  width:20px;
  height:20px;
  margin:0 auto;
  fill:none;
  stroke:rgba(17,32,59,.55);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 비밀번호가 "보이는 상태"일 때(토글 버튼에 .is-on 추가) 가로줄을 표시 */
.pwToggle.is-on .iconEyeSlash{
  opacity:0;
}
.pwToggle:not(.is-on) .iconEyeSlash{
  opacity:1;
}

.iconClose{
  display:block;
  width:18px;
  height:18px;
  margin:0 auto;
  position:relative;
}
.iconClose::before,
.iconClose::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  background:rgba(17,32,59,.55);
  transform-origin:center;
}
.iconClose::before{ transform:translate(-50%,-50%) rotate(45deg); }
.iconClose::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* =========================
   개인정보 동의 영역
========================= */
.consentRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border:1px solid rgba(17,32,59,.10);
  background:#f8fafc;
  border-radius:12px;
}

.check{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:700;
  color:#1b2b4a;
}

.linkBtn{
  background:transparent;
  border:0;
  color:#2a6fe8;
  font-weight:800;
  cursor:pointer;
  padding: 6px 8px;
}
.linkBtn:hover{ text-decoration:underline; }

/* =========================
   제출 버튼
========================= */
.submitRow{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

/* base.css에 btnPrimary가 있지만, 이 페이지에서 폭/크기를 보강 */
.submitRow .btnPrimary{
  min-width: 180px;
}

/* =========================
   모달(dialog)
========================= */
.modal{
  border:0;
  padding:0;
  background:transparent;
}

.modal::backdrop{
  background: rgba(10, 18, 35, .45);
}

.modal__card{
  width:min(520px, calc(100vw - 36px));
  background:#fff;
  border-radius:16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow:hidden;
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom:1px solid rgba(17,32,59,.08);
}

.modal__title{
  font-weight:900;
  color:#0b1220;
}

.modal__body{
  padding: 14px 16px;
  color:#2c3750;
  font-size:14px;
}

.modal__p{ margin:0 0 10px; }

.modal__list{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap:8px;
}

.modal__note{
  margin-top:12px;
  padding: 10px 12px;
  border-radius:12px;
  background:#f3f6fb;
  color:#556173;
  font-size:12px;
}

.modal__foot{
  padding: 14px 16px 16px;
  display:flex;
  justify-content:center;
}

/* =========================
   반응형
========================= */
@media (max-width: 720px){
  .formGrid{ grid-template-columns: 1fr; }
  .field--wide{ grid-column: auto; }
  .consentRow{ flex-direction:column; align-items:flex-start; }
  .inputRow{ flex-direction:column; }
  .iconBtn{ width:100%; height:44px; }
}