/* ============================================================
   PIXEL PROMO — CALL HER NAME 専用スタイル
   /works/call-her-name
   ------------------------------------------------------------
   brand.css の後に読み込む（トークンは brand.css を継承）。
   work.css / work-233am.css は読み込まない。
   作品ごとに世界の色が違うため、713 や 2:33 AM の
   スタイルを継承させない設計にしている。

   設計方針:

   1. この作品の核は「廃校からの脱出」ではなく
      **名前を呼ぶ行為が救いにも呪いにもなること**。
      だから THE RULE の 2 面（GIFT / CURSE）は完全対称にする。
      ⚠️ 片方を明るく／片方を赤くする等、
         「どちらが正解か」を示す差を一切つけない。

   2. TWO FORMS は「対立」ではなく「連続」。
      2 枠の間に矢印を引き、別人格に見せない。
      人間側にだけ暖色を入れる等の善悪コードも禁止。

   3. 訪問者 4 人は顔も名前も出さない（プレイヤー自身だから）。
      番号と役割だけの、記録票のような枠にする。

   4. 校内放送のスピーカーは CSS のみで作る。
      素材が無いのを誤魔化すためではなく、
      「実体が確認できないもの」を写真にしないため。

   5. 禁止：過剰なグリッチ／血液／大音量／顔の突然表示。
      演出は fade / 微かな明滅 / 波形の緩やかな上下のみ。

   色設計:
   - 底は brand.css の #050505 を維持（サイトの一貫性）
   - この作品固有の色は「消えかけた蛍光灯の青白」と
     「セーラー服のベージュ（設定画のカラーパレット由来）」
   - 赤（--accent-bright）は「呼ぶ」CTA と警告のみ。面積比 1% 未満

   素材の制約:
   - 実機キャプチャは全て 1024×576 が上限。
     4:3 や縦長カードに使うと拡大でボケるため、
     16:9 のまま使い、粒子とビネットで「記録映像」として読ませる。

   prefers-reduced-motion では演出を全て停止する。
   ============================================================ */

.work-chn {
  /* --- 作品固有パレット --- */
  /* 設定画のカラーパレットから採る。独自に増やさない。 */
  --chn-beige: #c9bfae; /* セーラー服（ベージュ） */
  --chn-navy: #2b3346; /* セーラー服（ネイビー） */
  --chn-skin: #b9b4b0; /* 肌 */
  --chn-fluor: #8fa3ad; /* 消えかけた蛍光灯の青白 */
  --chn-fluor-dim: rgba(143, 163, 173, 0.16);

  --chn-mono: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* brand.css に btn--lg は無い（work.css の .work-page スコープ定義）。
   このページ用に改めて定義する。 */
.work-chn .btn--lg {
  min-height: 64px;
  padding-inline: clamp(28px, 4vw, 52px);
  font-size: 13px;
}
.work-chn .btn--ghost.btn--lg {
  padding-inline: 0;
  min-height: 54px;
}

/* ============================================================
   1. HERO
   ============================================================
   中央に人物は置かない。
   「無人の校舎に声だけが流れている」状態を作る。
   立ち絵は CHARACTER セクションまで出さない（初見で顔を見せない）。
   ============================================================ */
.work-chn .c-hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(140px, 20vh, 220px) clamp(88px, 13vh, 150px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.work-chn .c-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.work-chn .c-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 素材が 1024×576 しかなく、全画面では約 1.9 倍に拡大される。
     彩度を落として粒子感の中に沈めることで、拡大のボケを
     「古い記録映像」として読ませる。 */
  filter: grayscale(0.72) contrast(1.06) brightness(0.62);
  transform: scale(1.06);
}
/* 文字の可読性確保 + 下方向へ暗く落とす */
.work-chn .c-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(5, 5, 5, 0.97) 6%, rgba(5, 5, 5, 0.62) 46%, rgba(5, 5, 5, 0.42) 100%),
    radial-gradient(120% 88% at 50% 40%, transparent 30%, rgba(5, 5, 5, 0.66) 100%);
  pointer-events: none;
}
/* 走査線。ごく薄く。強くすると「グリッチ演出」になり禁止事項に触れる。 */
.work-chn .c-hero-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
.work-chn .c-hero-inner {
  position: relative;
  z-index: 2;
}
.work-chn .c-hero-title {
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
}
.work-chn .c-hero-title-en {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(38px, 8.4vw, 118px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.work-chn .c-hero-title-ja {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(15px, 2vw, 23px);
  letter-spacing: 0.24em;
  color: var(--chn-beige);
}

/* ⚠️ この2行が作品のすべて。
   1行目（救い）と2行目（呪い）に視覚的な差をつけない。
   同じサイズ・同じ色・同じ字間。 */
.work-chn .c-concept {
  margin: clamp(30px, 4vw, 52px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.42em;
  max-width: clamp(320px, 78vw, 900px);
}
.work-chn .c-concept span {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(19px, 2.9vw, 36px);
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: var(--text);
  text-wrap: balance;
}
/* 左に細い縦線を通す。2行を「ひとつの問い」として括る。 */
.work-chn .c-concept {
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 1px solid rgba(201, 191, 174, 0.42);
}
.work-chn .c-concept-en {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--sub);
  padding-left: clamp(17px, 2vw, 27px);
}
.work-chn .c-hero-lead {
  margin: clamp(26px, 3.4vw, 42px) 0 0;
  color: var(--sub);
  font-size: clamp(13.5px, 1.45vw, 16px);
  line-height: 2.1;
  max-width: 40em;
}
.work-chn .c-hero-cta {
  margin-top: clamp(32px, 4.4vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
}
.work-chn .c-code {
  margin: 0;
  font-family: var(--chn-mono);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.work-chn .c-code-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--sub);
}
.work-chn .c-hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(24px, 4vh, 44px);
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.34em;
  color: var(--sub);
  writing-mode: vertical-rl;
}
.work-chn .c-hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 46px;
  margin: 12px auto 0;
  background: linear-gradient(to bottom, var(--line-strong), transparent);
}

