/* Work 그리드·오버레이 상세·프로젝트 페이지 공용. 모서리는 각지게, 그림자 없음. */

/* ── 카드 그리드 ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 40px 24px; padding-block: 40px 64px; }
.card { display: grid; gap: 4px; text-decoration: none; }
.card .cv { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 10px; }
.card .cv img, .card .cv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .cv video { opacity: 0; transition: opacity .25s; }
.card .cv video[src] { opacity: 1; }   /* 클립이 붙으면 포스터 위로 */
.card .cv .mono { position: absolute; top: 12px; color: var(--sub); }
.card .cv .yr { left: 14px; } .card .cv .rt { right: 14px; }
.card .cv img ~ .yr, .card .cv img ~ .rt { color: var(--text); z-index: 1; text-shadow: none; }
.card .tt { position: absolute; left: 14px; right: 14px; bottom: 14px; font: 700 clamp(26px, 3vw, 34px)/1.02 var(--disp); letter-spacing: -.02em; overflow-wrap: anywhere; }
.card .t { font-size: 18px; font-weight: 600; line-height: 1.35; }
.card:hover .t { color: var(--acc); }

/* ── 상세(오버레이·페이지 공통) ── */
.cover { position: relative; height: min(68vh, 620px); overflow: hidden; display: grid; place-items: center; }
.cover.clip { height: auto; aspect-ratio: 16 / 9; display: block; }   /* 포맷 타일: 16:9(폰 1:1)를 폭 전체로 */
.cover .zoom-in { display: block; position: relative; width: 100%; height: 100%; cursor: zoom-in; }
.cover .zoom-in video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .zm { position: absolute; right: 12px; bottom: 12px; padding: 6px 8px; color: var(--d-text); background: rgb(17 18 20 / .6); }
.cover .zoom-in:hover .zm, .cover .zoom-in:focus-visible .zm { color: var(--d-acc); }
@media (max-width: 640px) { .cover.clip { aspect-ratio: 1; } }
/* 상세(시안 4): 다크 한 톤 + 별 하늘 한 장(.dtw .stars). 둘레 여백은 영상·글 모두 같다(위 56 · 옆 40 · 아래 48) */
.dtw { position: relative; background: var(--d-bg); padding: 56px 40px 48px; }
.dtw .stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dtw > *:not(.stars) { position: relative; }
.sheet:has(.dtw) { background: var(--d-bg); }
.sheet:has(.dtw) .open-page { color: var(--d-acc); }
.dtw .dt { padding: 0; }
.dtw figure { margin: 0; }
.dtw .zoom-in { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.dtw figure video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 영상 한 줄: 높이를 같게, 폭은 비율대로(flex-grow = 가로/세로 비). 줄 전체 폭은 '최대 높이 × 비율 합'까지 */
.mrow { --h: min(52svh, 440px); display: flex; gap: 16px; margin: 0 auto 40px; width: min(100%, calc(var(--h) * var(--sum) + 16px * (var(--n) - 1))); }
.mrow figure { flex: var(--a) 1 0; aspect-ratio: var(--a); min-width: 0; }
/* 황금비 그리드: 38.2 : 61.8 */
.gd { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); column-gap: 48px; align-items: start; }
.dh { margin-bottom: 28px; }
.dt .gd .facts { margin-block: 6px 0; grid-template-columns: 1fr; gap: 4px; }
.dt .gd .facts dd { margin-bottom: 14px; }
.dt .gd .lead { margin-top: 0; }
/* 세로·정방 하나: 왼쪽 무대(붙어 있음) + 오른쪽 글 */
.gd.side .stage { position: sticky; top: 0; height: min(calc(100svh - 160px), 620px); display: flex; justify-content: center; }
.gd.side .stage figure { height: 100%; aspect-ratio: var(--a); max-width: 100%; }
#page .gd.side .stage { top: calc(var(--head) + 24px); }
@media (max-width: 760px) {
  .dtw { padding: 24px 16px 32px; }
  .mrow { flex-wrap: wrap; justify-content: center; width: 100%; margin-bottom: 28px; }
  .mrow .mH { flex-basis: 100%; order: -1; }   /* 폰: 가로가 맨 위 한 줄, 세로·정방은 그 아래 */
  .mrow.mix { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); }   /* 폰·섞인 비율: 황금비 2칸(project.js phoneGrid) */
  .mrow.mix figure { aspect-ratio: var(--pa); grid-column: span var(--ps); order: var(--po); }
  .mrow.mix.pair { grid-template-columns: minmax(0, 1.7778fr) minmax(0, 1fr); }   /* 가로 16:9 + 짝 1:1: 폭을 비율대로 → 두 칸 높이가 같다 */
  .dt .gd .aside { order: 2; }   /* 폰: 요약·본문이 먼저, 역할·역량은 뒤 */
  .gd, .gd.side { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .gd.side .stage { position: relative; height: auto; }
  .gd.side .stage figure { height: auto; width: min(100%, calc(min(70svh, 600px) * var(--a))); }   /* 폰: 높이 상한 안에서 화면 폭을 넘지 않게(정방형이 폭을 밀어내던 문제) */
}
/* 크게 보기: 원본 비율 클립을 화면 안에 맞춘다 */
.zoom { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 56px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); background: rgb(17 18 20 / .96); cursor: zoom-out; }
.zoom video { max-width: 100%; max-height: calc(100svh - 80px); width: auto; height: auto; cursor: auto; }
.zoom .close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); min-height: 40px; padding: 0 12px; font: 400 12px/1 var(--mono); letter-spacing: .08em; color: var(--d-text); border: 1px solid var(--d-rule); }
.cover .tt { justify-self: start; align-self: end; padding: 0 var(--gut) 28px; font: 700 var(--t2)/.95 var(--disp); letter-spacing: -.03em; overflow-wrap: anywhere; }
.yt { position: relative; aspect-ratio: 16 / 9; max-width: 56rem; margin-top: 28px; background: var(--d-bg); overflow: hidden; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt .play { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; color: var(--d-text); font: 700 clamp(28px, 4vw, 44px)/1 var(--disp); letter-spacing: -.01em; }
.yt .play .mono { color: var(--d-text); text-align: center; }
.yt .play:hover span:first-child { color: var(--d-acc); }
.yt.off { aspect-ratio: auto; padding: 24px; display: grid; gap: 12px; color: var(--d-text); }
.yt.off a { color: var(--d-acc); }
.back { padding-block: 16px 0; } .back a { text-decoration: none; color: var(--sub); } .back a:hover { color: var(--text); }
.dt { padding-block: 32px 56px; }
.dt .en { font: 700 var(--t3)/1 var(--disp); letter-spacing: -.03em; margin-top: 10px; overflow-wrap: anywhere; }
.dt .ko { margin-top: 10px; font-size: 20px; color: var(--sub); }
.dt .lead { margin-top: 28px; max-width: 40rem; font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; line-height: 1.55; text-wrap: balance; }
.dt .body { margin-top: 14px; max-width: 40rem; line-height: 1.85; }
.facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 14px 24px; max-width: 52rem; margin-block: 32px; }
.facts dd { margin: 0; }
.facts a { color: var(--acc); }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 14px; } }

