/* ==========================================================
   와우오더 — 도입 혜택 섹션 (히어로 바로 아래)
   세로 카드 3장(지원금 · 토스 풀세트 · 충전 스테이션)을 나란히 두고
   카드 사이에 + 를 겹쳐 "세 가지를 다 준다"로 읽히게 한다.
   글자는 HTML, 그림은 누끼 이미지(/img/event/)
   ========================================================== */

/* 섹션 — 배경만 화면 끝까지, 내용은 1280 컨테이너 */
/* main.css 의 .page-table section(여백)·.page-table h2(Paperlogy 글꼴)보다 이기도록 section.ev / .ev .ev__title 로 쓴다 */
section.ev { position: relative; overflow: hidden; padding: 132px 0 120px; background: #fff; }
.ev::before {                                   /* 토스 커튼 느낌 파스텔 배경 — 은은하게 */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/event/event-bg.webp") center / cover no-repeat; opacity: .3;
}
.ev__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 80px; }

/* 머리 — 가운데 */
.ev__head { margin-bottom: 52px; text-align: center; }
.ev__label { margin-bottom: 14px; font-size: 18px; font-weight: 700; line-height: 1.4; color: #6b7280; }
.ev .ev__title { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 44px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #171717; }

/* 카드 줄 — 세로 카드 3장, 사이에 + */
.ev__row { position: relative; display: grid; grid-template-columns: 1fr 0 1.36fr 0 1fr; column-gap: 6px; height: 580px; margin: 0 -10px; }  /* 가운데 토스 카드만 살짝 넓게 — 줄을 양옆 10px 늘려 양옆 카드 폭은 그대로 */
.ev-card { position: relative; overflow: hidden; border-radius: 22px; padding: 38px 34px; isolation: isolate; }
.ev-card__txt { position: relative; z-index: 2; }
.ev-card__sub { display: block; margin-bottom: 8px; font-size: 19px; font-weight: 600; line-height: 1.4; color: #5c5c5c; }
.ev-card__tit { font-size: 31px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #171717; }
.ev-card__tit em { font-style: normal; color: #1d63e6; }

.ev-card--yellow { background: linear-gradient(180deg, #ffe17a 0%, #fdcd27 100%); }
.ev-card--yellow .ev-card__sub { color: rgba(23, 23, 23, .66); }
.ev-card--blue   { background: linear-gradient(180deg, #f1f6fd 0%, #d7e4f7 100%); }
.ev-card--gray   { background: linear-gradient(180deg, #f6f4f0 0%, #e6e0d6 100%); }

/* 자세히 보기 — 충전 스테이션 카드만 → /fire_protection_multistation
   투명 바탕 + 먹색 1.5px 테두리 + 긴 화살표(다른 페이지로 넘어감 — 히어로 버튼과 같은 화살표). 그림자 없음.
   마우스를 올리면 먹색으로 채워지고 화살표가 조금 나아간다 */
.ev-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 9px 15px 9px 18px; border: 1.5px solid #171717; border-radius: 100px;
  font-size: 14px; font-weight: 700; line-height: 1; color: #171717; transition: background-color .2s, color .2s;
}
.ev-more__arr { display: block; width: 16px; height: 16px; transition: transform .2s; }
.ev-more__arr svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev-more:hover { background: #171717; color: #fff; }
.ev-more:hover .ev-more__arr { transform: translateX(3px); }
.ev-more:focus-visible { outline: 2px solid #1d63e6; outline-offset: 3px; }

/* 그림(누끼) — 카드 아래쪽 */
.ev-obj { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); margin: 0; pointer-events: none; }
.ev-obj img { display: block; width: 100%; height: auto; max-width: none; }
.ev-obj--cash    { width: 104%; bottom: -6%; }
.ev-obj--toss    { width: 95.6%; bottom: -2%; }     /* 카드 배경만 넓히고 기기 그림 크기는 그대로(약 432px) */
.ev-obj--station { width: 96%;  bottom: -4%; }
.ev-obj img.ev-pb {                                  /* 스테이션 앞 왼쪽에 세운 보조배터리 */
  position: absolute; left: 24%; bottom: 14%; width: auto; height: 31%; transform: translateX(-50%);
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .28));
}

/* 기기 이름표 — 흰 알약 */
.ev-tag {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  padding: 6px 11px; border-radius: 100px; background: #fff;
  font-size: 13px; font-weight: 700; line-height: 1; color: #171717; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(23, 23, 23, .14);
}
.ev-tag--c { transform: translateX(-50%); }   /* --x 가 기기 가운데 */
.ev-tag--new { padding: 7px 12px 8px; border-radius: 12px; text-align: center; }   /* 위에 파란 NEW 한 줄 */
.ev-tag--new b { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #1d63e6; }

/* + — 카드 사이 틈에 겹쳐 놓는 원 */
.ev__plus { position: relative; z-index: 3; align-self: center; }
.ev__plus::before {
  box-sizing: border-box;                       /* 테두리 포함 60px — 사이트 공통 리셋은 가상요소에 border-box 를 안 준다 */
  content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #6b7280; border: 5px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}
.ev__plus::after {
  box-sizing: border-box;
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%);
  background:
    linear-gradient(#fff, #fff) center / 20px 3px no-repeat,
    linear-gradient(#fff, #fff) center / 3px 20px no-repeat;
}

/* 최근 상담 신청 알림 — 카드 아래 가운데, 알림 카드 한 장 (실제 기록이 있을 때만)
   한 줄 = 이름(굵게) + 문장 + 오른쪽 시간. 기록이 더 있으면 뒤에 알림 1~2장이 겹쳐 보인다(data-stack) */
.ev-live { position: relative; width: 420px; max-width: 100%; margin: 64px auto 0; isolation: isolate; }
.ev-live[hidden] { display: none; }
.ev-live::before,
.ev-live::after {                                 /* 뒤에 쌓인 알림 — 기록 수만큼만, 아래로 10px씩 비져나온다 */
  content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1; display: none;
  width: 100%; height: 100%; border-radius: 20px;
  border: 1px solid rgba(23, 23, 23, .06); box-shadow: 0 4px 14px rgba(23, 23, 23, .05);
  transform-origin: 50% 100%;
}
.ev-live::before { background: #fafbfc; transform: translate(-50%, 10px) scale(.94); }
.ev-live::after  { background: #f3f4f6; transform: translate(-50%, 20px) scale(.88); z-index: -2; }
.ev-live[data-stack="1"]::before,
.ev-live[data-stack="2"]::before,
.ev-live[data-stack="2"]::after { display: block; }

.ev-noti {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 24px;
  border: 1px solid rgba(23, 23, 23, .06); border-radius: 20px; background: #fff;
  box-shadow: 0 4px 14px rgba(23, 23, 23, .09);
  transform-origin: 50% 100%;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .2s;
}
.ev-noti + .ev-noti { position: absolute; left: 0; top: 0; width: 100%; }                  /* 새 알림은 지난 알림 위에 겹쳐 들어온다 */
.ev-noti.is-enter { opacity: 0; transform: translateY(-16px); transition: none; }            /* 위에서 내려오고(금방 불투명해져 뒤 글자가 비치지 않게) */
.ev-noti.is-leave { opacity: 0; transform: translateY(10px) scale(.94); transition-duration: .55s, .45s; }   /* 지난 알림은 뒤 알림 자리로 들어간다 */

.ev-noti__msg  { font-size: 16px; font-weight: 500; line-height: 1.4; color: #333; white-space: nowrap; }
.ev-noti__name { font-weight: 700; color: #171717; }
.ev-noti__time { flex: none; font-size: 14px; font-weight: 500; line-height: 1.4; color: #9aa0a8; white-space: nowrap; }

/* 태블릿 */
@media (max-width: 1199px) {
  .ev__inner { padding: 0 40px; }
  .ev__row { height: 520px; }
  .ev-card { padding: 30px 26px; }
  .ev-card__tit { font-size: 26px; }
  .ev-card__sub { font-size: 17px; }
}
/* 세로로 쌓기 — + 는 카드 사이 위아래 틈에 */
@media (max-width: 899px) {
  section.ev { padding: 96px 0 88px; }
  .ev__row { grid-template-columns: 1fr; height: auto; row-gap: 8px; column-gap: 0; margin: 0; }
  .ev-card { height: 400px; }
  .ev-card--blue { height: 470px; }
  .ev__plus { height: 0; align-self: auto; }
  .ev-obj--cash    { width: min(72%, 330px); }
  .ev-obj--toss    { width: min(90%, 400px); }
  .ev-obj--station { width: min(64%, 300px); }
  .ev-more { position: absolute; right: 0; top: 0; margin: 0; }   /* 세로로 쌓이면 그림과 겹치지 않게 카드 오른쪽 위로 */
}
@media (max-width: 599px) {
  section.ev { padding: 80px 0 72px; }
  .ev__inner { padding: 0 20px; }
  .ev__label { margin-bottom: 10px; font-size: 15px; }
  .ev .ev__title { font-size: 28px; }
  .ev__head { margin-bottom: 30px; }
  .ev-card { height: 360px; padding: 26px 22px; border-radius: 18px; }
  .ev-card--blue { height: 480px; }
  .ev-card__sub { font-size: 15px; margin-bottom: 4px; }
  .ev-card__tit { font-size: 23px; }
  .ev-obj--cash    { width: 84%; }
  .ev-obj--toss    { width: 86%; }
  .ev-obj--station { width: 76%; }
  .ev__plus::before { width: 50px; height: 50px; border-width: 4px; }
  .ev-live { width: 100%; max-width: 350px; margin-top: 44px; }
  .ev-live::before,
  .ev-live::after,
  .ev-noti { border-radius: 18px; }
  .ev-noti { gap: 12px; padding: 16px 18px; }
  .ev-noti__msg { font-size: 14px; }
  .ev-noti__time { font-size: 12px; }
  .ev-tag { padding: 5px 9px; font-size: 11px; }
  .ev-more { padding: 7px 12px 7px 14px; gap: 6px; font-size: 12.5px; }
  .ev-more__arr { width: 14px; height: 14px; }
}