/*
 * 데스크톱 셸 — beta2: 시안 B 레이아웃(상단 내비, 사이드바 없음) × 시안 A 색.
 * (2026-10-14 UI 정돈 — team/contracts/ui-declutter.md §5-A) 내비 = 밑줄 탭(길 찾기), 매장·알림·계정 = 얇은 보조 버튼(글자 + ▾).
 *   예전 "알약 4덩어리"(흰 내비 묶음·매장·알림·계정)를 없앴다 — 바탕 위 헤어라인 한 줄 + 고른 메뉴 accent 밑줄.
 * 계약: team/contracts/beta2-ui.md §6. 소유: builder-U0. 화면 builder 는 수정하지 말고 요청할 것.
 *
 * 마크업은 beta 와 같다(각 데스크톱 HTML 에 복제된 .shell > aside.side(.brand · nav.nav · .side-foot) + .main > header.top).
 * 페이지 수정 없이 CSS 로 재배치한다:
 *   aside.side  → 상단 고정 바(왼쪽: 로고 + pill 내비)            position:sticky
 *   header.top  → 같은 바의 오른쪽(홈 전환 · 지점(대시보드만) · 알림 · 계정)  position:fixed
 *   .side-foot  → 숨김(서버 상태 문구는 nav.js 가 계정 메뉴로 옮긴다)
 *   관리·시스템(.admin-only) → nav.js 가 계정 메뉴(#acct-menu) 안으로 옮긴다. 기본 숨김, html.is-admin 일 때만 보임(깜빡임 없음).
 * 셸 높이 고정(900px) 없음 — 본문 길이만큼, 바탕은 화면 끝까지.
 */

.shell{display:block;min-height:100vh;}

/* ---- 상단 바(왼쪽) = aside.side ---- */
.side{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:var(--s6);
  padding:0 var(--s8);background:var(--bg);box-shadow:0 1px 0 var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;cursor:pointer;border:0;padding:0;height:auto;}
.mark{width:38px;height:38px;display:block;flex:0 0 auto;}
.blogo{height:20px;width:auto;display:block;}
.bname{font-weight:var(--w-black);color:var(--ink);font-size:var(--t-md);}

/* 내비 = 밑줄 탭(§3 페이지 탭과 같은 말) — 항목은 아이콘 + 글자(아이콘만 금지). 바탕·그림자 없음.
   고른 메뉴(.on) = 잉크 700 + 아이콘 accent + 아래 3px accent 밑줄. 마우스 올림 = 옅은 면(8px).
   분양관리·경매(.ni-x, nav.js 가 넣음)도 같은 모양 — nav.js NIX_CSS 가 같은 규칙을 갖고 있다. */
.nav{display:flex;align-items:center;gap:2px;padding:0;border-radius:0;background:transparent;box-shadow:none;}
.ni{display:flex;align-items:center;gap:8px;height:48px;padding:0 var(--s4);border-radius:var(--r-btn-in);position:relative;
  color:var(--ink-2);font-size:var(--t-md);font-weight:var(--w-semi);white-space:nowrap;cursor:pointer;user-select:none;}
.ni svg{flex:0 0 auto;width:19px;height:19px;color:var(--ink-3);}
.ni:hover{background:var(--fill);color:var(--ink);}
.ni::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:0;height:3px;border-radius:3px 3px 0 0;background:transparent;pointer-events:none;}
.ni.on{background:transparent;color:var(--ink);font-weight:var(--w-bold);}
.ni.on:hover{background:var(--fill);color:var(--ink);}
.ni.on::after{background:var(--accent);}
.ni.on svg{color:var(--accent);}
/* 한 줄 배치(981px 이상) — 밑줄을 상단 바 아래 헤어라인에 붙인다(탭처럼 읽히게). 두 단 배치(980 이하)는 항목 바로 아래. */
@media (min-width:981px){.side .nav > .ni::after{bottom:calc((48px - var(--nav-h)) / 2);}}
.ni .lock{display:none;}
.side .sep{display:none;}
.side-foot{display:none;}

/* 관리자 전용(관리·시스템 + 구분선) — 기본 숨김, html.is-admin 일 때만. 위치는 계정 메뉴(nav.js 가 옮김). */
.admin-only{display:none;}
html.is-admin .ni.admin-only{display:flex;}
html.is-admin .sep.admin-only{display:block;}

