@charset 'utf-8';

.swiper_type2 .swiper-slide {
	width: 600px;
}

/* .swiper_type3 { margin: 0 -30px; padding: 0 30px; overflow: hidden;} */
.product_info.col_4 > li {
	width: calc(100% / 4 - 10px);
}
.product_info.col_5 > li {
	width: calc(100% / 5 - 10px);
}
.product_info.col_6 > li {
	width: calc(100% / 6 - 10px);
}
.product_info.col_7 > li {
	width: calc(100% / 7 - 10px);
}

@media (max-width: 1280px) {
	.product_info.col_7 > li {
		width: calc(100% / 6 - 10px);
	}
}
.product_info .prd_item {
	display: inline-flex;
	flex-wrap: wrap;
	width: 236px;
	position: relative;
	margin-right: 10px;
}
.product_info a.link_wrap {
	display: block;
	position: relative;
	z-index: -0;
}
.product_info .thumb_area {
	position: relative;
	padding-bottom: 133%;
	overflow: hidden;
	z-index: 1;
	margin-bottom: 20px;
}
.thumb_area {
	background-color: var(--bg-color-gray02);
	background-image: url('../image/common/no_thum.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% auto;
	background-color: var(--bg-color-gray02);
}
.product_list .thumb_area .checkbox {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}
.product_info .thumb_area .thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.product_info .thumb_area .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.product_info .badge_wrap {
	position: absolute;
	left: 0;
	bottom: 0;
}
.product_info .button_equal {
	position: absolute;
	z-index: 2;
	top: 12px;
	right: 12px;
	cursor: pointer;
}
.product_info .info_area {
	margin-top: 20px;
	padding-right: 20px;
}
.info_area .brand,
.info_area .cont_tit,
.info_area .cont_subtit,
.info_area .cont_subdate {
	display: block;
	color: var(--txt-color-gray);
	font-weight: 500;
	margin-top: 10px;
}
.info_area .cont_tit {
	color: var(--txt-color);
	font-size: 20px;
	margin-top: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.info_area .cont_subtit {
	color: var(--txt-color-gray03);
	margin-top: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.info_area .cont_subdate {
	font-weight: normal;
}
.info_area .brand {
	color: var(--txt-color);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.info_area .product {
	overflow: hidden;
	display: -webkit-box;
	margin-top: 6px;
	color: var(--txt-color-gray03);
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	font-weight: normal;
}

.unbal_type .info_area .cont_tit {
	width: 330px;
	max-width: 100%;
}
.unbal_type .info_area .cont_subtit {
	width: 390px;
	max-width: 100%;
}

/* .product_info.product_list_raffle { margin: 30px -30px 0; }
.product_info.product_list_raffle > li {width: calc(50% - 60px); margin: 0 30px 90px;}
.product_info.product_list_raffle .info_area { margin: 20px 0; padding-right: 0; text-align: center;}
.product_info.product_list_raffle .cont_tit { font-size: 14px;}
.product_info.product_list_raffle .cont_subtit { margin-top: 6px; color: var(--txt-color-gray03)}
.product_info.product_list_raffle .cont_subdate { margin-top: 20px; color: var(--txt-color)}
.product_info.product_list_raffle .badge_wrap {top: 0; bottom: unset} */

.twoway_right_area .product_info.product_list_raffle > li {
	width: 100%;
}

.product_list_wrap.row {
	display: flex;
}
.sticky.filter_type + .product_list_wrap {
	margin-top: 30px;
}
.product_list_wrap + .product_list_wrap {
	margin-top: 150px;
}
.product_list_wrap .product_info {
	margin-bottom: -90px;
}
.container.main .product_list_wrap ~ .product_list_wrap {
	margin-top: 150px;
}
.container.main .swiper_banner_type {
	margin-top: 150px;
}
.container.main .black_box + .swiper_banner_type {
	margin-top: 0px;
}

.product_list_wrap.center_type {
	width: 1220px;
	margin: 0 auto;
}
.product_list_wrap .product_list ~ .brand_list {
	margin-top: 90px;
}
.product_list_wrap .brand_area + .brand_area {
	margin-top: 30px;
}
.product_list_wrap .tit_area {
	margin-bottom: 30px;
	align-items: flex-end;
}
.product_list.product_info {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -4px -90px;
}
.product_list.product_info > li {
	flex: 0 0 auto;
	position: relative;
	width: calc(20% - 8px);
	margin: 0 4px 90px;
}

.product_list_evt .thumb_area {
	padding-bottom: 66%;
}

.no_data.type2 + .product_list_wrap {
	margin-top: 60px;
}
.sticky + .search_filter_wrap {
	margin-top: 60px;
}
.search_filter_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px;
}
.search_filter_wrap .txt_result {
	font-size: 16px;
}
.txt_result .depth {
	display: inline-flex;
	align-items: center;
}
.txt_result .depth::after {
	content: '';
	width: 16px;
	height: 16px;
	margin: 0 5px;
	background: url('../image/icon/ico_arrow_16_s.png') no-repeat center/ 16px
		16px;
}

.has_lnb.full .product_list.product_info > li {
	width: calc(14.28% - 8px);
}
/* .product_list.product_info > li { width: calc(16.66% - 10px); } */

.price_wrap {
	margin-top: 10px;
}
.price_wrap .normal {
	font-size: 14px;
	color: var(--txt-color-gray02);
	display: block;
}
.price_wrap .discount {
	font-size: 24px;
	font-weight: bold;
	color: var(--txt-point);
}
.price_wrap .current {
	font-size: 24px;
	font-weight: bold;
	color: var(--txt-color);
}
.price_wrap .discount + .current {
	margin-left: 5px;
}

.product_info {
	margin: 0 -5px;
}
.product_info > li {
	position: relative;
	width: calc(25% - 10px);
	margin: 0 5px 90px;
}

.equal_content .product_info > li {
	position: relative;
	width: calc((100% - 100px) / 2);
	margin: 0 0 0;
}

/* .product_info .price_wrap .normal, */
.product_info .price_wrap .discount,
.product_info .price_wrap .current {
	font-size: 16px;
}

.product_info {
	display: flex;
	flex-wrap: wrap;
}
.product_info.swiper-wrapper {
	flex-wrap: nowrap;
	margin: 0;
}
.product_info.swiper-wrapper > li {
	margin: 0;
}
.product_info .event_end {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--bg-color-black02);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--txt-color-white);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.48px;
}

.new_product_list .cont_tit {
	font-size: 16px;
	height: 19px;
}
.new_product_list .cont_subtit a {
	font-size: 14px;
	color: var(--txt-color-gray);
}
.new_product_list .new_prd_list {
	display: flex;
	margin-top: 20px;
	gap: 4px;
}
.new_product_list .new_prd_list li a {
	display: block;
}
.new_product_list .new_prd_list .img_box {
	width: 72px;
	height: 91px;
	padding-bottom: 0;
}

.product_list_evt {
	margin: 0 -5px -90px;
}
.product_list_evt.col_3 li {
	width: calc(33.33% - 10px);
}
.product_list_evt.col_5 li {
	width: calc(20% - 10px);
}
.product_list_evt li {
	position: relative;
	width: calc(25% - 10px);
	margin: 0 5px 90px;
}
.product_list_evt li .brand_list {
	flex-direction: row;
	margin-bottom: 20px;
}
.product_list_evt.b_height .thumb_area {
	padding-bottom: 138.805%;
}
.swiper_type1 {
	margin: 0 -30px;
	padding: 0 30px;
}
.swiper_type1 .product_list_evt li {
	width: calc(33.33% - 32px) !important;
	margin: 0 5px 90px;
}

.product_list_di li {
	position: relative; /* width: calc(25% - 24px) !important; */
	margin: 0 5px 90px;
}
.product_list_di li .brand_list {
	margin-bottom: 20px;
}
.product_list_di .thumb_area {
	padding-bottom: 0;
}
.product_list_di .thumb_area .thumb {
	position: unset;
}

.product_list_di_wrap {
	margin: 0 -5px -90px;
}
.product_list_di_wrap > li {
	position: relative;
	width: calc(25% - 10px);
	margin: 0 5px 90px;
}
.product_list_di_wrap > li .brand_list {
	margin-bottom: 20px;
}
.product_list_di_wrap > .thumb_area {
	padding-bottom: 138.805%;
}

@media (max-width: 1280px) {
	.product_list_di_wrap > li {
		width: calc(100% / 3 - 10px);
	}
}

.prd_small_list {
	margin: 20px 54px 0 0;
	display: flex;
	gap: 4px;
}
.prd_small_list > li {
	width: calc(100% / 4);
}
.prd_small_list .thumb_area {
	position: relative;
	padding-bottom: 132.432%;
	margin-bottom: 0;
	overflow: hidden;
	z-index: 1;
	background-color: var(--bg-color-gray02);
}
.prd_small_list .thumb_area .thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.prd_small_list .thumb_area .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.exc_brd_list {
	margin: -5px;
}
.exc_list_wrap .exc_brd_list {
	display: flex;
	flex-wrap: wrap;
}
.exc_list_wrap .exc_brd_list li {
	width: calc(100% / 5 - 10px);
	margin: 5px 5px 90px;
}
.exc_list_wrap .exc_brd_list li a {
	display: block;
}
.exc_list_wrap .exc_brd_list li .exc_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.exc_list_wrap .exc_brd_list li .exc_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.exc_list_wrap .exc_brd_list li .exc_txt {
	font-size: 20px;
	margin: 20px 30px 0 0;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.exc_list_wrap .exc_brd_list li:nth-child(n + 6) {
	margin-bottom: 0;
}

/* .is_soldout .thumb, .is_soldout .info_area { opacity: 0.3;}
.is_soldout .badge_wrap .badge {background-color: var(--bg-color-gray); color: var(--txt-color-white);} */

.is_soldout .info_area {
	opacity: 0.5;
}
.is_soldout .badge_wrap .badge {
	background: var(--bg-color-gray06);
}
.is_soldout .thumb::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.5);
}
.badge_wrap .soldout,
.is_soldout .badge_wrap .soldout {
	background-color: var(--bg-color-gray03);
	color: var(--txt-color-white);
}

.type_vertical a.link_wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.type_vertical .thumb_area {
	width: 35%;
	padding-bottom: 45.5%;
	margin: 0 30px 0 0;
}
/* .type_vertical .thumb_area {width: 210px; height: 280px; padding: 0; margin: 0 30px 0 0;} */
.type_vertical .info_area {
	width: calc(65% - 30px);
	margin: 0;
	padding: 0;
}
.type_vertical .swiper-slide > ul > li,
.type_vertical > ul > li > ul > li {
	margin-bottom: 30px;
	position: relative;
}
.type_vertical .button_equal {
	right: calc(65% + 12px);
}

.product_list_evt.unbal_type li .thumb_area {
	padding-bottom: 0;
}
.product_list_evt.unbal_type li .thumb_area img {
	width: 100%;
}
/*
.product_list_evt.unbal_type li:nth-child(odd) .thumb_area { padding-bottom: 144.1%;}
.product_list_evt.unbal_type li:nth-child(even) .thumb_area { padding-bottom: 126.63%;}
*/
.product_list_evt.unbal_type.b_height .thumb_area {
	padding-bottom: 138.805%;
}
/* .is_soldout .thumb, 
.is_soldout .info_area, 
.is_soldout .favorite_wrap, 
.is_soldout .badge { opacity: 0.5;}
.is_soldout .badge_wrap .soldout {opacity: 1 !important;} */

.detail_box {
	margin: 11px 0 40px;
}
.detail_box > dt {
	display: flex;
	justify-content: space-between;
	margin: 40px 0 20px;
	color: var(--txt-color-gray);
}
.detail_box > dt a {
	font-size: 12px;
	color: var(--txt-color-gray);
	text-decoration: underline;
}
.detail_box dd {
	display: flex;
	justify-content: space-between;
}
.detail_box dd + dd {
	margin-top: 5px;
}
.detail_box dd + dd .list_type1 {
	margin-top: 10px;
}
.detail_box dd.column {
	flex-direction: column;
}
.detail_box dt:first-child {
	margin-top: 0;
}
.detail_box li {
	padding-bottom: 7px; /*display: flex; justify-content: space-between;*/
}
.detail_box .detail_more {
	font-size: 12px;
	text-decoration: underline;
	color: var(--txt-color-gray01);
	margin-left: 5px;
	vertical-align: top;
}
.detail_box .image_area {
	margin-bottom: 20px;
}
.detail_box .txt_guide {
	color: var(--txt-color-gray);
	margin-top: 20px;
	font-size: 12px;
}

.swiper a.link_wrap {
	position: static;
}

.product_wrap li:nth-child(n + 6) {
	margin-bottom: 0;
}

.list_type1 li {
	position: relative;
	padding: 0 0 10px 12px;
}
.list_type1 li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 4px;
	height: 4px;
	background: var(--bg-color-black);
}
.list_type1 li:last-child {
	padding-bottom: 0;
}
.list_type1.type2 li {
	padding: 0 0 6px 8px;
	font-size: 12px;
	color: var(--txt-color-gray);
}
.list_type1.type2 li:before {
	width: 3px;
	height: 3px;
	background: var(--txt-color-gray);
}

.qna_list .qna_row {
	position: relative;
	border-top: 1px solid var(--line-color-gray);
	padding: 20px 0;
}
.qna_list .qna_row:first-child {
	border: 0;
	padding-top: 0;
}
.qna_list .qna_row .write_info {
	color: var(--txt-color-gray);
}
.qna_list .qna_row .user_id::before {
	content: '|';
	padding-right: 3px;
	margin-left: 3px;
}
.qna_list .qna_row .re_status {
	display: inline-block;
	color: var(--txt-color-gray03);
	border: 1px solid var(--line-color-gray03);
	font-size: 12px;
	padding: 2px 5px;
	margin-top: 20px;
}
.qna_list .qna_row .complete {
	color: var(--txt-color-white);
	border-color: var(--line-color);
	background-color: var(--bg-color-black);
}
.qna_list .qna_row .qna_tit {
	margin-top: 20px;
}
.qna_list .qna_row .qna_answer span {
	display: block;
	margin: 20px 0 10px;
}
.qna_list .qna_row .my_wrote {
	position: absolute;
	top: 0;
	right: 0;
}
.qna_list .qna_row .my_wrote button {
	color: var(--txt-color-gray);
	text-decoration: underline;
}
.qna_list .qna_row .my_wrote button + button::before {
	content: '|';
	padding-right: 6px;
	margin-left: 3px;
}

