@media (min-width: 1200px){
    .container {
        width: 1170px;
    }
}
*, body{
    font-family: 'Lato', Dutum, Tahoma, "Malgun Gothic", Apple-Gothic, NanumGothic, sans-serif;
}

/* ============ shared utilities (matches other service pages) ============ */
.flex{ display: flex; }
.flex-wrap{ flex-wrap: wrap; }
.justify-center{ justify-content: center; }
.items-center{ align-items: center; }
.relative{ position: relative; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }
.bold{ font-weight: 700; }
.mar-r10{ margin-right: 10px; }
.mar-b5{ margin-bottom: 5px; }
.mar-b10{ margin-bottom: 10px; }
.mar-b15{ margin-bottom: 15px; }
.mar-b20{ margin-bottom: 20px; }
.mar-b30{ margin-bottom: 30px; }
.mar-t15{ margin-top: 15px; }
.mar-t20{ margin-top: 20px; }
.mar-t30{ margin-top: 30px; }
.mar-t40{ margin-top: 40px; }
.font16{ font-size: 16px; }
.lh-24{ line-height: 24px; }
.text-blue{ color: #113DCD; }
.text-red{ color: #CA3A30; }
.text-green{ color: #4CA053; }
.text-white{ color: #fff; }

.section-heading{
    font-size: 30px;
    line-height: 46px;
    font-weight: bold;
}
.sub-text {
    font-size: 16px;
    line-height: 24px;
}
.holder-md{
    width: 80%;
    margin: 0 auto;
}
.arrow{ background: url(images/icons/close.svg) no-repeat; width: 0; height: 0; display: none; }

.btn-primary{
    background-color: #113DCD;
    color: #fff;
    border: 1px solid #113DCD;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    padding: 0 40px;
    min-width: auto;
    transition: all .4s ease;
}
.btn-primary:hover{
    color: #fff;
    background: rgb(1 23 107);
    text-decoration: none;
}
.btn-secondary{
    background-color: #fff;
    color: #113DCD;
    border: 1px solid #113DCD;
    border-radius: 50px;
    font-size: 15px;
    font-weight: bold;
    height: 46px;
    line-height: 46px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    padding: 0 28px;
    transition: all .4s ease;
}
.btn-secondary:hover{
    color: #fff;
    background-color: #113DCD;
    text-decoration: none;
}

@media (max-width: 767px) {
    .btn-primary, .btn-secondary{
        width: 100%;
    }
    .holder-md{
        width: 100%;
    }
}

/* ============ 1. hero ============ */
.top-banner{
    padding: 60px 0;
    background: #ffffff;
}
.top-banner .tagline{
    color: #5B21B6;
}
.top-banner h1{
    font-size: 30px;
    line-height: 45px;
    font-weight: 700;
    margin-bottom: 12px;
}
.top-banner .banner-img-wrap img{
    width: 100%;
}
@media (max-width: 767px) {
    .top-banner{
        padding: 30px 0;
    }
    .top-banner h1{
        font-size: 24px;
        line-height: 34px;
    }
    .top-banner .banner-img-wrap{
        margin-top: 25px;
    }
}

/* ============ 2. checklist section ============ */
.checklist-section{
    background: #F5F3FE;
    padding: 50px 0;
}
.checklist-section .check-list{
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.checklist-section .check-list li{
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 14px;
    text-align: left;
}
.checklist-section .check-list li::before{
    content: '';
    left: 0;
    top: 2px;
    position: absolute;
    background-image: url(images/icons/check-round-small.svg);
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
}
.checklist-section .closing-text{
    font-weight: 700;
    font-size: 18px;
    margin-top: 24px;
}
@media (max-width: 767px) {
    .checklist-section{
        padding: 35px 0;
    }
}

/* ============ 3. feature cards ============ */
.feature-cards-section{
    padding: 50px 0;
}
.feature-cards-section .service-card{
    background: #ECE9FC;
    border-radius: 18px;
    padding: 24px;
    height: 100%;
    border: 1px solid #D8E0EE;
    text-align: center;
}
.feature-cards-section .service-card img{
    height: 44px;
    margin-bottom: 14px;
}
.feature-cards-section .service-card h4{
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
}
.feature-cards-section .service-card .desc{
    font-size: 15px;
    line-height: 22px;
}
@media (max-width: 767px) {
    .feature-cards-section .service-card{
        margin-bottom: 20px;
    }
    .sm\:flex-col{
        flex-direction: column;
    }
}

/* ============ 4 & 5. comparison / pricing tables ============ */
.table-section{
    padding: 50px 0;
    background: #F9FAFB;
}
.table-scroll{
    width: 100%;
    overflow-x: auto;
}
.comparison-table, .pricing-table{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 600px;
}
.comparison-table th, .comparison-table td,
.pricing-table th, .pricing-table td{
    border: 1px solid #E5E7EB;
    padding: 16px;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
}
.comparison-table thead th.col-feature,
.pricing-table td.row-label{
    background: #F9FAFB;
    font-weight: 700;
    color: #374151;
    width: 32%;
}
.comparison-table thead th.col-combo{
    background: #F5F3FE;
    color: #5B21B6;
}
.comparison-table thead th.col-alone{
    background: #ffffff;
    color: #374151;
}
.comparison-table tbody td{
    background: #ffffff;
}
.comparison-table tbody td.col-combo{
    background: #F5F3FE;
}
.comparison-table .tick, .comparison-table .cross{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.comparison-table .tick{
    background-image: url(images/icons/checkmark-icon-thin-blue.svg);
}
.comparison-table .cross{
    background-image: url(images/icons/close.svg);
}
.comparison-table .header-name{
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
}
.pricing-table tbody td.row-value{
    text-align: left;
}
.table-section .table-footnote{
    font-size: 13px;
    color: #6B7280;
    margin-top: 16px;
}
.table-section .table-heading{
    margin-bottom: 6px;
}
.table-section .table-cta{
    margin-top: 24px;
    text-align: center;
}
@media (max-width: 767px) {
    .table-section{
        padding: 35px 0;
    }
    .comparison-table, .pricing-table{
        min-width: 870px;
    }
}

/* ============ 6. five-step process (side image) ============ */
.process-onyx-section{
    padding: 50px 0;
}
.steps-list{
    counter-reset: step-counter;
    list-style: none;
    position: relative;
    padding-left: 44px;
    margin: 0;
}

.steps-list li{
    position: relative;
    padding: 20px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 24px;
    z-index: 1;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.15);
    background: #ffffff;
}
.steps-list li:last-child{
    margin-bottom: 0;
}
.steps-list li::before{
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    top: 10px;
    left: -44px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    z-index: 1;
    background-color: #ECE9FC;
    color: #5B21B6;
}
.steps-list li .step-title{
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
    display: block;
}
.steps-list li .step-desc{
    font-size: 15px;
    line-height: 22px;
    color: #374151;
}
.process-onyx-section .process-img img{
    width: 330px;
    border-radius: 16px;
}
@media (max-width: 767px) {
    .process-onyx-section{
        padding: 35px 0;
    }
    .process-onyx-section .process-img{
        margin-bottom: 30px;
    }
}

/* ============ 7. 4-item key-checks clickable list ============ */
.key-checks-section{
    padding: 50px 0;
    background: #FDF2F8;
}
.key-checks-list{
    list-style: none;
    padding: 0;
    margin: 0;
}
.key-checks-list li{
    padding: 18px 20px;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #F3D9E5;
    transition: all .2s ease;
}
.key-checks-list li .key-check-title{
    font-size: 16px;
    font-weight: 700;
    color: #262626;
    display: block;
}
.key-checks-list li .key-check-desc{
    display: none;
    font-size: 14px;
    line-height: 21px;
    color: #4B5563;
    margin-top: 10px;
}
.key-checks-list li.active{
    background: #BE185D;
    border-color: #BE185D;
}
.key-checks-list li.active .key-check-title{
    color: #fff;
}
.key-checks-list li.active .key-check-desc{
    display: block;
    color: #FCE7F3;
}
.key-checks-section .key-check-img img{
    width: 100%;
    border-radius: 16px;
}
@media (max-width: 767px) {
    .key-checks-section{
        padding: 35px 0;
    }
    .key-checks-section .key-check-img{
        margin-bottom: 25px;
    }
}

/* ============ 8. "이유" 4-icon grid ============ */
.reasons-section{
    padding: 45px 0;
}
.reasons-section .reasons-row{
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    display: flex;
}
.reasons-section .reason-card{
    padding: 30px 24px;
    position: relative;
}
.reasons-section .reason-card:not(:last-child){
    border-right: 1px solid #E5E7EB;
}
.reasons-section .reason-card img{
    height: 44px;
    margin-bottom: 16px;
}
.reasons-section .reason-card h4{
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    margin: 0 0 10px;
}
.reasons-section .reason-card p{
    font-size: 14px;
    line-height: 21px;
    color: #374151;
    margin: 0;
}
@media (max-width: 767px) {
    .reasons-section .reasons-row{
        flex-direction: column;
        margin: 0;
    }
    .reasons-section .reason-card{
        border-right: none !important;
        border-bottom: 1px solid #E5E7EB;
    }
    .reasons-section .reason-card:last-child{
        border-bottom: none;
    }
}

/* ============ 9. closing CTA banner ============ */
.closing-cta-section{
    background: #ECE9FC;
    padding: 55px 0;
    text-align: center;
}
.closing-cta-section h2{
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 16px;
}
.closing-cta-section p{
    font-size: 16px;
    line-height: 26px;
    max-width: 720px;
    margin: 0 auto 24px;
    color: #374151;
}
@media (max-width: 767px) {
    .closing-cta-section{
        padding: 40px 0;
    }
    .closing-cta-section h2{
        font-size: 22px;
    }
}

/* ============ 10. sample download cards ============ */
.samples-section{
    padding: 50px 0;
    background: #F9FAFB;
}
.samples-section .sample-card{
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    height: 100%;
}
.samples-section .sample-card img{
    height: 56px;
    margin-bottom: 18px;
}
.samples-section .sample-card h4{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.samples-section .sample-card p{
    font-size: 14px;
    line-height: 21px;
    color: #4B5563;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .samples-section .sample-card{
        margin-bottom: 20px;
    }
}

/* ============ 11. FAQ accordion (matches services/illustration) ============ */
.faq{
    padding: 60px 0;
}
.accordion-item{
    padding: 20px 0;
    border-bottom: 1px solid #A8A8A8;
    margin-left: 44px;
    margin-bottom: 0;
}
.accordion-item .num{
    position: absolute;
    left: -44px;
    top: 20px;
    color: #A8A8A8;
    font-size: 16px;
    line-height: 26px;
}
.accordion-item .title{
    color: #262626;
    font-size: 16px;
    line-height: 24px;
}
.accordion-item .title:hover, .accordion-item .title:focus, .accordion-item .title:active{
    text-decoration: none;
}
.accordion-item .heading{
    padding-right: 20px;
    cursor: pointer;
}
.accordion-item .heading .icon{
    width: 20px;
    height: 20px;
    background: url(images/icons/minus.svg) no-repeat center;
    position: absolute;
    right: 0;
    top: 0;
}
.accordion-item .heading.collapsed .icon{
    background: url(images/icons/plus.svg) no-repeat center;
}
.accordion-content{
    padding-right: 20px;
}
.accordion-content p{
    font-size: 14px;
    line-height: 22px;
}
.accordion-content p:first-child{
    padding-top: 20px;
}
.accordion-content p:last-child{
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .faq {
        padding-left: 20px;
        padding-right: 20px;
    }
    .accordion-item{
        margin-left: 30px;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    .accordion-item .num{
        left: -30px;
    }
}