@charset "UTF-8"; /* ════════════════════════════════════════════════════════════════ (주)화이트경제정책연구소 — 효과 레이어 (fx v1) 2025–2026 모션 트렌드를 이 사이트 조건(이미지 0장 · 4색)에 맞춰 구현. ★ 모든 규칙은 html.fx 아래에만 있다. 의 window.WIEP_FX 를 0으로 바꾸면 전부 사라진다. 주소 뒤에 ?fx=0 을 붙이면 그 방문만 끈 상태로 비교할 수 있다. ★ 콘텐츠를 숨기는 규칙(opacity:0)은 @supports 또는 html.fx-io 안에만 둔다. 밖에 두면 미지원 브라우저에서 본문이 영구히 사라진다. ★ 움직임은 전부 prefers-reduced-motion: no-preference 안에만 선언한다. wiep.css의 전역 리셋(animation-duration:.01ms!important)과 충돌하면 애니메이션이 '끝 상태로 순간이동'해 오히려 깨지기 때문이다. ════════════════════════════════════════════════════════════════ */ @property --n{syntax:"";initial-value:0;inherits:false} @property --spin{syntax:"";initial-value:0deg;inherits:false} /* ── 1. 히어로 3층 배경 — 오로라 + 마스크 격자 + 그레인 ────────── */ html.fx .hero,html.fx .phead,html.fx .ix-head,html.fx .ds-head,html.fx .nf{ position:relative;isolation:isolate;overflow:clip;background-image:none} html.fx .fx-bg{position:absolute;inset:-12% 0 0;z-index:0;pointer-events:none; background-image: radial-gradient(circle at 1px 1px,var(--grid) 1px,transparent 0), linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:24px 24px,48px 48px,48px 48px; -webkit-mask-image:radial-gradient(82% 70% at 50% 30%,#000 40%,transparent); mask-image:radial-gradient(82% 70% at 50% 30%,#000 40%,transparent)} html.fx .hero>.wrap,html.fx .phead>.wrap,html.fx .ix-head>.wrap, html.fx .ds-head>.wrap,html.fx .nf>.wrap{position:relative;z-index:2} /* 그레인 — mix-blend-mode를 쓰지 않는다(헤더 backdrop-filter가 끊긴다) */ html.fx .fx-bg::after{content:"";position:absolute;inset:0;opacity:.05;background-size:160px 160px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")} /* 오로라를 쓰는 모든 영역은 스스로 잘라낸다 — 안 그러면 번짐이 밖으로 나가 가로 스크롤이 생긴다(실측 184px). */ html.fx .fx-aurora{position:relative;isolation:isolate;overflow:clip} html.fx .fx-aurora>.wrap{position:relative;z-index:2} html.fx .fx-aurora::before,html.fx .fx-aurora::after{ content:"";position:absolute;z-index:1;pointer-events:none;border-radius:9999px;filter:blur(90px)} html.fx .fx-aurora::before{width:44rem;height:44rem;top:-18rem;left:-12rem; background:radial-gradient(circle,color-mix(in oklab,var(--navy) 16%,transparent),transparent 68%)} html.fx .fx-aurora::after{width:36rem;height:36rem;top:3rem;right:-14rem; background:radial-gradient(circle,color-mix(in oklab,var(--field) 13%,transparent),transparent 68%)} html.fx .fx-aurora.soft::before{opacity:.5} html.fx .fx-aurora.soft::after{opacity:.5} @media (prefers-reduced-motion:no-preference) and (min-width:1024px){ html.fx .fx-aurora::before{animation:fx-a 24s ease-in-out infinite alternate} html.fx .fx-aurora::after{animation:fx-b 31s ease-in-out infinite alternate} } @keyframes fx-a{to{translate:6rem 3rem;scale:1.12}} @keyframes fx-b{to{translate:-5rem 4rem;scale:.92}} @media (prefers-reduced-motion:no-preference) and (min-width:900px){ @supports (animation-timeline:view()){ html.fx .fx-bg{animation:fx-plx auto linear both; animation-timeline:view(block);animation-range:cover 0% cover 100%} @keyframes fx-plx{from{translate:0 -8%}to{translate:0 8%}} } } /* ── 2. 히어로 제목 — 그라데이션 핵심어 + 단어 계단 등장 ────────── */ html.fx .fx-grad{background:linear-gradient(96deg,var(--navy) 0%,var(--navy) 38%,var(--field) 100%); color:transparent;-webkit-background-clip:text;background-clip:text} html.fx .fx-split span{display:inline-block} @media (prefers-reduced-motion:no-preference){ html.fx .fx-split span{animation:fx-word .55s cubic-bezier(.22,1,.36,1) backwards} html.fx .fx-split span:nth-child(1){animation-delay:.05s} html.fx .fx-split span:nth-child(2){animation-delay:.11s} html.fx .fx-split span:nth-child(3){animation-delay:.17s} html.fx .fx-split span:nth-child(4){animation-delay:.23s} html.fx .fx-split span:nth-child(5){animation-delay:.29s} html.fx .fx-split span:nth-child(6){animation-delay:.35s} } @keyframes fx-word{from{opacity:0;translate:0 .45em}} /* ── 3. 스크롤 진입 리빌 ─────────────────────────────────────── 은닉은 @supports / .fx-io 안에서만. 미지원이면 그냥 처음부터 보인다. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ /* 화면에 들어오기 시작하면 곧바로 끝나게 한다. 범위를 길게 잡으면 큰 블록이 오래 비어 보이고, 인쇄·캡처에서도 빈 채로 찍힌다. */ html.fx .rv,html.fx .rv-g>*{animation:fx-rise auto linear both; animation-timeline:view(block);animation-range:entry 0% entry 55%} html.fx .rv-g>*:nth-child(2){animation-range:entry 6% entry 61%} html.fx .rv-g>*:nth-child(3){animation-range:entry 12% entry 67%} html.fx .rv-g>*:nth-child(4){animation-range:entry 18% entry 73%} html.fx .rv-g>*:nth-child(5){animation-range:entry 24% entry 79%} } } @keyframes fx-rise{from{opacity:.08;translate:0 24px}to{opacity:1;translate:0 0}} html.fx-io .rv,html.fx-io .rv-g>*{opacity:0;translate:0 24px} html.fx-io .rv.in,html.fx-io .rv-g>.in{opacity:1;translate:0 0; transition:opacity .5s ease-out,translate .5s cubic-bezier(.22,.9,.3,1)} /* ── 4. 카드 스포트라이트 + 상단 선 긋기 + 테두리 발광 ─────────── */ html.fx .fx-spot{position:relative;isolation:isolate} html.fx .fx-spot>*{position:relative;z-index:1} html.fx .fx-spot::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none; transition:opacity .25s ease; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab,var(--field) 16%,transparent),transparent 70%)} html.fx .fx-spot::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;z-index:2; background:var(--field);transform:scaleX(0);transform-origin:0 50%; transition:transform .34s cubic-bezier(.22,.9,.3,1)} @media (hover:hover) and (pointer:fine){ html.fx .fx-spot:hover::before{opacity:1} } html.fx .fx-spot:is(:hover,:focus-within)::after{transform:scaleX(1)} html.fx .fx-spot:is(:hover,:focus-within){box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--navy) 34%,transparent)} /* ── 5. 수행 절차 — 상단선 순차 그리기 ────────────────────────── */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()) and (view-timeline:--x block){ html.fx .steps,html.fx .steps4{view-timeline:--steps block} html.fx .steps>div{border-top-color:var(--line-soft)} html.fx .steps>div::after{content:"";position:absolute;top:-2px;left:0;right:0;height:2px; background:var(--navy);clip-path:inset(0 100% 0 0); animation:fx-draw linear both;animation-timeline:--steps} html.fx .steps>div:nth-child(1)::after{animation-range:entry 10% entry 40%} html.fx .steps>div:nth-child(2)::after{animation-range:entry 18% entry 48%} html.fx .steps>div:nth-child(3)::after{animation-range:entry 26% entry 56%} html.fx .steps>div:nth-child(4)::after{animation-range:entry 34% entry 64%} html.fx .steps>div:nth-child(5)::after{animation-range:entry 42% entry 72%} } } @keyframes fx-draw{to{clip-path:inset(0)}} /* ── 6. 숫자 카운트업 (JS 0줄) ────────────────────────────────── */ html.fx .fx-num{font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .fx-num{position:relative;color:transparent;counter-reset:n var(--n); animation:fx-count linear both;animation-timeline:view(block);animation-range:entry 20% entry 85%} html.fx .fx-num::before{content:counter(n);position:absolute;inset:0;color:var(--navy)} @keyframes fx-count{from{--n:0}to{--n:var(--to)}} } } /* ── 7. 무한 마키 띠 ──────────────────────────────────────────── */ .mq{position:relative;overflow:hidden;background:var(--band-bg,#1c3557);padding:13px 0} .mq__vp{display:flex;width:max-content; /* 가장자리만 짧게 흐린다. 넓게 흐리면 읽을 수 있는 구간이 줄어든다. 오른쪽은 일시정지 버튼 자리를 남긴다. */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 88%,transparent 97%); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 88%,transparent 97%)} /* 흐르는 글자는 멈춰 있는 글자보다 읽기 어렵다. 대비를 최대로 올린다. 흰색(#fff) on #1c3557 = 12.4:1 */ .mq ul{display:flex;gap:40px;padding:0 40px 0 0;margin:0;list-style:none;white-space:nowrap; color:var(--band-ink,#fff);font-size:15.5px;font-weight:500;letter-spacing:-.01em} .mq li::after{content:"·";margin-left:40px;color:var(--band-line,#7d95b6)} .mq__btn{position:absolute;right:10px;top:50%;translate:0 -50%;background:var(--band-bg,#1c3557); border:1px solid var(--band-line,#7d95b6);color:var(--band-ink2,#c3d0e2);font:inherit;font-size:12px; padding:4px 10px;border-radius:3px;cursor:pointer;min-height:26px} .mq__btn:hover{color:var(--band-ink,#fff);border-color:var(--band-ink,#fff)} /* 버튼 왼쪽에 띠 색 가림막을 둬서 흐르는 글자가 버튼 뒤로 비치지 않게 한다. 마스크를 더 넓히면 읽을 수 있는 구간이 줄어들기 때문에 이 방식을 쓴다. */ .mq__btn::before{content:"";position:absolute;inset:-13px -12px -13px -34px;z-index:-1; background:linear-gradient(90deg,transparent,var(--band-bg,#1c3557) 62%)} /* 좁은 화면에서도 정지 수단은 반드시 남긴다 (WCAG 2.2.2 Level A). 숨기는 대신 크기만 줄인다. */ @media (max-width:520px){.mq__btn{right:6px;padding:3px 7px;font-size:11px;min-height:24px}} @media (prefers-reduced-motion:no-preference){ html.fx .mq__vp{animation:fx-mq 52s linear infinite} html.fx .mq__vp:hover,html.fx .mq__vp:focus-within, html.fx .mq[data-paused] .mq__vp,html.fx .mq[data-off] .mq__vp{animation-play-state:paused} } @keyframes fx-mq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.mq__btn{display:none}} @media (max-width:760px){.mq{padding:10px 0}.mq ul{font-size:14px;gap:28px}.mq li::after{margin-left:28px}} @media print{.mq{display:none}} /* ── 8. 분야 비중 막대 ────────────────────────────────────────── */ .bars{border:1px solid var(--line);background:var(--paper);padding:18px 20px;margin-top:16px} .bars h4{font-size:13.5px;font-family:"Noto Sans KR",sans-serif;font-weight:700;margin:0 0 12px;color:var(--ink2)} /* 분야명이 길어 6.5rem 라벨 칸에서 두 줄로 접히고 막대가 눌렸다. 라벨을 윗줄 전체로 빼고, 아랫줄에 막대와 수치를 둔다. */ .bar-row{display:grid;grid-template-columns:1fr 2.8rem;align-items:center;gap:5px 10px; margin:9px 0;font-size:13.5px;color:var(--ink2)} .bar-row>span:first-child{grid-column:1 / -1;line-height:1.45} .bar-row b{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500} .bar-track{background:var(--line-soft);height:12px;border-radius:2px;overflow:hidden} .bar-track i{display:block;height:100%;width:var(--v);background:var(--navy)} .bar-row:nth-child(odd) .bar-track i{background:var(--field)} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .bar-track i{animation:fx-bar linear both;animation-timeline:view(block); animation-range:cover 8% cover 34%} } } @keyframes fx-bar{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}} /* ── 9. 표 행 상태 피드백 ─────────────────────────────────────── */ html.fx .rec tbody tr,html.fx table.rows tbody tr{position:relative} html.fx .rec tbody td.y,html.fx table.rows tbody td.y{position:relative} html.fx .rec tbody td.y::before,html.fx table.rows tbody td.y::before{ content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2px;background:var(--field); transform:scaleY(0);transform-origin:50% 0;transition:transform .2s cubic-bezier(.22,.9,.3,1)} html.fx .rec tbody tr:hover td.y::before,html.fx table.rows tbody tr:hover td.y::before{transform:scaleY(1)} /* ── 10. 회전 그라데이션 테두리 + 토스트 ──────────────────────── */ html.fx .fx-glow{position:relative;isolation:isolate} html.fx .fx-glow::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1; padding:1.5px;opacity:0;transition:opacity .3s ease;pointer-events:none; background:conic-gradient(from var(--spin),transparent 0 58%, color-mix(in oklab,var(--field) 90%,transparent) 72%,var(--navy) 86%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} html.fx .fx-glow:is(:hover,:focus-within)::before{opacity:1} @media (prefers-reduced-motion:no-preference){ html.fx .fx-glow:is(:hover,:focus-within)::before{animation:fx-spin 4.5s linear infinite} } @keyframes fx-spin{to{--spin:360deg}} .toast{position:fixed;inset:auto;left:50%;bottom:calc(20px + var(--callbar-h,0px));margin:0; translate:-50% 0;background:var(--band-bg,#1c3557);color:var(--band-ink,#fff);border:1px solid var(--band-line,#7d95b6); border-radius:6px;padding:11px 18px;font-size:14px;font-weight:500; box-shadow:0 10px 30px rgb(18 37 64/.25); transition:opacity .22s ease,translate .22s cubic-bezier(.22,1,.36,1), display .22s allow-discrete,overlay .22s allow-discrete} .toast:not(:popover-open){opacity:0;translate:-50% 10px} @starting-style{.toast:popover-open{opacity:0;translate:-50% 10px}} /* ── 11. 읽기 진행 막대 강화 ──────────────────────────────────── */ html.fx .readbar{background:linear-gradient(90deg,var(--navy),var(--field)); box-shadow:0 0 10px color-mix(in oklab,var(--navy) 40%,transparent)} /* 메인은 wiep.css를 쓰지 않으므로 기본 규칙도 여기서 제공 */ html.fx .readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:50; transform-origin:0 50%;transform:scaleX(0)} @supports (animation-timeline:scroll()){ html.fx .readbar{animation:fx-read linear;animation-timeline:scroll(root block)} } @keyframes fx-read{to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){html.fx .readbar{display:none}} @media print{html.fx .readbar{display:none}} /* ── 12. 헤더 유리질 + 스크롤 그림자 + 로고 축소 ──────────────── */ @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ @media (min-width:1024px){ html.fx header.site,html.fx body>header{ background:color-mix(in oklab,var(--paper) 74%,transparent); -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)} } } html.fx header.site,html.fx body>header{position:sticky} html.fx header.site::after,html.fx body>header::after{content:"";position:absolute;left:0;right:0; bottom:-14px;height:14px;opacity:0;pointer-events:none; background:linear-gradient(to bottom,color-mix(in oklab,var(--navy) 16%,transparent),transparent)} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:scroll()){ html.fx header.site::after,html.fx body>header::after{animation:fx-fade linear both; animation-timeline:scroll(root block);animation-range:0 160px} html.fx .logo i{animation:fx-logo linear both; animation-timeline:scroll(root block);animation-range:0 160px} } } @keyframes fx-fade{to{opacity:1}} @keyframes fx-logo{to{scale:.9}} /* ── 13. 마이크로 인터랙션 ────────────────────────────────────── */ html.fx .btn,html.fx button.primary{position:relative;overflow:hidden;isolation:isolate; transition:scale .12s ease,background .2s ease} html.fx .btn::before,html.fx button.primary::before{content:"";position:absolute;inset:0;z-index:-1; opacity:0;transition:opacity .2s; background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255/.18),transparent 65%)} @media (hover:hover) and (pointer:fine){ html.fx .btn:hover::before,html.fx button.primary:hover::before{opacity:1} } html.fx .btn:active,html.fx button.primary:active{scale:.97} html.fx .nudge-x{display:inline-block;transition:translate .28s cubic-bezier(.22,.9,.3,1)} html.fx a:hover .nudge-x,html.fx a:focus-visible .nudge-x, html.fx button:hover .nudge-x,html.fx button:focus-visible .nudge-x{translate:4px} @media (hover:hover) and (pointer:fine){ html.fx.fx-fine .fx-magnet{translate:calc(var(--tx,0)*8px) calc(var(--ty,0)*5px); transition:translate .35s cubic-bezier(.22,1,.36,1)} } @media (prefers-reduced-motion:reduce){ html.fx .nudge-x,html.fx .btn,html.fx .fx-magnet{transition:none} html.fx .fx-magnet{translate:0} } /* ── 14. 용어 툴팁 앵커 고정 ──────────────────────────────────── */ @supports (anchor-name:--a){ html.fx .term[popovertarget="tip-bc"]{anchor-name:--a-bc} html.fx .term[popovertarget="tip-npv"]{anchor-name:--a-npv} html.fx .term[popovertarget="tip-irr"]{anchor-name:--a-irr} html.fx #tip-bc{position-anchor:--a-bc} html.fx #tip-npv{position-anchor:--a-npv} html.fx #tip-irr{position-anchor:--a-irr} html.fx [popover].tip{position-area:block-start;position-try-fallbacks:flip-block;margin-bottom:8px} } @media (prefers-reduced-motion:no-preference){ html.fx [popover].tip{transition:opacity .2s ease,translate .2s cubic-bezier(.22,1,.36,1), display .2s allow-discrete,overlay .2s allow-discrete} html.fx [popover].tip:not(:popover-open){opacity:0;translate:0 8px} @starting-style{html.fx [popover].tip:popover-open{opacity:0;translate:0 8px}} } /* ── 15. 아코디언 부드러운 열림 ───────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ @supports (interpolate-size:allow-keywords){ html.fx{interpolate-size:allow-keywords} html.fx details.privacy::details-content{block-size:0;overflow:clip; transition:block-size .3s ease,content-visibility .3s allow-discrete} html.fx details.privacy[open]::details-content{block-size:auto} } } /* ── 접근성·인쇄 공통 차단 ────────────────────────────────────── */ @media (forced-colors:active){ html.fx .fx-bg,html.fx .fx-aurora::before,html.fx .fx-aurora::after, html.fx .fx-spot::before,html.fx .fx-glow::before{display:none} html.fx .fx-grad{color:CanvasText;background:none;-webkit-text-fill-color:CanvasText} } @media print{ html.fx .fx-bg,html.fx .fx-aurora::before,html.fx .fx-aurora::after, html.fx .fx-spot::before,html.fx .fx-spot::after,html.fx .fx-glow::before{display:none!important} html.fx .fx-grad{color:#1c3557;-webkit-text-fill-color:#1c3557;background:none} html.fx .rv,html.fx .rv-g>*{opacity:1!important;translate:none!important;animation:none!important} } /* ════════════════════════════════════════════════════════════════ fx v2 — 밀도 보강 ════════════════════════════════════════════════════════════════ */ /* ── 16. 히어로 데이터 라인 캔버스 ────────────────────────────── */ html.fx .fx-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%; pointer-events:none;opacity:.55} html.fx:not(.fx-heavy) .fx-canvas{display:none} @media (prefers-reduced-motion:reduce){html.fx .fx-canvas{display:none}} @media print{html.fx .fx-canvas{display:none}} /* ── 17. 히어로 눈썹 — 분야 순환 ─────────────────────────────── */ .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px; border:1px solid var(--navy-line);border-radius:999px;padding:5px 14px 5px 10px; font-size:13.5px;color:var(--ink2);background:color-mix(in oklab,var(--paper) 70%,transparent)} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--field);flex:none} .fx-rotate{position:relative;display:inline-grid;vertical-align:bottom; font-weight:700;color:var(--navy);justify-items:start} .fx-rotate>span{grid-area:1/1;white-space:nowrap} @media (prefers-reduced-motion:no-preference){ html.fx .fx-rotate>span{animation:fx-rot 12s ease-in-out infinite both} html.fx .fx-rotate>span:nth-child(1){animation-delay:0s} html.fx .fx-rotate>span:nth-child(2){animation-delay:3s} html.fx .fx-rotate>span:nth-child(3){animation-delay:6s} html.fx .fx-rotate>span:nth-child(4){animation-delay:9s} } @media (prefers-reduced-motion:reduce){ .fx-rotate>span:not(:first-child){display:none} } @keyframes fx-rot{ 0%,2%{opacity:0;translate:0 .5em} 6%,23%{opacity:1;translate:0 0} 27%,100%{opacity:0;translate:0 -.5em} } /* ── 18. 스크롤 유도 표시 ────────────────────────────────────── */ .scrollcue{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:3; display:flex;flex-direction:column;align-items:center;gap:5px; font-size:11.5px;color:#9aa6b8;letter-spacing:.06em;pointer-events:none} /* 남색 위 5.0:1 — var(--mute)는 2.33:1 로 미달 */ .scrollcue i{display:block;width:1px;height:26px;background:linear-gradient(var(--navy-line),transparent)} @media (prefers-reduced-motion:no-preference){ html.fx .scrollcue i{animation:fx-cue 1.9s ease-in-out infinite} @supports (animation-timeline:scroll()){ html.fx .scrollcue{animation:fx-cuefade linear both; animation-timeline:scroll(root block);animation-range:0 220px} } } @keyframes fx-cue{0%,100%{transform:scaleY(.4);transform-origin:50% 0}50%{transform:scaleY(1)}} @keyframes fx-cuefade{to{opacity:0}} @media (max-width:760px){.scrollcue{display:none}} /* ── 19. 섹션 제목 밑줄 그리기 ───────────────────────────────── */ html.fx .sec-head h2,html.fx .home2 h2,html.fx .contact h2,html.fx section>.wrap>h2{position:relative} html.fx .sec-head h2::after,html.fx .home2 h2::after,html.fx section>.wrap>h2::after{ content:"";position:absolute;left:0;bottom:-8px;height:2px;width:44px; background:linear-gradient(90deg,var(--navy),var(--field));transform:scaleX(0);transform-origin:0 50%} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .sec-head h2::after,html.fx .home2 h2::after,html.fx section>.wrap>h2::after{ animation:fx-underline linear both;animation-timeline:view(block); animation-range:entry 10% entry 60%} } } @keyframes fx-underline{to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){ html.fx .sec-head h2::after,html.fx .home2 h2::after,html.fx section>.wrap>h2::after{transform:scaleX(1)} } /* ── 20. 어두운 영역 커서 글로우 ─────────────────────────────── */ html.fx .fx-darkspot{position:relative;overflow:hidden;isolation:isolate} /* 자식의 position 을 덮어쓰지 않는다 — 덮어쓰면 절대 배치된 버튼이 제자리를 잃는다 */ html.fx .fx-darkspot>*:not([class*="__btn"]){position:relative;z-index:1} html.fx .mq .mq__btn{position:absolute;z-index:2} html.fx .fx-darkspot::after{content:"";position:absolute;inset:0;z-index:0;opacity:0; transition:opacity .3s ease;pointer-events:none; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgb(255 255 255/.13),transparent 65%)} @media (hover:hover) and (pointer:fine){html.fx .fx-darkspot:hover::after{opacity:1}} /* ── 21. 3D 틸트 (독립 박스에만) ─────────────────────────────── */ @media (hover:hover) and (pointer:fine){ html.fx.fx-fine .fx-tilt{transform-style:preserve-3d; transform:perspective(900px) rotateX(calc(var(--ty,0)*-3.2deg)) rotateY(calc(var(--tx,0)*3.2deg)); transition:transform .4s cubic-bezier(.22,1,.36,1)} html.fx.fx-fine .fx-tilt:hover{transition:transform .08s linear} } @media (prefers-reduced-motion:reduce){html.fx .fx-tilt{transform:none}} /* ── 22. 도식 SVG 선 그리기 ──────────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .dia svg :is(path,line,rect,circle,polyline){ stroke-dasharray:900;stroke-dashoffset:900; animation:fx-stroke linear both;animation-timeline:view(block); animation-range:entry 12% cover 30%} html.fx .dia svg text{animation:fx-rise linear both;animation-timeline:view(block); animation-range:entry 30% cover 35%} } } @keyframes fx-stroke{to{stroke-dashoffset:0}} /* ── 23. 버튼 클릭 리플 ──────────────────────────────────────── */ html.fx .ripple{position:absolute;border-radius:50%;pointer-events:none; background:rgb(255 255 255/.35);transform:translate(-50%,-50%) scale(0);opacity:.7} html.fx .btn:not(.primary) .ripple,html.fx .tb .ripple{background:color-mix(in oklab,var(--navy) 24%,transparent)} @media (prefers-reduced-motion:no-preference){ html.fx .ripple{animation:fx-ripple .55s ease-out forwards} } @keyframes fx-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}} /* ── 24. 마키 2줄(반대 방향) ─────────────────────────────────── */ .mq.rev .mq__vp{animation-direction:reverse} .mq+.mq{border-top:1px solid color-mix(in oklab,var(--band-line,#7d95b6) 40%,transparent)} /* ── 25. 접수 완료 상승 등장 ─────────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ html.fx #view-done:not([hidden]){animation:fx-done .5s cubic-bezier(.22,1,.36,1) both} } @keyframes fx-done{from{opacity:0;translate:0 20px}} /* ── 26. 표 머리글 정렬 화살표 반응 ──────────────────────────── */ html.fx th.sortable button .arw{transition:translate .2s ease,opacity .2s ease} html.fx th.sortable button:hover .arw{opacity:1;translate:0 -1px} /* ── 27. 링크 밑줄 좌→우 ─────────────────────────────────────── */ html.fx .nlist a .nt,html.fx ul.links a{background-image:linear-gradient(var(--navy),var(--navy)); background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat; transition:background-size .3s cubic-bezier(.22,.9,.3,1)} html.fx .nlist a:hover .nt,html.fx .nlist a:focus-visible .nt, html.fx ul.links a:hover,html.fx ul.links a:focus-visible{background-size:100% 1px;text-decoration:none} /* ── 28. 빠른연결 아이콘 반응 ────────────────────────────────── */ html.fx .quick a svg{transition:translate .28s cubic-bezier(.22,.9,.3,1),scale .28s ease} html.fx .quick a:hover svg,html.fx .quick a:focus-visible svg{translate:2px 0;scale:1.12} /* ════════════════════════════════════════════════════════════════ fx v3 — 전 페이지 확장 + JS 기능 ════════════════════════════════════════════════════════════════ */ /* ── 29. 맨 위로 ─────────────────────────────────────────────── */ .totop{position:fixed;right:20px;bottom:calc(20px + var(--callbar-h,0px));z-index:35; width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);background:var(--paper);color:var(--navy);border-radius:50%; cursor:pointer;opacity:0;pointer-events:none;box-shadow:0 4px 14px rgb(18 37 64/.10)} .totop.on{opacity:1;pointer-events:auto} .totop:hover{border-color:var(--navy);background:var(--navy-soft)} @media (prefers-reduced-motion:no-preference){.totop{transition:opacity .25s ease,background .2s ease}} @media print{.totop{display:none}} /* ── 30. 긴 문서 자동 목차 ───────────────────────────────────── */ .autotoc{position:sticky;top:calc(var(--hh) + 24px);align-self:start; border-left:2px solid var(--line);padding-left:16px;font-size:13.5px;max-height:70vh;overflow:auto} .autotoc b{display:block;font-size:12px;letter-spacing:.06em;color:var(--mute);margin-bottom:10px;font-weight:500} .autotoc a{display:block;padding:5px 0;color:var(--ink2);line-height:1.5} .autotoc a:hover{color:var(--navy)} .autotoc a.cur{color:var(--navy);font-weight:500} .autotoc a.cur::before{content:"";position:absolute;left:-18px;width:2px;height:1.4em;background:var(--navy)} .autotoc a{position:relative} .doc-wrap{display:grid;grid-template-columns:1fr 200px;gap:44px;align-items:start} @media (max-width:900px){.doc-wrap{grid-template-columns:1fr}.autotoc{display:none}} @media print{.autotoc{display:none}.doc-wrap{display:block}} /* ── 31. 글자수 카운터 ───────────────────────────────────────── */ .charcount{display:block;text-align:right;font-size:12.5px;color:var(--mute);margin-top:4px; font-variant-numeric:tabular-nums} .charcount.warn{color:var(--navy-deep);font-weight:500} /* ── 32. 검색어 강조 ─────────────────────────────────────────── */ table mark{background:var(--field-soft);color:var(--ink);font-weight:700;padding:0 1px;border-radius:2px} /* ── 33. 단축키 안내 ─────────────────────────────────────────── */ dialog.keys{width:min(420px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:4px; background:var(--paper);color:var(--ink);margin:auto} dialog.keys::backdrop{background:rgba(18,37,64,.44)} .keys h3{font-size:16px;padding:16px 20px;margin:0;border-bottom:1px solid var(--line)} .keys dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;padding:18px 20px;font-size:14px} .keys dt{text-align:right} .keys kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;background:var(--bg); border-radius:3px;padding:1px 7px;font-family:"Consolas",monospace;font-size:12.5px;color:var(--ink)} .keys dd{margin:0;color:var(--ink2)} .keys .close{display:block;width:100%;border:0;border-top:1px solid var(--line);background:var(--bg); color:var(--ink2);font:inherit;font-size:13px;padding:11px;cursor:pointer} /* ── 34. 최근 본 페이지 ──────────────────────────────────────── */ .recent{margin-top:14px;font-size:13px;color:var(--mute)} .recent a{color:var(--ink2);border-bottom:1px solid var(--line)} .recent a:hover{color:var(--navy);border-bottom-color:var(--navy)} .recent span{margin:0 6px;color:var(--navy-line)} /* ── 35. 연혁 타임라인 그리기 ────────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .tl-body{animation:fx-tlline linear both;animation-timeline:view(block); animation-range:entry 8% cover 30%} html.fx .tl-body::before{animation:fx-tldot .4s cubic-bezier(.22,1,.36,1) both; animation-timeline:view(block);animation-range:entry 14% entry 44%} html.fx .tl-year{animation:fx-rise linear both;animation-timeline:view(block); animation-range:entry 6% entry 40%} } } @keyframes fx-tlline{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}} @keyframes fx-tldot{from{scale:0}to{scale:1}} /* ── 36. 정의표·폼 행 순차 등장 ──────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx table.def tbody tr{animation:fx-rowin linear both;animation-timeline:view(block); animation-range:entry 0% entry 50%} html.fx .f2>.field,html.fx form.panel>.field{animation:fx-rowin linear both; animation-timeline:view(block);animation-range:entry 0% entry 55%} } } @keyframes fx-rowin{from{opacity:.12;translate:0 12px}to{opacity:1;translate:0 0}} /* ── 37. 404 숫자 ────────────────────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ html.fx .nf .code{animation:fx-404 .9s cubic-bezier(.22,1,.36,1) both} html.fx .nf .code em{animation:fx-404dot 2.6s ease-in-out .9s infinite} } @keyframes fx-404{from{opacity:0;letter-spacing:.4em;filter:blur(6px)}} @keyframes fx-404dot{0%,100%{scale:1}50%{scale:1.12}} /* ── 38. 서브 제목 영역 캔버스 ───────────────────────────────── */ html.fx .phead .fx-canvas{opacity:.4} /* ── 39. 게시판 본문 문단 등장 ───────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .post-body>:is(p,h3,ul,div){animation:fx-rowin linear both; animation-timeline:view(block);animation-range:entry 0% entry 48%} html.fx .doc-body>:is(p,h2,h3,ol,ul,div){animation:fx-rowin linear both; animation-timeline:view(block);animation-range:entry 0% entry 48%} } } /* ── 40. 첨부파일·요약카드 반응 ──────────────────────────────── */ html.fx .files a{transition:background .2s ease,padding-left .2s ease} html.fx .files a:hover{background:var(--navy-soft);padding-left:8px} html.fx .summary div{transition:background .25s ease} html.fx .summary div:hover{background:var(--navy-soft)} /* ════════════════════════════════════════════════════════════════ fx v4 — 스크롤 연출 전부 @supports (animation-timeline:view()) 안에만 둔다. 미지원이면 원래 레이아웃 그대로이고, 내용은 어떤 경우에도 사라지지 않는다. ════════════════════════════════════════════════════════════════ */ /* ── 41. 문장 하이라이트 스윕 ──────────────────────────────── 스크롤을 내리면 문장이 왼쪽부터 또렷해진다. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()) and (background-clip:text){ html.fx .sweep{ background-image:linear-gradient(90deg,var(--ink) 50%,color-mix(in oklab,var(--ink) 48%,transparent) 50%); background-size:220% 100%;background-position:100% 0; -webkit-background-clip:text;background-clip:text;color:transparent; animation:fx-sweep linear both;animation-timeline:view(block); animation-range:entry 24% cover 46%} } } @keyframes fx-sweep{to{background-position:0 0}} /* ── 42. 사업분야 카드 3D 진입 ─────────────────────────────── 아래에서 누워 있다가 제자리로 세워진다. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .fields{perspective:1200px} html.fx .fields>a{transform-origin:50% 100%; animation:fx-card linear both;animation-timeline:view(block); animation-range:entry 4% cover 34%} html.fx .fields>a:nth-child(2){animation-range:entry 9% cover 39%} html.fx .fields>a:nth-child(3){animation-range:entry 14% cover 44%} html.fx .fields>a:nth-child(4){animation-range:entry 19% cover 49%} } } @keyframes fx-card{from{opacity:.15;transform:rotateX(26deg) translateY(34px)} to{opacity:1;transform:rotateX(0) translateY(0)}} /* ── 43. 수행 절차 — 단계 카드 순차 진입 ──────────────────── 가로 핀(스크롤 고정) 방식은 쓰지 않는다. 스크롤 예산을 3화면 가까이 소모해 목표를 갖고 들어온 담당자의 열람을 방해한다. 선 긋기(5번)와 아래 카드 진입만으로 '절차가 진행된다'는 인상은 충분히 전달된다. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .steps>div,html.fx .steps4>div{ animation:fx-step linear both;animation-timeline:view(block); animation-range:entry 6% cover 34%} html.fx .steps>div:nth-child(2),html.fx .steps4>div:nth-child(2){animation-range:entry 11% cover 39%} html.fx .steps>div:nth-child(3),html.fx .steps4>div:nth-child(3){animation-range:entry 16% cover 44%} html.fx .steps>div:nth-child(4),html.fx .steps4>div:nth-child(4){animation-range:entry 21% cover 49%} html.fx .steps>div:nth-child(5){animation-range:entry 26% cover 54%} } } @keyframes fx-step{from{opacity:.12;translate:0 22px;scale:.97}to{opacity:1;translate:0 0;scale:1}} /* ── 44. 배경 워터마크 패럴랙스 ─────────────────────────────── */ /* 워터마크를 담은 영역은 스스로 잘라낸다 — 안 그러면 가로 스크롤이 생긴다(실측 122px) */ html.fx :is(section,div):has(>.wmark){position:relative;overflow:clip} .wmark{position:absolute;right:-2vw;top:10%;z-index:0;pointer-events:none; font-family:"Noto Serif KR",serif;font-weight:700;font-size:clamp(90px, 16vw, 260px); line-height:.9;letter-spacing:-.04em;color:color-mix(in oklab,var(--navy) 5%,transparent); white-space:nowrap;user-select:none} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .wmark{animation:fx-wmark linear both;animation-timeline:view(block); animation-range:cover 0% cover 100%} } } @keyframes fx-wmark{from{translate:14% 0}to{translate:-14% 0}} @media (max-width:760px){.wmark{display:none}} @media print{.wmark{display:none}} /* ── 45. 스크롤 속도 기울임 ────────────────────────────────── 빠르게 굴리면 살짝 눕고, 멈추면 바로 선다. --sk 는 fx.js가 넣는다. */ @media (prefers-reduced-motion:no-preference) and (min-width:1024px){ html.fx.fx-heavy .skewy{transform:skewY(var(--sk,0deg));transition:transform .25s cubic-bezier(.22,1,.36,1)} } /* ── 46. 맨 위로 버튼에 진행률 링 ───────────────────────────── */ .totop{position:fixed} .totop svg.ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px); transform:rotate(-90deg);pointer-events:none} .totop svg.ring circle{fill:none;stroke:var(--field);stroke-width:2; stroke-dasharray:1;stroke-dashoffset:1;pathLength:1} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:scroll()){ html.fx .totop svg.ring circle{animation:fx-ring linear both; animation-timeline:scroll(root block)} } } @keyframes fx-ring{to{stroke-dashoffset:0}} /* ── 47. 섹션 진입 배경 전환 ───────────────────────────────── 어두운 섹션을 지날 때 주변 여백까지 함께 어두워진다. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .tone{position:relative} html.fx .tone::before{content:"";position:absolute;inset:-40vh 0;z-index:-1; background:linear-gradient(var(--bg),color-mix(in oklab,var(--navy) 6%,var(--bg)),var(--bg)); opacity:0;animation:fx-tone linear both;animation-timeline:view(block); animation-range:cover 0% cover 100%} } } @keyframes fx-tone{0%{opacity:0}35%,65%{opacity:1}100%{opacity:0}} /* ── 48. 숫자 블록 스케일 진입 ──────────────────────────────── */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .stats div{animation:fx-pop linear both;animation-timeline:view(block); animation-range:entry 10% entry 60%} html.fx .stats div:nth-child(2){animation-range:entry 16% entry 66%} html.fx .stats div:nth-child(3){animation-range:entry 22% entry 72%} } } @keyframes fx-pop{from{opacity:.15;scale:.94}to{opacity:1;scale:1}} /* ── 49. 리빌 타이밍 보정 ──────────────────────────────────── view() 타임라인은 뷰포트 전체를 기준으로 삼기 때문에, 요소가 아직 헤더(--hh)와 앵커 탭(--tabs-h) 뒤에 가려져 있는 동안 등장이 끝나 버린다. 가려지는 만큼 타임라인에서 잘라낸다. 이미 @supports 안이라 요건이 늘지 않는다. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html.fx .rv,html.fx .rv-g>*,html.fx table.def tbody tr, html.fx .f2>.field,html.fx form.panel>.field, html.fx .steps>div,html.fx .steps4>div{ animation-timeline:view(block calc(var(--hh) + var(--tabs-h) + 8px) 0px)} } } /* ── 50. 문의 폼 작성 완성도 ───────────────────────────────── 6개짜리 폼을 다단계로 쪼개면 오히려 나빠진다. 한 화면을 유지한 채 필수 항목을 몇 개 채웠는지만 알린다. */ html.fx .formprog{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:13px;color:var(--mute)} html.fx .formprog progress{flex:1;inline-size:auto;block-size:6px;appearance:none;border:0; background:var(--line-soft);border-radius:3px;overflow:hidden} html.fx .formprog progress::-webkit-progress-bar{background:var(--line-soft)} html.fx .formprog progress::-webkit-progress-value{background:var(--navy)} html.fx .formprog progress::-moz-progress-bar{background:var(--navy)} html.fx .formprog .fp-n{color:var(--ink2);font-variant-numeric:tabular-nums;font-weight:500} html.fx .formprog.done progress::-webkit-progress-value{background:var(--field)} html.fx .formprog.done progress::-moz-progress-bar{background:var(--field)} html.fx .formprog.done .fp-n{color:var(--field-ink)} @media (prefers-reduced-motion:no-preference){ html.fx .formprog progress::-webkit-progress-value{transition:inline-size .2s ease} }