/*
Theme Name: ヨイトマ
Theme URI: https://yoitoma.jp/
Author: ヨイトマ
Description: VTuberグループ「ヨイトマ」公式サイト用のオリジナルテーマです。Claude Designで作成したデザイン（黒基調・ライト基調の2テーマ）をそのまま実装しています。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: yoitoma
*/

/* ==========================================================================
   0. 色の変数（ここを変えるだけでダーク／ライト両方の配色を調整できます）
   ========================================================================== */
:root {
  --bg: #0A0812;
  --bg-rgb: 10,8,18;
  --bg-panel: #0C0A16;
  --bg-card: #100D1A;
  --bg-card-alt: #0E0B18;
  --bg-footer: #0B0913;

  --ink-rgb: 234,231,240;
  --ink-strong-rgb: 241,239,246;
  --ink-heading: #F1EFF6;
  --ink-title-rgb: 244,242,248;

  --accent: #7A6AC6;
  --accent-rgb: 122,106,198;
  --accent-soft-rgb: 163,149,226;
  --accent-badge-rgb: 174,160,231;
  --accent-active: #C3B6F0;
  --accent-on-fill: #DCD4F5;
  --link-hover: #A493E0;

  --mayo: #D2703C;
  --mayo-rgb: 210,112,60;
  --mayo-text-rgb: 232,160,112;

  --rei: #9E8BE6;
  --rei-rgb: 158,139,230;
  --rei-text-rgb: 186,172,242;

  --mikuji: #C0333C;
  --mikuji-rgb: 192,51,60;
  --mikuji-text-rgb: 228,124,131;


  /* 文字・罫線の不透明度。ライトテーマでは承認済みライト版の値（.9 / .94）まで
     引き上げる。ダークとライトで同じ不透明度を使うと、明るい背景では文字が
     薄くなりすぎるため、テーマごとに切り替えている。 */
  --ta-hi: .9;      /* 本文・タイトル */
  --ta-mid: .76;    /* 副次テキスト */
  --ta-lo: .66;     /* ラベル・補助テキスト */
  --ta-lo2: .62;    /* 小さい淡色テキスト */
  --ta-dim: .58;    /* さらに淡いテキスト */
  --ta-ghost: .34;  /* ごく淡い見出しラベル */
  --ta-faint: .28;  /* 注記・プレースホルダー */
  --la-1: .08;      /* 細い罫線 */
  --la-2: .16;      /* 枠線 */

  --font-jp: 'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-en: 'Jost', sans-serif;
}

:root[data-theme="light"] {
  --bg: #F7F5FB;
  --bg-rgb: 247,245,251;
  --bg-panel: #EAE4F4;
  --bg-card: #EAE4F4;
  --bg-card-alt: #F1EDF9;
  --bg-footer: #EFEBF7;

  --ink-rgb: 42,35,64;
  --ink-strong-rgb: 34,27,52;
  --ink-heading: #221B34;
  --ink-title-rgb: 34,27,52;

  --accent: #5A48AE;
  --accent-rgb: 90,72,174;
  --accent-soft-rgb: 90,72,174;
  --accent-badge-rgb: 78,62,150;
  --accent-active: #5A48AE;
  --accent-on-fill: #3B2E7E;
  --link-hover: #6F5DC4;

  --mayo: #AC5320;
  --mayo-rgb: 172,83,32;
  --mayo-text-rgb: 172,83,32;

  --rei: #5F4CC0;
  --rei-rgb: 95,76,192;
  --rei-text-rgb: 95,76,192;

  --mikuji: #A32029;
  --mikuji-rgb: 163,32,41;
  --mikuji-text-rgb: 163,32,41;

  --ta-hi: .94;
  --ta-mid: .9;
  --ta-lo: .9;
  --ta-lo2: .88;
  --ta-dim: .8;
  --ta-ghost: .74;
  --ta-faint: .72;
  --la-1: .11;
  --la-2: .2;
}

/* ==========================================================================
   1. リセット・基本設定
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: rgb(var(--ink-rgb));
  font-family: var(--font-jp);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--link-hover); }
img { display: block; max-width: 100%; }
.yt-wrap { max-width: 1180px; margin: 0 auto; }
.yt-wrap--narrow { max-width: 840px; margin: 0 auto; }

/* ==========================================================================
   2. ヘッダー（全ページ共通）
   ========================================================================== */
