:root {
  --navy: #1b2a4a;
  --navy-dark: #12203a;
  /* 페이지 상단 헤더 전용 배경 — --navy보다 살짝 밝은 파란색. 헤더만 바꾸기 위해 --navy와 분리한다
     (--navy는 사이드바 메뉴 강조 등 다른 곳에도 쓰임). */
  --header-bg: #213a66;
  --accent: #2f6fed;
  --gray-bg: #f4f6f9;
  --border: #e2e6ec;
  --text-main: #1f2430;
  --text-sub: #6b7280;
  --white: #ffffff;
  /* 카드/사이드바 등 "표면" 배경색 — --white과 분리해둔 이유는 --white이 버튼/배지 위의
     고정 흰색 텍스트 색상으로도 쓰이기 때문(다크모드에서 그 텍스트는 그대로 흰색이어야 함). */
  --surface: #ffffff;
  --danger: #e2504a;
  --accent-soft: #e8effd;
  /* 카드/사이드바 위의 제목·강조 텍스트용 색상 — 라이트모드에서는 --navy와 같지만, 다크모드에서는
     어두운 --navy 그대로 쓰면 어두운 배경 위에서 대비가 부족해지므로 밝은 색으로 분리한다. */
  --heading: #1b2a4a;
}

:root[data-theme="dark"] {
  --navy: #2c4470;
  --navy-dark: #16233d;
  --header-bg: #33518a;
  --accent: #6094ff;
  --gray-bg: #12151b;
  --border: #2c323d;
  --text-main: #e7eaf0;
  --text-sub: #9aa4b2;
  --surface: #1b1f27;
  --danger: #ef6b66;
  --accent-soft: #223050;
  --heading: #8fb4ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--text-main);
  background: var(--gray-bg);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Header */
.app-header {
  height: 64px;
  background: var(--header-bg);
  color: var(--white);
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 로그인 게이트에서는 헤더를 hidden으로 숨긴다(showLoginGate 참고) — display: flex를 무조건 주면
   [hidden] 속성(UA의 display: none)을 덮어쓰므로, .login-gate와 같은 :not([hidden]) 패턴을 쓴다. */
.app-header:not([hidden]) {
  display: flex;
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.logo {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
}

.logo-sub {
  font-size: 13px;
  color: #b9c2d6;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-switcher select {
  min-width: 118px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 7px 28px 7px 10px;
  font: inherit;
  font-weight: 600;
}

.company-switcher option { color: #111827; background: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.user-badge {
  font-size: 13px;
  color: #dbe2f0;
}

/* Login gate */
/* 로그인 화면에서는 헤더가 숨겨지므로(showLoginGate) 화면 전체 높이를 쓴다. */
.login-gate {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* [hidden] 속성보다 이 클래스의 display가 우선 적용되는 것을 막기 위해,
   보일 때만(=hidden이 아닐 때만) flex를 적용한다. */
.login-gate:not([hidden]) {
  display: flex;
}

/* 로그인 화면 — Instagram 웹 로그인 스타일. 좁은 세로 컬럼을 화면 가운데 두고, 카드(테두리 박스)
   없이 페이지 배경 위에 스크립트체 로고 + 플레이스홀더 기반의 작은 입력칸 + 풀너비 로그인 버튼을
   바로 쌓는다. 그 아래엔 계정 안내 문구가 붙는다. 색은 전부 테마 변수만 사용(다크모드 대응). */
.insta-login-wrap {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 예전에는 배경+테두리가 있는 카드였지만, 지금은 카드 없이 페이지 배경 위에 폼이 바로 놓이는
   레이아웃이다 — 클래스명(.insta-card)은 구조 구분용으로만 남겨둔다(로그인 게이트 전용 클래스). */
.insta-card {
  background: transparent;
  border: none;
  padding: 24px 12px 12px;
  text-align: center;
}

/* 워드마크 — Instagram의 필기체 로고 느낌. 시스템 스크립트 폰트 폴백 체인만 쓴다(외부 폰트 없음). */
.insta-logo {
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: 28px;
  color: var(--heading);
  line-height: 1.3;
}

.insta-logo-sub {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-sub);
  margin: 4px 0 28px;
}

.insta-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insta-form input[type="email"],
.insta-form input[type="password"],
.insta-form input[type="text"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* 카드가 없어져 입력칸이 페이지 배경(--gray-bg) 위에 바로 놓이므로, 배경과 겹치지 않게
     표면색(--surface)을 쓴다(카드가 있던 시절에는 반대로 --gray-bg였다). */
  background: var(--surface);
  padding: 11px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
}

.insta-form input:focus {
  outline: none;
  border-color: var(--text-sub);
}

/* 비밀번호 표시 토글 버튼이 입력값 끝 글자를 가리지 않도록 — 아래 .password-field input의
   padding-right가 이 블록의 padding 단축 속성에 덮이지 않게 여기서 다시 지정한다. */
.insta-form .password-field input {
  padding-right: 52px;
}

/* .checkbox-row 기본 스타일(아래쪽에 선언)보다 우선하도록 부모를 포함해 특이도를 높인다. */
.insta-form .insta-remember {
  justify-content: flex-start;
  margin: 2px 0 0;
}

/* 이메일 저장 + 로그인 유지 체크박스를 한 줄에 나란히 배치한다. */
.insta-form .insta-remember-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.insta-submit {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  padding: 10px 0;
  margin-top: 8px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.insta-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* 이메일/비밀번호가 모두 채워지기 전의 비활성 상태 — 흐려져 있다가 채워지면 살아난다(app.js의
   syncLoginButton 참고). */
.insta-submit:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 보조 카드 — Instagram의 "계정이 없으신가요? 가입하기" 자리. 가입 대신 관리자 문의 안내. */
.insta-card-sub {
  padding: 18px 20px;
  font-size: 13px;
  color: var(--text-main);
}

.insta-card-sub strong {
  color: var(--accent);
  font-weight: 600;
}

/* 역할 미배정 안내(로그인은 됐지만 users/{uid} 프로필이 없는 상태) — 같은 카드 안의 텍스트 변형 */
.insta-notice-title {
  font-size: 16px;
  margin: 20px 0 8px;
  color: var(--heading);
}

.insta-notice-text {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.login-error {
  font-size: 13px;
  color: var(--danger);
  margin-top: 10px;
  text-align: center;
}

.password-field {
  position: relative;
  display: flex;
}

.password-field input {
  flex: 1;
  /* 토글 버튼이 입력값 끝 글자를 가리지 않도록 오른쪽 여백 확보 */
  padding-right: 52px;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-sub);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--text-main);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 12px;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
  width: auto;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.checkbox-group .checkbox-row {
  margin-bottom: 0;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
}

.dept-drag-item {
  cursor: grab;
}

.dept-drag-item.dragging {
  opacity: 0.5;
}

.dept-drag-item.drag-over {
  border-top: 2px solid var(--accent);
}

/* 사용자 관리 목록의 텍스트 영역 — flex: 1로 남는 폭을 차지해 수정/삭제 버튼을 오른쪽에 모은다
   (.admin-list-item이 space-between이라, 이게 없으면 버튼이 늘어날 때 행 가운데로 흩어진다 —
   부서 관리의 .dept-drag-name과 같은 역할). */
.admin-list-item .admin-list-label {
  flex: 1;
}

.dept-drag-item .drag-handle {
  color: var(--text-sub);
  cursor: grab;
}

.dept-drag-item .dept-drag-name {
  flex: 1;
}

.dept-rename-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.dept-rename-form input {
  flex: 1;
}

/* Layout */
.app-body {
  align-items: flex-start;
  min-height: calc(100vh - 64px);
}

/* [hidden] 속성보다 이 클래스의 display가 우선 적용되는 것을 막기 위해,
   보일 때만(=hidden이 아닐 때만) flex를 적용한다. */
.app-body:not([hidden]) {
  display: flex;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  min-height: calc(100vh - 64px);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
}

.theme-toggle-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 20;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.theme-toggle-fab:hover {
  transform: translateY(-2px);
}

/* 이모지 대신 단색 SVG 아이콘(stroke: currentColor)을 쓴다 — inline 기본값의 베이스라인 여백 없이
   버튼 정중앙에 오도록 flex로 감싼다. */
.theme-toggle-fab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 맨 위로 스크롤 FAB — 테마 토글 버튼 바로 위에 같은 모양으로 쌓인다. 페이지를 일정 이상 내렸을
   때만 보인다(app.js의 window scroll 리스너가 hidden을 토글 — display를 무조건 주면 [hidden]을
   덮어쓰므로 :not([hidden]) 패턴을 쓴다). */
.back-to-top-fab {
  position: fixed;
  right: 24px;
  bottom: 84px; /* 테마 토글(높이 48px + bottom 24px) 위에 12px 간격 */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 20;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.back-to-top-fab:not([hidden]) {
  display: flex;
}

.back-to-top-fab:hover {
  transform: translateY(-2px);
}

.back-to-top-fab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* confirm() 네이티브 팝업 대체용 확인 모달(showConfirmModal(), app.js 참고). [hidden]과 이 클래스의
   display가 동시에 걸리면 클래스 쪽이 이길 수 있어(로그인 게이트/앱 본문과 동일한 이유),
   보일 때만(=hidden이 아닐 때만) flex를 적용한다. */
.modal-overlay:not([hidden]) {
  display: flex;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: calc(100% - 48px);
  max-width: 360px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.modal-message {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-main);
  white-space: pre-wrap;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
}

/* 첨부 미리보기는 배경을 어둡게 덮지 않는다 — 팝업을 옮겨가며 뒤 문서를 원본 그대로 볼 수
   있게(2026-08-03 요청). 오버레이는 배경 클릭 닫기/뒤 화면 클릭 차단용으로만 남는다. */
.attachment-preview-overlay {
  background: transparent;
}

/* 본문 첨부 칩 클릭 시 새 탭 대신 앱 안에서 여는 미리보기 팝업(openAttachmentPreviewModal, app.js).
   .modal-card의 기본 max-width(360px)는 미리보기에 좁아서 카드 클래스로 넓게 덮어쓴다.
   크기 조절은 네 변·네 모서리의 .attachment-preview-resizer 핸들 드래그로 전 방향 가능
   (CSS resize는 우하단 한 방향만 지원해 app.js bindAttachmentPreviewResize가 직접 구현 —
   카드는 overflow: hidden으로 막고 내부 스크롤은 .attachment-preview-body가 담당) —
   기본 크기를 명시(width/height)해야 드래그 리사이즈의 출발점이 예측 가능하고, 내용(iframe/이미지)은
   flex(body가 flex: 1) + 100% 크기로 카드 크기를 그대로 따라간다. */
.attachment-preview-card {
  /* 기본 크기는 화면을 거의 채우는 수준 — 고령 사용자(대표이사)가 첨부 내용을 크게 볼 수 있게
     (2026-07-24 요청). 더 줄이고 싶으면 아무 변/모서리나 잡고 드래그 리사이즈. */
  width: min(1720px, 96vw);
  height: min(92vh, 1280px);
  max-width: 96vw;
  max-height: 94vh;
  min-width: 320px;
  min-height: 220px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

/* 이미지 첨부는 카드가 이미지 원본 크기에 맞춰진다(app.js bindAttachmentPreviewImageFit —
   로드 완료 시 인라인 width/height로 덮어씀). 여기의 크기는 로드가 끝나기 전 잠깐 보이는
   초기 크기일 뿐이라, 기본 카드(화면을 거의 채움)보다 훨씬 작게 시작해 "거대한 팝업이 떴다가
   줄어드는" 깜빡임을 피한다. PDF/미지원 형식은 기존 기본 크기를 그대로 쓴다. */
.attachment-preview-card.is-image {
  width: min(720px, 92vw);
  height: min(540px, 86vh);
}

/* 전 방향 리사이즈 핸들 — 변 4개 + 모서리 4개. 조절 가능함은 세 겹으로 알린다: (1) 네 모서리에
   항상 보이는 ㄱ자 그립(::before), (2) 핸들 위에 올리면 커서가 방향별 리사이즈 모양으로 변경,
   (3) 호버 시 해당 변/모서리가 파란 하이라이트로 점등. 모서리가 변보다 나중에 선언되어 겹치는
   곳(변 끝)에서는 모서리 대각 커서가 우선한다. touch-action: none은 터치 드래그가 스크롤로
   새지 않게 하기 위함. */
.attachment-preview-resizer {
  position: absolute;
  z-index: 5;
  touch-action: none;
}

.attachment-preview-resizer:hover {
  background: var(--accent-soft);
  border-radius: 4px;
}

.attachment-preview-resizer[data-resize-dir="n"],
.attachment-preview-resizer[data-resize-dir="s"] {
  left: 12px;
  right: 12px;
  height: 10px;
  cursor: ns-resize;
}

.attachment-preview-resizer[data-resize-dir="e"],
.attachment-preview-resizer[data-resize-dir="w"] {
  top: 12px;
  bottom: 12px;
  width: 10px;
  cursor: ew-resize;
}

.attachment-preview-resizer[data-resize-dir="n"] { top: -4px; }
.attachment-preview-resizer[data-resize-dir="s"] { bottom: -4px; }
.attachment-preview-resizer[data-resize-dir="e"] { right: -4px; }
.attachment-preview-resizer[data-resize-dir="w"] { left: -4px; }

.attachment-preview-resizer[data-resize-dir="ne"],
.attachment-preview-resizer[data-resize-dir="nw"],
.attachment-preview-resizer[data-resize-dir="se"],
.attachment-preview-resizer[data-resize-dir="sw"] {
  width: 18px;
  height: 18px;
}

.attachment-preview-resizer[data-resize-dir="ne"] { top: -4px; right: -4px; cursor: nesw-resize; }
.attachment-preview-resizer[data-resize-dir="sw"] { bottom: -4px; left: -4px; cursor: nesw-resize; }
.attachment-preview-resizer[data-resize-dir="nw"] { top: -4px; left: -4px; cursor: nwse-resize; }
.attachment-preview-resizer[data-resize-dir="se"] { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* 항상 보이는 모서리 ㄱ자 그립 — 네 모서리 전부에서 크기 조절이 가능함을 알린다.
   핸들이 카드 밖으로 4px 나가 있으므로(overflow: hidden에 잘림) 6px 안쪽에 그려
   카드 경계에서 2px 들어온 위치에 보이게 한다. 호버 시 강조색으로 점등. */
.attachment-preview-resizer[data-resize-dir="ne"]::before,
.attachment-preview-resizer[data-resize-dir="nw"]::before,
.attachment-preview-resizer[data-resize-dir="se"]::before,
.attachment-preview-resizer[data-resize-dir="sw"]::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--text-sub);
  opacity: 0.55;
}

.attachment-preview-resizer:hover::before {
  border-color: var(--accent);
  opacity: 1;
}

.attachment-preview-resizer[data-resize-dir="ne"]::before { top: 6px; right: 6px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 5px; }
.attachment-preview-resizer[data-resize-dir="nw"]::before { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 5px; }
.attachment-preview-resizer[data-resize-dir="se"]::before { bottom: 6px; right: 6px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 5px; }
.attachment-preview-resizer[data-resize-dir="sw"]::before { bottom: 6px; left: 6px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 5px; }

/* 카드 아무 곳(머리줄·이미지 본문 포함)이나 잡고 드래그하면 팝업이 통째로 움직인다
   (app.js bindAttachmentPreviewMove — 2026-08-04에 머리줄 전용에서 확장). grab 커서와
   이동 아이콘(⠿)으로 잡을 수 있음을 알린다. 버튼(.btn의 pointer)/리사이즈 핸들(방향 커서)은
   자기 커서가 우선. */
.attachment-preview-card {
  cursor: grab;
}

.attachment-preview-card.dragging {
  cursor: grabbing;
}

.attachment-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

/* 이동 가능 표시 — 파일명 앞의 그립 아이콘(점 6개). 마크업 추가 없이 ::before로 그린다. */
.attachment-preview-name::before {
  content: "⠿";
  margin-right: 6px;
  color: var(--text-sub);
  font-weight: 400;
}

.attachment-preview-name {
  font-weight: 600;
  color: var(--heading);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.attachment-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 이미지는 카드 크기를 그대로 따라간다 — max-*(줄이기만 가능)가 아니라 width/height 100% +
   object-fit: contain이라, 팝업을 원본보다 크게 늘리면 비율을 유지한 채 확대된다(원본 초과
   확대 시 다소 흐려지는 것은 정상). 축소도 동일하게 비율 유지. */
.attachment-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.attachment-preview-frame {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.attachment-preview-empty {
  color: var(--text-sub);
  text-align: center;
  line-height: 1.7;
  padding: 24px 8px;
}

/* 미리보기 팝업이 열린 채 인쇄해도 인쇄물(.doc-sheet 등)을 가리지 않게 숨긴다. */
@media print {
  .attachment-preview-overlay {
    display: none !important;
  }
}

.sidebar-section {
  margin-bottom: 24px;
}

.sidebar-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  padding: 0 10px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 환율 위젯 — margin-top: auto로 사이드바(flex column) 맨 아래에 고정한다. */
.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px 0;
  border-top: 1px solid var(--border);
}

.exchange-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 8px;
}

.exchange-unit {
  font-weight: 400;
}

.exchange-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exchange-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}

.exchange-code {
  color: var(--text-sub);
  font-weight: 600;
}

.exchange-value {
  color: var(--text-main);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.exchange-updated {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 8px;
}

.exchange-status {
  font-size: 12px;
  color: var(--text-sub);
}

.menu-item {
  margin-bottom: 4px;
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

/* display: flex가 브라우저 기본 [hidden]{display:none}을 덮어써 hidden 속성이 무시되는 것을 막는다
   — 관리 섹션의 부서/사용자 관리 버튼이 admin 아닌 역할에서 hidden으로 숨겨져야 한다. */
.menu-header[hidden] {
  display: none;
}

.menu-header:hover {
  background: var(--gray-bg);
}

.menu-header .arrow {
  font-size: 10px;
  color: var(--text-sub);
  transition: transform 0.15s ease;
}

.menu-header.expanded .arrow {
  transform: rotate(90deg);
}

.menu-header.active-parent {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.menu-header.active-parent .arrow {
  color: var(--accent);
}

.menu-header.home {
  font-weight: 700;
  color: var(--heading);
}

.menu-header.home.active-parent {
  background: var(--navy);
  color: var(--white);
}

.menu-header.home.active-parent .arrow {
  color: var(--white);
}

.submenu-empty {
  padding: 8px 12px 8px 18px;
  font-size: 12px;
  color: var(--text-sub);
}

.submenu {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  margin-top: 2px;
}

.submenu-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px 8px 18px;
  margin-bottom: 2px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.15s ease;
}

.submenu-btn:hover {
  background: var(--gray-bg);
  color: var(--text-main);
}

.submenu-btn.active {
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
}

/* Content */
.content {
  flex: 1;
  /* 플렉스 아이템의 기본 min-width는 auto(= 내용물의 최소 폭)라서, 안쪽에 넓은 요소(부서 탭 바,
     표 등)가 있으면 본문 컬럼이 화면 폭을 넘게 벌어진다 — 0으로 풀어야 본문이 항상 가용 폭에
     맞고, 넓은 내용은 각자의 스크롤 래퍼(탭 바/표 래퍼) 안에서 가로 스크롤된다. 모바일에서
     카드/헤더 오른쪽이 잘리거나 페이지가 옆으로 밀리던 문제의 근본 원인. */
  min-width: 0;
  padding: 28px 36px;
  max-width: 1320px;
}

.content-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.content-title {
  font-size: 22px;
  font-weight: 700;
}

.content-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 4px;
}

/* Editor card */
.editor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 28px;
}

.editor-card h3 {
  margin: 0 0 14px 0;
  font-size: 15px;
}

.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
}

/* 입력칸 아래의 작은 안내 문구 — 비밀번호 규칙 안내 등. */
.form-hint {
  font-size: 11.5px;
  color: var(--text-sub);
  margin-top: 4px;
}

/* 읽기 전용 일일보고 표의 날짜류 칸 — 열을 좁혀도 날짜가 하이픈에서 줄바꿈되지 않게 한다. */
.daily-content-table td.cell-nowrap {
  white-space: nowrap;
}

.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-main);
  background: var(--surface);
  resize: vertical;
}

.form-group textarea {
  min-height: 340px;
  line-height: 1.5;
}

.content-inline-image {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  margin: 8px 0;
  /* 클릭하면 미리보기 팝업으로 확대(app.js 문서 레벨 위임 리스너) — 확대 커서로 알린다. */
  cursor: zoom-in;
}

/* 하단 첨부 썸네일도 클릭 시 새 탭 대신 미리보기 팝업으로 확대(위와 동일). */
.attachment-thumb {
  cursor: zoom-in;
}

.form-group input[type="file"] {
  border: none;
  padding: 4px 0;
  font-size: 13px;
}

/* 잠긴 입력칸(보고서 폼의 보고 주차/작성자, 사용자 관리의 UID 등) — readonly는 값이 폼 제출에
   실리는 채로 편집만 막으므로, 편집 가능한 칸과 시각적으로 구분되게 흐린 배경으로 표시한다. */
.form-group input[readonly] {
  background: var(--gray-bg);
  color: var(--text-sub);
  cursor: default;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* 이미지 첨부 썸네일 그리드 — 클릭하면 원본이 새 탭에서 열린다(보고서 취합/부서 히스토리 공용). */
.attachment-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.attachment-thumb {
  display: block;
  width: 96px;
  height: 96px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--gray-bg);
  transition: border-color 0.14s ease, transform 0.14s ease;
}

.attachment-thumb:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.attachment-item a {
  color: var(--accent);
  text-decoration: none;
}

.attachment-item a:hover {
  text-decoration: underline;
}

.attachment-size {
  color: var(--text-sub);
  font-size: 12px;
}

.attachment-item .icon-btn {
  margin-left: auto;
}

.attachment-uploading {
  font-size: 12px;
  color: var(--text-sub);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.btn {
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.88; }

.btn-primary {
  background: var(--accent);
  color: var(--white);
}

.btn-secondary {
  background: var(--gray-bg);
  color: var(--text-main);
}

/* Report list */
.report-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* 좌우 20px은 .editor-card/.doc-sheet와 동일 — 카드의 안쪽 폭이 같아야 작성 폼·히스토리
     제출 표·취합 문서 표의 픽셀 폭이 일치해 줄바꿈이 같아진다. 부서 보고서 화면에서는 아래
     32px 거터 규칙이 margin/padding-right를 덮어쓴다(.report-editor-card 옆 주석 참고). */
  padding: 16px 20px;
}

.report-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.report-period-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.report-period {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--heading);
}

.report-meta {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

/* 보고 내용을 항목별로 나란히 보여주는 표 — 부서 히스토리 카드와 대표이사 취합 문서(.doc-entry)가
   함께 쓴다(renderReportContentSections() 참고). 예전 스키마(문자열 하나)로 저장된 레거시 데이터는
   표 없이 .content-section-body 한 칸으로만 보여준다. */
.content-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.content-table th,
.content-table td {
  border: 1px solid var(--border);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.content-table th {
  background: var(--gray-bg);
  color: var(--heading);
  font-size: 13px;
  font-weight: 700;
}

.content-table td {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  /* pre-wrap은 공백 없는 긴 토큰(URL/영문 문자열)을 줄바꿈하지 못해 셀 밖 — 인쇄에서는 종이
     오른쪽 밖 — 으로 밀려 잘린다(table-layout: fixed라 표 폭은 그대로인 채 내용만 삐져나감).
     .daily-status-cell-text와 같은 이유로 강제 줄바꿈한다. */
  word-break: break-word;
  color: var(--text-main);
  min-height: 120px;
}

.content-section-body {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word; /* .content-table td와 같은 이유(레거시 문자열 본문도 긴 URL 가능) */
  color: var(--text-main);
}

/* 본문 칸 우하단의 "이 칸에 파일 첨부"(📎) 버튼 — 클릭하면 그 칸(단락)에 파일 링크 마커가
   들어간다. weekly/monthly 행 표 작성 폼의 multiline 칸(td.content-form-cell)에 쓰인다. */
.content-form-cell {
  position: relative;
}

/* 우하단 첨부 버튼이 마지막 줄 텍스트를 가리지 않도록 아래 여백 확보 — .row-form-table td textarea의
   padding(7px 9px)보다 우선하도록 그 규칙 이상의 구체성으로 지정한다. */
.content-form-cell textarea,
.row-form-table td.content-form-cell textarea {
  padding-bottom: 36px;
}

.content-file-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-sub);
  font-size: 12px;
  font-family: inherit;
  padding: 3px 8px;
  cursor: pointer;
}

.content-file-btn:hover:not(:disabled) {
  color: var(--text-main);
  border-color: var(--accent);
}

.content-file-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 본문 붉은 강조({{...}} 마커) — renderTextWithRedMarks()가 씌우는 표시용 span. 색만 바꾼다
   (굵기/크기를 바꾸면 글자폭이 변해 작성 폼·인쇄와의 줄바꿈 일치가 깨진다 — 스타일 추가 금지).
   인쇄에서 글자색은 배경과 달리 기본 출력되므로 print-color-adjust가 필요 없다. */
.content-red {
  color: var(--danger);
}

/* 붉은 강조 미니 툴바 — 작성 폼 textarea에서 글자를 드래그하면 선택 시작점 위에 떠오르는 "가"
   버튼(report-view.js의 showRedMarkPopover()). body 직속 + position: fixed라 #content 재렌더링과
   무관하고, 스크롤/blur/선택 해제 시 숨겨진다. z-index는 모달 오버레이(100)보다 아래. */
.red-mark-popover {
  position: fixed;
  z-index: 90;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  padding: 4px 10px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.red-mark-popover:hover {
  border-color: var(--danger);
}

/* 본문 안 인라인 파일 링크([[이름]] 마커) — 해당 단락 위치에서 새 탭으로 연다. 파일명이 길면
   본문을 방해하므로 본문보다 작은 글자의 칩(chip) 형태로 그리고, 이름은 max-width까지만 보여주고
   말줄임(…) 처리한다(전체 이름은 title 툴팁 — renderContentWithImages() 참고). */
.content-inline-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  vertical-align: middle;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--gray-bg);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.content-inline-file-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-inline-file:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.content-inline-file:hover .content-inline-file-name {
  text-decoration: underline;
}

/* 작성 폼의 "본문 첨부" 칩 목록 — 본문 칸에 첨부한 파일(inline)의 직관적 삭제 지점.
   × 클릭 한 번으로 파일 삭제 + 본문 textarea 안의 마커 제거가 함께 처리된다
   (bindDeptViewEvents()의 remove-inline-attachment 핸들러 참고). */
.inline-attachment-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}

