/* Wrapper (원하시면 이 클래스 기반으로 사이트 커스텀 CSS만 별도로 붙이세요) */
.ccp-appcard{
	display:flex;
	gap:24px;
	/* PC에서 이미지 영역과 콘텐츠 영역의 세로 높이를 동일하게 맞추기 */
	align-items:stretch;
	background:#fff;
	border:1px solid #ededed;
	/* 요청: 카드 바깥쪽 라운드 제거 */
	border-radius:0;
	padding:24px;
	box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.ccp-appcard__media{
	/* 요청: 이미지 가로 폭 줄이고 텍스트 영역을 더 넓게 */
	flex:0 0 160px;
	position:relative;
	display:flex;
	align-self:stretch;
}

.ccp-appcard__imgwrap{
	width:100%;
	height:100%;
	position:relative;
	flex:1;
	/* 요청: 이미지 영역은 라운드 적용 */
	border-radius:14px;
	background:#f6f6f6;
	overflow:hidden;
}

.ccp-appcard__img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.ccp-appcard__content{
	flex:1;
	min-width:0;
}

.ccp-appcard__header{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
}

.ccp-appcard__title{
	margin:0;
	font-size:34px;
	line-height:1.15;
	font-weight:800;
	letter-spacing:-.02em;
}

.ccp-appcard__badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:4px 10px;
	/* 요청: 무료 배지(버튼) 라운드 줄이기 */
	border-radius:8px;
	background:#eef2f7;
	color:#1f2937;
	font-size:12px;
	font-weight:700;
}

.ccp-appcard__meta{
	margin-top:8px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:14px;
	font-size:14px;
	color:#6b7280;
}

.ccp-appcard__publisher{
	color:#1a73e8;
	font-weight:700;
}

.ccp-appcard__author-label{
	margin-right:4px;
	color:#6b7280;
	font-weight:600;
}

.ccp-appcard__author-name{
	color:#111827;
	font-weight:700;
}

.ccp-appcard__rating{
	display:inline-flex;
	align-items:center;
	gap:4px;
	color:#111827;
	font-weight:800;
}

.ccp-appcard__star{
	font-size:14px;
	line-height:1;
}

.ccp-appcard__count{
	color:#111827;
	font-weight:800;
	opacity:.85;
}

.ccp-appcard__summary{
	margin-top:12px;
	font-size:15px;
	line-height:1.65;
	color:#111827;
}

.ccp-appcard__summary p{
	margin:0;
}

.ccp-appcard__buttons{
	margin-top:18px;
	display:flex;
	gap:12px;
	align-items:flex-start;
}

/* 버튼 그룹: 다운로드(좌) / 링크복사(우) */
.ccp-appcard__btngroup{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
}
.ccp-appcard__btngroup--right{
	margin-left:auto;
}

.ccp-appcard__btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	/* 요청: 각 버튼의 좌우 패딩 18px로 통일 */
	padding:10px 18px;
	border-radius:0;
	text-decoration:none;
	font-weight:800;
	font-size:14px;
	line-height:1;
	box-sizing:border-box;
	border:1px solid transparent;
	/* 버튼 텍스트 줄바꿈으로 높이가 늘어나는 문제 방지 */
	white-space:nowrap;
}

/* 버튼이 <button>으로도 나오니 기본 스타일 리셋 */
button.ccp-appcard__btn{
	appearance:none;
	-webkit-appearance:none;
	background:transparent;
	cursor:pointer;
	/* 테마가 button에 padding/line-height를 강하게 넣는 경우 대비 */
	/* 요청: 각 버튼의 좌우 패딩 18px로 통일 */
	padding:10px 18px !important;
	font-size:14px !important;
	line-height:1 !important;
	font-weight:800 !important;
	border-radius:0 !important;
	height:auto !important;
	min-height:0 !important;
}

@media (min-width: 768px){
	/* PC에서 다운로드 버튼 패딩 확대 */
	.ccp-appcard__btn--ios,
	.ccp-appcard__btn--android,
	.ccp-appcard__btn--pc,
	.ccp-appcard__btn--copy{
		/* 요청: 좌우 패딩 18px로 통일 */
		padding:14px 18px;
	}
	/* button 요소(링크 복사)가 테마 스타일로 높이가 달라지는 문제 방지 */
	button.ccp-appcard__btn{
		/* 요청: 좌우 패딩 18px로 통일 */
		padding:14px 18px !important;
	}
}


/* PC 버튼(및 필요 시) 이모지 */
.ccp-appcard__btnemoji{
	font-size:16px;
	line-height:1;
	display:inline-flex;
	align-items:center;
}
@media (max-width: 767px){
	.ccp-appcard__btnemoji{ display:none; }
}

