/* =============================================================
   앱 공통 껍데기 — 휴대폰 · 태블릿 화면 보정
   범위: 왼쪽 메뉴(#sidebar) · 본문 여백(#main-content) · 위 막대(#topbar) · 메뉴 단추(#mnav-btn)
         · 메뉴 뒤 어둡게(#mnav-scrim) · 알림 허용 안내(#notif-perm-banner).
   메뉴 항목 · 순서 · 누르면 가는 곳 · 알림 허용 동작은 그대로.
   1) 768px 이하: 왼쪽 메뉴 띠를 없애고 서랍식으로 — 위 막대 왼쪽 ☰ 단추를 누르면 글자 메뉴가 왼쪽에서 열림
      (메뉴를 고르거나 · 바깥을 누르거나 · Esc 를 누르면 닫힘. 여닫기는 /static/js/mobile-nav.js)
      본문은 화면 폭 전체를 쓴다. PC 에서 '메뉴 접기'를 해 둔 사람도 서랍 안에서는 글자 메뉴.
   2) 알림 허용 안내: 화면 가운데 기준 자리라 좁은 화면에서 폭이 절반으로 줄어
      글자가 한 글자씩 세로로 쪼개지던 것 → 좁은 화면은 양옆 12px 띄운 가로 띠
   되돌리기: index.tsx 의 이 파일 <link> · mobile-nav.js <script> · ☰ 단추 · 어둡게 칸을 뺀다.
   ============================================================= */

/* PC: 서랍 단추 · 어둡게 칸 없음 */
html #mnav-btn, html #mnav-scrim{ display:none }

/* ── 알림 허용 안내(모든 화면 크기): 글자가 들어갈 만큼 폭을 갖게 ── */
html #notif-perm-banner{ width:max-content !important; font-family:var(--ui-font) }

@media (max-width:768px){
  /* ── 1. 본문은 화면 폭 전체 ── */
  /* 아이디를 두 번 써서 '메뉴 접기' · 화면 폭별 기존 규칙보다 앞서게 */
  html #main-content#main-content{ margin-left:0 !important }

  /* 위 막대 왼쪽 ☰ 단추 */
  html #mnav-btn{
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:var(--ui-control-mobile); height:var(--ui-control-mobile); margin:0 6px 0 -8px;
    border:0; border-radius:var(--ui-radius-control); background:transparent; color:var(--ui-text-1); font-size:17px; cursor:pointer;
  }
  html #mnav-btn:hover{ background:var(--ui-fill) }
  html #mnav-btn:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
  html #topbar{ padding-left:14px !important }

  /* 서랍: 평소엔 화면 왼쪽 밖, 열리면 들어옴 */
  html #sidebar#sidebar{
    width:min(280px, 85vw) !important; min-width:min(280px, 85vw) !important; max-width:min(280px, 85vw) !important;
    transform:translateX(-100%); visibility:hidden; box-shadow:none !important; z-index:9600 !important;
    transition:transform .22s var(--ui-ease), visibility 0s linear .22s !important;
  }
  html body.mnav-open #sidebar#sidebar{ transform:none; visibility:visible; box-shadow:var(--ui-elev-sheet) !important; transition:transform .22s var(--ui-ease) !important }
  html #mnav-scrim{ position:fixed; inset:0; z-index:9590; background:var(--ui-scrim); opacity:0; pointer-events:none; transition:opacity .22s var(--ui-ease) }
  html body.mnav-open #mnav-scrim{ display:block; opacity:1; pointer-events:auto }

  /* 서랍 안은 PC 펼친 메뉴와 같게 — 좁은 화면용 '아이콘만' 규칙 · '메뉴 접기' 설정을 되돌린다 */
  html body #sidebar .sidebar-logo{ padding:14px 16px !important; justify-content:flex-start !important }
  html body #sidebar .sidebar-logo-text{ display:flex !important }
  html body #sidebar .sidebar-toggle-btn{ display:none !important }
  html body #sidebar .sidebar-user{ padding:10px 12px !important }
  html body #sidebar .sidebar-user-inner{ justify-content:flex-start !important; padding:8px 10px !important }
  html body #sidebar .sidebar-user-name{ display:block !important }
  html body #sidebar .admin-test-profile-btn{ width:auto !important; min-width:0 !important; height:auto !important; padding:4px 8px !important; margin-left:auto !important }
  html body #sidebar .admin-test-profile-btn span{ display:block !important }
  html body #sidebar .sidebar-nav{ padding:8px 12px 16px !important }
  html body #sidebar .sidebar-section-label.sidebar-accordion-trigger{ display:flex !important }
  html body #sidebar .sidebar-submenu-trigger{ display:flex !important }
  html body #sidebar .sidebar-menu-group{ border-bottom:var(--ui-hairline) solid var(--ui-line) }
  html body #sidebar .sidebar-menu-group:not(.is-open) .sidebar-menu-items{ display:none !important }
  html body #sidebar .sidebar-menu-group.is-open .sidebar-menu-items{ display:block !important; padding:0 0 10px !important }
  html body #sidebar .sidebar-submenu-group:not(.is-open) .sidebar-submenu-items{ display:none !important }
  html body #sidebar .sidebar-submenu-group.is-open .sidebar-submenu-items{ display:block !important; padding:0 0 5px 12px !important }
  html body #sidebar .tab-btn, html body #sidebar .nav-item, html body #sidebar .sidebar-special-btn{
    justify-content:flex-start !important; padding:0 14px !important; min-height:var(--ui-control-mobile) !important; gap:10px !important;
  }
  html body #sidebar .sidebar-action-btn{ justify-content:flex-start !important; padding:0 11px !important; min-height:var(--ui-control-mobile) !important }
  html body #sidebar .tab-btn span, html body #sidebar .nav-item span, html body #sidebar .sidebar-special-btn span, html body #sidebar .sidebar-action-btn span{ display:block !important }
  html body #sidebar .tab-btn i, html body #sidebar .nav-item i, html body #sidebar .sidebar-special-btn i, html body #sidebar .sidebar-action-btn i{ width:16px !important; margin:0 !important }

  /* ── 2. 알림 허용 안내: 양옆 12px 띄운 가로 띠 ── */
  html #notif-perm-banner{ left:12px !important; right:12px !important; transform:none !important; width:auto !important; max-width:none !important }
}
@media (max-width:480px){
  /* 좁은 휴대폰: 글은 첫 줄, 버튼은 둘째 줄 */
  html #notif-perm-banner{ flex-wrap:wrap; row-gap:8px !important }
  html #notif-perm-banner > span:nth-child(2){ flex:1 1 100% !important; order:-1 }
}
@media (prefers-reduced-motion:reduce){
  html #sidebar, html #mnav-scrim{ transition:none !important }
}

