/* ============================================================
   LANDING DESK — base.css
   리셋 + 기본 타이포 + 앱 레이아웃 골격(사이드바/콘텐츠 그리드)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }

/* 테마 전환을 부드럽게 (호버 트랜지션이 없는 구조 표면에만 적용) */
body, #app-sidebar, #app-topbar, .card, .table thead th { transition: var(--theme-transition); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4 { font-weight: var(--fw-semibold); color: var(--text-strong); line-height: var(--lh-tight); }

/* ---------- Typography helpers ---------- */
.t-display { font-size: var(--fs-display); font-weight: var(--fw-bold); color: var(--text-strong); }
.t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--text-strong); }
.t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-muted { color: var(--text-muted); }
.t-sm { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }

/* ---------- App layout shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* sidebar mounts here (base structure in components.css) */
#app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  z-index: 30;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow inner tables to scroll instead of blowing out grid */
}

#app-topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-h);
  background: var(--bg-app);
  z-index: 20;
}

.content {
  padding: var(--content-pad);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

/* page-level vertical rhythm */
.stack > * + * { margin-top: var(--sp-6); }

/* generic grid helpers */
.grid { display: grid; gap: var(--sp-6); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* visually-hidden */
.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;
}

/* ---------- Mobile sidebar (offcanvas) scaffolding ---------- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,23,40,.4);
  z-index: 25;
}

@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  #app-sidebar {
    position: fixed;
    left: 0; top: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open #app-sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
}

@media (max-width: 768px) {
  :root { --content-pad: 18px; }
}

/* ============================================================
   MOTION — 등장 효과 (페이지 로드 시 카드/섹션 스태거 페이드업)
   ============================================================ */
@keyframes ld-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ld-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 콘텐츠 영역 진입 시 부드럽게 떠오름 */
.content > * { animation: ld-rise var(--dur-slow) var(--ease-out) both; }
.content > *:nth-child(1) { animation-delay: .02s; }
.content > *:nth-child(2) { animation-delay: .08s; }
.content > *:nth-child(3) { animation-delay: .14s; }
.content > *:nth-child(4) { animation-delay: .20s; }
.content > *:nth-child(5) { animation-delay: .26s; }

/* 그리드/스택 내부 항목도 개별 스태거 (스탯 카드·템플릿 타일·요약 카드 등) */
.dash-stats > *,
.tpl-gallery > *,
.dash-split > .stack > .card { animation: ld-rise var(--dur-slow) var(--ease-spring) both; }
.dash-stats > *:nth-child(1),
.tpl-gallery > *:nth-child(1) { animation-delay: .04s; }
.dash-stats > *:nth-child(2),
.tpl-gallery > *:nth-child(2) { animation-delay: .10s; }
.dash-stats > *:nth-child(3),
.tpl-gallery > *:nth-child(3) { animation-delay: .16s; }
.dash-stats > *:nth-child(4),
.tpl-gallery > *:nth-child(4) { animation-delay: .22s; }
.tpl-gallery > *:nth-child(5) { animation-delay: .28s; }
.tpl-gallery > *:nth-child(6) { animation-delay: .34s; }
.tpl-gallery > *:nth-child(7) { animation-delay: .40s; }
.tpl-gallery > *:nth-child(8) { animation-delay: .46s; }

/* 사이드바/탑바 진입 */
#app-sidebar { animation: ld-fade var(--dur-slow) var(--ease-out) both; }
#app-topbar { animation: ld-rise var(--dur) var(--ease-out) both; }

/* JS로 새로 추가되는 행/타일에 붙이는 등장 클래스 */
.ld-in { animation: ld-rise var(--dur) var(--ease-spring) both; }

/* ============================================================
   접근성 — 모션 최소화 사용자에게는 모든 애니메이션/트랜지션 비활성
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}