/* ============================================================
   manga.css — Takumi Senpai · Manga / IP section
   Path: /css/manga.css

   【方針】
   style.css のトークン（--accent / --bg-deep / --rule / --text）と
   既存の書体4種だけを借りる。新しい accent 色・新しい書体・
   角丸・影・グラデーションは追加しない。
   クラスは mg- 接頭辞でこのセクションに閉じる。

   /places/ のハブページ（css/places.css）と同じ階層の語彙
   （eyebrow / title / lede / card / back）を意図的に踏襲している。
   Manga を「別サイト」ではなく「アーカイブの隣の棚」に見せるため。

   【漫画本体についての重要な制約】
   各Episodeの画像は1枚の長いキャンバスを切り出したもので、
   ページ2はパネルの途中から始まる。したがって縦に隙間ゼロで
   連結しないと作品として破綻する。.mg-strip の実装は
   「隙間を作らないこと」が最優先で、装飾のための余白・枠線・
   角丸をここに足してはいけない。
   ============================================================ */

:root {
  --mg-secondary: rgba(240,236,228,0.7); /* 本文。/work/ /places/ と同値 */
  --mg-meta:      #918e84;               /* metadata。/work/ /places/ と同値 */
  --mg-line:      #292820;               /* 構造線。金は意味のある場所だけに残す */
  --mg-paper:     #fafafa;               /* 漫画ページの紙色（実測値） */
  --mg-ja-sans:   'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic',
                  'YuGothic', 'Noto Sans JP', 'Meiryo', sans-serif;
}

html, body { background: var(--bg-deep); }

/* ════════════════════════════════════════════
   BILINGUAL — /work/ と同じ方式
   同一DOMに両言語を置き、<html data-ts-lang> で切り替える。
   Google翻訳では画像（en/ ja/ の漫画本体）を差し替えられないため、
   このセクションでは機械翻訳ではなく正式な2言語版を持つ。
   ════════════════════════════════════════════ */
/* 「隠すほうだけ」を指定する。表示されるほうには display を
   一切書かないので、各要素は自分本来の display（img なら block、
   span なら inline）を保つ。
   ※ /work/ では表示側に display:revert を当てているが、あちらは
     素の span / div にしか付いていないので問題が出ない。ここは
     <img> にも付くため、revert だと UA 既定の inline に戻されて
     .mg-hero-logo の display:block が負ける。 */
html:not([data-ts-lang="ja"]) .mg-ja { display: none; }
html[data-ts-lang="ja"] .mg-en { display: none; }

.mg-ja {
  font-family: var(--mg-ja-sans);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.01em;
}
/* 英語用に組んだ字間（0.16〜0.3em / 全部大文字）を和文にそのまま
   当てると読めなくなる。日本語表示中だけ戻す。 */
html[data-ts-lang="ja"] :is(.mg-eyebrow, .mg-crumbs, .mg-rail-label, .mg-card-cue,
                            .mg-rec-label, .mg-kicker, .mg-foot-label) {
  letter-spacing: 0.1em;
  text-transform: none;
  font-size: 0.72rem;
}
html[data-ts-lang="ja"] :is(.mg-title, .mg-ep-title, .mg-card-title) {
  font-family: var(--mg-ja-sans);
  letter-spacing: 0.02em;
}
html[data-ts-lang="ja"] :is(.mg-lede, .mg-card-meta, .mg-note, .mg-rec-value) {
  line-height: 1.95;
  letter-spacing: 0.015em;
}

/* ════════════════════════════════════════════
   SHELL
   ════════════════════════════════════════════ */
.mg-wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 96px 24px 110px;
}

.mg-crumbs {
  font-family: 'Space Mono', monospace;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mg-meta);
  margin-bottom: 28px;
}
.mg-crumbs a { color: var(--accent); text-decoration: none; }
.mg-crumbs a:hover { text-decoration: underline; }
.mg-crumbs span[aria-hidden] { opacity: .4; margin: 0 .5em; }

