/* ============================================================================
   결제 화면 전용 (/pay/ · /lp/m1|m2|m3/pay/ · /pay/done/ · /pay/fail/)
   ----------------------------------------------------------------------------
   ★ 새 디자인을 만들지 않습니다. css/style.css 의 토큰과 부품을 그대로 씁니다
     (--n1 --n2 --line --ink-2 --r --wrap, .lpform .apply__card .field .btn .ticks).
     결제 화면만 다르게 생기면 "여기가 진짜 그 회사 맞나" 하는 자리가 됩니다.
     심사관도 같은 것을 봅니다.

   ★ 17px 이하 글자는 font-weight 를 500 까지만 씁니다(이 저장소 규칙).
   ============================================================================ */

/* ── 판 ──────────────────────────────────────────────────────────────────
   ★ 한 칸입니다. 처음에는 두 칸(왼쪽 상품 상세 · 오른쪽 폼)이었는데,
     사용자 지시로 상품 상세표를 빼고 나니 왼쪽이 통째로 비었습니다.
     상품은 폼 위에 한 줄로 올리고 가운데로 모읍니다. */
.pay { position: relative; padding: clamp(120px, 14vw, 170px) 0 clamp(80px, 10vw, 130px); }
.pay__wrap { max-width: 680px; }

/* 테스트 키로 돌고 있을 때 맨 위에 뜨는 띠.
   ★ 진짜 카드가 안 빠지는데 완료 화면이 똑같이 생기면 그것부터 사고입니다. */
.pay__testbar {
  margin-bottom: 26px; padding: 13px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 92, 122, .45);
  background: rgba(255, 92, 122, .10);
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.pay__testbar b { color: var(--warn); font-weight: 500; }

/* ── 상품 (폼 위 한 줄) ──────────────────────────────────────────────── */
.pay__product { margin-bottom: 30px; }
.pay__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--n2);
}
.pay__title {
  margin: 14px 0 10px;
  font-size: clamp(25px, 3.2vw, 33px); font-weight: 800; letter-spacing: -.04em; line-height: 1.25;
}
.pay__sub { font-size: 15px; font-weight: 400; color: var(--ink-2); line-height: 1.7; }

