@charset "utf-8";
/* ============================================================================
 * life_band.css v1.0.0 (2026-10-19) — 생명나눔한마당 2026 상단 임시 디자인(PC·모바일)
 *   팀장 지시 2026-10-19: "상단에 임시 디자인, 모바일도, 생명나눔한마당 분위기를 올릴 수 있도록" · 아스트라 공동 기획.
 *   [무엇] ① 맨 위 얇은 안내 띠(.lnzb) — 취지 한 줄 + 기간 + 기획전으로 이동 + 닫기(오늘 하루)
 *          ② GNB 메뉴 한 칸 "생명나눔"(a.lifegnb) — 새싹 아이콘(인라인 SVG, 색은 글자색을 따름)
 *   [규칙] 헤더 정돈 규칙서(header_clean.css) 그대로 — 두레 진초록 #3D6041 + 크림, 그라디언트 0, 그림자 0, 금색 채움 0.
 *          크림 #F7F5ED 위 진초록 글자 대비 6.5:1. 움직임은 넣지 않는다(움직임 줄이기 설정과 무관하게 정적).
 *   [범위] 선택자는 .lnzb / a.lifegnb / html.lnzb-on 으로만 — 기존 헤더 시트(style_v2·header_clean·gnb_page) 무수정.
 *          PC 와 모바일 선택자가 서로 배타적(.header_wrap … / header.head_def …)이라 한 파일에 둔다.
 *   [높이] PC 36px(문서 흐름, 헤더 위에 얹힘 → 스크롤하면 같이 올라감). 모바일 44px(고정 헤더 안 맨 위).
 *          모바일은 헤더가 fixed 라 본문이 44px 가려진다 → html.lnzb-on 일 때 body padding-top 44px 로 비켜 준다
 *          (큰 글씨로 띠가 두 줄이 되면 js/comm/life_band.js 가 실측값으로 덮어쓴다 — 요소 인라인 style 아님, <style id=lnzbDyn>).
 *   [원복] 11월 1일 이후 두 JSP 의 표시 줄 + include/comm/lifeGate.jspf + 이 파일 + js/comm/life_band.js 삭제.
 * ========================================================================== */

/* --- 0) 공통 : 띠 --------------------------------------------------------- */
/* v1.1.0 (2026-10-19 팀장: "황금빛 벼가 있는 논을 배경에") — 크림 바탕 → 황금 들판 사진(images/comm/life_band_rice_*.jpg, AI 생성·글자 없음)
   + 먹초록 막 60%(단색 rgba, 그라디언트 아님) 위에 흰 글자. 흰 #FFF 대 막+사진 최암부 대비 ≥ 7:1, 최명부(황금 하이라이트에 60% 막) ≈ 4.6:1.
   사진은 PC 1920x112·모바일 780x104 (각 2배 해상도), 띠가 커지면 cover 로 채운다. 영상은 상단에 넣지 않는다(데이터·움직임 줄이기). */
