@charset "utf-8";
/* ==========================================================================
   마이페이지 하위 페이지 PC 공통 골격 — PC(1024px~)
   좌측 메뉴(220px, mypage/_pc_lnb.html) + 우측 본문 2단

   쓰는 법 — 페이지 템플릿에서 세 가지만 맞추면 된다.
     1) 루트 div 에 mypage_pc 클래스 추가        class="coupon mypage_pc"
     2) 루트 div 안 맨 앞에 좌측 메뉴 include    {=includeFile('mypage/_pc_lnb.html')}
     3) 그 다음 줄에 본문 제목                    <h2 class="page_tit pc_only">쿠폰</h2>
   그리고 이 파일 + 페이지별 {page}_pc.css 를 link 로 불러온다.

   ※ 모바일은 기존 그대로 — 모든 규칙을 @media 안에만 둔다.
   ※ 좌측 메뉴 카드(.mypage_side .mypage_menu) 스타일은 이 파일 맨 아래에 함께 둔다.
      mypage.css 에도 같은 블록이 있지만 그 파일은 mypage/ 하위 페이지에서만 로드된다 —
      게시판(board/list?bdId=qa)처럼 mypage.css 가 없는 곳에서도 메뉴가 나와야 하므로 여기에 둔다.
      두 곳의 값은 같게 유지할 것.
   ※ 먼저 만든 mypage/index·order_list 는 각자 셀렉터로 같은 골격을 갖고 있다.
      회귀를 피하려고 그대로 두었으니, 골격을 고칠 때는 mypage.css 쪽도 함께 볼 것.
   @entwiz 2026-09-10
   ========================================================================== */

