@charset "utf-8";
/* ==========================================================================
   쿠폰존 — PC(1024px~)
   event/couponzone.php · 골격은 css/mypage/mypage_pc.css (.mypage_pc)

   ⚠️ 이 페이지의 루트 클래스도 .coupon 이다(마이페이지 쿠폰과 같은 이름).
      마이페이지 쿠폰은 .coupon.mypage_pc 로 한정돼 있으므로,
      여기는 .coupon.couponzone_pc 로 한 단계 더 좁혀 서로 섞이지 않게 한다.

   ※ 모바일은 기존 그대로 — 모든 규칙을 @media 안에만 둔다.
   @entwiz 2026-09-15
   ========================================================================== */

@media (min-width: 1024px) {

    /* 컨테이너 여백·2단 배치는 골격(.mypage_pc)이 담당한다 — 여기서 다시 잡지 않는다.
       ※ 좌측 메뉴는 mypage/_pc_lnb_lite.html 을 쓴다.
          원본 _pc_lnb.html 은 c.PLUSSHOP_CODE_USEREXCHANGE · userHandleFl(마이페이지 컨트롤러 전용)을
          참조해서 event/ 에서 include 하면 본문이 통째로 렌더되지 않는다. */

    /* ----------------------------------------------------------------
       쿠폰 모두 받기 — 목록 위 한 곳에만 둔다
       ---------------------------------------------------------------- */
    .coupon.couponzone_pc .coupon_content > .btn_all {display:flex; justify-content:flex-end;
        margin:0 0 var(--space-5, 20px); padding:0;}
    /* .btn_line 은 gd_button.css 에서 width:100% 라 그대로 두면 버튼이 본문 폭 전체로 늘어난다 */
    .coupon.couponzone_pc .coupon_content > .btn_all a {display:inline-flex; align-items:center; justify-content:center;
        width:auto; height:40px; padding:0 var(--space-5, 20px);
        border-radius:var(--radius-1, 4px); font-size:14px; cursor:pointer;}
    /* 같은 버튼이 목록 아래에도 한 번 더 나온다 — PC 에서는 위쪽 하나만 남긴다 */
    .coupon.couponzone_pc .coupon_content > .btn_all ~ .btn_all {display:none;}

    /* ----------------------------------------------------------------
       쿠폰 목록 — 3열 격자
       ---------------------------------------------------------------- */
    .coupon.couponzone_pc .cp_list_wrap {padding:0;}
    .coupon.couponzone_pc .cp_list_wrap.margin-type {margin-top:var(--space-10, 40px);}

    /* 그룹 제목 — 모바일은 좌우 15px 패딩으로 들여쓰는데 PC 에서는 목록과 왼쪽을 맞춘다 */
    .coupon.couponzone_pc .cp_list_wrap .title {display:block; padding:0;
        margin:0 0 var(--space-3, 12px); font-size:16px; line-height:22px; font-weight:700;
        color:var(--color-neutral-5, #222);}
    .coupon.couponzone_pc .cp_list_wrap.margin-type .title {margin-top:0;}

    .coupon.couponzone_pc .cp_list {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:var(--space-4, 16px); align-items:stretch; padding:0;}

    /* 카드 안 여백 — 위/아래 20px(li), 가운데는 img_cp 10 + text_wrap 10 으로 나눠 갖게 해
       한쪽으로 쏠리지 않게 한다.
       ※ 모바일 규칙(.coupon_content .cp_list_wrap .cp_list li .img_cp)이 클래스4+요소1 이라
          셀렉터를 그만큼 길게 써야 이긴다. */
    .coupon.couponzone_pc .cp_list > li {float:none; width:auto; margin:0; padding:var(--space-5, 20px);}
    .coupon.couponzone_pc .cp_list_wrap .cp_list li .img_cp {padding-bottom:10px;}
    .coupon.couponzone_pc .cp_list_wrap .cp_list li .text_wrap {padding-top:10px;}

    .coupon.couponzone_pc .cp_list .img_cp img {width:100%; height:auto;}
    .coupon.couponzone_pc .cp_list .tit {padding-left:0;}

    /* 받기 버튼 — 모바일 모양을 그대로 쓴다.
       .cp_down_2/3/4 는 padding-left:28px 자리에 아이콘을 배경으로 깔아 둔다
       (background: url(download.png) no-repeat 8px 50%/18px).
       여기서 padding 이나 height 를 덮으면 아이콘과 글자가 겹친다 → 손대지 않는다.
       세로 위치는 .img_cp 의 align-items:center 가 이미 맞춰 준다. */
    .coupon.couponzone_pc .cp_list .btn_wrap {margin:0; padding:0; flex:none;}
    .coupon.couponzone_pc .cp_list .btn_wrap a {cursor:pointer;}

    /* 받을 쿠폰 없음 */
    .coupon.couponzone_pc .cp_list_none {padding:var(--space-16, 64px) 0; text-align:center;
        border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-2, 8px);
        color:var(--color-neutral-30, #707070);}

}