/* ============================================================
   WHITE BASE TRIAL — トランプ券面コンセプト（お試し版）
   style.css の後に読み込む上書きレイヤー。本採用時は
   style.css の :root トークンに統合して1ファイルに戻す。
   コンセプト：白い券面 × 赤（♥♦）× 黒（♠♣）× 差し色の金
   ============================================================ */

:root {
  color-scheme: light;

  /* --- ベース反転：黒いテーブル → 白い券面 --- */
  --c-bg: #FFFFFF;
  --c-bg-2: #FAFAF8;
  --c-bg-3: #F4F4F0;
  --c-surface: #FFFFFF;
  --c-surface-2: #F7F7F4;
  --c-border: #E6E6E0;
  --c-border-2: #CFCFC8;
  --c-text: #141414;
  --c-text-dim: #4B4B4B;
  --c-text-mute: #8A8A82;

  /* 金は白地で読めるアンティークゴールドへ（#FFD700は白地で消える） */
  --c-gold: #A8860B;
  --c-gold-dim: #8A6D08;

  /* 「光らせる」グロー → 「浮かせる」上品な影に */
  --shadow-glow-red: 0 6px 22px rgba(212, 0, 0, 0.14);
  --shadow-glow-gold: 0 6px 22px rgba(168, 134, 11, 0.16);
}

/* 背景の巨大スート透かし：白→黒ベースに（赤スートc2/c3はそのまま活かす） */
.bg-card { color: #141414; opacity: 0.028; }

/* ヘッダー：黒の磨りガラス → 白の磨りガラス */
.site-header { background: rgba(255, 255, 255, 0.86); }

/* ヒーロー頂部の赤グロー：白地では淡いローズ霞に抑える */
.hero::before {
  background: radial-gradient(circle at center, rgba(212, 0, 0, 0.07), transparent 60%);
}

/* ボタン：白地では「明るく光る」より「深く沈む」ホバーが上品 */
.btn-primary:hover {
  background: var(--c-primary-dim);
  border-color: var(--c-primary-dim);
}
.btn-gold:hover { color: #fff; }

/* 金の枠線：半透明イエロー → ダークゴールドの実線感 */
.v-pritzker,
.v-ultimate,
.job-ssr,
.pitch-card-wide { border-color: rgba(168, 134, 11, 0.45); }
.v-gold { color: var(--c-gold) !important; }

/* レアリティバッジR：濃グレー地に黒文字 → 白文字 */
.rarity-r { color: #fff; }

/* カード群に「券面」の物理感（トランプが白い机に置かれた影） */
.pitch-card, .job-card, .work-card, .ai-step, .ai-expert, .faq-item {
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.05);
}
.work-card:hover,
.work-card:focus-visible { box-shadow: 0 10px 28px rgba(20, 20, 20, 0.14); }

/* フォーム：黒い入力欄 → 白い入力欄 */
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form select,
.apply-form textarea { background: #FFFFFF; }
.form-error { color: #C62828; }

/* 注記ブロックの下地：白の2% → 黒の3% */
.job-note { background: rgba(0, 0, 0, 0.03); }

/* 実績モーダル：背景幕と影を白地向けに軽く */
.work-modal-backdrop { background: rgba(0, 0, 0, 0.45); }
.work-modal-panel { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }

/* ============================================================
   フッター：あえて黒のまま残す（白い券面を黒スートで「締める」）
   フッター内だけトークンをダーク値に再定義 → 子要素に波及
   ============================================================ */
.site-footer {
  background: #0A0A0A;
  --c-text: #F5F5F5;
  --c-text-dim: #B8B8B8;
  --c-text-mute: #7A7A7A;
  --c-border: #2A2A2A;
  --c-border-2: #3A3A3A;
  --c-surface: #161616;
  --c-surface-2: #1E1E1E;
  --c-gold: #FFD700;
}

/* 実績カード：右下に180°回転した同じインデックス（本物のトランプの作法） */
.work-card { position: relative; }
.work-rank-mirror {
  position: absolute;
  right: 20px;
  bottom: 16px;
  min-width: 0;
  transform: rotate(180deg);
  pointer-events: none;
}

/* 実績カード：縦横比を本物のトランプに（ポーカーサイズ 63×88mm） */
.work-card { aspect-ratio: 63 / 88; }
/* ワイド画面では5枚が1列に並ぶ＝配られた手札（240→210で5列成立） */
.work-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* モバイル：1列の巨大カード化を避け、2列の手札組みに */
@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .work-card { padding: 16px 14px; }
  .work-rank-mirror { right: 14px; bottom: 12px; }
}

/* 券面の作法：数字が上・スートが真下（縦積みインデックス） */
.work-rank {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
/* カード内では左肩に寄せる（stretchで中央に流れるのを防止） */
.work-card > .work-rank { align-self: flex-start; }
/* 実物の配色：黒スート（♠♣）は黒、赤スート（♥♦）は赤 */
.work-suit { color: var(--c-text); }
.work-suit-red { color: var(--c-primary); }

/* 用途名：中央ピップ（スート透かし）＋題名をグループにして、
   ランク下〜ステータス上の「空きバンド」の中央に自動配置。
   幾何学的センターだと下段2列（ステータス＋詳細）のぶん
   上の余白が勝って胴長に見えるための処方 */
.work-pip {
  margin-top: auto; /* status側の margin-top:auto と対で空きを等分 */
  align-self: center;
  font-size: 72px;
  line-height: 1;
  color: rgba(20, 20, 20, 0.09);
  pointer-events: none;
  user-select: none;
}
.work-pip-red { color: rgba(212, 0, 0, 0.09); }
.work-card .work-title {
  align-self: center;
  text-align: center;
  margin: 12px 0 0;
  max-width: calc(100% - 8px);
}
/* モバイル：カードが小さく縦積みピップは溢れるため、
   題名の背後の透かしに切替（絶対配置＝レイアウト負荷ゼロ）。
   題名は margin-top:auto で空きバンド中央を維持 */
@media (max-width: 640px) {
  .work-pip {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 64px;
  }
  .work-card .work-title { margin-top: auto; }
}