/* ━━ 맥 사이드바 (사용자: 인트라넷 전체를 맥 디자인으로 2026-10-28) ━━
   진한 남색 띠 → Finder · 메일 같은 밝은 반투명 사이드바. 고른 메뉴는 옅은 파랑 둥근 칸, 아이콘은 파랑.
   메뉴 항목 · 순서 · 접기 · 서랍 동작은 그대로(모양만). */
html #sidebar{
  background:var(--ui-material) !important; -webkit-backdrop-filter:var(--ui-material-blur); backdrop-filter:var(--ui-material-blur);
  color:var(--ui-text-1) !important; border-right:var(--ui-hairline) solid var(--ui-line) !important; box-shadow:none !important; font-family:var(--ui-font);
}
html #sidebar .sidebar-logo{ border-color:var(--ui-line) !important; background:transparent !important }
html #sidebar .logo-name{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-bold) !important }
html #sidebar .logo-sub{ color:var(--ui-text-2) !important }
html #sidebar .sidebar-toggle-btn{ background:transparent !important; border:0 !important; color:var(--ui-text-2) !important; box-shadow:none !important }
html #sidebar .sidebar-toggle-btn:hover{ background:var(--ui-fill-hover) !important }
html #sidebar .sidebar-user-inner{ background:transparent !important; border:0 !important; box-shadow:none !important }
html #sidebar .sidebar-user-avatar{ background:var(--ui-fill) !important; color:var(--ui-text-2) !important; box-shadow:none !important; border:0 !important }
html #sidebar .sidebar-user-name{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #sidebar .admin-test-profile-btn{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border:0 !important; box-shadow:none !important }
/* 묶음 이름: 작은 회색 글씨, 굵기 600, 대문자 · 자간 없음 */
html #sidebar .sidebar-section-label, html #sidebar .sidebar-section, html #sidebar .sidebar-section-title{
  color:var(--ui-text-2) !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:0 !important; text-transform:none !important; background:transparent !important;
}
html #sidebar .sidebar-accordion-chevron{ color:var(--ui-text-3) !important }
/* 메뉴 줄: 양옆 8px 띄운 둥근 칸, 글씨 본문색 · 굵기 400, 아이콘 파랑 */
html #sidebar .tab-btn, html #sidebar .nav-item, html #sidebar .sidebar-special-btn{
  color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important; background:transparent !important; border:0 !important;
  border-radius:var(--ui-radius-row) !important; box-shadow:none !important; width:calc(100% - 16px) !important; margin:1px 8px !important;
}
html #sidebar .tab-btn i, html #sidebar .nav-item i, html #sidebar .sidebar-special-btn i{ color:var(--ui-accent) !important; background:transparent !important; box-shadow:none !important }
html #sidebar .tab-btn:hover, html #sidebar .nav-item:hover, html #sidebar .sidebar-special-btn:hover{ background:var(--ui-fill-hover) !important; color:var(--ui-text-1) !important }
html #sidebar .tab-btn.tab-active, html #sidebar .tab-btn.active{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #sidebar .tab-btn.tab-active::before, html #sidebar .tab-btn.tab-active::after, html #sidebar .tab-btn.active::before{ display:none !important }
html #sidebar .tab-btn:focus-visible, html #sidebar .sidebar-special-btn:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) !important }
/* 아래 단추(리뷰웹 · 비밀번호 · 로그아웃): 같은 줄 모양, 로그아웃만 빨간 글씨 */
html #sidebar .sidebar-special-btn[class*="accent-"]{ background:transparent !important }
html #sidebar .sidebar-action-btn{
  color:var(--ui-text-1) !important; background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:var(--ui-radius-row) !important; font-weight:var(--ui-weight-regular) !important;
}
html #sidebar .sidebar-action-btn i{ color:var(--ui-text-2) !important }
html #sidebar .sidebar-action-btn:hover{ background:var(--ui-fill-hover) !important }
html #sidebar .sidebar-action-btn.btn-logout, html #sidebar .sidebar-action-btn.btn-logout i{ color:var(--ui-danger) !important }
html #sidebar .sidebar-menu-loading-text{ color:var(--ui-text-2) !important }
html #sidebar .sidebar-menu-loading-bar{ background:var(--ui-fill) !important }
/* 아래 단추 묶음 칸: 진한 띠 → 사이드바와 같은 바탕 + 머리카락 선 */
html #sidebar .sidebar-actions{ background:transparent !important; border-top:var(--ui-hairline) solid var(--ui-line) !important }
html #sidebar .topbar-month-badge{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border:0 !important; box-shadow:none !important }
html #sidebar .topbar-month-badge i{ color:var(--ui-text-2) !important }
html #sidebar [class*="tab-badge"]{ box-shadow:none !important }


