/* 書籍プロモ用の足し分（site.css の上に重ねる）。色・余白は design-tokens.css の変数を使う */
.proto-bar{background:#B02A2A;color:#fff;font-size:12.5px;text-align:center;padding:6px 12px;line-height:1.6}
.qr.off{display:none !important}

/* 登録画面：場面ごとの箱（1つだけ見せる） */
[hidden]{display:none !important}
.panel{max-width:640px;border:1px solid var(--line);background:#fff;padding:var(--s3) 22px}
.panel h2{font-size:21px;margin-bottom:10px}
.panel p{font-size:15px;line-height:1.9}
.panel .no{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums;color:var(--navy);margin:6px 0 14px}
.panel .no small{font-family:var(--sans);font-weight:400;font-size:12.5px;color:var(--muted);letter-spacing:0;display:block}
.panel .btn{width:100%;border:0;cursor:pointer;margin-top:var(--s1)}
.panel .btn-ghost{border:1px solid var(--navy)}
.panel .btn+.btn{margin-top:12px}
.panel.center{text-align:center}
.spin{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--navy);border-radius:50%;margin:8px auto 14px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}

/* 対象でない区分を選んだときの案内 */
.noteli{border:1px solid var(--navy);background:var(--bg);padding:14px 16px;margin-top:10px;font-size:14.5px;line-height:1.8}
.noteli b{color:var(--navy)}
.noteli .btn{min-width:0;width:100%;margin-top:10px;font-size:15px;padding:12px 16px}
.field.bad input,.field.bad .radios label{border-color:#B02A2A}
button.btn:disabled{opacity:.55;cursor:default}
.steps-mini{display:flex;gap:6px;margin:0 0 var(--s2);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.steps-mini span{border:1px solid var(--line);border-radius:12px;padding:1px 10px;background:#fff}
.steps-mini span.on{border-color:var(--navy);color:var(--navy);font-weight:500}