/* ============================================================================
 * ESP Main CSS
 * - HTML 등장 순서대로 섹션 배치
 * ============================================================================ */
/* =============================================================================
 * 0) 공통 레이아웃 & 토큰 (여러 섹션에서 재사용)
 * ============================================================================= */
/* 레이아웃 안전망 & 블록 헤더 */
.board-block {
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 5px;
  padding: 14px 16px;
}
.board-head { gap: 10px; }
.board-head .emoji { font-size: 20px; line-height: 1; }
/* (옵션) 세그먼트 스위치 */
.seg { display: inline-flex; gap: 6px; background: #eef1f6; border-radius: 5px; padding: 3px; }
.seg-btn { border: 0; background: transparent; padding: 6px 12px; border-radius: 5px; font-size: 13px; }
.seg-btn.active { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.seg-pill { font-size: 12px; padding: 4px 8px; border-radius: 5px; background: #f1f3f8; }
.seg-pill.active { background: #2d66f5; color: #fff; }
/* 리스트/테이블 공용 래퍼 & 헤더 스타일 */
.table-wrap { overflow: hidden; overflow-x: auto; }
.table thead th { background: #f8fafc; font-weight: 600; color: #475569; font-size: 14px;}
.table.v-center td, .table.v-center th { vertical-align: middle; }
/* 점(도트) & 작은 리스트 도트 */
.dot { width: 8px; height: 8px; border-radius: 5px; display: inline-block; }
.dot-danger { background: #ef4444; }
.dot-warning { background: #f59e0b; }
.dot-orange {background: #f97a27;}
.dot-info { background: #3b82f6; }
.li-dot { width: 8px; height: 8px; background:#94a3b8; border-radius:5px; display:inline-block; margin-right:6px; }
/* 칩 & 배지 (여러 영역에서 공용 사용) */
.chip { display:inline-flex; align-items:center; gap:6px; padding: 3px 8px; border-radius: 5px; font-size: 12px; border:1px solid transparent; }
.chip-primary { background:#e8f0ff; color:#1046e0; border-color:#dbe6ff; }
.chip-green { background:#e8fbef; color:#0a8f41; border-color:#c9f3d6; }
.chip-gray { background:#eef1f6; color:#475569; border-color:#e3e7ef; }
.chip-pink { background:#ffdede; color:#ea6a6a; border-color:#ffcaca; }
.badge { border-radius: 5px; padding: 4px 8px; font-size: 12px; font-weight: 600; }
.badge-amber { background:#fff3cd; color:#8a6d3b; }
.badge-gray { background:#e9ecef; color:#495057; }
.badge-teal { background:#d1fae5; color:#065f46; }
/* 검색박스(돋보기 아이콘 포함) */
.searchbox { position: relative; width: 240px; }
.searchbox .ico-search {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; background-size: 16px 16px; background-repeat: no-repeat; pointer-events: none;
}
.searchbox input { padding-left: 32px; }
/* 툴팁이 모달 위로 뜨도록 고정 (전역 1회 정의) */
.tooltip.tooltip-on-modal { z-index: 200000 !important; /* 모달(1055)보다 위 */ }
/* 오프캔버스 z-index(사이드바보다 위) */
.offcanvas-backdrop { z-index: 1080 !important; }
.offcanvas { z-index: 1085 !important; }

/* =============================================================================
 * 1) [좌] 공지사항 카드 리스트 (main.html: 첫 번째 컬럼)
 * ============================================================================= */
/* 간단 패널 레이아웃 */
.panel { background: #fff; border: 1px solid #edf0f5; border-radius: 5px; padding: 10px; height: 100%; }
.panel-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #334155; }
.panel-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 5px; }
/* 공지 카드(링크) */
.note { display:block; border:1px solid #eef1f6; background:#f9fafb; border-radius:5px; padding:15px 10px; text-decoration:none; color:#595959; }
.note:hover { background:#f3f4f6; }
.note-title { font-weight:700; }
.note-sub { font-size:12px; color:#64748b; margin-top:2px; }
/* 섹션/타이틀용 배지 (공지/워크 공용 아이콘 컨테이너) */
.notice-badge,
#workDetailModal .work-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px; background: transparent;
}
.notice-badge { color:#f97a27; }      /* 공지 포인트 컬러 */
#workDetailModal .work-badge { height: 40px; color:#2d66f5; } /* WORK 모달에서 사용 */
/* =============================================================================
 * 2) 공지사항 상세 모달 (#noticeDetailModal)
 * ============================================================================= */
#noticeDetailModal .notice-modal{
  border: 0; border-radius: 5px; overflow: hidden;
  box-shadow: 0 14px 36px rgba(20,20,40,.22);
  border-top: 3px solid #f97a27;           /* 상단 포인트 라인 */
  animation: ndm-pop .18s ease-out;
}
@keyframes ndm-pop { from{ transform: translateY(6px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }
/* 헤더: 선만, 여백 정리 */
#noticeDetailModal .modal-header{
  background: transparent;
  border-bottom: 1px solid #E5E7EB;
  padding: 14px 16px;
}
/* 섹션 타이틀 */
#noticeDetailModal .section-title{
  font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; color: #64748B; margin-bottom: .6rem;
}
/* 메타 정보 바 */
#noticeDetailModal .notice-meta{
  font-size: .9rem; color:#475569; background: transparent;
  border:1px solid #E2E8F0; border-radius: 5px;
  padding: 10px 12px; margin-bottom: 12px;
  display:flex; align-items:center; gap:8px; min-height:40px;
}
/* 본문 카드 */
#noticeDetailModal .notice-body-card{
  font-size: .9rem; color:#475569; background: transparent;
  border:1px solid #E2E8F0; border-radius: 5px;
  padding: 10px 12px; margin-bottom: 12px;
  display:flex; align-items:center; gap:8px; min-height:40px;
}
#noticeDetailModal .notice-body-card p{ margin-bottom:.6rem; }
#noticeDetailModal .notice-body-card h1,
#noticeDetailModal .notice-body-card h2,
#noticeDetailModal .notice-body-card h3{ font-size:1rem; margin:.75rem 0 .4rem; font-weight:700; }
#noticeDetailModal .notice-body-card a{ text-decoration: underline; }
#noticeDetailModal .notice-body-card blockquote{ margin:.6rem 0; padding:.4rem .8rem; border-left:3px solid #E2E8F0; color:#475569; }
#noticeDetailModal .notice-body-card table{ width:100%; border-collapse:collapse; border:1px solid #E2E8F0; border-radius:6px; overflow:hidden; }
#noticeDetailModal .notice-body-card th,
#noticeDetailModal .notice-body-card td{ padding:.5rem .6rem; border-bottom:1px solid #E2E8F0; }
/* 아이콘형 버튼 (복사/전체화면) */
#noticeDetailModal .btn-icon{
  --size:32px; width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #E2E8F0; border-radius:5px; background:transparent; padding:0;
  transition: box-shadow .12s ease, border-color .12s ease, transform .02s ease;
}
#noticeDetailModal .btn-icon:hover{ border-color:#cbd5e1; box-shadow:0 1px 0 rgba(0,0,0,.04); }
#noticeDetailModal .btn-icon:active{ transform: translateY(1px); }
#noticeDetailModal .btn-icon svg{ width:16px; height:16px; color:#64748B; }
/* 푸터 정렬 */
#noticeDetailModal .modal-footer{ border-top:0; padding-top:0; justify-content: space-between; }
/* 공지 모달 전체화면 시 */
#noticeDetailModal .modal-dialog.modal-fullscreen { width: 100%; max-width: none; margin: 0; height: 100%; }
#noticeDetailModal .modal-dialog.modal-fullscreen .modal-content { border-radius: 0; height: 100%; }
#noticeDetailModal .modal-dialog.modal-fullscreen .notice-modal{ border-top-width: 2px; }
/* =============================================================================
 * 3) 공지사항 등록 Offcanvas (#offcanvasNotice)
 * ============================================================================= */
#offcanvasNotice.offcanvas-end { --bs-offcanvas-width: 50vw; }  /* 데스크톱 기본 50% */
.offcanvas-header{ border-top:3px solid #f97a27;border-bottom: 1px solid #E5E7EB; }
.notice-new-text { font-size: .9rem; color: #475569; }
/* =============================================================================
 * 4) 정보/기술 자료 공유 (Kanban)
 * ============================================================================= */
.kanban{ display:grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap:1rem; }
.kan-col{ background:#fff; border:1px solid #e9ecef; border-radius:5px; display:flex; flex-direction:column; }
.kan-col-head{ padding:.75rem 1rem; border-bottom:1px solid #e9ecef; font-weight:600; display:flex; align-items:center; gap:.5rem; background: #f9fafb;}
.kan-col-body{ padding: .75rem; display:grid; gap:.5rem; max-height: 46vh; overflow:auto; }
.kan-card{ border:1px solid #e9ecef; border-radius:5px; padding:.75rem; background:#fff; }
/* (옵션) 헤더 제거형 간격 조정 & 좌측 열 높이 맞춤 */
.panel.headless .panel-body{ margin-top:0; }
.notice-col .panel{ height:100%; }

/* ---- 공유 오프캔버스 (공지와 톤 통일) ---- */
#offcanvasSharing.offcanvas-end { --bs-offcanvas-width: 50vw; }
#offcanvasSharing .offcanvas-header{
  border-top: 3px solid #3b82f6;
  border-bottom: 1px solid #E5E7EB;
}
/* 좁은 화면에서는 전체폭 */
@media (max-width: 991.98px){
  #offcanvasSharing.offcanvas-end { --bs-offcanvas-width: 100vw; }
}
/* =============================================================================
 * 4-1) 정보/기술 자료 공유 - 파일 상세 모달 (#sharingFileModal)
 *      WORK/NOTICE 모달과 톤을 맞춘 스킨
 * ============================================================================= */
 #sharingFileModal .sharing-modal{
  border: 0; border-radius: 5px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(20,20,40,.20);
  border-top: 3px solid #3b82f6;                 /* 상단 포인트 라인(블루) */
  animation: sdm-pop .18s ease-out;
}
@keyframes sdm-pop { from{ transform: translateY(6px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
#sharingFileModal .modal-header{
  background: transparent;
  border-bottom: 1px solid #E5E7EB;
  padding: 14px 16px;
}
#sharingFileModal .modal-footer{
  border-top: 0;
  padding-top: 0;
  justify-content: flex-end;
}
/* 헤더 아이콘 배지(공지/워크와 일관성) */
#sharingFileModal .sharing-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px; color:#3b82f6;
}
/* 메타 카드: WORK 모달의 .work-meta와 동일한 톤 */
#sharingFileModal .sharing-meta{
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
#sharingFileModal .sharing-meta .sm-item{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 36px; font-size: .9rem;
}
#sharingFileModal .sharing-meta .sm-label{
  color:#64748b; font-size:.875rem;
}
#sharingFileModal .sharing-meta .sm-value{
  font-weight: 600;
}
/* 프리뷰 카드 */
#sharingFileModal .preview-head{
  font-size: .875rem; color:#64748b; margin: 12px 0 6px;
}
#sharingFileModal .sharing-preview-card{
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  padding: 16px;
  max-height: 40vh;
  overflow: auto;
}
#sharingFileModal #sharingPreviewWrap.d-none{ display:none !important; }
/* 모바일 1열 전환 */
@media (max-width: 575.98px){
  #sharingFileModal .sharing-meta{ grid-template-columns: 1fr; }
}
/* =============================================================================
 * 5) [다음 행 - 숨김] 주간업무보고 & 고객사 테이블
 *    - main.html에서는 display:none 상태지만 스타일은 유지
 * ============================================================================= */
/* 테이블 관련 스타일은 0) 공통 토큰에서 정의됨 */
/* =============================================================================
 * 6) WORK LIST (테이블 + 필터/검색 + 진행상태 + 모달)
 * ============================================================================= */
/* 필터 칩 버튼 */
.btn-chip { font-size:12px; border:1px solid #e1e5ee; background:#fff; border-radius:5px; padding:6px 10px; }
.btn-chip.active { background:#2d66f5; color:#fff; border-color:#2d66f5; }
/* 진행 상태 뱃지 */
.state { font-size:12px; padding:3px 8px; border-radius: 5px; font-weight:600; }
.state-blue { background:#e7efff; color:#1554f6; }
.state-gray { background:#eef1f6; color:#64748b; }
.state-green { background:#e8fbef; color:#0a8f41; }
/* Slim Progress (필요 시) */
.progress-slim { height: 8px; background:#eef2f7; border-radius: 5px; overflow: hidden; }
.progress-slim .bar { height: 100%; background:#2d66f5; }
/* WORK 상세 모달 */
#workDetailModal .work-modal{
  border: 0; border-radius: 5px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(20,20,40,.20);
  border-top: 3px solid #2e7d32; 
}
#workDetailModal .modal-header{
  background: transparent; border-bottom: 1px solid #E5E7EB; padding: 15px;
}
#workDetailModal .modal-body{ background: transparent; padding: 18px 20px 22px 20px; }
#workDetailModal .modal-footer{ border-top: 0; padding-top: 0; }
/* 메타 카드(2열 그리드) */
#workDetailModal .work-meta,
.offcanvas-body .work-meta{
  background: transparent; border: 1px solid #E2E8F0; border-radius: 5px;
  padding: 10px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
}
#workDetailModal .work-meta .wm-item,
.offcanvas-body .work-meta .wm-item{ justify-content: flex-start; gap: 12px; font-size: .9rem; }
#workDetailModal .wm-item,
.offcanvas-body .wm-item{ display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
#workDetailModal .wm-label,
.offcanvas-body .wm-label{ color: #64748b; font-size: .875rem; text-align: left; }
#workDetailModal .wm-value,
.offcanvas-body .wm-value{ font-weight: 600; text-align: left; }
#workDetailModal .wm-span2{ grid-column: 1 / -1; }
/* 설명 영역 */
#workDetailModal .work-desc-head,
.offcanvas-body .work-desc-head{ font-size: .875rem; color: #64748b; margin-bottom: 6px; }
#workDetailModal .work-desc-card,
.offcanvas-body .work-desc-card{
  background: transparent; border: 1px solid #E2E8F0; border-radius: 5px; padding: 16px; font-size: .9rem;
}
#workDetailModal .work-desc-card p { margin-bottom: .6rem; }
#workDetailModal .work-desc-card ul, #workDetailModal .work-desc-card ol { margin-bottom: .6rem; }
#workDetailModal .work-desc-card li { margin: .25rem 0; }
/* WORK 모달: 아이콘형 버튼 */
#workDetailModal .btn-icon{
  --size:32px; width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #E2E8F0; border-radius:5px; background:transparent; padding:0;
  transition: box-shadow .12s ease, border-color .12s ease, transform .02s ease;
}
#workDetailModal .btn-icon:hover{ border-color:#cbd5e1; box-shadow:0 1px 0 rgba(0,0,0,.04); }
#workDetailModal .btn-icon:active{ transform: translateY(1px); }
#workDetailModal .btn-icon svg{ width:16px; height:16px; color:#64748B; }
/* WORK 모달 전체화면 */
#workDetailModal .modal-dialog.modal-fullscreen { width: 100%; max-width: none; margin: 0; height: 100%; }
#workDetailModal .modal-dialog.modal-fullscreen .modal-content { border-radius: 0; height: 100%; }
#workDetailModal .modal-dialog.modal-fullscreen .work-modal{ border-top-width: 2px; }
/* =============================================================================
 * 7) [다음 행 - 숨김] 팀원일정
 *    - 공용 토큰/표 스타일 재사용
 * ============================================================================= */
/* =============================================================================
 * 8) 반응형 (화면폭별 레이아웃 조정)
 * ============================================================================= */
/* 오프캔버스: 태블릿/모바일에서는 전체폭로 확장 */
@media (max-width: 991.98px){
  #offcanvasNotice.offcanvas-end { --bs-offcanvas-width: 100vw; }
}
/* WORK 메타 1열 전환 (아주 좁은 화면) */
@media (max-width: 575.98px){
  #workDetailModal .work-meta{ grid-template-columns: 1fr; }
}
/* 검색박스 폭 & 모바일 숨김 처리 (상단 툴바 좌우 정돈) */
@media (max-width: 991.98px){
  .searchbox { width: 200px; }
}
@media (max-width: 767.98px){
  .filters { justify-content: flex-start; }
  .searchbox { display:none; }
}

/* 공통 */
.cursor-pointer{ cursor: pointer; }
/* 로그인 레이아웃 전체 배경 */
.auth-layout {
  min-height: 100vh;
  background: #f5f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 중앙 컨테이너 */
.auth-container {
  width: 100%;
  padding: 1rem;
}
/* 로그인 카드 */
.auth-card {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.75rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.auth-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-logo {
  height: 36px;
  margin-bottom: 0.75rem;
}

.auth-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #302F85;
}