/* ============================================================
 * chuseok_badge.css v1.2.0 — 로고 우측 "한가위 선물" 진입 필(#czkBadge)
 *  · 08-26 리디자인: 미니 SVG 달(22px) → 91 히어로와 같은 오버사이즈 보름달 사진
 *    (images/comm/chuseok_moon_gnb.png · chuseok_moon91.jpg 파생 = 히어로와 같은 달)
 *  · 08-26 v1.2.0(사용자 지시 "배경색상이랑 애니메이션"):
 *    ⓐ 배경 = 밤하늘 그라데이션(딥네이비 → 짙은 남녹색). 히어로의 먹남색(#171f2e)과
 *       헤더 딥그린(#3D6041) 사이를 잇는 톤 — 브랜드 그린과 싸우지 않게 녹색 쪽으로 기울임.
 *       글자 #f2e7c9 대비 = 12.3:1(녹색 끝) ~ 13.2:1(남색 끝), 금색 테두리 대비 6.3:1.
 *       달·문구가 하나의 덩어리로 읽히도록 달의 좌측 돌출을 없애고 상하로만 넘치게.
 *    ⓑ 모션 3겹만: ①진입 떠오름 1회(1.1s) ②글로우 펄스 무한(6.5s) ③호버·포커스 확대(1.04).
 *       전부 transform / opacity 만 사용(리플로·페인트 애니 0, GPU 합성). 회전·바운스·
 *       반짝이·흔들림·점멸 없음. 레이아웃을 밀지 않음(CLS 0 — 달은 넘침 영역에서만 커짐).
 *  · 주입 = js/comm/chuseok_badge.js (활성 명절 플랜 있을 때만, gift_active.jsp 판정)
 *  · 로드 = commScripts.jsp (2026-09-18까지 날짜 게이트) — 그 외 화면 무영향
 *  · 앵커 = 미션 배지(#msnLogoBadge)와 동일: PC .head_visual .inner a.home /
 *    모바일 .head_def .head_top a.h_logo. 새단장 배지 옆(대체 아님).
 * ============================================================ */
#czkBadge{
  float:left; position:relative; display:inline-flex; align-items:center;
  box-sizing:border-box; text-decoration:none; line-height:1; white-space:nowrap;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  color:#f2e7c9;
  /* [2026-08-27 사용자 지시] 남색 밤하늘이 딥그린 헤더(#3D6041) 위에서 너무 튄다 →
     헤더와 같은 초록 계열의 짙은 톤으로 교체(같은 색상군·한 단계 어둡게 = 배지가 덩어리로는 구분되되 이질감 없음).
     금 테두리·크림 글자·달 글로우는 유지 — 명절 감성은 색이 아니라 달이 낸다. */
  background:linear-gradient(135deg, #2c4a30 0%, #1c3122 100%);
  background-color:#1c3122; /* 그라데이션 미지원 폴백 */
  border:1.5px solid #c9a24b; border-radius:999px;
  box-shadow:0 2px 8px rgba(11,20,15,.32); -webkit-tap-highlight-color:transparent;
  transition:background-color .14s ease, box-shadow .14s ease;
}
#czkBadge:hover{ background-color:#1d3329; box-shadow:0 4px 13px rgba(11,20,15,.4); color:#f8f0da; }
#czkBadge:focus-visible{ outline:2px solid #f1d693; outline-offset:2px; }

/* ── 달 레이어 ────────────────────────────────────────────────
   .moon      = ① 진입 떠오름(transform/opacity)
   .moon img  = ③ 호버·포커스 확대(transform)  ※ 정적 후광은 애니 아님
   .moon::after = ② 글로우 펄스(transform/opacity)
   레이어를 나눈 이유 = 한 요소에 transform 애니 2개를 겹치면 뒤엣것이 앞엣것을 덮는다. */
#czkBadge .moon{
  flex:0 0 auto; position:relative; display:block; pointer-events:none;
  will-change:transform, opacity;
  animation:czkMoonRise 1.1s cubic-bezier(.22,.7,.35,1) both;
}
#czkBadge .moon img{
  display:block; width:100%; height:auto; border-radius:50%;
  /* 정적 후광(애니 아님 — filter 애니는 페인트 비용이라 금지) */
  filter:drop-shadow(0 0 5px rgba(241,214,147,.72));
  transform:scale(1); transition:transform .18s ease;
}
/* 달 주위 번짐 = 무한 글로우 펄스. 넘침 영역 안에서만 커지므로 레이아웃 무영향 */
#czkBadge .moon::after{
  content:""; position:absolute; inset:-38%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,229,168,.36) 0%, rgba(255,229,168,.13) 46%, rgba(255,229,168,0) 70%);
  will-change:transform, opacity;
  animation:czkMoonGlow 6.5s ease-in-out infinite alternate;
}
/* ③ 호버·포커스: 달만 아주 살짝(1.04) — 필 크기·위치는 불변 */
#czkBadge:hover .moon img, #czkBadge:focus-visible .moon img{ transform:scale(1.04); }

@keyframes czkMoonRise{ from{ opacity:0; transform:translateY(9px) scale(.88); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes czkMoonGlow{ from{ opacity:.58; transform:scale(.95); } to{ opacity:1; transform:scale(1.05); } }

/* 모션 민감 사용자: 3겹 전부 정지 — 최종 상태로 고정(사라지지 않음) */
@media (prefers-reduced-motion:reduce){
  #czkBadge .moon{ animation:none; opacity:1; transform:none; will-change:auto; }
  #czkBadge .moon::after{ animation:none; opacity:.85; transform:none; will-change:auto; }
  #czkBadge .moon img{ transition:none; }
  #czkBadge:hover .moon img, #czkBadge:focus-visible .moon img{ transform:none; }
}

#czkBadge .lb{ font-weight:800; letter-spacing:-.02em; }

/* PC: 필 40px(헤더 밴드 .head_visual 79px 안), 달 50px = 상하 각 5px 넘침 */
#czkBadge.is-pc{ height:40px; margin:4px 0 0 12px; padding:0 18px 0 4px; }
#czkBadge.is-pc .moon{ width:50px; margin:0 8px 0 -2px; }
#czkBadge.is-pc .lb{ font-size:15px; }

/* 모바일: 헤더 한 줄(로고 147px + 배송일·장바구니 90px)이 이미 꽉 차 있어 폭 예산이 좁다.
   → 문구는 "선물"만(한가위는 .lb_ha 로 숨김), 달만 오버사이즈로 넘치게.
   실측 예산: 360px 화면에서 배지 가용 86px / 아래 규격 약 75px = 여유 11px. */
#czkBadge.is-mo{ height:38px; margin:2px auto 0 8px; padding:0 9px 0 0; }
#czkBadge.is-mo .moon{ width:40px; margin:0 4px 0 -3px; }
#czkBadge.is-mo .lb{ font-size:14px; }
#czkBadge.is-mo .lb_ha{ display:none; }

/* 미션 새단장 배지와 동시 노출 시: 한가위 필이 그 바로 옆(왼쪽 그룹 유지) */
#msnLogoBadge.is-mo + #czkBadge.is-mo, #msnLogoBadge.is-mo ~ #czkBadge.is-mo{ margin-left:6px; margin-right:auto; }

/* 좁은 화면(≤359px): 달만 남기고 문구 생략 — 헤더 아이콘 밀림 방지 */
@media (max-width:359px){
  #czkBadge.is-mo{ padding:0 3px 0 0; }
  #czkBadge.is-mo .lb{ display:none; }
  #czkBadge.is-mo .moon{ margin:0 0 0 -2px; }
}