/**
 * クリエイター・作品の表示（結果ページ・クリエイター詳細・ジャンル別・トップ。includes/creator-view.php）
 */

/* ---- 条件・注記・並べ替えチップ ---- */
.creators__condition { margin-bottom: var(--space-3); }
.creators__notice {
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--lineage-fi);
    font-size: var(--fs-sm);
}
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.chips__label { font-size: var(--fs-xs); color: var(--text-sub); }
.chip {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--text-sub);
    font-size: var(--fs-xs);
    cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--secondary); color: var(--text); background: var(--surface-2); }
/* ジャンルのチップは「ジャンルで絞る」で開閉する */
.chips__toggle {
    padding: 4px 4px;
    border: 0;
    background: none;
    color: var(--secondary);
    font-size: var(--fs-xs);
    cursor: pointer;
}
.chips__toggle::after { content: ' ▾'; }
.chips__toggle[aria-expanded="true"]::after { content: ' ▴'; }
.chips__genres { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; }
.chips__genres[hidden] { display: none; }
@media (hover: hover) {
    .chip:hover { border-color: var(--secondary); }
}

/* ---- カード ---- */
.creator-list { display: grid; gap: var(--space-4); }
.creator-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.creator-card__head { display: flex; gap: var(--space-3); align-items: center; }
.creator-card__title { min-width: 0; }
.creator-card__badge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); }
.badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--primary-hover);
}
.badge--discovery { color: var(--lineage-fo); }
/* 運営が手で確認した「myfans月間ランキング入り」。順位は出さない */
.badge--ranking { background: transparent; border: 1px solid var(--border); color: var(--text-sub); }
.creator-detail__badge { margin-top: var(--space-1); }
.creator-card__match { color: var(--text-sub); }
.creator-card__match .type-code { color: var(--text); letter-spacing: 0.04em; }
.creator-card__name { font-size: var(--fs-lg); line-height: 1.35; overflow-wrap: anywhere; }
.creator-card__name a { color: var(--text); }
.creator-card__note { font-size: var(--fs-xs); color: var(--text-sub); font-family: var(--font-body); font-weight: 400; margin-left: var(--space-1); }
.creator-card__id { font-size: var(--fs-xs); color: var(--text-sub); overflow-wrap: anywhere; }
.creator-card__genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.creator-card__intro { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-sub); line-height: 1.7; }
.creator-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--text-sub);
}
.creator-card__facts .is-warning { color: var(--lineage-fi); }
/* 送客ボタン（上）→「詳しく見る」の控えめなテキストリンク（下） */
.creator-card__actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.creator-card__detail {
    justify-self: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    color: var(--text-sub);
}
.creator-card__detail:hover { color: var(--text); }

/* ---- アバター（画像がなければイニシャル。色は系統色） ---- */
.creator-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--lineage, var(--secondary));
    background: var(--lineage-bg, var(--surface-2));
    border: 1px solid var(--lineage, var(--border));
}
.creator-avatar--md { width: 56px; height: 56px; font-size: 1.5rem; }
.creator-avatar--lg { width: 96px; height: 96px; font-size: 2.5rem; }

/* ---- 送客ボタン＋PR ---- */
.outbound { display: flex; align-items: center; gap: var(--space-2); }
.outbound__button { flex: 1 1 auto; min-height: 44px; }
/* 「無料サンプルを見る」: メインより目立たせない枠線だけのサブボタン */
.btn--sample {
    min-height: 40px;
    background: transparent;
    color: var(--text-sub);
    border-color: var(--border);
    font-size: var(--fs-sm);
}
@media (hover: hover) {
    .btn--sample:hover { color: var(--text); border-color: var(--secondary); }
}

/* 2位以下・発掘枠は枠線（塗りのピンクは1画面に1つまで。design.md） */
.btn--outbound { background: transparent; color: var(--primary-hover); border-color: var(--primary); }
@media (hover: hover) {
    .btn--outbound:hover { background: rgba(255, 46, 136, 0.1); }
}
.outbound__pr {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: 1;
    padding: 3px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-sub);
}

.creators__empty p { font-size: var(--fs-sm); color: var(--text-sub); }

/* ---- クリエイター詳細 ---- */
.creator-detail__head { display: flex; gap: var(--space-4); align-items: center; }
.creator-detail__name { font-size: var(--fs-2xl); line-height: 1.3; overflow-wrap: anywhere; }
.creator-detail__note { font-size: var(--fs-sm); color: var(--text-sub); }

/* ---- 好みとの一致 ---- */
.creator-card__matched { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--secondary); }