/* ━━ 맥 사이드바 · 강하게 (사용자: "맥os 강하게 적용해봐" 2026-10-28) ━━
   Finder · 메일 사이드바처럼: 회색 반투명 바탕, 28px 줄 · 13px 글씨, 아이콘 파랑,
   고른 메뉴는 파랑 칸 + 흰 글씨 · 흰 아이콘(맥에서 창이 앞에 있을 때 모양), 묶음 이름 11px 회색.
   위 막대는 사이드바와 같은 반투명 재질의 '도구 막대'로. 메뉴 항목 · 순서 · 접기 · 서랍 동작은 그대로. */
html #sidebar{
  background:linear-gradient(var(--ui-fill-subtle), var(--ui-fill-subtle)), var(--ui-material) !important;
}
html #sidebar .sidebar-logo{ border-bottom:0 !important; padding-bottom:6px !important }
html #sidebar .sidebar-user{ border:0 !important; padding-top:0 !important }
html #sidebar .tab-btn, html #sidebar .nav-item, html #sidebar .sidebar-special-btn, html #sidebar .sidebar-action-btn{
  min-height:28px !important; padding-top:5px !important; padding-bottom:5px !important; font-size:var(--ui-text-body) !important; line-height:18px !important;
}
html #sidebar .tab-btn i, html #sidebar .nav-item i, html #sidebar .sidebar-special-btn i{ font-size:var(--ui-text-body) !important; width:18px !important; text-align:center }
html #sidebar .sidebar-section-label, html #sidebar .sidebar-section-title{ font-size:var(--ui-text-caption) !important; padding-top:12px !important; padding-bottom:3px !important }
html #sidebar .sidebar-section-label .sidebar-accordion-chevron{ opacity:0; transition:opacity var(--ui-dur-fast) }
html #sidebar .sidebar-section-label:hover .sidebar-accordion-chevron, html #sidebar .sidebar-section-label:focus-visible .sidebar-accordion-chevron{ opacity:1 }
/* 고른 메뉴: 파랑 칸 + 흰 글씨 · 흰 아이콘 */
html #sidebar .tab-btn.tab-active, html #sidebar .tab-btn.active{
  background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-regular) !important;
}
html #sidebar .tab-btn.tab-active i, html #sidebar .tab-btn.active i, html #sidebar .tab-btn.tab-active span, html #sidebar .tab-btn.active span{ color:var(--ui-on-accent) !important }
html #sidebar .tab-btn.tab-active:hover, html #sidebar .tab-btn.active:hover{ background:var(--ui-accent-hover) !important }
html #sidebar .tab-btn.tab-active [class*="badge"], html #sidebar .tab-btn.active [class*="badge"]{ background:var(--ui-on-accent) !important; color:var(--ui-accent-text) !important }
/* 위 막대: 사이드바와 같은 반투명 재질, 머리카락 선, 그림자 없음 */
html #topbar{
  background:var(--ui-material) !important; -webkit-backdrop-filter:var(--ui-material-blur); backdrop-filter:var(--ui-material-blur);
  border-bottom:var(--ui-hairline) solid var(--ui-line) !important; box-shadow:none !important; height:44px !important;
}
html #topbar #topbar-breadcrumb{ font-size:var(--ui-text-body) !important; color:var(--ui-text-2) !important }
html #topbar #topbar-breadcrumb .bc-current, html #topbar #topbar-title{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
/* 본문: 맥 창 바탕(아주 옅은 회색) 위에 흰 카드 */
html #main-content{ background:var(--ui-bg) !important }
/* 옛 규칙(html.ui-refac #sidebar .tab-btn{ margin:0; padding:7px 14px })보다 세게 — 같은 무게 + 뒤에 불러옴 */
html #sidebar .tab-btn.tab-btn, html #sidebar .nav-item.nav-item, html #sidebar .sidebar-special-btn.sidebar-special-btn, html #sidebar .sidebar-action-btn.sidebar-action-btn{
  margin:1px 10px !important; width:calc(100% - 20px) !important; padding:5px 10px !important; min-height:28px !important; gap:8px !important;
}
html #sidebar .tab-btn.tab-active::before, html #sidebar .tab-btn.tab-active::after{ content:none !important; display:none !important }
html #sidebar .sidebar-logo img{ box-shadow:none !important; border-radius:var(--ui-radius-control) !important }


