/* 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);
  --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;
}
*,*::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}
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}

/* ── 입력 ───────────────────────────────────────────────── */
.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}
.field .hint.bad{color:var(--err)}
.field .hint.good{color:var(--ok)}
/* type 을 하나씩 열거하면 type 이 없는 input 과 number·datetime-local 이 빠진다.
   실제로 그래서 이름 칸만 작고 날짜 칸이 브라우저 기본 모양으로 나왔다.
   고를 것을 빼는 쪽이 안전하다. */
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:15.5px;line-height:1.4;padding:.72rem .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}
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}
/* 날짜·시간 칸의 기본 달력 아이콘 색을 본문 색에 맞춘다 */
input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:.9}
select{appearance:none;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}
.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}
.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:15.5px;font-weight:600}
.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)}

/* ── 버튼 ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:15.5px;
  font-weight:700;padding:.82rem 1.3rem;border-radius:var(--r-sm);transition:.2s var(--e)}
.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%}
.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}
.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:20}
.hd-in{width:min(1080px,100% - 2.5rem);margin-inline:auto;display:flex;align-items:center;gap:1rem;height:64px}
.hd .wm{font-size:20px;margin-right:auto}
.who{display:flex;align-items:center;gap:.6rem;font-size:14px;color:var(--ink2)}
.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% - 2.5rem);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);box-shadow:var(--sh);overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line2);font-size:15px;font-weight:750}
.card-bd{padding:1.4rem}
.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:.75rem 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}
.dl dd{margin:0;font-weight:700;letter-spacing:-.02em}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:12px;font-weight:750;
  padding:.26rem .62rem;border-radius:var(--r-xs)}
.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}
.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}
.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 1.75rem;gap:1.6rem}
  .aside .facts{display:none}
  .grid2{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
}
@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% - 2.5rem);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% - 2.5rem);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 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}
.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% - 2.5rem);margin-inline:auto;display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between}