/* ===========================================================================
   신청서 폼 — 공개 화면과 관리자 미리보기가 같이 쓰는 한 벌

   쓰는 곳
     · 공개 : pages/short_term_gathering/register_short_term_gathering.html
              (/short-term/register)
     · 관리자 : pages/admin/admin_home.html 의 '행사신청서 관리 01' 미리보기
                (.ff-prev 안)

   **문항을 더한 신청서를 새로 만들 때는 이 파일만 보면 된다.**
   아래 '문항 한 칸' 짜임 그대로 쓰면 두 화면에서 똑같이 보인다 :

     <form class="apply-form">                 (또는 <div class="apply-form">)
       <h3 class="form-title">신청서 작성</h3>
       <div class="field">
         <label for="…">이름 <span class="req">*</span></label>
         <input type="text" id="…" name="…" />
       </div>
       …
       <label class="consent"><input type="checkbox" /><span>…동의합니다.</span></label>
       <div class="pay-guide"> … </div>
       <button type="submit" class="submit-btn">제출하기</button>
     </form>
     <p class="apply-contact">문의 …</p>

   입력칸 종류는 <input>·<textarea>·<select> 와 보기 묶음(.choices) 넷이다.
   새 종류를 더하려면 여기에 한 번만 적는다 — 화면마다 적지 않는다.

   폭은 여기서 안 정한다 (쓰는 쪽이 정한다) —
   공개 화면은 .reg-inner 가 min(100%, 560px), 관리자는 .ff-prev 가 정한다.

   색은 공개 사이트 값이다. 관리자 디자인 시스템(--pri #0065BD 등)을 쓰지 않는다.
   =========================================================================== */

.apply-form {
  background: #f4f5f6;           /* 연한 회색 배경 */
  border: 1px solid #e5e7eb;     /* 연한 회색 테두리 */
  border-radius: 0;              /* 사각형 */
  padding: 36px 52px 48px;
  /* 바탕 글자 — 공개 화면 값(브라우저 기본 16px · #14161c)을 못 박는다.
     안 적으면 부른 화면 값을 따라간다 (관리자는 .ab 가 14px · #1e1e1e 다). */
  font-size: 16px;
  color: #14161c;
}
.apply-form .form-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #14161c;
  margin-bottom: 60px;   /* 제목과 첫 입력칸 사이 간격 */
}
.apply-form .field { margin-bottom: 18px; }
.apply-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #14161c;
  margin-bottom: 8px;
}
.apply-form label .req { color: #e8722b; }   /* 필수 표시 (주황 포인트) */

/* 입력칸 — 테두리 없는 흰 칸. 위아래 13px + 글자줄이라 높이가 43px 이 된다 */
.apply-form input,
.apply-form textarea,
.apply-form select {
  width: 100%;
  border: none;
  background: #fff;
  padding: 13px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #14161c;
}
.apply-form input::placeholder,
.apply-form textarea::placeholder { color: #9aa2ad; }
.apply-form input:focus,
.apply-form textarea:focus,
.apply-form select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #e8722b;
}
.apply-form textarea { min-height: 110px; resize: vertical; }
/* 관리자가 채워 둔 칸 — 신청자는 못 고친다. 살짝 회색으로 잠겼음을 보인다 */
.apply-form input[readonly],
.apply-form textarea[readonly],
.apply-form select:disabled { background: #f7f8f9; color: #555; cursor: default; }
.apply-form .choices label:has(input:disabled) { color: #555; cursor: default; }
/* 드롭다운 — 브라우저마다 화살표 자리가 달라(윈도우는 끝에 바짝 붙는다) 우리 화살표를 그린다.
   appearance 를 끄면 브라우저 화살표가 사라지므로 SVG 를 오른쪽 14px 자리에 넣는다. */
.apply-form select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;          /* 14(여백) + 10(화살표) + 14(글자와 사이) */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.apply-form select::-ms-expand { display: none; }

/* 보기 묶음 — 체크박스·라디오 문항. 입력칸과 같은 흰 칸 안에 세로로 쌓는다 */
.apply-form .choices {
  background: #fff;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apply-form .choices label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #4b5563;
  cursor: pointer;
}
.apply-form .choices input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: #e8722b;
}

/* 개인정보 동의 — 문항이 아니라 폼 아래 한 줄이라 .field 를 안 쓴다 */
.apply-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 6px 0 24px;
  font-size: 16px;
  color: #4b5563;
  line-height: 1.6;
}
.apply-form .consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #e8722b;
  flex: 0 0 auto;
}

