@charset "utf-8";
/* ============================================================
   좁은 화면 배치 (1199 이하)
   ============================================================
   PC 는 1920 고정 판을 zoom(--k) 으로 줄여 쓴다. 시안 숫자를 그대로 옮길 수 있어서
   그렇게 짰는데, 그 방식은 폰까지 내려가면 글자가 못 읽을 만큼 작아진다.
   그래서 1024 이하는 **판을 걷어내고 흐름 배치로 다시 짠다**.

   여기서만 고친다 — style.css 나 화면별 css 는 건드리지 않는다.
   모든 규칙이 @media 안에 있어서, 이 파일을 빼면 PC 는 1px도 안 변한다.

   자리값이 화면 마크업에 인라인(style="left:…;top:…")으로 박혀 있는 곳이 많다.
   인라인은 선택자보다 세서 !important 로만 이길 수 있다.               */

/* 로고 두 벌 — 넓은 화면에서는 화면이 고른 것(진한 것/흰 것)만 보인다.
   (@media 밖에 있는 유일한 규칙. 이게 없으면 PC 에서 로고가 두 개로 보인다) */
.ex-header__logo .is-onlight { display: none; }

@media (max-width: 1199px) {

	/* ── 판 걷어내기 ───────────────────────────────────── */
	html, body { overflow-x: hidden; }
	.ex-stage {
		width: 100%;
		min-width: 0;
		zoom: 1;
		overflow: visible;
	}

	/* ── 머리글 — 위에 붙어 따라다니는 흰 띠 ───────────── */
	.ex-header {
		position: sticky;
		left: auto;
		top: 0;
		width: 100%;
		height: 58px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		background: #fff;
		box-shadow: 0 1px 0 rgba(0, 0, 0, .07);
		pointer-events: auto;
	}
	.ex-header__logo {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		width: auto;
		height: 26px;
	}
	/* 어두운 화면용 흰 로고는 흰 띠에서 안 보인다 — 모바일은 늘 진한 로고 */
	.ex-header__logo img { width: auto; height: 26px; }
	.ex-header__logo .is-ondark { display: none; }
	.ex-header__logo .is-onlight { display: block; }

	.ex-gnb { display: none; }

	/* 햄버거 */
	.ex-header__menu {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* 줄 간격(2+6=8)을 4의 배수로 — 화면 배율이 1.25·1.5·1.75 여도
		   세 줄이 모두 같은 소수점 자리에 앉아 굵기가 똑같이 그려진다.
		   (7 이면 맨 아래 줄만 한 픽셀 굵게 나온다) */
		gap: 6px;
		width: 42px;
		height: 42px;
		margin-right: -8px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: none;
		cursor: pointer;
	}
	.ex-header__menu span {
		display: block;
		width: 21px;
		height: 2px;
		border-radius: 2px;
		background: #14141e;
		transition: transform .25s ease, opacity .2s ease;
	}
	.ex-header__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.ex-header__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.ex-header__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	/* 열리는 메뉴 */
	.ex-mnav {
		position: fixed;
		left: 0;
		right: 0;
		top: 58px;
		z-index: 60;
		display: block;
		padding: 8px 16px 18px;
		background: #fff;
		box-shadow: 0 14px 28px rgba(20, 20, 40, .16);
	}
	.ex-mnav[hidden] { display: none; }
	.ex-mnav nav { display: flex; flex-direction: column; }
	.ex-mnav a {
		display: block;
		padding: 15px 4px;
		border-bottom: 1px solid #f0f0f5;
		color: #14141e;
		font-size: 16px;
		font-weight: 600;
	}
	.ex-mnav a:last-child { border-bottom: 0; }
	.ex-mnav a.is-current { color: #0b0ff7; font-weight: 800; }
	/* 메뉴가 열려 있는 동안은 뒤가 안 움직이게 */
	body.is-navopen { overflow: hidden; }

	/* ── 바닥글 ───────────────────────────────────────── */
	.ex-footer {
		width: 100%;
		height: auto;
		padding: 44px 20px 40px;
		border-radius: 28px 28px 0 0;
		font-size: 13px;
	}
	.ex-footer__squiggle, .ex-footer__mark { display: none; }
	.ex-footer__logo {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		width: 160px;
		height: auto;
		margin-bottom: 22px;
	}
	.ex-footer__lead {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		margin-bottom: 26px;
		font-size: 21px;
		line-height: 1.45;
		white-space: normal;
	}
	.ex-footer__links,
	.ex-footer__info {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		left: auto;
		top: auto;
	}
	.ex-footer__links { margin-bottom: 14px; }
	.ex-footer__links ul,
	.ex-footer__info {
		flex-wrap: wrap;
		gap: 6px 0;
	}
	/* 줄바꿈이 생기면 가운뎃점이 줄 앞에 오는 일이 있다 — 첫 칸 것만 지운다 */
	.ex-footer__info { margin-bottom: 18px; }
	.ex-footer__addr {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		left: auto;
		top: auto;
		width: auto;
		display: flex;
		flex-direction: column;
		gap: 7px;
	}
	.ex-footer__addr > div { align-items: flex-start; }
	.ex-footer__addr dd { flex-wrap: wrap; }
}

/* 아주 좁은 폰 */
@media (max-width: 380px) {
	.ex-footer__lead { font-size: 19px; }
}

/* ============================================================
   화면별 배치 (1024 이하)
   ============================================================ */
@media (max-width: 1199px) {

	/* ── 포트폴리오 목록 ───────────────────────────────── */
	.pf {
		width: 100%;
		padding: 26px 16px 64px;
	}
	.pf__bg { height: 620px; }
	.pf__count {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		width: auto;
		margin-bottom: 18px;
		font-size: 34px;
		line-height: 1.2;
		text-align: left;
	}
	.pf-cats {
		position: relative; left: auto; top: auto; right: auto; bottom: auto;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		/* 칩이 많아 한 줄에 안 들어간다.
		   옆으로 미는 방식은 **뒤의 두 칸이 잘려 보여** 있는 줄도 모른다.
		   → 두 줄로 접어 네 칸이 모두 보이게 한다. */
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 22px;
		padding-bottom: 0;
		overflow-x: visible;
	}
	.pf-cats::-webkit-scrollbar { display: none; }
	.pf-cats__item { flex: none; height: 42px; padding: 0 16px; }
	.pf-cats__item b { font-size: 15px; }
	.pf-cats__item em { font-size: 12px; }

	.pf-body { width: 100%; }
	.pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.pf-card { width: 100%; height: auto; }
	.pf-card__link { padding: 10px 10px 12px; }
	.pf-card__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
	.pf-card__title { margin-top: 10px; font-size: 14px; line-height: 1.4; }
	.pf-card__com { font-size: 12px; }
	/* 좁은 칸이라 이름표가 한두 개밖에 안 들어간다 —
	   몇 개가 들어가는지는 portfolio.js 가 재서 정하고 나머지는 +N 으로 접는다. */
	.pf-card__tags { margin-top: 8px; height: 22px; }
	.pf-card__tags i { height: 22px; padding: 2px 8px; line-height: 16px; font-size: 11px; }
	.pf-card__cats { gap: 3px; }
	.pf-card__cat { height: 20px; padding: 2px 8px; font-size: 10px; }

	.pf__more, .pf-done { margin-top: 26px; }
	.pf__more-btn { width: 100%; max-width: 260px; }

	/* ── 포트폴리오 상세 ───────────────────────────────── */
	.pv { width: 100%; padding-bottom: 56px; }
	.pv-hero { width: 100%; height: auto; padding: 22px 16px 0; }
	.pv-hero__img { height: 100%; }
	/* 덮개(.pv-hero__veil)가 자리를 잡은 요소라, 글을 흐름으로 돌리면 그 뒤로 숨는다.
	   (목록의 .pf__bg 와 같은 함정) — 글과 그림을 앞으로 끌어올린다.
	   PC 자리값(left·top·bottom)은 하나씩 풀어 줘야 한다. relative 로만 바꾸면
	   그 값이 「밀어내기」로 바뀌어 엉뚱한 데로 간다. */
	.pv-hero__in {
		position: relative;
		z-index: 1;
		left: auto;
		top: auto;
		bottom: auto;
		width: 100%;
	}
	.pv-back {
		position: relative;
		z-index: 2;
		left: auto;
		top: auto;
		margin-bottom: 20px;
	}
	.pv-title { font-size: 26px; }
	.pv-sub { font-size: 14px; }
	.pv-site a { font-size: 13px; word-break: break-all; }
	.pv-hero__cat { height: 24px; padding: 0 11px; font-size: 11px; }
	/* 메인이미지 목업 — 글 밑으로 내려 보낸다 */
	.pv-hero__shot {
		position: relative;
		z-index: 1;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: 340px;
		margin: 22px auto -10px;
	}

	.pv-body { width: 100%; padding: 34px 16px 0; }
	.pv-info__row { flex-direction: column; gap: 3px; padding: 13px 2px; }
	.pv-info dt { width: auto; font-size: 11px; }
	.pv-info dd { font-size: 15px; }
	.pv-sec { margin-top: 40px; }
	.pv-h2 { margin-bottom: 14px; font-size: 17px; }
	/* 한 줄에 하나씩이면 너무 길어진다 — 폰에서도 **두 개씩** 늘어놓는다 */
	.pv-keys { gap: 8px; }
	.pv-keys li { min-width: 0; width: calc(50% - 4px); padding: 11px 12px; font-size: 13px; }
	.pv-keys img { width: 30px; height: 30px; }
	.pv-over { padding: 18px 16px; font-size: 14px; line-height: 1.75; }
	.pv-chips { padding: 14px 14px; gap: 6px; }
	.pv-chips li { height: 30px; padding: 0 13px; font-size: 12px; }
	.pv-tech li { height: 36px; padding: 0 12px; font-size: 12px; }
	/* 화면·관련 프로젝트는 한 줄에 한 칸 */
	.pv-shots, .pv-rel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.pv-shot figure, .pv-rel__thumb { padding: 8px; border-width: 6px; }
	.pv-rel__thumb { min-height: 0; }
	/* 글자 **아래쪽 여백**이 없어 다음 칸과 붙어 보였다 */
	.pv-shot figcaption, .pv-rel strong { padding: 10px 8px 14px; font-size: 15px; }

	/* #17 — Prev/Next 가 한 줄에 못 앉는다.
	   제목이 길면 한쪽이 줄 전체를 차지해 다른 쪽이 아래로 밀려났다.
	   반씩 나눠 갖고, 넘치는 제목은 … 로 줄인다. */
	.pv-nav__prev, .pv-nav__next {
		min-width: 0;
		max-width: calc(50% - 6px);
		align-items: center;
	}
	.pv-nav__next { margin-left: auto; justify-content: flex-end; text-align: right; }
	.pv-nav__prev span, .pv-nav__next span {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.pv-rel em { padding: 2px 8px 14px; font-size: 13px; }
	.pv-rel strong:last-child { padding-bottom: 14px; }
	.pv-list { margin-top: 44px; }
	/* Prev/Next 는 **한 줄에 좌우로** 둔다. 세로로 쌓으면 한쪽만 오른쪽에 붙어
	   서로 어긋나 보인다(제목 길이에 따라 자리가 제각각). */
	.pv-nav { flex-direction: row; gap: 12px; align-items: center; }
	.pv-nav a { max-width: calc(50% - 6px); min-width: 0; align-items: center; }
	.pv-nav__next { margin-left: auto; justify-content: flex-end; text-align: right; }
}

/* ============================================================
   견적문의 · 맞춤 솔루션 (1024 이하)
   ============================================================
   두 화면은 자리값이 화면 마크업에 인라인(style="left:…;top:…")으로 박혀 있다.
   인라인은 선택자보다 세서 !important 로만 풀 수 있다.
   푼 다음에는 마크업 차례대로 위에서 아래로 흐르게 둔다.                 */
@media (max-width: 1199px) {

	/* ── 견적문의 ─────────────────────────────────────── */
	.ct {
		width: 100%;
		height: auto !important;
		padding: 24px 16px 64px;
	}
	.ct__bg { height: 420px; }
	.ct__title { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; font-size: 26px; text-align: left; }
	.ct__lead  { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; margin: 10px 0 26px;
	             font-size: 14px; line-height: 1.6; white-space: normal !important; text-align: left; }
	/* br 를 없애면 앞뒤 글자가 붙는다(「…있도록성심성의껏」) — 그냥 둔다 */
	.ct-err    { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; margin-bottom: 18px; }

	/* 흰 네모(장식)는 접고, 각 묶음이 스스로 카드가 된다 */
	.ct-panel { display: none !important; }

	.ct-form { position: relative; z-index: 1; display: flex; flex-direction: column; }
	.ct__label, .ct__h2, .ct__f, .ct__hint,
	.ct-type, .ct-in, .ct-sel, .ct-at, .ct-file, .ct-file__names, .ct-file__note,
	.ct-agree, .ct__submit, .ct__go, .ct-funcs-wrap, .ct-rest, .ct-file__add {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: auto !important;
		height: auto !important;
		transform: none !important;
	}
	.ct__label, .ct__f { margin: 22px 0 8px; font-size: 14px; }
	.ct__label i, .ct__f i { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; display: inline-block; margin-left: 5px; vertical-align: middle; }
	.ct__h2 { margin: 34px 0 12px; font-size: 19px; }
	.ct__hint { margin: -4px 0 8px; font-size: 12px; }

	/* 행사유형 — 한 줄에 하나씩 */
	/* 안에 절대자리 네모(.ct-type__box)가 들어 있다. 부모를 static 으로 두면
	   그 네모가 **폼 전체**를 덮어 글자가 하나도 안 보인다(실제로 겪었다).
	   __box 를 가진 묶음은 반드시 relative 로 둔다. */
	.ct-type { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
	           /* 16 이면 아이콘이 테두리에 붙어 보인다 */
	           padding: 16px 20px; border: 1px solid #e4e4ee; border-radius: 10px; background: #fff; }
	.ct-type__box { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; }
	/* 네모(__box)가 자리를 잡은 요소라, 그냥 두면 아이콘·글자를 덮는다 — 앞으로 끌어올린다 */
	.ct-type__box { z-index: 0; }
	.ct-type__ico { position: relative !important; right: auto !important; bottom: auto !important; z-index: 1; left: auto !important; top: auto !important;
	                /* 화면 쪽에서 가운데 맞추려고 -16px 를 걸어 뒀다 — 여기선 그만큼 왼쪽으로 새 나간다 */
	                margin: 0 !important; width: 26px !important; height: 26px !important; flex: none; }
	.ct-type b  { position: relative !important; right: auto !important; bottom: auto !important; z-index: 1; left: auto !important; top: auto !important; font-size: 15px; }
	.ct-type em { display: none; }

	/* 필요기능 — 흐름으로 눕힌다 */
	.ct-funcs-wrap { --hd: 0px !important; display: block; }
	.ct-funcs { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; display: flex; flex-wrap: wrap;
	            column-gap: 14px; row-gap: 10px; padding-top: 0 !important; }
	.ct-funcs:not([hidden]) + .ct-funcs:not([hidden]) { margin-top: 18px; }
	.ct-funcs__hd { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; display: block !important; width: 100%; margin-bottom: 2px; }
	.ct-func { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
	           display: inline-flex; align-items: center; height: 26px; padding-left: 34px; }
	.ct-func__box { position: absolute !important; }
	.ct-func__txt { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important; font-size: 13px; }
	/* 판이 길어져도 밑을 안 밀어야 한다 */
	.ct-rest { transform: none !important; }

	.ct-in { width: 100% !important; height: 48px !important; }
	.ct-in--area { height: 160px !important; }
	/* 이메일 — 앞칸 @ 뒷칸을 **한 줄에** 둔다.
	   예전엔 위아래로 쌓고 @ 를 감췄더니 무엇과 무엇 사이인지 알 수 없었다.
	   감싸는 상자가 없어 inline-block 으로 세웠더니 태그 사이 줄바꿈 공백이 끼어들어
	   뒷칸 오른쪽 끝이 밑의 「직접입력」보다 11px 짧았다(사용자 지적).
	   띄우기(float)는 그 공백을 안 먹으므로 폭이 딱 떨어진다 — 50%−16 + 32 + 50%−16 = 100%. */
	.ct-rest .ct-in[name="email1"],
	.ct-rest .ct-in[name="email2"] {
		float: left;
		width: calc(50% - 16px) !important;
		/* 밑의 「직접입력」과 띄우는 몫. clear 를 건 상자는 위 여백이
		   「띄우기(clearance)」에 먹히므로, **뜬 칸의 아래 여백**으로 밀어야 한다. */
		margin-bottom: 5px;
	}
	.ct-at {
		float: left;
		/* 위쪽 묶음 규칙이 .ct-at 에 width/height: auto !important 를 걸어 둔다 — 여기도 !important 라야 이긴다 */
		width: 32px !important;
		height: 48px !important;
		line-height: 48px;
		text-align: center;
		color: #6b6880;
		font-size: 15px;
	}
	/* 뜬 세 칸 다음 줄은 끊어 준다 — 안 그러면 「직접입력」이 옆에 붙는다 */
	.ct-sel { clear: both; width: 100% !important; height: 48px !important; margin-top: 8px; }
	/* 이메일 뒤의 「직접입력」만은 위 칸이 띄워져 있어 margin-top 이 안 먹는다 — 위 칸 쪽에서 띄운다.
	   (data-i="1" 이 이메일 것이다. 예산 범위 것[data-i="2"]까지 지우면 안 된다) */
	.ct-rest .ct-sel[data-i="1"] { margin-top: 0; }
	/* 예산 범위 — 고르는 칸과 「직접 입력해 주세요」 칸 사이 */
	.ct-rest .ct-in[name="budget_etc"] { margin-top: 5px; }
	.ct-sel select { height: 48px; font-size: 15px; }

	/* 첨부파일 — 검은 단추가 .ct-file 안의 절대자리 span 이다.
	   부모 크기를 0 으로 두면 그 span 이 폼 맨 위로 튀어 오른다(실제로 겪었다). */
	.ct-file { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; display: inline-block;
	           width: 120px !important; height: 40px !important; vertical-align: middle; }
	.ct-file span { position: absolute !important; }
	.ct-file__add { display: inline-flex; margin-left: 10px; vertical-align: middle; }
	.ct-file__names, .ct-file__note { display: block; margin-top: 8px; font-size: 12px; white-space: normal; }

	/* 네모(.ct-agree__box)는 절대자리라 **자리를 차지하지 않는다**.
	   flex 로 늘어놓아도 글이 첫 칸부터 시작해 네모 위로 올라타 겹쳐 보였다.
	   왼쪽에 네모 몫(26 + 틈 10)만큼 자리를 비워 두고, 글은 줄바꿈을 허락한다. */
	.ct-agree { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
	            display: block; min-height: 26px; padding-left: 36px; margin-top: 26px; }
	.ct-agree__box { position: absolute !important; left: 0 !important; top: 0 !important; }
	.ct-agree__txt, .ct-agree__more { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; font-size: 13px; }
	/* 화면에서는 한 줄로 못 박혀 있다 — 폰에서는 접혀야 한다 */
	.ct-agree__txt { display: block; white-space: normal; line-height: 1.5; }
	.ct-agree__more { display: inline-flex; margin-top: 10px; }
	.ct__go { margin-top: 28px; text-align: center; }
	.ct__submit { display: inline-flex; align-items: center; justify-content: center;
	              width: 100% !important; max-width: 280px; height: 54px !important; }

	/* 접수 끝난 화면 */
	.ct--done { padding-bottom: 80px; }
	.ct-done { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; padding: 60px 4px 0; text-align: center; }
	.ct-done__title { font-size: 24px; }
	.ct-done__lead { font-size: 14px; }
	/* 두 단추를 나란히, 같은 크기로. 화면(PC)에서는 글자 길이만큼(padding 34)이라
	   「메인으로」가 「포트폴리오 보기」보다 짧았다 — 여기서는 반씩 나눠 갖게 한다. */
	.ct-done__btns { display: flex; flex-direction: row; gap: 10px; align-items: stretch; }
	/* flex-basis: 0 은 **속(content-box)** 기준이라, border-box 를 걸어도
	   테두리가 있는 「포트폴리오 보기」만 2px 넓어진다.
	   「메인으로」에 같은 두께의 투명 테두리를 둘러 둘을 똑같이 맞춘다. */
	.ct-done__go, .ct-done__sub { flex: 1 1 0; box-sizing: border-box; min-width: 0;
	                              height: 54px; padding: 0 10px; font-size: 15px; }
	.ct-done__go { border: 1px solid transparent; }
}

/* ============================================================
   맞춤 솔루션 찾기 (1024 이하)
   ============================================================ */
@media (max-width: 1199px) {

	.sol { width: 100%; padding: 24px 0 40px; }
	.sol__bg { height: 100%; }
	.sol__card {
		position: relative;
		margin-left: 12px !important;
		margin-right: 12px !important;
		left: auto !important;
		top: auto !important;
		width: calc(100% - 24px) !important;
		min-height: 0 !important;
		margin: 0 12px;
		padding: 18px 16px 26px;
		border-radius: 18px;
	}

	/* 01·02·03 — 카드 위쪽 가운데 */
	.sol-steps {
		position: relative !important; right: auto !important; bottom: auto !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		display: flex;
		justify-content: center;
		/* 10 이면 동그라미(38)끼리 붙어 보인다 */
		gap: 18px;
		margin-bottom: 18px;
	}
	/* 안에 절대자리 글자(span)가 있다 — static 으로 두면 셋이 한자리에 겹친다 */
	.sol-steps li { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
	.sol-steps li + li::before { display: none; }

	.sol-step { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; min-height: 0 !important; padding: 0 !important; }
	.sol__badge, .sol__q, .sol__sub {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		transform: none !important;
		text-align: left;
	}
	/* 화면(PC)에서는 80×40 알약이다. 여기서 width:auto 로 풀리는 바람에
	   글자만큼만 줄어 「Step 1」이 테두리에 꽉 차 보였다 — 화면과 같은 크기로 되돌린다. */
	.sol__badge { display: inline-flex; align-items: center; justify-content: center;
	              width: 80px !important; height: 40px; line-height: 1; margin-bottom: 12px; }
	.sol__badge::before, .sol__badge::after { display: none; }
	.sol__q   { font-size: 21px; line-height: 1.4; }
	.sol__sub { margin: 6px 0 18px; font-size: 13px; }

	/* 1단계 유형 고르기 — 한 줄에 하나 */
	/* 시안에서는 높이 0 짜리 기준 상자였다 — 흐름에서는 내용만큼 늘어나야 한다 */
	.sol-pick { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important;
	            display: flex; flex-direction: column; gap: 10px; }
	.sol-pick__item {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
	}
	.sol-pick__box {
		position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
		inset: auto !important;
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100% !important;
		height: auto !important;
		/* 16 이면 아이콘이 테두리에 붙어 보인다 */
		padding: 16px 20px;
	}
	/* 화면 쪽에서 가운데 맞추려고 -16px 를 걸어 뒀다 — 여기선 그만큼 왼쪽으로 새 나가
	   안쪽 여백 20px 이 5px 처럼 보였다(견적문의 행사유형 칸과 같은 일). */
	.sol-pick__ico  { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
	                  margin: 0 !important; flex: none; }
	.sol-pick__name { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
	                  width: auto !important; font-size: 15px; text-align: left; }
	.sol-pick__desc { display: none; }
	.sol-pick__item input:checked + .sol-pick__box .sol-pick__ico,
	.sol-pick__item input:checked + .sol-pick__box .sol-pick__name,
	.sol-pick__item input:checked + .sol-pick__box .sol-pick__desc { top: auto; }

	/* 2단계 기능 고르기 */
	.sol-fnsets { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; padding: 0 !important; }
	/* 화면에서는 높이가 calc(170 × (--rows − 1) + 378 + --hd) 로 못 박혀 있다.
	   폰에서는 기능 칸이 한 줄에 하나씩 쌓여 그 높이를 훌쩍 넘는다 — 그대로 두면
	   맨 아래 「확장 옵션」 묶음이 상자 밖으로 삐져나와 「이전」·「다음」 단추에 깔린다. */
	.sol-fnset  { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
	              height: auto !important; min-height: 0 !important; }
	.sol-fnset__hd { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; margin: 14px 0 8px; }
	.sol-fn { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important;
	          display: flex; flex-direction: column; gap: 8px; }
	.sol-fn__item {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
	}
	.sol-fn__box {
		position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		/* 번호 딱지가 왼쪽 15~48 을 쓴다 — 46 이면 이름이 번호와 겹친다 */
		padding: 12px 40px 12px 60px;
	}
	.sol-fn__no   { position: absolute !important; left: 14px !important; top: 13px !important; }
	.sol-fn__name { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
	                width: auto !important; font-size: 14px; }
	.sol-fn__desc { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
	                width: auto !important; margin-top: 3px; font-size: 12px; }
	/* 「핵심」 딱지 — 폰에서는 한 치수 줄인다(설명 자리는 위 padding-right 로 비워 뒀다) */
	.sol-fn__key  { position: absolute !important; right: 8px !important; left: auto !important; top: 6px !important;
	                transform: scale(.78); transform-origin: 100% 0; }
	/* 안쪽 여백이 30/25 라 확장 옵션만 안으로 쑥 들어가 위 카드와 줄이 안 맞았다 */
	.sol-opt { padding: 16px 12px !important;
	           position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important;
	           display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
	/* 화면에서는 칸이 flex: 0 0 460px(확장 옵션이 넷 이상이면 344px) 에 height 150px 다.
	   여기서는 세로로 쌓으니 그 **basis 가 높이**로 걸려 빈 자리가 300px씩 생겼다.
	   basis 와 높이를 둘 다 풀어 글만큼만 차지하게 한다. */
	.sol-opt__item { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
	                 flex: none !important; width: 100% !important; height: auto !important; }
	.sol-opt__box  { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; inset: auto !important; width: 100% !important; height: auto !important; padding: 12px 14px; }
	/* 「확장 옵션」 알약 — 화면에서는 line-height 로 글자를 가운데 놓는데
	   inline-flex 로 바꾸면 그게 안 먹어 글자가 왼쪽 위로 붙었다. 양쪽으로 가운데 맞춘다. */
	.sol-opt__chip { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
	                 display: inline-flex; align-items: center; justify-content: center;
	                 width: auto !important; height: 24px !important; padding: 0 12px;
	                 font-size: 11px; line-height: 1; margin-bottom: 6px; }
	.sol-opt__box b, .sol-opt__box em { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important; display: block; width: auto !important; }

	/* 3단계 추천 — 추천 카드(.sol-rec)는 시안에서 **절대자리(left:339, 폭 500)** 라
	   폰에서 그대로 두면 화면 밖으로 500px 나가 통째로 잘렸다.
	   카드와 그 속을 모두 흐름 배치로 되돌린다. */
	.sol-rec-row .sol-rec,
	.sol-rec-row .sol-shot,
	.sol-rec {
		position: relative !important;
		left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 0 14px !important;
		padding: 16px 14px !important;
		box-sizing: border-box;
	}
	.sol-rec__chip, .sol-rec__title, .sol-rec__desc, .sol-rec__chips,
	.sol-rec__h, .sol-rec__panel, .sol-rec__seq {
		position: relative !important;
		left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
	}
	/* 화면에서는 101px 알약에 line-height 로 글자를 가운데 놓는데,
	   inline-flex 로 바꾸면 그게 안 먹고 폭도 글자만큼만 남아 둥근 끝에 글자가 잘렸다. */
	.sol-rec__chip  { display: inline-flex; align-items: center; justify-content: center;
	                  width: auto !important; height: 26px !important; padding: 0 14px;
	                  line-height: 1; margin-bottom: 8px; }
	.sol-rec__title { display: block; font-size: 20px; margin-bottom: 6px; }
	.sol-rec__desc  { display: block; font-size: 13px; margin-bottom: 10px; }
	.sol-rec__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
	.sol-rec__h     { display: block; margin-bottom: 8px; }
	/* 화면에서는 높이 188px 안에서 가운데로 놓여 위아래가 알아서 벌어진다.
	   여기서는 글만큼만 줄어들어 판에 딱 붙었다 — 위아래 10px 를 준다. */
	.sol-rec__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
	                  padding: 10px 20px 10px 51px; }
	.sol-rec__panel span { position: relative !important; left: auto !important; top: auto !important;
	                       width: auto !important; font-size: 13px; }
	/* 굴러가는 그림 줄 — 창 폭에 맞추고 넘치는 것은 감춘다 */
	.sol-roll__win  { width: 100% !important; max-width: 100% !important; overflow: hidden; }
	.sol-roll__track { width: auto !important; }
	.sol-roll__it   { flex: none; }
	.sol-recs--many { padding-top: 0 !important; }

	/* 제목(.sol__q) 바로 밑에 붙어 있었다 — 한 숨 띄운다 */
	.sol-recs { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; padding: 0 !important;
	            margin-top: 10px; }
	/* 화면에서는 줄 높이가 532px 로 못 박혀 있다 — 카드 둘이 절대자리라 스스로 높이를 낼 수 없어서다.
	   폰에서는 그 둘이 세로로 쌓여 532px 을 훌쩍 넘으니, 그대로 두면 사례 그림이 줄 밖으로 삐져나와
	   밑에 있는 「이전」·「처음으로」 단추를 덮는다. 높이를 풀어 준다. */
	.sol-rec-row { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; display: block; height: auto !important; min-height: 0 !important; margin-bottom: 22px; }
	.sol-shot, .sol-shot__main, .sol-roll {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
	}
	.sol-shot img, .sol-shot__main img { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; }
	/* 대표 사례의 업체명·제목은 화면에서 절대자리(top 256/278)다. 여기서 안 풀어 두어
	   카드(overflow:hidden) 밖으로 밀려나 **아예 안 보이고** 있었다.
	   흐름으로 되돌리고, 화면과 같은 차례(업체명 → 제목)가 되게 순서를 준다. */
	.sol-shot__main { display: flex; flex-direction: column; }
	.sol-shot__main img { order: 1; }
	.sol-shot__main em, .sol-shot__main b {
		position: relative !important;
		left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
		width: auto !important;
	}
	.sol-shot__main em { order: 2; margin-top: 12px; font-size: 13px; }
	.sol-shot__main b  { order: 3; margin-top: 2px; font-size: 18px; line-height: 1.3; }
	.sol-roll { margin-top: 16px; }

	/* 단추 — 아래에 나란히 */
	.sol__go, .sol__back, .sol__first {
		position: relative !important; top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
	}
	.sol__next, .sol__prev, .sol__first button {
		width: 100%;
		max-width: none;
	}
	.sol__go { margin-top: 22px; }
	.sol__back, .sol__first { margin-top: 10px; }
	/* 이전 · 다음 단추 — 사이가 너무 벌어져 있었다(22+10).
	   두 단추가 서로 다른 상자(.sol__back / .sol__go) 안에 있어 양쪽을 다 잡아야 한다. */
	.sol__prev, .sol__next { margin: 0 !important; }
	.sol__go { margin-top: 10px !important; }

	.sol-pick__none { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; margin-top: 12px; }
}

/* 바닥글 주소 — 좁은 화면에서 옆으로 삐져나오지 않게 */
@media (max-width: 1199px) {
	.ex-footer__addr dd { word-break: break-all; }
	.ex-footer__addr dt { min-width: 42px; }
}

/* ============================================================
   메인 (1024 이하)
   ============================================================
   메인은 카드와 그 위의 글자·아이콘이 **형제**라 그대로는 흐름 배치가 안 된다.
   그래서 화면(main.php)에서 조각들을 .mn-g 로 묶어 두었다.
   넓은 화면에서는 그 묶음이 display:contents 라 상자가 없어 PC 는 1px도 안 바뀐다. */

.mn-g { display: contents; }

@media (max-width: 1199px) {

	.mn { width: 100%; height: auto !important; padding: 22px 16px 54px; }
	.mn__bg { height: 560px; object-fit: cover; }

	/* 머리말 */
	.mn-eyebrow, .mn-lead {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		text-align: left;
	}
	.mn-eyebrow { margin-bottom: 8px; font-size: 13px; }
	.mn-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; }
	.mn-lead__mark { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 168px; height: auto; }
	.mn-lead__txt  { position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important; font-size: 22px; }

	/* 인증 배지 — 알약과 손 그림은 접고 글자만 한 줄로 */
	.mn-badge, .mn-badge__hands { display: none; }
	.mn-badge__t {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		display: inline-block;
		margin: 0 10px 8px 0;
		font-size: 12px;
	}

	/* ── 숫자 카드 ─────────────────────────────────── */
	.mn-g--stat {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 8px;
		padding: 16px 18px;
		border-radius: 14px;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 6px 18px rgba(30, 30, 80, .07);
	}
	.mn-g--stat .mn-card { display: none; }        /* 시안의 흰 네모는 묶음이 대신한다 */
	.mn-stat__ico {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		flex: none;
		width: 26px; height: 26px;
		object-fit: contain;
	}
	.mn-stat__label {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		flex: 1;
		font-size: 14px;
	}
	.mn-stat__num {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		font-size: 22px;
		white-space: nowrap;
	}

	/* ── 행사유형 그래프 ────────────────────────────
	   막대·눈금은 1920 판 좌표에 촘촘히 박혀 있어 좁은 화면으로 못 옮긴다.
	   숫자와 이름은 그대로 있으니, 간단한 목록으로 바꿔 보여 준다. */
	.mn-g--chart {
		position: relative;
		display: block;
		margin: 18px 0 8px;
		padding: 18px;
		border-radius: 14px;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 6px 18px rgba(30, 30, 80, .07);
	}
	.mn-chart__y, .mn-chart__line, .mn-chart__bar, .mn-chart__dot { display: none !important; }
	/* 카드 네모는 **감추지 않는다** — display:none 이면 fx.js 가 화면에 들어온 줄 몰라
	   숫자 세기가 0%% 에서 멈춘다(실제로 겪었다). 뒤에 깔아 카드 바탕으로 쓴다. */
	.mn-g--chart .mn-card {
		position: absolute !important;
		left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
		width: auto !important; height: auto !important;
		z-index: 0;
	}
	.mn-g--chart .mn-card__title, .mn-g--chart .mn-chart__x, .mn-g--chart .mn-chart__tip { z-index: 1; }
	.mn-g--chart .mn-card__title {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		margin-bottom: 12px;
		font-size: 17px;
	}
	.mn-chart__x, .mn-chart__tip {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		width: auto !important;
		height: auto !important;
		background: none !important;
		box-shadow: none !important;
	}
	.mn-chart__x {
		position: relative;
		z-index: 1;
		display: inline-block;
		width: 60% !important;
		color: #33333f;
		font-size: 14px;
		text-align: left;
	}
	.mn-chart__tip {
		position: relative;
		z-index: 1;
		display: inline-block;
		width: 38% !important;
		color: #6136d9;
		font-size: 15px;
		font-weight: 800;
		text-align: right;
	}
	.mn-chart__tip::after { display: none !important; }
	/* fx.css 가 화면에 들어오기 전까지 opacity 0 · top 707 로 숨겨 둔다.
	   흐름 배치에서는 그 장치가 필요 없다 — 처음부터 보이게 한다. */
	html.js .mn-chart__tip { top: auto !important; opacity: 1 !important; transition: none !important; }
	/* 말풍선 알맹이(b)가 제 배경·크기를 갖고 있다 — 흐름에서는 글자만 남긴다 */
	.mn-chart__tip b {
		display: inline !important;
		width: auto !important;
		height: auto !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: inherit !important;
		font-size: inherit !important;
	}
	/* 이름 → 값 차례가 되게 한 줄씩 */
	.mn-g--chart .mn-chart__x  { order: 1; }
	.mn-g--chart .mn-chart__tip { order: 2; }

	/* ── 유형별 주요 기능 ───────────────────────────── */
	.mn-g--feat {
		display: block;
		margin-bottom: 8px;
		padding: 18px;
		border-radius: 14px;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 6px 18px rgba(30, 30, 80, .07);
	}
	.mn-g--feat .mn-card { display: none; }
	.mn-g--feat .mn-card__title {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		margin-bottom: 12px;
		font-size: 17px;
	}
	.mn-feat__tabbar {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		display: flex;
		gap: 6px;
		margin-bottom: 14px;
		padding: 0 !important;
		overflow-x: auto;
		scrollbar-width: none;
		background: none !important;
	}
	.mn-feat__tabbar::-webkit-scrollbar { display: none; }
	.mn-feat__tab { flex: none; height: 32px; padding: 0 12px; font-size: 13px; }

	/* 아이콘 + 이름 한 쌍이 한 칸 */
	.mn-g--feat1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		text-align: center;
	}
	.mn-g--feat1:has(> [hidden]) { display: none; }   /* 안 보이는 장은 자리도 안 차지한다 */
	.mn-feat__ico {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: 40px; height: 40px;
	}
	.mn-feat__name {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		font-size: 11px;
		line-height: 1.35;
	}
	/* 제목·탭·넘기기는 한 줄을 통째로, 기능 칸은 넉 줄로 흘린다 */
	.mn-g--feat { display: flex; flex-wrap: wrap; gap: 14px 12px; }
	/* width:100%% 만으로는 모자란다 — flex 는 줄이 모자라면 줄여 버린다.
	   flex: 0 0 100%% 라야 제 줄을 통째로 차지한다. */
	.mn-g--feat > .mn-card__title,
	.mn-g--feat > .mn-feat__tabbar,
	.mn-g--feat > .mn-feat__pager { flex: 0 0 100%; margin-bottom: 0; }
	.mn-g--feat .mn-g--feat1 { width: calc(25% - 9px); }
	.mn-feat__pager {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 14px;
	}

	/* ── 안내 두 장 ─────────────────────────────────── */
	/* 배너는 시안이 360×170 짜리 **카드**다. 화면 폭에 맞춰 끝까지 늘리면
	   혼자 1.7배가 되어(그림 안 글자까지 같이 커진다) 다른 칸보다 커 보인다.
	   시안 크기를 조금 넘는 선에서 끊고 가운데에 둔다. */
	.mn-cta {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		display: block;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 360 / 170;
		margin-bottom: 10px;
	}
	/* 배너 그림만 꽉 채운다. .mn-cta__ico 도 img 라서 그냥 「.mn-cta img」 로 잡으면
	   60px 짜리 아이콘이 카드 전체로 늘어난다(분홍 덩어리가 그것이었다). */
	.mn-cta > img:not(.mn-cta__ico) { width: 100% !important; height: 100% !important; object-fit: cover; }
	/* 시안에서는 배너 안 x34 y53 인데, 배너가 화면 폭에 맞춰 늘어나므로 비율로 잡는다 */
	/* 배너는 360×170 비율을 그대로 지키므로, 안쪽 자리도 **비율**로 잡으면
	   어느 폭에서도 시안과 같은 자리에 온다.
	   (px 로 두면 글자가 그림 속 아이콘 위로 올라탄다 — 실제로 겪었다) */
	.mn-cta__ico {
		left: 9.4% !important;        /* 34 / 360 */
		top: 31.2% !important;        /* 53 / 170 */
		width: 16.7% !important;      /* 60 / 360 */
		height: auto !important;
		aspect-ratio: 1;
	}
	.mn-cta b, .mn-cta span {
		left: 33.9% !important;       /* 122 / 360 */
		right: 5% !important;
		width: auto !important;
	}
	.mn-cta[data-i="1"] b    { top: 31.8% !important; }   /* 54 / 170 */
	.mn-cta[data-i="1"] span { top: 51.8% !important; }   /* 88 / 170 */
	.mn-cta[data-i="2"] b    { top: 27.1% !important; }   /* 46 / 170 */
	.mn-cta[data-i="2"] span { top: 47.1% !important; }   /* 80 / 170 */
	/* 「추천 솔루션 보기 →」 는 배너 **그림 안에 박혀 있어** 카드가 커지면 같이 커진다.
	   제목·설명만 px 로 두면 단추 글자가 제목보다 커지는 역전이 생긴다(실제로 겪었다).
	   카드 폭을 기준(cqw)으로 잡아 시안 비율 그대로 같이 커지게 한다.
	     제목 20 / 360 = 5.56cqw · 설명 14 / 360 = 3.89cqw
	   컨테이너 질의를 모르는 옛 브라우저를 위해 px 값을 먼저 적어 둔다. */
	.mn-cta { container-type: inline-size; }
	.mn-cta b    { font-size: 16px; font-size: 5.56cqw; }
	/* 줄 높이도 같이 늘어나야 한다 — 시안의 17px 고정을 두면 글자만 커져 줄이 겹친다 */
	.mn-cta span { font-size: 12px; font-size: 3.89cqw; line-height: 1.45 !important; }

	/* ── 포트폴리오 ─────────────────────────────────── */
	.mn-g--pf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.mn-g--pf > .mn-pf__title, .mn-g--pf > .mn-pf__more { grid-column: 1 / -1; }
	.mn-pf__title {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		margin: 30px 0 4px;
		font-size: 22px;
	}
	.mn-pf__more {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		display: inline-flex;
		margin-bottom: 14px;
	}
	.mn-pf {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
	}
	.mn-pf { padding: 10px 10px 12px; }
	.mn-pf__thumb { position: relative !important; left: auto !important; top: auto !important;
	                width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; }
	.mn-pf__thumb img { width: 100%; height: 100%; }
	.mn-pf__cats, .mn-pf__name {
		position: relative !important; right: auto !important; bottom: auto !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		display: block;
	}
	/* 카드 안쪽 여백(10)만큼 더 들여야 **그림 안에** 앉는다.
	   8 로 두면 둥근 모서리 위·옆으로 딱지가 삐져나온다. */
	.mn-pf__cats { position: absolute !important; left: 18px !important; top: 18px !important;
	               right: 18px !important; max-width: calc(100% - 36px); gap: 3px; }
	.mn-pf__cat  { height: 20px; padding: 0 9px; font-size: 10px;
	               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* main.css 가 한 줄(nowrap)로 묶어 두어 이름이 카드 밖으로 삐져나온다 —
	   두 줄까지 보여 주고 그 뒤는 … 로 줄인다. */
	.mn-pf__name { margin-top: 8px; font-size: 13px; line-height: 1.4; text-align: left;
	               white-space: normal !important; word-break: keep-all;
	               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	               overflow: hidden; }
}

/* ============================================================
   태블릿 · 노트북 단계 (768 ~ 1279)
   ============================================================
   위의 규칙은 폰(한 줄에 하나)을 기준으로 짰다. 여기서는 넓어진 만큼
   **여러 열로 되돌린다**. 1280 이상은 예전대로 1920 판을 zoom 으로 줄여 쓴다.

   ※ 반드시 위의 폰 규칙 **뒤**에 와야 덮어쓴다.                            */
@media (min-width: 768px) and (max-width: 1199px) {

	/* 좌우 여백 — 768 에서 28, 1199 에서 60 까지만 벌어진다 */
	.ex-stage { --gut: clamp(28px, 2.6vw, 60px); }

	/* 인증 배지는 흐름에서 빼 둔다. 흐름에 두면 뒤에 오는 숫자카드 float 가
	   배지 옆에서 시작해 넉 장이 한 줄에 안 들어간다. */
	.mn-badge__t {
		position: absolute !important;
		right: 28px !important;
		left: auto !important;
		top: 96px !important;
		margin: 0 !important;
	}
	.mn-badge__t[data-i="2"] { right: 106px !important; }
	.mn-badge__t[data-i="1"] { right: 206px !important; }

	/* 가운데로 모으고, 좌우 여백은 화면이 넓어질수록 조금씩만 벌어지게 한다.
	   시안(1920)은 좌우 220 이지만, 그보다 좁은 화면에서 그 비율을 그대로 두면
	   가운데만 쓰고 양옆이 휑해 보인다(사용자 지적). */
	.mn, .pf, .pv-body, .ct { max-width: 1500px; margin-left: auto; margin-right: auto; }
	.mn { padding: 30px var(--gut) 70px; }
	.pf { padding: 34px var(--gut) 80px; }
	.pv-hero { padding: 30px var(--gut) 0; }
	.pv-body { padding: 44px var(--gut) 0; }
	.ct  { padding: 34px var(--gut) 80px; }

	/* ── 머리글 — 메뉴 띠가 들어가니 햄버거를 접는다 ───── */
	.ex-header { height: 72px; padding: 0 28px; }
	.ex-header__logo { height: 30px; }
	.ex-header__logo img { height: 30px; }
	.ex-header__menu { display: none; }
	.ex-mnav { display: none !important; }
	.ex-gnb {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		height: 46px;
		display: flex;
		gap: 30px;
		padding: 0 28px;
		font-size: 15px;
	}

	/* ── 바닥글 ───────────────────────────────────────── */
	.ex-footer { padding: 56px 40px 48px; }
	.ex-footer__lead { font-size: 30px; }
	.ex-footer__addr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 28px; }

	/* ── 메인 ─────────────────────────────────────────── */
	.mn-lead__mark { width: 220px; }
	.mn-lead__txt  { font-size: 30px; }
	/* 숫자 카드 넉 장을 한 줄에 */
	.mn-g--stat {
		float: left;
		width: calc(25% - 9px);
		margin-right: 12px;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		min-height: 118px;
	}
	.mn-g--stat:nth-of-type(4n) { margin-right: 0; }
	.mn-g--stat .mn-stat__label { flex: none; font-size: 13px; }
	.mn-g--stat .mn-stat__num { font-size: 28px; }
	/* 넉 장 뒤로 흐름을 끊는다 */
	.mn-g--chart { clear: both; }

	/* 그래프·기능·안내를 두 줄로 */
	.mn-g--chart { width: calc(38% - 6px); float: left; margin: 20px 12px 12px 0; }
	.mn-g--feat  { width: calc(62% - 6px); float: left; margin: 20px 0 12px; }
	.mn-g--feat .mn-g--feat1 { width: calc(16.666% - 10px); }
	/* 폰 단계에서 width:100%% !important 를 걸어 두었으므로 여기서도 !important 라야 이긴다 */
	.mn-cta { float: left; width: calc(50% - 6px) !important; margin-right: 12px; }
	/* 줄을 끊는 것은 **첫 장만** — 둘 다 clear 하면 세로로 쌓인다 */
	.mn-cta[data-i="1"] { clear: both; }
	.mn-cta[data-i="2"] { clear: none; margin-right: 0; }
	.mn-g--pf { clear: both; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 14px; }
	.mn-pf__title { font-size: 28px; }

	/* ── 포트폴리오 목록 ───────────────────────────────── */
	.pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.pf-card__title { font-size: 16px; }
	.pf-card__com { font-size: 13px; }
	.pf-card__tags { display: flex; }          /* 넓어졌으니 기능 표를 되살린다 */
	.pf-card__cat { height: 22px; font-size: 11px; }

	/* ── 포트폴리오 상세 ───────────────────────────────── */
	.pv-title { font-size: 38px; }
	.pv-hero__shot { max-width: 420px; margin: 26px auto -10px; }
	.pv-info__row { flex-direction: row; align-items: baseline; gap: 24px; padding: 16px 4px; }
	.pv-info dt { width: 150px; font-size: 13px; }
	.pv-info dd { font-size: 16px; }
	.pv-keys li { width: calc(50% - 4px); }
	.pv-shots, .pv-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.pv-h2 { font-size: 20px; }

	/* ── 맞춤 솔루션 ───────────────────────────────────── */
	.sol__card { width: calc(100% - 56px) !important; margin: 0 28px; padding: 26px 28px 34px; }
	.sol__q { font-size: 26px; }
	.sol-pick { flex-direction: row; gap: 14px; }
	.sol-pick__item { width: calc(33.333% - 10px) !important; }
	.sol-pick__box { flex-direction: column; text-align: center; padding: 20px 14px; }
	.sol-pick__desc { display: block; position: relative !important; left: auto !important; top: auto !important;
	                  width: auto !important; margin-top: 6px; text-align: center; }
	.sol-fn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.sol-opt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* 한 줄에 둘(확장 옵션은 셋)씩 놓이는데, 이름·설명 길이가 제각각이라
	   한쪽만 두 줄이 되면 옆 칸과 아래끝이 안 맞았다(03·04 처럼).
	   겉(label)은 grid 가 줄 높이만큼 늘려 주지만 속(__box)은 글자만큼만 남는다 —
	   겉을 flex 로 두고 속을 끝까지 채워 **한 줄은 같은 높이**가 되게 한다. */
	.sol-fn__item, .sol-opt__item, .sol-pick__item { display: flex; }
	.sol-fn__box, .sol-opt__box, .sol-pick__box   { flex: 1; height: auto !important; }
	.sol__go, .sol__back, .sol__first { display: inline-block; margin-right: 10px; }
	.sol__next, .sol__prev, .sol__first button { width: 200px; }

	/* ── 견적문의 ─────────────────────────────────────── */
	/* 폰 단계에서 .ct-form 을 세로 flex 로 두었는데, flex 안에서는 float 가 안 먹는다.
	   여기서는 다시 블록으로 돌려야 행사유형 세 칸이 한 줄에 선다. */
	.ct-form { display: block; }
	.ct__title { font-size: 34px; }
	.ct-type { float: left; width: calc(33.333% - 8px) !important; margin-right: 12px;
	           flex-direction: column; align-items: center; gap: 8px; min-height: 104px; text-align: center; }
	.ct-type:nth-of-type(3n) { margin-right: 0; }
	.ct-type em { display: block; position: relative !important; left: auto !important; top: auto !important;
	              width: auto !important; font-size: 12px; }
	/* 떠 있는 행사유형 칸 다음 줄은 반드시 끊어 준다 — 안 그러면 옆에 붙는다 */
	.ct__label, .ct__h2, .ct-funcs-wrap { clear: both; }
	.ct-funcs-wrap { padding-top: 14px; }
	.ct-func__txt { font-size: 14px; }
	/* 기본정보는 한 줄에 하나로 두고 칸만 적당히 줄인다.
	   두 칸 격자로 두면 이름표와 칸이 좌우로 갈라져 짝이 안 맞아 보인다(해 보고 되돌렸다). */
	.ct-in, .ct-sel { max-width: 560px; }
	.ct-in--area { max-width: none; }
	.ct__submit { max-width: 320px; }
}

/* ============================================================
   좁은 화면 다듬기 (1279 이하) — 「흘려만 놓은」 자리를 손본다
   ============================================================ */
@media (max-width: 1199px) {

	/* ── 행사유형 : 시안 그대로 **세로 막대**. 자리만 넓게 편다 ──
	   가로 막대로 바꿔 봤다가 시안과 달라져 되돌렸다(사용자 지적).
	   자리값이 1920 판 좌표로 박혀 있어 격자에 한 칸씩 다시 앉힌다.
	     1줄 제목 / 2줄 막대(높이 --ch) / 3줄 이름
	   막대 높이는 백분율(--p)로 만들고, 말풍선은 같은 만큼 위로 밀어 꼭대기에 붙인다.
	   칸 사이는 띄우지 않는다 — 이름 칸의 윗선이 이어져 바닥 축이 된다. */
	.mn-g--chart {
		--ch: clamp(150px, 20vw, 240px);
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto var(--ch) auto;
		align-items: end;
		justify-items: center;
		column-gap: 0;
		row-gap: 0;
		padding: 20px 22px 18px !important;
	}
	.mn-g--chart .mn-card__title {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: start;
		margin-bottom: 14px !important;
	}
	/* 눈금 숫자·눈금 줄·꼭대기 표시는 접는다 — 좁은 화면에서는 군더더기다 */
	.mn-chart__y, .mn-chart__line, .mn-chart__dot { display: none !important; }

	.mn-chart__bar {
		display: block !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		grid-row: 2;
		align-self: end;
		width: clamp(38px, 7vw, 64px) !important;
		height: calc(var(--p, 0) * var(--ch) / 100) !important;
		min-height: 6px;
		border-radius: 8px 8px 0 0;
		background: #6136d9;
		transition: none !important;
	}
	.mn-chart__bar.is-on { background: #0b0ff7; }

	/* 말풍선 — 시안의 보라 알약 그대로. 막대 꼭대기 바로 위로 민다 */
	.mn-chart__tip {
		grid-row: 2;
		align-self: end;
		width: auto !important;
		color: inherit !important;
		transform: translateY(calc(var(--p, 0) * var(--ch) / -100 - 10px)) !important;
	}
	.mn-chart__tip b {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 64px !important;
		height: 36px !important;
		border-radius: 8px !important;
		background: #555185 !important;
		box-shadow: 0 2px 12px rgba(30, 26, 70, .28) !important;
		color: #fff !important;
		font-size: 15px !important;
		font-weight: 700;
	}

	/* 이름 — 칸을 꽉 채워 윗선이 서로 이어지게(= 바닥 축) */
	.mn-chart__x {
		grid-row: 3;
		align-self: start;          /* 두 줄짜리 이름이 있어도 윗선이 나란히 이어지게 */
		justify-self: stretch;
		width: auto !important;
		padding-top: 12px;
		border-top: 1px solid rgba(0, 0, 0, .15);
		text-align: center !important;
		font-size: 13px;
	}
	/* 자리 박기 — 막대 셋 */
	.mn-chart__x[data-i="1"], .mn-chart__bar[data-i="1"], .mn-chart__tip[data-i="1"] { grid-column: 1; }
	.mn-chart__x[data-i="2"], .mn-chart__bar[data-i="2"], .mn-chart__tip[data-i="2"] { grid-column: 2; }
	.mn-chart__x[data-i="3"], .mn-chart__bar[data-i="3"], .mn-chart__tip[data-i="3"] { grid-column: 3; }

	/* ── 숫자 카드 : 아이콘+이름은 왼쪽, 숫자는 오른쪽 한 줄 ──
	   **폰에서만** 이렇게 눕힌다. 한 줄에 한 장이라 가로로 길어서 그렇다.
	   768 위로는 넉 장이 한 줄에 서서 칸이 좁다 — 거기서 이걸 걸면
	   「22+」의 + 나 「90%」의 % 가 칸을 넘쳐 옆 카드를 덮는다(실제로 그랬다). */
	@media (max-width: 767px) {
		.mn-g--stat {
			flex-direction: row !important;
			align-items: center !important;
			gap: 12px !important;
			min-height: 0 !important;
			padding: 18px 20px !important;
		}
		.mn-g--stat .mn-stat__label { flex: 1 !important; }
		.mn-g--stat .mn-stat__num { flex: none; }
	}

	/* ── 인증 배지 : 흰 알약에 담아 읽히게 ─────────────── */
	.mn-badge__t {
		padding: 3px 10px;
		border-radius: 300px;
		background: rgba(255, 255, 255, .75);
		color: #4a4a60 !important;
		font-size: 11px;
		font-weight: 700;
		white-space: nowrap;
	}

	/* ── 포트폴리오 : 「더보기」를 제목 줄 오른쪽으로 ──── */
	.mn-g--pf { padding-top: 8px; }
	/* 제목은 마지막 칸만 남기고 다 쓰고, 더보기가 그 마지막 칸에 들어간다 */
	.mn-g--pf > .mn-pf__title { grid-column: 1 / -2; margin-bottom: 14px !important; }
	.mn-g--pf > .mn-pf__more {
		grid-column: -2 / -1;
		justify-self: end;
		align-self: center;
		/* 제목과 **같은 위·아래 여백**이라야 줄 한가운데가 맞는다.
		   위 여백이 없으면 단추만 30 만큼 위로 올라간다. */
		margin: 30px 0 14px !important;
	}
}

/* 안내 배너 두 장 — 폭이 560 을 넘으면 나란히 둔다.
   한 줄에 하나로 두면 카드가 시안(360)보다 훨씬 커져 혼자 커 보인다. */
@media (min-width: 560px) and (max-width: 767px) {
	.mn-cta {
		float: left;
		width: calc(50% - 6px) !important;
		max-width: none;
		margin: 0 12px 12px 0;
	}
	.mn-cta[data-i="1"] { clear: both; }
	.mn-cta[data-i="2"] { margin-right: 0; }
	.mn-g--pf { clear: both; }
}


/* ============================================================
   태블릿 다듬기 (768 ~ 1199) — 위 「좁은 화면 다듬기」 뒤에 와야 이긴다
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {

	/* 「유형별 주요 기능」은 **무조건 한 줄 통째로**, 그 밑에
	   행사유형 · 안내 배너 두 장을 셋으로 나눠 한 줄에 세운다.
	   1170 쯤에서 한 칸이 360 안팎 — 시안의 배너 크기(360)와 거의 같아진다. */
	.mn-g--row2 {
		/* 숫자 카드 넉 장이 float 라, 줄을 안 끊으면 격자 상자가 그 옆 좁은 자리로 밀린다 */
		clear: both;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
		margin: 20px 0 12px;
	}
	/* 앞 단계에서 둘을 float 로 나란히 세워 두었다 — 격자에서는 그 폭이 그대로 남아
	   칸을 다 못 채운다(행사유형이 38% 만 쓰고 쪼그라들었다). 풀어 준다. */
	.mn-g--chart,
	.mn-g--feat { float: none; width: auto; }
	/* 시안(1920)처럼 — 그래프는 넓게, 안내 배너 두 장은 오른쪽에 세로로 쌓는다.
	   배너를 옆으로 늘어세우면 한 장이 시안(360)보다 훨씬 커져 혼자 튀고,
	   그래프는 그만큼 좁아져 막대가 다시 손톱만 해진다. */
	.mn-g--feat  { grid-column: 1 / -1;    grid-row: 1;         margin: 0 !important; }
	.mn-g--chart { grid-column: 1 / span 2; grid-row: 2 / span 2; margin: 0 !important; }
	/* 한 줄을 다 쓰니 막대를 높여도 된다 — 칸 넓이에 맞춰 따라 큰다 */
	.mn-g--chart { --ch: clamp(120px, 16vw, 240px); }
	/* 폰 단계에서 붙여 둔 float·폭을 푼다 — 격자에서는 방해만 된다 */
	.mn-cta {
		float: none !important;
		clear: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		grid-row: 2;
	}
	.mn-cta[data-i="1"] { grid-column: 3; grid-row: 2; }
	.mn-cta[data-i="2"] { grid-column: 3; grid-row: 3; }
	.mn-chart__x { font-size: 14px; }
}

/* ── 맞춤 솔루션 단추 — 폰에서도 화면처럼 한 줄에 나란히 ──────────────
   「이전」과 「다음」이 서로 다른 상자(.sol__back / .sol__go)에 들어 있어
   그냥 두면 위아래로 쌓인다. 반씩 나눠 갖게 띄운다.
   3단계는 단추가 셋이라 「이전 · 처음으로」를 한 줄에 두고
   「견적문의/상담 바로가기」는 아래 한 줄을 통째로 쓴다.                */
@media (max-width: 767px) {
	.sol-step[data-step="2"] .sol__back,
	.sol-step[data-step="2"] .sol__go,
	.sol-step[data-step="3"] .sol__back,
	.sol-step[data-step="3"] .sol__first {
		float: left;
		width: calc(50% - 5px);
		margin-top: 12px !important;
	}
	.sol-step[data-step="2"] .sol__go,
	.sol-step[data-step="3"] .sol__first { float: right; }

	/* 「이전 · 처음으로」 줄과는 한 칸 띄운다 — 성격이 다른 단추라 붙으면 한 덩이로 보인다.
	   clear 를 건 상자는 위 여백(margin-top)이 「띄우기(clearance)」에 먹혀 자리를 못 만든다 —
	   그래서 안쪽 여백(padding-top)으로 띄운다. */
	.sol-step[data-step="3"] .sol__go { clear: both; width: 100%;
	                                    margin-top: 0 !important; padding-top: 20px; }

	/* 띄운 단추 뒤로 카드가 오므라들지 않게 바닥을 받쳐 준다 */
	.sol-step::after { content: ""; display: block; clear: both; }
}

@media (max-width: 1199px) {
	/* 로고가 인라인 SVG 로 바뀌었다 — 좁은 화면 크기를 svg 에도 걸어 준다
	   (.ex-footer__logo 쪽 width 는 겉 상자만 잡는다) */
	.ex-footer__logo svg { width: 160px; height: auto; }
}