/* works-page — WORKS（作品）の下層ページ（WORKS 班、2026-09-28）
   契約：docs/RENEWAL-BRAND-SYSTEM.md（色・書体・部品）、細部：docs/DESIGN-DETAIL-STANDARD.md（8u、インクで測る）。
   色は契約の値だけ：黒の帯 #08090e（下層ページの地）、夜空 #0d0724（天蓋の地＝ヘッダーの地の続き）、紙 #f3ecdc、控えめ .78、金 #d8b66a。
   書体は Barlow Condensed 600（欧文・数字）と Zen Kaku Gothic New（和文）だけ。大文字の字間は 0.2em（操作）と 0.04em（見出し）。
   ヘッダー・フッターはホームの CSS をそのまま使い、ここでは触らない。 */

body.wk-page {
  --wk-paper: #f3ecdc;
  --wk-quiet: rgb(243 236 220 / 0.78);
  --wk-gold: #d8b66a;
  --wk-ground: #08090e;
  --wk-latin: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  --wk-jp: "Zen Kaku Gothic New", sans-serif;
  /* 中身の列の最大幅と左右の余白はサイト共通の変数で受ける（値は別の担当が決める。未定義のあいだは主指揮の仮の値で動く） */
  --wk-max: var(--site-max, 1168px);
  --wk-gutter: var(--site-gutter, max(var(--page-pad, 40px), calc((100vw - var(--wk-max)) / 2)));
  --wk-col-gap: 32px; /* 構成案 §2.2「Grid column gap 32」、ホームの節と同じ */
  --wk-row-gap: 48px; /* 同「Grid row gap 48」 */
  --wk-section: 96px; /* 同「Section → section 96」 */
  background-color: var(--wk-ground);
}
@media (max-width: 767px) {
  body.wk-page { --wk-col-gap: 16px; --wk-row-gap: 32px; --wk-section: 64px; }
}

/* ---------- 冒頭の帯（全下層ページ共通の枠 sp-frame-v1.css の .sp-opener）---------- */
/* 帯（夜空・高さ 280・全幅）、題字の位置と組み（ヘッダーの下端 → 題字のインク 64／24、アイコン 0.7em）、
   副情報の行（題字のインク → インク 24／16）は共通の枠のファイルがそのまま決める。ここでは WORKS 固有のものだけを足す。 */
#main#main > .wk-brand-anchor.s55-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0;
  filter: none;
  pointer-events: none;
}
/* 帯の中の七宝（works-shippo-v1.js が描く）。共通の枠の .sp-wamon と同じ層 */
body.sp .wk-opener .wk-shippo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
/* 題字の横の件数：題字と同じ基線（題字の語と件数だけを基線で揃え、アイコンは共通の枠のまま大文字の上端に置く） */
body.sp .sp-title > :is(.wk-title-word, .wk-count) { align-self: baseline; }
body.sp .sp-title > .wk-count {
  margin-right: 0;
  color: var(--wk-quiet);
  font: 600 24px/1 var(--wk-latin);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* 絞り込み：共通の枠の副情報の行（.sp-meta）に、共通の操作リンク（.sp-u：文字は押せる範囲 44 の上端、下線は大文字のインクの下 8.5）を並べる。
   選んでいる形式だけ紙色と下線、ほかは控えめな紙色で下線なし（構成案 §2.7「Active filter」） */
body.sp .sp-meta.wk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  /* 共通の枠の式のまま、端数（1440 で 16.8、スマホ 10.4）だけ整数に丸める。端数だと文字と下線が別々に画素へ丸められ、
     下線までの距離が 9.5〜10.5 に揺れた（契約と同じ測り方 measure-underline-works.mjs で実測） */
  padding-top: round(nearest, calc(var(--sp-title-meta) - 0.1 * var(--sp-title) - 2.6px + 1px), 1px);
}
/* 下線の位置：共通の .sp-u の 0.9em + 8.5（13px で 20.2）は端数で、画素への丸めで文字のインクから 9.5〜10.5 になった。
   整数の 19px に置くと、契約と同じ測り方でホームの .u と同じ 8.5 になる（measure-underline-works.mjs で全幅を実測） */