.inline-attachment-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.inline-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--gray-bg);
  padding: 1px 4px 1px 8px;
  max-width: 100%;
}

.inline-attachment-chip a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
}

.inline-attachment-chip a:hover .content-inline-file-name {
  text-decoration: underline;
}

.inline-attachment-remove {
  border: none;
  background: none;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 50%;
}

.inline-attachment-remove:hover {
  color: var(--danger);
  background: rgba(217, 64, 64, 0.12);
}

/* daily(일일보고) 전용 — 지시사항 항목을 행(row)으로 담는 표. 열 너비가 내용 길이에 따라 달라야
   해서(처리현황/보고일시는 좁고, 내용 칸은 넓게) 각 열의 실제 너비는 <colgroup>(REPORT_TYPES.daily.
   rowFields[].width, renderDailyContentTable()/renderRowFormTable() 참고)로 지정한다. table-layout:
   fixed라야 colgroup 너비가 내용 길이와 무관하게 그대로 적용된다(.content-table 기본값을 그대로 씀). */
.daily-content-table td {
  min-height: 0;
}

/* 부서 보고서 화면의 카드들(작성 폼/저장된 보고서 카드, 히스토리 조회 툴바는 아래 .history-toolbar
   에서 같은 값 적용) — 행 삭제 "−" 버튼이 들어갈 오른쪽 거터(32px)만큼 카드를 콘텐츠 영역의
   오른쪽 패딩(.content padding 36px) 쪽으로 넓히고, 같은 32px을 오른쪽 패딩으로 돌려받는다
   (20px + 32px = 52px). 그래서 카드 안 내용물(작성 일자/작성자 입력, 조회 필터, 읽기 표, 저장
   버튼)은 전부 기존 폭 그대로 표의 오른쪽 끝선에 정렬되고, 화면의 카드 바깥 모서리도 전부
   나란히 맞는다. 작성 폼의 행 표만 .row-table-wrap이 이 패딩 안으로 32px 되밀고 들어가 그
   자리에 "−" 버튼을 띄운다 — 작성 표와 읽기 표의 폭이 픽셀 단위로 같아지는 구조이니 이 32px
   세트(카드 margin/padding + 래퍼 margin/padding)를 한쪽만 바꾸지 마세요(인쇄/모바일 재정의도 세트). */
.report-editor-card,
.report-card {
  margin-right: -32px;
  padding-right: 52px;
}

/* 인쇄 1:1 원칙(2026-07-23) — 보고서가 찍히는 컨테이너의 화면 최대 폭을 A4 가로 인쇄영역에
   맞춰, 안의 표가 화면·인쇄 모두 정확히 1046px(= 277mm 인쇄영역, @page 여백 10mm —
   setPrintOrientation() 참고)이 되게 한다. 인쇄가 화면 레이아웃을 축소 없이 같은 픽셀로 찍는
   구조라 줄바꿈이 화면의 저장된 보고서와 완전히 일치하고, 인쇄 대화상자의 배율 설정(100%든
   기본값이든)과 무관하게 잘리지 않는다. (브라우저 축소-맞춤(shrink-to-fit)에 기대는 방식은
   배율이 100%로 기억된 환경에서 오른쪽이 잘려 폐기, 글자만 pt로 낮추는 방식은 폰트의 크기별
   글자폭 반올림으로 줄 경계가 어긋나 폐기.) 값의 근거: 표 1046 + 카드 좌우 패딩·테두리.
   이 최대 폭 세트와 @page 여백은 한 몸이니 하나만 바꾸면 잘리거나 줄바꿈이 어긋난다. */
.report-editor-card,
.history-toolbar,
.report-card {
  /* = 표 1046 + 왼쪽 패딩 20 + 오른쪽 패딩 52(거터 포함) + 테두리 2 */
  max-width: 1120px;
}

.doc-sheet,
.consolidated-toolbar {
  /* = 표 1046 + 좌우 패딩 40 + 테두리 2 */
  max-width: 1088px;
}

.row-table-wrap {
  overflow-x: auto;
  /* 카드의 오른쪽 패딩(52px) 안으로 32px 되밀고 들어가, 표는 원래 폭을 유지한 채 그 거터에
     행 삭제 "−" 버튼(.row-remove-btn)만 띄운다. */
  margin-right: -32px;
  padding-right: 32px;
}

.row-form-table td input,
.row-form-table td select,
.row-form-table td textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  background: var(--surface);
}

/* 지시사항/진행사항 내용(내 용) 칸 — 단일 줄 input이 아니라 textarea로 렌더링한다(renderRowFormTable()의
   field.multiline 참고). 기본 높이는 3줄 정도로 작게 시작하고, 입력할 때마다 autoGrowTextarea()가
   scrollHeight에 맞춰 자동으로 늘려주므로(줄바꿈해도 스크롤 없이 다 보임) 짧은 내용은 표를 불필요하게
   크게 만들지 않는다. 수동 리사이즈 핸들은 자동 높이 조절과 충돌해 보여 꺼둔다(resize: none) —
   overflow도 숨겨 auto-grow가 따라잡기 전 순간적으로 스크롤바가 깜빡이는 것을 막는다.
   글자 크기/행간/좌우 여백은 읽기 셀(.content-table td: 14px, 1.7, 좌우 패딩 16px)과 정확히 맞춘다 —
   여백은 td 패딩 4px + 테두리 1px + textarea 패딩 11px = 16px. 열 너비 통일과 세트로, 작성 중
   textarea 안 줄바꿈이 제출 후 읽기 표와 같아지게 하는 조건이니 셋 중 하나만 바꾸지 마세요. */
.row-form-table td textarea {
  min-height: 64px;
  font-size: 14px;
  line-height: 1.7;
  padding: 7px 11px;
  resize: none;
  overflow: hidden;
}

/* 보고일시 칸 — 날짜(date) 위, 30분 단위 시간(select) 아래로 세로 배치(좁은 칸에 두 입력을 나란히
   두면 잘리므로). 두 입력의 너비/테두리는 위 .row-form-table td input/select 규칙을 그대로 물려받는다. */
