/* 작업물 상세 — 작품 전시형 (01 아파트·건축물 홍보 촬영)
   variant-1.css 의 토큰과 헤더·푸터·오렌지 계층을 그대로 쓴다.
   새 폰트나 새 팔레트를 만들지 않는다. */

.wk-lede {
  padding: clamp(3rem, 8vw, 7rem) var(--v1-gap) clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--v1-line);
}

.wk-title {
  margin-top: var(--v1-space-2);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-display);
  font-weight: 800;
  letter-spacing: var(--v1-tracking-tight);
  line-height: 0.98;
  text-wrap: balance;
}

.wk-lead {
  max-width: 46ch;
  margin-top: var(--v1-space-4);
  color: var(--v1-muted);
  font-size: var(--v1-text-sm);
}

.wk-back {
  display: inline-flex;
  min-height: var(--v1-hit);
  align-items: center;
  margin-top: var(--v1-space-4);
  color: var(--v1-muted);
  font-size: var(--v1-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color 160ms var(--v1-ease);
}

.wk-back:hover {
  color: var(--v1-accent);
}

/* 전시장처럼 한 점씩 크게 건다. 좁은 화면에서는 자연히 한 줄이 된다. */
.wk-gallery {
  display: grid;
  padding: clamp(2rem, 5vw, 4rem) var(--v1-gap);
  gap: clamp(2.5rem, 6vw, 5rem);
}

.wk-piece {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
}

.wk-piece:nth-child(even) {
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}

.wk-piece:nth-child(even) .wk-frame {
  order: 2;
}

.wk-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--v1-line);
  border-radius: var(--v1-radius);
  background: var(--v1-tile);
}

.wk-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 재생 버튼이 액자 전체를 덮는다. 어디를 눌러도 재생된다. */
.wk-play {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  place-items: center;
}

.wk-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.7);
  transition: filter 420ms var(--v1-ease), transform 620ms var(--v1-ease);
}

.wk-play:hover .wk-poster,
.wk-play:focus-visible .wk-poster {
  filter: saturate(1) brightness(0.88);
  transform: scale(1.03);
}

.wk-play__icon {
  position: relative;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid var(--v1-accent);
  border-radius: 999px;
  background: rgb(var(--v1-bg-rgb) / 62%);
  color: var(--v1-accent);
  font-size: 1rem;
  transition: background-color 200ms var(--v1-ease), color 200ms var(--v1-ease);
}

.wk-play:hover .wk-play__icon,
.wk-play:focus-visible .wk-play__icon {
  background: var(--v1-accent);
  color: var(--v1-accent-ink);
}

.wk-play:focus-visible {
  outline: 2px solid var(--v1-accent);
  outline-offset: -4px;
}

/* 썸네일을 못 불러왔을 때. 액자는 비워두지 않고 제목이 읽히게 둔다. */
.wk-frame.is-poster-failed .wk-poster {
  display: none;
}

.wk-frame.is-poster-failed {
  background: var(--v1-tile-hi);
}

.wk-fallback,
.wk-noscript {
  position: absolute;
  inset: auto var(--v1-space-3) var(--v1-space-3);
  display: inline-flex;
  min-height: var(--v1-hit);
  align-items: center;
  justify-content: center;
  padding: 0 var(--v1-space-4);
  border: 1px solid var(--v1-accent);
  border-radius: 999px;
  background: rgb(var(--v1-bg-rgb) / 88%);
  color: var(--v1-text);
  font-size: var(--v1-text-xs);
  font-weight: 700;
  text-align: center;
}

.wk-caption {
  padding-top: var(--v1-space-2);
}

.wk-index {
  color: var(--v1-accent);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-2xs);
  font-weight: 800;
  letter-spacing: 0.2em;
}