body.sp .wk-filters .wk-filter::after { top: 19px; }
body.sp .wk-filters .wk-filter:not([aria-current="true"])::after { opacity: 0; }
body.sp .wk-filters .wk-filter[aria-current="true"] { color: var(--wk-paper); }
body.sp .wk-filters .wk-filter:is(:hover, :focus-visible) { color: var(--wk-paper); }
.wk-page .wk-media:focus-visible, .wk-page .wk-title-btn:focus-visible,
.wk-page .wk-credit a:focus-visible, .wk-viewer button:focus-visible {
  outline: 2px solid var(--wk-paper);
  outline-offset: 4px;
}
@media (max-width: 767px) {
  body.sp .sp-title > .wk-count { font-size: 18px; }
  body.sp .sp-meta.wk-filters { gap: 0 24px; }
}

/* ---------- 作品の一覧 ---------- */
/* ホームの規則（.study16 #main > * の幅 min(1168px, …)）を、サイト共通の変数の幅に置き換える。
   3列のまま、列の幅は中身の幅に比例して大きくなる（広い画面で中央に固まらない。主作品＝下の一覧の2列ぶんの関係も保つ） */
#main#main > .wk-list {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin-inline: var(--wk-gutter);
  margin-top: var(--sp-edge, 96px); /* 帯の端 → 最初の作品 96／スマホ 64（共通の枠の --sp-edge） */
}
.wk-list {
  /* 最後の作品のインク → フッターの最初の文字 96（スマホ 64）。フッターの上の内側余白 16 と、注記・フッターの行の箱の空き
     （合わせて 21）を引いた値。実測で確認 */
  padding-bottom: calc(var(--wk-section) - 37px);
}
.wk-lead, .wk-archive {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--wk-col-gap);
  align-items: start;
}
.wk-lead { row-gap: 29px; } /* 右の1点目の注記のインク → 2点目の画像 32（注記の行の箱の下に 3px の空き。実測） */
/* 主作品は 3 列のうち 2 列ぶん（368×2 + 32 = 768、下の一覧の列と揃う）、残り 2 点は右の列に縦に並ぶ（ホームの WORKS と同じ組） */
.wk-lead > .wk-item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.wk-lead > .wk-item:nth-child(2) { grid-column: 3; grid-row: 1; }
.wk-lead > .wk-item:nth-child(3) { grid-column: 3; grid-row: 2; }
/* 3 列のとき、主作品の注記の下端を右の列の最後の注記の下端に揃える（審査の指摘、主指揮の裁定）。画像 → 題は 16 のまま、
   主作品の画像の枠を右の列の高さまで伸ばし、絵は枠いっぱいに切り抜く（切り抜く位置は作品ごとに works-data.js の focus）。
   右の列が並ぶ（3 点ある）ときだけ。 */
