/* Paynt 앱 화면 공통 — 랜딩과 같은 토큰을 쓴다. */
:root{
  --v:#F0512A; --v2:#D8421C; --v-t:#FDE9E3; --y:#F8B810; --y-t:#FEF3D6;
  --ink:#17161A; --ink2:#67646E; --ink3:#9B97A2;
  --line:#EBE8E4; --line2:#F4F2EE; --bg:#fff; --bg2:#FBFAF8;
  --ok:#1C6B41; --ok-t:#E7F3EC; --warn:#96690A; --err:#B4231A; --err-t:#FDEAE8;
  --sh:0 1px 2px rgba(23,22,26,.04),0 10px 30px -14px rgba(23,22,26,.16);
  --sh-lg:0 2px 6px rgba(23,22,26,.05),0 40px 90px -34px rgba(23,22,26,.26);
  --e:cubic-bezier(.2,.85,.25,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --r:14px; --r-xs:7px; --r-sm:11px; --r-lg:20px;
  --f:"Wanted Sans Variable","Wanted Sans",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  /* 노치와 홈 인디케이터. 지원 안 하는 브라우저에서는 0 으로 떨어진다. */
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  /* 화면 양옆 여백 — 좁은 폰에서 더 얇아진다 */
  --pad:1.25rem;
}
@media(min-width:600px){ :root{ --pad:1.5rem } }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;
  line-height:1.7;-webkit-font-smoothing:antialiased;word-break:keep-all;
  overflow-x:hidden;overscroll-behavior-y:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:0;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--v);outline-offset:3px;border-radius:5px}
.tnum{font-variant-numeric:tabular-nums}

.wm{display:inline-flex;align-items:baseline;font-weight:800;letter-spacing:-.05em;line-height:1}
.wm img{height:1.02em;width:auto;transform:translateY(.2em);margin-right:.01em}

/* ── 인증 화면 : 왼쪽 색면, 오른쪽 폼 ─────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.aside{background:var(--y);padding:2.6rem 3rem;display:flex;flex-direction:column;justify-content:space-between;
  border-radius:0 var(--r-lg) var(--r-lg) 0}
.aside .wm{font-size:24px}
.aside h1{font-size:clamp(28px,2.9vw,40px);font-weight:900;letter-spacing:-.045em;line-height:1.2;margin:0 0 .9rem;max-width:11em}
.aside p{margin:0;font-size:16px;color:#6B4E05;max-width:24em}
.aside .facts{display:grid;gap:.5rem;font-size:14.5px;font-weight:650;color:#5C4304}
.aside .facts span{display:flex;gap:.55rem;align-items:center}
.aside .facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}

.pane{display:flex;align-items:center;justify-content:center;padding:2.5rem 1.75rem}
.form{width:100%;max-width:25rem}
.form h2{font-size:27px;font-weight:850;letter-spacing:-.035em;margin:0 0 .5rem}
.form .sub{color:var(--ink2);font-size:15.5px;margin:0 0 2rem}

/* ── 입력 ───────────────────────────────────────────────────
   글자 크기는 16px 아래로 내리지 않는다. iOS 사파리는 그보다 작은 입력칸을
   누르면 화면을 확대해 버리고, 확대된 화면은 저절로 돌아오지 않는다.
   결제 폼에서 이게 나면 구매자가 그 자리에서 이탈한다.

   type 을 하나씩 열거하면 type 이 없는 input 과 number·datetime-local 이 빠진다.
   실제로 그래서 이름 칸만 작고 날짜 칸이 브라우저 기본 모양으로 나왔다.
   고를 것을 빼는 쪽이 안전하다. */
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:.42rem}
.field .hint{font-size:12.5px;color:var(--ink3);margin-top:.35rem;line-height:1.55}
.field .hint.bad{color:var(--err)}
.field .hint.good,.field .hint.ok{color:var(--ok)}
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=range]),
select, textarea{
  width:100%;font:inherit;font-size:16px;line-height:1.45;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;min-width:0;appearance:none}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,22,26,.07)}
