/* === 어린왕자 테마 CSS 변수 === */
:root {
  --night: #0B1026;
  --night-light: #111B33;
  --night-card: #152042;
  --night-card-hover: #1a2850;
  --gold: #F4C542;
  --gold-dark: #D4A82E;
  --gold-light: #FFE17A;
  --gold-muted: rgba(244, 197, 66, 0.15);
  --rose: #E74C6F;
  --rose-dark: #C94A60;
  --rose-light: #FF8FA3;
  --sage: #7BC67E;
  --sand: #ECE8E1;
  --sand-dark: #C4BBA6;
  --sand-muted: #B5AC98;
  --amber: #f0a030;
  --border: #253052;
  --border-light: #2E3D6B;
  --night-card-40: rgba(21, 32, 66, 0.90);
  --night-card-45: rgba(21, 32, 66, 0.91);
  --night-card-50: rgba(21, 32, 66, 0.90);
  --night-card-60: rgba(21, 32, 66, 0.92);
  --night-card-70: rgba(21, 32, 66, 0.93);
  --night-card-85: rgba(21, 32, 66, 0.95);
  --night-card-95: rgba(21, 32, 66, 0.96);
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-gold: rgba(244, 197, 66, 0.15);
  --card-padding: 1.25rem;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: 0.3s ease;
  --font-main: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-reader: 'Noto Serif KR', 'Batang', Georgia, serif;
}

/* 건너뛰기 링크 (키보드 접근성) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 999;
  padding: 0.5rem 1rem;
  background: var(--gold);
  color: var(--night);
  border-radius: var(--radius-xs);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0.5rem;
}

/* 리셋 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background: var(--night);
  color: var(--sand);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* 배경 이미지 — fixed 대신 ::before 사용 (모바일 호환) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('../images/stars-bg.png') center / cover no-repeat;
}

/* 앱 컨테이너 */
#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* === 헤더 === */
.app-header {
  background: rgba(11, 16, 38, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  /* backdrop-filter가 이미 GPU 레이어를 생성하므로 will-change 불필요 — gaze dot transform과 경합 방지 */
}


.app-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition);
  user-select: none;
}

.app-logo:hover {
  opacity: 0.85;
}

.logo-l {
  color: var(--gold-light);
}

.logo-eye {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0.5px;
  position: relative;
  top: -0.5px;
}

.eye-ball {
  display: inline-block;
  width: 17px;
  height: 17px;
  background: radial-gradient(circle at 50% 48%, #fff 60%, #f0ece4 100%);
  border-radius: 50%;
  border: 2px solid var(--gold);
  position: relative;
  box-shadow: 0 0 5px rgba(244, 197, 66, 0.35), inset 0 1px 2px rgba(0,0,0,0.06);
  overflow: hidden;
}

.eye-pupil {
  position: absolute;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle at 40% 38%, #2c1a0e, #050200);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: eyeLook 4s ease-in-out infinite;
}

/* 메인 하이라이트 (큰 반짝임) */
.eye-pupil::before {
  content: '';
  position: absolute;
  width: 3.5px;
  height: 3.5px;
  background: #fff;
  border-radius: 50%;
  top: 1px;
  left: 1.5px;
  box-shadow: 0 0 2px rgba(255,255,255,0.8);
}

/* 보조 하이라이트 (작은 반짝임) */
.eye-pupil::after {
  content: '';
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  bottom: 2px;
  right: 1px;
}

@keyframes eyeLook {
  0%, 100% { transform: translate(-50%, -50%); }
  15% { transform: translate(-30%, -55%); }
  30% { transform: translate(-50%, -50%); }
  60% { transform: translate(-65%, -45%); }
  75% { transform: translate(-50%, -50%); }
}

.logo-k {
  color: var(--gold-light);
}

.logo-stars {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 2px;
  font-size: 0.55em;
  position: relative;
  top: -2px;
}

.logo-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: logoStarTwinkle 2s ease-in-out infinite;
  line-height: 1;
}

.logo-star:nth-child(2) { animation-delay: 0.6s; }
.logo-star:nth-child(3) { animation-delay: 1.2s; }

.logo-star-img {
  width: 1.025em;
  height: 1.025em;
  vertical-align: middle;
  display: block;
  position: relative;
  top: 0.055em;
}

