/* ===========================================================================
   HERO DECK + HERO 2 — 결빙방지·논슬립 노면포장 도료 (2026-07-27)
   ---------------------------------------------------------------------------
   · 히어로 덱: 제품별 히어로를 탭으로 전환. 비활성 슬라이드는 display:none →
     히어로1의 IntersectionObserver가 스스로 rAF 루프를 멈춘다 (히어로1 코드 불변).
   · 히어로2: 커서 = 노면 온도·결빙 센서. 일반 아스팔트에서는 서리가 잡히고,
     결빙방지 포장(붉은 밴드) 위에서는 서리가 사라진다.
   · 히어로1의 CSS는 index.html <style>에 그대로 둔다. 이 파일은 덱과 히어로2 전용.
   =========================================================================== */

/* ---------- 덱 ---------- */
.hero-deck{position:relative; background:var(--ink);}
.hero-deck .hd-slide{display:none;}
.hero-deck .hd-slide.is-on{display:block; animation:hdFade .45s ease both;}
@keyframes hdFade{from{opacity:0} to{opacity:1}}

/* 우측 기준선 = 헤더 컨테이너(max-width 1280px · padding 32px)의 오른쪽 끝.
   right:32px면 넓은 화면에서 뷰포트 끝에 붙어 헤더 "샘플 요청" 버튼보다 바깥으로 밀린다.
   50% - 608px = 1280/2 - 32 → 컨테이너 우측선. 좁은 화면에서는 32px로 고정. */
.hd-nav{position:absolute; z-index:6; top:clamp(48px,7vh,92px);
  right:max(32px, calc(50% - 608px));
  display:flex; border:var(--bw) solid rgba(var(--accentRGB),.55);
  border-radius:var(--radius); overflow:hidden;
  background:rgba(10,10,10,.72); backdrop-filter:blur(5px);}
.hd-nav button{appearance:none; border:0; cursor:pointer; background:transparent;
  padding:10px 20px; text-align:left; color:#b6b6ad;
  line-height:1.5; transition:background .25s ease, color .25s ease;}
.hd-nav button + button{border-left:1px solid rgba(var(--accentRGB),.35);}
/* 번호는 라벨 서체(Space Mono) · 국문 제목은 디스플레이 서체(Paperlogy) — 브랜드가이드 §2 */
.hd-nav button .n{display:block; opacity:.7;
  font-family:'Space Mono','Pretendard',monospace; font-size:10px; letter-spacing:.2em;}
.hd-nav button .t{display:block; margin-top:4px;
  font-family:var(--headFont),'Pretendard',sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.01em; color:#e6e6e0; white-space:nowrap;}
.hd-nav button:hover{background:rgba(var(--accentRGB),.14);}
.hd-nav button[aria-selected="true"]{background:var(--accent);}
.hd-nav button[aria-selected="true"] .n,
.hd-nav button[aria-selected="true"] .t{color:var(--ink); opacity:1;}
.hd-nav button:focus-visible{outline:2px solid #fff; outline-offset:-3px;}

/* ---------- 히어로 2 ---------- */
/* 82px = site.js 주입 헤더(68px) + 해저드 스트라이프(14px) — 히어로1과 동일 규칙 */
#top2{--mx:60%; --my:52%; --hr:330px; --iceRGB:158,224,255;
  position:relative; height:calc(100vh - 82px); min-height:720px; overflow:hidden;
  background:var(--ink); padding:0;}
#top2 .h2-layer{position:absolute; inset:0; background-image:url('road_ice.jpg');
  background-size:cover; background-position:center center;}
#top2 .h2-dark{filter:brightness(.26) saturate(.32) contrast(1.06);}
/* saturate를 히어로1(1.5)보다 높인 이유 — 생성 원본의 적색이 어두운 와인빛이라
   빔 안에서 벽돌빨강으로 살아나게 하는 보정.
   ※ 2026-07-27 사용자 승인본 — 이 값이 현재 화면의 색을 만든다. 되돌리지 말 것.
     (배경 이미지를 교체할 때만 함께 재조정) */
#top2 .h2-lit{filter:brightness(1.5) saturate(1.85) contrast(1.06);
  -webkit-mask-image:radial-gradient(circle var(--hr) at var(--mx) var(--my),
      #000 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.40) 62%, transparent 82%);
  mask-image:radial-gradient(circle var(--hr) at var(--mx) var(--my),
      #000 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.40) 62%, transparent 82%);}

/* 센서 빔 — 헤드라이트(따뜻한 백열)가 아니라 차가운 계측광 */
#top2 .h2-glow{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--hr) * 1.15) at var(--mx) var(--my),
      rgba(var(--iceRGB),.16) 0%, rgba(var(--iceRGB),.05) 45%, transparent 76%);}
