/* ============================================================
   litlink boost! — Creator App フェミニンテーマ
   LP世界観準拠: バイオレット×ピンクグラデ・白ベース・柔らかい影
   creator/index.html の最後に読み込む（tokens/boost.css を上書き）
   トークン定義は boost/shared/creator-tokens-compat.css
   （[data-palette="boost-legacy"] スコープ）へ統合済み（単一真実源）。
   ============================================================ */

body, #app { background:
  radial-gradient(120% 60% at 50% 0%, var(--bg-elevated) 0%, var(--bg-surface) 55%) fixed; }

/* ── カード: 白・角丸・やわらかい紫影 ── */
.stat-card, .panel, .campaign-card, .todo-item, .detail-card,
.notif-item, .score-card, .mypage-card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-elevated);
  box-shadow: 0 2px 10px rgba(124,58,237,.05);
  border-radius: var(--r-lg);
}

/* ── メインCTA: グラデーション ── */
/* 主操作は lilac-link → rose-link の90度グラデーションに白文字（DS 2.3）。色付きの光彩は外す。 */
.btn-primary, .btn-boost {
  background: var(--cr-cta-grad) !important;
  color: var(--text-inverse) !important;
  border: none;
  border-radius: var(--r-lg);
  box-shadow: none !important;
  font-weight: 700;
}
.btn-primary:active, .btn-boost:active { transform: scale(.97); }
.btn-ghost { border-radius: var(--r-lg); border: 1.5px solid var(--bg-elevated); background: var(--bg-surface); color: var(--text-primary); }

/* ── CCMP-001 ボタン3階層のユーティリティクラス──
   hero=--grad-cheer塗り（1画面1個）／secondary=白地+枠／ghost=枠なしテキスト。
   既存の.btn-primary/.btn-boost（グローバルhero）はそのまま維持し、新規実装から
   段階的にこのクラスへ寄せる（CGOV-002: 一括置換はしない）。 */
.btn-tier-hero {
  background: var(--cr-cta-grad) !important; color: var(--text-inverse) !important;
  border: none; border-radius: var(--r-lg);
  box-shadow: 0 10px 22px rgba(168,85,247,.35); font-weight: 700;
}
.btn-tier-secondary {
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: none; font-weight: 700;
}
.btn-tier-ghost {
  background: none; border: none; color: var(--cr-violet);
  box-shadow: none; font-weight: 700;
}

/* ── CPRI-005 金銭・審査の聖域──
   #s-wallet/#s-payout/#s-kyc/#s-setup/#s-input（受け取り準備の集中入力）・#s-accountの
   配下では、.btn-primary/.btn-boost（グローバルではhero=グラデ塗り）をprimary相当の
   単色ボタンへ上書きする。グローバル定義自体は他画面のCTAのため変更しない
   （CGOV-002: 触った箇所のみ・全画面一斉置換はしない）。 */
#s-wallet .btn-primary, #s-wallet .btn-boost,
#s-payout .btn-primary, #s-payout .btn-boost,
#s-kyc .btn-primary, #s-kyc .btn-boost,
#s-setup .btn-primary, #s-setup .btn-boost,
#s-input .btn-primary, #s-input .btn-boost,
#s-account .btn-primary, #s-account .btn-boost {
  background: var(--cr-violet) !important;
  box-shadow: none !important;
}

/* Button状態軸の追加（フォーカス可視・disabled・送信中）。値は上のルールの実効値を一切変えず、
   これまで存在しなかった疑似クラス／属性セレクタだけを新設する。 */
.btn-primary:focus-visible, .btn-boost:focus-visible, .btn-tier-hero:focus-visible,
.btn-tier-secondary:focus-visible, .btn-tier-ghost:focus-visible, .btn-ghost:focus-visible {
  outline: 2px solid var(--cr-violet);
  outline-offset: 2px;
}
.btn-primary[disabled], .btn-primary.is-disabled,
.btn-boost[disabled], .btn-boost.is-disabled,
.btn-tier-hero[disabled], .btn-tier-hero.is-disabled,
.btn-tier-secondary[disabled], .btn-tier-secondary.is-disabled,
.btn-tier-ghost[disabled], .btn-tier-ghost.is-disabled,
.btn-ghost[disabled], .btn-ghost.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary[aria-busy="true"], .btn-boost[aria-busy="true"], .btn-tier-hero[aria-busy="true"] {
  cursor: progress;
}

/* ── ホームゲージ: 極太黒 → グラデ文字 ── */
.home-ring-pct {
  font-weight: 700;
  background: var(--grad-cheer);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}
.home-ring-pct.near, .home-ring-pct.full {
  background: var(--grad-cheer);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}
#home-ring { filter: drop-shadow(0 0 10px rgba(168,85,247,.30)); }

/* ── LIVEピル・バッジ: ピンクアクセント ── */
.live-pill { background: var(--bg-surface); border: 1px solid var(--bg-elevated); box-shadow: 0 1px 4px rgba(124,58,237,.06); }
.live-pill .dot { background: var(--cr-pink); }
.remain-counter { background: var(--bg-elevated); color: var(--cr-pink); border: none; border-radius: var(--r-full); font-weight: 700; }

/* ── ボトムナビ: 白＋ぼかし・アクティブ紫 ── */
#bottom-nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--bg-elevated);
  box-shadow: 0 -4px 20px rgba(124,58,237,.06);
}
#bottom-nav .nav-tab.active { color: var(--cr-violet); }
#bottom-nav .nav-tab.active .nav-icon { filter: none; }

/* ── XPバー・ランク: 紫グラデ ── */
.xp-bar-fill, .score-bar-fill { background: var(--grad-cheer) !important; }

/* ── 見出し: 900は800に丸めて柔らかく ── */
h1, h2, .welcome-title, .onboard-title, .section-title { font-weight: 700; }

/* ── 入力: 丸く・紫フォーカス ── */
.input { border-radius: var(--r-md); border: 1.5px solid var(--bg-elevated); background: var(--bg-surface); }
.input:focus { border-color: var(--cr-violet); box-shadow: 0 0 0 3px rgba(168,85,247,.15); }

/* 旧マーケットカード(.mkc-ring-live/.mkc-live-dot/.mkc-ring-pct/.mkc-img/
   .mkc-bookmark/.mkc-meta)はclass="mkc-*"のマークアップが無く参照ゼロのため削除
   （現行は.ccard-*系・「新着」シェルフの.mkc-corner.newのみ実使用＝index.html側に残置）。 */
/* フィルタチップ: 線画アイコン整列・アクティブは薄紫 */
.filter-chip { display:inline-flex; align-items:center; gap:var(--sp-2); border-radius:var(--r-full); }
.filter-chip.active { background:linear-gradient(95deg,rgba(139,92,246,.14),rgba(236,72,153,.10));
  border:1px solid rgba(139,92,246,.4); color:var(--cr-violet); font-weight:700; }
/* 検索列 */
.mk-search { display:flex; align-items:center; gap:var(--sp-2); border-radius:var(--r-full); background:var(--bg-surface); border:1.5px solid var(--bg-elevated); }
.mk-filter-btn { display:inline-flex; align-items:center; gap:var(--sp-2); border-radius:var(--r-full);
  background:var(--bg-surface); border:1.5px solid var(--bg-elevated); color:var(--cr-violet); font-weight:700; }
/* 点滅・浮遊アニメーションの抑制（上品なフェードのみ残す） */
.live-pill .dot { animation: none; }
.remain-counter { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .live-pill .dot { animation: lb-pulse 2.4s ease-in-out infinite; }  /* ゆっくり */
}
/* ホームリング%: リング内に収める */
.home-ring-pct { font-size: clamp(40px, 14vw, 58px) !important; line-height: 1 !important; text-align: center; }
/* イニシャルアバター（絵文字廃止）。地色は単色のVioletカード面と
   同化しないよう、面より濃いトーンにして白い縁で切り離す。 */
/* 自分のアバター: 頭文字の上に画像を重ね、読み込めたら表示する（枠の大きさは変えない・空の円にしない）。 */
.ah-avatar { position: relative; }
.ah-avatar .ah-av-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  opacity: 0; transition: opacity var(--dur-fast) ease;
}
.ah-avatar .ah-av-img.is-ready { opacity: 1; background: var(--bg-surface); }
@media (prefers-reduced-motion: reduce) { .ah-avatar .ah-av-img { transition: none; } }
.av-initial { background: var(--grad-cheer) !important;
  color: var(--text-inverse); font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   creator 大規模刷新
   縦型リッチ案件カード／ランクアップ・クエスト／ステップカード列／報酬レポート
   ※ライブラリ禁止。アニメーションはCSS transition/keyframesのみ。
   ============================================================ */

/* ── 縦型リッチ案件カード（ホーム・さがす 共通 = campaignCardHTML） ── */
.ccard {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: 0 4px 18px rgba(124,58,237,.08);
  cursor: pointer; margin-bottom: var(--sp-4);
  transition: transform 120ms cubic-bezier(.2,0,0,1), box-shadow .2s ease, border-color .2s ease;
}
/* 押下 120ms。一様 scale だけなので画像の縦横比は変わらない */
.ccard:active { transform: scale(.985); }
/* 移動が苦手な人・演出オフ（body[data-fx="min"]）では拡大縮小をやめ、枠の色だけで押下を返す。 */
@media (prefers-reduced-motion: reduce) {
  .ccard { transition: border-color .2s ease; }
  .ccard:active { transform: none; border-color: var(--cr-violet); }
}
body[data-fx="min"] .ccard { transition: border-color .2s ease; }
body[data-fx="min"] .ccard:active { transform: none; border-color: var(--cr-violet); }
.ccard:hover { border-color: rgba(139,92,246,.35); box-shadow: 0 8px 26px rgba(124,58,237,.14); }
/* 入稿フォーマット整合: 高さ140px固定だとカード幅(SP390で約358px)に対し
   アスペクト比2.79となり、16:9入稿（2048×1152）の上下各18%がcoverで落ちていた
   （入稿キットv20260901「クリエイターの案件一覧カード（スマホ）: 上下 各18%カット」の実測どおり）。
   入稿原寸と同じ16:9枠にして、外周まで入稿画像をそのまま見せる。 */
.ccard-img { position: relative; aspect-ratio: 16/9; background: var(--bg-elevated); overflow: hidden; }
/* 入稿カバーに文字が載っているものが多く、cover だと端が切れて読めなくなるため contain。
   余った面は --bg-elevated で埋める（枠内の比率 16/9 は変えない）。 */
.ccard-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* contain では画像の外側（余白）まで覆ってしまい、状態バッジのコントラストも読みにくくなるため
   カバー全面の暗幕は使わない。バッジ側が自前の面を持つ。 */
.ccard-type {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: var(--fs-caption); font-weight: 700; color: var(--text-inverse); letter-spacing: .01em;
  background: rgba(26,22,37,.55); backdrop-filter: blur(6px);
  border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
}
.ccard-flag {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: var(--fs-caption); font-weight: 900; color: var(--text-inverse);
  border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
  background: var(--grad-cheer);
  box-shadow: 0 3px 10px rgba(236,72,153,.35);
}
.ccard-flag.deadline { background: var(--grad-cheer); }
.ccard-bkm {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.9); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(26,22,37,.18);
}
.ccard-bkm.bm-on svg { stroke: var(--cr-violet); fill: var(--cr-violet); }
.ccard-body { padding: var(--sp-3) var(--sp-4) 0; }
.ccard-brand { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.ccard-title {
  font-size: var(--fs-title); font-weight: 700; line-height: 1.35; margin-top: var(--sp-1); color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard-pay {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: linear-gradient(95deg, rgba(139,92,246,.10), rgba(236,72,153,.10));
  border: 1px solid rgba(139,92,246,.16);
}
.ccard-pay-lead { font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); }
.ccard-pay-num {
  font-size: var(--fs-hero); font-weight: 900; letter-spacing: -.03em;
  background: var(--grad-cheer);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.ccard-pay-num small { font-size: var(--fs-caption); font-weight: 700; }
.ccard-pay-note { flex-basis: 100%; font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }
/* バッジ連動: 再生成果報酬の単価がランク（バッジ）で変動することを
   カード上で一目で分かるようにする。主役は合計単価1つ、
   バッジマークは単価の右隣、内訳（基準額＋バッジボーナス）は補助1行に落とす。
   色付き背景・色枠は付けない（コンポーネント単位の色帯・色枠は禁止。単価カード自体の
   グラデはこの機能より前から存在する既存意匠のため踏襲する）。 */
.ccard-pay-badge {
  display: inline-flex; align-items: center; line-height: 0;
  /* baseline揃えの行に入れるため、数字の光学中心に合わせて僅かに下げる */
  transform: translateY(2px);
}
.ccard-pay-brk {
  flex-basis: 100%; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.ccard-pay-brk b { font-weight: 700; color: var(--text-primary); }
/* ランクアップで伸びる余地を示す一言（bronze等ボーナス0のとき）。煽らずに事実だけ述べる */
.ccard-pay-brk .ccard-pay-brk-next { color: var(--text-muted); }

/* 案件詳細の単価内訳（基準額＋バッジボーナス＝合計）。3行の計算式として読ませる。
   合計行だけを強調し、色は主役1つに集中させる。 */
.dt-unit-brk { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--text-secondary); }
.dt-unit-brk-row {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0;
  font-variant-numeric: tabular-nums;
}
.dt-unit-brk-row .dt-unit-brk-label { flex: 1; min-width: 0; }
.dt-unit-brk-row .dt-unit-brk-val { font-weight: 700; color: var(--text-primary); }
.dt-unit-brk-row.total {
  border-top: 1px solid var(--bg-elevated); margin-top: var(--sp-1); padding-top: var(--sp-2); font-size: var(--fs-ui);
}
.dt-unit-brk-row.total .dt-unit-brk-label { font-weight: 700; color: var(--text-primary); }
.dt-unit-brk-row.total .dt-unit-brk-val { font-size: var(--fs-body); color: var(--cr-violet); }
.dt-unit-brk-badge { display: inline-flex; align-items: center; line-height: 0; }
.dt-unit-brk-next { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }
/* 320px では「ラベル上／値下」の1列にする（2列のままだと値の列が細く縦長に割れる）。 */
@media (max-width: 340px) {
  .dt-unit-brk-row { flex-wrap: wrap; }
  .dt-unit-brk-row .dt-unit-brk-label { flex: 1 0 100%; }
  .dt-unit-brk-row .dt-unit-brk-val { flex: 1 0 100%; }
}
/* ランク別単価ミニ表: 新方式ではボーナス額を副次表示する（合計単価が主役） */
.rank-tier-bonus { font-size: var(--fs-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* 一覧カードの報酬は全幅の行で読ませる（内側2列＝.rk-tiles-2/-3 はカードでは使わない）。
   1行目＝固定報酬、2行目＝「＋」を伴う成果／再生報酬。固定が無い案件では1行目ごと出ない。
   金額は tabular-nums。単価が取れないときは0円で代用せず、取得できない旨をそのまま出す。 */
.ccard-rewards { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.ccard-reward-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  min-width: 0; font-size: var(--fs-body);
}
.ccard-reward-k { color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard-reward-v {
  font-size: var(--fs-title); font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* ランク特典の1行。淡いピンクの面は一覧カード内でこの行だけに使う（強調が複数あれば強調ゼロ）。
   金額は面の色に頼らず本文と同じ暗色にし、ラベル（{ランク}特典）と単位（/ 再生）を必ず併記する。 */
.ccard-reward-bonus {
  margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm); background: var(--rk-post-bg);
}
.ccard-reward-bonus-k { color: var(--text-secondary); font-size: var(--fs-caption); font-weight: 700; min-width: 0; }
.ccard-reward-bonus-v {
  color: var(--text-primary); font-size: var(--fs-body); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 340px) {
  .ccard-reward-line { flex-wrap: wrap; gap: 0 var(--sp-2); }
  .ccard-reward-v { white-space: normal; overflow-wrap: anywhere; }
  .ccard-reward-bonus-v { white-space: normal; overflow-wrap: anywhere; }
}
.ccard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--text-muted); }
/* WS-F: 参加アカウント条件の1行要約（crCondLine40で先頭40字に切ってから渡される）。
   本文表示ではないため1行省略（CTYP-005のタイトル系相当）。 */
.ccard-cond-line { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2);
  font-size: var(--fs-caption); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* WS-F: 進行カードの周回ピル（round>=2のときのみ・.cap-pillを流用し新規色を作らない） */
.wshero-round-pill { display: inline-flex; margin-top: var(--sp-1); width: fit-content; }
.ccard-bar { height: 6px; border-radius: var(--r-full); background: var(--bg-elevated); overflow: hidden; margin-top: var(--sp-2); }
.ccard-bar-fill {
  height: 100%; border-radius: var(--r-full); width: 0;
  background: var(--grad-cheer);
  transition: width .9s cubic-bezier(.34,1.56,.64,1);
}
.ccard-bar-fill.near { background: var(--grad-cheer); }
.ccard-foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
/* 案件棚CTAを再びhero(--grad-cheer)化する。1画面1heroの原則とは衝突するが、
   例外運用としてホームNBAカードのheroとカードCTAのheroが同一画面に共存することを許容する。 */
/* 一覧カードの主操作は輪郭（Secondary）。ホームのヒーローが濃いグラデの面になったため、
   同じ画面にグラデCTAを何枚も並べると強調が分散する（1画面のhero CTAは1個）。
   カード全体が詳細への遷移になっているので、この操作は「同じ行き先の明示」の役割。 */
.ccard-apply {
  flex: 1; min-height: 46px; border: 1px solid var(--cr-violet); border-radius: var(--r-md); cursor: pointer;
  background: var(--bg-surface); color: var(--cr-violet);
  font-family: inherit; font-size: var(--fs-body); font-weight: 700;
  transition: transform .15s ease, background-color .2s ease, opacity .2s ease, border-color .2s ease;
}
.ccard-apply:active { background: var(--bg-elevated); }
.ccard-apply:active { transform: scale(.97); }
.ccard-apply[disabled] { background: var(--bg-elevated); color: var(--text-muted); box-shadow: none; cursor: default; border: 1px solid var(--bg-elevated); }
.ccard-more { flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--cr-violet); cursor: pointer; padding: var(--sp-2) var(--sp-1); }

/* 旧・ランクチップ（ホームヘッダ内の#home-rank-chip/#home-unit-line）は
   バッジゾーン(.hhc-badge-zone)へ統合されHTMLから削除済みのため、対応する.rank-chip-btn/.cr-unit-line
   （参照ゼロ）も削除。 */

/* ── ランクアップカード（マイページ主役） ──
   ホームのバッジゾーンと同構成のライト版（白カード）へ変更。
   旧・紫グラデ濃色版（::beforeの装飾ブロブ含む）は廃止。
   （新キャラ差し替えで、カード上端から覗く演出=rankup-peekは新キャラに適合ポーズが無いため削除） */
.rankup-card {
  position: relative; z-index: 1; overflow: visible;
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5) var(--sp-4); margin: 0 0 var(--sp-3);
  background: var(--bg-surface); border: 1px solid var(--bg-elevated);
  color: var(--text-primary); box-shadow: 0 8px 22px rgba(124,58,237,.10);
}
.rankup-head { display: flex; align-items: center; gap: var(--sp-3); position: relative; }
/* D案モック準拠: モック.bc-rowと同構成 — ランク名＋単価ピルを横並び1行、
   その下に短い目標1行（.rankup-goal）、右上にXP比。「いまのランク」ラベル(.rankup-now)は廃止。 */
.rankup-name-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.rankup-name { font-size: var(--fs-body); font-weight: 900; letter-spacing: .01em; line-height: 1.2; color: var(--text-primary); }
.rankup-unit { flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--cr-violet); background: rgba(139,92,246,.10); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2); display: inline-block; }
.rankup-xp-ratio { flex-shrink: 0; align-self: flex-start; font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.rankup-gauge { position: relative; height: 8px; border-radius: var(--r-full); background: var(--bg-elevated); overflow: hidden; margin-top: var(--sp-3); }
.rankup-gauge-fill {
  height: 100%; width: 0; border-radius: var(--r-full);
  background: var(--grad-cheer);
  transition: width 1.1s cubic-bezier(.34,1.56,.64,1);
}
.rankup-goal { font-size: var(--fs-caption); font-weight: 700; margin-top: var(--sp-1); line-height: 1.5; color: var(--text-secondary); }
.rankup-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; margin-left: auto; }
.rankup-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rankup-ring-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 900; letter-spacing: -.02em;
}

/* ── 初回ログイン紙芝居: 全画面グレーアウト＋ヒーロー型カード ── */
#hero-tut-overlay {
  position: fixed; inset: 0; z-index: 1900;
  background: rgba(26,22,37,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 72px var(--sp-5) 0; overscroll-behavior: contain; touch-action: none;
}
.hero-tut-card {
  position: relative; width: 100%; max-width: 390px; min-height: 380px;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); background: var(--grad-cta);
  color: var(--text-inverse); box-shadow: 0 18px 48px rgba(60,40,160,.45);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); overflow: hidden; cursor: pointer;
}
.hero-tut-card::after {
  content: ''; position: absolute; top: -70px; right: -50px; width: 190px; height: 190px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.hero-tut-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.22); color: var(--text-inverse); font-size: var(--fs-body); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hero-tut-body { flex: 1; display: flex; }
