/* ManTech 고객 사례 – Figma 260805_부분개편_개발용 03_고객사례_* 기준 (PC 1920).
 * 개별 사례(캐러셀)와 전체 탭 분류명 크기는 2차 피드백(10/14 PPT) 시안 기준 */
.mc-cases {
	--mc-main: #0058aa;
	--mc-black: #111;
	--mc-gray: #c1c1c1;
	--mc-card-bg: #eceff2;
	/* 운영 사이트는 Pretendard를 "Pretendard Variable" 이름으로 불러온다 (이름이 다르면 Noto Sans KR로 대체되어 글자 폭이 달라짐) */
	--mc-font: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
	--mc-font-label: "Noto Sans KR", "Pretendard Variable", Pretendard, sans-serif;
	--mc-font-en: Montserrat, "Pretendard Variable", Pretendard, sans-serif;
	font-family: var(--mc-font);
	line-height: normal; /* 운영 body 행간(24px) 상속 차단 – Figma 자동 행간과 맞춤 */
	color: var(--mc-black);
	background: #fff;
	word-break: keep-all;
}
/* 테마·Elementor 전역 타이포그래피(h3, h4, ul 등)의 영향을 받지 않도록 고정 */
.mc-cases h3,
.mc-cases h4 { font-family: var(--mc-font); letter-spacing: normal; text-transform: none; }
.mc-cases *,
.mc-cases *::before,
.mc-cases *::after { box-sizing: border-box; }
.mc-cases [hidden] { display: none !important; }
.mc-cases img { max-width: 100%; height: auto; }
/* 화면에는 안 보이고 화면 낭독기만 읽는 글자 */
.mc-cases .mc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mc-container { width: 100%; max-width: 1200px; margin: 0 auto; }
/* 분야 탭 로고 그리드: 위 개별 사례(960)와 폭을 맞춘다. 좌우 여백(padding)은 폭 밖에 더함 */
.mc-container--case { width: auto; max-width: 960px; box-sizing: content-box !important; }

/* 탭 바 */
.mc-tabs-wrap {
	background: #fff;
	border-top: 1px solid var(--mc-gray);
	border-bottom: 1px solid var(--mc-gray);
}
.mc-tabs {
	display: grid;
	grid-template-columns: repeat(var(--mc-tab-count, 5), minmax(0, 1fr));
	column-gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}
.mc-tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px; /* 위아래 선 1px 포함 탭 바 60px */
	font-family: var(--mc-font-label);
	font-weight: 700;
	font-size: 16px;
	color: var(--mc-black) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.mc-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: #363636;
	opacity: 0;
	transition: opacity .2s;
}
.mc-tab.is-active::after,
.mc-tab:hover::after { opacity: 1; }
.mc-tab:focus-visible { outline: 2px solid var(--mc-main); outline-offset: -2px; }

