/* fx — 캔탑스 css/fx.css 를 그대로 옮겼다(짝 JS: js/fx.js). 색 토큰만 코비온 파랑 · 남색. 서브 화면(sub/_head.php)에서만 싣는다 */
/* Token */
:root {
	--fx-ease: cubic-bezier(.2, .7, .2, 1);
	--fx-ease-line: cubic-bezier(.16, .84, .24, 1);
	--fx-ease-wipe: cubic-bezier(.7, 0, .2, 1);
	--fx-accent: #2E6BFF;
	--fx-point: #2E6BFF;
	--fx-light: #ffffff;
	--fx-cross-row: rgba(46, 107, 255, .05);
	--fx-cross-cell: rgba(46, 107, 255, .12);
	--fx-progress: on;
	--fx-progress-height: 3px;
	--fx-progress-z: 101;
	--fx-dots-z: 90;
	--fx-offset: 0px;
}

/* Base */
#Fx.fx-motion .fx-reveal,
#Fx.fx-motion .fx-drop,
#Fx.fx-motion .fx-line-in,
#Fx.fx-on .fx-tilt {
	--i: 0;
}
#Fx.fx-motion .fx-drop {
	--fx-dur: .6s;
}
#Fx.fx-motion .fx-wipe {
	--w: 0;
}
#Fx.fx-boot .fx-line-in {
	transition: none;
}

/* Reveal */
#Fx.fx-motion .fx-reveal:not(.fx-in) {
	opacity: 0;
	translate: 0 36px;
	filter: blur(6px);
	transition: none;
}
#Fx.fx-motion .fx-reveal.fx-fade:not(.fx-in) {
	translate: none;
	filter: none;
}
#Fx.fx-motion .fx-reveal.fx-in:not(.fx-done) {
	transition: all .3s ease, opacity .9s var(--fx-ease), translate 1s var(--fx-ease), filter .9s ease;
	transition-delay: 0s, calc(var(--i) * 90ms), calc(var(--i) * 90ms), calc(var(--i) * 90ms);
}

/* Drop */
#Fx.fx-motion .fx-drop:not(.fx-in) {
	opacity: 0;
	translate: 0 -32px;
	transition: none;
}
#Fx.fx-motion .fx-drop.fx-in:not(.fx-done) {
	transition: all .3s ease, opacity .2s ease, translate var(--fx-dur) cubic-bezier(.3, 1.4, .6, 1);
	transition-delay: 0s, calc(var(--i) * 90ms), calc(var(--i) * 90ms);
}

/* Lines */
#Fx.fx-motion .fx-line {
	display: block;
	overflow: hidden;
	padding-bottom: .1em;
	margin-bottom: -.1em;
}
#Fx.fx-motion .fx-line-in {
	display: block;
	translate: 0 110%;
	transition: translate 1.1s var(--fx-ease-line);
	transition-delay: calc(var(--i) * 110ms + 80ms);
}
#Fx.fx-motion .fx-lines.fx-in .fx-line-in {
	translate: 0 0;
}

/* Wipe */
#Fx.fx-motion .fx-wipe:not(.fx-in) {
	clip-path: inset(100% 0 0 0);
	transition: none;
}
#Fx.fx-motion .fx-wipe.fx-in:not(.fx-done) {
	clip-path: inset(0 0 0 0);
	transition: all .3s ease, clip-path 1.2s var(--fx-ease-wipe);
	transition-delay: 0s, calc(var(--w) * 110ms + 120ms);
}
#Fx.fx-motion .fx-wipe:not(.fx-in) .fx-wipe-img {
	scale: 1.18;
	transition: none;
}
#Fx.fx-motion .fx-wipe.fx-in:not(.fx-done) .fx-wipe-img {
	transition: all .3s ease, scale 1.6s var(--fx-ease);
	transition-delay: 0s, calc(var(--w) * 110ms + 120ms);
}

/* Draw */
#Fx.fx-motion .fx-draw:not(.fx-in) {
	transform-origin: 0 50%;
	scale: 0 1;
	transition: none;
}
#Fx.fx-motion .fx-draw.fx-in:not(.fx-done) {
	transform-origin: 0 50%;
	transition: all .3s ease, scale 1.2s var(--fx-ease-line);
	transition-delay: 0s, .25s;
}

