/* apply.css — 신청 페이지 전용 (기획서 §9). 토큰은 styles.css :root 를 그대로 쓴다.
   랜딩(index.html)은 이 파일을 로드하지 않는다 — 폼 스타일이 랜딩 무게에 얹히지 않게. */

/* ── 히어로: 문서 페이지와 같은 조판. 사진도 스크림도 없다.
   여기 온 사람은 이미 설득된 사람이라 다시 팔지 않는다 — 절차만 보여준다. */
.apply-hero { padding-block: var(--section-y-tight) var(--s8); }
.apply-hero .lead { margin-top: var(--s5); max-width: var(--m-base); }

/* 3단계 — 번호는 라틴 각자체, 본문은 고딕. 카드·아이콘 없이 hairline 열로만 나눈다. */
.apply-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  grid-column: text-start / wide-end;   /* 오른쪽 재단선으로 한 트랙 넘긴다 — 의도적 비대칭 */
  max-width: none;
}
.apply-steps li { display: grid; gap: var(--s2); align-content: start; }
.apply-steps__no {
  font-family: var(--font-body);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-label-ko);
  color: var(--muted-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
.apply-steps h2 {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--ls-body);
}
.apply-steps p { font-size: var(--t-sm); color: var(--muted); max-width: none; }

/* ── 폼 밴드: 좌 폼 / 우 고정 요약 */
.apply-band { padding-top: 0; }
.apply-grid {
  grid-column: wide;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);   /* 불균등 — 파워포인트 반반이 아니다 */
  column-gap: clamp(var(--s7), 6vw, 120px);
  align-items: start;
}

/* 필드셋 = 문서의 "조". 조문 제목 층(.doc__h2)과 같은 위계로 만든다. */
.apply-form fieldset { border: 0; padding: 0; margin: 0 0 var(--s8); min-width: 0; }
.apply-form legend {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  width: 100%;
  margin-bottom: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
}
.apply-form legend .apply-legend__no {
  flex: none;
  font-family: var(--font-wordmark);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label-la);
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.apply-form legend .apply-legend__hint {
  margin-left: auto;
  font-size: var(--t-nano);
  font-weight: 400;
  letter-spacing: var(--ls-label-ko);
  color: var(--muted);
}

.field { display: grid; gap: var(--s2); margin-bottom: var(--s6); }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.field__row .field { margin-bottom: var(--s6); }
.field label,
.field .field__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-strong);
  letter-spacing: var(--ls-body);
}
.field__opt {
  margin-left: var(--s2);
  font-weight: 400;
  font-size: var(--t-nano);
  letter-spacing: var(--ls-label-ko);
  color: var(--muted-soft);
}
.field__hint { font-size: var(--t-xs); color: var(--muted); max-width: none; }

/* 인풋 — 지면 위 종이 한 장(surface-card) + 1px hairline. 라운딩 0, 그림자 0.
   높이 52px(탭 타깃 44 상회), 글자 17px(모바일 자동 확대 임계 16px 상회). */
.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px var(--s4);
  background: var(--surface-card);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-base);
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.7; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-soft); opacity: 1; }
.field input:hover,
.field textarea:hover { border-color: var(--ink-strong); }
.field input:focus,
.field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* 오류 — 문장으로만. 아이콘·배경색 없이 액센트 잉크 한 줄. */
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--accent); }
.field__error { display: none; font-size: var(--t-xs); color: var(--accent); }
.field.is-invalid .field__error { display: block; }

/* ── 동의 — 체크박스 5개. 기본 해제, 항목마다 분리, 각각 44px 이상의 탭 영역. */
.consent { border-top: 1px solid var(--line-soft); }
.consent__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: var(--s4);
  align-items: start;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line-soft);
}
.consent__item input[type="checkbox"] {
  width: 22px; height: 22px;
  margin: 3px 0 0;
  accent-color: var(--accent);
  border-radius: 0;
  cursor: pointer;
}
.consent__item label {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-strong);
  line-height: 1.65;
  cursor: pointer;
}
.consent__req {
  margin-right: var(--s2);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-label-ko);
  color: var(--accent);
}
.consent__req--opt { color: var(--muted-soft); }
.consent__body {
  grid-column: 2;
  margin-top: var(--s2);
  font-size: var(--t-xs);
  line-height: 1.75;
  color: var(--muted);
  max-width: none;
}
.consent__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.consent__body a:hover { text-decoration-color: var(--accent); }
.consent__item.is-invalid label { color: var(--accent); }
.consent__error { grid-column: 2; display: none; font-size: var(--t-xs); color: var(--accent); margin-top: var(--s1); }
.consent__item.is-invalid .consent__error { display: block; }

/* 허니팟 — 사람에게는 없고 봇에게만 있는 칸. display:none 은 일부 봇이 건너뛴다. */
.apply-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 제출 */
.apply-submit { margin-top: var(--s7); display: grid; gap: var(--s3); }
.apply-submit .btn[disabled] { background: var(--muted-soft); cursor: default; }
.apply-submit .guarantee { font-size: var(--t-xs); color: var(--muted); }
.apply-status { display: none; font-size: var(--t-sm); color: var(--accent); max-width: none; }
.apply-status.is-visible { display: block; }
.apply-status a { color: inherit; }

