/* PL2 works (works.html)
   피그마: PL2 Production (전달) > Works (node 2345:59585), 1920x5242
   - 2열 그리드(각 942px) + 12px 거터, 프레임 좌우 여백 12px → 12+942+12+942+12 = 1920
   - 카드 3종: Small 942x530 / Medium 942x800 / Large 942x1180
   - GNB 는 상단 중앙 고정(피그마 좌표 760,12), 우하단에 맨 위로 버튼 */

.wk-body {
  background: var(--pl2-white);
}

/* Safari 26 은 루트 배경색도 상단/하단 툴바 색 판단에 쓴다 — 투명으로 두지 않는다 */
html:has(.wk-body) {
  background-color: #ffffff;
}

/* 모바일 상태바 띠 (아래 모바일 블록에서만 보인다) */
.wk-statusbar {
  display: none;
}

/* GNB: 스크롤해도 상단에 붙어 있게 fixed (피그마는 프레임 최상단 y=12 에 배치) */
.wk-body .gnb {
  position: fixed;
  top: 12px; /* 12 — GNB 는 화면 폭과 상관없이 고정 크기 (PC 피드백_1007) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

/* ── 그리드 ─────────────────────────────────────────── */
.wk-main {
  /* 1920 초과 화면에서는 카드가 무한히 커지지 않게 피그마 폭에서 멈춘다 */
  max-width: 1920px;
  margin: 0 auto;
  /* 피그마: 섹션이 x=12, y=0 → 좌우 12px 만, 위아래 여백은 없다.
     첫 카드가 화면 최상단에 붙고 그 위로 GNB(top 12)가 겹친다. */
  padding: 0 max(min(0.625vw, 12px), env(safe-area-inset-right, 0px)) 0
    max(min(0.625vw, 12px), env(safe-area-inset-left, 0px));
  /* 푸터가 없어 마지막 카드가 곧 페이지 끝이다. 등장 모션(motion.js)으로 아래에
     내려가 있는 동안 문서 높이가 늘었다가 줄어들지 않게 세로 넘침만 자른다. */
  overflow-y: clip;
}

.wk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(0.625vw, 12px);
  align-items: start;
}

.wk-col {
  display: flex;
  flex-direction: column;
  gap: min(0.625vw, 12px);
}

/* ── 카드 ───────────────────────────────────────────── */
.wk-card {
  position: relative;
  display: block; /* <a> 로 쓸 때도 동일하게 */
  color: inherit;
  text-decoration: none;
  border-radius: var(--pl2-radius);
  overflow: hidden;
  /* 이미지/영상이 없을 때 보이는 자리 */
  background: var(--pl2-gray-placeholder);
  /* 카드 폭 기준으로 오버레이 타이포를 비율 스케일 (942px 에서 피그마 값과 일치).
     제목이 두 줄로 꺾이지 않게 하는 목적도 있다. */
  container-type: inline-size;
}

.wk-card--s {
  aspect-ratio: 942 / 530;
}

/* 크기 3종 (PC 피드백_0930, 피그마 2869:12801): M 800 → 707, L 1180 → 942 */
.wk-card--m {
  aspect-ratio: 942 / 707;
}

.wk-card--l {
  aspect-ratio: 942 / 942;
}

.wk-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dim (피그마 Dim 레이어, Color/Alpha/60). Hover=true 상태에서만 보인다. */
.wk-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pl2-alpha-60);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wk-card:hover::after {
  opacity: 1;
}

/* Overlay (피그마 Overlay: padding 24, gap 8, 좌하단 정렬) */
.wk-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.849cqw; /* 8 / 942 */
  padding: 2.548cqw; /* 24 / 942 */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wk-card:hover .wk-card-overlay {
  opacity: 1;
}

/* Brand Name — 28px Regular, #F5F5F5 (PC 피드백_0930 에서 30 Medium → 28 Regular) */
.wk-card-brand {
  padding-left: 0.212cqw; /* 2 / 942 */
  color: var(--pl2-neutral-90);
  font-size: 2.972cqw; /* 28 / 942 */
  font-weight: 400;
  line-height: 1.2;
}