/* ---- 상단 바(오른쪽) = header.top ---- */
.main{display:flex;flex-direction:column;min-width:0;width:100%;max-width:calc(var(--page-max) + 2 * var(--s8));
  margin:0 auto;padding:0 var(--s4) var(--s12);min-height:calc(100vh - var(--nav-h));}
.top{position:fixed;top:0;right:var(--s8);z-index:45;height:var(--nav-h);display:flex;align-items:center;gap:var(--s3);
  background:transparent;border:0;padding:0;}
.top .spacer{display:none;}
.spacer{flex:1;}
.top .home-switch{order:-2;}
.top .branch{order:-1;}
/* (2026-10-12) 지점 = 매장(별도 홈) — 데스크톱 머리의 지점 pill 은 마크업에서 뺐다. 남은 것이 있어도 숨긴다. */
.top .branch{display:none;}

/* 매장·알림·계정 = 보조 버튼(.btn 보조와 같은 말: 흰 면 --btn2 + 그림자 --btn2-sh · 12px · 48, 호버 들림) — 글자 + ▾(메뉴가 열리는 것)
   (2026-10-15 긴급패치 — 회색 채움 → 정돈 전 흰 면 + 그림자) */
.branch,.home-switch,.icbtn,.acct{position:relative;height:48px;display:flex;align-items:center;gap:8px;padding:0 var(--s4);
  border:0;border-radius:var(--r-btn);background:var(--btn2);box-shadow:var(--btn2-sh);
  font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);cursor:pointer;white-space:nowrap;user-select:none;
  transition:background-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease);}
.branch:hover,.home-switch:hover,.icbtn:hover,.acct:hover{background:var(--btn2-hover);box-shadow:var(--btn2-sh-hover);}
.branch:focus-visible,.home-switch:focus-visible,.icbtn:focus-visible,.acct:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
.branch .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.icbtn{color:var(--ink-2);}
.icbtn svg{flex:0 0 auto;}
.top .icbtn::after{content:"알림";}
/* 알림 개수 배지 — 확인할 일이 있을 때만(js/alerts.js 가 [data-alert-badge].on + 숫자). 판정 전·0건이면 숨김 */
.badge{display:none;position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;padding:0 7px;border-radius:var(--r-tag);
  align-items:center;justify-content:center;background:var(--dang);color:var(--panel);box-shadow:0 0 0 2px var(--bg);
  font-size:var(--t-xs);font-weight:var(--w-bold);line-height:1;font-variant-numeric:tabular-nums;}
.badge.on{display:inline-flex;}
.acct{padding:0 var(--s3) 0 9px;}
.av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--panel);font-size:var(--t-sm);font-weight:var(--w-bold);border:0;}
.acct svg{color:var(--ink-2);}

/* 홈(워크스페이스·매장) 전환 — nav.js 가 #acct 앞에 넣는다. 얇은 보조 버튼: 작은 로고 + 매장 이름 + ▾ */
.home-switch{padding:0 var(--s3) 0 8px;}
.home-switch .hs-mark{width:28px;height:28px;display:block;flex:0 0 auto;}
.home-switch .hs-dot{display:none;}
.home-switch .hs-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-switch > svg{color:var(--ink-2);}
.home-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:280px;padding:var(--s2);
  background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--sh-pop);cursor:default;}
.home-menu .opt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:var(--s2) var(--s3);
  border-radius:var(--r-btn);cursor:pointer;white-space:nowrap;}
.home-menu .opt .hm-name{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);}
.home-menu .opt .hm-role{font-size:var(--t-xs);color:var(--ink-3);}
.home-menu .opt:hover{background:var(--fill);}
.home-menu .opt.on{background:var(--accent-soft);}
.home-menu .opt.on .hm-name{color:var(--accent);font-weight:var(--w-bold);}
.home-menu-sep{height:1px;background:var(--line);margin:var(--s2);}
.home-menu .manage{min-height:48px;padding:0 var(--s3);display:flex;align-items:center;border-radius:var(--r-btn);
  font-size:var(--t-md);font-weight:var(--w-semi);color:var(--accent);cursor:pointer;white-space:nowrap;}
.home-menu .manage:hover{background:var(--fill);}

