:root{
--center-w: 600px; /* 가운데 고정 폭 */
--hero-h: 966px; /* PC 높이(필요시 조절) */
--bp: 1024px; /* PC 전환 기준 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;list-style-type: none;list-style: none;}


/* ================= 공통 ================= */
.hero3{position:relative}
.hero3__grid{display:grid;grid-template-columns:1fr var(--center-w) 1fr;min-height:var(--hero-h)}
.hero3__pane{position:relative;overflow:hidden}


/* 가이드(파란 주석) 오버레이 옵션 */
.hero3[data-guide]::after,
.hero3[style*="--guide"]::after{
content:"";position:absolute;inset:0;background-image:var(--guide);background-position:center;background-repeat:no-repeat;background-size:contain;opacity:var(--guide-opacity,0);pointer-events:none;transition:opacity .2s ease}
body.show-guides .hero3[data-guide]::after,
body.show-guides .hero3[style*="--guide"]::after{opacity:.45}


/* 중앙: 600px 고정. 이미지도 단일 고정 */
.hero3__center {;background:url(./img/hero-center.jpg) no-repeat center center; background-size:cover;}


/* 좌/우: 페이드 롤링 */
.rotator{list-style:none;margin:0;padding:0;height:100%}
.rotator > li{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.rotator > li.is-active{opacity:1}
.rotator img{width:100%;height:100%;display:block;object-fit:cover}


/* 가이드 토글 버튼 */
.guide-toggle{position:fixed;right:12px;bottom:12px;z-index:1000;border:0;border-radius:999px;padding:10px 14px;background:#111;color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25)}


/* =============== 반응형 =============== */
@media (max-width: 1023.98px){
.hero3__grid{grid-template-columns:1fr;grid-auto-rows:auto}
.hero3__center{order:1}
.hero3__left{order:2}
.hero3__right{order:3}
/* 모바일 높이: 좌/우는 가변 비율, 중앙은 가로폭 기준 */
.hero3__center{width:min(92vw, var(--center-w));margin:0 auto}
.hero3__center img{height:auto}
.hero3__left,.hero3__right{min-height:48vw;max-height:60vh}
}


/* 접근성: 모션 줄이기 */
@media (prefers-reduced-motion: reduce){
.rotator > li{transition:none}
}