/* 홈 메인 배너 캐러셀 (home-banner.js) — 탑툰챗형: 가운데 큰 슬라이드 + 양옆 반투명 미리보기 + 진행 막대 */
.home-feature.has-banner{display:block;position:relative;min-height:0;padding:0;margin:0 0 8px;background:none;border:0;border-radius:0;overflow:visible}
.home-feature.has-banner>:not(.home-banner):not(.banner-glow){display:none}
/* 옛 기본 이야기(서우) 소개 카드는 배너가 오기 전에도 보이지 않는다(10-20 고객 피드백 "새로고침하면 서우가 잠깐 보인다").
   배너 자리만 잡아 두고(내려오면 밀리지 않게), 배너가 없거나 받지 못하면 접는다(home-banner.js banner-empty) */
.home-feature>.feature-copy,.home-feature>.feature-art{display:none}
.home-feature:not(.has-banner){visibility:hidden}
.home-feature.banner-empty{display:none}
/* 배너가 오기 전 자리는 실제 배너와 같은 높이(10-22 고객: 새로고침 때 아래 레일이 110px 밀렸다). 폭 계산은 home-banner.js metrics와 같다 —
   PC는 가운데 한 장 55%(최소 550px) · 625:325 + 위아래 22px + 진행 막대 13px, 휴대폰은 꽉 찬 가로형 390:203(막대는 위에 겹침).
   한 화면 2~3장 설정이거나 휴대폰에 세로형(.portrait 390:260) 슬라이드가 섞이면 그만큼 어긋난다 */
.home-feature:not(.has-banner):not(.banner-empty){display:block;container-type:inline-size;min-height:0;margin:0 0 8px;padding:0;border:0;background:none}
.home-feature:not(.has-banner):not(.banner-empty)::before{content:"";display:block;height:calc(min(100cqw,max(550px,55cqw)) * 325 / 625 + 57px)}
.banner-glow{position:fixed;left:0;right:0;top:56px;height:450px;z-index:-1;pointer-events:none;overflow:hidden}
.banner-glow img{position:absolute;inset:-25% -10% 0;width:120%;height:125%;object-fit:cover;filter:blur(80px) saturate(1.5);opacity:0;transition:opacity .7s}
.banner-glow img.on{opacity:.5}
.banner-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,var(--bg))}
.home-banner{position:relative;z-index:1;user-select:none}
.banner-viewport{overflow:hidden;touch-action:pan-y;cursor:grab;padding:22px 0}
.banner-viewport:active{cursor:grabbing}
.banner-track{display:flex;will-change:transform;align-items:center}
.banner-track.animate{transition:transform .5s ease-in-out}
.banner-slide{position:relative;flex:0 0 var(--slide-w,55%);aspect-ratio:625/325;overflow:hidden;color:#fff;text-decoration:none;background:#1a1a1a;border-radius:18px;box-sizing:border-box;transition:transform .5s ease-in-out,opacity .5s ease-in-out}
.home-banner:not([data-per="2"]):not([data-per="3"]) .banner-slide:not(.active){transform:scale(.773);opacity:.5}
.home-banner:not([data-per="2"]):not([data-per="3"]) .banner-slide:not(.active):hover{opacity:.7}
.banner-slide.active{box-shadow:0 0 0 1px #ffffff1a;z-index:1}
.banner-track.jump .banner-slide{transition:none}
.banner-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.banner-slide.portrait .banner-back{filter:blur(26px) brightness(.6);transform:scale(1.15)}
.banner-face{position:absolute;right:8%;bottom:0;height:100%;width:auto;max-width:52%;object-fit:cover;object-position:top;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%);mask-image:linear-gradient(90deg,transparent,#000 20%)}
.banner-shade{position:absolute;inset:50% 0 0;background:linear-gradient(to top,#0a0a0a,#0a0a0a99 50%,transparent);pointer-events:none}
.banner-copy{position:absolute;z-index:1;left:32px;bottom:32px;max-width:min(420px,70%);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.banner-badges{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.banner-badge{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid;border-radius:5px;background:#0a0a0ad9;font-size:11px;font-weight:700;line-height:1}
.banner-badge.pink{color:#ff416f;border-color:#ff416f80}.banner-badge.teal{color:#00ddca;border-color:#00ddca80}
.banner-copy strong{margin-top:4px;font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.025em;white-space:pre-line}
.banner-copy p{margin:0;color:#d4d4d4;font-size:16px;font-weight:500;line-height:1.6;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.home-banner[data-per="2"] .banner-copy strong,.home-banner[data-per="3"] .banner-copy strong{font-size:20px}
.home-banner[data-per="3"] .banner-face{display:none}
.banner-fade{position:absolute;top:0;bottom:0;width:18%;z-index:2;pointer-events:none}
.banner-fade.left{left:-24px;background:linear-gradient(to right,var(--bg) 5%,transparent)}
.banner-fade.right{right:-24px;background:linear-gradient(to left,var(--bg) 5%,transparent)}
.home-banner[data-per="2"] .banner-fade,.home-banner[data-per="3"] .banner-fade{display:none}
.banner-arrow{position:absolute;top:calc(50% - 16px);z-index:3;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--line);background:#141517e6;color:var(--fg-2);cursor:pointer;opacity:0;transition:opacity .2s}
.banner-arrow svg{width:16px;height:16px}
.home-banner:hover .banner-arrow,.banner-arrow:focus-visible{opacity:1}
.banner-arrow.prev{left:4px}.banner-arrow.next{right:4px}
.banner-dots{display:flex;justify-content:center;gap:4px;margin-top:10px}
.banner-dot{width:28px;height:3px;padding:0;border:0;border-radius:999px;background:#ffffff40;overflow:hidden;cursor:pointer}
.banner-dot span{display:block;height:100%;width:0;background:#fff;border-radius:999px}
.banner-dot[aria-current=true] span{width:100%}
.banner-dot.run span{animation:banner-run var(--interval,5000ms) linear forwards}
@keyframes banner-run{from{width:0}to{width:100%}}
@media(max-width:760px){
  .home-feature.has-banner,.home-feature:not(.has-banner):not(.banner-empty){margin:-16px -16px 24px;padding:0}
  .home-feature:not(.has-banner):not(.banner-empty)::before{height:calc(100cqw * 203 / 390)}
  .banner-glow{display:none}
  .banner-viewport{padding:0}
  .banner-slide{border-radius:0;aspect-ratio:390/203}
  .banner-slide.portrait{aspect-ratio:390/260}
  .banner-face{right:0;max-width:62%;opacity:.95}
  .banner-shade{inset:40% 0 0}
  .banner-copy{left:20px;bottom:22px;max-width:78%;gap:6px}
  .banner-badge{font-size:10px}
  .banner-copy strong{font-size:20px}
  .banner-copy p{font-size:11px}
  .banner-arrow,.banner-fade{display:none}
  .banner-dots{position:absolute;left:0;right:0;bottom:10px;margin:0;z-index:3}
}
@media(prefers-reduced-motion:reduce){.banner-track.animate,.banner-slide{transition:none}}