@charset "utf-8";

/* --- 스크롤 애니메이션 클래스 --- */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    /* 아래에서 시작 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* 원래 자리로 */
}

/* --- 공통 설정 (가로폭 넓힘) --- */
.inner {
    max-width: 1400px;
    /* 기존 1200px -> 1400px 로 넓혀서 좌우 마진 축소 */
    margin: 0 auto;
    padding: 0 20px;
}

.center {
    text-align: center;
}

.black_logo {
    filter: brightness(0);
}

/* 1. 최상단 비주얼 (첫 번째 섹션은 기존 너비 유지) */
.p_sec1_hero {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #050608;
    color: #fff;
    overflow: hidden;
}

/* 첫 섹션만 1200px 유지 */
.p_sec1_hero .inner {
    max-width: 1400px;
}
.p_sec2_overview .inner {
    max-width: 1500px;
}
.p_sec3_tech .inner {
    max-width: 1500px;
}

.p_sec1_hero .flex_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero_txt {
    flex: 1;
}

.hero_logo {
    max-width: 450px;
    margin-bottom: 25px;
    filter: brightness(0) invert(1);
}

.hero_sub {
    font-size: 32px;
    color: #e0e0e0;
    font-weight: 300;
}

.hero_img {
    flex: 1.2;
    text-align: right;
}

.hero_img img {
    max-width: 100%;
    height: auto;
    transform: scale(1.05) translateX(5%);
}

/* 2. 디바이스 특징 */
.p_sec2_overview {
    padding: 140px 0;
    background-color: #e6f2ff;
}

.p_sec2_overview .sec_title {
    margin-bottom: 100px;
}

.p_sec2_overview .sec_logo {
    max-width: 220px;
    margin-bottom: 25px;
}

.p_sec2_overview .sec_title h2 {
    font-size: 40px;
    margin-bottom: 20px;
    color: #111;
}

.p_sec2_overview .sec_title p {
    font-size: 20px;
    color: #555;
}

.overview_grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ov_left,
.ov_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.ov_left{
    text-align: end;
}

.ov_right {
    text-align: start;
}

.ov_center {
    flex: 1.2;
    text-align: center;
}

.ov_center img {
    max-width: 100%;
    height: auto;
    max-height: 300vh;
}

/* 이미지 커짐 */
.ov_item .left {
    text-align: center;
    padding: 0 10px;
}

.ov_item .right {
    text-align: center;
    padding: 0 10px;
}

.ov_icon {
    max-width: 70px;
    margin-bottom: 25px;
}

/* 아이콘 커짐 */
.ov_item h4 {
    font-size: 28px;
    color: #111;
    margin-bottom: 15px;
}

.ov_item p {
    font-size: 20px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
}

/* 3. 기술 설명 (지그재그) */
.p_sec3_tech {
    padding: 150px 0;
    background: #fff;
}

.tech_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
    margin-bottom: 120px;
}

.tech_row:last-child {
    margin-bottom: 0;
}

.tech_row.reverse {
    flex-direction: row-reverse;
}

.tech_txt {
    flex: 1;
    padding: 0 30px;
}

.tech_txt h3 {
    font-size: 42px;
    color: #111;
    margin-bottom: 30px;
    line-height: 1.3;
}

.tech_txt p {
    font-size: 20px;
    color: #000;
    line-height: 1.8;
    word-break: keep-all;
}