.mg-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .85;
  margin-bottom: 14px;
}
.mg-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.14;
  color: var(--text);
  margin-bottom: 10px;
}
.mg-lede {
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--mg-secondary);
  max-width: 62ch;
}

/* ════════════════════════════════════════════
   LANGUAGE SWITCH — /work/ と同じ segmented control
   ════════════════════════════════════════════ */
.mg-langbar {
  display: inline-flex;
  border: 1px solid rgba(201,168,76,0.3);
  background: rgba(8,8,6,0.6);
}
.mg-lang-btn {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(201,168,76,0.18);
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.5);
  padding: 9px 15px;
  transition: color .18s, background .18s;
  white-space: nowrap;
}
.mg-lang-btn:first-child { border-left: none; }
.mg-lang-btn[lang="ja"] {
  font-family: var(--mg-ja-sans);
  letter-spacing: .08em;
  text-transform: none;
}
.mg-lang-btn:hover { color: rgba(240,236,228,0.9); }
.mg-lang-btn[aria-pressed="true"] { color: var(--bg-deep); background: var(--accent); }
.mg-lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════════════════════════════════
   LANDING — HERO
   ロゴ画像そのものにタイトルとサブコピーが入っているので、
   同じ文言をテキストで重ねない。巨大文字も使わない。
   rim版は純黒背景なので、--bg-deep の上でほぼ継ぎ目が出ない。
   ════════════════════════════════════════════ */
.mg-hero {
  text-align: center;
  padding: 8px 0 4px;
}
/* ── ロゴ ─────────────────────────────────────────────────────
   【なぜ <img> ではなく背景画像なのか】
   EN版とJP版の2枚をDOMに置いて display で切り替えると、<img> では
   表示されない側も取得されてしまう（ロゴ1枚 約230KB の無駄）。
   loading="lazy" を付けると今度は表示される側まで読まれないことが
   実測で確認できた。背景画像なら display:none の要素のぶんは
   どのブラウザも取得しないため、「出る側だけを読む」が確実に成立する。
   URL は js/manga-data.js が唯一の出所なので、ここには書かず
   ビルダーが <head> に生成する（データの二重管理を作らない）。

   【mix-blend-mode: lighten の理由】
   rim版は純黒背景のJPEGだが、圧縮で黒がわずかに浮く（実測 ≈ #0a0a0a）。
   そのまま --bg-deep #080806 の上に置くと長方形の縁が見える。
   lighten は画素ごとに max(背景, 画像) を取るので、暗部はほぼ背景色の
   まま、クリームの縁取り・金の王冠・赤い取り消し線だけが残る
   ＝ 箱が消えて文字だけがページに乗る。
   未対応ブラウザでは元のJPEG（黒い箱つき）が出るだけで壊れない。 */
.mg-logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: lighten;
}
.mg-hero-logo {
  display: block;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}
.mg-kicker {
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mg-meta);
  margin-top: 10px;
}
.mg-hero-rule {
  width: 100%;
  height: 1px;
  margin: 34px 0 0;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.28) 30%, rgba(201,168,76,.28) 70%, transparent);
}

/* ════════════════════════════════════════════
   EPISODE INDEX — /places/ の .pl-card と同じ語彙
   ════════════════════════════════════════════ */
.mg-quest { margin-top: 44px; }
.mg-quest-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mg-line);
  margin-bottom: 18px;
}
.mg-quest-num {
  font-family: 'Space Mono', monospace;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .8;
}
.mg-quest-name {
  font-family: 'Montserrat', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
}
html[data-ts-lang="ja"] .mg-quest-name { font-family: var(--mg-ja-sans); }
.mg-quest-lede {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  color: var(--mg-meta);
  flex-basis: 100%;
  line-height: 1.7;
}

/* auto-fit ではなく auto-fill。auto-fit は余ったトラックを潰すため、
   Episodeが1本しかない時にカードが段の全幅まで伸びて巨大になる。
   auto-fill ならトラックが残るので、Episodeが1本でも10本でも
   カードの大きさが変わらない（増えていくセクションなので重要）。 */
