/* ==================================================
    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:329px;height:315px;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--purple {background:#7b4fe0}
.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 {position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:20px;padding:32px;border-radius:20px;background:#fff;justify-content: space-between;}
.benefit2-card--end {overflow:visible}
.benefit2-card__cta {position:relative;display:inline-block}
.mp-end-stamp {position:absolute;z-index:2;top:-70px;right:-90px;width:140px;pointer-events:none}
.mp-end-stamp img {display:block;width:100%;height:auto}
.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;}

/* ==================================================
    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) {
    .mp-end-stamp {top: -85px;right: -40px;width: 120px;}
    .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:226px;height:215px}
    .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}
    .mp-end-stamp {top:-55px;right:-80px;width:120px}
    .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 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;
    }
}