.qna_list .accordion .acc_header {
	overflow: hidden;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	font-size: 14px;
	font-weight: 500;
	background: none;
	padding: 0;
}
.qna_list .accordion .acc_header.is_active {
	overflow: auto;
	display: block;
	background: none;
}
.qna_list .accordion .acc_cont {
	display: none;
}
.qna_list .accordion.private .acc_header {
	background: url('../image/icon/ico_private.png') no-repeat;
	padding-left: 20px;
}

.qna_list + .btn_sub_full {
	margin-top: 40px;
}

.brand_list.col_type {
	flex-direction: column;
	justify-content: space-between;
}
.brand_list.col_type + .brand_list.col_type {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--line-color-gray);
}
.brand_list.col_type > * {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}
.brand_list.col_type .button_equal {
	align-self: center;
	margin-top: 0;
	position: relative;
}

.brand_list {
	width: 100%;
	row-gap: 30px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.brand_list.has_pagination a.link_wrap {
	max-width: calc(100% - 92px);
}
.brand_list .line {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line-color-gray);
}
.brand_list .badge_auto_list {
	margin: 8px 1px 1px 0;
}
.brand_list a.link_wrap {
	display: flex;
	align-items: center;
	overflow: hidden;
}
.brand_list .thumb_area {
	position: relative;
	min-width: 60px;
	width: 60px;
	height: 60px;
	margin-bottom: 0;
	border-radius: 50%;
	overflow: hidden;
	padding-bottom: 0;
}
.brand_list .thumb_area .thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.brand_list .thumb_area .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.brand_list .thumb.img_viewer {
	padding-top: 100%;
}
.brand_list .info_area {
	margin-top: 0;
	padding: 0 15px;
	overflow: hidden;
}
.brand_list .info_area .brand {
	margin-top: 0;
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.brand_list .info_area .product {
	-webkit-line-clamp: 1;
	margin-top: 5px;
}
.brand_list .button_equal {
	align-self: flex-start;
	text-indent: -999999px;
	position: unset;
	top: unset;
	right: unset;
	margin-top: 6px;
}

.equal_content .brand_list {
	gap: 20px 100px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	width: 880px;
}
.equal_content .brand_list.product_info {
	margin-left: 0;
	margin-right: 0;
}
.equal_content .brand_list .checkbox {
	margin-right: 15px;
}
.equal_content .brand_list .product {
	font-size: 14px;
	color: var(--txt-color-gray);
}

/*다른혜택더보기 1ea*/
.product_list_mkt .info_area .cont_tit {
	font-size: 12px;
	color: var(--txt-color);
	font-weight: 500;
}
.product_list_mkt .info_area .cont_tit a {
	color: inherit;
	font-weight: inherit;
}
.product_list_mkt .info_area .cont_tit a:after {
	content: '';
	width: 5px;
	height: 8px;
	background: url('../image/icon/ico_arrow_next.png') no-repeat center;
	background-size: 5px 8px;
	display: inline-flex;
	margin-left: 5px;
}
.product_list_mkt .badge_wrap {
	position: absolute;
	top: 0;
	left: 0;
	flex-direction: column;
}
.product_list_mkt .badge_wrap .badge_lg {
	display: flex;
}
.product_list_mkt.product_info li {
	position: relative;
}
.product_list_mkt.product_info li {
	padding-top: 80px;
	padding-bottom: 80px;
	padding-left: 40px;
}
.product_list_mkt .thumb_area {
	padding-bottom: 138.805%;
	background: var(--bg-color-gray02) url('../image/common/no_thum.png')
		no-repeat 50% 50%;
	background-size: cover;
}

.recommend_wrap {
	display: flex;
	margin-bottom: 90px;
}
.recommend_wrap .main_img {
	position: relative;
	width: calc((100% / 6) * 2 - 10px);
	min-width: calc((100% / 6) * 2 - 10px);
	min-height: calc(100% - 130px);
	margin: 0 5px 220px;
}
.recommend_wrap .product_info .main_img {
	width: calc((100% / 6) - 10px);
	min-width: calc((100% / 6) - 10px);
	min-height: calc(100% - 130px);
}
.recommend_wrap .main_img .img_box {
	display: block;
	height: 100%;
	padding-bottom: 0;
}
.recommend_wrap .product_info .main_img .img_box {
	height: auto;
	padding-bottom: 133%;
}
.recommend_wrap .main_img .info_area {
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px;
	flex-direction: column;
}
.recommend_wrap .product_info .main_img .info_area {
	height: 100%;
}
.recommend_wrap .main_img .info_area,
.recommend_wrap .main_img .info_area .cont_tit,
.recommend_wrap .main_img .info_area .cont_subtit {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	color: var(--txt-color-white);
}
.recommend_wrap .main_img .info_area .cont_subtit .carousel {
	color: black;
}
.recommend_wrap .main_img .info_area .cont_subtit p {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.recommend_wrap .main_img .info_area.bottom {
	justify-content: flex-end;
}
.recommend_wrap .main_img .info_area.bottom.right {
	justify-content: flex-end;
	text-align: right;
}
.recommend_wrap .main_img .cont_tit {
	font-size: 34px;
	line-height: 1.5;
}
.recommend_wrap .main_img .cont_subtit p {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 24px;
	line-height: 150%;
}

@media (max-width: 1919px) {
	.recommend_wrap .product_info .main_img .cont_subtit p {
		font-size: 20px;
	}
}
@media (max-width: 1535px) {
	.recommend_wrap .product_info .main_img .cont_subtit p {
		font-size: 18px;
	}
}
@media (max-width: 1439px) {
	.recommend_wrap .product_info .main_img .cont_subtit p {
		font-size: 16px;
	}
}

.recommend_wrap .product_info .main_img .cont_subtit .more {
	height: 0;
	transition: all 0.3s ease;
	font-family: 'Pretendard';
	font-weight: 400;
}
.recommend_wrap .product_info .main_img .cont_subtit.is_active p {
	text-decoration: underline;
}
.recommend_wrap .product_info .main_img .cont_subtit.is_active .more {
	height: 19px;
	margin-bottom: 20px;
}
/* .recommend_wrap .main_img .cont_subtit + .cont_subtit {margin-top: 10px;} */
.recommend_wrap .main_img .cont_subtit .more {
	display: inline-block;
	color: var(--txt-color-white);
	font-size: 14px;
}
.recommend_wrap .main_img .cont_subtit .more::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 10px;
	margin-left: 5px;
	background: url('../image/icon/ico_arrow_w.png') no-repeat center/contain;
}
/* .recommend_wrap .main_img .cont_subtit ~ .cont_subtit {margin-top: 30px;} */
.recommend_wrap .product_info {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	overflow: hidden;
}
.recommend_wrap .product_info .info_area {
	height: 110px;
}
.product_list_wrap .recommend_wrap .main_img {
	margin-bottom: 130px;
}
.product_list_wrap .recommend_wrap .main_img .img_box::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
}
.twoway_right_area .product_list_wrap + .section_block {
	margin-top: 150px;
}
/*main*/
.main_banner_wrap {
	overflow: hidden;
}
.swiper_main {
	width: 100%;
	padding-top: 10px;
	margin-bottom: 170px;
	background: var(--bg-color-black);
	overflow: visible !important;
	transition: 0.3s ease;
}