.mg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.mg-card {
  display: block;
  border: 1px solid var(--mg-line);
  background: rgba(255,255,255,.012);
  text-decoration: none;
  transition: border-color .2s, background .2s;
  overflow: hidden;
}
.mg-card:hover { border-color: rgba(201,168,76,.38); background: rgba(201,168,76,.05); }
.mg-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-card-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--mg-line);
}
.mg-card-body { padding: 16px 18px 18px; }
.mg-card-num {
  font-family: 'Space Mono', monospace;
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .75;
  margin-bottom: 7px;
}
.mg-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 8px;
}
.mg-card:hover .mg-card-title { color: var(--accent); }
.mg-card-meta {
  font-family: 'Space Mono', monospace;
  font-size: .66rem;
  line-height: 1.8;
  color: var(--mg-meta);
}
.mg-card-cue {
  display: block;
  margin-top: 11px;
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(201,168,76,.8);
}

/* ════════════════════════════════════════════
   EPISODE PAGE — 左レール / 右読み面
   ════════════════════════════════════════════ */
.mg-reader {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 96px 24px 110px;
}

/* position:sticky はスタッキングコンテキストを作る。そのままだと
   中の .mg-rail-mark の mix-blend-mode が「透明な背景」と合成され、
   ロゴの黒い箱が消えない。実際の背景色を敷いて合成相手を与える。 */
.mg-rail { position: sticky; top: 76px; background: var(--bg-deep); }
.mg-rail-mark {
  display: block;
  width: 100%;
  max-width: 150px;   /* レールでは「ロゴの再掲」ではなく小さな標識 */
  margin-bottom: 20px;
}
.mg-rail-label {
  font-family: 'Space Mono', monospace;
  font-size: .54rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mg-meta);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--mg-line);
  margin-bottom: 4px;
}
.mg-rail-list { list-style: none; margin: 0; padding: 0; }
.mg-rail-item { border-bottom: 1px solid var(--mg-line); }
.mg-rail-link {
  display: block;
  padding: 11px 10px 11px 13px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .18s, border-color .18s;
}
.mg-rail-link:hover { background: rgba(201,168,76,.05); border-left-color: rgba(201,168,76,.4); }
.mg-rail-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mg-rail-num {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .7;
  margin-bottom: 4px;
}
.mg-rail-name {
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--mg-secondary);
}
html[data-ts-lang="ja"] .mg-rail-name { font-family: var(--mg-ja-sans); line-height: 1.75; }

/* 選択中。色だけに頼らず、左罫線・背景・現在地テキストの3つで示す。 */
.mg-rail-link[aria-current="page"] {
  background: rgba(201,168,76,.07);
  border-left-color: var(--accent);
}
.mg-rail-link[aria-current="page"] .mg-rail-num { opacity: 1; }
.mg-rail-link[aria-current="page"] .mg-rail-name { color: var(--text); }
.mg-rail-here {
  display: block;
  margin-top: 5px;
  font-family: 'Space Mono', monospace;
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(201,168,76,.85);
}
.mg-rail-link:not([aria-current="page"]) .mg-rail-here { display: none; }

/* ── Episode opening（Field record） ─────────────────────── */
.mg-rec {
  border: 1px solid var(--mg-line);
  background: rgba(255,255,255,.012);
  padding: 20px 22px;
  margin-bottom: 26px;
}
.mg-rec-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 16px;
  padding: 7px 0;
}
.mg-rec-label {
  font-family: 'Space Mono', monospace;
  font-size: .54rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201,168,76,.7);
  padding-top: 3px;
}
.mg-rec-value {
  font-family: 'Inter', sans-serif;
  font-size: .86rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
}
.mg-ep-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.22rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}

.mg-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--mg-line);
  margin-bottom: 26px;
}

/* ── 漫画本体 ─────────────────────────────────────────────
   1枚の長いキャンバスの切り出し。隙間を作らないことが最優先。
   flex column で inline の空白を消し、紙色を下に敷いて
   サブピクセルの継ぎ目が暗線として見えないようにする。
   ここに margin / border / radius / shadow を足してはいけない。 */