/* 파란별 (1번째) */
.logo-star:nth-child(1) {
  animation-name: starTwinkleBlue;
}
.logo-star:nth-child(1) .logo-star-img {
  top: calc(0.055em + 0.012em);
}
/* 노란별 (2번째 ⭐) */
.logo-star:nth-child(2) {
  animation-name: starTwinkleGold;
}
/* 빨간별 (3번째) */
.logo-star:nth-child(3) {
  animation-name: starTwinkleRed;
}

@keyframes starTwinkleBlue {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(60,120,255,0.3)); }
  25% { transform: scale(0.92); filter: drop-shadow(0 0 0px rgba(60,120,255,0)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(60,120,255,0.7)) brightness(1.08); }
  75% { transform: scale(0.96); filter: drop-shadow(0 0 0px rgba(60,120,255,0)); }
}

@keyframes starTwinkleGold {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(244,197,66,0.3)); }
  25% { transform: scale(0.92); filter: drop-shadow(0 0 0px rgba(244,197,66,0)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(244,197,66,0.7)) brightness(1.08); }
  75% { transform: scale(0.96); filter: drop-shadow(0 0 0px rgba(244,197,66,0)); }
}

@keyframes starTwinkleRed {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(255,60,60,0.3)); }
  25% { transform: scale(0.92); filter: drop-shadow(0 0 0px rgba(255,60,60,0)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(255,60,60,0.7)) brightness(1.08); }
  75% { transform: scale(0.96); filter: drop-shadow(0 0 0px rgba(255,60,60,0)); }
}

@media (prefers-reduced-motion: reduce) {
  .eye-pupil { animation: none; }
  .logo-star { animation: none; opacity: 1; }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-sj-badge {
  font-family: 'Georgia', 'Noto Serif KR', serif;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--sand-muted);
  opacity: 0.7;
  letter-spacing: 0.03em;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  align-self: flex-end;
  margin-bottom: 1px;
  padding-left: 0.4rem;
  border-left: 1px solid rgba(160, 152, 128, 0.25);
}

.header-sj-badge em {
  font-style: italic;
  font-weight: 700;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.header-sj-badge:hover {
  opacity: 0.8;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* === 모바일 헤더 오른쪽 (별 잔고 + 로그인 + 햄버거) === */
.header-right-mobile {
  display: none; /* PC에서 숨김, 모바일에서만 표시 */
  align-items: center;
  gap: 0.5rem;
}

.header-login-btn {
  padding: 0.35rem 0.5rem;
}

/* === 햄버거 버튼 === */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(244, 197, 66, 0.15);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition);
}

.hamburger-btn:hover,
.hamburger-btn:focus-visible {
  background: rgba(244, 197, 66, 0.12);
}

.hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--gold, #f4c542);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}

/* === 드로어 오버레이 === */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* === 사이드 드로어 === */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  background: linear-gradient(180deg, rgba(15, 22, 50, 0.98) 0%, rgba(11, 16, 38, 0.99) 100%);
  border-left: 1px solid rgba(244, 197, 66, 0.12);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(244, 197, 66, 0.1);
}

.drawer-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold, #f4c542);
}

