/* ===== works page (overrides/works.html) ===== */
:root {
  --zw-ease: cubic-bezier(.2, .8, .2, 1);
  --zw-hh: 2.4rem;  /* Material ヘッダーの高さ（.md-header と同じ） */
  /* Material ヘッダーの中身（.md-grid 61rem の中央寄せ + .8rem）の左端に揃える余白 */
  --zw-gutter: calc(max(0px, (100% - 61rem) / 2) + .8rem); /* padding の % は親の幅基準 */
}
/* CALM BLUE：暗い青（header）は広い面と操作部品、明るめの青（accent）は小さな印だけ */
/* ヘッダーの帯はサイト共通の docs/stylesheets/extra.css（Material の primary）で暗い青になる */
/* 地・文字・線は Material の変数を参照（docs/stylesheets/extra.css の値と同じ） */
.zw {
  --zw-ground: var(--md-default-bg-color);       /* 地・ツールバー・詳細の地 */
  --zw-surface: #F2F4F8;                         /* フライヤーなしのカード */
  --zw-ink: var(--md-default-fg-color);          /* 文字・強い罫線 */
  --zw-muted: var(--md-default-fg-color--light); /* 補助テキスト・大きな数字 */
  --zw-line: var(--md-default-fg-color--lightest); /* 区切り線 */
  --zw-header: #1A2C99;       /* ヘッダーの帯・切り替えの選択中・詳細の NEXT・年ボタンの選択中 */
  --zw-header-dark: #121F6E;  /* header のホバー・押下 */
  --zw-accent: #3048E0;       /* 告知前カード・NEXT バッジ・リンク・フォーカスリング */
  --zw-on-color: #FFFFFF;     /* header / accent の上の文字 */
}

