.wcms-usp-scope /* table layout core */
/* 
    table thema attribute 
    edit by spring

    컴포넌트 구조화 및 반응형 확장,.wcms-usp-scope 다양성등 대응을 위한 임시 요소입니다.
    1. css 대응사이즈 추가
    2. 추가된 속성으로 data attribute 적용
    3. 관리만 가능하면 모든 컴포넌트에 활용될 수 있음

    ex)
    [data-media-query="768px"] media query width : 반응형이 적용될 기준
    [data-min-width="320px"] media minimum width : 스크롤표시 또는 최소 크기 절대값.
*/
/* 구성품비교 */
.package_table_wrap{
    --table-head-backgorund: #F0F0F0;       /* thead th bg */ 
    --table-head-backgorund-light: #F0F0F0; /* thead th bg light */ 
    --table-thema-backgorund: #F3E6FF;      /* table primary bg */ 
    --table-thema-backgorund-light: #FEF8FF;/* table primary bg light */ 
    --table-thema-backgorund-sub: #FBF9FC;  /* table cel bg */ 
    --table-thema-backgorund-gray: #F8F8F8;/* table primary bg light */ 

    --table-border-color: #7D7D7D;          /* table border-color */ 
    --table-border-radius: 12px;              /* table border-radius */ 
    --table-thema-color: #610A60;           /* table primary color */ 
    --table-caption-color: #666;            /* table caption color */ 
    --table-padding-y: 20px;                  /* table th, td padding Y */  
    --table-padding-x: 14px;                  /* table th, td padding X */  
    --table-img-padding: 12px;                /* table img padding X */  
    --table-scroll-size: 6px;                 /* table scrollbar size */
    --table-scroll-gap: 8px;                  /* table scrollbar gap */
    overflow: auto;
}.wcms-usp-scope .package_table_inner{ 
    width: calc(100% - 2px);
    max-width: 920px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--table-border-color);
    border-radius: var(--table-border-radius);
}.wcms-usp-scope .package_table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;

    color: #000;
    font-size: 16px;
    line-height: 1.4;
}.wcms-usp-scope .package_table tbody tr:last-child th,.wcms-usp-scope .package_table tbody tr:last-child td{
    border-bottom: 0;
}.wcms-usp-scope .package_table th:last-child,.wcms-usp-scope .package_table td:last-child{
    border-right: 0;
}.wcms-usp-scope .package_table th,.wcms-usp-scope .package_table td{
    padding: var(--table-padding-y) var(--table-padding-x);
    border-right: 1px solid var(--table-border-color);
    border-bottom: 1px solid var(--table-border-color);
    text-align: center;
    word-break: keep-all;
}.wcms-usp-scope .package_table th{
    letter-spacing: -0.01em;
    font-weight: 700;
}.wcms-usp-scope .package_table thead{

}.wcms-usp-scope .package_table thead th{
    background-color: var(--table-head-backgorund);
}.wcms-usp-scope .package_table tbody{
    background-color: #fff;
}.wcms-usp-scope .package_table tbody th{
    background-color: var(--table-head-backgorund-light);
}.wcms-usp-scope .package_table tbody td{
    font-weight: 600;
}.wcms-usp-scope .package_table b{
    font-weight: inherit;
}.wcms-usp-scope .package_table span{
    display: inline-block;
}.wcms-usp-scope .package_table small{
    font-size: 14px;
    font-weight: 400;
    display: block;
    color: var(--table-caption-color);
    margin-top: 4px;
}.wcms-usp-scope .package_table_product_img{
    background-color: #fff;
    margin: calc(var(--table-padding-y) * -1) calc(var(--table-padding-x) * -1);
    padding: var(--table-img-padding);
}.wcms-usp-scope .package_table_product_img img{
    width: 100%;
    max-width: 120px;
    vertical-align: top;
}.wcms-usp-scope .package_table_cel_meta{ 
    display: inline-block;
    font-size: inherit;
    font-weight: 400;
    color: var(--table-caption-color);
}.wcms-usp-scope /* higilgiht tr */
.package_table_primary{ color: var(--table-thema-color) !important; }.wcms-usp-scope .package_table_cel_highlight{  background-color: var(--table-thema-backgorund-sub) !important; }.wcms-usp-scope /* 구성품비교 // */

