/* ============================================================
   themes/dodon/style/member.css
   회원가입 폼 (개인 / 기관 / 기업 공용)

   로드: member_controller::register() 의 additionalCss

   전제
     _base.css   전역 + .btn + .container
     auth.css    .auth-page / .auth-narrow / .auth-title
                 .login-panel / .field / .login-submit / .auth-foot
                 → header.php 가 비로그인일 때 상시 로드하므로 여기선 안 겹치게 쓴다

   🔥 .field 를 auth.css 에서 재사용하되 구조가 다르다.
      로그인 : <label class="field"><span>아이디</span><input></label>
      가입   : <div class="field"><label>아이디</label><input></div>
      항목이 많아 라벨+입력+버튼+메시지가 한 묶음이라 label 로 감쌀 수 없다.
      (감싸면 [중복확인] 버튼을 눌러도 입력칸에 포커스가 간다)
      그래서 .register-form 안에서만 label 규칙을 다시 잡는다.
   ============================================================ */


/* ============================================================
   1. 폼 전체
   ============================================================ */

.register-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* auth.css 의 .field 는 로그인용(gap:8px).
   가입은 아래에 메시지가 붙으므로 간격을 다시 잡는다. */
.register-form .field{
  gap:6px;
}

.register-form .field label{
  font-weight:800;
  color:#334155;
  font-size:14px;
}

/* 필수 표시 (*)
   🔥 label 이 font-weight:800 + color:#334155 라 상속으로 눌리는 걸 막는다.
      inline-block 은 별표만 살짝 키워도 줄 높이가 안 흔들리게. */
.register-form .field label .req{
  color:#E11D48;
  font-weight:900;
}



/* ============================================================
   3. 메시지
   member_register.js 가 .msg-ok / .msg-err 를 붙인다.

   🔥 원래 JS 가 Tailwind 클래스를 직접 지정했다.
      dodon 엔 Tailwind 가 없어서 색이 안 먹어 중립 클래스로 바꿨고,
      각 몰이 자기 CSS 에서 색을 정한다.
   ============================================================ */

.msg-ok  { color:#16a34a; }
.msg-err { color:#ef4444; }


/* ============================================================
   4. 이메일 인증코드
   발송 성공하면 JS 가 .hidden 을 벗긴다
   ============================================================ */

.code-box{
  margin-top:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#F8FAFC;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* 남은 시간. 입력칸과 버튼 사이에 낀다 */
.code-timer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:0 10px;
  color:#B42318;
  font-weight:900;
  font-size:14px;
  font-variant-numeric:tabular-nums;   /* 숫자 폭 고정 — 09:59→09:58 때 안 흔들림 */
}


/* ============================================================
   5. 등록증 첨부 (기관 / 기업)
   개인 폼엔 없지만 같은 파일을 쓰므로 미리 둔다
   ============================================================ */

.file-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.file-name{
  color:#64748B;
  font-weight:700;
  font-size:14px;
  word-break:break-all;
}

.file-hint{
  margin:0;
  color:#94A3B8;
  font-weight:700;
  font-size:12px;
}

/* 라벨 옆 부가 설명 (jpg, png, pdf · 5MB 이하) */
.label-note{
  color:#94A3B8;
  font-weight:700;
  font-size:12px;
}


/* ============================================================
   6. 구역 나누기 (기관 / 기업 — 계정정보 / 담당자 / 연락처 …)
   ============================================================ */

.form-section{
  margin-top:10px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--accent2);
  font-weight:900;
  font-size:14px;
}

/* 첫 구역은 위에 선이 없다 */
.register-form > .form-section:first-of-type{
  margin-top:0;
  padding-top:0;
  border-top:0;
}


/* ============================================================
   7. 약관 동의
   ============================================================ */

.agree-box{
  margin-top:6px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* .check 는 auth.css 것(체크박스+라벨).
   여기선 [보기] 링크를 오른쪽 끝으로 밀어야 해서 폭을 채운다. */
.agree-box .check{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  font-size:14px;
}

.agree-box .check > span{
  flex:1;
}

.req-tag{
  color:#ef4444;
  font-weight:900;
}

.agree-box .check a{
  flex:0 0 auto;
  color:#94A3B8;
  font-weight:700;
  font-size:13px;
  text-decoration:underline;
}

.agree-box .check a:hover{
  color:var(--ink);
}


/* ============================================================
   8. 모바일
   ============================================================ */

@media (max-width: 640px){
  .register-form{ gap:16px; }

  .btn-sub{
    height:48px;
    padding:0 12px;
    font-size:13px;
  }

  /* 인증코드 줄이 좁아지면 타이머를 아래로 */
  .code-box .input-btn{
    flex-wrap:wrap;
  }
  .code-box .input-btn input{
    flex:1 1 100%;
  }
}


/* ============================================================
   9. 회원 유형 선택 (register.php)
   ============================================================ */

.type-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  max-width:900px;
  margin:0 auto;
}

.type-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:34px 22px 28px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 32px rgba(15,23,42,.05);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.type-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 20px 36px rgba(15,23,42,.09);
}

