@charset "UTF-8";

/** pdp-product-table-wrap **/
/** variable **/
.pdp-product-table-wrap {
    --scroll-margin-top: 220px;
    --table-head-th-bg: #e6e6e6;
    --table-body-th-bg: #e6e6e6;
    --table-body-th-bg-sub: #f6f6f6;
    --table-highlight-th-bg: #e1f6f3;
    --table-highlight-td-bg: #f8fffe;
    --table-highlight-td-bg-sub: #ebf6f1;
    --table-highlight-color: #005145;
    --table-border-color: #ddd;
    --table-point-color: #027f6c;
    --table-main-color: #000;
    --table-sub-color: #666;
    --table-caption-color: #666;
    --table-border-radius: 12px;
    --table-padding-y: 16px;
    --table-padding-x: 15px;
    --table-img-padding: 12px 25px;
    --table-img-max-width: 220px;
    --table-scroll-size: 6px;
    --table-scroll-gap: 8px;
    --table-head-font-size: 18px;
    --table-inner-max-width: 1380px;
    --table-col-100: 100px;
    --table-col-120: 120px;
    --table-col-160: 160px;
    --table-col-280: 280px;
    --table-col-300: 300px;
    --essence-white: #f0f0f0;
    --essence-silver: #b2b2b2;
    --obsidian-black: #363636;
    --aerominum-white: #ededed;
    --aerominum-silver: #b2b2b2;
    --titan-black: #373737;
    --titan-silver: #dfdfdf;
}

/** 구성품(-accessories) variable **/
.pdp-product-table-wrap[data-product-table$="-accessories"] {
    --table-padding-y: 20px;
    --table-padding-x: 14px;
    --table-img-padding: 12px;
    --table-img-max-width: 120px;
}