.tech_img {
    flex: 1.2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.tech_img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 4. 앱 기능 그리드 */
.p_sec4_app_features {
    padding: 120px 0;
    background: #fff;
}

.p_sec4_app_features .sec_title {
    margin-bottom: 80px;
}

.p_sec4_app_features .sec_title h2 {
    font-size: 46px;
    margin-bottom: 20px;
    color: #111;
}

.p_sec4_app_features .sec_title h2>span {
    font-size: 46px;
    margin-bottom: 20px;
    color: #111;
    font-weight: 100;
}

.p_sec4_app_features .sec_title p {
    font-size: 20px;
    color: #666;
}

.app_feature_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.af_box {
    border: 1px solid #E5E5E5;
    border-radius: 20px;
    padding: 30px 30px;
    text-align: center;
    transition: all 0.3s;
    background: #fff;
}

.af_box:hover {
    border-color: #00A7F8;
    box-shadow: 0 15px 30px rgba(0, 167, 248, 0.1);
    transform: translateY(-8px);
}

.af_icon {
    max-width: 120px;
    margin-bottom: 30px;
}

.af_box p {
    font-size: 19px;
    color: #000;
    line-height: 1.6;
    word-break: keep-all;
}

/* 5. 앱 다운로드 영역 */
.p_sec5_download {
    width: 100%;
    background-color: #e4f1ff;
    overflow: hidden;
    display: block;
}

.p_sec5_download .inner {
    max-width: none;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: stretch;
}

/* --- 왼쪽 콘텐츠 영역 --- */
.dl_left {
    flex: 0 0 50%;

    /* 👇 여기 수치를 줄이세요 (예: 100px -> 60px) */
    padding-top: 60px;
    padding-bottom: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ★ 추가됨: 상단 이미지와 QR을 묶어서 완벽한 가운데 정렬을 만듦 */
.dl_left_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 정렬의 핵심 (가운데 정렬) */
    width: 100%;
    max-width: 600px;
}

.dl_left_top_img {
    width: 100%;
    margin-bottom: 50px;
}

.app_preview_img {
    width: 100%;
    height: auto;
    display: block;
}

/* QR 코드 영역 */
/* QR 코드 영역 */
.qr_wrap {
    display: flex;
    gap: 20px;
    /* 두 버튼 사이의 간격 */
    justify-content: center;
    width: 100%;
}

.qr_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* QR코드를 버튼 중앙 위에 배치 */
    width: 220px;
    /* 전체(버튼) 가로 너비 */
}

.qr_img {
    width: 120px;
    /* 버튼보다 QR코드 박스를 작게 설정 */
    height: 120px;
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    /* 살짝 둥근 모서리 */
    margin-bottom: 20px;
    /* 버튼과의 간격 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: block;
    box-sizing: border-box;
}

.btn_store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* 글자와 아이콘 사이의 간격 */
    width: 100%;
    /* 부모(220px)에 꽉 차게 */
    padding: 24px 0;
    border-radius: 40px;
    /* 알약 형태의 완전 둥근 모서리 */
    font-size: 16px;
    font-weight: bold;
    color: #fff !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ★ 추가됨: 외부 링크 이미지 아이콘 스타일 */
.store_link_icon {
    height: 14px;
    /* 기존 아이콘 크기와 비슷하게 설정 */
    width: auto;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.6;
    /* 약간 불투명하게 */
    filter: brightness(0) invert(1);
    /* ★ 이미지를 흰색으로 변경 (원본 디자인 의도 유지) */
    margin-left: 20px;
}

.btn_apple {
    background-color: #4A89E8;
}

/* 이미지와 유사한 파란색 */
.btn_google {
    background-color: #333333;
}

/* 짙은 회색 */

.btn_store:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* --- 오른쪽 이미지 영역 (빈틈없이 꽉 채우기) --- */
.dl_right {
    flex: 0 0 55%;
    /* 나머지 50% 꽉 채움 */
    position: relative;
    min-height: 500px;
}

.mockup_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 영역 빈틈없이 꽉 채우기 */
    object-position: center center;
    /* 이미지가 잘려도 중앙을 기준으로 유지 */
}

