/* =========================================================
   🧧 게임형 출석체크(복주머니 지급) 팝업 전용 스타일
   컨셉: "게임에서 희귀 아이템을 획득하는 연출" — 화려한 골드 톤
   ⚠️ .at-* 클래스로 스코프되어 다른 페이지 스타일에 영향 없음
   60FPS 목표: transform/opacity 중심 애니메이션 + will-change 힌트
   ========================================================= */

.at-overlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.at-backdrop{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(90,40,140,0.55), rgba(8,5,20,0.92));
  backdrop-filter:blur(6px);
  animation: atFadeIn .35s ease;
}
@keyframes atFadeIn{ from{opacity:0;} to{opacity:1;} }

.at-sparkle-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }

.at-modal-card{
  position:relative; z-index:2; width:100%; max-width:360px;
  background:linear-gradient(160deg, #2a1a4d 0%, #1a0f38 100%);
  border:1px solid rgba(255,210,130,0.35);
  border-radius:28px; padding:30px 24px 26px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 40px rgba(255,190,100,0.15);
  color:#fff8ec;
  animation: atCardIn .45s cubic-bezier(.2,1.4,.4,1);
}
@keyframes atCardIn{
  0%{ opacity:0; transform:scale(0.82) translateY(30px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.at-pop-in{ animation: atCardIn .4s cubic-bezier(.2,1.4,.4,1); }

.at-event-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(120deg,#ff8a4c,#ffc857); color:#3a2408; font-weight:800; font-size:0.72rem;
  padding:6px 14px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 14px rgba(255,150,60,0.5);
}

.at-eyebrow{ font-size:1.6rem; margin:4px 0 0; }
.at-overlay .at-title{
  font-family:var(--font-heading,'Gowun Batang',serif); font-size:1.3rem; margin:6px 0 4px; color:#ffe9bf !important;
}
.at-overlay .at-subtitle{ font-size:0.88rem; color:#d8cdf5 !important; margin:0 0 16px; }

.at-streak-pill{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,140,60,0.18);
  border:1px solid rgba(255,180,100,0.4); color:#ffc27a; font-size:0.78rem; font-weight:700;
  padding:5px 14px; border-radius:999px; margin-bottom:10px;
}

/* ---------------------------------------------------------
   ① 복주머니 스테이지 (메인 화면)
   ---------------------------------------------------------*/
.at-pouch-stage{ position:relative; width:180px; height:180px; margin:8px auto 14px; display:flex; align-items:center; justify-content:center; }
.at-pouch-glow{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,110,0.55) 0%, rgba(255,150,80,0.15) 55%, transparent 75%);
  opacity:0.6; will-change:transform,opacity;
  animation: atPouchAmbientGlow 2.4s ease-in-out infinite;
}
@keyframes atPouchAmbientGlow{
  0%,100%{ transform:scale(0.92); opacity:0.45; }
  50%{ transform:scale(1.08); opacity:0.75; }
}
.at-pouch-glow.at-glow-burst{ animation: atGlowBurst 0.75s ease-out forwards; }
@keyframes atGlowBurst{
  0%{ transform:scale(0.9); opacity:0.5; }
  60%{ transform:scale(1.6); opacity:1; }
  100%{ transform:scale(2.4); opacity:0; }
}
.at-pouch-icon{
  position:relative; z-index:2; font-size:5.2rem; line-height:1; user-select:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.4));
  will-change:transform, filter;
  animation: atPouchIdle 2.6s ease-in-out infinite;
}
@keyframes atPouchIdle{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-6px) scale(1.03); }
}
.at-pouch-icon.at-shake{
  animation: atShakeAnim 0.25s ease-in-out 3;
}
@keyframes atShakeAnim{
  0%,100%{ transform:rotate(0deg) scale(1.05); }
  25%{ transform:rotate(-14deg) scale(1.08); }
  75%{ transform:rotate(14deg) scale(1.08); }
}
.at-pouch-icon.at-glowing{
  animation: atGlowingScale 0.75s ease-out forwards;
  filter:drop-shadow(0 0 22px rgba(255,200,100,0.95)) drop-shadow(0 6px 16px rgba(0,0,0,0.4));
}
@keyframes atGlowingScale{
  0%{ transform:scale(1.05); }
  60%{ transform:scale(1.35); }
  100%{ transform:scale(1.5); }
}
.at-pouch-icon.at-pop{
  animation: atPopAnim 0.5s cubic-bezier(.3,1.6,.4,1) forwards;
}
@keyframes atPopAnim{
  0%{ transform:scale(1.5) rotate(0deg); opacity:1; }
  40%{ transform:scale(2.1) rotate(8deg); opacity:1; }
  100%{ transform:scale(1.7) rotate(0deg); opacity:1; }
}

