/* Reference layout: independent visual introduction, quote terminal, then activation form. */
.buy-showcase{position:relative;isolation:isolate;overflow:hidden;contain:paint;
  padding:20px 16px 12px;margin-bottom:16px;border-radius:0 0 22px 22px;background:linear-gradient(155deg,#F6F9FF,#E6F1FF)}
.buy-showcase .lt{position:relative;margin:0;padding:0;z-index:1}
.buy-showcase .lt h1{font-size:clamp(22px,6cqw,26px);line-height:1.35;letter-spacing:0}
.buy-showcase .lt p{margin-top:8px;font-size:var(--fs-13);line-height:1.6;max-width:30em;color:#526681}
.buy-visual{position:relative;height:178px;margin:8px -12px 0;pointer-events:none;isolation:isolate}
.quota-core-art{position:absolute;z-index:2;left:50%;top:-6px;width:242px;height:182px;margin-left:-121px;object-fit:contain;
  animation:quota-core-hover 5s ease-in-out infinite;animation-play-state:paused}
.quota-core-shadow{position:absolute;left:50%;top:128px;width:150px;height:40px;margin-left:-75px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(46,113,208,.16),transparent 70%)}
.quota-orbit,.quota-track{position:absolute;left:10%;top:68px;width:80%;height:87px;transform:rotate(-15deg)}
.quota-orbit{border:1px solid rgba(92,151,224,.27);border-radius:50%}
.quota-track{z-index:3;pointer-events:none}
.quota-endpoint{position:absolute;z-index:3;display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:9px;
  background:#fff;box-shadow:0 2px 7px rgba(40,90,165,.09);font-size:var(--fs-12);font-weight:700;color:#426185;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(15deg)}
.quota-endpoint .ico{color:var(--blue)}
/* All label centers sit on the same ellipse: 160, -10 and 35 degrees.
   Parent-relative anchors keep the labels on the orbit at every app width. */
.quota-endpoint--in{left:3.02%;top:67.10%}
.quota-endpoint--out{left:99.24%;top:41.32%}
.quota-endpoint--compute{left:90.96%;top:78.68%}
.quota-endpoint{width:max-content;max-width:112px;white-space:normal;line-height:1.4;text-align:center}
:root[data-lang="ko"] .quota-endpoint{word-break:keep-all}
.quota-endpoint--in{left:13%}
.quota-endpoint--out{left:88%;top:27%}
.quota-endpoint--compute{left:83%;top:93%}
.quota-endpoint .ico{flex-shrink:0}
.quota-packet{position:absolute;z-index:2;width:7px;height:7px;border-radius:2px;background:#2388F7;box-shadow:0 0 0 3px rgba(35,136,247,.10);
  animation:quota-transfer 3.6s ease-in-out infinite;animation-play-state:paused}
.quota-packet--in{left:17%;top:143px;--packet-x:72px;--packet-y:-48px}
.quota-packet--out{right:35%;top:107px;--packet-x:60px;--packet-y:-46px;animation-delay:-1.8s}
[data-ambient="running"] .quota-core-art,[data-ambient="running"] .quota-packet{animation-play-state:running}
@keyframes quota-core-hover{0%,100%{transform:translateY(4px) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes quota-transfer{0%{opacity:0;transform:translate(0,0) scale(.65)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--packet-x),var(--packet-y)) scale(1)}}
@container app (max-width:350px){
  .buy-visual{height:171px;margin-inline:-8px}
  .quota-core-art{width:216px;height:162px;margin-left:-108px;top:3px}
  .quota-endpoint{gap:3px;padding:5px 6px}
}
@media (prefers-reduced-motion:reduce){.quota-core-art,.quota-packet{animation:none!important}.quota-packet{opacity:.7}}
.page-buy .mod{background:#fff;border:1px solid #DCE5F1;box-shadow:none}
.buy-terminal .mod-head{margin-bottom:12px}
.page-buy .mod-head .aside,.buy-qty-head > span{font-weight:700}
.buy-rate{padding:14px;background:#F5F8FD;border:1px solid #E0E8F3;border-radius:12px}
.buy-rate .k{font-size:var(--fs-13);color:var(--ink-3)}
.buy-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:4px 0 10px}
.buy-price-amount{font-size:2rem;line-height:1.25;color:var(--blue);font-weight:700;letter-spacing:-.02em}
.buy-price .per{font-size:var(--fs-12);font-weight:600;color:var(--ink-3)}
.buy-qty-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.buy-qty-head .label{margin:0}
.buy-qty-head > span{font-size:var(--fs-12);color:var(--ink-3);text-align:right}
.page-buy .stepper{height:52px;background:#fff;border-radius:12px}
.page-buy .stepper input{font-size:var(--fs-20);font-weight:600}
.page-buy .stepper .icon-btn{width:44px;height:44px;border-radius:8px;background:var(--blue-soft)}
.page-buy .quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0;padding:0;overflow:visible}
.page-buy .quick .chip{height:44px;padding:0 3px;justify-content:center;min-width:0;border-radius:10px;font-size:var(--fs-13)}
.page-buy .quick .chip::after{inset:0}
.page-buy .summary{padding:10px 12px;border-radius:12px;background:#F5F8FD;box-shadow:none;border:1px solid #E0E8F3}
.page-buy .summary .kv{gap:10px;font-size:var(--fs-13)}
.page-buy .summary .kv > :first-child{flex:none}
.page-buy .summary .kv > :last-child{min-width:0;overflow-wrap:anywhere;text-align:right}
.page-buy .summary .kv--total .money{font-size:var(--fs-20)}
.page-buy .paymethod{min-height:52px;padding:8px 10px;border-radius:12px;font-size:var(--fs-13);box-shadow:inset 0 0 0 1px var(--blue)}
.page-buy .paymethod .itile{width:32px;height:32px;border-radius:8px}
.page-buy .paymethod .check-ui{width:20px;height:20px}
.page-buy .buy-cta{margin-top:16px}
.buy-note{margin-top:12px;font-size:var(--fs-12);line-height:1.6;color:var(--ink-3)}
.page-buy .buy-done-row{margin-top:14px}
.page-buy .buy-done .kv .muted{font-weight:500;font-size:var(--fs-12)}
.page-buy #buy-msg:empty{display:none}
.page-buy .stepper .icon-btn[disabled]{opacity:.45}

/* shortfall row: message + a full 44px 前往儲值 button (an inline link's padded hit area overlapped the chips) */
.page-buy .field-msg.has-act{align-items:center;margin-top:0;min-height:var(--tap)}
.page-buy .field-msg.has-act .ico{margin-top:0}
.page-buy .field-msg.has-act > span{flex:1;min-width:0}
.page-buy .field-msg .lnk{flex:none;font-size:var(--fs-12);margin-right:-2px}
.page-buy #buy-msg.has-act + .quick{margin-top:0}

/* failure notice: 前往儲值 inside the notice text */
.page-buy .notice .lnk{vertical-align:baseline}

/* price moved since it was shown: old → new notice right above the button it applies to */
.page-buy .buy-qc:not(:empty){margin-bottom:10px}