/* ══════════════════════════════════════════════════════════════════
   확정 히어로 D1 — main.html 에서 그대로 뽑아 왔다 (2026-08-10)

   왜 뽑았나: 홈 고도화 시안에서 히어로를 새로 만들었더니 "확정한 히어로를
   써야 한다"는 지적을 받았다. 정본(main.html)과 시안이 같은 파일을 쓰게 해서
   두 벌로 갈라지지 않게 한다.

   ⛔수치를 손대려면 hx-hero.html · main.html 과 같이 고칠 것.
   ★:root 의 --wz(롱테일 이징)가 필요하다 — 이 파일 안에 같이 넣어 뒀다.
   ══════════════════════════════════════════════════════════════════ */
:root{ --wz:cubic-bezier(.22,1,.36,1); }

.hx{
  --h-bg:#070B16; --h-fg:#ffffff; --h-sub:#94A6C2;
  --h-badge-fg:#9EC2FF; --h-badge-bd:rgba(255,255,255,.22); --h-badge-bg:rgba(255,255,255,.04);
  --h-accent:var(--blue-l);
  --h-grid:rgba(255,255,255,.04);
  --h-glow1:rgba(46,111,242,.24); --h-glow2:rgba(31,85,200,.26);
  --h-card-bg:rgba(12,20,36,.9); --h-card-bd:rgba(255,255,255,.10); --h-card-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  --h-chip-fg:#93C0FF; --h-chip-bd:rgba(96,165,250,.32); --h-chip-bg:rgba(46,111,242,.12);
  --h-meta:#8FA1BC; --h-meta2:#7E93B2;
  --h-shot-bg:linear-gradient(160deg,#132745,#0B1B33); --h-shot-bd:rgba(255,255,255,.07);
  --h-ln:rgba(255,255,255,.09); --h-ln-a:rgba(77,162,255,.40);
  --h-b2-bg:rgba(255,255,255,.06); --h-b2-bd:rgba(255,255,255,.22); --h-b2-fg:#fff; --h-b2-bd-h:rgba(255,255,255,.5);
  --h-b1-shadow:0 18px 40px -14px rgba(31,85,200,.75);
}
.hx{ position:relative; min-height:100vh; display:flex; flex-direction:column; background:var(--h-bg); color:var(--h-fg); overflow:hidden; transition:background .5s var(--wz), color .5s var(--wz); }
.hx .glow{ position:absolute; inset:0; pointer-events:none; }
.hx .glow i{ position:absolute; display:block; border-radius:50%; }
.hx .g1{ width:62%; height:52%; left:12%; top:-16%; background:radial-gradient(ellipse at center, var(--h-glow1), transparent 70%); }
.hx .g2{ width:46%; height:44%; right:-6%; bottom:-14%; background:radial-gradient(ellipse at center, var(--h-glow2), transparent 70%); }
.hx .hxgrid{ position:absolute; inset:0; background-image:linear-gradient(var(--h-grid) 1px,transparent 1px),linear-gradient(90deg,var(--h-grid) 1px,transparent 1px); background-size:76px 76px; mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 78%); }

.hx-in{ position:relative; z-index:3; width:100%; max-width:1520px; margin:0 auto; padding:clamp(128px,15vh,190px) 32px 0; text-align:center; }
.hx .hxb{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--h-badge-fg); border:1px solid var(--h-badge-bd); background:var(--h-badge-bg); border-radius:999px; padding:9px 18px 9px 14px; transition:color .5s var(--wz), border-color .5s var(--wz), background .5s var(--wz); }
.hx .hxb .dt{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--blue); }
.hx .hxb .dt::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--blue-l); animation:hxpg 1.9s var(--wz) infinite; }
@keyframes hxpg{ 0%{ transform:scale(1); opacity:.75; } 100%{ transform:scale(2.8); opacity:0; } }
/* ★헤드라인 80px 고정(2026-07-27 사장님 지시) — 좁은 화면에서만 축소 */
.hx h1{ margin:clamp(22px,3.2vh,42px) 0 0; font-size:80px; font-weight:600; letter-spacing:-.032em; line-height:1.2; }
@media(max-width:900px){ .hx h1{ font-size:clamp(38px,8.6vw,80px); } }
.hx .rot{ display:block; height:1.2em; overflow:hidden; contain:paint; }
.hx .rot .tr{ display:flex; flex-direction:column; align-items:center; transition:transform .7s var(--wz); }
.hx .rot .tr span{ height:1.2em; line-height:1.2; white-space:nowrap; color:var(--h-accent); }
.hx .lead{ margin:clamp(16px,2.2vh,30px) auto 0; max-width:640px; font-size:18.5px; line-height:1.75; color:var(--h-sub); transition:color .5s var(--wz); }

