/* ===== 作品詳細ページ ===== */
.work-wrap{max-width:840px;margin:0 auto;padding:0 24px}
.prose{max-width:36em}

.head{margin:96px 0 40px}
.head .eyebrow{
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.72rem;
  letter-spacing:.08em;color:var(--sub);font-feature-settings:'tnum';
}
.head h1{font-size:2rem;font-weight:400;line-height:1.4;margin-top:8px;letter-spacing:.01em}

.hero{margin:0 0 56px}
.hero .media{aspect-ratio:16/9}
.media{background:var(--thumb);overflow:hidden}
.media img,.media iframe{width:100%;height:100%;object-fit:cover;border:0}
.image-zoom-trigger{
  background:transparent;border:0;cursor:zoom-in;display:block;height:100%;padding:0;width:100%
}
.image-zoom-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.media.empty span{
  display:block;padding:8px 10px;
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.7rem;color:var(--sub)
}
.media.video-placeholder{display:grid;place-items:center;position:relative}
.media.video-placeholder .video-thumbnail{inset:0;position:absolute}
.media.empty.video-placeholder span{
  position:relative;z-index:1;padding:6px 9px;background:rgba(0,0,0,.62);color:#fff;text-align:center
}

.image-lightbox{
  background:transparent;border:0;box-sizing:border-box;height:auto;inset:0;margin:0;
  max-height:none;max-width:none;padding:32px;position:fixed;width:auto
}
.image-lightbox[open]{display:grid;place-items:center}
.image-lightbox::backdrop{background:rgba(0,0,0,.68)}
.image-lightbox img{
  border:1px solid #fff;box-sizing:border-box;max-height:calc(100vh - 64px);max-width:100%;
  object-fit:contain
}
.image-lightbox-close{
  background:#fff;border:0;color:#111;cursor:pointer;font-size:0;height:32px;line-height:1;
  position:fixed;right:12px;top:12px;width:32px;z-index:1
}
.image-lightbox-close::before,.image-lightbox-close::after{
  background:currentColor;content:'';height:1.5px;left:50%;position:absolute;top:50%;width:18px;
  transform:translate(-50%,-50%) rotate(45deg)
}
.image-lightbox-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.image-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:3px}

.lead{max-width:100%;font-size:1rem;margin-bottom:48px}
.lead p + p{margin-top:1.2em}

.meta{border-top:1px solid var(--line);margin-bottom:96px}
.meta dl{display:grid;grid-template-columns:10em 1fr}
.meta dt,.meta dd{padding:10px 8px;border-bottom:1px solid var(--line);font-size:.82rem}
.meta dt{font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.72rem;letter-spacing:.08em;color:var(--sub)}
.meta dd a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.meta dd a:hover{text-decoration-color:var(--ink)}

.body-block p{max-width:100%;font-size:.9rem;margin:0 0 1.2em}
.body-block p:last-child{margin-bottom:0}
.body-para{margin:0 0 56px}
.body-row{display:grid;gap:24px;align-items:start;margin:0 0 56px}
.body-row--1{grid-template-columns:1fr}
.body-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.body-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.body-row--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.body-row>*{margin:0;min-width:0}