/* Material のヘッダーは残し、本文のレイアウトだけ無効化 */
body { background-color: var(--md-default-bg-color) !important; }
.md-container, .md-main, .md-main__inner { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.md-main__inner > :not(.zw) { display: none !important; }

.zw { min-height: calc(100vh - var(--zw-hh)); min-height: calc(100svh - var(--zw-hh)); background: var(--zw-ground); color: var(--zw-ink); font-family: var(--md-text-font-family); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
.zw *, .zw *::before, .zw *::after { box-sizing: border-box; }
.zw a { color: inherit; transition: color .125s; }
.zw button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.zw [hidden] { display: none !important; }
.zw :focus-visible { outline: 2px solid var(--zw-accent); outline-offset: 2px; }
.zw-mono { font-family: var(--md-code-font-family); font-size: 11px; letter-spacing: .1em; }
/* 大きな日付・見出し：トップの h1 と同じく本文フォントの細字 */
.zw-light { font-family: var(--md-text-font-family); font-weight: 300; }

/* ---- ヘッダー（overrides/works-header.html）：[ロゴ][WORKS — 件数] ……… [検索][WALL / RING] ---- */
.zw-mdheader .md-header__title { order: 1; flex-grow: 0; margin-right: .8rem; }
.zw-mdheader label[for="__search"] { order: 2; margin-left: auto; }
.zw-mdheader .md-search { order: 2; margin-left: auto; margin-right: .8rem; }
/* Material は topic を absolute で重ねているので、伸ばさないタイトルでは通常配置に戻して幅を持たせる */
.zw-mdheader .md-header__ellipsis { position: static; width: auto; }
.zw-mdheader .md-header__topic { position: static; display: flex; max-width: none; font-family: var(--md-code-font-family); font-weight: 400; letter-spacing: .08em; white-space: nowrap; }
.zw-mdheader .zw-toggle { order: 3; display: flex; flex: none; margin: 0 .2rem 0 0; padding: 3px; border: 1px solid var(--md-primary-bg-color--light); border-radius: 999px; }
.zw-mdheader .zw-toggle button { height: 1.4rem; padding: 0 .7rem; border: 0; border-radius: 999px; background: none; cursor: pointer; font-family: var(--md-code-font-family); font-size: 11px; letter-spacing: .12em; color: var(--md-primary-bg-color--light); transition: background-color .2s, color .2s; }
.zw-mdheader .zw-toggle button:hover { color: var(--md-primary-bg-color); }
/* 暗い青の帯の上なので選択中は白地に暗い青の文字 */
.zw-mdheader .zw-toggle button[aria-pressed="true"] { background: var(--md-primary-bg-color); color: var(--md-primary-fg-color); }
.zw-mdheader .zw-toggle button:focus-visible { outline: 2px solid var(--md-primary-bg-color); outline-offset: 2px; }

/* ---- WALL ---- */
.zw-wall { --zw-gap: 8px; padding: 32px 8px 64px; }
/* JS が無ければ行ごとに左→右。JS が縦横比を見て、いちばん短い列へ順に詰める（石垣状） */
.zw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--zw-gap); align-items: start; }
.zw-grid.is-masonry { display: flex; align-items: flex-start; }
.zw-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--zw-gap); }
/* 見出し「Upcoming」「Archive」。p・g が下にはみ出すので行の高さを確保 */
.zw-heading { display: flex; align-items: flex-end; padding: 0 2px 8px; }
.zw-heading span { font-family: var(--md-text-font-family); font-weight: 300; color: var(--zw-muted); font-size: clamp(64px, 8vw, 120px); line-height: .8; letter-spacing: -.03em; padding-bottom: .22em; }
/* 予定と過去のあいだ */
.zw-group--upcoming { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--zw-line); }
.zw-tile { position: relative; display: block; width: 100%; margin: 0; text-align: left; transition: transform .5s var(--zw-ease); }
.zw-tile:hover { transform: scale(1.02); }
.zw-tile img { display: block; width: 100%; height: auto; background: var(--zw-surface); }
.zw-cap { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 8px; padding: 40px 10px 10px; color: var(--zw-ground); letter-spacing: .04em; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .25s; }
.zw-tile:hover .zw-cap, .zw-tile:focus-visible .zw-cap { opacity: 1; }
.zw-next { position: absolute; top: 8px; left: 8px; padding: 5px 8px; background: var(--zw-accent); color: var(--zw-on-color); }
.zw-card { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; padding: 14px; background: var(--zw-surface); color: var(--zw-ink); }
.zw-card--tba { background: var(--zw-accent); color: var(--zw-on-color); }
.zw-card-t { font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); line-height: .98; letter-spacing: -.03em; word-break: break-word; }
.zw-card-d { display: block; font-size: clamp(48px, 5.6vw, 80px); line-height: .85; letter-spacing: -.03em; }
.zw-card:not(.zw-card--tba) .zw-card-d { color: var(--zw-muted); }

@media (max-width: 600px) {
  .zw-mdheader .md-header__title { margin-right: .4rem; }
  .zw-mdheader .md-header__topic { font-size: .75rem; }
  .zw-mdheader .zw-toggle button { padding: 0 .5rem; font-size: 10px; }
  .zw-wall { --zw-gap: 4px; padding: 16px 4px 48px; }
  .zw-grid { grid-template-columns: repeat(3, 1fr); }
  .zw-heading span { font-size: 56px; }
  .zw-group--upcoming { padding-bottom: 16px; margin-bottom: 16px; }
  .zw-cap { display: none; }
  .zw-card { padding: 8px; }
  .zw-card .zw-mono { font-size: 8px; letter-spacing: .06em; }
  .zw-card-t { font-size: 15px; }
  .zw-card-d { font-size: 32px; }
  .zw-next { top: 4px; left: 4px; padding: 3px 5px; font-size: 8px; letter-spacing: .06em; }
}