.yt-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: clamp(58px,6vw,80px);
  padding: 0 clamp(18px,4vw,52px);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(var(--bg-rgb),.92) 0%, rgba(var(--bg-rgb),.62) 60%, rgba(var(--bg-rgb),0) 100%);
  backdrop-filter: blur(6px);
}
.yt-header--static { position: absolute; background: none; backdrop-filter: none; }
.yt-header__logo img { height: clamp(30px,3.4vw,44px); width: auto; }
.yt-nav {
  display: flex; align-items: center; gap: clamp(16px,2.6vw,36px);
  font-family: var(--font-en); font-size: clamp(9.5px,1.05vw,11px); letter-spacing: .2em;
  color: rgba(var(--ink-rgb),var(--ta-lo));
}
.yt-nav a.is-current { color: var(--accent-active); }
.yt-nav__theme-toggle {
  display: flex; align-items: center; padding: 5px 11px;
  border: 1px solid rgba(var(--accent-rgb),.5); color: var(--accent-active);
  font-size: 9px; letter-spacing: .18em; background: none; cursor: pointer;
  font-family: var(--font-en);
}
.yt-breadcrumb {
  display: flex; align-items: center; gap: 12px; font-family: var(--font-en);
  font-size: 10px; letter-spacing: .24em; color: rgba(var(--ink-rgb),var(--ta-lo));
}
.yt-breadcrumb .sep { color: rgba(var(--ink-rgb),var(--ta-faint)); }
.yt-breadcrumb .current { color: rgba(var(--ink-rgb),var(--ta-mid)); }

/* ==========================================================================
   3. トップビジュアル（front-page.php）
   ========================================================================== */
.yt-hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; flex-shrink: 0; }
.yt-hero__layer { position: absolute; inset: 0; will-change: transform,opacity; }
.yt-hero__gradient {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 72% at 50% 80%, rgba(var(--accent-rgb),.22) 0%, rgba(var(--accent-rgb),0) 62%),
    radial-gradient(62% 34% at 50% 99%, rgba(var(--mayo-rgb),.14) 0%, rgba(var(--mayo-rgb),0) 72%),
    var(--hero-base-gradient);
}
:root { --hero-base-gradient: linear-gradient(180deg, #0B0913 0%, #100D1C 46%, #0A0812 100%); }
:root[data-theme="light"] { --hero-base-gradient: linear-gradient(180deg, #EFEBF7 0%, #F1EDF9 46%, #F7F5FB 100%); }
.yt-hero__bgmark { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }
.yt-hero__bgmark img {
  width: min(112vh, 92vw); max-width: 1180px; height: auto; opacity: .18; transform: translateY(12%);
  filter: saturate(.8);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
}
:root[data-theme="light"] .yt-hero__bgmark img { opacity: .32; filter: saturate(.95) brightness(.97); }
.yt-hero__veiltop {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(var(--bg-rgb),.72) 0%, rgba(var(--bg-rgb),.34) 30%, rgba(var(--bg-rgb),.22) 54%, rgba(var(--bg-rgb),.66) 86%, rgba(var(--bg-rgb),.96) 100%);
}
.yt-hero__center {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-54%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; padding: 0 20px;
}
.yt-hero__center img { width: clamp(160px,19vw,262px); height: auto; }
/* ライトテーマではロゴの明るい部分（コーラル〜ピンク）が背景に溶けるため、
   全画素がコントラスト比3:1以上になるところまで暗くして彩度を補う。 */
:root[data-theme="light"] .yt-hero__center img {
  filter: brightness(.74) saturate(1.3) drop-shadow(0 2px 14px rgba(90,72,174,.22));
}
.yt-hero__divider { margin-top: clamp(26px,3.4vw,40px); width: 1px; height: clamp(30px,4vw,46px); background: linear-gradient(180deg, rgba(var(--accent-rgb),0), rgba(var(--accent-rgb),.8), rgba(var(--accent-rgb),0)); }
.yt-hero__copy { margin-top: clamp(24px,3.2vw,36px); font-size: clamp(14px,1.75vw,22px); font-weight: 400; letter-spacing: .14em; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); text-align: center; white-space: nowrap; }
.yt-hero__veil {
  position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb),.94) 30%, rgba(var(--bg-rgb),.5) 62%, rgba(var(--bg-rgb),0) 100%);
}
.yt-hero__hint { position: absolute; bottom: clamp(20px,3vw,34px); left: 0; right: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.yt-hero__hint span { font-family: var(--font-en); font-size: 9.5px; letter-spacing: .42em; text-indent: .42em; color: rgba(var(--ink-rgb),var(--ta-lo2)); }
.yt-hero__hint i { display:block; width: 1px; height: 34px; background: linear-gradient(180deg, rgba(var(--ink-rgb),var(--ta-ghost)), rgba(var(--ink-rgb),0)); }

/* ==========================================================================
   4. セクション見出し（NEWS / TALENTS / ABOUT / LINKS 共通）
   ========================================================================== */
.yt-section { position: relative; padding: clamp(84px,11vw,168px) clamp(20px,5vw,64px) 0; }
.yt-section--about { padding-top: clamp(96px,13vw,190px); }
.yt-heading { display: flex; align-items: baseline; gap: clamp(14px,2vw,26px); }
.yt-heading__en { font-family: var(--font-en); font-size: clamp(19px,2.7vw,34px); font-weight: 300; letter-spacing: .28em; color: var(--ink-heading); margin: 0; }
.yt-heading__jp { font-size: clamp(10.5px,1.1vw,12.5px); letter-spacing: .24em; color: rgba(var(--accent-soft-rgb),.96); white-space: nowrap; flex: none; }
.yt-heading__rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--ink-rgb),var(--la-2)), rgba(var(--ink-rgb),.02)); }
.yt-viewall { display: flex; align-items: center; gap: 14px; font-family: var(--font-en); font-size: 11px; letter-spacing: .3em; color: rgba(var(--ink-rgb),var(--ta-mid)); }
.yt-viewall i { display:block; width: 44px; height: 1px; background: rgba(var(--accent-rgb),.8); }

