/* ============================================================
   contact.css — Contact 메인  (Figma 140:3391)
   ============================================================ */

.ct {
	position: relative;
	max-width: var(--design-w);
	margin: 0 auto;
	padding: calc(var(--header-h) + 20px) var(--gutter) 140px;
	overflow: hidden;
}
body:has(.ct) { background: #f8f9ff; }

.ct__bg {
	position: absolute;
	left: 50%;
	top: 258px;
	z-index: 0;
	width: 882px;
	max-width: 100%;
	transform: translateX(-50%);
	opacity: .05;
	pointer-events: none;
}
.ct__bg img { width: 100%; height: auto; }

/* ---------- 히어로 ---------- */
.ct-hero {
	position: relative;
	z-index: 1;
	/* 제목 + 말풍선 묶음 위로 50 더 (QA #58) */
	margin-top: 24px;
	text-align: center;
}
@media (min-width: 768px) {
	.ct-hero { margin-top: 50px; }
}
/* 좁은 화면 — 예전처럼 말풍선이 제목 위에 온다.
   마크업은 제목이 먼저라(넓은 화면 기준) 여기서 차례를 뒤집는다. */
.ct-hero__head {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
}
.ct-hero__art {
	display: block;
	width: clamp(200px, 17.2vw, 330px);
	height: auto;
	margin: 0 auto;
	animation: ct-float 6s ease-in-out infinite;
}
/* 넓은 화면 — 말풍선을 글 오른쪽에 두되 흐름에서 빼낸다.
   · 같은 줄에 나란히 두면 「글 + 말풍선」 덩어리가 가운데로 맞춰져
     정작 글이 왼쪽으로 밀린다. 글이 판 한가운데에 오는 것이 먼저다.
   · 가운데에서 몇 vw 떨어뜨리는 식으로 잡으면 안 된다. 제목보다
     안내문 한 줄이 훨씬 길어서(1600px 에서 제목 442 · 안내문 659),
     제목만 비켜난 자리는 안내문 위로 겹쳐 앉는다.
   · 그래서 판의 오른쪽 끝에 붙인다. 글은 가운데 정렬이라 양옆에
     (판폭 - 안내문폭)/2 만큼 늘 비어 있고, 말풍선은 그 안에 들어간다.
     1100px 에서 그 여백이 222px, 말풍선이 200px 로 가장 빠듯하다.
     더 좁아지면 넣을 자리가 없어 예전처럼 제목 위로 올라간다.
   · 세로는 글 덩어리(제목+안내문)의 가운데. 둥둥 뜨는 효과가 transform 을
     쓰므로 translate 대신 top 으로만 맞춘다. */
@media (min-width: 1100px) {
	.ct-hero__head { display: block; }
	.ct-hero__title { margin: 0; }
	.ct-hero__art {
		position: absolute;
		right: 0;
		top: calc(50% - clamp(100px, 8.6vw, 165px));
		margin: 0;
	}
}
@keyframes ct-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-14px) rotate(-2deg); }
}
.ct-hero__title {
	margin: 26px 0 0;
	font-size: clamp(34px, 3.23vw, 62px);
	font-weight: 800;
	/* 1.6 이면 글자 위아래로 빈 줄이 크게 생겨 안내문이 멀어 보였다 */
	line-height: 1.2;
	color: #0a090b;
}
.ct-hero__title em { font-style: normal; color: var(--c-blue); }
.ct-hero__lead {
	margin: 6px 0 0;
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 500;
	line-height: 1.4;
	color: #0a090b;
}
.ct-hero__cta { display: flex; justify-content: center; margin-top: 60px; }