.swiper_main .thumb {
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 61.61%;
	margin: 0 auto;
	overflow: hidden;
}
.swiper_main .thumb .img {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
.swiper_main .thumb .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.swiper_main .swiper-slide .link_wrap::after {
	content: '';
	display: block;
	z-index: 11;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
}
.swiper_main .swiper-slide.swiper-slide-active .link_wrap::after {
	display: none;
}
.swiper_main .thumb_title {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 600px;
	color: var(--txt-color-white);
	z-index: 9;
	line-height: 1.57;
	transition: all 0.3s ease;
	font-family: 'Pretendard';
}
.swiper_main .badge_wrap {
	position: absolute;
	width: 720px;
	bottom: -140px;
	left: 0;
	z-index: 3;
	flex-direction: column;
	transition: 0.3s ease;
}

.badge_wrap .badge_big {
	width: 100%;
	height: 110px;
	padding: 0 85px;
	font-size: 36px;
	color: var(--txt-color-white);
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
	transition: all 0.3s ease;
}

/*
@media only screen and (min-width: 1281px) and (max-width: 1500px) {
    .swiper_main .thumb_title{ top: 40px; left: 50px; }
    .swiper_main .badge_wrap { bottom: -155px;}
}
@media only screen and (min-width: 1281px) and (max-width: 1500px) {
    .badge_wrap .badge_big { padding: 0 75px; height: 100px; font-size: 30px;}
}
*/

.swiper_main .badge_wrap .badge_big + .badge_big {
	border-left: 0;
	margin-top: 10px;
	white-space: nowrap;
}
.swiper_main .badge_wrap .track {
	position: relative;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	line-height: 1.1;
}
.swiper_main .badge_wrap .count {
	line-height: unset;
	width: auto;
	margin-left: 5px;
	font-size: 10px;
	display: inline-flex;
	letter-spacing: 0;
	margin-top: -10px;
}

.badge_wrap .badge_big.badge_1 .text_flow {
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.1;
}
/* .badge_wrap .badge_big .track.no_animation { overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } */

.badge_wrap .badge_big .track.no_animation .text_flow {
	animation: unset;
}

.badge_wrap .badge_big .track .text_flow {
	animation: text_flow 20s linear infinite;
	align-items: center;
	display: inline-flex;
	will-change: transform;
}
/*animation*/
@keyframes text_flow {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-100%);
	}
}
@-webkit-keyframes text_flow {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-100%);
	}
}
.badge_wrap .badge_big .track:before,
.badge_wrap .badge_big .track:after {
	content: '';
	width: 20px;
	height: 100%;
	display: inline-flex;
	position: absolute;
	top: 0;
	z-index: 3;
}
.badge_wrap .badge_big .track:before {
	left: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.badge_wrap .badge_big .track:after {
	right: 0;
	background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.badge_wrap .badge_big .track.no_animation:before,
.badge_wrap .badge_big .track.no_animation:after {
	display: none;
}
/*
.swiper_main .swiper-slide:before{ content:""; width:100%; height:42%; background:linear-gradient(to bottom, rgba(0,0,0,0.3) 15%,  rgba(0,0,0,0.2) 59%, rgba(0,0,0,0) 87%); position:absolute; top:0; left:0; z-index:10;}
*/
.swiper_main .badge_big .swiper-pagination {
	position: relative;
	display: flex;
	width: auto;
	margin-left: 7px;
	margin-top: 6px;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	transition: all 0.3s ease;
}

@media only screen and (min-width: 1281px) and (max-width: 1500px) {
	.swiper_main .badge_big .swiper-pagination {
		font-size: 15px;
	}
}
@media (max-width: 1280px) {
}

@media (max-width: 2560px) {
	.swiper_main .thumb_title {
		top: 40px;
		left: 50px;
	}
	.swiper_main .badge_wrap {
		width: 680px;
		bottom: -135px;
	}
	.badge_wrap .badge_big {
		padding: 0 85px;
		height: 105px;
		font-size: 36px;
	}
	.swiper_main .badge_big .swiper-pagination {
		font-size: 20px;
		margin-top: 10px;
	}
}
@media (max-width: 1680px) {
	.swiper_main .badge_wrap {
		width: 600px;
		bottom: -125px;
	}
	.badge_wrap .badge_big {
		padding: 0 80px;
		height: 95px;
		font-size: 32px;
	}
	.swiper_main .badge_big .swiper-pagination {
		font-size: 18px;
		margin-top: 10px;
	}
}
@media (max-width: 1535px) {
	.swiper_main .badge_wrap {
		width: 570px;
		bottom: -120px;
	}
	.badge_wrap .badge_big {
		padding: 0 80px;
		height: 90px;
		font-size: 30px;
	}
	.swiper_main .badge_big .swiper-pagination {
		font-size: 18px;
		margin-top: 10px;
	}
}
@media (max-width: 1440px) {
	.swiper_main .thumb_title {
		top: 30px;
		left: 40px;
	}
	.swiper_main .badge_wrap {
		width: 530px;
		bottom: -115px;
	}
	.badge_wrap .badge_big {
		padding: 0 80px;
		height: 85px;
		font-size: 28px;
	}
	.swiper_main .badge_big .swiper-pagination {
		font-size: 16px;
		margin-top: 8px;
	}
}

@media (max-width: 1365px) {
	.swiper_main .badge_wrap {
		width: 500px;
		bottom: -110px;
	}
	.badge_wrap .badge_big {
		padding: 0 60px;
		height: 80px;
		font-size: 26px;
	}
	.swiper_main .badge_big .swiper-pagination {
		font-size: 16px;
		margin-top: 8px;
	}
}

@media (max-width: 1280px) {
	.swiper_main .badge_wrap {
		width: 450px;
		bottom: -105px;
	}
	.badge_wrap .badge_big {
		padding: 0 50px;
		height: 75px;
		font-size: 24px;
	}
	.swiper_main .badge_big .swiper-pagination {
		font-size: 14px;
		margin-top: 10px;
	}
}

.black_box {
	margin: 150px -30px 0;
	padding: 50px 100px 150px;
	background: var(--bg-color-black);
}
.black_box .swiper_type3 {
	width: 100%;
	box-sizing: content-box;
	margin: 0 -90px;
	padding: 0 100px 0 90px;
}
.black_box .tit_lv2 {
	color: var(--txt-color-white);
}
.black_box .info_area .brand {
	color: var(--txt-color-white);
}
.black_box .link_list {
	margin-bottom: 150px;
}
.black_box .link_list .btn {
	display: inline-block;
	margin-right: 24px;
	margin-bottom: 18px;
	color: var(--txt-color-white);
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
	word-break: break-word;
}
.black_box .link_list .btn:hover span {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-position: under;
}
.black_box .link_list .btn::after {
	content: ',';
	display: inline-block;
	font-size: 50px;
	color: var(--txt-color-white);
}
.black_box .link_list .btn:last-child::after {
	display: none;
}
.black_box .product_info .price_wrap .current {
	color: var(--txt-color-white);
}
.black_box .info_area .product {
	color: var(--txt-color-gray01);
}

.swiper_banner_type,
.swiper_banner_type2 {
	margin: 0 -30px;
}
.swiper_banner_type .list_banner_main {
	position: relative;
}
.swiper_banner_type .list_banner_main .img_box {
	display: block;
	padding-bottom: 39.5%;
}
.swiper_banner_type .list_banner_main .info_area {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.swiper_banner_type .list_banner_main .info_area .cont_tit {
	display: block;
	margin: 0 80px;
	font-weight: 400;
	color: var(--txt-color-white);
	font-size: 24px;
	white-space: nowrap;
	transition: font-size 0.3s ease;
}
/*
@media only screen and (min-width: 1281px) and (max-width: 1500px) {
    .swiper_banner_type .list_banner_main .info_area .cont_tit { font-size: 20px; }
}
*/
@media (max-width: 1280px) {
	.black_box .link_list .btn {
		margin-bottom: 15px;
	}
	.swiper_banner_type .list_banner_main .info_area .cont_tit {
		font-size: 16px;
	}
}
.swiper_banner_type .swiper-button-next,
.swiper_banner_type .swiper-button-prev,
.swiper_banner_type2 .swiper-button-next,
.swiper_banner_type2 .swiper-button-prev {
	width: 60px;
	height: 60px;
	margin-top: -30px;
}
.swiper_banner_type .swiper-button-next,
.swiper_banner_type2 .swiper-button-next {
	right: 0;
	background: url('../image/icon/ico_next.png') no-repeat center
		center/contain;
}
.swiper_banner_type .swiper-button-prev,
.swiper_banner_type2 .swiper-button-prev {
	left: 0;
	background: url('../image/icon/ico_prev.png') no-repeat center
		center/contain;
}
.swiper_banner_type .swiper-button-next::after,
.swiper_banner_type .swiper-button-prev::after,
.swiper_banner_type2 .swiper-button-next::after,
.swiper_banner_type2 .swiper-button-prev::after {
	content: '';
}

.list_banner_type {
	display: flex;
	margin: 10px -30px 150px;
	gap: 10px;
}
.list_banner_type li {
	width: 33.33%;
}
.list_banner_type li .i {
	width: 33.33%;
}
.list_banner_type li .img_box {
	padding-bottom: 100%;
}
/* .list_banner_type .info_area { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} */
.list_banner_type li .badge_wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 390px;
	margin: 0 auto;
	overflow: hidden;
}
.list_banner_type li .badge_wrap span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list_banner_type li .badge_wrap .badge_lg {
	display: flex;
	align-items: center;
	width: 100%;
	height: 72px;
	padding: 0 20px;
	font-size: 20px;
	transition: all 0.3s ease;
}
.list_banner_type li .badge_wrap .badge_lg + .badge_lg {
	margin-top: 10px;
	border-left: 0;
}
@media (max-width: 1280px) {
	/* .list_banner_type li .badge_wrap .badge_lg {font-size: 14px;} */
}

.list_banner_small .link_wrap {
	position: relative;
}
.list_banner_small .img_box {
	padding-bottom: 220px;
}
.list_banner_small .info_area {
	position: absolute;
	width: 1000px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 200px;
}
.list_banner_small .info_area .cont_tit {
	color: var(--txt-color-white);
	font-size: 32px;
	font-weight: 500;
	line-height: 38px;
}
.list_banner_small .info_area .cont_subtit {
	color: var(--txt-color-white);
	margin-top: 5px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

@media (min-width: 1920px) {
	/* .list_banner_small .img_box {  padding-bottom: 295px; } */
}

/* eql-brand에 맞춤 스타일 */
.swiper_type3 {
	position: relative;
	margin-top: 30px;
}
/*.swiper_type3 .pagenum2     {position:absolute; display:flex; right:0; top:-40px; background:#ddd; }
.swiper_type3 .pagenum2 button    {position:static; width:32px; height:32px; opacity:1;  overflow: hidden; text-indent: -100px; }
.swiper_type3 .pagenum2 button + button   {margin-left:-1px;}
.swiper_type3 .pagenum2 .swiper-button-next   {background:url(../image/icon/ico_arrow_next.png); background-size:32px}
.swiper_type3 .pagenum2 .swiper-button-prev   {background:url(../image/icon/ico_arrow_next.png); transform: rotate(180deg); background-size:32px}
.swiper_type3 .pagenum2 .swiper-button-next.swiper-button-disabled   {background:url(../image/icon/ico_arrow_prev_dis.png);transform: rotate(180deg);}
.swiper_type3 .pagenum2 .swiper-button-prev.swiper-button-disabled   {background:url(../image/icon/ico_arrow_prev_dis.png); transform: rotate(0deg);}
*/
.product_list_wrap.right_over {
	margin: 0 -30px 0;
}
.product_list_wrap.right_over .tit_lv2 {
	padding-left: 30px;
}
.product_list_wrap.right_over .swiper_type2_1 {
	padding-left: 30px;
}
.pagenum2_1 {
	position: absolute;
	z-index: 10;
	display: flex;
	right: 30px;
	margin-top: -40px;
	background: #fff;
}
.pagenum2_1 button {
	position: static;
	width: 32px;
	height: 32px;
	opacity: 1;
	overflow: hidden;
	text-indent: -100px;
}
.pagenum2_1 button + button {
	margin-left: -1px;
}
/* 스와이퍼 네비게이션 바 <.> */
.pagenum2_1 .swiper-button-next {
	background: url(../image/icon/ico_arrow_next.png);
	background-size: 32px;
}
.pagenum2_1 .swiper-button-prev {
	background: url(../image/icon/ico_arrow_next.png);
	transform: rotate(180deg);
	background-size: 32px;
}
.pagenum2_1 .swiper-button-next.swiper-button-disabled {
	background: url(../image/icon/ico_arrow_prev_dis.png);
	transform: rotate(180deg);
}
.pagenum2_1 .swiper-button-prev.swiper-button-disabled {
	background: url(../image/icon/ico_arrow_prev_dis.png);
	transform: rotate(0deg);
}
/* 다크모드 */
.pagenum2_1.darkmode {
	border-color: #808080;
	color: var(--txt-color-white) !important;
}
.pagenum2_1.darkmode .swiper-button-next {
	border-color: #808080;
}
/* .pagenum2_1.darkmode.swiper-button-disabled {
	color: #808080;
} */

.pagination {
	display: flex;
	height: 32px;
	border: 1px solid #ddd;
	border-radius: 2px;
	background: var(--bg-color-white);
}
.pagination a {
	position: static;
	text-indent: -9999px;
	margin: 0;
	width: 30px;
	height: 30px;
}
.pagination a:after {
	font-size: 13px;
	text-indent: 0;
	margin: 0;
}
.pagination a + a {
	border-left: 1px solid #ddd;
}

/* 메인 간격 케이스 추가 0424 */
.main .swiper_banner_type + .product_list_wrap {
	margin-top: 150px;
}

/* 메인 타임특가구좌 신규 */
div ~ .timesale_warp {
	margin-top: 150px;
}
.timesale_warp .product_info {
	margin: 0;
}
.timesale_warp .tit_area {
	flex-direction: column;
	align-items: start;
}
.timesale_warp .tit_area .timer {
	display: flex;
	margin-top: 1px;
	gap: 5px;
	font-weight: 500;
	font-size: 28px;
	line-height: 35px;
	color: var(--txt-point);
}
.timesale_warp .tit_area .timer div ~ div:before {
	content: ':';
	margin-right: 6px;
}
.time_prd_list_wrap {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 4.13fr);
}
.time_prd_list_wrap .time_prd_tab {
	position: relative;
	align-self: start;
}
.time_prd_list_wrap .time_prd_tab.black {
	color: #080808;
}
.time_prd_list_wrap .time_prd_tab.white {
	color: var(--txt-color-white);
}
.time_prd_list_wrap .time_prd_tab .img_box {
	height: 0;
	padding-bottom: 133%;
}
.time_prd_list_wrap .time_prd_tab .img_box:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.2);
}
.time_prd_list_wrap .time_tab_list {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 30px;
}
.time_prd_list_wrap .time_tab_list .time_tab {
	overflow: hidden;
}
.time_prd_list_wrap .time_tab_list p {
	display: -webkit-box;
	margin-bottom: 10px;
	font-size: 22px;
	line-height: 30px;
	letter-spacing: -0.22px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	word-break: break-all;
	overflow: hidden;
	cursor: pointer;
}
.time_prd_list_wrap .time_tab_list .more {
	display: block;
	height: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.15px;
	transition: all 0.3s ease;
}
.time_prd_list_wrap .time_tab_list .more svg {
	display: inline-block;
	width: 6px;
	height: 10px;
	margin-top: 6px;
	margin-left: 1px;
	vertical-align: top;
	fill: none;
	stroke: currentColor;
	stroke-linejoin: round;
}
.time_prd_list_wrap .time_tab_list .time_tab.is_active p {
	font-size: 24px;
	letter-spacing: -0.24px;
	text-decoration: underline;
}
.time_prd_list_wrap .time_tab_list .time_tab.is_active .more {
	height: 19px;
	margin-bottom: 20px;
}
.time_prd_list_wrap .time_prd_list {
	margin-right: -30px;
}
.time_prd_list_wrap .swiper a.link_wrap,
.time_prd_list_wrap .product_info {
	width: 100%;
}
.time_prd_list_wrap .product_info .button_equal {
	overflow: hidden;
}

/* 260917 main-new Task 1: 투데이 배너 - 퍼블(EQL_PC_MA_100_v2.html) list.css:1859-1977 이식.
   main-new 전용 신규 셀렉터만 추가(.main_new/.main_top_wrap/.main_swiper_top/.main_thumb_swiper),
   기존 규칙은 수정하지 않음 - V1에는 해당 클래스가 없어 영향 없음. */
.main_new {
	--mainPadding: 32px;
}
.main_new img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main_top_wrap {
	position: relative;
}
.main_top_wrap img {
	object-position: bottom;
}
.main_swiper_top {
	margin-right: 13.85%;
}
.main_swiper_top .swiper-wrapper {
	padding-left: 31.13%;
}
.main_swiper_top .swiper-slide {
	width: 37.73%;
}
.main_swiper_top .swiper-slide:after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	pointer-events: none;
}
.main_swiper_top .thumb_area {
	position: relative;
	height: 0;
	padding-bottom: 125%;
}
.main_swiper_top .thumb_title {
	position: absolute;
	display: flex;
	inset: 0;
	padding: 0 clamp(32px, 7.7%, 48px) clamp(40px, 9.61%, 60px);
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 60%,
		rgba(0, 0, 0, 0.2) 82%
	);
	flex-direction: column;
	justify-content: end;
	color: var(--txt-color-white);
	opacity: 0;
}
.main_swiper_top .thumb_title strong {
	display: block;
	max-height: calc(clamp(80px, 6.25vw, 120px) * 1.13);
	margin-bottom: 16px;
	font-weight: 400;
	font-size: clamp(40px, 3.125vw, 60px);
	line-height: 1.13;
	overflow: hidden;
}
.main_swiper_top .thumb_title span {
	display: block;
	max-height: calc(clamp(28px, 1.874vw, 36px) * 1.33);
	font-weight: 400;
	font-size: clamp(14px, 0.937vw, 18px);
	line-height: 1.33;
	overflow: hidden;
}
.main_swiper_top .thumb_area .thumb {
	position: absolute;
	inset: 0;
}
.main_swiper_top .swiper-slide-active:after {
	opacity: 0;
}
.main_swiper_top .swiper-slide-active .thumb_title {
	opacity: 1;
}
.main_thumb_swiper {
	position: absolute;
	width: 28%;
	top: 50%;
	right: 0;
	margin-top: 12px;
	padding-bottom: 24px;
	transform: translate(0, -50%);
}
.main_thumb_swiper .swiper-slide {
	width: clamp(80px, 5.312vw, 102px);
	cursor: pointer;
}
.main_thumb_swiper .img_wrap {
	aspect-ratio: 102 / 136;
	background: var(--bg-color-black);
}
.main_thumb_swiper .img_wrap img {
	opacity: 0.6;
}
.main_thumb_swiper .swiper-slide-active .img_wrap img {
	opacity: 1;
}
.main_thumb_swiper .swiper-pagination {
	width: auto;
	bottom: 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--txt-color-white);
}
.main_thumb_swiper .swiper-pagination .swiper-pagination-total:before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 1px;
	margin: 7px 4px 0;
	background: var(--bg-color-white);
	vertical-align: top;
}
.main_new .content {
	margin-top: 80px;
	padding: 0;
}

/* 260917 main-new Task 3: 이슈 숏컷 배너("한눈에 보는 이큐엘") - 퍼블 list.css:1983-2013,
   2376-2397, 3013-3017 이식. .main_div/.tit_area/.tit_lv4는 main-new 첫 타일형 모듈이라
   여기서 처음 추가한다(V1에는 .main_div 클래스 자체가 없음 - grep 확인, 영향 없음).
   .btn_round/.btn_round_box 베이스 규칙은 icon_btn_etc.css에 이미 있어 재추가하지 않음. */