/** common **/
.pdp-product-table-wrap {overflow-x: auto;overflow-y: hidden;margin:0 auto;padding: 25px 0 var(--table-scroll-gap);scroll-margin-top:var(--scroll-margin-top);}
.pdp-product-table-wrap::-webkit-scrollbar {width: var(--table-scroll-size);height: var(--table-scroll-size);}
.pdp-product-table-wrap::-webkit-scrollbar-track {border: 0 solid transparent;border-radius: 8px;background-color: #eee;background-clip: content-box;}
.pdp-product-table-wrap::-webkit-scrollbar-thumb {border: 0 solid transparent;border-radius: 8px;background-color: #9d9d9d;background-clip: content-box;}
.pdp-product-table-wrap .pdp-product-table-inner {overflow: hidden;max-width: var(--table-inner-max-width);margin: 0 auto;border: 1px solid var(--table-border-color);border-radius: var(--table-border-radius);}
.pdp-product-table-wrap .pdp-product-table-inner[data-max-width] {--table-inner-max-width: attr(data-max-width px);}
.pdp-product-table-wrap.width-large .pdp-product-table-inner {--table-inner-max-width: 1600px;}
.pdp-product-table-wrap.width-small .pdp-product-table-inner {--table-inner-max-width: 912px;}

/* table */
.pdp-product-table-wrap .pdp-product-table {width: 100%;table-layout: fixed;border-collapse:collapse;font-size: 16px;line-height: 1.4;font-weight: 600;color: var(--table-main-color);}
.pdp-product-table-wrap .pdp-product-table col.table-col-100 {width: var(--table-col-100);}
.pdp-product-table-wrap .pdp-product-table col.table-col-120 {width: var(--table-col-120);}
.pdp-product-table-wrap .pdp-product-table col.table-col-160 {width: var(--table-col-160);}
.pdp-product-table-wrap .pdp-product-table col.table-col-280 {width: var(--table-col-280);}
.pdp-product-table-wrap .pdp-product-table col.table-col-300 {width: var(--table-col-300);}
.pdp-product-table-wrap .pdp-product-table col[data-col-pc] {width: attr(data-col-pc %);}
.pdp-product-table-wrap .pdp-product-table th {font-weight: 700;letter-spacing: -0.03em;}
.pdp-product-table-wrap .pdp-product-table :is(th, 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;}
.pdp-product-table-wrap .pdp-product-table :is(th, td) :where(div, ul, li, p, span, b) {word-break: keep-all;font-weight: inherit;}
.pdp-product-table-wrap .pdp-product-table :is(th, td):last-child {border-right: 0;}
.pdp-product-table-wrap .pdp-product-table thead th {background-color: var(--table-head-th-bg);}
.pdp-product-table-wrap .pdp-product-table thead th:not(:first-child) {font-size: var(--table-head-font-size);}
.pdp-product-table-wrap .pdp-product-table thead th:has(.table-img) {background-color: #fff;}
.pdp-product-table-wrap .pdp-product-table tbody {background-color: #fff;}
.pdp-product-table-wrap .pdp-product-table tbody th {background-color: var(--table-body-th-bg);}
.pdp-product-table-wrap .pdp-product-table tbody tr:last-child :is(th, td) {border-bottom: 0;}
.pdp-product-table-wrap .pdp-product-table .table-th-sub {background-color: var(--table-body-th-bg-sub);font-weight: 400;}
.pdp-product-table-wrap .pdp-product-table .table-point {color: var(--table-point-color);}
.pdp-product-table-wrap .pdp-product-table .table-main {color: var(--table-main-color);}
.pdp-product-table-wrap .pdp-product-table .table-sub {color: var(--table-sub-color);}
.pdp-product-table-wrap .pdp-product-table .table-lighter {font-weight: 400;}
.pdp-product-table-wrap .pdp-product-table .table-break-all {word-break:break-all;}
.pdp-product-table-wrap .pdp-product-table [class*="table-desc"] {display:block;font-weight: 400;}
.pdp-product-table-wrap .pdp-product-table .table-desc-sub {color: var(--table-caption-color);}
.pdp-product-table-wrap .pdp-product-table .table-desc-small {font-size: 14px;color: var(--table-caption-color);}
.pdp-product-table-wrap .pdp-product-table .table-img {margin: calc(var(--table-padding-y) * -1) calc(var(--table-padding-x) * -1);padding: var(--table-img-padding);background-color: #fff;}
.pdp-product-table-wrap .pdp-product-table .table-img img {width: 100%;max-width: var(--table-img-max-width);vertical-align: top;}
.pdp-product-table-wrap .pdp-product-table .table-i-br {display: inline-block;}
.pdp-product-table-wrap .pdp-product-table .table-br {display: block;}
.pdp-product-table-wrap .pdp-product-table .table-br-pc {display: block;}
.pdp-product-table-wrap .pdp-product-table .table-sort-list > li + li {margin-top: 8px;}
.pdp-product-table-wrap .pdp-product-table .table-sort-list > li + li:before {content: "";display: block;width: 3px;height: 3px;margin: 0 auto 10px;border-radius: 50%;background: var(--table-main-color);}

/* highlight */
.pdp-product-table-wrap .pdp-product-table .table-tr-highlight {background-color: var(--table-highlight-td-bg);}
.pdp-product-table-wrap .pdp-product-table .table-tr-highlight th {background-color: var(--table-highlight-th-bg);}
.pdp-product-table-wrap .pdp-product-table .table-tr-highlight td {background-color: var(--table-highlight-td-bg);color: var(--table-highlight-color);}
.pdp-product-table-wrap .pdp-product-table .table-td-highlight {background-color: var(--table-highlight-td-bg-sub);color: var(--table-point-color);}
.pdp-product-table-wrap .pdp-product-table .table-td-highlight :is(div, ul, li, p, span, b) {color: inherit;}
.pdp-product-table-wrap .pdp-product-table .table-tr-highlight .table-sort-list > li + li:before {background: var(--table-highlight-color);}

/* color */
.pdp-product-table-wrap .table-color-set {display: inline-flex;flex-direction: column;justify-content: center;gap: 0.5em;text-align: left;}
.pdp-product-table-wrap .table-color-set > li {display: flex;align-items: flex-start;gap: 0.2em;}
.pdp-product-table-wrap .table-color-set .color-name {flex: 1;}
.pdp-product-table-wrap .table-color-set [class*="color-chip"] {width: 20px;height: 20px;border-radius: 50%;}
.pdp-product-table-wrap .table-color-set .color-chip-essence-white {background-color: var(--essence-white);}
.pdp-product-table-wrap .table-color-set .color-chip-essence-silver {background-color: var(--essence-silver);}
.pdp-product-table-wrap .table-color-set .color-chip-obsidian-black {background-color: var(--obsidian-black);}
.pdp-product-table-wrap .table-color-set .color-chip-aerominum-white {background-color: var(--aerominum-white);}
.pdp-product-table-wrap .table-color-set .color-chip-aerominum-silver {background-color: var(--aerominum-silver);}
.pdp-product-table-wrap .table-color-set .color-chip-titan-black {background-color: var(--titan-black);}
.pdp-product-table-wrap .table-color-set .color-chip-titan-silver {background-color: var(--titan-silver);}

/** 카테고리별 선언 **/

/** media query **/
@media screen and (max-width: 1024px){
    /** variable **/
    .pdp-product-table-wrap {
        --table-border-radius: 8px;
        --table-padding-x: 10px;
        --table-img-padding: 8px 0;
        --table-img-max-width: 220px;
        --table-scroll-size: 6px;
        --table-scroll-gap: 8px;
        --table-head-font-size: 16px;
    }

    /** 구성품(-accessories) variable **/
    .pdp-product-table-wrap[data-product-table$="-accessories"] {
        --table-padding-y: 12px;
        --table-padding-x: 10px;
        --table-img-padding: 6px;
    }

    /** common **/
    .pdp-product-table-wrap {width: calc(100% - 14px);padding-top: 20px;}
    .pdp-product-table-wrap .pdp-product-table-inner {min-width: calc(var(--table-inner-max-width) * 0.77);}
    .pdp-product-table-wrap .pdp-product-table-inner[data-min-width] {min-width: attr(data-min-width px);}
    .pdp-product-table-wrap.scroll-none .pdp-product-table-inner {min-width: 0;}

    /* table */
    .pdp-product-table-wrap .pdp-product-table {font-size: 14px;}
    .pdp-product-table-wrap .pdp-product-table col.table-col-100 {width: calc(var(--table-col-100) * 0.8);}
    .pdp-product-table-wrap .pdp-product-table col.table-col-120 {width: calc(var(--table-col-120) * 0.667);}
    .pdp-product-table-wrap .pdp-product-table col.table-col-160 {width: calc(var(--table-col-160) * 0.563);}
    .pdp-product-table-wrap .pdp-product-table col.table-col-280 {width: calc(var(--table-col-280) * 0.607);}    
    .pdp-product-table-wrap .pdp-product-table col.table-col-300 {width: calc(var(--table-col-300) * 0.567);}
    .pdp-product-table-wrap .pdp-product-table col[data-col-mo] {width: attr(data-col-mo %);}
    .pdp-product-table-wrap .pdp-product-table .table-th-sub {--table-padding-x: 7px;}
    .pdp-product-table-wrap .pdp-product-table .table-img img {max-width: calc(var(--table-img-max-width) * 0.6);}    
    .pdp-product-table-wrap .pdp-product-table .table-br-pc {display: inline;}
    .pdp-product-table-wrap .pdp-product-table .table-br-mo {display: block;}
}

@media screen and (max-width: 768px){
    /** variable **/
    .pdp-product-table-wrap {
        --scroll-margin-top: 260px;
    }
}