/* QUIZBANK SERVICE GUIDE */

.sg-page{
    min-height:100vh;
    background:#f7f8fa;
    color:#262a2f;
}

.sg-wrap{
    width:min(960px,calc(100% - 40px));
    margin:0 auto;
    padding:30px 0 80px;
    box-sizing:border-box;
}

.sg-hero{
    position:relative;
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:42px 45px;
    overflow:hidden;
    border:1px solid #eadfe5;
    border-radius:27px;
    background:
        radial-gradient(circle at 85% 20%,rgba(255,255,255,.92),transparent 20%),
        linear-gradient(125deg,#fff5f8 0%,#ffe8ef 55%,#fff9fb 100%);
    box-shadow:0 18px 50px rgba(70,45,55,.055);
    box-sizing:border-box;
}

.sg-hero-copy{
    position:relative;
    z-index:2;
    max-width:510px;
}

.sg-hero-copy>span,
.sg-section-title>span,
.sg-quiz-group-head>div>span,
.sg-point-link>div>span,
.sg-bottom>span{
    color:#ff4f82;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}

.sg-hero h1{
    margin:13px 0 11px;
    font-size:33px;
    line-height:1.32;
    letter-spacing:-.045em;
}

.sg-hero p{
    max-width:500px;
    margin:0;
    color:#747b82;
    font-size:10px;
    line-height:1.8;
}

.sg-hero-actions{
    display:flex;
    gap:8px;
    margin-top:23px;
}

.sg-hero-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    padding:0 16px;
    border:1px solid #e0dfe2;
    border-radius:11px;
    background:#fff;
    color:#666d74;
    font-size:9px;
    font-weight:700;
}

.sg-hero-actions a.primary{
    border-color:#ff4f82;
    background:#ff4f82;
    color:#fff;
}

.sg-hero-visual{
    position:relative;
    width:310px;
    height:190px;
    flex:0 0 310px;
}

.sg-visual-card{
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:20px;
    border-radius:22px;
    color:#fff;
    box-shadow:0 15px 35px rgba(70,45,55,.16);
}

.sg-visual-card small{
    font-size:7px;
    font-weight:800;
    opacity:.8;
}

.sg-visual-card strong{
    margin-top:7px;
    font-size:18px;
}

.sg-visual-card em{
    margin-top:4px;
    font-size:8px;
    font-style:normal;
    opacity:.85;
}

.sg-visual-card.card-a{
    top:17px;
    right:15px;
    width:190px;
    height:108px;
    background:linear-gradient(145deg,#ff7199,#ff4f82);
    transform:rotate(4deg);
}

.sg-visual-card.card-b{
    left:5px;
    bottom:8px;
    width:135px;
    height:80px;
    background:linear-gradient(145deg,#7a5bc2,#5c3fa8);
    transform:rotate(-5deg);
}

.sg-circle{
    position:absolute;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 24px rgba(80,55,65,.13);
    font-weight:900;
}

.sg-circle.circle-a{
    width:55px;
    height:55px;
    left:20px;
    top:8px;
    color:#ff4f82;
    font-size:22px;
}

.sg-circle.circle-b{
    width:42px;
    height:42px;
    right:0;
    bottom:0;
    color:#7053b9;
    font-size:15px;
}

.sg-quick{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-top:14px;
}

.sg-quick>div{
    position:relative;
    padding:17px 18px;
    border:1px solid #e7e9ec;
    border-radius:14px;
    background:#fff;
}

.sg-quick i{
    display:block;
    color:#ff4f82;
    font-size:8px;
    font-style:normal;
    font-weight:800;
}

.sg-quick span{
    display:block;
    margin-top:9px;
    color:#92979d;
    font-size:8px;
}

.sg-quick b{
    display:block;
    margin-top:3px;
    font-size:10px;
}

.sg-section{
    margin-top:48px;
}

.sg-section-title{
    margin-bottom:18px;
}

.sg-section-title h2{
    margin:7px 0 5px;
    font-size:24px;
    letter-spacing:-.035em;
}

.sg-section-title p{
    margin:0;
    color:#92979d;
    font-size:9px;
}

.sg-membership{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.sg-membership article{
    position:relative;
    padding:24px;
    border:1px solid #e5e8eb;
    border-radius:19px;
    background:#fff;
    overflow:hidden;
}

.sg-membership article.vip{
    border-color:#efd999;
    background:linear-gradient(180deg,#fffdf6,#fff);
}

.sg-membership article.svip{
    border-color:#dfd3f8;
    background:linear-gradient(180deg,#faf8ff,#fff);
}

.sg-grade-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    margin-bottom:15px;
    border-radius:12px;
    background:#f0f2f4;
    color:#747b82;
    font-size:13px;
    font-weight:900;
}

.sg-membership .vip .sg-grade-icon{
    background:#efc65e;
    color:#694900;
}

.sg-membership .svip .sg-grade-icon{
    background:#6f52b9;
    color:#fff;
}

.sg-membership article>small{
    color:#969ba1;
    font-size:7px;
    font-weight:800;
    letter-spacing:.08em;
}

.sg-membership h3{
    margin:4px 0 4px;
    font-size:18px;
}

.sg-membership article>strong{
    display:block;
    margin-top:7px;
    color:#ff4f82;
    font-size:15px;
}

.sg-membership ul{
    display:grid;
    gap:8px;
    margin:18px 0 21px;
    padding:0;
    list-style:none;
}

.sg-membership li{
    position:relative;
    padding-left:17px;
    color:#737a81;
    font-size:9px;
    line-height:1.45;
}

.sg-membership li:before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:#ff4f82;
    font-weight:900;
}

.sg-membership article>a{
    display:flex;
    align-items:center;
    justify-content:center;
    height:41px;
    border-radius:10px;
    background:#f4f5f7;
    color:#686f76;
    font-size:9px;
    font-weight:700;
}

.sg-membership .vip>a{
    background:#f2c65c;
    color:#5a430a;
}

.sg-membership .svip>a{
    background:#6e51b8;
    color:#fff;
}

.sg-upgrade-note{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:13px;
    margin-top:10px;
    padding:14px 17px;
    border:1px solid #e5e8eb;
    border-radius:13px;
    background:#fff;
}

.sg-upgrade-note b{
    font-size:9px;
}

.sg-upgrade-note p{
    margin:0;
    color:#8c9298;
    font-size:8px;
}

.sg-upgrade-note a{
    color:#ff4f82;
    font-size:8px;
    font-weight:700;
}

.sg-quiz-group{
    padding:24px;
    border:1px solid #e6e8eb;
    border-radius:20px;
    background:#fff;
}

.sg-quiz-group+.sg-quiz-group{
    margin-top:12px;
}

.sg-quiz-group.premium{
    border-color:#eadff5;
    background:linear-gradient(180deg,#fdfbff,#fff);
}

.sg-quiz-group-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding-bottom:17px;
    border-bottom:1px solid #eff0f2;
}

.sg-quiz-group-head h3{
    margin:5px 0 4px;
    font-size:18px;
}

.sg-quiz-group-head p{
    margin:0;
    color:#969ba1;
    font-size:8px;
}

.sg-quiz-group-head>b{
    padding:7px 9px;
    border-radius:999px;
    background:#f4f5f7;
    color:#777d84;
    font-size:7px;
}

.sg-quiz-group.premium .sg-quiz-group-head>b{
    background:#f1ebfb;
    color:#6e51b8;
}

.sg-quiz-cards{
    display:grid;
    gap:9px;
    margin-top:17px;
}

.sg-quiz-cards.four{
    grid-template-columns:repeat(4,1fr);
}

.sg-quiz-cards article,
.sg-quiz-cards>a{
    padding:17px;
    border:1px solid #eceef0;
    border-radius:14px;
    background:#fff;
    color:#30353a;
}

.sg-quiz-cards>a{
    transition:.15s;
}

.sg-quiz-cards>a:hover{
    border-color:#ffb0c6;
    transform:translateY(-2px);
}

.sg-quiz-cards i{
    display:block;
    font-size:22px;
    font-style:normal;
}

.sg-quiz-cards small{
    display:block;
    margin-top:11px;
    color:#9ba0a6;
    font-size:7px;
    font-weight:800;
    letter-spacing:.05em;
}

.sg-quiz-cards h4{
    margin:4px 0 6px;
    font-size:12px;
}

.sg-quiz-cards p{
    margin:0;
    color:#8e949a;
    font-size:8px;
    line-height:1.6;
}

.sg-revenue-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
}

.sg-revenue-grid>article{
    padding:22px;
    border:1px solid #e6e8eb;
    border-radius:18px;
    background:#fff;
}

.sg-revenue-head{
    display:flex;
    align-items:center;
    gap:12px;
}

.sg-revenue-head>i{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff0f5;
    font-size:19px;
    font-style:normal;
}

.sg-revenue-head small{
    display:block;
    color:#ff4f82;
    font-size:7px;
    font-weight:800;
}

.sg-revenue-head h3{
    margin:3px 0 0;
    font-size:14px;
}

.sg-price-list{
    display:grid;
    gap:7px;
    margin-top:16px;
}

.sg-price-list>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 11px;
    border-radius:9px;
    background:#f8f9fa;
}

.sg-price-list span{
    color:#777d84;
    font-size:8px;
}

.sg-price-list strong{
    color:#ff4f82;
    font-size:10px;
}

.sg-revenue-grid article>p{
    margin:16px 0 0;
    color:#858b92;
    font-size:9px;
    line-height:1.7;
}

.sg-mini-tags{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:15px;
}

.sg-mini-tags b{
    padding:7px 8px;
    border-radius:8px;
    background:#f4f5f7;
    color:#777d84;
    font-size:7px;
}

.sg-member-reward{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:15px;
}

.sg-member-reward>div{
    padding:13px;
    border-radius:11px;
    background:#f7f5fb;
}

.sg-member-reward span{
    display:block;
    color:#8b9197;
    font-size:8px;
}

.sg-member-reward strong{
    display:block;
    margin-top:3px;
    color:#6e51b8;
    font-size:16px;
}

.sg-promo-point{
    margin-top:15px;
    padding:14px;
    border-radius:11px;
    background:#fff4f7;
}

.sg-promo-point small{
    display:block;
    color:#949aa0;
    font-size:8px;
}

.sg-promo-point strong{
    display:block;
    margin-top:4px;
    color:#ff4f82;
    font-size:18px;
}

.sg-point-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:12px;
    padding:23px 25px;
    border-radius:18px;
    background:linear-gradient(120deg,#2f3338,#24272b);
    color:#fff;
}

.sg-point-link h3{
    margin:5px 0 4px;
    font-size:16px;
}

.sg-point-link p{
    margin:0;
    color:#aeb3b8;
    font-size:8px;
}

.sg-point-link>a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 15px;
    border-radius:10px;
    background:#ff4f82;
    color:#fff;
    font-size:9px;
    font-weight:700;
}

.sg-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
}