.hero-tut-slide {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-4) var(--sp-2) var(--sp-2); position: relative; z-index: 1;
  animation: heroTutIn .45s ease-out;
}
@keyframes heroTutIn { 0% { opacity: 0; transform: translateX(26px); } 100% { opacity: 1; transform: translateX(0); } }
.hero-tut-chara { width: 92px; height: 92px; object-fit: contain; animation: lb-bob 3s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(40,20,120,.35)); }
.hero-tut-icon { font-size: 52px; line-height: 1; animation: lb-bob 3s ease-in-out infinite; }
.hero-tut-step {
  font-size: var(--fs-caption); font-weight: 900; letter-spacing: .08em; color: var(--violet-dim);
  background: var(--bg-surface); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3);
}
.hero-tut-title { margin-top: var(--sp-3); font-size: var(--fs-title); font-weight: 900; letter-spacing: .01em; }
.hero-tut-text { margin-top: var(--sp-2); font-size: var(--fs-ui); line-height: 1.8; opacity: .92; max-width: 300px; }
.hero-tut-text b { color: var(--cr-hero-spark); }
.hero-tut-check {
  margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 700; opacity: .92; cursor: pointer;
}
.hero-tut-check input { width: 16px; height: 16px; accent-color: var(--text-inverse); }
.hero-tut-cta {
  margin-top: var(--sp-3); width: 100%; max-width: 280px; height: 46px;
  border: none; border-radius: var(--r-md); cursor: pointer;
  background: var(--bg-surface); color: var(--violet-dim);
  font-family: inherit; font-size: var(--fs-body); font-weight: 900;
  box-shadow: 0 8px 20px rgba(20,10,60,.25);
}
.hero-tut-cta:active { transform: scale(.97); }
.hero-tut-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-3); }
.hero-tut-dots { display: flex; gap: var(--sp-2); }
.hero-tut-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: rgba(255,255,255,.35); transition: width .25s ease, background .25s ease; }
.hero-tut-dot.on { width: 18px; background: var(--bg-surface); }
.hero-tut-skip { font-size: var(--fs-caption); font-weight: 700; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .hero-tut-slide, .hero-tut-chara, .hero-tut-icon { animation: none; }
}
body[data-fx="min"] .hero-tut-slide, body[data-fx="min"] .hero-tut-chara, body[data-fx="min"] .hero-tut-icon { animation: none; }

/* ── クエストリスト（Duolingo風チェックリスト） ── */
.quest-sec { margin-top: var(--sp-4); }
.quest-sec-title { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); letter-spacing: .06em; margin: 0 0 var(--sp-2) var(--sp-1); }
.quest-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); cursor: pointer;
  transition: transform .16s ease, border-color .2s ease, background .2s ease;
}
.quest-row:active { transform: scale(.985); }
.quest-row:hover { border-color: rgba(139,92,246,.3); }
/* 完了カードの強弱を明確化。従来はチェックマーク＋打ち消し線のみで
   「完了した」と一目で分かりにくかったため、カード全体をopacityで後退させる
   （Orientation要素の後退原則・グレースケール検証にも整合）。 */
.quest-row.done { background: var(--bg-surface); cursor: default; opacity: .55; }
.quest-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--bg-elevated); background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-ui); font-weight: 900; color: var(--text-inverse);
  transition: background .2s ease, border-color .2s ease;
}
.quest-row.done .quest-check {
  border-color: transparent; background: var(--grad-cheer);
  animation: questPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes questPop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .quest-row.done .quest-check { animation: none; } }
body[data-fx="min"] .quest-row.done .quest-check { animation: none; }
.quest-title { flex: 1; min-width: 0; font-size: var(--fs-ui); font-weight: 700; color: var(--text-primary); }
.quest-row.done .quest-title { color: var(--text-muted); text-decoration: line-through; }
.quest-xp {
  flex-shrink: 0; font-size: var(--fs-caption); font-weight: 900; color: var(--cr-violet);
  background: rgba(139,92,246,.12); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
}
.quest-row.done .quest-xp { color: var(--text-muted); background: var(--bg-elevated); }

/* ── SNSエンゲージメント報告 : 最優先クエスト ── */
.quest-row.priority { border-color: rgba(236,72,153,.35); background: linear-gradient(135deg, rgba(139,92,246,.05), rgba(236,72,153,.07)); }
.quest-priority-badge {
  display: inline-block; flex-shrink: 0; font-size: var(--fs-caption); font-weight: 900; color: var(--text-inverse);
  background: var(--grad-cheer); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2);
  letter-spacing: .01em; margin-left: var(--sp-2); vertical-align: middle;
}
/* compositeクエストの子進捗ミニ表示（例: 2/3）。ジャンル選択のような単一子クエストには出さない
   （旧例示のKYCは機能廃止済み・複合クエストからも削除済み） */
.quest-progress-badge {
  flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary);
  background: var(--bg-elevated); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2);
}

/* ── クエスト3ステージ表示 W2 ──
   「現在ステージ」だけを展開し、完了済み/未来のステージは1行に折りたたむ（タップで開閉）。 */
.quest-stage { margin-top: var(--sp-4); }
.quest-stage-head {
  display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2) var(--sp-1); cursor: pointer;
}
.quest-stage-step {
  flex-shrink: 0; font-size: var(--fs-caption); font-weight: 900; color: var(--cr-violet);
  background: rgba(139,92,246,.12); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
}
.quest-stage-title { font-size: var(--fs-ui); font-weight: 700; color: var(--text-primary); }
.quest-stage-row.collapsed {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); margin-bottom: var(--sp-2); cursor: pointer;
  transition: transform .16s ease, border-color .2s ease;
}
.quest-stage-row.collapsed:active { transform: scale(.985); }
.quest-stage-row.collapsed:hover { border-color: rgba(139,92,246,.3); }
.quest-stage-row.collapsed.done { background: var(--bg-surface); opacity: .55; }
.qs-collapsed-main { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.qs-collapsed-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 900; color: var(--text-inverse);
  background: var(--grad-cheer);
}
.quest-stage-row.collapsed.future .qs-collapsed-check { background: var(--bg-elevated); }
.qs-collapsed-title { font-size: var(--fs-ui); font-weight: 700; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quest-stage-row.collapsed.done .qs-collapsed-title { color: var(--text-muted); }
.quest-stage-row.collapsed.future .qs-collapsed-title { color: var(--text-muted); }
.qs-collapsed-right { flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }

/* ── ポートフォリオ ── */
.pf-strip { display: flex; gap: var(--sp-3); overflow-x: auto; padding: var(--sp-1) 0 var(--sp-1); -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md); transition: background .15s ease, box-shadow .15s ease; }
.pf-strip::-webkit-scrollbar { display: none; }
/* ドラッグ&ドロップ4状態のうち dragging/disabled（restingは既定、errorはpf-item側） */
.pf-strip.pf-strip-dragging { background: rgba(139,92,246,.08); box-shadow: inset 0 0 0 2px var(--violet); }
.pf-strip.pf-strip-disabled { opacity: .55; pointer-events: none; }
.pf-item {
  position: relative; flex: 0 0 auto; width: 96px; height: 128px; border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-elevated); opacity: 0; transform: scale(.94); transition: opacity .1s ease, transform .1s ease;
}
/* 受理〜約100msで「収まった」トランジション */
.pf-item.pf-item-in, .pf-item.pf-item-uploading, .pf-item.pf-item-error { opacity: 1; transform: scale(1); }
.pf-item img, .pf-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 差し替え/削除: PCはhoverで重ねて出す。タッチ環境は常時表示にフォールバック（hover専用機能禁止） */
.pf-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: rgba(26,22,37,.42); opacity: 0; transition: opacity .15s ease;
}
.pf-item:hover .pf-overlay, .pf-item:focus-within .pf-overlay { opacity: 1; }
@media (hover: none) { .pf-overlay { opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(26,22,37,.5) 100%); align-items: flex-end; padding-bottom: var(--sp-2); } }
.pf-ov-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--text-primary); font-size: var(--fs-ui); font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pf-ov-btn.pf-ov-danger { background: var(--bg-surface); color: var(--danger); }
/* アップロード中: skeletonシマー（グレー枠→fade-in。プレビュー画像は既に見えている状態に重ねる） */
.pf-item-uploading .pf-skel {
  position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.05) 70%);
  background-size: 200% 100%; animation: pfSkelShine 1.3s ease-in-out infinite;
}
@keyframes pfSkelShine { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .pf-item-uploading .pf-skel { animation: none; background: rgba(255,255,255,.18); } }
.pf-item-error { box-shadow: inset 0 0 0 2px var(--danger); }
.pf-item-error .pf-overlay { opacity: 1; background: rgba(26,22,37,.5); }
.pf-err-badge {
  position: absolute; left: 6px; bottom: 6px; font-size: var(--fs-caption); font-weight: 700; color: var(--text-inverse);
  background: var(--danger); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2); pointer-events: none;
}
/* HEIC/HEVC等で<img>/<video>がデコード不可のとき、
   何も見えない（無反応）ままにしない代替表示（crPfMediaErrorFallback）。 */
.pf-media-fallback {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); background: var(--bg-elevated); color: var(--text-secondary);
}
.pf-media-fallback-icon { font-size: var(--fs-hero); }
.pf-media-fallback-badge { font-size: var(--fs-caption); font-weight: 700; color: var(--success); }
.pf-media-fallback-name { max-width: 100%; padding: 0 var(--sp-2); box-sizing: border-box; font-size: var(--fs-caption); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 動画の1コマ目画像の上に重ねる再生マーク（タップ操作は持たない表示だけの印） */
.pf-play-badge { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(26,22,37,.55); color: var(--text-inverse); font-size: var(--fs-caption); line-height: 1; pointer-events: none; }
.pf-add {
  flex: 0 0 auto; width: 96px; height: 128px; border-radius: var(--r-md); cursor: pointer;
  border: 1.5px dashed var(--bg-elevated); background: var(--bg-surface); color: var(--cr-violet);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  font-size: var(--fs-caption); font-weight: 700; font-family: inherit;
}

/* ── 提出物アップロード: media-uploader（.mu-*一式）は
   S3で shared/boost.css へ移設し
   全ロールへ開放した。ここでは重複定義を削除（マークアップ・class名は変更なし）。 ── */

/* ── メニューのグループ見出し ──
   .profile-menu を3グループに分割したため、下余白は最後のグループ（その他）だけに残す。
   見出しの左位置は .profile-menu の左padding（--sp-5）と揃える。 */
.menu-group-title { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); letter-spacing: .06em; padding: var(--sp-5) var(--sp-5) var(--sp-2); }
.profile-menu[data-menu-group] { padding-bottom: 0; }
.profile-menu[data-menu-group="other"] { padding-bottom: var(--sp-8); }

/* ── 進行中: ステップカード列 ── */
.wsstep {
  position: relative; border-radius: var(--r-lg); border: 1px solid var(--bg-elevated); background: var(--bg-surface);
  padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-3); box-shadow: 0 2px 10px rgba(124,58,237,.05);
  transition: border-color .2s ease, box-shadow .2s ease;
  /* 現在地ヘッダー(.wshdr)タップ時のscrollIntoViewで、
     #ws-header-detail（sticky .page-header）に隠れないよう確保する余白。 */
  scroll-margin-top: 96px;
}
/* wsScrollToCurrentStep()着地後の一瞬のハイライト（既存.wsstep.currentの紫強調と同系統の
   パルスに留め、新しい色は追加しない＝CCLR-003準拠）。 */
@keyframes wsstep-flash-pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(124,58,237,.16); }
  40% { box-shadow: 0 0 0 4px rgba(139,92,246,.35), 0 10px 26px rgba(124,58,237,.16); }
}
.wsstep.wsstep-flash { animation: wsstep-flash-pulse 1.1s ease; }
body[data-fx="min"] .wsstep.wsstep-flash { animation: none; }
@media (prefers-reduced-motion: reduce) { .wsstep.wsstep-flash { animation: none; } }
.wsstep-head { display: flex; align-items: center; gap: var(--sp-3); }
.wsstep-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 900; background: var(--bg-elevated); color: var(--text-muted);
}
.wsstep-label { flex: 1; min-width: 0; font-size: var(--fs-ui); font-weight: 700; color: var(--text-secondary); }
.wsstep.done .wsstep-num { background: rgba(34,197,94,.15); color: var(--success); }
.wsstep.done .wsstep-label { color: var(--success); }
.wsstep.current {
  border-color: rgba(139,92,246,.45); box-shadow: 0 10px 26px rgba(124,58,237,.16);
  background: var(--bg-surface);
}
.wsstep.current .wsstep-num { background: var(--grad-cheer); color: var(--text-inverse); }
.wsstep.current .wsstep-label { color: var(--text-primary); font-weight: 900; font-size: var(--fs-body); }
.wsstep-body { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.7; }
/* ステップカード化: 各カードの詳細タスク1文＋担当タグ */
.wsstep-task { margin-top: var(--sp-2); padding-left: var(--sp-10); font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.65; }
.wsstep.current .wsstep-task { color: var(--text-secondary); }
.wsstep-owner {
  flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted);
  background: var(--bg-elevated); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2);
}
.wsstep-owner.me { color: var(--cr-violet); background: rgba(139,92,246,.10); }
.wsstep.current .wsstep-owner.me { color: var(--text-inverse); background: var(--violet); }
.wsstep-cta {
  margin-top: var(--sp-3); width: 100%; height: 44px; border: none; border-radius: var(--r-md); cursor: pointer;
  background: var(--cr-cta-grad); color: var(--text-inverse);
  font-family: inherit; font-size: var(--fs-ui); font-weight: 700;
  box-shadow: 0 8px 18px rgba(168,85,247,.30);
}
.wsstep-cta:active { transform: scale(.97); }
.wsstep-cta.ghost { background: var(--bg-surface); color: var(--cr-violet); border: 1.5px solid var(--bg-elevated); box-shadow: none; }

/* 2: .wsstep-awaiting*（旧・ステップカード本文の3点セット再掲）は
   wsStepBodyHTMLからマークアップを削除し参照ゼロになったため削除
   （3点セットは.wshdr側=wsCurrentHeaderHTMLに一本化済み）。 */

/* 2: 旧72pxサムネ横並びリスト(.wscard/.wscard-thumb/.wscard-main)は
   大判ヒーローカード化で置き換え済み・参照ゼロのため削除。
   .wscard-bar/.wscard-bar-fill（進捗バー）は現行の大判カードでも再利用中のため残す。 */
.wscard-bar { height: 5px; border-radius: var(--r-full); background: var(--bg-elevated); overflow: hidden; margin-top: var(--sp-2); }
.wscard-bar-fill { height: 100%; border-radius: var(--r-full); background: var(--grad-cheer); transition: width .8s ease; }

/* ── 報酬: 期間チップ＋サマリー ── */
.earn-sum { display: flex; gap: var(--sp-3); padding: 0 var(--sp-5); }
.earn-sum-card { flex: 1; min-width: 0; border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-4); color: var(--text-inverse); }
.earn-sum-card.confirmed { background: var(--grad-cheer); box-shadow: 0 10px 24px rgba(124,58,237,.26); }
.earn-sum-card.pending { background: var(--grad-cheer); box-shadow: 0 10px 24px rgba(236,72,153,.24); }
.earn-sum-label { font-size: var(--fs-caption); font-weight: 700; opacity: .88; }
.earn-sum-val { font-size: var(--fs-hero); font-weight: 900; margin-top: var(--sp-1); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.earn-sum-sub { font-size: var(--fs-caption); opacity: .85; margin-top: var(--sp-1); }
.earn-camp-row {
  display: flex; align-items: center; gap: var(--sp-3); background: var(--bg-surface); border: 1px solid var(--bg-elevated);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); cursor: pointer;
  transition: transform .16s ease, border-color .2s ease;
}
.earn-camp-row:active { transform: scale(.99); }
.earn-type-badge { font-size: var(--fs-caption); font-weight: 700; color: var(--cr-violet); background: rgba(139,92,246,.12); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2); }

/* ── ランク別単価ミニ表（案件詳細・ランク説明） ── */
.rank-tier { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-md); }
.rank-tier.cur { background: rgba(139,92,246,.12); }
.rank-tier-name { font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); }
.rank-tier-unit { margin-left: auto; font-size: var(--fs-caption); font-weight: 900; color: var(--cr-violet); font-variant-numeric: tabular-nums; }
/* 320pxでは「ラベル上／値下」の1列にする（横2列のままだと値側が1文字ずつ縦に割れる）。 */
@media (max-width: 340px) {
  .rank-tier { flex-wrap: wrap; }
  .rank-tier-unit { margin-left: 0; flex: 1 0 100%; }
}
/* ランク別の単価表シート（crDvOpenRankTable）: 単価の比較だけを出す。 */
.rk-table-rows { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-3) 0 var(--sp-4); }
/* 次ランクのときの単価は内訳の合計行とは別扱い（合計の下に控えめに置く） */
.dt-unit-brk-next-row { color: var(--text-muted); }
.dt-unit-brk-next-row .dt-unit-brk-val { color: var(--text-secondary); }

/* ── リング内%ピル: グラデ文字を白文字に戻す ── */
.home-ring-pct-pill .home-ring-pct,
.home-ring-pct-pill .home-ring-pct.near,
.home-ring-pct-pill .home-ring-pct.full {
  font-size: var(--fs-section) !important;
  background: none !important;
  -webkit-background-clip: initial !important; background-clip: initial !important;
  color: var(--text-inverse) !important;
}

/* ============================================================
   C2-1: マイページ walletタブ — サマリーカードのボタン2個。
   .wal-cta（白背景・primary相当）はそのまま、ghost相当の透過バリアントのみ追加。
   ============================================================ */
.wal-cta.wal-cta-ghost {
  background: rgba(255,255,255,.14); color: var(--text-inverse); border: 1.5px solid rgba(255,255,255,.5);
}

/* ============================================================
   C1-2: ホーム — Next Best Actionカード（旧・対応が必要な項目バナー）
   WP-6: 「1件+他N件›」の1行バナーを廃止し、最大3件のカード列へ刷新。
   各カード=タイトル全文+1アクションボタン。先頭カードのみhero（CPRI-003: 1画面1hero）、
   2件目以降はsecondary（.btn-tier-secondary）。生成元refreshAttnBanner(:creator/index.html)。
   ============================================================ */
.home-nba-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 var(--sp-5) var(--sp-4); }
.home-nba-card {
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border);
}
.home-nba-kicker { font-size: var(--fs-caption); font-weight: 700; color: var(--violet-bright); opacity: .9; }
.home-nba-title { font-size: var(--fs-ui); font-weight: 700; color: var(--text-primary); margin-top: var(--sp-1); }
.home-nba-sub { font-size: var(--fs-caption); color: var(--text-secondary); margin-top: var(--sp-1); }
.home-nba-btn { margin-top: var(--sp-3); width: 100%; height: 44px; font-size: var(--fs-ui); }
.home-nba-btn.btn-tier-hero { height: 52px; }
.home-nba-more-row { text-align: center; font-size: var(--fs-caption); font-weight: 700; color: var(--violet-bright); padding: var(--sp-2); cursor: pointer; }
/* 「確認しました」等のgood_news通知をホームへ合流表示する行。
   アクションボタンを持たないread-only行のため、タップ可能であることをカーソルで示す。 */
.home-nba-card-readonly { cursor: pointer; }
/* トップボードは最新2件まで＋「他N件 › すべて見る」。2枚のカード高さを
   揃えるため、タイトル・本文はそれぞれ1行クランプにする（省略はタイトル系のみ・CTYP-005）。 */
.home-nba-clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* T4: ボード見出し（カード外・2枚のカード高さを揃えるため）。
   ボードはflex column（.home-nba-list）なので、ピルが全幅に伸びないよう先頭寄せにする。 */
.home-nba-kicker-head { align-self: flex-start; margin-bottom: var(--sp-1); }
/* 通知（いまやること）。ウィジェットの外・masthead の直下に置く独立領域で、
   出すのは1件＋「ほか N件」だけ。行（開く）と閉じるは別のボタンに分ける。
   閉じてもホームでの表示が畳まれるだけで、未読・対応待ち・提出状態は変わらない。 */
.home-notice { margin: 0 var(--sp-5) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.home-notice-row {
  display: flex; align-items: stretch; gap: var(--sp-1);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.hn-open {
  appearance: none; -webkit-appearance: none; background: none; border: none; font: inherit;
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-2) var(--sp-3); text-align: left; cursor: pointer;
  color: var(--text-primary); border-radius: var(--r-lg);
}
.hn-cover {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md);
  overflow: hidden; background: var(--bg-elevated);
}
.hn-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* 長い案件名・長い作業名でも行の高さを伸ばさない（全文は行き先の画面が持つ）。 */
.hn-name { font-size: var(--fs-caption); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-act { font-size: var(--fs-body); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-notice-row:has(.hn-cta) .hn-act { white-space: normal; overflow: visible; text-overflow: clip; }
.hn-cta { flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); }
.hn-chev { flex-shrink: 0; color: var(--text-muted); font-weight: 700; }
.hn-close {
  appearance: none; -webkit-appearance: none; background: none; border: none; font: inherit;
  flex-shrink: 0; width: 44px; min-height: 44px; cursor: pointer;
  color: var(--text-muted); border-radius: var(--r-lg);
}
.hn-more {
  appearance: none; -webkit-appearance: none; background: none; border: none; font: inherit;
  align-self: flex-start; min-height: 44px; padding: 0 var(--sp-1); cursor: pointer;
  font-size: var(--fs-caption); font-weight: 700; color: var(--violet);
}
.hn-open:focus-visible,
.hn-close:focus-visible,
.hn-more:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* 出現は短いフェード＋6pxの移動だけ（無限ループ・バウンスは持たない）。 */
@keyframes hnIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.home-notice-row { animation: hnIn 180ms cubic-bezier(.2,0,0,1); }
@media (prefers-reduced-motion: reduce) { .home-notice-row { animation: none; } }
body[data-fx="min"] .home-notice-row { animation: none; }

/* ============================================================
   AI入力アシスタント W2: SNS報告フォームのスクショ読み取りプレフィル。
   ============================================================ */
.sns-ai-banner {
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); font-weight: 700; color: var(--cr-violet);
  background: linear-gradient(95deg, rgba(139,92,246,.10), rgba(236,72,153,.10));
  border: 1px solid rgba(139,92,246,.25); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); line-height: 1.5;
  animation: snsAiBannerIn .3s ease-out;
}
@media (prefers-reduced-motion: reduce) { .sns-ai-banner { animation: none; } }
body[data-fx="min"] .sns-ai-banner { animation: none; }
@keyframes snsAiBannerIn { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } }
/* プレフィルされた欄のハイライト（ユーザーが編集/選択し直すとJS側でクラスを外す） */
.sns-ai-filled { border-color: var(--cr-violet) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.16); background: var(--bg-surface); }