/* ==========================================================================
   5. NEWS（トップページのグリッド／記事あたりの共通パーツ）
   ========================================================================== */
.yt-news-grid { margin-top: clamp(34px,4.4vw,58px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,246px),1fr)); gap: clamp(20px,2.6vw,34px); }
.yt-news-card { display: flex; flex-direction: column; gap: 16px; }
.yt-thumb { position: relative; aspect-ratio: 1200/630; border: 1px solid rgba(var(--ink-rgb),var(--la-1)); overflow: hidden; background: var(--bg-card); }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-thumb--fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(150deg, #16122A 0%, #0E0B18 62%, #0C0A15 100%); }
:root[data-theme="light"] .yt-thumb--fallback { background: linear-gradient(150deg, #F1EDF9 0%, #EFEBF7 62%, #F7F5FB 100%); }
.yt-thumb--fallback img { width: 26%; height: auto; opacity: .34; filter: saturate(.5); }
.yt-news-body { display: flex; flex-direction: column; gap: 11px; }
.yt-news-meta { display: flex; align-items: center; gap: 12px; }
.yt-news-date { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: rgba(var(--ink-rgb),var(--ta-lo2)); }
.yt-news-cat { font-size: 9.5px; letter-spacing: .12em; padding: 3px 9px; border: 1px solid rgba(var(--accent-rgb),.5); color: rgba(var(--accent-badge-rgb),.95); white-space: nowrap; }
.yt-news-title { font-size: clamp(13px,1.15vw,14.5px); font-weight: 400; line-height: 1.9; letter-spacing: .03em; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }

/* ニュース一覧（横並びの行） */
.yt-news-list { display: flex; flex-direction: column; }
.yt-news-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px,2.6vw,38px); padding: clamp(22px,2.6vw,32px) 0; border-top: 1px solid rgba(var(--ink-rgb),var(--la-1)); }
.yt-news-row:hover { background: rgba(var(--accent-rgb),.05); }
.yt-news-row:last-child { border-bottom: 1px solid rgba(var(--ink-rgb),var(--la-1)); }
.yt-news-row .yt-thumb { flex: none; width: clamp(150px,24vw,290px); }
.yt-news-row .yt-news-title { flex: 1; min-width: min(100%,260px); font-size: clamp(14px,1.35vw,17px); line-height: 1.85; letter-spacing: .05em; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }
.yt-news-row .yt-news-body { flex: 1; min-width: min(100%,260px); display: flex; flex-direction: column; gap: 12px; }

/* ページ送り */
.yt-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-en); flex-wrap: wrap; }
.yt-pagination a, .yt-pagination span.current, .yt-pagination span.dots {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .1em; border: 1px solid rgba(var(--ink-rgb),var(--la-2)); color: rgba(var(--ink-rgb),var(--ta-lo));
}
.yt-pagination a:hover { border-color: rgba(var(--accent-rgb),.7); }
.yt-pagination span.current { border-color: rgba(var(--accent-rgb),.85); background: rgba(var(--accent-rgb),.16); color: var(--accent-on-fill); }
.yt-pagination .yt-next { width: auto; height: auto; border: none; margin-left: 10px; display: flex; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: .3em; color: rgba(var(--ink-rgb),var(--ta-mid)); }
.yt-pagination .yt-next i { display:block; width: 34px; height: 1px; background: rgba(var(--accent-rgb),.8); }

