/* ══════════════════════════════════════════════════════════════════════════
   신청 페이지 (request.plexview.co.kr) — 모바일 우선
   ══════════════════════════════════════════════════════════════════════════

   설계 전제: 선생님 대부분이 **휴대폰에서 바로 신청**한다.
     · 기본 스타일이 곧 모바일 스타일이다(min-width 로만 넓혀 간다).
     · 입력창 글자를 16px 이상으로 둔다 — iOS Safari 는 16px 미만 입력에 포커스하면
       화면을 확대해 버려서 사용자가 손으로 되돌려야 한다.
     · 터치 목표는 최소 44px 높이(Apple HIG 권장).
     · 홈 인디케이터·노치를 피하려고 safe-area-inset 을 쓴다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 서체 — 신청 페이지 전용 ─────────────────────────────────────────────────
   나눔휴먼. 휴대폰에서 읽기 좋게 Regular(본문) / Bold(라벨·제목) 두 벌만 쓴다.
   EL·Light 는 작은 화면에서 획이 날아가 보이고, EB·Heavy 는 답답하다.

   ★ fonts.css 가 아니라 여기에 두는 이유
     fonts.css 는 랜딩페이지와 공용이다. 거기를 고치면 랜딩까지 서체가 바뀐다.
     request.css 는 신청 페이지만 읽으므로 여기서 변수를 덮어쓴다.

   ★ 굵기를 범위로 선언한다
     기존 규칙이 300·500 을 쓰는데 나눔휴먼은 두 벌뿐이라, 범위를 지정해
     500 이상이면 Bold 로 떨어지게 한다. 그래야 라벨·제목이 본문과 구분된다.
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'NanumHuman'; font-style: normal; font-weight: 100 400;
  font-display: swap; src: url('fonts/nanumhuman-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'NanumHuman'; font-style: normal; font-weight: 500 900;
  font-display: swap; src: url('fonts/nanumhuman-bold.woff2') format('woff2');
}

.req-body {
  --sans:  'NanumHuman', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: 'NanumHuman', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-family: var(--sans);
}

.req-body {
  background: var(--bg);
  font-size: 19px;
}

.req-wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
  padding-left:  max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* ── 상단 ──────────────────────────────────────────────────────────────── */
.req-head {
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(0,180,215,.22), transparent 60%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 55%, var(--edge) 100%);
  color: #fff;
  padding: 34px 0 40px;
  padding-top: max(34px, env(safe-area-inset-top));
}
.req-logo { height: 34px; width: auto; margin-bottom: 22px; }

.req-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(246,127,0,.16); border: 1px solid rgba(246,127,0,.42);
  color: #FFC98A; font-family: var(--sans); font-weight: 500;
  font-size: 16px; padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.req-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