/* ============================================================
   2. THE RULE — 名前を呼ぶ
   ============================================================
   ⚠️ 最重要の対称性。
   GIFT 側と CURSE 側で、背景・枠線・文字色・サイズを
   完全に同一にする。差をつけた瞬間にこの作品の主題が壊れる。
   中央には「どちらでもない」細い軸だけを置く。
   ============================================================ */
.work-chn .c-faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0px, 4vw, 0px);
  position: relative;
}
.work-chn .c-face {
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3.4vw, 52px);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  /* ⚠️ 01 と 02 で背景・枠を変えない。:nth-child での差別化は禁止。 */
}
.work-chn .c-face:first-child {
  border-right: none;
}
.work-chn .c-face-no {
  margin: 0;
  font-family: var(--chn-mono);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(245, 245, 245, 0.14);
  line-height: 1;
}
.work-chn .c-face-key {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.3em;
  color: var(--chn-fluor);
}
.work-chn .c-face-ja {
  margin: clamp(8px, 1vw, 12px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(21px, 2.9vw, 34px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--text);
}
.work-chn .c-face-lines {
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
}
.work-chn .c-face-lines li {
  position: relative;
  padding-left: 20px;
  font-size: clamp(13.5px, 1.45vw, 16px);
  line-height: 1.95;
  color: var(--sub);
}
.work-chn .c-face-lines li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 10px;
  height: 1px;
  background: var(--line-strong);
}
/* 中央の軸。GIFT / CURSE のどちらにも属さない。 */
.work-chn .c-faces-axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--line-strong) 18%,
    var(--line-strong) 82%,
    transparent
  );
  pointer-events: none;
}
.work-chn .c-rule-note {
  margin: clamp(32px, 4.4vw, 56px) 0 0;
  max-width: 44em;
  font-size: clamp(13px, 1.4vw, 15.5px);
  line-height: 2.1;
  color: var(--sub);
}

/* ============================================================
   3. STORY
   ============================================================ */
