@charset "utf-8";

/* ============================================================
   웹비스타 리뉴얼 2026 — 공통 스타일
   디자인 기준: Figma 1920px (node 132:398 main)
   ============================================================ */

/* ---------- 디자인 토큰 ---------- */
:root {
	/* 색상 */
	--c-blue:        #574CC4;   /* 주 버튼 */
	--c-blue-light:  #756dca;   /* 로그인 버튼 (.btn-login) */
	--c-cyan:        #40ddff;   /* 카운팅 숫자 */
	--c-tab-border:  #eabfff;   /* 히어로 탭 테두리 */
	--c-text:        #111111;
	--c-white:       #ffffff;

	/* 레이아웃 — 디자인 1920 기준, 좌우 여백 100 */
	--design-w:      1920px;
	--gutter:        clamp(10px, 5.208vw, 100px); /* 시안 100 */
	--content-w:     1720px;

	--header-h:      clamp(70px, 9vw, 100px);

	/* 폰트 */
	--font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
	             "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	--font-num:  "Montserrat", var(--font-body);
	--font-label:"Geologica", var(--font-body);
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--font-body);
	color: var(--c-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-break: keep-all;
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; outline: none; background: none; }

/* 접근성: 키보드 포커스는 보이게 */
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}
main { overflow: hidden; }
.main_wrap { padding-top: var(--header-h); }
/* 공통 컨테이너 */
.container {
	width: 100%;
	max-width: var(--content-w);
	margin: 0 auto;
	padding: 0 24px;
}
.tc {justify-content: center !important; text-align: center !important;}

/* ---------- 공통 CTA 버튼 (유지보수·자료실 상세 등) ----------
   var(--c-blue) → #fb3dab 그라데이션. .tc 와 같이 쓰면 가운데 정렬. */
.mq-cta {
	display: flex;
	justify-content: flex-end;
	margin-top: 30px;
}
.mq-cta-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 280px;
	height: 65px;
	padding: 0 28px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--c-blue) 0%, #fb3dab 100%);
	box-shadow: 0 10px 25px rgba(139, 121, 246, .3);
	color: #fff;
	font-size: clamp(14px, 1.111vw, 16px);
	font-weight: 800;
	line-height: 1.4;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.mq-cta-btn__arrow { flex: none; }
.mq-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(139, 121, 246, .4);
	filter: brightness(1.03);
}
.mq-cta-btn--list {
	min-width: 240px;
	width: 240px;
}
@media (max-width: 900px) {
	.mq-cta { justify-content: center; }
	.mq-cta-btn { width: 100%; min-width: 0; }
	.mq-cta-btn--list { width: 100%; }
}

/* ============================================================
   헤더 / GNB   (Figma 132:1067)
   ============================================================ */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--header-h);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, .06); }

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	max-width: var(--design-w);
	margin: 0 auto;
	padding: 0 clamp(10px, 2vw, 20px);
}

.site-header__logo { flex: none; }
.site-header__logo img { width: 198px; height: 37px; }

/* GNB — 헤더 폭 중앙에 고정 (로고/버튼 폭과 무관하게 항상 정중앙) */
.gnb {
	width: 100%;
	flex:1;
	padding: 0px 50px;
}
.gnb__list { display: flex; max-width:860px; margin: 0 auto; align-items: center; justify-content: space-between; height: 100%; }
.gnb__list > li > a {
	position: relative;
	display: block;
	font-size:16px; /* 시안 16 SemiBold */
	font-weight: 600;
	color: #000;
	white-space: nowrap;
	padding: 4px 0;
}
/* 밑줄이 가운데에서 좌우로 퍼지는 hover */
.gnb__list > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--c-blue);
	transform: translateX(-50%);
	transition: width .25s ease;
}
.gnb__list > li > a:hover::after,
.gnb__list > li > a:focus-visible::after { width: 100%; }

/* 우측 유틸 버튼 */
.site-header__util {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.btn-login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(40px, 5vw, 45px);
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-blue-light);
	transition: transform .2s ease, filter .2s ease;
}
.btn-login img { width: 24px; height: 24px; }
.btn-login:hover { transform: translateY(-2px); filter: brightness(1.1); }

.btn-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 45px;
	border-radius: 300px;
	background: var(--c-blue);
	color: var(--c-white);
	font-size: clamp(13px, 1vw, 14px); /* 시안 ~16 */
	font-weight: 800;
	white-space: nowrap;
	transition: transform .2s ease, filter .2s ease;
}
.btn-pill:hover { transform: translateY(-2px); filter: brightness(1.15); }

/* ============================================================
   히어로 (visual01)   (Figma 132:1093)
   ============================================================ */
.hero {
	position: relative;
	height: 980px;
	min-height: 640px;
	margin-top:1px;
	overflow: hidden;
	color: var(--c-white);
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 아주 느린 확대로 정적인 배경에 생기를 준다 */
	animation: heroZoom 24s ease-in-out infinite alternate;
}
@keyframes heroZoom {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

/* 좌측 세로 탭 */
.hero__tabs {
	position: absolute;
	left: var(--gutter);
	top: 70px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 200px;
}
.hero-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 55px;
	padding: 14px 20px;
	border: 1px solid var(--c-tab-border);
	border-radius: 4px;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	background: radial-gradient(ellipse at 15% 20%,
		rgba(165, 239, 255, .10) 0%,
		rgba(110, 191, 244, .022) 77%,
		rgba(70, 144, 212, 0) 100%);
	color: var(--c-white);
	font-size: clamp(12px, 1.6vw, 16px); /* 시안 16 */
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
	transition: transform .25s ease, background .25s ease;
}
.hero-tab:hover { transform: translateX(6px); }
.hero-tab.is-active {
	background: radial-gradient(ellipse at 15% 20%,
		rgba(70, 144, 212, .8) 0%,
		rgba(126, 73, 205, .8) 50%,
		rgba(182, 1, 198, .8) 100%);
}

/* 중앙 카피 — hero-panel flex 흐름 */
.hero__copy {
	position: relative;
	z-index: 2;
	width: min(100%, 1200px);
	margin: 0;
	padding: 0 24px;
	text-align: center;
}
.hero__lead {
	margin: 0;
	font-size: clamp(15px, 3vw, 36px); /* 시안 36 */
	font-weight: 400;
	line-height: 1.6;
}
.hero__title {
	margin: 4px 0 0;
	font-size: clamp(22px, 6vw, 64px); /* 시안 64 */
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: -.01em;
}

/* 카운팅 박스 — hero-panel flex 흐름 */
.hero__stats {
	position: relative;
	z-index: 2;
	display: flex;
	width: min(100%, 1480px);
	height: 280px;
	margin: 0;
	border-radius: 8px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background: radial-gradient(ellipse at 0% 3%,
		rgba(0, 0, 0, .2) 0%,
		rgba(51, 51, 51, .2) 50%,
		rgba(102, 102, 102, .2) 100%);
}
.stat {
	position: relative;
	flex: 1 1 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	color: var(--c-cyan);
	text-align: center;
}
/* 이웃 칸 구분선 — 높이 약 40% */
.stat + .stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 40%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .25);
}
.stat__num {
	font-family: var(--font-num);
	font-size: clamp(36px, 3.333vw, 64px); /* 시안 64 */
	font-weight: 600;
	line-height: 1;
}
.stat__num .unit { font-weight: 100; }
.stat__label {
	font-size: clamp(14px, 1.042vw, 20px); /* 시안 20 */
	font-weight: 800;
	line-height: 1.6;
	white-space: nowrap;
}

/* 스크롤 다운 */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom:5%;
	z-index: 2;
	width: 76px;
	transform: translateX(-50%);
	text-align: center;
}
.hero__scroll-label {
	margin: 0 0 8px;
	font-family: var(--font-label);
	font-size: clamp(10px, 0.694vw, 10px);
	font-weight: 800;
	color: var(--c-white);
}
.hero__mouse {
	position: relative;
	width: 26px;
	height: 40px;
	margin: 0 auto;
	border: 1px solid var(--c-white);
	border-radius: 8px;
}
.hero__mouse::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	width: 4px;
	height: 9px;
	margin-left: -2px;
	border-radius: 300px;
	background: var(--c-white);
	animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
	0%, 100% { transform: translateY(0);    opacity: 1; }
	50%      { transform: translateY(14px); opacity: .3; }
}
.hero__scroll-arrow { margin: 10px auto 0; width:1px; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1280px) {
	.gnb__list { gap: 26px; }

	.btn-pill { width: 120px; }
	.hero { height: 860px; }
	.hero__stats { height: 240px; }
	.stat { gap: 16px; }
}

@media (max-width: 1024px) {
	.gnb, .site-header__util .btn-pill { display: none; }
	.hero { height: auto; min-height: 0; padding: 40px 0 80px; }
	.hero-panel {
		position: relative;
		inset: auto;
		padding:100px var(--gutter);
		padding-bottom: clamp(20px, 5vw, 50px);
		gap: 40px;
	}
	.hero__tabs,
	.hero__scroll { position: relative; transform: none; left: auto; top: auto; }
	.hero__tabs { width: auto; flex-direction: row; margin:0px clamp(10px, 4vw, 50px); }
	.hero-tab { width: auto; flex:auto; height: clamp(40px, 5vw, 55px);}
	.hero-tab:hover { transform: none; }
	.hero__copy { width: auto; padding:0px }
	.hero__stats {
		width: 100%;
		height: auto;
		margin: 0 24px;
		padding: 28px 0;
		flex-wrap: wrap;
	}
	.stat { flex: 1 1 33%; padding: 18px 8px; gap: 10px; }
	.stat + .stat::before { content: none; }
	.hero__scroll { display: none; }
}

@media (max-width: 600px) {
	.stat { flex: 1 1 50%; }
	.stat__label { white-space: normal; }
}

/* ============================================================
   서비스 (Frame 95)   (Figma 132:1665)
   ------------------------------------------------------------
   카드 위에 걸쳐 있는 원형 아이콘 때문에 세로 간격이 아이콘 크기에
   묶여 있다. --icon 하나만 바꾸면 겹침(-51.36%)과 카드 윗여백이
   같이 따라오도록 계산식으로 묶어 두었다.
   ============================================================ */
.svc {
	--icon: 220px;
	position: relative;
	padding: 149px 0 114px;

	overflow: hidden;
}
.svc__inner {
	position: relative;
	z-index: 1;
	max-width: var(--design-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.svc__head { text-align: center; }
.svc__title {
	margin: 0;
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	color: var(--c-blue);
}
.svc__sub {
	margin: -4px 0 0;
	font-size: clamp(18px, 1.667vw, 32px); /* 시안 32 */
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-blue-light);
}

.svc__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
	margin-top: 43px;
}

