/* =========================================================
   Chillarin Blog — town.css (ちらりんタウン トップ差替 2026-07)
   - baseof.html で .IsHome 時のみ home.css の後にロード
   - prod-scrub-engine の注入 CSS は @layer sw 内 → ここ (unlayered) が
     常に勝つ。engine 側は非改造でテーマ/上書きはすべてここに置く
   - 旧 LP (docs/experiments/chilla-town/index.html) のページ側 CSS を
     本番仕様に移植したもの + サイト統合 (header / SSR 帯 / リンちゃん帯)
   ========================================================= */

/* ---------- scroll-world テーマトークン (夜の紺 × ミント) ---------- */
:root, .sw-root {
  --sw-bg: #0B1116;          /* == 各シーンの背景色 (夜の紺) */
  --sw-ink: #F4F8FA;
  --sw-ink-soft: #9fb2ba;
  --sw-accent: #6FDBC8;      /* ミント。各セクションの accent が実行時に上書き */
  --sw-font-display: "Noto Sans JP", system-ui, sans-serif;
  --sw-font-body: "Noto Sans JP", system-ui, sans-serif;
}

/* ---------- 街ブロックの骨格 ----------
   min-height: JS なし / engine mount 前に poster ぶんの场所を確保する
   (mount 後は .sw-track の実高がこれを大きく上回る) */
.town-world { position: relative; min-height: 100vh; min-height: 100dvh; }

/* エンジンの上部バー / プログレスバー / route ドットは使わない
   (topbar・scrollbar = サイト共通 header・reading-progress と重複 /
    route = 2 シーン化 (2026-07-22) でジャンプ先が実質 1 つになり不要) */
.town-world .sw-topbar,
.town-world .sw-scrollbar,
.town-world .sw-route { display: none; }

/* 初期 HTML の plaza poster (LCP 要素 + JS なしフォールバック)。
   display:none で消すと LCP 計測ごと殺すので消さない —
   絶対配置 (文書フローに高さを足さない) のまま残し、engine mount 後は
   fixed の sky (z0・不透明) と scene がこの上に被さって自然に見えなくなる */
.town-fallback {
  position: absolute; top: 0; left: 0; right: 0;
  height: 100vh; height: 100dvh; overflow: hidden;
}
.town-fallback img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}

/* fallback 上のオリエンテーション (IA監査 N19/F26)。JS なし・mount 前の
   初期ビュー専用。engine mount 後 (#world に .sw-root が付く) は display:none で
   完全に消す — 視覚被覆だけに頼ると、engine の sky/stage が pointer-events:none の
   ため「見えないのにクリックできる」CTA が街の上に残る (Playwright 視認で検出) */
