/* 셸 D — 인셋 캔버스형 헤더·사이드바 (2026-09-12, PC 전용 ≥769px)
 *
 * 설계 = sample/shell/d-inset.html (사용자 확정 9/12). 본문(A-4)·모달·페이지는 무관 — 셸 골격만.
 *
 * ⭐적용 방식 = «오버라이드 레이어». 레이아웃(ordars.html.erb 인라인 <style>·_sidebar_styles.html.erb)의 기존 규칙은
 *   그대로 두고, `body.shell-d` 접두로 특이성을 한 단계 올려 덮는다.
 *   - 되돌리기 = <body> 의 `shell-d` 클래스 한 줄 제거(레이아웃 ordars.html.erb) — 코드·DB 변경 0, 재배포만.
 *   - 모바일(≤768px)은 이 파일이 건드리지 않는다(기존 드로어·더보기 드롭다운 그대로). 모바일 C 셸은 2단계.
 *   - 기존 인라인 규칙 흡수(부채 정리)는 셸 안정 후 별도 커밋 — 여기서 두 가지를 한꺼번에 하지 않는다(규칙 9).
 *
 * 기하(PC): 헤더 60px 투명(플로팅 pill 군) · 사이드바 카드 left 12/top 60/bottom 12 · 본문 카드 right 12/bottom 12
 *   → 접힘(secondary-closed) 시 본문 left = 12+64+12.
 * 유지 계약: 클래스명·id(.ordars-header · .ordars-sidebar · .ordars-main · .sidebar-… · .hs-… · #db-summary-header 등) 전부 불변 —
 *   단축키 probe(shortcut_actions.js)·헤더요약 fit·폴링·앱 브릿지(.ordars-toggle-btn)·통합 테스트가 이 이름을 본다.
 */

