/* hero-cardfan.css — C+ 카드 팬 히어로 (스펙: docs/plans/2026-07-05-hero-cardfan-cplus-spec.md)
   #hero-slider-wrap 내부 전용. 래퍼 자체(id/높이)는 index.html Tailwind 클래스가 관리. */

/* ── 배경: 앰비언트(기기색 radial 2겹) ── */
#hero-slider-wrap{position:relative}
.hcf-amb{position:absolute; inset:0; opacity:0; transition:opacity .95s ease; pointer-events:none; z-index:0}
.hcf-amb.on{opacity:1}
.hcf-amb-0{background:radial-gradient(72% 104% at 76% 38%, rgba(30,58,138,.15), transparent 66%),
  radial-gradient(52% 88% at 10% 92%, rgba(30,58,138,.06), transparent 70%)}
.hcf-amb-1{background:radial-gradient(72% 104% at 76% 38%, rgba(124,111,240,.17), transparent 66%),
  radial-gradient(52% 88% at 10% 92%, rgba(124,111,240,.07), transparent 70%)}
.hcf-amb-2{background:radial-gradient(72% 104% at 76% 38%, rgba(242,128,43,.16), transparent 66%),
  radial-gradient(52% 88% at 10% 92%, rgba(242,128,43,.06), transparent 70%)}

/* ── 고스트 타이포 (v11 확정: Pretendard 900 솔리드 블랙 7%, 테두리 없음) ── */
.hcf-ghost{position:absolute; right:28px; top:30px; z-index:1; height:110px; overflow:hidden; pointer-events:none}
.hcf-ghost span{display:block; font-size:104px; font-weight:900; letter-spacing:-.045em; line-height:1.02;
  color:rgba(20,21,25,.07); white-space:nowrap;
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}

/* ── 좌측 텍스트 블록 ── */
.hcf-text{position:absolute; left:0; top:0; bottom:0; width:56%; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; gap:14px; padding:0 12px 0 64px; z-index:6}
.hcf-badge{font-size:12px; font-weight:800; letter-spacing:.1em; color:#2B4BFF; background:rgba(43,75,255,.08);
  border-radius:99px; padding:5px 13px}
.hcf-head{font-size:44px; font-weight:900; letter-spacing:-.03em; line-height:1.18; color:#141519; margin:0; white-space:pre}
.hcf-rot{position:relative; display:inline-block; height:1.18em; overflow:hidden; vertical-align:bottom; color:#2B4BFF}
.hcf-rot .w{position:absolute; left:0; top:0; display:flex; white-space:pre}
.hcf-rot .ch{display:inline-block; will-change:transform}
.hcf-sub{font-size:15px; color:#5C6167; font-weight:500; margin:0; min-height:24px}
.hcf-sub b{color:#2F343B}
.hcf-cta{display:inline-flex; align-items:center; gap:8px; background:#2B4BFF; color:#fff; font-size:15px;
  font-weight:800; border-radius:99px; padding:12px 26px; margin-top:6px; box-shadow:0 10px 24px rgba(43,75,255,.28);
  text-decoration:none; pointer-events:auto}

/* ── 우측 카드 팬 ── */
.hcf-stage{position:absolute; right:40px; top:50%; transform:translateY(-50%); width:380px; height:83%; z-index:5}
.hcf-card{position:absolute; left:50%; top:50%; width:200px; height:286px; margin:-143px 0 0 -100px;
  background:#fff; border:1px solid #ECEBE6; border-radius:20px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; text-decoration:none; will-change:transform;
  transition:filter .55s ease, box-shadow .55s ease}
.hcf-card img{height:206px; width:auto; max-width:92%; object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(20,22,26,.14)); animation:hcfFloat 5.6s ease-in-out infinite}
.hcf-card:nth-child(2) img{animation-delay:-1.8s}
.hcf-card:nth-child(3) img{animation-delay:-3.4s}
@keyframes hcfFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
.hcf-card b{font-size:13px; color:#2F343B; font-weight:800; max-width:88%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.hcf-card i{font-size:11px; font-style:normal; color:#8A8F96; margin-top:-3px; max-width:88%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hcf-card span{font-size:10.5px; font-weight:800; color:#2B4BFF; background:rgba(43,75,255,.08);
  border-radius:99px; padding:2px 9px}
.hcf-card span:empty{display:none}
.hcf-card.front{filter:blur(0) saturate(1); box-shadow:0 22px 48px rgba(20,22,26,.18); z-index:3}
.hcf-card.back{filter:blur(1.7px) saturate(.88); box-shadow:0 10px 22px rgba(20,22,26,.10)}

/* ── 도트 타이머 ── */
.hcf-dots{position:absolute; right:40px; bottom:18px; width:380px; display:flex; justify-content:center;
  gap:7px; z-index:6}
.hcf-dots u{position:relative; width:7px; height:7px; border-radius:99px; background:#E2E1DC; overflow:hidden;
  text-decoration:none}
.hcf-dots u.on{width:24px; background:#DFE4FA}
.hcf-dots u b{position:absolute; inset:0; background:#2B4BFF; border-radius:99px; transform:scaleX(0);
  transform-origin:left center}

/* ── 모바일 (<768px) — 래퍼 높이는 h-[65vw] min-h-[360px] (fix 브랜치 값) ── */
@media (max-width: 767px){
  .hcf-text{width:100%; padding:0 22px; align-items:center; text-align:center; justify-content:flex-start;
    top:26px; bottom:auto}
  .hcf-badge{font-size:10px; padding:4px 10px}
  .hcf-head{font-size:24px}
  .hcf-sub{font-size:11.5px; min-height:17px; max-width:92%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .hcf-cta{font-size:12px; padding:8px 18px; margin-top:2px}
  .hcf-ghost{right:12px; top:12px; height:54px}
  .hcf-ghost span{font-size:50px}
  .hcf-stage{right:50%; transform:translate(50%,0); top:auto; bottom:6px; width:300px; height:170px}
  .hcf-card{width:104px; height:150px; margin:-75px 0 0 -52px}
  .hcf-card img{height:100px}
  .hcf-card b{font-size:10px}
  .hcf-card i{display:none}
  .hcf-card span{font-size:8.5px; padding:1px 7px}
  .hcf-dots{right:50%; transform:translateX(50%); width:300px; bottom:4px}
}

@media (prefers-reduced-motion: reduce){
  .hcf-card img{animation:none}
  .hcf-amb{transition:none}
}