.at-reward-preview{
  display:flex; flex-direction:column; gap:4px; align-items:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,220,170,0.25);
  border-radius:16px; padding:12px 16px; margin:6px 0 18px;
}
.at-reward-preview-label{ font-size:0.72rem; color:#b7aede; }
.at-reward-preview-value{ font-size:1.05rem; font-weight:800; color:#ffe0a3; }

.at-btn-primary{
  width:100%; border:none; border-radius:16px; padding:15px 18px; font-size:1rem; font-weight:800;
  color:#3a2408; background:linear-gradient(120deg,#ffb765,#ffe0a3); cursor:pointer;
  box-shadow:0 10px 24px rgba(255,170,80,0.4);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.at-btn-primary:active{ transform:scale(0.96); box-shadow:0 4px 14px rgba(255,170,80,0.35); }
.at-btn-primary:disabled{ opacity:0.7; }
.at-btn-skip{
  display:block; margin:12px auto 0; background:none; border:none; color:#9a8fc2; font-size:0.8rem;
  text-decoration:underline; cursor:pointer; padding:6px;
}
.at-btn-calendar{
  width:100%; border:1px solid rgba(255,220,170,0.35); border-radius:14px; padding:11px 14px;
  font-size:0.84rem; font-weight:700; color:#ffe0a3; background:rgba(255,255,255,0.05); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px;
}
.at-btn-calendar:active{ transform:scale(0.97); }

/* 팝업 안에 임베드되는 전체 보상 달력 스테이지 */
.at-modal-card.at-calendar-stage{ max-width:400px; padding:22px 14px 18px; text-align:left; }
.at-calendar-back{
  position:absolute; top:16px; left:16px; z-index:3; background:none; border:none; color:#d8cdf5;
  font-size:0.95rem; cursor:pointer; padding:4px;
}

/* ---------------------------------------------------------
   ✨ 화면 전체 파티클 (황금입자/별/금화/행운문양)
   ---------------------------------------------------------*/
.at-burst-particle{
  position:absolute; pointer-events:none; will-change:transform, opacity;
  animation: atBurstFly 1.3s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes atBurstFly{
  0%{ transform:translate(-50%,-50%) scale(0.4) rotate(0deg); opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot)); opacity:0; }
}
.at-ambient-particle{
  position:absolute; top:-5%; pointer-events:none; will-change:transform, opacity;
  animation: atAmbientFall var(--fall-dur,6s) linear infinite;
}
@keyframes atAmbientFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  10%{ opacity:0.9; }
  90%{ opacity:0.9; }
  100%{ transform:translate(var(--drift,0), 120vh) rotate(180deg); opacity:0; }
}
.at-petal-particle{
  position:absolute; top:-5%; pointer-events:none; will-change:transform, opacity;
  animation: atPetalFall var(--fall-dur,4s) ease-in infinite;
}
@keyframes atPetalFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform:translate(var(--drift,0), 110vh) rotate(300deg); opacity:0; }
}

/* ---------------------------------------------------------
   ③ 보상 화면
   ---------------------------------------------------------*/
.at-confetti-emoji{ font-size:2.6rem; margin-bottom:6px; animation: atBounceIn .5s ease; }
@keyframes atBounceIn{ 0%{ transform:scale(0); } 60%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
.at-reward-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:linear-gradient(160deg, rgba(255,220,150,0.16), rgba(255,255,255,0.03));
  border:1px solid rgba(255,220,170,0.4); border-radius:20px; padding:22px 16px; margin:10px 0 16px;
}
.at-reward-icon{ font-size:3.2rem; animation: atRewardIconPulse 1.6s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(255,200,100,0.6)); }
@keyframes atRewardIconPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } }
.at-reward-name{ font-size:1.1rem; font-weight:800; color:#ffe0a3; }

.at-ad-bonus-box{
  background:rgba(255,255,255,0.06); border:1px dashed rgba(255,220,170,0.4); border-radius:14px;
  padding:12px 14px; margin-bottom:16px; font-size:0.84rem; color:#d8cdf5;
}
.at-ad-bonus-box p{ margin:0 0 10px; }
.at-btn-ad{
  width:100%; border:none; border-radius:12px; padding:10px 14px; font-size:0.86rem; font-weight:700;
  color:#fff; background:linear-gradient(120deg,#7b4fd1,#a97cf0); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.at-btn-ad:active{ transform:scale(0.97); }
.at-btn-ad:disabled{ opacity:0.7; }
.at-ad-bonus-done{ color:#5fe3b3; font-weight:700; display:flex; align-items:center; gap:6px; justify-content:center; }

/* ---------------------------------------------------------
   🔥 연속 출석 특별 연출 (7/14/30일)
   ---------------------------------------------------------*/
.at-overlay .at-streak-title{ color:#ffd479 !important; }
.at-firework-emoji{ font-size:3rem; margin-bottom:4px; animation: atBounceIn .5s ease; }
.at-dragon-emoji{ font-size:3.6rem; margin-bottom:4px; animation: atDragonFloat 1.8s ease-in-out infinite; filter:drop-shadow(0 0 22px rgba(255,180,80,0.7)); }
@keyframes atDragonFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-10px) scale(1.06); } }
.at-shell-shake{ animation: atCardIn .4s cubic-bezier(.2,1.4,.4,1), atShellShake .5s ease .4s; }
@keyframes atShellShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-10px); }
  40%{ transform:translateX(9px); }
  60%{ transform:translateX(-6px); }
  80%{ transform:translateX(4px); }
}

