@charset "euc-kr";
/* bg url: https://image.megagong.net/m/2026/ */

/* ÅÇ */
.course_tab {display: inline-flex; gap: 6px; border-radius: 30px; background: linear-gradient(90deg, #2567F8 0%, #001EB0 100%); padding: 4px; overflow: hidden; margin: 0 auto 30px;}
.course_tab li a {width: 153px; border-radius: 30px; color: #FFF; background: none;}
.course_tab li.on a {color: #1A1A1A; background: #FFF;}


/* »óÇ° */
.product_table_wrap {
    --label-width: 150px;
    --basic-width: 250px;
    --product-width: 340px;

    --header-height: 120px;
    --tuition-height: 200px;
    --row-height: 60px;
    --mark-height: 75px;

    position: relative; z-index: 0;
}
.product_table_inner {position: relative; width: 100%;}
.product_table {
    position: relative;
    display: grid;
    grid-template-columns:
        var(--label-width)
        var(--basic-width)
        var(--product-width)
        var(--product-width);

    width: 100%;
    max-width: calc(
        var(--label-width) +
        var(--basic-width) +
        var(--product-width) +
        var(--product-width)
    );

    margin: 0 auto; text-align: left; border-radius: 10px; background: #FFF; border: 1px solid #E9EFF6; background: #FFF; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.04);
}
.product_labels {
    display: grid;
    grid-template-rows:
        var(--header-height)
        var(--tuition-height)
        repeat(2, var(--mark-height))
        repeat(6, var(--row-height));

    position: relative; z-index: 2;
}
.product_label_head {border-bottom: 1px solid var(--brand-color-gray-50);}
.product_label_row {display: flex; justify-content: space-between; align-items: center; min-height: 0; padding: 10px 20px; font-weight: 500;}
.product_label_row:nth-last-child(even) {background: #F2F8FC;}
.product_label_row .ico_trigger {flex-shrink: 0; font-size: 18px; color: var(--brand-color-gray-400); cursor: pointer;}


.basic_dim {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 1;}
.dim_msg {position: absolute; left: 0; bottom: -26.5px; width: 100%; transform: translateY(50%); text-align: center; z-index: 3;}
.premium_outline {position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; pointer-events: none; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20); z-index: 3;}
.premium_outline::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #A680FF 0%, #0082FF 100%);}
.premium_outline .outline {display: block; width: 100%; height: 100%; border-radius: 0 0 10px 10px; padding: 3px; background: linear-gradient(90deg, #A680FF 0%, #0082FF 100%); -webkit-mask: linear-gradient(#fff 0 0) -box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;}
.premium_badge {position: absolute; top: 0; right: 0; transform: translateY(-100%); width: 100%; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, #A680FF 0%, #0082FF 100%); border: none;}

.product_swiper {grid-column: 2 / 5; width: 100%; min-width: 0; overflow: visible;}
.product_list {display: flex; width: max-content; height: 100%;}
.product_item {
    position: relative;
    display: grid;
    grid-template-rows:
        var(--header-height)
        var(--tuition-height)
        repeat(2, var(--mark-height))
        repeat(6, var(--row-height));

    flex-shrink: 0; border-radius: 10px; background: #FFF;
}
.product_item_basic {width: var(--basic-width);}
.product_item_perfect,
.product_item_premium {width: var(--product-width);}

.product_item_header {position: relative; height: var(--header-height); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 20px; border-bottom: 1px solid var(--brand-color-gray-50); text-align: center;}

.product_item_row {position: relative; display: flex; align-items: center; min-height: 0;}
.product_item_row:nth-last-child(even) {background: #F2F8FC;}
.product_item_row.tuition_row {padding: 26.5px 20px;}
.product_item_row:not(.tuition_row) {padding: 0;}

.product_cell {position: relative; width: 100%; height: 100%; display: flex; align-items: center; padding: 16.5px 30px;}
.product_item_row.tuition_row .product_cell {padding: 0;}
.product_cell > [class^="material-icons"] {color: var(--brand-color-gray-800); font-size: 16px;}
.price_group {flex: 1; display: flex; gap: 10px;}
.price_item {flex: 1; min-width: 0;}
.price_item .period {margin-bottom: 10px;}
.price_item .discount {font-weight: 700; margin-bottom: 2px;}
.price_item del {display: block; margin-bottom: 4px;}
.price_item .buy_button {display: block; width: 100%; margin-top: 10px; text-align: center;}
.price_item:nth-child(1) .period {background-color: var(--brand-primary-purple);}
.price_item:nth-child(1) .discount {color: var(--brand-primary-purple);}
.price_item:nth-child(1) .buy_button {background-color: var(--brand-primary-purple);}
.price_item:nth-child(2) .period {background-color: #0E62FF;}
.price_item:nth-child(2) .discount {color: #0E62FF;}
.price_item:nth-child(2) .buy_button {background-color: #0E62FF;}
.product_cell_end .price_item .period {color: var(--brand-color-gray-800); background-color: var(--brand-color-gray-100);}
.product_cell_end .price_item .discount {color: var(--brand-color-gray-700);}
.product_cell_end .price_item .buy_button {background-color: var(--brand-color-gray-600);}

.green_mark {font-weight: 700; color: #FFF; background: var(--brand-secondary-green); padding: 1px 4px;}

.product_info_pop .ds-dialog-body {margin-bottom: 16px;}
.product_info_pop .info_list li {display: flex; justify-content: flex-start; align-items: flex-start; gap: 8px; padding-left: 8px;}
.product_info_pop .info_list li + li {margin-top: 10px;}
.product_info_pop .info_list .dash {flex-shrink: 0;}

.product_cell .ds-tooltip {max-width: 286px;}

@media screen and (max-width: 1200px) {
    .product_table_wrap {overflow: hidden;}
    .product_table_inner {width: 100%;}
    .product_table {display: flex; width: 100%; max-width: none; border: none; border-radius: 0; box-shadow: none; background: none;}

    .basic_dim {border-radius: 10px;}
    .premium_outline {border-radius: 10px;}
    .premium_outline::before {content: none;}
    .premium_outline .outline {border-radius: 10px;}
    .premium_badge {display: none;}

    .product_labels {display: none;}
    .product_swiper {flex: 1 1 auto; min-width: 0; overflow: hidden; direction: rtl; padding-bottom: 15px;}
    .product_list {width: auto;}
    .product_item {width: 330px; flex: 1 0 330px; grid-template-rows: auto; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); direction: ltr;}
    .product_item_header {align-items: stretch; height: auto; padding: 20px 12px 0; text-align: left; border-bottom: none;}
    .product_cell {gap: 4px; padding: 7px 20px;}
    .product_item_row.tuition_row {padding: 12px 20px; border-bottom: 1px solid #EDEDED;}

    .product_item_row:nth-last-child(8) .product_cell {padding-top: 12px;}
    .product_item_row:nth-last-child(even) {background: #FFF;}
    .product_item_row:last-child .product_cell {padding-bottom: 20px;}
    .product_cell.type_x {color: rgba(51, 51, 51, 0.3);}
    .product_cell.type_x > [class^="material-icons"] {color: rgba(51, 51, 51, 0.3);}
    .product_cell .ds-tooltip-wrap {margin-left: auto; color: #999;}
    .product_cell .ico_trigger {font-size: 18px; margin-left: auto; color: #999;}
}