input::placeholder,textarea::placeholder{color:#B9B5BD}
input[aria-invalid="true"]{border-color:var(--err)}
/* 숫자 칸의 위아래 화살표는 값이 작을 때 오히려 방해가 된다 */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* iOS 는 날짜 칸을 제멋대로 줄인다. 다른 칸과 높이를 맞춘다. */
input[type=date],input[type=datetime-local]{min-height:calc(1.45em + 1.4rem + 2px)}
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.9}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.8L6 8l3-3.2' fill='none' stroke='%239B97A2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:14px;padding-right:2.2rem}
textarea{resize:vertical;line-height:1.65}
.prefix{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;transition:border-color .2s,box-shadow .2s;overflow:hidden}
.prefix:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,22,26,.07)}
.prefix span{padding:0 .1rem 0 .9rem;color:var(--ink3);font-size:15px;font-weight:600;white-space:nowrap}
.prefix input{border:0;box-shadow:none!important;padding-left:.15rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

/* 사업자 유형 고르기 */
.picks{display:grid;gap:.55rem;margin-bottom:1.1rem}
.pick{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem .95rem;cursor:pointer;transition:.2s var(--e)}
.pick:hover{border-color:var(--ink3)}
.pick input{margin:0;accent-color:var(--v);width:17px;height:17px;margin-top:.22rem;flex:none}
.pick b{display:block;font-size:15px;font-weight:750}
.pick s{text-decoration:none;display:block;font-size:13px;color:var(--ink3)}
.pick:has(input:checked){border-color:var(--ink);background:var(--bg2)}

/* ── 버튼 ─────────────────────────────────────────────────────
   손가락으로 누르는 것은 44px 아래로 내리지 않는다. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:15.5px;
  font-weight:700;padding:.8rem 1.3rem;min-height:44px;border-radius:var(--r-sm);
  transition:.2s var(--e);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-v{background:var(--v);color:#fff;box-shadow:0 1px 2px rgba(216,66,28,.3),0 6px 18px -8px rgba(216,66,28,.7)}
.btn-v:hover{background:var(--v2);transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000;transform:translateY(-1px)}
.btn-out{border:1px solid var(--line);background:#fff}
.btn-out:hover{border-color:var(--ink)}
.btn-full{width:100%}
/* 표 안이나 카드 머리에 들어가는 작은 버튼은 44px 규칙에서 뺀다 */
.btn-s{min-height:0;padding:.45rem .85rem;font-size:13.5px}
.alt{margin-top:1.3rem;font-size:14.5px;color:var(--ink2);text-align:center}
.alt a{font-weight:750;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ── 알림 ───────────────────────────────────────────────── */
.note{border-radius:var(--r-sm);padding:.8rem .95rem;font-size:14px;margin-bottom:1.1rem;display:none;line-height:1.6}
.note.on{display:block}
.note-err{background:var(--err-t);color:var(--err)}
.note-ok{background:var(--ok-t);color:var(--ok)}
.note-warn{background:var(--y-t);color:var(--warn)}

/* ── 앱 헤더 ────────────────────────────────────────────── */
.hd{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);z-index:40;padding-top:var(--safe-t)}
.hd-in{width:min(1140px,100% - var(--pad)*2);margin-inline:auto;display:flex;align-items:center;
  gap:1rem;height:60px}
.hd .wm{font-size:20px;margin-right:auto}
.who{display:flex;align-items:center;gap:.6rem;font-size:14px;color:var(--ink2);min-width:0}
.who b{color:var(--ink);font-weight:750}
.av{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,var(--y),var(--v));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex:none}

/* ── 앱 본문 ────────────────────────────────────────────── */
.wrap{width:min(1080px,100% - var(--pad)*2);margin:2.6rem auto 5rem}
.page-hd{margin-bottom:1.8rem}
.page-hd h1{font-size:30px;font-weight:850;letter-spacing:-.04em;margin:0 0 .35rem}
.page-hd p{margin:0;color:var(--ink2);font-size:16px}

/* 카드는 기본적으로 선만 쓴다. 가만히 있는 판에 그림자를 다 깔면
   화면이 붕 뜨고 어디를 봐야 할지 알 수 없게 된다. */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  padding:1rem 1.3rem;border-bottom:1px solid var(--line2);font-size:14.5px;font-weight:750;
  letter-spacing:-.015em}
.card-bd{padding:1.3rem}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:1.4rem;align-items:start}
.dl{display:grid;gap:0}
.dl div{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid var(--line2);font-size:14.5px}
.dl div:last-child{border-bottom:0}
.dl dt{color:var(--ink2);margin:0;flex:none}
.dl dd{margin:0;font-weight:700;letter-spacing:-.02em;text-align:right;min-width:0;word-break:break-all}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:12px;font-weight:750;
  padding:.24rem .6rem;border-radius:var(--r-xs);white-space:nowrap}