.drawer-close {
  background: none;
  border: none;
  color: var(--sand-muted, #a89880);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.drawer-close:hover {
  color: var(--sand-light, #f5e6d3);
}

/* 드로어 네비게이션 항목 */
.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(244, 197, 66, 0.08);
}

.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.2rem;
  color: var(--sand-light, #f5e6d3);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.drawer-nav-item:hover,
.drawer-nav-item:focus-visible {
  background: rgba(244, 197, 66, 0.08);
}

.drawer-nav-item.nav-active,
.drawer-nav-item[aria-current="page"] {
  background: rgba(244, 197, 66, 0.12);
  color: var(--gold, #f4c542);
}

.drawer-nav-item .icon-nav {
  width: 20px;
  height: 20px;
}

.drawer-nav-item .icon-inline {
  width: 18px;
  height: 18px;
}

.admin-nav-item {
  color: var(--amber, #f0a030);
}

/* 드로어 하단 인증 영역 */
.drawer-auth {
  padding: 0.75rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.drawer-auth .auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.drawer-profile-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(244, 197, 66, 0.08);
}

.drawer-profile-info .profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.drawer-profile-info .profile-avatar-default {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy-light, #253052);
  color: var(--gold, #f4c542);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.drawer-profile-info .profile-name {
  font-size: 0.9rem;
  color: var(--sand-light, #f5e6d3);
  font-weight: 600;
}

.drawer-logout {
  color: var(--rose, #e74c6f) !important;
  margin-top: 0.25rem;
}

/* 그룹 배지 (드로어 내) */
.drawer-nav-item .group-nav-badge {
  background: var(--rose, #e74c6f);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9px;
  margin-left: auto;
}

/* === 메인 콘텐츠 === */
.main-content {
  flex: 1;
  padding: 1.5rem 1rem;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
}

/* 뷰 전환 애니메이션 */
.view {
  display: none;
  animation: viewFadeIn 0.3s ease;
}
.view:focus {
  outline: none;
}

.view.active {
  display: block;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === 버튼 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.3rem;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.97);
}

/* 키보드 포커스 표시 */
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(244, 197, 66, 0.25);
}

.btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--night);
  box-shadow: 0 2px 12px var(--shadow-gold);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 4px 20px var(--shadow-gold);
}

.btn-secondary {
  background: rgba(37, 48, 82, 0.6);
  color: var(--sand);
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-secondary:hover {
  background: rgba(37, 48, 82, 0.9);
  border-color: var(--border-light);
}

.btn-accent {
  background: linear-gradient(135deg, var(--rose), var(--rose-dark));
  color: white;
}

.btn-accent:hover {
  background: linear-gradient(135deg, var(--rose-light), var(--rose));
}

.btn-success {
  background: var(--sage);
  color: var(--night);
}

.btn-lg {
  padding: 0.9rem 2.2rem;
  font-size: 1.05rem;
  border-radius: var(--radius);
}

.btn-sm {
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  font-size: 0.82rem;
  border-radius: var(--radius-xs);
}

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
}

/* === 카드 === */
.card {
  background: var(--night-card-70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--card-padding);
  margin-bottom: 1rem;
  transition: border-color var(--transition);
}

.card:hover {
  border-color: var(--border-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--gold);
}

/* === 폼 요소 === */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sand);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(11, 16, 38, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--sand);
  font-family: var(--font-main);
  font-size: 0.92rem;
  transition: border-color var(--transition);
  -webkit-appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

/* date 입력 — 달력 아이콘 복원 */
input[type="date"].form-control {
  -webkit-appearance: auto;
  appearance: auto;
  cursor: pointer;
  color-scheme: dark;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

select.form-control {
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

input[type="checkbox"] {
  accent-color: var(--gold);
  width: 18px;
  height: 18px;
}

/* === 시선 점 === */
#gaze-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: rgba(244, 197, 66, 0.5);
  border: 2px solid rgba(244, 197, 66, 0.85);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  display: none;
  box-shadow: 0 0 12px rgba(244, 197, 66, 0.3);
  will-change: transform;
}

/* === 경고 플래시 === */
#warning-flash {
  position: fixed;
  inset: 0;
  background: rgba(232, 93, 117, 0.12);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.1s ease;
}

#warning-flash.active {
  opacity: 1;
}

/* === WebGazer 내부 UI 숨기기 === */
/* WebGazer가 인라인 display:block을 먼저 설정하고 JS _hideWebGazerUI()가
   나중에 숨기므로 노란 박스/기둥이 깜빡임.
   컨테이너뿐 아니라 모든 자식(position:fixed 자식 포함)도 숨김 처리. */
#webgazerVideoContainer,
#webgazerVideoContainer *,
#webgazerVideoFeed,
#webgazerVideoCanvas,
#webgazerFaceOverlay,
#webgazerFaceFeedbackBox,
#webgazerGazeDot {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === 카메라 프리뷰 === */
#camera-preview {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 500;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  background: #000;
}

#camera-preview canvas {
  display: block;
}

#camera-preview .preview-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: var(--gold);
  font-size: 0.65rem;
  text-align: center;
  padding: 2px 0;
  font-weight: 600;
}

/* === 유틸리티 === */
.text-center { text-align: center; }
.text-muted { color: var(--sand-muted); }
.text-secondary { color: var(--sand-dark); }
.text-success { color: var(--sage); }
.text-warning { color: var(--gold); }
.text-accent { color: var(--rose); }
.text-gold { color: var(--gold); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.gap-1 { gap: 0.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none !important; }

/* === 배경 워터마크 SJ === */
#app::before {
  content: 'SJ';
  position: fixed;
  bottom: 3rem;
  right: 2rem;
  font-family: 'Georgia', 'Noto Serif KR', serif;
  font-size: 5rem;
  font-weight: 700;
  font-style: italic;
  color: rgba(244, 197, 66, 0.03);
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  line-height: 1;
}

