/* hero-pins.css — index 히어로 핀포인트 (v5.1: 타겟팅 데이터 vs 솔루션 카드 위계) */
.hero-pinhero{position:relative;overflow:hidden;--as:1}
@supports(height:100svh){@media(min-width:1201px){.page-index .hero.hero-pinhero.hero-video-section{height:100svh!important}}}
@media(min-width:1600px){.hero-pinhero{--as:1.1}}
@media(min-width:1920px){.hero-pinhero{--as:1.25}}
@media(min-width:2560px){.hero-pinhero{--as:1.4}}
@media(min-width:3200px){.hero-pinhero{--as:1.5}}
.hpinstage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:auto;min-width:100%;min-height:100%;aspect-ratio:1672/941;z-index:1}
.hpinstage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-img-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,9,.30) 0%,rgba(5,5,9,.04) 24%,rgba(5,5,9,.03) 62%,rgba(8,8,12,.50) 100%)}
.hpin-layer{position:absolute;inset:0;z-index:3}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-lines polyline{fill:none;stroke:rgba(255,255,255,.46);stroke-width:calc(1px*var(--as));vector-effect:non-scaling-stroke}
.hpin{position:absolute;width:calc(7px*var(--as));height:calc(7px*var(--as));margin:calc(-3.5px*var(--as)) 0 0 calc(-3.5px*var(--as));padding:0;border-radius:50%;background:rgba(240,240,238,.5);border:1px solid rgba(255,255,255,.78);box-shadow:0 0 0 calc(3px*var(--as)) rgba(255,255,255,.15),0 0 calc(10px*var(--as)) calc(2px*var(--as)) rgba(255,255,255,.3);cursor:default;z-index:4;transition:transform .2s ease;animation:hglow 2.6s ease-in-out infinite alternate}
.hpin:hover,.hpin:focus-visible{transform:scale(1.15)}
.hpin:focus-visible{outline:1px solid rgba(255,255,255,.85);outline-offset:3px}
.hnote{position:absolute;z-index:5;width:max-content;max-width:calc(252px*var(--as));padding:calc(11px*var(--as)) calc(14px*var(--as));border-radius:calc(9px*var(--as));background:rgba(10,14,18,.48);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 20px rgba(0,0,0,.16);color:#fff;transition:opacity .22s ease,transform .22s ease,border-color .22s ease}
.hnote[data-f="3"]{max-width:calc(322px*var(--as))}
.hnote.h-mini{max-width:calc(200px*var(--as));padding:calc(9px*var(--as)) calc(12px*var(--as))}
.hnote.h-mini .hmain{font-size:calc(14px*var(--as))}
.hnote:hover,.hnote:focus-visible{transform:translateY(-2px);border-color:rgba(255,255,255,.32)}
.hnote:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:2px}
.hpin-layer:has(.hnote:hover) .hnote:not(:hover),
.hpin-layer:has(.hnote:focus-visible) .hnote:not(:focus-visible){opacity:.5}
.hbody{opacity:0;animation:hin .45s ease forwards}
.hnote[data-f="1"] .hbody{animation-delay:.05s}
.hnote[data-f="2"] .hbody{animation-delay:.2s}
.hnote[data-f="5"] .hbody{animation-delay:.32s}
.hnote[data-f="3"] .hbody{animation-delay:.45s}
.hnote[data-f="4"] .hbody{animation-delay:.6s}

