@charset "UTF-8";
/* ============================================================
   basket_block_view.css — 담기 차단 화면계층 (2026-08-15 신규)
   ------------------------------------------------------------
   서버 가드(BasketGuard)가 "누른 뒤" 막는 것을, 화면에서 "누르기 전"에 알린다.
    · .bbvz-band : 배송불가일 목록 상단 배너 1줄 + [배송일 바꾸기]
    · .bbvz-note : 카드 하단 안내 줄(사유 칩 + 가능일 칩)
    · .bbvz-chip : 사유 칩(주의 톤)
    · .bbvz-when : 가능일 칩(딥그린 아웃라인, 탭하면 배송일 달력)
    · .bbvz-off  : 담기 버튼 비활성(라벨은 유지, 클릭만 차단)

   [스코프 원칙] 전부 bbvz- 프리픽스 전용 클래스. 기존 카드/버튼 규칙에 침투하지 않는다.
     예외는 .pc_cart.bbvz-off 한 줄뿐이고, 기존 목록 CSS(0,4,0)를 이기려고
     화면별 조상 선택자를 함께 적었다(.mrdz 버튼 리셋 함정 교훈 — 특이도는 명시적으로).

   [규격] 시니어 규격 준수 — 본문 14px 하한, 탭 타깃 세로 32px 이상(배너 버튼 44px).
          색 토큰 = 딥그린 #3d6041 / 주의 배경 #fdf4e3·테두리 #f0dcb4·글자 #7a4f12.
   ============================================================ */

/* ── 배송불가일 배너 (목록 상단 · 상세 슬롯 공용) ───────────────────────────── */
.bbvz-band{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 14px; padding:13px 16px;
  background:#fdf4e3; border:1px solid #f0dcb4; border-radius:12px;
  font-size:16px; line-height:1.45; font-weight:700; color:#7a4f12;
}
.bbvz-band .bbvz-band-tx{ flex:1 1 220px; min-width:0; }
.bbvz-band .bbvz-band-btn{
  flex:0 0 auto; min-height:44px; padding:10px 18px;
  background:#3d6041; color:#fff; border:0; border-radius:10px;
  font-size:15px; font-weight:800; letter-spacing:.01em; cursor:pointer;
}
.bbvz-band .bbvz-band-btn:hover,
.bbvz-band .bbvz-band-btn:active{ background:#335137; color:#fff; }

/* ── 카드 하단 안내 줄 ──────────────────────────────────────────────────────
   PC 카드(li)는 flex column(order 로 담기 버튼을 최하단 정렬)이라 order:3 으로 그 아래에 둔다.
   모바일 카드는 일반 블록 흐름이라 마지막 자식으로 자연 배치된다. */
.bbvz-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:0 14px 12px; order:3;
}
.gnbp .pgrid .bbvz-note{ margin:0 8px 10px; }

/* 사유 칩 — 왜 지금 못 담는지 */
.bbvz-chip{
  display:inline-flex; align-items:center;
  font-size:14px; line-height:1.35; font-weight:700; color:#7a4f12;
  background:#fdf4e3; border:1px solid #f0dcb4; border-radius:9px;
  padding:5px 10px; min-height:30px; box-sizing:border-box;
}