/* Project Name — 40px/50px SemiBold, 자간 -4% (PC 피드백_0930 에서 44/54 Bold -2% → 40/50 SemiBold -4%) */
.wk-card-project {
  color: var(--pl2-white);
  font-size: 4.246cqw; /* 40 / 942 */
  font-weight: 600;
  line-height: 1.25; /* 50 / 40 */
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* Blur=true 카드 (Fluidic Project). 피그마 Blur 레이어 = 검정 20% + 배경 블러 29.
   에셋(works-06)에도 블러가 구워져 있지만, 이미지가 바뀌어도 블러가 유지되도록
   CSS 로도 한 번 더 건다. 확대해 가장자리가 비치지 않게 scale 을 준다. */
.wk-card--blur .wk-card-media {
  filter: blur(min(1.5313vw, 29.4px));
  transform: scale(1.08);
}

.wk-card--blur::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
}


/* ══ 태블릿·모바일 카드: 이미지 아래 텍스트 ═══════════════════
   호버가 없는 기기에서는 PC 처럼 마우스를 올려야 보이는 텍스트를 볼 수 없다.
   그래서 모바일 시안(피그마 Mo)의 카드 — 이미지(라운드 12) + 그 아래 늘 보이는
   브랜드/프로젝트명 — 를 태블릿에도 쓴다 (대표님 iPad 시연, 2026-10-07).
   1280 미만 창과 호버가 없는 터치 기기(13인치 iPad 가로 1366 포함)에 적용된다.
   태블릿은 2열 배치·PC 이미지 비율을 그대로 두고 카드 모양만 바뀐다. */