/* ============================================================
   C4: 案件詳細 — サマリー横並び帯
   達成率リングカード＋報酬カードを統合圧縮（報酬｜締切｜参加人数｜達成率）。
   ============================================================ */
.dt-sum-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.dt-sum-cell { flex: 1; min-width: 0; }
.dt-sum-cell.dt-sum-reward { flex: 1.3; }
.dt-sum-label { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); letter-spacing: .01em; margin-bottom: var(--sp-1); white-space: nowrap; }
.dt-sum-val { font-size: var(--fs-body); font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.25; }
.dt-sum-val-sm { font-size: var(--fs-ui); }
.dt-sum-reward .dt-reward-num { font-size: var(--fs-section); }
.dt-sum-reward .dt-reward-num small { font-size: var(--fs-caption); }
.dt-sum-gauge { display: flex; justify-content: flex-end; flex: 0 0 auto; }
/* index.html内<style>の .dt-gauge-ring(84px) はこのファイルより後段で読まれるため、
   同詳細度だと負ける。複合セレクタで詳細度を上げて46pxを確実に効かせる。 */
.dt-gauge-ring.dt-gauge-ring-sm { width: 46px; height: 46px; }
.dt-gauge-ring-sm .dt-gauge-label { font-size: var(--fs-caption); }
.dt-gauge-ring-sm .dt-gauge-pct { font-size: var(--fs-ui); }
@media (max-width: 400px) {
  .dt-sum-row { flex-wrap: wrap; }
  .dt-sum-cell { flex: 1 1 calc(50% - var(--sp-3)); }
  .dt-sum-cell.dt-sum-reward { flex: 1 1 100%; }
}

/* ============================================================
   Boost! マスコット演出
   → s-welcomeの読み込み時アニメーション（手を振るループ）は全廃し静止画1枚化。
   配置2箇所（いずれもユーザー操作起点。読み込み時の自動再生ではない）:
   ①応募完了(.ac-sheet)（stand→thumbsup 1回切替・forwards）
   ②ランクアップ祝賀(.ru-overlay)（stand→thumbsup→jump(bounce)→lb-bob浮遊継続）
   実装方式: 1つの<img>のsrcをJSで切り替えるフリップブックではなく、ポーズ画像を
   同じ場所に重ねてCSS animationのopacity/visibilityをstepエッジで切替（forwards・1回のみ）。
   素材は新キャラ正式版（thumbsup/stand/jump/rocket/smile/surprise/face/avatar の .webp+@2x.webp）。
   浮遊(lb-bob)のみ常時ループ許可・ポップ/バウンス/フリップは表示時1回きり。
   ============================================================ */
.chara { display: block; pointer-events: none; user-select: none; -webkit-user-select: none; }
/* 既存welcomeマスコット(lb-bob 3s、s-welcome内インラインstyleで指定)にreduced-motion/data-fx停止を効かせるフック。
   lb-bobキーフレーム自体はcreator.html(旧版)にのみ定義されていて現行index.htmlには無かったため、
   このファイルへ復元する（既存挙動の再現・拡張目的で流用: welcomeラッパーの浮遊にも使う）。 */
@keyframes lb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes charaPopIn { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes charaBounceIn {
  0% { transform: translateY(24px) scale(.75); opacity: 0; }
  60% { transform: translateY(-10px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* 1コマだけ「保持→末尾で消える」/「隠れたまま→末尾で現れる」の汎用ハードカット。
   duration・delayを利用側classで指定して各シーンのタイミングに流用する。 */
@keyframes charaHoldThenHide { 0%, 99% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes charaHoldThenShow { 0%, 99% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }

/* ① 応募完了シート上部: ポップイン→stand 0.6s→thumbsup へ1回切替して止まる（forwards・ループなし） */
.ac-chara-wrap { position: relative; display: inline-block; width: 96px; height: 96px; margin: 0 auto var(--sp-3); animation: charaPopIn .36s ease-out; }
.ac-chara-wrap .chara { position: absolute; inset: 0; width: 96px; height: 96px; object-fit: contain; }
.ac-chara-a { animation: charaHoldThenHide .96s steps(1) forwards; }
.ac-chara-b { opacity: 0; animation: charaHoldThenShow .96s steps(1) forwards; }

/* ② ランクアップ祝賀 中央: stand(.5s)→thumbsup(.5s)→jump(バウンスイン)→以後ゆる浮遊。
   3コマの切替はstep・1回のみ。lb-bobはbounce終了時刻(1.52s)から開始し重ならない。 */
.ru-chara-wrap { position: relative; width: 140px; height: 140px; margin: 0 auto var(--sp-5); }
.ru-chara-wrap .chara { position: absolute; inset: 0; width: 140px; height: 140px; object-fit: contain; }
.ru-chara-a { animation: charaHoldThenHide .5s steps(1) forwards; }
.ru-chara-b { opacity: 0; animation: charaRuMidWindow 1s steps(1) forwards; }
.ru-chara-c { animation: charaBounceIn .52s ease-out 1s both, lb-bob 3s ease-in-out 1.52s infinite; }
@keyframes charaRuMidWindow { 0%, 50% { opacity: 0; visibility: hidden; } 50.01%, 99% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .ac-chara-wrap { animation: none !important; }
  .ac-chara-a { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
  .ac-chara-b { animation: none !important; opacity: 1 !important; visibility: visible !important; }
  .ru-chara-a, .ru-chara-b { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
  .ru-chara-c { animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
}
body[data-fx="min"] .ac-chara-wrap { animation: none !important; }
body[data-fx="min"] .ac-chara-a { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
body[data-fx="min"] .ac-chara-b { animation: none !important; opacity: 1 !important; visibility: visible !important; }
body[data-fx="min"] .ru-chara-a, body[data-fx="min"] .ru-chara-b { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
body[data-fx="min"] .ru-chara-c { animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* ============================================================
   ホーム/マイページのリニューアル:
   A. ホーム — .home-hero-card にランクバッジゾーン＋キャラ登場演出を統合
   B. マイページ — グラデーショントップ＋ライト版バッジカード＋イラストタイルメニュー
   セレクタは既存の同名ルール（index.html内styleブロックのhome-hero-card/hhc-系/pf-tabbar）より後段の
   creator-feminine.cssで読み込まれるため、上書きが必要な箇所は `.home-hero-card.hhc-gradient` の
   ように複合クラスで詳細度を上げている（新規インライン<style>は追加しない）。
   ============================================================ */

/* 金額・件数・KPIはtabular-nums必須。既存コードは.ccard-pay-num等クラス個別に
   指定済みだが汎用ユーティリティが無かったため追加（本ブラッシュアップの新規数値表示で使用）。 */
.num { font-variant-numeric: tabular-nums; }

/* ── A-1: ホームヒーローをvioletグラデ化（D案モック準拠: tokens.cssの--grad-ctaを使用） ── */
.home-hero-card.hhc-gradient {
  background: var(--grad-cta);
  border-color: transparent; position: relative; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: 0 8px 28px rgba(100,100,253,.22);
}
/* マイページのハブ（#pf-hub-card）・初回ログインの紙芝居（.hero-tut-card）は、ホームの活動ウィジェットと同じ面（--grad-cta）を使う。 */
.home-hero-card.hhc-gradient::after {
  content: ''; position: absolute; top: -70px; right: -50px; width: 190px; height: 190px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.home-hero-card.hhc-gradient .ah-greet,
.home-hero-card.hhc-gradient .hhc-metric-val,
.home-hero-card.hhc-gradient .hhc-rank-name,
.home-hero-card.hhc-gradient .hhc-xp-goal { color: var(--text-inverse); }
.home-hero-card.hhc-gradient .ah-sub-text,
.home-hero-card.hhc-gradient .hhc-metric-label,
.home-hero-card.hhc-gradient .hhc-metric-lifetime,
.home-hero-card.hhc-gradient .hhc-metric-lifetime b,
.home-hero-card.hhc-gradient .hhc-rank-now,
.home-hero-card.hhc-gradient .hhc-xp-ratio { color: rgba(255,255,255,.8); }
.home-hero-card.hhc-gradient .hhc-metrics { border-top-color: var(--cr-hero-rule); position: relative; z-index: 1; }
/* NBAカード列（.home-nba-list）をグラデ地の上でも視認できる半透明カードへ。
   タイトルは「タイトル全文」のため折返し可（旧・1行nowrap省略は廃止）。 */
.home-hero-card.hhc-gradient .home-nba-list {
  margin-top: var(--sp-4); position: relative; z-index: 1;
}
.home-hero-card.hhc-gradient .home-nba-card {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
}
.home-hero-card.hhc-gradient .home-nba-kicker {
  display: inline-block; font-size: var(--fs-caption); font-weight: 700; color: var(--violet-dim);
  background: var(--bg-surface); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); opacity: 1;
}
.home-hero-card.hhc-gradient .home-nba-title { color: var(--text-inverse); }
.home-hero-card.hhc-gradient .home-nba-sub { color: rgba(255,255,255,.82); }
.home-hero-card.hhc-gradient .home-nba-more-row { color: var(--text-inverse); }
/* ゲスト時に隠す通知件数バッジ等は白カードでも視認できるよう既存トークンのまま（意味色は維持） */

/* ── A-2: バッジゾーン（メダル＋キャラ登場演出＋ランク名＋単価ピル＋XPゲージ） ── */
/* 余白見直し: アバター行(app-header)とランク行の区切りが詰まっていたため
   margin-topをsp-4→sp-5へ拡張。 */
/* 07: ホーム上部が長く、案件のビジュアルが
   ファーストビューに入らなかった。上部（ランク＋主要指標＋対応件数）の余白だけを詰める
   （文字サイズ・メダル寸法・画像枠は一切変更しない）。 */
.hhc-badge-zone {
  display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); position: relative; z-index: 1;
}
.hhc-medal-wrap { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.hhc-medal-glass {
  position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background: var(--cr-hero-glass); border: 1px solid var(--cr-hero-edge);
  display: flex; align-items: center; justify-content: center;
}
.hhc-medal-glass.hhc-medal-pulse { animation: hhcMedalPulse .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes hhcMedalPulse { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* ホームのキャラ表示（.hhc-chara）は撤去。メダル＋スパークのみ残す。 */
.hhc-spark { position: absolute; font-size: var(--fs-caption); color: var(--cr-hero-spark); z-index: 3; opacity: 0; pointer-events: none; }
.hhc-spark.hhc-spark-fly { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hhc-medal-glass.hhc-medal-pulse { animation: none; }
  .hhc-spark.hhc-spark-fly { animation: none; opacity: 0; }
}
body[data-fx="min"] .hhc-medal-glass.hhc-medal-pulse { animation: none; }
body[data-fx="min"] .hhc-spark.hhc-spark-fly { animation: none; opacity: 0; }

.hhc-rank-col { min-width: 0; flex: 1; }
.hhc-rank-now { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; }
.hhc-rank-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); flex-wrap: wrap; }
/* 余白見直し: ランク名は単語分断（禁則無視の折返し）させない */
.hhc-rank-name { font-size: var(--fs-section); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.hhc-unit-pill {
  font-size: var(--fs-caption); font-weight: 700; border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
  background: var(--cr-hero-glass-lift); border: 1px solid var(--cr-hero-edge); color: var(--text-inverse);
}
.hhc-xp-track { height: 8px; border-radius: var(--r-full); background: var(--cr-hero-rule); margin-top: var(--sp-2); overflow: hidden; }
.hhc-xp-fill {
  height: 100%; width: 0; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--bg-surface), var(--cr-hero-spark));
  box-shadow: 0 0 10px rgba(255,231,154,.8);
}
/* 余白見直し: 「あと◯◯XPで◯◯ランク」と「190 / 600 XP」の横並びが
   390px幅で詰まって衝突し、かつ折返し時に単語（ランク名・カタカナ）が禁則無視で分断されていた
   （例:「ゴ」「ールド」に分断）。2カラム→縦積みへ変更し、各行にwhite-space:nowrapを与えて
   折返し自体を起こさせない（横幅は.hhc-rank-col側で十分確保済み・GUNGUN-*とは無関係）。 */
.hhc-xp-foot {
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: var(--sp-2); font-size: var(--fs-caption); font-weight: 700; gap: var(--sp-1);
}
.hhc-xp-foot > span { white-space: nowrap; }
/* F: 昇格条件を省略せず1行に並べるため、
   目標行だけは折返しを許す（従来のnowrapのままだと320px幅で横スクロールが出る）。 */
.hhc-xp-foot > .hhc-xp-goal { white-space: normal; line-height: 1.6; }
/* 「1再生 ¥0.30」の適用条件（rank_progress.per_view_unit_note）。重要な条件のため
   --fs-caption(12px)ではなく --fs-body(15px)。ホーム/ハブとも地はグラデのため文字は反転色。 */
.hhc-unit-note {
  display: block; margin-top: var(--sp-2); font-size: var(--fs-body); font-weight: 700;
  line-height: 1.6; color: var(--text-inverse); opacity: .92;
}
/* 「XP」の語の初出説明。バー直下に1行だけ添える（繰り返さない） */
.hhc-xp-note {
  display: block; margin-top: var(--sp-1); font-size: var(--fs-body); font-weight: 700;
  line-height: 1.6; color: var(--text-inverse); opacity: .88;
}

/* ── B-1: マイページ最上部グラデヘッダー ── */
.my-top {
  position: relative; overflow: hidden;
  padding: calc(env(safe-area-inset-top,var(--sp-1)) + var(--sp-6)) var(--sp-5) var(--sp-16);
  background: var(--grad-cheer);
}
.my-top-blob { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); filter: blur(34px); pointer-events: none; }
.my-top-blob-a { width: 150px; height: 150px; top: -40px; right: -30px; }
.my-top-blob-b { width: 110px; height: 110px; bottom: -30px; left: -20px; background: rgba(255,217,236,.55); }
.my-top-head { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--sp-3); }
.my-top-avatar { border: 3px solid rgba(255,255,255,.9) !important; box-shadow: 0 6px 16px rgba(90,70,180,.25); }
.my-top-name { color: var(--text-primary) !important; }
.my-top-handle { color: rgba(27,24,48,.6) !important; margin-top: var(--sp-1); }
.my-top-greet-sub { font-size: var(--fs-caption); font-weight: 700; color: rgba(27,24,48,.55); margin-top: var(--sp-1); }
.my-top-gear {
  margin-left: auto; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; color: var(--text-primary); cursor: pointer;
}
.my-top-gear svg { width: 17px; height: 17px; }
/* 0: profile-rankup-blockは#s-profileのグラデヘッダー(.my-top)直後から
   #s-rank（通常のpage-header配下）へ移設した。負マージンで重ねる前提が崩れるため通常間隔に戻す。 */
.pf-rankup-wrap { margin-top: var(--sp-2); }

/* ── B-3: タブバーのイラストタイル化（機構・ID・crSetProfileTabは不変・見た目のみ） ── */
/* カルーセル化: 固定4列グリッドだったため、本人確認タブを足して
   5枚になった時点で2行に折り返していた。タブは**必ず横1行**に保ち、はみ出す分は
   横スクロール（カルーセル）で見せる。タブ枚数が増減しても行が増えない構造にする。
   4枚以下のときに間延びしないよう、1枚あたりの幅は画面幅から算出した固定値にする
   （4枚がちょうど収まり、5枚目以降は右端が少し覗いてスクロールできると分かる）。 */
.pf-tabbar.pf-tabbar-tiles {
  display: flex; flex-wrap: nowrap; gap: var(--sp-3);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scrollbar-width: none;
  /* 余白の見直し（「マージンの余裕がない」への対応）: タイル帯の上下を広げ、
     ランクカード／下のセクションと詰まって見えないようにする */
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  /* 選択中タブへのscrollIntoViewが左paddingを食い潰して端に貼り付くのを防ぐ
     （snap位置・スクロール位置の基準を左右の余白の内側にする） */
  scroll-padding-inline: var(--sp-5);
}
.pf-tabbar.pf-tabbar-tiles::-webkit-scrollbar { display: none; }
.pf-tile {
  /* (画面幅 − 左右padding − gap3つ) ÷ 4 ＝ 4枚がちょうど1画面に収まる幅。
     : gap実値は`gap: var(--sp-3)`(12px)なのに、この式は旧トークン化前の
     生値9pxのまま据え置かれていたため、実測で9px（タイル4枚時）画面外にはみ出す実バグだった
     （5枚だった間はスクロール前提で気づかれなかった）。式をgapの実値var(--sp-3)に合わせて根治する。 */
  flex: 0 0 calc((100vw - var(--sp-5) * 2 - var(--sp-3) * 3) / 4);
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: var(--sp-3) var(--sp-1) var(--sp-3); border-radius: var(--r-lg); cursor: pointer; font-family: inherit;
  background: var(--bg-surface); border: 1px solid var(--bg-elevated); box-shadow: 0 2px 10px rgba(124,58,237,.05);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
/* PC幅では画面いっぱいに伸ばさない（マイページはモバイル前提だが、PC閲覧時の間延び防止） */
@media (min-width: 640px) {
  .pf-tile { flex-basis: 116px; }
}
.pf-tile:active { transform: scale(.97); }
/* タブ切替式: 選択中タブの強調を復活 */
.pf-tile.active { border-color: rgba(139,92,246,.45); box-shadow: 0 6px 18px rgba(124,58,237,.14); }
.pf-tile.active .pf-tile-art { background: rgba(139,92,246,.16); }
.pf-tile-art {
  width: 40px; height: 40px; border-radius: var(--r-md); background: var(--bg-elevated); color: var(--cr-violet);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pf-tile-art svg { width: 22px; height: 22px; }
.pf-tile.active .pf-tile-art { background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(236,72,153,.16)); }
.pf-tile-lbl { font-size: var(--fs-caption); font-weight: 700; color: var(--text-primary); margin-top: var(--sp-2); letter-spacing: -.02em; white-space: nowrap; }
.pf-tile-sub { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); margin-top: var(--sp-1); min-height: 11px; }

/* 集中入力画面: 画面タイトルと入力ブロック自身の見出しが二重になるため、
   移設先（#s-input-host）に入っている間だけブロック先頭の見出しを隠す
   （強調が2つあれば強調ゼロ）。元の位置へ戻せば従来どおり見出しが出る。 */
#s-input-host > [data-input-title] > div:first-child { display: none; }

/* ============================================================
   余白の見直し（「このページ、マージンの余裕がない」への対応）
   マイページは要素が縦に密集して窮屈だったため、セクションの間に余裕を作る。
   左右は既存トークン（--sp-5=20px）を維持し、**縦方向のリズム**だけを整える。
   ============================================================ */
.pf-panel { padding-top: var(--sp-2); }
.pf-panel > div + div { margin-top: var(--sp-2); }
/* 各カード/セクションの下端が次の見出しとくっつかないように最低限の間隔を保証する */
#pf-panel-kyc #pf-kyc-list { margin-bottom: var(--sp-6); }
#profile-portfolio-block, #profile-quest-block, #profile-report-block { margin-top: var(--sp-5); }
/* ボトムナビと最終要素が接触しないよう、各パネルの下端に余白を足す */
.pf-panel { padding-bottom: var(--sp-8, var(--sp-8)); }

/* ============================================================
   WP-6: ホーム(#s-home)の「—」プレースホルダをスケルトンへ置換。
   crCountUpText/textContent代入で子要素ごと実データに置き換わるため、初期表示のみ見える
   （.skel-wrap/.skeleton-waveの機構はshared/boost.cssと共有・--skel-base/--skel-hlはtokens.css）。
   ホーム以外での新規使用はCGOV-001対象（shared化する場合はこのコメントを更新）。
   ============================================================ */
.skel-inline {
  display: inline-block; vertical-align: middle; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--skel-base) 25%, var(--skel-hl) 50%, var(--skel-base) 75%);
  background-size: 200% 100%; animation: skeleton-wave 1.4s linear infinite;
}
.skel-inline-lg { width: 76px; height: 22px; }
.skel-inline-md { width: 44px; height: 16px; }
.skel-inline-sm { width: 32px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .skel-inline { animation: none; background: var(--skel-base); } }

/* ============================================================
   WP-9: #s-messages 会話一覧行（convRow）のインラインstyleをクラス化。
   機能・表示は不変（既存の.dt-cardベース＋独自上書きをそのままクラスへ移設）。
   タグ色（.conv-tag-wait）だけはBoostFlow.stateMeta（shared/boost-flow.js・編集不可）が返す
   動的なHEX(fg/bg)をJS側でstyle属性に残す（トークン化できない外部データのため例外）。
   一覧UI再設計: 左アクセントバーは廃止。全行を同一カードブロック（同じ
   radius・padding）に統一し、未読の表現は①カード背景/枠線の色（.conv-row.unread）②相手名/抜粋の
   太字③右下の未読数バッジの3点で表す（LINE準拠）。
   ステージ名/未対応件数のチップは詳細画面に譲って一覧から撤去。「あなたの対応待ち」チップは
   最大1個・2行目末尾に小さく置くだけにする（stateMeta色を流用・新色は増やさない）。
   ============================================================ */
/* 一覧はLINE風の「四角い行リスト」。
   .dt-card（角丸・影・外余白・行間gap）は使わず、白地フルブリード＋1px区切り線のみ。
   未読行は背景色（--state-unread-bg）で持ち上げ、左端3pxのprimaryバーを足す。 */
#msg-conv-list { background: var(--bg-surface); border-top: 1px solid var(--border); }
.conv-list { padding: 0 0 var(--sp-8); }
.conv-empty-chara { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto var(--sp-3); }
.conv-empty-title { font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-2); }
.conv-row { position: relative; margin: 0; padding: var(--sp-3) var(--sp-5); cursor: pointer; background: var(--bg-surface);
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none;
  transition: background var(--dur-fast) var(--ease-snap, ease); }
.conv-row:active { background: var(--bg-elevated); }
@media (hover: hover) { .conv-row:hover { background: var(--bg-elevated); } }
/* 既読=素の白／未読=violet淡色面。開いて既読になると白へ戻る（数字バッジと併せた三重表現）。 */
.conv-row.unread { background: var(--state-unread-bg); }
.conv-row.unread::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--cr-violet);
}
.conv-row-main { display: flex; gap: var(--sp-3); align-items: center; }
.conv-row-avatar-wrap { position: relative; flex-shrink: 0; width: 48px; height: 48px; }
.conv-row-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-elevated); }
.conv-row-avatar-fallback { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-elevated); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
/* 案件サムネはアバターへ重ねる小さな丸（正方形→丸・LINE準拠） */
.conv-row-thumb { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-surface); background: var(--bg-elevated); }
.conv-row-body { flex: 1; min-width: 0; }
/* 1行目=📌（運営ピン）＋相手名（未読は太字）＋案件名（muted・1行省略） */
.conv-row-line1 { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.conv-row-pin { flex: 0 0 auto; font-size: var(--fs-caption); line-height: 1; }
.conv-row-name { font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); flex: 0 0 auto; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-row-name.unread { font-weight: 900; }
.conv-row-campaign-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-caption); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-row-campaign-title:empty { display: none; }
/* 2行目=最新メッセージのプレビュー1行（未読は濃色＋太字）＋「要対応」小ピル */
.conv-row-line2 { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); min-width: 0; }
.conv-tag { flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700; border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2); }
/* R5: 見送り/辞退の結果チップ。色だけで状態を伝えない中立色（--danger不使用）。 */
.conv-tag-result { background: var(--bg-elevated); color: var(--text-muted); }
.conv-row-sub { flex: 1; min-width: 0; font-size: var(--fs-ui); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-row-sub.unread { color: var(--text-primary); font-weight: 700; }
/* 右カラム: 時刻（停滞中は代わりに「N日停滞」を同じ二次色で表示・危険色は使わない）を上、
   未読数バッジを下に配置（LINE準拠・件数のみ意味を持つ・要対応ピルとは別要素）。 */
.conv-row-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex-shrink: 0; gap: var(--sp-1); align-self: stretch; min-height: 44px; }
.conv-row-time { font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.conv-row-unread-badge {
  min-width: 20px; height: 20px; padding: 0 var(--sp-1); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--magenta); color: var(--text-inverse); border-radius: var(--r-full);
  font-size: var(--tu-font-size-min, 12px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  /* 行の左＝アバター左上に重ねる（.conv-row-avatar-wrap内・白縁で地と分離） */
  position: absolute; top: -6px; left: -6px; z-index: 1;
  border: 2px solid var(--bg-surface); height: 22px; min-width: 22px;
}
/* 旧「!」ピル用クラスは廃止した（回帰テストが
   クラス名の残存を禁止しているため、名前をコメントにも書かない）。未読0の「あなたの対応待ち」も
   未読数バッジと同じ数字バッジ（1）で表す（convRow参照）。 */
/* 検索/絞り込みチップ（未読のみ）は既存.filter-chipの見た目をそのまま流用（新色は追加しない） */
.msg-toggle-chip { flex: 0 0 auto; }

/* 未読境界ライン: スレッド内で開く前の既読位置より新しいメッセージの直前に挿入する。 */
.msg-unread-divider { display: flex; align-items: center; gap: var(--sp-2); margin: 2px 0; font-size: var(--fs-caption); font-weight: 700; color: var(--danger); }
.msg-unread-divider::before, .msg-unread-divider::after { content: ''; flex: 1; height: 1px; background: var(--danger); opacity: .35; }

/* ============================================================
   WP-13: #s-notif-settings トグル行のインラインstyle解体。
   トグルの見た目（背景色）はtoggleNotif()/初期checked状態がJSでstyle.backgroundを
   直接書き換える既存挙動を維持するため、track要素の背景色のみ引き続きinline style（動的）に残す。
   通知チャネル（アプリ内/メール/LINE）×通知種別のマトリクス拡張に備え、各行へ
   data-notif-type / data-notif-channel を付与（今回は現行の単一トグルのままで新機能は追加しない）。
   ============================================================ */
.notif-set-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-4); }
.notif-set-card-last { margin-bottom: 0; }
.notif-set-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.notif-set-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.notif-set-row-noborder { border-bottom: none; }
.notif-set-title { font-size: var(--fs-ui); font-weight: 700; }
.notif-set-sub { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--sp-1); }
.notif-toggle { position: relative; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0; }
.notif-toggle-input { opacity: 0; width: 0; height: 0; }
.notif-toggle-track { position: absolute; inset: 0; border-radius: var(--r-full); transition: background var(--dur-base) var(--ease-snap, ease); }
/* F: 種別(kind)×チャネル(in_app/line/email)の通知マトリクス。
   行=notif-matrix-row（notif-set-rowを継承しラベル+3セルへ拡張）／列=44x44の
   タップ領域（notif-matrix-cell）内に縮小トグル（notif-mini-toggle）を中央配置する。 */
