@charset "utf-8";
/* =====================================================================
   2026 생명나눔 한마당 행사 띠배너 (.evs) — PC 공통 헤더 맨 위(유틸바 바로 위)
   - 마크업: include/shop/event_strip_2026.jsp (노출 기간 판정도 그 파일)
   - 전부 .evs 스코프. 기존 헤더(.header_wrap/.inner)·레이아웃 CSS 는 건드리지 않는다.
   - 폭: 헤더 내용 열(.inner 1140px)과 같은 폭. 1180px 이하는 좌우 16px 패딩.
   - 768px 이하: 두 줄로 쌓고 버튼은 화살표만 있는 30px 원형.
   - 시안: 두레몰_띠배너_실제헤더.html(위치 A 확정). 잎·화살표 SVG·간격·색·크기 시안값. 글꼴은 사이트 공통 Pretendard(시안은 Noto Sans KR).
   - 신설 2026-10-19. 행사가 끝나면 header.jsp 의 include 1줄과 이 파일·jsp 를 지우면 된다.
   ===================================================================== */

.evs{
  --evs-bg:#F7F2E8;
  --evs-line:#E6DECF;
  --evs-green:#1E6B45;
  --evs-brown:#B9561A;
  --evs-gray:#6B6B66;
  display:block; width:100%; box-sizing:border-box;
  height:44px; background:var(--evs-bg); border-bottom:1px solid var(--evs-line);
  font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  letter-spacing:-.02em; line-height:1;
  -webkit-font-smoothing:antialiased;
}
.evs *{ box-sizing:border-box; }
.evs .evs_in{
  width:1140px; height:100%; margin:0 auto; padding:0;
  display:flex; align-items:center; gap:12px;            /* 시안: 잎 아이콘↔제목 12px */
}
.evs .evs_ic{ flex:0 0 20px; width:20px; height:20px; display:block; }
.evs .evs_tx{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; }
.evs .evs_tit{ flex:0 0 auto; font-size:15px; font-weight:700; color:var(--evs-green); white-space:nowrap; }
.evs .evs_sub{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.evs .evs_dt{ flex:0 1 auto; font-size:14px; font-weight:400; color:var(--evs-gray); white-space:nowrap; }
.evs .evs_pr{ flex:0 0 auto; font-size:14px; font-weight:700; color:var(--evs-brown); white-space:nowrap; }
.evs .evs_pr:before{ content:none; }

/* 버튼 — 30px, 좌우 14px, 완전 둥근 모서리, 흰 글자 13px 굵게 */
.evs .evs_btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:30px; padding:0 14px; margin-left:2px;          /* 쿠폰 문구↔버튼 = .evs_in gap 12 + 2 = 시안 14px */
  background:var(--evs-brown); color:#fff; border-radius:999px;
  font-size:13px; font-weight:700; line-height:1; white-space:nowrap; text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.evs .evs_btn:hover{ background:#A34A14; color:#fff; text-decoration:none; }
.evs .evs_btn:active{ transform:translateY(1px); }
.evs .evs_btn:focus-visible{ outline:2px solid var(--evs-green); outline-offset:2px; }
.evs .evs_btn_a{ display:block; width:14px; height:14px; flex:0 0 14px; }   /* 시안의 화살표 SVG 14px */

/* 내용 열(1140px)보다 좁은 창 — 좌우 16px 거터 */
@media (max-width:1180px){
  .evs .evs_in{ width:auto; padding:0 16px; }
}

/* 모바일(768px 이하) — 두 줄: ① 제목 ② 기간 · 쿠폰 문구, 버튼은 화살표만 있는 30px 원형(오른쪽 끝) */
@media (max-width:768px){
  .evs{ height:auto; padding:8px 0; }
  .evs .evs_in{ align-items:center; gap:8px; }
  .evs .evs_ic{ flex:0 0 18px; width:18px; height:18px; }
  .evs .evs_tx{ flex-direction:column; align-items:flex-start; gap:4px; }
  .evs .evs_tit{ font-size:14px; white-space:normal; line-height:1.2; }
  .evs .evs_sub{ flex:0 1 auto; justify-content:flex-start; gap:0; flex-wrap:wrap; }
  .evs .evs_dt{ font-size:12.5px; white-space:normal; line-height:1.2; }
  .evs .evs_pr{ font-size:12.5px; white-space:normal; line-height:1.2; }
  .evs .evs_pr:before{ content:'·'; margin:0 5px; color:var(--evs-gray); font-weight:400; }
  .evs .evs_btn{ width:30px; height:30px; padding:0; margin-left:auto; border-radius:50%; gap:0; }
  .evs .evs_btn_t{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap; }
  .evs .evs_btn_a{ width:15px; height:15px; flex:0 0 15px; }
}