/* ============================================
   form.css — 폼 공통 (전 페이지 상시 로드)
   로그인·가입·마이페이지·주문서가 같이 쓴다.
   🔥 페이지별 폼 CSS(auth.css, mypage.css 등)는
      "배치·간격"만 만지고, 입력칸·버튼 생김새는 여기서만.
   ============================================ */

/* ── 필드 1묶음 ── */
.field {
  margin-bottom: 18px;
}
.field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.field .req { color: #d9534f; }

/* ── 입력칸 ──
   버튼과 높이를 맞추기 위해 height 를 명시(40px 기준) */
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  height: 42px;              /* 🔥 전 몰·전 페이지 유일 기준. 로그인도 이 값 */
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #d5d9de;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}
.field textarea { height: auto; padding: 10px 12px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* 잠긴 필드 (readonly) */
.field input.is-locked {
  background: #f3f4f6;
  color: #888;
}

/* ── 입력칸 + 버튼 한 줄 ── */
.input-btn {
  display: flex;
  gap: 8px;
  align-items: center;
}
.input-btn input { flex: 1; }

/* ── 보조 버튼 (.btn-sub) ──
   🔥 a 와 button 이 똑같이 보이는 게 목적.
      appearance:none = 브라우저 기본 버튼 스타일 제거
      inline-flex + 명시 높이 = 태그가 뭐든 같은 크기 */
.btn-sub {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;                 /* a 태그의 상속 line-height 차단 */
  color: #444;
  background: #fff;
  border: 1px solid #c9ced4;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;          /* a 태그 밑줄 제거 */
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-sub:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-sub:disabled {
  opacity: .5;
  cursor: default;
}

/* 강조 보조 버튼 (변경 신청 등) */
.btn-sub.is-strong {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.btn-sub.is-strong:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}

/* ── 고정 텍스트 표시 (아이디 등 입력칸 아닌 값) ── */
.field-static {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;               /* 버튼과 시각적 높이 맞춤 */
  margin: 0;
  font-size: 14px;
}
.field-note {
  font-size: 12px;
  color: #999;
}

/* ── 도움말 / 결과 메시지 ── */
.field-help {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #888;
}
.form-msg {
  margin: 6px 0 0;
  font-size: 13px;
}
.form-msg.text-green-600 { color: #16a34a; }
.form-msg.text-red-500   { color: #ef4444; }

/* ── 파일 선택 줄 ── */
.file-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.file-name {
  font-size: 13px;
  color: #777;
}

/* ── .input-btn 보강 — member.css 에서 이관 ── */
.input-btn input {
  flex: 1;
  min-width: 0;              /* 없으면 flex 아이템이 안 줄어 버튼이 밀림 */
}

/* ── 메시지 색 — JS(member_register.js 등)가 붙이는 중립 클래스 ── */
.msg-ok  { color: #16a34a; }
.msg-err { color: #ef4444; }

/* ── Tailwind .hidden 대체 — JS 가 토글. _base.css 에도 있으면 거기 것만 남기고 여기선 삭제 ── */
.hidden { display: none !important; }

/* ── 등록증 한 줄 구성 (마이페이지) ──
   [보기][신청중 보기] ... [파일선택] 을 한 줄에. 좁으면 자동 줄바꿈 */
.license-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.license-row .file-box { margin-left: auto; }  /* 파일선택은 오른쪽 끝으로 */
.license-row .form-msg { margin: 0; }          /* "서류 없음" 문구 세로정렬 맞춤 */
.btn-sub .req-date { font-size: 12px; opacity: .7; }


/* ============================================================
   이메일 변경 모달
   🔥 JS(mypage_edit.js)가 .hidden 을 벗기고 .flex 를 붙인다.
     dodon 엔 .flex 가 없어서 여기서 받아준다. JS 수정 없이 동작시키는 방법.
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* JS 가 붙이는 클래스 — 이게 없으면 hidden 을 벗겨도 안 보인다 */
.modal.flex { display: flex; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31,43,58,.5);
}

.modal-card {
  position: relative;          /* backdrop 위로 */
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(15,23,42,.22);
}

.modal-head {
  position: relative;
  padding: 18px 20px;
  background: var(--accent2);
  color: #fff;
  text-align: center;
}
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 800; }

.modal-x {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: rgba(255,255,255,.7);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover { color: #fff; }

.modal-body { padding: 22px 20px; }

.modal-desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.modal-desc span { font-size: 12px; color: #98A0A4; }