/* benefit_hero.css v1.4.2 (2026-09-05 모바일 2열 교정; 09-03 카드 2장: 단품+택배 4박스) — 더큰혜택(benefit.do) 최상단 "26년 하반기 최고 기대주!" 카드 섹션.
   .gnbp .bnc_sec 스코프 · 두레카드(.pgrid > li.dcz) 단독 1장 + 특징 패널 · PC 2열 / 모바일 카드 위·패널 아래
   v1.2: 특징 패널 = 좌 45% 텍스트(상단 정렬) + 우 55% 배너 이미지(크림→투명 마스크) + 콩 톤 그라데이션 + 콩 실루엣 SVG(.18)
   마크업 include/comm/bnhero_jangdan.jsp · 데이터 js/comm/bn_hero.js · 섹션 제목은 .gnbp .stitle 위계 그대로
   토큰: 크림 #f9f4ea · 콩 베이지 #efe3cf / #ead9bd · 딥그린 #3d6041 · 먹 #1d271e. 다른 섹션(.gnbp_hero·bnspot·반짝혜택) 무접촉 */
.gnbp .bnc_sec{ padding-top:10px; }
.gnbp .bnc_wrap{ display:grid; grid-template-columns:276px minmax(0,1fr); gap:20px 22px; align-items:stretch; }
.gnbp .bnc_sec--2 .bnc_wrap{ grid-template-columns:572px minmax(0,1fr); }
.gnbp .bnc_sec--2 .bnc_grid{ grid-template-columns:1fr 1fr; gap:20px; }
.gnbp .bnc_card .pctag .bnc_gift{ background:#1f5fa8; }
.gnbp .bnc_card .bnc_dlv{ background:#eaf4fb; color:#1f5fa8; border-color:#cfe6f5; }
.gnbp .bnc_card--gift{ background:#f4f9fd; }
/* 카드: 기존 .pgrid 카드 규칙(비율·모서리·담기)을 그대로 상속. 1열 그리드로만 좁힌다 */
.gnbp .bnc_grid{ grid-template-columns:1fr; gap:0; }
.gnbp .bnc_grid > li{ height:100%; }
.gnbp .bnc_card .pctag .bnc_new{ background:#3d6041; color:#fff; font-weight:800; letter-spacing:.04em; }
.gnbp .bnc_card .pctag .bnc_dc[hidden]{ display:none; }
.gnbp .bnc_card .bnc_halt[hidden]{ display:none; }
.gnbp .bnc_card .bnc_price[hidden]{ display:none; }
.gnbp .bnc_card .bnc_price .dc[hidden], .gnbp .bnc_card .bnc_price .old[hidden]{ display:none; }
.gnbp .bnc_card .bnc_soon{ margin:6px 0 0; font-size:13px; font-weight:700; color:#8a6a2c; line-height:1.4; }
.gnbp .bnc_card .bnc_soon[hidden]{ display:none; }
.gnbp .bnc_card .pc_cart{ min-height:44px; }
.gnbp .bnc_card .pc_cart[aria-disabled="true"]{ background:#e4e0d2; color:#6c7268; border-color:#e4e0d2; pointer-events:none; }
/* 특징 패널 */
.gnbp .bnc_feat{ position:relative; min-width:0; min-height:100%; border-radius:15px; border:1px solid #e6d7b8; overflow:hidden;
  background:linear-gradient(112deg,#f9f4ea 0%,#f5ecdb 48%,#efe3cf 100%); }
.gnbp .bnc_fimg{ position:absolute; top:0; right:0; bottom:0; width:55%; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 22%,#000 46%); mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 22%,#000 46%); }
.gnbp .bnc_fimg[hidden]{ display:none; }
.gnbp .bnc_fimg_i{ display:block; width:100%; height:100%; object-fit:cover; object-position:62% 50%; }
.gnbp .bnc_bean{ position:absolute; right:22px; bottom:-14px; width:210px; height:auto; z-index:1; opacity:.18; pointer-events:none; }
.gnbp .bnc_ftext{ position:relative; z-index:2; width:45%; min-width:0; padding:26px 8px 24px 30px; }
.gnbp .bnc_fhead{ margin:0; font-family:'Pretendard','Noto Sans KR',sans-serif; font-size:26px; font-weight:800; letter-spacing:-.025em; line-height:1.25; color:#1d271e; word-break:keep-all; }
.gnbp .bnc_flist{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
.gnbp .bnc_flist li{ display:flex; align-items:flex-start; gap:10px; font-size:16px; line-height:1.45; color:#2f3a31; word-break:keep-all; }
.gnbp .bnc_flist li svg{ flex:0 0 18px; margin-top:3px; }
.gnbp .bnc_fnote{ margin:18px 0 0; padding-top:14px; border-top:1px dashed #d8c9a8; font-size:13.5px; line-height:1.5; color:#6b6558; }
.gnbp .bnc_fnote b{ color:#3d6041; font-weight:800; }
@media (max-width:1100px){
  .gnbp .bnc_wrap{ grid-template-columns:250px minmax(0,1fr); }
  .gnbp .bnc_sec--2 .bnc_wrap{ grid-template-columns:1fr; }
  .gnbp .bnc_sec--2 .bnc_grid{ grid-template-columns:1fr 1fr; max-width:600px; }
  .gnbp .bnc_ftext{ width:50%; }
  .gnbp .bnc_fimg{ width:50%; }
}
@media (max-width:900px){
  .gnbp .bnc_sec{ padding-top:6px; }
  /* 모바일 섹션 제목이 두 줄로 꺾이지 않게: 캡션을 제목 아래 줄로 내림 */
  .gnbp .bnc_sec .stitle{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
  .gnbp .bnc_sec .stitle h3{ white-space:nowrap; }
  .gnbp .bnc_sec .stitle .scap{ flex:1 1 100%; margin:0; }
  .gnbp .bnc_wrap{ grid-template-columns:1fr; gap:12px; }
  .gnbp .bnc_grid{ grid-template-columns:minmax(0,62%); justify-content:center; }
  .gnbp .bnc_sec--2 .bnc_grid{ grid-template-columns:1fr 1fr; gap:10px; max-width:none; }
  .gnbp .bnc_feat{ min-height:0; border-radius:14px; }
  /* 모바일 = 패널 상단 16:9 이미지 밴드 + 텍스트 아래 */
  .gnbp .bnc_fimg{ position:relative; width:100%; aspect-ratio:16/9; -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,0) 100%); }
  .gnbp .bnc_fimg_i{ object-position:50% 45%; }
  .gnbp .bnc_bean{ width:150px; right:10px; bottom:-10px; opacity:.16; }
  .gnbp .bnc_ftext{ width:100%; padding:6px 18px 16px; }
  .gnbp .bnc_fhead{ font-size:20px; }
  .gnbp .bnc_flist{ gap:9px; margin-top:12px; }
  .gnbp .bnc_flist li{ font-size:15px; }
  .gnbp .bnc_fnote{ margin-top:14px; padding-top:11px; font-size:12.5px; }
}

/* [v1.4.0 2026-09-03] 팀장(신데브): "장단콩 특징이 먼저 노출하고 하단에 상품 노출" — 2카드 섹션을 세로 구성으로: 특징 패널(가로형) 위, 카드 2장 아래 */
.gnbp .bnc_sec--2 .bnc_wrap{ grid-template-columns:1fr; gap:18px; }
.gnbp .bnc_sec--2 .bnc_feat{ order:-1; min-height:0; }
.gnbp .bnc_sec--2 .bnc_grid{ grid-template-columns:1fr 1fr; gap:20px; max-width:none; }

/* [v1.4.1 2026-09-03] 팀장: "장단콩 상품 왜 이리 커?" — 세로 구성에서 카드 2장이 절반씩(570px) 차지하던 것을 표준 4열 규격(≈275px)으로. 카드 2장은 왼쪽부터, 나머지 칸은 비움 */
/* [v1.4.2 2026-09-05] 팀장 "모바일 더큰혜택 장단콩 카드 확인" — v1.4.1의 4열 규칙이 미디어쿼리 밖(무조건)이라 모바일에서 카드가 4열 75px로 찌그러짐(신데브만, 운영은 v1.3.0). 4열은 PC(≥901)만, 모바일은 패널 위 + 카드 2열(각 ≈175px) + 가격줄 줄바꿈 금지. */
@media (min-width:901px){
  .gnbp .bnc_sec--2 .bnc_grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
}
@media (max-width:900px){
  .gnbp .bnc_sec--2 .bnc_grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .gnbp .bnc_card .bnc_price{ white-space:nowrap; }
  .gnbp .bnc_card .bnc_price .old{ display:block; white-space:nowrap; }
}
.gnbp .bnc_sec--2 .bnc_grid > li{ min-width:0; }

/* ── [2026-09-06 v1.4.3 · 팀장 "히어로가 답답하고 사진이 잘려"] PC 특집 카드 ────────────
   원인: 카드 높이 276px 에 824x750 사진을 cover 로 채워 위아래 55% 가 잘림(두유 팩 상하 절단).
   조치: 카드 최소높이 360px + 사진은 contain(전체 보임) 으로 오른쪽 패널에 앉히고, 사진의 베이지 배경과
   카드 크림이 만나는 왼쪽·위 경계는 마스크로 녹인다. 모바일(≤900px) 규칙은 그대로. */
@media (min-width:901px){
  .gnbp .bnc_feat, .gnbp .bnc_sec--2 .bnc_feat{ min-height:380px; } /* .bnc_sec--2 .bnc_feat{min-height:0}(0,3,0) 보다 같은 특이도로 뒤에 두어 이긴다 */
  .gnbp .bnc_fimg{ width:50%; -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0, #000 26%); mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0, #000 26%); }
  .gnbp .bnc_fimg_i{ object-fit:contain; object-position:90% 60%; transform:scale(1.06); transform-origin:90% 60%; }
  .gnbp .bnc_bean{ opacity:.12; }
}