.row-datetime {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 대표이사 일정으로 그날 전체 보고시간이 차단됐을 때 시간 드롭다운 아래 뜨는 안내. */
.row-datetime-note {
  font-size: 11px;
  font-weight: 700;
  color: #c0392b;
  line-height: 1.3;
}

.row-table-actions {
  margin-top: 10px;
}

/* 각 행 마지막 칸 — 행 삭제 "−" 버튼(.row-remove-btn)의 절대배치 기준점. */
.row-manage-cell {
  position: relative;
}

/* 행 삭제 "−" 버튼 — 마지막 칸 오른쪽 바깥(.row-table-wrap의 padding-right 거터)에 뜬다.
   예전의 표 안 "관리" 열을 대체한다(열 비율을 읽기 표와 일치시키기 위해 표 밖으로 뺌). */
.row-remove-btn {
  position: absolute;
  top: 6px;
  left: 100%;
  margin-left: 7px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-sub);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.row-remove-btn:hover:not(:disabled) {
  color: var(--danger);
  border-color: var(--danger);
}

.row-remove-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 행 순서 이동 ⠿ 핸들 — 삭제 버튼 바로 아래 같은 거터에 뜬다(드래그 동작은 app.js
   bindRowDragReorder). touch-action: none은 터치 드래그가 스크롤로 새지 않게 하기 위함. */
.row-drag-handle {
  position: absolute;
  top: 34px;
  left: 100%;
  margin-left: 7px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-sub);
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: grab;
  touch-action: none;
}

.row-drag-handle:active:not(:disabled) {
  cursor: grabbing;
}

.row-drag-handle:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.row-drag-handle:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 드래그로 옮기는 중인 행 강조 — 어느 행을 잡고 있는지 보이게 한다. */
.row-form-table tr.row-dragging td {
  background: var(--accent-soft);
}

/* .content-table의 기본 padding(12px 16px)은 읽기 전용 문단용으로 넓게 잡혀 있어, 작성 폼의 좁은
   날짜/드롭다운 칸에서는 입력 요소가 쓸 수 있는 실제 너비를 크게 깎아먹는다 — 폭을 줄여 그만큼
   input/select에 돌려준다. */
.row-form-table td {
  padding: 6px 4px;
  /* "내 용" textarea가 autoGrowTextarea()로 늘어나 행이 높아져도 날짜 입력칸(일자/마감예정/
     보고일시)·상태·삭제 버튼이 가운데로 따라 내려가지 않고 칸 상단에 붙어 있도록 고정 */
  vertical-align: top;
}

/* 날짜 입력(지시일자/마감예정/보고일시)은 열을 좁혀(rowFields[].width) "YYYY-MM-DD"가 잘리기 쉬우므로,
   일반 입력보다 좌우 패딩을 더 줄이고 달력 아이콘의 기본 여백/패딩도 없애 값 표시 폭을 최대한 확보한다.
   그래도 아주 좁은 화면에서는 완전히는 못 담을 수 있어(네이티브 위젯 하한), width를 더 줄일 땐 주의. */
.row-form-table td input[type="date"] {
  padding-left: 3px;
  padding-right: 2px;
  /* 좁은 열에서 "YYYY-MM-DD"의 '일'까지 보이도록 값 글자만 살짝 줄인다(일반 입력 13px보다 작게). */
  font-size: 12px;
}

.row-form-table td input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 0;
  padding: 0;
}

.report-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

.icon-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-sub);
}

.icon-btn:hover {
  background: var(--gray-bg);
}

.icon-btn.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.icon-btn.primary {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.report-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.report-status.is-submitted {
  background: #e4f5ea;
  color: #1f8a4c;
}

.report-status.is-draft {
  background: #fdf1e0;
  color: #b8730a;
}

.report-content-wrapper {
  margin-top: 10px;
}

.empty-state {
  text-align: center;
  color: var(--text-sub);
  padding: 40px 0;
  font-size: 14px;
}

/* 히스토리 조회 — 라벨 붙은 2단 폼 카드 대신 제목·기간 입력(시작 ~ 종료)·조회 버튼을 한 줄에 놓은
   컴팩트 바. 제목이 왼쪽, 입력/버튼이 오른쪽 끝에 붙고 좁은 화면에서는 flex-wrap으로 줄바꿈된다.
   margin/padding-right는 .report-editor-card/.report-card와 같은 32px 거터 세트(위 주석 참고) —
   카드 모서리와 내용물 끝선을 작성 폼·보고서 카드와 나란히 맞춘다(왼쪽 패딩도 같은 20px). */
.history-toolbar {
  margin-right: -32px;
  padding: 12px 52px 12px 20px;
}

.history-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.history-filter-bar h3 {
  margin: 0 auto 0 0;
}

.history-filter-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-filter-range input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  background: var(--surface);
}

.history-filter-tilde {
  color: var(--text-sub);
}

/* 한 줄 바에 맞게 버튼도 작성 폼보다 한 단계 작게. */
.history-filter-bar .btn {
  padding: 8px 14px;
  font-size: 13px;
}

/* "지난 보고서 끌어오기"(작성 폼, 작성 권한 전 역할) — 날짜 입력 + 버튼 한 줄 배치. 입력칸 모양은
   .form-group input 공용 규칙을 그대로 받고, 폭만 내용에 맞게 두기 위해 flex로 감싼다. */
.report-pull-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.report-pull-bar .btn {
  padding: 8px 14px;
  font-size: 13px;
}

/* 같은 기간에 보고서가 여러 건일 때의 후보 선택 버튼 목록(세로 나열). */
.report-pull-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.load-more-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* Dashboard */
.dashboard-section {
  margin-bottom: 32px;
}

.dashboard-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 12px;
}


.dashboard-section-sub {
  font-size: 12px;
  color: var(--text-sub);
  margin: -8px 0 12px;
}

/* 대시보드 "CEO 지시사항 추진 현황" */
.daily-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.daily-status-chip {
  font-size: 12px;
  color: var(--text-sub);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.daily-status-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.daily-status-chip strong {
  color: var(--heading);
  margin-right: 4px;
}

.daily-status-summary {
  font-size: 13px;
  color: var(--text-main);
  text-align: right;
}

/* 상태 필터(왼쪽) + 건수 요약(오른쪽 끝)을 한 줄에 배치 — space-between 컨테이너.
   모바일(≤768px)에서는 세로 스택 + 요약 왼쪽 정렬로 되돌린다(아래 미디어쿼리). */
.daily-status-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* CEO 지시사항 현황의 부서 필터 탭 — 일정 등록 항목의 부서 탭(.note-tab-bar)을 그대로 재사용하고,
   위쪽 상태 칩 목록과의 간격만 준다(예전의 부서 드롭다운(.daily-status-filter)을 대체). */
.daily-status-tab-bar {
  margin-top: 14px;
}

/* CEO 지시사항 현황 — 모바일 전용 카드 목록. 데스크톱에서는 숨기고(표가 담당), ≤768px 미디어
   쿼리에서 표 대신 이 카드를 보여준다(renderDailyStatusSection이 표와 함께 항상 렌더링). */
.daily-status-cards {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.daily-status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 마감 초과 카드 — 표의 is-overdue 행 강조와 같은 의미의 왼쪽 경고 보더. */
.daily-status-card.is-overdue {
  border-left: 4px solid var(--danger);
}

.dsc-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dsc-dept {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--heading);
}

.dsc-overdue {
  font-size: 11px;
  font-weight: 700;
  color: #c0392b;
  background: #fdeaea;
  padding: 2px 8px;
  border-radius: 999px;
}

.dsc-text {
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text-main);
}

.dsc-progress-text {
  font-size: 12.5px;
  color: var(--text-sub);
}

.dsc-meta {
  font-size: 11.5px;
  color: var(--text-sub);
}

/* CEO 지시사항 현황의 상태 필터(미완료 전체/진행중/완료) — 부서 탭 아래, 표 위의 작은 알약 버튼
   그룹. 건수 배지는 부서 탭과 같은 .note-dept-count를 재사용한다. */
.daily-status-state-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* 하단 간격은 이제 감싸는 .daily-status-filter-row가 담당한다(요약과 같은 줄이므로). */
}

.daily-status-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-sub);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.daily-status-state-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.daily-status-state-btn.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* 대시보드 최상위 섹션 탭(부서별 주요일정·이슈 | CEO 지시사항 추진 현황) — 부서 탭과 같은 시트
   스타일이되, 섹션 전환용이라 탭을 조금 크게 그린다. */
.dashboard-tab-bar {
  margin-bottom: 18px;
}

.dashboard-tab-bar .note-tab {
  font-size: 14px;
  padding: 9px 18px;
}

/* 정렬 가능한 컬럼 헤더 — 클릭 커서 + 현재 정렬 컬럼 강조 */
.daily-status-table th.daily-status-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.daily-status-table th.daily-status-sortable:hover {
  color: var(--accent);
}

.daily-status-table th.daily-status-sortable.sort-active {
  color: var(--accent);
}

/* 헤드라인의 "마감 초과 N건" — 클릭하면 마감 초과 항목만 표에 남기는 토글 버튼(재클릭 시 해제).
   활성 상태는 옅은 붉은 pill 배경으로 표시한다(행 강조와 같은 반투명 오버레이 계열). */
.daily-status-overdue-toggle {
  border: none;
  background: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: inherit;
  font-family: inherit;
  color: var(--danger);
  cursor: pointer;
}

.daily-status-overdue-toggle:hover {
  text-decoration: underline;
}

.daily-status-overdue-toggle.is-active {
  background: rgba(217, 64, 64, 0.12);
  text-decoration: none;
}

/* 표가 화면보다 넓어지면 섹션 안에서만 가로 스크롤되도록 감싼다. */
.daily-status-table-wrap {
  overflow-x: auto;
}

/* 열 너비는 app.js의 DAILY_STATUS_COLUMNS[].width(%)를 <colgroup>으로 적용한다 — %가 실제로
   먹히려면 table-layout: fixed가 필요하다. 좁은 화면에서는 열을 %대로 계속 줄이는 대신 min-width
   밑에서 래퍼(.daily-status-table-wrap)가 가로 스크롤시켜 날짜/상태 칸이 뭉개지지 않게 한다. */
.daily-status-table {
  table-layout: fixed;
  width: 100%;
  /* 날짜 컬럼(지시일자/마감예정/보고일시)이 "YYYY-MM-DD"를 줄바꿈 없이 보여줄 수 있는 하한 —
     이보다 좁은 화면에서는 래퍼에서 가로 스크롤된다. */
  min-width: 1040px;
}

/* .content-table의 기본 padding(12px 16px)은 보고 내용 문단용이라 현황 표에는 과하게 넓다. */
.daily-status-table th,
.daily-status-table td {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.daily-status-table td {
  min-height: 0;
}

.daily-status-table th {
  white-space: nowrap;
}

/* 마감 초과 행 강조 — 배지 pastel 색상 규칙(작은 영역 하드코딩 허용)과 달리 행 배경은 큰 영역이라
   다크모드에서도 무너지지 않게 반투명 오버레이로 처리한다. */
.daily-status-table tr.is-overdue td {
  background: rgba(217, 64, 64, 0.06);
}

.daily-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 배지 pastel 배경은 기존 .report-status/.note-kind-badge와 같은 이유(자체 대비 확보, 작은 영역)로
   하드코딩 값을 유지한다 — 새 큰 영역에는 이 패턴을 따라하지 말 것(CLAUDE.md 다크모드 절 참고). */
.daily-status-badge.in-progress {
  background: #e6effe;
  color: #2458a6;
}

.daily-status-badge.on-hold {
  background: #fdf1e0;
  color: #b8730a;
}

.daily-status-badge.done {
  background: #e4f5ea;
  color: #1f8a4c;
}

.daily-status-badge.none {
  background: #ececec;
  color: #666666;
}

/* 완료(진행률 100%/레거시 "완료") 지시 행 흐림 — renderProgressBar()의 "✓ 완료" 배지와 세트로,
   완료 항목을 살짝 눌러 미완료 항목이 돋보이게 한다(대시보드 현황 표의 "완료" 상태 필터,
   히스토리/취합/칩 팝업의 일일보고 표, 모바일 카드 공통). opacity 방식이라 색을 건드리지 않아
   라이트/다크 테마 모두에서 그대로 동작한다. */
.daily-status-table tr.is-done td,
.daily-content-table tr.is-done td {
  opacity: 0.55;
}

.daily-status-card.is-done {
  opacity: 0.55;
}

/* 중요도 배지 — 색 점 + 라벨. 배경/텍스트 pastel 하드코딩은 위 배지들과 같은 이유(작은 영역 자체 대비). */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.priority-badge.high {
  background: #fdeaea;
  color: #c0392b;
}

.priority-badge.mid {
  background: #fdf1e0;
  color: #b8730a;
}

.priority-badge.low {
  background: #ececec;
  color: #666666;
}

.priority-badge.none {
  background: #ececec;
  color: #666666;
}

/* 진행률 미니 진행바 — 읽기 화면(대시보드 현황 표/칩 팝업/히스토리·취합의 일일보고 표) 전용.
   채움 길이로 100%에 얼마나 가까운지 보여주고, 색은 구간별 단계(10~30% 주황 → 40~70% 파랑 →
   80~90% 청록 → 100% 초록)를 쓴다. 낮은 진행률에 빨강을 쓰지 않는 이유: 이 화면에서 빨강은 이미
   "마감 초과" 경고 색이라, 막 시작한 항목이 문제 항목처럼 보이면 안 되기 때문. 채움 색은 배지
   pastel 관례(작은 영역 자체 대비)대로 하드코딩한다. 칸이 좁으면 flex-wrap으로 퍼센트 라벨이
   진행바 아래로 내려간다. */
.progress-cell {
  display: inline-flex;
  align-items: center;
  /* 칸이 좁아도 숫자(%)가 아래 줄로 접히지 않도록 한 줄 고정 — 대신 아래 .progress-track이
     줄어들어(min-width 축소) 진행바가 짧아지고 숫자는 같은 줄에 남는다. */
  flex-wrap: nowrap;
  gap: 3px 5px;
  width: 100%;
  min-width: 0;
}

.progress-track {
  flex: 1 1 22px;
  min-width: 22px;
  height: 11px;
  border-radius: 999px;
  background: var(--gray-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  /* 주황·노랑 → 초록 그라데이션(빨강 제외 — 빨강은 "마감 초과" 경고 색으로 남겨둠, 100%에
     가까울수록 초록 = 완료 색) — 트랙 전체 폭 기준으로 고정되도록 renderProgressBar()가 채움
     폭(pct%)의 역비율로 background-size를 인라인 지정한다(채움이 늘수록 그라데이션이 왼쪽부터
     드러나는 구조). 진행률 배지 계열과 같은 하드코딩 색 원칙(다크모드 절 참고)이라 CSS 변수를
     쓰지 않는다. */
  background-image: linear-gradient(90deg,
    #e8963c 0%, #e0c33c 33%, #9cc23f 66%, #1f8a4c 100%);
  background-repeat: no-repeat;
  background-position: left center;
}

.progress-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  /* 라벨 폭을 최장값("100%") 기준으로 고정 — 라벨이 flex 아이템이라 글자 수("0%" vs "100%")에
     따라 폭이 달라지면 남는 공간을 채우는 트랙 길이가 값마다 들쭉날쭉해진다. */
  flex: 0 0 auto;
  min-width: 26px;
  text-align: right;
}

/* 긴 본문 칸(지시/진행 내용) — 너비는 <colgroup>이 정하므로 여기선 줄바꿈 처리만 한다
   (table-layout: fixed에서는 셀 min-width가 무시된다). */
.daily-status-cell-text {
  white-space: pre-wrap;
  word-break: break-word;
}

/* 대표이사 보고서 취합 */
.consolidated-toolbar-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.consolidated-type-toggle,
.consolidated-scope-toggle {
  display: flex;
  gap: 8px;
}

/* CEO 지시사항의 조회 단위(일별/주별/월별) 토글 — 기간 선택기와 함께 툴바 오른쪽에 붙인다
   (2026-07-20 요청). margin-left: auto가 이 토글부터 오른쪽으로 밀어주므로, 뒤따르는 기간
   선택기의 auto 마진은 해제한다(auto 마진이 둘이면 남는 공간이 나뉘어 토글이 가운데쯤 뜬다). */
.consolidated-scope-toggle {
  margin-left: auto;
}

.consolidated-scope-toggle + .consolidated-period-picker {
  margin-left: 0;
}

.consolidated-period-picker {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  /* 보고유형 토글은 왼쪽에 두고, 기간 선택기 + 인쇄 버튼은 오른쪽 끝으로 민다 */
  margin-left: auto;
}

.consolidated-period-picker label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}

.consolidated-period-picker select,
.consolidated-period-picker input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-main);
  background: var(--surface);
  min-width: 200px;
}