/* ── 오버레이(iOS App Store 레퍼런스): 카드가 제자리에서 커져 상세가 된다 ── */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; }
.sheet-wrap .ghost { position: fixed; z-index: 1; object-fit: cover; pointer-events: none; }
.sheet-wrap .dim { position: absolute; inset: 0; background: rgb(17 18 20 / .72); }
.sheet { position: absolute; top: 50%; max-height: calc(100% - 48px); left: 50%; width: min(1040px, calc(100% - 2 * var(--gut))); transform: translate(-50%, -50%);   /* 창 가운데 */ overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
/* 닫기 버튼은 높이 0인 sticky 막대에 얹는다(float로 두면 overflow:hidden인 커버가 버튼 폭만큼 좁아진다) */
.sheet .bar { position: sticky; z-index: 3; top: 0; height: 0; }
.sheet .bar .bt { display: none; }   /* 스크롤 제목은 폰에서만(아래 폰 규칙) */
.sheet .close { position: absolute; top: 12px; right: 12px; min-height: 40px; padding: 0 12px; font: 400 12px/1 var(--mono); letter-spacing: .08em; color: var(--d-text); background: rgb(17 18 20 / .6); border: 1px solid var(--d-rule); }
.sheet .open-page { color: var(--acc); }
/* 폰: 상세 높이는 내용만큼(빈 바탕 없음), 길면 안에서 스크롤. 위 16px 띄워 뒤 화면이 비치게(겹친 층이라는 신호).
   CLOSE는 영상 위가 아니라 자기 줄(높이 52, 스크롤해도 위에 고정). 상세 제목이 그 줄 아래로 지나가면 줄 왼쪽에 영문 제목 */
@media (max-width: 640px) {
  .sheet { top: 16px; width: 100%; max-height: calc(100% - 16px); transform: translateX(-50%); }
  .sheet .bar { height: 52px; display: flex; align-items: center; justify-content: flex-end; padding-inline: 8px; background: var(--d-bg); border-bottom: 1px solid var(--d-rule); }
  .sheet .close { position: static; background: none; }
  .sheet .bar .bt { display: block; margin-right: auto; padding-left: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--d-text); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
  .sheet .bar.on .bt { opacity: 1; transform: none; }
  .dtw { padding-top: 20px; }
}