/* ============================================================
   메인 (app_www) 공통
   - 색상: base style.css의 --main(#FF6D01) 재사용 (root 추가 없음)
============================================================ */
html,
body {
    scroll-behavior: smooth;
}


/* 태그 pill */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 100px;
    background: #fff3ea;
    background: linear-gradient(90deg, #FFEAD8, #FFD8BC);
    color: #C2410C;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.tag.dark {
    background: rgba(255, 255, 255, 0.09);
    color: #e6ddd4;
}

/* 섹션 타이틀 */
.sec_title {
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.32;
    color: #222;
    letter-spacing: -0.5px;
}

.sec_title.light {
    color: #fff;
}

.sec_title.gradient {
    color: transparent;
    background: linear-gradient(90deg, #2E241D, #FF4A00);
    background-clip: text;
}

.sec_desc {
    margin-top: 16px;
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.6;
    color: #5c6573;
}

.contact .sec_desc {
    margin-top: 0;
}

/* 섹션 헤더 (tag + title) */
.shead {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.shead.center {
    align-items: center;
    text-align: center;
}

/* 버튼 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    padding: 0 28px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.btn_main_gradient {
    background: linear-gradient(90deg, #FF9542, var(--main));
    color: #fff;
}

.btn_line {
    background: #fff;
    color: #222;
    border: 1px solid #e5e8ec;
}


/* ============================================================
   HERO
============================================================ */
.hero {
    padding: 60px 0 0px;
    background:
        radial-gradient(90% 60% at 50% -10%, #ffe4cd 0%, rgba(255, 244, 236, 0) 40%),
        linear-gradient(180deg, #fff6ef 0%, #ffffff 65%);
    overflow: hidden;
}

.hero_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hero_title {
    font-size: clamp(34px, 5.6vw, 52px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
    color: #222;
}

.hero_title em {
    font-style: normal;
    color: var(--main);
}

.hero_desc {
    font-size: clamp(14px, 1.6vw, 17px);
    color: #5c6573;
    text-align: center;
}

.hero_cta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* 히어로 목업 (브라우저 프레임 + 페이드 슬라이드) */
.swiper.hero_swiper {
    margin-top: 56px;
}

.hero_swiper img {
    display: block;
    width: 100%;
}


/* ============================================================
   MARQUEE (학교 리스트)
============================================================ */
.marquee {
    padding: 44px 0;
    background: #FBF6EE;
}

.mq_title {
    text-align: center;
    font-size: clamp(15px, 1.8vw, 18px);
    font-weight: 700;
    color: #222;
    margin-bottom: 28px;
}

.mq_mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mq_swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.mq_item {
    width: auto !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 17px;
    font-weight: 500;
    color: #ADA59B;
    white-space: nowrap;
}

.mq_item .icon {
    display: flex;
    width: 26px;
}



/* ============================================================
   FEATURES 01 : PLATFORM HUB
============================================================ */
.feat01 {
    padding: 100px 0;
}

.feat01 .msec_inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

.feat01_text {
    flex: 0 0 auto;
    width: 402px;
    max-width: 100%;
}

.feat01_text .sec_desc {
    margin-bottom: 28px;
}

.check_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}

.check_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

.check_list i {
    color: var(--main);
    font-size: 18px;
}

.feat01_hub {
    flex: 1;
    display: flex;
    justify-content: center;
}

.feat01_hub img {
    width: 100%;
    max-width: 560px;
}


/* ============================================================
   FEATURES 02 : 통합 운영 환경 (01/02/03)
============================================================ */
.feat02 {
    padding: 100px 0;
}

.feat02 .shead {
    align-items: center;
    text-align: center;
}

.feat02_list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.feat02_row {
    display: flex;
    align-items: center;
    gap: 80px;
}

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

.feat02_txt {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feat02_txt .num {
    font-size: 40px;
    font-weight: 800;
    color: var(--main);
    line-height: 1;
}

.feat02_txt .eyebrow {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #9e9e9e;
}

.feat02_txt h3 {
    margin-top: 10px;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    color: #222;
}

.feat02_txt p {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.65;
    color: #5c6573;
}

.feat02_img {
    flex: 1;
    display: flex;
    justify-content: center;
    max-height: 430px;
}

.feat02_img img {
    width: 100%;
    max-width: 510px;
    object-fit: contain;
}


/* ============================================================
   FEATURES 03 : 운영 지원 기능 (카드 그리드)
============================================================ */
.feat03 {
    padding: 100px 0;
    background: #faf7f2;
}

.feat03_grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
}

.fcard {
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f0ece5;
}

.fcard_ic {
    width: 50px;
    display: flex;
    margin-bottom: 20px;
}


.fcard h3 {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}

.fcard p {
    font-size: 14px;
    line-height: 1.6;
    color: #6a7280;
}


/* ============================================================
   FEATURES 04 : 보안 (다크)
============================================================ */
.feat04 {
    padding: 100px 0;
    background: linear-gradient(180deg, #2B2420 0%, #191310 100%);
}

.feat04 .sec_grid {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scard {
    border-radius: 20px;
    background: #2e2620;
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 32px;
}

.scard.wide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.scard_row {
    display: flex;
    gap: 20px;
}

.scard_row .scard {
    flex: 1;
}

.chip {
    display: inline-flex;
    width: 50px;
    margin-bottom: 18px;
}


.scard h4 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.scard p {
    font-size: 14px;
    line-height: 1.65;
    color: #b7ada3;
}

.scard.wide .scard_body {
    flex: 1;
}

.scard.wide .chip {
    margin-bottom: 16px;
}

.scard_vis {
    flex: 0 0 auto;
    width: 96px;
    display: flex;
}


.pills {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
}

.pills li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.pills li i {
    color: var(--main);
}


/* ============================================================
   CONTACT
============================================================ */
.contact {
    padding: 100px 0;
    background:
        radial-gradient(38% 60% at 10% 25%, rgba(255, 150, 80, 0.16), transparent 60%),
        radial-gradient(30% 60% at 90% 20%, rgba(140, 225, 175, 0.24), transparent 60%),
        radial-gradient(15% 50% at 72% 92%, rgba(120, 175, 255, 0.14), transparent 60%),
        #FFFCF8;
}

.contact_form {
    margin-top: 50px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.contact_inline {
    width: 100%;
    display: flex;
    gap: 12px;
}

.c_input {
    flex: 1;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #e5e8ec;
    border-radius: 10px;
    font-size: 15px;
    color: #222;
    box-shadow: 0px 6px 16px 0px #7846140F;
}

.c_input::placeholder {
    color: #9e9e9e;
}

.contact_inline .btn {
    flex: 0 0 auto;
    height: 52px;
}

.c_agree {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6a7280;
    cursor: pointer;
}

.c_agree a {
    color: var(--main);
    text-decoration: underline;
}

/* 체크 시 배경 검정 */
.c_agree input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #000;
    cursor: pointer;
}


/* ============================================================
   반응형 — 태블릿
============================================================ */
@media screen and (max-width: 1023px) {
    .feat01 .msec_inner {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .feat01_text {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .check_list {
        align-items: flex-start;
    }

    .feat02_row,
    .feat02_row.reverse {
        gap: 40px;
    }

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


/* ============================================================
   반응형 — 모바일
============================================================ */
@media screen and (max-width: 767px) {

    .hero {
        padding: 64px 0 0;
    }

    .feat01,
    .feat02,
    .feat03,
    .feat04,
    .contact {
        padding: 64px 0;
    }

    .btn {
        height: 50px;
        font-size: 15px;
        padding: 0 22px;
    }

    .c_input {
        flex: initial;
    }

    .hero_cta {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }

    .hero_cta .btn {
        width: 100%;
    }


    .swiper.hero_swiper {
        margin: 40px -16px 0;
    }

    /* 01/02/03 세로 스택 (이미지 아래로) */
    .feat02_row,
    .feat02_row.reverse {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .feat02_txt {
        align-items: center;
    }

    .feat03_grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* 보안 카드 스택 */
    .scard.wide {
        flex-direction: column;
        align-items: flex-start;
    }

    .scard_row {
        flex-direction: column;
    }

    .scard_vis {
        display: none;
    }

    /* 문의 폼 스택 */
    .contact {
        background:
            radial-gradient(50% 30% at 10% 25%, rgba(255, 150, 80, 0.16), transparent 60%),
            radial-gradient(50% 40% at 90% 20%, rgba(140, 225, 175, 0.24), transparent 60%),
            radial-gradient(40% 30% at 72% 98%, rgba(120, 175, 255, 0.14), transparent 60%),
            #FFFCF8;
    }

    .contact_inline {
        flex-direction: column;
    }

    .contact_inline .btn {
        width: 100%;
        height: 52px;
    }

    .c_agree {
        text-align: center;
    }

    .feat02_img {
        max-height: 230px;
    }
}