/* Vision Section Custom Style */
.vision-section { background-color: #f9fbfd; overflow: hidden; }

.vision-header { text-align: center; margin-bottom: 80px; }
.vision-header h3 { font-size: var(--fs18); font-weight: 700; letter-spacing: 0.2em; margin-bottom: 20px; }
.vision-header .main-slogan { font-size: var(--fs36); color: var(--c_base3); font-weight: 700; margin-bottom: 15px; }
.vision-header .sub-slogan { font-size: var(--fs20); color: #666; font-weight: 400; line-height: 1.4; }
.vision-header .sub-slogan strong { color: var(--c_base3); font-weight: 600; }

.vision-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

.vision-item { position: relative; height: 320px; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: transform 0.4s ease; }
.vision-item:hover { transform: translateY(-10px); }

.vision-item .item-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px; }

/* 이미지의 원형 모티브를 배경 요소로 승화 */
.vision-item .circle-bg { 
    position: absolute; width: 240px; height: 240px; border-radius: 50%; 
    right: -50px; bottom: -50px; opacity: 0.08; transition: all 0.5s ease; 
}
.vision-item:hover .circle-bg { width: 280px; height: 280px; opacity: 0.15; }

/* 텍스트 스타일링 */
.vision-item .txt-box { position: relative; z-index: 2; width: 100%; text-align: left; }
.vision-item .eng-tit { 
    display: block; font-size: var(--fs32); font-weight: 800; color: var(--c_base3); 
    line-height: 1.2; margin-bottom: 20px; transition: color 0.3s ease; 
}
.vision-item .kor-desc { font-size: var(--fs17); color: #777; line-height: 1.7; word-break: keep-all; }

.vision-item:hover .eng-tit { color: var(--c_base1); }

.vision-item .icon-wrap-top { 
    position: absolute; 
    top: 40px; 
    right: 40px; 
    z-index: 3;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.vision-item .icon-wrap-top svg { 
    width: 60px; 
    height: 60px; 
    stroke-width: 1.2;
    opacity: 0.3; /* 평상시엔 은은하게 */
    transition: all 0.5s ease;
}

/* 카드 호버 인터랙션 */
.vision-item:hover .icon-wrap-top { 
    top: 30px; 
    right: 30px; 
    transform: rotate(10deg); 
}

.vision-item:hover .icon-wrap-top svg { 
    opacity: 1; /* 호버 시 컬러 강조 */
    width: 65px; 
    height: 65px;
}

/* 텍스트 박스 정렬 (아이콘 공간 확보) */
.vision-item .txt-box { 
    position: relative; 
    z-index: 2; 
    width: 100%; 
    padding-right: 60px; /* 아이콘과 겹치지 않게 여백 */
}
/* 반응형 대응 */
@media screen and (max-width: 1199px) {
    .vision-header .main-slogan { font-size: var(--fs30); }
    .vision-grid { gap: 20px; }
    .vision-item { height: 280px; }
}

@media screen and (max-width: 767px) {
    .vision-header { margin-bottom: 40px; }
    .vision-header .main-slogan { font-size: var(--fs24); padding: 0 10px; }
    .vision-header .sub-slogan { font-size: var(--fs16); }
    .vision-grid { grid-template-columns: 1fr; }
    .vision-item { height: auto; min-height: 220px; }
    .vision-item .circle-bg { width: 180px; height: 180px; }
    .vision-item .eng-tit { font-size: var(--fs26); }
	
	.vision-item .icon-wrap-top { top: 20px; right: 20px; }
    .vision-item .icon-wrap-top svg { width: 40px; height: 40px; }
    .vision-item:hover .icon-wrap-top { top: 15px; right: 15px; }
    .vision-item .txt-box { padding-right: 0; padding-top: 20px; }
}