@charset "utf-8";
/* ==========================================================================
   상품 검색 결과 — PC(1024px~) 전용
   goods/goods_search.php · 시안 없음(자체 디자인) / 토큰: gd_tokens.css
   모바일 화면은 건드리지 않는다 — 모든 규칙을 미디어쿼리 안에만 둔다.
   ========================================================================== */

@media (min-width: 1024px) {

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

    /* --------------------------------------------------------------------
       제목 — '검색어' 검색 결과 + 총 N개
       -------------------------------------------------------------------- */
    .goods_search .tit {position:relative; display:block; padding:0 0 var(--space-5, 20px); border-bottom:1px solid var(--color-neutral-80, #EBEBEB); text-align:left;}
    /* 모바일에서는 숨겨져 있던 검색어를 PC에서는 제목으로 쓴다 */
    .goods_search .tit .keyword {display:block !important; font-size:24px; line-height:32px; font-weight:700; color:var(--color-neutral-5, #222);}
    .goods_search .tit .keyword::before {content:'\201C';}
    .goods_search .tit .keyword::after {content:'\201D' ' ' '검색 결과'; font-weight:500; color:var(--color-neutral-20, #555);}
    .goods_search .tit .prd_num {margin-top:var(--space-2, 8px); padding:0; font-size:14px; line-height:20px; color:var(--color-neutral-30, #707070);}
    .goods_search .tit .prd_num span {font-weight:700; color:var(--color-green-30, #00A369);}
    /* 검색 제공 배너는 우측 아래로 */
    .goods_search .tit .payco_banner {position:absolute; right:0; bottom:var(--space-5, 20px); margin:0;}
    .goods_search .tit .payco_banner img {height:16px; width:auto; opacity:.6;}

    /* --------------------------------------------------------------------
       툴바 — 정렬 / 보기 방식 (우측)
       -------------------------------------------------------------------- */
    .goods_search .goods_search_content .goods_top_box {padding:var(--space-4, 16px) 0; background:none;}
    .goods_search .goods_search_content .goods_top_box .goods_arr_box {display:flex; align-items:center; justify-content:flex-end; gap:var(--space-4, 16px);}
    /* 모바일에서 table-cell/50%로 잡혀 있던 것을 해제 */
    .goods_search .goods_search_content .goods_top_box .goods_arr_box .goods_sort {display:block; width:auto; padding:0;}
    .goods_search .goods_search_content .goods_top_box .goods_arr_box .goods_sort .inp_sel {width:auto;}
    /* 셀렉트 자체(테두리·글자·화살표)는 모바일 것을 그대로 쓴다 — 여기서 다시 정의하지 않는다 */
    .goods_search .goods_search_content .goods_top_box .goods_arr_box .goods_sort .inp_sel select {cursor:pointer;}
    /* 보기 방식 버튼 — 모바일과 동일하게 노출하지 않는다(기획 확정 2026-08-19).
       마크업의 <ul style="display:none">를 그대로 두고, table-cell 잔재만 걷어내
       정렬 셀렉트가 오른쪽 끝에 붙도록 한다.
       (아이콘 에셋이 모바일 열 수 기준이라 PC 배치와 어긋나고, 선택 상태 아이콘도 이전 브랜드 색이다) */
    .goods_search .goods_search_content .goods_top_box .goods_arr_box .goods_view_type {display:none;}

    /* --------------------------------------------------------------------
       상품 목록 — 보기 방식별 열 수
       모바일 인라인 스타일(width:calc(50% - 7px))을 이기도록 선택자를 길게 둔다
       -------------------------------------------------------------------- */
    .goods_search .goods_list_box {padding:0;}
    .goods_search .goods_product_list {display:grid; gap:var(--space-8, 32px) var(--space-5, 20px); font-size:14px;}
    .goods_search .goods_product_list > li {width:auto !important; margin:0 !important; padding:0 !important; float:none !important;}

    .goods_search .goods_product_list[data-template="01"] {grid-template-columns:repeat(5, minmax(0, 1fr));}  /* 갤러리형2 */
    .goods_search .goods_product_list[data-template="09"] {grid-template-columns:repeat(5, minmax(0, 1fr));}  /* 갤러리형1 */
    .goods_search .goods_product_list[data-template="02"] {grid-template-columns:repeat(2, minmax(0, 1fr));}  /* 리스트형 */

    /* 카드 */
    .goods_search .goods_product_list .goods_prd_item2_box,
    .goods_search .goods_product_list .goods_prd_item1,
    .goods_search .goods_product_list .goods_prd_item {height:100%;}

    /* 썸네일: 정사각 고정 — 이미지 비율이 제각각이라(이미지 없는 상품은 작은 기본 이미지)
       그대로 두면 카드 높이가 들쭉날쭉해진다.
       ※ 템플릿별 CSS(list_01.css 등)가 본문에서 나중에 로드돼 같은 우선순위로 부딪히므로
         레이아웃에 필요한 속성만 !important로 못 박는다.
       ※ 갤러리형에만 건다 — 리스트형(02)은 썸네일/정보를 table-cell로 나란히 놓는 구조라
         여기에 같이 걸면 배치가 무너진다. */
    .goods_search .goods_product_list[data-template="01"] .goods_prd_img,
    .goods_search .goods_product_list[data-template="09"] .goods_prd_img {width:100%; padding-bottom:0 !important;}

    .goods_search .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_search .goods_product_list .goods_prd_img .img_box > a {display:block;}

    .goods_search .goods_product_list[data-template="01"] .goods_prd_img .img,
    .goods_search .goods_product_list[data-template="09"] .goods_prd_img .img {position:relative !important; display:block; width:100%; padding-top:100% !important; font-size:0; line-height:0;}
    .goods_search .goods_product_list[data-template="01"] .goods_prd_img .img img,
    .goods_search .goods_product_list[data-template="09"] .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_search .goods_product_list > li:hover .goods_prd_img .img img {transform:scale(1.04);}

    /* --------------------------------------------------------------------
       리스트형(02) — 썸네일 왼쪽 / 정보 오른쪽 가로형 카드
       -------------------------------------------------------------------- */
    .goods_search .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-radius:var(--radius-2, 8px); transition:border-color .2s;}
    .goods_search .goods_product_list[data-template="02"] > li:hover {border-color:var(--color-neutral-70, #DFDFDF);}
    .goods_search .goods_product_list[data-template="02"] .goods_prd_img {display:block !important; flex:0 0 120px; width:120px !important;}
    .goods_search .goods_product_list[data-template="02"] .goods_prd_img .img {display:block; width:100%; padding-top:100%; position:relative; font-size:0; line-height:0;}
    .goods_search .goods_product_list[data-template="02"] .goods_prd_img .img img {position:absolute; left:0; top:0; width:100% !important; height:100%; object-fit:cover; border:0 !important;}
    .goods_search .goods_product_list[data-template="02"] .goods_prd_content {display:block !important; flex:1 1 auto; min-width:0; padding:0 !important;}
    /* 가로형 카드는 폭이 넉넉하므로 상품명을 줄이지 않는다 */
    .goods_search .goods_product_list[data-template="02"] .prd_name {-webkit-line-clamp:none; display:block; min-height:0;}
    .goods_search .goods_product_list[data-template="02"] .short_des {display:block; margin-top:var(--space-1, 4px); font-size:13px; line-height:18px; color:var(--color-neutral-40, #888);}

    /* 상품 정보 */
    .goods_search .goods_product_list .goods_prd_content {padding:var(--space-3, 12px) 0 0;}
    .goods_search .goods_product_list .goods_info_list {display:block;}
    .goods_search .goods_product_list .goods_info_list > li {padding:0; font-size:14px;}
    .goods_search .goods_product_list .brand_name,
    .goods_search .goods_product_list .maker_name {margin-bottom:var(--space-1, 4px); font-size:12px; line-height:16px; color:var(--color-neutral-40, #888);}
    /* 이름은 2줄까지만 보이되 자리를 미리 잡지는 않는다(상품 목록과 동일).
       min-height로 2줄을 확보하면 한 줄짜리 이름 아래에 빈 줄이 남는다. */
    .goods_search .goods_product_list .prd_name {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:20px; font-weight:500; color:var(--color-neutral-5, #222);}
    .goods_search .goods_product_list .short_des {display:none;}  /* PC 카드에서는 설명 생략 */
    .goods_search .goods_product_list .fixed_price {margin-top:var(--space-1, 4px); font-size:13px; line-height:18px; color:var(--color-neutral-50, #AAA); text-decoration:line-through;}
    .goods_search .goods_product_list .price {margin-top:var(--space-1, 4px);}
    .goods_search .goods_product_list li .c_price {font-size:17px; line-height:24px; font-weight:700; color:var(--color-neutral-5, #222);}
    .goods_search .goods_product_list li .c_price strong.per {margin-right:var(--space-1, 4px); color:var(--color-green-40, #00B373);}

    /* 품절 */
    .goods_search .goods_product_list > li.soldout .goods_prd_img .img img {opacity:.45;}
    .goods_search .goods_product_list > li.soldout .goods_prd_content {opacity:.55;}

    /* 장바구니 버튼 — 카드에 마우스를 올렸을 때만 */
    .goods_search .goods_product_list .goods_prd_btn {position:absolute; right:var(--space-2, 8px); bottom:var(--space-2, 8px); z-index:2; opacity:0; transition:opacity .2s;}
    .goods_search .goods_product_list > li:hover .goods_prd_btn {opacity:1;}
    .goods_search .goods_product_list .prd_utils {position:relative;}

    /* --------------------------------------------------------------------
       더보기 — 전체폭 버튼을 가운데 고정폭으로
       -------------------------------------------------------------------- */
    .goods_search .btn_box {padding:var(--space-10, 40px) 0 0; text-align:center;}
    .goods_search .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_search .btn_box .more_btn:hover {border-color:var(--color-neutral-70, #DFDFDF); background:var(--color-neutral-90, #F7F7F7);}

    /* 검색 결과 없음 — 결과가 없을 때도 목록은 비어 있지 않고 li.no_bx 한 줄이 들어온다.
       그대로 두면 그 안내문이 격자 첫 칸(1/5 폭)에 끼어 왼쪽에 치우쳐 보인다. */
    .goods_search .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;}
    .goods_search .goods_product_list > li.no_bx:hover {border:0 !important;}
    /* 안내문만 남기고 카드 장식은 걷어낸다 */
    .goods_search .goods_product_list > li.no_bx .goods_prd_img {display:none !important;}
}