/* ==========================================================================
   styles.css - Senior UI Tokens, Premium Typography & Tab Utilities
   ========================================================================== */

/* Import High-Readability Korean Fonts: Pretendard & Noto Sans KR */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

/* Global High-Readability Font Stack & Smooth Anti-Aliasing */
*, ::before, ::after {
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Base Body Styles */
body {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
  line-height: 1.6;
  letter-spacing: -0.02em;
  background-color: #f8fafc;
  color: #0f172a;
}

/* Font Scaler Classes for Senior Accessibility */
body.font-scale-normal {
  font-size: 16px;
}
body.font-scale-large {
  font-size: 20px;
}
body.font-scale-xlarge {
  font-size: 24px;
}

/* Scale Form Controls and Interactive Text */
body.font-scale-large input, 
body.font-scale-large button, 
body.font-scale-large select,
body.font-scale-large textarea {
  font-size: 1.15rem !important;
}

body.font-scale-xlarge input, 
body.font-scale-xlarge button, 
body.font-scale-xlarge select,
body.font-scale-xlarge textarea {
  font-size: 1.35rem !important;
}

/* Hide scrollbars for clean navigation scrolling */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* STRICT SINGLE PAGE TAB DISPLAY RULES */
/* Force all non-active tab sections to be completely hidden (display: none !important) */
.content-tab-page {
  display: none !important;
}

/* Display ONLY the single active tab section (display: block !important) */
.content-tab-page.active {
  display: block !important;
  animation: fadeIn 0.25s ease-out;
}

/* Sub Content Pages */
.sub-content-page {
  display: none !important;
}
.sub-content-page.active {
  display: block !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Memory Game Card Grid */
.memory-card {
  aspect-ratio: 1/1;
  background: #059669;
  color: #ffffff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s;
}

.memory-card.flipped, .memory-card.matched {
  background: #ffffff;
  border: 3px solid #059669;
  color: #1e293b;
}

/* Lotto Ball Badges */
.lotto-ball {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  animation: popIn 0.35s ease-out;
}

.ball-empty { background: #cbd5e1; color: #475569; }
.ball-yellow { background: #eab308; }  /* 1-10 */
.ball-blue { background: #3b82f6; }    /* 11-20 */
.ball-red { background: #ef4444; }     /* 21-30 */
.ball-gray { background: #64748b; }    /* 31-40 */
.ball-green { background: #22c55e; }   /* 41-45 */

@keyframes popIn {
  0% { transform: scale(0.2); opacity: 0; }
  80% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Stamp Calendar Grid Box */
.stamp-box {
  aspect-ratio: 1/1;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  font-weight: 700;
  color: #64748b;
  background: #ffffff;
}

.stamp-box.stamped {
  border-style: solid;
  border-color: #f59e0b;
  background: #fef3c7;
  color: #b45309;
  font-weight: 900;
}

.stamp-box.stamped i {
  font-size: 1.5rem;
  color: #d97706;
}