/* 주간보고의 월 필터 — 값이 "YYYY-MM"/"전체 월"로 짧아 주차 드롭다운만큼 넓을 필요가 없다. */
.consolidated-period-picker #consolidatedMonthSelect {
  min-width: 110px;
}

/* 다크모드에서 날짜 입력의 네이티브 캘린더 아이콘이 검게 묻히지 않도록 반전시킨다. */
:root[data-theme="dark"] .consolidated-period-picker input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* 보고서 취합 전체화면(집중) 모드 — consolidated.js의 "전체화면" 버튼이
   documentElement.requestFullscreen()과 함께 body에 이 클래스를 토글한다(해제는 전역
   fullscreenchange 리스너). 헤더/사이드바를 숨기고 툴바+취합 문서만 남긴다. */
body.consolidated-fullscreen .app-header,
body.consolidated-fullscreen .sidebar,
body.consolidated-fullscreen .sidebar-scrim {
  display: none;
}

/* 사이드바가 사라져 가로 여백이 커지므로 본문을 가운데로 모은다. max-width를 평소(1320px)로
   두면 .content만 가운데 오고 그 안에서 왼쪽 정렬된 취합 문서(.doc-sheet, max-width 1088px)의
   좌우 여백이 비대칭이 된다(왼쪽 좁고 오른쪽 넓음, 2026-07-24 수정) — 문서 폭 + .content 좌우
   패딩(36px×2)만큼으로 줄여 문서 자체가 화면 정중앙에 오게 한다. 취합 문서 표의 픽셀 폭
   (= 줄바꿈 위치)은 .doc-sheet의 max-width가 정하므로 일반 화면/인쇄와 달라지지 않는다. */
body.consolidated-fullscreen .content {
  margin: 0 auto;
  /* = .doc-sheet/.consolidated-toolbar의 max-width 1088 + .content 좌우 패딩 72 */
  max-width: calc(1088px + 72px);
}

/* 전체화면에서 취합 문서를 화면 폭에 맞춰 확대한다(2026-07-24 — "확대(줌)" 방식: 글자·표·여백이
   통째로 커지되 모양은 그대로). transform: scale은 레이아웃을 재계산하지 않는 순수 시각 확대라
   줄바꿈 위치가 일반 화면/1:1 인쇄와 완전히 동일하게 유지된다(zoom 속성은 글꼴 크기를 실제로
   키워 재조판하므로 글자폭 반올림으로 줄 끝이 어긋날 수 있어 쓰지 않는다 — freezePrintLineBreaks
   주석의 같은 문제). 배율(--consolidated-fs-scale)과 스크롤 보정 여백(--consolidated-fs-extra)은
   consolidated.js가 화면 폭·문서 높이로 계산해 body 인라인 스타일의 커스텀 프로퍼티로 지정한다
   (전체화면 진입/재렌더링/창 크기 변경/문서 높이 변화(이미지 로딩·부서 접기) 시 갱신). */
body.consolidated-fullscreen .doc-sheet {
  transform: scale(var(--consolidated-fs-scale, 1));
  /* 위 가장자리는 툴바 아래 제자리에 고정하고 좌우 대칭으로 커지게 — 문서 레이아웃 박스가
     .content 가운데에 있으므로 확대 후에도 화면 정중앙을 유지한다. */
  transform-origin: top center;
  /* transform은 레이아웃 높이를 바꾸지 않아 그대로 두면 문서 아래쪽이 페이지 스크롤 범위 밖에
     남는다 — 늘어난 시각 높이(문서 높이 × (배율−1))만큼 여백으로 스크롤 범위를 맞춘다. */
  margin-bottom: var(--consolidated-fs-extra, 0px);
}

.doc-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* 좌우 20px은 .editor-card(consolidated-toolbar 포함)/.report-card와 동일 — 취합 문서 표가
     부서 화면의 표와 같은 픽셀 폭이 되어 줄바꿈이 일치한다. 인쇄(@media print)와 모바일은
     아래에서 따로 재정의하므로 영향 없음. */
  padding: 32px 20px;
}

.doc-sheet-header {
  text-align: left;
  border-bottom: 2px solid var(--heading);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

/* 문서 제목/제출 현황(왼쪽)과 인쇄·전체화면 버튼(오른쪽)을 한 줄에 배치한다 — 버튼이 익일 일정
   요약 밴드 바로 위(오른쪽 칸 = 익일 임원 일정 위)에 오도록(2026-07-24 요청). */
.doc-sheet-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.doc-sheet-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.doc-sheet-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--heading);
}

.doc-sheet-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 6px;
}

.doc-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.doc-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.doc-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.doc-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
}

/* 접기/펼치기는 .collapsed 클래스로만 처리한다(hidden 속성 아님) —
   @media print에서 접힌 부서도 강제로 펼쳐 인쇄하기 위함. */
.doc-section.collapsed .doc-section-body {
  display: none;
}

.doc-entry {
  margin-bottom: 14px;
}

.doc-entry:last-child {
  margin-bottom: 0;
}

.doc-entry-meta {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.doc-empty {
  font-size: 13px;
  color: var(--text-sub);
  font-style: italic;
}

/* CEO 지시사항 일별 취합 문서 상단의 "익일 일정 요약" 밴드 — 왼쪽 익일 보고 일정(보고일시 시간순),
   오른쪽 익일 임원 일정(dept_notes의 일정/외근/휴가). 색은 다크모드 대응을 위해 커스텀 프로퍼티만
   쓰고, 인쇄물에도 그대로 실린다(js/views/consolidated.js의 renderDailyScheduleBand 참고). */
/* 헤더 div 안(제출 현황 텍스트와 헤더의 border-bottom 구분선 사이)에 위치한다 — 아래 여백은
   헤더의 padding-bottom(16px)이 담당하므로 위쪽 여백만 준다. */
.doc-schedule-band {
  display: grid;
  /* 1fr(= minmax(auto, 1fr))은 트랙이 내용물의 min-content 아래로 줄어들지 않는다 — 행 안의
     nowrap 항목(시각/부서/부가정보) 때문에 좁은 화면에서 트랙이 문서 밖으로 늘어나 패널
     오른쪽이 잘리므로, minmax(0, 1fr)로 컨테이너 폭 안 축소를 허용한다. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.doc-schedule-col {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--gray-bg);
}

.doc-schedule-col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 6px;
}

/* 행은 고정 열 그리드 — 부서(작성자) 텍스트 폭이 행마다 달라도 다음 칸(지시 내용/일정 제목)의
   시작 위치가 모든 행에서 세로로 정렬되게 한다(2026-08-05 요청 — flex 시절엔 행마다 들쭉날쭉).
   열 구성은 칸 종류(-reports/-notes)별로 다르고, 폭이 넘치는 부서명은 말줄임으로 누른다.
   모바일(≤768px)에서는 flex 줄바꿈 배치로 되돌린다(아래 모바일 블록 참고). */
.doc-schedule-item {
  display: grid;
  align-items: baseline;
  column-gap: 8px;
  padding: 2px 0;
  font-size: 13px;
  color: var(--text-main);
}

/* 보고 일정 행: 시각 | 부서(작성자) | 지시 내용. 부서 열 160px은 가장 긴 부서명
   "파츠몰에이투지 (OOO)"이 들어가는 폭이다. */
.doc-schedule-col-reports .doc-schedule-item {
  grid-template-columns: 42px 160px minmax(0, 1fr);
}

/* 임원 일정 행: 유형 배지 | 부서 | 제목 | 부가정보(시간·기간·등록자). */
.doc-schedule-col-notes .doc-schedule-item {
  grid-template-columns: 52px 100px minmax(0, 1fr) auto;
}

.doc-schedule-time {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.doc-schedule-dept {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 보고 일정 행의 지시 내용 요약 — 남는 폭을 채우고 한 줄 말줄임(전체는 hover 툴팁/아래 본문에서). */
.doc-schedule-inst {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-sub);
}

/* 임원 일정 행의 제목 — 길면 한 줄 말줄임으로 눌러 부가 정보(시간/기간/등록자)가 밀리지 않게 한다. */
.doc-schedule-note-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-schedule-extra {
  color: var(--text-sub);
  font-size: 12px;
  white-space: nowrap;
  /* 그리드 auto 열에서 오른쪽 끝에 붙인다 — 부가정보의 오른쪽 가장자리가 전 행에서 정렬된다. */
  justify-self: end;
}

.doc-schedule-empty {
  font-size: 12px;
  color: var(--text-sub);
}

@media print {
  .app-header, .sidebar, .content-header, .consolidated-toolbar,
  .doc-sheet-actions, .theme-toggle-fab, .back-to-top-fab {
    display: none !important;
  }
  /* 익일 일정 요약 밴드의 두 칸은 짧아서 페이지 경계에 걸리면 통째로 다음 장으로 보낸다. */
  .doc-schedule-col {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .content {
    padding: 0;
    max-width: 100%;
  }
  /* 부서 화면 인쇄는 저장된 보고서(히스토리 카드)만 찍는다 — 작성 폼과 조회 툴바는 입력 UI라
     지면만 차지하므로 숨긴다(.consolidated-toolbar와 같은 원칙, 2026-07-23). */
  .report-editor-card,
  .history-toolbar {
    display: none !important;
  }
  /* 줄바꿈 화면 일치 + 잘림 방지(2026-07-23 요청 "저장된 폼 그대로 출력") — 보고서가 찍히는
     컨테이너(취합 .doc-sheet / 부서 화면 히스토리 .report-card)를 화면 최대 폭 기준의 표 폭과
     같은 1046px로 고정한다(화면 쪽 max-width 규칙 참고). A4 가로 인쇄영역(@page 여백 10mm →
     277mm ≈ 1046.9px)에 축소 없이 1:1로 들어가므로, 인쇄 대화상자의 배율 설정과 무관하게
     잘리지 않고, 화면과 같은 픽셀·같은 글자 크기로 레이아웃되어 줄이 정확히 같은 위치에서
     꺾인다. 히스토리 카드의 테두리/패딩/화면용 32px 거터 확장은 .doc-sheet처럼 걷어내 표가
     컨테이너 폭 전체를 쓰게 한다. 이 폭을 바꾸거나 컨테이너 안 글자 크기를 인쇄에서 재정의하면
     줄바꿈이 화면과 어긋난다. */
  .report-card {
    border: none;
    padding: 0;
    margin-right: 0;
    width: 1046px;
  }
  .doc-sheet {
    border: none;
    padding: 0;
    width: 1046px;
  }
  /* 전체화면(집중) 모드인 채 Ctrl+P/인쇄 버튼으로 인쇄해도 화면용 확대(transform)가 인쇄물에
     들어가지 않게 원복한다 — 화면 규칙이 body.consolidated-fullscreen .doc-sheet 선택자라 위
     .doc-sheet 규칙만으로는 못 이기므로 같은 선택자로 재정의한다. */
  body.consolidated-fullscreen .doc-sheet {
    transform: none;
    margin-bottom: 0;
  }
  /* 인쇄 타이포그래피 — 보고서 컨테이너(.doc-sheet/.report-card) 안은 글자 크기를 재정의하지
     않는다: 위 1046px 1:1 인쇄라 화면 크기(본문 14px ≈ 10.5pt) 그대로 종이에 찍힌다(예전의 pt
     재정의(2026-07-20, 본문 10pt 기준)는 인쇄 줄바꿈을 화면과 어긋나게 해서 제거 — 2026-07-23).
     세로 인쇄 화면(대시보드 현황 표)만 기존 10pt를 유지한다. */
  body {
    font-size: 10pt;
  }
  .daily-status-table td,
  .daily-status-table th {
    font-size: 10pt;
  }
  /* 월간보고 취합의 부서 섹션은 인쇄물에서 부서마다 새 장에서 시작한다(2026-08-05 요청 — 출력
     후 부서별로 나눠 가질 수 있게, 월간 인쇄에만 한정). 첫 부서는 제외(+ 형제 선택자) — 문서
     제목/기간 헤더만 있는 반쪽짜리 첫 장이 생기지 않게 헤더와 같은 장에서 시작한다. 보고유형
     클래스(doc-type-*)는 renderConsolidatedDocument()가 붙인다(consolidated.js). */
  .doc-sheet.doc-type-monthly .doc-section + .doc-section {
    break-before: page;
    page-break-before: always;
  }
  /* 화면에서 접어둔 부서도 인쇄물에는 항상 전체 내용이 나오도록 강제로 펼친다. */
  .doc-section-toggle {
    display: none !important;
  }
  .doc-section.collapsed .doc-section-body {
    display: block !important;
  }
  /* 히스토리 카드도 같은 원칙 — 조작 버튼(펼쳐보기·수정/삭제/제출)은 종이에서 쓸 수 없으니
     숨기고, 접힌 카드 본문([hidden])은 강제로 펼쳐 인쇄한다. */
  .report-card-top .icon-btn,
  .report-card-actions {
    display: none !important;
  }
  .report-card .report-content-wrapper {
    display: block !important;
  }
  /* 모달(확인/노트 편집·열람/일일보고 팝업)이 열린 채 Ctrl+P로 인쇄해도 스크림과 모달 카드가
     인쇄물 위에 겹쳐 찍히지 않도록 숨긴다. */
  .modal-overlay {
    display: none !important;
  }
  /* 본문 칸에 첨부한 파일 칩([[파일명]] 마커의 링크)과 하단 첨부파일 표시(이미지 썸네일 그리드 +
     파일명 목록)도 인쇄물에 함께 찍는다(2026-07-28 요청 — 예전에는 종이에서 링크를 열 수 없다는
     이유로 숨겼으나(2026-07-22), 어떤 첨부가 있었는지가 지면에 남도록 되돌림). 썸네일/파일 행이
     페이지 경계에서 위아래로 잘리지 않게 통째로 다음 장으로 보낸다. */
  .attachment-thumb,
  .attachment-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* 부서 경계에서 페이지를 나누지 않고 이어 쓴다(2026-07-22 결정 — 이전에는 .doc-section마다
     break-before: page로 부서별 새 페이지를 시작했는데, 부서 수만큼 하단 여백 페이지가 생겨 종이가
     낭비됨). 대신 고아(orphan) 방지 규칙으로 어색한 잘림만 막는다:
     ① 부서 제목 줄(.doc-section-header)이 페이지 맨 아래에 홀로 찍히고 표는 다음 장으로 넘어가는
        배치를 막고(break-after: avoid),
     ② 항목의 작성자 메타 줄(.doc-entry-meta)도 바로 아래 표와 떨어지지 않게 한다.
     break-inside: avoid를 부서(.doc-section)/항목(.doc-entry) 전체에 걸지 않는 이유: 반 페이지짜리
     부서가 통째로 다음 장으로 밀려 사실상 부서별 나눔이 되돌아오기 때문 — 표 자체는 행(tr) 단위로
     자연스럽게 나뉘고 브라우저가 잘린 표의 다음 페이지에 thead를 반복해준다.
     page-break-*는 break-*의 avoid를 모르는 구형 브라우저용 폴백. */
  .doc-section-header,
  .doc-entry-meta {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* 진행률 미니 진행바와 중요도/상태 배지는 전부 배경색·배경 그라데이션으로 그려지는데, 브라우저
     기본 인쇄 설정("배경 그래픽" 꺼짐)에서는 배경이 출력되지 않아 빈 트랙/투명 배지로 깨져 보인다 —
     이 요소들만 배경 인쇄를 강제한다. */
  .progress-track,
  .progress-fill,
  .priority-badge,
  .daily-status-badge,
  .report-status,
  .note-kind-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.note-kind-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.6;
}

.note-kind-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.note-kind-badge.schedule {
  background: #e6effe;
  color: var(--accent);
}

.note-kind-badge.issue {
  background: #fdeaea;
  color: var(--danger);
}

/* 휴가 배지 — 파란 계열 요청(2026-07-22)이되 일정(schedule)의 진파랑과 구분되는 하늘색 톤.
   pastel 하드코딩은 다른 유형 배지와 같은 의도적 예외(작은 영역 자체 대비). */
.note-kind-badge.vacation {
  background: #e0f4fd;
  color: #0b7db8;
}

/* 보고 일정 배지(직접 등록, kind "report") — 캘린더의 보고 예정 보라 점(.note-cal-dot.report)과
   같은 계열로 맞춘 pastel(위 배지들과 같은 의도적 하드코딩 예외). */
.note-kind-badge.report {
  background: #efeafe;
  color: #7c5cff;
}

/* 부서별 주요일정 · 이슈 티켓(대시보드) */
/* 세로 스택 — 위쪽 행(캘린더 + 보고 일정 패널) → 부서별 주요일정 목록(아래). CEO 추진현황은 이 섹션
   다음에 온다(캘린더 → 부서일정 → CEO현황 순서). */
.note-calendar-layout {
  display: block;
}

/* 위쪽 행: 캘린더(왼쪽 고정 폭) + 보고 일정 패널(오른쪽, ceo/admin만 존재)을 가로로 배치. 패널이
   없으면 캘린더만 왼쪽에 놓이고 오른쪽은 비어 있다. 좁으면 flex-wrap으로 접힌다. */
.note-cal-top-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.note-cal-top-row .note-cal-side {
  flex: 0 1 340px;
}

.note-cal-top-row .report-schedule-panel {
  flex: 1 1 300px;
  min-width: 0;
}

.note-calendar-layout .note-calendar {
  margin-bottom: 0;
}

.note-calendar-layout .note-date-list {
  min-width: 0;
}

/* 보고 일정 패널(대표이사/시스템관리자 대시보드) */
.report-schedule-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 16px;
  background: var(--surface);
}

/* flex인 이유: 헤더 오른쪽 끝에 "+ 추가" 버튼(.note-add-btn의 margin-left: auto)을 붙이기
   위해서다(.note-date-header와 같은 패턴 — 버튼이 없으면 텍스트만 있는 flex라 영향 없음). */
.report-schedule-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 12px;
}

.report-schedule-date {
  color: var(--text-sub);
  font-weight: 700;
}

/* 시간 중복 경고 배너 — pastel 하드코딩(작은 영역 자체 대비, 배지 관례와 동일). */
.report-schedule-warn {
  font-size: 12px;
  font-weight: 700;
  color: #c0392b;
  background: #fdeaea;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 10px;
}

.report-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 보고 일정 패널 페이지네이션 — 페이지당 항목 수 제한(REPORT_SCHEDULE_PAGE_SIZE)으로 패널이
   캘린더 높이를 넘지 않게 하고, 넘치는 항목은 이전/다음으로 넘겨 본다. */
.report-schedule-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.rs-pager-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sub);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.rs-pager-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.rs-pager-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.rs-pager-info {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

/* 상하 패딩 5px — 부서명·안건 한 줄 레이아웃(.rs-main)과 세트로 행을 슬림하게 눌러, 페이지당
   5건(REPORT_SCHEDULE_PAGE_SIZE)이 옆 캘린더 높이 안에 들어오게 한다(2026-08-06). */
.report-schedule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-main);
}

.report-schedule-item:hover {
  border-color: var(--accent);
}

/* 시간이 겹치는 항목 — 빨강 좌측 보더 + 옅은 경고 배경으로 강조. */
.report-schedule-item.is-conflict {
  border-color: #e6a6a6;
  background: #fdf4f4;
}

.rs-time {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--heading);
  min-width: 52px;
}

