/* Jin 앱 셸 — 사이드바 + 페이지 레이아웃 (전 페이지 공통) */
:root {
  --bg: #121110; --bg-soft: #171513; --text: #EDE9E1; --sub: #A29B8F;
  --dim: #8C8578;   /* 보조 회색 — bg 대비 4.75:1, AA 통과 (이전 #7A746A는 3.8:1 미달) */
  --line: #2B2823; --card: #1C1A16; --deep: #0D0C0A;
  --clay: #D97757; --clay-dim: #3A2419;
  --paper: #FAF9F5; --paper-ink: #1F1E1D;   /* 용처: 토스트 배경/글자 (ui.css .toast) */
  --up: #7FC8A9; --dn: #E8836B;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body.app {
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex; min-height: 100vh;
}
::selection { background: rgba(217,119,87,.4); }
/* 전역 키보드 포커스 링 — 마우스 클릭엔 안 뜨고 Tab 이동에만 (전 페이지·전 컨트롤 일괄) */
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.nav {
  width: 212px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--line); background: var(--bg-soft);
  display: flex; flex-direction: column; padding: 22px 14px 18px;
  transition: width .25s var(--ease), padding .25s var(--ease);
}
.nav .nav-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 4px 12px; }
.nav .wordmark {
  font-family: "Noto Serif KR", serif; font-weight: 700; font-size: 20px; color: #fff;
}
.nav .wordmark .dot { color: var(--clay); }
.nav .wordmark .wm-min { display: none; }
.nav-toggle {
  background: none; border: 1px solid var(--line); color: var(--sub); border-radius: 8px;
  width: 26px; height: 26px; cursor: pointer; font-size: 14px; line-height: 1;
  font-family: inherit; flex-shrink: 0; transition: all .15s;
}
.nav-toggle:hover { color: var(--text); border-color: #4A453D; }
.nav .ico {
  width: 26px; height: 26px; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border-radius: 8px;
}
.nav .ico svg { width: 15px; height: 15px; display: block; }
.nav a.item.active .ico { background: rgba(217,119,87,.18); }

/* ── 접힌 상태 (클로드 콘솔식 아이콘 레일) ── */
body.nav-collapsed .nav { width: 70px; padding-left: 10px; padding-right: 10px; }
body.nav-collapsed .nav .txt,
body.nav-collapsed .nav .duty-state,
body.nav-collapsed .nav .foot,
body.nav-collapsed .nav .wm-full { display: none; }
body.nav-collapsed .nav .wm-min { display: inline; }
body.nav-collapsed .nav .nav-head { flex-direction: column; gap: 12px; padding: 0 0 8px; }
body.nav-collapsed .nav .item { display: flex; justify-content: center; padding: 8px 0; }
.nav .duty-state {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sub);
  padding: 0 12px 18px;
}
.nav .duty-state i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--up); display: inline-block;
}
/* a(링크)·button(검색)이 같은 레일 아이템 레이아웃을 공유 — gap·margin-left:auto가 둘 다 먹도록 .item으로 일반화 */
.nav .item {
  display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden;
  padding: 7px 9px; border-radius: 10px; margin-bottom: 2px;
  color: var(--sub); text-decoration: none; font-size: 14px; transition: all .12s;
}
.nav .item:hover { color: var(--text); background: rgba(255,255,255,.03); }
.nav a.item.active { background: var(--clay-dim); color: var(--clay); font-weight: 600; }
.nav .spacer { flex: 1; }
.nav a.item.dim { font-size: 13px; color: var(--dim); }
.nav .foot { font-size: 11.5px; color: var(--dim); padding: 12px 12px 0; border-top: 1px solid var(--line); margin-top: 10px; line-height: 1.5; }
.nav .foot b { color: var(--sub); font-weight: 600; }

.page { flex: 1; min-width: 0; padding: 32px 44px 48px; max-width: 1340px; margin: 0 auto; width: 100%; }