.work-chn .c-beats {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.work-chn .c-beat {
  display: grid;
  grid-template-columns: clamp(64px, 9vw, 128px) 1fr;
  gap: clamp(18px, 3vw, 48px);
  padding-block: clamp(26px, 3.6vw, 46px);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.work-chn .c-beat-no {
  font-family: var(--chn-mono);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: rgba(245, 245, 245, 0.16);
}
.work-chn .c-beat-body {
  max-width: 46em;
}
.work-chn .c-beat-head {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(17px, 2.1vw, 24px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--text);
}
.work-chn .c-beat-body p {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  line-height: 2.1;
  color: var(--sub);
}
/* 物語の締め2行。ここで「逃げる／救う」の分岐を提示する。
   ⚠️ 救う側を強調しない。同じ扱いにする。 */
.work-chn .c-story-close {
  margin-top: clamp(44px, 6vw, 84px);
  max-width: 40em;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 1px solid rgba(201, 191, 174, 0.42);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.work-chn .c-story-close p {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(15px, 1.9vw, 22px);
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: var(--text);
}

/* ============================================================
   4. SAKURA — キャラクターファイル
   ============================================================
   立ち絵は透過 PNG。枠に入れず、黒背景に直接立たせる。
   「ゲーム内画像」ではなく「そこに立っている」ように見せる。
   ============================================================ */
.work-chn .c-char {
  overflow: hidden;
}
.work-chn .c-char-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.work-chn .c-standing {
  margin: 0;
  position: relative;
  align-self: end;
}
.work-chn .c-standing img {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  /* わずかに沈ませる。設定画のままだと明るすぎて黒背景から浮く。 */
  filter: brightness(0.92) contrast(1.05) saturate(0.9);
  position: relative;
  z-index: 1;
}
/* 足元。影は落とさず「立っている場所だけがぼんやり明るい」形にする。
   影を付けると実写合成のように見え、イラストの質感と衝突する。 */
.work-chn .c-standing-floor {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(86%, 460px);
  height: clamp(90px, 14vw, 170px);
  background: radial-gradient(
    60% 100% at 50% 100%,
    var(--chn-fluor-dim) 0%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}
.work-chn .c-char-text {
  padding-bottom: clamp(0px, 4vw, 56px);
}
.work-chn .c-char-name {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 82px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.work-chn .c-char-name-ja {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.26em;
  color: var(--chn-beige);
}
.work-chn .c-char-tagline {
  margin: clamp(24px, 3.2vw, 38px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.work-chn .c-char-tagline span {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(16px, 2.1vw, 25px);
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text);
}
/* 記録票。等幅で「書類」に寄せる。 */
.work-chn .c-recs {
  margin: clamp(28px, 3.6vw, 44px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.work-chn .c-rec {
  background: var(--bg-elev);
  padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 20px);
}
.work-chn .c-rec dt {
  margin: 0;
  font-family: var(--chn-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--sub);
}
.work-chn .c-rec dd {
  margin: 6px 0 0;
  font-family: var(--chn-mono);
  font-size: clamp(11.5px, 1.15vw, 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text);
  line-height: 1.5;
}
.work-chn .c-char-core {
  margin-top: clamp(28px, 3.6vw, 44px);
  max-width: 40em;
}
.work-chn .c-char-core p {
  margin: 0;
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  line-height: 2.15;
  color: var(--sub);
}
.work-chn .c-char-core p + p {
  margin-top: 1.3em;
}
/* 1段落目だけ本文色を上げる（「単なる敵ではない」が要点のため）。
   ⚠️ これは善悪の示唆ではなく読み順の設計。 */
.work-chn .c-char-core p:first-child {
  color: var(--text);
  font-weight: 500;
}

/* ============================================================
   5. TWO FORMS
   ============================================================
   ⚠️ 対立ではなく連続。
   human 側に暖色、cursed 側に赤 —— のような
   善悪コードは絶対に付けない。2枠は同一スタイル。
   間に置く矢印だけが「変化」を示す。
   ============================================================ */
.work-chn .c-form-grid {
  display: grid;
  grid-template-columns: 1fr clamp(72px, 9vw, 150px) 1fr;
  gap: 0;
  align-items: stretch;
}
/* ⚠️ DOM 順は form, form, arrow（矢印は装飾なので最後に置いている）。
      自動配置に任せると2枚目の form が中央の細い列に入り、
      幅 130px に潰れる（実測で検出）。列を明示する。
      これは配置の指定であって、2枠のスタイル差ではない。 */
.work-chn .c-form-grid > .c-form:first-of-type {
  grid-area: 1 / 1;
}
.work-chn .c-form-grid > .c-form:last-of-type {
  grid-area: 1 / 3;
}
.work-chn .c-form-grid > .c-form-arrow {
  grid-area: 1 / 2;
}
.work-chn .c-form {
  padding: clamp(26px, 3.6vw, 50px) clamp(22px, 3vw, 44px);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  /* ⚠️ .c-form--human / .c-form--cursed で見た目を変えない。
        セレクタは JS/検証用に残しているだけ。 */
}
.work-chn .c-form-label {
  margin: 0;
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.3em;
  color: var(--chn-fluor);
}
.work-chn .c-form-ja {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(19px, 2.5vw, 30px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--text);
}
/* 台詞。どちらも同じ字面・同じ色。
   「ここにいれば、ずっと一緒だよ。」を怖い色にしない。 */
.work-chn .c-form-quote {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(15px, 1.85vw, 21px);
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--chn-beige);
}
.work-chn .c-form-traits {
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 15px);
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.6vw, 30px);
}
.work-chn .c-form-traits li {
  position: relative;
  padding-left: 20px;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.95;
  color: var(--sub);
}
.work-chn .c-form-traits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 10px;
  height: 1px;
  background: var(--line-strong);
}
/* 感情の内訳。タグとして小さく並べる。 */
.work-chn .c-form-emo {
  margin: clamp(22px, 3vw, 32px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.work-chn .c-form-emo span {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  color: var(--sub);
}
/* 中央の矢印。「人間 → 呪い」は変化であって別人格ではない。 */
.work-chn .c-form-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-block: clamp(20px, 3vw, 40px);
}
.work-chn .c-form-arrow-line {
  display: block;
  width: 1px;
  flex: 1;
  min-height: 60px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--line-strong) 20%,
    var(--chn-fluor) 50%,
    var(--line-strong) 80%,
    transparent
  );
}
.work-chn .c-form-arrow-note {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--chn-fluor);
  writing-mode: vertical-rl;
  white-space: nowrap;
}
.work-chn .c-forms-note {
  margin: clamp(36px, 5vw, 64px) 0 0;
  max-width: 46em;
  font-size: clamp(13px, 1.4vw, 15.5px);
  line-height: 2.15;
  color: var(--sub);
  padding-left: clamp(14px, 1.8vw, 22px);
  border-left: 1px solid rgba(201, 191, 174, 0.42);
}
/* 設定資料（三面図）。書類として見せる。
   ⚠️ 暗く落としすぎない。読めることが目的の素材。 */
.work-chn .c-sheet {
  margin: clamp(48px, 7vw, 100px) 0 0;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: clamp(12px, 1.6vw, 20px);
}
.work-chn .c-sheet img {
  width: 100%;
  height: auto;
  filter: brightness(0.94) contrast(1.02);
}
.work-chn .c-sheet figcaption {
  margin-top: clamp(12px, 1.6vw, 18px);
  font-size: 12px;
  line-height: 1.95;
  color: var(--sub);
  max-width: 52em;
}

/* ============================================================
   6. THE VOICE — 校内放送
   ============================================================
   ⚠️ 正体を断定しない。仮説リストは全て同じ見た目にする。
   スピーカーは CSS のみ。実体が確認できないものを写真にしない。
   ============================================================ */
.work-chn .c-voice-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}
.work-chn .c-voice-p {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  font-size: clamp(13.5px, 1.45vw, 16px);
  line-height: 2.15;
  color: var(--sub);
  max-width: 42em;
}
.work-chn .c-voice-p:first-of-type {
  margin-top: clamp(28px, 3.6vw, 44px);
  color: var(--text);
  font-weight: 500;
}
.work-chn .c-voice-th-label {
  margin: clamp(34px, 4.6vw, 56px) 0 0;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--sub);
}
/* 仮説リスト。番号を振らない（順位に見えるため）。
   全項目同一スタイル。⚠️ どれかを強調しない。 */
