/* =========================== */
/* 2page 시작 */
/* =========================== */

/* Noto Sans KR 폰트 적용 (없을 경우 추가) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap');

/* 문제인식 슬라이드 전용 스타일 */
.problem-section {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #FAFAFA;
    height: 100%;
    width: 100%; /* 부모 너비를 100%로 확실히 설정 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 자식 요소들을 가로 중앙으로 정렬 */
    padding: 40px 0; /* 상하 여백 추가 (선택사항) */
}

.problem-title {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #333333 !important;
    margin-bottom: 50px !important;
    text-align: center;
    width: 100%; /* 타이틀이 전체 너비를 차지하게 하여 중앙 정렬 보장 */
}

.problem-title .accent-text {
color: #D4AF37; /* 샴페인 골드 포인트 */
}

.card-container {
    display: flex;
    gap: 30px;
    justify-content: center; /* 카드들을 컨테이너 안에서 중앙 정렬 */
    width: 95%;
    max-width: 1200px;
    margin: 0 auto; /* [핵심] 컨테이너 자체를 부모 중앙에 배치 */
}

.problem-card {
background: #ffffff;
border-radius: 20px;
flex: 1;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
border: 1px solid rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
overflow: hidden; /* 이미지가 둥근 모서리 밖으로 튀어나오지 않게 방지 */
}

.problem-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 카드 상부: 이미지 영역 */
.card-image-wrap {
width: 100%;
height: 250px; /* 이미지 높이 고정 */
background-color: #EEEEEE; /* 실제 이미지 삽입 전 임시 배경색 */
display: flex;
justify-content: center;
align-items: center;
color: #AAAAAA;
font-weight: 500;
font-size: 0.9rem;
position: relative;
}

/* 실제 <img> 태그 사용 시 적용될 스타일 */
.card-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover; /* 이미지가 영역에 꽉 차면서 비율 유지되도록 */
}

/* 카드 하부: 텍스트 영역 */
.card-text-wrap {
padding: 30px 20px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}

.card-subtitle {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: #333333 !important;
margin-bottom: 15px !important;
}

.card-content {
font-size: 1.1rem !important;
line-height: 1.7 !important;
color: #666666;
word-break: keep-all;
margin: 0 !important;
}

/* 강조 숫자 스타일 */
.accent-num {
color: #E57373; /* 부드러운 코랄/레드 */
font-weight: 700;
font-size: 1.25rem;
}