: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;
}

.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);
}

.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);
}

.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;
}

.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;
  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;
}

/* 읽기 전용 일일보고 표의 날짜류 칸 — 열을 좁혀도(displayWidth) 날짜가 하이픈에서 줄바꿈되지 않게 한다. */
.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;
}

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

.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;
}

@media print {
  .attachment-thumb {
    break-inside: avoid;
  }
}

.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;
  padding: 16px 18px;
}

.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;
  color: var(--text-main);
  min-height: 120px;
}

.content-section-body {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  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;
}

/* 본문 안 인라인 파일 링크([[이름]] 마커) — 해당 단락 위치에서 새 탭으로 연다. 파일명이 길면
   본문을 방해하므로 본문보다 작은 글자의 칩(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;
}

.row-table-wrap {
  overflow-x: auto;
}

.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 9px;
  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가 따라잡기 전 순간적으로 스크롤바가 깜빡이는 것을 막는다.
   */
.row-form-table td textarea {
  min-height: 64px;
  line-height: 1.5;
  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-form-table th:last-child,
.row-form-table td:last-child {
  text-align: center;
  white-space: nowrap;
}

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

.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으로 줄바꿈된다. */
.history-toolbar {
  padding: 12px 16px;
}

.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;
}

.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);
}

/* 미완료 건수 요약(왼쪽) + 부서 필터(오른쪽 끝)를 한 줄에 배치 */
.daily-status-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

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

/* CEO 지시사항 현황의 상태 필터(미완료 전체/진행중/완료) — 부서 탭 아래, 표 위의 작은 알약 버튼
   그룹. 건수 배지는 부서 탭과 같은 .note-dept-count를 재사용한다. */
.daily-status-state-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.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;
}

/* 중요도 배지 — 색 점 + 라벨. 배경/텍스트 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;
  flex-wrap: wrap;
  gap: 4px 6px;
  width: 100%;
  min-width: 0;
}

.progress-track {
  flex: 1 1 28px;
  min-width: 28px;
  height: 8px;
  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: 12px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  /* 라벨 폭을 최장값("100%") 기준으로 고정 — 라벨이 flex 아이템이라 글자 수("0%" vs "100%")에
     따라 폭이 달라지면 남는 공간을 채우는 트랙 길이가 값마다 들쭉날쭉해진다. */
  flex: 0 0 auto;
  min-width: 34px;
  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 {
  display: flex;
  gap: 8px;
}

.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);
}

.doc-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 40px;
}

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

.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;
}

@media print {
  .app-header, .sidebar, .content-header, .consolidated-toolbar,
  .theme-toggle-fab, .back-to-top-fab {
    display: none !important;
  }
  .content {
    padding: 0;
    max-width: 100%;
  }
  .doc-sheet {
    border: none;
    padding: 0;
  }
  /* 화면에서 접어둔 부서도 인쇄물에는 항상 전체 내용이 나오도록 강제로 펼친다. */
  .doc-section-toggle {
    display: none !important;
  }
  .doc-section.collapsed .doc-section-body {
    display: block !important;
  }
  /* 모달(확인/노트 편집·열람/일일보고 팝업)이 열린 채 Ctrl+P로 인쇄해도 스크림과 모달 카드가
     인쇄물 위에 겹쳐 찍히지 않도록 숨긴다. */
  .modal-overlay {
    display: none !important;
  }
  /* 본문 칸에 첨부한 파일 칩([[파일명]] 마커의 링크)은 인쇄물에서 숨긴다 — 종이에서는 링크를
     열 수 없어 파일명 텍스트만 본문 사이에 남아 어지럽히기 때문(인라인 이미지는 그대로 인쇄). */
  .content-inline-file {
    display: none !important;
  }
  /* 부서 경계에서 페이지를 나눈다 — 앞 부서의 마지막 내용이 끝나면 다음 부서는 항상 새 페이지에서
     시작한다(첫 부서 앞에서는 나누지 않도록 인접 형제에만 적용, 한 부서가 한 페이지를 넘는 경우는
     그대로 이어서 인쇄). page-break-before는 break-before를 모르는 구형 브라우저용 폴백. */
  .doc-section + .doc-section {
    break-before: page;
    page-break-before: always;
  }
  /* 진행률 미니 진행바와 중요도/상태 배지는 전부 배경색·배경 그라데이션으로 그려지는데, 브라우저
     기본 인쇄 설정("배경 그래픽" 꺼짐)에서는 배경이 출력되지 않아 빈 트랙/투명 배지로 깨져 보인다 —
     이 요소들만 배경 인쇄를 강제한다. */
  .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);
}

/* 부서별 주요일정 · 이슈 티켓(대시보드) */
/* 세로 스택 — 위쪽 행(캘린더 + 보고 일정 패널) → 부서별 주요일정 목록(아래). 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);
}

.report-schedule-header {
  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: 8px;
}

/* 보고 일정 패널 페이지네이션 — 페이지당 항목 수 제한(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);
}

.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: 8px 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;
}

.rs-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rs-dept {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.rs-inst {
  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-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;
}

.note-date-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 12px;
}

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

/* 선택 날짜 항목의 부서 탭 바 — 엑셀 시트 탭처럼 아래 경계선 위에 탭이 올라앉은 형태. 부서가
   늘어나도 목록이 아래로 길어지지 않고 탭이 옆으로만 늘어나며, 넘치면 탭 바 자체가 가로 스크롤된다
   (그 날짜에 항목이 있는 부서 + 편집 가능 부서만 탭으로 노출 — renderNoteDateList 참고). */
.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);
}

/* 대표이사 탭은 칸 헤더(.note-dept-column--ceo)와 같은 강조색으로 구분한다. */
.note-tab--ceo,
.note-tab--ceo.active {
  color: var(--accent);
}

/* 탭 패널의 티켓 목록 — 한 부서만 전체 폭을 쓰므로 티켓을 그리드로 여러 개씩 나란히 배치한다
   (기존 세로 목록의 max-height/스크롤은 .note-ticket-list에서 그대로 상속). */
.note-tab-panel .note-ticket-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}

.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;
}

.note-ticket--empty {
  border-style: dashed;
  background: transparent;
  color: var(--text-sub);
  font-size: 13px;
  text-align: center;
  padding: 20px 16px;
}

.note-ticket--empty:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

/* 외근(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);
}

/* 부서 칸 헤더의 "+ 추가" 버튼 — 오른쪽 끝으로 밀어 배치 */
.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;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

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

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

  .logo {
    font-size: 15px;
  }

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

  .header-right {
    gap: 8px;
  }

  .user-badge {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 사이드바 → 왼쪽 서랍. 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%;
  }

  /* 넓은 행 표(주간/월간 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;
  }

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

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

  /* 모달 — 내용이 화면보다 길면 모달 안에서 스크롤하고, 편집/상세 모달은 폭을 화면에 맞춘다. */
  .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;
  }
}