.mg-strip {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;   /* 原寸は約720px。これ以上拡大するとぼやける */
  margin: 0 auto;
  background: var(--mg-paper);
  font-size: 0;
  line-height: 0;
}
.mg-strip img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}

/* ── 前後送り ─────────────────────────────────────────── */
.mg-ends {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  max-width: 760px;
  margin: 30px auto 0;
}
.mg-end {
  flex: 1 1 220px;
  border: 1px solid var(--mg-line);
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.mg-end:hover { border-color: rgba(201,168,76,.38); background: rgba(201,168,76,.05); }
.mg-end:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-end--next { text-align: right; }
.mg-foot-label {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: .54rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201,168,76,.7);
  margin-bottom: 6px;
}
.mg-end-name {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--mg-secondary);
}
.mg-end:hover .mg-end-name { color: var(--text); }
html[data-ts-lang="ja"] .mg-end-name { font-family: var(--mg-ja-sans); }

/* grid item の既定は min-width:auto で、中身の最小幅まで列が広がる。
   トレイルの中身（max-content 幅のトラック）はそれより広いので、
   これが無いと .mg-trail-scroll が縮まず、列ごとページを横に広げる
   （390px で実測 +296px のはみ出し）。0 にして初めて
   「スクロールするのはトレイルの中だけ」が成立する。 */
.mg-episode { min-width: 0; }

/* ── Episode トレイル ─────────────────────────────────────
   この Book の Episode を「道のり」として横に並べる。
   点・線・末尾の破線はトップページの Field Map と同じ語彙:
     実線でつながった点 = 記録済み / 大きい金のリング = 現在地 /
     末尾で消える破線   = この先にまだ続きがある。
   新しい色も書体も足していない（既存トークンのみ）。 */
.mg-trail {
  max-width: 760px;
  margin: 46px auto 0;
}
.mg-trail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mg-line);
}
.mg-trail-label {
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(201,168,76,.65);
}
.mg-trail-count {
  font-family: 'Space Mono', monospace;
  font-size: .56rem;
  letter-spacing: .1em;
  color: var(--mg-meta);
  white-space: nowrap;
}

/* 横スクロールはこのコンテナの中だけで起こす。
   ページ本体を横に広げない（.mg-reader の外へ出さない）。 */
.mg-trail-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,.35) var(--mg-line);
}
.mg-trail-scroll::-webkit-scrollbar { height: 5px; }
.mg-trail-scroll::-webkit-scrollbar-track { background: var(--mg-line); }
.mg-trail-scroll::-webkit-scrollbar-thumb { background: rgba(201,168,76,.35); }

.mg-trail-track {
  --trail-gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--trail-gap);
  width: max-content;
  min-width: 100%;
}

.mg-trail-stop {
  position: relative;
  flex: 0 0 186px;
  padding-top: 26px;     /* 道のりの線を引く帯 */
  scroll-snap-align: start;
}
/* 停車点 */
.mg-trail-stop::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(201,168,76,.45);
  box-shadow: 0 0 0 3px rgba(201,168,76,.10);
  z-index: 2;
}
/* 次の停車点まで伸びる線。点の中心から次の点の中心までを結ぶ。 */
.mg-trail-stop::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 18px;
  width: calc(100% + var(--trail-gap));
  height: 1px;
  background: rgba(201,168,76,.22);
  z-index: 1;
}
/* 最後だけ、どこにも着かない破線にして端で消す
   = 「この Book はまだ続く」をレイアウトで言う部分 */
.mg-trail-stop:last-child::after {
  width: 64px;
  height: 0;
  background: none;
  border-top: 1px dashed rgba(201,168,76,.35);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 18%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 18%, transparent 100%);
}
/* 現在地 — Field Map の home ノードと同じ扱い */
.mg-trail-stop--here::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(201,168,76,.18),
              0 0 0 8px rgba(201,168,76,.07);
}

