/*
 * 데스크톱 셸 — (v3.0 도마도 3차-D — team/contracts/domado-ui.md §7·§8) 위 바 하나: [로고 + 브랜드 이름] [메뉴] ······ [매장 ▾] [종] [계정 ●].
 * 계약: team/contracts/beta2-ui.md §6. 소유: (v3.0) 3차-D. 화면 builder 는 수정하지 말고 요청할 것.
 *
 * 마크업은 그대로(각 데스크톱 HTML 에 복제된 .shell > aside.side(.brand · nav.nav · .side-foot) + .main > header.top).
 *   aside.side  → 위 바(격자: 브랜드 | 메뉴 | [더 보기 ▾]) — 오른쪽은 .top 자리(--top-w — js/nav.js 가 잰다)
 *   header.top  → 같은 바의 오른쪽(매장 고르기 · 알림 · 계정) position:fixed
 *   .side-foot  → 숨김(서버 상태 문구는 nav.js 가 계정 메뉴로 옮긴다)
 *
 * 도마도 말투: 바탕 = 머리 바탕(--head-bg · 기본 흰 바탕 계열) · 고른 메뉴 = 글자 진한 산호(--accent-text, 22px 미만) + 아래 산호 밑줄 3px
 *   (휴대폰 아래 탭 "고른 탭 = 그림 산호 · 글자 진한 산호"와 같은 뜻) · 써라운드는 브랜드 이름에만 · 매장 고르기 = 흰 칸(--r-ctl · --sh-ctl) ·
 *   종 = 디자이너 그림 + 산호 점(휴대폰 머리와 같음) · 계정 = 동그라미 머리글자(넓은 창 1440↑ 만 이름도).
 *
 * 줄 바뀜 금지(§8): 위 바·메뉴 줄·오른쪽 묶음은 어느 폭에서도 한 줄(flex-wrap 없음).
 *   폭이 모자라면 js/nav.js fitNav 가 차례로: ① 간격 줄이기(.nav-tight) ② 짧은 이름(.nav-short — 대시보드→홈 · 알 관리→알 · 분양관리→분양,
 *   아래 탭 이름과 같음) ③ 뒤쪽 메뉴부터 [더 보기 ▾]로 접기(.ni-over). 1200 미만은 두 줄(1줄 = 로고·매장·알림·계정 · 2줄 = 메뉴 — 의도된 배치).
 *   768 미만 컴퓨터 창은 휴대폰 화면으로 간다(js/device.js).
 */

:root{
  /* 위 바 옆 여백 — 내용(.main > .page)의 바깥 선과 맞춤 · 아주 넓은 창(1600↑)은 가운데 최대 폭 */
  --sh-x:max(var(--s8), calc((100vw - var(--page-max) - 2 * var(--s8)) / 2 + var(--s4)));
  --sh-nav2-h:56px;   /* 두 줄 배치의 메뉴 줄 높이 */
}
@media (max-width:1280px){ :root{--sh-x:var(--s6);} }

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

/* ---- 위 바(왼쪽) = aside.side ---- */
.side{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;column-gap:var(--s6);
  height:var(--nav-h);padding:0 calc(var(--sh-x) + var(--top-w, 300px) + var(--s6)) 0 var(--sh-x);
  background:var(--head-bg);box-shadow:0 1px 0 var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);}
.brand{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;border:0;padding:0;height:auto;}
.mark{width:38px;height:38px;display:block;flex:0 0 auto;border-radius:8px;object-fit:cover;}
.blogo{height:24px;width:auto;display:block;min-width:0;}
.bname{font-weight:var(--w-black);color:var(--head-ink-on);font-size:var(--t-md);}
/* 브랜드 이름 글자(js/brand.js .brand-txt — 로고 그림이 없는 브랜드) = 써라운드 24.9 · 긴 이름 말줄임 */
.side .brand .brand-txt{max-width:220px;font-size:var(--fs-brand)!important;line-height:1.3!important;padding:3px 0!important;color:var(--head-ink-on);}
/* 진한 머리 바탕(브랜드 ③)이면 가로 로고를 흰색으로(--head-logo, 기본 none) */
.side .blogo{filter:var(--head-logo);}

