/* ============================================================
   히어로 — 사진형 (otovo.com 구성)
   ------------------------------------------------------------
   최종 확정본입니다(2026-08-31). 예전 배너형(A안)은
   _backup/index-A안-배너히어로.html.bak 에 남겨 두었습니다.

   otovo.com 실측(2026-08-31 · 1280×720)을 기준으로 잡았다.
     사진 100vh cover · 내비 fixed 투명
     헤드라인 102px w700 자간 -0.02em 좌측 48px
     부제 24px w500 / 강조줄 24px w700
     CTA 높이 58px 완전 알약

   ⚠ 사진 위 글자는 대비가 배경에 따라 흔들린다.
     그래서 어둡게 깔아주는 막(.hb-scrim)을 반드시 함께 쓴다.
     막을 지우면 흰 글자가 하늘에서 읽히지 않는다.
   ============================================================ */

/* ⚠ 높이는 .hb-in 이 정한다.
   예전에는 .hero-b 를 flex 컨테이너로 두고 min-height:100vh 를 걸었는데,
   그러면 자식이 컨테이너 높이에 묶여 내용이 많을 때(모바일) 아래가 잘렸다.
   지금은 안쪽이 늘어나면 히어로도 함께 늘어난다. */
.hero-b{
  position:relative;
  overflow:hidden;
  background:var(--surface-2);       /* 사진 로드 전 깜빡임 방지 */
  isolation:isolate;
}

/* ---------- 사진 ---------- */
.hb-photo,
.hb-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.hb-photo img{object-fit:cover;object-position:50% 42%;display:block;}

/* 좌하단이 가장 어둡고 오른쪽·위로 갈수록 밝아진다.
   글자가 얹히는 쪽만 눌러 사진을 최대한 살린다. */
.hb-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* 막을 최소화한 값이다. 62% -> 26%.
     줄일 수 있었던 건 막을 옅게 해서가 아니라 사진과 문구 위치를 바꿔서다.
       · 사진을 아래에서 잘라 지평선을 화면 65% 로 내렸다
       · 문구 전체가 하늘 안에 들어오게 위로 올렸다
     예전에는 부제·하이라이트가 어두운 들판·가대에 걸쳐 있어서
     그 어두운 픽셀 하나 때문에 막 전체를 62% 로 올려야 했다.
     ⚠ 그러므로 이 26% 를 유지하려면 문구가 지평선 위에 있어야 한다.
       패딩을 늘려 문구를 내리면 막을 다시 올려야 한다. */
  background:
    /* 내비 뒤 얇은 띠. 사진 맨 위가 짙은 보라 구름이라 내비 글자만 3.18 로
       깨졌다. 폭 전체를 덮는 막을 올리는 대신 120px 만 눌러 5.4 로 올린다.
       px 단위라 화면 높이와 무관하게 내비 높이(88/68px)를 덮는다. */
    linear-gradient(to bottom,
      rgba(255,244,232,.42) 0px, rgba(255,244,232,0) 120px),
    linear-gradient(to right,
      rgba(255,244,232,.26) 0%,  rgba(255,244,232,.26) 68%,
      rgba(255,244,232,.12) 84%, rgba(255,244,232,0) 96%);
}

/* ---------- 내용 틀 ---------- */
.hb-in{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);
  /* 문구는 한 덩어리로 묶은 채 위쪽에 앉힌다.
     오토보 실측이 헤드라인 34% 지점이었고, 아래 여백(padding-top)으로
     그 위치를 맞춘다. 가운데 정렬로는 41% 까지밖에 못 올라간다.
     ⚠ 값을 키우면 헤드라인이 내려간다. 화면 높이에 따라 자동으로
       늘고 줄도록 clamp 를 쓴다. */
  margin:0 auto;padding:clamp(130px,24vh,240px) 24px 76px;
  justify-content:flex-start;
  /* vh 를 먼저 쓰고 svh 로 덮는다(순서가 중요).
     svh 는 모바일 주소창을 뺀 높이라, 뒤에 와야 주소창이 나타났다 사라질 때
     히어로가 튀지 않는다. 순서를 바꾸면 화면보다 커져 아래가 잘린다. */
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;
}

/* ---------- 문구 ---------- */
.hb-copy{margin-top:0;}

/* "전기요금은 줄이고" 는 헤드라인과 이어지는 한 문장이다.
   15px 이면 헤드라인(104px)의 14% 밖에 안 되어 딸린 라벨처럼 보였다.
   22px(21%)로 올려 첫 줄로 읽히게 한다.
   부제줄(24px w500)과는 굵기(w700)로 구분한다. */