/* 제품비교 */
.compare_table_wrap{
    --table-head-backgorund: #F0F0F0;       /* thead th bg */ 
    --table-head-backgorund-light: #F0F0F0; /* thead th bg light */ 
    --table-thema-backgorund: #F3E6FF;      /* table primary bg */ 
    --table-thema-backgorund-light: #FEF8FF;/* table primary bg light */ 
    --table-thema-backgorund-sub: #FDFAF4;  /* table cel bg */ 
    --table-thema-backgorund-gray: #F8F8F8;/* table primary bg light */ 

    --table-border-color: #7D7D7D;          /* table border-color */ 
    --table-border-radius: 12px;              /* table border-radius */ 
    --table-thema-color: #610A60;           /* table primary color */ 
    --table-caption-color: #666;            /* table caption color */ 
    --table-padding-y: 16px;                  /* table th, td padding Y */  
    --table-padding-x: 15px;                  /* table th, td padding X */  
    --table-img-padding: 12px 25px;                /* table img padding X */  
    --table-scroll-size: 6px;
    --table-scroll-gap: 8px;
    padding-top: 25px;
    overflow: auto;
}.wcms-usp-scope .compare_table_inner{ 
    width: calc(100% - 2px); 
    max-width: 920px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--table-border-color);
    border-radius: var(--table-border-radius);
}.wcms-usp-scope .compare_table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;

    color: #000;
    font-size: 16px;
    line-height: 1.4;
}.wcms-usp-scope .compare_table tbody tr:last-child th,.wcms-usp-scope .compare_table tbody tr:last-child td{
    border-bottom: 0;
}.wcms-usp-scope .compare_table th:last-child,.wcms-usp-scope .compare_table td:last-child{
    border-right: 0;
}.wcms-usp-scope .compare_table th,.wcms-usp-scope .compare_table td{
    padding: var(--table-padding-y) var(--table-padding-x);
    border-right: 1px solid var(--table-border-color);
    border-bottom: 1px solid var(--table-border-color);
    text-align: center;
    word-break: keep-all;
}.wcms-usp-scope .compare_table th{
    letter-spacing: -0.01em;
    font-weight: 700;
}.wcms-usp-scope .compare_table thead{

}.wcms-usp-scope .compare_table thead th{
    background-color: var(--table-head-backgorund);
}.wcms-usp-scope .compare_table tbody{
    background-color: #fff;
}.wcms-usp-scope .compare_table tbody th{
    background-color: var(--table-head-backgorund-light);
}.wcms-usp-scope .compare_table tbody td{
    font-weight: 600;
}.wcms-usp-scope .compare_table b{
    font-weight: inherit;
}.wcms-usp-scope .compare_table span{
    display: inline-block;
}.wcms-usp-scope .compare_table small{
    font-size: 14px;
    font-weight: 400;
    display: block;
    color: var(--table-caption-color);
    margin-top: 4px;
}.wcms-usp-scope .compare_table p{
    font-weight: 400;
    word-break: keep-all;
}.wcms-usp-scope .compare_table_product_img{
    background-color: #fff;
    margin: calc(var(--table-padding-y) * -1) calc(var(--table-padding-x) * -1);
    padding: var(--table-img-padding);
}.wcms-usp-scope .compare_table_product_img img{
    width: 100%;
    max-width: 220px;
    vertical-align: top;
}.wcms-usp-scope .compare_table_cel_meta{ 
    display: inline-block;
    font-size: inherit;
    font-weight: 400;
    color: var(--table-caption-color);
}.wcms-usp-scope /* higilgiht tr */
.compare_table_primary{ color: var(--table-thema-color) !important; }.wcms-usp-scope .compare_table_tr_highlight{ background-color: var(--table-thema-backgorund-light) !important; }.wcms-usp-scope .compare_table_tr_highlight th{ background-color: var(--table-thema-backgorund) !important; }.wcms-usp-scope .compare_table_tr_highlight td{ background-color: var(--table-thema-backgorund-light) !important; }.wcms-usp-scope .compare_table_cel_highlight{  background-color: var(--table-thema-backgorund-sub) !important; }.wcms-usp-scope .compare_table_cel_th{ background-color: var(--table-thema-backgorund-gray) !important; }.wcms-usp-scope /* 제품비교 */

/* 공통 */
.package_table_wrap,.wcms-usp-scope .compare_table_wrap{
    padding-bottom: var(--table-scroll-gap); 
    /* margin-bottom: calc(var(--table-scroll-gap) * -1); */
}.wcms-usp-scope .package_table_wrap::-webkit-scrollbar,.wcms-usp-scope .compare_table_wrap::-webkit-scrollbar{ width: var(--table-scroll-size); height: var(--table-scroll-size); }.wcms-usp-scope .package_table_wrap::-webkit-scrollbar-track,.wcms-usp-scope .compare_table_wrap::-webkit-scrollbar-track{ background-color: #EEEEEE; border: 0 solid transparent; background-clip: content-box; border-radius: 8px; }.wcms-usp-scope .package_table_wrap::-webkit-scrollbar-thumb,.wcms-usp-scope .compare_table_wrap::-webkit-scrollbar-thumb{ background-color: #9D9D9D; border: 0 solid transparent; background-clip: content-box; border-radius: 8px; }.wcms-usp-scope .compare_table_color_set{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
}.wcms-usp-scope .compare_table_color_circle{ 
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.2em;
}.wcms-usp-scope /* table layout core // */