/* 메뉴 = 밑줄 탭(바 높이 그대로 · 글자 + 작은 선 그림 — 그림은 넓은 창 1536↑ 만). 고른 메뉴 = 진한 산호 글자 700 + 산호 밑줄 3px.
   마우스 올림 = 옅은 면(안쪽 둥근 칸). 분양관리·경매·장부(.ni-x — nav.js 가 넣음)도 같은 모양. */
.nav{display:flex;align-items:stretch;flex-wrap:nowrap;gap:2px;min-width:0;padding:0;border-radius:0;background:transparent;box-shadow:none;}
.ni,.nav .ni-x{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  min-height:48px;padding:0 var(--ni-x,16px);border-radius:0;color:var(--head-ink);background:transparent;text-decoration:none;
  font-size:var(--t-md);font-weight:var(--w-semi);line-height:1.3;white-space:nowrap;cursor:pointer;user-select:none;}
.ni svg,.nav .ni-x svg{flex:0 0 auto;width:19px;height:19px;color:var(--head-ink-3);}
.ni::before,.nav .ni-x::before{content:"";position:absolute;inset:calc(50% - 22px) 2px;z-index:-1;border-radius:var(--r-btn-in);background:transparent;
  transition:background-color var(--dur-1) var(--ease);}
.ni:hover,.nav .ni-x:hover{color:var(--head-ink-on);}
.ni:hover::before,.nav .ni-x:hover::before{background:var(--head-hover);}
.ni::after,.nav .ni-x::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,.nav .ni-x.on{color:var(--accent-text);font-weight:var(--w-bold);}
.ni.on::after,.nav .ni-x.on::after{background:var(--head-on);}
.ni.on svg,.nav .ni-x.on svg{color:var(--head-on);}
.ni:focus-visible,.nav .ni-x:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px;}
@media (max-width:1535px){ .side .nav > .ni svg,.side .nav > .ni-x svg{display:none;} }   /* 넓은 창(1536↑)만 그림 + 글자 — 메이팅 = 하트(사용자 2026-11-03 "아이콘은 복구하고 메이팅은 하트로 바꿔") */
/* 메뉴 글자 = .ni-t(nav.js 가 감쌈 — 글자 그대로) · 짧은 이름은 data-short(.nav-short 일 때만 보임) */
.ni-t{display:inline-block;}
.side.nav-tight{--ni-x:10px;}
.side.nav-tight .nav{gap:0;}
.side.nav-short .ni-t[data-short]{font-size:0;letter-spacing:0;}
.side.nav-short .ni-t[data-short]::before{content:attr(data-short);font-size:var(--t-md);}
/* 접힌 메뉴(.ni-over) · [더 보기 ▾](nav.js 가 .nav 뒤에 넣음 — .nav 의 자식 수·차례는 그대로) */
.side .nav > .ni-over{display:none!important;}
.nav-more{position:relative;align-self:center;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 var(--s3);
  border:0;border-radius:var(--r-ctl);background:var(--btn2);box-shadow:var(--sh-ctl);color:var(--ink);
  font:inherit;font-size:var(--t-md);font-weight:var(--w-semi);white-space:nowrap;cursor:pointer;}
.nav-more[hidden]{display:none!important;}
.nav-more:hover{background:var(--fill);}
.nav-more.on{color:var(--accent-text);font-weight:var(--w-bold);box-shadow:inset 0 0 0 1.5px var(--accent),var(--sh-ctl);}
.nav-more > svg{flex:0 0 auto;color:var(--ink-2);}
.nav-more .menu-pop{left:auto;right:0;min-width:200px;}   /* [더 보기] 는 메뉴 줄 오른쪽 끝 — 차림표는 왼쪽으로 펼침(화면 밖으로 안 나감) */
.nav-more .menu-pop .mi.on{background:var(--accent-soft);color:var(--accent-text);font-weight:var(--w-bold);}
.side-foot{display:none;}

