@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   HERO v11 — 패널 리듬판 · 면 차오름 시그니처 (S52-P4 · 2026-08-29)
   범위: 홈 `<section class="hero hv11">` 내부 전용. 전 선택자 .hero.hv11 스코프.
   설계: 점진 강화 — 기본 상태 = 완성 정적 레이아웃(JS 없음·감속 모드에서도 성립).
        JS 가 동작 환경에서만 .hv11-anim 을 붙여 안무를 재생한다(세션당 1회).
   자산: img/hero_v8/ 재사용(경로명은 회차 잔재이며 내용은 v11 정본).
   무접촉: 구 히어로 규칙·head.php. CSS 는 PHP 조각이 <link> 로 물어 온다.
   ═══════════════════════════════════════════════════════════════════ */

.hero.hv11{
  --h11-gold:#C9A96E; --h11-goldD:#B08F55; --h11-nvL:#24365E; --h11-nvM:#1E2C4F; --h11-nvS:#26314F;
  display:block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E") repeat,
    linear-gradient(104deg,transparent 26%,rgba(201,169,110,.052) 41%,rgba(255,255,255,.05) 49%,rgba(201,169,110,.028) 58%,transparent 73%),
    radial-gradient(130% 90% at 50% -14%,#22335A 0%,#1B2A4A 46%,#131E36 100%);
  background-blend-mode:overlay,normal,normal;
}
.hero.hv11::after{content:'';position:absolute;inset:0;z-index:12;pointer-events:none;
  background:radial-gradient(150% 105% at 50% 50%,transparent 60%,rgba(10,16,30,.38) 100%);}

@keyframes hv11CuePulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ── 헤드라인 (정적 = 상단 안착 상태) ── */
.hv11-t1{position:absolute;left:0;right:0;top:12%;z-index:8;text-align:center;pointer-events:none;}
.hv11-kick{width:30px;height:2px;background:var(--h11-gold);margin:0 auto 18px;}
.hv11-hl{margin:0;font-family:var(--font-serif,'Noto Serif KR',serif);font-weight:700;color:#fff;
  letter-spacing:-.05em;font-size:clamp(28px,3.2vw,46px);line-height:1.14;
  text-shadow:0 2px 30px rgba(10,16,30,.5);}
.hv11-hl span{display:block;}
.hv11-hl .hv11-dim{color:rgba(255,255,255,.52);font-size:.62em;letter-spacing:-.03em;}
.hv11-hl em{font-style:normal;color:var(--h11-gold);}

/* ── 패널 필드 ── */
.hv11-field{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;top:31%;
  width:1560px;max-width:90vw;z-index:5;}
.hv11-pn{position:absolute;bottom:0;overflow:hidden;}
.hv11-pn::after{content:'';position:absolute;inset:0;pointer-events:none;}
.hv11-pn img{position:absolute;bottom:0;left:-9999px;right:-9999px;margin:0 auto;width:auto;max-width:none;}
.hv11-lb{position:absolute;left:0;right:0;top:0;padding:12px 12px 0;z-index:2;}
.hv11-pf .hv11-lb{padding:17px 17px 0;}
.hv11-lb b{display:block;font-family:var(--font-serif,'Noto Serif KR',serif);
  font-size:15px;font-weight:700;letter-spacing:-.01em;}
.hv11-lb i{font-style:normal;display:block;font-size:10.5px;margin-top:2px;letter-spacing:.05em;}
.hv11-lb u{display:block;text-decoration:none;font-family:var(--font-serif,'Noto Serif KR',serif);
  font-style:italic;font-size:11.5px;letter-spacing:.02em;margin-top:5px;}

/* 대표 2패널 — 컬러 · 크림 면 */
.hv11-pf{width:17.31%;z-index:6;}
.hv11-pn::before{content:'';position:absolute;inset:0;transform-origin:50% 100%;}
.hv11-pf1{left:0;top:0;}.hv11-pf1::before{background:linear-gradient(168deg,#F8F3EA 0%,#F2EADB 46%,#EADFCB 100%);}
.hv11-pf2{left:17.95%;top:0;}.hv11-pf2::before{background:linear-gradient(168deg,#F6F0E5 0%,#EFE6D4 46%,#E6DAC3 100%);}
.hv11-pf img{height:80%;filter:drop-shadow(0 18px 40px rgba(6,10,22,.45));}
.hv11-pf .hv11-lb b{color:#16213B;font-size:21px;letter-spacing:-.005em;}
.hv11-pf .hv11-lb i{color:#5C5C5C;font-size:11px;letter-spacing:.07em;margin-top:4px;}
.hv11-pf .hv11-lb u{display:inline-block;margin-top:11px;padding:6px 13px;font-style:normal;
  font-family:var(--font-body,'Pretendard Variable',sans-serif);font-weight:600;
  font-size:13.5px;line-height:1.2;letter-spacing:.015em;color:var(--h11-gold);
  background:#1B2A4A;border:0;box-shadow:0 2px 10px rgba(27,42,74,.22);}
.hv11-pf::after{border:1px solid rgba(176,143,85,.62);}

/* 팀 6패널 — 네이비 면 · 전원 컬러(v15 확정) */
.hv11-pt{width:10.043%;}
.hv11-pt img{height:80%;filter:drop-shadow(0 10px 22px rgba(6,10,22,.35));}
.hv11-pt .hv11-lb b{color:rgba(255,255,255,.95);font-size:14.5px;}
.hv11-pt .hv11-lb i{color:rgba(255,255,255,.62);font-size:10.5px;letter-spacing:.05em;margin-top:3px;}
.hv11-pt .hv11-lb u{font-style:normal;font-family:var(--font-body,'Pretendard Variable',sans-serif);font-weight:600;font-size:10.5px;letter-spacing:.02em;margin-top:4px;color:var(--h11-gold);}
.hv11-pt::after{border:1px solid rgba(201,169,110,.30);}
.hv11-pt1{left:36.540%;top:0;}.hv11-pt1::before{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%),var(--h11-nvL);}
.hv11-pt2{left:47.223%;top:0;}.hv11-pt2::before{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%),var(--h11-nvM);}
.hv11-pt3{left:57.906%;top:0;}.hv11-pt3::before{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%),var(--h11-nvS);}
.hv11-pt4{left:68.589%;top:0;}.hv11-pt4::before{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%),var(--h11-nvM);}
.hv11-pt5{left:79.272%;top:0;}.hv11-pt5::before{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%),var(--h11-nvL);}
.hv11-pt6{left:89.955%;top:0;}.hv11-pt6::before{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%),var(--h11-nvS);}

/* ── 스크롤 큐 ── */
.hv11-scrolldn{position:absolute;left:50%;bottom:14px;width:1px;height:40px;z-index:8;
  background:linear-gradient(to bottom,var(--h11-gold),transparent);}

/* ═══ 안무 — .hv11-anim 이 붙은 경우에만 ═══ */
@keyframes hv11Fade{from{opacity:0}}
@keyframes hv11Up{from{opacity:0;transform:translateY(60px)}}
@keyframes hv11SlamX{from{opacity:0;transform:translateX(140px)}}
@keyframes hv11Kick{from{opacity:0;transform:scaleX(0)}}
@keyframes hv11THold{from{transform:translateY(46vh) scale(2.05)}0.1%{}}

.hv11-anim .hv11-t1{animation:hv11THold .9s cubic-bezier(.6,0,.2,1) 1.4s both;}
.hv11-anim .hv11-kick{animation:hv11Kick .8s cubic-bezier(.16,1,.3,1) .2s both;}
.hv11-anim .hv11-hl span{animation:hv11Up 1.1s cubic-bezier(.16,1,.3,1) both;}
.hv11-anim .hv11-hl span:nth-child(1){animation-delay:.35s;}
.hv11-anim .hv11-hl span:nth-child(2){animation-delay:.6s;}
@keyframes hv11Surf{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hv11Rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes hv11FadeIn{from{opacity:0}to{opacity:1}}
.hv11-anim .hv11-pn::before{animation:hv11Surf .5s cubic-bezier(.3,.9,.3,1) both;}
.hv11-anim .hv11-pn img{animation:hv11Up .65s cubic-bezier(.16,1,.3,1) both;}
.hv11-anim .hv11-pf1::before{animation-delay:3.9s;}.hv11-anim .hv11-pf1 img{animation-delay:4.08s;}
.hv11-anim .hv11-pf2::before{animation-delay:4.0s;}.hv11-anim .hv11-pf2 img{animation-delay:4.18s;}
/* ── 인트로: 대표 2인 대형 프레임 크로스페이드 (안무 전용 · 정적/감속은 미노출) ── */
.hv11-intro{opacity:0;position:absolute;left:50%;transform:translateX(-50%);bottom:64px;top:31%;
  width:1248px;max-width:94vw;z-index:7;pointer-events:none;}
.hv11-ip{position:absolute;top:0;bottom:0;width:24%;overflow:hidden;}
.hv11-ip::before{content:'';position:absolute;inset:0;transform-origin:50% 100%;}
.hv11-ip1{left:25.2%;}.hv11-ip1::before{background:linear-gradient(180deg,#F1E9DC,#E7D9C2);}
.hv11-ip2{left:50.8%;}.hv11-ip2::before{background:linear-gradient(180deg,#EFE6D5,#E2D2B6);}
.hv11-ip::after{content:'';position:absolute;inset:0;border:1px solid rgba(176,143,85,.5);pointer-events:none;}
.hv11-ip img{position:absolute;bottom:0;left:-9999px;right:-9999px;margin:0 auto;max-width:none;height:84%;
  filter:drop-shadow(0 18px 40px rgba(6,10,22,.45));}
.hv11-ip .hv11-lb b{font-size:22px;}
.hv11-ip .hv11-lb{padding:16px 16px 0;}
@keyframes hv11IntroOut{to{opacity:0;visibility:hidden}}
.hv11-anim .hv11-ip::before{animation:hv11Surf .55s cubic-bezier(.3,.9,.3,1) both;}
.hv11-anim .hv11-ip img{animation:hv11Up .7s cubic-bezier(.16,1,.3,1) both;}
.hv11-anim .hv11-ip1::before{animation-delay:1.7s;}.hv11-anim .hv11-ip1 img{animation-delay:1.92s;}
.hv11-anim .hv11-ip2::before{animation-delay:1.84s;}.hv11-anim .hv11-ip2 img{animation-delay:2.06s;}
.hv11-anim .hv11-ip .hv11-lb{animation:hv11Fade .6s ease 2.35s both;}
.hv11-anim .hv11-intro{opacity:1;animation:hv11IntroOut .55s ease 3.5s forwards;}
.hv11-anim .hv11-pt1::before{animation-delay:4.3s;}.hv11-anim .hv11-pt1 img{animation-delay:4.46s;}
.hv11-anim .hv11-pt2::before{animation-delay:4.42s;}.hv11-anim .hv11-pt2 img{animation-delay:4.58s;}
.hv11-anim .hv11-pt3::before{animation-delay:4.54s;}.hv11-anim .hv11-pt3 img{animation-delay:4.7s;}
.hv11-anim .hv11-pt4::before{animation-delay:4.66s;}.hv11-anim .hv11-pt4 img{animation-delay:4.82s;}
.hv11-anim .hv11-pt5::before{animation-delay:4.78s;}.hv11-anim .hv11-pt5 img{animation-delay:4.94s;}
.hv11-anim .hv11-pt6::before{animation-delay:4.9s;}.hv11-anim .hv11-pt6 img{animation-delay:5.06s;}
.hv11-anim .hv11-lb{animation:hv11Fade .8s ease 5.3s both;}
.hv11-anim .hv11-scrolldn{animation:hv11Fade 1s ease 5.6s both, hv11CuePulse 2.6s ease-in-out 6.8s infinite;}

/* ── 모바일: 2×4 그리드 ── */
@media (max-width:1040px){
  .hero.hv11{min-height:0;padding:0 0 30px;}

  .hv11-t1{position:static;padding:150px 16px 8px;}
  .hv11-hl{font-size:33px;}
  .hv11-hl .hv11-dim{font-size:.66em;}
  .hv11-field{position:static;transform:none;width:auto;max-width:none;margin:18px 12px 0;
    display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
  .hv11-pn{position:relative;left:auto;top:auto;width:auto;}
  .hv11-pf{grid-column:span 3;height:300px;}
  .hv11-pt{grid-column:span 2;height:190px;}
  .hv11-pf img{height:68%;}
  .hv11-pt img{height:68%;}
  .hv11-lb{padding:9px 9px 0;}
  .hv11-pf .hv11-lb b{font-size:15px;}
  .hv11-pt .hv11-lb b{font-size:12px;}
  .hv11-pt .hv11-lb i{font-size:9.5px;}
  .hv11-pt .hv11-lb u{font-size:9px;margin-top:3px;}
  .hv11-scrolldn{display:none;}
  .hv11-intro{display:none;}

  /* 모바일 — 스크롤 연동 재생(.hv11-io). JS 없으면 규칙 자체가 안 걸려 완성 정적 그대로 */
  .hv11-anim .hv11-t1,.hv11-anim .hv11-kick,.hv11-anim .hv11-hl span,
  .hv11-anim .hv11-pn,.hv11-anim .hv11-lb,
  .hv11-anim .hv11-pn::before,.hv11-anim .hv11-pn img{animation:none;}

  .hv11-io .hv11-pn::before{transform:scaleY(0);}
  .hv11-io .hv11-pn img{opacity:0;transform:translateY(26px);}
  .hv11-io .hv11-pn .hv11-lb{opacity:0;}
  .hv11-io .hv11-pn.hv11-in::before{
    animation:hv11Surf .46s cubic-bezier(.3,.9,.3,1) var(--hv11-d,0s) both;}
  .hv11-io .hv11-pn.hv11-in img{
    animation:hv11Rise .58s cubic-bezier(.16,1,.3,1) calc(var(--hv11-d,0s) + .14s) both;}
  .hv11-io .hv11-pn.hv11-in .hv11-lb{
    animation:hv11FadeIn .5s ease calc(var(--hv11-d,0s) + .34s) both;}
}

/* ══ 호버 확장 — CREDENTIAL 펼침 (S53-F · 2026-08-30) ══
   폭·좌표·라벨 무변. 라벨은 패널 상단, 인물은 상단 106px 아래부터라
   CREDENTIAL 은 패널 하단에서 올린다(위로 펼치면 얼굴을 가린다).
   정렬에 transform 을 쓰지 않는다 — translateY 는 등장 모션 전용이다. */
.hv11-cred{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 12px 12px;
  background:linear-gradient(to top,rgba(11,18,32,.96) 0,rgba(11,18,32,.96) calc(100% - 18px),rgba(11,18,32,0) 100%);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1);}
.hv11-pf .hv11-cred{padding:22px 17px 14px;}
.hv11-cred i{display:block;font-style:normal;font-family:var(--font-display,'Cormorant Garamond',serif);
  font-size:9px;letter-spacing:.28em;color:var(--h11-gold);margin-bottom:6px;}
.hv11-cred em{display:block;font-style:normal;font-size:10.5px;line-height:1.55;color:rgba(255,255,255,.92);}
.hv11-pf .hv11-cred em{font-size:11.5px;}
.hv11-field .hv11-pn{transition:opacity .28s ease,filter .28s ease;}
.hv11-field:hover .hv11-pn{filter:grayscale(1);opacity:.55;}
.hv11-field .hv11-pn:hover,.hv11-field .hv11-pn:focus-visible{filter:none;opacity:1;}
.hv11-field .hv11-pn:focus-visible{outline:none;}
.hv11-field .hv11-pn:hover::after,.hv11-field .hv11-pn:focus-visible::after{border:1px solid rgba(201,169,110,.62);}
.hv11-pn:hover .hv11-cred,.hv11-pn:focus-visible .hv11-cred{opacity:1;transform:none;}
@media (hover:none){
  .hv11-field:hover .hv11-pn{filter:none;opacity:1;}
  .hv11-cred{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .hv11-field .hv11-pn,.hv11-cred{transition:none;}
  .hv11-cred{transform:none;}
}

/* ══ 패널 링크화 — 프로필 이동 어포던스 (S53-G · 2026-08-30) ══
   골드는 연결 조직이다. 이동 표시에 쓰고 CTA 로 쓰지 않는다.
   화살표는 상시 노출한다 — 호버가 없는 화면에서도 「눌린다」가 보여야 한다. */
a.hv11-pn{display:block;text-decoration:none;color:inherit;cursor:pointer;}
.hv11-go{position:absolute;top:12px;right:12px;z-index:4;width:14px;height:14px;
  color:var(--h11-gold);opacity:.62;pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1);}
.hv11-go svg{display:block;width:100%;height:100%;}
.hv11-pf .hv11-go{top:17px;right:17px;width:16px;height:16px;color:#1B2A4A;opacity:.5;}
.hv11-pn:hover .hv11-go,.hv11-pn:focus-visible .hv11-go{opacity:1;transform:translateX(3px);}
.hv11-pf:hover .hv11-go,.hv11-pf:focus-visible .hv11-go{opacity:.85;}
@media (hover:none){
  .hv11-go{opacity:.8;}
  .hv11-pf .hv11-go{opacity:.62;}
}
@media (prefers-reduced-motion:reduce){
  .hv11-go{transition:none;}
  .hv11-pn:hover .hv11-go,.hv11-pn:focus-visible .hv11-go{transform:none;}
}