.ccp-appcard__btnicon svg{
	width:18px;
	height:18px;
	display:block;
	fill:currentColor;
}

.ccp-appcard__btn--ios{
	background:#2aaeff;
	color:#fff;
}

.ccp-appcard__btn--android{
	background:#7ad585;
	color:#fff;
}

.ccp-appcard__btn--pc{
	background:#7b93a6;
	color:#fff;
}

.ccp-appcard__btn:hover{
	filter:brightness(.95);
}

/* copy button */
.ccp-appcard__btn--copy{
	margin-left:0;
	background:#f8fafc;
	color:#0f172a;
	border-color:#cbd5e1;
}
/* 요청: 링크 복사 버튼은 hover 시 배경/색상 변화가 없도록 고정 */
.ccp-appcard__btn--copy:hover,
.ccp-appcard__btn--copy:focus,
.ccp-appcard__btn--copy:active{
	filter:none !important;
	background:#f8fafc !important;
	color:#0f172a !important;
	border-color:#cbd5e1 !important;
	outline:none !important;
	box-shadow:none !important;
}

/* 요청: 클릭 후(포커스/액티브 포함)에도 스타일이 바뀌지 않게 처리 */
.ccp-appcard__btn--copy:focus,
.ccp-appcard__btn--copy:active{
	outline:none;
	box-shadow:none;
}

/* =========================
   모바일: 겹침 방지 (부모 높이 고정/다음 섹션 끌어올림까지 차단)
========================= */
@media (max-width: 767px){

	/* A) (기존) 위젯/컨테이너가 높이를 고정하는 케이스 방지 */
	.elementor-widget-cadc_app_download_card,
	.elementor-widget-cadc_app_download_card .elementor-widget-container{
		height:auto !important;
		min-height:0 !important;
		overflow:visible !important;
		position:relative !important;
	}

	/* B) 카드 자체: 모바일에서는 흐름 레이아웃으로 강제 + 높이 붕괴 방지 */
	.ccp-appcard{
		display:flow-root !important;
		height:auto !important;
		min-height:0 !important;
		overflow:visible !important;
		margin-bottom:24px !important; /* 다음 섹션과 간격 확보 */
	}

	.ccp-appcard__media{
		display:block !important;
		flex:none !important;
		width:100% !important;
		align-self:auto !important;
		margin:0 0 16px 0;
	}

	/* 이미지 1:1 고정 */
	.ccp-appcard__imgwrap{
		width:100% !important;
		height:0 !important;
		padding-top:100% !important;
		position:relative !important;
		overflow:hidden !important;
		border-radius:14px !important;
		background:#f6f6f6 !important;
		flex:none !important;
	}

	.ccp-appcard__img{
		position:absolute !important;
		inset:0 !important;
		width:100% !important;
		height:100% !important;
		object-fit:cover !important;
		display:block !important;
	}

	.ccp-appcard__title{ font-size:28px; }

	/* 버튼 한 줄에 하나 + 가로 100% */
	.ccp-appcard__buttons{
		display:flex;
		flex-direction:column;
		align-items:stretch;
	}
	.ccp-appcard__btngroup{
		flex-direction:column;
		align-items:stretch;
	}
	.ccp-appcard__btngroup--right{
		margin-left:0;
	}
	.ccp-appcard__btn{
		width:100%;
		justify-content:center;
		/* 요청: 모바일에서도 좌우 패딩 18px로 통일 */
		padding:14px 18px;
	}

	/* =========================
	   C) (핵심) 부모(섹션/컨테이너/컬럼)가 모바일에서 height/min-height로 잘라먹는 경우 해결
	   - :has() 로 "이 위젯을 포함한 부모"를 정확히 잡아 auto-height로 복구
	========================= */

	/* Elementor 구(Section/Column) 구조 + 신(Container) 구조 둘 다 커버 */
	.elementor-section:has(.elementor-element-571b1b6),
	.elementor-container:has(.elementor-element-571b1b6),
	.elementor-column:has(.elementor-element-571b1b6),
	.elementor-widget-wrap:has(.elementor-element-571b1b6),
	.e-con:has(.elementor-element-571b1b6),
	.e-con-inner:has(.elementor-element-571b1b6){
		height:auto !important;
		min-height:0 !important;
		overflow:visible !important;
		position:relative !important;
	}

	/* =========================
	   D) (두 번째 핵심) “다음 섹션이 모바일에서만 위로 끌려 올라오는” 케이스 방지
	   - 음수 margin / top / translateY 로 겹치는 경우를 강제로 중립화
	   - 이 위젯이 들어있는 섹션/컨테이너의 '바로 다음' 섹션만 타겟
	========================= */
	.elementor-section:has(.elementor-element-571b1b6) + .elementor-section,
	.e-con:has(.elementor-element-571b1b6) + .e-con,
	.elementor-section:has(.elementor-element-571b1b6) + .e-con,
	.e-con:has(.elementor-element-571b1b6) + .elementor-section{
		margin-top:0 !important;
		top:auto !important;
		transform:none !important;
	}
}