/* 分類フィルタ */
.yt-filter-list { display: flex; flex-wrap: wrap; gap: 10px; }
.yt-filter { font-size: 11.5px; letter-spacing: .16em; padding: 9px 20px; border: 1px solid rgba(var(--ink-rgb),var(--la-2)); color: rgba(var(--ink-rgb),var(--ta-lo)); }
.yt-filter:hover { border-color: rgba(var(--accent-rgb),.7); color: var(--accent-active); }
.yt-filter.is-active { border-color: rgba(var(--accent-rgb),.85); background: rgba(var(--accent-rgb),.16); color: var(--accent-on-fill); }

/* ==========================================================================
   6. TALENTS（メンバー一覧グリッド）
   ========================================================================== */
.yt-talents-grid { margin-top: clamp(34px,4.4vw,58px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,272px),1fr)); gap: clamp(18px,2.4vw,30px); }
.yt-member-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, rgba(var(--mc-rgb),.16) 0%, rgba(var(--mc-rgb),.04) 52%, rgba(16,13,26,0) 100%), var(--bg-card);
  border: 1px solid rgba(var(--ink-rgb),var(--la-1));
}
.yt-member-card__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--mc); }
.yt-member-card__inner { padding: clamp(32px,3.4vw,42px) clamp(22px,2.4vw,30px) clamp(28px,3vw,36px); display: flex; flex-direction: column; gap: 13px; }
.yt-member-card__romaji { display: flex; align-items: center; gap: 10px; }
.yt-member-card__romaji i { display:block; width: 22px; height: 2px; background: var(--mc); }
.yt-member-card__romaji span { font-family: var(--font-en); font-size: 9.5px; letter-spacing: .28em; color: rgba(var(--ink-rgb),var(--ta-lo2)); white-space: nowrap; }
.yt-member-card__name { font-size: clamp(18px,1.7vw,21px); font-weight: 400; letter-spacing: .16em; color: rgb(var(--ink-title-rgb)); }
.yt-member-card__copy { font-size: 12.5px; font-weight: 300; line-height: 1.9; letter-spacing: .05em; color: rgba(var(--ink-rgb),var(--ta-lo2)); }
.yt-member-card__profile { margin-top: clamp(14px,1.8vw,22px); display: flex; align-items: center; gap: 12px; font-family: var(--font-en); font-size: 10px; letter-spacing: .3em; color: rgba(var(--ink-rgb),var(--ta-mid)); }
.yt-member-card__profile i { display:block; width: 30px; height: 1px; background: rgba(var(--mc-rgb),.85); }

/* ==========================================================================
   7. ABOUT / LINKS
   ========================================================================== */
.yt-about-grid { margin-top: clamp(40px,5vw,72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); gap: clamp(34px,5vw,72px); align-items: start; }
.yt-about-main { font-size: clamp(14px,1.35vw,17px); font-weight: 300; line-height: 2.5; letter-spacing: .09em; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }
.yt-about-sub { display: flex; flex-direction: column; gap: clamp(24px,3vw,34px); padding-top: 6px; }
.yt-about-sub i { display:block; width: 36px; height: 1px; background: rgba(var(--accent-rgb),.8); }
.yt-about-sub p { margin: 0; font-size: clamp(12.5px,1.1vw,13.5px); font-weight: 300; line-height: 2.4; letter-spacing: .07em; color: rgba(var(--ink-rgb),var(--ta-lo)); }

