/* 프로젝트 상세 페이지 스타일(셀루닉·웰니스 + Figma 포트폴리오 상세 6종). 값 옆 주석은 px 환산입니다. 시안은 1920 기준입니다. */

/* 페이지 전체 틀 */
.work-page {
  padding-top: var(--site-header-height);
  overflow-x: hidden;
}

/* ===== 히어로 (상단 큰 사진 + 제목) ===== */
.work-hero {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 120rem; /* 1920px */
  height: 47.5rem; /* 760px */
  overflow: hidden;
  background-color: #000;
}
.work-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 셀루닉: 배경 사진은 1920×1280을 위로 229px 올려 배치 */
.work-hero--celluniq .work-hero__bg {
  top: -14.3125rem; /* -229px */
  height: 80rem; /* 1280px */
}
/* 웰니스: 배경 사진은 1920×1079를 위부터 보여 주고 아래를 자른다 */
.work-hero--wellness .work-hero__bg {
  height: 67.4375rem; /* 1079px */
}
/* 셀루닉: 제품 누끼 사진 — 오른쪽으로 화면 밖까지 걸친다 */
.work-hero__product {
  position: absolute;
  top: 8.8125rem; /* 141px */
  left: 37.925rem; /* 606.8px */
  width: 87.075rem; /* 1393.2px */
  height: 45.3125rem; /* 725px */
  overflow: hidden;
}
.work-hero__product img {
  position: absolute;
  top: -39.8%;
  left: 0;
  width: 100%;
  height: 139.8%;
  max-width: none;
}
/* 히어로 글 영역 — 세로 가운데 */
.work-hero__text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 102.5rem; /* 1640px */
  max-width: calc(100% - 2rem);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 4.5rem; /* 72px */
  color: var(--color-gray-black);
}
.work-hero--dark .work-hero__text { color: #fff; }
/* 히어로 제목 (62px) */
.work-hero__title {
  font-size: 3.875rem; /* 62px */
  line-height: 5.375rem; /* 86px */
  font-weight: 600;
  letter-spacing: -0.03125rem; /* -0.5px */
  white-space: nowrap;
}
/* 히어로 아래 메타(기간 · 고객사 · 유형) 20px */
.work-hero__meta {
  display: flex;
  gap: 4.375rem; /* 70px */
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
  font-weight: 500;
  color: var(--color-gray-80);
  white-space: nowrap;
}
.work-hero--dark .work-hero__meta { color: var(--color-gray-20); }

/* ===== 본문 ===== */
.work-body {
  margin-inline: auto;
  width: 100%;
  max-width: 120rem; /* 1920px */
  padding: 6.25rem 8.75rem; /* 100px 140px */
  background-color: #fff;
}
/* Overview 줄: 왼쪽 제목 + 오른쪽 설명(840px) */
.work-overview {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  color: var(--color-gray-black);
}
.work-overview__title {
  font-size: 1.5rem; /* 24px */
  line-height: 2.25rem; /* 36px */
  font-weight: 600;
  letter-spacing: -0.03125rem; /* -0.5px */
  white-space: nowrap;
}
.work-overview__text {
  width: 52.5rem; /* 840px */
  max-width: 60%;
  font-size: 1.125rem; /* 18px */
  line-height: 1.6875rem; /* 27px */
  font-weight: 400;
}

/* 이미지 묶음 공통 — 이미지는 칸을 가득 채운다 */
.work-figure {
  display: block;
  overflow: hidden;
}
.work-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1번째 이미지 묶음: 큰 사진 + 오른쪽 작은 사진 2장 */
.work-sec1 {
  margin-top: 6.25rem; /* 100px */
  display: grid;
  gap: 0.625rem; /* 10px */
}
.work-sec1--celluniq { grid-template-columns: 1150fr 480fr; height: 50.375rem; /* 806px */ }
.work-sec1--wellness { grid-template-columns: 1000fr 630fr; height: 46.875rem; /* 750px */ }
.work-sec1__col {
  display: grid;
  gap: 0.625rem; /* 10px */
}
.work-sec1--celluniq .work-sec1__col { grid-template-rows: 394fr 402fr; }
.work-sec1--wellness .work-sec1__col { grid-template-rows: 502fr 238fr; }

/* 큰 가로 이미지 한 장 */
.work-wide {
  margin-top: 6.25rem; /* 100px */
}
.work-wide--video { aspect-ratio: 1640 / 1025; }
.work-wide--big { aspect-ratio: 1640 / 922; }

/* 가운데 설명문 (1220px, 18px) */
.work-desc {
  margin: 6.25rem auto 0; /* 100px */
  width: 76.25rem; /* 1220px */
  max-width: 100%;
  text-align: center;
  font-size: 1.125rem; /* 18px */
  line-height: 1.6875rem; /* 27px */
  color: var(--color-gray-black);
}

/* 3번째 묶음(셀루닉): 사진 두 장 나란히 */
.work-sec3 {
  margin-top: 6.25rem; /* 100px */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem; /* 10px */
  height: 57.375rem; /* 918px */
}

/* 사진 두 장 + 오른쪽 글(웰니스) */
.work-pair {
  margin-top: 6.25rem; /* 100px */
  display: grid;
  grid-template-columns: 990fr 580fr;
  gap: 4.375rem; /* 70px */
  align-items: center;
}
.work-pair__images { aspect-ratio: 990 / 784; }
.work-pair__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 25.375rem; /* 406px */
  color: var(--color-gray-black);
}
/* 작은 제목 (25px) */
.work-pair__title {
  font-size: 1.5625rem; /* 25px */
  line-height: 2rem; /* 32px */
  font-weight: 700;
  letter-spacing: -0.03125rem; /* -0.5px */
}
/* 본문 (18px) */
.work-pair__body {
  font-size: 1.125rem; /* 18px */
  line-height: 2rem; /* 32px */
  letter-spacing: -0.0225rem; /* -0.36px */
}

