/* 황금곳간 장바구니 전용 CSS (시안: myfile/greenmall_cart.html)
   공통 클래스(.cart-layout .cart-item .stepper .summary 등)는 gm-shop.css 재활용,
   여기에는 장바구니 페이지에서 추가로 필요한 스타일만 정의한다. */

/* 선택바 우측 버튼(선택삭제/장바구니 비우기) — 밑줄 텍스트 → 또렷한 소형 버튼 */
.cart-select-bar .gm-sel-btns{display:flex;gap:8px;flex-wrap:wrap;}
.cart-select-bar .gm-sel-btns .gm-sel-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-family:inherit;font-size:13px;font-weight:700;color:#6b6b66;cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.cart-select-bar .gm-sel-btns .gm-sel-btn span{font-size:12px;line-height:1;}
.cart-select-bar .gm-sel-btns .gm-sel-btn:hover{border-color:var(--point);color:var(--point-dark);background:#f7faf2;}
.cart-select-bar .gm-sel-btns .gm-sel-btn.danger:hover{border-color:#e0866a;color:#d4491d;background:#fdf5f2;}
.cart-select-bar .chk b{font-weight:800;}

/* 상품 행 */
.cart-item > .chk{margin-top:36px;}
.ci-thumb{overflow:hidden;background:#fff;}
.ci-thumb img{width:100%;height:100%;object-fit:cover;border-radius:13px;}
.ci-name a{color:inherit;font-weight:600;}
.ci-name a:hover{color:var(--point-dark);}
.ci-opt .sod_opt li,
.ci-opt ul{list-style:none;margin:0;padding:0;}
.ci-meta{font-size:12.5px;color:var(--txt-sub);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ci-meta .gm-ship-badge{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:11px;background:#f1f6ea;color:var(--point-dark);}
.ci-meta .gm-ship-badge.gray{background:#f1f1ef;color:#888;}

/* 수량 스테퍼 + 옵션수정 버튼 */
.gm-qty-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

#sod_bsk .stepper{
  border:1.5px solid #dfe3d8;border-radius:12px;background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
#sod_bsk .stepper button{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:0;background:#fbfcf8;color:#7d8a70;font-size:19px;font-weight:700;line-height:1;cursor:pointer;
  transition:background .15s, color .15s;
}
#sod_bsk .stepper button:hover{background:var(--point);color:#fff;}
#sod_bsk .stepper button:active{background:var(--point-dark);color:#fff;}
#sod_bsk .stepper .st-minus{border-right:1px solid #eceee7;}
#sod_bsk .stepper .st-plus{border-left:1px solid #eceee7;}
#sod_bsk .stepper .gm-qty{
  min-width:50px;padding:0 6px;text-align:center;font-size:15px;font-weight:800;color:var(--txt);
}

.gm-mod-opt{
  display:inline-flex;align-items:center;gap:5px;
  height:36px;padding:0 13px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-family:inherit;font-size:12.5px;font-weight:700;color:#6b6b66;text-decoration:none;cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.gm-mod-opt span{font-size:12px;line-height:1;}
.gm-mod-opt:hover{border-color:var(--point);color:var(--point-dark);background:#f7faf2;}

/* 빈 장바구니 */
.gm-cart-empty{background:#fff;border:1px solid var(--line);border-radius:16px;text-align:center;padding:70px 20px;}
.gm-cart-empty .emj{font-size:56px;display:block;margin-bottom:16px;}
.gm-cart-empty b{font-size:18px;font-weight:800;display:block;margin-bottom:6px;}
.gm-cart-empty p{font-size:13.5px;color:var(--txt-sub);margin-bottom:24px;}
.gm-cart-empty .btn{min-width:200px;}

/* 요약 박스 내 버튼/네이버페이 */
.summary .btn{margin-top:8px;}
.summary .btn:first-of-type{margin-top:16px;}
.summary .cart-naverpay{margin-top:10px;text-align:center;}

/* 선택사항수정 팝업 톤 보정 (마크업은 코어 cartoption.php 그대로) */
#sod_bsk_list #mod_option_frm{border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.14);}
#sod_bsk_list .mod_option_bg{background:rgba(0,0,0,.35);}
#mod_option_frm h2{font-weight:800;}
#mod_option_frm .btn_confirm{background:transparent;}
#mod_option_frm .btn_confirm .btn_submit{background:var(--point);color:#fff;border:0;border-radius:10px;transition:background .2s;}
#mod_option_frm .btn_confirm .btn_submit:hover{background:var(--point-dark);}
#sit_opt_added li{border-radius:10px;}

/* 반응형 */
@media (max-width:768px){
  .cart-item > .chk{margin-top:28px;}
  .ci-thumb{width:78px;height:78px;}
  .cart-select-bar{flex-wrap:wrap;gap:10px;}
  .cart-select-bar .gm-sel-btns{width:100%;}
  .cart-select-bar .gm-sel-btns .gm-sel-btn{flex:1;justify-content:center;}
  .gm-qty-wrap{width:100%;justify-content:space-between;}
  #sod_bsk .stepper button{width:42px;height:42px;}
  .gm-mod-opt{height:42px;}
}

/* ============================================================
   카트주문 (2026-07-27) : 상품별 수령인 정보 + 예치금 결제
   ============================================================ */
.cart-select-bar .gm-sel-btn.point{
  border-color:var(--point);color:var(--point-dark);background:#f7faf2;font-weight:800;
}
.cart-select-bar .gm-sel-btn.point:hover{background:var(--point);color:#fff;}

/* ── 카드 안 수령인 영역 ── */
.ci-recv{
  margin-top:12px;padding:11px 13px;border-radius:12px;
  border:1.5px dashed #dcdcd6;background:#fafaf8;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.ci-recv.on{border-style:solid;border-color:#dce9ca;background:#f7faf2;}
.ci-recv .rv-add{
  width:100%;height:38px;border-radius:9px;cursor:pointer;font-family:inherit;
  border:1.5px solid var(--line);background:#fff;color:#6d6d68;font-size:13px;font-weight:700;
  transition:all .16s;
}
.ci-recv .rv-add:hover{border-color:var(--point);color:var(--point-dark);background:#f4f9ec;}
.ci-recv .rv-txt{flex:1;min-width:0;font-size:13px;line-height:1.55;color:var(--txt);}
.ci-recv .rv-txt b{font-weight:800;margin-right:8px;}
.ci-recv .rv-txt span{color:#7d7d78;}
.ci-recv .rv-txt p{margin:2px 0 0;color:#6d6d68;font-size:12.5px;word-break:keep-all;}
.ci-recv .rv-txt em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:#9a9a95;}
.ci-recv .rv-btns{display:flex;gap:6px;flex-shrink:0;}
.ci-recv .rv-btn{
  height:30px;padding:0 12px;border-radius:8px;cursor:pointer;font-family:inherit;
  border:1.5px solid var(--line);background:#fff;color:#6d6d68;font-size:12px;font-weight:700;
}
.ci-recv .rv-btn:hover{border-color:var(--point);color:var(--point-dark);}
.ci-recv .rv-btn.del:hover{border-color:#d4491d;color:#d4491d;}

/* ── 우측 요약 : 예치금 결제 박스 ── */
.gm-pay-box{
  margin:4px 0 14px;padding:14px;border-radius:14px;
  border:1px solid #e2eed2;background:#f7faf2;
}
.gm-pay-bal{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:#5f6f4f;}
.gm-pay-bal b{font-size:17px;font-weight:900;color:var(--point-dark);}
.gm-pay-hint{margin:8px 0 12px;font-size:12px;line-height:1.6;color:#8a9a78;}
.gm-pay-hint.warn{color:#d4491d;font-weight:700;}
.gm-pay-box .btn-full{margin:0;}
.gm-pay-charge{
  display:block;margin-top:9px;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--point-dark);text-decoration:none;
}
.gm-pay-charge:hover{text-decoration:underline;}

/* 기타결제(카드·계좌이체·가상계좌) — 예치금 버튼 바로 아래 */
.gm-pay-box .gm-etc-pay{margin-top:8px;background:#fff;}
.gm-pay-etc-note{margin:7px 0 0;font-size:11.5px;line-height:1.55;color:#8a9a78;text-align:center;}

/* ── 수령인 입력 모달 ──
   머리말(닫기 X)은 항상 보이게 고정하고 본문만 스크롤한다.
   모바일 100vh 가 URL 바를 포함해 실제보다 커지는 문제 때문에 dvh 를 우선 사용. */
.gm-recv-dim{position:fixed;inset:0;background:rgba(28,30,24,.5);z-index:200000;touch-action:none;}
.gm-recv-modal{
  position:fixed;z-index:200001;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  overflow:hidden;display:flex;
  background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.gm-recv-modal[hidden],.gm-recv-dim[hidden]{display:none;}
.gm-recv-modal > form{display:flex;flex-direction:column;width:100%;min-height:0;max-height:100%;}
.gm-recv-modal .rm-head{
  position:relative;flex:0 0 auto;padding:20px 52px 14px 22px;border-bottom:1px solid #f0f0ec;background:#fff;
}
.gm-recv-modal .rm-head b{display:block;font-size:17px;font-weight:900;letter-spacing:-0.3px;}
.gm-recv-modal .rm-target{
  display:block;margin-top:4px;font-size:12.5px;color:#9a9a95;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gm-recv-modal .rm-close{
  position:absolute;right:16px;top:16px;width:32px;height:32px;border-radius:50%;
  border:0;background:#f4f4f2;color:#7d7d78;font-size:20px;line-height:1;cursor:pointer;
}
.gm-recv-modal .rm-close:hover{background:#eaeae6;color:#333;}
.gm-recv-modal .rm-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:18px 22px 6px;
}
.gm-recv-modal .rm-row{margin-bottom:14px;}
.gm-recv-modal .rm-row > label{display:block;font-size:13px;font-weight:700;color:#5c5c5c;margin-bottom:6px;}
.gm-recv-modal .rm-row > label em{font-style:normal;color:#e0501e;}
.gm-recv-modal .inp{
  width:100%;box-sizing:border-box;height:44px;padding:0 13px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-size:14px;font-family:inherit;color:var(--txt);outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.gm-recv-modal .inp:focus{border-color:var(--point);box-shadow:0 0 0 4px #eef6e2;}
.gm-recv-modal .inp[readonly]{background:#f7f7f5;color:#6d6d68;}
.gm-recv-modal .rm-addr{display:flex;flex-direction:column;gap:8px;}
.gm-recv-modal .rm-zip{display:flex;gap:8px;}
.gm-recv-modal .rm-zip .inp{width:150px;flex:0 0 auto;}
.gm-recv-modal .rm-zip .btn{height:44px;padding:0 16px;white-space:nowrap;}
.gm-recv-modal .rm-foot{
  flex:0 0 auto;display:flex;gap:10px;padding:14px 22px 20px;
  border-top:1px solid #f0f0ec;background:#fff;
}
.gm-recv-modal .rm-foot .btn{flex:1;height:46px;}

@media (max-width:768px){
  .ci-recv{padding:10px;}
  .ci-recv .rv-btns{width:100%;}
  .ci-recv .rv-btn{flex:1;}
  /* 모바일 : 화면 아래에 붙는 바텀시트 — 위로 넘쳐 X 를 못 누르던 문제 해결 */
  .gm-recv-modal{
    left:0;right:0;bottom:0;top:auto;transform:none;
    width:auto;max-width:none;border-radius:18px 18px 0 0;
    /* 상단 메뉴 영역과 항상 떨어지도록 여유(64px)를 남긴다 */
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
  }
  .gm-recv-modal .rm-head{padding:16px 48px 12px 16px;}
  .gm-recv-modal .rm-body{padding:14px 16px 6px;}
  .gm-recv-modal .rm-foot{padding:12px 16px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));}
  .gm-recv-modal .rm-zip .inp{width:120px;}
}

/* ============================================================
   카트주문 2차 (2026-07-27) : 마이페이지 레이아웃 편입 + 옵션(라인) 단위 목록
   ============================================================ */
/* 사이드 메뉴가 붙어 폭이 좁아지므로 요약 컬럼을 줄이고 좁은 화면에서는 세로로 쌓는다 */
#sod_bsk .my-layout > section{min-width:0;}
#sod_bsk .my-layout.gm-nomy{grid-template-columns:1fr;}
#sod_bsk .cart-layout{grid-template-columns:minmax(0,1fr) 300px;gap:22px;}
@media (max-width:1180px){
  #sod_bsk .cart-layout{grid-template-columns:1fr;}
  #sod_bsk .summary{position:static;}
}

/* 옵션 라벨 (라인 단위 표시) */
.ci-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ci-opt .gm-opt-tag{
  display:inline-block;padding:3px 9px;border-radius:8px;
  background:#f1f6ea;border:1px solid #dfebcd;color:var(--point-dark);
  font-size:12px;font-weight:800;
}

/* 라인 개별 삭제 버튼 */
.gm-line-del{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:#fff;color:#9a9a95;font-size:17px;line-height:1;
  transition:border-color .15s, color .15s, background .15s;
}
.gm-line-del:hover{border-color:#e0866a;color:#d4491d;background:#fdf5f2;}

.gm-sum-note{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:#9a9a95;}

@media (max-width:768px){
  .gm-line-del{width:42px;height:42px;}
}

/* ============================================================
   카트주문 3차 (2026-07-27)
   - 우편번호 검색 새창 → 모달 내 레이어
   - 도서산간 추가배송비 배지
   - 모바일 버튼 글씨 넘침 개선
   ============================================================ */

/* 도서산간 배지 */
.ci-meta .gm-ship-badge.isl{background:#fdf3ec;color:#c05621;}

/* 우편번호 검색 레이어 (모달 안에서 열린다) */
.gm-recv-modal .rm-zip-layer{
  position:relative;margin-top:8px;border:1.5px solid var(--line);border-radius:12px;
  overflow:hidden;background:#fff;height:420px;
}
.gm-recv-modal .rm-zip-layer[hidden]{display:none;}
.gm-recv-modal .rm-zip-layer #gm_zip_wrap{width:100%;height:100%;}
.gm-recv-modal .rm-zip-close{
  position:absolute;right:8px;top:8px;z-index:5;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.95);color:#666;
  font-size:17px;line-height:1;cursor:pointer;
}
.gm-recv-modal .rm-zip-close:hover{background:#f2f2ee;color:#222;}

/* ---------- 모바일 : 버튼 글씨 넘침 방지 ---------- */
@media (max-width:768px){
  /* 상단 선택바 : 3개 버튼이 한 줄에 밀리며 글씨가 삐져나가던 문제 → 2열 그리드 */
  .cart-select-bar .gm-sel-btns{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;
  }
  .cart-select-bar .gm-sel-btns .gm-sel-btn{
    width:100%;min-width:0;height:auto;min-height:40px;padding:8px 10px;
    justify-content:center;text-align:center;font-size:12.5px;line-height:1.35;
    white-space:normal;word-break:keep-all;
  }
  .cart-select-bar .gm-sel-btns .gm-sel-btn.point{grid-column:1 / -1;}

  /* 수량/옵션수정/삭제 줄 : 좁은 폭에서 줄바꿈 허용 */
  #sod_bsk .gm-qty-wrap{gap:8px;flex-wrap:wrap;justify-content:flex-start;}
  #sod_bsk .stepper{flex:0 0 auto;}
  #sod_bsk .gm-mod-opt{
    flex:1 1 auto;min-width:0;height:42px;padding:0 10px;justify-content:center;
    font-size:12.5px;white-space:nowrap;
  }
  #sod_bsk .gm-line-del{flex:0 0 auto;}

  /* 수령인 카드 버튼 */
  .ci-recv .rv-btn{height:34px;font-size:12.5px;white-space:nowrap;}
  .ci-recv .rv-add{height:42px;font-size:13px;}

  /* 요약 박스 버튼 */
  #sod_bsk .summary .btn{
    height:auto;min-height:46px;padding:10px 12px;font-size:14px;line-height:1.35;
    white-space:normal;word-break:keep-all;
  }
  #sod_bsk .gm-pay-box .btn-full{min-height:50px;}

  /* 모달 : 화면 밖으로 나가지 않게 */
  .gm-recv-modal .rm-foot .btn{height:46px;font-size:14px;white-space:nowrap;}
  .gm-recv-modal .rm-zip{flex-wrap:wrap;}
  .gm-recv-modal .rm-zip .inp{width:calc(100% - 108px);}
  .gm-recv-modal .rm-zip .btn{padding:0 12px;font-size:13px;white-space:nowrap;}
  .gm-recv-modal .rm-zip-layer{height:min(340px,50dvh);}
}

@media (max-width:400px){
  .cart-select-bar .gm-sel-btns{grid-template-columns:1fr;}
  #sod_bsk .gm-mod-opt{flex:1 1 100%;order:3;}
}

/* 선택바 2단 구성 (2026-07-28) : 1행=엑셀양식/선택삭제/비우기, 2행=수령인 일괄등록 */
.cart-select-bar{flex-wrap:wrap;}
/* PC : 위 버튼줄과 확실히 떨어뜨린다 (2026-07-28) */
.cart-select-bar .gm-sel-btns-2nd{
  width:100%;margin-top:18px;padding-top:14px;
  border-top:1px dashed var(--line);justify-content:flex-end;
}
.cart-select-bar .gm-sel-btn.excel{border-color:#cddcc0;color:#5a7a3a;background:#f9fbf5;font-weight:800;}
.cart-select-bar .gm-sel-btn.excel:hover{border-color:var(--point);color:var(--point-dark);background:#f1f6ea;}
.gm-recv-modal .rm-hint{margin:2px 0 0;font-size:11.5px;color:#a5a5a0;line-height:1.6;}
@media (max-width:768px){
  .cart-select-bar .gm-sel-btns-2nd{margin-top:8px;padding-top:8px;}
  .cart-select-bar .gm-sel-btns-2nd .gm-sel-btn{grid-column:1 / -1;}
}
@media (hover:none){
  .cart-select-bar .gm-sel-btn.excel:hover{border-color:#cddcc0;color:#5a7a3a;background:#f9fbf5;}
}