.pay__price {
  margin-top: 22px; display: flex; align-items: baseline; gap: 6px;
  font-size: clamp(34px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.pay__price span { font-size: 17px; font-weight: 500; color: var(--ink-2); letter-spacing: -.02em; }
/* '부가세 포함' 은 크게, 공급가액은 작게. 표시 가격과 결제 금액이 같다는 것을
   심사관이 한눈에 봐야 합니다. */
.pay__vat { margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.pay__vat-sub { margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* ── 폼 ──────────────────────────────────────────────────────────────── */
/* .apply__card 는 모달용이라 스스로 스크롤합니다. 페이지에 박으면 잘립니다.
   (.lpform__card 와 같은 이유·같은 해법입니다) */
.pay__card .lpform__card { max-height: none; overflow: visible; overscroll-behavior: auto; touch-action: auto; }
.pay__step {
  margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--ink-3);
}
.pay__note {
  margin-top: 14px; font-size: 13px; font-weight: 400; color: var(--ink-3); line-height: 1.8;
}
.pay__note a { color: var(--n2); }

/* ── 결제 수단 안내 ───────────────────────────────────────────────────────
   ★ 결제위젯을 화면에 박지 않습니다. [결제하기] 를 누르면 토스 결제창이
     팝업으로 뜨고, 카드만 받습니다(js/pay.js 의 method:'CARD'). */
.pay__method {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px; padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035);
}
.pay__method-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: rgba(124, 92, 255, .14); border: 1px solid rgba(124, 92, 255, .3);
}
.pay__method-ico svg { width: 21px; height: 21px; stroke: var(--n2); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* ★ `.pay__method span` 으로 쓰면 아이콘 상자(<span class="pay__method-ico">)까지
     잡습니다. 선택자 우선순위가 `.pay__method-ico` 보다 높아서 display:grid 를
     display:block 으로 덮고, 아이콘이 상자 위쪽에 붙습니다.
     글자 칸(<div>) 안의 span 만 가리킵니다. */
.pay__method > div b { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.pay__method > div span { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* ── 완료 · 실패 화면 ─────────────────────────────────────────────────── */
.payres { padding: clamp(120px, 14vw, 170px) 0 clamp(90px, 12vw, 150px); }
.payres__inner { max-width: 620px; margin: 0 auto; }
/* .apply__card 는 모달용이라 스스로 스크롤합니다. 페이지에 박으면 잘립니다.
   (.lpform__card 와 같은 이유·같은 해법입니다) */
.payres__card { max-height: none; overflow: visible; overscroll-behavior: auto; touch-action: auto; }

.payres__ico--warn { background: var(--warn); box-shadow: 0 0 46px -8px rgba(255, 92, 122, .9); }
.payres__ico--wait { background: var(--bg-card-2); box-shadow: none; border: 1px solid var(--line-2); }
.payres__ico--wait svg { stroke: var(--ink-2); }

.payres__table { margin-top: 26px; border-top: 1px solid var(--line); text-align: left; }
.payres__table div {
  display: grid; grid-template-columns: 104px 1fr; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.payres__table dt { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.payres__table dd { margin: 0; font-size: 14.5px; font-weight: 400; color: var(--ink-2); line-height: 1.6; }
.payres__table dd b { color: var(--ink); font-weight: 500; }
.payres__table .payres__amt b { color: var(--n2); font-size: 17px; font-weight: 700; }
.payres__sub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--ink-4); }

.payres__msg {
  margin-top: 22px; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  font-size: 14px; font-weight: 400; color: var(--ink-2); line-height: 1.75; text-align: left;
}
.payres__msg b { color: var(--ink); font-weight: 500; }
.payres__msg--warn { border-color: rgba(255, 92, 122, .4); background: rgba(255, 92, 122, .08); }

.payres__links {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  font-size: 13.5px; font-weight: 400; color: var(--ink-3);
}
.payres__links a { color: var(--n2); }
.payres__code { margin-top: 14px; font-size: 12px; font-weight: 400; color: var(--ink-4); }

/* ── 푸터 법정 링크 (전 페이지 공통) ──────────────────────────────────── */
.foot__legal {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin: 0 0 14px; font-size: 13px; font-weight: 400; color: var(--ink-3);
}
.foot__legal a { color: var(--ink-3); transition: color .25s; }
.foot__legal a:hover { color: var(--ink); }
/* 개인정보처리방침은 다른 약관과 구분되게 표시해야 합니다(개인정보보호법 제30조) */
.foot__legal b { color: var(--ink-2); font-weight: 600; }

/* ── 약관 · 방침 · 환불 규정 · 고객센터 ───────────────────────────────── */
.legal { padding: clamp(120px, 14vw, 170px) 0 clamp(90px, 12vw, 150px); }
.legal__inner { max-width: 820px; margin: 0 auto; }
.legal h1 {
  font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; letter-spacing: -.04em;
}
.legal__meta { margin-top: 12px; font-size: 13.5px; font-weight: 400; color: var(--ink-3); }
/* 개정 예고 상자 (2026-09-18, 제7조) — 시행일이 지나면 PHP 가 상자를 안 그립니다 */
.legal__notice { margin: 14px 0 18px; padding: 14px 18px; border-left: 3px solid var(--n1, #7c5cff); background: rgba(124,92,255,.07); border-radius: 0 10px 10px 0; }
.legal__notice p { margin: 0 0 8px; }
.legal__notice p:last-child { margin: 0; }
.legal h2 {
  margin: 44px 0 14px; padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
}
.legal h3 { margin: 26px 0 10px; font-size: 16px; font-weight: 500; color: var(--ink); }
.legal p, .legal li {
  font-size: 15px; font-weight: 400; color: var(--ink-2); line-height: 1.85;
}
.legal p { margin: 10px 0; }
.legal ul, .legal ol { margin: 10px 0; padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--n2); }
.legal b { color: var(--ink); font-weight: 500; }
.legal__box {
  margin: 20px 0; padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035);
}
.legal__box p:first-child { margin-top: 0; }
.legal__box p:last-child { margin-bottom: 0; }

/* 표 — 개인정보 처리위탁 목록, 환불 예시 계산 */
.legal__tablewrap { overflow-x: auto; margin: 18px 0; }
.legal table { width: 100%; border-collapse: collapse; min-width: 480px; }
.legal th, .legal td {
  padding: 11px 14px; border: 1px solid var(--line); text-align: left;
  font-size: 14px; font-weight: 400; color: var(--ink-2); line-height: 1.6;
}
.legal th { background: rgba(255, 255, 255, .04); color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .payres__table div { grid-template-columns: 96px 1fr; }
}
@media (max-width: 620px) {
  .payres__table div { grid-template-columns: 1fr; gap: 4px; }
  .legal table { min-width: 420px; }
}