@import url('https://fonts.googleapis.com/css2?family=Song+Myung&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ============================================================
   운도감 결제 페이지 — C-refined Twilight (랜딩과 동일 미감)
   ============================================================ */
:root{
  --bg:#15101f; --bg-2:#181228; --bg-card:#1e1733; --bg-glow:#2b1f4c;
  --ink:#f1ecf6; --pearl:#ece7f2; --muted:#9a90ac; --muted2:#7a7191;
  --rose:#d9b6a3; --rose-bright:#e7c9b8; --lilac:#b9a8d6;
  --sage:#7fb39a; --coral:#d98c84; --teal:#6f9fb8;
  --gold:#d9b6a3; --cream:#ece7f2; --sand:#9a90ac;
  --hair:rgba(217,182,163,.20); --hair-cool:rgba(155,144,172,.13);
  --r:18px; --r-sm:12px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Pretendard',-apple-system,sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul,ol,dl{margin:0;padding:0;list-style:none} p{margin:0}
[hidden]{display:none!important}
::selection{background:rgba(217,182,163,.28);color:#fff}
h1,h2,h3,h4{font-family:'Song Myung',serif;font-weight:400;color:var(--ink);line-height:1.42;letter-spacing:-.01em;margin:0}
strong,b{color:var(--pearl);font-weight:600}

.payment-shell{max-width:540px;margin:0 auto;background:var(--bg);min-height:100vh;padding-bottom:60px;position:relative;overflow:hidden}

/* eyebrow 패턴 (span 라벨들) */
.payment-hero .pill,
.payment-artifact-copy>span,.payment-map-copy>span,.payment-choice-copy>span,
.trust-stack-head>span,.card-head>span,.selected-product-receipt>span,
.payment-unlock-list article>span,.choice-badge,.payment-choice-proof article>span{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;letter-spacing:1.5px;color:var(--rose);text-transform:uppercase;font-weight:600;
}

/* ---- topbar ---- */
.payment-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;padding:13px 22px;background:rgba(21,16,31,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair-cool)}
.payment-topbar .back-link{font-size:20px;color:var(--muted);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hair-cool);border-radius:50%;flex:0 0 auto}
.payment-topbar p{font-family:'Song Myung',serif;font-size:12px;letter-spacing:4px;color:var(--rose)}
.payment-topbar h1{font-size:17px;margin-top:1px}

section{padding:42px 22px;border-bottom:1px solid var(--hair-cool)}
section h2{font-size:clamp(21px,5.4vw,27px)}

/* ---- hero ---- */
.payment-hero{background:radial-gradient(120% 70% at 50% -10%,var(--bg-glow),transparent 60%),var(--bg-2);text-align:left}
.payment-hero .pill{display:inline-block;margin-bottom:14px;font-style:normal;border:1px solid var(--hair);border-radius:999px;padding:5px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.2px;text-transform:none}
.payment-hero h2{font-size:clamp(23px,6vw,30px);line-height:1.36}
.payment-hero>p[data-pg-hero-lead]{color:var(--muted);font-size:14px;line-height:1.85;margin-top:14px}

/* ---- artifact preview ---- */
.payment-artifact-preview{display:flex;flex-direction:column;gap:22px}
.payment-artifact-copy>span{display:block;margin-bottom:9px}
.payment-artifact-copy h2{font-size:20px;line-height:1.4}
.payment-artifact-copy p{color:var(--muted);font-size:13.5px;line-height:1.8;margin-top:10px}
.undogam-artifact-preview{margin:0;border:1px solid var(--hair);border-radius:var(--r);padding:24px;background:linear-gradient(160deg,rgba(43,31,76,.5),rgba(30,23,51,.7));text-align:center;position:relative;overflow:hidden}
.undogam-artifact-preview::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 0%,rgba(217,182,163,.1),transparent 70%)}
.undogam-artifact-preview img{width:108px;margin:0 auto 14px;position:relative;filter:drop-shadow(0 8px 22px rgba(217,182,163,.25))}
.undogam-artifact-preview figcaption{position:relative}
.undogam-artifact-preview figcaption strong{display:block;font-family:'Song Myung',serif;font-size:16px;color:var(--ink);font-weight:400;margin-bottom:5px}
.undogam-artifact-preview figcaption span{font-size:12px;color:var(--muted);line-height:1.7}

/* ---- continuation map ---- */
.payment-map-copy>span{display:block;margin-bottom:9px}
.payment-map-copy h2{font-size:21px;line-height:1.4}
.payment-map-copy>p,.payment-continuation-map [data-payment-map-body]{color:var(--muted);font-size:13.5px;line-height:1.8;margin-top:10px}
.payment-month-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0}
.payment-month-strip li{border:1px solid var(--hair-cool);border-radius:var(--r-sm);padding:13px 8px;text-align:center;background:var(--bg-card)}
.payment-month-strip li span{display:block;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--pearl);margin-bottom:5px}
.payment-month-strip li strong{font-size:10.5px;color:var(--muted2);font-weight:500;line-height:1.4}
.payment-month-strip li.is-open{border-color:var(--rose);background:rgba(217,182,163,.08)}
.payment-month-strip li.is-open span{color:var(--rose-bright)}
.payment-month-strip li.is-good span{color:var(--sage)}
.payment-month-strip li.is-caution span{color:var(--coral)}
.payment-month-strip li.is-locked{background:rgba(255,255,255,.02)}
.payment-month-strip li.is-locked span{color:var(--lilac)}
.payment-unlock-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hair-cool)}
.payment-unlock-list article{display:grid;grid-template-columns:30px 1fr;column-gap:13px;padding:15px 0;border-bottom:1px solid var(--hair-cool)}
.payment-unlock-list article>span{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--rose);grid-row:span 2;padding-top:3px;letter-spacing:0;text-transform:none}
.payment-unlock-list article strong{font-size:14.5px;color:var(--pearl)}
.payment-unlock-list article p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.7}