.svc-card { display: flex; }
.svc-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.svc-card__icon {
	position: relative;
	z-index: 1;
	flex: none;
	display: block;
	width: var(--icon);
	height: var(--icon);
	border-radius: 50%;   /* 정사각 PNG 의 흰 모서리를 잘라낸다 */
	/* 아이콘 아래 51.36%(220px 기준 113px)가 카드 위에 얹힌다 */
	margin: 0 auto calc(var(--icon) * -.5136);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.svc-card__box {
	display: block;
	min-height: 400px;
	flex: 1 1 auto;
	padding: calc(var(--icon) * .5136 + 43px) 30px 40px;
	border-radius: 16px;
	background: var(--c-white);
	color: var(--c-text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	transition: box-shadow .3s ease;
}
.svc-card__link:hover { transform: translateY(-8px); }
.svc-card__link:hover .svc-card__icon { transform: scale(1.05); }
.svc-card__link:hover .svc-card__box { box-shadow: 0 20px 44px rgba(0, 0, 0, .18); }

.svc-card__tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 16px;
	border-radius: 300px;
	background: rgba(179, 160, 255, .2);
	font-family: var(--font-num);
	font-size: clamp(11px, 0.729vw, 14px); /* 시안 14 */
	font-weight: 700;
	color: #4b28a8;
	white-space: nowrap;
}
.svc-card__title {
	display: block;
	margin-top: 9px;
	font-size: clamp(20px, 1.563vw, 30px); /* 시안 30 */
	font-weight: 800;
	line-height: 1.6;
	color: #000;
}
.svc-card__desc {
	display: block;
	margin-top: 10px;
	font-size: clamp(13px, 1.1vw, 16px); /* 시안 16 */
	font-weight: 600;
	line-height: 1.6;
	color: #000;
}

.svc__more {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}
.btn-gradient {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 250px;
	padding: 16px 24px;
	border-radius: 8px;
	background: linear-gradient(to left, #ed35a4, #6136d9);
	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(13px, 1.438vw, 18px);
	font-weight:600;
	line-height: 28px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.btn-gradient img { width: 31px; height: 31px; }
.btn-gradient:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 0 6px rgba(152, 49, 211, .12);
}

/* ---------- 스크롤 등장 연출 ----------
   JS 가 <html> 에 .has-reveal 을 붙였을 때만 숨겼다가 나타난다.
   스크립트가 없거나 실패하면 처음부터 그냥 보인다. */
.has-reveal .js-reveal {
	opacity: 0;
	transform: translateY(24px);
}
.has-reveal .js-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease var(--delay, 0ms),
	            transform .6s cubic-bezier(.2, .7, .3, 1) var(--delay, 0ms);
}

/* ---------- 서비스 반응형 ---------- */
@media (max-width: 1400px) {
	.svc { padding: 110px 0 90px; }
	.svc__list { grid-template-columns: repeat(3, 1fr); }
	.svc-card__desc .br-pc { display: none; }
}
@media (max-width: 1280px) {
	.svc { --icon: 190px; }

}
@media (max-width: 1024px) {
	.svc { padding: 80px 0 70px; }
	.svc__list { grid-template-columns: repeat(2, 1fr); }
	.svc-card__box { min-height: 0; padding-bottom: 32px; }
}
@media (max-width: 600px) {
	.svc { --icon: 170px; }
	.svc__list { grid-template-columns: 1fr; gap: 24px; }
	.svc-card__box { padding-left: 24px; padding-right: 24px; }

}

/* ============================================================
   이런 고민을 해보셨나요? (Frame 94)   (Figma 132:1094)
   ------------------------------------------------------------
   좌(고민) · 우(해결) 두 판이 가운데에서 반원으로 맞물려 잘록해지는 형태.
   가운데 원(hub)은 판 위에 얹히므로 슬라이더 컨테이너 기준으로 절대배치한다.
   ============================================================ */
.worry {
	padding: 148px 0 0;
	text-align: center;
}
.worry__title {
	margin: 0;
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	color: #111;
}

.worry__slider {
	position: relative;

}
.worry__track { height: 370px; }

.worry-slide { display: none; height: 100%; }
.worry-slide.is-active {
	display: flex;
	animation: worryFade .5s ease;
}
@keyframes worryFade { from { opacity: 0; } to { opacity: 1; } }

.worry-panel {
	flex: 1 1 50%;
	min-width: 0;
	padding: 91px 24px 0;
	background-color: #242c32;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: var(--c-white);
	text-align: left;
}
/* 안쪽(가운데) 모서리만 반원으로 — 높이의 절반까지 자동으로 눌린다 */
.worry-panel--bad {
	border-radius: 0 300px 300px 0;
	background-image: url("../img/worry-glow-l.svg");
	/* % 패딩은 패널이 아니라 슬라이드 전체 폭 기준이라 1920 기준으로 환산한다 (260/1920) */
	padding-left: 13.54%;
}
.worry-panel--good {
	border-radius: 300px 0 0 300px;
	background-image: url("../img/worry-glow-r.svg");
	padding-left: 14.17%;   /* 272/1920 */
}

.worry-panel__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.worry-panel__head img { flex: none; width: clamp(30px, 4vw, 40px); aspect-ratio: 1; height: auto; }
.worry-panel__title {
	font-size: clamp(22px, 1.875vw, 36px); /* 시안 36 */
	font-weight: 800;
	line-height: 1.6;
	background-image: linear-gradient(to right, #fe9e33, #fe0082);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.worry-panel--good .worry-panel__title {
	background-image: linear-gradient(to right, #5a5df5, #8fc1fa);
}

.worry-panel__list {
	/* 아이콘(40) + 간격(14) 만큼 들여써서 제목 텍스트에 맞춘다 */
	margin: 18px 0 0 57px;
	padding-left: 11px;
}
.worry-panel__list li {
	position: relative;
	font-size: clamp(14px, 0.938vw, 18px); /* 시안 18 */
	font-weight: 600;
	line-height: 2;
	color: var(--c-white);
}
.worry-panel__list li::before {
	content: "";
	position: absolute;
	left: -11px;
	top: calc(1em - 1px);
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: var(--c-white);
}

/* 가운데 손잡이(.worry__hub)와 인용부호·선은 worry-scroll.css 로 옮겼다.
   옛 규칙(189px 원 + 블러 배경)이 남아 있으면 새 손잡이와 겹친다. */
.worry__badge { top: 53%; transform: translate(-50%, -50%); width:clamp(70px, 10vw, 100px); aspect-ratio: 1; height: auto; transform: translate(-50%, -50%); }

/* 페이지 점 */
.worry__dots {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 20px;
}
.worry__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(36, 44, 50, .25);
	transition: background .2s ease, transform .2s ease;
}
.worry__dot:hover { transform: scale(1.2); }
.worry__dot.is-active { background: #242c32; }

/* ---------- 고민 섹션 반응형 ---------- */
@media (max-width: 1400px) {
	.worry { padding-top: 110px; }
	.worry-panel { padding-top: 70px; }
	.worry__track { height: 330px; }
}
@media (max-width: 1024px) {
	.worry { padding-top: 80px; }
	.worry__track { height: auto; }
	.worry-slide.is-active { flex-direction: column; gap: 16px; }
	.worry-panel { padding: 36px 28px; border-radius: 24px; }
	.worry-panel__list {margin: clamp(10px, 2vw, 18px) 0 0 clamp(40px, 5vw, 54px); }
	.worry-panel--bad,
	.worry-panel--good { padding: clamp(20px, 2vw, 28px); border-radius: clamp(10px, 2vw, 24px); }
}

/* ============================================================
   Why WEBVISTA? (Frame 93)   (Figma 132:1919)
   ------------------------------------------------------------
   카드는 오른쪽 화면 밖까지 이어지는 가로 스크롤러다. 디자인 기준 1920 에서
   카드 열이 x=590 에서 시작하므로 30.73% 만큼 왼쪽을 비우고, 그 자리에
   장식(마크·링·박수)을 얹는다. 장식은 내부 좌표가 서로 맞물려 있어
   퍼센트로 흩뜨리지 않고 통째로 scale 로 줄인다.
   ============================================================ */
.why {
	position: relative;
	padding: 167px 0 235px;   /* 카드 아래 235px 뒤부터 포트폴리오 섹션이 시작한다 */
	overflow: hidden;
}
 
/* 장식 + 카드 띠 한 줄. 줄 자체는 1720 가운데 정렬이고,
   카드 띠만 오른쪽 여백을 넘어 화면 끝까지 이어진다(.why__scroller 참고). */
.why__row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(24px, 3.125vw, 60px); /* 시안 60 */
	width: 100%;
	max-width: 1720px;
	margin: 0 auto;
}

/* 시안 320×360 한 장. 줄의 왼쪽에 그대로 놓이므로 좌표를 잡을 필요가 없다. */
.why__deco {
	position: relative;
	flex: 0 0 auto;
	width: clamp(200px, 16.67vw, 320px); /* 시안 320 */
	aspect-ratio: 320 / 360;
	pointer-events: none;
}
.why__deco img {
	width: 100%;
	height: 100%;
	display: block;
}

.why__title {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0 0 clamp(2px, 5vw, 71px) 0px;   /* 708 / 1920 */
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	color: #000;
}

/* 카드 띠 — 줄의 남은 자리를 다 쓰고, Swiper 로 3초마다 한 장씩 좌측 이동.
   오른쪽은 1720 바깥에 남는 여백(50vw - 860)만큼 끌어내 화면 끝까지 채운다.
   화면이 1720 보다 좁으면 그 값이 양수라 min() 이 0 을 골라 그대로 멈춘다. */


.why__scroller.swiper-container {
	list-style: none;
	min-width: 100vw;
}

/* Swiper 4 기본 width:100% 덮어쓰기 */
.why__scroller .why__list.swiper-wrapper,
.why__scroller .swiper-wrapper {
	display: flex;
	align-items: stretch;
	box-sizing: content-box;
	width: auto !important;
	height: auto !important;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0;
}

.why__scroller .why-card.swiper-slide {
	flex-shrink: 0;
	width: clamp(230px, 33vw, 360px);
	height: auto;
}
 

.why__more {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 64px 0 0 0;   /* 708 / 1920 */
}

.why-card {
	position: relative;
	flex: none;
	width:clamp(250px, 33vw, 360px);
	aspect-ratio: 1;
	border-radius: 8.33%; /* 30 / 360 */
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.why-card:hover { transform: translateY(-8px); }
/* 홀수 카드 — 시안의 메시 그라데이션을 이미지째 깐다. 테두리는 안쪽 그림자로 그려
   border 가 카드 크기에 끼어들지 않게 한다. */
.why-card--light {
	background: #f8f9ff url(../img/why-card-bg.png) center / cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(87, 76, 196, .5);
}
.why-card--blue  { background: var(--c-blue); }

.why-card__num {
	position: absolute;
	left: 10.83%; /* 39 / 360 */
	top: 7.78%;   /* 28 / 360 */
	font-size: clamp(12px, 0.833vw, 16px); /* 시안 16 */
	font-weight: 800;
	line-height: 1.6;
}
.why-card--light .why-card__num { color: #000; }
.why-card--blue  .why-card__num { color: var(--c-white); }

.why-card__title {
	position: absolute;
	left: 10.83%;  /* 39 / 360 */
	top: 21.67%;   /* 78 / 360 */
	margin: 0;
	font-size: clamp(20px, 2vw, 30px); /* 시안 30 */
	font-weight: 700;
	line-height: 1.4;
}
.why-card--light .why-card__title { color: #000; }
.why-card--blue  .why-card__title { color: var(--c-white); }

/* 우하단 아이콘 타일 — 시안 100×100 (라운드 배경까지 그림에 포함돼 있다).
   빛 효과가 타일 밖으로 새지 않도록 그림을 한 겹 감싸고 같은 라운드로 잘라 둔다. */
.why-card__icon {
	position: absolute;
	left: 66.39%;  /* 239 / 360 */
	top: 66.39%;   /* 239 / 360 */
	width: 27.78%; /* 100 / 360 */
	aspect-ratio: 1;
	display: block;
	border-radius: 30%; /* 30 / 100 — 타일 라운드 */
	overflow: hidden;
	isolation: isolate;
}
.why-card__icon > img {
	display: block;
	width: 100%;
	height: 100%;
}

/* 좌하단 눈금 — 카드 순서만큼 점이 늘어난다 (01 은 한 개, 05 는 다섯 개).
   카드가 360 보다 작아지면 같은 비율로 줄도록 vw 를 끼워 둔다. */
.why-card__steps {
	position: absolute;
	left: 10.83%; /* 39 / 360 */
	top: 90.56%;  /* 326 / 360 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(3px, 0.458vw, 5px);            /* 시안 5 */
	min-width: clamp(21px, 2.75vw, 30px);     /* 시안 30 */
	height: clamp(10px, 1.375vw, 15px);       /* 시안 15 */
	padding: 0 clamp(7px, 0.917vw, 10px);     /* 시안 10 */
	border: 1px solid rgba(87, 76, 196, .2);
	border-radius: 999px;
	background: #e0e4fc;                      /* Light Violet */
}
.why-card__step {
	flex: none;
	width: clamp(6px, 0.733vw, 8px);          /* 시안 8 */
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-white);
}

/* ---------- Why 반응형 ---------- */

@media (max-width: 1400px) {
	.why { padding: 110px 0 110px; }
	/* 장식을 빼면 카드 띠가 줄 전체를 쓴다 — 줄 폭이 곧 화면 폭이라 끝까지 붙는다 */
	.why__deco { display: none; }
	.why__row { gap: 0; overflow: hidden; }
	.why__title { margin-left: var(--gutter);}
	.why__more { margin-left: var(--gutter); margin-top: 48px; }
}
@media (max-width: 600px) {
	.why { padding: 80px 0 80px; }

	.why__more {margin-top: 36px; }
}

/* ============================================================
   포트폴리오 (Frame 92)   (Figma 132:1359)
   ------------------------------------------------------------
   카드 5장이 각자 다른 각도로 부채처럼 펼쳐진 1920 전용 구성이라,
   데스크톱에서는 높이 1080 고정 + 절대배치로 시안 좌표를 그대로 쓰고,
   1280 이하에서는 회전을 풀고 가로 스크롤 목록으로 바꾼다.
   ============================================================ */
.pf {
	position: relative;
	height: 1080px;
	background: #0a0512;
	color: var(--c-white);
	overflow: hidden;
}
.pf__bg { position: absolute; inset: 0; z-index: 0; }
.pf__bg img { width: 100%; height: 100%; object-fit: cover; }

.pf__title {
	position: absolute;
	left: 0;
	right: 0;
	top: 138px;
	z-index: 2;
	margin: 0;
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
}
/* 배경 워터마크 — 외곽선만 남긴 큰 글자 */
.pf__works {
	position: absolute;
	left: 50%;
	top: 211px;
	z-index: 1;
	transform: translateX(-50%);
	font-size: clamp(160px, 42vw, 420px);
	font-weight: 800;
	line-height: 1.6;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .5);
	opacity: .3;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.pf__fan { position: static; z-index: 2; }

.pf-card {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	width: 360px;
	aspect-ratio: 360/520;
	transform: translate(-50%, -50%) rotate(var(--r));
	transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.pf-card:hover { transform: translate(-50%, -50%) rotate(var(--r)) scale(1.04); }

.pf-card__link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	border: 1px solid var(--c-tab-border);
	border-radius: 8px;
	overflow: hidden;
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	background: radial-gradient(ellipse at 15% 21%,
		rgba(165, 239, 255, .2) 0%,
		rgba(110, 191, 244, .045) 77%,
		rgba(70, 144, 212, 0) 100%);
	color: var(--c-white);
}

.pf-card__cat {
	position: absolute;
	left: 10%;    /* 36 / 360 */
	top: 6.35%;   /* 33 / 520 */
	z-index: 2;
	display: inline-flex;
	align-items: center;
	height: 29px;
	padding: 0 17px;
	border-radius: 300px;
	background: #000;
	font-size: clamp(11px, 0.729vw, 14px); /* 시안 14 */
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}

/* 사진 뒤에 겹쳐 보이는 두 장 */
.pf-card__ghost {
	position: absolute;
	border-radius: 16px;
	background: #d9d9d9;
}
.pf-card__ghost--far  { left: 36px; top: 63px; width: 290px; height: 290px; opacity: .5; }
.pf-card__ghost--near { left: 30px; top: 43px; width: 300px; height: 300px; opacity: .7; }

.pf-card__thumb {
	position: absolute;
	left: 26px;
	top: 23px;
	width: 308px;
	height: 308px;
	border-radius: 16px;
	object-fit: cover;
}

.pf-card__name {
	position: absolute;
	left: 34px;
	top: 385px;
	font-size: clamp(16px, 1.25vw, 24px); /* 시안 24 */
	font-weight: 800;
	line-height: 1.6;
}
.pf-card__desc {
	position: absolute;
	left: 35px;
	top: 434px;
	width: 244px;
	font-size: clamp(12px, 0.833vw, 16px); /* 시안 16 */
	font-weight: 600;
	line-height: 1.4;
}

.pf__more {
	position: absolute;
	left: 50%;
	top: 922px;
	z-index: 3;
	transform: translateX(-50%);
}

/* ---------- 포트폴리오 반응형 ---------- */
@media (max-width: 1280px) {
	.pf {
		height: auto;
		padding: 80px 0;
	}
	.pf__title { position: static; margin-bottom: 40px; }
	.pf__works { display: none; }
	.pf__fan {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		padding: 0 var(--gutter) 8px;
		scrollbar-width: none;
	}
	.pf__fan::-webkit-scrollbar { display: none; }
	.pf-card {
		position: static;
		flex: none;
		transform: none;
	}
	.pf-card:hover { transform: translateY(-8px); }
	.pf__more { position: static; transform: none; display: flex; justify-content: center; margin-top: 48px; }
}
@media (max-width: 600px) {
	.pf { padding: 60px 0; }
	.pf__fan { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   유지보수 (Frame 91)   (Figma 132:1143)
   ------------------------------------------------------------
   가운데 아코디언은 카드를 70px 씩만 남기고 겹쳐 쌓은 형태다.
   카드마다 height 300 · margin-top -230 을 주면 머리 70px 만 보이고,
   펼친 카드에 margin-bottom 230 을 주면 그 카드만 300px 전부 드러난다.
   ============================================================ */
.mt {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center; /* 세로 가운데 */
	align-items: center;
	gap: 25px;
	height: 1080px;
	padding: 0;
	box-sizing: border-box;
	background: #e9edfa;
	overflow: hidden;
}
.mt__bg { position: absolute; inset: 0; z-index: 0; }
.mt__bg img { width: 100%; height: 100%; object-fit: cover; }

.mt__title {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0;
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	color: #000;
	text-align: center;
}

/* ---------- 좌·가운데·우 한 줄 (시안 520 + 534 + 520, 간격 ~73) ---------- */
.mt__row {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(24px, 3.802vw, 73px);
	width: min(1720px, calc(100% - var(--gutter) * 2));
	margin: 0 auto;
}
.mt__col {
	
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	
	margin: 0;
	padding: 0;
	list-style: none;
}


.mt-req {
	position: relative;
	height: 210px;
	border: 1px solid var(--c-white);
	border-radius: 12px;
	background: rgba(255, 255, 255, .6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	overflow: hidden;
}
/* 카드 시안 520×210 기준 — absolute 좌표를 %로 환산 */
.mt-req__company {
	position: absolute;
	left: 8.08%;   /* 42/520 */
	top: 12.38%;   /* 26/210 */
	font-size: clamp(16px, 1.25vw, 24px); /* 시안 24 */
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}
.mt-req__title {
	position: absolute;
	left: 8.85%;   /* 46/520 */
	top: 34.76%;   /* 73/210 */
	right: 8.08%;  /* 42/520 */
	margin: 0;
	font-size: clamp(12px, 0.833vw, 16px); /* 시안 16 */
	font-weight: 600;
	line-height: 1.4;
	color: #000;
}
.mt-req__re {
	display: inline-flex;
	align-items: center;
	height: 20px;
	margin-left: 8px;
	padding: 0 9px;
	border-radius: 4px;
	background: #4a43ee;
	color: var(--c-white);
	font-size: clamp(11px, 0.729vw, 14px); /* 시안 14 */
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	vertical-align: 2px;
}

.mt-req__status {
	position: absolute;
	right: 8.08%;  /* 42/520 */
	top: 12.38%;   /* 26/210 */
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 110px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid #ccc;
	border-radius: 300px;
}
.mt-req__knob {
	position: relative;
	flex: none;
	width: 31px;
	height: 16px;
	border-radius: 300px;
	background: #ccc;
}
/* 토글 안의 점 — 미완료는 왼쪽, 처리완료는 오른쪽 */
.mt-req__knob::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-white);
}
.mt-req__label {
	font-size: clamp(11px, 0.729vw, 14px); /* 시안 14 */
	font-weight: 600;
	line-height: 1.4;
	color: #333;
	white-space: nowrap;
}
.mt-req__status--wait { border-color: #b3a0ff; }
.mt-req__status--wait .mt-req__knob { background: #b3a0ff; }
.mt-req__status--wait .mt-req__label { color: #000; }
.mt-req__status--ing { border-color: #4a43ee; }
.mt-req__status--ing .mt-req__knob { background: #4a43ee; }
.mt-req__status--ing .mt-req__label { color: #000; }
.mt-req__status--done .mt-req__knob::after { left: 18px; }

.mt-req__rule {
	position: absolute;
	left: 8.46%;   /* 44/520 */
	top: 73.33%;   /* 154/210 */
	width: 83.08%; /* 432/520 */
	height: 1px;
	background: rgba(0, 0, 0, .12);
}
.mt-req__meta {
	position: absolute;
	top: 80.95%;   /* 170/210 */
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}
.mt-req__meta--in  { left: 8.85%;  /* 46/520 */ }
.mt-req__meta--due { left: 60.58%; /* 315/520 */ }
.mt-req__meta img { width: 24px; height: 24px; }
.mt-req__key {
	font-size: clamp(11px, 0.729vw, 14px); /* 시안 14 */
	font-weight: 600;
	line-height: 1.4;
	color: #000;
}
.mt-req__val {
	font-size: clamp(11px, 0.729vw, 14px); /* 시안 14 */
	font-weight: 400;
	line-height: 1.4;
	color: #000;
}
.mt-req__sep {
	position: absolute;
	left: 49.81%;  /* 259/520 */
	top: 82.86%;   /* 174/210 */
	width: 1px;
	height: 5.24%; /* 11/210 */
	background: rgba(0, 0, 0, .25);
}

/* ---------- 가운데 아코디언 ---------- */
.mt__acc {
	flex: none;
	z-index: 3;
	flex:1;
}
.mt-acc {
	position: relative;
	/* 닫힘 72 · 열림 302 (겹침 2px 은 위아래 테두리가 겹쳐 보이지 않게 하려는 것) */
	height: 72px;
	margin-top: -2px;
	border: 2px solid #8726b7;
	border-radius: 16px;
	background-image: linear-gradient(118.66deg, #4a43ee 1.93%, #2a2688 98.32%);
	overflow: hidden;
	transition: height .35s ease;
}
.mt-acc:first-child { margin-top: 0; }
.mt-acc.is-open { height: 302px; }
.mt-acc__sheen {
	position: absolute;
	left: -45px;
	top: -105px;
	width: 213px;
	height: 307px;
	pointer-events: none;
}

.mt-acc__head {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 16px 44px 0;
	border: 0;
	background: none;
	text-align: left;
}
.mt-acc__head--static { cursor: default; }
.mt-acc__no {
	flex: none;
	width: 20px;
	font-family: var(--font-num);
	font-size: clamp(12px, 0.833vw, 16px); /* 시안 16 */
	font-weight: 500;
	color: var(--c-white);
}
.mt-acc__label {
	font-size: clamp(13px, 0.938vw, 18px); /* 시안 18 */
	font-weight: 800;
	line-height: 1.6;
	color: var(--c-white);
}

.mt-acc__body { padding: 0 44px; }   /* 칩이 카드 기준으로 배치되도록 position 을 두지 않는다 */
.mt-acc__desc {
	margin: 26px 0 0;
	font-size: clamp(20px, 1.667vw, 32px); /* 시안 32 */
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-white);
}
.mt-acc__chips {
	position: absolute;
	/* 시안 left 375 · top 212 → 열린 카드(534×302) · 칩 묶음(135×64) 기준 */
	right: 4.49%;   /* (534 - 375 - 135) / 534 */
	bottom: 8.61%;  /* (302 - 212 - 64) / 302 */
	left: auto;
	top: auto;
	display: flex;
	gap: clamp(1px, 0.2vw, 7px);
	opacity: 0;
	transition:all 0.3s 0s ease-in-out;
}
.mt-acc.is-open .mt-acc__chips { opacity: 1; }
.mt-acc__chips img { width: clamp(44px, 4vw, 64px); height: clamp(44px, 4vw, 64px)	; }

/* ---------- 유지보수 반응형 ---------- */
@media (max-width: 1500px) {
	.mt { height: auto; padding: 90px 0; }
	.mt__row {
		flex-direction: column;
		align-items: stretch;
		width: auto;
		margin-top: 0;
		padding: 0 var(--gutter);
		gap: clamp(10px, 2vw, 40px);
	}
	/* 아코디언 → 3열 × 2행 그리드, 전부 펼침 */
	.mt__acc {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 16px;
		width: 100%;
		max-width: none;
		margin: 0;
		order: -1;
	}
	.mt-acc,
	.mt-acc.is-open {
		flex: 1 1 calc(33.333% - 11px);
		max-width: calc(33.333% - 11px);
		box-sizing: border-box;
		height: auto !important;

		margin-top: 0;
		padding-bottom:10px;
		z-index: auto !important;
		transition: none;
	}
	.mt-acc__more {position: relative !important; left: auto !important; top: auto !important;}
	.mt-acc__head {
		pointer-events: none; /* 그리드에선 토글 없음 */
		padding: 18px 24px 0;
	}
	.mt-acc__body { padding: 0 24px; }
	.mt-acc__desc {
		margin-top: 16px;
		font-size: clamp(16px, 2.2vw, 22px);
	}
	.mt-acc__chips,
	.mt-acc.is-open .mt-acc__chips {
		margin-top: 20px;
	}
	.mt-acc__more {
		position: static;
		margin-top: 18px;
	}
	.mt__col {
		width: auto;
		margin: 0;
		flex-direction: row;
	}
	.mt-req {flex:1}
}
@media (max-width: 1024px) {
	.mt-req { height: auto; padding: 26px 24px 24px; }
	.mt-req__company,
	.mt-req__title,
	.mt-req__status,
	.mt-req__rule,
	.mt-req__meta,
	.mt-req__sep { position: static; }
	.mt-req__company { display: block; }
	.mt-req__title { margin: 10px 0 0; }
	.mt-req__status { display: inline-flex; margin-top: 16px; }
	.mt-req__rule { display: block; width: 100%; margin: 18px 0 14px; }
	.mt-req__meta { display: inline-flex; margin-right: 20px; }
	.mt-req__sep { display: none; }
}
@media (max-width: 768px) {
	.mt { padding: 70px 0; }
	/* 한 줄에 2개 — 아코디언 */
	.mt__acc { gap: 12px; }
	.mt-acc,
	.mt-acc.is-open {
		flex: 1 1 calc(50% - 8px);
		max-width: calc(50% - 8px);

		padding-bottom: 20px;
	}
	.mt-acc__head { padding: 14px 16px 0; gap: 8px; }
	.mt-acc__body { padding: 0 16px; }
	.mt-acc__desc { font-size: clamp(14px, 3.5vw, 18px); }

	/* 한 줄에 2개 — 좌·우 요청 카드 */
	.mt__col {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
	}
	.mt-req {
		flex: 1 1 calc(50% - 6px);
		max-width: calc(50% - 6px);
		box-sizing: border-box;
		min-width: 0;
	}
	.mt__col .mt-req:nth-child(3) {display: none;}
}
@media (max-width: 600px) {
	.mt { padding: 70px 0; }
	.mt__acc {flex-direction: column;}
	.mt-acc, .mt-acc.is-open {max-width: 100% !important; flex: none !important; min-height: auto !important;}
	.mt-acc__desc br {display: none;}
	.mt__row {width: 100%;}
	.mt__col {flex-direction: column !important;}
	.mt-req {flex: none; max-width: 100% !important; box-sizing: border-box; min-width: 0 !important;}
}

/* ============================================================
   FAQ (Frame 90)   (Figma 132:1440)
   ------------------------------------------------------------
   좌측 소개 + 우측 목록. 목록은 위아래가 흐려지는 고정 높이 스크롤 영역이라
   이미지 대신 mask-image 그라디언트로 처리했다.
   ============================================================ */
.faq { padding: 132px 0 92px; }
.faq__inner {
	display: flex;
	align-items: flex-start;
	padding-left: 5.1%;    /* 98 / 1920 — 목록이 정확히 화면 중앙(960)에서 시작한다 */
}
.faq__intro { flex: none; width: 47.31%; }   /* % 는 padding 을 뺀 안쪽 폭(1822) 기준이다 — 862/1822 */
.faq__list  { flex: none; width: 47.20%; }   /* 860/1822 */

.faq__title {
	margin: 36px 0 0;
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	color: #000;
}
.faq__lead {
	margin: 10px 0 0;
	font-size: clamp(24px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 400;
	line-height: 1.3;
	color: #000;
}
.faq__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 131px;
}

.faq__list {
	height: 738px;
	overflow-y: auto;
	scrollbar-width: none;
	/* 위 150px · 아래 150px 이 서서히 사라진다 */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 588px, transparent 738px);
	        mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 588px, transparent 738px);
}
.faq__list::-webkit-scrollbar { display: none; }

.faq-item { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.faq-item__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 28px 0 29px;
	border: 0;
	background: none;
	text-align: left;
}
.faq-item__text {
	font-size: clamp(14px, 1.042vw, 20px); /* 시안 20 */
	font-weight: 600;
	line-height: 1.6;
	color: #000;
	transition: color .2s ease;
}
.faq-item__q:hover .faq-item__text { color: #4a43ee; }
.faq-item__mark {
	flex: none;
	width: 20px;
	font-size: clamp(14px, 1.042vw, 20px); /* 시안 20 */
	font-weight: 600;
	line-height: 1.6;
	color: #000;
	text-align: center;
}
.faq-item__mark::before { content: "+"; }

.faq-item.is-open .faq-item__q { padding: 40px 0 9px; }
.faq-item.is-open .faq-item__text {
	font-size: clamp(16px, 1.25vw, 24px); /* 시안 24 */
	font-weight: 800;
	line-height: 1.6;
	color: #4a43ee;
}
.faq-item.is-open .faq-item__mark::before { content: "\2212"; }

.faq-item__a { padding: 0 0 45px; }
.faq-item__a p {
	margin: 0;
	font-size: clamp(13px, 1.1vw, 16px); /* 시안 16 */
	font-weight: 600;
	line-height: 1.4;
	color: #333;
}
.faq-item:not(.is-open) .faq-item__a { display: none; }

/* ---------- FAQ 반응형 ---------- */
@media (max-width: 1400px) {
	.faq { padding: 90px 0 80px; }
	.faq__inner {
		flex-direction: column;
		gap: 48px;
		padding: 0 var(--gutter);
	}
	.faq__intro,
	.faq__list { width: 100%; }
	.faq__title { margin-top: 0; }
	.faq__cta { margin-top: 40px; }
	.faq__list {
		height: auto;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}
@media (max-width: 600px) {
	.faq__cta .btn-gradient { width: 100%; }

}

/* ============================================================
   Web Guide (Frame 89)   (Figma 132:1491)
   ============================================================ */
.guide {
	position: relative;
	height: 910px;
	overflow: hidden;
	background: #7a3fd6;
}
.guide__bg { position: absolute; inset: 0; z-index: 0; }
/* 시안 배경은 1956x1223 이고 그중 위쪽 910px 만 보인다 */
.guide__bg img {
	position: absolute;
	left:0%;
	top: 0;
	width:100%;   /* 1956 / 1920 */
	height: 100%;
	object-fit: cover;

}

.guide__title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding-top: 93px;
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	color: var(--c-white);
	text-align: center;
}

.guide__list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	max-width: var(--design-w);
	margin: 54px auto 0;
	padding: 0 var(--gutter);
}
.guide-card__link {
	display: block;
	height: 100%;
	border-radius: 8px;
	background: var(--c-white);
	box-shadow: 42px 43px 36px rgba(0, 0, 0, .02),
	            18px 19px 27px rgba(0, 0, 0, .03),
	            5px 5px 15px rgba(0, 0, 0, .03);
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.guide-card__link:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .18);
}
.guide-card__thumb {
	width: 100%;
	height: 250px;
	object-fit: cover;
}
.guide-card__title {
	display: block;

	font-size: clamp(16px, 1.25vw, 24px); /* 시안 24 */
	font-weight: 700;
	line-height: 1.4;
	color: #000;
}
.guide-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 1em;
}
.guide-card__tags em {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 300px;
	background: #fff;
	border:1px solid #DDDDDD;
	color: #000;
	font-size: clamp(10px, 0.677vw, 13px); /* 시안 13 */
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.guide__more {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	margin-top: 55px;
}

/* ---------- Web Guide 반응형 ---------- */
@media (max-width: 1400px) {
	.guide { height: auto; padding-bottom: 90px; }
	.guide__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.guide__title { padding-top: 70px; }
	.guide__list { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
	.guide-card__title { margin-top: 28px; }
}

/* ============================================================
   전시/행사/컨퍼런스 (Frame 88)   (Figma 132:1554)
   ------------------------------------------------------------
   가운데 문구 주위로 타일이 아치를 그리며 떠 있는 1920 전용 구성.
   타일 크기는 고정하고 가로 위치만 화면 폭에 비례시킨다.
   ============================================================ */
.ex {
	position: relative;
	height: 1080px;
	background: #ede9fc;
	overflow: hidden;
}
.ex__arc {
	position: absolute;
	left: 10.625%;   /* 204 / 1920 */
	top: 19px;
	width: 78.802%;  /* 1513 / 1920 */
	height: auto;
	z-index: 0;
	pointer-events: none;
}

.ex__tiles { position: absolute; inset: 0; z-index: 1; }
.ex-tile {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	animation: exFloat 6s ease-in-out infinite alternate;
}
/* 타일마다 시작 시점을 흩어 놓아 같이 움직이지 않게 한다 */
.ex-tile:nth-child(3n)   { animation-delay: -2s; }
.ex-tile:nth-child(3n+1) { animation-delay: -4s; }
@keyframes exFloat {
	from { transform: translateY(0); }
	to   { transform: translateY(-10px); }
}

.ex__copy {
	position: absolute;
	left: 0;
	right: 0;
	top: 534px;
	z-index: 2;
	text-align: center;
}
.ex__title {
	margin: 0;
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	color: #000;
}
.ex__lead {
	margin: 20px 0 0;
	font-size: clamp(16px, 1.354vw, 26px); /* 시안 26 */
	font-weight: 500;
	line-height: 1.4;   /* 시안 leading 1.4 */
	color: #000;
}
.ex__more { display: flex; justify-content: center; margin-top: 115px; }
.btn-gradient--wide { width: auto; }

/* ---------- 전시 섹션 반응형 ---------- */
@media (max-width: 1500px) {
	.ex { height: 900px; }
	.ex__copy { top: 430px; }
	.ex-tile { transform: scale(.8); transform-origin: center; }
}
@media (max-width: 1024px) {
	.ex { height: auto; padding: 80px 0; }
	.ex__arc { display: none; }
	.ex__tiles {display: none;}
	.ex__copy { position: static; padding: 0 var(--gutter); }
	.ex__more { margin-top: 40px; }
}
@media (max-width: 600px) {
	.btn-gradient--wide { width: 100%; }
}

/* ============================================================
   Clients (Frame 87)   (Figma 132:399)
   ------------------------------------------------------------
   구역 높이 992 · 내용 세로 가운데 · 배경 #f2f2f7
   칸 206×100 · 가로 피치 210 · 로고벽 창 h620 · 상·하 페이드 100
   ============================================================ */
.clients {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 25px;
	height: 992px;
	padding: 0;
	box-sizing: border-box;
	background: #f2f2f7;
	overflow: hidden;
}
.clients__title {
	position: relative;
	z-index: 3;
	width: 100%;
	margin: 0;
	font-size: clamp(28px, 3.229vw, 62px); /* 시안 62 */
	font-weight: 800;
	line-height: 1.6;
	color: #000;
	text-align: center;
}

/* 로고 벽이 보이는 창 + 상·하 100px 페이드 */
.clients__stage {
	position: relative;
	z-index: 1;
	width: 100%;
	height: clamp(300px, 60vh, 620px);
	flex: none;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 100px,
		#000 calc(100% - 100px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 100px,
		#000 calc(100% - 100px),
		transparent 100%
	);
}

@media (max-width: 1280px) {
	.clients { height: auto; padding: 90px 0 80px; gap: 0; }
	.clients__title { margin-bottom: 40px; }

}
@media (max-width: 600px) {
	.clients { padding: 70px 0 60px; }
}

/* ============================================================
   푸터 (Frame 86)   (Figma 132:1319)
   ============================================================ */
.site-footer {
	position: relative;
	padding: clamp(30px, 8vw, 80px) clamp(20px, 4vw, 40px) ;
	border-radius:clamp(30px, 3.125vw, 60px) clamp(30px, 3.125vw, 60px) 0 0;
	background: #111;
	color: var(--c-white);
	overflow: hidden;
}
/* 위 귀퉁이가 둥근데 그 뒤로 몸통의 흰 바탕이 비쳐, 메인에서는 바로 위
   Clients 띠(#f2f2f7)와 색이 달라 귀퉁이만 도드라져 보였다.
   ※ 예전에는 푸터 둘레에 회색을 한 겹 둘렀는데, 그러면 **모든 화면**에서
     푸터 위에 회색 띠가 생겨 버렸다(사용자 지적). 그래서 색을 칠하는 대신
     **메인에서만** 푸터를 둥글기만큼 끌어올려 Clients 띠 위에 살짝 겹친다.
     귀퉁이 뒤로는 그 띠의 회색이 그대로 비치고, 다른 화면은 하나도 안 바뀐다.
   (.clients 는 메인에만 있다) */
body:has(.clients) .site-footer {
	margin-top: calc(-1 * clamp(30px, 3.125vw, 60px));
	/* 겹친 만큼은 푸터가 **덮어야** 한다. z-index 를 안 주면 로고 줄이
	   검은 바탕을 뚫고 비쳐 보인다(사용자 지적) — 로고는 잘려도 된다. */
	z-index: 2;
}
.site-footer__deco {width: 100%; max-width:var(--design-w); position: absolute; left:50%; top: 0px; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.site-footer__squiggle {
	position: absolute;
	
	right:5%;
	top: 89px;
	width: 399px;
	height: 301px;
	opacity: .4;
}
.site-footer__mark {
	position: absolute;
	
	right: 100px;
	top: 22px;
	width: 148px;
	height: 142px;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--design-w);
	margin: 0 auto;
}
.site-footer__logo { display: block; line-height: 0; }   /* inline 여백이 아래 간격을 밀지 않게 */
.site-footer__logo img { width: 241px; height: 45px; }

.site-footer__lead {
	margin: 51px 0 0;
		/* 48.3 → 42 : 한 치수 작게 */
	font-size: clamp(21px, 2.917vw, 42px);
	font-weight: 800;
	line-height: 1.4;
}

/* 목록 사이 세로 구분선 — 항목 앞에 5px 짜리 선을 넣는다 */
.site-footer__links ul,
.site-footer__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
		/* 18.4 → 16 : 한 치수 작게 */
	font-size: clamp(10.5px, 1.111vw, 16px);
	font-weight: 600;
	line-height: 1.4;
}
.site-footer__links li,
.site-footer__info li { display: flex; align-items: center; }
.site-footer__links li + li::before,
.site-footer__info li + li::before {
	content: "";
	display: block;
	width: 1px;
	height: 5px;
	margin: 0 20px;
	background: rgba(255, 255, 255, .6);
}
.site-footer__links { margin-top: 131px; }
.site-footer__links a { transition: opacity .2s ease; }
.site-footer__links a:hover { opacity: .65; }
.site-footer__info { margin-top: 21px; }
.site-footer__info a:hover { text-decoration: underline; }

.site-footer__addr {
	display: grid;
	grid-template-columns: minmax(0, 35em) 1fr;
	row-gap: 11px;
	margin: 44px 0 0;
	opacity: .7;
		/* 18.4 → 16 : 한 치수 작게 */
	font-size: clamp(10.5px, 1.111vw, 16px);
	font-weight: 600;
	line-height: 1.4;
}
.site-footer__addr > div { display: flex; align-items: center; }
.site-footer__addr dt { flex: none; min-width:2em; margin: 0; }
.site-footer__addr dd { margin: 0; display: flex; align-items: center; }
.site-footer__addr dd::before {
	content: "";
	display: block;
	flex: none;
	width: 1px;
	height: 5px;
	margin: 0 15px;
	background: rgba(255, 255, 255, .6);
}

/* ---------- 푸터 반응형 ---------- */
@media (max-width: 1500px) {
	.site-footer__links { margin-top: 90px; }
	.site-footer__squiggle { opacity: .25; }
}
@media (max-width: 1024px) {

	.site-footer__deco { display: none; }
	.site-footer__lead { margin-top: 32px; }
	.site-footer__links { margin-top: 48px; }
	.site-footer__links li + li::before,
	.site-footer__info li + li::before { margin: 0 12px; }
	.site-footer__addr { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.site-footer__logo img { width: 180px; height: auto; }
	.site-footer__links ul,
	.site-footer__info,

	.site-footer__addr > div { align-items: flex-start; }
	.site-footer__addr dd::before { margin: 0 10px; position: relative; }
}

/* ============================================================
   버튼 공통 효과 (savee.com 스타일)
   ------------------------------------------------------------
   · 라벨이 위로 굴러 올라가고 같은 글자가 아래에서 따라 올라온다
   · 배경은 아래에서 위로 차오른다
   JS 가 버튼 라벨을 .btn-roll 로 감싸 준다. 감싸지 않아도(=JS 미실행)
   글자는 그대로 보이고 효과만 빠진다.
   ============================================================ */
.btn-roll {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	line-height: inherit;
}
.btn-roll > span {
	display: block;
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.btn-roll::after {
	content: attr(data-roll);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	/* 키를 상자와 같게 맞춘다 — translateY 의 % 는 「제 키」 기준이라,
	   글자가 두 줄로 감기면 한 줄만큼(105%)밖에 안 내려가 둘째 줄에 겹쳐 보였다. */
	height: 100%;
	transform: translateY(105%);
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.btn-roll-host:hover .btn-roll > span,
.btn-roll-host:focus-visible .btn-roll > span { transform: translateY(-105%); }
.btn-roll-host:hover .btn-roll::after,
.btn-roll-host:focus-visible .btn-roll::after { transform: translateY(0); }

/* 배경이 아래에서 차오르는 버튼 (수정요청 / 프로젝트관리) */
.btn-pill {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color .35s ease, transform .25s ease;
}
.btn-pill::before {
	content: "";
	position: absolute;
	inset: 0;
	/* 부모와 같은 라운드를 줘야 한다. 각진 사각형을 overflow 로 자르면
	   둥근 모서리에 파란 배경이 1px 씩 비쳐 테두리처럼 남는다. */
	border-radius: inherit;
	z-index: -1;
	background: var(--c-white);
	transform: translateY(101%);
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.btn-pill:hover { color: var(--c-blue); transform: none; filter: none; }
.btn-pill:hover::before { transform: translateY(0); }

/* 그라디언트 CTA — 차오르는 대신 그라디언트가 흐르고 살짝 떠오른다 */
.btn-gradient {
	position: relative;
	overflow: hidden;
	background-size: 200% 100%;
	background-position: 0% 0%;
	transition: transform .3s cubic-bezier(.2, .8, .25, 1),
	            box-shadow .3s ease,
	            background-position .6s cubic-bezier(.65, 0, .35, 1);
}
.btn-gradient:hover { background-position: 100% 0%; }
.btn-gradient img { transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.btn-gradient:hover img { transform: rotate(-12deg) scale(1.12); }

/* 로그인 원형 버튼 */
.btn-login { overflow: hidden; }
.btn-login img { transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.btn-login:hover img { transform: scale(1.15); }

/* ============================================================
   서브페이지 공통 — 어두운 테마 / 헤더 변형 / 스크롤 진행바
   ============================================================ */
body.is-dark {
	background: #141415;
	color: var(--c-white);
}

/* 로고는 인라인 SVG 한 벌. 글자는 currentColor, 마크는 --logo-key 를 쓰므로
   헤더가 어두워지면 색만 바뀐다(두 벌을 겹쳐 두던 방식을 대체). */
.site-header__logo {
	display: block;
	width: 198px;
	height: 37px;
	color: #040000;
	--logo-key: var(--c-blue);
}
.site-logo-svg { display: block; width: 198px; height: 37px; }
.site-logo-svg .lg-ink { fill: currentColor; transition: fill .3s ease; }
.site-logo-svg .lg-key { fill: var(--logo-key); transition: fill .3s ease; }

.site-header--dark {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.site-header--dark .site-header__logo { color: var(--c-white); --logo-key: var(--c-white); }
.site-header--dark .gnb__list > li > a { color: var(--c-white); }
.site-header--dark .gnb__list > li > a::after { background: var(--c-white); }
.site-header--dark.is-scrolled {
	background: rgba(20, 20, 21, .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.gnb__list > li > a.is-current::after { width: 100%; }

/* 상단 스크롤 진행바 — JS 가 만들어 붙인다 */
.scroll-progress {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	width: 100%;
	height: 3px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, #6136d9, #ed35a4, #40ddff);
	pointer-events: none;
}

/* 글자 단위 등장 — JS 가 .js-split 안의 글자를 span 으로 감싼다 */
.has-reveal .js-split .ch {
	display: inline-block;
	opacity: 0;
	transform: translateY(.55em);
}
.has-reveal .js-split.is-in .ch {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease var(--d, 0ms),
	            transform .6s cubic-bezier(.2, .8, .25, 1) var(--d, 0ms);
}
.has-reveal .js-hero-up { opacity: 0; transform: translateY(18px); }
.has-reveal .js-hero-up.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .25, 1);
}

/* ============================================================
   Work — 포트폴리오 목록 (Figma 435:882)
   ============================================================ */
.work { position: relative; overflow: hidden;}
.work-hero {
	position: relative;
	padding-top: 189px;

}
/* 상단 3개 원형 글로우가 아주 느리게 숨쉰다 */
.work-hero__glow {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 760px;
	pointer-events: none;
	background:
		radial-gradient(440px 440px at -4.2% 273px, rgba(64, 112, 200, .20), transparent 68%),
		radial-gradient(440px 440px at 50% 273px, rgba(150, 165, 210, .12), transparent 68%),
		radial-gradient(440px 440px at 104.2% 273px, rgba(64, 112, 200, .20), transparent 68%);
	animation: workGlow 22s ease-in-out infinite alternate;
}
@keyframes workGlow {
	from { transform: scale(1) translateY(0); opacity: .85; }
	to   { transform: scale(1.12) translateY(-18px); opacity: 1; }
}

.work-hero__watermark {
	position: absolute;
	left: 17.76%;
	top: -74px;
	font-size: clamp(140px, 29.167vw, 420px);
	font-weight: 800;
	line-height: 1.6;
	color: #181b21;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	animation: workDrift 26s ease-in-out infinite alternate;
}
@keyframes workDrift {
	from { transform: translateX(-24px); }
	to   { transform: translateX(24px); }
}

.work-hero__copy,
.work-filter__inner,
.work-grid {
	position: relative;
	max-width: 1479px;
	margin: 0 auto;
}

.work-hero__eyebrow {
	margin: 0;
	font-family: var(--font-num);
	font-size: clamp(26px, 3.355vw, 48.3px);
	font-weight: 800;
	line-height: 1.6;
	color: var(--c-white);
}
.work-hero__title {
	margin: -17px 0 0;
	font-family: var(--font-num);
	font-size: clamp(30px, 5.75vw, 82.8px);
	font-weight: 100;
	line-height: 1.5;
	color: var(--c-white);
	white-space: nowrap;
}

/* ---------- 분류 필터 ---------- */
.work-filter { margin-top: 64px; }
.work-filter__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
/* 활성 표시가 탭 사이를 미끄러진다 */
.work-filter__marker {
	position: absolute;
	left: 0;
	top: 0;
	height: 51px;
	border: 1px solid transparent;
	border-radius: 300px;
	/* 알약 보더 — 파랑 → 보라/마젠타 그라데이션 (border-radius 유지) */
	background:
		linear-gradient(#141415, #141415) padding-box,
		linear-gradient(90deg, #2e5bff 0%, #8b4dff 52%, #c84bff 100%) border-box;
	box-shadow: 0 0 24px rgba(80, 70, 255, .28);
	pointer-events: none;
	opacity: 0;
	transition: transform .45s cubic-bezier(.2, .8, .25, 1),
	            width .45s cubic-bezier(.2, .8, .25, 1),
	            opacity .3s ease;
}
.work-tab { 
	position: relative; 
	z-index: 1;
	display: inline-flex;
	align-items: center;   /* overflow:hidden 인 롤 래퍼는 baseline 이 아래끝이라 위로 붙는다 */
	gap: 8px;
	height: 51px;
	padding: 0 20px 0 26px;   /* 시안 폭 114 에 맞춘 좌우 여백 */
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 300px;
	background: none;
	color: var(--c-white);
	white-space: nowrap;
	transition: border-color .25s ease, transform .25s ease;
}
.work-tab:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .6); }
.work-tab.is-active { border-color: transparent; }
.work-tab__label { font-size: clamp(14.4px, 1.597vw, 23px); font-weight: 700; line-height: 1.2; }
.work-tab__count {
	font-family: var(--font-num);
	font-size: clamp(10.1px, 1.118vw, 16.1px);
	font-weight: 500;
	opacity: .6;
}

/* ---------- 카드 그리드 ---------- */
.work-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 13px;
	margin-top: 33px;
}
.work-card { perspective: 1000px; }
.work-card.is-out {
	opacity: 0;
	transform: scale(.94);
	filter: blur(6px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}

.work-card__link {
	position: relative;
	display: block;
	height: 520px;
	border: 1px solid var(--c-tab-border);
	border-radius: 8px;
	overflow: hidden;
	backdrop-filter: blur(80px);
	-webkit-backdrop-filter: blur(80px);
	background: radial-gradient(ellipse at 15% 21%,
		rgba(165, 239, 255, .2) 0%,
		rgba(110, 191, 244, .045) 77%,
		rgba(70, 144, 212, 0) 100%);
	color: var(--c-white);
	transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .35s cubic-bezier(.2, .8, .25, 1), box-shadow .35s ease;
}
.work-card__link::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image:url(../img/work/Rectangle.jpg); background-size: cover; background-position: center; z-index:3; opacity: 0;	background-repeat: no-repeat; transition: opacity .35s ease;}
.work-card__link:hover::before {opacity:1;}
.work-card__link:hover {
	box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(234, 191, 255, .35);
}

.work-card__cat {
	position: absolute;
	left: 36px;
	top: 33px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	height: 29px;
	padding: 0 17px;
	border-radius: 300px;
	background: #000;
	/* 한 단계 줄였다 — 16.1 → 15.1 (가운데 vw 값도 같은 비율로) */
	font-size: clamp(9.5px, 1.049vw, 15.1px);
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}

.work-card__ghost {
	position: absolute;
	border-radius: 16px;
	background: #d9d9d9;
}
.work-card__ghost--far  { left: 36px; top: 63px; width: 290px; height: 290px; opacity: .5; }
.work-card__ghost--near { left: 30px; top: 43px; width: 300px; height: 300px; opacity: .7; }
.work-card__thumb {
	position: absolute;
	left: 26px;
	top: 23px;
	width: 309px;
	height: 309px;
	border-radius: 16px;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .8, .25, 1), filter .4s ease;
}
.work-card__link:hover .work-card__thumb { transform: scale(1.07); filter: blur(3px) brightness(.75); }

.work-card__body {
	position: absolute;
	left: 34px;
	right: 30px;
	top: 385px;
	transition: opacity .3s ease, transform .35s ease;
}
.work-card__link:hover .work-card__body { opacity: 0; transform: translateY(8px); }
.work-card__name {
	display: block;
	font-size: clamp(16px, 1.7vw, 24.5px);
	font-weight: 600;
	line-height: 1.6;
}
.work-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 4px;
	margin-top: 7px;
}
.work-card__tags em {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 300px;
	font-size: clamp(10px, 0.958vw, 13.8px);
	font-style: normal;
	font-weight: 800;
	line-height: 1.6;
	white-space: nowrap;
}

/* hover 층 */
.work-card__over {
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 0;
	visibility: hidden;
	background: rgba(12, 12, 16, .1);
	transition: opacity .35s ease, visibility .35s;
}
.work-card__link:hover .work-card__over { opacity: 1; visibility: visible; }
.work-card__zoom {
	position: absolute;
	left: 50%;
	top: 34.9%;
	width: 74px;
	height: 74px;
	transform: translateX(-50%) scale(.5) rotate(-40deg);
	transition: transform .45s cubic-bezier(.2, 1.3, .4, 1) .05s;
	border-radius:100%;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
.work-card__link:hover .work-card__zoom { transform: translateX(-50%) scale(1) rotate(0); }
.work-card__over-name {
	position: absolute;
	left: 50%;
	top:34.9%;
	margin-top:85px;
	transform: translateX(-50%) translateY(0);
	font-size: clamp(17.3px, 1.917vw, 27.6px);
	font-weight:700;
	line-height: 1.6;
	white-space: nowrap;
	opacity: 0;
	transition: transform .4s cubic-bezier(.2, .8, .25, 1) .1s, opacity .4s ease .1s;
}
.work-card__link:hover .work-card__over-name { transform: translateX(-50%); opacity: 1; }

/* ---------- 더보기 ---------- */
.work-empty {
	margin: 80px 0;
	text-align: center;
	font-size: clamp(13px, 1.438vw, 20.7px);
	font-weight: 600;
	color: rgba(255, 255, 255, .55);
}
.work-more {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	padding-bottom: 164px;
}
.work-more__btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	height: 40px;
	padding: 0 32px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 300px;
	background: rgba(0, 0, 0, .3);
	color: var(--c-white);
	font-family: var(--font-num);
	font-size: clamp(10.1px, 1.118vw, 16.1px);
	font-weight: 600;
	letter-spacing: .02em;
	transition: color .35s ease, border-color .25s ease, transform .25s ease;
}
.work-more__btn::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background: var(--c-white);
	transform: translateY(101%);
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.work-more__btn:hover { color: #fff;}
/* .work-more__btn:hover { color: #141415; border-color: var(--c-white); transform: translateY(-2px); }
.work-more__btn:hover::before { transform: translateY(0); }
.work-more__btn[disabled] { opacity: .4; pointer-events: none; } */

/* ---------- Work 반응형 ---------- */
@media (max-width: 1560px) {
	.work-hero__copy,
	.work-filter__inner,
	.work-grid { padding: 0 var(--gutter); }
	.work-hero__title { white-space: normal; }
}
@media (max-width: 1280px) {
	.work-hero { padding-top: 150px; }
	.work-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.work-grid { grid-template-columns: repeat(2, 1fr); }
	.work-hero__title { margin-top: 0; }
}
@media (max-width: 600px) {
	.work-hero { padding-top: 130px; }
	.work-grid { grid-template-columns: 1fr; }
	.work-filter { margin-top: 40px; }
	.work-tab { height: 44px; padding: 0 16px; }

	.work-more { padding-bottom: 90px; }
}

/* ============================================================
   Work 상세 (Figma 444:1305) — 어두운 히어로 + 흰 본문
   컨테이너는 1480px (시안 x220~1700)
   ============================================================ */
.wv-container { max-width: 1480px; margin: 0 auto; }
.wv-ico { width: 32px; height: 32px; flex: none; }

.wv-h2 {
	margin: 0;
	font-family: var(--font-num);
	font-size: clamp(17.3px, 1.917vw, 27.6px);
	font-weight: 800;
	line-height: 1.6;
	color: #111;
}
.wv-sec__lead {
	margin: 5px 0 0;
	font-size: clamp(13px, 1.438vw, 20.7px);
	font-weight: 500;
	line-height: 1.6;
	color: #444;
}

/* ---------- 히어로 ---------- */
.wv-hero {
	position: relative;
	height: 707px;
	color: var(--c-white);
	overflow: hidden;
	background: url(../img/work/view_top_bg.jpg) no-repeat center bottom #141416;
}
.wv-hero__glow { position: absolute; inset: 0; pointer-events: none; }
/* 큰 원 두 개의 위쪽 호만 빛난다 (시안 438:1314 / 1315) */
.wv-hero__glow::before, 
.wv-hero__glow::after {
	content: "";
	position: absolute;
	top: 13px;
	width: 858px;
	height: 858px;
	border-radius: 50%;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 60%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 60%);
}
.wv-hero__glow::before {
	left: 5.21%;    /* 100 / 1920 */
	border: 2px solid rgba(255, 255, 255, .16);
	box-shadow: 0 0 60px rgba(255, 255, 255, .07);
}
.wv-hero__glow::after {
	left: 50.10%;   /* 962 / 1920 */
	border: 2px solid #2f7bff;
	box-shadow: 0 0 70px rgba(47, 123, 255, .55), inset 0 0 60px rgba(47, 123, 255, .18);
	animation: wvArc 9s ease-in-out infinite alternate;
}
@keyframes wvArc {
	from { opacity: .75; }
	to   { opacity: 1; }
}

.wv-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1480px;
	margin: 0 auto;
	padding-top: 150px;
	display: flex;
	justify-content: space-between;
}
.wv-hero__copy { max-width:823px; }
.wv-hero__cat {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 22px;
	background-image: linear-gradient(90deg, #89B2FF, #FF66C2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #89B2FF;
	border-radius: 300px;
	font-size: clamp(12px, 1.278vw, 18.4px);
	font-weight: 800;
	line-height: 1.6;
	position: relative;
}
.wv-hero__cat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, #0C60FB, #9E0EA1);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}
.wv-hero__title {
	margin: 21px 0 0;
	font-size: clamp(24px, 3.833vw, 55.2px);
	font-weight: 800;
	line-height: 1.6;
}
.wv-hero__lead {
	max-width: 670px;
	margin: 32px 0 0;
	font-size: clamp(15px, 1.438vw, 20.7px);
	font-weight: 500;
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
}

.wv-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	overflow: hidden;
	margin: 24px 0 0 0;
	gap:1em clamp(30px, 6vw, 70px);

}
.wv-hero__meta > div {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 18px;
	position: relative;

}
.wv-hero__meta > div > .wv-ico {
	grid-row: span 2;
	width: clamp(24px, 3vw, 32px);
	min-width:clamp(24px, 3vw, 32px);
	aspect-ratio: 1/1;
	display: block;
}

.wv-hero__meta > div::after {
	display: block;
	content: "";
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, .25);
	position: absolute;
	margin-right: clamp(15px, 3vw, 35px);
	right:100%;
	top: 0px;

}


.wv-hero__meta dt {
	font-family: var(--font-num);
	font-size: clamp(10.8px, 1.198vw, 17.3px);
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .65);
}
.wv-hero__meta dd {
	margin: 3px 0 0;
	font-size: clamp(11.5px, 1.278vw, 18.4px);
	font-weight: 700;
	line-height: 1.6;
}

.wv-hero__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: auto;
	min-height: 0;
	margin-top: 49px;
	padding: 0.7em clamp(16px, 2vw, 24px);
	border: 0;
	border-radius: 8px;
	background: linear-gradient(90deg, #6136d9 0%, #ed35a4 100%);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, .1),
		0 0 0 4px rgba(152, 49, 211, .06);
	color: #fff;
	font-size: clamp(12px, 1.118vw, 16.1px);
	font-weight: 800;
	line-height: 28px;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.wv-hero__link:hover {
	transform: translateY(-2px);
	border-color: transparent;
	background: linear-gradient(90deg, #6136d9 0%, #ed35a4 100%);
	filter: brightness(1.06);
	box-shadow:
		0 8px 28px rgba(0, 0, 0, .18),
		0 0 0 4px rgba(152, 49, 211, .1);
}
.wv-hero__link-ico {
	display: block;
	width: 31px;
	height: 31px;
	flex: none;
}
.wv-hero__link .wv-ico { display: none; }

.wv-hero__shot {
	margin-top: 2em;
	top: 175px;
	width: 40%;
	max-width: 511px;
	aspect-ratio: 511/481;
	border-radius: 16px;
	overflow: hidden;
	align-self: flex-end;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.wv-hero__shot img { width: auto !important; height:auto !important;}

/* ---------- 섹션 공통 ---------- */
.wv-sec { background: var(--c-white); }
.wv-sec--overview { padding-top: clamp(60px, 6.111vw, 88px); }
.wv-sec--goals    { padding-top: clamp(36px, 3.472vw, 50px); }
.wv-sec--features { padding-top: clamp(50px, 5.069vw, 73px); }
.wv-sec--tech     { padding-top: clamp(50px, 5.208vw, 75px); }
/* 배경 그림을 뺐다 — 이 구역이 본문 맨 끝이라 어두운 바탕이 바로 아래 푸터와
   맞물리면서, 푸터의 둥근 귀퉁이 자리에 흰 조각이 도드라져 보였다(사용자 지적).
   바탕이 흰색이 되었으므로 제목 색도 흰색에서 되돌린다. */
.wv-sec--related  { padding: clamp(30px, 8vw, 80px) 0px; margin-top: clamp(30px, 8vw, 80px); }
/* 관련 프로젝트 카드는 목록(.work-grid)과 같은 카드를 쓴다.
   컨테이너가 이미 1480·거터를 맡으므로 그리드 쪽 폭·패딩은 겹치지 않게 푼다. */
.wv-sec--related .work-grid {
	max-width: none;
	margin-top: 33px;
	padding-left: 0;
	padding-right: 0;
}
.wv-sec--cta      { padding: clamp(30px, 8vw, 80px) 0px; }

/* ---------- OVERVIEW 카드 ---------- */
.wv-ov {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 35px 0 0;
}
.wv-ov__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	min-height: 90px;
	padding: 24px 26px 20px;
	border-radius: 12px;
	background: linear-gradient(94deg, rgba(220, 222, 253, 0.2) -1.59%, rgba(158, 111, 208, 0.3) 98.65%);
	color: #241a3a;
}
.wv-ov__item--wide { grid-column: span 2; }
.wv-ov__item .wv-ico { margin-top: 2px;}
.wv-ov__label {
	display: block;
	font-family: var(--font-num);
	font-size: clamp(12px, 1.265vw, 18.4px);
	font-weight:800;
	letter-spacing: .04em;
	color: #000;
}
.wv-ov__value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	margin-top: 4px;
	font-size: clamp(10.1px, 1.118vw, 16.1px);
	font-weight:300;
	line-height: 1.6;
}
.wv-ov__value i {
	width: 1px;
	height: 12px;
	background: rgba(36, 26, 58, .3);
}

/* ---------- GOALS & SOLUTIONS ---------- */
.wv-goals {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 13px;
	padding: clamp(10px, 4vw, 40px);
	padding-left: clamp(10px, 7vw, 70px);
	border-radius: 20px;
	background:url(../img/work/goals_bg.jpg) no-repeat center center/cover;
	color: var(--c-white);
	overflow: hidden;
	gap: clamp(20px, 6vw, 60px);
}
/* 오른쪽에 걸리는 무지개빛 유막 (시안 453:4364) */
.wv-goals::after {
	content: "";
	position: absolute;
	right: -8%;
	top: -60%;
	width: 68%;
	height: 260%;
	border-radius: 50%;
	background:
		conic-gradient(from 200deg at 40% 50%,
			rgba(255, 90, 210, .55), rgba(120, 90, 255, .35),
			rgba(60, 220, 220, .40), rgba(255, 220, 120, .35),
			rgba(255, 90, 210, .55));
	filter: blur(46px);
	opacity: .85;
	pointer-events: none;
	animation: wvOil 24s linear infinite;
	display: none;
}
@keyframes wvOil {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.wv-goals__col {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
}

.wv-goals__h {
	margin: 0;
	font-family: var(--font-num);
	font-size: clamp(17.3px, 1.917vw, 27.6px);
	font-weight: 800;
	line-height: 1.6;
}
.wv-goals__list { margin: 10px 0 0; }
.wv-goals__list li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight:700;
	background: linear-gradient(90deg, #5A5DF5 0%, #8FC1FA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
	font-size: clamp(13px, 1.438vw, 20.7px);
	line-height: 1.6;
}
.wv-goals__list .wv-ico {aspect-ratio: 1/1; align-self: flex-start; width: clamp(20px, 2vw, 25px); height: auto;}

.wv-goals__insight {
	position: relative;
	z-index: 1;
	flex:1.5;
	min-width: 0;
	padding:clamp(10px, 4vw, 20px);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 16px;
	position: relative;
	min-height:clamp(200px, 4vw, 280px); ;
	overflow: hidden;
}

.wv-goals__insight::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	background: radial-gradient(99.72% 138.92% at 0.34% 3.21%, rgba(0, 0, 0, 0.20) 0%, rgba(102, 102, 102, 0.20) 100%);
	backdrop-filter: blur(20px);
	z-index: -1
}
.wv-goals__insight p {
	margin: 19px 0 0;
	font-size: clamp(17.3px, 2.415vw, 29.9px);
	font-weight: 700;
	max-width: 485px;
	line-height: 1.5;
	background: linear-gradient(90deg, #FED9FF 0%, #ED35A4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wv-goals__quote {
	display: block;
	width: clamp(40px, 5vw, 58px);
	height: auto;
	aspect-ratio: 1;
	margin: 12px auto 0;
}

/* ---------- KEY FEATURES ---------- */
.wv-feat {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: clamp(10px, 2vw, 20px);
	margin: clamp(10px, 2vw, 38px) 0 0;
}
.wv-feat__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	aspect-ratio: 1;
	padding: 8px;
	border: 1px solid transparent;
	border-radius: 16px;
	background:
		linear-gradient(var(--c-white), var(--c-white)) padding-box,
		linear-gradient(135deg, #4A43EE 0%, #ED35A4 100%) border-box;
	box-shadow: 0 4px 10px rgba(74, 67, 238, .08);
	text-align: center;
	transition: transform .3s cubic-bezier(.2, .8, .25, 1), box-shadow .3s ease;
}
.wv-feat__item:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(60, 40, 130, .12);
}
.wv-feat__item .wv-ico { color: #4A43EE; transition: transform .3s cubic-bezier(.2, 1.3, .4, 1); }
.wv-feat__item:hover .wv-ico { transform: scale(1.14) rotate(-6deg); }
.wv-feat__item span {
	font-size: clamp(12px, 1.15vw, 16.1px);
	font-weight: 600;
	line-height: 1.4;
	color: #4A43EE;
	word-break: keep-all;
}

/* ---------- MAIN SCREENS ---------- */
.wv-sec--screens {
	margin-top: clamp(30px, 8vw, 92px);
	padding: clamp(30px, 8vw, 100px) 0;
	background:url(../img/work/main_screens_bg.jpg) no-repeat center center/cover;
}
.wv-screens {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 18px 0 0;
}
.wv-screens li {
	display: flex;
	align-items: center;
	justify-content: center;
}
.wv-screens figure {display: block; overflow: hidden; border-radius:16px; padding:13px; background:#dde8f7; border:10px solid #fff;}
.wv-screens figcaption {font-size: clamp(12px, 1.38vw, 20.7px);}
.wv-screens img {
	aspect-ratio: 420/250;
	width: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .8, .25, 1);
}
.wv-screens li:hover img { transform: scale(1.1); }

/* ---------- TECH STACK ---------- */
.wv-tech { margin-top: 17px; }
.wv-tech + .wv-tech { margin-top: 29px; }
.wv-tech__label {
	margin: 0;
	font-size: clamp(11px, 1.15vw, 16.1px);
	font-weight: 700;
	line-height: 1.6;
}
.wv-tech__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 80px;
	margin-top: 9px;
	padding: clamp(10px, 2vw, 12px) clamp(10px, 2vw, 28px);
	border-radius: 16px;
	background: #f8f9ff;
}
.wv-tech__row li {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 145px;
	padding: 5px 0;
}
.wv-tech__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: clamp(34px, 4vw, 45px);
	height: auto;
	aspect-ratio: 1;
	border-radius:4px;
	border:1px solid #AF62ED;

	transition: transform .3s cubic-bezier(.2, 1.3, .4, 1);
}

.wv-tech__chip img { width: clamp(20px, 2.5vw, 30px); height: auto; aspect-ratio: 1; object-fit: contain; }
.wv-tech__name {
	font-size: clamp(10px, 0.958vw, 13.8px);
	font-weight: 600;
	line-height: 1.4;
	color: #4A43EE;
	word-break: keep-all;
}

/* ---------- Related Projects ---------- */
.wv-rel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	margin: 30px 0 0;
}
.wv-rel a { display: block; }
.wv-rel__thumb {
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: #eef1f6;
}
.wv-rel__thumb img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .8, .25, 1);
}
.wv-rel a:hover .wv-rel__thumb img { transform: scale(1.06); }
.wv-rel__cat {
	display: inline-flex;
	align-items: center;
	height: 26px;
	margin-top: 16px;
	padding: 0 14px;
	border-radius: 300px;
	background: #f1ecfa;
	color: #6b4fb0;
	font-size: clamp(10px, 0.958vw, 13.8px);
	font-weight: 700;
}
.wv-rel__name {
	display: block;
	margin-top: 8px;
	font-size: clamp(14.4px, 1.597vw, 23px);
	font-weight: 800;
	line-height: 1.6;
	color: #111;
}
 
/* ---------- CTA — Figma 903:7608 (1480×202) ---------- */
.wv-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 202px;
	height: auto;
	padding: clamp(28px, 2.29vw, 44px) clamp(28px, 3.91vw, 75px);
	border-radius: 20px;
	background: linear-gradient(94deg, #f7e9f1 0%, #d7e6f9 52%, #d7e6f9 100%);
	color: #0a090b;
	overflow: hidden;
}
.wv-cta__copy {
	position: relative;
	z-index: 1;
	min-width: 0;
}
.wv-cta__title {
	margin: 0;
	font-size: clamp(22px, 1.67vw, 32px);
	line-height: 1.3;
	font-weight: 400;
	color: #6136d9;
}
.wv-cta__title strong {
	font-weight: 700;
}
.wv-cta__desc {
	margin: clamp(12px, 1.2vw, 22px) 0 0;
	font-size: clamp(13px, .83vw, 16px);
	font-weight: 500;
	line-height: 1.6;
	color: #000;
}
.wv-cta__btns {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: flex-start;
	gap: 10px;
}
.wv-cta__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex: none;
	width: 75px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	text-align: center;
	transition: transform .3s cubic-bezier(.2, .8, .25, 1);
}
.wv-cta__btn:hover {
	transform: translateY(-4px);
}
/* 글래스 아이콘 박스 — Figma 75×71 · radius 20 · white border */
.wv-cta__glass {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	height: 71px;
	border: 1.5px solid #fff;
	border-radius: 20px;
	background:
		linear-gradient(134deg, rgba(255, 255, 255, .7) 12.88%, rgba(255, 255, 255, 0) 164%),
		rgba(255, 255, 255, .28);
	backdrop-filter: blur(2.5px);
	-webkit-backdrop-filter: blur(2.5px);
	box-shadow: 0 4px 16px rgba(97, 54, 217, .08);
	transition: background .25s ease, box-shadow .25s ease;
}
.wv-cta__btn:hover .wv-cta__glass {
	background:
		linear-gradient(134deg, rgba(255, 255, 255, .88) 12.88%, rgba(255, 255, 255, .2) 164%),
		rgba(255, 255, 255, .45);
	box-shadow: 0 10px 22px rgba(60, 40, 130, .14);
}
.wv-cta__ico {
	display: block;
	width: 32px;
	height: 32px;
}
.wv-cta__btn .wv-cta__ico[width="36"] {
	width: 36px;
	height: 36px;
}
.wv-cta__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #000;
	white-space: nowrap;
}
.wv-cta__btn .wv-ico { width: 32px; height: 32px; color: #0a090b; }

/* ---------- Work 상세 반응형 ---------- */
@media (max-width: 1560px) {
	.wv-container, .wv-hero__inner { padding-left: var(--gutter); padding-right: var(--gutter); }

	.wv-feat { grid-template-columns: repeat(7, 1fr); }
}
@media (max-width: 1280px) {
	.wv-hero { height: auto; background-size:cover ;  }
	.wv-hero__inner { padding-top: clamp(120px, 14vw, 140px); flex-direction: column;}
	.wv-hero__shot {width:60%; align-self: center; margin-top: 2em;}
	.wv-hero__copy {max-width: 100%;}
	.wv-ov { grid-template-columns: repeat(2, 1fr); }
	.wv-ov__item--wide { grid-column: span 2; }
	.wv-goals {
		height: auto;
		flex-wrap: wrap;
		padding: clamp(10px, 4vw, 40px);
		row-gap: 40px;
	}
	.wv-goals__col { flex: 1 1 40%; }
	.wv-goals__insight { flex: 1 1 100%; }
	.wv-tech__row li { width: 50%; max-width: 180px; }
	.wv-rel { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 900px) {
	.wv-feat { grid-template-columns: repeat(5, 1fr); }
	.wv-screens { grid-template-columns: 1fr; }
	.wv-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 36px 28px;
	}
	.wv-cta__copy { text-align: center; width: 100%; }
	.wv-cta__btns { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
	.wv-feat { grid-template-columns: repeat(3, 1fr); }
	.wv-ov, .wv-rel { grid-template-columns: 1fr; }
	.wv-ov__item--wide { grid-column: span 1; }
	.wv-goals { flex-direction: column; }
	.wv-goals__col,
	.wv-goals__insight { flex: none; width: 100%; }

	.wv-tech__row li { width: 100%; }
	.wv-cta__btns { justify-content: center; gap: 16px; }
	.wv-cta__btn { width: 75px; }
}

/* ============================================================
   준비중 안내 페이지 (include/ready.php)
   ============================================================ */
.ready {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 78vh;
	padding: 220px var(--gutter) 160px;
	overflow: hidden;
	text-align: center;
}
/* 뒤에서 아주 느리게 도는 색 덩어리 */
.ready__glow {
	position: absolute;
	left: 50%;
	top: 46%;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(237, 53, 164, .16), transparent 70%) 22% 30% / 60% 60% no-repeat,
		radial-gradient(closest-side, rgba(97, 54, 217, .16), transparent 70%) 78% 34% / 62% 62% no-repeat,
		radial-gradient(closest-side, rgba(64, 221, 255, .14), transparent 70%) 50% 78% / 58% 58% no-repeat;
	filter: blur(12px);
	animation: readyGlow 26s ease-in-out infinite alternate;
}
@keyframes readyGlow {
	from { transform: translate(-50%, -50%) rotate(0deg)   scale(1); }
	to   { transform: translate(-50%, -50%) rotate(180deg) scale(1.15); }
}

.ready__inner { position: relative; z-index: 1; }
.ready__eyebrow {
	margin: 0;
	font-family: var(--font-num);
	font-size: clamp(10.1px, 1.118vw, 16.1px);
	font-weight: 700;
	letter-spacing: .28em;
	color: #6136d9;
}
.ready__title {
	margin: 14px 0 0;
	font-size: clamp(38px, 6.389vw, 92px);
	font-weight: 800;
	line-height: 1.4;
	color: #111;
}
.ready__desc {
	margin: 22px 0 0;
	font-size: clamp(15px, 1.438vw, 20.7px);
	font-weight: 500;
	line-height: 1.7;
	color: #555;
}
.ready__desc strong { font-weight: 800; color: #111; }

.ready__btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 40px;
}
.ready__link {
	display: inline-flex;
	align-items: center;
	height: 63px;
	padding: 0 28px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 8px;
	color: #111;
	font-size: clamp(13px, 1.438vw, 20.7px);
	font-weight: 700;
	transition: border-color .25s ease, transform .25s ease, background .3s ease;
}
.ready__link:hover {
	transform: translateY(-2px);
	border-color: #111;
	background: rgba(0, 0, 0, .04);
}

@media (max-width: 600px) {
	.ready { padding: 170px 24px 110px; min-height: 70vh; }
	.ready__btns .btn-gradient,
	.ready__link { width: 100%; justify-content: center; }
}

/* ============================================================
   Resources — FAQ · Web Guide · Notice (Figma 328:277 / 389:300 / 393:877 / 393:621)
   컨테이너 1280px (시안 x320~1600)
   ============================================================ */
.rs { position: relative; }
.rs-container,
.rs-tabs__inner,
.rs-faq,
.rs-count,
.guide-lead,
.guide-grid,
.notice-list,
.rs-page,
.rs-view > * {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- 공통 상단 ---------- */
.rs-hero {
	position: relative;
	padding: clamp(50px, 6vw, 80px) 0 0;
    padding-bottom: clamp(15px, 4vw, 25px);
	text-align: center;
}
.rs-hero__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 0 0 120px 120px;
	pointer-events: none;
	z-index: -1;
}
.rs-hero--faq .rs-hero__bg {
	opacity: .6;
	/* Figma 383:1118 — radialGradient stops + transform matrix 근사 */
	background: radial-gradient(250% 180% at -59.5% -10%, #d798e1 17.55%, #9b9fff 27.56%, #aed3ff 49.89%, #c9d4ef 56.53%, #cacffa 65.69%);
}
.rs-hero--guide .rs-hero__bg {
	opacity: .45;
	background:
		linear-gradient(184deg, #fff 2%, rgba(255,255,255,0) 61%),
		linear-gradient(13deg,  #d66275 2%, rgba(214,98,117,0) 47%),
		linear-gradient(150deg, #d66275 4%, rgba(214,98,117,0) 52%),
		linear-gradient(-12deg, #bd97e1 16%, rgba(189,151,225,0) 80%),
		#fff;
}
.rs-hero--notice .rs-hero__bg {
	opacity: .6;
    background:radial-gradient(250% 300% at -59.5% -10%, #aed3ff -34.45%, #d798e1 -13.44%, #aed3ff 48.89%, #9b9fff 54.53%, #cacffa 62.69%);
}
 
.rs-nav {
	/* About 안내 탭(.ab-tabs)과 같이 대메뉴 바로 아래 화면에 고정한다. */
	position: fixed;
	left: 50%;
	top: calc(var(--header-h, 100px) + 5px);
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	height: clamp(44px, 6vw, 60px);
	padding: 0 50px;
	max-width: calc(100vw - 32px);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 300px;
	background: rgba(0, 0, 0, .8);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	font-size: clamp(13px, 1.278vw, 16px);
	font-weight: 600;
	line-height: 1.6;
	transform: translateX(-50%);
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(195, 191, 255, .65) rgba(255, 255, 255, .1);
}
/* About — 안쪽 래퍼는 스크롤하지 않고, .rs-nav 한곳에서만 가로 스크롤 */
.rs-nav > .ab-tabs__inner {
	display: flex;
	align-items: center;
	gap: inherit;
	width: max-content;
	max-width: none;
	height: 100%;
	min-width: 0;
	overflow: visible;
	white-space: nowrap;
}
/* 탭이 흐름에서 빠져도 제목·검색창 자리가 올라오지 않게 높이만큼 남겨 둔다 */
.rs-hero::before {
	content: "";
	display: block;
	height: clamp(44px, 6vw, 60px);
}
.rs-nav a { color: var(--c-white); transition: color .25s ease; }
.rs-nav a:hover { color: #ffd8c8; }
.rs-nav a.is-current { color: #ffd8c8; }

/* 가로 스크롤이 생기면 좌·우 끝을 흐리게 — JS 가 .is-overflow / 가장자리 클래스를 붙인다 */
.rs-nav.is-overflow {
	justify-content: flex-start;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.rs-nav.is-overflow.is-at-start:not(.is-at-end) {
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
	        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.rs-nav.is-overflow.is-at-end:not(.is-at-start) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%);
}
.rs-nav.is-overflow.is-at-start.is-at-end {
	-webkit-mask-image: none;
	        mask-image: none;
}

.rs-hero__title {
	margin: clamp(20px, 8vw, 48px) 0 0;
	font-size: clamp(28px, 2.92vw, 42px); /* 시안 ExtraBold 42 */
	font-weight: 800;
	line-height: 1.6;
	color: #000;
}
.rs-hero__lead {
	margin: 4px 0 0;
	padding: 0 24px;
	font-size: clamp(15px, 1.67vw, 24px); /* 시안 Regular 24 */
	font-weight: 400;
	line-height: 1.4;
	color: #000;
}

.rs-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(500px, calc(100% - 48px));
	height: 50px;
	margin: 33px auto 0;
	padding: 0 7px 0 22px;
	border: 1px solid var(--c-white);
	border-radius: 300px;
	background: rgba(255, 255, 255, .4);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.rs-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px; /* 시안 Medium 14 */
	font-weight: 500;
	color: #000;
}
.rs-search input::placeholder { color: rgba(0, 0, 0, .55); }
.rs-search input:focus { outline: none; }
.rs-search button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #4a43ee;
	color: var(--c-white);
	transition: transform .25s ease, filter .25s ease;
}
.rs-search button:hover { transform: scale(1.08); filter: brightness(1.12); }
.rs-search button svg { width: 20px; height: 20px; }

/* ---------- FAQ 분류 탭 (Figma 383:1107) ---------- */
.rs-tabs { margin-top: clamp(20px, 3vw, 30px); }
.rs-tabs__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	width: max-content;
	max-width: 100%;
	padding: 10px 16px;
	border-radius: 8px;
	background: #e0e4fc; /* Light Violet */
}
.rs-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border-radius: 8px;
	background: var(--c-white);
	color: #4a43ee;
	font-size: 14px; /* 시안 Medium 14 */
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}
.rs-tab__ico {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
}
.rs-tab:hover { transform: translateY(-2px); }
.rs-tab.is-active {
	background: #000;
	color: #ddd5fe;
	font-weight: 600;
}
/* 활성 탭 아이콘 — #4a43ee → #ddd5fe */
.rs-tab.is-active .rs-tab__ico {
	filter: brightness(0) saturate(82%) invert(79%) sepia(11%) saturate(900%) hue-rotate(204deg) brightness(103%);
}

/* ---------- FAQ 아코디언 ---------- */
.rs-faq { margin-top: 32px; }
.faq-row {
	border: 1px solid #ececec;
	border-radius: 8px;
	background: var(--c-white);
	overflow: hidden;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-row + .faq-row { margin-top: 5px; }
.faq-row.is-open {
	border-color: #4a43ee;
	box-shadow: 21px 6px 22px rgba(74, 67, 238, .04), 5px 1px 12px rgba(74, 67, 238, .05);
}
.faq-row__q {
	display: flex;
	align-items: center;
	gap: 17px;
	width: 100%;
	min-height: 90px;
	padding: 18px 30px 18px 24px;
	border: 0;
	background: none;
	text-align: left;
}
.faq-row__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 50px;
	height: 50px;
	border: 1px solid #DDDDDD;
	border-radius: 50%;
	background: #fff;
	color: #000;
	font-size: 24px; /* 시안 Bold 24 */
	font-weight: 700;
	line-height: 1;
	transition: background .3s ease, color .3s ease;
}
.faq-row.is-open .faq-row__mark { background: #6136D9; border-color: #6136D9; color: var(--c-white); }
.faq-row__mark--a { background: #ececec; color: #666; }
.faq-row.is-open .faq-row__mark--a { background: #fff; border-color: #DDDDDD; color: #666; }
.faq-row__text {
	flex: 1;
	font-size: 18px; /* 시안 Medium 18 */
	font-weight: 500;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.faq-row.is-open .faq-row__text { font-weight: 700; color: #6136d9; }
.faq-row__sign {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
}
.faq-row__sign::before,
.faq-row__sign::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 11px;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: #111;
	transition: transform .3s cubic-bezier(.2, .8, .25, 1), background .3s ease;
}
.faq-row__sign::after { transform: rotate(90deg); }
.faq-row.is-open .faq-row__sign::before,
.faq-row.is-open .faq-row__sign::after { background: #6136d9; }
.faq-row.is-open .faq-row__sign::after { transform: rotate(0deg); }

.faq-row__a {
	display: none;
	gap: 17px;
	padding: 0 30px 26px 24px;
}
.faq-row.is-open .faq-row__a { display: flex; }
.faq-row__body {
	flex: 1;
	padding: 20px 28px;
	border-radius: 4px;
	background: rgba(236, 236, 236, .4);
	font-size: 14px; /* 시안 Medium 14 */
	font-weight: 500;
	line-height: 1.6;
	color: #000;
}

/* ---------- 목록 상단 건수 ---------- */
.rs-count {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(30px, 6vw, 60px);
	font-size: clamp(10.1px, 1.118vw, 16.1px);
	font-weight: 600;
	line-height: 1.6;
	color: #000;
}
.rs-count svg { width: 24px; height: 24px; }
.rs-count i { width: 1px; height: 12px; background: #ccc; }
.rs-count b { color: #4a43ee; font-weight: 600; }

/* ---------- Web Guide ---------- */
.guide-lead {
	display: grid;
	grid-template-columns: 492px 1fr;
	gap: 40px;
	margin-top: 31px;
	padding: 0 40px 0 0;
	border-radius: 16px;
	background: rgba(220, 222, 253, .2);
	overflow: hidden;
	transition: background .3s ease, transform .35s cubic-bezier(.2, .8, .25, 1);
}
.guide-lead:hover { background: rgba(220, 222, 253, .45); transform: translateY(-4px); }
.guide-lead__thumb { display: block; height: 320px; overflow: hidden; background: #e9ecfb; }
.guide-lead__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .25, 1); }
.guide-lead:hover .guide-lead__thumb img { transform: scale(1.05); }
.guide-lead__body { align-self: center; padding: 30px 0; }
.guide-lead__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.guide-lead__tags em,
.guide-card__tags em {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border: 1px solid #4a43ee;
	border-radius: 300px;
	color: #4a43ee;
	font-size: clamp(10px, 1.038vw, 15px);
	font-style: normal;
	font-weight: 600;
}
.guide-lead__title {
	display: block;
	margin-top: 20px;
	font-size: clamp(17.3px, 1.917vw, 27.6px);
	font-weight: 600;
	line-height: 1.4;
	color: #000;
	word-break: keep-all;
}
.guide-lead__date,
.guide-card__date {
	display: block;
	margin-top: 14px;
	font-family: var(--font-num);
	font-size: clamp(10px, 0.958vw, 13.8px);
	font-weight: 500;
	line-height: 1.6;
	color: #666;
}

.guide-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 60px 29px;
	margin-top: 81px;
	padding: 0;
}
/* 검색 결과가 한 쪽뿐이면 페이지 번호(.rs-page 의 padding-bottom:120px)가 없어
   마지막 줄 태그가 푸터에 바로 붙는다. 그때만 아래 여백을 준다. */
.guide-grid:last-child,
.notice-list:last-child,
.rs-faq:last-child { margin-bottom: 30px; }
.guide-card__thumb {
	display: block;
	height: 195px;
	border-radius: 4px;
	background: #eef0fb;
	overflow: hidden;
}
.guide-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .25, 1); }
.guide-grid a:hover .guide-card__thumb img { transform: scale(1.06); }
.guide-card__title {
	display: block;
	margin-top: 20px;

	font-weight: 600;
	line-height: 1.4;
	color: #000;
	word-break: keep-all;
	transition: color .25s ease;
}
.guide-grid a:hover .guide-card__title { color: #4a43ee; }
.guide-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.guide-card__tags em { height: 25px; padding: 0 14px; border-color: #ddd; color: #666; font-size: clamp(11px, 0.879vw, 12.6px); }

/* ---------- Notice 목록 ---------- */
.notice-list { margin-top:clamp(20px, 3vw, 30px); border-top: 1px solid #222; }
.notice-list li { border-bottom: 1px solid #eee; }
.notice-list a {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 65px;
	padding: 12px 24px 12px 21px;
	transition: background .25s ease;
}
.notice-list a:hover { background: #f7f8ff; }
.notice-list__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: none;
	height: auto;
	padding: 6px 10px;
	border: 1px solid #4a43ee;
	border-radius: 4px; /* 시안 393:1135 */
	background: var(--c-white);
	color: #4a43ee;
	font-size: 13px; /* 시안 SemiBold 13 */
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.notice-list__badge img,
.notice-list__badge svg {
	display: block;
	flex: none;
	width: 14px;
	height: 12px;
}
.notice-list__no {
	flex: none;
	width: 60px;
	font-family: var(--font-num);
	font-size: clamp(10.1px, 1.118vw, 16.1px);
	font-weight: 500;
	color: #888;
	text-align: center;
}
.notice-list__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* 한 단계 줄였다 — 19.5 → 18 (가운데 vw 값도 같은 비율로 1.35 → 1.25) */
	font-size: clamp(11.5px, 1.25vw, 18px);
	font-weight: 500;
	line-height: 1.4;
	color: #111;
}
.notice-list a:hover .notice-list__title { color: #4a43ee; }
.notice-list__date {
	flex: none;
	font-family: var(--font-num);
	font-size: clamp(10px, 0.958vw, 13.8px);
	font-weight: 500;
	color: #666;
}
.notice-list__arrow { flex: none; width: 24px; height: 24px; color: #999; transition: transform .25s ease; }
.notice-list a:hover .notice-list__arrow { transform: translateX(4px); color: #4a43ee; }

/* ---------- 페이지 번호 ---------- */
.rs-page {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	margin: 76px auto 0;
	padding-bottom: 120px;
}
.rs-page__nums { display: flex; align-items: center; gap: clamp(5px, 1vw, 10px); }
.rs-page__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(36px, 5vw, 50px);
	aspect-ratio: 1;
	border-radius: 50%;
	font-family: var(--font-num);
	font-size: clamp(11.5px, 1.278vw, 18.4px);
	font-weight: 500;
	color: #111;
	transition: background .25s ease, color .25s ease;
}
.rs-page__num:hover { background: #eef0fb; }
.rs-page__num.is-active { background: #111; color: var(--c-white); }
.rs-page__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width:clamp(60px, 10vw, 100px);
	aspect-ratio:1.5/1;
	min-height: 36px;
	max-height: 50px;
	border: 1px solid #ddd;
	border-radius: 300px;
	font-size: clamp(10.1px, 1.118vw, 16.1px);
	font-weight: 600;
	color: #111;
	transition: border-color .25s ease, background .25s ease;
}
.rs-page__arrow:hover { border-color: #111; background: #f7f8ff; }
.rs-page__arrow.is-off { opacity: .35; pointer-events: none; }

.rs-empty {
	margin: 90px auto;
	text-align: center;
	font-size: clamp(13px, 1.438vw, 20.7px);
	font-weight: 500;
	color: #777;
}

/* ---------- 게시글 상세 ---------- */
.rs-view { padding-top: 164px; }
.rs-view__back {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: clamp(11.5px, 1.278vw, 18.4px);
	font-weight: 600;
	color: #111;
	transition: color .25s ease;
}
.rs-view__back:hover { color: #4a43ee; }
.rs-view__back svg { width: 24px; height: 24px; }

.rs-view__head { margin-top: 30px; text-align: center; }
.rs-view__title {
	margin: 0;
	font-size: clamp(22px, 2.555vw, 36.8px);
	font-weight: 700;
	line-height: 1.6;
	color: #111;
	word-break: keep-all;
}
.rs-view__tags { display: flex; justify-content: center; gap: 5px; margin: 14px 0 0; }
.rs-view__tags em {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border: 1px solid #4a43ee;
	border-radius: 300px;
	color: #4a43ee;
	font-size: clamp(10px, 1.038vw, 15px);
	font-style: normal;
	font-weight: 600;
}
.rs-view__date {
	margin: 14px 0 0;
	font-family: var(--font-num);
	font-size: clamp(10px, 0.958vw, 13.8px);
	font-weight: 500;
	color: #666;
}

.rs-view__body {
	margin-top: 33px;
	padding-top: 40px;
	border-top: 1px solid #e5e5e5;
	font-size: clamp(11.5px, 1.278vw, 18.4px);
	line-height: 1.8;
	color: #333;
}
.rs-view__body img { max-width: 100%; height: auto; }
.rs-view__body a { color: #4a43ee; text-decoration: underline; }
.rs-view__body table { width: 100%; border-collapse: collapse; }

.rs-view__more { display: flex; justify-content: center; margin-top: 50px; }
.rs-view__list-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	width: 240px;
	height: 65px;
	border: 1px solid #111;
	border-radius: 8px;
	color: #111;
	font-size: clamp(11.5px, 1.278vw, 18.4px);
	font-weight: 700;
	transition: color .35s ease;
}
.rs-view__list-btn::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background: #111;
	transform: translateY(101%);
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.rs-view__list-btn:hover { color: var(--c-white); }
.rs-view__list-btn:hover::before { transform: translateY(0); }

.rs-view__nav {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-top: 78px;
	padding: 40px 0 130px;
	border-top: 1px solid #000;
}
.rs-view__nav-col {
	flex: 1 1 0;
	min-width: 0; /* 긴 제목 ellipsis 에 필요 */
	padding-right: 40px;
}
.rs-view__nav-col--next {
	padding-right: 0;
	padding-left: 40px;
	border-left: 1px solid #000; /* 시안 Line 78 — ::before 그리드 대체 */
	text-align: right;
}
.rs-view__nav-label {
	margin: 0 0 12px;
	font-family: var(--font-num);
	font-size: 16px; /* 시안 Montserrat Medium 16 */
	font-weight: 600;
	line-height: 1.6;
	color: #000;
}
.rs-view__nav-col a {
	display: flex;
	align-items: center;
	gap: 22px;
	min-width: 0;
}
.rs-view__nav-col--next a { justify-content: flex-end; }
.rs-view__nav-thumb {
	flex: none;
	width: clamp(100px, 15vw, 150px);
	aspect-ratio: 150/98;
	border-radius: 4px;
	background: #eef0fb;
	overflow: hidden;
}
.rs-view__nav-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rs-view__nav-col a:hover .rs-view__nav-thumb img { transform: scale(1.07); }
.rs-view__nav-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px; /* 시안 Pretendard SemiBold 16 */
	font-weight: 600;
	line-height: 1.4;
	color: #000;
	transition: color .25s ease;
}
.rs-view__nav-col a:hover .rs-view__nav-title { color: #4a43ee; }
.rs-view__nav-none { margin: 0; font-size: 16px; color: #999; }

/* ---------- Resources 반응형 ---------- */
@media (max-width: 1360px) {
	.rs-container, .rs-faq, .rs-count, .guide-lead, .guide-grid,
	.notice-list, .rs-page, .rs-view > * { padding-left: var(--gutter); padding-right: var(--gutter); }
	.guide-lead { padding-left: 0; }
	.guide-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	.rs-tabs { margin-top: 70px; }
	.guide-lead { grid-template-columns: 1fr; gap: 0; padding-right: 0; }
	.guide-lead__body { padding: 26px var(--gutter) 32px; }
	.guide-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; margin-top: 50px; }
	.rs-view { padding-top: 130px; }
	.rs-view__nav {
		flex-direction: column;
		gap: 30px;
	}
	.rs-view__nav-col,
	.rs-view__nav-col--next {
		padding: 0;
		border-left: 0;
		text-align: left;
	}
	.rs-view__nav-col--next {
		padding-top: 30px;
		border-top: 1px solid #e5e5e5;
	}
	.rs-view__nav-col--next a { justify-content: flex-start; flex-direction: row-reverse; }
}
@media (max-width: 700px) {
	.rs-hero__bg { border-radius: 0 0 clamp(30px, 6vw, 60px) clamp(30px, 6vw, 60px);}
	.rs-nav {
		gap: 18px;
		padding: 0 24px;
	}

	.guide-grid { grid-template-columns: 1fr; }
	.faq-row__q { gap: 12px; padding: 16px 18px; }
	.faq-row__mark { width: 40px; height: 40px; font-size: 20px; }
	.faq-row__text { font-size: 16px; }
	.faq-row__body { font-size: 13px; padding: 16px 18px; }
	.rs-tab { font-size: 13px; padding: 0 12px; }
	.rs-tab__ico { width: 20px; height: 20px; }

	.faq-row__a { gap: 12px; padding: 0 18px 20px; }
	.notice-list a { flex-wrap: wrap; gap: 8px 12px; padding: 14px 12px; }
	.notice-list__no {text-align: left;}
	.notice-list__title { flex: 1 1 100%; white-space: normal; }
	.notice-list__arrow { display: none; }
	.rs-page { gap: 10px; }
	.rs-page__arrow { width: 78px; }
	.rs-view__list-btn { width: 100%; }
}

/* ============================================================
   Clients — 시안 Frame 77 로고 벽 (Figma 132:399)
   칸 206×100 · 가로 간격 4(피치 210) · 세로 간격 12
   ============================================================ */
.clients__wall {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 140%;
	height: auto;
	transform: translate(-50%, -50%) rotate(var(--tilt, -7deg)) scale(var(--wallz, 1));
	transform-origin: 50% 50%;
	pointer-events: none;
}
.clients__row {
	overflow: hidden;
	content-visibility: auto;
	contain-intrinsic-size: auto 100px;
}
.clients__track {
	display: flex;
	align-items: center;
	gap: 4px;
	width: max-content;
	padding-right: 4px;
	animation: clientsRoll var(--dur, 40s) linear infinite;
	animation-direction: var(--dir, normal);
}
@keyframes clientsRoll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.clients__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: clamp(100px, 20vw, 200px);
	aspect-ratio: 200/50;
	padding: 0 22px;
	border-radius: 300px;
	background: var(--c-white);

}
.clients__logo img {
	max-width:80%;
	max-height:60%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
}



/* ---------- 로그인 드롭다운 (참고: kap.or.kr) ---------- */
.login-menu { position: relative; }
.login-menu__pop {
	position: absolute;
	left: 50%;
	top: calc(100% + 10px);
	z-index: 10;
	display: flex;
	flex-direction: column;
	min-width: 132px;
	padding: 8px;
	border-radius: 14px;
	background: var(--c-white);
	box-shadow: 0 14px 34px rgba(20, 20, 50, .16), 0 0 0 1px rgba(20, 20, 50, .06);
	/* 닫힘 상태 — 살짝 위에서 접혀 있다 */
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -8px);
	transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .25, 1), visibility 0s linear .28s;
}
/* 버튼과 메뉴 사이의 빈 틈에서도 마우스가 끊기지 않도록 다리를 놓는다 */
.login-menu__pop::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}
.login-menu:hover .login-menu__pop,
.login-menu:focus-within .login-menu__pop {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .25, 1), visibility 0s;
}
.login-menu__pop a {
	display: block;
	padding: 9px 14px;
	border-radius: 9px;
	color: #1b1a20;
	font-size: clamp(14px, 1.4vw, 16.1px);
	font-weight: 700;
	white-space: nowrap;
	text-align: center;
	transition: background .2s ease, color .2s ease;
}
.login-menu__pop a:hover,
.login-menu__pop a:focus-visible { background: var(--c-blue); color: var(--c-white); }

@media (max-width: 900px) {
	.login-menu__pop { left: auto; right: 0; transform: translate(0, -8px); }
	.login-menu:hover .login-menu__pop,
	.login-menu:focus-within .login-menu__pop { transform: translate(0, 0); }
}

/* ---------- 모바일 메뉴 버튼 / 패널 ---------- */
/* 넓은 화면에서는 GNB 가 그대로 보이므로 이 버튼은 필요 없다 */
.btn-menu { display: none; }

@media (max-width: 1024px) {
	.btn-menu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 45px;
		height: 45px;
		padding: 0 11px;
		border: 0;
		border-radius: 50%;
		background: var(--c-blue-light);
		cursor: pointer;
	}
	.btn-menu span {
		display: block;
		height: 2px;
		border-radius: 2px;
		background: var(--c-blue);
		transition: transform .3s cubic-bezier(.2, .8, .25, 1), opacity .2s ease;
	}
	.site-header--dark .btn-menu { background: rgba(255, 255, 255, .16); }
	.site-header--dark .btn-menu span { background: var(--c-white); }
	/* 열리면 X 로 바뀐다 */
	.btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.btn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.mobile-nav[hidden] { display: none; }
.mobile-nav {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--header-h);
	z-index: 190;
	max-height: calc(100vh - var(--header-h));
	padding: 18px var(--gutter) 30px;
	overflow-y: auto;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 40px rgba(20, 20, 50, .14);
}
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.mobile-nav__list > .mobile-nav__item + .mobile-nav__item {
	border-top: 1px solid rgba(20, 20, 50, .08);
}
.mobile-nav__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 4px;
	border: 0;
	background: transparent;
	color: #14141e;
	font: inherit;
	font-size: clamp(16px, 2vw, 19.5px);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.mobile-nav__top.is-current { color: var(--c-blue); }
.mobile-nav__sub { padding: 0 4px 12px 12px; }
.mobile-nav__sub[hidden] { display: none; }
.mobile-nav__sub a {
	display: block;
	padding: 10px 4px;
	color: #3a3a4a;
	font-size: clamp(14px, 1.7vw, 16px);
	font-weight: 600;
}
.mobile-nav a.is-current { color: var(--c-blue); }
.mobile-nav__cta {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 50px;
	margin-top: 18px;
	border-radius: 300px;
	background: var(--c-blue);
	color: var(--c-white) !important;
	font-size: clamp(10.8px, 1.198vw, 17.3px);
	font-weight: 800;
}

/* ============================================================
   메가메뉴 — 상단 메뉴에 올리면 내려온다  (Figma 486:2188)
   ============================================================ */
/* 헤더가 고정이라 높이가 고정이다. 열릴 때만 헤더가 아래까지 늘어나게 한다. */
.site-header.is-mega-open { height: auto; }

.mega {
	position: absolute;
	width: 100vw;
	left: 50%;
	right: 0;
	top: var(--header-h);
	z-index: 5;
	padding: 40px var(--gutter) 0;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 24px 50px rgba(20, 20, 60, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) !important;
	transition: opacity .28s ease, transform .34s cubic-bezier(.2, .8, .25, 1), visibility 0s linear .34s;
}
.mega[hidden] { display: block; }          /* JS 가 없어도 hover 로 열리게 한다 */
.site-header:hover .mega,
.site-header:focus-within .mega,
.mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .28s ease, transform .34s cubic-bezier(.2, .8, .25, 1), visibility 0s;
}
.mega__inner { max-width: var(--design-w); margin: 0 auto; }

.mega__cols {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 30px;
	padding-bottom: 40px;
}
.mega-col__title {
	margin: 0 0 22px;
	font-family: var(--font-num);
	font-size: clamp(14.4px, 1.597vw, 23px);
	font-weight: 800;
	line-height: 1.3;
	color: #0a090b;
}
.mega-col__list { margin: 0; padding: 0; list-style: none; }
.mega-col__list li + li { margin-top: 6px; }
.mega-col__list a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px 8px 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #33343f;
	transition: color .2s ease, transform .2s ease;
}
.mega-col__list a:hover { color: var(--c-blue); transform: translateX(0px); }

.mega-ico {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #6a6b78;
	transition: color .2s ease;
}
.mega-ico svg { width: 24px; height: 24px; }
.mega-col__list a:hover .mega-ico { color:#B2B3FF; }
.mega-ai {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(140deg, #6136d9 0%, #ed35a4 100%);
	color: var(--c-white);
	font-family: var(--font-num);
	font-size: clamp(10px, 0.694vw, 10px);
	font-weight: 900;
}

/* 아래 안내 띠 */
.mega__cover {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	margin: 0 calc(var(--gutter) * -1);
	padding: 32px var(--gutter);
	background: linear-gradient(100deg, var(--c-blue) 0%, #6136d9 55%, #ed35a4 100%);
	color: var(--c-white);
}
.mega__head {
	margin: 0;
	font-size: clamp(19px, 2.395vw, 34.5px);
	font-weight: 800;
	line-height: 1.4;
}
.mega__sub { margin: 10px 0 0; font-size: clamp(11.5px, 1.278vw, 18.4px); font-weight: 500; opacity: .86; }
.mega__cards { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.mega__cards a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 150px;
	height: 150px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
	color: var(--c-white);
	font-size: clamp(11.5px, 1.278vw, 18.4px);
	font-weight: 700;
	transition: background .25s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}
.mega__cards a:hover { background: rgba(255, 255, 255, .26); transform: translateY(-5px); }
.mega-ico--lg { width: 46px; height: 46px; color: var(--c-white); }
.mega-ico--lg svg { width: 46px; height: 46px; }
.mega-ico--lg .mega-ai { width: 42px; height: 42px; font-size: clamp(13px, 1.438vw, 20.7px); }

@media (max-width: 1280px) {
	.mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
	.mega__cards a { width: 120px; height: 120px; }
}
@media (max-width: 1024px) {
	.mega { display: none !important; } /* 좁은 화면은 햄버거 메뉴를 쓴다 */
}
@media (prefers-reduced-motion: reduce) {
	.mega { transition: opacity .01s, visibility 0s; transform: none; }
}

/* ████████████████████████████████████████████████████████████
   Services 화면 (service/homepage.php · service/system.php) — 모양
   ------------------------------------------------------------
   여기부터 파일 끝까지가 그 내용이다 — 위쪽은 하나도 건드리지 않았다.

   ※ 이 파일을 올릴 때는 **반드시 서버 것을 먼저 받아** 그 위에 올릴 것.
     예전 사본을 그대로 올리면 이 블록이 통째로 지워진다(이미 두 번 겪었다).
     되살리는 법 : service/homepage.php · system.php 에 아래 두 줄을 되돌린다.
       $page_css = 'service.css';  $page_js = 'service.js';
     (두 파일은 지우지 않고 그대로 두었다)
   ████████████████████████████████████████████████████████████ */

/* ============================================================
   Services — 홈페이지 제작 (Figma 621:4678)
   ============================================================
   이 파일은 새로 만든 것이다 — style.css · layout.css 는 건드리지 않았다.
   값은 모두 시안 1920 기준이며 clamp(최소, N vw, 시안값) 으로 줄어든다.
   (N = 시안값 ÷ 1920 × 100)

   1. 상단 배너 (include/svc_hero.php)
   2. 본문 틀
   3. WEBVISTA의 강점
   4. 제작 프로세스
   5. 8가지 무료 서비스 + 기대 효과
   6. 문의 단추
   7. 좁은 화면
   ============================================================ */

/* ============================================================
   1. 상단 배너 — 남색 바탕 + 빛 그러데이션
   ============================================================ */
.sv-hero {
	position: relative;
	overflow: hidden;
	/* 알약 메뉴 윗선 94, 아래 여백 61 (시안 621:4679 = 1920×720) */
	padding: clamp(74px, 4.896vw, 94px) var(--gutter) clamp(40px, 3.177vw, 61px);
	background: #000b44;
	text-align: center;
	line-height: 0;   /* 알약(inline-flex) 위아래에 줄상자 여백이 끼는 것을 막는다 */
}
/* 빛 — 시안 628:5077 을 그대로 내보낸 그림.
   그림 칸이 1920×1081 이고 배너보다 179 위에서 시작한다. */
.sv-hero__glow {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	width: 100%;
	/* 그림 칸은 1919.167×1081 — 폭에 맞추면 높이가 따라온다 */
	aspect-ratio: 1919.167 / 1081;
	height: auto;
	/* 배너보다 259 위에서 시작한다 (시안 -179 에서 80 더 올림).
	   세로 % 는 높이를 따르지만 **margin 의 % 는 폭을 따른다** — 그래서 여기에 건다.
	   (-259 / 1920 = -13.4896%) */
	margin-top: -13.4896%;
	background: url("../img/service/hero-glow.png") center / 100% 100% no-repeat;
	pointer-events: none;
	will-change: opacity, transform;
	transform-origin: 50% 46%;   /* 빛의 수평선 자리 */
	/* 마우스를 아주 조금 따라온다 (service.js) — 애니메이션이 쓰는 transform 과 안 겹치게 따로 둔다 */
	translate: var(--mx, 0) var(--my, 0);
	transition: translate .6s cubic-bezier(.22, 1, .36, 1);
	animation: sv-breathe 9s ease-in-out infinite;
}
@keyframes sv-breathe {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: .88; transform: scale(1.035); }
}

/* 하위 메뉴 알약 — FAQ·About 과 **같은 .rs-nav** 를 쓴다(위쪽에 정의돼 있다).
   .rs-nav 는 대메뉴 아래에 붙박이로 떠 있으므로 흐름에서 빠진다 —
   .rs-hero 처럼 그 높이만큼 자리를 남겨 두어야 제목이 올라오지 않는다. */
/* .sv-hero::before — 하위 탭을 뺐으므로 자리도 비워 두지 않는다 */

/* 제목 — 알약 아랫선 154 에서 218 까지 64 (시안 621:4707) */
.sv-hero__title {
	position: relative;
	z-index: 1;
	margin: clamp(30px, 3.333vw, 64px) 0 0;
	font-size: clamp(26px, 2.188vw, 42px);
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	word-break: keep-all;
}
.sv-hero__title b      { font-weight: 800; }
.sv-hero__title strong { font-weight: 700; }

/* 설명 두 줄 — 제목 아랫선 318 에서 426 까지 108 (시안 621:4783) */
.sv-hero__lead {
	position: relative;
	z-index: 1;
	margin: clamp(40px, 5.625vw, 108px) auto 0;
	max-width: clamp(320px, 39.375vw, 756px);
	font-size: clamp(14px, .938vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	word-break: keep-all;
}

/* 갈래 타일 다섯 — 64 네모 · 사이 36 (시안 628:5141~5272) */
.sv-cats {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(16px, 1.875vw, 36px);
	margin: clamp(28px, 2.708vw, 52px) 0 0;
	padding: 0;
	list-style: none;
}
.sv-cats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: clamp(48px, 3.333vw, 64px);
}
.sv-cat__ico {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: clamp(12px, .833vw, 16px);
	overflow: hidden;
	/* 시안: 바깥 번짐 + 안쪽 테두리빛 세 겹 */
	box-shadow:
		0 6px 16px -6px rgba(179, 160, 255, .48),
		inset 0 0 1px 0 #b3a0ff,
		inset 0 0 3px 0 rgba(179, 160, 255, .24),
		inset 0 0 12px 0 rgba(179, 160, 255, .12);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.sv-cat__tile {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
/* 타일 아래쪽에 깔리는 옅은 보랏빛 (시안 628:5277 — 네모 틀보다 조금 크게 놓인다) */
.sv-cat__glow {
	position: absolute;
	left: -2.083%;
	top: 0;
	display: block;
	width: 104.167%;    /* 66.667 / 64 */
	height: 133.333%;   /* 85.333 / 64 */
	pointer-events: none;
}
.sv-cat__glyph {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 50%;         /* 32 / 64 */
	height: 50%;
	transform: translate(-50%, -50%);
}
.sv-cats li:hover .sv-cat__ico {
	transform: translateY(-6px) scale(1.06);
	box-shadow:
		0 14px 26px -8px rgba(179, 160, 255, .7),
		inset 0 0 1px 0 #b3a0ff,
		inset 0 0 3px 0 rgba(179, 160, 255, .34),
		inset 0 0 16px 0 rgba(179, 160, 255, .2);
}
.sv-cat__t {
	margin-top: clamp(10px, .99vw, 19px);
	font-size: clamp(12px, .729vw, 14px);
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

/* 타일은 통통 튀어 오르며 나타난다 */
.has-reveal .sv-cats li.js-reveal { opacity: 0; transform: translateY(18px) scale(.86); }
.has-reveal .sv-cats li.js-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease var(--delay, 0ms), transform .6s cubic-bezier(.34, 1.56, .64, 1) var(--delay, 0ms);
}

/* ============================================================
   2. 본문 틀
   ============================================================ */
.sv-body {
	padding: 0 var(--gutter);
	/* CTA 배너 위 50 (시안 2275 → 2325) */
	padding-bottom: clamp(26px, 2.604vw, 50px);
}
.sv-body > .inner {
	max-width: 1480px;   /* 시안 x220~1700 */
	margin: 0 auto;
}

/* 큰 제목 — ExtraBold 42 (시안 649:2124 · 656:4204) */
.sv-h2 {
	margin: clamp(48px, 4.74vw, 91px) 0 0;   /* 배너 아래 91 */
	font-size: clamp(24px, 2.188vw, 42px);
	font-weight: 800;
	line-height: 1.6;
	color: #000;
}
.sv-h2--proc { margin-top: clamp(44px, 4.375vw, 84px); }   /* 강점 아래 84 */

/* ============================================================
   3. WEBVISTA의 강점 — 360×220 여덟 장 (시안 670:4878)
   ============================================================ */
.sv-str {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(8px, .521vw, 10px) clamp(8px, .625vw, 12px);
	margin: clamp(10px, .885vw, 17px) 0 0;   /* 제목 아래 17 */
	padding: 0;
	list-style: none;
}
.sv-str__card {
	position: relative;
	min-height: clamp(170px, 11.458vw, 220px);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
/* 바탕은 한 칸 걸러 두 가지가 번갈아 온다 (시안 656:1994 · 656:3998) */
.sv-str__card:nth-child(1),
.sv-str__card:nth-child(3),
.sv-str__card:nth-child(6),
.sv-str__card:nth-child(8) { background-image: linear-gradient(122.208deg, #dde8f8 0%, #f0f3fc 101.19%); }
.sv-str__card:nth-child(2),
.sv-str__card:nth-child(4),
.sv-str__card:nth-child(5),
.sv-str__card:nth-child(7) { background-image: linear-gradient(122.208deg, #e3e5ed 0%, #f0f3fc 101.19%); }

.sv-str__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 34px -14px rgba(97, 54, 217, .28);
}
/* 마우스가 얹힌 자리에 옅은 빛이 번진다 (자리값은 service.js 가 넣는다) */
.sv-str__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .75), transparent 62%);
	pointer-events: none;
	transition: opacity .35s ease;
}
.sv-str__card:hover::after { opacity: 1; }
/* 글자·아이콘은 빛보다 위에 */
.sv-str__no, .sv-str__t, .sv-str__ico, .sv-str__box { z-index: 1; }

.sv-str__no {
	position: absolute;
	left: clamp(14px, 1.458vw, 28px);
	top: clamp(16px, 1.719vw, 33px);
	margin: 0;
	font-family: Montserrat, "Pretendard Variable", Pretendard, sans-serif;
	font-size: clamp(10px, .625vw, 12px);
	font-weight: 600;
	line-height: 1.6;
	color: #6136d9;
	white-space: nowrap;
}
.sv-str__t {
	position: absolute;
	left: clamp(14px, 1.458vw, 28px);
	right: clamp(46px, 3.75vw, 72px);
	top: clamp(28px, 2.708vw, 52px);
	margin: 0;
	font-size: clamp(17px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.sv-str__ico {
	position: absolute;
	right: clamp(14px, 1.458vw, 28px);
	top: clamp(30px, 2.865vw, 55px);
	display: block;
	width: clamp(24px, 1.667vw, 32px);
	height: clamp(24px, 1.667vw, 32px);
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.sv-str__card:hover .sv-str__ico { transform: scale(1.18) rotate(-6deg); }

/* 안쪽 흰 상자 — 300×80, 흐림 유리 (시안 656:3984) */
.sv-str__box {
	position: absolute;
	left: clamp(12px, 1.563vw, 30px);
	right: clamp(12px, 1.563vw, 30px);
	top: clamp(76px, 5.417vw, 104px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(60px, 4.167vw, 80px);
	padding: clamp(6px, .521vw, 10px) clamp(10px, .938vw, 18px);
	border: 1px solid #fff;
	border-radius: 8px;
	background: rgba(255, 255, 255, .6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	font-size: clamp(11px, .729vw, 14px);
	font-weight: 400;
	line-height: 1.4;
	color: #000;
	word-break: keep-all;
}
.sv-str__box span { display: block; }

/* ============================================================
   4. 제작 프로세스 — 일곱 칸 (시안 670:4879)
   ============================================================ */
.sv-proc {
	position: relative;
	margin: clamp(10px, .938vw, 18px) 0 0;   /* 제목 아래 18 */
	padding-bottom: clamp(10px, .938vw, 18px);   /* 칸 아랫선 137 → 띠 아랫선 155 */
}
/* 옅은 보라 띠 — 1480×117 (시안 656:4221) */
.sv-proc::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: clamp(24px, 1.979vw, 38px);
	height: clamp(84px, 6.094vw, 117px);
	border-radius: 8px;
	background: #f6f7ff;
	opacity: .8;
}
.sv-steps {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0;
	padding: 0 clamp(10px, 1.042vw, 20px);
	list-style: none;
}
.sv-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: clamp(96px, 9.375vw, 180px);
}
/* Step 알약 — 80×40, 아래로 뾰족한 꼬리 (시안 656:4223) */
.sv-step__no {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(58px, 4.167vw, 80px);
	height: clamp(30px, 2.083vw, 40px);
	border: 1px solid #6136d9;
	border-radius: 300px;
	background: #fff;
	font-size: clamp(11px, .729vw, 14px);
	font-weight: 800;
	line-height: 1;
	color: #6136d9;
	white-space: nowrap;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
/* 꼬리 — 14×9 삼각형이 띠 위로 내려온다 */
.sv-step__no::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: clamp(10px, .729vw, 14px);
	height: clamp(6px, .469vw, 9px);
	margin-top: -1px;
	background: #6136d9;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
	transition: background .25s ease;
}
/* 흰 칸 — 180×80 (시안 656:4251) */
.sv-step__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: clamp(52px, 4.167vw, 80px);
	margin-top: clamp(10px, .885vw, 17px);
	padding: clamp(6px, .521vw, 10px);
	border: 1px solid #938eff;
	border-radius: 4px;
	background: #fff;
	box-shadow: 9px 8px 7px rgba(0, 0, 0, .02), 4px 3px 5px rgba(0, 0, 0, .03), 1px 1px 3px rgba(0, 0, 0, .03);
	font-size: clamp(12px, .833vw, 16px);
	font-weight: 600;
	line-height: 1.4;
	color: #000;
	text-align: center;
	word-break: keep-all;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sv-step:hover .sv-step__no       { background: #6136d9; color: #fff; transform: translateY(-3px); }
.sv-step:hover .sv-step__no::after { background: #6136d9; }
.sv-step:hover .sv-step__box      { transform: translateY(-3px); border-color: #6136d9; box-shadow: 0 12px 20px -10px rgba(97, 54, 217, .4); }

/* 칸 사이 화살표 — 40 동그라미가 틈 한가운데 선다 (시안 656:4298) */
.sv-step__arrow {
	position: absolute;
	left: calc(100% + clamp(5px, .781vw, 15px));
	top: calc(clamp(10px, .885vw, 17px) + clamp(30px, 2.083vw, 40px) + clamp(6px, .938vw, 18px));
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(26px, 2.083vw, 40px);
	height: clamp(26px, 2.083vw, 40px);
	border: 1px solid #938eff;
	border-radius: 300px;
	background: #fff;
	transform: translateX(-50%);
}
.sv-step__arrow img {
	display: block;
	width: clamp(11px, .833vw, 16px);
	height: clamp(11px, .833vw, 16px);
}
/* 화살표가 차례로 한 번씩 밀린다 */
.sv-proc.is-in .sv-step__arrow img { animation: sv-nudge 2.4s ease-in-out infinite; animation-delay: var(--delay, 0ms); }
@keyframes sv-nudge {
	0%, 62%, 100% { transform: translateX(0); }
	70%           { transform: translateX(3px); }
	78%           { transform: translateX(0); }
}

/* 칸은 왼쪽부터 차례로 올라온다 */
.has-reveal .sv-proc.js-reveal .sv-step { opacity: 0; transform: translateY(20px); }
.has-reveal .sv-proc.js-reveal.is-in .sv-step {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease var(--delay, 0ms), transform .55s cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms);
}

/* ============================================================
   5. 8가지 무료 서비스 + 기대 효과 (시안 658:4352 · 670:4877)
   ============================================================ */
.sv-free {
	display: flex;
	align-items: flex-start;
	margin: clamp(56px, 5.885vw, 113px) 0 0;   /* 프로세스 아래 113 */
	border-radius: clamp(12px, 1.042vw, 20px);
	background: #252146;
	/* 시안 안쪽 여백 — 위 44 / 오른 50 / 아래 46 / 왼 71 */
	padding: clamp(24px, 2.292vw, 44px) clamp(20px, 2.604vw, 50px) clamp(26px, 2.396vw, 46px) clamp(24px, 3.698vw, 71px);
	overflow: hidden;
}
.sv-free__left {
	flex: 0 0 49.23%;   /* 세로 줄이 1359 안의 669 자리에 선다 */
	border-right: 1px solid rgba(201, 191, 255, .25);
	padding-right: clamp(16px, 2.083vw, 40px);
}
.sv-free__h {
	margin: 0;
	font-size: clamp(20px, 1.667vw, 32px);
	font-weight: 300;
	line-height: 1.6;
	color: #fff;
	word-break: keep-all;
}
.sv-free__h b { font-weight: 700; color: #c9bfff; }

.sv-free__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(6px, .521vw, 10px);
	margin: clamp(16px, 1.51vw, 29px) 0 0;
	padding: 0;
	list-style: none;
}
.sv-free__list li {
	display: inline-flex;
	align-items: center;
	gap: clamp(4px, .26vw, 5px);
	height: clamp(38px, 2.5vw, 48px);
	padding: 0 clamp(16px, 1.563vw, 30px);
	border: 1px solid rgba(201, 191, 255, .5);
	border-radius: 300px;
	background: #252146;
	font-size: clamp(12px, .833vw, 16px);
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	white-space: nowrap;
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.sv-free__list li img {
	flex: none;
	display: block;
	width: clamp(18px, 1.25vw, 24px);
	height: clamp(18px, 1.25vw, 24px);
}
.sv-free__list li:hover {
	transform: translateY(-3px);
	border-color: #c9bfff;
	background: #2e2957;
}
/* 알약이 하나씩 차례로 나타난다 */
.has-reveal .sv-free.js-reveal .sv-free__list li { opacity: 0; transform: translateY(14px); }
.has-reveal .sv-free.js-reveal.is-in .sv-free__list li {
	opacity: 1;
	transform: none;
	transition: opacity .45s ease var(--delay, 0ms), transform .5s cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms);
}

/* ── 기대 효과 — 231 동그라미 석 장이 서로 겹친다 (시안 903:7114) ── */
.sv-free__right {
	flex: 1 1 auto;
	min-width: 0;
	/* 동그라미 윗선이 왼쪽 제목보다 22 아래에서 시작한다 (시안 903:7114) */
	padding: clamp(10px, 1.146vw, 22px) 0 0 clamp(16px, 2.708vw, 52px);
}
.sv-res {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sv-res li {
	position: relative;
	flex: none;
	width: 36.264%;          /* 231 / 637 */
	aspect-ratio: 1 / 1;
	border: 1px solid #6136d9;
	border-radius: 50%;
	background: #252146;
	box-shadow: -13px 21px 15px rgba(0, 0, 0, .05), -6px 9px 11px rgba(0, 0, 0, .09), -1px 2px 6px rgba(0, 0, 0, .1);
	transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .3s ease;
}
.sv-res li:nth-child(2) { margin-left: -4.082%; }   /* 26 / 637 */
.sv-res li:nth-child(3) { margin-left: -4.710%; }   /* 30 / 637 */
.sv-res li:hover { transform: translateY(-8px) scale(1.04); border-color: #c9bfff; z-index: 2; }
.sv-res li img {
	position: absolute;
	left: 50%;
	top: 27.273%;            /* 63 / 231 */
	display: block;
	width: 21.645%;          /* 50 / 231 */
	height: 21.645%;
	transform: translateX(-50%);
}
.sv-res li span {
	position: absolute;
	left: 0;
	right: 0;
	top: 54.545%;            /* 126 / 231 */
	font-size: clamp(13px, 1.042vw, 20px);
	font-weight: 800;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	word-break: keep-all;
}
/* 동그라미는 부풀며 나타나고, 그 뒤로 아주 천천히 떠 있다 */
.has-reveal .sv-free.js-reveal .sv-res li { opacity: 0; transform: scale(.82); }
.has-reveal .sv-free.js-reveal.is-in .sv-res li {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease var(--delay, 0ms), transform .7s cubic-bezier(.34, 1.56, .64, 1) var(--delay, 0ms);
}
.sv-free.is-in .sv-res li { animation: sv-float 6s ease-in-out infinite; animation-delay: calc(var(--delay, 0ms) + 700ms); }
.sv-free.is-in .sv-res li:hover { animation-play-state: paused; }
@keyframes sv-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -7px; }
}

.sv-res__cap {
	margin: clamp(14px, 1.458vw, 28px) 0 0;
	font-family: Montserrat, "Pretendard Variable", Pretendard, sans-serif;
	font-size: clamp(13px, .938vw, 18px);
	font-weight: 700;
	line-height: 1.6;
	color: #c9bfff;
	text-align: center;
	letter-spacing: .02em;
}

/* ============================================================
   6. 문의 단추 (시안 670:4880)
   ============================================================ */
.sv-btnwrap {
	display: flex;
	justify-content: center;
	margin: clamp(18px, 1.563vw, 30px) 0 0;
}
.sv-btnwrap .btn-gradient {
	width: auto;
	padding: clamp(11px, .833vw, 16px) clamp(18px, 1.563vw, 30px);
	font-weight: 700;
}

/* ============================================================
   7. 좁은 화면
   ============================================================ */
@media (max-width: 1280px) {
	.sv-str { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
	/* 프로세스는 옆으로 밀어 본다 — 칸이 뭉개지는 것보다 낫다 */
	.sv-proc { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
	.sv-proc::before { right: auto; width: 1120px; }
	.sv-steps { min-width: 1120px; }
	.sv-step { width: 140px; }

	.sv-free { flex-direction: column; padding: 28px 24px 32px; }
	.sv-free__left { flex: none; width: 100%; padding-right: 0; border-right: 0; border-bottom: 1px solid rgba(201, 191, 255, .25); padding-bottom: 28px; }
	.sv-free__right { width: 100%; padding: 28px 0 0; }
	.sv-res { justify-content: center; }
	.sv-res li { width: 33%; }
}
@media (max-width: 767px) {
	.sv-hero__lead br { display: none; }
	.sv-cats { gap: 14px 12px; }
	.sv-cats li { width: 56px; }
	.sv-cat__t { white-space: normal; }

	.sv-str { grid-template-columns: minmax(0, 1fr); }
	.sv-str__card { min-height: 0; }
	/* 폰에서는 겹쳐 놓지 않고 위에서 아래로 흐르게 한다 */
	.sv-str__no, .sv-str__t, .sv-str__ico, .sv-str__box { position: static; }
	.sv-str__card { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 18px 18px 20px; }
	.sv-str__no  { grid-column: 1; }
	.sv-str__ico { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 30px; height: 30px; }
	.sv-str__t   { grid-column: 1; }
	.sv-str__box { grid-column: 1 / -1; margin-top: 12px; }

	.sv-res li span { top: 52%; font-size: 13px; }
	.sv-free__list li { white-space: normal; height: auto; padding: 9px 16px; }
}

/* 움직임을 줄여 달라고 한 분에게는 흔들지 않는다 */
@media (prefers-reduced-motion: reduce) {
	.sv-hero__glow,
	.sv-proc.is-in .sv-step__arrow img,
	.sv-free.is-in .sv-res li { animation: none; }
	.sv-hero__glow { translate: none; transition: none; }
}


/* ============================================================
   Services — 시스템 구축 (Figma 807:2105)
   ============================================================
   이 파일은 새로 만든 것이다.
   **style.css · layout.css · service.css 는 건드리지 않았다** —
   배너(.sv-hero*)와 제작 프로세스(.sv-proc*)는 service.css 의 것을 그대로
   읽어 쓰고, 여기서는 이 화면에서만 달라지는 것만 덮어쓴다.

   값은 모두 시안 1920 기준이며 clamp(최소, N vw, 시안값) 으로 줄어든다.
   (N = 시안값 ÷ 1920 × 100)

   1. 배너에서 달라지는 것
   2. 주요 구축 시스템
   3. 안내 띠 · 제작 프로세스 자리
   4. 웹비스타만의 노하우
   5. 기대 효과
   6. 좁은 화면
   ============================================================ */

/* ============================================================
   1. 배너 — 검정 바탕 + 시안 그림 한 장
   ============================================================ */
.sv-hero--system {
	background: #000;
	/* 갈래 타일이 없으므로 아래를 더 비운다 — 설명 아랫선 575 에서 배너 끝 720 까지 145 */
	padding-bottom: clamp(70px, 7.552vw, 145px);
}
/* 빛 그림이 아니라 시안(903:7460)을 통째로 내보낸 그림을 깐다.
   1918×720 이라 배너를 꽉 채운다 — 위로 끌어올릴 일이 없다. */
.sv-hero--system .sv-hero__glow {
	aspect-ratio: 1918 / 720;
	margin-top: 0;
	background-image: url("../img/service/sys-hero.png");
}

/* 제목 — 시안 807:2477 (알약 아랫선 154 에서 305 까지 151) */
.sv-hero--system .sv-hero__title {
	margin-top: clamp(64px, 7.865vw, 151px);
	line-height: 1.4;
}

/* 설명 칸 안에 굵은 한 줄(sys-sub)과 본 설명(sys-lead)이 함께 들어 있다 */
.sv-hero--system .sv-hero__lead {
	margin-top: clamp(10px, .99vw, 19px);   /* 제목 아랫선 423 → 442 */
	max-width: none;
}
/* 굵은 한 줄 — 32 · #c9bfff (시안 807:2479) */
.sys-sub {
	display: block;
	margin: 0 0 clamp(12px, 1.25vw, 24px);   /* 아랫선 493 → 설명 517 */
	font-size: clamp(17px, 1.667vw, 32px);
	font-weight: 500;
	line-height: 1.6;
	color: #c9bfff;
	word-break: keep-all;
}
.sys-sub em { font-style: normal; font-weight: 800; }
/* 본 설명 — 18 · 흰색 70% (시안 807:2478) */
.sys-lead {
	display: block;
	font-size: clamp(14px, .938vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	opacity: .7;
}

/* ============================================================
   2. 주요 구축 시스템 — 480×220 여섯 장 (시안 807:2258~2298)
   ============================================================ */
.sys-h2 { margin-top: clamp(42px, 4.115vw, 79px); }   /* 배너 아래 79 */

.sys-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 1.042vw, 20px);
	margin: clamp(10px, .885vw, 17px) 0 0;   /* 제목 아래 17 */
	padding: 0;
	list-style: none;
}
.sys-card {
	position: relative;
	min-height: clamp(170px, 11.458vw, 220px);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
/* 바탕은 한 칸 걸러 두 가지가 번갈아 온다 (시안 807:2287 · 807:2266) */
.sys-card:nth-child(odd)  { background-image: linear-gradient(130.027deg, #dde8f8 0%, #f0f3fc 101.19%); }
.sys-card:nth-child(even) { background-image: linear-gradient(130.027deg, #e3e5ed 0%, #f0f3fc 101.19%); }

.sys-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 34px -14px rgba(97, 54, 217, .28);
}
/* 마우스가 얹힌 자리에 옅은 빛이 번진다 (자리값은 service-system.js 가 넣는다) */
.sys-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .75), transparent 62%);
	pointer-events: none;
	transition: opacity .35s ease;
}
.sys-card:hover::after { opacity: 1; }
.sys-card__no, .sys-card__t, .sys-card__ico, .sys-card__box { z-index: 1; }

.sys-card__no {
	position: absolute;
	left: clamp(14px, 1.458vw, 28px);
	top: clamp(16px, 1.719vw, 33px);
	margin: 0;
	font-family: Montserrat, "Pretendard Variable", Pretendard, sans-serif;
	font-size: clamp(10px, .625vw, 12px);
	font-weight: 600;
	line-height: 1.6;
	color: #6136d9;
}
.sys-card__t {
	position: absolute;
	left: clamp(14px, 1.458vw, 28px);
	right: clamp(46px, 3.854vw, 74px);
	top: clamp(28px, 2.708vw, 52px);
	margin: 0;
	font-size: clamp(17px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.sys-card__ico {
	position: absolute;
	right: clamp(14px, 1.563vw, 30px);
	top: clamp(30px, 2.865vw, 55px);
	display: block;
	width: clamp(24px, 1.667vw, 32px);
	height: clamp(24px, 1.667vw, 32px);
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.sys-card:hover .sys-card__ico { transform: scale(1.18) rotate(-6deg); }

/* 안쪽 흰 상자 — 420×80, 흐림 유리 (시안 807:2288) */
.sys-card__box {
	position: absolute;
	left: clamp(12px, 1.563vw, 30px);
	right: clamp(12px, 1.563vw, 30px);
	top: clamp(76px, 5.417vw, 104px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(60px, 4.167vw, 80px);
	padding: clamp(6px, .521vw, 10px) clamp(10px, .938vw, 18px);
	border: 1px solid #fff;
	border-radius: 8px;
	background: rgba(255, 255, 255, .6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	font-size: clamp(11px, .729vw, 14px);
	font-weight: 400;
	line-height: 1.4;
	color: #000;
	word-break: keep-all;
}
.sys-card__box span { display: block; }

/* ============================================================
   3. 안내 띠 · 제작 프로세스 자리 (시안 807:2544 · 807:2480)
   ============================================================ */
.sys-note {
	display: flex;
	align-items: center;
	min-height: clamp(42px, 2.708vw, 52px);
	margin: clamp(16px, 1.563vw, 30px) 0 0;   /* 카드 아래 30 */
	padding: clamp(8px, .521vw, 10px) clamp(12px, .99vw, 19px);
	border-radius: 4px;
	background: rgba(236, 236, 236, .99);
	font-size: clamp(11px, .729vw, 14px);
	font-weight: 600;
	line-height: 1.2;
	color: #6136d9;
	word-break: keep-all;
}
.sys-h2--proc { margin-top: clamp(46px, 4.635vw, 89px); }   /* 안내 띠 아래 89 */

/* ============================================================
   4. 웹비스타만의 노하우 — 355×350 넉 장 (시안 807:2546)
   ============================================================ */
.sys-h2--know { margin-top: clamp(40px, 3.906vw, 75px); }   /* 프로세스 아래 75 */

.sys-know {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 1.042vw, 20px);
	margin: clamp(10px, .885vw, 17px) 0 0;   /* 제목 아래 17 */
	padding: 0;
	list-style: none;
}
/* 그림 한 장 안에 유리판·빛번짐이 다 들어 있다 — 시안을 그대로 내보낸 것 */
.sys-know__vis {
	display: block;
	border-radius: clamp(10px, .833vw, 16px);
	overflow: hidden;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.sys-know__vis img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 355 / 350;
	object-fit: cover;
}
.sys-know li:hover .sys-know__vis {
	transform: translateY(-8px);
	box-shadow: 0 22px 38px -18px rgba(97, 54, 217, .4);
}
.sys-know__t {
	margin: clamp(9px, .885vw, 17px) 0 0;   /* 그림 아래 17 */
	font-size: clamp(17px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.sys-know__p {
	margin: clamp(4px, .365vw, 7px) 0 0;
	font-size: clamp(11px, .729vw, 14px);
	font-weight: 400;
	line-height: 1.4;
	color: #000;
	word-break: keep-all;
}
.sys-know__p span { display: block; }

/* ============================================================
   5. 기대 효과 — 1480×400 남보라 판 (시안 807:2638)
   ============================================================ */
.sys-res {
	margin: clamp(56px, 5.573vw, 107px) 0 0;   /* 노하우 아래 107 */
	padding: clamp(28px, 2.708vw, 52px) clamp(24px, 3.646vw, 70px) clamp(30px, 3.49vw, 67px);
	border-radius: clamp(12px, 1.042vw, 20px);
	background: #252146;
}
.sys-res__cap {
	margin: 0;
	font-family: Montserrat, "Pretendard Variable", Pretendard, sans-serif;
	font-size: clamp(13px, .938vw, 18px);
	font-weight: 700;
	line-height: 1.6;
	color: #c9bfff;
	letter-spacing: .02em;
}
.sys-res__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 4.219vw, 81px);
	margin: clamp(16px, 1.51vw, 29px) 0 0;   /* 글자 아랫선 81 → 카드 110 */
	padding: 0;
	list-style: none;
}
.sys-res__list li {
	position: relative;
	min-height: clamp(160px, 11.615vw, 223px);
	padding: clamp(16px, 1.563vw, 30px) clamp(16px, 2.344vw, 45px) clamp(18px, 1.771vw, 34px);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: clamp(14px, 1.25vw, 24px);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: border-color .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1), background .3s ease;
}
.sys-res__list li:hover {
	transform: translateY(-6px);
	border-color: #c9bfff;
	background: rgba(255, 255, 255, .05);
}
/* 64 네모 아이콘 — 배너 갈래 타일과 같은 것을 쓴다 (service.css 의 .sv-cat__*) */
.sys-res__ico {
	position: relative;
	display: block;
	width: clamp(46px, 3.333vw, 64px);
	height: clamp(46px, 3.333vw, 64px);
	border-radius: clamp(12px, .833vw, 16px);
	overflow: hidden;
	box-shadow:
		0 6px 16px -6px rgba(179, 160, 255, .48),
		inset 0 0 1px 0 #b3a0ff,
		inset 0 0 3px 0 rgba(179, 160, 255, .24),
		inset 0 0 12px 0 rgba(179, 160, 255, .12);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.sys-res__list li:hover .sys-res__ico { transform: scale(1.08); }
.sys-res__no {
	position: absolute;
	right: clamp(12px, 2.083vw, 40px);
	top: clamp(10px, 1.042vw, 20px);
	font-family: Montserrat, "Pretendard Variable", Pretendard, sans-serif;
	font-size: clamp(10px, .625vw, 12px);
	font-weight: 600;
	line-height: 1.6;
	color: #6136d9;
}
.sys-res__t {
	display: block;
	margin-top: clamp(14px, 1.458vw, 28px);   /* 아이콘 아랫선 94 → 글자 122 */
	font-size: clamp(16px, 1.354vw, 26px);
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	word-break: keep-all;
}

/* 판 안의 것들이 차례로 올라온다 */
.has-reveal .sys-res.js-reveal .sys-res__list li { opacity: 0; transform: translateY(20px); }
.has-reveal .sys-res.js-reveal.is-in .sys-res__list li {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease var(--delay, 0ms), transform .6s cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms);
}

/* 단추 — 시안 807:2692 (좌우 여백 24) */
.sys-btnwrap { margin-top: clamp(20px, 1.927vw, 37px); }
.sys-btnwrap .btn-gradient { padding: clamp(11px, .833vw, 16px) clamp(16px, 1.25vw, 24px); }

/* ============================================================
   6. 좁은 화면
   ============================================================ */
@media (max-width: 1280px) {
	.sys-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sys-know  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
	.sys-res__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.sys-res__list li { min-height: 0; }
}
@media (max-width: 767px) {
	.sv-hero--system .sv-hero__title br,
	.sys-lead br { display: none; }

	.sys-cards { grid-template-columns: minmax(0, 1fr); }
	.sys-card  { min-height: 0; }
	/* 폰에서는 겹쳐 놓지 않고 위에서 아래로 흐르게 한다 */
	.sys-card__no, .sys-card__t, .sys-card__ico, .sys-card__box { position: static; }
	.sys-card { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 18px 18px 20px; }
	.sys-card__no  { grid-column: 1; }
	.sys-card__ico { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 30px; height: 30px; }
	.sys-card__t   { grid-column: 1; }
	.sys-card__box { grid-column: 1 / -1; margin-top: 12px; }

	.sys-know { grid-template-columns: minmax(0, 1fr); }
	.sys-res  { padding: 24px 18px 26px; }
	.sys-res__t { font-size: 18px; }
}
@media (max-width: 480px) {
.has-reveal .js-hero-up br {display:none;}
}