/* ===== D1 히어로 (R07: 다크 리디자인 — 5레이어) ===== z-index 지도: 0 배경 / 1 밴드 / 2 워드마크·피사체 / 3 텍스트 .hero__* 는 P00 메인 히어로(R06) 전용이라 여기선 전부 .p-hero__* 로만 만든다 */ /* 기준 캔버스 2048px — 원래 이 폭에서 그려진 시안이라 좌표가 전부 그 기준의 px 였다. min(Xvw, Npx) 로 바꿔 2048 이상은 원본 px 그대로 고정하고, 그 아래는 같은 비율로 줄인다. 이렇게 하면 1440 이든 1920 이든 피사체가 텍스트를 덮지 않는다. */ .p-hero{--hero-h:clamp(600px,47.6563vw,976px); --band-h:clamp(24px,1.7578vw,36px); --band-b:clamp(30px,2.2949vw,47px); --subj-w:min(33.0078vw,676px); --subj-r:min(22.0215vw,451px); --inner-max:min(46.2891vw,948px); --inner-pl:min(20.7031vw,424px); position:relative;overflow:hidden;height:var(--hero-h);background:#0A0A0A;color:#fff; display:flex;align-items:center;padding-top:var(--header-h)} .p-hero__bg{position:absolute;inset:0;z-index:0} .p-hero__bg .ph{background:#1A1A1A;color:#3A3A3A} /* 밝은 회색 플레이스홀더면 흰 H1이 안 보여 다크로 오버라이드 */ /* 배경 이미지 — 왼쪽 여백에만 얼음 글로우가 있고 텍스트 자리는 비워둔 전용 합성본. 전역 img{background:#E4E4E4} 때문에 로딩 중 회색이 번쩍이므로 배경색도 맞춰둔다 */ .p-hero__bg img{width:100%;height:100%;object-fit:cover;display:block;background:#0A0A0A} /* 초록 4선 밴드 — repeating-linear-gradient 1개로.
4개 만들지 않는다. 주기 11px(선3+공백8) × 4 − 마지막 공백 8 = 36 */ .p-hero__band{position:absolute;z-index:1;left:0;right:0;bottom:var(--band-b);height:var(--band-h); background:repeating-linear-gradient(to bottom, var(--accent) 0,var(--accent) 8.3333%,transparent 8.3333%,transparent 30.5556%)} /* 워드마크 — 배경 없이 만들면 글자 사이로 초록 선이 비쳐 레퍼런스와 달라진다. 밴드 위(z-index 2)에서 #0A0A0A 배경으로 그 구간의 선을 사각으로 지운다 */ .p-hero__wordmark{position:absolute;z-index:2;left:min(16.9922vw,348px); bottom:var(--band-b);height:var(--band-h); display:flex;align-items:center;padding:0 min(.7813vw,16px);margin:0;background:#0A0A0A; font:700 clamp(18px,1.7578vw,36px)/1 var(--font-sans);letter-spacing:.18em;color:#fff; margin-right:-.18em} /* letter-spacing이 마지막 글자 뒤에도 붙어 오른쪽 여백이 더 커지는 것 상쇄 */ /* 피사체 컷아웃 — 워드마크보다 뒤(z-index 2, 워드마크와 동률이지만 DOM 순서상 안전하게 배치), 밴드(z-index 1)보다는 앞이라 밴드 901~1567 구간을 가린다 */ .p-hero__subject{position:absolute;z-index:2;bottom:0;right:var(--subj-r); width:var(--subj-w);aspect-ratio:676/835; pointer-events:none} .p-hero__subject .ph{background:#1A1A1A;color:#3A3A3A;border:1px dashed #3A3A3A} .p-hero__subject img{width:100%;height:100%;object-fit:cover;object-position:top;display:block; background:transparent} /* 전역 img{background:#E4E4E4} 를 덮어쓴다 — 안 그러면 누끼 투명 영역에 회색이 비쳐 보여서 밴드가 실루엣 뒤로 지나가는 효과가 죽는다(실측 확인) */ .p-hero__inner{position:relative;z-index:3;max-width:var(--inner-max);width:100%; padding:0 var(--sp-5) 0 var(--inner-pl)} .p-hero__label{font-size:15px;font-weight:var(--fw-bold);color:var(--accent)} /* --accent-dark 아님 */ .p-hero__inner h1{margin-top:28px;font:700 clamp(32px,2.7344vw,56px)/1.3 var(--font-sans);color:#FFFFFF} .p-hero__desc{margin-top:44px;font-size:16px;line-height:1.7;color:#FFFFFF} /* #AAAAAA 아님(R05와 다름) */ /* 라벨·설명 둘 다

태그라 예전에 .p-hero__inner p 로 뭉뚱그리면 라벨이 설명 스타일에 명시도로 밀렸다 — 설명 전용 클래스(.p-hero__desc)로 분리해 근본 해결 */ /* ===== 히어로 반응형 ===== height:976px 고정 + 픽셀 좌표(left:348 / right:451 / padding-left:424)로 짜여 있어 좁은 화면에서 텍스트만 덩그러니 남은 976px 짜리 검은 화면이 됐다. 높이를 폭에 비례시키고, 피사체는 숨기는 대신 데스크톱과 같은 676:835 비율로 줄여 되살린다. 1024px 이상은 손대지 않는다. */ @media (max-width:1023px){ .p-hero{height:clamp(560px,58vw,620px);padding-top:58px} /* padding-top 은 모바일 헤더 실제 높이(58px). shorthand 로 쓰면 좌우까지 리셋된다 */ .p-hero__inner{padding-left:var(--sp-5);padding-right:44%;max-width:none} .p-hero__inner h1{font-size:44px} /* 폭만 지정하고 높이는 aspect-ratio 가 만든다 — 고정 height 면 컷아웃이 다르게 잘린다 */ .p-hero__subject{right:0;width:42%} .p-hero__wordmark{left:24px;font-size:24px;letter-spacing:.12em} } @media (max-width:767px){ /* 위아래 스택. 레퍼런스의 585x585 는 히어로가 아니라 "이미지 영역"이 1:1 이라는 뜻이라 정사각은 사진에만 건다. 사진을 아래에 두면 초록 밴드(bottom 기준)가 데스크톱처럼 실루엣을 가로지른다. DOM 순서가 subject -> inner 라 order 로 뒤집는다. */ .p-hero{display:flex;flex-direction:column;align-items:stretch; height:auto;padding-bottom:0; --band-b:28px;--band-h:28px} .p-hero__inner{order:1;padding-left:var(--sp-5);padding-right:var(--sp-5);max-width:none} .p-hero__inner h1{margin-top:20px;font-size:32px} .p-hero__desc{margin-top:24px;font-size:15px} .p-hero__subject{order:2;position:relative;right:auto;bottom:auto; width:auto;margin:32px var(--sp-5) 0;aspect-ratio:1/1} .p-hero__wordmark{display:none} /* 초록 밴드만 남김 */ } /* ===== D2 스펙바 — 히어로 바로 아래. 아이콘 + 라벨 + 값 4칸 ===== 기본 스타일이 통째로 비어 있어 스타일 없는