@charset "utf-8";

/* 공통 변수 활용 */
.pg_color { color: var(--primary) !important; }

/* 전체 컨테이너 여백 축소 */
.pagecommon { position: relative; padding-bottom: 60px; font-size: 15px; color: #777; font-family: var(--k-font); }
.pagecommon .inner { max-width: var(--mainsize); margin: 0 auto; padding: 0 15px; }

/* 헤더 상단 여백 최소화 (최대한 위로 올림) */
.vision_header { text-align: center; padding: 10px 0 40px; } /* padding-top을 10px로 축소 */
.vision_header .tit span { font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: 1px; }
.vision_header .tit p { margin: 5px 0 15px; font-size: 32px; font-weight: 300; color: #111; }
.vision_header .tit p b { font-weight: 700; }
.sub_intro { font-size: 15px; line-height: 1.6; color: #666; word-break: keep-all; }

/* 핵심가치 LOVE 그리드 */
.vision_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 60px; }
.vision_card { 
    background: #fff; 
    border: 1px solid #eee; 
    padding: 35px 20px; 
    text-align: center; 
    border-radius: 10px; 
    transition: all 0.4s ease; /* 애니메이션 속도 조절 */
    box-shadow: 0 0 0 rgba(0,0,0,0); /* 기본 상태 그림자 없음 */
}

/* 마우스 오버 시 효과 (간격 0, 흐릿함 강조) */
.vision_card:hover { 
    transform: translateY(-5px); 
    border-color: var(--primary);
    /* 요청사항: 그림자 간격 0, 더 흐릿하게 설정 (0 0 25px) */
    box-shadow: 0 0 25px rgba(0,0,0,0.08); 
}

.vision_card .alphabet { font-size: 45px; font-weight: 900; opacity: 0.15; line-height: 1; margin-bottom: 10px; }
.vision_card .v_tit { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 15px; letter-spacing: 1px; }
.vision_card p { font-size: 14.5px; color: #666; line-height: 1.5; }
.vision_card p b { color: #333; }

/* 실천목표 섹션 */
.mission_section { background: #f9fbfd; padding: 50px 40px; border-radius: 20px; }
.section_title { margin-bottom: 35px; text-align: left; }
.section_title h3 { font-size: 22px; color: #111; font-weight: 700; position: relative; padding-left: 15px; }
.section_title h3:after { content:''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; background: var(--primary); }
.section_title p { font-size: 14px; color: #888; margin-top: 5px; padding-left: 15px; }

/* 실천목표 리스트 */
.mission_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.mission_item { 
    display: flex; gap: 20px; align-items: flex-start; 
    background: #fff; padding: 25px; border-radius: 15px; 
    border-bottom: 3px solid #eee; transition: all 0.4s ease; 
}

/* 실천목표 마우스 오버 효과 */
.mission_item:hover { 
    border-color: var(--primary); 
    box-shadow: 0 rgba(0,0,0,0.05); /* 간격 0의 흐릿한 그림자 */
}

.m_num { font-size: 22px; font-weight: 800; color: var(--primary); opacity: 0.25; font-family: var(--e-font); }
.m_cont h4 { font-size: 17px; color: #111; font-weight: 700; margin-bottom: 8px; }
.m_cont p { font-size: 14px; color: #666; line-height: 1.6; text-align: justify; word-break: keep-all; }

/* 반응형 모바일 */
@media (max-width: 991px) {
    .vision_grid { grid-template-columns: repeat(2, 1fr); }
    .mission_list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .vision_grid { grid-template-columns: 1fr; }
    .mission_section { padding: 30px 20px; }
    .vision_header .tit p { font-size: 26px; }
}