/*	━━ 글자 자글자글 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	원인은 CSS 가 아니라 **폰트 파일**이다. 사이트 본문 폰트 NanumSquare 를 뜯어보니

	  · 힌팅 바이트코드 0 / 글리프 800 (prep·fpgm·cvt 테이블이 아예 없다)
	  · gasp 테이블 = {10:14, 16:7, 65535:15}
	       ↑ 11~16ppem 구간만 플래그 7 — GRIDFIT+DOGRAY+SYMMETRIC_GRIDFIT 이고
	         SYMMETRIC_SMOOTHING(8) 이 빠져 있다. 윈도우 DirectWrite 는 이 구간에서
	         세로 안티에일리어싱 없이 가로로만 ClearType 을 먹여 스템이 들쭉날쭉해진다.

	이 페이지의 11~16px 글자는 41개 — 지적받은 태그(12.5px)·버튼(16px)이 전부 여기 있다.
	17px 이상(플래그 15)이 멀쩡한 이유도 같다.

	CSS 로 gasp 를 못 바꾸니 **ClearType 경로를 아예 피한다.** 요소를 합성 레이어로 올리면
	크롬은 서브픽셀 AA 를 포기하고 회색조로 그린다 — gasp 설정이 더는 관여하지 않는다.
	(-webkit-font-smoothing 은 macOS 전용이라 윈도우에서 혼자서는 아무 일도 하지 않는다.)
	.ec_page 안에 position:fixed/sticky 자손이 없어 포함 블록이 바뀌는 부작용도 없다. */