.work-chn .c-voice-theories {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.work-chn .c-voice-theories li {
  font-size: clamp(12.5px, 1.3vw, 14px);
  line-height: 1;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
}
.work-chn .c-voice-note {
  margin: clamp(28px, 3.6vw, 44px) 0 0;
  font-size: 12.5px;
  line-height: 2.05;
  color: rgba(154, 154, 154, 0.82);
  max-width: 42em;
}

/* --- CSS のみのスピーカー --- */
.work-chn .c-speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
  padding-top: clamp(20px, 3vw, 48px);
}
.work-chn .c-speaker-body {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 28px);
  overflow: hidden;
}
/* 金属網。細い横線の反復で作る。 */
.work-chn .c-speaker-grille {
  width: 66%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(
    to bottom,
    rgba(245, 245, 245, 0.07) 0 1px,
    transparent 1px 4px
  );
  position: relative;
}
.work-chn .c-speaker-grille::after {
  content: '';
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 42% 38%, rgba(143, 163, 173, 0.14), transparent 70%);
}
/* 波形。5本の縦棒がゆっくり上下する。
   ⚠️ 速い明滅・大きな動きは禁止（グリッチ演出になる）。 */
.work-chn .c-speaker-wave {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 34px;
}
.work-chn .c-speaker-wave span {
  display: block;
  width: 2px;
  height: 30%;
  background: var(--chn-fluor);
  opacity: 0.72;
  animation: chn-wave 2.4s var(--ease) infinite;
}
.work-chn .c-speaker-wave span:nth-child(1) {
  animation-delay: 0s;
}
.work-chn .c-speaker-wave span:nth-child(2) {
  animation-delay: 0.28s;
}
.work-chn .c-speaker-wave span:nth-child(3) {
  animation-delay: 0.56s;
}
.work-chn .c-speaker-wave span:nth-child(4) {
  animation-delay: 0.84s;
}
.work-chn .c-speaker-wave span:nth-child(5) {
  animation-delay: 1.12s;
}
@keyframes chn-wave {
  0%,
  100% {
    height: 22%;
    opacity: 0.5;
  }
  50% {
    height: 100%;
    opacity: 0.9;
  }
}
.work-chn .c-speaker-cap {
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--sub);
}