.main_new .main_div {
	margin-top: 120px;
	font-weight: 400;
	--font-tit: clamp(24px, 1.458vw, 28px);
	/* Swiper 기본 테마색(#007aff)을 쓰는 `swiper/css`를 V1 라우트(/main,
	   /event)가 불러온다 — 그 라우트를 먼저 거친 뒤 /main-new로 이동하면 그
	   CSS가 헤드에 남아 `librarys.css`의 `:root` 검정(#000)을 덮어써 `< >`
	   화살표·진행바가 파랗게 보인다(QA 4번). 퍼블 값(#000)을 모듈 안에서 고정한다. */
	--swiper-theme-color: #000;
}
.main_div .tit_area {
	padding: 0 var(--mainPadding);
	margin-bottom: 16px;
	gap: 16px 10px;
	font-weight: inherit;
	justify-content: start;
	align-items: center;
}
.main_div .tit_area .tit_lv4 {
	padding: 4px 0;
	font-weight: 500;
	line-height: 24px;
}
.main_div.issue_shortcut .btn_round_box {
	display: block;
	margin: -12px 0 0;
	padding: 0 var(--mainPadding);
	font-size: var(--font-tit);
	overflow: hidden;
}
.main_div.issue_shortcut .btn_round_box .btn_round {
	float: left;
	margin: 12px 16px 0 0;
}
.main_div.issue_shortcut .btn_round_box .btn_round:nth-child(5n) {
	margin-right: 0;
}
.main_div.issue_shortcut .btn_round_box .btn_round:nth-child(5n + 1) {
	clear: left;
}
.main_div.issue_shortcut .btn_round_box .btn_round .txt {
	padding-right: 20px;
	font-weight: inherit;
}
/* 기획은 "1줄에 5개, 최대 10개(2줄)"인데 알약 폭이 글자 길이를 따라 늘어나, 타이틀이
   길면 5개가 한 줄에 들어가지 않아 줄이 넘쳐 4줄이 됐다(QA 14번). 알약 하나가 한 줄
   5칸 중 한 칸(칸 사이 16px)을 넘지 못하게 하고 긴 타이틀은 한 줄 말줄임으로 자른다. */
.main_div.issue_shortcut .btn_round_box .btn_round {
	max-width: calc((100% - 16px * 4) / 5);
}
.main_div.issue_shortcut .btn_round_box .btn_round .txt {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@media (1440px <= width < 1920px) {
	.main_div.issue_shortcut .btn_round_box .btn_round .txt {
		font-size: 24px;
	}
}

/* 260917 main-new Task 4: 쿠폰 영역(C_D, 2 instances) - 퍼블 list.css:1988,
   2286-2301(2단 그리드 행 래퍼, 마케팅 모듈과 공유), 2399-2513(쿠폰 자체) 이식.
   `.main_grid`는 쿠폰+마케팅을 한 행에 담는 공유 래퍼라 Task 5(마케팅)도 이 블록을
   그대로 쓴다 - 새로 추가하지 말 것.
   `.btn_sub_m`/`.btn_sub_m.white` 베이스 규칙은 wch의 icon_btn_etc.css 사본이
   낡아(주석 처리됨, 퍼블 최신본과 다름 - 2026-09-17 확인) 전역 규칙을 되살리면
   V1 페이지에 영향을 줄 수 있어 손대지 않는다. 대신 이 모듈 전용 스코프
   (`.main_div.coupon .btn_sub_m`)에 필요한 값을 모두 옮겨 적었다. */
.main_div button {
	cursor: pointer;
}
.main_grid {
	display: flex;
	margin-top: 120px;
	padding: 0 var(--mainPadding);
	gap: 16px;
	align-items: start;
}
.main_grid:nth-child(1),
.main_div:nth-child(1) {
	margin-top: 0;
}
.main_grid .main_div {
	margin-top: 0;
}
.main_grid .tit_area {
	padding: 0;
}
.main_new .main_div .timer {
	display: flex;
	gap: 2px;
	font-weight: inherit;
	font-size: var(--font-tit);
	line-height: 1.14;
	letter-spacing: -0.28px;
	color: var(--txt-point);
}
.main_new .main_div .timer .timer_hrs ~ div:before {
	content: ':';
	margin-right: 2px;
}
.main_div.coupon {
	display: grid;
	width: 74.78%;
	flex-shrink: 0;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	gap: 24px 16px;
}
.main_div.coupon:not(:has(.has_img)) > * {
	grid-column: 1;
}
.main_div.coupon .tit_area {
	margin: 0;
	flex-direction: column;
	align-items: start;
	gap: 0;
}
.main_div.coupon .timer .timer_day {
	margin-right: 10px;
}
.main_div.coupon .tit_area .tit_lv2 {
	font-weight: inherit;
	font-size: var(--font-tit);
	line-height: 1.14;
}
.main_div.coupon .tit_area .sub_tit {
	margin-top: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--txt-color-gray03);
	/* 기획은 2줄 노출 — 공용 `.tit_area .sub_tit`는 1줄 말줄임이다(QA 7번) */
	-webkit-line-clamp: 2;
}
.main_div.coupon .tit_area .tit_btn {
	margin-top: 18px;
	font-weight: inherit;
	line-height: 20px;
}
.main_div.coupon .coupon_con {
	display: grid;
	align-items: end;
}
.main_div.coupon .coupon_con .couopn_img {
	grid-area: 1/1;
}
.main_div.coupon .coupon_con .coupon_list {
	display: grid;
	grid-area: 1/1;
	gap: 4px;
}
.main_div.coupon .coupon_con.has_img .coupon_list {
	padding: 16px;
}
.main_div.coupon .coupon_list .coupon_down {
	height: 44px;
	padding: 0 53px 0 20px;
	background: var(--bg-color-black) url(../image/icon/ico_download.svg) right
		20px top 50%/18px no-repeat;
	font-weight: inherit;
	font-size: 14px;
	color: var(--txt-color-white);
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.main_div.coupon .btn_sub_m {
	width: 100%;
	min-width: 105px;
	height: 38px;
	margin-top: 16px;
	padding: 0 30px;
	border: 1px solid var(--line-color-gray01);
	border-radius: 3px;
	background-color: var(--bg-color-white);
	font-size: 14px;
	line-height: 36px;
	color: var(--txt-color);
	text-align: center;
}
.main_div.coupon .coupon_txt {
	font-size: 12px;
	line-height: 16px;
}
.main_div.coupon .coupon_date {
	margin-bottom: 4px;
}
.main_div.coupon .coupon_notice .notice_btn {
	position: relative;
	padding-right: 17px;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
}
.main_div.coupon .coupon_notice .notice_btn:after {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	right: 0;
	top: 0;
	background: url(../image/icon/ico_open.png) 100% 0/15px no-repeat;
}
.main_div.coupon .coupon_notice .notice_list {
	margin-top: 4px;
	color: var(--txt-color-gray);
	display: none;
}
.main_div.coupon .coupon_notice .notice_list li {
	padding-left: 8px;
	text-indent: -8px;
}
.main_div.coupon .coupon_notice .notice_btn.active:after {
	transform: rotate(180deg);
}
.main_div.coupon .coupon_notice .notice_btn.active ~ ul {
	display: block;
}
.main_div.coupon:has(.has_img) {
	row-gap: 48px;
}
.main_div.coupon:has(.has_img) .tit_area {
	grid-column: 2;
}
.main_div.coupon:has(.has_img) .coupon_con {
	grid-area: 1/1/3/2;
}
/* 마케팅 영역(M_S, Task 5, 2026-09-17) — 퍼블 list.css:2514-2572 그대로.
   `.main_div.coupon`과 같은 `.main_grid` 행의 오른쪽 칸을 채운다. */
.main_div.marketing .swiper-slide a {
	position: relative;
	display: block;
	aspect-ratio: 1;
	/* 퍼블엔 라이트 모드 텍스트형 배너의 배경색이 없어 흰색(페이지 배경)이 비친다 —
	   기획서는 회색이다(QA 16번, ch MO 마케팅도 같은 회색 `#f4f4f4`). 다크 모드는
	   아래 `a.darkmode` 규칙이 검정으로 덮는다. 이미지가 있는 배너는 이미지가 덮는다. */
	background: var(--bg-color-gray02);
}
.main_div.marketing .banner_txt {
	position: absolute;
	display: flex;
	inset: 0;
	padding: 24px;
	flex-direction: column;
	gap: 8px;
	white-space: nowrap;
}
.main_div.marketing .banner_txt .banner_tit {
	display: -webkit-box;
	font-size: var(--font-tit);
	line-height: 1.14;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.main_div.marketing .banner_txt .banner_desc {
	display: -webkit-box;
	opacity: 0.5;
	font-size: 14px;
	line-height: 20px;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.main_div.marketing a.darkmode {
	background: var(--bg-color-black);
}
.main_div.marketing .darkmode .banner_txt {
	color: var(--txt-color-white);
}
.main_div.marketing .pagination {
	position: absolute;
	width: auto;
	height: auto;
	right: 24px;
	bottom: 24px;
	left: auto;
	border: none;
	background: none;
	font-size: 12px;
	line-height: 16px;
	z-index: 1;
}
.main_div.marketing .pagination span {
	padding: 0 1px;
}
.main_div.marketing:has(.swiper-slide-active .darkmode) .pagination {
	color: var(--txt-color-white);
}
/* 브랜드 추천 캐러셀(대, B_L, Task 6, 2026-09-17) — 퍼블 list.css:1819-1852(상품
   가로형 리스트), 2048-2143(화살표 버튼/progressbar/브랜드 히어로), 2574-2600
   (`.brand_l` 전용 크기값) 그대로. V1 static/asset/css/list.css에 동일 선택자가
   없음을 grep으로 확인(추가 전용, 충돌 없음). */
.product_list.product_info.row {
	margin: 0;
	row-gap: 8px;
}
.product_list.product_info.row > li {
	width: 100%;
	margin: 0;
}
.product_list.product_info.row .link_wrap {
	display: flex;
	gap: 12px;
}
.product_list.product_info.row .thumb_area {
	width: 72px;
	flex-shrink: 0;
	margin: 0;
	padding-bottom: 96px;
}
.product_list.product_info.row .info_area {
	min-width: 0;
	margin-top: 0;
	padding-top: 12px;
	padding-right: 8px;
	line-height: 16px;
}
.product_list.product_info.row .info_area .brand {
	margin: 0 0 2px;
	font-size: 12px;
}
.product_list.product_info.row .info_area .product {
	margin-top: 0;
	font-size: 12px;
}
.product_list.product_info.row .price_wrap {
	margin-top: 4px;
}
.main_div .btn_pagination {
	position: absolute;
	display: flex;
	height: 32px;
	top: -48px;
	right: var(--mainPadding);
	border: 1px solid var(--line-color-gray01);
	border-radius: 2px;
	background: var(--bg-color-white);
}
.main_div .btn_pagination div {
	position: static;
	text-indent: -9999px;
	margin: 0;
	min-width: 30px;
	width: 30px;
	height: 30px;
	font-size: 0;
}
.main_div .btn_pagination div:after {
	font-size: 13px;
	text-indent: 0;
	margin: 0;
}
.main_div .btn_pagination div + div {
	border-left: 1px solid var(--line-color-gray01);
}
.main_div
	.btn_pagination:has(
		.swiper-button-prev.swiper-button-disabled
			+ .swiper-button-next.swiper-button-disabled
	) {
	display: none;
}
.main_div .swiper-pagination {
	position: relative;
	height: 1px;
	margin-top: 25px;
	background: var(--bg-color-gray02);
}
.main_div .swiper-pagination-progressbar-fill {
	height: 2px;
	margin-top: -1px;
}
.main_div .brand_top .brand_img {
	position: relative;
	display: block;
}
.main_div .brand_top .brand_img:before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
}
.main_div .brand_top .brand_img .brand_tit {
	position: absolute;
	display: -webkit-box;
	width: 100%;
	top: 50%;
	left: 0;
	font-size: var(--font-tit);
	line-height: 1.14;
	letter-spacing: -0.084px;
	word-break: auto-phrase;
	color: var(--txt-color-white);
	text-align: center;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transform: translate(0, -50%);
	overflow: hidden;
}
/* h5(영문명)/p(국문명) — BR_BN(Task 15)/A_AD(Task 17)가 실제 퍼브처럼
   `.brand_tit` 안에 h5+p를 쓴다(list.css:2129-2136). B_L(Task 6)은 이
   엘리먼트를 안 쓰므로 이 규칙은 B_L에 영향 없다. */
.main_div .brand_top .brand_img .brand_tit h5 {
	font-weight: inherit;
	font-size: inherit;
}
.main_div .brand_top .brand_img .brand_tit p {
	margin-top: 4px;
	font-size: 14px;
	line-height: 20px;
}
.main_div .brand_img .button_equal {
	position: absolute;
	top: 12px;
	right: 12px;
}
.main_div .brand_top .brand_txt {
	margin-top: 8px;
	padding-right: 32px;
	font-size: 12px;
	line-height: 16px;
	overflow: hidden;
}
.main_div .brand_top .toggle_txt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: none;
	text-overflow: ellipsis;
	overflow: hidden;
}
.main_div .brand_top .toggle_txt.show_more {
	height: 32px;
	-webkit-line-clamp: 2;
}
.main_div .brand_top .btn_more {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--txt-color-gray);
	text-decoration: underline;
	cursor: pointer;
}
/* `.tab_grid_wrap` 안에서 쓰이는 브랜드 히어로 전용 비율(퍼브 실측,
   list.css:2328) — BR_BN/A_AD 둘 다 이 래퍼를 쓰므로 여기서 공용으로 둔다. */
.main_div .tab_grid_wrap .brand_top .brand_img {
	aspect-ratio: 458 / 300;
}
.main_div.brand_l .swiper_type7 {
	margin: 0 var(--mainPadding);
	overflow: clip visible;
}
.main_div.brand_l .brand_img {
	aspect-ratio: 608 / 405;
}
.main_div.brand_l .product_list {
	display: grid;
	margin-top: 4px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 30px;
}
.main_div.brand_l .product_list.product_info.row .info_area .product {
	color: var(--txt-color);
}
.main_div.brand_l .product_list.product_info.row .thumb_area {
	width: 64px;
	padding-bottom: 85px;
}
.main_div.brand_l .product_list.product_info.row .info_area {
	padding-top: 8px;
}
/* `.swiper_type7`이 이미 좌우 `--mainPadding` 마진을 갖고 있어 공용 `right:
   var(--mainPadding)`를 그대로 쓰면 버튼이 카드 끝선에서 한 번 더 안쪽으로
   밀린다 — 이슈 리스트형(`.issue_list .btn_pagination`)과 같은 보정(QA 3번). */
