/* ==========================================================================
   RUNNOW Multi-Theme Modern Design System (No SF / No Neon)
   Supported Themes:
   1) Webtoon Clean (Default - Naver Webtoon Green & Warm White)
   2) Modern Minimal (Nike Black & White)
   3) Nature Forest (Sage Green & Earth Beige)
   4) Soft Pastel (Coral Pink & Cream Peach)
   ========================================================================== */

/* 1. Default Theme: Naver Webtoon Edition */
:root, [data-theme="webtoon"] {
  --theme-name: 'webtoon';
  --bg-deep: #F4F6F8;
  --bg-subtle: #EBF0F4;
  --surface-card: #FFFFFF;
  --surface-elevated: #F8FAFC;
  --surface-glass: rgba(255, 255, 255, 0.95);
  
  --primary-accent: #00C73C;       /* Naver Webtoon Signature Green */
  --primary-accent-hover: #00B035;
  --primary-accent-subtle: rgba(0, 199, 60, 0.12);
  --primary-accent-text: #FFFFFF;

  --secondary-accent: #FF9500;     /* Warm Amber */
  --secondary-subtle: rgba(255, 149, 0, 0.12);

  --highlight-color: #3B82F6;      /* Joyful Sky Blue */
  
  --border-card: #E2E8F0;
  --border-subtle: #EDF2F7;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);

  --text-main: #191F28;
  --text-sub: #4E5968;
  --text-muted: #8B95A1;
  
  --font-ui: -apple-system, BlinkMacSystemFont, 'Pretendard', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --lh-tight: 1.3;
  --lh-body: 1.5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
}

/* 2. Modern Minimalist (Nike Pure B&W) */
[data-theme="minimal"] {
  --theme-name: 'minimal';
  --bg-deep: #111111;
  --bg-subtle: #1C1C1E;
  --surface-card: #242426;
  --surface-elevated: #2C2C2E;
  --surface-glass: rgba(36, 36, 38, 0.95);
  
  --primary-accent: #FFFFFF;
  --primary-accent-hover: #E5E5EA;
  --primary-accent-subtle: rgba(255, 255, 255, 0.15);
  --primary-accent-text: #111111;

  --secondary-accent: #E5E5EA;
  --secondary-subtle: rgba(255, 255, 255, 0.1);
  --highlight-color: #0A84FF;
  
  --border-card: #3A3A3C;
  --border-subtle: #2C2C2E;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.6);

  --text-main: #FFFFFF;
  --text-sub: #D1D1D6;
  --text-muted: #8E8E93;
}

/* 3. Nature Forest (Sage Green & Earth Beige) */
[data-theme="forest"] {
  --theme-name: 'forest';
  --bg-deep: #F3F5F1;
  --bg-subtle: #E7ECE4;
  --surface-card: #FFFFFF;
  --surface-elevated: #F9FAF7;
  --surface-glass: rgba(255, 255, 255, 0.95);
  
  --primary-accent: #2E7D32;       /* Forest Sage Green */
  --primary-accent-hover: #1B5E20;
  --primary-accent-subtle: rgba(46, 125, 50, 0.12);
  --primary-accent-text: #FFFFFF;

  --secondary-accent: #E67E22;     /* Warm Earth Orange */
  --secondary-subtle: rgba(230, 126, 34, 0.12);
  --highlight-color: #4A6572;
  
  --border-card: #DCE3D8;
  --border-subtle: #E8EDE5;
  --card-shadow: 0 4px 16px rgba(46, 125, 50, 0.08);
  --card-shadow-hover: 0 8px 24px rgba(46, 125, 50, 0.14);

  --text-main: #1C2826;
  --text-sub: #485A56;
  --text-muted: #7E908C;
}

/* 4. Soft Pastel (Coral Pink & Peach) */
[data-theme="pastel"] {
  --theme-name: 'pastel';
  --bg-deep: #FFF7F8;
  --bg-subtle: #FFEBEF;
  --surface-card: #FFFFFF;
  --surface-elevated: #FFF9FA;
  --surface-glass: rgba(255, 255, 255, 0.95);
  
  --primary-accent: #FF5A79;       /* Sweet Coral Pink */
  --primary-accent-hover: #E04866;
  --primary-accent-subtle: rgba(255, 90, 121, 0.12);
  --primary-accent-text: #FFFFFF;

  --secondary-accent: #8A63D2;     /* Soft Lavender */
  --secondary-subtle: rgba(138, 99, 210, 0.12);
  --highlight-color: #FFB300;
  
  --border-card: #FFDDE4;
  --border-subtle: #FFEAF0;
  --card-shadow: 0 4px 16px rgba(255, 90, 121, 0.08);
  --card-shadow-hover: 0 8px 24px rgba(255, 90, 121, 0.15);

  --text-main: #2C2224;
  --text-sub: #634F53;
  --text-muted: #9E888C;
}