.sg-steps article{
    position:relative;
    padding:20px;
    border:1px solid #e6e8eb;
    border-radius:16px;
    background:#fff;
}

.sg-steps article>i{
    position:absolute;
    top:15px;
    right:15px;
    color:#c3c7cb;
    font-size:8px;
    font-style:normal;
    font-weight:800;
}

.sg-step-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff1f5;
    color:#ff4f82;
    font-size:17px;
    font-weight:900;
}

.sg-steps h3{
    margin:13px 0 5px;
    font-size:12px;
}

.sg-steps p{
    margin:0;
    color:#8c9298;
    font-size:8px;
    line-height:1.6;
}

.sg-faq{
    display:grid;
    gap:8px;
}

.sg-faq details{
    border:1px solid #e6e8eb;
    border-radius:13px;
    background:#fff;
    overflow:hidden;
}

.sg-faq summary{
    position:relative;
    padding:15px 44px 15px 17px;
    cursor:pointer;
    font-size:9px;
    font-weight:700;
    list-style:none;
}

.sg-faq summary::-webkit-details-marker{
    display:none;
}

.sg-faq summary:after{
    content:"+";
    position:absolute;
    right:17px;
    top:50%;
    transform:translateY(-50%);
    color:#ff4f82;
    font-size:15px;
}