.main_div.brand_l .btn_pagination {
	right: 0;
}

/* 이슈 리스트형 코너 "디스커버"(I_C, Task 8, 2026-09-17) — 소스:
   renewal.eqlstore.com list.css:2365-2372, 2687-2782(pub `.issue_list`/
   `.modal.pop_blur`/`.modal.issue_prd_list` 원본 규칙 그대로, 추가만 — 기존
   클래스명과 충돌 없음, grep 확인 완료). */
.modal.pop_blur {
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(80px);
	backdrop-filter: blur(80px);
}
.modal.pop_blur .modal_header h3 {
	padding: 18px 0;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.18px;
}
.main_div.issue_list .swiper_type7 {
	margin: 0 var(--mainPadding);
	overflow: clip visible;
}
.issue_list .swiper-slide .link_wrap {
	position: relative;
}
.issue_list .thumb_area .badge_wrap {
	top: 0;
	bottom: auto;
}
.issue_list .thumb_area .badge_wrap [class^='badge'] {
	height: 24px;
	font-size: 11px;
}
.issue_list .swiper-slide .thumb_area {
	margin-bottom: 0;
}
.issue_list .swiper-slide .thumb_area:before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.6) 80%,
		rgba(0, 0, 0, 1) 100%
	);
	opacity: 0.2;
	z-index: 1;
}
.issue_list .link_wrap .info_area.contents {
	position: absolute;
	display: flex;
	inset: auto 80px 0 0;
	padding: 24px 32px 24px 24px;
	flex-direction: column;
	z-index: 1;
}
.issue_list .info_area.contents .cont_tit {
	font-weight: inherit;
	font-size: var(--font-tit);
	line-height: 1.14;
	-webkit-line-clamp: 3;
	color: var(--txt-color-white);
}
.issue_list .info_area.contents .cont_subtit {
	font-weight: inherit;
	line-height: 20px;
	color: var(--txt-color-white);
}
.issue_list .contents_prd {
	position: absolute;
	display: flex;
	width: 56px;
	right: 24px;
	bottom: 24px;
	gap: 1px;
	flex-direction: column;
}
.issue_list .contents_prd > div {
	position: relative;
}
.issue_list .contents_prd .thumb {
	display: block;
	height: 75px;
}
.issue_list .contents_prd .prd_num {
	position: absolute;
	display: flex;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	justify-content: center;
	align-items: center;
	font-size: 12px;
	line-height: 16px;
	color: var(--txt-color-white);
}
.issue_list .btn_pagination {
	right: 0;
}
.modal.issue_prd_list {
	width: 540px;
	max-height: 720px;
}
.modal.issue_prd_list .content_scroll {
	padding: 0 20px 20px;
}
.modal.issue_prd_list .product_list.row {
	width: auto;
}
.modal.issue_prd_list .product_list .product {
	color: var(--txt-color);
	opacity: 0.5;
	-webkit-line-clamp: 1;
}
.modal.issue_prd_list .product_list .normal {
	color: var(--txt-color);
	opacity: 0.3;
}
/* 퍼블은 이 모달이 `.main_div.issue_list` 안에 있어 `.main_div .product_info
   .info_area .price_wrap` 가격 폰트 규칙(위 `.main_div .product_info`)을 받지만, wch는
   모달을 `.main_div` 밖에 렌더해 그 규칙이 닿지 않는다 — 현재가·할인율이 16px,
   정상가가 14px로 커졌다(QA 2번). 같은 값을 모달에 직접 지정한다. */
.modal.issue_prd_list .product_info .info_area .price_wrap > * {
	font-size: 14px;
	line-height: 18px;
}
.modal.issue_prd_list .product_info .info_area .price_wrap .normal {
	font-size: 12px;
	line-height: 16px;
}
.modal.issue_prd_list .product_info .info_area .price_wrap .current {
	margin-left: -1px;
}

/* 개인화 코너(AP_P, mock 전용, Task 9, 2026-09-17) — 소스: renewal.eqlstore.com
   list.css:75-90(`.product_info .badge_wrap`/`.button_equal` 기본 위치),
   2040-2230(`.main_div .swiper_type8`/`.product_info` 카드 크기·간격) 그대로.
   전부 `.main_div` 스코프라 V1(`.main_div` 클래스를 쓰지 않음)과 충돌 없음
   (grep 확인 완료 — `.main_div .swiper_type8`/`.main_div .button_equal`/
   `.main_div .product_info` 계열 선택자가 이 파일에 아직 없었음).

   [Fix round 1, 2026-09-17] `thumb_area`/`info_area` 두 규칙은 원래
   `.main_div .product_info ...`로 넓게 스코프되어 있었는데, 이 선택자가
   Task 6 `MainNewBrandLarge`(B_L)의 `.product_list.product_info.row`
   카드에도 후손으로 매치되어(둘 다 `.main_div` 하위) 카드 간격을 침범할
   위험이 있었다(리뷰 지적). 실측 결과 B_L은 `.product_list.product_info.row`
   전용 규칙(list.css:2120-2153, specificity 0,4,0)이 이 새 규칙(0,3,0)보다
   항상 이겨서 실제 회귀는 없었지만(computed style로 확인), 우연에 기대는
   상태였다. 이 컴포넌트만의 래퍼 클래스 `.main_div.recmon_personal`
   (퍼블 HTML 주석 "S: 260916 개인화 코너 .main_div.recmon_personal 로
   wrapper"에 명시된 이름 그대로, `MainNewPersonalized.svelte`가 실제로
   그 클래스를 붙임)로 스코프를 좁혀 향후 다른 `.product_info` 소비 모듈과의
   충돌 가능성 자체를 제거했다. */
.main_div .swiper_type8 {
	padding: 0 var(--mainPadding);
	overflow: clip visible;
}
.main_div .swiper_type8 .swiper-slide {
	width: calc((100% - 8px * 7) / 8);
	min-width: 200px;
}
/* 퍼블 원본은 `ico_equal_20.svg`/`ico_equal_20_on.svg`(20px 전용 SVG)를 쓰지만
   wch static 자산엔 그 파일이 없다(V1부터 있던 24px PNG 세트만 존재:
   `ico_equal_24.png`/`ico_equal_24_on.png`, icon_btn_etc.css의 기본
   `.button_equal`/`.button_equal:before`가 이미 그 자산과 `is_active` 토글
   opacity 메커니즘을 쓰고 있다 — 확인 완료). 없는 SVG를 새로 받기보다 크기만
   20px로 줄이고 기존 24px PNG를 그대로 재사용한다(`position`/`opacity`/
   `is_active` 전환은 기본 규칙에서 그대로 상속되므로 여기서 건드리지 않음). */
.main_div .button_equal {
	width: 20px;
	height: 20px;
	background: url(../image/icon/ico_equal_24.png) 0 0/100% no-repeat;
	/* 퍼블 `.button_equal`엔 `overflow:hidden`이 있다 — 글자를 `text-indent:-9999px`로
	   밀어내는 방식이라 이게 없으면 버튼이 오른쪽에 있는 슬라이드(상품 22개 이상)의
	   "좋아요" 글자가 왼쪽 끝 슬라이드 영역에 그려진다(QA 5·15번). 전역(V1 포함)
	   `.button_equal`은 건드리지 않고 V2 모듈 안에서만 맞춘다. */
	overflow: hidden;
}
.main_div .button_equal:before {
	width: 100%;
	height: 100%;
	background-image: url(../image/icon/ico_equal_24_on.png);
	background-size: 100% 100%;
}
.main_div.recmon_personal .thumb_area {
	margin-bottom: 0;
}
.main_div .product_info .badge_wrap [class^='badge'] {
	height: 18px;
	padding: 0 6px;
	font-size: 9px;
	align-items: center;
}
.main_div.recmon_personal .info_area {
	margin-top: 8px;
	padding-right: 16px;
	line-height: 16px;
}
.main_div .product_info .info_area .brand {
	margin: 0 0 2px;
	font-size: 12px;
}
.main_div .product_info .info_area .product {
	margin: 0;
	font-size: 12px;
	color: var(--txt-color-gray);
}
.main_div .product_info .info_area .badge_auto_list {
	margin-top: 4px;
}
.main_div .product_info .info_area .badge_auto_list li {
	height: 18px;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 9px;
	line-height: 18px;
}
.main_div .product_info:not(.row) .info_area .price_wrap {
	margin-top: 4px;
}
.main_div .product_info .info_area .price_wrap > * {
	font-size: 14px;
	line-height: 18px;
}
.main_div .product_info .info_area .price_wrap .normal {
	font-size: 12px;
	line-height: 16px;
}
.main_div .product_info .info_area .price_wrap .current {
	margin-left: -1px;
}

/* 상품 추천 코너(P_C, Task 10, 2026-09-17) — 소스: renewal.eqlstore.com
   EQL/PC/ia/assets/css/list.css:2331-2364(`.view_more_resize`/`.go_more`,
   "상품 더보기" 슬라이드). 카드 자체(thumb_area/badge_wrap/info_area/
   badge_auto_list/price_wrap)는 Task 9(개인화 코너)가 이미 넓게 스코프해 둔
   `.main_div .swiper_type8`/`.main_div .button_equal`/`.main_div .product_info
   .badge_wrap [class^='badge']`/`.main_div .product_info .info_area ...`
   규칙을 그대로 상속한다(퍼블 소스 자체가 두 섹션에서 같은 카드 마크업을
   반복 — 위 Task 9 주석의 실측 결과가 여기도 적용됨). 새로 추가가 필요한 건
   이 섹션에만 있는 "상품 더보기" 슬라이드와, Task 9의 `thumb_area`/`info_area`
   두 규칙처럼 래퍼별로 갈라둔 여백 값뿐이다.

   [Task 9 교훈 재확인] `thumb_area`/`info_area` 여백 규칙은 Task 9에서
   `.main_div .product_info ...`로 넓게 잡았다가 B_L(`.product_list.product_info.row`)
   과 우연히 충돌하지 않았을 뿐이라는 게 드러나 `.main_div.recmon_personal`
   전용으로 좁힌 전례가 있다 — 이번에도 처음부터 이 컴포넌트의 래퍼 클래스
   `.main_div.recom_prd`(퍼블 HTML 주석 "S: 260916 상품 추천 코너(캐러셀)
   추가"에서 `MainNewRecommendProduct.svelte`가 실제로 붙이는 클래스)로만
   스코프해 Task 6/9와 넓은 선택자로 부딪힐 여지 자체를 없앤다. grep 확인
   완료 — 이 파일에 `.main_div.recom_prd` 선택자가 이전에 없었음. */
.main_div.recom_prd .thumb_area {
	margin-bottom: 0;
}
.main_div.recom_prd .info_area {
	margin-top: 8px;
	padding-right: 16px;
	line-height: 16px;
}
.main_div .swiper .swiper-slide.view_more_resize {
	width: 80px !important;
	min-width: auto;
}
.main_div .view_more_resize .thumb_area {
	padding: 0;
	background: none;
}
.main_div .go_more {
	width: 80px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 14px;
}
.main_div .go_more:before {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	background: var(--bg-color-black);
	mask: url(../image/icon/ico_arrow_circle.svg) 0 0/100% no-repeat;
	margin-bottom: 6px;
}
.main_div .swiper_type8 .view_more_resize .thumb_area {
	height: calc(max((((100vw - 79px) - 8px * 7) / 8), 200px) * 1.333);
	max-height: 407px;
}

/* 키워드 추천(키워드형, K_K, Task 11, 2026-09-17) — 소스: renewal.eqlstore.com
   EQL/PC/ia/assets/css/list.css:2783-2827(`.recom_keyword.key_link` 검정
   배경 섹션, 쉼표로 이어 붙는 `.link_list .btn` 탭, 카드 텍스트 색 반전).
   퍼블 원문을 그대로 옮겼다 — 셀렉터가 이미 `.recom_keyword`/`.key_link`
   전용이라 이 파일의 다른 규칙과 겹치지 않는다(grep 확인 완료, 위 두
   클래스명이 이 파일에 이전엔 없었음). `.black_box .link_list`(1310행대,
   브랜드 캐러셀 쪽 검정 박스)와 이름은 비슷하지만 상위 클래스가 달라(
   `.black_box` vs `.recom_keyword`) 서로 매치되지 않는다.

   카드 자체(thumb_area/badge_wrap/info_area/badge_auto_list/price_wrap/
   button_equal/swiper_type8/go_more)는 Task 9/10이 이미 넓게 스코프해 둔
   `.main_div .swiper_type8`/`.main_div .product_info ...` 규칙을 그대로
   상속한다(퍼블 소스가 여러 섹션에서 같은 카드 마크업을 반복 — Task 9/10
   주석의 실측 결과가 여기도 적용됨). `MainNewKeywordImage.svelte`는 Swiper
   내부 wrapper에 커스텀 클래스를 못 붙이는 제약(Task 9/10과 동일 근거) 때문에
   `.product_info`를 Swiper를 감싸는 별도 div에 붙인다 — 그래서 아래
   `.recom_keyword.key_link .product_info ...` 규칙이 요구하는 "product_info가
   key_link의 자손"이라는 조건이 성립한다(같은 엘리먼트에 두 클래스를 합쳐
   버리면 자손 결합자가 매치하지 않아 이 규칙이 죽는다 — 실제로 확인하고
   피한 함정). */