/* Stitch 사양서 토큰 별칭. 테마 accent에 맞춰 해석되므로 밝은/어두운 테마 모두 대비가 유지됨 */
:root,
[data-theme="webtoon"],
[data-theme="minimal"],
[data-theme="forest"],
[data-theme="pastel"] {
  --primary-volt: var(--primary-accent);
  --cyber-cyan: var(--highlight-color);
  --text-white: var(--text-main);
  --surface-carbon: var(--surface-card);
  --border-glass: var(--border-card);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-height: 100svh;
}

/* Global Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html, body {
  height: 100%;
  height: 100svh;
  height: var(--app-height, 100svh);
  max-height: var(--app-height, 100svh);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-ui);
  display: flex;
  justify-content: center;
  align-items: stretch;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Centered Mobile-first Viewport */
.app-viewport {
  width: 100%;
  max-width: 480px;
  height: 100%;
  height: var(--app-height, 100svh);
  max-height: var(--app-height, 100svh);
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

#main-app-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

/* ==========================================================================
   Header HUD
   ========================================================================== */
.app-header {
  min-height: calc(56px + var(--safe-top));
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--safe-top) 16px 0;
  z-index: 100;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-badge {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.brand-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text-main);
}

.brand-title span {
  color: var(--primary-accent);
}

.user-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
}

.coin-badge {
  background: var(--primary-accent-subtle);
  color: var(--primary-accent);
  border: 1px solid var(--border-card);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Theme Selector Modal / Header Dropdown */
.theme-selector-bar {
  display: flex;
  gap: var(--space-2);
  background: var(--surface-card);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  flex-shrink: 0;
}

.theme-btn {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  color: var(--text-sub);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.theme-btn.active {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  border-color: var(--primary-accent);
  box-shadow: 0 2px 8px var(--primary-accent-subtle);
}

/* ==========================================================================
   Main Scrollable Body & Tab Panes
   ========================================================================== */
.app-main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5) var(--space-4) 24px;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

.tab-pane.active {
  display: block;
}

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

/* Card System */
.nrc-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--card-shadow);
}

.card-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--primary-accent);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.nrc-card > h3 {
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--text-main);
  margin-bottom: var(--space-4);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: var(--space-2);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.form-grid .form-group {
  margin-bottom: 0;
}

.form-hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.choice-btn {
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.choice-btn.active {
  border-color: var(--primary-accent);
  color: var(--primary-accent);
  background: var(--primary-accent-subtle);
}

.metric-box {
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0 var(--space-5);
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.metric-row + .metric-row {
  margin-top: var(--space-3);
}

.metric-row span {
  color: var(--text-sub);
}

.metric-row strong {
  color: var(--primary-accent);
  font-weight: 800;
}

.panel-soft {
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-5);
}

.panel-soft h4,
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.panel-soft p {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-sub);
  margin-bottom: var(--space-3);
}

.panel-tag {
  flex-shrink: 0;
  background: var(--primary-accent-subtle);
  color: var(--primary-accent);
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
}

/* Metric Display in Live Run */
.live-run-hero {
  text-align: center;
  padding: 24px 16px 20px;
}

.metric-circle {
  width: 190px;
  height: 190px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 6px solid var(--primary-accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 24px var(--primary-accent-subtle);
}

.main-distance-num {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-main);
  letter-spacing: -1.5px;
}

.main-distance-unit {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  margin-top: 4px;
}

.gps-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-accent-subtle);
  color: var(--primary-accent);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}

.hud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.hud-item {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  text-align: center;
}

.hud-val {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
}

.hud-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Buttons */
.btn-primary-volt {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px var(--primary-accent-subtle);
  transition: all 0.2s ease;
}