.wk-piece__title {
  margin-top: var(--v1-space-2);
  font-size: var(--v1-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wk-note {
  margin-top: var(--v1-space-3);
  color: var(--v1-muted);
  font-size: var(--v1-text-sm);
  line-height: 1.55;
}

/* 빈 상태 — 관리자가 아직 링크를 넣지 않았을 때 */
.wk-empty {
  padding: clamp(3rem, 8vw, 6rem) var(--v1-gap);
  border-bottom: 1px solid var(--v1-line);
  text-align: center;
}

.wk-empty p {
  font-size: var(--v1-text-lg);
}

.wk-empty__sub {
  margin-top: var(--v1-space-3);
  color: var(--v1-muted);
  font-size: var(--v1-text-sm);
}

.wk-empty a {
  border-bottom: 1px solid var(--v1-accent);
  color: var(--v1-accent);
}

/* 마무리 CTA — /1/ 문의 타일과 같은 오렌지 계층 */
.wk-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 var(--v1-gap) var(--v1-gap);
  padding: clamp(2rem, 5vw, 3.5rem) var(--v1-pad);
  border-radius: var(--v1-radius);
  background: var(--v1-accent);
  color: var(--v1-accent-ink);
  gap: var(--v1-space-6);
}

.wk-cta__title {
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
}

.wk-cta__link {
  display: inline-flex;
  min-height: var(--v1-hit);
  align-items: center;
  border-bottom: 2px solid currentColor;
  font-size: var(--v1-text-sm);
  font-weight: 700;
}

.wk-cta a:focus-visible {
  outline: 2px solid var(--v1-accent-ink);
  outline-offset: 2px;
  box-shadow: none;
}

@media (max-width: 899.98px) {
  .wk-piece,
  .wk-piece:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
  }

  .wk-piece:nth-child(even) .wk-frame {
    order: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wk-poster {
    transition-duration: 0.01ms !important;
  }

  .wk-play:hover .wk-poster,
  .wk-play:focus-visible .wk-poster {
    transform: none;
  }
}

/* ── 02 행사·홍보: 사진과 영상 교차 전시 ─────────────────────────
   사진(3.2:1)과 영상(16:9)은 같은 폭에서 높이가 1.8배 차이 난다.
   나란히 세우면 어긋나 보이므로 사진은 캡션과 묶어 라벨판으로 작게 두고
   영상을 주인공으로 크게 건다. 좌우는 번갈아 배치한다. */
.wk-exhibit {
  display: grid;
  padding: clamp(2rem, 5vw, 4rem) var(--v1-gap);
  gap: clamp(3rem, 7vw, 6rem);
}

.wk-pair {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  grid-template-areas: "plate video";
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.wk-pair:nth-child(even) {
  grid-template-areas: "video plate";
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
}

.wk-plate {
  overflow: hidden;
  grid-area: plate;
  border: 1px solid var(--v1-line);
  border-radius: var(--v1-radius);
  background: var(--v1-tile);
}

.wk-still {
  margin: 0;
}

.wk-still img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 300;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.72);
}

.wk-plate__meta {
  padding: var(--v1-pad);
}

.wk-plate__meta .wk-piece__title {
  margin-top: var(--v1-space-2);
}