@media (min-width: 769px) {
  body.shell-d {
    /* 색은 테마 토큰(components/_theme_tokens.css)에서 — 라이트/다크 모두 여기 이름 그대로 (2026-10-01) */
    --shd-canvas: var(--ord-canvas);
    --shd-line: var(--ord-line);
    --shd-band: var(--ord-band);
    --shd-ch: var(--ord-accent);
    --shd-ch-d: var(--ord-accent-strong);
    --shd-ch-l: var(--ord-accent-soft);
    --shd-shadow: var(--ord-shadow);
    --shd-pill-shadow: var(--ord-shadow-pill);
    --shd-radius: 16px;
    --shd-inset: 12px;
    --shd-header-h: 60px;
    background: var(--shd-canvas);
  }

  /* ---------- 헤더: 선 없는 투명 바 + 플로팅 pill ---------- */
  body.shell-d .ordars-header {
    height: var(--shd-header-h);
    background: transparent;
    border-bottom: none;
    padding: 0 var(--shd-inset);
    gap: 10px;
  }
  body.shell-d .ordars-header-left { gap: 8px; }
  body.shell-d .ordars-header-right { gap: 8px; }

  /* pill 공통 골격 */
  body.shell-d .shd-brand,
  body.shell-d .ordars-app-company-selector,
  body.shell-d .hs-wrap,
  body.shell-d #attendance-widget-pc,
  body.shell-d .shd-icons,
  body.shell-d .shd-me {
    display: inline-flex;
    align-items: center;
    height: 38px;
    background: var(--ord-panel);
    border-radius: 12px;
    box-shadow: var(--shd-pill-shadow);
  }

  /* 브랜드 pill [≡ ODAS] + 워크스페이스 pill [회사명 ▾] — 두 pill 을 붙여 하나처럼 */
  body.shell-d .shd-brand {
    gap: 6px;
    padding: 0 10px 0 6px;
    order: 1;
  }
  body.shell-d .shd-brand .ordars-toggle-btn {
    order: 1;
    border: none;
    padding: 6px;
    border-radius: 8px;
    color: var(--ord-text-3);
  }
  body.shell-d .shd-brand .ordars-toggle-btn:hover { background: var(--shd-band); color: var(--shd-ch); }
  body.shell-d .shd-brand .ordars-logo {
    order: 2;
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--ord-text);                 /* 로고 마크 없이 검정 워드마크만 (9/12 사용자 지정) */
    padding-right: 2px;
  }
  body.shell-d .ordars-app-company-selector {
    order: 2;
    margin-left: -8px;                    /* 브랜드 pill 과 이음 */
    padding: 0 10px 0 12px;
    border-radius: 0 12px 12px 0;
    box-shadow: var(--shd-pill-shadow);
    position: relative;
  }
  body.shell-d .ordars-app-company-selector::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--shd-line);
  }
  body.shell-d .shd-brand { border-radius: 12px 0 0 12px; }
  body.shell-d .ordars-app-company-btn {
    background: transparent;
    border: none;
    padding: 4px 2px;
    gap: 6px;
    max-width: 220px;
  }
  body.shell-d .ordars-app-company-name { font-size: 13px; font-weight: 700; color: var(--ord-text); }
  body.shell-d .ordars-app-company-menu { top: calc(100% + 10px); border-color: var(--shd-line); border-radius: 12px; box-shadow: var(--shd-shadow); }

  /* 상태 pill [접속 👤N ▾] — 종전 원색 배지(접속·모달·폴링·미열람·화면보호)를 드롭다운으로 접음 */
  body.shell-d .shd-status { order: 5; position: relative; }
  body.shell-d .shd-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 8px 0 12px;
    background: var(--ord-panel);
    border: none;
    border-radius: 12px;
    box-shadow: var(--shd-pill-shadow);
    cursor: pointer;
    font-family: inherit;
    color: var(--ord-text-3);
  }
  body.shell-d .shd-status-btn:hover,
  body.shell-d .shd-status.open .shd-status-btn { background: var(--shd-band); }
  body.shell-d .shd-status-v { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
  body.shell-d .shd-status-v svg { width: 15px; height: 15px; color: var(--ord-nav-muted); }
  body.shell-d .shd-status-v b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--ord-text-2); }
  body.shell-d .shd-status-cv { width: 14px; height: 14px; color: var(--ord-text-4); transition: transform .15s; }
  body.shell-d .shd-status.open .shd-status-cv { transform: rotate(180deg); }
  /* 헤더 요약 = KPI pill — 그룹은 세로선으로 구분 (hs-* 계약·fit 계산 불변) */
  body.shell-d .ordars-header-left .ordars-gift-summary { order: 8; }
  body.shell-d .hs-wrap { gap: 0; padding: 0; overflow: visible; }
  body.shell-d .hs-wrap .hs-group {
    height: 38px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--shd-line);
    border-radius: 0;
    gap: 8px;
  }
  body.shell-d .hs-wrap .hs-group:first-child { border-radius: 12px 0 0 12px; }
  body.shell-d .hs-wrap .hs-group:last-of-type { border-right: none; border-radius: 0 12px 12px 0; }
  body.shell-d .hs-wrap .hs-group-label { font-size: 10px; letter-spacing: .03em; color: var(--ord-text-4); }
  body.shell-d .hs-wrap .hs-item { gap: 8px; }
  body.shell-d .hs-wrap .hs-item-sep { color: var(--ord-line); }
  body.shell-d .hs-wrap > .hs-more {
    height: 28px;
    margin: 0 6px;
    border-radius: 999px;
    background: var(--shd-band);
    border-color: var(--shd-line);
  }
  body.shell-d .hs-panel { top: calc(100% + 8px); border-color: var(--shd-line); border-radius: 12px; box-shadow: var(--shd-shadow); }

  /* 버전 */
  body.shell-d .ordars-app-version { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

  /* 근태 위젯 pill — 내부 chip 은 파셜(AJAX 재렌더) 인라인 스타일 그대로 */
  body.shell-d #attendance-widget-pc { padding: 0 10px !important; margin-right: 0 !important; gap: 6px !important; }

  /* 아이콘 pill [채팅 | 알림] · 계정 pill [👤 이름] */
  body.shell-d .shd-icons { padding: 0 4px; gap: 2px; }
  body.shell-d .shd-me { padding: 0 12px 0 4px; gap: 4px; cursor: default; }
  body.shell-d .ordars-icon-btn { width: 32px; height: 32px; padding: 0; border-radius: 9px; color: var(--ord-text-3); }
  body.shell-d .ordars-icon-btn svg { width: 20px; height: 20px; }
  body.shell-d .ordars-icon-btn:hover { background: var(--shd-band); color: var(--shd-ch); }
  body.shell-d .ordars-user-name { font-size: 12px; font-weight: 700; color: var(--ord-text-2); }
  body.shell-d .ordars-header-badge { top: 0; right: 0; border: 2px solid var(--ord-panel); }

  /* ---------- 사이드바 카드 (레일 + 패널) ---------- */
  body.shell-d .ordars-sidebar {
    top: var(--shd-header-h);
    left: var(--shd-inset);
    bottom: var(--shd-inset);
    border: none;
    border-radius: var(--shd-radius);
    box-shadow: var(--shd-shadow);
    background: var(--ord-panel);
  }
  body.shell-d .ordars-overlay { top: var(--shd-header-h); }

  /* 레일 */
  body.shell-d .sidebar-primary {
    background: var(--shd-band);
    border-right: 1px solid var(--shd-line);
  }
  body.shell-d .sidebar-primary-menu { padding: 10px 0 4px; gap: 4px; align-items: center; }
  body.shell-d .sidebar-primary-item {
    width: 52px;
    height: 46px;
    margin: 0 auto;
    padding: 0;
    border-radius: 12px;
    gap: 2px;
    color: var(--ord-nav-text);
    font-weight: 700;
  }
  body.shell-d .sidebar-primary-item svg { width: 18px; height: 18px; }
  body.shell-d .sidebar-primary-label { font-size: 9px; letter-spacing: -.03em; max-width: 50px; }
  body.shell-d .sidebar-primary-item:hover { background: var(--ord-panel); color: var(--shd-ch); }
  body.shell-d .sidebar-primary-item.active {
    background: var(--ord-head-bg);
    color: var(--ord-on-solid);
    box-shadow: 0 4px 10px rgba(62, 97, 135, .35);
  }
  body.shell-d .sidebar-primary-item.active::before { display: none; }
  body.shell-d .sidebar-primary-item .sidebar-board-badge { top: 2px; right: 2px; border: 2px solid var(--shd-band); }
  body.shell-d .sidebar-primary-item.active .sidebar-board-badge { border-color: var(--ord-head-bg); }
  body.shell-d .sidebar-primary-actions { border-top: 1px solid var(--shd-line); padding: 8px 0 10px; gap: 2px; }
  body.shell-d .sidebar-primary-action { width: 52px; height: 34px; padding: 0; border-radius: 10px; color: var(--ord-nav-muted); }
  body.shell-d .sidebar-primary-action:hover { background: var(--ord-panel); color: var(--shd-ch); }
  body.shell-d .sidebar-primary-action-label { display: none; }

  /* 패널 */
  body.shell-d .sidebar-secondary { background: var(--ord-panel); border-right: none; }
  body.shell-d .sidebar-secondary-content { padding: 6px 8px; }
  body.shell-d .sidebar-group { margin-bottom: 2px; }
  body.shell-d .sidebar-group-header { padding: 10px 8px 4px; border-radius: 0; cursor: pointer; }
  body.shell-d .sidebar-group-header:hover { background: transparent; }
  body.shell-d .sidebar-group-title {
    font-size: 10px;
    font-weight: 800;
    color: var(--ord-nav-label);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  body.shell-d .sidebar-group-arrow { color: var(--ord-line-2); }
  body.shell-d .sidebar-secondary-link {
    padding: 7px 10px 7px 12px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--ord-text-2);
    margin: 1px 0;
  }
  body.shell-d .sidebar-secondary-link::before { display: none; }
  body.shell-d .sidebar-secondary-link:hover { background: var(--shd-band); color: var(--shd-ch-d); }
  body.shell-d .sidebar-secondary-link.active { background: var(--shd-ch-l); color: var(--shd-ch-d); font-weight: 700; }
  /* 2차 패널 건수 배지 = 1차 메인메뉴 배지와 같은 빨간 pill (9/12 사용자 지정 — 회색 pill 은 눈에 안 띄었다) */
  body.shell-d .sidebar-board-count-badge { background: var(--ord-badge); color: var(--ord-on-solid); }
  /* 즐겨찾기 별(절대 위치, hover 시 노출)·그룹 삭제 ✕ 가 배지 위에 겹치던 문제 — 그 버튼이 있는 행은 배지를 그 폭만큼 안쪽에.
     hover 때만 옮기면 배지가 튀므로 항상 확보(게시판·이메일 그룹·기본 메뉴 공통) */
  body.shell-d .sidebar-menu-item-wrap:has(> .sidebar-favorite-btn, > .sidebar-email-group-del-form, > .sidebar-email-group-del) .sidebar-board-count-badge { margin-right: 18px; }

  /* ---------- 본문 카드 ---------- */
  body.shell-d .ordars-main {
    top: var(--shd-header-h);
    left: calc(var(--shd-inset) * 2 + 264px);
    right: var(--shd-inset);
    bottom: var(--shd-inset);
    border-radius: var(--shd-radius);
    box-shadow: var(--shd-shadow);
    background: var(--ord-panel);
  }
  body.shell-d .ordars-main.secondary-closed { left: calc(var(--shd-inset) * 2 + 64px); }
}