/* =====================================================
   테마의 .entry-content 전역 스타일과 충돌 방지(강제)
   - .entry-content h3 / .entry-content a 를 !important로 쓰는 테마에서도
     카드 내부는 카드 전용 클래스 기반으로 원래 디자인이 유지되도록 합니다.
===================================================== */

/* 제목(H3): 전역 .entry-content h3 스타일(배경/패딩/마진/정렬 등) 무력화 */
.entry-content .ccp-appcard h3.cadc-appcard__title-h3{
	background: transparent !important;
	color: #111827 !important;
	margin: 0 !important;
	margin-top: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	font-size: 34px !important;
	line-height: 1.15 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
}

@media (max-width: 767px){
	.entry-content .ccp-appcard h3.cadc-appcard__title-h3{
		font-size: 28px !important;
	}
}

/* 다운로드 버튼(a): 전역 .entry-content a 스타일(색/폰트/밑줄 등) 무력화 */
.entry-content .ccp-appcard a.ccp-appcard__btn{
	text-decoration: none !important;
	font-size: 14px !important;
	line-height: 1 !important;
	font-weight: 800 !important;
	/* 전역 .entry-content a padding 충돌 대비: 좌우 18px 통일 */
	padding-left: 18px !important;
	padding-right: 18px !important;
}

/* button(링크 복사)도 동일하게 좌우 18px */
.entry-content .ccp-appcard button.ccp-appcard__btn{
	padding-left: 18px !important;
	padding-right: 18px !important;
}

@media (min-width: 768px){
	.entry-content .ccp-appcard a.ccp-appcard__btn,
	.entry-content .ccp-appcard button.ccp-appcard__btn{
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

@media (max-width: 767px){
	.entry-content .ccp-appcard a.ccp-appcard__btn,
	.entry-content .ccp-appcard button.ccp-appcard__btn{
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* 버튼 텍스트 색상: iOS/Android/PC는 항상 흰색(visited 포함) */
.entry-content .ccp-appcard a.ccp-appcard__btn--ios,
.entry-content .ccp-appcard a.ccp-appcard__btn--android,
.entry-content .ccp-appcard a.ccp-appcard__btn--pc,
.entry-content .ccp-appcard a.ccp-appcard__btn--ios:visited,
.entry-content .ccp-appcard a.ccp-appcard__btn--android:visited,
.entry-content .ccp-appcard a.ccp-appcard__btn--pc:visited,
.entry-content .ccp-appcard a.ccp-appcard__btn--ios:hover,
.entry-content .ccp-appcard a.ccp-appcard__btn--android:hover,
.entry-content .ccp-appcard a.ccp-appcard__btn--pc:hover,
.entry-content .ccp-appcard a.ccp-appcard__btn--ios:active,
.entry-content .ccp-appcard a.ccp-appcard__btn--android:active,
.entry-content .ccp-appcard a.ccp-appcard__btn--pc:active,
.entry-content .ccp-appcard a.ccp-appcard__btn--ios:focus,
.entry-content .ccp-appcard a.ccp-appcard__btn--android:focus,
.entry-content .ccp-appcard a.ccp-appcard__btn--pc:focus{
	color: #fff !important;
}

/* 테마가 a 색상을 자식 요소까지 덮는 경우 대비 */
.entry-content .ccp-appcard a.ccp-appcard__btn--ios *,
.entry-content .ccp-appcard a.ccp-appcard__btn--android *,
.entry-content .ccp-appcard a.ccp-appcard__btn--pc *{
	color: #fff !important;
}

/* 링크 복사 버튼(button): 클릭 후에도(포커스/액티브 포함) 스타일이 바뀌지 않게 고정 */
.entry-content .ccp-appcard button.ccp-appcard__btn--copy,
.entry-content .ccp-appcard button.ccp-appcard__btn--copy:hover,
.entry-content .ccp-appcard button.ccp-appcard__btn--copy:active,
.entry-content .ccp-appcard button.ccp-appcard__btn--copy:focus{
	color: #0f172a !important;
	text-decoration: none !important;
	outline: none !important;
	box-shadow: none !important;
	filter:none !important;
	background:#f8fafc !important;
	border-color:#cbd5e1 !important;
}