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

@media (min-width: 1024px) {

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

    /* --------------------------------------------------------------------
       기획전 배너
       관리자에 등록된 콘텐츠가 모바일 기준(eventThemeMobileContents)이라
       폭을 억지로 늘리면 이미지가 흐려진다 → 원본 폭을 지키고 가운데 정렬한다.
       -------------------------------------------------------------------- */
    ._goods_display_main .item_display_wrap {padding:0;}
    /* 기획전 전체 제목(eventThemeName)은 쓰지 않는다 — 그룹 제목(.main_themeNm)만 쓴다.
       원래 h3 는 proc.css 에서 숨겨져 있으므로 여기서 되살리지 않는다. */
    /* 영역 자체만 가운데 정렬한다 — 안쪽 정렬은 관리자에서 작성한 그대로 둔다.
       (text-align/align-items 로 가운데를 주면 왼쪽으로 쓴 문단까지 가운데로 끌려온다) */
    /* 기획전 본문은 관리자에서 모바일(375px) 기준으로 짠 것이다.
       fit-content 로 두면 안에 든 이미지의 원본 폭(1000px 이상)만큼 벌어지는데,
       그 위에 얹은 버튼·표는 375px 기준이라 배경 이미지와 어긋난다(2026-09-07 sno=618).
       → 제작 폭에 맞춰 780px 로 묶고 가운데 정렬해 비율을 그대로 지킨다(2026-09-07 확정).
       기획전이 더 넓게 제작됐다면 아래 --event-max 만 바꾸면 된다. */
    ._goods_display_main .contents {display:block; width:100%; max-width:var(--event-max, 780px); margin:0 auto var(--space-12, 48px);}
    /* 안쪽 표·고정폭 박스도 같이 묶는다 — 100% 로 짜인 표가 배경 이미지보다 넓어지는 것을 막는다 */
    ._goods_display_main .contents table,
    ._goods_display_main .contents > div {max-width:100%;}
    /* 그룹 배너(.main_themeNm)도 같은 폭으로 — 위젯 인라인 style 의 img{width:100%} 때문에 전체 폭으로 퍼진다 */
    ._goods_display_main .main_themeNm {max-width:var(--event-max, 780px); margin-left:auto; margin-right:auto;}
    ._goods_display_main .contents > * {max-width:100%;}
    /* 영상이 든 기획전은 영상 폭(860px)까지 넓혀 준다 — 위 750px 로 묶으면 영상이 작아진다.
       (fit-content 를 쓰던 시절의 300px 문제는 width:100% 로 이미 해결됐다) */
    ._goods_display_main .contents:has(iframe),
    ._goods_display_main .contents:has(video) {max-width:780px;}
    ._goods_display_main .contents iframe,
    ._goods_display_main .contents video {max-width:780px; margin-left:auto; margin-right:auto;}
    /* ._goods_display_main .contents video {aspect-ratio: 9 / 11.89;} */
    ._goods_display_main .contents img {max-width:100%; height:auto; vertical-align:top;}
    /* 2단 버튼(관리자 콘텐츠의 'width:50%; float:left' 칸) 사이 흰 선 —
       칸은 정확히 50% 인데 안의 <img> 에 width 지정이 없어 원본 폭(칸보다 1px 작음)으로 그려진다.
       그 차이가 세로 흰 선으로 보인다(2026-09-07 sno=618). 칸을 꽉 채우게 한다.
       display:block 은 <a> 안 이미지의 baseline 여백(아래쪽 흰 줄)도 함께 없앤다. */
    ._goods_display_main .contents [style*="float"] img {display:block; width:100%;}
    /* 관리자 콘텐츠가 고정폭 표/div 로 짜여 있어도 넘치지 않게 */
    ._goods_display_main .contents table {max-width:100%;}

    /* --------------------------------------------------------------------
       섹션 제목 (그룹형 기획전은 그룹마다 제목이 붙는다)
       -------------------------------------------------------------------- */
    /* PC는 제목을 배너 아래·상품 위로 옮긴다(시안).
       마크업 순서는 제목 → 배너 → 상품이라, 위치만 바꾸려고 태그를 옮기면
       모바일까지 바뀐다 → 여기서 정렬 순서만 다시 준다. */
    ._goods_display_main [class*="js_main_wrap_"] {display:flex; flex-direction:column;}
    ._goods_display_main [class*="js_main_wrap_"] > .contents {order:1;}
    ._goods_display_main [class*="js_main_wrap_"] > .main_themeNm {order:2;}
    ._goods_display_main [class*="js_main_wrap_"] > ul.main_prd_list {order:3;}
    ._goods_display_main [class*="js_main_wrap_"] > .btn_box {order:4;}
    ._goods_display_main [class*="js_main_wrap_"] > .event_sale_others {order:5;}

    /* 그룹형은 _goods_display_main.html 의 인라인 style 이 이 CSS 파일보다 뒤에 로드돼
       같은 강도로는 밀린다(padding:30px 20px 0 / border-bottom:0) → ID를 붙여 올린다.
       일반형·그룹형 모두 같은 제목 모양으로 맞춘다. */
    #wrap.pcReady ._goods_display_main .main_themeNm {padding:0 0 var(--space-4, 16px); margin:0 0 var(--space-5, 20px); border-bottom:1px solid var(--color-neutral-80, #EBEBEB); font-size:20px; line-height:28px; font-weight:700; color:var(--color-neutral-5, #222);}
    ._goods_display_main .main_themeNm .more_btn_box {position:static; flex:none;}
    ._goods_display_main .main_themeNm .main_more_btn2 {font-size:14px; font-weight:400; color:var(--color-neutral-40, #888);}
    ._goods_display_main .main_themeNm .main_more_btn2:hover {color:var(--color-neutral-5, #222); text-decoration:underline;}

    /* --------------------------------------------------------------------
       상품 목록 — 모바일 2열(width:calc(50% - 7px))을 격자로 바꾼다
       -------------------------------------------------------------------- */

    /* 상품 목록은 템플릿(list_XX)마다 자체 배치 규칙을 갖고 있어 격자를 못 박아야 한다.
       그러지 않으면 상품 수가 적을 때 좌우로 흩어진다. */
    ._goods_display_main ul.main_prd_list {display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; justify-content:start; align-items:start; gap:var(--space-8, 32px) var(--space-5, 20px); padding:0; font-size:14px;}
    ._goods_display_main ul.main_prd_list > li {width:auto !important; max-width:none !important; min-width:0; margin:0 !important; padding:0 !important; float:none !important; display:block !important;}

    /* 썸네일 정사각 — 상품마다 비율이 달라 줄 높이가 들쭉날쭉해지는 것을 막는다 */
    ._goods_display_main ul.main_prd_list .goods_prd_img .img_box {position:relative; overflow:hidden; border-radius:var(--radius-2, 8px); background:var(--color-neutral-90, #F7F7F7);}
    ._goods_display_main ul.main_prd_list .goods_prd_img .img {position:relative !important; display:block; width:100%; padding-top:100% !important; font-size:0; line-height:0;}
    ._goods_display_main ul.main_prd_list .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_display_main ul.main_prd_list > li:hover .goods_prd_img .img img {transform:scale(1.04);}

    /* 상품 정보 */
    ._goods_display_main ul.main_prd_list .prd_name {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:20px;}
    ._goods_display_main ul.main_prd_list li .c_price {font-size:17px; line-height:24px; font-weight:700; color:var(--color-neutral-5, #222);}

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

    /* --------------------------------------------------------------------
       다른 기획전 보기 — 셀렉트를 오른쪽에
       -------------------------------------------------------------------- */
    /* 모바일에서 영역을 나누던 8px 회색 띠 제거 */
    ._goods_display_main .event_sale_others {padding:var(--space-10, 40px) 0 0; border-top:0;}
    ._goods_display_main .event_sale_others label {display:block; margin-bottom:var(--space-2, 8px); font-size:14px; color:var(--color-neutral-30, #707070);}
    ._goods_display_main .event_sale_others .inp_sel {max-width:none; margin:0;}
    ._goods_display_main .event_sale_others select,
    ._goods_display_main .item_display_wrap .inp_sel select {width:100%; height:44px; padding:0 var(--space-4, 16px); border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-1, 4px); font-size:14px; color:var(--color-neutral-10, #333); cursor:pointer;}

    /* 그룹형: 그룹 사이 간격 */
    ._goods_display_main + ._goods_display_main {margin-top:var(--space-16, 64px);}
}

/* ==========================================================================
   관리자 콘텐츠의 화면 하단 고정 CTA(.fixed-btn)
   ==========================================================================
   기획전 본문 <style> 에 이렇게 들어 있다(sno=688 등):
       @media (min-width:900px) { .fixed-btn {left:50% !important; margin-left:-434px;} }
       @media (min-width:500px) { .fixed-btn {left:50% !important; margin-left:-185px;} }
   둘 다 '모바일 기둥이 왼쪽으로 밀려 있던' 옛 레이아웃에 맞춘 보정치다.
   (게다가 900px 규칙이 500px 규칙보다 앞에 있어, 넓은 화면에서는 -185px 쪽이 이긴다)

   2026-09-07 에 우측 홍보 패널을 없애면서 기둥을 화면 가운데로 되돌렸고,
   PC(pcReady) 페이지는 애초에 기둥을 쓰지 않는다 → 이 보정이 그대로 남아 버튼만 왼쪽으로 밀린다.
   보정을 지워 콘텐츠와 같이 가운데에 두면 된다(left:50% + translateX(-50%) 는 그대로 쓴다).
   ※ 500px 부터 걸어야 한다 — 콘텐츠 쪽 보정이 500px 부터 시작한다.
     500~899px 구간에서도 기둥은 가운데(margin-left:-250px = 폭의 절반)라 -185px 는 그때도 틀린 값이었다.
     실제 휴대폰 폭(500px 미만)에서는 두 미디어쿼리가 모두 안 걸려 원래 가운데로 나온다.
   ========================================================================== */
@media screen and (min-width: 500px) {
    .fixed-btn {margin-left:0 !important;}
}