/* === 푸터 크레딧 === */
.app-footer {
  padding: 1.5rem 1rem 1.2rem;
  text-align: center;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

.footer-credit:hover {
  opacity: 0.9;
}

.footer-rose {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 4px rgba(232, 93, 117, 0.3));
}

.footer-sj {
  font-family: 'Georgia', 'Noto Serif KR', serif;
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  color: var(--sand-dark);
  letter-spacing: 0.08em;
}

/* === 도움말 팁 컴포넌트 === */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin-left: 4px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  box-shadow: 0 0 6px 1px rgba(240, 160, 48, 0.45), 0 0 12px 2px rgba(240, 160, 48, 0.2);
  animation: help-tip-glow 2s ease-in-out infinite alternate;
}

@keyframes help-tip-glow {
  0%   { box-shadow: 0 0 4px 1px rgba(240, 160, 48, 0.3), 0 0 8px 2px rgba(240, 160, 48, 0.1); }
  100% { box-shadow: 0 0 8px 2px rgba(240, 160, 48, 0.55), 0 0 16px 4px rgba(240, 160, 48, 0.25); }
}

/* 44px 투명 히트 영역 */
.help-tip::before {
  content: '';
  position: absolute;
  inset: -14px;
}

.help-tip:hover {
  background: var(--gold);
  color: var(--night);
}

.help-tip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.help-tip:focus,
.help-tip.open {
  background: var(--gold);
  color: var(--night);
}

.help-tip-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--night-card);
  border: 1px solid var(--gold);
  border-radius: var(--radius-xs);
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--sand);
  line-height: 1.5;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

/* 말풍선 화살표 */
.help-tip-content::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--gold);
}

.help-tip-content::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--night-card);
}

.help-tip:focus .help-tip-content,
.help-tip.open .help-tip-content {
  display: block;
}

/* 도움말이 열린 카드를 형제 카드 위로 올림 */
.card:has(.help-tip.open),
.feature-card:has(.help-tip.open) {
  z-index: 10;
  position: relative;
}

/* 오른쪽 끝에 가까운 팁은 왼쪽 정렬 */
.help-tip-content.align-right {
  left: auto;
  right: -8px;
  transform: none;
}

.help-tip-content.align-right::before,
.help-tip-content.align-right::after {
  left: auto;
  right: 12px;
  transform: none;
}

/* 왼쪽 끝에 가까운 팁은 오른쪽 정렬 */
.help-tip-content.align-left {
  left: -8px;
  transform: none;
}

.help-tip-content.align-left::before,
.help-tip-content.align-left::after {
  left: 12px;
  transform: none;
}

/* === 반응형 - 태블릿 === */
@media (max-width: 768px) {
  .main-content {
    padding: 1rem 0.75rem;
  }

  .app-header {
    padding: 0.5rem 0.8rem;
  }

  /* 모바일: PC nav 숨기고 햄버거+드로어 표시 */
  .header-nav {
    display: none !important;
  }

  .header-right-mobile {
    display: flex;
  }

  .btn-lg {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
}

/* === 반응형 - 모바일 === */
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  .main-content {
    padding: 0.75rem 0.65rem;
  }

  .app-header h1 {
    font-size: 1rem;
  }

  .card {
    padding: 1rem;
    border-radius: var(--radius-sm);
  }

  .header-nav .btn span.btn-label {
    display: none;
  }

  .header-sj-badge {
    font-size: 0.62rem;
  }

  .header-sj-badge em {
    font-size: 0.68rem;
  }

  .btn-lg {
    width: 100%;
  }

  .help-tip-content {
    max-width: 200px;
    font-size: 0.74rem;
  }
}

/* safe area for notched phones */
@supports (padding: env(safe-area-inset-top)) {
  .app-header {
    padding-top: max(0.6rem, env(safe-area-inset-top));
    padding-left: max(1.2rem, env(safe-area-inset-left));
    padding-right: max(1.2rem, env(safe-area-inset-right));
  }
}

/* === 스크린 리더 전용 (#5, #25) === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === 별 잔고 그룹 (파랑별 + 노란별) === */
.star-balance-group {
  display: inline-flex;
  align-items: center;
  background: rgba(244, 197, 66, 0.12);
  border: 1px solid rgba(244, 197, 66, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition);
}