/* 부서명 + 안건을 세로 두 줄이 아니라 한 줄로 배치한다 — 행 높이를 줄여 페이지당 5건이
   캘린더 높이 안에 들어오게 하기 위함(2026-08-06, 예전 두 줄 스택은 페이지당 4건 시절 레이아웃). */
.rs-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rs-dept {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.rs-inst {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rs-conflict-badge {
  font-size: 11px;
  font-weight: 700;
  color: #c0392b;
  background: #fdeaea;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* 부서별 주요일정/이슈 캘린더 */
.note-calendar {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 16px;
  background: var(--surface);
  margin-bottom: 20px;
  max-width: 520px;
}

.note-cal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.note-cal-month {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading);
  min-width: 110px;
  text-align: center;
}

.note-cal-nav {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sub);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.note-cal-nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.note-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.note-cal-dow {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  padding: 4px 0;
}

.note-cal-dow.sun { color: var(--danger); }
.note-cal-dow.sat { color: var(--accent); }

.note-cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: inherit;
  color: var(--text-main);
}

.note-cal-day.empty {
  cursor: default;
  border: none;
}

.note-cal-day:not(.empty):hover {
  background: var(--gray-bg);
}

.note-cal-daynum {
  font-size: 13px;
  line-height: 1;
}

.note-cal-day.today .note-cal-daynum {
  font-weight: 700;
  color: var(--accent);
}

.note-cal-day.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.note-cal-dots {
  display: flex;
  gap: 3px;
  height: 6px;
  align-items: center;
}

.note-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.note-cal-dot.issue { background: var(--danger); }
.note-cal-dot.field { background: #1f9254; }
.note-cal-dot.schedule { background: var(--accent); }
/* 휴가 — 일정의 진파랑과 구분되는 하늘색(배지 .note-kind-badge.vacation과 같은 계열). */
.note-cal-dot.vacation { background: #17a5e6; }
/* 보고 예정(보고일시) 마커 — 유형 점과 구분되는 보라색. 같은 시각이 겹치는 날은 빨강으로 경고. */
.note-cal-dot.report { background: #7c5cff; }
.note-cal-dot.report.conflict { background: var(--danger); }

/* 대표이사 일정이 있는 날짜의 금색 별 마커 — 부서 항목의 유형 점과 한눈에 구분된다.
   금색은 배지 pastel 관례(작은 영역 자체 대비)대로 하드코딩(라이트/다크 공통으로 잘 보이는 톤). */
.note-cal-ceo-mark {
  font-size: 9px;
  line-height: 1;
  color: #e0a010;
}

/* flex인 이유: 헤더 오른쪽 끝에 공용 "+ 추가" 버튼(.note-add-btn의 margin-left: auto)을 붙이기
   위해서다("날짜 미지정" 헤더처럼 버튼 없는 경우엔 텍스트만 있는 flex라 영향 없음). */
.note-date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 12px;
}

.note-undated-list {
  max-width: 320px;
}

/* 엑셀 시트식 탭 바 — 아래 경계선 위에 탭이 올라앉은 형태. 탭이 넘치면 탭 바 자체가 가로
   스크롤된다. 대시보드 최상위 섹션 탭(.dashboard-tab-bar)과 CEO 지시사항 현황의 부서 필터 탭
   (.daily-status-tab-bar)이 쓴다. (원래 주요일정/이슈의 선택 날짜 목록도 부서 탭이었지만
   2026-07-16 전체 나열(.note-dept-group)로 바뀌며 그 용도는 없어졌다 — 클래스 이름의 note-는
   그 흔적.) */
.note-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.note-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--gray-bg);
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.note-tab:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.note-tab.active {
  background: var(--surface);
  color: var(--heading);
}

/* 부서 그룹의 티켓 목록 — 각 그룹이 전체 폭을 쓰므로 티켓을 그리드로 여러 개씩 나란히 배치해
   하루치 전체 나열이 세로로 과하게 길어지지 않게 한다(기존 세로 목록의 max-height/스크롤은
   .note-ticket-list에서 그대로 상속). */
.note-dept-group .note-ticket-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}

/* 부서 그룹 사이 간격 — 탭 전환 없이 전부 세로로 이어 붙는 구조라 그룹 경계를 띄워준다. */
.note-dept-group + .note-dept-group {
  margin-top: 20px;
}

.note-dept-column {
  display: flex;
  flex-direction: column;
}

/* 대표이사 일정 칸(가상 부서 CEO_SCHEDULE_DEPT) — 실제 부서 칸들 사이에서 구분되도록 헤더를
   강조색으로 표시한다. */
.note-dept-column--ceo .note-dept-head {
  border-bottom-color: var(--accent);
}

.note-dept-column--ceo .note-dept-name {
  color: var(--accent);
}

.note-dept-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.note-dept-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--heading);
}

.note-dept-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.note-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 항목이 많이 등록돼도 칸이 한없이 길어지지 않도록 티켓 2개 높이(2줄)로 고정하고, 나머지는
     세로 스크롤로 본다. 여유 padding 2px는 티켓 hover 시 translateY(-2px)가 위쪽에서 잘리지
     않게 하기 위함. */
  max-height: 236px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}

/* 미니멀 플랫 — 카드 배경/테두리는 중립색으로 두고, 유형은 상단 배지(색 점 + 라벨)로만 구분한다
   (왼쪽 컬러 액센트 바 없음). */
.note-ticket {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.note-ticket:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
  border-color: transparent;
}

:root[data-theme="dark"] .note-ticket:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.note-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.note-ticket-date {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-sub);
}

.note-ticket-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.4;
  margin-bottom: 5px;
}

/* 로딩/빈 상태 플레이스홀더 — 점선 테두리. */
/* 대표이사 일정 티켓 — 금색 왼쪽 보더 + 테두리 톤으로 부서 항목 티켓과 구분한다("★ 대표이사"
   배지와 세트). 배경은 큰 영역이라 하드코딩하지 않고 테두리만 강조한다(다크모드 규칙 준수). */
.note-ticket--ceo {
  border-color: rgba(224, 160, 16, 0.55);
  border-left: 4px solid #e0a010;
}

.note-ceo-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fdf3dc;
  color: #9a6b00;
  white-space: nowrap;
}

/* 외근(field) 유형 배지 — 이슈(빨강)/일정(파랑)과 구분되는 초록 계열. 배지 pastel 배경은 다른
   배지들과 동일하게(작은 영역 대비 확보) 하드코딩 값을 그대로 둔다. */
.note-kind-badge.field {
  background: #e4f5ea;
  color: #1f9254;
}

/* 티켓 상단 배지 묶음(유형 배지 + 상태 칩) */
.note-ticket-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.note-status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gray-bg);
  color: var(--text-sub);
  border: 1px solid var(--border);
}

/* "+ 추가" 버튼 옆의 안내 라벨("임원 일정등록") — 라벨이 오른쪽 끝으로 밀려가고(마진 auto)
   버튼은 헤더의 gap만큼 그 옆에 붙는다(아래 인접 형제 규칙이 버튼의 auto 마진을 해제). */
.note-add-label {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
}

.note-add-label + .note-add-btn {
  margin-left: 0;
}

/* 부서 칸 헤더의 "+ 추가" 버튼 — 오른쪽 끝으로 밀어 배치(앞에 안내 라벨이 있으면 위 규칙이 해제) */
.note-add-btn {
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.note-add-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* 티켓 하단 푸터 — 등록자(왼쪽) + 수정/삭제 버튼(오른쪽)을 한 줄에 배치 */
.note-ticket-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.note-ticket-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-sub);
}

.note-meta-icon {
  flex-shrink: 0;
  opacity: 0.75;
}

/* 티켓 하단 수정/삭제 버튼 — 평소엔 옅게, 호버 시 강조 */
.note-ticket-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.note-action-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.note-action-btn:hover {
  background: var(--gray-bg);
  color: var(--text-main);
}

.note-action-btn.danger:hover {
  background: var(--danger);
  color: var(--white);
  border-color: var(--danger);
}

/* 주요일정/이슈 편집 모달 — 기본 .modal-card보다 넓고 폼 필드가 세로로 쌓인다 */
.note-modal-card {
  max-width: 440px;
  text-align: left;
}

.note-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 16px;
}

.note-modal-error {
  font-size: 13px;
  color: var(--danger);
  background: #fdeaea;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* 다크모드에서는 --danger가 밝아져(#ef6b66 계열) 파스텔 배경(#fdeaea) 위 대비가 부족하다 —
   배경만 어두운 반투명 빨강으로 바꿔 대비를 확보한다(배지류 하드코딩 예외의 예외). */
:root[data-theme="dark"] .note-modal-error {
  background: rgba(217, 64, 64, 0.18);
}

.note-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.note-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* display: flex가 브라우저 기본 [hidden]{display:none}을 덮어써 hidden 속성이 무시되는 것을 막는다
   — 시간(시작~종료) 영역(#noteTimeField)이 이슈 유형에서 hidden으로 숨겨져야 한다. */
.note-field[hidden] {
  display: none;
}

.note-field-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-sub);
}

.note-field input,
.note-field select,
.note-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text-main);
}

.note-field textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}

.note-field input:focus,
.note-field select:focus,
.note-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* 편집 모달의 시간(시작~종료) 입력 — 두 드롭다운을 "~" 구분자와 함께 한 줄에 나란히 둔다(일정/외근 유형 전용). */
.note-time-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-time-range select {
  flex: 1;
  min-width: 0;
}

.note-time-sep {
  flex: none;
  color: var(--text-sub);
  font-size: 13px;
}

.note-modal-card .modal-actions {
  margin-top: 20px;
}

/* 티켓은 클릭하면 상세 팝업이 뜨므로 포인터 커서로 클릭 가능함을 알린다(빈/로딩 placeholder 제외). */
.note-ticket.is-clickable {
  cursor: pointer;
}

/* 티켓 상세 팝업(읽기 전용) */
.note-viewer-card {
  max-width: 480px;
}

.note-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.note-viewer-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.14s ease, color 0.14s ease;
}

.note-viewer-close:hover {
  background: var(--gray-bg);
  color: var(--text-main);
}

.note-viewer-dept {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.note-viewer-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.4;
  margin-bottom: 12px;
}

.note-viewer-content {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 16px;
}

.note-viewer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  color: var(--text-sub);
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* 부서 일일보고 상세 팝업 — 일일보고 표(여러 열)를 담으므로 넓게 + 가로 스크롤 */
.daily-detail-card {
  max-width: min(1120px, 96vw);
}

.daily-detail-entry {
  margin-top: 14px;
  overflow-x: auto;
}

/* 좁은 열(상태 등)에서 글자가 한 자씩 세로로 꺾이지 않게 표에 최소 폭을 준다 —
   팝업이 그보다 좁아지면 줄바꿈 대신 .daily-detail-entry의 가로 스크롤이 생긴다. */
.daily-detail-entry .content-table {
  min-width: 760px;
}

.daily-detail-entry .content-table td:last-child,
.daily-detail-entry .content-table th:last-child {
  white-space: nowrap;
}

.daily-detail-entry:first-of-type {
  margin-top: 4px;
}

.daily-detail-meta {
  font-size: 12.5px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

/* 팝업 안 항목별 "수정" 버튼(편집 권한자에게만 렌더링)과 편집 폼의 취소/저장 버튼 줄 여백 */
.daily-detail-edit-btn {
  margin-left: 10px;
}

.daily-detail-entry .modal-actions {
  margin-top: 10px;
}

/* ==================== 모바일 레이아웃 (≤768px) ==================== */
/* 대표이사의 모바일 사용(대시보드 열람 + 본인 일정 등록 + 보고서 취합 열람)을 1차 대상으로 한
   반응형 규칙 — 사이드바는 햄버거 버튼으로 여닫는 왼쪽 서랍(drawer)이 되고, 넓은 표는 래퍼에서
   가로 스크롤된다. 다른 화면(작성 폼 등)도 이 규칙 안에서 깨지지 않게만 처리한다(모바일 최적화
   1차 범위 밖). */

/* 햄버거 버튼 — 데스크톱에서는 숨긴다(아래 미디어 쿼리에서만 노출). */
.menu-toggle {
  display: none;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

/* 서랍 스크림 — 모바일에서 body.sidebar-open일 때만 보인다. */
.sidebar-scrim {
  display: none;
}

/* ---------- 게시판 (js/views/board.js) ---------- */

.board-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.board-list-head h3 {
  margin: 0;
}

/* 작성자/기간 검색 바 — 재조회 없는 클라이언트 필터(board.js의 getFilteredBoardEntries()).
   입력 모양은 .form-group input과 같게 맞추되 한 줄 배치라 폭만 내용에 맞게 제한한다(좁은
   화면에서는 flex-wrap으로 자연스럽게 줄바꿈). */
.board-search-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 목록 오른쪽 끝(글쓰기 버튼 아래)에 붙인다 */
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.board-search-bar input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-main);
  background: var(--surface);
}

.board-search-bar input[name="author"] {
  width: 140px;
}

.board-search-tilde {
  color: var(--text-sub);
}

/* "중요만" 토글 — 체크 즉시 적용되는 중요 글 전용 필터(검색 버튼 불필요). */
.board-search-pinned {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
  margin-right: 4px;
}

.board-search-count {
  font-size: 12.5px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

.board-list {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--border);
}

/* 목록 행 — 클릭 전체 영역이 버튼이다(제목 왼쪽, 작성자/일시 오른쪽). */
.board-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 8px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: var(--text-main);
  transition: background 0.14s ease;
}

