@charset "utf-8";

/* =============================================================================
   works-detail_style.css — Works 詳細（Main / 読み物 / 画像）
   -----------------------------------------------------------------------------
   構成は knowledge decisions/2026-08-16_works-detail-page-composition.md。
   幅は読み物向けの 720 系（foundation --container-narrow）に統一し、BP は 768
   の正準点のみ。旧詳細ページのハードコード BP と !important は持ち込まない。
   ============================================================================ */

/* header_style.css のレガシーな固定幅を詳細ページだけ解除し、あわせてページ
   固有トークンをここで定義する。見出し帯（.menu-container）は .work-detail の
   兄弟なので、トークンを .work-detail 側に置くと帯には継承されない。 */
#content:has(.work-detail),
#main:has(.work-detail) {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: auto;
  padding: 0;

  /* ブロック間の縦リズム。foundation の --space-section(最大 7rem) は
     Works 詳細のようにブロック数が多いページでは間延びする。 */
  --work-block-space: clamp(2.25rem, 3.5vw, 3.5rem);
  /* 詳細は読み物なので、既定の 960 ではなく foundation の読み物幅 720
     (--container-narrow) を使う。960 だと本文 measure との差が開き、図版だけ
     が本文の倍近い幅になって落ち着かなかった。 */
  --work-container: calc(var(--container-narrow) + 2 * var(--gutter));
  /* 本文はコンテナ幅いっぱいまで使う（720px ≒ 和文 45 文字）。 */
  --work-measure: var(--container-narrow);
}

/* 見出し帯もコンテンツと同じ左端に揃える（一覧は 1340 系だが、詳細は
   読み物幅なので帯だけ広いと段違いに見える）。 */
.menu-container:has(~ .work-detail) {
  max-width: var(--work-container);
  padding-inline: var(--gutter);
}

.work-detail {
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   共通コンテナ
   -------------------------------------------------------------------------- */
.work-detail__back {
  width: 100%;
  max-width: var(--work-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* margin-inline は共通コンテナ側の auto を残す（中央寄せを潰さない）。 */
.work-detail__back {
  margin-block: var(--space-lg) 0;
  font-size: var(--fs-sm);
}

.work-detail__back {
  margin-block-start: var(--work-block-space);
  margin-block-end: var(--work-block-space);
}