/* =====================================================================
   isREAL public UI — cast index(一覧)
   tokens.css を前提とするコンポーネントCSS。site chrome(header/nav)は
   cast-detail.css と併読する(共通chromeの抽出は後続の整理WOで行う)。
   ゴールデンスクリーン: /_p/ir-golden-index-5b7e21fc/(2026-10-16のカード変更前の状態)
   実装WOでは参照のみ・編集禁止(変更はデザインレビューを通す)。
   カード方針: 風俗カタログではなく雑誌WEBの人物特集への入口。
   情報はNo・名前・キャッチ・本日の時間帯(事実表示)だけに絞る。
   列数は1カラムで確定(2026-08-18)。
   ===================================================================== */

.ci-page { max-width: 430px; margin: 0 auto; padding-bottom: 104px; }
@media (min-width: 768px) { .ci-page { max-width: 560px; } }

/* ---- page head ---- */
.ci-head { padding: 72px 22px 8px; }
.ci-head__en {
  font-family: var(--ir-font-en); font-style: italic; font-weight: 400;
  font-size: 30px; letter-spacing: 0.12em; color: var(--ir-ink);
}
.ci-head__jp {
  font-family: var(--ir-font-sans);
  font-size: var(--ir-type-caption); letter-spacing: 0.3em;
  color: var(--ir-muted); margin-top: 4px;
}

/* ---- list ---- */
.ci-list { padding: 14px 22px 0; display: grid; gap: 46px; }

/* ---- card(写真オーバーレイ型 2026-10-16 クライアント決定) ----
   名前・キャッチ・スペックを写真下部に重ね、状態チップをその真上に置く。
   高級感を保つための決まり: 写真上のチップは2種類まで / 料金・評価・アイコンは載せない /
   グラデーションは温かい暗色で上限78% / 色はトークンの範囲。TOP・一覧・ランキングで共通。 */
.ci-card { display: block; text-decoration: none; color: inherit; }
.ci-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin: 0; }
.ci-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ci-card__media::after {
  content: ""; position: absolute; inset: 40% 0 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(22, 24, 20, 0.78) 0%, rgba(22, 24, 20, 0.5) 45%, rgba(22, 24, 20, 0) 100%);
}
.ci-card__body { padding: 14px 2px 0; }
.ci-card__body .cast-chips { margin-bottom: 10px; }
.ci-card__name {
  font-family: var(--ir-font-display); font-weight: 600;
  font-size: 21px; letter-spacing: var(--ir-tracking-display);
  line-height: 1.4; color: var(--ir-ink);
}
.ci-card__catch {
  font-family: var(--ir-font-display);
  font-size: 13px; letter-spacing: 0.08em; line-height: 1.7;
  color: var(--ir-muted); margin-top: 6px;
}
.ci-card__spec, .ci-card__today {
  display: inline-block; margin: 8px 12px 0 0;
  font-family: var(--ir-font-meta);
  font-size: var(--ir-type-caption); letter-spacing: 0.06em;
}
.ci-card__spec { color: var(--ir-subtle); }
.ci-card__today { color: var(--ir-forest); }

/* 写真があるカードは本文を写真に重ねる(写真がない場合は上の通常表示) */
.ci-card__media > .ci-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 16px 16px; color: #FFFFFF;
}
.ci-card__media > .ci-card__body .ci-card__name { font-size: 22px; line-height: 1.35; color: #FFFFFF; }
.ci-card__media > .ci-card__body .ci-card__catch { margin-top: 4px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.ci-card__media > .ci-card__body .ci-card__spec { color: rgba(255, 255, 255, 0.82); }
.ci-card__media > .ci-card__body .ci-card__today { color: #D6E4CF; }
.ci-card > .schedule-note {
  margin-top: 10px; padding: 0 2px;
  font-family: var(--ir-font-sans); font-size: var(--ir-type-caption);
  line-height: 1.7; color: var(--ir-muted);
}

/* ---- ランキング導線・注釈 ---- */
.ci-head__ranking {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--ir-font-sans); font-size: var(--ir-type-small);
  letter-spacing: 0.08em; color: var(--ir-forest); text-decoration: none;
  border-bottom: 1px solid var(--ir-sage); padding-bottom: 3px;
}
.ci-head__ranking::after { content: "→"; color: var(--ir-brass); }
.ci-head__jp--title {
  font-family: var(--ir-font-display); font-weight: 600;
  font-size: var(--ir-type-title); letter-spacing: var(--ir-tracking-display);
  color: var(--ir-ink); margin-top: 6px;
}
.ci-ranking-note {
  margin: 36px 22px 0; padding-top: 16px; border-top: 1px solid var(--ir-line);
  font-family: var(--ir-font-sans); font-size: var(--ir-type-micro);
  line-height: 1.9; letter-spacing: 0.04em; color: var(--ir-muted);
}
.ci-ranking-all {
  display: block; margin: 28px 22px 0; padding: 14px 0; text-align: center;
  border: 1px solid var(--ir-line); background: var(--ir-surface);
  font-family: var(--ir-font-sans); font-size: var(--ir-type-ui);
  letter-spacing: var(--ir-tracking-cta); color: var(--ir-forest); text-decoration: none;
}

/* ---- nav-only fixed bottom(キャスト固有CTAのないページ用) ---- */
.site-fixed-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: color-mix(in srgb, var(--ir-bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ir-line);
}