.wk-lead[data-count="3"] > .wk-item:nth-child(1) { align-self: stretch; display: flex; flex-direction: column; }
.wk-lead[data-count="3"] > .wk-item:nth-child(1) > .wk-media { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.wk-lead[data-count="3"] > .wk-item:nth-child(1) > .wk-media > :is(img, video) { object-fit: cover; object-position: var(--wk-focus, 50% 50%); }
.wk-archive {
  row-gap: calc(var(--wk-row-gap) - 2px); /* 行の注記のインク → 次の行の画像 48（実測で箱の空き 2px を差し引く） */
  margin-top: calc(var(--wk-section) - 2px); /* 主な作品の最後のインク → 一覧の最初の画像 96（同じく 2px） */
}
.wk-archive:empty { display: none; }
@media (max-width: 959px) {
  .wk-lead, .wk-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-lead > .wk-item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  .wk-lead > .wk-item:nth-child(2) { grid-column: 1; grid-row: 2; }
  .wk-lead > .wk-item:nth-child(3) { grid-column: 2; grid-row: 2; }
  /* 主作品は1段目いっぱい（絵の比率のまま）。2段目に並ぶ2点は、高さをそろえ、幅を絵の縦横比に比例させる
     （STUDIO の作例と同じ規則。絵の外側の端は列の端にそろい、注記の高さもそろう。主指揮の裁定） */
  .wk-lead { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: calc(var(--wk-row-gap) - 2px); }
  .wk-lead > .wk-item:nth-child(1) { flex: 0 0 100%; }
  .wk-lead > .wk-item:nth-child(n + 2) { flex: var(--wk-arn, 1.7778) 1 0; min-width: 0; }
  .wk-lead[data-count="3"] > .wk-item:nth-child(1) { display: block; align-self: auto; }
  .wk-lead[data-count="3"] > .wk-item:nth-child(1) > .wk-media { aspect-ratio: var(--wk-ar, 16 / 9); }
  .wk-lead[data-count="3"] > .wk-item:nth-child(1) > .wk-media > :is(img, video) { object-fit: contain; }
}
@media (max-width: 759px) {
  .wk-lead, .wk-archive { grid-template-columns: minmax(0, 1fr); row-gap: 29px; } /* 注記のインク → 次の画像 32（実測で 3px 差し引き） */
  .wk-lead { display: grid; }
  .wk-lead > .wk-item:nth-child(n) { grid-column: 1; grid-row: auto; flex: none; }
  .wk-archive { margin-top: 29.5px; }
  .wk-list { padding-bottom: calc(64px - 38px); } /* スマホの注記 12/18 は箱の空きが 1px 大きい（実測） */
}

.wk-item { min-width: 0; margin: 0; }
.wk-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--wk-ar, 16 / 9);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: hidden;
  cursor: pointer;
}
.wk-media[data-kind="still"] { cursor: zoom-in; }
.wk-media > :is(img, video, iframe) {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain; /* 画像は切り抜かない（構成案 §7.4） */
}
.wk-media[data-kind="yt"] > img, .wk-media[data-kind="play"] > img { object-fit: cover; } /* 動画のサムネイルは 16:9 に。4:3 の上下の帯だけが落ちる */
/* 読み込み中は形式の表記だけを静かに置く（点滅なし、構成案 §7.6） */
.wk-media-label {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: var(--wk-quiet);
  font: 600 12px/1 var(--wk-latin);
  letter-spacing: 0.2em;
}
/* 再生の印：黒の地が画像の左下の角に食い込む 48×48 の欠き（枠線なし）。サイバー側の操作の印で、位置は全作品で同じ */
.wk-notch {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--wk-ground);
  color: var(--wk-quiet);
}
.wk-notch svg { width: 20px; height: 20px; }
.wk-media:hover .wk-notch { color: var(--wk-paper); }
button.wk-notch { padding: 0; border: 0; cursor: pointer; font: inherit; }
button.wk-notch:hover, button.wk-notch:focus-visible { color: var(--wk-paper); }
button.wk-notch:focus-visible { outline: 2px solid var(--wk-paper); outline-offset: -4px; }

/* 動画：標準の操作の代わりに、左下の欠き（再生／一時停止）、右下の欠き（音・全画面）、下端の 1px の進み具合の線 */
.wk-player > video { cursor: pointer; }
.wk-player > video:focus-visible { outline: 2px solid var(--wk-paper); outline-offset: -2px; }
.wk-v-tools {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
}
.wk-v-tools > .wk-notch { position: static; }
.wk-v-rail {
  position: absolute;
  left: 48px;  /* 左下の欠きの右端から */
  right: 96px; /* 右下の欠き（48×2）の左端まで */
  bottom: 0;
  z-index: 2;
  height: 24px; /* 押せる範囲。描く線は下端の 1px だけ */
  cursor: pointer;
}
.wk-v-rail::before, .wk-v-done {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}
.wk-v-rail::before { background: rgba(184, 156, 255, 0.32); } /* 信号の線（契約 §2、サイバーの線） */
.wk-v-rail:focus-visible { outline: 2px solid var(--wk-paper); outline-offset: -2px; }
.wk-v-done { background: var(--wk-quiet); transform: scaleX(0); transform-origin: 0 0; }
/* 再生前は再生の印だけ。音・全画面・進み具合は、一度再生してから出す */
.wk-player[data-state="idle"] :is(.wk-v-tools, .wk-v-rail) { display: none; }
.wk-player:fullscreen { background: var(--wk-ground); }

.wk-item-title {
  /* 画像の下端 → 題のインクの上端 16。行の箱の上には約5px の空きがあるので、箱の余白は 11（実測） */
  margin: 11px 0 0;
  color: var(--wk-paper);
  font: 600 15px/24px var(--wk-jp);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.wk-item-title > .wk-title-text, .wk-title-btn > .wk-title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wk-feature .wk-item-title { margin-top: 10px; font-size: 18px; line-height: 28px; } /* 18px の行は空きが約6px → 10 */
.wk-title-btn {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.wk-title-btn > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--wk-quiet); /* 拡大の印は控えめな紙色（契約 §2 の操作アイコン） */
}
.wk-feature .wk-title-btn > svg { margin-top: 6px; }
.wk-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0; /* 題のインク下端 → 注記のインク上端 8（行の箱どうしの空きだけで 8.5 になる。実測） */
  color: var(--wk-quiet);
  font: 500 11px/16px var(--wk-jp);
}
.wk-format {
  font: 600 12px/16px var(--wk-latin);
  letter-spacing: 0.2em;
}
.wk-credit a { color: inherit; text-decoration: none; }
.wk-credit a:hover { color: var(--wk-paper); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .wk-item-meta { font-size: 12px; line-height: 18px; }
  .wk-feature .wk-item-title { margin-top: 10px; font-size: 17px; line-height: 26px; }
}