.ec_page {
	transform:translateZ(0);
	-webkit-backface-visibility:hidden; backface-visibility:hidden;
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/*	이벤트페이지 제작 비용 전용 (2026-10-02)
	guide.css 를 그대로 쓰고, 이 페이지에만 있는 것(계산기·사례 카드)만 여기 둔다.

	지키는 것
	  · WebGL 없음. 캔버스 없음. 전부 CSS 다.
	  · 계산기 무대는 /guide/roulette/ 의 어두운 판과 같은 톤 — 두 글이 한 식구로 보여야 한다.
	  · 어두운 영역에는 회색조 안티에일리어싱. 윈도우 크롬에서 흰 글자가 자글거린다.
	  · prefers-reduced-motion 이면 연출을 끄고 '읽히는 상태'로 고정한다.
*/

/* ── 제목 줄 리빌 (split-lines.js) ───────────────────────────────────── */
[data-split-lines] .split-line { display:block; overflow:hidden; }
[data-split-lines] .split-chunk ~ br { display:none; }
[data-split-lines] .split-line__inner {
	display:block; transform:translateY(105%);
	transition:transform .9s cubic-bezier(.16,1,.3,1);
	transition-delay:calc(var(--line-index, 0) * 90ms);
}
[data-split-lines].is-in .split-line__inner { transform:none; }

/* ── 계산기 ────────────────────────────────────────────────────────────
	"얼마냐"를 찾아 들어온 사람에게 **숫자를 바로** 준다.
	AI 답변을 보고 오는 사람은 이미 금액을 확인하러 온 것이라, 설명보다 계산이 먼저다. */
.ec_calc {
	overflow:hidden;           /* 안쪽 요소가 모서리를 넘지 않게 */
	margin-top:56px; padding:44px 40px 48px;
	border-radius:20px; background:#14141a; color:#fff;
	box-shadow:0 24px 60px -30px rgba(20,20,26,.55);
	/* 글자 회색조 처리는 .ec_page 에서 페이지 전체로 건다 — 파일 맨 위 주석 참고 */
}
.ec_calc__head { margin-bottom:30px; }
.ec_calc__head h2 { margin:0 0 8px; font-size:30px; font-weight:700; letter-spacing:-1px; color:#fff; word-break:keep-all; }
.ec_calc__head p { margin:0; font-size:16px; line-height:1.75; color:#b4b4c0; font-weight:500; word-break:keep-all; }
.ec_calc__head code { padding:2px 7px; border-radius:5px; background:#262630; color:#e3e3e8; font-size:14px; }

.ec_calc__body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:40px; align-items:start; }

/* 선택지 */
.ec_set { margin:0 0 26px; padding:0; border:0; }
.ec_set:last-child { margin-bottom:0; }
.ec_set legend { padding:0; margin-bottom:12px; font-size:13px; font-weight:700; letter-spacing:.3px; color:#9c9ca9; }
.ec_opt {
	display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; padding:14px 16px;
	border:1px solid #2a2a34; border-radius:12px; background:#1a1a22;
	cursor:pointer; transition:border-color .18s ease, background .18s ease;
}
.ec_opt:hover { border-color:#3a3a46; background:#1e1e27; }
.ec_opt input { margin:3px 0 0; accent-color:#ff5851; width:17px; height:17px; flex:0 0 auto; cursor:pointer; }
/*	선 아이콘 — 선택하면 브랜드색으로 바뀐다.
	색을 stroke 에 직접 쓰지 않고 currentColor 로 받아, 글자색 규칙 하나로 같이 움직이게 한다. */
/*	아이콘을 타일에 담는다. 선만 떠 있으면 밋밋해 보인다 —
	둥근 판 위에 올리면 '고르는 것'이라는 게 한눈에 읽힌다. */
.ec_ico {
	flex:0 0 auto; box-sizing:content-box;
	width:24px; height:24px; padding:9px; margin-top:-2px;
	border:1px solid #2e2e3a; border-radius:11px;
	background:linear-gradient(145deg, #23232d, #1b1b24);
	fill:none; stroke:currentColor; stroke-width:1.5;
	stroke-linecap:round; stroke-linejoin:round;
	color:#8a8a98;
	transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.34,1.3,.64,1);
}
.ec_opt:hover .ec_ico { color:#b4b4c2; border-color:#3d3d4a; }
.ec_opt:has(input:checked) .ec_ico {
	color:#ff7a74; border-color:rgba(255,88,81,.5);
	background:linear-gradient(145deg, rgba(255,88,81,.22), rgba(255,88,81,.08));
	transform:scale(1.05);
}
.ec_opt span { display:block; }
.ec_opt b { display:block; font-size:16px; font-weight:700; color:#fff; line-height:1.4; word-break:keep-all; }
/*	어두운 바탕 위 작은 회색 글자는 얇을수록 자글거려 보인다.
	한 단 밝게(#aeaebb) + weight 500 으로 올려 획을 세운다. 대비 7:1 이상. */
.ec_opt em { display:block; margin-top:4px; font-style:normal; font-size:14px; font-weight:500; color:#aeaebb; line-height:1.6; word-break:keep-all; }
/*	고른 것은 테두리로 표시한다 — 글자색을 바꾸면 안 고른 것이 흐려져 읽기 나빠진다 */
.ec_opt:has(input:checked) { border-color:#ff5851; background:rgba(255,88,81,.09); }
.ec_opt:has(input:focus-visible) { outline:3px solid rgba(255,88,81,.55); outline-offset:2px; }

/* 결과 */
/*	결과 카드는 **티켓** 모양이다. 이벤트 글이라 결이 맞고,
	금액이 적힌 자리가 '받는 것'처럼 보여 눈이 먼저 간다.
	양옆 홈은 배경색 원을 겹쳐 파낸 것이다(이미지 없음). */
.ec_out {
	position:relative; padding:26px 24px 24px;
	border:1px solid #2a2a34; border-radius:14px; background:#1a1a22;
}
/*	뜯는 선과 양옆 홈을 **둘 다 목록 상단에 붙인다.**
	카드 위에서 top 값으로 맞추면 금액 자릿수·줄바꿈에 따라 어긋난다
	(모바일에서 홈이 점선보다 30px 아래로 내려갔다). */
.ec_out__list {
	position:relative; margin:0 -24px; padding:0 24px; list-style:none;
	border-top:1px dashed #33333f;
}
.ec_out__list::before, .ec_out__list::after {
	content:''; position:absolute; top:-10px; width:18px; height:18px;
	border:1px solid #2a2a34; border-radius:50%; background:#14141a;
}
.ec_out__list::before { left:-10px;  clip-path:inset(0 0 0 50%); }
.ec_out__list::after  { right:-10px; clip-path:inset(0 50% 0 0); }
.ec_out__lbl { margin:0 0 6px; font-size:13px; font-weight:700; letter-spacing:.3px; color:#9c9ca9; }
.ec_out__sum {
	margin:0 0 20px; font-size:38px; font-weight:800; letter-spacing:-1.4px; color:#fff; line-height:1.15;
	font-variant-numeric:tabular-nums;
}
.ec_out__sum span { margin-left:6px; font-size:17px; font-weight:700; color:#ff8a85; letter-spacing:-.3px; }
.ec_out__list li {
	display:flex; align-items:baseline; justify-content:space-between; gap:12px;
	padding:11px 0; border-bottom:1px solid #2a2a34; font-size:14.5px;
}
.ec_out__list span { color:#c2c2cd; word-break:keep-all; }
.ec_out__list b { color:#fff; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
/*	금액 옆 꼬리표 — '할인 가능' 처럼 숫자만으로 전해지지 않는 조건을 붙인다 */
.ec_out__list b i {
	display:inline-block; margin-left:7px; padding:2px 8px; border-radius:99px;
	background:rgba(255,88,81,.16); color:#ff8a85;
	font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:0;
}
/*	'포함' 은 돈을 안 받는다는 좋은 소식이다. 빨강은 경고로 읽히니 민트 알약으로 뺀다 */
.ec_out__list li.is-inc b {
	padding:2px 9px; border-radius:100px; font-size:12.5px; font-weight:700;
	background:rgba(118,226,184,.14); color:#76e2b8;
}
/*	한 문장 = 한 줄. 문장 중간에서 줄이 넘어가면 금액 설명이 한 덩어리로 읽혀 안 읽힌다 */
.ec_out__note { margin:16px 0 0; font-size:14px; font-weight:500; line-height:1.8; color:#aeaebb; word-break:keep-all; }
.ec_out__note span { display:block; }

.ec_out__btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.ec_copybtn, .ec_gobtn {
	flex:1 1 auto; padding:13px 18px; border-radius:9px;
	font-family:inherit; font-size:15px; font-weight:700; text-align:center; cursor:pointer;
	transition:background .18s ease, border-color .18s ease;
}
.ec_copybtn { border:1px solid #3a3a46; background:transparent; color:#fff; }
.ec_copybtn:hover { border-color:#ff5851; background:rgba(255,88,81,.12); }
.ec_copybtn[data-done="1"] { border-color:#ff5851; background:#ff5851; color:#fff; }
/*	상담 버튼 — 두 가지를 고쳤다 (2026-10-02)
	① 글자색이 #666 으로 나왔다. 사이트 전역 `a` 규칙이 이 한 줄을 이기고 있었다.
	   !important 로 맞싸우지 않고 **클래스 수를 늘려** 이긴다.
	② 흰 글자 on #ff5851 은 대비 3.1:1 이라 15px 글자가 안 읽힌다.
	   어두운 판 위에서는 한 단 내린 #d6392f(4.7:1)가 또렷하고, 브랜드 계열도 유지된다. */
.ec_page .ec_calc .ec_out__btns a.ec_gobtn {
	border:1px solid #d6392f; background:#d6392f; color:#fff; text-decoration:none;
}
.ec_page .ec_calc .ec_out__btns a.ec_gobtn:hover { background:#c4312a; border-color:#c4312a; color:#fff; }
.ec_copybtn:focus-visible, .ec_gobtn:focus-visible { outline:3px solid rgba(255,88,81,.55); outline-offset:3px; }

/* ── 사례 카드 ─────────────────────────────────────────────────────────── */
.ec_cases { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.ec_case {
	padding:28px 26px 30px; border:1px solid #ececec; border-radius:14px; background:#fff;
	transition:border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.ec_case:hover { border-color:#ddd; box-shadow:0 18px 40px -26px rgba(26,26,26,.45); transform:translateY(-3px); }
.ec_case__tag {
	display:inline-block; margin-bottom:12px; padding:4px 10px; border-radius:99px;
	background:#fff5f4; color:#c33a33; font-size:12.5px; font-weight:700;
}
.ec_case h3 { margin:0 0 10px; font-size:21px; font-weight:700; letter-spacing:-.6px; color:#1a1a1a; word-break:keep-all; text-wrap:balance; }
/*	합계를 크게 보여 주고 내역은 아래 작은 줄로 — 셋을 나란히 두면 합계끼리 바로 비교된다.
	min-height 2줄은 내역 길이가 달라도 설명 시작선이 어긋나지 않게 한다. */
.ec_case__price { margin:0 0 2px; font-size:23px; font-weight:800; letter-spacing:-.8px; color:#1a1a1a; word-break:keep-all; font-variant-numeric:tabular-nums; }
.ec_case__price em { font-style:normal; margin-left:4px; font-size:15px; color:#8e8e98; font-weight:700; letter-spacing:0; }
.ec_case__break {
	margin:0 0 14px; min-height:2.9em; font-size:13.5px; line-height:1.65; color:#9a9aa4;
	word-break:keep-all; font-variant-numeric:tabular-nums;
}
.ec_case__desc { margin:0; font-size:16px; line-height:1.8; color:#555; word-break:keep-all; text-wrap:pretty; }

/* ── 닫는 말 ───────────────────────────────────────────────────────────── */
.ec_cta { margin-top:72px; padding:52px 44px; border-radius:20px; background:#f7f7f9; }
.ec_cta h2 { margin:0 0 12px; font-size:32px; font-weight:700; letter-spacing:-1px; color:#1a1a1a; word-break:keep-all; text-wrap:balance; }
.ec_cta p { margin:0 0 26px; font-size:18px; line-height:1.8; color:#555; word-break:keep-all; text-wrap:pretty; }

/* ── 태블릿 ────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
	.ec_calc { margin-top:40px; padding:32px 24px 36px; border-radius:16px; }
	.ec_calc__head h2 { font-size:22px; }
	.ec_calc__head p { font-size:15px; }
	.ec_calc__body { grid-template-columns:1fr; gap:28px; }
	.ec_out__sum { font-size:32px; }
	.ec_cases { grid-template-columns:1fr; gap:14px; }
	.ec_case { padding:22px 20px 24px; }
	.ec_case h3 { font-size:19px; }
	.ec_case__desc { font-size:15px; }
	.ec_cta { margin-top:52px; padding:36px 24px; }
	.ec_cta h2 { font-size:24px; }
	.ec_cta p { font-size:16px; }
}

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width:640px){
	.ec_calc { padding:26px 16px 30px; }
	.ec_opt { padding:12px 13px; }
	.ec_opt b { font-size:15px; }
	.ec_ico { width:22px; height:22px; }
	.ec_out { padding:20px 18px 20px; }
	.ec_out__list { margin:0 -18px; padding:0 18px; }
	.ec_out__sum { font-size:28px; }
	.ec_out__btns { flex-direction:column; }
	.ec_cta { padding:30px 18px; }
}

/* ── 움직임을 원치 않는 사용자 ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
	[data-split-lines] .split-line__inner { transform:none; transition:none; }
	.ec_case, .ec_opt, .ec_copybtn, .ec_gobtn { transition:none; }
	.ec_case:hover { transform:none; }
}

/*	리드 문단도 문장마다 줄을 나눈다 — <br> 대신 블록 span 이라
	좁은 화면에서 문장 안에서만 자연 줄바꿈이 일어난다 (ko-typo W1) */
.ec_lead span { display:block; }

/* ── 45만원 안에 들어 있는 것 ──────────────────────────────────────────
   체크리스트가 아니라 '세어 보는' 목록이다. 아이콘은 계산기와 같은 타일 결을 쓰되
   밝은 바탕이라 톤만 뒤집는다. */
.ec_inc__list {
	display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
	margin:26px 0 0; padding:0; list-style:none;
}
.ec_inc__list li {
	position:relative; padding:22px 24px 22px 70px;
	border:1px solid #ececec; border-radius:14px; background:#fff;
}
.ec_inc__list svg {
	position:absolute; left:22px; top:22px;
	box-sizing:content-box; width:22px; height:22px; padding:8px;
	border:1px solid #ececed; border-radius:11px; background:#fafafb;
	fill:none; stroke:#8e8e98; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.ec_inc__list b {
	display:block; margin-bottom:5px; font-size:17px; font-weight:700;
	letter-spacing:-.4px; color:#1a1a1a; word-break:keep-all;
}
.ec_inc__list span { display:block; font-size:15px; line-height:1.75; color:#666; word-break:keep-all; text-wrap:pretty; }
.ec_inc__list span strong { color:#1a1a1a; font-weight:700; }
/*	'추가 비용 없음' 한 줄이 이 페이지에서 제일 센 카드다. 한 칸만 색을 준다. */
.ec_inc__list li.is-hi { border-color:#ffd9d6; background:#fffaf9; }
.ec_inc__list li.is-hi svg { border-color:#ffd0cc; background:#fff; stroke:#e04a42; }
.ec_inc__list li.is-hi i {
	display:inline-block; margin-left:8px; padding:3px 9px; border-radius:99px;
	background:#ff5851; color:#fff; font-style:normal; font-size:12.5px; font-weight:700;
	letter-spacing:0; vertical-align:2px;
}

/* ── 직접 돌려보기 ─────────────────────────────────────────────────── */
.ec_try {
	position:relative; display:block; overflow:hidden;
	margin-top:28px; padding:38px 320px 40px 40px;
	border-radius:18px; background:#14141a; color:#fff; text-decoration:none;
	transition:box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.ec_try:hover { transform:translateY(-3px); box-shadow:0 26px 60px -34px rgba(20,20,26,.7); }
.ec_try__tag {
	display:inline-block; margin-bottom:12px; padding:4px 11px; border-radius:99px;
	background:rgba(255,88,81,.16); color:#ff8a85; font-size:12.5px; font-weight:700; letter-spacing:.2px;
}
.ec_try strong {
	display:block; margin-bottom:10px; font-size:26px; font-weight:800;
	letter-spacing:-1px; line-height:1.4; color:#fff; word-break:keep-all; text-wrap:balance;
}
.ec_try__desc { display:block; max-width:620px; font-size:16px; line-height:1.8; color:#b4b4c0; word-break:keep-all; text-wrap:pretty; }
.ec_try__go {
	display:inline-block; margin-top:20px; padding:12px 22px; border-radius:9px;
	background:#ff5851; color:#fff; font-size:15px; font-weight:700;
	transition:background .2s ease;
}
.ec_try:hover .ec_try__go { background:#ff423a; }
/*	장식용 룰렛 — 베젤·전구·부채꼴·바늘을 갖춘 '진짜 휠' 모양.
	선만 있는 바퀴는 자전거 바퀴로 보인다. 면을 채워야 룰렛으로 읽힌다.
	호버하면 휠 묶음만 돌고 베젤·전구·바늘은 제자리에 있다 — 실제 룰렛이 그렇게 돈다. */
.ec_try__art {
	position:absolute; right:-34px; top:50%; width:290px; height:290px;
	transform:translateY(-50%); pointer-events:none; overflow:visible;
}
.ec_try__art .art-bezel { fill:none; stroke:rgba(255,255,255,.08); stroke-width:9; }
.ec_try__art .art-bulbs circle { fill:rgba(255,255,255,.22); }
.ec_try__art .s-a { fill:rgba(255,88,81,.16); }
.ec_try__art .s-b { fill:rgba(255,255,255,.045); }
.ec_try__art .art-spokes path { fill:none; stroke:rgba(255,255,255,.09); stroke-width:1.4; }
.ec_try__art .art-rim { fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.6; }
.ec_try__art .art-hub { fill:rgba(255,255,255,.12); }
.ec_try__art .art-pin { fill:rgba(255,88,81,.8); }
.ec_try__art .art-needle { fill:#ff5851; }
.ec_try__art .art-wheel {
	transform-origin:70px 70px;
	transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.ec_try:hover .art-wheel { transform:rotate(112deg); }
.ec_try:hover .art-bulbs circle { fill:rgba(255,196,110,.75); }
.ec_try__art .art-bulbs circle { transition:fill .4s ease; }

@media (max-width:1024px){
	.ec_try { padding:32px 200px 34px 28px; }
	.ec_try strong { font-size:22px; }
	.ec_try__art { width:220px; height:220px; right:-40px; }
}
@media (max-width:640px){
	.ec_inc__list { grid-template-columns:1fr; gap:10px; }
	.ec_inc__list li { padding:18px 18px 18px 60px; }
	.ec_inc__list svg { left:16px; top:18px; width:20px; height:20px; padding:7px; }
	.ec_inc__list b { font-size:16px; }
	.ec_inc__list span { font-size:14.5px; }
	.ec_inc__list li.is-hi i { margin-left:6px; font-size:11.5px; }
	.ec_try { padding:26px 20px 28px; }
	.ec_try strong { font-size:20px; }
	.ec_try__desc { font-size:15px; }
	.ec_try__art { right:-76px; top:auto; bottom:-86px; width:210px; height:210px; transform:none; opacity:.6; }
}
@media (prefers-reduced-motion: reduce){
	.ec_try, .ec_try__art .art-wheel, .ec_try__art .art-bulbs circle { transition:none; }
	.ec_try:hover { transform:none; }
	.ec_try:hover .art-wheel { transform:none; }
}