/* ── 검색 버튼 (사이드바) — 레이아웃은 .nav .item이 담당, 여기선 button 기본값만 리셋 ── */
.nav button.item.search-item { width: 100%; background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
.nav .item kbd {
  margin-left: auto; font-family: inherit; font-size: 10px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}
body.nav-collapsed .nav .item kbd { display: none; }

/* ── 모바일 전용 셸 (애플식): 하단 6탭 글래스 캡슐 + 상단 우측 클러스터(검색·요청사항·프로필) ──
   데스크톱은 사이드바(.nav)가 담당 — 둘 다 display:none. ≤860px에서만 .nav를 숨기고 이것들을 띄운다.
   색은 Jin clay 팔레트 그대로(애플 블루 미차용), 글래스 느낌은 backdrop-filter blur로만. */
.tabbar {
  display: none;
  align-items: center; gap: 8px;   /* 탭 캡슐 + 우측 검색 원형 한 줄 */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;   /* 캡슐 바깥 여백은 탭 통과 — 본문 스크롤 방해 안 함 */
}
.tabbar-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; padding: 6px; border-radius: 999px;
  background: rgba(23,21,19,.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(237,233,225,.10);
  box-shadow: 0 10px 34px rgba(0,0,0,.46);
}
.tab {   /* flex:1 — 6탭이 폭을 균등 분할해 어떤 화면폭에서도 안 넘침 */
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 50px; padding: 6px 2px; border-radius: 18px;
  color: var(--sub); text-decoration: none; font-size: 10.5px; line-height: 1;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.tab .tab-ico { display: inline-flex; }
.tab .tab-ico svg { width: 21px; height: 21px; display: block; }
.tab .tab-lbl { font-weight: 500; white-space: nowrap; }
.tab.active { color: var(--clay); background: rgba(217,119,87,.14); }

/* 검색 — 탭바 우측 플로팅 원형(애플 스토어식). 탭 캡슐과 분리·동급 글래스, clay 악센트로 부각 */
.tab-search {
  pointer-events: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; padding: 0;
  cursor: pointer; color: var(--clay); font-family: inherit;
  background: rgba(23,21,19,.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(217,119,87,.30);
  box-shadow: 0 10px 34px rgba(0,0,0,.46);
  transition: transform .12s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.tab-search svg { width: 22px; height: 22px; display: block; }
.tab-search:active { transform: scale(.93); }
.tab-search:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* 상단 우측 플로팅 클러스터: [검색] [요청사항] [프로필 원형] — 프로필 탭 시 팝오버(프로필·구독 관리) */
.topbar {
  display: none;
  position: fixed; top: 0; right: 0; z-index: 91;
  align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 0 0;
  pointer-events: none;
}
.top-btn, .top-avatar {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; padding: 0;
  cursor: pointer; font-family: inherit; color: var(--sub); text-decoration: none;
  background: rgba(23,21,19,.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(237,233,225,.10);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  transition: color .15s var(--ease), transform .12s var(--ease);
}
.top-btn svg { width: 19px; height: 19px; display: block; }
.top-btn:hover { color: var(--text); }
.top-btn:active, .top-avatar:active { transform: scale(.94); }
.top-avatar { color: var(--clay); }
.top-avatar svg { width: 21px; height: 21px; display: block; }
.profile-wrap { position: relative; pointer-events: auto; }
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 174px; padding: 6px; border-radius: 14px;
  background: rgba(23,21,19,.88);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(237,233,225,.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
}
.profile-menu[hidden] { display: none; }
.pm-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px;
  color: var(--text); text-decoration: none; font-size: 14px; min-height: 44px;
}
.pm-item:hover { background: rgba(255,255,255,.05); }
.pm-ico { display: inline-flex; color: var(--sub); }
.pm-ico svg { width: 17px; height: 17px; display: block; }

/* ── ⌘K 팔레트 ── */
.pal-overlay {
  position: fixed; inset: 0; background: rgba(10,9,8,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  z-index: 200; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh;
}
.pal-overlay.show { display: flex; }
.pal {
  width: min(560px, 92vw); background: var(--bg-soft); border: 1px solid #3A362F;
  border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.6); overflow: hidden;
}
.pal-in {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font-family: inherit; font-size: 16px; padding: 15px 18px; outline: none;
}
.pal-in::placeholder { color: var(--dim); }
.pal-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.pal-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--text);
}
.pal-item.on { background: var(--clay-dim); }
.pal-item .pi-type { flex-shrink: 0; min-width: 60px; font-size: 10.5px; color: var(--dim); }
.pal-item .pi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pal-empty { padding: 16px; font-size: 13px; color: var(--dim); }
.pal-hint { border-top: 1px solid var(--line); padding: 8px 14px; font-size: 11px; color: var(--dim); display: flex; gap: 14px; }

@media (max-width: 860px) {
  body.app { flex-direction: column; }
  /* 모바일: 사이드바를 숨기고 내비를 하단 플로팅 탭바(.tabbar)로 넘긴다(애플식).
     탭에 없는 화면(캘린더·감시 로그·요청사항 등)은 검색 원(⌘K 팔레트)으로 전부 도달. */
  .nav { display: none; }
  .tabbar { display: flex; }
  .topbar { display: flex; }
  /* 본문 하단 여백 = 플로팅 바 높이 + 안전영역(홈 인디케이터) — 콘텐츠가 바 뒤로 가려지지 않게 */
  .page { padding: 24px 20px calc(92px + env(safe-area-inset-bottom)); }
}

/* 터치 기기: 작은 아이콘 버튼의 탭 영역 확대 (시각 크기와 별개로 ≥40px) */
@media (pointer: coarse) {
  .nav-toggle { width: 40px; height: 40px; }
}