#top2 .h2-grid{position:absolute; inset:0; pointer-events:none; opacity:.28;
  background-image:
    repeating-linear-gradient(to right, rgba(var(--iceRGB),.8) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(to bottom, rgba(var(--iceRGB),.8) 0 1px, transparent 1px 104px);
  -webkit-mask-image:radial-gradient(circle calc(var(--hr) * 1.25) at var(--mx) var(--my),
      #000 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.12) 78%, rgba(0,0,0,.12) 100%);
  mask-image:radial-gradient(circle calc(var(--hr) * 1.25) at var(--mx) var(--my),
      #000 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.12) 78%, rgba(0,0,0,.12) 100%);}

/* 서리 — 빔 안에서만 보이고, 결빙방지 포장(붉은 밴드) 위에서는 사라진다.
   .is-band 토글은 hero2.js가 커서 위치로 판정. */
#top2 .h2-frost{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  opacity:1; transition:opacity .5s ease;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(214,244,255,.95) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 61% 39%, rgba(196,238,255,.8) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 37% 78%, rgba(226,248,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 61%, rgba(186,232,255,.7) 0 1.4px, transparent 2px),
    radial-gradient(circle at 8% 57%, rgba(206,242,255,.85) 0 1.2px, transparent 1.8px);
  background-size:73px 73px, 109px 109px, 61px 61px, 137px 137px, 89px 89px;
  -webkit-mask-image:radial-gradient(circle calc(var(--hr) * .92) at var(--mx) var(--my),
      #000 0%, rgba(0,0,0,.7) 46%, transparent 78%);
  mask-image:radial-gradient(circle calc(var(--hr) * .92) at var(--mx) var(--my),
      #000 0%, rgba(0,0,0,.7) 46%, transparent 78%);}
#top2.is-band .h2-frost{opacity:0;}

/* 레티클 — 결빙 상태에 따라 색과 라벨이 바뀐다 */
#top2 .h2-reticle{position:absolute; left:var(--mx); top:var(--my); width:74px; height:74px;
  margin:-37px 0 0 -37px; pointer-events:none; opacity:.8;
  color:rgb(var(--iceRGB)); transition:color .4s ease;}
#top2.is-band .h2-reticle{color:var(--accent);}
#top2 .h2-reticle::before,#top2 .h2-reticle::after{content:''; position:absolute;
  background:currentColor; opacity:.85;}
#top2 .h2-reticle::before{left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px);}
#top2 .h2-reticle::after{top:50%; left:0; right:0; height:1px; transform:translateY(-.5px);}
#top2 .h2-reticle i{position:absolute; inset:22px; border:1px solid currentColor;
  border-radius:50%; opacity:.9;}
#top2 .h2-reticle b{position:absolute; left:50%; top:-19px; transform:translateX(-50%);
  font-family:'Space Mono','Pretendard',monospace; font-size:9px; letter-spacing:.2em;
  color:currentColor; font-weight:400; white-space:nowrap;}

#top2 .h2-scrim-t{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.80) 0%, rgba(0,0,0,.24) 28%, transparent 48%);}
#top2 .h2-scrim-l{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.58) 26%, rgba(0,0,0,.18) 46%, transparent 62%);}
#top2 .h2-scrim-b{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.28) 16%, transparent 30%);}

/* 계측 콜아웃 — 앵커(◇)는 붉은 밴드 위, 글자는 왼쪽 어두운 쪽으로 뻗는다 */
#top2 .h2-callout{position:absolute; width:0; height:0; pointer-events:none;
  font-family:'Space Mono','Pretendard',monospace; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:#9a9a90;
  opacity:.20; transition:opacity .38s ease, color .38s ease;
  text-shadow:0 1px 8px rgba(0,0,0,.95);}
#top2 .h2-callout span{position:absolute; right:64px; top:50%; transform:translateY(-50%);
  white-space:nowrap; text-align:right;}
#top2 .h2-callout b{color:#fff; font-weight:700;}
#top2 .h2-callout::before{content:''; position:absolute; right:8px; top:0; width:48px; height:1px;
  background:currentColor; opacity:.85;}
#top2 .h2-callout::after{content:''; position:absolute; right:-4px; top:-4px; width:8px; height:8px;
  transform:rotate(45deg); border:1px solid currentColor; background:rgba(255,255,255,.10);}
#top2 .h2-callout.on{opacity:1; color:var(--accent);}
#top2 .h2-callout.on::after{background:rgba(var(--accentRGB),.35);}

#top2 .h2-copy{position:absolute; inset:0; display:flex; align-items:flex-start;
  padding:clamp(48px,7vh,92px) 32px; pointer-events:none;}
#top2 .h2-inner{max-width:1280px; margin:0 auto; width:100%;}
#top2 .h2-copy h1{text-shadow:0 2px 34px rgba(0,0,0,.8);}
#top2 .h2-cta{pointer-events:auto;}
#top2 .h2-cta a{cursor:pointer;}