/* ---------- 상태 pill 드롭다운 (전 폭 공통) ---------- */
.shd-status { position: relative; display: inline-flex; order: 4; }  /* 레거시 헤더(모바일)에서도 회사 선택(order 3) 뒤 */
.shd-status-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;                    /* 헤더 회사 드롭다운·hs-panel 과 같은 대역 */
  width: 272px;
  background: var(--ord-panel);
  border: 1px solid var(--ord-line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: 6px;
}
.shd-status-sec { font-size: 10px; font-weight: 800; color: var(--ord-nav-label); letter-spacing: .06em; padding: 8px 10px 2px; }
.shd-status-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12px;
  color: var(--ord-text-2);
  cursor: pointer;
  text-decoration: none;
}
.shd-status-row:hover { background: var(--ord-band); }
.shd-status-row-lb { flex: 1; white-space: nowrap; }
.shd-status-row-v { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; color: var(--ord-text); white-space: nowrap; }
.shd-status-row-more { font-size: 11px; color: var(--ord-text-4); white-space: nowrap; }
.shd-status-row--dev { color: var(--ord-text-3); cursor: default; }
.shd-status-row--dev .shd-status-row-v { color: var(--ord-text-3); font-size: 11px; }
/* 화면보호 컨트롤러가 켜짐/꺼짐에 따라 element.style.background 를 인라인으로 칠한다(보라/회색) — 드롭다운 안에선 무색 */
#screen-protection-countdown { background: transparent !important; }
#screen-protection-debug.sp-off .shd-status-row-v { color: var(--ord-text-4); }
/* 모바일(레거시 셸): pill 버튼을 칩으로 */
@media (max-width: 768px) {
  .shd-status-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border: 1px solid var(--ord-line); border-radius: 999px; background: var(--ord-panel); font-family: inherit; color: var(--ord-text-3); cursor: pointer; }
  .shd-status-v { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
  .shd-status-v svg { width: 15px; height: 15px; }
  .shd-status-v b { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ord-text-2); }
  .shd-status-cv { width: 14px; height: 14px; color: var(--ord-text-4); }
  .shd-status-menu { left: auto; right: 0; }
}