@charset "utf-8";
/* SEO·AEO·GEO 화면 (service/ai_marketing_.php)
   =========================================================================
   대표 사이트의 것을 그대로 쓴다 — 여기서 새로 정하는 색·글꼴은 없다.
     색   : style.css :root 의 --c-blue(#574CC4) · --c-cyan(#40ddff) · --c-text
     글꼴 : --font-body(Pretendard) · --font-num(Montserrat) · --font-label(Geologica)
     여백 : --gutter · .sv-body > .inner (max 1480)
     단추 : .btn-gradient (style.css)
     연출 : .js-split · .js-reveal · --delay (main.js)

   이 파일에는 이 화면에만 있는 짜임새만 둔다.
   배너(.sv-hero--ai)는 svc2.css 가 이미 맡고 있어 손대지 않는다.

   반응형은 세 번 접는다 — 1180 / 860 / 560.
   글자는 모두 clamp() 라 그 사이에서도 끊기지 않고 줄어든다.               */

.aeo-body {
	--aeo-ink:    #16181d;   /* 본문 검정 — 순검정보다 조금 부드럽게 */
	--aeo-sub:    #5b5c69;   /* 설명 글 */
	--aeo-line:   #e7e8f0;   /* 옅은 선 */
	--aeo-soft:   #f5f6fa;   /* 옅은 바탕 */
	--aeo-dark:   #14151c;   /* 어두운 띠 */
	--aeo-accent: var(--c-blue);
	overflow-x: clip;        /* 넘치는 장식이 가로 스크롤을 만들지 않게 */
}

/* ── 배너 자체 ──────────────────────────────────────────
   설명이 세 줄이 되면서 내용이 배경 그림보다 길어져, 아래에 검정 바탕이
   드러났다(좁은 화면일수록 심해서 390px 에서는 375px 나 보였다).
   그림은 폭에 비례해 높이가 정해지는데(1920:720) 글 높이는 거의 그대로라서다.

     · 그림이 **배너 전체를 덮게** 한다 — 비율 대신 높이를 100% 로.
       늘리지 않고 잘라 채우므로(cover) 빛 모양이 찌그러지지 않는다.
     · 글을 위로 올려 빛 한가운데에 놓는다.

   이 파일은 ai_marketing_.php 에서만 읽히므로, 지금 열려 있는
   ai_marketing.php 와 전시회 배너는 건드리지 않는다.                      */
.sv-hero--ai .sv-hero__glow {
	aspect-ratio: auto;
	height: 100%;
	background-size: cover;
	background-position: 50% 0;
}
.sv-hero--ai .sv-hero__title { margin-top: clamp(56px, 7.6vw, 146px); }

/* ── 배너에 얹는 것 ─────────────────────────────────── */
/* 「AI가 인용하는」에 색을 준다. 글자에만 칠하므로 배경은 건드리지 않는다 */
.aeo-hl {
	background: linear-gradient(92deg, #7b6bff 0%, #c46bff 52%, #ff6bc6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.sv-hero__lead .aeo-hero__lead {
	display: block;
	margin: 0 0 clamp(20px, 2vw, 34px);
}
.aeo-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;   /* 배너 글이 가운데 정렬이라 단추도 가운데로 */
	gap: clamp(10px, 1vw, 16px);
}
/* 글이 길어서 고정 폭(.btn-gradient 의 250px)에 안 들어간다 — 내용에 맞춘다 */
.aeo-hero__cta .btn-gradient {
	width: auto;
	min-width: clamp(170px, 14vw, 210px);
	max-width: 100%;
	padding-left: clamp(20px, 2vw, 34px);
	padding-right: clamp(20px, 2vw, 34px);
	text-align: center;
	word-break: keep-all;
}
/* 곁들이 단추 — 배너가 어두우므로 흰 테두리로 */
.aeo-cta2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(150px, 12.5vw, 190px);
	min-height: 56px;
	padding: 14px 22px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 8px;
	color: #fff;
	font-size: clamp(13px, 1.1vw, 16px);
	font-weight: 600;
	transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.aeo-cta2:hover {
	border-color: rgba(255, 255, 255, .8);
	background: rgba(255, 255, 255, .08);
	transform: translateY(-3px);
}
.aeo-hero__note {
	display: block;
	margin: clamp(14px, 1.4vw, 22px) 0 0;
	color: rgba(255, 255, 255, .58);
	font-size: clamp(12px, .95vw, 14px);
	line-height: 1.7;
}