.mg-trail-link {
  display: block;
  border: 1px solid var(--mg-line);
  background: rgba(255,255,255,.012);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.mg-trail-link:hover {
  border-color: rgba(201,168,76,.38);
  background: rgba(201,168,76,.05);
}
.mg-trail-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-trail-stop--here .mg-trail-link {
  border-color: rgba(201,168,76,.45);
  background: rgba(201,168,76,.05);
}

/* Episodeページ冒頭のアイキャッチと同じ画像をそのまま使う */
.mg-trail-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1733 / 907;
  object-fit: cover;
  border-bottom: 1px solid var(--mg-line);
}
/* episode-cover が無い Episode のための控え。
   破線 = まだ無いもの、という既存の約束に合わせる。 */
.mg-trail-thumb--none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  letter-spacing: .2em;
  color: rgba(201,168,76,.3);
  border-bottom: 1px dashed var(--mg-line);
}

.mg-trail-body { display: block; padding: 11px 12px 13px; }
.mg-trail-num {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .75;
  margin-bottom: 5px;
}
.mg-trail-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
html[data-ts-lang="ja"] .mg-trail-name { font-family: var(--mg-ja-sans); }
.mg-trail-link:hover .mg-trail-name { color: var(--accent); }
.mg-trail-here {
  display: block;
  margin-top: 8px;
  font-family: 'Space Mono', monospace;
  font-size: .5rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.mg-trail-stop:not(.mg-trail-stop--here) .mg-trail-here { display: none; }

/* ════════════════════════════════════════════
   共通の末尾
   ════════════════════════════════════════════ */
.mg-note {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  line-height: 1.8;
  color: var(--mg-meta);
  max-width: 62ch;
}
.mg-back {
  display: inline-block;
  margin-top: 34px;
  font-family: 'Space Mono', monospace;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,.3);
  padding-bottom: 3px;
}
.mg-back:hover { border-bottom-color: var(--accent); }

.mg-sec-label {
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(201,168,76,.65);
  margin: 54px 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--mg-line);
}

/* Character model sheet — 装飾ではなく「制作資料」として1点だけ置く */
.mg-doc { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.mg-doc-img { display: block; width: 100%; height: auto; border: 1px solid var(--mg-line); }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* レールは読み面の上に回す。sticky のままだと縦長の漫画を
     読んでいる間ずっと画面を占有してしまうので解除する。 */
  .mg-reader {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 84px 20px 90px;
  }
  .mg-rail { position: static; }
  .mg-rail-mark { max-width: 160px; margin: 0 auto 16px; }
  .mg-doc { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {
  .mg-wrap { padding: 84px 20px 90px; }
  .mg-hero-logo { max-width: 100%; }
  .mg-langbar { display: flex; width: 100%; }
  .mg-lang-btn { flex: 1 1 0; padding: 12px 10px; font-size: .64rem; }
  .mg-rec-row { grid-template-columns: 1fr; gap: 4px; }
  .mg-rec { padding: 16px 16px; }
  .mg-ends { flex-direction: column; }
  .mg-end--next { text-align: left; }
}

@media (max-width: 480px) {
  /* カードを少し詰めて、1画面に次の停車点が覗くようにする
     （横に続きがあることを、スクロールする前に見せる） */
  .mg-trail-track { --trail-gap: 18px; }
  .mg-trail-stop  { flex-basis: 150px; }
  .mg-trail-head  { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* 漫画だけは画面の端まで広げる。小さい画面ほど1コマの情報量が
     効いてくるので、左右の余白より読みやすさを優先する。
     読み面の padding を打ち消す負のマージンで外に出す
     （他の要素は余白を保ったまま）。 */
  .mg-reader { padding-left: 16px; padding-right: 16px; }
  .mg-strip {
    max-width: none;
    /* width:100% のままだと「親の内側幅」に固定され、負のマージンが
       左にずらすだけで右端が届かない。auto にして実際に広げる。 */
    width: auto;
    margin-left: -16px;
    margin-right: -16px;
  }
}