/* rdp-core design system — redotpay.cards
   単一の情報源: docs/18_DESIGN_SYSTEM.md
   すべて .rdp- 接頭辞でスコープし、Cocoon のスタイルと衝突させない */

:root{
  /* color */
  --rdp-ink:#14161f;        /* 本文 */
  --rdp-ink-2:#3a3f4d;      /* 補足 */
  --rdp-muted:#575d6b;      /* 注記（白地で6.6:1） */
  --rdp-line:#e2e4e9;
  --rdp-bg:#ffffff;
  --rdp-paper:#f6f4ef;      /* 温かい紙色の面 */
  --rdp-navy:#0f1b33;       /* 濃色帯 */
  --rdp-navy-2:#1b2a4a;
  --rdp-red:#e60012;        /* ブランド。CTAの面だけ */
  --rdp-red-ink:#b5000e;    /* 赤の文字・リンク（白地で6.4:1） */
  --rdp-red-soft:#fdeceb;
  --rdp-ok:#0a7044;   --rdp-ok-soft:#e5f4ec;
  --rdp-warn:#8a5200; --rdp-warn-soft:#fbf0dc;
  --rdp-unk:#575d6b;  --rdp-unk-soft:#eef0f3;
  /* type */
  --rdp-font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --rdp-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rdp-fs-xs:.8125rem;  /* 13 */
  --rdp-fs-s:.875rem;    /* 14 */
  --rdp-fs-m:1rem;       /* 16 */
  --rdp-fs-l:1.125rem;   /* 18 */
  --rdp-fs-xl:1.375rem;  /* 22 */
  --rdp-fs-2xl:clamp(1.5rem,1.2rem + 1.4vw,2rem);       /* 24-32 */
  --rdp-fs-3xl:clamp(1.75rem,1.2rem + 2.6vw,2.75rem);   /* 28-44 */
  /* space (4/8) */
  --rdp-s1:4px; --rdp-s2:8px; --rdp-s3:12px; --rdp-s4:16px; --rdp-s5:24px;
  --rdp-s6:32px; --rdp-s7:48px; --rdp-s8:64px; --rdp-s9:96px;
  /* shape */
  --rdp-r-s:8px; --rdp-r-m:12px; --rdp-r-l:16px;
  --rdp-shadow:0 1px 2px rgba(15,27,51,.06),0 8px 24px rgba(15,27,51,.08);
  --rdp-max:1120px;
}

/* ---------- base inside rdp scopes ---------- */
.rdp,.rdp *{box-sizing:border-box}
.rdp{font-family:var(--rdp-font);color:var(--rdp-ink);font-size:var(--rdp-fs-m);line-height:1.8;
  font-feature-settings:"palt" 0;-webkit-font-smoothing:antialiased;word-break:auto-phrase;line-break:strict}
.rdp a{color:var(--rdp-red-ink);text-underline-offset:3px}
.rdp :focus-visible{outline:3px solid var(--rdp-navy);outline-offset:3px;border-radius:4px}
.rdp-num{font-family:var(--rdp-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.rdp-wrap{max-width:var(--rdp-max);margin-inline:auto;padding-inline:var(--rdp-s4)}
@media (min-width:768px){.rdp-wrap{padding-inline:var(--rdp-s6)}}
.rdp-section{padding-block:var(--rdp-s8)}
@media (min-width:768px){.rdp-section{padding-block:var(--rdp-s9)}}
.rdp-eyebrow{display:inline-flex;align-items:center;gap:var(--rdp-s2);font-size:var(--rdp-fs-xs);
  font-weight:700;letter-spacing:.06em;color:var(--rdp-ink-2);margin:0 0 var(--rdp-s3)}
.rdp-h2{font-size:var(--rdp-fs-2xl);line-height:1.35;font-weight:700;margin:0 0 var(--rdp-s4);text-wrap:balance;letter-spacing:.01em}
.rdp-lead{font-size:var(--rdp-fs-l);color:var(--rdp-ink-2);margin:0 0 var(--rdp-s6);max-width:36em}

/* ---------- buttons ---------- */
.rdp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--rdp-s2);min-height:48px;
  padding:var(--rdp-s3) var(--rdp-s5);border-radius:var(--rdp-r-m);font-weight:700;font-size:var(--rdp-fs-m);
  line-height:1.4;text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:transform .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}