/* ── 우측 요약: 고정. 카드 테두리 없이 종이 한 장(surface-card)만 얹는다. */
.apply-aside {
  position: sticky;
  top: calc(var(--nav-h) + var(--s5));
  display: grid;
  gap: var(--s5);
  padding: var(--s6);
  background: var(--surface-card);
}
.apply-aside__cap {
  font-family: var(--font-wordmark);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
  color: var(--accent);
}
.apply-price { display: grid; gap: var(--s1); max-width: none; }
.apply-price__was { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--muted); }
.apply-price__was s { color: var(--muted); }
.apply-price__now {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.apply-price__now small { font-family: var(--font-body); font-size: var(--t-sm); color: var(--muted); margin-left: var(--s2); }
.apply-price__save { font-size: var(--t-xs); color: var(--accent); font-weight: 500; }
.apply-price__note { font-size: var(--t-xs); color: var(--muted); }

.apply-assure { display: grid; gap: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line-soft); }
.apply-assure dt { font-size: var(--t-xs); font-weight: 500; color: var(--ink-strong); letter-spacing: var(--ls-body); }
.apply-assure dd { font-size: var(--t-xs); color: var(--muted); line-height: 1.7; }

/* ── 결제 단계 (기획서 §9.7) — 폼 자리에 그대로 들어온다. 위젯 내부는 토스가 그린다. */
.apply-pay { padding-top: var(--section-y-tight); }
.apply-pay__main { min-width: 0; }
.apply-pay .lead { margin-top: var(--s5); max-width: var(--m-base); }
.apply-pay__summary {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.apply-pay__summary > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); column-gap: var(--s5); align-items: baseline; }
.apply-pay__summary dt { font-size: var(--t-nano); letter-spacing: var(--ls-label-ko); color: var(--muted); }
.apply-pay__summary dd { font-size: var(--t-base); color: var(--ink); }
.apply-pay__summary dd .num { font-size: 1.15em; font-variant-numeric: lining-nums tabular-nums; }
/* 정가가 먼저·확실히 그어져야 14만원이 할인으로 읽힌다 (§5.10) */
.apply-pay__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); }
.apply-pay__amount s { font-family: var(--font-display); font-size: 1.25rem; color: var(--muted); text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.apply-pay__amount b { font-family: var(--font-display); font-size: 2rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.apply-pay__amount span { font-size: var(--t-xs); color: var(--accent); font-weight: 500; }

/* 위젯 프레임 — 종이 한 장(surface-card) + hairline. 라운딩·그림자 없음. 높이는 위젯이 정한다. */
.apply-pay__widget {
  margin-top: var(--s7);
  padding: var(--s3) 0;
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
}
.apply-pay__widget #payment-method { min-height: 120px; }
.apply-pay .apply-submit { margin-top: var(--s6); }
.apply-pay__restart { margin-top: var(--s5); max-width: none; }
.apply-pay__restart a { color: var(--accent); }

/* ── 완료 화면 (success.html / fail.html 이 사용) */
.apply-done { padding-block: var(--section-y); }
.apply-done .lead { margin-top: var(--s5); }
.apply-done__detail {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  max-width: var(--m-base);
}
.apply-done__detail dt { font-size: var(--t-nano); letter-spacing: var(--ls-label-ko); color: var(--muted); }
.apply-done__detail dd { font-size: var(--t-base); color: var(--ink); }
.apply-done__detail dd .num { font-size: 1.15em; }
.apply-done .fine { margin-top: var(--s6); }
.apply-done .fine a { color: var(--accent); }
.apply-done__nav { margin-top: var(--s7); }

/* ── 반응형 */
@media (max-width: 1079px) {
  .apply-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s8); }
  .apply-aside { position: static; order: 1; }    /* 요약은 폼 뒤로 — 첫 입력칸까지의 거리가 전환이다. "지금은 결제 안 함"은 리드·곁줄이 이미 말한다 */
}
@media (max-width: 767px) {
  .apply-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s3); grid-column: text; margin-top: var(--s6); }
  .apply-steps li { grid-template-columns: auto 1fr; column-gap: var(--s3); align-items: baseline; }
  .apply-steps p { display: none; }              /* 모바일은 제목 3줄만 — 설명은 이미 랜딩에서 읽었다 */
  .field__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .apply-aside { padding: var(--s5); }
  .apply-pay__summary > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); }
  /* 4) "두 칸 필수 · 길게 쓰지 않아도 됩니다"는 타이핑이 힘든 기기에서 더 필요하다 — 숨기지 않고 줄을 바꾼다 */
  .apply-form legend { flex-wrap: wrap; row-gap: var(--s1); }
  .apply-form legend .apply-legend__hint { margin-left: 0; flex-basis: 100%; }
}