/* WORKS — 목록·상세 (content.css 위에 얹는 페이지 전용 규칙) */
.works-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.works-head h2{margin:0;font-size:2.2rem;font-weight:600;letter-spacing:-.02em}
.works-head p{margin:0;color:var(--mut-2);font-size:var(--text-sm)}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,3vw,4rem)}
.works-grid>.work-card{grid-column:auto;grid-row:auto}
.work-card{display:block;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);transition:transform .3s var(--ease-2),border-color .3s}
.work-card:hover,.work-card:focus-visible{transform:translateY(-.3rem);border-color:var(--accent-line)}
.work-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.work-thumb{aspect-ratio:4/3;overflow:hidden;background:#26272c}
.work-thumb img{width:100%;height:100%;object-fit:cover}
.work-meta{display:flex;justify-content:space-between;gap:var(--space-3);align-items:baseline;padding:var(--space-4) var(--space-5) var(--space-5)}
.work-meta strong{display:block;font-size:1.7rem;font-weight:600;letter-spacing:-.01em}
.work-meta span{display:block;margin-top:.3rem;color:var(--mut);font-size:var(--text-sm)}
.work-meta .work-arrow{flex:none;margin-top:0;color:var(--accent-hi)}

.work-back{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--target-min);margin-bottom:var(--space-3);color:var(--mut-2);font-size:var(--text-sm);transition:color .3s}
.work-back:hover,.work-back:focus-visible{color:var(--accent-hi)}
.work-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.8rem 2.4rem;margin-bottom:var(--space-6)}
.work-head h1{margin:0;font-size:clamp(2.8rem,3.4vw,3.8rem);font-weight:300;line-height:1.2;letter-spacing:-.03em}
.work-head p{margin:0;max-width:60ch;color:var(--mut);font-size:1.5rem}
.work-video-box{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:#000}
.work-video-box video{width:100%;height:100%;object-fit:contain;background:#000}
.work-video-fallback{position:absolute;inset:0;display:none;align-items:flex-end;padding:1.6rem;background:#000 center/contain no-repeat;color:var(--ink);font-size:var(--text-sm)}
.work-video-fallback.on{display:flex}
.work-video-fallback span{padding:.6rem 1rem;border-radius:.6rem;background:rgba(6,9,16,.85)}
.work-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem;margin:1rem .2rem 2.8rem;color:var(--mut);font-size:var(--text-sm)}
.work-caption-links{display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.work-caption a{color:var(--accent-hi)}
.work-caption a:hover,.work-caption a:focus-visible{text-decoration:underline;text-underline-offset:.4rem}
.work-shots{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:0;line-height:0}
.work-shots img{display:block;width:100%;height:auto;margin:0;object-fit:contain}
.work-credits{display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;margin:2.8rem 0 0;color:var(--mut);font-size:var(--text-sm)}
.work-credits div{display:flex;gap:.8rem}
.work-credits dt{font-weight:600;color:var(--ink)}
.work-credits dd{margin:0}
.work-actions{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:4.8rem;padding-top:3.2rem;border-top:1px solid var(--line)}
.work-others{margin-top:6.4rem}
.work-others h2{margin:0 0 2.4rem;font-size:2.2rem;font-weight:600}

@media(max-width:760px){
  .works-grid{grid-template-columns:1fr}
  .work-head{display:block}
  .work-head p{margin-top:1rem}
}
@media(prefers-reduced-motion:reduce){
  .work-card,.work-card:hover,.work-card:focus-visible{transform:none;transition:none}
}