/* ══════════════════════════════════════════════════════════════
   shell.css — 앱 셸 (A안)

   모바일  : 상단 바 + 하단 탭 5개
   데스크톱: 좌측 사이드바 (1024px 이상), 상단 바·하단 탭 없음

   내비게이션 내용은 core/navigation.py의 NAV 하나에서 온다.
   규격: docs/UI_STANDARDS.md 1장
   ══════════════════════════════════════════════════════════════ */

/* ── 상단 바 (모바일 전용) ──────────────────────────────────── */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-4);
  background: var(--shell-bg);
  color: var(--shell-text);
  padding-left: max(var(--sp-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sp-4), env(safe-area-inset-right, 0px));
}
.app-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--shell-text-hi);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.app-topbar-spacer { flex: 1; }
.app-topbar-user {
  font-size: var(--fs-xs);
  color: var(--shell-muted);
}

/* ── 하단 탭 (모바일 전용) ──────────────────────────────────── */
.app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  /* iPhone 홈 인디케이터 영역을 피한다 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tabbar-h);
  padding: var(--sp-2) var(--sp-1);
  font-size: 0.6875rem;          /* 11px — 탭 라벨 전용 */
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease);
}
.app-tab-icon {
  font-size: 1.15rem;
  line-height: 1;
  /* 비활성 탭 아이콘은 채도를 낮춰 활성 탭이 먼저 읽히게 한다 */
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease);
}
.app-tab.is-active {
  color: var(--accent);
  font-weight: var(--fw-bold);
}
.app-tab.is-active .app-tab-icon { filter: none; opacity: 1; }
.app-tab:focus-visible { outline-offset: -3px; }

/* ── 사이드바 (데스크톱 전용) ───────────────────────────────── */
.app-sidebar { display: none; }

/* ── 본문 ───────────────────────────────────────────────────── */
.app-main {
  /* 하단 탭 높이 + 안전 영역만큼 비워 마지막 요소가 가리지 않게 한다 */
  padding-bottom: calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════════════════════════
   데스크톱 (1024px~) — 사이드바로 전환
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .app-topbar { display: none; }
  .app-tabbar { display: none; }

  .app-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    z-index: var(--z-sticky);
    background: var(--shell-bg);
    color: var(--shell-text);
    padding: var(--sp-4) var(--sp-3);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-sidebar .app-brand {
    font-size: var(--fs-lg);
    padding: 0 var(--sp-2) var(--sp-4);
  }

  .app-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .app-nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--r-md);
    color: var(--shell-text);
    text-decoration: none;
    font-size: var(--fs-base);
    transition: background var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease);
  }
  .app-nav-item:hover { background: var(--shell-hover); color: var(--shell-text-hi); }
  .app-nav-item.is-active {
    background: var(--shell-active);
    color: var(--shell-text-hi);
    font-weight: var(--fw-bold);
  }
  .app-nav-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }

  /* 활성 탭의 하위 항목 — 펼쳐 둔다. 데스크톱은 클릭을 아끼는 것이 이득이다. */
  .app-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 var(--sp-2);
  }
  .app-nav-subitem {
    display: block;
    padding: 5px var(--sp-2) 5px 34px;
    border-radius: var(--r-sm);
    color: var(--shell-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--motion-fast) var(--ease),
                background var(--motion-fast) var(--ease);
  }
  .app-nav-subitem:hover { color: var(--shell-text-hi); background: var(--shell-hover); }
  .app-nav-subitem.is-active { color: var(--shell-text-hi); font-weight: var(--fw-medium); }

  .app-sidebar-foot {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--shell-border);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--shell-muted);
  }
  .app-sidebar-foot .grow { flex: 1; }
  .btn-logout {
    background: var(--shell-hover);
    color: var(--shell-text-hi);
    border: none;
    border-radius: var(--r-sm);
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-family: inherit;
    min-height: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease);
  }
  .btn-logout:hover { background: var(--shell-active); }

  .app-main {
    margin-left: var(--sidebar-w);
    padding-bottom: var(--sp-8);
  }
  /* 사이드바가 자리를 차지하므로 본문 컨테이너를 넓힌다 */
  .app-main .page-container,
  .app-main .main-wrapper,
  .app-main .dashboard-wrapper {
    max-width: var(--content-max);
    padding: var(--sp-6) var(--sp-6);
  }
}

@media (min-width: 1440px) {
  .app-main .page-container,
  .app-main .main-wrapper,
  .app-main .dashboard-wrapper {
    max-width: var(--content-wide);
  }
}

/* ══════════════════════════════════════════════════════════════
   허브 페이지 — 탭을 눌렀을 때 나오는 그룹 목록
   ══════════════════════════════════════════════════════════════ */
/* 허브의 제목은 다른 페이지와 같은 .page-header / .page-title 을 쓴다.
   여기에는 목록 부분만 둔다. */
/* 그룹 제목은 다른 페이지와 같은 .section-title 을 쓴다.
   이전의 .hub-group-title 은 12px --text-muted 였는데, 바로 위 페이지 설명이
   14px --text-muted 로 **색이 완전히 같았다.** 크기 차이도 2px 뿐이라 아무리
   띄워도 「설명이 두 줄」로 읽혔다. 간격이 아니라 대비의 문제였다. */
.hub-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
@media (min-width: 640px)  { .hub-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hub-list { grid-template-columns: repeat(3, 1fr); } }

.hub-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease);
}
.hub-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.hub-item-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.hub-item-body { min-width: 0; }
.hub-item-label {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}
.hub-item-desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-item-arrow { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }

/* 로그인 등 셸이 없는 화면 — 탭바 여백이 필요 없다 */
.app-main--anon { padding-bottom: 0; }
@media (min-width: 1024px) {
  .app-main--anon { margin-left: 0; }
}