.recom_keyword.key_link {
	padding: 80px 0;
	background: var(--bg-color-black);
	color: var(--txt-color-white);
	--swiper-navigation-color: var(--line-color-white);
}
.recom_keyword .link_list {
	display: flex;
	margin-bottom: 40px;
	padding: 0 127px 0 var(--mainPadding);
	flex-wrap: wrap;
	gap: 12px 24px;
}
.recom_keyword .link_list .btn {
	opacity: 1;
}
.recom_keyword .link_list .btn span {
	font-weight: 400;
	font-size: 48px;
	line-height: 54px;
	letter-spacing: -1px;
	color: var(--txt-color-gray);
}
.recom_keyword .link_list .btn:not(:last-child) span:after {
	content: ',';
}
.recom_keyword .link_list .btn.is_active span {
	color: var(--txt-color-white);
}
.recom_keyword.key_link .go_more:before {
	background: var(--bg-color-white);
}
.recom_keyword.key_link .product_info .brand,
.recom_keyword.key_link .product_info .price_wrap .current {
	color: var(--txt-color-white);
}
.recom_keyword.key_link .product_info .product,
.recom_keyword.key_link .product_info .badge_auto_list li {
	color: var(--txt-color-gray01);
}
.recom_keyword.key_link .btn_pagination {
	background: var(--bg-color-black);
	border-color: #808080;
}

/* 키워드 추천(그리드형, K_X, Task 12, 2026-09-17) — 소스: renewal.eqlstore.com
   EQL/PC/ia/assets/css/list.css:2302-2330(`.main_div .tab_grid_wrap` 그리드
   레이아웃), icon_btn_etc.css:1131-1160(`.tab_style8`/`.tab_btn` 세로 스크롤
   탭 리스트 — 이 파일엔 원래 없어 새로 옮김, wch icon_btn_etc.css에도
   `.tab_style8` 자체가 없었다는 걸 확인했다 — grep 결과, V1도 이 클래스명을
   쓰지 않는다). `.recom_keyword.key_grid`엔 검정 배경 같은 전용 테마 규칙이
   퍼블에 아예 없다(K_K의 `.recom_keyword.key_link`와 달리) — grep 결과
   `key_grid`를 셀렉터로 쓰는 규칙이 pub list.css에 하나도 없음. 그래서
   `.recom_keyword`/`.key_grid` 스코프 규칙은 추가하지 않고(불필요), 탭
   그리드 레이아웃 자체만 `.main_div .tab_grid_wrap`으로 새로 추가한다 — 이
   selector는 B_L/브랜드 계열이 나중에(Task 15 등) 같은 그리드 구조를 쓸 때도
   재사용될 수 있는 공용 레이아웃 클래스라 K_X 전용으로 좁히지 않았다(퍼블
   원본도 `.main_div .tab_grid_wrap`으로 넓게 잡혀 있고, `brand`/`brand_new`
   전용 오버라이드는 별도 셀렉터로 얹는 방식 — 이 파일엔 아직 그 모듈들이
   없어 지금은 K_X 하나만 이 규칙을 쓴다).

   상품 카드 자체(thumb_area/badge_wrap/info_area/badge_auto_list/price_wrap/
   button_equal)는 Task 9/10/11이 이미 넓게 스코프해 둔 `.main_div
   .swiper_type8`/`.main_div .product_info ...`/`.main_div .button_equal`
   규칙을 그대로 상속한다(퍼블 소스가 여러 섹션에서 같은 카드 마크업을
   반복). `MainNewKeywordGrid.svelte`는 `swiper_type8`과 `product_info`를 같은
   엘리먼트(Swiper 컴포넌트의 `class` prop)에 함께 붙인다 — K_K와 달리 여기는
   "product_info가 key_grid의 자손이어야" 하는 규칙 자체가 없으므로(위 문단)
   같은 엘리먼트에 합쳐도 깨질 선택자가 없다(실측 확인: `.main_div
   .product_info ...` 계열은 전부 `.main_div`만 조상이면 매치, product_info가
   `.tab_grid_wrap`의 자손이기만 하면 되고 `.tab_grid_wrap` 자신과 같은
   엘리먼트일 필요는 없다). */
.main_div .tab_grid_wrap {
	display: grid;
	padding: 0 var(--mainPadding);
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 24px 8px;
}
.main_div .tab_grid_wrap .tab_style8 {
	aspect-ratio: 1/1;
	width: 100%;
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: 4px;
	overflow: hidden auto;
	--tab-active-bg: var(--bg-color-black);
}
.main_div .tab_grid_wrap .tab_style8 .tab_btn {
	height: 28px;
	padding: 4px 8px;
	background: var(--bg-color-white);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--txt-color-gray03);
	flex-shrink: 0;
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
	overflow: hidden;
}
.main_div .tab_grid_wrap .tab_style8 .tab_btn:hover,
.main_div .tab_grid_wrap .tab_style8 .tab_btn.is_active {
	background: var(--tab-active-bg);
	color: var(--txt-color-white);
}
.main_div .tab_grid_wrap .swiper_type8 {
	margin-right: -32px;
	padding-left: 0;
	width: calc(100% + var(--mainPadding));
}
.main_div .tab_grid_wrap .tab_style8 + .swiper_type8 {
	grid-column: 2/9;
}
.main_div .tab_grid_wrap .tab_style8 + .swiper_type8 .swiper-slide {
	width: calc((100% - 8px * 6) / 7);
}
/* 2026-09-21 리뷰 수정(Task 15/17 회고 리뷰) — 퍼블 list.css:2312에 있는
   `.main_div .tab_grid_wrap .brand_top{grid-column:2/4}`가 wch엔 아예
   없었다. `.brand_top .brand_img` 같은 자손 규칙만 옮기고 `.brand_top`
   자신의 그리드 배치는 빠뜨린 것 — 이 규칙이 없으면 `.tab_style8`(1번
   컬럼, 암묵적 auto-placement)과 `.brand_top`이 같은 셀을 다투게 된다.
   BR_BN(`MainNewBrandNew.svelte`)과 A_AD(`MainNewAutoRecommendBrand.svelte`)
   둘 다 `tab_style8 → brand_top → (product_info|swiper_type8)` 순서로 같은
   마크업을 쓰므로(두 파일 실측 비교 완료) 이 규칙 하나로 둘 다 해결된다.
   `.tab_style8 + .swiper_type8{grid-column:2/9}`(바로 위 규칙)는 DOM에서
   `tab_style8`의 다음 형제가 `swiper_type8`인 경우에만 매치한다 — BR_BN/
   A_AD는 `brand_top`이 그 사이에 끼어 있어 이 인접 형제 선택자가 매치하지
   않는다(퍼블 원본도 마찬가지 구조라 grid-column:2/9 상당의 규칙이
   존재하지 않는다 — grep 확인, `.brand_top + .swiper_type8`류 선택자가
   퍼블에 없다). 대신 8열 그리드의 auto-placement가 `tab_style8`(1열) →
   `brand_top`(2/4 고정) → 그 다음 형제(`product_info`의 li들, 또는
   swiper_type8)를 남은 4~9열에 순서대로 채워 넣는다 — BR_BN은
   `product_info`가 `display:contents`(finding #1 수정으로 추가)라 각
   `<li>`가 이 grid의 직계 아이템이 되어 자연스럽게 4번 컬럼부터 이어
   붙는다. A_AD는 `swiper_type8`이 실제 캐러셀(단일 grid item)이라 4번
   컬럼 1칸에만 auto-placement되는데, 이는 퍼블 원본 자체의 한계이자 이미
   보유한 `width:calc(100% + var(--mainPadding))`/음수 margin으로 시각적
   너비를 넓히는 방식과 동일하다(퍼블도 이 조합으로 렌더한다 — 그리드
   트랙 자체는 좁아도 overflow로 캐러셀이 넓게 보인다, 브라우저 확인
   완료). */
.main_div .tab_grid_wrap .brand_top {
	grid-column: 2/4;
}

/* 타임 특가(T_D, Task 13, 2026-09-17) — 소스: renewal.eqlstore.com
   EQL/PC/ia/assets/css/list.css:2828-2834(`.main_div.timesale_warp` 전용
   오버라이드 — `align-items:start`, 활성 탭 배경을 포인트 컬러로). 탭 그리드
   레이아웃/상품 카드 자체는 K_X(Task 12, 바로 위 블록)가 이미 넓게 스코프한
   `.main_div .tab_grid_wrap`/`.main_div .swiper_type8`/`.main_div
   .product_info ...`/`.main_div .button_equal`/`.main_div .view_more_resize`
   규칙을 그대로 상속한다(퍼블 마크업이 K_X와 완전히 같은 탭+카드 구조를
   반복 — "+Tab" 변형뿐 아니라 탭 없는 "일반" 변형도 같은 `.swiper_type8`/
   `.product_info` 카드를 쓴다). 이 모듈만의 전용 규칙은 퍼블이
   `.main_div.timesale_warp`로 좁게 잡아둔 것과 타이머 일(day) 칸 간격뿐이라
   Task 6(B_L)이 겪은 `.product_info` 광역 선택자 충돌 같은 위험은 없다(카드
   여백 자체를 재정의하지 않는다).

   `.main_div .tit_area`(Task 3, `align-items:center`)가 이 모듈에도
   상속되므로 퍼블처럼 위쪽 정렬(`align-items:start`)로 되돌린다. 활성 탭
   배경은 K_X 기본값 `--tab-active-bg: var(--bg-color-black)`(바로 위
   `.tab_style8` 규칙, 원본은 icon_btn_etc.css:1137)을 포인트 컬러로 덮어써
   K_X와 다른 톤을 낸다(퍼블 실측 확인 — 탭+카드 마크업은 같아도 활성 탭
   색만 다르다, `--tab-active-bg`는 CSS 커스텀 프로퍼티라 이 스코프에서
   재선언하면 `.tab_btn.is_active`의 `background: var(--tab-active-bg)`
   규칙을 고치지 않고도 값만 바뀐다).

   타이머 일(day) 칸 뒤 구분자는 콜론이 아니라 여백이다 — `.main_new
   .main_div .timer .timer_hrs ~ div:before`(Task 4, 쿠폰과 공유하는 규칙)가
   시:분:초 사이에만 콜론을 붙이는 게 이미 wch 공통 규칙이라(쿠폰의
   `.main_div.coupon .timer .timer_day {margin-right:10px}`와 같은 이유 — 퍼블
   원본 정적 페이지는 `.main_new` 래퍼 자체가 없어 구버전 콜론 규칙
   (`.timesale_warp .tit_area .timer div ~ div:before`, 위쪽 "메인
   타임특가구좌 신규" 블록)이 그대로 보이지만, 실제 wch 렌더에는 `.main_new`
   래퍼가 있어(`MainNewPage.svelte`의 `.container.main.main_new`) 저
   selector(0,4,1)가 구버전(0,3,1)보다 항상 이긴다 — grep+specificity 확인
   완료, 추측 아님). 구버전 규칙의 원래 여백값(`margin-right:6px`)을 그대로
   옮겨 콜론 대신 그 자리를 채운다. */
.main_div.timesale_warp .tit_area {
	align-items: start;
}
.main_div.timesale_warp .tab_style8 {
	--tab-active-bg: var(--bg-color-point);
}
.main_div.timesale_warp .timer .timer_day {
	margin-right: 6px;
}

/* 많이 본 상품(랭킹, R_D/R_none/R, Task 14, 2026-09-17) — 소스: renewal.
   eqlstore.com EQL/PC/ia/assets/css/list.css:2014-2017(`.main_div .tit_area
   .main_top_desc` — grep 확인 결과 wch엔 아직 없었다, Task 3이 `.tit_area`/
   `.tit_lv4`만 옮기고 이 보조텍스트 규칙은 옮기지 않았다. 처음 쓰는 이
   태스크에서 범용으로 추가한다)·2232-2253(`.main_div .rank_icon` — 범용,
   up/down 화살표는 `:after` 콘텐츠로 붙는다)·2836-2851(`.main_div.mostview
   .prd_rank`/`.product_info .info_area`, 원본 그대로).
   탭+카드 그리드 레이아웃 자체(`tab_grid_wrap`/`tab_style8`/`swiper_type8`/
   `product_info`)는 K_X(Task 12)·T_D(Task 13)가 이미 넓게 스코프해 둔
   `.main_div .tab_grid_wrap`/`.main_div .swiper_type8`/`.main_div
   .product_info ...`/`.main_div .button_equal`/`.main_div .view_more_resize`
   규칙을 그대로 상속한다(퍼블 마크업이 세 모듈 모두 같은 탭+카드 구조를
   반복) — T_D가 남긴 `.main_div.timesale_warp` 전용 오버라이드(활성 탭
   색·`tit_area` 정렬)는 이 모듈엔 해당하지 않아(퍼블이 `.mostview`를 T_D와
   다른 기본 톤으로 그린다, 활성 탭 배경 재정의 없음) 복사하지 않는다.

   `.main_top_desc`/`.rank_icon`은 이 태스크 전까지 어떤 모듈도 쓰지 않던
   범용 클래스라 Task 6/9/10/11/12/13과 충돌 위험이 없다(grep 확인) —
   `.main_div .tit_area .main_top_desc`/`.main_div .rank_icon`으로 넓게 두어도
   안전하다(원본 소스도 같은 폭으로 잡혀 있다, 다른 모듈이 이 클래스를 쓸
   일이 생기면 자연히 공유된다). `.main_div.mostview .prd_rank`는 이 모듈
   전용 클래스(`.mostview`)로 좁혀서 원본을 그대로 옮긴다. */
.main_div .tit_area .main_top_desc {
	font-size: 14px;
	color: var(--txt-color-gray);
}
.main_div .rank_icon {
	display: inline-flex;
	height: 14px;
	font-size: 11px;
	line-height: 14px;
	gap: 2px;
}
.main_div .rank_icon:after {
	font-size: 8px;
	line-height: 16px;
}
.main_div .rank_icon.down:after {
	content: '▼';
}
.main_div .rank_icon.up {
	color: var(--txt-point);
}
.main_div .rank_icon.up:after {
	content: '▲';
}
.main_div .rank_icon.new {
	font-weight: 400;
	font-size: 10px;
	font-family: 'Pretendard';
}
.main_div.mostview .prd_rank {
	display: flex;
	margin-top: 8px;
	font-weight: 500;
	gap: 6px;
	align-items: center;
}
.main_div.mostview .prd_rank .rank {
	font-size: 20px;
	line-height: 27px;
}
.main_div.mostview .prd_rank .rank_icon {
	flex-direction: row-reverse;
}
.main_div.mostview .product_info .info_area {
	margin-top: 4px;
}