.b-ok{background:var(--ok-t);color:var(--ok)}
.b-warn{background:var(--y-t);color:var(--warn)}
.b-err{background:var(--err-t);color:var(--err)}
.b-mute{background:#F1EFEC;color:var(--ink2)}

/* 단계 표시 */
.steps{display:flex;gap:.5rem;margin-bottom:1.6rem;font-size:13px;font-weight:700;flex-wrap:wrap}
.steps b{display:flex;align-items:center;gap:.45rem;color:var(--ink3)}
.steps b.on{color:var(--ink)}
.steps b i{width:20px;height:20px;border-radius:50%;background:var(--line2);color:var(--ink3);
  display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:800;flex:none}
.steps b.on i{background:var(--ink);color:#fff}
.steps b.done i{background:var(--ok);color:#fff}
.steps span{color:var(--line);align-self:center}

.empty{text-align:center;padding:2.6rem 1.4rem}
.empty h3{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:0 0 .4rem}
.empty p{margin:0 0 1.4rem;color:var(--ink2);font-size:15px}

.hide{display:none!important}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── 좁은 화면 ──────────────────────────────────────────── */
@media(max-width:880px){
  .split{grid-template-columns:1fr}
  .aside{border-radius:0;padding:2rem var(--pad);gap:1.6rem}
  .aside .facts{display:none}
  .grid2{grid-template-columns:1fr}
  .pane{padding:2rem var(--pad)}
}
/* 두 칸짜리 줄은 480px 아래에서만 접는다. 그 위에서는 나란히 두는 편이
   화면을 덜 길게 만든다 — 폼이 길어지면 끝까지 안 내려간다. */
@media(max-width:480px){
  .row2{grid-template-columns:1fr}
  .page-hd h1{font-size:25px}
  .card-bd{padding:1.1rem}
  .card-hd{padding:.9rem 1.1rem}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── 약관 · 방침 문서 ────────────────────────────────────── */
.doc-hd{border-bottom:1px solid var(--line);background:var(--bg2)}
.doc-hd-in{width:min(760px,100% - var(--pad)*2);margin-inline:auto;padding:2.6rem 0 2.2rem}
.doc-hd .wm{font-size:20px;margin-bottom:1.6rem}
.doc-hd h1{font-size:clamp(26px,3.4vw,36px);font-weight:850;letter-spacing:-.04em;margin:0 0 .5rem}
.doc-hd .meta{margin:0;font-size:14px;color:var(--ink2)}
.doc-nav{display:flex;gap:.4rem;margin-top:1.4rem;flex-wrap:wrap}
.doc-nav a{font-size:13.5px;font-weight:700;padding:.42rem .85rem;border-radius:var(--r-xs);
  border:1px solid var(--line);background:#fff;color:var(--ink2);transition:.2s var(--e)}
.doc-nav a:hover{border-color:var(--ink);color:var(--ink)}
.doc-nav a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.doc{width:min(760px,100% - var(--pad)*2);margin:2.8rem auto 5rem;font-size:15.5px;line-height:1.85}
.doc h2{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:2.6rem 0 .7rem;padding-top:1.4rem;
  border-top:1px solid var(--line2)}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.doc h3{font-size:16px;font-weight:750;margin:1.5rem 0 .4rem}
.doc p{margin:0 0 .8rem;color:var(--ink2)}
.doc ol,.doc ul{margin:0 0 .9rem;padding-left:1.35rem;color:var(--ink2)}
.doc li{margin-bottom:.3rem}
.doc li::marker{color:var(--ink3)}
.doc strong{color:var(--ink);font-weight:750}
.doc-tw{overflow-x:auto;margin:.6rem 0 1.2rem}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;margin:.6rem 0 1.2rem;
  border:1px solid var(--line);border-radius:var(--r-xs);overflow:hidden}
/* 약관 본문의 표는 감싸는 칸 없이 그대로 놓여 있다. 좁은 화면에서 칸을 더 줄이면
   글자가 세로로 한 자씩 쌓이므로, 표 자체가 안에서 옆으로 밀리게 둔다. */
@media(max-width:560px){
  .doc table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:var(--r-xs)}
  .doc table tbody,.doc table thead{display:table;width:100%;min-width:20rem}
  .doc td,.doc th{font-size:13.5px;padding:.55rem .65rem}
}
.doc th{background:var(--bg2);font-weight:750;font-size:13px;text-align:left;padding:.65rem .85rem;
  border-bottom:1px solid var(--line)}
.doc td{padding:.65rem .85rem;border-bottom:1px solid var(--line2);color:var(--ink2);vertical-align:top}
.doc tr:last-child td{border-bottom:0}
.doc .box{background:var(--y-t);border-radius:var(--r-sm);padding:1rem 1.15rem;margin:1.1rem 0;
  font-size:14.5px;color:#6B4E05}
.doc .box b{color:#4A3400}
.doc-ft{border-top:1px solid var(--line);padding:2rem 0 3rem;font-size:13.5px;color:var(--ink3)}
.doc-ft-in{width:min(760px,100% - var(--pad)*2);margin-inline:auto;display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between}