.notif-matrix-head-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-4) 0; }
.notif-matrix-head-label { flex: 1; min-width: 0; }
.notif-matrix-row { align-items: flex-start; }
.notif-matrix-label { flex: 1; min-width: 0; padding-right: var(--sp-3); }
.notif-matrix-cells { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.notif-matrix-cell { width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: opacity var(--dur-base) var(--ease-snap, ease); }
.notif-matrix-cell-dim { opacity: .35; }
.notif-matrix-col-label { width: 44px; text-align: center; font-size: var(--fs-caption); color: var(--text-muted); font-weight: 700; }
.notif-mini-toggle { position: relative; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; }
.notif-mini-toggle input:disabled + .notif-mini-track { cursor: not-allowed; }
.notif-mini-track { position: absolute; inset: 0; border-radius: var(--r-full); transition: background var(--dur-base) var(--ease-snap, ease); }
body[data-fx="min"] .skel-inline { animation: none; background: var(--skel-base); }

/* ============================================================
   PART2 アップロード成功の可視化統一。
   サムネが取れない成功（HEVC動画・その他ファイル種）を「無反応/選択済みのまま」に見せず、
   色反転＋✓＋大きめ文字で一目で成功と分かるようにする。boost.js/boost-flow.js（全ロール共通）
   側はクラスを付けるだけでスタイルを持たないため、creator専用のこのファイルでのみ見た目を定義する
   （ops/clientはこのCSSを読み込まないため無変化＝役割スコープを守る）。
   ============================================================ */
/* R7共通部品(.bdz-thumb-file・boost.css)の成功時色反転。選択直後(未アップロード)の
   '選択済み'表示はsuccessクラスが付かないため対象外のまま。 */
.bdz-thumb-file-success {
  background: rgba(34,197,94,.14);
}
.bdz-thumb-file-success .bdz-thumb-file-icon { font-size: 26px; }
.bdz-thumb-file-success .bdz-thumb-file-badge { font-size: var(--tu-font-size-min, 12px); font-weight: 900; padding: 2px 10px; }

/* ポートフォリオ(.pf-media-fallback・crPfMediaErrorFallback)の成功時色反転。同上、
   '選択済み'（pending中のデコード不可）は対象外。 */
.pf-media-fallback-success { background: rgba(34,197,94,.16); }
.pf-media-fallback-success .pf-media-fallback-badge { font-size: var(--tu-font-size-min, 12px); }

/* 提出/購入報告/SNS証跡(.media-uploader・muSetState)共通: mu-doneで右上に常設チェックバッジを出す
   （サムネが取れているケースも含め「完了した」ことを一目で示す）。 */
.media-uploader.mu-done.has-preview::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--success); color: var(--text-inverse); font-size: 14px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* 動画サムネ生成不可(.mu-thumb-fallback・#submit-uploader)時のみ、mu-doneのときだけ
   「✓ アップロード完了」を大きめ表示＋背景色反転する（アップ中/未完了では出さない）。 */
.mu-thumb-fallback-success { display: none; font-size: 16px; font-weight: 900; color: var(--success); }
.media-uploader.mu-done .mu-thumb-fallback-success { display: block; }
.media-uploader.mu-done.mu-thumb-failed .mu-thumb-fallback { background: rgba(34,197,94,.14); }

/* ============================================================
   レベルアップ「SNSアカウントとフォロワーを報告する」改修:
   正式アイコン（/assets/sns/*.svg）用ラッパーと、「AIでまとめて入力」の反映を
   見える形で示すための行ハイライト（CFX-004: reduced-motion/data-fx=minで停止）。
   ============================================================ */
/* 幅は固定しない: imgは24x24自身で場所を取り、フォールバックのテキスト（SNS名）は
   その分だけ自然に広がる（固定24pxのままだとフォールバック文字が枠からはみ出し、
   隣接する入力欄と重なって読めなくなるため）。flex-shrink:0のみ維持し、input側の
   flex:1に幅を譲らせる。 */
.cr-sns-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cr-sns-icon img { display: block; width: 24px; height: 24px; }
.cr-sns-icon-fallback { font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
@keyframes crSnsRowFlash {
  0% { box-shadow: 0 0 0 3px rgba(139,92,246,.45); }
  100% { box-shadow: 0 0 0 3px rgba(139,92,246,0); }
}
.sns-row-flash { animation: crSnsRowFlash var(--dur-slow, 400ms) ease-out; }
@media (prefers-reduced-motion: reduce) { .sns-row-flash { animation: none; } }
body[data-fx="min"] .sns-row-flash { animation: none; }
/* キャスティング向けプロフィール拡充: レベルアップのミッションから
   アカウントタブの該当セクションへ着地したときの一時ハイライト（crSnsRowFlashを共有し、
   新規keyframesを増やさない）。CFX-004どおりreduced-motion/data-fx=minの両方で停止する。 */
.acc-section-flash { animation: crSnsRowFlash var(--dur-slow, 400ms) ease-out; }
@media (prefers-reduced-motion: reduce) { .acc-section-flash { animation: none; } }
body[data-fx="min"] .acc-section-flash { animation: none; }

/* ============================================================
   #s-notif-settings スイッチ式UI＋2タブ構成
   （「ボタン式ではなくスイッチ式に」「通知/通知設定の2タブに」）。
   ------------------------------------------------------------
   ①2セグメントタブ（画面上部・44pt・aria-selected）。pf-tab-*（マイページの
   タイル様式タブ）とは別の軽量な様式にする（コーディネーター指示）。
   ②スイッチ本体はrole="switch"のbutton単体（checkbox+labelを廃止）。旧実装は
   labelがネイティブに子孫クリックをinputへ転送する挙動とonclick二重発火が競合し、
   押しても状態が元へ戻ることがあった（CLAY-003のタップ領域は既存の44x24/36x20を
   踏襲しつつ、CA11Y-003＝色だけで状態を伝えないよう、ノブ位置とaria-checkedを
   併用する三重表現にする）。旧.notif-toggle/.notif-toggle-input（label+hidden
   checkbox）はこの改修でDOMから使われなくなったが、既存宣言はそのまま残置する
   （このファイルは末尾追記の方針・実害のない死にCSSのため）。
   ============================================================ */
.notif-seg-tabbar { display: flex; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-4); }
.notif-seg-tab {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-height: 44px; border: 1px solid var(--border); background: var(--bg-surface);
  border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-ui); font-weight: 700;
  color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-base) var(--ease-snap, ease), color var(--dur-base) var(--ease-snap, ease);
}
.notif-seg-tab.active { background: var(--violet-bright); border-color: var(--violet-bright); color: var(--text-inverse); }
@media (prefers-reduced-motion: reduce) { .notif-seg-tab { transition: none; } }

/* スイッチ本体。旧.notif-toggle-track（position:absolute;inset:0;テキストで背景色のみJSが
   書き換え）を、単体buttonとして自立させる形へ上書きする（後勝ちのため同名セレクタで足りる）。 */
.notif-toggle-track {
  -webkit-appearance: none; appearance: none;
  position: relative; display: inline-block; flex-shrink: 0;
  width: 44px; height: 24px; padding: 0; border: none; border-radius: var(--r-full);
  background: var(--border); cursor: pointer;
  transition: background var(--dur-base) var(--ease-snap, ease);
}
.notif-toggle-track::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--bg-surface); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform var(--dur-base) var(--ease-snap, ease);
}
.notif-toggle-track[aria-checked="true"] { background: var(--violet-bright); }
.notif-toggle-track[aria-checked="true"]::before { transform: translateX(20px); }
.notif-toggle-track:disabled, .notif-toggle-track[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* 種別×チャネル行列のミニスイッチ（36x20・44x44の.notif-matrix-cell内に中央配置） */
.notif-mini-track { width: 36px; height: 20px; }
.notif-mini-track::before { width: 16px; height: 16px; }
.notif-mini-track[aria-checked="true"]::before { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) {
  .notif-toggle-track, .notif-toggle-track::before { transition: none; }
}

/* ============================================================
   案件詳細（#s-detail）ビジュアル再設計
   デザイン方針:「全タイプで文字だらけ／イラスト・図解中心・余白多め・頭を使わず直感的に」。
   規範: above the fold=報酬・やること・いつまで・状態・次アクション／
   初見2割／近接則の比率／カードpadding sp-4／
   枠より余白・shadowなし／開閉状態記憶／トークンのみ。
   ============================================================ */

/* ── inline SVG アイコンセット（currentColor・トークン色で着色・3サイズ） ── */
.dv-ico {
  display: block; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.dv-ico-sm { width: 16px; height: 16px; }
.dv-ico-md { width: 24px; height: 24px; }
.dv-ico-lg { width: 36px; height: 36px; stroke-width: 1.5; }

/* ── ヒーロー直下のテキストブロック（旧: インラインpadding） ── */
.dv-head { padding: var(--sp-2) var(--sp-5) 0; }
/* モバイルの1画面目に「報酬・やること・いつまで・流れ・CTA」を収めるため、
   ヒーローの縦を狭端末だけ抑える。入稿キットの被写体セーフエリア（中央41%）は保つ
   （390px幅の16:9=219px→176px＝可視80%。PC側は既に可視58%を許容している設計のため
   これより厳しい切り抜きにはならない）。 */
/* creator/index.html の <style> は creator-feminine.css の <link> より後ろにあるため、
   同名クラス（.dt-hero）は素の指定では勝てない。id併記で明示的に上書きする。 */
/* 報酬特集カード＋2タイル＋流れ図＋CTAを390×844の1画面に収めるため、
   狭端末のヒーロー高さを160pxまで詰める（被写体セーフエリア中央41%は保たれる）。 */
@media (max-width: 640px) {
  /* デザイナー要望: 16:9 バナーを縮めて上下トリミングしない。比率固定のまま高さ上限を外す。 */
  #detail-hero-bg.dt-hero { max-height: none; }
}
/* 流れカードだけ上下padding を1段詰める（CSPC-003の例外ではなく、カード内の
   要素が「見出し＋図」の2つだけで、余白過多になるのを避けるため） */
#detail-flow-card.dt-card { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
/* 募集状態バッジと同じ行に並ぶピルとして揃える（インラインmargin撤去分の補正） */
.dv-head .dt-my-status { vertical-align: middle; }
.dv-desc-wrap { display: flex; flex-direction: column; align-items: flex-start; }

/* ── 「3つの答え」タイル（報酬／やること／いつまで） ──
   .dt-card は crRenderPreviewInvalid の一括非表示単位に乗るためのフックで、
   面・枠・影はここで打ち消す（タイル1枚1枚が独立したカード面になる）。 */
.dt-card.dv-tiles {
  background: transparent; border: none; box-shadow: none; padding: 0;
  margin: var(--sp-4) var(--sp-5) 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
}
/* 報酬タイルを報酬特集カードへ移したため、タイルは
   「やること／いつまで」の2列（1枚あたりが広がるので値は素のタイプスケールで収まる）。 */
.dt-card.dv-tiles.dv-tiles-2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.dv-tiles-2 .dv-tile { padding: var(--sp-4); gap: var(--sp-2); }
.dv-tile {
  position: relative; overflow: hidden; min-width: 0;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: none; padding: var(--sp-3);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-1);
}
.dv-tile-ico { color: var(--cr-violet); }
.dv-tile-label { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.dv-tile-val {
  font-size: var(--fs-hero); font-weight: 900; color: var(--text-primary);
  line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.dv-tile-val.md { font-size: var(--fs-section); }
.dv-tile-val.sm { font-size: var(--fs-title); }
/* 3タイル×狭端末では1タイルの文字幅が約87pxしかない。値を折り返さずに1行で見せる方が
   「大きな数値」として読めるため、480px以下はタイプスケールを1段下げる（トークン内で移動）。 */
@media (max-width: 480px) {
  .dv-tile-val { font-size: var(--fs-section); }
  .dv-tile-val.md { font-size: var(--fs-title); }
  .dv-tile-val.sm { font-size: var(--fs-body); }
  /* 2列構成（T6）は1タイル約165px（390px幅）あるため素のスケールを保つ */
  .dv-tiles-2 .dv-tile-val { font-size: var(--fs-hero); }
  .dv-tiles-2 .dv-tile-val.md { font-size: var(--fs-section); }
  .dv-tiles-2 .dv-tile-val.sm { font-size: var(--fs-title); }
}
.dv-tile-val small { font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); }
.dv-tile-sub {
  font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 報酬タイル（.dv-tile-reward）とその背景グングン（.dv-tile-chara）は
   報酬特集カード（.dv-reward-hero／.dv-rh-chara）へ役割を移し、参照ゼロになったため削除。 */
/* 締切タイルの残日数はsemantic段階（crDeadlineLevelFromDaysの3値）で色付けする */
.dv-tile-val.lv-warning { color: var(--warning); }
.dv-tile-val.lv-danger { color: var(--danger); }
/* 320〜359pxの狭端末（CLAY-001: 320pxでも横スクロールなし）。2列構成は値のスケールだけ落とす */
@media (max-width: 359px) {
  .dt-card.dv-tiles { grid-template-columns: repeat(2, 1fr); }
  .dv-tiles-2 .dv-tile-val { font-size: var(--fs-section); }
  .dv-tiles-2 .dv-tile-val.md { font-size: var(--fs-title); }
  .dv-tiles-2 .dv-tile-val.sm { font-size: var(--fs-body); }
}

/* ── セクション見出し（アイコン＋短い見出し） ── */
.dv-sec-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-title); font-weight: 700; color: var(--text-primary);
}
.dv-sec-head .dv-ico { color: var(--cr-violet); }

/* ── 「この案件の流れ」イラスト付き横ステッパー ── */
.dv-flow-wrap { display: flex; align-items: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.dv-flow-wrap > #detail-flow-strip { flex: 1; min-width: 0; }
.dv-flow-row {
  display: flex; align-items: flex-start; gap: var(--sp-1);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dv-flow-row::-webkit-scrollbar { display: none; }
.dv-step {
  flex: 0 0 auto; min-width: 52px; padding: var(--sp-1); border: none; background: transparent;
  border-radius: var(--r-md); font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
}
.dv-step:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.dv-step-dot {
  position: relative; width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--bg-elevated); color: var(--cr-violet);
  display: flex; align-items: center; justify-content: center;
}
.dv-step-num {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 var(--sp-1);
  border-radius: var(--r-full); background: var(--cr-violet); color: var(--text-inverse);
  font-size: var(--fs-caption); font-weight: 900; line-height: 18px; text-align: center;
}
.dv-step-label { font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.dv-step-conn {
  flex: 0 0 auto; width: var(--sp-2); height: 2px; border-radius: var(--r-full);
  background: var(--border); margin-top: 20px;
}
.dv-flow-hint { font-size: var(--fs-caption); font-weight: 400; color: var(--text-muted); }
/* 案件詳細（#s-detail）のキャラ（グングン）は全撤去した。
   流れ図横の .dv-chara・応募確認カードの .dv-chara-cta・報酬特集カードの .dv-rh-chara は
   DOM・JS挿入・CSSごと削除済み（参照ゼロ）。他画面（ホーム・welcome・ランクアップ・
   メッセージの運営アバター・空状態）のキャラは維持する。ここに再追加しないこと。 */

/* ── アコーディオン群（ネイティブ<details>・既定閉・件数チップ・開閉状態はlocalStorage） ── */
.dt-card.dv-acc-card { padding: 0; overflow: hidden; }
.dv-acc { width: 100%; }
.dv-acc > summary {
  list-style: none; cursor: pointer; min-height: 56px;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}
.dv-acc > summary::-webkit-details-marker { display: none; }
.dv-acc > summary::after {
  content: '▾'; margin-left: auto; flex: 0 0 auto;
  font-size: var(--fs-ui); color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-snap, ease);
}
.dv-acc[open] > summary::after { transform: rotate(180deg); }
.dv-acc > summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.dv-acc-ico { display: flex; color: var(--cr-violet); }
.dv-acc-title { font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); }
.dv-acc-chip {
  font-size: var(--fs-caption); font-weight: 700; color: var(--cr-violet);
  background: var(--violet-trace); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dv-acc-chip:empty { display: none; }
/* CSPC-002: グループ内=sp-4 ＜ カード間=sp-4 ＜ セクション間=sp-8（.dv-acc-cardのmargin） */
.dv-acc-body { padding: 0 var(--sp-5) var(--sp-4); }
.dv-acc-body > * + * { margin-top: var(--sp-4); }
body[data-fx="min"] .dv-acc > summary::after { transition: none; }
@media (prefers-reduced-motion: reduce) { .dv-acc > summary::after { transition: none; } }

/* ── 長文のクランプ＋「続きを読む」 ── */
.dv-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dv-clamp-open { display: block; overflow: visible; }
.dv-more {
  display: inline-flex; align-items: center; min-height: 32px; margin-top: var(--sp-1);
  padding: var(--sp-1) 0; border: none; background: transparent; font-family: inherit;
  font-size: var(--fs-caption); font-weight: 700; color: var(--cr-violet); cursor: pointer;
}

/* ── フッター余白（sticky CTAと本文末が重ならない） ── */
.dv-foot-space { height: var(--sp-8); }

/* ============================================================
   T5/T6: 報酬3種の視覚的区別（種類チップ）と、案件詳細の
   大判「報酬特集カード」。色は既存トークンのみ（CCLR-002）:
   再生成果=--cr-violet／投稿報酬=--cr-pink／参加報酬・成果報酬=--success。
   一覧カード（.ccard-pay.rk-row）・特集カード（.dv-reward-hero）・比較シート（.rk-tbl）で
   同じ .rk-chip / .rk-item を使い、色・アイコン・名称を完全一致させる。
   ============================================================ */
/* CCLR-002対応: rk-*トークンは boost/shared/creator-tokens-compat.css
   （[data-palette="boost-legacy"] スコープ）で定義する（単一真実源）。 */
.rk-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-caption); font-weight: 700; border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-2); white-space: nowrap;
}
.rk-chip-ico { font-size: var(--fs-caption); line-height: 1; }
.rk-play .rk-chip { color: var(--rk-play-fg); background: var(--rk-play-bg); }
.rk-post .rk-chip { color: var(--rk-post-fg); background: var(--rk-post-bg); }
.rk-join .rk-chip { color: var(--rk-join-fg); background: var(--rk-join-bg); }
.rk-item { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.rk-amount {
  font-size: var(--fs-title); font-weight: 900; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.rk-item-big .rk-amount { font-size: var(--fs-hero); }
.rk-play .rk-amount { color: var(--rk-play-fg); }
.rk-post .rk-amount { color: var(--rk-post-fg); }
.rk-join .rk-amount { color: var(--rk-join-fg); }
/* 一覧カードの報酬行: 種類が2つのときは縦積み（横並びだと390pxで金額が折り返す） */
.ccard-pay.rk-row { display: flex; flex-direction: column; gap: var(--sp-1); }
.rk-items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
/* 活動ウィジェットの中身（#home-status-summary）＝今月の確定報酬・参加中・承認待ちの3指標。
   ランク帯との境目は1本の罫線で分ける（タイル背景は持たない）。文字はすべて --cr-hero-ink
   （不透明の白）で、面のどこに重なっても 4.5:1 を割らないようにする。 */
#home-status-summary { position: relative; z-index: 1; }
#home-status-summary #home-kpi-zero,
#home-status-summary #home-summary-error {
  padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2);
}
#home-status-summary #home-kpi-zero { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
#home-status-summary #home-summary-error { gap: var(--sp-3); align-items: center; justify-content: space-between; }
.hhc-hero-zero-title { font-size: var(--fs-section); font-weight: 900; }
.hhc-hero-zero-note { font-size: var(--fs-body); }
.hhc-hero-zero-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-body); font-weight: 700; }
.hhc-hero-error-text { font-size: var(--fs-body); }
/* 契約A: 報酬の成分タイル。固定分と変動分を同等の大きさで並べ、どちらかが小さく見えないようにする。
   一覧カード・案件詳細ヒーロー・応募確認が同じ .rk-tiles を描く（二重実装禁止）。
   重要な条件（適用・承認条件）は 12px（--fs-caption）へ落とさない。 */
