@charset "utf-8";
/* ============================================================
   Services — SEO/AEO/GEO (Figma 950:4292) · 전시/행사/컨퍼런스 (950:5626)
   ------------------------------------------------------------
   두 화면만 쓰는 모양이라 style.css 를 건드리지 않고 여기 모았다.
   자리·크기는 시안 1920 기준이고, 1px = 0.052083vw 로 환산해 clamp 로 적었다.
   차례
     1. 상단 배너 (두 화면 공통)
     2. 알약 흐름 — 공통 기능 · 진행 과정
     3. SEO/AEO/GEO — 표 · FAQ · 단추
     4. 전시/행사/컨퍼런스 — 갈래 카드 · 안내 띠 · 전문 사이트 띠
     5. 좁은 화면
   ============================================================ */

/* ============================================================
   1. 상단 배너 — 검정 바탕 + 시안 그림 한 장
   ============================================================ */
.sv-hero--ai,
.sv-hero--exhibition {
	/* 시안의 배너 칸은 1920×720 으로 고정이다. 글 길이에 따라 키가 달라지지 않게
	   최소 높이를 그대로 잡는다(바탕 그림도 같은 비율이라 딱 맞는다). */
	min-height: clamp(380px, 37.5vw, 720px);
	background: #000;
	padding-bottom: clamp(40px, 4.167vw, 80px);
	box-sizing: border-box;
}
.sv-hero--ai .sv-hero__glow,
.sv-hero--exhibition .sv-hero__glow {
	aspect-ratio: 1920 / 720;
	margin-top: 0;
	background-size: 100% 100%;
}
.sv-hero--ai .sv-hero__glow         { background-image: url("../img/service/ai-hero.jpg"); }
.sv-hero--exhibition .sv-hero__glow { background-image: url("../img/service/ex-hero.jpg"); }

/* 제목 — 배너 위에서 299 (시안 950:4560 · 950:5726) */
.sv-hero--ai .sv-hero__title,
.sv-hero--exhibition .sv-hero__title {
	margin-top: clamp(78px, 10.677vw, 205px);
	font-weight: 800;
	line-height: 1.4;
}

/* 설명 칸 — 굵은 한 줄 (ai 는 작은 한 줄이 더 붙는다) */
.sv-hero--ai .sv-hero__lead,
.sv-hero--exhibition .sv-hero__lead {
	margin-top: clamp(12px, 1.302vw, 25px);
	max-width: none;
}
.ai-sub,
.ex-sub {
	display: block;
	font-size: clamp(17px, 1.667vw, 32px);
	font-weight: 500;
	line-height: 1.6;
	color: #c9bfff;
	word-break: keep-all;
}
/* 전시 — 굵은 줄이 제목 바로 밑(시안 426)에 붙는다 */
.sv-hero--exhibition .sv-hero__lead { margin-top: clamp(6px, 0.469vw, 9px); }

.ai-lead {
	display: block;
	margin-top: clamp(10px, 1.354vw, 26px);
	font-size: clamp(13px, 0.833vw, 16px);
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
	word-break: keep-all;
}

/* ============================================================
   2. 알약 흐름 — 400×85 알약 넷이 서로 겹쳐 흐른다
      옅은 보라 띠 1480×117 (시안 959:5947 · 950:5622)
   ============================================================ */
.sv-flow {
	position: relative;
	margin-top: clamp(16px, 1.615vw, 31px);
}
.sv-flow::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(84px, 6.094vw, 117px);
	border-radius: 8px;
	background: #f6f7ff;
	opacity: .8;
}
.sv-flow__list {
	position: relative;
	display: flex;
	align-items: flex-end;
	margin: 0;
	padding: 0 clamp(8px, 1.198vw, 23px) clamp(10px, 0.885vw, 17px);
	list-style: none;
}
.sv-flow__item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: center;
}
/* 알약이 서로 겹치도록 — 400 짜리 넷이 1434 안에 들어간다(겹침 57) */
.sv-flow__item + .sv-flow__item { margin-left: clamp(-57px, -2.969vw, -34px); }

