/* 사진을 히어로 전폭에 펼치고 텍스트 아래에 명암 레이어를 둔다.
   폭 100vw는 데스크톱 세로 스크롤바 폭까지 넣어 몇 px 넘치므로 body가 자기 폭에서 자른다. html에도 clip을 걸어야
   body의 overflow가 화면으로 옮겨 가지 않고 body에 남는다. body를 컨테이너(container-type)로 두면 안 된다 —
   격리된 body는 배경을 캔버스로 넘기지 않고 직접 칠해 .aura·.grain(음수 z-index)을 덮는다(2026-10-03~10-23 사진 히어로 17쪽 검정). */
html,body{overflow-x:clip}
.section-hero.section-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:32px;
  max-width:1200px;
  min-height:420px;
  padding-top:64px;
  padding-bottom:80px;
}
.section-hero.wrap{padding-left:30px;padding-right:30px}
.section-hero-copy,.section-hero-wide{position:relative;z-index:1;min-width:0}
.section-hero-copy{width:100%;max-width:650px}
.section-hero-wide{width:100%}
.section-hero .section-hero-media{
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  overflow:hidden;
  pointer-events:none;
  background:var(--bg,#080607);
}
.section-hero-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
}
/* Technical scenes: keep the GPU and screens in the visible crop. */
.local-hero .section-hero-media img{object-position:center 55%}
.repo-radar-hero .section-hero-media img{object-position:center 42%}
.setup-hero .section-hero-media img{object-position:center 48%}
@media(min-width:1101px){
  :is(.local-hero,.repo-radar-hero,.setup-hero) .section-hero-media::after{
    background:linear-gradient(to bottom,rgba(8,6,7,.2),transparent 25%,rgba(8,6,7,.1) 68%,#080607),
      linear-gradient(90deg,rgba(8,6,7,.95),rgba(8,6,7,.88) 30%,rgba(8,6,7,.62) 46%,rgba(8,6,7,.18) 68%,rgba(8,6,7,.12));
  }
}
/* 불씨 캔버스(assets/embers.js) — 홈처럼 사진·명암(::after) 위, 본문 아래. 사진 층이 z-index:0 쌓임 맥락이라
   여기서 z-index:1 이어도 본문(.section-hero-copy 등, z-index:1)은 늘 위에 있다. */
.section-hero-media .embers{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.section-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,rgba(8,6,7,.42),transparent 24%,rgba(8,6,7,.12) 62%,#080607 100%),
    linear-gradient(90deg,rgba(8,6,7,.94) 0%,rgba(8,6,7,.88) 34%,rgba(8,6,7,.78) 58%,rgba(8,6,7,.2) 82%,rgba(8,6,7,.34) 100%);
}
.section-hero .section-hero-copy h1{
  color:#fff9f5;
  font-size:clamp(40px,5vw,72px);
  text-shadow:0 2px 5px rgba(0,0,0,.8),0 6px 28px rgba(0,0,0,.55);
}
.section-hero .section-hero-copy h1 :is(.it,em){
  background:linear-gradient(105deg,#ffe1ac,#ffb070 60%,#ff8b62);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  /* 기울임 글자가 글자 상자 밖으로 돌출해도 그라데이션이 끝까지 칠해지도록 한다. */
  padding-inline:.04em .18em;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.65));
}
.section-hero .section-hero-copy>p,
.section-hero .ai-lead{
  max-width:600px;
  text-wrap:pretty;
  color:#e7dfda;
  text-shadow:0 1px 4px #080607,0 2px 14px rgba(0,0,0,.8);
}
.section-hero .section-hero-copy :is(.crumb,.ai-breadcrumb,.sync,.local-hero-note){
  color:#cfc3bd;
  text-shadow:0 1px 5px #080607;
}
.section-hero .section-hero-copy .crumb{margin-bottom:22px}
/* 히어로 공통 부품(2026-09-20 표준화) — 라벨 · 이동 버튼 · 숫자 요약을 모든 사진 히어로가 같은 클래스로 쓴다 */
.section-hero .section-hero-copy .hero-eyebrow{display:block;margin-bottom:14px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:#ffc68e;text-shadow:0 1px 5px #080607}
.section-hero .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.section-hero .hero-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:12px 20px;border:1px solid var(--glass-line);border-radius:10px;background:rgba(8,6,7,.62);backdrop-filter:blur(10px);color:#f4eeec;font-size:14px;font-weight:600;text-shadow:none;transition:border-color .2s,transform .2s,background .2s}
.section-hero .hero-btn:hover{border-color:rgba(255,122,69,.55);transform:translateY(-2px)}
.section-hero .hero-btn.is-primary{border-color:var(--ember);background:var(--ember);color:#180a05}
.section-hero .hero-btn.is-primary:hover{background:#ff8756;border-color:#ff8756}
.section-hero-wide .hero-stats{display:flex;flex-wrap:wrap;gap:10px 30px;color:#cfc3bd}
.hero-stats div{display:flex;align-items:baseline;gap:8px}
.hero-stats b{font:600 23px/1 "Space Grotesk",var(--font-sans);color:#f4eeec;text-shadow:0 1px 5px #080607}
.hero-stats span{font-size:12px;color:#cfc3bd;text-shadow:0 1px 5px #080607}
.local-basics>.local-board{grid-column:1/-1;max-width:580px;width:100%;justify-self:center}
.ai-hero.section-hero{max-width:none}
.ai-hero.section-hero .ai-hero-row{display:block}
.ai-hero.section-hero .ai-hero-note{margin-top:24px;min-width:0;border-left-color:rgba(255,198,142,.5)}
.ai-hero.section-hero .ai-hero-note :is(p,a){color:#e7dfda;text-shadow:0 1px 5px #080607}
.section-hero-wide :is(.content-roles,.hubnav a,.summary){background:rgba(8,6,7,.76)}

@media(min-width:1600px){
  .section-hero-media::after{
    background:
      linear-gradient(to bottom,rgba(8,6,7,.42),transparent 24%,rgba(8,6,7,.12) 62%,#080607 100%),
      linear-gradient(90deg,rgba(8,6,7,.96),rgba(8,6,7,.84) 42%,rgba(8,6,7,.38) 72%,rgba(8,6,7,.24));
  }
}
/* 태블릿에서도 긴 설명이 밝은 사진 영역까지 닿을 수 있다. */
@media(max-width:1100px){
  .section-hero-media::after{
    background:
      linear-gradient(to bottom,rgba(8,6,7,.44),rgba(8,6,7,.2) 40%,#080607 100%),
      linear-gradient(90deg,rgba(8,6,7,.88),rgba(8,6,7,.78) 60%,rgba(8,6,7,.66));
  }
}
@media(max-width:700px){
  .section-hero.section-hero{min-height:360px;gap:24px;padding-top:44px;padding-bottom:56px}
  .section-hero .section-hero-copy h1{font-size:clamp(36px,8vw,46px)}
  .section-hero .hero-btn{flex:1 1 100%;justify-content:center}
  .section-hero-wide .hero-stats{gap:8px 20px}
  .hero-stats b{font-size:20px}
  .section-hero-media img{object-position:60% center}
  :is(.local-hero,.repo-radar-hero,.setup-hero) .section-hero-media img{object-position:75% center}
}
@media print{
  .section-hero.section-hero{display:block;min-height:0;padding-top:20px;padding-bottom:20px}
  .section-hero-media{display:none}
  .section-hero .section-hero-copy h1,.section-hero .section-hero-copy>p{color:inherit;text-shadow:none}
}

/* 자료 탐색 허브 — 검색·필터는 사진 아래, 제목은 기존 사진 히어로와 같은 폭. */
.guide-library-hero .section-hero-media img{object-position:center 55%}
.learn-hero .section-hero-media img{object-position:center 35%}
.glossary-hero .section-hero-media img{object-position:center 55%}
.wd-hero .section-hero-media img{object-position:center 60%}
.wd-page .section-hero-media img{max-width:none;height:100%}
#guides,#courses{scroll-margin-top:100px}
@media(max-width:700px){
  :is(.guide-library-hero,.learn-hero,.wd-hero,.glossary-hero) .section-hero-media img{object-position:74% center}
  .wd-hero.section-hero{padding-left:14px;padding-right:14px}
}