@charset "UTF-8";
/* ============================================================
   themes/erp/style/member.css
   회원 — 유형 선택 · 가입 폼 (개인/기업/도서관 공용)
   ------------------------------------------------------------
   로드: additionalCss 에 'member.css'
   짝  : member_register.js (dox3 공용 — id/클래스 맞춰서 재사용)
   의존: base.css (토큰)

   ※ .text-green-600 / .text-red-500 은 Tailwind 클래스명이 아니라
     dox3 공용 JS(member_register.js)가 메시지에 붙이는 이름.
     JS 를 안 고치려고 같은 이름으로 여기서 정의한다.
   ============================================================ */


/* ============================================================
   1. 유형 선택
   ============================================================ */
.reg-pick{
  max-width:880px;
  margin-inline:auto;
  padding-block:36px 72px;
}

.reg-types{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  margin-bottom:26px;
}

.reg-type{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:30px 24px 26px;
  background:var(--surface);
  text-align:left;
  transition:background .18s ease;
}
.reg-type:hover{ background:#fff; }
/* 위쪽 색띠 — 카드/책등과 같은 문법. 유형마다 다른 분류색 */
.reg-type::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:5px;
  background:var(--band);
}
.reg-type.t-library{ --band:#4A7BA8; }
.reg-type.t-company{ --band:#7A8E5D; }
.reg-type.t-personal{ --band:#A06D4E; }

.reg-type h3{
  margin:6px 0 8px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:19px;
  letter-spacing:-.02em;
}
.reg-type p{
  margin:0 0 18px;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-soft);
}
/* 승인 안내 딱지 */
.reg-type .tag{
  align-self:flex-start;
  margin-top:auto;
  padding:3px 9px;
  border:1px solid var(--line);
  border-radius:1px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ink-faint);
}
.reg-type .tag.now{
  border-color:var(--band);
  color:var(--band-dk, var(--band));
}

.reg-login-hint{
  text-align:center;
  font-size:13.5px;
  color:var(--ink-soft);
}
.reg-login-hint a{
  color:var(--ink);
  font-weight:500;
  text-decoration:underline;
}


/* ============================================================
   2. 가입 폼
   ============================================================ */
.reg-form{
  max-width:640px;
  margin-inline:auto;
  padding-block:36px 72px;
}

.reg-box{
  background:var(--surface);
  border:1px solid var(--line);
  padding:34px 32px;
}

/* 구역 제목 (계정 정보 / 담당자 정보 …) */
.reg-sec{
  margin:34px 0 18px;
  padding-top:26px;
  border-top:1px solid var(--line-soft);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.reg-sec:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

/* 필드 */
.f{ margin-bottom:16px; }
.f label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  color:var(--ink-soft);
}
.f label .req{ color:var(--warn); font-weight:500; }
.f label small{
  font-weight:400;
  font-size:11.5px;
  color:var(--ink-faint);
  margin-left:4px;
}

.f input[type=text],
.f input[type=password],
.f input[type=email],
.f input[type=tel]{
  width:100%;
  padding:11px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  font-size:14px;
}
.f input:focus{
  outline:none;
  border-color:var(--ink);
}
.f input:disabled{
  background:var(--surface-2);
  color:var(--ink-faint);
}

/* 입력 + 버튼 한 줄 (중복확인·인증 등) */
.f .row{
  display:flex;
  gap:8px;
}
.f .row input{ flex:1; min-width:0; }
.f .row button{
  flex-shrink:0;
  padding:0 16px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
}
.f .row button:hover{
  border-color:var(--ink);
  color:var(--ink);
}
.f .row button:disabled{
  background:var(--surface-2);
  border-color:var(--line-soft);
  color:var(--ink-faint);
  cursor:not-allowed;
}

/* 주소 3칸 세로 간격 */
.f input + input{ margin-top:8px; }

/* 인증번호 칸의 남은시간 */
.code-wrap{ position:relative; flex:1; }
.code-wrap input{ width:100%; padding-right:58px; }
.code-wrap .timer{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--f-mono);
  font-size:12.5px;
  color:var(--warn);
}

/* ── JS 메시지 (dox3 공용 JS 가 붙이는 클래스명 그대로) ── */
.text-green-600,
.text-red-500{
  font-size:12px;
  margin-top:6px;
  line-height:1.5;
}
.text-green-600{ color:#2F8F7B; }   /* 성공 — 정리용품 초록 계열 */
.text-red-500{ color:var(--warn); } /* 실패 — 경고색 */
.hidden{ display:none; }

/* 파일 업로드 줄 */
.file-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.file-row .fname{
  font-size:13px;
  color:var(--ink-faint);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.f .hint{
  margin-top:7px;
  font-size:12px;
  line-height:1.7;
  color:var(--ink-faint);
}

/* ── 약관 ── */
.agree{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.agree label{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 0;
  font-size:13.5px;
  cursor:pointer;
}
.agree input{
  width:17px; height:17px;
  accent-color:var(--accent);
}
.agree .must{ color:var(--warn); font-weight:500; }
.agree a{
  margin-left:auto;
  font-size:12px;
  color:var(--ink-faint);
  text-decoration:underline;
}
.agree a:hover{ color:var(--ink); }

/* 승인 안내 박스 */
.approve-note{
  margin:20px 0;
  padding:13px 15px;
  background:var(--band-lt);
  border-left:3px solid var(--band);
  font-size:13px;
  line-height:1.7;
  color:var(--ink-soft);
}

/* 제출 */
.reg-submit{
  width:100%;
  margin-top:6px;
  padding:15px;
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:var(--r);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
}
.reg-submit:hover{ background:var(--accent-hi); }


/* ============================================================
   3. 반응형
   ============================================================ */
@media (max-width:820px){
  .reg-types{ grid-template-columns:1fr; }
  .reg-type{ padding:22px 20px 20px; }
}
@media (max-width:640px){
  .reg-box{ padding:24px 18px; }
  .reg-form,
  .reg-pick{ padding-block:22px 48px; }
}