@charset "utf-8";
/* ==========================================================================
   상품 목록 — PC(1024px~) 전용
   goods/goods_list.php · 토큰: gd_tokens.css
   모바일 화면은 건드리지 않는다 — 모든 규칙을 미디어쿼리 안에만 둔다.
   기능은 추가하지 않는다. 모바일에 있는 요소를 PC 폭에 맞게 재배치하는 것까지만.
   ========================================================================== */

@media (min-width: 1024px) {

    /* --------------------------------------------------------------------
       레이아웃 — 콘텐츠 폭 가운데 정렬
       -------------------------------------------------------------------- */
    .goods_list {max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2); margin:0 auto; padding:var(--space-6, 24px) var(--layout-margin, 20px) var(--space-16, 64px); letter-spacing:var(--letter-spacing-base, -0.006em);}
    .goods_list * {box-sizing:border-box;}

    /* --------------------------------------------------------------------
       레이아웃 — 좌측 카테고리 / 우측 본문 2단 (시안)
       .goods_category 가 1뎁스·2뎁스를 함께 감싸고 있어, display:contents 로
       껍데기를 풀어 두 목록을 각각 다른 단에 배치한다.
       -------------------------------------------------------------------- */
    .goods_list {display:grid; grid-template-columns:200px minmax(0, 1fr); gap:0 var(--space-10, 40px); align-items:start;}
    .goods_list .goods_category {display:contents;}
    /* 1행은 브레드크럼(양단 폭), 2행부터 좌측 목록 / 우측 본문.
       사이드바에 여러 행을 span 시키면 그 뒤 항목이 span 끝(30행)으로 밀려난다. */
    .goods_list .pc_breadcrumb {grid-row:1; grid-column:1 / -1;}
    /* 대분류 제목 — 브레드크럼 아래 전체 폭 (2뎁스를 눌러도 대분류 이름 유지) */
    .goods_list .pc_cate_tit {grid-row:2; grid-column:1 / -1; margin-bottom:var(--space-6, 24px); font-size:28px; line-height:38px; font-weight:700; color:var(--color-neutral-5, #222);}
    .goods_list .pc_cate_tit:empty {display:none !important;}
    /* 좌측 목록이 한 행만 차지하면 그 행 높이가 목록 높이가 되어 상품이 그 아래로 밀린다.
       여러 행에 걸치게 두되, 브레드크럼은 위에서 1행으로 못 박아 밀려나지 않게 한다. */
    .goods_list .goods_category_swiper {grid-column:1; grid-row:3 / span 30;}
    /* Swiper 기본 CSS의 margin:auto 가 그리드 칸에서 '내용 폭으로 가운데 정렬'로 작동한다 */
    .goods_list .goods_category_swiper,
    .goods_list .goods_category_swiper2 {margin-left:0; margin-right:0;}
    .goods_list > * {grid-column:2;}
    .goods_list .goods_category_swiper2,
    .goods_list .goods_list_content {grid-column:2;}

    /* --------------------------------------------------------------------
       좌측 1뎁스 — 세로 목록
       PC에서는 슬라이더를 만들지 않으므로(goods_list.html) 스와이퍼 잔재를 푼다
       -------------------------------------------------------------------- */
    .goods_list .goods_category_swiper {overflow:visible;}
    .goods_list .goods_category ul.menuOne {display:block; border-bottom:0;}
    .goods_list .goods_category ul.menuOne li {display:block; width:auto; margin:0; padding:0; border-bottom:1px solid var(--color-neutral-80, #EBEBEB);}
    .goods_list .goods_category ul.menuOne li a {display:flex; align-items:center; justify-content:space-between; height:auto; padding:var(--space-3, 12px) 0; font-size:15px; line-height:20px; font-weight:400; color:var(--color-neutral-20, #555); border-bottom:0; white-space:normal;}
    .goods_list .goods_category ul.menuOne li a:hover {color:var(--color-neutral-5, #222);}
    /* 선택 표시 — 시안의 우측 점.
       모바일의 밑줄 탭 규칙(border-bottom:2px + padding-bottom:0)이 그대로 오면
       선택된 항목만 높이가 줄고 초록 밑줄이 생긴다 → 함께 해제한다. */
    .goods_list .goods_category ul.menuOne li.selected a {padding:var(--space-3, 12px) 0; border-bottom:0; font-weight:700; color:var(--color-green-30, #00A369);}
    .goods_list .goods_category ul.menuOne li.selected a::after {content:''; flex:none; width:5px; height:5px; margin-left:var(--space-2, 8px); border-radius:50%; background:var(--color-green-40, #00B373);}

    /* --------------------------------------------------------------------
       상단 2뎁스 — 칩
       좌우 여백은 Swiper가 인라인으로 넣으므로 catSwiperOptions() 에서 PC는 0
       -------------------------------------------------------------------- */
    /* 아래 구분선을 좌측 목록의 첫 구분선과 같은 높이에 둔다.
       좌측: 12px + 20px(줄높이) + 12px = 44 / 칩: 34px + 10px = 44 */
    .goods_list .goods_category_swiper2 {padding:0 0 10px; border-bottom:1px solid var(--color-neutral-80, #EBEBEB);}
    .goods_list .goods_category ul.menuTwo {border-bottom:0;}
    .goods_list .goods_category ul.menuTwo li {margin-bottom:0;}
    .goods_list .goods_category ul.menuTwo li a {height:34px; padding:0 var(--space-4, 16px); border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:999px; font-size:14px; line-height:32px; font-weight:500; color:var(--color-neutral-20, #555); border-bottom:1px solid var(--color-neutral-80, #EBEBEB); transition:background .15s, color .15s, border-color .15s;}
    .goods_list .goods_category ul.menuTwo li a:hover {border-color:var(--color-neutral-5, #222); color:var(--color-neutral-5, #222);}
    .goods_list .goods_category ul.menuTwo li.selected a {border-color:var(--color-green-40, #00B373); background:var(--color-green-40, #00B373); font-weight:600; color:var(--color-common-100, #fff);}

    /* --------------------------------------------------------------------
       툴바 — 정렬 (우측). 보기 방식 버튼은 모바일과 동일하게 노출하지 않는다.
       -------------------------------------------------------------------- */
    .goods_list .goods_list_content .goods_top_box {padding:var(--space-3, 12px) 0 var(--space-4, 16px);}
    .goods_list .goods_list_content .goods_top_box .goods_arr_box {display:flex; align-items:center; justify-content:flex-end;}
    /* 모바일에서 table-cell/50%로 잡혀 있던 것을 해제 */
    .goods_list .goods_list_content .goods_top_box .goods_arr_box .goods_sort {display:block; width:auto;}
    .goods_list .goods_list_content .goods_top_box .goods_arr_box .goods_sort .inp_sel {width:auto;}
    /* 셀렉트 자체(테두리·글자·화살표)는 모바일 것을 그대로 쓴다 — 여기서 다시 정의하지 않는다 */
    .goods_list .goods_list_content .goods_top_box .goods_arr_box .goods_sort .inp_sel select {cursor:pointer;}

    /* --------------------------------------------------------------------
       상품 격자
       모바일은 flex-wrap + width:calc(50% - 7px) 로 2열이다.
       PC에서는 격자로 바꾸고 li 의 고정폭을 푼다.
       -------------------------------------------------------------------- */
    .goods_list .goods_list_box {padding:0;}
    .goods_list .goods_product_list {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-8, 32px) var(--space-5, 20px); padding:0; font-size:14px;}
    .goods_list .goods_product_list > li {width:auto !important; margin:0 !important; float:none !important;}

    /* 보기 방식별 열 수 — 관리자 설정(displayType)에 따라 달라진다 */
    .goods_list .goods_product_list[data-template="01"] {grid-template-columns:repeat(4, minmax(0, 1fr));}   /* 갤러리형2 */
    .goods_list .goods_product_list[data-template="09"] {grid-template-columns:repeat(4, minmax(0, 1fr));}   /* 갤러리형1 */
    .goods_list .goods_product_list[data-template="11"] {grid-template-columns:repeat(4, minmax(0, 1fr));}   /* 장바구니형 */
    .goods_list .goods_product_list[data-template="02"] {grid-template-columns:repeat(2, minmax(0, 1fr));}   /* 리스트형 */

    /* --------------------------------------------------------------------
       썸네일 — 정사각 고정
       상품마다 이미지 비율이 달라서 그대로 두면 줄 높이가 들쭉날쭉해진다.
       ※ 템플릿별 CSS(list_11.css 등)가 본문에서 나중에 로드돼 같은 우선순위로 부딪히므로
         레이아웃에 필요한 속성만 !important로 못 박는다.
       ※ 리스트형(02)은 썸네일/정보를 table-cell로 나란히 놓는 구조라 여기서 제외한다.
       -------------------------------------------------------------------- */
    .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_img {width:100%; padding-bottom:var(--space-3, 12px) !important;}
    .goods_list .goods_product_list .goods_prd_img .img_box {position:relative; overflow:hidden; border-radius:var(--radius-2, 8px); background:var(--color-neutral-90, #F7F7F7);}
    .goods_list .goods_product_list .goods_prd_img .img_box > a {display:block;}
    .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_img .img {position:relative !important; display:block; width:100%; padding-top:100% !important; font-size:0; line-height:0;}
    .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_img .img img {position:absolute !important; left:0; top:0; width:100% !important; height:100% !important; object-fit:cover; border-radius:0 !important; transition:transform .25s;}
    .goods_list .goods_product_list > li:hover .goods_prd_img .img img {transform:scale(1.04);}

    /* --------------------------------------------------------------------
       리스트형(02) — 썸네일 왼쪽 / 정보 오른쪽 가로형 카드
       -------------------------------------------------------------------- */
    .goods_list .goods_product_list[data-template="02"] > li {display:flex; align-items:flex-start; gap:var(--space-4, 16px); padding:var(--space-4, 16px) !important; border:1px solid var(--color-neutral-80, #EBEBEB); border-top:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-2, 8px);}
    .goods_list .goods_product_list[data-template="02"] .goods_prd_img {display:block !important; flex:0 0 120px; width:120px !important;}
    .goods_list .goods_product_list[data-template="02"] .goods_prd_img .img img {width:100% !important; border:0 !important;}
    .goods_list .goods_product_list[data-template="02"] .goods_prd_content {display:block !important; flex:1 1 auto; min-width:0; padding:0 !important;}

    /* --------------------------------------------------------------------
       상품 정보
       -------------------------------------------------------------------- */
    /* 이름은 2줄까지만 보이되 자리를 미리 잡지는 않는다.
       min-height로 2줄을 확보하면 한 줄짜리 이름 아래에 빈 줄이 남는다. */
    .goods_list .goods_product_list .prd_name {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:20px;}
    .goods_list .goods_product_list li .c_price {font-size:17px; line-height:24px; font-weight:700; color:var(--color-neutral-5, #222);}

    /* --------------------------------------------------------------------
       담기 버튼 — B2C 메인(따끈따끈 신상품)과 같은 '카드 하단 전체폭' 버튼
       마크업상 아이콘 버튼이 상품명 위 .prd_utils 안에 있어 카드 하단으로 절대배치한다.
       버튼이 없는 카드(구매불가 등)까지 자리를 비우면 아래가 뜨므로
       :has() 로 '버튼이 있는 카드'에만 자리를 만든다. (리스트형 02 는 제외)
       -------------------------------------------------------------------- */
    /* ※ 템플릿별 CSS(css/goods/list/list_01.css 등)가 이 파일보다 뒤에 실려
         같은 무게면 그쪽이 이긴다 — #wrap 을 붙여 무게를 올리고 배경/크기는 !important 로 덮는다 */
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) > li:has(.goods_prd_btn button) {position:relative; padding-bottom:52px !important;}
    /* 카드와 버튼 사이 래퍼가 relative 면 그게 절대배치 기준이 되어 버튼이 카드 중간에 붙는다
       → 카드(li)만 기준으로 남기고 사이 래퍼는 전부 흐름으로 되돌린다
       (이미지 안 뱃지는 .img_box 기준이라 건드리지 않는다) */
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) > li > div,
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_content,
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_list_info,
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .prd_utils {position:static !important;}
    /* 담기 버튼 클래스가 템플릿마다 다르다 — 01/09 는 .addCart, 11(장바구니형)은 .btn_prd_cart */
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn {position:absolute; left:0; right:0; bottom:0; height:auto !important; margin:0 !important; opacity:1;}
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn button.addCart,
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn button.btn_prd_cart {display:flex !important; align-items:center; justify-content:center; width:100% !important; min-width:0 !important; height:40px !important; border:1px solid var(--color-green-40, #00B373); border-radius:var(--radius-1, 4px); background:var(--color-common-100, #fff) !important; font-size:0; transition:background-color .18s; cursor:pointer;}
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn button.addCart::after,
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn button.btn_prd_cart::after {content:'장바구니'; font-size:14px; line-height:20px; font-weight:700; color:var(--color-green-30, #00A369);}
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn button.addCart:hover,
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn button.btn_prd_cart:hover {background:var(--color-green-90, #E6F7F1) !important;}
    /* 빠른주문(간편주문)은 메인과 같이 미노출 */
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn button.speedOrder,
    #wrap.pcReady .goods_list .goods_product_list:not([data-template="02"]) .goods_prd_btn button.btn_prd_speed {display:none !important;}

    /* 리스트형(02)은 기존 아이콘 그대로 — 카드에 마우스를 올렸을 때 또렷해지도록 */
    .goods_list .goods_product_list[data-template="02"] .goods_prd_btn {opacity:.7; transition:opacity .2s;}
    .goods_list .goods_product_list[data-template="02"] > li:hover .goods_prd_btn {opacity:1;}

    /* --------------------------------------------------------------------
       더보기 — 전체폭 버튼을 가운데 고정폭으로
       -------------------------------------------------------------------- */
    .goods_list .btn_box {padding:var(--space-10, 40px) 0 0; text-align:center;}
    .goods_list .btn_box .more_btn {min-width:200px; height:48px; padding:0 var(--space-6, 24px); border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-1, 4px); background:var(--color-common-100, #fff); font-size:15px; font-weight:700; color:var(--color-neutral-5, #222); transition:background .2s;}
    .goods_list .btn_box .more_btn:hover {border-color:var(--color-neutral-70, #DFDFDF); background:var(--color-neutral-90, #F7F7F7);}

    /* 결과 없음 — 격자 한 칸에 끼지 않도록 전체 폭으로 */
    .goods_list .goods_product_list > li.no_bx {grid-column:1 / -1; display:flex; align-items:center; justify-content:center; min-height:220px; padding:var(--space-10, 40px) 0 !important; border:0 !important; font-size:15px; color:var(--color-neutral-40, #888); text-align:center;}
}

/* ==========================================================================
   브랜드 카테고리 상단 소개 영역 — PC
   ==========================================================================
   관리자에 등록된 HTML(themeInfo.cateHtml1Mobile, goods_list.html 에서 .cate_html1 로 감쌌다)이
   모바일 375px 기준으로 짜여 있어 PC 폭에서는 카드·이미지가 겹쳐 보인다.
   구조: .cate_html1 > .brandPage > section.brandHero > .brandHero__sheet(흰 소개 카드) + 이하 섹션들
   PC 에서는 맨 위 배경 이미지만 남기고 나머지는 감춘다(요청 2026-09-07).
   ※ 모바일은 그대로 둔다 — 이 블록은 미디어쿼리 안에만 있어야 한다.
   ========================================================================== */
@media (min-width: 1024px) {
    /* 배경 이미지(.brandHero) 외 모든 섹션 숨김 */
    #wrap.pcReady .cate_html1 .brandPage > *:not(.brandHero) {display:none;}
    /* 배경 위에 얹힌 흰 소개 카드도 숨김 — 이게 .brandHero 높이를 붙들고 있으므로 함께 지운다 */
    #wrap.pcReady .cate_html1 .brandHero__sheet {display:none;}
    /* 카드가 빠지면 높이를 잡아 주던 것이 없어진다 — 배경 이미지 자체 높이로 흐르게 둔다 */
    #wrap.pcReady .cate_html1 .brandHero {height:auto; min-height:0;}
    /* 상품 목록과 붙지 않게 */
    #wrap.pcReady .cate_html1 {margin-bottom:var(--space-8, 32px);}
}