/* 패널 공통 */
.mc-panel { padding: 120px 0; }
.mc-panel--all { background: #f5f5f5; }
/* Elementor의 .elementor hr { margin:0; background:transparent } 보다 우선하도록 선택자를 강화 */
.mc-cases hr.mc-divider {
	display: block;
	width: 100%;
	height: 1px;
	margin: 80px 0;
	padding: 0;
	border: 0;
	background: var(--mc-gray);
	color: var(--mc-gray);
	opacity: 1;
	overflow: visible;
}
.mc-empty { text-align: center; color: #666; }

/* 태그(제품명 알약) */
.mc-tags { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mc-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10.5px; /* Figma 글 상자는 폭을 정수로 올림 → 알약이 1px 넓음 */
	border-radius: 45px;
	background: var(--mc-main);
	color: #fff;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.03em;
	white-space: nowrap;
}
.mc-tags--sm { gap: 8px; }
.mc-tags--sm .mc-tag { padding: 2px 6.5px; border-radius: 30px; font-size: 14px; line-height: 17px; }

/* 상세 사례 캐러셀: 화살표 | 사례(960) | 화살표, 아래 줄에 점.
 * 2차 피드백: 사례 폭 1200 → 960 (양옆 여백 확대), 노트북(1366×768 · 1440×900)에서 로고부터 점까지 한 화면에 들어오는 높이 */
.mc-carousel {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 40px;
	max-width: 1136px; /* 화살표 48 + 40 + 사례 960 + 40 + 48 */
	margin: 0 auto;
}
/* 사례들은 한 칸에 겹쳐 두고 지금 사례만 보인다(PC·태블릿) → 칸 높이가 가장 긴 사례에 맞춰져 넘겨도 화살표·점이 움직이지 않음.
 * 모바일 좌우 밀기: 가로 움직임은 JS가 받고 세로는 페이지 스크롤. 밀려 나간 슬라이드는 칸 밖에서 잘라낸다 */
.mc-carousel__viewport { display: grid; flex: 0 1 960px; min-width: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.mc-carousel__viewport > .mc-case { grid-area: 1 / 1; }
@media (min-width: 768px) {
	.mc-cases .mc-carousel__viewport > .mc-case[hidden] { display: grid !important; visibility: hidden; }
}
.mc-carousel.is-dragging { -webkit-user-select: none; user-select: none; }
/* 테마 버튼 스타일([type=button] 분홍 테두리·여백·hover 배경)보다 우선하도록 선택자를 강화 */
.mc-cases .mc-arrow,
.mc-cases .mc-arrow:focus {
	flex: 0 0 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1.2px solid var(--mc-black);
	border-radius: 50%;
	background: transparent;
	color: var(--mc-black);
	font-size: 0;
	line-height: 0;
	white-space: normal;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.mc-cases .mc-arrow svg { display: block; flex: none; }
.mc-cases .mc-arrow:hover,
.mc-cases .mc-arrow:focus-visible { background: var(--mc-black); color: #fff; }
.mc-arrow--prev svg { transform: scaleX(-1); }
.mc-carousel.is-single .mc-arrow { display: none; }

/* 슬라이드 아래 점: 사례 수, 지금 위치는 짙은 색. 누르면 그 사례로 */
.mc-dots { order: 3; display: flex; flex-wrap: wrap; justify-content: center; flex-basis: 100%; }
.mc-cases .mc-dot,
.mc-cases .mc-dot:hover,
.mc-cases .mc-dot:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	min-width: 0;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: 0;
	background: transparent;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}
.mc-cases .mc-dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mc-gray);
	transition: background-color .2s;
}
.mc-cases .mc-dot:hover::before { background: #8a8a8a; }
.mc-cases .mc-dot.is-active::before { background: var(--mc-black); }
.mc-cases .mc-dot:focus-visible { outline: 2px solid var(--mc-main); outline-offset: 0; }

/* 개별 사례 (2차 피드백 시안): [로고 | 남색 '적용 사례' 줄] / [가로 사진 | 제목·Challenge·Solutions·Results] / [ | 자세히 보기] */
.mc-case {
	display: grid;
	grid-template-columns: minmax(0, 10fr) minmax(0, 13fr); /* 사진 400 : 글 520 */
	grid-template-areas:
		"logo bar"
		"media text";
	align-content: start; /* 겹쳐 둔 다른 사례보다 짧아도 줄 높이를 늘리지 않고 위에서부터 */
	align-items: start;
	gap: 12px 40px;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
/* 보이는 사례로 바뀔 때 서서히 나타난다 */
.mc-case.is-active { animation: mc-fade .35s ease; }
@keyframes mc-fade { from { opacity: 0; } to { opacity: 1; } }
/* 손가락으로 넘겼을 때: 민 방향에서 들어온다 */
.mc-case.is-in-next { animation: mc-in-next .3s ease-out; }
.mc-case.is-in-prev { animation: mc-in-prev .3s ease-out; }
@keyframes mc-in-next { from { opacity: 0; transform: translateX(25%); } }
@keyframes mc-in-prev { from { opacity: 0; transform: translateX(-25%); } }

/* 고객사 로고: 사진 왼쪽 위. 로고 이미지는 140px 높이(2배)에 회사마다 여백을 맞춰 둔 것이라 칸 높이에 그대로 맞춘다 */
.mc-case__logo { grid-area: logo; align-self: center; display: flex; align-items: center; min-width: 0; height: 52px; }
.mc-cases .mc-case__logo img { display: block; width: auto; max-width: 100%; height: 100% !important; object-fit: contain; object-position: left center; }
.mc-case__logo strong { font-size: 24px; }

/* '적용 사례' 줄: 남색 바탕 + 흰 알약 제품명 */
.mc-case__bar {
	grid-area: bar;
	align-self: center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	min-height: 40px;
	padding: 5px 6px 5px 18px;
	border-radius: 12px;
	background: var(--mc-main);
}
.mc-case__bar-label { font-family: var(--mc-font-label); font-weight: 700; font-size: 16px; line-height: 22px; color: #fff; white-space: nowrap; }
.mc-tags--bar { gap: 6px; margin-left: auto; }
.mc-tags--bar .mc-tag { padding: 3px 11px; background: #fff; color: var(--mc-main); font-size: 14px; font-weight: 500; line-height: 18px; }

/* 사진: 22:19 가로형. 도입 솔루션은 글자 없이 제품명만, '적용 사례' 제품명보다 작게 사진 오른쪽 아래 */
.mc-case__media {
	grid-area: media;
	position: relative;
	aspect-ratio: 22 / 19;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(160deg, #dfe8f2 0%, #b8cce0 100%);
}
.mc-cases .mc-case__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}
.mc-tags--photo { position: absolute; right: 12px; bottom: 12px; left: 12px; gap: 4px; }
.mc-tags--photo .mc-tag { padding: 2px 8px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0; }

.mc-case__text { grid-area: text; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mc-case__title { margin: 0; font-family: var(--mc-font) !important; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: -0.02em; color: var(--mc-black); }
.mc-case__block { display: flex; flex-direction: column; gap: 2px; }
.mc-case__block + .mc-case__block { padding-top: 10px; border-top: 1px solid var(--mc-gray); }
.mc-case__block h4 {
	margin: 0;
	font-family: var(--mc-font-en) !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	color: var(--mc-main);
}
.mc-case__block ul { margin: 0; padding: 0 0 0 18px; list-style: none; }
.mc-case__block li { position: relative; margin: 0; font-size: 14px; line-height: 22px; letter-spacing: -0.03em; color: var(--mc-black); }
/* 작은 점(지름 3px, 글 시작 8px 왼쪽) – 기본 disc 는 5px 로 커서 직접 그린다 */
.mc-case__block li::before { content: ""; position: absolute; left: -11px; top: 9.5px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* 자세히 보기: 글 오른쪽 아래 */
.mc-more {
	grid-column: 2;
	grid-row: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px 5px 18px;
	border: 2px solid var(--mc-main);
	border-radius: 999px;
	background: #fff;
	color: var(--mc-main) !important;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	text-decoration: none !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
	transition: background .2s, color .2s;
}
.mc-more svg { display: block; flex: none; }
.mc-more:hover,
.mc-more:focus-visible { background: var(--mc-main); color: #fff !important; }

/* 분야 탭 로고 그리드 (4열) */
.mc-logos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mc-logo-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* 3차 피드백(10/21): 960 폭으로 줄이면서 카드가 정사각형에 가까워져(222×160) 가로형으로 되돌림 → 222×126,
	 * 이어서 위 7+2px·아래 5+3px 줄여 상하 여백을 좌우 여백(테두리 포함 14px)보다 조금 좁게 → PC 222×109.
	 * 높이를 고정해 태블릿(3열, 폭이 더 넓음)에서도 상하 여백이 같다 */
	height: 109px;
	margin: 0;
	padding: 4px 13px 5px; /* 좌우: 테두리 1px 포함 14px. 상하: 가운데 정렬 남는 칸 포함 로고 위 10.5px, 태그 아래 11.5px */
	border: 1px solid var(--mc-gray);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 8px 12px rgba(0, 0, 0, .08);
}
.mc-logo-card .mc-tags { align-self: stretch; flex-wrap: nowrap; gap: 4px; } /* 솔루션명은 한 줄로 */
.mc-logo-card .mc-tags--sm .mc-tag { padding: 2px 6px; font-size: 12px; line-height: 15px; }
.mc-logo { display: flex; align-items: center; justify-content: center; width: 220px; max-width: 100%; height: 80px; }
.mc-logo-card:not(.mc-logo-card--compact) > .mc-logo { width: 172px; height: 62px; } /* 220×80의 약 78% (카드 폭 282 → 222) */
.mc-logo img { width: 100%; height: 100% !important; object-fit: contain; }
.mc-logo__text { font-weight: 700; font-size: 18px; text-align: center; }

/* 전체 탭: 분야별 5열. 분류명은 2차 피드백으로 약 75% (48 → 36) */
.mc-all-group { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.mc-all-group__title { margin: 0; font-family: var(--mc-font) !important; font-size: 36px; font-weight: 700; line-height: normal; color: var(--mc-black); white-space: nowrap; }
.mc-logos--compact { grid-template-columns: repeat(5, 180px); }
.mc-logo-card--compact { height: 100px; padding: 10px; border-radius: 16px; box-shadow: none; }
.mc-logo-card--compact .mc-logo { width: 140px; height: 56px; }
/* '전체 탭 로고'(시안 카드에서 로고 둘레까지 자른 이미지): 기본 칸보다 가로 12px·세로 4px 넓은 152×60 칸, 가운데는 같음 */
.mc-logo-card--compact .mc-logo--wide { flex: none; width: 152px; max-width: none; height: 60px; }

/* 태블릿 */
@media (max-width: 1240px) {
	.mc-container { padding: 0 20px; }
	.mc-tabs { column-gap: 0; }
	.mc-all-group { flex-direction: column; }
	.mc-all-group__title { font-size: 27px; } /* 36 → 27 */
	.mc-logos--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); width: 100%; }
	.mc-logo-card--compact .mc-logo { width: 100%; }
	.mc-logo-card--compact .mc-logo--wide { width: calc(100% * 152 / 140); max-width: calc(100% + 20px); } /* 카드 안쪽 여백까지만 */
	.mc-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.mc-panel { padding: 64px 0; }
	.mc-cases hr.mc-divider { margin: 48px 0; }
	.mc-carousel { gap: 24px; padding: 0 20px; }
	.mc-carousel__viewport { order: 1; flex-basis: 100%; }
	/* 슬라이드 아래 한 줄: 이전 화살표 · 점 · 다음 화살표 */
	.mc-arrow { order: 2; }
	.mc-dots { flex-basis: auto; }
	.mc-arrow--next { order: 4; }
	.mc-case { column-gap: 32px; }
}
/* 모바일: 로고 → 사진 → '적용 사례' 줄 → 본문 → 자세히 보기 */
@media (max-width: 767px) {
	.mc-tabs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.mc-tabs { display: flex; justify-content: space-between; gap: 4px; min-width: max-content; padding: 0 16px; }
	.mc-tab { flex: 1 0 auto; height: 52px; padding: 0 6px; font-size: 14px; }
	.mc-panel { padding: 48px 0; }
	.mc-cases hr.mc-divider { margin: 40px 0; }
	.mc-all-group { gap: 20px; }
	.mc-all-group__title { font-size: 21px; } /* 28 → 21 */
	.mc-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mc-logos--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.mc-logo-card { height: 87px; padding: 4px 8px 6px; border-radius: 16px; gap: 4px; }
	.mc-logo { height: 56px; }
	.mc-logo-card:not(.mc-logo-card--compact) > .mc-logo { width: 100%; height: 46px; }
	.mc-logo-card .mc-tags--sm .mc-tag { padding: 1px 5px; font-size: 10px; line-height: 13px; }
	.mc-logo-card--compact { height: 72px; padding: 8px; border-radius: 12px; }
	.mc-logo-card--compact .mc-logo { height: 40px; }
	.mc-logo-card--compact .mc-logo--wide { max-width: calc(100% + 16px); height: calc(40px * 60 / 56); }
	.mc-tags--sm { gap: 4px; }
	.mc-tags--sm .mc-tag { font-size: 11px; line-height: normal; padding: 1px 5px; }
	.mc-carousel { padding: 0 16px; }
	.mc-case {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"logo"
			"media"
			"bar"
			"text";
		row-gap: 16px;
	}
	.mc-case__logo { height: 44px; }
	.mc-case__logo strong { font-size: 20px; }
	.mc-case__bar { min-height: 40px; padding: 6px 6px 6px 16px; border-radius: 10px; }
	.mc-case__bar-label { font-size: 15px; line-height: 22px; }
	.mc-tags--bar { gap: 4px; }
	.mc-tags--bar .mc-tag { padding: 3px 9px; font-size: 13px; line-height: 18px; }
	.mc-case__media { border-radius: 12px; }
	.mc-tags--photo { right: 10px; bottom: 10px; left: 10px; }
	.mc-tags--photo .mc-tag { padding: 2px 7px; font-size: 11px; }
	.mc-case__text { gap: 12px; }
	.mc-case__title { font-size: 18px; line-height: 26px; }
	.mc-case__block h4 { font-size: 15px; line-height: 22px; }
	.mc-more { grid-column: 1; grid-row: auto; margin-top: 0; font-size: 14px; }
	.mc-cases .mc-dot::before { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.mc-case.is-active,
	.mc-case.is-in-next,
	.mc-case.is-in-prev { animation: none; }
}