/* ============================================================
   7. THE SCHOOL
   ============================================================ */
/* 異変リスト。8件を等価に並べる。 */
.work-chn .c-anoms {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* ⚠️ auto-fit は使わない。異常は8件あり、5カラムになると
        右下に空セルが2つ生まれ「まだ何かある」ように見える。
        8 を割り切る 4 / 2 / 1 カラムで段階的に落とす。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.work-chn .c-anom {
  background: var(--bg-elev);
  padding: clamp(16px, 2.2vw, 24px) clamp(16px, 2.2vw, 24px);
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.8;
  color: var(--text);
  position: relative;
  padding-left: clamp(32px, 3.6vw, 44px);
}
.work-chn .c-anom::before {
  content: '';
  position: absolute;
  left: clamp(16px, 2.2vw, 24px);
  top: 1.5em;
  width: 8px;
  height: 1px;
  background: var(--chn-fluor);
}

/* ロケーション3枚。16:9 のまま使う（拡大を避ける）。 */
.work-chn .c-locs {
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.work-chn .c-loc {
  margin: 0;
}
.work-chn .c-loc-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.work-chn .c-loc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ⚠️ 3枚すべて同じ値。個別調整は「この部屋だけ違う」という
        示唆になるため禁止（713 / 2:33 AM と同じ原則）。 */
  filter: grayscale(0.62) contrast(1.06) brightness(0.86);
  transition: filter 0.7s var(--ease), transform 0.9s var(--ease);
}
.work-chn .c-loc:hover .c-loc-img img {
  filter: grayscale(0.4) contrast(1.04) brightness(0.96);
  transform: scale(1.03);
}
/* 周辺減光。1024×576 の粗さを沈める。 */
.work-chn .c-loc-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, transparent 34%, rgba(5, 5, 5, 0.6) 100%);
  pointer-events: none;
}
.work-chn .c-loc figcaption {
  padding-top: clamp(14px, 1.8vw, 20px);
}
.work-chn .c-loc-no {
  margin: 0;
  font-family: var(--chn-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--sub);
}
.work-chn .c-loc-name {
  margin: clamp(8px, 1vw, 12px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 21px);
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--text);
}
.work-chn .c-loc-note {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  font-size: 13px;
  line-height: 2;
  color: var(--sub);
}

/* 実機プレイ画面。HUD（島コード・目的表示）が証拠なので
   ⚠️ フィルタで暗くしない。素材のまま見せる。 */