/* 모바일 대응 */
/* --- 반응형 대응 (모바일/태블릿) --- */
@media all and (max-width: 1024px) {

    /* 공통 레이아웃 변경 */
    .p_sec1_hero {
        min-height: auto;
        padding: 150px 0 80px 0;
    }

    .p_sec1_hero .flex_wrap {
        flex-direction: column;
        text-align: center;
    }

    .hero_logo {
        max-width: 300px;
        margin-bottom: 25px;
        filter: brightness(0) invert(1);
    }

    .hero_img {
        text-align: center;
        margin-top: 40px;
    }

    .hero_img_large img {
        transform: none;
    }

    .overview_grid {
        flex-direction: column;
        gap: 50px;
    }

    .tech_row,
    .tech_row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .app_feature_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .appli_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ★ 5번 앱 다운로드 섹션 모바일 전용 디자인 (CSS로만 처리) ★ */
    .p_sec5_download {
        position: relative;
        padding: 80px 0;
    }

    .p_sec5_download .inner {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 오른쪽 요소(여러 핸드폰)를 배경으로 깔아버림 */
    .dl_right {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: auto;
        margin: 0;
        z-index: 1;
        /* 뒤로 보내기 */
    }

    .mockup_img_large {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        transform: none;
        opacity: 0.6;
        /* 배경이 너무 튀지 않게 살짝 투명도 줌 (필요시 조절) */
    }

    /* 왼쪽 요소(태블릿+핸드폰)를 맨 위로 올림 */
    .dl_left {
        position: relative;
        z-index: 2;
        /* 배경 위로 올리기 */
        width: 100%;
        padding: 0 20px;
        margin: 0;
    }

    .dl_left_wrap {
        max-width: 100%;
    }

    .dl_left_top_img {
        margin-bottom: 40px;
    }

    /* 모바일에서는 QR 이미지를 숨기고 버튼만 세로로 정렬 */
    .qr_wrap {
        flex-direction: column;
        /* 세로 정렬 */
        align-items: center;
        gap: 15px;
    }

    .qr_item {
        width: 100%;
        max-width: 320px;
        /* 버튼 최대 가로폭 */
    }

    .qr_img {
        display: none;
        /* ★ 모바일에서는 QR코드 숨김 */
    }

    .btn_store {
        padding: 18px 0;
        /* 터치하기 편하게 위아래 공간 확보 */
        width: 100%;
    }
}

@media all and (max-width: 768px) {
    .app_feature_grid {
        grid-template-columns: 1fr;
    }

    .appli_grid {
        grid-template-columns: 1fr;
    }
}
/* 6. 활용 분야 */
.p_sec6_application {
    padding: 150px 0;
    background: #fff;
}

.p_sec6_application .sec_title {
    margin-bottom: 80px;
}

.p_sec6_application h2 {
    font-size: 46px;
    color: #111;
}

/* ★ 핵심: 6번 섹션만 inner 가로폭을 기존 1400px에서 1600px로 더 넓게 확장 */
.p_sec6_application .inner {
    max-width: 1800px;
    padding: 0 0px;
    /* 양옆 기본 여백 조금 더 줌 */
}

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

.appli_card {
    border-radius: 20px;
    overflow: hidden;
    background: #f9f9f9;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.appli_img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.appli_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}

.appli_card:hover .appli_img img {
    transform: scale(1.05);
}

/* 텍스트 영역 */
.appli_txt {
    padding: 45px 30px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.appli_txt h4 {
    font-size: 26px;
    color: #111;
    margin-bottom: 20px;
    word-break: keep-all;
}

.appli_txt p {
    font-size: 20px;
    color: #333;
    line-height: 1.1;
    margin-bottom: 15px;
    word-break: keep-all;
    font-weight: bold;
    text-align: left;
}

/* ★ 새로 추가하신 span 태그 스타일 (p태그와 구분되도록) */
.appli_txt span {
    display: block;
    font-size: 17px;
    color: #777;
    line-height: 1.1;
    word-break: keep-all;
    margin-top: auto;
    text-align: left;
    /* 내용이 적어도 카드의 아래쪽 밸런스를 맞춤 */
}

/* --- 반응형 대응 --- */
@media all and (max-width: 1024px) {
    .p_sec1_hero {
        min-height: auto;
        padding: 150px 0 80px 0;
    }

    .p_sec1_hero .flex_wrap {
        flex-direction: column;
        text-align: center;
    }

    .hero_img {
        text-align: center;
        margin-top: 40px;
    }

    .hero_img img {
        transform: none;
    }

    .overview_grid {
        flex-direction: column;
        gap: 50px;
    }

    .tech_row,
    .tech_row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .app_feature_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .p_sec5_download .flex_wrap {
        flex-direction: column;
        gap: 50px;
        align-items: center;
    }

    .dl_left {
        padding-bottom: 0;
        align-items: center;
    }

    .dl_right {
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 50px;
    }

    .mockup_img {
        transform: none;
    }

    .appli_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .p_sec6_application .inner {
        padding: 0 20px;
    }

    .appli_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media all and (max-width: 768px) {
    .app_feature_grid {
        grid-template-columns: 1fr;
    }

    .appli_grid {
        grid-template-columns: 1fr;
    }

    .qr_wrap {
        flex-direction: column;
        align-items: center;
    }
    .appli_grid {
        grid-template-columns: 1fr;
    }
}