/* ---- choice desk ---- */
.payment-choice-copy>span{display:block;margin-bottom:9px}
.payment-choice-copy h2{font-size:21px;line-height:1.42}
.payment-choice-copy p{color:var(--muted);font-size:13.5px;line-height:1.8;margin-top:10px}
.payment-choice-grid{display:flex;flex-direction:column;gap:13px;margin:22px 0}
.product-choice-card{text-align:left;background:var(--bg-card);border:1px solid var(--hair-cool);border-radius:var(--r);padding:20px;transition:border-color .18s,box-shadow .18s,transform .18s;position:relative}
.product-choice-card .choice-badge{display:inline-block;margin-bottom:10px;font-style:normal;border:1px solid var(--hair-cool);border-radius:999px;padding:3px 11px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.5px;text-transform:none;color:var(--muted)}
.product-choice-card strong{display:block;font-family:'Song Myung',serif;font-size:18px;font-weight:400;color:var(--ink)}
.product-choice-card em{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:22px;color:var(--rose);margin:6px 0 10px}
.product-choice-card>p{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:12px}
.product-choice-card ul{display:flex;flex-direction:column;gap:7px}
.product-choice-card li{font-size:12.5px;color:var(--pearl);padding-left:16px;position:relative;line-height:1.6}
.product-choice-card li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--rose)}
.product-choice-card.is-selected{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose),0 12px 34px rgba(0,0,0,.3)}
.product-choice-card.is-selected .choice-badge{border-color:var(--rose);color:var(--rose-bright);background:rgba(217,182,163,.08)}
.product-choice-card.is-featured{background:radial-gradient(130% 100% at 50% 0%,var(--bg-glow),var(--bg-card) 72%)}
.product-choice-card.is-featured .choice-badge{border-color:var(--lilac);color:var(--lilac)}
.payment-choice-proof{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.payment-choice-proof article{border:1px solid var(--hair-cool);border-radius:var(--r-sm);padding:14px;background:rgba(255,255,255,.02)}
.payment-choice-proof article>span{font-style:normal;display:block;font-size:11px;letter-spacing:.3px;text-transform:none;color:var(--rose);margin-bottom:6px;font-family:'IBM Plex Mono',monospace}
.payment-choice-proof article p{font-size:12px;color:var(--muted);line-height:1.65}

/* ---- checkout card (Toss) ---- */
.checkout-card{background:linear-gradient(180deg,var(--bg-card),var(--bg-2));border:1px solid var(--hair);border-radius:var(--r);margin:22px;padding:24px 22px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.checkout-card .card-head span{display:block;font-style:normal;margin-bottom:7px}
.checkout-card .card-head strong{font-family:'Song Myung',serif;font-size:19px;font-weight:400;color:var(--ink);line-height:1.4}
.checkout-card [data-pg-status-copy]{font-size:12.5px;color:var(--muted);line-height:1.8;margin-top:12px}
.selected-product-receipt{border:1px solid var(--hair-cool);border-radius:var(--r-sm);padding:16px;margin:16px 0;background:rgba(255,255,255,.02)}
.selected-product-receipt span{font-style:normal;display:block;font-size:11px;color:var(--rose);margin-bottom:6px;font-family:'IBM Plex Mono',monospace;text-transform:none;letter-spacing:0}
.selected-product-receipt strong{font-family:'Song Myung',serif;font-size:16px;font-weight:400;color:var(--ink)}
.selected-product-receipt p{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.7}
.pg-readiness{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.pg-readiness div{text-align:center;border:1px solid var(--hair-cool);border-radius:var(--r-sm);padding:13px 6px;background:var(--bg-card)}
.pg-readiness div strong{display:block;font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--rose);margin-bottom:5px}
.pg-readiness div span{font-size:11px;color:var(--muted)}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.payment-action{display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid var(--hair-cool);border-radius:var(--r-sm);padding:13px 8px;font-size:12.5px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.02);transition:opacity .15s}
.payment-action.is-locked{opacity:.5;cursor:default}
.toss-widget-panel{margin-top:16px;border-top:1px solid var(--hair-cool);padding-top:16px}
.toss-widget-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.toss-widget-head strong{font-family:'Song Myung',serif;font-size:15px;font-weight:400;color:var(--ink)}
.toss-widget-head span{font-family:'IBM Plex Mono',monospace;font-size:18px;color:var(--rose)}
.toss-widget-box{margin-bottom:12px;border-radius:var(--r-sm);overflow:hidden}
.toss-widget-button{width:100%;background:linear-gradient(135deg,var(--rose-bright),var(--rose));color:#1a1322;border:none;border-radius:999px;padding:16px;font-weight:700;font-size:15px;box-shadow:0 10px 30px rgba(217,182,163,.25);transition:transform .15s,box-shadow .15s,opacity .15s}
.toss-widget-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 14px 38px rgba(217,182,163,.34)}
.toss-widget-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.payment-mini-note{font-size:11.5px;color:var(--muted2);margin-top:14px;line-height:1.7;text-align:center}

/* ---- trust stack ---- */
.trust-stack-head>span{display:block;font-style:normal;margin-bottom:9px}
.trust-stack-head h2{font-size:21px;line-height:1.42}
.trust-stack-head>p{color:var(--muted);font-size:13.5px;line-height:1.85;margin-top:10px}
.trust-action-grid{display:flex;flex-direction:column;gap:13px;margin:22px 0}
.trust-action-card{background:var(--bg-card);border:1px solid var(--hair-cool);border-radius:var(--r);padding:20px}
.trust-action-card.is-primary{border-color:var(--hair);box-shadow:0 0 0 1px var(--hair)}
.trust-action-card>div>span{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--rose);border:1px solid var(--hair-cool);border-radius:999px;padding:3px 11px;margin-bottom:10px}
.trust-action-card h3{font-family:'Song Myung',serif;font-size:18px;font-weight:400;color:var(--ink)}
.trust-action-card>div>p{font-size:13px;color:var(--muted);line-height:1.75;margin-top:8px}
.trust-receipt-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;padding:14px 0;border-top:1px solid var(--hair-cool);border-bottom:1px solid var(--hair-cool)}
.trust-receipt-mini div dt{font-size:10.5px;color:var(--muted2);margin-bottom:4px}
.trust-receipt-mini div dd{font-size:12.5px;color:var(--pearl)}
.trust-card-actions{display:flex;gap:10px;align-items:stretch}
.trust-card-actions button{flex:0 0 auto;background:transparent;border:1px solid var(--hair-cool);border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:600;padding:0 16px;transition:border-color .15s,color .15s}
.trust-card-actions button:hover{border-color:var(--hair);color:var(--pearl)}
.trust-card-actions a{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rose-bright),var(--rose));color:#1a1322;border-radius:999px;padding:14px;font-weight:700;font-size:14px;text-align:center;box-shadow:0 8px 24px rgba(217,182,163,.22)}
.trust-action-card:not(.is-primary) .trust-card-actions a{background:transparent;border:1px solid var(--rose);color:var(--rose-bright);box-shadow:none}
.trust-accordion-list{display:flex;flex-direction:column;gap:10px}
.trust-disclosure{border:1px solid var(--hair-cool);border-radius:var(--r-sm);padding:4px 16px;background:rgba(255,255,255,.02)}
.trust-disclosure summary{font-size:14px;color:var(--pearl);font-weight:600;padding:13px 0;cursor:pointer;list-style:none;position:relative;padding-right:24px}
.trust-disclosure summary::-webkit-details-marker{display:none}
.trust-disclosure summary::after{content:"+";position:absolute;right:0;top:11px;color:var(--rose);font-size:18px;font-weight:300}
.trust-disclosure[open] summary::after{content:"−"}
.trust-disclosure ul{display:flex;flex-direction:column;gap:8px;padding:0 0 14px}
.trust-disclosure li{font-size:12.5px;color:var(--muted);line-height:1.7;padding-left:14px;position:relative}
.trust-disclosure li::before{content:"·";position:absolute;left:3px;color:var(--rose)}
.trust-disclosure>p{font-size:12.5px;color:var(--muted);line-height:1.8;padding:0 0 14px}
.policy-links{display:flex;flex-wrap:wrap;gap:8px 16px;padding-bottom:14px}
.policy-links a{font-size:12px;color:var(--muted2);text-decoration:underline;text-underline-offset:3px}
.payment-compact-steps{display:flex;gap:8px;padding:0 0 12px}
.payment-compact-steps li{flex:1;text-align:center;border:1px solid var(--hair-cool);border-radius:var(--r-sm);padding:11px 4px}
.payment-compact-steps li strong{display:block;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--rose);margin-bottom:4px}
.payment-compact-steps li span{font-size:11px;color:var(--muted)}
.trust-channel-link{display:inline-block;margin-bottom:12px;font-size:12.5px;color:var(--rose-bright);border:1px solid var(--hair-cool);border-radius:999px;padding:9px 16px}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);max-width:88%;background:var(--bg-card);border:1px solid var(--hair);color:var(--ink);font-size:13px;padding:13px 20px;border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100}
.toast.show,.toast.is-visible,.toast[data-visible="true"]{opacity:1;transform:translateX(-50%) translateY(0)}

@media(min-width:600px){
  section,.checkout-card{padding-left:40px;padding-right:40px}
  .checkout-card{margin-left:40px;margin-right:40px}
}