/* ---- RING ---- */
.zw-ring { position: relative; height: calc(100vh - var(--zw-hh)); height: calc(100svh - var(--zw-hh)); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; transition: background-color .9s ease; background-color: var(--zw-ground); }
.zw-ring.is-drag { cursor: grabbing; }
.zw-ryear { position: absolute; inset: 7vh 0 auto; text-align: center; font-family: var(--md-text-font-family); font-weight: 300; font-size: 30vw; line-height: .8; letter-spacing: -.04em; color: rgba(255,255,255,.55); pointer-events: none; }
.zw-stage { position: absolute; inset: 0; perspective: var(--zw-persp, 1700px); perspective-origin: 50% 42%; transition: transform .7s var(--zw-ease), filter .7s, opacity .7s; }
.zw-scene { position: absolute; left: 50%; top: 45%; width: 0; height: 0; transform-style: preserve-3d; }
.zw-rc { position: absolute; left: calc(var(--zw-cw) / -2); top: calc(var(--zw-ch) / -2); width: var(--zw-cw); height: var(--zw-ch); display: flex; align-items: center; justify-content: center; text-align: left; }
/* フライヤーは元の縦横比のまま 3:4 の枠に収める（幅・高さは JS が % で指定） */
.zw-rc img { display: block; width: 100%; height: 100%; object-fit: contain; background: rgba(255,255,255,.4); box-shadow: 0 20px 50px rgba(0,0,0,.18); -webkit-user-drag: none; }
.zw-rc .zw-card { width: 100%; height: 100%; aspect-ratio: auto; padding: calc(var(--zw-cw) * .06); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.zw-rc .zw-card-t { font-size: calc(var(--zw-cw) * .15); }
.zw-rc .zw-card-d { font-size: calc(var(--zw-cw) * .3); }
.zw-rfoot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px; pointer-events: none; transition: opacity .4s; }
.zw-rfoot > * { pointer-events: auto; }
.zw-rcap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zw-rdate { font-size: 64px; line-height: .9; letter-spacing: -.02em; color: var(--zw-muted); }
.zw-rtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.zw-years { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.zw-years button { min-height: 36px; padding: 0 10px; font-family: var(--md-code-font-family); font-size: 11px; letter-spacing: .08em; border-radius: 999px; }
.zw-years button[aria-current="true"] { background: var(--zw-header); color: var(--zw-on-color); }
.zw-years button[aria-current="true"]:hover, .zw-years button[aria-current="true"]:active { background: var(--zw-header-dark); }
.zw-rnav { display: flex; align-items: center; gap: 8px; }
.zw-rnav .zw-mono { margin-right: 10px; color: var(--zw-muted); }
.zw-round { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--zw-ink) !important; font-size: 20px; }
.zw-swipe { display: none; }
.zw-ring.is-dim .zw-stage { transform: translateX(18vw) scale(.78); filter: blur(7px); opacity: .5; pointer-events: none; }
.zw-ring.is-dim .zw-rfoot { opacity: 0; pointer-events: none; }

@media (orientation: portrait), (max-width: 700px) {
  .zw-ryear { inset: 12vh 0 auto; font-size: 38vw; }
  .zw-scene { top: 47%; }
  .zw-rfoot { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 16px 22px; }
  .zw-rcap { align-items: center; }
  .zw-rdate { font-size: 44px; }
  .zw-rtitle { max-width: 80vw; }
  .zw-rnav .zw-round { display: none; }
  .zw-rnav .zw-mono { margin: 0; }
  .zw-swipe { display: inline; }
  .zw-ring.is-dim .zw-stage { transform: translateY(16vh) scale(.85); }
}