.wk-plate__tag {
  margin-top: var(--v1-space-4);
  padding-top: var(--v1-space-3);
  border-top: 1px solid var(--v1-line);
  color: var(--v1-muted);
  font-size: var(--v1-text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wk-pair .wk-frame {
  grid-area: video;
}

/* ── 03 공정 기록: 로드맵 + 연혁 ──────────────────────────────
   단계가 시간순으로 이어지는 것이 한눈에 보이도록 선을 세로로 긋는다. */
.wk-road {
  padding: clamp(2rem, 5vw, 4rem) var(--v1-gap);
}

.wk-road__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wk-stage {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: 2.75rem minmax(0, 1fr);
}

.wk-stage__marker {
  position: relative;
  display: flex;
  justify-content: center;
}

/* 단계를 잇는 선. 번호 원 아래에서 시작해 다음 단계로 이어진다.
   마지막 단계 아래로는 긋지 않는다. */
.wk-stage__marker::before {
  position: absolute;
  top: 2.75rem;
  bottom: -1px;
  width: 1px;
  background: var(--v1-line-strong);
  content: "";
}

.wk-stage:last-child .wk-stage__marker::before {
  display: none;
}

/* 점 하나로는 몇 번째 단계인지 읽히지 않는다. 순서가 곧 이 화면의 내용이므로
   번호를 마커에 직접 적는다. */
.wk-stage__num {
  position: relative;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid var(--v1-accent);
  border-radius: 999px;
  background: var(--v1-bg);
  color: var(--v1-accent);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.wk-stage__body {
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.wk-stage__label {
  color: var(--v1-accent);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-2xs);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.wk-stage__body .wk-piece__title {
  margin-top: var(--v1-space-2);
}

.wk-frame--stage {
  max-width: 34rem;
  margin-top: var(--v1-space-4);
}

/* ── 04 VR·일조량: 랜딩 ──────────────────────────────────────
   텍스트만 있으면 다른 세 페이지와 톤이 끊긴다. 상단에 실제 자산을 한 장 건다. */
.wk-hero-still {
  overflow: hidden;
  margin: 0 var(--v1-gap);
  border: 1px solid var(--v1-line);
  border-radius: var(--v1-radius);
}

.wk-hero-still img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 300;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.76);
}

.wk-brief {
  display: grid;
  padding: clamp(2rem, 5vw, 4rem) var(--v1-gap);
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wk-brief__item {
  padding-top: var(--v1-space-4);
  border-top: 2px solid var(--v1-accent);
}

.wk-brief__item .wk-piece__title {
  margin-top: var(--v1-space-2);
}

/* 예제 페이지가 준비되기 전임을 분명히 적는다.
   없는 것을 있는 것처럼 꾸미지 않는다. */
.wk-demo {
  margin: 0 var(--v1-gap);
  padding: clamp(2.5rem, 6vw, 5rem) var(--v1-pad);
  border: 1px dashed var(--v1-line-strong);
  border-radius: var(--v1-radius);
  text-align: center;
}

.wk-demo__tag {
  color: var(--v1-accent);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-2xs);
  font-weight: 800;
  letter-spacing: 0.24em;
}

.wk-demo__title {
  margin-top: var(--v1-space-3);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-xl);
  font-weight: 800;
  letter-spacing: var(--v1-tracking-tight);
}

.wk-demo__lead {
  max-width: 44ch;
  margin: var(--v1-space-4) auto 0;
  color: var(--v1-muted);
  font-size: var(--v1-text-sm);
  word-break: keep-all;
}

@media (max-width: 899.98px) {
  .wk-pair,
  .wk-pair:nth-child(even) {
    grid-template-areas:
      "video"
      "plate";
    grid-template-columns: minmax(0, 1fr);
  }

  .wk-brief {
    grid-template-columns: minmax(0, 1fr);
  }

  .wk-stage {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
}

/* ── Video wall (01, 02 공용) ────────────────────────────────
   타일을 고르면 3x3 으로 커지고 주변이 실제로 밀려난다.
   밀려나는 움직임은 JS 가 FLIP 으로 그리고, 여기서는 최종 배치만 정의한다.
   width/height 를 전이시키지 않는 이유는 매 프레임 레이아웃을 다시 계산하기 때문이다. */
.vw {
  padding: clamp(2rem, 5vw, 4rem) var(--v1-gap);
  border-bottom: 1px solid var(--v1-line);
}

.vw__title {
  margin-top: var(--v1-space-2);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-xl);
  font-weight: 800;
  letter-spacing: var(--v1-tracking-tight);
}

.vw__hint {
  margin-top: var(--v1-space-3);
  color: var(--v1-muted);
  font-size: var(--v1-text-xs);
  word-break: keep-all;
}

.vw__grid {
  display: grid;
  margin: var(--v1-space-6) 0 0;
  padding: 0;
  gap: var(--v1-gap);
  grid-auto-flow: dense;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}

.vw__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  /* FLIP 이 transform 을 직접 다루므로 여기에 transform 전이를 두지 않는다. */
  will-change: transform;
}

/* 선택된 타일이 3x3 을 차지한다. dense 배치라 남는 자리를 뒤 타일이 메운다. */
.vw__cell.is-active {
  z-index: 2;
  grid-column: span 3;
  grid-row: span 3;
}

.vw__tile {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--v1-line);
  border-radius: var(--v1-radius);
  background: var(--v1-tile);
  cursor: pointer;
  /* 확장이 끝나는 흐름과 같은 속도로 밝아진다. 둘이 어긋나면
     크기는 다 커졌는데 색이 따라오는 것처럼 보인다. */
  transition: opacity 1150ms var(--v1-ease), border-color 900ms var(--v1-ease);
}

/* 선택된 타일이 앞으로 나오도록 나머지를 물린다. 아무것도 안 고른 상태에서는
   전부 제 밝기를 유지한다. */
.vw__grid.has-active .vw__cell:not(.is-active) .vw__tile {
  opacity: 0.62;
}

.vw__cell.is-active .vw__tile {
  border-color: var(--v1-line-strong);
  opacity: 1;
}

.vw__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.6);
  transition: filter 1150ms var(--v1-ease), transform 1250ms var(--v1-ease);
}

.vw__cell.is-active .vw__poster,
.vw__tile:hover .vw__poster,
.vw__tile:focus-visible .vw__poster {
  filter: saturate(1) brightness(0.92);
  transform: scale(1.02);
}

.vw__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--v1-space-3) var(--v1-space-4);
  background: linear-gradient(to top, rgb(var(--v1-bg-rgb) / 92%), transparent);
  color: var(--v1-text);
  font-size: var(--v1-text-2xs);
  font-weight: 700;
  text-align: left;
  opacity: 0;
  transition: opacity 900ms var(--v1-ease);
}

/* 작은 타일에서는 제목이 들어갈 자리가 없다. 커졌을 때만 보여준다. */
.vw__cell.is-active .vw__caption,
.vw__tile:focus-visible .vw__caption {
  opacity: 1;
}