@media (max-width: 1279.98px), (hover: none) {
  .wk-card,
  .wk-card--s,
  .wk-card--m,
  .wk-card--l {
    aspect-ratio: auto;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .wk-card-media {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    /* 태블릿 시안(3108:15810)은 PC 12 를 1194/1920 로 줄인 7.46 → 0.625vw. 모바일은 아래에서 12 */
    border-radius: min(0.625vw, 12px);
    background: var(--pl2-gray-placeholder);
  }

  /* 태블릿은 PC 와 같은 비율 (S 942x530 / M 942x707 / L 942x942) */
  .wk-card--s .wk-card-media {
    aspect-ratio: 942 / 530;
  }

  .wk-card--m .wk-card-media {
    aspect-ratio: 942 / 707;
  }

  .wk-card--l .wk-card-media {
    aspect-ratio: 942 / 942;
  }

  /* 호버 Dim 은 없다 */
  .wk-card::after {
    content: none;
  }

  /* Fluidic: 모바일 시안엔 블러 레이어가 꺼져 있고 에셋에 구운 블러만 보인다 */
  .wk-card--blur .wk-card-media {
    filter: none;
    transform: none;
  }

  .wk-card--blur::before {
    content: none;
  }

  /* Overlay: 이미지 아래 텍스트. padding 16 8, gap 8 (L 은 4) */
  .wk-card-overlay {
    position: static;
    gap: 8px;
    padding: 16px 8px;
    opacity: 1;
  }

  .wk-card--l .wk-card-overlay {
    gap: 4px;
  }

  /* Brand 16 Regular #303030 */
  .wk-card-brand {
    padding-left: 2px;
    color: #303030;
    font-size: 16px;
    line-height: 1.2;
  }

  /* Project 20/28 SemiBold -4% #000. 좁은 카드에서 긴 제목은 두 줄로 꺾인다 */
  .wk-card-project {
    color: var(--pl2-black);
    font-size: 20px;
    line-height: 28px;
    white-space: normal;
  }
}

/* ══ 모바일 (PC 피드백_1007, 피그마 Mo 3108:15815, 390 폭) ═══════════
   태블릿(피그마 Tablet 3108:15810)은 PC 2열 그리드를 그대로 비율 축소한 안이라
   배치는 위 vw 규칙 그대로다. 모바일은 배치도 바뀐다:
   - 1열, 좌우 20 / 위 100 (GNB 위 20 + 바 60 + 20) / 아래 12, 카드 간격 12
   - 카드 = 이미지 + 아래 텍스트 (태블릿과 공유, 위 카드 블록)
   - 이미지 비율: L 350x525 / M 350x350 / S 350x197
   - 순서는 PC 두 열을 섞은 피그마 Mo 순서 (아래 order)
   경계는 600 이다. 처음엔 768 로 잡았는데 Galaxy Tab S9 세로가 화면 배율 때문에
   CSS 폭 700 대로 잡혀 모바일로 떨어졌다. 폰은 넓어도 430 남짓이라 600 아래만 모바일. */
@media (max-width: 599.98px) {
  /* 시안의 위 60 은 폰 상태바(배터리·시간) 자리를 포함한 값이었다 (박은비 님 피드백).
     iOS Safari 는 페이지를 상태바 뒤까지 그리는데, 기본 설정에선 top 0 이 상태바 "아래"라
     흰 띠가 상태바를 못 덮고 카드가 상태바 뒤로 비쳤다 (실기기 확인).
     그래서 works.html 에 viewport-fit=cover 를 줘 top 0 을 화면 맨 위로 맞추고,
     상태바 높이(env(safe-area-inset-top))를 더해 띠·GNB·첫 카드 위치를 잡는다.
     상태바가 없는 기기·브라우저에선 env 값이 0 이라 20 / 100 그대로다. */
  .wk-body .gnb {
    top: calc(20px + env(safe-area-inset-top, 0px));
    --gnb-drop-space: calc(100dvh - 124px - env(safe-area-inset-top, 0px));
  }

  /* 상태바부터 GNB 위쪽 모서리까지 흰색으로 덮는다 — 스크롤한 카드가 비치지 않게.
     ⚠ 배경색을 이 fixed 요소 자신에 둬야 Safari 가 상태바 색으로 읽는다
       (자식·가상 요소의 배경, pointer-events: none 은 인식 안 됨) */
  .wk-statusbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99; /* GNB(100) 바로 아래 */
    /* GNB 위쪽 라운드 모서리까지(위 20 + 라운드 12) 덮는다. 위 20 에서 끊으면 위 모서리 바깥으로
       스크롤한 카드가 비쳐 보였다. 아래쪽 모서리는 비쳐도 된다 (박은비 님 피드백) */
    height: calc(32px + env(safe-area-inset-top, 0px));
    background-color: #ffffff;
  }

  /* 처음 화면에서 첫 카드가 GNB 에 가려지지 않게: 위 20 + GNB 60 + 간격 20 = 100 */
  .wk-main {
    padding: calc(100px + env(safe-area-inset-top, 0px)) 20px
      calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .wk-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* 모바일 시안은 라운드 12 고정 */
  .wk-card-media {
    border-radius: 12px;
  }

  /* 모바일 이미지 비율: L 350x525 / M 350x350 / S 350x197 */
  .wk-card--s .wk-card-media {
    aspect-ratio: 350 / 197;
  }

  .wk-card--m .wk-card-media {
    aspect-ratio: 350 / 350;
  }

  .wk-card--l .wk-card-media {
    aspect-ratio: 350 / 525;
  }

  /* 두 열 껍데기를 풀어 카드 14장을 한 줄로 세운다 */
  .wk-col {
    display: contents;
  }

  /* 피그마 Mo 순서: 한화 · JYP · 경기도 · GenAI · 신세계 · Dev Platform · AI Film ·
     CJ · 하루하루 · Matièr · Evercell · Samsung Internet · SmartThings · Fluidic */
  .wk-col:first-child > :nth-child(1) { order: 1; }
  .wk-col:last-child > :nth-child(1) { order: 2; }
  .wk-col:first-child > :nth-child(2) { order: 3; }
  .wk-col:last-child > :nth-child(2) { order: 4; }
  .wk-col:last-child > :nth-child(3) { order: 5; }
  .wk-col:first-child > :nth-child(3) { order: 6; }
  .wk-col:last-child > :nth-child(4) { order: 7; }
  .wk-col:first-child > :nth-child(4) { order: 8; }
  .wk-col:last-child > :nth-child(5) { order: 9; }
  .wk-col:first-child > :nth-child(5) { order: 10; }
  .wk-col:last-child > :nth-child(6) { order: 11; }
  .wk-col:first-child > :nth-child(6) { order: 12; }
  .wk-col:first-child > :nth-child(7) { order: 13; }
  .wk-col:last-child > :nth-child(7) { order: 14; }
}