/**{*/
/*    font-family: 'Noto Sans KR', sans-serif;*/
/*}*/
.intro_header {
    position: relative; /* 자식 요소인 title의 기준점 */
    width: 100%;
    height: auto;
    overflow: hidden;
}

/*.intro_header {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 400px; !* 1. 원하는 높이로 고정 (예: 400px) *!*/
/*    overflow: hidden; !* 2. 높이를 벗어나는 이미지 부분은 숨김 *!*/
/*}*/

.intro_header_img {
    width: 100%;
    height: 100%;
}

.intro_header_title {
    position: absolute;
    top: 50%;         /* 세로 중앙 */
    left: 50%;        /* 가로 중앙 */
    transform: translate(-50%, -50%); /* 본인 크기만큼 역이동하여 완벽한 중앙 정렬 */
    z-index: 10;      /* 이미지보다 위에 오도록 설정 */
    text-align: center;
    width: 100%;      /* 텍스트가 길어질 경우 대비 */
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosanskr/v39/PbykFmXiEBPT4ITbgNA5Cgm20xz64px_1hVWr0wuPNGmlQNMEfD4.0.woff2) format('woff2');
    }
.intro_header_title h2 {
    color: #fff;
    margin: 0;
    font-size: 3rem;  /* 폰트 크기 조절 */
    font-weight: 800;
    font-family: 'Noto Sans KR', sans-serif;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* 가독성을 위한 그림자 */
}
/* 1. 기본 스타일 유지 */
.intro-page-container {
    position: relative;
    font-family: 'Pretendard', sans-serif;
    /*{#background-color: #fff;#}*/
    overflow: hidden;
    width: 100%;
    padding-bottom: 200px;
}

/* 배경 라인 - 좌측 상단 걸치듯 배치 */
.intro-page-container::before {
    content: "";
    position: absolute;
    top: 55%;
    left: -100px;
    width: 400px;
    height: 400px;
    border: 2px solid transparent;
    /*{#background-image: linear-gradient(#ffffff, #ffffff),#}*/
    /*{#                  linear-gradient(to right, rgba(58, 134, 255, 0.4), rgba(104, 17, 225, 0.15), rgba(255, 0, 110, 0.15));#}*/
    background-image: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)),
                      linear-gradient(to right, rgba(58, 134, 255, 0.4), rgba(104, 17, 225, 0.15), rgba(255, 0, 110, 0.15));
	background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.bg-deco-circle {
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    border: 1px solid rgba(200, 200, 200, 0.2);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.bg-gradient-sphere {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #8338ec, #ff006e, #3a86ff);
    filter: blur(50px);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

section { position: relative; z-index: 2; padding: 0 20px; }

.section-header { text-align: center; padding: 80px 0 50px; }
/*.title-en { font-size: 36px; font-weight: 300; letter-spacing: 5px; margin-bottom: 20px; }*/
.title-en { font-size: 36px; font-weight: 300; letter-spacing: 5px; }
.subtitle { font-size: 20px; font-weight: 500; line-height: 1.4; margin-bottom: 15px; }


.title-en.text-body {
    /* 1. 폰트 종류 설정 (index_custom에서 사용하는 폰트명으로 확인 필요) */
    font-family: 'Noto Sans KR', sans-serif;

    /* 2. 폰트 두께 및 크기 조정 (index의 시각적 느낌 재현) */
    font-weight: 700;
    font-size: 3.5rem; /* index_custom의 크기에 맞춰 조정하세요 */
    line-height: 1.2;
    letter-spacing: -0.02em;

    /* 3. 기타 스타일 */
    margin-bottom: 20px;
    word-break: keep-all;
}
.title-en.text-body.sub {
    font-size: 2rem; /* index_custom의 크기에 맞춰 조정하세요 */
}

/* MISSION 영역 - Flex 기반 가로배치 */
.mission-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 80px;
}

.mission-item { flex: 1; text-align: center; }
.circle-box {
    width: 250px; height: 250px;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin: 0 auto 25px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    /*{#background: #fff;#}*/
    transition: all 0.4s ease;
}

.blue { color: #3a86ff; border-color: #3a86ff; }
.purple { color: #8338ec; border-color: #8338ec; }
.red { color: #ff006e; border-color: #ff006e; }

/* 4 SENSES 영역 - Flex 기반 가로배치 */
.senses-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.sense-card {
    flex: 1;
    /*{#background: rgba(255, 255, 255, 0.9);#}*/
    border: 3px solid #d8f1e3;
    padding: 40px 15px;
    text-align: center;
    position: relative; overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 호버 효과 유지 */
.mission-item:hover .circle-box { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); }
.sense-card:hover { transform: translateY(-12px); border-color: #03a272; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }

.responsive-logo {
    display: block;
    margin: 0 auto;           /* 이미지 중앙 정렬 */
    width: 100%;             /* 부모 너비에 맞춤 */
    max-width: 400px;        /* PC 최대 높이가 400px이었으므로 너비도 그에 맞춰 제한 */
    height: auto;            /* 비율 유지하며 자동 조절 */
    object-fit: contain;     /* 이미지가 잘리지 않게 함 */
    transition: all 0.3s ease; /* 부드러운 크기 변화 */
}

.footer{
    margin-top:0;
}
/* ============================================================
   [핵심] 반응형 미디어 쿼리 (모바일 대응)
   ============================================================ */

@media (max-width: 991px) {
    /* 1. 미션 영역 세로 배치 */
    .mission-grid {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    /* 2. 상식 카드 영역 세로 배치 (2개씩 혹은 1개씩) */
    .senses-grid {
        flex-wrap: wrap; /* 줄바꿈 허용 */
        gap: 20px;
    }

    .sense-card {
        flex: none;
        width: calc(50% - 10px); /* 태블릿에서는 2개씩 */
    }

    .title-en { font-size: 32px; }
    .subtitle { font-size: 18px; }
}

/* 모바일 전용 미세 조정 (선택 사항) */
@media (max-width: 768px) {
    .responsive-logo {
        max-width: 250px;    /* 모바일에서는 조금 더 작게 배치 */
    }
}

@media (max-width: 576px) {
    /* 3. 모바일에서는 모든 카드 1개씩 꽉 차게 */
    .sense-card {
        width: 100%;
    }

    .circle-box {
        width: 220px; height: 220px; /* 원 크기 살짝 줄임 */
    }

    .title-en { font-size: 28px; letter-spacing: 2px; }

    /* 모바일에서 배경 라인이 너무 튀지 않게 조정 */
    .intro-page-container::before {
        width: 250px; height: 250px;
        top: 70%;
    }
}