.vw__cell.is-active .vw__caption {
  font-size: var(--v1-text-sm);
}

.vw__tile:focus-visible {
  outline: 2px solid var(--v1-accent);
  outline-offset: 2px;
}

.vw__cell.is-poster-failed .vw__poster {
  display: none;
}

.vw__cell.is-poster-failed .vw__caption {
  opacity: 1;
}

.vw__cell.is-unavailable {
  display: none;
}

/* 단일 플레이어 — 타일 바로 아래 */
.vw__player {
  position: relative;
  overflow: hidden;
  margin-top: var(--v1-gap);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--v1-line);
  border-radius: var(--v1-radius);
  background: var(--v1-tile);
}

.vw__player[hidden] {
  display: none;
}

/* 재생을 누르면 플레이어가 스며들듯 나타난다. */
@keyframes vw-player-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vw__player:not([hidden]) {
  animation: vw-player-in 620ms var(--v1-ease) both;
}

.vw__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 899.98px) {
  .vw__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 터치 기기에는 hover 가 없다. 제목이 hover 로만 보이면 아무도 못 본다.
     항상 노출하고 타일이 지나치게 작아지지 않도록 최소 높이를 준다. */
  .vw__cell {
    min-height: 6.5rem;
  }

  .vw__caption {
    opacity: 1;
    font-size: var(--v1-text-2xs);
  }

  /* 선택 여부와 무관하게 포스터가 읽힐 만큼 밝게 둔다. */
  .vw__poster {
    filter: saturate(0.9) brightness(0.78);
  }

  .vw__grid.has-active .vw__cell:not(.is-active) .vw__tile {
    opacity: 0.78;
  }

  /* 3열에서 3x3 은 화면을 전부 차지한다. 확장 폭을 줄여 목록이 남게 한다. */
  .vw__cell.is-active {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 479.98px) {
  .vw__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vw__cell.is-active {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* 모션 축소: 확장은 그대로 일어나되 움직임 없이 즉시 자리를 잡는다.
   JS 도 이 경우 FLIP 측정을 건너뛴다. */
@media (prefers-reduced-motion: reduce) {
  .vw__poster,
  .vw__caption,
  .vw__tile {
    transition-duration: 0.01ms !important;
  }

  .vw__cell.is-active .vw__poster,
  .vw__tile:hover .vw__poster {
    transform: none;
  }

  .vw__player:not([hidden]) {
    animation: none;
  }
}

/* ── 작업물 네비 배너 ────────────────────────────────────────
   메인 /1/ 의 작업물 카드와 같은 계층을 쓴다: 포스터 위에 번호와 제목.
   포스터 원본이 960x300 이라 프레임도 같은 비율로 두어 잘리지 않게 한다. */
.wn {
  margin-top: var(--v1-gap);
}

.wn__list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--v1-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.wn__link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 960 / 300;
  border: 1px solid var(--v1-line);
  border-radius: var(--v1-radius);
  background: var(--v1-tile);
  transition: border-color 320ms var(--v1-ease);
}

.wn__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.5);
  transition: filter 420ms var(--v1-ease);
}

.wn__link:hover .wn__poster,
.wn__link:focus-visible .wn__poster,
.wn__link.is-current .wn__poster {
  filter: saturate(1) brightness(0.82);
}

.wn__body {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--v1-space-2);
  padding: var(--v1-space-3) var(--v1-space-4);
  background: linear-gradient(to top, rgb(var(--v1-bg-rgb) / 90%) 0%, transparent 84%);
}

.wn__index {
  color: var(--v1-accent);
  font-family: var(--v1-font-wide);
  font-size: var(--v1-text-2xs);
  font-weight: 800;
  letter-spacing: 0.16em;
}

.wn__title {
  color: var(--v1-text);
  font-size: var(--v1-text-xs);
  font-weight: 700;
  word-break: keep-all;
}

/* 지금 보고 있는 페이지. 색만 바꾸지 않고 테두리로도 표시해
   색 구분이 어려운 경우에도 알 수 있게 한다. */
.wn__link.is-current {
  border-color: var(--v1-accent);
}

.wn__link.is-current .wn__title {
  color: var(--v1-accent);
}

.wn__link:focus-visible {
  outline: 2px solid var(--v1-accent);
  outline-offset: 2px;
}

/* 좁은 화면은 2열. 가로 스크롤보다 배너가 잘리지 않고 네 개가 모두 보인다. */
@media (max-width: 899.98px) {
  .wn__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wn__poster,
  .wn__link {
    transition-duration: 0.01ms !important;
  }
}