.rk-tiles { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); width: 100%; }
.rk-tiles-2 { grid-template-columns: 1fr 1fr; }
.rk-tiles-3 { grid-template-columns: 1fr 1fr; }
.rk-tile {
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface);
}
.rk-tile .rk-chip { align-self: flex-start; }
.rk-tile-amt {
  font-size: var(--fs-title); font-weight: 900; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
  line-height: 1.25; overflow-wrap: anywhere;
}
.rk-tiles-hero .rk-tile-amt { font-size: var(--fs-hero); }
.rk-tile-note { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.5; }
.rk-play .rk-tile-amt { color: var(--rk-play-fg); }
.rk-post .rk-tile-amt { color: var(--rk-post-fg); }
.rk-join .rk-tile-amt { color: var(--rk-join-fg); }
/* U01: 狭い列切替はviewport幅ではなく.rk-tilesを収めるカード実幅で行う
   （PCの3列カード内のように、viewportは広くてもカード自体は狭い場面を拾うため）。
   .rk-tilesの直近ラッパー（一覧カード=.ccard-pay／詳細ヒーロー=.dv-rh-formula／
   応募確認=#detail-confirm-reward-tiles）にcontainer-typeを与え、旧・360px媒体クエリを
   コンテナクエリへ置き換える（1列化の閾値・挙動は不変）。 */
.ccard-pay, .dv-rh-formula, #detail-confirm-reward-tiles { container-type: inline-size; }
/* 320px・文字拡大では1列へ落として金額を切らない（固定高で切らない） */
@container (max-width: 359px) {
  .rk-tiles-2, .rk-tiles-3 { grid-template-columns: 1fr; }
}
.rk-help {
  border: none; background: transparent; padding: var(--sp-1) 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted);
  text-decoration: underline; min-height: 28px;
}

/* ── 報酬特集カード（T6・#detail-reward-hero） ── */
.dt-card.dv-reward-hero {
  position: relative; overflow: hidden;
  padding: var(--sp-5);
  background: var(--rk-hero-bg);
  border: 1px solid var(--rk-hero-border); box-shadow: none;
}
.dv-rh-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.dv-rh-label { font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); }
.dv-rh-rank {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-caption); font-weight: 700; color: var(--cr-violet);
  background: var(--bg-surface); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-2);
}
/* ラベル⇔値=--sp-2（CSPC-002）。数式は折り返し可（＋で連結） */
.dv-rh-formula {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); padding-right: 44px;
}
.dv-rh-plus { font-size: var(--fs-title); font-weight: 700; color: var(--text-secondary); }
/* 値⇔副文=--sp-3（グループの切れ目）／副文どうしは--sp-1 */
.dv-rh-subs { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.dv-rh-sub {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.6;
}
.dv-rh-sub-ico { color: var(--cr-violet); font-weight: 700; flex: 0 0 auto; }
.dv-rh-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.dv-rh-link {
  border: none; background: transparent; padding: var(--sp-1) 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-caption); font-weight: 700; color: var(--cr-violet);
  min-height: 32px;
}

/* ── 報酬の種類 比較ハーフモーダル（T5・.ws-step-sheetを流用） ── */
.rk-sheet-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.rk-sheet-sub { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.6; margin-top: var(--sp-1); }
/* シート内のグングンは狭端末でも出す（.dv-chara-ctaは400px以下で非表示になるため専用クラス） */
.rk-sheet-chara { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.rk-tbl { margin-top: var(--sp-4); }
.rk-tbl-row { display: grid; grid-template-columns: 68px repeat(3, 1fr); gap: var(--sp-2); padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.rk-tbl-row.rk-tbl-head { border-top: none; padding-top: 0; }
.rk-tbl-label { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); line-height: 1.5; }
.rk-tbl-cell { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.6; }
.rk-tbl-col { min-width: 0; }
.rk-tbl-amt { font-weight: 900; font-variant-numeric: tabular-nums; }
.rk-tbl-amt.rk-play { color: var(--rk-play-fg); }
.rk-tbl-amt.rk-post { color: var(--rk-post-fg); }
.rk-tbl-amt.rk-join { color: var(--rk-join-fg); }
.rk-tbl-off { color: var(--text-muted); opacity: .6; }
.rk-sheet-close { margin-top: var(--sp-5); height: 44px; }

/* ============================================================
   T2: 案件詳細（#s-detail）の縦マージンを
   「関係が近いほど狭く、遠いほど広く」で機械的に再設定する。
   兄弟カード（アコーディオン同士）= --sp-3 ／ 異なるブロック間（特集⇔タイル⇔流れ⇔ACC群）
   = --sp-5 ／ セクション間（ACC群⇔補助導線⇔応募確認⇔CTA）= --sp-8（グループ内の2倍以上）。
   ============================================================ */
#s-detail .dt-card { margin: 0 var(--sp-5) var(--sp-3); }
#s-detail .dt-card.dv-reward-hero { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
#s-detail .dt-card.dv-tiles { margin: 0 var(--sp-5) var(--sp-5); }
#s-detail #detail-flow-card.dt-card { margin-bottom: var(--sp-5); }
/* セクション間: アコーディオン群 → 本文末の補助導線（応援・運営と話す） */
#s-detail .dv-tail-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-8) var(--sp-5) 0; }
/* セクション間: 補助導線 → 応募確認カード → CTA（sticky）。本文末との重なりは.dv-foot-spaceで確保 */
#s-detail .dt-card#detail-apply-inline { margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
/* 見出し⇔直下の本文=--sp-3（.dv-sec-head→ステッパーは .dv-flow-wrap の margin-top で既に--sp-3） */
/* バッジ行⇔タイトル=--sp-3／タイトル⇔概要=--sp-3（概要のインラインmarginを上書き） */
#s-detail .dv-desc-wrap .dv-clamp2 { margin-top: var(--sp-3); }

/* ============================================================
   T3: メッセージスレッド（#s-message-thread）のLINE化。
   吹き出し本体は shared/boost-flow.js が <style>（.bf-si-*）を head 末尾へ動的注入するため、
   同名クラス1個の指定では勝てない。ここでは必ず #msg-thread-list を前置してid特異度で上書きする
   （boost-flow.js は client/ops 共用＝編集不可のため、DOM/CSSの再構成だけで見た目を寄せる）。
   ============================================================ */
/* 相手＝左（白面）／自分＝右（primary面・白文字）。角丸16px・話し始め側だけ小さく。 */
#msg-thread-list .bf-si-row { align-items: flex-end; gap: var(--sp-2); margin: 0; }
#msg-thread-list .bf-si-row + .bf-si-row { margin-top: var(--sp-3); }
/* 連続する同一送信者は間隔を詰め、アバター/名前を省略（.thr-cont＝crThrDecorateStream付与） */
#msg-thread-list .bf-si-row.thr-cont { margin-top: var(--sp-1); }
#msg-thread-list .bf-si-row.thr-cont .bf-si-sender { display: none; }
#msg-thread-list .bf-si-row.thr-cont .bf-si-avatar,
#msg-thread-list .bf-si-row.thr-cont .bf-si-avatar-fallback { visibility: hidden; }
#msg-thread-list .bf-si-col { max-width: 76%; }
#msg-thread-list .bf-si-sender { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 700; margin-bottom: var(--sp-1); }
#msg-thread-list .bf-si-bubble {
  font-size: var(--fs-body); line-height: 1.6; padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 16px 16px 16px 4px;
  box-shadow: none;
}
#msg-thread-list .bf-si-row.me .bf-si-bubble {
  background: var(--cr-violet); color: var(--text-inverse);
  border-color: transparent; border-radius: 16px 16px 4px 16px;
}
/* 時刻は吹き出しの外側下に小さく（自分側は右寄せ） */
#msg-thread-list .bf-si-time { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--sp-1); }
#msg-thread-list .bf-si-row.me .bf-si-time { text-align: right; }
/* 日付セパレーター（中央ピル）・未読境界（同じ形で色だけ違う） */
#msg-thread-list .bf-date-divider { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-caption); }
#msg-thread-list .bf-date-divider > span {
  background: var(--bg-elevated); color: var(--text-secondary); font-weight: 700;
  border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
}
#msg-thread-list .bf-unread-divider { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-caption); }
/* システムカード（FlowCard・進行サマリー）は中央寄せ・幅92%で吹き出しと区別する。
   shared側がインラインstyleでmargin/max-widthを持つため、この2点のみ!importantで上書きする。 */
#msg-thread-list .thr-syscard {
  max-width: 92% !important; margin-left: auto !important; margin-right: auto !important;
}
/* ── ヘッダー（戻る＋相手名／案件名は副題1行） ── */
#s-message-thread .thr-hdr-titles { min-width: 0; text-align: center; }
#s-message-thread .thr-hdr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s-message-thread .thr-hdr-sub {
  font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#s-message-thread .thr-hdr-sub:empty { display: none; }
/* ── 入力バー（画面下固定・[＋][textarea 1〜4行][送信(丸)]） ── */
#s-message-thread .thr-composer {
  position: relative; flex-shrink: 0; display: flex; align-items: flex-end; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) calc(env(safe-area-inset-bottom, 0px) + var(--sp-2));
  background: var(--bg-surface); border-top: 1px solid var(--border);
}
#s-message-thread .thr-plus-btn {
  width: 40px; height: 40px; flex-shrink: 0; border: none; cursor: pointer; line-height: 1;
  border-radius: 50%; background: var(--bg-elevated); color: var(--cr-violet);
  font-size: var(--fs-section); font-weight: 700;
}
#s-message-thread .thr-composer-input {
  flex: 1; min-width: 0; resize: none; overflow-y: hidden;
  min-height: 40px; max-height: 108px; line-height: 22px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg);
}
#s-message-thread .thr-send-btn {
  width: 40px; height: 40px; flex-shrink: 0; border: none; cursor: pointer;
  border-radius: 50%; background: var(--cr-violet); color: var(--text-inverse);
  display: flex; align-items: center; justify-content: center;
}
#s-message-thread .thr-send-btn svg { width: 20px; height: 20px; }
#s-message-thread .thr-send-btn:disabled,
#s-message-thread .thr-plus-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   T8-F: creator スレッド＝「専属AIに相談する」
   AIとの往復はサーバー会話に積まれないローカル履歴のため、ストリーム末尾の
   #msg-ai-stream に描画する。吹き出しの見た目は .bf-si-* （LINE化・T3）と同一に揃え、
   「専属AI」名義＋グングンアバターで人間の発言と区別する。
   2ボタン（解決した／運営に相談）はストリーム内に置く（固定フッター禁止）。
   ============================================================ */
#msg-ai-stream { display: flex; flex-direction: column; gap: var(--sp-3); }
#msg-ai-stream:empty { display: none; }
.cr-ai-row { display: flex; align-items: flex-end; gap: var(--sp-2); }
.cr-ai-row.me { justify-content: flex-end; }
.cr-ai-row.cont { margin-top: calc(var(--sp-1) - var(--sp-3)); }
.cr-ai-row.cont .cr-ai-avatar { visibility: hidden; }
.cr-ai-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  align-self: flex-start; margin-top: var(--sp-1); object-fit: contain;
  background: var(--bg-elevated);
}
.cr-ai-col { min-width: 0; max-width: 76%; }
.cr-ai-name {
  font-size: var(--fs-caption); color: var(--text-muted); font-weight: 700;
  margin-bottom: var(--sp-1);
}
.cr-ai-bub {
  font-size: var(--fs-body); line-height: 1.6; padding: var(--sp-2) var(--sp-3);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cr-ai-bub.ai {
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--rk-hero-border); border-radius: 16px 16px 16px 4px;
}
.cr-ai-bub.me {
  max-width: 76%; background: var(--cr-violet); color: var(--text-inverse);
  border: 1px solid transparent; border-radius: 16px 16px 4px 16px;
}
/* AI回答直下の2ボタン。左（アバター幅＋gap）に揃えて回答に属することを示す。 */
.cr-ai-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: calc(var(--sp-1) - var(--sp-3)) 0 0 calc(32px + var(--sp-2));
}
.cr-ai-act {
  font-family: inherit; font-size: var(--fs-caption); font-weight: 700; cursor: pointer;
  min-height: 36px; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  background: var(--bg-surface); color: var(--cr-violet);
  border: 1.5px solid var(--rk-hero-border);
}
.cr-ai-act:disabled { opacity: .45; cursor: not-allowed; }

/* =====================================================   T9: 「ランクUPで単価UP ↑」の共通ビジュアル（crRankUpVisualHTML）。
   ホームカードの報酬行・案件詳細の報酬特集カード・報酬詳細ACCの単価内訳・報酬の種類の
   比較シートの4箇所で同一の見た目にする。色は再生成果と同じ --rk-play-*（種類色と一致）。
   ============================================================ */