.star-balance-group:hover {
  background: rgba(244, 197, 66, 0.22);
}

@keyframes star-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.star-balance-group.animate {
  animation: star-bounce 0.5s ease;
}

/* 파랑별 / 노란별 내부 아이템 */
.star-bal-red,
.star-bal-blue,
.star-bal-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.star-bal-red { color: #ff6b6b; }
.star-bal-blue { color: var(--sand); }
.star-bal-gold { color: var(--gold); }

/* 드로어 앱 설치 버튼 */
.drawer-install-btn {
  color: var(--gold) !important;
  border-top: 1px solid rgba(244, 197, 66, 0.15);
  margin-top: 0.25rem;
  padding-top: 0.75rem !important;
}

/* 빨간별 아이콘 — 빨간별 반짝임 애니메이션 */
.star-bal-icon-red {
  animation: starTwinkleRed 2s ease-in-out infinite !important;
}

/* 이용기간 표시 */
.membership-days {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  margin-right: 0.25rem;
  white-space: nowrap;
}
.membership-days.days-ok {
  color: var(--sage);
}
.membership-days.days-warn {
  color: #f0a030;
}
.membership-days.days-danger {
  color: var(--rose);
  animation: pulse-danger 1.5s ease-in-out infinite;
}
@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 파랑별 아이콘 — 로고 .logo-star-img 세팅 기반 + 반짝임 애니메이션 */
.star-bal-icon {
  width: 1.025em;
  height: 1.025em;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 0.067em;
  animation: starTwinkleBlue 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .star-bal-icon { animation: none; }
}

/* 파랑/노란 구분선 */
.star-bal-sep {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: rgba(244, 197, 66, 0.3);
  margin: 0 0.35rem;
  vertical-align: middle;
}

/* 별 반짝반짝 애니메이션 */
@keyframes star-twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 2px rgba(244, 197, 66, 0.3));
  }
  25% {
    opacity: 0.75;
    transform: scale(0.9);
    filter: brightness(0.8) drop-shadow(0 0 1px rgba(244, 197, 66, 0.1));
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
    filter: brightness(1.3) drop-shadow(0 0 6px rgba(244, 197, 66, 0.8));
  }
  75% {
    opacity: 0.85;
    transform: scale(0.95);
    filter: brightness(0.9) drop-shadow(0 0 2px rgba(244, 197, 66, 0.2));
  }
}

.star-twinkle {
  display: inline-block;
  animation: star-twinkle 2s ease-in-out infinite;
}

/* 여러 별이 있을 때 시차를 둬서 자연스럽게 */
.star-twinkle:nth-child(2n) { animation-delay: 0.6s; }
.star-twinkle:nth-child(3n) { animation-delay: 1.2s; }
.star-twinkle:nth-child(4n) { animation-delay: 0.3s; }

/* === 별 상세 모달 === */
.star-modal {
  max-width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.star-modal-stars-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: -1.25rem -1.25rem 0;
}

.star-modal-star-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 1rem 0.5rem 0.75rem;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0.5rem 0.5rem 0 0;
  opacity: 0.5;
  transition: opacity var(--transition), border-color var(--transition);
}

.star-modal-star-item:hover {
  opacity: 0.8;
}

.star-modal-star-item.active {
  opacity: 1;
  border-color: var(--border);
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, 0.02);
}

.star-modal-star-icon {
  font-size: 1.8rem;
  line-height: 1;
}

img.star-modal-star-icon {
  width: 1.8rem;
  height: 1.8rem;
}

.star-modal-star-count {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
}

.star-modal-star-blue .star-modal-star-count { color: #5b9bd5; }
.star-modal-star-gold .star-modal-star-count { color: var(--gold); }

.star-modal-star-label {
  font-size: 0.72rem;
  color: var(--sand-dark);
}

.star-modal-tab-content {
  padding-top: 0.75rem;
}

.star-modal-blue-info {
  padding: 0.5rem 0;
}

.star-modal-blue-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: #5b9bd5;
  margin-bottom: 0.75rem;
}