/* 가능일 칩 — 탭하면 배송일 달력 레이어 */
.bbvz-when{
  display:inline-flex; align-items:center;
  font-size:14px; line-height:1.35; font-weight:800; color:#3d6041;
  background:#fff; border:1.5px solid #3d6041; border-radius:9px;
  padding:5px 10px; min-height:32px; box-sizing:border-box;
  cursor:pointer; text-align:left;
}
.bbvz-when:hover,
.bbvz-when:active{ background:#eaf1e8; color:#3d6041; border-color:#3d6041; }

/* ── 담기 버튼 비활성 — 라벨은 그대로 두고 회색 처리 + 클릭 차단 ────────────────
   기존 목록 규칙(.product_list_wrap .product_type1 .pc_cart = 0,3,0 /
   .gnbp.gcardz .pgrid .pc_cart:not(.soldout) = 0,4,0)을 이기도록 조상까지 명시. */
.bbvz-off,
.pc_cart.bbvz-off,
.dc-cart.bbvz-off,
.product_list_wrap .product_type1 .pc_cart.bbvz-off,
.gnbp .pgrid .pc_cart.bbvz-off,
.gnbp.gcardz .pgrid .pc_cart.bbvz-off,
.gnbp.gcardz .pgrid .pc_cart:not(.soldout).bbvz-off,
.product_list_wrap .gnbp.gcardz .pgrid .pc_cart:not(.soldout).bbvz-off,
.gvdt .cta .btn.bbvz-off,
/* 2026-08-16 : 상세 하단 고정 주문바(.btn_green)·연관카드(.dc-cart) 는 페이지 규칙이 (0,2,0) 으로
   같은 특이도라 뒤에 오는 쪽이 이겨 회색이 안 먹었다(클릭만 막히고 버튼은 살아 보임 = 08-15 결함).
   태그까지 붙여 (0,2,1) 로 올린다. 담기 제약 통합 안내가 "담을 수 없어요" 라고 말하는 화면에서
   버튼만 초록이면 화면이 두 말을 하게 된다. */
button.btn_green.bbvz-off,
a.btn_green.bbvz-off,
button.dc-cart.bbvz-off,
a.pc_cart.bbvz-off,
/* 실측으로 확인된 승자 규칙(0,3,0) 을 넘기려면 조상까지 적어야 한다 :
   .product_order_wrap .btn_box .btn_green / .product_order_btn_wrap .btn_green / .gvdt .dcz .dc-cart */
.product_order_wrap .btn_box button.btn_green.bbvz-off,
.product_order_btn_wrap button.btn_green.bbvz-off,
.gvdt .dcz button.dc-cart.bbvz-off{
  background:#eeece3; color:#898f85; border-color:#ddd9cb;
  cursor:default; pointer-events:none; box-shadow:none;
}

/* ── 전 화면 확산(2026-08-16) : 담기 버튼 비활성 최종 방어 ─────────────────────
   화면이 목록·상세 둘뿐일 때는 위처럼 조상 선택자를 일일이 적어 이길 수 있었다. 이제 담기 버튼이
   화면마다 다른 클래스로 존재하고(.cb-addbtn ·.cr-addbtn ·.psnl-addbtn ·.msj-addbtn ·.rcb1_add ·
   .cmz_add ·.btn_cart ·.catz-add ·.cfv-add ·.hr_cart ·.cart …), 각자 특이도도 제각각이다
   (예: `.cmz_rail .cmz_card .cmz_add` = 0,3,0 / `.psnl-card.soldout .psnl-addbtn` = 0,3,0).
   전부 열거하면 새 카드가 생길 때마다 빠지고, 빠지면 "못 담는다고 써 놓고 버튼은 초록"이 된다
   (08-15 결함과 같은 모양). 그래서 우리가 소유한 .bbvz-off 한정으로만 !important 를 쓴다 —
   침투 범위는 이 클래스가 붙은 버튼뿐이고, 붙이는 주체도 이 스크립트뿐이다. */
.bbvz-off{
  background:#eeece3 !important; color:#898f85 !important; border-color:#ddd9cb !important;
  cursor:default !important; pointer-events:none !important; box-shadow:none !important;
}
.bbvz-off svg{ stroke:#898f85 !important; color:#898f85 !important; }

/* ── 좁은 카드용 축약형 — 메인 섹션·추천 레일(카드폭 160~220px) ────────────────
   시니어 규격 하한(14px)은 유지하고 여백·둥근모서리만 줄인다. 글자를 더 줄이지 않는다. */
.bbvz-note.bbvz-sm{ margin:6px 10px 10px; gap:4px; }
.bbvz-note.bbvz-sm .bbvz-chip,
.bbvz-note.bbvz-sm .bbvz-when{
  font-size:14px; padding:4px 8px; min-height:28px; border-radius:8px;
  max-width:100%; word-break:keep-all;
}
.bbvz-note.bbvz-sm .bbvz-when{ min-height:30px; }
/* 어느 화면에서도 칩이 카드 밖으로 새지 않게 */
.bbvz-note{ max-width:100%; box-sizing:border-box; }
.bbvz-chip, .bbvz-when{ max-width:100%; word-break:keep-all; }

/* ⚠ .mrdz button 리셋 트랩 (2026-08-16 모바일 메인 실측) ─────────────────────────
   모바일 메인 스킨에 `.mrdz button{border:0;background:none}` 전역 리셋이 있다(특이도 0,1,1).
   가능일 칩 `.bbvz-when` 은 button 이고 (0,1,0) 이라 리셋에 져서, 모바일 메인·산지·예약테마 등
   .mrdz 안에서는 초록 아웃라인과 흰 배경이 통째로 사라지고 글자만 떠 있었다(스크린샷 확인).
   같은 사고가 .rvtm-addbtn·.msj-addbtn 에서 두 번 있었고 처방도 같다 — 조상 클래스를 붙여
   (0,2,0) 으로 올린다. 칩은 늘 .bbvz-note 안에 그려지므로 이 한 줄로 전 화면이 덮인다. */
.bbvz-note .bbvz-when{
  background:#fff; border:1.5px solid #3d6041; border-radius:9px; color:#3d6041;
}
.bbvz-note .bbvz-when:hover,
.bbvz-note .bbvz-when:active{ background:#eaf1e8; border-color:#3d6041; color:#3d6041; }
.bbvz-note.bbvz-sm .bbvz-when{ border-radius:8px; }

/* ── 상세 슬롯 — 카드가 없으므로 배너·안내 줄을 그대로 쓴다 ────────────────── */
.bbv-slot{ display:block; }
.bbv-slot:empty{ display:none; }
.bbv-slot .bbvz-note{ margin:12px 0 0; order:0; }
.bbv-slot .bbvz-band{ margin:12px 0 0; }

/* ── 큰글씨(돋보기·OS 글자확대) 대응 : 칩이 카드폭을 넘지 않게 줄바꿈 허용 ──── */
@media (max-width:420px){
  .bbvz-note{ gap:5px; }
  .bbvz-chip,
  .bbvz-when{ max-width:100%; }
  .bbvz-band{ font-size:15px; padding:12px 14px; }
  .bbvz-band .bbvz-band-btn{ width:100%; }
}

/* ── 기획전(planView) 카드 안내 줄 찌그러짐 교정 — 2026-08-21 ─────────────────
   [증상] 안내 줄(.bbvz-note)을 JS 가 카드에 덧붙일 때 기획전 카드에서 레이아웃이 무너졌다.
    · B형 신디자인(.plan_b) 모바일: 카드가 grid(이미지칼럼 146/112px + 본문칼럼)라
      자동배치된 안내 줄이 "이미지 칼럼(1열)"에 끼어 84px 폭에 칩이 6줄로 세로 찌그러짐
      (운영 1692 실측: 카드 높이 260→380px).
    · 구형 A형(.plan_view_wrap) 모바일: 2열 float 카드(폭 163px)에 안내 줄이 흐름으로
      붙어 카드가 100px 길어지고, absolute 담기 아이콘(bottom:135px)이 본문 위로 떠오름.
    · 장수이야기 커스텀(.jsyc-buy, plan 1692): flex 행 안에 끼어 들여쓰기가 어긋남.
   [처방] 카드 크기·그리드는 유지하고 안내만 자리를 다시 잡는다. 전부 기획전 래퍼
   스코프 한정 — 목록·메인 등 다른 화면 회귀 0. */

/* B형(.plan_b): 안내 줄 = 카드 전폭 하단 줄. 이미지 칼럼에 못 끼게 명시 배치 */
.plan_b .product_type4 .content .bbvz-note{
  grid-column:1 / -1; grid-row:auto;
  margin:4px 0 0; padding-top:8px; border-top:1px solid #f2efe6;
}
/* PC(769px+)는 카드가 flex column — 하단 줄 그대로, 여백만 정리 */
@media (min-width:769px){
  .plan_b .product_type4 .content .bbvz-note{ margin:8px 0 0; }
}

/* A형(.plan_view_wrap): 흐름에서 빼서 정사각 이미지 위 오버레이로.
   카드 높이 불변 → float 2열 그리드·absolute 담기 아이콘 모두 제자리.
   aspect-ratio 미지원 구형 브라우저는 이미지 상단 패널로 자연 폴백. */
.plan_view_wrap .product_type4 .content .bbvz-note{
  position:absolute; top:1px; left:1px; width:calc(100% - 2px); aspect-ratio:1/1;
  margin:0; padding:8px 7px; box-sizing:border-box; z-index:5;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:5px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.9) 74%);
  pointer-events:none;
}
.plan_view_wrap .product_type4 .content .bbvz-note .bbvz-when{ pointer-events:auto; }
/* 담기 아이콘(배경 svg 버튼)은 .bbvz-off 공통 회색배경이 아이콘을 지워 회색 상자가 됨
   → 아이콘은 살리고 흐리게(누르기 전 안내는 오버레이 칩이 말한다) */
.plan_view_wrap .product_type4 .content a.cart.bbvz-off{
  background:url(../../images/mobile/icon_cart.svg) 0 0 no-repeat !important;
  opacity:.35; filter:grayscale(1);
}

/* 장수이야기 카드(.jsyc-buy flex 행): 안내 줄 = 전폭 줄바꿈, 가격·버튼 열과 좌측 정렬 */
.jsyc-buy .bbvz-note{ flex:1 1 100%; order:5; margin:2px 0 0; }
/* .jsyc-cart 는 color:#fff!important(런타임 style) — 뒤에 오는 쪽이 이겨 회색 위 흰글자가 됨
   → 특이도(0,2,1)로 확정 */
a.jsyc-cart.bbvz-off{ background:#eeece3 !important; color:#898f85 !important; }

/* ── 담기 실패 레이어(짧은 문구) — 2026-08-16 ────────────────────────────────
   설명은 상세 상단 통합 블록이 맡는다. 여기는 한 줄 + 그 블록으로 보내는 버튼 하나. */
#lyMessage .bbz-msg{ display:block; font-size:16px; font-weight:700; color:#1b241c; letter-spacing:-.01em; line-height:1.5; }
#lyMessage .bbz-when{ display:block; margin-top:6px; font-size:14px; font-weight:700; color:#3d6041; letter-spacing:-.01em; }
#lyMessage .bbz-go{ display:inline-flex; align-items:center; justify-content:center; margin-top:14px; min-height:44px; padding:0 18px;
  border:1px solid #3d6041; border-radius:22px; background:#eaf1e8; color:#2f4b33; font-family:inherit; font-size:14px; font-weight:700;
  letter-spacing:-.01em; cursor:pointer; }
#lyMessage .bbz-go:hover,
#lyMessage .bbz-go:active{ background:#3d6041; color:#fff; }