.yt-links-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(30px,3.6vw,46px); }
.yt-links-label { font-family: var(--font-en); font-size: 10px; letter-spacing: .46em; text-indent: .46em; color: rgba(var(--ink-rgb),var(--ta-lo)); }
.yt-links-icons { display: flex; align-items: center; gap: clamp(22px,3vw,40px); }
.yt-icon-circle { width: clamp(52px,6vw,64px); height: clamp(52px,6vw,64px); border: 1px solid rgba(var(--ink-rgb),var(--la-2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.yt-icon-circle:hover { border-color: rgba(var(--accent-rgb),.9); }
.yt-icon-circle svg .yt-icon-stroke { stroke: rgba(var(--ink-rgb),var(--ta-mid)); }
.yt-icon-circle svg .yt-icon-fill { fill: rgba(var(--ink-rgb),var(--ta-hi)); }

/* ==========================================================================
   8. フッター
   ========================================================================== */
.yt-footer { position: relative; border-top: 1px solid rgba(var(--ink-rgb),var(--la-1)); padding: clamp(56px,7vw,84px) clamp(20px,5vw,64px) clamp(36px,4vw,52px); background: var(--bg-footer); }
.yt-footer--simple { padding: clamp(28px,3.4vw,40px) clamp(20px,5vw,64px); }
.yt-footer-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px,5vw,64px); }
.yt-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(32px,4vw,56px); }
.yt-footer-brand { display: flex; flex-direction: column; gap: 22px; }
.yt-footer-brand img { width: clamp(62px,7vw,88px); height: auto; }
.yt-footer-social { display: flex; align-items: center; gap: 14px; }
.yt-footer-social .yt-icon-circle { width: 36px; height: 36px; }
.yt-footer-cols { display: flex; flex-wrap: wrap; gap: clamp(28px,4vw,64px); }
.yt-footer-col { display: flex; flex-direction: column; gap: 16px; min-width: 132px; }
.yt-footer-col__head { font-family: var(--font-en); font-size: 11px; letter-spacing: .34em; color: rgba(var(--ink-rgb),var(--ta-lo)); }
.yt-footer-col a { font-size: 12.5px; letter-spacing: .08em; color: rgba(var(--ink-rgb),var(--ta-mid)); }
.yt-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: clamp(24px,3vw,34px); border-top: 1px solid rgba(var(--ink-rgb),var(--la-1)); }
.yt-footer-bottom .copy { font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: rgba(var(--ink-rgb),var(--ta-lo)); }
.yt-footer-bottom .tagline { font-size: 11.5px; letter-spacing: .14em; color: rgba(var(--ink-rgb),var(--ta-lo2)); white-space: nowrap; }
.yt-footer-simple-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.yt-footer-simple-links { display: flex; flex-wrap: wrap; gap: clamp(16px,2.4vw,28px); }
.yt-footer-simple-links a { font-size: 12px; letter-spacing: .08em; color: rgba(var(--ink-rgb),var(--ta-mid)); }

/* ==========================================================================
   9. ニュース詳細（記事）
   ========================================================================== */
.yt-article { position: relative; padding: clamp(110px,13vw,180px) clamp(20px,5vw,64px) 0; }
.yt-article__glow { position: absolute; inset: 0; height: 520px; z-index: 0; background: radial-gradient(88% 60% at 50% 0%, rgba(var(--accent-rgb),.15) 0%, rgba(var(--accent-rgb),0) 70%); }
.yt-article__body { position: relative; z-index: 1; }
.yt-article-cat { font-size: 10px; letter-spacing: .12em; padding: 4px 11px; border: 1px solid rgba(var(--accent-rgb),.55); color: rgba(var(--accent-badge-rgb),.98); white-space: nowrap; }
.yt-article-date { font-family: var(--font-en); font-size: 12px; letter-spacing: .16em; color: rgba(var(--ink-rgb),var(--ta-lo)); }
.yt-article h1 { margin: clamp(18px,2.2vw,26px) 0 0; font-size: clamp(21px,2.9vw,36px); font-weight: 400; line-height: 1.75; letter-spacing: .07em; color: rgb(var(--ink-title-rgb)); }
.yt-article__thumb { margin-top: clamp(30px,3.6vw,46px); }
.yt-article__content { margin-top: clamp(38px,4.6vw,62px); font-size: clamp(14px,1.3vw,16px); font-weight: 300; line-height: 2.5; letter-spacing: .06em; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }
.yt-article__content p { margin: 0 0 1.6em; }
.yt-article__content p:last-child { margin-bottom: 0; }
.yt-article__link { margin-top: clamp(34px,4vw,52px); padding-top: clamp(22px,2.6vw,30px); border-top: 1px solid rgba(var(--ink-rgb),var(--la-1)); }
.yt-article__link a { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .07em; color: var(--accent-active); }
.yt-article__link .tag { font-family: var(--font-en); font-size: 9.5px; letter-spacing: .24em; color: rgba(var(--ink-rgb),var(--ta-dim)); flex: none; }
.yt-article__link i { display: block; width: 26px; height: 1px; background: rgba(var(--accent-rgb),.85); flex: none; }