/* ── CTA (위닝피피티 홈 히어로 모션3 이식: 테두리 러너 + 자간 확장) ── */
@property --hxAngle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.hx .cta{ margin-top:clamp(22px,3.4vh,46px); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hx .b{ position:relative; z-index:0; display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-size:17px; font-weight:600; padding:15px 40px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:letter-spacing .4s ease, background .3s, border-color .3s, color .3s; }
/* ★var(--hxAngle)은 반드시 ::before 자신의 background 선언 안에서 써야 한다.
   색을 커스텀 변수에 담아 버튼(.b1/.b2)에 두면 각도가 그 요소에서 0deg로 굳어져 회전이 멈춘다. */
.hx .b::before{ content:''; position:absolute; inset:-2.5px; z-index:1; border-radius:inherit; padding:2.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
.hx .b:hover{ letter-spacing:.05em; }
.hx .b:hover::before{ opacity:1; animation:hxRunner 1.6s linear infinite; }
@keyframes hxRunner{ to{ --hxAngle:360deg; } }
.hx .b1::before{ background:conic-gradient(from var(--hxAngle),transparent 0deg,transparent 250deg,rgba(224,239,255,.35) 290deg,#cfe4ff 330deg,#ffffff 352deg,transparent 360deg); }
.hx .b2::before{ background:conic-gradient(from var(--hxAngle),transparent 0deg,transparent 250deg,rgba(96,165,250,.3) 290deg,#93c5fd 330deg,#e0efff 352deg,transparent 360deg); }
.hx .b1{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:var(--h-b1-shadow); }
.hx .b1:hover{ background:var(--blue-d); }
.hx .b2{ background:var(--h-b2-bg); border-color:var(--h-b2-bd); color:var(--h-b2-fg); }
.hx .b2:hover{ border-color:var(--h-b2-bd-h); }

/* ── 하단 사례 카드 마퀴 ── */
.hx .strip{ position:relative; z-index:2; margin-top:auto; padding:clamp(60px,8vh,104px) 0 clamp(52px,6.5vh,84px); overflow:hidden; display:flex; flex-direction:column; gap:clamp(14px,1.8vh,20px); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.hx .strip .hxrow{ display:flex; gap:18px; width:max-content; animation:hxSlide 52s linear infinite; }
.hx .strip .hxrow.rev{ animation:hxSlideRev 61s linear infinite; }
@keyframes hxSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes hxSlideRev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.hx .hxcard{ width:294px; border-radius:16px; border:1px solid var(--h-card-bd); background:var(--h-card-bg); padding:18px; box-shadow:var(--h-card-shadow); transition:background .5s var(--wz), border-color .5s var(--wz), box-shadow .5s var(--wz); }
.hx .hxcard .hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hx .hxcard .tag{ font-size:11.5px; font-weight:600; color:var(--h-chip-fg); border:1px solid var(--h-chip-bd); background:var(--h-chip-bg); border-radius:999px; padding:4px 11px; white-space:nowrap; transition:color .5s var(--wz), border-color .5s var(--wz), background .5s var(--wz); }
.hx .hxcard .who{ font-size:12.5px; color:var(--h-meta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hx .hxcard .kind{ margin:10px 0 13px; font-size:17px; font-weight:600; letter-spacing:-.015em; color:var(--h-fg); text-align:left; }
/* 이미지 슬롯 — 실제 작업물 캡처로 교체 (CARDS[].img 만 바꾸면 됨) */
.hx .hxcard .shot{ position:relative; height:clamp(124px,17vh,184px); border-radius:10px; background:var(--h-shot-bg); border:1px solid var(--h-shot-bd); overflow:hidden; transition:background .5s var(--wz), border-color .5s var(--wz); }
.hx .hxcard .shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.hx .hxcard .ph{ position:absolute; inset:0; padding:14px; display:flex; flex-direction:column; gap:8px; }
.hx .hxcard .ph .ln{ height:9px; border-radius:3px; background:var(--h-ln); }
.hx .hxcard .ph .ln.a{ width:64%; background:var(--h-ln-a); } .hx .hxcard .ph .ln.b{ width:88%; } .hx .hxcard .ph .ln.c{ width:46%; } .hx .hxcard .ph .ln.d{ width:74%; }
.hx .hxcard .ph .slot{ margin-top:auto; align-self:flex-start; font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--h-meta2); border:1px dashed var(--h-shot-bd); border-radius:6px; padding:4px 8px; }

@media(max-width:900px){
  .hx-in{ padding-top:130px; } .hx .strip{ padding-top:44px; }
  .hx .hxcard{ width:252px; } .hx .hxcard .shot{ height:148px; }
}
@media(prefers-reduced-motion:reduce){
  .hx .rot .tr,.hx .strip .hxrow,.hx .strip .hxrow.rev,.hx .hxb .dt::after{ animation:none; transition:none; }
  .hx .b:hover::before{ animation:none; opacity:0; } .hx .b:hover{ letter-spacing:normal; }
}