.apply-form .submit-btn {
  display: block;
  width: 100%;
  border: none;
  background: #6aa0d8;           /* 하늘색 */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 15px 30px;
  cursor: pointer;
  transition: background .15s ease;
}
.apply-form .submit-btn:hover { background: #5a90c8; }

/* 참가비 안내 : 신청서 안, 제출하기 버튼 바로 위.
   계좌 항목은 각진 카드 안에 점선으로 구분해 세로로 쌓는다.
   카드 배경은 입력칸과 같은 흰색이라 폼 배경(#f4f5f6) 위에서 구분된다. */
.apply-form .pay-guide { margin: 6px 0 24px; }
.apply-form .pay-guide-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: #14161c;
  margin-bottom: 14px;
}
.apply-form .pay-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 4px 18px;
}
.apply-form .pay-row {
  padding: 10px 4px;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
  border-bottom: 1px dashed #d9dde3;   /* 항목 사이 점선 */
}
.apply-form .pay-row:last-child { border-bottom: none; }
.apply-form .pay-guide img { display: block; max-width: 180px; margin: 12px 0; }

/* 문의처 — 폼 바로 아래, 폼과 같은 왼쪽 선에 맞춘다.
   위 여백은 안 정한다 (자리는 부른 쪽이 정한다). */
.apply-contact {
  text-align: left;
  font-size: 15px;
  color: #4b5563;
}

/* 관리자 미리보기. 진짜 <input> 을 쓴다 — 그래야 CSS 가 한 벌로 끝난다.
   칸은 눌러 볼 수 있게 두고(드롭다운을 열어 보기를 확인한다), 제출하기만 막는다. */
.apply-form.is-preview .submit-btn { pointer-events: none; }

/* ===== 필수 칸 안내 모달 =====
   전역 리셋의 margin:0 이 <dialog> 의 가운데 정렬을 덮어써서 여기서 되살린다. */
.need-dlg {
  margin: auto; inset: 0;
  width: min(400px, 100vw - 40px);
  padding: 30px 24px 22px;
  border: none;
  background: #fff;
  color: #14161c;
}
.need-dlg::backdrop { background: rgba(20, 22, 28, .45); }
.need-msg {
  margin: 0 0 24px;
  font-size: 15px; font-weight: 600; line-height: 1.6;
  text-align: center; white-space: pre-line;
}
.need-ok {
  display: block; margin: 0 auto;
  padding: 12px 34px;
  border: none; background: #6aa0d8; color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.need-ok:hover { background: #5a90c8; }

/* ===== 좁을 때 =====
   폼이 좁아지면 안쪽 여백을 줄인다. 두 가지로 잰다 —
     @media    : 공개 화면. 폼이 화면 폭을 그대로 쓴다.
     @container: 관리자 미리보기. 화면이 아니라 그 칸의 폭을 봐야 한다
                 (쓰는 쪽이 container-type: inline-size 를 걸어 준다.
                  안 걸면 이 덩어리는 그냥 안 걸린다). */
@media (max-width: 768px) {
  .apply-form { padding: 28px 20px 32px; }
}
@container (max-width: 480px) {
  .apply-form { padding: 28px 20px 32px; }
  .apply-form .form-title { margin-bottom: 32px; font-size: 20px; }
}