.star-modal-blue-title-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.star-modal-blue-desc {
  font-size: 0.85rem;
  color: var(--sand);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.star-modal-blue-desc strong {
  color: #fff;
}

.star-modal-blue-table td:first-child {
  color: var(--sand-muted);
}

.star-modal-blue-val {
  text-align: right;
  font-weight: 700;
  color: #5b9bd5;
}

/* 레거시 호환 */
.star-modal-balance {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.2;
}

.star-modal-total {
  font-size: 0.8rem;
  color: var(--sand-dark);
  margin-top: 0.2rem;
}

.star-modal-section {
  margin-bottom: 1rem;
}

.star-modal-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.star-modal-section-title.toggle {
  cursor: pointer;
  user-select: none;
  transition: color var(--transition);
}

.star-modal-section-title.toggle:hover {
  color: var(--gold-light);
}

.star-modal-guide-body {
  display: none;
  margin-top: 0.4rem;
}

.star-modal-section-title.toggle.open + .star-modal-guide-body {
  display: block;
}

.star-modal-guide {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.star-modal-guide td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(37, 48, 82, 0.5);
}

.star-modal-guide td:last-child {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.star-modal-history {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.star-hist-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(37, 48, 82, 0.4);
  font-size: 0.82rem;
}

.star-hist-label {
  flex: 1;
  color: var(--sand);
}

.star-hist-time {
  font-size: 0.72rem;
  color: var(--sand-muted);
  white-space: nowrap;
}

.star-hist-amount {
  font-weight: 700;
  min-width: 2rem;
  text-align: right;
}

.star-hist-plus {
  color: var(--sage);
}

.star-hist-minus {
  color: var(--rose);
}

/* 관리자 회수 알림 */
.revoke-notif-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.revoke-notif-item {
  background: rgba(200, 80, 80, 0.08);
  border-left: 3px solid var(--rose);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-xs);
}

.revoke-notif-amount {
  font-size: 0.95rem;
  color: var(--rose);
  margin-bottom: 0.25rem;
}

.revoke-notif-reason {
  font-size: 0.85rem;
  color: var(--sand);
  line-height: 1.4;
}

.star-modal-empty {
  text-align: center;
  color: var(--sand-muted);
  font-size: 0.85rem;
  padding: 1.5rem 0;
}

/* === 네비게이션 활성 상태 (#9) === */
.header-nav .btn.nav-active,
.header-nav .btn[aria-current="page"] {
  background: rgba(244, 197, 66, 0.15);
  border-color: var(--gold);
  color: var(--gold);
}

/* === 모바일 헤더 아이콘 (#10) === */
.btn-icon-mobile {
  display: none;
}

/* === 공용 로딩 스피너 (#6) === */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

.loading-state {
  text-align: center;
  padding: 2rem 1rem;
}

.loading-state .loading-spinner {
  margin-bottom: 1rem;
}

.loading-state p {
  font-size: 0.9rem;
  color: var(--sand-dark);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === 커스텀 모달 (#7) === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 24, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: modalFadeIn 0.25s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-dialog {
  background: rgba(11, 16, 38, 0.98);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 1px rgba(244, 197, 66, 0.1);
  animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.modal-body {
  font-size: 0.92rem;
  color: var(--sand);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* === 글로벌 토스트 (#8) === */
.global-toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 90vw;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.global-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.global-toast.success {
  background: rgba(123, 198, 126, 0.95);
  color: var(--night);
}

.global-toast.error {
  background: rgba(232, 93, 117, 0.95);
  color: #fff;
}

.global-toast.info {
  background: rgba(240, 160, 48, 0.95);
  color: var(--night);
}

/* === 캘리브레이션 오버레이 클래스 (#16) === */
.calibration-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 24, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

/* === 통계 빈 상태 (#16) === */
.stats-empty-state {
  padding: 3rem 1rem;
}

.stats-empty-state img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  opacity: 0.7;
  border-radius: 12px;
}

/* === 스텝 인디케이터 (#13) === */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid var(--border);
  color: var(--sand-muted);
  background: transparent;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 0.75rem;
  color: var(--sand-muted);
  transition: color 0.3s ease;
}

.step.active .step-number {
  border-color: var(--gold);
  color: var(--night);
  background: var(--gold);
}

.step.active .step-label {
  color: var(--gold);
  font-weight: 600;
}

.step.completed .step-number {
  border-color: var(--sage);
  color: var(--night);
  background: var(--sage);
}

.step.completed .step-label {
  color: var(--sage);
}

.step-connector {
  width: 24px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
}

.step.completed + .step-connector,
.step.active + .step-connector {
  background: var(--gold);
}

/* === prefers-reduced-motion (#2) === */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .view {
    animation: none;
  }

  #warning-flash {
    display: none !important;
  }
}

/* === 반응형 480px 추가 규칙 === */
@media (max-width: 480px) {
  .btn-icon-mobile {
    display: inline;
  }

  .card {
    padding: var(--card-padding);
  }

  :root {
    --card-padding: 1rem;
  }

  /* 네비 버튼 오버플로 방지 — 아이콘 전용 모드에서 패딩 축소 */
  .header-nav {
    gap: 0.25rem;
  }

  .header-nav .btn-sm {
    padding: 0.4rem 0.55rem;
  }
}

/* 극소형 화면 (SE, Galaxy Fold 등) */
@media (max-width: 360px) {
  .header-nav .btn-sm {
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
  }

  .header-sj-badge {
    display: none;
  }
}

/* === AI 생성 아이콘 공통 === */
/* 이미지가 1024x1024이고 중앙 ~35%만 콘텐츠 → object-view-box로 크롭 */
.icon-inline,
.icon-nav,
.icon-lg,
.icon-mode,
.icon-tip {
  object-view-box: inset(24%);
  object-fit: contain;
}

.icon-inline {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.25em;
  display: inline-block;
  border-radius: 4px;
}

.icon-nav {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 4px;
}

.icon-lg {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 8px;
}

.icon-mode {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
}

.icon-tip {
  width: 2rem;
  height: 2rem;
  border-radius: 5px;
}

/* ===== 출석 오버레이 ===== */

.att-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  animation: attFadeIn 0.3s ease;
}

