/* CF-0A: crowdfunding skeleton. Scoped to .crowdfunding-* so no existing page is affected. */
.crowdfunding-main{padding:24px 0 48px}
.crowdfunding-stack{display:grid;gap:16px}
.crowdfunding-hero{padding:28px;overflow:hidden;position:relative}
.crowdfunding-eyebrow{font-weight:900;color:var(--cta);letter-spacing:.04em;margin-bottom:8px}
.crowdfunding-lead{color:var(--muted);line-height:1.9;max-width:760px;margin:0}
.crowdfunding-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.crowdfunding-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.crowdfunding-placeholder{border:1px dashed var(--line);border-radius:14px;padding:18px;background:rgba(2,6,23,.02)}
.crowdfunding-placeholder h2{margin:0 0 8px;font-size:1.05rem}
.crowdfunding-placeholder .btn{margin-top:12px}
.crowdfunding-status{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:13px;font-weight:800;color:var(--muted);background:#fff}
.crowdfunding-status.live{color:var(--ok);border-color:rgba(5,150,105,.3);background:rgba(5,150,105,.06)}
.crowdfunding-status.ended{color:var(--muted);background:rgba(71,85,105,.06)}
.crowdfunding-form{display:grid;gap:12px;max-width:640px}
.crowdfunding-form-actions{display:flex;gap:10px;flex-wrap:wrap}
/* 受付開始前はinput/submitをdisabledのまま置くため、押せない状態が見た目でも分かるようにする。 */
.crowdfunding-form .input:disabled{background:rgba(2,6,23,.03);color:var(--muted);cursor:not-allowed}
.crowdfunding-form .btn:disabled{opacity:.55;cursor:not-allowed}
.crowdfunding-note{font-size:13px;color:var(--muted);line-height:1.7}
.crowdfunding-admin-empty{display:grid;gap:12px}

/* タブレット幅ではヘッダーがハンバーガーへ切り替わる（layout.css: max-width:900px）ため、
   3カラムのままだとカードが詰まる。同じ境界で2カラムへ落とす。 */
@media (max-width:900px){
  .crowdfunding-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crowdfunding-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .crowdfunding-main{padding:16px 0 40px}
  .crowdfunding-hero{padding:20px}
  .crowdfunding-grid{grid-template-columns:1fr}
  .crowdfunding-tiers{grid-template-columns:1fr}
  .crowdfunding-actions .btn,.crowdfunding-form-actions .btn{width:100%;text-align:center}
  .crowdfunding-placeholder .btn{width:100%;text-align:center}
  .cf-promo-actions .btn{width:100%;text-align:center}
  .cf-benefit-amounts>div{font-size:13px}
}

.crowdfunding-notice{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(2,6,23,.03)}

/* CF-S3B claim-owned benefit list */
.crowdfunding-benefits-list{display:grid;gap:12px;margin-top:12px}
.crowdfunding-benefit-item{border:1px solid var(--border,#dfe3e8);border-radius:12px;padding:14px;background:var(--surface,#fff)}
.crowdfunding-benefit-item ul{margin:10px 0 0;padding-left:1.3em}
.crowdfunding-benefit-item li+li{margin-top:4px}

/* ------------------------------------------------------------------ */
/* CF-S5 campaign content, benefit dashboard and sitewide promo        */
/* ------------------------------------------------------------------ */
.crowdfunding-points{margin:14px 0 0;padding-left:1.3em;color:var(--muted);line-height:1.9}
.crowdfunding-points li+li{margin-top:6px}

/* 4リターン。900px以下で2カラム、640px以下で1カラム（下のmediaクエリで切り替える）。 */
.crowdfunding-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.crowdfunding-tier{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface,#fff);display:flex;flex-direction:column}
.crowdfunding-tier-price{font-weight:900;font-size:1.35rem;color:var(--cta)}
.crowdfunding-tier h3{margin:6px 0 10px;font-size:1rem;line-height:1.5}
.crowdfunding-tier ul{margin:0;padding-left:1.25em;color:var(--muted);line-height:1.8;font-size:14px}
.crowdfunding-tier li+li{margin-top:4px}
.crowdfunding-tier .crowdfunding-note{margin-top:10px}

/* 特典ダッシュボードの金額行。上限／使用済み／利用可能残額／未使用を必ず別行で見せる。 */
.cf-benefit-discount{margin-top:10px}
.cf-benefit-amounts{display:grid;gap:4px;margin:8px 0}
.cf-benefit-amounts>div{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px dotted var(--line);padding-bottom:4px}
.cf-benefit-key{color:var(--muted)}
.cf-benefit-value{text-align:right}
.cf-benefit-state{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-size:12px;font-weight:800;background:#fff}
.cf-benefit-state[data-state="active"]{color:var(--ok);border-color:rgba(5,150,105,.3);background:rgba(5,150,105,.06)}
.cf-benefit-state[data-state="expired"],.cf-benefit-state[data-state="void"]{color:var(--muted);background:rgba(71,85,105,.06)}

/* サイト内プロモ（top / publishers / publisher dashboard / business dashboard）。
   card/pad/row/btn の共通クラスの上に最小限の装飾だけを足す。既存の主要操作を
   押し下げないよう、余白は控えめにする。 */
.cf-promo-card{margin-top:14px}
.cf-promo-eyebrow{font-weight:900;color:var(--cta);letter-spacing:.04em;font-size:12px}
.cf-promo-title{margin:6px 0 0;font-weight:800;font-size:1.05rem}
.cf-promo-body{margin:6px 0 0;color:var(--muted);line-height:1.8;font-size:14px}
.cf-promo-actions{margin-top:12px;flex-wrap:wrap;gap:8px}