.ct-start {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: min(500px, 100%);
	height: 80px;
	padding: 16px 24px;
	border-radius: 8px;
	background: linear-gradient(270deg, #ed35a4 0%, #6136d9 100%);
	background-size: 200% 100%;
	background-position: 0% 0%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .1), 0 0 0 4px rgba(152, 49, 211, .06);
	color: var(--c-white);
	font-size: clamp(16px, 1.15vw, 18px);
	font-weight: 800;
	transition: background-position .6s cubic-bezier(.65, 0, .35, 1),
	            transform .3s cubic-bezier(.2, .8, .25, 1),
	            box-shadow .3s ease;
}
.ct-start img { width: 31px; height: 31px; transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.ct-start:hover {
	background-position: 100% 0%;
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(152, 49, 211, .28), 0 0 0 4px rgba(152, 49, 211, .1);
}
.ct-start:hover img { transform: rotate(-10deg) scale(1.12); }

/* ---------- 세 갈래 카드 ---------- */
.ct-paths {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	/* 카드까지 한 화면에 들어오도록 좁혔다(115px 이던 것).
	   그 뒤 안내문 줄과 너무 붙어 보여 30px 을 다시 얹었다. */
	margin: clamp(70px, calc(5vw + 30px), 90px) 0 0;
	padding: 0;
	list-style: none;
}
.ct-path__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 40px 30px 36px;
	border: 1px solid #ddd;
	border-radius: 16px;
	background: var(--c-white);
	text-align: center;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.ct-path--best .ct-path__link {
	border: 2px solid #ed35a4;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .1), 8px 8px 12px rgba(0, 0, 0, .09), 19px 19px 16px rgba(0, 0, 0, .05);
}
.ct-path__link:hover {
	transform: translateY(-10px);
	border-color: #a686ff;
	box-shadow: 0 26px 54px rgba(40, 30, 120, .16);
}

.ct-path__art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	max-width: 100%;
	aspect-ratio: 1;
	margin-bottom: 12px;
}
.ct-path__art img { width: 100%; height: 100%; object-fit: contain; }
.ct-path__link:hover .ct-path__art img { transform: scale(1.04); }
.ct-path__art img { transition: transform .45s cubic-bezier(.2, .8, .25, 1); }

/* AI 카드의 회전하는 원 — 원본은 conic-gradient 를 흐리게 돌린 것이다 */
.ct-orb {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 139px;
	height: 139px;
	margin: -69px 0 0 -69px;
	border-radius: 50%;
	background: conic-gradient(from 90deg,
		#0ba2f6 0%, #307ef7 10%, #5559f7 20%, #7b35f7 30%, #a011f7 40%,
		#b526bd 47%, #cb3a84 54%, #e14f4a 61%, #f76411 69%,
		#bc734a 77%, #818383 84%, #4692bd 92%, #0ba2f6 100%);
	filter: blur(22px);
	animation: ct-spin 9s linear infinite;
}
.ct-path__art--ai::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 88px;
	height: 88px;
	margin: -44px 0 0 -44px;
	border-radius: 40px;
	background: var(--c-white);
	filter: blur(16px);
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

.ct-orb__pill {
	position: absolute;
	left: 50%;
	top: calc(50% - 26px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 66px;
	height: 20px;
	margin-left: -33px;
	border-radius: 25px;
	background: rgba(255, 255, 255, .3);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	box-shadow: inset 4px 3px 3px rgba(255, 255, 255, .25);
}
.ct-orb__pill i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6136d9;
	animation: ct-blink 3.4s ease-in-out infinite;
}
.ct-orb__pill i:last-child { animation-delay: .25s; }
@keyframes ct-blink {
	0%, 44%, 100% { transform: scaleY(1); }
	48%, 52%      { transform: scaleY(.15); }
}
.ct-orb__label {
	position: relative;
	z-index: 2;
	margin-top: 18px;
	font-family: var(--font-num);
	font-size: clamp(30px, 2.19vw, 42px);
	font-weight: 900;
	line-height: 1.4;
	background: linear-gradient(180deg, #ed35a4 0%, #a736bf 50%, #6136d9 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}

.ct-path__head {
	display: block;
	margin-top: 6px;
	font-size: clamp(19px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.4;
	color: #0a090b;
}
.ct-path--best .ct-path__head { color: var(--c-blue); }
.ct-path__lead {
	display: block;
	margin-top: 10px;
	font-size: clamp(14px, 1.04vw, 16px);
	font-weight: 500;
	line-height: 1.4;
	color: #333;
}
.ct-path--best .ct-path__lead { color: var(--c-blue); }

.ct-path__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 350px;
	height: 60px;
	margin-top: auto;
	margin-top: 38px;
	border-radius: 8px;
	background: linear-gradient(100deg, #a686ff 0%, #2737cf 100%);
	background-size: 180% 100%;
	background-position: 0% 0%;
	box-shadow: 4px 1px 9px rgba(0, 0, 0, .07), 16px 4px 17px rgba(0, 0, 0, .06);
	color: var(--c-white);
	font-size: clamp(16px, 1.15vw, 18px);
	font-weight: 700;
	transition: background-position .6s cubic-bezier(.65, 0, .35, 1), box-shadow .3s ease;
}
.ct-path__link:hover .ct-path__btn {
	background-position: 100% 0%;
	box-shadow: 0 12px 24px rgba(39, 55, 207, .28);
}

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
	.ct-paths { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-left: auto; margin-right: auto; }
	.ct-path__art { width: 200px; }
}
@media (max-width: 600px) {
	.ct { padding-bottom: 90px; }
	.ct-start { height: 68px; }
	.ct-paths { margin-top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
	.ct-hero__art, .ct-orb, .ct-orb__pill i { animation: none; }
}