/* ---- 위 바(오른쪽) = 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(--sh-x);z-index:45;height:var(--nav-h);display:flex;align-items:center;flex-wrap:nowrap;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;}

/* 매장 고르기 = 흰 칸(칩·찾기 칸과 같은 모서리 --r-ctl · 가장자리 --sh-ctl) · 높이 44 · 글자 + ▾ */
.branch,.home-switch{position:relative;height:44px;display:flex;align-items:center;gap:8px;min-width:0;padding:0 var(--s3) 0 8px;
  border:0;border-radius:var(--r-ctl);background:var(--btn2);box-shadow:var(--sh-ctl);
  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{background:var(--fill);}
.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;}
/* 알림 = 종 그림만(2026-10-24 v2.13.3 사용자 예외 · v3.0 디자이너 그림 — 휴대폰 머리와 같음) · 누름 칸 44 · 화면 읽기 이름 aria-label "알림"(js/nav.js · js/alerts.js "알림 N건") */
.icbtn{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;border:0;border-radius:var(--r-ctl);
  background:transparent;box-shadow:none;color:var(--ink);cursor:pointer;}
.icbtn:hover{background:var(--fill);}
.icbtn svg{flex:0 0 auto;width:24px;height:24px;}
.icbtn .di{--di-s:28px;}
/* 새 알림 = 산호 점(개수는 글자로 남기되 보이지 않게 — 화면 읽기 이름 "알림 N건") */
.badge{display:none;position:absolute;top:8px;right:8px;width:10px;height:10px;min-width:0;padding:0;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--head-bg-solid, var(--bg));color:transparent;font-size:0;line-height:0;overflow:hidden;}
.badge.on{display:block;}
/* 계정 = 동그라미 머리글자(누름 칸 44) · 넓은 창(1440↑)만 이름 + ▾ 를 흰 칸으로 */
.acct{position:relative;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;padding:0;
  border:0;border-radius:var(--r-tag);background:transparent;box-shadow:none;color:var(--ink);cursor:pointer;white-space:nowrap;user-select:none;}
.av{width:36px;height:36px;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-md);font-weight:var(--w-bold);border:0;}
.acct:hover .av{box-shadow:0 0 0 3px var(--accent-soft);}
#acct-name{display:none;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:var(--t-md);font-weight:var(--w-semi);}
.acct > svg{display:none;color:var(--ink-2);}
@media (min-width:1440px){
  .acct{justify-content:flex-start;padding:0 var(--s3) 0 4px;border-radius:var(--r-ctl);background:var(--btn2);box-shadow:var(--sh-ctl);}
  .acct:hover{background:var(--fill);}
  .acct:hover .av{box-shadow:none;}
  #acct-name{display:inline-block;}
  .acct > svg{display:block;}
}

/* 매장 고르기 — nav.js 가 #acct 앞에 넣는다. 작은 로고 + 매장 이름(말줄임) + ▾ */
.home-switch .hs-mark{width:28px;height:28px;display:block;flex:0 0 auto;border-radius:6px;object-fit:cover;}
.home-switch .hs-dot{display:none;}
.home-switch .hs-label{min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-switch > svg{flex:0 0 auto;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;}
/* (v2.11.1 긴급) 위 고정 바의 펼침 메뉴(계정·매장 전환) — 창 높이에 맞추고 메뉴 안에서 굴림 */
.top .menu-pop,.top .home-menu,.nav-more .menu-pop{max-height:calc(100vh - var(--nav-h) - 16px);max-height:calc(100dvh - var(--nav-h) - 16px);overflow-y:auto;overscroll-behavior:contain;}
.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-2);max-width:320px;overflow:hidden;text-overflow:ellipsis;}
.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-text);font-weight:var(--w-bold);}
/* (v2.35.9 디자이너 A0118) 줄 사이·구분선 위·아래 간격 같게(줄 사이 4 · 구분선 위아래 4 + 4) · 고른 매장 말고 나머지 줄 글자 = 진회색(--ink-2 — 도마도 #393939) ·
   [매장 관리] 줄 높이 = 매장 줄과 같은 56 · (A0088) [분양관리] 줄은 뺌 · 고른 줄 글자 = 진한 산호(--accent-text — 22px 미만 산호 글자 규칙) */
