/* =========================================================
   쑥쑥위크 앱 골격 (I1) — design-system 위에 조립만. semantic 토큰 조합, .app-* 접두사.
   ========================================================= */

/* ---------- 앱 골격 ---------- */
.ds-app__body:focus { outline: none; }
.ds-app__body > .app-screen { margin-top: 0; }
.app-screen > * + * { margin-top: var(--section-gap); }      /* 화면 안 섹션 리듬 (디자인시스템 5.1) */
.ds-tabbar.app-tabbar5 { grid-template-columns: repeat(5, minmax(60px, 1fr)); }
.is-bare .ds-topbar, .is-bare .ds-tabbar { display: none; }
.is-bare .ds-app__body { padding-bottom: 0; }

/* 상단바: 잔액 pop, 테스트 날짜 배지 (CM-08) */
.ds-points.is-pop .ds-points__coin { animation: app-pop var(--duration-slow) var(--ease-pop); }
@keyframes app-pop { 50% { transform: scale(1.3); } }
.app-test-badge { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 배너 (상단바 바로 아래 전체 폭) */
.app-banners {
  position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: var(--z-banner);
  margin: calc(var(--space-4) * -1) calc(var(--page-x) * -1) var(--space-4);
  display: grid;
}
.app-banners:empty { display: none; }
.app-banners .ds-banner { border-radius: 0; margin: 0; align-items: center; }
.app-banner__close { flex: none; width: 36px; height: 36px; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; color: inherit; }
.app-banner__close svg { width: 18px; height: 18px; }

/* 시트 · 토스트 · 플로팅 */
.app-sheet-content { display: contents; }
.ds-sheet { bottom: var(--kb, 0px); }                       /* 가상 키보드 위로 (M8) */
.ds-sheet__handle, .ds-sheet__head { touch-action: none; cursor: grab; }
.app-toast-coin { width: 20px; height: 20px; flex: none; }
.app-toast--success { background: var(--green-800, var(--neutral-900)); }
.app-float-host { position: fixed; z-index: var(--z-toast); pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .ds-float-point { animation-duration: 1ms; animation-delay: 700ms; }
  .ds-points.is-pop .ds-points__coin { animation: none; }
}

/* 데스크톱(≥768): 가운데 430 프레임 안에서만 스크롤 → 탭바·토스트도 프레임 안 (계약서 10.1) */
@media (min-width: 768px) {
  .ds-app { height: calc(100vh - var(--space-16)); height: calc(100dvh - var(--space-16)); }
  .ds-app__body { overflow-y: auto; min-height: 0; }
  .ds-app .ds-tabbar, .ds-app > .ds-toast-region { position: absolute; }
  .ds-app .ds-tabbar { left: 0; transform: none; }
  .app-banners { top: 0; }
  .ds-sheet { bottom: calc(var(--space-8) + var(--kb, 0px)); border-radius: var(--radius-xl); }
}

/* ---------- 시작 스플래시 (CM-13) ---------- */
.app-splash {
  position: fixed; inset: 0; z-index: var(--z-toast);
  display: grid; place-content: center; justify-items: center; gap: var(--space-2);
  background: var(--color-bg); text-align: center;
}
@media (min-width: 768px) { .app-splash { position: absolute; } }
.app-splash__art { width: 120px; height: 120px; filter: brightness(0); opacity: 0.12; animation: app-breathe 1.6s var(--ease-out) infinite alternate; }
.app-splash__brand { margin: var(--space-2) 0 0; font-size: var(--font-size-2xl); color: var(--color-primary-text); }
.app-splash__msg { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-sub); }
@keyframes app-breathe { to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .app-splash__art { animation: none; } }