@charset "utf-8";
/* 견적문의/상담 — 시안 612:1996 (1920 × 3002 · 푸터는 y2323 부터)
   =========================================================================
   시안 좌표
     배경      621:4657  0,0 1920×1080
     제목      612:2390  x843 y150 · ExtraBold 42 · 줄높이 1.6
     부제      612:2391  x654 y226 613×68
     흰 판     617:4347  둥글기 8 · 그림자 5겹 (행사유형 · 필요기능 · 기본정보 · 방침)
     행사유형   판 x420 y363 1080×248 / 칸 240×180 x447·711·971·1231 y395
     필요기능   판 x420 y672 1080×120 / 네모 26×26 y692·738
     기본정보   판 x420 y880 1080×1047 / 입력칸 높이 50 · 테두리 #e1e1e1 · 둥글기 4
     방침      판 x420 y2014 1080×60
     확인 단추  x860 y2114 200×60 · 분홍→보라                                */

:root {
	--ct-purple: #6136d9;
	--ct-pink:   #ed35a4;
}

.ex-stage { background: #f8f9ff; }

.ct {
	position: relative;
	width: 1920px;
	/* 푸터가 시작하는 자리. 필요기능 판이 길어지면 그만큼 같이 길어진다 */
	height: calc(2136px + var(--ct-grow, 0px));
	color: #000;
}
.ct__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 1920px;
	height: 1080px;
	pointer-events: none;
	z-index: -1;
}

/* ── 제목 ──────────────────────────────────────────────── */
.ct__title {
	position: absolute;
	left: 843px;
	top: 150px;
	margin: 0;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.6;          /* 시안 글상자 높이 67 */
	white-space: nowrap;
}
.ct__lead {
	position: absolute;
	left: 654px;
	top: 226px;
	width: 613px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;          /* 시안 글상자 높이 68 = 두 줄 + 여유 */
	text-align: center;
}

/* ── 흰 판 ─────────────────────────────────────────────── */
.ct-panel {
	position: absolute;
	display: block;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 91px 55px rgba(0, 0, 0, .02), 0 40px 40px rgba(0, 0, 0, .03),
	            0 10px 22px rgba(0, 0, 0, .03);
}

/* 구역 이름표 — 뒤에 작은 점(필수 표시)이 붙는다 */
.ct__label {
	position: absolute;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;          /* 시안 글상자 높이 26 */
	white-space: nowrap;
}
/* 「여러 개 고를 수 있습니다」 — 제목 오른쪽에 나란히. 시안 자리는 건드리지 않는다 */
.ct__hint {
	position: absolute;
	margin: 0;
	color: #8b8b8b;
	font-size: 13px;
	font-weight: 500;
	line-height: 2;            /* 제목(16/1.6=26)과 가운데가 맞게 */
	white-space: nowrap;
}
.ct__label i,
.ct__f i {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ct-pink);
}
.ct__h2 {
	position: absolute;
	left: 420px;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;          /* 시안 글상자 높이 32 */
}

/* ── 행사유형 고르는 칸 ────────────────────────────────── */
.ct-type {
	position: absolute;
	top: 395px;
	/* 너비는 화면에서 넣는다 — 갈래 수에 맞춰 나눠 갖는다 */
	height: 180px;
	cursor: pointer;
}
.ct-type input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.ct-type__box {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(97, 54, 217, .5);
	border-radius: 4px;
	background: #fff;
}
.ct-type__ico {                /* 시안 y426 − 395 */
	position: absolute;
	left: 50%;
	top: 31px;
	width: 32px; height: 32px;
	margin-left: -16px;
}
.ct-type b {
	position: absolute;
	left: 0; right: 0;
	top: 82px;                 /* 시안 y477 − 395 */
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}
.ct-type em {
	position: absolute;
	left: 0; right: 0;
	top: 112px;                /* 시안 y507 − 395 */
	color: #333;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}
/* 골랐을 때 — 다른 화면과 같은 그러데이션 테두리 */
.ct-type input:checked + .ct-type__box {
	border: 4px solid transparent;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, var(--ct-pink), var(--ct-purple)) border-box;
	box-shadow: 10px 10px 8px rgba(0, 0, 0, .03), 4px 4px 6px rgba(0, 0, 0, .04),
	            1px 1px 3px rgba(0, 0, 0, .05);
}
.ct-type input:checked ~ b,
.ct-type input:checked ~ em { color: var(--ct-purple); }
.ct-type input:checked ~ b { font-weight: 800; }
.ct-type input:focus-visible + .ct-type__box { outline: 2px solid var(--ct-purple); outline-offset: 2px; }