.hb-eyebrow{
  font-size:clamp(16px,1.6vw,22px);font-weight:700;
  letter-spacing:var(--ls-sm);line-height:1.4;
  /* ⚠ 회색(--ink-2)으로 내리지 말 것.
     회색을 쓰면 사진 위 대비를 맞추려고 막을 .92 까지 올려야 하고,
     그러면 노을이 다 날아간다. 굵기(w700)로 위계를 준다. */
  color:var(--ink);
}

/* 오토보 헤드라인은 102px. 우리 문구는 한글 9자라 그 크기를 그대로 써도 넘치지 않는다. */
.hb-h1{
  margin-top:6px;
  font-family:var(--font-main);font-weight:700;
  font-size:clamp(40px,7.6vw,104px);
  line-height:1.08;letter-spacing:var(--ls-xl);
  color:var(--ink);
  text-wrap:balance;
}

/* 한 줄로 읽히게 폭 제한을 두지 않는다.
   30ch 를 걸면 "…리스 ·" 뒤에서 접혀 두 줄이 된다. */
.hb-l2{
  margin-top:16px;
  font-size:clamp(19px,1.7vw,24px);font-weight:500;
  line-height:1.5;letter-spacing:var(--ls-sm);
  color:var(--ink);
}

/* ---------- 부제 + CTA (오토보처럼 같은 줄) ---------- */
/* 위 문장(.hb-l2)과 붙여 한 덩어리로 읽히게 한다 */
.hb-act{
  margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;
  gap:22px 32px;flex-wrap:wrap;
}
/* 부제줄(.hb-l2)과 같은 크기로 둔다.
   오토보도 두 줄을 같은 24px 로 두고 굵기·색으로만 구분한다.
   크기를 줄이면 두 줄이 한 세트로 읽히지 않는다. */
.hb-sub{
  margin:0;font-size:clamp(19px,1.7vw,24px);font-weight:500;
  line-height:1.5;letter-spacing:var(--ls-sm);color:var(--ink);
}
/* 포인트 오렌지 #FF6B35 그대로.
   밝은 면 위에서는 2.71:1 이라 못 썼지만, 어두운 막 위에서는 잘 읽힌다. */
.hb-sub .hit{color:var(--amber);font-weight:800;}

.hb-cta{display:flex;gap:10px;flex-wrap:wrap;}
.hbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:58px;padding:0 26px;border-radius:100px;
  font-family:inherit;font-size:15.5px;font-weight:700;
  letter-spacing:var(--ls-body);text-decoration:none;white-space:nowrap;
  transition:transform .14s var(--ease), filter .18s var(--ease), background .18s var(--ease);
}
.hbtn span{font-size:15px;}
.hbtn:active{transform:translateY(1px);}
/* 주 버튼은 진한 포인트 오렌지(#D13800) + 흰 글자 = 4.91:1.
   ⚠ 밝은 #FF6B35 로 되돌리면 흰 글자가 2.84:1 로 읽히지 않는다.
     그때는 글자를 네이비로 함께 바꿔야 한다. */