.att-overlay-closing {
  animation: attFadeOut 0.3s ease forwards;
}

@keyframes attFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes attFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.att-dialog {
  position: relative;
  max-width: 400px;
  width: 92%;
  background: linear-gradient(135deg, var(--night-card) 0%, #0d1530 100%);
  border: 1px solid var(--gold-dark);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 0 40px rgba(244, 197, 66, 0.15), 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: attSlideUp 0.4s ease;
}

@keyframes attSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.att-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--sand-muted);
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}

.att-close:hover,
.att-close:focus-visible {
  color: var(--sand);
  background: rgba(255, 255, 255, 0.08);
}

.att-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.att-header {
  text-align: center;
  margin-bottom: 1rem;
}

.att-month {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
}

.att-streak {
  font-size: 0.9rem;
  color: var(--amber);
  margin-top: 0.25rem;
}

/* 달력 그리드 */

.att-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 1rem;
}

.att-cal-weekday {
  text-align: center;
  font-size: 0.7rem;
  color: var(--sand-muted);
  font-weight: 600;
  padding-bottom: 0.25rem;
}

.att-cal-empty {
  aspect-ratio: 1;
}

.att-cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
  gap: 1px;
}

.att-cal-num {
  font-size: 0.7rem;
  color: var(--sand-dark);
  line-height: 1;
}

.att-cal-today {
  border: 2px solid var(--gold);
  background: rgba(244, 197, 66, 0.08);
}

.att-cal-today .att-cal-num {
  color: var(--gold);
  font-weight: 700;
}

.att-cal-stamped {
  background: rgba(244, 197, 66, 0.06);
}

/* 별 도장 */

.att-cal-star {
  font-size: 0.85rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(244, 197, 66, 0.6));
  animation: attStarGlow 2s ease-in-out infinite;
}

@keyframes attStarGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(244, 197, 66, 0.5)); }
  50%      { filter: drop-shadow(0 0 8px rgba(244, 197, 66, 0.9)); }
}

/* 오늘 새 출석 — 스탬프 드롭 애니메이션 */

.att-star-animate {
  animation: attStampDrop 0.7s ease 0.3s both, attStarGlow 2s ease-in-out 1s infinite;
}

