/* ======================
   컬러 팔레트
====================== */

.msc-checklist{
    --msc-point:#e28691;      /* 포인트 컬러 */
    --msc-tint:#fff5f4;       /* 가장 옅은 배경 */
    --msc-line:#f8e7e6;       /* 구분선 / 테두리 */
    --msc-line-strong:#f4c8cd;/* 진한 테두리 */
    --msc-gray:#f8f8f8;       /* 뉴트럴 배경 */

    --msc-title-color:#333;
    --msc-text-color:#777;
    --msc-desc-color:#555;

    max-width:1530px;
    margin:0 auto;
    background:#fff;
    border:4px solid var(--msc-line);
    padding:70px 130px;
    border-radius: 30px;
}

.msc-header{
    text-align:center;
    margin-bottom:30px;
}

.msc-title{
    font-size:26px;
    font-weight:500;
    color:var(--msc-title-color);
    line-height:1.2;
    margin:0;s
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px!important;
    font-family: "Noto Serif KR", serif !important;
}

.msc-title:before{
    content:'';

    display:inline-block;

    width:27px;
    height:27px;

    background-image:url('../images/checklist_icon.png');

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    vertical-align:middle;
}

.msc-description{
    font-size:19px;
    color:var(--msc-desc-color);
    line-height:1.7;
    margin:18px 0 24px;
}

.msc-count{
    display:inline-block;
    background:#efefefad;
    color:#e28691;
    font-size:16px;
    font-weight:500;
    border-radius:999px;
    padding:8px 22px;
    line-height:1;
    margin-top: 30px;
}

/* ======================
   리스트
====================== */

.msc-list{
    list-style:none;
    padding:0;

    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:60px;
}

.msc-item{
    display:flex;
    gap:15px;
    padding: 18px 15px !important;
    border-bottom:1px solid var(--msc-line);

    cursor:pointer;
    transition:.2s;
}

.msc-list .msc-item:nth-last-child(-n+2){
    border-bottom:none;
}

.msc-box{
    width:25px;
    height:25px;

    border-radius:5px;

    border:2px solid var(--msc-line-strong);

    background:#fff;

    flex-shrink:0;

    transition:.2s;
}

.msc-item:hover .msc-box{
    background:var(--msc-tint);
    border-color:var(--msc-point);
}

.msc-item.active .msc-box{
    background:var(--msc-point);
    border-color:var(--msc-point);
    position:relative;
}

.msc-item.active .msc-box:after{
    content:"✓";

    position:absolute;
    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    color:#fff;
    font-size:18px;
    line-height:1;
}

.msc-text{
    font-size:18px;
    line-height:1.5;
    color:var(--msc-text-color);
    word-break:keep-all;
}

/* ======================
   결과영역
====================== */

.msc-results:has(>.show){
    margin-top:40px;
}

.msc-result{
    display:none;

    align-items:center;
    justify-content:center;

    gap:20px;

    padding:20px;

    border-radius:12px;

    font-size:17px;
    font-weight:600;
    line-height:1.6;

    text-align:center;
    font-family: "Noto Serif KR", serif !important;
    border:1px solid;
}

.msc-result.show{
    display:flex;
}

.msc-result.show:before{
    content:'';

    width:10px;
    height:10px;

    border-radius:50%;

    flex-shrink:0;

    background:currentColor;

    box-shadow:
        0 0 0 5px var(--msc-color-ring);
}

/* ======================
   관리자 색상 자동 적용용
====================== */

.msc-result{
    background:var(--msc-gray);
}

/* ======================
   모바일
====================== */

@media(max-width:991px){

    .msc-checklist{
        padding:40px 25px;
    }

    .msc-list{
        grid-template-columns:1fr;
        gap:0;
        margin-left: 0; margin-bottom: 0;
    }

}

@media(max-width:768px){

    .msc-checklist{
        padding: 30px 25px;
    }

    .msc-title{
        font-size:18px;
    }

    .msc-title:before{
        font-size:20px;
    }

    .msc-description{
        font-size:14px;
        margin-bottom:20px;
    }

    .msc-count{
        font-size:14px;
        padding:8px 16px;
    }

    .msc-text{
        font-size:14px;
    }

    .msc-item{
        padding:10px!important;
        align-items: flex-start;
        gap: 10px;
    }
    .msc-item:first-child {
        padding-top: 0!important;
    }
    .msc-box {
        width: 20px;
        height: 20px;
        border-radius: 3px;
        margin-top: 2px;
    }
    .msc-item.active .msc-box:after {
        font-size: 15px;
    }
    .msc-results {
        margin-top: 20px;
    }
    .msc-result{
        font-size:14px;
        padding:16px;
    }
    .msc-result.show {
        display: grid;
    }
    .msc-result.show:before {
        margin: 0 auto !important;
    }
    

}
@media(max-width:500px){
    .msc-title{flex-direction: column; display:flex;}
}