/* ━━ 사이드바 숨기기 · 보기 (사용자: "접히고 펴는거 보완 · 찔끔 남아있는거 보기싫어" 2026-10-28) ━━
   PC: 접으면 76px 아이콘 띠가 남던 것 → 맥처럼 완전히 숨김(폭 0), 위 막대 왼쪽 [사이드바] 단추로 다시 연다.
   여닫을 때 폭이 부드럽게 줄고 늘어남. 휴대폰 · 태블릿(768 이하)은 서랍 그대로. 저장(localStorage)도 그대로. */
html #topbar #sb-toggle-btn{ display:none }
@media (min-width:769px){
  html #sidebar{ transition:width var(--ui-dur-slow) var(--ui-ease), min-width var(--ui-dur-slow) var(--ui-ease), max-width var(--ui-dur-slow) var(--ui-ease) }
  html #main-content{ transition:margin-left var(--ui-dur-slow) var(--ui-ease) }
  html body.sidebar-collapsed #sidebar{ width:0 !important; min-width:0 !important; max-width:0 !important; overflow:hidden !important; border-right:0 !important; visibility:hidden }
  html body.sidebar-collapsed #main-content{ margin-left:0 !important }
  html #sidebar .sidebar-toggle-btn{ display:none !important }
  html #topbar #sb-toggle-btn{
    display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; margin-right:8px; padding:0; border:0;
    border-radius:var(--ui-radius-control); background:transparent; color:var(--ui-text-2); cursor:pointer;
  }
  html #topbar #sb-toggle-btn:hover{ background:var(--ui-fill-hover); color:var(--ui-text-1) }
  html #topbar #sb-toggle-btn:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
  html body.sidebar-collapsed #topbar #sb-toggle-btn{ color:var(--ui-accent) }
  html #topbar #topbar-breadcrumb{ margin-right:auto }
}
@media (prefers-reduced-motion:reduce){ html #sidebar, html #main-content{ transition:none !important } }

/* 고른 메뉴 = 맥 실제 시스템 파랑 #007aff (사용자: "맥os 실제 파란색" 2026-10-28). 마우스를 올려도 같은 파랑 */
html #sidebar .tab-btn.tab-active, html #sidebar .tab-btn.active, html #sidebar .tab-btn.tab-active:hover, html #sidebar .tab-btn.active:hover{ background:var(--ui-accent-system) !important }

/* 도움말 '?' 단추(오른쪽 아래 고정, 44px · 아래 24px)가 페이지 맨 끝 내용(범례 등)을 가리던 것 (사용자 2026-10-28):
   본문 맨 아래에 단추 높이만큼 여유를 둬서 끝까지 내리면 단추 위로 올라오게. 단추는 맥처럼 단색 파랑 */
html #main-content #content-wrapper{ padding-bottom:calc(24px + 44px + 16px) !important }
html #help-fab-btn{ background:var(--ui-accent) !important }