.lnzb{
  background-color:#4A5A3C;                       /* 사진 로드 전·실패 시 바탕(황금빛 들판의 평균 톤에 가까운 올리브) */
  background-image:linear-gradient(rgba(42,53,43,.60), rgba(42,53,43,.60)), url("../../images/comm/life_band_rice_pc.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border-bottom:1px solid #E9E4D8;
  color:#fff;
  font-family:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  letter-spacing:-.02em;
}
.lnzb_in{ display:flex; align-items:center; }
.lnzb_link{
  display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto;
  color:#fff; text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.lnzb_link:hover .lnzb_cta, .lnzb_link:focus-visible .lnzb_cta{ text-decoration:underline; text-underline-offset:3px; }
.lnzb_leaf{ flex:0 0 16px; width:16px; height:16px; display:block; }
.lnzb_txt{ font-weight:700; }
.lnzb_date{ font-weight:500; opacity:.85; font-variant-numeric:tabular-nums; white-space:nowrap; }
.lnzb_cta{ font-weight:700; white-space:nowrap; }
.lnzb_x{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; margin:0; cursor:pointer; color:#fff; border-radius:8px;
}
.lnzb_x svg{ display:block; width:16px; height:16px; }
.lnzb_x:hover{ background-color:rgba(255,255,255,.16); }
.lnzb_x:focus-visible, .lnzb_link:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* --- 1) PC : 헤더 위 44px 한 줄 (내용은 .inner 1140px 정렬) --------------- */
/* v1.2.0 (2026-10-19 팀장 "최상단 디자인 다시") — 띠 56→44px 로 얇게, 대신 로고 줄(.head_visual) 뒤에 같은 들판 사진을
   흰 막 86% 로 아주 옅게 깔아 띠와 로고 줄이 한 톤으로 이어진다. 로고·검색·아이콘 글자는 흰 바탕과 같은 대비(막 86%). */
.header_wrap_lnzb .lnzb_in{ min-height:44px; }
.header_wrap_lnzb .lnzb_link{ font-size:14px; line-height:20px; padding:6px 0; }
.header_wrap.lnz-hd .head_visual{
  background-color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)), url("../../images/comm/life_band_rice_pc.jpg");
  background-size:cover; background-position:center 40%; background-repeat:no-repeat;
}
.header_wrap_lnzb .lnzb_date{ margin-left:4px; }
.header_wrap_lnzb .lnzb_cta{ margin-left:10px; }
.header_wrap_lnzb .lnzb_cta:after{ content:"›"; margin-left:3px; }
.header_wrap_lnzb .lnzb_x{ width:32px; height:32px; margin-left:12px; }

/* --- 2) PC : GNB 메뉴 "생명나눔" — 글자 앞 새싹 16px, 활성은 기존 a.on 밑줄 그대로 --- */
.head_menu_wrap .menu_list li a.lifegnb{ display:inline-flex; align-items:center; gap:5px; }
.head_menu_wrap .menu_list li a.lifegnb .lnz_sp{ display:block; width:16px; height:16px; flex:0 0 16px; }

/* --- 3) 모바일 : 고정 헤더(header.head_def) 안 맨 위 44px ------------------- */
header.head_def .lnzb{ width:100%; background-image:linear-gradient(rgba(42,53,43,.60), rgba(42,53,43,.60)), url("../../images/comm/life_band_rice_m.jpg"); }
header.head_def .lnzb_in{ min-height:44px; padding:0 4px 0 16px; }
header.head_def .lnzb_link{ font-size:13.5px; line-height:18px; padding:5px 0; gap:6px; }
header.head_def .lnzb_txt{ font-weight:700; }
header.head_def .lnzb_date{ font-size:12px; margin-left:2px; }
header.head_def .lnzb_x{ width:44px; height:44px; }
/* 로고 줄(.head_top) 뒤 옅은 들판 — PC 와 같은 어법(흰 막 86%). GNB 줄은 흰색 그대로 */
header.head_def.lnz-hd .head_top{
  background-color:#fff !important;
  background-image:linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)), url("../../images/comm/life_band_rice_m.jpg") !important;
  background-size:cover !important; background-position:center 40% !important; background-repeat:no-repeat !important;
}
/* 본문 비켜 주기 — 띠가 있을 때만(html.lnzb-on). 기본 45px(= min-height 44 + 아래 헤어라인 1), 두 줄이 되면 JS 가 실측값으로 덮어쓴다 */
html.lnzb-on body{ padding-top:45px; }
/* 배송일 안내 말풍선(header_clean.css §2 top:104px)은 헤더 기준이라 띠 높이만큼 같이 내린다(기본 45, 실측은 JS 가 덮어씀) */
html.lnzb-on header.head_def .gnb_r li .tool{ top:149px; }

/* --- 4) 모바일 : GNB 탭 "생명나눔" — 새싹 13px, 활성은 기존 .swiper-slide.on 밑줄 --- */
header.head_def .gnb_wrap .swiper-slide a.lifegnb{ display:inline-flex; align-items:center; gap:4px; }
header.head_def .gnb_wrap .swiper-slide a.lifegnb .lnz_sp{ display:block; width:13px; height:13px; flex:0 0 13px; }

/* --- 5) 큰 글씨 : 한 줄 제한을 두지 않는다(줄바꿈 허용, 말줄임 없음). 날짜·버튼은 줄 끝으로 --- */
html.font_big .lnzb_link{ flex-wrap:wrap; }