/* ==================================================
    student_cert °øÅë
================================================== */
.student_cert {}
.student_cert .cert-section__inner {max-width:1024px;margin:0 auto}

/* ==================================================
    hero (TOP)
================================================== */
.cert-hero {position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;width:100%;padding:80px 0;background:#f5f7ff}
.cert-hero__bg {position:absolute;top:50%;left:50%;width:370px;height:354px;transform:translate(-50%,-50%);pointer-events:none}
.cert-hero__bg img {display:block;width:100%;height:100%;object-fit:cover}
.cert-hero__inner {position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px}
.cert-hero__badge {display:flex;align-items:center;justify-content:center;padding:8px 20px;border:1px solid;border-radius:999px;font-size:24px;font-weight:600;color:#0043ec}
.cert-hero__tt {display:flex;flex-direction:column;align-items:center;gap:2px;}
.cert-hero__lead {font-size:42px;color:#333;line-height:1.4}
.cert-hero__title {display:flex;justify-content:center;gap:18px; font-size:84px;font-weight:800; line-height:1.2}
.cert-hero__title-a {color: #333;}
.cert-hero__title-b {background:linear-gradient(95deg,#0043ec 10.664%,#002686 87.973%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cert-hero__desc {font-size:20px;font-weight:400;color:#333;text-align:center;line-height:1.4}
.cert-hero__desc strong {font-weight:700}

/* ==================================================
    section °øÅë
================================================== */
.cert-section {width:100%;padding:60px 0}
.cert-section--02 {background:#f8f8f8}
.cert-section__inner {display:flex;flex-direction:column;align-items:center;width:100%}
.cert-section__head {display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.cert-section__title {font-size:32px;font-weight:700;color:#333;line-height:1.3; text-align: center;}
.cert-section__desc {font-size:18px; color:#555;line-height:1.4}
.cert-section__desc strong {font-weight:700}
.tc-blue {color:#2461fa;}
.tc-green {color:#20af7b;}

/* ==================================================
    #01 benefit-grid
================================================== */
.cert-section--01 .cert-section__inner {gap: 30px;}
.benefit-grid {display:flex;flex-direction:column;gap:24px;width:100%}
.benefit-row {display:flex;gap:24px;width:100%}
.benefit-card {display:flex;flex:1 1 0;flex-direction:column;gap:10px;padding:32px;border:1px solid #e5e5e5;border-radius:20px;}
.benefit-card__head {display:flex;flex-direction:column; align-items: start; gap:8px}
.benefit-card__title {font-size:24px;font-weight:600;color:#333;line-height:1.4}
.benefit-card__desc {color:#777;line-height:1.5}
.badge {display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;background:#2461fa;font-size:13px;font-weight:600;color:#fff;}
.badge--green {background:#20af7b}
.badge-list {display:inline-flex;gap:4px}
.btn-cta {width: 100%; max-width:500px; padding:18px 0;border-radius:8px;background:#333;font-size:18px;font-weight:600;color:#fff;text-align:center}

/* ==================================================
    #02 benefit2-grid
================================================== */
.benefit2-grid {display:flex;gap:24px;width:100%; margin: 30px 0 40px;}
.benefit2-card {display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:20px;padding:32px;border-radius:20px;background:#fff}
.benefit2-card__txt {display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.benefit2-card__title {font-size:24px;font-weight:600;color:#333;line-height:1.4}
.benefit2-card__desc {font-size:16px;font-weight:400;color:#777;}
.btn-bk {padding:12px 24px;border-radius:6px;background:#333;font-weight:600;color:#fff}
.cert-note {width:100%}
.cert-note__text,.cert-note__example {font-size:13px;}
.cert-note__text {color:#777}
.cert-note__example {padding:0 12px;color:#9c9c9c}

/* ==================================================
    #03 step-list
================================================== */
.cert-section--03 .cert-section__inner {gap: 30px;}
.step-list {display:flex;align-items:center;justify-content:center;gap:32px;width:100%}
.step-card {display:flex;flex:1 1 0;flex-direction:column;align-items:center; width: 100%; padding:32px 0;border:1px solid #dbdbdb;border-radius:20px;}
.step-card:first-child {}
.step-card__head {display:flex;flex-direction:column;align-items:center;}
.status-before {display: flex; flex-direction: column; align-items: center; gap: 16px;}
.step-card__no {display:flex;align-items:center;justify-content:center;width:42px; aspect-ratio: 1/1; margin-bottom: 10px; border-radius:999px;background:#e8eeff; font-weight:700;color:#0043ec}
.step-card__title {font-size:24px;font-weight:600;color:#333;text-align:center;line-height:1.4}
.step-card__desc {margin-top: 8px; color:#777;text-align:center;line-height:1.5}
.btn-primary {padding:12px 24px; border-radius:6px;background:#2c5bf6;font-weight:500;color:#fff}
.login-box .btn-primary {padding-right: 0;}
.btn-primary--block {display:flex;width:100%}
.step-card__note {display:flex;flex-direction:column;align-items:center;gap:12px}
.step-card__note p {font-size:14px;color:#777;text-align:center;line-height:1.4}
.btn-ghost {padding:4px 12px;border-radius:4px;background:#777;font-size:14px;font-weight:500;color:#fff}
.step-arrow {width:26px;height:41px}
.step-arrow__icon {display:block}
.login-box {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:207px; margin-top: 28px; color:inherit;}
.login-box__input {width:100%;padding:12px 20px;border:1px solid #dbdbdb;border-radius:8px;background:#f8f8f8;font-weight:500;color:#929292;}
.notice {}
.notice__title {margin-bottom:4px;font-size:14px;font-weight:700;color:#777;}
.notice-list {font-size:13px;color:#9c9c9c;}
.notice-list li {display: flex; margin-bottom:2px}
.notice-list li:before {content:"\00B7"; margin: 0 7px;}

/* ==================================================
    popup
================================================== */
.dim-cert {display: none;}
.dim-cert.on {display: block;}
.dim-cert:before {content:''; position: fixed; inset:0; z-index: 999; opacity: 1; background: rgba(0, 0, 0, 0.5);}
.dim-cert .pop-cert {display: flex; flex-direction: column; width: 100%; max-width: 768px; max-height: 90vh; border-radius: 20px;position: fixed; left: 50%; top: 50%; z-index: 1000; transform: translate(-50%, -50%); background: #fff;}

/* ==================================================
    popup content & close button
================================================== */
.dim-cert .btn-close {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transition: opacity 0.2s;
}

.dim-cert .btn-close:hover {
    opacity: 0.7;
}

.pop-cert__head {
    padding: 20px 24px;
    border-bottom: 1px solid #EDEDED;
}

.pop-cert__title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.pop-cert__body {
    margin-bottom: 1px;
    padding: 20px 24px;
    overflow: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.pop-cert__body::-webkit-scrollbar {display: none;}

.pop-cert__container {display: flex; flex-direction: column; gap: 24px;scrollbar-width: none; -ms-overflow-style: none;}
.pop-cert__container::-webkit-scrollbar {display: none;}

.pop-cert__container .pop-content {display: flex; flex-direction: column; gap: 12px;}
.pop-cert__container .pop-content h3 {font-weight: 600; font-size: 16px; color: #333;}
.pop-cert__container .pop-content h3 em {color: #2C5BF6;}
.pop-cert__container .scroll {height: 168px; overflow: hidden; padding: 4px; border: 1px solid #DBDEE5; border-radius: 8px;} 
.pop-cert__container .scroll .inner {overflow: auto; height: 100%; padding: 8px; font-size: 13px; color: #777; line-height: 1.3;}
.pop-cert__container .scroll .inner::-webkit-scrollbar { width: 4px;}
.pop-cert__container .scroll .inner::-webkit-scrollbar-track{background: #DBDEE5;}
.pop-cert__container .scroll .inner::-webkit-scrollbar-thumb {border-radius: 99px;  height: 68px; background: #555;}

.pop-cert__container .input-group {display: flex; flex-direction: column; align-items: center; gap: 12px; border-radius: 8px; border: 1px solid #DBDEE5; padding: 24px; color: #333; letter-spacing: -0.16px;}
.pop-cert__container .input-box {display: flex; align-items: center;}
.pop-cert__container .input-box label {min-width: 79px;}
.pop-cert__container .input-box input {min-width: 200px; height: 42px; padding: 0 18px; border-radius: 6px; border: 1px solid #DBDEE5;}
.pop-cert .btn-primary {width: 200px; margin: 0 auto; font-size: 15px; text-align: center;}

.pop-cert-body {padding: 24px; text-align: center;}
.pop-cert-body .pop-content .text-group {display: flex; align-items: center; justify-content: center; height: 120px; margin-bottom: 12px; border: 1px solid #DBDEE5; border-radius: 8px;}
.pop-cert-body .pop-content .text-group em {color: #2c5bf6;}

.pop-cert__desc {
    font-size: 15px;
    color: #ed2024;
    line-height: 1.4;
}

.pop-cert__steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pop-cert__step {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pop-cert__step-title {
    padding: 8px;
    background: #f1f3f8;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.pop-cert__step-title .highlight {
    color: #ed2024;
}

.pop-cert__step-img {
}

.pop-cert__step-img img {
    display: block;
    width: 100%;
}



/* ==================================================
    status-after (ÀÎÁõ ¿Ï·á)
================================================== */
.status-after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    margin-top: 28px;
}

.status-after.on {
    display: flex;
}

.cert-status-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 207px;
    padding: 12px 0;
    background: rgba(44, 91, 246, 0.15);
    border: 1px solid #2c5bf6;
    border-radius: 6px;
    text-align: center;
}

.cert-status-box.cert-status-wait{
    border: 1px solid #7AC2B6;
    background: rgba(122, 194, 182, 0.15);
}
.cert-status-wait .cert-status-box__main,
.cert-status-wait .cert-status-box__sub {color: #089C83;}

.cert-status-box__sub {
    font-size: 16px;
    font-weight: 400;
    color: #2c5bf6;
    line-height: 1.4;
}

.cert-status-box__main {
    font-size: 18px;
    font-weight: 700;
    color: #2c5bf6;
    line-height: 1.4;
}

.cert-status-note {
    width: 100%;
    text-align: center;
}

.cert-status-note p {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
}

/* ==================================================
    TA (min-width: 768px) and (max-width: 1199px)
================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    .step-card {min-height: 374px;}
}
/* TA, MO */
@media (max-width:1199px) {
    .student_cert .cert-section__inner {width:100%;padding:0 24px}
    .cert-section {padding:60px 0}
    .step-list {gap:16px}
}

/* ==================================================
    MO (max-width:767px)
================================================== */
@media (max-width:767px) {
    .student_cert .cert-section__inner {padding:0 16px}
    .cert-section--01 .cert-section__inner {gap: 20px;}
    .cert-hero {padding:50px 0}
    .cert-hero__bg {width:204px;height:226px}
    .cert-hero__inner {gap:18px}
    .cert-hero__badge {padding:6px 16px;font-size:18px}
    .cert-hero__lead {font-size:24px}
    .cert-hero__title {gap:7px}
    .cert-hero__title-a,.cert-hero__title-b {font-size:42px}
    .cert-hero__desc {font-size:17px}
    .cert-hero__desc strong {font-size:17px}
    .cert-section {padding:40px 0}
    .cert-section__inner {}
    .cert-section__title {font-size:24px}
    .cert-section__desc {font-size:16px}
    .benefit-grid {gap:16px}
    .benefit-row {flex-direction:column;gap:16px}
    .benefit-card {gap: 6px; padding:24px; border-radius:10px}
    .benefit-card__desc {font-size:14px}
    .badge {padding:2px 8px;font-size:12px}
    .benefit-card__title {font-size: 20px;}
    .btn-cta {width:100%;max-width:328px;padding:16px 0;border-radius:6px;font-size:16px}
    .benefit2-grid {flex-direction:column;gap:16px; margin: 20px 0;}
    .benefit2-card {gap: 16px; padding:24px;border-radius:10px}
    .benefit2-card__txt {gap: 8px;}
    .benefit2-card__desc {font-size:14px}
    .benefit2-card__title {font-size: 20px;}
    .btn-bk {padding:10px 24px;border-radius:4px;font-size:14px}
    .cert-note__text, 
    .cert-note__example {font-size: 12px;}
    .cert-section--03 .cert-section__inner {gap: 20px;}
    .step-list {flex-direction:column;gap:12px}
    .step-card {padding:24px 32px;border-radius:10px}
    .step-card__no {width:36px;height:36px;font-size:14px}
    .step-card__title {font-size:20px}
    .step-card__desc {font-size:13px}
    .btn-primary {padding:10px 24px;border-radius:4px;font-size:14px}
    .btn-ghost {font-size:13px}
    .step-card__note p {font-size: 13px;}
    .step-arrow {transform:rotate(90deg)}
    .login-box {width:186px; margin-top: 16px;}
    .login-box__input {padding:10px 20px;border-radius:4px;font-size:14px}
    .notice-list {font-size:12px}

    /* Mobile popup overrides */
    .dim-cert .pop-cert {
        max-height: 100dvh;
        border-radius: 0;
    }

    .dim-cert .btn-close {
        top: 14px;
        right: 18px;
        width: 15px; height: 15px;
    }

    .pop-cert__title {
        font-size: 16px;
    }

    .pop-cert__head {
        padding: 12px 16px;
    }

    .pop-cert__body {
        padding: 16px;
    }

    .pop-cert__container {
        gap: 16px;
    }

    .pop-cert__container .input-group {padding: 20px 12px; font-size: 14px;}
    .pop-cert__container .input-box label {min-width: 64px; }
    .pop-cert__container .input-box input {min-width: auto; width: 160px;}
    .pop-cert .btn-primary {width: 160px; font-size: 14px;}

    .pop-cert__desc {
        font-size: 14px;
    }

    .pop-cert__steps {
        gap: 20px;
    }

    .pop-cert__step {
        gap: 16px;
    }

    .pop-cert__step-title {
    }

    .pop-cert-body {padding: 16px;}
    .pop-cert-body .pop-content .text-group {font-size: 14px;}

    /* Mobile status-after overrides */
    .status-after {
        gap: 16px;
        margin-top: 20px;
    }

    .cert-status-box {
        max-width: 192px;
        padding: 10px 20px;
    }

    .cert-status-box__sub {
        font-size: 14px;
    }

    .cert-status-box__main {
        font-size: 16px;
    }

    .cert-status-note p {
        font-size: 13px;
    }
}