/* 하단 — 적용 구간 3박스.
   ※ 2026-07-30 주석 정정 — 여기에 "개념 이미지 고지 … 근거 표기 삭제 금지"라고 적혀 있었으나
      그 고지문은 2026-07-29 사용자 지시로 이미 삭제됐다(11차). 주석이 실제와 반대였다.
      대외 배포용(카탈로그·제안서)에는 고지를 되살릴 것 — 사이트에서는 넣지 않는다. */
#top2 .h2-foot{position:absolute; left:0; right:0; bottom:0; padding:0 32px clamp(16px,2.6vh,30px);}
/* 3박스 — 히어로1 .hero-row/.hero-tile과 같은 형태.
   ※ 2026-07-30 주석 정정 — 양쪽 다 계측값(숫자)이다. "여기는 정성 정보" 서술은 낡았다. */
#top2 .h2-row{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr);
  border:var(--bw) solid var(--accent); background:rgba(10,10,10,.84); backdrop-filter:blur(4px);}
#top2 .h2-tile{padding:15px 22px; border-right:var(--bw) solid rgba(var(--accentRGB),.4);}
#top2 .h2-tile:last-child{border-right:none;}
#top2 .h2-tile .k{font-family:'Space Mono','Pretendard',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:#8a8a80;}
#top2 .h2-tile .v{font-family:var(--headFont),'Pretendard',sans-serif; font-weight:700;
  font-size:clamp(25px,3.4vw,44px); line-height:1; color:var(--accent); margin-top:7px; letter-spacing:-.01em;}
/* 단위 표기 — 히어로1 .hero-tile .v small과 동일 규격.
   BPN처럼 숫자 앞에 오는 단위는 좌우 여백을 뒤집는다. */
#top2 .h2-tile .v small{font-size:.44em; letter-spacing:.02em; margin-left:3px;}
#top2 .h2-tile .v small:first-child{margin-left:0; margin-right:6px;}
#top2 .h2-tile .d{margin-top:6px; font-size:12px; line-height:1.5; color:#a9a9a2;}
/* 히어로2 개념 이미지 고지(.h2-note)와 그 래퍼(.h2-foot .row)의 CSS는 2026-07-30 제거 —
   요소가 2026-07-29에 삭제돼 참조가 없었다. 원래 문구는 _수정일지 11차 참조. */

@media (max-width:899px){ /* 899px = site.css 내비 모바일 경계와 동일 */
  /* 히어로1과 동일한 아이브로우 보정 — 자간이 넓어 3줄로 감기고 막대가 가운데 떠 있다 */
  #top2 .h2-inner > div:first-child{align-items:flex-start !important; flex-wrap:wrap;
    gap:0 9px !important; font-size:11.5px !important; letter-spacing:.13em !important; line-height:1.6;}
  #top2 .h2-inner > div:first-child > span:first-child{margin-top:5px; flex:0 0 auto;}
  .hd-nav{position:static; top:auto; right:auto; margin:0; border-radius:0;
    border-left:0; border-right:0; border-top:0;}
  .hd-nav button{flex:1 1 0; padding:12px 14px;}
  /* 좁은 폭에서는 국문 제목을 줄여 2줄 허용 — nowrap이면 탭이 밀려 잘린다 */
  .hd-nav button .t{font-size:13px; white-space:normal;}
  .hd-nav button .n{font-size:9.5px;}
  #top2{cursor:auto; --hr:210px; height:auto; min-height:calc(100vh - 82px); padding-bottom:32px;}
  #top2 .h2-layer{background-image:url('road_ice_sm.jpg');}
  #top2 .h2-reticle,#top2 .h2-callout,#top2 .h2-grid{display:none;}
  /* 좁은 화면: 카피·고지를 일반 흐름으로 쌓아 겹침을 원천 차단.
     position:relative + z-index 필수 — static이면 절대배치된 .h2-layer/.h2-scrim-*가
     페인트 순서상 위에 그려져 카피가 통째로 가려진다 (히어로1과 동일 이슈). */
  #top2 .h2-copy{position:relative; z-index:2; padding:clamp(40px,6vh,64px) 32px 24px;}
  #top2 .h2-foot{position:relative; z-index:2; padding:0 32px;}
  #top2 .h2-row{grid-template-columns:1fr;}
  #top2 .h2-tile{border-right:none; border-bottom:var(--bw) solid rgba(var(--accentRGB),.4);}
  #top2 .h2-tile:last-child{border-bottom:none;}
  #top2 .h2-scrim-t{background:linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.22) 72%, transparent 90%);}
}
@media (min-width:900px) and (max-height:820px){
  #top2 .h2-copy h1{font-size:clamp(42px,6.2vw,76px);}
  #top2 .h2-copy{padding-top:clamp(36px,5vh,64px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-deck .hd-slide.is-on{animation:none;}
  #top2 .h2-callout{transition:none; opacity:1; color:var(--accent);}
  #top2 .h2-frost{transition:none;}
  #top2 .h2-reticle{display:none;}
}