.btn-primary-volt:hover {
  background: var(--primary-accent-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface-elevated);
  color: var(--text-main);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  min-height: 44px;
  font-size: var(--fs-md);
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.panel-soft .btn-secondary {
  width: 100%;
}

.btn-secondary:hover {
  background: var(--border-subtle);
}

.run-controls {
  display: flex;
  gap: 10px;
}

.run-controls button {
  flex: 1;
}

/* ==========================================================================
   Tamagotchi View
   ========================================================================== */
.tamagotchi-stage {
  text-align: center;
  padding: 20px 16px;
}

.pet-switch-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  background: var(--surface-elevated);
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pet-switch-btn.active {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  border-color: var(--primary-accent);
}

.t-avatar-box {
  width: 210px;
  height: 210px;
  margin: 14px auto 16px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.t-img-avatar {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--card-shadow-hover);
  border: 4px solid var(--primary-accent);
  transition: all 0.3s ease;
}

.t-img-avatar:hover {
  transform: scale(1.04);
}

.t-name-badge {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 4px;
}

.t-stage-pill {
  display: inline-block;
  background: var(--primary-accent-subtle);
  color: var(--primary-accent);
  border: 1px solid var(--border-subtle);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}

/* Physiology Stats */
.physio-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  text-align: center;
}

.stat-row {
  margin-bottom: 12px;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
  color: var(--text-sub);
}

.stat-bar-bg {
  height: 9px;
  background: var(--surface-elevated);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.stat-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.fill-volt { background: var(--primary-accent); }
.fill-cyan { background: var(--highlight-color); }
.fill-orange { background: var(--secondary-accent); }

.t-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.t-btn-action {
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  padding: 12px 6px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.t-btn-action:hover {
  border-color: var(--primary-accent);
  color: var(--primary-accent);
}

/* ==========================================================================
   Quests & 5 Sub-Tabs
   ========================================================================== */
.quest-main-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.quest-main-tab-btn {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  color: var(--text-sub);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.quest-main-tab-btn.active {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  border-color: var(--primary-accent);
}

.quest-item {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: var(--card-shadow);
}

.quest-btn-claim {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.quest-btn-claim:disabled {
  background: var(--border-subtle);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* 21-Day Matrix */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 12px 0 20px;
}

.day-cell {
  aspect-ratio: 1;
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
}

.day-cell.completed {
  background: var(--primary-accent-subtle);
  border-color: var(--primary-accent);
  color: var(--primary-accent);
}

/* ==========================================================================
   Bottom Navigation Bar
   ========================================================================== */
.bottom-nav {
  position: relative;
  flex-shrink: 0;
  height: auto;
  background: var(--surface-card);
  border-top: 1px solid var(--border-card);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 4px calc(10px + var(--safe-bottom));
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}

.nav-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.nav-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
}

.nav-btn.active {
  color: var(--primary-accent);
}

.nav-btn.active svg {
  stroke: var(--primary-accent);
}

/* ==========================================================================
   Modals & Onboarding
   ========================================================================== */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
}

.modal-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.form-input {
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  outline: none;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  min-height: 44px;
  padding: 10px var(--space-3);
  width: 100%;
}

.form-input:focus {
  border-color: var(--primary-accent);
}

.view-auth,
.view-onboarding,
.view-pet-select {
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(24px + var(--safe-top)) 18px calc(28px + var(--safe-bottom));
  background: var(--bg-deep);
  color: var(--text-main);
}

.view-auth {
  justify-content: flex-start;
  gap: 16px;
}

.ob-form-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ob-submit-wrap {
  flex-shrink: 0;
  padding-top: 12px;
}

.view-onboarding {
  justify-content: flex-start;
  overflow: hidden;
}

.auth-brand,
.auth-mascot {
  width: 100%;
  text-align: center;
}

#btn-page-google-login {
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--card-shadow) !important;
  color: #191F28 !important;
}

.view-onboarding h2,
.nrc-card h3,
#habit-cue-display {
  color: var(--text-main) !important;
}

.view-onboarding h2 span {
  color: var(--primary-accent) !important;
}

.view-onboarding label {
  color: var(--primary-accent) !important;
}

.view-onboarding .form-input,
.view-onboarding select {
  background: var(--surface-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-card);
}

.ob-goal-card {
  color: var(--text-main) !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
}

.ob-goal-card.active {
  border-color: var(--primary-accent) !important;
  background: var(--primary-accent-subtle) !important;
}

.ob-goal-card span {
  color: var(--text-sub) !important;
}