/* ---- 作品（単品・無料サンプル）。投稿タイトルは出さず、運営の紹介文だけ ---- */
.work-list { display: grid; gap: var(--space-3); }
@media (min-width: 640px) {
    .work-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.work-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
/* サムネイル（myfans の公開投稿の表紙。正方形。左に置き、送客ボタンは下に全幅。2026-10-09） */
.work-card__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.work-card--thumb {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "thumb body" "cta cta";
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: start;
}
.work-card__thumb {
    grid-area: thumb;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.work-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.work-card__thumb:hover img, .work-card__thumb:focus-visible img { transform: scale(1.04); }
.work-card--thumb .work-card__body { grid-area: body; }
.work-card--thumb .outbound { grid-area: cta; margin-top: 0; }
.work-list__note { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-sub); }
.work-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-sub); }
.work-card__price { color: var(--text); font-family: var(--font-number); }
.work-card__intro { font-size: var(--fs-sm); line-height: 1.6; }
.work-card__creator { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--fs-xs); color: var(--text-sub); }
.work-card__date { color: var(--text-sub); }
.work-card__creator a { color: var(--text-sub); }
.work-card__genres { font-size: var(--fs-xs); color: var(--text-sub); }
.work-card .outbound { margin-top: auto; }
.badge--free { color: var(--lineage-ro, var(--secondary)); }


/* ---- プランと料金（クリエイター詳細） ---- */
.plan-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.plan-list dt { color: var(--text-sub); }
.plan-list dd { margin: 0; }

/* ---- 紹介リンクの無い人の詳細（送客ボタンの代わりの案内） ---- */
.creator-detail__unlinked { margin-top: var(--space-4); }

/* ---- クリエイター詳細のよくある質問（2026-10-07） ---- */
.creator-faq { grid-template-columns: 1fr; gap: var(--space-1); }
.creator-faq dt { color: var(--text); font-weight: 700; margin-top: var(--space-3); }
.creator-faq dt:first-child { margin-top: 0; }
.creator-faq dd { color: var(--text-sub); }

/* ==== myfans の公開データ（2026-10-07。docs/myfans-api-license.md） ==== */
/* カードの数値（フォロワー・いいね・先月の投稿） */
.creator-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.creator-stats__item { display: flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.creator-stats dt { font-size: var(--fs-xs); color: var(--text-sub); }
.creator-stats dd { margin: 0; font-family: var(--font-number); font-size: var(--fs-sm); color: var(--text); }

/* 小さいカード（トップの横スクロール） */
.creator-mini {
    flex: 0 0 136px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: var(--space-3) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-1); color: var(--text); text-align: center; text-decoration: none; scroll-snap-align: start;
}
.creator-mini:hover, .creator-mini:focus-visible { border-color: var(--secondary); }
.creator-mini__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.creator-mini__metric { font-family: var(--font-number); font-size: var(--fs-xs); color: var(--primary); }
.creator-mini__price { font-size: var(--fs-xs); color: var(--text-sub); }

/* 詳細ページのヘッダー画像 */
.creator-banner { margin-top: var(--space-3); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3 / 1; background: var(--surface-2); }
.creator-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creator-detail--banner .creator-detail__head { position: relative; margin-top: -36px; padding-left: var(--space-3); align-items: flex-end; }
.creator-detail--banner .creator-avatar--lg { border: 3px solid var(--bg); }

/* 詳細ページの数値 */
.mf-dashboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.mf-dashboard__item { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); text-align: center; }
.mf-dashboard dt { font-size: var(--fs-xs); color: var(--text-sub); }
.mf-dashboard dd { margin: 4px 0 0; font-family: var(--font-number); font-size: var(--fs-lg); color: var(--text); }
.mf-dashboard__rank { margin-top: var(--space-3); font-size: var(--fs-sm); }
.mf-dashboard__rank strong { color: var(--primary); }
.mf-dashboard__note { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); }

/* 動画の表紙 */
.mf-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: var(--space-3); }
@media (min-width: 641px) { .mf-posts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mf-post { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.mf-post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.mf-post:hover img { transform: scale(1.04); }
.mf-post__duration { position: absolute; right: 4px; top: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.6875rem; font-family: var(--font-number); }
.mf-post__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); color: #fff; font-size: 0.6875rem; text-align: left; }
.mf-posts__pr { margin-top: 4px; text-align: right; font-size: var(--fs-xs); color: var(--pr-text); }
@media (max-width: 380px) { .mf-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- キャンペーンの案内（期間中だけ。includes/campaign-view.php） ---- */
.campaign {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(255, 46, 136, 0.14), rgba(165, 146, 255, 0.1));
}
.campaign--top { margin: var(--space-5) 0 0; }
.campaign__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.campaign__badge {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: #fff;
    font-family: var(--font-number);
    font-weight: 700;
    font-size: var(--fs-sm);
}
.campaign__name { font-weight: 700; }
.campaign__ends { color: var(--text-sub); font-size: var(--fs-xs); }
.campaign__text { margin-top: var(--space-2); font-size: var(--fs-sm); line-height: 1.7; }
.campaign__code {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--font-number);
    font-size: 1em;
    letter-spacing: 0.08em;
}
.campaign__link { margin-top: var(--space-3); }
.campaign__howto { margin-top: var(--space-2); }
.work-card__campaign { color: var(--primary-hover); font-family: var(--font-number); font-weight: 700; }