/* ============================================================================
   BASTILLE MANSION — 상단 가로 셸  [UNSPLIT-SHELL-A v1]
   대개장 7차 · 발주 A (2026-07-26) — "화면이 2분할돼서 불편하다" 철거분.

   데스크톱(≥769px)에서 좌측 230px 사이드바를 화면 맨 위 가로 바로 눕힌다.
     1행  BASTILLE MANSION   [일상][업무][정비]            ● Heartbeat — 확인
     2행  The Solarium 문안 · The Counting House 회계실 · …  (현재 모드의 방만)
     본문 .tab-panel 은 그 아래 전체 폭 — 세로 칸막이 0.

   규칙:
   · 이 파일은 ds/qcard.css 의 셸 블록(L66~111)을 '덮어쓸' 뿐 지우지 않는다.
     따라서 반드시 qcard.css·accent-apply.css 뒤에 링크한다.
   · 방 이름(.nav-name)은 절대 축약하지 않는다(PRODUCT-FACTS §4-1).
     좁을 때 접는 것은 한글 부제(.nav-sub) 뿐이다.
   · 계열색(data-acc) 러너는 지우지 않고 '눕힌다' — 세로 막대 → 밑줄.
   · 모바일(≤768px) 규칙은 이 파일에 없다. 하단 탭바와 #sidebar.open 시트는
     qcard.css 원본 그대로 살아 있다.
   ============================================================================ */

@media(min-width:769px){

  /* ── 셸 골격 ─────────────────────────────────────────────────────────────
     qcard.css L101 의 body{flex-direction:row} 를 되돌린다. 이 한 줄이
     좌우 2분할의 뿌리였다. column 이면 사이드바가 위, 본문이 아래가 된다. */
  body{flex-direction:column}

  #sidebar{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
    width:auto;min-width:0;height:auto;max-height:none;flex:0 0 auto;
    border-right:none;border-bottom:1px solid var(--border);
    padding:9px 16px 0;overflow:visible;
    column-gap:0;row-gap:0}

  /* ── 1행 — 엠블럼 · 모드칩 · Heartbeat ─────────────────────────────── */
  #sidebar .emblem{order:1;flex:0 0 auto;padding:0;margin-right:18px;font-size:15px}
  #sidebar .mode-row{order:2;flex:0 0 auto;gap:6px;margin:0}
  #sidebar .mode-chip{flex:0 0 auto;padding:.3rem .9rem}
  /* Heartbeat 상태줄 — 사이드바 하단에 있던 것을 모드 줄 오른쪽 끝으로
     (PRODUCT-FACTS §6: 상태표시 + 클릭 상세 — 없애지 않는다) */
  #sidebar #hb-row{order:3;flex:0 0 auto;margin:0 0 0 auto;
    border-top:none;padding:3px 2px;text-align:right}

  /* 1행과 2행 사이 줄바꿈 — 높이 0 의 flex 항목 하나로 강제 개행 */
  #sidebar::after{content:"";order:4;flex:0 0 100%;height:0;margin:0;padding:0}

  /* ── 2행 — 방 줄 ─────────────────────────────────────────────────────
     세 모드 그룹이 같은 줄을 나눠 쓴다. 보이지 않는 그룹은 폭 0 이라
     자리를 먹지 않는다(column-gap:0 이라 빈 간격도 남지 않는다). */
  #sidebar .nav-group{order:5;display:flex;flex:0 1 auto;flex-wrap:wrap;
    align-items:flex-end;gap:2px;margin:0;min-width:0;opacity:1}
  #sidebar .nav-glabel{display:none}   /* 모드칩이 이미 같은 말을 한다 */

  /* 현재 모드의 방만 보인다 — 13개가 한 줄에 쏟아지지 않게 */
  #sidebar .nav-group .tab-btn{display:none}
  body[data-mode=glance]  #sidebar .nav-group[data-mode=glance]  .tab-btn,
  body[data-mode=operate] #sidebar .nav-group[data-mode=operate] .tab-btn,
  body[data-mode=tend]    #sidebar .nav-group[data-mode=tend]    .tab-btn{display:flex}
  /* 단 '지금 열려 있는 방'은 다른 모드 소속이어도 줄에 남긴다.
     안 그러면 모드를 바꾼 순간 내가 어디 있는지가 화면에서 사라진다. */
  #sidebar .nav-group .tab-btn.active{display:flex}
  /* 안전망 — 모드 스크립트가 죽어 body[data-mode] 가 없으면 전부 보여준다.
     (방이 통째로 사라지느니 줄이 넘치는 편이 낫다) */
  body:not([data-mode]) #sidebar .nav-group .tab-btn{display:flex}

  /* 방 버튼 — 세로 스택을 가로로. 이름이 주, 한글 부제가 부. */
  #sidebar .tab-btn{
    flex-direction:row;align-items:baseline;gap:.4rem;
    width:auto;text-align:left;margin-top:6px;padding:.5rem .85rem;
    border-radius:6px 6px 0 0;border-bottom:2px solid transparent;
    white-space:nowrap}
  #sidebar .tab-btn .nav-name{font-size:.82rem}
  #sidebar .tab-btn .nav-sub{font-size:10px}
  /* 활성 방 = 기획 서고 .rt-btn.active 와 같은 어휘(골드 글자 + 골드 밑줄) */
  #sidebar .tab-btn.active{background:none;color:var(--gold);
    border-bottom:2px solid var(--gold)}
  #sidebar .tab-btn.active .nav-sub{color:var(--gold-deep)}

  /* ── 계열색 러너 — accent-apply.css 의 세로 2px 막대를 밑줄로 눕힌다.
     data-acc 속성도 색도 그대로다. 가로 줄에서는 밑줄이 맞는 자리다. */
  #sidebar .tab-btn[data-acc]::before{
    left:.85rem;right:.85rem;top:auto;bottom:-2px;width:auto;height:2px}
  #sidebar .tab-btn[data-acc].active::before{opacity:0}
}

/* 좁은 데스크톱(769~1180px) — 한글 부제만 접는다.
   방 이름은 어떤 폭에서도 줄이지 않는다(하드룰 §4-1 축약 금지). */
@media(min-width:769px) and (max-width:1180px){
  #sidebar .tab-btn .nav-sub{display:none}
  #sidebar .tab-btn{gap:0}
  #sidebar .emblem{margin-right:12px}
}