/* 신규 브랜드 소개(BR_BN, Task 15) — 2026-09-18 재작업: 퍼브 원본이 실제로
   열려서(`renewal.eqlstore.com-P2_EQL_DEV_pubwork/EQL/PC/ia/`) 이전 세션이
   지어낸 `.tab_style_brand`/`.brand_new`-스코프 히어로 규칙을 걷어냈다.
   탭 그리드(`.tab_grid_wrap`/`.tab_style8`)는 K_X(Task 12)가 이미 넓게
   스코프해 둔 걸 그대로 쓰고, 히어로(`.brand_top .brand_img`/`.brand_tit`
   h5/p, `.brand_txt`/`.toggle_txt`/`.btn_more`)는 방금 위 2200행대 블록에
   퍼브 실측값 그대로 범용으로 옮겨 A_AD(Task 17, 같은 구조 재사용)와
   공유한다 — 이 모듈 전용으로 남는 건 캐러셀 썸네일 폴백뿐이다.

   2026-09-21 리뷰 수정(CRITICAL) — 상품 리스트는 캐러셀이 아니라 정적
   그리드였다(`MainNewBrandNew.svelte`의 같은 날짜 주석 참고). 퍼브
   (`list.css:2854-2861,3037-3039`)는 `.product_info` 자체를
   `display:contents`로 지워 각 `<li>`가 `.tab_grid_wrap`의 grid item이
   되게 한다 — `.brand_top`이 2~4번 컬럼을 차지하고 남은 4~9번 컬럼부터
   상품 카드가 이어진다. 아래 세 규칙을 그대로 옮기고, 썸네일 폴백 선택자는
   더 이상 존재하지 않는 `.swiper_type8`이 아니라 `.product_info`로
   고친다(마크업에서 Swiper 클래스를 걷어냈으니 이 선택자도 같이 바꿔야
   폴백 배경이 계속 적용된다). */
.main_div.brand_new .tab_grid_wrap .product_info {
	display: contents;
}
.main_div.brand_new .tab_grid_wrap .product_info li {
	width: 100%;
	margin: 0;
}
.main_div.brand_new .product_info .info_area .product {
	color: var(--txt-color);
}
.main_div.brand_new .product_info .thumb_area {
	margin-bottom: 0;
}
.main_div.brand_new .product_info .thumb_wireframe {
	display: block;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(
		45deg,
		#eee,
		#eee 10px,
		#f7f7f7 10px,
		#f7f7f7 20px
	);
}
/* A_AD(Task 17, `.main_div.recom.brand`)는 BR_BN과 같은 `tab_style8 →
   brand_top → (product_info|swiper_type8)` 마크업을 쓰지만, 상품 목록은
   진짜 Swiper 캐러셀이다(display:contents가 아니다) — 퍼브
   (`list.css:2999-3002`)가 `.swiper_type8` 자체에 `grid-column:4/9`를 줘서
   `brand_top`(2/4) 다음 남은 4~9번 컬럼 전체를 캐러셀 트랙으로 쓴다.
   `.tab_style8 + .swiper_type8{grid-column:2/9}`(K_X가 이미 옮겨 둔 일반
   규칙)는 여기서 매치하지 않는다 — DOM에서 `tab_style8`의 바로 다음
   형제는 `brand_top`이지 `swiper_type8`이 아니기 때문이다(퍼브도 같은
   이유로 `.main_div.brand` 전용 규칙을 별도로 둔다). */
.main_div.brand .tab_grid_wrap .swiper_type8 {
	grid-column: 4/9;
}
.main_div.brand .tab_grid_wrap .swiper_type8 .swiper-slide {
	width: calc((100% - 8px * 4) / 5);
	min-width: auto;
}
/* 퍼블은 `width < 1600px`에서 `.tab_grid_wrap`을 8열→6열로 줄이는
   반응형 규칙(`list.css:3025-3039`)도 갖고 있지만, wch는 K_X(Task 12)부터
   지금까지 그 반응형 리플로우 자체를 옮긴 적이 없다(`.main_div
   .tab_grid_wrap`이 wch엔 8열 고정 — grep 확인). 이 모듈만 6열 기준
   좌표(`grid-column:4/7` 등)를 추가하면 wch의 실제 8열 그리드와 어긋나
   오히려 깨진다 — 8열 반응형 포팅은 이 리뷰 수정 범위 밖이라 추가하지
   않는다(별도 이슈로 남겨 둔다). */

/* 브랜드 이퀄 랭킹(BR_BE) + 브랜드 검색 순위(BR_BS, Task 16) — 2026-09-18
   재작업: 퍼브 원본(`renewal.eqlstore.com-P2_EQL_DEV_pubwork/EQL/PC/ia/`,
   EQL_PC_MA_100_v2.html:6536-6851 + list.css:2233-2961)을 실제로 대조한
   결과 이전 세션의 "BE/BS는 완전히 같은 리스트 모양" 전제가 틀렸다 —
   `.main_div .brand_rank_list` 공유 규칙을 전부 지우고 퍼브 실제 선택자로
   다시 쓴다.

   두 모듈은 퍼블에서 `.main_grid`(부모 flex 컨테이너, MainNewPage.svelte가
   두 컴포넌트를 나란히 렌더하도록 감싸는 건 후속 작업 — 지금은 각자
   `width`/`flex`로 자기 폭만 잡는다) 안에 나란히 놓인다.

   브랜드 이퀄: 썸네일 없음, `.rank`/`.info_area`/`.equal_area`(좋아요+
   순위변동값)만 있다. `.rank_icon`은 R_D(Task 14)가 이미 범용으로 옮겨 둔
   CSS를 그대로 쓴다(재정의 없음).

   브랜드 검색 순위: 썸네일 있고, 항목마다 대표상품 아코디언
   (`.brand_prd_list`)이 딸린다 — 기본은 접힘(`max-height:0`), `li.is_active`
   일 때만 펼쳐진다(`MainNewBrandSearch.svelte`의 클릭 토글과 짝). */
/* 퍼블 원본: 두 모듈은 `.main_grid`(display:flex, gap:16px) 안에 나란히
   놓인다 — `MainNewPage.svelte`가 이 클래스로 감싼다. `.main_grid`가 이미
   좌우 여백(`var(--mainPadding)`)을 갖고 있어 안쪽 `.tit_area`는 여백을
   다시 주지 않는다(list.css:2299 원본과 동일).

   2026-09-21 리뷰 수정: 여기서 `.main_grid`/`.main_grid .main_div`/
   `.main_grid .tit_area`를 다시 선언했었는데, Task 4(1901행대) 주석이
   명시적으로 "쿠폰+마케팅 공유 래퍼라 다른 모듈도 그대로 쓴다 — 새로
   추가하지 말 것"이라고 적어 둔 바로 그 규칙과 완전히 중복이었다(값도
   `margin-top:120px`만 빠졌을 뿐 나머지는 동일 — BR_BE/BR_BS 전용으로 다른
   값이 필요했던 게 아니다). 중복 선언을 지우고 1901행대 원본 하나만 남긴다
   — BR_BE/BR_BS도 그 규칙을 그대로 상속받는다(margin-top:120px 포함, 앞
   모듈과의 간격이 다른 `.main_grid` 행과 같아야 자연스럽다). */
.main_div.brand_equal {
	width: 36.645%;
	flex-shrink: 0;
}
.main_div.brand_equal .brand_equal_wrap {
	padding-right: min(17%, 117px);
}
.main_div.brand_equal .brand_list {
	display: flex;
	flex-direction: column;
	align-items: start;
}
.main_div.brand_equal .brand_list > li {
	position: relative;
	display: flex;
	width: 100%;
	gap: 16px;
	align-items: center;
}
.main_div.brand_equal .brand_list .link_wrap {
	display: flex;
	flex: 1;
	gap: 16px;
	align-items: center;
	overflow: hidden;
}
.main_div.brand_equal .brand_list .rank {
	flex-shrink: 0;
	width: 16px;
	font-size: var(--font-tit);
	line-height: 1.14;
}
.main_div.brand_equal .info_area .brand {
	overflow: hidden;
	font-size: var(--font-tit);
	line-height: 1.14;
	letter-spacing: -0.28px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.main_div.brand_equal .info_area .product {
	margin-top: 2px;
	font-size: 12px;
	color: var(--txt-color-gray03);
}
.main_div.brand_equal .brand_list .equal_area {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 40px;
	flex-shrink: 0;
	gap: 4px;
}
.main_div.brand_equal .brand_list .equal_area .button_equal {
	position: relative;
	margin-top: 0;
}
.main_div.brand_equal .tit_btn {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	line-height: 24px;
}

.main_div.brand_search {
	flex: 1;
}
.main_div.brand_search .brand_list {
	display: flex;
	flex-direction: column;
	align-items: start;
}
.main_div.brand_search .brand_list > li {
	display: flex;
	flex-direction: column;
	align-items: start;
	width: 100%;
	gap: 0;
}
.main_div.brand_search .brand_info {
	display: flex;
	width: 100%;
	gap: 16px;
}
.main_div.brand_search .brand_info .link_wrap {
	display: flex;
	flex: 1;
	gap: 16px;
	align-items: center;
	overflow: hidden;
	cursor: pointer;
}
.main_div.brand_search .brand_info .rank {
	flex-shrink: 0;
	width: 16px;
	font-size: var(--font-tit);
	line-height: 1.14;
}
.main_div.brand_search .brand_info .thumb_area {
	position: relative;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 50%;
}
.main_div.brand_search .brand_info .thumb,
.main_div.brand_search .brand_info .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main_div.brand_search .brand_info .thumb_fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #e0e0e0;
	color: #525252;
	font-size: 18px;
	font-weight: 700;
}
.main_div.brand_search .brand_info .brand {
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.main_div.brand_search .brand_info .product {
	overflow: hidden;
	margin-top: 2px;
	font-size: 12px;
	color: var(--txt-color-gray03);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.main_div.brand_search .brand_info .button_equal {
	position: relative;
}
.main_div.brand_search .brand_prd_list {
	display: grid;
	width: 100%;
	max-height: 0;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.4s, opacity 0.3s, padding 0.4s;
}
.main_div.brand_search .brand_prd_list li {
	position: relative;
	display: block;
}
.main_div.brand_search .brand_prd_list a {
	position: relative;
	display: block;
	height: 0;
	padding-bottom: 133.33%;
	background-color: var(--bg-color-gray02, #f2f2f2);
}
.main_div.brand_search .brand_prd_list .thumb,
.main_div.brand_search .brand_prd_list .thumb_wireframe {
	position: absolute;
	inset: 0;
}
.main_div.brand_search .brand_prd_list .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main_div.brand_search .brand_prd_list .thumb_wireframe {
	background-image: repeating-linear-gradient(
		45deg,
		#eee,
		#eee 10px,
		#f7f7f7 10px,
		#f7f7f7 20px
	);
}
.main_div.brand_search .brand_prd_list .button_equal {
	position: absolute;
	top: 12px;
	right: 12px;
	margin-top: 0;
}
.main_div.brand_search .brand_search_list li.is_active .brand_prd_list {
	max-height: max(225px, 19vw);
	padding: 16px 0;
	opacity: 1;
}

/* 자동 추천 5종(A_AC 크로스셀링 · A_AD 브랜드 디스커버 · A_AS 품절임박 ·
   A_AR 재입고 · A_AO 판매예정, Task 17) — 2026-09-18 재작업: 퍼브 원본
   (`renewal.eqlstore.com-P2_EQL_DEV_pubwork/EQL/PC/ia/`)이 이 세션에서
   실제로 열려서, 이전 세션이 "선택자 없음"이라 추측하고 새로 지어냈던
   `.tit_tooltip`/`.btn_tit_info`/`.base_product` 규칙을 걷어내고 실제 퍼브
   구조로 다시 맞춘다(`list.css:2018-2032`/`:2964-2973`, `ui_common.css:
   951-1040`의 진짜 선택자 확인).

   타이틀 옆 툴팁은 `.main_div .tit_area .tooltip`(퍼브 진짜 선택자, 위치만
   지정 — 아이콘/열림 토글은 `ui_common.css`의 공용 `.tooltip`/`.btn_info`/
   `.tooltip_body`/`.is_active`가 이미 처리한다, 새로 만들 필요 없었다).
   `ico_tooltip_18.svg`(퍼브 전용 18px 아이콘)는 이 저장소에 없어 공용
   20px 아이콘(`ico_tooltip.png`)으로 대체한다 — 크기만 다르고 동작은 같다.

   크로스셀링(A_AC)만 기준상품+캐러셀을 `.recom_wrap`(8열 그리드, 기준상품
   1열+캐러셀 2~8열)으로 감싼다 — 퍼브가 이 변형에만 쓰는 래퍼다(다른 3종은
   `.swiper_type8`이 `.main_div` 바로 아래). */
.main_div .tit_area .tooltip {
	display: inline-flex;
	margin-top: 3px;
	vertical-align: top;
}
.main_div.cross_elling .recom_wrap {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 8px;
	padding: 0 var(--mainPadding);
}
.main_div.cross_elling .recom_wrap .product_info {
	margin: 0;
}
.main_div.cross_elling .recom_wrap .product_info:not(.swiper-wrapper) > li {
	width: 100%;
	margin: 0;
}
.main_div.cross_elling .recom_wrap .swiper_type8 {
	width: calc(100% + var(--mainPadding));
	margin-right: -32px;
	grid-column: 2 / 9;
	padding-left: 0;
}
.main_div.cross_elling .recom_wrap .swiper_type8 .swiper-slide {
	width: calc((100% - 8px * 6) / 7);
	min-width: auto;
}
.main_div.recom .thumb_wireframe {
	display: block;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(
		45deg,
		#eee,
		#eee 10px,
		#f7f7f7 10px,
		#f7f7f7 20px
	);
}
/* 브랜드 디스커버(A_AD) — 2026-09-18 재작업: 퍼브 원본 대조 결과 BR_BN과
   완전히 같은 `.tab_grid_wrap`/`.brand_top` 마크업이라(선택자 조상이 다르다는
   이전 판단은 틀렸다 — 실제로는 둘 다 `.main_div .tab_grid_wrap`/`.main_div
   .brand_top .brand_img` 상속을 받는 동일 구조), 탭·히어로 전용 CSS는 전부
   지우고 BR_BN이 범용으로 옮긴 규칙을 그대로 상속받게 한다. 이 모듈만의
   전용 규칙은 이미지 없는 브랜드의 이니셜 폴백뿐이다. */
.main_div.recom.brand .thumb_initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e0e0e0;
	color: #525252;
	font-size: 18px;
	font-weight: 700;
}

/* 260928 main-new: `.swiper`에 붙인 `.product_info` 무력화.
   퍼블은 `ul.swiper-wrapper.product_info`지만 swiper/svelte(v8)는 wrapper에
   클래스를 줄 수 없어 V2 컴포넌트는 `.swiper`에 붙인다. 그대로 두면
   `.product_info{display:flex;margin:0 -5px}`가 캐러셀 자체에 걸려 5px
   밀리고 폭이 넘친다. `:where()`로 우선순위를 `.product_info`와 같게 둬서
   퍼블의 더 구체적인 캐러셀 마진 규칙(크로스셀링 -32px 등)은 덮지 않는다.
   `.main_div`는 main-new 전용 클래스라 V1에 영향 없음. */
.main_div :where(.swiper.product_info) {
	display: block;
	margin: 0;
}

/* 260928 main-new: 퍼블 list.css 9/16 "[UI] PC 메인 개편" 갱신분 동기화.
   퍼블(renewal EQL/PC/ia/assets/css/list.css)에서 wch 사본에 없거나 값이 다른
   규칙 중, 선택자가 전부 main-new 전용 클래스(.main_div/.issue_list/.brand_equal/
   .main_swiper_top/.main_new 등 — V1 컴포넌트 사용 0건 확인)로 한정된 것만 옮겼다.
   기존 줄은 고치지 않고 같은 선택자를 뒤에 다시 선언해 덮어쓴다(append-only).
   전역 규칙(.product_info .thumb_area, .info_area .product 등)은 V1 화면에도
   걸리므로 옮기지 않았다. */
.main_swiper_top .thumb_title {
	position: absolute;
	display: flex;
	inset: 0;
	padding: 0 clamp(32px, 7.7%, 48px) clamp(40px, 9.61%, 60px);
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 60%,
		rgba(0, 0, 0, 0.2) 82%
	);
	flex-direction: column;
	justify-content: end;
	color: var(--txt-color-white);
	opacity: 0;
}
.is_dimmed .main_new {
	overflow: scroll;
}
.main_div .button_equal {
	width: 20px;
	height: 20px;
	background: url(../image/icon/ico_equal_20.svg) 0 0/100% no-repeat;
}
.main_div .button_equal:before {
	width: 100%;
	height: 100%;
	background: url(../image/icon/ico_equal_20_on.svg) 0 0/100% no-repeat;
}
.main_div .tit_area .tooltip .tooltip_body {
	left: 100%;
	margin-left: 5px;
	padding: 19px;
	border-radius: 2px;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}
.main_div .tit_area .tooltip .btn_info:before {
	width: 18px;
	height: 18px;
	background: url(../image/icon/ico_tooltip_18.svg) 0 0/100% no-repeat;
}
.main_div .swiper-slide {
	height: auto;
}
.main_div
	.btn_pagination:has(
		.swiper-button-prev.swiper-button-disabled
			+ .swiper-button-next.swiper-button-disabled
	) {
	display: none;
}
.main_div .brand_top .btn_more {
	display: flex;
	height: 16px;
	margin-top: 8px;
	font-weight: 400;
	font-size: 12px;
}
.main_div .brand_top .btn_more:before {
	content: '접기';
}
.main_div .brand_top .btn_more:after {
	content: '';
	width: 15px;
	height: 15px;
	margin-left: 2px;
	transform: rotate(180deg);
	background: url('../image/icon/ico_more.svg') right 0px top 50% no-repeat;
}
.main_div .toggle_txt.show_more ~ .btn_more:before {
	content: '더보기';
}
.main_div .toggle_txt.show_more ~ .btn_more:after {
	transform: rotate(0deg);
}
.main_div .product_info .thumb_area {
	margin-bottom: 0;
}
.main_div .product_info .info_area {
	margin-top: 8px;
	padding-right: 16px;
	line-height: 16px;
}
.main_div .brand_list {
	flex-direction: column;
	align-items: start;
}
.main_div .brand_list > li {
	width: 100%;
	gap: 16px;
}
.main_div .brand_list .link_wrap {
	flex: 1;
	gap: 16px;
}
.main_div .brand_list .rank {
	width: 16px;
	font-size: var(--font-tit);
	line-height: 1.14;
	flex-shrink: 0;
}
.main_div .brand_list .info_area {
	padding: 0;
}
.main_div .brand_list .info_area .product {
	margin-top: 2px;
	font-size: 12px;
	line-height: 16px;
}
.main_div .brand_list {
	row-gap: 16px;
}
.main_div
	.tab_grid_wrap
	.tab_style8
	+ .swiper_type8
	.view_more_resize
	.thumb_area {
}
.main_div.coupon .btn_sub_m {
	width: 100%;
	margin-top: 16px;
	border-color: var(--line-color-gray01);
}
.issue_list .swiper-slide .thumb_area:before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.6) 80%,
		rgba(0, 0, 0, 1) 100%
	);
	opacity: 0.2;
	z-index: 1;
}
.main_div.brand_equal .info_area .brand {
	font-weight: 400;
	font-size: var(--font-tit);
	line-height: 1.14;
	letter-spacing: -0.28px;
}
.brand_equal .brand_list .equal_area {
	display: flex;
	width: 40px;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}