/* Hero */
#Fx.fx-on .fx-hero {
	--fx-p: 0;
}
#Fx.fx-motion .fx-hero .fx-hero-text {
	translate: 0 calc(var(--fx-p) * -70px);
	opacity: calc(1 - var(--fx-p) * 1.2);
}
#Fx.fx-motion .fx-hero .fx-hero-bg {
	scale: calc(1 + var(--fx-p) * .08);
}
#Fx.fx-motion .fx-hero.fx-hero-bg-pos {
	background-position-y: calc(50% + var(--fx-p) * 140px);
}

/* Unfold */
#Fx.fx-motion .fx-unfold {
	--fx-u: 0;
	--fx-u-y: 48px;
	--fx-u-x: 5%;
	--fx-u-r: 40px;
	clip-path: inset(calc((1 - var(--fx-u)) * var(--fx-u-y)) calc((1 - var(--fx-u)) * var(--fx-u-x)) round calc((1 - var(--fx-u)) * var(--fx-u-r)));
}
#Fx.fx-motion .fx-unfold .fx-unfold-bg {
	scale: calc(1.1 - .1 * var(--fx-u));
}

/* Clip */
#Fx.fx-motion .fx-clip {
	overflow: hidden;
}

/* Zoom In */
#Fx.fx-motion .fx-zoom-in {
	transform-origin: 50% 30%;
	animation: fx-zoom-in 2.4s var(--fx-ease-line) backwards;
}

/* Float */
#Fx.fx-motion .fx-float {
	animation: fx-float 6s ease-in-out infinite;
}

/* Shine */
#Fx.fx-motion .fx-shine {
	position: relative;
	overflow: hidden;
}
#Fx.fx-motion .fx-shine::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 30%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
	pointer-events: none;
}
#Fx.fx-motion .fx-shine.fx-in::after {
	animation: fx-shine 1.6s .5s var(--fx-ease) both;
}

/* Pop */
#Fx.fx-motion .fx-pop {
	animation: fx-pop 1s .5s var(--fx-ease) backwards;
}
#Fx.fx-motion .fx-pop .fx-pop-img {
	animation: fx-pop-img 1.1s .55s var(--fx-ease-wipe) backwards;
}
#Fx.fx-motion .fx-pop .fx-pop-rise {
	animation: fx-pop-rise .6s 1.05s var(--fx-ease) backwards;
}
#Fx.fx-motion .fx-pop .fx-shine::after {
	animation: fx-shine 1.2s 1.3s var(--fx-ease) both;
}
#Fx.fx-motion .fx-pop.fx-pop-out {
	pointer-events: none;
	animation: fx-pop-out .5s cubic-bezier(.5, 0, .75, 0) forwards;
}

/* Progress */
#Fx.fx-on .fx-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--fx-progress-height);
	z-index: var(--fx-progress-z);
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--fx-accent), var(--fx-point));
	pointer-events: none;
}

/* Tilt */
#Fx.fx-fine .fx-tilt {
	--rx: 0deg;
	--ry: 0deg;
	--gx: 50%;
	--gy: 50%;
	--lift: 0px;
	position: relative;
	transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: all .3s ease, transform .7s var(--fx-ease), box-shadow .4s ease;
}
#Fx.fx-fine .fx-tilt:hover {
	transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
}
#Fx.fx-fine .fx-tilt.is-tilting {
	--lift: -6px;
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .22);
	transition-duration: .3s, .25s, .4s;
}
#Fx.fx-fine .fx-glare {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, .28), transparent 55%);
	opacity: 0;
	transition: opacity .4s;
	pointer-events: none;
	mix-blend-mode: soft-light;
}
#Fx.fx-fine .fx-tilt.is-tilting .fx-glare {
	opacity: 1;
}

/* Dock */
#Fx.fx-fine .fx-dock-item {
	--fx-dock: 1;
	scale: var(--fx-dock);
	transform-origin: 50% 100%;
	transition: all .3s ease, scale .18s var(--fx-ease), box-shadow .15s;
}

