@charset "utf-8";
/* 공급사 등록신청 (gm/supplier.php) — 2026-08-17
 *
 * 포인트 컬러는 반드시 var(--point) / var(--point-dark) 로만 쓴다.
 * 이 파일은 팔레트(_palette/) 빌드 대상이 아니라, 색값을 직접 적으면
 * switch.sh 로 테마 색을 바꿔도 이 화면만 안 따라온다 (website.md 13·14항).
 */

#gm_supplier { padding-bottom: 60px; }

/* 섹션 */
#gm_supplier .sp-sec {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 22px 24px 26px;
  margin-bottom: 18px;
}
#gm_supplier .sp-h {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; margin: 0 0 6px;
}
#gm_supplier .sp-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--point); color: #fff; font-size: 14px; font-weight: 800;
}
#gm_supplier .sp-sub {
  font-size: 15px; font-weight: 800; margin: 26px 0 4px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
#gm_supplier .sp-guide { color: var(--txt-sub); font-size: 13.5px; line-height: 1.7; margin: 0 0 14px; }

/* 계약 내용 */
#gm_supplier .sp-contract {
  height: 340px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fbfbfb; padding: 18px 20px;
  font-size: 14px; line-height: 1.85; color: var(--txt);
  white-space: pre-wrap; word-break: break-word;
}
#gm_supplier .sp-contract:focus { outline: 2px solid var(--point); outline-offset: 2px; }

#gm_supplier .sp-agree {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 8px; padding: 14px 16px;
  border: 1.5px solid var(--point); border-radius: 10px;
  background: #fffdf3; cursor: pointer; font-size: 15px; line-height: 1.6;
}
#gm_supplier .sp-agree input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--point-dark); cursor: pointer; }
#gm_supplier .sp-agree-note { font-size: 12.5px; color: var(--txt-sub); line-height: 1.7; margin: 0; }

/* 입력칸 — 동의 전에는 잠겨 있다 */
#gm_supplier .sp-fields { border: 0; padding: 0; margin: 0; min-width: 0; position: relative; }
#gm_supplier .sp-fields[disabled] { opacity: .45; }
#gm_supplier .sp-lock {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.55); border-radius: 10px;
  font-size: 15px; font-weight: 700; color: var(--txt-sub); text-align: center; padding: 20px;
}

#gm_supplier .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
#gm_supplier .sp-f-wide { grid-column: 1 / -1; }
#gm_supplier .sp-f label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 6px; }
#gm_supplier .sp-f label i {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--point-dark);
  background: #fff6d8; border-radius: 4px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px;
}
#gm_supplier .sp-f input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 16px;   /* 16px 미만이면 iOS 가 초점을 잡을 때 화면을 확대한다 (website.md 15항) */
  font-family: inherit; color: var(--txt); background: #fff; box-sizing: border-box;
}
#gm_supplier .sp-f input:focus { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px rgba(201,178,55,.18); }

#gm_supplier .sp-file input[type=file] {
  width: 100%; padding: 12px; font-size: 14px;
  border: 1px dashed var(--line); border-radius: 8px; background: #fbfbfb; box-sizing: border-box;
}

/* 버튼 */
#gm_supplier .sp-submit { display: flex; gap: 10px; justify-content: center; margin-top: 24px; }
#gm_supplier .sp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 34px; border-radius: 10px;
  font-size: 16px; font-weight: 800; font-family: inherit; cursor: pointer; border: 1px solid transparent;
}
#gm_supplier .sp-btn-main { background: var(--point); color: #fff; }
#gm_supplier .sp-btn-main:hover:not(:disabled) { background: var(--point-dark); }
#gm_supplier .sp-btn-main:disabled { background: #d9d9d9; color: #fff; cursor: not-allowed; }
#gm_supplier .sp-btn-line { background: #fff; border-color: var(--line); color: var(--txt); }
#gm_supplier .sp-btn-line:hover { border-color: var(--point); color: var(--point-dark); }

#gm_supplier .sp-closed {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 40px 20px; text-align: center; color: var(--txt-sub); font-size: 15px;
}

/* 등록 전 재확인 창
   높이를 100vh 로 재지 않는다 — 모바일 100vh 는 주소창을 포함해 실제 보이는 영역보다 크다 (website.md 15항) */
#gm_supplier .sp-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(20,20,20,.55); padding: 20px;
}
#gm_supplier .sp-modal.on { display: flex; }
#gm_supplier .sp-modal-box {
  background: #fff; border-radius: 14px; padding: 26px 24px;
  width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
#gm_supplier .sp-modal-box h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
#gm_supplier .sp-modal-box p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.75; color: var(--txt); }
#gm_supplier .sp-modal-warn { color: var(--point-dark); font-size: 13px !important; }
#gm_supplier .sp-modal-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
#gm_supplier .sp-modal-btns .sp-btn { width: 100%; padding: 0 16px; }

/* 접수 완료 */
#gm_supplier .sp-done {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 50px 24px; text-align: center;
}
#gm_supplier .sp-done-ico {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--point); color: #fff; font-size: 34px; line-height: 64px; font-weight: 800;
}
#gm_supplier .sp-done h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; }
#gm_supplier .sp-done h2 span { font-size: 15px; font-weight: 700; color: var(--point-dark); }
#gm_supplier .sp-done p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--txt-sub); }
#gm_supplier .sp-done-btn { margin-top: 24px !important; }

@media (max-width: 700px) {
  #gm_supplier .sp-sec { padding: 18px 16px 22px; }
  #gm_supplier .sp-grid { grid-template-columns: 1fr; }
  #gm_supplier .sp-contract { height: 280px; padding: 14px 15px; }
  #gm_supplier .sp-submit { flex-direction: column-reverse; }
  #gm_supplier .sp-submit .sp-btn { width: 100%; }
}