.sg-faq details[open] summary:after{
    content:"−";
}

.sg-faq details p{
    margin:0;
    padding:0 17px 16px;
    color:#858b92;
    font-size:8px;
    line-height:1.7;
}

.sg-bottom{
    margin-top:48px;
    padding:40px 25px;
    border-radius:23px;
    background:
        radial-gradient(circle at 80% 25%,rgba(255,255,255,.12),transparent 20%),
        linear-gradient(120deg,#ff5b89,#ff3f75);
    color:#fff;
    text-align:center;
}

.sg-bottom>span{
    color:#fff;
    opacity:.76;
}

.sg-bottom h2{
    margin:8px 0 7px;
    font-size:23px;
}

.sg-bottom p{
    margin:0;
    color:rgba(255,255,255,.8);
    font-size:9px;
}

.sg-bottom>div{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:19px;
}

.sg-bottom a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.32);
    border-radius:10px;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:9px;
    font-weight:700;
}

.sg-bottom a:first-child{
    background:#fff;
    color:#ff4f82;
}

@media(max-width:800px){
    .sg-wrap{
        width:calc(100% - 28px);
        padding-top:22px;
    }

    .sg-hero{
        padding:32px 25px;
    }

    .sg-hero-visual{
        width:240px;
        flex-basis:240px;
        transform:scale(.85);
        transform-origin:right center;
    }

    .sg-membership,
    .sg-quiz-cards.four,
    .sg-steps{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:600px){
    .sg-hero{
        display:block;
    }

    .sg-hero h1{
        font-size:28px;
    }

    .sg-hero-visual{
        width:280px;
        height:170px;
        margin:18px auto -5px;
        transform:scale(.9);
        transform-origin:center;
    }

    .sg-quick,
    .sg-membership,
    .sg-revenue-grid,
    .sg-quiz-cards.four,
    .sg-steps{
        grid-template-columns:1fr;
    }

    .sg-upgrade-note{
        grid-template-columns:1fr;
    }

    .sg-quiz-group-head,
    .sg-point-link{
        align-items:flex-start;
        flex-direction:column;
    }

    .sg-hero-actions,
    .sg-bottom>div{
        flex-direction:column;
    }

    .sg-hero-actions a,
    .sg-bottom a,
    .sg-point-link>a{
        width:100%;
        box-sizing:border-box;
    }
}

/* ===== FINAL READABILITY OVERRIDE ===== */
.sg-membership li{
    font-size:13px !important;
    line-height:1.65 !important;
}

.sg-quiz-group-head p{
    font-size:12px !important;
    line-height:1.65 !important;
}

.sg-quiz-cards p{
    font-size:12px !important;
    line-height:1.7 !important;
}

.sg-section-title p,
.sg-revenue-grid article>p,
.sg-steps p,
.sg-faq details p,
.sg-point-link p,
.sg-upgrade-note p{
    font-size:11px !important;
    line-height:1.7 !important;
}

@media(max-width:600px){
    .sg-membership li{
        font-size:14px !important;
    }

    .sg-quiz-group-head p,
    .sg-quiz-cards p{
        font-size:13px !important;
    }

    .sg-section-title p,
    .sg-revenue-grid article>p,
    .sg-steps p,
    .sg-faq details p,
    .sg-point-link p,
    .sg-upgrade-note p{
        font-size:12px !important;
    }
}

/* ===== 01~04 QUICK GUIDE READABILITY ===== */
.sg-quick i{
    font-size:11px !important;
}

.sg-quick span{
    font-size:11px !important;
    line-height:1.4 !important;
}

.sg-quick b{
    font-size:14px !important;
    line-height:1.45 !important;
}

@media(max-width:600px){
    .sg-quick i{
        font-size:12px !important;
    }

    .sg-quick span{
        font-size:12px !important;
    }

    .sg-quick b{
        font-size:15px !important;
    }
}

/* ===== HERO ACTION BUTTON SIZE UP ===== */
.sg-hero-actions a{
    height:50px !important;
    padding:0 22px !important;
    font-size:12px !important;
    font-weight:700 !important;
    border-radius:12px !important;
}

@media(max-width:600px){
    .sg-hero-actions a{
        height:52px !important;
        font-size:13px !important;
    }
}

/* 버튼 글자 크기는 유지하고 높이만 살짝 축소 */
.sg-hero-actions a{
    height:46px !important;
    padding:0 20px !important;
}

@media(max-width:600px){
    .sg-hero-actions a{
        height:48px !important;
    }
}

/* ===== MEMBERSHIP LIMITED EVENT ===== */
.sg-membership-event{
    margin-top:14px;
    padding:24px;
    border:1px solid #f1d9e2;
    border-radius:20px;
    background:
        radial-gradient(circle at 92% 12%,rgba(255,255,255,.92),transparent 20%),
        linear-gradient(135deg,#fff7fa 0%,#fff0f5 52%,#fff 100%);
    box-sizing:border-box;
}

.sg-membership-event-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-bottom:17px;
    border-bottom:1px solid rgba(236,203,215,.8);
}

.sg-membership-event-head span{
    color:#ff4f82;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.sg-membership-event-head h3{
    margin:6px 0 5px;
    font-size:20px;
    letter-spacing:-.035em;
}

.sg-membership-event-head p{
    margin:0;
    color:#7f858b;
    font-size:12px;
    line-height:1.6;
}

.sg-membership-event-head>b{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:28px;
    padding:0 11px;
    border-radius:999px;
    background:#ff4f82;
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
}

.sg-event-price-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:17px;
}

