/* =============================================================================
   PATCHWORK DEAD × TapNow LP — world（世界観と物語。ネネの視点で語る自然な紹介文）
   ========================================================================== */

/* ---- フルブリードのバナー（批評R1: 「画像が一枚も無い」への対処） ------------- */
.world-banner {
  position: relative; width: 100%; aspect-ratio: 21/9; min-height: 320px; max-height: 640px;
  border-radius: 0; overflow: hidden;
}
@media (max-width: 760px) { .world-banner { aspect-ratio: 4/5; min-height: 420px; } }
.world-banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,10,8,.05) 0%, rgba(13,10,8,.15) 45%, rgba(13,10,8,.88) 100%);
}
.world-banner-head {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-8) var(--s-5) var(--s-6);
  max-width: 1320px; margin-inline: auto;
}
.world-banner-head .label { color: var(--mustard-300); }
.world-banner-head .sheet-title { color: var(--cream-100); margin: 0; }

.world-body { padding-top: var(--s-7); }
.world-intro { margin-bottom: var(--s-7); }

/* ---- 2カラム構成（批評R4: デスクトップで右側が空くのを解消） ------------------
   地の文（左）と、独白のプルクオート（右）を並べる。狭い画面では縦積み。 */
.world-columns {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-8); align-items: start;
  margin-bottom: var(--s-8);
}
@media (max-width: 900px) { .world-columns { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---- 地の文（乾いた箇条書きではなく、読ませる情景描写） ----------------------- */
.world-prose {
  display: grid; gap: var(--s-5);
  font-size: var(--t-lead); line-height: 2; color: var(--ink);
}
.world-prose b { color: var(--mustard-300); font-weight: 700; }

.world-pullquote { position: sticky; top: calc(64px + var(--s-6)); }
@media (max-width: 900px) { .world-pullquote { position: static; } }

/* ---- 差し込みの2枚目の一枚絵（壁を予告する） --------------------------------- */
.world-accent {
  margin: 0 0 var(--s-8); border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16/8;
}
.world-accent figcaption {
  /* v16（ユーザー指示）: 敷板とテキストの箱が画像の約70%で止まり、右側に
     ハードエッジができていた不具合の修正。原因は figcaption 自身への
     max-width:44em（left:0;right:0; と併用すると over-constrained になり、
     left が優先されて右端が縮む）。figcaption 自体は常にフルブリードにし、
     読みやすい行長は内側の .world-accent-text 側だけに持たせる。 */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: linear-gradient(180deg, transparent, rgba(13,10,8,.82) 65%);
  color: var(--cream-100);
}
.world-accent-text { font-size: var(--t-lead); line-height: 1.8; max-width: 44em; }
@media (max-width: 640px) {
  .world-accent { aspect-ratio: 3/4; }
  .world-accent figcaption { padding: var(--s-5) var(--s-4) var(--s-4); }
  .world-accent-text { font-size: var(--t-body); }
}
.world-accent-kicker {
  display: block; font-size: var(--t-label); letter-spacing: .14em; color: var(--mustard-300);
  font-weight: 700; margin-bottom: var(--s-2);
}
.world-accent figcaption b { color: var(--haze-300); }

/* ---- 独白（ネネの内心の声。引用として大きく見せる） ---------------------------- */
.world-monologue {
  margin: 0 0 var(--s-4); padding: var(--s-6);
  border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--e-2);
}
.world-monologue p {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--cream-100);
  line-height: 1.7;
}
.world-monologue cite {
  display: block; margin-top: var(--s-3); font-style: normal; font-size: var(--t-caption); color: var(--ink-muted);
}
.world-lead-out { color: var(--ink-muted); font-size: var(--t-body); padding: 0 var(--s-2); }

/* ---- 最後のフック行 ------------------------------------------------------------ */
.world-hook {
  margin: var(--s-8) 0 var(--s-6); text-align: center;
  font-size: clamp(1.4rem, 4vw, 2.25rem); font-weight: 900; color: var(--ink-muted);
}
.world-hook span { color: var(--haze-300); }