/* ===== 상세페이지 상단 텍스트 블록 =====
   상세페이지 본문과 관리자 폼 미리보기가 공유하는 컴포넌트.

   첫 번째 상세 이미지가 원본 비율로 블록 크기를 정하고, 그 위 좌측 하단에
   상품명·설명이 다크 그라데이션과 함께 오버레이된다(--photo 변형).
   상세 이미지가 없으면 다크 블록 위 텍스트로 대체된다. */
.detail-intro {
  position: relative;
  overflow: hidden;
  background: var(--brand-primary);   /* 사진 없을 때 폴백 배경 */
  color: var(--surface-white);
  font-family: var(--font-display);
  word-break: keep-all;
}

/* 사진 없는 기본 블록 */
.detail-intro__content { padding: 56px 48px; }

/* 사진 오버레이 변형 — 그리드로 사진·그라데이션·텍스트를 한 셀에 겹친다.
   보이지 않는 sizer(고정 비율 --pd-detail-ratio)가 블록의 최소 높이를 정해
   상세 목록 이미지와 같은 직사각형이 되고, 텍스트가 그보다 길면 블록이 늘어난다.
   배경 사진은 object-fit:cover로 블록을 늘 채워(검정 띠 없이) 잘리지 않는다.
   좌표가 아니라 정렬로 좌측 하단에 배치. */
.detail-intro--photo {
  display: grid;
  grid-template-columns: 100%;
}
/* 크기 계산에 참여하는 그리드 항목: 보이지 않는 sizer(고정 비율=최소 높이) + 텍스트.
   블록 높이 = max(고정 비율 높이, 텍스트 높이). */
.detail-intro__sizer {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: var(--pd-detail-ratio);
  visibility: hidden;
}
.detail-intro--photo .detail-intro__content {
  grid-area: 1 / 1;
  align-self: end;         /* 하단 (좌측은 텍스트 기본 정렬) */
  position: relative;
  z-index: 2;
  padding: 52px 48px;
}
/* 배경 사진·그라데이션은 절대배치로 블록을 채운다 — 크기 계산엔 관여하지 않아
   원본이 아무리 커도 sizer가 정한 고정 비율 사각형에 cover로 꽉 찬다. */
.detail-intro__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.detail-intro--photo .detail-intro__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.55) 24%,
    rgba(0, 0, 0, 0.14) 52%,
    rgba(0, 0, 0, 0) 76%
  );
}

.detail-intro__title {
  font-size: 52px; font-weight: 750; line-height: 1.05;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
  /* 큰 볼드 글자의 좌측 side-bearing(≈0.04em)만큼 당겨 본문 첫 글자와 잉크 라인을 맞춘다.
     flex 박스는 이미 좌측 정렬되어 있고, 어긋나 보이는 건 글자 자체 여백 때문. */
  text-indent: -0.04em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.detail-intro__body {
  font-size: 15px; font-weight: 600; line-height: 1.7;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.detail-intro__body p { margin: 0 0 4px; }
.detail-intro__body p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .detail-intro__content { padding: 36px 24px; }
  .detail-intro--photo .detail-intro__content { padding: 28px 22px; }
  .detail-intro__title { font-size: 30px; margin-bottom: 10px; }
  .detail-intro__body { font-size: 13px; }
}