.home-menu:not([hidden]){display:flex;flex-direction:column;gap:4px;}
.home-menu-sep{flex:0 0 auto;height:1px;background:var(--line-2);margin:4px var(--s3);}
.home-menu .manage{min-height:56px;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(--ink-2);cursor:pointer;white-space:nowrap;}
.home-menu .manage:hover{background:var(--fill);}

@media (max-width:1439px){ .home-switch .hs-label{max-width:150px;} }

/* ---- 두 줄 배치(1200 미만 — 768~1199) ----
 *   1줄: 로고 + 브랜드 이름(말줄임) ······ 매장 고르기 · 알림 · 계정 — 늘 한 줄
 *   2줄: 메뉴(같은 폭으로 펼침) [+ 더 보기 ▾] — 늘 한 줄(fitNav)
 * 위 바는 따라 내려오지 않는다(본문 자리를 넓게 — 두 줄이라). */
@media (max-width:1199px){
  .side{position:relative;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--nav-h) var(--sh-nav2-h);column-gap:var(--s2);
    height:auto;padding:0 var(--sh-x);}
  .side .brand{grid-column:1 / -1;grid-row:1;padding-right:calc(var(--top-w, 300px) + var(--s4));}
  .side .nav{grid-column:1;grid-row:2;}
  .side .nav-more{grid-column:2;grid-row:2;}
  .side .nav > .ni,.side .nav > .ni-x{flex:1 1 auto;}
  .ni::before,.nav .ni-x::before{inset:6px 2px;}
  .top{position:absolute;top:0;right:var(--sh-x);}
  .side .brand .brand-txt{max-width:100%;}
  .home-switch .hs-label{max-width:200px;}
}
@media (max-width:900px){ .home-switch .hs-label{max-width:150px;} }
/* 아주 낮은 창(높이 500 미만) — 위 바도 따라 내려오지 않는다(§7-2 세로가 낮을 때) */
@media (max-height:499px){
  .side{position:relative;}
  .top{position:absolute;}
}

/* 좁은 창 본문 여백(사용자가 "PC 버전"을 골라 768 미만에서 볼 때만 — 보통은 휴대폰 화면으로 감) */
@media (max-width:767px){
  .side{grid-template-columns:minmax(0,1fr) auto;padding-inline:var(--s3);}
  .top{right:var(--s3);gap:var(--s1);}
  .home-switch .hs-label{max-width:96px;}
  .main{padding-inline:var(--s2);}
  .page{padding-inline:var(--s2);}
  .page-title{font-size:var(--t-2xl);}
  .box{padding:var(--s4);}
}

/* ==================== (v3.0 3차-F2 — team/plans/domado-motion.md §3) 쪽 이동 화면 전환 — 위 메뉴 줄은 움직이지 않음 ====================
   앞 쪽과 새 쪽의 같은 이름끼리 이어짐(같은 그림이면 가만히) · 고른 메뉴(진한 산호 글자 + 밑줄)는 그 자리에서 옅게 바뀜(휴대폰 아래 탭과 같음).
   가운데 내용만 옅어졌다 나타남(규칙·길이 = css/tokens.css 끝). 이름은 쪽마다 하나씩 — 굴러서 화면 밖이면 js/m-shell-paint.js 가 이름을 뺌.
   (옛 transitions.css 의 .ni.on{view-transition-name:cg-nav-active} 는 뺌 — 고른 칸 전체(글자 포함)가 옆 칸으로 미끄러지며 중간에 두 칸 글자가 비어 보였다
    (3f2/shots/rs-after1-desk-02 시험 그림). 밑줄만 미끄러지게 하려면 밑줄을 따로 된 요소로 — 다음 차례 §10 에서.) */
.shell > .side{view-transition-name:cg-side;}
.shell > .main > header.top{view-transition-name:cg-top;}