@charset "utf-8";
/* 맞춤 전시회 솔루션 찾기 — 시안 601:8272 (1920 × 1080)
   =========================================================================
   모든 값은 시안에 적힌 px 그대로다. 판 전체가 --k 로 줄어드니 그대로 써도 된다.

     배경      601:8279  1920×1480 칸에 꽉 채움(cover), 화면에서 잘림
     제목 띠   601:8455  x100 y23 · 1720×60 · rgba(255,255,255,.8) · 둥글기 300 · 뒤흐림 20
     제목      601:8667  x220 y41 · SemiBold 20 · 줄높이 1.2
     단계표시  601:8669~ x1539 y32 부터 40×40 세 개, 사이 20 선
     흰 판     601:8666  x100 y124 · 1720×901 · 둥글기 24
     Step 배지 601:8683  x919 y343 · 80×40 + 아래 꼬리
     큰 물음   601:8684  y398 · SemiBold 42 · 줄높이 1.6 · 가운데
     작은 글   601:8689  y462 · Medium 16 · 줄높이 1.6 · 가운데
     고르는 칸 601:8690~ y539 · 240×180 · 둥글기 4 · x 447·711·971·1231
     다음 단추 601:8719  x1500 y915 · 200×60 · 둥글기 8 · 분홍→보라 그러데이션     */

:root {
	--sol-purple: #6136d9;
	--sol-pink:   #ed35a4;
	--sol-blue:   #0b0ff7;
}

/* 이 화면은 딱 한 판(1080) 이다 */
/* 팝업일 때는 한 화면(1080)에 가둬 두었는데, 보통 페이지가 되면서 풀었다 —
   아래에 바닥글이 붙기 때문이다. */

/* 팝업 한 화면에서 보통 페이지로 바뀌면서, 사이트 머리글(높이 90) 아래로
   제목 띠와 흰 판이 내려왔다. 띠 23 → 130, 판 124 → 231 (둘 사이 41 은 시안 그대로).
   높이도 그만큼 늘렸다(1080 + 107). */
.sol {
	position: relative;
	width: 1920px;
	padding: 150px 0 55px;    /* 판이 놓이는 자리 — 판은 이제 흐름에 따라 길어진다 */
	overflow: hidden;
}

/* ── 배경 ──────────────────────────────────────────────── */
/* 페이지가 길어지면 그림(1480) 아래가 흰 바탕으로 남는다.
   부드러운 그러데이션이라 세로로만 늘려도 티가 안 난다 — 가로 결은 그대로 둔다. */
.sol__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 1920px;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}

/* 바닥글은 위 모서리가 둥글어서 그 바깥이 흰 바탕으로 비친다.
   배경이 색으로 끝나면 거기서 잘려 보이므로, 아래 20% 를 흰색으로 풀어 이어 준다. */
.sol__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 20%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
	pointer-events: none;
}

/* 시안에 있던 위 제목 띠(.sol__bar · .sol__title)는 뺐다 —
   보통 페이지가 되면서 사이트 머리글 바로 밑에 또 하나의 띠가 되어 어수선했다. */