/* 
    default attribute
    자연스럽고 다양한 디바이스 대응을 위헤
    br : none,.wcms-usp-scope 처리하고 각 단어 단위를 span 으로 처리함 (단어사이 띄어쓰기 대응) 
*/
.col_100{ width: 100px; }.wcms-usp-scope .col_120{ width: 120px; }.wcms-usp-scope .col_160{ width: 160px; }.wcms-usp-scope /* [여백 이슈] .compare_table_wrap을 가진 컴포넌트 뒤에 .KRC0025를 가진 컴포넌트가 없는 경우 */
.iw_component:has(.compare_table_wrap):not(:has(~ .iw_component .KRC0025)) .compare_table_wrap{ margin-bottom: 80px; }@media(max-width: 1024px){.wcms-usp-scope .col_m_80{ width: 80px; }
}.wcms-usp-scope [data-max-width="1380px"]{  max-width: attr(data-max-width px, 1380px); max-width: 1380px !important; }@media(max-width: 1024px){.wcms-usp-scope [data-media-query="1024px"]{ 
        overflow: auto !important; 
        padding-bottom: var(--table-scroll-gap) !important;
        /* margin-bottom: calc(var(--table-scroll-gap) * -1) !important; */
    }.wcms-usp-scope [data-min-width="1110px"]{  
        min-width: attr(data-min-width px, 1110px); 
        min-width: 1110px !important; 
    }.wcms-usp-scope [data-min-width="1050px"]{ 
        min-width: attr(data-min-width px, 1060px) !important;
        min-width: 1060px !important; 
    }.wcms-usp-scope [data-min-width="1050px"]{ 
        min-width: attr(data-min-width px, 1050px) !important;
        min-width: 1050px !important; 
    }.wcms-usp-scope .package_table_wrap,.wcms-usp-scope .compare_table_wrap{
        width: calc(100% - 14px);
        margin: 0 auto;
    }.wcms-usp-scope /* 제품 비교 & 구성품 비교*/
    .package_table_wrap{
        --table-border-radius: 8px;              /* table border-radius */ 
        --table-padding-y: 12px;                 /* table th, td padding Y */  
        --table-padding-x: 10px;                 /* table th, td padding X */  
        --table-img-padding: 6px;            /* table img padding X */ 
    }.wcms-usp-scope .package_table_product_img img{
        max-width: 72px;
    }.wcms-usp-scope .compare_table_wrap{
        --table-border-radius: 8px;              /* table border-radius */ 
        --table-padding-y: 16px;                 /* table th, td padding Y */  
        --table-padding-x: 10px;                 /* table th, td padding X */  
        --table-img-padding: 8px 0px;            /* table img padding X */  
        padding-top: 20px;
    }.wcms-usp-scope .package_table,.wcms-usp-scope .compare_table{ font-size: 14px; }.wcms-usp-scope .package_table small,.wcms-usp-scope .compare_table small{ font-size: inherit; margin-top: 6px; }.wcms-usp-scope .package_table br,.wcms-usp-scope .compare_table br{ display: none; }.wcms-usp-scope .compare_table_cel_th{ 
        --table-padding-x: 7px; 
    }
}@media(max-width: 768px){.wcms-usp-scope /* minimum scrollbar */
    /* CSS Values & Units Level5 advanced - expansion */
    [data-media-query="768px"]{ 
        overflow: auto !important; 
        padding-bottom: var(--table-scroll-gap) !important;
        /* margin-bottom: calc(var(--table-scroll-gap) * -1) !important; */
    }.wcms-usp-scope [data-min-width="710px"]{ 
        min-width: attr(data-min-width px, 710px) !important;
        min-width: 710px !important; 
    }.wcms-usp-scope [data-min-width="320px"]{ 
        min-width: attr(data-min-width px, 320px);
        min-width: 320px !important; 
    }.wcms-usp-scope .iw_component:has(.compare_table_wrap):not(:has(~ .iw_component .KRC0025)) .compare_table_wrap{ margin-bottom: 60px; }
}