/* 전폭 가로 띠 이미지(웰니스 숲 카드) — 본문 여백 밖까지 양쪽으로 펼친다 */
.work-strip {
  margin-top: 6.25rem; /* 100px */
  margin-inline: -8.75rem; /* -140px */
  height: 34.875rem; /* 558px */
}
.work-strip img { object-fit: cover; object-position: center; }

/* 이전·다음 프로젝트 */
.work-nav {
  margin-top: 6.25rem; /* 100px */
  padding: 6.25rem 0; /* 100px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem;
}
.work-nav__item {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
  text-decoration: none;
  color: var(--color-gray-black);
}
.work-nav__item--next { align-items: flex-end; text-align: right; }
.work-nav__label {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  font-size: 1.125rem; /* 18px */
  line-height: 1.6875rem; /* 27px */
  color: var(--color-gray-70);
}
.work-nav__label img { width: 1.5rem; height: 1.5rem; }
.work-nav__label--prev img { transform: scaleX(-1); } /* 같은 화살표를 좌우 뒤집어 PREV에 쓴다 */
/* 이전·다음 프로젝트 제목 (28px) */
.work-nav__title {
  font-size: 1.75rem; /* 28px */
  line-height: 2.25rem; /* 36px */
  font-weight: 700;
  letter-spacing: -0.025rem; /* -0.4px */
}

/* ===== 1280 미만: 여백·크기 축소 (시안 없음 — 비율 유지용) ===== */
@media (width < 80rem) {
  .work-hero { height: 40rem; /* 640px */ }
  .work-hero__title { font-size: 3rem; line-height: 4rem; white-space: normal; }
  .work-body { padding: 4rem 2rem; }
  .work-strip { margin-inline: -2rem; }
  .work-sec1--celluniq, .work-sec1--wellness { height: auto; }
  .work-sec1--celluniq > .work-figure { aspect-ratio: 1150 / 806; }
  .work-sec1--wellness > .work-figure { aspect-ratio: 1000 / 750; }
  .work-sec3 { height: auto; }
  .work-sec3 .work-figure { aspect-ratio: 815 / 918; }
}
/* ===== 767 이하: 한 열로 쌓기 ===== */
@media (width < 48rem) {
  .work-hero { height: 30rem; }
  .work-hero__title { font-size: 2rem; line-height: 2.75rem; }
  .work-hero__text { gap: 2rem; }
  .work-hero__meta { flex-wrap: wrap; gap: 1rem 2rem; font-size: 1rem; }
  .work-hero__product { left: 20%; width: 120%; top: 30%; height: 70%; }
  .work-body { padding: 3rem 1rem; }
  .work-strip { margin-inline: -1rem; height: 20rem; }
  .work-overview { flex-direction: column; }
  .work-overview__text { width: 100%; max-width: none; }
  .work-sec1--celluniq, .work-sec1--wellness, .work-sec3, .work-pair { grid-template-columns: 1fr; }
  .work-sec1__col { grid-template-rows: none !important; }
  .work-sec1__col .work-figure { aspect-ratio: 480 / 400; }
  .work-sec1--wellness .work-sec1__col .work-figure:first-child { aspect-ratio: 630 / 502; }
  .work-sec1--wellness .work-sec1__col .work-figure:last-child { aspect-ratio: 630 / 238; }
  .work-pair__text { min-height: 0; gap: 2rem; }
  .work-nav { padding: 3rem 0; }
  .work-nav__title { font-size: 1.25rem; line-height: 1.75rem; }
}

/* ===== 프로젝트 상세 공통(Figma 포트폴리오_1005) — 연금·Super SOL·디지털채널·모션·웹모바일·시니어 ===== */
/* 히어로: 제품 사진까지 들어간 배경 이미지 한 장(hero-bg.webp)을 깔고 글만 HTML로 */
.work-hero--figma { background-color: var(--color-gray-10); }
.work-hero--figma .work-hero__bg { object-position: center; }
.work-hero--tall { height: 51.375rem; /* 822px — Super SOL 상세 */ }

/* 이미지 묶음(콜라주): 시안 좌표를 %로 옮겨 화면 폭에 맞춰 같은 비율로 줄어든다 */
.work-collage {
  position: relative;
  margin-top: 6.25rem; /* 100px */
  aspect-ratio: var(--ar);
  overflow: hidden;
}
.work-collage > .work-figure {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--cw);
  height: var(--ch);
  border-radius: 0.125rem; /* 2px */
}
.work-figure.work-wide { border-radius: 0.125rem; }

@media (width < 80rem) {
  .work-hero--tall { height: 40rem; }
}
/* 767 이하: 콜라주 이미지를 한 장씩 위아래로 쌓는다 */
@media (width < 48rem) {
  .work-hero--tall { height: 30rem; }
  .work-hero--figma .work-hero__bg { object-position: 70% center; }
  .work-collage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    overflow: visible;
  }
  .work-collage > .work-figure {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ar);
  }
  .work-wide, .work-collage { margin-top: 3rem; }
}