/* 紹介プログラム（公開ページ /affiliate・会員ページ /my/affiliate・着地ページ /r/…）。
   色は cyber.css の変数だけを使う。ライト・ダークの切替と OS の設定にそのまま追従する。
   --cy-money は金額にだけ使う（cyber.css の決まり）。操作部品は高さ 44px 以上。
   360px 幅でも横にはみ出さないよう、格子は min() で折り返し、長い URL は折り返す。 */

.cyber-theme .aff-page,
.cyber-theme .aff-member { display: grid; gap: clamp(32px, 5vw, 56px); min-inline-size: 0; }
.cyber-theme .aff-page :where(p, li, dd, dt, h1, h2, h3, a, span, strong, summary),
.cyber-theme .aff-member :where(p, li, dd, dt, h1, h2, h3, a, span, strong, summary) { overflow-wrap: anywhere; }
.cyber-theme .aff-section { display: grid; gap: 16px; min-inline-size: 0; }
.cyber-theme .aff-h2 { font-size: var(--cy-ui-h2-size, clamp(1.25rem, 1.05rem + .65vw, 1.5rem)); font-weight: 800; line-height: 1.45; }
.cyber-theme .aff-h3 { font-size: 1.0625rem; font-weight: 800; line-height: 1.5; }
.cyber-theme .aff-intro { max-inline-size: 48rem; color: var(--cy-muted); }
.cyber-theme .aff-small { color: var(--cy-muted); font-size: .8125rem; line-height: 1.7; }
.cyber-theme .aff-money { color: var(--cy-money); font-family: var(--cy-mono); font-variant-numeric: tabular-nums lining-nums; font-weight: 700; }

/* --- 冒頭 ------------------------------------------------------------------ */
.cyber-theme .aff-hero {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 5vw, 56px) clamp(18px, 4vw, 48px);
  border: 1px solid var(--cy-border);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cy-mint) 14%, var(--cy-surface)) 0%, var(--cy-surface) 62%);
}
.cyber-theme .aff-hero__title { font-size: clamp(1.625rem, 1.1rem + 3vw, 3rem); font-weight: 900; line-height: 1.35; letter-spacing: -.02em; font-feature-settings: "palt"; }
.cyber-theme .aff-hero__lead { color: var(--cy-mint); font-size: clamp(1.0625rem, 1rem + .6vw, 1.375rem); font-weight: 800; line-height: 1.6; }
.cyber-theme .aff-hero__note { max-inline-size: 44rem; color: var(--cy-text); }
.cyber-theme .aff-hero__actions { margin-top: 8px; }
.cyber-theme .aff-hero--neutral { background: var(--cy-surface); }
.cyber-theme .aff-pill { justify-self: start; padding: 4px 12px; border: 1px solid var(--cy-success); border-radius: 999px; color: var(--cy-success); font-size: .875rem; font-weight: 700; }
.cyber-theme .aff-notice { padding: 12px 16px; border-left: 3px solid var(--cy-mint); border-radius: 4px; background: var(--cy-raised); }

/* --- 段階のカード ------------------------------------------------------------ */
.cyber-theme .aff-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cyber-theme .aff-tier { display: grid; align-content: start; gap: 10px; min-inline-size: 0; padding: 22px 20px; border: 1px solid var(--cy-border); border-top: 4px solid var(--aff-accent, var(--cy-mint)); border-radius: 10px; background: var(--cy-surface); }
.cyber-theme .aff-tier--starter { --aff-accent: var(--cy-mint); }
.cyber-theme .aff-tier--silver { --aff-accent: var(--cy-text); }
.cyber-theme .aff-tier--gold { --aff-accent: var(--cy-pink); }
.cyber-theme .aff-tier__name { font-size: 1.125rem; font-weight: 800; }
.cyber-theme .aff-tier__rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cyber-theme .aff-tier__pct { color: var(--aff-accent); font: 800 clamp(2.25rem, 1.8rem + 2vw, 3rem)/1.1 var(--cy-mono); }
.cyber-theme .aff-tier__rate-label { color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .aff-tier__conds { display: grid; gap: 6px; margin: 0; padding-left: 1.2em; }
.cyber-theme .aff-tier__conds li::marker { color: var(--aff-accent); }
.cyber-theme .aff-tier__and { color: var(--cy-muted); font-size: .8125rem; font-weight: 700; }
.cyber-theme .aff-tier__cond { color: var(--cy-text); }
.cyber-theme .aff-tier__example { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--cy-border); color: var(--cy-muted); font-size: .875rem; }