@keyframes hglow{from{box-shadow:0 0 0 calc(3px*var(--as)) rgba(255,255,255,.12),0 0 calc(8px*var(--as)) calc(2px*var(--as)) rgba(255,255,255,.25)}to{box-shadow:0 0 0 calc(4px*var(--as)) rgba(255,255,255,.2),0 0 calc(12px*var(--as)) calc(3px*var(--as)) rgba(255,255,255,.4)}}
@keyframes hin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(1px,-3px)}}
.hcat{display:flex;align-items:center;gap:calc(7px*var(--as));font-size:calc(12px*var(--as));font-weight:500;color:rgba(255,255,255,.68);margin-bottom:calc(5px*var(--as));white-space:nowrap}
.hcat i{width:calc(11px*var(--as));height:calc(2px*var(--as));background:rgba(255,255,255,.55);border-radius:1px;flex:none}
.hcat svg{width:calc(14px*var(--as));height:calc(14px*var(--as));flex:none}
.hmain{display:block;font-size:calc(16px*var(--as));font-weight:600;letter-spacing:-.01em;line-height:1.35;word-break:keep-all}
.hsub{display:block;margin-top:calc(4px*var(--as));font-size:calc(12.5px*var(--as));font-weight:400;color:rgba(255,255,255,.7);line-height:1.5;word-break:keep-all}
.hflow{display:flex;align-items:center;gap:calc(6px*var(--as));margin-top:calc(8px*var(--as));padding-top:calc(8px*var(--as));border-top:1px solid rgba(255,255,255,.12);font-size:calc(12px*var(--as));color:rgba(255,255,255,.82);white-space:nowrap}
.hflow svg{width:calc(13px*var(--as));height:calc(13px*var(--as));flex:none}
.hflow .arr{color:rgba(255,255,255,.5);margin:0 2px}
/* 역할 배지 */
.hrole{display:inline-flex;align-items:center;white-space:nowrap;margin-bottom:calc(7px*var(--as));padding:calc(2px*var(--as)) calc(7px*var(--as));border-radius:4px;font-size:calc(9.5px*var(--as));font-weight:700;letter-spacing:.14em}
/* 타겟팅 데이터 카드: 조용한 입력 신호 */
.hnote-data{background:rgba(10,14,18,.42);border-color:rgba(255,255,255,.15)}
.hnote-data .hrole{color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
/* 솔루션 카드: 브랜드 강조 결과물 */
.hnote-sol{background:linear-gradient(160deg,rgba(64,34,14,.62),rgba(30,18,10,.6));border-color:rgba(255,150,90,.42);box-shadow:0 6px 22px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,170,110,.14)}
.hnote-sol:hover,.hnote-sol:focus-visible{border-color:rgba(255,150,90,.6);box-shadow:0 8px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,170,110,.2)}
.hnote-sol .hrole{color:#ffd9bd;background:rgba(255,138,74,.14);border:1px solid rgba(255,150,90,.4)}
.hnote-sol .hmain{color:#fff}
/* 타겟팅 핀: 사격 에임(크로스헤어) 마커 */
.hpin-aim{width:calc(16px*var(--as));height:calc(16px*var(--as));margin:calc(-8px*var(--as)) 0 0 calc(-8px*var(--as));background:radial-gradient(circle,rgba(245,245,242,.95) 0 15%,rgba(245,245,242,0) 24%);border:calc(1.5px*var(--as)) solid rgba(235,235,230,.85)}
.hpin-aim::before,.hpin-aim::after{content:"";position:absolute}
.hpin-aim::before{left:50%;top:calc(-5px*var(--as));bottom:calc(-5px*var(--as));width:calc(1.5px*var(--as));transform:translateX(-50%);background:linear-gradient(to bottom,rgba(240,240,238,.9) 0 calc(4px*var(--as)),transparent calc(4px*var(--as)) calc(100% - 4px*var(--as)),rgba(240,240,238,.9) calc(100% - 4px*var(--as)))}
.hpin-aim::after{top:50%;left:calc(-5px*var(--as));right:calc(-5px*var(--as));height:calc(1.5px*var(--as));transform:translateY(-50%);background:linear-gradient(to right,rgba(240,240,238,.9) 0 calc(4px*var(--as)),transparent calc(4px*var(--as)) calc(100% - 4px*var(--as)),rgba(240,240,238,.9) calc(100% - 4px*var(--as)))}
/* 솔루션 핀: AD 태그 + 클릭 가능 */
.hpin-sol{width:auto;height:auto;margin:0;transform:translate(-50%,-50%);border-radius:calc(5px*var(--as));padding:calc(2.5px*var(--as)) calc(6px*var(--as));background:rgba(10,14,18,.66);border:1px solid rgba(255,255,255,.85);cursor:pointer}
.hpin-sol::after{content:"AD";display:block;font-size:calc(9.5px*var(--as));font-weight:800;letter-spacing:.08em;color:#2b1204;line-height:1;font-family:"Plus Jakarta Sans","Noto Sans KR",sans-serif}
.hpin-sol:hover,.hpin-sol:focus-visible{transform:translate(-50%,-50%) scale(1.12)}
/* 솔루션 카드·연결선: 클릭 전에는 숨김(데스크탑 핀 레이어 한정) */
.hpin-layer .hnote-sol{opacity:0;pointer-events:none;transform:translateY(8px)}
.hpin-layer .hnote-sol .hbody{animation-name:none;opacity:1}
.hero-lines .ln-sol{opacity:0;transition:opacity .4s ease .15s}
.hpin-layer.sol3-on .hnote[data-f="3"],.hpin-layer.sol4-on .hnote[data-f="4"]{opacity:1;pointer-events:auto;transform:none;transition:opacity .45s ease .1s,transform .45s ease .1s}
/* 미공개 솔루션 카드는 호버 디밍 규칙보다 우선해 완전히 숨김 */
.hpin-layer:not(.sol3-on) .hnote[data-f="3"]{opacity:0!important;pointer-events:none!important}
.hpin-layer:not(.sol4-on) .hnote[data-f="4"]{opacity:0!important;pointer-events:none!important}
/* 화면 클릭 영역 */
.hzone{position:absolute;z-index:5;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer}
.hzone:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:-2px}
.hpin-layer.sol3-on .hzone[data-sol="3"],.hpin-layer.sol4-on .hzone[data-sol="4"]{display:none}
/* 리셋 버튼 */
.hreset{position:absolute;right:2.2%;bottom:5.5%;z-index:7;padding:calc(7px*var(--as)) calc(13px*var(--as));border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(8,12,14,.55);backdrop-filter:blur(6px);color:rgba(255,255,255,.78);font-size:calc(12px*var(--as));font-weight:500;cursor:pointer;opacity:0;transition:opacity .3s ease,border-color .2s ease,color .2s ease}
.hpin-layer.sol3-on .hreset,.hpin-layer.sol4-on .hreset{opacity:1}
.hreset:hover{border-color:rgba(255,255,255,.55);color:#fff}
.hreset:focus-visible{outline:1px solid rgba(255,255,255,.8);outline-offset:2px}
.hpin-layer.sol3-on .ln-f3,.hpin-layer.sol4-on .ln-f4{opacity:1}
/* 유도 칩 */
.hhint{position:absolute;z-index:6;transform:translate(-50%,-100%);width:max-content;white-space:nowrap;padding:calc(6px*var(--as)) calc(11px*var(--as));border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(8,12,14,.72);backdrop-filter:blur(6px);color:rgba(255,255,255,.92);font-size:calc(12px*var(--as));font-weight:600;letter-spacing:-.01em;cursor:pointer;opacity:0;transform:translate(-50%,-100%);animation:hinA .5s ease 1.1s forwards,hfloatA 2.6s ease-in-out 1.7s infinite alternate;transition:background .2s ease}
.hhint.off{display:none}
.hhint:hover{background:rgba(255,255,255,.12)}
.hhint:focus-visible{outline:1px solid rgba(255,255,255,.8);outline-offset:2px}
.hhint[data-sol="3"]{transform:translate(0,-50%);animation-name:hinC,hfloatC}
.hhint[data-sol="4"]{transform:translate(-100%,-50%);animation-name:hinB,hfloatB}
@keyframes hinC{from{opacity:0;transform:translate(6px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes hinA{from{opacity:0;transform:translate(-50%,calc(-100% + 6px))}to{opacity:1;transform:translate(-50%,-100%)}}
@keyframes hinB{from{opacity:0;transform:translate(calc(-100% - 6px),-50%)}to{opacity:1;transform:translate(-100%,-50%)}}
@keyframes hfloatA{from{transform:translate(-50%,-100%);box-shadow:0 0 6px rgba(255,255,255,.12)}to{transform:translate(-50%,calc(-100% - 7px));box-shadow:0 0 12px rgba(255,255,255,.22)}}
@keyframes hfloatC{from{transform:translate(0,-50%);box-shadow:0 0 6px rgba(255,255,255,.12)}to{transform:translate(0,calc(-50% - 7px));box-shadow:0 0 12px rgba(255,255,255,.22)}}
@keyframes hfloatB{from{transform:translate(-100%,-50%);box-shadow:0 0 6px rgba(255,255,255,.12)}to{transform:translate(-100%,calc(-50% - 7px));box-shadow:0 0 12px rgba(255,255,255,.22)}}
/* 대형 화면: 스케일 확대에 맞춘 좌표 보정(대상과의 거리 유지) */
@media(min-width:1920px){
  .hnote[data-f="1"]{left:19.5%!important}
  .hnote[data-f="2"]{left:80.5%!important}
  .hnote[data-f="4"]{left:52.5%!important}
}
@media(min-width:2560px){
  .hnote[data-f="1"]{left:18.5%!important}
  .hnote[data-f="2"]{left:79.5%!important}
  .hnote[data-f="4"]{left:51.5%!important}
}
@media(min-width:901px) and (max-height:720px){
  .hnote[data-f="3"]{top:16.5%!important}
  .hnote[data-f="2"]{top:62%!important}
}
.hero-cards-mobile{display:none;position:relative;z-index:5;flex-direction:column;gap:8px;padding:18px clamp(16px,4vw,32px) 18px;background:var(--surface-container-lowest,#0c0b0a)}
.hero-cards-mobile .mrow{display:grid;gap:8px}
.hero-cards-mobile .mrow-data{grid-template-columns:1fr 1fr 1fr}
.hero-cards-mobile .mrow-sol{grid-template-columns:1fr 1fr}
.hero-cards-mobile .mflow-arrow{display:flex;justify-content:center;padding:2px 0}
.hero-cards-mobile .mflow-arrow svg{width:18px;height:18px}
.hero-cards-mobile .mcard{position:relative;padding:11px 11px;border-radius:10px;background:rgba(28,26,24,.7);border:1px solid rgba(255,255,255,.14);min-width:0}
.hero-cards-mobile .mnum{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:15px;height:15px}
.hero-cards-mobile .mnum-aim{border-radius:50%;border:1.5px solid rgba(235,235,230,.75);background:radial-gradient(circle,rgba(240,240,238,.9) 0 18%,transparent 26%)}
.hero-cards-mobile .mnum-aim::before,.hero-cards-mobile .mnum-aim::after{content:"";position:absolute}
.hero-cards-mobile .mnum-aim::before{left:50%;top:-4px;bottom:-4px;width:1.5px;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(240,240,238,.8) 0 3px,transparent 3px calc(100% - 3px),rgba(240,240,238,.8) calc(100% - 3px))}
.hero-cards-mobile .mnum-aim::after{top:50%;left:-4px;right:-4px;height:1.5px;transform:translateY(-50%);background:linear-gradient(to right,rgba(240,240,238,.8) 0 3px,transparent 3px calc(100% - 3px),rgba(240,240,238,.8) calc(100% - 3px))}
.hero-cards-mobile .mnum-ad{width:auto;height:auto;border-radius:4px;padding:2.5px 5px;background:rgba(235,235,230,.9);color:#141210;font-size:9px;font-weight:800;letter-spacing:.08em}
.hero-cards-mobile .mcard.flash{border-color:rgba(255,255,255,.7);box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 18px rgba(255,255,255,.25);transition:border-color .2s ease,box-shadow .2s ease}
.hero-cards-mobile .mrow-data .hmain{font-size:12.5px}
.hero-cards-mobile .mrow-data .hcat{font-size:10.5px}
.hero-cards-mobile .mcard.hnote-sol{background:linear-gradient(160deg,rgba(64,34,14,.7),rgba(30,18,10,.7));border-color:rgba(255,150,90,.4)}
.hero-cards-mobile .hrole{margin-bottom:6px;padding:2px 6px;font-size:9px}
.hero-cards-mobile .hcat{white-space:normal;font-size:12px;gap:6px;margin-bottom:4px}
.hero-cards-mobile .hcat i{width:10px;height:2px}
.hero-cards-mobile .hcat svg{width:12px;height:12px}
.hero-cards-mobile .hmain{font-size:13.5px}
.hero-cards-mobile .hsub{font-size:12px;margin-top:3px}
/* 저해상도 데스크톱: 카드 축소 + 겹침 방지 재배치 */
@media(min-width:901px) and (max-width:1439px){
  .hero-pinhero{--as:.85}
  .hnote[data-f="1"]{left:17.5%!important;top:66%!important}
  .hnote[data-f="2"]{left:auto!important;right:1%!important;top:66%!important}
}
@media(min-width:901px) and (max-height:760px){
  .hnote[data-f="4"]{top:60%!important}
}
@media(max-width:1200px) and (min-width:901px){
  /* 스테이지가 뷰포트보다 넓어지며 좌우가 잘리지 않도록 섹션을 16:9로 고정 */
  .page-index .hero.hero-pinhero.hero-video-section{height:56.25vw!important;min-height:0!important}
  .hero-lines polyline{stroke-width:.8}
  .hnote[data-f="2"]{left:auto!important;right:1.5%!important}
}
@media(max-width:900px){
  .hero-lines,.hnote,.hhint,.hzone,.hreset{display:none}
  .hpin,.hpin-mo{animation:none;cursor:pointer}
  .hpin-mo{display:block}
  .hero-cards-mobile{display:flex}
  /* 이미지 전체(16:9)가 잘리지 않게 섹션 높이를 이미지 비율에 맞춤 */
  .page-index .hero.hero-pinhero.hero-video-section{height:56.25vw!important;min-height:0!important}
  .hpinstage{left:50%;transform:translate(-50%,-50%)}
}
@media(prefers-reduced-motion:reduce){
  .hbody{animation:none;opacity:1}
  .hpin{animation:none}
  .hpin,.hnote{transition:none}
  .hhint{animation:none;opacity:1}
}

/* v5.2 가시성 보정 */
.hhint:hover,.hhint:focus-visible{background:rgba(235,233,228,.95);color:#141210;border-color:rgba(255,255,255,.6)}
.hpin{background:rgba(240,240,238,.95);border:1px solid rgba(255,255,255,.9)}
.hpin-aim{background:radial-gradient(circle,rgba(245,245,242,1) 0 18%,rgba(245,245,242,0) 26%);border-color:rgba(235,235,230,.9)}
@keyframes hglow{from{box-shadow:0 0 0 calc(3px*var(--as)) rgba(255,255,255,.18),0 0 calc(11px*var(--as)) calc(3px*var(--as)) rgba(255,255,255,.4)}to{box-shadow:0 0 0 calc(4.5px*var(--as)) rgba(255,255,255,.28),0 0 calc(18px*var(--as)) calc(6px*var(--as)) rgba(255,255,255,.6)}}

/* v5.3 AD 태그 리파인 */
.hpin-sol{background:rgba(10,14,18,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);animation:none;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.hpin-sol::after{color:#fff;letter-spacing:.12em}
.hpin-sol:hover,.hpin-sol:focus-visible{border-color:rgba(255,255,255,.4);box-shadow:0 2px 10px rgba(0,0,0,.35)}

/* v5.4 회색 테두리 통일 */
.hhint{border-color:rgba(255,255,255,.22)}