/* ==================================================================
   base.css — Cocoon から引き継ぐベーススタイル

   出典: 本番 /series/{id}/review/ と /manga-top/ の computed style 実測
        （2026-08-08。SPEC-v2 §8-2）

   ★依存していたのは body の5プロパティと box-sizing だけ。
     レイアウト（2カラム・グリッド）と見出しは全て自前CSSだった。
     測定では .tss-main-content の幅が 726px→728px と 2px しか動かなかった。

   ★line-height は「単位なし 1.8」で確定。
     body 18px × 1.8 = 32.4px、p 11px × 1.8 = 19.8px の実測値と一致する。
     px 指定にすると子要素に絶対値が継承されて崩れる。
   ================================================================== */

/* ★これが無いと padding 付き要素で一部レイアウトが崩れる。
   Cocoon が全称セレクタで指定していたものを引き継ぐ。 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  background: #f4f5f7;
  -webkit-text-size-adjust: 100%;

  /* ★2026-08-09 追加。Cocoon の style.css にあったのを取りこぼしていた。
       body { word-wrap: break-word; overflow-wrap: break-word; }
     §8-2 の実測は「幅がどう変わるか」で採ったため、
     幅を変えないこのプロパティは検出できなかった。
     長いURLや英数字の連続が箱からはみ出すのを防ぐ。 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; border: 0; }

/* ==================================================================
   トップへ戻るボタン

   ★現行では Cocoon が提供していた部品（#go-to-top）。
     SPEC-v2 §8-4「実際に使っているCocoon部品は2つだけ」の片方。
     Font Awesome には依存させず、インラインSVGで置き換えている。
   ================================================================== */
.tss-to-top {
  position: fixed;
  /* ★本番 div#go-to-top の computed style を実測してそのまま採用
     （2026-08-09。DevTools の Computed タブより）
       position: fixed / right: 10px / bottom: 35px / 45×45
       transition-duration: 0.6s / timing: ease */
  right: 10px;
  bottom: 35px;
  z-index: 900;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 0;

  border: 0;
  border-radius: 50%;
  /* 本番の実測値 #333333（完全不透明）。
     半透明にすると白背景に載って明るく見えるので不透明にすること。
     rgba(45,45,45,.92) は見た目 #3E3E3E 相当で、本番より薄かった。 */
  background: #333;
  color: #fff;
  cursor: pointer;

  /* 既定は非表示。少しスクロールしてから出す */
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  /* 本番の transition-duration: 0.6s / ease に合わせる */
  transition: opacity .6s ease, visibility .6s ease, transform .6s ease, background .2s ease;
}

.tss-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tss-to-top:hover,
.tss-to-top:focus-visible {
  background: #1f1f1f;
}

.tss-to-top:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.tss-to-top__icon {
  /* Font Awesome 4.7 の実グリフを、フォントの箱ごと再現している。
     SVG の viewBox が em ボックス（1152 × 1792）なので、
     ここには本番の ::before の box をそのまま入れればよい。

       本番 span.fa.fa-angle-double-up::before = 14.16 × 22（DevTools実測）
       → font-size 22px 相当。

     ★図形の輪郭寸法を指定しないこと。
       輪郭の bbox を自前で計算するとズレる（2回失敗した）。
       箱を合わせれば中身は font と同じに描かれる。 */
  width: 14.16px;
  height: 22px;
  display: block;

  /* 横位置の微調整。1px では寄りすぎ、0 では足りなかったので 0.5px。
     正なら右、負なら左。不要なら 0 か行ごと削除でよい。 */
  transform: translateX(0.5px);
}

/* スマホでは下部固定CTAバーと重ならないよう少し上げる */
@media (max-width: 834px) {
  .tss-to-top { bottom: 76px; right: 10px; }
}

/* 「動きを減らす」設定の利用者にはアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
  .tss-to-top { transition: none; }
}

/* ==================================================================
   巻カード（.vol-item）のはみ出し対策

   ★これは移植で生まれた問題ではない。現行（本番）も同じCSSで同じ挙動。
     テンプレート側の <style> は本番と md5 まで一致することを確認済み。

   何が起きているか:
     .vol-item は PC で grid（80px | 1fr | 160px）。
     2列目 .vol-info の中の .vol-desc が `display:-webkit-box` +
     `-webkit-line-clamp:2` で、Chrome ではこの箱の min-content 幅が
     テキスト全長のままになる。
     グリッドの子は既定で min-width:auto（= min-content）なので、
     2列目が 1fr のトラック幅を無視して広がり、
     3列目のボタンに文字が重なる。

     説明文が無い作品では起きないので、作品によって出たり出なかったりする。
     （例: /series/2050/ で発生、/series/2982/ の巻は説明が短く目立たない）

   直し方:
     グリッドの子に min-width:0 を与えて、割り当てられたトラック幅まで
     縮められるようにする。はみ出した分は .vol-desc の overflow:hidden と
     line-clamp が処理する（＝もともとテンプレートが意図していた表示）。

   ★テンプレートは触らずここで当てている。
     現行プラグインを更新してテンプレートをコピーし直しても消えない。
   ================================================================== */
.vol-item > .vol-info,
.vol-item > .vol-info > * {
  min-width: 0;
}