.rk-up {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-family: inherit; text-align: left; min-width: 0;
  font-size: var(--fs-caption); font-weight: 700; color: var(--rk-play-fg);
  background: var(--rk-play-bg); border: none; border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.rk-up-link { cursor: pointer; width: 100%; min-height: 44px; }
.rk-up-steps { width: 22px; height: 14px; flex-shrink: 0; fill: currentColor; }
.rk-up-txt { flex: 1 1 auto; min-width: 0; }
.rk-up-txt b { font-variant-numeric: tabular-nums; }
.rk-up-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-up-strong { font-size: var(--fs-ui); }
.rk-up-arrow { font-weight: 900; }
.rk-up-next {
  display: block; font-weight: 700; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* 1行モードのランクボーナスは必ず次の行へ落とす（横に並べると375で本文が細く折り返す） */
.rk-up-bonus {
  flex-basis: 100%; max-width: max-content; align-self: flex-start; white-space: nowrap;
  margin-left: calc(22px + var(--sp-2));
  font-size: var(--fs-caption); font-weight: 700; color: var(--rk-play-fg);
  background: var(--bg-surface); border-radius: var(--r-full);
  padding: 2px var(--sp-2);
}
/* 報酬特集カード内（2段表示）は幅いっぱい・上下の近接則（T2）に合わせる。
   375/390では「次のランク（ダイヤ）で ¥0.60 ↑」がランクボーナスのチップに横幅を奪われて
   不自然に折り返すため、チップは必ず次の行へ落とす（flex-basis:100%）。 */
.dv-reward-hero .dv-rh-rankup:empty { display: none; }
.dv-reward-hero .dv-rh-rankup { margin-top: var(--sp-3); }
.dv-reward-hero .rk-up { width: 100%; align-items: flex-start; }
.dv-reward-hero .rk-up-steps { margin-top: 3px; }
.dv-reward-hero .rk-up-col { flex: 1 1 auto; max-width: 100%; gap: var(--sp-1); }
/* 3行目のチップは内容幅に収める（列がflexなのでstretchを外す） */
.dv-reward-hero .rk-up-bonus { margin-left: 0; align-self: flex-start; }
/* 単価内訳ACC内・比較シート内はブロック配置で1行ぶんの余白を確保 */
.dt-unit-brk-next .rk-up { width: 100%; margin-top: var(--sp-2); }
.ws-step-sheet > .rk-up { width: 100%; margin-top: var(--sp-4); }
/* ホームカードの報酬行では金額チップ群の直下に1行 */
.ccard-pay.rk-row > .rk-up { align-self: stretch; }

/* ============================================================
   T10: 上限説明（CR_CAP_NOTICE）の見出し＋箇条書き＋結び。
   応募確認チェックの直前（.cap-ack-notice）・報酬ACCの常設注意帯（.cap-notice 内）・
   報酬の種類の比較シートの3箇所で同じ見た目にする。semanticは --warning 1色（CCLR-003）。
   ============================================================ */
.cap-note-title { font-weight: 900; color: var(--text-primary); }
.cap-note-list {
  margin: var(--sp-2) 0 0; padding-left: 1.15em; list-style: disc;
  font-variant-numeric: tabular-nums;
}
.cap-note-list > li { margin-top: var(--sp-1); }
.cap-note-tail { margin-top: var(--sp-2); }
.cap-note-extra {
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid rgba(245, 158, 11, .28);
  font-variant-numeric: tabular-nums;
}
.cap-ack-notice {
  margin-top: var(--sp-3); padding: var(--sp-3);
  border-left: 3px solid var(--warning); border-radius: var(--r-md);
  background: rgba(245, 158, 11, .10);
  font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.6;
}
.cap-ack-notice:empty { display: none; }
/* 比較シート内は上余白だけ足す（シート側のpaddingを二重に効かせない） */
.ws-step-sheet > .cap-ack-notice { margin-top: var(--sp-4); }

/* ============================================================
   T12: アカウント設定の保存UI整理。
   セグメントバー（4単位）＋画面下に追従する保存バー1本＋情報密度カード。
   色は既存トークンのみ（CCLR-002）。
   ============================================================ */
/* ── セグメントバー（横スクロール可・44px以上のタップ域） ── */
.acc-segbar {
  display: flex; gap: var(--sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  scrollbar-width: none;
}
.acc-segbar::-webkit-scrollbar { display: none; }
.acc-segtab {
  flex: 0 0 auto; font-family: inherit; cursor: pointer; white-space: nowrap;
  min-height: 40px; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  font-size: var(--fs-caption); font-weight: 700;
  color: var(--text-secondary); background: var(--bg-surface);
  border: 1px solid var(--border);
}
.acc-segtab.active {
  color: var(--text-inverse); background: var(--cr-violet); border-color: transparent;
}
.acc-seg[hidden] { display: none !important; }

/* ── 保存バー（1セグメント＝1フォーム＝1本） ── */
.acc-savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  /* 右端は常駐のAI相談バブル（.bsa-bubble・44〜56px・fixed）と重ならない分だけ空ける */
  padding: var(--sp-3) calc(var(--sp-5) + 56px) calc(env(safe-area-inset-bottom, 0px) + var(--sp-3)) var(--sp-5);
  background: var(--bg-surface); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(26, 22, 37, .06);
}
.acc-savebar[hidden] { display: none !important; }
.acc-savebar-msg {
  flex: 1; min-width: 0; font-size: var(--fs-caption); font-weight: 700;
  color: var(--text-muted); line-height: 1.5;
}
.acc-savebar-msg.is-dirty { color: var(--warning); }
.acc-savebar-msg.is-err { color: var(--danger); }
.acc-savebar-btns { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.acc-savebar-reset, .acc-savebar-save {
  font-family: inherit; cursor: pointer; min-height: 44px;
  padding: 0 var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-caption); font-weight: 700;
}
.acc-savebar-reset {
  background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border);
}
.acc-savebar-save {
  background: var(--cr-cta-grad); color: var(--text-inverse); border: none;
  padding: 0 var(--sp-5);
}
.acc-savebar-reset:disabled, .acc-savebar-save:disabled {
  opacity: .4; cursor: not-allowed;
}
/* バリデーションエラーの入力欄（項目直下の赤文と組で使う） */
.acc-invalid { border-color: var(--danger) !important; }

/* ── 情報密度カード（いまのアカウント状況） ── */
.acc-ov {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.acc-ov-head { display: flex; align-items: center; gap: var(--sp-2); }
.acc-ov-rank {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-caption); font-weight: 900; color: var(--cr-violet);
}
.acc-ov-title { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.acc-ov-xp { margin-top: var(--sp-3); }
.acc-ov-xp-row {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.acc-ov-bar {
  margin-top: var(--sp-1); height: 8px; border-radius: var(--r-full);
  background: var(--bg-elevated); overflow: hidden;
}
.acc-ov-bar > i {
  display: block; height: 100%; border-radius: var(--r-full); background: var(--grad-cheer);
}
.acc-ov-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.acc-ov-cell { min-width: 0; }
.acc-ov-label { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.acc-ov-val {
  margin-top: 2px; font-size: var(--fs-title); font-weight: 900; color: var(--text-primary);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.acc-ov-unit { font-size: var(--fs-caption); font-weight: 700; margin-left: 2px; }
.acc-ov-sub {
  font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* 空欄は「—」ではなく促し文で埋める */
.acc-ov-prompt {
  margin-top: 2px; font-size: var(--fs-caption); font-weight: 700;
  color: var(--cr-violet); line-height: 1.5;
}
/* ============================================================
   U1: レベルアップ画面（#pf-tabpanel-rank の #profile-quest-block.lvl-wrap）
   の大幅刷新。「根本的に分かりやすく、余白を大きく取った、視認性の高い」を余白の比率で作る:
   ブロック間 = --sp-8（32px）／カード内 padding = --sp-5（20px）／ラベル⇔値 = --sp-1〜2
   （CSPC-002「セクション間はカード間の2倍以上」・CSPC-003ヒーローカードのみ--sp-5可）。
   左右の地の余白は隣接ブロック（#profile-portfolio-block・.quest-row）と揃えて --sp-5 に統一する
   （CLAY-008: 画面内の左揃え線を増やさない）。
   色はモノクロ基調＋キーカラー（violet）集中。font-size/radius/spacing/duration はトークンのみ。
   ============================================================ */
.lvl-wrap { padding: var(--sp-6) var(--sp-5) 0; display: flex; flex-direction: column; gap: var(--sp-8); }
/* G: 320px幅では地の左右余白を CSPC-003 の
   --sp-4(16px) へ寄せ、本文に使える幅を確保する（DS 2.3「320幅は左右16〜20」）。 */
@media (max-width: 360px) {
  .lvl-wrap { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ── ① 現在のランク・ヒーロー ── */
.lvl-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5);
}
.lvl-hero-row { display: flex; align-items: center; gap: var(--sp-4); }
.lvl-hero-badge { flex: 0 0 auto; line-height: 0; }
.lvl-hero-badge svg { display: block; }
.lvl-hero-col { min-width: 0; }
.lvl-kicker { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); letter-spacing: .04em; }
.lvl-hero-name { font-size: var(--fs-hero); font-weight: 900; line-height: 1.3; margin-top: var(--sp-1); color: var(--text-primary); }
.lvl-hero-next { font-size: var(--fs-body); font-weight: 700; color: var(--text-secondary); line-height: 1.6; margin-top: var(--sp-4); }
/* 太い進捗バー（12px・角丸）。現在値/次閾値はバー下の左右＝両端に置く */
.lvl-bar { height: 12px; border-radius: var(--r-full); background: var(--bg-elevated); overflow: hidden; margin-top: var(--sp-3); }
.lvl-bar-fill {
  height: 100%; width: 0; border-radius: var(--r-full); background: var(--grad-cheer);
  transition: width var(--dur-gauge) var(--ease-spring);
}
.lvl-bar-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin-top: var(--sp-2); font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted);
}
/* F/P2 */
/* 「XP」の語の初出説明（--fs-caption 12px は重要情報に使わない規約のため --fs-body） */
.lvl-xp-note { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; }
/* 16項目の全体進捗をランク詳細の中へ移した器（P2） */
.lvl-quest-progress { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
/* 昇格条件リスト（crRankProgressHTML）。ホームのバッジと同じ crRankProgressLines() が元データ。
   達成/未達成は色ではなく ✓ と ・ の形で示す（CA11Y-003） */
.rp-head { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); }
.rp-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rp-cond { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.rp-mark { flex: 0 0 auto; margin-top: 2px; font-weight: 900; color: var(--text-muted); }
.rp-cond.met .rp-mark { color: var(--violet-dim); }
.rp-cond-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.rp-cond-text { min-width: 0; font-size: var(--fs-body); font-weight: 700; color: var(--text-secondary); line-height: 1.6; }
.rp-cond.met .rp-cond-text { color: var(--text-muted); }
/* 条件ごとの進捗バー。crCondBarPctが取れない条件（非数値条件）は描かず、器も残さない。 */
.rp-gauge { height: 6px; border-radius: var(--r-full); background: var(--bg-elevated); overflow: hidden; }
.rp-gauge-fill {
  height: 100%; border-radius: var(--r-full); background: var(--grad-cheer);
  transition: width var(--dur-gauge) var(--ease-snap);
}
@media (prefers-reduced-motion: reduce) { .rp-gauge-fill { transition: none; } }
body[data-fx="min"] .rp-gauge-fill { transition: none; }
.rp-note { display: block; margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .lvl-bar-fill { transition: none; } }
body[data-fx="min"] .lvl-bar-fill { transition: none; }

/* ── セクション見出し（1ブロック1メッセージ） ── */
.lvl-sec { min-width: 0; }
.lvl-sec-title { font-size: var(--fs-section); font-weight: 700; line-height: 1.35; margin: 0; color: var(--text-primary); }
.lvl-sec-sub { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.6; margin-top: var(--sp-2); }
.lvl-sec-title + .lvl-tiles,
.lvl-sec-title + .lvl-ways,
.lvl-sec-title + .lvl-stairs,
.lvl-sec-title + .pf-quest-summary { margin-top: var(--sp-4); }
.lvl-sec-sub + .lvl-ways { margin-top: var(--sp-3); }
.lvl-stairs + .lvl-sec-sub { margin-top: var(--sp-3); }

/* ── ② 次のランクで増えるもの（3タイル・SPは縦積み） ── */
.lvl-tiles { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 480px) { .lvl-tiles { grid-template-columns: repeat(3, 1fr); } }
.lvl-tile {
  min-width: 0; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.lvl-tile-label { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.lvl-tile-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.lvl-tile-from { font-size: var(--fs-body); font-weight: 700; color: var(--text-muted); }
.lvl-tile-arw { font-size: var(--fs-caption); color: var(--text-muted); }
.lvl-tile-to { font-size: var(--fs-hero); font-weight: 900; color: var(--violet-dim); line-height: 1.3; }
.lvl-tile-val-text { font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); line-height: 1.5; }

/* ── ③ XPの増やし方（アイコン＋1行×最大5・右に「+N XP」） ── */
.lvl-ways { display: flex; flex-direction: column; gap: var(--sp-2); }
.lvl-way {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 52px;
  padding: var(--sp-3) var(--sp-4); text-align: left; font-family: inherit; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
}
.lvl-way-tap { cursor: pointer; }
.lvl-way-tap:hover { border-color: rgba(139,92,246,.3); }
.lvl-way-tap:active { transform: scale(.985); }
.lvl-way-ic { flex: 0 0 auto; font-size: var(--fs-title); line-height: 1; }
.lvl-way-title { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 700; line-height: 1.5; }
.lvl-way-xp {
  flex: 0 0 auto; font-size: var(--fs-caption); font-weight: 700; color: var(--violet-dim);
  background: var(--violet-trace); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
}
.lvl-way-chev { flex: 0 0 auto; font-size: var(--fs-title); color: var(--text-muted); line-height: 1; }
@media (prefers-reduced-motion: reduce) { .lvl-way-tap:active { transform: none; } }
body[data-fx="min"] .lvl-way-tap:active { transform: none; }

/* ── ④ いまできること（クエスト達成サマリー。旧#pf-quest-summaryのインラインstyleをここへ移設） ── */
.pf-quest-summary { min-width: 0; }
.pf-quest-summary-row { display: flex; align-items: baseline; gap: var(--sp-2); }
.pf-quest-count { font-size: var(--fs-metric); font-weight: 900; line-height: 1; color: var(--text-primary); }
.pf-quest-pct { font-size: var(--fs-body); font-weight: 700; color: var(--violet-dim); }
.pf-quest-bar { height: 8px; border-radius: var(--r-full); background: var(--bg-elevated); margin-top: var(--sp-2); overflow: hidden; }
.pf-quest-bar-fill {
  height: 100%; width: 0; border-radius: var(--r-full); background: var(--grad-cheer);
  transition: width var(--dur-gauge) var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) { .pf-quest-bar-fill { transition: none; } }
body[data-fx="min"] .pf-quest-bar-fill { transition: none; }

/* ── ⑤ ランク一覧（横階段図）。段の高さは --sp-* トークンのクラスで決める ── */
.lvl-stairs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-1); align-items: end; }
.lvl-stair {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-1);
  min-width: 0; padding: 0 0 var(--sp-2); cursor: pointer; font-family: inherit; color: var(--text-secondary);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
}
.lvl-stair-riser-wrap {
  width: 100%; height: var(--sp-16); display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--border);   /* 階段の「地面」線（段が乗っていることを示す） */
}
.lvl-stair-riser { display: block; width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.lvl-stair-riser rect { fill: var(--violet-trace); }
.lvl-stair-r1 .lvl-stair-riser { height: var(--sp-4); }
.lvl-stair-r2 .lvl-stair-riser { height: var(--sp-5); }
.lvl-stair-r3 .lvl-stair-riser { height: var(--sp-8); }
.lvl-stair-r4 .lvl-stair-riser { height: var(--sp-12); }
.lvl-stair-r5 .lvl-stair-riser { height: var(--sp-16); }
.lvl-stair-r6 .lvl-stair-riser { height: var(--sp-16); }
.lvl-stair-badge { line-height: 0; margin-top: var(--sp-2); }
.lvl-stair-badge svg { display: block; }
.lvl-stair-name { font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.lvl-stair-xp { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.3; }
/* 現在位置は「枠線＋violet文字＋濃いライザー＋『いまここ』の文字」の4点で示す
   （CA11Y-003: 色だけで状態を伝えない）。空文字でも高さを確保して全段の下端を揃える。 */
.lvl-stair-here { min-height: 16px; font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--violet-dim); }
.lvl-stair.is-cur { border-color: var(--cr-violet); }
.lvl-stair.is-cur .lvl-stair-riser rect { fill: var(--violet-glow); }
.lvl-stair.is-cur .lvl-stair-name { color: var(--violet-dim); }
.lvl-stair:disabled { cursor: default; opacity: .6; }

/* ── ⑥ 細則（既定閉のdetails） ── */
.lvl-fine { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.lvl-fine-sum {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--sp-3) var(--sp-6) var(--sp-3) 0;
  font-size: var(--fs-body); font-weight: 700; color: var(--text-secondary); line-height: 1.5;
}
.lvl-fine-sum::-webkit-details-marker { display: none; }
.lvl-fine-sum::after {
  content: '›'; position: absolute; right: 0; top: 50%; font-size: var(--fs-title); color: var(--text-muted);
  transform: translateY(-50%); transition: transform var(--dur-fast) var(--ease-snap);
}
.lvl-fine[open] .lvl-fine-sum::after { transform: translateY(-50%) rotate(90deg); }
.lvl-fine-body { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.7; }
.lvl-fine-body p { margin: 0 0 var(--sp-2); }
.lvl-fine-body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .lvl-fine-sum::after { transition: none; } }
body[data-fx="min"] .lvl-fine-sum::after { transition: none; }

/* ── ⑤の各段タップで開くハーフモーダル（#lvl-rank-sheet・.ws-step-sheet部品を流用） ── */
.lvl-sheet-title { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.lvl-sheet-badge { flex: 0 0 auto; line-height: 0; }
.lvl-sheet-badge svg { display: block; }
.lvl-sheet-name { font-size: var(--fs-hero); font-weight: 900; line-height: 1.3; color: var(--text-primary); }
.lvl-sheet-dl { margin: var(--sp-4) 0 0; }
.lvl-sheet-dl dt { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.lvl-sheet-dl dd { margin: var(--sp-1) 0 var(--sp-4); font-size: var(--fs-body); color: var(--text-primary); line-height: 1.7; }
.lvl-sheet-dl dd:last-child { margin-bottom: 0; }

/* ============================================================
   U2: サポート画面 最下部の退会導線。
   目立たせない＝小さな muted テキストリンク1本（ボタン/カード/メニュー行にしない）。
   ============================================================ */
.pfsup-withdraw-foot { padding: var(--sp-8) var(--sp-5) var(--sp-5); text-align: center; }
.pfsup-withdraw-link {
  display: inline-block; min-height: 44px; padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-caption); color: var(--text-muted); text-decoration: underline; line-height: 1.6;
  border: 0; background: none; cursor: pointer; font-family: inherit;
}
.pfsup-withdraw-mail { min-height: 0; }

/* ============================================================
   U3: ホームのサマリー各要素を個別リンク化（<button>）したので、
   グリッドセルとしての見た目を旧divのまま保つためのボタンリセット＋右端の「›」。
   ============================================================ */
/* #s-profileのハブカード側（#pf-hub-stats内）もホーム側と同じくセル単位の<button>
   （.hhc-metric-link）が押下対象を持つ。現状セルは1枚だけのため領域全体がボタンと
   一致し、この pointer は見た目の補強として残す。 */
#pf-hub-stats .hhc-metrics { cursor: pointer; }
.hhc-metric-link {
  appearance: none; -webkit-appearance: none; background: transparent; border: none;
  padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: block; width: 100%; min-width: 0; border-radius: var(--r-sm);
}
/* 「›」はラベル直後に置く（3列が隣接するため列の右端に飛ばすと隣の列のラベルに
   くっついて見え、どの指標の「›」か分からなくなる。実機390pxで確認済み）。 */
.hhc-metric-link .hhc-metric-label { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-1); }
.hhc-metric-chev { flex: 0 0 auto; font-weight: 700; line-height: 1; opacity: .75; }
.home-nba-kicker-btn {
  appearance: none; -webkit-appearance: none; border: none; font: inherit; cursor: pointer;
  min-height: 32px; align-items: center; gap: var(--sp-1);
}
.home-hero-card.hhc-gradient .home-nba-kicker-btn { display: inline-flex; }
.home-nba-kicker-chev { font-weight: 700; line-height: 1; }

/* ============================================================
   参考画像カルーセル
   案件詳細トップバナー（#detail-hero-bg）直下。reference_images を横1行のまま
   横スクロール（スナップ）で見せる。初期表示はSPで2.5枚＝3枚目が半分覗くことで
   「まだ右にある・スクロールできる」を端の見切れで示す（CLAY-007）。

   1枚あたりの幅の式（.pf-tabbar-tiles / .pf-tile と同じ流儀で画面幅から算出する）:
     スクロール位置0で見えるのは
       左padding(--sp-4) + 1枚 + gap + 1枚 + gap + 0.5枚 = 画面幅
     なので 1枚 = (100vw − --sp-4 − --sp-2×2) ÷ 2.5。
     390px幅では (390−16−16)/2.5 = 143.2px となり、16+143.2+8+143.2+8+71.6 = 390 で
     ちょうど2.5枚に収まる（320pxでも同じ式で成立＝横あふれしない）。
     100vwはmin(100vw, 430px)で#appのシェル幅（≤767pxは430px固定）に丸める。431〜767pxで
     100vwをそのまま使うとシェルより広いタイルになり2.5枚見せが崩れるため。
     ≤430px（=設計基準のSP）では min() の結果が 100vw のままなので挙動は不変。
   縦横比は 4:5 固定（今回の入稿画像1080×1350に合わせる）。元サイズが違う画像は
   object-fit:cover + object-position:center で「左右を合わせ、縦は中央でカット」する。
   角丸は --r-md（12px）。--r-lg(20px)では4:5トリミングの四隅で
   商品名などの文字が削れて読めなくなるため緩和した（CRAD-001の許可トークン内で1段下げる）。
   ============================================================ */
/* 縦長参考コンテンツ: 動画（reference_videos kind='file'）を同じ棚へ合流し、
   「サムネイルのトリミングは画像に合わせる」＝枠を固定比率で切らず、素材の実寸比率で組む。
   高さだけ揃え（--dv-refcar-h＝旧4:5タイルの高さと同じ値）、幅は aspect-ratio から決まる。
   実寸は data(w/h) を初期値に、読み込み後 crRefTileFit が実測で確定する。実寸が分かる前だけ
   4:5 の仮枠を置く（幅0→実寸へのレイアウト跳ねを避ける・PERF-003）。
   横長素材は 16:9 を上限に丸める（1枚が棚を独占しない。crRefAspect と同値）。 */
.dv-refcar {
  --dv-refcar-h: calc((min(100vw, 430px) - var(--sp-4) - var(--sp-2) * 2) / 2.5 * 1.25);
  display: flex; flex-wrap: nowrap; gap: var(--sp-2);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scrollbar-width: none;
  padding: var(--sp-3) var(--sp-4);
  /* snap位置・scrollIntoViewの基準を左右の余白の内側に置く（.pf-tabbar-tilesと同じ理由） */
  scroll-padding-inline: var(--sp-4);
}
.dv-refcar::-webkit-scrollbar { display: none; }
.dv-refcar-item {
  flex: 0 0 auto; height: var(--dv-refcar-h); aspect-ratio: 4 / 5;
  position: relative;
  scroll-snap-align: start;
  /* GOV-004: クリック対象は<button>。ブラウザ既定の見た目だけ落として枠として使う */
  appearance: none; -webkit-appearance: none; border: none; padding: 0; margin: 0; font: inherit;
  border-radius: var(--r-md); overflow: hidden; cursor: zoom-in;
  background: var(--bg-elevated); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.dv-refcar-item[data-kind="video"] { cursor: pointer; }
.dv-refcar-item:active { transform: scale(.97); }
/* 枠が素材比率そのものなので cover でも切れない（丸めた極端比率のみ端が僅かに欠ける） */
.dv-refcar-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--bg-elevated); }
/* 動画タイルの▶（装飾・当たり判定はタイル全体）。半透明の暗い円はトークンの --text-primary を
   opacity で薄める（CCLR-002: 新規rgba直書きを増やさない）。 */
.dv-refcar-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.dv-refcar-play > i {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--text-primary); opacity: .72; color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
/* PC幅の高さ（200px/240px 幅×4:5 と同じ高さを維持） */
@media (min-width: 768px) {
  .dv-refcar { --dv-refcar-h: 250px; }
}
@media (min-width: 1024px) {
  .dv-refcar { --dv-refcar-h: 300px; }
}

/* ============================================================
   参考画像ハーフモーダルビューア
   カルーセルのタップで1枚だけ開く共通ビューア（BoostMediaViewer）では次の画像へ進めず
   「連続視聴の操作性が悪い」ため、creator側に下から出るシート型のページャを置く。
   器は既存のステップ説明シート部品（.ws-step-sheet-ov／.ws-step-sheet／.wss-grip）を
   そのまま流用する＝新しいモーダル部品を作らない（CPRI-008 Familiarity・GOV-002）。

   めくりは横スクロール＋scroll-snap-type:x mandatory のネイティブ実装。左右スワイプは
   ブラウザに任せ、←→ボタン・ドット・キーボードは scrollTo で同じ軌道に合流させる
   （独自のタッチジェスチャを発明しない）。スムーススクロールはCSSに持たせ、
   prefers-reduced-motion（§1633の一括停止）と body[data-fx="min"] の両方で切れる。
   画像はカルーセルのcoverトリミングと違い contain＝元比率のまま（トリミングで文字が
   欠けた状態の拡大では意味がないため）。
   ============================================================ */
/* .ws-step-sheet の実装は creator/index.html のページ<style>側（＝この共有CSSより後に
   読まれる）にあるため、単一クラスでは上書きできない。2クラス指定で特異度を上げる。 */