.ob-goal-card.active span {
  color: var(--primary-accent) !important;
}

.modal-card {
  background: var(--surface-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-card) !important;
}

.modal-card strong,
.modal-card h3,
.modal-card p {
  color: var(--text-main);
}

.view-pet-select {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background: var(--bg-deep);
}

.ps-step-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ps-step-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary-accent);
  background: var(--primary-accent-subtle);
  padding: 3px 8px;
  border-radius: 12px;
}

.ps-step-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.ps-title {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--text-main);
}

.ps-title span {
  color: var(--primary-accent);
}

.ps-desc {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 600;
  line-height: 1.5;
}

.ps-card-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ps-card {
  width: 100%;
  padding: 16px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 2px solid var(--border-card);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ps-card.active {
  border-color: var(--primary-accent);
  background: var(--primary-accent-subtle);
  box-shadow: var(--card-shadow-hover);
}

.ps-card-img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-accent);
  box-shadow: var(--card-shadow);
}

.ps-card-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
}

.ps-card-role {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-accent);
}

.ps-card-tag {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
}

#btn-confirm-pet:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#btn-confirm-pet:disabled:hover {
  transform: none;
}

.auth-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ob-pet-card {
  transition: all 0.2s ease;
}

.ob-pet-card.active {
  border-color: var(--primary-accent) !important;
  background: var(--primary-accent-subtle) !important;
}

/* Animation Utilities */
.bounce-anim {
  animation: gentleBounce 2s infinite ease-in-out;
}

.run-anim {
  animation: gentleJog 1.2s infinite ease-in-out;
}

.master-anim {
  animation: gentlePulse 2.5s infinite ease-in-out;
}

.legend-anim {
  animation: gentlePulse 2s infinite ease-in-out;
}

@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes gentleJog {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(1deg); }
  75% { transform: translateY(-2px) rotate(-1deg); }
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ==========================================================================
   실제 HTML/JS 클래스 정합 (quest-card, shop-card, nav-item)
   ========================================================================== */
.nav-item {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 52px;
  border-radius: var(--radius-md);
}

.nav-item .nav-icon {
  font-size: 20px;
  line-height: 1;
}

.nav-item.active {
  color: var(--primary-accent);
  background: var(--primary-accent-subtle);
}

.form-input {
  padding: 10px 12px;
  width: 100%;
  font-size: 14px;
}

.t-actions-row {
  grid-template-columns: 1fr 1fr;
}

.quest-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quest-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px;
}

.quest-card.completed {
  border-color: var(--primary-accent);
  background: var(--primary-accent-subtle);
}

.quest-card.claimed {
  opacity: 0.72;
}

.quest-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.quest-info {
  flex: 1;
  min-width: 0;
}

.quest-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.quest-badge,
.bounty-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--primary-accent-subtle);
  color: var(--primary-accent);
  border: 1px solid var(--border-card);
}

.quest-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.quest-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.quest-reward-pill {
  font-size: 11px;
  font-weight: 800;
  color: var(--secondary-accent);
}

.quest-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.btn-quest-claim {
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.btn-quest-claim:disabled {
  background: var(--surface-card);
  color: var(--text-sub);
  border: 1px solid var(--border-card);
  cursor: not-allowed;
}

.shop-filter-bar,
.quest-category-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.filter-chip {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.filter-chip.active {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  border-color: var(--primary-accent);
}

.shop-items-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

.item-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.item-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 6px 0 4px;
}

.item-bonus {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-sub);
}

.item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.item-price {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
}

.btn-buy {
  min-height: 44px;
  min-width: 88px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.paypal-badge {
  background: var(--primary-accent-subtle);
  border: 1px solid var(--border-card);
  color: var(--primary-accent);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
}

.quest-claimed-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 800;
  padding: 6px 10px;
  background: var(--surface-card);
  border-radius: 6px;
  white-space: nowrap;
}

/* ==========================================================================
   Exercise catalog + camera pose stage
   ========================================================================== */
.ex-list-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
  margin: 0 0 6px;
}

.ex-list-lead {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.45;
  margin: 0 0 16px;
}

.exercise-catalog {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ex-pick-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-main);
}

.ex-pick-card:hover {
  border-color: var(--primary-accent);
}

.ex-pick-photo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-subtle);
}

.pose-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  z-index: 0;
  pointer-events: none;
}

