/* TWIGAY ── 版面
 *
 * 色・角丸・書体は tokens.css（config.py から生成）にしか書きません。
 * ここに色の実値を直接書かないこと。書くと「配色は config の1箇所」が壊れます。
 *
 * twifans と一番違うのは並べ方です（設計書 §2）:
 *   twifans … 高さ不揃いのタイルを敷き詰める
 *   TWIGAY  … 人ごとの横スクロール行を縦に積む
 * 色や角丸は寄せれば似てしまいますが、並べ方が違うと似せようがありません。
 */

/* ロゴ専用の書体。**本文には使いません。**
 * Bungee を T W I G A Y の6文字だけに削ったもの（119KB → 1.3KB）。
 * url は style.css からの相対なので、ページの深さが変わっても効きます。
 * font-display:block ── 差し替わる瞬間に別書体のロゴが一瞬見えるのを避ける
 * （1.3KB なので待たせる時間はほぼありません）。 */
@font-face {
  font-family: 'TwigayMark';
  src: url('fonts/twigay-mark.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.35; }

/* ---------------------------------------------------------------- 準備中の帯 */

.preview_bar {
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 6px 12px;
}

/* ---------------------------------------------------------------- ヘッダ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
}

/* ワードマーク（2026-09-02 sos選択の案6）。TWI は塗り、GAY は縁取りで抜く。
 * 縁取りは em 指定なので、文字サイズを変えても太さの比率が保たれます。 */
.brand_mark {
  font-family: var(--font-mark);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.brand_mark em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: .048em var(--accent);
}
/* 書体が読めなかったときの逃がし先。縁取りだけだと Arial Black で細く見えるので、
 * そのときは塗りに戻す（読めないより、色違いで読めるほうがよい）。 */
@supports not (-webkit-text-stroke: 1px red) {
  .brand_mark em { color: var(--accent); -webkit-text-stroke: 0; }
}

.topnav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
}
.topnav a:hover { color: var(--text); }
.topnav a[data-on] {
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 700;
}

/* ---------------------------------------------------------------- 本体 */

.main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.lead { padding: 24px 0 8px; }
.lead_title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
}
.lead_sub { margin: 6px 0 0; font-size: 22px; font-weight: 700; }
.lead_stat { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.phead { margin: 8px 0 20px; }
.phead h1 { margin: 0; font-size: 24px; }
.phead h1 span { font-size: 15px; color: var(--muted); font-weight: 400; }
.phead_note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.phead_warn {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--danger);
  border-left: 2px solid var(--danger);
  padding-left: 10px;
}

.empty { color: var(--muted); font-size: 14px; padding: 32px 0; }

/* ---------------------------------------------------------------- 人ごとの行 */

.row { margin: 32px 0; }

.row_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.row_who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row_av {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.row_av-none { background: var(--surface2); }
.row_name {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row_count { font-size: 12px; color: var(--muted); flex: none; }
.row_more { font-size: 12px; color: var(--accent); white-space: nowrap; flex: none; }

.row_scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.row_scroll > * { scroll-snap-align: start; }

/* ---------------------------------------------------------------- タイル */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px 12px;
}

.tile { min-width: 0; }

.tile_shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / .35);
}
.tile_shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.tile_shot:hover img { transform: scale(1.04); }
.tile_shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tile_play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #fff;
  text-shadow: 0 2px 8px rgb(0 0 0 / .6);
  opacity: .0;
  transition: opacity .2s ease;
}
.tile_shot:hover .tile_play { opacity: .92; }

.tile_time {
  position: absolute;
  right: 6px; bottom: 6px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgb(0 0 0 / .6);
  color: #fff;
}

.tile_rank {
  position: absolute;
  left: 6px; top: 6px;
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgb(0 0 0 / .65);
  color: #fff;
}
.tile_rank[data-top] { background: var(--accent); color: var(--accent-ink); }

.tile_meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  font-size: 12px;
  min-height: 18px;
}
.tile_user {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile_metric { color: var(--muted); flex: none; }

/* ---------------------------------------------------------------- 索引カード */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
}
.card:hover { background: var(--surface2); color: var(--text); }
.card_t { font-weight: 500; }
.card_n { font-size: 12px; color: var(--muted); flex: none; }