.rdp-btn--primary{background:var(--rdp-red);color:#fff!important;box-shadow:0 6px 16px rgba(230,0,18,.22)}
.rdp-btn--primary:hover{background:#cc0010;transform:translateY(-1px)}
.rdp-btn--primary:active{transform:translateY(0)}
.rdp-btn--ghost{background:transparent;color:var(--rdp-ink)!important;border-color:var(--rdp-ink)}
.rdp-btn--ghost:hover{background:var(--rdp-ink);color:#fff!important}
.rdp-btn--light{background:#fff;color:var(--rdp-navy)!important}
.rdp-btn--light:hover{background:var(--rdp-paper)}
.rdp-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ---------- invite code pill ---------- */
.rdp-invite{display:flex;align-items:stretch;border:2px dashed var(--rdp-ink);border-radius:var(--rdp-r-m);
  background:#fff;overflow:hidden;max-width:420px}
.rdp-invite__label{display:flex;flex-direction:column;justify-content:center;padding:var(--rdp-s2) var(--rdp-s4);
  font-size:var(--rdp-fs-xs);color:var(--rdp-muted);line-height:1.4}
.rdp-invite__code{font-family:var(--rdp-mono);font-size:var(--rdp-fs-xl);font-weight:600;color:var(--rdp-ink);letter-spacing:.08em}
.rdp-invite__copy{margin-left:auto;min-width:96px;border:0;border-left:2px dashed var(--rdp-ink);background:var(--rdp-paper);
  font-family:var(--rdp-font);font-weight:700;font-size:var(--rdp-fs-s);color:var(--rdp-ink);cursor:pointer;padding:0 var(--rdp-s4)}
.rdp-invite__copy:hover{background:var(--rdp-ink);color:#fff}
.rdp-invite__copy[data-copied="1"]{background:var(--rdp-ok);color:#fff}
.rdp-note{font-size:var(--rdp-fs-xs);color:var(--rdp-muted);line-height:1.7;margin:var(--rdp-s2) 0 0}
.rdp-note strong{color:var(--rdp-ink)}

/* ---------- hero ---------- */
.rdp-hero{background:var(--rdp-paper);border-bottom:1px solid var(--rdp-line);padding-block:var(--rdp-s7) var(--rdp-s8)}
.rdp-hero__grid{display:grid;gap:var(--rdp-s7)}
@media (min-width:960px){.rdp-hero__grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--rdp-s8)}}
.rdp-hero h1{font-size:var(--rdp-fs-3xl);line-height:1.3;font-weight:800;margin:0 0 var(--rdp-s5);letter-spacing:.01em;text-wrap:balance}
.rdp-hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(230,0,18,.18) 62%)}
.rdp-hero__lead{font-size:var(--rdp-fs-l);color:var(--rdp-ink-2);margin:0 0 var(--rdp-s6);max-width:34em}
.rdp-hero__actions{display:flex;flex-direction:column;gap:var(--rdp-s3);align-items:flex-start}
.rdp-hero__actions .rdp-btn{width:100%;max-width:420px}
.rdp-hero__sub{display:flex;flex-wrap:wrap;gap:var(--rdp-s4);margin-top:var(--rdp-s2)}
.rdp-hero__sub a{font-weight:700;font-size:var(--rdp-fs-s);display:inline-flex;align-items:center;min-height:44px}

/* ---------- signature: status board ---------- */
.rdp-board{background:#fff;border-radius:var(--rdp-r-l);box-shadow:var(--rdp-shadow);overflow:hidden;border:1px solid var(--rdp-line)}
.rdp-board__head{display:flex;justify-content:space-between;align-items:center;gap:var(--rdp-s3);
  padding:var(--rdp-s4) var(--rdp-s5);background:var(--rdp-navy);color:#fff}
.rdp-board__title{font-weight:700;font-size:var(--rdp-fs-m);margin:0}
.rdp-stamp{display:inline-flex;align-items:center;gap:8px;font-size:var(--rdp-fs-xs);color:#d6dbe6;white-space:nowrap}
.rdp-stamp::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ddc91;box-shadow:0 0 0 3px rgba(61,220,145,.25)}
@media (prefers-reduced-motion:no-preference){.rdp-stamp::before{animation:rdp-pulse 2.4s ease-in-out infinite}}
@keyframes rdp-pulse{50%{box-shadow:0 0 0 6px rgba(61,220,145,0)}}
.rdp-board__list{list-style:none;margin:0;padding:0}
.rdp-board__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--rdp-s3);
  padding:var(--rdp-s4) var(--rdp-s5);border-top:1px solid var(--rdp-line)}
.rdp-board__row:first-child{border-top:0}
.rdp-board__k{font-weight:700;font-size:var(--rdp-fs-m);line-height:1.5}
.rdp-board__k small{display:block;font-weight:400;font-size:var(--rdp-fs-xs);color:var(--rdp-muted)}
.rdp-pill{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-size:var(--rdp-fs-s);font-weight:700;white-space:nowrap;gap:4px}
.rdp-pill--ok{background:var(--rdp-ok-soft);color:var(--rdp-ok)}
.rdp-pill--paused{background:var(--rdp-warn-soft);color:var(--rdp-warn)}
.rdp-pill--unknown{background:var(--rdp-unk-soft);color:var(--rdp-unk)}
.rdp-board__foot{margin:0;padding:var(--rdp-s3) var(--rdp-s5);background:var(--rdp-paper);font-size:var(--rdp-fs-xs);color:var(--rdp-muted);border-top:1px solid var(--rdp-line)}

/* ---------- stats strip ---------- */
.rdp-stats{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--rdp-line);background:#fff}
@media (min-width:768px){.rdp-stats{grid-template-columns:repeat(3,1fr)}}
.rdp-stat{padding:var(--rdp-s5) var(--rdp-s4);border-top:1px solid var(--rdp-line)}
.rdp-stat:first-child{border-top:0}
@media (min-width:768px){.rdp-stat{border-top:0;border-left:1px solid var(--rdp-line);padding:var(--rdp-s6)}.rdp-stat:first-child{border-left:0}}
.rdp-stat__v{font-family:var(--rdp-mono);font-size:var(--rdp-fs-2xl);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.rdp-stat__v small{font-family:var(--rdp-font);font-size:var(--rdp-fs-m);font-weight:700;margin-left:4px}
.rdp-stat__k{font-size:var(--rdp-fs-s);color:var(--rdp-ink-2);margin-top:var(--rdp-s1)}

/* ---------- steps ---------- */
.rdp-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--rdp-s5);counter-reset:rdp-step}
@media (min-width:768px){.rdp-steps{grid-template-columns:repeat(3,1fr);gap:var(--rdp-s6)}}
.rdp-step{counter-increment:rdp-step;position:relative;padding-top:var(--rdp-s7)}
.rdp-step::before{content:counter(rdp-step,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--rdp-mono);font-size:var(--rdp-fs-xl);font-weight:600;color:var(--rdp-red-ink)}
.rdp-step::after{content:"";position:absolute;top:16px;left:48px;right:0;height:2px;background:var(--rdp-line)}
.rdp-step h3{font-size:var(--rdp-fs-l);margin:0 0 var(--rdp-s2);line-height:1.5}
.rdp-step p{margin:0;color:var(--rdp-ink-2);font-size:var(--rdp-fs-m)}
.rdp-callout{margin-top:var(--rdp-s6);padding:var(--rdp-s4) var(--rdp-s5);border-left:4px solid var(--rdp-red);
  background:var(--rdp-red-soft);border-radius:0 var(--rdp-r-s) var(--rdp-r-s) 0;font-weight:700}

/* ---------- purpose index (not same-card grid: a numbered index list) ---------- */
.rdp-index{display:grid;gap:0;border-top:2px solid var(--rdp-ink)}
@media (min-width:768px){.rdp-index{grid-template-columns:repeat(2,1fr);column-gap:var(--rdp-s7)}}
.rdp-index__group{padding:var(--rdp-s5) 0;border-bottom:1px solid var(--rdp-line)}
.rdp-index__q{font-size:var(--rdp-fs-l);font-weight:700;margin:0 0 var(--rdp-s3)}
.rdp-index__links{display:flex;flex-wrap:wrap;gap:var(--rdp-s2)}
.rdp-chip{display:inline-flex;align-items:center;min-height:44px;padding:var(--rdp-s2) var(--rdp-s4);border:1px solid var(--rdp-line);
  border-radius:999px;color:var(--rdp-ink)!important;text-decoration:none;font-size:var(--rdp-fs-s);font-weight:700;background:#fff}
.rdp-chip:hover{border-color:var(--rdp-ink);background:var(--rdp-paper)}
.rdp-chip::after{content:"→";margin-left:var(--rdp-s2);color:var(--rdp-red-ink)}

/* ---------- tables ---------- */
.rdp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rdp-line);border-radius:var(--rdp-r-m);background:#fff}
.rdp-table{width:100%;border-collapse:collapse;font-size:var(--rdp-fs-s);min-width:560px}
.rdp-table th,.rdp-table td{padding:var(--rdp-s3) var(--rdp-s4);text-align:left;border-bottom:1px solid var(--rdp-line);vertical-align:top;line-height:1.6}
.rdp-table thead th{background:var(--rdp-paper);font-weight:700;color:var(--rdp-ink);white-space:nowrap}
.rdp-table tbody tr:last-child td{border-bottom:0}
.rdp-table td.rdp-num{text-align:right;white-space:nowrap}
.rdp-table .rdp-hl{background:#fffaf0}
.rdp-table__cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--rdp-s2);font-size:var(--rdp-fs-xs);color:var(--rdp-muted);margin:var(--rdp-s2) 0 0}

/* ---------- dark help band ---------- */
.rdp-band{background:var(--rdp-navy);color:#fff}
.rdp-band .rdp-h2{color:#fff}
.rdp-band p{color:#d6dbe6}
.rdp-band__grid{display:grid;gap:var(--rdp-s5);align-items:center}
@media (min-width:768px){.rdp-band__grid{grid-template-columns:1.4fr 1fr}}
.rdp-band__actions{display:flex;flex-direction:column;gap:var(--rdp-s3)}

/* ---------- operator / trust ---------- */
.rdp-trust{display:grid;gap:var(--rdp-s5);grid-template-columns:72px 1fr;align-items:start;
  padding:var(--rdp-s5);border:1px solid var(--rdp-line);border-radius:var(--rdp-r-l);background:#fff}
.rdp-trust__avatar{width:72px;height:72px;border-radius:50%;background:var(--rdp-paper);object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--rdp-ink-2);font-size:var(--rdp-fs-xl)}
.rdp-trust__name{font-weight:700;font-size:var(--rdp-fs-l);margin:0}
.rdp-trust__role{font-size:var(--rdp-fs-s);color:var(--rdp-ink-2);margin:0 0 var(--rdp-s2)}
.rdp-trust dl{display:grid;grid-template-columns:auto 1fr;gap:var(--rdp-s1) var(--rdp-s4);margin:var(--rdp-s3) 0 0;font-size:var(--rdp-fs-s)}
.rdp-trust dt{color:var(--rdp-muted)}
.rdp-trust dd{margin:0}

/* ---------- disclosure / summary / meta ---------- */
.rdp-disclosure{border:1px solid var(--rdp-line);background:var(--rdp-paper);border-radius:var(--rdp-r-m);
  padding:var(--rdp-s1) var(--rdp-s5);font-size:var(--rdp-fs-s);line-height:1.8;color:var(--rdp-ink-2);margin:var(--rdp-s5) 0}
.rdp-disclosure summary{cursor:pointer;font-weight:700;color:var(--rdp-ink);list-style:none;min-height:44px;display:flex;align-items:center}
.rdp-disclosure summary::-webkit-details-marker{display:none}
.rdp-disclosure summary::before{content:"ⓘ";margin-right:var(--rdp-s2);color:var(--rdp-ink)}
.rdp-disclosure ul{margin:0 0 var(--rdp-s4);padding-left:1.25em}
.rdp-meta{display:flex;flex-wrap:wrap;gap:var(--rdp-s2) var(--rdp-s5);font-size:var(--rdp-fs-s);color:var(--rdp-ink-2);margin:0 0 var(--rdp-s4)}
.rdp-meta b{color:var(--rdp-ink)}
.rdp-summary{border:2px solid var(--rdp-ink);border-radius:var(--rdp-r-m);padding:var(--rdp-s5);margin:var(--rdp-s6) 0;background:#fff}
.rdp-summary__t{font-weight:800;margin:0 0 var(--rdp-s3);font-size:var(--rdp-fs-m)}
.rdp-summary ul{margin:0;padding-left:1.25em}
.rdp-summary li+li{margin-top:var(--rdp-s2)}
.rdp-answer{font-size:var(--rdp-fs-l);font-weight:700;line-height:1.7;padding-left:var(--rdp-s4);border-left:4px solid var(--rdp-ink);margin:0 0 var(--rdp-s4)}

/* ---------- CTA blocks ---------- */
.rdp-cta{border-radius:var(--rdp-r-l);padding:var(--rdp-s6) var(--rdp-s5);margin:var(--rdp-s7) 0;background:var(--rdp-paper);border:1px solid var(--rdp-line)}
@media (min-width:768px){.rdp-cta{padding:var(--rdp-s6)}}
.rdp-cta__t{font-size:var(--rdp-fs-xl);font-weight:800;line-height:1.45;margin:0 0 var(--rdp-s2)}
.rdp-cta__d{margin:0 0 var(--rdp-s5);color:var(--rdp-ink-2)}
.rdp-cta__row{display:flex;flex-direction:column;gap:var(--rdp-s3)}
@media (min-width:768px){.rdp-cta__row{flex-direction:row;align-items:center}}
.rdp-cta--inline{padding:var(--rdp-s5);margin:var(--rdp-s6) 0;display:grid;gap:var(--rdp-s3)}
@media (min-width:768px){.rdp-cta--inline{grid-template-columns:1fr auto;align-items:center}}
.rdp-cta--inline .rdp-cta__t{font-size:var(--rdp-fs-m);margin:0}

/* ---------- FAQ ---------- */
.rdp-faq{border-top:1px solid var(--rdp-line)}
.rdp-faq details{border-bottom:1px solid var(--rdp-line)}
.rdp-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--rdp-s4);
  padding:var(--rdp-s4) 0;font-weight:700;font-size:var(--rdp-fs-m);min-height:48px;align-items:center}
.rdp-faq summary::-webkit-details-marker{display:none}
.rdp-faq summary::after{content:"+";font-family:var(--rdp-mono);font-size:var(--rdp-fs-xl);color:var(--rdp-red-ink);transition:transform .2s ease-out}
.rdp-faq details[open] summary::after{transform:rotate(45deg)}
.rdp-faq__a{padding:0 0 var(--rdp-s5);color:var(--rdp-ink-2);margin:0}

/* ---------- sources ---------- */
.rdp-sources{font-size:var(--rdp-fs-s);color:var(--rdp-ink-2);border-top:1px solid var(--rdp-line);padding-top:var(--rdp-s4);margin-top:var(--rdp-s7)}
.rdp-sources ol{padding-left:1.5em;margin:var(--rdp-s2) 0 0}
.rdp-sources a{word-break:break-all}

/* ---------- sticky mobile bar ---------- */
.rdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9990;padding:var(--rdp-s2) var(--rdp-s3) calc(var(--rdp-s2) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid var(--rdp-line);box-shadow:0 -8px 24px rgba(15,27,51,.08);
  transform:translateY(110%);transition:transform .25s ease-out}
.rdp-sticky[data-show="1"]{transform:translateY(0)}
.rdp-sticky .rdp-btn{width:100%;min-height:48px;font-size:var(--rdp-fs-s)}
.rdp-sticky .rdp-num{background:rgba(255,255,255,.2);padding:2px 8px;border-radius:6px}
@media (min-width:960px){.rdp-sticky{display:none}}
@media (prefers-reduced-motion:reduce){.rdp *,.rdp-sticky{transition:none!important;animation:none!important}}

/* toast */
.rdp-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--rdp-ink);color:#fff;
  padding:var(--rdp-s2) var(--rdp-s4);border-radius:999px;font-size:var(--rdp-fs-s);font-weight:700;z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s ease-out}
.rdp-toast[data-show="1"]{opacity:1}
@media (max-width:959px){body.rdp-has-sticky{padding-bottom:72px}}
/* 狭い本文幅のテーマでも折り返す */
.rdp-trust>div,.rdp-hero__grid>*,.rdp-band__grid>*,.rdp-cta__row>*{min-width:0}
.rdp-trust dd,.rdp-trust p{overflow-wrap:anywhere}
@media (max-width:420px){.rdp-trust{grid-template-columns:1fr}}

/* スマホ下部の固定バーを出すページでは、RDP SEO Booster の浮いた SNS アイコン（右下）が本文と申込ボタンに重なるため隠す */
@media (max-width:959px){body.rdp-has-sticky .rdp-sns-float{display:none!important}}