@media (min-width: 1024px) {

    .mypage_pc {box-sizing:border-box;
        max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2);
        margin:0 auto;
        padding:var(--space-12, 48px) var(--layout-margin, 20px) var(--space-16, 64px);
        letter-spacing:var(--letter-spacing-base, -0.006em);
        display:grid; grid-template-columns:220px minmax(0, 1fr);
        gap:0 var(--space-10, 40px); align-items:start;}
    .mypage_pc * {box-sizing:border-box;}

    /* 기본은 전부 우측 단. 좌측 메뉴와 제목만 따로 자리를 잡는다 */
    .mypage_pc > * {grid-column:2;}
    /* 제목이 두 단에 걸치므로 좌측 메뉴는 2행부터 */
    .mypage_pc > .mypage_side {grid-column:1; grid-row:2 / span 30;}
    .mypage_pc > .page_tit {grid-column:1 / -1;}

    /* 모바일용 마이페이지 메뉴를 함께 갖고 있는 페이지에서는 감춘다
       (같은 메뉴를 _pc_lnb.html 이 좌측에 그린다) */
    .mypage_pc > .mypage_side.mo_only {display:none !important;}

    /* --------------------------------------------------------------------
       본문 제목
       -------------------------------------------------------------------- */
    .mypage_pc .page_tit {margin-bottom:var(--space-5, 20px); padding-bottom:var(--space-4, 16px);
        border-bottom:1px solid var(--color-neutral-80, #EBEBEB);
        font-size:22px; line-height:30px; font-weight:700; color:var(--color-neutral-5, #222);}

    /* --------------------------------------------------------------------
       모바일에서 영역을 나누던 회색 띠 — PC 에서는 선으로 대체하거나 없앤다.
       (하위 페이지 대부분이 7~8px 회색 border 로 구획을 나눈다)
       -------------------------------------------------------------------- */
    .mypage_pc .mo_divider {display:none;}

}

/* --------------------------------------------------------------------------
   아래는 mypage.css 의 '마이페이지 좌측 메뉴 카드' 블록과 같은 내용이다.
   mypage.css 를 로드하지 않는 페이지(게시판 마이페이지 모드 등)에서도
   좌측 메뉴가 카드 모양으로 나와야 해서 여기에 함께 둔다. 값을 고칠 때는 양쪽 모두.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   마이페이지 좌측 메뉴 카드 — PC(1024px~)
   mypage/_pc_lnb.html · 쇼핑정보 / 혜택관리 / 활동관리 / 회원정보
   마이페이지 홈과 주문목록 등 하위 페이지가 같은 마크업을 쓰므로 한 곳에서 정의한다.
   ========================================================================== */

@media (min-width: 1024px) {
    .mypage_side .mypage_menu {float:none; width:auto; margin:0 0 var(--space-5, 20px); padding:var(--space-4, 16px) var(--space-5, 20px); border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-2, 8px); background:var(--color-common-100, #fff);}
    .mypage_side .mypage_menu:last-child {margin-bottom:0;}
    .mypage_side .mypage_menu .tit {margin-bottom:var(--space-2, 8px); padding:0 0 var(--space-3, 12px); border-bottom:1px solid var(--color-neutral-80, #EBEBEB); font-size:16px; line-height:22px; font-weight:700; color:var(--color-neutral-5, #222);}
    /* 좁은 단(220px)이라 본문보다 한 단계 작게 */
    .mypage_side .mypage_menu > ul > li > a {display:flex; align-items:center; justify-content:space-between; padding:var(--space-3, 12px) 0; font-size:14px; line-height:20px; color:var(--color-neutral-20, #555);}
    .mypage_side .mypage_menu > ul > li > a:hover {color:var(--color-neutral-5, #222);}
    .mypage_side .mypage_menu > ul > li + li > a {border-top:1px solid var(--color-neutral-90, #F7F7F7);}

    /* 현재 보고 있는 메뉴 */
    .mypage_side .mypage_menu > ul > li.on > a {font-weight:700; color:var(--color-green-30, #00A369);}
    .mypage_side .mypage_menu > ul > li.on > 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뎁스(마이페이지 홈의 취소/반품 등)는 접힌 상태 그대로 두고 들여쓴다 */
    .mypage_side .mypage_menu .depth1_list ul li a {padding-left:var(--space-3, 12px); font-size:14px; color:var(--color-neutral-40, #888);}

    /* --------------------------------------------------------------------
       LNB 2뎁스 (취소/반품/교환 내역, 환불/입금 내역) — mypage/_pc_lnb.html
       -------------------------------------------------------------------- */
    /* 여는 버튼은 1뎁스 링크와 같은 모양이어야 한다(button 기본 스타일 제거) */
    .mypage_side .mypage_menu .lnb_fold_btn {display:flex; align-items:center; justify-content:space-between; width:100%; padding:var(--space-3, 12px) 0; border:0; background:none; font-size:14px; line-height:20px; font-weight:400; text-align:left; color:var(--color-neutral-20, #555); cursor:pointer;}
    .mypage_side .mypage_menu .lnb_fold_btn:hover {color:var(--color-neutral-5, #222);}
    .mypage_side .mypage_menu .lnb_fold + li > a,
    .mypage_side .mypage_menu li + .lnb_fold .lnb_fold_btn {border-top:1px solid var(--color-neutral-90, #F7F7F7);}
    .mypage_side .mypage_menu .lnb_fold_btn::after {content:''; flex:none; width:16px; height:16px; margin-left:var(--space-2, 8px); background:url(../../images/renew/icon/chevron-up-dark.svg) no-repeat 50% 50% / 16px auto; transform:rotate(180deg); transition:transform .2s;}
    .mypage_side .mypage_menu .lnb_fold.on .lnb_fold_btn {font-weight:700; color:var(--color-neutral-5, #222);}
    .mypage_side .mypage_menu .lnb_fold.on .lnb_fold_btn::after {transform:none;}

    /* 펼쳤을 때만 보인다 */
    .mypage_side .mypage_menu .lnb_sub {display:none; padding:0 0 var(--space-2, 8px);}
    .mypage_side .mypage_menu .lnb_fold.on .lnb_sub {display:block;}
    .mypage_side .mypage_menu .lnb_sub li > a {display:block; padding:var(--space-2, 8px) 0 var(--space-2, 8px) var(--space-3, 12px); border-top:0; font-size:13px; line-height:18px; color:var(--color-neutral-40, #888);}
    .mypage_side .mypage_menu .lnb_sub li > a:hover {color:var(--color-neutral-20, #555);}
    .mypage_side .mypage_menu .lnb_sub li.on > a {font-weight:700; color:var(--color-green-30, #00A369);}

    /* 고객센터 LNB(mypage/_pc_lnb_cs.html) — 항목이 3개뿐이라 마이페이지와 같은 하단 여백을 쓰면
       마지막 항목 아래가 휑하게 비어 위아래가 안 맞아 보인다.
       마지막 링크의 아래 패딩(12px)까지 합쳐 상단 여백과 비슷해지도록 박스 패딩만 줄인다. @entwiz 2026-10-27 */
    .mypage_side .mypage_menu.cs_menu {padding-bottom:var(--space-2, 8px);}
}