/* Paynt 결제창 — 판매자가 꾸미는 자체 위젯. 상품 화면과 대시보드 미리보기가 같이 쓴다.
   색·테마·레이아웃은 .pc 의 변수로만 바뀐다. 마크업은 checkout-ui.js 가 그린다. */
.pc{
  --pc-bg:#fff; --pc-bg2:#F7F7F9; --pc-ink:#141418; --pc-ink2:#6C6B75; --pc-ink3:#9E9DA6; --pc-line:#E9E8EE;
  --pc-cut:#E5372B; --pc-r:18px; --pc-r2:12px;
  --pc-btn:#5B3DF5; --pc-btn-ink:#fff;
  color:var(--pc-ink);font-family:var(--f,"Wanted Sans",-apple-system,sans-serif);letter-spacing:-.01em;
  display:grid;gap:12px}
.pc--dark{--pc-bg:#161618; --pc-bg2:#1F1F23; --pc-ink:#F4F4F6; --pc-ink2:#A6A6AF; --pc-ink3:#6F6F78; --pc-line:#2C2C32; --pc-cut:#FF5A4E}
.pc-sec{background:var(--pc-bg);border:1px solid var(--pc-line);border-radius:var(--pc-r);padding:20px 20px 18px}
.pc--line .pc-sec{border:0;border-radius:0;padding:14px 0 16px;border-bottom:1px solid var(--pc-line);background:transparent}
.pc--line{background:var(--pc-bg);border:1px solid var(--pc-line);border-radius:var(--pc-r);padding:6px 20px 20px;gap:0}
.pc--line .pc-foot{padding-top:18px}
.pc-h{font-size:13px;font-weight:700;color:var(--pc-ink2);margin-bottom:12px;letter-spacing:.01em}
.pc-row,.sum-row{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--pc-ink);padding:5px 0;line-height:1.45}
.pc-row span,.sum-row span{color:var(--pc-ink2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.pc-row b,.sum-row b{font-weight:700;flex:none}
.sum-row.cut b,.sum-row.cut span{color:var(--pc-cut)}
.sum-total{display:none}
.pc-note{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:#96690A;background:#FEF3D6;padding:8px 10px;border-radius:9px}
.pc--dark .pc-note{background:#3A2E0E;color:#F5CB63}
.pc-total{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:12px;padding-top:14px;border-top:1px solid var(--pc-line)}
.pc-total span{font-size:15px;font-weight:750}
.pc-total s{display:block;text-decoration:none;font-size:11.5px;font-weight:500;color:var(--pc-ink3);margin-top:2px}
.pc-total b{font-size:20px;font-weight:850;letter-spacing:-.03em}
.pc-ms{display:grid;gap:4px}
.pc-m{display:flex;align-items:center;gap:11px;padding:11px 8px;border-radius:var(--pc-r2);cursor:pointer;
  transition:background .15s var(--e,ease);position:relative}
.pc-m:hover{background:var(--pc-bg2)}
.pc-m input{position:absolute;opacity:0;width:0;height:0}
.pc-rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--pc-ink3);flex:none;position:relative;transition:border-color .15s}
.pc-rd::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--pc-ink);transform:scale(0);transition:transform .18s var(--spring,ease)}
.pc-m:has(input:checked) .pc-rd{border-color:var(--pc-ink)}
.pc-m:has(input:checked) .pc-rd::after{transform:scale(1)}
.pc-m:has(input:focus-visible) .pc-rd{outline:2px solid var(--pc-btn);outline-offset:2px}
.pc-ml{font-size:15px;font-weight:600;color:var(--pc-ink)}
.pc-mk{display:inline-flex;align-items:center;justify-content:center;height:22px;min-width:22px;border-radius:6px;font-style:normal;
  font-size:11px;font-weight:800;letter-spacing:-.02em;padding:0 6px;flex:none;line-height:1}
.pc-mk b{font-weight:900;margin-right:1px}
.mk-ic{color:var(--pc-ink2);padding:0}
.mk-ic svg{width:22px;height:22px}
.mk-toss{background:#0064FF;color:#fff}
.mk-naver{background:#03C75A;color:#fff}
.mk-kakao{background:#FEE500;color:#191919}
.pc-foot{display:grid;gap:10px}
.pc-btn{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border-radius:14px;border:0;cursor:pointer;
  background:var(--pc-btn);color:var(--pc-btn-ink);font:inherit;font-size:16px;font-weight:800;letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:transform .15s var(--e,ease),filter .15s}
.pc-btn:hover{filter:brightness(.96)}
.pc-btn:active{transform:scale(.985)}
.pc-btn:disabled{opacity:.6;cursor:default}
.pc--dark .pc-btn{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pc .pd-legal{color:var(--pc-ink3);margin:2px 0 0}
.pc .pick-wrap{margin:0}
.pc .pc-mid{display:grid;gap:12px}
.pc .field{margin:0}
.pc .field label,.pc .pick-label{color:var(--pc-ink2)}
.pc--dark input:not([type=radio]):not([type=checkbox]),.pc--dark textarea{background:var(--pc-bg2);border-color:var(--pc-line);color:var(--pc-ink)}
.pc--dark .slot,.pc--dark .bump{border-color:var(--pc-line);background:var(--pc-bg2)}
.pc--dark .slot b,.pc--dark .bump b{color:var(--pc-ink)}
.pc--dark .btn-out{border-color:var(--pc-line);color:var(--pc-ink)}
.pc--dark .note-err{background:#3B1B19;color:#FF8A80}
.pc .spin{border-color:var(--pc-btn-ink);border-top-color:transparent}

/* 상품 화면의 옆 칸: 결제창이 들어가면 칸 자체는 투명하게 — 테두리가 두 겹 보인다 */
.pd-buy.has-pc{padding:0;border:0;box-shadow:none;background:transparent}
.pd-buy.has-pc .pd-price{display:none}