/* ═══════════════════════════════════════════════════════════════
   base.css
   M3 사양 스케일과 화면 골격 — 타입/셰이프 스케일, 아이콘 버튼, 모바일 앱바·Navigation Bar·FAB.

   ⚠️ 타입 스케일의 하한은 11px다. 새 UI에 임의의 px를 쓰지 말 것.

   ⚠️ 이 파일들은 index.html의 <style> 하나를 순서 그대로 자른 것이다.
      선택자가 파일을 넘나들며 겹치므로 <link> 순서를 바꾸면 화면이 깨진다.
      순서: tokens → base → app → landing → overrides
   ═══════════════════════════════════════════════════════════════ */
/* ── 타입 스케일 ── M3의 최소 글자는 label-small 11px다. 그보다 작은 글자는 쓰지 않는다.
   (개편 전 7~10px가 26곳 있었고 모바일에서 읽기 어려웠다) */
.m3-display-small  { font-size: 36px; line-height: 44px; letter-spacing: 0; }
.m3-headline-medium{ font-size: 28px; line-height: 36px; letter-spacing: 0; }
.m3-headline-small { font-size: 24px; line-height: 32px; letter-spacing: 0; }
.m3-title-large    { font-size: 22px; line-height: 28px; letter-spacing: 0; font-weight: 700; }
.m3-title-medium   { font-size: 16px; line-height: 24px; letter-spacing: 0.15px; font-weight: 700; }
.m3-title-small    { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; font-weight: 700; }
.m3-body-large     { font-size: 16px; line-height: 24px; letter-spacing: 0.5px; }
.m3-body-medium    { font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
.m3-body-small     { font-size: 12px; line-height: 16px; letter-spacing: 0.4px; }
.m3-label-large    { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; font-weight: 700; }
.m3-label-medium   { font-size: 12px; line-height: 16px; letter-spacing: 0.5px; font-weight: 700; }
.m3-label-small    { font-size: 11px; line-height: 16px; letter-spacing: 0.5px; font-weight: 700; }

/* ── 셰이프 스케일 ── 임의 반경 금지. 이 값들만 쓴다. */
:root {
  --m3-shape-xs: 4px;  --m3-shape-sm: 8px;  --m3-shape-md: 12px;
  --m3-shape-lg: 16px; --m3-shape-xl: 28px; --m3-shape-full: 9999px;
}

/* ── 아이콘 버튼 ── 키트 기준 터치 타겟은 최소 48×48. 아이콘 자체는 24px이고
   나머지는 투명한 여백이라 시각적으로 커 보이지 않는다. */
.m3-icon-btn {
  width: 48px; height: 48px; border-radius: var(--m3-shape-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgb(var(--md-on-surface-variant-rgb)); flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease-out, transform 0.12s ease-out;
}
.m3-icon-btn:hover { background-color: rgb(var(--md-on-surface-rgb) / 0.08); }   /* state layer 8% */
.m3-icon-btn:active { background-color: rgb(var(--md-on-surface-rgb) / 0.10); transform: scale(0.92); }

/* ── 모바일 상단 앱바 ── 키트: "On scroll, apply a fill color to separate from body content" */
#mobile-topbar { background-color: transparent; transition: background-color 0.2s ease-out; }
body.appbar-scrolled #mobile-topbar { background-color: rgb(var(--md-surface-container-rgb)); }

/* ── 모바일 Navigation Bar ── M3 사양: 높이 80dp, 아이콘 24 + 라벨,
   활성 항목은 아이콘 뒤 알약(56×32) 인디케이터. 화면 폭 전체를 쓴다. */
#mobile-navbar {
  height: calc(80px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: flex-start;
  background-color: rgb(var(--md-surface-container-rgb));
  transition: transform 0.28s cubic-bezier(0.2,0,0,1);
}
.navbar-item {
  flex: 1 1 0; min-width: 0; height: 80px; padding-top: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgb(var(--md-on-surface-variant-rgb));
  -webkit-tap-highlight-color: transparent;
  /* ⚠️ main.js가 활성 .nav-link에 Tailwind 채움 클래스를 붙인다. Nav Bar에서는 칸 전체가 아니라
     **아래 인디케이터 알약만** 칠해야 하므로 여기서 눌러 둔다(명시도 0-2-0 > 0-1-0). */
  background-color: transparent;
}
#mobile-navbar .navbar-item { background-color: transparent; }
.navbar-indicator {
  position: relative; width: 56px; height: 32px; border-radius: var(--m3-shape-lg);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s cubic-bezier(0.2,0,0,1);
}
.navbar-item:active .navbar-indicator { background-color: rgb(var(--md-on-surface-rgb) / 0.10); }
.navbar-label { font-size: 12px; line-height: 16px; letter-spacing: 0.5px; font-weight: 500; }
/* 히어로 인사말은 모바일 title-large(22) / 데스크톱 headline-small(24).
   Tailwind `md:` 접두어는 커스텀 클래스에 안 붙으므로 여기서 직접 올린다. */
@media (min-width: 768px) {
  #dashboard-welcome-title { font-size: 24px; line-height: 32px; letter-spacing: 0; }
}
/* 활성 목적지: 알약을 칠하고 라벨을 굵게 한다(항목 전체를 칠하지 않는다). */
.navbar-item.nav-link-active { color: rgb(var(--md-on-surface-rgb)); }
.navbar-item.nav-link-active .navbar-indicator {
  background-color: rgb(var(--md-secondary-container-rgb));
  color: rgb(var(--md-on-secondary-container-rgb));
}
.navbar-item.nav-link-active .navbar-label { font-weight: 700; }
.navbar-badge {
  position: absolute; top: 4px; right: 12px; width: 8px; height: 8px;
  border-radius: var(--m3-shape-full); background-color: rgb(var(--md-error-rgb));
}
/* 스크롤을 내리면 내려가 숨는다. 메뉴가 열려 있을 땐 유지한다. */
body.toolbar-hidden #mobile-navbar { transform: translateY(100%); }
body.sidebar-open #mobile-navbar { transform: translateY(100%); }
/* ⚠️ 데스크톱에서 숨기는 규칙을 **여기서 직접** 걸어야 한다.
   마크업에 `md:hidden`이 붙어 있지만 그건 클래스(0-1-0)라, 위의 `#mobile-navbar`(id, 1-0-0)가
   건 `display:flex`를 못 이긴다 — 그래서 데스크톱에도 하단 바가 그대로 떠 있었다(실제 버그).
   같은 id 선택자로, 그리고 위 규칙보다 뒤에 두어 확실히 덮는다.
   (상단 앱바·FAB은 display를 클래스에서 받으므로 md:hidden만으로도 정상 동작한다 —
    그래도 규칙이 한곳에 모여 있는 편이 안전해서 FAB도 함께 명시한다.) */
@media (min-width: 768px) {
  #mobile-navbar, #btn-toolbar-fab, #toolbar-menu { display: none !important; }
}

/* ── FAB ── M3 standard FAB: 56×56, 셰이프 large(16px), elevation 3.
   Navigation Bar 위에 뜬다(bottom = navbar 높이 + 여백). */
.m3-fab {
  width: 56px; height: 56px; border-radius: var(--m3-shape-lg);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center;
  background-color: rgb(var(--md-primary-rgb)); color: rgb(var(--md-on-primary-rgb));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.28s cubic-bezier(0.2,0,0,1), opacity 0.2s ease-out;
}
.m3-fab:active { transform: scale(0.92); }
/* 오픈채팅방·설정에는 FAB로 새로 만들 것이 없다 — 같은 전환으로 아래로 내려 숨긴다.
   (main.js가 섹션에 따라 body.fab-hidden을 토글한다) */
body.toolbar-hidden .m3-fab, body.sidebar-open .m3-fab, body.fab-hidden .m3-fab {
  transform: translateY(200%); opacity: 0; pointer-events: none;
}
.toolbar-fab-icon { transition: transform 0.28s cubic-bezier(0.2,0,0,1); }
body.toolbar-menu-open .toolbar-fab-icon { transform: rotate(45deg); }
/* 작성 메뉴 항목: 아래에서 위로 차례로 떠오른다. */
.toolbar-menu-item {
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 0.18s ease-out, transform 0.24s cubic-bezier(0.2,0,0,1);
}
#toolbar-menu.open .toolbar-menu-item { opacity: 1; transform: none; }