/* 요금 카드 (2026-09-27, Jon "힉스필드처럼") — 요금제마다 고유 색·그라데이션, 굵은 가격·빨간 정가 줄긋기·할인 딱지·절약액·기능 목록.
   색은 전부 토큰: 라이트(기본 :root) / 다크([data-theme="dark"]) 두 벌. 카드 안 글자색은 요금제 색과 짝지은 --pc-ink. */
:root{
  --pc-hot:#E0284F; --pc-hot-ink:#FFFFFF;
  --pc-spot:#0B7F8F; --pc-spot-ink:#FFFFFF; --pc-spot-tint:rgba(11,127,143,.10);
  --pc-fut:#4C7A00; --pc-fut-ink:#FFFFFF; --pc-fut-tint:rgba(98,150,0,.12);
  --pc-gold-a:#F5B83D; --pc-gold-b:#FF7A3D; --pc-bundle-ink:#1A1203; --pc-bundle-tint:rgba(255,122,61,.12);
  --pc-card:var(--panel); --pc-inner:var(--panel-2);
}
:root[data-theme="dark"]{
  --pc-hot:#FF3D6E; --pc-hot-ink:#FFFFFF;
  --pc-spot:#3FD3E0; --pc-spot-ink:#04181B; --pc-spot-tint:rgba(63,211,224,.13);
  --pc-fut:#C8F53A; --pc-fut-ink:#141A02; --pc-fut-tint:rgba(200,245,58,.10);
  --pc-bundle-tint:rgba(255,122,61,.20);
  --pc-card:#111A22; --pc-inner:rgba(255,255,255,.035);
}

/* 위쪽: 월/연 스위치 · 도움말 */
.pc-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:22px}
.pc-switchbox{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pc-switchbox button.lab{border:0;background:none;padding:2px 2px;font-weight:650;color:var(--sub);font-size:14px}
.pc-switchbox button.lab[aria-pressed="true"]{color:var(--ink)}
.pc-switch{position:relative;width:44px;height:24px;border-radius:99px;border:0;padding:0;background:var(--line);transition:background .2s}
.pc-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .2s}
.pc-switch[aria-checked="true"]{background:var(--pc-fut)}
.pc-switch[aria-checked="true"] i{left:23px}
.pc-help{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  text-decoration:none;font-weight:650;font-size:14px}
.pc-help:hover{border-color:var(--sub)}

/* 오픈 가격 마감 · 추천 · 체험 띠 */
.pc-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.pc-strip.launch{border-color:color-mix(in srgb,var(--pc-hot) 45%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--pc-hot) 14%,var(--panel)),var(--panel) 70%)}
.pc-strip .big{font:800 18px/1.2 var(--f-ui);font-stretch:90%}
.pc-strip .clock{font:700 16px/1 var(--f-mono);color:var(--pc-hot)}
.pc-strip .grow{flex:1 1 260px;min-width:0}
.pc-strip.trial .big{font-size:16px}

/* 카드 */
.pc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px;margin-top:16px;align-items:stretch}
.pc{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 20px 20px;border-radius:20px;border:1px solid var(--line);
  background:var(--pc-card);overflow:hidden;min-width:0}
.pc::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(170deg,var(--pc-tint) 0%,transparent 58%)}
.pc>*{position:relative}
.pc--spot_all{--pc-acc:var(--pc-spot);--pc-acc-ink:var(--pc-spot-ink);--pc-tint:var(--pc-spot-tint)}
.pc--auto_sol{--pc-acc:var(--pc-fut);--pc-acc-ink:var(--pc-fut-ink);--pc-tint:var(--pc-fut-tint)}
.pc--bundle{--pc-acc:var(--pc-gold-a);--pc-acc-ink:var(--pc-bundle-ink);--pc-tint:var(--pc-bundle-tint);
  border-color:color-mix(in srgb,var(--pc-gold-b) 60%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--pc-gold-b) 35%,transparent),0 18px 40px -18px color-mix(in srgb,var(--pc-gold-b) 55%,transparent)}
.pc-top{display:grid;gap:4px}
.pc-name{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:800 26px/1.05 var(--f-ui);font-stretch:76%;text-transform:uppercase;letter-spacing:-.005em}
.pc-off,.pc-best{font:800 italic 12px/1 var(--f-ui);padding:4px 7px;border-radius:5px;letter-spacing:.02em;white-space:nowrap;text-transform:none;font-stretch:100%}
.pc-off{background:var(--pc-hot);color:var(--pc-hot-ink)}
.pc-best{background:linear-gradient(90deg,var(--pc-gold-a),var(--pc-gold-b));color:var(--pc-bundle-ink)}
.pc-tag{margin:0;color:var(--sub);font-size:13.5px}
.pc-box{border-radius:14px;background:var(--pc-inner);border:1px solid var(--line-2);padding:14px 16px;display:grid;gap:3px;font-size:13.5px}
.pc-box b{font-size:16px;display:flex;gap:8px;align-items:center}
.pc-box b::before{content:"✦";color:var(--pc-acc);font-size:14px}
.pc-box span{color:var(--sub);padding-left:22px}
.pc-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.pc-price s{color:var(--pc-hot);font:800 24px/1 var(--f-ui);text-decoration-thickness:2px}
.pc-price b{font:800 48px/1 var(--f-ui);font-stretch:88%;letter-spacing:-.02em}
.pc-price small{font-size:13px;color:var(--sub);font-weight:500}
.pc-cta{display:block;width:100%;border:0;border-radius:12px;padding:15px 16px;font:750 16px/1 var(--f-ui);background:var(--pc-acc);color:var(--pc-acc-ink);
  box-shadow:0 4px 0 color-mix(in srgb,var(--pc-acc) 55%,#000);transition:transform .08s,filter .15s}
.pc--bundle .pc-cta{background:linear-gradient(90deg,var(--pc-gold-a),var(--pc-gold-b))}
.pc-cta:hover{filter:brightness(1.06)}
.pc-cta:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--pc-acc) 55%,#000)}
.pc-save{margin:-6px 0 0;text-align:center;font-size:13px;color:var(--sub);padding:10px;border-radius:0 0 12px 12px;background:var(--pc-inner)}
.pc-save b{color:var(--ink)}
.pc-feat{list-style:none;margin:0;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--pc-inner);display:grid;gap:10px;font-size:13.5px}
.pc-feat li{display:flex;gap:10px;align-items:center;justify-content:space-between;min-width:0}
.pc-feat li>span{display:flex;gap:9px;align-items:center;min-width:0}
.pc-feat li>span::before{content:"✓";flex:none;width:18px;text-align:center;font-weight:800;color:var(--pc-acc)}
.pc-feat li.off{color:var(--faint)}
.pc-feat li.off>span::before{content:"✕";color:var(--faint);font-weight:600}
.pc-chip{flex:none;font:700 11.5px/1 var(--f-ui);padding:4px 7px;border-radius:6px;background:color-mix(in srgb,var(--pc-acc) 22%,transparent);color:var(--ink);white-space:nowrap}
.pc-feat li.off .pc-chip{display:none}

