/**
 * Payment method list and payment result screens — design delivery 「납품-결제수단」 2026-09-15.
 * Tokens only (tds-tokens.css). Scoped to .kfpm so shared .kfr rules cannot override it.
 * Mobile canvas 390; PC ≥768 is a single 560 column of cards.
 */

/* ── Page ───────────────────────────────────────────────────────────── */
body:has(.kfpm){background:var(--adaptiveBackground,#fff)}
.kfr.kfpm{background:var(--adaptiveBackground,#fff);color:var(--adaptiveGrey900,#191f28);min-height:100vh;
  font-size:16px;line-height:24px;word-break:keep-all;overflow-wrap:break-word}
.kfpm :where(h1,h2,p){margin:0}
.kfpm :where(button){font:inherit;color:inherit}

/* ② AppBar 56 */
.kfpm-bar{position:sticky;top:0;z-index:50;height:56px;display:flex;align-items:center;padding:0 12px;
  background:var(--adaptiveBackground,#fff)}
.kfpm-bar__back{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--adaptiveGrey900,#191f28);text-decoration:none}
.kfpm-bar__t{margin:0 0 0 8px;font-size:17px;line-height:25px;font-weight:600;color:var(--adaptiveGrey900,#191f28)}

/* ③ Amount summary */
.kfpm-sum{padding:6px 20px 13px}
.kfpm-sum__what{font-size:15px;line-height:22px;color:var(--adaptiveGrey600,#6b7684);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfpm-sum__amt{margin-top:4px;font-size:28px;line-height:38px;font-weight:700;letter-spacing:-.01em;
  color:var(--adaptiveGrey900,#191f28)}
.kfpm-sum__calc{margin-top:6px;padding:0;border:0;background:none;display:flex;width:fit-content;align-items:center;gap:6px;
  font-size:14px;line-height:20px;color:var(--adaptiveGrey500,#8b95a1);cursor:pointer}
.kfpm-sum__calc .kfpm-chev{flex:none}
.kfpm-sum__calc[aria-expanded="true"] .kfpm-chev{transform:rotate(90deg)}
.kfpm-sum__break{padding-top:12px}
.kfpm-sum__break .kfr-pay__row:first-child{padding-top:0}

.kfpm-band{height:8px;background:var(--adaptiveGreyBackground,#f2f4f6)}

/* ④ Method list */
.kfpm-pick{padding:12px 20px 0}
/* Bottom inset: design uses 10 + 24 home indicator on iPhone and 20 on Android (00 §1).
   --kfpm-sab lets the pixel harness simulate the iPhone inset; real devices use env(). */
.kfpm{--kfpm-inset:max(20px, calc(10px + var(--kfpm-sab, min(env(safe-area-inset-bottom), 24px))))}
.kfpm-main{padding-bottom:calc(68px + var(--kfpm-inset))}
.kfpm-h{margin-bottom:8px;font-size:19px;line-height:26px;font-weight:700;color:var(--adaptiveGrey900,#191f28)}

.kfpm-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:6px 0;
  border:0;background:none;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kfpm-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.kfpm-nm{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;
  font-size:16px;line-height:23px;font-weight:600;color:var(--adaptiveGrey900,#191f28)}
.kfpm-fav{flex:none;width:20px;height:20px;margin-right:2px;border-radius:5px;background:#fff;object-fit:cover;
  box-shadow:0 0 0 1px var(--adaptiveGreyOpacity100,rgba(2,32,71,.05))}
.kfpm-fav--line{display:inline-flex;align-items:center;justify-content:center;color:var(--adaptiveGrey700,#4e5968)}
.kfpm-ds{margin-top:2px;font-size:13px;line-height:19px;color:var(--adaptiveGrey600,#6b7684)}
.kfpm-row input{position:absolute;right:0;top:50%;width:24px;height:24px;margin:-12px 0 0;opacity:0;pointer-events:none}
.kfpm-rd{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--adaptiveGrey300,#d1d6db);
  display:flex;align-items:center;justify-content:center}
.kfpm-rd__ck{display:none}
.kfpm-row input:checked + .kfpm-rd{border-color:var(--adaptiveBlue500,#3182f6);background:var(--adaptiveBlue500,#3182f6)}
.kfpm-row input:checked + .kfpm-rd .kfpm-rd__ck{display:block}
.kfpm-row input:focus-visible + .kfpm-rd{outline:2px solid var(--adaptiveBlue500,#3182f6);outline-offset:2px}
.kfpm-fold .kfpm-chev,.kfpm-go .kfpm-chev{flex:none;color:var(--adaptiveGrey500,#8b95a1)}
.kfpm-lh{padding:10px 0 2px;font-size:13px;line-height:19px;font-weight:600;color:var(--adaptiveGrey500,#8b95a1)}
.kfpm-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;
  background:var(--tGreyBadge,rgba(78,89,104,.16));font-style:normal;font-size:12px;line-height:22px;font-weight:600;
  color:var(--adaptiveGrey700,#4e5968)}

/* Re-entry with an issued virtual account (P-10) */
.kfpm-acct{display:flex;align-items:center;gap:12px;margin:0 0 6px;padding:12px 14px;border-radius:14px;
  background:var(--adaptiveBlue50,#e8f3ff);text-decoration:none}
.kfpm-acct .kfpm-ds{color:var(--adaptiveGrey700,#4e5968)}
.kfpm-acct .kfpm-chev{flex:none;color:var(--adaptiveGrey700,#4e5968)}

.kfpm-note{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--adaptiveBlue50,#e8f3ff);
  font-size:14px;line-height:21px;color:var(--adaptiveGrey800,#333d4b)}
.kfpm-confirm{padding:10px 0;text-align:center;font-size:13px;line-height:19px;color:var(--adaptiveGrey500,#8b95a1)}

/* P-7 processing: only the button shows progress; the list is locked */
.kfpm.is-busy .kfpm-list,.kfpm.is-busy .kfpm-note,.kfpm.is-busy .kfpm-confirm{opacity:.5;pointer-events:none}

/* ⑤ BottomCTA */
.kfpm-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 20px var(--kfpm-inset);
  background:var(--adaptiveBackground,#fff);border-top:1px solid var(--adaptiveHairlineBorder,#e5e8eb)}
.kfpm-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin:0;padding:0 16px;
  border:0;border-radius:16px;background:var(--adaptiveBlue500,#3182f6);color:#fff;
  font-size:17px;line-height:25px;font-weight:600;text-decoration:none;cursor:pointer}
.kfpm-btn[aria-busy="true"]{opacity:.6;cursor:default}
.kfpm-spin{flex:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:kfpmSpin .8s linear infinite}
@keyframes kfpmSpin{to{transform:rotate(360deg)}}
.kfpm-sub{display:flex;align-items:center;justify-content:center;height:48px;
  font-size:15px;line-height:22px;font-weight:600;color:var(--adaptiveGrey600,#6b7684);text-decoration:none}

/* ── Dialog · Toast ────────────────────────────────────────────────── */
.kfpm-dim{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:0 32px;
  background:var(--tDimmed,rgba(0,0,0,.2))}
.kfpm-dim[hidden]{display:none}
.kfpm-dlg{width:100%;padding:28px 24px 15px;border-radius:20px;background:var(--adaptiveBackground,#fff);text-align:center}
.kfpm-dlg__t{font-size:18px;line-height:25px;font-weight:700;color:var(--adaptiveGrey900,#191f28)}
.kfpm-dlg__b{margin-top:8px;font-size:15px;line-height:22px;color:var(--adaptiveGrey700,#4e5968)}
.kfpm-dlg__btns{display:flex;margin-top:20px;border-top:1px solid var(--adaptiveHairlineBorder,#e5e8eb)}
.kfpm-dlg__btns button{flex:1;height:52px;border:0;background:none;font-size:17px;line-height:25px;font-weight:600;
  color:var(--adaptiveBlue500,#3182f6);cursor:pointer}
.kfpm-dlg__btns button[hidden]{display:none}
.kfpm-dlg__btns .kfpm-dlg__sub{color:var(--adaptiveGrey600,#6b7684);border-right:1px solid var(--adaptiveHairlineBorder,#e5e8eb)}
.kfpm-toast{position:fixed;left:16px;right:16px;bottom:44px;z-index:110;padding:16px 18px;border-radius:14px;
  background:var(--tToastBg,rgba(25,31,40,.86));color:#fff;font-size:15px;line-height:22px}
.kfpm-toast[hidden]{display:none}

/* ── Result screens ────────────────────────────────────────────────── */
.kfpm-cta--fixed{position:fixed}
.kfpm-cta--two .kfpm-sub{margin-top:10px}
.kfpm-cta--flat{border-top:0}
.kfpm-res--timeout .kfpm-res__main{min-height:calc(100vh - 68px - var(--kfpm-inset))}
.kfpm-res--timeout .kfpm-res__b{margin-top:12px}
.kfpm-page{padding:20px 20px calc(86px + var(--kfpm-inset))}
.kfpm-page__t{font-size:24px;line-height:33px;font-weight:700;letter-spacing:-.01em;color:var(--adaptiveGrey900,#191f28)}

/* R-1 */
.kfpm-res__main{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 32px;text-align:center}
.kfpm-loader{display:block;width:40px;height:40px;border-radius:50%;
  border:3.5px solid var(--adaptiveGrey200,#e5e8eb);border-top-color:var(--adaptiveBlue500,#3182f6);margin-bottom:20px;
  animation:kfpmSpin .9s linear infinite}
.kfpm-res__t{font-size:19px;line-height:26px;font-weight:700;color:var(--adaptiveGrey900,#191f28)}
.kfpm-res__b{margin-top:6px;font-size:15px;line-height:22px;color:var(--adaptiveGrey600,#6b7684)}

/* F-1 */
.kfpm-fail__lead{margin-top:8px;font-size:17px;line-height:24px;font-weight:600;color:var(--adaptiveBlue700,#1b64da)}
.kfpm-fail__why{margin-top:8px;font-size:15px;line-height:22px;color:var(--adaptiveGrey600,#6b7684)}
.kfpm-fail__keep{margin-top:20px;padding:12px 14px;border-radius:12px;background:var(--adaptiveBlue50,#e8f3ff);
  font-size:14px;line-height:21px;color:var(--adaptiveGrey800,#333d4b)}
.kfpm-fail__lh{padding:22px 0 4px;font-size:13px;line-height:19px;font-weight:600;color:var(--adaptiveGrey500,#8b95a1)}
.kfpm-fail__help{display:block;margin-top:7px;padding:10px 0;text-align:center;font-size:15px;line-height:22px;
  color:var(--adaptiveGrey600,#6b7684);text-decoration:none}

/* D-1 */
.kfpm-dep__lb{margin-top:8px;font-size:14px;line-height:21px;color:var(--adaptiveGrey600,#6b7684)}
.kfpm-dep__sum{margin-top:0;font-size:26px;line-height:35px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--adaptiveGrey900,#191f28)}
.kfpm-dep__over{margin-top:10px;font-size:16px;line-height:24px;color:var(--adaptiveGrey800,#333d4b)}
.kfpm-dep__acctlb{margin-top:18px;font-size:14px;line-height:21px;color:var(--adaptiveGrey600,#6b7684)}
.kfpm-acctbox{margin-top:8px;display:flex;flex-direction:column;gap:11px;padding:18px 18px 17px;border-radius:16px;
  background:var(--adaptiveGrey50,#f9fafb);border:1px solid var(--adaptiveHairlineBorder,#e5e8eb)}
.kfpm-dep.is-over .kfpm-acctbox{opacity:.45}
.kfpm-acctbox__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kfpm-acctbox__row span{font-size:14px;line-height:20px;color:var(--adaptiveGrey600,#6b7684)}
.kfpm-acctbox__row b{display:inline-flex;align-items:center;gap:8px;font-size:16px;line-height:20px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--adaptiveGrey900,#191f28)}
.kfpm-copy{display:inline-flex;align-self:flex-start;margin-top:1.5px;padding:0;border:0;background:none;color:var(--adaptiveGrey600,#6b7684);cursor:pointer}
.kfpm-dep__only{margin-top:10px;font-size:14px;line-height:21px;color:var(--adaptiveGrey700,#4e5968)}
.kfpm-dep__due{margin-top:18px;font-size:15px;line-height:22px;color:var(--adaptiveGrey800,#333d4b)}

/* ── PC: single 560 column of cards ────────────────────────────────── */
@media (min-width:768px){
  body:has(.kfpm){background:var(--adaptiveGreyBackground,#f2f4f6)}
  .kfr.kfpm{background:var(--adaptiveGreyBackground,#f2f4f6);min-height:0}
  .kfpm-bar{display:none}
  .kfpm-main{max-width:560px;margin:0 auto;padding:40px 0}
  .kfpm-sum,.kfpm-pick{padding:28px;border-radius:20px;background:var(--adaptiveBackground,#fff);
    box-shadow:0 1px 3px rgba(0,23,51,.08)}
  .kfpm-sum{padding-bottom:26.5px}
  .kfpm-sum__amt{font-size:30px;line-height:40px}
  .kfpm-band{height:16px;background:none}
  .kfpm-confirm{padding:14px 0 4px}
  .kfpm-cta{position:static;margin-top:8px;padding:0;border:0;background:none}
  .kfpm-dlg{max-width:400px}
  .kfpm-page{max-width:560px;margin:0 auto;padding-top:40px}
  .kfpm-cta--fixed{position:static;max-width:560px;margin:0 auto;padding:0 0 40px}
}