/* begreen-pay 공용 토큰·폼 원자.
   페이지 고유 레이아웃·컴포넌트는 각 페이지의 <style>에 남긴다.

   ── 2026-08-29: near-black에서 라이트로 전환 ──────────────────────────
   이유 셋. 어느 것도 취향이 아니다.

   1. **결제 위젯을 우리가 못 그린다.** 토스 결제위젯은 밝은 UI로 렌더된다.
      어두운 페이지 한가운데 흰 상자가 박히는 것을 buy.html의 `.widget-shell`이
      봉합하고 있었다 — 하필 결제 직전, 신뢰가 가장 필요한 자리다.
   2. **법적 문서는 인쇄되고 심사받는다.** 약관·환불·개인정보는 분쟁 때 증거가
      되고 결제사 심사관이 훑는다. 다크 배경의 약관은 회사보다 개발자 도구로 읽힌다.
   3. **옛 강조색이 흰 배경에서 안 읽힌다.** 오로라 그린 #3BF0A2는 흰 바탕 대비가
      1.44:1이었다. 다크를 벗어날 수 없는 색이었다.

   강조색은 #0E7C4A. 흰 바탕 대비 5.25:1로 WCAG AA를 넘고, 버튼에 흰 글자를
   얹어도 같은 값이다. 유명한 브랜드 초록(Spotify 2.59 · 네이버 2.25 ·
   WhatsApp 1.98)은 전부 미달이라 후보가 아니었다 — 그 색들은 어두운 배경이나
   큰 면적을 전제로 만들어졌다.

   변수 이름 `--aurora`는 그대로 둔다. 17곳이 참조하고 있고 이름을 바꾸면
   한 곳을 빠뜨렸을 때 조용히 색만 사라진다. 값만 바꾼다. */

*,*::before,*::after{box-sizing:border-box}
:root{
  --void:#FFFFFF;--ink:#161A18;--ink2:#48504C;--ink3:#767E79;
  --aurora:#0E7C4A;--line:#E3E8E5;--danger:#C0342A;
  /* 경고의 파생값 — 배경/테두리. 옛 팔레트는 연분홍 글자(#F4A6A6)를 썼는데
     흰 바탕에서 대비가 1.81:1이라 오류 메시지가 사실상 안 보였다. */
  --danger-tint:#FDF3F2;--danger-line:#F0CFCB;
  /* 비활성 버튼. 초록을 흐리는 게 아니라 회색으로 바꾼다 — 아래 주석 참고. */
  --disabled-bg:#EAEEEC;--disabled-ink:#9BA39E;
  /* 강조색의 파생값 — 호버는 16% 어둡게, 틴트는 94% 흰쪽, 테두리는 80%. */
  --aurora-hover:#0C683E;--aurora-tint:#F1F7F4;--aurora-line:#CFE5DB;
  --surface:#F7F9F8;--field:#FFFFFF;
  --disp:"Archivo",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--ui);line-height:1.6}

/* 라벨은 한글이다. 모노 폰트는 한글 글리프가 없어 폴백되고, letter-spacing은
   음절을 흩어 놓는다("라이선스  키  받을  이메일"). 둘 다 라틴 소문자를 위한
   장치이므로 걷어낸다. */
label{font-family:var(--ui);font-size:12.5px;color:var(--ink3);display:block;
  margin-bottom:7px;letter-spacing:0}
input,select{background:var(--field);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:10px 12px;font-size:14px;font-family:var(--mono)}
input[type=email]{width:100%}
input:focus,select:focus{outline:2px solid var(--aurora);outline-offset:-1px}
input::placeholder{color:var(--ink3)}

.box{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin-bottom:13px}

/* 버튼 글자는 흰색이다. 옛 팔레트는 밝은 초록 위에 어두운 글자(#05130C)를
   얹었는데, 진한 초록에서는 그 조합이 대비 1.7:1로 무너진다. */
.pay-btn{display:block;width:100%;padding:12px;border:0;border-radius:9px;
  background:var(--aurora);color:#fff;font-size:15px;font-weight:700;
  cursor:pointer;font-family:var(--ui)}
.pay-btn:hover{background:var(--aurora-hover)}
/* 비활성은 흐린 초록이 아니라 회색이다. 어두운 배경에서는 opacity:.35가 확실히
   가라앉아 보였지만, 흰 배경에서는 "조금 연한 초록 버튼"이 되어 눌러도 반응이
   없는 고장으로 읽힌다. 색상 자체를 바꿔 못 누르는 상태임을 말한다.
   :hover를 따로 막는 이유 — 브라우저는 disabled 버튼에도 :hover를 매칭한다.
   막지 않으면 커서를 얹는 순간 진한 초록으로 변해 다시 눌러도 될 것처럼 보인다. */
.pay-btn:disabled,.pay-btn:disabled:hover{background:var(--disabled-bg);
  color:var(--disabled-ink);cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--aurora);outline-offset:2px}

/* 오류 배너. buy.html과 invoice.html에 같은 규칙이 각각 있었다 — 한쪽만 고치면
   결제 페이지와 청구서 페이지가 같은 실패를 다른 색으로 말한다. */
.alert{border:1px solid var(--danger-line);background:var(--danger-tint);
  border-radius:10px;padding:11px 14px;font-size:13px;color:var(--danger);margin:0 0 18px}

.foot{font-size:11.5px;color:var(--ink3);text-align:center;margin-top:20px}
.foot a{color:var(--ink2)}
/* 사업자 정보 줄. legal-boot.js가 구분자를 문자로 넣으므로 여기서는 줄간격만
   벌린다 — 한 줄에 다 안 들어가 반드시 두 줄로 접힌다. */
.foot .biz-item{white-space:nowrap}
.foot .biz-item b{font-weight:400;opacity:.7}
.foot .biz-sep{opacity:.4}
#biz{line-height:2}

[hidden]{display:none !important}