/* ── 필요기능 네모 ─────────────────────────────────────────
   행사유형에 따라 세 벌 중 한 벌만 보인다.
   포럼처럼 항목이 많아 세 줄이 되면 --ct-grow 만큼 흰 판과 그 아래가 내려간다.
   값은 contact.js 가 재서 넣는다(자바스크립트가 없으면 0 = 시안 그대로). */
.ct-panel[data-i="2"] { height: calc(120px + var(--ct-grow, 0px)) !important; }
/* 기본정보부터 확인 단추까지 통째로 내려간다. 안의 칸들은 시안 좌표 그대로다. */
.ct-rest {
	position: absolute;
	left: 0;
	top: 0;
	width: 1920px;
	transform: translateY(var(--ct-grow, 0px));
}
/* 고른 행사유형의 묶음이 세로로 쌓인다. 자리는 시안 x443 · y692 에서 시작. */
.ct-funcs-wrap {
	--hd: 0px;
	position: absolute;
	left: 443px;
	top: 692px;
	width: 1034px;             /* 흰 판(420~1500) 안쪽으로 좌우 23px 씩 */
}
.ct-funcs-wrap.is-multi { --hd: 30px; }
.ct-funcs { position: relative; display: block; }
.ct-funcs[hidden] { display: none; }
/* 시안 자리를 쓰는 묶음(전시회)은 두 줄이라 높이를 박아 준다 — 안의 칸이 절대자리라서 */
.ct-funcs:not(.ct-funcs--flow) { height: calc(72px + var(--hd)); }
/* 시안에 자리가 없는 구분은 칸을 줄 세운다. 줄 높이 26+20 = 시안과 같은 46px */
.ct-funcs--flow {
	display: flex;
	flex-wrap: wrap;
	column-gap: 22px;
	row-gap: 20px;
	padding-top: var(--hd);
}
/* 보이는 묶음끼리만 띄운다 — 감춘 묶음이 앞에 남아 있어도 자리가 안 밀리게 */
.ct-funcs:not([hidden]) + .ct-funcs:not([hidden]) { margin-top: 30px; }
.ct-funcs__hd {
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	color: var(--ct-purple);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
.ct-funcs-wrap.is-multi .ct-funcs__hd { display: block; }

.ct-func { position: absolute; cursor: pointer; }
.ct-func--flow {
	position: relative;
	left: auto;
	top: auto;
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding-left: 37px;        /* 네모(26) + 사이 11 — 시안과 같다 */
}
.ct-func--flow .ct-func__txt { position: static; }
.ct-func input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.ct-func__box {
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}
.ct-func input:checked + .ct-func__box {
	border-color: var(--ct-purple);
	background: var(--ct-purple);
}
/* 체크 표시 */
.ct-func input:checked + .ct-func__box::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 4px;
	width: 9px;
	height: 14px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ct-func__txt {
	position: absolute;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;          /* 시안 글상자 높이 22 */
	white-space: nowrap;
}
.ct-func input:focus-visible + .ct-func__box { outline: 2px solid var(--ct-purple); outline-offset: 2px; }

/* ── 입력칸 ────────────────────────────────────────────── */
.ct__f {
	position: absolute;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}
.ct-in {
	position: absolute;
	height: 50px;
	padding: 0 20px;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	background: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 48px;
}
.ct-in::placeholder { color: #999; }
.ct-in:focus { outline: none; border-color: var(--ct-purple); }
.ct-in--area {
	padding: 14px 20px;
	line-height: 1.6;
	resize: none;
}
.ct-at {
	position: absolute;
	left: 787px;
	top: 1175px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

/* 고르는 칸 */
.ct-sel { position: absolute; height: 50px; display: block; }
.ct-sel select {
	width: 100%;
	height: 50px;
	padding: 0 44px 0 20px;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	background: #fff;
	font-size: 16px;
	font-weight: 500;
	appearance: none;
	-webkit-appearance: none;
}
.ct-sel::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -3px;
	background: #555;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	pointer-events: none;
}
.ct-sel select:focus { outline: none; border-color: var(--ct-purple); }

/* 첨부파일 — 시안 617:4577 (x456 y1516 120×40) */
.ct-file {
	position: absolute;
	left: 456px;
	top: 1516px;
	width: 120px;              /* 검은 단추만. + 는 옆에 따로 있다 */
	height: 40px;
	cursor: pointer;
}
.ct-file input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.ct-file span {
	position: absolute;
	left: 0;
	top: 0;
	width: 120px;
	height: 40px;
	border-radius: 4px;
	background: #14141e;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 40px;
	text-align: center;
}
/* + 단추 — 시안 자리 그대로(456+130, 1516+5) 30×30 */
.ct-file__add {
	position: absolute;
	left: 586px;
	top: 1521px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.ct-file__add img { display: block; width: 30px; height: 30px; }
.ct-file__note {
	position: absolute;
	left: 457px;
	top: 1565px;
	color: #777;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;         /* 시안 글상자 높이 22 */
	white-space: nowrap;
}

/* ── 개인정보취급방침 ──────────────────────────────────── */
.ct-agree {
	position: absolute;
	left: 445px;
	top: 1843px;
	height: 26px;
	cursor: pointer;
}
.ct-agree input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.ct-agree__box {
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}
.ct-agree input:checked + .ct-agree__box {
	border-color: var(--ct-purple);
	background: var(--ct-purple);
}
.ct-agree input:checked + .ct-agree__box::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 4px;
	width: 9px;
	height: 14px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ct-agree__txt {
	position: absolute;
	left: 37px;                /* 시안 글 x482 − 네모 x445 */
	top: 2px;                  /* 시안 y2032 − 2030 */
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}
.ct-agree input:focus-visible + .ct-agree__box { outline: 2px solid var(--ct-purple); outline-offset: 2px; }

.ct-agree__more {
	position: absolute;
	left: 1309px;
	top: 1846px;
	display: flex;
	align-items: center;
	color: #555;
	font-size: 14px;           /* 시안 글상자가 125×22 라 16px 로는 넘친다 */
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

.ct-agree__more:hover { color: var(--ct-purple); }

/* ── 확인 단추 ─────────────────────────────────────────── */
.ct__go { position: absolute; left: 860px; top: 1927px; margin: 0; }
.ct__submit {
	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(--ct-pink), var(--ct-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;
}

/* ── 접수가 막혔을 때 알려 주는 띠 ─────────────────────── */
.ct-err {
	position: absolute;
	left: 420px;
	top: 295px;
	width: 1080px;
	padding: 12px 20px;
	border: 1px solid #f3c2c2;
	border-radius: 8px;
	background: #fff6f6;
	color: #c00;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

/* ── 접수 끝난 화면 ────────────────────────────────────── */
.ct--done { height: 900px; }
.ct-done {
	position: absolute;
	left: 0;
	right: 0;
	top: 260px;
	text-align: center;
}
.ct-done__eyebrow {
	color: var(--ct-purple);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .22em;
}
.ct-done__title {
	margin: 14px 0 18px;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
}
.ct-done__lead { color: #444; font-size: 17px; line-height: 1.8; }
.ct-done__lead b { color: var(--ct-purple); }
.ct-done__btns {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 38px;
}
.ct-done__go,
.ct-done__sub {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 34px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
}
.ct-done__go {
	background: linear-gradient(to left, var(--ct-pink), var(--ct-purple));
	box-shadow: 0 4px 20px rgba(0, 0, 0, .1), 0 0 0 4px rgba(152, 49, 211, .06);
	color: #fff;
}
.ct-done__sub {
	border: 1px solid #ddd;
	background: rgba(255, 255, 255, .8);
	color: #000;
}
.ct-done__sub:hover { border-color: var(--ct-purple); color: var(--ct-purple); }

/* ── 고른 첨부파일 이름 ────────────────────────────────── */
/* 고른 파일 — 한 줄에 알약 모양으로 늘어놓고, 하나씩 뺄 수 있다.
   검은 단추(높이 40, 1516~1556) 와 가운데를 맞춘다. */
.ct-file__names {
	position: absolute;
	left: 626px;               /* 첨부 단추(456+120) + 아이콘(30) + 여백 */
	top: 1523px;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 836px;              /* 626 → 1462 (적는 칸 오른쪽 끝) */
	height: 26px;
	margin: 0;
	overflow: hidden;
	color: #999;
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;
	white-space: nowrap;
}
.ct-file__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;            /* 쪼그라들지 않는다 — 넘치면 뒤를 접는다 */
	min-width: 0;
	max-width: 230px;
	height: 26px;
	padding: 0 4px 0 10px;
	border: 1px solid rgba(97, 54, 217, .3);
	border-radius: 300px;
	background: rgba(97, 54, 217, .06);
	color: var(--ct-purple);
	font-size: 13px;
	font-weight: 500;
}
.ct-file__chip b {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}
.ct-file__chip button {
	flex: none;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(97, 54, 217, .12);
	color: var(--ct-purple);
	font-size: 13px;
	line-height: 18px;
	cursor: pointer;
}
.ct-file__more { flex: none; color: var(--ct-purple); font-size: 13px; font-weight: 600; }

/* ── 「개인정보취급방침 보기」 — 글자와 화살표가 겹치지 않게 ─ */
.ct-agree__more {
	gap: 12px;                 /* 시안: 글자 끝 1434 → 화살표 1446 */
}
.ct-agree__more span { display: block; white-space: nowrap; }
.ct-agree__more img {
	position: static;          /* 겹쳐 놓던 것을 줄 안으로 되돌린다 */
	flex: none;
	width: 24px;
	height: 24px;
}