.ex-pick-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ex-pick-body strong {
  font-size: 15px;
  font-weight: 800;
}

.ex-pick-body span {
  font-size: 12px;
  color: var(--text-muted);
}

.ex-pick-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-accent-subtle);
  color: var(--primary-accent);
  flex-shrink: 0;
}

.run-place-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.run-place-btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid var(--border-card);
  background: var(--surface-elevated);
  color: var(--text-muted);
  cursor: pointer;
}

.run-place-btn.active {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  border-color: var(--primary-accent);
}

.run-place-btn:disabled,
#treadmill-speed-chips .target-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 12px;
}

.motion-page-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
}

.pose-target-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.pose-target-row .motion-target-chips {
  display: flex;
  gap: 6px;
}

.pose-target-row .target-chip.active {
  background: var(--primary-accent);
  color: var(--primary-accent-text);
  font-weight: 800;
}

.pose-stage {
  position: relative;
  width: 100%;
  height: 360px;
  background: #0b1220;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-card);
  margin-bottom: 10px;
}

.pose-stage video,
.pose-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.pose-stage video {
  z-index: 1;
  opacity: 0;
  background: #0b1220;
}

.pose-stage canvas {
  z-index: 2;
  pointer-events: none;
  background: #0b1220;
}

.pose-standby {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(11, 18, 32, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.pose-standby > *:not(.pose-cover-img) {
  position: relative;
  z-index: 1;
}

.pose-standby-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-accent-subtle);
  border: 2px solid var(--primary-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 12px;
}

.pose-standby strong {
  font-size: 16px;
  color: #fff;
  margin-bottom: 6px;
}

.pose-standby p {
  font-size: 12px;
  color: #c5cdd8;
  line-height: 1.45;
  max-width: 280px;
  margin: 0 0 16px;
}

.pose-badge {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(8, 9, 12, 0.78);
  color: #fff;
  border-radius: 12px;
  padding: 6px 10px;
  pointer-events: none;
}

.pose-badge-reps {
  top: 10px;
  left: 10px;
}

.pose-badge-reps #motion-live-reps {
  font-size: 28px;
  font-weight: 900;
  color: #FFD60A;
  line-height: 1;
  font-family: "Montserrat", var(--font-ui);
}

.pose-badge-meta {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 800;
  color: #d7dde6;
  letter-spacing: 0.4px;
}

.pose-badge-angle {
  top: 10px;
  right: 10px;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.pose-badge-angle #motion-hud-angle {
  font-size: 18px;
  font-weight: 900;
  color: #FFD60A;
  line-height: 1.1;
}

.pose-badge-angle #motion-angle-label {
  font-size: 10px;
  font-weight: 800;
  color: #d7dde6;
  letter-spacing: 0.6px;
}

.pose-hud-tools {
  position: absolute;
  top: 58px;
  right: 10px;
  z-index: 6;
  display: flex;
  gap: 6px;
}

.pose-hud-tools button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(8, 9, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.pose-mascot {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 9, 12, 0.78);
  border-radius: 12px;
  padding: 6px 10px;
  color: #fff;
}

.pose-mascot #motion-mascot-icon {
  font-size: 22px;
}

.pose-mascot #motion-mascot-name {
  font-size: 10px;
  color: #c5cdd8;
  font-weight: 700;
}

.pose-mascot #motion-mascot-speech {
  font-size: 11px;
  color: #FFD60A;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pose-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFF6D8;
  border: 1px solid #F5C518;
  color: #7A5A00;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.pose-feedback.is-good {
  background: var(--primary-accent-subtle);
  border-color: var(--primary-accent);
  color: var(--primary-accent);
}

.pose-progress-card,
.pose-tips-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.pose-progress-head,
.pose-tips-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-main);
}

.pose-progress-track {
  height: 8px;
  background: var(--bg-subtle);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}

#motion-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #F5C518, #00C73C);
  transition: width 0.2s ease;
}

.pose-depth-ghost {
  display: none;
}

.pose-progress-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pose-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-card);
}

.pose-dot.done {
  background: #F5C518;
  border-color: #F5C518;
}

.pose-tips-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.5;
}

.pose-stats-grid {
  margin-bottom: 14px;
}

#motion-live-reps.pop-anim {
  animation: repPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes repPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

.workout-mode-switcher,
.workout-mode-btn,
.motion-viewport-container {
  position: relative;
}