.board-row:hover {
  background: var(--accent-soft);
}

.board-row-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.board-row-title {
  font-weight: 600;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-row-clip {
  flex: none;
  font-size: 12px;
}

/* 중요(pinned) 글 강조 행 — 별도 영역 없이 목록 행 자체를 강조한다(왼쪽 컬러 바 + 옅은 배경).
   정렬(중요 우선)로 항상 목록 맨 위에 온다. 배경은 반투명 빨강이라 라이트/다크 테마 모두에서
   은은한 틴트로 동작한다(불투명 pastel을 큰 영역에 쓰지 않는 다크모드 관례 준수). */
.board-row--important {
  border-left: 3px solid var(--danger);
  background: rgba(220, 60, 60, 0.06);
}

.board-row--important .board-row-title {
  font-weight: 700;
}

.board-row--important:hover {
  background: rgba(220, 60, 60, 0.12);
}

/* "❗중요" 배지 — 목록 행과 상세 화면 공용(작은 pill 배지라 pastel 하드코딩 관례). 말머리 배지
   (공지 .board-category--notice — 옅은 빨강 배경)와 구분되도록 진한 빨강 배경 + 흰 글자를 쓴다. */
.board-important-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #c62828;
  color: #fff;
}

.board-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  font-size: 12px;
  color: var(--text-sub);
}

/* 페이지 번호 바 — 글이 한 페이지(15개)를 넘을 때만 목록 아래에 노출된다(이전/번호/다음). */
.board-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 16px;
}

.board-page-btn {
  min-width: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.board-page-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.board-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.board-page-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  font-weight: 700;
  cursor: default;
}

/* 카테고리(말머리) 배지 — 다른 pill 배지처럼 pastel 배경 하드코딩(작은 영역 자체 대비 확보,
   다크모드 공통 — CLAUDE.md의 배지 색상 관례 참고). */
.board-category-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.board-category--notice {
  background: #fdeaea;
  color: #b3261e;
}

.board-category--resource {
  background: #e6effe;
  color: #1c5bbf;
}

.board-category--general {
  background: #eceff3;
  color: #55606e;
}

/* 상세 */
.board-detail-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.board-detail-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.board-detail-title {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--heading);
}

.board-detail-meta {
  font-size: 12px;
  color: var(--text-sub);
}

/* 본문은 순수 텍스트라 줄바꿈을 그대로 살린다. */
.board-detail-content {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
  font-size: 14px;
  min-height: 80px;
}

.board-detail-attachments {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.board-detail-attach-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 8px;
}

.board-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* 편집 폼 */
.board-form-category {
  flex: 0 0 140px;
}

.board-form-title {
  flex: 1 1 auto;
}

.board-editor-error {
  background: #fdeaea;
  color: #b3261e;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

.board-pin-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  margin: 4px 0 16px;
  cursor: pointer;
}

/* screen 한정 — 인쇄가 세로 용지일 때 페이지 폭(A4 세로 인쇄영역 190mm ≈ 718px)이 768px 기준에
   걸려 이 블록 전체(익일 일정 밴드 상하 적층, 현황 표→카드 전환 등)가 인쇄물에 섞여 나오던
   문제를 막는다(2026-08-05 — 취합 인쇄에서 보고/임원 일정이 좌우 반반이 아니라 위아래로 쌓여
   출력된 원인). 인쇄는 용지 방향과 무관하게 항상 데스크톱 배치로 찍는다. */
