/* 機能ページの説明漫画。
   絵は「背景＋人物の表情差分」の重ね合わせ、台詞はHTML。
   台詞を直すのに絵を作り直さない。 */

.fmanga {
  --fm-line: #d7d5cf;
  --fm-ink: #1e2733;
  --fm-turq: #00a8b5;
  --fm-paper: #fbfbfa;

  max-width: 880px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line, var(--fm-line));
  border-radius: 18px;
  background: var(--fm-paper);
}

.fmanga__eyebrow {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px;
  color: #0f6f77;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.fmanga__eyebrow .mi { font-size: 18px; }

.fmanga__question {
  margin: 0;
  color: var(--fg, var(--fm-ink));
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.6;
  text-wrap: balance;
}
.fmanga__summary { margin: 10px 0 0; color: var(--fg-2, #5a6068); font-size: 14px; line-height: 1.85; }

/* 読む前の見通し。何が分かるようになるか／どこまで続くか。
   これが無いと、読者には途中でやめる理由しか残らない */
.fmanga__outline {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid #dfe3e6;
  border-left: 3px solid var(--fm-turq);
  border-radius: 8px;
  background: #fff;
}
.fmanga__outline-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px;
  color: #0f6f77; font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
.fmanga__count {
  color: var(--fg-2, #5a6068); font-weight: 400; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* 横並びの番号付きリスト。マーカーを使うと隣の項目とくっついて読めないので、
   番号は counter で項目の中に描き、1つずつを独立した札にする */
.fmanga__outline-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: fmanga-step;
  color: var(--fg, var(--fm-ink)); font-size: 13px; line-height: 1.5;
}
.fmanga__outline-list li {
  counter-increment: fmanga-step;
  display: flex; align-items: baseline; gap: 6px;
  margin: 0;
  padding: 4px 10px 4px 7px;
  border: 1px solid #e3e7ea;
  border-radius: 999px;
  background: #f6f8f9;
}
.fmanga__outline-list li::before {
  content: counter(fmanga-step);
  flex: none;
  display: inline-grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--fm-turq);
  color: #fff;
  font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* コマの帯 */
.fmanga__strip {
  display: flex; flex-direction: column; gap: 18px;
  margin: clamp(20px, 3vw, 28px) 0 0; padding: 0;
  list-style: none;
  counter-reset: fmanga;
}
.fmanga-panel { counter-increment: fmanga; }

.fmanga-panel__art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--fm-ink);
  border-radius: 3px;
  background: #e6e7e3;
}

.fmanga-panel__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

/* 人物は下端で切る。上半分は吹き出しと資料に空ける。
   左右反転はしない（スカーフの向き・分け目が変わるため） */
.fmanga-figure {
  position: absolute; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
  width: auto;
}
.fmanga-figure--left { left: 3%; }
.fmanga-figure--right { right: 3%; }

.fmanga-figure__art {
  display: block; width: auto;
  height: clamp(96px, 20vw, 190px);
  filter: drop-shadow(0 6px 12px rgba(30, 39, 51, .16));
}

/* 名札。枠と文字色は人物ごとの固有色（characters.md §9） */
.fmanga-figure__name {
  position: relative; z-index: 2;
  margin: -10px 0 5px;
  padding: 3px 9px;
  border: 2px solid var(--c, var(--fm-ink));
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink, var(--fm-ink));
  font-size: clamp(9px, 1.15vw, 11.5px);
  line-height: 1.35;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 2px 6px rgba(30, 39, 51, .12);
}
.fmanga-figure__person { font-weight: 700; }
.fmanga-figure__role { margin-left: 5px; opacity: .78; }

/* 資料そのものを背景にするコマ。
   上が資料、下の帯が人物と吹き出し。互いを隠さないように場所を分ける。
   問いと答えで吹き出しが2つ重なるので、場面のコマより縦に高く取る */
.fmanga-panel__art--doc { aspect-ratio: 16 / 10; }
/* 吹き出しの本数だけ、下の帯を高く取る。表と脚注を覆わせない */
.fmanga-panel__art--doc-3 { aspect-ratio: 4 / 3; }
/* 行数が多い資料は、コマを高くすると中身が薄く見える。高さではなく行の詰めで収める */
.fmanga-panel__art--doc-tall .fmanga-doc__table th,
.fmanga-panel__art--doc-tall .fmanga-doc__table td {
  padding-top: clamp(3px, .7vw, 6px);
  padding-bottom: clamp(3px, .7vw, 6px);
  font-size: clamp(10.5px, 1.4vw, 13.5px);
}
.fmanga-panel__art--doc-tall .fmanga-doc__foot { margin-top: 7px; }
/* 下の帯は吹き出しの本数ぶんだけ取る。余らせると資料の下に空白が居座る */
.fmanga-panel__art--doc-1 .fmanga-doc__body { padding-bottom: 34%; }
.fmanga-panel__art--doc-3 .fmanga-doc__body { padding-bottom: 54%; }
/* 行が2つ以下の資料は、コマ自体を低くする */
.fmanga-panel__art--doc-short { aspect-ratio: 2 / 1; }
.fmanga-panel__art--doc .fmanga-figure__art { height: clamp(74px, 14vw, 132px); }
.fmanga-panel__art--doc .fmanga-figure--left { left: 1.5%; }
.fmanga-panel__art--doc .fmanga-figure--right { right: 1.5%; }
.fmanga-panel__art--doc .fmanga-panel__lines {
  inset: auto 0 0 0;
  justify-content: flex-end;
  padding: 0 3.5% 3%;
}
.fmanga-panel__art--doc .fmanga-bubble { max-width: min(68%, 440px); }

/* 二人が見ている資料そのものを背景にする。
   画像ではなくHTMLなので、文字が崩れず、直すのに作り直しが要らない */
.fmanga-doc {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  margin: 0;
  background: linear-gradient(180deg, #f7f9fa 0%, #eef1f3 100%);
}
.fmanga-doc__bar {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px;
  border-bottom: 1px solid #d3dade;
  background: #e4e9ec;
  color: #46505a;
  font-size: clamp(10px, 1.3vw, 12.5px); font-weight: 700;
}
.fmanga-doc__dots {
  flex: none; width: 34px; height: 8px;
  background:
    radial-gradient(circle 4px at 4px 4px, #c3ccd2 98%, transparent),
    radial-gradient(circle 4px at 17px 4px, #c3ccd2 98%, transparent),
    radial-gradient(circle 4px at 30px 4px, #c3ccd2 98%, transparent);
}
.fmanga-doc__body {
  flex: 1; min-height: 0;
  padding: clamp(10px, 2vw, 20px) clamp(12px, 3vw, 34px);
  padding-bottom: 46%;   /* 下の帯は人物と吹き出しの場所。資料を食い込ませない */
  overflow: hidden;
}
.fmanga-doc__table { width: 100%; border-collapse: collapse; }
.fmanga-doc__table th,
.fmanga-doc__table td {
  padding: clamp(5px, 1.1vw, 10px) 4px;
  text-align: left; vertical-align: top;
  color: var(--fm-ink); font-weight: 400;
  font-size: clamp(11px, 1.55vw, 15px); line-height: 1.6;
}
.fmanga-doc__table th {
  width: 38%; padding-right: 14px;
  color: #55606b; white-space: nowrap;
}
.fmanga-doc__table tr + tr th,
.fmanga-doc__table tr + tr td { border-top: 1px solid #dfe5e9; }
/* AIの行は人の行と同じ体裁。囲まない・光らせない・背景色を変えない */
.fmanga-doc__ai th { display: flex; align-items: center; gap: 6px; }
.fmanga-doc__foot {
  margin: 10px 0 0; color: #6a727b;
  font-size: clamp(10px, 1.25vw, 12px); line-height: 1.7;
}

/* 画面（小さいカード）— 場面の背景の上に置くとき用 */
.fmanga-screen {
  position: absolute; bottom: 6%;
  width: min(50%, 380px);
  margin: 0; padding: 10px 12px;
  border: 1px solid #b9c0c7;
  border-radius: 6px;
  background: rgba(252, 253, 253, .97);
  box-shadow: 0 10px 26px rgba(30, 39, 51, .18);
  font-size: clamp(10px, 1.35vw, 13px);
}
.fmanga-screen--right { right: 4%; }
.fmanga-screen--left { left: 4%; }

.fmanga-screen__title {
  margin: 0 0 6px; padding-bottom: 5px;
  border-bottom: 1px solid #e2e6ea;
  color: #46505a; font-weight: 700; font-size: .92em;
}
.fmanga-screen__table { width: 100%; border-collapse: collapse; }
.fmanga-screen__table th,
.fmanga-screen__table td {
  padding: 4px 2px; text-align: left; vertical-align: top;
  color: var(--fm-ink); font-weight: 400; line-height: 1.55;
}
.fmanga-screen__table th { white-space: nowrap; padding-right: 10px; color: #55606b; }
.fmanga-screen__table tr + tr th,
.fmanga-screen__table tr + tr td { border-top: 1px solid #edf0f2; }
/* AIの行は人の行と同じ体裁。囲まない・光らせない・背景色を変えない */
.fmanga-screen__ai th { display: flex; align-items: center; gap: 5px; }

.fmanga-ai {
  display: inline-grid; place-items: center;
  width: 1.55em; height: 1.55em;
  border-radius: 50%;
  background: var(--fm-turq);
  color: #fff;
  font-size: .78em; font-weight: 700; letter-spacing: .02em;
}

/* 吹き出し。話者のいる側から出す */
.fmanga-panel__lines {
  position: absolute; inset: 0 0 auto 0;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 3.5%;
  pointer-events: none;
}
/* ナレーション枠。状況・環境の説明はここに入れ、人物に喋らせない。
   吹き出しと区別が付くよう、角を立てて・しっぽを付けず・話者名を出さない */
.fmanga-narr {
  align-self: stretch;
  position: relative;
  max-width: min(72%, 520px);
  margin: 0 0 2px; padding: 8px 12px;
  border: 1.5px solid var(--fm-ink);
  border-radius: 2px;
  background: rgba(255, 255, 255, .96);
  color: var(--fm-ink);
  font-size: clamp(11px, 1.45vw, 13.5px);
  line-height: 1.7;
  box-shadow: 1px 2px 0 rgba(30, 39, 51, .18);
}
.fmanga-narr b { font-weight: 700; }
.fmanga-narr + .fmanga-bubble { margin-top: 8px; }

.fmanga-bubble--from-left { align-self: flex-start; }
.fmanga-bubble--from-right { align-self: flex-end; }
.fmanga-bubble {
  position: relative;
  max-width: min(58%, 400px);
  margin: 0; padding: 9px 13px;
  border: 2px solid var(--c, var(--fm-ink));
  border-radius: 14px;
  background: #fff;
  color: var(--fm-ink);
  font-size: clamp(12px, 1.6vw, 15px);
  line-height: 1.75;
  box-shadow: 0 4px 12px rgba(30, 39, 51, .10);
}
.fmanga-bubble::after {
  content: ""; position: absolute; bottom: -9px;
  width: 14px; height: 14px;
  border: 2px solid var(--c, var(--fm-ink));
  border-top: 0; border-right: 0;
  border-bottom-left-radius: 4px;
  background: #fff;
  transform: skewY(-18deg);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.fmanga-bubble--from-left::after { left: 26px; }
.fmanga-bubble--from-right::after { right: 26px; transform: skewY(18deg) scaleX(-1); }

.fmanga-bubble__who {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px;
  color: var(--c-ink, #6a727b); font-size: .78em; font-weight: 700;
}
.fmanga-bubble__text { display: block; }
.fmanga-bubble b { font-weight: 700; }

.fmanga-panel__note {
  margin: 7px 2px 0;
  color: var(--fg-2, #5a6068);
  font-size: 12px; line-height: 1.75;
}

.fmanga__disclaimer {
  margin: 18px 0 0;
  color: var(--fg-2, #5a6068);
  font-size: 12px; text-align: center;
}

/* 段階的に出す。コマが画面に入ったら、吹き出しが順に現れる */
.fmanga-bubble,
.fmanga-narr,
.fmanga-screen,
.fmanga-doc__body { opacity: 1; transform: none; }

.js-fmanga .fmanga-bubble,
.js-fmanga .fmanga-narr,
.js-fmanga .fmanga-screen,
.js-fmanga .fmanga-doc__body {
  opacity: 0;
  transform: translateY(8px) scale(.98);
}
.js-fmanga .fmanga-panel.is-shown .fmanga-bubble,
.js-fmanga .fmanga-panel.is-shown .fmanga-narr,
.js-fmanga .fmanga-panel.is-shown .fmanga-screen,
.js-fmanga .fmanga-panel.is-shown .fmanga-doc__body {
  opacity: 1;
  transform: none;
  transition: opacity .38s ease, transform .38s cubic-bezier(.2, .8, .3, 1);
  transition-delay: calc(min(var(--step, 0), 3) * .16s + .06s);
}

@media (prefers-reduced-motion: reduce) {
  .js-fmanga .fmanga-bubble,
  .js-fmanga .fmanga-narr,
  .js-fmanga .fmanga-screen { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 640px) {
  .fmanga { padding: 14px; border-radius: 14px; }
  .fmanga-panel__art { aspect-ratio: 4 / 3; }
  .fmanga-panel__art--doc { aspect-ratio: 3 / 4; }
  .fmanga-bubble { max-width: 74%; }
  .fmanga-screen { width: 72%; }
}