.req-h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: 33px; line-height: 1.36; letter-spacing: -.03em;
  color: #fff; margin: 0 0 14px;
}
.req-lead {
  font-family: var(--sans); font-weight: 300;
  font-size: 18.5px; line-height: 1.72; color: rgba(255,255,255,.82);
  margin: 0 0 22px;
}
.req-facts {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.req-facts li {
  font-family: var(--sans); font-weight: 300;
  font-size: 17.5px; line-height: 1.6; color: rgba(255,255,255,.78);
  padding: 11px 0 11px 24px; position: relative;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.req-facts li::before {
  content: ''; position: absolute; left: 4px; top: 19px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan, #00B4D7);
}
.req-facts b { font-weight: 500; color: #fff; }

/* ── 본문 ──────────────────────────────────────────────────────────────── */
.req-main { padding: 26px 0 40px; }

.req-form {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 20px 24px; box-shadow: var(--shadow-md);
}
.req-h2 {
  font-family: var(--serif); font-weight: 500; font-size: 25px;
  color: var(--navy); margin: 0 0 6px; letter-spacing: -.02em;
}
.req-sub {
  font-family: var(--sans); font-weight: 300; font-size: 17px;
  color: var(--sub); margin: 0 0 22px;
}

/* 입력 — 모바일 터치 크기 */
.req-form .field { margin-bottom: 18px; }
.req-form .field label {
  display: block; font-family: var(--sans); font-weight: 500;
  font-size: 17.5px; color: var(--navy); margin-bottom: 8px;
}
.req-form .field .opt {
  font-weight: 300; font-size: 15.5px; color: var(--faint);
  background: var(--bg); border-radius: 4px; padding: 2px 7px; margin-left: 4px;
}
.req-form .field input,
.req-form .field textarea {
  width: 100%;
  font-family: var(--sans); font-weight: 300;
  font-size: 19px;              /* ★ 16px 미만이면 iOS 가 화면을 확대한다 */
  line-height: 1.5; color: var(--ink);
  padding: 13px 14px; min-height: 48px;   /* 터치 목표 */
  border: 1px solid #CFDAE9; border-radius: 10px; background: #fff;
  -webkit-appearance: none; appearance: none;
}
.req-form .field textarea { min-height: 84px; resize: vertical; }
.req-form .field input::placeholder,
.req-form .field textarea::placeholder { color: #B6C2D2; }
.req-form .field .hint { font-size: 16px; color: var(--sub); margin: 7px 0 0; }
.req-form .field .errmsg { font-size: 16px; }

/* 개인정보 — 접이식 */
.req-consent {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); margin: 4px 0 16px; overflow: hidden;
}
.req-consent summary {
  list-style: none; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 17px;
  color: var(--navy); padding: 14px 16px; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.req-consent summary::-webkit-details-marker { display: none; }
.req-consent .chev { color: var(--faint); font-size: 16px; transition: transform .18s ease; }
.req-consent[open] .chev { transform: rotate(180deg); }
.req-consent-body {
  padding: 0 16px 16px; font-size: 16.5px; line-height: 1.72; color: var(--sub);
  border-top: 1px solid var(--line); padding-top: 14px;
}
.req-consent-body dl { margin: 0 0 12px; }
.req-consent-body dt {
  font-family: var(--sans); font-weight: 500; color: var(--ink);
  font-size: 16px; margin-top: 10px;
}
.req-consent-body dd { margin: 3px 0 0; }
.req-consent-body p { margin: 0; }

/* 동의 체크 — 터치하기 쉽게 전체를 라벨로 */
.req-form .check {
  align-items: center; gap: 12px; padding: 12px 4px; min-height: 48px;
  font-size: 18px; margin: 0;
}
.req-form .check input { width: 22px; height: 22px; margin: 0; }
.req-form .agree-err { margin: -4px 0 0 38px; font-size: 16px; color: #D64545; display: none; }
.req-form .check.err + .agree-err { display: block; }

.req-submit {
  width: 100%; margin-top: 16px; min-height: 54px;
  font-size: 20px; border-radius: 12px;
}

.req-note {
  font-size: 15.5px; line-height: 1.7; color: var(--faint);
  margin: 16px 0 0; text-align: center;
}

/* 무상 제공 조건 */
.req-terms { margin-top: 22px; padding: 0 4px; }
.req-terms h3 {
  font-family: var(--sans); font-weight: 500; font-size: 17px;
  color: var(--navy); margin: 0 0 10px;
}
.req-terms ul { margin: 0; padding-left: 18px; }
.req-terms li {
  font-size: 16.5px; line-height: 1.78; color: var(--sub); margin-bottom: 5px;
}

/* ── 푸터 ──────────────────────────────────────────────────────────────── */
.req-foot {
  background: var(--edge); color: rgba(255,255,255,.6);
  padding: 26px 0; font-size: 16.5px; line-height: 1.7;
  padding-bottom: max(26px, env(safe-area-inset-bottom));
}
.req-foot b { color: rgba(255,255,255,.9); font-weight: 500; }
.req-foot a { color: #8FC4F0; }

/*  맨 아래 세 조각 — 한 줄에 가운데로.
    좁은 화면에서는 한 줄에 들어가지 않으므로 세로로 쌓는다. 억지로 한 줄에
    두면 글자가 잘리거나 가로 스크롤이 생긴다. */
.req-foot-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.req-foot-row p { margin: 0; }

/*  한 줄로 세우는 것은 '확실히 들어가는 폭' 부터. 세 조각을 늘어놓는 데
    631px 이 필요한데 본문 컨테이너는 620px 이라 아슬아슬하게 넘쳤다.
    어중간하게 넘치면 둘째 줄이 가운뎃점으로 시작해 보기 나쁘다.
    그래서 ① 맨 아래만 컨테이너를 넓히고 ② 900px 부터 한 줄로 간다. */
@media (min-width: 1100px) {
  /*  개인정보처리방침이 더해져 네 조각이 됐다. 981px 이 필요하다. */
  .req-foot .req-wrap { max-width: 1060px; }
  .req-foot-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
  /*  조각 사이 가운뎃점. gap(18px) + margin(18px) 으로 앞뒤 여백을 맞춘다. */
  .req-foot-row p + p::before {
    content: "·";
    margin-right: 18px;
    color: rgba(255,255,255,.3);
  }
}

/* ── 태블릿·데스크톱 ───────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .req-wrap { max-width: 620px; padding: 0 32px; }
  .req-head { padding: 48px 0 52px; }
  .req-logo { height: 40px; margin-bottom: 26px; }
  .req-h1 { font-size: 41px; }
  .req-lead { font-size: 19.5px; }
  .req-form { padding: 34px 32px 30px; border-radius: 18px; }
  .req-h2 { font-size: 28px; }
  .req-main { padding: 34px 0 56px; }
}

@media (min-width: 1000px) {
  .req-wrap { max-width: 680px; }
  .req-head { padding: 64px 0 68px; }
  .req-h1 { font-size: 47px; }
}

/* 다크 모드 — 휴대폰 기본 설정이 다크인 교사가 많다 */
@media (prefers-color-scheme: dark) {
  .req-body { background: #0F1826; }
  .req-form { background: #16233A; border-color: #23344F; }
  .req-h2 { color: #EAF1FA; }
  .req-form .field label { color: #D3DFEF; }
  .req-form .field input,
  .req-form .field textarea {
    background: #0F1826; border-color: #2C3F5C; color: #E8EEF7;
  }
  .req-form .field input::placeholder,
  .req-form .field textarea::placeholder { color: #64748B; }
  .req-consent { background: #0F1826; border-color: #23344F; }
  .req-consent summary { color: #D3DFEF; }
  .req-consent-body { border-top-color: #23344F; }
  .req-consent-body dt { color: #C7D6EA; }
  .req-form .check span { color: #D3DFEF; }
  .req-terms h3 { color: #D3DFEF; }
}

/*  상단 로고 → 랜딩페이지. 링크 상자가 이미지에 딱 붙도록 inline-block 으로 둔다
    (기본 inline 이면 아래에 여백이 생겨 로고가 떠 보인다). */
.req-logo-link {
  display: inline-block;
  line-height: 0;
  border-radius: 4px;
}
.req-logo-link:focus-visible {
  outline: 2px solid #4FA3E8;
  outline-offset: 3px;
}

/*  개인정보처리방침 링크 — 시행령이 요구하는 '지속적 게재'.
    이름을 그대로 쓰고, 다른 푸터 줄에 묻히지 않게 굵게 둔다. */
.req-foot .pp-link { font-weight: 500; color: #A9D4F5; }

/*  동의 체크상자 아래. 체크 영역과 겹치지 않도록 label 밖에 두고 살짝 들여쓴다. */
.agree-link { margin: -6px 0 14px 30px; }
.agree-link a { font-size: 15px; color: var(--blue); text-decoration: underline; }