/* iWebple Portfolio - Recent Carousel (메인용)
   .iwpr-wrap 최상위에는 외부 패딩 없음 (엘리멘터에서 여백 조정)
   메인 페이지 .iwm-port 카드 디자인과 1:1 정합 */

.iwpr-wrap {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0 56px;
	font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;
	color: #14161c;
	word-break: keep-all;
	letter-spacing: -.02em;
}
.iwpr-wrap *,
.iwpr-wrap *::before,
.iwpr-wrap *::after { box-sizing: border-box; }

/* ---------- 뷰포트 (넘치는 부분 숨김) ---------- */
.iwpr-viewport {
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

/* ---------- 트랙 (좌우 이동) ---------- */
/* 트랙은 슬라이드를 옆으로 늘어놓으므로 폭 제한을 두지 않는다.
   폭 제한은 오직 .iwpr-viewport(overflow:hidden)가 담당. */
.iwpr-track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform .6s cubic-bezier(.16, 1, .3, 1);
	will-change: transform;
}

/* ---------- 각 슬라이드(=페이지, 3칸 한 묶음) ---------- */
/* 뷰포트 폭 기준 정확히 100%. 트랙이 flex라 flex-basis:100%가 뷰포트 폭을 따름 */
.iwpr-slide {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(var(--iwpr-per, 3), minmax(0, 1fr));
	gap: 26px;
	align-content: start;
}

/* ---------- 카드 (메인 .iwm-port-item 과 동일 톤) ---------- */
.iwpr-card {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}
.iwpr-thumb {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 800 / 500;
	border-radius: 18px;
	overflow: hidden;
	background: #e7ebf3;
}
.iwpr-thumb img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.iwpr-card:hover .iwpr-thumb img { transform: scale(1.07); }

.iwpr-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 7px 14px;
	border-radius: 50px;
	background: rgba(13, 19, 38, .7);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.iwpr-card,
.iwpr-card:link,
.iwpr-card:visited,
.iwpr-card:hover,
.iwpr-card:active {
	color: #14161c;
	text-decoration: none;
}
.iwpr-cap {
	margin-top: 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.iwpr-cap .nm {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.4px;
	line-height: 1.35;
	color: #14161c !important;
}
.iwpr-cap .ind {
	margin-top: 5px;
	font-size: 13.5px;
	color: #9499a3 !important;
}
.iwpr-cap .go {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #dde2ec;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9aa3b8;
	font-size: 17px;
	transition: .25s;
}
.iwpr-cap .go svg { width: 1em; height: 1em; }
.iwpr-card:hover .iwpr-cap .go {
	background: #2f5fe0;
	border-color: #2f5fe0;
	color: #fff;
}

/* ---------- 컨트롤 (화살표) ---------- */
.iwpr-arrows { }
.iwpr-arrow {
	position: absolute;
	top: calc((100% - 88px) / 2 - 34px); /* 캡션 높이 보정: 썸네일 중앙 근처 */
	transform: translateY(-50%);
	z-index: 5;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid #e2e7f0;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 10px 28px rgba(20, 30, 60, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2f5fe0;
	cursor: pointer;
	transition: .25s;
	padding: 0;
}
.iwpr-arrow svg { width: 22px; height: 22px; }
.iwpr-arrow:hover {
	background: #2f5fe0;
	border-color: #2f5fe0;
	color: #fff;
	box-shadow: 0 14px 34px rgba(47, 95, 224, .32);
}
.iwpr-arrow.prev { left: 2px; }
.iwpr-arrow.next { right: 2px; }
/* 좌우 화살표 사용 안 함 (도트로만 이동) */
.iwpr-arrow { display: none !important; }

/* ---------- 도트 ---------- */
.iwpr-dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 40px;
}
.iwpr-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50px;
	background: #cdd5e6;
	cursor: pointer;
	transition: .25s;
}
.iwpr-dots button:hover { background: #a7b4d6; }
.iwpr-dots button.on {
	width: 26px;
	background: #2f5fe0;
}

/* 페이지가 1개뿐이면 컨트롤 전부 숨김 */
.iwpr-wrap.is-single .iwpr-arrow,
.iwpr-wrap.is-single .iwpr-dots { display: none; }

/* ---------- 반응형 ---------- */
/* 태블릿: 좌우 여백 축소, 화살표도 안쪽으로 */
@media (max-width: 1100px) {
	.iwpr-wrap { padding: 0 44px; }
	.iwpr-arrow.prev { left: 0; }
	.iwpr-arrow.next { right: 0; }
}

/* 모바일: 슬라이드 해제 → 전체 세로 나열, 앞 3개만 노출 */
@media (max-width: 768px) {
	.iwpr-wrap { padding: 0; }
	.iwpr-viewport { overflow: visible; }
	.iwpr-track {
		display: block;
		transform: none !important;
		transition: none;
	}
	/* 슬라이드 래퍼 제거 → 카드들이 트랙 바로 아래 한 흐름으로 정렬 */
	.iwpr-slide {
		display: contents;
	}
	.iwpr-track .iwpr-card {
		display: block;
		margin-bottom: 26px;
	}
	/* 두 번째 슬라이드부터의 카드는 모두 숨김 → 앞 3개(첫 슬라이드)만 노출 */
	.iwpr-slide:nth-child(n+2) .iwpr-card {
		display: none;
	}
	/* per 값이 3보다 클 경우에도 4번째부터 강제로 숨겨 최대 3개 보장 */
	.iwpr-track .iwpr-card:nth-of-type(n+4) {
		display: none;
	}
	.iwpr-track .iwpr-card:nth-of-type(3) { margin-bottom: 0; }
	.iwpr-arrow,
	.iwpr-dots { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.iwpr-track { transition: none; }
	.iwpr-thumb img { transition: none; }
}