@keyframes attStampDrop {
  0%   { transform: translateY(-30px) scale(1.8); opacity: 0; }
  60%  { transform: translateY(2px) scale(0.9); opacity: 1; }
  80%  { transform: translateY(-3px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

.att-cal-stamp-new {
  animation: attShake 0.5s ease 0.9s;
}

@keyframes attShake {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-4deg); }
  40%      { transform: rotate(4deg); }
  60%      { transform: rotate(-2deg); }
  80%      { transform: rotate(2deg); }
}

/* 보너스 메시지 */

.att-bonus-messages {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.att-bonus-msg {
  text-align: center;
  padding: 0.4rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  animation: attBonusPop 0.5s ease 0.5s both;
}

@keyframes attBonusPop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.att-bonus-daily {
  background: rgba(244, 197, 66, 0.15);
  color: var(--gold);
  border: 1px solid rgba(244, 197, 66, 0.3);
}

.att-bonus-weekly {
  background: rgba(232, 93, 117, 0.15);
  color: var(--rose-light);
  border: 1px solid rgba(232, 93, 117, 0.3);
}

.att-bonus-monthly {
  background: rgba(123, 198, 126, 0.15);
  color: var(--sage);
  border: 1px solid rgba(123, 198, 126, 0.3);
}

/* 진행률 바 */

.att-progress-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.att-progress-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.att-progress-label {
  font-size: 0.75rem;
  color: var(--sand-muted);
  white-space: nowrap;
  min-width: 5.5rem;
}

.att-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.att-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease 0.4s;
}

.att-progress-weekly {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}

.att-progress-monthly {
  background: linear-gradient(90deg, #5a9e5c, var(--sage));
}

/* 반응형 */

@media (max-width: 480px) {
  .att-dialog {
    padding: 1.25rem 1rem;
  }
  .att-cal-star {
    font-size: 0.7rem;
  }
  .att-cal-num {
    font-size: 0.75rem;
  }
  .att-month {
    font-size: 1.1rem;
  }
}

/* 모션 감소 */

@media (prefers-reduced-motion: reduce) {
  .att-overlay,
  .att-dialog,
  .att-star-animate,
  .att-cal-stamp-new,
  .att-bonus-msg {
    animation: none !important;
  }
  .att-cal-star {
    animation: none !important;
    filter: drop-shadow(0 0 4px rgba(244, 197, 66, 0.6));
  }
}

/* ========================================
   PWA 설치 배너
   ======================================== */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #152042 0%, #1a2a55 100%);
  border-top: 1px solid rgba(244, 197, 66, 0.3);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  animation: pwa-slide-up 0.4s ease;
}

@keyframes pwa-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

.pwa-install-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

.pwa-install-text {
  font-size: 0.78rem;
  color: var(--sand);
  line-height: 1.4;
}
.pwa-install-text strong {
  color: var(--gold);
}

.pwa-install-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* iOS 가이드 오버레이 */
.pwa-ios-guide-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.pwa-ios-guide {
  background: var(--night-card);
  border: 1px solid rgba(244, 197, 66, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 340px;
  width: 100%;
}

.pwa-ios-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pwa-ios-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--sand);
  line-height: 1.5;
}

.pwa-ios-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--night);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.pwa-ios-step strong {
  color: var(--gold);
}

@media (max-width: 400px) {
  .pwa-install-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .pwa-install-actions {
    justify-content: flex-end;
  }
}

/* === 오프라인 상태 배너 === */
.offline-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 1rem;
  background: rgba(232, 93, 117, 0.95);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.offline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: offlinePulse 1.5s ease-in-out infinite;
}
@keyframes offlinePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* === 온보딩 오버레이 === */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 10002;
  background: rgba(6, 10, 24, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: modalFadeIn 0.3s ease;
}
.onboarding-overlay.fade-out { animation: modalFadeIn 0.3s ease reverse forwards; }
.onboarding-card {
  max-width: 400px; width: 100%;
  background: var(--night-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
}
.onboarding-emoji { font-size: 3rem; margin-bottom: 0.75rem; }
.onboarding-title { font-size: 1.2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.5rem; }
.onboarding-desc { font-size: 0.88rem; color: var(--sand); line-height: 1.6; }
.onboarding-features { text-align: left; margin-top: 1rem; }
.onboarding-feature {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.5rem 0; font-size: 0.85rem; color: var(--sand);
}
.onboarding-feature span { font-size: 1.5rem; }
.onboarding-feature strong { color: var(--gold); }
.onboarding-rewards { margin-top: 1rem; text-align: left; }
.onboarding-reward {
  padding: 0.4rem 0; font-size: 0.85rem; color: var(--sand);
}
.onboarding-nav { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.onboarding-dots { display: flex; gap: 0.5rem; }
.onboarding-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: background 0.3s;
}
.onboarding-dot.active { background: var(--gold); }
.onboarding-next-btn { min-width: 120px; }

/* 로딩 스피너 */
.loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(244, 197, 66, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-spinner.lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
}
.spinner-overlay .loading-text {
  color: var(--sand-muted);
  font-size: 0.85rem;
}

/* 터치 타겟 최소 48px 보장 */
.touch-target {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}