.ws-step-sheet.dv-rimg-sheet {
  /* 画像を左右いっぱいに見せるため側面paddingだけ--sp-6→--sp-3へ詰める（下端はシートの規約通り） */
  padding: var(--sp-3) var(--sp-3) calc(env(safe-area-inset-bottom, var(--sp-1)) + var(--sp-4));
  transition: transform var(--dur-fast) var(--ease-snap);
}
/* PCではシェル幅(430px)に縛らず広げる（FB②と同じ理由＝PCで小さすぎる） */
@media (min-width: 768px) { .ws-step-sheet.dv-rimg-sheet { max-width: 720px; } }
.dv-rimg-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.dv-rimg-count {
  font-size: var(--fs-ui); font-weight: 700; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.dv-rimg-name {
  font-size: var(--fs-caption); color: var(--text-muted); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-rimg-x {
  appearance: none; -webkit-appearance: none; border: none; font: inherit; cursor: pointer;
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--text-primary);
  font-size: var(--fs-section); line-height: 1;
}
.dv-rimg-track {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background: var(--bg-elevated); border-radius: var(--r-md);
}
body[data-fx="min"] .dv-rimg-track { scroll-behavior: auto; }
.dv-rimg-track::-webkit-scrollbar { display: none; }
.dv-rimg-track:focus-visible { outline: 2px solid var(--cr-violet); outline-offset: 2px; }
.dv-rimg-slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center; margin: 0;
}
/* 元比率のまま（contain）シート内で最大化する。トラックの高さは一番背の高いスライドで
   決まるため、縦横比が混在してもめくるたびに高さが跳ねない。 */
.dv-rimg-img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: 64vh; max-height: 64dvh; object-fit: contain; border-radius: var(--r-md);
}
/* 縦長参考コンテンツ: 動画スライド。9:16 を高さ基準で最大化し、横長は
   max-width で収めて contain（暗い地はトークン --text-primary）。ネイティブcontrolsは出さず
   タップ=再生/一時停止・🔊=ミュート切替（TikTok的な最小操作）。一時停止中だけ中央に▶を出す。
   高さの上限 64dvh は画像と同じ＝混在してもトラック高さが跳ねない。 */
.dv-rimg-slide-video { position: relative; }
.dv-rimg-video {
  display: block; height: 64vh; height: 64dvh; width: auto; max-width: 100%;
  object-fit: contain; border-radius: var(--r-md); background: var(--text-primary); cursor: pointer;
}
.dv-rimg-vstate {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none;
}
.dv-rimg-slide-video.is-paused .dv-rimg-vstate { display: flex; }
.dv-rimg-vstate > i {
  width: 56px; height: 56px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface); opacity: .9; color: var(--text-primary); box-shadow: var(--shadow-md);
}
.dv-rimg-vstate svg { width: 26px; height: 26px; }
.dv-rimg-mute { color: var(--text-primary); }
.dv-rimg-mute[aria-pressed="true"] { color: var(--text-muted); }
.dv-rimg-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.dv-rimg-arrow {
  appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary);
  font-size: var(--fs-section); line-height: 1;
}
.dv-rimg-arrow:disabled { opacity: .35; cursor: default; }
.dv-rimg-dots { display: flex; align-items: center; gap: var(--sp-1); }
/* 可視の点は8pxだが当たり判定は28px（CLAY-003の「サイズ＋spacingで実効ターゲットを確保」） */
.dv-rimg-dot {
  appearance: none; -webkit-appearance: none; border: none; background: transparent;
  padding: 0; margin: 0; font: inherit; cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
}
.dv-rimg-dot > i {
  display: block; width: 8px; height: 8px; border-radius: var(--r-full);
  /* CCLR-002: 新規HEX/rgba直書きを増やさないためトークン＋opacityで薄める */
  background: var(--text-muted); opacity: .4;
  transition: width var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-snap),
    opacity var(--dur-fast) var(--ease-snap);
}
.dv-rimg-dot[aria-current="true"] > i { width: 20px; background: var(--cr-violet); opacity: 1; }
/* CLAY-005: Boost Dockの吹き出しボタン（.bdk-bubble・z-index 9600）はシート(2050)より
   前面のため画像の右下を覆う。ビューアを開いている間だけ退かせる（crOpenRefImgSheetが
   body.dv-rimg-openを付ける／閉じると外す）。パネルを開いて会話中の人は画像を見ていない
   ため、隠すのは吹き出しボタンのみに限る。 */
body.dv-rimg-open .bdk-bubble { display: none; }

/* ============================================================
   初回アクセスのオンボーディング集約カード（#home-onboard-card）
   従来は初回ホームで全画面オーバーレイ3枚（紙芝居・ニックネーム・レベルアップ誘導）が
   重なって出ていた。それを「ようこそ＋3ステップのチェックリスト＋CTA1個」の1枚へ集約する。
   モノクロ基調＋キーカラー集中（色付き背景・色枠の装飾は付けない）／
   初見は2割（いまのステップだけ説明を開く）／heroボタンは1画面1個。
   チェックリストの行は既存の.quest-row/.quest-check/.quest-titleを流用し、
   クリック不可（説明表示のみ）である点だけ上書きする。
   ============================================================ */
.cr-onb-card {
  margin: var(--sp-4) var(--sp-5) var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.cr-onb-title {
  font-size: var(--fs-title); font-weight: 700; line-height: 1.4;
  color: var(--text-primary);
}
.cr-onb-lead {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 700; line-height: 1.6;
  color: var(--text-secondary);
}
.cr-onb-steps { margin-top: var(--sp-4); }
/* 説明表示専用の行。.quest-rowのポインタ/hover/押し込みは無効化する（誤タップ防止） */
.cr-onb-step, .cr-onb-step:hover, .cr-onb-step:active {
  cursor: default; transform: none; border-color: var(--bg-elevated);
}
.cr-onb-step:last-child { margin-bottom: 0; }
.cr-onb-step .quest-title { display: block; }
/* .quest-checkの既定色は--text-inverse（白・達成時のグラデ地に載る前提）。未達成の
   ステップ番号は白地に白字になるため、ここで可読色へ戻す（CA11Y-002）。 */
.cr-onb-step:not(.done) .quest-check { color: var(--text-secondary); }
.cr-onb-step.now { border-color: var(--cr-violet); }
.cr-onb-step.now .quest-check { border-color: var(--cr-violet); color: var(--cr-violet); }
/* 先のステップは「後退」させる（orientationは作業対象より視覚的に弱く） */
.cr-onb-step.next { opacity: .5; }
.cr-onb-foot {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-caption); font-weight: 400; line-height: 1.6;
  color: var(--text-secondary);
}
.cr-onb-cta { margin-top: var(--sp-4); }
.cr-onb-skip {
  display: block; width: 100%; margin-top: var(--sp-3);
  height: 40px; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-caption); font-weight: 700;
  color: var(--text-muted); cursor: pointer;
}
/* 商品ページリンク（18px）・
   もっと見る/報酬種類/ランク誘導（32px）の実タップ領域を44px以上へ広げる共通クラス。
   position:relativeな対象に透明な::afterを重ねる方式のため、文字サイズ・行間・周囲の余白・
   画像サイズ・レイアウト比率は一切変更しない（画像表示の維持条件.mdの対象外＝テキストリンクのみ）。 */
/* 見た目が小さい操作（アイコン・チップ・戻る・ヘッダーの丸ボタンなど）も同じ方式で当たり判定を44pxにする。
   position は :where() で詳細度0にし、各部品が指定済みの position（absolute・fixed など）を上書きしない。 */
:where(.info-q, .wal-i, .hob-close, .home-notif-btn, .my-top-gear, .dt-back, .page-header-back, .top-home-pill,
  .ws-viewtab-btn, .filter-chip, .acc-segtab, .quest-stage-head, .video-load-btn, .wal-cta, .wshero-cta,
  .pfsup-withdraw-mail, .wsstep-cta, #s-account .action-btn, .ws-camp-switch button) { position: relative; }
.tap44 { position: relative; }
.info-q::after, .wal-i::after, .hob-close::after, .home-notif-btn::after, .my-top-gear::after, .dt-back::after,
.page-header-back::after, .top-home-pill::after, .ws-viewtab-btn::after, .filter-chip::after, .acc-segtab::after,
.quest-stage-head::after, .video-load-btn::after, .wal-cta::after, .wshero-cta::after, .pfsup-withdraw-mail::after,
.wsstep-cta::after, #s-account .action-btn::after,
.tap44::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(44px, 100%); height: max(44px, 100%);
}
/* 初回の案件棚3件キャップの展開ボタン（ghost・CCMP-001） */
.cr-onb-more {
  display: block; width: 100%; margin-top: var(--sp-2);
  height: 44px; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-ui); font-weight: 700;
  color: var(--cr-violet); cursor: pointer;
}

/* ── F16: 支払い予定画面の安全域 ──
   監査再現: 320×740・390×844 で固定サポートアイコンが支払明細の金額へ重なった
   （creator-payout-320.png / creator-payout-390.png）。文字拡大時も金額・期限・CTAが
   隠れないよう、本文の下にドック高さ＋ホームバー分の余白を確保する。
   色・寸法・比率は変更しない（余白とsafe-areaのみ）。 */
#s-payout .screen-scroll {
  padding-bottom: calc(var(--boost-dock-height) + var(--boost-dock-bottom)
                       + env(safe-area-inset-bottom, 0px) + var(--sp-4));
}
/* 末尾の逃げ要素（.boost-dock-safe-pad）は boost.css が高さを持つ。ここでは狭幅で
   金額ブロックとドックの間に最低限の間隔を足すだけにする。 */
@media (max-width: 480px) {
  #s-payout [data-dock-avoid] { scroll-margin-bottom: calc(var(--boost-dock-height) + var(--sp-3)); }
  #s-payout .cr-payout-safe-pad { min-height: var(--sp-6); }
}

/* ============================================================
   E: 初回案内画面 #s-first-step
   白いキャンバス＋濃い文字。主操作＝テーマ色（--violet）の面、副操作＝文字のみ（Tertiary）。
   本文16px以上／操作56px／タップ44px以上／左右は--sp-5（320px幅では--sp-4）。
   表示は短いフェード280ms。prefers-reduced-motion は tokens.css:228 の全体ブロックが
   アニメーションを実質0msへ落とすため、ここで個別に打ち消す必要はない（移動・拡大は使わない）。
   ============================================================ */
#s-first-step { background: var(--bg-base); }
#s-first-step.active { animation: fadeIn 280ms var(--ease-snap); }
.fs-bar { display: flex; justify-content: flex-end; padding: var(--sp-3) var(--sp-3) 0; flex-shrink: 0; }
.fs-close {
  width: var(--sp-12); height: var(--sp-12);   /* 48px = CLAY-003 タップ44px以上 */
  border: none; background: transparent; color: var(--text-secondary);
  font-size: var(--fs-title); font-family: inherit; cursor: pointer; border-radius: var(--r-full);
}
.fs-close:hover { background: var(--bg-elevated); }
/* 見出し・イラスト・3手順の塊は縦中央へ寄せる（主操作は下端固定のまま）。
   safe center は「内容が領域より高いときだけ上詰めへ戻す」指定で、狭い画面や文字拡大でも
   先頭が切れてスクロールで届かなくなることがない（非対応ブラウザは直前の center が残る）。 */
.fs-body {
  flex: 1; padding: var(--sp-4) var(--sp-5) var(--sp-4); min-width: 0;
  display: flex; flex-direction: column;
  justify-content: center;
  justify-content: safe center;
}
.fs-title { margin: 0; font-size: var(--fs-hero); font-weight: 900; line-height: 1.35; color: var(--text-primary); }
.fs-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.5; color: var(--text-primary); }
/* 共通入口の3手順（見る → 条件を確認 → 応募）。番号は形（丸）と文字の両方で示す。
   3等分の横1行に固定する。折り返しを許すと「2列＋1列」の段違いになり、下に大きな余白が残る。
   語が長い列は中で改行させる（文字は縮小しない）。極端に狭い幅だけ縦1列へ落とす。 */
.fs-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--sp-2);
  margin: var(--sp-6) 0 0; padding: 0; list-style: none;
}
.fs-step {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md);
  background: var(--bg-surface); border: 1px solid var(--border); text-align: center;
}
.fs-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-7); height: var(--sp-7); border-radius: var(--r-full);
  background: var(--violet-trace); color: var(--violet-dim);
  font-size: var(--fs-body); font-weight: 900; line-height: 1;
}
.fs-step-t { min-width: 0; font-size: var(--fs-body); font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.fs-lead { margin: var(--sp-4) 0 0; font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary); }
/* 契約G: 初回案内の小さなイラスト。既存マスコット素材をそのまま置くだけで、
   トリミング（object-fit）も縦横比も変えない（高さ指定＋width:auto）。 */
.fs-art { display: block; margin: var(--sp-6) 0 0; line-height: 0; }
.fs-art img { height: 104px; width: auto; max-width: 100%; }
.fs-error {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: rgba(239,68,68,.12); border: 1px solid var(--danger); color: var(--danger);
  font-size: var(--fs-body); font-weight: 700; line-height: 1.6;
}
.fs-notice {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: var(--fs-body); line-height: 1.6; text-align: left;
}
.fs-notice .fs-tertiary { margin-top: var(--sp-2); }
.fs-rankcard {
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-8);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--bg-surface); border: 1px solid var(--border);
}
.fs-rankcard-badge { flex: 0 0 auto; line-height: 0; }
.fs-rankcard-col { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.fs-rankcard-name { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); }
.fs-rankcard-sub { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; }
.fs-foot {
  flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.fs-primary {
  width: 100%; height: 56px; border: none; border-radius: var(--r-md);
  background: var(--violet); color: var(--text-inverse);
  font-family: inherit; font-size: var(--fs-title); font-weight: 700; cursor: pointer;
}
.fs-primary[disabled] { opacity: .6; cursor: default; }
.fs-tertiary {
  width: 100%; min-height: 44px; border: none; background: transparent;
  color: var(--text-secondary); font-family: inherit; font-size: var(--fs-body); font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.fs-tertiary[disabled] { opacity: .6; cursor: default; }
@media (max-width: 360px) {
  .fs-body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .fs-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  /* 320pxでも3列を保つため、カードの内側だけ詰める（文字は詰めない） */
  .fs-step { padding: var(--sp-3) var(--sp-1); }
}
/* 3列がどうしても収まらない幅（文字拡大・極端に狭い端末）は縦1列へ */
@media (max-width: 280px) {
  .fs-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   P2 契約F: ランク条件を正本（GET /api/ranks）から
   取得できなかったときの表示。旧値（Silver 150XP 等）を確定情報として描かず、
   起きたことと再試行だけを出す。中立の情報表示（警告色は使わない）。
   ============================================================ */
.rank-cond-err {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin: var(--sp-2) 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--bg-elevated); border: 1px solid var(--border);
  font-size: var(--fs-body); font-weight: 700; line-height: 1.6; color: var(--text-secondary);
}
.rank-cond-retry {
  min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--violet); background: transparent; color: var(--violet-dim);
  font-family: inherit; font-size: var(--fs-body); font-weight: 700; cursor: pointer;
}
.rank-cond-retry[disabled] { opacity: .6; cursor: default; }
/* 階段図（#lvl-stairs は grid auto-flow column）の直後に出す告知は、列に潰れないよう
   grid の外へ挿入する（crRenderLevelStairs が insertAdjacentHTML('afterend')）。
   万一 grid 内へ入っても1行を占めるよう保険をかける。 */
.lvl-stairs .rank-cond-err { grid-column: 1 / -1; }
.lvl-stairs + .rank-cond-err { margin-top: var(--sp-3); }

/* ============================================================
   P2: LP（#s-welcome ゲスト）の節順変更で新設したブロック
   見出し → 参加イメージ → 3ステップ → 条件の短い説明 → 同意 → LINE CTA。
   本文は --fs-body(15px) 以上・左揃え・最大幅は読みやすさ優先で本文幅に留める。
   ============================================================ */
/* LP 最上位見出しのサブコピー（04_最重要キーメッセージ） */
.cr-lp-sub { margin: var(--sp-3) 0 0; font-size: var(--fs-body); font-weight: 700; line-height: 1.7; color: var(--text-secondary); }
.cr-lp-block { width: 100%; max-width: 320px; margin-top: var(--sp-5); text-align: left; }
.cr-lp-lead { margin: 0; font-size: var(--fs-body); font-weight: 700; line-height: 1.7; color: var(--text-primary); }
.cr-lp-steps {
  margin: var(--sp-3) 0 0; padding-left: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary); font-weight: 700;
}
.cr-lp-note { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary); }
/* 3ステップの直後に置く補足（応募後の流れは案件ごとに違う）。手順との間だけ余白を足す。 */
.cr-lp-steps + .cr-lp-note { margin-top: var(--sp-3); }
.cr-lp-details { margin-top: var(--sp-3); }
.cr-lp-details-sum {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-size: var(--fs-body); font-weight: 700; color: var(--violet-dim);
  text-decoration: underline; text-underline-offset: 2px;
}
.cr-lp-details-sum::-webkit-details-marker { display: none; }
.cr-lp-details-body {
  padding-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-body); line-height: 1.8; color: var(--text-secondary);
}
.cr-lp-details-body p { margin: 0; }
.cr-lp-details-body a { color: var(--violet-dim); text-decoration: underline; }

/* ============================================================
   クリエイターUX（ホーム／案件詳細／マイページ）
   トークン（--sp-* / --r-* / --fs-* / --text-* / --bg-* / --violet）のみ参照。HEX直書き無し。
   赤い警告色（--danger）は使わず、中立の情報表示（--bg-elevated 面＋--text-secondary）にする。
   ============================================================ */

/* ── 一覧カード「案件名 → 何をするか → 報酬 → 重要期限 → 条件を見る」 ── */
/* 案件名が先頭に来たため、直後の広告主行は上の余白を詰める（1つのまとまりに見せる） */
.ccard-title { margin-top: 0; }
/* 広告主 ＋ やること の1行（狭い幅では自然に折り返す） */
.ccard-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-1); min-width: 0; }
.ccard-sub .ccard-brand { flex: 0 0 auto; }
.ccard-sub .ccard-what { margin-top: 0; flex: 1 1 12em; min-width: 0; }
/* 「やること」1行。重要情報のためCaption(12px)に落とさず --fs-body(15px) を使う。 */
.ccard-what {
  display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2);
  font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); min-width: 0;
}
.ccard-what-label {
  flex: 0 0 auto; font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted);
  background: var(--bg-elevated); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2);
}
.ccard-what-text { min-width: 0; overflow-wrap: anywhere; }
/* 重要期限の行（報酬の直後・参加人数より前）。単独バッジではなくアイコン＋期限のセット。 */
.ccard-meta-due { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--text-secondary); font-weight: 700; }
/* 報酬順で単位の違う金額が混ざるときの注記（crSyncSortUnitNote が表示を決める） */
.mk-sort-unit-note {
  margin: var(--sp-2) var(--sp-5) 0; padding: var(--sp-3);
  background: var(--bg-elevated); border-radius: var(--r-md);
  font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary);
}

/* ファーストビューに 案件名・報酬方式・主CTA を収めるための高さ整理。
   文字は縮めず（--fs-body 維持）、重複している説明の行数だけを抑える。 */
/* 「やること」は最大2行の要約（全文は案件詳細の要約ブロック #detail-quickfacts で読める）。
   1行固定だと入稿値が途中で切れて意味が通らないため2行まで許す。切り詰めてよいのは説明だけで、
   金額・期限・上限・重要条件の行は省略しない。 */
.ccard-what-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
/* 報酬チップ直下の注記は「やること」と同じ入稿値を繰り返すため1行に抑える */
.ccard-pay .ccard-pay-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 主CTAより後ろへ回した補足（参加人数・実施期間・参加条件・上限ピル） */
.ccard-body-sub { padding: 0 var(--sp-4) var(--sp-4); }
.ccard-body-sub .ccard-meta { margin-top: 0; }
.ccard-foot { padding-bottom: var(--sp-3); }
/* ホーム上部の余白整理（文字サイズ・メダル寸法・画像枠は変更しない）。
   390×844 のファーストビューに 案件名・報酬方式・主CTA を収めるための詰め。 */
#home-hero-card.home-hero-card { padding-bottom: var(--sp-3); }
/* 活動ウィジェットは、マイページのハブカード（#pf-hub-card）と同じ .hhc-gradient
   （--grad-cta の濃い面＋白文字。共有ルールは本ファイル前方の
   .home-hero-card.hhc-gradient を参照）を使う。このIDスコープに残すのは、
   9/16以降に増えたカード固有要素（光球・メダル横のチェブロン・ゲージ見出し・
   空/取得失敗状態の文言）の色とレイヤー調整だけ。 */
/* 光球（.hhc-orb）はz-index:-1で文字の背面へ回すため、カード自身に
   isolationでスタッキングコンテキストを作る（当たり判定は持たない）。 */
#home-hero-card { isolation: isolate; }
#home-hero-card .hhc-orb {
  position: absolute; z-index: -1; pointer-events: none;
  width: 210px; height: 210px; right: -92px; top: -10px; border-radius: 50%;
  background: var(--cr-hero-orb); transform: rotate(-20deg);
}
#home-hero-card .hhc-hero-zero-title { color: var(--text-inverse); }
#home-hero-card .hhc-hero-zero-note,
#home-hero-card .hhc-hero-error-text { color: rgba(255,255,255,.8); }
#home-hero-card .hhc-hero-zero-link { color: var(--text-inverse); }
/* 濃色地の上ではvioletベースの--border-focusがほぼ見えないため、
   #pf-hub-cardと同じ白ベースの--cr-hero-inkで統一する。 */
