/* ============================================================
   PAGE HERO — 모델 누끼(베스트컷) 아치 스테이지  (t-phero--cut)
   2026-10-02 · _hero_cut_apply.js 가 이 파일을 링크하고 클래스를 붙인다.

   구 t-phero 는 사각 사진을 우측 패널에 깔고 흰 그라데이션으로 녹였다.
   베스트컷은 배경이 없는 투명 누끼라, THEIA 로고의 아치를 무대로 세우고
   인물을 그 안에 세운다. 머리는 아치 위로 살짝 넘치고(깊이감),
   어깨·팔은 아치 기둥선에서 깔끔하게 잘린다(원본 하단·측면 절단선 숨김).
   ⚠ theia-detail.css 의 html[data-theia="detail"] .t-phero-* 규칙보다
     특이도가 높아야 하므로 모든 선택자에 .t-phero--cut 을 함께 건다.
   ============================================================ */
html[data-theia="detail"] section.t-phero.t-phero--cut {
  --arch-in: 9%;          /* 아치 좌우 여백(스테이지 폭 기준) */
  --arch-top: 13%;        /* 아치 꼭대기 높이 — 머리가 이 위로 넘친다 */
  background:
    radial-gradient(60% 90% at 78% 40%, rgba(232,236,242,.55) 0%, rgba(255,255,255,0) 70%),
    #fff;
  min-height: max(460px, min(max(520px, 40vw), calc(100vh - 224px)));
  padding-bottom: clamp(48px, 5.5vw, 80px);
  border-bottom: 1px solid var(--line);
}

/* 스테이지 — 컨테이너(1320) 오른쪽 여백선에 맞춰 세운다 */
html[data-theia="detail"] .t-phero--cut .t-phero-bg {
  top: clamp(24px, 3vw, 44px); bottom: 0;
  right: max(clamp(20px, 5vw, 88px), calc(50% - 660px + clamp(20px, 5vw, 88px)));
  width: min(42%, 540px);
}
/* 아치 면 */
html[data-theia="detail"] .t-phero--cut .t-phero-bg::before {
  content: ""; position: absolute; z-index: 0;
  left: var(--arch-in); right: var(--arch-in); top: var(--arch-top); bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(110% 70% at 50% 18%, #f3f5f8 0%, rgba(243,245,248,0) 62%),
    linear-gradient(180deg, #e8ecf1 0%, #d9dfe7 100%);
}
/* 바깥 선 아치 — 면보다 한 겹 크게, 얇은 먹선 */
html[data-theia="detail"] .t-phero--cut .t-phero-bg::after {
  content: ""; position: absolute; z-index: 0; background: none;
  left: calc(var(--arch-in) - 3.5%); right: calc(var(--arch-in) - 3.5%);
  top: calc(var(--arch-top) - 4%); bottom: 0;
  border: 1px solid rgba(42,42,42,.2); border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
html[data-theia="detail"] .t-phero--cut .t-phero-bg img {
  position: absolute; z-index: 1; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  /* 아치 기둥선 밖은 자르고 위쪽(머리)은 열어 둔다 */
  clip-path: inset(0 var(--arch-in) 0 var(--arch-in));
  filter: drop-shadow(0 24px 30px rgba(28, 36, 52, .10));
  border-radius: 0;
}

/* 가로 구도 컷(누운 포즈 등) — 아치 안을 꽉 채우고 아치 모양으로 자른다 */
html[data-theia="detail"] .t-phero--cut .t-phero-bg.is-wide img {
  inset: auto; top: var(--arch-top); left: var(--arch-in);
  width: calc(100% - 2 * var(--arch-in)); height: calc(100% - var(--arch-top));
  object-fit: cover; object-position: 62% center;
  clip-path: none; border-radius: 999px 999px 0 0; filter: none;
}

html[data-theia="detail"] .t-phero--cut .t-phero-text { max-width: min(560px, 48%); }

/* 태블릿 */
@media (max-width: 1180px) {
  html[data-theia="detail"] .t-phero--cut .t-phero-bg { width: min(44%, 460px); }
  html[data-theia="detail"] .t-phero--cut .t-phero-text { max-width: 51%; }
}

/* 좁은 화면 — 아치를 위로, 텍스트를 아래로 */
@media (max-width: 860px) {
  html[data-theia="detail"] section.t-phero.t-phero--cut {
    --arch-in: 10%; --arch-top: 14%;
    display: block; min-height: auto;
    padding: clamp(20px, 5vw, 32px) 0 clamp(36px, 7vw, 56px);
    background:
      radial-gradient(90% 46% at 50% 26%, rgba(232,236,242,.6) 0%, rgba(255,255,255,0) 72%),
      #fff;
  }
  html[data-theia="detail"] .t-phero--cut .t-phero-bg {
    position: relative; top: auto; right: auto;
    width: min(86vw, 400px); height: clamp(320px, 96vw, 460px);
    margin: 0 auto;
  }
  html[data-theia="detail"] .t-phero--cut .t-phero-bg::after { background: none; }
  html[data-theia="detail"] .t-phero--cut .t-phero-in { padding-top: clamp(22px, 5vw, 32px); }
  html[data-theia="detail"] .t-phero--cut .t-phero-text { max-width: none; }
}