.hbtn-amber{background:var(--amber);color:#fff;}
.hbtn-amber:hover{filter:brightness(1.08);}
/* 보조 버튼 — 밝은 면 위라 흰 채움만으로는 형태가 안 잡힌다. 테두리를 둔다. */
.hbtn-white{background:rgba(255,255,255,.90);color:var(--ink);border:1px solid var(--line-strong);}
.hbtn-white:hover{background:#fff;border-color:var(--ink-3);}

/* ============================================================
   내비를 사진 위에 띄운다
   맨 위에서는 배경 없이 흰 글자, 스크롤하면 원래 모습으로 돌아온다.
   .nav-solid 는 script.js 가 붙여 준다.
   ============================================================ */
body.has-photo-hero .nav{
  position:fixed;left:0;right:0;top:0;
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
body.has-photo-hero .nav-in{height:88px;}
@media (max-width:560px){
  body.has-photo-hero .nav-in{height:68px;}
}
/* 히어로가 밝으므로 내비도 처음부터 진한 글자·컬러 로고를 쓴다.
   ⚠ 여기서도 회색(--ink-2)은 안 된다. 사진 위에서 3.86:1 로 떨어졌다.
     내비는 사진 맨 위(보라색 하늘)에 걸쳐 있어 막이 가장 옅은 구간이다. */
body.has-photo-hero .nav .nav-links a{color:var(--ink);}
body.has-photo-hero .nav .nav-links a:hover{color:var(--green-text);border-color:var(--green);}
body.has-photo-hero .nav .nav-toggle,
body.has-photo-hero .nav .nav-burger{color:var(--ink);}
/* "무료 상담" 도 같은 오렌지·흰 글자로 통일 */
body.has-photo-hero .nav .btn-amber,
body.has-photo-hero .nav.nav-solid .btn-amber{background:var(--amber);color:#fff;}

/* 스크롤 후 — 배경만 채운다 */
body.has-photo-hero .nav.nav-solid{
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color:var(--line);
  backdrop-filter:blur(12px);
}

/* ============================================================
   등장 애니메이션 — 위에서부터 순서대로
   ============================================================ */
@keyframes hbUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.hb-eyebrow{animation:hbUp .8s var(--ease) .10s both;}
.hb-h1     {animation:hbUp .9s var(--ease) .18s both;}
.hb-l2     {animation:hbUp .9s var(--ease) .30s both;}
.hb-act    {animation:hbUp .9s var(--ease) .40s both;}
.hb-photo img{animation:hbZoom 9s var(--ease) both;}
@keyframes hbZoom{from{transform:scale(1.06);}to{transform:scale(1);}}

@media (prefers-reduced-motion:reduce){
  .hb-eyebrow,.hb-h1,.hb-l2,.hb-act,.hb-photo img{
    animation:none !important;
  }
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1000px){
}

@media (max-width:760px){
  /* ⚠ 좁은 화면에서는 좌우 방향 막이 듣지 않는다.
     문구가 화면 폭을 거의 다 쓰기 때문에 오른쪽 끝(사진이 드러나는 구간)에
     글자가 놓인다. 밝은 막 시절 부제줄이 2.89 까지 떨어진 걸 실측했다.
     그래서 모바일만 세로 방향 막으로 바꾼다 — 문구가 있는 위쪽을 덮고
     아래에서 노을을 드러낸다. */
  .hb-scrim{
    background:
      linear-gradient(to bottom,
        rgba(255,244,232,.42) 0px, rgba(255,244,232,0) 120px),
      linear-gradient(to bottom,
        rgba(255,244,232,.30) 0%,  rgba(255,244,232,.30) 58%,
        rgba(255,244,232,.16) 76%, rgba(255,244,232,0) 92%);
  }
  /* 내용을 아래로 붙인다. auto 여백은 쓰지 않는다 — 좁은 화면에서
     남는 공간 계산이 어긋나 아래가 잘린 적이 있다. */
  .hb-in{
    padding:clamp(120px,20vh,180px) 20px 40px;
    justify-content:flex-start;
  }
  .hb-act{align-items:stretch;flex-direction:column;gap:16px;}
  .hb-cta{width:100%;}
  .hbtn{flex:1 1 0;min-height:54px;padding:0 18px;font-size:14.5px;}
  /* 3개를 세로로 쌓으면 화면 밖으로 넘친다. 한 줄에 담고 좌우로 흘린다. */
  .hb-act{margin-top:24px;}
}

@media (max-width:420px){
  /* 위 여백은 max-width:760px 의 clamp 가 맡는다.
     여기서 고정값을 다시 주면 그 계산을 덮어써 문구가 위로 붙는다. */
  .hb-l2{margin-top:14px;}
}


/* ============================================================
   다크모드 보정 (2026-08-31 추가)
   ------------------------------------------------------------
   히어로는 배경이 사진 + 밝은 막(.hb-scrim)이라 OS 테마와 상관없이
   항상 밝다. 그런데 글자색을 --ink 로 쓰고 있어서 다크모드에서
   --ink 가 흰색(#F2F5F7)으로 뒤집혔다. 그 결과:
     · .hbtn-white  흰 배경 + 흰 글자 -> "요금 확인하기" 글자가 사라짐
     · .hb-h1/.hb-l2/내비  밝은 하늘 위 흰 글자 -> 대비 붕괴
   면 색이 고정이면 글자색도 고정한다.
   (style.css 의 --on-green 주석에 적힌 것과 같은 원칙)
   이 구역 안에서만 라이트 팔레트 값을 다시 못 박는다.

   ⚠ .nav 는 :not(.nav-solid) 로 한정한다. 스크롤 후에는 내비 배경이
     --bg 로 채워지므로(다크모드에서 어두움) 글자도 테마를 따라가야 한다.
   ============================================================ */
.hero-b,
body.has-photo-hero .nav:not(.nav-solid){
  --ink:#17212B;
  --ink-2:#565E68;
  --ink-3:#606871;
  --line:#E5E8E3;
  --line-strong:#C8CFC4;
  --surface-2:#F2F7ED;
  --green-text:#4F7525;
  --amber:#D13800;
}

/* 로고도 같은 이유로 고정한다.
   style.css 는 다크모드에서 흰색 로고(.logo-on-dark)로 바꾸는데,
   내비가 사진 위에 떠 있는 동안에는 배경이 밝은 하늘이라
   흰 로고가 묻힌다. 투명 내비 구간에서는 컬러 로고를 강제한다.
   스크롤해서 .nav-solid 가 붙으면 다시 테마를 따라간다. */
body.has-photo-hero .nav:not(.nav-solid) .logo .logo-on-light{display:block;}
body.has-photo-hero .nav:not(.nav-solid) .logo .logo-on-dark{display:none;}