/* 체험 카드(카드 줄에 넣지 않고 띠로) */
.pc-strip .btn{white-space:nowrap}

/* 결제 창 머리·계산서 */
.ck-head{display:grid;gap:4px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--pc-card);position:relative;overflow:hidden}
.ck-head::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(170deg,var(--pc-tint) 0%,transparent 70%)}
.ck-head>*{position:relative}
.ck-lines{display:grid;gap:6px;margin-top:8px;font-size:14px}
.ck-lines div{display:flex;justify-content:space-between;gap:10px}
.ck-lines .muted{color:var(--sub)}
.ck-lines .minus{color:var(--pc-hot);font-weight:650}
.ck-lines .total{border-top:1px solid var(--line);padding-top:8px;font:800 20px/1.2 var(--f-ui)}

/* 한국판 지표 이용권 카드(2026-09-27) */
.pc--tv{--pc-acc:var(--pc-gold-a);--pc-acc-ink:var(--pc-bundle-ink);--pc-tint:var(--pc-bundle-tint);border-color:color-mix(in srgb,var(--pc-gold-b) 55%,var(--line))}
.pc--tv .pc-cta{background:linear-gradient(90deg,var(--pc-gold-a),var(--pc-gold-b))}
.pc--soon{border-style:dashed}                                   /* 게시 준비 중 지표(2026-09-28) */
.pc--soon .pc-cta[disabled]{filter:grayscale(1);opacity:.75;cursor:not-allowed}
.pc-grid.one{grid-template-columns:minmax(0,560px)}

/* 결제 방식 · 송금 안내 (2026-09-27: 1 = USDT TRC20, 2 = 카드 준비 중) */
.ck-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
.ck-m{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.ck-m-txt{display:grid;gap:2px;min-width:0;flex:1}
.ck-m-txt b{font-size:15px}
.ck-m-txt small{color:var(--sub);font-size:12.5px}
.ck-m-dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);position:relative}
.ck-m.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--panel))}
.ck-m.on .ck-m-dot{border-color:var(--ok)}
.ck-m.on .ck-m-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ok)}
.ck-m.off{opacity:.62;cursor:not-allowed}
.ck-step{display:grid;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.ck-step .k{font-size:12.5px;color:var(--sub);font-weight:650;letter-spacing:.02em}
.ck-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.ck-row input{flex:1 1 220px;min-width:0}
.ck-small{font-size:12.5px;margin:0}
.ck-addr{grid-template-columns:auto 1fr;align-items:center;gap:14px}
.ck-addr-txt{display:grid;gap:6px;min-width:0;justify-items:start}
.ck-qr{width:128px;height:128px;border-radius:10px;background:#fff;padding:6px;border:1px solid var(--line)}
.ck-state{margin:0;font-weight:650;color:var(--ok)}
.ck-state:empty{display:none}
.ck-claim{border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
.ck-fee{display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);font-size:13.5px;line-height:1.55}
.ck-fee b{color:var(--warn);font-size:14.5px}
.ck-fee ul{margin:0;padding-left:18px;display:grid;gap:4px}
.ck-claim summary{cursor:pointer;font-weight:650;font-size:13.5px}
.ck-claim[open] summary{margin-bottom:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media (max-width:560px){
  .ck-addr{grid-template-columns:1fr}
  .ck-qr{width:112px;height:112px}
  .pc{padding:18px 16px}
  .pc-price b{font-size:42px}
  .pc-name{font-size:24px}
}
@media (prefers-reduced-motion:reduce){ .pc-switch,.pc-switch i,.pc-cta{transition:none} }
.pc-yearnote{margin:-4px 0 12px;font-size:13px;font-weight:650;color:var(--gold)}

/* ── 2026-09-30 정리: 카드는 이름·한 줄 설명·가격·버튼·포함 항목만 ─────────── */
.pc-box{display:none}
.pc-feat li.off{display:none}
.pc-launch{font-size:13px;color:var(--sub);white-space:nowrap}
.pc-launch .clock{font:700 13px/1 var(--f-mono);color:var(--pc-hot)}
.pc-strip.trial{padding:10px 14px}
.pc-strip.trial .big{font-size:15px}
.pc-foot{margin:14px 0 0;text-align:center;font-size:13px;color:var(--sub)}
.pc-foot a{color:var(--sub);text-decoration:underline}