.town-world.sw-root .town-fallback-copy { display: none; }
.town-fallback-copy {
  position: absolute; left: 0; right: 0; bottom: 11vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 20px; text-align: center;
}
.town-fallback-title {
  margin: 0; color: #fff; font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 600;
  letter-spacing: 0.02em; text-shadow: 0 2px 14px rgba(4, 8, 24, 0.65);
}
.town-fallback-cta {
  display: inline-block; padding: 10px 24px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: #16213e;
  font-size: 0.92rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 18px rgba(4, 8, 24, 0.35);
}
.town-fallback-cta:hover { background: #fff; text-decoration: none; }

/* ---------- 日本語の折り返し + コピー幅 ----------
   2026-07-22 実機フィードバック: タイトルは 1 行に収める (フォントをやや絞り
   コピー幅を広げる。14 文字の「ちらりんブログへ、ようこそ。」が 1440px 幅で
   1 行に入るサイズ)。シーン番号 (01 / 02) は 2 シーン化で不要のため非表示 */
.town-world .sw-copy__title {
  text-wrap: pretty; line-break: strict;
  font-size: clamp(1.7rem, 3.1vw, 2.75rem);
}
.town-world .sw-copy { width: min(56vw, 680px); }
.town-world .sw-copy__num { display: none; }
@media (max-width: 860px) { .town-world .sw-copy { width: auto; } }

/* ---------- コピー位置の引き上げ (2026-07-23 実機フィードバック) ----------
   engine 既定は中央基準 (top:50% + translateY(-50%)) のため、CTA/送客リンクまで
   含む背の高いコピーは短い viewport でブロック下端 (「最新記事を読む」等) が
   見切れたままシーン遷移していた。デスクトップはブロックを上へ寄せる。
   モバイル (≤860px) は engine 側が bottom 基準に切り替えるので触らない */
@media (min-width: 861px) {
  .town-world .sw-copy { top: calc(50% - 6vh); }
}
/* 高さの足りない横長ウィンドウ (実機報告の環境) はさらに引き上げる */
@media (min-width: 861px) and (max-height: 800px) {
  .town-world .sw-copy { top: calc(50% - 9vh); }
}

/* ---------- 擬似スクロール感 (Ken Burns) ----------
   クリップ未ロード / saveData / reduce fallback 時の静止画に、ごくゆっくりの
   ズーム + 微パンを常時かける (has-clip で still ごと消えるので競合しない) */
.town-world .sw-scene__still {
  animation: kb-a 26s ease-in-out infinite alternate;
  transform-origin: 50% 45%;
}
.town-world .sw-scene:nth-child(3n+1) .sw-scene__still { animation-name: kb-a; transform-origin: 42% 40%; }
.town-world .sw-scene:nth-child(3n+2) .sw-scene__still { animation-name: kb-b; transform-origin: 58% 50%; }
.town-world .sw-scene:nth-child(3n)   .sw-scene__still { animation-name: kb-c; transform-origin: 50% 38%; }
@keyframes kb-a { from { transform: scale(1.04) translate3d(-1.2%, 0.6%, 0); }
                  to   { transform: scale(1.12) translate3d(1.2%, -0.8%, 0); } }
@keyframes kb-b { from { transform: scale(1.05) translate3d(1.0%, -0.4%, 0); }
                  to   { transform: scale(1.13) translate3d(-1.0%, 0.7%, 0); } }
@keyframes kb-c { from { transform: scale(1.06) translate3d(0.2%, 0.8%, 0); }
                  to   { transform: scale(1.14) translate3d(-0.4%, -0.9%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .town-world .sw-scene__still { animation: none !important; transform: scale(1.04) !important; }
}

/* ---------- 送客ボタン「○○へ →」 (旧 LP から移植・engine が初期描画) ---------- */
.sw-scenelink { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 11px 20px; border-radius: 999px; text-decoration: none; pointer-events: auto;
  font: 700 .92rem/1 "Noto Sans JP", sans-serif; color: var(--sw-accent, #6FDBC8);
  background: color-mix(in srgb, var(--sw-accent, #6FDBC8) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw-accent, #6FDBC8) 42%, transparent);
  transition: background .2s, gap .2s, transform .2s; }
.sw-scenelink:hover { background: color-mix(in srgb, var(--sw-accent, #6FDBC8) 22%, transparent); gap: 12px; }
.sw-scenelink__arrow { transition: transform .2s; }
.sw-scenelink:hover .sw-scenelink__arrow { transform: translateX(3px); }

/* summit CTA: engine 既定の --sw-ink 背景は夜テーマだと白地×白文字になる →
   ミント地×紺文字に上書き (プロトタイプ由来の潜在バグ修正) */
.town-world .sw-btn--primary {
  color: #0B1116;
  background: var(--sw-accent, #6FDBC8);
}
.town-world .sw-btn--ghost { color: var(--sw-ink, #F4F8FA); }

/* ---------- サイト共通 header を街の上のオーバーレイに ----------
   sticky (不透明帯) のままだと夜景の上に板が乗るため、home では fixed +
   上から夜紺のスクリムで溶かす。街は常に夜 = light モードでも文字色は明を強制 */
.page-home .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(11, 17, 22, .82) 0%, rgba(11, 17, 22, .38) 62%, rgba(11, 17, 22, 0) 100%);
  border-bottom: none; box-shadow: none;
}
.page-home .site-header .brand-name { color: #F4F8FA; }
.page-home .site-header .site-nav a { color: rgba(244, 248, 250, .82); }
.page-home .site-header .site-nav a:hover,
.page-home .site-header .site-nav a.is-active { color: #6FDBC8; }
.page-home .site-header .mode-toggle { color: #F4F8FA; }

/* ---------- モバイルナビドロワーの page-home 変種 (N6b) ----------
   上の規則が nav 文字色を明 (夜の街用) に強制するため、ドロワー背景も
   夜紺に固定しないと light モードで白文字×白背景になる。ハンバーガーの
   バーも街の上では明色に */
.page-home .site-header .nav-toggle__bar { background: #F4F8FA; }
.page-home .site-header .header-drawer {
  background: rgba(11, 17, 22, .97);
  border-left-color: rgba(244, 248, 250, .14);
}
.page-home .site-header .header-drawer .site-nav a { border-bottom-color: rgba(244, 248, 250, .12); }

/* ---------- リンちゃんの住処 = 導入セクション (.town-intro = .home-hero) ----------
   2026-07-22 視認レビューの人間指示で、街の最前景オーバーレイ案から
   「『記事が並ぶ、小さな夜の街』(h1) セクションの空きスペース」へ再配置。
   帯の見た目 (夜グラデ・light 変種・padding) は home.css の .home-hero を継承。
   ローム/なでなで/静止フォールバックも home.css + home.js の既定のまま。
   下端にリンちゃんが走る地面帯ぶんの余白を足しつつ、街との継ぎ目が
   間延びしないよう上下 padding は home.css 既定 (88/96) より詰める
   (2026-07-22 実機フィードバック → 2026-07-23 さらに縮小「もっと縦幅小さく」。
   リンちゃん (高さ 96〜132px・bottom 基準) は右端ロームなので本文と横位置が
   被らない範囲で地面帯を薄くする) */
.town-intro { padding-top: 32px; padding-bottom: 64px; }
/* モバイルは従来値を維持 (リンちゃん静止 sit と本文の位置関係を変えない) */
@media (max-width: 860px) { .town-intro { padding-top: 36px; padding-bottom: 100px; } }

/* 折り返す時は「ちらりんブログ / — 記事が並ぶ、小さな夜の街」の 2 行にする
   (旧: 語中で「〜小さな / 夜の街」と折れていた)。inline-block はまず行単位で
   落ち、それでも入らない幅 (狭いモバイル) でだけ内部で折り返す */
.town-intro-title-brand, .town-intro-title-sub { display: inline-block; }

/* ---------- SSR 回復ブロック (手順1) ----------
   fixed の sky (z0) / copylayer (z20) より上に実コンテンツ帯を重ねる。
   背景を持たせて街の空を完全に覆う (light テーマでも成立) */
.town-ssr {
  position: relative; z-index: 30;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* summit CTA (#latest) 等のフラグメントジャンプ先が fixed header の
   後ろに隠れないよう、header 高 + 余白ぶんの着地マージンを取る */
.town-ssr [id] { scroll-margin-top: 96px; }

/* 初期ロードを軽くする: 画面外の SSR 帯は描画 (と hub カードの CSS 背景画像
   fetch) をスクロール接近まで遅延する */
.town-ssr .home-band {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.town-intro-title {
  margin: 0 0 10px;
  font-family: var(--font-serif, serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  color: var(--text);
}
.town-intro-lead {
  margin: 0; max-width: 46em;
  color: var(--muted);
  line-height: 1.8;
}