/* ── 공통 — 제목 · 설명 ─────────────────────────────────
   칸마다 위에 붙어 있던 작은 영문 머리말(THREE LAYERS·PLANS …)은 걷어냈다.
   그 글이 칸과 칸 사이 여백도 만들고 있었으므로, 이제 제목이 그 몫을 갖는다
   — .sv-h2 가 원래 들고 있는 위 여백(48~91)을 그대로 쓰면 된다. */
.aeo-h2 { letter-spacing: -.035em; line-height: 1.34; }
/* 어두운 띠 안에서는 띠 자체의 안쪽 여백이 있어 제목을 맨 위에 붙인다 */
.aeo-band .aeo-h2 { margin-top: 0; }
.aeo-h2--on-dark { color: #fff; }

.aeo-lead {
	margin: clamp(12px, 1.1vw, 18px) 0 clamp(26px, 2.4vw, 44px);
	color: var(--aeo-sub);
	font-size: clamp(14px, 1.15vw, 18px);
	line-height: 1.75;
}
.aeo-lead--on-dark { color: rgba(255, 255, 255, .62); }

/* ── 01 왜 지금인가 — 화면 끝까지 가는 어두운 띠 ─────── */
/* .sv-body 가 좌우 --gutter 를 주고 있어, 그만큼 되물려 화면 끝까지 넓힌다 */
.aeo-band {
	margin: clamp(56px, 5.2vw, 100px) calc(-1 * var(--gutter)) 0;
	padding: clamp(52px, 5.2vw, 100px) var(--gutter);
	background: var(--aeo-dark);
	position: relative;
	overflow: hidden;
}
/* 아주 옅은 빛 — 배너의 빛과 같은 결 */
.aeo-band::before {
	content: "";
	position: absolute;
	top: -40%;
	left: 50%;
	width: min(1100px, 120%);
	aspect-ratio: 1 / 1;
	/* --bx 는 svc-aeo.js 가 마우스를 따라 아주 조금씩 올려 준다 */
	transform: translateX(calc(-50% + var(--bx, 0px)));
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
	background: radial-gradient(circle, rgba(105, 86, 255, .26) 0%, rgba(20, 21, 28, 0) 62%);
	pointer-events: none;
}
/* 띠는 화면 끝까지 가지만 **안쪽 글은 아래 칸들과 같은 폭**이어야 한다.
   .sv-body > .inner 규칙은 바로 아래 자식에만 걸려서 여기까지 오지 않는다 —
   그대로 두면 이 띠만 혼자 넓어 보인다. */
.aeo-band > .inner {
	position: relative;
	max-width: 1480px;
	margin: 0 auto;
}

.aeo-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aeo-stat {
	padding: clamp(22px, 2.2vw, 40px) clamp(18px, 1.8vw, 32px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	background: rgba(255, 255, 255, .035);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1),
	            border-color .35s ease, background-color .35s ease;
}
.aeo-stat:hover {
	transform: translateY(-6px);
	border-color: rgba(143, 134, 255, .5);
	background: rgba(255, 255, 255, .06);
}
.aeo-stat__num {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin: 0 0 clamp(12px, 1.2vw, 20px);
	color: #fff;
	font-family: var(--font-num);
	line-height: 1;
}
.aeo-stat__num b { font-size: clamp(38px, 3.9vw, 72px); font-weight: 800; letter-spacing: -.04em; }
.aeo-stat__num i { font-size: clamp(16px, 1.5vw, 26px); font-weight: 700; font-style: normal; }
.aeo-stat__t {
	margin: 0 0 clamp(10px, 1vw, 16px);
	color: rgba(255, 255, 255, .8);
	font-size: clamp(13px, 1.02vw, 16px);
	line-height: 1.68;
}
.aeo-stat__sub {
	margin: 0;
	padding-top: clamp(10px, 1vw, 16px);
	border-top: 1px solid rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .38);
	font-size: clamp(11px, .85vw, 13px);
}
.aeo-band__close {
	margin: clamp(26px, 2.4vw, 44px) 0 0;
	color: rgba(255, 255, 255, .62);
	font-size: clamp(13px, 1.1vw, 17px);
	line-height: 1.8;
}
.aeo-band__close b { color: #fff; font-weight: 700; }

/* ── 02 세 가지 층 ───────────────────────────────────── */
.aeo-layers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aeo-layer {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.4vw, 42px) clamp(20px, 2vw, 34px);
	border: 1px solid var(--aeo-line);
	border-radius: 14px;
	background: #fff;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
.aeo-layer:hover {
	transform: translateY(-6px);
	border-color: #cdc7ff;
	box-shadow: 0 18px 44px rgba(87, 76, 196, .14);
}
/* 세 번째 층만 눈에 띄게 — 새로 생긴 층이라는 뜻 */
.aeo-layer:nth-child(3) {
	border-color: #d6cfff;
	background: linear-gradient(170deg, #f7f5ff 0%, #ffffff 58%);
}
/* ── 카드 아이콘 — 그림 파일 없이 선으로만 그린다 ───── */
/* 화면에 들어오면 선이 스스로 그려지고, 마우스를 얹으면 살짝 커진다.
   선 길이는 모양마다 달라 넉넉한 값(260)을 준다 — 짧은 선은 먼저 끝난다. */
.aeo-layer__ico,
.aeo-scope__ico,
.aeo-plan__ico {
	position: absolute;
	top: clamp(22px, 2.2vw, 38px);
	right: clamp(20px, 2vw, 34px);
	width: clamp(42px, 3.6vw, 56px);
	height: clamp(42px, 3.6vw, 56px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: linear-gradient(150deg, #efecff 0%, #f8f5ff 100%);
	color: var(--aeo-accent);
	transition: transform .45s cubic-bezier(.22, 1, .36, 1),
	            background-color .35s ease, box-shadow .35s ease;
}
.aeo-layer__ico svg,
.aeo-scope__ico svg,
.aeo-plan__ico svg { width: 58%; height: 58%; display: block; overflow: visible; }

.aeo-layer:hover .aeo-layer__ico,
.aeo-scope__item:hover .aeo-scope__ico,
.aeo-plan:hover .aeo-plan__ico {
	transform: translateY(-3px) rotate(-6deg) scale(1.08);
	box-shadow: 0 10px 22px rgba(87, 76, 196, .22);
}

/* 선이 스스로 그려진다 */
@keyframes aeoDraw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes aeoPop  { from { opacity: 0; transform: scale(.72) rotate(-14deg); }
                      to  { opacity: 1; transform: none; } }

.has-reveal .aeo-layer__ico,
.has-reveal .aeo-scope__ico,
.has-reveal .aeo-plan__ico { opacity: 0; }
.has-reveal .aeo-layer.is-in .aeo-layer__ico,
.has-reveal .aeo-scope__item.is-in .aeo-scope__ico,
.has-reveal .aeo-plan.is-in .aeo-plan__ico {
	animation: aeoPop .55s cubic-bezier(.22, 1.4, .4, 1) both;
	animation-delay: calc(var(--delay, 0ms) + 120ms);
}
.has-reveal .aeo-layer__ico svg > *,
.has-reveal .aeo-scope__ico svg > *,
.has-reveal .aeo-plan__ico svg > * { stroke-dasharray: 260; stroke-dashoffset: 260; }
.has-reveal .aeo-layer.is-in .aeo-layer__ico svg > *,
.has-reveal .aeo-scope__item.is-in .aeo-scope__ico svg > *,
.has-reveal .aeo-plan.is-in .aeo-plan__ico svg > * {
	animation: aeoDraw 1.1s cubic-bezier(.4, 0, .2, 1) both;
	animation-delay: calc(var(--delay, 0ms) + 260ms);
}

/* 아이콘이 들어오면서 제목 줄이 좁아지지 않게 자리를 비워 둔다 */
.aeo-layer__abbr,
.aeo-layer__name,
.aeo-scope__no,
.aeo-scope__t { padding-right: clamp(52px, 4.6vw, 72px); }
.aeo-layer__abbr {
	margin: 0;
	color: var(--aeo-accent);
	font-family: var(--font-label);
	font-size: clamp(22px, 2vw, 34px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
}
.aeo-layer__name {
	margin: 6px 0 clamp(14px, 1.4vw, 22px);
	color: var(--aeo-ink);
	font-size: clamp(14px, 1.15vw, 18px);
	font-weight: 700;
}
.aeo-layer__what {
	margin: 0 0 clamp(16px, 1.6vw, 26px);
	color: var(--aeo-ink);
	font-size: clamp(14px, 1.2vw, 19px);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -.02em;
}
.aeo-layer__meta {
	margin: 0 0 clamp(14px, 1.3vw, 22px);
	padding: clamp(14px, 1.3vw, 20px) 0 0;
	border-top: 1px solid var(--aeo-line);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px clamp(10px, 1vw, 16px);
	font-size: clamp(12px, .95vw, 14px);
}
.aeo-layer__meta dt { color: #9a9bab; font-weight: 600; white-space: nowrap; }
.aeo-layer__meta dd { margin: 0; color: var(--aeo-sub); line-height: 1.6; }
.aeo-layer__tip {
	margin: auto 0 0;
	padding-top: clamp(12px, 1.2vw, 18px);
	color: #8b8ca0;
	font-size: clamp(11.5px, .9vw, 13px);
	line-height: 1.6;
}

/* 여러 줄짜리 잔글씨 묶음 */
.aeo-note {
	margin: clamp(18px, 1.8vw, 30px) 0 0;
	padding: clamp(16px, 1.6vw, 26px) clamp(18px, 1.8vw, 28px);
	border-radius: 12px;
	background: var(--aeo-soft);
	color: var(--aeo-sub);
	font-size: clamp(12.5px, 1vw, 15px);
	line-height: 1.75;
}
.aeo-note span { display: block; }
.aeo-note span + span { margin-top: 6px; }
.aeo-note--one { text-align: center; }
.aeo-note b { color: var(--aeo-accent); font-weight: 700; }

/* ── 03 실제로 하는 일 ───────────────────────────────── */
.aeo-scope {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.aeo-scope__item {
	position: relative;
	padding: clamp(24px, 2.4vw, 40px) clamp(20px, 2vw, 34px);
	border: 1px solid var(--aeo-line);
	border-radius: 14px;
	background: #fff;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.aeo-scope__item:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(20, 21, 28, .08); }
.aeo-scope__no {
	margin: 0 0 clamp(10px, 1vw, 16px);
	color: #c9cad8;
	font-family: var(--font-num);
	font-size: clamp(22px, 2vw, 34px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	transition: color .35s ease;
}
.aeo-scope__item:hover .aeo-scope__no { color: var(--aeo-accent); }
.aeo-scope__t {
	margin: 0 0 clamp(14px, 1.4vw, 22px);
	color: var(--aeo-ink);
	font-size: clamp(16px, 1.35vw, 22px);
	font-weight: 700;
	letter-spacing: -.03em;
}
.aeo-scope__list { margin: 0; padding: 0; list-style: none; }
.aeo-scope__list li {
	position: relative;
	padding: 0 0 0 20px;
	color: var(--aeo-sub);
	font-size: clamp(12.5px, 1vw, 15px);
	line-height: 1.8;
}
.aeo-scope__list li + li { margin-top: 6px; }
/* 글머리 점 — 그림 없이 CSS 로만 */
.aeo-scope__list li::before {
	content: "";
	position: absolute;
	top: .72em;
	left: 4px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #c9cad8;
	transition: background-color .35s ease;
}
.aeo-scope__item:hover .aeo-scope__list li::before { background: var(--aeo-accent); }

/* ── 04 웹비스타인 이유 ──────────────────────────────── */
.aeo-why {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aeo-why__card {
	padding: clamp(24px, 2.4vw, 38px) clamp(18px, 1.8vw, 28px);
	border-radius: 14px;
	background: linear-gradient(160deg, #eef1fb 0%, #f8f9fd 100%);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.aeo-why__card:nth-child(2n) { background: linear-gradient(160deg, #f3eefb 0%, #fbf9fe 100%); }
.aeo-why__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20, 21, 28, .1); }
.aeo-why__t {
	margin: 0 0 clamp(12px, 1.2vw, 18px);
	color: var(--aeo-ink);
	font-size: clamp(15px, 1.3vw, 21px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.035em;
}
.aeo-why__d {
	margin: 0;
	color: var(--aeo-sub);
	font-size: clamp(12.5px, 1vw, 15px);
	line-height: 1.75;
}

/* ── 05 진행 과정 — 가로 한 줄 ──────────────────────── */
/* 뼈대는 svc2.css 의 .sv-flow 를 그대로 쓴다(지금 열려 있는 화면과 같은 모양).
   그쪽은 네 칸 기준이라, 다섯 칸에 필요한 것만 여기서 보탠다. */
.aeo-flow .sv-flow__item:nth-child(5) { z-index: 0; }

/* 알약 안에 이름과 기간을 두 줄로 */
.aeo-flow .sv-flow__box {
	flex-direction: column;
	gap: 3px;
	line-height: 1.35;
}
.aeo-flow .sv-flow__box b { font-weight: 700; }
.aeo-flow .sv-flow__box i {
	font-style: normal;
	font-weight: 600;
	font-size: clamp(10.5px, .72vw, 13px);
	color: #8b8ca0;
}

/* 좁은 화면 — svc2.css 는 1024 아래에서 이 판을 **세로로 세운다**
   (.sv-flow .sv-flow__list { flex-direction: column }). 다섯 칸을 그렇게 세우면
   다시 길어지므로, 가로로 되돌리고 줄만 바꿔 접는다. */
@media (max-width: 1024px) {
	.aeo-flow .sv-flow__list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: center;
		gap: 14px 10px;
		padding: 0 0 4px;
	}
	.aeo-flow .sv-flow__item { flex: 0 1 calc(33.333% - 7px); }
	.aeo-flow .sv-flow__item + .sv-flow__item { margin-left: 0; }
	.aeo-flow .sv-flow__box {
		height: auto;
		min-height: 62px;
		padding: 12px 14px;
		border-radius: 16px;
	}
}
@media (max-width: 560px) {
	.aeo-flow .sv-flow__item { flex: 0 1 calc(50% - 5px); }
}

/* ── 06 상품 구성 ────────────────────────────────────── */
.aeo-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 22px);
	margin: 0;
	padding: clamp(16px, 1.4vw, 22px) 0 0;   /* 「가장 많이 선택」 띠가 위로 걸치므로 */
	list-style: none;
	align-items: stretch;
}
.aeo-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 2.6vw, 44px) clamp(20px, 2vw, 34px);
	border: 1px solid var(--aeo-line);
	border-radius: 14px;
	background: #fff;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
.aeo-plan:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20, 21, 28, .1); }
.aeo-plan.is-best {
	border-color: var(--aeo-accent);
	box-shadow: 0 10px 34px rgba(87, 76, 196, .16);
}
.aeo-plan__best {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--aeo-accent);
	color: #fff;
	font-size: clamp(11px, .85vw, 13px);
	font-weight: 700;
	white-space: nowrap;
}
.aeo-plan__t {
	margin: 0 0 6px;
	color: var(--aeo-ink);
	font-size: clamp(17px, 1.45vw, 24px);
	font-weight: 800;
	letter-spacing: -.035em;
}
.aeo-plan__for {
	margin: 0 0 clamp(16px, 1.6vw, 26px);
	color: var(--aeo-sub);
	font-size: clamp(12.5px, 1vw, 15px);
	line-height: 1.6;
}
.aeo-plan__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(18px, 1.8vw, 28px);
	padding-bottom: clamp(18px, 1.8vw, 28px);
	border-bottom: 1px solid var(--aeo-line);
}
.aeo-plan__price b {
	color: var(--aeo-ink);
	font-size: clamp(18px, 1.55vw, 26px);
	font-weight: 800;
	letter-spacing: -.035em;
}
.aeo-plan__price i { color: #9a9bab; font-size: clamp(12px, .95vw, 14px); font-style: normal; }
.aeo-plan__list { margin: 0 0 clamp(22px, 2.2vw, 34px); padding: 0; list-style: none; }
.aeo-plan__list li {
	position: relative;
	padding: 0 0 0 24px;
	color: var(--aeo-sub);
	font-size: clamp(12.5px, 1vw, 15px);
	line-height: 1.8;
}
.aeo-plan__list li + li { margin-top: 8px; }
/* 체크 표시 — 그림 없이 두 획으로 */
.aeo-plan__list li::before,
.aeo-plan__list li::after {
	content: "";
	position: absolute;
	background: var(--aeo-accent);
	border-radius: 1px;
}
.aeo-plan__list li::before { top: .95em; left: 4px; width: 5px;  height: 2px; transform: rotate(45deg); }
.aeo-plan__list li::after  { top: .78em; left: 7px; width: 10px; height: 2px; transform: rotate(-50deg); }
.aeo-plan__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	min-height: 52px;
	padding: 14px 20px;
	border: 1px solid var(--aeo-accent);
	border-radius: 8px;
	color: var(--aeo-accent);
	font-size: clamp(13px, 1.05vw, 16px);
	font-weight: 700;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.aeo-plan__btn:hover { background: var(--aeo-accent); color: #fff; transform: translateY(-2px); }
.aeo-plan.is-best .aeo-plan__btn { background: var(--aeo-accent); color: #fff; }
.aeo-plan.is-best .aeo-plan__btn:hover { filter: brightness(1.12); }

/* ── 07 자주 묻는 질문 ───────────────────────────────── */
.aeo-faq { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--aeo-line); }
.aeo-faq__item { border-bottom: 1px solid var(--aeo-line); }
.aeo-faq h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.aeo-faq__q {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 18px);
	width: 100%;
	min-height: 64px;
	padding: clamp(18px, 1.8vw, 28px) 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
}
.aeo-faq__mark {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #f1f1f7;
	color: var(--aeo-sub);
	font-family: var(--font-label);
	font-size: 12.5px;
	font-weight: 800;
	transition: background-color .3s ease, color .3s ease;
}
.aeo-faq__q[aria-expanded="true"] .aeo-faq__mark { background: var(--aeo-accent); color: #fff; }
.aeo-faq__t {
	flex-grow: 1;
	min-width: 0;
	color: var(--aeo-ink);
	font-size: clamp(14px, 1.2vw, 18px);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.5;
}
/* 여닫는 표시 — 선 두 개로 만든 + 와 − */
.aeo-faq__ico {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.aeo-faq__ico::before,
.aeo-faq__ico::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: #84858f;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}
.aeo-faq__ico::after { transform: rotate(90deg); }
.aeo-faq__q[aria-expanded="true"] .aeo-faq__ico::before { background: var(--aeo-accent); }
.aeo-faq__q[aria-expanded="true"] .aeo-faq__ico::after  { background: var(--aeo-accent); transform: rotate(0deg); }
.aeo-faq__q:hover .aeo-faq__t { color: var(--aeo-accent); }
.aeo-faq__q:focus-visible { outline: 2px solid var(--aeo-accent); outline-offset: 3px; border-radius: 6px; }

.aeo-faq__a { overflow: hidden; }
.aeo-faq__a[hidden] { display: none; }
.aeo-faq__a p {
	margin: 0;
	padding: 0 clamp(30px, 3vw, 42px) clamp(22px, 2.2vw, 32px) clamp(40px, 3.4vw, 46px);
	color: var(--aeo-sub);
	font-size: clamp(13px, 1.05vw, 16px);
	line-height: 1.85;
}
/* 펼쳐질 때 미끄러지듯 — 높이는 js 가 재어 준다 */
.aeo-faq__a.is-anim { transition: height .38s cubic-bezier(.22, 1, .36, 1); }

/* ── 08 마무리 ───────────────────────────────────────── */
.aeo-cta {
	margin: clamp(56px, 5.2vw, 100px) 0 clamp(60px, 5.6vw, 110px);
	padding: clamp(40px, 4vw, 76px) clamp(24px, 2.4vw, 48px);
	border-radius: 18px;
	background: linear-gradient(135deg, #1b1c28 0%, #2b2350 54%, #3a2560 100%);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.aeo-cta::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto;
	height: 140%;
	background: radial-gradient(circle at 50% 0%, rgba(157, 108, 255, .34) 0%, rgba(27, 28, 40, 0) 60%);
	pointer-events: none;
}
.aeo-cta > * { position: relative; }
.aeo-cta__t {
	margin: 0 0 clamp(12px, 1.2vw, 20px);
	color: #fff;
	font-size: clamp(21px, 2vw, 40px);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -.04em;
}
.aeo-cta__d {
	margin: 0 0 clamp(24px, 2.4vw, 40px);
	color: rgba(255, 255, 255, .64);
	font-size: clamp(13px, 1.1vw, 17px);
	line-height: 1.75;
}
.aeo-cta__btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 1.2vw, 22px);
	margin: 0;
}

/* ============================================================
   반응형 — 1180 / 860 / 560
   ============================================================ */
@media (max-width: 1180px) {
	.aeo-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.aeo-stats,
	.aeo-layers,
	.aeo-plans,
	.aeo-scope { grid-template-columns: minmax(0, 1fr); }

	/* 한 줄에 하나씩 쌓이면 띠가 위 글과 겹친다 — 띠가 있는 카드만 안으로 들인다 */
	.aeo-plans { padding-top: 0; }
	.aeo-plan.is-best { padding-top: clamp(46px, 7vw, 60px); }
	.aeo-plan__best { top: clamp(14px, 2.2vw, 20px); transform: translateX(-50%); }
}

@media (max-width: 560px) {
	.aeo-hero__cta { flex-direction: column; align-items: stretch; }
	.aeo-hero__cta .btn-gradient,
	.aeo-cta2 { width: 100%; }

	/* 이유 카드도 한 줄에 하나 — 360px 에서 두 칸은 너무 좁다 */
	.aeo-why { grid-template-columns: minmax(0, 1fr); }

	.aeo-faq__a p { padding-left: 0; padding-right: 0; }
	.aeo-cta__btns { flex-direction: column; }
	.aeo-cta__btns .btn-gradient,
	.aeo-cta__btns .aeo-cta2 { width: 100%; }
}

/* ── 움직임을 줄여 달라고 한 기기에서는 조용히 ───────── */
@media (prefers-reduced-motion: reduce) {
	.aeo-stat,
	.aeo-layer,
	.aeo-scope__item,
	.aeo-why__card,
	.aeo-plan,
	.aeo-faq__a.is-anim { transition: none !important; }
	.aeo-stat:hover,
	.aeo-layer:hover,
	.aeo-scope__item:hover,
	.aeo-why__card:hover,
	.aeo-plan:hover { transform: none; }
	/* 아이콘은 그려지는 연출 없이 처음부터 그대로 보인다 */
	.has-reveal .aeo-layer__ico,
	.has-reveal .aeo-scope__ico { opacity: 1; animation: none; }
	.has-reveal .aeo-layer__ico svg > *,
	.has-reveal .aeo-scope__ico svg > * { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
	.aeo-layer:hover .aeo-layer__ico,
	.aeo-scope__item:hover .aeo-scope__ico { transform: none; }
}

/* ── 상품 카드 아이콘 — 제목 줄에 맞춰 놓는다 ─────────
   카드 위 여백이 다른 칸들과 달라 자리만 따로 잡는다.
   「가장 많이 선택」 띠가 카드 안으로 들어오는 좁은 화면에서는 그만큼 내린다. */
.aeo-plan__ico { top: clamp(24px, 2.6vw, 44px); }
.aeo-plan__t,
.aeo-plan__for { padding-right: clamp(52px, 4.6vw, 72px); }

@media (max-width: 860px) {
	.aeo-plan.is-best .aeo-plan__ico { top: clamp(46px, 7vw, 60px); }
}

/* ── 마무리 단추 둘은 크기를 똑같이 ────────────────────
   .btn-gradient 는 250×60, 곁들이 단추는 180×56 이라 나란히 두면 어긋나 보인다.
   글자 길이가 달라도 같은 크기로 서게 폭·높이를 함께 못박는다. */
.aeo-cta__btns .btn-gradient,
.aeo-cta__btns .aeo-cta2 {
	width: clamp(168px, 15vw, 220px);
	min-width: 0;
	height: clamp(52px, 4.2vw, 60px);
	min-height: 0;
	padding: 0 clamp(12px, 1.2vw, 18px);
	font-size: clamp(13px, 1.1vw, 16px);
	line-height: 1.3;
	white-space: nowrap;
	box-sizing: border-box;
}
/* 폰에서는 배너 단추와 마찬가지로 가로를 꽉 채운다(둘 다 같은 폭이라 여전히 나란하다) */
@media (max-width: 560px) {
	.aeo-cta__btns .btn-gradient,
	.aeo-cta__btns .aeo-cta2 { width: 100%; }
}