/* --- 計算例 ---------------------------------------------------------------- */
.cyber-theme .aff-example__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin: 0; }
.cyber-theme .aff-example__item { padding: 16px; border-left: 4px solid var(--aff-accent); border-radius: 6px; background: var(--cy-raised); }
.cyber-theme .aff-example__item dt { color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .aff-example__item dd { margin: 4px 0 0; font-size: 1.75rem; }
.cyber-theme .aff-example__pct { font-family: var(--cy-mono); }
.cyber-theme .aff-keep { font-weight: 800; }

/* --- 手順 ------------------------------------------------------------------ */
.cyber-theme .aff-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cyber-theme .aff-step { display: grid; align-content: start; gap: 8px; min-inline-size: 0; padding: 18px; border: 1px solid var(--cy-border); border-radius: 10px; background: var(--cy-surface); }
.cyber-theme .aff-step__no { color: var(--cy-mint); font: 700 .8125rem/1.5 var(--cy-mono); letter-spacing: .1em; }
.cyber-theme .aff-step__title { font-weight: 800; }
.cyber-theme .aff-step p:not(.aff-step__title) { color: var(--cy-muted); font-size: .9375rem; }
.cyber-theme .aff-steps--compact .aff-step { padding: 14px 16px; }

/* --- 判定のしくみ・よくある質問・注意 ------------------------------------------- */
.cyber-theme .aff-rules { display: grid; gap: 12px; margin: 0; }
.cyber-theme .aff-rules > div { padding: 14px 16px; border-radius: 6px; background: var(--cy-raised); }
.cyber-theme .aff-rules dt { font-weight: 800; }
.cyber-theme .aff-rules dd { margin: 6px 0 0; color: var(--cy-muted); }
.cyber-theme .aff-faq { display: grid; gap: 8px; }
.cyber-theme .aff-faq__item { border: 1px solid var(--cy-border); border-radius: 8px; background: var(--cy-surface); }
.cyber-theme .aff-faq__item summary { display: flex; align-items: center; min-block-size: 48px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
.cyber-theme .aff-faq__item p { padding: 0 16px 14px; color: var(--cy-muted); }
.cyber-theme .aff-notes ul { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; color: var(--cy-muted); font-size: .875rem; }

/* --- 会員ページ: 共有 --------------------------------------------------------- */
/* JS が動くまで出さないボタン（コピー・端末の共有）。.cyber-action の display に負けないように */
.cyber-theme .aff-share [hidden] { display: none !important; }
.cyber-theme .aff-share { display: grid; gap: 18px; min-inline-size: 0; padding: clamp(18px, 4vw, 32px); border: 1px solid var(--cy-mint); border-radius: 12px; background: var(--cy-surface); box-shadow: var(--cy-glow); }
.cyber-theme .aff-url { display: grid; gap: 8px; min-inline-size: 0; }
.cyber-theme .aff-copy-main { justify-self: start; min-block-size: 52px; padding-inline: 28px; font-size: 1.0625rem; }
.cyber-theme .aff-url__label { font-weight: 700; }
.cyber-theme .aff-url__input { inline-size: 100%; min-inline-size: 0; min-block-size: 48px; padding: 10px 12px; border: 1px solid var(--cy-border); border-radius: 8px; background: var(--cy-bg); color: var(--cy-text); font: 600 1rem/1.4 var(--cy-mono); }
.cyber-theme .aff-code { font-family: var(--cy-mono); letter-spacing: .06em; color: var(--cy-text); }
.cyber-theme .aff-live { min-block-size: 1.5em; color: var(--cy-success); font-weight: 700; }
.cyber-theme .aff-live.is-error { color: var(--cy-warning); }
.cyber-theme .aff-share__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cyber-theme .aff-share__buttons > * { flex: 1 1 min(100%, 200px); }
.cyber-theme .aff-share__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 24px; align-items: start; }
.cyber-theme .aff-qr { display: grid; gap: 10px; justify-items: start; min-inline-size: 0; }
.cyber-theme .aff-qr__img { inline-size: 200px; max-inline-size: 100%; block-size: auto; padding: 8px; border-radius: 8px; background: #FFFFFF; image-rendering: pixelated; }
.cyber-theme .aff-qr .cyber-link { display: inline-flex; align-items: center; min-block-size: 44px; }
.cyber-theme .aff-presets { display: grid; gap: 14px; min-inline-size: 0; }
.cyber-theme .aff-preset { display: grid; gap: 6px; min-inline-size: 0; }
.cyber-theme .aff-preset__label { font-weight: 700; }
.cyber-theme .aff-preset__text { inline-size: 100%; min-inline-size: 0; padding: 10px 12px; border: 1px solid var(--cy-border); border-radius: 8px; background: var(--cy-bg); color: var(--cy-text); font: 400 .9375rem/1.7 var(--cy-font); resize: vertical; overflow-wrap: anywhere; }
.cyber-theme .aff-preset .cyber-action { justify-self: start; }
/* LINE・ブログ向けの長い文面は畳む（開いたときだけ textarea とコピーを出す） */
.cyber-theme .aff-preset--more { border: 1px solid var(--cy-border); border-radius: 8px; background: var(--cy-surface); }
.cyber-theme .aff-preset--more[open] { padding: 0 12px 12px; }
.cyber-theme .aff-preset__summary { display: flex; align-items: center; min-block-size: 48px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.cyber-theme .aff-preset--more[open] .aff-preset__summary { padding-inline: 2px; }
.cyber-theme .aff-preset--more > :where(textarea, .cyber-action) { margin-top: 6px; }

/* --- 会員ページ: 段階と進み具合 ------------------------------------------------ */
.cyber-theme .aff-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.cyber-theme .aff-stat { display: grid; align-content: start; gap: 6px; min-inline-size: 0; padding: 18px 20px; border: 1px solid var(--cy-border); border-top: 4px solid var(--aff-accent, var(--cy-border)); border-radius: 10px; background: var(--cy-surface); }
.cyber-theme .aff-stat__label { color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .aff-stat__value { font-size: 1.75rem; font-weight: 800; line-height: 1.3; }
.cyber-theme .aff-stat__pct { color: var(--aff-accent, var(--cy-mint)); font-family: var(--cy-mono); }
.cyber-theme .aff-grace { padding: 8px 12px; border-left: 3px solid var(--cy-warning); border-radius: 4px; background: var(--cy-raised); color: var(--cy-text); font-size: .875rem; }
.cyber-theme .aff-next { display: grid; gap: 6px; padding: 16px 18px; border-radius: 8px; background: var(--cy-raised); }
.cyber-theme .aff-next__date { font-weight: 800; }
.cyber-theme .aff-progress { display: grid; gap: 12px; }
.cyber-theme .aff-criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cyber-theme .aff-criterion { display: grid; gap: 6px; min-inline-size: 0; padding: 14px 16px; border: 1px solid var(--cy-border); border-radius: 8px; background: var(--cy-surface); }
.cyber-theme .aff-criterion__label { color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .aff-criterion__value { font-weight: 800; }
.cyber-theme .aff-criterion__rest { font-size: .875rem; font-weight: 700; }
.cyber-theme .aff-criterion.is-met .aff-criterion__rest { color: var(--cy-success); }
.cyber-theme .aff-bar { display: block; block-size: 8px; overflow: hidden; border-radius: 999px; background: var(--cy-raised); }
.cyber-theme .aff-bar__fill { display: block; block-size: 100%; max-inline-size: 100%; background: var(--cy-mint); }
.cyber-theme .aff-criterion.is-met .aff-bar__fill { background: var(--cy-success); }
.cyber-theme .aff-mini-tiers { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .aff-mini-tiers strong { color: var(--aff-accent); }
.cyber-theme .aff-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }

@media (max-width: 640px) {
  .cyber-theme .aff-share__grid { grid-template-columns: minmax(0, 1fr); }
  .cyber-theme .aff-copy-main { justify-self: stretch; }
  /* 会員メニュー（共通の _layout）は変えずに、この画面だけ上下の余白を詰めてコピーの操作を上げる。
     :has() が使えないブラウザでは今までどおりの余白になるだけ */
  .cyber-theme .cyber-page-head:has(~ .aff-member) { margin-block-end: 12px; padding-block: 4px 12px; }
  .cyber-theme .cyber-member-nav:has(~ .aff-member) { margin-block-end: 16px; }
  .cyber-theme .aff-member { gap: 28px; }
  .cyber-theme .aff-share { gap: 14px; padding: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  .cyber-theme .aff-bar__fill { transition: width var(--cy-reveal, 520ms) var(--cy-ease, ease); }
}