.axis { margin: 26px 0; }
.axis h2 { margin: 0 0 10px; font-size: 15px; color: var(--muted); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
}
.chip small { color: var(--muted); font-size: 11px; }
.chip:hover { background: var(--surface2); color: var(--text); }
.chip-go {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.chip-go:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); }

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
  margin-bottom: 18px;
}
.seg > * {
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}
.seg > [data-on] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------- クリエイター頭 */

.chead {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 26px;
}
.chead_av {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.chead_av-none { background: var(--surface2); }
.chead_body { min-width: 0; }
.chead h1 { margin: 0; font-size: 24px; }
.chead_stat { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.chead_bio {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
  white-space: pre-wrap;
}
.chead_links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---- 長い自己紹介を4行で畳む。開けば全文が読める（隠していない）。
   短い人には build.py 側で <details> を作らないので「続きを読む」も出ません */
.bio { margin-top: 10px; }
.bio summary { list-style: none; cursor: pointer; }
.bio summary::-webkit-details-marker { display: none; }
.bio .chead_bio { display: block; margin: 0; }
.bio:not([open]) .chead_bio {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bio summary::after {
  content: '続きを読む';
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
}
.bio[open] summary::after { content: '閉じる'; }

/* ---------------------------------------------------------------- 節の見出し
   一覧の**並び順を右に必ず書く**ための器。順が分からない一覧は信用されない */

.sec_h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 0 12px;
}
.sec_h h2 { margin: 0; font-size: 15px; font-weight: 700; }
.sec_h span { font-size: 12px; color: var(--muted); flex: none; }

/* ---------------------------------------------------------------- 買うボタン
   MyFans へ出ていく導線は**この見た目1つに統一する**。
   別の色・別の形を増やすと「どれが本編か」が版面から読めなくなる */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.cta:hover { color: var(--accent-ink); filter: brightness(1.08); }

/* ---- 売り文句。**本編がある人にしか出ない**（build.py 側で paid>0 を確かめている） */
.sell {
  margin: 22px 0 4px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.sell_h { font-size: 16px; font-weight: 700; }
.sell_p { margin: 8px 0 16px; font-size: 13px; color: var(--muted); }
.sell_p b { color: var(--text); }
.sell_sub { display: block; margin-top: 8px; font-size: 11px; color: var(--muted); }

/* ---- 下端に貼り付く買うボタン。人の面は縦に長く、上の1個は視界から消える。
   safe-area を足しているのは iPhone の下端バーに隠れるのを避けるため。
   ⚠ 端まで塗りたくても**負のマージンで外へ出さない** ── 横スクロールが生まれ、
      本文が画面の右で切れます（2026-09-02 に実測。8px はみ出していた） */
.stick {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  margin-top: 26px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top,
    var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.stick .cta { width: min(420px, 100%); }

/* ---------------------------------------------------------------- 人のカード
   「近い人」用。行き止まりを作らないための出口なので、
   **本編の本数を表に出す**（押した先がまた空だと二度と押されない） */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.pcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.pcard:hover { background: var(--surface2); color: var(--text); }
.pcard img, .pcard_av-none {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
  flex: none;
}
.pcard_n {
  font-size: 13px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard_s { font-size: 11px; color: var(--muted); }
.pcard_s b { color: var(--accent); font-weight: 700; }

/* ---------------------------------------------------------------- モーダル */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal_bg { position: absolute; inset: 0; background: rgb(0 0 0 / .82); }
/* ⚠ 中を縦にスクロールさせる。**「これが好きなら」を6枚の面にした**ので、
      overflow:hidden のままだと画面の小さい端末で下が切れて出ません（2026-09-02） */
.modal_box {
  position: relative;
  width: min(420px, 100%);
  max-height: 100%;
  overflow: hidden auto;
  overscroll-behavior: contain;
  background: var(--surface2);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgb(0 0 0 / .6);
  scrollbar-width: none;
}
.modal_box::-webkit-scrollbar { display: none; }
.modal_x {
  position: absolute;
  right: 8px; top: 8px;
  z-index: 2;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / .55);
  color: #fff;
  cursor: pointer;
}
.modal_video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}
.modal_foot { display: grid; gap: 8px; padding: 14px; }
.modal_more {
  text-align: center;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
}
.modal_more:hover { color: var(--text); background: var(--bg); }
.modal_more[hidden] { display: none; }
.modal_go {
  text-align: center;
  padding: 13px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.modal_go:hover { color: var(--accent-ink); filter: brightness(1.08); }
.modal_go[hidden] { display: none; }

/* ---- サンプルを見終わった瞬間に出るカード
   **押してほしい気持ちの頂点はここ。** 動画の上に重ね、他の選択肢を一段引っ込める */
.modal_stage { position: relative; }
.modal_end {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
}
.modal_end[hidden] { display: none; }
.modal_end_av {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
}
.modal_end_av[hidden] { display: none; }
.modal_end_t { margin: 0; font-size: 17px; font-weight: 700; }
.modal_end_s { margin: 0; font-size: 13px; color: var(--muted); }
.modal_go-end { min-width: 220px; margin-top: 4px; }
.modal_end_again {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- 「これが好きなら」。もう1本開かせて送客の機会をもう1回作るためのもの */
.modal_rel { padding: 0 14px 14px; }
.modal_rel[hidden] { display: none; }
.modal_rel_t { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
/* ⚠ 横スクロールの帯から**3列2段の面**に変えた（2026-09-02 sos選択「A案（改）」）。
      帯だと最初の2〜3枚しか見えず、6枠用意している意味が版面に出ていなかった */
.modal_rel_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.relcard {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  scroll-snap-align: start;
  text-align: left;
}
.relcard img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  background: var(--surface2);
}
.relcard_n {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.relcard:hover .relcard_n { color: var(--text); }

/* ---------------------------------------------------------------- 年齢確認 */

.agegate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--bg);
}
.agegate[hidden] { display: none; }
.agegate_box {
  max-width: 380px;
  text-align: center;
}
.agegate_box h2 { margin: 0 0 12px; font-size: 20px; }
.agegate_box p { margin: 0 0 22px; font-size: 14px; color: var(--muted); }
.agegate_btns { display: grid; gap: 10px; }
.agegate_yes {
  padding: 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  cursor: pointer;
}
.agegate_no { font-size: 13px; color: var(--muted); padding: 6px; }

/* ---------------------------------------------------------------- 本文ページ */

.doc { max-width: 720px; }
.doc h1 { font-size: 24px; margin: 0 0 20px; }
.doc h2 { font-size: 17px; margin: 32px 0 8px; }
.doc h3 { font-size: 15px; margin: 22px 0 6px; color: var(--muted); }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 1.3em; }
.doc li { margin-bottom: 4px; }
.doc a { color: var(--accent); text-decoration: underline; }

/* 未記入の箇所。**公開前に必ず消える**べきものなので、本文から浮かせる */
.todo {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------- 脚 */

.foot {
  border-top: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  padding: 28px 20px 48px;
  text-align: center;
}
.foot_links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.foot_links a { font-size: 13px; color: var(--muted); }
.foot_links a:hover { color: var(--accent); }
.foot_note {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.foot_copy { margin: 14px 0 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- 画面が狭いとき */

@media (max-width: 640px) {
  .main { padding: 16px 12px 48px; }
  .topbar { padding: 10px 12px; gap: 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 10px; }
  .row_scroll { grid-auto-columns: 132px; }
  .chead_av { width: 60px; height: 60px; }
  .chead h1 { font-size: 20px; }
  .phead h1 { font-size: 20px; }
}

/* ---------------------------------------------------------------- 問い合わせフォーム */

.intake { max-width: 560px; margin: 20px 0 0; }
.intake_lead { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.intake_row { display: block; margin: 0 0 16px; }
.intake_row > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}
.intake_row em {
  margin-left: 8px;
  font-style: normal;
  font-size: 11px;
  color: var(--accent);
}
.intake input,
.intake textarea {
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;          /* 16px 未満だと iOS が入力時に拡大する ── ここは下げない */
  color: var(--text);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
  border-radius: 8px;
}
.intake input:focus,
.intake textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.intake textarea { resize: vertical; line-height: 1.7; }

/* 人には見えない欄（機械よけ）。display:none にすると埋めない機械がいる */
.intake_hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.intake_ts { margin: 0 0 16px; }
.intake button {
  padding: 12px 32px;
  font: inherit;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.intake button[disabled] { opacity: 0.45; cursor: default; }

.intake_msg:empty { display: none; }
.intake_msg {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.7;
  border-left: 2px solid var(--muted);
  background: var(--surface);
}
.intake_msg.is_ok { border-left-color: var(--accent); }
.intake_msg.is_ng { border-left-color: var(--danger); color: var(--danger); }