.sg-event-price-grid article{
    padding:20px;
    border:1px solid #eadfe5;
    border-radius:16px;
    background:#fff;
}

.sg-event-price-grid article.svip{
    border-color:#ddd3f2;
    background:linear-gradient(180deg,#fcfaff,#fff);
}

.sg-event-grade{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.sg-event-grade span{
    font-size:15px;
    font-weight:800;
}

.sg-event-grade b{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 8px;
    border-radius:999px;
    background:#fff0f5;
    color:#ff4f82;
    font-size:10px;
    font-weight:800;
}

.sg-event-price-grid article.svip .sg-event-grade b{
    background:#f1ecfb;
    color:#6e51b8;
}

.sg-event-price{
    margin-top:15px;
}

.sg-event-price small{
    display:block;
    color:#9a9fa4;
    font-size:10px;
}

.sg-event-price del{
    display:block;
    margin-top:4px;
    color:#9ba0a5;
    font-size:14px;
}

.sg-event-price strong{
    display:block;
    margin-top:4px;
    color:#ff4f82;
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.035em;
}

.sg-event-price-grid article.svip .sg-event-price strong{
    color:#6e51b8;
}

.sg-event-price-grid article>a{
    display:flex;
    align-items:center;
    justify-content:center;
    height:44px;
    margin-top:17px;
    border-radius:10px;
    background:#ff4f82;
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.sg-event-price-grid article.svip>a{
    background:#6e51b8;
}

.sg-event-notice{
    margin-top:12px;
    padding:14px 16px;
    border-radius:12px;
    background:rgba(255,255,255,.82);
}

.sg-event-notice strong{
    display:block;
    color:#4d5156;
    font-size:11px;
}

.sg-event-notice p{
    margin:5px 0 0;
    color:#8b9096;
    font-size:11px;
    line-height:1.65;
}

@media(max-width:600px){
    .sg-membership-event{
        padding:20px 16px;
    }

    .sg-membership-event-head{
        flex-direction:column;
        gap:10px;
    }

    .sg-membership-event-head h3{
        font-size:21px;
    }

    .sg-membership-event-head p{
        font-size:13px;
    }

    .sg-event-price-grid{
        grid-template-columns:1fr;
    }

    .sg-event-price-grid article{
        padding:18px;
    }

    .sg-event-grade span{
        font-size:16px;
    }

    .sg-event-grade b{
        font-size:11px;
    }

    .sg-event-price small{
        font-size:11px;
    }

    .sg-event-price del{
        font-size:15px;
    }

    .sg-event-price strong{
        font-size:27px;
    }

    .sg-event-price-grid article>a{
        height:46px;
        font-size:13px;
    }

    .sg-event-notice strong,
    .sg-event-notice p{
        font-size:12px;
    }
}

/* ===== MEMBERSHIP CARD BUTTON READABILITY ===== */
/* 무료회원 가입 / VIP 업그레이드 / SVIP 업그레이드 */
.sg-membership article>a{
    height:44px !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1 !important;
}

@media(max-width:600px){
    .sg-membership article>a{
        height:46px !important;
        font-size:13px !important;
    }
}

/* ===== BOTTOM CTA BUTTON TEXT SIZE ===== */
/* 무료회원 가입 / 정회원 업그레이드 */
.sg-bottom a{
    font-size:12px !important;
    font-weight:700 !important;
}

@media(max-width:600px){
    .sg-bottom a{
        font-size:13px !important;
    }
}