/* css/base.css
   ─────────────────────────────────────────────
   [역할] 기본 리셋 + 전체 레이아웃(헤더/탭바/본문). */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  font-size: 14px;
  line-height: 1.5;
}

/* 헤더 */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-navy); color: #fff;
  padding: var(--space-3) var(--space-4);
}
.app-header .brand { font-weight: 700; font-size: 16px; }
.app-header .ver { opacity: .7; font-weight: 400; font-size: 12px; margin-left: 4px; }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }

/* 메인 탭바 */
.main-tabs { display: flex; gap: 2px; background: var(--c-blue); padding: 0 var(--space-3); flex-wrap: wrap; }
.main-tabs .tab {
  color: #eaf1fb; text-decoration: none; padding: 12px 16px; font-weight: 600;
  border-bottom: 3px solid transparent;
}
.main-tabs .tab.active { color: #fff; border-bottom-color: #fff; background: rgba(255,255,255,.1); }

/* 서브탭 바 */
.sub-tabs { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--c-surface); border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.sub-tabs .subtab { color: var(--c-muted); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.sub-tabs .subtab.active { background: var(--c-navy); color: #fff; }

/* 본문 */
.view { padding: var(--space-4); max-width: 1760px; margin: 0 auto; }

/* 상태 표시 */
.loading { padding: var(--space-4); color: var(--c-muted); }
.error-box { padding: var(--space-3); background: #FDECEC; color: var(--c-danger); border: 1px solid #f5c2c2; border-radius: var(--radius); }
.empty-box { padding: var(--space-3); color: var(--c-muted); }