:root {
  --primary: #2B6CB0;
  --accent: #4FD1C5;
  --dark: #1A365D;
  --bg: #F7FAFC;
  --border: #E2E8F0;
  --text: #2D3748;
  --text-muted: #718096;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
}
.hidden { display: none !important; }

.logo-text {
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-text.small { font-size: 20px; }
.sidebar-logo-img { height: 28px; width: auto; display: block; }
.login-logo-img { width: 220px; max-width: 100%; height: auto; display: block; margin: 0 auto 8px; }

/* ---------- 로그인 ---------- */
.login-view {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px;
  width: 320px;
  text-align: center;
}
.login-box .logo-text { font-size: 32px; margin-bottom: 8px; }
.tagline { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.login-box input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.login-box button {
  width: 100%;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.remember-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 12px;
  text-align: left;
  cursor: pointer;
}
.remember-row input { width: auto; margin: 0; }

.login-box button.secondary-btn {
  background: none;
  color: var(--primary);
  border: 1px solid var(--border);
  margin-top: 8px;
}
.error-text { color: #E53E3E; font-size: 12px; margin-top: 8px; min-height: 16px; }
.hint-text { color: var(--text-muted); font-size: 12px; margin-top: 16px; }

/* ---------- 메인 레이아웃 ---------- */
.main-view { display: flex; height: 100vh; }

.sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease, padding 0.15s ease;
  overflow: hidden;
}
.sidebar.collapsed {
  width: 0;
  border-right: none;
}
.sidebar-expand-btn {
  position: fixed;
  left: 0;
  top: 16px;
  width: 24px;
  height: 32px;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 30; /* 상단 고정 검색바(z-index:20)에 가려서 사이드바를 다시 못 여는 버그 수정(2026-08-19) */
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-collapse-btn {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.new-project-prominent-btn {
  margin: 12px 16px;
  padding: 10px;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sidebar-nav { padding: 0 8px; margin-bottom: 8px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 2px;
}
/* 아이콘이 이모지든 svg 배지든, 항상 같은 너비의 칸에 들어가서 옆 텍스트가 세로로 가지런히 정렬되게 함
   (배지 자체의 15x15 크기는 그대로 두고, 감싸는 칸만 22px로 맞춤 - 배지에 직접 flex-basis를 주면
   배지 자체가 22px로 늘어나 버려서 별도 슬롯으로 감쌈, 2026-08-19) */
.nav-item > .nav-emoji,
.nav-item > .nav-icon-slot,
.nav-item > .nav-icon-outline {
  flex: 0 0 22px;
  width: 22px;
  min-width: 0; /* flex 기본값(auto)이면 이모지 폭에 따라 칸이 22px보다 커져서 정렬이 미세하게 어긋남 */
  overflow: hidden;
  color: var(--primary); /* BI 아이콘 세트 스타일 - 배경 없이 선(아웃라인)만, 색은 브랜드 프라이머리 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-icon-badge { margin-right: 0; }
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--bg); font-weight: 600; color: var(--primary); }
.nav-item.dragging { opacity: 0.4; }
.nav-item.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; }

.nav-submenu { padding: 0 8px 4px 20px; }
.nav-subitem {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.nav-subitem:hover { background: var(--bg); color: var(--text); }

/* 탭마다 창 폭이 제각각(거의 화면 최대치)이라 통일감이 없다는 피드백(2026-08-19) -
   대시보드/인사이트/업무·캘린더·파일(프로젝트 서브뷰)/드라이브 모두 같은 폭으로 가운데 정렬 */
.dashboard-view { width: 100%; align-self: stretch; padding: 20px 24px; overflow-y: auto; max-width: 1300px; margin: 0 auto; }
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
/* 홈 화면에서는 위아래(바로가기 바/위젯)와 옆 여백이 안 맞아서 어긋나 보이던 문제
   (2026-08-20 피드백) - 같은 좌우 여백(24px)과 위젯 사이 간격(16px)으로 맞춤. */
#homeStats { margin: 16px 24px; }
.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.stat-value { font-size: 26px; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.dashboard-recent-list { display: flex; flex-direction: column; gap: 2px; }
.dashboard-recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.dashboard-recent-row:hover { background: var(--bg); }
.drr-project { color: var(--text-muted); font-size: 11px; min-width: 90px; flex-shrink: 0; }
.drr-name { flex: 1; }
.drr-date { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }

/* ---------- 인사이트 ---------- */
.insights-status-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--bg);
}
.insights-status-bar .seg { height: 100%; }
.insights-status-bar .seg.요청 { background: #A0AEC0; }
.insights-status-bar .seg.진행중 { background: var(--primary); }
.insights-status-bar .seg.완료 { background: #38A169; }
.insights-status-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; font-size: 13px; }
.insights-status-legend .legend-item { display: flex; align-items: center; gap: 6px; }
.insights-status-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.insights-status-legend .dot.요청 { background: #A0AEC0; }
.insights-status-legend .dot.진행중 { background: var(--primary); }
.insights-status-legend .dot.완료 { background: #38A169; }

.insights-assignee-list { display: flex; flex-direction: column; gap: 10px; }
.insights-assignee-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.insights-assignee-row .ia-name { width: 90px; flex-shrink: 0; font-weight: 600; }
.insights-assignee-row .ia-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}
.insights-assignee-row .ia-bar-fill { height: 100%; background: #38A169; }
.insights-assignee-row .ia-count { flex-shrink: 0; color: var(--text-muted); font-size: 12px; min-width: 110px; text-align: right; }

.sidebar-section-label {
  padding: 8px 16px 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: default;
  user-select: none;
}

.project-tabs { display: flex; gap: 4px; padding: 0 8px 4px; }
.project-tab {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.project-tab:hover { background: var(--bg); }
.project-tab.active { background: var(--bg); color: var(--primary); font-weight: 600; }

.project-owner-group { padding: 8px 12px 2px; font-size: 11px; color: var(--text-muted); font-weight: 600; }

.project-list { flex: 1; overflow-y: auto; padding: 4px 8px; min-height: 0; }
.project-item {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.project-item:hover { background: var(--bg); }
.project-item.active { background: var(--primary); color: #fff; }

.sidebar-bottom-nav { padding: 0 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.nav-item-hint { float: right; font-size: 10px; color: var(--text-muted); font-weight: 400; }
.nav-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  margin-right: 4px;
  vertical-align: middle;
}
.nav-icon-badge svg { width: 10px; height: 10px; }

/* ---------- 공통 모달 배경(위젯설정/프로젝트선택/폴더선택/새 프로젝트 등 .np-modal을
   감싸는 모든 팝업이 공유) - 예전 검색창 개편 때 실수로 통째로 지워져서, 화면 중앙이 아니라
   눌린 자리(사이드바 옆) 문서 흐름 위치에 그대로 끼어 보이던 문제(2026-08-20)를 복구 ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 100;
}

/* ---------- 프로젝트 만들기 모달 ---------- */
.np-modal {
  background: #fff;
  border-radius: 14px;
  width: 460px;
  max-width: 90vw;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.np-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.np-modal input[type="text"], .np-modal textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 10px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.np-modal textarea { min-height: 44px; resize: vertical; }
.np-section-label { font-size: 13px; font-weight: 600; margin: 14px 0 8px; }
.np-owner-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  box-sizing: border-box;
}
.np-tab-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.np-tab-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.np-tab-btn.active { border-color: var(--primary); background: #EBF8FF; color: var(--primary); font-weight: 600; }
.np-tab-btn:disabled { color: var(--text-muted); background: var(--bg); cursor: not-allowed; }

.np-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.np-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.np-switch input { opacity: 0; width: 0; height: 0; }
.np-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 20px;
  cursor: not-allowed;
}
.np-slider::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
}

.np-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.np-cancel-btn {
  padding: 9px 16px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.np-actions #npCreateBtn {
  padding: 9px 18px;
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.np-actions #npCreateBtn:disabled { background: var(--border); cursor: not-allowed; }

/* ---------- 상단 고정 통합 검색바 (모든 화면 공통) + 프로젝트 제목/탭/도구줄 ---------- */
/* 이 넷을 한 그룹으로 묶어 sticky 하나만 건다 - 따로따로 sticky를 걸면 각자 top:0을
   기준으로 겹쳐버려서(2026-08-25, "헤더고정 안 된다" 피드백) 그룹 전체를 고정하는 방식으로. */
.feed-sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
}
.top-search-bar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  justify-content: center;
}
.top-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 8px 16px;
  background: var(--bg);
  width: 420px;
  max-width: 100%;
}
.top-search-input-wrap:focus-within {
  border-color: var(--primary);
  background: #fff;
}
.top-search-icon { font-size: 14px; color: var(--text-muted); }
.top-search-input-wrap input#searchInput {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
}
.top-search-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

/* 검색창 클릭/포커스해야 펼쳐지는 필터+결과 드롭다운 */
.search-expand-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  width: 480px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 14px 16px;
}
.top-search-results {
  margin-top: 10px;
  max-height: 55vh;
  overflow-y: auto;
}
.search-tab {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
}
.search-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.search-result-group-title {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin: 12px 0 4px;
}
.search-result-item {
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.search-result-item:hover { background: var(--bg); }
.search-result-item .result-title { font-weight: 600; }
.search-result-item .result-meta { font-size: 11px; color: var(--text-muted); }

.user-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  /* 아바타가 추가되면서 한 줄에 다 안 들어가 "관리자"/"로그아웃" 글자가 중간에서 줄바꿈되던
     문제(2026-08-20) - 폭이 모자라면 그냥 두 줄로 자연스럽게 나뉘게 한다. */
  flex-wrap: wrap;
  row-gap: 6px;
}
.user-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}
.user-identity { display: flex; align-items: center; gap: 4px; position: relative; }
/* .file-card-avatar(32px)보다 CSS 파일에서 먼저 나오는 클래스라 폭 지정이 밀려서 24px가
   안 먹히던 문제(2026-08-20) - id 선택자로 우선순위를 확실히 이김. */
#sidebarAvatar.sidebar-avatar { width: 24px; height: 24px; font-size: 11px; cursor: pointer; margin-right: 2px; flex-shrink: 0; }
.sidebar-avatar:hover { opacity: 0.8; }
.nickname-edit-btn { font-size: 11px; padding: 2px; }
/* 좁은 사이드바 하단 줄에 그대로 끼워넣으면 옆 버튼들이 밀려서 줄바꿈되던 문제(2026-08-19) -
   그 자리에 끼우지 않고 위로 살짝 뜨는 말풍선처럼 띄운다. */
.nickname-form {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 10;
}
.nickname-form input { width: 130px; }
.user-footer-actions { display: flex; align-items: center; gap: 8px; }
.footer-link {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.footer-link:hover { color: var(--primary); }
#logoutBtn:hover { color: #E53E3E; }

.feed-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 자식(.feed-scroll-body)의 overflow-y:auto가 실제로 먹으려면 필요 (flex 기본값은
                    자식이 내용만큼 커지려 해서 이게 없으면 스크롤이 대신 body/window에서 일어남) */
}
/* 검색바/제목/탭/도구줄(.feed-sticky-header) 밑에서 실제로 스크롤되는 영역. 헤더 그룹이
   여기 바깥에 있어서, 이 안의 sticky 요소(예: .pt-table-header)는 top:0만 줘도 헤더 그룹과
   안 겹치고 바로 그 밑에 이어붙는다(2026-08-25, "업무탭 헤더는 고정 안 된다" 피드백 - JS로
   오프셋 px를 재서 맞추던 이전 방식은 폐기). */
.feed-scroll-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.feed-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: #fff;
  padding-right: 24px;
}
.feed-header {
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 600;
}
.project-header-actions { display: flex; gap: 12px; }
.favorite-star {
  border: none;
  background: none;
  font-size: 20px;
  color: #D69E2E;
  cursor: pointer;
  padding: 0 4px 0 16px;
}
.favorite-star.active::before { content: "★"; }
.favorite-star:not(.active)::before { content: "☆"; }

.project-tab-bar {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.project-tab-btn {
  border: none;
  background: none;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.project-tab-btn:hover { color: var(--text); }
.project-tab-btn.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }

/* overflow-y는 일부러 안 둔다 - 실제 스크롤은 부모 .feed-area가 하는데, 여기 auto를 두면
   업무탭 헤더 sticky(.pt-table-header)가 이 박스 기준으로 잡혀 엉뚱하게 동작한다(2026-08-25). */
.project-subview { width: 100%; align-self: stretch; padding: 16px 24px; max-width: 1300px; margin: 0 auto; }

/* 업무 추가 입력줄+헤더(업무명/상태/담당자/최종수정)를 하나로 묶어 통째로 고정한다
   (2026-08-25 피드백 - "여기까지 고정 안되냐"). 각자 따로 sticky를 걸면 오프셋 계산이
   필요해지고 어긋나기 쉬워서(위 .feed-sticky-header와 같은 이유로 실패했던 전례), 이번엔
   처음부터 묶음 하나만 sticky 처리 - 안의 toolbar/header는 그냥 일반 배치. */
.project-tasks-sticky-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding-top: 10px;
  border-bottom: 1px solid var(--border);
}
.project-tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.project-tasks-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
/* 컨테이너를 1200px로 넓히면서 입력창이 남는 폭을 다 차지해 버튼/아이콘이 상대적으로
   커 보인다는 피드백(2026-08-19) - flex-grow를 없애고 폭을 고정해 빈 공간을 남긴다.
   또한 입력창/버튼이 옆의 그룹화·보기전환 아이콘(feed-toolbar와 동일한 .drive-select-mode-btn,
   12px)보다 커서 한 줄 안에서 크기가 안 맞는다는 피드백(2026-08-19) - 전체를 12px 스케일로 통일 */
.project-tasks-add-row input[type="text"] { flex: none; width: 200px; }
.task-date-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--text-muted);
}
.project-tasks-add-row input[type="date"] { min-width: 130px; }

/* 날짜 빠른입력(2026-08-25) - <input type="date">는 그대로 두되(달력 아이콘 클릭용) 화면에서
   숨기고, 옆에 텍스트칸(260825처럼 타이핑)과 달력 버튼을 대신 보여준다. */
.quick-date-wrap { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.quick-date-text {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 7px;
  font-size: 12px;
  width: 82px;
}
.quick-date-pick-btn {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 6px;
  line-height: 1;
  flex-shrink: 0;
}
.quick-date-pick-btn:hover { background: var(--bg); }
.quick-date-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: none;
  padding: 0;
}
.project-tasks-add-row input,
.project-tasks-add-row select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}
.project-tasks-add-row button {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

/* ---------- 업무 탭 간트차트 ---------- */
.project-tasks-gantt { overflow-x: auto; }
.gantt-scroll { display: inline-block; min-width: 100%; }
.gantt-grid { display: grid; align-items: stretch; }
.gantt-cell {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 6px 8px;
  font-size: 12px;
  box-sizing: border-box;
}
.gantt-header {
  justify-content: center;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}
.gantt-corner { position: sticky; left: 0; z-index: 2; }
.gantt-today { color: var(--primary); background: #EBF4FF; }
.gantt-name {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-row-track { border-bottom: 1px solid var(--border); }
.gantt-bar {
  margin: 4px 2px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
}
.gantt-bar.done { background: #A0AEC0; }
.gantt-undated-note { margin-top: 10px; font-size: 12px; color: var(--text-muted); }

/* ---------- 업무 탭 테이블(+ 그룹화) ---------- */
.project-tasks-view-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.task-group-input {
  width: 100px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}
.project-tasks-table { border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; }
/* 헤더(업무명/상태/담당자/최종수정)는 .project-tasks-sticky-head 안에 있어서 그 부모가
   이미 고정돼있다 - 여기서 따로 position:sticky를 또 걸 필요 없음(2026-08-25). */
.pt-table-header {
  display: grid;
  grid-template-columns: 1fr 90px 90px 100px 24px;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.pt-table-header > span[data-sort-key] { cursor: pointer; user-select: none; }
.pt-table-header > span[data-sort-key]:hover { color: var(--text); }
.pt-table-header > span[data-sort-key] .pt-sort-arrow { display: inline-block; width: 10px; }
.pt-table-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 100px 24px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.pt-table-row .pt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 게시글<->업무 자동연동 쌍이 원래 어느 탭에서 만들어졌는지 표시(2026-08-19) */
.origin-badge { color: var(--text-muted); font-size: 12px; font-weight: 400; }
/* 피드→업무 이동(jumpToLinkedTask) 시 도착한 행을 잠깐 강조(2026-08-19) */
.pt-row-flash { animation: pt-row-flash-anim 1.5s ease-out; }
@keyframes pt-row-flash-anim {
  0% { background: #fff3cd; }
  100% { background: transparent; }
}
.pt-table-row .pt-meta { color: var(--text-muted); font-size: 12px; }
.pt-table-row select.status-select { width: fit-content; }
/* 상태/담당자/최종수정 칸이 오른쪽으로 쏠려 보이던 것 - 가운데 정렬로(2026-08-20 피드백,
   업무명 칸은 지금처럼 왼쪽 정렬 유지). 업무명(1번째)/삭제버튼(5번째)은 그대로 둔다. */
.pt-table-header > *:nth-child(2), .pt-table-header > *:nth-child(3), .pt-table-header > *:nth-child(4),
.pt-table-row > *:nth-child(2), .pt-table-row > *:nth-child(3), .pt-table-row > *:nth-child(4) {
  text-align: center;
  justify-self: center;
}
.pt-delete-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
}
.pt-delete-btn:hover { color: #E53E3E; }

.pt-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pt-group-toggle { width: 14px; text-align: center; color: var(--text-muted); }
.pt-group-count { color: var(--text-muted); font-weight: 400; }
.feed-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.feed-group-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.pt-add-in-group {
  padding: 8px 12px 8px 32px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
}

.project-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.project-file-tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
}
.project-file-tile:hover { background: var(--bg); }
.project-file-tile .pft-icon { font-size: 28px; display: block; margin-bottom: 6px; }
.project-file-tile .pft-name {
  display: block; /* span은 inline이라 overflow/ellipsis가 안 먹혀서 글자가 옆 타일까지 삐져나오던
                      문제(2026-08-20, "너무 정신없다") - 블록으로 만들어야 말줄임이 실제로 적용됨 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pft-kebab {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
}
.pft-kebab:hover { background: #fff; color: var(--primary); }

/* 파일 탭 목록 보기(2026-08-20 피드백: "파일에는 카드보기와 목록보기가 적용이 안되어있어") */
.project-files-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.project-file-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 40px 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.project-file-row:last-child { border-bottom: none; }
.project-file-row:hover { background: var(--bg); }
.project-file-row .pfr-icon { font-size: 16px; flex-shrink: 0; }
.project-file-row .pfr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-file-row .pfr-meta { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.project-file-row .pfr-kebab { top: 50%; transform: translateY(-50%); }

.feed-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
}
.pinned-count { color: var(--text-muted); }
.feed-toolbar select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}
.feed-toolbar .drive-view-toggle { margin-left: auto; }

.file-card-pin {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 17px;
  color: var(--text-muted);
  margin-right: 2px;
  padding: 6px;
  line-height: 1;
  border-radius: 6px;
}
.file-card-pin:hover { background: var(--bg); }
.file-card-pin.active { color: #D69E2E; }
.file-card.pinned { border-color: #D69E2E; background: #FFFDF5; }
.file-card-delete {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 17px;
  color: var(--text-muted);
  margin-right: 2px;
  padding: 6px;
  line-height: 1;
  border-radius: 6px;
}
.file-card-delete:hover { color: #E53E3E; background: var(--bg); }
/* 목록보기에서 펼쳐진 카드에만 뜨는 "접기" 버튼(2026-08-19) */
.file-card-collapse {
  border: 1px solid var(--border);
  background: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  padding: 3px 8px;
  margin-left: 4px;
  flex-shrink: 0;
}
.file-card-collapse:hover { color: var(--primary); border-color: var(--primary); }

/* 피드 목록 보기 (카드 대신 한 줄씩) */
.file-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
}
.file-list-row:first-child { border-radius: 8px 8px 0 0; }
.file-list-row:last-child { border-radius: 0 0 8px 8px; border-bottom: none; }
.file-list-row .flr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list-row .flr-meta { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
/* 접힌 목록행(피드)/업무탭 행 제목 옆에 첨부/이미지/댓글수를 보여주는 표시(2026-08-25 피드백).
   .pt-title(업무탭) 안에서도 쓰이므로 .file-list-row로 범위를 좁히면 안 됨 - 전에 그렇게
   해뒀다가 업무탭에서 아이콘 사이 간격이 아예 안 먹혀서 다닥다닥 붙어보이던 버그가 있었음. */
.flr-marks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-muted);
  vertical-align: middle;
}
.flr-mark { display: inline-flex; align-items: center; gap: 3px; }
.flr-mark svg { flex-shrink: 0; }
/* 마크를 누르면 게시물로 이동하지 않고 그 자리에서 작은 팝업으로 보여준다(2026-08-25 피드백
   - "아이콘 누르면 글까지 가버리는데 작은 팝업으로 확인하는 게 좋겠다"). */
.flr-marks-clickable { cursor: pointer; }
.flr-marks-clickable:hover { color: var(--primary); }

/* 첨부/이미지/댓글 마크 클릭시 뜨는 작은 팝업(2026-08-25) - 게시물로 이동하지 않고 그
   자리에서 바로 확인. */
.quick-attach-popup {
  /* fixed로 두면 화면(뷰포트) 기준 좌표라 위/아래 넘침 계산이 간단해지고, 스크롤하면 닫는
     동작(2026-08-25)과도 자연스럽게 맞음 - absolute+문서좌표였을 때는 화면 아래쪽 게시물
     에서 팝업이 화면 밖으로 넘쳐 안 보이는 문제가 있었음. */
  position: fixed;
  z-index: 60;
  width: 280px;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  font-size: 13px;
  overflow: hidden;
}
/* 확실하게 닫을 수 있는 버튼(2026-08-25 피드백 - "뜬 창을 끌 수가 없어") - 바깥 클릭
   감지와 별개로 항상 눌러서 닫을 수 있게. */
.qap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.qap-close-btn { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 2px 4px; }
.qap-close-btn:hover { color: #E53E3E; }
.qap-body { padding: 10px; overflow-y: auto; min-height: 0; }
.qap-loading, .qap-empty { color: var(--text-muted); font-size: 12px; padding: 8px 4px; text-align: center; }
.qap-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.qap-gallery-grid .comment-image-thumb { width: 100%; height: 56px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.qap-comment-row {
  padding: 6px 2px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.4;
}
.qap-comment-row:first-child { border-top: none; }
.qap-comment-author { font-weight: 600; color: var(--text-muted); font-size: 11px; margin-bottom: 2px; }

/* 캘린더 날짜 클릭 팝업(2026-08-25) - quick-attach-popup과 같은 틀(.qap-header/.qap-body)을
   재사용하되 조금 더 넓게. */
.calendar-day-popup { width: 260px; }
.qap-schedule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border-top: 1px solid var(--border);
}
.qap-schedule-row:first-child { border-top: none; }
.qap-schedule-title { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qap-schedule-meta { flex-shrink: 0; font-size: 11px; color: var(--text-muted); }
.qap-schedule-del { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 11px; flex-shrink: 0; }
.qap-schedule-del:hover { color: #E53E3E; }
.qap-schedule-add-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.qap-schedule-add-row .quick-date-wrap { flex-shrink: 0; }
.qap-schedule-add-row .quick-date-text { width: 66px; }
.qap-schedule-add-row input[type="text"] {
  flex: 1;
  min-width: 90px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 12px;
}
.qap-schedule-add-row select {
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  max-width: 72px;
}
.qap-schedule-add-row button {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.upload-box {
  width: 100%;
  align-self: stretch;
  margin: 12px auto;
  max-width: 1300px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.upload-header { display: flex; gap: 10px; align-items: flex-start; }
.upload-title-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 4px 0 8px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  outline: none;
}
.upload-title-input:focus { border-bottom-color: var(--primary); }
.upload-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.upload-box textarea {
  flex: 1;
  min-height: 28px;
  border: none;
  resize: vertical;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  padding-top: 4px;
}

/* 본문 서식 도구(2026-08-20) - 업로드창/게시물 인라인수정 둘 다 이 스타일을 씀 */
.rich-editor-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rich-editor-toolbar {
  display: flex;
  gap: 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rich-editor-btn {
  position: relative;
  border: none;
  background: none;
  border-radius: 4px;
  width: 26px;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.rich-editor-btn:hover { background: var(--bg); color: var(--primary); }
/* 글자색/배경색 팔레트 - OS마다 다르게 생기는 브라우저 기본 색상선택기 대신 직접 그림
   (2026-08-20 피드백: "사진처럼 이런 도구를 이용해서 편리하게") */
.rich-editor-color-btn-wrap { position: relative; display: inline-block; }
.rich-editor-color-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding-top: 2px; }
.color-btn-bar { display: block; width: 14px; height: 3px; border-radius: 1px; }
.color-btn-bar-underline { background: #E53E3E; } /* 글자색 - 밑줄 띠(문서 편집기 관례) */
.color-btn-bar-highlight { background: #F6E05E; } /* 배경색(형광펜) - 노란 띠로 구분 */
.color-picker-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 20;
  width: 176px;
}
.color-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.color-swatch:hover { transform: scale(1.15); }
.color-picker-hex-row { display: flex; gap: 4px; margin-top: 8px; }
.color-picker-hex-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}
.color-picker-hex-row button {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}
.rich-editor-content {
  min-height: 28px;
  font-size: 13px;
  outline: none;
  line-height: 1.5;
}
.rich-editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}
.rich-editor-content img, .file-card-desc img { max-width: 100%; border-radius: 6px; margin: 4px 0; display: block; }
.rich-editor-content ul, .rich-editor-content ol, .file-card-desc ul, .file-card-desc ol { padding-left: 22px; }
.rich-editor-content a, .file-card-desc a { color: var(--primary); }
.upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.file-picker-btn {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.file-picker-btn:hover { background: var(--bg); }
.file-picker-btn input[type="file"] { display: none; }
.upload-file-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-gallery-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.upload-gallery-preview:empty { margin-top: 0; }
.ugp-thumb { position: relative; width: 64px; height: 64px; }
.ugp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.ugp-thumb button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: #E53E3E;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

/* 사진이 1장뿐이면 1fr이 남는 공간을 다 차지해서 크게 늘어나고, 여러 장이면 90px 근처로
   줄어들어 사진마다 크기가 들쭉날쭉했던 문제(2026-08-20 피드백) - 트랙을 고정폭으로 바꿔서
   장수와 상관없이 항상 같은 크기로 나오게 함. */
.file-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 90px);
  gap: 8px;
  margin: 10px 0;
}
.file-gallery-grid img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.image-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 4px; }
.image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  z-index: 101;
}

.file-card-desc-wrap { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; }
.desc-edit-btn {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}
.desc-edit-btn:hover { color: var(--primary); }
.desc-add-btn {
  border: none;
  background: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}
.file-card-desc-input {
  flex: 1;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.file-card-desc-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.file-card-desc-actions button {
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.file-card-desc-actions button:first-child { background: var(--primary); color: #fff; }
.file-card-desc-actions button:last-child { background: var(--bg); color: var(--text-muted); }

.gallery-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* 갤러리 교체 버튼(✕ 왼쪽에 나란히, 2026-08-19) - 눌러도 반응이 없다는 피드백(2026-08-19)이 있어서
   히트박스를 명확히 하려고 flex 정렬 + z-index를 추가함 */
.gallery-replace-btn { right: 28px; font-size: 10px; }

.upload-tag-input {
  border: none !important;
  outline: none;
  font-size: 12px;
  width: 100px;
  padding: 2px 4px !important;
}
.upload-box select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}
.upload-submit-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.upload-submit-row button {
  padding: 7px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.upload-row button {
  padding: 6px 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.feed-list { width: 100%; align-self: stretch; padding: 0 24px 24px; max-width: 1348px; margin: 0 auto; }

/* ---------- P-NEST 드라이브 ---------- */
.drive-view { width: 100%; align-self: stretch; margin: 16px auto; max-width: 1300px; padding: 0 24px; }
.drive-disk-usage {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.drive-disk-usage::before {
  content: "●";
  color: var(--primary);
  font-size: 8px;
}
.drive-disk-usage .free-amount { color: var(--text); font-weight: 600; }
.drive-disk-usage .free-amount.low { color: #DD6B20; }
.drive-disk-usage .free-amount.critical { color: #E53E3E; }

.drive-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.drive-select-mode-btn {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.drive-select-mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.drive-download-selected-btn {
  flex-shrink: 0;
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.drive-item-checkbox { margin-right: 4px; flex-shrink: 0; }
.drive-list.grid-view .drive-item-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  margin: 0;
}
.drive-view-toggle { display: flex; gap: 4px; flex-shrink: 0; }
.drive-view-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
}
.drive-view-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.drive-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}
.drive-breadcrumb .crumb { cursor: pointer; color: var(--primary); }
.drive-breadcrumb .crumb:hover { text-decoration: underline; }
.drive-breadcrumb .crumb.current { color: var(--text); font-weight: 600; cursor: default; text-decoration: none; }

.drive-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #EBF8FF;
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 10px;
  font-size: 13px;
}
.drive-selected-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-action-buttons { display: flex; gap: 6px; flex-shrink: 0; }
.drive-action-buttons button {
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.drive-action-buttons button:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.6; }
.drive-action-buttons button.danger { color: #E53E3E; border-color: #FEB2B2; }
.drive-action-buttons button.danger:hover:not(:disabled) { background: #FFF5F5; }

.drive-item.selected { background: #EBF8FF; }

.drive-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.drive-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 14px;
}
.drive-item:last-child { border-bottom: none; }
.drive-item:hover { background: var(--bg); }
.drive-item .drive-icon { width: 20px; text-align: center; }
.drive-item .drive-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-item .drive-size { font-size: 12px; color: var(--text-muted); }
.drive-item { position: relative; }
.drive-item-up .drive-name { color: var(--text-muted); font-weight: 600; }
.drive-kebab {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.drive-kebab:hover { color: var(--text); }
.drive-kebab-menu { top: 100%; right: 8px; }
.drive-list.grid-view .drive-kebab {
  position: absolute;
  top: 4px;
  right: 4px;
}

/* 그리드(아이콘) 보기 */
.drive-list.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px;
  border: none;
  background: none;
  padding: 8px;
}
.drive-list.grid-view .drive-item {
  flex-direction: column;
  justify-content: flex-start;
  border: none;
  border-radius: 8px;
  padding: 12px 6px;
  text-align: center;
  gap: 4px;
}
.drive-list.grid-view .drive-item:hover { background: var(--bg); }
.drive-list.grid-view .drive-icon {
  font-size: 40px;
  line-height: 1;
  width: auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
} /* 이모지 아이콘은 폰트 줄높이 때문에 실제 칸 높이가 이미지(정확히 40px)보다 커서
     아래 이름 글자 위치가 서로 어긋나 보이던 문제(2026-08-19) - 높이를 고정해서 맞춤 */
.drive-icon svg, .drive-icon img { width: 20px; height: 20px; display: block; }
.drive-list.grid-view .drive-icon svg, .drive-list.grid-view .drive-icon img { width: 40px; height: 40px; }
.drive-list.grid-view .drive-name {
  white-space: normal;
  word-break: break-all;
  font-size: 12px;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drive-list.grid-view .drive-size { display: none; }

/* ---------- 바로가기 바 ---------- */
.shortcut-bar {
  margin: 16px 24px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #FDF2F8, #F0FDFA);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.shortcut-greeting {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.greeting-text { font-size: 16px; font-weight: 700; color: var(--text); }
.greeting-date { font-size: 15px; font-weight: 600; color: var(--text); }
.shortcut-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shortcut-icons { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; }
.shortcut-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  cursor: pointer;
  position: relative;
}
.shortcut-icon .icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
}
.shortcut-icon .icon-circle.has-favicon {
  background: #fff;
  border: 1px solid var(--border);
}
.shortcut-icon .icon-favicon { width: 24px; height: 24px; }
.shortcut-icon .icon-label {
  font-size: 11px;
  color: var(--text);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shortcut-icon .icon-remove {
  position: absolute;
  top: -4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E53E3E;
  color: #fff;
  border: none;
  font-size: 10px;
  line-height: 16px;
  cursor: pointer;
}
.shortcut-icon.add-tile .icon-circle {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-muted);
}

/* ---------- 홈 위젯 (플로우 참고) ---------- */
.widget-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: row dense; /* 큰 위젯이 어디 있든 작은 위젯들이 빈 칸을 알아서 채움 */
  gap: 16px;
  margin: 16px 24px;
}
/* 위젯 크기는 드래그(자리 교환)가 아니라 "⋮ 메뉴 > 큰 위젯으로 변경"으로 바꾼다 - 크기가
   다른 위젯끼리 드래그로 자리를 맞바꾸려 하면 그리드가 꼬여서 안 움직였던 문제(2026-08-19
   Ryu 지적) 때문에, 플로우처럼 위젯 배치(드래그)와 크기(메뉴)를 분리함. widget-big 클래스는
   특정 위젯 전용이 아니라 어떤 위젯에든 붙을 수 있음(계정별로 저장, JS에서 토글). */
.widget-box.widget-big {
  grid-column: span 2;
  grid-row: span 2;
}
.widget-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  max-height: 420px;
  overflow-y: auto;
  box-sizing: border-box;
}
/* max-height:none이었더니, grid-auto-flow:dense 격자에서 어느 자리에 놓이느냐에 따라 같은
   행(row track)을 공유하는 다른 위젯 때문에 그 행 자체가 비정상적으로 늘어나 위젯이 유독
   커 보이는 문제가 있었다(2026-08-25 피드백 - "다른 데로 이동하니 정상으로 나온다, 저
   자리만 유독 큰가봐"). 상한을 둬서 자리와 무관하게 항상 일정한 크기로. */
.widget-box.widget-big { max-height: 480px; overflow-y: auto; }
.widget-wide { grid-column: 1 / -1; }
.widget-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  position: relative;
  border-left: 3px solid var(--border);
  padding-left: 8px;
}
/* 홈 위젯 제목마다 다른 색 포인트(2026-08-25 피드백 - "조금 이쁘게, 각각 메뉴마다 다르게") -
   프로젝트별 커스텀 위젯(project:ID)은 renderCustomProjectWidgets에서 colorForProject로
   인라인 스타일을 직접 넣어줌(프로젝트 점 색과 통일). */
.widget-box[data-widget-id="calendar"] .widget-title { border-left-color: #3182CE; }
.widget-box[data-widget-id="tasks"] .widget-title { border-left-color: #38A169; }
.widget-box[data-widget-id="projects"] .widget-title { border-left-color: #805AD5; }
.widget-box[data-widget-id="placeholder"] .widget-title { border-left-color: #D69E2E; }
.widget-kebab {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.widget-kebab-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 20;
  font-weight: 400;
}
.widget-kebab-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.widget-kebab-menu button:hover { background: var(--bg); }

.widget-settings-list { margin: 4px 0 8px; }
.widget-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.widget-settings-row input { width: auto; }
.widget-settings-row-remove {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
}
.widget-settings-row-remove:hover { color: var(--danger, #E53E3E); border-color: var(--danger, #E53E3E); }

/* 위젯 그리드 끝에 항상 떠있는 "+ 프로젝트 위젯 추가" 카드(2026-08-20) - 위젯설정 모달을
   거치지 않고 바로 프로젝트 선택 모달을 열게 함 */
.widget-add-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 100px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
}
.widget-add-tile:hover { border-color: var(--primary); color: var(--primary); background: var(--bg); }
.widget-add-tile-plus { font-size: 22px; line-height: 1; }

/* 프로젝트 골라서 위젯으로 추가하는 선택 모달(2026-08-20) */
.project-widget-picker-list { max-height: 320px; overflow-y: auto; margin: 8px 0; }
.project-widget-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
}
.project-widget-picker-row:hover { background: var(--bg); }
.project-widget-picker-row input { width: auto; margin: 0; }
.project-widget-picker-row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.project-widget-picker-empty { padding: 16px 4px; color: var(--text-muted); font-size: 14px; }
/* "위젯 변경" 모드 - 이미 다른 위젯으로 떠있는 프로젝트는 고를 수 없게(2026-08-20) */
.project-widget-picker-row-disabled { color: var(--text-muted); cursor: default; }
.project-widget-picker-row-disabled:hover { background: none; }
.project-widget-picker-already { margin-left: auto; font-size: 12px; color: var(--text-muted); }

/* 위젯 설정 목록에서 시스템 기본 위젯(제거 불가)과 프로젝트 위젯(제거 가능)을 한눈에
   구분하게(2026-08-20, "고정은 메뉴에서 살짝 배경색을 넣어줘도 될거같아") */
.widget-settings-row-fixed { background: var(--bg); margin: 0 -8px; padding: 10px 8px; }
.drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 14px;
}
.widget-box.dragging { opacity: 0.4; }
.widget-box.drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; }
.widget-note { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.widget-body { font-size: 13px; }
/* 프로젝트/최근 업데이트/담당 업무가 늘어날수록 위젯이 한없이 커지던 문제(2026-08-20
   피드백) - 5줄 정도 높이로 고정하고 그 안에서 스크롤하게 함(개수 제한 대신 전부 다 볼 수는
   있게). 실제 행 높이를 재서(project-shortcut 29px, task-item 45px) 5줄에 맞춘 값. */
#widgetProjects, #widgetRecent { max-height: 145px; overflow-y: auto; }
.widget-empty { color: var(--text-muted); text-align: center; padding: 16px 0; }

.task-list { max-height: 225px; overflow-y: auto; }
.task-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.task-item .task-main { flex: 1; min-width: 0; cursor: pointer; }
.task-item .due { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.task-item:hover .task-main { color: var(--primary); }
.task-item .task-meta { font-size: 11px; color: var(--text-muted); }
.task-detail {
  padding: 8px 10px;
  margin: 4px 0 8px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: pre-line;
}
.task-item .actions { display: flex; gap: 4px; }
.task-item .actions button {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.task-item .actions button:hover { color: var(--primary); }

.task-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.task-add-row input[type="text"] { flex: 1; min-width: 100px; }
.task-add-row input[type="date"] { flex: 0 0 130px; min-width: 0; }
.task-add-row select { flex: 0 0 90px; min-width: 0; }
.task-add-row input, .task-add-row select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.task-add-row button {
  padding: 6px 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.project-shortcut {
  padding: 6px 0;
  cursor: pointer;
  color: var(--primary);
}
.project-shortcut:hover { text-decoration: underline; }

.recent-update-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 13px;
}
.recent-update-item:hover .recent-name { color: var(--primary); }
.recent-update-item .recent-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-calendar { width: 100%; border-collapse: collapse; text-align: center; font-size: 12px; }
.mini-calendar th { color: var(--text-muted); font-weight: 500; padding: 4px; }
.mini-calendar td { padding: 6px 4px; cursor: pointer; border-radius: 50%; }
/* :hover:not(.empty)가 .selected(단일 클래스)보다 CSS 우선순위가 높아서, 선택된(파란)
   날짜에 마우스를 올리면 배경만 옅은 회색으로 덮이고 흰 글자색은 그대로 남아 숫자가
   안 보이던 문제(2026-08-25 피드백) - hover 규칙에서 선택된 날짜는 제외. */
.mini-calendar td:hover:not(.empty):not(.selected) { background: var(--bg); }
.mini-calendar td.today { color: var(--primary); font-weight: 700; }
.mini-calendar td.selected { background: var(--primary); color: #fff; }
.mini-calendar td.selected:hover { background: var(--dark); }
.mini-calendar td.empty { color: transparent; cursor: default; }
.mini-calendar td .has-dot::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin: 2px auto 0;
}

.calendar-widget-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 16px;
}
.calendar-widget-layout .widget-body { min-width: 0; }
.schedule-pane {
  border-left: 1px solid var(--border);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.schedule-pane-date { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.schedule-list { flex: 1; min-height: 60px; }
.schedule-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  gap: 6px;
}
.schedule-item .title-input { flex: 1 1 100%; min-width: 120px; }
.schedule-item select { flex: 0 1 90px; min-width: 70px; }
.schedule-item-info { min-width: 0; }
.schedule-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.schedule-item .title-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  margin-right: 6px;
}
.schedule-item .actions { display: flex; gap: 4px; }
.schedule-item .actions button {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.schedule-item .actions button:hover { color: var(--primary); }
.end-date-label { font-size: 11px; color: var(--text-muted); align-self: center; white-space: nowrap; }
.schedule-add-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.schedule-add-row select {
  flex: 0 0 80px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.schedule-add-row input[type="text"] { flex: 1; }
.schedule-add-row input[type="date"] { flex: 0 0 130px; }
.schedule-add-row input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.schedule-add-row button {
  padding: 6px 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- 프로젝트 "캘린더" 탭 전용 큰 월간 그리드(2026-08-19) ---------- */
.pcal-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pcal-nav-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
}
.pcal-nav-btn:hover { color: var(--text); }
.pcal-month-label { font-size: 17px; font-weight: 700; }
.pcal-today-btn {
  margin-left: auto;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}
.pcal-today-btn:hover { color: var(--primary); border-color: var(--primary); }
.pcal-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--bg);
}
.pcal-weekday { text-align: center; padding: 8px 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.pcal-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-top: none;
}
.pcal-cell {
  min-height: 96px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  cursor: pointer;
  overflow: hidden;
}
.pcal-cell:nth-child(7n) { border-right: none; }
.pcal-cell:hover { background: var(--bg); }
.pcal-cell.other-month { color: var(--text-muted); background: #FAFBFC; }
.pcal-cell.selected { background: #EBF4FF; }
.pcal-cell-date { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.pcal-cell.today .pcal-cell-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}
.pcal-event {
  background: #EBF4FF;
  color: var(--primary);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcal-event-more { font-size: 11px; color: var(--text-muted); }
.pcal-day-panel {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}
.pcal-selected-date { font-size: 14px; font-weight: 700; margin-bottom: 10px; }

/* ---------- 파일 카드 (타임라인) ---------- */
.file-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.file-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.file-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
/* 프로필 사진(2026-08-20) - 이니셜 원 안에 실제 사진이 로드되면 꽉 채워서 덮어씌움 */
.avatar-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.file-card-header-text { flex: 1; min-width: 0; }
.file-card-uploader { font-size: 13px; font-weight: 600; }
.file-card-time { font-size: 11px; color: var(--text-muted); }
.post-number { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.file-card-name { font-weight: 700; color: var(--text); font-size: 15px; }
/* 목록보기에서 펼쳐진 카드일 때만 붙는 클래스 - "접기" 버튼 말고 제목/작성자 쪽을 눌러도
   접히게(2026-08-25 피드백). */
.file-card-collapse-trigger { cursor: pointer; }
.file-card-title-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.file-card-title-input {
  flex: 1;
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 14px;
  font-weight: 600;
}
.file-card-title-save, .file-card-title-cancel {
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.file-card-title-save { background: var(--primary); color: #fff; }
.file-card-title-cancel { background: var(--bg); color: var(--text-muted); }
.file-card-desc { font-size: 13px; margin: 10px 0; white-space: pre-wrap; }

/* 필드 행 (그룹/상태/담당자/최종수정) - 플로우처럼 라벨+값을 줄마다 구분 */
.file-field-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.file-field-label { flex: 0 0 56px; font-size: 12px; color: var(--text-muted); }

.file-tags-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-chip {
  background: var(--bg);
  border: 1px solid transparent; /* 그룹별 색상은 JS에서 borderColor로 지정(2026-08-20) */
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
}
.tag-chip .tag-remove { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 10px; margin-left: 2px; }
.tag-add-btn {
  border: 1px dashed var(--border);
  background: none;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.updated-label { font-size: 12px; color: var(--text); }
.status-select {
  border: none;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.status-select.status-예정 { background: #EBF8FF; color: #2B6CB0; }
.status-select.status-진행 { background: #FFFAF0; color: #DD6B20; }
.status-select.status-완료 { background: #F0FFF4; color: #38A169; }
.status-select.status-보류 { background: #F7FAFC; color: #718096; }
.assignee-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}

/* 추가 항목(커스텀 필드) */
.custom-fields-toggle {
  display: block;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  padding: 10px 0 4px;
  cursor: pointer;
  text-align: left;
}
.custom-fields-toggle:hover { color: var(--primary); }
.custom-fields-body { padding: 4px 0 6px; }
.custom-field-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
}
.custom-field-item .cf-key { color: var(--text-muted); flex: 0 0 90px; }
.custom-field-item .cf-value { flex: 1; }
.custom-field-item button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 11px; }
.inline-kv-form { display: inline-flex; gap: 4px; align-items: center; }
/* 그룹 추가 - 기존 그룹명을 누르면 바로 추가되는 칩 버튼 목록(2026-08-20 피드백: "버튼식으로
   ... 눈에 보여야 누를 거 같은데") */
.tag-picker-form { flex-wrap: wrap; }
.tag-picker-chip { cursor: pointer; font-family: inherit; }
.tag-picker-chip:hover { background: var(--bg); }
/* 업로드창에서 적용된 태그 칩과 "클릭하면 추가되는" 후보 버튼이 한 줄에 같이 있으니
   후보 쪽은 점선 테두리로 구분되게 함(2026-08-20 - 칩들을 한 줄에 합쳐달라는 피드백에 맞춰
   추가). */
.known-tags-inline { display: contents; }
.known-tags-inline .tag-picker-chip { border-style: dashed; background: none; }
.known-tags-inline .tag-picker-chip::before { content: "+ "; }
.drive-delete-warn { font-size: 11px; color: #E53E3E; padding: 4px 4px 6px; max-width: 180px; white-space: normal; }
.inline-kv-form input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  width: 90px;
}
.inline-kv-form .inline-kv-ok {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.inline-kv-form .inline-kv-cancel {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.custom-field-add-btn {
  border: 1px dashed var(--border);
  background: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 4px;
}

/* 첨부파일 박스 */
.file-attach-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
}
.file-attach-box:hover { background: var(--bg); }
.file-attach-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-attach-download { color: var(--text-muted); }
/* 갤러리 썸네일(90px)과 크기를 통일함(2026-08-20 피드백: "어차피 클릭하면 사이드바에서
   확대해서 보니까 목록에서는 통일성이 중요") - 예전엔 최대 320px까지 크게 보여줬었음. */
.file-attach-thumb {
  display: block;
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 8px;
  cursor: pointer;
}
/* 첨부파일 교체/삭제 버튼(2026-08-19, "올린 사진 수정 안돼?" 피드백) - 갤러리 ✕ 버튼과 같은
   위치(이미지 우상단)에 나란히 붙임. 교체 버튼이 이미지 밖 위로 떠서 이상하다는 피드백(2026-08-19)
   으로 top/right를 갤러리와 동일하게 맞춤. */
.file-attach-wrap { position: relative; display: inline-block; }
.file-attach-replace-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  top: 4px;
  right: 26px;
}
.file-attach-remove-btn { top: 4px; right: 4px; }

.file-card-footer {
  display: flex;
  gap: 8px;
  align-items: center;
}
.file-card-reactions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
}
.reaction-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}
.reaction-btn.active { border-color: var(--primary); background: #EBF8FF; }
.comment-count-btn {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  margin-left: auto;
}

/* ---------- 댓글 패널 ---------- */
.drive-preview-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drive-preview-body img { max-width: 100%; border-radius: 6px; }
.drive-preview-body iframe { width: 100%; height: 100%; border: none; }
.drive-preview-empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.drive-preview-empty .dpe-icon { font-size: 42px; display: block; margin-bottom: 10px; }

/* 우측 슬라이드 패널(드라이브 미리보기/관리자)을 마우스로 드래그해서 넓게/좁게 볼 수 있게
   (2026-08-20 피드백: "사진이 작게만 보인다") - 패널 왼쪽 테두리에 보이지 않는 드래그
   손잡이를 두고, 끌면 패널 너비가 늘어나거나 줄어든다. */
.panel-resize-handle {
  position: absolute;
  left: -4px;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  z-index: 5;
}
.panel-resize-handle:hover, .panel-resize-handle.dragging { background: rgba(0,0,0,0.06); }

.comment-panel {
  position: fixed;
  right: 0;
  top: 0;
  width: 340px;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 8px rgba(0,0,0,0.05);
  z-index: 50; /* 상단 고정 검색바(z-index:20)가 패널 헤더의 닫기 버튼을 가리고 클릭을 가로채던
                  버그(2026-08-19 발견) - 관리자/드라이브 미리보기 패널 둘 다 이 클래스를 씀 */
}
.comment-panel-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.comment-panel-header button { border: none; background: none; cursor: pointer; font-size: 16px; }
.comment-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
.comment-item { margin-bottom: 12px; font-size: 13px; }
.comment-item .author { font-weight: 600; margin-right: 6px; }
.comment-item .time { color: var(--text-muted); font-size: 11px; }
.comment-input-row {
  display: flex;
  padding: 12px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.comment-input-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.comment-input-row button {
  padding: 8px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* 댓글창은 우측 슬라이드 대신 하단 드로어로 열림(관리자 화면은 .comment-panel 그대로 우측 유지) */
/* 화면 전체 폭을 덮지 않고(사이드바까지 가리던 문제) 가운데로 좁게, 내용에 맞춰 늘어나는 높이 사용 */
.comment-panel.comment-panel-bottom {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 48px));
  height: auto;
  max-height: 64vh;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  z-index: 40;
}
.post-reactions-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 20px 0;
  position: relative; /* 이모지 피커가 엉뚱한 곳에 뜨는 것 방지 */
}
.comment-image-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
}
.comment-image-btn:hover { background: var(--bg); color: var(--primary); border-color: var(--primary); }
.comment-attach-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  max-width: 280px;
  text-decoration: none;
  color: inherit;
}
.comment-attach-box .ca-icon { font-size: 20px; flex-shrink: 0; }
.comment-attach-box .ca-info { min-width: 0; flex: 1; }
.comment-attach-box .ca-name {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-attach-box .ca-size { font-size: 11px; color: var(--text-muted); }
.comment-image-preview-name {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.comment-image-thumb {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
  margin-top: 6px;
  cursor: pointer;
}
/* 댓글 첨부 여러 개(2026-08-20) - 이미지 여러 장이면 나란히, 파일 박스는 세로로 쌓임(이미지
   썸네일과 파일 박스가 같은 wrap 안에 섞여도 자연스럽게 줄바꿈되게 flex-wrap 사용). */
.comment-attachments-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.comment-attachments-wrap .comment-image-thumb { margin-top: 0; }
.comment-attachments-wrap .comment-attach-box { margin-top: 0; }
.comment-actions { display: inline-flex; gap: 6px; margin-left: 6px; }
.comment-actions button {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.comment-actions button:hover { color: var(--primary); }
/* 댓글창을 화면 아무데나 띄우지 않고, 클릭한 게시물 바로 밑으로 옮겨 피드 안에서 펼쳐지게
   (2026-08-19: "댓글창이 아닌 해당 글이 있는 위치로 이동해서 댓글 작성" 피드백) */
.comment-panel.comment-panel-inline {
  position: static;
  transform: none;
  width: auto;
  height: auto;
  max-height: none;
  margin: -1px 0 12px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  z-index: auto;
  /* 본문(흰색 카드)과 그 밑 목록(흰색 리스트뷰 행)이 둘 다 흰색이라 댓글창(var(--bg), 거의 흰색과
     구분 안 됨)까지 셋이 다 같은 색으로 보인다는 피드백(2026-08-25) - 눈에 띄게 더 진한 회색으로. */
  background: #E9EDF2;
}
.comment-panel-inline .comment-list { flex: none; max-height: 340px; padding: 12px 20px; }
.comment-panel-bottom .comment-list { flex: none; max-height: 50vh; padding: 12px 20px; }
.comment-panel-inline .comment-list:empty::after,
.comment-panel-bottom .comment-list:empty::after {
  content: "아직 댓글이 없습니다. 첫 댓글을 남겨보세요.";
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px 0;
}

.comment-item { display: flex; gap: 10px; padding: 10px 0; }
.comment-item .comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.comment-item .comment-body { flex: 1; min-width: 0; }
.comment-item .author { font-weight: 600; margin-right: 6px; }
.comment-item .time { color: var(--text-muted); font-size: 11px; }
.comment-item .comment-content { font-size: 13px; margin-top: 2px; word-break: break-word; }

.comment-reactions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; position: relative; }
.reaction-pill {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}
.reaction-pill.active { border-color: var(--primary); background: #EBF4FF; }
.reaction-add-btn {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}
.reaction-add-btn:hover { color: var(--primary); }
.reaction-picker {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  padding: 6px;
  display: flex;
  gap: 4px;
  z-index: 5;
}
.reaction-picker button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.reaction-picker button:hover { background: var(--bg); }
.reaction-picker .rp-emoji { font-size: 28px; line-height: 1; }
.reaction-picker .rp-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ---------- 관리자 화면 ---------- */
.admin-section { padding: 16px; border-bottom: 1px solid var(--border); }
.admin-section h3 { font-size: 13px; margin-bottom: 10px; color: var(--text-muted); }
.admin-section input:not([type="checkbox"]) {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.admin-section .remember-row { margin-bottom: 10px; }
.admin-section > button {
  width: 100%;
  padding: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.admin-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.admin-user-row .badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #FED7D7;
  color: #C53030;
  margin-left: 6px;
}
.admin-user-row button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

/* ============================================================
   폰 화면 대응 (안드로이드/아이폰 브라우저, 2026-08-20) - VPN으로 사내망 접속하는
   사용자가 폰에서도 쓸 수 있게. 서버/API는 그대로 두고 화면만 폭에 맞게 조정.
   사이드바는 폭을 줄여 넣는 대신, 본문 위를 덮는 서랍(옆에서 슬라이드 인/아웃)으로 동작.
   ============================================================ */
.sidebar-backdrop { display: none; } /* PC에서는 항상 안 씀 - 모바일 미디어쿼리에서만 켬 */

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh; /* 모바일 브라우저 주소창 유무로 100vh가 실제 화면보다 커지는 문제 보정 */
    z-index: 40;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    /* 프로젝트 많아서 사이드바 전체 내용이 화면 높이를 넘으면, 안에 있는 .project-list만
       스크롤되고 그 아래 로그아웃/닉네임(user-footer)은 화면 밖으로 밀려서 아예 닿을 수
       없던 문제(2026-08-20, "스크롤이 안먹혀서 제일아래 로그아웃같은게 안보여") - 사이드바
       자체도 세로로 스크롤되게 해서 항상 끝까지 닿을 수 있게 함 */
    overflow-y: auto;
    overflow-x: hidden;
  }
  .sidebar:not(.collapsed) { transform: translateX(0); }
  /* PC용 .collapsed(width:0)는 접었을 때 폭이 그대로 240px이어야 서랍 슬라이드가 맞음 -
     transform으로만 숨기고 보이므로 폭/테두리는 항상 유지 */
  .sidebar.collapsed { width: 240px; border-right: 1px solid var(--border); }
  .sidebar-expand-btn { z-index: 45; } /* 배경(35)보다 위에 있어야 다시 열기 버튼이 눌림 */

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 35;
  }
  .sidebar-backdrop.hidden { display: none; }

  /* 위젯/통계 그리드를 폰 폭에서는 1~2열로 */
  .widget-mosaic { grid-template-columns: 1fr; margin: 12px; gap: 12px; }
  .widget-box.widget-big { grid-column: auto; grid-row: auto; }
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  #homeStats { margin: 12px; }

  .top-search-bar { padding: 8px 12px; }
  .dashboard-view, .project-subview { padding: 12px; }
  .drive-view { padding: 0 12px; margin: 12px auto; }

  /* 팝업 모달이 좁은 화면을 다 차지하지 않고 여백 있게 */
  .np-modal { width: calc(100vw - 32px); padding: 18px; }

  /* 업무 표(pt-table-*)는 열이 많아 좁은 화면에 다 안 들어갈 수 있으니, 화면 전체가 아니라
     표 영역 안에서만 좌우 스크롤되게 */
  .project-subview { overflow-x: auto; }
}