/* ---------------------------------------------------------
   ✨ 랜덤 보너스 팝업
   ---------------------------------------------------------*/
.at-random-emoji{ font-size:2.6rem; margin-bottom:4px; animation: atBounceIn .5s ease; }

/* ---------------------------------------------------------
   📅 출석 달력 도장 애니메이션 (mypage.js 등에서 사용)
   ---------------------------------------------------------*/
.at-stamp-pop{
  animation: atStampPop 0.4s cubic-bezier(.3,1.6,.4,1);
}
@keyframes atStampPop{
  0%{ transform:scale(2.2) rotate(-18deg); opacity:0; }
  60%{ transform:scale(0.9) rotate(4deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

/* 모바일 폭 대응 */
@media (max-width:380px){
  .at-modal-card{ padding:24px 18px 20px; }
  .at-pouch-stage{ width:150px; height:150px; }
  .at-pouch-icon{ font-size:4.4rem; }
}

/* =========================================================
   🗓️ 쿠키런 스타일 "전체 보상 달력 보드" (attendance-grid.js)
   ⚠️ .ag-* 클래스로 스코프. 위 .at-* 팝업 클래스와 공존 가능(마일스톤/랜덤보너스
     축하 오버레이는 그대로 .at-overlay 등을 재사용합니다).
   ========================================================= */
.ag-board{
  position:relative; border-radius:24px; padding:20px 16px 22px;
  background:linear-gradient(165deg, rgba(255,247,232,0.06) 0%, rgba(30,20,55,0.5) 60%, rgba(20,14,40,0.7) 100%);
  border:1px solid rgba(255,214,140,0.28);
  box-shadow:0 12px 34px rgba(0,0,0,0.35), inset 0 0 30px rgba(255,190,100,0.05);
  overflow:hidden;
}
.ag-board::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background:radial-gradient(circle at 15% 0%, rgba(255,200,120,0.16), transparent 45%),
             radial-gradient(circle at 90% 100%, rgba(160,110,255,0.14), transparent 50%);
}
.ag-loading{ text-align:center; padding:30px 10px; color:var(--text-faint,#9a90b8); font-size:0.85rem; }
.ag-event-badge{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px; margin-bottom:10px;
  background:linear-gradient(120deg,#ff8a4c,#ffc857); color:#3a2408; font-weight:800; font-size:0.72rem;
  padding:6px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(255,150,60,0.4);
}
.ag-board-header{ position:relative; z-index:2; text-align:center; margin-bottom:14px; }
.ag-board-title{
  margin:0 0 4px; font-family:var(--font-heading,'Gowun Batang',serif); font-size:1.15rem;
  color:#ffe9bf !important; display:flex; align-items:center; justify-content:center; gap:8px;
}
.ag-board-sub{ margin:0; font-size:0.76rem; color:#c9bfe8 !important; }

.ag-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(7, 1fr); gap:7px;
  margin-bottom:16px;
}
.ag-day-card{
  position:relative; aspect-ratio:1; border-radius:12px; cursor:default;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  transition:transform .15s ease;
}
.ag-day-num{ font-size:0.56rem; color:#a89ccb; font-weight:700; }
.ag-day-icon{ font-size:1.15rem; line-height:1; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.35)); }
.ag-day-amount{ font-size:0.52rem; color:#d8cdf5; font-weight:700; }

/* 완료된 날 */
.ag-day-card.ag-checked{
  background:rgba(95,227,179,0.10); border-color:rgba(95,227,179,0.35);
  opacity:0.72;
}
.ag-day-card.ag-checked .ag-day-icon{ filter:grayscale(0.35) drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
.ag-check-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(15,10,30,0.42); border-radius:12px; color:#5fe3b3; font-size:1.15rem;
  animation: agCheckPop .35s cubic-bezier(.3,1.6,.4,1);
}
@keyframes agCheckPop{ 0%{ transform:scale(0.3); opacity:0; } 60%{ transform:scale(1.2); opacity:1; } 100%{ transform:scale(1); opacity:1; } }

/* 오늘(아직 미출석) — 골드 테두리 + 두근두근 펄스 글로우, 클릭 가능 */
.ag-day-card.ag-today{
  cursor:pointer;
  background:linear-gradient(160deg, rgba(255,210,120,0.22), rgba(255,255,255,0.05));
  border-color:rgba(255,210,120,0.75);
  box-shadow:0 0 0 0 rgba(255,190,100,0.5);
  will-change:transform, box-shadow;
  animation: agTodayPulse 1.6s ease-in-out infinite;
}
@keyframes agTodayPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,190,100,0.45); }
  50%{ transform:scale(1.07); box-shadow:0 0 14px 4px rgba(255,190,100,0.35); }
}
.ag-day-card.ag-today .ag-day-num{ color:#ffdca0; }
.ag-day-card.ag-today .ag-day-icon{ filter:drop-shadow(0 0 8px rgba(255,200,100,0.8)); }
.ag-day-card.ag-today.ag-shake{ animation: agShakeAnim 0.24s ease-in-out 3; }
@keyframes agShakeAnim{
  0%,100%{ transform:rotate(0deg) scale(1.07); }
  25%{ transform:rotate(-10deg) scale(1.1); }
  75%{ transform:rotate(10deg) scale(1.1); }
}
.ag-day-card.ag-today.ag-glow{
  animation:none; transform:scale(1.22);
  box-shadow:0 0 26px 8px rgba(255,200,100,0.65);
  border-color:#ffe0a3;
}
.ag-day-card.ag-today.ag-glow .ag-day-icon{ filter:drop-shadow(0 0 16px rgba(255,210,120,1)); }
.ag-day-card.ag-today.ag-pop{
  animation: agPopAnim 0.55s cubic-bezier(.3,1.6,.4,1) forwards;
}
@keyframes agPopAnim{
  0%{ transform:scale(1.22); }
  45%{ transform:scale(1.5) rotate(6deg); }
  100%{ transform:scale(1) rotate(0deg); }
}

/* 미래(잠금) */
.ag-day-card.ag-locked{ opacity:0.42; }
.ag-day-card.ag-locked .ag-day-icon{ filter:grayscale(0.6); }

/* 특별일(마일스톤: 7/14/21/28/31일 등) — 항상 반짝이는 보라/골드 카드 */
.ag-day-card.ag-special{
  background:linear-gradient(160deg, rgba(190,140,255,0.22), rgba(255,200,120,0.16));
  border-color:rgba(220,180,255,0.5);
}
.ag-day-card.ag-special.ag-locked{ opacity:0.55; }
.ag-sparkle-badge{
  position:absolute; top:-6px; right:-3px; font-size:0.7rem;
  animation: agSparkleTwinkle 1.8s ease-in-out infinite;
}
@keyframes agSparkleTwinkle{ 0%,100%{ opacity:0.4; transform:scale(0.85); } 50%{ opacity:1; transform:scale(1.15); } }

/* 하단 CTA 버튼 + 범례 */
.ag-cta-btn{
  position:relative; z-index:2; width:100%; border:none; border-radius:16px; padding:14px 16px;
  font-size:0.95rem; font-weight:800; color:#3a2408;
  background:linear-gradient(120deg,#ffb765,#ffe0a3); cursor:pointer;
  box-shadow:0 10px 24px rgba(255,170,80,0.4);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease;
  animation: agCtaPulse 1.8s ease-in-out infinite;
}
@keyframes agCtaPulse{ 0%,100%{ box-shadow:0 10px 24px rgba(255,170,80,0.4); } 50%{ box-shadow:0 10px 30px rgba(255,170,80,0.65); } }
.ag-cta-btn:active{ transform:scale(0.97); }
.ag-cta-btn.ag-cta-done{
  animation:none; cursor:default; opacity:0.85;
  background:rgba(255,255,255,0.08); color:#c9bfe8; box-shadow:none;
}
.ag-legend{
  position:relative; z-index:2; display:flex; justify-content:center; gap:16px;
  margin:10px 0 0; font-size:0.68rem; color:#a89ccb;
}
.ag-legend span{ display:flex; align-items:center; gap:4px; }

@media (max-width:380px){
  .ag-day-icon{ font-size:1rem; }
  .ag-day-num{ font-size:0.5rem; }
}