@media screen and (max-width: 768px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  /* 헤더 내용물(☰ + 로고 + 배지 + 로그아웃)의 최소 폭 합이 좁은 화면 폭을 넘지 않게 한다 —
     넘치면 페이지에 미세한 가로 스크롤이 생겨 헤더 오른쪽에 배경이 여백처럼 드러난다(아이폰
     사파리에서 확인된 증상). 고정 요소(로고/버튼)는 줄이고, 사용자 배지가 남는 폭에 맞춰
     말줄임으로 줄어드는 구조로 만든다. 만약을 대비해 페이지 가로 넘침 자체도 clip으로 차단한다
     (overflow-x: hidden은 sticky 헤더를 깨뜨릴 수 있어 clip 사용 — 미지원 브라우저는 무시). */
  html, body {
    overflow-x: clip;
  }

  .app-header {
    padding: 0 12px;
    gap: 8px;
  }

  .header-left {
    align-items: center;
    gap: 8px;
    flex: none;
  }

  .logo {
    font-size: 14px;
    white-space: nowrap;
  }

  /* 좁은 폭에서는 부제를 숨겨 헤더 한 줄을 유지한다. */
  .logo-sub {
    display: none;
  }

  .header-right {
    gap: 6px;
    min-width: 0; /* 배지가 min-content 아래로 줄어들 수 있게(플렉스 기본값 auto 해제) */
  }

  .user-badge {
    max-width: 130px;
    min-width: 0;
    flex: 0 1 auto; /* 폭이 모자라면 배지가 먼저 줄어들며 말줄임 처리된다 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-right .btn {
    flex: none;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* 사이드바 → 왼쪽 서랍. body.sidebar-open일 때만 화면 안으로 들어온다(app.js의 햄버거/스크림/
     내비게이션 클릭 리스너가 클래스를 토글). */
  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    z-index: 40;
    min-height: 0;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.18);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-scrim {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 35;
  }

  body.sidebar-open .sidebar-scrim {
    display: block;
  }

  /* 모바일은 대표이사의 열람 용도(대시보드/보고서 취합/내 계정)로 한정한다 — 보고서 작성 화면으로
     들어가는 보고유형 섹션(CEO 지시사항/주간보고/월간보고 아코디언)은 서랍에서 통째로 숨긴다.
     (작성이 필요한 임원/팀장은 데스크톱을 쓰는 운영 전제 — 모바일 작성이 필요해지면 이 규칙만 걷어내면 된다.) */
  #reportTypeNavSection {
    display: none;
  }

  .content {
    padding: 16px 12px;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* 대시보드 — 캘린더와 보고 일정 패널을 세로로 쌓는다(2단 유지가 불가능한 폭). */
  .note-cal-top-row {
    flex-direction: column;
  }

  .note-cal-top-row .note-cal-side,
  .note-cal-top-row .report-schedule-panel {
    flex: 1 1 auto;
    width: 100%;
  }

  /* CEO 지시사항 현황 — 좁은 화면에서는 9열 표 대신 카드 목록을 보여준다(가로 스크롤 제거). */
  .daily-status-table-wrap {
    display: none;
  }

  .daily-status-cards {
    display: flex;
  }

  /* 취합 문서의 익일 일정 요약 밴드 — 좁은 화면에서는 두 칸을 세로로 쌓는다(위와 같은 이유로
     minmax(0, 1fr)). 행의 nowrap 고정 항목(시각/부서/배지/부가정보)이 패널 폭을 넘으면 오른쪽이
     잘리는 대신 다음 줄로 감싸고, 지시 요약/일정 제목은 아예 둘째 줄 전체 폭을 쓰게 해(한 줄
     말줄임은 유지) 좁은 폭에서 0px까지 짜부라지지 않게 한다. */
  .doc-schedule-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-schedule-item {
    /* 데스크톱의 고정 열 그리드를 해제하고 flex 줄바꿈 배치로 — 좁은 화면에서는 열 정렬보다
       내용이 다 보이는 게 우선이다(아래 order/flex-basis 규칙이 flex 전제). */
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .doc-schedule-inst,
  .doc-schedule-note-title {
    flex-basis: 100%;
    /* 부가정보(시간·기간·등록자)까지 첫 줄에 남기고 제목만 아랫줄로 내린다(DOM 순서는 제목이
       먼저라 order 없이는 부가정보가 셋째 줄로 밀린다). */
    order: 1;
  }

  /* 상태 필터 + 건수 요약은 좁은 화면에서 한 줄에 오른쪽 정렬하면 어색하므로 세로로 스택하고
     요약을 왼쪽 정렬로 되돌린다(데스크톱은 .daily-status-filter-row가 오른쪽 배치). */
  .daily-status-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .daily-status-summary {
    text-align: left;
  }

  /* 넓은 행 표(주간/월간 3칸, 일일 7칸)는 래퍼에서 가로 스크롤 — 히스토리 카드와 취합 문서 공통.
     (일일보고 현황 표/팝업은 각자 래퍼(.daily-status-table-wrap/.daily-detail-entry)가 이미 스크롤.) */
  .report-content-wrapper,
  .doc-entry {
    overflow-x: auto;
  }

  .report-content-wrapper .daily-content-table,
  .doc-entry .daily-content-table {
    min-width: 640px;
  }

  /* 취합 툴바 — 보고유형 토글/기간 선택/인쇄 버튼을 세로로 쌓고, 입력이 남는 폭을 채우게 한다. */
  .consolidated-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .consolidated-period-picker {
    margin-left: 0;
    flex-wrap: wrap;
  }

  /* 툴바가 세로로 쌓이면 오른쪽 밀기(auto 마진)가 의미 없어 해제한다. */
  .consolidated-scope-toggle {
    margin-left: 0;
  }

  .consolidated-period-picker select,
  .consolidated-period-picker input[type="date"] {
    min-width: 0;
    flex: 1 1 140px;
  }

  .doc-sheet {
    padding: 18px 14px;
  }

  /* 모바일은 .content 패딩(12px)이 거터(32px)보다 좁아 카드 확장이 화면 밖으로 넘친다 — 32px
     거터 세트를 전부 되돌린다(작성 화면 진입 메뉴 자체가 모바일에선 숨겨져 있어 방어적 재정의). */
  .report-editor-card,
  .history-toolbar,
  .report-card {
    margin-right: 0;
    padding-right: 20px;
  }
  .row-table-wrap {
    margin-right: 0;
  }

  /* 모달 — 내용이 화면보다 길면 모달 안에서 스크롤하고, 편집/상세 모달은 폭을 화면에 맞춘다. */
  .modal-card {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }

  .note-modal-card,
  .note-viewer-card {
    max-width: none;
  }

  /* iOS 사파리는 포커스된 입력의 글자가 16px 미만이면 화면을 자동 확대한다 — 모바일에서 실제로
     입력하는 곳(일정 편집 모달, 로그인 폼)만 16px로 키워 확대를 막는다. */
  .note-field input,
  .note-field select,
  .note-field textarea,
  .insta-form input[type="email"],
  .insta-form input[type="password"],
  .insta-form input[type="text"] {
    font-size: 16px;
  }

  /* 게시판 목록 행 — 좁은 화면에서는 제목 줄 아래에 작성자/일시를 내려 쌓는다. */
  .board-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .board-row-main {
    width: 100%;
  }

  .board-row-meta {
    padding-left: 2px;
  }
}
.login-text-action {
  border: 0;
  padding: 0;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.insta-form select,
.insta-form textarea {
  width: 100%;
  border: 1px solid #d8dde6;
  border-radius: 4px;
  background: #fafafa;
  color: #1f2937;
  padding: 10px 9px;
  font: inherit;
  resize: vertical;
}
.community-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 96px); margin: -24px; }
.community-channels { border-right: 1px solid #dfe4ec; background: #eef1f5; padding: 18px 12px; }
.community-company { padding: 0 10px 16px; font-size: 16px; font-weight: 700; }
.community-group { margin-bottom: 18px; }
.community-group-title { padding: 0 10px 6px; color: #667085; font-size: 12px; font-weight: 700; }
.community-channel { display: flex; gap: 8px; width: 100%; border: 0; border-radius: 7px; background: transparent; color: #344054; padding: 9px 10px; text-align: left; cursor: pointer; }
.community-channel:hover { background: #e2e7ef; }
.community-channel.is-active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 4px rgba(16, 24, 40, .1); font-weight: 700; }
.community-channel-icon { width: 18px; text-align: center; filter: saturate(.8); }
.community-title-icon { font-size: .9em; }
.community-feed { min-width: 0; padding: 24px 28px; background: #f7f8fa; }
.community-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #dfe4ec; }
.community-head > div { flex: 1; }
.community-head h2 { margin: 0; font-size: 22px; }
.community-head p { margin: 5px 0 0; color: #667085; font-size: 13px; }
.community-composer, .community-post, .community-empty { margin-top: 16px; border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; padding: 18px; }
.community-composer { display: grid; gap: 10px; }
.community-composer input, .community-composer textarea { width: 100%; border: 1px solid #d0d5dd; border-radius: 7px; padding: 10px 12px; font: inherit; }
.community-file-label { color: #667085; font-size: 12px; }
.community-file-label input { margin-top: 5px; }
.teams-composer { display: block; max-width: 760px; padding: 14px 16px 12px; border-radius: 6px; box-shadow: 0 2px 7px rgba(16, 24, 40, .14); }
.teams-composer-author { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #e2e6ec; }
.teams-composer-close { margin-left: auto; border: 0; background: transparent; color: #475467; padding: 2px 8px; font-size: 25px; line-height: 1; cursor: pointer; }
.teams-composer .teams-composer-title { width: 100%; border: 0; border-bottom: 1px solid #d9dee7; border-radius: 0; padding: 14px 10px 11px; font-size: 18px; outline: 0; }
.teams-format-toolbar { display: flex; align-items: center; gap: 2px; padding: 9px 4px 5px; overflow-x: auto; }
.teams-format-toolbar > span { width: 1px; height: 19px; margin: 0 4px; background: #d8dde6; }
.teams-format-toolbar button, .teams-compose-tools button { display: grid; place-items: center; min-width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: #3e4654; font: inherit; cursor: pointer; }
.teams-format-toolbar button:hover, .teams-compose-tools button:hover { background: #edf0f5; }
.teams-message-editor { min-height: 112px; padding: 9px 10px; color: #1f2937; line-height: 1.6; outline: 0; white-space: pre-wrap; }
.teams-message-editor:empty::before { content: attr(data-placeholder); color: #7a8495; pointer-events: none; }
.teams-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.teams-compose-tools { display: flex; align-items: center; gap: 3px; }
.teams-post-button { min-width: 90px; }
.teams-attachment-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.teams-attachment-list span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d9dee7; border-radius: 6px; background: #f8fafc; padding: 6px 9px; font-size: 12px; }
.teams-attachment-list button { border: 0; background: transparent; cursor: pointer; }
.community-post-head { display: flex; align-items: center; gap: 10px; }
.community-post-actions { display: flex; gap: 4px; margin-left: auto; align-self: flex-start; }
.community-post-actions button { border: 0; border-radius: 5px; background: transparent; color: #475467; padding: 6px 8px; cursor: pointer; }
.community-post-actions button:hover { background: #eef1f5; }
.community-post-actions button.danger { color: #b42318; }
.community-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #dff3eb; color: #28785f; font-size: 12px; font-weight: 700; }
.community-avatar.small { width: 28px; height: 28px; font-size: 10px; }
.community-meta, .community-comment span { margin-top: 2px; color: #7a8495; font-size: 11px; }
.community-post h3 { margin: 16px 0 8px; font-size: 17px; }
.community-post-body { color: #344054; font-size: 14px; line-height: 1.65; }
.community-attachment { margin-top: 12px; border: 1px solid #e1e5eb; border-radius: 7px; background: #fafbfc; padding: 10px; font-size: 13px; }
.community-reactions { display: flex; gap: 8px; margin-top: 14px; }
.community-reactions button { border: 1px solid #d8dee8; border-radius: 999px; background: #fff; padding: 5px 10px; cursor: pointer; }
.community-comments { margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0f4; }
.community-comment { display: flex; gap: 9px; margin: 10px 0; }
.community-comment p { margin: 4px 0 0; color: #344054; font-size: 13px; }
.community-reply { display: flex; gap: 8px; margin-top: 12px; }
.community-reply input { flex: 1; min-width: 0; border: 1px solid #d0d5dd; border-radius: 7px; padding: 9px 10px; }
.community-empty { color: #667085; text-align: center; }
.community-manage-btn { width: 100%; margin-top: 8px; border: 1px solid #cfd6e1; border-radius: 7px; background: transparent; color: #475467; padding: 9px; cursor: pointer; }
.community-manager { margin-top: 16px; border: 1px solid #cfd8e6; border-radius: 10px; background: #fff; padding: 16px; }
.community-manager-head, .community-manager-group-head, .community-manager-channel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.community-manager-head h3 { margin: 0; }
.community-manager-group { margin-top: 14px; border-top: 1px solid #e5e9f0; padding-top: 14px; }
.community-manager-channel { margin: 7px 0 7px 14px; border-radius: 6px; background: #f7f8fa; padding: 8px 10px; }
.community-manager-channel small { color: #7a8495; font-weight: 400; }
.community-manager-add { display: flex; gap: 8px; margin-top: 10px; }
.community-manager-add input { flex: 1; min-width: 0; border: 1px solid #d0d5dd; border-radius: 7px; padding: 9px 10px; }
.community-move-form { display: flex; align-items: end; gap: 8px; margin-top: 12px; border: 1px solid #dbe2ec; border-radius: 8px; background: #f8fafc; padding: 10px; }
.community-move-form label { flex: 1; color: #667085; font-size: 12px; }
.community-move-form select { display: block; width: 100%; margin-top: 4px; border: 1px solid #d0d5dd; border-radius: 6px; padding: 8px; }
.community-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.community-admin-company h3 { margin: 0 0 3px; }
.community-admin-add-channel { margin: 7px 0 0 14px; border: 0; background: transparent; color: #2563eb; padding: 6px 0; cursor: pointer; font-weight: 600; }

[data-theme="dark"] .community-channels { background: #151c29; border-color: #2e3747; }
[data-theme="dark"] .community-channel { color: #c5cedc; }
[data-theme="dark"] .community-channel:hover { background: #222c3c; }
[data-theme="dark"] .community-channel.is-active { background: #293448; color: #9bbcff; }
[data-theme="dark"] .community-feed { background: #101620; }
[data-theme="dark"] .community-post, [data-theme="dark"] .community-composer, [data-theme="dark"] .community-empty { background: #171e2b; border-color: #303a4c; }
[data-theme="dark"] .community-post-body, [data-theme="dark"] .community-comment p { color: #c7d0df; }
[data-theme="dark"] .community-attachment, [data-theme="dark"] .community-reactions button { background: #1d2635; border-color: #394458; color: #e5ebf5; }
[data-theme="dark"] .community-manager { background: #171e2b; border-color: #303a4c; }
[data-theme="dark"] .community-manager-channel, [data-theme="dark"] .community-move-form { background: #1d2635; border-color: #394458; }
[data-theme="dark"] .teams-composer-author, [data-theme="dark"] .teams-composer .teams-composer-title { border-color: #394458; }
[data-theme="dark"] .teams-composer .teams-composer-title, [data-theme="dark"] .teams-message-editor { background: transparent; color: #e5ebf5; }
[data-theme="dark"] .teams-format-toolbar button, [data-theme="dark"] .teams-compose-tools button, [data-theme="dark"] .teams-composer-close { color: #d1d8e5; }
[data-theme="dark"] .teams-format-toolbar button:hover, [data-theme="dark"] .teams-compose-tools button:hover, [data-theme="dark"] .teams-attachment-list span { background: #222c3c; }
[data-theme="dark"] .community-post-actions button { color: #c5cedc; }
[data-theme="dark"] .community-post-actions button:hover { background: #222c3c; }
[data-theme="dark"] .community-post-actions button.danger { color: #ff9b91; }

@media (max-width: 900px) { .community-shell { grid-template-columns: 180px minmax(0, 1fr); } .community-feed { padding: 18px; } }
@media (max-width: 1050px) { .community-admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .community-shell { display: block; margin: -16px; } .community-channels { border-right: 0; border-bottom: 1px solid #dfe4ec; padding: 12px; } .community-group { margin: 0 0 8px; } .community-group-title { margin-top: 8px; } .community-channel { display: inline-flex; width: auto; margin: 2px; } .community-feed { padding: 15px 12px; } .community-head { align-items: center; } .community-manager-group-head, .community-manager-channel, .community-move-form { align-items: stretch; flex-direction: column; } }
.major-work-section { margin-top: 18px; }
.major-work-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.major-work-toolbar h3 { margin: 0; font-size: 18px; }
.major-work-toolbar p { margin: 5px 0 0; color: #667085; font-size: 13px; }
.major-work-filters { display: flex; gap: 8px; }
.major-work-filters select { border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; color: #344054; padding: 8px 28px 8px 10px; }
.major-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.major-work-list { overflow: hidden; border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; }
.major-work-list-head, .major-work-list-row { display: grid; grid-template-columns: 130px 80px minmax(240px, 1fr) 120px 110px; align-items: center; gap: 12px; padding: 10px 14px; }
.major-work-list-head { background: #f5f7fa; color: #667085; font-size: 12px; font-weight: 700; }
.major-work-list-row { min-height: 44px; border-top: 1px solid #edf0f4; font-size: 13px; }
.major-work-list-title { min-width: 0; overflow: hidden; color: #17233b; text-overflow: ellipsis; white-space: nowrap; }
.major-work-list-author, .major-work-list-row time { overflow: hidden; color: #667085; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .major-work-list { background: #171e2b; border-color: #303a4c; }
[data-theme="dark"] .major-work-list-head { background: #1d2635; }
[data-theme="dark"] .major-work-list-row { border-color: #303a4c; }
[data-theme="dark"] .major-work-list-title { color: #e5ebf5; }
.user-company-group { margin-top: 18px; }
.user-company-group:first-of-type { margin-top: 12px; }
.user-company-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; border-bottom: 2px solid #dce5f3; padding: 0 2px 8px; }
.user-company-group-head strong { color: #173d7a; font-size: 16px; }
.user-company-group-head span { border-radius: 999px; background: #edf3ff; color: #315fae; padding: 3px 9px; font-size: 12px; font-weight: 700; }
[data-theme="dark"] .user-company-group-head { border-color: #303a4c; }
[data-theme="dark"] .user-company-group-head strong { color: #b8ceff; }
.company-fixed { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid #9cb0cf; border-radius: 7px; padding: 0 12px; color: #fff; font-weight: 700; }
.major-work-card { border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; padding: 16px; }
.major-work-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.major-work-dept { color: #2459b8; font-size: 13px; font-weight: 700; }
.major-work-type { border-radius: 999px; background: #edf3ff; color: #315fae; padding: 3px 8px; font-size: 11px; }
.major-work-card h4 { margin: 13px 0 7px; font-size: 15px; }
.major-work-card p { min-height: 44px; margin: 0; color: #344054; font-size: 13px; line-height: 1.65; }
.major-work-meta { margin-top: 13px; border-top: 1px solid #edf0f4; padding-top: 9px; color: #7a8495; font-size: 11px; }
[data-theme="dark"] .major-work-card { background: #171e2b; border-color: #303a4c; }
[data-theme="dark"] .major-work-card p { color: #c7d0df; }
[data-theme="dark"] .major-work-filters select { background: #1d2635; color: #e5ebf5; border-color: #394458; }
[data-theme="dark"] .major-work-type { background: #263b61; color: #b8ceff; }
@media (max-width: 850px) { .major-work-grid { grid-template-columns: 1fr; } }
@media (max-width: 850px) { .major-work-list-head { display: none; } .major-work-list-row { grid-template-columns: 90px 65px minmax(0, 1fr); } .major-work-list-author, .major-work-list-row time { display: none; } }
@media (max-width: 640px) { .major-work-toolbar { align-items: stretch; flex-direction: column; } .major-work-filters { flex-direction: column; } }
.metric-tabs { display: flex; gap: 4px; margin: 18px 0; border-bottom: 1px solid #dfe4ec; }
.metric-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #667085; padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.metric-tabs button.active { border-color: #2f6fed; color: #1d4ed8; }
.metric-entry-card, .metric-analysis, .metric-history { margin-top: 16px; border: 1px solid #dfe4ec; border-radius: 11px; background: #fff; padding: 20px; }
.metric-section-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.metric-section-head h3, .metric-history h3 { margin: 0; font-size: 18px; }
.metric-section-head p { margin: 5px 0 0; color: #667085; font-size: 13px; }
.metric-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.metric-form-grid label, .metric-form-wide label { color: #475467; font-size: 12px; font-weight: 700; }
.metric-form-grid input, .metric-form-wide textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; color: #1f2937; padding: 10px; font: inherit; }
.metric-form-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 14px; }
.metric-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.metric-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.metric-summary-card { border: 1px solid #e1e6ee; border-radius: 9px; background: #f8fafc; padding: 15px; }
.metric-summary-card span, .metric-summary-card small { display: block; color: #667085; font-size: 12px; }
.metric-summary-card strong { display: block; margin: 8px 0 5px; color: #172b4d; font-size: 25px; }
.metric-summary-card.primary { border-left: 4px solid #2f6fed; }.metric-summary-card.warning { border-left: 4px solid #f59e0b; }.metric-summary-card.danger { border-left: 4px solid #ef4444; }
.metric-table-wrap { margin-top: 18px; overflow-x: auto; }.metric-table { width: 100%; border-collapse: collapse; font-size: 13px; }.metric-table th, .metric-table td { border-bottom: 1px solid #e7ebf1; padding: 10px; text-align: right; white-space: nowrap; }.metric-table th:first-child, .metric-table td:first-child { text-align: left; }
.metric-trend-chart { margin-top: 18px; border: 1px solid #e1e6ee; border-radius: 10px; background: #fbfcfe; padding: 16px 16px 8px; }
.metric-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.metric-chart-head strong, .metric-chart-head span { display: block; }.metric-chart-head span { margin-top: 4px; color: #667085; font-size: 12px; }
.metric-chart-legend { display: flex; gap: 14px; white-space: nowrap; }.metric-chart-legend span { position: relative; padding-left: 17px; }
.metric-chart-legend span::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 3px; background: #2f6fed; }
.metric-chart-legend .inbound::before { border-radius: 50%; background: #f59e0b; }
.metric-trend-chart svg { display: block; width: 100%; min-width: 620px; height: auto; overflow: visible; }.metric-trend-chart { overflow-x: auto; }
.metric-chart-grid { stroke: #e5eaf1; stroke-width: 1; }.metric-chart-axis { fill: #667085; font-size: 11px; }.metric-chart-bar { fill: #2f6fed; opacity: .82; }.metric-chart-line { fill: none; stroke: #f59e0b; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }.metric-chart-point { fill: #f59e0b; stroke: #fff; stroke-width: 1.5; }.metric-chart-empty { margin-top: 18px; padding: 34px; border: 1px dashed #d8dee8; border-radius: 9px; color: #667085; text-align: center; }
.major-work-community-link { width: 100%; padding: 0; border: 0; background: transparent; color: #172b4d; font: inherit; font-weight: 700; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.major-work-community-link:hover, .major-work-community-link:focus-visible { color: #2f6fed; text-decoration: underline; }
.community-post.is-dashboard-focus { border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47,111,237,.16); animation: dashboard-post-focus 1.6s ease-out; }
@keyframes dashboard-post-focus { from { background: #eaf1ff; } to { background: #fff; } }
[data-theme="dark"] .major-work-community-link { color: #e5ebf5; } [data-theme="dark"] .major-work-community-link:hover { color: #8fb5ff; } [data-theme="dark"] .community-post.is-dashboard-focus { box-shadow: 0 0 0 3px rgba(92,142,255,.25); }
[data-theme="dark"] .metric-trend-chart { background: #1d2635; border-color: #394458; } [data-theme="dark"] .metric-chart-grid { stroke: #394458; } [data-theme="dark"] .metric-chart-axis { fill: #aeb9ca; }
@media (max-width: 640px) { .metric-chart-head { flex-direction: column; }.metric-chart-legend { width: 100%; } }
.metric-day-card { margin-top: 11px; border: 1px solid #e1e6ee; border-radius: 9px; padding: 14px; }.metric-day-card > div:first-child { display: flex; gap: 12px; align-items: center; }.metric-day-card span { color: #667085; font-size: 12px; }.metric-day-card p { margin: 9px 0 0; color: #344054; font-size: 13px; }.metric-day-actions { float: right; margin-top: -24px; }.metric-day-actions button { border: 0; background: transparent; color: #2563eb; cursor: pointer; }.metric-day-actions button.danger { color: #b42318; }
[data-theme="dark"] .metric-entry-card, [data-theme="dark"] .metric-analysis, [data-theme="dark"] .metric-history { background: #171e2b; border-color: #303a4c; } [data-theme="dark"] .metric-form-grid input, [data-theme="dark"] .metric-form-wide textarea, [data-theme="dark"] .metric-summary-card { background: #1d2635; color: #e5ebf5; border-color: #394458; } [data-theme="dark"] .metric-summary-card strong, [data-theme="dark"] .metric-day-card p { color: #e5ebf5; }
@media (max-width: 1000px) { .metric-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .metric-form-grid, .metric-form-wide, .metric-summary-grid { grid-template-columns: 1fr; } .metric-tabs button { flex: 1; padding: 10px 6px; } .metric-day-card > div:first-child { align-items: flex-start; flex-direction: column; }.metric-day-actions { float: none; margin: 10px 0 0; } }
.consolidated-metrics { margin-top: 22px; border: 1px solid #dfe4ec; border-radius: 11px; background: #fff; padding: 22px; }
.consolidated-metrics-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.consolidated-metrics-head h2 { margin: 0; font-size: 20px; }.consolidated-metrics-head p { margin: 5px 0 0; color: #667085; font-size: 13px; }
.metric-detail-row td { background: #f8fafc; color: #475467; text-align: left !important; white-space: normal !important; line-height: 1.6; }
[data-theme="dark"] .consolidated-metrics { background: #171e2b; border-color: #303a4c; } [data-theme="dark"] .metric-detail-row td { background: #1d2635; color: #c7d0df; }
@media (max-width: 640px) { .consolidated-metrics-head { flex-direction: column; } }
.dashboard-metrics { margin-top: 18px; }.metric-period-buttons { display: flex; gap: 6px; }
.claim-fieldset { margin-top: 18px; border: 1px solid #d7dfeb; border-radius: 9px; padding: 16px; }.claim-fieldset legend { padding: 0 7px; color: #172b4d; font-weight: 800; }.claim-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.claim-form-grid label, .claim-form-wide label { color: #475467; font-size: 12px; font-weight: 700; }.claim-form-grid input, .claim-form-grid select, .claim-form-wide textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; color: #1f2937; padding: 9px; font: inherit; }.claim-form-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }.claim-add-btn { margin-top: 12px; }.claim-draft { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; border: 1px solid #e0e6ef; border-radius: 7px; background: #f8fafc; padding: 10px; }.claim-draft strong, .claim-draft span { display: block; }.claim-draft span { margin-top: 3px; color: #667085; font-size: 12px; }.claim-draft button { border: 0; background: transparent; color: #b42318; cursor: pointer; }.claim-summary { margin-top: 16px; border-top: 1px solid #e4e9f0; padding-top: 20px; }.claim-table td:nth-child(5) { min-width: 220px; white-space: normal; text-align: left; }.claim-status { border-radius: 999px; padding: 3px 8px; font-size: 11px; }.claim-status.done { background: #dcfce7; color: #166534; }.claim-status.open { background: #fef3c7; color: #92400e; }.dashboard-claim-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }.dashboard-claim-strip > div { border: 1px solid #f1d4d1; border-radius: 9px; background: #fff8f7; padding: 13px; }.dashboard-claim-strip span, .dashboard-claim-strip small { display: block; color: #7a5551; font-size: 11px; }.dashboard-claim-strip strong { display: block; margin: 5px 0; color: #a52a21; font-size: 20px; }
[data-theme="dark"] .claim-fieldset, [data-theme="dark"] .claim-draft { border-color: #394458; } [data-theme="dark"] .claim-form-grid input, [data-theme="dark"] .claim-form-grid select, [data-theme="dark"] .claim-form-wide textarea, [data-theme="dark"] .claim-draft { background: #1d2635; color: #e5ebf5; } [data-theme="dark"] .dashboard-claim-strip > div { background: #2b2022; border-color: #57363a; }
@media (max-width: 640px) { .metric-period-buttons { width: 100%; }.metric-period-buttons .btn { flex: 1; } }
@media (max-width: 900px) { .claim-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .claim-form-grid, .claim-form-wide, .dashboard-claim-strip { grid-template-columns: 1fr; } }
.metric-entry-card .claim-fieldset { display: none; }
.claim-kpi-row { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px; }.claim-kpi-row>div { border:1px solid #dfe4ec;border-radius:9px;background:#fff;padding:15px; }.claim-kpi-row span,.claim-kpi-row strong { display:block; }.claim-kpi-row span { color:#667085;font-size:12px; }.claim-kpi-row strong { margin-top:7px;font-size:22px; }.claim-list-head,.claim-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }.claim-list-head select { border:1px solid #d0d5dd;border-radius:7px;padding:8px;background:#fff; }.claim-card { margin-top:12px;border:1px solid #dfe4ec;border-radius:9px;padding:15px; }.claim-card-head strong,.claim-card-head small { display:block;margin-top:6px; }.claim-card-head small,.claim-card footer { color:#667085;font-size:12px; }.claim-card-head button { border:0;background:transparent;color:#2563eb;cursor:pointer; }.claim-card-head button.danger { color:#b42318; }.claim-card p { color:#344054;font-size:13px;line-height:1.6; }.claim-card footer { border-top:1px solid #edf0f4;padding-top:9px; }
[data-theme="dark"] .claim-kpi-row>div,[data-theme="dark"] .claim-card { background:#171e2b;border-color:#303a4c; } [data-theme="dark"] .claim-card p { color:#c7d0df; }
.claim-result-count { margin: 5px 0 0; color: #667085; font-size: 12px; }
.claim-search-toggle { flex: 0 0 auto; }
.claim-search-panel[hidden] { display: none; }
.claim-search-panel { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid #dfe4ec; border-radius: 9px; background: #f8fafc; }
.claim-search-panel label span { display: block; margin-bottom: 5px; color: #667085; font-size: 11px; font-weight: 700; }
.claim-search-panel input, .claim-search-panel select { width: 100%; min-height: 38px; border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; padding: 8px; color: #1f2937; }
.claim-search-actions { display: flex; align-items: flex-end; gap: 7px; }
[data-theme="dark"] .claim-search-panel { border-color: #303a4c; background: #1d2635; }
[data-theme="dark"] .claim-search-panel input, [data-theme="dark"] .claim-search-panel select { border-color: #475467; background: #171e2b; color: #e5ebf5; }
@media(max-width:1000px){.claim-search-panel{grid-template-columns:repeat(2,minmax(0,1fr));}.claim-search-query{grid-column:1/-1;}}
@media(max-width:640px){.claim-search-panel{grid-template-columns:1fr;}.claim-search-query{grid-column:auto;}.claim-search-actions{align-items:stretch;}}
@media(max-width:640px){.claim-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}.claim-list-head,.claim-card-head{flex-direction:column;}}
.migration-kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 10px; }.migration-kpis>div { border:1px solid #dfe4ec;border-radius:9px;background:#fff;padding:14px; }.migration-kpis span,.migration-kpis strong { display:block; }.migration-kpis span { color:#667085;font-size:12px; }.migration-kpis strong { margin-top:6px;font-size:21px; }.migration-progress { height:7px;border-radius:999px;background:#e5eaf1;overflow:hidden; }.migration-progress span { display:block;height:100%;background:#2f6fed;transition:width .2s; }.migration-section { margin-top:18px;border:1px solid #dfe4ec;border-radius:10px;background:#fff;padding:18px; }.migration-section-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px; }.migration-section-head h3 { margin:0; }.migration-section-head p { margin:5px 0 0;color:#667085;font-size:12px; }.migration-post { border-top:1px solid #edf0f4; }.migration-post-head { display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;border:0;background:transparent;padding:13px 4px;text-align:left;cursor:pointer; }.migration-post-head span,.migration-post-head strong { display:block; }.migration-post-head span { color:#667085;font-size:11px; }.migration-post-head strong { margin-top:5px; }.migration-post-head>div:last-child { display:flex;gap:12px;color:#667085;font-size:11px; }.migration-post-body { border-radius:8px;background:#f8fafc;padding:15px;margin-bottom:12px; }.migration-attachments { display:flex;flex-wrap:wrap;gap:7px;margin-top:12px; }.migration-attachments h4 { width:100%;margin:0; }.migration-attachments a { border:1px solid #dfe4ec;border-radius:6px;background:#fff;padding:7px 9px;color:#2459b8;text-decoration:none;font-size:12px; }.migration-media-note { margin-top:10px;color:#667085;font-size:12px; }.migration-comment { display:grid;grid-template-columns:minmax(240px,1fr) minmax(260px,1fr) auto;align-items:end;gap:12px;border-top:1px solid #edf0f4;padding:13px 4px; }.migration-comment.verified { border-left:3px solid #22a06b;padding-left:10px;background:#f6fffa; }.migration-comment-copy span { color:#667085;font-size:11px; }.migration-comment-copy p { margin:5px 0 0;line-height:1.55;font-size:13px; }.migration-comment label { color:#667085;font-size:11px; }.migration-comment select { display:block;width:100%;margin-top:5px;border:1px solid #d0d5dd;border-radius:7px;background:#fff;padding:9px; }.migration-final { position:sticky;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;border:1px solid #b8cdf8;border-radius:10px;background:#f4f7ff;padding:14px 18px;box-shadow:0 4px 14px rgba(16,24,40,.1); }.migration-final strong,.migration-final span { display:block; }.migration-final span { margin-top:3px;color:#667085;font-size:12px; }
[data-theme="dark"] .migration-kpis>div,[data-theme="dark"] .migration-section { background:#171e2b;border-color:#303a4c; } [data-theme="dark"] .migration-post-body { background:#1d2635; } [data-theme="dark"] .migration-comment.verified { background:#172820; } [data-theme="dark"] .migration-final { background:#1b2945;border-color:#34568f; }
@media(max-width:800px){.migration-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}.migration-comment{grid-template-columns:1fr;}.migration-section-head,.migration-final{align-items:stretch;flex-direction:column;}}
.community-category { margin: 0 0 20px; }
.community-category-title { display: flex; width: calc(100% - 12px); align-items: center; justify-content: space-between; margin: 0 6px 10px; padding: 5px 4px; border: 0; background: transparent; color: #17233b; font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
.community-category-title b, .community-group-title b { color: #7b8798; font-size: 9px; }
.community-category.is-collapsed .community-category-content, .community-group.is-collapsed .community-group-content { display: none; }
.community-group-title { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; background: transparent; text-align: left; cursor: pointer; }
.community-category .community-group { margin-left: 8px; padding-left: 10px; border-left: 2px solid #d8e0ec; }
.community-manager-category { margin-top: 16px; padding: 14px; border: 1px solid #cbd6e6; border-radius: 10px; background: #f8faff; }
.community-manager-category-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.community-manager-category-head > strong { color: #173d7a; font-size: 16px; }
.community-manager-category-head > div { display: flex; flex-wrap: wrap; gap: 6px; }
.migration-final-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.community-attachment a { color: #165dcc; text-decoration: none; }
.community-attachment a:hover { text-decoration: underline; }
.community-attachment small { color: #718096; }
.community-post-body img { display: block; max-width: min(100%, 720px); height: auto; margin: 12px 0; border: 1px solid #dce3ee; border-radius: 8px; }
.community-post-body table { max-width: 100%; border-collapse: collapse; overflow-x: auto; }
.community-post-body td, .community-post-body th { padding: 6px 8px; border: 1px solid #dce3ee; }
.community-post-body a, .community-comment-body a { color: #165dcc; }
.community-comment-body { margin-top: 5px; white-space: normal; }
.community-comment-attachment { display: block; margin-top: 6px; color: #165dcc; text-decoration: none; }
.community-search { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid #d7deea; border-radius: 10px; background: #fff; }
.community-search > span { color: #667085; font-size: 22px; }
.community-search input { flex: 1; min-width: 120px; padding: 7px 4px; border: 0; outline: 0; background: transparent; font-size: 14px; }
.community-search-result { margin: 8px 2px 0; color: #667085; font-size: 13px; }
.community-post-body.is-collapsed { position: relative; max-height: 260px; overflow: hidden; }
.community-post-body.is-collapsed::after { position: absolute; right: 0; bottom: 0; left: 0; height: 80px; background: linear-gradient(transparent, #fff); content: ""; pointer-events: none; }
.community-post-toggle { margin: 8px 0 0; padding: 4px 0; border: 0; background: transparent; color: #165dcc; font-weight: 700; cursor: pointer; }
[data-theme="dark"] .community-search { border-color: #344054; background: #18202c; }
[data-theme="dark"] .community-search input { color: #e5eaf2; }
[data-theme="dark"] .community-post-body.is-collapsed::after { background: linear-gradient(transparent, #18202c); }
@media (max-width: 640px) { .community-search { flex-wrap: wrap; } .community-search input { flex-basis: calc(100% - 40px); } }
.menu-header > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.menu-header > span:first-child::before { display: inline-grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: #667085; font-size: 15px; font-weight: 400; line-height: 1; }
#homeNavBtn > span::before { content: "▦"; }
#emergencyNavBtn > span::before { color: #d92d20; content: "!"; font-weight: 900; }
#consolidatedNavBtn > span::before { content: "▤"; }
#communityNavBtn > span::before { content: "◎"; }
#accountNavBtn > span::before { content: "○"; }
#deptAdminNavBtn > span::before { content: "⌂"; }
#userAdminNavBtn > span::before { content: "♙"; }
#communityAdminNavBtn > span::before { content: "⚙"; }
#teamsMigrationNavBtn > span::before { content: "⇄"; }
.menu-header[data-report-type="daily"] > span:first-child::before { content: "☷"; }
.menu-header[data-report-type="weekly"] > span:first-child::before { content: "▣"; }
.menu-header[data-report-type="monthly"] > span:first-child::before { content: "▥"; }
.menu-header[data-report-type="metrics"] > span:first-child::before { content: "⌁"; }
.menu-header.active-parent > span:first-child::before { color: currentColor; }
.submenu-btn::before { margin-right: 8px; color: #98a2b3; content: "–"; }
.emergency-dashboard, .emergency-compose, .emergency-card { margin-top: 16px; border: 1px solid #f0c9c5; border-radius: 11px; background: #fff; padding: 18px; }
.emergency-dashboard-head, .emergency-card header, .emergency-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.emergency-dashboard-head h3, .emergency-compose h3, .emergency-list-head h3, .emergency-card h3 { margin: 0; }
.emergency-dashboard-title { display: flex; align-items: center; gap: 12px; }
.emergency-dashboard-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 9px; background: #fee4e2; color: #b42318; font-size: 18px; font-weight: 900; }
.emergency-dashboard-head p { margin: 5px 0 0; color: #667085; font-size: 13px; }
.emergency-dashboard-summary { display: flex; gap: 16px; margin: 14px 0 8px; color: #475467; }
.emergency-dashboard.is-empty { padding: 16px 18px; }
.emergency-dashboard.is-empty .emergency-dashboard-head { align-items: center; }
.emergency-dashboard.is-empty .emergency-dashboard-summary { margin: 10px 0 0 46px; }
.emergency-dashboard .empty-state { min-height: 0; padding: 16px 0 2px 46px; text-align: left; }
.emergency-dashboard-summary .urgent { color: #b42318; }
.emergency-dashboard-row { display: grid; width: 100%; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 3px; border: 0; border-top: 1px solid #edf0f4; background: transparent; text-align: left; cursor: pointer; }
.emergency-dashboard-row small { color: #667085; }
.emergency-priority, .emergency-status { display: inline-block; margin-right: 6px; border-radius: 999px; background: #eef2f7; padding: 3px 8px; color: #475467; font-size: 11px; font-weight: 800; }
.emergency-priority.urgent { background: #fee4e2; color: #b42318; }
.emergency-form-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 9px; margin: 12px 0 9px; }
.emergency-form-row input, .emergency-form-row select, .emergency-compose textarea, .emergency-comments input { width: 100%; border: 1px solid #d0d5dd; border-radius: 7px; padding: 9px; font: inherit; }
.emergency-list-head { margin-top: 22px; }.emergency-list-head span { color: #667085; font-size: 13px; }
.emergency-card.is-done { opacity: .68; border-color: #dfe4ec; }.emergency-card > p { line-height: 1.65; }
.emergency-comments { margin-top: 14px; border-top: 1px solid #edf0f4; padding-top: 10px; }.emergency-comments > div { padding: 8px 0; }.emergency-comments span { margin-left: 8px; color: #667085; font-size: 11px; }.emergency-comments p { margin: 4px 0; }.emergency-comments form { display: flex; gap: 8px; margin-top: 8px; }
[data-theme="dark"] .emergency-dashboard, [data-theme="dark"] .emergency-compose, [data-theme="dark"] .emergency-card { border-color: #57363a; background: #171e2b; }
@media(max-width:640px){.emergency-form-row{grid-template-columns:1fr}.emergency-dashboard-row{grid-template-columns:auto 1fr}.emergency-dashboard-row small{grid-column:2}.emergency-card header{flex-direction:column}.emergency-comments form{align-items:stretch;flex-direction:column}}
.emergency-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dashboard-order-manager { margin: 0 0 14px; border: 1px solid #d7deea; border-radius: 9px; background: #fff; padding: 10px 14px; }
.dashboard-order-manager summary { color: #344054; font-weight: 800; cursor: pointer; }
.dashboard-order-manager p { margin: 8px 0; color: #667085; font-size: 12px; }
.dashboard-order-manager > div { display: flex; flex-wrap: wrap; gap: 7px; }
.dashboard-order-manager span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e0e6ef; border-radius: 7px; padding: 6px 8px; }
.dashboard-order-manager span b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #eef4ff; color: #175cd3; font-size: 11px; }
.dashboard-order-manager button { border: 0; background: transparent; color: #175cd3; cursor: pointer; }
.dashboard-order-manager button:disabled { color: #c8ced8; cursor: default; }
.audit-panel { border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; padding: 18px; }
.audit-panel form { display: grid; grid-template-columns: 180px 150px 1fr auto; gap: 9px; }
.audit-panel select, .audit-panel input { min-height: 38px; border: 1px solid #d0d5dd; border-radius: 7px; padding: 8px; }
.audit-table-wrap { overflow-x: auto; }.audit-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.audit-table th { background: #14213d; color: #fff; text-align: left; }.audit-table th, .audit-table td { padding: 10px; border-bottom: 1px solid #e2e8f0; }
.audit-action { border-radius: 5px; padding: 3px 7px; font-weight: 800; }.audit-action.create { background: #dff3ff; color: #0369a1; }.audit-action.update { background: #fff1cc; color: #92400e; }.audit-action.delete { background: #fee4e2; color: #b42318; }
#auditNavBtn > span::before { content: "≣"; }
[data-theme="dark"] .dashboard-order-manager, [data-theme="dark"] .audit-panel { border-color: #303a4c; background: #171e2b; }
@media(max-width:760px){.audit-panel form{grid-template-columns:1fr}.emergency-card-actions{justify-content:flex-start}}
.emergency-dashboard + .dashboard-order-manager, .emergency-dashboard + .dashboard-tab-bar { margin-top: 28px; }
.dashboard-order-manager + .emergency-dashboard { margin-top: 18px; margin-bottom: 28px; }
.community-priority-field { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: #475467; font-size: 12px; font-weight: 700; }
.community-priority-field select { min-width: 100px; border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; padding: 7px 9px; }
.community-priority { display: inline-block; margin: 0 0 10px; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800; }.community-priority.urgent, .major-work-type.urgent { background: #fee4e2; color: #b42318; }.community-priority.important, .major-work-type.important { background: #fff1cc; color: #92400e; }
.dashboard-work-limit { display: inline-flex; align-items: center; gap: 5px; color: #667085; font-size: 12px; }.dashboard-work-limit select { min-width: 62px; }
[data-theme="dark"] .community-priority-field select { border-color: #475467; background: #171e2b; color: #e5ebf5; }
.community-link-preview {
  display: flex;
  max-width: 620px;
  margin: 12px 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border: 1px solid #dce3ed;
  border-radius: 10px;
  background: #fff;
}
.community-link-preview img { width: 128px; min-height: 88px; object-fit: cover; background: #eef2f7; }
.community-link-preview span { display: flex; min-width: 0; padding: 12px; flex-direction: column; gap: 5px; }
.community-link-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-link-preview small { display: -webkit-box; overflow: hidden; color: #55657a; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.community-link-preview em { color: #7a8798; font-size: 12px; font-style: normal; }
.metric-comments { margin-top: 14px; border-top: 1px solid #edf0f4; padding-top: 10px; }
.metric-comments > div { padding: 7px 0; }
.metric-comments span { margin-left: 8px; color: #667085; font-size: 11px; }
.metric-comments p { margin: 4px 0; }
.metric-comments form { display: flex; gap: 8px; margin-top: 8px; }
.metric-comments input { flex: 1; min-width: 0; border: 1px solid #d0d5dd; border-radius: 7px; padding: 9px 10px; }
@media (max-width: 640px) { .metric-comments form { align-items: stretch; flex-direction: column; } }