/* C3 HERO 사선 그라데이션 비교 시안 A·B·C — body.c3-hd 한정(별도 시안 페이지). 4350 메인·design-c3.css·동결본 미수정.
   목적: 왼쪽 아래 하늘의 검은 막 제거 + 건물 지붕선(왼쪽 아래→오른쪽 위)에 수직인 방향으로 딥네이비를 건물 중앙→오른쪽 끝·아래로 점증.
   기하: 지붕선 기울기는 사진 고유값이라 해상도가 달라도 각도는 같고, 시작 위치(--hd-t0)만 해상도별로 맞춘다.
   원본 사진 위치·크기·문구·버튼·타이틀 위치는 변경하지 않는다(오버레이 의사요소만 교체). */
body.c3-hd {
  --hd-navy: 4, 9, 24;
  --hd-ang: 158deg;           /* PC: 지붕선(≈22° 상승)에 수직, 오른쪽 아래 방향 */
  --hd-t0: .33;               /* 오버레이 시작(지붕선 바로 아래) */
  --hd-k: 1;                  /* 강도 계수 (시안별) */
  --hd-bottom: .30;           /* 아래쪽 보강 최대 알파 */
}
body.c3-hd.c3-hd-a { --hd-k: .68; --hd-bottom: .46; }
body.c3-hd.c3-hd-b { --hd-k: .92; --hd-bottom: .62; }
body.c3-hd.c3-hd-c { --hd-k: 1.12; --hd-bottom: .76; }

/* 1) 기존 세로 전면 오버레이(::after) → 사선 그라데이션으로 교체 */
body.c3-home.c3-hd main > .hero > .c3-hero__media::after {
  content: ''; display: block; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--hd-ang),
    rgba(var(--hd-navy), 0) 0%,
    rgba(var(--hd-navy), 0) calc(var(--hd-t0) * 100%),
    rgba(var(--hd-navy), calc(.16 * var(--hd-k))) calc((var(--hd-t0) + .05) * 100%),
    rgba(var(--hd-navy), calc(.38 * var(--hd-k))) calc((var(--hd-t0) + .14) * 100%),
    rgba(var(--hd-navy), calc(.60 * var(--hd-k))) calc((var(--hd-t0) + .28) * 100%),
    rgba(var(--hd-navy), calc(.76 * var(--hd-k))) calc((var(--hd-t0) + .45) * 100%),
    rgba(var(--hd-navy), calc(.86 * var(--hd-k))) 100%);
}
/* 2) 아래쪽 보강(::before) — 왼쪽 하늘에는 닿지 않도록 가로 마스크로 왼쪽을 비운다 */
body.c3-home.c3-hd main > .hero > .c3-hero__media::before {
  content: ''; display: block; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--hd-navy), 0) 48%, rgba(var(--hd-navy), calc(var(--hd-bottom) * .5)) 74%, rgba(var(--hd-navy), var(--hd-bottom)) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 46%);
  mask-image: linear-gradient(90deg, transparent 6%, #000 46%);
}
@media (min-width: 120rem) { body.c3-hd { --hd-t0: .34; } }
/* 3) 타이틀·설명 가독성 — 기존 텍스트 스크림(.hero__copy::before) 중심만 시안 강도에 맞춰 보강, 글자 위치·크기는 불변 */
body.c3-hd.c3-hd-a { --hd-scrim: .64; }
body.c3-hd.c3-hd-b { --hd-scrim: .72; }
body.c3-hd.c3-hd-c { --hd-scrim: .80; }
body.c3-home.c3-hd .hero .hero__copy::before {
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(var(--hd-navy), var(--hd-scrim)) 0%, rgba(var(--hd-navy), calc(var(--hd-scrim) * .88)) 30%, rgba(var(--hd-navy), calc(var(--hd-scrim) * .58)) 58%, rgba(var(--hd-navy), calc(var(--hd-scrim) * .22)) 80%, rgba(var(--hd-navy), 0) 100%);
}
@media (max-width: 47.99rem) {
  body.c3-hd { --hd-ang: 168deg; --hd-t0: .30; }
  body.c3-hd.c3-hd-a { --hd-k: .72; --hd-bottom: .50; --hd-scrim: .62; }
  body.c3-hd.c3-hd-b { --hd-k: .95; --hd-bottom: .66; --hd-scrim: .70; }
  body.c3-hd.c3-hd-c { --hd-k: 1.15; --hd-bottom: .80; --hd-scrim: .78; }
  body.c3-home.c3-hd main > .hero > .c3-hero__media::before { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   C2 (C 개선안) — 타이틀 주변 스포트라이트 제거, 건물 전체를 하나의 연속된 어두운 영역으로
   - .hero__copy::before(텍스트 스크림) 완전 제거: 글자 주변 원형·타원형 음영 없음
   - 지붕선(--hd-rf) 위쪽으로 넓게 번지는 깃털 구간 → 지붕선에서 빠르게 딥네이비 → 건물 중앙·타이틀 뒤·오른쪽 끝까지 완만히 점증
   - 글자 색·크기·위치·그림자는 기존(승인 대기 포함 현재 CSS) 그대로, 손대지 않음
   ========================================================================== */
body.c3-hd.c3-hd-c2 { --hd-rf: .375; }                 /* 지붕선 위치(그라데이션 선상 비율) — 해상도 단계별 */
@media (min-width: 100rem) { body.c3-hd.c3-hd-c2 { --hd-rf: .39; } }
@media (min-width: 118rem) { body.c3-hd.c3-hd-c2 { --hd-rf: .40; } }
body.c3-home.c3-hd.c3-hd-c2 main > .hero > .c3-hero__media::after {
  background: linear-gradient(var(--hd-ang),
    rgba(var(--hd-navy), 0) 0%,
    rgba(var(--hd-navy), 0) calc((var(--hd-rf) - .13) * 100%),
    rgba(var(--hd-navy), .07) calc((var(--hd-rf) - .085) * 100%),
    rgba(var(--hd-navy), .22) calc((var(--hd-rf) - .035) * 100%),
    rgba(var(--hd-navy), .46) calc((var(--hd-rf) + .01) * 100%),
    rgba(var(--hd-navy), .62) calc((var(--hd-rf) + .06) * 100%),
    rgba(var(--hd-navy), .72) calc((var(--hd-rf) + .16) * 100%),
    rgba(var(--hd-navy), .79) calc((var(--hd-rf) + .30) * 100%),
    rgba(var(--hd-navy), .85) 100%);
}
body.c3-home.c3-hd.c3-hd-c2 main > .hero > .c3-hero__media::before {
  background: linear-gradient(180deg, rgba(var(--hd-navy), 0) 55%, rgba(var(--hd-navy), .10) 80%, rgba(var(--hd-navy), .18) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 46%); mask-image: linear-gradient(90deg, transparent 6%, #000 46%);
}
body.c3-home.c3-hd.c3-hd-c2 .hero .hero__copy::before { content: none; display: none; background: none; }
@media (max-width: 47.99rem) {
  body.c3-hd.c3-hd-c2 { --hd-rf: .34; }
  body.c3-home.c3-hd.c3-hd-c2 main > .hero > .c3-hero__media::before { -webkit-mask-image: none; mask-image: none; }
}