.work-chn .c-gameplay {
  margin: clamp(48px, 7vw, 100px) 0 0;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: clamp(12px, 1.6vw, 20px);
}
.work-chn .c-gameplay img {
  width: 100%;
  height: auto;
}
.work-chn .c-gameplay figcaption {
  margin-top: clamp(12px, 1.6vw, 18px);
  font-size: 12px;
  line-height: 1.95;
  color: var(--sub);
  max-width: 52em;
}

/* ============================================================
   8. THE VISITORS
   ============================================================
   ⚠️ 顔も名前も置かない。番号と役割だけ。
   写真枠を用意しないのは素材不足ではなく設計判断。
   空枠を置くと「素材が無い」に見えるため、そもそも作らない。
   ============================================================ */
.work-chn .c-visitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.work-chn .c-visitor {
  background: var(--bg-elev);
  padding: clamp(24px, 3.2vw, 40px) clamp(20px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
}
.work-chn .c-visitor-no {
  margin: 0;
  font-family: var(--chn-mono);
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: rgba(245, 245, 245, 0.14);
}
.work-chn .c-visitor-role-en {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--chn-fluor);
  line-height: 1.7;
}
.work-chn .c-visitor-role {
  margin: clamp(8px, 1vw, 12px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--text);
}
.work-chn .c-visitor-body {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-size: 13px;
  line-height: 2.05;
  color: var(--sub);
}
/* 「名前は記録に無い」を明示する。空欄に見せない。 */
.work-chn .c-visitors-note {
  margin: clamp(24px, 3.2vw, 36px) 0 0;
  font-family: var(--chn-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--sub);
}

/* ============================================================
   9. THREE ENDINGS
   ============================================================
   ⚠️ END 02（救済）を中央寄せ・大サイズ・別色にしない。
   3つを完全に等価な 3 カラムで並べる。
   ============================================================ */
.work-chn .c-end-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.work-chn .c-end {
  background: var(--bg-elev);
  padding: clamp(26px, 3.4vw, 44px) clamp(22px, 2.8vw, 36px);
  display: flex;
  flex-direction: column;
  /* ⚠️ :nth-child() による差別化は禁止。 */
}
.work-chn .c-end-no {
  margin: 0;
  font-family: var(--chn-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--sub);
}
.work-chn .c-end-key {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}
.work-chn .c-end-title {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(15px, 1.75vw, 19px);
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--chn-beige);
}
.work-chn .c-end-body {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: 13px;
  line-height: 2.05;
  color: var(--sub);
  flex: 1;
}
.work-chn .c-end-choice {
  margin: clamp(22px, 2.8vw, 32px) 0 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.work-chn .c-end-choice-label {
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--sub);
}
.work-chn .c-end-choice span:last-child {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}
.work-chn .c-endings-note {
  margin: clamp(32px, 4.4vw, 56px) 0 0;
  max-width: 44em;
  font-size: clamp(13px, 1.4vw, 15.5px);
  line-height: 2.15;
  color: var(--sub);
  padding-left: clamp(14px, 1.8vw, 22px);
  border-left: 1px solid rgba(201, 191, 174, 0.42);
}

/* ============================================================
   10. SPEC + CTA
   ============================================================ */