/* Zoom */
#Fx.fx-fine .fx-zoom-img {
	transition: all .3s ease, scale .9s var(--fx-ease);
}
#Fx.fx-fine .fx-zoom:hover .fx-zoom-img,
#Fx.fx-fine .fx-tilt.is-tilting .fx-zoom-img {
	scale: 1.06;
}

/* Dots */
#Fx.fx-on .fx-dots {
	position: fixed;
	top: 50%;
	right: 28px;
	z-index: var(--fx-dots-z);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	translate: 16px -50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s, translate .4s var(--fx-ease);
	mix-blend-mode: difference;
}
#Fx.fx-on .fx-dots.is-on {
	translate: 0 -50%;
	opacity: 1;
	pointer-events: auto;
}
#Fx.fx-on .fx-dot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 28px;
	height: 10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
#Fx.fx-on .fx-dot::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background: var(--fx-light);
	opacity: .45;
	transition: width .35s var(--fx-ease), opacity .35s;
}
#Fx.fx-on .fx-dot.on::after {
	width: 22px;
	opacity: 1;
}
#Fx.fx-on .fx-dot:focus-visible {
	outline: 2px solid var(--fx-light);
	outline-offset: 4px;
}
#Fx.fx-on .fx-dot-label {
	position: absolute;
	right: 36px;
	max-width: 240px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--fx-light);
	opacity: 0;
	translate: 8px 0;
	transition: opacity .25s, translate .25s;
	pointer-events: none;
}
#Fx.fx-on .fx-dot:hover .fx-dot-label,
#Fx.fx-on .fx-dot:focus-visible .fx-dot-label {
	opacity: 1;
	translate: 0 0;
}

/* Cross */
#Fx.fx-on .fx-cross .fx-cell,
#Fx.fx-on .fx-cross .fx-head {
	transition: all .3s ease, background-color .2s, color .2s;
}
#Fx.fx-on .fx-cross .fx-row .fx-cell,
#Fx.fx-on .fx-cross .fx-cell.fx-col {
	background-color: var(--fx-cross-row);
}
#Fx.fx-on .fx-cross .fx-row .fx-cell.fx-col {
	background-color: var(--fx-cross-cell);
	color: var(--fx-point);
}
#Fx.fx-on .fx-cross .fx-head.fx-col {
	box-shadow: inset 0 -3px 0 var(--fx-accent);
}

/* Keyframes */
@keyframes fx-zoom-in {
	from {
		scale: 1.1;
		opacity: .5;
	}
	to {
		scale: 1;
		opacity: 1;
	}
}
@keyframes fx-float {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -10px;
	}
}
@keyframes fx-shine {
	from {
		left: -40%;
	}
	to {
		left: 120%;
	}
}
@keyframes fx-pop {
	0% {
		opacity: 0;
		translate: 0 90px;
		scale: .82;
		filter: blur(12px);
	}
	55% {
		opacity: 1;
		translate: 0 -10px;
		scale: 1.02;
		filter: blur(0);
	}
	78% {
		translate: 0 4px;
		scale: .995;
	}
	100% {
		translate: 0 0;
		scale: 1;
	}
}
@keyframes fx-pop-img {
	from {
		clip-path: inset(100% 0 0 0);
		scale: 1.3;
	}
	to {
		clip-path: inset(0 0 0 0);
		scale: 1;
	}
}
@keyframes fx-pop-rise {
	from {
		opacity: 0;
		translate: 0 100%;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}
@keyframes fx-pop-out {
	to {
		opacity: 0;
		translate: 0 -60px;
		scale: .94;
		filter: blur(8px);
	}
}

@media (max-width: 1200px) {
	#Fx.fx-on .fx-dots {
		display: none;
	}
}
@media (max-width: 768px) {
	#Fx.fx-motion .fx-reveal:not(.fx-in) {
		translate: 0 24px;
		filter: none;
	}
	#Fx.fx-motion .fx-unfold {
		--fx-u-y: 24px;
		--fx-u-x: 16px;
		--fx-u-r: 24px;
	}
}