.brand_equal .brand_list .equal_area .button_equal {
	position: relative;
	margin-top: 0;
	align-self: center;
}
.brand_equal .tit_btn {
	margin-top: 16px;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
}
.main_div.brand_search .brand_list {
	height: calc((66px * 5 + 32px) + ((100vw - 112px) * 0.125 * 1.33));
	min-height: 540px;
	overflow: visible;
}
.main_div.brand_search .brand_list .brand_info {
	display: flex;
	gap: 16px;
}
.main_div.brand_search .brand_list .thumb_area {
	width: 50px;
	height: 50px;
	min-width: 0;
}
.main_div.brand_search .brand_prd_list a {
	position: relative;
	display: block;
	height: 0;
	padding-bottom: 133.33%;
	background: var(--bg-color-gray02) url(../image/common/no_thum.png) 50% 50%/100%
		no-repeat;
}
.main_div.cross_elling .swiper_type8 {
	width: calc(100% + var(--mainPadding));
	margin-right: -32px;
	padding-left: 0;
	grid-column: 2 / 9;
}
.main_div.cross_elling .swiper_type8 .swiper-slide {
	width: calc((100% - 8px * 6) / 7);
	min-width: auto;
}
.main_div.brand .tit_area .brand_img {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	margin-right: 5px;
	vertical-align: top;
	overflow: hidden;
}
.main_div.brand .tit_area .brand_img img {
	border-radius: 50%;
}
.main_div.coming
	.swiper_type8:not(:has(.swiper-slide:nth-child(8)))
	.swiper-slide {
	width: calc((100% - 8px * 6) / 7);
}
@media (1440 <= width < 1920px) {
	.main_div.issue_shortcut .btn_round_box .btn_round .txt {
		font-size: 24px;
	}
}
@media (width < 1600px) {
	.main_div .swiper_type8 .swiper-slide {
		width: calc((100% - 8px * 5) / 6);
	}
}
@media (width < 1600px) {
	.main_div .swiper_type8 .view_more_resize .thumb_area {
		height: calc(max((((100vw - 79px) - 8px * 7) / 8), 200px) * 1.333);
	}
}
@media (width < 1600px) {
	.main_div .tab_grid_wrap,
	.main_div.cross_elling .recom_wrap {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}
@media (width < 1600px) {
	.main_div .tab_grid_wrap .tab_style8 + .swiper_type8,
	.main_div.cross_elling .swiper_type8 {
		grid-column: 2/7;
	}
}
@media (width < 1600px) {
	.main_div .tab_grid_wrap .tab_style8 + .swiper_type8 .swiper-slide,
	.main_div.cross_elling .swiper_type8 .swiper-slide {
		width: calc((100% - 8px * 4) / 5);
	}
}
@media (width < 1600px) {
	.main_div.brand_new .product_info > li:nth-child(n + 10) {
		display: none;
	}
}
@media (width < 1600px) {
	.main_div.brand .tab_grid_wrap .swiper_type8 {
		grid-column: 4/7;
	}
}
@media (width < 1600px) {
	.main_div.brand .tab_grid_wrap .swiper_type8 .swiper-slide {
		width: calc((100% - 8px * 2) / 3);
	}
}
/* 퍼블 ui_common.css의 전역 `.tooltip.tooltip_over:hover .tooltip_body`를 main-new로 한정해 옮긴다. */
.main_div .tooltip.tooltip_over:hover .tooltip_body {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}
/* 위 동기화로 `.main_div .product_info .badge_wrap [class^=badge]`(18px)가
   기존 이슈-캐러셀형 배지 규칙보다 뒤에 오게 돼 퍼블과 순서가 뒤집혔다 —
   퍼블처럼 이슈-캐러셀형 배지(24px)가 이기도록 다시 선언한다. */
.issue_list .thumb_area .badge_wrap [class^='badge'] {
	height: 24px;
	font-size: 11px;
}
/* 퍼블은 브랜드명 폭만큼만 차지해 좋아요 버튼이 이름 바로 옆에 붙는다.
   기존 V2 규칙(width:100%)은 버튼을 목록 오른쪽 끝으로 밀어낸다. */
.main_div.brand_search .brand_info {
	width: auto;
}
/* 기존 V2 규칙의 회색·밑줄은 퍼블에 없다(퍼블은 본문색, 밑줄 없음, 우측 화살표 아이콘). */
.main_div .brand_top .btn_more {
	color: var(--txt-color);
	text-decoration: none;
}

/* 260928 main-new: 메인 진입 시 헤더를 퍼블 header.blur_header(header.css:668)
   와 같게 만든다. V1 공용 헤더(src/routes/Header.svelte)는 이 클래스를 붙이는
   로직이 없어 V1 파일을 고치지 않고, MainNewPage.svelte가 붙이는
   body.main-new-dark 클래스로 바깥에서 덮어쓴다(#header id는 V1 헤더의
   고유 id, list.css는 main-new 전용 파일). 페이지를 벗어나면 클래스가
   빠지므로 다른 화면에는 전혀 영향이 없다. */
body.main-new-dark #header {
	height: 84px;
	padding: 44px 32px 0;
	border: none !important;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 1) 40px,
		rgba(0, 0, 0, 0) 40px,
		rgba(0, 0, 0, 0) 44px,
		rgba(0, 0, 0, 1) 44px
	);
}
body.main-new-dark #header .header_logo {
	position: absolute;
	height: auto;
	top: 0;
	left: 32px;
	padding: 0;
}
body.main-new-dark #header .header_logo a {
	width: 72px;
	height: 40px;
	background: url(../image/icon/header_logo.svg) 0 50%/100% no-repeat;
}
body.main-new-dark #header nav {
	height: 40px;
}
body.main-new-dark #header .gnb_depth00 {
	margin: 0;
	align-self: center;
	gap: 28px;
}
body.main-new-dark #header .gnb_depth00_item {
	line-height: 16px;
	color: var(--txt-color-white);
}
body.main-new-dark #header .gnb_depth00_item.on,
body.main-new-dark #header .gnb_depth00_item:hover {
	color: var(--txt-color-gray);
}
body.main-new-dark #header .gnb_content {
	top: 84px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: none;
	-webkit-backdrop-filter: blur(80px);
	backdrop-filter: blur(80px);
}
body.main-new-dark #header nav .util {
	position: absolute;
	top: 8px;
	right: 32px;
	gap: 24px;
}
body.main-new-dark #header nav .util li a {
	width: 24px;
	height: 24px;
	margin: 0;
}
body.main-new-dark #header nav .util li a.menu1 {
	background-image: url(../image/icon/ico_search_24.svg);
}
body.main-new-dark #header nav .util li a.menu2 {
	background-image: url(../image/icon/ico_my_24.svg);
}
body.main-new-dark #header nav .util li a.menu3 {
	background-image: url(../image/icon/ico_logout_24.svg);
}
body.main-new-dark #header nav .util li a.menu4 {
	background-image: url(../image/icon/ico_equal_24.svg);
}
body.main-new-dark #header nav .util li a.menu5 {
	background-image: url(../image/icon/ico_cart_24.svg);
}
body.main-new-dark #header nav .util li .util_tooltip {
	display: none;
}
/* V1 전역 `.container{padding-top:100px}`(ui_common.css)를 헤더 높이(84px)에 맞춘다.
   `.main_new`는 main-new 전용 클래스라 다른 `.container` 페이지에는 영향 없음. */
body.main-new-dark .container.main_new {
	padding-top: 84px;
}

/* 261002 QA 111: 상품 썸네일 비율(3:4) — 퍼블 list.css는 `.product_info .thumb_area`가 133.33%인데
   위의 V1 공용 규칙은 133%라 썸네일 높이가 모자랐다. 기존 줄은 고치지 않고 main-new(`.main_new`)에서만
   퍼블 값으로 맞춘다 — V1에는 `.main_new`가 없어 영향 없음.
   구체성을 원래 규칙과 같은 (0,2,0)으로 맞춰(`:where`) `.main_div .view_more_resize .thumb_area`(0)
   같은 더 구체적인 규칙이 계속 이기게 하고, 퍼블에서 따로 값을 주는 `.product_list`·`.brand_list`는 제외한다. */
:where(.main_new)
	.product_info:where(:not(:is(.product_list, .brand_list)))
	.thumb_area {
	padding-bottom: 133.33%;
}