.work-chn .c-cta {
  border-top: 1px solid var(--line);
}
.work-chn .c-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}
.work-chn .c-specs {
  margin: 0;
  border-top: 1px solid var(--line);
}
.work-chn .c-spec-row {
  display: grid;
  grid-template-columns: clamp(88px, 11vw, 128px) 1fr;
  gap: clamp(12px, 2vw, 24px);
  padding-block: clamp(12px, 1.6vw, 17px);
  border-bottom: 1px solid var(--line);
}
.work-chn .c-spec-row dt {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sub);
  line-height: 1.9;
}
.work-chn .c-spec-row dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text);
}
.work-chn .c-spec-row dd.en {
  font-family: var(--chn-mono);
  letter-spacing: 0.14em;
  font-weight: 600;
}
.work-chn .c-cta-title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(24px, 4.2vw, 52px);
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--text);
  text-wrap: balance;
}
.work-chn .c-cta-title-en {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--sub);
}
.work-chn .c-cta-lead {
  margin: clamp(22px, 2.8vw, 32px) 0 0;
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  line-height: 2.1;
  color: var(--sub);
  max-width: 38em;
}
.work-chn .c-cta-btns {
  margin-top: clamp(30px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .work-chn .c-char-inner,
  .work-chn .c-voice-inner,
  .work-chn .c-cta-inner {
    grid-template-columns: 1fr;
  }
  .work-chn .c-char-text {
    padding-bottom: 0;
  }
  .work-chn .c-standing img {
    max-width: 400px;
  }
  .work-chn .c-speaker {
    padding-top: 0;
  }
  .work-chn .c-speaker-body {
    max-width: 260px;
  }
  /* エンディング3件は 3 カラムを維持できないため 1 カラムへ。
     ⚠️ 2 カラムにすると END 03 だけ独立して目立つため避ける。 */
  .work-chn .c-end-grid {
    grid-template-columns: 1fr;
  }
  /* 異常8件は 4 → 2 へ（どちらも 8 を割り切るので空セルが出ない）。 */
  .work-chn .c-anoms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  /* THE RULE / TWO FORMS は縦積み。
     ⚠️ 縦にしても順序で優劣を作らないよう、間の軸／矢印を
        横線に置き換えて「並列」であることを保つ。 */
  .work-chn .c-faces {
    grid-template-columns: 1fr;
  }
  .work-chn .c-face:first-child {
    border-right: 1px solid var(--line);
    border-bottom: none;
  }
  .work-chn .c-face + .c-face {
    border-top: none;
  }
  .work-chn .c-faces-axis {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
    transform: translateY(-0.5px);
    background: linear-gradient(
      to right,
      transparent,
      var(--line-strong) 18%,
      var(--line-strong) 82%,
      transparent
    );
  }

  .work-chn .c-form-grid {
    grid-template-columns: 1fr;
  }
  /* 縦積みでは form → 矢印 → form の順に並べ替える。
     ⚠️ 矢印が末尾に落ちると「呪い側のあとに何かある」ように見えるため。 */
  .work-chn .c-form-grid > .c-form:first-of-type {
    grid-area: 1 / 1;
  }
  .work-chn .c-form-grid > .c-form-arrow {
    grid-area: 2 / 1;
  }
  .work-chn .c-form-grid > .c-form:last-of-type {
    grid-area: 3 / 1;
  }
  .work-chn .c-form-arrow {
    flex-direction: row;
    padding-block: clamp(16px, 4vw, 26px);
    padding-inline: clamp(20px, 5vw, 40px);
  }
  .work-chn .c-form-arrow-line {
    width: auto;
    height: 1px;
    min-height: 0;
    min-width: 60px;
    background: linear-gradient(
      to right,
      transparent,
      var(--line-strong) 20%,
      var(--chn-fluor) 50%,
      var(--line-strong) 80%,
      transparent
    );
  }
  .work-chn .c-form-arrow-note {
    writing-mode: horizontal-tb;
  }
}

@media (max-width: 640px) {
  .work-chn .c-hero {
    min-height: min(100svh, 760px);
  }
  .work-chn .c-hero-scroll {
    display: none;
  }
  .work-chn .c-hero-cta,
  .work-chn .c-cta-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .work-chn .c-hero-cta .btn,
  .work-chn .c-cta-btns .btn {
    width: 100%;
  }
  .work-chn .c-cta-btns .btn--ghost {
    justify-content: center;
  }
  .work-chn .c-beat {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .work-chn .c-recs,
  .work-chn .c-anoms,
  .work-chn .c-visitor-grid {
    grid-template-columns: 1fr;
  }
  .work-chn .c-standing img {
    max-width: 300px;
  }
  /* 設定資料は横長なので、スマホでは横スクロールを許可する。
     縮小して読めなくするより、拡大して読ませる。 */
  .work-chn .c-sheet {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .work-chn .c-sheet img {
    min-width: 640px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================
   ⚠️ 演出を全て停止する。恐怖表現に動きは必須ではない。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .work-chn .c-speaker-wave span {
    animation: none;
    height: 52%;
    opacity: 0.72;
  }
  .work-chn .c-hero-bg img {
    transform: none;
  }
  .work-chn .c-loc-img img,
  .work-chn .c-loc:hover .c-loc-img img {
    transition: none;
    transform: none;
  }
}