figure{margin:0 0 56px}
figure .media{aspect-ratio:3/2}
figure:not(.video) .media--aspect-3-2{aspect-ratio:3/2}
figure:not(.video) .media--aspect-16-9{aspect-ratio:16/9}
figure:not(.video) .media--fit-contain img{object-fit:contain}
figure:not(.video) .media--fit-cover img{object-fit:cover}
figure:not(.video) .media--bordered{border:1px solid #000;box-sizing:border-box}
figure.video .media{aspect-ratio:16/9}
figure.embed .fusion-embed{aspect-ratio:4/3}
figure.embed .fusion-embed--4-3{aspect-ratio:4/3}
figure.embed .fusion-embed--16-9{aspect-ratio:16/9}
.media.fusion-embed-placeholder{display:grid;place-items:center}
.media.empty.fusion-embed-placeholder span{text-align:center}
figure.embed .web-app-embed{aspect-ratio:4/3}
figure.embed .web-app-embed--16-9{aspect-ratio:16/9}
figure.embed .web-app-embed--phone{aspect-ratio:9/19.5}
.web-app-browser{--web-app-ratio:calc(16 / 9);width:100%;max-width:min(100%,calc((100svh - 80px) * var(--web-app-ratio) + 2px));min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);margin-inline:auto}
.web-app-browser--4-3{--web-app-ratio:calc(4 / 3)}
.web-app-browser--phone{--web-app-ratio:calc(9 / 19.5);max-width:min(390px,100%,calc((100svh - 80px) * var(--web-app-ratio) + 2px))}
.web-app-toolbar{position:relative;display:flex;align-items:center;gap:0;min-height:44px;padding:0 8px;border-bottom:1px solid var(--line);background:var(--hover)}
.web-app-window-dots{display:flex;gap:5px;flex:none;margin-left:6px;margin-right:auto}
.web-app-window-dots i{width:9px;height:9px;border:1px solid var(--sub);border-radius:50%;opacity:.55}
.web-app-address{position:absolute;left:50%;transform:translateX(-50%);width:max(0px,calc(100% - 176px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;color:var(--sub);text-align:center;pointer-events:none}
.web-app-open,.web-app-expand{display:flex;align-items:center;justify-content:center;width:36px;height:44px;flex:none;color:var(--sub)}
.web-app-expand{appearance:none;border:0;padding:0;background:transparent;cursor:pointer}
.web-app-expand:disabled{cursor:default;opacity:.5}
.web-app-expand[aria-expanded="true"] svg{display:none}
.web-app-expand[aria-expanded="true"]::after{content:'×';font-size:26px;font-weight:300;line-height:1}
a.web-app-open:hover,.web-app-expand:not(:disabled):hover{color:var(--ink);background:var(--paper)}
a.web-app-open:focus-visible,.web-app-expand:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:4px}
.web-app-shell:fullscreen{background:#171717}
.web-app-browser--expanded{
  position:fixed;inset:auto;margin:0;padding:0;z-index:1000;
  left:calc(var(--web-app-view-left,0px) + var(--web-app-view-width,100vw) / 2);
  top:calc(var(--web-app-view-top,0px) + var(--web-app-view-height,100dvh) / 2);
  transform:translate(-50%,-50%);
  width:min(calc(var(--web-app-view-width,100vw) - 24px),calc((var(--web-app-view-height,100dvh) - 72px) * var(--web-app-ratio) + 2px));
  height:auto;min-height:0;max-height:none;max-width:none;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.75)
}
.web-app-browser::backdrop{background:rgba(0,0,0,.75)}
.media.web-app-embed-placeholder{display:grid;place-items:center}
.media.empty.web-app-embed-placeholder span{text-align:center}
figcaption{
  margin-top:10px;
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.78rem;color:var(--sub);
  line-height:1.6;
}
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 56px}
.fig-pair figure{margin:0}

.section-label{
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:1.05rem;font-weight:500;
  letter-spacing:.08em;color:var(--sub);margin:0 0 24px;
}

.credits{border-top:1px solid var(--line);padding-top:24px;margin:96px 0 0;font-size:.82rem;color:var(--sub)}
.credits h2{
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.08em;color:var(--sub);margin-bottom:12px;
}

.pager{
  display:flex;justify-content:space-between;
  margin:96px 0 0;border-top:1px solid var(--line);padding-top:24px;
}
.pager a{display:block}
.pager .dir{font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.7rem;letter-spacing:.08em;color:var(--sub);display:block}
.pager .name{font-size:.95rem}
.pager .prev{text-align:right;margin-left:auto}
.pager a:hover .name{text-decoration:underline;text-underline-offset:3px}

@media (min-width:641px) and (max-width:900px){
  .body-row--3,.body-row--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .head{margin:64px 0 32px}
  .head h1{font-size:1.5rem}
  .meta dl{grid-template-columns:7.5em 1fr}
  .body-row{grid-template-columns:1fr;gap:40px}
  .fig-pair{grid-template-columns:1fr;gap:56px}
  .image-lightbox{padding:16px}
  .image-lightbox img{max-height:calc(100vh - 32px)}
}