/* owner: hero / spec §5.2 · §4.4 · §4.6 · §4.8 — 레이아웃·간격만. 색은 밴드 변수·토큰만. */
/* 구현값(spec 과 다른 점, spec 갱신은 PM): 텍스트 grid 1/9 · 아트 9/13 · facts 3열은 ≥768 · 등고선 ≥1024 width 150% / margin-right -40% / max-height 600px · 겹 3~5 opacity +.1, 겹 5 stroke 1.25px. */

/* 섹션 틀 */
.sec-hero{
  min-height:100vh;
  min-height:100svh;
  padding-top:calc(var(--header-h) + clamp(96px,14vh,160px));
  padding-bottom:var(--s-9);
  overflow-x:clip;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (max-width:767px){
  .sec-hero{min-height:92vh;min-height:92svh}
}
/* 4.8 도트 그리드 — 단일 rgba, 정적. 마스크는 그리드 레이어(::before)에만. 도트 색은 토큰이라 고정 → 마스크 타원을 키워(80%×70%, 완전 노출 50%) CTA 우측까지 인지되게 */
.sec-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:radial-gradient(var(--c-ink-dots) .6px, transparent .8px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 65% 45%, #000 50%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 65% 45%, #000 50%, transparent 100%);
}
.sec-hero>.container{position:relative;z-index:var(--z-content);width:100%;align-items:center}

/* 텍스트 블록 */
.hero__text{position:relative;z-index:var(--z-content);align-self:center;grid-column:1/-1}
.hero__label{color:var(--fg-2);margin-bottom:20px}
.hero__title{color:var(--fg)}
.hero__line{display:block}
.hero__u{position:relative;display:inline}
.hero__u::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-.06em;
  height:2px;
  background:var(--mint);
  transform-origin:left;
}
/* 63.4° 꺾임 — 2×9px 바를 26.57° 회전(벡터 (16,-32)와 같은 각) */
.hero__u::after{
  content:"";
  position:absolute;
  right:-1px;bottom:-.06em;
  width:2px;height:9px;
  background:var(--mint);
  transform-origin:bottom center;
  transform:rotate(26.57deg);
}
.hero__sub{
  margin-top:28px;
  max-width:560px;
  font:400 clamp(1.0625rem,.95rem + .5vw,1.125rem)/1.7 var(--ff);
  color:rgba(242,237,228,.8);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media (max-width:767px){
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
}
.hero__facts{margin-top:56px}
.hero__rule{display:block;height:1px;background:rgba(122,132,148,.28)}
.hero__facts-list{display:grid;gap:12px;padding:16px 0}
@media (min-width:768px){
  .hero__facts-list{grid-template-columns:repeat(3,1fr);gap:24px;padding:18px 0}
}
.hero__fact{display:flex;align-items:flex-start;gap:10px;font:500 var(--fs-small)/1.6 var(--ff);color:var(--fg-2)}
.hero__fact .dot{margin-top:.55em}

/* 아트 — 등고선 */
.hero__art{position:relative;z-index:var(--z-contour);grid-column:1/-1;align-self:center;order:2}
.hero__contour{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  max-height:44vh;
  aspect-ratio:4/5;
  opacity:.9;
}
.hero__contour .contour__l{stroke:var(--contour-line);stroke-width:1px}
.hero__contour .contour__l--0{opacity:.32}
.hero__contour .contour__l--1{opacity:.38}
.hero__contour .contour__l--2{opacity:.44}
/* 하위 겹 3~5 는 spec §4.6 대비 +.1(잉크 위 가독), 겹 5 는 1.25px — 민트선(1.5px)으로 가는 단계 */
.hero__contour .contour__l--3{opacity:.60}
.hero__contour .contour__l--4{opacity:.66}
.hero__contour .contour__l--5{opacity:.72;stroke-width:1.25px}
.hero__contour .contour__top{stroke:var(--mint);stroke-width:1.5px;opacity:1}
.hero__contour .contour__peak{transform-box:view-box;transform-origin:402px 96px}
.hero__contour .contour__peak-dot{fill:var(--mint)}
.hero__contour .contour__ring{fill:none;stroke:var(--mint);transform-box:view-box;transform-origin:402px 96px}
/* 모바일: 하위 2겹 미렌더(겹 5 = k 2..6) */
@media (max-width:767px){
  .hero__contour .contour__l--0,.hero__contour .contour__l--1{display:none}
}
/* 태블릿: 텍스트 아래, 우측 정렬 */
@media (min-width:768px){
  .hero__contour{width:60%;max-height:480px;margin-left:auto;margin-right:0;opacity:1}
}
/* 데스크톱: 텍스트 1/9(h1 8컬럼) + 아트 9/13, 40% 우측 블리드.
   등고선 폭 150% = 아트 4컬럼(1440: 338.7px)×1.5 = 508px → 좌측으로 33.8px 넘쳐 박스 좌변 x≈887.5(텍스트 컬럼 우변 889.3 과 맞닿음, 그림 자체는 max-height 600 클램프로 14px 안쪽부터).
   1024: 아트 293.3px → 440px, 좌변 x≈661(텍스트 우변 658.7 과 2.7px 간격). 정상 노드(402,96)는 항상 우측 컬럼 안. */
@media (min-width:1024px){
  .hero__text{grid-column:1/9}
  .hero__art{grid-column:9/13;order:0}
  .hero__contour{width:150%;max-height:600px;margin-left:auto;margin-right:-40%}
}

/* 4.4 히어로 전용 모션 보강 — motion.css 어휘 위에 섹션 스코프로만 추가.
   기본 상태 = 완성 상태. 아래 블록은 .js + no-preference 에서만. */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion="reduce"]) .sec-hero .hero__title .mask__w.is-in>*{transform:none}
  html.js:not([data-motion="reduce"]) .sec-hero .hero__sub.reveal{transform:translateY(8px)}
  html.js:not([data-motion="reduce"]) .sec-hero .hero__sub.reveal.is-in{transform:none}
  html.js:not([data-motion="reduce"]) .sec-hero .hero__u::before{transform:scaleX(0);transition:transform 600ms var(--ease)}
  html.js:not([data-motion="reduce"]) .sec-hero .hero__u.is-in::before{transform:scaleX(1)}
  html.js:not([data-motion="reduce"]) .sec-hero .hero__u::after{transform:rotate(26.57deg) scale(0);transition:transform 120ms var(--ease)}
  html.js:not([data-motion="reduce"]) .sec-hero .hero__u.is-done::after{transform:rotate(26.57deg) scale(1)}
}
@media (max-width:767px){.hero__contour{width:calc(100% + var(--gutter));margin-right:calc(var(--gutter) * -1)}}