@charset "utf-8";

/* 기본 초기화 및 폰트 설정 */
#philo_wrap {
    width: 100%;
    overflow: hidden;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    color: #111;
}

#philo_wrap .inner {
    max-width: 1280px; /* 레퍼런스 사이트들처럼 넓게 */
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* --- 섹션 1: Hero (인트로) --- */
.sec_hero {
    padding: 180px 0 160px; /* 위아래 여백을 아주 시원하게 줌 */
    text-align: center;
}

/* 메인 타이틀: 아주 크고 굵게 */
.sec_hero .main_tit {
    font-size: 64px;
    font-weight: 800; /* Extra Bold */
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
}

/* 서브 타이틀: 얇고 세련되게 */
.sec_hero .sub_tit {
    font-size: 24px;
    font-weight: 400;
    color: #555;
    line-height: 1.6;
}

/* --- 섹션 2: Core Values (3단 레이아웃) --- */
.sec_values {
    padding-bottom: 200px;
}

.sec_values .value_list {
    display: flex;
    justify-content: space-between; /* 3개를 양옆으로 쫙 벌림 */
    gap: 40px; /* 사이 간격 */
}

.sec_values .value_list li {
    width: calc(100% / 3); /* 정확히 3등분 */
    position: relative;
}

/* 이미지 들어갈 회색 박스 */
.sec_values .img_box {
    width: 100%;
    height: 300px; /* 세로로 긴 직사각형 비율 */
    background-color: #f0f0f0; /* 연한 회색 */
    margin-bottom: 40px;
    border-radius: 4px; /* 살짝 둥글게 */
    transition: all 0.3s ease;
    overflow: hidden;
}

.sec_values .img_box img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* [매우 중요] 이미지를 찌그러뜨리지 않고 박스를 꽉 채움 (넘치는 부분은 잘림) */
    object-position: center;  /* 이미지 위치를 중앙으로 정렬 */
    display: block;  /* 이미지 하단 미세한 여백 제거 */
}

/* 마우스 올리면 회색박스가 살짝 진해지는 효과 */
.sec_values .value_list li:hover .img_box {
    background-color: #ddd;
    transform: translateY(-10px); /* 위로 살짝 뜸 */
}

/* 텍스트 박스 */
.sec_values .txt_box {
    padding-right: 10px;
}

/* Q1, Q2, Q3 강조 (타이포그래피 포인트) */
.sec_values .q_num {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary, #0055ff); /* 파란색 포인트 (없으면 파랑) */
    margin-bottom: 15px;
    border-bottom: 2px solid #111; /* 숫자 밑에 짧은 검은 줄 */
    width: 30px; /* 줄 길이 */
    padding-bottom: 5px;
}

/* 영문 타이틀 (Questioning Essentials...) */
.sec_values .val_tit {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

/* 한글 핵심 문구 ("왜 기술은 발전하는데...") */
.sec_values .val_desc_head {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #222;
    word-break: keep-all;
}

/* 설명 본문 (우리는 당연한 것에...) */
.sec_values .val_desc_body {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
}


/* --- 반응형 (모바일) --- */
@media (max-width: 1024px) {
    .sec_hero .main_tit { font-size: 48px; }
    .sec_values .value_list { gap: 20px; }
    .sec_values .val_tit { font-size: 28px; }
}

@media (max-width: 768px) {
    .sec_hero { padding: 100px 0 80px; }
    .sec_hero .main_tit { font-size: 32px; margin-bottom: 20px; }
    .sec_hero .sub_tit { font-size: 16px; }
    .mo_br { display: block; } /* 모바일에서만 줄바꿈 */

    /* 3단 레이아웃 -> 1단 레이아웃으로 변경 */
    .sec_values .value_list {
        display: block; /* 블록으로 바꿔서 세로로 쌓음 */
    }
    .sec_values .value_list li {
        width: 100%;
        margin-bottom: 80px; /* 아이템 간 간격 */
    }
    .sec_values .img_box { height: 240px; margin-bottom: 25px; }
    .sec_values .q_num { margin-bottom: 10px; }
    .sec_values .val_tit { margin-bottom: 20px; font-size: 26px; }
}