.type-icon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--soft);
  color:var(--accent2);
  margin-bottom:18px;
}

.type-icon svg{
  width:30px;
  height:30px;
}

.type-card strong{
  font-size:19px;
  letter-spacing:-0.4px;
}

.type-card p{
  margin:12px 0 0;
  color:#64748B;
  font-weight:700;
  font-size:13px;
  line-height:1.6;
}

/* 미리 준비할 것 (등록증 등). 개인엔 없어서 카드 높이가 달라지는데
   grid 라 자동으로 맞춰진다 */
.type-note{
  margin-top:16px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--soft);
  color:var(--accent2);
  font-weight:800;
  font-size:12px;
}

@media (max-width: 780px){
  .type-grid{
    grid-template-columns:1fr;
    max-width:420px;
  }
  .type-card{
    flex-direction:row;
    align-items:center;
    text-align:left;
    padding:20px;
    gap:16px;
  }
  .type-icon{
    flex:0 0 52px;
    width:52px;
    height:52px;
    margin-bottom:0;
  }
  .type-card p{ margin-top:6px; }
  .type-note{ margin-top:10px; display:inline-block; }
}

/* ============================================================
   가입폼 가로 배치
   - .register-form 안에서만 동작 → 로그인 폼(.login-panel 단독)은 영향 없음
   - 라벨 왼쪽 고정폭 + 입력칸 오른쪽. 세로 길이가 절반으로 줄어든다
   - 모바일은 원래대로 2줄 (좁은 폭에서 가로는 못 씀)
   ============================================================ */

/* 가입폼일 때만 패널 폭을 넓힌다. 로그인은 .auth-narrow 기본값 유지 */
.auth-narrow:has(.register-form) { max-width: 760px; }

@media (min-width: 768px) {

  /* 라벨 | 입력 2열. 라벨폭 130px 은 "비밀번호 확인" 이 안 깨지는 최소치 */
  .register-form .field {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 6px;
  }

  /* 라벨은 오른쪽 정렬 — 입력칸 왼쪽선과 라벨 끝이 붙어 읽기 쉬움 */
  .register-form .field > label {
    margin: 0;
    text-align: right;
    white-space: nowrap;
  }
  /* .cols도 라벨 열을 비워야 하니 CSS에 한 줄 추가: */
  .register-form .field.row2in > .cols { grid-column: 2; }
  /* 메시지·보조 입력칸은 라벨 열을 비우고 입력 열에만 놓는다
     (안 하면 메시지가 라벨 자리까지 퍼져서 줄이 어긋남) */
  .register-form .field > .form-msg,
  .register-form .field > .field-help,
  .register-form .field > .code-box,
  .register-form .field > .file-box,
  .register-form .field > input[name="addr1"],
  .register-form .field > input[name="addr2"] {
    grid-column: 2;
  }

  /* 전화/팩스 같은 다칸 묶음 — 내부를 다시 가로로 */
  .register-form .field.row2 {
    grid-template-columns: 130px 1fr;
  }
  .register-form .field.row2 > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* 구역 제목은 2열을 가로지른다 */
  .register-form .sec-title {
    grid-column: 1 / -1;
  }
  
  
}

/* ── 구역 제목 ── */
.register-form .sec-title {
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, #E3E4DE);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent2);
}
.register-form .sec-title:first-of-type { margin-top: 0; }

/* '선택' 꼬리표 — 필수(.req) 와 반대 의미라 눈에 안 띄게 */
.register-form .opt {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 400;
  color: #8A9299;
}

/* ── 첨부파일 ── */
.register-form .file-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.register-form .file-name {
  font-size: 13px;
  color: #6B7378;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.register-form .field-help {
  margin: 6px 0 0;
  font-size: 12px;
  color: #8A9299;
}

/* ── 한 줄에 입력칸 2개 (대표전화 + 내선메모) ──
   전화번호가 짧아서 한 칸을 통째로 쓰면 여백만 남는다 */
.register-form .field.row2in > .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 767px) {
  .register-form .field.row2in > .cols { grid-template-columns: 1fr; }
}

/* 현재 이메일 */
.modal-current {
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--header-bg);
  text-align: center;
}
.modal-current .k { font-size: 12px; font-weight: 700; color: #98A0A4; }
.modal-current .v { margin-left: 8px; font-size: 14px; font-weight: 700; }

/* 모달 안 입력칸 — 본문과 같은 규격 */
.modal-body .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.modal-body .btn-sub { height: 48px; }


/* ── 비밀번호 변경 안내 ── */
.pw-guide {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-soft);
  background: var(--header-bg);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--muted);
}
@media (min-width: 768px) {
  /* .register-form 그리드 밖 요소라 입력 열에 맞춰 들여쓴다 */
  .mypage-body .pw-guide { margin-left: 144px; }
}