/* 계정 메뉴 안으로 옮겨진 관리자 항목(.ni.admin-only) — 메뉴 항목 모양 */
.menu-pop .ni{height:48px;padding:0 var(--s3);border-radius:var(--r-btn);background:transparent;color:var(--ink);gap:var(--s3);font-weight:var(--w-semi);}
.menu-pop .ni::after{display:none;}
.menu-pop .ni svg{color:var(--ink-3);}
.menu-pop .ni:hover{background:var(--fill);color:var(--ink);}
.menu-pop .ni.on{background:var(--accent-soft);color:var(--accent);}
.menu-pop .ni.on svg{color:var(--accent);}
.menu-pop .sep{height:1px;background:var(--line);margin:var(--s2);}
.menu-pop .ni .lock{display:none;}

/* (2026-10-14 UI 정돈 B4b) 메뉴가 6개(대시보드·개체·알 관리·메이팅·분양관리·경매)라 1440 이하에서는 메뉴 아이콘을 숨긴다(글자는 그대로 —
   아이콘만 남기지 않는다). 매장 이름·아이디도 말줄임 폭을 줄여 긴 이름(매장 30자·아이디 20자)에서도 메뉴와 겹치지 않게. */
#acct-name{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
@media (max-width:1536px){
  .side .nav > .ni svg,.side .nav > .ni-x svg{display:none;}
  .ni{padding:0 14px;}
}
@media (max-width:1440px){
  .home-switch .hs-label{max-width:140px;}
  #acct-name{max-width:120px;}
}
/* 좁은 데스크톱 창(태블릿 가로 등) — 로고 글자·라벨 일부를 줄여 한 줄 유지(메뉴 6개라 1220 부터) */
@media (max-width:1220px){
  .blogo{display:none;}
  .side{gap:var(--s3);padding:0 var(--s4);}
  .top{right:var(--s4);gap:var(--s2);}
  .ni{padding:0 var(--s3);}
  .home-switch .hs-label{max-width:110px;}
}

/* (2026-10-13) 좁은 창(태블릿 세로·작은 노트북·창 줄이기) — 한 줄에 다 안 들어가면 겹치지 않게 두 단으로.
 *   1단: 로고(왼쪽) · 매장 고르기 · 알림 · 계정(오른쪽, 모자라면 오른쪽 정렬로 줄바꿈)
 *   2단: 메뉴(대시보드·개체·알 관리·메이팅·분양관리·경매) — 숨기지 않고 모두 글자로 보인다, 모자라면 줄바꿈.
 * 1단 높이는 nav.js 가 .top 실제 높이로 --top-h 를 맞춘다(줄바꿈되면 커짐). 상단 고정은 풀어 본문 공간을 넓힌다.
 * 이름이 길면 말줄임(매장 이름·계정 이름) — 한 줄 배치에서도 메뉴와 겹치지 않는 폭. */
@media (max-width:1180px){
  .home-switch .hs-label{max-width:96px;}
  #acct-name{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media (max-width:980px){
  .side{position:relative;height:auto;flex-wrap:wrap;align-items:flex-start;gap:var(--s2);
    padding:calc(var(--top-h, var(--nav-h)) + var(--s1)) var(--s4) var(--s2);}
  .side .brand{position:absolute;top:calc(var(--nav-h) / 2 - 19px);left:var(--s4);}
  .side .nav{flex:1 1 100%;flex-wrap:wrap;}
  .side .nav > .ni:not(.admin-only),.side .nav > .ni-x{flex:1 1 auto;justify-content:center;}
  .top{position:absolute;top:0;left:calc(var(--s4) + 38px + var(--s3));right:var(--s4);height:auto;min-height:var(--nav-h);
    flex-wrap:wrap;justify-content:flex-end;align-content:center;padding-block:14px;}
  .home-switch .hs-label{max-width:140px;}
  #acct-name{max-width:140px;}
}
/* 휴대폰 폭 — 오른쪽 묶음이 화면 폭 전체를 쓰고(줄 수 최소), 로고는 메뉴 줄 맨 앞으로 */
@media (max-width:430px){
  .top{left:var(--s2);right:var(--s2);gap:var(--s2);}
  .side{padding-inline:var(--s2);flex-wrap:nowrap;align-items:center;}
  .side .brand{position:static;}
  .side .nav{flex:1 1 0;min-width:0;}
  .home-switch .hs-label{max-width:110px;}
  #acct-name{max-width:96px;}
  .acct > svg{display:none;}
}
/* 좁은 창 본문 여백 — 바깥 여백이 본문을 잡아먹지 않게(.main 16 + .page 32 → 합 16~24) */
@media (max-width:600px){
  .main{padding-inline:var(--s2);}
  .page{padding-inline:var(--s2);}
  .page-title{font-size:var(--t-2xl);}
  .box{padding:var(--s4);}
}