@charset "utf-8";

/*가격비교*/
#container .subpage_top_title.index{position: relative;}
#container .subpage_top_title.index .bg{background: url(./img/bg_index.png) no-repeat center;position: absolute;height: 65%;bottom: 0;left: 0;width: 100%;}
.sub_container.index .cate{display: flex;gap: 12px; margin-bottom: 40px;}
.sub_container.index .cate li a{background: #ddd; color: #888; font-size: 22px; line-height: 1; padding: 16px 32px 16px; border-radius: 8px; display: inline-block;}
.sub_container.index .cate li.active a{background: #3AB6F3; font-weight: bold; color: white;}

.sub_container.index table.table{
    border-top: 2px solid black;
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    margin-top: 40px;
    table-layout: fixed;
}
.sub_container.index table.table.legend{margin-top: 80px;}
.sub_container.index table.table th, td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; letter-spacing: -1px;padding: 16px 0 16px; line-height: 1;}
.sub_container.index table.table th:last-child, td:last-child{border-right: 0;}
.sub_container.index table.table th{background: #f7f7f7; font-weight: normal;}
.sub_container.index table.table .sum{font-weight: bold;}
.sub_container.index table.table tr:first-child th{font-weight: bold;}
.sub_container.index table.table tr td:first-child{font-weight: bold !important;}
.sub_container.index table.table tr:last-child td{border-bottom-color: black;}

/* PPF 부분시공부위 열 너비 확장 */
.sub_container.index table.table.package th:first-child,
.sub_container.index table.table.package td:first-child{
    width: 25%;
}

.sub_container ul.dot{margin-top: 40px;}
.sub_container ul.dot li{padding-left: 12px; position: relative; line-height: 1; margin-bottom: 16px; color: #888;}
.sub_container ul.dot li:last-child{margin-bottom: 0;}
.sub_container ul.dot li::before{content: ''; display: inline-block; width: 4px; height: 4px; background: #3AB6F3; border-radius: 50%; position: absolute; top: 7px; left: 0;}

/* 1600px 이하일때 */
@media (max-width: 1600px){
    .sub_container.index table.table{min-width: 1600px;}
    .sub_container.index table.table td{padding: 16px 8px 16px;}
    .sub_container.index div:has(table.table){overflow-x: auto;padding-bottom: 8px; position: relative;}
    .sub_container.index div:has(table.table)::-webkit-scrollbar{height: 8px;}
    .sub_container.index div:has(table.table)::-webkit-scrollbar-track{background: white; border-radius: 10px;}
    .sub_container.index div:has(table.table)::-webkit-scrollbar-thumb{background: #888; border-radius: 10px;}
    table.table th:nth-child(1),table.table td:nth-child(1){position: sticky; left: 0; background: white; z-index: 2; border-right: 1px solid #ddd; width: 100px !important; min-width: 100px; max-width: 100px;}
    table.table th:nth-child(2),table.table td:nth-child(2){position: sticky; left: 100px; background: white; z-index: 2; border-right: 1px solid #ddd; width: 90px !important; min-width: 95px; max-width: 95px;}
    table.table tr:nth-child(1) th:nth-child(1){background: #f7f7f7; position: sticky; left: 0; z-index: 2; border-right: 1px solid #ddd; width: 320px;}
    table.table tr:nth-child(2) th:nth-child(1),table.table tr:nth-child(2) th:nth-child(2),table.table tr:nth-child(1) th:nth-child(2){position: unset;}
    table.table th:nth-child(1)::before,table.table td:nth-child(1)::before, table.table th:nth-child(2)::before,table.table td:nth-child(2)::before,table.table tr:nth-child(1) th:nth-child(1)::before{content: ''; position: absolute; background: #ddd; top: 0; right: -1px; width: 1px; height: 100%; display: block;}
    .sub_container.index table.table.legend{margin-top: 0;}
    .sub_container.index table.table.package{width: 100%; min-width: unset;}
    .sub_container.index table.table.package td, .sub_container.index table.table.package th{width: auto !important;}
    .sub_container.index table.table.package th:first-child,
    .sub_container.index table.table.package td:first-child{width: 25% !important;}
}

/* 1200px 이하일때 */
@media (max-width: 1200px){
    .sub_container.index table.table{min-width: 1200px;}
}

/* 900px 이하일때 */
@media (max-width: 900px){
    .sub_container.index .cate li a{font-size: 18px;}
    .sub_container.index .cate{flex-wrap: wrap;}
    .sub_container.index table.table{font-size: 16px;}
    #container .subpage_top_title.index .bg{height: 70%;}
}

/* 500px 이하일때 */
@media (max-width: 500px){
    .sub_container.index .cate li a{font-size: 16px; padding: 12px 24px 12px;}
}

/* 400px 이하일때 */
@media (max-width: 400px){
    #container .subpage_top_title.index .bg{height: 60%;}
}

/* 서비스 가격표 (index / index2 / index3): 모바일 세로 카드형 (가로 스크롤 제거) */
@media (max-width: 767px){
    .sub_container.index.svc-price-stack .svc-price-block{
        overflow-x: visible !important;
        padding-bottom: 0;
        max-width: 100%;
    }
    .sub_container.index.svc-price-stack .svc-price-block--ppf{
        overflow-x: hidden;
    }
    .sub_container.index.svc-price-stack .svc-price-block::before{
        display: block;
        font-weight: bold;
        font-size: 17px;
        text-align: center;
        padding: 14px 12px;
        background: #f7f7f7;
        border: 1px solid #ddd;
        border-bottom: 0;
        letter-spacing: -0.5px;
    }
    .sub_container.index.svc-price-stack .svc-price-block--legend::before{content: "LEGEND LINE-UP";}
    .sub_container.index.svc-price-stack .svc-price-block--premium::before{content: "PREMIUM LINE-UP";}
    .sub_container.index.svc-price-stack .svc-price-block--rainbow::before{content: "RAINBOW LINE-UP";}
    .sub_container.index.svc-price-stack .svc-price-block--ppf::before{content: "PPF 부분시공";}
    .sub_container.index.svc-price-stack .svc-price-block--premium{margin-top: 32px;}
    .sub_container.index.svc-price-stack .svc-price-block--rainbow{margin-top: 32px;}

    .sub_container.index.svc-price-stack table.table{
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        margin-top: 0;
        table-layout: auto;
        border-top: 0;
    }
    .sub_container.index.svc-price-stack table.table.legend{margin-top: 0;}
    .sub_container.index.svc-price-stack table.table tbody{display: block; width: 100%;}

    /* legend / premium / rainbow: 2줄 헤더 숨김 */
    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(1),
    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(2){
        display: none;
    }
    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3){
        display: block;
        border: 1px solid #ddd;
        border-top: 0;
        margin-bottom: 14px;
        background: #fff;
    }
    .sub_container.index.svc-price-stack .svc-price-block:not(.svc-price-block--ppf) table.table:not(.package) tr:nth-child(3){
        border-top: 2px solid #000;
    }

    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3) td.sum{
        font-weight: bold;
    }

    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3) td{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100% !important;
        box-sizing: border-box;
        border-right: 0 !important;
        text-align: right;
        padding: 11px 14px !important;
        position: static !important;
        left: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        z-index: auto !important;
        background: #fff !important;
        letter-spacing: -0.5px;
    }
    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3) td:first-child{
        display: block;
        font-weight: bold;
        font-size: 16px;
        background: #f7f7f7 !important;
        border-bottom: 1px solid #e8e8e8;
        text-align: center;
    }
    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3) td:nth-child(n+2)::before{
        content: attr(data-label);
        font-weight: normal;
        color: #666;
        margin-right: 10px;
        text-align: left;
        flex-shrink: 0;
    }

    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3) td:nth-child(1)::before,
    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3) td:nth-child(2)::before{
        display: none !important;
        content: none !important;
    }

    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3) td:last-child{
        border-bottom: 0;
    }
    .sub_container.index.svc-price-stack table.table:not(.package) tr:nth-child(n+3):last-child td{
        border-bottom-color: #ddd;
    }

    /* PPF package: 헤더 행만 숨김 */
    .sub_container.index.svc-price-stack table.table.package tr:first-child{
        display: none;
    }
    .sub_container.index.svc-price-stack table.table.package tr:nth-child(n+2){
        display: block;
        border: 1px solid #ddd;
        border-top: 0;
        margin-bottom: 14px;
        background: #fff;
    }
    .sub_container.index.svc-price-stack .svc-price-block--ppf table.table.package tr:nth-child(2){
        border-top: 2px solid #000;
    }
    /* PPF: 넓은 화면용 sticky·고정폭(1600px 이하 규칙) 완전 해제 — 좁은 열에 라벨이 세로로 깨지는 현상 방지 */
    .sub_container.index.svc-price-stack table.table.package th,
    .sub_container.index.svc-price-stack table.table.package td{
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .sub_container.index.svc-price-stack table.table.package tr:nth-child(n+2) td{
        display: block;
        border-right: 0 !important;
        text-align: right;
        padding: 10px 14px !important;
        z-index: auto !important;
        background: #fff !important;
        letter-spacing: -0.5px;
    }
    .sub_container.index.svc-price-stack table.table.package tr:nth-child(n+2) td:first-child{
        display: block;
        font-weight: bold;
        font-size: 15px;
        line-height: 1.35;
        background: #f7f7f7 !important;
        border-bottom: 1px solid #e8e8e8;
        text-align: center;
    }
    /* 1600px 구간의 구분선용 td::before 덮어쓰기 + 품목명은 위·금액은 아래 */
    .sub_container.index.svc-price-stack table.table.package tr:nth-child(n+2) td:first-child::before{
        display: none !important;
        content: none !important;
    }
    .sub_container.index.svc-price-stack table.table.package tr:nth-child(n+2) td:nth-child(n+2)::before{
        content: attr(data-label);
        display: block;
        position: static !important;
        width: 100%;
        max-width: none;
        margin: 0 0 6px 0;
        padding: 0;
        font-weight: normal;
        font-size: 13px;
        line-height: 1.35;
        color: #666;
        text-align: left;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        background: transparent !important;
        height: auto !important;
    }
    .sub_container.index.svc-price-stack table.table.package tr:nth-child(n+2) td:last-child{
        border-bottom: 0;
    }
    .sub_container.index.svc-price-stack table.table.package tr:nth-child(n+2):last-child td{
        border-bottom-color: #ddd;
    }
}