.wk-state {
  margin: 0;
  color: var(--wk-quiet);
  font: 500 14px/1.9 var(--wk-jp);
}

/* ---------- 入場（1ページに1つ）：天蓋が結ばれたあと、主な作品が上から現れる ---------- */
html.wk-intro .wk-lead .wk-media { clip-path: inset(0 0 100% 0); }
html.wk-intro .wk-lead :is(.wk-item-title, .wk-item-meta) { opacity: 0; }

/* ---------- 拡大表示：箱やモーダルの枠を描かず、黒の地に作品だけを置く ---------- */
/* スクロールは .v8-preview-lock で止める。バーの幅は開く直前に測って html の右余白に足す（バーが無い画面では 0）。 */
html.v8-preview-lock { overflow: hidden; }
html.v8-preview-lock { overflow-anchor: none; }
.wk-viewer {
  --wk-bar: 64px;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 var(--wk-gutter, 40px);
  border: 0;
  background: transparent;
  color: var(--wk-paper);
  overflow: hidden;
}
.wk-viewer[open] {
  display: grid;
  grid-template-rows: var(--wk-bar) minmax(0, 1fr) auto;
}
.wk-viewer::backdrop { background: rgb(8 9 14 / 0.96); transition: opacity 320ms ease-out; }
@starting-style { .wk-viewer[open]::backdrop { opacity: 0; } }
.wk-viewer.is-closing::backdrop { opacity: 0; transition-duration: 420ms; }
.wk-v-bar, .wk-v-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; }
.wk-v-count {
  color: var(--wk-quiet);
  font: 600 13px/1 var(--wk-latin);
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}
.wk-v-media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: 32px 0; /* バー・注記との間 32 */
}
/* 絵も動画も、枠の縦横に引き伸ばさない。中の要素の幅と高さは、本来の比率のまま画面に収まる大きさ（JS が px で置く）。 */
.wk-v-media > img,
.wk-v-stage {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.wk-v-stage > :is(iframe, video) { display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.wk-viewer :is(.wk-v-nav, .wk-v-count, .wk-v-stage, .wk-v-media > img)[hidden] { display: none; }
.wk-v-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--wk-quiet);
  font: 500 14px/1.9 var(--wk-jp);
}
.wk-v-foot { align-items: flex-end; padding-bottom: 32px; }
.wk-v-caption { min-width: 0; }
.wk-v-title { margin: 0; font: 600 18px/28px var(--wk-jp); overflow-wrap: anywhere; }
.wk-v-foot .wk-item-meta { margin-top: 8px; }
.wk-v-nav { display: flex; gap: 32px; flex: none; }
/* 拡大表示の操作も .u の型（文字＋下線＋矢印、四角い枠のボタンは作らない） */
.wk-v-btn {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 0 9px;
  border: 0;
  background: transparent;
  color: var(--wk-quiet);
  font: 600 13px/1 var(--wk-latin);
  letter-spacing: 0.2em;
  cursor: pointer;
}
.wk-v-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; }
.wk-v-btn svg { width: 12px; height: 12px; flex: none; margin-bottom: 0.5px; }
.wk-v-btn:hover { color: var(--wk-paper); }
/* 上端の CLOSE の焦点リングが画面の外に出ると、狭い画面でページが数 px ずれる */
.wk-viewer button:focus-visible { outline-offset: 0; scroll-margin: 0; }
.wk-v-fly { position: fixed; z-index: 2; margin: 0; object-fit: contain; pointer-events: none; transform-origin: 0 0; }
@media (max-width: 1023px) { .wk-viewer { --wk-bar: 56px; } }
@media (max-width: 767px) {
  .wk-v-media { margin: 16px 0; }
  .wk-v-foot { flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 24px; }
  .wk-v-title { font-size: 16px; line-height: 26px; }
  .wk-v-nav { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html.wk-intro .wk-lead .wk-media { clip-path: none; }
  html.wk-intro .wk-lead :is(.wk-item-title, .wk-item-meta) { opacity: 1; }
}