/* 섹션별 스크롤 효과(02 대응 흐름·03 선언문·04 제품·07 지표·08 마무리) — 마크업은 건드리지 않고 scroll-fx.js가 클래스를 붙인다. 히어로는 대상이 아니다.
   숨김 상태는 .fx-ready 아래에서만 적용되므로 JS가 없거나 모션 줄이기가 켜져 있으면 모든 내용이 그대로 보인다. */
:root{--fx-e:cubic-bezier(.2,.7,.2,1);--fx-head:80px}

/* ── 공통: 등장 ── */
.fx-ready .fx-r{opacity:0;transform:translateY(56px) scale(.985);transition:opacity 1.05s var(--fx-e),transform 1.15s var(--fx-e);transition-delay:calc(var(--i,0)*.12s)}
.fx-ready .fx-r.fx-in{opacity:1;transform:none}
.fx-ml{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.fx-ml>span{display:block}
.fx-ready .fx-mask .fx-ml>span{transform:translateY(112%);transition:transform 1.25s var(--fx-e);transition-delay:calc(var(--i,0)*.15s)}
.fx-ready .fx-mask.fx-in .fx-ml>span{transform:none}
.fx-ready .fx-wipe{clip-path:inset(-60px 100% -60px -60px round 20px);transition:clip-path 1.5s var(--fx-e)}
.fx-ready .fx-wipe.fx-in{clip-path:inset(-60px -60px -60px -60px round 20px)}
.fx-ready .fx-stroke{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--fx-e) .2s}
.fx-ready .fx-stroke.fx-in{transform:none}

/* ── 03 선언문: 스크롤로 글자 채움 ── */
.fx-ready .fx-w{color:#cdd3d9;transition:color .4s}
.fx-ready .fx-w.on{color:inherit}

/* ── 07 경영진 지표: 카운트업 + 막대 ── */
.fx-kbar{height:6px;margin-top:20px;border-radius:99px;background:#ffffff26;overflow:hidden}
.fx-kbar i{display:block;height:100%;border-radius:inherit;background:#3182f6;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--fx-e) .35s}
.fx-in .fx-kbar i,.fx-kbar.fx-in i{transform:scaleX(var(--v))}

/* ── 08 마무리: 버튼 호흡 ── */
.finale .button{animation:fx-breathe 2.8s ease-in-out 1.6s infinite}
@keyframes fx-breathe{50%{box-shadow:0 0 0 14px #3182f633}}

@media(max-width:760px){.fx-ready .fx-r{transform:translateY(22px)}}
@media(prefers-reduced-motion:reduce){.finale .button{animation:none}}
@media print{.fx-ready .fx-r,.fx-ready .fx-mask .fx-ml>span{opacity:1!important;transform:none!important}}

/* ── 배경 사진 시차 ── */
.fx-ready .target-section,.fx-ready .finale{overflow:hidden}
.fx-ready .target-section>img,.fx-ready .finale>img{transform:translate3d(0,var(--fx-py,0px),0) scale(1.14);will-change:transform}

/* ── 스크롤 보조: 섹션 점 · 맨 위로 ── */
.fx-dots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:55;display:grid;gap:11px;padding:11px 7px;border-radius:99px;background:#fffffff0;box-shadow:0 6px 24px #191f2826;backdrop-filter:blur(8px)}
.fx-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#19202833;cursor:pointer;transition:transform .3s,background .3s}
.fx-dots button:hover{background:#19202880}
.fx-dots button.on{background:var(--blue,#3182f6);transform:scale(1.5)}
.fx-dots button:focus-visible{outline:2px solid var(--blue,#3182f6);outline-offset:3px}
.fx-top{position:fixed;right:24px;bottom:24px;z-index:55;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink,#191f28);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px #191f2840;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .3s,visibility .3s,background .2s}
.fx-top.on{opacity:1;visibility:visible;transform:none}
.fx-top:hover{background:var(--blue,#3182f6)}
.fx-top:focus-visible{outline:3px solid var(--blue,#3182f6);outline-offset:3px}
.fx-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){.fx-dots{display:none}}
@media(max-width:760px){.fx-top{right:16px;bottom:16px;width:44px;height:44px}}
@media print{.fx-dots,.fx-top{display:none}}