@charset "utf-8";

/* 사진 비율과 문장 길이가 달라도 같은 행의 상품 정보를 같은 높이에 배치한다. */
.product-card-grid.sct_10 {
    display:grid;
    grid-template-columns:repeat(var(--product-card-columns,4),minmax(0,1fr));
    column-gap:20px;
    row-gap:0;
    margin-left:0;
    margin-right:0;
}
.product-card-grid.sct_10:after,
.product-card-grid.sct_10 .sct_ct_wrap:after {display:none}
.product-card-grid.sct_10 > .sct_li {
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 7;
    row-gap:0;
    float:none;
    clear:none !important;
    width:auto !important;
    min-width:0;
    padding-left:0;
    padding-right:0;
}
.product-card-grid.sct_10 .sct_img {
    grid-row:1;
    min-width:0;
    aspect-ratio:1;
    margin:0;
    background:#fff;
}
.product-card-grid.sct_10 .sct_img > a {display:block;width:100%;height:100%}
.product-card-grid.sct_10 .sct_img > a > img {
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
}
.product-card-grid.sct_10 .sct_ct_wrap {
    display:grid;
    grid-template-rows:subgrid;
    grid-row:2 / span 6;
    min-width:0;
}
.product-card-grid.sct_10 .sct_star {grid-row:1}
.product-card-grid.sct_10 .sct_id {grid-row:2}
.product-card-grid.sct_10 .sct_txt {grid-row:3;line-height:1.5;overflow-wrap:anywhere}
.product-card-grid.sct_10 .sct_basic {grid-row:4;line-height:1.5;overflow-wrap:anywhere}
.product-card-grid.sct_10 .sct_bottom {grid-row:5;display:flex;align-items:flex-start;gap:8px}
.product-card-grid.sct_10 .sct_bottom .sct_cost {flex:1;min-width:0;overflow-wrap:anywhere}
.product-card-grid.sct_10 .sct_bottom .sct_op_btn {position:static;flex:none;margin-top:5px;white-space:nowrap}
.product-card-grid.sct_10 .sit_icon_li {grid-row:6}

/* 모바일은 중간 내용 래퍼 없이 동일한 일곱 개 행을 사용한다. */
.product-card-grid.sct_10#sct_wrap {margin-left:10px;margin-right:10px;column-gap:10px}
.product-card-grid.sct_10 .li_wr {
    display:grid;
    grid-template-rows:subgrid;
    grid-row:1 / span 6;
    min-width:0;
}
.product-card-grid.sct_10 .li_wr > .sct_star {grid-row:2}
.product-card-grid.sct_10 .li_wr > .sct_id {grid-row:3}
.product-card-grid.sct_10 .li_wr > .sct_txt {grid-row:4;margin-top:10px}
.product-card-grid.sct_10 .li_wr > .sct_basic {grid-row:5;margin-top:0}
.product-card-grid.sct_10 .li_wr > .sct_cost {grid-row:6;grid-column:1;padding-right:64px;align-self:start;overflow-wrap:anywhere}
.product-card-grid.sct_10 .li_wr > .sct_op_btn {grid-row:6;grid-column:1;position:static;justify-self:end;align-self:start;margin-top:10px;white-space:nowrap}
.product-card-grid.sct_10 > .sct_li > .sct_icon {grid-row:7}

/* 모바일의 세로 목록 전환에서도 세로로 긴 사진이 다음 상품을 덮지 않는다. */
.product-card-grid.sct_10_list .sct_img {width:110px;height:110px}
.product-card-grid.sct_10_list .sct_img > a {display:block;width:100%;height:100%}
.product-card-grid.sct_10_list .sct_img > a > img {display:block;width:100%;height:100%;object-fit:contain}

/* PC의 목록 전환 스크립트는 class를 교체하므로 유지되는 data 속성으로 범위를 한정한다. */
[data-product-cards].sct_40 > .sct_li {display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;width:auto;padding:20px 0}
[data-product-cards].sct_40 > .sct_li:after,
[data-product-cards].sct_40 .sct_ct_wrap:after {display:none}
[data-product-cards].sct_40 .sct_img {width:180px;aspect-ratio:1;float:none;margin:0}
[data-product-cards].sct_40 .sct_img > a {display:block;width:100%;height:100%;z-index:auto}
[data-product-cards].sct_40 .sct_img > a > img {display:block;width:100%;height:100%;object-fit:contain}
[data-product-cards].sct_40 .sct_ct_wrap {min-width:0}
[data-product-cards].sct_40 .sct_txt,
[data-product-cards].sct_40 .sct_basic {line-height:1.5;overflow-wrap:anywhere}
[data-product-cards].sct_40 .sct_bottom {display:flex;align-items:flex-start;gap:8px}
[data-product-cards].sct_40 .sct_cost {position:static;flex:1;min-width:0;margin:5px 0;overflow-wrap:anywhere}
[data-product-cards].sct_40 .sct_op_btn {position:static;flex:none;margin-top:5px;white-space:nowrap}