#home-hero-card .hhc-metric-link:focus-visible,
#home-hero-card .hhc-rank-btn:focus-visible,
#home-hero-card .ah-avatar:focus-visible,
#home-hero-card .hhc-hero-zero-link:focus-visible { outline: 2px solid var(--cr-hero-ink); outline-offset: 3px; }
#home-hero-card .app-header { position: relative; z-index: 1; padding: 0; }
#home-hero-card .hhc-badge-zone { margin-top: var(--sp-4); }
/* ランク名は単独のリンク（カード全体を1つのリンクにしない）。タップ面は44px。 */
#home-hero-card .hhc-rank-btn {
  appearance: none; -webkit-appearance: none; background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px;
}
#home-hero-card .hhc-rank-chev { font-weight: 700; line-height: 1; color: var(--text-inverse); }
/* ゲージの意味を言い切る（成長ポイントだけで昇格が決まると読ませない）。 */
#home-hero-card .hhc-xp-label {
  margin-top: var(--sp-2); font-size: var(--fs-caption); font-weight: 700; color: rgba(255,255,255,.8);
}
#home-hero-card .hhc-metrics {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--cr-hero-rule);
}
/* 320px: 3指標は「今月の確定報酬」を1行使い、参加中・承認待ちを2列にする。
   文字は --fs-caption(12px) 未満へ落とさない。 */
@media (max-width: 360px) {
  #home-hero-card #home-kpi-block.hhc-metrics { grid-template-columns: 1fr 1fr; }
  #home-hero-card #home-kpi-block .hhc-metric-main { grid-column: 1 / -1; }
}
#s-home .home-masthead { padding-top: var(--sp-2); padding-bottom: var(--sp-1); }
#s-home .section-header { padding-top: 0; padding-bottom: var(--sp-2); }
#s-home #market-shelf { padding-top: 0; }
/* 報酬チップ行は情報量を変えずに内外の余白だけ1段詰める */
#market-shelf .ccard-pay { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
#market-shelf .ccard-meta-due { margin-top: var(--sp-1); }
#market-shelf .ccard-foot { padding-top: var(--sp-2); }
/* 一覧カードでは「種類とは？」を報酬チップと同じ行に置く（説明のためだけに1行使わない）。
   案件詳細の報酬特集カードは従来どおり縦積みのまま（このルールは #market-shelf 配下だけ）。 */
#market-shelf .ccard-pay.rk-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
#market-shelf .ccard-pay.rk-row > .rk-items { flex: 1 1 auto; }
#market-shelf .ccard-pay.rk-row > .ccard-pay-note { flex: 1 1 100%; }
/* ランク1行入口・目的タブ・検索行の外側余白を1段ずつ詰める（文字サイズ・タップ領域は不変） */
#home-hero-card .hhc-badge-zone-compact { margin-top: var(--sp-2); }
#s-home .mk-purpose-tabs { margin-bottom: var(--sp-1); }
#s-home .mk-search-row { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }

/* ── 案件詳細（冒頭の要約 → 報酬 → 流れ → 折りたたみ群 → 応募の2段） ── */
/* 冒頭の要約ブロック。判断材料なので本文サイズ（--fs-body 15px）で出し、Caption(12px)に詰めない。 */
.dv-quickfacts .dv-qf-head {
  font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-3);
}
.dv-qf-row { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; align-items: flex-start; }
.dv-qf-row + .dv-qf-row { border-top: 1px solid var(--border); }
.dv-qf-label {
  flex: 0 0 6.5em; font-size: var(--fs-body); font-weight: 700; color: var(--text-muted); line-height: 1.7;
}
.dv-qf-val {
  flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--text-primary);
  overflow-wrap: anywhere;
}
/* 除外条件の常時要約。危険を煽る赤（--danger）は使わず、中立の情報面（--bg-elevated）にする。 */
.dv-qf-exclude {
  margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.dv-qf-exclude-head { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); }
.dv-qf-exclude-body { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.dv-qf-exclude-item { font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary); overflow-wrap: anywhere; }
.dv-qf-exclude-more {
  margin-top: var(--sp-2); border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-body); font-weight: 700; color: var(--violet-dim); padding: var(--sp-2) 0;
}
/* 契約E: 要約から参考コンテンツ（折りたたみの中）へ行く入口。 */
.dv-qf-ref {
  margin-top: var(--sp-3); border: 1px solid var(--border); background: var(--bg-surface);
  border-radius: var(--r-full); cursor: pointer; font-family: inherit;
  font-size: var(--fs-body); font-weight: 700; color: var(--violet-dim);
  padding: var(--sp-2) var(--sp-4);
}
/* 契約E: 参加状況（定員があるときだけメーター）。 */
.dv-part-line { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.dv-part-num {
  font-size: var(--fs-hero); font-weight: 900; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.dv-part-cap { font-size: var(--fs-body); color: var(--text-secondary); }
.dv-part-meter {
  margin-top: var(--sp-2); height: 8px; border-radius: var(--r-full);
  background: var(--bg-elevated); overflow: hidden;
}
.dv-part-meter-fill { display: block; height: 100%; background: var(--cr-violet); border-radius: var(--r-full); }
.dv-part-note { margin-top: var(--sp-2); font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); }
/* 前回この端末で見た値からの増分（端末ローカルの実測比較・0/負は出さない）。 */
.dv-part-delta { margin-top: var(--sp-2); font-size: var(--fs-body); font-weight: 700; color: var(--violet-dim); }
/* みんなの投稿の合計（公開できる参加投稿の再生数の合計。順位・比較は出さない）。 */
.dv-team-views {
  margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-body); color: var(--text-secondary);
}
.dv-team-views b { font-size: var(--fs-ui); font-weight: 900; color: var(--text-primary); }
.dv-team-views-note { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--text-muted); }
/* いまの段階 / 次の1手（全体の流れは <details> に格納） */
.dv-flow-now { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.dv-flow-now-row { display: flex; gap: var(--sp-3); align-items: baseline; }
.dv-flow-now-label { flex: 0 0 5.5em; font-size: var(--fs-body); font-weight: 700; color: var(--text-muted); }
.dv-flow-now-val { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); line-height: 1.7; }
.dv-flow-now-go {
  flex: 1; min-width: 0; text-align: left; border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-body); font-weight: 700; color: var(--violet-dim); line-height: 1.7; padding: var(--sp-2) 0;
}
.dv-flow-all-sum {
  display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none;
  font-size: var(--fs-body); font-weight: 700; color: var(--text-secondary); padding: var(--sp-2) 0;
}
.dv-flow-all-sum::-webkit-details-marker { display: none; }
.dv-flow-all[open] .dv-flow-all-sum { margin-bottom: var(--sp-2); }
/* 応募の確認画面（2段目） */
.dv-confirm-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.dv-confirm-title { font-size: var(--fs-section); font-weight: 900; color: var(--text-primary); outline: none; }
.dv-confirm-back {
  border: 1px solid var(--border); background: var(--bg-surface); border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); font-weight: 700;
  color: var(--text-secondary); cursor: pointer;
}
.dv-confirm-sub { font-size: var(--fs-body); font-weight: 700; color: var(--text-secondary); margin-bottom: var(--sp-2); }

/* ── マイページ（次にできること → 成長の記録 → 入口行 → ほかにできること） ── */
.pf-sec-title {
  margin: var(--sp-5) var(--sp-5) var(--sp-2); font-size: var(--fs-title); font-weight: 700;
  color: var(--text-primary);
}
.pf-next-best, .pf-growth { display: block; }
.pf-nb-card, .pf-growth-card {
  margin: 0 var(--sp-5); padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.pf-nb-title { font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.pf-nb-effect { margin-top: var(--sp-2); font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary); }
.pf-nb-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.pf-nb-go { flex: 1; min-height: 48px; }
.pf-nb-later {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--border); background: var(--bg-surface); border-radius: var(--r-full);
  font-size: var(--fs-body); font-weight: 700; color: var(--text-secondary); cursor: pointer;
}
/* 昇格の祝い（両条件を満たしたときだけ）。280ms・1回だけ。Reduce Motion ではJS側で付けない。 */
.pf-growth-celebrate {
  margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--violet-trace); font-size: var(--fs-body); font-weight: 700;
  color: var(--text-primary); line-height: 1.7;
}
.pf-celebrate-once { animation: pfCelebrateOnce 280ms cubic-bezier(.2,0,0,1) 1; }
@keyframes pfCelebrateOnce { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-celebrate-once { animation: none; } }
body[data-fx="min"] .pf-celebrate-once { animation: none; }
.pf-growth-more {
  margin-top: var(--sp-3); border: none; background: transparent; cursor: pointer; padding: var(--sp-2) 0;
  font-size: var(--fs-body); font-weight: 700; color: var(--violet-dim);
}
/* 入口行（報酬・プロフィール・作品・活動の記録）。320pxは1列・390px以上は2列のカードグリッド。
   各カード56px以上・名前＋（あれば）動的な状態のみを縦積みで出す（長い説明文は持たない）。
   2列時の列幅は4:3固定（1fr/1fr均等ではない）。「プロフィール・SNS」が右列の
   「報酬・振込」「活動の記録」より長い文字列（J-7でfont-weight:700の--fs-bodyが15→16pxへ増えた
   影響で、360〜430px幅の均等2列だと2行に折り返していた）で、左列（プロフィール・SNS/作品）
   にだけ常に長い方の文字列が乗る配置のため、列幅を非対称にしても情報の対応関係は崩れない。
   文字サイズは変えずpadding/gapを詰め列比率で吸収する。 */
.pf-entry-rows {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: var(--sp-2);
  margin: var(--sp-5) var(--sp-5) 0;
}
.pf-entry {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0;
  width: 100%; min-height: 56px; padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface);
  cursor: pointer; text-align: left;
}
.pf-entry-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.pf-entry-label { min-width: 0; font-size: var(--fs-body); font-weight: 700; color: var(--text-primary);
  overflow-wrap: anywhere; line-height: 1.3; }
.pf-entry-sub { min-width: 0; font-size: var(--fs-caption); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-entry-sub:empty { display: none; }
.pf-entry-chev { flex: 0 0 auto; font-weight: 700; color: var(--text-muted); }
/* 320〜359pxの狭端末（CLAY-001: 320pxでも横スクロールなし）。2列だと1枚が詰まるため1列に落とす */
@media (max-width: 359px) {
  .pf-entry-rows { grid-template-columns: 1fr; }
}
/* 契約F（2026-09-19）: マイページの下位ページ。戻る＋ページ名だけのヘッダー。 */
.pf-subpage-header {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--bg-base); border-bottom: 1px solid var(--border);
}
/* display を指定したクラスは、ブラウザ既定の [hidden]{display:none} に勝ってしまう。
   マイページのトップでは「‹」だけの空の行が残っていたため、明示的に消す。 */
.pf-subpage-header[hidden] { display: none; }
.pf-subpage-back {
  flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-section); font-weight: 700; color: var(--text-primary); font-family: inherit;
}
.pf-subpage-title {
  flex: 1; min-width: 0; margin: 0; font-size: var(--fs-title); font-weight: 700;
  color: var(--text-primary); line-height: 1.4;
}
/* 遷移後の読み上げ位置としてフォーカスを受けるだけの見出し（操作できる要素ではない）。
   枠が付くと入力欄に見えるので、可視のフォーカス表示は出さない。 */
.pf-subpage-title:focus, .pf-subpage-title:focus-visible { outline: none; box-shadow: none; border: none; }
.pf-subpage-pad { flex: 0 0 44px; }

/* ランクカード（バッジ・いまのランク・次の条件・次の特典1段） */
.pf-rank-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pf-rank-badge { flex: 0 0 auto; line-height: 0; }
.pf-rank-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-rank-kicker { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); }
.pf-rank-name { font-size: var(--fs-section); font-weight: 900; color: var(--text-primary); line-height: 1.3; }
/* 現在→次の道すじ（現バッジ・トラック・次バッジ）。装飾のため aria-hidden、テキストでの
   現在/次の名前はカード内の他要素（.pf-rank-name・crRankProgressHTMLのrp-head）が伝える。 */
.pf-rank-path { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: var(--sp-3) 0; }
.pf-rank-path-badge { display: flex; align-items: center; justify-content: center; }
.pf-rank-path-next { opacity: .5; }
.pf-rank-track { flex: 0 1 64px; height: 2px; background: var(--border); }
.pf-rank-gap {
  margin-top: var(--sp-3); font-size: var(--fs-body); font-weight: 700;
  color: var(--text-primary); line-height: 1.6;
}
.pf-rank-perk {
  display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--border);
}
.pf-rank-perk-text { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; }

/* 作品ページの説明（対応形式・容量・見える範囲は「追加」を押す前に読める位置に置く） */
.pf-works-note { margin: var(--sp-4) var(--sp-5) 0; }
.pf-works-lead { margin: 0; font-size: var(--fs-body); color: var(--text-primary); line-height: 1.7; }
.pf-works-rules {
  margin: var(--sp-3) 0 0; padding-left: 1.2em;
  font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.8;
}

/* 活動の記録の空状態（ゼロの指標と空グラフを並べない） */
.pf-dash-empty { margin: var(--sp-6) var(--sp-5) 0; text-align: left; }
.pf-dash-empty-title { margin: 0; font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.pf-dash-empty-body { margin: var(--sp-2) 0 0; font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.7; }
.pf-dash-empty-cta { margin-top: var(--sp-5); width: 100%; min-height: 48px; }

/* 報酬・振込の状態文言（確定 → 次の支払日。0円・予定なしはそのまま言う）。
   V01: 紫の面の上ではなく通常の地に置き、濃い文字で出す。 */
.wal-state-note {
  margin-top: var(--sp-3); font-size: var(--fs-body); line-height: 1.7;
  color: var(--text-secondary);
}
.wal-state-note:empty { display: none; }

/* SNS：実際にできること（URLの登録・フォロワーの申告）の説明 */
.acc-sns-lead {
  margin: 0 var(--sp-5) var(--sp-2); font-size: var(--fs-body);
  color: var(--text-secondary); line-height: 1.7;
}

/* 設定：通知の届き先の理由・メール所有確認の回復パネル */
.pfsup-channels-note {
  padding: 0 var(--sp-5) var(--sp-3); font-size: var(--fs-body);
  color: var(--text-secondary); line-height: 1.7;
}
.pfsup-verify {
  margin: var(--sp-3) var(--sp-5) 0; padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface);
}
.pfsup-verify-head { font-size: var(--fs-title); font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.pfsup-verify-body { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.7; }
.pfsup-verify-msg { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.7; }
.pfsup-verify-msg.is-err { color: var(--danger); font-weight: 700; }
.pfsup-verify-fix { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }

/* メール確認をうながすハーフシート（状態変更の 403 から開く） */
.cr-ev-overlay {
  position: fixed; inset: 0; z-index: 2600; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 16, 32, .5);
}
.cr-ev-sheet {
  width: 100%; max-width: 430px; max-height: 88vh; overflow-y: auto;
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--bg-surface);
}
.cr-ev-title { font-size: var(--fs-title); font-weight: 900; color: var(--text-primary); line-height: 1.5; }
.cr-ev-body { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.7; }
.cr-ev-msg { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.7; }
.cr-ev-msg.is-err { color: var(--danger); font-weight: 700; }
.cr-ev-sheet .btn-full { margin-top: var(--sp-4); }
.cr-ev-ghost {
  width: 100%; min-height: 44px; margin-top: var(--sp-2); border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-body); font-weight: 700; color: var(--text-secondary); cursor: pointer;
}

/* ログイン・登録の主導線は LINE の1つだけ。メールでのログインは控えめな文字リンクにする（押せる範囲は44px）。 */
.cr-email-link {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
  margin-top: var(--sp-2); padding: 0 var(--sp-3); border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-ui); font-weight: 400; color: var(--text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.cr-email-link:focus-visible { outline: 2px solid var(--cr-violet); outline-offset: 2px; border-radius: var(--r-sm); }
.cr-email-link.is-on-grad { color: var(--text-inverse); }
/* 未ログインの画面の上部に置く、控えめな登録の導線（1画面1つ） */
.cr-guest-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin: var(--sp-2) var(--sp-4) 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-surface);
  font-size: var(--fs-ui); color: var(--text-secondary); white-space: nowrap;
}
.cr-guest-topbar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-guest-topbar[hidden] { display: none; }
.cr-guest-topbar-btn {
  flex-shrink: 0; min-height: 44px; padding: 0 var(--sp-3); border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-ui); font-weight: 700; color: var(--cr-violet);
}
.cr-guest-topbar-btn:focus-visible { outline: 2px solid var(--cr-violet); outline-offset: 2px; border-radius: var(--r-sm); }

/* メール確認リンクの着地（#s-verify-email） */
.ve-body { padding: var(--sp-6) var(--sp-5) var(--sp-8); }
.ve-title { margin: 0; font-size: var(--fs-hero); font-weight: 900; color: var(--text-primary); line-height: 1.4; }
.ve-text { margin: var(--sp-3) 0 0; font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.7; }
.ve-actions { margin-top: var(--sp-6); }
/* サポート吹き出し（.boost-dock）・固定CTA・BottomNavと重ならないよう、マイページ末尾に余白を足す */
#s-profile .screen-scroll { padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   動的UI（BoostMotion / boost/shared/boost-motion.js）の演出クラス。
   動かすのは transform と opacity だけ。画像・バッジ・イラストの縦横比は変えないため
   拡縮は一様 scale（1引数）に限り、width / height / object-fit は書かない。
   メーターの幅だけは補間そのものが情報なので transition を許す。
   Reduce Motion と body[data-fx="min"] では移動・拡縮・粒子・光を止め、最終状態で出す。
   ============================================================ */
.bm-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 初回の入口 / 詳細の入場 */
.bm-first-entry, .bm-card-open {
  animation: bmEnter var(--bm-dur, 200ms) cubic-bezier(.2, 0, 0, 1) 1 both;
}
@keyframes bmEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 保存できた / 条件がそろった / 応募・提出の受付：小さなチェック */
.bm-save, .bm-rank-ready, .bm-submit {
  animation: bmCheck var(--bm-dur, 200ms) cubic-bezier(.2, 0, 0, 1) 1 both;
}
@keyframes bmCheck { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

/* XP が増えた。増分の1枚だけ短く浮かせ、バーは正本値へ補間する。
   バーの枠は overflow:hidden なので中に置けない。body 直下に置き、位置は
   BoostMotion がバーの矩形から決める（レイアウトを動かさず横スクロールも作らない）。 */
.bm-xp-delta {
  position: fixed; z-index: 60; pointer-events: none; white-space: nowrap;
  font-size: var(--fs-caption); font-weight: 700; color: var(--text-primary);
  animation: bmRise var(--bm-dur, 400ms) cubic-bezier(.2, 0, 0, 1) 1 both;
}
@keyframes bmRise {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px); }
}
.bm-xp { transition: width var(--bm-bar-dur, 280ms) cubic-bezier(.2, 0, 0, 1); }

/* 実際の昇格。旧→新の差し替えと短い光の輪で合計 700ms 以内。粒子は追加しない */
.bm-rank-up {
  animation: bmRankUp var(--bm-dur, 700ms) cubic-bezier(.2, 0, 0, 1) 1 both;
}
@keyframes bmRankUp {
  0% { opacity: 0; transform: scale(.92); box-shadow: 0 0 0 0 var(--violet-glow); }
  17% { opacity: 1; }
  57% { transform: scale(1); box-shadow: 0 0 0 14px var(--violet-trace); }
  100% { transform: scale(1); box-shadow: 0 0 0 20px transparent; }
}

/* 報酬が確定。面をやわらかく1回だけ。金額のカウントアップはしない */
.bm-reward { animation: bmSoft var(--bm-dur, 280ms) cubic-bezier(.2, 0, 0, 1) 1 both; }
@keyframes bmSoft { from { background-color: var(--bg-elevated); } to { background-color: transparent; } }

/* 参加人数。数値は即時、メーターの幅だけ補間する */
.bm-meter { transition: width var(--bm-dur, 200ms) cubic-bezier(.2, 0, 0, 1); }

/* 次の一歩。行の入替はせず、その1行だけを差し替える */
.bm-next { animation: bmEnter var(--bm-dur, 200ms) cubic-bezier(.2, 0, 0, 1) 1 both; }

/* 静止表示（reduced motion のときに BoostMotion が付ける）。最終状態のまま何も動かさない */
.bm-static { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .bm-first-entry, .bm-card-open, .bm-save, .bm-rank-ready, .bm-submit,
  .bm-xp-delta, .bm-rank-up, .bm-reward, .bm-next { animation: none; }
  .bm-xp, .bm-meter { transition: none; }
  .ccard { transition: box-shadow .2s ease, border-color .2s ease; }
  .ccard:active { transform: none; }
}
body[data-fx="min"] .bm-first-entry, body[data-fx="min"] .bm-card-open,
body[data-fx="min"] .bm-save, body[data-fx="min"] .bm-rank-ready,
body[data-fx="min"] .bm-submit, body[data-fx="min"] .bm-xp-delta,
body[data-fx="min"] .bm-rank-up, body[data-fx="min"] .bm-reward,
body[data-fx="min"] .bm-next { animation: none; }

/* 入力欄の文字は16px以上（iOS が入力時に画面を拡大しないように）。 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
select, textarea { font-size: max(var(--fs-body), 16px); }
.video-url-input { min-height: 44px; }
/* 押せる要素の高さの下限（スクロールする帯の中では当たり判定の広げ方が切り取られるため、本体を44pxにする）。 */
/* ホームのヒーロー（#home-hero-card）の中は固定条件のため対象外。 */
:is(.filter-chip, .dv-more, .action-btn, .btn-secondary, .ws-camp-tab):not(#home-hero-card *) { min-height: 44px; height: auto; }