.yt-article-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: clamp(14px,1.8vw,22px); }
.yt-article-nav a { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px,2.4vw,28px); border: 1px solid rgba(var(--ink-rgb),var(--la-1)); background: var(--bg-card-alt); }
.yt-article-nav a:hover { border-color: rgba(var(--accent-rgb),.5); }
.yt-article-nav a.next { text-align: right; }
.yt-article-nav .label { font-family: var(--font-en); font-size: 9.5px; letter-spacing: .26em; color: rgba(var(--ink-rgb),var(--ta-lo)); }
.yt-article-nav .title { font-size: 13px; line-height: 1.85; letter-spacing: .04em; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }

.yt-thumb-fallback-lead {
  position: relative; aspect-ratio: 1200/630; border: 1px solid rgba(var(--ink-rgb),var(--la-1));
  background: linear-gradient(150deg, #17132B 0%, #0F0C1A 58%, #0C0A15 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px,2vw,22px); overflow: hidden;
}
:root[data-theme="light"] .yt-thumb-fallback-lead { background: linear-gradient(150deg, #F3EFFA 0%, #EFEBF7 58%, #F7F5FB 100%); }
.yt-thumb-fallback-lead__glow { position: absolute; inset: 0; background: radial-gradient(58% 70% at 50% 46%, rgba(var(--accent-rgb),.2) 0%, rgba(var(--accent-rgb),0) 72%); }
.yt-thumb-fallback-lead img { position: relative; width: clamp(76px,11vw,138px); height: auto; opacity: .5; filter: saturate(.55); }
.yt-thumb-fallback-lead span { position: relative; font-family: var(--font-en); font-size: clamp(8.5px,.95vw,10.5px); letter-spacing: .44em; text-indent: .44em; color: rgba(var(--ink-rgb),var(--ta-ghost)); }
.yt-thumb-fallback-note { margin-top: 12px; font-family: ui-monospace,Menlo,monospace; font-size: 9.5px; letter-spacing: .1em; color: rgba(var(--ink-rgb),var(--ta-faint)); }

/* ==========================================================================
   10. 404ページ
   ========================================================================== */
.yt-404 { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(120px,14vw,180px) clamp(20px,5vw,64px) clamp(80px,10vw,120px); overflow: hidden; }
.yt-404__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 62% at 50% 46%, rgba(var(--accent-rgb),.2) 0%, rgba(var(--accent-rgb),0) 66%), var(--e404-gradient); }
:root { --e404-gradient: linear-gradient(180deg, #0C0A16 0%, #0A0812 100%); }
:root[data-theme="light"] { --e404-gradient: linear-gradient(180deg, #FFFFFF 0%, #F7F5FB 100%); }
.yt-404__mark { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }
.yt-404__mark img { width: min(52vh,46vw); height: auto; filter: saturate(.5); mask-image: radial-gradient(58% 58% at 50% 50%, #000 26%, transparent 100%); -webkit-mask-image: radial-gradient(58% 58% at 50% 50%, #000 26%, transparent 100%); opacity: .09; }
:root[data-theme="light"] .yt-404__mark img { opacity: .18; filter: saturate(.92); }
.yt-404__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(22px,2.8vw,34px); text-align: center; max-width: 600px; }
.yt-404__num { font-family: var(--font-en); font-size: clamp(56px,11vw,132px); font-weight: 300; letter-spacing: .16em; line-height: 1; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }
.yt-404__divider { width: 1px; height: clamp(28px,3.6vw,44px); background: linear-gradient(180deg, rgba(var(--accent-rgb),0), rgba(var(--accent-rgb),.85), rgba(var(--accent-rgb),0)); }
.yt-404__lead { font-size: clamp(15px,1.7vw,21px); font-weight: 300; letter-spacing: .13em; line-height: 2; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }
.yt-404__desc { font-size: clamp(12.5px,1.15vw,14px); font-weight: 300; line-height: 2.2; letter-spacing: .07em; color: rgba(var(--ink-rgb),var(--ta-lo)); }
.yt-404__actions { margin-top: clamp(10px,1.4vw,18px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.yt-btn { display: flex; align-items: center; gap: 14px; padding: 14px 26px; font-family: var(--font-en); font-size: 10.5px; letter-spacing: .28em; border: 1px solid rgba(var(--ink-rgb),var(--la-2)); color: rgba(var(--ink-rgb),var(--ta-mid)); }
.yt-btn:hover { border-color: rgba(var(--accent-rgb),.7); }
.yt-btn--primary { border-color: rgba(var(--accent-rgb),.85); background: rgba(var(--accent-rgb),.14); color: var(--accent-on-fill); }
.yt-btn--primary:hover { background: rgba(var(--accent-rgb),.24); color: var(--accent-on-fill); }

/* ==========================================================================
   11. メンバー詳細ページ
   ========================================================================== */
.yt-member-hero { position: relative; padding: clamp(96px,11vw,150px) clamp(20px,5vw,64px) 0; overflow: hidden; }
.yt-member-hero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(76% 62% at 76% 24%, rgba(var(--mc-rgb),.22) 0%, rgba(var(--mc-rgb),0) 66%), linear-gradient(180deg, var(--mh-gradient-1) 0%, var(--bg) 76%); }
:root { --mh-gradient-1: #0D0A16; }
:root[data-theme="light"] { --mh-gradient-1: #FDFCFF; }
.yt-member-hero__grid { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,330px),1fr)); gap: clamp(28px,4vw,64px); align-items: end; }
.yt-member-hero__info { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,26px); padding-bottom: clamp(12px,4vw,54px); }
.yt-member-hero__romaji { display: flex; align-items: center; gap: 12px; }
.yt-member-hero__romaji i { display:block; width: 26px; height: 2px; background: var(--mc); }
.yt-member-hero__romaji span { font-family: var(--font-en); font-size: clamp(10px,1.1vw,12px); letter-spacing: .3em; color: rgba(var(--ink-rgb),var(--ta-mid)); }
.yt-member-hero h1 { margin: 0; font-size: clamp(32px,5vw,64px); font-weight: 400; letter-spacing: .14em; line-height: 1.35; color: rgb(var(--ink-title-rgb)); }
.yt-member-hero__kana { font-size: clamp(12px,1.2vw,14px); font-weight: 300; letter-spacing: .22em; color: rgba(var(--ink-rgb),var(--ta-dim)); }
.yt-member-hero__copy { max-width: 30ch; font-size: clamp(14px,1.5vw,19px); font-weight: 300; line-height: 2; letter-spacing: .1em; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }
.yt-member-hero__color { margin-top: clamp(6px,1vw,12px); display: flex; align-items: center; gap: 12px; }
.yt-member-hero__color i { display:block; width: 13px; height: 13px; background: var(--mc); flex: none; }
.yt-member-hero__color span { font-family: var(--font-en); font-size: 10.5px; letter-spacing: .22em; color: rgba(var(--ink-rgb),var(--ta-lo2)); }
.yt-member-hero__art { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.yt-member-hero__artglow { position: absolute; bottom: 0; width: 78%; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--mc-rgb),.25) 0%, rgba(var(--mc-rgb),0) 70%); }
.yt-member-hero__art img {
  position: relative; width: 100%; max-width: 520px; height: auto; max-height: min(70vh,720px); object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 0 26px rgba(255,255,255,.14));
  mask-image: linear-gradient(180deg, #000 66%, rgba(0,0,0,.35) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 66%, rgba(0,0,0,.35) 88%, transparent 100%);
}
:root[data-theme="light"] .yt-member-hero__art img { filter: drop-shadow(0 0 22px rgba(var(--mc-rgb),.4)); }

.yt-info-grid { max-width: 1180px; margin: clamp(52px,6vw,84px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: 1px; background: rgba(var(--ink-rgb),var(--la-1)); border: 1px solid rgba(var(--ink-rgb),var(--la-1)); }
.yt-info-cell { background: var(--bg-panel); padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column; gap: 11px; }
.yt-info-cell__label { font-family: var(--font-en); font-size: 9.5px; letter-spacing: .26em; color: rgba(var(--ink-rgb),var(--ta-lo)); }
.yt-info-cell__value { font-size: 15px; letter-spacing: .1em; color: rgba(var(--ink-title-rgb),var(--ta-hi)); }
.yt-info-cell__sns { display: flex; flex-direction: column; gap: 8px; }
.yt-info-cell__sns a { font-size: 13px; letter-spacing: .06em; color: rgba(var(--ink-rgb),var(--ta-hi)); }

.yt-mprofile { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: clamp(28px,4vw,72px); align-items: start; }
.yt-mprofile__head { display: flex; align-items: baseline; gap: 16px; }
.yt-mprofile__head .en { font-family: var(--font-en); font-size: clamp(16px,2vw,26px); font-weight: 300; letter-spacing: .26em; color: var(--ink-heading); }
.yt-mprofile__head .jp { font-size: 11.5px; letter-spacing: .2em; color: rgba(var(--mc-text-rgb),.96); white-space: nowrap; }
.yt-mprofile__body { max-width: 34em; font-size: clamp(14px,1.3vw,16px); font-weight: 300; line-height: 2.6; letter-spacing: .07em; color: rgba(var(--ink-strong-rgb),var(--ta-hi)); }
.yt-mprofile__body p { margin: 0 0 1.7em; }
.yt-mprofile__body p:last-child { margin-bottom: 0; }

.yt-mvideo { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(26px,3.2vw,42px); }
.yt-mvideo__head { display: flex; align-items: baseline; gap: 16px; }
.yt-mvideo__head .en { font-family: var(--font-en); font-size: clamp(16px,2vw,26px); font-weight: 300; letter-spacing: .26em; color: var(--ink-heading); }
.yt-mvideo__head .jp { font-size: 11.5px; letter-spacing: .2em; color: rgba(var(--mc-text-rgb),.96); white-space: nowrap; }
.yt-mvideo__head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--ink-rgb),var(--la-2)), rgba(var(--ink-rgb),.02)); }
.yt-mvideo__frame { max-width: 880px; width: 100%; aspect-ratio: 16/9; border: 1px solid rgba(var(--ink-rgb),var(--la-1)); background: var(--bg-card); }
.yt-mvideo__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-mvideo__frame--placeholder { display: flex; align-items: center; justify-content: center; }
.yt-mvideo__frame--placeholder span { font-family: ui-monospace,Menlo,monospace; font-size: 10px; letter-spacing: .14em; color: rgba(var(--ink-rgb),var(--ta-faint)); }
.yt-mvideo__frame--latest { max-height: 620px; }
.yt-mvideo__note { font-size: 11px; letter-spacing: .08em; color: rgba(var(--ink-rgb),var(--ta-faint)); }

