/* =====================================================================
   공지/이벤트 팝업(assets/popup.js) 전용 스타일 — 2026-10-13 신설,
   2026-10-13(추가지시) 모바일 UX 보강(시트 높이 제한·터치영역 44px·안전영역·진행도 표시).
    색상 토큰은 assets/shop.css :root 재사용(--ink/--sub/--line/--pt). 새 변수 안 만듦.
   ===================================================================== */

.arvo-pop-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px;
}
.arvo-pop-wrap { display: flex; gap: 16px; max-width: 920px; width: 100%; justify-content: center; flex-wrap: wrap; }

/* 진행도 바("N / 전체" + 다음) — 전체 2건 이상일 때만 생성됨(popup.js) */
.arvo-pop-indicator {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 920px; width: 100%; margin-bottom: 10px;
  color: #fff; font-size: 12.5px; font-weight: 600;
}
.arvo-pop-next {
  border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff;
  border-radius: 999px; padding: 6px 14px; min-height: 30px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.arvo-pop-next:hover { background: rgba(255,255,255,.22); }

.arvo-pop-card {
  position: relative; background: #fff; border-radius: 16px; overflow: hidden; width: 360px; max-width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
}
/* 본문 스크롤 영역 — 모바일 시트에서 카드 전체 높이가 80vh 로 제한되므로(아래) 내용이 길면
   여기만 스크롤되고 상단 닫기 버튼·하단 옵션 버튼은 항상 고정 노출된다. */
.arvo-pop-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
/* 2026-10-14 대표님 지시: 팝업 이미지는 원본 비율 유지(정사각형 강제 크롭 제거) — 세로형 배너 위아래 잘림 방지 */
.arvo-pop-link { display: block; text-decoration: none; color: inherit; }
.arvo-pop-card.image .arvo-pop-link img { width: 100%; height: auto; display: block; max-height: 70vh; object-fit: contain; background: #fff; }
.arvo-pop-noimg { width: 100%; aspect-ratio: 1/1; background: var(--bg-soft, #faf9f6); }

.arvo-pop-card.text .arvo-pop-link { padding: 28px 44px 22px 22px; }  /* 우측 여백 — 플로팅 닫기 버튼과 안 겹치게 */
.arvo-pop-title { font-size: 18px; font-weight: 800; color: var(--ink, #1c1c22); margin-bottom: 10px; line-height: 1.4; }
.arvo-pop-sum { font-size: 14px; color: var(--sub, #8a8a8a); line-height: 1.6; margin-bottom: 16px; }
.arvo-pop-more { display: inline-block; font-size: 13px; font-weight: 700; color: var(--pt, #1a2a5e); }

/* 닫기 — 카드 우상단에 플로팅(이미지형 위에도, 텍스트형 위에도 동일하게 뜬다). 터치영역 44px(모바일 미디어쿼리). */
.arvo-pop-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.45); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.arvo-pop-close:hover { background: rgba(0,0,0,.65); }

/* 숨김 옵션 2개(오늘 하루 / 7일) — 버튼 형태, 모바일에서 누르기 쉽게 50/50 분할 */
.arvo-pop-foot {
  display: flex; border-top: 1px solid var(--line, #f0eeea);
}
.arvo-pop-opt {
  flex: 1; border: none; background: #fff; color: var(--sub, #8a8a8a);
  font-size: 12.5px; font-weight: 600; padding: 12px 6px; min-height: 44px; cursor: pointer;
  border-right: 1px solid var(--line, #f0eeea);
}
.arvo-pop-opt:last-child { border-right: none; }
.arvo-pop-opt:hover { background: var(--bg-soft, #faf9f6); color: var(--ink, #1c1c22); }

/* ---- 모바일: 화면 정중앙 카드(2026-10-15 대표님 지시 "모바일에서 공지 모달 위치가 정중앙에 오지 않는거 같아") ----
   이전엔 하단 시트(아래에서 올라와 화면 하단에 붙음)였다. popup.js 가 모바일에서 붙이는 .sheet 클래스는 그대로 두고
   CSS 만 '가운데 카드'로 바꾼다 — 좌우 16px 여백, 모서리 전체 둥글게, 화면 높이 85% 이내, 짧은 확대 페이드 진입. */
.arvo-pop-overlay.sheet {
  flex-direction: column; justify-content: center; align-items: center;
  padding: 16px; background: rgba(0,0,0,.5);
}
.arvo-pop-overlay.sheet .arvo-pop-indicator { color: #fff; margin: 0 0 8px; padding: 0 4px; }
.arvo-pop-overlay.sheet .arvo-pop-wrap {
  width: 100%; max-width: 420px; flex-wrap: nowrap; gap: 0;
}
.arvo-pop-overlay.sheet .arvo-pop-card {
  width: 100%; border-radius: 16px;
  max-height: 85vh;                 /* 카드 전체가 화면 높이 85% 이내 — 길면 본문(.arvo-pop-scroll)만 스크롤 */
  animation: arvo-pop-center-in .2s ease-out;
  touch-action: pan-y;              /* 기존 스와이프-다운 닫기(popup.js bindSwipeDown)는 그대로 동작 */
}
.arvo-pop-overlay.sheet .arvo-pop-scroll { flex: 1; }
.arvo-pop-overlay.sheet .arvo-pop-close { top: 10px; right: 10px; width: 36px; height: 36px; }

/* 모바일 하단 시트 상단 '손잡이 바'(2026-10-14 대표님 지시 — 디자인개선안 목업 mockup_popup.html 반영).
   실제 DOM 엘리먼트를 추가하지 않고 ::before 로 그린다 — popup.js 마크업·스와이프-다운(bindSwipeDown)
   제스처 로직을 전혀 건드리지 않아도 된다. .arvo-pop-card 는 이미 position:relative 이므로 기준으로 쓴다.
   PC 카드(.sheet 가 안 붙는 레이아웃)에는 이 선택자가 안 걸리므로 자동으로 표시 안 됨. */
/* 가운데 카드로 바뀌며(2026-10-15) 하단 시트 전용 '손잡이 바'는 표시하지 않는다 — 아래 규칙들은 display:none 으로 무력화 */
.arvo-pop-overlay.sheet .arvo-pop-card::before {
  display: none;
  content: '';
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 999px;
  background: rgba(0,0,0,.18);
  z-index: 3;             /* 닫기 버튼(z-index:2)·이미지보다 위 — 항상 보이게 */
  pointer-events: none;   /* 스와이프 제스처·탭 영역을 가리지 않음(터치 이벤트는 카드가 그대로 받음) */
}
/* 이미지형 카드는 사진 색이 제각각이라 손잡이가 묻힐 수 있어, 흰 반투명 받침(box-shadow spread)을
   깔아 어떤 이미지 위에서도 보이게 한다 — 텍스트형(흰 배경)은 받침 없이도 충분히 보여서 그대로 둔다. */
.arvo-pop-overlay.sheet .arvo-pop-card.image::before {
  box-shadow: 0 0 0 8px rgba(255,255,255,.55);
}
@keyframes arvo-pop-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
/* 모바일 가운데 카드 진입(2026-10-15) — 살짝 확대되며 나타남 */
@keyframes arvo-pop-center-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- 가입 혜택(정책 연동) 카드(2026-10-14 신설) — board_posts.popup_template='signup_benefit'.
   scratchpad/popup/banner.html 목업 톤(베이지 배경·네이비 글자·골드 포인트)을 그대로 재현한다.
   이미지형(.image)·텍스트형(.text) 과 달리 고정 폭 카드 안에서 세로로 쌓이는 레이아웃. */
.arvo-pop-card.benefit { background: #f4ece0; }
.arvo-pop-card.benefit .arvo-pop-link { display: block; }
.arvo-benefit { position: relative; padding: 40px 28px 26px; color: #141a33; overflow: hidden; }
.arvo-benefit-logo { font-weight: 800; letter-spacing: .28em; font-size: 13px; color: #1b2453; }
.arvo-benefit-eyebrow { margin-top: 22px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: #b08a52; }
.arvo-benefit-title { margin-top: 8px; font-size: 26px; line-height: 1.22; font-weight: 800; letter-spacing: -.01em; }
.arvo-benefit-title em { font-style: normal; color: #1b2453; background: linear-gradient(transparent 62%, #e8d3a8 62%); }
.arvo-benefit-amount { margin-top: 14px; display: flex; align-items: flex-end; gap: 6px; }
.arvo-benefit-amount b { font-size: 46px; line-height: .9; font-weight: 900; color: #1b2453; letter-spacing: -.02em; }
.arvo-benefit-amount span { font-size: 18px; font-weight: 800; color: #1b2453; padding-bottom: 5px; }
.arvo-benefit-sub { margin-top: 6px; font-size: 13px; color: #5b6070; }
/* padding/margin 초기화 — ul 기본 들여쓰기(40px)가 남아 혜택 카드가 오른쪽으로 밀리던 문제(2026-10-14 라이브 390px 실측) */
.arvo-benefit-list { margin: 16px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.arvo-benefit-list li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 4px 14px rgba(27,36,83,.08); }
.arvo-benefit-ic { width: 32px; height: 32px; border-radius: 9px; background: #1b2453; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.arvo-benefit-ic .ico { width: 17px; height: 17px; }
.arvo-benefit-list b { display: block; font-size: 13.5px; font-weight: 800; color: #141a33; }
.arvo-benefit-list small { display: block; margin-top: 2px; font-size: 11.5px; color: #6b7080; }
.arvo-benefit-note { margin-top: 14px; font-size: 10.5px; color: #8a8f9c; line-height: 1.5; }

@media (max-width: 480px) {
  .arvo-pop-wrap { gap: 10px; }
  .arvo-pop-card { width: 100%; }
  /* 터치 영역 44px 이상(요청사항) — 닫기/옵션 버튼 모두 */
  .arvo-pop-close { width: 40px; height: 40px; }
  .arvo-pop-opt { min-height: 48px; font-size: 13px; }
  .arvo-pop-next { min-height: 36px; padding: 8px 16px; }
}