/* ================================
   Design Works Detail Page
================================ */

.work-detail-page .container {
  width: min(calc(100% - (var(--side) * 2)), 1440px);
}

/* ================================
   Hero
================================ */
.work-detail-hero {
  background: #fff;
  padding-block: clamp(112px, 13vw, 170px) clamp(96px, 11vw, 132px);
}

.work-detail-hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 44%);
  gap: clamp(46px, 8vw, 110px);
  align-items: start;
}

.work-detail-hero h1 {
  margin: 0 0 34px;
  font-family: var(--font-en);
  font-size: clamp(64px, 10vw, 108px);
  line-height: .95;
}

.work-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
}

.work-detail-back::before {
  content: "←";
  font-size: 1.15em;
  line-height: 1;
}

.work-detail-meta {
  margin: 2px 0 0;
  display: grid;
  gap: 22px;
}

.work-detail-meta div,
.work-detail-meta dt,
.work-detail-meta dd {
  margin: 0;
}

.work-detail-meta dt {
  margin-bottom: 6px;
  font-family: var(--font-en);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.work-detail-meta dd {
  font-family: var(--font-en);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.35;
}

/* ================================
   Showcase Layout
================================ */
.work-showcase {
  background: #f6f6f6;
  padding-block: clamp(92px, 9vw, 120px) clamp(100px, 13vw, 168px);
}

/* 1440px container의 양 끝에 맞춤 */
.work-showcase__inner {
  display: grid;
  grid-template-columns: 43.75% 46.52%;
  justify-content: space-between;
  align-items: start;
  column-gap: 0;
}

/* 공통 이미지 */
.showcase-block > img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 8px 12px 18px rgba(0, 0, 0, .16);
}

/* ================================
   Label: line top + text bottom
================================ */
.showcase-label {
  position: relative;
  display: block;
  padding-top: 18px;
  font-family: var(--font-en);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  white-space: nowrap;
}

.showcase-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #111;
}

.showcase-label--left {
  text-align: left;
}

.showcase-label--right {
  text-align: right;
}

/* ================================
   BRAND STORE
   라벨 왼쪽 / 이미지 오른쪽
   왼쪽 라벨 시작점 = 1440px container 왼쪽 라인
================================ */
.showcase-block--brand {
  display: grid;
  grid-template-columns: clamp(120px, 11.8vw, 170px) minmax(0, 1fr);
  align-items: start;
}

.showcase-block--brand .showcase-label {
  grid-column: 1;
  grid-row: 1;
}

.showcase-block--brand > img {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}

/* ================================
   Right Area
================================ */
.showcase-right {
  display: grid;
  gap: clamp(150px, 14vw, 210px);
  align-items: start;
}

/* ================================
   LISTING
   이미지 왼쪽 / 라벨 오른쪽
   오른쪽 라벨 끝점 = 1440px container 오른쪽 라인
================================ */
.showcase-block--listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 11.8vw, 170px);
  align-items: start;
  width: 100%;
}

.showcase-block--listing .listing-grid {
  grid-column: 1;
  grid-row: 1;
}

.showcase-block--listing .showcase-label {
  grid-column: 2;
  grid-row: 1;
}

/* ================================
   A+ CONTENTS
   이미지 왼쪽 / 라벨 오른쪽
================================ */
.showcase-block--a-plus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 11.8vw, 170px);
  align-items: start;
  width: 100%;
}

.showcase-block--a-plus > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.showcase-block--a-plus .showcase-label {
  grid-column: 2;
  grid-row: 1;
}

/* ================================
   LISTING Grid
   이미지 원본 비율 유지
   정방형 / 세로형 이미지 모두 대응
================================ */
.listing-grid {
  --listing-cols: 3;

  display: grid;
  grid-template-columns: repeat(var(--listing-cols), 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: none;
}

.listing-grid[data-count="6"],
.listing-grid[data-count="7"],
.listing-grid[data-count="8"],
.listing-grid[data-count="9"] {
  width: 100%;
}

.listing-grid li {
  align-self: start;
  overflow: hidden;
  background: #fff;
  box-shadow: 6px 8px 14px rgba(0, 0, 0, .13);
}

.listing-grid img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: none;
}

/* ================================
   Responsive
================================ */
@media (max-width: 960px) {
  .work-detail-hero__inner,
  .work-showcase__inner {
    grid-template-columns: 1fr;
  }

  .work-detail-meta {
    max-width: 540px;
  }

  .showcase-block--brand,
  .showcase-block--listing,
  .showcase-block--a-plus {
    grid-template-columns: 1fr;
    max-width: 520px;
    width: 100%;
  }

  .showcase-block--brand .showcase-label,
  .showcase-block--listing .showcase-label,
  .showcase-block--a-plus .showcase-label {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 16px;
  }

  .showcase-block--brand > img,
  .showcase-block--listing .listing-grid,
  .showcase-block--a-plus > img {
    grid-column: 1;
    grid-row: auto;
  }

  .showcase-label--left,
  .showcase-label--right {
    text-align: left;
  }

  .showcase-right {
    gap: 96px;
    margin-top: 96px;
  }
}

@media (max-width: 760px) {
  .work-showcase {
    padding-block: 64px 100px;
  }

  .showcase-label {
    padding-top: 14px;
    font-size: 20px;
  }

  .showcase-label::before {
    height: 1px;
  }

  .showcase-right {
    gap: 72px;
    margin-top: 72px;
  }

  .listing-grid,
  .listing-grid[data-count="6"],
  .listing-grid[data-count="7"],
  .listing-grid[data-count="8"],
  .listing-grid[data-count="9"] {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .listing-grid li {
    align-self: start;
    box-shadow: 5px 7px 12px rgba(0, 0, 0, .12);
  }

  .listing-grid img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}