/* ---- DETAIL ---- */
.zw-detail { position: fixed; inset: 0; z-index: 40; color: var(--zw-ink); overflow: hidden; }
.zw-detail.is-wall { background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(28px) saturate(1.1); backdrop-filter: blur(28px) saturate(1.1); }
.zw-dback { position: absolute; inset: 0; overflow: hidden; transition: opacity .4s; }
.zw-dback img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(70px) saturate(1.3); }
.zw-dback::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.5); }
.zw-detail.is-ring .zw-dback { display: none; }
.zw-dfig { position: absolute; left: 7vw; top: 8vh; height: 84vh; width: 42vw; display: flex; align-items: center; justify-content: center; perspective: 1400px; }
.zw-dfig > * { max-width: 100%; max-height: 100%; box-shadow: 0 40px 100px rgba(0,0,0,.3); }
.zw-dfig img { display: block; width: auto; height: auto; object-fit: contain; }
.zw-detail.is-ring .zw-dfig > * { transform: rotateY(7deg); }
.zw-dfig .zw-card { height: 100%; aspect-ratio: 3 / 4; width: auto; padding: 24px; }
.zw-dfig .zw-card-t { font-size: 56px; }
.zw-dfig .zw-card-d { font-size: 140px; }
.zw-dpanel { position: absolute; left: 55vw; right: 6vw; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 0 48px; }
.zw-dtop { display: flex; justify-content: space-between; align-items: center; }
.zw-dtop .zw-mono { color: var(--zw-muted); }
.zw-close { width: 48px; height: 48px; border-radius: 50%; background: var(--zw-ground) !important; font-size: 16px; }
.zw-dmain { display: flex; flex-direction: column; gap: 22px; }
.zw-dmeta { margin: 0 0 6px; color: var(--zw-muted); }
.zw-ddate { margin: 0; font-family: var(--md-text-font-family); font-weight: 300; color: var(--zw-muted); font-size: clamp(96px, 12vw, 168px); line-height: .8; letter-spacing: -.02em; }
.zw-dtitle { margin: 8px 0 0; font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -.03em; word-break: break-word; }
.zw-dl { margin: 0; border-bottom: 1px solid var(--zw-line); }
.zw-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--zw-line); }
.zw-dl dt { font-family: var(--md-code-font-family); font-size: 11px; letter-spacing: .12em; flex: none; color: var(--zw-muted); }
.zw-dl dd { margin: 0; text-align: right; font-size: 17px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.zw-dl a { color: var(--zw-accent); }
.zw-dl a:hover, .zw-dl a:focus { color: var(--zw-header); }
.zw-dnav { display: flex; gap: 8px; }
.zw-dnav button { flex: 1 1 0; min-height: 52px; border: 1px solid var(--zw-ink) !important; color: var(--zw-ink); font-family: var(--md-code-font-family); font-size: 12px; letter-spacing: .12em; }
.zw-dnav button[data-d="1"] { background: var(--zw-header); color: var(--zw-on-color); border-color: var(--zw-header) !important; }
.zw-dnav button[data-d="1"]:not(:disabled):hover, .zw-dnav button[data-d="1"]:not(:disabled):active { background: var(--zw-header-dark); border-color: var(--zw-header-dark) !important; }
.zw-dnav button:disabled { opacity: .3; cursor: default; }

@media (orientation: portrait), (max-width: 700px) {
  /* WALL から：上にフライヤー、下に詳細のスクロール */
  .zw-detail.is-wall { overflow-y: auto; background: var(--zw-ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .zw-detail.is-wall .zw-dback { display: none; }
  .zw-detail.is-wall .zw-dfig { position: relative; left: 0; top: 0; width: 100%; height: auto; display: block; }
  .zw-detail.is-wall .zw-dfig > * { box-shadow: none; }
  .zw-detail.is-wall .zw-dfig img { width: 100%; height: auto; max-height: none; }
  .zw-detail.is-wall .zw-dfig .zw-card { width: 100%; height: auto; }
  .zw-detail.is-wall .zw-dpanel { position: static; padding: 22px 20px 96px; }
  .zw-detail.is-wall .zw-close { box-shadow: 0 2px 10px rgba(0,0,0,.15); }
  .zw-detail.is-wall .zw-dnav { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px 20px; background: var(--zw-ground); border-top: 1px solid var(--zw-line); }
  /* RING から：札が上に上がり、下からシート */
  .zw-detail.is-ring .zw-dfig { left: 0; right: 0; width: auto; top: 64px; height: 44vh; }
  .zw-detail.is-ring .zw-dfig > * { transform: rotateX(4deg); }
  .zw-detail.is-ring .zw-dpanel { left: 0; right: 0; top: calc(64px + 44vh + 20px); bottom: 0; padding: 22px 20px 20px; background: var(--zw-ground); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,.08); overflow-y: auto; gap: 16px; }
  /* 共通：番号と閉じるボタンは画面上端に固定 */
  .zw-dtop { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 2; }
  .zw-dtop .zw-mono { background: var(--zw-ground); padding: 6px 10px; border-radius: 999px; }
  .zw-dmain { gap: 14px; }
  .zw-ddate { font-size: 80px; }
  .zw-dtitle { font-size: 28px; }
  .zw-dl dd { font-size: 15px; }
  .zw-dnav button { min-height: 46px; }
  .zw-dfig .zw-card-t { font-size: 34px; }
  .zw-dfig .zw-card-d { font-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .zw *, .zw *::before, .zw *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}