/* Step 알약 — 80×40, 아래로 뾰족한 꼬리 */
.sv-flow__no {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(58px, 4.167vw, 80px);
	height: clamp(30px, 2.083vw, 40px);
	margin-bottom: clamp(8px, 0.625vw, 12px);
	border: 1px solid #6136d9;
	border-radius: 300px;
	background: #fff;
	font-size: clamp(11px, 0.729vw, 14px);
	font-weight: 800;
	line-height: 1;
	color: #6136d9;
	white-space: nowrap;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.sv-flow__no::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: clamp(10px, 0.729vw, 14px);
	height: clamp(6px, 0.469vw, 9px);
	background: #6136d9;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
	transition: background .25s ease;
}
/* 흰 알약 — 400×85 */
.sv-flow__box {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: clamp(56px, 4.427vw, 85px);
	padding: 0 clamp(10px, 1.042vw, 20px);
	border: 1px solid #938eff;
	border-radius: 300px;
	background: rgba(255, 255, 255, .9);
	box-sizing: border-box;
	font-size: clamp(13px, 0.833vw, 16px);
	font-weight: 600;
	line-height: 1.4;
	color: #000;
	text-align: center;
	word-break: keep-all;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* 앞선 알약이 뒤를 덮는다 — 시안의 겹침 차례 그대로 */
.sv-flow__item:nth-child(1) { z-index: 4; }
.sv-flow__item:nth-child(2) { z-index: 3; }
.sv-flow__item:nth-child(3) { z-index: 2; }
.sv-flow__item:nth-child(4) { z-index: 1; }

.sv-flow__item:hover .sv-flow__no        { background: #6136d9; color: #fff; transform: translateY(-3px); }
.sv-flow__item:hover .sv-flow__no::after { background: #6136d9; }
.sv-flow__item:hover .sv-flow__box {
	z-index: 5;
	transform: translateY(-3px);
	border-color: #6136d9;
	box-shadow: 0 12px 20px -10px rgba(97, 54, 217, .4);
}

/* Step 알약이 없는 판(공통 기능) — 띠를 알약 높이에 맞춘다 */
.sv-flow--plain .sv-flow__list { align-items: center; padding-top: clamp(10px, 0.729vw, 14px); }
.sv-flow--plain::before { top: 0; height: auto; }

.has-reveal .sv-flow.js-reveal .sv-flow__item { opacity: 0; transform: translateY(20px); }
.has-reveal .sv-flow.js-reveal.is-in .sv-flow__item {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease var(--delay, 0ms), transform .6s cubic-bezier(.22, 1, .28, 1) var(--delay, 0ms);
}

/* ============================================================
   3. SEO/AEO/GEO
   ============================================================ */
/* 첫 제목은 배너 아래 79 (시안 950:4516) */
.ai-body > .inner > .sv-h2:first-child { margin-top: clamp(40px, 4.115vw, 79px); }

/* ---------- 표 ---------- */
.ai-tbl { margin-top: clamp(14px, 1.354vw, 26px); }

.ai-tbl__head {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(8px, 0.99vw, 19px);
	height: clamp(44px, 3.125vw, 60px);
	padding: 0 clamp(8px, 0.885vw, 17px);
	border-radius: 24px 24px 0 0;
	background: #e0e4fc;
	box-sizing: border-box;
}
.ai-tbl__head span {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(14px, 0.938vw, 18px);
	font-weight: 700;
	color: #000;
}
.ai-tbl__body {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.677vw, 13px);
	padding: clamp(8px, 0.625vw, 12px) clamp(8px, 0.885vw, 17px) clamp(10px, 0.833vw, 16px);
	border-radius: 8px;
	background: rgba(246, 247, 255, .8);
}
.ai-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(8px, 0.99vw, 19px);
}
.ai-row__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(96px, 6.302vw, 121px);
	padding: clamp(10px, 0.729vw, 14px) clamp(16px, 1.458vw, 28px);
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
}
/* 구분 칸 — 이름과 영문 풀이름을 가운데로 */
.ai-row__name {
	align-items: center;
	gap: clamp(2px, 0.208vw, 4px);
	text-align: center;
}
.ai-row__name b {
	font-size: clamp(17px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	color: #6136d9;
	white-space: nowrap;
}
.ai-row__name b span { margin-left: .4em; }
.ai-row__name em {
	font-style: normal;
	font-size: clamp(11px, 0.729vw, 14px);
	font-weight: 400;
	line-height: 1.4;
	color: #000;
}
/* 개념 · 목표 */
.ai-row__what p {
	margin: 0;
	font-size: clamp(13px, 0.833vw, 16px);
	font-weight: 500;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.ai-row__what p span { display: block; }
.ai-row__aim {
	display: flex;
	align-items: center;
	gap: clamp(6px, 0.521vw, 10px);
	margin-top: clamp(8px, 0.833vw, 16px) !important;
	color: #6136d9 !important;
}
.ai-row__aim img {
	flex: none;
	width: clamp(22px, 1.667vw, 32px);
	height: clamp(22px, 1.667vw, 32px);
}
/* 웹비스타 서비스 — 점 목록 */
.ai-row__do ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}
.ai-row__do li {
	font-size: clamp(13px, 0.833vw, 16px);
	font-weight: 500;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.ai-note {
	margin: clamp(12px, 0.99vw, 19px) 0 0;
	font-size: clamp(12px, 0.729vw, 14px);
	font-weight: 400;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
/* 진행 과정 설명 */
.ai-lead2 {
	margin: clamp(2px, 0.208vw, 4px) 0 0;
	font-size: clamp(14px, 0.938vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}

/* ---------- 자주 묻는 질문 ---------- */
.ai-faq {
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 0.26vw, 5px);
	margin: clamp(12px, 0.99vw, 19px) 0 0;
	padding: 0;
	list-style: none;
}
.ai-faq__row {
	/* 물음이 윗줄, 답이 아랫줄. Q 알과 꺾쇠는 두 줄에 걸쳐 가운데로. */
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(10px, 0.885vw, 17px);
	row-gap: clamp(8px, 0.625vw, 12px);
	min-height: clamp(66px, 4.688vw, 90px);
	padding: clamp(10px, 0.833vw, 16px) clamp(14px, 1.198vw, 23px) clamp(10px, 0.833vw, 16px) clamp(14px, 1.563vw, 30px);
	border: 1px solid #ececec;
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ai-faq__row:hover {
	border-color: #938eff;
	box-shadow: 0 12px 24px -14px rgba(97, 54, 217, .45);
	transform: translateY(-2px);
}
.ai-faq__q {
	position: relative;
	grid-column: 1;
	grid-row: 1 / 3;
	width: clamp(40px, 2.813vw, 54px);
	height: clamp(40px, 2.813vw, 54px);
}
.ai-faq__q img { width: 100%; height: 100%; }
.ai-faq__q em {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	font-style: normal;
	font-size: clamp(17px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-align: center;
	transform: translateY(-50%);
}
.ai-faq__t {
	grid-column: 2;
	grid-row: 1;
	font-size: clamp(14px, 0.938vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.ai-faq__a {
	display: flex;
	grid-column: 2;
	grid-row: 2;
	align-items: flex-start;
	gap: clamp(6px, 0.521vw, 10px);
	min-height: clamp(38px, 2.604vw, 50px);
	margin-left: 0;
	padding: clamp(8px, 0.625vw, 12px) clamp(12px, 1.042vw, 20px);
	/* 여러 줄이 되므로 알약 대신 둥근 네모로 */
	border-radius: 16px;
	background: #ddd5fe;
	box-sizing: border-box;
}
.ai-faq__a i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: clamp(26px, 1.771vw, 34px);
	height: clamp(26px, 1.771vw, 34px);
	border-radius: 50%;
	background: #6136d9;
	font-style: normal;
	font-size: clamp(12px, 0.833vw, 16px);
	font-weight: 700;
	line-height: 1;
	color: #fff;
}
.ai-faq__a > span {
	font-size: clamp(12px, 0.833vw, 16px);
	font-weight: 600;
	line-height: 1.2;
	color: #6136d9;
	word-break: keep-all;
}
.ai-faq__go {
	grid-column: 3;
	grid-row: 1 / 3;
	width: clamp(18px, 1.25vw, 24px);
	height: clamp(18px, 1.25vw, 24px);
	margin-left: auto;
}

/* ---------- 단추 셋 ---------- */
.ai-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.146vw, 22px);
	margin: clamp(30px, 3.177vw, 61px) 0 0;
}
.ai-btn { width: clamp(220px, 16.146vw, 310px); }

/* ============================================================
   4. 전시/행사/컨퍼런스
   ============================================================ */
/* ---------- 갈래 석 장 ---------- */
.ex-kinds {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.042vw, 20px);
	margin: clamp(48px, 5.052vw, 97px) 0 0;
	padding: 0;
	list-style: none;
}
.ex-kind {
	position: relative;
	min-height: clamp(150px, 11.458vw, 220px);
	padding: clamp(16px, 1.458vw, 28px) clamp(16px, 1.458vw, 28px) clamp(14px, 1.25vw, 24px);
	border-radius: 8px;
	background: linear-gradient(130deg, #dde8f8 0%, #f0f3fc 101%);
	box-sizing: border-box;
	transition: transform .25s ease, box-shadow .25s ease;
}
.ex-kind:nth-child(2) { background: linear-gradient(130deg, #e3e5ed 0%, #f0f3fc 101%); }
.ex-kind:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 36px -22px rgba(30, 24, 80, .45);
}
.ex-kind__no {
	margin: 0;
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(11px, 0.625vw, 12px);
	font-weight: 600;
	line-height: 1.6;
	color: #6136d9;
}
.ex-kind__t {
	margin: clamp(2px, 0.26vw, 5px) 0 0;
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.ex-kind__ico {
	position: absolute;
	right: clamp(16px, 1.563vw, 30px);
	top: clamp(22px, 2.865vw, 55px);
	width: clamp(24px, 1.667vw, 32px);
	height: clamp(24px, 1.667vw, 32px);
}
/* 유리 칸 — 420×80 */
.ex-kind__box {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: clamp(58px, 4.167vw, 80px);
	margin-top: clamp(12px, 1.302vw, 25px);
	padding: clamp(10px, 0.833vw, 16px) clamp(14px, 1.042vw, 20px);
	border: 1px solid #fff;
	border-radius: 8px;
	background: rgba(255, 255, 255, .6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-sizing: border-box;
	font-size: clamp(12px, 0.729vw, 14px);
	font-weight: 400;
	line-height: 1.4;
	color: #000;
	word-break: keep-all;
}

/* 갈래 카드 아래 제목 — 시안 55 */
.ex-body .sv-h2 { margin-top: clamp(28px, 2.865vw, 55px); }

/* ---------- 안내 글 · 어두운 띠 ---------- */
.ex-note {
	margin: clamp(14px, 1.302vw, 25px) 0 0;
	font-size: clamp(14px, 0.938vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: #000;
	word-break: keep-all;
}
.ex-band {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: clamp(320px, 41.563vw, 798px);
	min-height: clamp(52px, 3.646vw, 70px);
	margin: clamp(18px, 1.823vw, 35px) auto 0;
	padding: clamp(10px, 0.833vw, 16px) clamp(14px, 1.25vw, 24px);
	background: #252146;
	box-sizing: border-box;
	font-size: clamp(14px, 1.25vw, 24px);
	font-weight: 800;
	line-height: 1.6;
	color: #fff;
	text-align: center;
	word-break: keep-all;
}

/* ---------- 전문 사이트 띠 ---------- */
.ex-go {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 1.667vw, 32px);
	min-height: clamp(150px, 10.521vw, 202px);
	margin-top: clamp(30px, 3.073vw, 59px);
	padding: clamp(24px, 2.292vw, 44px) clamp(24px, 3.906vw, 75px);
	border-radius: 8px;
	background: linear-gradient(105deg, #eeeef4 0%, #dcdcf8 34%, #cdd0ff 66%, #c2c5ff 100%);
	box-sizing: border-box;
	overflow: hidden;
}
/* 왼쪽 위 빛무리 */
.ex-go::before {
	content: "";
	position: absolute;
	left: -3.4%;
	top: -130%;
	width: 34.2%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}
.ex-go__t {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(19px, 1.667vw, 32px);
	font-weight: 400;
	line-height: 1.3;
	color: #4a4099;
	word-break: keep-all;
}
.ex-go__t b { font-weight: 700; }
.ex-go__btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	gap: clamp(8px, 0.625vw, 12px);
	padding: clamp(12px, 0.833vw, 16px) clamp(20px, 2.083vw, 40px);
	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: #fff;
	font-size: clamp(13px, 0.938vw, 18px);
	font-weight: 700;
	line-height: 1.56;
	white-space: nowrap;
	transition: transform .25s ease, box-shadow .25s ease;
}
.ex-go__btn img {
	flex: none;
	width: clamp(22px, 1.667vw, 32px);
	height: clamp(22px, 1.667vw, 32px);
}
.ex-go__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22), 0 0 0 6px rgba(152, 49, 211, .12);
}

/* ============================================================
   5. 좁은 화면
   ============================================================ */
@media (max-width: 1024px) {
	/* 표 — 세 칸을 한 줄씩 쌓는다. 머리글은 감추고 칸마다 이름표를 붙인다 */
	.ai-tbl__head { display: none; }
	.ai-tbl__body { gap: 12px; padding: 12px; }
	.ai-row { grid-template-columns: 1fr; gap: 8px; }
	.ai-row__cell { min-height: 0; }
	.ai-row__name { align-items: flex-start; text-align: left; }
	.ai-row__what::before,
	.ai-row__do::before {
		display: block;
		margin-bottom: 6px;
		font-size: 12px;
		font-weight: 700;
		color: #6136d9;
	}
	.ai-row__what::before { content: "개념 · 목표"; }
	.ai-row__do::before   { content: "웹비스타 서비스"; }

	/* FAQ — 좁은 화면에서는 안쪽 여백만 줄인다(짜임새는 넓은 화면과 같다) */
	.ai-faq__row { padding: 16px; column-gap: 12px; }

	.ai-btn { width: 100%; max-width: 360px; }

	/* 갈래 카드 — 한 줄에 하나 */
	.ex-kinds { grid-template-columns: 1fr; }

	/* 알약 흐름 — 겹침을 풀고 세로로 쌓는다 */
	.sv-flow::before { display: none; }
	.sv-flow .sv-flow__list,
	.sv-flow--plain .sv-flow__list { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; }
	.sv-flow__item { flex: none; }
	.sv-flow__item + .sv-flow__item { margin-left: 0; }
	.sv-flow__box { height: auto; min-height: 56px; padding: 14px 20px; }

	/* 전문 사이트 띠 — 글과 단추를 위아래로 */
	.ex-go { flex-direction: column; align-items: flex-start; }
	.ex-go__btn { width: 100%; white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.sv-flow__no,
	.sv-flow__box,
	.ex-kind,
	.ai-faq__row,
	.ex-go__btn { transition: none; }
}

@media (max-width: 480px) {
	/* 두 줄짜리 짧은 제목이라 폰에서도 시안대로 끊어 준다
	   (공용 규칙은 폰에서 히어로 제목의 <br> 을 접는다) */
	.has-reveal .sv-hero--ai .js-hero-up br,
	.has-reveal .sv-hero--exhibition .js-hero-up br { display: inline; }
}