:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #faf7f7;
  --border: #e7e2e2;
  --text: #201a1a;
  --muted: #776d6d;
  --accent: #c8102e;
  --accent-bright: #e1252b;
  --accent-dim: #9b0c23;
  --accent-soft: #fdecee;
  /* 통계 카드 추이 막대: 오래된 달 → 이번 달 순으로 진해지는 단일 색조 (표 헤더와 같은 청회색 계열) */
  --trend-1: #e8e8ea;
  --trend-2: #d0cfd3;
  --trend-3: #aeacb3;
  --on-accent: #ffffff;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --nav-hover-bg: var(--accent-bright);
  /* 현재 페이지 표시: 배경은 옅게, 글자만 브랜드 컬러로 */
  --nav-active-bg: var(--accent-soft);
  --nav-active-border: #f6d3d8;
  --soft-grey: #efecec;
  --th-bg: #eef1f6;
  --th-text: #5a6474;
  --pill-h: 2rem;
  /* select 과 select 스킨이 함께 쓰는 화살표 */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23776d6d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

/* 페이지 이동 시 화면 전환 애니메이션 (Chrome/Edge 126+) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* View Transitions 미지원 브라우저는 진입 애니메이션만 */
@supports not (view-transition-name: none) {
  .main { animation: page-in 0.22s ease both; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .main { animation: none; }
}

* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
html, body { margin: 0; min-height: 100%; }
/* 페이지 길이에 따라 스크롤바가 생겼다 없어지며 헤더·본문이 좌우로 밀리는 것 방지 */
html { scrollbar-gutter: stable; }
body {
  font-family: "SandollGothicNeo", "산돌고딕Neo", "SandollGothicNeo1", "Apple SD Gothic Neo",
    "Pretendard Variable", "Pretendard", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a, a:hover { color: var(--accent); text-decoration: none; }
.main a:hover:not(.btn) { opacity: 0.72; }

.topbar {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 2.5rem;
  padding-block: 0.7rem;
  padding-inline: max(2rem, calc((100% - 1400px) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(27, 37, 25, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  view-transition-name: topbar;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: end;
}
.brand {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent) !important;
  transition: transform 0.15s ease;
}
.brand:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.globalsearch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(200px, 100%);
  min-height: var(--pill-h);
  justify-self: end;
  padding: 0 0.5rem 0 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.globalsearch:focus-within {
  border-color: var(--nav-hover-bg);
  box-shadow: 0 0 0 1.5px var(--nav-hover-bg);
}
.globalsearch input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text);
}
.globalsearch input:focus { outline: none; }
.globalsearch-icon {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.globalsearch-icon:hover { color: var(--text); }
.globalsearch-key {
  flex: none;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}
.nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.1rem;
  justify-self: start;
}
.nav-util { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; }
.nav a, .nav a:hover,
.nav-util a, .nav-util a:hover { text-decoration: none; }
.nav a, .nav-util a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pill-h);
  white-space: nowrap;
  padding: 0 0.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-util a {
  padding: 0 0.85rem;
  border-color: var(--border);
  background: var(--surface);
}
.nav a:hover, .nav-util a:hover {
  background: var(--nav-hover-bg);
  border-color: var(--nav-hover-bg);
  color: #ffffff;
}
.nav-util .nav-account:hover {
  background: var(--text);
  border-color: var(--text);
  color: #ffffff;
}
.nav-link { color: var(--muted); font-size: 1rem; letter-spacing: 0.01em; }
.nav-user {
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
}
.nav-util .nav-user {
  background: var(--th-bg);
  border-color: var(--th-bg);
  color: var(--th-text);
}
.nav a.is-active, .nav-util a.is-active {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  color: var(--accent);
  font-weight: 600;
}

.password-page {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.main:has(.password-page) .page-title { text-align: center; }
.password-page .flash { text-align: center; }
.password-page .card {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
.password-page .btn { display: block; width: 100%; }

.main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.page-title { font-size: 1.5rem; margin: 0 0 1.25rem; font-weight: 700; }

.footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(27, 37, 25, 0.04);
}
.card h2 { margin: 0 0 0.75rem; font-size: 1.18rem; }
.card:has(> .table-flush) { overflow: hidden; }
.card .table-flush {
  width: calc(100% + 2.5rem);
  margin: 0 -1.25rem -1.25rem;
}
.card .table-flush th:first-child,
.card .table-flush td:first-child { padding-left: 1.25rem; }
.card .table-flush th:last-child,
.card .table-flush td:last-child { padding-right: 1.25rem; }
/* 제목(h2)과 표 사이를 구분선으로 나눈다 */
.card .table-flush tr:first-child > * { border-top: 1px solid var(--border); }
/* 마지막 행 밑줄이 카드 바닥선과 나란히 두 줄로 보이는 것을 막는다.
   thead 없는 표(table-kv)는 아래 :has(thead) 규칙이 걸리지 않아 여기서 처리한다 */
.card .table-flush tr:last-child > * { border-bottom: none; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

/* 자료실 정렬 pill — 상단 내비게이션 pill과 같은 모양 언어를 쓴다 */
.sort-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.sort-pills-label {
  color: var(--muted);
  font-size: 0.85rem;
  margin-right: 0.15rem;
}
.sort-pill,
.sort-pill:hover {
  text-decoration: none;
}
.sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--pill-h);
  padding: 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sort-pill:hover {
  color: var(--text);
  border-color: var(--nav-active-border);
}
.sort-pill.is-active {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  color: var(--accent);
  font-weight: 600;
}
.sort-pill .sort-arrow {
  font-size: 0.62rem;
  line-height: 1;
}

/* 자료실 카드 그리드 — 카드 전체가 상세로 가는 링크다 */
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.res-card,
.res-card:hover {
  text-decoration: none;
}
.res-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(27, 37, 25, 0.04);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.res-card:hover {
  border-color: var(--nav-active-border);
  box-shadow: 0 4px 12px rgba(27, 37, 25, 0.08);
  transform: translateY(-2px);
}
.res-card:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
/* 배지가 카드 폭만큼 늘어나지 않게 */
.res-card-cat { align-self: flex-start; }
.res-card-title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  /* 제목이 길어도 카드 높이가 들쭉날쭉해지지 않도록 두 줄에서 자른다 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.res-card-file {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 작성자·업로드일자 줄은 카드 높이가 달라도 항상 바닥에 붙는다 */
.res-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
}
.res-card-author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-card-date { flex: none; }
.res-empty {
  padding: 2.5rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

table.m { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.m th, table.m td { text-align: left; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.m th { color: var(--th-text); font-weight: 600; background: var(--th-bg); }

table.m:has(thead) thead th {
  padding-block: 0.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
}
table.m:has(thead) tbody td {
  padding: 0.7rem 0.65rem;
  vertical-align: middle;
  transition: background-color 0.12s ease;
}
table.m:has(thead) tbody tr:last-child td { border-bottom: none; }
table.m:has(thead) tbody tr:hover td { background: var(--surface-2); }

/* colgroup 폭을 그대로 따르는 표 */
table.m.table-fixed { table-layout: fixed; }
table.m.table-fixed td { overflow-wrap: anywhere; }

/* 대시보드 '최근 변경 사항' — 제목과 표를 구분선으로 나누고 행 간격도 여유 있게 */
table.m.table-flush.table-fixed thead th { border-top: 1px solid var(--border); }
table.m.table-flush.table-fixed tbody td { padding-block: 0.95rem; }

table.m td.nowrap, table.m th.nowrap { white-space: nowrap; }

/* 표 맨 아래 '더 보기 / 접기' 토글 행 */
table.m tbody tr.more-row td,
.card .table-flush tbody tr.more-row td { padding: 0; }
table.m tbody tr.more-row:hover td { background: transparent; }
table.m .more-toggle {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
table.m .more-toggle:hover { background: var(--surface-2); color: var(--accent); }
table.m .more-toggle:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}
table.m.is-collapsed tbody tr[data-extra] { display: none; }

/* 표시할 행이 없을 때의 안내 행 */
table.m .table-empty {
  padding: 1.6rem 0.65rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

/* 행 전체가 상세 페이지 링크로 동작하는 표 */
table.m tbody tr.row-link { cursor: pointer; }
table.m tbody tr.row-link:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}

/* 좌측 라벨 + 값 형태의 상세 표. 카드가 달라도 라벨 칸 폭이 같게 유지된다 */
table.m.table-kv { table-layout: fixed; }
table.m.table-kv th { width: 8rem; white-space: normal; text-align: left; }
table.m.table-kv td { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  table.m.table-kv th { width: 6.5rem; }
}

/* 카드 없이 페이지에 바로 놓이는 목록 표 */
table.m.table-boxed {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(27, 37, 25, 0.04);
}
table.m.table-boxed th:first-child,
table.m.table-boxed td:first-child { padding-left: 1rem; }
table.m.table-boxed th:last-child,
table.m.table-boxed td:last-child { padding-right: 1rem; }
table.m.table-boxed thead tr:first-child th:first-child { border-top-left-radius: 9px; }
table.m.table-boxed thead tr:first-child th:last-child { border-top-right-radius: 9px; }
table.m.table-boxed tbody tr:last-child td:first-child { border-bottom-left-radius: 9px; }
table.m.table-boxed tbody tr:last-child td:last-child { border-bottom-right-radius: 9px; }

.badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--soft-grey);
  color: var(--muted);
}
.badge-pending { background: #eef1ee; color: #55605a; }
.badge-in_progress { background: #dbeafe; color: #1d4ed8; }
.badge-maintenance { background: #fef3c7; color: #92400e; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-high { background: #fee2e2; color: #991b1b; }
.badge-medium { background: #fef3c7; color: #92400e; }
.badge-low { background: #eef2f5; color: #556070; }

/* 감사 로그 entity_type 구분. 옆 칸 action 배지(채움)와 겹치지 않게 외곽선형으로 둔다.
   정의되지 않은 값은 .badge-entity 기본 회색 */
.badge-entity {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}
.badge-entity-project { border-color: #93c5fd; color: #1d4ed8; }
.badge-entity-work_item { border-color: #fcd34d; color: #92400e; }
.badge-entity-resource { border-color: #5eead4; color: #0f766e; }
.badge-entity-calendar_event { border-color: #c4b5fd; color: #5b21b6; }
.badge-entity-user { border-color: #cbd5cb; color: #55605a; }

/* 자료실 분류. 브랜드 레드와 섞이지 않도록 빨강 계열은 피했다.
   정의되지 않은 분류는 .badge-cat 기본 회색 */
.badge-cat { background: #eef1f5; color: #556070; }
.badge-cat-hr { background: #ede9fe; color: #5b21b6; }
.badge-cat-tech { background: #dbeafe; color: #1d4ed8; }
.badge-cat-marketing { background: #ffedd5; color: #9a3412; }
.badge-cat-manual { background: #ccfbf1; color: #0f766e; }
.badge-cat-other { background: #eef1f5; color: #556070; }

.badge-create { background: #dcfce7; color: #166534; }
.badge-update { background: #dbeafe; color: #1d4ed8; }
.badge-restore { background: #fef3c7; color: #92400e; }
.badge-soft_delete { background: #fee2e2; color: #991b1b; }
.badge-purge { background: #7f1d1d; color: #ffe4e6; }
.badge-password_change { background: #ede9fe; color: #5b21b6; }

.progress { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 6rem; max-width: 11rem; }
.progress-track {
  flex: 1;
  min-width: 3rem;
  height: 6px;
  border-radius: 999px;
  background: var(--soft-grey);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.3s ease;
}
.progress-value {
  flex: none;
  min-width: 2.6rem;
  text-align: right;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* 0% — 막대 없이 숫자만 (빈 트랙은 자리만 차지하고 정보가 없다) */
.progress-zero {
  display: inline-block;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: #a89f9f;
}
.progress-zero-lg { font-size: 0.88rem; }

/* 마감일 '미정' / 값 없음 — 실제 날짜와 같은 무게로 읽히지 않게 낮춘다 */
.deadline-none { color: #a89f9f; font-size: 0.94em; }

/* '마감일 미정' 체크 시 잠긴 날짜 입력 — 옆의 '미정' 체크박스는 계속 또렷해야 하므로
   흐리게 만드는 대상은 label 글자와 잠긴 입력칸으로 한정한다 */
.field.is-disabled > span { opacity: 0.5; }
.field input:disabled { opacity: 0.5; cursor: not-allowed; background: var(--surface-2); }
.progress.is-done .progress-fill { background: var(--ok); }
.progress.is-done .progress-value { color: #166534; font-weight: 600; }

/* 마감 대비 진행 속도 — 색 자체가 신호이므로 숫자까지 같이 물들인다 */
.progress.is-behind .progress-fill { background: var(--warn); }
.progress.is-behind .progress-value { color: #b45309; }
.progress.is-critical .progress-fill,
.progress.is-overdue .progress-fill { background: var(--danger); }
.progress.is-critical .progress-value,
.progress.is-overdue .progress-value { color: var(--danger); font-weight: 600; }
.progress-zero.is-behind { color: #b45309; }
.progress-zero.is-critical,
.progress-zero.is-overdue { color: var(--danger); font-weight: 600; }
.progress-lg { max-width: 18rem; }
.progress-lg .progress-track { height: 9px; }
.progress-lg .progress-value { font-size: 0.88rem; color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}

.btn {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
  vertical-align: middle;
}
.btn:hover { background: var(--surface); border-color: var(--muted); color: var(--text); }
.btn-primary { background: var(--text); border-color: var(--text); color: #ffffff; font-weight: 600; }
.btn-primary:hover { background: #000000; border-color: #000000; color: #ffffff; }
.btn-danger { border-color: #fca5a5; background: #fee2e2; color: #991b1b; }
.btn-danger:hover { background: #fecaca; border-color: #f87171; color: #991b1b; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 0.25rem 0.55rem; font-size: 0.8rem; }
/* 아이콘 + 글자를 함께 넣는 버튼 (.btn은 inline-block이라 별도 수식 클래스로 둔다) */
.btn-icon { display: inline-flex; align-items: center; gap: 0.35rem; }
.btn-icon svg { flex: none; }

.form-grid { display: grid; gap: 0.85rem; }
.field { display: grid; gap: 0.35rem; font-size: 0.88rem; color: var(--muted); }
.field input, .field select, .field textarea {
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent-bright);
  outline-offset: -1px;
  background: var(--surface);
}
.field textarea { min-height: 100px; resize: vertical; white-space: pre-wrap; }
/* 항목 이름 왼쪽의 작은 아이콘 — 글자와 같은 줄에서 살짝 위로 붙는다 */
.flabel { display: inline-flex; align-items: center; gap: 0.35rem; }
.flabel .ficon { flex: none; opacity: 0.75; }

/* select 은 브라우저가 주는 화살표를 지우고 같은 선 굵기의 아이콘을 배경으로 깐다.
   option 자체는 OS 위젯이라 배경·글자색 정도만 먹는다(플랫폼마다 다름) — 거기까지만 손댄다. */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.1rem;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* 아래 두 상태의 기존 규칙이 background 단축 속성이라 화살표를 지운다 — 다시 깔아 준다 */
.field select:hover { border-color: var(--muted); background-image: var(--select-arrow); }
.field select:focus { background-color: var(--surface); background-image: var(--select-arrow); }
.field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--surface-2);
  background-image: none;
}
.field select option {
  background-color: var(--surface);
  color: var(--text);
}
.field select option:checked { font-weight: 600; }
.field select option:disabled { color: #b8b2b2; }
/* 첫 항목이 '— 없음 —' 처럼 값 없음을 뜻할 때는 실제 값보다 한 단계 낮춰 읽히게 */
.field select option[value=""] { color: var(--muted); }

/* 시작~종료처럼 짝을 이루는 입력은 한 label 아래 가로로 묶어 하나의 값으로 읽히게 한다.
   날짜·시간은 글자 수가 정해져 있으니 칸도 그만큼만 차지하게 둔다 */
.field-range { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 0.5rem; }
.field-range input { min-width: 0; }
.field-range .field-range-sep { color: var(--muted); }
.field-range-date input { width: 9.5rem; }
.field-range-time input { width: 7rem; }
@media (max-width: 380px) {
  .field-range { grid-template-columns: 1fr; justify-content: stretch; }
  .field-range input { width: auto; }
  .field-range .field-range-sep { display: none; }
}

/* 입력칸과 그 상태를 바꾸는 체크박스를 한 줄에 둔다 */
.field-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.field-inline .js-date { width: 9.5rem; }
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
}
.check-inline input { width: auto; margin: 0; accent-color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; }
/* 되돌리기 어려운 동작은 자주 누르는 버튼과 떼어 오른쪽 끝에 둔다 */
.actions .actions-end { margin-left: auto; }
.actions + .card { margin-top: 1.5rem; }

.login-wrap { max-width: 380px; margin: 4rem auto; }
.login-wrap .card h2 { text-align: center; }

.flash { padding: 0.65rem 0.85rem; border-radius: 8px; margin-bottom: 1rem; }
.flash-error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

.secret-box {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 0.75rem;
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 3rem;
}
.secret-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }

/* 보기(눈)·복사 버튼은 제목(h2) 바로 오른쪽에 붙인다. */
.secret-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.secret-head h2 { margin: 0; }
/* 값이 들어가는 박스는 .secret-text 하나만 품는다. 박스를 normal로 두고 pre-wrap을
   값 span으로 옮겨야 마크업 줄바꿈이 공백으로 찍히지 않는다.
   도구가 없는 박스(개요 등)는 그대로 둔다. */
.secret-box:has(.secret-text) { white-space: normal; }
.secret-box .secret-text { display: block; white-space: pre-wrap; }
.secret-tools {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.secret-tools .btn { padding: 0.25rem; line-height: 0; }
/* 아이콘 두 벌을 넣어두고 상태에 따라 한쪽만 보인다 */
.secret-tools .ico-off,
.secret-tools .ico-done { display: none; }
.secret-tools .js-reveal[aria-pressed="true"] .ico-on { display: none; }
.secret-tools .js-reveal[aria-pressed="true"] .ico-off { display: block; }
.secret-tools .js-copy-secret.is-done .ico-copy { display: none; }
.secret-tools .js-copy-secret.is-done .ico-done { display: block; color: #166534; }

.stats {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stats-label { color: var(--muted); font-size: 0.85rem; }

.stat-trend {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.stat-trend-caption { color: var(--muted); font-size: 0.75rem; margin-bottom: 0.5rem; }
.stat-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.stat-bar { display: flex; flex-direction: column; align-items: center; gap: 0.28rem; }
.stat-bar-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-bar-track {
  width: 100%;
  max-width: 22px;
  height: 60px;
  display: flex;
  align-items: flex-end;
}
.stat-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--trend-1);
  transform-origin: bottom;
  animation: stat-bar-grow 0.5s ease both;
}
.stat-bar-fill-1 { background: var(--trend-2); animation-delay: 0.06s; }
.stat-bar-fill-2 { background: var(--trend-3); animation-delay: 0.12s; }
.stat-bar-month { font-size: 0.72rem; color: var(--muted); }

@keyframes stat-bar-grow {
  from { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stat-bar-fill { animation: none; }
}

.grid2 .card { animation: page-in 0.4s ease both; }
.grid2 .card:nth-child(2) { animation-delay: 0.07s; }
.grid2 .card:nth-child(3) { animation-delay: 0.14s; }
.grid2 .card:nth-child(4) { animation-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .grid2 .card { animation: none; }
}

/* 범례(왼쪽) + 일정 추가(오른쪽)를 캘린더 바로 위 한 줄로 — 업무관리 .work-toolbar와 같은 규칙 */
.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cal-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--muted);
}
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: -2px;
}

/* FullCalendar 버튼 (기본 파란색 → 검정, 폭 축소) */
.fc {
  --fc-button-bg-color: #57514f;
  --fc-button-border-color: #57514f;
  --fc-button-hover-bg-color: #423c3b;
  --fc-button-hover-border-color: #423c3b;
  --fc-button-active-bg-color: #3a3433;
  --fc-button-active-border-color: #3a3433;
  --fc-button-text-color: #ffffff;
}
.fc .fc-button.fc-button {
  padding: 0.3em 0.6em;
  font-size: 0.92em;
  font-weight: 500;
}
.fc .fc-event,
.fc .fc-event *,
.fc .fc-daygrid-event { cursor: pointer; }
.fc .fc-event:hover { filter: brightness(0.92); }

/* 클릭했을 때는 테두리를 그리지 않고, 키보드 탭 이동일 때만 표시한다 */
.fc .fc-button.fc-button:focus {
  box-shadow: none;
  outline: none;
}
.fc .fc-button.fc-button:not(:disabled):active:focus,
.fc .fc-button.fc-button:not(:disabled).fc-button-active:focus {
  box-shadow: none;
}
.fc .fc-button.fc-button:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 1px;
}

/* 캘린더 페이지는 한 화면 고정. body를 뷰포트 높이로 잡고 남는 세로 공간을
   달력 카드가 전부 차지한다. 페이지 스크롤도 달력 내부 스크롤도 생기지 않는다.
   .cal-card 없는 다른 페이지는 영향받지 않는다. */
body:has(.cal-card) {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.cal-card) .main {
  flex: 1;
  min-height: 0;
  /* flex 안에서는 가로 margin:auto가 stretch를 꺼서 폭이 줄어든다.
     다른 페이지와 같은 최대폭(1100px) 유지를 위해 100%를 명시한다. */
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
body:has(.cal-card) .footer { padding: 0.7rem; }
/* 화면 높이가 고정이라 달력을 키우려면 주변 여백을 회수해야 한다.
   제목/범례/카드 안쪽 여백을 조금씩 줄여 그만큼 달력에 넘긴다. */
body:has(.cal-card) .page-title { margin-bottom: 0.75rem; }
body:has(.cal-card) .cal-toolbar { margin-bottom: 0.75rem; }
body:has(.cal-card) .cal-card {
  flex: 1;
  min-height: 0;
  padding: 0.75rem 1.1rem 1rem;
}
/* 달력 안쪽 툴바 여백도 줄여 격자에 더 넘긴다 */
body:has(.cal-card) .fc-toolbar.fc-header-toolbar {
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
}

.cal-card { padding: 1.5rem 1.75rem 1.75rem; overflow: hidden; }
.cal-card.fc {
  --fc-border-color: var(--border);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-2);
  --fc-today-bg-color: var(--accent-soft);
  --fc-event-border-color: transparent;
  /* 오늘 칸 깜빡임(노란 글로우)에서 쓰는 색 */
  --cal-flash-bg: #fff8db;
  --cal-flash-ring: rgba(250, 204, 21, 0.55);
  --cal-flash-glow: rgba(250, 204, 21, 0.45);
  /* 툴바 버튼 아이콘 (아래 마스크에서 사용) */
  --fc-ico-prev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M15 4l-8 8 8 8'/></svg>");
  --fc-ico-next: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4l8 8-8 8'/></svg>");
  font-size: 0.9rem;
}
.cal-card.fc .fc-toolbar.fc-header-toolbar {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.cal-card.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 700; }

/* 툴바 오른쪽 묶음: [‹ 오늘 ›] 를 테두리 하나짜리 알약으로.
   FullCalendar 기본 아이콘은 웹폰트(fcicons)라 폰트 로딩에 기대는데,
   마스크 + currentColor로 바꾸면 버튼 글자색을 그대로 따라간다. */
.cal-card.fc .fc-toolbar-chunk .fc-button {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
}
.cal-card.fc .fc-toolbar-chunk .fc-button-group {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.cal-card.fc .fc-toolbar-chunk .fc-button-group .fc-button.fc-button {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 0.86em;
  padding: 0.34em 0.55em;
}
.cal-card.fc .fc-toolbar-chunk .fc-button-group .fc-button.fc-button:first-child {
  border-radius: 999px 0 0 999px;
  padding-left: 0.7em;
}
.cal-card.fc .fc-toolbar-chunk .fc-button-group .fc-button.fc-button:last-child {
  border-radius: 0 999px 999px 0;
  padding-right: 0.7em;
}
.cal-card.fc .fc-toolbar-chunk .fc-button-group .fc-prev-button.fc-button,
.cal-card.fc .fc-toolbar-chunk .fc-button-group .fc-next-button.fc-button {
  color: var(--muted);
  padding-inline: 0.5em;
}
.cal-card.fc .fc-toolbar-chunk .fc-button-group .fc-button.fc-button:hover {
  background: var(--surface-2);
}
/* 툴바 버튼이 disabled 가 되더라도 흐려 보이지 않게 */
.cal-card.fc .fc-toolbar-chunk .fc-button-group .fc-button.fc-button:disabled {
  opacity: 1;
  cursor: default;
}
.cal-card.fc .fc-toolbar-chunk .fc-button-group .fc-button.fc-button:disabled:hover {
  background: transparent;
}
.cal-card.fc .fc-icon-chevron-left::before,
.cal-card.fc .fc-icon-chevron-right::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.72em;
  mask-size: 0.72em;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cal-card.fc .fc-icon-chevron-left::before {
  -webkit-mask-image: var(--fc-ico-prev);
  mask-image: var(--fc-ico-prev);
}
.cal-card.fc .fc-icon-chevron-right::before {
  -webkit-mask-image: var(--fc-ico-next);
  mask-image: var(--fc-ico-next);
}
.cal-card.fc .fc-col-header-cell { background: var(--surface-2); }
.cal-card.fc .fc-col-header-cell-cushion {
  padding: 0.55rem 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}
/* min-height를 두면 그 값이 바닥이 되어 내부 스크롤이 생긴다.
   0으로 두면 6주가 남는 공간을 균등하게 나눠 갖는다(expandRows). */
.cal-card.fc .fc-daygrid-day-frame { padding: 0.45rem; min-height: 0; }
.cal-card.fc .fc-scroller { overflow: hidden !important; }
.cal-card.fc .fc-daygrid-day-number { padding: 0.2rem 0.4rem; font-size: 0.82rem; color: var(--text); }
.cal-card.fc .fc-day-today .fc-daygrid-day-number { color: var(--text); font-weight: 700; }
.cal-card.fc .fc-day-sun .fc-daygrid-day-number { color: var(--accent); }
.cal-card.fc .fc-daygrid-event {
  margin: 0.1rem 0;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.35;
}
.cal-card.fc .fc-daygrid-more-link { padding: 0.1rem 0.35rem; font-size: 0.78rem; color: var(--muted); }

/* '오늘' 버튼을 눌렀을 때 오늘 날짜 칸에 노란 빛이 번졌다 사라진다.
   td 배경은 --fc-today-bg-color 라 애니메이션에서 그대로 되돌려 놓는다.
   z-index 는 바깥으로 퍼지는 빛이 옆 칸 배경에 덮이지 않게 하려는 것 */
.cal-card.fc .fc-day-today.cal-today-flash {
  position: relative;
  z-index: 1;
  animation: cal-today-flash 0.90s ease-in-out 1;
}
@keyframes cal-today-flash {
  0%, 100% {
    background-color: var(--fc-today-bg-color);
    box-shadow: 0 0 0 0 var(--cal-flash-glow);
  }
  45% {
    background-color: var(--cal-flash-bg);
    box-shadow:
      0 0 0 3px var(--cal-flash-ring),
      0 0 16px 5px var(--cal-flash-glow);
  }
}

/* ── 날짜 칸의 + 버튼: 평소엔 숨고 그 칸에 마우스가 올라오면 나타난다.
   키보드로도 닿아야 하므로 숨김은 opacity로만 하고 포커스 때 다시 드러낸다. ── */
.cal-card.fc .fc-daygrid-day-frame { position: relative; }
.cal-add {
  position: absolute;
  top: 0.3rem;
  left: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease;
}
.cal-card.fc .fc-daygrid-day:hover .cal-add,
.cal-add:focus-visible {
  opacity: 1;
  transform: none;
}
.cal-add:hover { background: var(--accent); color: var(--on-accent); }
.cal-add:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .cal-add { transition: none; }
}

/* 터치 화면에는 hover가 없다 — 항상 옅게 보여 두고 누르면 진해지게 */
@media (hover: none) {
  .cal-add { opacity: 0.45; transform: none; }
}

/* ── 등록·수정 모달: 안에는 event_edit.php(embed=1)가 iframe으로 들어온다 ── */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  padding: 2rem 1rem;
  overflow: auto;
}
.cal-modal[hidden] { display: none; }
.cal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(32, 26, 26, 0.38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.cal-modal-panel {
  position: relative;
  /* align-items 대신 auto 마진으로 가운데 — 내용이 길어도 위가 잘리지 않는다 */
  margin: auto;
  width: min(50rem, 94vw);
  border-radius: 14px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px rgba(32, 26, 26, 0.05),
    0 18px 48px rgba(32, 26, 26, 0.28);
  animation: cal-modal-in 0.16s cubic-bezier(0.32, 0.72, 0, 1) both;
  overflow: hidden;
}
@keyframes cal-modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
.cal-modal-frame {
  display: block;
  width: 100%;
  /* 내용 높이는 iframe 안에서 postMessage로 받아 JS가 다시 잡는다.
     min-height가 바닥이라 폼이 짧아도 창이 쪼그라들지 않는다 */
  height: 36rem;
  min-height: 36rem;
  border: 0;
}
.cal-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.85rem;
  z-index: 1;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.cal-modal-close:hover { background: var(--soft-grey); color: var(--text); }
.cal-modal-close:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }

/* 화면이 낮으면 최소 높이가 오히려 창을 화면 밖으로 밀어낸다 */
@media (max-height: 720px) {
  .cal-modal-frame { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-modal-panel { animation: none; }
}

/* ── iframe 안쪽(layout_embed_header)의 본문 ── */
body.embed { background: var(--surface); }
.embed-main { padding: 2.25rem 2.25rem 0; }
.embed-title { margin: 0 0 1.5rem; font-size: 1.25rem; font-weight: 700; }
/* 모달 안에서는 폼 카드의 테두리가 모달 테두리와 겹쳐 보인다 */
body.embed .form-grid.card {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
body.embed .card { box-shadow: none; }
/* 모달 안은 화면이 좁으니 입력 사이를 페이지보다 넉넉히 벌린다 */
body.embed .form-grid { gap: 1.35rem; }
body.embed .field { font-size: 0.9rem; }
body.embed .field input { padding: 0.6rem 0.7rem; }
body.embed .field select,
body.embed .selectbox-value { padding: 0.6rem 2.1rem 0.6rem 0.7rem; }

/* 저장·취소는 모달 바닥에 붙는 바로. 내용이 길어 스크롤이 생겨도 계속 보인다.
   row-reverse 라 마크업 순서(저장→취소)가 화면에서는 [취소][저장]이 된다 */
body.embed .actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0 -2.25rem;
  padding: 0.85rem 2.25rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
body.embed .actions .btn { padding: 0.42rem 1.1rem; }
/* 삭제 폼(수정 화면에서만 나온다)은 바 아래에 따로 둔다 */
body.embed form[action="/calendar/event_delete.php"] {
  margin: 0 -2.25rem;
  padding: 1rem 2.25rem;
  border-top: 0;
  background: var(--surface-2);
}
@media (prefers-reduced-motion: reduce) {
  .cal-card.fc .fc-day-today.cal-today-flash { animation: none; }
}
.cal-card.fc .fc-popover {
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(27, 37, 25, 0.12);
}
.cal-card.fc .fc-popover-header { padding: 0.5rem 0.65rem; background: var(--surface-2); font-size: 0.85rem; }
.cal-card.fc .fc-popover-body { padding: 0.5rem 0.65rem; }

/* ───────────────────────────────────────────────
   날짜 선택기(flatpickr) — 아이폰 캘린더 스타일
   기본 테마(flatpickr.min.css) 위에 덮어쓴다.
   ─────────────────────────────────────────────── */
.flatpickr-calendar {
  width: 20rem;
  padding: 0.35rem 0.55rem 0.55rem;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 0 0 1px rgba(32, 26, 26, 0.06),
    0 2px 6px rgba(32, 26, 26, 0.06),
    0 14px 34px rgba(32, 26, 26, 0.16);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
}
/* 입력창을 가리키는 삼각형은 아이폰 시트 느낌과 맞지 않아 숨긴다 */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }

@keyframes fp-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.flatpickr-calendar.animate.open,
.flatpickr-calendar.open { animation: fp-pop 0.18s cubic-bezier(0.32, 0.72, 0, 1) both; }

/* ── 상단 헤더: 좌측 "2026년 8월", 우측 이전/다음 화살표 ── */
.flatpickr-months {
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.15rem 0.15rem;
}
.flatpickr-months .flatpickr-month {
  order: -1;
  height: auto;
  overflow: visible;
  color: var(--text);
  fill: var(--text);
}
.flatpickr-current-month {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  height: auto;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
}
/* 연도: 앞에 오도록 순서를 바꾸고 "년"을 붙인다 → "2026년 8월" */
.flatpickr-current-month .numInputWrapper {
  order: -1;
  width: auto;
  display: inline-flex;
  align-items: center;
}
/* 아이폰은 연도 스피너를 노출하지 않는다 (입력·방향키·스크롤로 여전히 조절 가능) */
.flatpickr-current-month .numInputWrapper span { display: none; }
.flatpickr-current-month input.cur-year {
  width: 4.4ch;
  padding: 0;
  font-weight: 700;
  font-size: inherit;
}
.flatpickr-current-month .numInputWrapper::after {
  content: "년";
  margin-right: 0.4ch;
}
.flatpickr-current-month .cur-month { margin: 0; font-weight: 700; }

/* 월 드롭다운: 아이폰 헤더의 "8월 ⌄" 형태 */
.flatpickr-current-month select.flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.15rem 1.25rem 0.15rem 0.4rem;
  border: 0;
  border-radius: 9px;
  outline: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23776d6d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 0.6rem 0.4rem;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months:hover {
  background-color: var(--soft-grey);
}
.flatpickr-current-month select.flatpickr-monthDropdown-months:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
}
/* 월 목록은 브라우저 기본 렌더링이라 색만 맞춘다 */
.flatpickr-current-month select.flatpickr-monthDropdown-months option.flatpickr-monthDropdown-month {
  background-color: var(--surface);
  color: var(--text);
  font-weight: 500;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  color: var(--accent);
  fill: var(--accent);
  transition: background 0.15s ease, transform 0.12s ease;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: currentColor;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--accent-soft);
  color: var(--accent);
  fill: var(--accent);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: currentColor; }
.flatpickr-months .flatpickr-prev-month:active,
.flatpickr-months .flatpickr-next-month:active { transform: scale(0.9); }

/* ── 요일 줄과 날짜 격자를 같은 7열 그리드로 맞춘다 ── */
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-weekdays,
.flatpickr-days { width: 100%; }
.flatpickr-innerContainer { border-bottom: 0; }
.flatpickr-days { overflow: visible; }
.flatpickr-weekdays {
  height: auto;
  padding: 0.25rem 0 0.15rem;
  background: transparent;
}
.flatpickr-weekdaycontainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}
span.flatpickr-weekday {
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.flatpickr-weekdaycontainer span.flatpickr-weekday:first-child { color: var(--accent); }

.dayContainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
  row-gap: 0.15rem;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0.15rem 0 0;
}
.flatpickr-day {
  width: 2.25rem;
  max-width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  border: 0;
  border-radius: 50%;
  line-height: 2.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.flatpickr-day:nth-child(7n + 1) { color: var(--accent); }
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--soft-grey); border: 0; }
.flatpickr-day:active { transform: scale(0.92); }
.flatpickr-day:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
/* 아이폰처럼 오늘은 옅은 배경 + 브랜드 컬러 숫자 */
.flatpickr-day.today {
  border: 0;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.flatpickr-day.today:hover { background: #fbdde1; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #c6bfbf;
  background: transparent;
  font-weight: 400;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover { background: var(--soft-grey); color: var(--muted); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #d8d2d2;
  background: transparent;
  cursor: default;
}
/* 선택된 날짜는 채워진 원 (마지막에 두어 위 규칙들을 이긴다) */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.32);
}

/* ── 기간 선택(rangePlugin): 시작~종료 사이를 옅은 띠로 잇는다 ── */
.flatpickr-day { position: relative; }
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover,
.flatpickr-day.inRange.today,
.flatpickr-day.inRange.prevMonthDay,
.flatpickr-day.inRange.nextMonthDay {
  border: 0;
  border-radius: 0;
  background: var(--accent-soft);
  color: var(--text);
  /* 날짜 칸 사이 간격까지 메워 띠가 끊기지 않게 한다 */
  box-shadow: -0.3rem 0 0 var(--accent-soft), 0.3rem 0 0 var(--accent-soft);
}
.flatpickr-day.inRange.prevMonthDay,
.flatpickr-day.inRange.nextMonthDay { color: #c6bfbf; }
/* 양 끝 날짜는 채워진 원 그대로 두고, 안쪽으로만 띠를 뻗는다 */
.flatpickr-day.startRange:not(.endRange)::after,
.flatpickr-day.endRange:not(.startRange)::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 0.9rem;
  background: var(--accent-soft);
}
.flatpickr-day.startRange:not(.endRange)::after { left: 50%; }
.flatpickr-day.endRange:not(.startRange)::after { right: 50%; }

/* 시작과 종료가 붙어 있을 때 기본 테마가 넣는 파란 연결 그림자를 지운다 */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.32);
}

/* ── 시간 선택 영역 ── */
.flatpickr-calendar.hasTime .flatpickr-time {
  height: auto;
  padding: 0.4rem 0 0.15rem;
  border-top: 1px solid var(--border);
}
.flatpickr-time { border-radius: 0; }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: 2.2rem;
  line-height: 2.2rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}
.flatpickr-time input {
  border-radius: 10px;
  transition: background 0.15s ease;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--soft-grey); }
.flatpickr-time .numInputWrapper span { border-color: var(--border); }
.flatpickr-time .numInputWrapper span:hover { background: var(--soft-grey); }
.flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--muted); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .flatpickr-calendar.animate.open,
  .flatpickr-calendar.open { animation: none; }
  .flatpickr-day,
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month { transition: none; }
  .flatpickr-day:active,
  .flatpickr-months .flatpickr-prev-month:active,
  .flatpickr-months .flatpickr-next-month:active { transform: none; }
}

/* ───────────────────────────────────────────────
   공용 팝업 목록(.poplist) — 달력과 같은 시트 느낌.
   시간 선택기(.js-time)와 select 스킨(.selectbox)이 함께 쓴다.
   ─────────────────────────────────────────────── */
.poplist {
  position: absolute;
  z-index: 200;
  display: grid;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.3rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 0 0 1px rgba(32, 26, 26, 0.06),
    0 2px 6px rgba(32, 26, 26, 0.06),
    0 14px 34px rgba(32, 26, 26, 0.16);
}
.poplist-item {
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.poplist-item:hover { background: var(--soft-grey); }
.poplist-item:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.poplist-item.is-current {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.poplist-item.is-off { color: #b8b2b2; cursor: default; }
.poplist-item.is-off:hover { background: transparent; }

/* select 스킨 — 네이티브 목록 대신 위 .poplist 를 띄운다.
   select 자체는 지우지 않고 투명하게 겹쳐 둔다:
   값·폼 전송·키보드·스크린리더의 원본은 계속 select 쪽이다. */
.selectbox { position: relative; display: block; }
.selectbox select.is-skinned {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;   /* 클릭은 겉면(.selectbox-value)이 받는다 */
}
.selectbox-value {
  display: flex;
  align-items: center;
  padding: 0.5rem 2.1rem 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2) var(--select-arrow) no-repeat right 0.6rem center;
  background-size: 0.85rem;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.selectbox:hover .selectbox-value { border-color: var(--muted); }
/* 값 없음(— 없음 —)은 실제 값보다 한 단계 낮춰 읽히게 */
.selectbox-value.is-empty { color: var(--muted); }
/* 목록이 열려 있거나 키보드 포커스가 왔을 때 — 입력칸 포커스와 같은 표시 */
.selectbox.is-open .selectbox-value,
.selectbox select.is-skinned:focus-visible + .selectbox-value {
  outline: 2px solid var(--accent-bright);
  outline-offset: -1px;
  background-color: var(--surface);
}
.selectbox select:disabled + .selectbox-value {
  opacity: 0.5;
  cursor: not-allowed;
  background-image: none;
}

/* 목록 페이지 공통 툴바 (업무관리 .work-toolbar = 자료실 .list-toolbar) */
.work-toolbar,
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.work-toolbar-left,
.list-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.work-toolbar-left select,
.work-toolbar-left input[type="search"],
.work-toolbar-left input[type="text"],
.list-toolbar-left select,
.list-toolbar-left input[type="search"],
.list-toolbar-left input[type="text"] {
  /* 높이를 .btn(padding 0.3rem / font 0.9rem)과 같게 맞춘다 */
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  min-width: 10rem;
}
.work-toolbar-left input[type="search"],
.list-toolbar-left input[type="search"] {
  width: 12rem;
  min-width: 0;
}
/* 프로젝트명이 길어도 셀렉트가 툴바를 밀지 않도록 폭을 고정한다 */
.work-toolbar-left select[name="project_id"] {
  width: 9rem;
  min-width: 0;
  text-overflow: ellipsis;
}
/* 자료실: 분류 / 작성자 셀렉트도 같은 이유로 폭을 고정한다 */
.list-toolbar-left select[name="cat"],
.list-toolbar-left select[name="uid"] {
  width: 9rem;
  min-width: 0;
  text-overflow: ellipsis;
}
.work-body-expand {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.field textarea.work-body-input {
  min-height: 18rem;
  field-sizing: content;
  resize: vertical;
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr; align-items: stretch; }
  .nav {
    flex-wrap: wrap;
    justify-self: stretch;
    justify-content: flex-start;
    border-radius: 16px;
  }
  .topbar-right { flex-wrap: wrap; justify-self: stretch; }
  .nav-util { flex-wrap: wrap; }
  .globalsearch { width: 100%; }
}

/* 좁은 화면에서는 범례가 여러 줄로 접히므로, 버튼을 위로 올려 위치를 고정한다 */
@media (max-width: 640px) {
  .cal-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .cal-toolbar .btn { order: -1; }
}

/* ═══════════════════════════════════════════════
   대시보드 (index.php)

   원칙 셋.
   1) 상자를 세지 않는다 — 카드 테두리 대신 제목 아래 얇은 선과 여백으로 나눈다.
      흰 상자를 열두 개 늘어놓으면 전부 같은 무게로 읽혀 시선이 갈 곳이 사라진다.
   2) 색은 신호일 때만 쓴다 — 기본은 먹색/회색이고, 빨강은 지연·실패·Critical,
      노랑은 주의에만. 정상 상태에 초록을 칠하지 않는다(정상은 조용해야 한다).
   3) 맨 위 '오늘 볼 것'만 상자를 가진다 — 화면에서 유일하게 테두리를 두른 것이
      가장 급한 것이 되도록.
   ═══════════════════════════════════════════════ */

/* 목록 페이지는 읽기 좋은 1100px가 맞지만, 대시보드는 한 줄에 KPI 6개가 들어가야 한다 */
.main:has(.dash) { max-width: 1400px; }

/* ── 오늘 볼 것 ── */
.alerts {
  padding: 0.9rem 1.2rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(27, 37, 25, 0.04);
}
.alerts.is-calm { border-left-color: var(--border); }
.alerts-title {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.alerts-none { margin: 0; color: var(--muted); font-size: 0.88rem; }
.alert-list { list-style: none; margin: 0; padding: 0; }
.alert {
  display: grid;
  grid-template-columns: 4.6rem 1fr auto;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.42rem 0;
}
.alert + .alert { border-top: 1px solid var(--border); }
.alert-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.alert.is-danger .alert-tag { color: var(--danger); }
.alert.is-warn .alert-tag { color: #b45309; }
.alert-text { font-size: 0.89rem; line-height: 1.45; }
.alert-go { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.alert-go:hover { color: var(--accent); }

.dash-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.dash-meta-note::before { content: '· '; }

/* ── KPI 스트립: 카드가 아니라 한 줄짜리 지표 띠 ── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.1rem;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  padding: 1rem 1.1rem;
  border-left: 1px solid var(--border);
  color: var(--text) !important;
}
.kpi:first-child { border-left: 0; padding-left: 0; }
a.kpi { transition: background 0.15s ease; }
a.kpi:hover { background: var(--surface-2); text-decoration: none; opacity: 1 !important; }
a.kpi:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.kpi-label { color: var(--muted); font-size: 0.78rem; }
.kpi-value {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.kpi-unit { font-size: 0.8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi-caption { color: var(--muted); font-size: 0.74rem; }
.kpi.is-danger .kpi-value { color: var(--danger); }
.kpi.is-warn .kpi-value { color: #b45309; }

/* ── 섹션 ── */
.dash-row { display: grid; gap: 1.75rem 2.5rem; margin-bottom: 2.25rem; align-items: start; }
.dash-row-wide { grid-template-columns: 1.6fr 1fr; }
.dash-row-2 { grid-template-columns: 1fr 1fr; }
.dash-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-sec { min-width: 0; }
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.sec-head h2 { margin: 0; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
.sec-side { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.sec-note { color: var(--muted); font-size: 0.76rem; }
.sec-link { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.sec-link:hover { color: var(--accent); }

.chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--soft-grey);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  vertical-align: 0.1em;
}

.legend { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.75rem; }
.dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot-danger { background: var(--danger); }
.dot-warn { background: var(--warn); }
.dot-idle { background: #c9c3c3; }

/* ── 표: 회색 헤더 바를 걷어내고 글자와 선만 남긴다 ── */
table.m.dash-table { font-size: 0.86rem; }
table.m.dash-table thead th {
  padding: 0 0.6rem 0.5rem;
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
table.m.dash-table tbody td {
  padding: 0.62rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.m.dash-table thead th:first-child,
table.m.dash-table tbody td:first-child { padding-left: 0; }
table.m.dash-table thead th:last-child,
table.m.dash-table tbody td:last-child { padding-right: 0; }
table.m.dash-table tbody tr:last-child td { border-bottom: 0; }
table.m.dash-table tbody tr:hover td { background: var(--surface-2); }
.dash-name { display: block; font-weight: 600; }
.dash-sub { color: var(--muted); font-size: 0.77rem; }
table.m.dash-table tbody tr.is-late td { background: #fffafa; }
table.m.dash-table tbody tr.is-late:hover td { background: #fff2f2; }
.is-overdue-date { color: var(--danger); font-weight: 600; }

/* ── 진행률 바 (계획 눈금 포함) ── */
.pbar { display: flex; align-items: center; gap: 0.55rem; }
.pbar-track {
  position: relative;
  flex: 1;
  min-width: 3rem;
  height: 6px;
  border-radius: 999px;
  background: var(--soft-grey);
}
.pbar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #5a5252; }
.pbar-fill.is-warn { background: var(--warn); }
.pbar-fill.is-danger { background: var(--danger); }
/* 계획선 — "지금쯤 여기 있어야 한다"를 한 눈금으로 세운다 */
.pbar-plan {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
  opacity: 0.45;
}
.pbar-num { min-width: 2.4rem; text-align: right; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── 상태: 알약 배지 대신 점 + 글자 ── */
.status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.status i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; flex: none; }
.status-delayed { color: var(--danger); font-weight: 600; }
.status-at_risk { color: #b45309; font-weight: 600; }
.status-on_track { color: #6b6363; }
.status-done { color: #a89f9f; }
.tstatus { color: var(--muted); font-size: 0.8rem; }

.note { font-size: 0.77rem; color: var(--muted); }
.note-warn { color: #b45309; }
.note-danger { color: var(--danger); font-weight: 600; }

.dday {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dday-warn { color: #b45309; }
.dday-danger { color: var(--danger); }

/* ── 진행률 목록 (계획 대비 실제) ── */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.plist-row { display: grid; gap: 0.22rem; }
.plist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.plist-name { font-size: 0.83rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist-num { font-size: 0.83rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plist-num.is-warn { color: #b45309; }
.plist-num.is-danger { color: var(--danger); }
/* 계획 막대 위에 실제 막대를 겹쳐 두 값의 차이가 길이로 바로 보이게 한다 */
.plist-bars { position: relative; height: 10px; }
.plist-bar { position: absolute; left: 0; border-radius: 3px; }
.plist-bar-plan { top: 0; height: 10px; background: var(--soft-grey); }
.plist-bar-real { top: 2px; height: 6px; background: #5a5252; }
.plist-bar-real.is-warn { background: var(--warn); }
.plist-bar-real.is-danger { background: var(--danger); }
.plist-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.72rem; }
.plist-gap.is-behind { color: var(--danger); font-weight: 600; }
.plist-legend { display: flex; gap: 1rem; margin-top: 0.9rem; color: var(--muted); font-size: 0.73rem; }
.plist-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.swatch { width: 0.7rem; height: 0.5rem; border-radius: 2px; display: inline-block; background: var(--muted); }
.swatch-plan { background: var(--soft-grey); }
.swatch-real { background: #5a5252; }

/* ── 스프린트 ── */
.sprint { display: flex; align-items: center; gap: 1.5rem; }
.donut { position: relative; flex: none; width: 112px; height: 112px; }
.donut svg { display: block; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
}
.donut-center strong { font-size: 1.3rem; line-height: 1; letter-spacing: -0.02em; }
.donut-center span { color: var(--muted); font-size: 0.72rem; }
.sprint-cols { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 0.5rem; min-width: 0; }
.sprint-col { display: grid; grid-template-columns: 3.6rem 1fr 1.6rem; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.sprint-col-label { color: var(--muted); }
.sprint-col-bar { height: 6px; border-radius: 999px; background: var(--soft-grey); overflow: hidden; }
.sprint-col-bar i { display: block; height: 100%; border-radius: 999px; background: #c9c3c3; }
.sprint-col-bar i.is-ink { background: #5a5252; }
.sprint-col-bar i.is-danger { background: var(--danger); }
.sprint-col-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sprint-col-num.is-danger { color: var(--danger); }

/* ── 팀 업무량 ── */
.load { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.load-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2.6rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}
.load-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.load-bar { height: 7px; border-radius: 999px; background: var(--soft-grey); overflow: hidden; }
.load-bar i { display: block; height: 100%; border-radius: 999px; background: #5a5252; }
.load-row.is-over .load-bar i { background: var(--danger); }
.load-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.load-row.is-over .load-num { color: var(--danger); }
.load-meta { grid-column: 2 / -1; color: var(--muted); font-size: 0.73rem; margin-top: -0.35rem; }
.load-empty { color: var(--muted); font-size: 0.82rem; }

/* ── 이슈 ── */
.sev-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--soft-grey); }
.sev-seg { display: block; height: 100%; }
.sev-critical { background: var(--danger); }
.sev-high { background: var(--warn); }
.sev-medium { background: #c9c3c3; }
.sev-low { background: #e5e0e0; }
.sev-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.65rem 0 1rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.sev-legend li { display: inline-flex; align-items: center; gap: 0.3rem; }
.sev-legend strong { color: var(--text); font-variant-numeric: tabular-nums; }
.issue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.issue { display: grid; grid-template-columns: 3.9rem 1fr; align-items: baseline; gap: 0.5rem; }
.issue-body { min-width: 0; }
.issue-empty { display: block; color: var(--muted); font-size: 0.82rem; }
.sev-tag { font-size: 0.71rem; font-weight: 700; color: var(--muted); }
.sev-tag-critical { color: var(--danger); }
.sev-tag-high { color: #b45309; }

/* ── 다가오는 일정 ── */
.sched { list-style: none; margin: 0; padding: 0; }
.sched-row + .sched-row { border-top: 1px solid var(--border); }
.sched-link {
  display: grid;
  grid-template-columns: 2.9rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.35rem;
  margin: 0 -0.35rem;
  border-radius: 6px;
  color: var(--text) !important;
}
.sched-link:hover { background: var(--surface-2); text-decoration: none; opacity: 1 !important; }
.sched-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.sched-date small { color: var(--muted); font-size: 0.66rem; font-weight: 500; }
.sched-body { min-width: 0; }
.sched-empty { color: var(--muted); font-size: 0.82rem; }

/* ── 배포 ── */
.dep { list-style: none; margin: 0; padding: 0; }
.dep-row {
  display: grid;
  grid-template-columns: 5.4rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}
.dep-row + .dep-row { border-top: 1px solid var(--border); }
.dep-env { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.02em; }
.dep-body { min-width: 0; }
.dep-status { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.dep-status.is-failed { color: var(--danger); }
.dep-row.is-failed .dash-name { color: var(--danger); }

/* ── 활동 피드 ── */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.feed-row { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.6rem; align-items: baseline; }
.feed-time { color: var(--muted); font-size: 0.73rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed-text { font-size: 0.82rem; line-height: 1.5; }
.feed-subject { font-weight: 600; }

/* ── 등록 추이 ── */
.trend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trend {
  display: block;
  padding: 0.15rem 0.9rem;
  border-left: 1px solid var(--border);
  color: var(--text) !important;
}
.trend:first-child { border-left: 0; padding-left: 0; }
.trend:hover { text-decoration: none; opacity: 1 !important; }
.trend:hover .stats { color: var(--accent); }
.trend .stats { font-size: 1.5rem; transition: color 0.15s ease; }
.trend .stat-trend { margin-top: 0.3rem; padding-top: 0.3rem; }

/* ── 반응형 ── */
/* KPI 6장은 본문이 1150px는 되어야 글자가 안 눌린다. 그 아래로는 3장씩 두 줄. */
@media (max-width: 1150px) {
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(4) { border-left: 0; padding-left: 0; }
  .kpi:nth-child(n + 4) { border-top: 1px solid var(--border); }
}
@media (max-width: 1280px) {
  .dash-row-3 { grid-template-columns: 1fr 1fr; }
  .dash-row-3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .dash-row-wide, .dash-row-2, .dash-row-3 { grid-template-columns: 1fr; }
  .dash-row-3 > :last-child { grid-column: auto; }
}
@media (max-width: 760px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .kpi-value { font-size: 1.7rem; }
  .alert { grid-template-columns: 1fr auto; }
  .alert-tag { grid-column: 1 / -1; }
  .sprint { flex-direction: column; align-items: stretch; gap: 1rem; }
  .donut { align-self: center; }
  .trend-grid { grid-template-columns: 1fr; }
  .trend { border-left: 0; padding-left: 0; }
  .trend + .trend { border-top: 1px solid var(--border); padding-top: 0.7rem; margin-top: 0.7rem; }
}
@media (max-width: 480px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .kpi { border-left: 0; padding-left: 0; }
  .kpi + .kpi { border-top: 1px solid var(--border); }
}