.yt-switcher { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(22px,2.6vw,32px); }
.yt-switcher__label { font-family: var(--font-en); font-size: 10px; letter-spacing: .42em; text-indent: .42em; color: rgba(var(--ink-rgb),var(--ta-ghost)); }
.yt-switcher__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: clamp(14px,1.8vw,22px); }
.yt-switcher__card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: clamp(20px,2.4vw,28px); background: var(--bg-card-alt); border: 1px solid rgba(var(--ink-rgb),var(--la-1)); }
.yt-switcher__card:hover { border-color: rgba(var(--mc-rgb),.6); }
.yt-switcher__card.is-current { background: rgba(var(--mc-rgb),.09); border-color: rgba(var(--mc-rgb),.4); }
.yt-switcher__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--mc); }
.yt-switcher__romaji { font-family: var(--font-en); font-size: 9.5px; letter-spacing: .26em; color: rgba(var(--ink-rgb),var(--ta-dim)); }
.yt-switcher__name { font-size: 16px; letter-spacing: .14em; color: rgba(var(--ink-title-rgb),var(--ta-hi)); }
.yt-switcher__card.is-current .yt-switcher__name { color: rgba(var(--ink-title-rgb),var(--ta-lo2)); }

/* メンバーごとの色。PHP側で要素に --mc-hex-dark / --mc-rgb-dark / --mc-hex-light /
   --mc-rgb-light / --mc-text-rgb-dark をインラインで指定し（class="yt-mc-scope"）、
   ここでダーク／ライトどちらの値を使うかを振り分ける。 */
.yt-mc-scope {
  --mc: var(--mc-hex-dark);
  --mc-rgb: var(--mc-rgb-dark);
  --mc-text-rgb: var(--mc-text-rgb-dark);
}
[data-theme="light"] .yt-mc-scope {
  --mc: var(--mc-hex-light);
  --mc-rgb: var(--mc-rgb-light);
  --mc-text-rgb: var(--mc-rgb-light);
}

/* ==========================================================================
   12. レスポンシブ調整
   ========================================================================== */
@media (max-width: 400px) {
  .yt-nav { gap: 12px; }
}
@media (max-width: 340px) {
  .yt-hero__copy { white-space: normal; }
}