/* 💳 pt を買う画面・特定商取引法の表記。色・角丸・影・書体はテーマの名前だけ(app.css と同じ決まり) */
.buy { max-width: 760px; margin: 0 auto; padding: 8px 16px 48px; }
.buyh { font-size: 24px; margin: 18px 2px 10px; }
.bcard { background: var(--panel-bg, var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.bwallet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; border-top: 3px solid var(--accent); }
.blabel { width: 100%; font-size: 13px; color: var(--sub); }
.bbal b { font-size: 40px; font-variant-numeric: tabular-nums; font-family: var(--font-head); font-weight: var(--head-weight); }
.bbal span { margin-left: 4px; font-size: 16px; color: var(--sub); }
.bexp { font-size: 13px; color: var(--sub); }
.bexp.soon { color: var(--warn-text); }
.bpacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bpack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel2); color: var(--text); min-height: 108px; }
.bpack:hover:not(:disabled) { border-color: var(--accent); }
.bpack:disabled { cursor: default; opacity: .55; border-style: dashed; }
.bpack .pt { font-size: 22px; font-weight: 800; font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.bpack .yen { display: inline-flex; padding: 4px 14px; border-radius: 999px; background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: 14px; }
.bpack:disabled .yen { background: transparent; color: var(--sub); border: 1px dashed var(--line); }
.bpack[aria-busy="true"] .yen::after { content: " …"; }
.bsmall { font-size: 12px; color: var(--sub); margin: 8px 2px 0; line-height: 1.6; }
.bnote { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-s); border: 1px solid var(--accent); background: var(--sel-bg); color: var(--on-sel); font-size: 14px; line-height: 1.6; }
.bnote.ok { border-color: var(--ok); }
.btest { margin: 0 0 12px; padding: 8px 14px; border-radius: var(--radius-s); border: 1px dashed var(--warn); color: var(--warn-text); font-size: 13px; line-height: 1.6; }
.blist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.blist li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; background: var(--panel); }
.blist li:first-child { border-top: 0; }
.blist .grow { flex: 1; }
.blist .s { color: var(--sub); font-size: 12px; }
.blist .bempty { color: var(--sub); }
.brules { margin-top: 26px; font-size: 14px; line-height: 1.7; }
.brules h2 { font-size: 16px; margin: 0 0 6px; }
.brules ul { margin: 0; padding-left: 20px; }
.brules a, .legal a { color: var(--link); }
/* 特定商取引法の表記 */
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--line); }
.legal th { width: 32%; color: var(--sub); font-weight: 700; }
.legal .todo { color: var(--warn-text); }
@media (max-width: 520px) { .legal th, .legal td { display: block; width: auto; } .legal td { border-top: 0; padding-top: 0; } .bbal b { font-size: 34px; } }