/* 골목담아 링크결제 — 공통 토큰 · 바탕 (판매자 앱 · 고객 결제 페이지 공용)
   브랜드: 골목담아 오렌지(BRAND.md #E6532F). 글자 · 버튼 바탕은 흰 바탕 대비 4.5:1 이상인 #B5452A 로 진하게 쓴다.
   고령 사장님 기준: 본문 18px 이상, 주요 버튼 높이 56px 이상, 터치 영역 48px 이상. 모바일 퍼스트(min-width 만). */
:root{
  --brand:#B5452A; --brand-strong:#963820; --brand-soft:#FCEDE6; --brand-mark:#E6532F;
  --ink:#24291F; --ink-2:#4D5446; --ink-3:#6A7262; --line:#E3DDD3; --line-2:#D2CABD;
  --bg:#FFF9F0; --surface:#FFFFFF; --surface-2:#FBF6EE;
  --st-pending:#8A5A00; --st-pending-bg:#FFF1CF;
  --st-paid:#1C6B39;    --st-paid-bg:#E2F3E7;
  --st-canceled:#A8261A;--st-canceled-bg:#FDE7E4;
  --st-expired:#555D68; --st-expired-bg:#ECEEF1;
  --danger:#A8261A; --ok:#1C6B39;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --fs-body:clamp(1.125rem,1.05rem + .4vw,1.1875rem);   /* 18~19px */
  --fs-sub:1rem; --fs-small:.9375rem;
  --fs-title:clamp(1.375rem,1.2rem + 1vw,1.625rem);
  --fs-amount:clamp(2.5rem,1.6rem + 6vw,3.5rem);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --btn-h:60px; --key-h:clamp(56px,8.4vh,72px); --tap:48px;
  --shadow:0 1px 2px rgba(36,41,31,.06),0 6px 20px rgba(36,41,31,.06);
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.55;word-break:keep-all;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%;height:auto}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
button,a,label,h1,h2,h3,strong,b,dd,small,span{overflow-wrap:anywhere}   /* keep-all 이라도 띄어쓰기 없는 긴 낱말은 끊어 넘치지 않게 */
:focus-visible{outline:3px solid var(--brand-strong);outline-offset:2px;border-radius:6px}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:10px 20px;border-radius:var(--r-md);border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:700;font-size:var(--fs-body);text-decoration:none;cursor:pointer;text-align:center;min-width:0;max-width:100%}
.btn svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:active{background:var(--brand-strong)}
.btn.big{min-height:var(--btn-h);width:100%;font-size:1.1875rem;border-radius:var(--r-lg)}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--danger);color:var(--danger);background:var(--surface)}
.btn.danger.solid{background:var(--danger);color:#fff}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn .spin{width:20px;height:20px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{background:none;border:0;padding:12px 8px;min-height:var(--tap);color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* 상태 칩 — 색과 글자를 함께 */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:var(--fs-small);font-weight:700;max-width:100%;min-width:0}
.chip::before{flex:none}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.chip.pending{color:var(--st-pending);background:var(--st-pending-bg)}
.chip.paid{color:var(--st-paid);background:var(--st-paid-bg)}
.chip.canceled{color:var(--st-canceled);background:var(--st-canceled-bg)}
.chip.expired{color:var(--st-expired);background:var(--st-expired-bg)}

/* 안내 띠 */
.note{border-radius:var(--r-md);padding:14px 16px;font-size:var(--fs-sub);line-height:1.6;margin:0 0 var(--sp-4)}
.note.warn{background:var(--st-pending-bg);color:#5C3D00}
.note.bad{background:var(--st-canceled-bg);color:#7A1B12}
.note.info{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.note b{font-weight:800}

/* 정보 목록 */
.facts{margin:0;display:grid;gap:0}
.facts>div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.facts>div:last-child{border-bottom:0}
.facts dt{color:var(--ink-3);font-size:var(--fs-sub);flex:none}
.facts dd{margin:0;text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}