/* 01·02·03 — 흰 판 오른쪽 위 (판 1720 안쪽으로 40, 위에서 40) */
.sol-steps {
	position: absolute;
	left: 1539px;
	top: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 2;
	width: 141px;
	height: 40px;
}
.sol-steps li {
	position: absolute;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 300px;
	border: 1px solid #ddd;
	background: #fff;
	color: #999;
	font-family: "Montserrat", var(--font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.sol-steps li span {
	position: absolute;
	left: 0; right: 0;
	top: 9px;                 /* 시안 글자 y19 − 알약 위 9 − 테두리 1 */
}
.sol-steps li:nth-child(1) { left: 0; }
.sol-steps li:nth-child(2) { left: 60px; }
.sol-steps li:nth-child(3) { left: 120px; }

/* 지나온·지금 단계 */
.sol-steps li.is-on {
	border-color: var(--sol-blue);
	background: var(--sol-blue);
	color: #fff;
	box-shadow: 100px 26px 29px rgba(0, 0, 0, 0), 64px 16px 26px rgba(0, 0, 0, .01),
	            36px 9px 22px rgba(0, 0, 0, .04), 16px 4px 17px rgba(0, 0, 0, .06),
	            4px 1px 9px rgba(0, 0, 0, .07);
}
/* 알약 사이를 잇는 20px 선 (시안 601:8673 · 601:8676) */
.sol-steps li + li::before {
	content: "";
	position: absolute;
	left: -21px;              /* 알약 왼쪽에서 20 떨어진 자리 (테두리 1 보정) */
	top: 19px;
	width: 20px;
	height: 1px;
	background: #ddd;
}

/* ── 흰 판 ─────────────────────────────────────────────── */
.sol__card {
	position: relative;
	margin: 0 100px;
	width: 1720px;
	border-radius: 24px;
	background: #fff;
}

/* Step 배지 — 알약 + 아래로 뾰족한 꼬리 */
.sol__badge {
	position: absolute;
	left: 819px;              /* 시안 x919 − 판 왼쪽 100 */
	/* top 은 단계마다 달라서 각 단계에서 지정한다 (1단계 219 · 2·3단계 34) */
	width: 80px;
	height: 40px;
	border: 1px solid var(--sol-purple);
	border-radius: 300px;
	background: #fff;
	color: var(--sol-purple);
	font-size: 14px;
	font-weight: 800;
	line-height: 38px;        /* 알약 40 − 테두리 2 */
	text-align: center;
}
.sol__badge::after {
	content: "";
	position: absolute;
	left: 32px;               /* 시안 꼬리 x33 − 테두리 1 */
	top: 35px;                /* 시안 꼬리 y36 − 테두리 1 */
	width: 14px;
	height: 9px;
	background: var(--sol-purple);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* 꼬리가 알약 테두리를 잇도록 가운데를 흰색으로 덮는다 */
.sol__badge::before {
	content: "";
	position: absolute;
	left: 33px;
	top: 33px;
	width: 12px;
	height: 3px;
	background: #fff;
	z-index: 1;
}

.sol__q {
	position: absolute;
	left: 0; right: 0;
	margin: 0;
	color: #000;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
}
.sol__sub {
	position: absolute;
	left: 0; right: 0;
	color: #000;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}

/* ── 고르는 칸 ─────────────────────────────────────────── */
.sol-pick {
	position: absolute;
	left: 0;
	top: 415px;               /* 시안 y539 − 124 */
	width: 1720px;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.sol-pick__item {
	position: absolute;
	top: 0;
	/* 너비는 화면에서 넣는다 — 갈래 수에 맞춰 나눠 갖는다 */
	height: 180px;
	cursor: pointer;
}


.sol-pick__item input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.sol-pick__box {
	position: absolute;
	inset: 0;
	display: block;
	/* 시안의 테두리 색을 픽셀로 읽어 보니 #b09aec 였다.
	   = 보라(#6136d9) 를 반만 투명하게 한 색이라 그대로 쓴다. */
	border: 1px solid rgba(97, 54, 217, .5);
	border-radius: 4px;
	background: #fff;
	transition: box-shadow .15s;
}
.sol-pick__ico {
	position: absolute;
	left: 50%;
	top: 30px;                /* 시안 아이콘 y570 − 칸 위 539 − 테두리 1 */
	width: 32px;
	height: 32px;
	margin-left: -16px;
}
.sol-pick__name {
	position: absolute;
	left: 0; right: 0;
	top: 81px;                /* 시안 y621 − 539 − 1 */
	color: #000;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}
.sol-pick__desc {
	position: absolute;
	left: 0; right: 0;
	top: 111px;               /* 시안 y651 − 539 − 1 */
	color: #333;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
}

/* 골랐을 때 — 시안 601:8690.
   테두리 4px 인데 한 가지 색이 아니라 왼쪽 위 분홍 → 오른쪽 아래 보라로
   번지는 그러데이션이다(시안 픽셀을 찍어 확인: 447,539 부근 #e535a6 →
   687,719 부근 #6735d6). 테두리에는 그러데이션을 바로 못 주므로,
   바탕을 두 겹으로 깔아 안쪽만 흰색으로 덮는 방법을 쓴다. */
.sol-pick__item input:checked + .sol-pick__box {
	border: 4px solid transparent;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, var(--sol-pink), var(--sol-purple)) border-box;
	box-shadow: 28px 27px 11px rgba(0, 0, 0, 0), 18px 17px 10px rgba(0, 0, 0, .01),
	            10px 10px 8px rgba(0, 0, 0, .03), 4px 4px 6px rgba(0, 0, 0, .04),
	            1px 1px 3px rgba(0, 0, 0, .05);
}
/* 테두리가 4px 이 되면 안쪽이 3px 밀리므로 그만큼 되돌린다 */
.sol-pick__item input:checked + .sol-pick__box .sol-pick__ico  { top: 27px; }
.sol-pick__item input:checked + .sol-pick__box .sol-pick__name { top: 78px; color: var(--sol-purple); font-weight: 800; }
.sol-pick__item input:checked + .sol-pick__box .sol-pick__desc { top: 108px; color: var(--sol-purple); }

.sol-pick__item input:focus-visible + .sol-pick__box {
	outline: 2px solid var(--sol-blue);
	outline-offset: 2px;
}

/* ── 다음 단추 ─────────────────────────────────────────── */
.sol__go {
	position: absolute;
	left: 1400px;             /* 시안 x1500 − 판 왼쪽 100 */
	bottom: 50px;               /* 시안 y915 − 판 위 124 */
	margin: 0;
}
.sol__next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 60px;
	padding: 16px 24px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(to left, var(--sol-pink), var(--sol-purple));
	box-shadow: 0 4px 20px rgba(0, 0, 0, .1), 0 0 0 4px rgba(152, 49, 211, .06);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}

/* ═══════════════════════════════════════════════════════════
   단계 갈아 끼우기 — 세 단계를 모두 담아 두고 하나만 보여 준다
   ═══════════════════════════════════════════════════════════ */
/* 팝업일 때는 한 화면에 가둬 두었지만, 페이지가 되면서 내용만큼 길어진다.
   시안 한 판(901)보다 짧아지지는 않게 min-height 로 바닥을 깔아 둔다. */
.sol-step {
	position: relative;
	min-height: 901px;
}
.sol-step[hidden] { display: none; }

/* 이전 단추 (2·3단계) — 시안 601:8781 (x220 y915 200×60) */
.sol__back {
	position: absolute;
	left: 120px;              /* 시안 x220 − 판 왼쪽 100 */
	bottom: 50px;             /* 시안 y915 + 단추 60 = 975, 판 바닥 1025 에서 50 */
	margin: 0;
}
.sol__first {
	position: absolute;
	left: 330px;              /* 시안 x430 − 100 */
	bottom: 50px;
	margin: 0;
}
.sol__prev,
.sol__first button {
	width: 200px;
	height: 60px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
}
.sol__prev:hover,
.sol__first button:hover { border-color: var(--sol-purple); color: var(--sol-purple); }

/* 3단계의 「견적문의/상담 바로가기」 는 링크라 글자를 가운데로 */
a.sol__next { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   2단계 — 필요 기능 (시안 601:8730)
   ═══════════════════════════════════════════════════════════ */
.sol-fn {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.sol-fn__item {
	position: absolute;
	width: 350px;
	height: 150px;
	cursor: pointer;
}
.sol-fn__item input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.sol-fn__box {
	position: absolute;
	inset: 0;
	display: block;
	border: 1px solid rgba(97, 54, 217, .5);   /* 시안 픽셀 #b09aec */
	border-radius: 4px;
	background: #fff;
}
/* 번호칩 — 시안 601:8901 (y350, 높이 20) */
.sol-fn__no {
	position: absolute;
	left: 23px;
	min-width: 33px;
	padding: 0 5px;
	top: 17px;                /* 시안 y350 − 칸 위 332 − 테두리 1 */
	height: 20px;
	border-radius: 300px;
	background: #ececec;
	color: #999;
	font-family: "Montserrat", var(--font-body);
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}
.sol-fn__name {
	position: absolute;
	left: 23px;
	top: 62px;             /* 시안 y394 − 칸 위 332 */
	color: #000;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;         /* 시안 글상자 높이 22 */
	white-space: nowrap;
}
.sol-fn__desc {
	position: absolute;
	left: 23px;
	top: 90px;             /* 시안 y422 − 칸 위 332 */
	right: 18px;
	color: #555;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;         /* 시안 글상자 높이 20 */
}
/* 「핵심」 리본 — 시안 601:8953 (35×40, 칸 오른쪽 위) */
.sol-fn__key {
	position: absolute;
	right: -2px;           /* 시안 리본이 칸 오른쪽 끝에 걸친다 */
	top: -2px;                /* 시안 리본 y330 − 칸 위 332 */
	width: 35px;
	height: 40px;
}

/* 골랐을 때 — 1단계와 같은 그러데이션 테두리 */
.sol-fn__item input:checked + .sol-fn__box {
	border: 4px solid transparent;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, var(--sol-pink), var(--sol-purple)) border-box;
	box-shadow: 28px 27px 11px rgba(0, 0, 0, 0), 18px 17px 10px rgba(0, 0, 0, .01),
	            10px 10px 8px rgba(0, 0, 0, .03), 4px 4px 6px rgba(0, 0, 0, .04),
	            1px 1px 3px rgba(0, 0, 0, .05);
}
.sol-fn__item input:checked + .sol-fn__box .sol-fn__name { color: var(--sol-purple); }
.sol-fn__item input:checked + .sol-fn__box .sol-fn__desc { color: var(--sol-purple); }
/* 테두리가 4px 이 되면 안쪽이 3px 밀리므로 되돌린다 */
.sol-fn__item input:checked + .sol-fn__box .sol-fn__no,
.sol-fn__item input:checked + .sol-fn__box .sol-fn__name,
.sol-fn__item input:checked + .sol-fn__box .sol-fn__desc { margin: -3px 0 0 -3px; }
.sol-fn__item input:checked + .sol-fn__box .sol-fn__key   { margin: -3px -3px 0 0; }
.sol-fn__item input:focus-visible + .sol-fn__box { outline: 2px solid var(--sol-blue); outline-offset: 2px; }

/* 확장 옵션 — 시안 601:8948 (x220 y670 1480×210) */
.sol-opt {
	position: absolute;
	left: 120px;              /* 시안 x220 − 100 */
	/* 기본 기능 줄 수(--rows)에 따라 내려간다. 두 줄이면 시안 그대로 338. */
	top: calc(170px * (var(--rows, 2) - 1) + 168px + var(--hd));
	width: 1480px;
	height: 210px;
	padding: 30px 25px;       /* 시안 칸 x245 · y700 */
	display: flex;
	flex-wrap: wrap;
	gap: 20px 25px;
	border-radius: 8px;
	background: #f8f9ff;
}
.sol-opt__item {
	position: relative;
	flex: 0 0 460px;
	width: 460px;
	height: 150px;
	cursor: pointer;
}
.sol-opt__item input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.sol-opt__box {
	position: absolute;
	inset: 0;
	display: block;
	border: 2px solid transparent;
	border-radius: 8px;
	background: #eae6ff;
}
.sol-opt__item input:checked + .sol-opt__box {
	border-color: var(--sol-purple);
	background: #fff;
}
.sol-opt__item input:focus-visible + .sol-opt__box { outline: 2px solid var(--sol-purple); outline-offset: 2px; }
.sol-opt__chip {
	position: absolute;
	left: 27px;               /* 시안 x272 − 245 */
	top: 21px;                /* 시안 y721 − 700 */
	width: 82px;
	height: 30px;
	border-radius: 300px;
	background: var(--sol-purple);
	color: #fff;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}
.sol-opt__item b {
	position: absolute;
	left: 31px;               /* 시안 x276 − 245 */
	top: 72px;                /* 시안 y772 − 700 */
	color: var(--sol-purple);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}
.sol-opt__item em {
	position: absolute;
	left: 31px;
	right: 20px;
	top: 100px;               /* 시안 y800 − 700 */
	color: #555;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   3단계 — 추천 솔루션 (시안 601:9015)
   ═══════════════════════════════════════════════════════════ */
.sol-rec {
	position: absolute;
	left: 339px;              /* 시안 x439 − 100 */
	top: 180px;               /* 시안 y304 − 124 */
	width: 500px;
	/* 「추천 조건」 줄을 빼면서 아래가 101 이나 비었다 —
	   위 여백(딱지 37)과 같아지도록 줄인다. 오른쪽 카드도 같은 높이다. */
	height: 532px;
	border: 2px solid var(--sol-blue);
	border-radius: 8px;
	background: #fff;
}
.sol-rec__chip {
	position: absolute;
	left: 32px;               /* 시안 x473 − 439 − 테두리 2 */
	top: 37px;                /* 시안 y343 − 304 − 2 */
	width: 101px;
	height: 30px;
	border-radius: 300px;
	background: #393cf8;
	color: #fff;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}
.sol-rec__title {
	position: absolute;
	left: 33px;               /* 시안 x474 − 439 − 2 */
	top: 77px;                /* 시안 y383 − 304 − 2 */
	color: var(--sol-blue);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.5;         /* 시안 글상자 높이 36 */
	white-space: nowrap;
}
.sol-rec__desc {
	position: absolute;
	left: 33px;
	top: 126px;               /* 시안 y432 − 304 − 2 */
	width: 426px;
	color: #333;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
}
.sol-rec__chips {
	position: absolute;
	left: 33px;               /* 시안 x472 − 439 */
	right: 25px;
	top: 184px;               /* 시안 y490 − 304 − 2 */
	height: 68px;             /* 두 줄까지 — 주요 특징(y276)에 닿지 않게 */
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	overflow: hidden;
}
.sol-rec__chips i {
	height: 30px;
	padding: 0 12px;
	border: 1px solid #eeeafe;
	border-radius: 300px;
	background: #fff;
	color: var(--sol-purple);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
}
.sol-rec__h {
	position: absolute;
	left: 33px;
	top: 276px;               /* 시안 y582 − 304 − 2 */
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
.sol-rec__panel {
	position: absolute;
	left: 33px;
	top: 307px;               /* 시안 y613 − 304 − 2 */
	width: 435px;
	/* 아래 여백이 위(37)와 같아지는 높이 — 307 + 188 = 495 = 532 − 37 */
	height: 188px;
	border-radius: 8px;
	background: #f8f9ff;
}
.sol-rec__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 0 20px 0 51px;   /* 시안 글 x525 − 판 x474 */
}
.sol-rec__panel span {
	position: relative;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;         /* 시안 글상자 높이 20 */
}
.sol-rec__panel span img {
	position: absolute;
	top: 0;
	left: -28px;              /* 시안 체크 x497 − 글 x525 */
	width: 20px;
	height: 20px;
}
.sol-rec__note {
	position: absolute;
	left: 33px;
	top: 482px;               /* 시안 y788 − 304 − 2 */
	width: 435px;
	height: 60px;
	border-radius: 8px;
	background: #e2e2ff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	color: var(--sol-purple);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
}

/* 오른쪽 사례 카드 — 원래 검정(#0a090b)이었다.
   왼쪽 추천 카드와 어울리게 옅은 보라로 바꾸고 글자를 어둡게 뒤집었다. */
.sol-shot {
	position: absolute;
	left: 883px;              /* 시안 x983 − 100 */
	top: 180px;
	width: 500px;
	height: 532px;            /* 왼쪽 카드와 같은 높이 */
	border-radius: 8px;
	background: #f4f2fd;
}
.sol-shot img {
	position: absolute;
	left: 39px;               /* 시안 x1022 − 983 */
	top: 79px;                /* 시안 y383 − 304 */
	width: 422px;
	height: 361px;
}
.sol-shot b {
	position: absolute;
	left: 0; right: 0;
	top: 451px;               /* 시안 y755 − 304 */
	color: #141220;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.6;         /* 시안 글상자 높이 51 */
	text-align: center;
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   유형을 여럿 골랐을 때 (화면설계서 68쪽)
   ═══════════════════════════════════════════════════════════ */

/* ── 2단계 유형 탭 — 안내 문구가 있던 자리(y153)에 들어간다 ── */
.sol-tabs {
	position: absolute;
	left: 0; right: 0;
	top: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 40px;
}
.sol-tabs[hidden] { display: none; }
.sol-tabs__tab {
	height: 40px;
	padding: 0 22px;
	border: 1px solid rgba(97, 54, 217, .35);
	border-radius: 300px;
	background: #fff;
	color: #555;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 38px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sol-tabs__tab:hover { border-color: var(--sol-purple); color: var(--sol-purple); }
.sol-tabs__tab.is-on {
	border-color: transparent;
	background: var(--sol-purple);
	color: #fff;
	font-weight: 700;
}

.sol-fnset[hidden] { display: none; }

/* ── 확장 옵션이 넷 이상일 때 — 띠 크기는 그대로, 칸만 작게 네 개씩 ── */
/* 띠 안쪽은 1430 × 150. 네 칸씩 두 줄이 딱 들어가게 잡았다
   (344×4 + 14×3 = 1418 ≤ 1430,  68×2 + 14 = 150). */
.sol-opt--many { gap: 14px; align-content: flex-start; }
.sol-opt--many .sol-opt__item {
	flex: 0 0 344px;
	width: 344px;
	height: 68px;
}
.sol-opt--many .sol-opt__chip { left: 14px; top: 8px; width: 62px; height: 22px; font-size: 11px; line-height: 22px; }
.sol-opt--many .sol-opt__item b  { left: 86px; top: 8px; font-size: 15px; }
.sol-opt--many .sol-opt__item em { left: 86px; right: 12px; top: 31px; font-size: 12px; line-height: 1.3; }

/* 고른 기능이 없을 때 알려 주는 줄 */
.sol-pick__none {
	position: absolute;
	left: 0; right: 0;
	top: 772px;
	margin: 0;
	color: var(--sol-pink);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}
.sol-pick__none[hidden] { display: none; }

/* ── 3단계 추천 카드 담는 곳 ──────────────────────────────
   한 건이면 시안 그대로 왼쪽 카드 + 오른쪽 검은 카드,
   여러 건이면 카드를 세로로 쌓고 이 구역만 굴려 본다.               */
/* 위 180 은 시안에서 카드가 놓이던 자리, 아래 110 은 단추 자리.
   한 건이면 시안 그대로 높이를 박고(180+570+110=860),
   여러 건이면 카드를 쭉 쌓아 판이 그만큼 길어진다(페이지가 스크롤된다). */
.sol-recs {
	position: relative;
	padding: 180px 0 150px;   /* 위는 시안에서 카드가 놓이던 자리, 아래는 단추 자리 */
}
/* 추천 한 줄 = 왼쪽 추천 카드 + 오른쪽 사례 카드 (시안 자리 그대로).
   유형을 여럿 고르면 이 줄이 세로로 쌓인다. */
.sol-rec-row {
	position: relative;
	height: 532px;
}
.sol-rec-row + .sol-rec-row { margin-top: 40px; }
.sol-rec-row .sol-rec  { position: absolute; left: 339px; top: 0; }
.sol-rec-row .sol-shot { position: absolute; left: 883px; top: 0; }

/* 몇 번째 추천인지 — 카드 오른쪽 위 */
.sol-rec__seq {
	position: absolute;
	right: 24px;
	top: 28px;
	color: rgba(97, 54, 217, .28);
	font-family: "Montserrat", var(--font-body);
	font-size: 30px;
	font-style: normal;
	font-weight: 800;
	line-height: 1;
}

/* 추천 조건 줄 — 자바스크립트가 <p> 로 그린다 */
p.sol-rec__note { margin: 0; }
.sol-rec__note b { font-weight: 800; }

.sol-rec__note b { flex: none; white-space: nowrap; margin-right: 6px; font-weight: 800; }
.sol-rec__more { border-color: #ddd8f8; background: #f4f1ff; color: #6136d9; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   2단계 — 고른 유형을 쭉 나열 (탭을 쓰지 않는다)
   ═══════════════════════════════════════════════════════════
   묶음 하나 = 기본 기능 넉 칸 × 두 줄 + 확장 옵션 띠.
   한 유형만 고르면 이름표 없이 시안 그대로(그리드가 판 위에서 208).
   여럿 고르면 묶음마다 이름표가 붙어 --hd(44) 만큼 내려간다.            */
.sol-fnsets {
	--hd: 0px;
	/* 위 208 은 시안에서 첫 줄 칸이 놓이던 자리,
	   아래 140 은 이전/다음 단추 자리(110) + 단추 위 여백(30).
	   한 유형만 고르면 판이 최소 높이(901)라 시안 그대로 y791 에 그대로 있다.
	   margin 으로 주면 부모 밖으로 빠져나가(마진 겹침) 208 이 먹히지 않는다. */
	padding: 208px 0 140px;
}
.sol-fnsets.is-multi { --hd: 44px; }
.sol-fnset {
	position: relative;
	/* 확장 띠 아래끝까지 — 두 줄이면 548(338+210), 한 줄 늘 때마다 170 더. */
	height: calc(170px * (var(--rows, 2) - 1) + 378px + var(--hd));
}
/* 보이는 묶음끼리만 띄운다 — 감춘 묶음이 앞에 남아 있어도 자리가 안 밀리게 */
.sol-fnset:not([hidden]) + .sol-fnset:not([hidden]) { margin-top: 46px; }
.sol-fnset__hd {
	position: absolute;
	left: 120px;
	top: 0;
	display: none;
	margin: 0;
	color: var(--sol-purple);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}
.sol-fnsets.is-multi .sol-fnset__hd { display: block; }



/* ── 오른쪽 카드 — 실제로 만든 프로젝트 ─────────────────────
   맨 위 한 건(큰 그림) + 밑에서 두 칸씩 굴러가는 것 = 한 번에 **세 개**가 보인다.
   겹치는 것이 없어도 비워 두지 않고 같은 유형의 최근 것을 보여 준다.     */
.sol-shot { overflow: hidden; }
.sol-shot__main { display: block; }
.sol-shot__main img {
	position: absolute;
	left: 39px;
	top: 30px;
	width: 422px;
	height: 220px;
	border-radius: 8px;
	object-fit: cover;
	transition: transform .35s ease;
}
.sol-shot__main:hover img { transform: scale(1.03); }
.sol-shot__main b {
	position: absolute;
	left: 39px;
	right: 39px;
	top: 278px;
	color: #141220;
	font-size: 24px;
	font-weight: 800;
	/* 두 줄이 되어도 밑의 프로젝트 묶음(326)과 부딪히지 않게 */
	line-height: 1.25;
	text-align: left;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 업체명 — 제목 **위**에 눈표처럼 얹는다(왼쪽 카드의 「추천·통합형」과 같은 차례) */
.sol-shot__main em {
	position: absolute;
	left: 39px;
	right: 39px;
	top: 256px;
	color: var(--sol-blue);
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 밑에서 굴러가는 두 칸 */
.sol-roll {
	position: absolute;
	left: 39px;
	right: 39px;
	/* 업체명·제목을 위아래로 바꾸면서 그만큼 위로 */
	top: 326px;
	display: block;
}
/* 소제목 — 밑의 썸네일 이름과 크기·굵기가 같아 묻혀 보였다.
   한 치수 키우고 왼쪽에 그러데이션 막대를 세워 「여기부터 다른 이야기」를 알린다.
   막대는 글자(잉크 13px) 밖으로 나가지 않게 높이를 맞춰 세로 가운데에 둔다. */
.sol-roll__h {
	position: relative;
	display: block;
	padding-left: 10px;
	margin-bottom: 12px;
	color: #141220;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
}
.sol-roll__h::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 13px;
	border-radius: 2px;
	background: linear-gradient(var(--sol-blue), var(--sol-purple));
}
.sol-roll__win {
	display: block;
	overflow: hidden;
	width: 422px;
}
.sol-roll__track {
	display: flex;
	gap: 10px;
	transition: transform .5s ease;
}
.sol-roll__it {
	flex: 0 0 206px;
	width: 206px;
}
.sol-roll__it img,
.sol-roll__it em { position: static; }   /* 시안의 .sol-shot img 규칙(절대자리)을 되돌린다 */
.sol-roll__it img {
	display: block;
	width: 206px;
	height: 108px;
	border-radius: 6px;
	background: #e3def6;
	object-fit: cover;
	transition: opacity .2s ease;
}
.sol-roll__it:hover img { opacity: .78; }
.sol-roll__it em {
	display: block;
	margin-top: 8px;
	color: #141220;
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 여러 건일 때만 나오는 안내줄 — 제목과 카드 사이에 숨 쉴 자리를 준다
   (제목 밑끝 156 · 안내줄 168~194 · 카드 216) */
.sol-recs--many { padding-top: 216px; }

/* 1단계 안내 — 고를 칸(아래끝 595)과 「다음」 단추(위 791) 사이 */
.sol-pick__none--t1 { top: 660px; }


/* ============================================================
   1단계 갈래 아이콘 — 갈래마다 제 성격대로 움직인다
   ------------------------------------------------------------
   아이콘이 <img> 한 장이라 그림 속을 따로 건드릴 수 없다.
   그래서 그림 통째로 움직이고, 폭죽만 바깥에 불꽃을 덧그린다.
   늘 조용히 움직이다가 손을 얹으면 조금 더 살아난다.
   ============================================================ */
.sol-pick__ico { will-change: transform; }

/* 전시회 — 지구본이 제자리에서 빙그르르 돈다.
   처음엔 rotateY(앞뒤로 뒤집기)로 했는데, 아이콘이 납작한 그림 한 장이라
   옆을 지날 때 선 하나로 눌려 보였다(사용자 지적). 그냥 평면으로 돌린다. */
.sol-pick__item[data-type="exhibition"] .sol-pick__ico {
	animation: solGlobe 9s linear infinite;
	transform-origin: 50% 50%;
}
.sol-pick__item[data-type="exhibition"]:hover .sol-pick__ico { animation-duration: 3.2s; }
@keyframes solGlobe {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* 포럼·세미나·컨퍼런스 — 마이크가 둥둥 뜬다 */
.sol-pick__item[data-type="forum"] .sol-pick__ico {
	animation: solMic 2.8s ease-in-out infinite;
}
.sol-pick__item[data-type="forum"]:hover .sol-pick__ico { animation-duration: 1.4s; }
@keyframes solMic {
	0%, 100% { transform: translateY(0)     rotate(0deg); }
	30%      { transform: translateY(-5px)  rotate(-7deg); }
	60%      { transform: translateY(-2px)  rotate(5deg); }
	80%      { transform: translateY(-4px)  rotate(-3deg); }
}

/* 이벤트·행사 — 폭죽이 터진다.
   아이콘이 「펑」 하고 커졌다 돌아오고, 그 순간 불꽃 여섯 조각이
   사방으로 흩어진다. 불꽃은 그림 뒤에 깔린 한 겹(::after)에
   그림자를 여섯 개 얹어 만든 것이라 요소를 더 두지 않았다. */
.sol-pick__item[data-type="event"] .sol-pick__ico {
	animation: solPop 3.6s ease-in-out infinite;
}
.sol-pick__item[data-type="event"]:hover .sol-pick__ico { animation-duration: 1.6s; }
@keyframes solPop {
	0%, 62%, 100% { transform: scale(1)    rotate(0deg); }
	68%           { transform: scale(1.28) rotate(-8deg); }
	74%           { transform: scale(.94)  rotate(6deg); }
	80%           { transform: scale(1.1)  rotate(-3deg); }
	88%           { transform: scale(1)    rotate(0deg); }
}
.sol-pick__item[data-type="event"] .sol-pick__box::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 46px;                 /* 아이콘 한가운데(30 + 16) */
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: transparent;
	/* 여섯 조각 — 각자 다른 색으로 사방에 */
	box-shadow:
		0 0 0 0 #ed35a4, 0 0 0 0 #6136d9, 0 0 0 0 #ffb020,
		0 0 0 0 #35c8ed, 0 0 0 0 #7bd44b, 0 0 0 0 #ff6b6b;
	opacity: 0;
	pointer-events: none;
	animation: solSpark 3.6s ease-out infinite;
}
.sol-pick__item[data-type="event"]:hover .sol-pick__box::after { animation-duration: 1.6s; }
@keyframes solSpark {
	0%, 62% { opacity: 0; box-shadow:
		0 0 0 0 #ed35a4, 0 0 0 0 #6136d9, 0 0 0 0 #ffb020,
		0 0 0 0 #35c8ed, 0 0 0 0 #7bd44b, 0 0 0 0 #ff6b6b; }
	66%     { opacity: 1; }
	92%     { opacity: 0; box-shadow:
		-26px -16px 0 0 #ed35a4,  26px -16px 0 0 #6136d9,
		-30px   4px 0 0 #ffb020,  30px   4px 0 0 #35c8ed,
		-14px -30px 0 0 #7bd44b,  14px -30px 0 0 #ff6b6b; }
	100%    { opacity: 0; box-shadow:
		-26px -16px 0 0 #ed35a4,  26px -16px 0 0 #6136d9,
		-30px   4px 0 0 #ffb020,  30px   4px 0 0 #35c8ed,
		-14px -30px 0 0 #7bd44b,  14px -30px 0 0 #ff6b6b; }
}

/* 골랐을 때는 아이콘이 3px 올라간다 — 불꽃 자리도 같이 올린다 */
.sol-pick__item[data-type="event"] input:checked + .sol-pick__box::after { top: 43px; }

@media (prefers-reduced-motion: reduce) {
	.sol-pick__ico,
	.sol-pick__box::after { animation: none !important; }
	.sol-pick__item[data-type="event"] .sol-pick__box::after { opacity: 0; }
}